Design Assistant

A web application that provides design feedback on uploaded images using a fine-tuned VLM model. This project includes both a backend (FastAPI) for processing images and generating feedback and a frontend (React) for the user interface.

Table of Contents

• Features
• Technologies Used
• Requirements
• Setup and Installation
• Running Locally
• Deployment
• Usage

Features

• Upload images and receive constructive design feedback.
• Option to add a custom prompt for specific feedback.
• Responsive frontend built with React and TypeScript.
• Machine learning model deployed via FastAPI backend.

Technologies Used

• Backend: FastAPI, Python, Uvicorn
• Frontend: React, TypeScript
• Machine Learning: Hugging Face Transformers, custom fine-tuned model
• Deployment: Render

Requirements

• Python 3.9
• Node.js >= 14
• Conda (optional but recommended for managing Python environments)

Setup and Installation

Clone the Repository

git clone https://github.com/your-username/design-assistant.git
cd design-assistant

Backend Setup

1. Create a virtual environment (recommended with Conda):

conda create -n design-assistant-backend python=3.9
conda activate design-assistant-backend

2. Install backend dependencies:

pip install -r backend/requirements.txt

3. Model Download: The model is automatically downloaded when the backend first runs. Note: The model processing may take some time to generate feedback, depending on its size and the available system resources.

Frontend Setup

1. Navigate to the frontend directory:

cd frontend

2. Install frontend dependencies:

npm install

Running Locally

Start the Backend

In the design-assistant root directory, activate the virtual environment if using Conda, and start the FastAPI server:

uvicorn backend.main:app --host 0.0.0.0 --port 8000 --reload

Start the Frontend

Open a new terminal, navigate to the frontend directory, and start the React development server:

cd frontend
npm start

Deployment

To deploy this project on Render using render.yaml:

1. Push all changes to your GitHub repository.
2. Create a new Blueprint on Render:
   • Go to the Render Dashboard.
   • Select New > Blueprint (YAML) and connect your repository.
3. Configure the services according to the render.yaml file.
4. Set up any necessary environment variables for each service.

Note: The backend deployment requires more memory than the free plan provides so you will ne to upgrade.

After deployment, Render will provide URLs for both the frontend and backend services.

Usage

1. Open the frontend in your browser (e.g., http://localhost:3000 or Render-provided URL).
2. Upload an image (JPG/PNG) and enter an optional prompt.
3. Submit the form to receive design feedback generated by the model.
4. Check the results displayed on the page.

Note: The model may take some time to process each image and generate feedback due to its complexity and the resources available.