From 3a9168e5b322f37031b60fa462e167e1781e1d9e Mon Sep 17 00:00:00 2001 From: "dayuan.jiang" Date: Mon, 12 Oct 2026 08:16:49 +0900 Subject: [PATCH] refactor(pages): one about page per language, no R2 cache by default - app/[lang]/about/page.tsx renders en, zh and ja (zh-Hant falls back to zh) from one JSX tree with per-language texts and generateMetadata; delete the cn/ and ja/ copies and redirect their old URLs - app/[lang]/layout.tsx: use hasLocale, an OG locale table, and real zh/ja title and description - components/icons/github.tsx replaces react-icons and lucide's deprecated Github icon - quota-limit-toast: read the dictionary keys directly, shadow-float - Cloudflare: defineCloudflareConfig({}) without R2, no r2_buckets, no dev-time OpenNext init, cf-typegen script removed, @opennextjs/cloudflare moves to devDependencies, docs updated --- app/[lang]/about/cn/page.tsx | 336 --------------- app/[lang]/about/ja/page.tsx | 350 ---------------- app/[lang]/about/page.tsx | 685 ++++++++++++++++++++++--------- app/[lang]/layout.tsx | 29 +- components/icons/github.tsx | 13 + components/quota-limit-toast.tsx | 18 +- components/settings-dialog.tsx | 6 +- docs/cn/cloudflare-deploy.md | 46 +-- docs/en/cloudflare-deploy.md | 46 +-- docs/ja/cloudflare-deploy.md | 46 +-- next.config.ts | 25 +- open-next.config.ts | 6 +- package.json | 4 +- wrangler.jsonc | 6 - 14 files changed, 567 insertions(+), 1049 deletions(-) delete mode 100644 app/[lang]/about/cn/page.tsx delete mode 100644 app/[lang]/about/ja/page.tsx create mode 100644 components/icons/github.tsx diff --git a/app/[lang]/about/cn/page.tsx b/app/[lang]/about/cn/page.tsx deleted file mode 100644 index 2f1ce910..00000000 --- a/app/[lang]/about/cn/page.tsx +++ /dev/null @@ -1,336 +0,0 @@ -import type { Metadata } from "next" -import Link from "next/link" -import { FaGithub } from "react-icons/fa" -import Image from "@/components/image-with-basepath" - -export const metadata: Metadata = { - title: "关于 - Next AI Draw.io", - description: - "AI驱动的图表创建工具 - 对话、绘制、可视化。使用自然语言创建AWS、GCP和Azure架构图。", - keywords: ["AI图表", "draw.io", "AWS架构", "GCP图表", "Azure图表", "LLM"], -} - -export default function AboutCN() { - return ( -
- {/* Navigation */} -
-
-
- - Next AI Draw.io - - -
-
-
- - {/* Main Content */} -
-
- {/* Title */} -
-

- Next AI Draw.io -

-

- AI驱动的图表创建工具 - 对话、绘制、可视化 -

-
- -
-
-
- {/* Bring Your Own Key */} -
-

- 使用自己的 API Key -

-

- 您也可以使用自己的 API - Key，支持多种服务商。点击聊天面板中的设置图标即可配置。 -

-

- 您的 Key - 仅保存在浏览器本地，不会被存储在服务器上。 -

-
-
-
- -

- 一个集成了AI功能的Next.js网页应用，与draw.io图表无缝结合。通过自然语言命令和AI辅助可视化来创建、修改和增强图表。 -

- - {/* Features */} -

- 功能特性 -

-
    -
  • - LLM驱动的图表创建 - ：利用大语言模型通过自然语言命令直接创建和操作draw.io图表 -
    • -
  • - 基于图像的图表复制 - ：上传现有图表或图像，让AI自动复制和增强 -
    • -
  • - 版本与撤销 - ：AI - 的每次修改都会成为聊天里的一个版本，可以对比、恢复或撤销；在画布上按 - Ctrl+Z 也能撤回 -
    • -
  • - 交互式聊天界面 - ：与AI实时对话来完善您的图表 -
    • -
  • - AWS架构图支持 - ：专门支持生成AWS架构图 -
    • -
  • - 动画连接器 - ：在图表元素之间创建动态动画连接器，实现更好的可视化效果 -
    • -
- - {/* Examples */} -

- 示例 -

-

- 以下是一些示例提示词及其生成的图表： -

- -
- {/* ResNet50 Architecture */} -
-

- ResNet50模型架构动画 -

-

- Prompt: Give me an{" "} - animated architecture diagram - of the ResNet50 model. -

-
- ResNet50模型架构图 -
-
- - {/* Diagram Grid */} -
-
-

- RAG技术图 -

-

- Prompt: Generate a RAG - architecture diagram for{" "} - chat application. Use - connected diagram for data ingestion -

