RoomScape 🛋️

RoomScape (also styled as RoomScapR) is an open-source, AI-powered virtual room staging web application. It helps real estate professionals, interior designers, and homeowners transform empty, unfurnished spaces into beautifully styled rooms in minutes.

By uploading photos of empty rooms and providing styling preferences (or reference images), RoomScape automatically analyzes design styles and stages the space with realistic furniture.

• Virtual Room Staging Wizard: A seamless three-step wizard guiding users from room photo upload to custom styling instruction input, through to final result generation.
• Reference Image Styling Analysis: Users can upload a reference image representing their desired aesthetic. The application calls an AI-powered analyzer to extract styling details (color palettes, furniture types, layout principles, and materials) and generate precise instructions.
• Detailed Custom Controls: Specify text prompts to direct the layout, design themes (minimalist, modern, industrial, rustic, etc.), and lighting properties.
• Staging Projects History: Save, manage, and browse past virtual staging projects. Review original and staged image comparisons.
• Predefined Furniture Library: Manage catalogs of styling items and furniture types to inject directly into the staging pipeline.
• Modern User Interface: A responsive, accessible dashboard styled with Vanilla CSS, Tailwind CSS, and Radix UI components (shadcn-ui), complete with light/dark theme support.

• Framework: React 18 with TypeScript and Vite
• Styling: Tailwind CSS & Vanilla CSS (with custom theme support)
• UI Components: shadcn-ui (built on top of Radix UI primitives)
• State & Data Fetching: TanStack Query (React Query) & React Context API
• Routing: React Router DOM v6
• Icons: Lucide React

• Database: PostgreSQL (provided by Supabase)
• Authentication: Supabase Auth (User sign-up, sign-in, password reset)
• File Storage: Supabase Storage for uploading original room images and storing staged results
• Edge Functions: Deno-based Edge Functions executing serverless logic:
  • gemini-analyzer: Analyzes reference images using Google Gemini to extract styling guidelines.
  • generate-staged-room: Coordinates staging operations with Stability AI.

• Google Gemini API: Utilized for visual reasoning to analyze room dimensions, reference styling patterns, and output structured layout instructions.
• Stability AI API: Leveraged to run state-of-the-art image-to-image translation, controlnet, or inpainting algorithms to render furniture into the empty room image coordinates.

Make sure you have the following installed on your machine:

• Node.js (v18.x or later)
• npm (or Bun / Yarn)
• Supabase CLI (for local backend development or deploying Edge Functions)

1. Clone the repository:

   git clone https://github.com/your-username/room-scape.git
   cd room-scape

2. Install dependencies:

   npm install

3. Configure environment variables: Create a .env file in the root directory and add your Supabase credentials:

   VITE_SUPABASE_URL=https://your-supabase-project-url.supabase.co
   VITE_SUPABASE_ANON_KEY=your-supabase-anon-key

4. Start the development server:

   npm run dev

   Open your browser and navigate to http://localhost:8080.

RoomScape relies on Supabase Edge Functions to safely interact with Google Gemini and Stability AI without exposing API keys on the client-side.

1. Log in to Supabase CLI:

   supabase login

2. Link the CLI to your project: Get your project reference ID from your Supabase Dashboard settings and run:

   supabase link --project-ref your-project-ref-id

3. Set Secrets for Edge Functions: Before deploying, set up the required API keys as secrets within your Supabase project:

   supabase secrets set GEMINI_API_KEY="your-gemini-api-key"
   supabase secrets set STABILITY_API_KEY="your-stability-api-key"

4. Deploy Edge Functions: Deploy the functions defined under the supabase/functions/ folder:

   supabase functions deploy gemini-analyzer
   supabase functions deploy generate-staged-room

5. Local Edge Function Development (Optional): If you want to run Edge Functions locally, set up a local .env file inside supabase/functions/ or use --env-file:

   supabase functions serve --env-file supabase/.env.local

├── public/                 # Static assets
├── supabase/
│   ├── config.toml        # Supabase project configuration
│   └── functions/          # Deno Edge Functions
│       ├── gemini-analyzer/       # Analyzes reference images using Gemini
│       └── generate-staged-room/  # Performs virtual staging via Stability AI
├── src/
│   ├── components/         # Reusable React components (Header, Footer, UI primitives)
│   │   ├── staging-wizard/ # Multistep staging wizard (Upload, Instruct, View)
│   │   └── ui/             # shadcn-ui customized primitives
│   ├── context/            # AuthContext and StagingContext for global state
│   ├── hooks/              # Custom React hooks (e.g., useStagingProcessor)
│   ├── integrations/       # Supabase client setup and DB types
│   ├── pages/              # View pages (Index/Home, Auth, Profile, ProjectDetail)
│   ├── services/           # Api service wrappers (stagingService, furnitureService)
│   ├── types/              # TypeScript interface definitions
│   └── utils/              # Helper utilities
├── tailwind.config.ts      # Tailwind styling configuration
└── vite.config.ts          # Vite build parameters

We welcome contributions! To contribute:

1. Fork the project.
2. Create your feature branch (git checkout -b feature/AmazingFeature).
3. Commit your changes (git commit -m 'Add some AmazingFeature').
4. Push to the branch (git push origin feature/AmazingFeature).
5. Open a Pull Request.

Distributed under the MIT License. See LICENSE for more details.