Building and Deploying Streamlit Apps on Hugging Face: A Step-by-Step Guide

Streamlit makes it easy to create interactive and visually appealing web apps for your data science or utility projects. This guide walks you through creating and deploying two types of Streamlit apps on Hugging Face: a Temperature Calculator and a Currency Converter.

Part 1: Building a Temperature Calculator

The Temperature Calculator app converts temperature values between Celsius, Fahrenheit, and Kelvin.

Code for the Temperature Calculator

1. Create the App Code
   Save the following code in a file named temperature_calculator.py:

    import streamlit as st
   
    def convert_temperature(value, from_unit, to_unit):
        if from_unit == to_unit:
            return value
        if from_unit == "Celsius" and to_unit == "Fahrenheit":
            return (value * 9/5) + 32
        if from_unit == "Celsius" and to_unit == "Kelvin":
            return value + 273.15
        if from_unit == "Fahrenheit" and to_unit == "Celsius":
            return (value - 32) * 5/9
        if from_unit == "Fahrenheit" and to_unit == "Kelvin":
            return (value - 32) * 5/9 + 273.15
        if from_unit == "Kelvin" and to_unit == "Celsius":
            return value - 273.15
        if from_unit == "Kelvin" and to_unit == "Fahrenheit":
            return (value - 273.15) * 9/5 + 32
   
    st.title("Temperature Calculator")
    st.write("Convert between Celsius, Fahrenheit, and Kelvin.")
   
    value = st.number_input("Enter the temperature value:", value=0.0)
    from_unit = st.selectbox("From Unit:", ["Celsius", "Fahrenheit", "Kelvin"])
    to_unit = st.selectbox("To Unit:", ["Celsius", "Fahrenheit", "Kelvin"])
   
    if st.button("Convert"):
        result = convert_temperature(value, from_unit, to_unit)
        st.success(f"{value} {from_unit} is equal to {result:.2f} {to_unit}")
   

Part 2: Building a Currency Converter

The Currency Converter app uses an API to fetch real-time exchange rates and converts currencies.

Code for the Currency Converter

1. Create the App Code
   Save the following code in a file named currency_converter.py:

    import streamlit as st
    import requests
   
    def fetch_exchange_rate(base, target):
        api_url = f"https://api.exchangerate-api.com/v4/latest/{base}"
        response = requests.get(api_url)
        if response.status_code == 200:
            rates = response.json().get("rates", {})
            return rates.get(target, None)
        return None
   
    st.title("Currency Converter")
    st.write("Convert between different currencies with real-time rates.")
   
    amount = st.number_input("Enter the amount:", value=1.0)
    base_currency = st.text_input("Base Currency (e.g., USD):", "USD")
    target_currency = st.text_input("Target Currency (e.g., EUR):", "EUR")
   
    if st.button("Convert"):
        rate = fetch_exchange_rate(base_currency.upper(), target_currency.upper())
        if rate:
            converted_amount = amount * rate
            st.success(f"{amount} {base_currency.upper()} = {converted_amount:.2f} {target_currency.upper()}")
        else:
            st.error("Unable to fetch exchange rate. Please check the currency codes.")
   

Part 3: Creating a requirements.txt File

Both apps rely on external libraries. To ensure smooth deployment, create a requirements.txt file in the project directory with the following content:

streamlit
requests

Part 4: Deploying the Apps on Hugging Face

1. Sign Up for Hugging Face
   Create an account at Hugging Face.

2. Create a New Space

   • Navigate to the Spaces section.

   • Click on the Create New Space button.

   • Choose Streamlit as the app type and give your space a name.

3. Upload Your Code

   • After creating the space, you’ll be directed to a page where you can directly upload files.

   • Create the necessary files for your app:

     • app.py (for the Temperature Calculator app)

     • app.py (for the Currency Converter app)

     • requirements.txt (for dependencies)

Simply paste the respective code into each file in the Hugging Face interface and click Save.
For example:

• In app.py, paste the Temperature Calculator app code.

• In app.py, paste the Currency Converter app code. (first create a separate space for this app and its corresponding requirements.txt file)

• In requirements.txt, paste the required dependencies:

    Copy codestreamlit
    requests
  

4. Run Your App

   • Once all the files are uploaded, Hugging Face will automatically install the dependencies and run your app.

   • You can view your app at https://huggingface.co/spaces/<your-username>/<your-space-name>.

Conclusion

By following this guide, you've successfully built and deployed two useful Streamlit apps on Hugging Face Spaces. These projects showcase the versatility of Streamlit for rapid app development and Hugging Face for seamless deployment. Expand these apps further or create new ones to sharpen your skills! 🚀