'commit'
This commit is contained in:
@@ -228,23 +228,27 @@
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.history-title {
|
||||
color: #333;
|
||||
margin-bottom: 15px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.history-images {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.history-image-item {
|
||||
width: calc(20% - 15px);
|
||||
min-width: 120px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.history-image-item img {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
@@ -253,6 +257,7 @@
|
||||
border: 2px solid #ddd;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.history-image-item img:hover {
|
||||
border-color: #007bff;
|
||||
transform: scale(1.05);
|
||||
@@ -290,7 +295,8 @@
|
||||
<select id="modelSelect">
|
||||
<option value="custom">Dream Tech XL</option>
|
||||
</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 class="form-group">
|
||||
@@ -384,7 +390,8 @@
|
||||
|
||||
<div class="param-group">
|
||||
<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 class="param-group">
|
||||
@@ -439,6 +446,10 @@
|
||||
<img src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/LibLib/1f5a3b654ae743a0acbc7b9a908dc64d.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/139b21fc79b344e480d834a70b32386c.jpg"
|
||||
alt="生成历史图片6" onclick="openModal(this.src)"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -448,178 +459,169 @@
|
||||
<img class="modal-content" id="modalImage">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const API_BASE = '/api/wenShengTu';
|
||||
<script>
|
||||
const API_BASE = '/api/wenShengTu';
|
||||
|
||||
// 模态框相关变量
|
||||
const modal = document.getElementById('imageModal');
|
||||
const modalImage = document.getElementById('modalImage');
|
||||
// 模态框相关变量
|
||||
const modal = document.getElementById('imageModal');
|
||||
const modalImage = document.getElementById('modalImage');
|
||||
|
||||
// 页面加载时初始化
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// 默认选择Dream Tech XL模型
|
||||
document.getElementById('modelSelect').value = 'custom';
|
||||
});
|
||||
// 页面加载时初始化
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// 默认选择Dream Tech XL模型
|
||||
document.getElementById('modelSelect').value = 'custom';
|
||||
});
|
||||
|
||||
// 打开模态框显示大图
|
||||
function openModal(imageUrl) {
|
||||
modal.style.display = 'flex';
|
||||
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;
|
||||
// 打开模态框显示大图
|
||||
function openModal(imageUrl) {
|
||||
modal.style.display = 'flex';
|
||||
modalImage.src = imageUrl;
|
||||
}
|
||||
|
||||
// 显示加载状态
|
||||
generateBtn.disabled = true;
|
||||
loading.style.display = 'block';
|
||||
resultContainer.style.display = 'none';
|
||||
// 关闭模态框
|
||||
function closeModal() {
|
||||
modal.style.display = 'none';
|
||||
}
|
||||
|
||||
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
|
||||
};
|
||||
// 点击模态框背景也关闭
|
||||
window.onclick = function (event) {
|
||||
if (event.target == modal) {
|
||||
closeModal();
|
||||
}
|
||||
}
|
||||
|
||||
// 如果启用了高分辨率修复,添加相关参数
|
||||
if (hiResFix) {
|
||||
requestData.hires_steps = hiresSteps;
|
||||
requestData.hires_denoising_strength = hiresDenoisingStrength;
|
||||
requestData.resized_width = resizedWidth;
|
||||
requestData.resized_height = resizedHeight;
|
||||
// 切换高级参数显示
|
||||
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;
|
||||
}
|
||||
|
||||
// 发送请求
|
||||
const response = await fetch(`${API_BASE}/generate`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(requestData)
|
||||
});
|
||||
// 显示加载状态
|
||||
generateBtn.disabled = true;
|
||||
loading.style.display = 'block';
|
||||
resultContainer.style.display = 'none';
|
||||
|
||||
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) {
|
||||
// 显示成功结果
|
||||
resultContainer.style.display = 'block';
|
||||
resultMessage.innerHTML = '<div class="success">图片生成成功!</div>';
|
||||
// 如果启用了高分辨率修复,添加相关参数
|
||||
if (hiResFix) {
|
||||
requestData.hires_steps = hiresSteps;
|
||||
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两种格式)
|
||||
let imagesHtml = '';
|
||||
data.images.forEach((image, index) => {
|
||||
const imageId = `generatedImage_${Date.now()}_${index}`;
|
||||
// 检查是否为URL格式(以http或https开头)
|
||||
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;">`;
|
||||
}
|
||||
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;">`;
|
||||
});
|
||||
resultImage.innerHTML = imagesHtml;
|
||||
} else {
|
||||
resultImage.innerHTML = '<p>未获取到图片数据</p>';
|
||||
// 显示错误信息
|
||||
resultContainer.style.display = 'block';
|
||||
resultMessage.innerHTML = `<div class="error">${data.error || '生成图片失败'}</div>`;
|
||||
}
|
||||
} else {
|
||||
// 显示错误信息
|
||||
} catch (error) {
|
||||
// 显示网络错误
|
||||
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>
|
||||
</body>
|
||||
</html>
|
Reference in New Issue
Block a user