FitRoom AI

FitRoom AI is a minimal Chrome extension + local backend + web dashboard that lets you:

• Upload a face photo once on a dashboard
• Right-click a model image on any shopping site
• Generate an edited image via Gemini image editing (Nano Banana image models)
• Replace the clicked image in-page
• Browse all your past try-ons in a clean dashboard

Structure

• banana-backend: Node/Express backend that calls Gemini image editing.
• banana-extension: Chrome extension (Manifest V3).

Prereqs

• Node.js 20+
• A Gemini API key from Google AI Studio

Getting a Gemini API key

1. Go to https://aistudio.google.com/apikey.
2. Sign in with your Google account.
3. Click Create API key (or reuse an existing one) for the Gemini API.
4. Copy the key – it will look like AIza....
5. Note: for image models like gemini-3.1-flash-image-preview you may need to:
   • Attach a billing account to the project, and
   • Ensure you have quota for that model (free tier for images is often 0).

1) Configure environment

In banana-backend, create a .env file (this file is gitignored) with:

GEMINI_API_KEY=YOUR_REAL_KEY_HERE
GEMINI_IMAGE_MODEL=gemini-3.1-flash-image-preview
PORT=8787

You can swap GEMINI_IMAGE_MODEL for another image-capable model from your /v1beta/models list (e.g. gemini-2.5-flash-image), as long as it supports generateContent with image outputs.

2) Run the backend

cd "/Users/kids/Documents/Projects/AI Try On/banana-backend"
npm install

# load .env into your shell (zsh/bash)
set -a
source .env
set +a

npm run dev

Backend health check: http://localhost:8787/health

3) Load the extension in Chrome

1. Open chrome://extensions
2. Enable Developer mode
3. Click Load unpacked
4. Select this folder:
   • /Users/kids/Documents/Projects/AI Try On/banana-extension

4) Configure face image + backend URL (Dashboard)

The backend hosts a small dashboard that owns all settings and history.

1. With the backend running, open: http://localhost:8787/dashboard
2. In the Settings card on the left:
   • Backend URL: usually http://localhost:8787
   • Face image: upload a clear headshot (frontal, good lighting)
3. Click Save settings
4. The current backend URL and current face image are shown so you can always tell what’s in use.

5) Try it on a shopping page

1. Go to a product page with a model wearing clothing
2. Right-click on the model image
3. Click Try on with my face (Banana 2)

If the page has multiple similar images, the extension will try to replace the best matching <img> element.

6) Dashboard features

• Filters: filter history by store (hostname) or by part of the product URL.
• Settings:
  • Change backend URL used by the extension.
  • Change the face image (preview shows the image currently in use).
• History grid:
  • Shows all past try-ons with:
    • Generated image
    • Store
    • Product URL
    • Timestamp
  • Each card has an Open product button that re-opens the original product page.

Notes / current limitations

• This is an MVP. It works best on standard <img> elements, not CSS background-image galleries.
• Some sites block direct image downloads (“hotlink” restrictions). In those cases, the backend may fail to fetch the target image URL.
• Gemini image models require sufficient quota; if you see RESOURCE_EXHAUSTED errors, check your usage and billing for the selected model.# FitRoom-AI