I’m building AIRAP Video, a browser-based tool that turns portrait photos into short AI rap and music videos.
The creative idea is straightforward: put yourself and your friends into a performance. The engineering work is making the path from an idea to a generated video understandable.
From the user’s perspective, the workflow looks like this:
- Choose a solo or duet performance theme.
- Upload the required portraits.
- Optionally describe a topic for original audio.
- Review the video settings and credit quote, then confirm generation.
Behind that flow are two generation stages. AIRAP first creates a new scene around the uploaded portraits, then generates the performance.
The application uses TanStack Start, React, and TypeScript. On the frontend, TanStack Query handles server data through a typed API client, while validation helps keep inputs consistent between the interface and the server.
One design decision was to make themes the starting point.
A theme gives the user a concrete visual direction. It also defines practical requirements, such as the number of portraits and, for some performances, a fixed duration. Those requirements can be shown before someone starts uploading photos.
The audio topic provides another layer of creative direction. For example:
A playful birthday rap for Alex, who always takes the last slice of pizza.
That gives the performance a personal subject while keeping the input short.
Another important part of the workflow is showing the cost before generation.
The credit quote depends on the selected model, resolution, and duration. Putting that quote next to the confirmation step helps users understand what they are about to spend.
Generation also takes longer than a typical form submission. The interface needs to communicate whether a task is processing, finished, or needs attention. Progress and recovery deserve their own place in the product flow.
Setting expectations around previews matters too. Theme examples show the creative direction; each generation creates a new result based on the supplied inputs.
Building AIRAP has made me pay closer attention to the steps surrounding generation: clear requirements, useful validation, visible costs, and understandable task status.
I’m currently sharing an early preview. Self-serve credit purchases aren’t open yet, and I’m gathering feedback on the themes and creation experience.
You can explore the previews here: AIRAP Video.
If you were building this workflow, what would you improve first: theme selection, photo uploads, or generation progress?
Top comments (0)