From 58cd2cbf7d594acb830769be1a1a4a997456df39 Mon Sep 17 00:00:00 2001
From: HuangHai <10402852@qq.com>
Date: Thu, 21 Aug 2025 10:21:28 +0800
Subject: [PATCH] 'commit'

---
 dsLightRag/static/JiMeng/image_preview.html |  70 +++--
 dsLightRag/static/JiMeng/video_preview.html | 300 ++++++++++++++++++++
 2 files changed, 353 insertions(+), 17 deletions(-)
 create mode 100644 dsLightRag/static/JiMeng/video_preview.html

diff --git a/dsLightRag/static/JiMeng/image_preview.html b/dsLightRag/static/JiMeng/image_preview.html
index 072ed7a1..c5f3ea1d 100644
--- a/dsLightRag/static/JiMeng/image_preview.html
+++ b/dsLightRag/static/JiMeng/image_preview.html
@@ -193,6 +193,7 @@
         <div id="fenjingtouResult" class="section" style="margin-top: 30px; display: none; background-color: #f8f9fa;">
             <h2 class="section-title">分镜头脚本</h2>
             <pre style="background-color: #ffffff; padding: 15px; border-radius: 6px; border: 1px solid #ddd; white-space: pre-wrap; word-wrap: break-word;"></pre>
+            <button class="btn btn-success" id="createVideoBtn" style="margin-top: 15px;">制作视频</button>
         </div>
     </div>
 
@@ -335,24 +336,59 @@
                 });
             });
 
-        // 制作视频按钮
-        const createVideoBtn = document.getElementById('createVideoBtn');
-        createVideoBtn.addEventListener('click', function() {
-            // 显示遮罩动画
-            mask.classList.add('active');
-            maskText.textContent = '正在制作视频，请稍候...';
+            // 制作视频按钮
+            const createVideoBtn = document.getElementById('createVideoBtn');
+            createVideoBtn.addEventListener('click', function() {
+                const fenjingtouContent = fenjingtouResult.querySelector('pre').textContent.trim();
+                if (!fenjingtouContent) {
+                    alert('请先生成分镜头脚本');
+                    return;
+                }
+
+                // 显示遮罩动画
+                mask.classList.add('active');
+                maskText.textContent = '正在创建视频任务，请稍候...';
+
+                // 调用创建视频任务API
+                fetch('/api/jimeng/create_video_task', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        image_url: imageUrl,
+                        prompt: fenjingtouContent
+                    })
+                })
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error('网络响应异常');
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    // 隐藏遮罩动画
+                    mask.classList.remove('active');
+
+                    if (data.code === 200) {
+                        // 获取任务ID并跳转到视频预览页面
+                        const taskId = data.data.task_id;
+                        sessionStorage.setItem('videoTaskId', taskId);
+                        window.location.href = 'video_preview.html';
+                    } else {
+                        alert('创建视频任务失败: ' + data.message);
+                    }
+                })
+                .catch(error => {
+                    // 隐藏遮罩动画
+                    mask.classList.remove('active');
+
+                    console.error('创建视频任务时出错:', error);
+                    alert('创建视频任务时出错: ' + error.message);
+                });
+            });
 
-            // 模拟视频制作过程（2秒后完成）
-            setTimeout(function() {
-                // 隐藏遮罩动画
-                mask.classList.remove('active');
-                alert('视频制作成功！');
-                // 这里可以添加视频播放或下载的逻辑
-                // window.location.href = 'video_player.html';
-            }, 2000);
         });
