增加对口型

README.md

@@ -11,6 +11,31 @@
 - 生成唇形同步动画
 - 导出和分享功能
 
+## 对口型功能
+
+该功能允许用户根据已上传的音频和视频文件生成口型同步的视频。
+
+### 功能特点
+
+1. **对口型生成**：将音频与视频文件结合，生成口型同步的视频
+2. **进度显示**：实时显示对口型生成的进度
+3. **结果预览**：完成后直接在界面中预览生成的视频
+4. **结果保存**：将生成的视频保存到项目中
+
+### 使用方法
+
+1. 上传项目的音频文件和参考视频文件
+2. 在项目详情页点击"生成对口型"按钮
+3. 等待处理完成（过程可能需要几分钟）
+4. 生成完成后，可以直接在页面上预览和使用对口型视频
+
+### 技术实现
+
+- 通过 Coze API 上传音频和视频文件获取可访问链接
+- 调用对口型 API 提交音频和视频 URL 进行处理
+- 通过轮询方式获取处理进度和最终结果
+- 将结果保存到项目数据库中并展示到界面
+
 ## 开发环境设置
 
 ### 前提条件

src/components/CozeApiSettings.js

@@ -1,7 +1,9 @@
 import React, { useState, useEffect } from 'react';
-import { Form, Button, Card, Container, Row, Col, Alert, Tab, Tabs, InputGroup } from 'react-bootstrap';
+import { Form, Button, Card, Container, Row, Col, Alert, Tab, Tabs, InputGroup, Spinner } from 'react-bootstrap';
 import { saveCozeApiToken, getCozeApiToken, saveWorkflowIds, getWorkflowIds } from '../utils/storageUtils';
 import { WORKFLOW_DISPLAY_NAMES, hasValidToken } from '../utils/cozeConfig';
