ongzn/MDS11_BiasLens

JavaScript

1

4 commits

updated Jun 6, 2025

See the code

README

MDS11_BiasLens

This repository contains the full source code for MDS11 BiasLens, a final-year project designed to explore and analyze demographic bias (gender, age, race) in AI-generated images. The system is built using a combination of React (frontend), Express.js (API), and FastAPI (model serving), and it integrates with Firebase Storage to manage and serve image data.


🎯 Project Objective

The goal of this assignment is to evaluate whether modern image generation models (e.g., InstructPix2Pix, Kandinsky, MagicBrush) demonstrate demographic bias when transforming human portraits into images representing various occupations. This is done by:

  • Generating original images from a balanced dataset (FairFace).
  • Applying prompt-based image transformations (e.g., "A photo of a nurse").
  • Analyzing patterns of bias using an automated analysis module.

πŸ—‚οΈ Project Structure

MDS11_BiasLens/
β”‚
β”œβ”€β”€ frontend/           # React frontend for selecting filters, generating images, and viewing bias results
β”œβ”€β”€ mainEndpoint/       # Node.js Express API that connects frontend to model & bias analysis backend
β”œβ”€β”€ editingModel/       # FastAPI model server using Hugging Face pipelines (Pix2Pix, Img2Img, MagicBrush)
β”œβ”€β”€ biasAnalyse/        # (Optional) Bias analysis service (can be run locally or via Render)
β”‚
β”œβ”€β”€ firebase_key.json   # Firebase service account config (DO NOT commit this publicly)
β”œβ”€β”€ env.js              # Configuration for endpoints and environment variables
β”œβ”€β”€ run_all.sh          # βœ… Main script to install dependencies and start all services
└── README.md

πŸš€ Quick Start

