# ai-api-hub **Repository Path**: pldz/ai-api-hub ## Basic Information - **Project Name**: ai-api-hub - **Description**: No description available - **Primary Language**: Unknown - **License**: Apache-2.0 - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-04-25 - **Last Updated**: 2026-08-26 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # ๐Ÿš€ AI API HUB > One interface, every model. Your API keys, your data, your rules. Last reviewed: `2026-08-26` **AI API HUB** is a unified chat, image, and video generation frontend for multiple AI providers. The application runs in your browser with no required backend or telemetry; an optional user-hosted endpoint can store remote Chat snapshots. --- ## ๐Ÿค– What Models Are We Talking About? This is why you're here, right? Here's the current lineup: ### ๐Ÿ’ฌ Chat Models | Model | Providers | Chat Endpoint | Vision | Web Search | Vibe Check | | --------------------- | -------------------- | ------------------- | ------ | -------------- | ---------------------------------------------------------- | | **GPT-5.6 Sol** | OpenAI ยท Azure | `/responses` | โœ… | โœ… | Flagship model for complex professional work; API alias: `gpt-5.6` | | **GPT-5.6 Terra** | OpenAI ยท Azure | `/responses` | โœ… | โœ… | Balanced intelligence and cost for everyday work | | **GPT-5.6 Luna** | OpenAI ยท Azure | `/responses` | โœ… | โœ… | Fast, cost-efficient model for high-volume workloads | | **GPT-5.5** | OpenAI ยท Azure | `/responses` | โœ… | โœ… | The latest and greatest. Expensive, but worth every token | | **GPT-5.4** | OpenAI ยท Azure | `/responses` | โœ… | โœ… | The sweet spot between brains and speed | | **GPT-4.1** | OpenAI ยท Azure | `/responses` | โœ… | โœ… | Battle-tested veteran, still shipping | | **GPT-4o** | OpenAI ยท Azure | `/responses` | โœ… | โœ… | Lightweight & fastโ€”your daily driver | | **DeepSeek V4 Pro** | DeepSeek ยท DashScope | `/chat/completions` | โŒ | โœ… (DashScope) | 1M token context window. Absolute unit for Chinese | | **DeepSeek V4 Flash** | DeepSeek ยท DashScope | `/chat/completions` | โŒ | โœ… (DashScope) | Pro's speedy siblingโ€”cheap and cheerful | | **Qwen Plus** | DashScope | `/chat/completions` | โŒ | โœ… | General-purpose Qwen text chat | | **Qwen 3.7 Max** | DashScope | `/chat/completions` | โŒ | โœ… | Alibaba's flagship. Chinese comprehension on another level | ### ๐ŸŽจ Image Generation | Model | Provider | Image-to-Image | Inpainting | Output Sizes | | ---------------------- | -------------- | -------------- | ---------- | -------------------------------- | | **GPT-Image-2** | OpenAI ยท Azure | โœ… | โœ… | Up to 3840ร—2160 (8 sizes + auto) | | **Qwen-Image-2.0 Pro** | DashScope | โœ… | โŒ | Up to 3840ร—2160 (7 sizes) | ### ๐ŸŽฌ Video Generation | Model | Provider | Input | Resolution | Description | | -------------------- | --------- | ----------------- | ------------ | ------------------------------------------------- | | **Wan2.7 I2V** | DashScope | Image + Audio | 720P ยท 1080P | Image-to-Video: animate a still image into a clip | | **Wan2.7 T2V** | DashScope | Text only | 720P ยท 1080P | Text-to-Video: generate video from prompt alone | | **Wan2.7 R2V** | DashScope | Image/Audio/Video | 720P ยท 1080P | Reference-to-Video: multi-modal guided generation | | **Wan2.7 VideoEdit** | DashScope | Image/Audio/Video | 720P ยท 1080P | Video Editing: modify existing video with prompts | > ๐Ÿ’ก **But wait, there's more** โ€” you can add any custom model that speaks OpenAI / DashScope compatible APIs. Running locally? Go for it. Third-party proxy? You do you. --- ## โœจ Features - ๐Ÿ”Œ **Multi-Provider Aggregation** โ€” One UI for OpenAI, Azure, DeepSeek, and DashScope. - ๐ŸŒŠ **Streaming (SSE)** โ€” Real-time typewriter responses with abort support. Impatient? Hit stop anytime. - ๐ŸŽจ **Image Generation & Editing** โ€” Text-to-image, image-to-image, plus a built-in brush mask editor for surgical edits. - ๐ŸŒ **Web Search** โ€” Supported models can search the web mid-conversation. Yes, just like that other chatbot. - ๐Ÿ“Ž **Chat File Attachments** โ€” Upload text, PDF, DOCX, and XLSX files into chat; they render as compact attachment cards, support inline preview plus direct download, and round-trip through conversation export/import. - ๐Ÿ“‹ **Prompt Templates** โ€” Write once, reuse forever. Stop copy-pasting system instructions like a caveman. - ๐Ÿ’ฌ **Conversation Management** โ€” Create, rename, delete, batch operations. Sidebar shows live runtime status per session. - ๐Ÿ“Š **Token Tracking** โ€” Input/output tokens per turn, normalized across providers. Know where your credits are going. - ๐ŸŽจ **11 Themes** โ€” Light ยท Dark ยท Cupcake ยท Acid ยท Lemonade ยท Night ยท Coffee ยท Winter ยท Dim ยท Nord ยท Sunset. - ๐ŸŒ **i18n** โ€” English & Simplified Chinese, auto-detected from your browser. Switch anytime. - ๐Ÿ“ฆ **Config Import/Export** โ€” URL query params, file upload, or paste JSON. One-click export to back everything up. - โ˜๏ธ **Remote Chat Snapshots** โ€” Save every Chat conversation and attachment as one remote file, then merge it on another browser by stable conversation ID. - ๐Ÿ”’ **Local-First Storage** โ€” Models and workspace data live in `localStorage` + `IndexedDB`. Remote snapshots are opt-in and never include model configuration or API keys. --- ## ๐Ÿ—๏ธ Tech Stack | Category | Stack | | --------- | ----------------------------------------------------- | | Framework | Vue 3 (Composition API + SFC) | | Language | TypeScript | | Build | Vite 6 | | State | Vuex 4 | | Routing | Vue Router 4 (Hash mode) | | i18n | vue-i18n 9 | | UI | Scoped SCSS + app-owned design primitives | | Markdown | markdown-it 14 + highlight.js 11 | | Files | PDF.js CDN runtime, mammoth, xlsx | | Streaming | Native Fetch API + ReadableStream (custom SSE parser) | --- ## ๐Ÿš€ Getting Started ### Prerequisites - Node.js >= 18 - npm >= 9 ### Quick Start ```bash npm install # Install dependencies npm run dev # Start dev server -> http://127.0.0.1:20090 ``` ### Other Commands ```bash npm run build # Production build -> dist/ npm run preview # Preview production build npm run typecheck # TypeScript type check ``` --- ## Build & Runtime Notes - The UI no longer depends on DaisyUI or Tailwind CSS. Shared theme tokens live in `src/assets/style/theme.scss`, and app-owned controls live in `src/assets/style/ui-primitives.scss`. - PDF text extraction loads both PDF.js `pdf.mjs` and `pdf.worker.min.mjs` at runtime from the locked version on `registry.npmmirror.com`. This keeps `pdfjs-dist` out of `package.json` and keeps PDF.js assets out of the local bundle. Offline or private-network deployments should self-host those two files or restore a local `pdfjs-dist` dependency. - DOCX and XLSX parsing stay local and are loaded only when needed through dynamic imports. --- ## ๐ŸŽฎ How to Use 1. Open the app, click **"Enter Workspace"**. 2. Go to **Settings -> Chat Models**, plug in your API key and endpoint. 3. Create a new conversation and start chatting. 4. Want images? Add an image model in **Settings -> Image Models**, then switch to the **Image** tab. ### โ˜๏ธ Remote Chat Snapshots Under **Settings โ†’ Application Settings**, open **Remote Chat Snapshot**, enter the complete snapshot URL and cache token, then use: - **Save all chats** to overwrite the single remote snapshot. - **Merge remote snapshot** to replace matching conversation IDs, add new IDs, and keep other local conversations unchanged. The remote URL and token are saved automatically and included in Settings JSON exports. An older Settings JSON without these fields defaults both to empty. The client uses `PUT` and `GET` against the exact same configured URL. See [Remote chat snapshots](docs/remote-chat-snapshot.md) for the protocol and security notes, or run the [Python demo server](docs/chat-snapshot-demo/README.md). ### ๐Ÿ”— URL-Based Config Import Encode your config as Base64 JSON or host it somewhere, then pass it as a URL paramโ€”perfect for incognito mode: ```txt http://127.0.0.1:20090/#/?config=BASE64_ENCODED_JSON http://127.0.0.1:20090/#/?config=https://example.com/my-config.json ``` --- ## ๐Ÿ“ Project Structure ```txt src/ โ”œโ”€โ”€ ai-capability/ # AI provider abstraction layer (Template Method pattern) โ”‚ โ”œโ”€โ”€ common/ # Shared: BaseChatClient, BaseImageClient, SSE transport, usage โ”‚ โ”œโ”€โ”€ chat/ # Chat capability โ”‚ โ”‚ โ”œโ”€โ”€ providers/ # Clients: OpenAI, Azure, DeepSeek, DashScope โ”‚ โ”‚ โ”œโ”€โ”€ executor.ts # Route -> factory -> ChatExecutor โ”‚ โ”‚ โ””โ”€โ”€ gateway.ts # Public API (chat, streaming, abort) โ”‚ โ”œโ”€โ”€ image/ # Image capability โ”‚ โ”‚ โ”œโ”€โ”€ providers/ # Clients: OpenAI, Azure, DashScope โ”‚ โ”‚ โ”œโ”€โ”€ executor.ts # Route -> factory -> ImageExecutor โ”‚ โ”‚ โ””โ”€โ”€ gateway.ts # Public API (generate, edit) โ”‚ โ””โ”€โ”€ video/ # Video capability โ”‚ โ”œโ”€โ”€ providers/ # Clients: DashScope โ”‚ โ”œโ”€โ”€ executor.ts # Route -> factory -> VideoExecutor โ”‚ โ””โ”€โ”€ gateway.ts # Public API (generate video) โ”œโ”€โ”€ components/ # Reusable Vue components โ”œโ”€โ”€ constants/ # App metadata, model catalog, parameter presets โ”œโ”€โ”€ i18n/ # EN & ZH dictionaries โ”œโ”€โ”€ models/ # Data normalization & API param builders โ”œโ”€โ”€ router/ # Hash-based routes โ”œโ”€โ”€ services/ # Business logic (settings, conversations, images, markdown) โ”œโ”€โ”€ store/ # Vuex state management โ”œโ”€โ”€ types/ # TypeScript type definitions โ””โ”€โ”€ views/ # Page components (chat, image, settings, layout) docs/ โ””โ”€โ”€ remote-chat-snapshot.md # Remote snapshot behavior and server contract ``` --- ## โš ๏ธ Video Generation Supported by Nginx Proxy Add the DashScope reverse proxy inside the same `server` block and scope it under the `/io/llm/` route only. Requests to `/io/llm/ai-api-hub-dashscope-proxy/` will be forwarded to `https://dashscope.aliyuncs.com/`, while the `/io/llm/` SPA will continue to be served from `/usr/share/nginx/templates/ai-api-hub/`. Make sure the proxy `location` is placed before the static `/io/llm/` location so Nginx matches the proxy rule first. In the frontend, use `/io/llm/ai-api-hub-dashscope-proxy/...` as the API base path instead of `/ai-api-hub-dashscope-proxy/...`. This keeps the DashScope proxy limited to the LLM demo route and prevents it from affecting other site paths. The nginx configuration should look like this: ```nginx location ^~ /io/llm/ai-api-hub-dashscope-proxy/ { proxy_pass https://dashscope.aliyuncs.com/; proxy_http_version 1.1; proxy_ssl_server_name on; proxy_set_header Host dashscope.aliyuncs.com; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # Proxy Authorization, X-DashScope-Async... proxy_pass_request_headers on; # If support stream output. proxy_buffering off; proxy_cache off; proxy_read_timeout 300s; proxy_send_timeout 300s; } ``` --- ## ๐Ÿ“„ License [MIT](LICENSE) ---

Made with โค๏ธ and probably too much โ˜•