Update app.py

app.py

@@ -1,14 +1,11 @@
-import time
 from streamlit_extras.colored_header import colored_header
 from streamlit_extras.add_vertical_space import add_vertical_space
-from streamlit_card import card
-import plotly.graph_objects as go
-import streamlit as st
-import torch
 from PIL import Image
 import numpy as np
 from transformers import ViTFeatureExtractor, ViTForImageClassification
 from sentence_transformers import SentenceTransformer
+import streamlit as st
+import torch
 import matplotlib.pyplot as plt
 import logging
 import faiss
@@ -17,6 +14,9 @@ from datetime import datetime
 from groq import Groq
 import os
 from functools import lru_cache
+import time
+from streamlit_card import card
+import plotly.graph_objects as go
 
 # Setup logging
 logging.basicConfig(level=logging.INFO)
@@ -343,8 +343,23 @@ def get_groq_response(query: str, context: str) -> str:
         return f"Error: Unable to get response from AI model. Exception: {str(e)}"
 
 
-def create_plotly_confidence_chart(results):
-    """Create an interactive confidence chart using Plotly"""
+def create_plotly_confidence_chart(results, chart_id):
+    """Create an interactive confidence chart using Plotly with unique ID"""
+    colors = {
+        'light': {
+            'bg': 'white',
+            'text': 'black',
+            'grid': '#eee'
+        },
+        'dark': {
+            'bg': '#262730',
+            'text': 'white',
+            'grid': '#333'
+        }
+    }
+    
+    theme = 'dark' if st.get_option('theme.base') == 'dark' else 'light'
+    
     fig = go.Figure(data=[
         go.Bar(
             x=list(results.values()),
@@ -360,28 +375,39 @@ def create_plotly_confidence_chart(results):
         title='Defect Detection Confidence Levels',
         xaxis_title='Confidence',
         yaxis_title='Defect Type',
-        template='plotly_white',
+        template='plotly_dark' if theme == 'dark' else 'plotly_white',
         height=400,
         margin=dict(l=20, r=20, t=40, b=20),
-        xaxis=dict(range=[0, 1])
+        xaxis=dict(range=[0, 1]),
+        plot_bgcolor=colors[theme]['bg'],
+        paper_bgcolor=colors[theme]['bg'],
+        font=dict(color=colors[theme]['text'])
     )
+    
     return fig
 
 def create_defect_card(title, description, severity, repair_method):
-    """Create a styled card for defect information"""
+    """Create a styled card for defect information with theme support"""
     severity_colors = {
-        "Critical": "red",
-        "High": "orange",
-        "Medium": "yellow",
-        "Low": "green"
+        "Critical": "#ff4444",
+        "High": "#ffa000",
+        "Medium": "#ffeb3b",
+        "Low": "#4caf50"
     }
     
+    # Get current theme
+    is_dark = st.get_option('theme.base') == 'dark'
+    
+    bg_color = '#1e1e1e' if is_dark else '#ffffff'
+    text_color = '#ffffff' if is_dark else '#000000'
+    border_color = '#333333' if is_dark else '#dddddd'
+    
     return f"""
-    <div style="border: 1px solid #ddd; border-radius: 10px; padding: 15px; margin: 10px 0;">
-        <h3 style="color: #1f77b4; margin: 0 0 10px 0;">{title}</h3>
+    <div style="border: 1px solid {border_color}; border-radius: 10px; padding: 15px; margin: 10px 0; background-color: {bg_color}; color: {text_color};">
+        <h3 style="color: {'#00a0dc' if is_dark else '#1f77b4'}; margin: 0 0 10px 0;">{title}</h3>
         <p><strong>Description:</strong> {description}</p>
         <p><strong>Severity:</strong> 
-            <span style="color: {severity_colors.get(severity, 'gray')}">
+            <span style="color: {severity_colors.get(severity, '#808080')}">
                 {severity}
             </span>
         </p>
@@ -389,6 +415,47 @@ def create_defect_card(title, description, severity, repair_method):
     </div>
     """
 
+def get_theme_specific_styles():
+    """Get theme-specific CSS styles"""
+    is_dark = st.get_option('theme.base') == 'dark'
+    
+    if is_dark:
+        return """
+        <style>
+        .stApp {
+            background-color: #0e1117;
+        }
+        .upload-text {
+            border: 2px dashed #444;
+            background-color: #1e1e1e;
+        }
+        .info-box {
+            background-color: #262730;
+            border: 1px solid #333;
+        }
+        .stAlert {
+            background-color: #262730;
+            border: 1px solid #333;
+        }
+        </style>
+        """
+    else:
+        return """
+        <style>
+        .stApp {
+            background-color: #f8f9fa;
+        }
+        .upload-text {
+            border: 2px dashed #ccc;
+            background-color: #ffffff;
+        }
+        .info-box {
+            background-color: #e9ecef;
+            border: 1px solid #dee2e6;
+        }
+        </style>
+        """
+
 def main():
     st.set_page_config(
         page_title="Smart Construction Defect Analyzer",
@@ -397,12 +464,12 @@ def main():
         initial_sidebar_state="expanded"
     )
     
-    # Custom CSS
+    # Apply theme-specific styles
+    st.markdown(get_theme_specific_styles(), unsafe_allow_html=True)
+    
+    # Base CSS that works for both themes
     st.markdown("""
         <style>
-        .stApp {
-            background-color: #f8f9fa;
-        }
         .css-1d391kg {
             padding: 2rem 1rem;
         }
@@ -412,12 +479,9 @@ def main():
         .upload-text {
             text-align: center;
             padding: 2rem;
-            border: 2px dashed #ccc;
             border-radius: 10px;
-            background-color: #ffffff;
         }
         .info-box {
-            background-color: #e9ecef;
             padding: 1rem;
             border-radius: 10px;
             margin: 1rem 0;
@@ -441,6 +505,13 @@ def main():
             color_name="blue-70"
         )
         
+        # Theme selector
+        theme = st.selectbox(
+            "Choose Theme",
+            options=["Light", "Dark"],
+            index=1 if st.get_option('theme.base') == 'dark' else 0
+        )
+        
         if os.getenv("GROQ_API_KEY"):
             st.success("🟢 AI System: Connected")
         else:
@@ -516,9 +587,9 @@ def main():
             if uploaded_file and results:
                 st.markdown("### Analysis Results")
                 
-                # Interactive confidence chart
-                fig = create_plotly_confidence_chart(results)
-                st.plotly_chart(fig, use_container_width=True)
+                # Interactive confidence chart with unique ID
+                fig = create_plotly_confidence_chart(results, "main_analysis")
+                st.plotly_chart(fig, use_container_width=True, key="main_chart")
                 
                 # Most critical defect
                 most_likely_defect = max(results.items(), key=lambda x: x[1])[0]
@@ -564,10 +635,29 @@ def main():
                     with col1:
                         st.image(analysis['image'], caption='Analyzed Image', use_column_width=True)
                     with col2:
-                        fig = create_plotly_confidence_chart(analysis['results'])
-                        st.plotly_chart(fig, use_container_width=True)
+                        # Create chart with unique ID for history items
+                        fig = create_plotly_confidence_chart(analysis['results'], f"history_{i}")
+                        st.plotly_chart(fig, use_container_width=True, key=f"history_chart_{i}")
         else:
             st.info("No analysis history available")
 
+    # Handle theme change
+    if theme == "Dark" and st.get_option('theme.base') != 'dark':
+        st.markdown("""
+            <script>
+                var elements = window.parent.document.getElementsByTagName('iframe');
+                for (var i = 0; i < elements.length; i++) {
+                    if (elements[i].height === '0') {
+                        elements[i].remove();
+                    }
+                }
+            </script>
+            """, unsafe_allow_html=True)
+        st.experimental_set_query_params(theme='dark')
+        st.experimental_rerun()
+    elif theme == "Light" and st.get_option('theme.base') != 'light':
+        st.experimental_set_query_params(theme='light')
+        st.experimental_rerun()
+
 if __name__ == "__main__":
     main()