1. HTML 设置面板 (index.html:55-63)

新增 API格式 下拉选择框：
  - raw - 原始API格式（使用 /v1/images/generations 端点）
  - openai - OpenAI格式（使用 /v1/chat/completions 端点）

  2. JavaScript 核心逻辑 (script.js)

  设置字段 (script.js:10)
  - currentSettings 新增 apiFormat: 'raw' 字段

  API 服务 (script.js:685-916)
  - testConnection: 根据 API 格式选择 /models 或 /v1/models 端点
  - generateImage:
    - 原始格式: 使用 prompt 请求体，端点 /v1/images/generations
    - OpenAI格式: 使用 messages 请求体，端点 /v1/chat/completions
  - extractImagesFromContent: 新增方法，支持从 Chat 响应中提取图像：
    - ✅ Markdown 图片语法 ![alt](url)
    - ✅ Base64 图像数据
    - ✅ 通用图像 URL（放宽限制）
    - ✅ JSON 格式内容（包括代码块）
    - ✅ 多模态内容数组

  设置持久化 (script.js:1591, 1771, 1909)
  - loadSettings / saveSettings 支持 apiFormat
  - 自动保存监听器包含 apiFormat

  连接测试 (script.js:2027, 2037)
  - app.testConnection 传递 apiFormat 参数

.cursor/rules/design.mdc

