'commit'

dsLightRag/static/LibLib/copyface.html

@@ -159,6 +159,35 @@
             font-size: 14px;
             margin: 0;
         }
+        /* 新增：图片模态框样式 */
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.9);
+            z-index: 1000;
+            justify-content: center;
+            align-items: center;
+        }
+        .modal-content {
+            max-width: 90%;
+            max-height: 90%;
+        }
+        .close-modal {
+            position: absolute;
+            top: 20px;
+            right: 30px;
+            color: white;
+            font-size: 40px;
+            font-weight: bold;
+            cursor: pointer;
+        }
+        .close-modal:hover {
+            color: #ccc;
+        }
         /* 响应式调整 */
         @media (max-width: 992px) {
             .model-card {
@@ -191,19 +220,19 @@
             <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'">
+                         alt="炫酷机甲美女" onerror="this.src='https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/HuangWanQiao.jpg'" onclick="openModal(this.src)">
                     <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'">
+                         alt="3D潮玩手办" onerror="this.src='https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/HuangWanQiao.jpg'" onclick="openModal(this.src)">
                     <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'">
+                         alt="武侠世界" onerror="this.src='https://dsideal.obs.cn-north-1.myhuaweicloud.com/HuangHai/Backup/HuangWanQiao.jpg'" onclick="openModal(this.src)">
                     <h3>武侠世界</h3>
                     <p>F.1武侠风格</p>
                 </div>
@@ -230,9 +259,18 @@
         </div>
     </div>
 
+    <!-- 新增：图片模态框 -->
+    <div id="imageModal" class="modal">
+        <span class="close-modal" onclick="closeModal()">&times;</span>
+        <img class="modal-content" id="modalImage">
+    </div>
+
     <script>
         const API_BASE = '/api/copyface';
         let selectedModel = '';
+        // 新增：模态框相关变量
+        const modal = document.getElementById('imageModal');
+        const modalImage = document.getElementById('modalImage');
         
         // 页面加载时初始化
         document.addEventListener('DOMContentLoaded', function() {
@@ -255,6 +293,24 @@
             });
         });
 
+        // 新增：打开模态框显示大图
+        function openModal(imageUrl) {
+            modal.style.display = 'flex';
+            modalImage.src = imageUrl;
+        }
+
+        // 新增：关闭模态框
+        function closeModal() {
+            modal.style.display = 'none';
+        }
+
+        // 点击模态框背景也关闭
+        window.onclick = function(event) {
+            if (event.target == modal) {
+                closeModal();
+            }
+        }
+
         // 选择模型
         function selectModel(card, modelName) {
             // 移除所有选中状态