feat: 交互式对话框生成器 + 电商取消生成与上传优化

新增: - 交互式对话框生成器模块（路由、页面、样式、MorePage入口） - 电商模块取消生成功能（任务追踪/取消按钮/中止逻辑） - 视频服务图片上传支持 Blob/dataURL/远程URL 多种来源优化: - 电商图片上传修复本地 blob 预览图缺少原始文件的问题 - 视频规划管线错误信息改进 - 生成流程中多处增加中止检查点
2026-06-05 00:37:38 +08:00
parent f0fed2f0fd
commit 10b8379965
16 changed files with 1125 additions and 51 deletions
@@ -59,6 +59,7 @@ interface CloneImageItem {
  id: string;
  src: string;
  name: string;
+  file?: File;
  width?: number;
  height?: number;
  format?: string;
@@ -678,6 +679,7 @@ function createObjectImageItems(files: File[], limit: number, prefix: string) {
      id: `${prefix}-${Date.now()}-${index}`,
      src: URL.createObjectURL(file),
      name: file.name,
+      file,
      format: getImageFileFormat(file),
    }));
 }
@@ -791,6 +793,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
  const [status, setStatus] = useState<ProductCloneStatus>("idle");
  const [results, setResults] = useState<CloneResult[]>([]);
  const imageAbortRef = useRef({ current: false });
+  const activeEcommerceTaskIdsRef = useRef<Set<string>>(new Set());
  const lastFailedActionRef = useRef<(() => void) | null>(null);
  const [garmentImages, setGarmentImages] = useState<CloneImageItem[]>([]);
  const [modelSource, setModelSource] = useState<TryOnModelSource>("ai");
@@ -845,6 +848,30 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
    "--clone-video-duration-progress": `${cloneVideoDurationProgress}%`,
  } as CSSProperties;

+  const trackEcommerceTask = (taskId: string) => {
+    activeEcommerceTaskIdsRef.current.add(taskId);
+  };
+
+  const untrackEcommerceTask = (taskId: string) => {
+    activeEcommerceTaskIdsRef.current.delete(taskId);
+  };
+
+  const handleCancelGenerate = () => {
+    imageAbortRef.current.current = true;
+    const taskIds = Array.from(activeEcommerceTaskIdsRef.current);
+    activeEcommerceTaskIdsRef.current.clear();
+    taskIds.forEach((taskId) => {
+      aiGenerationClient.cancelTask(taskId).catch(() => {});
+    });
+    lastFailedActionRef.current = null;
+    if (productSetStatus === "generating") setProductSetStatus("idle");
+    if (status === "generating") setStatus("idle");
+    if (detailStatus === "generating") setDetailStatus("idle");
+    if (tryOnStatus === "generating") setTryOnStatus("idle");
+    if (tryOnStatus === "modeling") setTryOnStatus("ready");
+    toast.info("\u5df2\u53d6\u6d88\u751f\u6210");
+  };
+
  const syncRequirementMentionQuery = (value: string, selectionStart: number | null | undefined) => {
    setRequirementImageMentionQuery(ecommerceMentionImages.length ? getImageMentionQuery(value, selectionStart) : null);
  };
@@ -1305,11 +1332,15 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
    const urls: string[] = [];
    for (const item of images) {
      try {
-        const resp = await fetch(item.src);
-        const rawBlob = await resp.blob();
-        const mimeType = normalizeEcommerceImageMime(rawBlob.type);
-        const blob = rawBlob.type === mimeType ? rawBlob : new Blob([rawBlob], { type: mimeType });
-        const dataUrl = await blobToDataUrl(blob);
+        if (!item.file && item.src.startsWith("blob:")) {
+          throw new Error("本地预览图缺少原始文件，无法上传");
+        }
+        const rawBlob = item.file ?? (item.src.startsWith("data:") ? null : await (await fetch(item.src)).blob());
+        const mimeType = normalizeEcommerceImageMime(
+          rawBlob?.type || item.src.match(/^data:([^;,]+)/)?.[1] || "image/png",
+        );
+        const blob = rawBlob ? (rawBlob.type === mimeType ? rawBlob : new Blob([rawBlob], { type: mimeType })) : null;
+        const dataUrl = item.src.startsWith("data:") ? item.src : await blobToDataUrl(blob!);
        const { url } = await aiGenerationClient.uploadAsset({ dataUrl, name: item.name, mimeType, scope: "ecommerce-product" });
        urls.push(url);
      } catch {
@@ -1395,6 +1426,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
        setStatusFn("idle");
        return;
      }
+      if (imageAbortRef.current.current) {
+        setStatusFn("idle");
+        return;
+      }

      const generatedUrls: string[] = [];
      const stamp = Date.now();
@@ -1414,13 +1449,21 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
            gridMode: "single",
            referenceUrls,
          });
