Update app.py

app.py

@@ -172,6 +172,26 @@ def display_iframe():
 def display_iframe2():
     return iframe2
 
+custom_css = """
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+
+body {
+    font-family: 'Roboto', sans-serif;
+}
+
+.gr-chat-message {
+    background-color: #ff5733 !important; /* Example background color */
+    color: #ffffff !important; /* Example text color */
+}
+
+button a {
+    text-decoration: none;
+    color: white;
+}
+</style>
+"""
+
 theme = gr.themes.Default(
     primary_hue="neutral",
     secondary_hue="neutral",
@@ -191,6 +211,7 @@ theme = gr.themes.Default(
     
 # Setup the Gradio Blocks interface with custom layout components
 with gr.Blocks(theme=theme) as demo:
+    gr.HTML(custom_css)
     gr.Image("CalmConnect.jpg", show_label = False, show_share_button = False, show_download_button = False)
     gr.Markdown(welcome_message)  # Display the formatted welcome message
     with gr.Row():
@@ -211,29 +232,6 @@ with gr.Blocks(theme=theme) as demo:
         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>")
-    
-with gr.Blocks(theme='gstaff/xkcd') as demo:
-    gr.Image("CalmConnect.jpg", show_label = False, show_share_button = False, show_download_button = False)
-    gr.Markdown(welcome_message)  # Display the formatted welcome message
-    with gr.Row():
-        with gr.Column():
-            gr.Markdown(topics)  # Show the topics on the left side
-            gr.HTML(display_iframe())  # Embed the iframe on the left side
-            gr.HTML(display_iframe2())  # Embed the iframe on the right side
-        with gr.Column():
-            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():
-        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>")
-        
 
 
 demo.launch()