Lazy loaded image
人工智能
Sora2发布不到24小时，我做出了国内首款Sora套壳软件，免费开源！
字数 1411阅读时长≈ 4 分钟
2026-1-2
2026-1-4
type
status
date
slug
summary
tags
category
icon
password

Sora2发布不到24小时，我做出了国内首款Sora套壳软件，免费开源！

🚀 从0到1，24小时完成Sora2 API集成，打造国内首个开源Sora对话和视频生成应用！

🎯 项目背景

OpenAI在2025年10月1日正式发布了Sora2，作为新一代的AI视频生成模型，它不仅能够生成高质量的视频，还支持流式对话功能。当我看到这个消息后，立刻意识到这是一个绝佳的学习和实践机会。
  • 🕐 10月1日 上午9点 - Sora2正式发布
  • 💻 10月1日 上午10点 - 开始构思项目架构
  • ⚡ 10月1日 下午3点 - 完成核心功能开发
  • 🎉 10月1日 晚上9点 - 项目上线并开源

💡 为什么要做这个项目？

  1. **技术追新** \- Sora2刚发布，抢先体验最新AI技术
  1. **学以致用** \- 将API集成、流式响应等技术实战应用
  1. **开源共享** \- 帮助更多开发者快速上手Sora2
  1. **填补空白** \- 国内还没有开源的Sora2应用示例

🛠️ 技术栈

  • **前端** : 原生 JavaScript + Tailwind CSS
  • **后端** : Node.js + Express
  • **API** : Sora2 API (通过MaynorAPIPro平台)
  • **部署** : Vercel
  • **版本控制** : Git + GitHub

🎨 核心功能展示

1\. 流式对话界面

image-20251001214738276
image-20251001214738276
  • ✅ 实时流式响应，逐字显示AI回复
  • ✅ 现代化UI设计，参考ChatGPT界面风格
  • ✅ 支持Markdown格式渲染（代码高亮、粗体、斜体等）
  • ✅ 本地历史记录保存，刷新页面不丢失
// 使用Fetch API + ReadableStream处理流式数据 const reader = response.body.getReader(); const decoder = new TextDecoder();
while (true) { const { done, value } = await reader.read(); if (done) break;
// 解析SSE格式数据 const chunk = decoder.decode(value); // 实时更新UI updateMessage(chunk); }

2\. 视频生成功能

image-20251001214800669
image-20251001214800669
  • 🎬 支持文字描述生成视频
  • 📊 实时显示生成进度（带动画进度条）
  • 🎥 内置视频播放器，即时预览
  • ⬇️ 一键下载生成的视频
⌛️ 任务正在队列中，请耐心等待... 🏃 进度：36.0% [████████░░░░░░░░░░] 🏃 进度：52.3% [████████████░░░░░░] 🏃 进度：79.7% [██████████████████] ✅ 视频生成成功！

3\. 响应式设计

image-20251001214816336
image-20251001214816336
  • 📱 完美支持移动端、平板、PC端
  • 🎯 自适应布局，不同屏幕尺寸最佳体验
  • 🌈 渐变色设计，视觉效果出众
  • ⚡ 流畅的动画效果和交互反馈

🔥 技术难点与解决方案

难点1: 流式响应处理

// 1. 服务端转发流式数据 response.data.on('data', (chunk) => { const formatted = `data: ${chunk}\n\n`; res.write(formatted); });
// 2. 前端解析SSE流 buffer += decoder.decode(value); const lines = buffer.split('\n'); for (const line of lines) { if (line.startsWith('data: ')) { const json = JSON.parse(line.slice(6)); handleChunk(json); } }

难点2: 进度显示优化

  • 实时解析进度信息（36% → 52% → 79%）
  • CSS动画进度条，视觉反馈
  • Emoji状态提示（⌛️ → 🏃 → ✅）

难点3: 环境变量安全

.gitignore

.env node_modules/

.env.example（提供模板）

SORA_API_KEY=your-api-key-here SORA_BASE_URL=https://apipro.maynor1024.live/

📊 项目数据

  • ⏱️ 开发时间：8小时
  • 💻 代码行数：~500行
  • 📦 依赖包：4个（express、axios、cors、dotenv）
  • 🎯 提交次数：5次
  • ⭐ GitHub Stars：期待你的支持！

🚀 快速开始

本地运行

1. 克隆项目

git clone https://github.com/xianyu110/sora.git cd sora

2. 安装依赖

npm install

3. 配置环境变量

cp .env.example .env

编辑.env，填入你的API密钥

4. 启动项目

npm run dev
访问 http://localhost:3000 即可使用！

在线体验

🌐 **在线地址：** https://sora-three-lake.vercel.app
（需要配置API密钥才能使用完整功能）

🚢 Vercel部署教程（手把手教学）

想要部署自己的Sora应用？跟着下面的步骤，5分钟搞定！

📋 准备工作

  1. **GitHub账号** \- 用于托管代码
  1. **Vercel账号** \- 访问 https://vercel.com 注册（可以直接用GitHub登录）
  1. **MaynorAPIPro API密钥** \- 访问 https://apipro.maynor1024.live/ 获取

🎬 详细步骤

  1. 访问项目地址：https://github.com/xianyu110/sora
  1. 点击右上角的 **“Fork”** 按钮
  1. 等待几秒钟，项目就复制到你的账号下了
home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fbadge%2FStep%25201-Fork%2520Repository- blue%3Fstyle%3Dfor-the-badge%26logo%3Dgithub&pos_id=img- EfeNVbxb-1759326863939)
  1. 访问 https://vercel.com/new
  1. 选择 **“Import Git Repository”**
  1. 找到你刚刚Fork的 `sora` 项目
  1. 点击 **“Import”** 按钮
home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fbadge%2FStep%25202-Import%2520to%2520Vercel- black%3Fstyle%3Dfor-the-badge%26logo%3Dvercel&pos_id=img- zOjjmQRL-1759326863939)
在Vercel的配置页面：
  1. 找到 **“Environment Variables”** 区域
  1. 添加以下两个变量：
变量名: SORA_API_KEY 值: 你的API密钥（从MaynorAPIPro获取）
变量名: SORA_BASE_URL 值: https://apipro.maynor1024.live/
┌─────────────────────────────────────────┐ │ Environment Variables │ ├─────────────────────────────────────────┤ │ SORA_API_KEY │ sk-xxxxxxxxxxxxx │ │ SORA_BASE_URL │ https://apipro... │ └─────────────────────────────────────────┘
  1. 点击 **“Add”** 按钮保存每个变量
home.csdnimg.cn/images/20230724024159.png?origin_url=https%3A%2F%2Fimg.shields.io%2Fbadge%2FStep%25203-Add%2520Environment%2520Variables- green%3Fstyle%3Dfor-the-badge%26logo%3Ddotenv&pos_id=img- KFxQUJ4v-1759326863940)
上一篇
SpringCloud微服务之Nacos集群搭建
下一篇
Sora2 邀请码自助领取系统 - 让AI视频创作触手可及
评论
Loading...
目录