Polish ExplainBind demo UI

.gitignore

@@ -2,5 +2,6 @@
 .ipynb_checkpoints/
 __pycache__/
 *.pyc
+.venv/
 bin/
 *.log

app.py

@@ -60,7 +60,7 @@ LOSCAZLO_B64 = _load_logo_b64(LOSCAZLO_LOGO)
 # UI-visible names (Halogen bonding removed)
 INTERACTION_NAMES = [
     "Hydrogen bonding",
-    "Salt Bridging",
+    "Salt Bridges",
     "π–π Stacking",
     "Cation–π",
     "Hydrophobic",
@@ -76,9 +76,26 @@ N_VISIBLE_SPEC = len(VISIBLE2UNDERLYING)  # 6
 # ───── Helper utilities ───────────────────────────────────────────
 three2one = {k.upper(): v for k, v in IUPACData.protein_letters_3to1.items()}
 three2one.update({"MSE": "M", "SEC": "C", "PYL": "K"})
+one2three = {
+    "A": "ALA", "R": "ARG", "N": "ASN", "D": "ASP", "C": "CYS",
+    "Q": "GLN", "E": "GLU", "G": "GLY", "H": "HIS", "I": "ILE",
+    "L": "LEU", "K": "LYS", "M": "MET", "F": "PHE", "P": "PRO",
+    "S": "SER", "T": "THR", "W": "TRP", "Y": "TYR", "V": "VAL",
+    "U": "SEC", "O": "PYL", "B": "ASX", "Z": "GLX", "X": "UNK",
+}
 STANDARD_AA_SET = set("ACDEFGHIKLMNPQRSTVWY")  # Uppercase FASTA amino acids
 
 
+def format_residue_label(token: str, position: int) -> str:
+    """Format tokenizer residue tokens as three-letter amino-acid labels."""
+    clean_token = (token or "").replace("▁", "").strip()
+    residue = clean_token[:1].upper()
+    residue_3 = one2three.get(residue)
+    if residue_3:
+        return f"{residue_3} ({position})"
+    return f"{clean_token or '?'} ({position})"
+
+
 def simple_seq_from_structure(path: str) -> str:
     """Extract the longest chain and return standard 1-letter amino acid sequence."""
     parser = MMCIFParser(QUIET=True) if path.endswith(".cif") else PDBParser(QUIET=True)
@@ -549,7 +566,7 @@ def visualize_attention_and_ranges(
                 rows.append(
                     f"<tr>"
                     f"<td style='border:1px solid #ddd;padding:6px'><strong>Top {rank}</strong></td>"
-                    f"<td style='border:1px solid #ddd;padding:6px'>Protein: <strong>{j+1}:{p_tokens[j]}</strong></td>"
+                    f"<td style='border:1px solid #ddd;padding:6px'>Protein: <strong>{format_residue_label(p_tokens[j], j+1)}</strong></td>"
                     f"<td style='border:1px solid #ddd;padding:6px'>Ligand: <strong>{i+1}:{d_tokens[i]}</strong></td>"
                     f"<td style='border:1px solid #ddd;padding:6px'>Score: <strong>{val.item():.6f}</strong></td>"
                     f"</tr>"
@@ -586,16 +603,15 @@ def visualize_attention_and_ranges(
                     f"<tr>"
                     f"<td style='border:1px solid #ddd;padding:6px'><strong>Top {rank}</strong></td>"
                     f"<td style='border:1px solid #ddd;padding:6px'>"
-                    f"Protein residue: <strong>{j+1}:{p_tokens[j]}</strong>"
+                    f"<strong>{format_residue_label(p_tokens[j], j+1)}</strong>"
                     f"</td>"
                     f"<td style='border:1px solid #ddd;padding:6px'>"
-                    f"Aggregated Score: <strong>{val.item():.6f}</strong>"
+                    f"<strong>{val.item():.6f}</strong>"
                     f"</td>"
                     f"</tr>"
                 )
 
             ranges_html = (
-                "<h4 style='margin:12px 0 6px'>Top-K Residues (ranked by aggregated attention)</h4>"
                 "<table style='border-collapse:collapse;margin:6px 0 16px;width:100%'>"
                 "<thead><tr style='background:#f5f5f5'>"
                 "<th style='border:1px solid #ddd;padding:6px'>Rank</th>"
@@ -737,6 +753,10 @@ def visualize_attention_and_ranges(
         return prob_html, ranges_html, heat_html
 
 
+def error_outputs(message: str):
+    return f"<p style='color:red'>{message}</p>", "", ""
+
+
 
 
 # ───── Gradio callbacks ─────────────────────────────────────────
@@ -834,10 +854,10 @@ def inference_cb(prot_seq, drug_seq, head_choice, topk_choice):
     # Input validation
     # ------------------------------
     if not prot_seq or not prot_seq.strip():
-        return "<p style='color:red'>Please extract or enter a protein sequence first.</p>"
+        return error_outputs("Please extract or enter a protein sequence first.")
 
     if not drug_seq or not drug_seq.strip():
-        return "<p style='color:red'>Please enter a ligand sequence (SELFIES or SMILES).</p>"
+        return error_outputs("Please enter a ligand sequence (SELFIES or SMILES).")
 
     prot_seq = prot_seq.strip()
     drug_seq_in = drug_seq.strip()
@@ -851,10 +871,8 @@ def inference_cb(prot_seq, drug_seq, head_choice, topk_choice):
     if ltype == "smiles":
         conv = smiles_to_selfies(drug_seq_in)
         if conv is None:
-            return (
-                "<p style='color:red'>SMILES→SELFIES conversion failed. "
-                "The SMILES appears invalid.</p>",
-                "",
+            return error_outputs(
+                "SMILES→SELFIES conversion failed. The SMILES appears invalid."
             )
         drug_seq_for_tokenizer = conv
     else:
@@ -962,54 +980,159 @@ def inference_cb(prot_seq, drug_seq, head_choice, topk_choice):
         raw_selfies=raw_selfies,
     )
     
-    full_html = prob_html + table_html + heat_html   # ✅ 强制上下顺序
-    return full_html
+    return prob_html, table_html, heat_html
 
 def clear_cb():
-    return "", "", "", None, ""
-# protein_seq, drug_seq, output_full, structure_file, status_box
+    return "", "", "", "", "", None, ""
+# protein_seq, drug_seq, binding_probability, binding_locations, interaction_map, structure_file, status_box
 
 
 # ───── Gradio interface definition ───────────────────────────────
 css = """
 :root{
-  --bg:#f8fafc; --card:#f8fafc; --text:#0f172a;
-  --muted:#6b7280; --border:#e5e7eb; --shadow:0 6px 24px rgba(2,6,23,.06);
-  --radius:14px; --icon-size:20px;
+  --page:#0b1020; --bg:#f8fafc; --card:#ffffff; --text:#0f172a;
+  --muted:#475569; --border:#dbe3ee; --shadow:0 16px 44px rgba(2,6,23,.18);
+  --radius:14px; --icon-size:20px; --accent:#2563eb; --accent-soft:#eff6ff;
 }
 
 *{box-sizing:border-box}
-html,body{background:#fff!important;color:var(--text)!important}
-.gradio-container{max-width:1120px;margin:0 auto}
+html,body{background:var(--page)!important;color:var(--text)!important}
+.gradio-container{max-width:1120px;margin:0 auto;padding:0 20px 32px}
 
 /* Title and subtitle */
 h1{
+  display:block;
+  width:fit-content;
+  max-width:100%;
   font-family:Inter,ui-sans-serif;letter-spacing:.2px;font-weight:700;
-  font-size:32px;margin:22px 0 12px;text-align:center
+  font-size:32px;line-height:1.22;margin:24px auto 18px;text-align:center;
+  padding:14px 22px;
+  border:1px solid #dbe3ee;
+  border-radius:16px;
+  background:#ffffff;
+  color:#0f172a!important;
+  box-shadow:0 14px 36px rgba(2,6,23,.16);
+  text-shadow:none;
 }
 .subtle{color:var(--muted);font-size:14px;text-align:center;margin:-6px 0 18px}
 
 /* Card style */
 .card{
-  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
-  box-shadow:var(--shadow); padding:22px;
+  background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%)!important;
+  border:1px solid var(--border);
+  border-radius:var(--radius);
+  box-shadow:var(--shadow);
+  padding:22px;
+  color:var(--text)!important;
 }
+.card label,
+.card p,
+.card li,
+.card strong{color:var(--text)!important}
 
 /* Top links */
 .link-row{display:flex;justify-content:center;gap:14px;margin:0 auto 18px;flex-wrap:wrap}
 
-/* Two-column grid: left=input, right=controls */
-.grid-2{display:grid;grid-template-columns:1.4fr .9fr;gap:16px}
+/* Input and controls are stacked for better scanning on narrow screens. */
+.grid-2{display:flex;flex-direction:column;gap:16px}
 .grid-2 .col{display:flex;flex-direction:column;gap:12px}
 
 /* Buttons */
 .gr-button{border-radius:12px !important;font-weight:700 !important;letter-spacing:.2px}
 #extract-btn{background:linear-gradient(90deg,#EFAFB2,#EFAFB2); color:#0f172a}
-#inference-btn{background:linear-gradient(90deg,#B2CBDF,#B2CBDF); color:#0f172a}
-#clear-btn{background:#FFE2B5; color:#0A0A0A; border:1px solid var(--border)}
+#inference-btn{background:linear-gradient(90deg,#B2CBDF,#B2CBDF)!important; color:#0f172a!important}
+#clear-btn{background:#FFE2B5!important; color:#0A0A0A!important; border:1px solid var(--border)!important}
+
+#left,
+#right{
+  background:#ffffff!important;
+  border:1px solid var(--border);
+  border-radius:12px;
+  padding:14px;
+}
+
+#protein-seq textarea,
+#drug-seq textarea{
+  background:#ffffff!important;
+  color:#0f172a!important;
+  border:1px solid #cbd5e1!important;
+  border-radius:10px!important;
+}
+
+#right input,
+#right button{
+  color:#0f172a!important;
+}
+
+#right [role="listbox"],
+#right [role="option"]{
+  background:#ffffff!important;
+  color:#0f172a!important;
+  border-color:#cbd5e1!important;
+}
+
+#right [role="option"]:hover,
+#right [role="option"][aria-selected="true"]{
+  background:#eff6ff!important;
+  color:#0f172a!important;
+}
+
+#structure-file button{
+  background:#ffffff!important;
+  color:#0f172a!important;
+  border:1px dashed #94a3b8!important;
+}
+
+#structure-file svg{
+  color:#2563eb!important;
+}
+
+#example-panel{
+  background:#f8fafc!important;
+  border:1px solid #dbe3ee!important;
+  border-radius:12px!important;
+  padding:12px!important;
+}
+
+#example-panel table,
+#example-panel iframe,
+#example-panel .table-wrap{
+  background:#ffffff!important;
+  color:#0f172a!important;
+}
 
 /* Result spacing */
 #result-table{margin-bottom:16px}
+.result-heading{
+  display:flex;
+  align-items:center;
+  gap:12px;
+  margin:22px 0 12px;
+  padding:10px 12px;
+  border:1px solid #dbe3ee;
+  border-left:4px solid #2563eb;
+  border-radius:10px;
+  background:#f8fafc;
+  color:#0f172a !important;
+}
+.result-index{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  min-width:34px;
+  height:24px;
+  border-radius:9999px;
+  background:#0f172a;
+  color:#fff !important;
+  font-size:12px;
+  font-weight:700;
+}
+.result-title{
+  font-size:18px;
+  font-weight:700;
+  line-height:1.25;
+  color:#0f172a !important;
+}
 
 /* Figure container */
 .figure-wrap{border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
@@ -1095,9 +1218,97 @@ h1{
 .project-links{
   display:flex !important;
   justify-content:center !important;
-  gap:28px !important;  
+  gap:14px !important;  
   flex-wrap:wrap !important;
-  margin-bottom:32px !important;
+  margin-bottom:24px !important;
+}
+
+.guidelines-panel{
+  margin:0 auto 18px;
+  border:1px solid #dbe3ee;
+  border-left:4px solid var(--accent);
+  border-radius:14px;
+  background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
+  box-shadow:var(--shadow);
+  color:#0f172a!important;
+  overflow:hidden;
+}
+
+.guidelines-panel summary{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  cursor:pointer;
+  padding:16px 18px;
+  color:#0f172a!important;
+  font-size:18px;
+  font-weight:800;
+  border-bottom:1px solid #e2e8f0;
+}
+
+.guidelines-panel summary::-webkit-details-marker{display:none}
+.guidelines-panel summary::after{
+  content:"v";
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  width:26px;
+  height:26px;
+  border-radius:9999px;
+  background:#eaf2ff;
+  color:#1d4ed8;
+  font-size:12px;
+  font-weight:800;
+}
+
+.guidelines-copy{
+  padding:16px 18px 18px;
+  color:#0f172a!important;
+}
+
+.guidelines-list{
+  list-style:none;
+  display:grid;
+  gap:12px;
+  margin:0!important;
+  padding:0!important;
+}
+
+.guideline-item{
+  position:relative;
+  min-height:72px;
+  padding:12px 14px 12px 48px;
+  border:1px solid #e2e8f0;
+  border-radius:12px;
+  background:#ffffff;
+  color:#0f172a!important;
+  line-height:1.55;
+}
+
+.guideline-number{
+  position:absolute;
+  left:14px;
+  top:14px;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  width:24px;
+  height:24px;
+  border-radius:9999px;
+  background:#0f172a;
+  color:#fff!important;
+  font-size:12px;
+  font-weight:800;
+}
+
+.guideline-item strong{color:#0f172a!important}
+.guideline-item em{color:#1d4ed8!important;font-style:normal;font-weight:650}
+.guideline-item code{
+  background:#eef2ff;
+  color:#1e3a8a!important;
+  border:1px solid #dbe3ff;
+  border-radius:6px;
+  padding:1px 5px;
 }
 
 #example-btn {
@@ -1111,13 +1322,13 @@ h1{
 }
 
 #extract-sa-btn{
-    background:#EADCF8 !important;
+    background:#eadcf8 !important;
     color:#0f172a !important;
 }
 
 
 """
-with gr.Blocks() as demo:
+with gr.Blocks(theme=gr.themes.Default(), css=css) as demo:
 
     gr.Markdown("<h1>ExplainBind: Token-level Protein–Ligand Interaction Visualiser</h1>")
 
@@ -1163,10 +1374,13 @@ with gr.Blocks() as demo:
     # ───────────────────────────────
     # Guidelines
     # ───────────────────────────────
-    with gr.Accordion("Guidelines for Users", open=True, elem_classes=["card"]):
-        gr.HTML("""
-        <ol style="font-size:1rem;line-height:1.6;margin-left:22px;">
-          <li>
+    gr.HTML("""
+    <details class="guidelines-panel" open>
+      <summary>Guidelines for Users</summary>
+      <div class="guidelines-copy">
+        <ol class="guidelines-list">
+          <li class="guideline-item">
+            <span class="guideline-number">1</span>
             <strong>Input formats:</strong>
             The system supports either <em>structure-aware (SA)</em> sequences derived from
             protein structures or conventional <em>FASTA</em> sequences.
@@ -1174,23 +1388,27 @@ with gr.Blocks() as demo:
             <code>.cif</code> files to extract the corresponding sequence representation.
             Ligands can be provided in <em>SMILES</em> or <em>SELFIES</em> format.
           </li>
-    
-          <li>
+
+          <li class="guideline-item">
+            <span class="guideline-number">2</span>
             <strong>Interaction channel selection:</strong>
             Users may select a specific non-covalent interaction type
             (e.g., hydrogen bonding, hydrophobic interactions) or the
             overall interaction channel to visualise the corresponding
             token-level binding patterns.
           </li>
-    
-          <li>
+
+          <li class="guideline-item">
+            <span class="guideline-number">3</span>
             <strong>Model outputs:</strong>
             The system reports (i) a predicted binding probability for the
-            protein–ligand pair, (ii) a ranked Top-K residue table, and (iii) a token-level interaction
+            protein-ligand pair, (ii) a ranked Top-K residue table, and (iii) a token-level interaction
             heat map illustrating spatial interaction patterns.
           </li>
         </ol>
-        """)
+      </div>
+    </details>
+    """)
 
 
     # ───────────────────────────────
@@ -1226,7 +1444,7 @@ with gr.Blocks() as demo:
                     render=False,
                 )
 
-                with gr.Group():
+                with gr.Group(elem_id="example-panel"):
 
                     gr.Markdown("### Example")
 
@@ -1273,8 +1491,9 @@ with gr.Blocks() as demo:
                 top_k_dd = gr.Dropdown(
                     label="Top-K residue",
                     choices=[str(i) for i in range(1, 21)],
-                    value="1",
-                    interactive=True,
+                    value="5",
+                    interactive=False,
+                    visible=False,
                 )
                 with gr.Row():
                     btn_infer = gr.Button(
@@ -1292,7 +1511,12 @@ with gr.Blocks() as demo:
     # ───────────────────────────────
     with gr.Column(elem_classes=["card"]):
         status_box   = gr.HTML(elem_id="status-box")
-        output_full  = gr.HTML(elem_id="result-full") 
+        gr.HTML("<div class='result-heading'><span class='result-index'>01</span><span class='result-title'>Binding Probability</span></div>")
+        binding_probability = gr.HTML(elem_id="binding-probability")
+        gr.HTML("<div class='result-heading'><span class='result-index'>02</span><span class='result-title'>Binding-site Locations</span></div>")
+        binding_locations = gr.HTML(elem_id="binding-site-locations")
+        gr.HTML("<div class='result-heading'><span class='result-index'>03</span><span class='result-title'>Interaction Map</span></div>")
+        interaction_map = gr.HTML(elem_id="interaction-map")
 
 
     # ───────────────────────────────
@@ -1328,7 +1552,7 @@ with gr.Blocks() as demo:
     btn_infer.click(
         fn=inference_cb,
         inputs=[protein_seq, drug_seq, head_dd, top_k_dd],
-        outputs=[output_full],
+        outputs=[binding_probability, binding_locations, interaction_map],
     )
 
     clear_btn.click(
@@ -1337,7 +1561,9 @@ with gr.Blocks() as demo:
         outputs=[
             protein_seq,
             drug_seq,
-            output_full,
+            binding_probability,
+            binding_locations,
+            interaction_map,
             structure_file,
             status_box,
         ],
@@ -1346,7 +1572,5 @@ with gr.Blocks() as demo:
 
 
 demo.launch(
-    theme=gr.themes.Default(),
-    css=css,
     show_error=True
-)
+)