Update app.py

app.py

@@ -14,7 +14,6 @@ import folium
 import torch
 import pandas as pd
 from sklearn.preprocessing import LabelEncoder
-from sklearn.model_selection import train_test_split
 from sklearn.tree import DecisionTreeClassifier
 from sklearn.ensemble import RandomForestClassifier
 from sklearn.naive_bayes import GaussianNB
@@ -255,45 +254,57 @@ def predict_disease(symptoms):
 
     return "\n".join(markdown_output)
 
-# JavaScript code for the animated welcome message
-js = """
-function createGradioAnimation() {
-    var container = document.createElement('div');
-    container.id = 'gradio-animation';
-    container.style.fontSize = '2em';
-    container.style.fontWeight = 'bold';
-    container.style.textAlign = 'center';
-    container.style.marginBottom = '20px';
-
-    var text = 'Welcome to the Well-Being Companion!';
-    for (var i = 0; i < text.length; i++) {
-        (function(i){
-            setTimeout(function(){
-                var letter = document.createElement('span');
-                letter.style.opacity = '0';
-                letter.style.transition = 'opacity 0.5s';
-                letter.innerText = text[i];
-
-                container.appendChild(letter);
-
-                setTimeout(function() {
-                    letter.style.opacity = '1';
-                }, 50);
-            }, i * 250);
-        })(i);
+# CSS for the animated welcome message and improved styles
+welcome_message = """
+<style>
+    @keyframes fadeIn {
+        0% { opacity: 0; }
+        100% { opacity: 1; }
     }
-
-    var gradioContainer = document.querySelector('.gradio-container');
-    gradioContainer.insertBefore(container, gradioContainer.firstChild);
-}
-createGradioAnimation();  // Automatically create the animation upon load
+    #welcome-message {
+        font-size: 2em;
+        font-weight: bold;
+        text-align: center;
+        animation: fadeIn 3s ease-in-out;
+        margin-bottom: 20px;
+    }
+    .info-graphic {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin: 20px 0;
+    }
+    .info-graphic img {
+        width: 150px;  /* Adjust size as needed */
+        height: auto;  /* Keep aspect ratio */
+        margin: 0 10px;  /* Space between images */
+    }
+    h1 {
+        text-align: center;  /* Center-align the main title */
+        font-size: 3em;  /* Increase title size */
+        color: #004d40;  /* Use your theme's color */
+        margin-bottom: 20px;  /* Space below the title */
+    }
+</style>
+<div id="welcome-message">Welcome to the Well-Being Companion!</div>
 """
 
-# Gradio Application Interface with JS Animation
-with gr.Blocks(js=js) as app:
-    gr.HTML("<h1 id='welcome-title'>🌟 Well-Being Companion</h1>")  # Title for the app
+# Gradio Application Interface
+with gr.Blocks(css="calm_seafoam.css", theme=gr.themes.Soft()) as app:
+    gr.HTML(welcome_message)  # Animated welcome message
 
     with gr.Tab("Well-Being Chatbot"):
+        gr.HTML("<h1>🌟 Well-Being Chatbot 🌟</h1>")  # Centered title for the chatbot tab
+
+        # Infographics with images
+        gr.HTML("""
+        <div class="info-graphic">
+            <img src="https://example.com/image1.png" alt="Wellness Image 1">
+            <img src="https://example.com/image2.png" alt="Wellness Image 2">
+            <img src="https://example.com/image3.png" alt="Wellness Image 3">
+        </div>
+        """)  # Replace these URLs with your actual image links
+
         with gr.Row():
             user_input = gr.Textbox(label="Please Enter Your Message Here", placeholder="Type your message here...", max_lines=3)
             location = gr.Textbox(label="Please Enter Your Current Location", placeholder="E.g., Honolulu", max_lines=1)