# ctate/3d-model-generator architecture

> Architecture diagram of the GitHub repository ctate/3d-model-generator, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/ctate/3d-model-generator
- Repository: https://github.com/ctate/3d-model-generator

## Overview

This is a web app for generating 3D models from prompts and optional reference images using Hyper3D Rodin. Users configure generation options, submit a job, monitor its status, preview the resulting model, and download it. The graph preserves the documented format and advanced-setting capabilities. Source excerpts show the client workflow and API requests; route-to-provider behavior is documented at a high level but not shown in route excerpts.

Main entry points: [`components/rodin.tsx`](https://github.com/ctate/3d-model-generator/blob/main/components/rodin.tsx) (Generation workflow), [`lib/api-service.ts`](https://github.com/ctate/3d-model-generator/blob/main/lib/api-service.ts) (API client), [`components/model-viewer.tsx`](https://github.com/ctate/3d-model-generator/blob/main/components/model-viewer.tsx) (3D model viewer), [`components/form.tsx`](https://github.com/ctate/3d-model-generator/blob/main/components/form.tsx) (Prompt and images)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_experience["Generation experience"]
  node_page["App page<br/>[page.tsx]"]
  node_rodin_ui["Generation workflow<br/>[rodin.tsx]"]
  node_form["Prompt and images<br/>[form.tsx]"]
  node_schema["Input validation<br/>[form-schema.ts]"]
  node_options["Generation options<br/>[options-dialog.tsx]"]
  node_image_upload["Image upload area"]
  node_status["Job status display"]
end

subgraph group_client["Client services"]
  node_api_service["API client<br/>[api-service.ts]"]
end

subgraph group_routes["API routes"]
  node_rodin_route["Submit job route<br/>[route.ts]"]
  node_status_route["Status route<br/>[route.ts]"]
  node_download_route["Download route<br/>[route.ts]"]
  node_proxy_route["Proxy download route<br/>[route.ts]"]
end

subgraph group_render["3D preview"]
  node_viewer["3D model viewer<br/>[model-viewer.tsx]"]
  node_model["Model renderer"]
  node_scene["Scene setup<br/>[scene-setup.tsx]"]
  node_placeholder["Loading placeholder"]
end

node_user(("User"))
node_provider{{"Hyper3D Rodin"}}

node_user -->|"opens"| node_page
node_page -->|"renders"| node_rodin_ui
node_rodin_ui -->|"renders"| node_form
node_rodin_ui -->|"renders"| node_options
node_rodin_ui -->|"renders"| node_status
node_rodin_ui -->|"renders"| node_viewer
node_form -->|"validates with"| node_schema
node_form -->|"renders"| node_image_upload
node_rodin_ui -->|"calls"| node_api_service
node_api_service -->|"submits to"| node_rodin_route
node_api_service -->|"checks"| node_status_route
node_api_service -->|"requests"| node_download_route
node_rodin_route -.->|"submits job"| node_provider
node_status_route -.->|"checks job"| node_provider
node_download_route -.->|"retrieves model"| node_provider
node_rodin_ui -.->|"may proxy download"| node_proxy_route
node_viewer -->|"sets up"| node_scene
node_viewer -->|"renders"| node_model
node_viewer -->|"shows fallback"| node_placeholder

click node_page "https://github.com/ctate/3d-model-generator/blob/main/app/page.tsx"
click node_rodin_ui "https://github.com/ctate/3d-model-generator/blob/main/components/rodin.tsx"
click node_form "https://github.com/ctate/3d-model-generator/blob/main/components/form.tsx"
click node_schema "https://github.com/ctate/3d-model-generator/blob/main/lib/form-schema.ts"
click node_options "https://github.com/ctate/3d-model-generator/blob/main/components/options-dialog.tsx"
click node_image_upload "https://github.com/ctate/3d-model-generator/blob/main/components/image-upload-area.tsx"
click node_status "https://github.com/ctate/3d-model-generator/blob/main/components/status-indicator.tsx"
click node_api_service "https://github.com/ctate/3d-model-generator/blob/main/lib/api-service.ts"
click node_rodin_route "https://github.com/ctate/3d-model-generator/blob/main/app/api/rodin/route.ts"
click node_status_route "https://github.com/ctate/3d-model-generator/blob/main/app/api/status/route.ts"
click node_download_route "https://github.com/ctate/3d-model-generator/blob/main/app/api/download/route.ts"
click node_proxy_route "https://github.com/ctate/3d-model-generator/blob/main/app/api/proxy-download/route.ts"
click node_viewer "https://github.com/ctate/3d-model-generator/blob/main/components/model-viewer.tsx"
click node_model "https://github.com/ctate/3d-model-generator/blob/main/components/model-component.tsx"
click node_scene "https://github.com/ctate/3d-model-generator/blob/main/components/scene-setup.tsx"
click node_placeholder "https://github.com/ctate/3d-model-generator/blob/main/components/loading-placeholder.tsx"

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_page,node_rodin_ui,node_form,node_schema,node_options,node_image_upload,node_status,node_user toneBlue
class node_api_service toneAmber
class node_rodin_route,node_status_route,node_download_route,node_proxy_route toneMint
class node_viewer,node_model,node_scene,node_placeholder toneRose
class node_provider toneIndigo
```

## Components

### Generation experience

- [App page](https://github.com/ctate/3d-model-generator/blob/main/app/page.tsx): `app/page.tsx`
- [Generation workflow](https://github.com/ctate/3d-model-generator/blob/main/components/rodin.tsx): `components/rodin.tsx`
- [Prompt and images](https://github.com/ctate/3d-model-generator/blob/main/components/form.tsx): `components/form.tsx`
- [Input validation](https://github.com/ctate/3d-model-generator/blob/main/lib/form-schema.ts): `lib/form-schema.ts`
- [Generation options](https://github.com/ctate/3d-model-generator/blob/main/components/options-dialog.tsx): `components/options-dialog.tsx`
- [Image upload area](https://github.com/ctate/3d-model-generator/blob/main/components/image-upload-area.tsx): `components/image-upload-area.tsx`
- [Job status display](https://github.com/ctate/3d-model-generator/blob/main/components/status-indicator.tsx): `components/status-indicator.tsx`

### Client services

- [API client](https://github.com/ctate/3d-model-generator/blob/main/lib/api-service.ts): `lib/api-service.ts`

### API routes

- [Submit job route](https://github.com/ctate/3d-model-generator/blob/main/app/api/rodin/route.ts): `app/api/rodin/route.ts`
- [Status route](https://github.com/ctate/3d-model-generator/blob/main/app/api/status/route.ts): `app/api/status/route.ts`
- [Download route](https://github.com/ctate/3d-model-generator/blob/main/app/api/download/route.ts): `app/api/download/route.ts`
- [Proxy download route](https://github.com/ctate/3d-model-generator/blob/main/app/api/proxy-download/route.ts): `app/api/proxy-download/route.ts`

### 3D preview

- [3D model viewer](https://github.com/ctate/3d-model-generator/blob/main/components/model-viewer.tsx): `components/model-viewer.tsx`
- [Model renderer](https://github.com/ctate/3d-model-generator/blob/main/components/model-component.tsx): `components/model-component.tsx`
- [Scene setup](https://github.com/ctate/3d-model-generator/blob/main/components/scene-setup.tsx): `components/scene-setup.tsx`
- [Loading placeholder](https://github.com/ctate/3d-model-generator/blob/main/components/loading-placeholder.tsx): `components/loading-placeholder.tsx`

### Other components

- **User**
- **Hyper3D Rodin**

## Connections

- User → App page: opens (evidence: `README.md`)
- App page → Generation workflow: renders (evidence: `app/page.tsx`)
- Generation workflow → Prompt and images: renders (evidence: `components/rodin.tsx`)
- Generation workflow → Generation options: renders (evidence: `components/rodin.tsx`)
- Generation workflow → Job status display: renders (evidence: `components/rodin.tsx`)
- Generation workflow → 3D model viewer: renders (evidence: `components/rodin.tsx`)
- Prompt and images → Input validation: validates with (evidence: `components/form.tsx`)
- Prompt and images → Image upload area: renders (evidence: `components/form.tsx`)
- Generation workflow → API client: calls (evidence: `components/rodin.tsx`)
- API client → Submit job route: submits to (evidence: `lib/api-service.ts`)
- API client → Status route: checks (evidence: `lib/api-service.ts`)
- API client → Download route: requests (evidence: `lib/api-service.ts`)
- Submit job route → Hyper3D Rodin: submits job (evidence: `README.md`)
- Status route → Hyper3D Rodin: checks job (evidence: `README.md`)
- Download route → Hyper3D Rodin: retrieves model (evidence: `README.md`)
- Generation workflow → Proxy download route: may proxy download
- 3D model viewer → Scene setup: sets up (evidence: `components/model-viewer.tsx`)
- 3D model viewer → Model renderer: renders (evidence: `components/model-viewer.tsx`)
- 3D model viewer → Loading placeholder: shows fallback (evidence: `components/model-viewer.tsx`)