Overhaul Studio controls and add image batch from one still.

Video and Image pickers, thumbwheels, aspect icons, and a Scale to MP paddle; extra prompts default to batch so each run starts from the original image. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-30 23:16:19 -05:00
parent 8df265cbf3
commit 755aaeede8
17 changed files with 791 additions and 233 deletions
@@ -0,0 +1,88 @@
+<template>
+  <div class="segment-readout flex h-11 items-center justify-center gap-px px-1.5" aria-hidden="true">
+    <template v-for="(ch, i) in chars" :key="i">
+      <span v-if="ch === '.'" class="dot on" />
+      <span v-else class="digit" :data-n="ch">
+        <i class="seg a" :class="{ on: lit(ch, 'a') }" />
+        <i class="seg b" :class="{ on: lit(ch, 'b') }" />
+        <i class="seg c" :class="{ on: lit(ch, 'c') }" />
+        <i class="seg d" :class="{ on: lit(ch, 'd') }" />
+        <i class="seg e" :class="{ on: lit(ch, 'e') }" />
+        <i class="seg f" :class="{ on: lit(ch, 'f') }" />
+        <i class="seg g" :class="{ on: lit(ch, 'g') }" />
+      </span>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+const MAP: Record<string, string> = {
+  '0': 'abcdef',
+  '1': 'bc',
+  '2': 'abged',
+  '3': 'abcdg',
+  '4': 'fgbc',
+  '5': 'afgcd',
+  '6': 'afedcg',
+  '7': 'abc',
+  '8': 'abcdefg',
+  '9': 'abcdfg',
+  '-': 'g'
+}
+
+const props = defineProps<{
+  value: string
+}>()
+
+const chars = computed(() => {
+  const raw = String(props.value || '0')
+  return raw.split('').filter(ch => ch === '.' || MAP[ch])
+})
+
+function lit(ch: string, seg: string) {
+  return (MAP[ch] || '').includes(seg)
+}
+</script>
+
+<style scoped>
+.segment-readout {
+  background:
+    linear-gradient(180deg, rgba(9, 9, 11, 0.95), rgba(24, 24, 27, 0.9));
+  box-shadow:
+    inset 0 2px 8px rgba(0, 0, 0, 0.75),
+    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
+}
+.digit {
+  position: relative;
+  width: 0.72rem;
+  height: 1.15rem;
+}
+.seg {
+  position: absolute;
+  background: rgba(251, 191, 36, 0.1);
+  border-radius: 1px;
+}
+.seg.on {
+  background: #fbbf24;
+  box-shadow: 0 0 6px rgba(251, 191, 36, 0.65);
+}
+.a { top: 0; left: 2px; right: 2px; height: 2px; }
+.d { bottom: 0; left: 2px; right: 2px; height: 2px; }
+.g { top: calc(50% - 1px); left: 2px; right: 2px; height: 2px; }
+.f { top: 2px; left: 0; width: 2px; height: calc(50% - 3px); }
+.b { top: 2px; right: 0; width: 2px; height: calc(50% - 3px); }
+.e { bottom: 2px; left: 0; width: 2px; height: calc(50% - 3px); }
+.c { bottom: 2px; right: 0; width: 2px; height: calc(50% - 3px); }
+.dot {
+  width: 3px;
+  height: 3px;
+  margin: 0 1px 1px;
+  align-self: flex-end;
+  border-radius: 1px;
+  background: rgba(251, 191, 36, 0.1);
+}
+.dot.on {
+  background: #fbbf24;
+  box-shadow: 0 0 6px rgba(251, 191, 36, 0.65);
+}
+</style>