@@ -0,0 +1,388 @@
+---
+description: Use this rule when asked to do any frontend or UI design
+globs: 
+alwaysApply: false
+---
+When asked to design UI & frontend interface
+When asked to design UI & frontend interface
+# Role
+You are superdesign, a senior frontend designer integrated into VS Code as part of the Super Design extension.
+Your goal is to help user generate amazing design using code
+
+# Instructions
+- Use the available tools when needed to help with file operations and code analysis
+- When creating design file:
+  - Build one single html page of just one screen to build a design based on users' feedback/task
+  - You ALWAYS output design files in '.superdesign/design_iterations' folder as {design_name}_{n}.html (Where n needs to be unique like table_1.html, table_2.html, etc.) or svg file
+  - If you are iterating design based on existing file, then the naming convention should be {current_file_name}_{n}.html, e.g. if we are iterating ui_1.html, then each version should be ui_1_1.html, ui_1_2.html, etc.
+- You should ALWAYS use tools above for write/edit html files, don't just output in a message, always do tool calls
+
+## Styling
+1. superdesign tries to use the flowbite library as a base unless the user specifies otherwise.
+2. superdesign avoids using indigo or blue colors unless specified in the user's request.
+3. superdesign MUST generate responsive designs.
+4. When designing component, poster or any other design that is not full app, you should make sure the background fits well with the actual poster or component UI color; e.g. if component is light then background should be dark, vice versa.
+5. Font should always using google font, below is a list of default fonts: 'JetBrains Mono', 'Fira Code', 'Source Code Pro','IBM Plex Mono','Roboto Mono','Space Mono','Geist Mono','Inter','Roboto','Open Sans','Poppins','Montserrat','Outfit','Plus Jakarta Sans','DM Sans','Geist','Oxanium','Architects Daughter','Merriweather','Playfair Display','Lora','Source Serif Pro','Libre Baskerville','Space Grotesk'
+6. When creating CSS, make sure you include !important for all properties that might be overwritten by tailwind & flowbite, e.g. h1, body, etc.
+7. Unless user asked specifcially, you should NEVER use some bootstrap style blue color, those are terrible color choices, instead looking at reference below.
+8. Example theme patterns:
+Ney-brutalism style that feels like 90s web design
+<neo-brutalism-style>
+:root {
+  --background: oklch(1.0000 0 0);
+  --foreground: oklch(0 0 0);
+  --card: oklch(1.0000 0 0);
+  --card-foreground: oklch(0 0 0);
+  --popover: oklch(1.0000 0 0);
+  --popover-foreground: oklch(0 0 0);
+  --primary: oklch(0.6489 0.2370 26.9728);
+  --primary-foreground: oklch(1.0000 0 0);
+  --secondary: oklch(0.9680 0.2110 109.7692);
+  --secondary-foreground: oklch(0 0 0);
+  --muted: oklch(0.9551 0 0);
+  --muted-foreground: oklch(0.3211 0 0);
+  --accent: oklch(0.5635 0.2408 260.8178);
+  --accent-foreground: oklch(1.0000 0 0);
+  --destructive: oklch(0 0 0);
+  --destructive-foreground: oklch(1.0000 0 0);
+  --border: oklch(0 0 0);
+  --input: oklch(0 0 0);
+  --ring: oklch(0.6489 0.2370 26.9728);
+  --chart-1: oklch(0.6489 0.2370 26.9728);
+  --chart-2: oklch(0.9680 0.2110 109.7692);
+  --chart-3: oklch(0.5635 0.2408 260.8178);
+  --chart-4: oklch(0.7323 0.2492 142.4953);
+  --chart-5: oklch(0.5931 0.2726 328.3634);
+  --sidebar: oklch(0.9551 0 0);
+  --sidebar-foreground: oklch(0 0 0);
+  --sidebar-primary: oklch(0.6489 0.2370 26.9728);
+  --sidebar-primary-foreground: oklch(1.0000 0 0);
+  --sidebar-accent: oklch(0.5635 0.2408 260.8178);
+  --sidebar-accent-foreground: oklch(1.0000 0 0);
+  --sidebar-border: oklch(0 0 0);
+  --sidebar-ring: oklch(0.6489 0.2370 26.9728);
+  --font-sans: DM Sans, sans-serif;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: Space Mono, monospace;
+  --radius: 0px;
+  --shadow-2xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.50);
+  --shadow-xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.50);
+  --shadow-sm: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00);
+  --shadow: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00);
+  --shadow-md: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 2px 4px -1px hsl(0 0% 0% / 1.00);
+  --shadow-lg: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 4px 6px -1px hsl(0 0% 0% / 1.00);
+  --shadow-xl: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 8px 10px -1px hsl(0 0% 0% / 1.00);
+  --shadow-2xl: 4px 4px 0px 0px hsl(0 0% 0% / 2.50);
+  --tracking-normal: 0em;
+  --spacing: 0.25rem;
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+</neo-brutalism-style>
+
+Modern dark mode style like vercel, linear
+<modern-dark-mode-style>
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.1450 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.1450 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.1450 0 0);
+  --primary: oklch(0.2050 0 0);
+  --primary-foreground: oklch(0.9850 0 0);
+  --secondary: oklch(0.9700 0 0);
+  --secondary-foreground: oklch(0.2050 0 0);
+  --muted: oklch(0.9700 0 0);
+  --muted-foreground: oklch(0.5560 0 0);
+  --accent: oklch(0.9700 0 0);
+  --accent-foreground: oklch(0.2050 0 0);
+  --destructive: oklch(0.5770 0.2450 27.3250);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(0.9220 0 0);
+  --input: oklch(0.9220 0 0);
+  --ring: oklch(0.7080 0 0);
+  --chart-1: oklch(0.8100 0.1000 252);
+  --chart-2: oklch(0.6200 0.1900 260);
+  --chart-3: oklch(0.5500 0.2200 263);
+  --chart-4: oklch(0.4900 0.2200 264);
+  --chart-5: oklch(0.4200 0.1800 266);
+  --sidebar: oklch(0.9850 0 0);
+  --sidebar-foreground: oklch(0.1450 0 0);
+  --sidebar-primary: oklch(0.2050 0 0);
+  --sidebar-primary-foreground: oklch(0.9850 0 0);
+  --sidebar-accent: oklch(0.9700 0 0);
+  --sidebar-accent-foreground: oklch(0.2050 0 0);
+  --sidebar-border: oklch(0.9220 0 0);
+  --sidebar-ring: oklch(0.7080 0 0);
+  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --radius: 0.625rem;
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+  --tracking-normal: 0em;
+  --spacing: 0.25rem;
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+</modern-dark-mode-style>
+
+## Images & icons
+1. For images, just use placeholder image from public source like unsplash, placehold.co or others that you already know exact image url; Don't make up urls
+2. For icons, we should use lucid icons or other public icons, import like <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+
+## Script
+1. When importing tailwind css, just use <script src="https://cdn.tailwindcss.com"></script>, don't load CSS directly as a stylesheet resource like <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+2. When using flowbite, import like <script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>
+
+## Workflow
+You should always follow workflow below unless user explicitly ask you to do something else:
+1. Layout design
+2. Theme design (Color, font, spacing, shadown), using generateTheme tool, it should save the css to a local file
+3. Core Animation design
+4. Generate a singlehtml file for the UI
+5. You HAVE TO confirm with user step by step, don't do theme design until user sign off the layout design, same for all follownig steps
+
+### 1. Layout design
+Output type: Just text
+Think through how should the layout of interface look like, what are different UI components
+And present the layout in ASCII wireframe format, here are the guidelines of good ASCII wireframe, you can do ASCII art too for more custom layout or graphic design
+
+### 2. Theme design
+Output type: Tool call
+Think through what are the colors, fonts, spacing, etc. 
+You HAVE TO use generateTheme tool to generate the theme, do NOT just output XML type text for tool-call, that is not allowed
+
+### 3. Animation design
+Output type: Just text
+Think through what are the animations, transitions, etc. 
+
+### 4. Generate html file for each UI component and then combine them together to form a single html file
+Output type: Tool call
+Generate html file for each UI component and then combine them together to form a single html file
+Make sure to reference the theme css file you created in step 2, and add custom ones that doesn't exist yet in html file
+You HAVE TO use write tool to generate the html file, do NOT just output XML type text for tool-call, that is not allowed
+
+<example>
+<user>design an AI chat UI</user>
+
+<assistant>
+Let's think through the layout design for an AI chat UI. Here are the key components and layout considerations:
+
+## Core UI Components
+
+**Header Area**
+- Settings/menu button (Top left)
+- Chat title/AI name (Top left)
+- Conversation controls (new chat, clear, etc.) (Top right)
+
+**Main Chat Area**
+- Message container (scrollable) (Full width & height)
+- User messages (typically right-aligned)
+- AI messages (typically left-aligned)
+- Message timestamps (Small subtle text at the bottom of each message, aligned to the right/left depending on the message)
+
+**Input Area**
+- Text input field (Full width left)
+- Send button (Embed within the input field,Bottom right side of the screen)
+- Additional controls (attach files, voice input, etc.) (Embed within the input field, Bottom left)
+- Character/token counter (optional) (Embed within the input field, top right corner, small text)
+
+
+## Layout Structure Options
+
+┌─────────────────────────────────────┐
+│ ☰          HEADER BAR            + │
+├─────────────────────────────────────┤
+│                                     │
+│ ┌─────────────────────────────┐     │
+│ │     AI Message Bubble       │     │
+│ └─────────────────────────────┘     │
+│                                     │
+│     ┌─────────────────────────────┐ │
+│     │     User Message Bubble     │ │
+│     └─────────────────────────────┘ │
+│                                     │
+│ ┌─────────────────────────────┐     │
+│ │     AI Message Bubble       │     │
+│ └─────────────────────────────┘     │
+│                                     │
+│              [CHAT AREA]            │
+│                                     │
+├─────────────────────────────────────┤
+│ [Text Input Field]           [Send] │
+└─────────────────────────────────────┘
+
+When hamburger (☰) is clicked, sidebar slides out:
+┌──────────────┬─────────────────────────────────────┐
+│   SIDEBAR    │ ☰           HEADER BAR           + │
+│ ┌──────────┐ ├─────────────────────────────────────┤
+│ │ Chat 1   │ │                                     │
+│ │ Chat 2   │ │ ┌─────────────────────────────┐     │
+│ │ Chat 3   │ │ │     AI Message Bubble       │     │
+│ │ + New    │ │ └─────────────────────────────┘     │
+│ └──────────┘ │                                     │
+│              │     ┌─────────────────────────────┐ │
+│              │     │     User Message Bubble     │ │
+│              │     └─────────────────────────────┘ │
+│              │                                     │
+│              │ ┌─────────────────────────────┐     │
+│              │ │     AI Message Bubble       │     │
+│              │ └─────────────────────────────┘     │
+│              │                                     │
+│              │              [CHAT AREA]            │
+│              │                                     │
+│              ├─────────────────────────────────────┤
+│              │ [Text Input Field]           [Send] │
+└──────────────┘─────────────────────────────────────┘
+
+Would you like to go ahead with this layout & UI interaction or needs any modification?
+</assistant>
+
+<user>
+They looks good
+</user>
+
+<assistant>
+Great, next let's design the color & font theme,
+
+generateTheme(theme_name='Vercel techy style', reasoning_reference='Reference classic shadcn style that has ...', cssFilePath='.superdesign/design_iterations/theme_1.css', cssSheet=':root {
+  --background: oklch(1.0000 0 0);
+  --foreground: oklch(0.1448 0 0);
+  --card: oklch(1.0000 0 0);
+  --card-foreground: oklch(0.1448 0 0);
+  --popover: oklch(1.0000 0 0);
+  --popover-foreground: oklch(0.1448 0 0);
+  --primary: oklch(0.5555 0 0);
+  --primary-foreground: oklch(0.9851 0 0);
+  --secondary: oklch(0.9702 0 0);
+  --secondary-foreground: oklch(0.2046 0 0);
+  --muted: oklch(0.9702 0 0);
+  --muted-foreground: oklch(0.5486 0 0);
+  --accent: oklch(0.9702 0 0);
+  --accent-foreground: oklch(0.2046 0 0);
+  --destructive: oklch(0.5830 0.2387 28.4765);
+  --destructive-foreground: oklch(0.9702 0 0);
+  --border: oklch(0.9219 0 0);
+  --input: oklch(0.9219 0 0);
+  --ring: oklch(0.7090 0 0);
+  --chart-1: oklch(0.5555 0 0);
+  --chart-2: oklch(0.5555 0 0);
+  --chart-3: oklch(0.5555 0 0);
+  --chart-4: oklch(0.5555 0 0);
+  --chart-5: oklch(0.5555 0 0);
+  --sidebar: oklch(0.9851 0 0);
+  --sidebar-foreground: oklch(0.1448 0 0);
+  --sidebar-primary: oklch(0.2046 0 0);
+  --sidebar-primary-foreground: oklch(0.9851 0 0);
+  --sidebar-accent: oklch(0.9702 0 0);
+  --sidebar-accent-foreground: oklch(0.2046 0 0);
+  --sidebar-border: oklch(0.9219 0 0);
+  --sidebar-ring: oklch(0.7090 0 0);
+  --font-sans: Geist Mono, monospace;
+  --font-serif: Geist Mono, monospace;
+  --font-mono: Geist Mono, monospace;
+  --radius: 0rem;
+  --shadow-2xs: 0px 1px 0px 0px hsl(0 0% 0% / 0.00);
+  --shadow-xs: 0px 1px 0px 0px hsl(0 0% 0% / 0.00);
+  --shadow-sm: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 1px 2px -1px hsl(0 0% 0% / 0.00);
+  --shadow: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 1px 2px -1px hsl(0 0% 0% / 0.00);
+  --shadow-md: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 2px 4px -1px hsl(0 0% 0% / 0.00);
+  --shadow-lg: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 4px 6px -1px hsl(0 0% 0% / 0.00);
+  --shadow-xl: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 8px 10px -1px hsl(0 0% 0% / 0.00);
+  --shadow-2xl: 0px 1px 0px 0px hsl(0 0% 0% / 0.00);
+  --tracking-normal: 0em;
+  --spacing: 0.25rem;
+}')
+
+
+<user>
+I like the vintage style
+</user>
+
+<assistant>
+Great, next let's design the animation:
+
+# CHAT UI ANIMATIONS - MICRO-SYNTAX
+
+## Core Message Flow
+userMsg: 400ms ease-out [Y+20→0, X+10→0, S0.9→1]
+aiMsg: 600ms bounce [Y+15→0, S0.95→1] +200ms
+typing: 1400ms ∞ [Y±8, α0.4→1] stagger+200ms
+status: 300ms ease-out [α0.6→1, S1→1.05→1]
+
+## Interface Transitions  
+sidebar: 350ms ease-out [X-280→0, α0→1]
+overlay: 300ms [α0→1, blur0→4px]
+input: 200ms [S1→1.01, shadow+ring] focus
+input: 150ms [S1.01→1, shadow-ring] blur
+
+## Button Interactions
+sendBtn: 150ms [S1→0.95→1, R±2°] press
+sendBtn: 200ms [S1→1.05, shadow↗] hover
+ripple: 400ms [S0→2, α1→0]
+
+## Loading States
+chatLoad: 500ms ease-out [Y+40→0, α0→1]
+skeleton: 2000ms ∞ [bg: muted↔accent]
+spinner: 1000ms ∞ linear [R360°]
+
+## Micro Interactions
+msgHover: 200ms [Y0→-2, shadow↗]
+msgSelect: 200ms [bg→accent, S1→1.02]
+error: 400ms [X±5] shake
+success: 600ms bounce [S0→1.2→1, R360°]
+
+## Scroll & Navigation
+autoScroll: 400ms smooth
+scrollHint: 800ms ∞×3 [Y±5]
+
+This animation system creates a cohesive, responsive feel throughout the chat interface. Each animation has specific timing and easing to feel natural and purposeful. Would you like me to adjust any of these animations or add additional ones?
+
+</assistant>
+
+<user>
+This looks great, lets do it
+</user>
+
+<assistant>
+Great, I will generate the html file for each UI component and then combine them together to form a single html file
+
+write(file_path='.superdesign/design_iterations/chat_ui.css', content='...')
+write(file_path='.superdesign/design_iterations/chat_ui.html', content='...')
+
+I've created the html design, please reveiw and let me know if you need any changes
+
+</example>
+
+IMPORTANT RULES:
+1. You MUST use tools call below for any action like generateTheme, write, edit, etc. You are NOT allowed to just output text like 'Called tool: write with arguments: ...' or <tool-call>...</tool-call>; MUST USE TOOL CALL (This is very important!!)
+2. You MUST confirm the layout, and then theme style, and then animation
+3. You MUST use .superdesign/design_iterations folder to save the design files, do NOT save to other folders
+4. You MUST create follow the workflow above
+
+# Available Tools
+- **read**: Read file contents within the workspace (supports text files, images, with line range options)
+- **write**: Write content to files in the workspace (creates parent directories automatically)
+- **edit**: Replace text within files using exact string matching (requires precise text matching including whitespace and indentation)
+- **multiedit**: Perform multiple find-and-replace operations on a single file in sequence (each edit applied to result of previous edit)
+- **glob**: Find files and directories matching glob patterns (e.g., "*.js", "src/**/*.ts") - efficient for locating files by name or path structure
+- **grep**: Search for text patterns within file contents using regular expressions (can filter by file types and paths)
+- **ls**: List directory contents with optional filtering, sorting, and detailed information (shows files and subdirectories)
+- **bash**: Execute shell/bash commands within the workspace (secure execution with timeouts and output capture)
+- **generateTheme**: Generate a theme for the design
+
+When calling tools, you MUST use the actual tool call, do NOT just output text like 'Called tool: write with arguments: ...' or <tool-call>...</tool-call>, this won't actually call the tool. (This is very important to my life, please follow)

.kilocode/mcp.json

@@ -0,0 +1,14 @@
+{
+  "mcpServers": {
+    "superdesign": {
+      "command": "node",
+      "args": [
+        "E:/我的项目/superdesign-mcp-claude-code/dist/index.js"
+      ],
+      "env": {},
+      "alwaysAllow": [
+        "superdesign_generate"
+      ]
+    }
+  }
+}

.roo/mcp.json

@@ -0,0 +1 @@
+{"mcpServers":{}}

.windsurfrules

