Create app/page.tsx

app/page.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { useState } from "react";
+
+export default function Home() {
+  const [prompt, setPrompt] = useState("");
+  const [image, setImage] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const generate = async () => {
+    setLoading(true);
+    setError(null);
+    setImage(null);
+
+    try {
+      const res = await fetch("/api/image", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ prompt })
+      });
+
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error || `Request failed: ${res.status}`);
+      }
+
+      const data = await res.json();
+      setImage(`data:image/png;base64,${data.image}`);
+    } catch (e: any) {
+      setError(e.message || "Unknown error");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <main style={{ padding: 24, maxWidth: 800, margin: "0 auto" }}>
+      <h1>Gemini 2.0 Flash Exp – Image Generation</h1>
+      <p>Backend: Python (google-genai) · Frontend: Next.js</p>
+
+      <textarea
+        style={{ width: "100%", height: 100, marginTop: 16 }}
+        placeholder="Describe the image you want to generate..."
+        value={prompt}
+        onChange={(e) => setPrompt(e.target.value)}
+      />
+
+      <button
+        style={{ marginTop: 16, padding: "8px 16px" }}
+        onClick={generate}
+        disabled={loading || !prompt.trim()}
+      >
+        {loading ? "Generating..." : "Generate Image"}
+      </button>
+
+      {error && (
+        <p style={{ color: "red", marginTop: 16 }}>
+          Error: {error}
+        </p>
+      )}
+
+      {image && (
+        <div style={{ marginTop: 24 }}>
+          <h2>Result</h2>
+          <img
+            src={image}
+            alt="Generated"
+            style={{ maxWidth: "100%", border: "1px solid #ccc" }}
+          />
+        </div>
+      )}
+    </main>
+  );
+}