fixed panel colors

outage_odyssey_ui.py

@@ -548,45 +548,155 @@ Actions taken: Rolled back changes, investigating access controls"""
 
 
     def create_app(self):
+        # Import Gradio inside the method if it's a class method like this
         import gradio as gr
 
-        # Custom CSS for dark Outage Odyssey theme
+        # Custom CSS for dark and light mode compatibility, while respecting Gradio's soft theme
         custom_css = """
-        .gradio-container {
-            background: linear-gradient(#f8b2b2, #c0e0ff);
+        /* Define CSS variables for light and dark modes */
+        :root {
+            /* These variables will define colors for your custom elements */
+            --header-gradient-start-light: #ff6b6b;
+            --header-gradient-end-light: #4ecdc4;
+            --header-text-light: white;
+
+            --panel-bg-light: rgba(255, 122, 127, 0.1); /* Lighter, less opaque for soft theme */
+            --panel-border-light: rgba(255, 255, 255, 0.4);
+            --panel-shadow-light: rgba(0,0,0,0.08);
+
+            --footer-text-light: #666; /* Adjust to match soft theme's subdued text */
+            --footer-link-light: #333; /* Adjust to match soft theme's primary text/link color */
+            --footer-border-light: #ccc;
         }
+
+        /* Gradio adds a 'dark' class to the body when in dark mode */
+        body.dark {
+            --header-gradient-start-dark: #8b0000; /* Darker red for header */
+            --header-gradient-end-dark: #005a5a; /* Darker teal for header */
+            --header-text-dark: white; /* Often still white in dark mode headers */
+
+            --panel-bg-dark: rgba(255, 122, 127, 0.05); /* Even less opaque in dark mode */
+            --panel-border-dark: rgba(0, 0, 0, 0.3);
+            --panel-shadow-dark: rgba(0,0,0,0.5);
+
+            --footer-text-dark: #a0a0a0; /* Lighter for dark mode */
+            --footer-link-dark: #e0e0e0; /* Lighter for dark mode */
+            --footer-border-dark: #555;
+        }
+
+        /* --- Custom Styles Applied to Specific Elements --- */
+
+        /* Main Gradio container - Remove background override for full theme */
+        /* .gradio-container {
+            // REMOVE THIS RULE if you want Gradio's theme background
+            // background: linear-gradient(var(--gradient-start-light), var(--gradient-end-light));
+        }
+        body.dark .gradio-container {
+            // background: linear-gradient(var(--gradient-start-dark), var(--gradient-end-dark));
+        } */
+
+
+        /* Custom Header Styling */
+        .header-container {
+            text-align: center;
+            padding: 20px;
+            background: linear-gradient(90deg, var(--header-gradient-start-light), var(--header-gradient-end-light));
+            border-radius: 15px;
+            margin-bottom: 20px;
+        }
+
+        body.dark .header-container {
+            background: linear-gradient(90deg, var(--header-gradient-start-dark), var(--header-gradient-end-dark));
+        }
+
+        .header-container h1 {
+            color: var(--header-text-light);
+            margin: 0;
+            font-size: 2.5em;
+        }
+        body.dark .header-container h1 {
+            color: var(--header-text-dark);
+        }
+
+        .header-container p {
+            color: var(--header-text-light);
+            margin: 10px 0 0 0;
+            font-size: 1.2em;
+        }
+        body.dark .header-container p {
+            color: var(--header-text-dark);
+        }
+
+
+        /* Custom Panel Styling */
         .panel {
-            background: rgb(255 122 127 / 0.2);
+            background: var(--panel-bg-light);
             backdrop-filter: blur(10px);
             border-radius: 10px;
-            border: 1px solid rgba(255, 255, 255, 0.3);
-            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+            border: 1px solid var(--panel-border-light);
+            box-shadow: 0 4px 8px var(--panel-shadow-light);
             padding: 16px;
         }
-       
+
+        body.dark .panel {
+            background: var(--panel-bg-dark);
+            border: 1px solid var(--panel-border-dark);
+            box-shadow: 0 4px 8px var(--panel-shadow-dark);
+        }
+
+        /* Footer Styling */
+        .footer-container {
+            text-align: center;
+            padding: 20px;
+            margin-top: 20px;
+            border-top: 1px solid var(--footer-border-light); /* Use variable for border */
+        }
+        body.dark .footer-container {
+            border-top: 1px solid var(--footer-border-dark);
+        }
+
+        .footer-container p {
+            color: var(--footer-text-light);
+        }
+        body.dark .footer-container p {
+            color: var(--footer-text-dark);
+        }
+
+        .footer-container a {
+            color: var(--footer-link-light);
+            text-decoration: none; /* Optional: remove underline by default */
+        }
+        body.dark .footer-container a {
+            color: var(--footer-link-dark);
+        }
+
+        .footer-container a:hover {
+            text-decoration: underline; /* Optional: add underline on hover */
+        }
+
+        /* Ensure Markdown elements within panels also respect theme colors */
+        /* Gradio usually handles this well, but explicit rules can be added if needed */
+        .panel h3, .panel p, .panel li {
+            color: inherit; /* Inherit color from parent or Gradio's theme */
+        }
         """
 
         with gr.Blocks(theme="soft", fill_height=True, css=custom_css) as demo:
-            # Add session state to store session-specific data
             session_state = gr.State({})
             stored_messages = gr.State([])
             file_uploads_log = gr.State([])
 
             ## Header
             gr.HTML("""
-            <div style="text-align: center; padding: 20px; background: linear-gradient(90deg, #ff6b6b, #4ecdc4); border-radius: 15px; margin-bottom: 20px;">
-                <h1 style="color: white; margin: 0; font-size: 2.5em;">🚨 Outage Odyssey 🧩</h1>
-                <p style="color: white; margin: 10px 0 0 0; font-size: 1.2em;">Transform boring incidents into hilarious learning experiences!</p>
-            </div>
+            <div class="header-container"> <h1>🚨 Outage Odyssey 🧩</h1> <p>Transform boring incidents into hilarious learning experiences!</p> </div>
             """)
-            with gr.Tab("Home"):
+            with gr.Tab("The Outage Portal"):
                 with gr.Row():
                     with gr.Column(scale=1):
                         with gr.Group():
-                            # 🚨 Incident Input heading uses panel styling
-                            gr.Markdown("### 🚨 **Incident Input**")
+                            gr.Markdown("### 🚨 **Incident Input**",
+                                        elem_classes="panel")  # Apply panel class to Markdown if desired
 
-                            # Quick templates dropdown (unchanged)
                             with gr.Row(elem_classes="panel"):
                                 template_dropdown = gr.Dropdown(
                                     choices=["server_down", "database_slow", "network_issue", "security_breach"],
@@ -594,29 +704,20 @@ Actions taken: Rolled back changes, investigating access controls"""
                                     value=None,
                                 )
 
-                            # Text input box (by default it’s white; leave as-is or wrap in panel if you want)
                             text_input = gr.Textbox(
                                 lines=8,
                                 label="Describe your IT incident",
-                                container=False,
+                                container=False,  # This means it won't be wrapped in a default Gradio container
                                 placeholder="Paste your incident report here or describe what went wrong...",
-
                             )
 
                             submit_btn = gr.Button("✨ Generate Comic Story", variant="primary", size="lg")
 
-                            def load_template(template_type):
-                                if template_type:
-                                    return self.get_incident_template(template_type)
-                                return ""
-
-                            template_dropdown.change(load_template, [template_dropdown], [text_input])
+                            template_dropdown.change(self.get_incident_template, [template_dropdown], [text_input])
 
-                        # File upload section
                         if self.file_upload_folder is not None:
                             with gr.Group():
-                                # Attach panel styling to the Markdown above and below
-                                gr.Markdown("### 📁 **Upload Incident Files**")
+                                gr.Markdown("### 📁 **Upload Incident Files**", elem_classes="panel")
                                 upload_file = gr.File(
                                     label="Upload incident reports, logs, or documentation",
                                     file_types=[".pdf", ".docx", ".txt", ".json", ".log", ".csv", ".xlsx"]
@@ -627,12 +728,12 @@ Actions taken: Rolled back changes, investigating access controls"""
                                     [upload_file, file_uploads_log],
                                     [upload_status, file_uploads_log],
                                 )
-                        with gr.Accordion("ℹ️ Note on Incident Template", open=False):
-                                                    gr.Markdown("""
-                            > ⚠️ **Note:** The incident templates are just examples to help you get started. Feel free to modify them or describe your own incidents in detail. The more specific you are, the better the analysis and comic story will be!""")
-                        # Help section wrapped in a styled Accordion
-                        with gr.Accordion("ℹ️ How it works", open=False, ):
-                            # Markdown inside the accordion should also pick up “panel” styles
+                        with gr.Accordion("ℹ️ Note on Incident Template", open=False,
+                                        elem_classes="panel"):  # Apply panel class
+                            gr.Markdown("""
+                                > ⚠️ **Note:** The incident templates are just examples to help you get started. Feel free to modify them or describe your own incidents in detail. The more specific you are, the better the analysis and comic story will be!""")
+
+                        with gr.Accordion("ℹ️ How it works", open=False, elem_classes="panel"):  # Apply panel class
                             gr.Markdown("""
                             ### 🎯 **What Outage Odyssey does:**
                             1. **🔍 Analyze** your IT incident
@@ -651,7 +752,6 @@ Actions taken: Rolled back changes, investigating access controls"""
 
                     with gr.Column(scale=2):
                         with gr.Group():
-                        # Main chat interface (already has elem_classes="chatbot")
                             chatbot = gr.Chatbot(
                                 label="🤖 Outage Odyssey Agent",
                                 type="messages",
@@ -665,22 +765,18 @@ Actions taken: Rolled back changes, investigating access controls"""
                                     {"left": r"$$", "right": r"$$", "display": True},
                                     {"left": r"$", "right": r"$", "display": False},
                                 ],
-                                elem_classes="chatbot"  # <-- You already had this, leaving it in place
+                                elem_classes="chatbot"
                             )
