Streamlit - DrAlzahraniProjects/csusb_fall2024_cse6550_team2 GitHub Wiki
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.
To containerize the Streamlit application, start by ensuring the development environment is properly configured, with Docker as the foundational tool.
-
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
-
If Docker isn’t installed, download and install it from [Docker Desktop](https://www.docker.com/).
-
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
This section covers creating and organizing necessary files for a successful Dockerized Streamlit application, such as the requirements.txt
file and custom styling.
- 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: Example
-
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.
-
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)
- 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;
}
-
Figure 4: Organized file structure with CSS
Integrate Streamlit widgets and essential functionalities to build an interactive chatbot interface.
Persistent variables across reruns.
user_input = st.session_state['user_input']
-
Figure 5: Session state example
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
Display formatted text using Markdown syntax.
st.markdown(body, unsafe_allow_html=False)
Collect user feedback interactively.
st.feedback("thumbs", key=f"feedback_{index}", on_change=handle_feedback, args=(index,))
-
Figure 7: Feedback widget example
Set a custom title for the app's browser tab.
st.set_page_config(page_title="Academic Chatbot - Team2")
-
Figure 8: Page configuration example
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
- Ensure Docker Desktop is active.
- Check the terminal for:
- Missing dependencies.
- Errors in
requirements.txt
orapp.py
.
-
Figure 10: Streamlit error example
- Ensure port mappings in the Dockerfile match the ones in your Docker run command.
-
Figure 11: Port configuration mismatch
-
View detailed logs for the Docker container:
docker logs <container-id>
-
Figure 12: Port Verification
By following this guide, you have successfully containerized a Streamlit chatbot application. You’ve learned how to:
- Install dependencies.
- Configure Docker for deployment.
- Implement interactive features in Streamlit.
- Troubleshoot common issues.
Containerization ensures consistency and portability, making your chatbot ready for both local testing and production deployment.