https://github.com/tkc/nextjs-annotator
https://github.com/tkc/nextjs-annotator
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/tkc/nextjs-annotator
- Owner: tkc
- Created: 2026-02-15T11:59:10.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2026-02-15T13:38:16.000Z (5 months ago)
- Last Synced: 2026-02-15T18:27:59.970Z (5 months ago)
- Language: TypeScript
- Size: 330 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Image Annotation Tool
Next.js 16 + React 19 + react-konva で構築した ML 訓練データ作成用画像アノテーションツール。
ローカルディレクトリの画像に対して BBox / Polygon / Point のアノテーションを行い、COCO JSON / YOLO TXT でエクスポートする。
## 必要環境
- Node.js >= 20
- pnpm >= 9
### プロジェクト設定
`annotation-config.json` でラベルと画像ディレクトリを設定する:
```json
{
"imageDir": "./data/images",
"outputDir": "./data/annotations",
"labels": ["car", "person", "dog", "cat", "bicycle"]
}
```
## 起動
```bash
# 開発サーバー
pnpm dev
```
http://localhost:3000 でアクセス。
## その他のコマンド
```bash
pnpm build # プロダクションビルド
pnpm start # ビルド後のサーバー起動
pnpm lint # Biome リントチェック
pnpm format # Biome フォーマット
pnpm check # Biome リント + フォーマット (自動修正)
```
## 操作方法
### ツール
| キー | ツール | 操作 |
|------|--------|------|
| V | Select | クリックで選択、ドラッグで移動・リサイズ |
| B | BBox | ドラッグで矩形描画 |
| P | Polygon | クリックで頂点追加、ダブルクリックで確定 |
| . | Point | クリックで配置 |
### その他のショートカット
| キー | アクション |
|------|-----------|
| Delete / Backspace | 選択中のアノテーション削除 |
| ← | 前の画像 |
| → | 次の画像 |
| マウスホイール | ズーム (0.1x - 10x) |
### エクスポート
ヘッダーの「Export COCO」/「Export YOLO」ボタンからダウンロード。
## Tech Stack
| 技術 | 用途 |
|------|------|
| Next.js 16 (App Router) | フレームワーク |
| React 19 | UI |
| Konva + react-konva | Canvas 描画 |
| Zustand | 状態管理 |
| Zod | スキーマ検証 |
| Tailwind CSS 4 + shadcn/ui | スタイリング |
| Biome | リント + フォーマット |