Add output action to use image as Flux reference

pages/index.vue

@@ -1592,6 +1592,14 @@
             >
               Use as input still
             </button>
+            <button
+              type="button"
+              class="inline-flex rounded-2xl border border-amber-300/40 px-4 py-2 text-sm text-amber-100 hover:border-amber-300/70 disabled:opacity-50"
+              :disabled="usingReferenceBusy"
+              @click="useOutputAsFluxReference"
+            >
+              {{ usingReferenceBusy ? 'Loading reference…' : 'Use as reference' }}
+            </button>
             <button
               type="button"
               class="inline-flex rounded-2xl border border-white/15 px-4 py-2 text-sm hover:border-amber-300/50 disabled:cursor-not-allowed disabled:opacity-50"
@@ -7444,6 +7452,28 @@ async function editImageV2() {
   }
 }
 
+const usingReferenceBusy = ref(false)
+
+async function useOutputAsFluxReference() {
+  if (!editResultUrl.value || usingReferenceBusy.value) return
+  usingReferenceBusy.value = true
+  try {
+    const blob = await $fetch<Blob>(editResultUrl.value, { responseType: 'blob' })
+    if (!blob?.size) throw new Error('Empty image')
+    const reference = new File([blob], `${editDownloadName.value || 'reference'}.png`, { type: blob.type || 'image/png' })
+    selectStudioKind('image')
+    setV2Engine('flux')
+    resetImage()
+    v2Mode.value = editPassQueue.value.length ? 'iterate' : 'generate'
+    setEditRef(reference)
+    toast('Added to Flux Klein reference photo. Your prompt will generate a new image.')
+  } catch {
+    toast('Could not load that image as a reference')
+  } finally {
+    usingReferenceBusy.value = false
+  }
+}
+
 async function useEditAsInput() {
   if (!editResultUrl.value) return
   const stillId = lastV2StillId.value || stillIdFromLibraryUrl(editResultUrl.value)