Update app.py

app.py

@@ -4,33 +4,187 @@ from transformers import pipeline
 # Load a sentiment analysis model (works on free CPU)
 analyzer = pipeline("sentiment-analysis", model="distilbert-base-uncased-finetuned-sst-2-english")
 
-def check_mood(text):
+# --- Visual Mood Gauge using gr.HTML ---
+
+GAUGE_HTML = """
+<div class="mood-gauge">
+  <div class="gauge-title">Mood Reading</div>
+  <div class="gauge-track">
+    <div class="gauge-fill" style="width: ${value.percent}%; background: ${value.color};"></div>
+  </div>
+  <div class="gauge-labels">
+    <span class="label-neg">NEGATIVE</span>
+    <span class="label-pos">POSITIVE</span>
+  </div>
+  <div class="gauge-result" style="color: ${value.color};">
+    <span class="gauge-emoji">${value.emoji}</span>
+    <span class="gauge-label">${value.label}</span>
+  </div>
+  <div class="gauge-confidence">${value.confidence}</div>
+  <div class="gauge-hint">${value.hint}</div>
+</div>
+"""
+
+GAUGE_CSS = """
+.mood-gauge {
+  font-family: 'Segoe UI', system-ui, sans-serif;
+  max-width: 480px;
+  margin: 0 auto;
+  padding: 28px 24px;
+  text-align: center;
+}
+.gauge-title {
+  font-size: 13px;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  color: #888;
+  margin-bottom: 20px;
+}
+.gauge-track {
+  height: 28px;
+  background: #e8e8e8;
+  border-radius: 14px;
+  overflow: hidden;
+  position: relative;
+  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
+}
+.gauge-fill {
+  height: 100%;
+  border-radius: 14px;
+  transition: width 0.8s ease, background 0.8s ease;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+}
+.gauge-labels {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 6px;
+  font-size: 10px;
+  letter-spacing: 1px;
+  color: #aaa;
+}
+.gauge-result {
+  margin-top: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+.gauge-emoji {
+  font-size: 48px;
+  line-height: 1;
+}
+.gauge-label {
+  font-size: 28px;
+  font-weight: 700;
+  letter-spacing: 1px;
+}
+.gauge-confidence {
+  margin-top: 8px;
+  font-size: 18px;
+  color: #666;
+}
+.gauge-hint {
+  margin-top: 16px;
+  font-size: 13px;
+  color: #999;
+  font-style: italic;
+  min-height: 20px;
+}
+"""
+
+GAUGE_JS = """
+// Animate the fill bar on load
+const fill = element.querySelector('.gauge-fill');
+if (fill) {
+  const target = fill.style.width;
+  fill.style.width = '0%';
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      fill.style.width = target;
+    });
+  });
+}
+"""
+
+# Default state (before any analysis)
+DEFAULT_STATE = {
+    "percent": 50,
+    "color": "#ccc",
+    "emoji": "...",
+    "label": "",
+    "confidence": "Paste some text and click Submit",
+    "hint": "",
+}
+
+def check_mood(text, gauge_state):
     if not text or not text.strip():
-        return "Paste some text above first!"
+        return DEFAULT_STATE
 
     result = analyzer(text)[0]
     label = result["label"]
     score = result["score"]
 
+    # Map to a 0-100 gauge: 0 = fully negative, 100 = fully positive
     if label == "POSITIVE":
-        emoji = "😊" if score > 0.9 else "🙂"
+        percent = 50 + (score * 50)
+        color = "#2ecc71" if score > 0.9 else "#82c91e"
+        emoji = "\U0001f60a" if score > 0.9 else "\U0001f642"
+    else:
+        percent = 50 - (score * 50)
+        color = "#e74c3c" if score > 0.9 else "#e67e22"
+        emoji = "\U0001f622" if score > 0.9 else "\U0001f610"
+
+    # Confidence hint for students
+    if score > 0.95:
+        hint = "The model is very sure about this one."
+    elif score > 0.8:
+        hint = "Pretty confident, but not 100%. Do you agree?"
     else:
-        emoji = "😢" if score > 0.9 else "😐"
-
-    return f"{emoji} {label}\n\nConfidence: {score:.0%}"
-
-demo = gr.Interface(
-    fn=check_mood,
-    inputs=gr.Textbox(lines=8, placeholder="Paste any text here — a song lyric, a diary entry, a text from a friend..."),
-    outputs=gr.Textbox(label="Mood Reading"),
-    title="Mood Meter",
-    description="Paste any text and this AI will tell you whether it feels POSITIVE or NEGATIVE — and how confident it is. Does the model agree with how YOU feel about the text?",
-    examples=[
-        ["I can't believe how lucky I am to have friends like you. Every day feels like an adventure and I wouldn't trade it for anything in the world."],
-        ["I don't know why I even bother anymore. Nothing I do seems to matter and nobody notices when I try my hardest."],
-        ["Dear future me, I hope you figured it out. I hope you're not still lying awake at 2am wondering if you made the right choice."],
-        ["Walking into school on the first day felt like stepping onto another planet. Everyone already knew each other and I just stood there holding my backpack straps."],
-    ],
-)
+        hint = "The model isn't sure. This text might be ambiguous!"
+
+    return {
+        "percent": round(percent),
+        "color": color,
+        "emoji": emoji,
+        "label": label,
+        "confidence": f"Confidence: {score:.0%}",
+        "hint": hint,
+    }
+
+# --- Build the app with gr.Blocks ---
+
+with gr.Blocks(title="Mood Meter") as demo:
+    gr.Markdown("# Mood Meter")
+    gr.Markdown(
+        "Paste any text and this AI will tell you whether it feels **POSITIVE** or **NEGATIVE** "
+        "— and how confident it is. Does the model agree with how YOU feel about the text?"
+    )
+
+    text_input = gr.Textbox(
+        lines=6,
+        placeholder="Paste any text here — a song lyric, a diary entry, a text from a friend...",
+        label="Your text",
+    )
+
+    submit_btn = gr.Button("Check the Mood", variant="primary")
+
+    gauge = gr.HTML(
+        value=DEFAULT_STATE,
+        html_template=GAUGE_HTML,
+        css_template=GAUGE_CSS,
+        js_on_load=GAUGE_JS,
+    )
+
+    submit_btn.click(fn=check_mood, inputs=[text_input, gauge], outputs=gauge)
+
+    gr.Examples(
+        examples=[
+            "I can't believe how lucky I am to have friends like you. Every day feels like an adventure and I wouldn't trade it for anything in the world.",
+            "I don't know why I even bother anymore. Nothing I do seems to matter and nobody notices when I try my hardest.",
+            "Dear future me, I hope you figured it out. I hope you're not still lying awake at 2am wondering if you made the right choice.",
+            "Walking into school on the first day felt like stepping onto another planet. Everyone already knew each other and I just stood there holding my backpack straps.",
+        ],
+        inputs=[text_input],
+    )
 
 demo.launch()