added sidebar layout (#19)

- added sidebar layout (437050ac4911e1817aa88691f0e1dccd6798129e)


Co-authored-by: yuvraj sharma <ysharma@users.noreply.huggingface.co>

app.py

@@ -262,15 +262,25 @@ class GradioUI:
         # Get or create session-specific agent
         if 'agent' not in session_state:
             session_state['agent'] = create_agent()
-            
-        messages.append(gr.ChatMessage(role="user", content=prompt))
-        yield messages
 
-        # Use session's agent instance
-        for msg in stream_to_gradio(session_state['agent'], task=prompt, reset_agent_memory=False):
-            messages.append(msg)
+        # Adding monitoring
+        try:
+            # log the existence of agent memory
+            has_memory = hasattr(session_state['agent'], 'memory')
+            print(f"Agent has memory: {has_memory}")
+            if has_memory:
+                print(f"Memory type: {type(session_state['agent'].memory)}")
+                
+            messages.append(gr.ChatMessage(role="user", content=prompt))
+            yield messages
+            
+            for msg in stream_to_gradio(session_state['agent'], task=prompt, reset_agent_memory=False):
+                messages.append(msg)
+                yield messages
             yield messages
-        yield messages
+        except Exception as e:
+            print(f"Error in interaction: {str(e)}")
+            raise
 
     def upload_file(
         self,
@@ -326,54 +336,178 @@ class GradioUI:
                 if len(file_uploads_log) > 0
                 else ""
             ),
-            "",
+            gr.Textbox(value="", interactive=False, placeholder="Please wait while Steps are getting populated"),
+            gr.Button(interactive=False)
         )
 
+    def detect_device(self, request: gr.Request):
+        # Check whether the user device is a mobile or a computer
+    
+        if not request:
+            return "Unknown device"
+        # Method 1: Check sec-ch-ua-mobile header
+        is_mobile_header = request.headers.get('sec-ch-ua-mobile')
+        if is_mobile_header:
+            return "Mobile" if '?1' in is_mobile_header else "Desktop"
+    
+        # Method 2: Check user-agent string
+        user_agent = request.headers.get('user-agent', '').lower()
+        mobile_keywords = ['android', 'iphone', 'ipad', 'mobile', 'phone']
+    
+        if any(keyword in user_agent for keyword in mobile_keywords):
+            return "Mobile"
+    
+        # Method 3: Check platform
+        platform = request.headers.get('sec-ch-ua-platform', '').lower()
+        if platform:
+            if platform in ['"android"', '"ios"']:
+                return "Mobile"
+            elif platform in ['"windows"', '"macos"', '"linux"']:
+                return "Desktop"
+    
+        # Default case if no clear indicators
+        return "Desktop" 
+    
     def launch(self, **kwargs):
+
         with gr.Blocks(theme="ocean", fill_height=True) as demo:
