From f4246225ee05bd1d1d9993ffb6180ac130354312 Mon Sep 17 00:00:00 2001
From: HuangHai <10402852@qq.com>
Date: Wed, 27 Aug 2025 14:05:32 +0800
Subject: [PATCH] 'commit'

---
 .../static/QwenImage/qwen-image-edit.html     | 11 +++-
 .../static/QwenImage/qwen-image-edit.js       | 61 +++++++++++++++++--
 2 files changed, 65 insertions(+), 7 deletions(-)

diff --git a/dsLightRag/static/QwenImage/qwen-image-edit.html b/dsLightRag/static/QwenImage/qwen-image-edit.html
index 555c38c3..d5e805bc 100644
--- a/dsLightRag/static/QwenImage/qwen-image-edit.html
+++ b/dsLightRag/static/QwenImage/qwen-image-edit.html
@@ -72,10 +72,9 @@
                 <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
                     <i class="fa fa-paint-brush text-white text-xl"></i>
                 </div>
-                <h1 class="text-xl font-bold bg-gradient-to-r from-primary to-secondary text-gradient">QWenImage</h1>
+                <h1 class="text-xl font-bold bg-gradient-to-r from-primary to-secondary text-gradient">QWenImageEdit</h1>
             </div>
             <div class="hidden md:flex items-center space-x-8">
-                <a href="#generator" class="font-medium hover:text-primary dark:hover:text-primary transition-colors">图像生成</a>
                 <a href="#edit"
                    class="font-medium text-primary dark:text-primary border-b-2 border-primary pb-1">图像编辑</a>
                 <a href="#history"
@@ -155,6 +154,13 @@
 
             <!-- 开始编辑按钮 -->
             <div class="pt-4 flex justify-end">
+                <!-- 添加静态随机示例按钮 -->
+                <button id="randomExampleBtn"
+                        class="px-8 py-4 bg-gradient-to-r from-primary to-secondary text-white font-medium rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 flex items-center"
+                        title="随机选择一个示例填充表单">
+                    <i class="fa fa-random mr-"></i>随机示例
+                </button>
+                &nbsp;
                 <button id="startEditBtn"
                         class="px-8 py-4 bg-gradient-to-r from-primary to-secondary text-white font-medium rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 flex items-center">
                     <i class="fa fa-magic mr-2"></i>开始编辑
@@ -234,6 +240,5 @@
 <!-- 使用国内bootcdn -->
 <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.8/axios.min.js"></script>
 <script src="qwen-image-edit.js"></script>
-<!-- 移除重复的内联脚本 -->
 </body>
 </html>
\ 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 1a80289f..d2041799 100644
--- a/dsLightRag/static/QwenImage/qwen-image-edit.js
+++ b/dsLightRag/static/QwenImage/qwen-image-edit.js
@@ -17,6 +17,10 @@ class QwenImageEditor {
     initEventListeners() {
         // 移除Layui依赖，使用原生JS实现
         document.getElementById('startEditBtn').addEventListener('click', () => this.handleEditSubmit());
+        
+        // 删除JS动态创建按钮的代码
+        // 直接绑定静态按钮事件
+        document.getElementById('randomExampleBtn').addEventListener('click', () => this.handleRandomExample());
     }
 
     /**
@@ -152,21 +156,40 @@ class QwenImageEditor {
             }
         ];
 
-        // 渲染每个系列的示例
+        // 新增：保存示例数据到实例属性
+        this.exampleGroups = exampleGroups;
+        this.allExamples = [];
+        
+        // 渲染每个系列的示例并收集所有示例
         exampleGroups.forEach(group => {
             const container = document.getElementById(group.id);
             if (!container) return;
-            container.innerHTML = ''; // 新增：清空容器原有内容
-        
+            container.innerHTML = '';
+            
             group.examples.forEach(example => {
+                // 收集所有示例用于随机选择
+                this.allExamples.push({
+                    originalImage: group.originalImage,
+                    prompt: example.prompt,
+                    resultImage: example.resultImage
+                });
+                
                 container.appendChild(this.createExampleCard(
                     group.originalImage,
                     example.prompt,
                     example.resultImage,
-                    group.aspectRatio // 新增：传递宽高比参数
+                    group.aspectRatio
                 ));
             });
         });
+
+        // 新增：自动选择小熊系列第一个示例
+        setTimeout(() => {
+            const bearContainer = document.getElementById('bearExamples');
+            if (bearContainer && bearContainer.firstElementChild) {
+                bearContainer.firstElementChild.click();
+            }
+        }, 100);
     }
 
     /**
@@ -209,6 +232,36 @@ class QwenImageEditor {
     
         return card;
     }
+
+    /**
+     * 随机选择一个示例并填充表单
+     */
+    handleRandomExample() {
+        if (!this.allExamples || this.allExamples.length === 0) {
+            alert('没有可用的示例数据');
+            return;
+        }
+        
+        // 随机选择一个示例
+        const randomIndex = Math.floor(Math.random() * this.allExamples.length);
+        const randomExample = this.allExamples[randomIndex];
+        
+        // 填充表单数据
+        document.getElementById('imageUrl').value = randomExample.originalImage;
+        document.getElementById('editPrompt').value = randomExample.prompt;
+        
+        // 更新原始图片预览
+        const originalImage = document.getElementById('originalImage');
+        const originalPlaceholder = document.getElementById('originalImagePlaceholder');
+        originalImage.src = randomExample.originalImage;
+        originalImage.classList.remove('hidden');
+        originalPlaceholder.classList.add('hidden');
+        
+        // 移除所有卡片选中状态
+        document.querySelectorAll('.example-card').forEach(card => {
+            card.classList.remove('ring-2', 'ring-primary');
+        });
+    }
 }
 
 // 页面加载完成后初始化