Mobile refinements: widen table columns, horizontal bar chart, and replace SVG with PNG

- Add CSS to widen first column in markdown tables on mobile devices
- Convert bar chart to horizontal orientation for better mobile readability
- Update chart CSS to style y-axis labels properly for horizontal bars
- Replace kiki-bouba-image.svg with kiki-bouba-image.png
- Update image references in app.py and README.md

README.md

@@ -21,7 +21,7 @@ license: mit
 
 ---
 
-<img src="kiki-bouba-image.svg" alt="The classic Kiki/Bouba shapes - a spiky angular shape (Kiki) and a rounded blob shape (Bouba)" width="450">
+<img src="kiki-bouba-image.png" alt="The classic Kiki/Bouba shapes - a spiky angular shape (Kiki) and a rounded blob shape (Bouba)" width="450">
 
 *Which shape is "Kiki"? Which is "Bouba"? If you're like 95% of humans across all cultures, you already know.*
 

app.py

@@ -180,24 +180,26 @@ def classify_image(image: Image.Image) -> tuple:
 EXPLANATION_TEXT = """
 ## 🧠 The Phenomenon
 
-In 1929, psychologist **Wolfgang Köhler** made a remarkable discovery. He showed people two abstract shapes—one spiky and angular, the other rounded and blobby—and asked them to name each with a nonsense word: either "takete" or "maluma."
+In 1929, psychologist **Wolfgang Köhler** made a remarkable discovery. He showed people two abstract shapes — one spiky and angular, the other rounded and blobby — and asked them to name each with a nonsense word: either "takete" or "maluma."
 
-**The result was striking**: across languages, cultures, and ages, people overwhelmingly assigned the *same* names to the *same* shapes. The sharp, angular figure was "takete." The soft, curvy one was "maluma."
+The result was striking: across languages, cultures, and ages, people overwhelmingly assigned the same names to the same shapes. The sharp, angular figure was "takete." The soft, curvy one was "maluma."
 
-This experiment was later refined by **V.S. Ramachandran and E.M. Hubbard (2001)** using the now-famous words **"Kiki"** and **"Bouba"**—and the results held:
+This experiment was later refined by **V.S. Ramachandran and E.M. Hubbard (2001)** using the now-famous words **"Kiki"** and **"Bouba"**, and the results held:
 
 | Shape | Sound | Agreement Rate |
 |-------|-------|----------------|
 | Angular, spiky | "Kiki" / "Takete" | **95-98%** |
 | Rounded, blobby | "Bouba" / "Maluma" | **95-98%** |
 
-This phenomenon—the **Bouba/Kiki effect**—has been replicated across:
+The **Bouba/Kiki effect** has been replicated across:
 - 🌍 Diverse cultures (Western, Eastern, indigenous)
 - 👶 Ages (infants to elderly)
 - 🔤 Languages with entirely different sound systems
 - 👁️ Even among congenitally blind individuals (to a lesser degree)
 
-It reveals something profound: **our senses are not as separate as we think**. Sound and shape share a hidden, abstract similarity that our brains instinctively recognize.
+It reveals something profound: **our senses are not as separate as we think**. Sound and shape share a hidden, abstract similarity that we instinctively recognize.
+
+**And wherever there's abstract similarity, there's a great opportunity to mess around with embeddings!**
 
 ---
 
@@ -207,14 +209,14 @@ This classifier uses **CLIP** (Contrastive Language-Image Pre-training) to compu
 
 ### Beyond Shape: A Cross-Modal Anchor System
 
-The original Bouba/Kiki research focused on visual shapes. But subsequent research revealed that the effect extends far beyond geometry—it's truly **cross-modal**, touching taste, texture, temperature, emotion, and more:
+The original Bouba/Kiki research focused on visual shapes. But subsequent research revealed that the effect extends far beyond geometry. It's **cross-modal**, involving taste, texture, temperature, emotion, and more:
 
 - 🍋 Sour tastes are "Kiki"; sweet tastes are "Bouba"
 - 🎵 High-pitched sounds are "Kiki"; low bass tones are "Bouba"  
 - ❄️ Cold sensations are "Kiki"; warm feelings are "Bouba"
 - 😤 Tense emotions are "Kiki"; calm moods are "Bouba"
 
-We leverage this insight by using **~200 carefully curated anchor words** across **9 sensory domains** to classify images. This allows the model to capture not just the literal shape, but the *gestalt*—the overall *quality* or *character* of an image.
+We leverage this insight by curating **~200 anchor words** across **9 sensory domains** to classify images. This allows the model to capture not just the literal shape, but the *gestalt*: the overall quality or character of an image.
 
 ---
 
@@ -292,14 +294,21 @@ This project builds on fascinating research at the intersection of cognitive sci
 
 # Custom CSS for fixing padding, bar plot styling, colors, and label cutoff
 custom_css = """
