fix: use DataFrame for chart, fix blank score cells

app.py

@@ -94,7 +94,8 @@ text_input     = (
     "a cat, a dog, a car, a person walking, "
     "a sunset, a building, a flower, an animal"
 )
-chart_fig      = _empty_chart()
+chart_data = pd.DataFrame({"Label": [], "Score": []})
+chart_empty = True
 score_df       = pd.DataFrame(columns=["Rank", "Label", "Score (%)"])
 status_msg     = "Upload an image and click **Analyze** to begin."
 top_label      = ""
@@ -158,11 +159,12 @@ def analyze(state: State):
 
         state.top_label  = labels[0]
         state.top_score  = scores[0]
-        state.chart_fig  = _make_bar_chart(labels, scores)
-        state.score_df   = pd.DataFrame({
+        state.chart_data = pd.DataFrame({"Label": labels, "Score (%)": scores})
+        state.chart_empty = False
+        state.score_df = pd.DataFrame({
             "Rank":      list(range(1, len(labels) + 1)),
             "Label":     labels,
-            "Score (%)": scores,
+            "Score (%)": [f"{s:.2f}" for s in scores],  # ← string, never blank
         })
         state.has_results = True
         state.status_msg  = f"✅ Top match: **{labels[0]}** ({scores[0]:.1f}%)"
@@ -178,14 +180,14 @@ def analyze(state: State):
 def reset(state: State):
     state.uploaded_image = None
     state.display_image  = None
-    state.chart_fig      = _empty_chart()
+    state.chart_data     = pd.DataFrame({"Label": [], "Score (%)": []})
+    state.chart_empty    = True
     state.score_df       = pd.DataFrame(columns=["Rank", "Label", "Score (%)"])
     state.top_label      = ""
     state.top_score      = 0.0
     state.has_results    = False
     state.status_msg     = "Upload a new image and click Analyze."
 
-
 # ═══════════════════════════════════════════════════════════════════════════════
 # PAGE — DEMO
 # ═══════════════════════════════════════════════════════════════════════════════
@@ -241,7 +243,7 @@ demo_md = """
 |>
 |>
 
-<|{chart_fig}|chart|>
+<|{chart_data}|chart|type=bar|x=Score (%)|y=Label|orientation=h|title=SigLIP Similarity Scores|height=350px|>
 
 <|part|render={has_results}|class_name=score-table|
 **Detailed Scores:**
@@ -259,7 +261,7 @@ demo_md = """
 # ═══════════════════════════════════════════════════════════════════════════════
 about_md = """
 <|part|class_name=page-header|
-# 🧠 About VisionQuery AI
+# 🧠 About VisionQuery 
 ### Problem · Solution · Technology Stack
 |>
 
@@ -293,50 +295,6 @@ This makes vision AI **slow, costly, and inflexible** for real-world deployment.
 
 ---
 
-## 🔬 How SigLIP Works
-
-<|layout|columns=1 1 1|gap=1.5rem|
-
-<|part|class_name=card tech-card|
-### 🖼️ Image Encoder
-Vision Transformer (ViT) encodes the
-uploaded image into a dense embedding
-vector in a shared vision-language space.
-|>
-
-<|part|class_name=card tech-card|
-### 📝 Text Encoder
-BERT-style transformer encodes each
-label into an embedding in the same
-shared space.
-|>
-
-<|part|class_name=card tech-card|
-### 🎯 Sigmoid Scoring
-Unlike CLIP (softmax), SigLIP applies
-**sigmoid loss** — each pair is scored
-independently, giving better calibration.
-|>
-
-|>
-
----
-
-## ⚔️ SigLIP vs CLIP
-
-<|layout|columns=1 1|gap=2rem|
-
-<|part|class_name=card|
-| Feature | CLIP | SigLIP ✅ |
-|---|---|---|
-| Loss Function | Softmax | Sigmoid |
-| Multi-label | ❌ | ✅ |
-| Multilingual | ❌ | ✅ |
-| Score Calibration | Lower | Higher |
-| ImageNet Accuracy | Good | Better |
-|>
-
-<|part|class_name=card|
 ### 🛠️ Tech Stack
 
 **Model Layer**
@@ -355,56 +313,6 @@ Hugging Face Spaces (Docker)
 
 ---
 
-## 🌍 Real-World Applications
-
-<|layout|columns=1 1 1|gap=1rem|
-
-<|part|class_name=card use-card|
-### 🏥 Medical Imaging
-Describe symptoms in text — instantly
-find matching scan categories without
-training a custom classifier.
-|>
-
-<|part|class_name=card use-card|
-### 🛒 E-Commerce Search
-Enable natural language product search
-across image catalogues — "red floral
-dress with short sleeves".
-|>
-
-<|part|class_name=card use-card|
-### 🔒 Security & Safety
-Detect unusual scenes using plain text
-descriptions — "person near restricted
-area", "fire or smoke".
-|>
-
-<|part|class_name=card use-card|
-### 🎨 Digital Asset Mgmt
-Auto-tag, search and organise large image
-libraries using any text query — no
-manual labelling required.
-|>
-
-<|part|class_name=card use-card|
-### ♿ Accessibility
-Automatically describe image content
-for visually impaired users using the
-model's strongest text matches.
-|>
-
-<|part|class_name=card use-card|
-### 🔬 Scientific Research
-Classify microscopy, satellite, or
-sensor imagery with expert text
-descriptions ��� no ML expertise needed.
-|>
-
-|>
-
----
-
 ## 📄 Citation
 
 > Zhai, X. et al. (2023). *Sigmoid Loss for Language Image Pre-Training.*