DEV Community

Cover image for 🚀 Introduction to Building AI-Powered Apps with Streamlit and FastAPI
CyprianTinasheAarons
CyprianTinasheAarons

Posted on

🚀 Introduction to Building AI-Powered Apps with Streamlit and FastAPI

#webdev #programming #ai #rag

The software world has made it fun and exciting for builders to create solutions and bring their ideas to life quicker than ever before. Sometimes, you just want to build something cool to show off or to learn a new concept or AI model by building it. Whether it's for a quick MVP or a POC to gauge traction in the real world, learning the combo of Streamlit for the frontend and FastAPI for your backend will make you a beast at this game. 🦾

🌟 What is FastAPI?

FastAPI is a fast and modern web framework for building APIs with Python. It boasts numerous advantages, such as:

  • Speed: High performance, on par with Node.js and Go.
  • Ease of Use: Simple and intuitive syntax.
  • Less Code: Requires fewer lines of code to achieve the same functionality compared to other frameworks.

But there are other frameworks like Django and Flask, to name a few, that can also work well. Personally, I prefer FastAPI for many reasons, and the goal is to solve problems efficiently. So, remember to stick to one framework you like and understand. 👍

🛠️ FastAPI Basics

1. Setting Up the Virtual Environment

First, let's set up our virtual environment to keep our project dependencies isolated.

python -m venv .venv
Enter fullscreen mode Exit fullscreen mode

2. Activating the Virtual Environment

Activate the environment you just created:

source .venv/bin/activate
Enter fullscreen mode Exit fullscreen mode

For Windows users:

.venv\Scripts\activate
Enter fullscreen mode Exit fullscreen mode

3. Installing Required Packages

Next, install FastAPI and Uvicorn (an ASGI server):

pip install fastapi uvicorn
Enter fullscreen mode Exit fullscreen mode

4. Creating the Main Application File

Create a new file named main.py:

touch main.py
Enter fullscreen mode Exit fullscreen mode

5. Writing the Basic FastAPI Application

Copy and paste the following code into your main.py file:

from fastapi import FastAPI
import uvicorn

app = FastAPI()

@app.get("/")
async def root():
    return {"message": "Hello World"}

if __name__ == "__main__":
    uvicorn.run(app, host="0.0.0.0", port=8000)
Enter fullscreen mode Exit fullscreen mode

6. Running the FastAPI Application

In your terminal, run the application:

python main.py
Enter fullscreen mode Exit fullscreen mode

FastAPI automatically generates documentation using OpenAPI, which is one of the many features AI engineers love! 🎉

Navigate to your local URL:

http://0.0.0.0:8000/docs

FastAPI Docs

Yay!! Our first API is up and running with a simple "Hello World" response. But the fun is just beginning! 🚀

📚 Project Summary

We will be building a simple FastAPI endpoint that takes a prompt and, with the help of Replicate's hosted Flux Image GenAI model, generates a cool image. Then, using Streamlit for our client-side, we'll call the endpoint using requests to generate and present the image to the user. 🎨✨

🤖 What is Replicate.com?

Replicate lets you run AI models with a cloud API, without having to understand machine learning or manage your own infrastructure. It's a game-changer for developers looking to integrate powerful AI capabilities quickly and effortlessly.

Steps to Get Started with Replicate:

  1. Create or Log In: Go to Replicate and create an account or log in.
  2. Access the Flux Model: Navigate to Flux 1.1 Pro.

Replicate Flux Model

Replicate provides excellent documentation for their APIs:

Select the Python documentation for seamless integration:

Replicate Python Docs

Obtaining Your Replicate API Token

To get the API key, follow these two steps:

  1. Add Billing Information:
    Go to Replicate Billing and follow the instructions to add your billing information.

  2. Create API Key:
    Go to Replicate API Tokens to create your API key.

Export your API token in your terminal:

export REPLICATE_API_TOKEN=<paste-your-token-here>
Enter fullscreen mode Exit fullscreen mode

🖥️ Enhancing FastAPI with Replicate

Install the necessary packages:

pip install replicate loguru
Enter fullscreen mode Exit fullscreen mode
  • Replicate: To interact with Replicate's API.
  • Loguru: For logging errors, information, etc. Loguru Documentation

