Update templates/index.html

templates/index.html

@@ -18,19 +18,18 @@
             <p class="lead">通过上传文件批量预测酶催化速率 (kcat)。</p>
         </div>
 
-        <div class="alert alert-info" role="alert">
-            <h4 class="alert-heading">操作指南</h4>
-            <p>1. 请准备一个 <strong>CSV</strong> 或 <strong>Excel (.xlsx)</strong> 文件。</p>
-            <p>2. 文件中必须包含两列，列名分别为 <code>sequence</code> 和 <code>smiles</code>。</p>
-            <p>3. 上传文件后，系统会进行预测，并生成一个包含预测结果的新文件供您下载。</p>
-        </div>
-
         <div class="card shadow-sm">
             <div class="card-body">
-                <form id="prediction-form" enctype="multipart/form-data">
+                <h5 class="card-title">1. 准备您的文件</h5>
+                <p class="card-text">请准备一个 <code>.csv</code> 或 <code>.xlsx</code> 文件。文件必须包含两列，列名分别为 <code>protein_sequence</code> 和 <code>substrate_smiles</code>。</p>
+                <a href="#" id="download-template" class="btn btn-secondary btn-sm">下载CSV模板</a>
+                <hr>
+
+                <form id="prediction-form">
+                    <h5 class="card-title mt-4">2. 上传文件并开始预测</h5>
                     <div class="mb-3">
-                        <label for="data-file" class="form-label">选择数据文件</label>
-                        <input class="form-control" type="file" id="data-file" name="file" accept=".csv, .xlsx" required>
+                        <label for="data-file" class="form-label">选择文件</label>
+                        <input class="form-control" type="file" id="data-file" accept=".csv, .xlsx" required>
                     </div>
                     <div class="form-check mb-3">
                         <input type="checkbox" class="form-check-input" id="consent-checkbox" required>
@@ -46,13 +45,10 @@
             </div>
         </div>
 
-        <div id="status-area" class="mt-4">
-            <div id="error-alert" class="alert alert-danger d-none" role="alert"></div>
-            <div id="success-alert" class="alert alert-success d-none text-center" role="alert">
-                <h4>处理完成！</h4>
-                <p>您的结果文件已准备好，点击下方按钮下载。</p>
-                <a id="download-btn" class="btn btn-success btn-lg">下载结果文件</a>
-            </div>
+        <div id="error-alert" class="alert alert-danger mt-4 d-none" role="alert"></div>
+
+        <div id="results-area" class="alert alert-success mt-4 d-none" role="alert">
+            <strong>预测完成！</strong> 您的结果文件已开始自动下载。如果下载未开始，请检查浏览器是否阻止了弹出窗口。
         </div>
     </div>