Update static/script.js

static/script.js

@@ -1,65 +1,68 @@
-// 确保在整个网页文档加载完毕后才执行脚本
-document.addEventListener('DOMContentLoaded', function() {
-    
-    // 获取需要操作的网页元素
-    const form = document.getElementById('prediction-form');
-    const predictBtn = document.getElementById('predict-btn');
-    const spinner = predictBtn.querySelector('.spinner-border');
-    const resultsArea = document.getElementById('results-area');
-    const errorAlert = document.getElementById('error-alert');
-    const resultKcat = document.getElementById('result-kcat');
-    const resultLogKcat = document.getElementById('result-log-kcat');
-
-    // 监听表单的“提交”事件
-    form.addEventListener('submit', function(event) {
-        // 阻止表单的默认提交行为（即刷新页面）
-        event.preventDefault();
-
-        // 1. 准备开始预测，更新UI状态
-        predictBtn.disabled = true;
-        spinner.classList.remove('d-none'); // 显示加载动画
-        resultsArea.classList.add('d-none'); // 隐藏旧结果
-        errorAlert.classList.add('d-none');   // 隐藏旧错误
-
-        // 2. 获取用户输入的数据
-        const proteinSequence = document.getElementById('protein-sequence').value.trim();
-        const substrateSmiles = document.getElementById('substrate-smiles').value.trim();
-
-        // 3. 使用fetch API将数据发送到我们的Flask后端
-        fetch('/predict', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-                protein_sequence: proteinSequence,
-                substrate_smiles: substrateSmiles,
-            }),
-        })
-        .then(response => response.json()) // 将返回的响应解析为JSON格式
-        .then(data => {
-            // 4. 处理从后端返回的数据
-            if (data.success) {
-                // 如果成功
-                resultKcat.textContent = data.predicted_kcat.toFixed(4);
-                resultLogKcat.textContent = data.predicted_log10_kcat.toFixed(4);
-                resultsArea.classList.remove('d-none'); // 显示结果区域
-            } else {
-                // 如果失败
-                errorAlert.textContent = 'Error: ' + data.error;
-                errorAlert.classList.remove('d-none'); // 显示错误信息
-            }
-        })
-        .catch(error => {
-            // 处理网络请求本身发生的错误
-            console.error('Fetch Error:', error);
-            errorAlert.textContent = 'A network or server error occurred. Please try again later.';
-            errorAlert.classList.remove('d-none');
-        })
-        .finally(() => {
-            // 5. 无论成功还是失败，最后都要恢复按钮状态
-            predictBtn.disabled = false;
-            spinner.classList.add('d-none'); // 隐藏加载动画
-        });
-    });
-});
+document.addEventListener('DOMContentLoaded', function () {
+    const form = document.getElementById('prediction-form');
+    const predictBtn = document.getElementById('predict-btn');
+    const spinner = predictBtn.querySelector('.spinner-border');
+    const resultsArea = document.getElementById('results-area');
+    const errorAlert = document.getElementById('error-alert');
+    const resultsTableBody = document.getElementById('results-table-body');
+    const consentCheckbox = document.getElementById('consent-checkbox');
+
+    form.addEventListener('submit', async function (event) {
+        event.preventDefault();
+
+        predictBtn.disabled = true;
+        spinner.classList.remove('d-none');
+        resultsArea.classList.add('d-none');
+        errorAlert.classList.add('d-none');
+        resultsTableBody.innerHTML = '';
+
+        const proteinSequences = document.getElementById('protein-sequence').value
+            .split('\n')
+            .map(seq => seq.trim())
+            .filter(seq => seq.length > 0);
+            
+        const substrateSmiles = document.getElementById('substrate-smiles').value.trim();
+
+        if (proteinSequences.length === 0) {
+            errorAlert.textContent = '错误：请输入至少一条蛋白质序列。';
+            errorAlert.classList.remove('d-none');
+            predictBtn.disabled = false;
+            spinner.classList.add('d-none');
+            return;
+        }
+
+        try {
+            const response = await fetch('/predict', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    protein_sequences: proteinSequences,
+                    substrate_smiles: substrateSmiles,
+                    consent_given: consentCheckbox.checked
+                }),
+            });
+
+            const data = await response.json();
+            if (!response.ok) throw new Error(data.error || '未知服务器错误。');
+            
+            data.predictions.forEach((pred, index) => {
+                const row = resultsTableBody.insertRow();
+                row.innerHTML = `
+                    <th scope="row">${index + 1}</th>
+                    <td><code>${pred.sequence.substring(0, 40)}...</code></td>
+                    <td>${pred.kcat}</td>
+                    <td>${pred.log_kcat}</td>
+                `;
+            });
+
+            resultsArea.classList.remove('d-none');
+
+        } catch (error) {
+            errorAlert.textContent = '错误: ' + error.message;
+            errorAlert.classList.remove('d-none');
+        } finally {
+            predictBtn.disabled = false;
+            spinner.classList.add('d-none');
+        }
+    });
+});