diff --git a/dsLightRag/static/QwenImage/index.html b/dsLightRag/static/QwenImage/index.html new file mode 100644 index 00000000..1666b7bc --- /dev/null +++ b/dsLightRag/static/QwenImage/index.html @@ -0,0 +1,319 @@ + + + + + + QWenImage - AI图像生成工具 + + + + + + + + + + + + + +
+ + + +
+ +
+ +
+

+ AI驱动的图像创作 +

+

+ 只需输入文字描述，即可生成高质量图像，释放您的创造力 +

+
+ + 开始创作 + +
+
+ + +
+

图像生成器

+ +
+ +
+ +
+ +
+ + +
+
+
+ 提示：使用更具体的描述词可以获得更符合预期的结果，如指定风格、构图、光线等 +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + + +
+ + +
+ +
+
+ + + + + + + + + +
+ + +
+

示例作品

+
+ +
+
+ 示例图像 +
+
+

可爱小狗，卡通风格

+
+
+
+
+ +
+
+ 示例图像 +
+
+

山间湖泊，写实风格

+
+
+
+
+ +
+
+ 示例图像 +
+
+

未来城市，赛博朋克风格

+
+
+
+
+
+
+ + +
+

生成历史

+
+ +
+ +

暂无生成历史

+

生成图像后，历史记录将显示在这里

+
+
+
+
+ + + + + + + \ No newline at end of file diff --git a/dsLightRag/static/QwenImage/qwen-image.js b/dsLightRag/static/QwenImage/qwen-image.js new file mode 100644 index 00000000..611c1b9d --- /dev/null +++ b/dsLightRag/static/QwenImage/qwen-image.js @@ -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 = ` +
+ +

暂无生成历史

+

生成图像后，历史记录将显示在这里

+
+ `; + return; + } + + // 生成历史记录项 + elements.historyContainer.innerHTML = history.map(item => ` +
+ ${item.prompt.substring(0, 30)}... +
+

${item.prompt}

+
+ ${item.size} + ${new Date(item.timestamp).toLocaleString()} +
+
+
+ `).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); \ No newline at end of file