diff --git a/components/AspectRatioPick.vue b/components/AspectRatioPick.vue new file mode 100644 index 0000000..56b5759 --- /dev/null +++ b/components/AspectRatioPick.vue @@ -0,0 +1,42 @@ + + + diff --git a/components/DurationField.vue b/components/DurationField.vue index f97dbce..d34421d 100644 --- a/components/DurationField.vue +++ b/components/DurationField.vue @@ -17,17 +17,16 @@ > s - +
+ +

{{ hint }}

@@ -51,7 +50,6 @@ const draft = ref(formatDuration(model.value)) const scrubbing = ref(false) const slider = computed(() => Math.min(SLIDER_MAX, Math.max(SLIDER_MIN, model.value))) -const sliderPct = computed(() => ((slider.value - SLIDER_MIN) / (SLIDER_MAX - SLIDER_MIN)) * 100) watch(model, (value) => { if (!scrubbing.value) draft.value = formatDuration(value) @@ -72,8 +70,8 @@ function commit() { draft.value = formatDuration(model.value) } -function onSlider(event: Event) { - model.value = clampDuration(Number((event.target as HTMLInputElement).value)) +function onSliderValue(value: number) { + model.value = clampDuration(value) draft.value = formatDuration(model.value) } diff --git a/components/LampToggle.vue b/components/LampToggle.vue new file mode 100644 index 0000000..1203e31 --- /dev/null +++ b/components/LampToggle.vue @@ -0,0 +1,176 @@ + + + + + diff --git a/components/LoraSelect.vue b/components/LoraSelect.vue index d1518b8..0100840 100644 --- a/components/LoraSelect.vue +++ b/components/LoraSelect.vue @@ -42,39 +42,27 @@ Remove -
- - +
+ +
@@ -107,7 +95,6 @@ import { LORA_STRENGTH_MIN, LORA_STRENGTH_STEP, clampLoraStrength, - formatLoraStrength, loraDisplayName, loraIdentityKey, makeLoraStackItem, @@ -208,8 +195,8 @@ function onDragEnd() { dragOverIndex.value = null } -function setStrength(index: number, key: 'strengthModel' | 'strengthClip', event: Event) { - const value = clampLoraStrength((event.target as HTMLInputElement).value) - model.value = model.value.map((item, i) => i === index ? { ...item, [key]: value } : item) +function setStrength(index: number, key: 'strengthModel' | 'strengthClip', value: number) { + const next = clampLoraStrength(value) + model.value = model.value.map((item, i) => i === index ? { ...item, [key]: next } : item) } diff --git a/components/SegmentDigits.vue b/components/SegmentDigits.vue new file mode 100644 index 0000000..c9a86cd --- /dev/null +++ b/components/SegmentDigits.vue @@ -0,0 +1,88 @@ + + + + + diff --git a/components/Thumbwheel.vue b/components/Thumbwheel.vue new file mode 100644 index 0000000..19dd255 --- /dev/null +++ b/components/Thumbwheel.vue @@ -0,0 +1,158 @@ + + + + + diff --git a/pages/index.vue b/pages/index.vue index 927bd87..b9c2484 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -12,30 +12,34 @@
-
+
-

Input

@@ -335,13 +339,33 @@
+
+ + +
-

Pass {{ index + 2 }}

+

{{ imagePassMode === 'batch' ? 'Prompt' : 'Pass' }} {{ index + 2 }}

-
+

MiniMax graph

-

Aspect ratio

-
- -
+

{{ imageAspectHelp }}

-
- - - - +
+ + +
+
-

Flux.2 Klein 9B. Shares the desktop GPU with video.

+

Legacy Klein v1 still. New Image work uses Flux / Krea above. This graph stays for older library stills.

-

Aspect ratio

-
- -
+

{{ imageAspectHelp }}

@@ -932,20 +949,7 @@ Generation settings
-

Aspect ratio / resolution

-
- -
+

Output {{ outputSize.width }} × {{ outputSize.height }}{{ aspect === 'auto' ? (file ? ' · matching the still' : ' · 16:9 until a still is loaded') : '' }}

@@ -956,30 +960,15 @@
- CFG / Guidance scale -
- - -
-

{{ ltxVideo ? 'Default 3.5 for PinkCherry' : (turbo ? 'Default 1.5 with Turbo LoRA' : 'Default 4.0 with High-Fidelity') }}. Type 0–20 (0.1 steps); the box is the source of truth.

+ +

{{ ltxVideo ? 'Default 3.5 for PinkCherry' : (turbo ? 'Default 1.5 with Turbo LoRA' : 'Default 4.0 with High-Fidelity') }}. Hover and scroll ±0.1, Shift-scroll ±1. Drag the wheel up and down.