When it comes to working with an AI image generator, the speed in which images are generated is often a compromise. Runpod’s Serverless Workers allows you to host SDXL Turbo from Stability AI, which is a fast text-to-image model.
In this tutorial, you’ll build a web application, where you’ll leverage Runpod’s Serverless Worker and Endpoint to return an image from a text-based input.
By the end of this tutorial, you’ll have an understanding of running a Serverless Worker on Runpod and sending requests to an Endpoint to receive a response.
You can proceed with the tutorial by following the build steps outlined here or skip directly to Deploy a Serverless Endpoint section.
This section presumes you have an understanding of the terminal and can execute commands from your terminal.
Before starting this tutorial, you’ll need access to:
To continue with this quick start, you’ll need access to the following from Runpod:
To build your Docker image, you’ll need access to the following:
You can also use the prebuilt image from runpod/sdxl-turbo.
To clone the worker-sdxl-turbo
repo, you’ll need access to the following:
With the prerequisites covered, get started by building and pushing a Docker image to a container registry.
This step will walk you through building and pushing your Docker image to your container registry. This is useful to building custom images for your use case. If you prefer, you can use the prebuilt image from runpod/sdxl-turbo instead of building your own.
Building a Docker image allows you to specify the container when creating a Worker. The Docker image includes the Runpod Handler which is how you provide instructions to Worker to perform some task. In this example, the Handler is responsible for taking a Job and returning a base 64 instance of the image.
Now that you’ve pushed your container registry, you’re ready to deploy your Serverless Endpoint to Runpod.
The container you just built will run on the Worker you’re creating. Here, you will configure and deploy the Endpoint. This will include the GPU and the storage needed for your Worker.
This step will walk you through deploying a Serverless Endpoint to Runpod.
Log in to the Runpod Serverless console.
Select + New Endpoint.
Provide the following:
runpod/sdxl-turbo:dev
.Select Deploy.
Now, let’s send a request to your Endpoint.
Now that our Endpoint is deployed, you can begin interacting with and integrating it into an application. Before writing the logic into the application, ensure that you can interact with the Endpoint by sending a request.
Run the following command:
Export your variable names in your terminal session or replace them in line:
YOUR_ENDPOINT
: The name of your Endpoint.YOUD_API_KEY
: The API Key required with read and write access.YOUR_PROMPT
: The custom prompt passed to the model.You should see the output. The status will return PENDING
; but quickly change to COMPLETED
if you query the Job Id.
Now, let’s create a web application that can take advantage of writing a prompt and generate an image based on that prompt. While these steps are specific to JavaScript, you can make requests against your Endpoint in any language of your choice.
To do that, you’ll create two files:
index.html
: The frontend to your web application.script.js
: The backend which handles the logic behind getting the prompt and the call to the Serverless Endpoint.The HTML file (index.html
) sets up a user interface with an input box for the prompt and a button to trigger the image generation.
The HTML file (index.html
) sets up a user interface with an input box for the prompt and a button to trigger the image generation.
The JavaScript file (script.js
) contains the generateImage
function. This function reads the user’s input, makes a POST request to the Runpod serverless endpoint, and handles the response. The server’s response is expected to contain the base64-encoded image, which is then displayed on the webpage.
${process.env.REACT_APP_AUTH_TOKEN}
with your actual API key.${process.env.REACT_APP_ENDPOINT_ID}
with your specific Endpoint.index.html
in a web browser, enter a prompt, and select Generate Image to see the result.This web application serves as a basic example of how to interact with your Runpod serverless endpoint from a client-side application. It can be expanded or modified to fit more complex use cases.
You can run a server through Python or by opening the index.html
page in your browser.
Run the following command to start a server locally using Python.
Run the following command to start a server locally using Python.
Open the File in a Browser
Open the index.html
file directly in your web browser.
index.html
file is located.index.html
file into an open browser window.file:///path/to/your/index.html
.