refactor: split flask app structure

2026-07-06 14:41:16 +08:00
parent c2198aad51
commit a75e857c71
18 changed files with 1871 additions and 1390 deletions
@@ -0,0 +1,89 @@
+const form = document.getElementById('predictForm');
+const fileInput = document.getElementById('fileInput');
+const dropZone = document.getElementById('dropZone');
+const selectedFileName = document.getElementById('selectedFileName');
+const submitBtn = document.getElementById('submitBtn');
+const submitText = document.getElementById('submitText');
+let submitIcon = document.getElementById('submitIcon');
+const alertBox = document.getElementById('alertBox');
+const mainGrid = document.getElementById('mainGrid');
+const inlineResult = document.getElementById('inlineResult');
+const resultImage = document.getElementById('resultImage');
+const resultImportanceWrap = document.getElementById('resultImportanceWrap');
+const resultImportanceImage = document.getElementById('resultImportanceImage');
+const excelBtn = document.getElementById('excelBtn');
+const resultPageBtn = document.getElementById('resultPageBtn');
+const summaryFilename = document.getElementById('summaryFilename');
+const summaryCount = document.getElementById('summaryCount');
+
+function showAlert(message, type='error') {
+  alertBox.classList.remove('hidden', 'bg-dangerSoft', 'text-dangerText', 'border-red-200', 'bg-blueSoft', 'text-primary', 'border-blue-200');
+  if (type === 'error') {
+    alertBox.classList.add('bg-dangerSoft', 'text-dangerText', 'border-red-200');
+  } else {
+    alertBox.classList.add('bg-blueSoft', 'text-primary', 'border-blue-200');
+  }
+  alertBox.textContent = message;
+}
+
+fileInput.addEventListener('change', () => {
+  const file = fileInput.files[0];
+  if (!file) return;
+  selectedFileName.textContent = '已选择文件：' + file.name;
+  selectedFileName.classList.remove('hidden');
+});
+['dragenter', 'dragover'].forEach(evt => dropZone.addEventListener(evt, e => {
+  e.preventDefault();
+  dropZone.classList.add('border-primary', 'bg-blue-50');
+}));
+['dragleave', 'drop'].forEach(evt => dropZone.addEventListener(evt, e => {
+  e.preventDefault();
+  dropZone.classList.remove('border-primary', 'bg-blue-50');
+}));
+
+form.addEventListener('submit', async (e) => {
+  e.preventDefault();
+  alertBox.classList.add('hidden');
+  if (!fileInput.files.length) {
+    showAlert('请先选择要上传的文件。');
+    return;
+  }
+
+  submitBtn.disabled = true;
+  submitText.textContent = '预测中...';
+  submitIcon.replaceWith(Object.assign(document.createElement('span'), { id: 'submitSpinner', className: 'spinner' }));
+
+  try {
+    const formData = new FormData(form);
+    const resp = await fetch(form.action, { method: 'POST', body: formData });
+    const data = await resp.json();
+    if (!resp.ok) {
+      showAlert(data.error || '预测失败，请稍后重试。');
+      return;
+    }
+    resultImage.src = data.image_url;
+    if (data.importance_url) {
+      resultImportanceImage.src = data.importance_url;
+      resultImportanceWrap.classList.remove('hidden');
+    } else {
+      resultImportanceWrap.classList.add('hidden');
+    }
+    excelBtn.href = data.excel_url;
+    resultPageBtn.href = data.result_url;
+    summaryFilename.textContent = data.original_filename;
+    summaryCount.textContent = data.sample_count;
+    inlineResult.classList.remove('hidden');
+    mainGrid.classList.remove('xl:grid-cols-[1.45fr_1fr]');
+    mainGrid.classList.add('xl:grid-cols-[1.25fr_0.95fr_1.05fr]');
+    showAlert('预测完成，已生成图表与 Excel 报告。', 'success');
+    inlineResult.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+  } catch (err) {
+    showAlert('请求失败，请检查后端服务是否正常。');
+  } finally {
+    submitBtn.disabled = false;
+    submitText.textContent = '分析并预测';
+    const restoredIcon = Object.assign(document.createElement('span'), { id: 'submitIcon', className: 'material-symbols-outlined', textContent: 'analytics' });
+    document.getElementById('submitSpinner')?.replaceWith(restoredIcon);
+    submitIcon = restoredIcon;
+  }
+});