A web-based annotation editor for IIIF (International Image Interoperability Framework) images, with real-time sync via Firebase and client-side OCR for Japanese historical documents.

IIIF 画像にアノテーションを付与・管理できる Web エディタです。Firebase による リアルタイム同期と、日本語史料向けのクライアントサイド OCR を備えています。

English | 日本語

• 🖼️ IIIF support — Presentation API v2 & v3 manifests and collection browsing
• ✏️ Annotation tools — rectangle & polygon regions on deep-zoom images (OpenSeadragon + Annotorious)
• 🔥 Real-time sync — annotations stored in Firestore, synced live
• 🔍 OCR — in-browser Japanese OCR (NDL Koten OCR, ONNX Runtime / WebAssembly)
• 📤 Export — IIIF Annotation / IIIF Manifest, TEI/XML, JSON, CSV
• 🔐 Auth — Firebase Auth (Google and Email/Password)
• 🔑 API access — issue API keys and read annotations via a REST endpoint
• 🌐 i18n — Japanese / English (next-intl), light & dark themes

• Framework: Next.js 16 (App Router), React 19, TypeScript
• Styling: Tailwind CSS v4 + shared design system @nakamura196/react-ui
• Viewer: OpenSeadragon + Annotorious
• Backend: Firebase (Firestore, Authentication)
• OCR: @nakamura196/ndl-koten-ocr-web
• IIIF: @iiif/parser, @iiif/presentation-3

Prerequisites: Node.js 20+, a Firebase project with Firestore & Authentication enabled.

git clone https://github.com/nakamura196/iiif-annotator.git
cd iiif-annotator
npm install

Copy .env.example to .env.local and fill in your values (see the file for the full list — Firebase client config, FIREBASE_SERVICE_ACCOUNT_BASE64 for the API routes, and optional GA / Mirador URLs):

cp .env.example .env.local

npm run dev      # http://localhost:3111

If you keep FIREBASE_SERVICE_ACCOUNT_BASE64 in 1Password (recommended — set it to an op://… reference in .env.local), inject it at runtime instead:

npm run dev:op   # op run --env-file=.env.local -- npm run dev

• Home (/) — paste a IIIF manifest or collection URL to begin.
• Editor (/item?manifest=URL&pos=N) — sign in, pick the rectangle/polygon tool, draw a region, enter text; changes save to Firestore automatically.
• OCR — open the OCR dialog to recognize text on the current canvas and apply detections as annotations.
• Export — choose IIIF Manifest, TEI/XML, JSON, or CSV.
• API — create a key under Settings, then call GET /api/annotations with an X-API-Key header.

npm run dev        # start dev server (port 3111)
npm run build      # production build
npm run start      # start production server
npm run lint       # ESLint
npm run typecheck  # tsc --noEmit

Firestore backups, usage statistics, and maintenance scripts live in a separate private repository (nakamura196/iiif-annotator-admin) so this public repo never contains user data.

MIT — see LICENSE.

• IIIF Consortium — IIIF specifications
• NDL Lab — Koten OCR model
• Annotorious — annotation framework
• OpenSeadragon — deep-zoom viewer

English | 日本語

IIIF 画像（国際的な画像相互運用フレームワーク）にアノテーションを付与・管理する Web エディタです。Firebase によるリアルタイム同期と、日本語史料向けの クライアントサイド OCR に対応しています。

• 🖼️ IIIF 対応 — Presentation API v2 / v3 のマニフェスト・コレクション閲覧
• ✏️ アノテーション — ディープズーム画像上に矩形・ポリゴンで領域指定（OpenSeadragon + Annotorious）
• 🔥 リアルタイム同期 — アノテーションを Firestore に保存し即時同期
• 🔍 OCR — ブラウザ内で日本語 OCR（NDL古典籍OCR、ONNX Runtime / WebAssembly）
• 📤 エクスポート — IIIF Annotation / IIIF Manifest、TEI/XML、JSON、CSV
• 🔐 認証 — Firebase Auth（Google / メール・パスワード）
• 🔑 API 連携 — API キーを発行し、REST エンドポイントでアノテーション取得
• 🌐 多言語 — 日本語 / 英語（next-intl）、ライト・ダークテーマ

• フレームワーク: Next.js 16（App Router）、React 19、TypeScript
• スタイル: Tailwind CSS v4 + 共有デザインシステム @nakamura196/react-ui
• ビューア: OpenSeadragon + Annotorious
• バックエンド: Firebase（Firestore、Authentication）
• OCR: @nakamura196/ndl-koten-ocr-web
• IIIF: @iiif/parser、@iiif/presentation-3

前提: Node.js 20 以上、Firestore と Authentication を有効化した Firebase プロジェクト。

git clone https://github.com/nakamura196/iiif-annotator.git
cd iiif-annotator
npm install

.env.example を .env.local にコピーし、値を設定します（必要な変数の一覧は ファイル内を参照。Firebase クライアント設定、API ルート用の FIREBASE_SERVICE_ACCOUNT_BASE64、任意の GA / Mirador URL など）:

cp .env.example .env.local

npm run dev      # http://localhost:3111

FIREBASE_SERVICE_ACCOUNT_BASE64 を 1Password で管理する場合（推奨。.env.local には op://… 参照を書く）、実行時に注入します:

npm run dev:op   # op run --env-file=.env.local -- npm run dev

• ホーム（/）— IIIF のマニフェストまたはコレクションの URL を入力して開始。
• エディタ（/item?manifest=URL&pos=N）— ログイン後、矩形/ポリゴンツールで 領域を描画しテキストを入力。変更は自動で Firestore に保存されます。
• OCR — OCR ダイアログで現在のキャンバスの文字を認識し、検出結果を アノテーションとして適用できます。
• エクスポート — IIIF Manifest / TEI/XML / JSON / CSV から選択。
• API — 「設定」でキーを発行し、X-API-Key ヘッダ付きで GET /api/annotations を呼び出します。

npm run dev        # 開発サーバ起動（ポート 3111）
npm run build      # 本番ビルド
npm run start      # 本番サーバ起動
npm run lint       # ESLint
npm run typecheck  # tsc --noEmit

Firestore のバックアップ、利用統計、メンテナンス用スクリプトは、ユーザーデータを 公開リポジトリに含めないため、別のプライベートリポジトリ （nakamura196/iiif-annotator-admin）で管理しています。

MIT — LICENSE を参照してください。

• IIIF Consortium — IIIF 仕様
• NDL Lab — 古典籍 OCR モデル
• Annotorious — アノテーションフレームワーク
• OpenSeadragon — ディープズームビューア