Update app.py

app.py

@@ -20,6 +20,7 @@ from sklearn.ensemble import RandomForestClassifier
 from sklearn.naive_bayes import GaussianNB
 from sklearn.metrics import accuracy_score
 
+
 # Suppress TensorFlow warnings
 os.environ["CUDA_VISIBLE_DEVICES"] = "-1"
 os.environ["TF_CPP_MIN_LOG_LEVEL"] = "3"
@@ -99,7 +100,7 @@ for model_name, model_obj in models.items():
     acc = accuracy_score(y_test, y_pred)  # Calculate accuracy
     trained_models[model_name] = {'model': model_obj, 'accuracy': acc}
 
-# Helper Functions for Chatbot
+# Helper Functions for Chatbot (no changes)
 def bag_of_words(s, words):
     """Convert user input to bag-of-words vector."""
     bag = [0] * len(words)
@@ -184,7 +185,7 @@ def generate_suggestions(emotion):
             ("Relaxation Video", "https://youtu.be/m1vaUGtyo-A"),
         ],
     }
-    
+
     # Create a markdown string for clickable suggestions in a table format
     formatted_suggestions = ["### Suggestions"]
     formatted_suggestions.append(f"Since you’re feeling {emotion}, you might find these links particularly helpful. Don’t hesitate to explore:")
@@ -215,7 +216,6 @@ def get_health_professionals_and_map(location, query):
                     popup=f"{place['name']}"
                 ).add_to(map_)
             return professionals, map_._repr_html_()
-
         return [], ""  # Return empty list if no professionals found
     except Exception as e:
         return [], ""  # Return empty list on exception
@@ -230,43 +230,19 @@ def app_function_chatbot(user_input, location, query, history):
     return chatbot_history, sentiment_result, emotion_result, suggestions, professionals, map_html
 
 # Disease Prediction Logic
-# def predict_disease(symptoms):
-#     """Predict disease based on input symptoms."""
-#     valid_symptoms = [s for s in symptoms if s is not None]
-#     if len(valid_symptoms) < 3:
-#         return "Please select at least 3 symptoms for a better prediction."
-#     input_test = np.zeros(len(X_train.columns))  # Create an array for feature input
-#     for symptom in symptoms:
-#         if symptom in X_train.columns:
-#             input_test[X_train.columns.get_loc(symptom)] = 1
-#     predictions = {}
-#     for model_name, info in trained_models.items():
-#         prediction = info['model'].predict([input_test])[0]
-#         predicted_disease = label_encoder_train.inverse_transform([prediction])[0]
-#         predictions[model_name] = predicted_disease
-
-#     # Create a Markdown table for displaying predictions
-#     markdown_output = ["### Predicted Diseases"]
-#     markdown_output.append("| Model | Predicted Disease |")
-#     markdown_output.append("|-------|------------------|")  # Table headers
-#     for model_name, disease in predictions.items():
-#         markdown_output.append(f"| {model_name} | {disease} |")
-    
-#     return "\n".join(markdown_output)
 def predict_disease(symptoms):
     """Predict disease based on input symptoms."""
     # Filter out None values
     valid_symptoms = [s for s in symptoms if s is not None]
-    
     # Ensure at least 3 symptoms are selected
     if len(valid_symptoms) < 3:
         return "Please select at least 3 symptoms for a better prediction."
-    
+
     input_test = np.zeros(len(X_train.columns))  # Create an array for feature input
     for symptom in valid_symptoms:
         if symptom in X_train.columns:
             input_test[X_train.columns.get_loc(symptom)] = 1
-    
+
     predictions = {}
     for model_name, info in trained_models.items():
         prediction = info['model'].predict([input_test])[0]
@@ -279,151 +255,56 @@ def predict_disease(symptoms):
     markdown_output.append("|-------|------------------|")  # Table headers
     for model_name, disease in predictions.items():
         markdown_output.append(f"| {model_name} | {disease} |")
