# rudraprasad69/ai-text-to-image-platform architecture

> Architecture diagram of the GitHub repository rudraprasad69/ai-text-to-image-platform, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-24). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/rudraprasad69/ai-text-to-image-platform
- Repository: https://github.com/rudraprasad69/ai-text-to-image-platform

## Overview

1. **Overall shape**
   PixelForge AI is a **single-page Next.js App Router application** with a strong marketing/interactive dashboard feel. The `app/page.tsx` entry composes the full experience from reusable sections rather than navigating across many routes.

2. **Presentation layer**
   Most of the UI lives in `components/`, with section-style components such as `hero`, `features`, `models`, `pricing`, `gallery`, `testimonials`, `prompt-demo`, `chatbot`, `navbar`, and `footer`. This suggests the page is built as a vertically stacked landing experience where each section owns its own visuals and local interactions.

3. **Client-side interaction layer**
   `hooks/useImageGeneration.ts` is the main interaction hook and likely centralizes prompt submission, loading/error state, and response handling for the generation flow. It is the bridge between user actions in the UI and the backend API routes.

4. **API boundary**
   The app exposes two Next route handlers under `app/api/`: `generate/route.ts` and `models/route.ts`. These form the server-side boundary for image generation requests and model discovery/comparison data, keeping the UI decoupled from the underlying AI/provider integration.

5. **Backend integration abstraction**
   `lib/api-config.ts` likely holds shared configuration for endpoints, model metadata, pricing parameters, or provider settings. This is the main place where generation-related constants are centralized so the UI and API routes stay in sync.

6. **Shared utilities and design system**
   `lib/utils.ts` and `components/ui/button.tsx` indicate a small shared foundation for common helpers and reusable primitives. This is the “glue” layer that keeps styling and small formatting logic from leaking into feature components.

7. **Visual and motion subsystem**
   `components/particle-bg.tsx` and `components/scroll-animate.tsx` provide the ambient motion layer. Combined with Framer Motion in the README stack, they support the premium animated feel without being tied to core business logic.

8. **Content and feature modules**
   `gallery.tsx`, `models.tsx`, `pricing.tsx`, `prompt-demo.tsx`, and `chatbot.tsx` represent distinct product capabilities: image gallery browsing, model comparison, pricing simulation, prompt sandboxing, and FAQ assistance. These modules are independent enough to be diagrammed as separate UI subsystems sharing the same app shell.

9. **Static asset flow**
   `public/images/hero` and `public/images/gallery` provide the visual content used by the hero and gallery sections. The app appears to rely on bundled static assets for showcase imagery rather than dynamic media storage.

10. **Styling and app shell**
   `app/layout.tsx`, `app/globals.css`, `tailwind.config.ts`, and `postcss.config.mjs` define the global shell and styling pipeline. This is a Tailwind-first frontend with app-wide layout, theme, and CSS behavior established at the framework level.

11. **Runtime and deployment boundary**
   The stack is explicitly **Next.js + React + TypeScript**, with serverless-style API routes suitable for deployment on Vercel/Netlify. There is no sign of a database, auth system, or background worker; the architecture is primarily a stateless frontend plus thin server endpoints.

12. **How the pieces connect**
   User actions originate in the section components, flow through `useImageGeneration`, and then cross the API boundary into `generate` or `models`. The response is rendered back into the interactive UI, while the rest of the page remains mostly presentational and driven by static content, local state, and animation.

Main entry points: [`app/page.tsx`](https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/app/page.tsx) (Home page), [`components/hero.tsx`](https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/components/hero.tsx) (Hero), [`hooks/useImageGeneration.ts`](https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/hooks/useImageGeneration.ts) (Image hook), [`components/ui/button.tsx`](https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/components/ui/button.tsx) (Button)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_group_app["App shell"]
  node_app_layout["Layout<br/>[layout.tsx]"]
  node_app_page["Home page<br/>App Router page<br/>[page.tsx]"]
  node_app_globals["Global CSS<br/>Stylesheet<br/>[globals.css]"]
end

subgraph group_group_ui["UI sections"]
  node_hero_section["Hero<br/>Section component<br/>[hero.tsx]"]
  node_features_section["Features<br/>Section component<br/>[features.tsx]"]
  node_models_section["Models<br/>Section component<br/>[models.tsx]"]
  node_pricing_section["Pricing<br/>Section component<br/>[pricing.tsx]"]
  node_gallery_section["Gallery<br/>Section component<br/>[gallery.tsx]"]
  node_testimonials_section["Testimonials<br/>Section component<br/>[testimonials.tsx]"]
  node_prompt_demo["Prompt demo<br/>Interactive section<br/>[prompt-demo.tsx]"]
  node_chatbot_section["Chatbot<br/>Interactive widget<br/>[chatbot.tsx]"]
  node_navbar["Navbar<br/>Navigation component<br/>[navbar.tsx]"]
  node_footer["Footer<br/>Layout component<br/>[footer.tsx]"]
end