-/* Bar plot container - increased padding to prevent label cutoff */
+/* Bar plot container - padding adjusted for horizontal bars */
 .bar-plot-container {
-    padding: 20px 80px 40px 80px !important;
+    padding: 20px 20px 20px 200px !important;
     overflow: visible !important;
     box-sizing: border-box !important;
     width: 100% !important;
 }
 
+/* Mobile: reduce left padding for smaller screens */
+@media (max-width: 768px) {
+    .bar-plot-container {
+        padding: 20px 10px 20px 120px !important;
+    }
+}
+
 /* SVG container - ensure full visibility */
 .bar-plot-container svg {
     overflow: visible !important;
@@ -307,32 +316,29 @@ custom_css = """
     height: auto !important;
 }
 
-/* X-axis labels - rotate and increase spacing to prevent cutoff */
-.bar-plot-container svg g.xtick text,
-.bar-plot-container svg g.xaxis text,
-.bar-plot-container svg .x-axis text,
-.bar-plot-container svg text[text-anchor="middle"] {
-    transform: rotate(-45deg) !important;
-    transform-origin: center center !important;
-    text-anchor: start !important;
+/* Y-axis labels (anchor names) - ensure readability */
+.bar-plot-container svg g.ytick text,
+.bar-plot-container svg g.yaxis text,
+.bar-plot-container svg .y-axis text {
     overflow: visible !important;
     white-space: nowrap !important;
-    padding: 5px !important;
+    text-anchor: end !important;
 }
 
-/* Ensure axis container has enough space and padding */
-.bar-plot-container svg g.xaxis,
-.bar-plot-container svg g.xtick,
-.bar-plot-container svg g[class*="x-axis"],
-.bar-plot-container svg g[class*="xtick"] {
+/* X-axis labels (scores) - no rotation needed for horizontal bars */
+.bar-plot-container svg g.xtick text,
+.bar-plot-container svg g.xaxis text,
+.bar-plot-container svg .x-axis text {
     overflow: visible !important;
-    margin-bottom: 60px !important;
+    white-space: nowrap !important;
 }
 
-/* Add extra space at bottom for rotated labels */
-.bar-plot-container svg {
-    padding-bottom: 80px !important;
-    margin-bottom: 20px !important;
+/* Ensure axis containers have enough space */
+.bar-plot-container svg g.yaxis,
+.bar-plot-container svg g.ytick,
+.bar-plot-container svg g[class*="y-axis"],
+.bar-plot-container svg g[class*="ytick"] {
+    overflow: visible !important;
 }
 
 /* Style bars for Kiki type - electric lime green */
@@ -342,6 +348,15 @@ custom_css = """
     fill: var(--bar-color, #3B82F6) !important;
 }
 
+/* Mobile: Widen first column in tables */
+@media (max-width: 768px) {
+    .markdown table th:first-child,
+    .markdown table td:first-child {
+        min-width: 150px !important;
+        width: auto !important;
+    }
+}
+
 /* Use JavaScript injection to color bars based on labels */
 """
 
@@ -477,11 +492,11 @@ with gr.Blocks(title="Kiki/Bouba Classifier") as demo:
         value="<p>Results will appear here after classification.</p>"
     )
     
-    # BarPlot with increased height and proper labeling
+    # BarPlot with horizontal bars for mobile readability
     anchor_plot = gr.BarPlot(
         label="Top Anchor Similarities",
-        x="Anchor",
-        y="Score",
+        x="Score",
+        y="Anchor",
         title="Most Relevant Characteristics",
         height=450,
         container=True,
@@ -495,7 +510,7 @@ with gr.Blocks(title="Kiki/Bouba Classifier") as demo:
     gr.Markdown("---")
     gr.HTML("""
     <div style="text-align: center; margin: 20px 0;">
-        <img src="file/kiki-bouba-image.svg" alt="The classic Kiki/Bouba shapes" style="max-width: 400px; width: 100%;">
+        <img src="file/kiki-bouba-image.png" alt="The classic Kiki/Bouba shapes" style="max-width: 400px; width: 100%;">
         <p style="font-style: italic; color: #888; margin-top: 10px;">
             Which shape is "Kiki"? Which is "Bouba"? If you're like 95% of humans across all cultures, you already know.
         </p>