Vue + Laravel 实战：用 AI 撸一个像素画编辑器

我的实操方案是：先用 flux-schnell 生成原图，然后交给 PHP 的 GD 库进行强制处理。

# 核心处理逻辑
1. 区域缩放（Area-downscale）到目标网格（如 32x32）
2. 颜色量化（imagetruecolortopalette）+ 抖动处理
3. 使用容差填充（flood-fill）将背景色剔除，转为透明通道

这样出来的图才有干净的像素格，能直接编辑。

至于动画补帧（Inbetweening），我是用 Google 的 FILM 模型处理两个关键帧 PNG，拿到 mp4 后再用 ffmpeg 拆分成单帧，最后再走一遍上面的像素化流程，这样生成的中间帧才能无缝插入时间轴。

在架构设计上，我发现一个很有意思的点：如果编辑器所有功能（图层、导出、绘制）都跑在客户端（Vue 3 + IndexedDB），那么试图给这些功能设付费墙其实很低效，因为用户很容易绕过。所以我的策略是编辑器完全免费，只给需要后端算力的 AI 功能收费。

为了防止 AI 调用扣费出 Bug，我在 Laravel 后端实现了一套幂等扣费机制，确保不会重复扣费，且失败时能自动回滚。

DB::transaction(function () use ($userId, $cost, $reference) {
    // 锁定用户行，防止并发导致余额计算错误
    $user = User::whereKey($userId)->lockForUpdate()->first();
    
    if ($user->credit_balance < $cost) {
        throw new Exception('Insufficient credits');
    }

    // 记录流水单，使用 reference 保证幂等
    CreditTransaction::firstOrCreate(
        ['reference' => $reference],
        ['user_id' => $userId, 'amount' => -$cost, 'type' => 'spend']
    );

    $user->decrement('credit_balance', $cost);
});

这套工作流把 Vue 的前端响应能力和 Laravel 的后端处理能力结合起来，确实比纯前端方案要稳很多。