Update templates/index.html

templates/index.html

@@ -55,7 +55,7 @@
                     <h2 class="text-xl font-semibold mb-4 text-teal-300"><i class="fas fa-database mr-2"></i> 1. Dataset & Organism</h2>
                     
                     <div class="mb-4">
-                        <label class="block text-sm text-gray-300 font-bold mb-2">Organism (Crucial for MT/mt filtering and Cell Cycle)</label>
+                        <label class="block text-sm text-gray-300 font-bold mb-2">Organism</label>
                         <select name="organism" class="w-full md:w-1/4 bg-gray-700 border border-gray-600 rounded px-3 py-2 text-sm text-gray-200 focus:border-teal-500">
                             <option value="human">Human (Homo sapiens)</option>
                             <option value="mouse">Mouse (Mus musculus)</option>
@@ -244,17 +244,73 @@
         </div>
 
         <div id="contentSpatial" class="hidden">
-            <div class="bg-gray-800 p-8 rounded-xl shadow-lg border border-gray-700 text-center">
-                <i class="fas fa-brain text-6xl text-purple-400 mb-4"></i>
-                <h2 class="text-2xl font-bold text-gray-100 mb-2">Visium Adult Mouse Brain Spatial Transcriptomics</h2>
-                <p class="text-gray-400 mb-8 max-w-2xl mx-auto">This module downloads and processes the 10x Genomics Visium dataset for the Adult Mouse Brain. It automatically performs QC, normalization, spatial domain clustering (via Delaunay triangulation & Leiden), and identifies spatially variable genes.</p>
-                
-                <form id="spatialForm">
-                    <button type="submit" class="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white font-bold py-4 px-10 rounded-xl shadow-lg transform transition hover:scale-[1.02] text-xl">
-                        <i class="fas fa-rocket mr-2"></i> Run Spatial Pipeline
-                    </button>
-                </form>
-            </div>
+            <form id="spatialForm" class="space-y-6">
+                <div class="bg-gray-800 p-6 rounded-xl shadow-lg border border-gray-700">
+                    <h2 class="text-xl font-semibold mb-4 text-purple-400"><i class="fas fa-map-marked-alt mr-2"></i> 1. Spatial Dataset & Organism</h2>
+                    
+                    <div class="mb-4">
+                        <label class="block text-sm text-gray-300 font-bold mb-2">Organism</label>
+                        <select name="spatial_organism" class="w-full md:w-1/4 bg-gray-700 border border-gray-600 rounded px-3 py-2 text-sm text-gray-200 focus:border-purple-500">
+                            <option value="mouse">Mouse (Mus musculus)</option>
+                            <option value="human">Human (Homo sapiens)</option>
+                        </select>
+                    </div>
+
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-4">
+                        <label class="flex items-center space-x-2 p-3 border border-gray-600 rounded cursor-pointer hover:bg-gray-700 transition">
+                            <input type="radio" name="spatial_dataset" value="visium_mouse" class="form-radio text-purple-500 h-4 w-4" checked required>
+                            <span class="text-gray-200 text-sm">10x Visium Adult Mouse Brain (Default)</span>
+                        </label>
+                        <label class="flex items-center space-x-2 p-3 border border-purple-600 rounded cursor-pointer bg-purple-900 bg-opacity-20 hover:bg-opacity-40 transition">
+                            <input type="radio" name="spatial_dataset" value="custom" id="spatialCustomRadio" class="form-radio text-purple-500 h-4 w-4">
+                            <span class="text-purple-300 text-sm font-bold">Custom .h5ad Upload (Requires obsm['spatial'])</span>
+                        </label>
+                    </div>
+                    <input type="file" name="spatial_custom_file" id="spatialCustomFile" accept=".h5ad" class="hidden w-full text-sm text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:bg-purple-600 file:text-white hover:file:bg-purple-700"/>
+                </div>
+
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div class="bg-gray-800 p-5 rounded-xl shadow-lg border border-gray-700">
+                        <h2 class="text-lg font-semibold mb-3 text-teal-300"><i class="fas fa-filter mr-2"></i> Quality Control</h2>
+                        <label class="block text-xs text-gray-400 mb-1">Min Counts per Spot</label>
+                        <input type="number" name="spatial_min_counts" value="500" class="w-full bg-gray-700 border border-gray-600 rounded px-2 py-1 mb-3 text-sm focus:border-teal-500">
+                        
+                        <label class="block text-xs text-gray-400 mb-1">Max Mito %</label>
+                        <input type="number" step="0.1" name="spatial_max_mito" value="20.0" class="w-full bg-gray-700 border border-gray-600 rounded px-2 py-1 mb-3 text-sm focus:border-teal-500">
+
+                        <label class="block text-xs text-gray-400 mb-1">Highly Variable Genes (n_top_genes)</label>
+                        <input type="number" name="spatial_n_hvg" value="2000" class="w-full bg-gray-700 border border-gray-600 rounded px-2 py-1 text-sm focus:border-teal-500">
+                    </div>
+
+                    <div class="bg-gray-800 p-5 rounded-xl shadow-lg border border-gray-700">
+                        <h2 class="text-lg font-semibold mb-3 text-yellow-300"><i class="fas fa-project-diagram mr-2"></i> DimRed & Clusters</h2>
+                        <label class="block text-xs text-gray-400 mb-1">PCA Comps & Neighbors (K)</label>
+                        <div class="flex space-x-2 mb-3">
+                            <input type="number" name="spatial_n_pcs" value="50" class="w-1/2 bg-gray-700 border border-gray-600 rounded px-2 py-1 text-sm focus:border-yellow-500">
+                            <input type="number" name="spatial_n_neighbors" value="15" class="w-1/2 bg-gray-700 border border-gray-600 rounded px-2 py-1 text-sm focus:border-yellow-500">
+                        </div>
+
+                        <label class="block text-xs text-gray-400 mb-1">Leiden Resolution</label>
+                        <input type="number" step="0.1" name="spatial_resolution" value="0.8" class="w-full bg-gray-700 border border-gray-600 rounded px-2 py-1 text-sm focus:border-yellow-500">
+                    </div>
+
+                    <div class="bg-gray-800 p-5 rounded-xl shadow-lg border border-gray-700">
+                        <h2 class="text-lg font-semibold mb-3 text-pink-300"><i class="fas fa-layer-group mr-2"></i> Spatial Analytics</h2>
+                        <label class="block text-xs text-gray-400 mb-1">Spatial Domains (K)</label>
+                        <input type="number" name="spatial_clusters" value="7" class="w-full bg-gray-700 border border-gray-600 rounded px-2 py-1 mb-3 text-sm focus:border-pink-500">
+                        
+                        <label class="block text-xs text-gray-400 mb-1">Spatial Smoothing Weight (0.0 to 1.0)</label>
+                        <input type="number" step="0.1" name="spatial_weight" value="0.5" class="w-full bg-gray-700 border border-gray-600 rounded px-2 py-1 mb-3 text-sm focus:border-pink-500">
+                        
+                        <label class="block text-xs text-gray-400 mb-1">Top Spatial Variable Genes</label>
+                        <input type="number" name="spatial_n_svg" value="50" class="w-full bg-gray-700 border border-gray-600 rounded px-2 py-1 text-sm focus:border-pink-500">
+                    </div>
+                </div>
+
+                <button type="submit" class="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white font-bold py-4 rounded-xl shadow-lg transform transition hover:scale-[1.01] text-xl">
+                    <i class="fas fa-rocket mr-2"></i> Execute Spatial Analysis
+                </button>
+            </form>
         </div>
 
         <div id="statusArea" class="hidden mt-10 bg-gray-800 p-8 rounded-xl shadow-lg border border-gray-700">
@@ -308,6 +364,13 @@
             el.addEventListener('change', () => document.getElementById('customFile').classList.add('hidden'));
         });
 
+        document.getElementById('spatialCustomRadio').addEventListener('change', function() {
+            document.getElementById('spatialCustomFile').classList.remove('hidden');
+        });
+        document.querySelectorAll('input[name="spatial_dataset"]:not(#spatialCustomRadio)').forEach(el => {
+            el.addEventListener('change', () => document.getElementById('spatialCustomFile').classList.add('hidden'));
+        });
+
         function handleSubmission(e, url) {
             e.preventDefault();