Example Code Provided by Replicate 

import replicate

input = {
    "prompt": "black forest gateau cake spelling out the words \"FLUX 1.1 Pro\", tasty, food photography",
    "prompt_upsampling": True
}

output = replicate.run(
    "black-forest-labs/flux-1.1-pro",
    input=input
)
print(output)
#=> "https://replicate.delivery/czjl/HQZ89fz0ogUSJi2RLpuTyYER..."
Enter fullscreen mode Exit fullscreen mode

Customizing the Code for Our Image Generation Endpoint

Replace the above with the following enhanced code in main.py:

from fastapi import FastAPI
from pydantic import BaseModel
import uvicorn
import replicate
from loguru import logger
from typing import Dict

app = FastAPI()

# Configure Loguru to log into app.log with rotation
logger.add("app.log", rotation="500 MB")

class ImageInput(BaseModel):
    prompt: str
    prompt_upsampling: bool = True

@app.post("/generate")
async def generate_image(input_data: ImageInput) -> Dict[str, str]:
    input_prompt = {
        "prompt": input_data.prompt,
        "prompt_upsampling": input_data.prompt_upsampling
    }

    # Generate image using Replicate's Flux model
    output = replicate.run(
        "black-forest-labs/flux-1.1-pro",
        input=input_prompt
    )

    # Handle the output to get the image URL
    if isinstance(output, replicate.helpers.FileOutput):
        url = str(output)
    else:
        url = output

    return {"message": "Image generated", "url": url}

@app.get("/")
async def root() -> Dict[str, str]:
    logger.info("Root endpoint accessed")
    return {"message": "Welcome to the Flux Image Generation API"}

if __name__ == "__main__":
    logger.info("Starting the application")
    uvicorn.run(app, host="127.0.0.1", port=8000)
Enter fullscreen mode Exit fullscreen mode

FastAPI Enhanced

Code Breakdown 🧐

  • Importing Necessary Libraries:

    from fastapi import FastAPI
from pydantic import BaseModel
import uvicorn
import replicate
from loguru import logger
from typing import Dict

  • Initializing FastAPI and Loguru:

    app = FastAPI()
logger.add("app.log", rotation="500 MB")
    • FastAPI Instance: Creates the FastAPI app.
    • Loguru Configuration: Logs will be stored in app.log with a rotation size of 500 MB.

  • Defining the Data Model:

    class ImageInput(BaseModel):
    prompt: str
    prompt_upsampling: bool = True
    • ImageInput: A Pydantic model that ensures the incoming data has the required structure.

  • Creating the /generate Endpoint:

    @app.post("/generate")
async def generate_image(input_data: ImageInput) -> Dict[str, str]:
    input_prompt = {
        "prompt": input_data.prompt,
        "prompt_upsampling": input_data.prompt_upsampling
    }

    # Generate image using Replicate's Flux model
    output = replicate.run(
        "black-forest-labs/flux-1.1-pro",
        input=input_prompt
    )

    # Handle the output to get the image URL
    if isinstance(output, replicate.helpers.FileOutput):
        url = str(output)
    else:
        url = output

    return {"message": "Image generated", "url": url}
    • Purpose: Takes a prompt from the user, generates an image using Replicate's Flux model, and returns the image URL.

  • Creating the Root Endpoint:

    @app.get("/")
async def root() -> Dict[str, str]:
    logger.info("Root endpoint accessed")
    return {"message": "Welcome to the Flux Image Generation API"}
    • Purpose: A simple root endpoint that logs access and returns a welcome message.

  • Running the Application:

    if __name__ == "__main__":
    logger.info("Starting the application")
    uvicorn.run(app, host="127.0.0.1", port=8000)
    • Purpose: Starts the FastAPI application using Uvicorn.

🎨 Building the Client with Streamlit

Now, let's create the client-side application using Streamlit to interact with our FastAPI backend.

1. Installing Streamlit and Requests

Install the necessary packages:

pip install streamlit requests
Enter fullscreen mode Exit fullscreen mode

2. Creating the Streamlit Client

Create a new file named client.py and add the following code:

import requests
import streamlit as st

