ByteNoteByteNote
字

字节笔记本

2026年2月23日

Gemini Co-Drawing - 基于 Gemini 2.0 的 AI 协作绘图工具

#开源工具

Gemini Co-Drawing 是一个基于 Google Gemini 2.0 API 的协作绘图应用，允许用户在画布上创作草图，并通过文本提示让 Gemini AI 增强或添加内容。该项目部署在 Hugging Face Spaces 上，获得了 465 个点赞，是一个功能完整的开源 AI 绘图工具。

项目简介

Gemini Co-Drawing 由开发者 Trudy 创建，是一个创新的 AI 协作绘图应用。用户可以在交互式画布上自由绘制，然后通过文本提示指导 Gemini 2.0 模型生成图像或添加元素。这种"人机协作"的绘图模式为创意表达提供了全新的可能性。

核心特性

  • 交互式画布：支持自由手绘，提供流畅的绘图体验
  • 颜色选择器：可自定义画笔颜色，满足多样化创作需求
  • 文本提示接口：通过自然语言描述指导 AI 生成内容
  • 实时图像生成：基于 Gemini 2.0 API 实现快速图像生成
  • 自定义 API 密钥：支持用户输入自己的 Gemini API 密钥
  • 响应式设计：适配桌面和移动设备，支持触摸操作

技术栈

该项目采用现代前端技术栈构建：

  • Next.js：React 框架，用于前端和 API 路由
  • React Hooks：使用 useState、useRef、useEffect 管理状态
  • Tailwind CSS：实用优先的 CSS 框架
  • Canvas API：实现绘图功能的核心技术
  • Google Gemini 2.0 API：图像生成能力
  • Lucide React：图标库
  • Docker：容器化部署

项目结构

text
pages/
├── api/           # API 路由
├── _app.js        # 应用入口
├── _document.js   # 文档组件
└── index.js       # 主页面（15KB，核心逻辑）

核心实现原理

画布绘图功能

应用使用 HTML5 Canvas API 实现绘图功能，核心逻辑包括：

javascript
// 初始化画布（白色背景）
const initializeCanvas = () => {
  const canvas = canvasRef.current;
  const ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FFFFFF";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
};

// 处理绘图事件
const startDrawing = (e) => {
  const { x, y } = getCoordinates(e);
  ctx.beginPath();
  ctx.moveTo(x, y);
  setIsDrawing(true);
};

const draw = (e) => {
  if (!isDrawing) return;
  const { x, y } = getCoordinates(e);
  ctx.lineWidth = 5;
  ctx.lineCap = "round";
  ctx.strokeStyle = penColor;
  ctx.lineTo(x, y);
  ctx.stroke();
};

坐标转换处理

为了处理画布显示尺寸与内部尺寸的缩放差异，应用实现了坐标转换：

javascript
const getCoordinates = (e) => {
  const canvas = canvasRef.current;
  const rect = canvas.getBoundingClientRect();
  const scaleX = canvas.width / rect.width;
  const scaleY = canvas.height / rect.height;

  return {
    x: (e.nativeEvent.offsetX || (e.nativeEvent.touches?.[0]?.clientX - rect.left)) * scaleX,
    y: (e.nativeEvent.offsetY || (e.nativeEvent.touches?.[0]?.clientY - rect.top)) * scaleY
  };
};

AI 图像生成流程

  1. 用户绘制草图并输入文本提示
  2. 将画布内容转换为 base64 编码的 PNG 图像
  3. 创建临时画布添加白色背景
  4. 发送请求到 /api/generate 端点
  5. Gemini 2.0 根据草图和提示生成图像
  6. 返回的图像作为背景加载到画布上
javascript
const handleSubmit = async (e) => {
  e.preventDefault();
  setIsLoading(true);

  // 创建临时画布处理背景
  const tempCanvas = document.createElement('canvas');
  tempCanvas.width = canvas.width;
  tempCanvas.height = canvas.height;
  const tempCtx = tempCanvas.getContext('2d');

  // 填充白色背景并绘制原画布内容
  tempCtx.fillStyle = '#FFFFFF';
  tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
  tempCtx.drawImage(canvas, 0, 0);

  const drawingData = tempCanvas.toDataURL("image/png").split(",")[1];

  const response = await fetch("/api/generate", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ prompt, drawingData, customApiKey })
  });

  const data = await response.json();
  setGeneratedImage(data.imageData);
};

使用方式

在线体验

直接访问 Hugging Face Spaces 部署地址： https://huggingface.co/spaces/Trudy/gemini-codrawing

本地部署

  1. 克隆仓库
bash
git clone https://huggingface.co/spaces/Trudy/gemini-codrawing
  1. 安装依赖
bash
npm install
  1. 配置环境变量
bash
# 创建 .env.local 文件
GEMINI_API_KEY=your_api_key_here
  1. 启动开发服务器
bash
npm run dev
  1. 使用 Docker 部署
bash
docker-compose up -d

应用场景

  • 快速原型设计：快速绘制 UI 草图并生成高保真设计图
  • 创意绘画辅助：手绘草图后让 AI 完善细节
  • 教育演示：展示 AI 图像生成技术的实际应用
  • 团队协作：多人协作绘图和 AI 增强创作流程

项目链接

许可证

Apache-2.0 License

开源工具
上一篇

Tremor - 基于 Tailwind CSS 的 React 组件库

下一篇

Gemini Co-Drawing - 基于 Gemini 2.0 的 AI 协作绘图工具

分享: