Fix build error + update README

Author: leerob

README.md

@@ -2,11 +2,9 @@
 
 Nextjs quickstart for to generating and editing images with Google Gemini 2.0 Flash. It allows users to generate images from text prompts or edit existing images through natural language instructions, maintaining conversation context for iterative refinements. Try out the hosted demo at [Hugging Face Spaces](https://huggingface.co/spaces/philschmid/image-generation-editing).
 
-
 https://github.com/user-attachments/assets/8ffa5ee3-1b06-46a9-8b5e-761edb0e00c3
 
-
-Get your `GEMINI_API_KEY` key [here](https://ai.google.dev/gemini-api/docs/api-key) and start building. 
+Get your `GEMINI_API_KEY` key [here](https://ai.google.dev/gemini-api/docs/api-key) and start building.
 
 **How It Works:**
 
@@ -15,7 +13,7 @@ Get your `GEMINI_API_KEY` key [here](https://ai.google.dev/gemini-api/docs/api-k
 3. **Conversation History**: Maintain context through a conversation with the AI for iterative refinements
 4. **Download Results**: Save your generated or edited images
 
-## Basic request 
+## Basic request
 
 For developers who want to call the Gemini API directly, you can use the Google Generative AI JavaScript SDK:
 
@@ -26,29 +24,30 @@ const fs = require("fs");
 const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);
 
 async function generateImage() {
-  const contents = "Hi, can you create a 3d rendered image of a pig " +
-                  "with wings and a top hat flying over a happy " +
-                  "futuristic scifi city with lots of greenery?";
+  const contents =
+    "Hi, can you create a 3d rendered image of a pig " +
+    "with wings and a top hat flying over a happy " +
+    "futuristic scifi city with lots of greenery?";
 
-  // Set responseModalities to include "Image" so the model can generate 
+  // Set responseModalities to include "Image" so the model can generate
   const model = genAI.getGenerativeModel({
     model: "gemini-2.0-flash-exp",
     generationConfig: {
-        responseModalities: ['Text', 'Image']
-    },
+      responseModalities: ["Text", "Image"]
+    }
   });
 
   try {
     const response = await model.generateContent(contents);
-    for (const part of  response.response.candidates[0].content.parts) {
+    for (const part of response.response.candidates[0].content.parts) {
       // Based on the part type, either show the text or save the image
       if (part.text) {
         console.log(part.text);
       } else if (part.inlineData) {
         const imageData = part.inlineData.data;
-        const buffer = Buffer.from(imageData, 'base64');
-        fs.writeFileSync('gemini-native-image.png', buffer);
-        console.log('Image saved as gemini-native-image.png');
+        const buffer = Buffer.from(imageData, "base64");
+        fs.writeFileSync("gemini-native-image.png", buffer);
+        console.log("Image saved as gemini-native-image.png");
       }
     }
   } catch (error) {
@@ -76,7 +75,7 @@ First, set up your environment variables:
 cp .env.example .env
 ```
 
-Add your Google AI Studio API key to the `.env` file: 
+Add your Google AI Studio API key to the `.env` file:
 
 _Get your `GEMINI_API_KEY` key [here](https://ai.google.dev/gemini-api/docs/api-key)._
 
@@ -93,7 +92,13 @@ npm run dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the application.
 
-### Docker Deployment
+## Deployment
+
+### Vercel
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fgoogle-gemini%2Fgemini-image-editing-nextjs-quickstart&env=GEMINI_API_KEY&envDescription=Create%20an%20account%20and%20generate%20an%20API%20key&envLink=https%3A%2F%2Faistudio.google.com%2Fapp%2Fu%2F0%2Fapikey&demo-url=https%3A%2F%2Fhuggingface.co%2Fspaces%2Fphilschmid%2Fimage-generation-editing)
+
+### Docker
 
 1. Build the Docker image:
 
@@ -120,7 +125,7 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 
 - [Next.js](https://nextjs.org/) - React framework for the web application
 - [Google Gemini 2.0 Flash](https://deepmind.google/technologies/gemini/) - AI model for image generation and editing
-- [shadcn/ui](https://ui.shadcn.com/) - Re-usable components built using Radix UI and Tailwind CSS 
+- [shadcn/ui](https://ui.shadcn.com/) - Re-usable components built using Radix UI and Tailwind CSS
 
 ## License
 

components/ImageUpload.tsx

@@ -4,7 +4,7 @@ import { useCallback, useState, useEffect } from "react";
 import { useDropzone } from "react-dropzone";
 import { Button } from "./ui/button";
 import { Upload as UploadIcon, Image as ImageIcon, X } from "lucide-react";
-import Image from "next/image";
+
 interface ImageUploadProps {
   onImageSelect: (imageData: string) => void;
   currentImage: string | null;
@@ -58,10 +58,10 @@ export function ImageUpload({ onImageSelect, currentImage }: ImageUploadProps) {
     onDrop,
     accept: {
       "image/png": [".png"],
-      "image/jpeg": [".jpg", ".jpeg"],
+      "image/jpeg": [".jpg", ".jpeg"]
     },
     maxSize: 10 * 1024 * 1024, // 10MB
-    multiple: false,
+    multiple: false
   });
 
   const handleRemove = () => {

package-lock.json

@@ -17,7 +17,7 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "lucide-react": "^0.475.0",
-        "next": "15.1.0",
+        "next": "^15.2.2",
         "next-themes": "^0.4.4",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",