@effectnode/media 0.8.0 → 0.10.0

package/frontend/src/movie-app/components/ProjectEditorPage.tsx

@@ -2,20 +2,20 @@ import { useEffect, useState } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import { useProjectStore, type Project } from "../stores/projectStore";
 import { useGenerationStore } from "../stores/generationStore";
-import ExtendVideoTab from "./EditorTabs/ExtendVideoTab";
 import FastImageEditTab from "./EditorTabs/FastImageEditTab";
 import MovieStudioTab from "./EditorTabs/MovieStudioTab";
 import GenerateVideoTab from "./EditorTabs/GenerateVideoTab";
 import AgentTab from "./EditorTabs/AgentTab";
 import StoryWriterTab from "./EditorTabs/StoryWriterTab";
-import ExtractImageTab from "./EditorTabs/ExtractImageTab";
-import SceneVisualTab from "./EditorTabs/SceneVisualTab";
 import TextToImageTab from "./EditorTabs/TextToImageTab";
 import BatchVideoTab from "./EditorTabs/BatchVideoTab";
 import BatchImageToVideoTab from "./EditorTabs/BatchImageToVideoTab";
-import BatchVoiceVideoTab from "./EditorTabs/BatchVoiceVideoTab";
 import LlmServerTab from "./EditorTabs/LlmServerTab";
 import SetupAiModelTab from "./EditorTabs/SetupAiModelTab";
