Update app.py

app.py

@@ -87,15 +87,16 @@ iframe2 = '''
 <iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/6wwxTePuIKYMqt6RCytB7X?utm_source=generator" width="100%" height="300" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
 '''
 
+
 # Define the welcome message and specific topics the chatbot can provide information about
-# (Your welcome message and topics go here)
 welcome_message = """
 <span style="color:#718355; font-size:24px; font-weight:bold;"> 🪷 Welcome to CalmConnect! 🪷</span>
 """
 
-# (Add the comment about the AI-driven assistant if needed)
+"""
+## Your AI-driven assistant for destressing and extracurricular opportunity queries. Created by Olivia W, Alice T, and Cindy W of the 2024 Kode With Klossy CITY Camp. 
+"""
 
-# Define the topics for the chatbot
 topics = """
 ### If you are interested in the following below, click on our Student Opportunities Database!
 - Engineering
@@ -105,7 +106,7 @@ topics = """
 - Law / Political Science / Debate
 - The Arts
 - Business / Leadership
-- Psychology
+- Pyschology
 - Medicine / Biology
 - Literature / Writing
 - College Prep
@@ -114,7 +115,7 @@ topics = """
 - Study Abroad
 """
 
-topics2 = """
+topics2= """
 ### Feel Free to ask CalmBot (Our Therapist Bot) anything from the topics below!
 - Arts and Crafts (When asking for arts and crafts ideas, state whether you have 15 min, 30 min, 45 min, 1 hour, 1 hour and a half, 2 hours, 2 hours and a half, 3 hours or greater)
 - Destressing strategies (Breathing Exercises, stretches, etc.)
@@ -127,32 +128,63 @@ topics2 = """
 - Support Resources
 """
 
+# Create a Gradio HTML component
+def display_iframe():
+    return iframe
+
+def display_iframe2():
+    return iframe2
+
+
+theme = gr.themes.Default(
+    primary_hue="neutral",
+    secondary_hue="neutral",
+).set(
+    background_fill_primary='#e3e9da',
+    background_fill_primary_dark='#e3e9da',
+    background_fill_secondary="#f8f1ea",
+    background_fill_secondary_dark="#f8f1ea",
+    border_color_accent="#f8f1ea",
+    border_color_accent_dark="#e3e9da",
+    border_color_accent_subdued="#f8f1ea",
+    border_color_primary="#f8f1ea",
+    block_border_color="#f8f1ea",
+    button_primary_background_fill="#f8f1ea",
+    button_primary_background_fill_dark="#f8f1ea"
+)
+    
 # Setup the Gradio Blocks interface with custom layout components
-with gr.Blocks() as demo:
+with gr.Blocks(theme=theme) as demo:
     gr.Image("CalmConnect.jpg", show_label=False, show_share_button=False, show_download_button=False)
-    gr.Markdown(welcome_message)
-
+    gr.Markdown(welcome_message)  # Display the formatted welcome message
+    
     with gr.Row():
         with gr.Column():
-            gr.Markdown(topics)
-            gr.HTML(iframe)
-            gr.HTML(iframe2)
+            gr.Markdown(topics)  # Show the topics on the left side
+            gr.HTML(iframe)  # Embed the iframe on the left side
+            gr.HTML(iframe2)  # Embed the iframe on the right side
         
         with gr.Column():
-            gr.Markdown(topics2)
+            gr.Markdown(topics2)  # Show the topics on the left side
             with gr.Row():
                 with gr.Column():
                     question = gr.Textbox(label="You", placeholder="What do you want to talk to CalmBot about?")
                     answer = gr.Textbox(label="CalmBot's Response :D", placeholder="CalmBot will respond here..", interactive=False, lines=20)
                     submit_button = gr.Button("Submit")
                     submit_button.click(fn=query_model, inputs=question, outputs=answer)
-
+    
     with gr.Row():
-        # (Your buttons go here)
         big_block = gr.HTML("### <button><a href='https://www.headspace.com/teens'>FREE: HEADSPACE FOR TEENS </a></button>")
         big_block2 = gr.HTML("<button><a href='https://calmconnect-flower.replit.app/'>PLAY FLOWER GAME</a></button>")
         big_block3 = gr.HTML("<button><a href='https://www.nyc.gov/site/doh/health/health-topics/teenspace.page'>NYC: TEENSPACE (free services)</a></button>")
-        big_block4 = gr.HTML("<button><a href='https://www.teenlife.com/blog/mental-health-resources-for-teens/'>TEEN MENTAL HEALTH RESOURCES (free services)</a></button>")
+        big_block4 =gr.HTML("<button><a href='https://www.teenlife.com/blog/mental-health-resources-for-teens/'>TEEN MENTAL HEALTH RESOURCES (free services)</a></button>")
+
+
+demo.launch()
+
+
+
+
 
 # Launch the Gradio app to allow user interaction
 demo.launch(share=True)