Update app.py

app.py

@@ -16,13 +16,13 @@ image_model = AutoModelForImageClassification.from_pretrained(image_model_name)
 
 # Islamic advice mapping based on emotion
 islamic_advice = {
-    "sadness": "\"Do not grieve; indeed Allah is with us.\"\n\n**Arabic:** لَا تَحْزَنْ إِنَّ اللَّهَ مَعَنَا\n(Qur'an, At-Tawbah 9:40)",
-    "joy": "\"If you are grateful, I will surely increase your favor.\"\n\n**Arabic:** لَئِن شَكَرْتُمْ لَأَزِيدَنَّكُمْ\n(Qur'an, Ibrahim 14:7)",
-    "fear": "\"Sufficient for us is Allah, and [He is] the best Disposer of affairs.\"\n\n**Arabic:** حَسْبُنَا اللَّهُ وَنِعْمَ الْوَكِيلُ\n(Qur'an, Al Imran 3:173)",
-    "anger": "\"The strong is not the one who overcomes people by his strength, but the strong is the one who controls himself while in anger.\"\n\n(Hadith, Sahih al-Bukhari 6114)",
-    "confusion": "\"Seek help through patience and prayer.\"\n\n**Arabic:** وَاسْتَعِينُوا بِالصَّبْرِ وَالصَّلَاةِ\n(Qur'an, Al-Baqarah 2:45)",
-    "love": "\"Indeed, those who have believed and done righteous deeds - the Most Merciful will appoint for them affection.\"\n\n**Arabic:** سَيَجْعَلُ لَهُمُ الرَّحْمَٰنُ وُدًّا\n(Qur'an, Maryam 19:96)",
-    "neutral": "May Allah always guide your heart in every situation."
+    "sadness": "<div class='notion-card'><h3>\u201cDo not grieve; indeed Allah is with us.\u201d</h3><p><strong>Arabic:</strong> <span style='font-size: 1.2em;'>لَا تَحْزَنْ إِنَّ اللَّهَ مَعَنَا</span><br><em>Qur'an, At-Tawbah 9:40</em></p></div>",
+    "joy": "<div class='notion-card'><h3>\u201cIf you are grateful, I will surely increase your favor.\u201d</h3><p><strong>Arabic:</strong> <span style='font-size: 1.2em;'>لَئِن شَكَرْتُمْ لَأَزِيدَنَّكُمْ</span><br><em>Qur'an, Ibrahim 14:7</em></p></div>",
+    "fear": "<div class='notion-card'><h3>\u201cSufficient for us is Allah, and [He is] the best Disposer of affairs.\u201d</h3><p><strong>Arabic:</strong> <span style='font-size: 1.2em;'>حَسْبُنَا اللَّهُ وَنِعْمَ الْوَكِيلُ</span><br><em>Qur'an, Al Imran 3:173</em></p></div>",
+    "anger": "<div class='notion-card'><h3>\u201cThe strong is not the one who overcomes people by his strength, but the strong is the one who controls himself while in anger.\u201d</h3><p><em>Hadith, Sahih al-Bukhari 6114</em></p></div>",
+    "confusion": "<div class='notion-card'><h3>\u201cSeek help through patience and prayer.\u201d</h3><p><strong>Arabic:</strong> <span style='font-size: 1.2em;'>وَاسْتَعِينُوا بِالصَّبْرِ وَالصَّلَاةِ</span><br><em>Qur'an, Al-Baqarah 2:45</em></p></div>",
+    "love": "<div class='notion-card'><h3>\u201cIndeed, those who have believed and done righteous deeds - the Most Merciful will appoint for them affection.\u201d</h3><p><strong>Arabic:</strong> <span style='font-size: 1.2em;'>سَيَجْعَلُ لَهُمُ الرَّحْمَٰنُ وُدًّا</span><br><em>Qur'an, Maryam 19:96</em></p></div>",
+    "neutral": "<div class='notion-card'><h3>May Allah always guide your heart in every situation.</h3></div>"
 }
 
 # Analyze image emotion using processor and model
@@ -36,41 +36,9 @@ def analyze_image_emotion(image):
     pred_idx = torch.argmax(probs).item()
     label = image_model.config.id2label[pred_idx].lower()
     score = probs[pred_idx].item()
-    islamic = islamic_advice.get(label, "May Allah always guide your heart.")
+    islamic = islamic_advice.get(label, islamic_advice["neutral"])
     return f"{label.capitalize()} ({score:.2f})", islamic
 
