Streamlit - DrAlzahraniProjects/csusb_fall2024_cse6550_team2 GitHub Wiki


Streamlit

This guide provides a detailed walkthrough for containerizing a Streamlit-based chatbot application using Docker. The chatbot, powered by an LLM (Large Language Model), assists users in interacting with a software engineering textbook. Containerizing ensures consistency, portability, and ease of deployment across various environments.


Table of Contents

  1. Installation
  2. Configuration
  3. Implementation
  4. Usage
  5. Troubleshooting

1. Installation

Overview

To containerize the Streamlit application, start by ensuring the development environment is properly configured, with Docker as the foundational tool.

Step 1: Verify Docker Installation

  1. Open a terminal and check if Docker is installed:

    docker --version
    • If installed, the terminal will display the Docker version.
    • Figure 1: Docker version confirmation
      Figure 1
  2. If Docker isn’t installed, download and install it from [Docker Desktop](https://www.docker.com/).

  3. Verify the installation by running a test command:

    docker run hello-world
    • This command pulls and runs a test container to confirm Docker is functional.
    • Figure 2: Docker "hello-world" test output
      Figure 2

2. Configuration

Overview

This section covers creating and organizing necessary files for a successful Dockerized Streamlit application, such as the requirements.txt file and custom styling.

Step 1: Create requirements.txt

  1. The requirements.txt file lists all Python dependencies required for your application. It ensures consistent installation of libraries across environments.
    • Figure 3: Example requirements.txt
      Figure 3

Step 2: Add Custom CSS

  1. Purpose of Custom CSS: Including custom CSS allows you to enhance the user interface, improving usability and providing a visually appealing experience for your Streamlit application. This can be particularly useful for aligning the chatbot's style with the overall theme of your project.

  2. Instructions:

  • Place the CSS file in the assets folder to maintain an organized structure.
  • Add the following code snippet in your app.py to load the CSS:
    with open("assets/style.css") as f:
        st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True)
  1. Example: If the custom CSS includes styling for headers and buttons, you might see the following in your style.css file:
h1 {
    color: #4CAF50;
    text-align: center;
}
button {
    background-color: #4CAF50;
    color: white;
}
  1. Figure 4: Organized file structure with CSS
    Figure 4

3. Implementation

Overview

Integrate Streamlit widgets and essential functionalities to build an interactive chatbot interface.

Step 1: Add Widgets

Widget 1: Session State

Persistent variables across reruns.

user_input = st.session_state['user_input']
  • Figure 5: Session state example
    Figure 5

Widget 2: User Input

Creates a text box for user input.

# Handle user input in chat
if prompt := st.chat_input("Message Team2 academic chatbot"):
   process_input(prompt)
  • Figure 6: Input usage example
    Figure 6

Widget 3: Markdown

Display formatted text using Markdown syntax.

st.markdown(body, unsafe_allow_html=False)

Widget 4: Feedback Widget

Collect user feedback interactively.

st.feedback("thumbs", key=f"feedback_{index}", on_change=handle_feedback, args=(index,))
  • Figure 7: Feedback widget example
    Figure 7

Widget 5: Page Configuration

Set a custom title for the app's browser tab.

st.set_page_config(page_title="Academic Chatbot - Team2")
  • Figure 8: Page configuration example
    Figure 8

4. Usage

Step 1: Run the Application

Start the application with the following Docker command:

docker run -d -p 5002:5002 -p 6002:6002 -e API_KEY=MISTRAL_API_KEY team2_app
  • API_KEY=MISTRAL_API_KEY: Replace MISTRAL_API_KEY with your actual API key, provided by the team or organization. Example command after substitution:
  • Port Numbers:
    • Ensure the ports 5002 and 6002 are open and available on your system to avoid conflicts with other applications.
  • If successful, the application will be accessible through the browser at the provided URL.
  • Figure 9: Running application example
    Figure 9

5. Troubleshooting

Common Issues and Solutions

Issue 1: Docker Not Running

  • Ensure Docker Desktop is active.

Issue 2: Streamlit Errors

  • Check the terminal for:
    • Missing dependencies.
    • Errors in requirements.txt or app.py.
  • Figure 10: Streamlit error example
    Figure 10

Issue 3: Access Issues

  • Ensure port mappings in the Dockerfile match the ones in your Docker run command.
  • Figure 11: Port configuration mismatch
    Figure 11

Issue 4: Debugging Docker

  • View detailed logs for the Docker container:

    docker logs <container-id>
  • Figure 12: Port Verification
    Figure 12


Conclusion

By following this guide, you have successfully containerized a Streamlit chatbot application. You’ve learned how to:

  1. Install dependencies.
  2. Configure Docker for deployment.
  3. Implement interactive features in Streamlit.
  4. Troubleshoot common issues.

Containerization ensures consistency and portability, making your chatbot ready for both local testing and production deployment.


⚠️ **GitHub.com Fallback** ⚠️