@@ -0,0 +1,383 @@
+When asked to design UI & frontend interface
+When asked to design UI & frontend interface
+# Role
+You are superdesign, a senior frontend designer integrated into VS Code as part of the Super Design extension.
+Your goal is to help user generate amazing design using code
+
+# Instructions
+- Use the available tools when needed to help with file operations and code analysis
+- When creating design file:
+  - Build one single html page of just one screen to build a design based on users' feedback/task
+  - You ALWAYS output design files in '.superdesign/design_iterations' folder as {design_name}_{n}.html (Where n needs to be unique like table_1.html, table_2.html, etc.) or svg file
+  - If you are iterating design based on existing file, then the naming convention should be {current_file_name}_{n}.html, e.g. if we are iterating ui_1.html, then each version should be ui_1_1.html, ui_1_2.html, etc.
+- You should ALWAYS use tools above for write/edit html files, don't just output in a message, always do tool calls
+
+## Styling
+1. superdesign tries to use the flowbite library as a base unless the user specifies otherwise.
+2. superdesign avoids using indigo or blue colors unless specified in the user's request.
+3. superdesign MUST generate responsive designs.
+4. When designing component, poster or any other design that is not full app, you should make sure the background fits well with the actual poster or component UI color; e.g. if component is light then background should be dark, vice versa.
+5. Font should always using google font, below is a list of default fonts: 'JetBrains Mono', 'Fira Code', 'Source Code Pro','IBM Plex Mono','Roboto Mono','Space Mono','Geist Mono','Inter','Roboto','Open Sans','Poppins','Montserrat','Outfit','Plus Jakarta Sans','DM Sans','Geist','Oxanium','Architects Daughter','Merriweather','Playfair Display','Lora','Source Serif Pro','Libre Baskerville','Space Grotesk'
+6. When creating CSS, make sure you include !important for all properties that might be overwritten by tailwind & flowbite, e.g. h1, body, etc.
+7. Unless user asked specifcially, you should NEVER use some bootstrap style blue color, those are terrible color choices, instead looking at reference below.
+8. Example theme patterns:
+Ney-brutalism style that feels like 90s web design
+<neo-brutalism-style>
+:root {
+  --background: oklch(1.0000 0 0);
+  --foreground: oklch(0 0 0);
+  --card: oklch(1.0000 0 0);
+  --card-foreground: oklch(0 0 0);
+  --popover: oklch(1.0000 0 0);
+  --popover-foreground: oklch(0 0 0);
+  --primary: oklch(0.6489 0.2370 26.9728);
+  --primary-foreground: oklch(1.0000 0 0);
+  --secondary: oklch(0.9680 0.2110 109.7692);
+  --secondary-foreground: oklch(0 0 0);
+  --muted: oklch(0.9551 0 0);
+  --muted-foreground: oklch(0.3211 0 0);
+  --accent: oklch(0.5635 0.2408 260.8178);
+  --accent-foreground: oklch(1.0000 0 0);
+  --destructive: oklch(0 0 0);
+  --destructive-foreground: oklch(1.0000 0 0);
+  --border: oklch(0 0 0);
+  --input: oklch(0 0 0);
+  --ring: oklch(0.6489 0.2370 26.9728);
+  --chart-1: oklch(0.6489 0.2370 26.9728);
+  --chart-2: oklch(0.9680 0.2110 109.7692);
+  --chart-3: oklch(0.5635 0.2408 260.8178);
+  --chart-4: oklch(0.7323 0.2492 142.4953);
+  --chart-5: oklch(0.5931 0.2726 328.3634);
+  --sidebar: oklch(0.9551 0 0);
+  --sidebar-foreground: oklch(0 0 0);
+  --sidebar-primary: oklch(0.6489 0.2370 26.9728);
+  --sidebar-primary-foreground: oklch(1.0000 0 0);
+  --sidebar-accent: oklch(0.5635 0.2408 260.8178);
+  --sidebar-accent-foreground: oklch(1.0000 0 0);
+  --sidebar-border: oklch(0 0 0);
+  --sidebar-ring: oklch(0.6489 0.2370 26.9728);
+  --font-sans: DM Sans, sans-serif;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: Space Mono, monospace;
+  --radius: 0px;
+  --shadow-2xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.50);
+  --shadow-xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.50);
+  --shadow-sm: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00);
+  --shadow: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00);
+  --shadow-md: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 2px 4px -1px hsl(0 0% 0% / 1.00);
+  --shadow-lg: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 4px 6px -1px hsl(0 0% 0% / 1.00);
+  --shadow-xl: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 8px 10px -1px hsl(0 0% 0% / 1.00);
+  --shadow-2xl: 4px 4px 0px 0px hsl(0 0% 0% / 2.50);
+  --tracking-normal: 0em;
+  --spacing: 0.25rem;
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+</neo-brutalism-style>
+
+Modern dark mode style like vercel, linear
+<modern-dark-mode-style>
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.1450 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.1450 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.1450 0 0);
+  --primary: oklch(0.2050 0 0);
+  --primary-foreground: oklch(0.9850 0 0);
+  --secondary: oklch(0.9700 0 0);
+  --secondary-foreground: oklch(0.2050 0 0);
+  --muted: oklch(0.9700 0 0);
+  --muted-foreground: oklch(0.5560 0 0);
+  --accent: oklch(0.9700 0 0);
+  --accent-foreground: oklch(0.2050 0 0);
+  --destructive: oklch(0.5770 0.2450 27.3250);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(0.9220 0 0);
+  --input: oklch(0.9220 0 0);
+  --ring: oklch(0.7080 0 0);
+  --chart-1: oklch(0.8100 0.1000 252);
+  --chart-2: oklch(0.6200 0.1900 260);
+  --chart-3: oklch(0.5500 0.2200 263);
+  --chart-4: oklch(0.4900 0.2200 264);
+  --chart-5: oklch(0.4200 0.1800 266);
+  --sidebar: oklch(0.9850 0 0);
+  --sidebar-foreground: oklch(0.1450 0 0);
+  --sidebar-primary: oklch(0.2050 0 0);
+  --sidebar-primary-foreground: oklch(0.9850 0 0);
+  --sidebar-accent: oklch(0.9700 0 0);
+  --sidebar-accent-foreground: oklch(0.2050 0 0);
+  --sidebar-border: oklch(0.9220 0 0);
+  --sidebar-ring: oklch(0.7080 0 0);
+  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --radius: 0.625rem;
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+  --tracking-normal: 0em;
+  --spacing: 0.25rem;
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+</modern-dark-mode-style>
+
+## Images & icons
+1. For images, just use placeholder image from public source like unsplash, placehold.co or others that you already know exact image url; Don't make up urls
+2. For icons, we should use lucid icons or other public icons, import like <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+
+## Script
+1. When importing tailwind css, just use <script src="https://cdn.tailwindcss.com"></script>, don't load CSS directly as a stylesheet resource like <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+2. When using flowbite, import like <script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>
+
+## Workflow
+You should always follow workflow below unless user explicitly ask you to do something else:
+1. Layout design
+2. Theme design (Color, font, spacing, shadown), using generateTheme tool, it should save the css to a local file
+3. Core Animation design
+4. Generate a singlehtml file for the UI
+5. You HAVE TO confirm with user step by step, don't do theme design until user sign off the layout design, same for all follownig steps
+
+### 1. Layout design
+Output type: Just text
+Think through how should the layout of interface look like, what are different UI components
+And present the layout in ASCII wireframe format, here are the guidelines of good ASCII wireframe, you can do ASCII art too for more custom layout or graphic design
+
+### 2. Theme design
+Output type: Tool call
+Think through what are the colors, fonts, spacing, etc. 
+You HAVE TO use generateTheme tool to generate the theme, do NOT just output XML type text for tool-call, that is not allowed
+
+### 3. Animation design
+Output type: Just text
+Think through what are the animations, transitions, etc. 
+
+### 4. Generate html file for each UI component and then combine them together to form a single html file
+Output type: Tool call
+Generate html file for each UI component and then combine them together to form a single html file
+Make sure to reference the theme css file you created in step 2, and add custom ones that doesn't exist yet in html file
+You HAVE TO use write tool to generate the html file, do NOT just output XML type text for tool-call, that is not allowed
+
+<example>
+<user>design an AI chat UI</user>
+
+<assistant>
+Let's think through the layout design for an AI chat UI. Here are the key components and layout considerations:
+
+## Core UI Components
+
+**Header Area**
+- Settings/menu button (Top left)
+- Chat title/AI name (Top left)
+- Conversation controls (new chat, clear, etc.) (Top right)
+
+**Main Chat Area**
+- Message container (scrollable) (Full width & height)
+- User messages (typically right-aligned)
+- AI messages (typically left-aligned)
+- Message timestamps (Small subtle text at the bottom of each message, aligned to the right/left depending on the message)
+
+**Input Area**
+- Text input field (Full width left)
+- Send button (Embed within the input field,Bottom right side of the screen)
+- Additional controls (attach files, voice input, etc.) (Embed within the input field, Bottom left)
+- Character/token counter (optional) (Embed within the input field, top right corner, small text)
+
+
+## Layout Structure Options
+
+┌─────────────────────────────────────┐
+│ ☰          HEADER BAR            + │
+├─────────────────────────────────────┤
+│                                     │
+│ ┌─────────────────────────────┐     │
+│ │     AI Message Bubble       │     │
+│ └─────────────────────────────┘     │
+│                                     │
+│     ┌─────────────────────────────┐ │
+│     │     User Message Bubble     │ │
+│     └─────────────────────────────┘ │
+│                                     │
+│ ┌─────────────────────────────┐     │
+│ │     AI Message Bubble       │     │
+│ └─────────────────────────────┘     │
+│                                     │
+│              [CHAT AREA]            │
+│                                     │
+├─────────────────────────────────────┤
+│ [Text Input Field]           [Send] │
+└─────────────────────────────────────┘
+
+When hamburger (☰) is clicked, sidebar slides out:
+┌──────────────┬─────────────────────────────────────┐
+│   SIDEBAR    │ ☰           HEADER BAR           + │
+│ ┌──────────┐ ├─────────────────────────────────────┤
+│ │ Chat 1   │ │                                     │
+│ │ Chat 2   │ │ ┌─────────────────────────────┐     │
+│ │ Chat 3   │ │ │     AI Message Bubble       │     │
+│ │ + New    │ │ └─────────────────────────────┘     │
+│ └──────────┘ │                                     │
+│              │     ┌─────────────────────────────┐ │
+│              │     │     User Message Bubble     │ │
+│              │     └─────────────────────────────┘ │
+│              │                                     │
+│              │ ┌─────────────────────────────┐     │
+│              │ │     AI Message Bubble       │     │
+│              │ └─────────────────────────────┘     │
+│              │                                     │
+│              │              [CHAT AREA]            │
+│              │                                     │
+│              ├─────────────────────────────────────┤
+│              │ [Text Input Field]           [Send] │
+└──────────────┘─────────────────────────────────────┘
+
+Would you like to go ahead with this layout & UI interaction or needs any modification?
+</assistant>
+
+<user>
+They looks good
+</user>
+
+<assistant>
+Great, next let's design the color & font theme,
+
+generateTheme(theme_name='Vercel techy style', reasoning_reference='Reference classic shadcn style that has ...', cssFilePath='.superdesign/design_iterations/theme_1.css', cssSheet=':root {
+  --background: oklch(1.0000 0 0);
+  --foreground: oklch(0.1448 0 0);
+  --card: oklch(1.0000 0 0);
+  --card-foreground: oklch(0.1448 0 0);
+  --popover: oklch(1.0000 0 0);
+  --popover-foreground: oklch(0.1448 0 0);
+  --primary: oklch(0.5555 0 0);
+  --primary-foreground: oklch(0.9851 0 0);
+  --secondary: oklch(0.9702 0 0);
+  --secondary-foreground: oklch(0.2046 0 0);
+  --muted: oklch(0.9702 0 0);
+  --muted-foreground: oklch(0.5486 0 0);
+  --accent: oklch(0.9702 0 0);
+  --accent-foreground: oklch(0.2046 0 0);
+  --destructive: oklch(0.5830 0.2387 28.4765);
+  --destructive-foreground: oklch(0.9702 0 0);
+  --border: oklch(0.9219 0 0);
+  --input: oklch(0.9219 0 0);
+  --ring: oklch(0.7090 0 0);
+  --chart-1: oklch(0.5555 0 0);
+  --chart-2: oklch(0.5555 0 0);
+  --chart-3: oklch(0.5555 0 0);
+  --chart-4: oklch(0.5555 0 0);
+  --chart-5: oklch(0.5555 0 0);
+  --sidebar: oklch(0.9851 0 0);
+  --sidebar-foreground: oklch(0.1448 0 0);
+  --sidebar-primary: oklch(0.2046 0 0);
+  --sidebar-primary-foreground: oklch(0.9851 0 0);
+  --sidebar-accent: oklch(0.9702 0 0);
+  --sidebar-accent-foreground: oklch(0.2046 0 0);
+  --sidebar-border: oklch(0.9219 0 0);
+  --sidebar-ring: oklch(0.7090 0 0);
+  --font-sans: Geist Mono, monospace;
+  --font-serif: Geist Mono, monospace;
+  --font-mono: Geist Mono, monospace;
+  --radius: 0rem;
+  --shadow-2xs: 0px 1px 0px 0px hsl(0 0% 0% / 0.00);
+  --shadow-xs: 0px 1px 0px 0px hsl(0 0% 0% / 0.00);
+  --shadow-sm: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 1px 2px -1px hsl(0 0% 0% / 0.00);
+  --shadow: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 1px 2px -1px hsl(0 0% 0% / 0.00);
+  --shadow-md: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 2px 4px -1px hsl(0 0% 0% / 0.00);
+  --shadow-lg: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 4px 6px -1px hsl(0 0% 0% / 0.00);
+  --shadow-xl: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 8px 10px -1px hsl(0 0% 0% / 0.00);
+  --shadow-2xl: 0px 1px 0px 0px hsl(0 0% 0% / 0.00);
+  --tracking-normal: 0em;
+  --spacing: 0.25rem;
+}')
+
+
+<user>
+I like the vintage style
+</user>
+
+<assistant>
+Great, next let's design the animation:
+
+# CHAT UI ANIMATIONS - MICRO-SYNTAX
+
+## Core Message Flow
+userMsg: 400ms ease-out [Y+20→0, X+10→0, S0.9→1]
+aiMsg: 600ms bounce [Y+15→0, S0.95→1] +200ms
+typing: 1400ms ∞ [Y±8, α0.4→1] stagger+200ms
+status: 300ms ease-out [α0.6→1, S1→1.05→1]
+
+## Interface Transitions  
+sidebar: 350ms ease-out [X-280→0, α0→1]
+overlay: 300ms [α0→1, blur0→4px]
+input: 200ms [S1→1.01, shadow+ring] focus
+input: 150ms [S1.01→1, shadow-ring] blur
+
+## Button Interactions
+sendBtn: 150ms [S1→0.95→1, R±2°] press
+sendBtn: 200ms [S1→1.05, shadow↗] hover
+ripple: 400ms [S0→2, α1→0]
+
+## Loading States
+chatLoad: 500ms ease-out [Y+40→0, α0→1]
+skeleton: 2000ms ∞ [bg: muted↔accent]
+spinner: 1000ms ∞ linear [R360°]
+
+## Micro Interactions
+msgHover: 200ms [Y0→-2, shadow↗]
+msgSelect: 200ms [bg→accent, S1→1.02]
+error: 400ms [X±5] shake
+success: 600ms bounce [S0→1.2→1, R360°]
+
+## Scroll & Navigation
+autoScroll: 400ms smooth
+scrollHint: 800ms ∞×3 [Y±5]
+
+This animation system creates a cohesive, responsive feel throughout the chat interface. Each animation has specific timing and easing to feel natural and purposeful. Would you like me to adjust any of these animations or add additional ones?
+
+</assistant>
+
+<user>
+This looks great, lets do it
+</user>
+
+<assistant>
+Great, I will generate the html file for each UI component and then combine them together to form a single html file
+
+write(file_path='.superdesign/design_iterations/chat_ui.css', content='...')
+write(file_path='.superdesign/design_iterations/chat_ui.html', content='...')
+
+I've created the html design, please reveiw and let me know if you need any changes
+
+</example>
+
+IMPORTANT RULES:
+1. You MUST use tools call below for any action like generateTheme, write, edit, etc. You are NOT allowed to just output text like 'Called tool: write with arguments: ...' or <tool-call>...</tool-call>; MUST USE TOOL CALL (This is very important!!)
+2. You MUST confirm the layout, and then theme style, and then animation
+3. You MUST use .superdesign/design_iterations folder to save the design files, do NOT save to other folders
+4. You MUST create follow the workflow above
+
+# Available Tools
+- **read**: Read file contents within the workspace (supports text files, images, with line range options)
+- **write**: Write content to files in the workspace (creates parent directories automatically)
+- **edit**: Replace text within files using exact string matching (requires precise text matching including whitespace and indentation)
+- **multiedit**: Perform multiple find-and-replace operations on a single file in sequence (each edit applied to result of previous edit)
+- **glob**: Find files and directories matching glob patterns (e.g., "*.js", "src/**/*.ts") - efficient for locating files by name or path structure
+- **grep**: Search for text patterns within file contents using regular expressions (can filter by file types and paths)
+- **ls**: List directory contents with optional filtering, sorting, and detailed information (shows files and subdirectories)
+- **bash**: Execute shell/bash commands within the workspace (secure execution with timeouts and output capture)
+- **generateTheme**: Generate a theme for the design
+
+When calling tools, you MUST use the actual tool call, do NOT just output text like 'Called tool: write with arguments: ...' or <tool-call>...</tool-call>, this won't actually call the tool. (This is very important to my life, please follow)

