Added modular structure

config.py

@@ -0,0 +1,15 @@
+"""
+Configuration constants for the SERAPH protein secondary-structure
+prediction app.
+"""
+
+# Hugging Face model repo / weights
+HF_REPO_ID = "PypCoder/SERAPH"
+WEIGHTS_FILE = "SERAPH.pth"
+ESM_MODEL_ID = "facebook/esm2_t6_8M_UR50D"
+
+# Class index -> secondary structure label
+IDX_TO_LABEL = {0: 'H', 1: 'E', 2: 'C'}
+
+# Link for the "back to portfolio" button
+PORTFOLIO_URL = "https://muhammad-asad-ullah.vercel.app/"

dataset.py

@@ -0,0 +1,360 @@
+"""
+Static dataset of 50 preloaded protein structures used to populate the
+preset dropdown and to compute Q3 accuracy against known ground truth.
+"""
+
+PROTEIN_DATASET = [
+    {
+        "name": "01. Human Myoglobin (Oxygen Storage)",
+        "sequence": "GLSDGEWQLVLNVWGKVEADIPGHGQEVLIRLFKGHPETLEKFDKFKHLKSEDEMKASEDLKKHGATVLTALGGILKKKGHHEAEIKPLAQSHATKHKIPVKYLEFISECIIQVLQSKHPGDFGADAQGAMNKALELFRKDMASNYKELGFQG",
+        "true_ss": "CCCCCCCCCHHHHHHHHHHHHHHHCCCCCHHHHHHHHHHHHHHHHHHHHHCCCCCHHHHHHHHHHHHHHHCCCCCHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHCCCCCHHHHHHHHHHHHHHHHHHHHHHHHHHHCCCCCCCCCCC",
+        "description": "Primary oxygen-carrying protein in muscle tissues, composed predominantly of dense alpha-helices.",
+        "fun_fact": "Deep-diving whales store massive concentrations of myoglobin in their muscles, enabling them to stay submerged for over an hour without breathing!"
+    },
+    {
+        "name": "02. Ubiquitin (Cellular Degradation Tag)",
+        "sequence": "MQIFVKTLTGKTITLEVEPSDTIENVKAKIQDKEGIPPDQQRLIFAGKQLEDGRTLSDYNIQKESTLHLVLRLRGG",
+        "true_ss": "CCEEEEEEECCCEEEEEECCCCCHHHHHHHHCCCCCCCEEEEEEECCCCCEEEEEECCCCCHHHHHHHHHCCCCCC",
+        "description": "A highly conserved regulatory protein that marks other proteins for destruction by the proteasome.",
+        "fun_fact": "Ubiquitin got its name because it is truly 'ubiquitous'—present in virtually every eukaryotic cell from baker's yeast to humans!"
+    },
+    {
+        "name": "03. Hen Egg-White Lysozyme (Antimicrobial Enzyme)",
+        "sequence": "KVFGRCELAAAMKRHGLDNYRGYSLGNWVCAAKFESNFNTQATNRNTDGSTDYGILQINSRWWCNDGRTPGSRNLCNIPCSALLSSDITASVNCAKKIVSDGNGMNAWVAWRNRCKGTDVQAWIRGCRL",
+        "true_ss": "CCCHHHHHHHHHHHCCCCCCCCHHHHHHHHHHHCCCCEEEEEECCCCCCCHHHHHHHHHHHHCCCCCCCCCCCHHHHHHHHHHHHHHHHHHHHHCCCCCCEEEEEEEECCCHHHHHHHHHHHHHHHHHCC",
+        "description": "An antibacterial enzyme abundant in tears, saliva, and egg whites that hydrolyzes bacterial cell walls.",
+        "fun_fact": "Lysozyme was discovered by Alexander Fleming in 1921 when a drop of his nasal mucus accidentally fell into a bacterial culture dish!"
+    },
+    {
+        "name": "04. Human Insulin A-Chain (Hormone)",
+        "sequence": "GIVEQCCTSICSLYQLENYCN",
+        "true_ss": "CCCHHHHHHHHHHHHHHHCCC",
+        "description": "The smaller of the two peptide chains comprising insulin, linked by disulfide bridges.",
+        "fun_fact": "Insulin was the very first protein ever to have its complete amino acid sequence determined, earning Frederick Sanger the Nobel Prize in 1958."
+    },
+    {
+        "name": "05. Human Insulin B-Chain (Hormone)",
+        "sequence": "FVNQHLCGSHLVEALYLVCGERGFFYTPKT",
+        "true_ss": "CCCCCCCCHHHHHHHHHHHHCCCCEEEECC",
+        "description": "The longer 30-amino-acid chain of insulin that triggers glucose uptake in fat and muscle cells.",
+        "fun_fact": "Synthetic human insulin created via recombinant DNA in 1978 was the first ever genetically engineered human medicine."
+    },
+    {
+        "name": "06. Green Fluorescent Protein (GFP Core Segment)",
+        "sequence": "MSKGEELFTGVVPILVELDGDVNGHKFSVSGEGEGDATYGKLTLKFICTTGKLPVPWPTLVTTFSYGVQCFSRYPDHMKQHDFFKSAMPEGYVQERTIFFKDDGNYKTRAEVKFEGDTLVNRIELKGIDFKEDGNILGHKLEYNYNSHNVYIMADKQKNGIKVNFKIRHNIEDGSVQLADHYQQNTPIGDGPVLLPDNHYLSTQSALSKDPNEKRDHMVLLEFVTAAGITHGMDELYK",
+        "true_ss": "CCCCCCEEEEEEEEEEEECCCCCCEEEEEEEECCCCCCEEEEEEEEEEEECCCCEEEEEEEEEEEEEEECCCCCHHHHHHHHHHHHHHCCCCEEEEEEEEECCCEEEEEEEEECCCCEEEEEEEEEEEEECCCCCCEEEEEEEEEECCCCCCCEEEEEEEEEEEECCCCCCEEEEEEEEECCCCCCEEEEEEEEEEECCCCCHHHHHHHHHHHCCCEEEEEEEECCCCCC",
+        "description": "The bioluminescent protein from the jellyfish Aequorea victoria featuring a classic 11-stranded beta-barrel.",
+        "fun_fact": "GFP acts as a microscopic lantern—attaching it to other proteins allows scientists to watch living cells function in real time under blue light!"
+    },
+    {
+        "name": "07. Human Hemoglobin Alpha Chain",
+        "sequence": "VLSPADKTNVKAAWGKVGAHAGEYGAEALERMFLSFPTTKTYFPHFDLSHGSAQVKGHGKKVADALTNAVAHVDDMPNALSALSDLHAHKLRVDPVNFKLLSHCLLVTLAAHLPAEFTPAVHASLDKFLASVSTVLTSKYR",
+        "true_ss": "CCCCCCCHHHHHHHHHHHCCCCHHHHHHHHHHHHHHCCCCCHHHHHHHHHHHCHHHHHHHHHHHHHHHHHHHCCCCCHHHHHHHHHHHHHHHCCCHHHHHHHHHHHHHHHHHHHHCCCCCHHHHHHHHHHHHHHHHHHHHHH",
+        "description": "Subunit of the tetrameric hemoglobin protein responsible for transporting oxygen from lungs to tissues.",
+        "fun_fact": "A single human red blood cell contains approximately 270 million hemoglobin molecules!"
+    },
+    {
+        "name": "08. Cytochrome c (Mitochondrial Electron Carrier)",
+        "sequence": "MGDVEKGKKIFIMKCSQCHTVEKGGKHKTGPNLHGLFGRKTGQAPGYSYTAANKNKGIIWGEDTLMEYLENPKKYIPGTKMIFVGIKKKEERADLIAYLKKATNE",
+        "true_ss": "CCCCCCCCHHHHHHHHCCCCCCCCCCCCCCCHHHHHHHCCCCCCCCHHHHHHHCCCCCHHHHHHHHHHHHHCCCCCEEEEEEECCCCCHHHHHHHHHHHHHHCCC",
+        "description": "An essential component of the mitochondrial electron transport chain that triggers apoptosis when released into the cytosol.",
+        "fun_fact": "Cytochrome c is so evolutionarily conserved that human cytochrome c can react with enzyme extracts from baker's yeast!"
+    },
+    {
+        "name": "09. Bovine Ribonuclease A (RNA Cleavage Enzyme)",
+        "sequence": "KETAAAKFERQHMDSSTSAASSSNYCNQMMKSRNLTKDRCKPVNTFVHESLADVQAVCSQKNVACKNGQTNCYQSYSTMSITDCRETGSSKYPNCAYKTTQANKHIIVACEGNPYVPVHFDASV",
+        "true_ss": "CCCCHHHHHHHHHCCCCCCCHHHHHHHHHHCCCCEEECCCCCHHHHHHHHHHHHHHHCCCCEEEECCCCCEEEEEEEECCCCCCEEEECCCCCEEEEECCCCCEEEEEEEECCCCCCEEEEEE",
+        "description": "A pancreatic endonuclease model enzyme widely used in protein folding and refolding research.",
+        "fun_fact": "Ribonuclease A can withstand boiling water for short periods without permanently losing its enzymatic activity."
+    },
+    {
+        "name": "10. Streptavidin Core (Biotin Binding)",
+        "sequence": "EAGITGTWYNQLGSTFIVTAGADGALTGTYESAVGNAESRYVLTGRYDSAPATDGSGTALGWTVAWKNNYRNAHSATTWSGQYVGGAEARINTQWLLTSGTTEANAWKSTLVGHDTFTKVKPSAAS",
+        "true_ss": "CCCEEEEEEEEECCEEEEEEECCCEEEEEEEEECCCCEEEEEEEEECCCCEECCCCCCEEEEEEEEECCCEEEEEEEEECCCCEEEEEEEEECCCEEEEEEEEECCCEEEEEEECCCCCCCCCC",
+        "description": "A tetrameric protein from Streptomyces avidinii with extraordinary affinity for vitamin B7 (biotin).",
+        "fun_fact": "The bond between streptavidin and biotin is one of the strongest non-covalent interactions known in biological science!"
+    },
+    {
+        "name": "11. Alpha-Keratin Hair Fragment",
+        "sequence": "MSCNQSFTVRTCAPSNCSRPVCNIPANVCNIPANVCNIP",
+        "true_ss": "CCHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHCCCC",
+        "description": "Fibrous structural protein that makes up human hair, outer skin layers, and fingernails.",
+        "fun_fact": "The distinct smell of burning hair is caused by sulfur dioxide released when disulfide bonds in keratin are scorched!"
+    },
+    {
+        "name": "12. Human Collagen Type I Fragment",
+        "sequence": "PPGPPGPPGPPGPPGPPGPPGPPGPPGPPGPPGPPGPPG",
+        "true_ss": "CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC",
+        "description": "The main component of connective tissue, forming elongated triple-helical collagen fibrils.",
+        "fun_fact": "Gram for gram, type I collagen fibers in human tendons are stronger than structural steel!"
+    },
+    {
+        "name": "13. Aquaporin-1 Transmembrane Loop Segment",
+        "sequence": "FGLSVALAVLLALAVFGLSVALAVLLALAVFGLSVALAV",
+        "true_ss": "CHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHC",
+        "description": "Water channel membrane protein that selectively conducts water molecules in and out of cells.",
+        "fun_fact": "Aquaporin channels allow up to 3 billion water molecules to pass through in a single second while blocking protons!"
+    },
+    {
+        "name": "14. Zinc Finger Cys2His2 DNA Domain",
+        "sequence": "YKCPECGKSFSQKSDLVKHQRTHTGEKPYKCPECGKSFSQ",
+        "true_ss": "CCEEEEECCCHHHHHHHHHHHHCCCCCEEEEECCCHHHHH",
+        "description": "Small protein motif characterized by the coordination of one or more zinc ions to stabilize folds.",
+        "fun_fact": "Zinc finger proteins are the most abundant class of transcription factors found in the human genome!"
+    },
+    {
+        "name": "15. E. coli Thioredoxin (Redox Control Engine)",
+        "sequence": "SDKIIHLTDDSFDTDVLKADGAILVDFWAEWCGPCKMIAPILDEIADEYQGKLTVAKLNIDQNPGTAPKYGIRGIPTLLLFKNGEVAATKVGALSKGQLKEFLDANLA",
+        "true_ss": "CCEEEEEECCCCCCCHHHHCCCEEEEEEECCCCCHHHHHHHHHHHHHHHCCCCEEEEEECCCCCCCHHHHHCCCEEEEEECCCCEEEEEECCCHHHHHHHHHHHHHHC",
+        "description": "Essential antioxidant enzyme that facilitates the reduction of other proteins by cysteine-thiol exchange.",
+        "fun_fact": "Thioredoxin acts as an anti-aging cellular guardian by repairing oxidative damage to essential intracellular proteins."
+    },
+    {
+        "name": "16. Calmodulin (Calcium Sensor)",
+        "sequence": "MADQLTEEQIAEFKEAFSLFDKDGDGTITTKELGTVMRSLGQNPTEAELQDMINEVDADGNGTIDFPEFLTMMARKMKDTDSEEEIREAFRVFDKDGNGYISAAELRHVMTSLGEKLTDEEVDEMIREADIDGDGQVNYEEFVQMMTAK",
+        "true_ss": "CCHHHHHHHHHHHHHHHHHHCCCCCCCHHHHHHHHHHHHCCCCCHHHHHHHHHHHHCCCCCCCHHHHHHHHHHHHHHHCCCCCHHHHHHHHHHHHHHCCCCCCCHHHHHHHHHHHHCCCCCHHHHHHHHHHHHCCCCCCCHHHHHHHHC",
+        "description": "Calcium-modulated protein that transduces calcium signals upon binding to second messenger Ca2+ ions.",
+        "fun_fact": "Calmodulin undergoes a dramatic physical shape change upon binding calcium—wrapping around target enzymes like a flexible dumbbell!"
+    },
+    {
+        "name": "17. Bacteriophage T4 Lysozyme",
+        "sequence": "MNIFEMLRIDEGLRLKIYKDTEGYYTIGIGHLLTKSPSLNAAKSELDKAIGRNTNGVITKDEAEKLFNQDVDAAVRGILRNAKLKPVYDSLDAVRRAALINMVFQMGETGVAGFTNSLRMLQQKRWDEAAVNLAKSRWYNQTPNRAKRVITTFRTGTWDAYK",
+        "true_ss": "CCHHHHHHHHCCEEEEEEECCCEEEEEEECCCCHHHHHHHHHHHHHHHHHHHCCCCCCCCHHHHHHHHHHHHHHHHHHHHHHHCCCCCHHHHHHHHHHHHHHHHHCCCCCCCHHHHHHHHHHHHHHHHHHCCCCHHHHHCCCCCCCEEEEEEECCCCCC",
+        "description": "Lytic enzyme used by bacteriophage T4 to puncture bacterial walls during viral invasion.",
+        "fun_fact": "T4 lysozyme is one of the most thoroughly engineered proteins in history, with over 1,000 mutant variants created to study protein stability."
+    },
+    {
+        "name": "18. Triosephosphate Isomerase (TIM Barrel Prototype)",
+        "sequence": "APRKFFVGGNWKMNGDKKSLGELIHTLNGAKLSADTEVVCGAPSIYLDFARQKLDAKIGVAAQNCYKVPKGAFTGEISPAMIKDIGAAWVILGHSERRHVFGESDELIGQKVAHALAEGLGVIACIGEKLDEREAGITEKVVFEQTKVIADNVKDWSKVVLAYEPVWAIGTGKTATPQQAQEVHEKLRGWLKSNVSDAVAQSTRIIYGGSVTGATCKELASQPDVDGFLVGGASLKPEFVDIINAKQ",
+        "true_ss": "CCCEEEEECCCHHHHHHHHCCCCEEEEEECCCHHHHHHHCCCEEEEEECCCHHHHHHHHHHHCCCCCEEEEECCCCCHHHHHHHHHHHCEEEEECCCCCCCHHHHHHHHHHHHHHHCCCEEEEEECCCCCCCHHHHHHHHHHHHHCCCEEEEEEECCCCCHHHHHHHHHHHCCCEEEEEECCCCCCCHHHHHHHHHHHHHHCCCCEEEEEECCCCCHHHHHHHHHHHCCCEEEEEEECCCCCHHHH",
+        "description": "Enzyme in glycolysis featuring the famous (alpha/beta)8 TIM barrel fold motif.",
+        "fun_fact": "TIM isomerase is a 'catalytically perfect' enzyme—it accelerates reactions so fast that every single collision between enzyme and substrate results in a reaction!"
+    },
+    {
+        "name": "19. Concanavalin A (Lectin Beta-Sheet Sandwich)",
+        "sequence": "ADTIVAVELDTYPNTDIGDPSYPHIGIDIKSVRSKKTAKWNMQNGKVGTAHIIYNSVDKRLSAVVSYPNADATSVSYDVDLNDVLPEWVRVGLSASTGLYKETNTILSWSFTSKLKSNSTHETNALHFMFNQFSKDQKDLILQGDATTGTDGNLELTRVSSNGSPQGSSVGRALFYAPVHIWESSAVVASFDATFTFLIKSPDSHPADGIAFFISNIDSSIPSGSTGRLLGLFPDAN",
+        "true_ss": "CCEEEEEEEECCCCCCEECCCCEEEEEEEEEECCEEEEEEEECCCCCEEEEEEEEECCCEEEEEEEEECCCCEEEEEEEECCCCEEEEEEEECCCCEEEEEEEECCCCEEEEEEEECCCCEEEEEEEECCCCEEEEEEEECCCCEEEEEEEECCCCEEEEEEEECCCCEEEEEEEECCCCEEEEEEEECCCCEEEEEEEECCCCEEEEEEEECCCCEEEEEEEECCCCEEEEEEEECCC",
+        "description": "Carbohydrate-binding lectin plant protein isolated from jack beans.",
+        "fun_fact": "Concanavalin A was the first plant lectin to be purified and crystallized on a large commercial scale."
+    },
+    {
+        "name": "20. Human Cytochrome P450 3A4 Segment",
+        "sequence": "MALIPDLAMETWLLLAVSLVLLYLYGTHSHGLFKKLGIPGPTPLPFLGNILSYHKGFCMFDMECHKKYGKVWGFYDGRQPVLAITDPDMVKTVLVKECYSFTNRRPFGPVGFMKSAISIAEDEEWKRLRSLLSPTFTSGKLKEMVPIIAQYGDVLVRNLRREAETGKPVTLKDVFGAYSMDVITSTSFGVNIDSLNNPQDPFVENTKKLLRFDFLDPFFLSITVFPFLIPILEVLNICVFPREVTNFLRKSVKRMKESRLEDTQKHRVDFLQLMIDNSNSKETESHKALSDLELVAQSIIFIFAGYETTSSVLSFIMYELATHPDVQQKLQEEIDAVLPNKAPPTYDTVLQMEYLDMVVNETLRLFPVAMRLERVCKKDVEINGMFIPKGVVVMIPSYALHRDPKYWTEPEKFLPERFSKKNKDNIDPYIYTPFGSGPRNCIGMRFALMNMKLALIRVLQNFSFKPCKETQIPLKLSLGGLLQPEKPVVLKVESRDGTVSGA",
+        "true_ss": "CCHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHCCCCCCCCHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHCCCCHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHC",
+        "description": "The primary hepatic enzyme responsible for metabolizing over 50% of all prescribed clinical drugs.",
+        "fun_fact": "Grapefruit juice inhibits Cytochrome P450 3A4, which can dangerously increase drug concentrations in the bloodstream!"
+    },
+    {
+        "name": "21. Bovine Pancreatic Trypsin Inhibitor (BPTI)",
+        "sequence": "RPDFCLEPPYTGPCKARIIRYFYNAKAGLCQTFVYGGCRAKRNNFKSAEDCMRTCGGA",
+        "true_ss": "CCCEEEECCCCCCCEEEEEEEEEEECCCCCEEEEEEEEEEECCCCCHHHHHHHHHCCC",
+        "description": "Small globular protein studied extensively as a canonical benchmark model for computational protein folding.",
+        "fun_fact": "BPTI binds to trypsin so tightly that it takes over 100 years for half of the bound molecules to spontaneously dissociate!"
+    },
+    {
+        "name": "22. Crambin (Plant Seed Hydrophobic Protein)",
+        "sequence": "TTCCPSIVARSNFNVCRLPGTPEAICATYTGCIIIPGATCPGDYAN",
+        "true_ss": "CCCHHHHHHHHHHCCCCEEEECCCCEEEECCCCCCCCCCCCCCCCC",
+        "description": "A small 46-residue plant seed protein famous for yielding ultra-high-resolution X-ray diffraction patterns.",
+        "fun_fact": "Crambin crystals diffract X-rays so cleanly that scientists determined the positions of individual hydrogen atoms in 1980!"
+    },
+    {
+        "name": "23. Alpha-Conotoxin (Cone Snail Venom Peptide)",
+        "sequence": "GCCSNPACMVNNPQIC",
+        "true_ss": "CCCCCHHHHHHCCCCC",
+        "description": "Neurotoxic disulfide-rich peptide produced by predatory marine cone snails to paralyze fish.",
+        "fun_fact": "Cone snail venom contains hundreds of unique conotoxins—some are currently used as non-opioid chronic pain killers!"
+    },
+    {
+        "name": "24. Bacillus amyloliquefaciens Barnase",
+        "sequence": "AQVINTFDGVADYLQTYHKLPDNYITKSEAQALGWVASKGNLADVAPGKSIGGDIFSNREGKLPGKSGRTWREADINYTSGFRNSDRILYSSDWLIYKTTDHYQTFTKIR",
+        "true_ss": "CCCEEEEECCCCCHHHHHHHHHCCCCEEEEEECCCEEEEEECCCCEEEEEECCCCEEEEEEEECCCCEEEEEEEECCCCEEEEEEECCCCCCCEEEEEEECCCEEEEEEEC",
+        "description": "Bacterial ribonuclease secreted by Bacillus amyloliquefaciens that is lethal to host cells without its inhibitor.",
+        "fun_fact": "Barnase is so lethal to bacteria that it can only be cloned inside cells that simultaneously synthesize its protective inhibitor, Barstar!"
+    },
+    {
+        "name": "25. Barstar (Barnase Ribonuclease Inhibitor)",
+        "sequence": "KKAVINGEQIRSISDLHQTLKKELALPEYYGENLDALWDCLTGWVEYPLVLEWRQFEQSKQLTENGAESVLQVFREAKAEGCDITIILS",
+        "true_ss": "CCEEEECCCHHHHHHHHHHHHHHHCCCCCHHHHHHHHHHHHHHHHHCCCCCHHHHHHHHHHHHHCCCCCCCEEEEEEECCCCCEEEEEEC",
+        "description": "Intracellular inhibitor protein produced to shield the host bacterium from internal barnase toxicity.",
+        "fun_fact": "The Barnase-Barstar complex is one of the tightest diffusion-controlled protein-protein interactions found in nature."
+    },
+    {
+        "name": "26. Chymotrypsin Inhibitor 2 (CI-2)",
+        "sequence": "KTEWPELVGKSVEEAKKVILQDKPEAQIIVLPVGTIVTMEYRIDRVRLFVDKLDNIAEVPRVG",
+        "true_ss": "CCCCCCCCCHHHHHHHHHHHHHCCCCEEEEEEECCCEEEEEEECCCCEEEEEEECCCEEEEEC",
+        "description": "Serine protease inhibitor from barley seeds widely utilized in biophysical nucleation-condensation folding studies.",
+        "fun_fact": "CI-2 folds via a simple two-state mechanism without any intermediate states, making it a favorite for folding simulations."
+    },
+    {
+        "name": "27. Green Tea Polyphenol Oxidase Fragment",
+        "sequence": "MDFLKKVAVIGAGVSGLISAYEMLKQEGHDVTVFEA",
+        "true_ss": "CCHHHHHCCCEEEEEEEEEEHHHHHHCCCCEEEEEE",
+        "description": "Copper-containing enzyme in tea leaves responsible for enzymatic browning during green-to-black tea oxidation.",
+        "fun_fact": "Heating green tea leaves (steaming or pan-firing) deactivates polyphenol oxidase, locking in green color and fresh taste!"
+    },
+    {
+        "name": "28. Spider Silk Spidroin N-Terminal Domain",
+        "sequence": "MSNTLALRGGFAATSQADANLASSISTASNSAASASTA",
+        "true_ss": "CCHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHCCC",
+        "description": "Control domain regulating the liquid-to-solid phase transition when spiders spin dragline silk threads.",
+        "fun_fact": "Spider dragline silk is five times stronger than steel by weight and can stretch 30% without snapping!"
+    },
+    {
+        "name": "29. Human Serum Albumin Domain I",
+        "sequence": "DAHKSEVAHRFKDLGEENFKALVLIAFAQYLQQCPFEDHVKLVNEVTEFAKTCVADESAENCDKSLHTLFGDKLCTVATLRETYGEMADCCAKQEPERNECFLQHKDDNPNLPPF",
+        "true_ss": "CCHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHCCCCCCCCCCCCCCCCC",
+        "description": "The major circulating transport protein in human plasma, maintaining oncotic pressure and carrying hormones.",
+        "fun_fact": "Serum albumin makes up roughly half of all protein dissolved in human blood plasma!"
+    },
+    {
+        "name": "30. Bacteriorhodopsin Helix A",
+        "sequence": "PEWIWLALGTALMGLGTLYFLVKGMGVSDPDAKKFYAITTLVPAIAFTMYLSMLLGYGLTMVPFGG",
+        "true_ss": "CCHHHHHHHHHHHHHHHHHHHHHHHHHHCCCCCHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHCCC",
+        "description": "Light-driven proton pump protein found in halophilic archaea that converts sunlight into cellular energy.",
+        "fun_fact": "Bacteriorhodopsin gives purple salt flats their intense violet-pink color!"
+    },
+    {
+        "name": "31. Antifreeze Protein Type I (Winter Flounder)",
+        "sequence": "DTASDAAAAAALTAANAKAAAELTAANAAAAAAATAR",
+        "true_ss": "CCHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHCCC",
+        "description": "Alanine-rich amphipathic single alpha-helix that prevents ice crystal growth in arctic fish blood.",
+        "fun_fact": "Antifreeze proteins bind directly to microscopic ice crystals, stopping them from growing and freezing fish blood solid!"
+    },
+    {
+        "name": "32. Firefly Luciferase Fragment",
+        "sequence": "MEDAKNIKKGPAPFYPLEDGTAGEQLHKAMKRYALVP",
+        "true_ss": "CCHHHHHHHHHHHCCCCCCCHHHHHHHHHHHHHHCCC",
+        "description": "Light-emitting enzyme that catalyzes the oxidation of luciferin in fireflies to generate bioluminescent glow.",
+        "fun_fact": "Firefly bioluminescence is 100% efficient—almost all energy is converted to light with virtually zero waste heat!"
+    },
+    {
+        "name": "33. Green Sea Turtle Myoglobin Segment",
+        "sequence": "GLSDGEWQLVLNVWGKVEADIPGHGQEVLIRLFKGHPETL",
+        "true_ss": "CCCCCCCCCHHHHHHHHHHHHHHHCCCCCHHHHHHHHHHH",
+        "description": "Specialized oxygen binder enabling sea turtles to stay submerged during deep oceanic feeding dives.",
+        "fun_fact": "Sea turtles can rest underwater for up to 5 hours at a time by slowing their heart rates down to 1 beat every 9 minutes!"
+    },
+    {
+        "name": "34. SARS-CoV-2 Spike Receptor Binding Domain (RBD)",
+        "sequence": "RVQPTESIVRFPNITNLCPFGEVFNATRFASVYAWNRKRISNCVADYSVLYNSASFSTFKCYGVSPTKLNDLCFTNVYADSFVIRGDEVRQIAPGQTGKIADYNYKLPDDFTGCVIAWNSNNLDSKVGGNYNYLYRLFRKSNLKPFERDISTEIYQAGSTPCNGVEGFNCYFPLQSYGFQPTNGVGYQPYRVVVLSFELLHAPATVCGPKKSTNLVKNKCVNF",
+        "true_ss": "CCEEEEEEEECCCCCCEEEEEEEEEECCCEEEEEEECCCCCEEEEEEECCCCCEEEEEEEEEEECCCCCCCEEEEEEEEEEECCCCCEEEEEEECCCCCCCEEEEEEEEEEECCCCCCCEEEEEEEEEEECCCCCEEEEEEECCCCCCCEEEEEEEEEEEEECCCCCEEEEEEEEEEECCCCCCCEEEEEEEEEEECCCCCCCEEEEEEEEEEECCCCCEEEEEECCCCCCCCC",
+        "description": "The viral protein domain that docks directly onto human ACE2 receptors to initiate host cell infection.",
+        "fun_fact": "Neutralizing antibodies generated by mRNA vaccines specifically target this tiny RBD domain on the spike protein surface!"
+    },
+    {
+        "name": "35. CRISPR-Cas9 Bridge Helix Fragment",
+        "sequence": "RKYLIGLNIGTNSVGWAVITDEYKVPSKKFKVLGNTDRHSIKKNLIGALLLFD",
+        "true_ss": "CCHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHCCC",
+        "description": "Critical structural bridge helix connecting RuvC and REC domains in Cas9 gene-editing complexes.",
+        "fun_fact": "CRISPR was originally discovered as an adaptive bacterial immune system used to destroy invading bacteriophage DNA!"
+    },
+    {
+        "name": "36. Human Alpha-Synuclein (Parkinson's Domain)",
+        "sequence": "MDVFMKGLSKAKEGVVAAAEKTKQGVAEAAGKTKEGVLYVGSKTKEGVVHGVATVAEKTKEQVTNVGGAVVTGVTAVAQKTVEGAGSIAAATGFVKKDQLGKNEEGAPQEGILEDMPVDPDNEAYEMPSEEGYQDYEPEA",
+        "true_ss": "CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC",
+        "description": "An intrinsically disordered protein that can misfold into toxic Lewy body aggregates in Parkinson's disease.",
+        "fun_fact": "In its native monomeric state inside neurons, alpha-synuclein behaves like a completely unfolded, flexible noodle!"
+    },
+    {
+        "name": "37. Amyloid Beta 1-42 (Alzheimer's Peptide)",
+        "sequence": "DAEFRHDSGYEVHHQKLVFFAEDVGSNKGAIIGLMGGVVIA",
+        "true_ss": "CCCCCCCCCCCCCCEEEEEEEEEECCCCCEEEEEEEEEEECC",
+        "description": "The neurotoxic peptide segment that aggregates into beta-sheet fibrillar plaques in Alzheimer's disease.",
+        "fun_fact": "Cleaving just two extra amino acids off Amyloid Beta 1-40 transforms it into 1-42, dramatically speeding up toxic plaque formation!"
+    },
+    {
+        "name": "38. Human Growth Hormone (hGH Helix 1)",
+        "sequence": "FPTIPLSRLFDNAMLRAHRLHQLAFDTYQEFEEAYIPKEQKYSFLQNPQTSLCFSESIPTPSNREETQQKSNLELLRISLLLIQSWLEPVQFLRSVFANSLVYGASDSNVYDLLKDLEEGIQTLMGRLEDGSPRTGQIFKQTYSKFDTNSHNDDALLKNYGLLYCFRKDMDKVETFLRIVQCRSVEGSCGF",
+        "true_ss": "CCHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHCCCCCHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHCCCCCCCHHHHHHHHHHHHHHHHHHHHHHHHHHHHHCCCC",
+        "description": "Pituitary peptide hormone that stimulates growth, cell reproduction, and physical regeneration.",
+        "fun_fact": "Recombinant human growth hormone (hGH) is widely used in pediatric medicine to treat severe growth hormone deficiency."
+    },
+    {
+        "name": "39. Epidermal Growth Factor (EGF)",
+        "sequence": "NSDSECPLSHDGYCLHDGVCMYIEALDKYACNCVVGYIGERCQYRDLWWELR",
+        "true_ss": "CCCEEEEECCCCCCEEEEEECCCCCEEEEEECCCCCEEEEEECCCCCCCCCC",
+        "description": "Small peptide growth factor that stimulates cell proliferation, differentiation, and survival by binding EGF receptors.",
+        "fun_fact": "EGF was discovered by Stanley Cohen in 1962, who noticed it accelerated tooth eruption and eyelid opening in newborn mice!"
+    },
+    {
+        "name": "40. Human Parathyroid Hormone (PTH 1-34)",
+        "sequence": "SVSEIQLMHNLGKHLNSMERVEWLRKKLQDVHNF",
+        "true_ss": "CCHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHCC",
+        "description": "The essential N-terminal domain of PTH regulating systemic serum calcium concentration.",
+        "fun_fact": "Intermittent daily injections of PTH actually stimulate bone formation and are used clinically to reverse severe osteoporosis!"
+    },
+    {
+        "name": "41. Glucagon-like Peptide 1 (GLP-1 7-36)",
+        "sequence": "HAEGTFTSDVSSYLEGQAAKEFIAWLVKGRG",
+        "true_ss": "CCHHHHHHHHHHHHHHHHHHHHHHHHHHHCC",
+        "description": "Incretin metabolic peptide hormone that stimulates insulin secretion, serving as the basis for GLP-1 receptor agonist drugs.",
+        "fun_fact": "GLP-1 receptor agonist medications (like Semaglutide/Ozempic) mimic this exact peptide sequence to regulate blood sugar!"
+    },
+    {
+        "name": "42. Melittin (Honeybee Venom Main Peptide)",
+        "sequence": "GIGAVLKVLTTGLPALISWIKRKRQQ",
+        "true_ss": "CCHHHHHHHHHHHHHHHHHHHHHHCC",
+        "description": "Principal toxic component of European honeybee venom that forms pores in cell membranes.",
+        "fun_fact": "Melittin makes up 50% of the dry weight of honeybee venom and is responsible for the sharp burning sensation of a bee sting!"
+    },
+    {
+        "name": "43. Magainin 2 (African Clawed Frog Peptide)",
+        "sequence": "GIGKFLHSAKKFGKAFVGEIMNS",
+        "true_ss": "CCHHHHHHHHHHHHHHHHHHHCC",
+        "description": "Antimicrobial amphipathic alpha-helical peptide secreted from frog skin to kill bacteria and fungi.",
+        "fun_fact": "African clawed frogs can live in murky, bacteria-laden water with open wounds without getting infected thanks to magainins!"
+    },
+    {
+        "name": "44. Human Beta-Defensin 2 (HBD-2)",
+        "sequence": "GIGDPVTCLKSGAICHPVFCPRRYKQIGTCGLPGTKCCKKP",
+        "true_ss": "CCCEEEEEECCCCEEEEEECCCCCEEEEEECCCCCCCCCCC",
+        "description": "Epithelial host-defense antimicrobial peptide that ruptures bacterial cell membranes.",
+        "fun_fact": "Defensins are ancient molecular weapons found across all plants, insects, animals, and humans!"
+    },
+    {
+        "name": "45. Cobra Cardiotoxin V4 (Beta-Sheet Venom)",
+        "sequence": "LKCNKLVPLFYKTCPAGKNLCYKMFMVATPKVPVKRGCIDVCPKSSLLVKYVCCNTDRCN",
+        "true_ss": "CCCEEEEECCCCCEEEEECCCCCCEEEEEECCCCCCEEEEEECCCCCEEEEEECCCCCCC",
+        "description": "Pore-forming cardiotoxic peptide present in Naja cobra venom that causes heart muscle depolarization.",
+        "fun_fact": "Cobra cardiotoxins act within minutes by poking holes in cardiac muscle membranes, causing rapid heart arrest."
+    },
+    {
+        "name": "46. Apamin (Honeybee Neurotoxin)",
+        "sequence": "CNCKAPETALCARRCQQH",
+        "true_ss": "CCCCHHHHHHHHHHHCCC",
+        "description": "Small 18-amino-acid peptide neurotoxin in bee venom that selectively blocks Ca2+-activated potassium channels.",
+        "fun_fact": "Apamin is so small that it can cross the human blood-brain barrier!"
+    },
+    {
+        "name": "47. Viscotoxin A3 (Mistletoe Plant Toxin)",
+        "sequence": "KSCCRNTTARNCYNVCRFAGTGREICAKKCDIIKGIKMEAMLCAKTCGKRETCP",
+        "true_ss": "CCCHHHHHHHHHHCCCCEEEECCCCEEEECCCCCHHHHHHHHHHCCCCCCCCCC",
+        "description": "Cytotoxic thionin protein isolated from European mistletoe leaves.",
+        "fun_fact": "Mistletoe viscotoxins evolved as natural chemical weapons to prevent birds and herbivores from eating the plant's stems!"
+    },
+    {
+        "name": "48. Cecropin A (Silk Moth Antibacterial)",
+        "sequence": "KWKLFKKIEKVGQNIRDGIIKAGPAVAVVGQATQIAK",
+        "true_ss": "CCHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHCCC",
+        "description": "Linear lytic peptide expressed in silk moth pupae upon bacterial infection.",
+        "fun_fact": "Cecropins punch lethal holes in bacterial membranes while leaving human red blood cells unharmed!"
+    },
+    {
+        "name": "49. Kalata B1 (Macrocyclic Plant Cyclotide)",
+        "sequence": "GLPVCGETCFGGTCNTPGCTCSWPVCTRN",
+        "true_ss": "CCCEEEEECCCCCCEEEEEECCCCEEEEC",
+        "description": "Head-to-tail cyclic plant defense peptide with a rigid disulfide cystine knot framework.",
+        "fun_fact": "Kalata B1 is so structurally indestructible that it survives boiling water and digestive stomach acids!"
+    },
+    {
+        "name": "50. Crambin Variant S22/I25 (High-Res Diffraction)",
+        "sequence": "TTCCPSIVARSNFNVCRLPGTPEASCAYTGCIIIPGATCPGDYAN",
+        "true_ss": "CCCHHHHHHHHHHCCCCEEEECCCCEEEECCCCCCCCCCCCCCCCC",
+        "description": "Natural isoform variant of crambin used for atomic-resolution crystallographic validation.",
+        "fun_fact": "Studying crambin's hydrophobic core helped biochemists understand how oil-repelling forces drive all protein folding!"
+    }
+]
+
+# Quick lookup dict keyed by display name
+PROTEIN_MAP = {p["name"]: p for p in PROTEIN_DATASET}

