@adminide-stack/yantra-mobile 12.0.128 → 12.0.129-alpha.1

package/lib/features/canvas/CanvasGeneratePanel.js

@@ -1,4 +1,4 @@
-import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useMemo,useState,useRef,useEffect}from'react';import {View,ScrollView,Text,TextInput,ActivityIndicator,StyleSheet}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {resultUrl,friendlyMediaError,generationImageUrl,generationMediaUrl}from'./videoEditor/mediaActions.js';import {unwrapProxyUrl}from'./videoEditor/remoteMediaClient.js';import {STATIC_IMAGE_MODELS,normalizeModels,promptAudioModels,STATIC_VIDEO_MODELS,generationCapabilities,videoReferenceCap,modelThatReadsImages,videoDurationOptions,buildVideoGenerateParams}from'./generationModels.js';import {MAX_REFERENCE_IMAGES,PROMO_MAX_REFERENCES,addReference,imageLaneCall}from'./generatorReferences.js';import {modelForCommand,parseCommandLine,matchCommands,laneForCommand,findCommand,missingFor,MISSING_LABEL,VIDEO_INPUT_MODEL,commandPrompt}from'./generatorCommands.js';import {ReferenceStrip,StillRoleSwitch,FrameSlot}from'./GeneratorReferenceSlots.js';import {CanvasTemplatesPanel}from'./CanvasTemplatesPanel.js';import {nearestAspect}from'./studioLooks.js';import {ensureFetchableMediaUrls,ensureFetchableMediaUrl}from'./mediaUrls.js';import {DEFAULT_PROMO_PRESET,EMPTY_PROMO_CONTEXT,defaultPromoQuality,PROMO_PRESETS,PROMO_DURATIONS,PROMO_ASPECT_RATIOS,PROMO_PLAYBOOKS,lookupPromoPreset,designPromoProject,PROMO_CONNECTOR}from'./promoVideo.js';import {PromoContextFields,PromoProductionFields}from'./PromoContextFields.js';import {startPromoTask}from'./canvasTasks.js';import {CLIP_COUNT_CHOICES,CLIP_ASPECT_RATIOS,CLIP_RESOLUTIONS,buildClipRunParams,parseClipRunResult}from'./videoClips.js';import {NativeDictationBar}from'../audio-input/NativeDictationBar.js';import {useCanvasTheme,themedStyles}from'./canvasTheme.js';import {Segmented,Pressable,pressedStyle,SPACE,RADIUS,HIT,TYPE}from'./canvasUi.js';var __defProp = Object.defineProperty;
+import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useMemo,useState,useRef,useEffect}from'react';import {View,ScrollView,Text,TextInput,ActivityIndicator,StyleSheet}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {resultUrl,friendlyMediaError,generationImageUrl,generationMediaUrl}from'./videoEditor/mediaActions.js';import {unwrapProxyUrl}from'./videoEditor/remoteMediaClient.js';import {STATIC_IMAGE_MODELS,normalizeModels,promptAudioModels,STATIC_VIDEO_MODELS,generationCapabilities,videoReferenceCap,modelThatReadsImages,videoDurationOptions,buildVideoGenerateParams}from'./generationModels.js';import {MAX_REFERENCE_IMAGES,PROMO_MAX_REFERENCES,addReference,imageLaneCall}from'./generatorReferences.js';import {modelForCommand,parseCommandLine,matchCommands,laneForCommand,findCommand,missingFor,MISSING_LABEL,VIDEO_INPUT_MODEL,commandPrompt}from'./generatorCommands.js';import {ReferenceStrip,StillRoleSwitch,FrameSlot}from'./GeneratorReferenceSlots.js';import {CanvasTemplatesPanel}from'./CanvasTemplatesPanel.js';import {nearestAspect}from'./studioLooks.js';import {ensureFetchableMediaUrls,ensureFetchableMediaUrl}from'./mediaUrls.js';import {DEFAULT_PROMO_PRESET,EMPTY_PROMO_CONTEXT,defaultPromoQuality,defaultNarration,PROMO_PRESETS,PROMO_DURATIONS,PROMO_ASPECT_RATIOS,PROMO_PLAYBOOKS,lookupPromoPreset,designPromoProject,PROMO_CONNECTOR}from'./promoVideo.js';import {PromoContextFields,PromoProductionFields}from'./PromoContextFields.js';import {startPromoTask}from'./canvasTasks.js';import {runTrackedGeneration}from'./generationTasks.js';import {DirectorPill,DirectorSheet}from'./generator/DirectorSheet.js';import {EMPTY_DIRECTION,directedPrompt}from'./generator/direction.js';import {ShotPanel,ShotStructureButton}from'./generator/ShotPanel.js';import {briefWorthStructuring}from'./generator/shot.js';import {useShotSpec}from'./generator/useShotSpec.js';import {RunLogCard}from'./generator/RunLogCard.js';import {logStep,startRun,finishRun,failRun}from'./generator/runLog.js';import {CLIP_COUNT_CHOICES,CLIP_ASPECT_RATIOS,CLIP_RESOLUTIONS,buildClipRunParams,parseClipRunResult}from'./videoClips.js';import {NativeDictationBar}from'../audio-input/NativeDictationBar.js';import {useCanvasTheme,themedStyles}from'./canvasTheme.js';import {Segmented,Pressable,pressedStyle,SPACE,RADIUS,HIT,TYPE}from'./canvasUi.js';var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -55,6 +55,7 @@ function CanvasGeneratePanel({
   onPromoQueued,
   pickStill
 }) {
+  var _a;
   const theme = useCanvasTheme();
   const styles = useMemo(() => makeStyles(theme), [theme]);
   const [mode, setMode] = useState("image");
@@ -91,6 +92,13 @@ function CanvasGeneratePanel({
   const [promoNarrator, setPromoNarrator] = useState("");
   const [promoUseCases, setPromoUseCases] = useState("");
   const [promoDesignModel, setPromoDesignModel] = useState("");
+  const [videoResolution, setVideoResolution] = useState("1080p");
+  const [promoCaptions, setPromoCaptions] = useState(false);
+  const [promoNarration, setPromoNarration] = useState(() => defaultNarration(DEFAULT_PROMO_PRESET));
+  const [direction, setDirection] = useState(EMPTY_DIRECTION);
+  const [directorOpen, setDirectorOpen] = useState(false);
+  const [runLog, setRunLog] = useState(null);
+  const shot = useShotSpec(runAction);
   const pendingCommand = useRef(null);
   useEffect(() => {
     if (frameUrl) setStartFrame(frameUrl);
@@ -126,7 +134,7 @@ function CanvasGeneratePanel({
     let cancelled = false;
     const job = mode === "image" ? runAction("yantra-image-generation", "YANTRA_GEMINI_IMAGE_LIST_MODELS", {}) : mode === "audio" ? runAction("yantra-audio", "YANTRA_AUDIO_LIST_MODELS", {}) : runAction("yantra-video-generation", "YANTRA_VIDEO_GENERATION_LIST_MODELS", {});
     job.then((result) => {
-      var _a, _b, _c, _d;
+      var _a2, _b, _c, _d;
       if (cancelled) return;
       let list = normalizeModels(result);
       if (mode === "audio") list = promptAudioModels(list);
@@ -135,7 +143,7 @@ function CanvasGeneratePanel({
       setModels(list);
       const cmd = pendingCommand.current;
       pendingCommand.current = null;
-      setSelectedModel(cmd ? modelForCommand(cmd, list, (_b = (_a = list[0]) == null ? void 0 : _a.id) != null ? _b : "") : (_d = (_c = list[0]) == null ? void 0 : _c.id) != null ? _d : "");
+      setSelectedModel(cmd ? modelForCommand(cmd, list, (_b = (_a2 = list[0]) == null ? void 0 : _a2.id) != null ? _b : "") : (_d = (_c = list[0]) == null ? void 0 : _c.id) != null ? _d : "");
     }).catch(() => {
       if (cancelled) return;
       if (mode === "video") {
@@ -153,6 +161,8 @@ function CanvasGeneratePanel({
   const modelInfo = models.find((m) => m.id === selectedModel);
   const videoCaps = generationCapabilities(modelInfo);
   const refCap = videoReferenceCap(models, selectedModel);
+  const resolutions = mode === "video" ? (_a = modelInfo == null ? void 0 : modelInfo.resolutions) != null ? _a : [] : [];
+  const effectiveResolution = resolutions.length ? resolutions.includes(videoResolution) ? videoResolution : resolutions.includes("1080p") ? "1080p" : resolutions[resolutions.length - 1] : void 0;
   const footageSrc = (seedItem == null ? void 0 : seedItem.type) === "video" ? unwrapProxyUrl(seedItem.src) : void 0;
   const hasStill = mode === "image" ? imageStills.length > 0 : Boolean(startFrame || imageStills[0]);
   const commandLine = parseCommandLine(prompt);
@@ -204,7 +214,7 @@ function CanvasGeneratePanel({
   const durations = mode === "video" ? videoDurationOptions(modelInfo) : [];
   const noun = mode === "promo" ? "marketing video" : mode === "slides" ? "slides" : mode;
   const generate = () => {
-    var _a, _b;
+    var _a2, _b;
     if (mode === "slides") {
       onSlides();
       return;
@@ -255,11 +265,23 @@ function CanvasGeneratePanel({
         setNotice(`${cmd.label} needs ${MISSING_LABEL[missing]}`);
         return;
       }
-      model = has.footage && lane === "video" ? (_b = (_a = models.find((m) => m.supportsVideoInput)) == null ? void 0 : _a.id) != null ? _b : VIDEO_INPUT_MODEL : modelForCommand(cmd, models, selectedModel);
+      model = has.footage && lane === "video" ? (_b = (_a2 = models.find((m) => m.supportsVideoInput)) == null ? void 0 : _a2.id) != null ? _b : VIDEO_INPUT_MODEL : modelForCommand(cmd, models, selectedModel);
     }
-    const text = cmd ? commandPrompt(raw) : raw;
+    const typed = cmd ? commandPrompt(raw) : raw;
+    const {
+      compiled: capturedShot,
+      snapshot: shotSnapshot
+    } = mode === "video" ? shot.capture() : {
+      compiled: null,
+      snapshot: null
+    };
+    const text = mode === "video" ? directedPrompt((capturedShot == null ? void 0 : capturedShot.prompt) || typed, direction) : typed;
+    if (capturedShot) shot.clear();
     setBusy(true);
     setNotice(null);
+    let log = startRun(`Generate ${noun}`);
+    log = logStep(log, mode === "promo" ? "Submitting the production\u2026" : "Submitting\u2026");
+    setRunLog(log);
     const footage = mode === "video" && footageSrc && (restyle || cmd && cmd.needs !== "image") ? footageSrc : void 0;
     const promoRequest = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
       prompt: text,
@@ -284,17 +306,37 @@ function CanvasGeneratePanel({
         stills,
         role: cmd ? "source" : stillRole
       });
-      return generationImageUrl(await runAction("yantra-image-generation", call.action, call.params));
-    })() : mode === "audio" ? runAction("yantra-audio", "YANTRA_AUDIO_RUN_PROMPT", __spreadValues({
-      prompt: text
-    }, model ? {
-      model
-    } : {})).then((result) => resultUrl(result, "YANTRA_AUDIO_RUN_PROMPT")) : mode === "promo" ? startPromoTask(runAction, {
+      return runTrackedGeneration({
+        run: runAction,
+        connector: "yantra-image-generation",
+        action: call.action,
+        params: call.params,
+        mode: "image",
+        prompt: text,
+        boardId,
+        resolveUrl: generationImageUrl
+      });
+    })() : mode === "audio" ? runTrackedGeneration({
+      run: runAction,
+      connector: "yantra-audio",
+      action: "YANTRA_AUDIO_RUN_PROMPT",
+      params: __spreadValues({
+        prompt: text
+      }, model ? {
+        model
+      } : {}),
+      mode: "audio",
+      prompt: text,
+      boardId,
+      resolveUrl: (result) => resultUrl(result, "YANTRA_AUDIO_RUN_PROMPT")
+    }) : mode === "promo" ? startPromoTask(runAction, {
       boardId: boardId || "global",
       brief: text,
       request: __spreadValues(__spreadValues(__spreadProps(__spreadValues({}, promoRequest), {
+        captions: promoCaptions,
+        narration: promoNarration,
         quality: promoQuality
-      }), promoNarrator ? {
+      }), promoNarration && promoNarrator ? {
         narratorVoice: promoNarrator
       } : {}), promoUseCases.trim() ? {
         useCases: promoUseCases
@@ -307,25 +349,46 @@ function CanvasGeneratePanel({
       const first = startFrame && !footage && videoCaps.canStartFrame ? await ensureFetchableMediaUrl(runAction, startFrame) : void 0;
       const last = endFrame && videoCaps.canEndFrame ? await ensureFetchableMediaUrl(runAction, endFrame) : void 0;
       const refs = await ensureFetchableMediaUrls(runAction, videoRefs.slice(0, refCap));
-      const result = await runAction("yantra-video-generation", "YANTRA_VIDEO_GENERATION_GENERATE", buildVideoGenerateParams({
+      return runTrackedGeneration({
+        run: runAction,
+        connector: "yantra-video-generation",
+        action: "YANTRA_VIDEO_GENERATION_GENERATE",
+        params: buildVideoGenerateParams({
+          prompt: text,
+          // The spec's framing wins when it has one: the compiled prompt was written against it.
+          aspectRatio: (capturedShot == null ? void 0 : capturedShot.aspectRatio) || aspect,
+          model,
+          durationSeconds: (capturedShot == null ? void 0 : capturedShot.durationSeconds) || videoDuration || void 0,
+          referenceImageUrl: first,
+          referenceEndImageUrl: last,
+          styleReferenceUrls: refs,
+          referenceVideoUrl: footage,
+          resolution: effectiveResolution,
+          // Constraints ride the provider's negative_prompt, never the prompt.
+          negativePrompt: capturedShot == null ? void 0 : capturedShot.negativePrompt
+        }),
+        mode: "video",
         prompt: text,
-        aspectRatio: aspect,
-        model,
-        durationSeconds: videoDuration || void 0,
-        referenceImageUrl: first,
-        referenceEndImageUrl: last,
-        styleReferenceUrls: refs,
-        referenceVideoUrl: footage
-      }));
-      return generationMediaUrl(result);
+        boardId,
+        resolveUrl: generationMediaUrl
+      });
     })();
+    log = logStep(log, mode === "promo" ? "Queued as a background task" : `Generating ${noun}\u2026`);
+    setRunLog(log);
     job.then((url) => {
       if (url) onGenerated(url, {
         prompt: text,
         aspect,
         mode
       });
-    }).catch((err) => setNotice(friendlyMediaError(err, `${noun} generation`))).finally(() => setBusy(false));
+      const summary = mode === "promo" ? "Production queued. Track it under More > Tasks." : mode === "video" ? `Generated a ${(capturedShot == null ? void 0 : capturedShot.durationSeconds) || videoDuration ? `${(capturedShot == null ? void 0 : capturedShot.durationSeconds) || videoDuration}s ` : ""}${(capturedShot == null ? void 0 : capturedShot.aspectRatio) || aspect}${effectiveResolution ? ` ${effectiveResolution}` : ""} video and placed it on the board.` : `Generated ${mode === "image" ? "an image" : "audio"} and placed it on the board.`;
+      setRunLog(finishRun(log, summary));
+    }).catch((err) => {
+      const message = friendlyMediaError(err, `${noun} generation`);
+      setNotice(message);
+      setRunLog(failRun(log, message));
+      if (shotSnapshot == null ? void 0 : shotSnapshot.spec) shot.restore(shotSnapshot);
+    }).finally(() => setBusy(false));
   };
   const placeholder = mode === "clips" ? "Paste a video URL\u2026" : `Describe the ${mode === "promo" ? "promo" : mode} you want to generate\u2026`;
   const cta = mode === "slides" ? "Open slides studio" : `Generate ${noun}`;
@@ -374,6 +437,16 @@ function CanvasGeneratePanel({
           /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "clock-outline", size: 14, color: theme.mutedForeground }),
           /* @__PURE__ */ jsx(Text, { style: styles.pillLabel, children: videoDuration ? `${videoDuration}s` : "Auto" })
         ] }) : null,
+        effectiveResolution ? /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
+          const i = resolutions.indexOf(effectiveResolution);
+          setVideoResolution(resolutions[(i + 1) % resolutions.length]);
+        }, style: ({
+          pressed
+        }) => [styles.pill, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: `Resolution ${effectiveResolution}`, children: [
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "high-definition-box", size: 14, color: theme.mutedForeground }),
+          /* @__PURE__ */ jsx(Text, { style: styles.pillLabel, children: effectiveResolution })
+        ] }) : null,
+        mode === "video" ? /* @__PURE__ */ jsx(DirectorPill, { value: direction, onPress: () => setDirectorOpen(true) }) : null,
         /* @__PURE__ */ jsxs(Pressable, { onPress: () => setTemplatesOpen((v) => !v), style: ({
           pressed
         }) => [styles.pill, templatesOpen && styles.pillOn, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: "Browse prompt templates", children: [
@@ -413,6 +486,7 @@ function CanvasGeneratePanel({
         setPromoPreset(p.id);
         setPromoDuration(p.defaultDurationSeconds);
         setPromoQuality(defaultPromoQuality(p.id));
+        setPromoNarration(defaultNarration(p.id));
       }, style: ({
         pressed
       }) => [styles.pill, promoPreset === p.id && styles.pillOn, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(Text, { style: [styles.pillLabel, promoPreset === p.id && styles.pillLabelOn], children: p.name }) }, p.id)) }) : null,
@@ -435,6 +509,14 @@ function CanvasGeneratePanel({
         designModel: promoDesignModel,
         onDesignModel: setPromoDesignModel
       } : {})) : null,
+      mode === "promo" ? /* @__PURE__ */ jsx(View, { style: styles.pills, children: [["Captions", "closed-caption-outline", promoCaptions, () => setPromoCaptions((v) => !v)], ["Narration", "microphone-outline", promoNarration, () => setPromoNarration((v) => !v)]].map(([label, icon, on, toggle]) => /* @__PURE__ */ jsxs(Pressable, { onPress: toggle, style: ({
+        pressed
+      }) => [styles.pill, on && styles.pillOn, pressedStyle(pressed)], accessibilityRole: "switch", accessibilityState: {
+        checked: on
+      }, accessibilityHint: label === "Captions" ? "Burn word-level captions into the video" : "Write and voice a script; off leaves music and on-screen text to carry it", children: [
+        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: icon, size: 14, color: on ? theme.background : theme.mutedForeground }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.pillLabel, on && styles.pillLabelOn], children: label })
+      ] }, label)) }) : null,
       mode === "clips" ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(TextInput, { value: clipUrl, onChangeText: setClipUrl, placeholder: "Paste a video URL\u2026", placeholderTextColor: theme.mutedForeground, autoCapitalize: "none", style: styles.field }),
         /* @__PURE__ */ jsx(View, { style: styles.pills, children: CLIP_COUNT_CHOICES.map((n) => /* @__PURE__ */ jsx(Pressable, { onPress: () => setClipCount(n), style: ({
@@ -449,7 +531,12 @@ function CanvasGeneratePanel({
           label: `${value}p`
         })), value: clipRes, onChange: setClipRes, style: styles.segmented })
       ] }) : mode === "slides" ? /* @__PURE__ */ jsx(Text, { style: styles.hint, children: "Opens the slides studio, the same as Generate, then Slides, on the web." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(TextInput, { value: prompt, onChangeText: setPrompt, placeholder: mode === "image" || mode === "video" ? `${placeholder} Type / for effects` : placeholder, placeholderTextColor: theme.mutedForeground, multiline: true, style: styles.prompt }),
+        mode === "video" && shot.spec && shot.constraints ? /* @__PURE__ */ jsx(ShotPanel, { spec: shot.spec, constraints: shot.constraints, onChange: shot.setSpec, onDiscard: () => {
+          const brief = shot.discard();
+          if (brief) setPrompt(brief);
+        }, onRestructure: () => void shot.structure(shot.brief.current, selectedModel), busy: shot.busy }) : /* @__PURE__ */ jsx(TextInput, { value: prompt, onChangeText: setPrompt, placeholder: mode === "image" || mode === "video" ? `${placeholder} Type / for effects` : placeholder, placeholderTextColor: theme.mutedForeground, multiline: true, style: styles.prompt }),
+        mode === "video" && !shot.spec && briefWorthStructuring(prompt) && runAction ? /* @__PURE__ */ jsx(ShotStructureButton, { busy: shot.busy, onPress: () => void shot.structure(prompt, selectedModel) }) : null,
+        shot.error && mode === "video" ? /* @__PURE__ */ jsx(Text, { style: styles.hint, children: shot.error }) : null,
         commandSuggestions.length > 0 ? /* @__PURE__ */ jsx(ScrollView, { horizontal: true, keyboardShouldPersistTaps: "handled", showsHorizontalScrollIndicator: false, style: styles.hScroll, contentContainerStyle: styles.pills, children: commandSuggestions.map((cmd) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => applyCommand(cmd), style: ({
           pressed
         }) => [styles.pill, pressedStyle(pressed)], accessibilityRole: "button", accessibilityHint: cmd.blurb, children: [
@@ -461,6 +548,7 @@ function CanvasGeneratePanel({
         ] }, cmd.id)) }) : null
       ] })
     ] }),
+    runLog ? /* @__PURE__ */ jsx(View, { style: styles.runLog, children: /* @__PURE__ */ jsx(RunLogCard, { run: runLog }) }) : null,
     notice ? /* @__PURE__ */ jsx(Text, { style: styles.notice, children: notice }) : null,
     /* @__PURE__ */ jsxs(View, { style: styles.actions, children: [
       dictating ? /* @__PURE__ */ jsx(View, { style: {
@@ -501,13 +589,18 @@ function CanvasGeneratePanel({
         /* @__PURE__ */ jsx(Text, { style: styles.ctaLabel, children: cta }),
         /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "arrow-right", size: 18, color: theme.primaryForeground })
       ] }) })
-    ] })
+    ] }),
+    directorOpen && mode === "video" ? /* @__PURE__ */ jsx(DirectorSheet, { value: direction, onChange: setDirection, onClose: () => setDirectorOpen(false), prompt }) : null
   ] });
 }
 const makeStyles = themedStyles((theme) => StyleSheet.create({
   root: {
     flex: 1
   },
+  runLog: {
+    paddingHorizontal: SPACE.lg,
+    paddingBottom: SPACE.sm
+  },
   hScroll: {
     flexGrow: 0
   },