Tiny Desk Generator 如何設計付費 AI 影片任務前的本地相片預覽

A portrait-to-video workflow has two very different stages: helping someone compose a scene and sending the chosen image to a generation service. Keeping those stages separate can make the product easier to understand and reduce unnecessary uploads.

I work on Tiny Desk Generator, an independent tool for creating AI desk-band videos. Here are a few implementation choices from its browser editor that may be useful when building a photo-based creative tool.

Preview locally before requesting a job

The editor prepares a selected image in the browser and displays it with an object URL. A local storyboard can then reflect the chosen cast and format without making a generation API call. This is a storyboard, not a preview of the final model output: the distinction matters when the finished result is stochastic and costs money to produce.

A simplified object URL lifecycle looks like this:

let previewUrl;

function showPreview(blob, image) {
  if (previewUrl) URL.revokeObjectURL(previewUrl);
  previewUrl = URL.createObjectURL(blob);
  image.src = previewUrl;
}

function clearPreview(image) {
  if (previewUrl) URL.revokeObjectURL(previewUrl);
  previewUrl = undefined;
  image.removeAttribute('src');
}

Revoke the previous URL on replacement or removal, and clean up when the page is left. An object URL is a browser-local reference; it is not an access-control system for images uploaded later.

Validate early, then validate again on the server

The editor accepts JPEG, PNG and WebP, checks file size and dimensions, and prepares a smaller JPEG with a canvas before using the image. This gives immediate feedback, but client checks are not a trust boundary. The server still needs to validate the request and the active cast requirements before storing an upload or reserving a credit.

One useful edge case is switching cast modes. A user may retain inactive photos while editing, but the preview and submission should use only the roles active for the chosen mode. In a duet, both required co-lead portraits must be present before the request is accepted.

Recovery should not repeat a paid action

Checkout and generation can be interrupted by a tab close or an uncertain network response. Our editor offers a device-local recovery draft for up to 24 hours, clearly warns that someone using that browser can access it, and asks for photo permission again after restoration. If a submission may already be running, the UI asks the person to check the existing job instead of sending a second generation request immediately.

The details depend on the product: a local draft needs an expiry and a clear removal action, while an idempotency key and an account-owned status lookup are useful when a server request may have succeeded despite a lost response. None of these removes the need to handle failed jobs and credit returns explicitly.

Make permission and cost visible

Ask users to upload only portraits they have permission to use, and explain what is free before checkout. In this product, planning a local storyboard is free; generating a video requires a paid credit. The generated scene is original and the product is not affiliated with NPR or Tiny Desk Concerts. Clear wording is part of the workflow, not a substitute for server-side validation or a privacy policy.