Background Remover

A simple web application that allows users to upload images and remove their backgrounds using the Remove.bg API.

Features

  • Drag and drop image upload
  • Preview of original and processed images
  • Download processed images with transparent backgrounds
  • Responsive design that works on mobile and desktop

Setup

This application requires a Remove.bg API key to function. You need to set up an environment variable in Val Town:

  1. Sign up for a free account at Remove.bg
  2. Get your API key from the Remove.bg dashboard
  3. Add the API key as an environment variable in Val Town:
    • Variable name: REMOVE_BG_API_KEY
    • Value: Your Remove.bg API key

Usage

  1. Upload an image by dragging and dropping it onto the designated area or by clicking to select a file
  2. Click the "Remove Background" button to process the image
  3. Once processing is complete, you can download the image with the background removed

Limitations

  • The free tier of Remove.bg API has a limited number of API calls (typically 50 images per month)
  • Maximum file size is 10MB
  • Supported file formats: PNG, JPG, JPEG

Troubleshooting

If you encounter issues with the application, here are some common problems and solutions:

API Key Not Configured

  • Make sure you've added the REMOVE_BG_API_KEY environment variable in Val Town
  • Verify that the API key is correct and active in your Remove.bg dashboard

Rate Limit Exceeded

  • The free tier of Remove.bg has a limited number of API calls
  • If you see a 429 error, you've exceeded your monthly quota
  • Consider upgrading your Remove.bg plan for more credits

Image Processing Failed

  • Make sure your image is in a supported format (PNG, JPG, JPEG)
  • Check that the image size is under 10MB
  • Some complex images might not process correctly

Technical Details

This application is built using:

  • Frontend: HTML, CSS (with Tailwind via CDN), and vanilla JavaScript
  • Backend: Hono framework running on Val Town's Deno runtime
  • Image processing: Remove.bg API

Project Structure

  • /index.ts - Main HTTP handler and API endpoint
  • /frontend/index.html - Frontend UI for the application