subgraph group_group_interaction["Interaction layer"]
  node_use_generation["Image hook<br/>Client hook"]
  node_generate_api["Generate API<br/>Route handler<br/>[route.ts]"]
  node_models_api["Models API<br/>Route handler<br/>[route.ts]"]
end

subgraph group_group_shared["Shared foundation"]
  node_api_config["API config<br/>Shared config<br/>[api-config.ts]"]
  node_animations["Animations<br/>Motion helpers<br/>[animations.ts]"]
  node_utils["Utils<br/>Helpers<br/>[utils.ts]"]
  node_button["Button<br/>UI primitive<br/>[button.tsx]"]
  node_particle_bg["Particle bg<br/>Visual effect<br/>[particle-bg.tsx]"]
  node_scroll_animate["Scroll animate<br/>Motion wrapper<br/>[scroll-animate.tsx]"]
  node_hero_assets[("Hero images<br/>Static assets")]
  node_gallery_assets[("Gallery images<br/>Static assets")]
end

node_app_layout -->|"renders"| node_app_page
node_app_layout -->|"loads"| node_app_globals
node_app_page -->|"composes"| node_navbar
node_app_page -->|"composes"| node_hero_section
node_app_page -->|"composes"| node_features_section
node_app_page -->|"composes"| node_models_section
node_app_page -->|"composes"| node_pricing_section
node_app_page -->|"composes"| node_gallery_section
node_app_page -->|"composes"| node_testimonials_section
node_app_page -->|"composes"| node_prompt_demo
node_app_page -->|"composes"| node_chatbot_section
node_app_page -->|"composes"| node_footer
node_hero_section -->|"uses"| node_particle_bg
node_hero_section -->|"uses"| node_scroll_animate
node_gallery_section -->|"uses"| node_gallery_assets
node_hero_section -->|"uses"| node_hero_assets
node_prompt_demo -->|"uses"| node_use_generation
node_chatbot_section -->|"uses"| node_use_generation
node_use_generation -->|"calls"| node_generate_api
node_use_generation -->|"calls"| node_models_api
node_generate_api -->|"reads"| node_api_config
node_models_api -->|"reads"| node_api_config
node_button -->|"uses"| node_utils
node_scroll_animate -->|"uses"| node_animations
node_particle_bg -->|"uses"| node_animations
node_hero_section -->|"uses"| node_button
node_models_section -->|"uses"| node_button
node_pricing_section -->|"uses"| node_button

