Feature/stadstuin demo

[kapsterdam]

Summary

App that lets citizens envision their ideal city garden throug image generation.

Features

• Users submit wishes.
• Ai combines wishes into garden description.
• Uses Dall-E 3 to generate visual representations.

Stack

• Frontend: Next.js 14 + React + Typescript + Tailwind
• Backend Python 3.8 with Flask

[jurb]

Nice!

Something that came to mind: if we keep backend functionality to simple API calls, we could also move over that functionality to server side features of next.js. That way we can deploy the whole thing to a static web app (that uses serverless functions). You can turn app.py into something like this (generated example):

// app/api/generate-image/route.js

export async function POST(request) {
  try {
    const data = await request.json();
    const prompt = data.prompt;

    if (!prompt) {
      return Response.json(
        { error: 'Prompt is required' },
        { status: 400 }
      );
    }

    const payload = {
      model: "dall-e-3",
      prompt: prompt,
      size: "1024x1024",
      style: "vivid",
      quality: "standard",
      n: 1
    };

    // Generate image using Azure OpenAI
    const response = await fetch(process.env.DALLE_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'api-key': process.env.DALLE_KEY
      },
      body: JSON.stringify(payload)
    });

    if (!response.ok) {
      const errorData = await response.text();
      throw new Error(`DALL-E API error: ${response.status} - ${errorData}`);
    }

    const responseData = await response.json();

    return Response.json({
      imageUrl: responseData.data[0].url
    });

  } catch (error) {
    console.error('Error:', error.message);
    return Response.json(
      { error: error.message },
      { status: 500 }
    );
  }
}