How thomas-mckanna/speech-to-latex works
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: App.tsx App · AudioManager.tsx Audio manager · useTranscriber.ts Transcriber hook · AudioRecorder.tsx Audio recorder
Components 17
Application UI
- App
src/App.tsx - Audio section
src/components/AudioSection.tsx - LaTeX output
src/components/LatexOutput.tsx - MathJax renderer
src/components/LatexRenderer.tsx
Audio transcription
- Audio recorder
src/components/AudioRecorder.tsx - Audio manager
src/components/AudioManager.tsx - Transcriber hook
src/hooks/useTranscriber.ts - Worker hook
src/hooks/useWorker.ts - Whisper worker
src/whisper-worker.js
LaTeX generation
- Conversation hook
src/hooks/useConversation.ts - LLM engine hook
src/hooks/useLLMEngine.ts
Model controls
- Model selection
src/components/ModelSelectionPanel.tsx - Model loading status
src/components/ModelLoader.tsx - Model catalog
src/utils/Constants.ts
Other components
- User
- Browser microphone
- WebLLM engine
Connections 23
- 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