'commit'
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -338,21 +339,56 @@
|
||||
// 制作视频按钮
|
||||
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 = '正在制作视频，请稍候...';
|
||||
maskText.textContent = '正在创建视频任务，请稍候...';
|
||||
|
||||
// 模拟视频制作过程（2秒后完成）
|
||||
setTimeout(function() {
|
||||
// 调用创建视频任务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');
|
||||
alert('视频制作成功！');
|
||||
// 这里可以添加视频播放或下载的逻辑
|
||||
// window.location.href = 'video_player.html';
|
||||
}, 2000);
|
||||
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
300
dsLightRag/static/JiMeng/video_preview.html
Normal file
300
dsLightRag/static/JiMeng/video_preview.html
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user