Background jobs con Supabase Edge functions para procesar imágenes

Build reliable batch image processing with Supabase Edge functions and a jobs system. Learn how to run long background tasks, track progress in a jobs table, and update the front end with AI-renamed photos—even when work exceeds the 1.2-minute connection limit. Clear flow, real-time status, and practical UI tips included.

Why use Supabase Edge functions and jobs for batch processing?

Edge functions let you run server code with secrets and call APIs like OpenAI. They already power a photo renaming app that uploads, renames in the cloud, and sends results to the front end. The challenge is the connection limit: about 1.2 minutes. For many images or larger workloads, a background job system keeps work going while you inform users.

What is an Edge function?

• An Edge function is server-side code that can call services like OpenAI.
• It returns data safely to the front end.
• It uses server secrets to access APIs.

How does a jobs table track status and progress?

• A jobs table records the job’s status: pending, processing, completed, or error.
• It stores progress: items processed vs total items.
• It keeps input data and any errors.

• The job ID is used to fetch updates and show progress to users.

• Flow summary.

• The front end sends selected photos to an Edge function.
• The function starts batch processing in the background.
• Progress is written to the jobs table.
• The job ID is returned to the front end for live updates.
• Results are sent back and photo names are updated.

How to implement batch AI analysis with Supabase?

The plan starts with data, adds a background function, and finishes with a UI that kicks off and tracks work. It evolves the existing photo renaming app with AI-powered batch features.

Which steps enable batch image processing?

• Create a jobs table to store status, progress counts, and inputs.
• Build an Edge function named batch AI analysis to process multiple photos.
• Update the job in real time and expose the job ID to the front end.
• Add management and status helper functions to simplify updates.
• Extend the UI with a batch analyze action for selected photos.
• Show progress on photo cards and allow users to start analysis easily.

How does the AI rename flow work?

• Use the same vision endpoint from single-image renaming, but now in batch.
• Add an AI rename button to process all selected photos via the new system.
• Start the job, display the job ID, and wait for background processing.
• When done, receive results and update photo names in the front end.
• Example experience.
• A new rename dialog appears with options like start number and separator.
• A live preview shows how names will look.

• The system renames photos and reflects changes in the UI.

• Useful vocabulary for ESL/EFL learners.

• Batch processing: handling many items at once.
• Front end / back end: user interface vs server logic.
• Timeout: the 1.2-minute connection limit for Edge functions.
• Background job: work that runs without blocking the UI.
• Job ID: unique identifier to track a background task.

What challenges and UI improvements were noted?

There was an initial error when testing batch rename. It was fixed and a richer UI appeared with rename options and previews. However, AI renaming was missing at first; after a reminder, the system added AI batch rename. The job then started with a visible job ID and processed images in the background.

Which fixes and improvements matter most?

• Fix early errors by reading messages and iterating quickly.
• Keep AI features aligned with the original goal: AI-driven batch rename.
• In Supabase, observe the job with status, totals, and processed counts.
• Push final results back to the front end to update names.
• Future UI ideas.
• Show progress bars and remaining items.
• Display current phase: pending, processing, completed, or error.
• Provide clearer feedback per photo card during processing.

Have ideas to enhance the jobs table, progress UI, or the AI rename flow? Share your questions and suggestions below.