From f33c370da18d7d2beeb9306a894f1fbc6df42318 Mon Sep 17 00:00:00 2001
From: HuangHai <10402852@qq.com>
Date: Thu, 4 Sep 2025 12:55:38 +0800
Subject: [PATCH] 'commit'

---
 dsLightRag/static/LibLib/copyface.html | 150 +++++++++++++++++--------
 1 file changed, 102 insertions(+), 48 deletions(-)
diff --git a/dsLightRag/static/LibLib/copyface.html b/dsLightRag/static/LibLib/copyface.html
index d9f79030..b1431494 100644
--- a/dsLightRag/static/LibLib/copyface.html
+++ b/dsLightRag/static/LibLib/copyface.html
@@ -32,7 +32,7 @@
             font-weight: bold;
             color: #555;
         }
-        input[type="url"], select {
+        input[type="url"] {
             width: 100%;
             padding: 10px;
             border: 1px solid #ddd;
@@ -113,6 +113,67 @@
             border-radius: 5px;
             margin: 10px 0;
         }
+        /* 修改为横版模型卡片样式，一行显示3个 */
+        .model-cards {
+            display: flex;
+            gap: 20px;
+            margin: 20px 0;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+        .model-card {
+            border: 2px solid #ddd;
+            border-radius: 10px;
+            padding: 15px;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            background: white;
+            width: calc(33.333% - 20px);
+            box-sizing: border-box;
+            min-width: 280px;
+        }
+        .model-card:hover {
+            border-color: #007bff;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 15px rgba(0,123,255,0.2);
+        }
+        .model-card.selected {
+            border-color: #007bff;
+            background-color: #e8f4fd;
+        }
+        .model-card img {
+            width: 100%;
+            height: 300px;
+            object-fit: cover;
+            border-radius: 8px;
+            margin-bottom: 10px;
+        }
+        .model-card h3 {
+            margin: 10px 0 5px;
+            color: #333;
+            font-size: 16px;
+        }
+        .model-card p {
+            color: #666;
+            font-size: 14px;
+            margin: 0;
+        }
+        /* 响应式调整 */
+        @media (max-width: 992px) {
+            .model-card {
+                width: calc(50% - 15px);
+            }
+        }
+        @media (max-width: 768px) {
+            .model-card {
+                width: 100%;
+                min-width: auto;
+            }
+            .model-card img {
+                height: 250px;
+            }
+        }
     </style>
 </head>
 <body>
@@ -126,10 +187,27 @@
         </div>
 
         <div class="form-group">
-            <label for="modelSelect">选择生成模型：</label>
-            <select id="modelSelect">
-                <option value="">加载中...</option>
-            </select>
+            <label>选择生成模型：</label>
+            <div class="model-cards" id="modelCards">
+                <div class="model-card" onclick="selectModel(this, '炫酷机甲美女_majicflus')">
+                    <img src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/LibLib/Sample/JiJiaMeiNv.jpg" 
+                         alt="炫酷机甲美女" onerror="this.src='https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/HuangWanQiao.jpg'">
+                    <h3>炫酷机甲美女</h3>
+                    <p>majicflus模型</p>
+                </div>
+                <div class="model-card" onclick="selectModel(this, '可铯AI—3d潮玩手办')">
+                    <img src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/LibLib/Sample/3DChaoWanShouBan.jpg" 
+                         alt="3D潮玩手办" onerror="this.src='https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/HuangWanQiao.jpg'">
+                    <h3>3D潮玩手办</h3>
+                    <p>可铯AI模型</p>
+                </div>
+                <div class="model-card" onclick="selectModel(this, 'F.1-武侠世界')">
+                    <img src="https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/LibLib/Sample/WuXiaMeiNv.jpg" 
+                         alt="武侠世界" onerror="this.src='https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/HuangWanQiao.jpg'">
+                    <h3>武侠世界</h3>
+                    <p>F.1武侠风格</p>
+                </div>
+            </div>
         </div>
 
         <div class="image-preview" id="previewContainer">
@@ -139,7 +217,6 @@
         </div>
 
         <button onclick="generateImage()" id="generateBtn">生成换脸图片</button>
-        <button onclick="loadSamples()" id="refreshBtn">刷新模型列表</button>
 
         <div class="loading" id="loading">
             <div class="spinner"></div>
@@ -155,10 +232,15 @@
 
     <script>
         const API_BASE = '/api/copyface';
+        let selectedModel = '';
         
-        // 页面加载时获取可用模型
+        // 页面加载时初始化
         document.addEventListener('DOMContentLoaded', function() {
-            loadSamples();
+            // 默认选择第一个模型
+            const firstCard = document.querySelector('.model-card');
+            if (firstCard) {
+                selectModel(firstCard, firstCard.getAttribute('onclick').split("'")[1]);
+            }
             
             // 监听URL输入变化，实时预览
             document.getElementById('imageUrl').addEventListener('input', function() {
@@ -173,48 +255,23 @@
             });
         });
 
-        // 加载可用模型样例
-        async function loadSamples() {
-            const select = document.getElementById('modelSelect');
-            const refreshBtn = document.getElementById('refreshBtn');
+        // 选择模型
+        function selectModel(card, modelName) {
+            // 移除所有选中状态
+            document.querySelectorAll('.model-card').forEach(card => {
+                card.classList.remove('selected');
+            });
             
-            refreshBtn.disabled = true;
-            refreshBtn.textContent = '加载中...';
+            // 添加选中状态
+            card.classList.add('selected');
+            selectedModel = modelName;
             
-            try {
-                const response = await fetch(`${API_BASE}/samples`);
-                if (!response.ok) {
-                    throw new Error('获取模型列表失败');
-                }
-                
-                const samples = await response.json();
-                
-                // 清空并填充选项
-                select.innerHTML = '';
-                samples.forEach(sample => {
-                    const option = document.createElement('option');
-                    option.value = sample.name;
-                    option.textContent = sample.name;
-                    select.appendChild(option);
-                });
-                
-                if (samples.length > 0) {
-                    select.value = samples[0].name;
-                }
-                
-            } catch (error) {
-                console.error('加载模型失败:', error);
-                select.innerHTML = '<option value="">加载失败，点击刷新</option>';
-            } finally {
-                refreshBtn.disabled = false;
-                refreshBtn.textContent = '刷新模型列表';
-            }
+            console.log('已选择模型:', selectedModel);
         }
 
         // 生成换脸图片
         async function generateImage() {
             const imageUrl = document.getElementById('imageUrl').value.trim();
-            const modelName = document.getElementById('modelSelect').value;
             const generateBtn = document.getElementById('generateBtn');
             const loading = document.getElementById('loading');
             const resultContainer = document.getElementById('resultContainer');
@@ -227,7 +284,7 @@
                 return;
             }
             
-            if (!modelName) {
+            if (!selectedModel) {
                 alert('请选择生成模型');
                 return;
             }
@@ -238,10 +295,7 @@
             resultContainer.style.display = 'none';
             
             try {
-                let apiUrl = `${API_BASE}/generate`;
-                if (modelName) {
-                    apiUrl = `${API_BASE}/generate/${encodeURIComponent(modelName)}`;
-                }
+                const apiUrl = `${API_BASE}/generate/${encodeURIComponent(selectedModel)}`;
                 
                 const response = await fetch(apiUrl, {
                     method: 'POST',
