Update templates/index.html

templates/index.html

@@ -11,510 +11,153 @@
             padding: 0;
             box-sizing: border-box;
         }
-
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            background: linear-gradient(135deg, #e0f7fa 0%, #b3e5fc 100%);
+            background: linear-gradient(135deg, #00bcd4, #8bc34a);
+            color: white;
             min-height: 100vh;
-            padding: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
         }
-
         .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            background: rgba(255, 255, 255, 0.95);
-            border-radius: 20px;
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-            overflow: hidden;
-            backdrop-filter: blur(10px);
-        }
-
-        .header {
-            background: linear-gradient(135deg, #1d976c 0%, #93f9b9 100%);
-            color: white;
+            background: rgba(255, 255, 255, 0.2);
             padding: 30px;
-            text-align: center;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .header::before {
-            content: '';
-            position: absolute;
-            top: -50%;
-            left: -50%;
-            width: 200%;
-            height: 200%;
-            background: repeating-linear-gradient(
-                45deg,
-                transparent,
-                transparent 10px,
-                rgba(255, 255, 255, 0.1) 10px,
-                rgba(255, 255, 255, 0.1) 20px
-            );
-            animation: float 20s linear infinite;
-        }
-
-        @keyframes float {
-            0% { transform: translate(-50%, -50%) rotate(0deg); }
-            100% { transform: translate(-50%, -50%) rotate(360deg); }
-        }
-
-        .header h1 {
-            font-size: 2.5rem;
-            margin-bottom: 10px;
-            position: relative;
-            z-index: 1;
-            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
-        }
-
-        .header p {
-            font-size: 1.1rem;
-            opacity: 0.9;
-            position: relative;
-            z-index: 1;
-            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
-        }
-
-        .main-content {
-            padding: 40px;
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 40px;
-            align-items: start;
-        }
-
-        .upload-section {
-            background: #fff;
             border-radius: 15px;
-            padding: 30px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-            border: 2px dashed transparent;
-            transition: all 0.3s ease;
-        }
-
-        .upload-section:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
-            border-color: #1d976c;
+            max-width: 600px;
+            width: 100%;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         }
-
-        .upload-area {
-            border: 3px dashed #ddd;
-            border-radius: 12px;
-            padding: 40px;
+        h1 {
             text-align: center;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .upload-area:hover {
-            border-color: #1d976c;
-            background: linear-gradient(45deg, rgba(29, 151, 108, 0.05), rgba(147, 249, 185, 0.05));
-        }
-
-        .upload-area.dragover {
-            border-color: #1d976c;
-            background: rgba(29, 151, 108, 0.1);
-            transform: scale(1.02);
+            font-size: 2.5rem;
+            margin-bottom: 20px;
         }
-
-        .upload-icon {
-            font-size: 3rem;
-            color: #1d976c;
+        .form-group {
             margin-bottom: 15px;
-            transition: transform 0.3s ease;
         }
-
-        .upload-area:hover .upload-icon {
-            transform: scale(1.1) rotate(5deg);
-        }
-
-        .text-input {
+        input[type="file"], textarea {
             width: 100%;
-            min-height: 120px;
-            border: 2px solid #e1e5e9;
-            border-radius: 12px;
-            padding: 15px;
-            font-size: 16px;
-            resize: vertical;
-            transition: all 0.3s ease;
+            padding: 10px;
+            border-radius: 5px;
+            border: 1px solid #ddd;
         }
-
-        .text-input:focus {
-            outline: none;
-            border-color: #1d976c;
-            box-shadow: 0 0 0 3px rgba(29, 151, 108, 0.1);
+        textarea {
+            resize: vertical;
+            height: 100px;
         }
-
-        .submit-btn {
-            background: linear-gradient(135deg, #1d976c 0%, #93f9b9 100%);
-            color: white;
+        button {
+            width: 100%;
+            padding: 12px;
+            background-color: #4CAF50;
             border: none;
-            padding: 15px 40px;
-            border-radius: 25px;
-            font-size: 18px;
-            font-weight: 600;
+            border-radius: 5px;
+            color: white;
+            font-size: 1.2rem;
             cursor: pointer;
-            transition: all 0.3s ease;
-            position: relative;
-            overflow: hidden;
-            width: 100%;
-            margin-top: 20px;
+            transition: background-color 0.3s;
         }
-
-        .submit-btn::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
-            transition: left 0.5s;
+        button:disabled {
+            background-color: #9e9e9e;
         }
-
-        .submit-btn:hover::before {
-            left: 100%;
-        }
-
-        .submit-btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 10px 25px rgba(29, 151, 108, 0.3);
-        }
-
-        .submit-btn:disabled {
-            opacity: 0.6;
-            cursor: not-allowed;
-            transform: none;
-        }
-
-        .results-section {
-            background: #fff;
-            border-radius: 15px;
-            padding: 30px;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-            min-height: 500px;
-        }
-
-        .result-content {
-            white-space: pre-wrap;
-            line-height: 1.6;
-            color: #333;
-            font-size: 16px;
+        button:hover {
+            background-color: #45a049;
         }
-
-        .loading {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 200px;
-            flex-direction: column;
-            gap: 20px;
-        }
-
-        .spinner {
-            width: 40px;
-            height: 40px;
-            border: 4px solid #f3f3f3;
-            border-top: 4px solid #1d976c;
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-        }
-
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-
-        .preview-image {
-            max-width: 100%;
-            height: auto;
-            border-radius: 8px;
-            margin: 15px 0;
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-            transition: transform 0.3s ease;
-        }
-
-        .preview-image:hover {
-            transform: scale(1.05);
-        }
-
-        .section-title {
-            font-size: 1.5rem;
-            margin-bottom: 20px;
-            color: #333;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-
-        .feature-card {
-            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            border-radius: 10px;
-            padding: 20px;
-            margin: 15px 0;
-            border-left: 4px solid #1d976c;
+        .results {
+            margin-top: 20px;
+            padding: 15px;
+            border-radius: 5px;
+            background-color: rgba(255, 255, 255, 0.2);
         }
-
         .error-message {
-            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
-            color: #c0392b;
-            padding: 15px;
-            border-radius: 8px;
-            margin: 10px 0;
-            border-left: 4px solid #c0392b;
+            color: red;
         }
-
         .success-message {
-            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
-            color: #198754;
-            padding: 15px;
-            border-radius: 8px;
-            margin: 10px 0;
-            border-left: 4px solid #198754;
-        }
-
-        @media (max-width: 768px) {
-            .main-content {
-                grid-template-columns: 1fr;
-                gap: 20px;
-            }
-            
-            .header h1 {
-                font-size: 2rem;
-            }
-            
-            .container {
-                margin: 10px;
-            }
+            color: green;
         }
-
-        .file-info {
-            background: #f8f9fa;
-            border-radius: 8px;
-            padding: 15px;
-            margin: 10px 0;
-            border: 1px solid #dee2e6;
+        .loading {
+            display: none;
+            text-align: center;
+            font-size: 1.2rem;
         }
     </style>
 </head>
 <body>
     <div class="container">
-        <header class="header">
-            <h1>🏥 皮肤医生临床诊疗辅助系统</h1>
-            <p>AI驱动的智能皮肤疾病诊断与分析平台</p>
-        </header>
-
-        <main class="main-content">
-            <section class="upload-section">
-                <h2 class="section-title">
-                    <i data-lucide="upload"></i>
-                    输入诊疗信息
-                </h2>
-                
-                <form id="analysisForm" enctype="multipart/form-data">
-                    <div class="upload-area" id="uploadArea">
-                        <i data-lucide="camera"></i>
-                        <h3>上传皮肤图像</h3>
-                        <p>拖拽图片到此处或点击选择文件</p>
-                        <p style="font-size: 14px; color: #666; margin-top: 10px;">
-                            支持 JPG, PNG, GIF 格式，最大10MB
-                        </p>
-                    </div>
-                    <input type="file" id="imageInput" name="image" accept="image/*" style="display: none;">
-
-                    <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> 症状描述或问题咨询：
-                        </label>
-                        <textarea 
-                            id="textInput" 
-                            name="text"
-                            class="text-input" 
-                            placeholder="请描述患者的症状、病史、用药情况或其他相关信息...&#10;例如：患者皮肤出现红疹，伴有瘙痒，持续一周..."
-                        ></textarea>
-                    </div>
-
-                    <button type="submit" id="submitBtn" class="submit-btn">
-                        <i data-lucide="brain"></i>
-                        开始AI诊断分析
-                    </button>
-                </form>
-            </section>
-
-            <section class="results-section">
-                <h2 class="section-title">
-                    <i data-lucide="activity"></i>
-                    诊断结果
-                </h2>
-                
-                <div id="results">
-                    <div class="feature-card">
-                        <h3>🎯 系统功能特点</h3>
-                        <ul style="margin-left: 20px; margin-top: 10px;">
-                            <li>📸 支持皮肤图像上传与分析</li>
-                            <li>💬 结合文字症状描述</li>
-                            <li>🤖 基于Gemini-2.0-Pro AI模型</li>
-                            <li>⚡ 快速准确的诊断建议</li>
-                            <li>📋 详细的治疗方案推荐</li>
-                        </ul>
-                    </div>
-                    
-                    <div class="feature-card">
-                        <h3>ℹ️ 使用说明</h3>
-                        <p>1. 上传清晰的皮肤病变图像</p>
-                        <p>2. 详细描述症状和病史</p>
-                        <p>3. 点击"开始AI诊断分析"按钮</p>
-                        <p>4. 等待AI分析并查看结果</p>
-                    </div>
-                    
-                    <div style="background: #fff3cd; border-left: 4px solid #ffc107; padding: 15px; border-radius: 8px; margin-top: 20px;">
-                        <strong>⚠️ 重要提示：</strong>
-                        <p>本系统仅为临床辅助工具，诊断结果仅供参考。最终诊断请以专业医师的临床判断为准。</p>
-                    </div>
-                </div>
-            </section>
-        </main>
+        <h1>皮肤病诊断助手</h1>
+        <form id="uploadForm">
+            <div class="form-group">
+                <label for="textInput">症状描述</label>
+                <textarea id="textInput" placeholder="请输入您的症状描述（可选）"></textarea>
+            </div>
+            <div class="form-group">
+                <label for="imageInput">上传皮肤病变图像（可选）</label>
+                <input type="file" id="imageInput" accept="image/*">
+            </div>
+            <div class="form-group">
+                <button type="submit" id="submitBtn">提交分析</button>
+            </div>
+        </form>
+        <div id="loadingIndicator" class="loading">
+            <div class="spinner"></div>
+            <p>正在分析，请稍等...</p>
+        </div>
+        <div id="results" class="results"></div>
     </div>
 
     <script>
-        lucide.createIcons();
-
-        const uploadArea = document.getElementById('uploadArea');
-        const imageInput = document.getElementById('imageInput');
+        const form = document.getElementById('uploadForm');
         const textInput = document.getElementById('textInput');
+        const imageInput = document.getElementById('imageInput');
         const submitBtn = document.getElementById('submitBtn');
         const results = document.getElementById('results');
-        const imagePreview = document.getElementById('imagePreview');
-        const form = document.getElementById('analysisForm');
-
-        // 修复：使用 JS 监听上传区域的点击，并手动触发文件输入框
-        uploadArea.addEventListener('click', () => {
-            imageInput.click();
-        });
-        
-        // 文件输入框改变事件，处理文件预览
-        imageInput.addEventListener('change', (e) => {
-            const file = e.target.files[0];
-            if (file) {
-                handleFile(file);
-            }
-        });
+        const loadingIndicator = document.getElementById('loadingIndicator');
 
-        // 拖放事件处理
-        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);
-                
-                // 关键修复：将拖放的文件赋值给隐藏的 input 元素
-                const dataTransfer = new DataTransfer();
-                dataTransfer.items.add(file);
-                imageInput.files = dataTransfer.files;
-            }
-        });
-
-        // 处理文件预览
-        function handleFile(file) {
-            const reader = new FileReader();
-            reader.onload = (e) => {
-                imagePreview.innerHTML = `
-                    <div class="file-info">
-                        <h4>📁 已选择文件：${file.name}</h4>
-                        <p>文件大小：${(file.size / 1024 / 1024).toFixed(2)} MB</p>
-                        <img src="${e.target.result}" alt="预览图片" class="preview-image">
-                    </div>
-                `;
-            };
-            reader.readAsDataURL(file);
-        }
-
-        // 表单提交事件处理
         form.addEventListener('submit', async (e) => {
             e.preventDefault();
 
             const text = textInput.value.trim();
             const imageFile = imageInput.files[0];
 
-            if (!imageFile && !text) {
-                showError('请至少上传一张图片或输入症状描述');
+            if (!text && !imageFile) {
+                alert("请至少提供症状描述或上传图像！");
                 return;
             }
-            
-            submitBtn.disabled = true;
-            submitBtn.innerHTML = '<i data-lucide="loader"></i> 正在分析中...';
-            lucide.createIcons();
-            
-            showLoading();
 
-            try {
-                // 使用FormData自动收集表单数据
-                const formData = new FormData(form);
+            if (imageFile && imageFile.size > 10 * 1024 * 1024) {
+                alert("文件过大，请确保文件小于10MB");
+                return;
+            }
+
+            submitBtn.disabled = true; // 禁用按钮避免重复提交
+            loadingIndicator.style.display = 'block'; // 显示加载动画
+
+            const formData = new FormData();
+            formData.append('text', text);
+            if (imageFile) {
+                formData.append('image', imageFile);
+            }
 
+            try {
                 const response = await fetch('/analyze', {
                     method: 'POST',
-                    body: formData
+                    body: formData,
                 });
 
                 const result = await response.json();
 
-                if (!response.ok) {
-                    throw new Error(result.error || `服务器错误: ${response.status}`);
+                if (result.error) {
+                    results.innerHTML = `<div class="error-message">${result.error}</div>`;
+                } else {
+                    results.innerHTML = `<div class="success-message">${result.result}</div>`;
                 }
-                
-                showResults(result);
-                
             } catch (error) {
-                showError(`分析失败: ${error.message}`);
+                results.innerHTML = `<div class="error-message">网络请求失败，请稍后重试。</div>`;
             } finally {
-                submitBtn.disabled = false;
-                submitBtn.innerHTML = '<i data-lucide="brain"></i> 开始AI诊断分析';
-                lucide.createIcons();
+                submitBtn.disabled = false; // 重新启用按钮
+                loadingIndicator.style.display = 'none'; // 隐藏加载动画
             }
         });
-
-        function showLoading() {
-            results.innerHTML = `
-                <div class="loading">
-                    <div class="spinner"></div>
-                    <p>🤖 AI正在分析中，请稍候...</p>
-                </div>
-            `;
-        }
-
-        function showResults(data) {
-            results.innerHTML = `
-                <div class="success-message">
-                    ✅ 分析完成！以下是AI诊断结果：
-                </div>
-                <div class="result-content">${data.result || data.error}</div>
-            `;
-        }
-
-        function showError(message) {
-            results.innerHTML = `
-                <div class="error-message">
-                    ❌ ${message}
-                </div>
-            `;
-        }
     </script>
 </body>
-</html>
+</html>