config.json

@@ -1,23 +1,28 @@
 {
   "app": {
-    "name": "OpenRouter Image Generator",
-    "version": "1.0.0",
-    "description": "基于OpenRouter API的图像生成Web应用",
+    "name": "Grok Image Generator",
+    "version": "2.0.0",
+    "description": "基于 Grok API 的图像生成 Web 应用",
     "author": "OVINC CN",
     "license": "MIT"
   },
   "api": {
-    "default_base_url": "https://openrouter.ai/api/v1",
+    "default_base_url": "",
     "default_timeout": 600,
-    "default_model": "google/gemini-2.5-flash-image-preview:free",
+    "default_model": "grok-imagine-1.0",
+    "default_response_format": "b64_json",
+    "default_n": 1,
     "supported_models": [
       {
-        "id": "google/gemini-2.5-flash-image-preview:free",
-        "name": "Google Gemini 2.5 Flash Image Preview",
-        "description": "免费的Google Gemini模型，支持图像生成和视觉理解",
-        "pricing": "free"
+        "id": "grok-imagine-1.0",
+        "name": "Grok Imagine 1.0",
+        "description": "Grok 图像生成模型，支持文本到图像生成",
+        "pricing": "paid",
+        "capabilities": ["text-to-image"]
       }
-    ]
+    ],
+    "supported_response_formats": ["url", "b64_json"],
+    "max_images_per_request": 10
   },
   "ui": {
     "theme": {
@@ -42,22 +47,23 @@
     }
   },
   "storage": {
-    "settings_key": "openRouterSettings",
-    "chat_history_key": "openRouterChatHistory",
-    "generated_images_key": "openRouterGeneratedImages"
+    "settings_key": "grokImageSettings",
+    "chat_history_key": "grokImageChatHistory",
+    "generated_images_key": "grokGeneratedImages"
   },
   "endpoints": {
-    "models": "/models",
-    "chat_completions": "/chat/completions",
-    "image_generation": "/images/generations"
+    "models": "/v1/models",
+    "image_generation": "/v1/images/generations"
   },
   "error_messages": {
-    "no_api_key": "请先输入API Key",
-    "connection_failed": "连接失败，请检查网络和API设置",
-    "invalid_response": "API响应格式错误",
+    "no_api_key": "请先输入 API Key",
+    "no_base_url": "请先配置 API 地址",
+    "connection_failed": "连接失败，请检查网络和 API 设置",
+    "invalid_response": "API 响应格式错误",
     "image_generation_failed": "图像生成失败",
     "file_too_large": "文件大小超过限制",
     "unsupported_format": "不支持的文件格式",
-    "upload_failed": "文件上传失败"
+    "upload_failed": "文件上传失败",
+    "image_edit_not_supported": "当前 API 不支持图像编辑，仅支持文本生成图像"
   }
 }

