A frontend for an AI-powered short drama creation platform that turns story ideas into videos via script, assets, storyboard, and synthesis steps.

Stars

49

7-day growth

No data

Forks

18

Open issues

1

License

MIT

Last updated

2026-07-17

AI repository intelligence
FR-AI / ANALYSIS

Why it is worth attention

It provides an open-source, end-to-end pipeline from inspiration to video output, integrating Atlas Cloud for AI generation and Ruoyi for backend management, with a one-click API key configuration.

Who it is for

  • Short drama content creators
  • Developers building AI video generation tools
  • Users of the Ruoyi framework
  • Researchers and hobbyists exploring AI media production

Use cases

  • Generate short dramas from text prompts
  • Rapidly prototype AI-generated video content
  • Experiment with storyboard-to-video workflows
  • Build custom AI video creation applications

Strengths

  • Clear step-by-step workflow from inspiration to video
  • One-click Atlas API key batch update across all models
  • Includes automated FFmpeg installation script for Windows
  • Production-ready build with Nginx proxy configuration

Considerations

  • Requires a separate backend service (ruoyi-ai) to be running
  • Depends on an external Atlas Cloud API key and internet access
  • FFmpeg installation is mandatory for video synthesis and Windows script may not work without winget

README quick start

ruoyi-drama

后端服务(短剧前端依赖此前端运行的后台):

请先按 ruoyi-ai 文档启动后台,默认地址 http://127.0.0.1:6039,本前端会通过 Vite 代理与之对接。

演示截图

从灵感输入到成片输出,完整呈现一条短剧的创作流程:创作中心首页 → 一键配置 Atlas Key → 剧本打磨 → 资产配置 → 分镜确认与视频合成。

简单教程

1. 启动后台

ruoyi-ai 文档启动后台服务,确保能访问 http://127.0.0.1:6039

2. 启动前端

npm install
npm run dev

默认开发地址由 Vite 输出,默认后台为 http://127.0.0.1:6039

如需切换后台,只修改 .env.development

VITE_API_URL=/dev-api
VITE_API_PROXY_TARGET=http://你的后台地址:端口
VITE_CLIENT_ID=后台配置的客户端ID

VITE_API_URL 使用相对路径时,请求由 Vite 代理,可以避免浏览器跨域问题;也可将它改为后台完整 URL,但后台需要允许跨域。

3. 登录创作

打开前端 → 使用后台账号登录(默认管理员账号 admin / admin123)→ 在「创作中心」首页写下故事灵感 → 点击「开始创作」进入短剧工作台,依次完成剧本打磨、资产配置、分镜确认与视频合成。

4. 一键配置 Atlas Key(重要)

短剧的图片 / 视频生成都依赖 Atlas Cloud。使用前需要配置 API Key:

  1. 在「创作中心」首页右上角点击 「Key 配置」 按钮。
  2. 在弹窗中粘贴你的 Atlas Cloud API Key(可在 atlascloud.ai 获取)。
  3. 点击 「保存并应用」,系统会自动把该 Key 批量应用到所有 Atlas 模型(对话 / 图片 / 视频共用同一个 Key)。
  4. 提示「Atlas Key 已批量更新」即配置成功,回到短剧工作台即可生成图片与视频。

该接口对应后台 PUT /system/model/batchKeyByProvider,按厂商编码 atlas 批量更新 chat_model.api_key,需拥有 system:model:edit 权限。

5. 安装 FFmpeg(视频合成必需)

短剧「分镜视频合成成片」功能依赖后端的 FFmpeg(需要包含 libx264aac 编码器)。Windows 下可用 ruoyi-ai 仓库提供的一键脚本自动安装并配置环境变量:

# 在 ruoyi-ai 仓库根目录执行(Windows PowerShell)
powershell -ExecutionPolicy Bypass -File .\docs\script\install-ffmpeg-windows.ps1

脚本会:

  1. 检测是否已安装 ffmpeg / ffprobe,缺失则通过 winget 安装 Gyan.FFmpeg
  2. 把绝对路径写入用户环境变量 FFMPEG_PATHFFPROBE_PATH,并追加到 Path
  3. 校验是否包含 libx264aac 编码器,不满足会直接报错。

安装完成后必须完全重启 IntelliJ IDEA 和 ruoyi-ai 后端服务,Spring 才会读取到新的 FFMPEG_PATH / FFPROBE_PATH。 脚本依赖 winget,若未安装会提示先从 Microsoft Store 安装「应用安装程序」;也可改用项目 Dockerfile 运行后端(镜像内已含 FFmpeg)。

生产构建

npm run build

产物位于 dist/。默认生产接口前缀为 /prod-api,示例 nginx.conf 会将该前缀代理到 http://127.0.0.1:6039。部署时按实际情况修改 proxy_pass 即可。


独家赞助

访问 Atlas Cloud 官网 · 编程计

Description

AI 短剧创作前端,基于 Vue 3 + Vite + Pinia,对接 ruoyi-ai 后台

Related repositories

Similar projects matched by category, topics, and programming language.

LoD-Dawn
LoD-Dawn GitHub avatar

Fast-Vben-Admin

Fast Vben Admin is a modular full-stack management platform for admin panels and multi-tenant SaaS, built with FastAPI and Vue Vben Admin using Edition YAML composition.

Vue
192
Jeronasand
Jeronasand GitHub avatar

deepseek-saas-starter-vue

An open-source Vue 3 + Node template that wraps DeepSeek API into a monetizable AI tool store with four pre-built content generation tools and cost estimation.

Vue
167
lioil522
lioil522 GitHub avatar

nav-item-cf

A modern navigation website built with Vue 3 frontend and Cloudflare Pages Functions (Hono) backend, using Cloudflare D1 for database and R2 for image storage, fully serverless and deployable on Cloudflare's free tier.

Vue
17