Room Redesign AI

A powerful web application that generates photorealistic visualizations of redesigned rooms based on user-provided images, powered by LaozHang's chat-40-image-vip API.

Features

• Photo Upload: Easily upload room photos for redesign
• Customizable Design Preferences: Set room type, design style, color palette, intensity level and more
• AI-powered Image Generation: Photorealistic redesigns using LaozHang's chat-40-image-vip API
• Product Recommendations: Get matching product suggestions for your redesigned space
• Before & After Comparison: Interactive slider to compare original and redesigned spaces
• User Authentication: Secure account creation and login
• Design History: Save and access your previous redesigns
• Responsive Design: Works on mobile, tablet, and desktop devices

Technology Stack

• Frontend: HTML, CSS, JavaScript (Vanilla)
• Backend: Node.js, Express
• Database: MongoDB
• Authentication: JWT (JSON Web Tokens)
• Image Processing: Cloudinary
• AI Image Generation: LaozHang's chat-40-image-vip API

Getting Started

Quick Setup

We've created a setup script that will automatically configure your environment:

# Make the script executable
chmod +x start-app.sh

# Run the setup script
./start-app.sh

This script will:

1. Generate a proper .env file with necessary configuration
2. Install all dependencies
3. Test the MongoDB connection
4. Create necessary directories
5. Start the application

Manual Setup

If you prefer to set up manually, follow these steps:

1. Create a .env file in the project root:

PORT=3001
MONGODB_URI=mongodb+srv://spacesaibiz:YALAboys@cluster0.zcs04j3.mongodb.net/room-redesign?retryWrites=true&w=majority&appName=Cluster0
JWT_SECRET=your_jwt_secret_here
NODE_ENV=development
LAOZANG_API_KEY=sk-JDMYnZIoNuIHnw560b1a618f3a1c4d2eA7778577012dAeF8

2. Install dependencies:

npm install

3. Start the application:

npm run dev

Troubleshooting

MongoDB Connection Issues

If you encounter MongoDB connection issues:

1. MongoDB Atlas IP Whitelist Error:

   MongoDB connection error: MongooseServerSelectionError: Could not connect to any servers in your MongoDB Atlas cluster...
   

   This error occurs because your IP address isn't in the MongoDB Atlas whitelist. To fix it:

   • Log in to MongoDB Atlas
   • Select your cluster (Cluster0)
   • Click on "Network Access" in the left sidebar
   • Click "Add IP Address" button
   • Choose "Add Current IP Address" or add 0.0.0.0/0 to allow access from anywhere (less secure)
   • Click "Confirm"

2. Using Local MongoDB Instead: If you prefer to use a local MongoDB instance:

   First, install MongoDB Community Edition:

   • macOS:

     brew tap mongodb/brew
     brew install mongodb-community

   • Windows: Download and install from MongoDB Download Center
   • Linux (Ubuntu):

     wget -qO - https://www.mongodb.org/static/pgp/server-6.0.asc | sudo apt-key add -
     echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu $(lsb_release -cs)/mongodb-org/6.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-6.0.list
     sudo apt-get update
     sudo apt-get install -y mongodb-org

   Start the MongoDB service:

   • macOS: brew services start mongodb-community
   • Windows: MongoDB should run as a service automatically
   • Linux (Ubuntu): sudo systemctl start mongod

   Then update your .env file to use the local MongoDB instance:

   MONGODB_URI=mongodb://localhost:27017/room-redesign
   

3. Other MongoDB Issues:

   • Make sure your .env file contains the correct MongoDB URI
   • Run node test-mongodb.js to test the connection
   • Check that MongoDB is running if using a local instance

Generating Example Content

To generate example before/after images for the landing page:

node src/scripts/generateExamples.js

Note: You'll need to place some original room images in the source_images directory first.

Usage

1. Create an Account: Sign up with your email and password
2. Upload a Room Image: Select or drag and drop an image of your room
3. Set Design Preferences: Choose room type, style, intensity level and more
4. Generate Redesign: Click the generate button and wait for the AI to work its magic
5. View Results: See your before and after comparison
6. Browse Product Recommendations: Explore product matches for your new design
7. Save and Share: Download your redesign or share it with others

Architecture

The application follows a modular architecture:

• Controllers: Handle API routes and business logic
• Models: Define database schemas and validation
• Services: Contain reusable business logic and external API interactions
• Middlewares: Handle authentication, error handling, and request processing
• Utils: Provide helper functions and utilities

API Endpoints

Authentication

• POST /api/users/register - Register a new user
• POST /api/users/login - Login user and get access token

Redesign

• POST /api/redesign/upload - Upload a room image
• POST /api/redesign/generate - Generate room redesign
• GET /api/redesign/history - Get user's redesign history
• GET /api/redesign/:id - Get a specific redesign
• DELETE /api/redesign/:id - Delete a redesign

Trends

• GET /api/trends/ - Get current design trends
• GET /api/trends/:category - Get trends by category

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• LaozHang API for providing the AI image generation capabilities
• Cloudinary for image storage and processing
• All open-source libraries used in this project