Updated UI

.gitignore

@@ -0,0 +1,2 @@
+# Ignore Python cache directories
+**/__pycache__/

.gradio/certificate.pem

@@ -0,0 +1,31 @@
+-----BEGIN CERTIFICATE-----
+MIIFazCCA1OgAwIBAgIRAIIQz7DSQONZRGPgu2OCiwAwDQYJKoZIhvcNAQELBQAw
+TzELMAkGA1UEBhMCVVMxKTAnBgNVBAoTIEludGVybmV0IFNlY3VyaXR5IFJlc2Vh
+cmNoIEdyb3VwMRUwEwYDVQQDEwxJU1JHIFJvb3QgWDEwHhcNMTUwNjA0MTEwNDM4
+WhcNMzUwNjA0MTEwNDM4WjBPMQswCQYDVQQGEwJVUzEpMCcGA1UEChMgSW50ZXJu
+ZXQgU2VjdXJpdHkgUmVzZWFyY2ggR3JvdXAxFTATBgNVBAMTDElTUkcgUm9vdCBY
+MTCCAiIwDQYJKoZIhvcNAQEBBQADggIPADCCAgoCggIBAK3oJHP0FDfzm54rVygc
+h77ct984kIxuPOZXoHj3dcKi/vVqbvYATyjb3miGbESTtrFj/RQSa78f0uoxmyF+
+0TM8ukj13Xnfs7j/EvEhmkvBioZxaUpmZmyPfjxwv60pIgbz5MDmgK7iS4+3mX6U
+A5/TR5d8mUgjU+g4rk8Kb4Mu0UlXjIB0ttov0DiNewNwIRt18jA8+o+u3dpjq+sW
+T8KOEUt+zwvo/7V3LvSye0rgTBIlDHCNAymg4VMk7BPZ7hm/ELNKjD+Jo2FR3qyH
+B5T0Y3HsLuJvW5iB4YlcNHlsdu87kGJ55tukmi8mxdAQ4Q7e2RCOFvu396j3x+UC
+B5iPNgiV5+I3lg02dZ77DnKxHZu8A/lJBdiB3QW0KtZB6awBdpUKD9jf1b0SHzUv
+KBds0pjBqAlkd25HN7rOrFleaJ1/ctaJxQZBKT5ZPt0m9STJEadao0xAH0ahmbWn
+OlFuhjuefXKnEgV4We0+UXgVCwOPjdAvBbI+e0ocS3MFEvzG6uBQE3xDk3SzynTn
+jh8BCNAw1FtxNrQHusEwMFxIt4I7mKZ9YIqioymCzLq9gwQbooMDQaHWBfEbwrbw
+qHyGO0aoSCqI3Haadr8faqU9GY/rOPNk3sgrDQoo//fb4hVC1CLQJ13hef4Y53CI
+rU7m2Ys6xt0nUW7/vGT1M0NPAgMBAAGjQjBAMA4GA1UdDwEB/wQEAwIBBjAPBgNV
+HRMBAf8EBTADAQH/MB0GA1UdDgQWBBR5tFnme7bl5AFzgAiIyBpY9umbbjANBgkq
+hkiG9w0BAQsFAAOCAgEAVR9YqbyyqFDQDLHYGmkgJykIrGF1XIpu+ILlaS/V9lZL
+ubhzEFnTIZd+50xx+7LSYK05qAvqFyFWhfFQDlnrzuBZ6brJFe+GnY+EgPbk6ZGQ
+3BebYhtF8GaV0nxvwuo77x/Py9auJ/GpsMiu/X1+mvoiBOv/2X/qkSsisRcOj/KK
+NFtY2PwByVS5uCbMiogziUwthDyC3+6WVwW6LLv3xLfHTjuCvjHIInNzktHCgKQ5
+ORAzI4JMPJ+GslWYHb4phowim57iaztXOoJwTdwJx4nLCgdNbOhdjsnvzqvHu7Ur
+TkXWStAmzOVyyghqpZXjFaH3pO3JLF+l+/+sKAIuvtd7u+Nxe5AW0wdeRlN8NwdC
+jNPElpzVmbUq4JUagEiuTDkHzsxHpFKVK7q4+63SM1N95R1NbdWhscdCb+ZAJzVc
+oyi3B43njTOQ5yOf+1CceWxG1bQVs5ZufpsMljq4Ui0/1lvh+wjChP4kqKOJ2qxq
+4RgqsahDYVvTH9w7jXbyLeiNdd8XM2w9U/t7y0Ff/9yi0GE44Za4rF2LN9d11TPA
+mRGunUHBcnWEvgJBQl9nJEiU0Zsnvgc/ubhPgXRR4Xq37Z0j4r7g1SgEEzwxA57d
+emyPxgcYxn/eR44/KJ4EBs+lVDR3veyJm+kXQ99b21/+jh5Xos1AnX5iItreGCc=
+-----END CERTIFICATE-----

