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 07:59:21 +08:00
parent 1ccc4c207c
commit 14e6b38ed7
4 changed files with 294 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -151,45 +151,73 @@
<form id="promptForm">
<div class="form-group">
<label for="timeWeatherLight" class="required">时间-天气-光</label>
<input type="text" id="timeWeatherLight" placeholder="例如：傍晚小雨，路灯刚亮" required>
<div class="example-tip">请描述时间、天气状况和光线条件，这将影响画面的整体感觉</div>
</div>
<div class="form-group">
<label for="sceneLocation" class="required">场景-地点</label>
<input type="text" id="sceneLocation" placeholder="例如：老城区石板路" required>
<div class="example-tip">请描述具体的场景和地点，帮助构建画面背景</div>
</div>
<div class="form-group">
<label for="subjects">主体列表 (可选)</label>
<div class="tag-container" id="tagContainer">
<div class="placeholder" id="placeholder">点击下方添加主体（人/动物/物体），或留空</div>
<label>首帧创建方式</label>
<div style="display: flex; gap: 20px; margin-bottom: 15px;">
<label style="display: flex; align-items: center; cursor: pointer;">
<input type="radio" name="creationMethod" value="prompt" checked style="margin-right: 8px;">
生成提示词
</label>
<label style="display: flex; align-items: center; cursor: pointer;">
<input type="radio" name="creationMethod" value="upload" style="margin-right: 8px;">
上传图片
</label>
</div>
<div class="add-tag">
<input type="text" id="subjectInput" placeholder="例如：工人父亲（背）">
<button type="button" class="btn btn-primary" id="addTagBtn">添加</button>
</div>
<div id="promptSection">
<div class="form-group">
<label for="timeWeatherLight" class="required">时间-天气-光</label>
<input type="text" id="timeWeatherLight" placeholder="例如：傍晚小雨，路灯刚亮" required>
<div class="example-tip">请描述时间、天气状况和光线条件，这将影响画面的整体感觉</div>
</div>
<div class="form-group">
<label for="sceneLocation" class="required">场景-地点</label>
<input type="text" id="sceneLocation" placeholder="例如：老城区石板路" required>
<div class="example-tip">请描述具体的场景和地点，帮助构建画面背景</div>
</div>
<div class="form-group">
<label for="subjects">主体列表 (可选)</label>
<div class="tag-container" id="tagContainer">
<div class="placeholder" id="placeholder">点击下方添加主体（人/动物/物体），或留空</div>
</div>
<div class="add-tag">
<input type="text" id="subjectInput" placeholder="例如：工人父亲（背）">
<button type="button" class="btn btn-primary" id="addTagBtn">添加</button>
</div>
<div class="example-tip">多个主体用逗号分隔，括号内可描述动作或姿态</div>
</div>
<div class="form-group">
<label for="atmosphere" class="required">氛围-情绪</label>
<input type="text" id="atmosphere" placeholder="例如：温馨" required>
<div class="example-tip">请描述画面想要传达的整体氛围或情绪</div>
</div>
<div class="form-group">
<button type="button" class="btn btn-secondary" id="randomSampleBtn">随机示例</button>
<div class="sample-container" id="sampleContainer" style="display: none;">
<div class="sample-title">示例提示词：</div>
<div id="sampleContent"></div>
</div>
</div>
<div class="example-tip">多个主体用逗号分隔，括号内可描述动作或姿态</div>
</div>
<div class="form-group">
<label for="atmosphere" class="required">氛围-情绪</label>
<input type="text" id="atmosphere" placeholder="例如：温馨" required>
<div class="example-tip">请描述画面想要传达的整体氛围或情绪</div>
</div>
<div class="form-group">
<button type="button" class="btn btn-secondary" id="randomSampleBtn">随机示例</button>
<div class="sample-container" id="sampleContainer" style="display: none;">
<div class="sample-title">示例提示词：</div>
<div id="sampleContent"></div>
<div id="uploadSection" style="display: none;">
<div class="form-group">
<label for="imageUpload">上传图片</label>
<input type="file" id="imageUpload" accept="image/*">
<div class="example-tip">支持JPG、PNG等格式，建议图片尺寸不小于1080x720像素</div>
</div>
<div id="previewContainer" style="margin-top: 20px; display: none;">
<h4>图片预览：</h4>
<img id="imagePreview" style="max-width: 100%; max-height: 400px; border-radius: 6px;">
</div>
</div>
<div class="btn-group">
<button type="submit" class="btn btn-primary">生成首帧图片</button>
<button type="submit" class="btn btn-primary" id="submitBtn">确认并继续</button>
<button type="reset" class="btn btn-secondary">重置</button>
</div>
</form>
@@ -197,6 +225,92 @@
<script>
document.addEventListener('DOMContentLoaded', function() {
// 新增代码：处理创建方式切换
const creationMethodRadios = document.querySelectorAll('input[name="creationMethod"]');
const promptSection = document.getElementById('promptSection');
const uploadSection = document.getElementById('uploadSection');
const submitBtn = document.getElementById('submitBtn');
const imageUpload = document.getElementById('imageUpload');
const previewContainer = document.getElementById('previewContainer');
const imagePreview = document.getElementById('imagePreview');
creationMethodRadios.forEach(radio => {
radio.addEventListener('change', function() {
if (this.value === 'prompt') {
promptSection.style.display = 'block';
uploadSection.style.display = 'none';
submitBtn.textContent = '生成首帧图片';
} else {
promptSection.style.display = 'none';
uploadSection.style.display = 'block';
submitBtn.textContent = '确认上传图片';
}
});
});
// 新增代码：处理图片预览
imageUpload.addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(event) {
imagePreview.src = event.target.result;
previewContainer.style.display = 'block';
};
reader.readAsDataURL(file);
} else {
previewContainer.style.display = 'none';
}
});
// 修改表单提交事件
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');