-
- RAG架构图 -
-
-
-

- React和AWS认证流程 -

-

- Prompt: Generate - authentication process using React with{" "} - AWS. Use Serverless - architecture. -

-
- 认证架构图 -
-
-
-

- 敏捷Scrum流程 -

-

- Prompt: Generate agile - scrum workflow diagram for software - development team. -

-
- 敏捷Scrum流程图 -
-
-
-

- 开放式创新 -

-

- Prompt: Create - visualization of Henry Chesbrough's - Open Innovation model. -

-
- 开放式创新图 -
-
-
-
- - {/* How It Works */} -

- 工作原理 -

-

本应用使用以下技术：

-
    -
  • - Next.js：用于前端框架和路由 -
    • -
  • - Vercel AI SDK（ai +{" "} - @ai-sdk/* - ）：用于流式AI响应和多提供商支持 -
    • -
  • - draw.io - ：内置在应用里的编辑器，应用可以直接控制它 -
    • -
-

- 图表以XML格式表示，可在draw.io中渲染。AI处理您的命令并相应地生成或修改此XML。 -

- - {/* Multi-Provider Support */} -

- 多提供商支持 -

-
    -
  • 字节跳动豆包
    • -
  • AWS Bedrock（默认）
    • -
  • - OpenAI / OpenAI兼容API（通过{" "} - OPENAI_BASE_URL） -
    • -
  • Anthropic
    • -
  • Google AI
    • -
  • Google Vertex AI
    • -
  • Azure OpenAI
    • -
  • Ollama
    • -
  • OpenRouter
    • -
  • DeepSeek
    • -
  • SiliconFlow
    • -
  • ModelScope
    • -
-

- 注意：claude-sonnet-4-5{" "} - 已在带有AWS标志的draw.io图表上进行训练，因此如果您想创建AWS架构图，这是最佳选择。 -

- - {/* Support */} -

- 支持与联系 -

-

- 如果您觉得这个项目有用，请考虑{" "} - - 赞助 - {" "} - 来帮助托管在线演示站点！ -

-

- 如需支持或咨询，请在{" "} - - GitHub仓库 - {" "} - 上提交issue或联系：me[at]jiang.jp -

- - {/* CTA */} -
- - 打开编辑器 - -
-
-
- - {/* Footer */} -
-
-

- Next AI Draw.io - 开源AI驱动的图表生成器 -

