DALL·E 2 & 3

​

Pre-requisites

To run the app, you must have Supabase, OpenAI and Cloudflare R2 set up. If you haven’t done this yet, please start there.

// Get the image URL from the OpenAI response
const imageUrl = responseData.data[0].url;

// // Prepare the data for upload
// const uploadData = {
//   imageUrl,
//   uploadPath: toolConfig.upload.path,
// };

// // Get the base upload API URL
// const apiUrl = `${defaultUrl}/api/upload/image`;

// // Upload the image to Cloudflare
// const uploadResponse = await fetch(apiUrl, {
//   method: "POST",
//   headers: {
//     "Content-Type": "application/json",
//   },
//   body: JSON.stringify(uploadData),
// });

// const uploadResult = await uploadResponse.json();

// // Extract the URL from the upload result
// const uploadedImageUrl = uploadResult.url;

// Alternatively, if you dont want to upload image to Cloudflare, you can directly use the image URL from OpenAI response and delete the above code

// Store the response in Supabase
const supabaseResponse = await uploadToSupabase(
  requestBody,
  imageUrl, // use imageUrl from OpenAI directly instead of uploadedImageUrl
  toolConfig.toolPath,
  toolConfig.aiModel
);

That’s all you need to get the app running.

​

Building variations

You can easily build variations by changing the prompt.ts file and passing different input variables.

​

Prompt

Start by creating a new prompt for your app.

Use the existing prompts for guidance. Follow the same principles and structure as in the demo prompts.

Your prompt.ts file should manage user input like this:

export function generatePrompt(body: any) {
  const { ideaDescription } = body;

  return (
    `Design a modern, sleek, and scalable logo for a SaaS application that embodies the essence of ${ideaDescription}. The logo should be versatile, distinctive, and memorable, while conveying the brand's values and personality.\n` +
    "INPUTS:\n" +
    `Business Description: ${ideaDescription}\n` +

​

Automatic input capturing

Update toolConfig.ts to include:

1. The input variables defined in the prompt
   • Input variables in prompt.ts should match name in toolConfig.ts. See example below.
2. The button text for the form
3. The type of model used

The page.tsx page in /app folder of our demo app will get the data from toolConfig.ts and pass it to the InputCapture component to automatically build a form based on this.

​

Displaying output

After the image has been generated, the image will be automatically displayed on screen instead of the initial InfoCard component.