Update templates/index.html

templates/index.html

@@ -3,15 +3,18 @@
 
 <main class="main-wrap">
   <section class="card">
+
+    <!-- Tabs -->
     <div class="tabs">
       <button id="tab-seq" class="tab active">Single Sequence</button>
       <button id="tab-fasta" class="tab">Multiple Sequences</button>
     </div>
 
-    <!-- Single sequence panel -->
+    <!--  SINGLE SEQUENCE  -->
     <div id="panel-seq" class="panel">
       <label class="label">Protein Sequence</label>
       <textarea id="sequenceInput" placeholder="Paste protein sequence"></textarea>
+
       <div class="row">
         <button id="predictBtn" class="btn">Predict Localization</button>
         <div id="loadingSeq" class="loading hidden">Running prediction…</div>
@@ -39,10 +42,11 @@
       </div>
     </div>
 
-    <!-- FASTA panel -->
+    <!--  FASTA  -->
     <div id="panel-fasta" class="panel hidden">
       <label class="label">Upload FASTA file</label>
       <input id="fastaFile" type="file" accept=".fa,.fasta" />
+
       <div class="row">
         <button id="predictFastaBtn" class="btn">Predict from FASTA</button>
         <div id="loadingFasta" class="loading hidden">Running batch prediction…</div>
@@ -50,7 +54,8 @@
 
       <div id="fastaResultsWrapper" class="fasta-wrapper hidden">
         <h3>FASTA Predictions</h3>
-        <p class="small-text">  Refer to the row for probabilities of the sequence.</p>
+        <p class="small-text">Click a row to view class probabilities.</p>
+
         <div class="table-container">
           <table class="results-table">
             <thead>
@@ -65,12 +70,24 @@
             <tbody id="fastaTableBody"></tbody>
           </table>
         </div>
+
+        <!-- DOWNLOAD BUTTON -->
+        <button
+          id="downloadCsvBtn"
+          type="button"
+          class="btn"
+          style="margin-top: 1rem;"
+        >
+          Download CSV
+        </button>
       </div>
     </div>
+
   </section>
 </main>
 
-<!-- FASTA detail modal (NO graphs, only details) -->
+<!--  FASTA DETAIL MODAL  -->
+
 <div id="fastaModal" class="modal hidden">
   <div class="modal-backdrop" id="fastaModalBackdrop"></div>
   <div class="modal-content">
@@ -85,7 +102,8 @@
   </div>
 </div>
 
-<!-- BIG BAR CHART MODAL -->
+<!--  BIG BAR CHART MODAL  -->
+
 <div id="bigBarModal" class="chart-modal hidden">
   <div class="chart-modal-content">
     <span class="close-big-chart" onclick="closeBigBar()">&times;</span>
@@ -93,7 +111,7 @@
   </div>
 </div>
 
-<!-- BIG RADAR CHART MODAL -->
+<!--  BIG RADAR CHART MODAL  -->
 <div id="bigRadarModal" class="chart-modal hidden">
   <div class="chart-modal-content">
     <span class="close-big-chart" onclick="closeBigRadar()">&times;</span>