Cloudflare Developers•9mo ago

Have others been able to run text-to-

Have others been able to run text-to-image models in NextJS apps that run on Pages? I have a nextJS app set up via C3 and a server action performing the following:

"use server";

import { getRequestContext } from "@cloudflare/next-on-pages";
import { Ai } from "@cloudflare/ai";


export async function createThread(prevState: any, formData: FormData) {
  const { env } = getRequestContext();
  const ai = new Ai(env.AI);

  const title = formData.get("title");
  const response = await ai.run(
    "@cf/stabilityai/stable-diffusion-xl-base-1.0",
    {
      prompt: title as string,
    }
  );

"use server";

import { getRequestContext } from "@cloudflare/next-on-pages";
import { Ai } from "@cloudflare/ai";


export async function createThread(prevState: any, formData: FormData) {
  const { env } = getRequestContext();
  const ai = new Ai(env.AI);

  const title = formData.get("title");
  const response = await ai.run(
    "@cf/stabilityai/stable-diffusion-xl-base-1.0",
    {
      prompt: title as string,
    }
  );

However, I'm running into

Error: A Node.js API is used (DecompressionStream) which is not supported in the Edge Runtime. Learn more: https://nextjs.org/docs/api-reference/edge-runtime

I'm guessing there some decompression going on under the hood with the AI interface? If it matters, my next step is to write the response as a file to R2, so I'm not sure that I actually need to decompress for my purposes...

1 Reply

alukachOP•9mo ago

For anyone reading this in the future, what worked for me was to push all of the AI operations I was running into a separate worker that I then added to my NextJS app as a Service Binding (https://developers.cloudflare.com/workers/configuration/bindings/about-service-bindings/). This works well for my needs.

import { Ai } from '@cloudflare/ai';
import { AiTextToImageInput, AiTextToImageOutput } from '@cloudflare/ai/dist/ai/tasks/text-to-image';

export interface Env {
        AI: Ai;
}

export default {
        async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
                if (request.method !== 'POST') {
                        return new Response('Invalid method', { status: 405 });
                }

                const url = new URL(request.url);
                const model = url.pathname.slice(1);

                const body = await request.json<AiTextToImageInput>();

                const ai = new Ai(env.AI);
                const startTime = Date.now();
                const image = (await ai.run(model as any, body)) as AiTextToImageOutput;
                const duration = (Date.now() - startTime) / 1000;
                return new Response(image, { headers: { 'x-duration': `${duration}` } });
        },
};

import { Ai } from '@cloudflare/ai';
import { AiTextToImageInput, AiTextToImageOutput } from '@cloudflare/ai/dist/ai/tasks/text-to-image';

export interface Env {
        AI: Ai;
}

export default {
        async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
                if (request.method !== 'POST') {
                        return new Response('Invalid method', { status: 405 });
                }

                const url = new URL(request.url);
                const model = url.pathname.slice(1);

                const body = await request.json<AiTextToImageInput>();

                const ai = new Ai(env.AI);
                const startTime = Date.now();
                const image = (await ai.run(model as any, body)) as AiTextToImageOutput;
                const duration = (Date.now() - startTime) / 1000;
                return new Response(image, { headers: { 'x-duration': `${duration}` } });
        },
};

Gaming

Programming

Have others been able to run text-to-