<!DOCTYPE html>
<html>
<head>
   <title>CSV评估系统</title>
   <style>
       * {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }
       
       body {
           font-family: Arial, sans-serif;
           line-height: 1.6;
           padding: 20px;
           background: #f5f5f5;
       }
       
       .container {
           max-width: 800px;
           margin: 0 auto;
           padding: 30px;
           background: white;
           border-radius: 8px;
           box-shadow: 0 2px 4px rgba(0,0,0,0.1);
       }
       
       h2 {
           color: #333;
           margin-bottom: 20px;
       }
       
       .upload-form {
           display: flex;
           gap: 10px;
           margin-bottom: 20px;
       }
       
       input[type="file"] {
           flex: 1;
           padding: 8px;
           border: 1px solid #ddd;
           border-radius: 4px;
       }
       
       button {
           padding: 8px 20px;
           background: #4CAF50;
           color: white;
           border: none;
           border-radius: 4px;
           cursor: pointer;
           transition: opacity 0.2s;
       }
       
       button:disabled {
           opacity: 0.6;
           cursor: not-allowed;
       }
       
       .processing {
           color: #ff6b6b;
           margin: 10px 0;
           font-weight: bold;
       }
       
       .result {
           margin-top: 20px;
           padding: 15px;
           background: #f8f9fa;
           border-radius: 4px;
           white-space: pre-wrap;
       }
       
       .error {
           color: #dc3545;
           font-weight: bold;
       }
       
       .hidden {
           display: none;
       }
   </style>
</head>
<body>
   <div class="container">
       <h2>CSV评估系统</h2>
       
       <form id="uploadForm" class="upload-form">
           <input type="file" 
                  id="fileInput" 
                  accept=".csv"
                  required>
           <button type="submit" id="submitBtn">提交评估</button>
       </form>
       
       <div id="processing" class="processing hidden">
           正在处理文件，请等待...
       </div>
       
       <div id="result" class="result hidden"></div>
   </div>

   <script>
       const form = document.getElementById('uploadForm');
       const fileInput = document.getElementById('fileInput');
       const submitBtn = document.getElementById('submitBtn');
       const processingDiv = document.getElementById('processing');
       const resultDiv = document.getElementById('result');
       
       let isProcessing = false;
       
       async function handleSubmit(e) {
           e.preventDefault();
           
           if(isProcessing) {
               alert('正在处理文件，请等待...');
               return;
           }
           
           const file = fileInput.files[0];
           if(!file) {
               alert('请选择CSV文件');
               return;
           }
           
           const formData = new FormData();
           formData.append('file', file);
           
           startProcessing();
           
           try {
               const response = await fetch('/evaluate', {
                   method: 'POST',
                   body: formData
               });
               
               const data = await response.json();
               showResult(data);
               
           } catch (error) {
               showError('上传处理失败: ' + error.message);
           } finally {
               stopProcessing();
           }
       }
       
       function startProcessing() {
           isProcessing = true;
           submitBtn.disabled = true;
           fileInput.disabled = true;
           processingDiv.classList.remove('hidden');
           resultDiv.classList.add('hidden');
       }
       
       function stopProcessing() {
           isProcessing = false;
           submitBtn.disabled = false;
           fileInput.disabled = false;
           processingDiv.classList.add('hidden');
       }
       
       function showResult(data) {
           resultDiv.classList.remove('hidden');
           if(data.error) {
               resultDiv.innerHTML = `<div class="error">错误: ${data.error}</div>`;
           } else {
               resultDiv.textContent = data.result;
           }
       }
       
       function showError(message) {
           resultDiv.classList.remove('hidden');
           resultDiv.innerHTML = `<div class="error">${message}</div>`;
       }
       
       form.addEventListener('submit', handleSubmit);
   </script>
</body>
</html>