+import UpscaleTab from "./EditorTabs/UpscaleTab";
+import VoiceCloneTab from "./EditorTabs/VoiceCloneTab";
+import AudioToVideoTab from "./EditorTabs/AudioToVideoTab";
+import AdvancedVoiceCloneTab from "./EditorTabs/AdvancedVoiceCloneTab";
 
 export default function ProjectEditorPage() {
   const { id } = useParams<{ id: string }>();
@@ -87,24 +87,6 @@ export default function ProjectEditorPage() {
     </svg>
   );
 
-  const ExtendIcon = (
-    <svg
-      width="18"
-      height="18"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <polygon points="23 7 16 12 23 17 23 7" />
-      <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
-      <line x1="5" y1="12" x2="11" y2="12" />
-      <line x1="8" y1="9" x2="8" y2="15" />
-    </svg>
-  );
-
   const FastImageEditIcon = (
     <svg
       width="18"
@@ -172,7 +154,7 @@ export default function ProjectEditorPage() {
     </svg>
   );
 
-  const ExtractIcon = (
+  const TextToImageIcon = (
     <svg
       width="18"
       height="18"
@@ -183,12 +165,11 @@ export default function ProjectEditorPage() {
       strokeLinecap="round"
       strokeLinejoin="round"
     >
-      <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
-      <circle cx="12" cy="13" r="4" />
+      <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
     </svg>
   );
 
-  const SceneVisualIcon = (
+  const BatchVideoIcon = (
     <svg
       width="18"
       height="18"
@@ -200,12 +181,13 @@ export default function ProjectEditorPage() {
       strokeLinejoin="round"
     >
       <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
-      <circle cx="8.5" cy="8.5" r="1.5" />
-      <polyline points="21 15 16 10 5 21" />
+      <line x1="3" y1="9" x2="21" y2="9" />
+      <line x1="3" y1="15" x2="21" y2="15" />
+      <line x1="9" y1="3" x2="9" y2="21" />
     </svg>
   );
 
-  const TextToImageIcon = (
+  const BatchImageToVideoIcon = (
     <svg
       width="18"
       height="18"
@@ -216,11 +198,13 @@ export default function ProjectEditorPage() {
       strokeLinecap="round"
       strokeLinejoin="round"
     >
-      <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+      <polygon points="12 2 2 7 12 12 22 7 12 2" />
+      <polyline points="2 17 12 22 22 17" />
+      <polyline points="2 12 12 17 22 12" />
     </svg>
   );
 
-  const BatchVideoIcon = (
+  const ServerIcon = (
     <svg
       width="18"
       height="18"
@@ -231,14 +215,26 @@ export default function ProjectEditorPage() {
       strokeLinecap="round"
       strokeLinejoin="round"
     >
-      <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
-      <line x1="3" y1="9" x2="21" y2="9" />
-      <line x1="3" y1="15" x2="21" y2="15" />
-      <line x1="9" y1="3" x2="9" y2="21" />
+      <rect x="2" y="2" width="20" height="8" rx="2" ry="2" />
+      <rect x="2" y="14" width="20" height="8" rx="2" ry="2" />
+      <line x1="6" y1="6" x2="6.01" y2="6" />
+      <line x1="6" y1="18" x2="6.01" y2="18" />
     </svg>
   );
 
-  const BatchVoiceIcon = (
+  const ServerStatusLight = () => (
+    <span
+      className={`w-2.5 h-2.5 rounded-full ${
+        store.agent.serverOnline === true
+          ? "bg-emerald-500 shadow-[0_0_6px_2px_rgba(16,185,129,0.5)]"
+          : store.agent.serverOnline === false
+            ? "bg-red-500 shadow-[0_0_6px_2px_rgba(239,68,68,0.5)]"
+            : "bg-tiffany-500"
+      }`}
+    />
+  );
+
+  const AiModelIcon = (
     <svg
       width="18"
       height="18"
@@ -249,13 +245,20 @@ export default function ProjectEditorPage() {
       strokeLinecap="round"
       strokeLinejoin="round"
     >
-      <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
-      <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
-      <line x1="12" y1="19" x2="12" y2="23" />
+      <rect x="4" y="4" width="16" height="16" rx="2" ry="2" />
+      <rect x="9" y="9" width="6" height="6" />
+      <line x1="9" y1="1" x2="9" y2="4" />
+      <line x1="15" y1="1" x2="15" y2="4" />
+      <line x1="9" y1="20" x2="9" y2="23" />
+      <line x1="15" y1="20" x2="15" y2="23" />
+      <line x1="20" y1="9" x2="23" y2="9" />
+      <line x1="20" y1="14" x2="23" y2="14" />
+      <line x1="1" y1="9" x2="4" y2="9" />
+      <line x1="1" y1="14" x2="4" y2="14" />
     </svg>
   );
 
-  const BatchImageToVideoIcon = (
+  const UpscaleIcon = (
     <svg
       width="18"
       height="18"
@@ -266,13 +269,14 @@ export default function ProjectEditorPage() {
       strokeLinecap="round"
       strokeLinejoin="round"
     >
-      <polygon points="12 2 2 7 12 12 22 7 12 2" />
-      <polyline points="2 17 12 22 22 17" />
-      <polyline points="2 12 12 17 22 12" />
+      <polyline points="15 3 21 3 21 9" />
+      <polyline points="9 21 3 21 3 15" />
+      <line x1="21" y1="3" x2="14" y2="10" />
+      <line x1="3" y1="21" x2="10" y2="14" />
     </svg>
   );
 
-  const ServerIcon = (
+  const VoiceCloneIcon = (
     <svg
       width="18"
       height="18"
@@ -283,26 +287,30 @@ export default function ProjectEditorPage() {
       strokeLinecap="round"
       strokeLinejoin="round"
     >
-      <rect x="2" y="2" width="20" height="8" rx="2" ry="2" />
-      <rect x="2" y="14" width="20" height="8" rx="2" ry="2" />
-      <line x1="6" y1="6" x2="6.01" y2="6" />
-      <line x1="6" y1="18" x2="6.01" y2="18" />
+      <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
+      <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+      <line x1="12" y1="19" x2="12" y2="23" />
     </svg>
   );
 
-  const ServerStatusLight = () => (
-    <span
-      className={`w-2.5 h-2.5 rounded-full ${
-        store.agent.serverOnline === true
-          ? "bg-emerald-500 shadow-[0_0_6px_2px_rgba(16,185,129,0.5)]"
-          : store.agent.serverOnline === false
-            ? "bg-red-500 shadow-[0_0_6px_2px_rgba(239,68,68,0.5)]"
-            : "bg-tiffany-500"
-      }`}
-    />
+  const AudioToVideoIcon = (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <polygon points="23 7 16 12 23 17 23 7" />
+      <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
+      <line x1="4" y1="20" x2="8" y2="20" />
+    </svg>
   );
 
-  const AiModelIcon = (
+  const AdvancedVoiceCloneIcon = (
     <svg
       width="18"
       height="18"
@@ -313,16 +321,11 @@ export default function ProjectEditorPage() {
       strokeLinecap="round"
       strokeLinejoin="round"
     >
-      <rect x="4" y="4" width="16" height="16" rx="2" ry="2" />
-      <rect x="9" y="9" width="6" height="6" />
-      <line x1="9" y1="1" x2="9" y2="4" />
-      <line x1="15" y1="1" x2="15" y2="4" />
-      <line x1="9" y1="20" x2="9" y2="23" />
-      <line x1="15" y1="20" x2="15" y2="23" />
-      <line x1="20" y1="9" x2="23" y2="9" />
-      <line x1="20" y1="14" x2="23" y2="14" />
-      <line x1="1" y1="9" x2="4" y2="9" />
-      <line x1="1" y1="14" x2="4" y2="14" />
+      <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
+      <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+      <line x1="12" y1="19" x2="12" y2="23" />
+      <path d="M5 3v4" />
+      <path d="M3 5h4" />
     </svg>
   );
 
@@ -408,18 +411,7 @@ export default function ProjectEditorPage() {
               }`}
             >
               {VideoIcon}
-              Generate Avatar Video
-            </button>
-            <button
-              onClick={() => store.setActiveTab("extend")}
-              className={`flex items-center gap-2 px-5 py-2.5 text-sm font-medium rounded-2xl transition-all ${
-                store.activeTab === "extend"
-                  ? "bg-tiffany-500/10 text-tiffany-700 shadow-glow-sm"
-                  : "text-ink-600 hover:bg-ink-100 hover:text-ink-800"
-              }`}
-            >
-              {ExtendIcon}
-              Extend Video
+              Scene Video Generation
             </button>
             <button
               onClick={() => store.setActiveTab("fastImageEdit")}
@@ -455,82 +447,93 @@ export default function ProjectEditorPage() {
               Story Writer
             </button>
             <button
-              onClick={() => store.setActiveTab("extract")}
+              onClick={() => store.setActiveTab("textToImage")}
               className={`flex items-center gap-2 px-5 py-2.5 text-sm font-medium rounded-2xl transition-all ${
-                store.activeTab === "extract"
+                store.activeTab === "textToImage"
                   ? "bg-tiffany-500/10 text-tiffany-700 shadow-glow-sm"
                   : "text-ink-600 hover:bg-ink-100 hover:text-ink-800"
               }`}
             >
-              {ExtractIcon}
-              Extract Image
+              {TextToImageIcon}
+              Text-to-Image
             </button>
             <button
-              onClick={() => store.setActiveTab("sceneVisual")}
+              onClick={() => store.setActiveTab("batchVideo")}
               className={`flex items-center gap-2 px-5 py-2.5 text-sm font-medium rounded-2xl transition-all ${
-                store.activeTab === "sceneVisual"
+                store.activeTab === "batchVideo"
                   ? "bg-tiffany-500/10 text-tiffany-700 shadow-glow-sm"
                   : "text-ink-600 hover:bg-ink-100 hover:text-ink-800"
               }`}
             >
-              {SceneVisualIcon}
-              Scene Visual
+              {BatchVideoIcon}
+              Batch Video
             </button>
             <button
-              onClick={() => store.setActiveTab("textToImage")}
+              onClick={() => store.setActiveTab("batchImageToVideo")}
               className={`flex items-center gap-2 px-5 py-2.5 text-sm font-medium rounded-2xl transition-all ${
-                store.activeTab === "textToImage"
+                store.activeTab === "batchImageToVideo"
                   ? "bg-tiffany-500/10 text-tiffany-700 shadow-glow-sm"
                   : "text-ink-600 hover:bg-ink-100 hover:text-ink-800"
               }`}
             >
-              {TextToImageIcon}
-              Text-to-Image
+              {BatchImageToVideoIcon}
+              Batch Image to Video
             </button>
             <button
-              onClick={() => store.setActiveTab("batchVideo")}
+              onClick={() => store.setActiveTab("llmServer")}
               className={`flex items-center gap-2 px-5 py-2.5 text-sm font-medium rounded-2xl transition-all ${
-                store.activeTab === "batchVideo"
+                store.activeTab === "llmServer"
                   ? "bg-tiffany-500/10 text-tiffany-700 shadow-glow-sm"
                   : "text-ink-600 hover:bg-ink-100 hover:text-ink-800"
               }`}
             >
-              {BatchVideoIcon}
-              Batch Video
+              {ServerIcon}
+              LLM Server
+              <ServerStatusLight />
             </button>
             <button
-              onClick={() => store.setActiveTab("batchImageToVideo")}
+              onClick={() => store.setActiveTab("upscale")}
               className={`flex items-center gap-2 px-5 py-2.5 text-sm font-medium rounded-2xl transition-all ${
-                store.activeTab === "batchImageToVideo"
+                store.activeTab === "upscale"
                   ? "bg-tiffany-500/10 text-tiffany-700 shadow-glow-sm"
                   : "text-ink-600 hover:bg-ink-100 hover:text-ink-800"
               }`}
             >
-              {BatchImageToVideoIcon}
-              Batch Image to Video
+              {UpscaleIcon}
+              Upscale Media
             </button>
             <button
-              onClick={() => store.setActiveTab("batchVoice")}
+              onClick={() => store.setActiveTab("voiceClone")}
               className={`flex items-center gap-2 px-5 py-2.5 text-sm font-medium rounded-2xl transition-all ${
-                store.activeTab === "batchVoice"
+                store.activeTab === "voiceClone"
                   ? "bg-tiffany-500/10 text-tiffany-700 shadow-glow-sm"
                   : "text-ink-600 hover:bg-ink-100 hover:text-ink-800"
               }`}
             >
-              {BatchVoiceIcon}
-              Batch Videos with Voice Over
+              {VoiceCloneIcon}
+              Voice Clone
             </button>
             <button
-              onClick={() => store.setActiveTab("llmServer")}
+              onClick={() => store.setActiveTab("advancedVoiceClone")}
               className={`flex items-center gap-2 px-5 py-2.5 text-sm font-medium rounded-2xl transition-all ${
-                store.activeTab === "llmServer"
+                store.activeTab === "advancedVoiceClone"
                   ? "bg-tiffany-500/10 text-tiffany-700 shadow-glow-sm"
                   : "text-ink-600 hover:bg-ink-100 hover:text-ink-800"
               }`}
             >
-              {ServerIcon}
-              LLM Server
-              <ServerStatusLight />
+              {AdvancedVoiceCloneIcon}
+              Advanced Voice Clone
+            </button>
+            <button
+              onClick={() => store.setActiveTab("audioToVideo")}
+              className={`flex items-center gap-2 px-5 py-2.5 text-sm font-medium rounded-2xl transition-all ${
+                store.activeTab === "audioToVideo"
+                  ? "bg-tiffany-500/10 text-tiffany-700 shadow-glow-sm"
+                  : "text-ink-600 hover:bg-ink-100 hover:text-ink-800"
+              }`}
+            >
+              {AudioToVideoIcon}
+              Audio to Video
             </button>
             <button
               onClick={() => store.setActiveTab("aiModels")}
@@ -558,9 +561,6 @@ export default function ProjectEditorPage() {
           {/* ========== VIDEO GENERATION PANEL ========== */}
           {store.activeTab === "video" && <GenerateVideoTab projectId={id!} />}
 
-          {/* ========== EXTEND VIDEO PANEL ========== */}
-          {store.activeTab === "extend" && <ExtendVideoTab projectId={id!} />}
-
           {/* ========== AGENT PANEL ========== */}
           {store.activeTab === "agent" && <AgentTab projectId={id!} />}
 
@@ -569,14 +569,6 @@ export default function ProjectEditorPage() {
             <StoryWriterTab projectId={id!} />
           )}
 
-          {/* ========== EXTRACT IMAGE PANEL ========== */}
-          {store.activeTab === "extract" && <ExtractImageTab projectId={id!} />}
-
-          {/* ========== SCENE VISUAL PANEL ========== */}
-          {store.activeTab === "sceneVisual" && (
-            <SceneVisualTab projectId={id!} />
-          )}
-
           {/* ========== TEXT-TO-IMAGE PANEL ========== */}
           {store.activeTab === "textToImage" && (
             <TextToImageTab projectId={id!} />
@@ -592,16 +584,29 @@ export default function ProjectEditorPage() {
             <BatchImageToVideoTab projectId={id!} />
           )}
 
-          {/* ========== BATCH VOICE VIDEO PANEL ========== */}
-          {store.activeTab === "batchVoice" && (
-            <BatchVoiceVideoTab projectId={id!} />
-          )}
-
           {/* ========== LLM SERVER PANEL ========== */}
           {store.activeTab === "llmServer" && <LlmServerTab />}
 
           {/* ========== SETUP AI MODELS PANEL ========== */}
           {store.activeTab === "aiModels" && <SetupAiModelTab />}
+
+          {/* ========== UPSCALE MEDIA PANEL ========== */}
+          {store.activeTab === "upscale" && <UpscaleTab projectId={id!} />}
+
+          {/* ========== VOICE CLONE PANEL ========== */}
+          {store.activeTab === "voiceClone" && (
+            <VoiceCloneTab projectId={id!} />
+          )}
+
+          {/* ========== ADVANCED VOICE CLONE PANEL ========== */}
+          {store.activeTab === "advancedVoiceClone" && (
+            <AdvancedVoiceCloneTab projectId={id!} />
+          )}
+
+          {/* ========== AUDIO TO VIDEO PANEL ========== */}
+          {store.activeTab === "audioToVideo" && (
+            <AudioToVideoTab projectId={id!} />
+          )}
         </div>
       </div>
     </div>

package/frontend/src/movie-app/stores/advancedVoiceCloneStore.ts

@@ -0,0 +1,207 @@
+import { create } from "zustand";
+import type { QueueTask } from "./queueStore";
+
+const API_BASE = `http://localhost:${(window as any).PORT}`;
+
+export interface VoiceAudio {
+  filename: string;
+  url: string;
+}
+
+function resolveUrl(url: string): string {
+  return url.startsWith("http") ? url : `${API_BASE}${url}`;
+}
+
+interface AdvancedVoiceCloneStore {
+  text: string;
+  language: string;
+  outPrefix: string;
+  model: string;
+  refAudio: VoiceAudio | null;
+  audios: VoiceAudio[];
+  audiosLoading: boolean;
+  uploading: boolean;
+  generating: boolean;
+  result: string | null;
+  error: string | null;
+
+  setText: (t: string) => void;
+  setLanguage: (l: string) => void;
+  setOutPrefix: (p: string) => void;
+  setModel: (m: string) => void;
+  setRefAudio: (a: VoiceAudio | null) => void;
+  clearResult: () => void;
+  fetchAudios: (projectId: string) => Promise<void>;
+  uploadAudio: (
+    projectId: string,
+    base64: string,
+    filename: string,
+  ) => Promise<void>;
+  generate: (projectId: string) => Promise<void>;
+  applyQueueTask: (task: QueueTask) => void;
+  reset: () => void;
+}
+
+/** The queue task id enqueued by the current generate action, if any. */
+let advancedVoiceCloneActiveTaskId: string | null = null;
+
+async function enqueueAdvancedVoiceCloneTask(
+  projectId: string,
+  text: string,
+  refAudioPath: string,
+  language: string,
+  outPrefix: string,
+  model: string,
+): Promise<{ ok: boolean; error?: string; taskId?: string }> {
+  try {
+    const res = await fetch(`${API_BASE}/api/queue/enqueue`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        projectId,
+        type: "advanced-voice-clone",
+        label: "Advanced voice clone",
+        payload: { text, refAudioPath, language, outPrefix, model },
+      }),
+    });
+    if (!res.ok) {
+      return { ok: false, error: await res.text() };
+    }
+    const task = (await res.json()) as { id?: string };
+    return { ok: true, taskId: task.id };
+  } catch (e) {
+    return { ok: false, error: String(e) };
+  }
+}
+
+export const useAdvancedVoiceCloneStore = create<AdvancedVoiceCloneStore>(
+  (set, get) => ({
+    text: "",
+    language: "YUE",
+    outPrefix: "voice",
+    model: "./dots-tts-mlx-weights/mf-int4",
+    refAudio: null,
+    audios: [],
+    audiosLoading: false,
+    uploading: false,
+    generating: false,
+    result: null,
+    error: null,
+
+    setText: (text) => set({ text, error: null }),
+    setLanguage: (language) => set({ language, error: null }),
+    setOutPrefix: (outPrefix) => set({ outPrefix, error: null }),
+    setModel: (model) => set({ model, error: null }),
+    setRefAudio: (refAudio) => set({ refAudio, error: null }),
+    clearResult: () => set({ result: null, error: null }),
+
+    fetchAudios: async (projectId) => {
+      set({ audiosLoading: true });
+      try {
+        const res = await fetch(`${API_BASE}/api/projects/${projectId}/audios`);
+        if (!res.ok) throw new Error(await res.text());
+        const audios: VoiceAudio[] = await res.json();
+        set({
+          audios: audios.map((a) => ({ ...a, url: resolveUrl(a.url) })),
+          audiosLoading: false,
+        });
+      } catch {
+        set({ audiosLoading: false });
+      }
+    },
+
+    uploadAudio: async (projectId, base64, filename) => {
+      set({ uploading: true, error: null });
+      try {
+        const res = await fetch(`${API_BASE}/api/upload/audio`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ audio: base64, filename, projectId }),
+        });
+        if (!res.ok) {
+          set({ uploading: false, error: await res.text() });
+          return;
+        }
+        const data = await res.json();
+        set({
+          uploading: false,
+          refAudio: {
+            filename: data.filename,
+            url: resolveUrl(
+              `/api/files?path=${encodeURIComponent(data.path)}`,
+            ),
+          },
+        });
+        void get().fetchAudios(projectId);
+      } catch (e) {
+        set({ uploading: false, error: String(e) });
+      }
+    },
+
+    generate: async (projectId) => {
+      const { text, refAudio, language, outPrefix, model, generating } = get();
+      if (generating || !refAudio || !text.trim()) return;
+
+      set({ generating: true, error: null, result: null });
+
+      const r = await enqueueAdvancedVoiceCloneTask(
+        projectId,
+        text.trim(),
+        refAudio.filename,
+        language,
+        outPrefix,
+        model,
+      );
+      advancedVoiceCloneActiveTaskId = r.taskId ?? null;
+      if (!r.ok) {
+        set({
+          generating: false,
+          error: r.error ?? "Failed to enqueue advanced voice clone",
+        });
+      }
+    },
+
+    // Reconcile state with the latest queue task state. Only the task enqueued by
+    // this tab is reflected, so past tasks never surface stale results.
+    applyQueueTask: (task) => {
+      if (task.type !== "advanced-voice-clone") return;
+      if (task.id !== advancedVoiceCloneActiveTaskId) return;
+
+      if (task.status === "completed") {
+        const url = task.result?.url;
+        set({
+          generating: false,
+          result: url ? resolveUrl(url) : null,
+          error: null,
+        });
+      } else if (task.status === "failed") {
+        set({
+          generating: false,
+          error: task.error ?? "Advanced voice clone failed",
+        });
+      } else if (task.status === "cancelled" || task.status === "paused") {
+        set({ generating: false, error: null });
+      } else {
+        // pending / running
+        set({ generating: true, error: null });
+      }
+    },
+
+    reset: () => {
+      advancedVoiceCloneActiveTaskId = null;
+      set({
+        text: "",
+        language: "YUE",
+        outPrefix: "voice",
+        model: "./dots-tts-mlx-weights/mf-int4",
+        refAudio: null,
+        audios: [],
+        audiosLoading: false,
+        uploading: false,
+        generating: false,
+        result: null,
+        error: null,
+      });
+    },
+  }),
+);