Midjourney案例视频生成器 v2.0 产品设计

📐 产品架构

一、核心功能模块

┌─────────────────────────────────────────┐
│   Midjourney案例视频生成器 v2.0         │
└─────────────────────────────────────────┘
           │
           ├─► 1. JSON解析模块
           │   ├─ 粘贴MJ JSON数据
           │   ├─ 自动识别视频类型
           │   └─ 提取元数据(prompt/参数)
           │
           ├─► 2. 视频管理模块
           │   ├─ 批量下载引导
           │   ├─ 本地上传OSS
           │   └─ 元数据关联
           │
           ├─► 3. 合成配置模块
           │   ├─ 案例分组策略
           │   ├─ 视频效果参数
           │   └─ BGM/字幕设置
           │
           ├─► 4. 任务执行模块
           │   ├─ 生成批次创建
           │   ├─ 异步合成调度
           │   └─ 进度实时追踪
           │
           └─► 5. 生成记录模块
               ├─ 历史批次列表
               ├─ 视频预览/下载
               └─ 记录删除/重试

🎮 业务逻辑设计

场景1: 50个视频,每视频4个案例

输入:

50个Midjourney视频片段
配置: casesPerVideo = 4

处理逻辑:

javascript

总视频数 = 50
每视频案例数 = 4

完整视频数 = Math.floor(50 / 4) = 12
剩余案例数 = 50 % 4 = 2

输出视频列表:
- 视频1: 案例1-4
- 视频2: 案例5-8
- ...
- 视频12: 案例45-48
- 视频13: 案例49-50 (仅2个案例)

前端提示:

📊 将生成 13 个混剪视频
  ├─ 12个完整视频(每个4案例)
  └─ 1个残缺视频(2案例)
  
⚠️ 建议:
  - 上传52个视频可得到13个完整视频
  - 或调整为"每视频5案例"可得到10个完整视频

场景2: 3个视频,每视频4个案例

输入: 3个视频输出: 1个包含3个案例的视频(不满4个)

前端提示:

⚠️ 视频数量不足
当前: 3个案例
要求: 至少4个案例
建议: 再上传1个视频

💾 数据库设计

新表: mj_generation_batch (生成批次表)

sql