html_builder.py

@@ -0,0 +1,131 @@
+"""
+Builds the HTML visualization block shown after a prediction — the
+sequence node grid, metrics cards, alignment view, and info/fun-fact card.
+"""
+import html
+
+
+def build_result_html(sequence, pred_str, true_ss=None, q3_score=None, description="", fun_fact=""):
+    """Renders the custom HTML result panel matching the app's design system."""
+
+    # 1. Interactive Node Grid (first 60 residues shown as scannable nodes)
+    grid_nodes_html = "<div class='sequence-grid'>"
+    display_limit = min(len(sequence), 60)
+
+    for i in range(display_limit):
+        aa = sequence[i]
+        st = pred_str[i]
+        grid_nodes_html += f"""
+        <div class="seq-node" data-state="{st}">
+            <span class="seq-aa">{aa}</span>
+            <span class="seq-state">{st}</span>
+        </div>
+        """
+    grid_nodes_html += "</div>"
+
+    if len(sequence) > 60:
+        grid_nodes_html += f"""
+        <p style='text-align: center; color: #8e8e93; font-size: 0.78rem; font-family: "JetBrains Mono"; margin-top: 12px;'>
+            + {len(sequence) - 60} additional amino acid residues sequence mapped below
+        </p>
+        """
+
+    # 2. Structure Composition Analysis
+    h_cnt, e_cnt, c_cnt = pred_str.count('H'), pred_str.count('E'), pred_str.count('C')
+    tot = max(len(pred_str), 1)
+    h_pct, e_pct, c_pct = (h_cnt / tot) * 100, (e_cnt / tot) * 100, (c_cnt / tot) * 100
+
+    # 3. Alignment Rows (Monospaced Sequence Alignment)
+    pred_align_html = ""
+    truth_align_html = ""
+
+    for i in range(len(sequence)):
+        p_char = pred_str[i]
+        if true_ss and i < len(true_ss):
+            t_char = true_ss[i]
+            if p_char == t_char:
+                pred_align_html += f"<span class='match'>{p_char}</span>"
+            else:
+                pred_align_html += f"<span class='miss'>{p_char}</span>"
+            truth_align_html += t_char
+        else:
+            pred_align_html += p_char
+
+    alignment_card_html = f"""
+    <div class="alignment-card">
+        {f'''
+        <div class="align-row">
+            <div class="row-label">Ground Truth</div>
+            <div class="row-seq">{truth_align_html}</div>
+        </div>
+        ''' if true_ss else ''}
+        <div class="align-row">
+            <div class="row-label">SERAPH Pred</div>
+            <div class="row-seq">{pred_align_html}</div>
+        </div>
+        <div class="align-row">
+            <div class="row-label">AA Sequence</div>
+            <div class="row-seq" style="color: #8e8e93;">{sequence}</div>
+        </div>
+    </div>
+    """
+
+    # 4. Metric Header Card
+    if q3_score is not None:
+        metrics_card_html = f"""
+        <div class="metrics-grid">
+            <div class="metric-card winner">
+                <div class="metric-value">{q3_score:.1f}%</div>
+                <div class="metric-label">Q3 Accuracy Score</div>
+            </div>
+            <div class="metric-card">
+                <div class="metric-value">{len(sequence)}</div>
+                <div class="metric-label">Residue Length</div>
+            </div>
+        </div>
+        """
+    else:
+        metrics_card_html = f"""
+        <div class="metrics-grid">
+            <div class="metric-card winner">
+                <div class="metric-value">{len(sequence)}</div>
+                <div class="metric-label">Residues Analyzed</div>
+            </div>
+            <div class="metric-card">
+                <div class="metric-value">{h_pct:.0f}% / {e_pct:.0f}% / {c_pct:.0f}%</div>
+                <div class="metric-label">Helix / Sheet / Coil</div>
+            </div>
+        </div>
+        """
+
+    # 5. Protein Info & Fun Fact Card
+    info_card_html = ""
+    if description or fun_fact:
+        info_card_html = f"""
+        <div style="background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 24px; margin-top: 20px;">
+            {f'<p style="color: #f5f5f7; font-size: 0.92rem; margin-bottom: 12px; line-height: 1.5;"><strong>Overview:</strong> {html.escape(description)}</p>' if description else ''}
+            {f'<p style="color: #38bdf8; font-size: 0.88rem; background: rgba(56, 189, 248, 0.08); border: 1px solid rgba(56, 189, 248, 0.2); padding: 12px 16px; border-radius: 10px; margin-top: 8px;"><strong>💡 Fun Fact:</strong> {html.escape(fun_fact)}</p>' if fun_fact else ''}
+        </div>
+        """
+
+    # Full Combined Output Block
+    return f"""
+    <div style="animation: fadeIn 0.5s ease-out;">
+        {metrics_card_html}
+
+        <div class="sequence-board" style="margin-bottom: 24px;">
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
+                <span class="section-label" style="margin: 0;">Predicted Secondary Structure Mapping</span>
+                <div class="board-legend" style="margin: 0;">
+                    <div class="legend-item"><div class="legend-dot h"></div> Helix (H) {h_cnt} ({h_pct:.0f}%)</div>
+                    <div class="legend-item"><div class="legend-dot e"></div> Sheet (E) {e_cnt} ({e_pct:.0f}%)</div>
+                    <div class="legend-item"><div class="legend-dot c"></div> Coil (C) {c_cnt} ({c_pct:.0f}%)</div>
+                </div>
+            </div>
+            {grid_nodes_html}
+        </div>
+
+        {alignment_card_html}
+        {info_card_html}
+    </div>
+    """