-                        with gr.Accordion("ℹ️ Note on generated Image", open=False):
+                        with gr.Accordion("ℹ️ Note on generated Image", open=False,
+                                        elem_classes="panel"):  # Apply panel class
                             gr.Markdown("""
-    > ⚠️ **Note:** Due to a rendering issue, the generated images may not appear directly in the chatbot window. Please go to the "Generated Images" tab and click the "Refresh" button to view the latest image and download them.
-    """)
+                            > ⚠️ **Note:** Due to a rendering issue, the generated images may not appear directly in the chatbot window. Please go to the "Generated Images" tab and click the "Refresh" button to view the latest image and download them.
+                            """)
             with gr.Tab("Generated Images"):
                 with gr.Row():
                     with gr.Column():
-                        
-                        # Markdown for the gallery section
                         gr.Markdown("### 🎨 **Generated Comic Panels**", elem_classes="panel")
-                        # Button to trigger image generation
                         generate_image_button = gr.Button("🔁 Refresh Comic Panel")
-
-                        # Gallery to display generated images
                         image_gallery = gr.Gallery(
                             label="Comic Panels",
                             show_label=True,
@@ -688,23 +784,21 @@ Actions taken: Rolled back changes, investigating access controls"""
                             rows=5,
                             height="auto",
                             elem_classes="gallery",
