Background Change API Documentation

This project provides an API for performing background changes on images using a React frontend, Flask backend, and webhook integration.

---

Frontend Setup

Prerequisites

• Node.js: Version 20 installed using Node Version Manager (nvm).
• npm or yarn for dependency management.

Installation & Setup

1. Install Node.js v20:

   nvm install 20
   nvm use 20

2. Navigate to the frontend directory:

   cd bg_change_frontend

3. Install dependencies:

   npm install
   # or
   yarn install

4. Start the development server:

   npm run dev
   # or
   yarn dev

   The frontend will be available at http://localhost:5173.

Configuration

Update the webhook URLs in src/App.tsx to point to your ngrok forwarding URL:

• Locate and replace occurrences of ngrok-free.app with your ngrok URL.
  For example, update:

  webhookUrl: "https://c184-219-91-134-123.ngrok-free.app/api/webhook";

  to:

  webhookUrl: "https://your-ngrok-url.ngrok-free.app/api/webhook";

---

Backend Setup

Prerequisites

• Python 3.x
• pip (Python package installer)
• Virtual environment (recommended)

Installation & Setup

1. Create and activate a virtual environment:

   python -m venv venv
   source venv/bin/activate  # On Windows: venv\Scripts\activate

2. Navigate to the backend directory:

   cd bg_change_webhook

3. Install dependencies:

   pip install -r requirements.txt

4. Create a .env file in the backend directory with your credentials:

   CLIENT_ID=your_client_id
   CLIENT_SECRET=your_client_secret

5. Start the Flask server:

   python app.py

   The backend will be available at http://localhost:3008.

---

Webhook Setup

Webhook integration uses ngrok to provide a public URL for your backend.

Steps

1. Install ngrok:

   • Download ngrok from the official website.
   • Create a free ngrok account.
   • Follow the installation instructions for your operating system.

2. Authenticate ngrok:

   ngrok config add-authtoken your_auth_token

3. Start ngrok to forward the backend port:

   ngrok http 3008

4. Copy the generated forwarding URL (e.g., https://your-ngrok-url.ngrok-free.app) and:

   • Update the webhook URL in your frontend configuration (see Frontend Setup).
   • Ensure the backend webhook endpoint is accessible through this URL.

---

Payload Examples

Example 1

{
  "canvas_size": "3840x3840",
  "template_url": "https://d3c24lvfmudc1v.cloudfront.net/public/background_change/ROne.png",
  "modify_template_size": "3830x3830",
  "overlay_template_x": 5,
  "overlay_template_y": 5,
  "origin_img": "https://drz0f01yeq1cx.cloudfront.net/1711939252580-7e40bd1a-e480-42ed-8585-3f9ffccf6bdb-5822.png",
  "modify_origin_img_size": "3830x2145",
  "overlay_origin_x": 5,
  "overlay_origin_y": 849
}

Example 2

{
  "color_code": "#c9aafb",
  "canvas_size": "3840x3840",
  "origin_img": "https://drz0f01yeq1cx.cloudfront.net/1712132369637-69a946c0-b2a7-4fe6-92c8-2729b36cc13e-0183.png",
  "modify_origin_img_size": "3060x3824",
  "overlay_origin_x": 388,
  "overlay_origin_y": 8
}

---

Notes

• Ensure both frontend and backend servers are running simultaneously.
• The ngrok URL changes with every restart (unless you have a paid plan). Update it in the frontend whenever it changes.
• Keep sensitive credentials such as CLIENT_ID and CLIENT_SECRET secure and avoid committing them to version control.
• Troubleshoot CORS and firewall issues if the API doesn't work as expected.

---

Troubleshooting

• CORS Issues: Verify the backend's CORS settings.
• ngrok Connectivity Problems: Ensure the ngrok authtoken is correctly configured.