diff --git a/dsLightRag/static/QwenImage/qwen-image-edit.html b/dsLightRag/static/QwenImage/qwen-image-edit.html index d5f401eb..555c38c3 100644 --- a/dsLightRag/static/QwenImage/qwen-image-edit.html +++ b/dsLightRag/static/QwenImage/qwen-image-edit.html @@ -7,7 +7,7 @@ - + - + - -
- +
+ +
+ +
+

+ AI图像编辑工具 +

+

+ 上传图片并输入编辑指令，AI将智能修改您的图像 +

+
+ + +
+

图像编辑器

+ +
+ +
+ + +
+ + +
+ + +
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+ + +
+
+

原始图片

+
+ +
+ +

原始图片将显示在这里

- - -
-
- 修改活动信息示例 -
-
-

把'活动全程免费'改为'只给学生打折'

-
-
- - -
-
- 修改人物形象示例 -
-
-

把女人改成穿汉服的男人

+
+
+

编辑结果

+
+ +
+ +

编辑后的图片将显示在这里

+
- - - - - + +
+

编辑示例

+ + +
+

示例区域

+ + +
+

小熊系列

+
+
+ + +
+

霓裳汉服社系列

+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ + + + + + \ No newline at end of file diff --git a/dsLightRag/static/QwenImage/qwen-image-edit.js b/dsLightRag/static/QwenImage/qwen-image-edit.js index b462aa62..1a80289f 100644 --- a/dsLightRag/static/QwenImage/qwen-image-edit.js +++ b/dsLightRag/static/QwenImage/qwen-image-edit.js @@ -95,6 +95,7 @@ class QwenImageEditor { { id: 'bearExamples', title: '小熊系列', + aspectRatio: '1/1', // 新增：小熊系列方形比例 originalImage: 'https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/7219965571/p999719.png', examples: [ { @@ -132,6 +133,7 @@ class QwenImageEditor { { id: 'hanfuExamples', title: '霓裳汉服社系列', + aspectRatio: '5/7', // 新增：汉服社系列5:7比例 originalImage: 'https://help-static-aliyun-doc.aliyuncs.com/assets/img/zh-CN/7219965571/p1000025.png', examples: [ { @@ -154,12 +156,14 @@ class QwenImageEditor { exampleGroups.forEach(group => { const container = document.getElementById(group.id); if (!container) return; - + container.innerHTML = ''; // 新增：清空容器原有内容 + group.examples.forEach(example => { container.appendChild(this.createExampleCard( group.originalImage, example.prompt, - example.resultImage + example.resultImage, + group.aspectRatio // 新增：传递宽高比参数 )); }); }); @@ -170,38 +174,39 @@ class QwenImageEditor { * @param {string} originalImage - 原始图片URL * @param {string} prompt - 编辑提示词 * @param {string} resultImage - 结果图片URL + * @param {string} aspectRatio - 宽高比（新增参数） * @returns {HTMLElement} - 卡片元素 */ - createExampleCard(originalImage, prompt, resultImage) { + createExampleCard(originalImage, prompt, resultImage, aspectRatio) { const card = document.createElement('div'); card.className = 'example-card bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl cursor-pointer'; card.innerHTML = ` -
+
${prompt.substring(0, 20)}...

${prompt}

`; - + // 点击事件 - 加载原图和填充表单 card.addEventListener('click', () => { // 填充表单 document.getElementById('imageUrl').value = originalImage; document.getElementById('editPrompt').value = prompt; - + // 更新原始图片预览 const originalImageElement = document.getElementById('originalImage'); const originalImagePlaceholder = document.getElementById('originalImagePlaceholder'); originalImageElement.src = originalImage; originalImageElement.classList.remove('hidden'); originalImagePlaceholder.classList.add('hidden'); - + // 添加选中效果 document.querySelectorAll('.example-card').forEach(c => c.classList.remove('ring-2', 'ring-primary')); card.classList.add('ring-2', 'ring-primary'); }); - + return card; } }