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:
`https://docs.streamlit.io/`⁠
⁠

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.

⁠

https://streamlit.io/⁠

⁠

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

⁠

https://github.com/streamlit/streamlit⁠

⁠

. 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

⁠

https://github.com/streamlit/streamlit⁠

⁠

. Some key features and benefits of Streamlit include:

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

⁠

https://www.datacamp.com/tutorial/streamlit⁠

⁠

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

⁠

https://streamlit.io/⁠

⁠

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.

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:

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.

Basic Usage:

Installation: First, you need to install Streamlit using pip:

pip install streamlit

Creating an app: Write a Python script using Streamlit’s functions to create different elements of your app:

import streamlit as st st.title('Hello, Streamlit!') if st.button('Say hello'): st.write('Why, hello there!') else: st.write('Goodbye')

Running the app: Run the app by navigating to the directory of your script in your terminal and typing:

streamlit run your_script.py

This command starts a server and opens your browser to display your app.

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:

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.

Basic Usage:

Installation: Install Gradio via pip:

pip install gradio

Creating an interface:

import gradio as gr def greet(name): return "Hello " + name + "!" iface = gr.Interface(fn=greet, inputs="text", outputs="text") iface.launch()

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.

Comparison and Choice

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.

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:

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).

Step 2: Set Up a GitHub Repository

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.

Step 3: Connect to Hugging Face Spaces

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.

Step 4: Deployment

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.

Step 5: Access and Share Your Space

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.

Tips for Troubleshooting

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.

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:

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)

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

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.

Step 4: Link to Hugging Face Spaces

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.

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:

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.

Example Enhanced Script (app.py):


python


Copy code


import 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:


graphql


Copy code


streamlit


pandas  # If using data manipulation


matplotlib  # For plotting, if necessary

Step 3: Provide Documentation

Create a README.md: Add a README.md file in your GitHub repository explaining:

What the app does.

How to run it locally.

Any special instructions or prerequisites.

Example README.md Content:


markdown


Copy 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 Locally


To run this app locally, clone the repository and run the following command:

streamlit run app.py


csharp


Copy code


## Dependencies


Install all dependencies using:

pip install -r requirements.txt

Step 4: Demonstrate Real-World Application

Use Case Scenario:

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.

Step 5: Deploy and Monitor

Monitor and Update:

Once your app is live on Hugging Face Spaces, monitor its usage.

Collect feedback and make necessary updates or fixes.

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.

Streamlit

Streamlit is an open-source framework that allows you to quickly build and deploy web applications in Python. It is designed to be easy to learn and use, especially for data scientists and machine learning engineers familiar with Python

⁠

https://www.analyticsvidhya.com/blog/2023/02/streamlit-vs-gradio-a-guide-to-building-dashboards-in-python/⁠

⁠

. Streamlit provides a simple and intuitive API that makes it easy to get started

⁠

https://www.analyticsvidhya.com/blog/2023/02/streamlit-vs-gradio-a-guide-to-building-dashboards-in-python/⁠

⁠

. It offers advanced customization options and a wider range of integration possibilities

⁠

https://medium.com/@ShahabH/streamlit-vs-gradio-a-comprehensive-comparison-cc2f28b7b832⁠

⁠

. Streamlit apps are easy to share and can be deployed on various platforms, including cloud services and local servers

⁠

https://medium.com/@ShahabH/streamlit-vs-gradio-a-comprehensive-comparison-cc2f28b7b832⁠

⁠

. Streamlit also takes care of the visual appearance of the app, making it look nice by default

⁠

https://www.linkedin.com/pulse/my-streamlit-story-michael-kwesi-essel⁠

⁠

Gradio

Gradio is another open-source Python library that is specifically designed for building machine learning model interfaces

⁠

https://medium.com/@sujathamudadla1213/differences-between-streamlit-and-gradio-cf3ef123d0e1⁠

⁠

. It aims to make it easy for developers to create user interfaces for their models, allowing users to interact with machine learning systems without needing to code

⁠

https://medium.com/@sujathamudadla1213/differences-between-streamlit-and-gradio-cf3ef123d0e1⁠

⁠

. Gradio emphasizes ease of use, multi-model deployment, and security

⁠

https://medium.com/@ShahabH/streamlit-vs-gradio-a-comprehensive-comparison-cc2f28b7b832⁠

⁠

. It provides interactive components like sliders, dropdown menus, and checkboxes to control model inputs and display outputs using visualizations

⁠

https://www.analyticsvidhya.com/blog/2023/02/streamlit-vs-gradio-a-guide-to-building-dashboards-in-python/⁠

⁠

Gradio can be integrated with popular deep learning frameworks like PyTorch and TensorFlow

⁠

https://www.analyticsvidhya.com/blog/2023/02/streamlit-vs-gradio-a-guide-to-building-dashboards-in-python/⁠

⁠

Comparison

Based on the information from the search results, here are some key points to consider when comparing Streamlit and Gradio:

Learning Curve: Streamlit is beginner-friendly and easy to learn, especially if you are already familiar with Python

⁠

https://medium.com/@sujathamudadla1213/differences-between-streamlit-and-gradio-cf3ef123d0e1⁠

⁠

. Gradio is also relatively easy to learn, especially if you are already familiar with machine learning concepts

⁠

https://medium.com/@sujathamudadla1213/differences-between-streamlit-and-gradio-cf3ef123d0e1⁠

⁠

Customization: Streamlit offers advanced customization options and a wider range of integration possibilities

⁠

https://medium.com/@ShahabH/streamlit-vs-gradio-a-comprehensive-comparison-cc2f28b7b832⁠

⁠

. Gradio may have some limitations in terms of customization and complexity, but it is suitable for simpler applications and dashboards.

Deployment: Streamlit apps are easy to share and can be deployed on various platforms, including cloud services and local servers

⁠

https://medium.com/@ShahabH/streamlit-vs-gradio-a-comprehensive-comparison-cc2f28b7b832⁠

⁠

Gradio's deployment options are not explicitly mentioned in the search results.

How deploying the ai app differs with HuggingFace spaces compared to Google Collab Notebook: how is HuggingFace better?

Deploying an AI application using Hugging Face Spaces compared to a Google Colab notebook involves different workflows and platforms with their respective strengths and specific use cases. Here’s a detailed comparison in a tabular format to highlight how these two approaches differ and the advantages of using Hugging Face Spaces for deploying AI apps.

Comparison Table: Hugging Face Spaces vs. Google Colab

How is Hugging Face Spaces Better for AI App Deployment?

Hugging Face Spaces is particularly advantageous for deploying AI applications due to several key aspects:

Turnkey Deployment: Hugging Face Spaces allows developers to go from code to deployed web app seamlessly with minimal setup, which is particularly beneficial for showcasing machine learning models.

Built for Interaction: It is designed to create interactive applications that end users can engage with directly, unlike notebooks which are primarily for code development and exploration.

Continuous Integration: Integration with GitHub for continuous deployment allows developers to update their apps automatically with new commits, making it easier to maintain and update apps.

Community Support: Hugging Face has a large community focused on machine learning and AI, providing extensive resources, tutorials, and support for deploying AI models.

Model Accessibility: Direct access to a plethora of pre-trained models from the Hugging Face Model Hub enhances the functionality and breadth of applications one can build and deploy rapidly.

These features make Hugging Face Spaces particularly suited for developers looking to create and deploy interactive, user-facing AI applications with minimal hassle and robust community support.