Modularized app.py

app.py

@@ -1,73 +1,86 @@
+"""
+SERAPH Playground — Gradio app entry point.
+
+Run with: python app.py
+"""
 import gradio as gr
-import spaces
-import torch
-import torch.nn as nn
-from huggingface_hub import hf_hub_download
-from transformers import EsmModel, EsmTokenizer
 
-HF_REPO_ID   = "PypCoder/SERAPH"
-WEIGHTS_FILE = "SERAPH.pth"
-ESM_MODEL_ID = "facebook/esm2_t6_8M_UR50D"
-IDX_TO_LABEL = {0: 'H', 1: 'E', 2: 'C'}
+from config import PORTFOLIO_URL
+from dataset import PROTEIN_DATASET
+from html_builder import build_result_html
+from inference import predict_structure, on_preset_change
+from styles import CUSTOM_CSS
+
+with gr.Blocks(css=CUSTOM_CSS, title="SERAPH — Protein Playground") as demo:
+
+    # Top Branding Navigation Bar (back button + title + status)
+    gr.HTML(f"""
+    <div style='display: flex; justify-content: space-between; align-items: center; padding: 12px 0; margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.08);'>
+        <a href="{PORTFOLIO_URL}" target="_top" class="back-to-portfolio">
+            &larr; Back to Portfolio
+        </a>
+        <div style='font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.1rem; color: #f5f5f7;'>
+            SERAPH <span style='font-size: 0.75rem; font-family: "JetBrains Mono"; color: #8e8e93; font-weight: 400; margin-left: 8px;'>v1.0 • ESM-2 + BiLSTM</span>
+        </div>
+        <div style='font-family: "JetBrains Mono", monospace; font-size: 0.72rem; padding: 4px 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 99px; color: #8e8e93;'>
+            🟢 Model Live
+        </div>
+    </div>
+    """)
+
+    gr.HTML("""
+    <h1 class="hero-title">SERAPH Playground</h1>
+    <p class="hero-subtitle">Predict 3-state protein secondary structure (Alpha Helix, Beta Sheet, Coil) using fine-tuned ESM-2 protein language embeddings.</p>
+    """)
 
-class SERAPH(nn.Module):
-    def __init__(self, esm_model, conv_channels=256, kernel_size=7,
-                 lstm_hidden=256, num_classes=3, dropout=0.3, freeze_esm=True):
-        super().__init__()
-        self.esm = esm_model
-        if freeze_esm:
-            for param in self.esm.encoder.layer[:-2].parameters():
-                param.requires_grad = False
-        esm_embed_dim = self.esm.config.hidden_size
-        self.conv    = nn.Conv1d(esm_embed_dim, conv_channels, kernel_size=kernel_size, padding=kernel_size//2)
-        self.bn      = nn.BatchNorm1d(conv_channels)
-        self.dropout = nn.Dropout(dropout)
-        self.bilstm  = nn.LSTM(conv_channels, lstm_hidden, num_layers=2, batch_first=True, bidirectional=True)
-        self.fc      = nn.Linear(lstm_hidden * 2, num_classes)
+    with gr.Row():
+        preset_dropdown = gr.Dropdown(
+            choices=["-- Select a Preloaded Protein Preset (50 Available) --"] + [p["name"] for p in PROTEIN_DATASET],
+            value="01. Human Myoglobin (Oxygen Storage)",
+            label="SELECT FROM 50 PRELOADED PROTEIN STRUCTURES",
+            interactive=True
+        )
 
-    def forward(self, input_ids, attention_mask=None):
-        x = self.esm(input_ids=input_ids, attention_mask=attention_mask).last_hidden_state
-        x = x.transpose(1, 2)
-        x = torch.relu(self.bn(self.conv(x)))
-        x = self.dropout(x)
-        x = x.transpose(1, 2)
-        x, _ = self.bilstm(x)
-        x = self.dropout(x)
-        return self.fc(x)
+    with gr.Row():
+        sequence_input = gr.Textbox(
+            value=PROTEIN_DATASET[0]["sequence"],
+            label="AMINO ACID SEQUENCE (FASTA / IUPAC)",
+            lines=3,
+            placeholder="Type or paste amino acid sequence..."
+        )
 
-print("Loading ESM2 backbone...")
-esm = EsmModel.from_pretrained(ESM_MODEL_ID)
-tokenizer = EsmTokenizer.from_pretrained(ESM_MODEL_ID)
+    with gr.Row():
+        predict_btn = gr.Button("Run SERAPH Prediction ⚡", elem_classes=["btn-magnetic"])
 
-print("Downloading SERAPH weights...")
-weights_path = hf_hub_download(repo_id=HF_REPO_ID, filename=WEIGHTS_FILE)
-checkpoint = torch.load(weights_path, map_location="cpu")
+    output_html = gr.HTML(
+        value=build_result_html(
+            PROTEIN_DATASET[0]["sequence"],
+            "C" * len(PROTEIN_DATASET[0]["sequence"]),  # placeholder before click
+            PROTEIN_DATASET[0]["true_ss"],
+            None,
+            PROTEIN_DATASET[0]["description"],
+            PROTEIN_DATASET[0]["fun_fact"]
+        )
+    )
 
-model = SERAPH(esm_model=esm)
-model.load_state_dict(checkpoint["model_state_dict"])
-model.eval()
-print("SERAPH ready.")
+    # Event Handlers
+    preset_dropdown.change(
+        fn=on_preset_change,
+        inputs=[preset_dropdown],
+        outputs=[sequence_input]
+    )
 
-@spaces.GPU
-def predict(sequence: str) -> dict:
-    sequence = sequence.upper().strip()
-    tokens = tokenizer(sequence, return_tensors="pt", truncation=True, max_length=512)
-    with torch.no_grad():
-        output = model(input_ids=tokens["input_ids"], attention_mask=tokens["attention_mask"])
-        preds = output.argmax(dim=-1)[0]
-    labels = [IDX_TO_LABEL[p.item()] for p in preds[1:-1]]
-    return {
-        "sequence": sequence,
-        "prediction": "".join(labels),
-        "length": len(sequence),
-        "composition": {"H": labels.count("H"), "E": labels.count("E"), "C": labels.count("C")},
-    }
+    predict_btn.click(
+        fn=predict_structure,
+        inputs=[sequence_input, preset_dropdown],
+        outputs=[output_html, gr.State(), gr.State()]
+    )
 
-demo = gr.Interface(
-    fn=predict,
-    inputs=gr.Textbox(label="Amino Acid Sequence"),
-    outputs=gr.JSON(label="SERAPH Prediction"),
-    title="SERAPH — Protein Secondary Structure Prediction",
-)
+    gr.HTML("""
+    <div style='border-top: 1px solid rgba(255,255,255,0.08); margin-top: 40px; padding-top: 20px; text-align: center; font-size: 0.8rem; color: #55555a; font-family: "Plus Jakarta Sans";'>
+        Built with PyTorch &amp; Hugging Face Spaces
+    </div>
+    """)
 
-demo.launch()
+if __name__ == "__main__":
+    demo.launch()