Learn kanji from photos. Upload an image of Japanese text, and KanjiLens extracts the kanji, prioritizes the ones you don't know yet, and generates AI-powered study packs with mnemonics, compounds, and example sentences. Review with SRS flashcards.
- Photo-based kanji extraction — Upload photos of signs, manga, textbooks, or any Japanese text
- AI-powered OCR — Vision models extract and correct Japanese text via n8n + OpenRouter
- Smart prioritization — Unknown kanji ranked by frequency and familiarity
- AI study packs — Generated mnemonics, example sentences, compounds, and confusable kanji warnings
- SRS flashcard review — Spaced repetition for long-term retention
- HEIC support — iPhone photos auto-converted to JPEG
- 2,000+ kanji dictionary — Built-in readings, meanings, and compounds
- Frontend: Next.js 16 (App Router), React 19, TypeScript
- Styling: Tailwind CSS v4 with ukiyo-e inspired theme
- Database: PostgreSQL via Prisma ORM
- AI Pipeline: n8n webhooks + OpenRouter (vision model for OCR, LLM for study content)
- Image Processing: heic-convert for HEIC/HEIF support
- Node.js 20+
- PostgreSQL 16 (or use the included Docker Compose)
- An n8n instance with the KanjiLens workflows
- An OpenRouter API key
git clone https://github.com/alecstephens3-stack/kanjilens.git
cd kanjilensdocker compose up -dOr connect to an existing PostgreSQL instance.
cp .env.example .envEdit .env with your values:
| Variable | Description |
|---|---|
DATABASE_URL |
PostgreSQL connection string (default works with Docker Compose) |
N8N_WEBHOOK_URL |
Base URL of your n8n instance |
OPENROUTER_API_KEY |
Your OpenRouter API key |
DEMO_USER_ID |
User ID for the demo user (default: demo) |
npm install
npx prisma migrate dev
npm run db:seedThe app expects two webhook endpoints on your n8n instance:
OCR Webhook — POST /webhook/kanjilens-ocr
- Input:
{ imageBase64: string }(base64-encoded JPEG) - Processing: Sends image to an OpenRouter vision model for Japanese text extraction
- Output:
{ text: string }
Study Content Webhook — POST /webhook/kanjilens-generate
- Input:
{ kanji, meanings, readings, compounds }for study content generation, or{ ocrCorrection: true, rawText }for OCR error correction - Processing: Calls OpenRouter LLM to generate mnemonics, examples, confusable warnings
- Output:
{ mnemonic, examples, confusable }or{ correctedText }
npm run devOpen http://localhost:3000.
- Upload — User uploads a photo containing Japanese text
- OCR — Image is sent to n8n webhook, which uses a vision model to extract text
- Correction — Extracted text goes through LLM-based OCR error correction
- Extraction — Kanji are extracted from corrected text using Unicode regex
- Prioritization — Kanji ranked: unknown first, then by frequency and SRS history
- Study Pack — Each kanji gets AI-generated mnemonics, examples, and confusable warnings
- Review — Flashcard interface with SRS rating (Again/Hard/Good/Easy)
kanjilens/
├── prisma/ # Database schema and migrations
├── src/
│ ├── app/
│ │ ├── api/ # API routes (scan, pack, review)
│ │ ├── scan/[id]/ # Scan results page
│ │ ├── pack/[id]/ # Study pack page
│ │ ├── review/[id]/ # Flashcard review page
│ │ ├── globals.css # Ukiyo-e theme
│ │ ├── layout.tsx # Root layout
│ │ └── page.tsx # Home (image upload)
│ ├── data/
│ │ └── kanji-dict.json # Kanji dictionary
│ ├── lib/ # Shared utilities
│ │ ├── db.ts # Prisma client
│ │ ├── dictionary.ts # Dictionary lookup
│ │ ├── kanji.ts # Kanji extraction + prioritization
│ │ └── srs.ts # Spaced repetition algorithm
│ └── types/ # TypeScript declarations
└── docker-compose.yml # PostgreSQL for local dev
Contributions are welcome. Please open an issue to discuss changes before submitting a PR.
MIT