Update templates/index.html

templates/index.html

@@ -304,7 +304,7 @@
 <body>
     <div class="container">
         <header class="header">
-            <h1>🏥 皮镜 (SkinLens)</h1>
+            <h1>  皮镜 (SkinLens)</h1>
             <p>AI驱动的智能皮肤疾病诊断与分析平台</p>
         </header>
 
@@ -316,7 +316,7 @@
                 </h2>
                 
                 <form id="analysisForm" enctype="multipart/form-data">
-                    <div class="upload-area" id="uploadArea">
+                    <label for="imageInput" class="upload-area" id="uploadArea">
                         <i data-lucide="camera"></i>
                         <h3>上传皮肤图像</h3>
                         <p>拖拽图片到此处或点击选择文件</p>
@@ -324,10 +324,10 @@
                             支持 JPG, PNG, GIF 格式，最大10MB
                         </p>
                         <input type="file" id="imageInput" name="image" accept="image/*" style="display: none;">
-                    </div>
-    
+                    </label>
+
                     <div id="imagePreview"></div>
-    
+
                     <div style="margin: 25px 0;">
                         <label for="textInput" style="display: block; margin-bottom: 10px; font-weight: 600;">
                             <i data-lucide="file-text"></i> 症状描述或问题咨询：
@@ -339,7 +339,7 @@
                             placeholder="请描述患者的症状、病史、用药情况或其他相关信息...&#10;例如：患者皮肤出现红疹，伴有瘙痒，持续一周..."
                         ></textarea>
                     </div>
-    
+
                     <button type="submit" id="submitBtn" class="submit-btn">
                         <i data-lucide="brain"></i>
                         开始AI诊断分析
@@ -359,7 +359,7 @@
                         <ul style="margin-left: 20px; margin-top: 10px;">
                             <li>📸 支持皮肤图像上传与分析</li>
                             <li>💬 结合文字症状描述</li>
-                           
+                            <li>🤖 基于Gemini-2.0-Pro AI模型</li>
                             <li>⚡ 快速准确的诊断建议</li>
                             <li>📋 详细的治疗方案推荐</li>
                         </ul>
@@ -392,18 +392,36 @@
         const results = document.getElementById('results');
         const imagePreview = document.getElementById('imagePreview');
         const form = document.getElementById('analysisForm');
+        
+        // 文件输入框改变事件，处理文件预览
+        imageInput.addEventListener('change', (e) => {
+            const file = e.target.files[0];
+            if (file) {
+                handleFile(file);
+            }
+        });
+
+        // 拖放事件处理
+        uploadArea.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            uploadArea.classList.add('dragover');
+        });
+
+        uploadArea.addEventListener('dragleave', () => {
+            uploadArea.classList.remove('dragover');
+        });
 
-        // 上传区域的点击和拖放逻辑
-        uploadArea.addEventListener('click', () => imageInput.click());
-        imageInput.addEventListener('change', (e) => handleFile(e.target.files[0]));
-        uploadArea.addEventListener('dragover', (e) => { e.preventDefault(); uploadArea.classList.add('dragover'); });
-        uploadArea.addEventListener('dragleave', () => uploadArea.classList.remove('dragover'));
         uploadArea.addEventListener('drop', (e) => {
             e.preventDefault();
             uploadArea.classList.remove('dragover');
             const file = e.dataTransfer.files[0];
             if (file && file.type.startsWith('image/')) {
+                // 将文件传递给 handleFile 函数
                 handleFile(file);
+                // 也要设置到 file input 中，以便表单能提交
+                const dataTransfer = new DataTransfer();
+                dataTransfer.items.add(file);
+                imageInput.files = dataTransfer.files;
             }
         });