How to Create an AI App in Just 10 Minutes

A lot of people these days are using AI in their apps, let it be text summarization, translation, content filtering, recommendation, or any other form of Generative AI.

In this tutorial we are going to build a simple app which takes text as a prompt and generates image.

Prerequisites -

• Next.js basics (Its fine even if you know only React, because Next.js is a React framework and hence takes its syntax from it).

• A Cloudflare account (sign up for it, if you haven't already)

• 10 minutes to spare

Ok so let's get started!

Sign Up for Cloudflare -

Once you sign up you will have a dashboard that looks something like this -

Setup Next.js project using Cloudflare CLI

npm create cloudflare@latest

This command will help you get started with setting up a Next.js project using Cloudflare CLI.
Refer to the image to see what steps to take -

Select all the options like I did to create the Next.js app, if you picked something different based on your convenience then also its fine.

After that Cloudflare will ask some questions on how move further.

Use git as the version control when asked.

When it asks for deploy select 'No', as we will deploy the app when its completed.

Now go back to your Cloudflare dashboard and go to Workers AI.

Select Text-to-image as the model category, for this Tutorial We will be using Stable Diffusion XL Lightning.

Put this at the bottom of your wrangler.toml file, it should be present in the root directory of the project.

[ai]
binding = "AI"

The setup is complete, now let's start building!

Open the page.js file, remove all the contents from it and copy paste this code -

// page.js
export default function page() {
  return (
    <>
      <div>Home page</div>
    </>
  );
}

Now initialize two states, one to hold the value of the prompt user will give and another to hold the value of the image that the AI model will generate.

// page.js
"use client";
import { useState } from "react";
export default function page() {

// we will define this function later
const handleGenerate = async () => {}

  const [prompt, setPrompt] = useState("");
  const [imageSrc, setImageSrc] = useState("");
  return (
    <>
      <textarea
        className="w-full h-32 p-4 text-lg border-2 bg-gray-800 border-gray-300 rounded-md resize-none focus:outline-none focus:border-blue-500"
        placeholder="Enter your prompt here..."
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
      />
      <button
        className="px-6 py-2 text-lg font-semibold text-white bg-blue-500 rounded-md hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
        onClick={handleGenerate}
        disabled={!prompt}
      >
        Generate
      </button>
      <img
        src={imageSrc}
        alt="Generated Image"
        className="max-w-full max-h-96 rounded-md"
      />
    </>
  );
}

Now let's add the functionality to generate images!

1. Creating the handleGenerate function

      const handleGenerate = async () => {
        if (!prompt) return;
        setImageSrc("");
        const response = await fetch(
          `/api/generateImage?prompt=${encodeURIComponent(prompt)}`
        );
        if (response.ok) {
          const blob = await response.blob();
          const url = URL.createObjectURL(blob);
          setImageSrc(url);
        } else {
          alert("Failed to generate image");
        }
      };
   

   2. Creating the api to generate image

      • Create a folder called generateImage in the api folder

        

        In the generateImage folder create a filed named route.js

      • Put the below code in the route.js file

        import { getRequestContext } from "@cloudflare/next-on-pages";
        import { NextResponse } from "next/server";

        export const runtime = "edge";

        // a GET request to generate image
        export async function GET(req) {

        // get the prompt from the request url sent by the client (frontend)
          const url = new URL(req.url);
          const prompt = url.searchParams.get("prompt");

        // if prompt is null then send back a response that prompt is required
          if (!prompt) {
            return new Response("Prompt is required", { status: 400 });
          }

        // setting up the inputs for the AI model
          const inputs = {
            prompt: prompt,
            height: 1024,
            width: 1024
          };

        // Running the AI model to get the Generated Image
          const response = await getRequestContext().env.AI.run(
            "@cf/bytedance/stable-diffusion-xl-lightning",
            inputs
          );

        // sending the generated image back to the client (frontend) as a response 
          return new Response(response, {
            headers: {
              "content-type": "image/png",
            },
          });
        }

Enter a prompt in your app and click generate. Wait a few seconds and then you will see the generated Image!

Now its time to deploy our app!

Go back to Cloudflare and select Workers and Pages then click Create

Click on Pages and then Connect to Git. Before connecting Git make sure that your project repository is created on Github.

Follow the steps once you are connected to Git to host your project using Cloudflare.

Congrats! You have created your first AI app!

If you want more such blogs on how to make AI apps quickly then hit the heart button and let me know! ❤️

Get the full code here - https://github.com/some1uknow/imagify