mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-10-10 11:39:50 +08:00
Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
4729808d7d |
@@ -1,98 +1,121 @@
|
||||
<div align="center">
|
||||
|
||||
# Next AI Draw.io
|
||||
|
||||
**Draw and edit draw.io diagrams by chatting with an AI.**
|
||||
<div align="center">
|
||||
|
||||
**AI-Powered Diagram Creation Tool - Chat, Draw, Visualize**
|
||||
|
||||
English | [中文](./docs/cn/README_CN.md) | [日本語](./docs/ja/README_JA.md)
|
||||
|
||||
[](https://next-ai-drawio.jiang.jp/)
|
||||
|
||||
[](https://opensource.org/licenses/Apache-2.0)
|
||||
[](https://nextjs.org/)
|
||||
[](https://react.dev/)
|
||||
[](https://github.com/sponsors/DayuanJiang)
|
||||
|
||||
[**Live Demo**](https://next-ai-drawio.jiang.jp/) · [**Desktop App**](https://github.com/DayuanJiang/next-ai-draw-io/releases) · [**MCP Server**](#in-your-ai-agent-mcp)
|
||||
[](https://next-ai-drawio.jiang.jp/)
|
||||
|
||||
</div>
|
||||
|
||||
https://github.com/user-attachments/assets/66b9f12f-219f-4d62-acc0-0725e6850eec
|
||||
A Next.js web application that integrates AI capabilities with draw.io diagrams. Create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.
|
||||
|
||||
Describe a diagram in a sentence and the AI draws it on a real draw.io canvas. Edit it by hand like any draw.io file, or select a few shapes and tell the AI what to change. Every AI change is a version you can compare, restore or undo, and the result exports as `.drawio`, `.png` or `.svg`.
|
||||
> Note: Thanks to <img src="https://raw.githubusercontent.com/DayuanJiang/next-ai-draw-io/main/public/doubao-color.png" alt="" height="20" /> [ByteDance Doubao](https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio) sponsorship, the demo site now uses the powerful glm-4.7 model!
|
||||
|
||||
Available as a web app, a desktop app for Windows, macOS and Linux, and an MCP server for AI agents such as Claude Code, Cursor and VS Code.
|
||||
<p align="center">
|
||||
<a href="https://www.atlascloud.ai/?utm_source=github&utm_medium=link&utm_campaign=next-ai-draw-io">
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="./public/atlas-cloud-logo-white.svg">
|
||||
<img src="./public/atlas-cloud-logo.svg" alt="Atlas Cloud" width="200">
|
||||
</picture>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
## Highlights
|
||||
> 🎁 Thanks to **[Atlas Cloud](https://www.atlascloud.ai/?utm_source=github&utm_medium=link&utm_campaign=next-ai-draw-io)** for sponsoring next-ai-draw-io. Its OpenAI-compatible API gives diagram workflows one provider connection for DeepSeek, Qwen, GLM, Kimi, MiniMax, and more. Budget-friendly access is available through the [Coding Plan](https://www.atlascloud.ai/console/coding-plan).
|
||||
|
||||
**Draw**
|
||||
|
||||
- Architecture diagrams, flowcharts, sequence diagrams and more from one sentence, with built-in AWS, Azure, GCP and Kubernetes icon libraries
|
||||
- Connectors can carry a flowing animation
|
||||
- Upload a screenshot or a sketch and the AI redraws it; upload PDF, Markdown, code and other text files and get a diagram of their content
|
||||
https://github.com/user-attachments/assets/9d60a3e8-4a1c-4b5e-acbb-26af2d3eabd1
|
||||
|
||||
**Edit**
|
||||
|
||||
- Edit by chat: changes stream onto the canvas and the shapes the AI just changed are highlighted
|
||||
- Ask about a selection: select shapes on the canvas and the AI changes only those
|
||||
- Versions and undo: every AI change is a version card with a thumbnail; compare it with the canvas, restore it or undo it, and Ctrl+Z on the canvas also takes back an AI change in one step
|
||||
- It is a normal draw.io diagram: double-click to rename, drag, restyle, use several pages, and export as `.drawio`, `.png`, `.svg` or `.drawio.svg` at any time
|
||||
|
||||
**Use**
|
||||
|
||||
- 24 model providers; enter your own API key in the browser and it stays on your machine
|
||||
- Models that reason show their thinking
|
||||
- Dark mode; the interface is available in English, Simplified Chinese, Traditional Chinese and Japanese
|
||||
## Table of Contents
|
||||
- [Next AI Draw.io](#next-ai-drawio)
|
||||
- [Table of Contents](#table-of-contents)
|
||||
- [Examples](#examples)
|
||||
- [Features](#features)
|
||||
- [MCP Server](#mcp-server)
|
||||
- [Claude Code CLI](#claude-code-cli)
|
||||
- [Getting Started](#getting-started)
|
||||
- [Try it Online](#try-it-online)
|
||||
- [Desktop Application](#desktop-application)
|
||||
- [Run with Docker](#run-with-docker)
|
||||
- [Installation](#installation)
|
||||
- [Deployment](#deployment)
|
||||
- [Deploy to EdgeOne Pages](#deploy-to-edgeone-pages)
|
||||
- [Deploy on Vercel](#deploy-on-vercel)
|
||||
- [Deploy on Cloudflare Workers](#deploy-on-cloudflare-workers)
|
||||
- [Multi-Provider Support](#multi-provider-support)
|
||||
- [Server-Side Multi-Model Configuration](#server-side-multi-model-configuration)
|
||||
- [Admin Panel](#admin-panel)
|
||||
- [How It Works](#how-it-works)
|
||||
- [Support \& Contact](#support--contact)
|
||||
- [FAQ](#faq)
|
||||
- [Star History](#star-history)
|
||||
|
||||
## Examples
|
||||
|
||||
Here are some example prompts and their generated diagrams:
|
||||
|
||||
<div align="center">
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<td colspan="2" valign="top" align="center">
|
||||
<strong>Transformer architecture with animated connectors</strong><br />
|
||||
<p><strong>Prompt:</strong> Give me a <strong>animated connector</strong> diagram of transformer's architecture.</p>
|
||||
<img src="./public/animated_connectors.svg" alt="Transformer architecture with animated connectors" width="440" />
|
||||
<strong>Animated transformer connectors</strong><br />
|
||||
<p><strong>Prompt:</strong> Give me a **animated connector** diagram of transformer's architecture.</p>
|
||||
<img src="./public/animated_connectors.svg" alt="Transformer Architecture with Animated Connectors" width="480" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top">
|
||||
<strong>RAG architecture</strong><br />
|
||||
<p><strong>Prompt:</strong> Generate a RAG architecture diagram for <strong>chat application</strong>. Use connected diagram for data ingestion</p>
|
||||
<img src="./public/rag_prod.svg" alt="RAG architecture diagram" width="400" />
|
||||
<strong>RAG Technique Diagram</strong><br />
|
||||
<p><strong>Prompt:</strong> Generate a RAG architecture diagram for **chat application**. Use connected diagram for data ingestion</p>
|
||||
<img src="./public/rag_prod.svg" alt="RAG Architecture Diagram" width="480" />
|
||||
</td>
|
||||
<td width="50%" valign="top">
|
||||
<strong>Authentication with React and AWS</strong><br />
|
||||
<p><strong>Prompt:</strong> Generate authentication process using React with <strong>AWS</strong>. Use Serverless architecture.</p>
|
||||
<img src="./public/auth.svg" alt="Authentication architecture diagram" width="400" />
|
||||
<strong>Authentication using React and AWS</strong><br />
|
||||
<p><strong>Prompt:</strong> Generate authentication process using React with **AWS**. Use Serverless architecture.</p>
|
||||
<img src="./public/auth.svg" alt="Authentication Architecture Diagram" width="480" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top">
|
||||
<strong>Open Innovation model</strong><br />
|
||||
<strong>Open Innovation</strong><br />
|
||||
<p><strong>Prompt:</strong> Create visualization of Henry Chesbrough's Open Innovation model.</p>
|
||||
<img src="./public/inno.svg" alt="Open Innovation diagram" width="400" />
|
||||
<img src="./public/inno.svg" alt="Open Innovation Diagram" width="480" />
|
||||
</td>
|
||||
<td width="50%" valign="top">
|
||||
<strong>Cat sketch</strong><br />
|
||||
<p><strong>Prompt:</strong> Draw a cute cat for me.</p>
|
||||
<img src="./public/cat_demo.svg" alt="Cat drawing" width="200" />
|
||||
<img src="./public/cat_demo.svg" alt="Cat Drawing" width="240" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
## Use it
|
||||
## Features
|
||||
|
||||
### Online demo
|
||||
- **LLM-Powered Diagram Creation**: Leverage Large Language Models to create and manipulate draw.io diagrams directly through natural language commands
|
||||
- **Image-Based Diagram Replication**: Upload existing diagrams or images and have the AI replicate and enhance them automatically
|
||||
- **PDF & Text File Upload**: Upload PDF documents and text files to extract content and generate diagrams from existing documents
|
||||
- **AI Reasoning Display**: View the AI's thinking process for supported models (OpenAI o1/o3, Gemini, Claude, etc.)
|
||||
- **Versions and Undo**: Every AI change shows up in the chat as a version with a thumbnail. Compare it with the canvas, restore it, or undo it; Ctrl+Z on the canvas also takes back an AI change in one step. Shapes the AI just changed are highlighted.
|
||||
- **Ask About a Selection**: Select shapes on the canvas and ask the AI to change just those.
|
||||
- **Interactive Chat Interface**: Communicate with AI to refine your diagrams in real-time
|
||||
- **Cloud Architecture Diagram Support**: Specialized support for generating cloud architecture diagrams (AWS, GCP, Azure)
|
||||
- **Animated Connectors**: Create dynamic and animated connectors between diagram elements for better visualization
|
||||
|
||||
Open [next-ai-drawio.jiang.jp](https://next-ai-drawio.jiang.jp/), nothing to install. The demo has a usage limit; click the settings icon in the chat panel and enter your own provider and API key to lift it. The key stays in your browser and is never sent to the server for storage.
|
||||
## MCP Server
|
||||
|
||||
### Desktop app
|
||||
|
||||
Download the Windows, macOS or Linux installer from the [Releases page](https://github.com/DayuanJiang/next-ai-draw-io/releases).
|
||||
|
||||
### In your AI agent (MCP)
|
||||
|
||||
Through MCP (Model Context Protocol, the protocol AI agents use to call outside tools), Claude Desktop, Cursor, VS Code and others can draw draw.io diagrams directly. Add this to your client's MCP configuration:
|
||||
Use Next AI Draw.io with AI agents like Claude Desktop, Cursor, and VS Code via MCP (Model Context Protocol).
|
||||
|
||||
```json
|
||||
{
|
||||
@@ -105,61 +128,165 @@ Through MCP (Model Context Protocol, the protocol AI agents use to call outside
|
||||
}
|
||||
```
|
||||
|
||||
For Claude Code, one command does it:
|
||||
### Claude Code CLI
|
||||
|
||||
```bash
|
||||
claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest
|
||||
```
|
||||
|
||||
Then ask the AI for "a flowchart of user authentication with login, MFA and session management" and the diagram appears in your browser as it is drawn. The MCP server has most of the web app's drawing features:
|
||||
Then ask Claude to create diagrams:
|
||||
> "Create a flowchart showing user authentication with login, MFA, and session management"
|
||||
|
||||
- The same drawing rules and icon libraries (AWS, Azure, GCP, Kubernetes and more)
|
||||
- A screenshot tool, so the AI can look at the rendered diagram and fix it
|
||||
- Version history, multi-page diagrams, and download as `.drawio`, `.png`, `.svg` or `.drawio.svg`
|
||||
- Auto-save to `~/.next-ai-drawio/`, so a diagram survives a restart
|
||||
The diagram appears in your browser in real-time!
|
||||
|
||||
See the [MCP server README](./packages/mcp-server/README.md) for VS Code, Cursor and other client configurations.
|
||||
The MCP server includes most of the web app's drawing features:
|
||||
|
||||
## Self-host
|
||||
- The same drawing rules and shape libraries (AWS, Azure, GCP, Kubernetes and more)
|
||||
- A screenshot tool, so the AI can check the rendered diagram and fix it
|
||||
- Version history, multi-page diagrams, and download as `.drawio`, `.png`, `.svg`, or `.drawio.svg`
|
||||
- Auto-save to `~/.next-ai-drawio/`, so you can continue a diagram after a restart
|
||||
|
||||
### Run locally
|
||||
See the [MCP Server README](./packages/mcp-server/README.md) for VS Code, Cursor, and other client configurations.
|
||||
|
||||
## Getting Started
|
||||
|
||||
### Try it Online
|
||||
|
||||
No installation needed! Try the app directly on our demo site:
|
||||
|
||||
[](https://next-ai-drawio.jiang.jp/)
|
||||
|
||||
|
||||
|
||||
> **Bring Your Own API Key**: You can use your own API key to bypass usage limits on the demo site. Click the Settings icon in the chat panel to configure your provider and API key. Your key is stored locally in your browser and is never stored on the server.
|
||||
|
||||
### Desktop Application
|
||||
|
||||
Download the native desktop app for your platform from the [Releases page](https://github.com/DayuanJiang/next-ai-draw-io/releases):
|
||||
|
||||
Supported platforms: Windows, macOS, Linux.
|
||||
|
||||
### Run with Docker
|
||||
|
||||
[Go to Docker Guide](./docs/en/docker.md)
|
||||
|
||||
### Installation
|
||||
|
||||
1. Clone the repository:
|
||||
|
||||
```bash
|
||||
git clone https://github.com/DayuanJiang/next-ai-draw-io
|
||||
cd next-ai-draw-io
|
||||
npm install
|
||||
cp env.example .env.local # add your provider and API key, see "Models and providers" below
|
||||
cp env.example .env.local
|
||||
```
|
||||
|
||||
See the [Provider Configuration Guide](./docs/en/ai-providers.md) for detailed setup instructions for each provider.
|
||||
|
||||
2. Run the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Open [http://localhost:6002](http://localhost:6002).
|
||||
3. Open [http://localhost:6002](http://localhost:6002) in your browser to see the application.
|
||||
|
||||
### One-click deploy
|
||||
## Deployment
|
||||
|
||||
| Platform | How |
|
||||
| --- | --- |
|
||||
| Tencent EdgeOne Pages | [](https://edgeone.ai/pages/new?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io) Deploying there also gives you a [daily free quota for DeepSeek models](https://pages.edgeone.ai/document/edge-ai) |
|
||||
| Vercel | [](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io) Set the same environment variables in the Vercel dashboard as in your `.env.local` |
|
||||
| Cloudflare Workers | [Cloudflare deploy guide](./docs/en/cloudflare-deploy.md) |
|
||||
| Docker | [Docker guide](./docs/en/docker.md) |
|
||||
| Offline or intranet | [Offline deployment](./docs/en/offline-deployment.md) |
|
||||
### Deploy to EdgeOne Pages
|
||||
|
||||
### Models and providers
|
||||
You can deploy with one click using [Tencent EdgeOne Pages](https://pages.edgeone.ai/).
|
||||
|
||||
24 providers are supported: AWS Bedrock (default), OpenAI, Anthropic, Google AI, Google Vertex AI, Azure OpenAI, Ollama, OpenRouter, AIHubMix, DeepSeek, SiliconFlow, SGLang, Vercel AI Gateway, Tencent EdgeOne, ByteDance Doubao, ModelScope, Zhipu GLM, Qwen, Qiniu, Kimi, MiniMax, Novita, Xiaomi MiMo and Atlas Cloud. The environment variables and notes for each are in the [provider configuration guide](./docs/en/ai-providers.md).
|
||||
Deploy by this button:
|
||||
|
||||
**Which model**: the task is to produce long text in a strict format (draw.io XML), so pick a capable model; small models tend to produce broken diagrams.
|
||||
[](https://edgeone.ai/pages/new?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
|
||||
|
||||
**Several models and the admin panel**: list several model IDs in `AI_MODEL` separated by commas, or configure models from several providers with the `AI_MODELS_CONFIG` environment variable or an `ai-models.json` file, and every user can use them without a key of their own. Set `ADMIN_PASSWORD` and open `/admin` to manage models, access codes, feature switches, observability and quotas from a web page; see the [admin panel guide](./docs/en/admin-panel.md).
|
||||
Check out the [Tencent EdgeOne Pages documentation](https://pages.edgeone.ai/document/deployment-overview) for more details.
|
||||
|
||||
## Support
|
||||
Additionally, deploying through Tencent EdgeOne Pages will also grant you a [daily free quota for DeepSeek models](https://pages.edgeone.ai/document/edge-ai).
|
||||
|
||||
- Questions and ideas: open a [GitHub issue](https://github.com/DayuanJiang/next-ai-draw-io/issues) or email me[at]jiang.jp
|
||||
- Common problems: [FAQ](./docs/en/FAQ.md)
|
||||
- If the project is useful to you, consider [sponsoring](https://github.com/sponsors/DayuanJiang) to help keep the demo site running
|
||||
### Deploy on Vercel
|
||||
|
||||
<div align="center">
|
||||
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
|
||||
|
||||
The easiest way to deploy is using [Vercel](https://vercel.com/new), the creators of Next.js. Be sure to **set the environment variables** in the Vercel dashboard as you did in your local `.env.local` file.
|
||||
|
||||
See the [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||
|
||||
### Deploy on Cloudflare Workers
|
||||
|
||||
[Go to Cloudflare Deploy Guide](./docs/en/cloudflare-deploy.md)
|
||||
|
||||
|
||||
|
||||
## Multi-Provider Support
|
||||
|
||||
- [ByteDance Doubao](https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio)
|
||||
- AWS Bedrock (default)
|
||||
- OpenAI
|
||||
- Anthropic
|
||||
- Google AI
|
||||
- Google Vertex AI
|
||||
- Azure OpenAI
|
||||
- Ollama
|
||||
- OpenRouter
|
||||
- AIHubMix
|
||||
- DeepSeek
|
||||
- SiliconFlow
|
||||
- ModelScope
|
||||
- SGLang
|
||||
- Vercel AI Gateway
|
||||
- [Atlas Cloud](https://www.atlascloud.ai/?utm_source=github&utm_medium=link&utm_campaign=next-ai-draw-io)
|
||||
|
||||
|
||||
All providers except AWS Bedrock and OpenRouter support custom endpoints.
|
||||
|
||||
📖 **[Detailed Provider Configuration Guide](./docs/en/ai-providers.md)** - See setup instructions for each provider.
|
||||
|
||||
### Server-Side Multi-Model Configuration
|
||||
|
||||
Administrators can configure multiple server-side models that are available to all users without requiring personal API keys. Configure via `AI_MODELS_CONFIG` environment variable (JSON string) or `ai-models.json` file. For a single-provider quick setup, list comma-separated model IDs in `AI_MODEL`.
|
||||
|
||||
### Admin Panel
|
||||
|
||||
Set the `ADMIN_PASSWORD` environment variable and visit `/admin` to manage server settings (models, access codes, features, observability, quota) from a web panel instead of hand-editing `.env`.
|
||||
|
||||
📖 **[Admin Panel Guide](./docs/en/admin-panel.md)** — setup, precedence rules, and notes.
|
||||
|
||||
**Model Requirements**: This task requires strong model capabilities for generating long-form text with strict formatting constraints (draw.io XML). Recommended models include Claude Sonnet 4.5, GPT-5.1, Gemini 3 Pro, and DeepSeek V3.2/R1.
|
||||
|
||||
Note that the `claude` series has been trained on draw.io diagrams with cloud architecture logos like AWS, Azure, GCP. So if you want to create cloud architecture diagrams, this is the best choice.
|
||||
|
||||
|
||||
## How It Works
|
||||
|
||||
The application uses the following technologies:
|
||||
|
||||
- **Next.js**: For the frontend framework and routing
|
||||
- **Vercel AI SDK** (`ai` + `@ai-sdk/*`): For streaming AI responses and multi-provider support
|
||||
- **draw.io**: The editor runs from a copy bundled into `public/drawio` (downloaded by `npm run dev` / `npm run build`), so the app can drive it directly
|
||||
|
||||
Diagrams are represented as XML that can be rendered in draw.io. The AI processes your commands and generates or modifies this XML accordingly.
|
||||
|
||||
|
||||
## Support & Contact
|
||||
|
||||
**Special thanks to [ByteDance Doubao](https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio) for sponsoring the API token usage of the demo site!** Register on the ARK platform to get 500K free tokens for all models!
|
||||
|
||||
**Special thanks to [Atlas Cloud](https://www.atlascloud.ai/?utm_source=github&utm_medium=link&utm_campaign=next-ai-draw-io) for sponsoring next-ai-draw-io and supporting its multi-provider ecosystem!** Try its OpenAI-compatible LLM API through the [Atlas Cloud Coding Plan](https://www.atlascloud.ai/console/coding-plan).
|
||||
|
||||
If you find this project useful, please consider [sponsoring](https://github.com/sponsors/DayuanJiang) to help me host the live demo site!
|
||||
|
||||
For support or inquiries, please open an issue on the GitHub repository or contact the maintainer at:
|
||||
|
||||
- Email: me[at]jiang.jp
|
||||
|
||||
## FAQ
|
||||
|
||||
See [FAQ](./docs/en/FAQ.md) for common issues and solutions.
|
||||
|
||||
## Star History
|
||||
|
||||
[](https://www.star-history.com/#DayuanJiang/next-ai-draw-io&type=date&legend=top-left)
|
||||
|
||||
</div>
|
||||
---
|
||||
|
||||
@@ -66,6 +66,54 @@ export default function AboutCN() {
|
||||
<div className="relative mb-8 rounded-2xl bg-gradient-to-br from-amber-50 via-orange-50 to-yellow-50 p-[1px] shadow-lg">
|
||||
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-amber-400 via-orange-400 to-yellow-400 opacity-20" />
|
||||
<div className="relative rounded-2xl bg-white/80 backdrop-blur-sm p-6">
|
||||
{/* Header */}
|
||||
<div className="mb-4">
|
||||
<h3 className="text-lg font-bold text-gray-900 tracking-tight">
|
||||
由字节跳动豆包提供支持
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* Story */}
|
||||
<div className="space-y-3 text-sm text-gray-700 leading-relaxed mb-5">
|
||||
<p>
|
||||
好消息!感谢{" "}
|
||||
<a
|
||||
href="https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-semibold text-blue-600 hover:underline"
|
||||
>
|
||||
字节跳动豆包
|
||||
</a>
|
||||
的慷慨赞助,演示站点现已接入强大的{" "}
|
||||
<span className="font-semibold text-amber-700">
|
||||
glm-4.7
|
||||
</span>{" "}
|
||||
模型,图表生成效果更佳!点击链接注册即可领取{" "}
|
||||
<span className="font-semibold text-amber-700">
|
||||
50万免费Token
|
||||
</span>
|
||||
,适用于所有模型!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Invite Poster */}
|
||||
<div className="text-center mb-5">
|
||||
<a
|
||||
href="https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
src="/volcengine-invite.png"
|
||||
alt="火山引擎方舟 Coding Plan"
|
||||
width={300}
|
||||
height={400}
|
||||
className="mx-auto rounded-lg"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Bring Your Own Key */}
|
||||
<div className="text-center">
|
||||
<h4 className="text-base font-bold text-gray-900 mb-2">
|
||||
@@ -261,7 +309,16 @@ export default function AboutCN() {
|
||||
多提供商支持
|
||||
</h2>
|
||||
<ul className="list-disc pl-6 text-gray-700 space-y-1">
|
||||
<li>字节跳动豆包</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-600 hover:underline"
|
||||
>
|
||||
字节跳动豆包
|
||||
</a>
|
||||
</li>
|
||||
<li>AWS Bedrock(默认)</li>
|
||||
<li>
|
||||
OpenAI / OpenAI兼容API(通过{" "}
|
||||
@@ -286,6 +343,18 @@ export default function AboutCN() {
|
||||
<h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
|
||||
支持与联系
|
||||
</h2>
|
||||
<p className="text-gray-700 mb-4 font-semibold">
|
||||
特别感谢{" "}
|
||||
<a
|
||||
href="https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-600 hover:underline"
|
||||
>
|
||||
字节跳动豆包
|
||||
</a>{" "}
|
||||
为本站提供 API Token 支持!
|
||||
</p>
|
||||
<p className="text-gray-700">
|
||||
如果您觉得这个项目有用,请考虑{" "}
|
||||
<a
|
||||
|
||||
@@ -74,6 +74,37 @@ export default function AboutJA() {
|
||||
<div className="relative mb-8 rounded-2xl bg-gradient-to-br from-amber-50 via-orange-50 to-yellow-50 p-[1px] shadow-lg">
|
||||
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-amber-400 via-orange-400 to-yellow-400 opacity-20" />
|
||||
<div className="relative rounded-2xl bg-white/80 backdrop-blur-sm p-6">
|
||||
{/* Header */}
|
||||
<div className="mb-4">
|
||||
<h3 className="text-lg font-bold text-gray-900 tracking-tight">
|
||||
ByteDance Doubao提供
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* Story */}
|
||||
<div className="space-y-3 text-sm text-gray-700 leading-relaxed mb-5">
|
||||
<p>
|
||||
朗報です!
|
||||
<a
|
||||
href="https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-semibold text-blue-600 hover:underline"
|
||||
>
|
||||
ByteDance Doubao
|
||||
</a>
|
||||
様のご支援により、デモサイトでは強力な{" "}
|
||||
<span className="font-semibold text-amber-700">
|
||||
glm-4.7
|
||||
</span>{" "}
|
||||
モデルを利用できるようになり、より高品質なダイアグラム生成が可能になりました。リンクから登録すると、すべてのモデルで使える{" "}
|
||||
<span className="font-semibold text-amber-700">
|
||||
50万トークン
|
||||
</span>
|
||||
が無料でもらえます!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Bring Your Own Key */}
|
||||
<div className="text-center">
|
||||
<h4 className="text-base font-bold text-gray-900 mb-2">
|
||||
@@ -274,7 +305,16 @@ export default function AboutJA() {
|
||||
マルチプロバイダーサポート
|
||||
</h2>
|
||||
<ul className="list-disc pl-6 text-gray-700 space-y-1">
|
||||
<li>ByteDance Doubao</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-600 hover:underline"
|
||||
>
|
||||
ByteDance Doubao
|
||||
</a>
|
||||
</li>
|
||||
<li>AWS Bedrock(デフォルト)</li>
|
||||
<li>
|
||||
OpenAI / OpenAI互換API(<code>OPENAI_BASE_URL</code>
|
||||
@@ -299,6 +339,18 @@ export default function AboutJA() {
|
||||
<h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
|
||||
サポート&お問い合わせ
|
||||
</h2>
|
||||
<p className="text-gray-700 mb-4 font-semibold">
|
||||
デモサイトのAPIトークン使用を支援してくださった{" "}
|
||||
<a
|
||||
href="https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-600 hover:underline"
|
||||
>
|
||||
ByteDance Doubao
|
||||
</a>{" "}
|
||||
様に、心より感謝申し上げます。
|
||||
</p>
|
||||
<p className="text-gray-700">
|
||||
このプロジェクトが役に立ったら、ライブデモサイトのホスティングを支援するために{" "}
|
||||
<a
|
||||
|
||||
@@ -74,6 +74,39 @@ export default function About() {
|
||||
<div className="relative mb-8 rounded-2xl bg-gradient-to-br from-amber-50 via-orange-50 to-yellow-50 p-[1px] shadow-lg">
|
||||
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-amber-400 via-orange-400 to-yellow-400 opacity-20" />
|
||||
<div className="relative rounded-2xl bg-white/80 backdrop-blur-sm p-6">
|
||||
{/* Header */}
|
||||
<div className="mb-4">
|
||||
<h3 className="text-lg font-bold text-gray-900 tracking-tight">
|
||||
Sponsored by ByteDance Doubao
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* Story */}
|
||||
<div className="space-y-3 text-sm text-gray-700 leading-relaxed mb-5">
|
||||
<p>
|
||||
Great news! Thanks to the generous
|
||||
sponsorship from{" "}
|
||||
<a
|
||||
href="https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="font-semibold text-blue-600 hover:underline"
|
||||
>
|
||||
ByteDance Doubao
|
||||
</a>
|
||||
, the demo site now uses the powerful{" "}
|
||||
<span className="font-semibold text-amber-700">
|
||||
glm-4.7
|
||||
</span>{" "}
|
||||
model for better diagram generation! Sign up
|
||||
via the link to get{" "}
|
||||
<span className="font-semibold text-amber-700">
|
||||
500K free tokens
|
||||
</span>{" "}
|
||||
for all models!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Bring Your Own Key */}
|
||||
<div className="text-center">
|
||||
<h4 className="text-base font-bold text-gray-900 mb-2">
|
||||
@@ -286,7 +319,16 @@ export default function About() {
|
||||
Multi-Provider Support
|
||||
</h2>
|
||||
<ul className="list-disc pl-6 text-gray-700 space-y-1">
|
||||
<li>ByteDance Doubao</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-600 hover:underline"
|
||||
>
|
||||
ByteDance Doubao
|
||||
</a>
|
||||
</li>
|
||||
<li>AWS Bedrock (default)</li>
|
||||
<li>
|
||||
OpenAI / OpenAI-compatible APIs (via{" "}
|
||||
@@ -313,6 +355,18 @@ export default function About() {
|
||||
<h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
|
||||
Support & Contact
|
||||
</h2>
|
||||
<p className="text-gray-700 mb-4 font-semibold">
|
||||
Special thanks to{" "}
|
||||
<a
|
||||
href="https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-600 hover:underline"
|
||||
>
|
||||
ByteDance Doubao
|
||||
</a>{" "}
|
||||
for sponsoring the API token usage of the demo site!
|
||||
</p>
|
||||
<p className="text-gray-700">
|
||||
If you find this project useful, please consider{" "}
|
||||
<a
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import {
|
||||
ChevronDown,
|
||||
Download,
|
||||
FilePlus,
|
||||
MessageSquareDashed,
|
||||
PanelRightClose,
|
||||
Settings,
|
||||
Settings2,
|
||||
SquarePen,
|
||||
} from "lucide-react"
|
||||
import { useRef } from "react"
|
||||
import { DevXmlSimulator } from "@/components/dev-xml-simulator"
|
||||
@@ -139,14 +139,14 @@ export function ChatPanel({
|
||||
disabled={engine.isBusy}
|
||||
data-testid="new-chat-button"
|
||||
>
|
||||
<FilePlus />
|
||||
<SquarePen />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
label={dict.nav.settings}
|
||||
onClick={() => openSettings()}
|
||||
data-testid="settings-button"
|
||||
>
|
||||
<Settings />
|
||||
<Settings2 />
|
||||
</IconButton>
|
||||
{!mobile && (
|
||||
<IconButton
|
||||
@@ -173,7 +173,7 @@ export function ChatPanel({
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="shrink-0 px-4 pt-1 pb-3">
|
||||
<div className="shrink-0 p-2.5 pt-1">
|
||||
<Composer
|
||||
placeholder={
|
||||
engine.messages.length > 0 &&
|
||||
|
||||
@@ -18,18 +18,14 @@ interface Example {
|
||||
file?: { path: string; name: string; type: string }
|
||||
}
|
||||
|
||||
/** Secondary start buttons: outlined, so they read as clickable */
|
||||
const startButtonClass =
|
||||
"inline-flex h-8 items-center gap-1.5 rounded-lg border border-border bg-card px-3 text-[13px] text-foreground transition-colors hover:bg-accent [&_svg]:text-muted-foreground"
|
||||
|
||||
async function loadExampleFile(file: NonNullable<Example["file"]>) {
|
||||
const response = await fetch(getAssetUrl(file.path))
|
||||
const blob = await response.blob()
|
||||
return new File([blob], file.name, { type: file.type })
|
||||
}
|
||||
|
||||
/** One start-screen example: a small picture over its title */
|
||||
function ExampleTile({
|
||||
/** One start-screen choice: a small picture, a title and one line */
|
||||
function ExampleCard({
|
||||
onClick,
|
||||
title,
|
||||
description,
|
||||
@@ -39,7 +35,6 @@ function ExampleTile({
|
||||
}: {
|
||||
onClick: () => void
|
||||
title: string
|
||||
/** Shown as the tooltip: the title alone names the example */
|
||||
description: string
|
||||
picture: React.ReactNode
|
||||
/** An icon on a tinted tile instead of a diagram on paper */
|
||||
@@ -50,20 +45,24 @@ function ExampleTile({
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
title={description}
|
||||
className="group/example flex min-w-0 flex-col gap-2 rounded-xl border border-border bg-card p-1.5 pb-2.5 text-left transition-colors hover:border-foreground/25"
|
||||
className="group/example flex min-w-0 items-center gap-2.5 rounded-xl border border-border bg-card p-1.5 pr-2.5 text-left transition-colors hover:border-foreground/25"
|
||||
data-testid={testId}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"flex h-16 w-full items-center justify-center overflow-hidden rounded-lg",
|
||||
"flex h-12 w-16 shrink-0 items-center justify-center overflow-hidden rounded-lg",
|
||||
plain ? "bg-muted" : "sheet-light bg-white",
|
||||
)}
|
||||
>
|
||||
{picture}
|
||||
</span>
|
||||
<span className="px-1 text-[13px] leading-snug font-medium text-foreground">
|
||||
{title}
|
||||
<span className="min-w-0 flex-1">
|
||||
<span className="line-clamp-2 text-[13px] leading-snug font-medium text-foreground">
|
||||
{title}
|
||||
</span>
|
||||
<span className="mt-0.5 block truncate text-xs text-muted-foreground">
|
||||
{description}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
)
|
||||
@@ -93,7 +92,6 @@ export function LobbyHero({
|
||||
key: "paper",
|
||||
title: dict.examples.paperToDiagram,
|
||||
description: dict.examples.paperDescription,
|
||||
image: "/paper_demo.svg",
|
||||
prompt: "Summarize this paper as a diagram",
|
||||
file: {
|
||||
path: "/chain-of-thought.txt",
|
||||
@@ -187,12 +185,10 @@ export function LobbyHero({
|
||||
placeholder={t.placeholder}
|
||||
/>
|
||||
|
||||
{/* Examples: one row of tiles; the ways to bring your own
|
||||
diagram follow as a separate group */}
|
||||
<div
|
||||
className={cn(
|
||||
"mt-5 grid gap-2",
|
||||
compact ? "grid-cols-1" : "grid-cols-5",
|
||||
compact ? "grid-cols-1" : "grid-cols-3",
|
||||
)}
|
||||
>
|
||||
{examples.map((example) =>
|
||||
@@ -213,7 +209,7 @@ export function LobbyHero({
|
||||
</span>
|
||||
</button>
|
||||
) : (
|
||||
<ExampleTile
|
||||
<ExampleCard
|
||||
key={example.key}
|
||||
onClick={() => pickExample(example)}
|
||||
title={example.title}
|
||||
@@ -225,7 +221,7 @@ export function LobbyHero({
|
||||
<img
|
||||
src={getAssetUrl(example.image)}
|
||||
alt=""
|
||||
className="max-h-14 max-w-[88%] object-contain transition-transform duration-300 group-hover/example:scale-[1.06]"
|
||||
className="max-h-10 max-w-[56px] object-contain transition-transform duration-300 group-hover/example:scale-[1.06]"
|
||||
/>
|
||||
) : (
|
||||
<FileText className="size-5 text-muted-foreground" />
|
||||
@@ -235,34 +231,48 @@ export function LobbyHero({
|
||||
/>
|
||||
),
|
||||
)}
|
||||
{!compact && (
|
||||
<ExampleCard
|
||||
onClick={onOpenFile}
|
||||
title={dict.workspace.openFile}
|
||||
description={t.openFileHint}
|
||||
picture={
|
||||
<FileUp className="size-5 text-muted-foreground" />
|
||||
}
|
||||
plain
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<p className="mt-2.5 text-center text-xs text-faint">
|
||||
<p className="mt-3 text-center text-xs text-faint">
|
||||
{dict.examples.cachedNote}
|
||||
</p>
|
||||
|
||||
{/* Ways to start without an example, as plain buttons */}
|
||||
<div className="mt-6 flex flex-wrap items-center justify-center gap-2">
|
||||
<div className="mt-6 flex flex-wrap items-center justify-center gap-x-5 gap-y-2 text-[13px] text-muted-foreground">
|
||||
{engine.sessions.length > 0 && (
|
||||
<SessionMenu align="center" onOpenFile={onOpenFile}>
|
||||
<button type="button" className={startButtonClass}>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center gap-1.5 hover:text-foreground"
|
||||
>
|
||||
<History className="size-4" />
|
||||
{t.recent}
|
||||
</button>
|
||||
</SessionMenu>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={onOpenFile}
|
||||
className={startButtonClass}
|
||||
data-testid="open-file"
|
||||
>
|
||||
<FileUp className="size-4" />
|
||||
{dict.workspace.openFile}
|
||||
</button>
|
||||
{compact && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onOpenFile}
|
||||
className="inline-flex items-center gap-1.5 hover:text-foreground"
|
||||
>
|
||||
<FileUp className="size-4" />
|
||||
{dict.workspace.openFile}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={onDrawYourself}
|
||||
className={startButtonClass}
|
||||
className="inline-flex items-center gap-1.5 hover:text-foreground"
|
||||
data-testid="draw-yourself"
|
||||
>
|
||||
<Pencil className="size-4" />
|
||||
|
||||
@@ -2,6 +2,7 @@ import {
|
||||
AlertCircle,
|
||||
Check,
|
||||
ChevronDown,
|
||||
Code2,
|
||||
Copy,
|
||||
Library,
|
||||
PenTool,
|
||||
@@ -179,23 +180,17 @@ function VersionCard({
|
||||
</button>
|
||||
)
|
||||
|
||||
// What the AI wrote: a text link in the summary line, so the card's
|
||||
// only button is the action (undo or restore)
|
||||
const summaryLine = (
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{summary}
|
||||
{/* The link wraps as one unit with its separator */}
|
||||
<span className="whitespace-nowrap">
|
||||
<span aria-hidden> · </span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowCode((v) => !v)}
|
||||
className="underline decoration-foreground/30 underline-offset-2 hover:text-foreground hover:decoration-foreground"
|
||||
>
|
||||
{showCode ? t.hideCode : t.showCode}
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
// What the AI wrote, on every card (main showed it on every tool call)
|
||||
const codeButton = (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowCode((v) => !v)}
|
||||
aria-label={showCode ? t.hideCode : t.showCode}
|
||||
title={showCode ? t.hideCode : t.showCode}
|
||||
className="inline-flex size-7 shrink-0 items-center justify-center rounded-lg text-muted-foreground hover:bg-accent hover:text-foreground"
|
||||
>
|
||||
<Code2 className="size-4" />
|
||||
</button>
|
||||
)
|
||||
const codePanel = showCode && (
|
||||
<div className="relative border-t border-border bg-surface-1 px-3 py-2.5">
|
||||
@@ -236,12 +231,15 @@ function VersionCard({
|
||||
/>
|
||||
</button>
|
||||
{badge}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="min-w-0 flex-1" title={summary}>
|
||||
<div className="truncate text-[13px] text-foreground">
|
||||
{title}
|
||||
</div>
|
||||
{summaryLine}
|
||||
<div className="truncate text-xs text-muted-foreground">
|
||||
{summary}
|
||||
</div>
|
||||
</div>
|
||||
{codeButton}
|
||||
{restoreButton}
|
||||
</div>
|
||||
{codePanel}
|
||||
@@ -273,12 +271,17 @@ function VersionCard({
|
||||
{t.compare}
|
||||
</span>
|
||||
</button>
|
||||
{/* Title row with the action; the summary runs under both */}
|
||||
<div className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-2.5 px-3 py-2.5">
|
||||
<div className="flex items-center gap-2.5 px-3 py-2.5">
|
||||
{badge}
|
||||
<div className="truncate text-[13px] font-medium text-foreground">
|
||||
{title}
|
||||
<div className="min-w-0 flex-1" title={summary}>
|
||||
<div className="truncate text-[13px] font-medium text-foreground">
|
||||
{title}
|
||||
</div>
|
||||
<div className="line-clamp-2 text-xs text-muted-foreground">
|
||||
{summary}
|
||||
</div>
|
||||
</div>
|
||||
{codeButton}
|
||||
{canUndo ? (
|
||||
<button
|
||||
type="button"
|
||||
@@ -297,9 +300,6 @@ function VersionCard({
|
||||
) : (
|
||||
restoreButton
|
||||
)}
|
||||
<div className="col-span-2 col-start-2 mt-0.5">
|
||||
{summaryLine}
|
||||
</div>
|
||||
</div>
|
||||
{codePanel}
|
||||
</div>
|
||||
|
||||
@@ -220,14 +220,14 @@ export function ModelSelector({
|
||||
<span className="min-w-0 truncate text-xs">
|
||||
{selectedModel
|
||||
? shortModelName(selectedModel.modelId)
|
||||
: dict.modelConfig.serverDefault}
|
||||
: dict.modelConfig.default}
|
||||
</span>
|
||||
) : (
|
||||
// Keep an sr-only label for screen readers when hidden
|
||||
<span className="sr-only">
|
||||
{selectedModel
|
||||
? selectedModel.modelId
|
||||
: dict.modelConfig.serverDefault}
|
||||
: dict.modelConfig.default}
|
||||
</span>
|
||||
)}
|
||||
<ChevronDown className="h-3 w-3 flex-shrink-0 text-muted-foreground" />
|
||||
|
||||
@@ -85,6 +85,18 @@ export function QuotaLimitToast({
|
||||
{/* Message */}
|
||||
<div className="text-sm text-muted-foreground leading-relaxed mb-4 space-y-2">
|
||||
<p>{quotaMessage}</p>
|
||||
{!isSelfHosted && (
|
||||
<p
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: formatMessage(
|
||||
dict.quota.doubaoSponsorship,
|
||||
{
|
||||
link: "https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio",
|
||||
},
|
||||
),
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<p
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: tipHtml,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client"
|
||||
|
||||
import { MessageSquare, PanelRightOpen, Settings, Shapes } from "lucide-react"
|
||||
import { MessageSquare, PanelRightOpen, Settings2, Shapes } from "lucide-react"
|
||||
import { usePathname, useRouter } from "next/navigation"
|
||||
import { useEffect, useRef, useState } from "react"
|
||||
import { CanvasStage } from "@/components/canvas/canvas-stage"
|
||||
@@ -100,7 +100,7 @@ function StartBar({
|
||||
onClick={() => openSettings()}
|
||||
data-testid="settings-button"
|
||||
>
|
||||
<Settings />
|
||||
<Settings2 />
|
||||
</IconButton>
|
||||
</div>
|
||||
)
|
||||
|
||||
+182
-77
@@ -1,98 +1,107 @@
|
||||
<div align="center">
|
||||
|
||||
# Next AI Draw.io
|
||||
|
||||
**和 AI 对话,画出并修改 draw.io 图表。**
|
||||
<div align="center">
|
||||
|
||||
**AI驱动的图表创建工具 - 对话、绘制、可视化**
|
||||
|
||||
[English](../../README.md) | 中文 | [日本語](../ja/README_JA.md)
|
||||
|
||||
[](https://next-ai-drawio.jiang.jp/)
|
||||
|
||||
[](https://opensource.org/licenses/Apache-2.0)
|
||||
[](https://nextjs.org/)
|
||||
[](https://react.dev/)
|
||||
[](https://github.com/sponsors/DayuanJiang)
|
||||
|
||||
[**在线体验**](https://next-ai-drawio.jiang.jp/) · [**桌面应用**](https://github.com/DayuanJiang/next-ai-draw-io/releases) · [**MCP 服务器**](#在-ai-代理里使用mcp)
|
||||
[](https://next-ai-drawio.jiang.jp/)
|
||||
|
||||
</div>
|
||||
|
||||
https://github.com/user-attachments/assets/66b9f12f-219f-4d62-acc0-0725e6850eec
|
||||
一个集成了AI功能的Next.js网页应用,与draw.io图表无缝结合。通过自然语言命令和AI辅助可视化来创建、修改和增强图表。
|
||||
|
||||
用一句话描述想要的图,AI 就在真正的 draw.io 画布上把它画出来。你可以像编辑任何 draw.io 文件一样手动修改,也可以选中几个图形、告诉 AI 要改什么。AI 的每次修改都是一个版本,可以对比、恢复或撤销;结果可以导出为 `.drawio`、`.png` 或 `.svg`。
|
||||
> 注:感谢 <img src="https://raw.githubusercontent.com/DayuanJiang/next-ai-draw-io/main/public/doubao-color.png" alt="" height="20" /> [字节跳动豆包](https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio) 的赞助支持,本项目的 Demo 现已接入强大的 glm-4.7 模型!
|
||||
|
||||
提供网页版、Windows / macOS / Linux 桌面版,以及供 Claude Code、Cursor、VS Code 等 AI 代理调用的 MCP 服务器。
|
||||
<a href="https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio" target="_blank"><img src="../../public/volcengine-invite.png" alt="火山引擎方舟 Coding Plan" width="300" /></a>
|
||||
|
||||
## 亮点
|
||||
https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
|
||||
|
||||
**画**
|
||||
|
||||
- 一句话生成架构图、流程图、时序图等,内置 AWS、Azure、GCP、Kubernetes 等图标库
|
||||
- 连接线可以带流动动画
|
||||
- 上传截图或手绘图,让 AI 照着画;上传 PDF、Markdown、代码等文本文件,从内容生成图
|
||||
|
||||
**改**
|
||||
|
||||
- 用对话修改:改动流式呈现,刚改过的图形在画布上高亮
|
||||
- 选中图形提问:在画布上选中几个图形,AI 只改这几个
|
||||
- 版本与撤销:每次 AI 修改都是一张带缩略图的版本卡片,可以和画布对比、恢复、撤销;画布上按 Ctrl+Z 也能一步撤回 AI 的修改
|
||||
- 它就是普通的 draw.io:双击改名、拖动、调样式、多页,随时导出 `.drawio`、`.png`、`.svg`、`.drawio.svg`
|
||||
|
||||
**用**
|
||||
|
||||
- 支持 24 家模型服务商,可以在浏览器里填自己的 API Key,Key 只保存在本地
|
||||
- 支持推理的模型会显示思考过程
|
||||
- 深色模式;界面有英文、简体中文、繁体中文、日文
|
||||
## 目录
|
||||
- [Next AI Draw.io](#next-ai-drawio)
|
||||
- [目录](#目录)
|
||||
- [示例](#示例)
|
||||
- [功能特性](#功能特性)
|
||||
- [MCP服务器](#mcp服务器)
|
||||
- [Claude Code CLI](#claude-code-cli)
|
||||
- [快速开始](#快速开始)
|
||||
- [在线试用](#在线试用)
|
||||
- [桌面应用](#桌面应用)
|
||||
- [使用Docker运行](#使用docker运行)
|
||||
- [安装](#安装)
|
||||
- [部署](#部署)
|
||||
- [部署到腾讯云EdgeOne Pages](#部署到腾讯云edgeone-pages)
|
||||
- [部署到Vercel](#部署到vercel)
|
||||
- [部署到Cloudflare Workers](#部署到cloudflare-workers)
|
||||
- [多提供商支持](#多提供商支持)
|
||||
- [工作原理](#工作原理)
|
||||
- [支持与联系](#支持与联系)
|
||||
- [常见问题](#常见问题)
|
||||
- [Star历史](#star历史)
|
||||
|
||||
## 示例
|
||||
|
||||
以下是一些示例提示词及其生成的图表:
|
||||
|
||||
<div align="center">
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<td colspan="2" valign="top" align="center">
|
||||
<strong>带动画连接线的 Transformer 架构</strong><br />
|
||||
<p><strong>Prompt:</strong> Give me a <strong>animated connector</strong> diagram of transformer's architecture.</p>
|
||||
<img src="../../public/animated_connectors.svg" alt="带动画连接线的 Transformer 架构" width="440" />
|
||||
<strong>动画Transformer连接器</strong><br />
|
||||
<p><strong>Prompt:</strong> Give me a **animated connector** diagram of transformer's architecture.</p>
|
||||
<img src="../../public/animated_connectors.svg" alt="带动画连接器的Transformer架构" width="480" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top">
|
||||
<strong>RAG 架构图</strong><br />
|
||||
<p><strong>Prompt:</strong> Generate a RAG architecture diagram for <strong>chat application</strong>. Use connected diagram for data ingestion</p>
|
||||
<img src="../../public/rag_prod.svg" alt="RAG 架构图" width="400" />
|
||||
<strong>RAG技术图</strong><br />
|
||||
<p><strong>Prompt:</strong> Generate a RAG architecture diagram for **chat application**. Use connected diagram for data ingestion</p>
|
||||
<img src="../../public/rag_prod.svg" alt="RAG架构图" width="480" />
|
||||
</td>
|
||||
<td width="50%" valign="top">
|
||||
<strong>React 加 AWS 的认证流程</strong><br />
|
||||
<p><strong>Prompt:</strong> Generate authentication process using React with <strong>AWS</strong>. Use Serverless architecture.</p>
|
||||
<img src="../../public/auth.svg" alt="认证架构图" width="400" />
|
||||
<strong>React和AWS认证流程</strong><br />
|
||||
<p><strong>Prompt:</strong> Generate authentication process using React with **AWS**. Use Serverless architecture.</p>
|
||||
<img src="../../public/auth.svg" alt="认证架构图" width="480" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top">
|
||||
<strong>开放式创新模型</strong><br />
|
||||
<strong>开放式创新</strong><br />
|
||||
<p><strong>Prompt:</strong> Create visualization of Henry Chesbrough's Open Innovation model.</p>
|
||||
<img src="../../public/inno.svg" alt="开放式创新图" width="400" />
|
||||
<img src="../../public/inno.svg" alt="开放式创新图" width="480" />
|
||||
</td>
|
||||
<td width="50%" valign="top">
|
||||
<strong>猫咪素描</strong><br />
|
||||
<p><strong>Prompt:</strong> Draw a cute cat for me.</p>
|
||||
<img src="../../public/cat_demo.svg" alt="猫咪绘图" width="200" />
|
||||
<img src="../../public/cat_demo.svg" alt="猫咪绘图" width="240" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
## 使用方式
|
||||
## 功能特性
|
||||
|
||||
### 在线体验
|
||||
- **LLM驱动的图表创建**:利用大语言模型通过自然语言命令直接创建和操作draw.io图表
|
||||
- **基于图像的图表复制**:上传现有图表或图像,让AI自动复制和增强
|
||||
- **PDF和文本文件上传**:上传PDF文档和文本文件,提取内容并从现有文档生成图表
|
||||
- **AI推理过程显示**:查看支持模型的AI思考过程(OpenAI o1/o3、Gemini、Claude等)
|
||||
- **版本与撤销**:AI 每改一次图,聊天里就多一张带缩略图的版本卡片,可以和画布对比、恢复,也可以撤销这次修改;在画布上按 Ctrl+Z 也能一步撤回 AI 的修改。AI 刚改过的图形会在画布上标出来
|
||||
- **针对选中图形提问**:在画布上选中图形,让 AI 只改这几个
|
||||
- **交互式聊天界面**:与AI实时对话来完善您的图表
|
||||
- **云架构图支持**:专门支持生成云架构图(AWS、GCP、Azure)
|
||||
- **动画连接器**:在图表元素之间创建动态动画连接器,实现更好的可视化效果
|
||||
|
||||
打开 [next-ai-drawio.jiang.jp](https://next-ai-drawio.jiang.jp/) 即可使用,无需安装。演示站有用量限制;点击聊天面板里的设置图标,填入自己的服务商和 API Key 就不受限制。Key 只保存在浏览器本地,不会上传到服务器。
|
||||
## MCP服务器
|
||||
|
||||
### 桌面应用
|
||||
|
||||
在 [Releases 页面](https://github.com/DayuanJiang/next-ai-draw-io/releases) 下载 Windows、macOS 或 Linux 安装包。
|
||||
|
||||
### 在 AI 代理里使用(MCP)
|
||||
|
||||
通过 MCP(Model Context Protocol,让 AI 代理调用外部工具的协议),Claude Desktop、Cursor、VS Code 等都能直接画 draw.io 图。在客户端的 MCP 配置里加上:
|
||||
通过MCP(模型上下文协议)在Claude Desktop、Cursor和VS Code等AI代理中使用Next AI Draw.io。
|
||||
|
||||
```json
|
||||
{
|
||||
@@ -105,61 +114,157 @@ https://github.com/user-attachments/assets/66b9f12f-219f-4d62-acc0-0725e6850eec
|
||||
}
|
||||
```
|
||||
|
||||
Claude Code 用一行命令:
|
||||
### Claude Code CLI
|
||||
|
||||
```bash
|
||||
claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest
|
||||
```
|
||||
|
||||
然后对 AI 说"画一个用户认证流程图,包含登录、MFA 和会话管理",图会实时出现在浏览器里。MCP 服务器包含网页版的大部分画图能力:
|
||||
然后让Claude创建图表:
|
||||
> "创建一个展示用户认证流程的流程图,包含登录、MFA和会话管理"
|
||||
|
||||
- 同一套画图规则和图标库(AWS、Azure、GCP、Kubernetes 等)
|
||||
- 截图工具,AI 可以看一眼画好的图并自行修正
|
||||
- 版本历史、多页图表,下载为 `.drawio`、`.png`、`.svg` 或 `.drawio.svg`
|
||||
- 自动保存到 `~/.next-ai-drawio/`,重启后接着画
|
||||
图表会实时显示在浏览器中!
|
||||
|
||||
VS Code、Cursor 等客户端的配置见 [MCP 服务器 README](../../packages/mcp-server/README.md)。
|
||||
MCP服务器包含网页版的大部分画图功能:
|
||||
|
||||
## 自己部署
|
||||
- 与网页版相同的画图规则和形状库(AWS、Azure、GCP、Kubernetes等)
|
||||
- 截图工具,AI可以查看画好的图并自行修正
|
||||
- 版本历史、多页图表,以及下载为`.drawio`、`.png`、`.svg`或`.drawio.svg`格式
|
||||
- 自动保存到`~/.next-ai-drawio/`,重启后可以接着画
|
||||
|
||||
### 本地运行
|
||||
详情请参阅[MCP服务器README](../../packages/mcp-server/README.md),了解VS Code、Cursor等客户端配置。
|
||||
|
||||
## 快速开始
|
||||
|
||||
### 在线试用
|
||||
|
||||
无需安装!直接在我们的演示站点试用:
|
||||
|
||||
[](https://next-ai-drawio.jiang.jp/)
|
||||
|
||||
> **使用自己的 API Key**:您可以使用自己的 API Key 来绕过演示站点的用量限制。点击聊天面板中的设置图标即可配置您的 Provider 和 API Key。您的 Key 仅保存在浏览器本地,不会被存储在服务器上。
|
||||
|
||||
### 桌面应用
|
||||
|
||||
从 [Releases 页面](https://github.com/DayuanJiang/next-ai-draw-io/releases) 下载适用于您平台的原生桌面应用:
|
||||
|
||||
支持的平台:Windows、macOS、Linux。
|
||||
|
||||
### 使用Docker运行
|
||||
|
||||
[查看 Docker 指南](./docker.md)
|
||||
|
||||
### 安装
|
||||
|
||||
1. 克隆仓库:
|
||||
|
||||
```bash
|
||||
git clone https://github.com/DayuanJiang/next-ai-draw-io
|
||||
cd next-ai-draw-io
|
||||
npm install
|
||||
cp env.example .env.local # 填入服务商和 API Key,见下文"模型与服务商"
|
||||
cp env.example .env.local
|
||||
```
|
||||
|
||||
详细设置说明请参阅[提供商配置指南](./ai-providers.md)。
|
||||
|
||||
2. 运行开发服务器:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
打开 [http://localhost:6002](http://localhost:6002)。
|
||||
3. 在浏览器中打开 [http://localhost:6002](http://localhost:6002) 查看应用。
|
||||
|
||||
### 一键部署
|
||||
## 部署
|
||||
|
||||
| 平台 | 方式 |
|
||||
| --- | --- |
|
||||
| 腾讯云 EdgeOne Pages | [](https://console.cloud.tencent.com/edgeone/pages/new?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io) 部署后还能获得[每日免费的 DeepSeek 模型额度](https://edgeone.cloud.tencent.com/pages/document/169925463311781888) |
|
||||
| Vercel | [](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io) 记得在 Vercel 控制台里设置和 `.env.local` 相同的环境变量 |
|
||||
| Cloudflare Workers | [Cloudflare 部署指南](./cloudflare-deploy.md) |
|
||||
| Docker | [Docker 指南](./docker.md) |
|
||||
| 离线或内网 | [离线部署说明](./offline-deployment.md) |
|
||||
### 部署到腾讯云EdgeOne Pages
|
||||
|
||||
### 模型与服务商
|
||||
您可以通过[腾讯云EdgeOne Pages](https://pages.edgeone.ai/zh)一键部署。
|
||||
|
||||
支持 AWS Bedrock(默认)、OpenAI、Anthropic、Google AI、Google Vertex AI、Azure OpenAI、Ollama、OpenRouter、AIHubMix、DeepSeek、SiliconFlow、SGLang、Vercel AI Gateway、腾讯云 EdgeOne、字节跳动豆包、ModelScope、智谱 GLM、通义千问、七牛云、Kimi、MiniMax、Novita、小米 MiMo、Atlas Cloud 共 24 家。各家的环境变量和注意事项见[服务商配置指南](./ai-providers.md)。
|
||||
直接点击此按钮一键部署:
|
||||
[](https://console.cloud.tencent.com/edgeone/pages/new?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
|
||||
|
||||
**选哪个模型**:这项任务要生成格式严格的长文本(draw.io XML),请选能力较强的模型,小模型容易画出错误的图。
|
||||
查看[腾讯云EdgeOne Pages文档](https://pages.edgeone.ai/zh/document/product-introduction)了解更多详情。
|
||||
|
||||
**多模型与管理面板**:在 `AI_MODEL` 里用逗号列出多个模型 ID,或用 `AI_MODELS_CONFIG` 环境变量 / `ai-models.json` 文件配置多家服务商的模型,所有用户无需自带 Key 即可使用。设置 `ADMIN_PASSWORD` 后访问 `/admin`,可以在网页里管理模型、访问码、功能开关、可观测性和配额,见[管理面板指南](./admin-panel.md)。
|
||||
同时,通过腾讯云EdgeOne Pages部署,也会获得[每日免费的DeepSeek模型额度](https://edgeone.cloud.tencent.com/pages/document/169925463311781888)。
|
||||
|
||||
## 支持
|
||||
### 部署到Vercel
|
||||
|
||||
- 问题和建议:提交 [GitHub Issue](https://github.com/DayuanJiang/next-ai-draw-io/issues),或发邮件到 me[at]jiang.jp
|
||||
- 常见问题:[FAQ](./FAQ.md)
|
||||
- 如果这个项目对你有用,欢迎[赞助](https://github.com/sponsors/DayuanJiang),帮助我维持演示站点的运行
|
||||
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
|
||||
|
||||
<div align="center">
|
||||
部署Next.js应用最简单的方式是使用Next.js创建者提供的[Vercel平台](https://vercel.com/new)。请确保在Vercel控制台中**设置环境变量**,就像您在本地 `.env.local` 文件中所做的那样。
|
||||
|
||||
查看[Next.js部署文档](https://nextjs.org/docs/app/building-your-application/deploying)了解更多详情。
|
||||
|
||||
### 部署到Cloudflare Workers
|
||||
|
||||
[查看 Cloudflare 部署指南](./cloudflare-deploy.md)
|
||||
|
||||
|
||||
## 多提供商支持
|
||||
|
||||
- [字节跳动豆包](https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio)
|
||||
- AWS Bedrock(默认)
|
||||
- OpenAI
|
||||
- Anthropic
|
||||
- Google AI
|
||||
- Google Vertex AI
|
||||
- Azure OpenAI
|
||||
- Ollama
|
||||
- OpenRouter
|
||||
- AIHubMix
|
||||
- DeepSeek
|
||||
- SiliconFlow
|
||||
- ModelScope
|
||||
- SGLang
|
||||
- Vercel AI Gateway
|
||||
|
||||
除AWS Bedrock和OpenRouter外,所有提供商都支持自定义端点。
|
||||
|
||||
📖 **[详细的提供商配置指南](./ai-providers.md)** - 查看各提供商的设置说明。
|
||||
|
||||
### 服务端多模型配置
|
||||
|
||||
管理员可以配置多个服务端模型,让所有用户无需提供个人 API Key 即可使用。通过 `AI_MODELS_CONFIG` 环境变量(JSON 字符串)或 `ai-models.json` 文件配置。如果只需要单 provider 下的多个模型,也可以直接在 `AI_MODEL` 中用逗号分隔模型 ID。
|
||||
|
||||
**模型要求**:此任务需要强大的模型能力,因为它涉及生成具有严格格式约束的长文本(draw.io XML)。推荐使用 Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro 和 DeepSeek V3.2/R1。
|
||||
|
||||
注意:`claude` 系列已在带有 AWS、Azure、GCP 等云架构 Logo 的 draw.io 图表上进行训练,因此如果您想创建云架构图,这是最佳选择。
|
||||
|
||||
### 管理面板
|
||||
|
||||
设置 `ADMIN_PASSWORD` 环境变量并访问 `/admin`,即可在 Web 面板中管理服务端设置(模型、访问码、功能开关、可观测性、配额),无需手动编辑 `.env`。
|
||||
|
||||
📖 **[管理面板指南](./admin-panel.md)** — 启用方法、优先级规则和注意事项。
|
||||
|
||||
|
||||
## 工作原理
|
||||
|
||||
本应用使用以下技术:
|
||||
|
||||
- **Next.js**:用于前端框架和路由
|
||||
- **Vercel AI SDK**(`ai` + `@ai-sdk/*`):用于流式AI响应和多提供商支持
|
||||
- **draw.io**:编辑器使用打包在 `public/drawio` 里的副本(由 `npm run dev` / `npm run build` 自动下载),应用可以直接控制它
|
||||
|
||||
图表以XML格式表示,可在draw.io中渲染。AI处理您的命令并相应地生成或修改此XML。
|
||||
|
||||
|
||||
## 支持与联系
|
||||
|
||||
**特别感谢[字节跳动豆包](https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio)赞助演示站点的 API Token 使用!** 注册火山引擎 ARK 平台即可获得50万免费Token!
|
||||
|
||||
如果您觉得这个项目有用,请考虑[赞助](https://github.com/sponsors/DayuanJiang)来帮助我托管在线演示站点!
|
||||
|
||||
如需支持或咨询,请在GitHub仓库上提交issue或联系维护者:
|
||||
|
||||
- 邮箱:me[at]jiang.jp
|
||||
|
||||
## 常见问题
|
||||
|
||||
请参阅 [FAQ](./FAQ.md) 了解常见问题和解决方案。
|
||||
|
||||
## Star历史
|
||||
|
||||
[](https://www.star-history.com/#DayuanJiang/next-ai-draw-io&type=date&legend=top-left)
|
||||
|
||||
</div>
|
||||
---
|
||||
|
||||
@@ -13,6 +13,8 @@
|
||||
|
||||
### 豆包 (字节跳动火山引擎)
|
||||
|
||||
> **免费 Token**:在 [火山引擎 ARK 平台](https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio) 注册,即可获得所有模型 50 万免费 Token!
|
||||
|
||||
```bash
|
||||
DOUBAO_API_KEY=your_api_key
|
||||
AI_MODEL=doubao-seed-1-8-251215 # 或其他豆包模型
|
||||
|
||||
@@ -13,6 +13,8 @@ This guide explains how to configure different AI model providers for next-ai-dr
|
||||
|
||||
### Doubao (ByteDance Volcengine)
|
||||
|
||||
> **Free tokens**: Register on the [Volcengine ARK platform](https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio) to get 500K free tokens for all models!
|
||||
|
||||
```bash
|
||||
DOUBAO_API_KEY=your_api_key
|
||||
AI_MODEL=doubao-seed-1-8-251215 # or other Doubao model
|
||||
|
||||
+182
-78
@@ -1,98 +1,105 @@
|
||||
<div align="center">
|
||||
|
||||
# Next AI Draw.io
|
||||
|
||||
**AI とチャットしながら draw.io のダイアグラムを描き、直す。**
|
||||
<div align="center">
|
||||
|
||||
**AI搭載のダイアグラム作成ツール - チャット、描画、可視化**
|
||||
|
||||
[English](../../README.md) | [中文](../cn/README_CN.md) | 日本語
|
||||
|
||||
[](https://next-ai-drawio.jiang.jp/)
|
||||
|
||||
[](https://opensource.org/licenses/Apache-2.0)
|
||||
[](https://nextjs.org/)
|
||||
[](https://react.dev/)
|
||||
[](https://github.com/sponsors/DayuanJiang)
|
||||
|
||||
[**オンラインデモ**](https://next-ai-drawio.jiang.jp/) · [**デスクトップアプリ**](https://github.com/DayuanJiang/next-ai-draw-io/releases) · [**MCP サーバー**](#ai-エージェントから使うmcp)
|
||||
[](https://next-ai-drawio.jiang.jp/)
|
||||
|
||||
</div>
|
||||
|
||||
https://github.com/user-attachments/assets/66b9f12f-219f-4d62-acc0-0725e6850eec
|
||||
AI機能とdraw.ioダイアグラムを統合したNext.jsウェブアプリケーションです。自然言語コマンドとAI支援の可視化により、ダイアグラムを作成、修正、強化できます。
|
||||
|
||||
欲しいダイアグラムを一文で伝えると、AI が本物の draw.io キャンバスに描きます。普通の draw.io ファイルと同じように手で直すことも、図形をいくつか選んで AI に変更を頼むこともできます。AI の変更はすべてバージョンとして残り、比較・復元・取り消しができます。結果は `.drawio`、`.png`、`.svg` で書き出せます。
|
||||
> 注:<img src="https://raw.githubusercontent.com/DayuanJiang/next-ai-draw-io/main/public/doubao-color.png" alt="" height="20" /> [ByteDance Doubao](https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio) のご支援により、デモサイトに強力な glm-4.7 モデルを導入しました!
|
||||
|
||||
Web アプリ、Windows / macOS / Linux 向けデスクトップアプリ、そして Claude Code、Cursor、VS Code などの AI エージェントから呼び出せる MCP サーバーとして使えます。
|
||||
https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
|
||||
|
||||
## 特長
|
||||
|
||||
**描く**
|
||||
|
||||
- アーキテクチャ図、フローチャート、シーケンス図などを一文から生成。AWS、Azure、GCP、Kubernetes のアイコンライブラリを内蔵
|
||||
- コネクタに流れるアニメーションを付けられる
|
||||
- スクリーンショットや手描きの図をアップロードすると AI が描き直す。PDF、Markdown、コードなどのテキストファイルからも内容を図にできる
|
||||
|
||||
**直す**
|
||||
|
||||
- チャットで修正:変更はストリーミングでキャンバスに反映され、AI が変更した図形はハイライト表示
|
||||
- 選択して頼む:キャンバスで図形を選ぶと、AI はその図形だけを変更
|
||||
- バージョンと取り消し:AI の変更ごとにサムネイル付きのバージョンカードが残り、キャンバスと比較・復元・取り消しができる。キャンバス上の Ctrl+Z でも AI の変更を一度で戻せる
|
||||
- ただの draw.io ダイアグラム:ダブルクリックで名前を変え、ドラッグし、スタイルを変え、複数ページを使い、いつでも `.drawio`、`.png`、`.svg`、`.drawio.svg` に書き出せる
|
||||
|
||||
**使う**
|
||||
|
||||
- 24 のモデルプロバイダーに対応。自分の API キーをブラウザに入力でき、キーは端末内にだけ保存される
|
||||
- 推論するモデルは思考過程を表示
|
||||
- ダークモード。UI は英語、簡体字中国語、繁体字中国語、日本語に対応
|
||||
## 目次
|
||||
- [Next AI Draw.io](#next-ai-drawio)
|
||||
- [目次](#目次)
|
||||
- [例](#例)
|
||||
- [機能](#機能)
|
||||
- [MCPサーバー](#mcpサーバー)
|
||||
- [Claude Code CLI](#claude-code-cli)
|
||||
- [はじめに](#はじめに)
|
||||
- [オンラインで試す](#オンラインで試す)
|
||||
- [デスクトップアプリケーション](#デスクトップアプリケーション)
|
||||
- [Dockerで実行](#dockerで実行)
|
||||
- [インストール](#インストール)
|
||||
- [デプロイ](#デプロイ)
|
||||
- [EdgeOne Pagesへのデプロイ](#edgeone-pagesへのデプロイ)
|
||||
- [Vercelへのデプロイ](#vercelへのデプロイ)
|
||||
- [Cloudflare Workersへのデプロイ](#cloudflare-workersへのデプロイ)
|
||||
- [マルチプロバイダーサポート](#マルチプロバイダーサポート)
|
||||
- [仕組み](#仕組み)
|
||||
- [サポート&お問い合わせ](#サポートお問い合わせ)
|
||||
- [よくある質問](#よくある質問)
|
||||
- [スター履歴](#スター履歴)
|
||||
|
||||
## 例
|
||||
|
||||
以下はいくつかのプロンプト例と生成されたダイアグラムです:
|
||||
|
||||
<div align="center">
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<td colspan="2" valign="top" align="center">
|
||||
<strong>アニメーションコネクタ付き Transformer アーキテクチャ</strong><br />
|
||||
<p><strong>Prompt:</strong> Give me a <strong>animated connector</strong> diagram of transformer's architecture.</p>
|
||||
<img src="../../public/animated_connectors.svg" alt="アニメーションコネクタ付き Transformer アーキテクチャ" width="440" />
|
||||
<strong>アニメーションTransformerコネクタ</strong><br />
|
||||
<p><strong>Prompt:</strong> Give me a **animated connector** diagram of transformer's architecture.</p>
|
||||
<img src="../../public/animated_connectors.svg" alt="アニメーションコネクタ付きTransformerアーキテクチャ" width="480" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top">
|
||||
<strong>RAG アーキテクチャ</strong><br />
|
||||
<p><strong>Prompt:</strong> Generate a RAG architecture diagram for <strong>chat application</strong>. Use connected diagram for data ingestion</p>
|
||||
<img src="../../public/rag_prod.svg" alt="RAG アーキテクチャ図" width="400" />
|
||||
<strong>RAG技術ダイアグラム</strong><br />
|
||||
<p><strong>Prompt:</strong> Generate a RAG architecture diagram for **chat application**. Use connected diagram for data ingestion</p>
|
||||
<img src="../../public/rag_prod.svg" alt="RAGアーキテクチャ図" width="480" />
|
||||
</td>
|
||||
<td width="50%" valign="top">
|
||||
<strong>React と AWS による認証フロー</strong><br />
|
||||
<p><strong>Prompt:</strong> Generate authentication process using React with <strong>AWS</strong>. Use Serverless architecture.</p>
|
||||
<img src="../../public/auth.svg" alt="認証アーキテクチャ図" width="400" />
|
||||
<strong>ReactとAWSによる認証</strong><br />
|
||||
<p><strong>Prompt:</strong> Generate authentication process using React with **AWS**. Use Serverless architecture.</p>
|
||||
<img src="../../public/auth.svg" alt="認証アーキテクチャ図" width="480" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" valign="top">
|
||||
<strong>オープンイノベーションモデル</strong><br />
|
||||
<strong>オープンイノベーション</strong><br />
|
||||
<p><strong>Prompt:</strong> Create visualization of Henry Chesbrough's Open Innovation model.</p>
|
||||
<img src="../../public/inno.svg" alt="オープンイノベーション図" width="400" />
|
||||
<img src="../../public/inno.svg" alt="オープンイノベーション図" width="480" />
|
||||
</td>
|
||||
<td width="50%" valign="top">
|
||||
<strong>猫のスケッチ</strong><br />
|
||||
<p><strong>Prompt:</strong> Draw a cute cat for me.</p>
|
||||
<img src="../../public/cat_demo.svg" alt="猫の絵" width="200" />
|
||||
<img src="../../public/cat_demo.svg" alt="猫の絵" width="240" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
## 使い方
|
||||
## 機能
|
||||
|
||||
### オンラインデモ
|
||||
- **LLM搭載のダイアグラム作成**:大規模言語モデルを活用して、自然言語コマンドで直接draw.ioダイアグラムを作成・操作
|
||||
- **画像ベースのダイアグラム複製**:既存のダイアグラムや画像をアップロードし、AIが自動的に複製・強化
|
||||
- **PDFとテキストファイルのアップロード**:PDFドキュメントやテキストファイルをアップロードして、既存のドキュメントからコンテンツを抽出し、ダイアグラムを生成
|
||||
- **AI推論プロセス表示**:サポートされているモデル(OpenAI o1/o3、Gemini、Claudeなど)のAIの思考プロセスを表示
|
||||
- **バージョンと取り消し**:AI が図を変更するたびに、サムネイル付きのバージョンカードがチャットに表示されます。キャンバスと比較したり、復元したり、その変更を取り消したりできます。キャンバスで Ctrl+Z を押しても AI の変更を一度に元に戻せます。AI が変更した図形はキャンバス上で強調表示されます
|
||||
- **選択した図形について依頼**:キャンバスで図形を選択し、その図形だけを AI に直してもらえます
|
||||
- **インタラクティブなチャットインターフェース**:AIとリアルタイムでコミュニケーションしてダイアグラムを改善
|
||||
- **クラウドアーキテクチャダイアグラムサポート**:クラウドアーキテクチャダイアグラムの生成を専門的にサポート(AWS、GCP、Azure)
|
||||
- **アニメーションコネクタ**:より良い可視化のためにダイアグラム要素間に動的でアニメーション化されたコネクタを作成
|
||||
|
||||
[next-ai-drawio.jiang.jp](https://next-ai-drawio.jiang.jp/) を開けばすぐ使えます。インストールは不要です。デモサイトには利用上限があります。チャットパネルの設定アイコンから自分のプロバイダーと API キーを入力すると上限なしで使えます。キーはブラウザ内にだけ保存され、サーバーには送られません。
|
||||
## MCPサーバー
|
||||
|
||||
### デスクトップアプリ
|
||||
|
||||
[Releases ページ](https://github.com/DayuanJiang/next-ai-draw-io/releases) から Windows、macOS、Linux 向けのインストーラーをダウンロードしてください。
|
||||
|
||||
### AI エージェントから使う(MCP)
|
||||
|
||||
MCP(Model Context Protocol、AI エージェントが外部ツールを呼び出すためのプロトコル)を通して、Claude Desktop、Cursor、VS Code などから直接 draw.io のダイアグラムを描けます。クライアントの MCP 設定に次を追加します。
|
||||
MCP(Model Context Protocol)を介して、Claude Desktop、Cursor、VS CodeなどのAIエージェントでNext AI Draw.ioを使用できます。
|
||||
|
||||
```json
|
||||
{
|
||||
@@ -105,61 +112,158 @@ MCP(Model Context Protocol、AI エージェントが外部ツールを呼び
|
||||
}
|
||||
```
|
||||
|
||||
Claude Code ならコマンド一つです。
|
||||
### Claude Code CLI
|
||||
|
||||
```bash
|
||||
claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest
|
||||
```
|
||||
|
||||
あとは AI に「ログイン、MFA、セッション管理を含むユーザー認証のフローチャートを描いて」と頼めば、描かれていく様子がブラウザに表示されます。MCP サーバーには Web アプリの作図機能のほとんどが入っています。
|
||||
Claudeにダイアグラムの作成を依頼:
|
||||
> 「ログイン、MFA、セッション管理を含むユーザー認証のフローチャートを作成してください」
|
||||
|
||||
- 同じ作図ルールとアイコンライブラリ(AWS、Azure、GCP、Kubernetes など)
|
||||
- スクリーンショットツール。AI が描いた結果を確認して自分で直せる
|
||||
- バージョン履歴、複数ページのダイアグラム、`.drawio`、`.png`、`.svg`、`.drawio.svg` でのダウンロード
|
||||
- `~/.next-ai-drawio/` への自動保存。再起動後も続きから描ける
|
||||
ダイアグラムがリアルタイムでブラウザに表示されます!
|
||||
|
||||
VS Code、Cursor などの設定は [MCP サーバーの README](../../packages/mcp-server/README.md) を参照してください。
|
||||
MCPサーバーには、Webアプリの主な作図機能が含まれています:
|
||||
|
||||
## 自分でホストする
|
||||
- Webアプリと同じ作図ルールとシェイプライブラリ(AWS、Azure、GCP、Kubernetesなど)
|
||||
- スクリーンショットツール:AIが描画結果を確認して修正できます
|
||||
- バージョン履歴、複数ページのダイアグラム、`.drawio`・`.png`・`.svg`・`.drawio.svg`形式でのダウンロード
|
||||
- `~/.next-ai-drawio/`への自動保存:再起動後も続きから編集できます
|
||||
|
||||
### ローカルで動かす
|
||||
詳細は[MCPサーバーREADME](../../packages/mcp-server/README.md)をご覧ください(VS Code、Cursorなどのクライアント設定も含む)。
|
||||
|
||||
## はじめに
|
||||
|
||||
### オンラインで試す
|
||||
|
||||
インストール不要!デモサイトで直接お試しください:
|
||||
|
||||
[](https://next-ai-drawio.jiang.jp/)
|
||||
|
||||
> **自分のAPIキーを使用**:自分のAPIキーを使用することで、デモサイトの利用制限を回避できます。チャットパネルの設定アイコンをクリックして、プロバイダーとAPIキーを設定してください。キーはブラウザのローカルに保存され、サーバーには保存されません。
|
||||
|
||||
### デスクトップアプリケーション
|
||||
|
||||
[Releases ページ](https://github.com/DayuanJiang/next-ai-draw-io/releases)からお使いのプラットフォーム用のネイティブデスクトップアプリをダウンロードしてください:
|
||||
|
||||
対応プラットフォーム:Windows、macOS、Linux。
|
||||
|
||||
### Dockerで実行
|
||||
|
||||
[Docker ガイドを参照](./docker.md)
|
||||
|
||||
### インストール
|
||||
|
||||
1. リポジトリをクローン:
|
||||
|
||||
```bash
|
||||
git clone https://github.com/DayuanJiang/next-ai-draw-io
|
||||
cd next-ai-draw-io
|
||||
npm install
|
||||
cp env.example .env.local # プロバイダーと API キーを記入。下の「モデルとプロバイダー」を参照
|
||||
cp env.example .env.local
|
||||
```
|
||||
|
||||
詳細な設定手順については[プロバイダー設定ガイド](./ai-providers.md)を参照してください。
|
||||
|
||||
2. 開発サーバーを起動:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
[http://localhost:6002](http://localhost:6002) を開きます。
|
||||
3. ブラウザで[http://localhost:6002](http://localhost:6002)を開いてアプリケーションを確認。
|
||||
|
||||
### ワンクリックデプロイ
|
||||
## デプロイ
|
||||
|
||||
| プラットフォーム | 方法 |
|
||||
| --- | --- |
|
||||
| Tencent EdgeOne Pages | [](https://edgeone.ai/pages/new?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io) デプロイすると [DeepSeek モデルの毎日の無料クォータ](https://pages.edgeone.ai/document/edge-ai) も付きます |
|
||||
| Vercel | [](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io) `.env.local` と同じ環境変数を Vercel のダッシュボードで設定してください |
|
||||
| Cloudflare Workers | [Cloudflare デプロイガイド](./cloudflare-deploy.md) |
|
||||
| Docker | [Docker ガイド](./docker.md) |
|
||||
| オフラインまたは社内ネットワーク | [オフラインデプロイ](./offline-deployment.md) |
|
||||
### EdgeOne Pagesへのデプロイ
|
||||
|
||||
### モデルとプロバイダー
|
||||
[Tencent EdgeOne Pages](https://pages.edgeone.ai/)を使用してワンクリックでデプロイできます。
|
||||
|
||||
AWS Bedrock(既定)、OpenAI、Anthropic、Google AI、Google Vertex AI、Azure OpenAI、Ollama、OpenRouter、AIHubMix、DeepSeek、SiliconFlow、SGLang、Vercel AI Gateway、Tencent EdgeOne、ByteDance Doubao、ModelScope、Zhipu GLM、Qwen、Qiniu、Kimi、MiniMax、Novita、Xiaomi MiMo、Atlas Cloud の 24 プロバイダーに対応しています。各プロバイダーの環境変数と注意点は[プロバイダー設定ガイド](./ai-providers.md)にあります。
|
||||
このボタンでデプロイ:
|
||||
|
||||
**どのモデルを選ぶか**:厳密な形式の長いテキスト(draw.io の XML)を生成するタスクなので、能力の高いモデルを選んでください。小さなモデルは壊れた図を出しがちです。
|
||||
[](https://edgeone.ai/pages/new?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
|
||||
|
||||
**複数モデルと管理パネル**:`AI_MODEL` にモデル ID をカンマ区切りで並べるか、`AI_MODELS_CONFIG` 環境変数または `ai-models.json` ファイルで複数プロバイダーのモデルを設定すると、全ユーザーが自分のキーなしで使えます。`ADMIN_PASSWORD` を設定して `/admin` を開くと、モデル、アクセスコード、機能の切り替え、オブザーバビリティ、クォータを Web 画面から管理できます。[管理パネルガイド](./admin-panel.md)を参照してください。
|
||||
詳細は[Tencent EdgeOne Pagesドキュメント](https://pages.edgeone.ai/document/deployment-overview)をご覧ください。
|
||||
|
||||
## サポート
|
||||
また、Tencent EdgeOne Pagesでデプロイすると、[DeepSeekモデルの毎日の無料クォータ](https://pages.edgeone.ai/document/edge-ai)が付与されます。
|
||||
|
||||
- 質問や提案:[GitHub Issue](https://github.com/DayuanJiang/next-ai-draw-io/issues) を立てるか、me[at]jiang.jp までメールしてください
|
||||
- よくある問題:[FAQ](./FAQ.md)
|
||||
- このプロジェクトが役に立ったら、デモサイトの運営のために[スポンサー](https://github.com/sponsors/DayuanJiang)をご検討ください
|
||||
### Vercelへのデプロイ
|
||||
|
||||
<div align="center">
|
||||
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
|
||||
|
||||
Next.jsアプリをデプロイする最も簡単な方法は、Next.jsの作成者による[Vercelプラットフォーム](https://vercel.com/new)を使用することです。ローカルの`.env.local`ファイルと同様に、Vercelダッシュボードで**環境変数を設定**してください。
|
||||
|
||||
詳細は[Next.jsデプロイメントドキュメント](https://nextjs.org/docs/app/building-your-application/deploying)をご覧ください。
|
||||
|
||||
### Cloudflare Workersへのデプロイ
|
||||
|
||||
[Cloudflare デプロイガイドを参照](./cloudflare-deploy.md)
|
||||
|
||||
|
||||
## マルチプロバイダーサポート
|
||||
|
||||
- [ByteDance Doubao](https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio)
|
||||
- AWS Bedrock(デフォルト)
|
||||
- OpenAI
|
||||
- Anthropic
|
||||
- Google AI
|
||||
- Google Vertex AI
|
||||
- Azure OpenAI
|
||||
- Ollama
|
||||
- OpenRouter
|
||||
- AIHubMix
|
||||
- DeepSeek
|
||||
- SiliconFlow
|
||||
- ModelScope
|
||||
- SGLang
|
||||
- Vercel AI Gateway
|
||||
|
||||
AWS BedrockとOpenRouter以外のすべてのプロバイダーはカスタムエンドポイントをサポートしています。
|
||||
|
||||
📖 **[詳細なプロバイダー設定ガイド](./ai-providers.md)** - 各プロバイダーの設定手順をご覧ください。
|
||||
|
||||
### サーバーサイドマルチモデル設定
|
||||
|
||||
管理者は、ユーザーが個人のAPIキーを提供することなく利用できる複数のサーバーサイドモデルを設定できます。`AI_MODELS_CONFIG` 環境変数(JSON文字列)または `ai-models.json` ファイルで設定します。同一プロバイダー内の複数モデルだけが必要な場合は、`AI_MODEL` にカンマ区切りでモデルIDを列挙する簡易設定も使えます。
|
||||
|
||||
**モデル要件**:このタスクは厳密なフォーマット制約(draw.io XML)を持つ長文テキスト生成を伴うため、強力なモデル機能が必要です。Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro、DeepSeek V3.2/R1を推奨します。
|
||||
|
||||
注:`claude`シリーズはAWS、Azure、GCPなどのクラウドアーキテクチャロゴ付きのdraw.ioダイアグラムで学習されているため、クラウドアーキテクチャダイアグラムを作成したい場合は最適な選択です。
|
||||
|
||||
### 管理パネル
|
||||
|
||||
`ADMIN_PASSWORD` 環境変数を設定して `/admin` にアクセスすると、`.env` を手動で編集する代わりに Web パネルでサーバー設定(モデル、アクセスコード、機能、可観測性、クォータ)を管理できます。
|
||||
|
||||
📖 **[管理パネルガイド](./admin-panel.md)** — 有効化の方法、優先順位ルール、注意事項。
|
||||
|
||||
|
||||
## 仕組み
|
||||
|
||||
本アプリケーションは以下の技術を使用しています:
|
||||
|
||||
- **Next.js**:フロントエンドフレームワークとルーティング
|
||||
- **Vercel AI SDK**(`ai` + `@ai-sdk/*`):ストリーミングAIレスポンスとマルチプロバイダーサポート
|
||||
- **draw.io**:エディターは `public/drawio` に同梱したコピー(`npm run dev` / `npm run build` で自動ダウンロード)で動作し、アプリから直接操作できます
|
||||
|
||||
ダイアグラムはdraw.ioでレンダリングできるXMLとして表現されます。AIがコマンドを処理し、それに応じてこのXMLを生成または変更します。
|
||||
|
||||
|
||||
## サポート&お問い合わせ
|
||||
|
||||
**デモサイトのAPIトークン使用を支援してくださった[ByteDance Doubao](https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio)に特別な感謝を申し上げます!** ARKプラットフォームに登録すると、50万トークンが無料でもらえます!
|
||||
|
||||
このプロジェクトが役に立ったら、ライブデモサイトのホスティングを支援するために[スポンサー](https://github.com/sponsors/DayuanJiang)をご検討ください!
|
||||
|
||||
サポートやお問い合わせについては、GitHubリポジトリでissueを開くか、メンテナーにご連絡ください:
|
||||
|
||||
- メール:me[at]jiang.jp
|
||||
|
||||
## よくある質問
|
||||
|
||||
一般的な問題と解決策については [FAQ](./FAQ.md) をご覧ください。
|
||||
|
||||
## スター履歴
|
||||
|
||||
[](https://www.star-history.com/#DayuanJiang/next-ai-draw-io&type=date&legend=top-left)
|
||||
|
||||
</div>
|
||||
---
|
||||
|
||||
@@ -13,6 +13,8 @@
|
||||
|
||||
### Doubao (ByteDance Volcengine)
|
||||
|
||||
> **無料トークン**: [Volcengine ARK プラットフォーム](https://www.volcengine.com/activity/codingplan?ac=MMAP8JTTCAQ2&rc=Z9Z3LDTJ&utm_campaign=drawio&utm_content=drawio&utm_medium=devrel&utm_source=OWO&utm_term=drawio)に登録すると、すべてのモデルで使える50万トークンが無料で入手できます!
|
||||
|
||||
```bash
|
||||
DOUBAO_API_KEY=your_api_key
|
||||
AI_MODEL=doubao-seed-1-8-251215 # または他の Doubao モデル
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
"replicateDescription": "Upload and replicate an existing flowchart",
|
||||
"creativeDrawing": "Creative drawing",
|
||||
"creativeDescription": "Draw something fun and creative",
|
||||
"cachedNote": "Examples use saved answers: they appear instantly and don't call the AI.",
|
||||
"cachedNote": "Examples open instantly and don't use your model.",
|
||||
"mcpServer": "MCP Server",
|
||||
"mcpDescription": "Use in Claude Desktop, VS Code & Cursor"
|
||||
},
|
||||
@@ -96,7 +96,7 @@
|
||||
"language": "Language",
|
||||
"languageDescription": "Choose your interface language.",
|
||||
"theme": "Theme",
|
||||
"themeDescription": "Light or dark interface. The canvas follows the same theme.",
|
||||
"themeDescription": "Light or dark interface. The diagram always stays on a white sheet, the way it exports.",
|
||||
"diagramStyle": "Diagram style",
|
||||
"diagramStyleDescription": "How the AI draws new diagrams: Styled uses colors and icons, Minimal keeps shapes plain.",
|
||||
"sendShortcut": "Send shortcut",
|
||||
@@ -118,7 +118,7 @@
|
||||
"customSystemMessage": "Custom instructions",
|
||||
"customSystemMessageDescription": "Add custom instructions appended to the AI's system prompt.",
|
||||
"customSystemMessagePlaceholder": "e.g., Always use blue color scheme for diagrams...",
|
||||
"maxOutputTokens": "Output token limit",
|
||||
"maxOutputTokens": "Max output tokens",
|
||||
"maxOutputTokensDescription": "Budget for one reply, shared by thinking and the diagram XML. Raise it if the AI keeps thinking and no diagram appears. Leave empty for the default.",
|
||||
"tabModels": "Models",
|
||||
"tabAbout": "About",
|
||||
@@ -211,13 +211,14 @@
|
||||
"tpmLimit": "Rate Limit",
|
||||
"tpmMessage": "Too many requests. Please wait a moment.",
|
||||
"tpmMessageDetailed": "Rate limit reached ({limit} tokens/min). Please wait {seconds} seconds before sending another request.",
|
||||
"messageApi": "Looks like you've reached today's demo limit. We're glad you're enjoying it; the limit keeps the demo fair for everyone.",
|
||||
"messageApi": "Looks like you've reached today's demo limit. We're thrilled you're enjoying it, and while ByteDance Doubao generously sponsors this demo, we've had to set a few boundaries to keep things fair for everyone.",
|
||||
"messageApiSelfHosted": null,
|
||||
"messageToken": "Looks like you've reached today's token limit. We're glad you're enjoying it; the limit keeps the demo fair for everyone.",
|
||||
"messageToken": "Looks like you've reached today's token limit. We're thrilled you're enjoying it, and while ByteDance Doubao generously sponsors this demo, we've had to set a few boundaries to keep things fair for everyone.",
|
||||
"messageTokenSelfHosted": null,
|
||||
"tip": "<strong>Tip:</strong> You can use your own API key (click the Settings icon) or self-host the project to bypass these limits.",
|
||||
"tipSelfHosted": "<strong>Tip:</strong> You can configure your own API key in the settings to continue using the service.",
|
||||
"reset": "Your limit resets tomorrow. Thanks for understanding.",
|
||||
"doubaoSponsorship": "<a href=\"{link}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"underline hover:text-foreground\">Register here</a> to get 500K free tokens per model (including Doubao, DeepSeek and Kimi), then configure your API key in model settings.",
|
||||
"configModel": "Use Your API Key",
|
||||
"selfHost": "Self-host",
|
||||
"sponsor": "Sponsor",
|
||||
@@ -399,7 +400,7 @@
|
||||
"searchModels": "Search models...",
|
||||
"noModelsFound": "No models found.",
|
||||
"default": "Default",
|
||||
"serverDefault": "Server model",
|
||||
"serverDefault": "Server Default",
|
||||
"serverModels": "Server Models",
|
||||
"userModels": "User Models",
|
||||
"configureModels": "Configure Models...",
|
||||
@@ -482,46 +483,46 @@
|
||||
},
|
||||
"admin": {
|
||||
"title": "Admin Settings",
|
||||
"loginPrompt": "Enter the admin password (the ADMIN_PASSWORD environment variable)",
|
||||
"loginPrompt": "Enter the admin password (the ADMIN_PASSWORD environment variable) to manage server settings.",
|
||||
"password": "Password",
|
||||
"signIn": "Sign In",
|
||||
"signingIn": "Signing in…",
|
||||
"signingIn": "Signing In…",
|
||||
"loginFailed": "Login failed",
|
||||
"precedence": "Priority: this page > environment variables > defaults",
|
||||
"notWritable": "Settings can't be saved on this deployment, only viewed; use environment variables instead",
|
||||
"precedence": "File overrides env · env overrides defaults",
|
||||
"notWritable": "The settings file is not writable on this deployment (serverless platforms have no persistent disk). Settings are shown read-only — configure via environment variables instead.",
|
||||
"settingGroups": "Setting groups",
|
||||
"enabled": "On",
|
||||
"disabled": "Off",
|
||||
"enableGroup": "Turn on {group}",
|
||||
"enabled": "Enabled",
|
||||
"disabled": "Disabled",
|
||||
"enableGroup": "Enable {group}",
|
||||
"unsavedChanges": "Unsaved changes",
|
||||
"saved": "Saved. Changes apply right away, except items marked \"Needs restart\"",
|
||||
"saveFailed": "Save failed. Check your connection and try again",
|
||||
"invalidSettings": "Some settings are invalid; see the notes under them",
|
||||
"discard": "Discard changes",
|
||||
"saveChanges": "Save changes",
|
||||
"saved": "Settings saved. Changes apply immediately.",
|
||||
"saveFailed": "Save failed. Check your connection and try again.",
|
||||
"invalidSettings": "Some settings are invalid.",
|
||||
"discard": "Discard",
|
||||
"saveChanges": "Save Changes",
|
||||
"saving": "Saving…",
|
||||
"sourceSaved": "This page",
|
||||
"sourceSaved": "Saved",
|
||||
"sourceEnv": "Env",
|
||||
"sourceSavedTitle": "Set on this page",
|
||||
"sourceEnvTitle": "From an environment variable",
|
||||
"restartRequired": "Needs restart",
|
||||
"sourceSavedTitle": "Set in the admin settings file",
|
||||
"sourceEnvTitle": "Set by an environment variable",
|
||||
"restartRequired": "Restart Required",
|
||||
"modified": "Modified",
|
||||
"notSet": "Not set",
|
||||
"savedReplace": "Saved ({hint}); type a new value to replace it",
|
||||
"showValue": "Show",
|
||||
"hideValue": "Hide",
|
||||
"removeValue": "Clear",
|
||||
"removeValueTitle": "Clear the saved value",
|
||||
"savedReplace": "Saved ({hint}) — type to replace",
|
||||
"showValue": "Show value",
|
||||
"hideValue": "Hide value",
|
||||
"removeValue": "Remove value",
|
||||
"removeValueTitle": "Remove the stored value",
|
||||
"resetToDefault": "Reset to default",
|
||||
"models": "Models",
|
||||
"modelsDescription": "Models every user can use, no personal API key needed",
|
||||
"addProviderHint": "Add a provider to offer models to all users",
|
||||
"selectProviderHint": "Select or add a provider, then enter its key and models",
|
||||
"addProviderToOfferModels": "Add at least one model before users can see this provider",
|
||||
"managedViaEnv": "(environment variables)",
|
||||
"envReadOnly": "Defined in AI_MODELS_CONFIG / ai-models.json; view only here, edit it there",
|
||||
"modelsDescription": "Server-side providers and models available to all users — no personal API key needed. The default provider's first model is used when users don't pick one.",
|
||||
"addProviderHint": "Add a provider to offer server-side models to all users.",
|
||||
"selectProviderHint": "Select or add a provider to configure its credentials and models.",
|
||||
"addProviderToOfferModels": "Add at least one model to expose this provider to users.",
|
||||
"managedViaEnv": "(managed via env)",
|
||||
"envReadOnly": "Defined in AI_MODELS_CONFIG / ai-models.json — read-only here. Edit the environment configuration to change it.",
|
||||
"defaultModel": "Default Model",
|
||||
"noModelsConfigured": "No models yet",
|
||||
"noModelsConfigured": "No models configured",
|
||||
"modelCount": "{count} model",
|
||||
"modelCountPlural": "{count} models",
|
||||
"default": "Default",
|
||||
@@ -531,65 +532,65 @@
|
||||
"addModel": "Add model",
|
||||
"suggested": "Suggested",
|
||||
"test": "Test",
|
||||
"testOk": "Passed ({ms} ms)",
|
||||
"testOk": "OK ({ms}ms)",
|
||||
"testFailed": "Failed",
|
||||
"removeModel": "Delete {model}",
|
||||
"removeModel": "Remove {model}",
|
||||
"deleteProviderTitle": "Delete {name}?",
|
||||
"deleteProviderDesc": "After you save, its key and models are deleted from the server",
|
||||
"deleteProviderDesc": "Its credentials and models will be removed from the server after you save.",
|
||||
"cancel": "Cancel",
|
||||
"delete": "Delete",
|
||||
"groups": {
|
||||
"generation": {
|
||||
"title": "Replies",
|
||||
"description": "How the AI replies, for every conversation"
|
||||
"title": "Generation",
|
||||
"description": "Output parameters applied to all chat requests."
|
||||
},
|
||||
"access": {
|
||||
"title": "Access",
|
||||
"description": "Limit who can use this site"
|
||||
"title": "Access Control",
|
||||
"description": "Restrict who can use this deployment."
|
||||
},
|
||||
"features": {
|
||||
"title": "Optional Features",
|
||||
"description": "Extra features and safety options"
|
||||
"title": "Features",
|
||||
"description": "Optional features and security toggles."
|
||||
},
|
||||
"observability": {
|
||||
"title": "Call Logs",
|
||||
"description": "Record model calls with Langfuse"
|
||||
"title": "Observability",
|
||||
"description": "Langfuse tracing for LLM calls."
|
||||
},
|
||||
"quota": {
|
||||
"title": "Usage Limits",
|
||||
"description": "Per-IP limits; they take effect only with a DynamoDB table"
|
||||
"title": "Quota & Rate Limits",
|
||||
"description": "Per-IP usage limits. Enforcement requires a DynamoDB table."
|
||||
}
|
||||
},
|
||||
"settings": {
|
||||
"TEMPERATURE": {
|
||||
"label": "Temperature",
|
||||
"description": "Higher is more random; leave empty for reasoning models that don't support it"
|
||||
"description": "Leave unset for reasoning models that reject temperature."
|
||||
},
|
||||
"MAX_OUTPUT_TOKENS": {
|
||||
"label": "Output Token Limit"
|
||||
"label": "Max Output Tokens"
|
||||
},
|
||||
"ACCESS_CODE_LIST": {
|
||||
"label": "Access Codes",
|
||||
"description": "Separate several with commas; users must enter one to chat; empty means no limit"
|
||||
"description": "Comma-separated list. Users must enter one to chat. Empty = open access."
|
||||
},
|
||||
"ENABLE_VLM_VALIDATION": {
|
||||
"label": "Diagram Check",
|
||||
"description": "After drawing, a model that can see images checks a screenshot"
|
||||
"label": "VLM Diagram Validation",
|
||||
"description": "Visually validate generated diagrams with a vision model."
|
||||
},
|
||||
"VALIDATION_MODEL": {
|
||||
"label": "Check Model",
|
||||
"description": "Empty means the default model"
|
||||
"label": "Validation Model",
|
||||
"description": "Falls back to the default AI model when empty."
|
||||
},
|
||||
"VALIDATION_TIMEOUT": {
|
||||
"label": "Check Timeout (ms)"
|
||||
"label": "Validation Timeout (ms)"
|
||||
},
|
||||
"ENABLE_HISTORY_XML_REPLACE": {
|
||||
"label": "Trim Old Diagrams",
|
||||
"description": "Old diagrams in the chat history are kept as a short marker"
|
||||
"label": "History XML Compression",
|
||||
"description": "Replace old diagram XML in history with placeholders."
|
||||
},
|
||||
"ALLOW_PRIVATE_URLS": {
|
||||
"label": "Allow Private URLs",
|
||||
"description": "When off, custom model URLs can't point to private networks; safer"
|
||||
"description": "Turn off to block requests to private IPs and internal hostnames (SSRF protection)."
|
||||
},
|
||||
"LANGFUSE_PUBLIC_KEY": {
|
||||
"label": "Langfuse Public Key"
|
||||
@@ -598,29 +599,29 @@
|
||||
"label": "Langfuse Secret Key"
|
||||
},
|
||||
"LANGFUSE_BASEURL": {
|
||||
"label": "Langfuse URL"
|
||||
"label": "Langfuse Base URL"
|
||||
},
|
||||
"DAILY_REQUEST_LIMIT": {
|
||||
"label": "Daily Requests",
|
||||
"description": "Requests per IP per day"
|
||||
"label": "Daily Request Limit",
|
||||
"description": "Per IP per day."
|
||||
},
|
||||
"DAILY_TOKEN_LIMIT": {
|
||||
"label": "Daily Tokens",
|
||||
"description": "Tokens per IP per day"
|
||||
"label": "Daily Token Limit",
|
||||
"description": "Per IP per day."
|
||||
},
|
||||
"TPM_LIMIT": {
|
||||
"label": "Tokens Per Minute"
|
||||
},
|
||||
"DYNAMODB_QUOTA_TABLE": {
|
||||
"label": "DynamoDB Table Name",
|
||||
"description": "Empty means no usage limits"
|
||||
"label": "DynamoDB Table",
|
||||
"description": "Quota enforcement is disabled when empty."
|
||||
},
|
||||
"DYNAMODB_REGION": {
|
||||
"label": "DynamoDB Region"
|
||||
},
|
||||
"QUOTA_TIMEZONE": {
|
||||
"label": "Time Zone",
|
||||
"description": "Daily usage resets at midnight in this time zone"
|
||||
"label": "Quota Timezone",
|
||||
"description": "Timezone for the daily reset boundary."
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -694,7 +695,7 @@
|
||||
},
|
||||
"lobby": {
|
||||
"title": "What would you like to draw?",
|
||||
"lede": "Describe a diagram or upload a screenshot or PDF. You get a draw.io diagram you can keep editing and export.",
|
||||
"lede": "Describe a diagram, or upload a screenshot or PDF. You get a regular draw.io diagram that you can keep editing and export.",
|
||||
"placeholder": "For example: a login sequence diagram with SMS codes and retries",
|
||||
"recent": "Recent diagrams",
|
||||
"drawYourself": "Start with a blank canvas",
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
"replicateDescription": "既存のフローチャートをアップロードして複製",
|
||||
"creativeDrawing": "自由なイラスト",
|
||||
"creativeDescription": "楽しくてクリエイティブなものを描く",
|
||||
"cachedNote": "例は保存済みの回答を使うので、すぐに表示され、AI を呼び出しません。",
|
||||
"cachedNote": "例はすぐに開き、モデルは使いません。",
|
||||
"mcpServer": "MCP サーバー",
|
||||
"mcpDescription": "Claude Desktop、VS Code、Cursor で使用"
|
||||
},
|
||||
@@ -96,7 +96,7 @@
|
||||
"language": "言語",
|
||||
"languageDescription": "インターフェース言語を選択します。",
|
||||
"theme": "テーマ",
|
||||
"themeDescription": "画面をライトにするかダークにするか。キャンバスも同じテーマになります。",
|
||||
"themeDescription": "画面をライトにするかダークにするか。図はエクスポートしたときと同じく、常に白い用紙の上に表示されます。",
|
||||
"diagramStyle": "図のスタイル",
|
||||
"diagramStyleDescription": "AI が新しい図を描くときのスタイル。スタイル付きは色やアイコンを使い、ミニマルは素朴な図形だけにします。",
|
||||
"sendShortcut": "送信のショートカット",
|
||||
@@ -118,7 +118,7 @@
|
||||
"customSystemMessage": "カスタム指示",
|
||||
"customSystemMessageDescription": "AIのシステムプロンプトに追加されるカスタム指示を入力します。",
|
||||
"customSystemMessagePlaceholder": "例:ダイアグラムには常に青色のカラースキームを使用...",
|
||||
"maxOutputTokens": "出力トークン上限",
|
||||
"maxOutputTokens": "最大出力トークン数",
|
||||
"maxOutputTokensDescription": "1回の応答の予算で、思考過程とダイアグラムの XML が共有します。AI が考え続けてダイアグラムが生成されない場合は大きくしてください。空欄ならデフォルト値を使います。",
|
||||
"tabModels": "モデル",
|
||||
"tabAbout": "このアプリについて",
|
||||
@@ -211,13 +211,14 @@
|
||||
"tpmLimit": "レート制限",
|
||||
"tpmMessage": "リクエストが多すぎます。しばらくお待ちください。",
|
||||
"tpmMessageDetailed": "レート制限に達しました({limit}トークン/分)。{seconds}秒待ってからもう一度リクエストしてください。",
|
||||
"messageApi": "今日のデモ利用上限に達したようです。楽しんでいただけて嬉しいです。皆様に公平にご利用いただくため、利用量に上限を設けています。",
|
||||
"messageApi": "今日のデモ利用上限に達してしまったようです。楽しんでいただけて本当に嬉しいです。このデモはByteDance Doubaoのご厚意により提供されていますが、皆様に公平にご利用いただくため、少し制限を設けさせていただいております。",
|
||||
"messageApiSelfHosted": null,
|
||||
"messageToken": "今日のトークン利用上限に達したようです。楽しんでいただけて嬉しいです。皆様に公平にご利用いただくため、利用量に上限を設けています。",
|
||||
"messageToken": "今日のトークン利用上限に達してしまったようです。楽しんでいただけて本当に嬉しいです。このデモはByteDance Doubaoのご厚意により提供されていますが、皆様に公平にご利用いただくため、少し制限を設けさせていただいております。",
|
||||
"messageTokenSelfHosted": null,
|
||||
"tip": "<strong>ヒント:</strong>独自の API キーを使用する(設定アイコンをクリック)か、プロジェクトをセルフホストしてこれらの制限を回避できます。",
|
||||
"tipSelfHosted": "<strong>ヒント:</strong>設定で独自の API キーを設定することで、引き続きサービスをご利用いただけます。",
|
||||
"reset": "制限は明日リセットされます。ご理解ありがとうございます。",
|
||||
"doubaoSponsorship": "<a href=\"{link}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"underline hover:text-foreground\">こちらから登録</a>すると、各モデル(Doubao、DeepSeek、Kimi含む)で50万トークンを無料で取得できます。モデル設定でAPIキーを設定してください。",
|
||||
"configModel": "APIキーを使用",
|
||||
"selfHost": "セルフホスト",
|
||||
"sponsor": "スポンサー",
|
||||
@@ -354,7 +355,7 @@
|
||||
"searchModels": "モデルを検索...",
|
||||
"noModelsFound": "モデルが見つかりません。",
|
||||
"default": "デフォルト",
|
||||
"serverDefault": "サーバーのモデル",
|
||||
"serverDefault": "サーバーデフォルト",
|
||||
"serverModels": "サーバーモデル",
|
||||
"userModels": "ユーザーモデル",
|
||||
"configureModels": "モデルを設定...",
|
||||
@@ -482,114 +483,114 @@
|
||||
},
|
||||
"admin": {
|
||||
"title": "管理者設定",
|
||||
"loginPrompt": "管理者パスワード(環境変数 ADMIN_PASSWORD)を入力してください",
|
||||
"loginPrompt": "サーバー設定を管理するには、管理者パスワード(ADMIN_PASSWORD 環境変数)を入力してください。",
|
||||
"password": "パスワード",
|
||||
"signIn": "ログイン",
|
||||
"signingIn": "ログイン中…",
|
||||
"loginFailed": "ログインに失敗しました",
|
||||
"precedence": "優先順位:このページ > 環境変数 > 既定値",
|
||||
"notWritable": "この環境では設定を保存できず、表示のみです。環境変数で設定してください",
|
||||
"settingGroups": "設定の分類",
|
||||
"enabled": "オン",
|
||||
"disabled": "オフ",
|
||||
"enableGroup": "{group} をオンにする",
|
||||
"precedence": "ファイルが環境変数を上書き · 環境変数がデフォルトを上書き",
|
||||
"notWritable": "このデプロイ環境では設定ファイルに書き込めません(サーバーレス環境には永続ディスクがありません)。設定は読み取り専用で表示されます——代わりに環境変数で構成してください。",
|
||||
"settingGroups": "設定グループ",
|
||||
"enabled": "有効",
|
||||
"disabled": "無効",
|
||||
"enableGroup": "{group} を有効化",
|
||||
"unsavedChanges": "未保存の変更があります",
|
||||
"saved": "保存しました。「再起動が必要」の項目以外はすぐに反映されます",
|
||||
"saveFailed": "保存に失敗しました。接続を確認してもう一度お試しください",
|
||||
"invalidSettings": "入力に誤りがある設定があります。項目の下の説明を確認してください",
|
||||
"discard": "変更を破棄",
|
||||
"saved": "設定を保存しました。変更は即座に反映されます。",
|
||||
"saveFailed": "保存に失敗しました。接続を確認して再試行してください。",
|
||||
"invalidSettings": "一部の設定が無効です。",
|
||||
"discard": "破棄",
|
||||
"saveChanges": "変更を保存",
|
||||
"saving": "保存中…",
|
||||
"sourceSaved": "このページ",
|
||||
"sourceSaved": "保存済み",
|
||||
"sourceEnv": "環境変数",
|
||||
"sourceSavedTitle": "このページで設定した値",
|
||||
"sourceEnvTitle": "環境変数による設定",
|
||||
"sourceSavedTitle": "管理者設定ファイルで設定",
|
||||
"sourceEnvTitle": "環境変数で設定",
|
||||
"restartRequired": "再起動が必要",
|
||||
"modified": "変更済み",
|
||||
"notSet": "未設定",
|
||||
"savedReplace": "保存済み({hint})。新しい値を入力すると置き換わります",
|
||||
"showValue": "表示",
|
||||
"hideValue": "非表示",
|
||||
"removeValue": "クリア",
|
||||
"removeValueTitle": "保存した値をクリア",
|
||||
"savedReplace": "保存済み({hint})——入力して置き換え",
|
||||
"showValue": "値を表示",
|
||||
"hideValue": "値を非表示",
|
||||
"removeValue": "値を削除",
|
||||
"removeValueTitle": "保存された値を削除",
|
||||
"resetToDefault": "デフォルトに戻す",
|
||||
"models": "モデル",
|
||||
"modelsDescription": "全ユーザーが使えるモデル。個人の API キーは不要です",
|
||||
"addProviderHint": "プロバイダーを追加して、全ユーザーにモデルを提供します",
|
||||
"selectProviderHint": "プロバイダーを選択または追加し、キーとモデルを入力します",
|
||||
"addProviderToOfferModels": "モデルを 1 つ以上追加すると、ユーザーにこのプロバイダーが表示されます",
|
||||
"managedViaEnv": "(環境変数)",
|
||||
"envReadOnly": "AI_MODELS_CONFIG / ai-models.json で定義されています。ここでは表示のみで、変更はそちらで行ってください",
|
||||
"modelsDescription": "全ユーザーが利用できるサーバー側のプロバイダーとモデル——個人の API キーは不要です。ユーザーがモデルを選択しない場合、デフォルトプロバイダーの最初のモデルが使用されます。",
|
||||
"addProviderHint": "プロバイダーを追加して、全ユーザーにサーバー側モデルを提供します。",
|
||||
"selectProviderHint": "プロバイダーを選択または追加して、その資格情報とモデルを構成します。",
|
||||
"addProviderToOfferModels": "ユーザーにこのプロバイダーを公開するには、モデルを少なくとも 1 つ追加してください。",
|
||||
"managedViaEnv": "(環境変数で管理)",
|
||||
"envReadOnly": "AI_MODELS_CONFIG / ai-models.json で定義——ここでは読み取り専用です。変更するには環境構成を編集してください。",
|
||||
"defaultModel": "デフォルトモデル",
|
||||
"noModelsConfigured": "モデルはまだありません",
|
||||
"noModelsConfigured": "モデルが構成されていません",
|
||||
"modelCount": "{count} 個のモデル",
|
||||
"modelCountPlural": "{count} 個のモデル",
|
||||
"default": "デフォルト",
|
||||
"setAsDefault": "既定のプロバイダーにする",
|
||||
"defaultProvider": "既定のプロバイダー",
|
||||
"setAsDefault": "デフォルトプロバイダーに設定",
|
||||
"defaultProvider": "デフォルトプロバイダー",
|
||||
"modelIdPlaceholder": "モデル ID…",
|
||||
"addModel": "モデルを追加",
|
||||
"suggested": "おすすめ",
|
||||
"test": "テスト",
|
||||
"testOk": "成功({ms} ms)",
|
||||
"testOk": "正常({ms}ms)",
|
||||
"testFailed": "失敗",
|
||||
"removeModel": "{model} を削除",
|
||||
"deleteProviderTitle": "{name} を削除しますか?",
|
||||
"deleteProviderDesc": "保存すると、このプロバイダーのキーとモデルがサーバーから削除されます",
|
||||
"deleteProviderDesc": "保存後、その資格情報とモデルはサーバーから削除されます。",
|
||||
"cancel": "キャンセル",
|
||||
"delete": "削除",
|
||||
"groups": {
|
||||
"generation": {
|
||||
"title": "応答の設定",
|
||||
"description": "AI の応答のしかたを決めます。すべての会話に適用されます"
|
||||
"title": "生成",
|
||||
"description": "すべてのチャットリクエストに適用される出力パラメーター。"
|
||||
},
|
||||
"access": {
|
||||
"title": "アクセス権",
|
||||
"description": "このサイトを使える人を制限します"
|
||||
"title": "アクセス制御",
|
||||
"description": "このデプロイを使用できるユーザーを制限します。"
|
||||
},
|
||||
"features": {
|
||||
"title": "オプション機能",
|
||||
"description": "追加機能と安全のための設定"
|
||||
"title": "機能",
|
||||
"description": "オプション機能とセキュリティの切り替え。"
|
||||
},
|
||||
"observability": {
|
||||
"title": "呼び出し記録",
|
||||
"description": "モデルの呼び出しを Langfuse に記録します"
|
||||
"title": "オブザーバビリティ",
|
||||
"description": "LLM 呼び出しの Langfuse トレース。"
|
||||
},
|
||||
"quota": {
|
||||
"title": "使用量の制限",
|
||||
"description": "IP ごとの制限。DynamoDB テーブルがあるときだけ有効です"
|
||||
"title": "クォータとレート制限",
|
||||
"description": "IP ごとの使用制限。強制には DynamoDB テーブルが必要です。"
|
||||
}
|
||||
},
|
||||
"settings": {
|
||||
"TEMPERATURE": {
|
||||
"label": "温度",
|
||||
"description": "高いほどランダムになります。温度に対応しない推論モデルでは空にしてください"
|
||||
"description": "温度を受け付けない推論モデルの場合は未設定のままにしてください。"
|
||||
},
|
||||
"MAX_OUTPUT_TOKENS": {
|
||||
"label": "出力トークン上限"
|
||||
"label": "最大出力トークン数"
|
||||
},
|
||||
"ACCESS_CODE_LIST": {
|
||||
"label": "アクセスコード",
|
||||
"description": "複数はカンマ区切り。いずれかを入力しないと使えません。空なら制限なし"
|
||||
"description": "カンマ区切りのリスト。チャットにはいずれかの入力が必要です。空 = オープンアクセス。"
|
||||
},
|
||||
"ENABLE_VLM_VALIDATION": {
|
||||
"label": "図のチェック",
|
||||
"description": "描画後、画像を読めるモデルがスクリーンショットをチェックします"
|
||||
"label": "VLM 図検証",
|
||||
"description": "ビジョンモデルで生成された図を視覚的に検証します。"
|
||||
},
|
||||
"VALIDATION_MODEL": {
|
||||
"label": "チェック用モデル",
|
||||
"description": "空なら既定のモデルを使います"
|
||||
"label": "検証モデル",
|
||||
"description": "空の場合はデフォルトの AI モデルにフォールバックします。"
|
||||
},
|
||||
"VALIDATION_TIMEOUT": {
|
||||
"label": "チェックのタイムアウト(ms)"
|
||||
"label": "検証タイムアウト(ms)"
|
||||
},
|
||||
"ENABLE_HISTORY_XML_REPLACE": {
|
||||
"label": "古い図を省略",
|
||||
"description": "会話履歴の古い図は短い印だけ残します"
|
||||
"label": "履歴 XML 圧縮",
|
||||
"description": "履歴内の古い図 XML をプレースホルダーで置き換えます。"
|
||||
},
|
||||
"ALLOW_PRIVATE_URLS": {
|
||||
"label": "内部ネットワークへのアクセス",
|
||||
"description": "オフにすると、ユーザーが指定するモデルの URL に内部アドレスを使えなくなり、安全です"
|
||||
"label": "プライベート URL を許可",
|
||||
"description": "オフにすると、プライベート IP や内部ホスト名へのリクエストをブロックします(SSRF 保護)。"
|
||||
},
|
||||
"LANGFUSE_PUBLIC_KEY": {
|
||||
"label": "Langfuse Public Key"
|
||||
@@ -598,29 +599,29 @@
|
||||
"label": "Langfuse Secret Key"
|
||||
},
|
||||
"LANGFUSE_BASEURL": {
|
||||
"label": "Langfuse の URL"
|
||||
"label": "Langfuse Base URL"
|
||||
},
|
||||
"DAILY_REQUEST_LIMIT": {
|
||||
"label": "1 日のリクエスト数",
|
||||
"description": "IP ごとの 1 日あたりのリクエスト数の上限"
|
||||
"label": "1 日あたりのリクエスト上限",
|
||||
"description": "IP ごと 1 日あたり。"
|
||||
},
|
||||
"DAILY_TOKEN_LIMIT": {
|
||||
"label": "1 日のトークン数",
|
||||
"description": "IP ごとの 1 日あたりのトークン使用量の上限"
|
||||
"label": "1 日あたりのトークン上限",
|
||||
"description": "IP ごと 1 日あたり。"
|
||||
},
|
||||
"TPM_LIMIT": {
|
||||
"label": "1 分あたりのトークン数"
|
||||
},
|
||||
"DYNAMODB_QUOTA_TABLE": {
|
||||
"label": "DynamoDB テーブル名",
|
||||
"description": "空なら使用量を制限しません"
|
||||
"label": "DynamoDB テーブル",
|
||||
"description": "空の場合、クォータの強制は無効になります。"
|
||||
},
|
||||
"DYNAMODB_REGION": {
|
||||
"label": "DynamoDB リージョン"
|
||||
},
|
||||
"QUOTA_TIMEZONE": {
|
||||
"label": "タイムゾーン",
|
||||
"description": "1 日の使用量はこのタイムゾーンの 0 時にリセットされます"
|
||||
"label": "クォータタイムゾーン",
|
||||
"description": "1 日のリセット境界に使用するタイムゾーン。"
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -694,7 +695,7 @@
|
||||
},
|
||||
"lobby": {
|
||||
"title": "どんな図を描きますか?",
|
||||
"lede": "図を説明するか、スクリーンショットや PDF をアップロードしてください。できあがるのは編集もエクスポートもできる draw.io の図です。",
|
||||
"lede": "図の内容を説明するか、スクリーンショットや PDF をアップロードしてください。できあがるのは通常の draw.io の図なので、続けて編集もエクスポートもできます。",
|
||||
"placeholder": "例:SMS 認証とリトライを含むログインのシーケンス図",
|
||||
"recent": "最近の図",
|
||||
"drawYourself": "白紙のキャンバスから始める",
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
"replicateDescription": "上傳並複製現有流程圖",
|
||||
"creativeDrawing": "創意繪畫",
|
||||
"creativeDescription": "繪製有趣且富有創意的內容",
|
||||
"cachedNote": "範例使用保存好的答案,立即顯示,不呼叫 AI。",
|
||||
"cachedNote": "範例會立即開啟,不呼叫模型。",
|
||||
"mcpServer": "MCP 伺服器",
|
||||
"mcpDescription": "在 Claude Desktop、VS Code 和 Cursor 中使用"
|
||||
},
|
||||
@@ -82,9 +82,9 @@
|
||||
"accessCode": "存取碼",
|
||||
"accessCodePlaceholder": "輸入存取碼",
|
||||
"accessCodeDescription": "使用此應用程式需要存取碼。",
|
||||
"aiProvider": "AI 服務商設定",
|
||||
"aiProvider": "AI 提供商設定",
|
||||
"aiProviderDescription": "使用您自己的 API 金鑰來繞過使用限制。您的金鑰僅儲存在瀏覽器本機,不會儲存在伺服器上。",
|
||||
"provider": "服務商",
|
||||
"provider": "提供商",
|
||||
"modelId": "模型 ID",
|
||||
"apiKey": "API 金鑰",
|
||||
"apiKeyPlaceholder": "您的 API 金鑰",
|
||||
@@ -96,7 +96,7 @@
|
||||
"language": "語言",
|
||||
"languageDescription": "選擇介面語言。",
|
||||
"theme": "主題",
|
||||
"themeDescription": "介面用淺色還是深色,畫布跟隨同一主題。",
|
||||
"themeDescription": "介面用淺色還是深色。圖紙始終是白底,和匯出後的樣子一致。",
|
||||
"diagramStyle": "圖形風格",
|
||||
"diagramStyleDescription": "AI 畫新圖時的風格:精緻會用顏色和圖示,簡約只用樸素的圖形。",
|
||||
"sendShortcut": "傳送快速鍵",
|
||||
@@ -118,7 +118,7 @@
|
||||
"customSystemMessage": "自訂指令",
|
||||
"customSystemMessageDescription": "新增自訂指示,將附加到 AI 的系統提示末尾。",
|
||||
"customSystemMessagePlaceholder": "例如:圖表始終使用藍色配色方案...",
|
||||
"maxOutputTokens": "輸出 token 上限",
|
||||
"maxOutputTokens": "最大輸出 token 數",
|
||||
"maxOutputTokensDescription": "單次回覆的額度,思考過程與圖表 XML 共用。若 AI 一直在思考卻沒有產生圖表,請將它調大。留空則使用預設值。",
|
||||
"tabModels": "模型",
|
||||
"tabAbout": "關於",
|
||||
@@ -207,17 +207,18 @@
|
||||
},
|
||||
"quota": {
|
||||
"dailyLimit": "已達每日配額",
|
||||
"tokenLimit": "已達每日 token 上限",
|
||||
"tokenLimit": "已達每日令牌限制",
|
||||
"tpmLimit": "速率限制",
|
||||
"tpmMessage": "請求過多。請稍等片刻。",
|
||||
"tpmMessageDetailed": "達到速率限制(每分鐘 {limit} token)。請等待 {seconds} 秒後再傳送請求。",
|
||||
"messageApi": "看來您今天的體驗次數已達上限。很高興您玩得開心;為了讓大家都能公平使用,示範站對用量做了限制。",
|
||||
"tpmMessageDetailed": "達到速率限制({limit} 令牌/分鐘)。請等待 {seconds} 秒後再傳送請求。",
|
||||
"messageApi": "看來您今天的體驗次數已達上限。非常高興您玩得開心,雖然本專案由字節跳動豆包慷慨贊助,但為了確保大家都能公平使用,我們不得不對使用量做一點小小的限制。",
|
||||
"messageApiSelfHosted": null,
|
||||
"messageToken": "看來您今天的 token 用量已達上限。很高興您玩得開心;為了讓大家都能公平使用,示範站對用量做了限制。",
|
||||
"messageToken": "看來您今天的 Token 用量已達上限。非常高興您玩得開心,雖然本專案由字節跳動豆包慷慨贊助,但為了確保大家都能公平使用,我們不得不對使用量做一點小小的限制。",
|
||||
"messageTokenSelfHosted": null,
|
||||
"tip": "<strong>提示:</strong>您可以使用自己的 API Key(點擊設定圖示)或自行託管專案來繞過這些限制。",
|
||||
"tipSelfHosted": "<strong>提示:</strong>您可以在設定中配置自己的 API Key 以繼續使用服務。",
|
||||
"reset": "您的限制將在明天重設。感謝您的理解。",
|
||||
"doubaoSponsorship": "<a href=\"{link}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"underline hover:text-foreground\">點此註冊</a>可獲得每個模型 50 萬免費 Token(包括豆包、DeepSeek 和 Kimi),然後在模型設定中配置您的 API Key。",
|
||||
"configModel": "使用自己的 API Key",
|
||||
"selfHost": "自行託管",
|
||||
"sponsor": "贊助",
|
||||
@@ -399,7 +400,7 @@
|
||||
"searchModels": "搜尋模型...",
|
||||
"noModelsFound": "未找到模型。",
|
||||
"default": "預設",
|
||||
"serverDefault": "伺服器模型",
|
||||
"serverDefault": "伺服器預設",
|
||||
"serverModels": "伺服器模型",
|
||||
"userModels": "使用者模型",
|
||||
"configureModels": "配置模型...",
|
||||
@@ -481,146 +482,146 @@
|
||||
"removeAccessKeys": "刪除存取金鑰"
|
||||
},
|
||||
"admin": {
|
||||
"title": "後台設定",
|
||||
"loginPrompt": "輸入管理員密碼(環境變數 ADMIN_PASSWORD)",
|
||||
"title": "管理員設定",
|
||||
"loginPrompt": "輸入管理員密碼(即 ADMIN_PASSWORD 環境變數)以管理伺服器設定。",
|
||||
"password": "密碼",
|
||||
"signIn": "登入",
|
||||
"signingIn": "登入中…",
|
||||
"signingIn": "正在登入…",
|
||||
"loginFailed": "登入失敗",
|
||||
"precedence": "優先順序:本頁設定 > 環境變數 > 預設值",
|
||||
"notWritable": "這裡無法儲存設定,只能檢視;請改用環境變數",
|
||||
"settingGroups": "設定分類",
|
||||
"enabled": "已開啟",
|
||||
"disabled": "已關閉",
|
||||
"enableGroup": "開啟{group}",
|
||||
"unsavedChanges": "有未儲存的修改",
|
||||
"saved": "已儲存,立即生效(需重啟的項目除外)",
|
||||
"saveFailed": "儲存失敗,請檢查網路後重試",
|
||||
"invalidSettings": "有設定填寫有誤,請依提示修改",
|
||||
"discard": "捨棄修改",
|
||||
"saveChanges": "儲存修改",
|
||||
"saving": "儲存中…",
|
||||
"sourceSaved": "本頁設定",
|
||||
"precedence": "檔案覆蓋環境變數 · 環境變數覆蓋預設值",
|
||||
"notWritable": "此部署環境下設定檔不可寫入(無伺服器平台沒有持久化磁碟)。設定以唯讀方式顯示——請改用環境變數進行設定。",
|
||||
"settingGroups": "設定分組",
|
||||
"enabled": "已啟用",
|
||||
"disabled": "已停用",
|
||||
"enableGroup": "啟用 {group}",
|
||||
"unsavedChanges": "有未儲存的變更",
|
||||
"saved": "設定已儲存,變更立即生效。",
|
||||
"saveFailed": "儲存失敗。請檢查網路連線後重試。",
|
||||
"invalidSettings": "部分設定無效。",
|
||||
"discard": "捨棄",
|
||||
"saveChanges": "儲存變更",
|
||||
"saving": "正在儲存…",
|
||||
"sourceSaved": "已儲存",
|
||||
"sourceEnv": "環境變數",
|
||||
"sourceSavedTitle": "來自本頁設定",
|
||||
"sourceEnvTitle": "來自環境變數",
|
||||
"restartRequired": "需重啟",
|
||||
"sourceSavedTitle": "在管理員設定檔中設定",
|
||||
"sourceEnvTitle": "透過環境變數設定",
|
||||
"restartRequired": "需要重新啟動",
|
||||
"modified": "已修改",
|
||||
"notSet": "未設定",
|
||||
"savedReplace": "已儲存({hint}),輸入新值即可取代",
|
||||
"showValue": "顯示",
|
||||
"hideValue": "隱藏",
|
||||
"removeValue": "清除",
|
||||
"removeValueTitle": "清除已儲存的值",
|
||||
"savedReplace": "已儲存({hint})——輸入以取代",
|
||||
"showValue": "顯示值",
|
||||
"hideValue": "隱藏值",
|
||||
"removeValue": "移除值",
|
||||
"removeValueTitle": "移除已儲存的值",
|
||||
"resetToDefault": "重設為預設",
|
||||
"models": "模型",
|
||||
"modelsDescription": "給所有使用者用的模型,無需自備金鑰",
|
||||
"addProviderHint": "新增服務商,為所有使用者提供模型",
|
||||
"selectProviderHint": "選擇或新增服務商,填寫金鑰和模型",
|
||||
"addProviderToOfferModels": "至少新增一個模型,使用者才能看到這個服務商",
|
||||
"managedViaEnv": "(環境變數)",
|
||||
"envReadOnly": "由 AI_MODELS_CONFIG / ai-models.json 定義,這裡只能檢視,請到那裡修改",
|
||||
"modelsDescription": "面向所有使用者的伺服器端 provider 與模型——無需個人 API 金鑰。當使用者未選擇模型時,使用預設 provider 的第一個模型。",
|
||||
"addProviderHint": "新增一個 provider,為所有使用者提供伺服器端模型。",
|
||||
"selectProviderHint": "選擇或新增一個 provider 以設定其憑證和模型。",
|
||||
"addProviderToOfferModels": "至少新增一個模型,才能向使用者開放此 provider。",
|
||||
"managedViaEnv": "(透過環境變數管理)",
|
||||
"envReadOnly": "在 AI_MODELS_CONFIG / ai-models.json 中定義——此處唯讀。請編輯環境設定以變更。",
|
||||
"defaultModel": "預設模型",
|
||||
"noModelsConfigured": "尚無模型",
|
||||
"noModelsConfigured": "未設定模型",
|
||||
"modelCount": "{count} 個模型",
|
||||
"modelCountPlural": "{count} 個模型",
|
||||
"default": "預設",
|
||||
"setAsDefault": "設為預設服務商",
|
||||
"defaultProvider": "預設服務商",
|
||||
"setAsDefault": "設為預設 provider",
|
||||
"defaultProvider": "預設 provider",
|
||||
"modelIdPlaceholder": "模型 ID…",
|
||||
"addModel": "新增模型",
|
||||
"suggested": "推薦",
|
||||
"test": "測試",
|
||||
"testOk": "通過({ms} 毫秒)",
|
||||
"testOk": "正常({ms} 毫秒)",
|
||||
"testFailed": "失敗",
|
||||
"removeModel": "刪除 {model}",
|
||||
"removeModel": "移除 {model}",
|
||||
"deleteProviderTitle": "刪除 {name}?",
|
||||
"deleteProviderDesc": "儲存後,它的金鑰和模型會從伺服器刪除",
|
||||
"deleteProviderDesc": "儲存後,其憑證和模型將從伺服器上移除。",
|
||||
"cancel": "取消",
|
||||
"delete": "刪除",
|
||||
"groups": {
|
||||
"generation": {
|
||||
"title": "回覆設定",
|
||||
"description": "控制 AI 怎麼回覆,對所有對話生效"
|
||||
"title": "生成",
|
||||
"description": "套用於所有聊天請求的輸出參數。"
|
||||
},
|
||||
"access": {
|
||||
"title": "存取權限",
|
||||
"description": "限制誰可以使用這個網站"
|
||||
"title": "存取控制",
|
||||
"description": "限制誰可以使用此部署。"
|
||||
},
|
||||
"features": {
|
||||
"title": "選用功能",
|
||||
"description": "附加功能和安全選項"
|
||||
"title": "功能",
|
||||
"description": "選用功能和安全開關。"
|
||||
},
|
||||
"observability": {
|
||||
"title": "呼叫記錄",
|
||||
"description": "用 Langfuse 記錄模型呼叫"
|
||||
"title": "可觀測性",
|
||||
"description": "對 LLM 呼叫進行 Langfuse 追蹤。"
|
||||
},
|
||||
"quota": {
|
||||
"title": "用量限制",
|
||||
"description": "按 IP 限制用量,需要 DynamoDB 資料表才生效"
|
||||
"title": "配額與速率限制",
|
||||
"description": "按 IP 的用量限制。強制執行需要 DynamoDB 表。"
|
||||
}
|
||||
},
|
||||
"settings": {
|
||||
"TEMPERATURE": {
|
||||
"label": "溫度",
|
||||
"description": "越高越隨機;不支援溫度的推理模型請留空"
|
||||
"description": "對於拒絕溫度參數的推理模型,請留空。"
|
||||
},
|
||||
"MAX_OUTPUT_TOKENS": {
|
||||
"label": "輸出 token 上限"
|
||||
"label": "最大輸出 token 數"
|
||||
},
|
||||
"ACCESS_CODE_LIST": {
|
||||
"label": "存取碼",
|
||||
"description": "逗號分隔多個;輸入其中一個才能用;留空則不限"
|
||||
"description": "以逗號分隔的清單。使用者需輸入其中之一才能聊天。留空 = 開放存取。"
|
||||
},
|
||||
"ENABLE_VLM_VALIDATION": {
|
||||
"label": "圖表檢查",
|
||||
"description": "畫完後讓能看圖的模型檢查截圖"
|
||||
"label": "VLM 圖表驗證",
|
||||
"description": "使用視覺模型對產生的圖表進行視覺化驗證。"
|
||||
},
|
||||
"VALIDATION_MODEL": {
|
||||
"label": "檢查模型",
|
||||
"description": "留空則用預設模型"
|
||||
"label": "驗證模型",
|
||||
"description": "留空時回退到預設 AI 模型。"
|
||||
},
|
||||
"VALIDATION_TIMEOUT": {
|
||||
"label": "檢查逾時(毫秒)"
|
||||
"label": "驗證逾時(毫秒)"
|
||||
},
|
||||
"ENABLE_HISTORY_XML_REPLACE": {
|
||||
"label": "精簡舊圖",
|
||||
"description": "對話歷史裡的舊圖表只留簡短標記"
|
||||
"label": "歷史 XML 壓縮",
|
||||
"description": "用占位符取代歷史記錄中的舊圖表 XML。"
|
||||
},
|
||||
"ALLOW_PRIVATE_URLS": {
|
||||
"label": "存取內網",
|
||||
"description": "關閉後,自訂模型位址不能指向內網,更安全"
|
||||
"label": "允許私有 URL",
|
||||
"description": "關閉以阻擋對私有 IP 和內部主機名的請求(SSRF 防護)。"
|
||||
},
|
||||
"LANGFUSE_PUBLIC_KEY": {
|
||||
"label": "Langfuse 公鑰"
|
||||
"label": "Langfuse Public Key"
|
||||
},
|
||||
"LANGFUSE_SECRET_KEY": {
|
||||
"label": "Langfuse 金鑰"
|
||||
"label": "Langfuse Secret Key"
|
||||
},
|
||||
"LANGFUSE_BASEURL": {
|
||||
"label": "Langfuse 位址"
|
||||
"label": "Langfuse Base URL"
|
||||
},
|
||||
"DAILY_REQUEST_LIMIT": {
|
||||
"label": "每日請求",
|
||||
"description": "每個 IP 每天的請求次數上限"
|
||||
"label": "每日請求上限",
|
||||
"description": "每個 IP 每天。"
|
||||
},
|
||||
"DAILY_TOKEN_LIMIT": {
|
||||
"label": "每日 token",
|
||||
"description": "每個 IP 每天的 token 用量上限"
|
||||
"label": "每日 token 上限",
|
||||
"description": "每個 IP 每天。"
|
||||
},
|
||||
"TPM_LIMIT": {
|
||||
"label": "每分鐘 token"
|
||||
"label": "每分鐘 token 數"
|
||||
},
|
||||
"DYNAMODB_QUOTA_TABLE": {
|
||||
"label": "DynamoDB 資料表名稱",
|
||||
"description": "留空則不限制用量"
|
||||
"label": "DynamoDB 表",
|
||||
"description": "留空時配額強制執行被停用。"
|
||||
},
|
||||
"DYNAMODB_REGION": {
|
||||
"label": "DynamoDB 區域"
|
||||
},
|
||||
"QUOTA_TIMEZONE": {
|
||||
"label": "時區",
|
||||
"description": "每日用量按這個時區的零點重置"
|
||||
"label": "配額時區",
|
||||
"description": "每日重置邊界所用的時區。"
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -694,7 +695,7 @@
|
||||
},
|
||||
"lobby": {
|
||||
"title": "說說你要畫什麼",
|
||||
"lede": "描述一張圖,或上傳截圖、PDF。得到的是可以繼續編輯和匯出的 draw.io 圖。",
|
||||
"lede": "描述一張圖,或上傳截圖、PDF。畫出來的是標準的 draw.io 圖表,可以接著改,也可以匯出。",
|
||||
"placeholder": "例如:使用者登入的時序圖,包含簡訊驗證碼和失敗重試",
|
||||
"recent": "最近的圖紙",
|
||||
"drawYourself": "從空白畫布開始",
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
"replicateDescription": "上传并复制现有流程图",
|
||||
"creativeDrawing": "创意绘画",
|
||||
"creativeDescription": "绘制有趣且富有创意的内容",
|
||||
"cachedNote": "示例使用保存好的答案,立即显示,不调用 AI。",
|
||||
"cachedNote": "示例会立即打开,不调用模型。",
|
||||
"mcpServer": "MCP 服务器",
|
||||
"mcpDescription": "在 Claude Desktop、VS Code 和 Cursor 中使用"
|
||||
},
|
||||
@@ -82,9 +82,9 @@
|
||||
"accessCode": "访问码",
|
||||
"accessCodePlaceholder": "输入访问码",
|
||||
"accessCodeDescription": "使用此应用程序需要访问码。",
|
||||
"aiProvider": "AI 服务商设置",
|
||||
"aiProvider": "AI 提供商设置",
|
||||
"aiProviderDescription": "使用您自己的 API 密钥来绕过使用限制。您的密钥仅存储在浏览器本地,不会存储在服务器上。",
|
||||
"provider": "服务商",
|
||||
"provider": "提供商",
|
||||
"modelId": "模型 ID",
|
||||
"apiKey": "API 密钥",
|
||||
"apiKeyPlaceholder": "您的 API 密钥",
|
||||
@@ -96,7 +96,7 @@
|
||||
"language": "语言",
|
||||
"languageDescription": "选择界面语言。",
|
||||
"theme": "主题",
|
||||
"themeDescription": "界面用浅色还是深色,画布跟随同一主题。",
|
||||
"themeDescription": "界面用浅色还是深色。图纸始终是白底,和导出后的样子一致。",
|
||||
"diagramStyle": "图形风格",
|
||||
"diagramStyleDescription": "AI 画新图时的风格:精致会用颜色和图标,简约只用朴素的图形。",
|
||||
"sendShortcut": "发送快捷键",
|
||||
@@ -118,7 +118,7 @@
|
||||
"customSystemMessage": "自定义指令",
|
||||
"customSystemMessageDescription": "添加自定义指令,将附加到 AI 的系统提示末尾。",
|
||||
"customSystemMessagePlaceholder": "例如:图表始终使用蓝色配色方案...",
|
||||
"maxOutputTokens": "输出 token 上限",
|
||||
"maxOutputTokens": "最大输出 token 数",
|
||||
"maxOutputTokensDescription": "单次回复的额度,思考过程和图表 XML 共用。如果 AI 一直在思考却没有生成图表,请把它调大。留空则使用默认值。",
|
||||
"tabModels": "模型",
|
||||
"tabAbout": "关于",
|
||||
@@ -207,17 +207,18 @@
|
||||
},
|
||||
"quota": {
|
||||
"dailyLimit": "已达每日配额",
|
||||
"tokenLimit": "已达每日 token 上限",
|
||||
"tokenLimit": "已达每日令牌限制",
|
||||
"tpmLimit": "速率限制",
|
||||
"tpmMessage": "请求过多。请稍等片刻。",
|
||||
"tpmMessageDetailed": "达到速率限制(每分钟 {limit} token)。请等待 {seconds} 秒后再发送请求。",
|
||||
"messageApi": "看来您今天的体验次数已达上限。很高兴您玩得开心;为了让大家都能公平使用,演示站对用量做了限制。",
|
||||
"tpmMessageDetailed": "达到速率限制({limit} 令牌/分钟)。请等待 {seconds} 秒后再发送请求。",
|
||||
"messageApi": "看来您今天的体验次数已达上限。非常高兴您玩得开心,虽然本项目由字节跳动豆包慷慨赞助,但为了确保大家都能公平使用,我们不得不对使用量做一点小小的限制。",
|
||||
"messageApiSelfHosted": null,
|
||||
"messageToken": "看来您今天的 token 用量已达上限。很高兴您玩得开心;为了让大家都能公平使用,演示站对用量做了限制。",
|
||||
"messageToken": "看来您今天的 Token 用量已达上限。非常高兴您玩得开心,虽然本项目由字节跳动豆包慷慨赞助,但为了确保大家都能公平使用,我们不得不对使用量做一点小小的限制。",
|
||||
"messageTokenSelfHosted": null,
|
||||
"tip": "<strong>提示:</strong>您可以使用自己的 API Key(点击设置图标)或自托管项目来绕过这些限制。",
|
||||
"tipSelfHosted": "<strong>提示:</strong>您可以在设置中配置自己的 API Key 以继续使用服务。",
|
||||
"reset": "您的限制将在明天重置。感谢您的理解。",
|
||||
"doubaoSponsorship": "<a href=\"{link}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"underline hover:text-foreground\">点击此处注册</a>可获得每个模型 50 万免费 Token(包括豆包、DeepSeek 和 Kimi),然后在模型设置中配置您的 API Key。",
|
||||
"configModel": "使用自己的 API Key",
|
||||
"selfHost": "自托管",
|
||||
"sponsor": "赞助",
|
||||
@@ -399,7 +400,7 @@
|
||||
"searchModels": "搜索模型...",
|
||||
"noModelsFound": "未找到模型。",
|
||||
"default": "默认",
|
||||
"serverDefault": "服务器模型",
|
||||
"serverDefault": "服务器默认",
|
||||
"serverModels": "服务器模型",
|
||||
"userModels": "用户模型",
|
||||
"configureModels": "配置模型...",
|
||||
@@ -481,146 +482,146 @@
|
||||
"removeAccessKeys": "删除访问密钥"
|
||||
},
|
||||
"admin": {
|
||||
"title": "后台设置",
|
||||
"loginPrompt": "输入管理员密码(环境变量 ADMIN_PASSWORD)",
|
||||
"title": "管理员设置",
|
||||
"loginPrompt": "输入管理员密码(即 ADMIN_PASSWORD 环境变量)以管理服务器设置。",
|
||||
"password": "密码",
|
||||
"signIn": "登录",
|
||||
"signingIn": "登录中…",
|
||||
"signingIn": "正在登录…",
|
||||
"loginFailed": "登录失败",
|
||||
"precedence": "优先级:本页设置 > 环境变量 > 默认值",
|
||||
"notWritable": "这里无法保存设置,只能查看;请改用环境变量",
|
||||
"settingGroups": "设置分类",
|
||||
"enabled": "已开启",
|
||||
"disabled": "已关闭",
|
||||
"enableGroup": "开启{group}",
|
||||
"unsavedChanges": "有未保存的修改",
|
||||
"saved": "已保存,立即生效(需重启的项除外)",
|
||||
"saveFailed": "保存失败,请检查网络后重试",
|
||||
"invalidSettings": "有设置填写有误,请按提示修改",
|
||||
"discard": "放弃修改",
|
||||
"saveChanges": "保存修改",
|
||||
"saving": "保存中…",
|
||||
"sourceSaved": "本页设置",
|
||||
"precedence": "文件覆盖环境变量 · 环境变量覆盖默认值",
|
||||
"notWritable": "此部署环境下设置文件不可写(无服务器平台没有持久化磁盘)。设置以只读方式显示——请改用环境变量进行配置。",
|
||||
"settingGroups": "设置分组",
|
||||
"enabled": "已启用",
|
||||
"disabled": "已禁用",
|
||||
"enableGroup": "启用 {group}",
|
||||
"unsavedChanges": "有未保存的更改",
|
||||
"saved": "设置已保存,更改立即生效。",
|
||||
"saveFailed": "保存失败。请检查网络连接后重试。",
|
||||
"invalidSettings": "部分设置无效。",
|
||||
"discard": "放弃",
|
||||
"saveChanges": "保存更改",
|
||||
"saving": "正在保存…",
|
||||
"sourceSaved": "已保存",
|
||||
"sourceEnv": "环境变量",
|
||||
"sourceSavedTitle": "来自本页设置",
|
||||
"sourceEnvTitle": "来自环境变量",
|
||||
"restartRequired": "需重启",
|
||||
"sourceSavedTitle": "在管理员设置文件中设置",
|
||||
"sourceEnvTitle": "通过环境变量设置",
|
||||
"restartRequired": "需要重启",
|
||||
"modified": "已修改",
|
||||
"notSet": "未设置",
|
||||
"savedReplace": "已保存({hint}),输入新值可替换",
|
||||
"showValue": "显示",
|
||||
"hideValue": "隐藏",
|
||||
"removeValue": "清除",
|
||||
"removeValueTitle": "清除已保存的值",
|
||||
"savedReplace": "已保存({hint})——输入以替换",
|
||||
"showValue": "显示值",
|
||||
"hideValue": "隐藏值",
|
||||
"removeValue": "移除值",
|
||||
"removeValueTitle": "移除已保存的值",
|
||||
"resetToDefault": "恢复默认",
|
||||
"models": "模型",
|
||||
"modelsDescription": "给所有用户用的模型,无需自带密钥",
|
||||
"addProviderHint": "添加服务商,为所有用户提供模型",
|
||||
"selectProviderHint": "选择或添加服务商,填写密钥和模型",
|
||||
"addProviderToOfferModels": "至少添加一个模型,用户才能看到这个服务商",
|
||||
"managedViaEnv": "(环境变量)",
|
||||
"envReadOnly": "由 AI_MODELS_CONFIG / ai-models.json 定义,这里只能查看,请到那里修改",
|
||||
"modelsDescription": "面向所有用户的服务端 provider 和模型——无需个人 API 密钥。当用户未选择模型时,使用默认 provider 的第一个模型。",
|
||||
"addProviderHint": "添加一个 provider,为所有用户提供服务端模型。",
|
||||
"selectProviderHint": "选择或添加一个 provider 以配置其凭证和模型。",
|
||||
"addProviderToOfferModels": "至少添加一个模型,才能向用户开放此 provider。",
|
||||
"managedViaEnv": "(通过环境变量管理)",
|
||||
"envReadOnly": "在 AI_MODELS_CONFIG / ai-models.json 中定义——此处只读。请编辑环境配置以更改。",
|
||||
"defaultModel": "默认模型",
|
||||
"noModelsConfigured": "暂无模型",
|
||||
"noModelsConfigured": "未配置模型",
|
||||
"modelCount": "{count} 个模型",
|
||||
"modelCountPlural": "{count} 个模型",
|
||||
"default": "默认",
|
||||
"setAsDefault": "设为默认服务商",
|
||||
"defaultProvider": "默认服务商",
|
||||
"setAsDefault": "设为默认 provider",
|
||||
"defaultProvider": "默认 provider",
|
||||
"modelIdPlaceholder": "模型 ID…",
|
||||
"addModel": "添加模型",
|
||||
"suggested": "推荐",
|
||||
"test": "测试",
|
||||
"testOk": "通过({ms} 毫秒)",
|
||||
"testOk": "正常({ms} 毫秒)",
|
||||
"testFailed": "失败",
|
||||
"removeModel": "删除 {model}",
|
||||
"removeModel": "移除 {model}",
|
||||
"deleteProviderTitle": "删除 {name}?",
|
||||
"deleteProviderDesc": "保存后,它的密钥和模型会从服务器删除",
|
||||
"deleteProviderDesc": "保存后,其凭证和模型将从服务器上移除。",
|
||||
"cancel": "取消",
|
||||
"delete": "删除",
|
||||
"groups": {
|
||||
"generation": {
|
||||
"title": "回复设置",
|
||||
"description": "控制 AI 怎么回复,对所有对话生效"
|
||||
"title": "生成",
|
||||
"description": "应用于所有聊天请求的输出参数。"
|
||||
},
|
||||
"access": {
|
||||
"title": "访问权限",
|
||||
"description": "限制谁可以使用这个站点"
|
||||
"title": "访问控制",
|
||||
"description": "限制谁可以使用此部署。"
|
||||
},
|
||||
"features": {
|
||||
"title": "可选功能",
|
||||
"description": "附加功能和安全选项"
|
||||
"title": "功能",
|
||||
"description": "可选功能和安全开关。"
|
||||
},
|
||||
"observability": {
|
||||
"title": "调用记录",
|
||||
"description": "用 Langfuse 记录模型调用"
|
||||
"title": "可观测性",
|
||||
"description": "对 LLM 调用进行 Langfuse 追踪。"
|
||||
},
|
||||
"quota": {
|
||||
"title": "用量限制",
|
||||
"description": "按 IP 限制用量,需要 DynamoDB 表才生效"
|
||||
"title": "配额与速率限制",
|
||||
"description": "按 IP 的用量限制。强制执行需要 DynamoDB 表。"
|
||||
}
|
||||
},
|
||||
"settings": {
|
||||
"TEMPERATURE": {
|
||||
"label": "温度",
|
||||
"description": "越高越随机;不支持温度的推理模型请留空"
|
||||
"description": "对于拒绝温度参数的推理模型,请留空。"
|
||||
},
|
||||
"MAX_OUTPUT_TOKENS": {
|
||||
"label": "输出 token 上限"
|
||||
"label": "最大输出 token 数"
|
||||
},
|
||||
"ACCESS_CODE_LIST": {
|
||||
"label": "访问码",
|
||||
"description": "逗号分隔多个;输入其中一个才能用;留空则不限"
|
||||
"description": "以逗号分隔的列表。用户需输入其中之一才能聊天。留空 = 开放访问。"
|
||||
},
|
||||
"ENABLE_VLM_VALIDATION": {
|
||||
"label": "图表检查",
|
||||
"description": "画完后让能看图的模型检查截图"
|
||||
"label": "VLM 图表验证",
|
||||
"description": "使用视觉模型对生成的图表进行可视化验证。"
|
||||
},
|
||||
"VALIDATION_MODEL": {
|
||||
"label": "检查模型",
|
||||
"description": "留空则用默认模型"
|
||||
"label": "验证模型",
|
||||
"description": "留空时回退到默认 AI 模型。"
|
||||
},
|
||||
"VALIDATION_TIMEOUT": {
|
||||
"label": "检查超时(毫秒)"
|
||||
"label": "验证超时(毫秒)"
|
||||
},
|
||||
"ENABLE_HISTORY_XML_REPLACE": {
|
||||
"label": "精简旧图",
|
||||
"description": "对话历史里的旧图表只留简短标记"
|
||||
"label": "历史 XML 压缩",
|
||||
"description": "用占位符替换历史记录中的旧图表 XML。"
|
||||
},
|
||||
"ALLOW_PRIVATE_URLS": {
|
||||
"label": "访问内网",
|
||||
"description": "关闭后,自定义模型地址不能指向内网,更安全"
|
||||
"label": "允许私有 URL",
|
||||
"description": "关闭以阻止对私有 IP 和内部主机名的请求(SSRF 防护)。"
|
||||
},
|
||||
"LANGFUSE_PUBLIC_KEY": {
|
||||
"label": "Langfuse 公钥"
|
||||
"label": "Langfuse Public Key"
|
||||
},
|
||||
"LANGFUSE_SECRET_KEY": {
|
||||
"label": "Langfuse 密钥"
|
||||
"label": "Langfuse Secret Key"
|
||||
},
|
||||
"LANGFUSE_BASEURL": {
|
||||
"label": "Langfuse 地址"
|
||||
"label": "Langfuse Base URL"
|
||||
},
|
||||
"DAILY_REQUEST_LIMIT": {
|
||||
"label": "每日请求",
|
||||
"description": "每个 IP 每天的请求次数上限"
|
||||
"label": "每日请求上限",
|
||||
"description": "每个 IP 每天。"
|
||||
},
|
||||
"DAILY_TOKEN_LIMIT": {
|
||||
"label": "每日 token",
|
||||
"description": "每个 IP 每天的 token 用量上限"
|
||||
"label": "每日 token 上限",
|
||||
"description": "每个 IP 每天。"
|
||||
},
|
||||
"TPM_LIMIT": {
|
||||
"label": "每分钟 token"
|
||||
"label": "每分钟 token 数"
|
||||
},
|
||||
"DYNAMODB_QUOTA_TABLE": {
|
||||
"label": "DynamoDB 表名",
|
||||
"description": "留空则不限制用量"
|
||||
"label": "DynamoDB 表",
|
||||
"description": "留空时配额强制执行被禁用。"
|
||||
},
|
||||
"DYNAMODB_REGION": {
|
||||
"label": "DynamoDB 区域"
|
||||
},
|
||||
"QUOTA_TIMEZONE": {
|
||||
"label": "时区",
|
||||
"description": "每日用量按这个时区的零点重置"
|
||||
"label": "配额时区",
|
||||
"description": "每日重置边界所用的时区。"
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -694,7 +695,7 @@
|
||||
},
|
||||
"lobby": {
|
||||
"title": "说说你要画什么",
|
||||
"lede": "描述一张图,或上传截图、PDF。得到的是可以继续编辑和导出的 draw.io 图。",
|
||||
"lede": "描述一张图,或者上传截图、PDF。画出来的是标准的 draw.io 图表,可以接着改,也可以导出。",
|
||||
"placeholder": "比如:用户登录的时序图,包含短信验证码和失败重试",
|
||||
"recent": "最近的图纸",
|
||||
"drawYourself": "从空白画布开始",
|
||||
|
||||
+1
-1
@@ -131,7 +131,7 @@
|
||||
"electron-builder": "^26.0.12",
|
||||
"esbuild": "^0.28.0",
|
||||
"eslint": "9.39.5",
|
||||
"eslint-config-next": "16.1.6",
|
||||
"eslint-config-next": "16.4.0",
|
||||
"husky": "^9.1.7",
|
||||
"jsdom": "^27.4.0",
|
||||
"lint-staged": "^16.2.7",
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
<svg width="163" height="26" viewBox="0 0 163 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M32.9477 25.7973C30.9997 25.7973 29.4796 25.2568 28.3986 24.1871C27.3176 23.1174 26.7771 21.6085 26.7771 19.6492V12.0148H23.8157V8.28764H24.131C24.9755 8.28764 25.6286 8.06243 26.0902 7.62328C26.5407 7.17287 26.7771 6.53104 26.7771 5.68652V4.34655H30.9772V8.28764H34.9521V12.0148H30.9772V19.4353C30.9772 20.0095 31.0785 20.4937 31.2812 20.8991C31.4839 21.3045 31.7992 21.6085 32.2383 21.8224C32.6775 22.0364 33.2292 22.1377 33.9049 22.1377C34.0512 22.1377 34.2314 22.1377 34.4341 22.104C34.6368 22.0814 34.8282 22.0589 35.0196 22.0364V25.6059C34.7269 25.6509 34.3778 25.696 34.0062 25.7297C33.6233 25.7748 33.2743 25.7973 32.959 25.7973H32.9477Z" fill="#FAF7F8"/>
|
||||
<path d="M36.5734 25.6059V1.52026H40.7734V25.6059H36.5734Z" fill="#FAF7F8"/>
|
||||
<path d="M48.284 25.9887C47.0792 25.9887 46.0207 25.7861 45.1199 25.3807C44.219 24.9753 43.5209 24.401 43.0367 23.6466C42.5525 22.8922 42.3048 22.0139 42.3048 21.023C42.3048 20.0321 42.5188 19.2101 42.9579 18.4556C43.3971 17.7012 44.0501 17.0706 44.951 16.5639C45.8405 16.0572 46.9665 15.6969 48.329 15.4829L53.9592 14.5596V17.7462L49.1173 18.602C48.2953 18.7484 47.6759 19.0074 47.2706 19.379C46.8652 19.7506 46.6625 20.246 46.6625 20.8541C46.6625 21.4621 46.8877 21.9238 47.3494 22.2729C47.7998 22.6219 48.3741 22.8021 49.0497 22.8021C49.9167 22.8021 50.6937 22.6219 51.358 22.2503C52.0224 21.8787 52.5404 21.3608 52.9007 20.7077C53.261 20.0546 53.4412 19.3339 53.4412 18.5795V14.0867C53.4412 13.3435 53.1597 12.7242 52.5854 12.2287C52.0111 11.7333 51.2454 11.4855 50.2996 11.4855C49.41 11.4855 48.6218 11.7333 47.9237 12.2175C47.2368 12.7017 46.7301 13.3322 46.4148 14.0979L43.0142 12.4427C43.352 11.5306 43.8925 10.7424 44.6244 10.0668C45.3563 9.39114 46.2234 8.87317 47.2143 8.49032C48.2164 8.10748 49.2974 7.91605 50.4572 7.91605C51.876 7.91605 53.1259 8.17504 54.2069 8.69301C55.2879 9.21098 56.1324 9.94289 56.7404 10.8775C57.3485 11.8121 57.6525 12.8818 57.6525 14.0867V25.6059H53.7114V22.6444L54.601 22.6107C54.1506 23.3313 53.6214 23.9506 52.9908 24.4573C52.3602 24.9641 51.6621 25.3469 50.8851 25.6059C50.1082 25.8649 49.2411 25.9887 48.2953 25.9887H48.284Z" fill="#FAF7F8"/>
|
||||
<path d="M66.4804 25.9887C64.6337 25.9887 63.0235 25.5496 61.661 24.6713C60.2872 23.793 59.3414 22.5994 58.8121 21.0905L61.965 19.5929C62.4154 20.5726 63.0347 21.3383 63.8229 21.89C64.6224 22.4418 65.5007 22.712 66.4804 22.712C67.2235 22.712 67.8203 22.5431 68.2595 22.2053C68.7099 21.8675 68.9238 21.4171 68.9238 20.8653C68.9238 20.5275 68.8338 20.246 68.6536 20.0208C68.4734 19.7956 68.237 19.6042 67.9329 19.4465C67.6402 19.2889 67.2911 19.1538 66.9195 19.0524L64.0819 18.253C62.6406 17.8476 61.5371 17.2058 60.7827 16.3275C60.0282 15.4492 59.6566 14.4132 59.6566 13.2196C59.6566 12.1612 59.9269 11.2266 60.4674 10.4383C61.0079 9.65013 61.7623 9.01955 62.7307 8.58041C63.6991 8.13 64.8026 7.91605 66.0525 7.91605C67.6852 7.91605 69.1265 8.31016 70.3764 9.09838C71.6263 9.88659 72.5159 10.9901 73.0451 12.4089L69.8584 13.9065C69.5657 13.1183 69.059 12.499 68.3608 12.0486C67.6627 11.5982 66.8745 11.3617 66.0074 11.3617C65.3093 11.3617 64.7575 11.5193 64.3522 11.8234C63.9468 12.1274 63.7441 12.5553 63.7441 13.0845C63.7441 13.3773 63.8342 13.6475 64.0031 13.884C64.172 14.1204 64.4085 14.3119 64.7238 14.4583C65.0278 14.6046 65.3881 14.7398 65.7935 14.8749L68.5635 15.6969C69.9823 16.1248 71.0858 16.7553 71.8628 17.6111C72.6397 18.4556 73.0226 19.5028 73.0226 20.7302C73.0226 21.7661 72.7411 22.6895 72.2006 23.4777C71.6488 24.2772 70.8831 24.8965 69.9147 25.3356C68.9351 25.7861 67.7978 26 66.4804 26V25.9887Z" fill="#FAF7F8"/>
|
||||
<path d="M90.2283 25.9889C88.528 25.9889 86.9628 25.6849 85.5215 25.0656C84.0802 24.4463 82.8303 23.5905 81.7718 22.487C80.7134 21.3835 79.8801 20.0886 79.2721 18.6022C78.664 17.1159 78.36 15.4944 78.36 13.7378C78.36 11.9812 78.6527 10.3484 79.2495 8.85083C79.8463 7.35322 80.6796 6.05829 81.7493 4.96605C82.819 3.8738 84.0689 3.02929 85.499 2.42123C86.929 1.81318 88.5055 1.50915 90.2283 1.50915C91.9511 1.50915 93.4487 1.79066 94.8 2.36493C96.1512 2.9392 97.2885 3.69364 98.2231 4.6395C99.1577 5.58536 99.822 6.6213 100.227 7.74733L96.3426 9.59401C95.8922 8.38916 95.149 7.39826 94.0793 6.6213C93.0208 5.84435 91.7372 5.4615 90.2283 5.4615C88.7194 5.4615 87.4357 5.81057 86.2985 6.5087C85.1612 7.20684 84.2829 8.17522 83.6523 9.40258C83.0217 10.63 82.7177 12.0713 82.7177 13.7265C82.7177 15.3818 83.033 16.8343 83.6523 18.073C84.2829 19.3116 85.1612 20.28 86.2985 20.9894C87.4357 21.6875 88.7419 22.0366 90.2283 22.0366C91.7146 22.0366 93.0208 21.6537 94.0793 20.8768C95.1378 20.0998 95.8922 19.1202 96.3426 17.9378L100.227 19.7507C99.822 20.8768 99.1577 21.9127 98.2231 22.8586C97.2885 23.8044 96.1512 24.5589 94.8 25.1331C93.4487 25.7074 91.9286 25.9889 90.2283 25.9889Z" fill="#FAF7F8"/>
|
||||
<path d="M101.748 25.6059V1.52026H105.948V25.6059H101.748Z" fill="#FAF7F8"/>
|
||||
<path d="M116.645 25.9884C114.967 25.9884 113.436 25.5943 112.051 24.806C110.666 24.0178 109.551 22.9481 108.729 21.5969C107.907 20.2344 107.49 18.6917 107.49 16.9464C107.49 15.2011 107.907 13.6584 108.729 12.2959C109.551 10.9334 110.655 9.86369 112.04 9.08674C113.413 8.29852 114.956 7.90441 116.656 7.90441C118.357 7.90441 119.922 8.29852 121.307 9.08674C122.681 9.87495 123.784 10.9334 124.606 12.2846C125.417 13.6359 125.833 15.1898 125.833 16.9464C125.833 18.703 125.417 20.2344 124.595 21.5969C123.773 22.9594 122.669 24.0291 121.284 24.806C119.911 25.5943 118.368 25.9884 116.668 25.9884H116.645ZM116.645 22.1711C117.602 22.1711 118.435 21.9459 119.145 21.5068C119.854 21.0564 120.417 20.4371 120.834 19.6488C121.25 18.8494 121.453 17.9598 121.453 16.9576C121.453 15.9555 121.25 15.0659 120.834 14.289C120.417 13.5008 119.854 12.8927 119.145 12.4423C118.435 11.9919 117.602 11.7779 116.645 11.7779C115.688 11.7779 114.888 12.0031 114.168 12.4423C113.447 12.8927 112.884 13.5008 112.467 14.289C112.051 15.0772 111.848 15.9667 111.848 16.9576C111.848 17.9485 112.051 18.8494 112.467 19.6488C112.884 20.4483 113.447 21.0676 114.168 21.5068C114.888 21.9572 115.722 22.1711 116.645 22.1711Z" fill="#FAF7F8"/>
|
||||
<path d="M133.535 25.9883C132.173 25.9883 131.013 25.6956 130.033 25.0988C129.054 24.502 128.299 23.68 127.77 22.6215C127.241 21.5631 126.97 20.3244 126.97 18.8944V8.2985H131.171V18.5453C131.171 19.266 131.317 19.8965 131.598 20.437C131.88 20.9775 132.297 21.4054 132.837 21.7094C133.378 22.0135 133.986 22.1711 134.672 22.1711C135.359 22.1711 135.956 22.0135 136.485 21.7094C137.015 21.4054 137.431 20.9775 137.724 20.4258C138.017 19.874 138.174 19.2209 138.174 18.4552V8.2985H142.341V25.6055H138.4V22.2049L138.715 22.8129C138.31 23.8714 137.656 24.6709 136.744 25.2001C135.832 25.7294 134.763 25.9996 133.535 25.9996V25.9883Z" fill="#FAF7F8"/>
|
||||
<path d="M152.7 25.9888C151.022 25.9888 149.525 25.5947 148.196 24.7952C146.867 23.9957 145.82 22.9147 145.066 21.5297C144.3 20.156 143.917 18.6246 143.917 16.9468C143.917 15.269 144.3 13.7264 145.077 12.3639C145.854 11.0014 146.901 9.9204 148.207 9.12093C149.525 8.31019 151.011 7.91608 152.666 7.91608C153.984 7.91608 155.155 8.17506 156.179 8.69304C157.204 9.21101 158.015 9.94292 158.612 10.8775L157.97 11.7333V1.52026H162.136V25.6059H158.195V22.2616L158.645 23.0836C158.049 24.0407 157.227 24.7614 156.168 25.2456C155.11 25.7298 153.95 25.9775 152.7 25.9775V25.9888ZM153.139 22.1715C154.074 22.1715 154.907 21.9463 155.639 21.5072C156.371 21.0568 156.945 20.4487 157.362 19.6605C157.778 18.8723 157.981 17.9715 157.981 16.9581C157.981 15.9446 157.778 15.0663 157.362 14.2894C156.945 13.5012 156.371 12.8931 155.639 12.4427C154.907 11.9923 154.074 11.7783 153.139 11.7783C152.205 11.7783 151.371 12.0035 150.628 12.4427C149.885 12.8931 149.311 13.5012 148.894 14.2894C148.477 15.0776 148.275 15.9672 148.275 16.9581C148.275 17.949 148.477 18.8836 148.894 19.6605C149.311 20.4487 149.885 21.0568 150.628 21.5072C151.371 21.9576 152.205 22.1715 153.139 22.1715Z" fill="#FAF7F8"/>
|
||||
<path d="M13.4447 0L0 25.9886C6.22692 23.5226 11.249 23.1623 15.7643 23.3763L13.7037 18.8159C12.8029 18.7258 10.1905 18.7258 8.9519 19.0523L13.4447 9.06449C13.4447 9.06449 20.2009 23.7366 20.2121 23.7366C21.5183 23.9393 24.9977 25.1103 26.8895 25.9886L13.4447 0Z" fill="#FAF7F8"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.1 KiB |
@@ -0,0 +1,12 @@
|
||||
<svg width="163" height="26" viewBox="0 0 163 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M32.9475 25.7973C30.9995 25.7973 29.4793 25.2568 28.3984 24.1871C27.3174 23.1174 26.7769 21.6085 26.7769 19.6492V12.0148H23.8154V8.28766H24.1307C24.9752 8.28766 25.6283 8.06245 26.09 7.6233C26.5404 7.17289 26.7769 6.53106 26.7769 5.68654V4.34657H30.9769V8.28766H34.9518V12.0148H30.9769V19.4353C30.9769 20.0096 31.0783 20.4938 31.281 20.8991C31.4837 21.3045 31.7989 21.6085 32.2381 21.8225C32.6772 22.0364 33.229 22.1378 33.9046 22.1378C34.051 22.1378 34.2312 22.1378 34.4338 22.104C34.6365 22.0814 34.828 22.0589 35.0194 22.0364V25.6059C34.7266 25.6509 34.3775 25.696 34.006 25.7298C33.6231 25.7748 33.274 25.7973 32.9588 25.7973H32.9475Z" fill="#0F1111"/>
|
||||
<path d="M36.5732 25.6059V1.52028H40.7733V25.6059H36.5732Z" fill="#0F1111"/>
|
||||
<path d="M48.2839 25.9888C47.079 25.9888 46.0206 25.7861 45.1197 25.3807C44.2189 24.9753 43.5208 24.4011 43.0366 23.6466C42.5524 22.8922 42.3047 22.0139 42.3047 21.023C42.3047 20.0321 42.5186 19.2101 42.9578 18.4557C43.3969 17.7012 44.05 17.0706 44.9508 16.5639C45.8404 16.0572 46.9664 15.6969 48.3289 15.483L53.959 14.5596V17.7463L49.1171 18.602C48.2951 18.7484 47.6758 19.0074 47.2705 19.379C46.8651 19.7506 46.6624 20.246 46.6624 20.8541C46.6624 21.4621 46.8876 21.9238 47.3493 22.2729C47.7997 22.6219 48.374 22.8021 49.0496 22.8021C49.9166 22.8021 50.6936 22.6219 51.3579 22.2504C52.0223 21.8788 52.5403 21.3608 52.9006 20.7077C53.2609 20.0546 53.4411 19.334 53.4411 18.5795V14.0867C53.4411 13.3435 53.1596 12.7242 52.5853 12.2287C52.011 11.7333 51.2453 11.4856 50.2995 11.4856C49.4099 11.4856 48.6217 11.7333 47.9236 12.2175C47.2367 12.7017 46.73 13.3322 46.4147 14.0979L43.0141 12.4427C43.3519 11.5306 43.8924 10.7424 44.6243 10.0668C45.3562 9.39116 46.2233 8.87319 47.2142 8.49034C48.2163 8.10749 49.2973 7.91607 50.4571 7.91607C51.8759 7.91607 53.1258 8.17505 54.2068 8.69303C55.2878 9.211 56.1323 9.94291 56.7403 10.8775C57.3484 11.8121 57.6524 12.8818 57.6524 14.0867V25.6059H53.7113V22.6445L54.6009 22.6107C54.1505 23.3313 53.6212 23.9507 52.9907 24.4574C52.3601 24.9641 51.662 25.3469 50.885 25.6059C50.108 25.8649 49.241 25.9888 48.2951 25.9888H48.2839Z" fill="#0F1111"/>
|
||||
<path d="M66.4802 25.9888C64.6336 25.9888 63.0233 25.5496 61.6609 24.6713C60.2871 23.793 59.3412 22.5994 58.812 21.0906L61.9649 19.5929C62.4153 20.5726 63.0346 21.3383 63.8228 21.89C64.6223 22.4418 65.5006 22.712 66.4802 22.712C67.2234 22.712 67.8202 22.5431 68.2594 22.2053C68.7098 21.8675 68.9237 21.4171 68.9237 20.8653C68.9237 20.5275 68.8336 20.246 68.6535 20.0208C68.4733 19.7956 68.2368 19.6042 67.9328 19.4466C67.64 19.2889 67.291 19.1538 66.9194 19.0524L64.0818 18.253C62.6405 17.8476 61.537 17.2058 60.7826 16.3275C60.0281 15.4492 59.6565 14.4132 59.6565 13.2196C59.6565 12.1612 59.9268 11.2266 60.4673 10.4384C61.0078 9.65015 61.7622 9.01957 62.7306 8.58042C63.699 8.13001 64.8025 7.91607 66.0524 7.91607C67.6851 7.91607 69.1264 8.31018 70.3763 9.09839C71.6262 9.88661 72.5157 10.9901 73.045 12.4089L69.8583 13.9065C69.5656 13.1183 69.0588 12.499 68.3607 12.0486C67.6626 11.5982 66.8743 11.3617 66.0073 11.3617C65.3092 11.3617 64.7574 11.5193 64.3521 11.8234C63.9467 12.1274 63.744 12.5553 63.744 13.0845C63.744 13.3773 63.8341 13.6475 64.003 13.884C64.1719 14.1205 64.4084 14.3119 64.7236 14.4583C65.0277 14.6047 65.388 14.7398 65.7934 14.8749L68.5634 15.6969C69.9822 16.1248 71.0857 16.7554 71.8626 17.6111C72.6396 18.4557 73.0224 19.5029 73.0224 20.7302C73.0224 21.7662 72.7409 22.6895 72.2005 23.4777C71.6487 24.2772 70.883 24.8965 69.9146 25.3357C68.935 25.7861 67.7977 26 66.4802 26V25.9888Z" fill="#0F1111"/>
|
||||
<path d="M90.2282 25.9889C88.5279 25.9889 86.9627 25.6849 85.5214 25.0656C84.0801 24.4463 82.8302 23.5905 81.7717 22.487C80.7133 21.3835 79.88 20.0886 79.2719 18.6022C78.6639 17.1159 78.3599 15.4944 78.3599 13.7378C78.3599 11.9812 78.6526 10.3485 79.2494 8.85085C79.8462 7.35324 80.6795 6.05831 81.7492 4.96606C82.8189 3.87382 84.0688 3.0293 85.4989 2.42125C86.9289 1.8132 88.5053 1.50917 90.2282 1.50917C91.951 1.50917 93.4486 1.79068 94.7998 2.36495C96.1511 2.93922 97.2884 3.69366 98.223 4.63952C99.1576 5.58538 99.8219 6.62132 100.227 7.74735L96.3425 9.59403C95.8921 8.38918 95.1489 7.39828 94.0792 6.62132C93.0207 5.84436 91.737 5.46152 90.2282 5.46152C88.7193 5.46152 87.4356 5.81058 86.2983 6.50872C85.1611 7.20685 84.2828 8.17523 83.6522 9.4026C83.0216 10.63 82.7176 12.0713 82.7176 13.7265C82.7176 15.3818 83.0329 16.8344 83.6522 18.073C84.2828 19.3116 85.1611 20.28 86.2983 20.9894C87.4356 21.6875 88.7418 22.0366 90.2282 22.0366C91.7145 22.0366 93.0207 21.6537 94.0792 20.8768C95.1376 20.0998 95.8921 19.1202 96.3425 17.9379L100.227 19.7508C99.8219 20.8768 99.1576 21.9127 98.223 22.8586C97.2884 23.8045 96.1511 24.5589 94.7998 25.1332C93.4486 25.7074 91.9285 25.9889 90.2282 25.9889Z" fill="#0F1111"/>
|
||||
<path d="M101.748 25.6059V1.52028H105.948V25.6059H101.748Z" fill="#0F1111"/>
|
||||
<path d="M116.645 25.9884C114.968 25.9884 113.436 25.5943 112.051 24.8061C110.666 24.0178 109.551 22.9481 108.729 21.5969C107.907 20.2344 107.491 18.6917 107.491 16.9464C107.491 15.2011 107.907 13.6584 108.729 12.2959C109.551 10.9334 110.655 9.86371 112.04 9.08676C113.414 8.29854 114.956 7.90443 116.657 7.90443C118.357 7.90443 119.922 8.29854 121.307 9.08676C122.681 9.87497 123.784 10.9334 124.606 12.2847C125.417 13.6359 125.834 15.1898 125.834 16.9464C125.834 18.703 125.417 20.2344 124.595 21.5969C123.773 22.9594 122.67 24.0291 121.285 24.8061C119.911 25.5943 118.368 25.9884 116.668 25.9884H116.645ZM116.645 22.1712C117.602 22.1712 118.436 21.946 119.145 21.5068C119.854 21.0564 120.417 20.4371 120.834 19.6489C121.251 18.8494 121.453 17.9598 121.453 16.9577C121.453 15.9555 121.251 15.0659 120.834 14.289C120.417 13.5008 119.854 12.8927 119.145 12.4423C118.436 11.9919 117.602 11.778 116.645 11.778C115.688 11.778 114.889 12.0032 114.168 12.4423C113.447 12.8927 112.884 13.5008 112.468 14.289C112.051 15.0772 111.848 15.9668 111.848 16.9577C111.848 17.9486 112.051 18.8494 112.468 19.6489C112.884 20.4483 113.447 21.0677 114.168 21.5068C114.889 21.9572 115.722 22.1712 116.645 22.1712Z" fill="#0F1111"/>
|
||||
<path d="M133.535 25.9884C132.172 25.9884 131.013 25.6956 130.033 25.0988C129.053 24.502 128.299 23.68 127.77 22.6215C127.24 21.5631 126.97 20.3245 126.97 18.8944V8.29852H131.17V18.5453C131.17 19.266 131.317 19.8966 131.598 20.4371C131.88 20.9775 132.296 21.4054 132.837 21.7095C133.377 22.0135 133.985 22.1711 134.672 22.1711C135.359 22.1711 135.956 22.0135 136.485 21.7095C137.014 21.4054 137.431 20.9775 137.724 20.4258C138.017 19.874 138.174 19.221 138.174 18.4553V8.29852H142.34V25.6055H138.399V22.2049L138.715 22.813C138.309 23.8714 137.656 24.6709 136.744 25.2001C135.832 25.7294 134.762 25.9996 133.535 25.9996V25.9884Z" fill="#0F1111"/>
|
||||
<path d="M152.7 25.9888C151.022 25.9888 149.525 25.5947 148.196 24.7952C146.867 23.9957 145.82 22.9147 145.066 21.5297C144.3 20.156 143.917 18.6246 143.917 16.9468C143.917 15.269 144.3 13.7264 145.077 12.3639C145.854 11.0014 146.901 9.92042 148.207 9.12094C149.525 8.31021 151.011 7.9161 152.666 7.9161C153.984 7.9161 155.155 8.17508 156.179 8.69305C157.204 9.21103 158.015 9.94294 158.612 10.8775L157.97 11.7333V1.52028H162.136V25.6059H158.195V22.2616L158.645 23.0836C158.049 24.0408 157.227 24.7614 156.168 25.2456C155.11 25.7298 153.95 25.9775 152.7 25.9775V25.9888ZM153.139 22.1716C154.074 22.1716 154.907 21.9464 155.639 21.5072C156.371 21.0568 156.945 20.4487 157.362 19.6605C157.778 18.8723 157.981 17.9715 157.981 16.9581C157.981 15.9447 157.778 15.0664 157.362 14.2894C156.945 13.5012 156.371 12.8931 155.639 12.4427C154.907 11.9923 154.074 11.7784 153.139 11.7784C152.205 11.7784 151.371 12.0036 150.628 12.4427C149.885 12.8931 149.311 13.5012 148.894 14.2894C148.477 15.0776 148.275 15.9672 148.275 16.9581C148.275 17.949 148.477 18.8836 148.894 19.6605C149.311 20.4487 149.885 21.0568 150.628 21.5072C151.371 21.9576 152.205 22.1716 153.139 22.1716Z" fill="#0F1111"/>
|
||||
<path d="M13.4447 1.71661e-05L0 25.9887C6.22692 23.5227 11.249 23.1623 15.7643 23.3763L13.7037 18.8159C12.8029 18.7258 10.1905 18.7258 8.9519 19.0523L13.4447 9.06451C13.4447 9.06451 20.2009 23.7366 20.2121 23.7366C21.5183 23.9393 24.9977 25.1104 26.8895 25.9887L13.4447 1.71661e-05Z" fill="#0F1111"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
@@ -0,0 +1 @@
|
||||
<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Doubao</title><path d="M5.31 15.756c.172-3.75 1.883-5.999 2.549-6.739-3.26 2.058-5.425 5.658-6.358 8.308v1.12C1.501 21.513 4.226 24 7.59 24a6.59 6.59 0 002.2-.375c.353-.12.7-.248 1.039-.378.913-.899 1.65-1.91 2.243-2.992-4.877 2.431-7.974.072-7.763-4.5l.002.001z" fill="#1E37FC"></path><path d="M22.57 10.283c-1.212-.901-4.109-2.404-7.397-2.8.295 3.792.093 8.766-2.1 12.773a12.782 12.782 0 01-2.244 2.992c3.764-1.448 6.746-3.457 8.596-5.219 2.82-2.683 3.353-5.178 3.361-6.66a2.737 2.737 0 00-.216-1.084v-.002z" fill="#37E1BE"></path><path d="M14.303 1.867C12.955.7 11.248 0 9.39 0 7.532 0 5.883.677 4.545 1.807 2.791 3.29 1.627 5.557 1.5 8.125v9.201c.932-2.65 3.097-6.25 6.357-8.307.5-.318 1.025-.595 1.569-.829 1.883-.801 3.878-.932 5.746-.706-.222-2.83-.718-5.002-.87-5.617h.001z" fill="#A569FF"></path><path d="M17.305 4.961a199.47 199.47 0 01-1.08-1.094c-.202-.213-.398-.419-.586-.622l-1.333-1.378c.151.615.648 2.786.869 5.617 3.288.395 6.185 1.898 7.396 2.8-1.306-1.275-3.475-3.487-5.266-5.323z" fill="#1E37FC"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 308 KiB |
Reference in New Issue
Block a user