Gradio_UI.py

@@ -22,7 +22,9 @@ from smolagents.agent_types import AgentAudio, AgentImage, AgentText, handle_age
 from smolagents.agents import ActionStep, MultiStepAgent
 from smolagents.memory import MemoryStep
 from smolagents.utils import _is_package_available
-
+import gradio as gr
+from gradio.components import Markdown
+from gradio.components import Chatbot, Textbox, State, Button
 
 def pull_messages_from_step(
     step_log: MemoryStep,
@@ -257,38 +259,89 @@ class GradioUI:
             "",
         )
 
-    def launch(self, **kwargs):
-        import gradio as gr
+    def launch(self, **kwargs):  # <-- Moved inside the class and added self
+        with gr.Blocks("base") as demo:
+            # State to store chat messages and prompt strings
+            stored_messages = State([])
+            prompt_state = State("")
+            
+            with gr.Row():    
+
+                # Markdown Introduction
+                gr.Markdown("""
+                    # NBAi - NBA Stats Chatbot 🏀
+                    
+                    Welcome to **NBAi**, your personal NBA statistics assistant! This app fetches and presents NBA box scores from last night's games, giving you insights on player performance, team stats, and more. 
+
+                    ## Features
+                    - Ask questions like:
+                        - Who had the most points last night?
+                        - Who grabbed the most rebounds?
+                        - Who had the highest assist-to-turnover ratio?
+
+                    ## Tools Used 
+                    - **[smolagents](https://github.com/huggingface/smolagents)** for building multi-step agents.
+                    - **[Gradio](https://www.gradio.app/docs)** for the user interface.
+                    - **[BeautifulSoup](https://www.crummy.com/software/BeautifulSoup/bs4/doc/)** and **[Pandas](https://pandas.pydata.org/docs/index.html)** for web scraping and data processing.
+
+                    ## How to Use 
+                    - Click one of the quick prompt buttons below or type your own question.
+                    - The chatbot will respond with detailed NBA statistics from last night's games.
+                    
+                    ---
+                """)
+                with gr.Column():   
+                    # Chatbot Interface
+                    chatbot = Chatbot(
+                        label="NBAi Chatbot",
+                        type="messages",
+                        avatar_images=(
+                            None,
+                            "https://huggingface.co/datasets/agents-course/course-images/resolve/main/en/communication/Alfred.png",
+                        ),
+                        resizeable=True,
+                        scale=1,
+                    )
 
-        with gr.Blocks(fill_height=True) as demo:
-            stored_messages = gr.State([])
-            file_uploads_log = gr.State([])
-            chatbot = gr.Chatbot(
-                label="Agent",
-                type="messages",
-                avatar_images=(
-                    None,
-                    "https://huggingface.co/datasets/agents-course/course-images/resolve/main/en/communication/Alfred.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="Chat Message")
+                    # Textbox for Custom User Input
+                    text_input = Textbox(lines=1, label="Your Question")
+                    # Quick Prompt Buttons
+                    with gr.Row():
+                        btn_points = Button(value="Most Points", variant="primary")
+                        btn_rebounds = Button(value="Most Rebounds", variant="primary")
+                        btn_assist_to_turnover = Button(value="Best Assist-to-Turnover Ratio", variant="primary")
+
+ 
+
+            # Bindings for Buttons using prompt_state
+            btn_points.click(
+                lambda: "Who had the most points in last night's NBA games?",
+                [],
+                prompt_state
+            ).then(self.interact_with_agent, [prompt_state, stored_messages], chatbot)
+
+            btn_rebounds.click(
+                lambda: "Who had the most rebounds in last night's NBA games?",
+                [],
+                prompt_state
+            ).then(self.interact_with_agent, [prompt_state, stored_messages], chatbot)
+
+            btn_assist_to_turnover.click(
+                lambda: "Who had the highest ratio of assists to turnovers in last night's NBA games?",
+                [],
+                prompt_state
+            ).then(self.interact_with_agent, [prompt_state, stored_messages], chatbot)
+
+            # Custom Input Submission
             text_input.submit(
-                self.log_user_message,
-                [text_input, file_uploads_log],
-                [stored_messages, text_input],
-            ).then(self.interact_with_agent, [stored_messages, chatbot], [chatbot])
-
+                self.interact_with_agent,
+                [text_input, stored_messages],
+                chatbot
+            )
+        
+        
+        
+        
         demo.launch(debug=True, share=True, **kwargs)