Update app.py

app.py

@@ -1,3 +1,6 @@
+#!/usr/bin/env python
+# coding=utf-8
+# Copyright 2024 The Footscray Coding Collective. All rights reserved.
 import os
 import re
 import shutil
@@ -253,10 +256,12 @@ def create_agent() -> CodeAgent:
         RuntimeError: If agent creation fails.
     """
     try:
+        # Model Configuration
+        model_id = "openrouter/deepseek/deepseek-chat-v3-0324:free"  # Define Model
         # Initialize model
         model = LiteLLMModel(
             custom_role_conversions=CUSTOM_ROLE_CONVERSIONS,
-            model_id="openrouter/google/gemini-2.0-flash-001",
+            model_id=model_id,
         )
 
         # Initialize tools
@@ -492,10 +497,10 @@ class GradioUI:
             uploaded_files,
         )
 
-    def detect_device(self, request: gr.Request):
+    def detect_device(self, request: gr.Request) -> str:
         """Detect whether the user is on mobile or desktop device."""
         if not request:
-            return "Unknown device"
+            return "Desktop"
 
         is_mobile_header = request.headers.get("sec-ch-ua-mobile")
         if is_mobile_header:
@@ -518,20 +523,58 @@ class GradioUI:
     def launch(self, **kwargs):
         """Launch the Gradio UI with responsive layout."""
         with gr.Blocks(theme="ocean", fill_height=True) as demo:
+            # JavaScript-based layout
+            demo.load(
+                None,  # No server-side function on load
+                [],
+                [],
+                _js="""
+                () => {
+                    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+                    if (isMobile) {
+                        // Mobile-specific logic (e.g., hide/show certain elements)
+                        document.body.classList.add('mobile-layout'); // Example: Add a CSS class
+                        console.log('Mobile layout applied.');
+                    } else {
+                        // Desktop-specific logic
+                         document.body.classList.add('desktop-layout');
+                        console.log('Desktop layout applied.');
+                    }
+                }
+                """,
+            )
 
-            @gr.render()
-            def layout(request: gr.Request):
-                device = self.detect_device(request)
-                print(f"device - {device}")
-                if device == "Desktop":
-                    return self._create_desktop_layout()
-                return self._create_mobile_layout()
+            desktop_layout = self._create_desktop_layout()
+            mobile_layout = self._create_mobile_layout()
+
+            # Conditional visibility of the layout
+            js_function = """
+            () => {
+                const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+                if (isMobile) {
+                   return ['block','none'];
+                } else {
+                    return ['none','block'];
+                }
+            }
+            """
+
+            # Set the visibility of the layouts based on the clients device
+            mobile_layout.style = {"display": "none"}  # Hide by default
+            desktop_layout.style = {"display": "none"}  # Hide by default
+
+            gr.on(
+                [],
+                [],
+                [mobile_layout, desktop_layout],
+                js_function,
+            )
 
         demo.queue(max_size=20).launch(debug=True, **kwargs)
 
     def _create_desktop_layout(self):
         """Create the desktop layout with sidebar and enhanced styling."""
-        with gr.Blocks(fill_height=True) as sidebar_demo:
+        with gr.Column(visible=False) as sidebar_demo:
             with gr.Sidebar():
                 gr.Markdown(
                     """# 🔍 OpenDeepResearch
@@ -623,7 +666,7 @@ class GradioUI:
 
     def _create_mobile_layout(self):
         """Create the mobile layout (simpler without sidebar)."""
-        with gr.Blocks(fill_height=True) as simple_demo:
+        with gr.Column(visible=False) as simple_demo:
             gr.Markdown("""#OpenDeepResearch - free the AI agents!""")
             session_state = gr.State({})
             stored_messages = gr.State([])