FastAPI API Integration for Image Generation Service | CodeSignal Learn

FastAPI API Integration for Image Generation Service | CodeSignal Learn

Introduction to FastAPI API Integration

Welcome to the fifth lesson of our course on building an image generation service with FastAPI! In our previous lessons, we've built several key components of our application: the PromptManager for formatting user inputs, the ImageManager for storing and processing images, the ImageGeneratorService for connecting to Google's Gemini API, and most recently, the ImageGeneratorRouter, which handles input validation and response formatting. Now it's time to bring everything together by creating the FastAPI application that will expose our functionality through HTTP endpoints. This is the final piece of our backend architecture that will allow users to interact with our image generation service through a web interface. Our FastAPI API will have three main routes: A route to serve the main HTML page A route to handle image generation requests A route to retrieve all previously generated images By the end of this lesson, you'll have a complete FastAPI API that integrates with the router we built previously, providing a clean interface for clients to generate and retrieve images.

Setting Up the FastAPI Application

Let's start by creating our FastAPI application. We'll set up the basic structure in our app/main.py file: Python import os from fastapi import FastAPI, Request, HTTPException from fastapi.templating import Jinja2Templates from fastapi.staticfiles import StaticFiles from routers.image_generator_router import ImageGeneratorRouter import uvicorn app = FastAPI(title="Image Generator API") # Get the directory of the current script BASE_DIR = os.path.dirname(os.path.abspath(__file__)) # Set up templates templates = Jinja2Templates(directory=os.path.join(BASE_DIR, "templates")) # Set up static files app.mount("/static", StaticFiles(directory=os.path.join(BASE_DIR, "static")), name="static") # Create router instance image_generator_router = ImageGeneratorRouter() We create a FastAPI application instance by calling FastAPI() with a title for our API. We determine the base directory of the current script and set up Jinja2Templates to handle our HTML templates, passing the directory where our templates are located. We also mount a static files directory to serve static assets like CSS, JavaScript, and images. Finally, we create an instance of our ImageGeneratorRouter . This router handles the business logic for our API endpoints.

Sign up

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Index Route

We'll start with the index route, which will serve the main HTML page of our application: @app.get("/") async def index(request: Request): return templates.TemplateResponse("image_generator.html", {"request": request})

Generate Image Route

Next, let's define the route for generating images: from fastapi import Body from typing import Dict @app.post("/api/generate_image") async def generate_image(user_input: str = Body(..., embed=True)): response = image_generator_router.generate_image(user_input) # Check if the response is a tuple (indicating an error) if isinstance(response, tuple): body, status_code = response if "error" in body: raise HTTPException(status_code=status_code, detail=body["error"]) return response This route is more complex. The decorator @app.post("/api/generate_image") specifies that this function should be called when a client sends a POST request. Inside the function, we extract the user_input from the request body using FastAPI's Body parameter. We then pass this input to our router's generate_image method. If the router returns a tuple (like ({'error': 'Missing input'}, 400)), we check for the error pattern and raise an HTTPException with the appropriate status code. Otherwise, we return the response containing the base64 string. On the frontend, this base64 image will be interpreted as a PNG (because of our implementation in ImageManager), meaning an HTML <img> tag could display it using: <img src="data:image/png;base64,...">

Configuring the FastAPI Server

Now that we have our FastAPI application and routes defined, let's configure the server to run our application. We'll add the following code at the end of our app/main.py file: import uvicorn if __name__ == "__main__": uvicorn.run("main:app", host="0.0.0.0", port=8000, reload=True) This code block uses Uvicorn to run the FastAPI server, listening on all network interfaces (host="0.0.0.0") on port 8000 .

Python

from fastapi import Body
from typing import Dict

@app.post("/api/generate_image")
async def generate_image(user_input: str = Body(..., embed=True)):
    response = image_generator_router.generate_image(user_input)
    
    # Check if the response is a tuple (indicating an error)
    if isinstance(response, tuple):
        body, status_code = response
        if "error" in body:
            raise HTTPException(status_code=status_code, detail=body["error"])
    
    return response