+import { getLipSyncServer, saveLipSyncServer } from '../utils/lipSyncConfig';
+import lipSyncService from '../services/lipSyncService';
 import { toast } from 'react-toastify';
 
 /**
@@ -15,6 +17,9 @@ const CozeApiSettings = ({ onSave, isInModal = true }) => {
   const [activeTab, setActiveTab] = useState('token');
   const [hasChanges, setHasChanges] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
+  const [lipSyncServerUrl, setLipSyncServerUrl] = useState('');
+  const [testing, setTesting] = useState(false);
+  const [testResult, setTestResult] = useState(null);
 
   // 加载已存储的设置
   useEffect(() => {
@@ -28,6 +33,11 @@ const CozeApiSettings = ({ onSave, isInModal = true }) => {
       setWorkflowIds(storedWorkflowIds);
     }
     
+    const storedLipSyncServer = getLipSyncServer();
+    if (storedLipSyncServer) {
+      setLipSyncServerUrl(storedLipSyncServer);
+    }
+    
     setHasChanges(false);
   }, []);
 
@@ -45,6 +55,40 @@ const CozeApiSettings = ({ onSave, isInModal = true }) => {
     }));
     setHasChanges(true);
   };
+  
+  // 处理对口型服务器地址变更
+  const handleLipSyncServerChange = (e) => {
+    setLipSyncServerUrl(e.target.value);
+    setHasChanges(true);
+    // 清除测试结果
+    setTestResult(null);
+  };
+  
+  // 测试对口型服务器连接
+  const testLipSyncServer = async () => {
+    setTesting(true);
+    setTestResult(null);
+    
+    try {
+      const result = await lipSyncService.testServer(lipSyncServerUrl);
+      
+      setTestResult(result);
+      
+      if (result.success) {
+        toast.success(result.message);
+      } else {
+        toast.error(result.message);
+      }
+    } catch (error) {
+      setTestResult({
+        success: false,
+        message: `测试失败: ${error.message}`
+      });
+      toast.error(`测试失败: ${error.message}`);
+    } finally {
+      setTesting(false);
+    }
+  };
 
   // 保存设置
   const handleSave = () => {
@@ -59,6 +103,9 @@ const CozeApiSettings = ({ onSave, isInModal = true }) => {
       // 保存工作流ID
       saveWorkflowIds(workflowIds);
       
+      // 保存对口型服务器配置
+      saveLipSyncServer(lipSyncServerUrl);
+      
       setHasChanges(false);
       toast.success('设置已保存');
       
@@ -153,6 +200,52 @@ const CozeApiSettings = ({ onSave, isInModal = true }) => {
           </p>
           {renderWorkflowIdInputs()}
         </Tab>
+        
+        <Tab eventKey="lipSyncServer" title="对口型服务器">
+          <p className="text-muted mb-3">
+            配置对口型服务器地址。请正确填写服务器地址，否则对口型功能将无法使用。
+          </p>
+          
+          <Form.Group className="mb-3">
+            <Form.Label>服务器地址</Form.Label>
+            <Form.Control
+              type="text"
+              placeholder="例如: https://a9k866906pialdug-80.container.x-gpu.com"
+              value={lipSyncServerUrl}
+              onChange={handleLipSyncServerChange}
+            />
+            <Form.Text className="text-muted">
+              对口型服务器地址，用于API请求和视频下载
+            </Form.Text>
+          </Form.Group>
+          
+          <Button 
+            variant="outline-primary" 
+            onClick={testLipSyncServer}
+            disabled={testing || !lipSyncServerUrl}
+            className="mb-3"
+          >
+            {testing ? (
+              <>
+                <Spinner 
+                  as="span"
+                  animation="border"
+                  size="sm"
+                  role="status"
+                  aria-hidden="true"
+                  className="me-2"
+                />
+                测试连接中...
+              </>
+            ) : "测试服务器连接"}
+          </Button>
+          
+          {testResult && (
+            <Alert variant={testResult.success ? "success" : "danger"} className="mt-2 mb-3">
+              {testResult.message}
+            </Alert>
+          )}
+        </Tab>
       </Tabs>
       
       <div className="text-center mt-4">

src/components/subtitleUpload/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Button, Form, Spinner, Card, ListGroup, Modal, InputGroup, Alert } from 'react-bootstrap';
 import { toast } from 'react-toastify';
 import './style.css';
@@ -12,6 +12,7 @@ import { bookService, bookInfoService } from '../../db';
 import path from 'path-browserify';
 import os from 'os-browserify/browser';
 // fs模块在浏览器中不可用，需要通过IPC调用主进程
+import cozeUploadService from '../../services/cozeUploadService';
 
 const SubtitleUpload = ({ onProjectCreated, projectAudioFile, projectVideoFile }) => {
   const [file, setFile] = useState(null);
@@ -362,11 +363,22 @@ const SubtitleUpload = ({ onProjectCreated, projectAudioFile, projectVideoFile }
       const savedAudio = await saveAudioFile(projectAudioFile, bookId);
       
       if (savedAudio.success) {
-        // 更新项目记录中的音频路径为绝对路径
+        // 上传音频到云端获取链接
+        toast.info('正在将音频上传到云端...');
+        const audioUrl = await cozeUploadService.uploadFileAndGetLink(projectAudioFile);
+        
+        // 更新项目记录中的音频路径为绝对路径，并保存云端链接
         await bookService.updateBook(bookId, {
-          audio_path: savedAudio.absolutePath
+          audio_path: savedAudio.absolutePath,
+          audio_url: audioUrl // 新增字段保存云端链接
         });
-        toast.success('音频文件路径已保存');
+        
+        if (audioUrl) {
+          toast.success('音频文件已保存并上传到云端');
+        } else {
+          toast.success('音频文件路径已保存');
+          toast.warning('音频云端链接获取失败，将在生成对口型时重新上传');
+        }
       } else {
         toast.warning(`保存音频文件失败: ${savedAudio.error}`);
       }
@@ -379,11 +391,22 @@ const SubtitleUpload = ({ onProjectCreated, projectAudioFile, projectVideoFile }
       const savedVideo = await saveVideoFile(projectVideoFile, bookId);
       
       if (savedVideo.success) {
-        // 更新项目记录中的视频路径为绝对路径
+        // 上传视频到云端获取链接
+        toast.info('正在将视频上传到云端...');
+        const videoUrl = await cozeUploadService.uploadFileAndGetLink(projectVideoFile);
+        
+        // 更新项目记录中的视频路径为绝对路径，并保存云端链接
         await bookService.updateBook(bookId, {
-          video_path: savedVideo.absolutePath
+          video_path: savedVideo.absolutePath,
+          video_url: videoUrl // 新增字段保存云端链接
         });
-        toast.success('视频文件路径已保存');
+        
+        if (videoUrl) {
+          toast.success('视频文件已保存并上传到云端');
+        } else {
+          toast.success('视频文件路径已保存');
+          toast.warning('视频云端链接获取失败，将在生成对口型时重新上传');
+        }
       } else {
         toast.warning(`保存视频文件失败: ${savedVideo.error}`);
       }

src/db/bookService.js

@@ -70,10 +70,45 @@ class BookService {
         throw new Error(`项目(ID: ${id})不存在`);
       }
       
-      const updatedBook = {
-        ...bookData,
-        updated_at: new Date().toISOString()
-      };
+      const updatedBook = {};
+      
+      if (bookData.title !== undefined) {
+        updatedBook.title = bookData.title;
+      }
+      
+      if (bookData.subtitle_path !== undefined) {
+        updatedBook.subtitle_path = bookData.subtitle_path;
+      }
+      
+      if (bookData.audio_path !== undefined) {
+        updatedBook.audio_path = bookData.audio_path;
+      }
+      
+      if (bookData.video_path !== undefined) {
+        updatedBook.video_path = bookData.video_path;
+      }
+      
+      if (bookData.lip_sync_video_path !== undefined) {
+        updatedBook.lip_sync_video_path = bookData.lip_sync_video_path;
+      }
+      
+      if (bookData.lip_sync_task_id !== undefined) {
+        updatedBook.lip_sync_task_id = bookData.lip_sync_task_id;
+      }
+      
+      if (bookData.audio_url !== undefined) {
+        updatedBook.audio_url = bookData.audio_url;
+      }
+      
+      if (bookData.video_url !== undefined) {
+        updatedBook.video_url = bookData.video_url;
+      }
+      
+      if (bookData.style !== undefined) {
+        updatedBook.style = bookData.style;
+      }
+      
+      updatedBook.updated_at = new Date().toISOString();
       
       await db('book').where({ id }).update(updatedBook);
       return true;

src/nodeapi/dbHandler.js

@@ -51,6 +51,42 @@ const updateDbStructure = async (db) => {
     });
   }
 
+  // 检查book表是否有lip_sync_video_path字段
+  const hasLipSyncVideoPathColumn = await db.schema.hasColumn('book', 'lip_sync_video_path');
+  if (!hasLipSyncVideoPathColumn) {
+    console.log('添加lip_sync_video_path字段到book表');
+    await db.schema.table('book', table => {
+      table.string('lip_sync_video_path').nullable();
+    });
+  }
+
+  // 检查book表是否有lip_sync_task_id字段
+  const hasLipSyncTaskIdColumn = await db.schema.hasColumn('book', 'lip_sync_task_id');
+  if (!hasLipSyncTaskIdColumn) {
+    console.log('添加lip_sync_task_id字段到book表');
+    await db.schema.table('book', table => {
+      table.string('lip_sync_task_id').nullable();
+    });
+  }
+
+  // 检查book表是否有audio_url字段
+  const hasAudioUrlColumn = await db.schema.hasColumn('book', 'audio_url');
+  if (!hasAudioUrlColumn) {
+    console.log('添加audio_url字段到book表');
+    await db.schema.table('book', table => {
+      table.string('audio_url').nullable();
+    });
+  }
+
+  // 检查book表是否有video_url字段
+  const hasVideoUrlColumn = await db.schema.hasColumn('book', 'video_url');
+  if (!hasVideoUrlColumn) {
+    console.log('添加video_url字段到book表');
+    await db.schema.table('book', table => {
+      table.string('video_url').nullable();
+    });
+  }
+
   // 检查book_info表是否有image_path字段
   const hasImagePathColumn = await db.schema.hasColumn('book_info', 'image_path');
   if (!hasImagePathColumn) {
@@ -121,6 +157,9 @@ const initDatabase = async (forceUpdate = false) => {
         table.string('video_path').nullable();
         table.string('subtitle_path').nullable();
         table.string('style').nullable();
+        table.string('audio_path').nullable();
+        table.string('lip_sync_video_path').nullable();
+        table.string('lip_sync_task_id').nullable();
         table.timestamp('created_at').defaultTo(db.fn.now());
         table.timestamp('updated_at').defaultTo(db.fn.now());
       });

src/pages/home/home.js

@@ -22,6 +22,8 @@ const Home = forwardRef((props, ref) => {
   const [currentAudio, setCurrentAudio] = useState(null);
   const [projectAudioFile, setProjectAudioFile] = useState(null);
   const [projectVideoFile, setProjectVideoFile] = useState(null);
+  const [showVideoPlayer, setShowVideoPlayer] = useState(false);
+  const [currentVideo, setCurrentVideo] = useState(null);
   const history = useHistory();
 
   const handleAddProject = () => {
@@ -307,6 +309,21 @@ const Home = forwardRef((props, ref) => {
     setCurrentAudio(null);
   };
 
+  // 播放视频
+  const playVideo = (projectId, videoPath) => {
+    setCurrentVideo({
+      projectId,
+      path: videoPath
+    });
+    setShowVideoPlayer(true);
+  };
+
+  // 关闭视频播放器
+  const closeVideoPlayer = () => {
+    setShowVideoPlayer(false);
+    setCurrentVideo(null);
+  };
+
   // 组件挂载时加载项目列表
   useEffect(() => {
     loadProjects();
@@ -380,6 +397,7 @@ const Home = forwardRef((props, ref) => {
                             <th>字幕文件</th>
                             <th>音频文件</th>
                             <th>视频文件</th>
+                            <th>对口型视频</th>
                             <th>操作</th>
                           </tr>
                         </thead>
@@ -397,30 +415,25 @@ const Home = forwardRef((props, ref) => {
                               </td>
                               <td>
                                 {project.audio_path ? (
-                                  <div className="file-path-badge" title={project.audio_path}>
-                                    <Badge bg="success">
-                                      {project.audio_path.length > 15 
-                                        ? project.audio_path.substring(0, 6) + '...' + project.audio_path.substring(project.audio_path.length - 6) 
-                                        : project.audio_path}
-                                    </Badge>
-                                  </div>
+                                  <Badge bg="success">已上传</Badge>
                                 ) : (
                                   <span className="text-muted">无</span>
                                 )}
                               </td>
                               <td>
                                 {project.video_path ? (
-                                  <div className="file-path-badge" title={project.video_path}>
-                                    <Badge bg="primary">
-                                      {project.video_path.length > 15 
-                                        ? project.video_path.substring(0, 6) + '...' + project.video_path.substring(project.video_path.length - 6) 
-                                        : project.video_path}
-                                    </Badge>
-                                  </div>
+                                  <Badge bg="success">已上传</Badge>
                                 ) : (
                                   <span className="text-muted">无</span>
                                 )}
                               </td>
+                              <td>
+                                {project.lip_sync_video_path ? (
+                                  <Badge bg="primary">已生成</Badge>
+                                ) : (
+                                  <span className="text-muted">未生成</span>
+                                )}
+                              </td>
                               <td className="action-buttons">
                                 <Button
                                   variant="outline-primary"
@@ -452,6 +465,15 @@ const Home = forwardRef((props, ref) => {
                                     播放音频
                                   </Button>
                                 )}
+                                {project.lip_sync_video_path && (
+                                  <Button
+                                    variant="outline-primary"
+                                    size="sm"
+                                    onClick={() => playVideo(project.id, project.lip_sync_video_path)}
+                                  >
+                                    播放对口型
+                                  </Button>
+                                )}
                                 <Button
                                   variant="outline-danger"
                                   size="sm"
@@ -577,6 +599,32 @@ const Home = forwardRef((props, ref) => {
           </Button>
         </Modal.Footer>
       </Modal>
+      
+      {/* 视频播放模态框 */}
+      <Modal show={showVideoPlayer} onHide={closeVideoPlayer} size="lg" centered>
+        <Modal.Header closeButton>
+          <Modal.Title>视频播放</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          {currentVideo && (
+            <div className="video-player-container">
+              <video 
+                className="w-100" 
+                controls 
+                autoPlay
+                src={currentVideo.path}
+              >
+                您的浏览器不支持视频播放
+              </video>
+            </div>
+          )}
+        </Modal.Body>
+        <Modal.Footer>
+          <Button variant="secondary" onClick={closeVideoPlayer}>
+            关闭
+          </Button>
+        </Modal.Footer>
+      </Modal>
     </>
   );
 });

