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-09-04 13:47:34 +08:00
parent c255ef4c67
commit 8241849c55
1 changed files with 181 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

304
dsLightRag/static/LibLib/wenshengtu.html
View File

@@ -228,23 +228,27 @@
padding-top: 20px; padding-top: 20px;
border-top: 1px solid #eee; border-top: 1px solid #eee;
} }
.history-title { .history-title {
color: #333; color: #333;
margin-bottom: 15px; margin-bottom: 15px;
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
} }
.history-images { .history-images {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 15px; gap: 15px;
justify-content: center; justify-content: center;
} }
.history-image-item { .history-image-item {
width: calc(20% - 15px); width: calc(20% - 15px);
min-width: 120px; min-width: 120px;
cursor: pointer; cursor: pointer;
} }
.history-image-item img { .history-image-item img {
width: 100%; width: 100%;
height: 250px; height: 250px;
@@ -253,6 +257,7 @@
border: 2px solid #ddd; border: 2px solid #ddd;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.history-image-item img:hover { .history-image-item img:hover {
border-color: #007bff; border-color: #007bff;
transform: scale(1.05); transform: scale(1.05);
@@ -290,7 +295,8 @@
<select id="modelSelect"> <select id="modelSelect">
<option value="custom">Dream Tech XL</option> <option value="custom">Dream Tech XL</option>
</select> </select>
<div class="model-link">更多模型请访问：<a href="https://www.liblib.art/" target="_blank">https://www.liblib.art/</a></div> <div class="model-link">更多模型请访问：<a href="https://www.liblib.art/"
target="_blank">https://www.liblib.art/</a></div>
</div> </div>
<div class="form-group"> <div class="form-group">
@@ -384,7 +390,8 @@
<div class="param-group"> <div class="param-group">
<label for="hiresDenoisingStrengthInput">去噪强度：</label> <label for="hiresDenoisingStrengthInput">去噪强度：</label>
<input type="number" id="hiresDenoisingStrengthInput" value="0.75" min="0" max="1" step="0.05"> <input type="number" id="hiresDenoisingStrengthInput" value="0.75" min="0" max="1"
step="0.05">
</div> </div>
<div class="param-group"> <div class="param-group">
@@ -439,6 +446,10 @@
<img src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/LibLib/1f5a3b654ae743a0acbc7b9a908dc64d.jpg" <img src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/LibLib/1f5a3b654ae743a0acbc7b9a908dc64d.jpg"
alt="生成历史图片5" onclick="openModal(this.src)"/> alt="生成历史图片5" onclick="openModal(this.src)"/>
</div> </div>
<div class="history-image-item">
<img src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/LibLib/139b21fc79b344e480d834a70b32386c.jpg"
alt="生成历史图片6" onclick="openModal(this.src)"/>
</div>
</div> </div>
</div> </div>
@@ -448,178 +459,169 @@
<img class="modal-content" id="modalImage"> <img class="modal-content" id="modalImage">
</div> </div>
<script> <script>
const API_BASE = '/api/wenShengTu'; const API_BASE = '/api/wenShengTu';
// 模态框相关变量 // 模态框相关变量
const modal = document.getElementById('imageModal'); const modal = document.getElementById('imageModal');
const modalImage = document.getElementById('modalImage'); const modalImage = document.getElementById('modalImage');
// 页面加载时初始化 // 页面加载时初始化
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
// 默认选择Dream Tech XL模型 // 默认选择Dream Tech XL模型
document.getElementById('modelSelect').value = 'custom'; document.getElementById('modelSelect').value = 'custom';
}); });
// 打开模态框显示大图 // 打开模态框显示大图
function openModal(imageUrl) { function openModal(imageUrl) {
modal.style.display = 'flex'; modal.style.display = 'flex';
modalImage.src = imageUrl; modalImage.src = imageUrl;
}
// 关闭模态框
function closeModal() {
modal.style.display = 'none';
}
// 点击模态框背景也关闭
window.onclick = function (event) {
if (event.target == modal) {
closeModal();
}
}
// 切换高级参数显示
function toggleAdvancedParams() {
const advancedParams = document.getElementById('advancedParams');
const toggleBtn = document.querySelector('.toggle-advanced');
if (advancedParams.style.display === 'none') {
advancedParams.style.display = 'block';
toggleBtn.textContent = '隐藏高级参数';
} else {
advancedParams.style.display = 'none';
toggleBtn.textContent = '显示高级参数';
}
}
// 切换高分辨率修复参数显示
function toggleHiResFixParams() {
const hiResFixParams = document.getElementById('hiResFixParams');
const hiResFixCheckbox = document.getElementById('hiResFixInput');
if (hiResFixCheckbox.checked) {
hiResFixParams.style.display = 'block';
} else {
hiResFixParams.style.display = 'none';
}
}
// 生成图片函数
async function generateImage() {
// 获取所选模型
const selectedModel = document.getElementById('modelSelect').value;
const prompt = document.getElementById('promptInput').value.trim();
const negativePrompt = document.getElementById('negativePromptInput').value.trim();
const width = parseInt(document.getElementById('widthInput').value);
const height = parseInt(document.getElementById('heightInput').value);
const steps = parseInt(document.getElementById('stepsInput').value);
const cfgScale = parseFloat(document.getElementById('cfgScaleInput').value);
const seed = parseInt(document.getElementById('seedInput').value);
const sampler = parseInt(document.getElementById('samplerInput').value);
const imgCount = parseInt(document.getElementById('imgCountInput').value);
const restoreFaces = parseInt(document.getElementById('restoreFacesInput').value);
const hiResFix = document.getElementById('hiResFixInput').checked;
const hiresSteps = parseInt(document.getElementById('hiresStepsInput').value);
const hiresDenoisingStrength = parseFloat(document.getElementById('hiresDenoisingStrengthInput').value);
const resizedWidth = parseInt(document.getElementById('resizedWidthInput').value);
const resizedHeight = parseInt(document.getElementById('resizedHeightInput').value);
const generateBtn = document.getElementById('generateBtn');
const loading = document.getElementById('loading');
const resultContainer = document.getElementById('resultContainer');
const resultMessage = document.getElementById('resultMessage');
const resultImage = document.getElementById('resultImage');
// 验证提示词
if (!prompt) {
resultContainer.style.display = 'block';
resultMessage.innerHTML = '<div class="error">请输入提示词</div>';
return;
} }
// 显示加载状态 // 关闭模态框
generateBtn.disabled = true; function closeModal() {
loading.style.display = 'block'; modal.style.display = 'none';
resultContainer.style.display = 'none'; }
try { // 点击模态框背景也关闭
// 准备请求数据 window.onclick = function (event) {
const requestData = { if (event.target == modal) {
model: selectedModel, closeModal();
prompt: prompt, }
negative_prompt: negativePrompt, }
width: width,
height: height,
steps: steps,
cfg_scale: cfgScale,
seed: seed,
sampler: sampler,
img_count: imgCount,
restore_faces: restoreFaces,
hires_fix: hiResFix
};
// 如果启用了高分辨率修复，添加相关参数 // 切换高级参数显示
if (hiResFix) { function toggleAdvancedParams() {
requestData.hires_steps = hiresSteps; const advancedParams = document.getElementById('advancedParams');
requestData.hires_denoising_strength = hiresDenoisingStrength; const toggleBtn = document.querySelector('.toggle-advanced');
requestData.resized_width = resizedWidth;
requestData.resized_height = resizedHeight; if (advancedParams.style.display === 'none') {
advancedParams.style.display = 'block';
toggleBtn.textContent = '隐藏高级参数';
} else {
advancedParams.style.display = 'none';
toggleBtn.textContent = '显示高级参数';
}
}
// 切换高分辨率修复参数显示
function toggleHiResFixParams() {
const hiResFixParams = document.getElementById('hiResFixParams');
const hiResFixCheckbox = document.getElementById('hiResFixInput');
if (hiResFixCheckbox.checked) {
hiResFixParams.style.display = 'block';
} else {
hiResFixParams.style.display = 'none';
}
}
// 生成图片函数
async function generateImage() {
// 获取所选模型
const selectedModel = document.getElementById('modelSelect').value;
const prompt = document.getElementById('promptInput').value.trim();
const negativePrompt = document.getElementById('negativePromptInput').value.trim();
const width = parseInt(document.getElementById('widthInput').value);
const height = parseInt(document.getElementById('heightInput').value);
const steps = parseInt(document.getElementById('stepsInput').value);
const cfgScale = parseFloat(document.getElementById('cfgScaleInput').value);
const seed = parseInt(document.getElementById('seedInput').value);
const sampler = parseInt(document.getElementById('samplerInput').value);
const imgCount = parseInt(document.getElementById('imgCountInput').value);
const restoreFaces = parseInt(document.getElementById('restoreFacesInput').value);
const hiResFix = document.getElementById('hiResFixInput').checked;
const hiresSteps = parseInt(document.getElementById('hiresStepsInput').value);
const hiresDenoisingStrength = parseFloat(document.getElementById('hiresDenoisingStrengthInput').value);
const resizedWidth = parseInt(document.getElementById('resizedWidthInput').value);
const resizedHeight = parseInt(document.getElementById('resizedHeightInput').value);
const generateBtn = document.getElementById('generateBtn');
const loading = document.getElementById('loading');
const resultContainer = document.getElementById('resultContainer');
const resultMessage = document.getElementById('resultMessage');
const resultImage = document.getElementById('resultImage');
// 验证提示词
if (!prompt) {
resultContainer.style.display = 'block';
resultMessage.innerHTML = '<div class="error">请输入提示词</div>';
return;
} }
// 发送请求 // 显示加载状态
const response = await fetch(`${API_BASE}/generate`, { generateBtn.disabled = true;
method: 'POST', loading.style.display = 'block';
headers: { resultContainer.style.display = 'none';
'Content-Type': 'application/json'
},
body: JSON.stringify(requestData)
});
const data = await response.json(); try {
// 准备请求数据
const requestData = {
model: selectedModel,
prompt: prompt,
negative_prompt: negativePrompt,
width: width,
height: height,
steps: steps,
cfg_scale: cfgScale,
seed: seed,
sampler: sampler,
img_count: imgCount,
restore_faces: restoreFaces,
hires_fix: hiResFix
};
if (response.ok) { // 如果启用了高分辨率修复，添加相关参数
// 显示成功结果 if (hiResFix) {
resultContainer.style.display = 'block'; requestData.hires_steps = hiresSteps;
resultMessage.innerHTML = '<div class="success">图片生成成功！</div>'; requestData.hires_denoising_strength = hiresDenoisingStrength;
requestData.resized_width = resizedWidth;
requestData.resized_height = resizedHeight;
}
// 检查是否有图片数据 // 发送请求
if (data.images && data.images.length > 0) { const response = await fetch(`${API_BASE}/generate`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(requestData)
});
const data = await response.json();
if (response.ok) {
// 显示成功结果
resultContainer.style.display = 'block';
resultMessage.innerHTML = '<div class="success">图片生成成功！</div>';
// 检查是否有图片数据
data.images=[]
data.images.push(data.obs_url)
// 处理图片数据（支持Base64和URL两种格式） // 处理图片数据（支持Base64和URL两种格式）
let imagesHtml = ''; let imagesHtml = '';
data.images.forEach((image, index) => { data.images.forEach((image, index) => {
const imageId = `generatedImage_${Date.now()}_${index}`; const imageId = `generatedImage_${Date.now()}_${index}`;
// 检查是否为URL格式（以http或https开头） imagesHtml += `<img id="${imageId}" src="${image}" alt="生成图片${index + 1}" onclick="openModal(this.src)" style="max-width: 100%; margin-top: 10px; border-radius: 5px; cursor: pointer;">`;
if (typeof image === 'string' && (image.startsWith('http://') || image.startsWith('https://'))) {
// URL格式图片
imagesHtml += `<img id="${imageId}" src="${image}" alt="生成图片${index + 1}" onclick="openModal(this.src)" style="max-width: 100%; margin-top: 10px; border-radius: 5px; cursor: pointer;">`;
} else {
// Base64格式图片
imagesHtml += `<img id="${imageId}" src="data:image/png;base64,${image}" alt="生成图片${index + 1}" onclick="openModal(this.src)" style="max-width: 100%; margin-top: 10px; border-radius: 5px; cursor: pointer;">`;
}
}); });
resultImage.innerHTML = imagesHtml; resultImage.innerHTML = imagesHtml;
} else { } else {
resultImage.innerHTML = '<p>未获取到图片数据</p>'; // 显示错误信息
resultContainer.style.display = 'block';
resultMessage.innerHTML = `<div class="error">${data.error || '生成图片失败'}</div>`;
} }
} else { } catch (error) {
// 显示错误信息 // 显示网络错误
resultContainer.style.display = 'block'; resultContainer.style.display = 'block';
resultMessage.innerHTML = `<div class="error">${data.error || '生成图片失败'}</div>`; resultMessage.innerHTML = `<div class="error">网络错误: ${error.message}</div>`;
} finally {
// 恢复按钮状态
generateBtn.disabled = false;
loading.style.display = 'none';
} }
} catch (error) {
// 显示网络错误
resultContainer.style.display = 'block';
resultMessage.innerHTML = `<div class="error">网络错误: ${error.message}</div>`;
} finally {
// 恢复按钮状态
generateBtn.disabled = false;
loading.style.display = 'none';
} }
} </script>
</script>
</div> </div>
</body> </body>
</html> </html>