Update app.py

app.py

@@ -117,22 +117,110 @@ tool_loader = ToolLoader(tool_names)
 st.title("Hugging Face Agent and tools")
 
 ## LB https://huggingface.co/spaces/qiantong-xu/toolbench-leaderboard
-# Add a dropdown for selecting the inference URL
-url_endpoint = st.selectbox("Select Inference URL", [
-    "https://api-inference.huggingface.co/models/bigcode/starcoder",
-    "https://api-inference.huggingface.co/models/OpenAssistant/oasst-sft-4-pythia-12b-epoch-3.5",
-    "https://api-inference.huggingface.co/models/gpt2"
-])
 
 st.markdown("Welcome to the Hugging Face Agent and Tools app! This app allows you to interact with various tools using the Hugging Face API.")
     
+# Create a page with tabs
+tabs = st.tabs(["Chat", "URL and Tools", "User Description", "Developers"])
+
+# Tab 1: Chat
+if tabs[0]:
+    with st.beta_expander("Chat"):
+        # Chat code (user input, agent responses, etc.)
+        if "messages" not in st.session_state:
+            st.session_state.messages = []
+
+        for message in st.session_state.messages:
+            with st.chat_message(message["role"]):
+                st.markdown(message["content"])
+
+        with st.chat_message("assistant"):
+            st.markdown("Hello there! How can I assist you today?")
+
+        if user_message := st.chat_input("Enter message"):
+            st.chat_message("user").markdown(user_message)
+            st.session_state.messages.append({"role": "user", "content": user_message})
+
+            selected_tools = [tool_loader.tools[idx] for idx, checkbox in enumerate(tool_checkboxes) if checkbox]
+            # Handle submission with the selected inference URL
+            response = handle_submission(user_message, selected_tools, url_endpoint)
+
+            with st.chat_message("assistant"):
+                if response is None:
+                    st.warning("The agent's response is None. Please try again. Generate an image of a flying horse.")
+                elif isinstance(response, Image.Image):
+                    st.image(response)
+                elif isinstance(response, AudioSegment):
+                    st.audio(response)
+                elif isinstance(response, int):
+                    st.markdown(response)
+                elif isinstance(response, str):
+                    if "emojified_text" in response:
+                        st.markdown(f"{response['emojified_text']}")
+                    else:
+                        st.markdown(response)
+                elif isinstance(response, list):
+                    for item in response:
+                        st.markdown(item)  # Assuming the list contains strings
+                elif isinstance(response, pd.DataFrame):
+                    st.dataframe(response)
+                elif isinstance(response, pd.Series):
+                    st.table(response.iloc[0:10])
+                elif isinstance(response, dict):
+                    st.json(response)
+                elif isinstance(response, st.graphics_altair.AltairChart):
+                    st.altair_chart(response)
+                elif isinstance(response, st.graphics_bokeh.BokehChart):
+                    st.bokeh_chart(response)
+                elif isinstance(response, st.graphics_graphviz.GraphvizChart):
+                    st.graphviz_chart(response)
+                elif isinstance(response, st.graphics_plotly.PlotlyChart):
+                    st.plotly_chart(response)
+                elif isinstance(response, st.graphics_pydeck.PydeckChart):
+                    st.pydeck_chart(response)
+                elif isinstance(response, matplotlib.figure.Figure):
+                    st.pyplot(response)
+                elif isinstance(response, streamlit.graphics_vega_lite.VegaLiteChart):
+                    st.vega_lite_chart(response)
+                else:
+                    st.warning("Unrecognized response type. Please try again. e.g. Generate an image of a flying horse.")
+
+            st.session_state.messages.append({"role": "assistant", "content": response})
+
+# Tab 2: URL and Tools
+elif tabs[1]:
+    with st.beta_expander("URL and Tools"):
+        # Code for URL and Tools checkboxes 
+    
+        # Examples for the user perspective
+        st.markdown("### Examples:")
+        st.markdown("1. **Generate a Random Character**:")
+        st.markdown("   - Choose the desired URL and the 'Random Character Tool'.")
+        
+        st.markdown("2. **Sentiment Analysis**:")
+        st.markdown("   - Choose the desired URL and the 'Sentiment Analysis Tool'.")
+        st.markdown("   - Sample: What is the sentiment for \"Hello, I am happy\"?")
+        
+        st.markdown("3. **Word Count**:")
+        st.markdown("   - Choose the desired URL and the 'Word Counter Tool'.")
+        st.markdown("   - Sample: Count the words in \"Hello, I am Christof\".")
 
+        # Add a dropdown for selecting the inference URL
+        url_endpoint = st.selectbox("Select Inference URL", [
+            "https://api-inference.huggingface.co/models/bigcode/starcoder",
+            "https://api-inference.huggingface.co/models/OpenAssistant/oasst-sft-4-pythia-12b-epoch-3.5",
+            "https://api-inference.huggingface.co/models/gpt2"
+        ])
 
