以 Next.js 建構 AI Zombie Couple Video 生成器
Building an AI Zombie Couple Video Generator with Next.js
AI Zombie Couple Video 是一款以 Next.js 建構並已部署的網頁應用程式，可將兩張人像照片生成 15 秒的個人化殭屍愛情故事影片。用戶可選 Seedance 2.0 或 2.5，以及 480p、720p 或 1080p 輸出，並以一次性點數包付費，沒有訂閲制。部署後遇到的數據庫連線池上限問題，透過改用 transaction pooler 和重用數據庫連線處理。
I’ve been building AI Zombie Couple Video, a small web app that turns two portrait photos into a personalized, 15-second zombie love story.
The idea came from the zombie couple video trend: a tense encounter between two lovers cuts suddenly to a happy memory of them together. I wanted to make that scene accessible to people who don’t want to write detailed prompts or edit a video timeline.
The product is now deployed. Here’s what it does and a few practical lessons from getting it online.
A focused creation flow
The user uploads two portraits and assigns the roles:
- A is the survivor.
- B is the zombie partner.
They then choose Seedance 2.0 or 2.5 and an output resolution: 480p, 720p, or 1080p. The interface shows the credit cost before they confirm generation.
The homepage includes an actual generated sample alongside its two input photos. This was an important design choice: visitors can compare the inputs and result before deciding whether to purchase credits.
Generation uses one-time credit packs, with no subscription.
Designing the scene meant thinking about continuity
A short video still needs clear visual storytelling.
During development, we worked through details such as the distance between the characters, the direction of the zombie’s approach, and the transition into the memory scene.
One particularly important detail was matching the movement across the cut. The zombie approaches from one direction, and the embrace in the memory continues that direction. The setting changes abruptly, but the motion should still make sense.
Character identity, expressions, and clothing continuity also needed attention. These remain useful things to inspect when evaluating generated results; a finished clip can vary from the intended scene.
The application stack
The site uses:
- Next.js and React for the application.
- Tailwind CSS for styling.
- Supabase PostgreSQL for accounts, orders, and credits.
- Vercel for hosting.
- PayPal for checkout integration.
I started from a SaaS template and adapted the account, payment, and credit features to this specific product.
A deployment lesson: database connections
One issue after deployment affected both login sessions and the admin dashboard.
The database logs showed that the session connection pool had reached its client limit. The application was online, but database-dependent pages could fail.
We switched the production connection to the transaction pooler and enabled database client reuse within each running application instance, keeping the connection limit small.
After redeployment, we checked existing sessions, admin pages, credit balances, and several concurrent page reads.
The useful lesson for me was that a successful build doesn’t prove the deployed application’s database connection settings are appropriate.
Credits are part of the user experience
For a paid generation tool, users need clear answers before pressing the button:
- What will this generation cost?
- Do I have enough credits?
- What happens if generation fails?
- Where can I find the result later?
Those questions influenced the confirmation step, balance display, credit records, and generation history.
They also made it important to check payment settlement and credit handling separately from the visual interface.
Feedback welcome
You can see the sample and explore the site here:
I’d appreciate feedback on whether the sample clearly communicates the result and whether the model, resolution, and credit choices are easy to understand.
If you’ve built a paid AI generation tool, what part of the user experience required the most iteration?
Disclosure: This article was drafted with AI using development notes from the project.
來源：DEV Community · dev.to