3 | 
4 |
8 | 
9 |
12 | 
13 | 
46 | 
47 |
51 | 
52 |
57 | 
58 |
62 | 
63 |
69 | 
70 |
98 | 
99 |
128 | 赞助作者: 我的爱发电主页 129 |
130 | 131 | 132 | ### 🙌 致谢 133 | 感谢这些朋友对本项目做出的贡献: 134 | 135 | | | | 136 | |:-:|:-:| 137 | |
|
|
| 
|
144 |
145 | 小红书:
146 | [小红书：AI-GitHub](https://www.xiaohongshu.com/user/profile/65c44d1200000000090254fc)
147 |
148 | 推特:
149 | | [Geek](https://x.com/geekbb) | [AIGCLINK](https://x.com/aigclink) | [ilovelife](https://x.com/ilovek8s) | [ahhhhfs](https://x.com/abskoop)
150 |
151 | ### 🌟 Star History
152 |
153 | [](https://www.star-history.com/#hanshuaikang/AI-Media2Doc&Date)
154 |
155 |
--------------------------------------------------------------------------------
/README_EN.md:
--------------------------------------------------------------------------------
1 |
3 | 
4 |
9 | Based on AI large models, convert videos and audios to various document styles like Xiaohongshu/WeChat Official Account/Knowledge Notes/Mind Maps with one click. 10 |
11 | 12 |
13 |
14 |
18 |
19 |
67 |
68 |
74 | 
75 |
80 |
81 |
46 | 
47 |
55 | 
56 |
144 | {content} 以及思维导图的 json 内容，不然可能会导致生成失败。
24 | 37 | AI 视频图文创作助手是一款 Web 工具, 基于 AI 大模型, 一键将视频和音频转化为各种风格的文档, 无需登录注册, 前后端本地部署，以极低的成本体验 AI 视频/音频转风格文档服务。 38 |
39 |基于视频内容，向我提问吧
137 |
113 | 支持拖放或点击上传视频或MP3文件
114 | 支持格式：MP4、MOV、AVI、MKV、WebM、MP3，最大 100MB
115 |
根节点
", 49 | "expand": true, 50 | "uid": "430afa37-f0b5-4cf3-a270-d15028b413a9", 51 | "richText": true, 52 | "isActive": false 53 | }, 54 | "children": [ 55 | { 56 | "data": { 57 | "text": "二级节点
", 58 | "generalization": { 59 | "text": "概要
", 60 | "uid": "aebb0b2a-35fb-4ae6-a346-87706145bce5", 61 | "richText": true, 62 | "expand": true, 63 | "isActive": false 64 | }, 65 | "uid": "b11c529a-3944-4c2f-ba6d-0cd2101ba6ab", 66 | "richText": true, 67 | "expand": true, 68 | "isActive": false 69 | }, 70 | "children": [ 71 | { 72 | "data": { 73 | "text": "分支主题
", 74 | "uid": "52579e9c-5a75-4dd7-b0dd-b67dc2ee38ab", 75 | "richText": true, 76 | "expand": true, 77 | "isActive": false 78 | }, 79 | "children": [] 80 | }, 81 | { 82 | "data": { 83 | "text": "分支主题
", 84 | "uid": "d29ff394-03bd-4cf6-a5fa-a2f368f538d3", 85 | "richText": true, 86 | "expand": true, 87 | "isActive": false 88 | }, 89 | "children": [] 90 | } 91 | ] 92 | } 93 | ], 94 | "smmVersion": "0.13.1-fix.2" 95 | } 96 | ` 97 | } 98 | -------------------------------------------------------------------------------- /frontend/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import './style.css' 3 | import App from './App.vue' 4 | import ElementPlus from 'element-plus' 5 | import 'element-plus/dist/index.css' 6 | import './scroll-fix.css' // 添加这一行导入全局滚动修复样式 7 | import { LottieAnimation } from 'lottie-web-vue' 8 | 9 | const app = createApp(App) 10 | 11 | app.use(ElementPlus) 12 | 13 | app.component('LottieAnimation', LottieAnimation) // 正确注册全局组件 14 | 15 | app.mount('#app') 16 | -------------------------------------------------------------------------------- /frontend/src/scroll-fix.css: -------------------------------------------------------------------------------- 1 | /* 2 | 全局滚动修复样式 3 | 这个文件用于修复页面滚动问题，确保所有内容在默认缩放下都能显示 4 | */ 5 | 6 | html, 7 | body { 8 | scroll-behavior: smooth; 9 | overflow-anchor: auto; 10 | } 11 | 12 | #app { 13 | display: flex; 14 | flex-direction: column; 15 | min-height: 100%; 16 | height: auto; 17 | overflow-y: auto !important; 18 | overflow-anchor: auto; 19 | } 20 | 21 | .el-scrollbar, 22 | .el-scrollbar__wrap { 23 | height: auto !important; 24 | max-height: none !important; 25 | overflow-y: visible !important; 26 | } 27 | 28 | ::-webkit-scrollbar { 29 | width: 6px; 30 | height: 6px; 31 | } 32 | 33 | ::-webkit-scrollbar-thumb { 34 | background-color: rgba(144, 147, 153, 0.5); 35 | border-radius: 3px; 36 | } 37 | 38 | ::-webkit-scrollbar-track { 39 | background-color: transparent; 40 | } -------------------------------------------------------------------------------- /frontend/src/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | /* 全局重置和基础样式 */ 17 | * { 18 | box-sizing: border-box; 19 | margin: 0; 20 | padding: 0; 21 | } 22 | 23 | html, 24 | body { 25 | width: 100%; 26 | height: 100%; 27 | margin: 0; 28 | padding: 0; 29 | overflow-x: hidden; 30 | } 31 | 32 | a { 33 | font-weight: 500; 34 | color: #646cff; 35 | text-decoration: inherit; 36 | } 37 | 38 | a:hover { 39 | color: #535bf2; 40 | } 41 | 42 | body { 43 | margin: 0; 44 | display: flex; 45 | place-items: center; 46 | min-width: 320px; 47 | min-height: 100vh; 48 | } 49 | 50 | h1 { 51 | font-size: 3.2em; 52 | line-height: 1.1; 53 | } 54 | 55 | button { 56 | border-radius: 8px; 57 | border: 1px solid transparent; 58 | padding: 0.6em 1.2em; 59 | font-size: 1em; 60 | font-weight: 500; 61 | font-family: inherit; 62 | background-color: #1a1a1a; 63 | cursor: pointer; 64 | transition: border-color 0.25s; 65 | } 66 | 67 | button:hover { 68 | border-color: #646cff; 69 | } 70 | 71 | button:focus, 72 | button:focus-visible { 73 | outline: 4px auto -webkit-focus-ring-color; 74 | } 75 | 76 | .card { 77 | padding: 2em; 78 | } 79 | 80 | #app { 81 | max-width: 1280px; 82 | margin: 0 auto; 83 | padding: 2rem; 84 | text-align: center; 85 | width: 100%; 86 | min-height: 100vh; 87 | position: relative; 88 | display: flex; 89 | flex-direction: column; 90 | margin-left: 260px; 91 | /* 新增：为固定侧边栏预留空间 */ 92 | } 93 | 94 | /* 确保所有容器默认都是border-box盒模型 */ 95 | div, 96 | section, 97 | article, 98 | aside, 99 | header, 100 | footer, 101 | nav, 102 | main { 103 | box-sizing: border-box; 104 | } 105 | 106 | /* 添加流畅的滚动效果 */ 107 | html { 108 | scroll-behavior: smooth; 109 | } 110 | 111 | @media (prefers-color-scheme: light) { 112 | :root { 113 | color: #213547; 114 | background-color: #ffffff; 115 | } 116 | 117 | a:hover { 118 | color: #747bff; 119 | } 120 | 121 | button { 122 | background-color: #f9f9f9; 123 | } 124 | } -------------------------------------------------------------------------------- /frontend/src/utils/db.js: -------------------------------------------------------------------------------- 1 | import { openDB, deleteDB } from 'idb' 2 | 3 | const dbName = 'videoTasksDB' 4 | const dbVersion = 1 5 | 6 | let dbInstance = null 7 | 8 | export async function initDB() { 9 | if (dbInstance) return dbInstance 10 | 11 | try { 12 | dbInstance = await openDB(dbName, dbVersion, { 13 | upgrade(db) { 14 | // 创建基本数据存储 15 | const taskStore = db.createObjectStore('tasks', { keyPath: 'id', autoIncrement: true }) 16 | taskStore.createIndex('md5', 'md5', { unique: false }) // 非唯一，允许同一MD5有多个不同风格 17 | taskStore.createIndex('createdAt', 'createdAt', { unique: false }) 18 | taskStore.createIndex('fileName', 'fileName', { unique: false }) 19 | taskStore.createIndex('contentStyle', 'contentStyle', { unique: false }) 20 | taskStore.createIndex('md5_contentStyle', ['md5', 'contentStyle'], { unique: true }) 21 | } 22 | }) 23 | return dbInstance 24 | } catch (error) { 25 | console.error('数据库初始化失败:', error) 26 | throw error 27 | } 28 | } 29 | 30 | // 工具：序列化 transcriptionText 31 | function serializeTranscriptionText(val) { 32 | if (Array.isArray(val)) { 33 | try { 34 | return JSON.stringify(val) 35 | } catch { 36 | return '' 37 | } 38 | } 39 | return val 40 | } 41 | 42 | // 工具：反序列化 transcriptionText 43 | function deserializeTranscriptionText(val) { 44 | if (typeof val === 'string') { 45 | try { 46 | // 判断是否为 JSON 数组字符串 47 | const arr = JSON.parse(val) 48 | if (Array.isArray(arr) && arr.length && typeof arr[0] === 'object' && 'text' in arr[0]) { 49 | return arr 50 | } 51 | } catch { 52 | // 不是 JSON 字符串，直接返回原始字符串 53 | } 54 | } 55 | return val 56 | } 57 | 58 | export async function saveTask(taskData) { 59 | try { 60 | const db = await initDB() 61 | const taskToSave = { 62 | ...taskData, 63 | createdAt: new Date().toISOString(), 64 | contentStyle: taskData.contentStyle, 65 | transcriptionText: serializeTranscriptionText(taskData.transcriptionText) 66 | } 67 | const taskId = await db.add('tasks', taskToSave) 68 | 69 | // 检查并保留最新的10条记录 70 | await cleanupOldTasks(db); 71 | 72 | return taskId; // 返回 taskId 73 | } catch (error) { 74 | console.error('保存任务失败:', error) 75 | throw error 76 | } 77 | } 78 | 79 | // 新增：清理旧任务，只保留最新的10条记录 80 | async function cleanupOldTasks(db) { 81 | try { 82 | const MAX_TASKS = 10; 83 | // 按创建时间降序排列获取所有任务 84 | const allTasks = await db.getAllFromIndex('tasks', 'createdAt'); 85 | allTasks.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)); 86 | 87 | // 如果任务数超过10个，则删除较旧的任务 88 | if (allTasks.length > MAX_TASKS) { 89 | const tasksToDelete = allTasks.slice(MAX_TASKS); 90 | for (const task of tasksToDelete) { 91 | await db.delete('tasks', task.id); 92 | } 93 | console.log(`已清理 ${tasksToDelete.length} 条旧任务记录，保留最新的 ${MAX_TASKS} 条记录`); 94 | } 95 | } catch (error) { 96 | console.error('清理旧任务失败:', error); 97 | } 98 | } 99 | 100 | // 反序列化工具，批量处理任务数组 101 | function deserializeTasks(tasks) { 102 | return tasks.map(task => ({ 103 | ...task, 104 | transcriptionText: deserializeTranscriptionText(task.transcriptionText) 105 | })) 106 | } 107 | 108 | export async function getAllTasks() { 109 | try { 110 | const db = await initDB() 111 | const tasks = await db.getAllFromIndex('tasks', 'createdAt') 112 | return deserializeTasks(tasks) 113 | } catch (error) { 114 | console.error('获取任务列表失败:', error) 115 | return [] 116 | } 117 | } 118 | 119 | export async function getTaskByMd5(md5) { 120 | const db = await initDB() 121 | return db.getFromIndex('tasks', 'md5', md5) 122 | } 123 | 124 | 125 | export async function checkTaskExistsByMd5AndStyle(md5, contentStyle) { 126 | try { 127 | const db = await initDB() 128 | // 尝试使用组合索引查询 129 | try { 130 | const task = await db.getFromIndex('tasks', 'md5_contentStyle', [md5, contentStyle]) 131 | return !!task // 有结果返回true，否则返回false 132 | } catch (e) { 133 | console.warn('组合索引查询失败，回退到手动筛选:', e) 134 | const tasks = await db.getAllFromIndex('tasks', 'md5', md5) 135 | return tasks.some(task => task.contentStyle === contentStyle) 136 | } 137 | } catch (error) { 138 | console.error('检查任务失败:', error) 139 | throw error 140 | } 141 | } 142 | 143 | export const checkTaskExistsByMd5 = async (md5) => { 144 | try { 145 | const db = await initDB() 146 | const tasks = await db.getAllFromIndex('tasks', 'md5', md5) 147 | return tasks.length > 0 148 | } catch (error) { 149 | console.error('检查任务失败:', error) 150 | throw error 151 | } 152 | } 153 | 154 | export async function deleteTask(taskId) { 155 | try { 156 | const db = await initDB() 157 | await db.delete('tasks', taskId) 158 | return true 159 | } catch (error) { 160 | console.error('删除任务失败:', error) 161 | throw error 162 | } 163 | } 164 | 165 | export async function resetDatabase() { 166 | // 先关闭已有连接 167 | if (dbInstance) { 168 | dbInstance.close(); 169 | dbInstance = null; 170 | } 171 | 172 | try { 173 | // 删除整个数据库 174 | await deleteDB(dbName); 175 | console.log('数据库已删除'); 176 | 177 | // 重新初始化数据库 178 | dbInstance = await openDB(dbName, dbVersion, { 179 | upgrade(db) { 180 | // 创建全新的数据存储 181 | const taskStore = db.createObjectStore('tasks', { keyPath: 'id', autoIncrement: true }) 182 | taskStore.createIndex('md5', 'md5', { unique: false }) 183 | taskStore.createIndex('createdAt', 'createdAt', { unique: false }) 184 | taskStore.createIndex('fileName', 'fileName', { unique: false }) 185 | taskStore.createIndex('contentStyle', 'contentStyle', { unique: false }) 186 | taskStore.createIndex('md5_contentStyle', ['md5', 'contentStyle'], { unique: true }) 187 | 188 | console.log('数据库已重建'); 189 | } 190 | }) 191 | 192 | return true; 193 | } catch (error) { 194 | console.error('数据库重置失败:', error); 195 | return false; 196 | } 197 | } 198 | 199 | export async function getAnyTaskByMd5(md5) { 200 | try { 201 | const db = await initDB() 202 | const tasks = await db.getAllFromIndex('tasks', 'md5', md5) 203 | const result = tasks.length > 0 ? tasks[0] : null 204 | if (result) { 205 | result.transcriptionText = deserializeTranscriptionText(result.transcriptionText) 206 | } 207 | return result 208 | } catch (error) { 209 | console.error('根据MD5获取任务失败:', error) 210 | return null 211 | } 212 | } 213 | 214 | export async function getTaskByID(taskId) { 215 | try { 216 | const db = await initDB() 217 | const task = await db.get('tasks', taskId) 218 | if (task) { 219 | task.transcriptionText = deserializeTranscriptionText(task.transcriptionText) 220 | } 221 | return task 222 | } catch (error) { 223 | console.error('通过ID获取任务失败:', error) 224 | return null 225 | } 226 | } 227 | -------------------------------------------------------------------------------- /frontend/src/utils/eventBus.js: -------------------------------------------------------------------------------- 1 | import { reactive } from 'vue' 2 | 3 | export const eventBus = reactive({ 4 | handlers: {}, 5 | 6 | on(event, callback) { 7 | if (!this.handlers[event]) { 8 | this.handlers[event] = [] 9 | } 10 | this.handlers[event].push(callback) 11 | }, 12 | 13 | emit(event, ...args) { 14 | if (this.handlers[event]) { 15 | this.handlers[event].forEach(callback => callback(...args)) 16 | } 17 | }, 18 | 19 | off(event, callback) { 20 | if (this.handlers[event]) { 21 | if (callback) { 22 | this.handlers[event] = this.handlers[event].filter(cb => cb !== callback) 23 | } else { 24 | delete this.handlers[event] 25 | } 26 | } 27 | } 28 | }) 29 | -------------------------------------------------------------------------------- /frontend/src/utils/ffmpeg.js: -------------------------------------------------------------------------------- 1 | let ffmpeg = null 2 | let ffmpegLoaded = false 3 | let ffmpegLoading = false 4 | 5 | export const loadFFmpeg = async () => { 6 | if (ffmpegLoaded) return ffmpeg 7 | 8 | if (ffmpegLoading) { 9 | return new Promise((resolve) => { 10 | const checkLoaded = setInterval(() => { 11 | if (ffmpegLoaded) { 12 | clearInterval(checkLoaded) 13 | resolve(ffmpeg) 14 | } 15 | }, 100) 16 | }) 17 | } 18 | 19 | ffmpegLoading = true 20 | 21 | try { 22 | const script = document.createElement('script') 23 | script.src = 'https://unpkg.com/@ffmpeg/ffmpeg@0.10.1/dist/ffmpeg.min.js' 24 | document.head.appendChild(script) 25 | 26 | await new Promise((resolve) => { 27 | script.onload = resolve 28 | }) 29 | 30 | ffmpeg = FFmpeg.createFFmpeg({ 31 | log: true, 32 | progress: ({ ratio }) => { 33 | // 进度回调 34 | } 35 | }) 36 | 37 | await ffmpeg.load() 38 | ffmpegLoaded = true 39 | return ffmpeg 40 | 41 | } catch (error) { 42 | console.error('FFmpeg 加载错误:', error) 43 | throw error 44 | } finally { 45 | ffmpegLoading = false 46 | } 47 | } 48 | 49 | export const extractAudio = async (videoData) => { 50 | try { 51 | ffmpeg.FS('writeFile', 'input_video.mp4', videoData) 52 | await ffmpeg.run('-i', 'input_video.mp4', '-q:a', '0', '-map', 'a', 'output_audio.mp3') 53 | return ffmpeg.FS('readFile', 'output_audio.mp3') 54 | } catch (error) { 55 | console.error('音频提取失败:', error) 56 | throw error 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /frontend/src/utils/md5.js: -------------------------------------------------------------------------------- 1 | import SparkMD5 from 'spark-md5' 2 | 3 | /** 4 | * 计算文件或 ArrayBuffer 的 MD5 值 5 | * @param {File|ArrayBuffer|Uint8Array} file - 要计算 MD5 的文件或数据 6 | * @returns {Promise