AI-powered architectural visualization SaaS built with React, TypeScript, and Puter. Transform 2D floor plans into photorealistic 3D renders with permanent hosting and persistent metadata.
TerraForma is an AI-powered architectural visualization application that transforms 2D floor plans into stunning 3D renders. Built with modern web technologies and powered by AI models from Claude to Gemini, this application provides a seamless experience for architects, designers, and visualization enthusiasts.
- 2D-to-3D Transformation: Instant architectural rendering using state-of-the-art AI
- Persistent Storage: Permanent file hosting with public URL generation
- Project Management: Dynamic gallery with metadata persistence
- Community Features: Global feed for sharing and discovering projects
- Privacy Controls: Granular public/private toggles for project visibility
- Instant Visualization: Upload floor plans and get photorealistic 3D renders in seconds
- Project Library: Organized workspace to track all your visualizations
- Side-by-Side Comparison: Interactive tools to compare source and rendered images
- Easy Sharing: Download renders or share them with a single click
- Privacy Management: Control who can see your projects
- Modern Tech Stack: React, TypeScript, TailwindCSS, and Vite
- Cloud Integration: Puter platform for serverless workers and storage
- Type Safety: Full TypeScript support for reliable development
- Component Architecture: Reusable components with clear separation of concerns
- Git
- Node.js (version 16 or higher)
- npm (version 8 or higher)
-
Clone the repository:
git clone https://github.com/den319/terraforma cd terraforma -
Install dependencies:
npm install
-
Set up environment variables:
Create a
.envfile in the project root:VITE_PUTER_WORKER_URL=""
Replace the placeholder with your Puter worker URL. Get credentials at Puter.com.
-
Start the development server:
npm run dev
-
Open your browser: Navigate to
http://localhost:3000
- Sign Up: Create an account to access all features
- Upload Plans: Drag and drop your 2D floor plan images
- View Results: See your 2D plans transform into 3D renders
- Manage Projects: Organize, share, and download your visualizations
terraforma/
├── app/ # Main application code
│ ├── app.css # Global styles
│ ├── root.tsx # Root component
│ └── routes/ # Page routes
├── components/ # Reusable components
│ ├── Navbar.tsx # Navigation component
│ ├── Upload.tsx # File upload component
│ └── ui/ # UI component library
├── lib/ # Utility functions and services
│ ├── ai.action.ts # AI integration logic
│ ├── puter.action.ts # Puter API interactions
│ ├── utils.ts # Helper functions
│ └── constants.ts # Application constants
└── public/ # Static assets
- Upload Component: Handles file uploads and AI processing
- Visualizer: Displays 3D renders with comparison tools
- Navbar: Navigation and user management
- AI Actions: Integration with Claude and Gemini APIs
| Variable | Description | Required |
|---|---|---|
VITE_PUTER_WORKER_URL |
Puter worker URL for cloud functions | Yes |
TerraForma supports multiple AI models for image generation:
- Claude: Anthropic's advanced language model
- Gemini: Google's state-of-the-art AI model
- Puter Storage: Permanent file hosting with public URLs
- KV Storage: Key-value database for metadata persistence
- Worker Functions: Serverless functions for AI processing
- Fork the repository
- Create a feature branch:
git checkout -b feature-name - Make your changes
- Run tests:
npm test - Commit your changes:
git commit -m 'Add feature' - Push to the branch:
git push origin feature-name - Submit a pull request
- Use TypeScript for type safety
- Follow React best practices
- Use TailwindCSS for styling
- Write clear, descriptive commit messages
This project is licensed under the MIT License - see the LICENSE file for details.