Upload folder using huggingface_hub

app.py

@@ -126,16 +126,16 @@ CSS = """
 
 .metric-strip {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
   gap: 0.8rem;
 }
 
 .metric-card {
   border: 1px solid var(--line);
   background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,244,236,0.9));
-  padding: 0.8rem 0.9rem;
+  padding: 0.72rem 0.85rem;
   border-radius: 18px;
-  min-height: 6.4rem;
+  min-height: 4.9rem;
   box-shadow: 0 8px 24px rgba(23,37,45,0.04);
 }
 
@@ -146,7 +146,7 @@ CSS = """
 
 .metric-card strong {
   display: block;
-  font-size: 1.15rem;
+  font-size: 1rem;
   margin-top: 0.15rem;
   color: var(--ink);
 }
@@ -161,23 +161,15 @@ CSS = """
   text-decoration: underline;
 }
 
-.guide-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 0.95rem;
-}
-
-.guide-card {
+.compact-spec {
+  margin: 0.7rem 0 1rem 0;
   border: 1px solid var(--line);
-  background: var(--card-strong);
-  padding: 1rem 1.05rem;
   border-radius: 18px;
-  box-shadow: 0 10px 24px rgba(23,37,45,0.05);
-}
-
-.guide-card strong {
-  display: block;
-  margin-bottom: 0.28rem;
+  background: rgba(255,255,255,0.82);
+  padding: 0.78rem 0.9rem;
+  color: var(--ink-soft);
+  font-size: 0.92rem;
+  line-height: 1.45;
 }
 
 .workspace {
@@ -246,8 +238,8 @@ CSS = """
 
 .section-note {
   color: var(--ink-soft);
-  font-size: 0.9rem;
-  margin: 0.2rem 0 0.4rem 0;
+  font-size: 0.88rem;
+  margin: 0.1rem 0 0.32rem 0;
 }
 
 .action-row {
@@ -261,7 +253,7 @@ CSS = """
   background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(248,244,236,0.92));
   border: 1px solid var(--line);
   border-radius: 24px;
-  padding: 1rem 1.05rem;
+  padding: 0.9rem 1rem;
   box-shadow: var(--shadow);
 }
 
@@ -294,7 +286,7 @@ CSS = """
 .results-callout h3 {
   margin: 0 0 0.55rem 0;
   font-family: "Fraunces", serif;
-  font-size: 1.25rem;
+  font-size: 1.1rem;
 }
 
 .results-callout ul {
@@ -312,22 +304,23 @@ CSS = """
   line-height: 1.5;
 }
 
-.explain-grid {
+.results-metrics {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 0.9rem;
+  gap: 0.65rem;
+  margin-top: 0.55rem;
 }
 
-.explain-card {
+.results-metric {
   border: 1px solid var(--line);
-  border-radius: 16px;
-  background: rgba(255,255,255,0.84);
-  padding: 0.95rem 1rem;
+  border-radius: 14px;
+  background: rgba(255,255,255,0.9);
+  padding: 0.65rem 0.75rem;
 }
 
-.explain-card strong {
+.results-metric strong {
   display: block;
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.16rem;
 }
 
 .examples-note {
@@ -449,10 +442,17 @@ CSS = """
 .gradio-container .gradio-dataframe .wrap,
 .gradio-container .gradio-dataframe .table-wrap,
 .gradio-container .gradio-dataframe .scrollable,
+.gradio-container .gradio-dataframe .table-container,
 .gradio-container [data-testid="dataframe"],
 .gradio-container [data-testid="dataframe"] .wrap,
 .gradio-container [data-testid="dataframe"] .table-wrap,
-.gradio-container [data-testid="dataframe"] .scrollable {
+.gradio-container [data-testid="dataframe"] .scrollable,
+.result-frame,
+.result-frame *,
+.result-frame .wrap,
+.result-frame .table-wrap,
+.result-frame .table-container,
+.result-frame .scrollable {
   background: #fffdf7 !important;
   border-color: var(--line) !important;
   color: var(--ink) !important;
@@ -472,7 +472,39 @@ CSS = """
 .gradio-container [data-testid="accordion"],
 .gradio-container [data-testid="accordion"] * {
   color: var(--ink) !important;
-  background-color: transparent !important;
+}
+
+.result-accordion,
+.result-accordion *,
+.result-accordion [data-testid="accordion"],
+.result-accordion [data-testid="accordion"] * {
+  color: var(--ink) !important;
+  background: #fffdf7 !important;
+}
+
+.result-file,
+.result-file *,
+.result-file .wrap,
+.result-file .file-preview,
+.result-file .file-preview-holder,
+.result-file [data-testid="file"] {
+  background: #fffdf7 !important;
+  color: var(--ink) !important;
+  border-color: var(--line) !important;
+}
+
+.result-file button {
+  background: linear-gradient(180deg, #f6e7da, #f0ddcd) !important;
+  color: var(--ink) !important;
+  border: 1px solid #dbc4b4 !important;
+}
+
+.gradio-container .choices__list--dropdown,
+.gradio-container .choices__list[aria-expanded],
+.gradio-container .choices__list--single,
+.gradio-container .choices__list--multiple {
+  background: #fffdf8 !important;
+  color: var(--ink) !important;
 }
 
 .gradio-container .gr-box,
@@ -484,8 +516,7 @@ CSS = """
 @media (max-width: 980px) {
   .hero-grid,
   .helper-row,
-  .explain-grid,
-  .guide-grid,
+  .results-metrics,
   .metric-strip {
     grid-template-columns: 1fr;
   }
@@ -652,9 +683,9 @@ def _decorate_valid_rows(valid_rows: list[dict[str, Any]]) -> list[dict[str, Any
 
 def _build_summary(query_text: str, valid_rows: list[dict[str, Any]], invalid_rows: list[dict[str, Any]], warning: str | None) -> str:
     best = valid_rows[0] if valid_rows else None
-    bullets = [f"<li><strong>Ranked candidates:</strong> {len(valid_rows)}</li>"]
+    bullets = [f"<li><strong>Ranked:</strong> {len(valid_rows)}</li>"]
     if invalid_rows:
-        bullets.append(f"<li><strong>Rejected inputs:</strong> {len(invalid_rows)}</li>")
+        bullets.append(f"<li><strong>Rejected:</strong> {len(invalid_rows)}</li>")
     if best is not None:
         bullets.append(
             f"<li><strong>Top candidate:</strong> <code>{best['canonical_smiles']}</code> · {best['priority_band']} · relative score {best['relative_score']:.1f}/100</li>"
@@ -663,10 +694,13 @@ def _build_summary(query_text: str, valid_rows: list[dict[str, Any]], invalid_ro
         bullets.append(f"<li><strong>Warning:</strong> {warning}</li>")
     return (
         "<div class='results-callout'>"
-        "<h3>Ranked shortlist</h3>"
+        "<h3>Ranking summary</h3>"
         f"<ul>{''.join(bullets)}</ul>"
-        "<p>Use <strong>priority</strong> and <strong>relative score</strong> first. "
-        "<code>model_score</code> is an internal compatibility logit and should only be compared within this submitted list.</p>"
+        "<div class='results-metrics'>"
+        "<div class='results-metric'><strong>Priority</strong>Shortlist cue derived from the within-list ranking.</div>"
+        "<div class='results-metric'><strong>Relative score</strong>0–100 rescaling inside this submitted list only.</div>"
+        "<div class='results-metric'><strong>Model score</strong>Internal compatibility logit. Do not compare across unrelated runs.</div>"
+        "</div>"
         "</div>"
     )
 
@@ -812,16 +846,15 @@ with gr.Blocks(title="BioAssayAlign Compatibility Explorer", analytics_enabled=F
       <div class="eyebrow">BioAssayAlign · assay-conditioned compound ranking</div>
       <div class="hero-title">Rank a compound list against one assay definition</div>
       <div class="hero-copy">
-        Define an assay in structured scientific terms, submit a candidate molecule set, and obtain a within-list ranking from the current BioAssayAlign compatibility model.
-        The output is intended for shortlist prioritization, retrospective analysis, and assay-conditioned compound triage.
+        Define one assay, submit a candidate molecule list, and obtain an assay-conditioned ranking for that specific list.
       </div>
     </div>
     <div class="hero-side">
       <div class="hero-side-title">Operational scope</div>
       <ul class="hero-list">
-        <li>Single-assay compound ranking with explicit assay metadata</li>
-        <li>Relative prioritization within the submitted molecule set</li>
-        <li>Immediate rejection of malformed or non-parseable SMILES</li>
+        <li>One assay at a time</li>
+        <li>Relative ranking within the submitted candidate set</li>
+        <li>Immediate rejection of malformed SMILES</li>
       </ul>
     </div>
   </div>
@@ -834,22 +867,12 @@ with gr.Blocks(title="BioAssayAlign Compatibility Explorer", analytics_enabled=F
             gr.HTML(
                 f"""
 <div class="metric-strip">
-  <div class="metric-card"><span>Model</span><strong><a href="https://huggingface.co/{MODEL_REPO_ID}" target="_blank" rel="noopener">Qwen3-Embedding-0.6B compatibility scorer</a></strong></div>
-  <div class="metric-card"><span>Input contract</span><strong>1 assay definition + up to {MAX_INPUT_SMILES} candidate SMILES</strong></div>
-  <div class="metric-card"><span>Score semantics</span><strong>Use rank and relative score within the submitted list</strong></div>
+  <div class="metric-card"><span>Model</span><strong><a href="https://huggingface.co/{MODEL_REPO_ID}" target="_blank" rel="noopener">{MODEL_REPO_ID}</a></strong></div>
+  <div class="metric-card"><span>Use</span><strong>One assay definition and up to {MAX_INPUT_SMILES} candidate SMILES. Interpret rank and relative score within the submitted list.</strong></div>
 </div>
 """
             )
-
-    gr.HTML(
-        """
-<div class="guide-grid">
-  <div class="guide-card"><strong>1. Specify the assay</strong>Include target, readout, organism, and format when known. Missing fields are allowed but reduce context.</div>
-  <div class="guide-card"><strong>2. Provide a candidate set</strong>Paste one SMILES per line or upload a CSV with a <code>smiles</code> column.</div>
-  <div class="guide-card"><strong>3. Read the output scientifically</strong>Use rank and relative score for shortlist decisions. Raw model score is an internal compatibility logit.</div>
-</div>
-"""
-    )
+    gr.HTML("<div class='compact-spec'>You can write your own assay directly in the form below or load one of the live examples. Include target, readout, organism, and format when known. Paste one SMILES per line or upload a CSV with a <code>smiles</code> column.</div>")
 
     with gr.Tab("Rank Compounds"):
         with gr.Row(elem_classes="workspace"):
@@ -862,7 +885,7 @@ with gr.Blocks(title="BioAssayAlign Compatibility Explorer", analytics_enabled=F
     <div class="pane-title">Define the assay context</div>
   </div>
 </div>
-<div class="pane-copy">The model performs best when the assay description is concrete and metadata fields are explicit. This form is preloaded with a live example.</div>
+<div class="pane-copy">Edit the assay fields directly, or load one of the live examples and modify it.</div>
 <div class="helper-row">
   <div class="helper-chip"><strong>Describe the protocol signal</strong>State the readout, assay system, target biology, and measurement context.</div>
   <div class="helper-chip"><strong>Use target identifiers</strong>UniProt IDs often improve separation between plausible and implausible candidates.</div>
@@ -871,8 +894,8 @@ with gr.Blocks(title="BioAssayAlign Compatibility Explorer", analytics_enabled=F
 """
                 )
                 example_name = gr.Dropdown(choices=list(EXAMPLES.keys()), value=DEFAULT_EXAMPLE_NAME, label="Example assay")
-                gr.HTML("<div class='examples-note'>The form starts with a live JAK2 example. Edit any field directly, paste your own assay and SMILES, or replace everything with another example.</div>")
-                load_example_btn = gr.Button("Replace with selected example", variant="secondary")
+                gr.HTML("<div class='examples-note'>The form starts with a live JAK2 example. You can overwrite every field with your own assay or load another example.</div>")
+                load_example_btn = gr.Button("Load selected example or overwrite below with your own assay", variant="secondary")
                 assay_title = gr.Textbox(label="Assay title", value=DEFAULT_EXAMPLE["title"])
                 description = gr.Textbox(label="Description", value=DEFAULT_EXAMPLE["description"], lines=6, placeholder="Describe the assay in practical lab language.")
                 with gr.Row():
@@ -892,7 +915,7 @@ with gr.Blocks(title="BioAssayAlign Compatibility Explorer", analytics_enabled=F
     <div class="pane-title">Submit the candidate molecules</div>
   </div>
 </div>
-<div class="pane-copy">The model ranks compounds relative to this exact submitted set. Use parent or cleaned molecules when possible.</div>
+<div class="pane-copy">The ranking is computed only within this submitted candidate set.</div>
 """
                 )
                 smiles_text = gr.Textbox(
@@ -908,31 +931,14 @@ with gr.Blocks(title="BioAssayAlign Compatibility Explorer", analytics_enabled=F
                     run_btn = gr.Button("Run assay-conditioned ranking", variant="primary")
                     clear_btn = gr.ClearButton(value="Clear inputs", components=[assay_title, description, organism, readout, assay_format, assay_type, target_uniprot, smiles_text, upload_file])
 
-        gr.HTML(
-            """
-<div class="summary-shell">
-  <div class="pane-header">
-    <div>
-      <div class="pane-kicker">Output</div>
-      <div class="pane-title">Interpret the ranked shortlist</div>
-    </div>
-  </div>
-  <div class="explain-grid">
-    <div class="explain-card"><strong>Priority band</strong>Use this as the first-pass triage signal when scanning the ranked list.</div>
-    <div class="explain-card"><strong>Relative score</strong>0–100 scale computed within the submitted list only. It is not calibrated across separate runs.</div>
-    <div class="explain-card"><strong>Model score</strong>Internal compatibility logit from the scorer head. Useful for export or debugging, not for direct biological interpretation.</div>
-  </div>
-</div>
-"""
-        )
         summary = gr.HTML(elem_classes="results-shell")
-        with gr.Accordion("Serialized assay text used by the model", open=False):
+        with gr.Accordion("Serialized assay text used by the model", open=False, elem_classes="result-accordion"):
             assay_preview = gr.Textbox(lines=12, label="Model-facing assay text")
         gr.HTML("<div class='section-note'><strong>Ranked candidates</strong></div>")
-        ranked_df = gr.Dataframe(label=None, show_label=False, interactive=False, wrap=True)
+        ranked_df = gr.Dataframe(label=None, show_label=False, interactive=False, wrap=True, elem_classes="result-frame")
         gr.HTML("<div class='section-note'><strong>Rejected inputs</strong></div>")
-        invalid_df = gr.Dataframe(label=None, show_label=False, interactive=False, wrap=True)
-        download_file = gr.File(label="Results CSV")
+        invalid_df = gr.Dataframe(label=None, show_label=False, interactive=False, wrap=True, elem_classes="result-frame")
+        download_file = gr.File(label="Export CSV", elem_classes="result-file")
 
         load_example_btn.click(
             load_example,
@@ -945,30 +951,6 @@ with gr.Blocks(title="BioAssayAlign Compatibility Explorer", analytics_enabled=F
             outputs=[summary, assay_preview, ranked_df, invalid_df, download_file],
         )
 
-    with gr.Tab("How To Use This"):
-        gr.HTML(
-            """
-<div class="summary-shell">
-  <div class="pane-header">
-    <div>
-      <div class="pane-kicker">Practical guidance</div>
-      <div class="pane-title">Operating guidance</div>
-    </div>
-  </div>
-  <div class="explain-grid">
-    <div class="explain-card"><strong>Encode the assay explicitly</strong>Use full scientific language rather than keywords alone. Include target and readout when available.</div>
-    <div class="explain-card"><strong>Provide chemically reasonable candidates</strong>Prefer parent or neutralized structures. Upload a CSV with a <code>smiles</code> column for larger lists.</div>
-    <div class="explain-card"><strong>Use the output as a ranking signal</strong>Priority and relative score are the intended decision aids. Model score is not a calibrated success probability.</div>
-  </div>
-  <div class="footer-note" style="margin-top: 1rem;">
-    This Space is intended for assay-conditioned shortlist ranking. It is not a generative chemistry system and it does not replace confirmatory screening.
-    Export the ranked CSV if you want to continue downstream analysis in your own workflow.
-  </div>
-</div>
-"""
-        )
-
-
 if __name__ == "__main__":
     threading.Thread(target=_warm_model_background, daemon=True).start()
     demo.queue(default_concurrency_limit=4).launch(