darkmode trial

PanelInterface.py

@@ -10,50 +10,42 @@ logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(
 def build_interface(respondent_agents_dict, processor_llm):
 
     def chatbot_interface(message, history=None):
-        """
-        Handles chatbot interaction for Gradio.
-        Maintains and uses last_respondent_agent from history.
-        """
         if history is None or not isinstance(history, dict):
             history = {"chat": [], "last_respondent_agent": None}
-    
+
         last_respondent_agent = history.get("last_respondent_agent")
         logging.info(f"User message received: {message}")
         logging.info(f"Last respondent agent: {last_respondent_agent}")
-    
+
         try:
-            # Pass last_respondent_agent into the agent selection logic
             responses = ask_interview_question(respondent_agents_dict, last_respondent_agent, message, processor_llm)
             logging.info(f"Interview responses: {responses}")
         except Exception as e:
             logging.error(f"Error during interview processing: {e}")
             responses = [("System", "Sorry, something went wrong.")]
-    
-        # Normalize responses into a list of (agent, response) tuples
+
         if isinstance(responses, str):
             responses = [("System", responses)]
         elif isinstance(responses, list):
             responses = [(r.get("agent", "Unknown"), r.get("response", str(r))) if isinstance(r, dict) else ("Unknown", str(r)) for r in responses]
         else:
             responses = [("Unknown", str(responses))]
-    
-        # Append responses and update last_respondent_agent
+
         for agent, response in responses:
             history["chat"].append({
                 "user": message,
                 "agent": agent,
                 "response": response
             })
-            history["last_respondent_agent"] = agent  # update with most recent
-    
-        # Format for Chatbot display: list of [user, response] pairs
+            history["last_respondent_agent"] = agent
+
         chat_ui = []
         for entry in history["chat"]:
             chat_ui.append({"role": "user", "content": entry["user"]})
             chat_ui.append({"role": "assistant", "content": entry["response"]})
-    
-        return chat_ui, "", history    
-    
+
+        return chat_ui, "", history
+
     logging.info("Building Gradio interface...")
 
     panelists = [
@@ -92,26 +84,81 @@ def build_interface(respondent_agents_dict, processor_llm):
                 - Our agents have been trained exclusively on topics relevant to youth attitudes, behaviours, and lifestyle preferences.
                 - To ensure meaningful and respectful conversations, please do not ask inappropriate, offensive, or out-of-scope questions. 
                 """)
-                
+
                 gr.HTML(f"""
                 <div style='text-align: left;'>
                     <h2>Our Panellists</h2>
                     <i>Click on our panellist's name so they can introduce themselves</i><br>
                     {panel_html}
                 </div>
-                <div id='bioModal' style='display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; border: 1px solid #ccc; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); width: 400px; max-height: 300px; padding: 20px; text-align: left; z-index: 1000; overflow-y: auto;'>
+                <div id='bioModal' style='
+                    display: none;
+                    position: fixed;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                    width: 400px;
+                    max-height: 300px;
+                    padding: 20px;
+                    text-align: left;
+                    z-index: 1000;
+                    overflow-y: auto;
+                    border-radius: 10px;
+                '>
                     <p id='bioContent'></p>
-                    <button onclick='closeModal()' style='margin-top: 10px; padding: 5px 10px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer;'>Close</button>
+                    <button onclick='closeModal()' id='closeButton'>Close</button>
                 </div>
-                <div id='modalBackdrop' style='display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999;' onclick='closeModal()'></div>
+                <div id='modalBackdrop' style='
+                    display: none;
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    z-index: 999;
+                ' onclick='closeModal()'></div>
                 <script>
                     const bios = {json.dumps(bios_js_object)};
+
                     function showModal(event, name) {{
                         event.preventDefault();
-                        document.getElementById('bioContent').innerText = bios[name] || 'Bio not found.';
-                        document.getElementById('bioModal').style.display = 'block';
-                        document.getElementById('modalBackdrop').style.display = 'block';
+
+                        const modal = document.getElementById('bioModal');
+                        const backdrop = document.getElementById('modalBackdrop');
+                        const closeButton = document.getElementById('closeButton');
+                        const bioContent = document.getElementById('bioContent');
+
+                        bioContent.innerText = bios[name] || 'Bio not found.';
+                        modal.style.display = 'block';
+                        backdrop.style.display = 'block';
+
+                        const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+                        if (prefersDark) {{
+                            modal.style.backgroundColor = '#1e1e1e';
+                            modal.style.color = '#ffffff';
+                            modal.style.border = '1px solid #444';
+                            modal.style.boxShadow = '0px 4px 6px rgba(0, 0, 0, 0.8)';
+                            closeButton.style.backgroundColor = '#007bff';
+                            closeButton.style.color = 'white';
+                            backdrop.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
+                        }} else {{
+                            modal.style.backgroundColor = '#ffffff';
+                            modal.style.color = '#000000';
+                            modal.style.border = '1px solid #ccc';
+                            modal.style.boxShadow = '0px 4px 6px rgba(0, 0, 0, 0.2)';
+                            closeButton.style.backgroundColor = '#007bff';
+                            closeButton.style.color = 'white';
+                            backdrop.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
+                        }}
+
+                        closeButton.style.marginTop = '10px';
+                        closeButton.style.padding = '5px 10px';
+                        closeButton.style.border = 'none';
+                        closeButton.style.borderRadius = '5px';
+                        closeButton.style.cursor = 'pointer';
                     }}
+
                     function closeModal() {{
                         document.getElementById('bioModal').style.display = 'none';
                         document.getElementById('modalBackdrop').style.display = 'none';
@@ -137,4 +184,4 @@ def build_interface(respondent_agents_dict, processor_llm):
                 """)
 
     logging.info("Interface build complete.")
-    return demo
+    return demo