-
-    });
-</script>
+    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/dsLightRag/static/JiMeng/video_preview.html b/dsLightRag/static/JiMeng/video_preview.html
new file mode 100644
index 00000000..81a745f1
--- /dev/null
+++ b/dsLightRag/static/JiMeng/video_preview.html
@@ -0,0 +1,300 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>三、视频预览</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+        }
+        body {
+            background-color: #f5f7fa;
+            color: #333;
+            line-height: 1.6;
+            padding: 20px;
+        }
+        .container {
+            max-width: 900px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            padding: 30px;
+        }
+        h1 {
+            text-align: center;
+            margin-bottom: 20px;
+            color: #2c3e50;
+        }
+        .video-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin: 30px 0;
+            min-height: 400px;
+            justify-content: center;
+            background-color: #f8f9fa;
+            border-radius: 6px;
+            padding: 20px;
+        }
+        .loading {
+            text-align: center;
+            font-size: 18px;
+            color: #666;
+        }
+        .video-player {
+            max-width: 100%;
+            max-height: 600px;
+            border-radius: 6px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            display: none;
+        }
+        .btn-group {
+            display: flex;
+            justify-content: center;
+            margin-top: 30px;
+            gap: 20px;
+        }
+        .btn {
+            padding: 12px 25px;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 16px;
+            transition: background 0.3s;
+        }
+        .btn-primary {
+            background-color: #3498db;
+            color: white;
+        }
+        .btn-primary:hover {
+            background-color: #2980b9;
+        }
+        .btn-secondary {
+            background-color: #95a5a6;
+            color: white;
+        }
+        .btn-secondary:hover {
+            background-color: #7f8c8d;
+        }
+        .progress-container {
+            width: 100%;
+            max-width: 600px;
+            margin: 20px 0;
+        }
+        .progress-bar {
+            width: 100%;
+            height: 20px;
+            background-color: #e9ecef;
+            border-radius: 10px;
+            overflow: hidden;
+        }
+        .progress {
+            height: 100%;
+            background-color: #3498db;
+            width: 0%;
+            transition: width 0.3s;
+        }
+        .progress-text {
+            text-align: center;
+            margin-top: 10px;
+            color: #666;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>三、视频预览</h1>
+
+        <div class="video-container">
+            <div class="loading" id="loading">视频生成中，请稍候...</div>
+            <div class="progress-container">
+                <div class="progress-bar">
+                    <div class="progress" id="progress"></div>
+                </div>
+                <div class="progress-text" id="progressText">正在准备...</div>
+            </div>
+            <video id="videoPlayer" class="video-player" controls preload="metadata"></video>
+        </div>
+
+        <div class="btn-group">
+            <button class="btn btn-secondary" id="backBtn">返回修改</button>
+            <button class="btn btn-primary" id="downloadBtn" style="display: none;">下载视频</button>
+        </div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const taskId = sessionStorage.getItem('videoTaskId');
+            const loading = document.getElementById('loading');
+            const progress = document.getElementById('progress');
+            const progressText = document.getElementById('progressText');
+            const videoPlayer = document.getElementById('videoPlayer');
+            const backBtn = document.getElementById('backBtn');
+            const downloadBtn = document.getElementById('downloadBtn');
+
+            if (!taskId) {
+                alert('没有找到视频任务ID，请返回重新生成');
+                window.location.href = 'image_preview.html';
+                return;
+            }
+
+            // 定义查询间隔（毫秒）
+            const queryInterval = 3000;  // 3秒查询一次
+            // 最大查询次数（防止无限循环）- 改为200次，延长到10分钟
+            const maxQueries = 200;  // 最多查询200次
+            // 当前查询次数
+            let queryCount = 0;
+            // 模拟进度（0-100）
+            let simulatedProgress = 0;
+            // 开始时间
+            const startTime = new Date().getTime();
+
+            // 查询视频任务状态
+            function queryVideoTask() {
+                if (queryCount >= maxQueries) {
+                    const elapsedTime = Math.round((new Date().getTime() - startTime) / 1000);
+                    loading.textContent = `视频生成超时（已等待${elapsedTime}秒），您可以稍后在历史记录中查看，或重新生成。`;
+                    progressText.textContent = '生成超时';
+                    return;
+                }
+
+                fetch('/api/jimeng/query_video_task', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ task_id: taskId })
+                })
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error('网络响应异常');
+                    }
+                    return response.json();
+                })
+                .then(data => {
+                    queryCount++;
+
+                    if (data.code === 200) {
+                        const statusInfo = data.data;
+
+                        if (statusInfo.status === 'completed') {
+                            // 视频生成完成
+                            loading.style.display = 'none';
+                            progress.style.width = '100%';
+                            progressText.textContent = '生成完成';
+
+                            // 设置视频源
+                            videoPlayer.src = statusInfo.video_url;
+                            videoPlayer.style.display = 'block';
+                            downloadBtn.style.display = 'inline-block';
+                        } else if (statusInfo.status === 'failed') {
+                            // 视频生成失败
+                            loading.textContent = '视频生成失败: ' + statusInfo.error_msg;
+                            progressText.textContent = '生成失败';
+                        } else {
+                            // 视频生成中
+                            // 计算已等待时间
+                            const elapsedTime = Math.round((new Date().getTime() - startTime) / 1000);
+                            // 更新进度（更平滑的进度更新）
+                            const progressPercentage = Math.min(95, (queryCount / maxQueries) * 100);
+                            progress.style.width = progressPercentage + '%';
+                            progressText.textContent = `正在生成中... (已等待${elapsedTime}秒，${Math.round(progressPercentage)}%)`;
+
+                            // 继续查询
+                            setTimeout(queryVideoTask, queryInterval);
+                        }
+                    } else {
+                        loading.textContent = '查询失败: ' + data.message;
+                        progressText.textContent = '查询失败';
+                        // 继续查询
+                        setTimeout(queryVideoTask, queryInterval);
+                    }
+                })
+                .catch(error => {
+                    console.error('查询视频任务时出错:', error);
+                    loading.textContent = '查询出错: ' + error.message;
+                    progressText.textContent = '查询出错';
+                    // 继续查询
+                    setTimeout(queryVideoTask, queryInterval);
+                });
+            }
+
+            // 开始查询
+            queryVideoTask();
+
+            // 返回按钮
+            backBtn.addEventListener('click', function() {
+                window.location.href = 'image_preview.html';
+            });
+
+            // 下载按钮
+            downloadBtn.addEventListener('click', function() {
+                if (videoPlayer.src) {
+                    // 使用fetch API获取视频blob
+                    fetch(videoPlayer.src)
+                        .then(response => {
+                            if (!response.ok) {
+                                throw new Error('下载失败: ' + response.statusText);
+                            }
+                            return response.blob();
+                        })
+                        .then(blob => {
+                            const url = URL.createObjectURL(blob);
+                            const a = document.createElement('a');
+                            a.href = url;
+                            a.download = 'generated_video.mp4';
+                            document.body.appendChild(a);
+                            a.click();
+                            // 释放URL对象
+                            setTimeout(() => {
+                                URL.revokeObjectURL(url);
+                                document.body.removeChild(a);
+                            }, 100);
+                        })
+                        .catch(error => {
+                            console.error('下载视频时出错:', error);
+                            alert('下载失败: ' + error.message);
+                        });
+                }
+            });
+
+            // 视频错误处理
+            videoPlayer.addEventListener('error', function(e) {
+                console.error('视频播放错误:', e);
+                let errorMsg = '视频播放失败';
+                switch(videoPlayer.error.code) {
+                    case 1:
+                        errorMsg += ': 视频加载中断';
+                        break;
+                    case 2:
+                        errorMsg += ': 视频格式不支持';
+                        break;
+                    case 3:
+                        errorMsg += ': 视频解码失败';
+                        break;
+                    case 4:
+                        errorMsg += ': 视频无法加载';
+                        break;
+                }
+                alert(errorMsg);
+            });
+
+        // 添加取消按钮
+        const cancelBtn = document.createElement('button');
+        cancelBtn.className = 'btn btn-secondary';
+        cancelBtn.textContent = '取消等待';
+        cancelBtn.addEventListener('click', function() {
+            if (confirm('确定要取消等待吗？视频仍在后台生成，您可以稍后在历史记录中查看。')) {
+                window.location.href = 'image_preview.html';
+            }
+        });
+        document.querySelector('.btn-group').appendChild(cancelBtn);
+    });
+</script>
+</body>
+</html>
\ No newline at end of file