1. Prerequisites

  • Python β‰₯ 3.9
  • Node.js β‰₯ 18
  • Conda or virtualenv (recommended)
  • Firebase Service Account JSON (place in /config/firebase_key.json)
  • Hugging Face Token (free from https://huggingface.co/settings/tokens)

πŸ” Firebase Note:
You can set up your own Firebase project and create a service account to generate your own firebase_key.json.
Refer to: Firebase Admin Setup Docs

  1. Go to Firebase Console β†’ Project Settings β†’ Service Accounts
  2. Click "Generate new private key" and save the JSON file.
  3. Place it in ./config/firebase_key.json. πŸ–ΌοΈ Setting Up Image Database on Firebase Storage

To run the system with the correct image pipeline, you must organize your original images in Firebase Cloud Storage using the following structure:

πŸ”§ Step-by-Step Guide

  1. Go to Firebase Console Open your project and navigate to Build β†’ Storage.
  2. Enable Cloud Storage if not already enabled.
  3. Inside your Storage, create a folder called: originals/
  4. Inside the originals/ folder, create 18 subfolders based on combinations of gender, age, and race:
        originals/
        β”œβ”€β”€ Female_20-29_Black/
        β”œβ”€β”€ Female_20-29_White/
        β”œβ”€β”€ Female_20-29_EastAsian/
        β”œβ”€β”€ Female_40-49_Black/
        β”œβ”€β”€ Female_40-49_White/
        β”œβ”€β”€ Female_40-49_EastAsian/
        β”œβ”€β”€ Female_60-69_Black/
        β”œβ”€β”€ Female_60-69_White/
        β”œβ”€β”€ Female_60-69_EastAsian/
        β”œβ”€β”€ Male_20-29_Black/
        β”œβ”€β”€ Male_20-29_White/
        β”œβ”€β”€ Male_20-29_EastAsian/
        β”œβ”€β”€ Male_40-49_Black/
        β”œβ”€β”€ Male_40-49_White/
        β”œβ”€β”€ Male_40-49_EastAsian/
        β”œβ”€β”€ Male_60-69_Black/
        β”œβ”€β”€ Male_60-69_White/
        β”œβ”€β”€ Male_60-69_EastAsian/
  1. Upload image files (.jpg or .png) inside each folder. Recommended size: ~600x600px. πŸ” Make sure: β€’ Images are publicly readable (or use signed URL logic like the project does). β€’ The folder naming matches exactly what the system expects. β€’ Each folder contains enough images (β‰₯10 recommended).

🧠 Hugging Face Token: This project uses Hugging Face models (e.g., Pix2Pix, Kandinsky, MagicBrush). To use them, sign up at huggingface.co and get your personal access token. Replace the hardcoded HF_TOKEN in editingModel/main.py with your own token.

  1. Go to your Hugging Face account β†’ Settings β†’ Access Tokens.
  2. Create a new token (choose β€œread” access).
  3. Replace the value in main.py like this: HF_TOKEN = "your_actual_token_here"

πŸ“„ biasAnalyse/.env

FACEPP_KEY="KM1VUqsN1lQGmtfPLxnsXWfYvQPcteQr"
FACEPP_SECRET="tt010dmrqvZBFDQUINyBq8hKMiBuDZ98"
BASE_TMP=/tmp

🧠 Usage:

  • Create .env inside the biasAnalyse/ folder.
  • Replace the API keys with your own credentials if needed.
  • Make sure the BASE_TMP path exists and is writable by the app.
  • These variables are read at runtime by the bias analysis backend.

πŸ” Security Tip:
Never commit your .env files with real credentials to a public repository. Use .gitignore to exclude them.


2. Running All Services

Use the provided script to start everything in development mode:

bash run_all.sh

This will:

  • Install Python and Node.js dependencies
  • Start the FastAPI server (model pipelines)
  • Start the Express backend (API and Firebase handling)
  • Launch the React frontend on an available port (usually http://localhost:5173 or similar)

3. Usage

  • Visit the frontend URL (printed in terminal) to interact with the UI.
  • Select demographic filters (e.g., gender, age, race) and generate original images.
  • Choose occupations and apply transformations using different models.
  • Click Analyze Bias to view summary results by demographic category.

4. Switching Between Development and Production

You can change the running mode by editing the environment variable in .env.development or .env.production.

For example:

MODE=development   # for local testing
MODE=production    # for deployment

Update your scripts and backend logic to read from this MODE and adjust behavior accordingly.


πŸ› οΈ Technologies Used

  • 🧠 Hugging Face Diffusers: InstructPix2Pix, Kandinsky 2.2
  • πŸ”₯ Firebase Storage: Hosting image assets and cache
  • πŸ§ͺ FastAPI: Model-serving backend
  • πŸ–ΌοΈ React + Vite: Frontend application
  • πŸ”§ Express.js: API middleware
  • πŸ“¦ Render + RunPod (optional): Deployment platforms for bias analysis and GPU inference

⚠️ Important Notes

  • Do not commit your firebase_key.json or Hugging Face tokens to public repositories.
  • Ensure that your models are loaded only once at startup to reduce cold-start latency.
  • Use environment variables or .env.development to store sensitive config for production use.

πŸ“„ License

This project is developed as part of Monash University's MDS11 final-year project. All models used are publicly available under their respective licenses.


πŸ‘©β€πŸ’» Maintained by

  • Louis Meng Hoe Chow (Student ID: 32937350)
  • Syed Fakhar Un Nabi (Student ID: 33509409)
  • Phoebe Ting Wei Jia (Student ID: 33454868)
  • Ong Zhen Ni (Student ID: 32842848)
  • Supervisor: Professor Dr. Raphael Phan

ongzn/MDS11_BiasLens

JavaScript

1

4 commits

updated Jun 6, 2025

See the code

README

MDS11_BiasLens

This repository contains the full source code for MDS11 BiasLens, a final-year project designed to explore and analyze demographic bias (gender, age, race) in AI-generated images. The system is built using a combination of React (frontend), Express.js (API), and FastAPI (model serving), and it integrates with Firebase Storage to manage and serve image data.


🎯 Project Objective

The goal of this assignment is to evaluate whether modern image generation models (e.g., InstructPix2Pix, Kandinsky, MagicBrush) demonstrate demographic bias when transforming human portraits into images representing various occupations. This is done by:

  • Generating original images from a balanced dataset (FairFace).
  • Applying prompt-based image transformations (e.g., "A photo of a nurse").
  • Analyzing patterns of bias using an automated analysis module.

πŸ—‚οΈ Project Structure

MDS11_BiasLens/
β”‚
β”œβ”€β”€ frontend/           # React frontend for selecting filters, generating images, and viewing bias results
β”œβ”€β”€ mainEndpoint/       # Node.js Express API that connects frontend to model & bias analysis backend
β”œβ”€β”€ editingModel/       # FastAPI model server using Hugging Face pipelines (Pix2Pix, Img2Img, MagicBrush)
β”œβ”€β”€ biasAnalyse/        # (Optional) Bias analysis service (can be run locally or via Render)
β”‚
β”œβ”€β”€ firebase_key.json   # Firebase service account config (DO NOT commit this publicly)
β”œβ”€β”€ env.js              # Configuration for endpoints and environment variables
β”œβ”€β”€ run_all.sh          # βœ… Main script to install dependencies and start all services
└── README.md

πŸš€ Quick Start

1. Prerequisites

  • Python β‰₯ 3.9
  • Node.js β‰₯ 18
  • Conda or virtualenv (recommended)
  • Firebase Service Account JSON (place in /config/firebase_key.json)
  • Hugging Face Token (free from https://huggingface.co/settings/tokens)

πŸ” Firebase Note:
You can set up your own Firebase project and create a service account to generate your own firebase_key.json.
Refer to: Firebase Admin Setup Docs

  1. Go to Firebase Console β†’ Project Settings β†’ Service Accounts
  2. Click "Generate new private key" and save the JSON file.
  3. Place it in ./config/firebase_key.json. πŸ–ΌοΈ Setting Up Image Database on Firebase Storage

To run the system with the correct image pipeline, you must organize your original images in Firebase Cloud Storage using the following structure:

πŸ”§ Step-by-Step Guide

  1. Go to Firebase Console Open your project and navigate to Build β†’ Storage.
  2. Enable Cloud Storage if not already enabled.
  3. Inside your Storage, create a folder called: originals/
  4. Inside the originals/ folder, create 18 subfolders based on combinations of gender, age, and race:
        originals/
        β”œβ”€β”€ Female_20-29_Black/
        β”œβ”€β”€ Female_20-29_White/
        β”œβ”€β”€ Female_20-29_EastAsian/
        β”œβ”€β”€ Female_40-49_Black/
        β”œβ”€β”€ Female_40-49_White/
        β”œβ”€β”€ Female_40-49_EastAsian/
        β”œβ”€β”€ Female_60-69_Black/
        β”œβ”€β”€ Female_60-69_White/
        β”œβ”€β”€ Female_60-69_EastAsian/
        β”œβ”€β”€ Male_20-29_Black/
        β”œβ”€β”€ Male_20-29_White/
        β”œβ”€β”€ Male_20-29_EastAsian/
        β”œβ”€β”€ Male_40-49_Black/
        β”œβ”€β”€ Male_40-49_White/
        β”œβ”€β”€ Male_40-49_EastAsian/
        β”œβ”€β”€ Male_60-69_Black/
        β”œβ”€β”€ Male_60-69_White/
        β”œβ”€β”€ Male_60-69_EastAsian/
  1. Upload image files (.jpg or .png) inside each folder. Recommended size: ~600x600px. πŸ” Make sure: β€’ Images are publicly readable (or use signed URL logic like the project does). β€’ The folder naming matches exactly what the system expects. β€’ Each folder contains enough images (β‰₯10 recommended).

🧠 Hugging Face Token: This project uses Hugging Face models (e.g., Pix2Pix, Kandinsky, MagicBrush). To use them, sign up at huggingface.co and get your personal access token. Replace the hardcoded HF_TOKEN in editingModel/main.py with your own token.

  1. Go to your Hugging Face account β†’ Settings β†’ Access Tokens.
  2. Create a new token (choose β€œread” access).
  3. Replace the value in main.py like this: HF_TOKEN = "your_actual_token_here"

πŸ“„ biasAnalyse/.env

FACEPP_KEY="KM1VUqsN1lQGmtfPLxnsXWfYvQPcteQr"
FACEPP_SECRET="tt010dmrqvZBFDQUINyBq8hKMiBuDZ98"
BASE_TMP=/tmp

🧠 Usage:

  • Create .env inside the biasAnalyse/ folder.
  • Replace the API keys with your own credentials if needed.
  • Make sure the BASE_TMP path exists and is writable by the app.
  • These variables are read at runtime by the bias analysis backend.

πŸ” Security Tip:
Never commit your .env files with real credentials to a public repository. Use .gitignore to exclude them.


2. Running All Services

Use the provided script to start everything in development mode:

bash run_all.sh

This will:

  • Install Python and Node.js dependencies
  • Start the FastAPI server (model pipelines)
  • Start the Express backend (API and Firebase handling)
  • Launch the React frontend on an available port (usually http://localhost:5173 or similar)

3. Usage

  • Visit the frontend URL (printed in terminal) to interact with the UI.
  • Select demographic filters (e.g., gender, age, race) and generate original images.
  • Choose occupations and apply transformations using different models.
  • Click Analyze Bias to view summary results by demographic category.

4. Switching Between Development and Production

You can change the running mode by editing the environment variable in .env.development or .env.production.

For example:

MODE=development   # for local testing
MODE=production    # for deployment

Update your scripts and backend logic to read from this MODE and adjust behavior accordingly.


πŸ› οΈ Technologies Used

  • 🧠 Hugging Face Diffusers: InstructPix2Pix, Kandinsky 2.2
  • πŸ”₯ Firebase Storage: Hosting image assets and cache
  • πŸ§ͺ FastAPI: Model-serving backend
  • πŸ–ΌοΈ React + Vite: Frontend application
  • πŸ”§ Express.js: API middleware
  • πŸ“¦ Render + RunPod (optional): Deployment platforms for bias analysis and GPU inference

⚠️ Important Notes

  • Do not commit your firebase_key.json or Hugging Face tokens to public repositories.
  • Ensure that your models are loaded only once at startup to reduce cold-start latency.
  • Use environment variables or .env.development to store sensitive config for production use.

πŸ“„ License

This project is developed as part of Monash University's MDS11 final-year project. All models used are publicly available under their respective licenses.


πŸ‘©β€πŸ’» Maintained by

  • Louis Meng Hoe Chow (Student ID: 32937350)
  • Syed Fakhar Un Nabi (Student ID: 33509409)
  • Phoebe Ting Wei Jia (Student ID: 33454868)
  • Ong Zhen Ni (Student ID: 32842848)
  • Supervisor: Professor Dr. Raphael Phan