click node_app_layout "https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/app/layout.tsx"
click node_app_page "https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/app/page.tsx"
click node_app_globals "https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/app/globals.css"
click node_hero_section "https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/components/hero.tsx"
click node_features_section "https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/components/features.tsx"
click node_models_section "https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/components/models.tsx"
click node_pricing_section "https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/components/pricing.tsx"
click node_gallery_section "https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/components/gallery.tsx"
click node_testimonials_section "https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/components/testimonials.tsx"
click node_prompt_demo "https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/components/prompt-demo.tsx"
click node_chatbot_section "https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/components/chatbot.tsx"
click node_navbar "https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/components/navbar.tsx"
click node_footer "https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/components/footer.tsx"
click node_use_generation "https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/hooks/useImageGeneration.ts"
click node_generate_api "https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/app/api/generate/route.ts"
click node_models_api "https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/app/api/models/route.ts"
click node_api_config "https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/lib/api-config.ts"
click node_animations "https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/lib/animations.ts"
click node_utils "https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/lib/utils.ts"
click node_button "https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/components/ui/button.tsx"
click node_particle_bg "https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/components/particle-bg.tsx"
click node_scroll_animate "https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/components/scroll-animate.tsx"
click node_hero_assets "https://github.com/rudraprasad69/ai-text-to-image-platform/tree/main/public/images/hero"
click node_gallery_assets "https://github.com/rudraprasad69/ai-text-to-image-platform/tree/main/public/images/gallery"

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_layout,node_app_page,node_app_globals toneBlue
class node_hero_section,node_features_section,node_models_section,node_pricing_section,node_gallery_section,node_testimonials_section,node_prompt_demo,node_chatbot_section,node_navbar,node_footer toneAmber
class node_use_generation,node_generate_api,node_models_api toneMint
class node_api_config,node_animations,node_utils,node_button,node_particle_bg,node_scroll_animate,node_hero_assets,node_gallery_assets toneRose
```

## Components

### App shell

Next.js App Router entry points and global styling.

- [Layout](https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/app/layout.tsx): Next layout · Root document shell and global app wrapper. · `app/layout.tsx`
- [Home page](https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/app/page.tsx): App Router page · Single-page composition entry for the full experience. · `app/page.tsx`
- [Global CSS](https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/app/globals.css): Stylesheet · App-wide styling and base CSS rules. · `app/globals.css`

### UI sections

Landing-page sections and reusable presentation components.

- [Hero](https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/components/hero.tsx): Section component · Primary above-the-fold marketing and value proposition block. · `components/hero.tsx`
- [Features](https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/components/features.tsx): Section component · Capability overview and product highlights. · `components/features.tsx`
- [Models](https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/components/models.tsx): Section component · Model discovery and comparison surface. · `components/models.tsx`
- [Pricing](https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/components/pricing.tsx): Section component · Plan and cost presentation area. · `components/pricing.tsx`
- [Gallery](https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/components/gallery.tsx): Section component · Showcase of generated or curated images. · `components/gallery.tsx`
- [Testimonials](https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/components/testimonials.tsx): Section component · Social proof and user feedback section. · `components/testimonials.tsx`
- [Prompt demo](https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/components/prompt-demo.tsx): Interactive section · Prompt sandbox or generation preview interaction. · `components/prompt-demo.tsx`
- [Chatbot](https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/components/chatbot.tsx): Interactive widget · Support or guidance assistant embedded in the page. · `components/chatbot.tsx`
- [Navbar](https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/components/navbar.tsx): Navigation component · Top-level navigation and section access. · `components/navbar.tsx`
- [Footer](https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/components/footer.tsx): Layout component · Bottom-page utility links and closing content. · `components/footer.tsx`

### Interaction layer

Client-side generation flow and server API boundary.

- [Image hook](https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/hooks/useImageGeneration.ts): Client hook · Central client-side generation state and request orchestration. · `hooks/useImageGeneration.ts`
- [Generate API](https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/app/api/generate/route.ts): Route handler · Server endpoint for image generation requests. · `app/api/generate/route.ts`
- [Models API](https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/app/api/models/route.ts): Route handler · Server endpoint for model metadata or discovery. · `app/api/models/route.ts`

### Shared foundation

Configuration, utilities, animations, and static assets.

- [API config](https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/lib/api-config.ts): Shared config · Centralized provider, endpoint, and generation settings. · `lib/api-config.ts`
- [Animations](https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/lib/animations.ts): Motion helpers · Reusable animation definitions and effects. · `lib/animations.ts`
- [Utils](https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/lib/utils.ts): Helpers · Common utility functions shared across components. · `lib/utils.ts`
- [Button](https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/components/ui/button.tsx): UI primitive · Reusable styled button primitive. · `components/ui/button.tsx`
- [Particle bg](https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/components/particle-bg.tsx): Visual effect · Ambient animated background layer. · `components/particle-bg.tsx`
- [Scroll animate](https://github.com/rudraprasad69/ai-text-to-image-platform/blob/main/components/scroll-animate.tsx): Motion wrapper · Scroll-triggered reveal and entrance behavior. · `components/scroll-animate.tsx`
- [Hero images](https://github.com/rudraprasad69/ai-text-to-image-platform/tree/main/public/images/hero): Static assets · Static imagery used by the hero showcase. · `public/images/hero`
- [Gallery images](https://github.com/rudraprasad69/ai-text-to-image-platform/tree/main/public/images/gallery): Static assets · Static imagery used by the gallery showcase. · `public/images/gallery`

## Connections

- Layout → Home page: renders · Root layout wraps the single-page experience.
- Layout → Global CSS: loads · Global CSS is applied at the app shell.
- Home page → Navbar: composes · The home page is built from section components.
- Home page → Hero: composes · Hero is the leading page section.
- Home page → Features: composes · Features section is included in the landing flow.
- Home page → Models: composes · Models section is included in the landing flow.
- Home page → Pricing: composes · Pricing section is included in the landing flow.
- Home page → Gallery: composes · Gallery section is included in the landing flow.
- Home page → Testimonials: composes · Testimonials section is included in the landing flow.
- Home page → Prompt demo: composes · Interactive prompt demo is embedded in the page.
- Home page → Chatbot: composes · Chatbot support widget is embedded in the page.
- Home page → Footer: composes · Footer closes the page composition.
- Hero → Particle bg: uses · Hero benefits from ambient background motion.
- Hero → Scroll animate: uses · Hero entrance effects are animation-driven.
- Gallery → Gallery images: uses · Gallery displays bundled showcase images.
- Hero → Hero images: uses · Hero displays bundled imagery.
- Prompt demo → Image hook: uses · Prompt demo delegates generation workflow to the hook.
- Chatbot → Image hook: uses · Interactive assistance can reuse generation state or requests.
- Image hook → Generate API: calls · Client requests cross the API boundary for generation.
- Image hook → Models API: calls · Client can fetch model data from the API boundary.
- Generate API → API config: reads · Generation route uses shared provider settings.
- Models API → API config: reads · Models route uses shared configuration and metadata.
- Button → Utils: uses · UI primitive may share formatting helpers.
- Scroll animate → Animations: uses · Scroll behavior is driven by shared motion helpers.
- Particle bg → Animations: uses · Ambient effects are backed by reusable animation logic.
- Hero → Button: uses · Hero likely relies on the shared button primitive.
- Models → Button: uses · Models section likely uses shared controls.
- Pricing → Button: uses · Pricing section likely uses shared call-to-action controls.