def generate_image(prompt: str) -> str:
    response = requests.post("http://localhost:8000/generate", json={"prompt": prompt})
    return response.json()["url"]

def main():
    st.title("🎨 Flux 1.1 Pro Image Generator")
    prompt = st.text_input("Enter a prompt for the image")

    if st.button("Generate Image"):
        if prompt:
            with st.spinner("Generating image..."):
                url = generate_image(prompt)
                st.image(url, caption="Your Generated Image")
        else:
            st.error("❗ Please enter a prompt")

if __name__ == "__main__":
        main()
Enter fullscreen mode Exit fullscreen mode

3. Code Explanation 📝

  • Importing Libraries:

    import requests
import streamlit as st
    • Requests: To make HTTP requests to our FastAPI backend.
    • Streamlit: To build the frontend interface.

  • Defining the generate_image Function:

    def generate_image(prompt: str) -> str:
    response = requests.post("http://localhost:8000/generate", json={"prompt": prompt})
    return response.json()["url"]
    • Purpose: Sends the user's prompt to the FastAPI /generate endpoint and retrieves the generated image URL.

  • Creating the Main Function:

    def main():
    st.title("🎨 Flux 1.1 Pro Image Generator")
    prompt = st.text_input("Enter a prompt for the image")

    if st.button("Generate Image"):
        if prompt:
            with st.spinner("Generating image..."):
                url = generate_image(prompt)
                st.image(url, caption="Your Generated Image")
        else:
            st.error("❗ Please enter a prompt")
    • Title: Displays the app title.
    • Text Input: Allows users to enter a prompt for image generation.
    • Button: When clicked, it triggers the image generation process.
    • Spinner: Shows a loading animation while the image is being generated.
    • Image Display: Displays the generated image with a caption.
    • Error Handling: Alerts the user if no prompt is entered.

  • Running the Main Function:

    if __name__ == "__main__":
        main()
    • Purpose: Ensures that the main function runs when the script is executed.

4. Running the Streamlit Client

In your terminal, run the Streamlit app:

streamlit run client.py
Enter fullscreen mode Exit fullscreen mode

Navigate to your local URL, typically http://localhost:8501.

Streamlit Client

5. Generating an Image

Enter a prompt like "a car" and click on Generate Image.

Generating Image

Boom! Your AI-generated image appears in seconds. 🚗✨

🛠️ Quick Setup

For a seamless setup, clone the repository and follow along with the README.md:

🔗 Replicate-Streamlit-FastAPI GitHub Repository

📚 Additional Resources

🎉 We so done!!

Congratulations on getting this far! 🎊 You've just built a powerful AI-powered image generator using FastAPI for the backend and Streamlit for the frontend. Now, you can launch amazing AI solutions that will make the world a better place. 🌍✨

🎯 Ready to Build Your Own AI-Powered App?

Don't stop here! Take what you've learned and start creating your own interactive AI applications today. Whether it's for a quick demo or a full-fledged project, Streamlit and FastAPI make it easy and fun. 🚀

👉 Get Started with Streamlit

👉 Explore More FastAPI Tutorials

💡 Need Help?

Feel free to reach out on Twitter or visit my website for more resources and support. Let's build something amazing together! 🌟

Top comments (2)

Collapse
 
abhilaasha_iyer_4a8388e19 profile image
Abhilaasha iyer •

Great introduction! Streamlit and FastAPI are a powerful combo for building AI-powered apps quickly and efficiently. Whether you're prototyping or showcasing a new model, these tools make development faster and more accessible. Perfect for those looking to dive into AI and create impressive MVPs.
App developers in India

Collapse
 
cypriantinasheaarons profile image
CyprianTinasheAarons •

Hello Abhilaasha Thank You !!

Read next

christopherchhim profile image

Node.js Update

Christopher Chhim -

bramburn profile image

A Comprehensive Guide to Using the WordPress API: Authentication and Post Scheduling

Bhavesh Ramburn -

ivannalon profile image

Authentication Types: JWT, OAuth, and Secure Integration with Google and Facebook

Ivan Nalon -

moh_moh701 profile image

Mastering C# Fundamentals: Book Management Application File Handling for Saving and Loading Data

mohamed Tayel -