'commit'

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 = `
-            <div class="aspect-square overflow-hidden bg-gray-100 dark:bg-gray-900">
+            <div class="overflow-hidden bg-gray-100 dark:bg-gray-900 aspect-[${aspectRatio}]">
                 <img src="${resultImage}" alt="${prompt.substring(0, 20)}..." class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
             </div>
             <div class="p-4">
                 <p class="text-sm text-gray-700 dark:text-gray-300 line-clamp-2">${prompt}</p>
             </div>
         `;
-
+    
         // 点击事件 - 加载原图和填充表单
         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;
     }
 }