How to Add AI-Powered Image Resizing to Your App — Copy-Paste Prompts Included

Regular cropping cuts a rectangular region from a fixed position — typically the center of the image. Smart cropping uses computer vision to detect the most important region (faces, primary objects, focal points) and crops around that instead. A portrait photo center-cropped to 1:1 might cut off the top of the head; smart crop detects the face and adjusts the crop window to keep it centered and fully visible.

Not directly. FlutterFlow cannot call Cloudinary's transformation API with authentication credentials from the client side without exposing your API secret. The correct pattern is a Supabase Edge Function that constructs the Cloudinary transformation URL using the API secret from Secrets, then returns the result URL to the FlutterFlow app. The Edge Function acts as a secure proxy.

Set your Supabase Storage buckets (both originals and processed) to private. Use Supabase RLS storage policies that restrict access to the uploading user's own path prefix (user_id/). Generate signed URLs with short expiry (1 hour) for downloads. Never put processed image URLs in a public-readable database column without access control.

Supabase Storage accepts files up to 50MB on the free tier. However, the Edge Function body limit is 6MB, so always use the signed upload URL pattern to upload directly from the client to Storage. For practical purposes, apply imageQuality: 80 and maxWidth: 2048 before upload — this keeps files under 2MB without noticeable quality loss for smart crop use cases.

For basic resize without smart crop: yes. The canvas API on web can resize images in the browser using drawImage() with target dimensions. On Flutter, the image package's copyResize() function works on-device. Smart crop with AI face detection requires a server-side call to Cloudinary or AWS Rekognition — these models don't run in the browser without a WASM build, which is a significant engineering effort.

The image_jobs table already supports batch: submit multiple jobs with individual rows, each tracking their own status. The Edge Function can accept an array of storage paths and process them sequentially, updating status per row. On the client, poll the image_jobs table (or use a Supabase Realtime subscription) to show progress per image. At scale, consider a Supabase Database Function triggered by new image_jobs rows to avoid the Edge Function timeout limit.

Cloudinary's g_auto:face falls back to center gravity silently when no face is detected. To make the fallback explicit, always include a gravity parameter: set gravity_center as the fallback. The before/after comparison slider lets users see the result before confirming — if the AI chose a poor crop, they can switch to a manual preset. Alternatively, g_auto:subject (not g_auto:face) detects non-face focal points like products and landmarks.

Cloudinary charges per transformation credit: one credit = one unique transformation (unique image + unique output dimensions). The free tier is 25 credits per month. Critically, Cloudinary caches every transformation — so if 1,000 users view the same processed image, that's 1 credit, not 1,000. At 1,000 active users generating unique crops, the Plus plan at $89/month (1,000 credits) is the right tier. At 10,000 users the Advanced tier (~$224/mo) or a self-hosted sharp.js pipeline becomes more economical.