-# Emotion label to icon mapping (subset)
-emotion_icons = {
-    "admiration": "😍",
-    "amusement": "😅",
-    "anger": "😡",
-    "annoyance": "😑",
-    "approval": "👍",
-    "caring": "💗",
-    "confusion": "🤔",
-    "curiosity": "😮",
-    "desire": "🤤",
-    "disappointment": "😞",
-    "disapproval": "👎",
-    "disgust": "🤮",
-    "embarrassment": "😳",
-    "excitement": "🎉",
-    "fear": "😱",
-    "gratitude": "🙏",
-    "grief": "😭",
-    "joy": "😃",
-    "love": "❤️",
-    "nervousness": "🤧",
-    "optimism": "😊",
-    "pride": "😎",
-    "realization": "🤯",
-    "relief": "😌",
-    "remorse": "😔",
-    "sadness": "😢",
-    "surprise": "😲",
-    "neutral": "😐"
-}
-
 # Analyze text emotion
 def get_emotions(text, threshold):
     inputs = tokenizer(text, return_tensors="pt", truncation=True, padding=True)
@@ -81,10 +49,10 @@ def get_emotions(text, threshold):
     top_idx = torch.argmax(probs).item()
     top_label = model.config.id2label[top_idx].lower()
     top_score = probs[top_idx].item()
-    islamic = islamic_advice.get(top_label, "May Allah always guide your heart.")
+    islamic = islamic_advice.get(top_label, islamic_advice["neutral"])
 
     labels = [model.config.id2label[i] for i, p in enumerate(probs) if p > threshold]
-    icons = [emotion_icons.get(label, '') + ' ' + label.capitalize() + f" ({probs[i]:.2f})" for i, label in enumerate(labels)]
+    icons = [f"{label.capitalize()} ({probs[i]:.2f})" for i, label in enumerate(labels)]
 
     result = ", ".join(icons) if icons else "No strong emotion detected."
     return result, islamic
@@ -98,31 +66,49 @@ def analyze_combined(text, threshold, image):
 # Gradio UI
 custom_css = """
 body {
-  background: linear-gradient(to right, #f9f9f9, #d4ecff);
-  font-family: 'Segoe UI', sans-serif;
+  background: #f9fafb;
+  font-family: 'Inter', sans-serif;
+  color: #1f2937;
+  padding: 20px;
 }
 .gr-button {
-  background-color: #007BFF !important;
+  background-color: #3b82f6 !important;
   color: white !important;
   border-radius: 8px !important;
-  font-weight: bold;
+  font-weight: 600;
+  padding: 10px 20px;
 }
 .gr-button:hover {
-  background-color: #0056b3 !important;
+  background-color: #2563eb !important;
 }
-.gr-textbox {
-  border-radius: 8px !important;
-  border: 1px solid #ccc !important;
-  padding: 10px !important;
+.gr-textbox, .output-textbox {
+  border-radius: 12px !important;
+  border: 1px solid #d1d5db !important;
+  padding: 12px !important;
+  font-size: 1rem;
 }
 .output-textbox {
-  font-size: 1.5rem;
-  font-weight: bold;
-  color: #333;
-  background-color: #f1f9ff;
-  border-radius: 8px;
-  padding: 10px;
-  border: 1px solid #007BFF;
+  background-color: #ffffff;
+  border: 1px solid #60a5fa;
+}
+.notion-card {
+  background: #ffffff;
+  border-radius: 12px;
+  border: 1px solid #e5e7eb;
+  padding: 16px;
+  margin-top: 12px;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
+}
+.notion-card h3 {
+  margin-top: 0;
+  color: #111827;
+  font-size: 1.1rem;
+  margin-bottom: 6px;
+}
+.notion-card p {
+  font-size: 0.95rem;
+  color: #374151;
+  margin: 0;
 }
 """
 
@@ -134,15 +120,15 @@ demo = gr.Interface(
         gr.Image(type="pil", label="Upload Face Photo")
     ],
     outputs=[
-        gr.Textbox(label="Detected Text Emotions", elem_classes=["output-textbox"]),
-        gr.Textbox(label="Quranic/Hadith Advice (Text)", elem_classes=["output-textbox"]),
-        gr.Textbox(label="Detected Photo Emotion", elem_classes=["output-textbox"]),
-        gr.Textbox(label="Quranic/Hadith Advice (Image)", elem_classes=["output-textbox"])
+        gr.Textbox(label="Detected Text Emotions", elem_classes=["output-textbox"], lines=1),
+        gr.HTML(label="Quranic/Hadith Advice (Text)"),
+        gr.Textbox(label="Detected Photo Emotion", elem_classes=["output-textbox"], lines=1),
+        gr.HTML(label="Quranic/Hadith Advice (Image)")
     ],
-    title="🥰 Multi-Modal Emotion Detector with Islamic Insight",
-    description="Analyze emotion from both text and a facial photo. Then receive inspirational Islamic advice based on your mood.",
+    title="🧠 EmotionLens: Understand & Reflect Emotionally",
+    description="An AI-powered emotional intelligence assistant with Islamic wisdom. Analyze how you feel from text and facial expressions, and receive gentle spiritual insight.",
     theme="default",
     css=custom_css
 )
 
-demo.launch()
+demo.launch()