huanghai/dsProject
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'commit'

Browse Source
This commit is contained in:
HuangHai
2025-08-21 08:06:53 +08:00
parent 14e6b38ed7
commit 93756f6138
1 changed files with 83 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
dsLightRag/static/JiMeng/prompt_input.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>智能视频生成 - 提示词输入</title> <title>智能视频生成 - 首帧创作</title>
<style> <style>
* { * {
margin: 0; margin: 0;
@@ -147,7 +147,7 @@
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h1>智能视频生成 - 提示词输入</h1> <h1>智能视频生成 - 首帧创作</h1>
<form id="promptForm"> <form id="promptForm">
<div class="form-group"> <div class="form-group">
@@ -225,6 +225,43 @@
<script> <script>
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
// 新增代码：定义缺失的函数
function checkTagContainer() {
const tags = tagContainer.querySelectorAll('.tag');
if (tags.length === 0) {
placeholder.style.display = 'block';
} else {
placeholder.style.display = 'none';
}
}
function addTag(text) {
if (!text.trim()) return;
// 隐藏占位符
placeholder.style.display = 'none';
const tag = document.createElement('div');
tag.className = 'tag';
const tagText = document.createElement('span');
tagText.textContent = text;
const deleteBtn = document.createElement('button');
deleteBtn.textContent = '×';
deleteBtn.addEventListener('click', function() {
tagContainer.removeChild(tag);
checkTagContainer();
});
tag.appendChild(tagText);
tag.appendChild(deleteBtn);
tagContainer.appendChild(tag);
// 清空输入框
subjectInput.value = '';
}
// 新增代码：处理创建方式切换 // 新增代码：处理创建方式切换
const creationMethodRadios = document.querySelectorAll('input[name="creationMethod"]'); const creationMethodRadios = document.querySelectorAll('input[name="creationMethod"]');
const promptSection = document.getElementById('promptSection'); const promptSection = document.getElementById('promptSection');
@@ -233,6 +270,14 @@
const imageUpload = document.getElementById('imageUpload'); const imageUpload = document.getElementById('imageUpload');
const previewContainer = document.getElementById('previewContainer'); const previewContainer = document.getElementById('previewContainer');
const imagePreview = document.getElementById('imagePreview'); const imagePreview = document.getElementById('imagePreview');
const tagContainer = document.getElementById('tagContainer');
const subjectInput = document.getElementById('subjectInput');
const addTagBtn = document.getElementById('addTagBtn');
const placeholder = document.getElementById('placeholder');
const randomSampleBtn = document.getElementById('randomSampleBtn');
const sampleContainer = document.getElementById('sampleContainer');
const sampleContent = document.getElementById('sampleContent');
const promptForm = document.getElementById('promptForm');
creationMethodRadios.forEach(radio => { creationMethodRadios.forEach(radio => {
radio.addEventListener('change', function() { radio.addEventListener('change', function() {
@@ -263,104 +308,6 @@
} }
}); });
// 修改表单提交事件
promptForm.addEventListener('submit', function(e) {
e.preventDefault();
const creationMethod = document.querySelector('input[name="creationMethod"]:checked').value;
if (creationMethod === 'prompt') {
// 原有的提示词生成逻辑
// 收集表单数据
const formData = {
timeWeatherLight: document.getElementById('timeWeatherLight').value,
sceneLocation: document.getElementById('sceneLocation').value,
subjects: [],
atmosphere: document.getElementById('atmosphere').value
};
// 收集标签数据
const tags = tagContainer.querySelectorAll('.tag');
tags.forEach(tag => {
formData.subjects.push(tag.querySelector('span').textContent);
});
// 构建提示词
let prompt = `${formData.timeWeatherLight}的${formData.sceneLocation}`;
if (formData.subjects.length > 0) {
prompt += '，' + formData.subjects.join('与');
}
prompt += `，氛围${formData.atmosphere}。`;
// 在实际应用中，这里应该发送数据到后端
console.log('生成的提示词:', prompt);
alert('提示词已生成：\n' + prompt + '\n\n下一步将生成首帧图片');
} else {
// 新增的图片上传逻辑
if (imageUpload.files.length === 0) {
alert('请先选择要上传的图片');
return;
}
const file = imageUpload.files[0];
console.log('上传的图片:', file.name);
alert('图片已上传：\n' + file.name + '\n\n下一步将使用此图片作为首帧');
}
// 这里可以添加跳转到下一步的逻辑
// window.location.href = 'next_step.html';
});
const tagContainer = document.getElementById('tagContainer');
const subjectInput = document.getElementById('subjectInput');
const addTagBtn = document.getElementById('addTagBtn');
const placeholder = document.getElementById('placeholder');
const randomSampleBtn = document.getElementById('randomSampleBtn');
const sampleContainer = document.getElementById('sampleContainer');
const sampleContent = document.getElementById('sampleContent');
const promptForm = document.getElementById('promptForm');
// 检查标签容器是否为空
function checkTagContainer() {
if (tagContainer.children.length === 1 && tagContainer.contains(placeholder)) {
placeholder.style.display = 'block';
} else {
placeholder.style.display = 'none';
}
}
// 添加标签
function addTag(text) {
if (!text.trim()) return;
const tag = document.createElement('div');
tag.className = 'tag';
tag.innerHTML = `<span>${text}</span><button type="button">×</button>`;
// 删除标签
tag.querySelector('button').addEventListener('click', function() {
tagContainer.removeChild(tag);
checkTagContainer();
});
tagContainer.appendChild(tag);
subjectInput.value = '';
checkTagContainer();
}
// 添加标签按钮点击事件
addTagBtn.addEventListener('click', function() {
addTag(subjectInput.value);
});
// 按Enter键添加标签
subjectInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
e.preventDefault();
addTag(subjectInput.value);
}
});
// 随机示例数据 // 随机示例数据
const samples = [ const samples = [
{ {
@@ -419,33 +366,45 @@
promptForm.addEventListener('submit', function(e) { promptForm.addEventListener('submit', function(e) {
e.preventDefault(); e.preventDefault();
// 收集表单数据 const creationMethod = document.querySelector('input[name="creationMethod"]:checked').value;
const formData = {
timeWeatherLight: document.getElementById('timeWeatherLight').value,
sceneLocation: document.getElementById('sceneLocation').value,
subjects: [],
atmosphere: document.getElementById('atmosphere').value
};
// 收集标签数据 if (creationMethod === 'prompt') {
const tags = tagContainer.querySelectorAll('.tag'); // 原有的提示词生成逻辑
tags.forEach(tag => { // 收集表单数据
formData.subjects.push(tag.querySelector('span').textContent); const formData = {
}); timeWeatherLight: document.getElementById('timeWeatherLight').value,
sceneLocation: document.getElementById('sceneLocation').value,
subjects: [],
atmosphere: document.getElementById('atmosphere').value
};
// 构建提示词 // 收集标签数据
let prompt = `${formData.timeWeatherLight}的${formData.sceneLocation}`; const tags = tagContainer.querySelectorAll('.tag');
if (formData.subjects.length > 0) { tags.forEach(tag => {
prompt += '，' + formData.subjects.join('与'); formData.subjects.push(tag.querySelector('span').textContent);
});
// 构建提示词
let prompt = `${formData.timeWeatherLight}的${formData.sceneLocation}`;
if (formData.subjects.length > 0) {
prompt += '，' + formData.subjects.join('与');
}
prompt += `，氛围${formData.atmosphere}。`;
// 在实际应用中，这里应该发送数据到后端
console.log('生成的提示词:', prompt);
alert('提示词已生成：\n' + prompt + '\n\n下一步将生成首帧图片');
} else {
// 新增的图片上传逻辑
if (imageUpload.files.length === 0) {
alert('请先选择要上传的图片');
return;
}
const file = imageUpload.files[0];
console.log('上传的图片:', file.name);
alert('图片已上传：\n' + file.name + '\n\n下一步将使用此图片作为首帧');
} }
prompt += `，氛围${formData.atmosphere}。`;
// 在实际应用中，这里应该发送数据到后端
console.log('生成的提示词:', prompt);
alert('提示词已生成：\n' + prompt + '\n\n下一步将生成首帧图片');
// 这里可以添加跳转到图片生成页面的逻辑
// window.location.href = 'image_generation.html?prompt=' + encodeURIComponent(prompt);
}); });
// 表单重置事件 // 表单重置事件