This commit is contained in:
2025-08-21 09:44:34 +08:00
parent 7b97fda4be
commit 51afc9eaa7
4 changed files with 150 additions and 14 deletions

View File

@@ -7,6 +7,7 @@ from openai import AsyncOpenAI
from Config import Config
from JiMeng.Kit.JmTxt2ImgUtil import JmTxt2Img
from JiMeng.Kit.FenJingTouGenerator import FenJingTouGenerator # 导入分镜头生成器
# 创建路由路由器
router = APIRouter(prefix="/api/jimeng", tags=["即梦"])
@@ -48,3 +49,41 @@ async def prompt_input(request: fastapi.Request):
logger.error(f"图片生成失败: {str(e)}")
raise HTTPException(status_code=500, detail=f"图片生成失败: {str(e)}")
@router.post("/generate_fenjingtou")
async def generate_fenjingtou(request: fastapi.Request):
try:
data = await request.json()
image_url = data.get("image_url")
prompt_text = data.get("prompt_text")
if not image_url:
raise HTTPException(status_code=400, detail="缺少图片地址参数")
if not prompt_text:
raise HTTPException(status_code=400, detail="缺少提示词参数")
logger.info(f"收到分镜头生成请求,图片地址: {image_url},提示词: {prompt_text}")
# 创建分镜头生成器实例并调用方法
generator = FenJingTouGenerator()
fenjingtou_content = generator.generate_fen_jing_tou(image_url, prompt_text)
if not fenjingtou_content:
raise HTTPException(status_code=500, detail="分镜头脚本生成失败")
logger.info(f"分镜头脚本生成成功")
return {
"code": 200,
"message": "成功",
"data": {
"fenjingtou_content": fenjingtou_content
}
}
except HTTPException as e:
logger.error(f"请求参数错误: {str(e.detail)}")
raise e
except Exception as e:
logger.error(f"分镜头脚本生成失败: {str(e)}")
raise HTTPException(status_code=500, detail=f"分镜头脚本生成失败: {str(e)}")

View File

@@ -128,19 +128,71 @@
flex-direction: column;
align-items: center;
}
/* 新增样式 */
.section {
border-radius: 8px;
padding: 25px;
margin-bottom: 30px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.image-section {
background-color: #f8f9fa;
}
.prompt-section {
background-color: #ffffff;
border: 1px solid #e9ecef;
}
.section-title {
font-size: 20px;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #e9ecef;
color: #2c3e50;
}
.btn-group-image {
display: flex;
justify-content: center;
margin-top: 20px;
gap: 15px;
}
.btn-group-fen {
display: flex;
justify-content: flex-end;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="container">
<h1>首帧预览</h1>
<h1>首帧预览与分镜头生成</h1>
<!-- 图片预览区域 -->
<div class="section image-section">
<h2 class="section-title">图片预览</h2>
<div class="image-container">
<div class="loading" id="loading">加载中...</div>
<img id="previewImage" style="display: none;">
</div>
<div class="btn-group">
<div class="btn-group-image">
<button class="btn btn-danger" id="backBtn">返回修改</button>
<button class="btn btn-secondary" id="regenerateBtn">重新生成</button>
<button class="btn btn-primary" id="confirmBtn">确认满意</button>
</div>
</div>
<!-- 分镜头生成区域 -->
<div class="section prompt-section">
<h2 class="section-title">分镜头脚本生成</h2>
<p style="margin-bottom: 15px; color: #666;">请调整提示词,然后点击"生成分镜头"按钮:</p>
<textarea id="fenjingtouPrompt" rows="4" style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; resize: vertical;">以这张图片为首帧帮我生成一个5秒的视频提示词。提示词包括镜号、运镜、画面内容</textarea>
<div class="btn-group-fen">
<button class="btn btn-success" id="generateFenBtn">生成分镜头</button>
</div>
</div>
<!-- 分镜头结果区域 -->
<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>
</div>
</div>
@@ -160,7 +212,9 @@
const loading = document.getElementById('loading');
const backBtn = document.getElementById('backBtn');
const regenerateBtn = document.getElementById('regenerateBtn');
const confirmBtn = document.getElementById('confirmBtn');
const generateFenBtn = document.getElementById('generateFenBtn'); // 获取新按钮
const fenjingtouResult = document.getElementById('fenjingtouResult');
const fenjingtouPrompt = document.getElementById('fenjingtouPrompt');
const mask = document.getElementById('mask');
const maskText = document.getElementById('maskText');
@@ -231,11 +285,54 @@
});
});
// 确认满意按钮
confirmBtn.addEventListener('click', function() {
alert('首帧确认成功!即将进入下一环节');
// 这里可以添加跳转到下一步的逻辑
// window.location.href = 'next_step.html';
// 生成分镜头按钮
generateFenBtn.addEventListener('click', function() {
const promptText = fenjingtouPrompt.value.trim();
if (!promptText) {
alert('请输入分镜头提示词');
return;
}
// 显示遮罩动画
mask.classList.add('active');
maskText.textContent = '正在生成分镜头脚本,请稍候...';
// 调用分镜头API
fetch('/api/jimeng/generate_fenjingtou', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
image_url: imageUrl,
prompt_text: promptText
})
})
.then(response => {
if (!response.ok) {
throw new Error('网络响应异常');
}
return response.json();
})
.then(data => {
// 隐藏遮罩动画
mask.classList.remove('active');
if (data.code === 200) {
// 显示分镜头结果
fenjingtouResult.style.display = 'block';
fenjingtouResult.querySelector('pre').textContent = data.data.fenjingtou_content;
} else {
alert('分镜头生成失败: ' + data.message);
}
})
.catch(error => {
// 隐藏遮罩动画
mask.classList.remove('active');
console.error('生成分镜头时出错:', error);
alert('生成分镜头时出错: ' + error.message);
});
});
});
</script>