Skip to content

README.md

Latest commit

 

History

History
100 lines (78 loc) · 2.8 KB

README.md

File metadata and controls

100 lines (78 loc) · 2.8 KB

Forge Master Frontend

Production-ready Next.js frontend for AI-powered 3D model generation.

Features

  • Polished UI: Built with Next.js 15, shadcn/ui, and Tailwind CSS
  • 3D Model Viewer: Interactive Three.js viewer with orbit controls
  • Real-time Updates: Loading states and progress indicators
  • Multi-format Downloads: GLB, OBJ, FBX, STL formats
  • Quality Display: Color-coded quality scores and production-ready badges
  • Responsive Design: Works on desktop and mobile
  • Dark Mode Support: Full dark mode theming

Architecture

frontend/
├── app/
│   ├── page.tsx          # Main application page
│   ├── layout.tsx        # Root layout
│   └── globals.css       # Global styles
├── components/
│   ├── ui/               # shadcn/ui components
│   ├── PromptInput.tsx   # Input form with advanced settings
│   ├── ModelViewer.tsx   # 3D model viewer (Three.js)
│   ├── ResultsDisplay.tsx # Results with downloads
│   └── QualityBadge.tsx  # Quality score display
├── lib/
│   ├── api-client.ts     # API client for agent service
│   └── utils.ts          # Utilities
├── Dockerfile            # Production Docker image
└── deploy.sh             # Cloud Run deployment script

Local Development

npm install
npm run dev

Open http://localhost:3000

Deployment

The frontend is deployed to Google Cloud Run:

Production URL: https://forge-master-frontend-525900378413.europe-west1.run.app

Deploy Commands

# Deploy to Cloud Run
./deploy.sh

# Or manually
gcloud run deploy forge-master-frontend \
  --source . \
  --platform managed \
  --region europe-west1 \
  --allow-unauthenticated

Environment Variables

  • NEXT_PUBLIC_AGENT_SERVICE_URL: URL of the agent service backend
  • NEXT_PUBLIC_APP_NAME: Application name (default: "Forge Master")

Technologies

  • Framework: Next.js 15 (App Router)
  • UI Library: shadcn/ui
  • Styling: Tailwind CSS
  • 3D Rendering: React Three Fiber + Drei
  • Icons: Lucide React
  • Deployment: Google Cloud Run

User Flow

  1. User enters a text prompt describing the 3D model they want
  2. Optional: Adjust advanced settings (inference steps, guidance scale)
  3. Click "Generate 3D Model"
  4. AI agents process the request:
    • Prompt enhancement
    • Image generation (Imagen 4)
    • 3D mesh generation (InstantMesh)
    • Quality assessment (Gemini)
  5. Results displayed:
    • Interactive 3D viewer
    • Quality score badge
    • Download buttons for all formats
    • Input image and multi-view renders

Performance

  • Build Time: ~2 minutes
  • Cold Start: ~5 seconds
  • Average Response: 60-120 seconds (depends on generation complexity)
  • Bundle Size: Optimized with Next.js standalone output