# putra10/bisindotranscriber architecture

> Architecture diagram of the GitHub repository putra10/bisindotranscriber, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/putra10/bisindotranscriber
- Repository: https://github.com/putra10/bisindotranscriber

## Overview

BISINDO Transkripsi is a browser-based learning and transcription site for Indonesian Sign Language fingerspelling. Its primary workflow is: the user enables the camera, the browser tracks hands and classifies letter poses locally, then stabilizes recognized letters into text that can be copied or spoken. Separate learning flows browse 3D alphabet poses, spell entered or listed words letter by letter, and practice random letters with a score. The graph follows documented page capabilities; unsampled component internals are represented without asserting their wiring.

Main entry points: [`components/KotakTranskripsi.tsx`](https://github.com/putra10/bisindotranscriber/blob/main/components/KotakTranskripsi.tsx) (Camera and text UI), [`app/page.tsx`](https://github.com/putra10/bisindotranscriber/blob/main/app/page.tsx) (Home page), [`components/ModelTangan3D.tsx`](https://github.com/putra10/bisindotranscriber/blob/main/components/ModelTangan3D.tsx) (3D hand model), [`app/transkripsi/page.tsx`](https://github.com/putra10/bisindotranscriber/blob/main/app/transkripsi/page.tsx) (Transcription page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Site and pages"]
  node_home["Home page<br/>[page.tsx]"]
  node_transcription_page["Transcription page<br/>[page.tsx]"]
  node_alphabet_page["Alphabet page<br/>[page.tsx]"]
  node_letter_page["Letter detail<br/>[page.tsx]"]
  node_spelling_page["Spelling page<br/>[page.tsx]"]
  node_word_page["Word detail<br/>[page.tsx]"]
  node_word_directory["Word directory<br/>[page.tsx]"]
  node_practice_page["Practice page<br/>[page.tsx]"]
  node_about["About and privacy<br/>[page.tsx]"]
end

subgraph group_camera["Camera transcription"]
  node_transcription_box["Camera and text UI"]
  node_hand_tracker["Hand tracking"]
  node_feature_builder["Landmark features<br/>[fitur.ts]"]
  node_classifier["Letter classifier<br/>[pengklasifikasi.ts]"]
  node_smoother["Prediction smoothing<br/>[penghalus.ts]"]
  node_text_builder["Text assembly<br/>[penyusunTeks.ts]"]
end

subgraph group_learning["Learning experiences"]
  node_alphabet_explorer["Alphabet explorer<br/>[JelajahAbjad.tsx]"]
  node_hand_model["3D hand model<br/>[ModelTangan3D.tsx]"]
  node_word_speller["Word spelling UI<br/>[EjaKata.tsx]"]
  node_practice_mode["Practice mode<br/>[ModeLatihan.tsx]"]
end

subgraph group_shared["Shared domain logic"]
  node_alphabet_data["Alphabet pose data<br/>[abjad.ts]"]
  node_word_data["Word and phrase data<br/>[kata.ts]"]
end

node_visitor(("Visitor"))
node_camera_api(("Browser camera"))
node_speech(("Browser speech"))
node_clipboard(("Browser clipboard"))

node_visitor -->|"visits"| node_home
node_visitor -->|"opens"| node_transcription_page
node_visitor -->|"browses"| node_alphabet_page
node_visitor -->|"opens"| node_spelling_page
node_visitor -->|"browses"| node_word_directory
node_visitor -->|"starts"| node_practice_page
node_home -->|"links to"| node_transcription_page
node_home -->|"links to"| node_alphabet_page
node_home -->|"links to"| node_spelling_page
node_home -->|"links to"| node_practice_page
node_transcription_page -->|"renders"| node_transcription_box
node_transcription_box -->|"requests video"| node_camera_api
node_transcription_box -->|"loads and runs"| node_hand_tracker
node_hand_tracker -->|"provides landmarks"| node_feature_builder
node_transcription_box -->|"builds features"| node_feature_builder
node_transcription_box -->|"loads and predicts"| node_classifier
node_transcription_box -->|"smooths predictions"| node_smoother
node_transcription_box -->|"updates text"| node_text_builder
node_transcription_box -->|"copies text"| node_clipboard
node_transcription_box -->|"speaks text"| node_speech
node_alphabet_page -->|"renders"| node_alphabet_explorer
node_letter_page -->|"renders"| node_hand_model
node_alphabet_explorer -->|"shows poses"| node_hand_model
node_hand_model -->|"reads poses"| node_alphabet_data
node_spelling_page -->|"renders"| node_word_speller
node_word_page -->|"renders"| node_word_speller
node_word_directory -->|"lists entries"| node_word_data
node_word_page -->|"reads entry"| node_word_data
node_word_speller -->|"displays letters"| node_hand_model
node_practice_page -->|"renders"| node_practice_mode
node_practice_mode -->|"uses camera flow"| node_transcription_box

click node_home "https://github.com/putra10/bisindotranscriber/blob/main/app/page.tsx"
click node_transcription_page "https://github.com/putra10/bisindotranscriber/blob/main/app/transkripsi/page.tsx"
click node_alphabet_page "https://github.com/putra10/bisindotranscriber/blob/main/app/abjad/page.tsx"
click node_letter_page "https://github.com/putra10/bisindotranscriber/blob/main/app/abjad/%5Bhuruf%5D/page.tsx"
click node_spelling_page "https://github.com/putra10/bisindotranscriber/blob/main/app/eja/page.tsx"
click node_word_page "https://github.com/putra10/bisindotranscriber/blob/main/app/eja/%5Bkata%5D/page.tsx"
click node_word_directory "https://github.com/putra10/bisindotranscriber/blob/main/app/kata/page.tsx"
click node_practice_page "https://github.com/putra10/bisindotranscriber/blob/main/app/latihan/page.tsx"
click node_about "https://github.com/putra10/bisindotranscriber/blob/main/app/tentang/page.tsx"
click node_transcription_box "https://github.com/putra10/bisindotranscriber/blob/main/components/KotakTranskripsi.tsx"
click node_hand_tracker "https://github.com/putra10/bisindotranscriber/blob/main/components/KotakTranskripsi.tsx"
click node_feature_builder "https://github.com/putra10/bisindotranscriber/blob/main/lib/fitur.ts"
click node_classifier "https://github.com/putra10/bisindotranscriber/blob/main/lib/pengklasifikasi.ts"
click node_smoother "https://github.com/putra10/bisindotranscriber/blob/main/lib/penghalus.ts"
click node_text_builder "https://github.com/putra10/bisindotranscriber/blob/main/lib/penyusunTeks.ts"
click node_alphabet_explorer "https://github.com/putra10/bisindotranscriber/blob/main/components/JelajahAbjad.tsx"
click node_hand_model "https://github.com/putra10/bisindotranscriber/blob/main/components/ModelTangan3D.tsx"
click node_word_speller "https://github.com/putra10/bisindotranscriber/blob/main/components/EjaKata.tsx"
click node_practice_mode "https://github.com/putra10/bisindotranscriber/blob/main/components/ModeLatihan.tsx"
click node_alphabet_data "https://github.com/putra10/bisindotranscriber/blob/main/lib/abjad.ts"
click node_word_data "https://github.com/putra10/bisindotranscriber/blob/main/lib/kata.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_home,node_transcription_page,node_alphabet_page,node_letter_page,node_spelling_page,node_word_page,node_word_directory,node_practice_page,node_about,node_camera_api,node_speech,node_clipboard toneBlue
class node_transcription_box,node_hand_tracker,node_feature_builder,node_classifier,node_smoother,node_text_builder toneAmber
class node_alphabet_explorer,node_hand_model,node_word_speller,node_practice_mode toneMint
class node_alphabet_data,node_word_data toneRose
class node_visitor toneIndigo
```

## Components

### Site and pages

- [Home page](https://github.com/putra10/bisindotranscriber/blob/main/app/page.tsx): `app/page.tsx`
- [Transcription page](https://github.com/putra10/bisindotranscriber/blob/main/app/transkripsi/page.tsx): `app/transkripsi/page.tsx`
- [Alphabet page](https://github.com/putra10/bisindotranscriber/blob/main/app/abjad/page.tsx): `app/abjad/page.tsx`
- [Letter detail](https://github.com/putra10/bisindotranscriber/blob/main/app/abjad/%5Bhuruf%5D/page.tsx): `app/abjad/[huruf]/page.tsx`
- [Spelling page](https://github.com/putra10/bisindotranscriber/blob/main/app/eja/page.tsx): `app/eja/page.tsx`
- [Word detail](https://github.com/putra10/bisindotranscriber/blob/main/app/eja/%5Bkata%5D/page.tsx): `app/eja/[kata]/page.tsx`
- [Word directory](https://github.com/putra10/bisindotranscriber/blob/main/app/kata/page.tsx): `app/kata/page.tsx`
- [Practice page](https://github.com/putra10/bisindotranscriber/blob/main/app/latihan/page.tsx): `app/latihan/page.tsx`
- [About and privacy](https://github.com/putra10/bisindotranscriber/blob/main/app/tentang/page.tsx): `app/tentang/page.tsx`

### Camera transcription

- [Camera and text UI](https://github.com/putra10/bisindotranscriber/blob/main/components/KotakTranskripsi.tsx): `components/KotakTranskripsi.tsx`
- [Hand tracking](https://github.com/putra10/bisindotranscriber/blob/main/components/KotakTranskripsi.tsx): `components/KotakTranskripsi.tsx`
- [Landmark features](https://github.com/putra10/bisindotranscriber/blob/main/lib/fitur.ts): `lib/fitur.ts`
- [Letter classifier](https://github.com/putra10/bisindotranscriber/blob/main/lib/pengklasifikasi.ts): `lib/pengklasifikasi.ts`
- [Prediction smoothing](https://github.com/putra10/bisindotranscriber/blob/main/lib/penghalus.ts): `lib/penghalus.ts`
- [Text assembly](https://github.com/putra10/bisindotranscriber/blob/main/lib/penyusunTeks.ts): `lib/penyusunTeks.ts`

### Learning experiences

- [Alphabet explorer](https://github.com/putra10/bisindotranscriber/blob/main/components/JelajahAbjad.tsx): `components/JelajahAbjad.tsx`
- [3D hand model](https://github.com/putra10/bisindotranscriber/blob/main/components/ModelTangan3D.tsx): `components/ModelTangan3D.tsx`
- [Word spelling UI](https://github.com/putra10/bisindotranscriber/blob/main/components/EjaKata.tsx): `components/EjaKata.tsx`
- [Practice mode](https://github.com/putra10/bisindotranscriber/blob/main/components/ModeLatihan.tsx): `components/ModeLatihan.tsx`

### Shared domain logic

- [Alphabet pose data](https://github.com/putra10/bisindotranscriber/blob/main/lib/abjad.ts): `lib/abjad.ts`
- [Word and phrase data](https://github.com/putra10/bisindotranscriber/blob/main/lib/kata.ts): `lib/kata.ts`

### Other components

- **Visitor**
- **Browser camera**
- **Browser speech**
- **Browser clipboard**

## Connections

- Visitor → Home page: visits
- Visitor → Transcription page: opens
- Visitor → Alphabet page: browses
- Visitor → Spelling page: opens
- Visitor → Word directory: browses
- Visitor → Practice page: starts
- Home page → Transcription page: links to
- Home page → Alphabet page: links to
- Home page → Spelling page: links to
- Home page → Practice page: links to
- Transcription page → Camera and text UI: renders
- Camera and text UI → Browser camera: requests video
- Camera and text UI → Hand tracking: loads and runs
- Hand tracking → Landmark features: provides landmarks
- Camera and text UI → Landmark features: builds features
- Camera and text UI → Letter classifier: loads and predicts
- Camera and text UI → Prediction smoothing: smooths predictions
- Camera and text UI → Text assembly: updates text
- Camera and text UI → Browser clipboard: copies text
- Camera and text UI → Browser speech: speaks text
- Alphabet page → Alphabet explorer: renders
- Letter detail → 3D hand model: renders
- Alphabet explorer → 3D hand model: shows poses
- 3D hand model → Alphabet pose data: reads poses
- Spelling page → Word spelling UI: renders
- Word detail → Word spelling UI: renders
- Word directory → Word and phrase data: lists entries
- Word detail → Word and phrase data: reads entry
- Word spelling UI → 3D hand model: displays letters
- Practice page → Practice mode: renders
- Practice mode → Camera and text UI: uses camera flow