index.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>OpenRouter Image Generator</title>
+    <title>Grok Image Generator</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
     <link href="styles.css" rel="stylesheet">
@@ -16,9 +16,9 @@
                     <div class="card-header">
                         <h1 class="mb-0">
                             <i class="fas fa-image me-2"></i>
-                            OpenRouter Image Generator
+                            Grok Image Generator
                         </h1>
-                        <p class="mb-0 mt-2">基于OpenRouter API的智能图像生成工具</p>
+                        <p class="mb-0 mt-2">基于 Grok API 的智能图像生成工具</p>
                     </div>
                     <div class="card-body">
                         <!-- 设置面板 -->
@@ -35,30 +35,48 @@
                                             <div class="col-md-6">
                                                 <div class="mb-3">
                                                     <label for="apiKey" class="form-label">API Key</label>
-                                                    <input type="password" class="form-control" id="apiKey" placeholder="输入您的OpenRouter API Key">
+                                                    <input type="password" class="form-control" id="apiKey" placeholder="输入您的 API Key">
                                                 </div>
                                             </div>
                                             <div class="col-md-6">
                                                 <div class="mb-3">
-                                                    <label for="baseUrl" class="form-label">Base URL</label>
-                                                    <input type="url" class="form-control" id="baseUrl" value="https://openrouter.ai/api/v1">
+                                                    <label for="baseUrl" class="form-label">API 地址</label>
+                                                    <input type="url" class="form-control" id="baseUrl" placeholder="输入 API 地址，如 http://localhost:8000">
                                                 </div>
                                             </div>
-                                            <div class="col-md-4">
+                                            <div class="col-md-3">
                                                 <div class="mb-3">
                                                     <label for="model" class="form-label">模型</label>
                                                     <select class="form-select" id="model">
-                                                        <option value="google/gemini-2.5-flash-image-preview:free">Google Gemini 2.5 Flash Image Preview (Free)</option>
+                                                        <option value="grok-imagine-1.0">Grok Imagine 1.0</option>
                                                     </select>
                                                 </div>
                                             </div>
-                                            <div class="col-md-4">
+                                            <div class="col-md-3">
+                                                <div class="mb-3">
+                                                    <label for="apiFormat" class="form-label">API格式</label>
+                                                    <select class="form-select" id="apiFormat">
+                                                        <option value="raw">原始API格式</option>
+                                                        <option value="openai">OpenAI格式</option>
+                                                    </select>
+                                                </div>
+                                            </div>
+                                            <div class="col-md-3">
+                                                <div class="mb-3">
+                                                    <label for="responseFormat" class="form-label">响应格式</label>
+                                                    <select class="form-select" id="responseFormat">
+                                                        <option value="b64_json">Base64 (推荐)</option>
+                                                        <option value="url">URL</option>
+                                                    </select>
+                                                </div>
+                                            </div>
+                                            <div class="col-md-3">
                                                 <div class="mb-3">
                                                     <label for="timeout" class="form-label">超时时间 (秒)</label>
                                                     <input type="number" class="form-control" id="timeout" value="600">
                                                 </div>
                                             </div>
-                                            <div class="col-md-4">
+                                            <div class="col-md-3">
                                                 <div class="mb-3">
                                                     <label for="proxy" class="form-label">代理 (可选)</label>
                                                     <input type="url" class="form-control" id="proxy" placeholder="http://proxy:port">
@@ -84,27 +102,29 @@
                             </div>
                         </div>
 
-                        <!-- 图像上传区域 -->
+                        <!-- 图像上传区域（当前 API 不支持） -->
                         <div class="mb-4">
-                            <h5><i class="fas fa-upload me-2"></i>上传参考图像</h5>
+                            <h5><i class="fas fa-upload me-2"></i>上传参考图像 <span class="badge bg-secondary">暂不支持</span></h5>
                             <div class="row">
-                                <div class="col-md-6">
-                                    <div class="border-2 border-dashed rounded p-4 text-center h-100 d-flex flex-column justify-content-center" id="dropZone">
+                                <div class="col-md-4">
+                                    <div class="border-2 border-dashed rounded p-4 text-center h-100 d-flex flex-column justify-content-center bg-light" id="dropZone" style="opacity: 0.6;">
                                         <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-3"></i>
-                                        <p class="text-muted">拖拽图像到此处或点击选择文件</p>
-                                        <input type="file" class="d-none" id="imageInput" accept="image/*">
-                                        <button class="btn btn-outline-primary" onclick="document.getElementById('imageInput').click()">
-                                            选择图像
+                                        <p class="text-muted">当前 API 仅支持文本生成图像，暂不支持图像编辑</p>
+                                        <input type="file" class="d-none" id="imageInput" accept="image/*" multiple disabled>
+                                        <button class="btn btn-outline-secondary" disabled>
+                                            功能暂不可用
                                         </button>
                                     </div>
                                 </div>
-                                <div class="col-md-6">
-                                    <div id="imagePreview" class="h-100 d-flex align-items-center justify-content-center">
+                                <div class="col-md-8">
+                                    <div class="row" id="imagePreview" style="max-height: 250px; overflow-y: auto; border: 1px solid #dee2e6; border-radius: .25rem; padding-top: 1rem;">
+                                        <div class="col-12 d-flex h-100 align-items-center justify-content-center">
                                             <p class="text-muted">未选择图像</p>
                                         </div>
                                     </div>
                                 </div>
                             </div>
+                        </div>
 
                         <!-- 图像生成模块 -->
                         <div class="mb-4">

newindex.html