CREATE TABLE `mj_generation_batch` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `batch_id` varchar(32) NOT NULL COMMENT '批次ID(mj_batch_xxx)',
  `user_id` int(11) DEFAULT NULL COMMENT '用户ID',
  `name` varchar(255) DEFAULT NULL COMMENT '批次名称',
  
  -- 输入信息
  `total_inputs` int(11) NOT NULL DEFAULT 0 COMMENT '输入视频数',
  `input_videos` json COMMENT '输入视频列表',
  
  -- 配置参数
  `config` json COMMENT '合成配置(casesPerVideo/BGM等)',
  
  -- 输出信息
  `total_outputs` int(11) NOT NULL DEFAULT 0 COMMENT '输出视频数',
  `output_videos` json COMMENT '输出视频列表',
  
  -- 执行状态
  `status` varchar(20) DEFAULT 'pending' COMMENT 'pending/processing/completed/failed',
  `progress` int(11) DEFAULT 0 COMMENT '进度百分比',
  `completed_count` int(11) DEFAULT 0 COMMENT '已完成数',
  `failed_count` int(11) DEFAULT 0 COMMENT '失败数',
  `error_message` text COMMENT '错误信息',
  
  -- 时间戳
  `created_at` int(11) DEFAULT NULL COMMENT '创建时间',
  `started_at` int(11) DEFAULT NULL COMMENT '开始时间',
  `finished_at` int(11) DEFAULT NULL COMMENT '完成时间',
  `updated_at` int(11) DEFAULT NULL COMMENT '更新时间',
  
  PRIMARY KEY (`id`),
  UNIQUE KEY `uk_batch_id` (`batch_id`),
  KEY `idx_user_id` (`user_id`),
  KEY `idx_status` (`status`),
  KEY `idx_created_at` (`created_at`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='Midjourney生成批次记录表';

🎨 前端UI设计

布局优化

┌────────────────────────────────────────────────────────┐
│  🎬 Midjourney案例视频生成器                            │
│  一键将多个MJ视频合成为炫酷合集                          │
└────────────────────────────────────────────────────────┘

┌─────────────────────┬──────────────────────────────────┐
│ 📝 操作区            │ 📊 实时预览                      │
├─────────────────────┼──────────────────────────────────┤
│                     │                                  │
│ ▼ 步骤1: JSON解析   │  ┌──────────────────────────┐  │
│ [粘贴JSON]          │  │ 待解析...                │  │
│ [解析]              │  └──────────────────────────┘  │
│                     │                                  │
│ ▼ 步骤2: 下载视频   │  ┌──────────────────────────┐  │
│ [批量下载脚本]      │  │ 下载清单(0个)            │  │
│                     │  │ • 等待解析JSON           │  │
│ ▼ 步骤3: 上传OSS    │  └──────────────────────────┘  │
│ [选择文件]          │                                  │
│ 已选: 0个           │  ▼ 当前任务                      │
│                     │  无进行中任务                    │
│ ▼ 步骤4: 合成配置   │                                  │
│ 素材主题: [选择]    │  ▼ 历史记录(最近5条)             │
│ 每视频案例数: [4]   │  暂无历史记录                    │
│ □ 自动混剪          │                                  │
│                     │                                  │
│ [开始生成]          │                                  │
└─────────────────────┴──────────────────────────────────┘

智能提示位置

┌─────────────────────────────────────────┐
│ ✨ 使用引导                              │
├─────────────────────────────────────────┤
│ 1️⃣ 在Midjourney网站复制视频JSON        │
│ 2️⃣ 粘贴到输入框,点击"解析"               │
│ 3️⃣ 使用"批量下载脚本"下载视频到本地      │
│ 4️⃣ 上传视频文件(自动匹配元数据)          │
│ 5️⃣ 配置参数后点击"开始生成"              │
│ 6️⃣ 在"生成记录"查看/下载结果             │
└─────────────────────────────────────────┘

💡 智能提示(根据状态动态显示):
- 未解析: "请先粘贴JSON并解析"
- 已解析未下载: "请下载视频(共X个)"
- 已下载未上传: "请上传视频文件"
- 配置不足: "每视频至少需要3个案例"
- 数量提示: "将生成X个完整+Y个残缺视频"

🔄 完整工作流

阶段1: 准备阶段

用户操作          系统响应
────────         ────────
粘贴JSON    →    解析JSON
                 ├─ 提取视频元数据
                 ├─ 生成下载清单
                 └─ 显示统计信息

复制脚本    →    生成控制台脚本
运行脚本    →    浏览器批量下载
                 └─ 保存为[ID].mp4

阶段2: 上传阶段

选择文件    →    智能匹配
                 ├─ 根据文件名匹配元数据
                 ├─ 显示匹配结果
                 └─ 提示未匹配项

开始上传    →    OSS直传
                 ├─ 并发上传(最多3个)
                 ├─ 实时进度显示
                 └─ 保存到素材库

阶段3: 合成阶段

点击生成    →    创建批次
                 ├─ 生成batch_id
                 ├─ 保存配置和输入
                 └─ 记录到数据库

异步执行    →    PyBridge合成
                 ├─ 分组(4个/组)
                 ├─ 逐组合成
                 └─ 实时更新进度

完成通知    →    更新记录
                 ├─ 保存输出视频
                 ├─ 标记状态completed
                 └─ 前端弹窗提示

🎯 核心优化点

1. 下载体验优化

php

// 修改: 直接从OSS URL打包下载
public function batchDownload()
{
    $batchId = Request::param('batch_id', '');
    $batch = Db::table('mj_generation_batch')
        ->where('batch_id', $batchId)
        ->find();
    
    // 生成临时下载链接列表
    $downloads = [];
    foreach ($batch['output_videos'] as $video) {
        $downloads[] = [
            'name' => $video['id'] . '.mp4',
            'url' => $video['oss_url']
        ];
    }
    
    return $this->sendResponse(SUCCESS, [
        'download_type' => 'url_list',
        'files' => $downloads,
        'total' => count($downloads)
    ]);
}

2. 预览体验优化

javascript

// 前端: 点击预览直接打开OSS URL
previewVideo(video) {
  // OSS签名URL可能过期,需要重新生成
  this.refreshPreviewUrl(video).then(url => {
    this.currentPreviewVideo = { ...video, preview_url: url }
    this.previewDialogVisible = true
  })
}

async refreshPreviewUrl(video) {
  if (video.oss_key) {
    const res = await getOssSignedUrl({ oss_key: video.oss_key })
    return res.signed_url
  }
  return video.oss_url
}

3. 历史记录UI

vue

<el-card>
  <div slot="header">📚 生成记录</div>
  
  <el-timeline>
    <el-timeline-item
      v-for="batch in batches"
      :key="batch.id"
      :timestamp="formatTime(batch.created_at)"
      :color="getStatusColor(batch.status)"
    >
      <h4>{{ batch.name || '未命名批次' }}</h4>
      <p>
        输入: {{ batch.total_inputs }}个视频
        → 输出: {{ batch.total_outputs }}个混剪
      </p>
      
      <el-tag :type="getStatusType(batch.status)">
        {{ getStatusText(batch.status) }}
      </el-tag>
      
      <div v-if="batch.status === 'completed'">
        <el-button @click="previewBatch(batch)">预览</el-button>
        <el-button @click="downloadBatch(batch)">下载</el-button>
      </div>
    </el-timeline-item>
  </el-timeline>
</el-card>

📱 移动端适配

响应式布局,移动端单列显示
大按钮,易于点击
简化表单,关键选项前置
进度条明显,实时反馈

🎁 附加功能

批次命名: 生成时可输入批次名称
模板预设: 保存常用配置为模板
批量操作: 批量删除/重试历史记录
分享功能: 生成分享链接(含预览)
统计分析: 总计生成视频数/时长/存储

🚀 下一步实施

✅ 修复下载和预览BUG
⏳ 创建数据库表
⏳ 重构前端UI布局
⏳ 实现生成记录管理
⏳ 优化业务逻辑提示

Midjourney案例视频生成器 v2.0 产品设计 ​

📐 产品架构 ​

一、核心功能模块 ​

🎮 业务逻辑设计 ​

场景1: 50个视频,每视频4个案例 ​

场景2: 3个视频,每视频4个案例 ​

💾 数据库设计 ​

新表: mj_generation_batch (生成批次表) ​

🎨 前端UI设计 ​

布局优化 ​

智能提示位置 ​

🔄 完整工作流 ​

阶段1: 准备阶段 ​

阶段2: 上传阶段 ​

阶段3: 合成阶段 ​

🎯 核心优化点 ​

1. 下载体验优化 ​

2. 预览体验优化 ​

3. 历史记录UI ​

📱 移动端适配 ​

🎁 附加功能 ​

🚀 下一步实施 ​

Midjourney案例视频生成器 v2.0 产品设计

📐 产品架构

一、核心功能模块

🎮 业务逻辑设计

场景1: 50个视频,每视频4个案例

场景2: 3个视频,每视频4个案例

💾 数据库设计

新表: mj_generation_batch (生成批次表)

🎨 前端UI设计

布局优化

智能提示位置

🔄 完整工作流

阶段1: 准备阶段

阶段2: 上传阶段

阶段3: 合成阶段

🎯 核心优化点

1. 下载体验优化

2. 预览体验优化

3. 历史记录UI

📱 移动端适配

🎁 附加功能

🚀 下一步实施