src/pages/projectDetail/projectDetail.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState, useRef } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
 import {
   Button, Row, Col, Container, Card, Table, Badge, Form,
-  Modal, InputGroup, FormControl, Dropdown, OverlayTrigger, Tooltip, Alert
+  Modal, InputGroup, FormControl, Dropdown, OverlayTrigger, Tooltip, Alert, ProgressBar, Spinner
 } from 'react-bootstrap';
 import { toast } from 'react-toastify';
 import { bookService, bookInfoService, initDb } from '../../db';
@@ -15,6 +15,8 @@ import path from 'path-browserify';
 
 // 引入AudioPlayer组件
 import AudioPlayerComponent from '../../components/audioPlayer';
+import lipSyncService from '../../services/lipSyncService';
+import cozeUploadService from '../../services/cozeUploadService';
 
 const ProjectDetail = () => {
   const { projectId } = useParams();
@@ -53,10 +55,18 @@ const ProjectDetail = () => {
   // 在状态变量中添加项目音频相关状态
   const [projectAudioPath, setProjectAudioPath] = useState(null);
   const [showAudioPlayer, setShowAudioPlayer] = useState(false);
+  const [projectVideoPath, setProjectVideoPath] = useState(null);
+  const [showVideoPlayer, setShowVideoPlayer] = useState(false);
   const [showUploadProjectAudioModal, setShowUploadProjectAudioModal] = useState(false);
   const [projectAudioFile, setProjectAudioFile] = useState(null);
   const [uploadingProjectAudio, setUploadingProjectAudio] = useState(false);
 
+  // 对口型相关状态
+  const [lipSyncProcessing, setLipSyncProcessing] = useState(false);
+  const [lipSyncProgress, setLipSyncProgress] = useState(0);
+  const [lipSyncTaskId, setLipSyncTaskId] = useState(null);
+  const [lipSyncResultUrl, setLipSyncResultUrl] = useState(null);
+
   const fileInputRef = useRef(null);
 
   // 辅助函数：根据ID获取单个分镜信息
@@ -92,6 +102,15 @@ const ProjectDetail = () => {
         setProjectAudioPath(null);
         setShowAudioPlayer(false);
       }
+      
+      // 加载项目视频路径
+      if (projectData && projectData.video_path) {
+        setProjectVideoPath(projectData.video_path);
+        setShowVideoPlayer(true);
+      } else {
+        setProjectVideoPath(null);
+        setShowVideoPlayer(false);
+      }
 
       // 检查是否已经有描述词
       const hasAnyDescriptions = Array.isArray(segmentsData) &&
@@ -1847,8 +1866,15 @@ const ProjectDetail = () => {
         throw new Error(result.error || '保存音频文件失败');
       }
 
-      // 更新项目数据库记录
-      await bookService.updateBook(parseInt(projectId), { audio_path: result.filePath });
+      // 将本地文件上传到Coze获取可访问链接
+      toast.info('正在将音频上传到云端...');
+      const audioUrl = await cozeUploadService.uploadFileAndGetLink(projectAudioFile);
+      
+      // 更新项目数据库记录 - 同时保存本地路径和云端链接
+      await bookService.updateBook(parseInt(projectId), { 
+        audio_path: result.filePath,
+        audio_url: audioUrl // 新增字段保存云端链接
+      });
 
       // 更新状态
       setProjectAudioPath(result.filePath);
@@ -1856,7 +1882,12 @@ const ProjectDetail = () => {
       setProjectAudioFile(null);
       setShowUploadProjectAudioModal(false);
 
-      toast.success(`项目音频${projectAudioPath ? '更新' : '上传'}成功`);
+      if (audioUrl) {
+        toast.success('项目音频已成功上传并保存云端链接');
+      } else {
+        toast.success(`项目音频${projectAudioPath ? '更新' : '上传'}成功`);
+        toast.warning('云端链接保存失败，将在生成对口型时重新上传');
+      }
     } catch (error) {
       console.error('上传项目音频失败:', error);
       toast.error(`上传项目音频失败: ${error.message}`);
@@ -1865,6 +1896,114 @@ const ProjectDetail = () => {
     }
   };
 
+  /**
+   * 处理对口型生成
+   */
+  const handleLipSyncGeneration = async () => {
+    try {
+      // 检查是否有音频和视频
+      if (!project.audio_path || !project.video_path) {
+        toast.error('请先上传音频和视频文件');
+        return;
+      }
+      
+      // 确认是否开始处理
+      if (!window.confirm('确定要开始生成对口型视频吗？此过程可能需要几分钟时间。')) {
+        return;
+      }
+      
+      setLipSyncProcessing(true);
+      setLipSyncProgress(0);
+      
+      let audioUrl = project.audio_url; // 尝试使用已保存的云端链接
+      let videoUrl = project.video_url; // 尝试使用已保存的云端链接
+      
+      // 如果没有保存的云端链接，则进行上传
+      if (!audioUrl || !videoUrl) {
+        toast.info('正在上传音频和视频文件...');
+        
+        // 异步上传音频和视频
+        const uploadResults = await Promise.all([
+          !audioUrl ? cozeUploadService.uploadProjectMedia(project.audio_path) : Promise.resolve(audioUrl),
+          !videoUrl ? cozeUploadService.uploadProjectMedia(project.video_path) : Promise.resolve(videoUrl)
+        ]);
+        
+        audioUrl = uploadResults[0];
+        videoUrl = uploadResults[1];
+        
+        // 如果成功获取到链接，保存到数据库中以便下次使用
+        if (audioUrl && audioUrl !== project.audio_url) {
+          try {
+            await bookService.updateBook(project.id, { audio_url: audioUrl });
+            console.log('已保存音频云端链接');
+          } catch (error) {
+            console.error('保存音频云端链接失败:', error);
+          }
+        }
+        
+        if (videoUrl && videoUrl !== project.video_url) {
+          try {
+            await bookService.updateBook(project.id, { video_url: videoUrl });
+            console.log('已保存视频云端链接');
+          } catch (error) {
+            console.error('保存视频云端链接失败:', error);
+          }
+        }
+      } else {
+        toast.info('使用已保存的音频和视频链接...');
+      }
+      
+      if (!audioUrl || !videoUrl) {
+        throw new Error('上传音频或视频文件失败');
+      }
+      
+      toast.success('文件准备完成，开始处理对口型...');
+      
+      // 开始处理对口型任务
+      lipSyncService.processLipSyncTask(
+        videoUrl,
+        audioUrl,
+        // 进度更新回调
+        (progress, status) => {
+          console.log(`对口型进度: ${progress}%, 状态: ${status}`);
+          setLipSyncProgress(progress);
+        },
+        // 完成回调
+        async (resultUrl, taskInfo) => {
+          console.log('对口型处理完成:', resultUrl);
+          setLipSyncResultUrl(resultUrl);
+          setLipSyncProcessing(false);
+          
+          // 保存结果到项目
+          try {
+            await bookService.updateBook(project.id, {
+              lip_sync_video_path: resultUrl,
+              video_path: resultUrl, // 同时更新视频路径
+              lip_sync_task_id: taskInfo.task_id
+            });
+            
+            toast.success('对口型视频已保存到项目');
+            // 重新加载项目详情
+            await loadProjectDetail(true);
+          } catch (error) {
+            console.error('保存对口型结果失败:', error);
+            toast.error(`保存失败: ${error.message}`);
+          }
+        },
+        // 错误回调
+        (error) => {
+          console.error('对口型处理失败:', error);
+          toast.error(`对口型处理失败: ${error.message}`);
+          setLipSyncProcessing(false);
+        }
+      );
+    } catch (error) {
+      console.error('处理对口型失败:', error);
+      toast.error(`处理失败: ${error.message}`);
+      setLipSyncProcessing(false);
+    }
+  };
+
   if (loading && !silentLoading) {
     return <div className="text-center p-5">加载中...</div>;
   }
@@ -1905,7 +2044,7 @@ const ProjectDetail = () => {
               <Card.Body>
                 <Row className="align-items-center">
                   {/* 项目音频 */}
-                  <Col md={4}>
+                  <Col md={3}>
                     <Form.Group>
                       <Form.Label>项目音频</Form.Label>
                       {projectAudioPath && projectAudioPath.trim() !== '' ? (
@@ -1926,9 +2065,9 @@ const ProjectDetail = () => {
                   </Col>
                   
                   {/* 项目视频 */}
-                  <Col md={4}>
+                  <Col md={3}>
                     <Form.Group>
-                      <Form.Label>对口型视频</Form.Label>
+                      <Form.Label>项目视频</Form.Label>
                       {project.video_path && project.video_path.trim() !== '' ? (
                         <div className="project-video-container">
                           <video 
@@ -1942,12 +2081,87 @@ const ProjectDetail = () => {
                         </div>
                       ) : (
                         <Alert variant="warning" className="mb-0">
-                          <small>暂无对口型视频</small>
+                          <small>暂无项目视频</small>
+                        </Alert>
+                      )}
+                    </Form.Group>
+                  </Col>
+                  
+                  {/* 对口型生成区域 */}
+                  <Col md={3}>
+                    <Form.Group>
+                      <Form.Label>对口型视频</Form.Label>
+                      {lipSyncProcessing ? (
+                        <div className="lip-sync-progress">
+                          <ProgressBar 
+                            animated 
+                            now={lipSyncProgress} 
+                            label={`${Math.round(lipSyncProgress)}%`} 
+                            className="mb-2"
+                          />
+                          <div className="text-center">
+                            <small className="text-muted">正在生成对口型视频，请耐心等待...</small>
+                          </div>
+                        </div>
+                      ) : project.lip_sync_video_path ? (
+                        <div className="lip-sync-video-container">
+                          <video 
+                            className="w-100" 
+                            controls 
+                            src={project.lip_sync_video_path}
+                            style={{ maxHeight: '150px' }}
+                          >
+                            您的浏览器不支持视频播放
+                          </video>
+                        </div>
+                      ) : (
+                        <Alert variant="info" className="mb-0">
+                          <small>
+                            暂无对口型视频
+                            {(project.audio_path && project.video_path) ? 
+                              <div className="mt-1">
+                                <small>
+                                  已上传音频和视频文件，可以点击"生成对口型"按钮开始处理
+                                </small>
+                              </div> : 
+                              <div className="mt-1">
+                                <small>
+                                  需要先上传音频和视频文件才能生成对口型
+                                </small>
+                              </div>
+                            }
+                          </small>
                         </Alert>
                       )}
                     </Form.Group>
                   </Col>
                   
+                  {/* 对口型操作按钮 */}
+                  <Col md={3} className="d-flex align-items-end">
+                    <div className="w-100">
+                      <Button
+                        variant="primary"
+                        className="w-100"
+                        disabled={lipSyncProcessing || !project.audio_path || !project.video_path}
+                        onClick={handleLipSyncGeneration}
+                      >
+                        {lipSyncProcessing ? (
+                          <>
+                            <Spinner
+                              as="span"
+                              animation="border"
+                              size="sm"
+                              role="status"
+                              aria-hidden="true"
+                              className="me-1"
+                            />
+                            处理中...
+                          </>
+                        ) : project.lip_sync_video_path ? "重新生成对口型" : "生成对口型"}
+                      </Button>
+                    </div>
+                  </Col>
+                  
                   {/* 项目画风选择 */}
                   <Col md={4}>
                     <Form.Group>
@@ -2300,19 +2514,16 @@ const ProjectDetail = () => {
             </Card>
           </div>
         ) : (
-          <div className="text-center p-5">
-            <p className="text-muted">项目不存在或已被删除</p>
-            <Button
-              variant="primary"
-              onClick={backToProjectList}
-              className="mt-3"
-            >
-              返回项目列表
-            </Button>
+          <div className="text-center my-5">
+            {loading ? (
+              <Spinner animation="border" />
+            ) : (
+              <Alert variant="warning">项目不存在或已被删除</Alert>
+            )}
           </div>
         )}
       </Container>
-
+      
       {/* 合并分镜对话框 */}
       <Modal show={showMergeModal} onHide={() => setShowMergeModal(false)}>
         <Modal.Header closeButton>

src/services/cozeUploadService.js

@@ -0,0 +1,295 @@
+import axios from 'axios';
+import { toast } from 'react-toastify';
+
+const COZE_API_TOKEN = 'pat_RiXRbDpm7UTfnXskaEhzRMJ2qEVclaNyX5dmhKhFS7ytX5W0LTK2acAhQx94fajw';
+const COZE_WORKFLOW_ID = '7484196116684095488';
+
+/**
+ * 直接上传文件到Coze并获取可访问链接
+ * @param {File} file - 要上传的文件对象（音频或视频）
+ * @returns {Promise<string>} - 成功时返回可访问的文件链接，失败时返回null
+ */
+const uploadFileAndGetLink = async (file) => {
+  try {
+    // 第一步：上传文件
+    const fileId = await uploadFileToCoze(file);
+    if (!fileId) {
+      throw new Error('文件上传失败');
+    }
+
+    // 第二步：通过工作流获取文件链接
+    const fileUrl = await getFileLinkFromWorkflow(fileId);
+    if (!fileUrl) {
+      throw new Error('获取文件链接失败');
+    }
+
+    return fileUrl;
+  } catch (error) {
+    console.error('文件上传和处理失败:', error);
+    toast.error(`文件上传和处理失败: ${error.message}`);
+    return null;
+  }
+};
+
+/**
+ * 上传文件到Coze API
+ * @param {File} file - 要上传的文件对象
+ * @returns {Promise<string>} - 成功时返回文件ID，失败时返回null
+ */
+const uploadFileToCoze = async (file) => {
+  try {
+    const formData = new FormData();
+    formData.append('file', file);
+
+    const response = await axios.post('https://api.coze.cn/v1/files/upload', formData, {
+      headers: {
+        'Authorization': `Bearer ${COZE_API_TOKEN}`,
+        'Content-Type': 'multipart/form-data'
+      }
+    });
+
+    if (response.data.code === 0 && response.data.data && response.data.data.id) {
+      console.log('文件上传成功，ID:', response.data.data.id);
+      return response.data.data.id;
+    } else {
+      console.error('文件上传失败，返回数据:', response.data);
+      throw new Error(response.data.msg || '上传失败');
+    }
+  } catch (error) {
+    console.error('文件上传错误:', error);
+    if (error.response) {
+      console.error('API响应:', error.response.data);
+    }
+    throw new Error(`上传文件错误: ${error.message}`);
+  }
+};
+
+/**
+ * 通过Coze工作流获取文件的可访问链接
+ * @param {string} fileId - 文件ID
+ * @returns {Promise<string>} - 成功时返回文件链接，失败时返回null
+ */
+const getFileLinkFromWorkflow = async (fileId) => {
+  try {
+    const payload = {
+      parameters: {
+        input: JSON.stringify({ file_id: fileId })
+      },
+      workflow_id: COZE_WORKFLOW_ID
+    };
+
+    const response = await axios.post('https://api.coze.cn/v1/workflow/run', payload, {
+      headers: {
+        'Authorization': `Bearer ${COZE_API_TOKEN}`,
+        'Content-Type': 'application/json'
+      }
+    });
+
+    if (response.data.code === 0 && response.data.data) {
+      try {
+        const outputData = JSON.parse(response.data.data);
+        if (outputData && outputData.output) {
+          console.log('获取文件链接成功:', outputData.output);
+          return outputData.output;
+        }
+      } catch (parseError) {
+        console.error('解析返回数据失败:', parseError);
+      }
+    }
+    
+    console.error('工作流调用失败，返回数据:', response.data);
+    throw new Error(response.data.msg || '获取链接失败');
+  } catch (error) {
+    console.error('调用工作流错误:', error);
+    if (error.response) {
+      console.error('API响应:', error.response.data);
+    }
+    throw new Error(`获取文件链接错误: ${error.message}`);
+  }
+};
+
+/**
+ * 从本地路径上传文件到Coze
+ * 提示用户直接选择音频或视频文件上传
+ * 
+ * @returns {Promise<string>} - 成功时返回可访问链接，失败时返回null
+ */
+const uploadFileByDialog = async () => {
+  try {
+    // 创建一个input元素来选择文件
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.style.display = 'none';
+    input.accept = 'audio/*,video/*'; // 接受音频和视频
+    document.body.appendChild(input);
+    
+    // 返回一个Promise，在用户选择文件后解析
+    return new Promise((resolve) => {
+      input.onchange = async (event) => {
+        if (event.target.files && event.target.files.length > 0) {
+          const file = event.target.files[0];
+          const url = await uploadFileAndGetLink(file);
+          document.body.removeChild(input);
+          resolve(url);
+        } else {
+          document.body.removeChild(input);
+          resolve(null);
+        }
+      };
+      
+      // 点击文件选择器
+      input.click();
+    });
+
+  } catch (error) {
+    console.error('文件选择上传失败:', error);
+    toast.error(`上传失败: ${error.message}`);
+    return null;
+  }
+};
+
+/**
+ * 从URL获取文件并上传到Coze
+ * 
+ * @param {string} url - 文件URL地址
+ * @param {string} fileName - 文件名称（可选）
+ * @returns {Promise<string>} - 成功时返回可访问链接，失败时返回null
+ */
+const uploadFromUrl = async (url, fileName = null) => {
+  try {
+    // 获取文件内容
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`获取文件失败: ${response.statusText}`);
+    }
+    
+    // 获取文件类型和文件名
+    const contentType = response.headers.get('content-type') || '';
+    const blob = await response.blob();
+    
+    // 如果没有提供文件名，尝试从URL中提取
+    if (!fileName) {
+      const urlParts = url.split('/');
+      fileName = urlParts[urlParts.length - 1].split('?')[0] || 'file';
+    }
+    
+    // 创建文件对象并上传
+    const file = new File([blob], fileName, { type: contentType });
+    return await uploadFileAndGetLink(file);
+    
+  } catch (error) {
+    console.error('从URL上传文件失败:', error);
+    toast.error(`从URL上传失败: ${error.message}`);
+    return null;
+  }
+};
+
+/**
+ * 使用Electron的文件对话框选择文件并上传
+ * 
+ * @returns {Promise<string>} - 成功时返回可访问链接，失败时返回null
+ */
+const uploadUsingElectronDialog = async () => {
+  try {
+    // 检查是否在Electron环境中
+    if (typeof window.electron === 'undefined' || !window.electron.ipcRenderer) {
+      throw new Error('此方法仅在Electron环境中可用');
+    }
+    
+    // 打开文件选择对话框
+    const result = await window.electron.ipcRenderer.invoke('open-file-dialog', {
+      filters: [
+        { name: '媒体文件', extensions: ['mp3', 'wav', 'ogg', 'mp4', 'avi', 'mov'] }
+      ],
+      properties: ['openFile']
+    });
+    
+    if (result.canceled || !result.filePaths || result.filePaths.length === 0) {
+      console.log('用户取消了选择');
+      return null;
+    }
+    
+    // 获取选择的文件路径
+    const filePath = result.filePaths[0];
+    console.log('选择的文件路径:', filePath);
+    
+    // 让用户再次选择文件通过浏览器上传
+    // 因为我们不能直接从文件系统路径创建File对象
+    toast.info('请在弹出的对话框中再次选择相同的文件进行上传');
+    
+    return await uploadFileByDialog();
+    
+  } catch (error) {
+    console.error('使用Electron对话框选择文件失败:', error);
+    toast.error(`选择文件失败: ${error.message}`);
+    return null;
+  }
+};
+
+/**
+ * 使用项目中保存的绝对路径上传文件
+ * 直接将绝对路径转为文件对象并上传，不需要用户交互
+ * 
+ * @param {string} filePath - 文件的绝对路径
+ * @returns {Promise<string>} - 成功时返回可访问链接，失败时返回null
+ */
+const uploadProjectMedia = async (filePath) => {
+  try {
+    // 检查路径是否存在
+    if (!filePath || typeof filePath !== 'string') {
+      throw new Error('无效的文件路径');
+    }
+
+    // 优先检查是否为http/https链接，如果是则直接使用
+    if (filePath.startsWith('http://') || filePath.startsWith('https://')) {
+      return filePath; // 已经是URL，直接返回
+    }
+
+    // 如果是file://协议，则转换为本地路径
+    let localPath = filePath;
+    if (filePath.startsWith('file://')) {
+      localPath = filePath.replace('file://', '');
+    }
+
+    // 检查Electron环境
+    if (typeof window.electron === 'undefined' || !window.electron.ipcRenderer) {
+      // 如果不在Electron环境，无法读取本地文件
+      toast.error('当前环境不支持直接读取本地文件');
+      return null;
+    }
+
+    try {
+      // 直接读取文件内容
+      const fileBuffer = await window.electron.files.readFileAsArrayBuffer(localPath);
+      if (!fileBuffer) {
+        throw new Error('读取文件内容失败');
+      }
+      
+      // 从路径中提取文件名
+      const fileName = localPath.split('/').pop() || 'file';
+      
+      // 创建文件对象
+      const file = new File([fileBuffer], fileName);
+      
+      // 上传文件并获取链接
+      return await uploadFileAndGetLink(file);
+    } catch (error) {
+      console.error('读取和上传文件失败:', error);
+      throw new Error(`读取和上传文件失败: ${error.message}`);
+    }
+  } catch (error) {
+    console.error('项目媒体文件上传失败:', error);
+    toast.error(`上传失败: ${error.message}`);
+    return null;
+  }
+};
+
+export default {
+  uploadFileAndGetLink,
+  uploadFileByDialog,
+  uploadFromUrl,
+  uploadUsingElectronDialog,
+  uploadProjectMedia,
+  uploadFileToCoze,
+  getFileLinkFromWorkflow
+}; 

src/services/lipSyncService.js

@@ -0,0 +1,197 @@
+import axios from 'axios';
+import { toast } from 'react-toastify';
+import { getLipSyncServer } from '../utils/lipSyncConfig';
+
+// 从配置中获取服务器地址
+const getServerUrl = () => {
+  return getLipSyncServer();
+};
+
+/**
+ * 测试对口型服务器连接
+ * @param {string} serverUrl - 服务器地址
+ * @returns {Promise<{success: boolean, message: string}>} - 测试结果
+ */
+const testServer = async (serverUrl) => {
+  try {
+    // 测试服务器
+    const response = await axios.get(`${serverUrl}/direct-lip-sync/`, {
+      headers: {
+        'accept': 'application/json, text/plain, */*',
+        'origin': 'https://heygem.fyshark.com',
+        'referer': 'https://heygem.fyshark.com/'
+      },
+      timeout: 5000 // 5秒超时
+    });
+    
+    if (!response.data) {
+      return { success: false, message: '服务器响应无效' };
+    }
+    
+    return { success: true, message: '对口型服务器连接正常' };
+  } catch (error) {
+    console.error('测试对口型服务器失败:', error);
+    return { 
+      success: false, 
+      message: `服务器连接失败: ${error.message}` 
+    };
+  }
+};
+
+/**
+ * 提交对口型合成任务
+ * @param {string} videoUrl - 视频URL
+ * @param {string} audioUrl - 音频URL
+ * @returns {Promise<string>} - 返回任务ID
+ */
+const submitLipSyncTask = async (videoUrl, audioUrl) => {
+  try {
+    if (!videoUrl || !audioUrl) {
+      throw new Error('视频URL和音频URL不能为空');
+    }
+
+    const serverUrl = getServerUrl();
+    const response = await axios.post(`${serverUrl}/direct-lip-sync/`, {
+      video_url: videoUrl,
+      audio_url: audioUrl
+    }, {
+      headers: {
+        'accept': 'application/json, text/plain, */*',
+        'content-type': 'application/json',
+        'origin': 'https://heygem.fyshark.com',
+        'referer': 'https://heygem.fyshark.com/'
+      }
+    });
+
+    if (response.data && response.data.length > 0 && response.data[0].task_id) {
+      console.log('对口型任务提交成功:', response.data[0]);
+      return response.data[0].task_id;
+    } else {
+      console.error('对口型任务提交失败:', response.data);
+      throw new Error('提交任务失败，未返回任务ID');
+    }
+  } catch (error) {
+    console.error('提交对口型任务错误:', error);
+    toast.error(`提交对口型任务失败: ${error.message}`);
+    throw error;
+  }
+};
+
+/**
+ * 获取对口型任务信息
+ * @param {string} taskId - 任务ID
+ * @returns {Promise<Object>} - 返回任务信息
+ */
+const getLipSyncTaskInfo = async (taskId) => {
+  try {
+    if (!taskId) {
+      throw new Error('任务ID不能为空');
+    }
+
+    const serverUrl = getServerUrl();
+    const response = await axios.get(`${serverUrl}/direct-lip-sync/?task_id=${taskId}`, {
+      headers: {
+        'accept': 'application/json, text/plain, */*',
+        'origin': 'https://heygem.fyshark.com',
+        'referer': 'https://heygem.fyshark.com/'
+      }
+    });
+
+    if (response.data && response.data.length > 0) {
+      console.log('对口型任务信息:', response.data[0]);
+      return response.data[0];
+    } else {
+      console.error('获取任务信息失败:', response.data);
+      throw new Error('获取任务信息失败，未返回有效数据');
+    }
+  } catch (error) {
+    console.error('获取对口型任务信息错误:', error);
+    toast.error(`获取任务状态失败: ${error.message}`);
+    throw error;
+  }
+};
+
+/**
+ * 获取对口型结果视频URL
+ * @param {string} resultPath - 结果路径
+ * @returns {string} - 完整的结果视频URL
+ */
+const getLipSyncResultUrl = (resultPath) => {
+  if (!resultPath) return null;
+  
+  const serverUrl = getServerUrl();
+  
+  // 确保路径以/开头
+  const formattedPath = resultPath.startsWith('/') ? resultPath : `/${resultPath}`;
+  return `${serverUrl}/download${formattedPath}`;
+};
+
+/**
+ * 提交对口型任务并定期检查进度直到完成
+ * @param {string} videoUrl - 视频URL
+ * @param {string} audioUrl - 音频URL
+ * @param {function} onProgressUpdate - 进度更新回调函数 (progress, status) => void
+ * @param {function} onComplete - 完成回调函数 (resultUrl) => void
+ * @param {function} onError - 错误回调函数 (error) => void
+ * @returns {Promise<void>}
+ */
+const processLipSyncTask = async (videoUrl, audioUrl, onProgressUpdate, onComplete, onError) => {
+  try {
+    // 提交任务
+    const taskId = await submitLipSyncTask(videoUrl, audioUrl);
+    
+    // 定义检查间隔（秒）
+    const checkInterval = 5;
+    let completed = false;
+    
+    // 轮询检查任务状态
+    const checkStatus = async () => {
+      try {
+        if (completed) return;
+        
+        const taskInfo = await getLipSyncTaskInfo(taskId);
+        
+        // 更新进度
+        if (onProgressUpdate) {
+          onProgressUpdate(taskInfo.progress, taskInfo.status);
+        }
+        
+        // 检查任务状态
+        if (taskInfo.status === 2) { // 已完成
+          completed = true;
+          const resultUrl = getLipSyncResultUrl(taskInfo.result_url);
+          if (onComplete) {
+            onComplete(resultUrl, taskInfo);
+          }
+        } else if (taskInfo.status === 1) { // 进行中
+          // 继续轮询
+          setTimeout(checkStatus, checkInterval * 1000);
+        } else { // 错误状态
+          completed = true;
+          throw new Error(`任务状态异常: ${taskInfo.status}`);
+        }
+      } catch (error) {
+        if (onError) {
+          onError(error);
+        }
+      }
+    };
+    
+    // 开始轮询
+    checkStatus();
+    
+  } catch (error) {
+    console.error('处理对口型任务出错:', error);
+    if (onError) {
+      onError(error);
+    }
+  }
+};
+
+export default {
+  submitLipSyncTask,
+  getLipSyncTaskInfo,
+  getLipSyncResultUrl,
+  processLipSyncTask,
+  testServer
+}; 

src/utils/lipSyncConfig.js

@@ -0,0 +1,47 @@
+/**
+ * 对口型服务器配置存储键名
+ */
+const LIP_SYNC_SERVER_KEY = 'lip_sync_server';
+
+// 默认服务器配置
+const DEFAULT_SERVER_URL = 'https://a9k866906pialdug-80.container.x-gpu.com';
+
+/**
+ * 获取对口型服务器配置
+ * @returns {string} 服务器地址
+ */
+export const getLipSyncServer = () => {
+  try {
+    const serverUrl = localStorage.getItem(LIP_SYNC_SERVER_KEY);
+    if (!serverUrl) {
+      return DEFAULT_SERVER_URL;
+    }
+    return serverUrl;
+  } catch (error) {
+    console.error('获取对口型服务器配置失败:', error);
+    return DEFAULT_SERVER_URL;
+  }
+};
+
+/**
+ * 保存对口型服务器配置
+ * @param {string} serverUrl 服务器地址
+ * @returns {boolean} 是否保存成功
+ */
+export const saveLipSyncServer = (serverUrl) => {
+  try {
+    localStorage.setItem(LIP_SYNC_SERVER_KEY, serverUrl);
+    return true;
+  } catch (error) {
+    console.error('保存对口型服务器配置失败:', error);
+    return false;
+  }
+};
+
+/**
+ * 重置对口型服务器配置为默认值
+ */
+export const resetLipSyncServer = () => {
+  saveLipSyncServer(DEFAULT_SERVER_URL);
+  return DEFAULT_SERVER_URL;
+};