Update app.py

app.py

@@ -13,13 +13,13 @@ image_processor = AutoImageProcessor.from_pretrained(image_model_name)
 image_model = AutoModelForImageClassification.from_pretrained(image_model_name)
 
 islamic_advice = {
-    "sadness": "<h1 class='emoji'>😢</h1><div class='notion-card'><h3>Sadness</h3><p><strong>“Do not grieve; indeed Allah is with us.”</strong><br><span class='arabic'>لَا تَحْزَنْ إِنَّ اللَّهَ مَعَنَا</span><br><em>Qur'an, At-Tawbah 9:40</em></p></div>",
-    "joy": "<h1 class='emoji'>😃</h1><div class='notion-card'><h3>Joy</h3><p><strong>“If you are grateful, I will surely increase your favor.”</strong><br><span class='arabic'>لَئِن شَكَرْتُمْ لَأَزِيدَنَّكُمْ</span><br><em>Qur'an, Ibrahim 14:7</em></p></div>",
-    "fear": "<h1 class='emoji'>😱</h1><div class='notion-card'><h3>Fear</h3><p><strong>“Sufficient for us is Allah, and [He is] the best Disposer of affairs.”</strong><br><span class='arabic'>حَسْبُنَا اللَّهُ وَنِعْمَ الْوَكِيلُ</span><br><em>Qur'an, Al Imran 3:173</em></p></div>",
-    "anger": "<h1 class='emoji'>😡</h1><div class='notion-card'><h3>Anger</h3><p><strong>“The strong is not the one who overcomes people by his strength, but the strong is the one who controls himself while in anger.”</strong><br><em>Hadith, Sahih al-Bukhari 6114</em></p></div>",
-    "confusion": "<h1 class='emoji'>🤔</h1><div class='notion-card'><h3>Confusion</h3><p><strong>“Seek help through patience and prayer.”</strong><br><span class='arabic'>وَاسْتَعِينُوا بِالصَّبْرِ وَالصَّلَاةِ</span><br><em>Qur'an, Al-Baqarah 2:45</em></p></div>",
-    "love": "<h1 class='emoji'>❤️</h1><div class='notion-card'><h3>Love</h3><p><strong>“Indeed, those who have believed and done righteous deeds - the Most Merciful will appoint for them affection.”</strong><br><span class='arabic'>سَيَجْعَلُ لَهُمُ الرَّحْمَٰنُ وُدًّا</span><br><em>Qur'an, Maryam 19:96</em></p></div>",
-    "neutral": "<h1 class='emoji'>😐</h1><div class='notion-card'><h3>Neutral</h3><p><strong>May Allah always guide your heart in every situation.</strong></p></div>"
+    "sadness": "<h1 class='emoji'>😢</h1><div class='notion-card animated'><h3>Sadness</h3><p><strong>“Do not grieve; indeed Allah is with us.”</strong><br><span class='arabic'>لَا تَحْزَنْ إِنَّ اللَّهَ مَعَنَا</span><br><em>Qur'an, At-Tawbah 9:40</em></p></div>",
+    "joy": "<h1 class='emoji'>😃</h1><div class='notion-card animated'><h3>Joy</h3><p><strong>“If you are grateful, I will surely increase your favor.”</strong><br><span class='arabic'>لَئِن شَكَرْتُمْ لَأَزِيدَنَّكُمْ</span><br><em>Qur'an, Ibrahim 14:7</em></p></div>",
+    "fear": "<h1 class='emoji'>😱</h1><div class='notion-card animated'><h3>Fear</h3><p><strong>“Sufficient for us is Allah, and [He is] the best Disposer of affairs.”</strong><br><span class='arabic'>حَسْبُنَا اللَّهُ وَنِعْمَ الْوَكِيلُ</span><br><em>Qur'an, Al Imran 3:173</em></p></div>",
+    "anger": "<h1 class='emoji'>😡</h1><div class='notion-card animated'><h3>Anger</h3><p><strong>“The strong is not the one who overcomes people by his strength, but the strong is the one who controls himself while in anger.”</strong><br><em>Hadith, Sahih al-Bukhari 6114</em></p></div>",
+    "confusion": "<h1 class='emoji'>🤔</h1><div class='notion-card animated'><h3>Confusion</h3><p><strong>“Seek help through patience and prayer.”</strong><br><span class='arabic'>وَاسْتَعِينُوا بِالصَّبْرِ وَالصَّلَاةِ</span><br><em>Qur'an, Al-Baqarah 2:45</em></p></div>",
+    "love": "<h1 class='emoji'>❤️</h1><div class='notion-card animated'><h3>Love</h3><p><strong>“Indeed, those who have believed and done righteous deeds - the Most Merciful will appoint for them affection.”</strong><br><span class='arabic'>سَيَجْعَلُ لَهُمُ الرَّحْمَٰنُ وُدًّا</span><br><em>Qur'an, Maryam 19:96</em></p></div>",
+    "neutral": "<h1 class='emoji'>😐</h1><div class='notion-card animated'><h3>Neutral</h3><p><strong>May Allah always guide your heart in every situation.</strong></p></div>"
 }
 
 def analyze_combined(text, threshold, image):
@@ -57,6 +57,7 @@ body {
   border-radius: 8px !important;
   font-weight: 600;
   padding: 10px 20px;
+  transition: background-color 0.3s ease;
 }
 .gr-button:hover {
   background-color: #2563eb !important;
@@ -67,10 +68,11 @@ body {
   border: 1px solid #e5e7eb;
   padding: 16px;
   margin-top: 12px;
-  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
+  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
   max-width: 600px;
   margin-left: auto;
   margin-right: auto;
+  animation: fadeInUp 0.6s ease-out;
 }
 .notion-card h3 {
   margin-top: 0;
@@ -89,6 +91,7 @@ body {
   font-size: 3rem;
   margin: 0;
   padding: 0;
+  animation: popIn 0.5s ease;
 }
 .arabic {
   font-size: 1.3rem;
@@ -99,6 +102,26 @@ body {
   text-align: right;
   font-family: 'Scheherazade', serif;
 }
+@keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes popIn {
+  0% {
+    transform: scale(0.5);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
 """
 
 demo = gr.Interface(