diff --git a/video-gen-app/src/App.tsx b/video-gen-app/src/App.tsx index 69b029a4..1f867562 100644 --- a/video-gen-app/src/App.tsx +++ b/video-gen-app/src/App.tsx @@ -10,9 +10,15 @@ import RecordsPage from './pages/RecordsPage'; import CreditsPage from './pages/CreditsPage'; import GenerateConver from './pages/GenerateConver'; import InitialReplication from './pages/InitialReplication'; +import InitialInfo from './pages/InitialInfo'; import RemoveLens from './pages/RemoveLens'; import GeneratedRecord from './pages/GeneratedRecord'; import AuthorizationPage from './pages/AuthorizationPage'; + + + + + import { useAuthStore } from './store/useAuthStore'; const ProtectedRoute = ({ children }: { children: React.ReactNode }) => { @@ -88,10 +94,15 @@ const App = () => { } /> } /> } /> + } /> } /> } /> } /> + + + + } /> diff --git a/video-gen-app/src/pages/GenerateConver.tsx b/video-gen-app/src/pages/GenerateConver.tsx index 65d82276..45f23b71 100644 --- a/video-gen-app/src/pages/GenerateConver.tsx +++ b/video-gen-app/src/pages/GenerateConver.tsx @@ -608,12 +608,16 @@ const AIChatPage: React.FC = () => { // 视频参数（仅视频模式时添加） ...(mediaType === 'video' && { duration: videoDuration, - ratio: videoAspectRatio, + aspect_ratio: videoAspectRatio, resolution: videoResolution, }), }; + + + + // 设置加载状态 setLoading(true); @@ -1132,6 +1136,7 @@ const AIChatPage: React.FC = () => { + {/* 文本内容 */} @@ -1162,30 +1167,37 @@ const AIChatPage: React.FC = () => { {/* 根据 status 显示不同内容 */} {/* 生成中 - 显示加载动画 */} {msg.status === 'generating' && ( -
+
- 正在生成中... + 生成中...
diff --git a/video-gen-app/src/pages/InitialInfo.tsx b/video-gen-app/src/pages/InitialInfo.tsx new file mode 100644 index 00000000..807093dd --- /dev/null +++ b/video-gen-app/src/pages/InitialInfo.tsx @@ -0,0 +1,297 @@ +import React, { useState, useEffect } from 'react'; +import { Button, Typography, Collapse, Space, Modal, Input, Table } from 'antd'; +import { ArrowLeftOutlined, PlayCircleOutlined, CheckCircleOutlined, EditOutlined, DownloadOutlined } from '@ant-design/icons'; +import { useNavigate, useParams } from 'react-router-dom'; +import './css/InitialInfo.css'; + +const { Title, Text } = Typography; +const { TextArea } = Input; + +function InitialInfo() { + const navigate = useNavigate(); + const { creatID } = useParams<{ creatID: string }>(); + + const [modalVisible, setModalVisible] = useState(false); + const [promptText, setPromptText] = useState(''); + const [isModalOpen, setIsModalOpen] = useState(false); + + // 创作记录表格数据 + const [tableData, setTableData] = useState([ + { + id: 1, + image: 'https://neeko-copilot.bytedance.net/api/text_to_image?prompt=product%20image%20red%20gift%20box%20with%20hearts&image_size=square', + originalName: '进圈', + productName: '他趣', + status: '视频成功', + createTime: '2026-05-14 17:49:20', + }, + { + id: 2, + image: 'https://neeko-copilot.bytedance.net/api/text_to_image?prompt=luxury%20perfume%20bottle%20golden%20elegant&image_size=square', + originalName: '香水', + productName: '面霜', + status: '视频提示词成功', + createTime: '2026-05-08 08:57:46', + }, + ]); + + useEffect(() => { + console.log('路由参数 creatID:', creatID); + }, [creatID]); + + const handleOpenModal = () => { + console.log('打开弹窗'); + setPromptText('室内居家卧室场景，严格复刻原背景：人物后方是带黑色铆钉包边的浅灰色拉扣软包床头，床头前摆放蓬松白色枕头，保留柔和暖调居家氛围，禁止篡改背景元素。画面中心为上半身入镜的女性，身穿浅灰色V领长袖上衣，脸部全程用白色涂鸦完全打码，禁止生成清晰人脸；颈部佩戴目标华丽项链，替代原有细项链，佩戴位置与原项链一致，贴合颈部肌肤，光影与场景柔和光源完全统一，无半透明合成痕迹。目标项链为玫瑰金基底，镶嵌圆润白色珍珠与碎钻，中心是水滴形主钻，下方垂挂同形态水滴钻吊坠，设计精致华丽，项链为画面视觉焦点，尺寸符合颈部佩戴的合理比例。主光源来自画面面前侧偏上方，光线柔和自然，阴影清淡真实，禁止出现AI合成假阴影；整体为低饱和暖调，写实柔和质感，拍摄为平视角度，视觉优先级：颈部项链>人物上半身>背景床头与枕头。禁止出现未打码人脸，禁止项链设计偏差、佩戴错位，禁止光影色调偏离柔和暖调居家感，画面无多余字幕。'); + setModalVisible(true); + }; + + const handleConfirm = () => { + setModalVisible(false); + console.log('修改后的提示词:', promptText); + }; + + const steps = [ + { id: 1, title: '原始素材', status: 'done', description: '上传原始视频素材' }, + { id: 2, title: '生成提示词', status: 'done', description: '根据素材生成描述词' }, + { id: 3, title: '生成产品融合图', status: 'done', description: '生成产品与场景融合图' }, + { id: 4, title: '生成视频提示词', status: 'done', description: '生成视频生成提示词' }, + { id: 5, title: '生成最终视频', status: 'active', description: '合成最终视频' }, + ]; + + return ( + +
+
+
+
+
+ +

+ 爆款开头复刻 - 任务详情 +

+ +
+
+
+
+ 视频 +
+
+
+
+ 产品图片 +
+ +
+
+
+
+
+ 场景图片 +
+ +
+
+
+
+
+ 生成视频 +
+
+
+
+
+
+
+
生成步骤
+ ({ + key: String(step.id), + label: ( +
+
+
+ {step.status === 'done' ? ( + + ) : step.status === 'active' ? ( +
+ ) : ( + {step.id} + )} +
+ + {step.title} + + {step.status === 'active' && ( + 生成中 + )} +
+
+ ), + children: ( +
+ {step.id === 1 &&
12312
} + {step.id === 2 && ( + <> + + 竖版社交 APP 宣传海报，平视正面拍摄，视觉焦点为画面正中间偏上位置的 APP 图标；背景为虚化的室内居家场景，背景中心是身着浅色服装的长发女性，人物整体虚化、面部模糊，占画面大部分区域，画面下半部分分布淡紫色细碎星光闪光特效；整体为柔和暖色调，主光源从正面打来，光线柔和自然，阴影浅淡，整体质感真实柔和，无生硬合成痕迹。将画面中心的原 APP 图标替换为他趣的圆角方形图标：黑底，顶部有淡黄色椭圆形装饰，中间黄色圆形承载两个带高光的亮面红色爱心，底部为粉紫渐变横条，横条上有白色"脱单交友"文字，图标位置与参考图完全一致。去除原图所有宣传类字幕文字，仅保留 APP 图标自带的文字；禁止篡改背景元素、星光特效、光影色调，禁止将背景人物清晰化，禁止改变图标位置与画面视觉优先级，禁止出现生硬合成痕迹。 + + + + + + + )} + {step.id === 5 && ( + <> +
+ 最终视频 +
+ +
+
+ + + + + + )} +
+ ), + }))} + /> +
+
+
+
+ setModalVisible(false)} + footer={[ + , + , + ]} + width={800} + > +