software

使用 Nano Bana、React 和 Hono 构建具备风格感知的 AI 图像生成器

发布: (2025年12月17日 GMT+8 08:38)
5 min read
原文: Dev.to

Source: Dev.to

Magic.rb

项目截图

概览

出于对新 Google Gemini 模型极限的纯粹好奇，我构建了 Amaris——一个全栈 SaaS 应用，允许你通过简单的聊天界面使用特定艺术风格生成图像。无需复杂的工作流，只需上传参考图像，输入提示词，让 AI 完成繁重的工作！

  • 技术栈： “Better‑T‑Stack”（Bun、Hono、React 19）
  • AI： 通过 Vercel AI Gateway 使用 Google Gemini 2.5 Flash 图像模型

如果你对构建现代 AI 应用、了解 monorepo，或只是想看看 Hono 如何处理 AI 流感兴趣，这个项目是一个很好的沙盒。

演示视频：
https://x.com/devguy_007/status/1997485877325394061?s=20

代码仓库：
🔗

✨ 功能

  • 💬 Chat‑Based Interface – 以对话式流程生成图像。
  • 🎨 Style Transfer – 上传参考图像（草图、绘画等），AI 会模仿该风格。
  • ⚡ Blazing Fast Backend – 由 Hono 提供支持，运行在 Bun 上。
  • 🧠 Smart Vision – 使用 Gemini 在生成前“识别”你的风格参考。
  • 🔐 Full Auth System – 使用 Better‑Auth 的安全登录。
  • 💳 Credit System – 内置逻辑用于管理用户积分和使用限制。
  • 🌑 Modern UI – 暗色模式、Tailwind CSS 4 与 shadcn/ui 组件。

🧰 完整技术栈

核心与运行时

TechDescription
Bun超高速 JavaScript 运行时 & 包管理器
TypeScript整个 monorepo 的类型安全

前端 (apps/web)

TechDescription
React 19最新版本的库
React Router 7声明式、基于文件的路由
Tailwind CSS 4实用优先的 CSS 引擎
shadcn/ui可访问的 UI 组件
TanStack Query异步状态管理与缓存
TanStack Form复杂表单处理
Lucide React一致的图标集
SonnerToast 通知

后端 (apps/server)

TechDescription
Hono轻量级、符合标准的 Web 框架
ZodAPI 请求的模式验证
Hono/Zod‑Validator用于验证传入数据的中间件

数据与认证

TechDescription
PostgreSQL关系型数据库
Drizzle ORMTypeScript 优先的 ORM，提供类型安全的 SQL
Better‑Auth全面的认证（邮箱/密码、会话）

AI 与服务

TechDescription
Google Gemini2.5 Flash Image（生成）& 2.5 Flash（视觉）
Vercel AI SDKAI 网关，用于缓存、限流、分析
Cloudinary存储与优化生成的图像
Polar.sh订阅与支付

🚀 本地快速开始

1️⃣ 克隆仓库

git clone https://github.com/oyeolamilekan/amaris-app
cd amaris

2️⃣ 安装依赖

我们使用 Bun 来提升速度：

bun install

3️⃣ 配置环境变量

创建以下 .env 文件（将占位符替换为你自己的值）。

apps/server/.env

DATABASE_URL=postgresql://user:pass@localhost:5432/amaris
GOOGLE_GENERATIVE_AI_API_KEY=your_gemini_key
CORS_ORIGIN=http://localhost:5173
CLOUDINARY_CLOUD_NAME=your_cloud_name
POLAR_ACCESS_TOKEN=your_polar_token

4️⃣ 推送数据库模式

bun run db:push

5️⃣ 启动开发服务器

bun run dev

在浏览器中打开即可开始生成！

🧪 工作原理

  1. 上传风格 – 将图像（例如像素艺术角色）拖入聊天。
  2. 视觉分析 – 后端使用 Gemini 的视觉能力来理解图像的“氛围”。
  3. 提示 – 输入类似 “一个未来城市”。
  4. 生成 – 应用将你的提示与风格参考相结合，并通过 Vercel AI Gateway 发送到 Google Gemini。
  5. 结果 – 几秒后，你会收到以所选风格渲染的未来城市。

💭 为什么我构建了它

我想超越简单的 “文本转图像” 脚本，打造一个可投入生产的架构。目标包括：

  • 探索 Hono 与 React 19 在 monorepo 中的配合方式。
  • 将支付流程（Polar.sh）与复杂的 AI 逻辑集成。
  • 利用 Gemini 2.5 的高速与低成本进行风格迁移实验。

🧑‍💻 试一试，分叉它，打破它！

该项目是开源的，旨在供大家进行二次开发。欢迎：

  • 克隆仓库。
  • 替换数据库或 AI 模型。
  • 将其改造成漫画生成器、表情包生成器等。

GitHub:
Amaris App

🙌 让我们保持联系

如果你尝试了项目或对技术栈有疑问，欢迎留言或标记我！

祝玩得开心！ 👨🏽‍💻✨

Back to Blog

相关文章

阅读更多 »