# thomas-mckanna/speech-to-latex architecture

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

- Interactive diagram: https://gitdiagram.com/thomas-mckanna/speech-to-latex
- Repository: https://github.com/thomas-mckanna/speech-to-latex

## Overview

Speech to LaTeX is a browser-only application that turns microphone recordings into LaTeX and displays the rendered expression. The main flow runs from recording through Whisper transcription, WebLLM conversion, and MathJax rendering; model selection and conversation reset are supporting capabilities. The README documents offline, client-side processing. Some components and the transcriber implementation are unsampled, so uncertain internal wiring is omitted.

Main entry points: [`src/App.tsx`](https://github.com/thomas-mckanna/speech-to-latex/blob/main/src/App.tsx) (App), [`src/components/AudioManager.tsx`](https://github.com/thomas-mckanna/speech-to-latex/blob/main/src/components/AudioManager.tsx) (Audio manager), [`src/hooks/useTranscriber.ts`](https://github.com/thomas-mckanna/speech-to-latex/blob/main/src/hooks/useTranscriber.ts) (Transcriber hook), [`src/components/AudioRecorder.tsx`](https://github.com/thomas-mckanna/speech-to-latex/blob/main/src/components/AudioRecorder.tsx) (Audio recorder)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application UI"]
  node_app["App<br/>[App.tsx]"]
  node_audio_section["Audio section<br/>[AudioSection.tsx]"]
  node_output["LaTeX output<br/>[LatexOutput.tsx]"]
  node_renderer["MathJax renderer<br/>[LatexRenderer.tsx]"]
end

subgraph group_audio["Audio transcription"]
  node_recorder["Audio recorder<br/>[AudioRecorder.tsx]"]
  node_audio_manager["Audio manager<br/>[AudioManager.tsx]"]
  node_transcriber["Transcriber hook<br/>[useTranscriber.ts]"]
  node_worker_hook["Worker hook<br/>[useWorker.ts]"]
  node_whisper_worker["Whisper worker<br/>[whisper-worker.js]"]
end

subgraph group_generation["LaTeX generation"]
  node_conversation["Conversation hook<br/>[useConversation.ts]"]
  node_llm_hook["LLM engine hook<br/>[useLLMEngine.ts]"]
end

subgraph group_models["Model controls"]
  node_model_panel["Model selection"]
  node_model_loader["Model loading status<br/>[ModelLoader.tsx]"]
  node_model_catalog["Model catalog<br/>[Constants.ts]"]
end

node_user(("User"))
node_microphone["Browser microphone"]
node_webllm["WebLLM engine"]

node_user -->|"uses"| node_app
node_app -->|"renders"| node_audio_section
node_app -->|"renders"| node_output
node_app -->|"renders"| node_model_panel
node_app -->|"renders"| node_model_loader
node_audio_section -->|"renders"| node_audio_manager
node_audio_manager -->|"renders"| node_recorder
node_recorder -->|"captures audio"| node_microphone
node_recorder -->|"returns recording"| node_audio_manager
node_audio_manager -->|"starts transcription"| node_transcriber
node_transcriber -->|"creates worker"| node_worker_hook
node_worker_hook -->|"starts"| node_whisper_worker
node_transcriber -->|"posts audio"| node_whisper_worker
node_whisper_worker -->|"posts transcript"| node_transcriber
node_audio_manager -->|"sends transcript"| node_conversation
node_app -->|"provides engine"| node_conversation
node_conversation -->|"requests completion"| node_webllm
node_app -->|"loads selected model"| node_llm_hook
node_llm_hook -->|"looks up model"| node_model_catalog
node_llm_hook -->|"creates engine"| node_webllm
node_output -->|"renders expression"| node_renderer
node_model_panel -->|"updates selection"| node_app
node_model_loader -->|"shows status"| node_app

click node_app "https://github.com/thomas-mckanna/speech-to-latex/blob/main/src/App.tsx"
click node_audio_section "https://github.com/thomas-mckanna/speech-to-latex/blob/main/src/components/AudioSection.tsx"
click node_output "https://github.com/thomas-mckanna/speech-to-latex/blob/main/src/components/LatexOutput.tsx"
click node_renderer "https://github.com/thomas-mckanna/speech-to-latex/blob/main/src/components/LatexRenderer.tsx"
click node_recorder "https://github.com/thomas-mckanna/speech-to-latex/blob/main/src/components/AudioRecorder.tsx"
click node_audio_manager "https://github.com/thomas-mckanna/speech-to-latex/blob/main/src/components/AudioManager.tsx"
click node_transcriber "https://github.com/thomas-mckanna/speech-to-latex/blob/main/src/hooks/useTranscriber.ts"
click node_worker_hook "https://github.com/thomas-mckanna/speech-to-latex/blob/main/src/hooks/useWorker.ts"
click node_whisper_worker "https://github.com/thomas-mckanna/speech-to-latex/blob/main/src/whisper-worker.js"
click node_conversation "https://github.com/thomas-mckanna/speech-to-latex/blob/main/src/hooks/useConversation.ts"
click node_llm_hook "https://github.com/thomas-mckanna/speech-to-latex/blob/main/src/hooks/useLLMEngine.ts"
click node_model_panel "https://github.com/thomas-mckanna/speech-to-latex/blob/main/src/components/ModelSelectionPanel.tsx"
click node_model_loader "https://github.com/thomas-mckanna/speech-to-latex/blob/main/src/components/ModelLoader.tsx"
click node_model_catalog "https://github.com/thomas-mckanna/speech-to-latex/blob/main/src/utils/Constants.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_app,node_audio_section,node_output,node_renderer,node_user,node_microphone toneBlue
class node_recorder,node_audio_manager,node_transcriber,node_worker_hook,node_whisper_worker toneAmber
class node_conversation,node_llm_hook toneMint
class node_model_panel,node_model_loader,node_model_catalog toneRose
class node_webllm toneIndigo
```

## Components

### Application UI

- [App](https://github.com/thomas-mckanna/speech-to-latex/blob/main/src/App.tsx): `src/App.tsx`
- [Audio section](https://github.com/thomas-mckanna/speech-to-latex/blob/main/src/components/AudioSection.tsx): `src/components/AudioSection.tsx`
- [LaTeX output](https://github.com/thomas-mckanna/speech-to-latex/blob/main/src/components/LatexOutput.tsx): `src/components/LatexOutput.tsx`
- [MathJax renderer](https://github.com/thomas-mckanna/speech-to-latex/blob/main/src/components/LatexRenderer.tsx): `src/components/LatexRenderer.tsx`

### Audio transcription

- [Audio recorder](https://github.com/thomas-mckanna/speech-to-latex/blob/main/src/components/AudioRecorder.tsx): `src/components/AudioRecorder.tsx`
- [Audio manager](https://github.com/thomas-mckanna/speech-to-latex/blob/main/src/components/AudioManager.tsx): `src/components/AudioManager.tsx`
- [Transcriber hook](https://github.com/thomas-mckanna/speech-to-latex/blob/main/src/hooks/useTranscriber.ts): `src/hooks/useTranscriber.ts`
- [Worker hook](https://github.com/thomas-mckanna/speech-to-latex/blob/main/src/hooks/useWorker.ts): `src/hooks/useWorker.ts`
- [Whisper worker](https://github.com/thomas-mckanna/speech-to-latex/blob/main/src/whisper-worker.js): `src/whisper-worker.js`

### LaTeX generation

- [Conversation hook](https://github.com/thomas-mckanna/speech-to-latex/blob/main/src/hooks/useConversation.ts): `src/hooks/useConversation.ts`
- [LLM engine hook](https://github.com/thomas-mckanna/speech-to-latex/blob/main/src/hooks/useLLMEngine.ts): `src/hooks/useLLMEngine.ts`

### Model controls

- [Model selection](https://github.com/thomas-mckanna/speech-to-latex/blob/main/src/components/ModelSelectionPanel.tsx): `src/components/ModelSelectionPanel.tsx`
- [Model loading status](https://github.com/thomas-mckanna/speech-to-latex/blob/main/src/components/ModelLoader.tsx): `src/components/ModelLoader.tsx`
- [Model catalog](https://github.com/thomas-mckanna/speech-to-latex/blob/main/src/utils/Constants.ts): `src/utils/Constants.ts`

### Other components

- **User**
- **Browser microphone**
- **WebLLM engine**

## Connections

- User → App: uses
- App → Audio section: renders
- App → LaTeX output: renders
- App → Model selection: renders
- App → Model loading status: renders
- Audio section → Audio manager: renders
- Audio manager → Audio recorder: renders
- Audio recorder → Browser microphone: captures audio
- Audio recorder → Audio manager: returns recording
- Audio manager → Transcriber hook: starts transcription
- Transcriber hook → Worker hook: creates worker
- Worker hook → Whisper worker: starts
- Transcriber hook → Whisper worker: posts audio
- Whisper worker → Transcriber hook: posts transcript
- Audio manager → Conversation hook: sends transcript
- App → Conversation hook: provides engine
- Conversation hook → WebLLM engine: requests completion
- App → LLM engine hook: loads selected model
- LLM engine hook → Model catalog: looks up model
- LLM engine hook → WebLLM engine: creates engine
- LaTeX output → MathJax renderer: renders expression
- Model selection → App: updates selection
- Model loading status → App: shows status