mirror of
https://github.com/DayuanJiang/next-ai-draw-io.git
synced 2026-01-02 14:22:28 +08:00
docs: reorganize docs into en/cn/ja folders
- Move documentation files into language-specific folders (en, cn, ja) - Add Chinese and Japanese translations for all docs - Extract Docker section from README to separate doc file - Update README to link to new doc locations
This commit is contained in:
dayuan.jiang
96
README.md
96
README.md
@@ -36,14 +36,14 @@ https://github.com/user-attachments/assets/9d60a3e8-4a1c-4b5e-acbb-26af2d3eabd1
|
|||||||
- [Getting Started](#getting-started)
|
- [Getting Started](#getting-started)
|
||||||
- [Try it Online](#try-it-online)
|
- [Try it Online](#try-it-online)
|
||||||
- [Desktop Application](#desktop-application)
|
- [Desktop Application](#desktop-application)
|
||||||
- [Run with Docker (Recommended)](#run-with-docker-recommended)
|
- [Run with Docker](#run-with-docker)
|
||||||
- [Installation](#installation)
|
- [Installation](#installation)
|
||||||
- [Deployment](#deployment)
|
- [Deployment](#deployment)
|
||||||
|
- [Deploy to EdgeOne Pages](#deploy-to-edgeone-pages)
|
||||||
- [Deploy on Vercel (Recommended)](#deploy-on-vercel-recommended)
|
- [Deploy on Vercel (Recommended)](#deploy-on-vercel-recommended)
|
||||||
- [Deploy on Cloudflare Workers](#deploy-on-cloudflare-workers)
|
- [Deploy on Cloudflare Workers](#deploy-on-cloudflare-workers)
|
||||||
- [Multi-Provider Support](#multi-provider-support)
|
- [Multi-Provider Support](#multi-provider-support)
|
||||||
- [How It Works](#how-it-works)
|
- [How It Works](#how-it-works)
|
||||||
- [Project Structure](#project-structure)
|
|
||||||
- [Support \& Contact](#support--contact)
|
- [Support \& Contact](#support--contact)
|
||||||
- [Star History](#star-history)
|
- [Star History](#star-history)
|
||||||
|
|
||||||
@@ -144,53 +144,11 @@ No installation needed! Try the app directly on our demo site:
|
|||||||
|
|
||||||
Download the native desktop app for your platform from the [Releases page](https://github.com/DayuanJiang/next-ai-draw-io/releases):
|
Download the native desktop app for your platform from the [Releases page](https://github.com/DayuanJiang/next-ai-draw-io/releases):
|
||||||
|
|
||||||
| Platform | Download |
|
Supported platforms: Windows, macOS, Linux.
|
||||||
|----------|----------|
|
|
||||||
| macOS | `.dmg` (Intel & Apple Silicon) |
|
|
||||||
| Windows | `.exe` installer (x64 & ARM64) |
|
|
||||||
| Linux | `.AppImage` or `.deb` (x64 & ARM64) |
|
|
||||||
|
|
||||||
**Features:**
|
### Run with Docker
|
||||||
- **Secure API key storage**: Credentials encrypted using OS keychain
|
|
||||||
- **Configuration presets**: Save and switch between AI providers via menu
|
|
||||||
- **Native file dialogs**: Open/save `.drawio` files directly
|
|
||||||
- **Offline capable**: Works without internet after first launch
|
|
||||||
|
|
||||||
**Quick Setup:**
|
[Go to Docker Guide](./docs/en/docker.md)
|
||||||
1. Download and install for your platform
|
|
||||||
2. Open the app → **Menu → Configuration → Manage Presets**
|
|
||||||
3. Add your AI provider credentials
|
|
||||||
4. Start creating diagrams!
|
|
||||||
|
|
||||||
### Run with Docker (Recommended)
|
|
||||||
|
|
||||||
If you just want to run it locally, the best way is to use Docker.
|
|
||||||
|
|
||||||
First, install Docker if you haven't already: [Get Docker](https://docs.docker.com/get-docker/)
|
|
||||||
|
|
||||||
Then run:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
docker run -d -p 3000:3000 \
|
|
||||||
-e AI_PROVIDER=openai \
|
|
||||||
-e AI_MODEL=gpt-4o \
|
|
||||||
-e OPENAI_API_KEY=your_api_key \
|
|
||||||
ghcr.io/dayuanjiang/next-ai-draw-io:latest
|
|
||||||
```
|
|
||||||
|
|
||||||
Or use an env file:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
cp env.example .env
|
|
||||||
# Edit .env with your configuration
|
|
||||||
docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:latest
|
|
||||||
```
|
|
||||||
|
|
||||||
Open [http://localhost:3000](http://localhost:3000) in your browser.
|
|
||||||
|
|
||||||
Replace the environment variables with your preferred AI provider configuration. See [Multi-Provider Support](#multi-provider-support) for available options.
|
|
||||||
|
|
||||||
> **Offline Deployment:** If `embed.diagrams.net` is blocked, see [Offline Deployment](./docs/offline-deployment.md) for configuration options.
|
|
||||||
|
|
||||||
### Installation
|
### Installation
|
||||||
|
|
||||||
@@ -199,41 +157,19 @@ Replace the environment variables with your preferred AI provider configuration.
|
|||||||
```bash
|
```bash
|
||||||
git clone https://github.com/DayuanJiang/next-ai-draw-io
|
git clone https://github.com/DayuanJiang/next-ai-draw-io
|
||||||
cd next-ai-draw-io
|
cd next-ai-draw-io
|
||||||
```
|
|
||||||
|
|
||||||
2. Install dependencies:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm install
|
npm install
|
||||||
```
|
|
||||||
|
|
||||||
3. Configure your AI provider:
|
|
||||||
|
|
||||||
Create a `.env.local` file in the root directory:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
cp env.example .env.local
|
cp env.example .env.local
|
||||||
```
|
```
|
||||||
|
|
||||||
Edit `.env.local` and configure your chosen provider:
|
|
||||||
|
|
||||||
- Set `AI_PROVIDER` to your chosen provider (doubao,bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow)
|
|
||||||
- Set `AI_MODEL` to the specific model you want to use
|
|
||||||
- Add the required API keys for your provider
|
|
||||||
- `TEMPERATURE`: Optional temperature setting (e.g., `0` for deterministic output). Leave unset for models that don't support it (e.g., reasoning models).
|
|
||||||
- `ACCESS_CODE_LIST`: Optional access password(s), can be comma-separated for multiple passwords.
|
|
||||||
|
|
||||||
> Warning: If you do not set `ACCESS_CODE_LIST`, anyone can access your deployed site directly, which may lead to rapid depletion of your token. It is recommended to set this option.
|
|
||||||
|
|
||||||
See the [Provider Configuration Guide](./docs/ai-providers.md) for detailed setup instructions for each provider.
|
See the [Provider Configuration Guide](./docs/ai-providers.md) for detailed setup instructions for each provider.
|
||||||
|
|
||||||
4. Run the development server:
|
2. Run the development server:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm run dev
|
npm run dev
|
||||||
```
|
```
|
||||||
|
|
||||||
5. Open [http://localhost:3000](http://localhost:3000) in your browser to see the application.
|
3. Open [http://localhost:6002](http://localhost:6002) in your browser to see the application.
|
||||||
|
|
||||||
## Deployment
|
## Deployment
|
||||||
|
|
||||||
@@ -296,24 +232,6 @@ The application uses the following technologies:
|
|||||||
|
|
||||||
Diagrams are represented as XML that can be rendered in draw.io. The AI processes your commands and generates or modifies this XML accordingly.
|
Diagrams are represented as XML that can be rendered in draw.io. The AI processes your commands and generates or modifies this XML accordingly.
|
||||||
|
|
||||||
## Project Structure
|
|
||||||
|
|
||||||
```
|
|
||||||
app/ # Next.js App Router
|
|
||||||
api/chat/ # Chat API endpoint with AI tools
|
|
||||||
page.tsx # Main page with DrawIO embed
|
|
||||||
components/ # React components
|
|
||||||
chat-panel.tsx # Chat interface with diagram control
|
|
||||||
chat-input.tsx # User input component with file upload
|
|
||||||
history-dialog.tsx # Diagram version history viewer
|
|
||||||
ui/ # UI components (buttons, cards, etc.)
|
|
||||||
contexts/ # React context providers
|
|
||||||
diagram-context.tsx # Global diagram state management
|
|
||||||
lib/ # Utility functions and helpers
|
|
||||||
ai-providers.ts # Multi-provider AI configuration
|
|
||||||
utils.ts # XML processing and conversion utilities
|
|
||||||
public/ # Static assets including example images
|
|
||||||
```
|
|
||||||
|
|
||||||
## Support & Contact
|
## Support & Contact
|
||||||
|
|
||||||
|
|||||||
223
docs/cn/ai-providers.md
Normal file
223
docs/cn/ai-providers.md
Normal file
@@ -0,0 +1,223 @@
|
|||||||
|
# AI 提供商配置
|
||||||
|
|
||||||
|
本指南介绍如何为 next-ai-draw-io 配置不同的 AI 模型提供商。
|
||||||
|
|
||||||
|
## 快速开始
|
||||||
|
|
||||||
|
1. 将 `.env.example` 复制为 `.env.local`
|
||||||
|
2. 设置所选提供商的 API 密钥
|
||||||
|
3. 将 `AI_MODEL` 设置为所需的模型
|
||||||
|
4. 运行 `npm run dev`
|
||||||
|
|
||||||
|
## 支持的提供商
|
||||||
|
|
||||||
|
### 豆包 (字节跳动火山引擎)
|
||||||
|
|
||||||
|
> **免费 Token**：在 [火山引擎 ARK 平台](https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project) 注册，即可获得所有模型 50 万免费 Token！
|
||||||
|
|
||||||
|
```bash
|
||||||
|
DOUBAO_API_KEY=your_api_key
|
||||||
|
AI_MODEL=doubao-seed-1-8-251215 # 或其他豆包模型
|
||||||
|
```
|
||||||
|
|
||||||
|
### Google Gemini
|
||||||
|
|
||||||
|
```bash
|
||||||
|
GOOGLE_GENERATIVE_AI_API_KEY=your_api_key
|
||||||
|
AI_MODEL=gemini-2.0-flash
|
||||||
|
```
|
||||||
|
|
||||||
|
可选的自定义端点：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
GOOGLE_BASE_URL=https://your-custom-endpoint
|
||||||
|
```
|
||||||
|
|
||||||
|
### OpenAI
|
||||||
|
|
||||||
|
```bash
|
||||||
|
OPENAI_API_KEY=your_api_key
|
||||||
|
AI_MODEL=gpt-4o
|
||||||
|
```
|
||||||
|
|
||||||
|
可选的自定义端点（用于 OpenAI 兼容服务）：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
OPENAI_BASE_URL=https://your-custom-endpoint/v1
|
||||||
|
```
|
||||||
|
|
||||||
|
### Anthropic
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ANTHROPIC_API_KEY=your_api_key
|
||||||
|
AI_MODEL=claude-sonnet-4-5-20250514
|
||||||
|
```
|
||||||
|
|
||||||
|
可选的自定义端点：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ANTHROPIC_BASE_URL=https://your-custom-endpoint
|
||||||
|
```
|
||||||
|
|
||||||
|
### DeepSeek
|
||||||
|
|
||||||
|
```bash
|
||||||
|
DEEPSEEK_API_KEY=your_api_key
|
||||||
|
AI_MODEL=deepseek-chat
|
||||||
|
```
|
||||||
|
|
||||||
|
可选的自定义端点：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
DEEPSEEK_BASE_URL=https://your-custom-endpoint
|
||||||
|
```
|
||||||
|
|
||||||
|
### SiliconFlow (OpenAI 兼容)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
SILICONFLOW_API_KEY=your_api_key
|
||||||
|
AI_MODEL=deepseek-ai/DeepSeek-V3 # 示例；使用任何 SiliconFlow 模型 ID
|
||||||
|
```
|
||||||
|
|
||||||
|
可选的自定义端点（默认为推荐域名）：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
SILICONFLOW_BASE_URL=https://api.siliconflow.com/v1 # 或 https://api.siliconflow.cn/v1
|
||||||
|
```
|
||||||
|
|
||||||
|
### Azure OpenAI
|
||||||
|
|
||||||
|
```bash
|
||||||
|
AZURE_API_KEY=your_api_key
|
||||||
|
AZURE_RESOURCE_NAME=your-resource-name # 必填：您的 Azure 资源名称
|
||||||
|
AI_MODEL=your-deployment-name
|
||||||
|
```
|
||||||
|
|
||||||
|
或者使用自定义端点代替资源名称：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
AZURE_API_KEY=your_api_key
|
||||||
|
AZURE_BASE_URL=https://your-resource.openai.azure.com # AZURE_RESOURCE_NAME 的替代方案
|
||||||
|
AI_MODEL=your-deployment-name
|
||||||
|
```
|
||||||
|
|
||||||
|
可选的推理配置：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
AZURE_REASONING_EFFORT=low # 可选：low, medium, high
|
||||||
|
AZURE_REASONING_SUMMARY=detailed # 可选：none, brief, detailed
|
||||||
|
```
|
||||||
|
|
||||||
|
### AWS Bedrock
|
||||||
|
|
||||||
|
```bash
|
||||||
|
AWS_REGION=us-west-2
|
||||||
|
AWS_ACCESS_KEY_ID=your_access_key_id
|
||||||
|
AWS_SECRET_ACCESS_KEY=your_secret_access_key
|
||||||
|
AI_MODEL=anthropic.claude-sonnet-4-5-20250514-v1:0
|
||||||
|
```
|
||||||
|
|
||||||
|
注意：在 AWS 环境（Lambda、带有 IAM 角色的 EC2）中，凭证会自动从 IAM 角色获取。
|
||||||
|
|
||||||
|
### OpenRouter
|
||||||
|
|
||||||
|
```bash
|
||||||
|
OPENROUTER_API_KEY=your_api_key
|
||||||
|
AI_MODEL=anthropic/claude-sonnet-4
|
||||||
|
```
|
||||||
|
|
||||||
|
可选的自定义端点：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
OPENROUTER_BASE_URL=https://your-custom-endpoint
|
||||||
|
```
|
||||||
|
|
||||||
|
### Ollama (本地)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
AI_PROVIDER=ollama
|
||||||
|
AI_MODEL=llama3.2
|
||||||
|
```
|
||||||
|
|
||||||
|
可选的自定义 URL：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
OLLAMA_BASE_URL=http://localhost:11434
|
||||||
|
```
|
||||||
|
|
||||||
|
### Vercel AI Gateway
|
||||||
|
|
||||||
|
Vercel AI Gateway 通过单个 API 密钥提供对多个 AI 提供商的统一访问。这简化了身份验证，让您无需管理多个 API 密钥即可在不同提供商之间切换。
|
||||||
|
|
||||||
|
**基本用法（Vercel 托管网关）：**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
AI_GATEWAY_API_KEY=your_gateway_api_key
|
||||||
|
AI_MODEL=openai/gpt-4o
|
||||||
|
```
|
||||||
|
|
||||||
|
**自定义网关 URL（用于本地开发或自托管网关）：**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
AI_GATEWAY_API_KEY=your_custom_api_key
|
||||||
|
AI_GATEWAY_BASE_URL=https://your-custom-gateway.com/v1/ai
|
||||||
|
AI_MODEL=openai/gpt-4o
|
||||||
|
```
|
||||||
|
|
||||||
|
模型格式使用 `provider/model` 语法：
|
||||||
|
|
||||||
|
- `openai/gpt-4o` - OpenAI GPT-4o
|
||||||
|
- `anthropic/claude-sonnet-4-5` - Anthropic Claude Sonnet 4.5
|
||||||
|
- `google/gemini-2.0-flash` - Google Gemini 2.0 Flash
|
||||||
|
|
||||||
|
**配置说明：**
|
||||||
|
|
||||||
|
- 如果未设置 `AI_GATEWAY_BASE_URL`，则使用默认的 Vercel Gateway URL (`https://ai-gateway.vercel.sh/v1/ai`)
|
||||||
|
- 自定义基础 URL 适用于：
|
||||||
|
- 使用自定义网关实例进行本地开发
|
||||||
|
- 自托管 AI Gateway 部署
|
||||||
|
- 企业代理配置
|
||||||
|
- 当使用自定义基础 URL 时，必须同时提供 `AI_GATEWAY_API_KEY`
|
||||||
|
|
||||||
|
从 [Vercel AI Gateway 仪表板](https://vercel.com/ai-gateway) 获取您的 API 密钥。
|
||||||
|
|
||||||
|
## 自动检测
|
||||||
|
|
||||||
|
如果您只配置了**一个**提供商的 API 密钥，系统将自动检测并使用该提供商。无需设置 `AI_PROVIDER`。
|
||||||
|
|
||||||
|
如果您配置了**多个** API 密钥，则必须显式设置 `AI_PROVIDER`：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
AI_PROVIDER=google # 或：openai, anthropic, deepseek, siliconflow, doubao, azure, bedrock, openrouter, ollama, gateway
|
||||||
|
```
|
||||||
|
|
||||||
|
## 模型能力要求
|
||||||
|
|
||||||
|
此任务对模型能力要求极高，因为它涉及生成具有严格格式约束（draw.io XML）的长文本。
|
||||||
|
|
||||||
|
**推荐模型**：
|
||||||
|
|
||||||
|
- Claude Sonnet 4.5 / Opus 4.5
|
||||||
|
|
||||||
|
**关于 Ollama 的说明**：虽然支持将 Ollama 作为提供商，但除非您在本地运行像 DeepSeek R1 或 Qwen3-235B 这样的高性能模型，否则对于此用例通常不太实用。
|
||||||
|
|
||||||
|
## 温度设置 (Temperature)
|
||||||
|
|
||||||
|
您可以通过环境变量选择性地配置温度：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
TEMPERATURE=0 # 输出更具确定性（推荐用于图表）
|
||||||
|
```
|
||||||
|
|
||||||
|
**重要提示**：对于不支持温度设置的模型（例如以下模型），请勿设置 `TEMPERATURE`：
|
||||||
|
- GPT-5.1 和其他推理模型
|
||||||
|
- 某些专用模型
|
||||||
|
|
||||||
|
未设置时，模型将使用其默认行为。
|
||||||
|
|
||||||
|
## 推荐
|
||||||
|
|
||||||
|
- **最佳体验**：使用支持视觉的模型（GPT-4o, Claude, Gemini）以获得图像转图表功能
|
||||||
|
- **经济实惠**：DeepSeek 提供具有竞争力的价格
|
||||||
|
- **隐私保护**：使用 Ollama 进行完全本地、离线的操作（需要强大的硬件支持）
|
||||||
|
- **灵活性**：OpenRouter 通过单一 API 提供对众多模型的访问
|
||||||
267
docs/cn/cloudflare-deploy.md
Normal file
267
docs/cn/cloudflare-deploy.md
Normal file
@@ -0,0 +1,267 @@
|
|||||||
|
# 部署到 Cloudflare Workers
|
||||||
|
|
||||||
|
本项目可以通过 **OpenNext 适配器** 部署为 **Cloudflare Worker**，为您提供：
|
||||||
|
|
||||||
|
- 全球边缘部署
|
||||||
|
- 极低延迟
|
||||||
|
- 免费的 `workers.dev` 域名托管
|
||||||
|
- 通过 R2 实现完整的 Next.js ISR 支持（可选）
|
||||||
|
|
||||||
|
> **Windows 用户重要提示：** OpenNext 和 Wrangler 在 **原生 Windows 环境下并不完全可靠**。建议方案：
|
||||||
|
>
|
||||||
|
> - 使用 **GitHub Codespaces**（完美运行）
|
||||||
|
> - 或者使用 **WSL (Linux)**
|
||||||
|
>
|
||||||
|
> 纯 Windows 构建可能会因为 WASM 文件路径问题而失败。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 前置条件
|
||||||
|
|
||||||
|
1. 一个 **Cloudflare 账户**（免费版即可满足基本部署需求）
|
||||||
|
2. **Node.js 18+**
|
||||||
|
3. 安装 **Wrangler CLI**（作为开发依赖安装即可）：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install -D wrangler
|
||||||
|
```
|
||||||
|
|
||||||
|
4. 登录 Cloudflare：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx wrangler login
|
||||||
|
```
|
||||||
|
|
||||||
|
> **注意：** 只有在启用 R2 进行 ISR 缓存时才需要绑定支付方式。基本的 Workers 部署是免费的。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 第一步 — 安装依赖
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 第二步 — 配置环境变量
|
||||||
|
|
||||||
|
Cloudflare 在本地测试时使用不同的文件。
|
||||||
|
|
||||||
|
### 1) 创建 `.dev.vars`（用于 Cloudflare 本地调试 + 部署）
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cp env.example .dev.vars
|
||||||
|
```
|
||||||
|
|
||||||
|
填入您的 API 密钥和配置信息。
|
||||||
|
|
||||||
|
### 2) 确保 `.env.local` 也存在（用于常规 Next.js 开发）
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cp env.example .env.local
|
||||||
|
```
|
||||||
|
|
||||||
|
在此处填入相同的值。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 第三步 — 选择部署类型
|
||||||
|
|
||||||
|
### 选项 A：不使用 R2 部署（简单，免费）
|
||||||
|
|
||||||
|
如果您不需要 ISR 缓存，可以选择不使用 R2 进行部署：
|
||||||
|
|
||||||
|
**1. 使用简单的 `open-next.config.ts`：**
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { defineCloudflareConfig } from " @opennextjs/cloudflare/config"
|
||||||
|
|
||||||
|
export default defineCloudflareConfig({})
|
||||||
|
```
|
||||||
|
|
||||||
|
**2. 使用简单的 `wrangler.jsonc`（不包含 r2_buckets）：**
|
||||||
|
|
||||||
|
```jsonc
|
||||||
|
{
|
||||||
|
"$schema": "node_modules/wrangler/config-schema.json",
|
||||||
|
"main": ".open-next/worker.js",
|
||||||
|
"name": "next-ai-draw-io-worker",
|
||||||
|
"compatibility_date": "2025-12-08",
|
||||||
|
"compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"],
|
||||||
|
"assets": {
|
||||||
|
"directory": ".open-next/assets",
|
||||||
|
"binding": "ASSETS"
|
||||||
|
},
|
||||||
|
"services": [
|
||||||
|
{
|
||||||
|
"binding": "WORKER_SELF_REFERENCE",
|
||||||
|
"service": "next-ai-draw-io-worker"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
直接跳至 **第四步**。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 选项 B：使用 R2 部署（完整的 ISR 支持）
|
||||||
|
|
||||||
|
R2 开启了 **增量静态再生 (ISR)** 缓存功能。需要在您的 Cloudflare 账户中绑定支付方式。
|
||||||
|
|
||||||
|
**1. 在 Cloudflare 控制台中创建 R2 存储桶：**
|
||||||
|
|
||||||
|
- 进入 **Storage & Databases → R2**
|
||||||
|
- 点击 **Create bucket**
|
||||||
|
- 命名为：`next-inc-cache`
|
||||||
|
|
||||||
|
**2. 配置 `open-next.config.ts`：**
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { defineCloudflareConfig } from " @opennextjs/cloudflare/config"
|
||||||
|
import r2IncrementalCache from " @opennextjs/cloudflare/overrides/incremental-cache/r2-incremental-cache"
|
||||||
|
|
||||||
|
export default defineCloudflareConfig({
|
||||||
|
incrementalCache: r2IncrementalCache,
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
**3. 配置 `wrangler.jsonc`（包含 R2）：**
|
||||||
|
|
||||||
|
```jsonc
|
||||||
|
{
|
||||||
|
"$schema": "node_modules/wrangler/config-schema.json",
|
||||||
|
"main": ".open-next/worker.js",
|
||||||
|
"name": "next-ai-draw-io-worker",
|
||||||
|
"compatibility_date": "2025-12-08",
|
||||||
|
"compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"],
|
||||||
|
"assets": {
|
||||||
|
"directory": ".open-next/assets",
|
||||||
|
"binding": "ASSETS"
|
||||||
|
},
|
||||||
|
"r2_buckets": [
|
||||||
|
{
|
||||||
|
"binding": "NEXT_INC_CACHE_R2_BUCKET",
|
||||||
|
"bucket_name": "next-inc-cache"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"services": [
|
||||||
|
{
|
||||||
|
"binding": "WORKER_SELF_REFERENCE",
|
||||||
|
"service": "next-ai-draw-io-worker"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
> **重要提示：** `bucket_name` 必须与您在 Cloudflare 控制台中创建的名称完全一致。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 第四步 — 注册 workers.dev 子域名（仅首次需要）
|
||||||
|
|
||||||
|
在首次部署之前，您需要一个 workers.dev 子域名。
|
||||||
|
|
||||||
|
**选项 1：通过 Cloudflare 控制台（推荐）**
|
||||||
|
|
||||||
|
访问：https://dash.cloudflare.com → Workers & Pages → Overview → Set up a subdomain
|
||||||
|
|
||||||
|
**选项 2：在部署过程中**
|
||||||
|
|
||||||
|
运行 `npm run deploy` 时，Wrangler 可能会提示：
|
||||||
|
|
||||||
|
```
|
||||||
|
Would you like to register a workers.dev subdomain? (Y/n)
|
||||||
|
```
|
||||||
|
|
||||||
|
输入 `Y` 并选择一个子域名。
|
||||||
|
|
||||||
|
> **注意：** 在 CI/CD 或非交互式环境中，该提示不会出现。请先通过控制台进行注册。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 第五步 — 部署到 Cloudflare
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run deploy
|
||||||
|
```
|
||||||
|
|
||||||
|
该脚本执行的操作：
|
||||||
|
|
||||||
|
- 构建 Next.js 应用
|
||||||
|
- 通过 OpenNext 将其转换为 Cloudflare Worker
|
||||||
|
- 上传静态资源
|
||||||
|
- 发布 Worker
|
||||||
|
|
||||||
|
您的应用将可通过以下地址访问：
|
||||||
|
|
||||||
|
```
|
||||||
|
https://<worker-name>.<your-subdomain>.workers.dev
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 常见问题与修复
|
||||||
|
|
||||||
|
### `You need to register a workers.dev subdomain`
|
||||||
|
|
||||||
|
**原因：** 您的账户尚未注册 workers.dev 子域名。
|
||||||
|
|
||||||
|
**修复：** 前往 https://dash.cloudflare.com → Workers & Pages → Set up a subdomain。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### `Please enable R2 through the Cloudflare Dashboard`
|
||||||
|
|
||||||
|
**原因：** wrangler.jsonc 中配置了 R2，但您的账户尚未启用该功能。
|
||||||
|
|
||||||
|
**修复：** 启用 R2（需要支付方式）或使用选项 A（不使用 R2 部署）。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### `No R2 binding "NEXT_INC_CACHE_R2_BUCKET" found`
|
||||||
|
|
||||||
|
**原因：** `wrangler.jsonc` 中缺少 `r2_buckets` 配置。
|
||||||
|
|
||||||
|
**修复：** 添加 `r2_buckets` 部分或切换到选项 A（不使用 R2）。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### `Can't set compatibility date in the future`
|
||||||
|
|
||||||
|
**原因：** wrangler 配置中的 `compatibility_date` 设置为了未来的日期。
|
||||||
|
|
||||||
|
**修复：** 将 `compatibility_date` 修改为今天或更早的日期。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Windows 错误：`resvg.wasm?module` (ENOENT)
|
||||||
|
|
||||||
|
**原因：** Windows 文件名不能包含 `?`，但某个 wasm 资源文件名中使用了 `?module`。
|
||||||
|
|
||||||
|
**修复：** 在 Linux 环境（WSL、Codespaces 或 CI）上进行构建/部署。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 可选：本地预览
|
||||||
|
|
||||||
|
部署前在本地预览 Worker：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run preview
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 总结
|
||||||
|
|
||||||
|
| 功能 | 不使用 R2 | 使用 R2 |
|
||||||
|
|---------|------------|---------|
|
||||||
|
| 成本 | 免费 | 需要绑定支付方式 |
|
||||||
|
| ISR 缓存 | 无 | 有 |
|
||||||
|
| 静态页面 | 支持 | 支持 |
|
||||||
|
| API 路由 | 支持 | 支持 |
|
||||||
|
| 配置复杂度 | 简单 | 中等 |
|
||||||
|
|
||||||
|
测试或简单应用请选择 **不使用 R2**。需要 ISR 缓存的生产环境应用请选择 **使用 R2**。
|
||||||
29
docs/cn/docker.md
Normal file
29
docs/cn/docker.md
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
# 使用 Docker 运行
|
||||||
|
|
||||||
|
如果您只是想在本地运行，最好的方式是使用 Docker。
|
||||||
|
|
||||||
|
首先，如果您尚未安装 Docker，请先安装：[获取 Docker](https://docs.docker.com/get-docker/)
|
||||||
|
|
||||||
|
然后运行：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker run -d -p 3000:3000 \
|
||||||
|
-e AI_PROVIDER=openai \
|
||||||
|
-e AI_MODEL=gpt-4o \
|
||||||
|
-e OPENAI_API_KEY=your_api_key \
|
||||||
|
ghcr.io/dayuanjiang/next-ai-draw-io:latest
|
||||||
|
```
|
||||||
|
|
||||||
|
或者使用环境变量文件：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cp env.example .env
|
||||||
|
# 编辑 .env 文件并填入您的配置
|
||||||
|
docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:latest
|
||||||
|
```
|
||||||
|
|
||||||
|
在浏览器中打开 [http://localhost:3000](http://localhost:3000)。
|
||||||
|
|
||||||
|
请将环境变量替换为您首选的 AI 提供商配置。查看 [AI 提供商](./ai-providers.md) 了解可用选项。
|
||||||
|
|
||||||
|
> **离线部署：** 如果无法访问 `embed.diagrams.net`，请参阅 [离线部署](./offline-deployment.md) 了解配置选项。
|
||||||
38
docs/cn/offline-deployment.md
Normal file
38
docs/cn/offline-deployment.md
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
# 离线部署
|
||||||
|
|
||||||
|
通过自托管 draw.io 来替代 `embed.diagrams.net`，从而离线部署 Next AI Draw.io。
|
||||||
|
|
||||||
|
**注意：** `NEXT_PUBLIC_DRAWIO_BASE_URL` 是一个**构建时**变量。修改它需要重新构建 Docker 镜像。
|
||||||
|
|
||||||
|
## Docker Compose 设置
|
||||||
|
|
||||||
|
1. 克隆仓库并在 `.env` 文件中定义 API 密钥。
|
||||||
|
2. 创建 `docker-compose.yml`：
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
services:
|
||||||
|
drawio:
|
||||||
|
image: jgraph/drawio:latest
|
||||||
|
ports: ["8080:8080"]
|
||||||
|
next-ai-draw-io:
|
||||||
|
build:
|
||||||
|
context: .
|
||||||
|
args:
|
||||||
|
- NEXT_PUBLIC_DRAWIO_BASE_URL=http://localhost:8080
|
||||||
|
ports: ["3000:3000"]
|
||||||
|
env_file: .env
|
||||||
|
depends_on: [drawio]
|
||||||
|
```
|
||||||
|
|
||||||
|
3. 运行 `docker compose up -d` 并打开 `http://localhost:3000`。
|
||||||
|
|
||||||
|
## 配置与重要警告
|
||||||
|
|
||||||
|
**`NEXT_PUBLIC_DRAWIO_BASE_URL` 必须是用户浏览器可访问的地址。**
|
||||||
|
|
||||||
|
| 场景 | URL 值 |
|
||||||
|
|----------|-----------|
|
||||||
|
| 本地主机 (Localhost) | `http://localhost:8080` |
|
||||||
|
| 远程/服务器 | `http://YOUR_SERVER_IP:8080` |
|
||||||
|
|
||||||
|
**切勿使用** Docker 内部别名（如 `http://drawio:8080`），因为浏览器无法解析它们。
|
||||||
29
docs/en/docker.md
Normal file
29
docs/en/docker.md
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
# Run with Docker
|
||||||
|
|
||||||
|
If you just want to run it locally, the best way is to use Docker.
|
||||||
|
|
||||||
|
First, install Docker if you haven't already: [Get Docker](https://docs.docker.com/get-docker/)
|
||||||
|
|
||||||
|
Then run:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker run -d -p 3000:3000 \
|
||||||
|
-e AI_PROVIDER=openai \
|
||||||
|
-e AI_MODEL=gpt-4o \
|
||||||
|
-e OPENAI_API_KEY=your_api_key \
|
||||||
|
ghcr.io/dayuanjiang/next-ai-draw-io:latest
|
||||||
|
```
|
||||||
|
|
||||||
|
Or use an env file:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cp env.example .env
|
||||||
|
# Edit .env with your configuration
|
||||||
|
docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:latest
|
||||||
|
```
|
||||||
|
|
||||||
|
Open [http://localhost:3000](http://localhost:3000) in your browser.
|
||||||
|
|
||||||
|
Replace the environment variables with your preferred AI provider configuration. See [AI Providers](./ai-providers.md) for available options.
|
||||||
|
|
||||||
|
> **Offline Deployment:** If `embed.diagrams.net` is blocked, see [Offline Deployment](./offline-deployment.md) for configuration options.
|
||||||
223
docs/ja/ai-providers.md
Normal file
223
docs/ja/ai-providers.md
Normal file
@@ -0,0 +1,223 @@
|
|||||||
|
# AIプロバイダーの設定
|
||||||
|
|
||||||
|
このガイドでは、next-ai-draw-io でさまざまな AI モデルプロバイダーを設定する方法について説明します。
|
||||||
|
|
||||||
|
## クイックスタート
|
||||||
|
|
||||||
|
1. `.env.example` を `.env.local` にコピーします
|
||||||
|
2. 選択したプロバイダーの API キーを設定します
|
||||||
|
3. `AI_MODEL` を希望のモデルに設定します
|
||||||
|
4. `npm run dev` を実行します
|
||||||
|
|
||||||
|
## 対応プロバイダー
|
||||||
|
|
||||||
|
### Doubao (ByteDance Volcengine)
|
||||||
|
|
||||||
|
> **無料トークン**: [Volcengine ARK プラットフォーム](https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project)に登録すると、すべてのモデルで使える50万トークンが無料で入手できます！
|
||||||
|
|
||||||
|
```bash
|
||||||
|
DOUBAO_API_KEY=your_api_key
|
||||||
|
AI_MODEL=doubao-seed-1-8-251215 # または他の Doubao モデル
|
||||||
|
```
|
||||||
|
|
||||||
|
### Google Gemini
|
||||||
|
|
||||||
|
```bash
|
||||||
|
GOOGLE_GENERATIVE_AI_API_KEY=your_api_key
|
||||||
|
AI_MODEL=gemini-2.0-flash
|
||||||
|
```
|
||||||
|
|
||||||
|
任意のカスタムエンドポイント:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
GOOGLE_BASE_URL=https://your-custom-endpoint
|
||||||
|
```
|
||||||
|
|
||||||
|
### OpenAI
|
||||||
|
|
||||||
|
```bash
|
||||||
|
OPENAI_API_KEY=your_api_key
|
||||||
|
AI_MODEL=gpt-4o
|
||||||
|
```
|
||||||
|
|
||||||
|
任意のカスタムエンドポイント（OpenAI 互換サービス用）:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
OPENAI_BASE_URL=https://your-custom-endpoint/v1
|
||||||
|
```
|
||||||
|
|
||||||
|
### Anthropic
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ANTHROPIC_API_KEY=your_api_key
|
||||||
|
AI_MODEL=claude-sonnet-4-5-20250514
|
||||||
|
```
|
||||||
|
|
||||||
|
任意のカスタムエンドポイント:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ANTHROPIC_BASE_URL=https://your-custom-endpoint
|
||||||
|
```
|
||||||
|
|
||||||
|
### DeepSeek
|
||||||
|
|
||||||
|
```bash
|
||||||
|
DEEPSEEK_API_KEY=your_api_key
|
||||||
|
AI_MODEL=deepseek-chat
|
||||||
|
```
|
||||||
|
|
||||||
|
任意のカスタムエンドポイント:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
DEEPSEEK_BASE_URL=https://your-custom-endpoint
|
||||||
|
```
|
||||||
|
|
||||||
|
### SiliconFlow (OpenAI 互換)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
SILICONFLOW_API_KEY=your_api_key
|
||||||
|
AI_MODEL=deepseek-ai/DeepSeek-V3 # 例; 任意の SiliconFlow モデル ID を使用
|
||||||
|
```
|
||||||
|
|
||||||
|
任意のカスタムエンドポイント（デフォルトは推奨ドメイン）:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
SILICONFLOW_BASE_URL=https://api.siliconflow.com/v1 # または https://api.siliconflow.cn/v1
|
||||||
|
```
|
||||||
|
|
||||||
|
### Azure OpenAI
|
||||||
|
|
||||||
|
```bash
|
||||||
|
AZURE_API_KEY=your_api_key
|
||||||
|
AZURE_RESOURCE_NAME=your-resource-name # 必須: Azure リソース名
|
||||||
|
AI_MODEL=your-deployment-name
|
||||||
|
```
|
||||||
|
|
||||||
|
またはリソース名の代わりにカスタムエンドポイントを使用:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
AZURE_API_KEY=your_api_key
|
||||||
|
AZURE_BASE_URL=https://your-resource.openai.azure.com # AZURE_RESOURCE_NAME の代替
|
||||||
|
AI_MODEL=your-deployment-name
|
||||||
|
```
|
||||||
|
|
||||||
|
任意の推論設定:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
AZURE_REASONING_EFFORT=low # 任意: low, medium, high
|
||||||
|
AZURE_REASONING_SUMMARY=detailed # 任意: none, brief, detailed
|
||||||
|
```
|
||||||
|
|
||||||
|
### AWS Bedrock
|
||||||
|
|
||||||
|
```bash
|
||||||
|
AWS_REGION=us-west-2
|
||||||
|
AWS_ACCESS_KEY_ID=your_access_key_id
|
||||||
|
AWS_SECRET_ACCESS_KEY=your_secret_access_key
|
||||||
|
AI_MODEL=anthropic.claude-sonnet-4-5-20250514-v1:0
|
||||||
|
```
|
||||||
|
|
||||||
|
注: AWS 上（IAM ロールを持つ Lambda や EC2）では、認証情報は IAM ロールから自動的に取得されます。
|
||||||
|
|
||||||
|
### OpenRouter
|
||||||
|
|
||||||
|
```bash
|
||||||
|
OPENROUTER_API_KEY=your_api_key
|
||||||
|
AI_MODEL=anthropic/claude-sonnet-4
|
||||||
|
```
|
||||||
|
|
||||||
|
任意のカスタムエンドポイント:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
OPENROUTER_BASE_URL=https://your-custom-endpoint
|
||||||
|
```
|
||||||
|
|
||||||
|
### Ollama (ローカル)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
AI_PROVIDER=ollama
|
||||||
|
AI_MODEL=llama3.2
|
||||||
|
```
|
||||||
|
|
||||||
|
任意のカスタム URL:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
OLLAMA_BASE_URL=http://localhost:11434
|
||||||
|
```
|
||||||
|
|
||||||
|
### Vercel AI Gateway
|
||||||
|
|
||||||
|
Vercel AI Gateway は、単一の API キーで複数の AI プロバイダーへの統合アクセスを提供します。これにより認証が簡素化され、複数の API キーを管理することなくプロバイダーを切り替えることができます。
|
||||||
|
|
||||||
|
**基本的な使用法 (Vercel ホストの Gateway):**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
AI_GATEWAY_API_KEY=your_gateway_api_key
|
||||||
|
AI_MODEL=openai/gpt-4o
|
||||||
|
```
|
||||||
|
|
||||||
|
**カスタム Gateway URL (ローカル開発またはセルフホスト Gateway 用):**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
AI_GATEWAY_API_KEY=your_custom_api_key
|
||||||
|
AI_GATEWAY_BASE_URL=https://your-custom-gateway.com/v1/ai
|
||||||
|
AI_MODEL=openai/gpt-4o
|
||||||
|
```
|
||||||
|
|
||||||
|
モデル形式は `provider/model` 構文を使用します:
|
||||||
|
|
||||||
|
- `openai/gpt-4o` - OpenAI GPT-4o
|
||||||
|
- `anthropic/claude-sonnet-4-5` - Anthropic Claude Sonnet 4.5
|
||||||
|
- `google/gemini-2.0-flash` - Google Gemini 2.0 Flash
|
||||||
|
|
||||||
|
**設定に関する注意点:**
|
||||||
|
|
||||||
|
- `AI_GATEWAY_BASE_URL` が設定されていない場合、デフォルトの Vercel Gateway URL (`https://ai-gateway.vercel.sh/v1/ai`) が使用されます
|
||||||
|
- カスタムベース URL は以下の場合に便利です:
|
||||||
|
- カスタム Gateway インスタンスを使用したローカル開発
|
||||||
|
- セルフホスト AI Gateway デプロイメント
|
||||||
|
- エンタープライズプロキシ設定
|
||||||
|
- カスタムベース URL を使用する場合、`AI_GATEWAY_API_KEY` も指定する必要があります
|
||||||
|
|
||||||
|
[Vercel AI Gateway ダッシュボード](https://vercel.com/ai-gateway)から API キーを取得してください。
|
||||||
|
|
||||||
|
## 自動検出
|
||||||
|
|
||||||
|
**1つ**のプロバイダーの API キーのみを設定した場合、システムはそのプロバイダーを自動的に検出して使用します。`AI_PROVIDER` を設定する必要はありません。
|
||||||
|
|
||||||
|
**複数**の API キーを設定する場合は、`AI_PROVIDER` を明示的に設定する必要があります:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
AI_PROVIDER=google # または: openai, anthropic, deepseek, siliconflow, doubao, azure, bedrock, openrouter, ollama, gateway
|
||||||
|
```
|
||||||
|
|
||||||
|
## モデル性能要件
|
||||||
|
|
||||||
|
このタスクは、厳密なフォーマット制約（draw.io XML）を伴う長文テキストの生成を含むため、非常に強力なモデル性能が必要です。
|
||||||
|
|
||||||
|
**推奨モデル**:
|
||||||
|
|
||||||
|
- Claude Sonnet 4.5 / Opus 4.5
|
||||||
|
|
||||||
|
**Ollama に関する注意**: Ollama はプロバイダーとしてサポートされていますが、DeepSeek R1 や Qwen3-235B のような高性能モデルをローカルで実行していない限り、このユースケースでは一般的に実用的ではありません。
|
||||||
|
|
||||||
|
## Temperature（温度）設定
|
||||||
|
|
||||||
|
環境変数で Temperature を任意に設定できます:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
TEMPERATURE=0 # より決定論的な出力（ダイアグラムに推奨）
|
||||||
|
```
|
||||||
|
|
||||||
|
**重要**: 以下の Temperature 設定をサポートしていないモデルでは、`TEMPERATURE` を未設定のままにしてください:
|
||||||
|
- GPT-5.1 およびその他の推論モデル
|
||||||
|
- 一部の特殊なモデル
|
||||||
|
|
||||||
|
未設定の場合、モデルはデフォルトの挙動を使用します。
|
||||||
|
|
||||||
|
## 推奨事項
|
||||||
|
|
||||||
|
- **最高の体験**: 画像からダイアグラムを生成する機能には、ビジョン（画像認識）をサポートするモデル（GPT-4o, Claude, Gemini）を使用してください
|
||||||
|
- **低コスト**: DeepSeek は競争力のある価格を提供しています
|
||||||
|
- **プライバシー**: 完全にローカルなオフライン操作には Ollama を使用してください（強力なハードウェアが必要です）
|
||||||
|
- **柔軟性**: OpenRouter は単一の API で多数のモデルへのアクセスを提供します
|
||||||
267
docs/ja/cloudflare-deploy.md
Normal file
267
docs/ja/cloudflare-deploy.md
Normal file
@@ -0,0 +1,267 @@
|
|||||||
|
# Cloudflare Workers へのデプロイ
|
||||||
|
|
||||||
|
このプロジェクトは **OpenNext アダプター** を使用して **Cloudflare Worker** としてデプロイすることができ、以下のメリットがあります：
|
||||||
|
|
||||||
|
- グローバルエッジへのデプロイ
|
||||||
|
- 超低レイテンシー
|
||||||
|
- 無料の `workers.dev` ホスティング
|
||||||
|
- R2 を介した完全な Next.js ISR サポート（オプション）
|
||||||
|
|
||||||
|
> **Windows ユーザー向けの重要な注意:** OpenNext と Wrangler は、**ネイティブ Windows 環境では完全には信頼できません**。以下の方法を推奨します：
|
||||||
|
>
|
||||||
|
> - **GitHub Codespaces** を使用する（完全に動作します）
|
||||||
|
> - または **WSL (Linux)** を使用する
|
||||||
|
>
|
||||||
|
> 純粋な Windows 環境でのビルドは、WASM ファイルパスの問題により失敗する可能性があります。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 前提条件
|
||||||
|
|
||||||
|
1. **Cloudflare アカウント**（基本的なデプロイには無料プランで十分です）
|
||||||
|
2. **Node.js 18以上**
|
||||||
|
3. **Wrangler CLI** のインストール（開発依存関係で問題ありません）：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install -D wrangler
|
||||||
|
```
|
||||||
|
|
||||||
|
4. Cloudflare へのログイン：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx wrangler login
|
||||||
|
```
|
||||||
|
|
||||||
|
> **注意:** 支払い方法の登録が必要なのは、ISR キャッシュのために R2 を有効にする場合のみです。基本的な Workers へのデプロイは無料です。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ステップ 1 — 依存関係のインストール
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ステップ 2 — 環境変数の設定
|
||||||
|
|
||||||
|
Cloudflare はローカルテスト用に別のファイルを使用します。
|
||||||
|
|
||||||
|
### 1) `.dev.vars` の作成（Cloudflare ローカルおよびデプロイ用）
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cp env.example .dev.vars
|
||||||
|
```
|
||||||
|
|
||||||
|
API キーと設定を入力してください。
|
||||||
|
|
||||||
|
### 2) `.env.local` も存在することを確認（通常の Next.js 開発用）
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cp env.example .env.local
|
||||||
|
```
|
||||||
|
|
||||||
|
同じ値を入力してください。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ステップ 3 — デプロイタイプの選択
|
||||||
|
|
||||||
|
### オプション A: R2 なしでのデプロイ（シンプル、無料）
|
||||||
|
|
||||||
|
ISR キャッシュが不要な場合は、R2 なしでデプロイできます：
|
||||||
|
|
||||||
|
**1. シンプルな `open-next.config.ts` を使用:**
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { defineCloudflareConfig } from " @opennextjs/cloudflare/config"
|
||||||
|
|
||||||
|
export default defineCloudflareConfig({})
|
||||||
|
```
|
||||||
|
|
||||||
|
**2. シンプルな `wrangler.jsonc` を使用（r2_buckets なし）:**
|
||||||
|
|
||||||
|
```jsonc
|
||||||
|
{
|
||||||
|
"$schema": "node_modules/wrangler/config-schema.json",
|
||||||
|
"main": ".open-next/worker.js",
|
||||||
|
"name": "next-ai-draw-io-worker",
|
||||||
|
"compatibility_date": "2025-12-08",
|
||||||
|
"compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"],
|
||||||
|
"assets": {
|
||||||
|
"directory": ".open-next/assets",
|
||||||
|
"binding": "ASSETS"
|
||||||
|
},
|
||||||
|
"services": [
|
||||||
|
{
|
||||||
|
"binding": "WORKER_SELF_REFERENCE",
|
||||||
|
"service": "next-ai-draw-io-worker"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**ステップ 4** へ進んでください。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### オプション B: R2 ありでのデプロイ（完全な ISR サポート）
|
||||||
|
|
||||||
|
R2 を使用すると **Incremental Static Regeneration (ISR)** キャッシュが有効になります。これには Cloudflare アカウントに支払い方法の登録が必要です。
|
||||||
|
|
||||||
|
**1. R2 バケットの作成**（Cloudflare ダッシュボードにて）:
|
||||||
|
|
||||||
|
- **Storage & Databases → R2** へ移動
|
||||||
|
- **Create bucket** をクリック
|
||||||
|
- 名前を入力: `next-inc-cache`
|
||||||
|
|
||||||
|
**2. `open-next.config.ts` の設定:**
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { defineCloudflareConfig } from " @opennextjs/cloudflare/config"
|
||||||
|
import r2IncrementalCache from " @opennextjs/cloudflare/overrides/incremental-cache/r2-incremental-cache"
|
||||||
|
|
||||||
|
export default defineCloudflareConfig({
|
||||||
|
incrementalCache: r2IncrementalCache,
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
**3. `wrangler.jsonc` の設定（R2 あり）:**
|
||||||
|
|
||||||
|
```jsonc
|
||||||
|
{
|
||||||
|
"$schema": "node_modules/wrangler/config-schema.json",
|
||||||
|
"main": ".open-next/worker.js",
|
||||||
|
"name": "next-ai-draw-io-worker",
|
||||||
|
"compatibility_date": "2025-12-08",
|
||||||
|
"compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"],
|
||||||
|
"assets": {
|
||||||
|
"directory": ".open-next/assets",
|
||||||
|
"binding": "ASSETS"
|
||||||
|
},
|
||||||
|
"r2_buckets": [
|
||||||
|
{
|
||||||
|
"binding": "NEXT_INC_CACHE_R2_BUCKET",
|
||||||
|
"bucket_name": "next-inc-cache"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"services": [
|
||||||
|
{
|
||||||
|
"binding": "WORKER_SELF_REFERENCE",
|
||||||
|
"service": "next-ai-draw-io-worker"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
> **重要:** `bucket_name` は Cloudflare ダッシュボードで作成した名前と完全に一致させる必要があります。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ステップ 4 — workers.dev サブドメインの登録（初回のみ）
|
||||||
|
|
||||||
|
初回デプロイの前に、workers.dev サブドメインが必要です。
|
||||||
|
|
||||||
|
**オプション 1: Cloudflare ダッシュボード経由（推奨）**
|
||||||
|
|
||||||
|
アクセス先: https://dash.cloudflare.com → Workers & Pages → Overview → Set up a subdomain
|
||||||
|
|
||||||
|
**オプション 2: デプロイ時**
|
||||||
|
|
||||||
|
`npm run deploy` を実行した際、Wrangler が以下のように尋ねてくる場合があります：
|
||||||
|
|
||||||
|
```
|
||||||
|
Would you like to register a workers.dev subdomain? (Y/n)
|
||||||
|
```
|
||||||
|
|
||||||
|
`Y` を入力し、サブドメイン名を選択してください。
|
||||||
|
|
||||||
|
> **注意:** CI/CD や非対話型環境では、このプロンプトは表示されません。事前にダッシュボードで登録してください。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ステップ 5 — Cloudflare へのデプロイ
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run deploy
|
||||||
|
```
|
||||||
|
|
||||||
|
スクリプトの処理内容：
|
||||||
|
|
||||||
|
- Next.js アプリのビルド
|
||||||
|
- OpenNext を介した Cloudflare Worker への変換
|
||||||
|
- 静的アセットのアップロード
|
||||||
|
- Worker の公開
|
||||||
|
|
||||||
|
アプリは以下の URL で利用可能になります：
|
||||||
|
|
||||||
|
```
|
||||||
|
https://<worker-name>.<your-subdomain>.workers.dev
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## よくある問題と解決策
|
||||||
|
|
||||||
|
### `You need to register a workers.dev subdomain`
|
||||||
|
|
||||||
|
**原因:** アカウントに workers.dev サブドメインが登録されていません。
|
||||||
|
|
||||||
|
**解決策:** https://dash.cloudflare.com → Workers & Pages → Set up a subdomain から登録してください。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### `Please enable R2 through the Cloudflare Dashboard`
|
||||||
|
|
||||||
|
**原因:** `wrangler.jsonc` で R2 が設定されていますが、アカウントで R2 が有効になっていません。
|
||||||
|
|
||||||
|
**解決策:** R2 を有効にする（支払い方法が必要）か、オプション A（R2 なしでデプロイ）を使用してください。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### `No R2 binding "NEXT_INC_CACHE_R2_BUCKET" found`
|
||||||
|
|
||||||
|
**原因:** `wrangler.jsonc` に `r2_buckets` がありません。
|
||||||
|
|
||||||
|
**解決策:** `r2_buckets` セクションを追加するか、オプション A（R2 なし）に切り替えてください。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### `Can't set compatibility date in the future`
|
||||||
|
|
||||||
|
**原因:** wrangler 設定の `compatibility_date` が未来の日付に設定されています。
|
||||||
|
|
||||||
|
**解決策:** `compatibility_date` を今日またはそれ以前の日付に変更してください。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Windows エラー: `resvg.wasm?module` (ENOENT)
|
||||||
|
|
||||||
|
**原因:** Windows のファイル名には `?` を含めることができませんが、wasm アセットのファイル名に `?module` が使用されているためです。
|
||||||
|
|
||||||
|
**解決策:** Linux 環境（WSL、Codespaces、または CI）でビルド/デプロイしてください。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## オプション: ローカルでのプレビュー
|
||||||
|
|
||||||
|
デプロイ前に Worker をローカルでプレビューできます：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run preview
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## まとめ
|
||||||
|
|
||||||
|
| 機能 | R2 なし | R2 あり |
|
||||||
|
|---------|------------|---------|
|
||||||
|
| コスト | 無料 | 支払い方法が必要 |
|
||||||
|
| ISR キャッシュ | なし | あり |
|
||||||
|
| 静的ページ | あり | あり |
|
||||||
|
| API ルート | あり | あり |
|
||||||
|
| 設定の複雑さ | シンプル | 普通 |
|
||||||
|
|
||||||
|
テストやシンプルなアプリには **R2 なし** を選んでください。ISR キャッシュが必要な本番アプリには **R2 あり** を選んでください。
|
||||||
29
docs/ja/docker.md
Normal file
29
docs/ja/docker.md
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
# Dockerで実行する
|
||||||
|
|
||||||
|
ローカルで実行したいだけであれば、Dockerを使用するのが最も良い方法です。
|
||||||
|
|
||||||
|
まず、Dockerがまだインストールされていない場合はインストールしてください: [Dockerを入手](https://docs.docker.com/get-docker/)
|
||||||
|
|
||||||
|
次に、以下を実行します。
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker run -d -p 3000:3000 \
|
||||||
|
-e AI_PROVIDER=openai \
|
||||||
|
-e AI_MODEL=gpt-4o \
|
||||||
|
-e OPENAI_API_KEY=your_api_key \
|
||||||
|
ghcr.io/dayuanjiang/next-ai-draw-io:latest
|
||||||
|
```
|
||||||
|
|
||||||
|
または、envファイルを使用します。
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cp env.example .env
|
||||||
|
# .envを構成に合わせて編集します
|
||||||
|
docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:latest
|
||||||
|
```
|
||||||
|
|
||||||
|
ブラウザで[http://localhost:3000](http://localhost:3000)を開きます。
|
||||||
|
|
||||||
|
環境変数は、お好みのAIプロバイダー設定に置き換えてください。利用可能なオプションについては、[AIプロバイダー](./ai-providers.md)を参照してください。
|
||||||
|
|
||||||
|
> **オフラインデプロイ:** `embed.diagrams.net`がブロックされている場合は、構成オプションについて[オフラインデプロイ](./offline-deployment.md)を参照してください。
|
||||||
38
docs/ja/offline-deployment.md
Normal file
38
docs/ja/offline-deployment.md
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
# オフラインデプロイ
|
||||||
|
|
||||||
|
`embed.diagrams.net` の代わりに draw.io をセルフホストすることで、Next AI Draw.io をオフライン環境にデプロイできます。
|
||||||
|
|
||||||
|
**注:** `NEXT_PUBLIC_DRAWIO_BASE_URL` は**ビルド時**の変数です。これを変更する場合は、Docker イメージの再ビルドが必要です。
|
||||||
|
|
||||||
|
## Docker Compose のセットアップ
|
||||||
|
|
||||||
|
1. リポジトリをクローンし、`.env` ファイルに API キーを定義します。
|
||||||
|
2. `docker-compose.yml` を作成します。
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
services:
|
||||||
|
drawio:
|
||||||
|
image: jgraph/drawio:latest
|
||||||
|
ports: ["8080:8080"]
|
||||||
|
next-ai-draw-io:
|
||||||
|
build:
|
||||||
|
context: .
|
||||||
|
args:
|
||||||
|
- NEXT_PUBLIC_DRAWIO_BASE_URL=http://localhost:8080
|
||||||
|
ports: ["3000:3000"]
|
||||||
|
env_file: .env
|
||||||
|
depends_on: [drawio]
|
||||||
|
```
|
||||||
|
|
||||||
|
3. `docker compose up -d` を実行し、`http://localhost:3000` にアクセスします。
|
||||||
|
|
||||||
|
## 設定と重要な警告
|
||||||
|
|
||||||
|
**`NEXT_PUBLIC_DRAWIO_BASE_URL` は、ユーザーのブラウザからアクセスできる必要があります。**
|
||||||
|
|
||||||
|
| シナリオ | URL の値 |
|
||||||
|
|----------|-----------|
|
||||||
|
| ローカルホスト | `http://localhost:8080` |
|
||||||
|
| リモート/サーバー | `http://YOUR_SERVER_IP:8080` |
|
||||||
|
|
||||||
|
**`http://drawio:8080` のような Docker 内部のエイリアスは絶対に使用しないでください。** ブラウザはこれらを名前解決できません。
|
||||||
Reference in New Issue
Block a user