+          trackEcommerceTask(taskId);

          const storeId = imageGen.submitTask({ title: `${setCountLabels[countKey].label} ${i + 1}`, type: "image", status: "running", progress: 5, prompt: fullPrompt, sourceView: "ecommerce", taskId });

-          const resultUrl = await waitForTask(taskId, {
-            abortRef: imageAbortRef.current,
-            onProgress: () => {},
-          });
+          let resultUrl: string | null = null;
+          try {
+            resultUrl = await waitForTask(taskId, {
+              abortRef: imageAbortRef.current,
+              onProgress: () => {},
+            });
+          } finally {
+            untrackEcommerceTask(taskId);
+          }
+
+          if (imageAbortRef.current.current) break;

          if (resultUrl) {
            generatedUrls.push(resultUrl);
@@ -1432,9 +1475,17 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
        }
      }

+      if (imageAbortRef.current.current) {
+        setStatusFn("idle");
+        return;
+      }
      setResultFn(generatedUrls);
      setStatusFn(generatedUrls.some(Boolean) ? "done" : "idle");
    } catch (err) {
+      if (imageAbortRef.current.current) {
+        setStatusFn("idle");
+        return;
+      }
      if (err instanceof ServerRequestError && err.status === 402) {
        setResultFn([]);
        toast.error("余额不足，请充值后继续");
@@ -1465,6 +1516,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
        statusFn?.("idle");
        return;
      }
+      if (imageAbortRef.current.current) {
+        statusFn?.("idle");
+        return;
+      }

      const prompt = buildEcommerceImagePrompt(outputKey, userText, pPlatform, pRatio, pLanguage, pMarket, tryOnOptions);
      const stamp = Date.now();
@@ -1477,13 +1532,24 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
        gridMode: "single",
        referenceUrls,
      });
+      trackEcommerceTask(taskId);

      const storeId = imageGen.submitTask({ title: `电商${outputKey}图`, type: "image", status: "running", progress: 5, prompt, sourceView: "ecommerce", taskId });

-      const resultUrl = await waitForTask(taskId, {
-        abortRef: imageAbortRef.current,
-        onProgress: () => {},
-      });
+      let resultUrl: string | null = null;
+      try {
+        resultUrl = await waitForTask(taskId, {
+          abortRef: imageAbortRef.current,
+          onProgress: () => {},
+        });
+      } finally {
+        untrackEcommerceTask(taskId);
+      }
+
+      if (imageAbortRef.current.current) {
+        statusFn?.("idle");
+        return;
+      }

      if (resultUrl) {
        resultFn?.([{ id: `ecommerce-${stamp}`, src: resultUrl, label: selectedCloneOutput.label }]);
@@ -1494,6 +1560,10 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
        imageGen.updateTask(storeId, { status: "failed", error: "生成未返回结果" });
      }
    } catch (err) {
+      if (imageAbortRef.current.current) {
+        statusFn?.("idle");
+        return;
+      }
      if (err instanceof ServerRequestError && err.status === 402) {
        resultFn?.([{ id: `ecommerce-error-402`, src: "", label: "余额不足，请充值后继续" }]);
        toast.error("余额不足，请充值后继续");
@@ -1527,21 +1597,38 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
        dataUrl: refDataUrl, name: videoOutfitRefFile.name,
        mimeType: videoOutfitRefFile.type || "image/png", scope: "video-outfit",
      });
+      if (imageAbortRef.current.current) {
+        setStatus("idle");
+        return;
+      }

      const { taskId } = await aiGenerationClient.createVideoEditTask({
        videoUrl: videoAsset.url,
        referenceUrls: [refAsset.url],
        prompt: requirement || undefined,
      });