-# Add a markdown section for tool descriptions
-with st.expander("Expand to see description"):
-    
-    # Add a section for the app's description
-    st.markdown(''' 
+        
+        tool_checkboxes = [st.checkbox(f"{tool.name} --- {tool.description} ") for tool in tool_loader.tools]
+
+# Tab 3: User Description
+elif tabs[2]:
+    with st.beta_expander("App Description"):
+        # User description content and tool descriptions
+        # Add a section for the app's description
+        st.markdown(''' 
                     # Hugging Face Agent and Tools App
                     
                     ## Description
@@ -186,139 +274,60 @@ with st.expander("Expand to see description"):
 
                 ''')
 
-# Add a markdown section for code descriptions
-with st.expander("Expand to see developer description"):
-     
-    st.markdown(''' 
-
-        # Hugging Face Agent and Tools Code Overview
-        
-        ## Overview
-        The provided Python code implements an interactive Streamlit web application that allows users to interact with various tools through the Hugging Face API. The app integrates Hugging Face models and tools, enabling users to perform tasks such as text generation, sentiment analysis, and more.
-        
-        ## Imports
-        The code imports several external libraries and modules, including:
-        - `streamlit`: For building the web application.
-        - `os`: For interacting with the operating system.
-        - `base64`, `io`, `Image` (from `PIL`), `AudioSegment` (from `pydub`), `IPython`, `sf`: For handling images and audio.
-        - `requests`: For making HTTP requests.
-        - `pandas`: For working with DataFrames.
-        - `matplotlib.figure`, `numpy`: For visualization.
-        - `altair`, `Plot` (from `bokeh.models`), `px` (from `plotly.express`), `pdk` (from `pydeck`): For different charting libraries.
-        - `time`: For handling time-related operations.
-        - `transformers`: For loading tools and agents.
-        
-        ## ToolLoader Class
-        The `ToolLoader` class is responsible for loading tools based on their names. It has methods to load tools from a list of tool names and handles potential errors during loading.
-        
-        ## CustomHfAgent Class
-        The `CustomHfAgent` class extends the base `Agent` class from the `transformers` module. It is designed to interact with a remote inference API and includes methods for generating text based on a given prompt.
-        
-        ## Tool Loading and Customization
-        - Tool names are defined in the `tool_names` list.
-        - The `ToolLoader` instance (`tool_loader`) loads tools based on the provided names.
-        - The `CustomHfAgent` instance (`agent`) is created with a specified URL endpoint, token, and additional tools.
-        - New tools can be added by appending their names to the `tool_names` list.
-        
-        ## Streamlit App
-        The Streamlit app is structured as follows:
-        1. Tool selection dropdown for choosing the inference URL.
-        2. An expander for displaying tool descriptions.
-        3. An expander for selecting tools.
-        4. Examples and instructions for the user.
-        5. A chat interface for user interactions.
-        6. Handling of user inputs, tool selection, and agent responses.
-        
-        ## Handling of Responses
-        The code handles various types of responses from the agent, including images, audio, text, DataFrames, and charts. The responses are displayed in the Streamlit app based on their types.
-        
-        ## How to Run
-        1. Install required dependencies with `pip install -r requirements.txt`.
-        2. Run the app with `streamlit run <filename.py>`.
-        
-        ## Notes
-        - The code emphasizes customization and extensibility, allowing developers to easily add new tools and interact with the Hugging Face API.
-        - Ensure proper configuration, such as setting the Hugging Face token as an environment variable.
-
-          ''')
-
-# Add an expandable element for tools
-with st.expander("Expand to select tools"):
-
-    # Examples for the user perspective
-    st.markdown("### Examples:")
-    st.markdown("1. **Generate a Random Character**:")
-    st.markdown("   - Choose the desired URL and the 'Random Character Tool'.")
-    
-    st.markdown("2. **Sentiment Analysis**:")
-    st.markdown("   - Choose the desired URL and the 'Sentiment Analysis Tool'.")
-    st.markdown("   - Sample: What is the sentiment for \"Hello, I am happy\"?")
+# Tab 4: Developers
+elif tabs[3]:
+    with st.beta_expander("Developers"):
+        # Developer-related content
+        st.markdown(''' 
     
-    st.markdown("3. **Word Count**:")
-    st.markdown("   - Choose the desired URL and the 'Word Counter Tool'.")
-    st.markdown("   - Sample: Count the words in \"Hello, I am Christof\".")
-    
-    tool_checkboxes = [st.checkbox(f"{tool.name} --- {tool.description} ") for tool in tool_loader.tools]
-
-if "messages" not in st.session_state:
-    st.session_state.messages = []
-
-for message in st.session_state.messages:
-    with st.chat_message(message["role"]):
-        st.markdown(message["content"])
-
-
-with st.chat_message("assistant"):
-    st.markdown("Hello there! How can I assist you today?")
-
-if user_message := st.chat_input("Enter message"):
-    st.chat_message("user").markdown(user_message)
-    st.session_state.messages.append({"role": "user", "content": user_message})
-
-    selected_tools = [tool_loader.tools[idx] for idx, checkbox in enumerate(tool_checkboxes) if checkbox]
-    # Handle submission with the selected inference URL
-    response = handle_submission(user_message, selected_tools, url_endpoint)
-
-
-    with st.chat_message("assistant"):
-        if response is None:
-            st.warning("The agent's response is None. Please try again. Generate an image of a flying horse.")
-        elif isinstance(response, Image.Image):
-            st.image(response)
-        elif isinstance(response, AudioSegment):
-            st.audio(response)
-        elif isinstance(response, int):
-            st.markdown(response)
-        elif isinstance(response, str):
-            if "emojified_text" in response:
-                st.markdown(f"{response['emojified_text']}")
-            else:
-                st.markdown(response)
-        elif isinstance(response, list):
-            for item in response:
-                st.markdown(item)  # Assuming the list contains strings
-        elif isinstance(response, pd.DataFrame):
-            st.dataframe(response)
-        elif isinstance(response, pd.Series):
-            st.table(response.iloc[0:10])
-        elif isinstance(response, dict):
-            st.json(response)
-        elif isinstance(response, st.graphics_altair.AltairChart):
-            st.altair_chart(response)
-        elif isinstance(response, st.graphics_bokeh.BokehChart):
-            st.bokeh_chart(response)
-        elif isinstance(response, st.graphics_graphviz.GraphvizChart):
-            st.graphviz_chart(response)
-        elif isinstance(response, st.graphics_plotly.PlotlyChart):
-            st.plotly_chart(response)
-        elif isinstance(response, st.graphics_pydeck.PydeckChart):
-            st.pydeck_chart(response)
-        elif isinstance(response, matplotlib.figure.Figure):
-            st.pyplot(response)
-        elif isinstance(response, streamlit.graphics_vega_lite.VegaLiteChart):
-            st.vega_lite_chart(response)
-        else:
-            st.warning("Unrecognized response type. Please try again. e.g. Generate an image of a flying horse.")
-
+            # Hugging Face Agent and Tools Code Overview
+            
+            ## Overview
+            The provided Python code implements an interactive Streamlit web application that allows users to interact with various tools through the Hugging Face API. The app integrates Hugging Face models and tools, enabling users to perform tasks such as text generation, sentiment analysis, and more.
+            
+            ## Imports
+            The code imports several external libraries and modules, including:
+            - `streamlit`: For building the web application.
+            - `os`: For interacting with the operating system.
+            - `base64`, `io`, `Image` (from `PIL`), `AudioSegment` (from `pydub`), `IPython`, `sf`: For handling images and audio.
+            - `requests`: For making HTTP requests.
+            - `pandas`: For working with DataFrames.
+            - `matplotlib.figure`, `numpy`: For visualization.
+            - `altair`, `Plot` (from `bokeh.models`), `px` (from `plotly.express`), `pdk` (from `pydeck`): For different charting libraries.
+            - `time`: For handling time-related operations.
+            - `transformers`: For loading tools and agents.
             
-    st.session_state.messages.append({"role": "assistant", "content": response})
+            ## ToolLoader Class
+            The `ToolLoader` class is responsible for loading tools based on their names. It has methods to load tools from a list of tool names and handles potential errors during loading.
+            
+            ## CustomHfAgent Class
+            The `CustomHfAgent` class extends the base `Agent` class from the `transformers` module. It is designed to interact with a remote inference API and includes methods for generating text based on a given prompt.
+            
+            ## Tool Loading and Customization
+            - Tool names are defined in the `tool_names` list.
+            - The `ToolLoader` instance (`tool_loader`) loads tools based on the provided names.
+            - The `CustomHfAgent` instance (`agent`) is created with a specified URL endpoint, token, and additional tools.
+            - New tools can be added by appending their names to the `tool_names` list.
+            
+            ## Streamlit App
+            The Streamlit app is structured as follows:
+            1. Tool selection dropdown for choosing the inference URL.
+            2. An expander for displaying tool descriptions.
+            3. An expander for selecting tools.
+            4. Examples and instructions for the user.
+            5. A chat interface for user interactions.
+            6. Handling of user inputs, tool selection, and agent responses.
+            
+            ## Handling of Responses
+            The code handles various types of responses from the agent, including images, audio, text, DataFrames, and charts. The responses are displayed in the Streamlit app based on their types.
+            
+            ## How to Run
+            1. Install required dependencies with `pip install -r requirements.txt`.
+            2. Run the app with `streamlit run <filename.py>`.
+            
+            ## Notes
+            - The code emphasizes customization and extensibility, allowing developers to easily add new tools and interact with the Hugging Face API.
+            - Ensure proper configuration, such as setting the Hugging Face token as an environment variable.
+    
+          ''')
+