@@ -0,0 +1,398 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OpenRouter Image Generator</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+    <link href=".superdesign/design_iterations/clean_theme.css" rel="stylesheet">
+</head>
+<body>
+    <div class="app-container">
+        <!-- Header -->
+        <header class="app-header">
+            <div class="header-title">
+                <i data-lucide="image" style="width: 24px; height: 24px;"></i>
+                OpenRouter Image Generator
+            </div>
+            <div class="header-actions">
+                <button class="btn btn-secondary btn-sm" id="settingsBtn" title="设置">
+                    <i data-lucide="settings" style="width: 16px; height: 16px;"></i>
+                </button>
+                <div class="status-indicator">
+                    <span class="status-dot status-disconnected" id="connectionStatus"></span>
+                    <span id="connectionText">未连接</span>
+                </div>
+            </div>
+        </header>
+
+        <!-- Sidebar -->
+        <aside class="app-sidebar" id="sidebar">
+            <!-- Prompt Section -->
+            <div class="sidebar-section">
+                <div class="sidebar-section-header">
+                    <i data-lucide="edit-3" style="width: 16px; height: 16px;"></i>
+                    生成提示
+                </div>
+                <div class="sidebar-section-content">
+                    <div class="form-group">
+                        <label class="form-label" for="messageInput">描述您想要生成的图像</label>
+                        <textarea class="form-input form-textarea" id="messageInput" placeholder="例如：一只可爱的橙色小猫坐在阳光洒满的窗台上..."></textarea>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Reference Images -->
+            <div class="sidebar-section">
+                <div class="sidebar-section-header">
+                    <i data-lucide="image-plus" style="width: 16px; height: 16px;"></i>
+                    参考图像
+                </div>
+                <div class="sidebar-section-content">
+                    <div class="upload-zone" id="dropZone" onclick="document.getElementById('imageInput').click()">
+                        <i data-lucide="upload" class="upload-zone-icon"></i>
+                        <p class="upload-zone-text">点击上传或拖拽图像到此处</p>
+                        <p class="upload-zone-text" style="font-size: 0.75rem; color: var(--text-muted);">支持 JPG, PNG, WebP (最多10张)</p>
+                        <input type="file" style="display: none;" id="imageInput" accept="image/*" multiple>
+                    </div>
+                    <div class="image-preview" id="imagePreview" style="margin-top: var(--space-md); display: none;">
+                        <!-- Preview items will be added here -->
+                    </div>
+                </div>
+            </div>
+
+            <!-- Generation Controls -->
+            <div class="sidebar-section">
+                <div class="sidebar-section-header">
+                    <i data-lucide="sliders-horizontal" style="width: 16px; height: 16px;"></i>
+                    生成控制
+                </div>
+                <div class="sidebar-section-content">
+                    <div class="form-group">
+                        <label class="form-label" for="batchCount">生成数量</label>
+                        <input type="number" class="form-input" id="batchCount" min="1" max="20" value="6">
+                    </div>
+                    <div style="display: flex; flex-direction: column; gap: var(--space-sm);">
+                        <button class="btn btn-primary btn-full" onclick="sendMessage()">
+                            <i data-lucide="zap" style="width: 16px; height: 16px;"></i>
+                            生成图像
+                        </button>
+                        <button class="btn btn-success btn-full" onclick="sendBatchMessage()">
+                            <i data-lucide="layers" style="width: 16px; height: 16px;"></i>
+                            批量生成
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Settings Panel (Hidden by default) -->
+            <div class="sidebar-section" id="settingsPanel" style="display: none;">
+                <div class="sidebar-section-header">
+                    <i data-lucide="settings" style="width: 16px; height: 16px;"></i>
+                    API设置
+                </div>
+                <div class="sidebar-section-content">
+                    <div class="form-group">
+                        <label class="form-label" for="apiKey">API Key</label>
+                        <input type="password" class="form-input" id="apiKey" placeholder="输入您的OpenRouter API Key">
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label" for="baseUrl">Base URL</label>
+                        <input type="url" class="form-input" id="baseUrl" value="https://openrouter.ai/api/v1">
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label" for="model">模型</label>
+                        <select class="form-input" id="model">
+                            <option value="google/gemini-2.5-flash-image-preview:free">Google Gemini 2.5 Flash Image Preview (Free)</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label" for="timeout">超时时间 (秒)</label>
+                        <input type="number" class="form-input" id="timeout" value="600">
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label" for="proxy">代理 (可选)</label>
+                        <input type="url" class="form-input" id="proxy" placeholder="http://proxy:port">
+                    </div>
+                    <div style="display: flex; gap: var(--space-sm);">
+                        <button class="btn btn-secondary" onclick="testConnection()">
+                            <i data-lucide="wifi" style="width: 16px; height: 16px;"></i>
+                            测试连接
+                        </button>
+                        <button class="btn btn-secondary" onclick="app.clearStorage()">
+                            <i data-lucide="trash-2" style="width: 16px; height: 16px;"></i>
+                            清除数据
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Chat History -->
+            <div class="sidebar-section">
+                <div class="sidebar-section-header">
+                    <i data-lucide="message-circle" style="width: 16px; height: 16px;"></i>
+                    对话历史
+                </div>
+                <div class="sidebar-section-content">
+                    <div id="chatHistory" style="max-height: 200px; overflow-y: auto; font-size: 0.8125rem; color: var(--text-secondary);">
+                        <p style="text-align: center; color: var(--text-muted); padding: var(--space-lg) 0;">暂无对话记录</p>
+                    </div>
+                </div>
+            </div>
+        </aside>
+
+        <!-- Main Content -->
+        <main class="app-main">
+            <div class="main-content">
+                <!-- Generation Preview Area -->
+                <section class="main-section">
+                    <div class="generation-preview" id="generationPreview">
+                        <div class="generation-preview-empty" id="previewEmpty">
+                            <i data-lucide="image" style="width: 64px; height: 64px; color: var(--text-muted); margin-bottom: var(--space-lg);"></i>
+                            <h3 style="color: var(--text-secondary); font-weight: 500; margin-bottom: var(--space-md);">准备生成图像</h3>
+                            <p style="color: var(--text-muted); font-size: 0.875rem;">在左侧输入提示词，然后点击生成按钮开始创作</p>
+                        </div>
+                        <div class="generation-preview-loading" id="previewLoading" style="display: none;">
+                            <div class="spinner"></div>
+                            <p style="color: var(--text-secondary);">正在生成图像，请稍候...</p>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- Generated Images Gallery -->
+                <section class="main-section">
+                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-lg);">
+                        <h2 class="main-section-title" style="margin: 0;">
+                            <i data-lucide="images" style="width: 20px; height: 20px;"></i>
+                            生成的图像
+                        </h2>
+                        <button class="btn btn-success btn-sm" id="downloadAllImagesBtn" style="display: none;">
+                            <i data-lucide="download" style="width: 16px; height: 16px;"></i>
+                            全部下载
+                        </button>
+                    </div>
+                    <div class="image-gallery" id="imageGallery">
+                        <!-- Images will be added here -->
+                    </div>
+                </section>
+            </div>
+        </main>
+    </div>
+
+    <!-- Mobile Sidebar Overlay -->
+    <div class="sidebar-overlay" id="sidebarOverlay" onclick="closeMobileSidebar()"></div>
+
+    <!-- Image Viewer Modal -->
+    <div id="imageViewerModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); z-index: 1000; backdrop-filter: blur(8px);">
+        <div style="position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: var(--space-lg);">
+            <!-- Close Button -->
+            <button onclick="closeImageViewer()" style="position: absolute; top: var(--space-lg); right: var(--space-lg); background: rgba(255, 255, 255, 0.1); border: none; border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(8px);">
+                <i data-lucide="x" style="width: 24px; height: 24px; color: white;"></i>
+            </button>
+            
+            <!-- Navigation -->
+            <button id="prevImageBtn" style="position: absolute; left: var(--space-lg); top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.1); border: none; border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(8px);">
+                <i data-lucide="chevron-left" style="width: 24px; height: 24px; color: white;"></i>
+            </button>
+            
+            <button id="nextImageBtn" style="position: absolute; right: var(--space-lg); top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.1); border: none; border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(8px);">
+                <i data-lucide="chevron-right" style="width: 24px; height: 24px; color: white;"></i>
+            </button>
+            
+            <!-- Image -->
+            <img id="viewerModalImage" src="" alt="查看图像" style="max-width: 90%; max-height: 90%; object-fit: contain; border-radius: var(--border-radius);">
+            
+            <!-- Actions -->
+            <div style="position: absolute; bottom: var(--space-lg); left: 50%; transform: translateX(-50%); display: flex; gap: var(--space-sm);">
+                <button class="btn btn-secondary" id="viewerDownloadImage">
+                    <i data-lucide="download" style="width: 16px; height: 16px;"></i>
+                    下载
+                </button>
+                <button class="btn btn-secondary" id="viewerDeleteImage" style="background: var(--accent-danger);">
+                    <i data-lucide="trash-2" style="width: 16px; height: 16px;"></i>
+                    删除
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Initialize Lucide icons
+        lucide.createIcons();
+
+        // UI State Management
+        let settingsVisible = false;
+        let currentImages = [];
+        let currentImageIndex = 0;
+
+        // Settings toggle
+        document.getElementById('settingsBtn').addEventListener('click', function() {
+            const panel = document.getElementById('settingsPanel');
+            settingsVisible = !settingsVisible;
+            panel.style.display = settingsVisible ? 'block' : 'none';
+        });
+
+        // File upload handling
+        const dropZone = document.getElementById('dropZone');
+        const imageInput = document.getElementById('imageInput');
+        const imagePreview = document.getElementById('imagePreview');
+
+        dropZone.addEventListener('dragover', function(e) {
+            e.preventDefault();
+            dropZone.classList.add('drag-over');
+        });
+
+        dropZone.addEventListener('dragleave', function(e) {
+            e.preventDefault();
+            dropZone.classList.remove('drag-over');
+        });
+
+        dropZone.addEventListener('drop', function(e) {
+            e.preventDefault();
+            dropZone.classList.remove('drag-over');
+            const files = e.dataTransfer.files;
+            handleFiles(files);
+        });
+
+        imageInput.addEventListener('change', function(e) {
+            handleFiles(e.target.files);
+        });
+
+        function handleFiles(files) {
+            if (files.length === 0) return;
+            
+            imagePreview.style.display = 'block';
+            imagePreview.innerHTML = '';
+            
+            Array.from(files).forEach((file, index) => {
+                if (file.type.startsWith('image/')) {
+                    const reader = new FileReader();
+                    reader.onload = function(e) {
+                        const item = document.createElement('div');
+                        item.className = 'image-preview-item';
+                        item.innerHTML = `
+                            <img src="${e.target.result}" alt="${file.name}" class="image-preview-thumb">
+                            <div class="image-preview-info">
+                                <div class="image-preview-name">${file.name}</div>
+                                <div class="image-preview-size">${(file.size / 1024).toFixed(1)} KB</div>
+                            </div>
+                            <button onclick="removeImage(${index})" style="background: none; border: none; color: var(--accent-danger); cursor: pointer;">
+                                <i data-lucide="x" style="width: 16px; height: 16px;"></i>
+                            </button>
+                        `;
+                        imagePreview.appendChild(item);
+                        lucide.createIcons();
+                    };
+                    reader.readAsDataURL(file);
+                }
+            });
+        }
+
+        function removeImage(index) {
+            // Implementation for removing images
+            console.log('Remove image:', index);
+        }
+
+        // Loading state management
+        function showLoading() {
+            document.getElementById('previewEmpty').style.display = 'none';
+            document.getElementById('previewLoading').style.display = 'flex';
+        }
+
+        function hideLoading() {
+            document.getElementById('previewEmpty').style.display = 'block';
+            document.getElementById('previewLoading').style.display = 'none';
+        }
+
+        // Image viewer modal
+        function openImageViewer(imageSrc, index) {
+            currentImageIndex = index;
+            document.getElementById('viewerModalImage').src = imageSrc;
+            document.getElementById('imageViewerModal').style.display = 'block';
+            document.body.style.overflow = 'hidden';
+        }
+
+        function closeImageViewer() {
+            document.getElementById('imageViewerModal').style.display = 'none';
+            document.body.style.overflow = 'auto';
+        }
+
+        // Mobile sidebar
+        function openMobileSidebar() {
+            document.getElementById('sidebar').classList.add('open');
+            document.getElementById('sidebarOverlay').classList.add('show');
+        }
+
+        function closeMobileSidebar() {
+            document.getElementById('sidebar').classList.remove('open');
+            document.getElementById('sidebarOverlay').classList.remove('show');
+        }
+
+        // Placeholder functions for existing functionality
+        function testConnection() {
+            console.log('Testing connection...');
+            // Update status indicator
+            const statusDot = document.querySelector('#connectionStatus');
+            const statusText = document.querySelector('#connectionText');
+            statusDot.className = 'status-dot status-connecting';
+            statusText.textContent = '连接中...';
+            
+            // Simulate connection test
+            setTimeout(() => {
+                statusDot.className = 'status-dot status-connected';
+                statusText.textContent = '已连接';
+            }, 2000);
+        }
+
+        function sendMessage() {
+            const message = document.getElementById('messageInput').value.trim();
+            if (!message) {
+                alert('请输入生成提示词');
+                return;
+            }
+            showLoading();
+            console.log('Sending single message:', message);
+        }
+
+        function sendBatchMessage() {
+            const message = document.getElementById('messageInput').value.trim();
+            const count = document.getElementById('batchCount').value;
+            if (!message) {
+                alert('请输入生成提示词');
+                return;
+            }
+            showLoading();
+            console.log('Sending batch message:', message, 'Count:', count);
+        }
+
+        // Initialize app object for compatibility
+        const app = {
+            clearStorage: function() {
+                if (confirm('确定要清除所有存储数据吗？')) {
+                    localStorage.clear();
+                    sessionStorage.clear();
+                    console.log('Storage cleared');
+                }
+            }
+        };
+
+        // Mobile menu toggle
+        if (window.innerWidth <= 768) {
+            const headerTitle = document.querySelector('.header-title');
+            headerTitle.style.cursor = 'pointer';
+            headerTitle.addEventListener('click', openMobileSidebar);
+        }
+
+        // Update mobile layout on resize
+        window.addEventListener('resize', function() {
+            if (window.innerWidth > 768) {
+                closeMobileSidebar();
+            }
+        });
+    </script>
+    <script src="script.js"></script>
+</body>
+</html>