+      trackEcommerceTask(taskId);

      const { waitForTask } = await import("../../api/taskSubscription");
-      imageAbortRef.current = { current: false };
-      const resultUrl = await waitForTask(taskId, { abortRef: imageAbortRef.current });
+      let resultUrl: string | null = null;
+      try {
+        resultUrl = await waitForTask(taskId, { abortRef: imageAbortRef.current });
+      } finally {
+        untrackEcommerceTask(taskId);
+      }
+      if (imageAbortRef.current.current) {
+        setStatus("idle");
+        return;
+      }
      if (resultUrl) {
        setResults([{ id: crypto.randomUUID(), src: resultUrl, label: "换装视频" }]);
      }
      setStatus("done");
    } catch (err) {
+      if (imageAbortRef.current.current) {
+        setStatus("idle");
+        return;
+      }
      setStatus("failed");
      toast.error(err instanceof Error ? err.message : "视频换装生成失败");
    }
@@ -1877,6 +1964,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
      clampCloneVideoDuration={clampCloneVideoDuration}
      setCloneVideoSmart={setCloneVideoSmart}
      handleGenerate={handleGenerate}
+      onCancelGenerate={handleCancelGenerate}
      formatRatioDisplayValue={formatRatioDisplayValue}
      setVideoOutfitFiles={(video, ref) => { setVideoOutfitVideoFile(video); setVideoOutfitRefFile(ref); }}
      onStartVideoPlan={() => setVideoPlanTrigger((n) => n + 1)}
@@ -1910,6 +1998,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
      handleDetailAiWrite={handleDetailAiWrite}
      toggleDetailModule={toggleDetailModule}
      handleDetailGenerate={handleDetailGenerate}
+      onCancelGenerate={handleCancelGenerate}
    />
  );

@@ -1947,6 +2036,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
      setSmartScene={setSmartScene}
      setTryOnRatio={setTryOnRatio}
      handleTryOnGenerate={handleTryOnGenerate}
+      onCancelGenerate={handleCancelGenerate}
    />
  );

@@ -2022,6 +2112,11 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
          {productSetStatus === "generating" ? <LoadingOutlined /> : null}
          {setPrimaryLabel}
        </button>
+        {productSetStatus === "generating" ? (
+          <button type="button" className="product-set-floating-submit product-set-floating-submit--cancel" onClick={handleCancelGenerate}>
+            {"\u53d6\u6d88\u751f\u6210"}
+          </button>
+        ) : null}
      </section>

      <button type="button" className="product-clone-help" aria-label="帮助">
@@ -2373,6 +2468,7 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
            <EcommerceVideoWorkspace
              isAuthenticated={Boolean((_props as Record<string, unknown>).isAuthenticated)}
              productImageDataUrls={productImages.map((img) => img.src)}
+              productImageFiles={productImages.map((img) => img.file)}
              requirement={requirement}
              platform={platform}
              aspectRatio={ratio.includes("9：16") || ratio.includes("9:16") ? "9:16" : ratio.includes("16：9") || ratio.includes("16:9") ? "16:9" : ratio.includes("3：4") || ratio.includes("3:4") ? "3:4" : "9:16"}