inference.py

@@ -0,0 +1,74 @@
+"""
+Loads the SERAPH model once at import time and exposes the prediction
+and preset-change handlers used by the Gradio UI.
+"""
+import spaces
+import torch
+
+from config import IDX_TO_LABEL
+from dataset import PROTEIN_MAP
+from html_builder import build_result_html
+from model import load_model
+
+model, tokenizer = load_model()
+
+
+@spaces.GPU
+def predict_structure(sequence_input: str, selected_protein_name: str) -> tuple:
+    """Runs ESM-2 + BiLSTM inference and builds the HTML visualization."""
+    sequence = sequence_input.upper().strip()
+    # Sanitize inputs to amino acid alphabet
+    valid_aas = set("ACDEFGHIKLMNPQRSTVWY")
+    sequence = "".join([c for c in sequence if c in valid_aas])
+
+    if not sequence:
+        empty_html = """
+        <div style='padding: 24px; text-align: center; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px;'>
+            <p style='color: #8e8e93; font-family: "JetBrains Mono", monospace;'>Please enter a valid amino acid sequence (e.g., M K W V T F I S L L L L F S S A)...</p>
+        </div>
+        """
+        return empty_html, "", ""
+
+    # Model inference
+    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]
+
+    # Extract predicted structure labels
+    pred_labels = [IDX_TO_LABEL[p.item()] for p in preds[1:-1]]
+    # Handle truncation alignment safely
+    pred_str = "".join(pred_labels[:len(sequence)])
+    if len(pred_str) < len(sequence):
+        pred_str += "C" * (len(sequence) - len(pred_str))
+
+    # Match with dataset ground truth if selected
+    meta = PROTEIN_MAP.get(selected_protein_name, None)
+    has_truth = False
+    true_ss = ""
+    description = ""
+    fun_fact = ""
+
+    if meta and meta["sequence"].upper() == sequence:
+        has_truth = True
+        true_ss = meta["true_ss"]
+        description = meta["description"]
+        fun_fact = meta["fun_fact"]
+
+    # Calculate Q3 Metric if Ground Truth matches
+    q3_score = None
+    if has_truth and len(true_ss) == len(sequence):
+        matches = sum(1 for i in range(len(sequence)) if pred_str[i] == true_ss[i])
+        q3_score = (matches / len(sequence)) * 100.0
+
+    html_output = build_result_html(sequence, pred_str, true_ss if has_truth else None, q3_score, description, fun_fact)
+
+    return html_output, sequence, pred_str
+
+
+def on_preset_change(selected_name):
+    """Populates the sequence textbox when a preset dropdown item is chosen."""
+    if selected_name in PROTEIN_MAP:
+        item = PROTEIN_MAP[selected_name]
+        return item["sequence"]
+    return ""