-
-
-
- ) -} diff --git a/app/[lang]/about/ja/page.tsx b/app/[lang]/about/ja/page.tsx deleted file mode 100644 index bbe311fa..00000000 --- a/app/[lang]/about/ja/page.tsx +++ /dev/null @@ -1,350 +0,0 @@ -import type { Metadata } from "next" -import Link from "next/link" -import { FaGithub } from "react-icons/fa" -import Image from "@/components/image-with-basepath" - -export const metadata: Metadata = { - title: "概要 - Next AI Draw.io", - description: - "AI搭載のダイアグラム作成ツール - チャット、描画、可視化。自然言語でAWS、GCP、Azureアーキテクチャ図を作成。", - keywords: [ - "AIダイアグラム", - "draw.io", - "AWSアーキテクチャ", - "GCPダイアグラム", - "Azureダイアグラム", - "LLM", - ], -} - -export default function AboutJA() { - return ( -
- {/* Navigation */} -
-
-
- - Next AI Draw.io - - -
-
-
- - {/* Main Content */} -
-
- {/* Title */} -
-

- Next AI Draw.io -

-

- AI搭載のダイアグラム作成ツール - - チャット、描画、可視化 -

-
- -
-
-
- {/* Bring Your Own Key */} -
-

- 自分のAPIキーを使用 -

-

- お好みのプロバイダーで自分のAPIキーを使用することもできます。チャットパネルの設定アイコンをクリックして設定してください。 -

-

- キーはブラウザのローカルに保存され、サーバーには保存されません。 -

-
-
-
- -

- AI機能とdraw.ioダイアグラムを統合したNext.jsウェブアプリケーションです。自然言語コマンドとAI支援の可視化により、ダイアグラムを作成、修正、強化できます。 -

- - {/* Features */} -

- 機能 -

-
    -
  • - LLM搭載のダイアグラム作成 - ：大規模言語モデルを活用して、自然言語コマンドで直接draw.ioダイアグラムを作成・操作 -
    • -
  • - 画像ベースのダイアグラム複製 - ：既存のダイアグラムや画像をアップロードし、AIが自動的に複製・強化 -
    • -
  • - バージョンと取り消し - ：AI - の変更はそれぞれチャット内のバージョンになり、比較・復元・取り消しができます。キャンバスで - Ctrl+Z を押しても元に戻せます -
    • -
  • - - インタラクティブなチャットインターフェース - - ：AIとリアルタイムでコミュニケーションしてダイアグラムを改善 -
    • -
  • - - AWSアーキテクチャダイアグラムサポート - - ：AWSアーキテクチャダイアグラムの生成を専門的にサポート -
    • -
  • - アニメーションコネクタ - ：より良い可視化のためにダイアグラム要素間に動的でアニメーション化されたコネクタを作成 -
    • -
- - {/* Examples */} -

- 例 -

-

- 以下はいくつかのプロンプト例と生成されたダイアグラムです： -

- -
- {/* ResNet50 Architecture */} -
-

- ResNet50モデルアーキテクチャアニメーション -

-

- Prompt: Give me an{" "} - animated architecture diagram - of the ResNet50 model. -

-
- ResNet50モデルアーキテクチャ図 -
-
- - {/* Diagram Grid */} -
-
-

- RAG技術ダイアグラム -

-

- Prompt: Generate a RAG - architecture diagram for{" "} - chat application. Use - connected diagram for data ingestion -

-
- RAGアーキテクチャ図 -
-
-
-

- ReactとAWSによる認証 -

-

- Prompt: Generate - authentication process using React with{" "} - AWS. Use Serverless - architecture. -

-
- 認証アーキテクチャ図 -
-
-
-

- アジャイルスクラムプロセス -

-

- Prompt: Generate agile - scrum workflow diagram for software - development team. -

-
- アジャイルスクラム図 -
-
-
-

- オープンイノベーション -

-

- Prompt: Create - visualization of Henry Chesbrough's - Open Innovation model. -

-
- オープンイノベーション図 -
-
-
-
- - {/* How It Works */} -

- 仕組み -

-

- 本アプリケーションは以下の技術を使用しています： -

-
    -
  • - Next.js - ：フロントエンドフレームワークとルーティング -
    • -
  • - Vercel AI SDK（ai +{" "} - @ai-sdk/* - ）：ストリーミングAIレスポンスとマルチプロバイダーサポート -
    • -
  • - draw.io - ：アプリに同梱されたエディター。アプリから直接操作できます -
    • -
-

- ダイアグラムはdraw.ioでレンダリングできるXMLとして表現されます。AIがコマンドを処理し、それに応じてこのXMLを生成または変更します。 -

- - {/* Multi-Provider Support */} -

- マルチプロバイダーサポート -

-
    -
  • ByteDance Doubao
    • -
  • AWS Bedrock（デフォルト）
    • -
  • - OpenAI / OpenAI互換API（OPENAI_BASE_URL - 経由） -
    • -
  • Anthropic
    • -
  • Google AI
    • -
  • Google Vertex AI
    • -
  • Azure OpenAI
    • -
  • Ollama
    • -
  • OpenRouter
    • -
  • DeepSeek
    • -
  • SiliconFlow
    • -
  • ModelScope
    • -
-

- 注：claude-sonnet-4-5 - はAWSロゴ付きのdraw.ioダイアグラムで学習されているため、AWSアーキテクチャダイアグラムを作成したい場合は最適な選択です。 -

- - {/* Support */} -

- サポート＆お問い合わせ -

-

- このプロジェクトが役に立ったら、ライブデモサイトのホスティングを支援するために{" "} - - スポンサー - {" "} - をご検討ください！ -

-

- サポートやお問い合わせについては、{" "} - - GitHubリポジトリ - {" "} - でissueを開くか、ご連絡ください：me[at]jiang.jp -

- - {/* CTA */} -
- - エディタを開く - -
-
-
- - {/* Footer */} -
-
-

- Next AI Draw.io - - オープンソースAI搭載ダイアグラムジェネレーター -

-
-
-
- ) -} diff --git a/app/[lang]/about/page.tsx b/app/[lang]/about/page.tsx index 2183e402..6e9b08d4 100644 --- a/app/[lang]/about/page.tsx +++ b/app/[lang]/about/page.tsx @@ -1,23 +1,420 @@ import type { Metadata } from "next" import Link from "next/link" -import { FaGithub } from "react-icons/fa" +import type { ReactNode } from "react" +import { GitHubIcon } from "@/components/icons/github" import Image from "@/components/image-with-basepath" +import type { Locale } from "@/lib/i18n/config" +import { hasLocale } from "@/lib/i18n/dictionaries" -export const metadata: Metadata = { - title: "About - Next AI Draw.io", - description: - "AI-Powered Diagram Creation Tool - Chat, Draw, Visualize. Create AWS, GCP, and Azure architecture diagrams with natural language.", - keywords: [ - "AI diagram", - "draw.io", - "AWS architecture", - "GCP diagram", - "Azure diagram", - "LLM", - ], +type ExampleId = "resnet50" | "rag" | "auth" | "scrum" | "inno" + +type AboutTexts = { + title: string + description: string + keywords: string[] + nav: { editor: string; about: string; github: string } + tagline: string + byok: { title: string; body: string; note: string } + intro: string + // Punctuation differs between Latin and CJK text + colon: string + parenOpen: string + parenClose: string + featuresHeading: string + features: { title: string; text: string }[] + examplesHeading: string + examplesIntro: string + examples: Record + howHeading: string + howIntro: string + tech: { nextjs: string; aiSdk: string; drawio: string } + howOutro: string + providersHeading: string + doubao: string + bedrock: string + // Text around the OPENAI_BASE_URL code span + openai: { before: string; after: string } + // Text around the claude-sonnet-4-5 code span + modelNote: { before: string; after: string } + supportHeading: string + // Text around the sponsor link + sponsor: { before: string; link: string; after: string } + // Text around the GitHub repository link + contact: { before: string; link: string; after: string } + openEditor: string + footer: string } -export default function About() { +const texts: Record<"en" | "zh" | "ja", AboutTexts> = { + en: { + title: "About - Next AI Draw.io", + description: + "AI-Powered Diagram Creation Tool - Chat, Draw, Visualize. Create AWS, GCP, and Azure architecture diagrams with natural language.", + keywords: [ + "AI diagram", + "draw.io", + "AWS architecture", + "GCP diagram", + "Azure diagram", + "LLM", + ], + nav: { editor: "Editor", about: "About", github: "View on GitHub" }, + tagline: "AI-Powered Diagram Creation Tool - Chat, Draw, Visualize", + byok: { + title: "Bring Your Own API Key", + body: "You can also use your own API key with any supported provider. Click the Settings icon in the chat panel to configure your provider and API key.", + note: "Your key is stored locally in your browser and is never stored on the server.", + }, + intro: "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.", + colon: ": ", + parenOpen: " (", + parenClose: ")", + featuresHeading: "Features", + features: [ + { + title: "LLM-Powered Diagram Creation", + text: "Leverage Large Language Models to create and manipulate draw.io diagrams directly through natural language commands", + }, + { + title: "Image-Based Diagram Replication", + text: "Upload existing diagrams or images and have the AI replicate and enhance them automatically", + }, + { + title: "Versions and Undo", + text: "Every AI change becomes a version in the chat that you can compare, restore or undo; Ctrl+Z on the canvas takes it back too", + }, + { + title: "Interactive Chat Interface", + text: "Communicate with AI to refine your diagrams in real-time", + }, + { + title: "AWS Architecture Diagram Support", + text: "Specialized support for generating AWS architecture diagrams", + }, + { + title: "Animated Connectors", + text: "Create dynamic and animated connectors between diagram elements for better visualization", + }, + ], + examplesHeading: "Examples", + examplesIntro: + "Here are some example prompts and their generated diagrams:", + examples: { + resnet50: { + title: "Animated ResNet50 Model Architecture", + alt: "Architecture diagram for ResNet50 model", + }, + rag: { + title: "RAG Technique Diagram", + alt: "RAG Architecture Diagram", + }, + auth: { + title: "Authentication using React and AWS", + alt: "Authentication Architecture Diagram", + }, + scrum: { title: "Agile Scrum Process", alt: "Agile Scrum Diagram" }, + inno: { title: "Open Innovation", alt: "Open Innovation Diagram" }, + }, + howHeading: "How It Works", + howIntro: "The application uses the following technologies:", + tech: { + nextjs: "For the frontend framework and routing", + aiSdk: "For streaming AI responses and multi-provider support", + drawio: "The editor, bundled with the app so it can be driven directly", + }, + howOutro: + "Diagrams are represented as XML that can be rendered in draw.io. The AI processes your commands and generates or modifies this XML accordingly.", + providersHeading: "Multi-Provider Support", + doubao: "ByteDance Doubao", + bedrock: "AWS Bedrock (default)", + openai: { before: "OpenAI / OpenAI-compatible APIs (via ", after: ")" }, + modelNote: { + before: "Note that ", + after: " has trained on draw.io diagrams with AWS logos, so if you want to create AWS architecture diagrams, this is the best choice.", + }, + supportHeading: "Support & Contact", + sponsor: { + before: "If you find this project useful, please consider", + link: "sponsoring", + after: "to help host the live demo site!", + }, + contact: { + before: "For support or inquiries, please open an issue on the", + link: "GitHub repository", + after: "or contact: me[at]jiang.jp", + }, + openEditor: "Open Editor", + footer: "Next AI Draw.io - Open Source AI-Powered Diagram Generator", + }, + zh: { + title: "关于 - Next AI Draw.io", + description: + "AI驱动的图表创建工具 - 对话、绘制、可视化。使用自然语言创建AWS、GCP和Azure架构图。", + keywords: [ + "AI图表", + "draw.io", + "AWS架构", + "GCP图表", + "Azure图表", + "LLM", + ], + nav: { editor: "编辑器", about: "关于", github: "在GitHub上查看" }, + tagline: "AI驱动的图表创建工具 - 对话、绘制、可视化", + byok: { + title: "使用自己的 API Key", + body: "您也可以使用自己的 API Key，支持多种服务商。点击聊天面板中的设置图标即可配置。", + note: "您的 Key 仅保存在浏览器本地，不会被存储在服务器上。", + }, + intro: "一个集成了AI功能的Next.js网页应用，与draw.io图表无缝结合。通过自然语言命令和AI辅助可视化来创建、修改和增强图表。", + colon: "：", + parenOpen: "（", + parenClose: "）", + featuresHeading: "功能特性", + features: [ + { + title: "LLM驱动的图表创建", + text: "利用大语言模型通过自然语言命令直接创建和操作draw.io图表", + }, + { + title: "基于图像的图表复制", + text: "上传现有图表或图像，让AI自动复制和增强", + }, + { + title: "版本与撤销", + text: "AI 的每次修改都会成为聊天里的一个版本，可以对比、恢复或撤销；在画布上按 Ctrl+Z 也能撤回", + }, + { + title: "交互式聊天界面", + text: "与AI实时对话来完善您的图表", + }, + { title: "AWS架构图支持", text: "专门支持生成AWS架构图" }, + { + title: "动画连接器", + text: "在图表元素之间创建动态动画连接器，实现更好的可视化效果", + }, + ], + examplesHeading: "示例", + examplesIntro: "以下是一些示例提示词及其生成的图表：", + examples: { + resnet50: { + title: "ResNet50模型架构动画", + alt: "ResNet50模型架构图", + }, + rag: { title: "RAG技术图", alt: "RAG架构图" }, + auth: { title: "React和AWS认证流程", alt: "认证架构图" }, + scrum: { title: "敏捷Scrum流程", alt: "敏捷Scrum流程图" }, + inno: { title: "开放式创新", alt: "开放式创新图" }, + }, + howHeading: "工作原理", + howIntro: "本应用使用以下技术：", + tech: { + nextjs: "用于前端框架和路由", + aiSdk: "用于流式AI响应和多提供商支持", + drawio: "内置在应用里的编辑器，应用可以直接控制它", + }, + howOutro: + "图表以XML格式表示，可在draw.io中渲染。AI处理您的命令并相应地生成或修改此XML。", + providersHeading: "多提供商支持", + doubao: "字节跳动豆包", + bedrock: "AWS Bedrock（默认）", + openai: { before: "OpenAI / OpenAI兼容API（通过 ", after: "）" }, + modelNote: { + before: "注意：", + after: " 已在带有AWS标志的draw.io图表上进行训练，因此如果您想创建AWS架构图，这是最佳选择。", + }, + supportHeading: "支持与联系", + sponsor: { + before: "如果您觉得这个项目有用，请考虑", + link: "赞助", + after: "来帮助托管在线演示站点！", + }, + contact: { + before: "如需支持或咨询，请在", + link: "GitHub仓库", + after: "上提交issue或联系：me[at]jiang.jp", + }, + openEditor: "打开编辑器", + footer: "Next AI Draw.io - 开源AI驱动的图表生成器", + }, + ja: { + title: "概要 - Next AI Draw.io", + description: + "AI搭載のダイアグラム作成ツール - チャット、描画、可視化。自然言語でAWS、GCP、Azureアーキテクチャ図を作成。", + keywords: [ + "AIダイアグラム", + "draw.io", + "AWSアーキテクチャ", + "GCPダイアグラム", + "Azureダイアグラム", + "LLM", + ], + nav: { editor: "エディタ", about: "概要", github: "GitHubで見る" }, + tagline: "AI搭載のダイアグラム作成ツール - チャット、描画、可視化", + byok: { + title: "自分のAPIキーを使用", + body: "お好みのプロバイダーで自分のAPIキーを使用することもできます。チャットパネルの設定アイコンをクリックして設定してください。", + note: "キーはブラウザのローカルに保存され、サーバーには保存されません。", + }, + intro: "AI機能とdraw.ioダイアグラムを統合したNext.jsウェブアプリケーションです。自然言語コマンドとAI支援の可視化により、ダイアグラムを作成、修正、強化できます。", + colon: "：", + parenOpen: "（", + parenClose: "）", + featuresHeading: "機能", + features: [ + { + title: "LLM搭載のダイアグラム作成", + text: "大規模言語モデルを活用して、自然言語コマンドで直接draw.ioダイアグラムを作成・操作", + }, + { + title: "画像ベースのダイアグラム複製", + text: "既存のダイアグラムや画像をアップロードし、AIが自動的に複製・強化", + }, + { + title: "バージョンと取り消し", + text: "AI の変更はそれぞれチャット内のバージョンになり、比較・復元・取り消しができます。キャンバスで Ctrl+Z を押しても元に戻せます", + }, + { + title: "インタラクティブなチャットインターフェース", + text: "AIとリアルタイムでコミュニケーションしてダイアグラムを改善", + }, + { + title: "AWSアーキテクチャダイアグラムサポート", + text: "AWSアーキテクチャダイアグラムの生成を専門的にサポート", + }, + { + title: "アニメーションコネクタ", + text: "より良い可視化のためにダイアグラム要素間に動的でアニメーション化されたコネクタを作成", + }, + ], + examplesHeading: "例", + examplesIntro: + "以下はいくつかのプロンプト例と生成されたダイアグラムです：", + examples: { + resnet50: { + title: "ResNet50モデルアーキテクチャアニメーション", + alt: "ResNet50モデルアーキテクチャ図", + }, + rag: { title: "RAG技術ダイアグラム", alt: "RAGアーキテクチャ図" }, + auth: { + title: "ReactとAWSによる認証", + alt: "認証アーキテクチャ図", + }, + scrum: { + title: "アジャイルスクラムプロセス", + alt: "アジャイルスクラム図", + }, + inno: { + title: "オープンイノベーション", + alt: "オープンイノベーション図", + }, + }, + howHeading: "仕組み", + howIntro: "本アプリケーションは以下の技術を使用しています：", + tech: { + nextjs: "フロントエンドフレームワークとルーティング", + aiSdk: "ストリーミングAIレスポンスとマルチプロバイダーサポート", + drawio: "アプリに同梱されたエディター。アプリから直接操作できます", + }, + howOutro: + "ダイアグラムはdraw.ioでレンダリングできるXMLとして表現されます。AIがコマンドを処理し、それに応じてこのXMLを生成または変更します。", + providersHeading: "マルチプロバイダーサポート", + doubao: "ByteDance Doubao", + bedrock: "AWS Bedrock（デフォルト）", + openai: { before: "OpenAI / OpenAI互換API（", after: "経由）" }, + modelNote: { + before: "注：", + after: "はAWSロゴ付きのdraw.ioダイアグラムで学習されているため、AWSアーキテクチャダイアグラムを作成したい場合は最適な選択です。", + }, + supportHeading: "サポート＆お問い合わせ", + sponsor: { + before: "このプロジェクトが役に立ったら、ライブデモサイトのホスティングを支援するために", + link: "スポンサー", + after: "をご検討ください！", + }, + contact: { + before: "サポートやお問い合わせについては、", + link: "GitHubリポジトリ", + after: "でissueを開くか、ご連絡ください：me[at]jiang.jp", + }, + openEditor: "エディタを開く", + footer: "Next AI Draw.io - オープンソースAI搭載ダイアグラムジェネレーター", + }, +} + +// The example prompts stay in English in every language +const examples: { id: ExampleId; src: string; prompt: ReactNode }[] = [ + { + id: "resnet50", + src: "/resnet50.svg", + prompt: ( + <> + Give me an animated architecture diagram of the + ResNet50 model. + + ), + }, + { + id: "rag", + src: "/rag_prod.svg", + prompt: ( + <> + Generate a RAG architecture diagram for{" "} + chat application. Use connected diagram for + data ingestion + + ), + }, + { + id: "auth", + src: "/auth.svg", + prompt: ( + <> + Generate authentication process using React with{" "} + AWS. Use Serverless architecture. + + ), + }, + { + id: "scrum", + src: "/agile_scrum.svg", + prompt: ( + <> + Generate agile scrum workflow diagram for software development + team. + + ), + }, + { + id: "inno", + src: "/inno.svg", + prompt: ( + <> + Create visualization of Henry Chesbrough's Open Innovation + model. + + ), + }, +] + +// Traditional Chinese has no About text of its own and shows the Simplified one +function textsFor(rawLang: string): AboutTexts { + const lang: Locale = hasLocale(rawLang) ? rawLang : "en" + return texts[lang === "zh-Hant" ? "zh" : lang] +} + +type Props = { params: Promise<{ lang: string }> } + +export async function generateMetadata({ params }: Props): Promise { + const { lang } = await params + const t = textsFor(lang) + return { title: t.title, description: t.description, keywords: t.keywords } +} + +export default async function About({ params }: Props) { + const { lang } = await params + const t = textsFor(lang) + const [hero, ...grid] = examples + return (
{/* Navigation */} @@ -25,32 +422,32 @@ export default function About() {
Next AI Draw.io
@@ -66,8 +463,7 @@ export default function About() { Next AI Draw.io

- AI-Powered Diagram Creation Tool - Chat, Draw, - Visualize + {t.tagline}

@@ -77,92 +473,53 @@ export default function About() { {/* Bring Your Own Key */}

- Bring Your Own API Key + {t.byok.title}

- You can also use your own API key with any - supported provider. Click the Settings icon - in the chat panel to configure your provider - and API key. + {t.byok.body}

- Your key is stored locally in your browser - and is never stored on the server. + {t.byok.note}

-

- 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. -

+

{t.intro}

{/* Features */}

- Features + {t.featuresHeading}

    -
  • - 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 -
    • -
  • - Versions and Undo: Every AI change - becomes a version in the chat that you can compare, - restore or undo; Ctrl+Z on the canvas takes it back - too -
    • -
  • - Interactive Chat Interface: - Communicate with AI to refine your diagrams in - real-time -
    • -
  • - AWS Architecture Diagram Support: - Specialized support for generating AWS architecture - diagrams -
    • -
  • - Animated Connectors: Create dynamic - and animated connectors between diagram elements for - better visualization -
    • + {t.features.map((feature) => ( +
  • + {feature.title} + {t.colon} + {feature.text} +
    • + ))}
{/* Examples */}

- Examples + {t.examplesHeading}

-

- Here are some example prompts and their generated - diagrams: -

+

{t.examplesIntro}

- {/* ResNet50 Architecture */} + {/* First example on its own */}

- Animated ResNet50 Model Architecture + {t.examples[hero.id].title}

- Prompt: Give me an{" "} - animated architecture diagram - of the ResNet50 model. + Prompt: {hero.prompt}

Architecture diagram for ResNet50 model -
-

- RAG Technique Diagram -

-

- Prompt: Generate a RAG - architecture diagram for{" "} - chat application. Use - connected diagram for data ingestion -

-
- RAG Architecture Diagram + {grid.map((example) => ( +
+

+ {t.examples[example.id].title} +

+

+ Prompt:{" "} + {example.prompt} +

+
+ {t.examples[example.id].alt} +
-
-
-

- Authentication using React and AWS -

-

- Prompt: Generate - authentication process using React with{" "} - AWS. Use Serverless - architecture. -

-
- Authentication Architecture Diagram -
-
-
-

- Agile Scrum Process -

-

- Prompt: Generate agile - scrum workflow diagram for software - development team. -

-
- Agile Scrum Diagram -
-
-
-

- Open Innovation -

-

- Prompt: Create - visualization of Henry Chesbrough's - Open Innovation model. -

-
- Open Innovation Diagram -
-
+ ))}
{/* How It Works */}

- How It Works + {t.howHeading}

-

- The application uses the following technologies: -

+

{t.howIntro}

  • - Next.js: For the frontend framework - and routing + Next.js + {t.colon} + {t.tech.nextjs}
  • - Vercel AI SDK (ai +{" "} - @ai-sdk/*): For streaming AI responses - and multi-provider support + Vercel AI SDK + {t.parenOpen} + ai + @ai-sdk/* + {t.parenClose} + {t.colon} + {t.tech.aiSdk}
  • - draw.io: The editor, bundled with - the app so it can be driven directly + draw.io + {t.colon} + {t.tech.drawio}
-

- Diagrams are represented as XML that can be rendered in - draw.io. The AI processes your commands and generates or - modifies this XML accordingly. -

+

{t.howOutro}

{/* Multi-Provider Support */}

- Multi-Provider Support + {t.providersHeading}

    -
  • ByteDance Doubao
    • -
  • AWS Bedrock (default)
    • +
  • {t.doubao}
    • +
  • {t.bedrock}
  • - OpenAI / OpenAI-compatible APIs (via{" "} - OPENAI_BASE_URL) + {t.openai.before} + OPENAI_BASE_URL + {t.openai.after}
  • Anthropic
  • Google AI
    • @@ -303,48 +602,47 @@ export default function About() {
  • ModelScope

- Note that claude-sonnet-4-5 has trained on - draw.io diagrams with AWS logos, so if you want to - create AWS architecture diagrams, this is the best - choice. + {t.modelNote.before} + claude-sonnet-4-5 + {t.modelNote.after}

{/* Support */}

- Support & Contact + {t.supportHeading}

- If you find this project useful, please consider{" "} + {t.sponsor.before}{" "} - sponsoring + {t.sponsor.link} {" "} - to help host the live demo site! + {t.sponsor.after}

- For support or inquiries, please open an issue on the{" "} + {t.contact.before}{" "} - GitHub repository + {t.contact.link} {" "} - or contact: me[at]jiang.jp + {t.contact.after}

{/* CTA */}
- Open Editor + {t.openEditor}
@@ -354,8 +652,7 @@ export default function About() {

- Next AI Draw.io - Open Source AI-Powered Diagram - Generator + {t.footer}

diff --git a/app/[lang]/layout.tsx b/app/[lang]/layout.tsx index bc2fd112..05470c14 100644 --- a/app/[lang]/layout.tsx +++ b/app/[lang]/layout.tsx @@ -40,6 +40,13 @@ export async function generateStaticParams() { return i18n.locales.map((locale) => ({ lang: locale })) } +const OG_LOCALE: Record = { + en: "en_US", + zh: "zh_CN", + ja: "ja_JP", + "zh-Hant": "zh_HK", +} + // Generate metadata per locale export async function generateMetadata({ params, @@ -47,22 +54,19 @@ export async function generateMetadata({ params: Promise<{ lang: string }> }): Promise { const { lang: rawLang } = await params - const lang = ( - rawLang in { en: 1, zh: 1, ja: 1, "zh-Hant": 1 } ? rawLang : "en" - ) as Locale + const lang: Locale = hasLocale(rawLang) ? rawLang : i18n.defaultLocale - // Default to English metadata const titles: Record = { en: "Next AI Draw.io - AI-Powered Diagram Generator", - zh: "Next AI Draw.io - AI powered diagram generator", - ja: "Next AI Draw.io - AI-powered diagram generator", + zh: "Next AI Draw.io - AI 驱动的图表生成器", + ja: "Next AI Draw.io - AI 搭載ダイアグラム生成ツール", "zh-Hant": "Next AI Draw.io - AI 驅動的圖表產生器", } const descriptions: Record = { en: "Create AWS architecture diagrams, flowcharts, and technical diagrams using AI. Free online tool integrating draw.io with AI assistance for professional diagram creation.", - zh: "Use AI to create AWS architecture diagrams, flowcharts, and technical diagrams. Free online tool integrated with draw.io and AI assistance for professional diagram creation.", - ja: "Create AWS architecture diagrams, flowcharts, and technical diagrams using AI. Create professional diagrams with a free online tool that integrates draw.io with an AI assistant.", + zh: "使用 AI 创建 AWS 架构图、流程图和技术图表。免费在线工具，整合 draw.io 与 AI 辅助，轻松创建专业图表。", + ja: "AI で AWS アーキテクチャ図、フローチャート、技術図を作成。draw.io と AI アシスタントを統合した無料オンラインツールで、プロ品質の図を簡単に作成できます。", "zh-Hant": "使用 AI 建立 AWS 架構圖、流程圖和技術圖表。免費線上工具整合 draw.io 與 AI 輔助，輕鬆建立專業圖表。", } @@ -91,14 +95,7 @@ export async function generateMetadata({ type: "website", url: "https://next-ai-drawio.jiang.jp", siteName: "Next AI Draw.io", - locale: - lang === "zh" - ? "zh_CN" - : lang === "zh-Hant" - ? "zh_HK" - : lang === "ja" - ? "ja_JP" - : "en_US", + locale: OG_LOCALE[lang], images: [ { url: "/architecture.png", diff --git a/components/icons/github.tsx b/components/icons/github.tsx new file mode 100644 index 00000000..8f751843 --- /dev/null +++ b/components/icons/github.tsx @@ -0,0 +1,13 @@ +// GitHub mark as an inline SVG, so no icon package is needed for one icon +export function GitHubIcon({ className }: { className?: string }) { + return ( + + ) +} diff --git a/components/quota-limit-toast.tsx b/components/quota-limit-toast.tsx index 458c892a..f699b742 100644 --- a/components/quota-limit-toast.tsx +++ b/components/quota-limit-toast.tsx @@ -2,7 +2,7 @@ import { Coffee, Settings, X } from "lucide-react" import type React from "react" -import { FaGithub } from "react-icons/fa" +import { GitHubIcon } from "@/components/icons/github" import { useDictionary } from "@/hooks/use-dictionary" import { formatMessage } from "@/lib/i18n/utils" @@ -28,16 +28,10 @@ export function QuotaLimitToast({ n >= 1000 ? `${(n / 1000).toFixed(1)}k` : n.toString() const quotaMessage = isTokenLimit - ? isSelfHosted - ? (dict.quota.messageTokenSelfHosted ?? dict.quota.messageToken) - : dict.quota.messageToken - : isSelfHosted - ? (dict.quota.messageApiSelfHosted ?? dict.quota.messageApi) - : dict.quota.messageApi + ? dict.quota.messageToken + : dict.quota.messageApi - const tipHtml = isSelfHosted - ? (dict.quota.tipSelfHosted ?? dict.quota.tip) - : dict.quota.tip + const tipHtml = isSelfHosted ? dict.quota.tipSelfHosted : dict.quota.tip const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Escape") { @@ -52,7 +46,7 @@ export function QuotaLimitToast({ aria-live="polite" tabIndex={0} onKeyDown={handleKeyDown} - className="relative w-[400px] overflow-hidden rounded-xl border border-border/50 bg-card p-5 shadow-soft animate-message-in" + className="relative w-[400px] overflow-hidden rounded-xl border border-border/50 bg-card p-5 shadow-float animate-message-in" > {/* Close button */}