@@ -34,6 +34,7 @@ import {
 interface EcommerceVideoWorkspaceProps {
  isAuthenticated: boolean;
  productImageDataUrls: string[];
+  productImageFiles?: Array<File | undefined>;
  requirement: string;
  platform: string;
  aspectRatio: string;
@@ -97,6 +98,7 @@ function stepCompletedFromProgress(step: PlanStep, p: EcommerceVideoPlanProgress
 export default function EcommerceVideoWorkspace({
  isAuthenticated,
  productImageDataUrls,
+  productImageFiles = [],
  requirement,
  platform,
  aspectRatio,
@@ -376,8 +378,9 @@ export default function EcommerceVideoWorkspace({
      });
    };
    try {
+      const productImageSources = productImageDataUrls.map((url, index) => productImageFiles[index] ?? url);
      const result = await runVideoPlan(
-        productImageDataUrls, requirement, buildConfig(),
+        productImageSources, requirement, buildConfig(),
        {
          onStepStart: (step) => setCurrentStep(step),
          onStepDone: (step) => {
@@ -30,13 +30,61 @@ export interface PlanCallbacks {
  resumeFrom?: EcommerceVideoPlanProgress;
 }

+const LOCAL_PREVIEW_MISSING_FILE_MESSAGE = "Please re-upload the product image before generating the short video.";
+
+function readBlobAsDataUrl(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result || ""));
+    reader.onerror = () => reject(reader.error || new Error("File read failed"));
+    reader.readAsDataURL(blob);
+  });
+}
+
+function normalizeRemoteImageUrl(source: string): string | null {
+  try {
+    const url = new URL(source, typeof window !== "undefined" ? window.location.href : undefined);
+    return url.protocol === "http:" || url.protocol === "https:" ? url.href : null;
+  } catch {
+    return null;
+  }
+}
+
+async function uploadProductImageSource(source: string | Blob): Promise<string> {
+  if (typeof source === "string") {
+    if (source.startsWith("blob:")) {
+      throw new Error(LOCAL_PREVIEW_MISSING_FILE_MESSAGE);
+    }
+
+    if (source.startsWith("data:")) {
+      const mimeType = normalizeEcommerceImageMime(source.match(/^data:([^;,]+)/)?.[1] || "image/png");
+      const result = await aiGenerationClient.uploadAsset({ dataUrl: source, mimeType, scope: "ecommerce-product" });
+      return result.url;
+    }
+
+    const remoteUrl = normalizeRemoteImageUrl(source);
+    if (remoteUrl) {
+      const result = await aiGenerationClient.uploadAssetByUrl({ sourceUrl: remoteUrl, scope: "ecommerce-product" });
+      return result.url;
+    }
+
+    throw new Error("Unsupported product image URL. Please re-upload the product image.");
+  }
+
+  const mimeType = normalizeEcommerceImageMime(source.type || "image/png");
+  const blob = source.type === mimeType ? source : new Blob([source], { type: mimeType });
+  const dataUrl = await readBlobAsDataUrl(blob);
+  const result = await aiGenerationClient.uploadAsset({ dataUrl, mimeType, scope: "ecommerce-product" });
+  return result.url;
+}
+
 /**
 * Run the full ad video planning pipeline.
 * Supports resumption: if `resumeFrom` contains data for a step, that step is skipped.
 * After each step, `onPartialProgress` fires so callers can persist intermediate state.
 */
 export async function runVideoPlan(
-  imageDataUrls: string[],
+  imageSources: Array<string | Blob>,
  manualText: string,
  config: AdVideoUserConfig,
  callbacks: PlanCallbacks,
@@ -45,41 +93,30 @@ export async function runVideoPlan(
  const progress: EcommerceVideoPlanProgress = { ...resumeFrom };
  const emit = () => callbacks.onPartialProgress?.({ ...progress });

-  // ── Step: upload ──────────────────────────────────────
+  // Step: upload
  if (!progress.imageUrls?.length) {
    onStepStart("upload");
    const imageUrls: string[] = [];
    const rejected: string[] = [];
-    for (const srcUrl of imageDataUrls) {
+    for (const source of imageSources) {
      try {
-        const resp = await fetch(srcUrl);
-        const rawBlob = await resp.blob();
-        const mimeType = normalizeEcommerceImageMime(rawBlob.type);
-        const blob = rawBlob.type === mimeType ? rawBlob : new Blob([rawBlob], { type: mimeType });
-        const dataUrl = await new Promise<string>((resolve, reject) => {
-          const reader = new FileReader();
-          reader.onload = () => resolve(String(reader.result || ""));
-          reader.onerror = () => reject(reader.error || new Error("文件读取失败"));
-          reader.readAsDataURL(blob);
-        });
-        const result = await aiGenerationClient.uploadAsset({ dataUrl, mimeType, scope: "ecommerce-product" });
-        imageUrls.push(result.url);
+        imageUrls.push(await uploadProductImageSource(source));
      } catch (err) {
-        rejected.push(err instanceof Error ? err.message : "图片上传失败");
+        rejected.push(err instanceof Error ? err.message : "Image upload failed");
      }
    }
    if (rejected.length) {
      progress.uploadWarnings = rejected;
      callbacks.onUploadRejected?.(rejected);
    }
-    if (!imageUrls.length) throw new Error("图片上传失败，请检查图片格式或网络后重试");
+    if (!imageUrls.length) throw new Error("Image upload failed. Please check the image format or network and try again.");
    progress.imageUrls = imageUrls;
    onStepDone("upload");
    callbacks.onImagesUploaded?.(imageUrls);
    emit();
  }

-  // ── Step: analyze ─────────────────────────────────────
+  // Step: analyze
  if (progress.imageDescription === undefined) {
    onStepStart("analyze");
    progress.imageDescription = await analyzeProductImages(progress.imageUrls!, signal);
@@ -87,7 +124,7 @@ export async function runVideoPlan(
    emit();
  }

-  // ── Step: summary ─────────────────────────────────────
+  // Step: summary
  if (!progress.summary) {
    onStepStart("summary");
    progress.summary = await buildProductSummary(progress.imageDescription || "", manualText, signal);
@@ -95,7 +132,7 @@ export async function runVideoPlan(
    emit();
  }

-  // ── Step: selling ─────────────────────────────────────
+  // Step: selling
  if (!progress.selling) {
    onStepStart("selling");
    progress.selling = await extractSellingPoints(progress.summary, signal);
@@ -103,16 +140,16 @@ export async function runVideoPlan(
    emit();
  }

-  // ── Step: creative ────────────────────────────────────
+  // Step: creative
  if (!progress.creatives?.length) {
    onStepStart("creative");
    progress.creatives = await generateCreativeOptions(progress.selling, config, signal);
-    if (!progress.creatives.length) throw new Error("未能生成有效的广告创意");
+    if (!progress.creatives.length) throw new Error("Failed to generate valid ad creatives.");
    onStepDone("creative");
    emit();
  }

-  // ── Step: storyboard ──────────────────────────────────
+  // Step: storyboard
  if (!progress.storyboard) {
    onStepStart("storyboard");
    progress.storyboard = await generateStoryboard(progress.creatives[0], progress.summary, config, signal);
@@ -120,7 +157,7 @@ export async function runVideoPlan(
    emit();
  }

-  // ── Step: prompts ─────────────────────────────────────
+  // Step: prompts
  if (!progress.videoPrompts) {
    onStepStart("prompts");
    progress.videoPrompts = await generateVideoPrompts(progress.storyboard, progress.summary, signal);
@@ -128,7 +165,7 @@ export async function runVideoPlan(
    emit();
  }

-  // ── Step: compliance ──────────────────────────────────
+  // Step: compliance
  if (!progress.compliance) {
    onStepStart("compliance");
    progress.compliance = await checkCompliance(progress.summary, progress.selling, progress.storyboard, signal);
@@ -185,7 +222,7 @@ export async function renderSceneImage(
  if (resultUrl) {
    callbacks.onSceneImageCompleted(input.sceneId, resultUrl);
  } else {
-    callbacks.onSceneImageFailed(input.sceneId, "图片生成未返回结果");
+    callbacks.onSceneImageFailed(input.sceneId, "Image generation returned no result.");
  }
 }

@@ -240,7 +277,7 @@ export async function renderScene(
  if (resultUrl) {
    callbacks.onSceneCompleted(input.sceneId, resultUrl);
  } else {
-    callbacks.onSceneFailed(input.sceneId, "任务未返回结果");
+    callbacks.onSceneFailed(input.sceneId, "Task returned no result.");
  }
 }

@@ -259,7 +296,7 @@ export function buildSceneTasks(
  });
 }

-// ── Video History API ──────────────────────────────────
+// Video History API

 export interface VideoHistoryScene {
  sceneId: number;
@@ -305,7 +342,7 @@ export async function saveVideoHistory(payload: {
    headers: { "Content-Type": "application/json", ...getAuthHeaders() },
    body: JSON.stringify(payload),
  });
-  if (!res.ok) throw new Error("保存历史记录失败");
+  if (!res.ok) throw new Error("Failed to save video history");
  return res.json();
 }

@@ -317,7 +354,7 @@ export async function fetchVideoHistory(
    `${API_BASE}?limit=${limit}&offset=${offset}`,
    { headers: getAuthHeaders() },
  );
-  if (!res.ok) throw new Error("获取历史记录失败");
+  if (!res.ok) throw new Error("Failed to fetch video history");
  return res.json();
 }

@@ -326,5 +363,5 @@ export async function deleteVideoHistory(id: number): Promise<void> {
    method: "DELETE",
    headers: getAuthHeaders(),
  });
-  if (!res.ok) throw new Error("删除失败");
+  if (!res.ok) throw new Error("Failed to delete video history");
 }
@@ -133,6 +133,7 @@ interface EcommerceClonePanelProps {
  clampCloneVideoDuration: (value: number) => number;
  setCloneVideoSmart: (updater: (current: boolean) => boolean) => void;
  handleGenerate: () => void;
+  onCancelGenerate: () => void;
  formatRatioDisplayValue: (value: string) => string;
  setVideoOutfitFiles?: (video: File | null, ref: File | null) => void;
  onStartVideoPlan?: () => void;
@@ -200,6 +201,7 @@ export default function EcommerceClonePanel({
  clampCloneVideoDuration,
  setCloneVideoSmart,
  handleGenerate,
+  onCancelGenerate,
  formatRatioDisplayValue,
  setVideoOutfitFiles,
  onStartVideoPlan,
@@ -746,6 +748,11 @@ export default function EcommerceClonePanel({
          {status === "generating" ? <LoadingOutlined /> : status === "failed" ? <ReloadOutlined /> : null}
          {status === "generating" ? "生成中..." : status === "failed" ? "重新生成" : cloneOutput === "video-outfit" ? "✦ 开始换装" : "✦ 开始生成"}
        </button>
+        {status === "generating" && cloneOutput !== "video" ? (
+          <button type="button" className="clone-ai-generate clone-ai-generate--cancel" onClick={onCancelGenerate}>
+            {"\u53d6\u6d88\u751f\u6210"}
+          </button>
+        ) : null}
      </div>
    </>
  );
@@ -28,6 +28,7 @@ interface EcommerceDetailPanelProps {
  handleDetailAiWrite: () => void;
  toggleDetailModule: (id: string) => void;
  handleDetailGenerate: () => void;
+  onCancelGenerate: () => void;
 }

 export default function EcommerceDetailPanel({
@@ -56,6 +57,7 @@ export default function EcommerceDetailPanel({
  handleDetailAiWrite,
  toggleDetailModule,
  handleDetailGenerate,
+  onCancelGenerate,
 }: EcommerceDetailPanelProps) {
  return (
    <>
@@ -162,6 +164,11 @@ export default function EcommerceDetailPanel({
          {detailStatus === "generating" ? <LoadingOutlined /> : null}
          {detailPrimaryLabel}
        </button>
+        {detailStatus === "generating" ? (
+          <button type="button" className="product-clone-primary product-clone-primary--cancel" onClick={onCancelGenerate}>
+            {"\u53d6\u6d88\u751f\u6210"}
+          </button>
+        ) : null}
      </footer>
    </>
  );
@@ -35,6 +35,7 @@ interface EcommerceTryOnPanelProps {
  setSmartScene: (updater: (current: boolean) => boolean) => void;
  setTryOnRatio: (value: string) => void;
  handleTryOnGenerate: () => void;
+  onCancelGenerate: () => void;
 }

 export default function EcommerceTryOnPanel({
@@ -70,6 +71,7 @@ export default function EcommerceTryOnPanel({
  setSmartScene,
  setTryOnRatio,
  handleTryOnGenerate,
+  onCancelGenerate,
 }: EcommerceTryOnPanelProps) {
  return (
    <>
@@ -213,6 +215,11 @@ export default function EcommerceTryOnPanel({
          {tryOnStatus === "generating" ? <LoadingOutlined /> : null}
          {tryOnPrimaryLabel}
        </button>
+        {tryOnStatus === "generating" ? (
+          <button type="button" className="product-clone-primary product-clone-primary--cancel" onClick={onCancelGenerate}>
+            {"\u53d6\u6d88\u751f\u6210"}
+          </button>
+        ) : null}
      </footer>
    </>
  );