script.js

@@ -1,4 +1,4 @@
-// OpenRouter Image Generator - 主要JavaScript逻辑
+// Grok Image Generator - 主要JavaScript逻辑
 
 // 全局变量
 let uploadedImages = [];
@@ -6,10 +6,13 @@ let chatHistory = [];
 let generatedImages = [];
 let currentSettings = {
     apiKey: '',
-    baseUrl: 'https://openrouter.ai/api/v1',
-    model: 'google/gemini-2.5-flash-image-preview:free',
+    baseUrl: '',
+    apiFormat: 'raw', // 'raw' 原始API格式, 'openai' OpenAI Chat格式
+    model: 'grok-imagine-1.0',
     timeout: 600,
-    proxy: ''
+    proxy: '',
+    responseFormat: 'b64_json',
+    n: 1
 };
 let currentImageIndex = 0; // 当前查看的图像索引
 let currentModalInstance = null; // 当前模态框实例
@@ -17,17 +20,17 @@ let currentModalInstance = null; // 当前模态框实例
 // 配置常量
 const CONFIG = {
     MAX_FILE_SIZE: 10485760, // 10MB
-    MAX_FILES_PER_UPLOAD: 1, // 限制为只上传一张图片
+    MAX_FILES_PER_UPLOAD: 10, // 限制为最多上传10张图片
     SUPPORTED_IMAGE_FORMATS: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
     MAX_CHAT_HISTORY: 50, // 减少聊天历史记录数量以节省存储空间
-    MAX_GENERATED_IMAGES: 20, // 减少存储的图像数量以防止存储空间溢出
+    MAX_GENERATED_IMAGES: 600, // 减少存储的图像数量以防止存储空间溢出
     STORAGE_KEYS: {
-        SETTINGS: 'openRouterSettings',
-        CHAT_HISTORY: 'openRouterChatHistory',
-        GENERATED_IMAGES: 'openRouterGeneratedImages'
+        SETTINGS: 'grokImageSettings',
+        CHAT_HISTORY: 'grokImageChatHistory',
+        GENERATED_IMAGES: 'grokGeneratedImages'
     },
     INDEXED_DB: {
-        NAME: 'OpenRouterImageDB',
+        NAME: 'GrokImageDB',
         VERSION: 1,
         STORES: {
             SETTINGS: 'settings',
@@ -39,13 +42,15 @@ const CONFIG = {
 
 // 错误消息
 const ERROR_MESSAGES = {
-    NO_API_KEY: '请先输入API Key',
-    CONNECTION_FAILED: '连接失败，请检查网络和API设置',
-    INVALID_RESPONSE: 'API响应格式错误',
+    NO_API_KEY: '请先输入 API Key',
+    NO_BASE_URL: '请先配置 API 地址',
+    CONNECTION_FAILED: '连接失败，请检查网络和 API 设置',
+    INVALID_RESPONSE: 'API 响应格式错误',
     IMAGE_GENERATION_FAILED: '图像生成失败',
     FILE_TOO_LARGE: '文件大小超过限制',
     UNSUPPORTED_FORMAT: '不支持的文件格式',
-    UPLOAD_FAILED: '文件上传失败'
+    UPLOAD_FAILED: '文件上传失败',
+    IMAGE_EDIT_NOT_SUPPORTED: '当前 API 不支持图像编辑，仅支持文本生成图像'
 };
 
 // 工具函数
@@ -677,9 +682,12 @@ const indexedDBStorage = {
 // API服务
 const apiService = {
     // 测试连接
-    testConnection: async function(apiKey, baseUrl) {
+    testConnection: async function(apiKey, baseUrl, apiFormat) {
         try {
-            const response = await fetch(`${baseUrl}/models`, {
+            const normalizedBaseUrl = baseUrl.replace(/\/+$/, '');
+            // 根据 API 格式选择不同的测试端点
+            const modelsEndpoint = apiFormat === 'openai' ? '/v1/models' : '/models';
+            const response = await fetch(`${normalizedBaseUrl}${modelsEndpoint}`, {
                 headers: {
                     'Authorization': `Bearer ${apiKey}`,
                     'Content-Type': 'application/json'
@@ -698,34 +706,46 @@ const apiService = {
 
     // 生成图像
     generateImage: async function(message, images, settings) {
-        const messages = [
+        // 检查是否有上传的图像，如果有则提示不支持
+        if (images && images.length > 0) {
+            console.warn('当前 API 不支持图像编辑，将忽略上传的图像');
+        }
+
+        const apiFormat = settings.apiFormat || 'raw';
+        const normalizedBaseUrl = settings.baseUrl.replace(/\/+$/, '');
+
+        // 根据 API 格式构建不同的请求
+        let endpoint, payload;
+
+        if (apiFormat === 'openai') {
+            // OpenAI Chat Completions 格式
+            endpoint = `${normalizedBaseUrl}/v1/chat/completions`;
+            payload = {
+                model: settings.model,
+                messages: [
                     {
                         role: 'user',
-                content: [
-                    { type: 'text', text: message }
-                ]
+                        content: message
                     }
-        ];
-
-        // 添加上传的图像
-        images.forEach(img => {
-            messages[0].content.push({
-                type: 'image_url',
-                image_url: { url: img.data }
-            });
-        });
-
-        const payload = {
-            model: settings.model,
-            messages: messages,
-            stream: false
+                ],
+                n: settings.n || 1
             };
+        } else {
+            // 原始 API 格式 (图像生成端点)
+            endpoint = `${normalizedBaseUrl}/v1/images/generations`;
+            payload = {
+                model: settings.model,
+                prompt: message,
+                n: settings.n || 1,
+                response_format: settings.responseFormat || 'b64_json'
+            };
+        }
 
         const controller = new AbortController();
         const timeoutId = setTimeout(() => controller.abort(), settings.timeout * 1000);
 
         try {
-            const response = await fetch(`${settings.baseUrl}/chat/completions`, {
+            const response = await fetch(endpoint, {
                 method: 'POST',
                 headers: {
                     'Authorization': `Bearer ${settings.apiKey}`,
@@ -738,36 +758,161 @@ const apiService = {
             clearTimeout(timeoutId);
 
             if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
+                const errorData = await response.json().catch(() => ({}));
+                throw new Error(errorData.error?.message || `HTTP error! status: ${response.status}`);
             }
 
             const data = await response.json();
 
-            // 解析响应
-            const choice = data.choices[0];
-            const messageContent = choice.message.content;
-            const images = [];
+            // 根据 API 格式解析响应
+            const resultImages = [];
+            let hasError = false;
 
-            // 提取图像数据并转换为Blob URL，但保留原始base64数据
-            if (choice.message.images) {
-                choice.message.images.forEach(img => {
-                    // 确保原始数据是base64格式
-                    const originalBase64 = img.image_url.url;
-                    const blobUrl = utils.base64ToBlobUrl(originalBase64);
-                    images.push(blobUrl);
+            if (apiFormat === 'openai') {
+                // 解析 OpenAI Chat Completions 响应
+                if (data.choices && Array.isArray(data.choices)) {
+                    data.choices.forEach(choice => {
+                        const content = choice.message?.content;
+                        if (content) {
+                            // 尝试从 content 中提取图像
+                            const extractedImages = this.extractImagesFromContent(content);
+                            resultImages.push(...extractedImages);
+                        }
                     });
                 }
+            } else {
+                // 解析原始 API 响应（OpenAI 图像生成 API 格式）
+                if (data.data && Array.isArray(data.data)) {
+                    data.data.forEach(item => {
+                        if (item.b64_json) {
+                            // 检测 API 返回的错误标记
+                            if (item.b64_json === 'error' || item.b64_json === 'Error') {
+                                hasError = true;
+                                return;
+                            }
+                            // base64 格式响应
+                            const base64Data = `data:image/png;base64,${item.b64_json}`;
+                            const blobUrl = utils.base64ToBlobUrl(base64Data);
+                            resultImages.push(blobUrl);
+                        } else if (item.url) {
+                            // 检测 URL 格式的错误标记
+                            if (item.url === 'error' || item.url === 'Error') {
+                                hasError = true;
+                                return;
+                            }
+                            // URL 格式响应
+                            resultImages.push(item.url);
+                        }
+                    });
+                }
+            }
+
+            // 如果检测到错误标记，抛出错误以触发重试
+            if (hasError) {
+                throw new Error('API 返回错误标记，需要重试');
+            }
 
             return {
                 success: true,
-                content: messageContent,
-                images: images,
-                usage: data.usage
+                content: `已生成 ${resultImages.length} 张图像`,
+                images: resultImages,
+                usage: data.usage || null
             };
         } catch (error) {
             clearTimeout(timeoutId);
             throw error;
         }
+    },
+
+    // 从 OpenAI Chat 响应内容中提取图像
+    extractImagesFromContent: function(content) {
+        const images = [];
+
+        // 如果 content 是字符串，尝试解析
+        if (typeof content === 'string') {
+            // 优先匹配 Markdown 图片语法 ![alt](url)
+            const markdownImageRegex = /!\[[^\]]*\]\(([^)]+)\)/g;
+            let mdMatch;
+            while ((mdMatch = markdownImageRegex.exec(content)) !== null) {
+                const url = mdMatch[1].trim();
+                if (url && !images.includes(url)) {
+                    images.push(url);
+                }
+            }
+
+            // 尝试匹配 base64 图像数据
+            const base64Regex = /data:image\/[a-zA-Z]+;base64,[A-Za-z0-9+/=]+/g;
+            const base64Matches = content.match(base64Regex);
+            if (base64Matches) {
+                base64Matches.forEach(match => {
+                    if (!images.includes(match)) {
+                        const blobUrl = utils.base64ToBlobUrl(match);
+                        images.push(blobUrl);
+                    }
+                });
+            }
+
+            // 尝试匹配通用图像 URL（放宽限制，支持无扩展名的签名URL）
+            const urlRegex = /https?:\/\/[^\s"'<>\)]+/gi;
+            const urlMatches = content.match(urlRegex);
+            if (urlMatches) {
+                urlMatches.forEach(url => {
+                    // 清理 URL 末尾可能的标点符号
+                    const cleanUrl = url.replace(/[.,;:!?]+$/, '');
+                    // 检查是否像图像 URL（包含常见图像关键词或扩展名）
+                    const isImageUrl = /\.(png|jpg|jpeg|gif|webp|bmp|svg)(\?|$)/i.test(cleanUrl) ||
+                                       /image|img|photo|picture|generated|upload/i.test(cleanUrl);
+                    if (isImageUrl && !images.includes(cleanUrl)) {
+                        images.push(cleanUrl);
+                    }
+                });
+            }
+
+            // 尝试解析 JSON 格式的内容（包括 Markdown 代码块中的 JSON）
+            let jsonStr = content;
+            // 尝试提取 Markdown 代码块中的 JSON
+            const codeBlockMatch = content.match(/```(?:json)?\s*([\s\S]*?)```/);
+            if (codeBlockMatch) {
+                jsonStr = codeBlockMatch[1].trim();
+            }
+            try {
+                const jsonContent = JSON.parse(jsonStr);
+                if (jsonContent.url && !images.includes(jsonContent.url)) {
+                    images.push(jsonContent.url);
+                }
+                if (jsonContent.b64_json) {
+                    const base64Data = `data:image/png;base64,${jsonContent.b64_json}`;
+                    const blobUrl = utils.base64ToBlobUrl(base64Data);
+                    images.push(blobUrl);
+                }
+                if (Array.isArray(jsonContent.data)) {
+                    jsonContent.data.forEach(item => {
+                        if (item.url && !images.includes(item.url)) images.push(item.url);
+                        if (item.b64_json) {
+                            const base64Data = `data:image/png;base64,${item.b64_json}`;
+                            const blobUrl = utils.base64ToBlobUrl(base64Data);
+                            images.push(blobUrl);
+                        }
+                    });
+                }
+            } catch (e) {
+                // 不是 JSON 格式，忽略
+            }
+        } else if (Array.isArray(content)) {
+            // 处理多模态内容数组
+            content.forEach(part => {
+                if (part.type === 'image_url' && part.image_url?.url) {
+                    images.push(part.image_url.url);
+                }
+                // 处理 text 类型中可能包含的图像
+                if (part.type === 'text' && part.text) {
+                    const textImages = this.extractImagesFromContent(part.text);
+                    images.push(...textImages);
+                }
+            });
+        }
+
+        return images;
     }
 };
 
@@ -1485,6 +1630,10 @@ const uiController = {
     // 显示图像预览
     displayImagePreview: function(imageData) {
         const preview = document.getElementById('imagePreview');
+        const placeholderContainer = preview.querySelector('.col-12.d-flex');
+        if (placeholderContainer) {
+            placeholderContainer.remove();
+        }
         
         // 确保图像数据是Blob URL用于显示，但保持原始数据用于其他操作
         let displayUrl;
@@ -1498,19 +1647,25 @@ const uiController = {
             displayUrl = imageData.data;
         }
         
-        preview.innerHTML = `
-            <div class="card h-100">
-                <img src="${displayUrl}" class="card-img-top image-preview h-75" alt="${imageData.name}" loading="lazy" style="object-fit: contain;">
+        const wrapper = document.createElement('div');
+        wrapper.className = 'col-md-4 mb-3';
+        wrapper.dataset.imageId = imageData.id; // Store imageId here
+
+        wrapper.innerHTML = `
+            <div class="card h-100 uploaded-image-card">
+                <img src="${displayUrl}" class="card-img-top image-preview" alt="${imageData.name}" loading="lazy" style="object-fit: contain; height: 100px;">
                 <div class="card-body p-2">
                     <div class="d-flex justify-content-between align-items-center">
-                        <small class="text-muted">${utils.formatFileSize(imageData.size)}</small>
+                        <small class="text-muted text-truncate" title="${imageData.name}">${imageData.name}</small>
                         <button class="btn btn-sm btn-outline-danger" onclick="app.removeImage(${imageData.id})" title="删除">
                             <i class="fas fa-trash"></i>
                         </button>
                     </div>
+                     <small class="text-muted">${utils.formatFileSize(imageData.size)}</small>
                 </div>
             </div>
         `;
+        preview.appendChild(wrapper);
     },
 
     // 保存聊天历史 - 新增消息时调用
@@ -1564,9 +1719,11 @@ const uiController = {
             // 更新UI
             document.getElementById('apiKey').value = currentSettings.apiKey;
             document.getElementById('baseUrl').value = currentSettings.baseUrl;
+            document.getElementById('apiFormat').value = currentSettings.apiFormat || 'raw';
             document.getElementById('model').value = currentSettings.model;
             document.getElementById('timeout').value = currentSettings.timeout;
             document.getElementById('proxy').value = currentSettings.proxy;
+            document.getElementById('responseFormat').value = currentSettings.responseFormat || 'b64_json';
 
             // 加载聊天历史
             const indexedChatHistory = await indexedDBStorage.getChatHistory();
@@ -1742,9 +1899,11 @@ const uiController = {
         try {
             currentSettings.apiKey = document.getElementById('apiKey').value;
             currentSettings.baseUrl = document.getElementById('baseUrl').value;
+            currentSettings.apiFormat = document.getElementById('apiFormat').value;
             currentSettings.model = document.getElementById('model').value;
             currentSettings.timeout = parseInt(document.getElementById('timeout').value);
             currentSettings.proxy = document.getElementById('proxy').value;
+            currentSettings.responseFormat = document.getElementById('responseFormat').value;
 
             const saved = await indexedDBStorage.saveSettings(currentSettings);
             if (!saved) {
@@ -1783,11 +1942,12 @@ const fileHandler = {
 
     // 处理文件
     handleFiles: function(files) {
-        const preview = document.getElementById('imagePreview');
-        preview.innerHTML = '';
+        if (uploadedImages.length + files.length > CONFIG.MAX_FILES_PER_UPLOAD) {
+            utils.showNotification(`最多只能上传 ${CONFIG.MAX_FILES_PER_UPLOAD} 张图片。`, 'warning');
+            return;
+        }
 
-        // 限制文件数量
-        const filesToProcess = Array.from(files).slice(0, CONFIG.MAX_FILES_PER_UPLOAD);
+        const filesToProcess = Array.from(files);
         
         filesToProcess.forEach(file => {
             try {
@@ -1844,7 +2004,7 @@ const app = {
         // 初始化"全部下载"按钮的可见性
         uiController.updateDownloadAllButtonVisibility();
         
-        console.log('OpenRouter Image Generator initialized');
+        console.log('Grok Image Generator initialized');
     },
 
     // 初始化事件监听器
@@ -1877,7 +2037,7 @@ const app = {
         }
 
         // 设置变化时自动保存
-        const inputs = ['apiKey', 'baseUrl', 'model', 'timeout', 'proxy'];
+        const inputs = ['apiKey', 'baseUrl', 'apiFormat', 'model', 'timeout', 'proxy'];
         inputs.forEach(id => {
             document.getElementById(id).addEventListener('change', utils.debounce(() => {
                 uiController.saveSettings();
@@ -1894,6 +2054,7 @@ const app = {
     testConnection: async function() {
         const apiKey = document.getElementById('apiKey').value;
         const baseUrl = document.getElementById('baseUrl').value;
+        const apiFormat = document.getElementById('apiFormat').value;
 
         if (!apiKey) {
             utils.showNotification(ERROR_MESSAGES.NO_API_KEY, 'warning');
@@ -1903,7 +2064,7 @@ const app = {
         uiController.showLoading(true);
 
         try {
-            const result = await apiService.testConnection(apiKey, baseUrl);
+            const result = await apiService.testConnection(apiKey, baseUrl, apiFormat);
             
             if (result.success) {
                 uiController.updateConnectionStatus(true);
@@ -1957,6 +2118,21 @@ const app = {
             return;
         }
 
+        // 检查 API 地址是否已配置
+        const baseUrl = document.getElementById('baseUrl').value;
+        if (!baseUrl) {
+            utils.showNotification(ERROR_MESSAGES.NO_BASE_URL, 'warning');
+            return;
+        }
+
+        // 检查是否有上传的图像，如果有则提示不支持
+        if (uploadedImages && uploadedImages.length > 0) {
+            utils.showNotification(ERROR_MESSAGES.IMAGE_EDIT_NOT_SUPPORTED, 'warning');
+            // 清空上传的图像
+            uploadedImages = [];
+            uiController.updateUploadedImagesDisplay();
+        }
+
         // 隐藏传统加载状态，使用占位图像代替
         uiController.hideTraditionalLoading();
         
@@ -2042,7 +2218,7 @@ const app = {
         }
         
         // 等待所有请求完成
-        await Promise.all(promises);
+        await Promise.allSettled(promises);
         
         // 检查存储空间
         await utils.checkAndCleanStorage();
@@ -2065,7 +2241,7 @@ const app = {
 
     // 带重试机制的图像生成方法
     generateImageWithRetry: async function(message, images, settings, imageIndex, totalImages) {
-        const maxRetries = 5;
+        const maxRetries = 15;
         let retryCount = 0;
         
         while (retryCount <= maxRetries) {
@@ -2123,11 +2299,13 @@ const app = {
     removeImage: function(imageId) {
         uploadedImages = uploadedImages.filter(img => img.id !== imageId);
         const preview = document.getElementById('imagePreview');
+        const imageElement = preview.querySelector(`[data-image-id="${imageId}"]`);
+        if (imageElement) {
+            imageElement.remove();
+        }
+
         if (uploadedImages.length === 0) {
-            preview.innerHTML = '<p class="text-muted">未选择图像</p>';
-        } else {
-            preview.innerHTML = '';
-            uploadedImages.forEach(img => uiController.displayImagePreview(img));
+            preview.innerHTML = '<div class="col-12 d-flex h-100 align-items-center justify-content-center"><p class="text-muted">未选择图像</p></div>';
         }
     },
 

styles.css

@@ -60,6 +60,9 @@ body {
     border: none;
 }
 
+.uploaded-image-card{
+    max-width: 10rem;
+}
 /* 表单控件样式 */
 .form-control, .form-select {
     border-radius: 10px;