新增全局错误toast提示；

2025-09-14 02:54:08 +08:00
parent 9f94e92eaf
commit 46e07cc5ac
7 changed files with 368 additions and 172 deletions
--- a/README.md
+++ b/README.md
@@ -1,226 +1,226 @@
-# 🍌 Nano Banana AI Image Editor 
-Release Version: (v1.0)
+# 🍌 Nano Banana AI 图像编辑器
+发布版本: (v1.0)

-### **⏬ Get Your 1-Click Install Copy!** 
-Join the [Vibe Coding is Life Skool Community](https://www.skool.com/vibe-coding-is-life/about?ref=456537abaf37491cbcc6976f3c26af41) and get a **1-click ⚡Bolt.new installation clone**  of this app, plus access to live build sessions, exclusive project downloads, AI prompts, masterclasses, and the best vibe coding community on the web!
+### **⏬ 获取一键安装副本!** 
+加入 [Vibe Coding is Life Skool 社区](https://www.skool.com/vibe-coding-is-life/about?ref=456537abaf37491cbcc6976f3c26af41) 获取此应用的 **一键 ⚡Bolt.new 安装克隆**，以及现场构建会话、独家项目下载、AI 提示、大师课程和网络上最好的氛围编码社区的访问权限！

 ---

-**Professional AI Image Generation & Conversational Editing Platform**
+**专业的 AI 图像生成和对话式编辑平台**

-A production-ready React + TypeScript application for delightful image generation and conversational, region-aware revisions using Google's Gemini 2.5 Flash Image model. Built with modern web technologies and designed for both creators and developers.
+一个生产就绪的 React + TypeScript 应用程序，用于愉快的图像生成和使用 Google Gemini 2.5 Flash Image 模型进行对话式、区域感知的修改。采用现代网络技术构建，专为创作者和开发者设计。

-[![Nano Banana Image Editor](https://getsmartgpt.com/nano-banana-editor.jpg)](https://nanobananaeditor.dev)
+[![Nano Banana 图像编辑器](https://getsmartgpt.com/nano-banana-editor.jpg)](https://nanobananaeditor.dev)

-🍌 [Try the LIVE Demo](https://nanobananaeditor.dev)
+🍌 [试用在线演示](https://nanobananaeditor.dev)

-## ✨ Key Features
+## ✨ 主要功能

-### 🎨 **AI-Powered Creation**
- **Text-to-Image Generation** - Create stunning images from descriptive prompts
- **Live Quality Tips** - Real-time feedback to improve your prompts
- **Reference Image Support** - Use up to 2 reference images to guide generation
- **Advanced Controls** - Fine-tune creativity levels and use custom seeds
+### 🎨 **AI 驱动的创作**
+- **文本到图像生成** - 从描述性提示创建令人惊叹的图像
+- **实时质量提示** - 实时反馈以改进您的提示
+- **参考图像支持** - 使用最多 2 张参考图像指导生成
+- **高级控制** - 微调创意水平并使用自定义种子

-### ✏️ **Intelligent Editing**
- **Conversational Editing** - Modify images using natural language instructions
- **Region-Aware Selection** - Paint masks to target specific areas for editing
- **Style Reference Images** - Upload reference images to guide editing style
- **Non-Destructive Workflow** - All edits preserve the original image
+### ✏️ **智能编辑**
+- **对话式编辑** - 使用自然语言指令修改图像
+- **区域感知选择** - 绘制遮罩以针对特定区域进行编辑
+- **样式参考图像** - 上传参考图像以指导编辑样式
+- **非破坏性工作流** - 所有编辑都保留原始图像

-### 🖼️ **Professional Canvas**
- **Interactive Canvas** - Zoom, pan, and navigate large images smoothly
- **Brush Tools** - Variable brush sizes for precise mask painting
- **Mobile Optimized** - Responsive design that works beautifully on all devices
- **Keyboard Shortcuts** - Efficient workflow with hotkeys
+### 🖼️ **专业画布**
+- **交互式画布** - 平滑缩放、平移和导航大图像
+- **画笔工具** - 可变画笔尺寸以实现精确的遮罩绘制
+- **移动设备优化** - 响应式设计，在所有设备上都能完美运行
+- **键盘快捷键** - 使用热键提高工作效率

-### 📚 **Project Management**
- **Generation History** - Track all your creations and edits
- **Variant Comparison** - Generate and compare multiple versions side-by-side
- **Full Undo/Redo** - Complete generation tree with branching history
- **Asset Management** - Organized storage of all generated content
+### 📚 **项目管理**
+- **生成历史** - 跟踪所有创作和编辑
+- **变体比较** - 生成并并排比较多个版本
+- **完整撤销/重做** - 具有分支历史的完整生成树
+- **资产管理** - 有序存储所有生成的内容

-### 🔒 **Enterprise Features**
- **SynthID Watermarking** - Built-in AI provenance with invisible watermarks
- **Offline Caching** - IndexedDB storage for offline asset access
- **Type Safety** - Full TypeScript implementation with strict typing
- **Performance Optimized** - React Query for efficient state management
+### 🔒 **企业功能**
+- **SynthID 水印** - 内置 AI 来源追踪和隐形水印
+- **离线缓存** - IndexedDB 存储以实现离线资产访问
+- **类型安全** - 完整的 TypeScript 实现和严格类型检查
+- **性能优化** - React Query 实现高效状态管理

-## 🚀 Quick Start
+## 🚀 快速开始

-### Prerequisites
+### 先决条件
 - Node.js 18+ 
- A [Google AI Studio](https://aistudio.google.com/) API key
+- 一个 [Google AI Studio](https://aistudio.google.com/) API 密钥

-### Installation
+### 安装

-1. **Clone and install dependencies**:
+1. **克隆并安装依赖**:
   ```bash
   git clone <repository-url>
   cd nano-banana-image-editor
   npm install
   ```

-2. **Configure environment**:
+2. **配置环境**:
   ```bash
   cp .env.example .env
-   # Add your Gemini API key to VITE_GEMINI_API_KEY
+   # 将您的 Gemini API 密钥添加到 VITE_GEMINI_API_KEY
   ```

-3. **Start development server**:
+3. **启动开发服务器**:
   ```bash
   npm run dev
   ```

-4. **Open in browser**: Navigate to `http://localhost:5173`
+4. **在浏览器中打开**: 导航到 `http://localhost:5173`

-## 🎯 Usage Guide
+## 🎯 使用指南

-### Creating Images
-1. Select **Generate** mode
-2. Write a detailed prompt describing your desired image
-3. Optionally upload reference images (max 2)
-4. Adjust creativity settings if needed
-5. Click **Generate** or press `Cmd/Ctrl + Enter`
+### 创建图像
+1. 选择 **生成** 模式
+2. 编写详细提示描述您想要的图像
+3. 可选上传参考图像（最多 2 张）
+4. 如需要调整创意设置
+5. 点击 **生成** 或按 `Cmd/Ctrl + Enter`

-### Editing Images
-1. Switch to **Edit** mode
-2. Upload an image or use a previously generated one
-3. Optionally paint a mask to target specific areas
-4. Describe your desired changes in natural language
-5. Click **Apply Edit** to see the results
+### 编辑图像
+1. 切换到 **编辑** 模式
+2. 上传图像或使用先前生成的图像
+3. 可选绘制遮罩以针对特定区域
+4. 用自然语言描述您想要的更改
+5. 点击 **应用编辑** 查看结果

-### Advanced Workflows
- Use **Select** mode to paint precise masks for targeted edits
- Compare variants in the History panel
- Download high-quality PNG outputs
- Use keyboard shortcuts for efficient navigation
+### 高级工作流
+- 使用 **选择** 模式绘制精确遮罩以进行目标编辑
+- 在历史面板中比较变体
+- 下载高质量 PNG 输出
+- 使用键盘快捷键进行高效导航

-## ⌨️ Keyboard Shortcuts
+## ⌨️ 键盘快捷键

-| Shortcut | Action |
+| 快捷键 | 操作 |
 |----------|--------|
-| `Cmd/Ctrl + Enter` | Generate/Apply Edit |
-| `Shift + R` | Re-roll variants |
-| `E` | Switch to Edit mode |
-| `G` | Switch to Generate mode |
-| `M` | Switch to Select mode |
-| `H` | Toggle history panel |
-| `P` | Toggle prompt panel |
+| `Cmd/Ctrl + Enter` | 生成/应用编辑 |
+| `Shift + R` | 重新生成变体 |
+| `E` | 切换到编辑模式 |
+| `G` | 切换到生成模式 |
+| `M` | 切换到选择模式 |
+| `H` | 切换历史面板 |
+| `P` | 切换提示面板 |

-## 🏗️ Architecture
+## 🏗️ 架构

-### Tech Stack
- **Frontend**: React 18, TypeScript, Tailwind CSS
- **State Management**: Zustand for app state, React Query for server state  
- **Canvas**: Konva.js for interactive image display and mask overlays
- **AI Integration**: Google Generative AI SDK (Gemini 2.5 Flash Image)
- **Storage**: IndexedDB for offline asset caching
- **Build Tool**: Vite for fast development and optimized builds
+### 技术栈
+- **前端**: React 18, TypeScript, Tailwind CSS
+- **状态管理**: Zustand 用于应用状态, React Query 用于服务器状态  
+- **画布**: Konva.js 用于交互式图像显示和遮罩叠加
+- **AI 集成**: Google Generative AI SDK (Gemini 2.5 Flash Image)
+- **存储**: IndexedDB 用于离线资产缓存
+- **构建工具**: Vite 用于快速开发和优化构建

-### Project Structure
+### 项目结构
 ```
 src/
-├── components/          # React components
-│   ├── ui/             # Reusable UI components (Button, Input, etc.)
-│   ├── PromptComposer.tsx  # Prompt input and tool selection
-│   ├── ImageCanvas.tsx     # Interactive canvas with Konva
-│   ├── HistoryPanel.tsx    # Generation history and variants
-│   ├── Header.tsx          # App header and navigation
-│   └── InfoModal.tsx       # About modal with links
-├── services/           # External service integrations
-│   ├── geminiService.ts    # Gemini API client
-│   ├── cacheService.ts     # IndexedDB caching layer
-│   └── imageProcessing.ts  # Image manipulation utilities
-├── store/              # Zustand state management
-│   └── useAppStore.ts      # Global application state
-├── hooks/              # Custom React hooks
-│   ├── useImageGeneration.ts  # Generation and editing logic
-│   └── useKeyboardShortcuts.ts # Keyboard navigation
-├── utils/              # Utility functions
-│   ├── cn.ts              # Class name utility
-│   └── imageUtils.ts      # Image processing helpers
-└── types/              # TypeScript type definitions
-    └── index.ts           # Core type definitions
+├── components/          # React 组件
+│   ├── ui/             # 可重用的 UI 组件 (Button, Input, 等)
+│   ├── PromptComposer.tsx  # 提示输入和工具选择
+│   ├── ImageCanvas.tsx     # 使用 Konva 的交互式画布
+│   ├── HistoryPanel.tsx    # 生成历史和变体
+│   ├── Header.tsx          # 应用头部和导航
+│   └── InfoModal.tsx       # 关于模态框和链接
+├── services/           # 外部服务集成
+│   ├── geminiService.ts    # Gemini API 客户端
+│   ├── cacheService.ts     # IndexedDB 缓存层
+│   └── imageProcessing.ts  # 图像处理工具
+├── store/              # Zustand 状态管理
+│   └── useAppStore.ts      # 全局应用状态
+├── hooks/              # 自定义 React 钩子
+│   ├── useImageGeneration.ts  # 生成和编辑逻辑
+│   └── useKeyboardShortcuts.ts # 键盘导航
+├── utils/              # 工具函数
+│   ├── cn.ts              # 类名工具
+│   └── imageUtils.ts      # 图像处理助手
+└── types/              # TypeScript 类型定义
+    └── index.ts           # 核心类型定义
 ```

-## 🔧 Configuration
+## 🔧 配置

-### Environment Variables
+### 环境变量
 ```bash
 VITE_GEMINI_API_KEY=your_gemini_api_key_here
 ```

-### Model Configuration
- **Model**: `gemini-2.5-flash-image-preview`
- **Output Format**: 1024×1024 PNG with SynthID watermarks
- **Input Formats**: PNG, JPEG, WebP
- **Temperature Range**: 0-1 (0 = deterministic, 1 = creative)
+### 模型配置
+- **模型**: `gemini-2.5-flash-image-preview`
+- **输出格式**: 1024×1024 PNG 带 SynthID 水印
+- **输入格式**: PNG, JPEG, WebP
+- **温度范围**: 0-1 (0 = 确定性, 1 = 创意)

-## 🚀 Deployment
+## 🚀 部署

-### Development
+### 开发
 ```bash
-npm run dev      # Start development server
-npm run build    # Build for production
-npm run preview  # Preview production build
-npm run lint     # Run ESLint
+npm run dev      # 启动开发服务器
+npm run build    # 构建生产版本
+npm run preview  # 预览生产构建
+npm run lint     # 运行 ESLint
 ```

-### Production Considerations
- **API Security**: Implement backend proxy for API calls in production
- **Rate Limiting**: Add proper rate limiting and usage quotas
- **Authentication**: Consider user authentication for multi-user deployments
- **Storage**: Set up cloud storage for generated assets
- **Monitoring**: Add error tracking and analytics
+### 生产考虑
+- **API 安全**: 在生产环境中为 API 调用实现后端代理
+- **速率限制**: 添加适当的速率限制和使用配额
+- **身份验证**: 考虑为多用户部署添加用户身份验证
+- **存储**: 设置云存储以存储生成的资产
+- **监控**: 添加错误跟踪和分析

-## 📄 License & Copyright
+## 📄 许可证和版权

-**Copyright © 2025 [Mark Fulton](https://markfulton.com)**
+**版权所有 © 2025 [Mark Fulton](https://markfulton.com)**

-This project is licensed under the **GNU Affero General Public License v3.0** (AGPL-3.0).
+该项目根据 **GNU Affero 通用公共许可证 v3.0** (AGPL-3.0) 授权。

-### What this means:
- ✅ **Free to use** for personal and commercial projects
- ✅ **Modify and distribute** with proper attribution
- ⚠️ **Share modifications** - Any changes must be shared under the same license
- ⚠️ **Network use** - If you run this as a web service, you must provide source code
+### 这意味着：
+- ✅ **免费使用** 于个人和商业项目
+- ✅ **修改和分发** 需要适当署名
+- ⚠️ **分享修改** - 任何更改必须在相同许可证下共享
+- ⚠️ **网络使用** - 如果您将其作为网络服务运行，必须提供源代码

-See the [LICENSE](LICENSE) file for full details.
+有关完整详情，请参见 [LICENSE](LICENSE) 文件。

-## 🤝 Contributing
+## 🤝 贡献

-We welcome contributions! Please:
+我们欢迎贡献！请：

-1. **Follow the established patterns** - Keep components under 200 lines
-2. **Maintain type safety** - Use TypeScript strictly with proper definitions
-3. **Test thoroughly** - Ensure keyboard navigation and accessibility
-4. **Document changes** - Update README and add inline comments
-5. **Respect the license** - All contributions will be under AGPL-3.0
+1. **遵循既定模式** - 保持组件在 200 行以内
+2. **维护类型安全** - 严格使用 TypeScript 和正确定义
+3. **彻底测试** - 确保键盘导航和可访问性
+4. **记录更改** - 更新 README 并添加内联注释
+5. **遵守许可证** - 所有贡献都将遵循 AGPL-3.0

-## 🔗 Links & Resources
+## 🔗 链接和资源

- **Creator**: [Mark Fulton](https://markfulton.com)
- **AI Training Program**: [Reinventing.AI](https://www.reinventing.ai/)
- **Community**: [Vibe Coding is Life Skool](https://www.skool.com/vibe-coding-is-life/about?ref=456537abaf37491cbcc6976f3c26af41)
- **Google AI Studio**: [Get your API key](https://aistudio.google.com/)
- **Gemini API Docs**: [Official Documentation](https://ai.google.dev/gemini-api/docs)
+- **创建者**: [Mark Fulton](https://markfulton.com)
+- **AI 培训计划**: [Reinventing.AI](https://www.reinventing.ai/)
+- **社区**: [Vibe Coding is Life Skool](https://www.skool.com/vibe-coding-is-life/about?ref=456537abaf37491cbcc6976f3c26af41)
+- **Google AI Studio**: [获取您的 API 密钥](https://aistudio.google.com/)
+- **Gemini API 文档**: [官方文档](https://ai.google.dev/gemini-api/docs)

-## 🐛 Known Issues & Limitations
+## 🐛 已知问题和限制

- **Client-side API calls** - Currently uses direct API calls (implement backend proxy for production)
- **Browser compatibility** - Requires modern browsers with Canvas and WebGL support
- **Rate limits** - Subject to Google AI Studio rate limits
- **Image size** - Optimized for 1024×1024 outputs (Gemini model output dimensions may vary)
+- **客户端 API 调用** - 目前使用直接 API 调用（在生产环境中实现后端代理）
+- **浏览器兼容性** - 需要支持 Canvas 和 WebGL 的现代浏览器
+- **速率限制** - 受 Google AI Studio 速率限制约束
+- **图像尺寸** - 针对 1024×1024 输出进行了优化（Gemini 模型输出尺寸可能有所不同）

-## 🎯 Suggested Updates
+## 🎯 建议更新

- [ ] Backend API proxy implementation
- [ ] User authentication and project sharing
- [ ] Advanced brush tools and selection methods
- [ ] Plugin system for custom filters
- [ ] Integration with cloud storage providers
+- [ ] 后端 API 代理实现
+- [ ] 用户身份验证和项目共享
+- [ ] 高级画笔工具和选择方法
+- [ ] 自定义过滤器的插件系统
+- [ ] 与云存储提供商集成

 ---

-**Built by [Mark Fulton](https://markfulton.com)** | **Powered by Gemini 2.5 Flash Image** | **Made with Bolt.new**
+**由 [Mark Fulton](https://markfulton.com) 构建** | **由 Gemini 2.5 Flash Image 提供支持** | **使用 Bolt.new 制作**
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,6 +7,7 @@ import { ImageCanvas } from './components/ImageCanvas';
 import { HistoryPanel } from './components/HistoryPanel';
 import { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts';
 import { useAppStore } from './store/useAppStore';
+import { ToastProvider } from './components/ToastContext';

 const queryClient = new QueryClient({
  defaultOptions: {
@@ -59,7 +60,9 @@ function AppContent() {
 function App() {
  return (
    <QueryClientProvider client={queryClient}>
-      <AppContent />
+      <ToastProvider>
+        <AppContent />
+      </ToastProvider>
    </QueryClientProvider>
  );
 }
--- a/src/components/Toast.tsx
+++ b/src/components/Toast.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { cn } from '../utils/cn';
+import { X } from 'lucide-react';
+
+export interface ToastProps {
+  id: string;
+  message: string;
+  type: 'success' | 'error' | 'warning' | 'info';
+  onClose: (id: string) => void;
+}
+
+export const Toast: React.FC<ToastProps> = ({ id, message, type, onClose }) => {
+  const getTypeStyles = () => {
+    switch (type) {
+      case 'success':
+        return 'bg-green-500 text-white';
+      case 'error':
+        return 'bg-red-500 text-white';
+      case 'warning':
+        return 'bg-yellow-500 text-white';
+      case 'info':
+        return 'bg-blue-500 text-white';
+      default:
+        return 'bg-gray-500 text-white';
+    }
+  };
+
+  return (
+    <div 
+      className={cn(
+        'flex items-center justify-between p-4 rounded-lg shadow-lg min-w-[300px] max-w-md transition-all duration-300 transform',
+        getTypeStyles(),
+        'animate-in slide-in-from-top-full duration-300'
+      )}
+    >
+      <span className="text-sm font-medium">{message}</span>
+      <button 
+        onClick={() => onClose(id)}
+        className="ml-4 hover:bg-black/10 rounded-full p-1 transition-colors"
+      >
+        <X className="h-4 w-4" />
+      </button>
+    </div>
+  );
+};
--- a/src/components/ToastContext.tsx
+++ b/src/components/ToastContext.tsx
@@ -0,0 +1,87 @@
+import React, { createContext, useContext, useReducer, useState, useEffect } from 'react';
+import { Toast } from './Toast';
+
+type ToastType = 'success' | 'error' | 'warning' | 'info';
+
+export interface ToastMessage {
+  id: string;
+  message: string;
+  type: ToastType;
+  duration?: number;
+}
+
+export interface ToastContextType {
+  addToast: (message: string, type: ToastType, duration?: number) => void;
+  removeToast: (id: string) => void;
+}
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+type ToastAction = 
+  | { type: 'ADD_TOAST'; payload: ToastMessage }
+  | { type: 'REMOVE_TOAST'; payload: string };
+
+const toastReducer = (state: ToastMessage[], action: ToastAction): ToastMessage[] => {
+  switch (action.type) {
+    case 'ADD_TOAST':
+      return [...state, action.payload];
+    case 'REMOVE_TOAST':
+      return state.filter(toast => toast.id !== action.payload);
+    default:
+      return state;
+  }
+};
+
+export const ToastProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [toasts, dispatch] = useReducer(toastReducer, []);
+
+  const addToast = (message: string, type: ToastType, duration: number = 5000) => {
+    const id = Date.now().toString();
+    dispatch({ type: 'ADD_TOAST', payload: { id, message, type, duration } });
+  };
+
+  const removeToast = (id: string) => {
+    dispatch({ type: 'REMOVE_TOAST', payload: id });
+  };
+
+  // Auto remove toasts after duration
+  useEffect(() => {
+    const timers = toasts.map(toast => {
+      if (toast.duration === 0) return; // 0 means persistent
+      return setTimeout(() => {
+        removeToast(toast.id);
+      }, toast.duration);
+    });
+
+    return () => {
+      timers.forEach(timer => {
+        if (timer) clearTimeout(timer);
+      });
+    };
+  }, [toasts]);
+
+  return (
+    <ToastContext.Provider value={{ addToast, removeToast }}>
+      {children}
+      <div className="fixed top-4 right-4 z-50 space-y-2">
+        {toasts.map(toast => (
+          <Toast
+            key={toast.id}
+            id={toast.id}
+            message={toast.message}
+            type={toast.type}
+            onClose={removeToast}
+          />
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+};
+
+export const useToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
+};
--- a/src/hooks/useImageGeneration.ts
+++ b/src/hooks/useImageGeneration.ts
@@ -3,9 +3,11 @@ import { geminiService, GenerationRequest, EditRequest } from '../services/gemin
 import { useAppStore } from '../store/useAppStore';
 import { generateId } from '../utils/imageUtils';
 import { Generation, Edit, Asset } from '../types';
+import { useToast } from '../components/ToastContext';

 export const useImageGeneration = () => {
  const { addGeneration, setIsGenerating, setCanvasImage, setCurrentProject, currentProject } = useAppStore();
+  const { addToast } = useToast();

  const generateMutation = useMutation({
    mutationFn: async (request: GenerationRequest) => {
@@ -35,15 +37,7 @@ export const useImageGeneration = () => {
            seed: request.seed,
            temperature: request.temperature
          },
-          sourceAssets: request.referenceImage ? [{
-            id: generateId(),
-            type: 'original',
-            url: `data:image/png;base64,${request.referenceImages[0]}`,
-            mime: 'image/png',
-            width: 1024,
-            height: 1024,
-            checksum: request.referenceImages[0].slice(0, 32)
-          }] : request.referenceImages ? request.referenceImages.map((img, index) => ({
+          sourceAssets: request.referenceImages ? request.referenceImages.map((img, index) => ({
            id: generateId(),
            type: 'original' as const,
            url: `data:image/png;base64,${img}`,
@@ -77,6 +71,7 @@ export const useImageGeneration = () => {
    },
    onError: (error) => {
      console.error('生成失败:', error);
+      addToast('图像生成失败，请重试', 'error');
      setIsGenerating(false);
    }
  });
@@ -99,9 +94,12 @@ export const useImageEditing = () => {
    selectedGenerationId,
    currentProject,
    seed,
-    temperature 
+    temperature,
+    uploadedImages
  } = useAppStore();
  
+  const { addToast } = useToast();
+
  const editMutation = useMutation({
    mutationFn: async (instruction: string) => {
      // 如果可用，始终使用画布图像作为主要目标，否则使用第一张上传的图像
@@ -174,12 +172,12 @@ export const useImageEditing = () => {
        // 绘制带透明度的遮罩叠加
        maskedCtx.globalCompositeOperation = 'source-over';
        maskedCtx.globalAlpha = 0.4;
-       maskedCtx.fillStyle = '#A855F7';
+        maskedCtx.fillStyle = '#A855F7';
        
        brushStrokes.forEach(stroke => {
          if (stroke.points.length >= 4) {
            maskedCtx.lineWidth = stroke.brushSize;
-           maskedCtx.strokeStyle = '#A855F7';
+            maskedCtx.strokeStyle = '#A855F7';
            maskedCtx.lineCap = 'round';
            maskedCtx.lineJoin = 'round';
            maskedCtx.beginPath();
@@ -262,6 +260,7 @@ export const useImageEditing = () => {
    },
    onError: (error) => {
      console.error('编辑失败:', error);
+      addToast('图像编辑失败，请重试', 'error');
      setIsGenerating(false);
    }
  });
--- a/src/index.css
+++ b/src/index.css
@@ -3,6 +3,27 @@
@tailwind components;
@tailwind utilities;

+/* Toast animations */
+@keyframes slide-in-from-top-full {
+  0% {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.animate-in {
+  animation-duration: 300ms;
+  animation-fill-mode: both;
+}
+
+.slide-in-from-top-full {
+  animation-name: slide-in-from-top-full;
+}
+
 * {
  box-sizing: border-box;
 }
--- a/src/services/geminiService.ts
+++ b/src/services/geminiService.ts
@@ -47,17 +47,32 @@ export class GeminiService {
        contents,
      });

+      // 检查是否有被禁止的内容
+      if (response.candidates && response.candidates.length > 0) {
+        const candidate = response.candidates[0];
+        if (candidate.finishReason === 'PROHIBITED_CONTENT') {
+          throw new Error('内容被禁止：您的请求包含不允许的内容。请尝试其他提示。');
+        }
+      }
+
      const images: string[] = [];

-      for (const part of response.candidates[0].content.parts) {
-        if (part.inlineData) {
-          images.push(part.inlineData.data);
+      // 检查响应是否存在以及是否有内容
+      if (response.candidates && response.candidates.length > 0 && 
+          response.candidates[0].content && response.candidates[0].content.parts) {
+        for (const part of response.candidates[0].content.parts) {
+          if (part.inlineData) {
+            images.push(part.inlineData.data);
+          }
        }
      }

      return images;
    } catch (error) {
      console.error('生成图像时出错:', error);
+      if (error instanceof Error && error.message) {
+        throw error;
+      }
      throw new Error('生成图像失败。请重试。');
    }
  }
@@ -100,17 +115,32 @@ export class GeminiService {
        contents,
      });

+      // 检查是否有被禁止的内容
+      if (response.candidates && response.candidates.length > 0) {
+        const candidate = response.candidates[0];
+        if (candidate.finishReason === 'PROHIBITED_CONTENT') {
+          throw new Error('内容被禁止：您的请求包含不允许的内容。请尝试其他提示。');
+        }
+      }
+
      const images: string[] = [];

-      for (const part of response.candidates[0].content.parts) {
-        if (part.inlineData) {
-          images.push(part.inlineData.data);
+      // 检查响应是否存在以及是否有内容
+      if (response.candidates && response.candidates.length > 0 && 
+          response.candidates[0].content && response.candidates[0].content.parts) {
+        for (const part of response.candidates[0].content.parts) {
+          if (part.inlineData) {
+            images.push(part.inlineData.data);
+          }
        }
      }

      return images;
    } catch (error) {
      console.error('编辑图像时出错:', error);
+      if (error instanceof Error && error.message) {
+        throw error;
+      }
      throw new Error('编辑图像失败。请重试。');
    }
  }
@@ -145,10 +175,21 @@ export class GeminiService {
        contents: prompt,
      });

+      // 检查是否有被禁止的内容
+      if (response.candidates && response.candidates.length > 0) {
+        const candidate = response.candidates[0];
+        if (candidate.finishReason === 'PROHIBITED_CONTENT') {
+          throw new Error('内容被禁止：您的请求包含不允许的内容。请尝试其他提示。');
+        }
+      }
+
      const responseText = response.candidates[0].content.parts[0].text;
      return JSON.parse(responseText);
    } catch (error) {
      console.error('分割图像时出错:', error);
+      if (error instanceof Error && error.message) {
+        throw error;
+      }
      throw new Error('分割图像失败。请重试。');
    }
  }