-    
-    return "\n".join(markdown_output)
-
-
-from gradio.components import HTML
-
-# Custom CSS for styling
-custom_css = """
-/* Importing Google Fonts */
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 
-/* General Body Styling */
-body {
-    font-family: 'Roboto', sans-serif;
-    background-color: #f0f4f7; /* Light background for better contrast */
-}
-
-/* Header Styling */
-h1, h2, h3, h4 {
-    font-weight: bold; /* Make all headings bold */
-    color: #3c6487; /* Theme color for headings */
-}
-
-h1 {
-    font-size: 2.5rem; /* Bigger header size */
-    background: linear-gradient(135deg, #3c6487, #355f7a); /* Gradient using your color */
-    color: #ffffff;
-    border-radius: 12px;
-    padding: 15px;
-    text-align: center;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect */
-    margin-bottom: 20px; /* Spacing below the header */
-}
-
-/* Button Styling */
-.gr-button {
-    background-color: #3c6487; /* Button background */
-    color: white;
-    border-radius: 8px;
-    padding: 10px 15px; /* Adjusted padding */
-    font-size: 16px; /* Font size for buttons */
-    border: none; /* No border */
-    cursor: pointer; /* Pointer on hover */
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Shadow on button */
-    display: inline-block; /* Inline-block to wrap text */
-    position: relative; /* For pseudo-element positioning */
-    text-decoration: none; /* Remove default underline */
-}
-
-/* Button hover states */
-.gr-button:hover {
-    background: linear-gradient(to right, #a0c4e1, #3c6487); /* Light blue gradient on hover */
-    transition: background 0.3s; /* Ease the background change */
-}
-
-/* Add a blue underline effect */
-.gr-button::after {
-    content: ""; /* Empty content for underline */
-    display: block;
-    width: 100%; /* Full width */
-    height: 3px; /* Height of the underline */
-    background: #3c6487; /* Underline color */
-    position: absolute;
-    bottom: -5px; /* Position it below the text */
-    left: 0;
-    transform: scaleX(0); /* Initially scale to 0 (invisible) */
-    transition: transform 0.3s; /* Smooth transition for the underline */
-}
-
-.gr-button:hover::after {
-    transform: scaleX(1); /* Scale to full width on hover */
-}
-
-/* Input and Textarea Styling */
-textarea, input {
-    background: white; /* Input background */
-    color: black; /* Text color */
-    border: 2px solid #3c6487; /* Matching border color */
-    padding: 10px;
-    font-size: 1rem;
-    border-radius: 10px;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Light shadow for inputs */
-}
-
-textarea:focus, input:focus {
-    border-color: #ae1c93; /* Highlight border color on focus */
-    box-shadow: 0 0 5px rgba(174, 28, 147, 0.5); /* Shadow on focus */
-}
-
-/* DataFrame Container Styling */
-.df-container {
-    background: white; /* Background for data frames */
-    color: black; /* Text color */
-    border: 2px solid #3c6487; /* Matching border color for data frames */
-    border-radius: 10px;
-    padding: 10px;
-    font-size: 14px;
-    max-height: 400px; /* Maximum height for scrolling */
-    overflow-y: auto; /* Enable scrolling */
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Light shadow for data frame */
-}
-
-/* Suggestions Markdown Formatting */
-.markdown {
-    padding: 15px; /* Padding for Markdown sections */
-    border-radius: 10px; /* Round corners for better appearance */
-    background-color: #eaeff1; /* Light background for suggestions */
-    border: 1px solid #3c6487; /* Border to distinguish */
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Light shadow */
-}
-
-@media (max-width: 768px) {
-    h1 {
-        font-size: 2rem; /* Smaller font size for smaller screens */
-        padding: 10px;
-    }
-
-    .gr-button {
-        font-size: 0.9rem; /* Adjusted size for mobile */
-        padding: 8px 16px; /* Adjust padding for mobile */
-        width: auto; /* Maintain auto width */
-    }
+    return "\n".join(markdown_output)
 
-    textarea, input {
-        width: 100%; /* Full width for inputs */
-        margin-bottom: 10px; /* Spacing between inputs */
-    }
-}
-"""
 # Gradio Application Interface