-                            value=self.update_gallery() # Load existing images on startup
+                            value=self.update_gallery()
                         )
-                        # Connect the button click to the function that generates and updates the gallery
                         generate_image_button.click(
                             fn=self.update_gallery,
-                            outputs=image_gallery # The output of the function updates the gallery
+                            outputs=image_gallery
                         )
 
             with gr.Tab("About"):
                 with gr.Row():
-                    # About section
                     with gr.Column(scale=1):
                         gr.Markdown("""
                         ### 🤖 **About Outage Odyssey**
                         Outage Odyssey is a fun and educational tool that transforms IT incidents into engaging comic stories! 
                         Upload your incident reports, describe what went wrong, and watch as we analyze the root cause, generate solutions, and create a hilarious comic strip to help you learn from IT mishaps.
-                        
+
                         ### 🚀 **Powered by:**
                         - [HuggingFace](https://huggingface.co/)
                         - [Gradio](https://gradio.app/)
@@ -714,23 +808,18 @@ Actions taken: Rolled back changes, investigating access controls"""
                         - [Nebius](https://nebius.com/)
                         - [Mistral](https://mistral.ai/)
                         - [Hyperbolic](https://hyperbolic.xyz/)
-                        
+
                         ### 🎭 **Making IT incidents fun to learn from, one comic at a time!**
                         """, elem_classes="panel")
-                        # Add a link to the GitHub repository
                         gr.Markdown("""
                         ### 📖 **Source Code**
                         Check out the source code on [GitHub](https://github.com/Mandark-droid/OutageOdyssey)
                         """, elem_classes="panel")
-            
 
-            # Footer (unchanged)
+            # Footer
             gr.HTML("""
-            <div style="text-align: center; padding: 20px; margin-top: 20px; border-top: 1px solid #555;">
-                <p style="color: #999;">🚀 <strong>Gradio Agents & MCP Hackathon Project</strong> | Powered by <a href="https://huggingface.co/" target="_blank">HuggingFace</a> | <a href="https://github.com/huggingface/smolagents" target="_blank">smolagents</a> | <a href="https://gradio.app/" target="_blank">Gradio</a> | <a href="https://modelcontextprotocol.io/" target="_blank">MCP</a> | <a href="https://anthropic.com/" target="_blank">Anthropic</a> | <a href="https://openai.com/" target="_blank">OpenAI</a> | <a href="https://nebius.com/" target="_blank">Nebius</a> | <a href="https://mistral.ai/" target="_blank">Mistral</a> | <a href="https://hyperbolic.xyz/" target="_blank">Hyperbolic</a></p>
-                <p style="color: #777; font-size: 0.9em;">Making IT incidents fun to learn from, one comic at a time! 🎭</p>
-                <p style="color: #777; font-size: 0.5em;">Developed by <strong><a href="https://huggingface.co/kshitijthakkar" target="_blank">Kshitij Thakkar</a></strong> — Building smart tools for better learning experiences. © 2025</p>
-            </div>
+            <div class="footer-container"> <p>🚀 <strong>Gradio Agents & MCP Hackathon Project</strong> | Powered by <a href="https://huggingface.co/" target="_blank">HuggingFace</a> | <a href="https://github.com/huggingface/smolagents" target="_blank">smolagents</a> | <a href="https://gradio.app/" target="_blank">Gradio</a> | <a href="https://modelcontextprotocol.io/" target="_blank">MCP</a> | <a href="https://anthropic.com/" target="_blank">Anthropic</a> | <a href="https://openai.com/" target="_blank">OpenAI</a> | <a href="https://nebius.com/" target="_blank">Nebius</a> | <a href="https://mistral.ai/" target="_blank">Mistral</a> | <a href="https://hyperbolic.xyz/" target="_blank">Hyperbolic</a></p>
+                <p style="font-size: 0.9em;">Making IT incidents fun to learn from, one comic at a time! 🎭</p> <p style="font-size: 0.5em;">Developed by <strong><a href="https://huggingface.co/kshitijthakkar" target="_blank">Kshitij Thakkar</a></strong> — Building smart tools for better learning experiences. © 2025</p> </div>
             """)
 
             # Set up event handlers
@@ -776,7 +865,6 @@ Actions taken: Rolled back changes, investigating access controls"""
 
         return demo
 
-
 # Backward compatibility aliases
 class ITOpsComicUI(OutageOdysseyUI):
     """Alias for backward compatibility"""