利用cursor/Trae学gemini-image-editing-nextjs-quickstart项目

# Gemini 图像编辑应用

这是一个基于 Next.js 和 Google Gemini API 的图像编辑应用，支持图像生成和编辑功能。

## 项目结构

### 根目录配置文件

– `next.config.ts` – Next.js 配置文件

– `tailwind.config.ts` – Tailwind CSS 配置文件，定义了主题颜色、边框圆角等样式

– `postcss.config.mjs` – PostCSS 配置文件，用于处理 CSS

– `tsconfig.json` – TypeScript 配置文件

– `components.json` – shadcn/ui 组件库配置文件

– `.env.example` – 环境变量示例文件

### app 目录 (Next.js App Router)

– `app/layout.tsx` – 应用的根布局组件

– `app/page.tsx` – 应用的首页组件

– `app/globals.css` – 全局样式文件，包含 Tailwind CSS 的基础样式和自定义 CSS 变量

– `app/api/image/` – 图像处理相关的 API 路由

### components 目录

– `ImagePromptInput.tsx` – 图像提示输入组件

– `ImageResultDisplay.tsx` – 图像结果显示组件

– `ImageUpload.tsx` – 图像上传组件

– `providers.tsx` – 应用的 Provider 组件

#### UI 组件 (基于 shadcn/ui)

– `ui/button.tsx` – 按钮组件

– `ui/card.tsx` – 卡片组件

– `ui/input.tsx` – 输入框组件

– `ui/popover.tsx` – 弹出框组件

– `ui/sheet.tsx` – 抽屉组件

– `ui/textarea.tsx` – 文本域组件

### lib 目录

– `types.ts` – TypeScript 类型定义文件

– `utils.ts` – 工具函数文件

### public 目录

– `file.svg` – 文件图标

– `globe.svg` – 地球图标

– `next.svg` – Next.js 图标

– `vercel.svg` – Vercel 图标

– `window.svg` – 窗口图标

**工作原理：**

1. **创建图像**：使用 Gemini 2.0 Flash 从文本提示生成图像

2. **编辑图像**：上传图像并提供修改指令

3. **对话历史**：通过与 AI 的对话维持上下文，实现迭代优化

4. **下载结果**：保存生成或编辑的图像

## 基本请求

对于想要直接调用 Gemini API 的开发者，可以使用 Google Generative AI JavaScript SDK：

“`javascript

const { GoogleGenerativeAI } = require(“@google/generative-ai”);

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?”;

  // 设置 responseModalities 包含 “Image” 以使模型能够生成图像

  const model = genAI.getGenerativeModel({

    model: “gemini-2.0-flash-exp”,

    generationConfig: {

      responseModalities: [“Text”, “Image”]

    }

  });

  try {

    const response = await model.generateContent(contents);

    for (const part of response.response.candidates[0].content.parts) {

      // 根据部分类型，显示文本或保存图像

      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(“图像已保存为 gemini-native-image.png”);

      }

    }

  } catch (error) {

    console.error(“生成内容时出错：”, error);

  }

}

“`

## 功能特性

– 🎨 使用 Gemini 2.0 Flash 进行文本到图像的生成

– 🖌️ 通过自然语言指令进行图像编辑

– 💬 对话历史功能，支持上下文感知的图像优化

– 📱 使用 Next.js 和 shadcn/ui 构建的响应式 UI

– 🔄 创建和编辑模式之间的无缝工作流

– ⚡ 使用 Gemini 2.0 Flash Javascript SDK