-            gr.Markdown("""# open Deep Research - free the AI agents!
-
-_Built with [smolagents](https://github.com/huggingface/smolagents)_
-
-OpenAI just published [Deep Research](https://openai.com/index/introducing-deep-research/), a very nice assistant that can perform deep searches on the web to answer user questions.
-
-However, their agent has a huge downside: it's not open. So we've started a 24-hour rush to replicate and open-source it. Our resulting [open-Deep-Research agent](https://github.com/huggingface/smolagents/tree/main/examples/open_deep_research) took the #1 rank of any open submission on the GAIA leaderboard! ✨
-
-You can try a simplified version below. 👇""")
-            # Add session state to store session-specific data
-            session_state = gr.State({})  # Initialize empty state for each session
-            stored_messages = gr.State([])
-            file_uploads_log = gr.State([])
-            chatbot = gr.Chatbot(
-                label="open-Deep-Research",
-                type="messages",
-                avatar_images=(
-                    None,
-                    "https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/smolagents/mascot_smol.png",
-                ),
-                resizeable=True,
-                scale=1,
-            )
-            # If an upload folder is provided, enable the upload feature
-            if self.file_upload_folder is not None:
-                upload_file = gr.File(label="Upload a file")
-                upload_status = gr.Textbox(label="Upload Status", interactive=False, visible=False)
-                upload_file.change(
-                    self.upload_file,
-                    [upload_file, file_uploads_log],
-                    [upload_status, file_uploads_log],
-                )
-            text_input = gr.Textbox(lines=1, label="Your request")
-            text_input.submit(
-                self.log_user_message,
-                [text_input, file_uploads_log],
-                [stored_messages, text_input],
-            ).then(self.interact_with_agent,
-                # Include session_state in function calls
-                [stored_messages, chatbot, session_state],
-                [chatbot]
-            )
-
-        demo.launch(debug=True, share=True, **kwargs)
+            # Different layouts for mobile and computer devices
+            @gr.render()
+            def layout(request: gr.Request):
+                device = self.detect_device(request)
+                print(f"device - {device}")
+                # Render layout with sidebar 
+                if device == "Desktop":
+                    with gr.Blocks(fill_height=True,) as sidebar_demo:
+                        with gr.Sidebar():
+                            gr.Markdown("""# open Deep Research - free the AI agents!
+                            
+                OpenAI just published [Deep Research](https://openai.com/index/introducing-deep-research/), a very nice assistant that can perform deep searches on the web to answer user questions.
+                
+                However, their agent has a huge downside: it's not open. So we've started a 24-hour rush to replicate and open-source it. Our resulting [open-Deep-Research agent](https://github.com/huggingface/smolagents/tree/main/examples/open_deep_research) took the #1 rank of any open submission on the GAIA leaderboard! ✨
+                
+                You can try a simplified version here.<br><br>""")
+                            with gr.Group():
+                                gr.Markdown("**Your request**", container=True)
+                                text_input = gr.Textbox(lines=3, label="Your request", container=False, placeholder="Enter your prompt here and press Shift+Enter or press the button")
+                                launch_research_btn = gr.Button("Run", variant="primary")
+
+                            # If an upload folder is provided, enable the upload feature
+                            if self.file_upload_folder is not None:
+                                upload_file = gr.File(label="Upload a file")
+                                upload_status = gr.Textbox(label="Upload Status", interactive=False, visible=False)
+                                upload_file.change(
+                                    self.upload_file,
+                                    [upload_file, file_uploads_log],
+                                    [upload_status, file_uploads_log],
+                                )
+                                    
+                            gr.HTML("<br><br><h4><center>Powered by:</center></h4>")
+                            with gr.Row():
+                                gr.HTML("""<div style="display: flex; align-items: center; gap: 8px; font-family: system-ui, -apple-system, sans-serif;">
+                        <img src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/smolagents/mascot_smol.png" style="width: 32px; height: 32px; object-fit: contain;" alt="logo">
+                        <a href="https://github.com/huggingface/smolagents"><b>huggingface/smolagents</b></a>
+                        </div>""")                        
+
+                        # Add session state to store session-specific data
+                        session_state = gr.State({})  # Initialize empty state for each session
+                        stored_messages = gr.State([])
+                        file_uploads_log = gr.State([])
+                        chatbot = gr.Chatbot(
+                            label="open-Deep-Research",
+                            type="messages",
+                            avatar_images=(
+                                None,
+                                "https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/smolagents/mascot_smol.png",
+                            ),
+                            resizeable=False,
+                            scale=1,
+                            elem_id="my-chatbot"
+                        )
+
+                        text_input.submit(
+                            self.log_user_message,
+                            [text_input, file_uploads_log],
+                            [stored_messages, text_input, launch_research_btn],
+                        ).then(self.interact_with_agent,
+                            # Include session_state in function calls
+                            [stored_messages, chatbot, session_state],
+                            [chatbot]
+                        ).then(lambda : (gr.Textbox(interactive=True, placeholder="Enter your prompt here and press the button"), gr.Button(interactive=True)),
+                              None, 
+                              [text_input, launch_research_btn])
+                        launch_research_btn.click(
+                            self.log_user_message,
+                            [text_input, file_uploads_log],
+                            [stored_messages, text_input, launch_research_btn],
+                        ).then(self.interact_with_agent,
+                            # Include session_state in function calls
+                            [stored_messages, chatbot, session_state],
+                            [chatbot]
+                        ).then(lambda : (gr.Textbox(interactive=True, placeholder="Enter your prompt here and press the button"), gr.Button(interactive=True)),
+                              None, 
+                              [text_input, launch_research_btn])
+                        
+                # Render simple layout
+                else:
+                    with gr.Blocks(fill_height=True,) as simple_demo:
+                        gr.Markdown("""# open Deep Research - free the AI agents!
+            _Built with [smolagents](https://github.com/huggingface/smolagents)_
+            
+            OpenAI just published [Deep Research](https://openai.com/index/introducing-deep-research/), a very nice assistant that can perform deep searches on the web to answer user questions.
+            
+            However, their agent has a huge downside: it's not open. So we've started a 24-hour rush to replicate and open-source it. Our resulting [open-Deep-Research agent](https://github.com/huggingface/smolagents/tree/main/examples/open_deep_research) took the #1 rank of any open submission on the GAIA leaderboard! ✨
+            
+            You can try a simplified version below. 👇""")
+                        # Add session state to store session-specific data
+                        session_state = gr.State({})  # Initialize empty state for each session
+                        stored_messages = gr.State([])
+                        file_uploads_log = gr.State([])
+                        chatbot = gr.Chatbot(
+                            label="open-Deep-Research",
+                            type="messages",
+                            avatar_images=(
+                                None,
+                                "https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/smolagents/mascot_smol.png",
+                            ),
+                            resizeable=True,
+                            scale=1,
+                        )
+                        # If an upload folder is provided, enable the upload feature
+                        if self.file_upload_folder is not None:
+                            upload_file = gr.File(label="Upload a file")
+                            upload_status = gr.Textbox(label="Upload Status", interactive=False, visible=False)
+                            upload_file.change(
+                                self.upload_file,
+                                [upload_file, file_uploads_log],
+                                [upload_status, file_uploads_log],
+                            )
+                        text_input = gr.Textbox(lines=1, label="Your request", placeholder="Enter your prompt here and press the button")
+                        launch_research_btn = gr.Button("Run", variant="primary",)
+                        
+                        text_input.submit(
+                            self.log_user_message,
+                            [text_input, file_uploads_log],
+                            [stored_messages, text_input, launch_research_btn],
+                        ).then(self.interact_with_agent,
+                            # Include session_state in function calls
+                            [stored_messages, chatbot, session_state],
+                            [chatbot]
+                        ).then(lambda : (gr.Textbox(interactive=True, placeholder="Enter your prompt here and press the button"), gr.Button(interactive=True)),
+                              None, 
+                              [text_input, launch_research_btn])
+                        launch_research_btn.click(
+                            self.log_user_message,
+                            [text_input, file_uploads_log],
+                            [stored_messages, text_input, launch_research_btn],
+                        ).then(self.interact_with_agent,
+                            # Include session_state in function calls
+                            [stored_messages, chatbot, session_state],
+                            [chatbot]
+                        ).then(lambda : (gr.Textbox(interactive=True, placeholder="Enter your prompt here and press the button"), gr.Button(interactive=True)),
+                              None, 
+                              [text_input, launch_research_btn])
+            
+        demo.launch(debug=True, **kwargs)
 
 GradioUI().launch()