Revert "Apply HelixDB-inspired visual theme"

This reverts commit 0d03f0063edfa82e9eaf8eb5332ff97e86241ae4.

app.py

@@ -55,150 +55,6 @@ BATCH_SHAP_CACHE = {}
 MODEL_FILENAME = "pairwise_onehot_model_20260105_200141.pt"
 MODEL_REPO_ID = os.getenv("MIRBIND2_MODEL_REPO", "dimostzim/mirbind2-weights")
 
-# ============================================================================
-# HELIX-INSPIRED THEME & CSS
-# ============================================================================
-
-HELIX_THEME = gr.themes.Base(
-    primary_hue="amber",
-    neutral_hue="stone",
-    font=[gr.themes.GoogleFont("Geist"), "ui-sans-serif", "system-ui", "sans-serif"],
-    font_mono=["ui-monospace", "monospace"],
-)
-
-HELIX_CSS = """
-@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');
-
-/* ── Base: golden background with grid ───────────────────────────── */
-body, .gradio-container {
-    background-color: #FBAF2F;
-    background-image:
-        linear-gradient(rgba(0,0,0,0.06) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(0,0,0,0.06) 1px, transparent 1px);
-    background-size: 40px 40px;
-}
-.gradio-container {
-    background-color: transparent !important;
-    max-width: 1200px !important;
-}
-
-/* ── Typography ──────────────────────────────────────────────────── */
-.prose h1 {
-    font-family: 'Playfair Display', serif !important;
-    color: #1a1200 !important;
-    font-size: 2rem !important;
-    font-weight: 700 !important;
-    letter-spacing: -0.01em !important;
-}
-.prose h2, .prose h3 {
-    font-family: 'Playfair Display', serif !important;
-    color: #1a1200 !important;
-}
-.prose p, .prose li, .prose strong, .prose em, .prose a {
-    color: #1a1200 !important;
-}
-.prose a { text-decoration: underline !important; }
-
-/* Labels – uppercase tracked */
-label span, .label-wrap span {
-    text-transform: uppercase !important;
-    letter-spacing: 0.07em !important;
-    font-size: 0.68rem !important;
-    font-weight: 700 !important;
-    color: #1a1200 !important;
-}
-
-/* ── Panels & Blocks ─────────────────────────────────────────────── */
-.block.padded, .panel {
-    background-color: rgba(255, 252, 235, 0.93) !important;
-    border: 1px solid rgba(26, 18, 0, 0.18) !important;
-    border-radius: 2px !important;
-}
-
-/* ── Tabs ────────────────────────────────────────────────────────── */
-.tab-nav {
-    border-bottom: 2px solid #1a1200 !important;
-    background: transparent !important;
-}
-.tab-nav button {
-    font-size: 0.68rem !important;
-    text-transform: uppercase !important;
-    letter-spacing: 0.1em !important;
-    font-weight: 700 !important;
-    color: #1a1200 !important;
-    border-radius: 0 !important;
-    background: rgba(255, 252, 235, 0.7) !important;
-    border: none !important;
-}
-.tab-nav button.selected {
-    background-color: #1a1200 !important;
-    color: #FBAF2F !important;
-}
-
-/* ── Buttons ─────────────────────────────────────────────────────── */
-button.primary {
-    background-color: #1a1200 !important;
-    color: #FBAF2F !important;
-    border: 2px solid #1a1200 !important;
-    border-radius: 2px !important;
-    text-transform: uppercase !important;
-    letter-spacing: 0.08em !important;
-    font-weight: 700 !important;
-    transition: background-color 0.15s, color 0.15s !important;
-}
-button.primary:hover {
-    background-color: #FBAF2F !important;
-    color: #1a1200 !important;
-}
-button.secondary {
-    background-color: transparent !important;
-    color: #1a1200 !important;
-    border: 2px solid #1a1200 !important;
-    border-radius: 2px !important;
-    text-transform: uppercase !important;
-    letter-spacing: 0.08em !important;
-    font-weight: 700 !important;
-}
-
-/* ── Inputs ──────────────────────────────────────────────────────── */
-textarea, input[type="text"], input[type="search"] {
-    background-color: #ffffff !important;
-    border: 1px solid rgba(26, 18, 0, 0.25) !important;
-    border-radius: 2px !important;
-    color: #1a1200 !important;
-}
-textarea:focus, input:focus {
-    border-color: #1a1200 !important;
-    box-shadow: 0 0 0 2px rgba(26, 18, 0, 0.12) !important;
-    outline: none !important;
-}
-
-/* ── Checkbox ────────────────────────────────────────────────────── */
-input[type="checkbox"] { accent-color: #1a1200 !important; }
-
-/* ── Dataframe ───────────────────────────────────────────────────── */
-.dataframe th {
-    background-color: #1a1200 !important;
-    color: #FBAF2F !important;
-    text-transform: uppercase !important;
-    letter-spacing: 0.06em !important;
-    font-size: 0.68rem !important;
-    font-weight: 700 !important;
-    padding: 8px 12px !important;
-}
-.dataframe td {
-    color: #1a1200 !important;
-    font-size: 0.82rem !important;
-    border-bottom: 1px solid rgba(26, 18, 0, 0.1) !important;
-}
-.dataframe tr:hover td {
-    background-color: rgba(251, 175, 47, 0.25) !important;
-}
-
-/* ── Hide Gradio footer ──────────────────────────────────────────── */
-footer { display: none !important; }
-"""
-
 
 def resolve_model_path():
     """Resolve model path locally, or download from Hugging Face Hub if missing."""
@@ -1050,7 +906,7 @@ def process_uploaded_file(file, compute_shap):
 def create_gradio_interface():
     """Create the Gradio web interface with tabs."""
 
-    with gr.Blocks(title="miRBind2: miRNA-mRNA Binding Predictor", css=HELIX_CSS) as app:
+    with gr.Blocks(title="miRBind2: miRNA-mRNA Binding Predictor") as app:
         gr.Markdown("""
         # miRBind2: miRNA-mRNA Binding Site Predictor
 
@@ -1238,7 +1094,7 @@ def main():
         server_name="0.0.0.0",  # Required for containerized hosting (HF Spaces)
         server_port=7860,
         show_error=True,
-        theme=HELIX_THEME
+        theme=gr.themes.Soft()
     )