model.py

@@ -0,0 +1,57 @@
+"""
+SERAPH model architecture definition and weight-loading helper.
+"""
+import torch
+import torch.nn as nn
+from huggingface_hub import hf_hub_download
+from transformers import EsmModel, EsmTokenizer
+
+from config import HF_REPO_ID, WEIGHTS_FILE, ESM_MODEL_ID
+
+
+class SERAPH(nn.Module):
+    """ESM-2 backbone + Conv1D + BiLSTM head for 3-state secondary
+    structure prediction (Helix / Sheet / Coil)."""
+
+    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)
+
+    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)
+
+
+def load_model():
+    """Downloads the ESM-2 backbone + tokenizer and the fine-tuned SERAPH
+    checkpoint, and returns a ready-to-use (model, tokenizer) pair."""
+    print("Loading ESM2 backbone...")
+    esm = EsmModel.from_pretrained(ESM_MODEL_ID)
+    tokenizer = EsmTokenizer.from_pretrained(ESM_MODEL_ID)
+
+    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")
+
+    model = SERAPH(esm_model=esm)
+    model.load_state_dict(checkpoint["model_state_dict"])
+    model.eval()
+    print("SERAPH model ready.")
+
+    return model, tokenizer

styles.py

@@ -0,0 +1,259 @@
+"""
+Custom CSS injected into the Gradio Blocks app to match the SERAPH
+design system (dark glass UI, monospace sequence nodes, etc.).
+"""
+
+CUSTOM_CSS = """
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
+
+:root {
+  --bg-base: #060608;
+  --bg-surface: rgba(255, 255, 255, 0.025);
+  --bg-surface-hover: rgba(255, 255, 255, 0.05);
+  --bg-glass: rgba(10, 10, 14, 0.78);
+  --border-subtle: rgba(255, 255, 255, 0.08);
+  --border-accent: rgba(255, 255, 255, 0.22);
+
+  --text-main: #f5f5f7;
+  --text-muted: #8e8e93;
+  --text-dim: #55555a;
+  --accent-glow: rgba(255, 255, 255, 0.15);
+  --success-green: #10b981;
+
+  --color-h: #fb7185;
+  --bg-h: rgba(251, 113, 133, 0.15);
+  --color-e: #38bdf8;
+  --bg-e: rgba(56, 189, 248, 0.15);
+  --color-c: #94a3b8;
+  --bg-c: rgba(148, 163, 184, 0.15);
+
+  --font-heading: 'Space Grotesk', -apple-system, sans-serif;
+  --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+}
+
+body, .gradio-container {
+  background-color: var(--bg-base) !important;
+  color: var(--text-main) !important;
+  font-family: var(--font-body) !important;
+  max-width: 900px !important;
+  margin: 0 auto !important;
+  padding: 20px !important;
+}
+
+/* Headers */
+.hero-title {
+  font-family: var(--font-heading);
+  font-size: 2.2rem;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.7) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin-bottom: 8px;
+  text-align: center;
+}
+
+.hero-subtitle {
+  color: var(--text-muted);
+  text-align: center;
+  font-size: 0.95rem;
+  margin-bottom: 28px;
+}
+
+/* Back-to-portfolio button */
+.back-to-portfolio {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  font-weight: 500;
+  color: var(--text-muted) !important;
+  text-decoration: none !important;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--border-subtle);
+  border-radius: 99px;
+  padding: 6px 14px;
+  transition: all 0.2s ease;
+}
+
+.back-to-portfolio:hover {
+  color: var(--text-main) !important;
+  border-color: var(--border-accent);
+  background: rgba(255, 255, 255, 0.08);
+}
+
+/* Custom Gradio Textbox & Dropdown Overrides */
+.gradio-container textarea, .gradio-container input, .gradio-container select {
+  background: rgba(255, 255, 255, 0.03) !important;
+  border: 1px solid var(--border-subtle) !important;
+  border-radius: 12px !important;
+  color: var(--text-main) !important;
+  font-family: var(--font-mono) !important;
+}
+
+.gradio-container textarea:focus, .gradio-container input:focus {
+  border-color: var(--border-accent) !important;
+  box-shadow: 0 0 12px var(--accent-glow) !important;
+}
+
+/* Action Buttons */
+.btn-magnetic {
+  background: #ffffff !important;
+  color: #000000 !important;
+  border-radius: 99px !important;
+  font-weight: 600 !important;
+  font-size: 0.9rem !important;
+  border: none !important;
+  padding: 12px 28px !important;
+  cursor: pointer !important;
+  transition: all 0.25s ease !important;
+}
+
+.btn-magnetic:hover {
+  box-shadow: 0 0 24px var(--accent-glow) !important;
+  transform: translateY(-1px);
+}
+
+/* Sequence Node Visualizer Grid */
+.sequence-board {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: 20px;
+  padding: 24px;
+}
+
+.sequence-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
+}
+
+.seq-node {
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  width: 38px;
+  height: 58px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 0;
+  user-select: none;
+}
+
+.seq-aa {
+  font-family: var(--font-heading);
+  font-weight: 600;
+  font-size: 1rem;
+  color: var(--text-main);
+}
+
+.seq-state {
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  font-weight: 600;
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+}
+
+.seq-node[data-state="C"] .seq-state { background: var(--bg-c); color: var(--color-c); }
+.seq-node[data-state="H"] .seq-state { background: var(--bg-h); color: var(--color-h); }
+.seq-node[data-state="E"] .seq-state { background: var(--bg-e); color: var(--color-e); }
+
+/* Board Legend */
+.board-legend {
+  display: flex;
+  gap: 16px;
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+.legend-item { display: flex; align-items: center; gap: 6px; }
+.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
+.legend-dot.c { background: var(--color-c); }
+.legend-dot.h { background: var(--color-h); }
+.legend-dot.e { background: var(--color-e); }
+
+/* Metrics & Alignment Cards */
+.metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.metric-card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: 16px;
+  padding: 20px;
+  text-align: center;
+}
+
+.metric-card.winner {
+  border-color: var(--border-accent);
+  background: radial-gradient(circle at 50% -20%, rgba(255,255,255,0.06) 0%, var(--bg-surface) 70%);
+}
+
+.metric-value {
+  font-family: var(--font-heading);
+  font-size: 2.4rem;
+  font-weight: 700;
+  line-height: 1;
+  margin-bottom: 6px;
+  background: linear-gradient(180deg, #ffffff 0%, #a1a1aa 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.metric-label {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.alignment-card {
+  background: rgba(10, 10, 14, 0.6);
+  border: 1px solid var(--border-subtle);
+  border-radius: 16px;
+  padding: 20px;
+  overflow-x: auto;
+}
+
+.align-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  font-family: var(--font-mono);
+}
+
+.row-label {
+  width: 120px;
+  flex-shrink: 0;
+  font-size: 0.78rem;
+  color: var(--text-muted);
+}
+
+.row-seq {
+  font-size: 0.92rem;
+  letter-spacing: 3px;
+  color: var(--text-main);
+  white-space: nowrap;
+}
+
+.row-seq .match { color: var(--success-green); }
+.row-seq .miss { color: #ef4444; }
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+"""