This commit is contained in:
2025-09-04 13:15:40 +08:00
parent e32ca9152c
commit 6b8acda14a
3 changed files with 83 additions and 8 deletions

View File

@@ -188,6 +188,18 @@
margin: 0;
}
/* 新增:提示词样式 */
.prompt-textarea {
width: 100%;
height: 120px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 14px;
resize: vertical;
font-family: monospace;
}
/* 新增:图片模态框样式 */
.modal {
display: none;
@@ -313,10 +325,21 @@
<input type="url" id="imageUrl" placeholder="请输入图片URL地址"
value="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/HuangWanQiao.jpg">
</div>
<!-- 新增:提示词编辑区域 -->
<div class="form-group">
<label for="promptInput">提示词:</label>
<textarea id="promptInput" class="prompt-textarea" placeholder="请输入提示词..."></textarea>
<div style="display: flex; justify-content: space-between; margin-top: 8px;">
<small style="color: #666;">提示:修改提示词可以改变生成图片的风格和细节</small>
<button id="resetPromptBtn" style="padding: 4px 8px; font-size: 12px;">重置默认</button>
</div>
</div>
<div class="image-preview" id="previewContainer">
<h3>参考图片预览:</h3>
<h3>人像照片</h3>
<img id="previewImage" src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/HuangWanQiao.jpg"
alt="参考图片预览" onerror="this.style.display='none'">
alt="参考图片" onerror="this.style.display='none'">
</div>
<button onclick="generateImage()" id="generateBtn">生成换脸图片</button>
@@ -337,7 +360,7 @@
<h3 class="history-title">📜 生成历史</h3>
<div class="history-images">
<div class="history-image-item">
<img src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/LibLib/bdde20e3143049c3916aa0b8d523b469.jpg"
<img src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/LibLib/7e2c6203189344388964c29963f666ad.jpg"
alt="生成历史图片1" onclick="openModal(this.src)"/>
</div>
<div class="history-image-item">
@@ -356,6 +379,10 @@
<img src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/LibLib/215df7724cba4bf9a64e7863ecb4ebc0.jpg"
alt="生成历史图片5" onclick="openModal(this.src)"/>
</div>
<div class="history-image-item">
<img src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/LibLib/77eb450d7aa74c888a852f66b3bfb3b2.jpg"
alt="生成历史图片6" onclick="openModal(this.src)"/>
</div>
</div>
</div>
@@ -368,6 +395,9 @@
<script>
const API_BASE = '/api/copyface';
let selectedModel = '';
// 新增:存储模型提示词
let modelPrompts = {};
// 新增:模态框相关变量
const modal = document.getElementById('imageModal');
const modalImage = document.getElementById('modalImage');
@@ -391,7 +421,40 @@
previewImg.style.display = 'none';
}
});
// 新增:获取所有模型提示词
fetchModelPrompts();
// 新增:重置提示词按钮事件
document.getElementById('resetPromptBtn').addEventListener('click', resetPromptToDefault);
});
// 新增:获取所有模型提示词
async function fetchModelPrompts() {
try {
const response = await fetch(`${API_BASE}/samples`);
if (response.ok) {
const models = await response.json();
models.forEach(model => {
modelPrompts[model.name] = model.prompt;
});
// 如果已有选中的模型,加载其提示词
if (selectedModel && modelPrompts[selectedModel]) {
document.getElementById('promptInput').value = modelPrompts[selectedModel];
}
}
} catch (error) {
console.error('获取模型提示词失败:', error);
}
}
// 新增:重置提示词为默认值
function resetPromptToDefault() {
if (selectedModel && modelPrompts[selectedModel]) {
document.getElementById('promptInput').value = modelPrompts[selectedModel];
}
}
// 新增:打开模态框显示大图
function openModal(imageUrl) {
@@ -411,7 +474,7 @@
}
}
// 选择模型
// 修改:选择模型函数,加载对应提示词
function selectModel(card, modelName) {
// 移除所有选中状态
document.querySelectorAll('.model-card').forEach(card => {
@@ -421,13 +484,19 @@
// 添加选中状态
card.classList.add('selected');
selectedModel = modelName;
// 新增:加载模型对应的提示词
if (modelPrompts[selectedModel]) {
document.getElementById('promptInput').value = modelPrompts[selectedModel];
}
console.log('已选择模型:', selectedModel);
}
// 生成换脸图片
// 修改:生成换脸图片函数,支持自定义提示词
async function generateImage() {
const imageUrl = document.getElementById('imageUrl').value.trim();
const customPrompt = document.getElementById('promptInput').value.trim();
const generateBtn = document.getElementById('generateBtn');
const loading = document.getElementById('loading');
const resultContainer = document.getElementById('resultContainer');
@@ -459,7 +528,9 @@
'Content-Type': 'application/json',
},
body: JSON.stringify({
image_url: imageUrl
image_url: imageUrl,
// 新增:传递自定义提示词
prompt: customPrompt
})
});