# nicholaschen09/font-llm architecture

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

- Interactive diagram: https://gitdiagram.com/nicholaschen09/font-llm
- Repository: https://github.com/nicholaschen09/font-llm

## Overview

font-LLM is a prototype web app that accepts an image of typography and returns ranked font matches with visual evidence, alternatives, and next steps. The main workflow runs from image selection and preview in the browser, through a validated API upload and Gemini vision analysis, back to a rendered results view. The API also supports configurable model fallback. The README describes future OCR and glyph matching as possible growth, not current implemented components; the graph reflects the sampled runtime code.

Main entry points: [`app/api/analyze-font/route.ts`](https://github.com/nicholaschen09/font-llm/blob/main/app/api/analyze-font/route.ts) (Analysis endpoint), [`app/page.tsx`](https://github.com/nicholaschen09/font-llm/blob/main/app/page.tsx) (Image upload)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web interface"]
  node_image_ui["Image upload<br/>[page.tsx]"]
  node_results_ui["Results view<br/>[page.tsx]"]
end

subgraph group_analysis["Analysis API"]
  node_api["Analysis endpoint<br/>[route.ts]"]
  node_validation["Image validation<br/>[route.ts]"]
  node_model_fallback["Model fallback<br/>[route.ts]"]
end

node_designer(("Designer"))
node_gemini{{"Gemini vision API"}}

node_designer -->|"selects image"| node_image_ui
node_image_ui -->|"POST image"| node_api
node_api -->|"validates upload"| node_validation
node_api -->|"runs analysis"| node_model_fallback
node_model_fallback -->|"tries models"| node_gemini
node_gemini -->|"returns analysis"| node_model_fallback
node_api -->|"returns response"| node_results_ui
node_results_ui -->|"shows matches"| node_designer

click node_image_ui "https://github.com/nicholaschen09/font-llm/blob/main/app/page.tsx"
click node_results_ui "https://github.com/nicholaschen09/font-llm/blob/main/app/page.tsx"
click node_api "https://github.com/nicholaschen09/font-llm/blob/main/app/api/analyze-font/route.ts"
click node_validation "https://github.com/nicholaschen09/font-llm/blob/main/app/api/analyze-font/route.ts"
click node_model_fallback "https://github.com/nicholaschen09/font-llm/blob/main/app/api/analyze-font/route.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_image_ui,node_results_ui toneBlue
class node_api,node_validation,node_model_fallback toneAmber
class node_designer toneIndigo
class node_gemini toneMint
```

## Components

### Web interface

- [Image upload](https://github.com/nicholaschen09/font-llm/blob/main/app/page.tsx): `app/page.tsx`
- [Results view](https://github.com/nicholaschen09/font-llm/blob/main/app/page.tsx): `app/page.tsx`

### Analysis API

- [Analysis endpoint](https://github.com/nicholaschen09/font-llm/blob/main/app/api/analyze-font/route.ts): `app/api/analyze-font/route.ts`
- [Image validation](https://github.com/nicholaschen09/font-llm/blob/main/app/api/analyze-font/route.ts): `app/api/analyze-font/route.ts`
- [Model fallback](https://github.com/nicholaschen09/font-llm/blob/main/app/api/analyze-font/route.ts): `app/api/analyze-font/route.ts`

### Other components

- **Designer**
- **Gemini vision API**

## Connections

- Designer → Image upload: selects image
- Image upload → Analysis endpoint: POST image
- Analysis endpoint → Image validation: validates upload
- Analysis endpoint → Model fallback: runs analysis
- Model fallback → Gemini vision API: tries models
- Gemini vision API → Model fallback: returns analysis
- Analysis endpoint → Results view: returns response
- Results view → Designer: shows matches