Initial commit: OmniAI Web Frontend

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-06-02 12:38:01 +08:00
commit bedee3ba8d
183 changed files with 94805 additions and 0 deletions
@@ -0,0 +1,471 @@
+import {
+  ArrowLeftOutlined,
+  CameraOutlined,
+  ColumnWidthOutlined,
+  CustomerServiceOutlined,
+  DeleteOutlined,
+  DownloadOutlined,
+  EditOutlined,
+  FontSizeOutlined,
+  InboxOutlined,
+  LoadingOutlined,
+  PlayCircleOutlined,
+  RightOutlined,
+  ScissorOutlined,
+  SwapOutlined,
+  ThunderboltOutlined,
+  VideoCameraOutlined,
+} from "@ant-design/icons";
+import { useCallback, useEffect, useRef, useState } from "react";
+import StudioToolLayout from "../../components/StudioToolLayout";
+import type { WebImageWorkbenchTool, WebViewKey } from "../../types";
+import { aiGenerationClient } from "../../api/aiGenerationClient";
+import { uploadAssetWithProgress } from "../../api/uploadWithProgress";
+import { waitForTask } from "../../api/taskSubscription";
+import { addToolResultToAssetLibrary, saveToolResultToLocal } from "../workbench/toolResultActions";
+import { CheckCircleOutlined, InfoCircleOutlined } from "@ant-design/icons";
+
+interface CharacterMixPageProps {
+  isAuthenticated: boolean;
+  onOpenMore?: () => void;
+  onOpenImageTool?: (tool: WebImageWorkbenchTool) => void;
+  onSelectView?: (view: WebViewKey) => void;
+}
+
+function CharacterMixPage({
+  isAuthenticated,
+  onOpenMore,
+  onOpenImageTool,
+  onSelectView,
+}: CharacterMixPageProps) {
+  const [characterFile, setCharacterFile] = useState("");
+  const [characterPreview, setCharacterPreview] = useState("");
+  const [characterDataUrl, setCharacterDataUrl] = useState("");
+  const [videoFile, setVideoFile] = useState("");
+  const [videoPreview, setVideoPreview] = useState("");
+  const [videoDataUrl, setVideoDataUrl] = useState("");
+  const [promptInput, setPromptInput] = useState("");
+  const [watermark, setWatermark] = useState(false);
+  const [checkImage, setCheckImage] = useState(true);
+  const [faceHint, setFaceHint] = useState<string | null>(null);
+  const faceDetectTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const [notice, setNotice] = useState("等待上传角色图和参考视频");
+  const [isCreating, setIsCreating] = useState(false);
+  const [isDownloadingResult, setIsDownloadingResult] = useState(false);
+  const [isSavingResultAsset, setIsSavingResultAsset] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [resultUrl, setResultUrl] = useState<string | null>(null);
+  const abortRef = useRef(false);
+  const taskIdRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (characterPreview) URL.revokeObjectURL(characterPreview);
+    };
+  }, [characterPreview]);
+
+  useEffect(() => {
+    return () => {
+      if (videoPreview) URL.revokeObjectURL(videoPreview);
+    };
+  }, [videoPreview]);
+
+  useEffect(() => {
+    if (faceDetectTimerRef.current) clearTimeout(faceDetectTimerRef.current);
+    if (!checkImage || !characterPreview) {
+      setFaceHint(null);
+      return;
+    }
+    setFaceHint("analyzing");
+    faceDetectTimerRef.current = setTimeout(() => {
+      setFaceHint("ready");
+    }, 800);
+    return () => {
+      if (faceDetectTimerRef.current) clearTimeout(faceDetectTimerRef.current);
+    };
+  }, [checkImage, characterPreview]);
+
+  useEffect(() => {
+    return () => {
+      abortRef.current = true;
+      if (taskIdRef.current) {
+        aiGenerationClient.cancelTask(taskIdRef.current).catch(() => {});
+      }
+    };
+  }, []);
+
+  const handleCancel = useCallback(() => {
+    abortRef.current = true;
+    if (taskIdRef.current) {
+      aiGenerationClient.cancelTask(taskIdRef.current).catch(() => {});
+      taskIdRef.current = null;
+    }
+  }, []);
+
+  const pollTaskUntilDone = useCallback(async (taskId: string): Promise<string | null> => {
+    return waitForTask(taskId, {
+      abortRef,
+      onProgress: (e) => setProgress(e.progress || 0),
+    });
+  }, []);
+
+  const handleCreateTask = async () => {
+    if (isCreating) return;
+    if (!characterDataUrl) {
+      setNotice("请先上传人物图");
+      return;
+    }
+    if (!videoDataUrl) {
+      setNotice("请先上传参考视频");
+      return;
+    }
+    if (!isAuthenticated) {
+      setNotice("请先登录后再创建角色迁移任务。");
+      return;
+    }
+
+    abortRef.current = false;
+    setIsCreating(true);
+    setProgress(0);
+    setResultUrl(null);
+    setNotice("正在上传素材...");
+
+    try {
+      const [imageAsset, videoAsset] = await Promise.all([
+        uploadAssetWithProgress(
+          { dataUrl: characterDataUrl, scope: "character-mix", mimeType: "image/png" },
+          { onProgress: (p) => setNotice(`上传人物图 ${p}%`) },
+        ),
+        uploadAssetWithProgress(
+          { dataUrl: videoDataUrl, scope: "character-mix", mimeType: "video/mp4" },
+          { onProgress: (p) => setNotice(`上传参考视频 ${p}%`) },
+        ),
+      ]);
+
+      const prompt = promptInput.trim() || "保持角色原有服装和面部特征，动作流畅自然";
+      setNotice("正在生成角色迁移视频...");
+      const { taskId } = await aiGenerationClient.createVideoTask({
+        model: "wan2.2-animate-mix",
+        prompt,
+        imageUrl: imageAsset.url,
+        referenceUrls: [videoAsset.url],
+        hasReferenceVideo: true,
+        muted: !watermark,
+      });
+      taskIdRef.current = taskId;
+
+      const result = await pollTaskUntilDone(taskId);
+      setResultUrl(result);
+      setNotice(result ? "角色迁移完成" : "已取消");
+    } catch (error) {
+      setNotice(error instanceof Error ? error.message : "任务创建失败，请稍后重试。");
+    } finally {
+      setIsCreating(false);
+      setProgress(0);
+    }
+  };
+
+  const handleDownloadResult = async () => {
+    if (!resultUrl || isDownloadingResult) return;
+    setIsDownloadingResult(true);
+    try {
+      const status = await saveToolResultToLocal({
+        url: resultUrl,
+        name: `character-mix-${Date.now()}`,
+        type: "video",
+        isVideo: true,
+        taskId: taskIdRef.current || undefined,
+      });
+      setNotice(status === "saved" ? "已保存到本地" : "已开始保存到本地");
+    } catch (error) {
+      setNotice(error instanceof Error ? error.message : "保存本地失败");
+    } finally {
+      setIsDownloadingResult(false);
+    }
+  };
+
+  const handleAddResultToAssets = async () => {
+    if (!resultUrl || isSavingResultAsset) return;
+    setIsSavingResultAsset(true);
+    try {
+      const status = await addToolResultToAssetLibrary({
+        url: resultUrl,
+        name: `角色迁移-${Date.now()}`,
+        type: "video",
+        isVideo: true,
+        taskId: taskIdRef.current || undefined,
+        description: "从工具盒角色迁移生成的视频。",
+        tags: ["工具盒", "角色迁移", "生成视频"],
+      });
+      setNotice(status === "server" ? "已加入资产库" : "已加入本地资产库");
+    } catch (error) {
+      setNotice(error instanceof Error ? error.message : "加入资产库失败");
+    } finally {
+      setIsSavingResultAsset(false);
+    }
+  };
+
+  return (
+    <section className="image-workbench-page character-mix-page" aria-label="角色迁移">
+      <header className="image-workbench-topbar">
+        <button type="button" className="image-workbench-back-to-more" onClick={onOpenMore}>
+          工具盒
+        </button>
+        <div className="image-workbench-tool-strip" aria-label="功能入口">
+          <button type="button" onClick={() => onOpenImageTool?.("workbench")}>
+            <EditOutlined />
+            图片工作台
+          </button>
+          <button type="button" onClick={() => onOpenImageTool?.("inpaint")}>
+            <ScissorOutlined />
+            局部重绘
+          </button>
+          <button type="button" onClick={() => onOpenImageTool?.("camera")}>
+            <CameraOutlined />
+            镜头实验室
+          </button>
+          <button type="button" onClick={() => onSelectView?.("digitalHuman")}>
+            <CustomerServiceOutlined />
+            数字人
+          </button>
+          <button type="button" className="is-active">
+            <SwapOutlined />
+            角色迁移
+          </button>
+          <button type="button" onClick={() => onSelectView?.("resolutionUpscale")}>
+            <ColumnWidthOutlined />
+            分辨率提升
+          </button>
+          <button type="button" onClick={() => onSelectView?.("watermarkRemoval")}>
+            <DeleteOutlined />
+            去水印
+          </button>
+          <button type="button" onClick={() => onSelectView?.("subtitleRemoval")}>
+            <FontSizeOutlined />
+            字幕去除
+          </button>
+        </div>
+      </header>
+
+      <div className="image-workbench-subbar">
+        <button type="button" className="image-workbench-icon-btn" aria-label="返回工具盒" onClick={onOpenMore}>
+          <ArrowLeftOutlined />
+        </button>
+        <strong>角色迁移</strong>
+        <div className="image-workbench-camera-summary" aria-label="角色迁移状态">
+          <strong>{characterFile && videoFile ? "素材已就绪" : "迁移预览"}</strong>
+          <span>{characterFile || videoFile ? "人物 + 视频" : "待上传"}</span>
+        </div>
+        <button type="button" className="image-workbench-icon-btn" aria-label="下一项">
+          <RightOutlined />
+        </button>
+      </div>
+
+      <StudioToolLayout
+        noTop
+        leftPanel={
+          <>
+            <div className="studio-panel__section">
+              <div className="studio-panel__section-head">
+                <span className="studio-panel__section-title">人物图</span>
+                <span className={`studio-panel__section-chip studio-panel__section-chip--${characterFile ? "ready" : "waiting"}`}>
+                  {characterFile ? "已就绪" : "待上传"}
+                </span>
+              </div>
+              <div className="studio-panel__section-body">
+                <label className={characterFile ? "studio-upload-slot--filled" : "studio-upload-slot--empty"}>
+                  <input
+                    type="file"
+                    accept="image/*"
+                    onChange={(event) => {
+                      const file = event.target.files?.[0];
+                      if (!file) return;
+                      if (characterPreview) URL.revokeObjectURL(characterPreview);
+                      setCharacterFile(file.name);
+                      setCharacterPreview(URL.createObjectURL(file));
+                      const reader = new FileReader();
+                      reader.onload = () => {
+                        if (typeof reader.result === "string") setCharacterDataUrl(reader.result);
+                      };
+                      reader.readAsDataURL(file);
+                      setNotice(`已选择人物图 ${file.name}`);
+                    }}
+                  />
+                  {characterPreview ? (
+                    <img src={characterPreview} alt="" className="studio-upload-slot--filled__thumb" />
+                  ) : (
+                    <span className="studio-upload-slot--empty__icon">
+                      <InboxOutlined />
+                    </span>
+                  )}
+                  <span className="studio-upload-slot--filled__info">
+                    <strong>{characterFile || "上传人物图"}</strong>
+                    <small>单人正面或半身更稳定</small>
+                  </span>
+                </label>
+              </div>
+            </div>
+
+            <div className="studio-panel__section">
+              <div className="studio-panel__section-head">
+                <span className="studio-panel__section-title">参考视频</span>
+                <span className={`studio-panel__section-chip studio-panel__section-chip--${videoFile ? "ready" : "waiting"}`}>
+                  {videoFile ? "已就绪" : "待上传"}
+                </span>
+              </div>
+              <div className="studio-panel__section-body">
+                <label className={videoFile ? "studio-upload-slot--filled" : "studio-upload-slot--empty"}>
+                  <input
+                    type="file"
+                    accept="video/*"
+                    onChange={(event) => {
+                      const file = event.target.files?.[0];
+                      if (!file) return;
+                      if (videoPreview) URL.revokeObjectURL(videoPreview);
+                      setVideoFile(file.name);
+                      setVideoPreview(URL.createObjectURL(file));
+                      const reader = new FileReader();
+                      reader.onload = () => {
+                        if (typeof reader.result === "string") setVideoDataUrl(reader.result);
+                      };
+                      reader.readAsDataURL(file);
+                      setNotice(`已选择参考视频 ${file.name}`);
+                    }}
+                  />
+                  <span className="studio-upload-slot--empty__icon">
+                    <VideoCameraOutlined />
+                  </span>
+                  <span className="studio-upload-slot--filled__info">
+                    <strong>{videoFile || "上传参考视频"}</strong>
+                    <small>MP4 / MOV / AVI</small>
+                  </span>
+                </label>
+              </div>
+            </div>
+          </>
+        }
+        canvas={
+          isCreating ? (
+            <div className="image-workbench-generating">
+              <LoadingOutlined style={{ fontSize: 32 }} />
+              <strong>角色迁移中...</strong>
+              <div className="image-workbench-progress-bar">
+                <div className="image-workbench-progress-fill" style={{ width: `${progress}%` }} />
+              </div>
+              <span>{progress}%</span>
+              <button type="button" className="image-workbench-cancel" onClick={handleCancel}>取消</button>
+            </div>
+          ) : resultUrl ? (
+            <div className="studio-canvas-video">
+              <video src={resultUrl} controls playsInline style={{ maxHeight: "100%", maxWidth: "100%", borderRadius: 12 }} />
+              {characterPreview && (
+                <div className="studio-canvas-pip">
+                  <img src={characterPreview} alt="人物图" />
+                </div>
+              )}
+            </div>
+          ) : videoPreview ? (
+            <div className="studio-canvas-video">
+              <video src={videoPreview} controls muted playsInline />
+              {characterPreview ? (
+                <div className="studio-canvas-pip">
+                  <img src={characterPreview} alt="人物图" />
+                </div>
+              ) : null}
+            </div>
+          ) : (
+            <div className="studio-canvas-ghost">
+              <div className="studio-canvas-ghost__icon">
+                <SwapOutlined />
+              </div>
+              <div className="studio-canvas-ghost__title">上传人物图与参考视频</div>
+              <div className="studio-canvas-ghost__hint">将静态角色迁移到参考视频的动作与表情中。</div>
+            </div>
+          )
+        }
+        rightPanel={
+          <div className="studio-panel__section">
+            <div className="studio-panel__section-head">
+              <span className="studio-panel__section-title">迁移设置</span>
+            </div>
+            <div className="studio-panel__section-body">
+              <div style={{ marginBottom: 10 }}>
+                <div className="studio-label" style={{ fontSize: 11, color: "var(--fg-muted, #999)", marginBottom: 4 }}>驱动提示词</div>
+                <textarea
+                  value={promptInput}
+                  onChange={(e) => setPromptInput(e.target.value)}
+                  placeholder="保持角色原有服装，动作流畅自然"
+                  rows={3}
+                  maxLength={1000}
+                  style={{
+                    width: "100%", resize: "vertical", background: "var(--bg-elevated, #1a1a1a)",
+                    border: "1px solid var(--border-subtle, #333)", borderRadius: 6,
+                    padding: "6px 8px", fontSize: 12, color: "var(--fg-body, #eee)",
+                    fontFamily: "inherit", outline: "none", boxSizing: "border-box",
+                  }}
+                />
+              </div>
+              <div className="studio-toggle-row">
+                <div className="studio-toggle-row__copy">
+                  <span className="studio-toggle-row__title">图像检测</span>
+                  <span className="studio-toggle-row__desc">检测人物朝向</span>
+                </div>
+                <button type="button" className={`studio-toggle${checkImage ? " is-on" : ""}`} onClick={() => setCheckImage(!checkImage)}>
+                  <span className="studio-toggle__thumb" />
+                </button>
+              </div>
+              {checkImage && characterPreview && faceHint && (
+                <div className={`character-mix-face-hint character-mix-face-hint--${faceHint}`}>
+                  {faceHint === "analyzing" ? (
+                    <>
+                      <InfoCircleOutlined />
+                      <span>正在分析人物图像...</span>
+                    </>
+                  ) : (
+                    <>
+                      <CheckCircleOutlined />
+                      <span>图像已就绪，将自动检测人物面部朝向</span>
+                    </>
+                  )}
+                </div>
+              )}
+              <div className="studio-toggle-row">
+                <div className="studio-toggle-row__copy">
+                  <span className="studio-toggle-row__title">水印输出</span>
+                  <span className="studio-toggle-row__desc">含水印版本</span>
+                </div>
+                <button type="button" className={`studio-toggle${watermark ? " is-on" : ""}`} onClick={() => setWatermark(!watermark)}>
+                  <span className="studio-toggle__thumb" />
+                </button>
+              </div>
+              <button type="button" className="studio-generate-btn" onClick={() => void handleCreateTask()} disabled={isCreating || !characterDataUrl || !videoDataUrl}>
+                {isCreating ? <LoadingOutlined /> : <PlayCircleOutlined />}
+                {isCreating ? "生成中..." : "开始迁移"}
+              </button>
+              {resultUrl && (
+                <div className="studio-result-actions">
+                  <button type="button" onClick={() => void handleDownloadResult()} disabled={isDownloadingResult}>
+                    <DownloadOutlined />
+                    {isDownloadingResult ? "保存中" : "保存本地"}
+                  </button>
+                  <button type="button" onClick={() => void handleAddResultToAssets()} disabled={isSavingResultAsset}>
+                    <InboxOutlined />
+                    {isSavingResultAsset ? "加入中" : "加入资产库"}
+                  </button>
+                </div>
+              )}
+            </div>
+          </div>
+        }
+        statusBar={
+          <>
+            <span className="studio-status-bar__badge studio-status-bar__badge--idle">就绪</span>
+            <span className="studio-status-bar__text">{notice}</span>
+          </>
+        }
+      />
+    </section>
+  );
+}
+
+export default CharacterMixPage;