Skip to content
Ease of use: Streamlit allows you to create dynamic data apps with only a few lines of code, making it accessible to users who are not web developers.Community support: Streamlit has an active and growing community, which means you can contribute to its future development and benefit from the knowledge and resources shared by other users.Simple to use: You can create a web app with a few lines of Python code.Interactive widgets: Includes widgets like sliders, buttons, checkboxes, and more that let users interact with your application.Automatic updates: The app automatically updates the output whenever the user changes the input.Installation: First, you need to install Streamlit using pip:Creating an app: Write a Python script using Streamlit’s functions to create different elements of your app:Running the app: Run the app by navigating to the directory of your script in your terminal and typing:This command starts a server and opens your browser to display your app.
Ease of setup: Quickly create interfaces for models.Built-in inputs and outputs: Supports a variety of input and output interfaces, including text, images, audio, and more.Integration: Easily integrates with popular machine learning frameworks and can be embedded in Python notebooks.Installation: Install Gradio via pip:Creating an interface:This code snippet creates a web interface for a function that greets the user by name.Running the interface: The launch() method opens your default web browser and serves your interface locally.
Use Streamlit if: You’re creating data-driven applications requiring minimal frontend code, especially for data visualization.Use Gradio if: You need a straightforward way to demo AI models, allowing users to test the model’s capabilities with different inputs.
Main script: This could be a Python script that uses libraries like streamlit or gradio for the web interface.Requirements file: A requirements.txt file listing all the necessary Python libraries your app depends on.Model files: If your app uses machine learning models, make sure they are loaded properly either from Hugging Face's model hub or from local files.Assets: Any additional files your application uses (like images, data files).Create a Repository: If you haven’t already, create a new repository on GitHub.Upload Your Code: Push all your project files to this repository. Make sure your main script, requirements file, and any other necessary files are included.Create a Space: Log in to Hugging Face, navigate to Spaces, and create a new Space.Link Your Repository: During the setup, you’ll be prompted to link your GitHub repository to your Space. Provide the repository URL and select the appropriate settings based on your application type (e.g., Streamlit, Gradio).Environment Detection: Hugging Face Spaces will detect the appropriate environment from your repository files. For instance, if you have a streamlit_app.py file, it will configure the environment for Streamlit.Automatic Deployment: Once your GitHub repository is linked, any push to your repository (like updating the code or pushing new files) triggers a deployment process.Build and Run: Hugging Face Spaces builds your application based on the contents of your GitHub repository. This process might take a few minutes, after which your app will be accessible online via a unique URL provided by Hugging Face.Test Your App: Visit the URL provided by Hugging Face to see your app in action. Test all functionalities to ensure everything works as expected in the web environment.Share Your Space: You can share the URL with others, allowing them to interact with your application.Logs: If something goes wrong, check the logs in your Hugging Face Space for errors during the build or runtime.Dependencies: Make sure all dependencies listed in requirements.txt are correct and installable.Compatibility: Ensure that your code is compatible with the versions of Python and libraries supported by Hugging Face Spaces.
A title (st.title)A text area for users to enter text (st.text_area)A button that triggers text conversion (st.button)Displays the converted text (st.subheader and st.write)
Create a GitHub Repository: If you haven’t already, create a new repository on GitHub.Upload Your Code: Push both app.py and requirements.txt to this repository.
Create a Space: Log in to Hugging Face, navigate to Spaces, and create a new Space.Link Your Repository: Choose Streamlit as the web framework and provide the GitHub repository URL when prompted.
Incorporate Multiple Features: Expand the functionality of your app by adding options for more text manipulations (e.g., convert to lowercase, reverse text, count words).Visual Feedback: Include visual elements like charts or graphs, especially useful if your app will eventually handle more complex data processing that benefits from visualization.What the app does.How to run it locally.Any special instructions or prerequisites.Propose a real-world problem that your app could solve, like processing customer feedback or analyzing social media posts.Demonstrate how someone might use this app in a practical setting.Once your app is live on Hugging Face Spaces, monitor its usage.Collect feedback and make necessary updates or fixes.
Share
Explore
Lab: Building on HuggingFace Spaces with Streamlit and Gradio
Let’s start with what Streamlit and Gradio are and how you can use them to build interactive AI applications.
These libraries are popular for creating web apps quickly, especially when showcasing data science projects and machine learning models.
What is Streamlit? Streamlit:
It is designed to turn data scripts into shareable web apps in minutes.
Streamlit: A Faster Way to Build and Share Data Apps
Streamlit is an open-source Python framework that allows you to quickly build and share data apps. It turns data scripts into interactive web apps in minutes, all in pure Python and without requiring any frontend experience.
Streamlit is an open-source Python library that helps you create custom web apps for machine learning and data science.
With Streamlit, you can effortlessly share, manage, and deploy your apps directly from the platform. It provides a user-friendly interface that makes it easy to build dashboards, generate reports, or create chat apps
. Streamlit is designed to be beginner-friendly and aims to simplify the process of building web apps for data scientists and AI/ML engineers. It has a vibrant community and is free to use
. Some key features and benefits of Streamlit include:
.
Rapid development: With Streamlit, you can transform Python scripts into interactive web apps in minutes, significantly reducing development time compared to traditional methods.
Shareability: Streamlit provides a platform for easily sharing and deploying your apps, allowing others to access and interact with your data
Overall, Streamlit is a powerful tool for building and sharing data apps, particularly for those who want a fast and efficient way to create interactive web interfaces for their data projects.
Key Features:
Basic Usage:
pip install streamlit
import streamlit as st st.title('Hello, Streamlit!') if st.button('Say hello'): st.write('Why, hello there!') else: st.write('Goodbye')
streamlit run your_script.py
Gradio is a servlerless iaaS
Gradio is another Python library that makes it easy to create and host UIs for prototyping your machine learning models.
Gradio is widely used for creating simple interfaces where you can input data into a model and get responses.
Key Features:
Basic Usage:
pip install gradio
import gradio as gr def greet(name): return "Hello " + name + "!" iface = gr.Interface(fn=greet, inputs="text", outputs="text") iface.launch()
Comparison and Choice
Both libraries are designed to make it easy for data scientists and developers to showcase their work without needing extensive web development skills.
They can be integrated into larger applications or used standalone for demonstrations, experiments, or educational purposes.
How do I actually get the code to run in a Space on HuggingFace?
Deploying and running code in a Hugging Face Space involves a series of logical steps that integrate version control systems, namely GitHub, with the deployment capabilities of Hugging Face.
Here is how you can proceed to get your code running in a Hugging Face Space:
Step 1: Prepare Your Code
Ensure your application code is ready and tested locally. Your project typically would include:
Step 2: Set Up a GitHub Repository
Step 3: Connect to Hugging Face Spaces
Step 4: Deployment
Step 5: Access and Share Your Space
Tips for Troubleshooting
By following these steps, you can effectively deploy and run your AI applications on Hugging Face Spaces, leveraging the platform’s capabilities to make your application accessible and interactive.
Below is a minimal viable product (MVP) for a basic web application using Streamlit, which students can deploy using Hugging Face Spaces. This example will demonstrate a simple text transformation app that converts input text to uppercase.
Recipe to get your ML model up and going as a HuggingFace Space:
Step 1: Prepare the Python Script
Create a file named app.py and include the following Python code:
import streamlit as st
def convert_to_uppercase(input_text):
return input_text.upper()
st.title('Text Uppercaser')
user_input = st.text_area("Enter text to convert:", "Type here...")
if st.button('Convert'):
result = convert_to_uppercase(user_input)
st.subheader('Converted Text:')
st.write(result)
This script uses Streamlit to create a web app that has:
Step 2: Create the requirements.txt File
Next, you'll need a requirements.txt file that lists all necessary libraries. For this simple Streamlit app, the file should include:
streamlit
This ensures that Streamlit is installed in the environment where your app is running.
Step 3: Deploy on GitHub
Step 4: Link to Hugging Face Spaces
Step 5: Launch and Test
Once you link your repository and push the files, Hugging Face will automatically deploy your Streamlit app. It will be accessible through a URL provided by Hugging Face.
Test the app by entering text and clicking the "Convert" button to see the text transformed to uppercase.
Conclusion
This simple project is an excellent starting point for students to understand the basics of creating and deploying web apps with Streamlit and Hugging Face Spaces. They can experiment by adding new features, changing the app's functionality, or even trying out different frameworks like Gradio.
To complete and enrich the Minimal Viable Product (MVP) demonstration for deploying an application on Hugging Face Spaces, you can extend the existing simple example to incorporate a few additional elements that will showcase a more functional and interactive application. Here are some suggestions to consider:
Step 1: Enhance the Application
Add More Interactivity:
Example Enhanced Script (app.py):
pythonCopy codeimport streamlit as st
def convert_text(input_text, operation): if operation == 'uppercase': return input_text.upper() elif operation == 'lowercase': return input_text.lower() elif operation == 'reverse': return input_text[::-1] elif operation == 'word count': return f"Word count: {len(input_text.split())}"
st.title('Text Transformer')
user_input = st.text_area("Enter text:", "Type here...")operation = st.selectbox("Choose operation:", ['uppercase', 'lowercase', 'reverse', 'word count'])
if st.button('Transform'): result = convert_text(user_input, operation) st.subheader('Result:') st.write(result)
Step 2: Add Additional Dependencies (if any)
For a more complex app, especially one that involves data visualization or processing, update your requirements.txt file to include additional libraries:
graphqlCopy codestreamlitpandas # If using data manipulationmatplotlib # For plotting, if necessary
Step 3: Provide Documentation
Create a README.md: Add a README.md file in your GitHub repository explaining:
Example README.md Content:
markdownCopy code# Text Transformer App
This application transforms input text based on the selected operation.
## Features- Convert text to uppercase.- Convert text to lowercase.- Reverse text.- Count words in text.
## Running LocallyTo run this app locally, clone the repository and run the following command:
streamlit run app.py
csharpCopy code
## DependenciesInstall all dependencies using:
pip install -r requirements.txt
Step 4: Demonstrate Real-World Application
Use Case Scenario:
Step 5: Deploy and Monitor
Monitor and Update:
By following these steps, your MVP on Hugging Face Spaces will not only be fully functional but will also provide a comprehensive demonstration of how to build and deploy an interactive web application. This approach will help students grasp the full cycle of app development from conception through deployment and iterative improvement based on user feedback.
When it comes to choosing between Streamlit and Gradio for prototyping, there are a few factors to consider. Let's explore the information from the search results to understand the differences between the two.
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.