'commit'
This commit is contained in:
306
dsLightRag/static/QwenImage/qwen-image.js
Normal file
306
dsLightRag/static/QwenImage/qwen-image.js
Normal file
@@ -0,0 +1,306 @@
|
||||
// DOM元素
|
||||
const elements = {
|
||||
// 主题切换
|
||||
themeToggle: document.getElementById('themeToggle'),
|
||||
// 移动端菜单
|
||||
mobileMenuBtn: document.getElementById('mobileMenuBtn'),
|
||||
mobileMenu: document.getElementById('mobileMenu'),
|
||||
// 高级选项切换
|
||||
advancedOptionsToggle: document.getElementById('advancedOptionsToggle'),
|
||||
advancedOptions: document.getElementById('advancedOptions'),
|
||||
// 生成器元素
|
||||
prompt: document.getElementById('prompt'),
|
||||
size: document.getElementById('size'),
|
||||
style: document.getElementById('style'),
|
||||
negativePrompt: document.getElementById('negativePrompt'),
|
||||
guidanceScale: document.getElementById('guidanceScale'),
|
||||
guidanceScaleValue: document.getElementById('guidanceScaleValue'),
|
||||
generateBtn: document.getElementById('generateBtn'),
|
||||
randomPromptBtn: document.getElementById('randomPromptBtn'),
|
||||
clearPromptBtn: document.getElementById('clearPromptBtn'),
|
||||
// 状态元素
|
||||
loadingState: document.getElementById('loadingState'),
|
||||
progressBar: document.getElementById('progressBar'),
|
||||
progressText: document.getElementById('progressText'),
|
||||
errorState: document.getElementById('errorState'),
|
||||
errorMessage: document.getElementById('errorMessage'),
|
||||
resultState: document.getElementById('resultState'),
|
||||
resultImage: document.getElementById('resultImage'),
|
||||
// 结果操作按钮
|
||||
retryBtn: document.getElementById('retryBtn'),
|
||||
downloadBtn: document.getElementById('downloadBtn'),
|
||||
regenerateBtn: document.getElementById('regenerateBtn'),
|
||||
saveToHistoryBtn: document.getElementById('saveToHistoryBtn'),
|
||||
// 历史记录
|
||||
historyContainer: document.getElementById('historyContainer')
|
||||
};
|
||||
|
||||
// 示例提示词库
|
||||
const examplePrompts = [
|
||||
"一副典雅庄重的对联悬挂于厅堂之中，房间是个安静古典的中式布置，桌子上放着一些青花瓷，对联上左书“云端书声琅琅跨山海”，右书“智脉笔影翩翩启星辰”， 横批“东师理想”，字体飘逸，中间挂在一着一副中国风的画作，内容是岳阳楼。",
|
||||
"未来城市的夜景，赛博朋克风格，霓虹灯，雨天，反射效果",
|
||||
"一片宁静美丽的松林，阳光透过树叶，雾气弥漫，油画风格",
|
||||
"一个穿着中世纪盔甲的骑士，站在山顶上，背景是龙和城堡",
|
||||
"海底世界，五彩斑斓的珊瑚和鱼群，梦幻光影效果",
|
||||
"一只戴着宇航员头盔的柴犬，站在火星表面，日落时分"
|
||||
];
|
||||
|
||||
// 初始化函数
|
||||
function init() {
|
||||
// 初始化主题
|
||||
initTheme();
|
||||
// 加载历史记录
|
||||
// loadHistory(); // 移除未定义函数调用
|
||||
// 绑定事件监听器
|
||||
bindEventListeners();
|
||||
}
|
||||
|
||||
// 获取随机提示词
|
||||
function getRandomPrompt() {
|
||||
return examplePrompts[Math.floor(Math.random() * examplePrompts.length)];
|
||||
}
|
||||
|
||||
// 初始化主题
|
||||
function initTheme() {
|
||||
// 检查本地存储
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
|
||||
// 设置初始主题
|
||||
if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
|
||||
document.documentElement.classList.add('dark');
|
||||
}
|
||||
}
|
||||
|
||||
// 切换主题
|
||||
function toggleTheme() {
|
||||
document.documentElement.classList.toggle('dark');
|
||||
const isDark = document.documentElement.classList.contains('dark');
|
||||
localStorage.setItem('theme', isDark ? 'dark' : 'light');
|
||||
}
|
||||
|
||||
// 切换移动端菜单
|
||||
function toggleMobileMenu() {
|
||||
elements.mobileMenu.classList.toggle('hidden');
|
||||
}
|
||||
|
||||
// 切换高级选项
|
||||
function toggleAdvancedOptions() {
|
||||
elements.advancedOptions.classList.toggle('hidden');
|
||||
const icon = elements.advancedOptionsToggle.querySelector('i');
|
||||
icon.classList.toggle('rotate-180');
|
||||
}
|
||||
|
||||
// 更新引导力度显示
|
||||
function updateGuidanceScale() {
|
||||
elements.guidanceScaleValue.textContent = elements.guidanceScale.value;
|
||||
}
|
||||
|
||||
// 显示加载状态
|
||||
function showLoadingState() {
|
||||
elements.generateBtn.disabled = true;
|
||||
elements.loadingState.classList.remove('hidden');
|
||||
elements.errorState.classList.add('hidden');
|
||||
elements.resultState.classList.add('hidden');
|
||||
}
|
||||
|
||||
// 更新进度
|
||||
function updateProgress(percent) {
|
||||
elements.progressBar.style.width = `${percent}%`;
|
||||
elements.progressText.textContent = `进度: ${percent}%`;
|
||||
}
|
||||
|
||||
// 显示错误状态
|
||||
function showErrorState(message) {
|
||||
elements.loadingState.classList.add('hidden');
|
||||
elements.errorState.classList.remove('hidden');
|
||||
elements.errorMessage.textContent = message;
|
||||
elements.generateBtn.disabled = false;
|
||||
}
|
||||
|
||||
// 显示结果状态
|
||||
function showResultState(imageUrl) {
|
||||
elements.loadingState.classList.add('hidden');
|
||||
elements.resultState.classList.remove('hidden');
|
||||
elements.resultImage.src = imageUrl;
|
||||
elements.generateBtn.disabled = false;
|
||||
}
|
||||
|
||||
// 生成图像
|
||||
async function generateImage() {
|
||||
const prompt = elements.prompt.value.trim();
|
||||
|
||||
// 验证输入
|
||||
if (!prompt) {
|
||||
showErrorState('请输入图像描述词');
|
||||
return;
|
||||
}
|
||||
|
||||
// 显示加载状态
|
||||
showLoadingState();
|
||||
updateProgress(10);
|
||||
|
||||
try {
|
||||
// 构建请求数据
|
||||
const requestData = {
|
||||
prompt: prompt,
|
||||
size: elements.size.value,
|
||||
};
|
||||
|
||||
// 模拟进度更新
|
||||
const progressInterval = setInterval(() => {
|
||||
const currentWidth = parseInt(elements.progressBar.style.width);
|
||||
if (currentWidth < 90) {
|
||||
updateProgress(currentWidth + Math.random() * 10);
|
||||
}
|
||||
}, 500);
|
||||
|
||||
// 调用API生成图像 (参考TestQWen3Image.py中的接口)
|
||||
console.log('请求URL:', '/api/qwenImage/generate');
|
||||
console.log('请求参数:', JSON.stringify(requestData, null, 2));
|
||||
const response = await fetch('/api/qwenImage/generate', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(requestData)
|
||||
});
|
||||
|
||||
clearInterval(progressInterval);
|
||||
updateProgress(100);
|
||||
|
||||
if (!response.ok) {
|
||||
// 尝试解析错误响应
|
||||
const errorDetails = await response.json().catch(() => ({}));
|
||||
const errorMsg = errorDetails.message || `API请求失败: ${response.status} ${response.statusText}`;
|
||||
throw new Error(errorMsg);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
// 检查API返回状态 (参考TestQWen3Image.py中的响应处理)
|
||||
if (result.code !== 200 || !result.data || !result.data.images || result.data.images.length === 0) {
|
||||
throw new Error(result.message || '未获取到生成的图像');
|
||||
}
|
||||
|
||||
// 显示结果
|
||||
showResultState(result.data.images[0]);
|
||||
|
||||
} catch (error) {
|
||||
console.error('生成图像失败:', error);
|
||||
showErrorState(error.message || '生成图像时发生错误，请重试');
|
||||
}
|
||||
}
|
||||
|
||||
// 下载图像
|
||||
function downloadImage() {
|
||||
if (!elements.resultImage.src) return;
|
||||
|
||||
const link = document.createElement('a');
|
||||
link.href = elements.resultImage.src;
|
||||
link.download = `qwen-image-${new Date().getTime()}.png`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
|
||||
// 保存到历史记录
|
||||
function saveToHistory() {
|
||||
if (!elements.resultImage.src || !elements.prompt.value.trim()) return;
|
||||
|
||||
const historyItem = {
|
||||
id: Date.now(),
|
||||
prompt: elements.prompt.value.trim(),
|
||||
size: elements.size.value,
|
||||
style: elements.style.value,
|
||||
imageUrl: elements.resultImage.src,
|
||||
timestamp: new Date().toISOString()
|
||||
};
|
||||
|
||||
// 获取现有历史记录
|
||||
const history = JSON.parse(localStorage.getItem('qwenImageHistory') || '[]');
|
||||
// 添加新记录
|
||||
history.unshift(historyItem);
|
||||
// 限制历史记录数量
|
||||
if (history.length > 20) history.pop();
|
||||
// 保存到本地存储
|
||||
localStorage.setItem('qwenImageHistory', JSON.stringify(history));
|
||||
// 更新历史记录显示
|
||||
renderHistory();
|
||||
|
||||
// 显示提示
|
||||
alert('已保存到历史记录');
|
||||
}
|
||||
|
||||
// 渲染历史记录
|
||||
function renderHistory() {
|
||||
const history = JSON.parse(localStorage.getItem('qwenImageHistory') || '[]');
|
||||
|
||||
if (history.length === 0) {
|
||||
elements.historyContainer.innerHTML = `
|
||||
<div class="text-center py-12 text-gray-500 dark:text-gray-400 col-span-full">
|
||||
<i class="fa fa-history text-4xl mb-4"></i>
|
||||
<p>暂无生成历史</p>
|
||||
<p class="text-sm mt-2">生成图像后，历史记录将显示在这里</p>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
// 生成历史记录项
|
||||
elements.historyContainer.innerHTML = history.map(item => `
|
||||
<div class="bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md transition-all duration-300 hover:shadow-lg">
|
||||
<img src="${item.imageUrl}" alt="${item.prompt.substring(0, 30)}..." class="w-full h-48 object-cover">
|
||||
<div class="p-3">
|
||||
<p class="text-sm font-medium truncate" title="${item.prompt}">${item.prompt}</p>
|
||||
<div class="flex justify-between items-center mt-2 text-xs text-gray-500 dark:text-gray-400">
|
||||
<span>${item.size}</span>
|
||||
<span>${new Date(item.timestamp).toLocaleString()}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
// 绑定事件监听器
|
||||
function bindEventListeners() {
|
||||
// 主题切换
|
||||
elements.themeToggle.addEventListener('click', toggleTheme);
|
||||
|
||||
// 移动端菜单
|
||||
elements.mobileMenuBtn.addEventListener('click', toggleMobileMenu);
|
||||
|
||||
// 高级选项切换
|
||||
elements.advancedOptionsToggle.addEventListener('click', toggleAdvancedOptions);
|
||||
|
||||
// 引导力度滑块
|
||||
elements.guidanceScale.addEventListener('input', updateGuidanceScale);
|
||||
|
||||
// 随机提示词
|
||||
elements.randomPromptBtn.addEventListener('click', () => {
|
||||
elements.prompt.value = getRandomPrompt();
|
||||
});
|
||||
|
||||
// 清空提示词
|
||||
elements.clearPromptBtn.addEventListener('click', () => {
|
||||
elements.prompt.value = '';
|
||||
});
|
||||
|
||||
// 生成按钮
|
||||
elements.generateBtn.addEventListener('click', generateImage);
|
||||
|
||||
// 重试按钮
|
||||
elements.retryBtn.addEventListener('click', generateImage);
|
||||
|
||||
// 重新生成按钮
|
||||
elements.regenerateBtn.addEventListener('click', generateImage);
|
||||
|
||||
// 下载按钮
|
||||
elements.downloadBtn.addEventListener('click', downloadImage);
|
||||
|
||||
// 保存到历史
|
||||
elements.saveToHistoryBtn.addEventListener('click', saveToHistory);
|
||||
}
|
||||
|
||||
// 页面加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
Reference in New Issue
Block a user