-with gr.Blocks(css=custom_css) as app:
+with gr.Blocks() as app:
     gr.HTML("<h1>🌟 Well-Being Companion</h1>")
     
+    # Theme Dropdown
+    themes = [
+        "calm_seafoam",
+        "Ranko_test"
+    ]
+    
+    theme_dropdown = gr.Dropdown(choices=themes, label="Select Theme")
+    
+    toggle_dark = gr.Button(value="Toggle Dark").style(full_width=True)
+
+    # Theme changing logic
+    theme_dropdown.change(
+        None,
+        None,
+        app,
+        _js=f"""
+        (theme) => {{
+            let themeElem = document.createElement('link');
+            themeElem.rel = 'stylesheet';
+            themeElem.href = '/themes/' + theme + '.css';  // Path to the theme CSS files
+            document.head.appendChild(themeElem);
+        }}
+        """
+    )
+
+    toggle_dark.click(None, _js="""
+    () => {
+        document.body.classList.toggle('dark');
+    }
+    """)
+
     with gr.Tab("Well-Being Chatbot"):
         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 Here", placeholder="E.g., Honolulu", max_lines=1)
+            location = gr.Textbox(label="Please Enter Your Current Location", placeholder="E.g., Honolulu", max_lines=1)
             query = gr.Textbox(label="Search Health Professionals Nearby", placeholder="E.g., Health Professionals", max_lines=1)
-        
+
         submit_chatbot = gr.Button(value="Submit Your Message", variant="primary", icon="fa-paper-plane")
-        
+
         chatbot = gr.Chatbot(label="Chat History", show_label=True)
         sentiment = gr.Textbox(label="Detected Sentiment", show_label=True)
         emotion = gr.Textbox(label="Detected Emotion", show_label=True)
-        
+
         suggestions_markdown = gr.Markdown(label="Suggestions")
         professionals = gr.DataFrame(label="Nearby Health Professionals", headers=["Name", "Address"])
         map_html = gr.HTML(label="Interactive Map")
@@ -435,14 +316,14 @@ with gr.Blocks(css=custom_css) as app:
         )
 
     with gr.Tab("Disease Prediction"):
-        symptom1 = gr.Dropdown(choices=[None] + X_train.columns.tolist(), label="Select Symptom 1", value=None)
-        symptom2 = gr.Dropdown(choices=[None] + X_train.columns.tolist(), label="Select Symptom 2", value=None)
-        symptom3 = gr.Dropdown(choices=[None] + X_train.columns.tolist(), label="Select Symptom 3", value=None)
-        symptom4 = gr.Dropdown(choices=[None] + X_train.columns.tolist(), label="Select Symptom 4", value=None)
-        symptom5 = gr.Dropdown(choices=[None] + X_train.columns.tolist(), label="Select Symptom 5", value=None)
-    
+        symptom1 = gr.Dropdown(choices=[None] + list(X_train.columns), label="Select Symptom 1", value=None)
+        symptom2 = gr.Dropdown(choices=[None] + list(X_train.columns), label="Select Symptom 2", value=None)
+        symptom3 = gr.Dropdown(choices=[None] + list(X_train.columns), label="Select Symptom 3", value=None)
+        symptom4 = gr.Dropdown(choices=[None] + list(X_train.columns), label="Select Symptom 4", value=None)
+        symptom5 = gr.Dropdown(choices=[None] + list(X_train.columns), label="Select Symptom 5", value=None)
+
         submit_disease = gr.Button(value="Predict Disease", variant="primary", icon="fa-stethoscope")
-    
+        
         disease_prediction_result = gr.Markdown(label="Predicted Diseases")
 
         submit_disease.click(
@@ -452,6 +333,5 @@ with gr.Blocks(css=custom_css) as app:
             outputs=disease_prediction_result
         )
 
-
 # Launch the Gradio application
 app.launch()