From 454b86d89875ca98e2f64750143027e68010de64 Mon Sep 17 00:00:00 2001 From: "dayuan.jiang" Date: Tue, 30 Dec 2025 22:50:51 +0900 Subject: [PATCH] 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 --- README.md | 96 +------ docs/{ => cn}/README_CN.md | 0 docs/cn/ai-providers.md | 223 +++++++++++++++ docs/cn/cloudflare-deploy.md | 267 ++++++++++++++++++ docs/cn/docker.md | 29 ++ docs/cn/offline-deployment.md | 38 +++ docs/{ => en}/ai-providers.md | 0 .../cloudflare-deploy.md} | 0 docs/en/docker.md | 29 ++ docs/{ => en}/offline-deployment.md | 0 docs/{ => ja}/README_JA.md | 0 docs/ja/ai-providers.md | 223 +++++++++++++++ docs/ja/cloudflare-deploy.md | 267 ++++++++++++++++++ docs/ja/docker.md | 29 ++ docs/ja/offline-deployment.md | 38 +++ 15 files changed, 1150 insertions(+), 89 deletions(-) rename docs/{ => cn}/README_CN.md (100%) create mode 100644 docs/cn/ai-providers.md create mode 100644 docs/cn/cloudflare-deploy.md create mode 100644 docs/cn/docker.md create mode 100644 docs/cn/offline-deployment.md rename docs/{ => en}/ai-providers.md (100%) rename docs/{Cloudflare_Deploy.md => en/cloudflare-deploy.md} (100%) create mode 100644 docs/en/docker.md rename docs/{ => en}/offline-deployment.md (100%) rename docs/{ => ja}/README_JA.md (100%) create mode 100644 docs/ja/ai-providers.md create mode 100644 docs/ja/cloudflare-deploy.md create mode 100644 docs/ja/docker.md create mode 100644 docs/ja/offline-deployment.md diff --git a/README.md b/README.md index 422bf20..80970f0 100644 --- a/README.md +++ b/README.md @@ -36,14 +36,14 @@ https://github.com/user-attachments/assets/9d60a3e8-4a1c-4b5e-acbb-26af2d3eabd1 - [Getting Started](#getting-started) - [Try it Online](#try-it-online) - [Desktop Application](#desktop-application) - - [Run with Docker (Recommended)](#run-with-docker-recommended) + - [Run with Docker](#run-with-docker) - [Installation](#installation) - [Deployment](#deployment) + - [Deploy to EdgeOne Pages](#deploy-to-edgeone-pages) - [Deploy on Vercel (Recommended)](#deploy-on-vercel-recommended) - [Deploy on Cloudflare Workers](#deploy-on-cloudflare-workers) - [Multi-Provider Support](#multi-provider-support) - [How It Works](#how-it-works) - - [Project Structure](#project-structure) - [Support \& Contact](#support--contact) - [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): -| Platform | Download | -|----------|----------| -| macOS | `.dmg` (Intel & Apple Silicon) | -| Windows | `.exe` installer (x64 & ARM64) | -| Linux | `.AppImage` or `.deb` (x64 & ARM64) | +Supported platforms: Windows, macOS, Linux. -**Features:** -- **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 +### Run with Docker -**Quick Setup:** -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. +[Go to Docker Guide](./docs/en/docker.md) ### Installation @@ -199,41 +157,19 @@ Replace the environment variables with your preferred AI provider configuration. ```bash git clone https://github.com/DayuanJiang/next-ai-draw-io cd next-ai-draw-io -``` - -2. Install dependencies: - -```bash npm install -``` - -3. Configure your AI provider: - -Create a `.env.local` file in the root directory: - -```bash 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. -4. Run the development server: +2. Run the development server: ```bash 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 @@ -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. -## 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 diff --git a/docs/README_CN.md b/docs/cn/README_CN.md similarity index 100% rename from docs/README_CN.md rename to docs/cn/README_CN.md diff --git a/docs/cn/ai-providers.md b/docs/cn/ai-providers.md new file mode 100644 index 0000000..6a9eec2 --- /dev/null +++ b/docs/cn/ai-providers.md @@ -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 提供对众多模型的访问 diff --git a/docs/cn/cloudflare-deploy.md b/docs/cn/cloudflare-deploy.md new file mode 100644 index 0000000..0262503 --- /dev/null +++ b/docs/cn/cloudflare-deploy.md @@ -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://..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**。 diff --git a/docs/cn/docker.md b/docs/cn/docker.md new file mode 100644 index 0000000..d533fa1 --- /dev/null +++ b/docs/cn/docker.md @@ -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) 了解配置选项。 diff --git a/docs/cn/offline-deployment.md b/docs/cn/offline-deployment.md new file mode 100644 index 0000000..982e849 --- /dev/null +++ b/docs/cn/offline-deployment.md @@ -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`），因为浏览器无法解析它们。 diff --git a/docs/ai-providers.md b/docs/en/ai-providers.md similarity index 100% rename from docs/ai-providers.md rename to docs/en/ai-providers.md diff --git a/docs/Cloudflare_Deploy.md b/docs/en/cloudflare-deploy.md similarity index 100% rename from docs/Cloudflare_Deploy.md rename to docs/en/cloudflare-deploy.md diff --git a/docs/en/docker.md b/docs/en/docker.md new file mode 100644 index 0000000..d0e6d36 --- /dev/null +++ b/docs/en/docker.md @@ -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. diff --git a/docs/offline-deployment.md b/docs/en/offline-deployment.md similarity index 100% rename from docs/offline-deployment.md rename to docs/en/offline-deployment.md diff --git a/docs/README_JA.md b/docs/ja/README_JA.md similarity index 100% rename from docs/README_JA.md rename to docs/ja/README_JA.md diff --git a/docs/ja/ai-providers.md b/docs/ja/ai-providers.md new file mode 100644 index 0000000..945f69f --- /dev/null +++ b/docs/ja/ai-providers.md @@ -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 で多数のモデルへのアクセスを提供します diff --git a/docs/ja/cloudflare-deploy.md b/docs/ja/cloudflare-deploy.md new file mode 100644 index 0000000..4923c78 --- /dev/null +++ b/docs/ja/cloudflare-deploy.md @@ -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://..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 あり** を選んでください。 diff --git a/docs/ja/docker.md b/docs/ja/docker.md new file mode 100644 index 0000000..3744558 --- /dev/null +++ b/docs/ja/docker.md @@ -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)を参照してください。 diff --git a/docs/ja/offline-deployment.md b/docs/ja/offline-deployment.md new file mode 100644 index 0000000..afca995 --- /dev/null +++ b/docs/ja/offline-deployment.md @@ -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 内部のエイリアスは絶対に使用しないでください。** ブラウザはこれらを名前解決できません。