From e2f37544731077371ed1169fdc73302bc3bc0863 Mon Sep 17 00:00:00 2001 From: rdmclin2 Date: Tue, 5 Nov 2024 21:44:54 +0800 Subject: [PATCH 1/2] chore: update md and i18n --- .i18nrc.js | 32 +- CHANGELOG.md | 416 ++++++------------ README.md | 14 +- README.zh-CN.md | 67 +-- contributing/Basic/Architecture.md | 45 ++ contributing/Basic/Chat-API.md | 160 +++++++ contributing/Basic/Contributing-Guidelines.md | 85 ++++ .../Basic/Feature-Development-Frontend.md | 126 ++++++ contributing/Basic/Folder-Structure.md | 21 + contributing/Basic/Intro.md | 113 +++++ contributing/Basic/Resources.md | 17 + contributing/Basic/Setup-Development.md | 69 +++ contributing/Basic/Test.md | 87 ++++ .../Internationalization/Add-New-Locale.md | 62 +++ .../Internationalization-Implementation.md | 115 +++++ .../State-Management-Intro.md | 212 +++++++++ .../State-Management-Intro.zh-CN.md | 14 +- .../State-Management-Selectors.md | 49 +++ docs/tts.md | 10 - package.json | 10 +- scripts/mdxWorkflow/index.ts | 48 ++ 21 files changed, 1428 insertions(+), 344 deletions(-) create mode 100644 contributing/Basic/Architecture.md create mode 100644 contributing/Basic/Chat-API.md create mode 100644 contributing/Basic/Contributing-Guidelines.md create mode 100644 contributing/Basic/Feature-Development-Frontend.md create mode 100644 contributing/Basic/Folder-Structure.md create mode 100644 contributing/Basic/Intro.md create mode 100644 contributing/Basic/Resources.md create mode 100644 contributing/Basic/Setup-Development.md create mode 100644 contributing/Basic/Test.md create mode 100644 contributing/Internationalization/Add-New-Locale.md create mode 100644 contributing/Internationalization/Internationalization-Implementation.md create mode 100644 contributing/State-Management/State-Management-Intro.md create mode 100644 contributing/State-Management/State-Management-Selectors.md delete mode 100644 docs/tts.md create mode 100644 scripts/mdxWorkflow/index.ts diff --git a/.i18nrc.js b/.i18nrc.js index 2db2d15e..34f55bd4 100644 --- a/.i18nrc.js +++ b/.i18nrc.js @@ -28,20 +28,20 @@ module.exports = defineConfig({ jsonMode: true, }, // 后续说明文档、技术文档等所需的国际化配置（暂时不需要） - // markdown: { - // // reference: '你需要保持 mdx 的组件格式，输出文本不需要在最外层包裹任何代码块语法', - // entry: ['./README.zh-CN.md', './contributing/**/*.zh-CN.md', './docs/**/*.zh-CN.mdx'], - // entryLocale: 'zh-CN', - // outputLocales: ['en-US'], - // exclude: ['./contributing/_Sidebar.md', './contributing/_Footer.md', './contributing/Home.md'], - // outputExtensions: (locale, { filePath }) => { - // if (filePath.includes('.mdx')) { - // if (locale === 'en-US') return '.mdx'; - // return `.${locale}.mdx`; - // } else { - // if (locale === 'en-US') return '.md'; - // return `.${locale}.md`; - // } - // }, - // }, + markdown: { + // reference: '你需要保持 mdx 的组件格式，输出文本不需要在最外层包裹任何代码块语法', + entry: ['./README.zh-CN.md', './contributing/**/*.zh-CN.md', './docs/**/*.zh-CN.mdx'], + entryLocale: 'zh-CN', + outputLocales: ['en-US'], + exclude: ['./contributing/_Sidebar.md', './contributing/_Footer.md', './contributing/Home.md'], + outputExtensions: (locale, { filePath }) => { + if (filePath.includes('.mdx')) { + if (locale === 'en-US') return '.mdx'; + return `.${locale}.mdx`; + } else { + if (locale === 'en-US') return '.md'; + return `.${locale}.md`; + } + }, + }, }); diff --git a/CHANGELOG.md b/CHANGELOG.md index 82fed801..a80a54ce 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,742 +2,604 @@ # Changelog -## [Version 0.30.0](https://github.com/lobehub/lobe-vidol/compare/v0.29.0...v0.30.0) -Released on **2024-10-05** +## [Version 0.30.0](https://github.com/lobehub/lobe-vidol/compare/v0.29.0...v0.30.0) +Released on **2024-10-05** #### ✨ Features - **misc**: Page top loading, 添加男性角色的 motion 预设. -
- -
Improvements and Fixes - - #### What's improved -* **misc**: Page top loading ([778075e](https://github.com/lobehub/lobe-vidol/commit/778075e)) -* **misc**: 添加男性角色的 motion 预设 ([6cc02e9](https://github.com/lobehub/lobe-vidol/commit/6cc02e9)) +- **misc**: Page top loading ([778075e](https://github.com/lobehub/lobe-vidol/commit/778075e)) +- **misc**: 添加男性角色的 motion 预设 ([6cc02e9](https://github.com/lobehub/lobe-vidol/commit/6cc02e9))
-
[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
-## [Version 0.29.0](https://github.com/lobehub/lobe-vidol/compare/v0.28.0...v0.29.0) -Released on **2024-09-25** +## [Version 0.29.0](https://github.com/lobehub/lobe-vidol/compare/v0.28.0...v0.29.0) +Released on **2024-09-25** #### ✨ Features - **misc**: 添加背景色. -
- -
Improvements and Fixes - - #### What's improved -* **misc**: 添加背景色 ([25c20cb](https://github.com/lobehub/lobe-vidol/commit/25c20cb)) +- **misc**: 添加背景色 ([25c20cb](https://github.com/lobehub/lobe-vidol/commit/25c20cb))
-
[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
-## [Version 0.28.0](https://github.com/lobehub/lobe-vidol/compare/v0.27.0...v0.28.0) -Released on **2024-09-22** +## [Version 0.28.0](https://github.com/lobehub/lobe-vidol/compare/v0.27.0...v0.28.0) +Released on **2024-09-22** #### ✨ Features - **misc**: 支持 openai o1. -
- -
Improvements and Fixes - - #### What's improved -* **misc**: 支持 openai o1 ([7d16ade](https://github.com/lobehub/lobe-vidol/commit/7d16ade)) +- **misc**: 支持 openai o1 ([7d16ade](https://github.com/lobehub/lobe-vidol/commit/7d16ade))
-
[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
-## [Version 0.27.0](https://github.com/lobehub/lobe-vidol/compare/v0.26.0...v0.27.0) -Released on **2024-09-18** +## [Version 0.27.0](https://github.com/lobehub/lobe-vidol/compare/v0.26.0...v0.27.0) +Released on **2024-09-18** #### ✨ Features - **misc**: Add model playing, 支持触摸响应. - #### 🐛 Bug Fixes - **misc**: Chat info error. -
- -
Improvements and Fixes - - #### What's improved -* **misc**: Add model playing ([4f66c31](https://github.com/lobehub/lobe-vidol/commit/4f66c31)) -* **misc**: 支持触摸响应 ([f5c8400](https://github.com/lobehub/lobe-vidol/commit/f5c8400)) - - +- **misc**: Add model playing ([4f66c31](https://github.com/lobehub/lobe-vidol/commit/4f66c31)) +- **misc**: 支持触摸响应 ([f5c8400](https://github.com/lobehub/lobe-vidol/commit/f5c8400)) #### What's fixed -* **misc**: Chat info error ([6b9f20f](https://github.com/lobehub/lobe-vidol/commit/6b9f20f)) +- **misc**: Chat info error ([6b9f20f](https://github.com/lobehub/lobe-vidol/commit/6b9f20f))
-
[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
-## [Version 0.26.0](https://github.com/lobehub/lobe-vidol/compare/v0.25.1...v0.26.0) -Released on **2024-08-27** +## [Version 0.26.0](https://github.com/lobehub/lobe-vidol/compare/v0.25.1...v0.26.0) +Released on **2024-08-27** #### ✨ Features - **misc**: Add vrm loading dom. -
- -
Improvements and Fixes - - #### What's improved -* **misc**: Add vrm loading dom ([7d1f049](https://github.com/lobehub/lobe-vidol/commit/7d1f049)) +- **misc**: Add vrm loading dom ([7d1f049](https://github.com/lobehub/lobe-vidol/commit/7d1f049))
-
[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
-### [Version 0.25.1](https://github.com/lobehub/lobe-vidol/compare/v0.25.0...v0.25.1) -Released on **2024-08-25** +### [Version 0.25.1](https://github.com/lobehub/lobe-vidol/compare/v0.25.0...v0.25.1) +Released on **2024-08-25** #### 🐛 Bug Fixes - **misc**: 默认注入主题. -
- -
Improvements and Fixes - - #### What's fixed -* **misc**: 默认注入主题 ([402f4c6](https://github.com/lobehub/lobe-vidol/commit/402f4c6)) +- **misc**: 默认注入主题 ([402f4c6](https://github.com/lobehub/lobe-vidol/commit/402f4c6))
-
[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
-## [Version 0.25.0](https://github.com/lobehub/lobe-vidol/compare/v0.24.0...v0.25.0) -Released on **2024-08-24** +## [Version 0.25.0](https://github.com/lobehub/lobe-vidol/compare/v0.24.0...v0.25.0) +Released on **2024-08-24** #### ✨ Features - **misc**: 添加舞蹈市场按钮 & 优化 dynamic 引入 panel. - #### 🐛 Bug Fixes - **misc**: 修复订阅按钮位移问题. -
- -
Improvements and Fixes - - #### What's improved -* **misc**: 添加舞蹈市场按钮 & 优化 dynamic 引入 panel ([5d0672b](https://github.com/lobehub/lobe-vidol/commit/5d0672b)) - - +- **misc**: 添加舞蹈市场按钮 & 优化 dynamic 引入 panel ([5d0672b](https://github.com/lobehub/lobe-vidol/commit/5d0672b)) #### What's fixed -* **misc**: 修复订阅按钮位移问题 ([5a2178c](https://github.com/lobehub/lobe-vidol/commit/5a2178c)) +- **misc**: 修复订阅按钮位移问题 ([5a2178c](https://github.com/lobehub/lobe-vidol/commit/5a2178c))
-
[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
-## [Version 0.24.0](https://github.com/lobehub/lobe-vidol/compare/v0.23.0...v0.24.0) -Released on **2024-08-05** +## [Version 0.24.0](https://github.com/lobehub/lobe-vidol/compare/v0.23.0...v0.24.0) +Released on **2024-08-05** #### ✨ Features - **misc**: Use viewer dance. - #### 🐛 Bug Fixes - **misc**: Dance player error, play error. -
- -
Improvements and Fixes - - #### What's improved -* **misc**: Use viewer dance ([0e57daa](https://github.com/lobehub/lobe-vidol/commit/0e57daa)) - - +- **misc**: Use viewer dance ([0e57daa](https://github.com/lobehub/lobe-vidol/commit/0e57daa)) #### What's fixed -* **misc**: Dance player error ([fccf0b6](https://github.com/lobehub/lobe-vidol/commit/fccf0b6)) -* **misc**: Play error ([a7646c2](https://github.com/lobehub/lobe-vidol/commit/a7646c2)) +- **misc**: Dance player error ([fccf0b6](https://github.com/lobehub/lobe-vidol/commit/fccf0b6)) +- **misc**: Play error ([a7646c2](https://github.com/lobehub/lobe-vidol/commit/a7646c2))
-
[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
-## [Version 0.23.0](https://github.com/lobehub/lobe-vidol/compare/v0.22.0...v0.23.0) -Released on **2024-08-04** +## [Version 0.23.0](https://github.com/lobehub/lobe-vidol/compare/v0.22.0...v0.23.0) +Released on **2024-08-04** #### ✨ Features - **misc**: Audio 统一使用 blob url, dance 文件统一使用 blob, model 统一使用 blob url, 添加 loadVMDAnimation.ts. -
- -
Improvements and Fixes - - #### What's improved -* **misc**: Audio 统一使用 blob url ([7ecc313](https://github.com/lobehub/lobe-vidol/commit/7ecc313)) -* **misc**: Dance 文件统一使用 blob ([11d55af](https://github.com/lobehub/lobe-vidol/commit/11d55af)) -* **misc**: Model 统一使用 blob url ([0b1d0a5](https://github.com/lobehub/lobe-vidol/commit/0b1d0a5)) -* **misc**: 添加 loadVMDAnimation.ts ([b629c6e](https://github.com/lobehub/lobe-vidol/commit/b629c6e)) +- **misc**: Audio 统一使用 blob url ([7ecc313](https://github.com/lobehub/lobe-vidol/commit/7ecc313)) +- **misc**: Dance 文件统一使用 blob ([11d55af](https://github.com/lobehub/lobe-vidol/commit/11d55af)) +- **misc**: Model 统一使用 blob url ([0b1d0a5](https://github.com/lobehub/lobe-vidol/commit/0b1d0a5)) +- **misc**: 添加 loadVMDAnimation.ts ([b629c6e](https://github.com/lobehub/lobe-vidol/commit/b629c6e))
-
[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
-## [Version 0.22.0](https://github.com/lobehub/lobe-vidol/compare/v0.21.0...v0.22.0) -Released on **2024-08-03** +## [Version 0.22.0](https://github.com/lobehub/lobe-vidol/compare/v0.21.0...v0.22.0) +Released on **2024-08-03** #### ✨ Features - **misc**: 添加重置舞蹈动作. -
- -
Improvements and Fixes - - #### What's improved -* **misc**: 添加重置舞蹈动作 ([054d94a](https://github.com/lobehub/lobe-vidol/commit/054d94a)) +- **misc**: 添加重置舞蹈动作 ([054d94a](https://github.com/lobehub/lobe-vidol/commit/054d94a))
-
[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
-## [Version 0.21.0](https://github.com/lobehub/lobe-vidol/compare/v0.20.0...v0.21.0) -Released on **2024-08-03** +## [Version 0.21.0](https://github.com/lobehub/lobe-vidol/compare/v0.20.0...v0.21.0) +Released on **2024-08-03** #### ✨ Features -- **misc**: 优化聊天记录页面, 优化舞蹈播放页面, 添加拍照功能, 添加舞蹈播放列表, 调整网站架构. - +- **misc**: 优化聊天记录页面，优化舞蹈播放页面，添加拍照功能，添加舞蹈播放列表，调整网站架构. #### 🐛 Bug Fixes - **misc**: List item height. -
- -
Improvements and Fixes - - #### What's improved -* **misc**: 优化聊天记录页面 ([b063ad5](https://github.com/lobehub/lobe-vidol/commit/b063ad5)) -* **misc**: 优化舞蹈播放页面 ([71e213c](https://github.com/lobehub/lobe-vidol/commit/71e213c)) -* **misc**: 添加拍照功能 ([6b2b0a7](https://github.com/lobehub/lobe-vidol/commit/6b2b0a7)) -* **misc**: 添加舞蹈播放列表 ([d72c6cd](https://github.com/lobehub/lobe-vidol/commit/d72c6cd)) -* **misc**: 调整网站架构 ([8a78dcc](https://github.com/lobehub/lobe-vidol/commit/8a78dcc)) - - +- **misc**: 优化聊天记录页面 ([b063ad5](https://github.com/lobehub/lobe-vidol/commit/b063ad5)) +- **misc**: 优化舞蹈播放页面 ([71e213c](https://github.com/lobehub/lobe-vidol/commit/71e213c)) +- **misc**: 添加拍照功能 ([6b2b0a7](https://github.com/lobehub/lobe-vidol/commit/6b2b0a7)) +- **misc**: 添加舞蹈播放列表 ([d72c6cd](https://github.com/lobehub/lobe-vidol/commit/d72c6cd)) +- **misc**: 调整网站架构 ([8a78dcc](https://github.com/lobehub/lobe-vidol/commit/8a78dcc)) #### What's fixed -* **misc**: List item height ([bb1e8e0](https://github.com/lobehub/lobe-vidol/commit/bb1e8e0)) +- **misc**: List item height ([bb1e8e0](https://github.com/lobehub/lobe-vidol/commit/bb1e8e0))
-
[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
-## [Version 0.20.0](https://github.com/lobehub/lobe-vidol/compare/v0.19.0...v0.20.0) -Released on **2024-08-01** +## [Version 0.20.0](https://github.com/lobehub/lobe-vidol/compare/v0.19.0...v0.20.0) +Released on **2024-08-01** #### ✨ Features -- **misc**: Add posture bind, add posturelist, 将动作库设置为固定, 支持 gpt-4o-mini, 支持设置触摸列表, 添加 mixamo animation, 添加 mixamo 脚本处理, 添加不同性别的动作列表, 添加侧边栏模式，去掉 video 切换, 添加动作与舞蹈, 添加动作库, 添加动作库, 添加动作库下载, 添加动作类别筛选, 添加姿势, 添加播放列表空状态, 添加男性动作, 添加男性姿势, 默认关闭侧边栏 & 打开消息栏. - +- **misc**: Add posture bind, add posturelist, 将动作库设置为固定，支持 gpt-4o-mini, 支持设置触摸列表，添加 mixamo animation, 添加 mixamo 脚本处理，添加不同性别的动作列表，添加侧边栏模式，去掉 video 切换，添加动作与舞蹈，添加动作库，添加动作库，添加动作库下载，添加动作类别筛选，添加姿势，添加播放列表空状态，添加男性动作，添加男性姿势，默认关闭侧边栏 & 打开消息栏. #### 🐛 Bug Fixes - **misc**: Vrm model bind, vrm model bind, 动作列表描述 .... -
- -
Improvements and Fixes - - #### What's improved -* **misc**: Add posture bind ([d0cf78e](https://github.com/lobehub/lobe-vidol/commit/d0cf78e)) -* **misc**: Add posturelist ([0989334](https://github.com/lobehub/lobe-vidol/commit/0989334)) -* **misc**: 将动作库设置为固定 ([87862a9](https://github.com/lobehub/lobe-vidol/commit/87862a9)) -* **misc**: 支持 gpt-4o-mini ([4cfed2f](https://github.com/lobehub/lobe-vidol/commit/4cfed2f)) -* **misc**: 支持设置触摸列表 ([1d83f3b](https://github.com/lobehub/lobe-vidol/commit/1d83f3b)) -* **misc**: 添加 mixamo animation ([13bd91d](https://github.com/lobehub/lobe-vidol/commit/13bd91d)) -* **misc**: 添加 mixamo 脚本处理 ([e434049](https://github.com/lobehub/lobe-vidol/commit/e434049)) -* **misc**: 添加不同性别的动作列表 ([bfed1a8](https://github.com/lobehub/lobe-vidol/commit/bfed1a8)) -* **misc**: 添加侧边栏模式，去掉 video 切换 ([6bd66a2](https://github.com/lobehub/lobe-vidol/commit/6bd66a2)) -* **misc**: 添加动作与舞蹈 ([cd04f30](https://github.com/lobehub/lobe-vidol/commit/cd04f30)) -* **misc**: 添加动作库 ([16ca334](https://github.com/lobehub/lobe-vidol/commit/16ca334)) -* **misc**: 添加动作库 ([e5854e2](https://github.com/lobehub/lobe-vidol/commit/e5854e2)) -* **misc**: 添加动作库下载 ([8c4dc77](https://github.com/lobehub/lobe-vidol/commit/8c4dc77)) -* **misc**: 添加动作类别筛选 ([a4bffcf](https://github.com/lobehub/lobe-vidol/commit/a4bffcf)) -* **misc**: 添加姿势 ([9450400](https://github.com/lobehub/lobe-vidol/commit/9450400)) -* **misc**: 添加播放列表空状态 ([9338025](https://github.com/lobehub/lobe-vidol/commit/9338025)) -* **misc**: 添加男性动作 ([d7cc89b](https://github.com/lobehub/lobe-vidol/commit/d7cc89b)) -* **misc**: 添加男性姿势 ([b0e86c6](https://github.com/lobehub/lobe-vidol/commit/b0e86c6)) -* **misc**: 默认关闭侧边栏 & 打开消息栏 ([ebeb74f](https://github.com/lobehub/lobe-vidol/commit/ebeb74f)) - - +- **misc**: Add posture bind ([d0cf78e](https://github.com/lobehub/lobe-vidol/commit/d0cf78e)) +- **misc**: Add posturelist ([0989334](https://github.com/lobehub/lobe-vidol/commit/0989334)) +- **misc**: 将动作库设置为固定 ([87862a9](https://github.com/lobehub/lobe-vidol/commit/87862a9)) +- **misc**: 支持 gpt-4o-mini ([4cfed2f](https://github.com/lobehub/lobe-vidol/commit/4cfed2f)) +- **misc**: 支持设置触摸列表 ([1d83f3b](https://github.com/lobehub/lobe-vidol/commit/1d83f3b)) +- **misc**: 添加 mixamo animation ([13bd91d](https://github.com/lobehub/lobe-vidol/commit/13bd91d)) +- **misc**: 添加 mixamo 脚本处理 ([e434049](https://github.com/lobehub/lobe-vidol/commit/e434049)) +- **misc**: 添加不同性别的动作列表 ([bfed1a8](https://github.com/lobehub/lobe-vidol/commit/bfed1a8)) +- **misc**: 添加侧边栏模式，去掉 video 切换 ([6bd66a2](https://github.com/lobehub/lobe-vidol/commit/6bd66a2)) +- **misc**: 添加动作与舞蹈 ([cd04f30](https://github.com/lobehub/lobe-vidol/commit/cd04f30)) +- **misc**: 添加动作库 ([16ca334](https://github.com/lobehub/lobe-vidol/commit/16ca334)) +- **misc**: 添加动作库 ([e5854e2](https://github.com/lobehub/lobe-vidol/commit/e5854e2)) +- **misc**: 添加动作库下载 ([8c4dc77](https://github.com/lobehub/lobe-vidol/commit/8c4dc77)) +- **misc**: 添加动作类别筛选 ([a4bffcf](https://github.com/lobehub/lobe-vidol/commit/a4bffcf)) +- **misc**: 添加姿势 ([9450400](https://github.com/lobehub/lobe-vidol/commit/9450400)) +- **misc**: 添加播放列表空状态 ([9338025](https://github.com/lobehub/lobe-vidol/commit/9338025)) +- **misc**: 添加男性动作 ([d7cc89b](https://github.com/lobehub/lobe-vidol/commit/d7cc89b)) +- **misc**: 添加男性姿势 ([b0e86c6](https://github.com/lobehub/lobe-vidol/commit/b0e86c6)) +- **misc**: 默认关闭侧边栏 & 打开消息栏 ([ebeb74f](https://github.com/lobehub/lobe-vidol/commit/ebeb74f)) #### What's fixed -* **misc**: Vrm model bind ([52a0052](https://github.com/lobehub/lobe-vidol/commit/52a0052)) -* **misc**: Vrm model bind ([2979b51](https://github.com/lobehub/lobe-vidol/commit/2979b51)) -* **misc**: 动作列表描述 ... ([35cfc04](https://github.com/lobehub/lobe-vidol/commit/35cfc04)) +- **misc**: Vrm model bind ([52a0052](https://github.com/lobehub/lobe-vidol/commit/52a0052)) +- **misc**: Vrm model bind ([2979b51](https://github.com/lobehub/lobe-vidol/commit/2979b51)) +- **misc**: 动作列表描述 ... ([35cfc04](https://github.com/lobehub/lobe-vidol/commit/35cfc04))
-
[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
-## [Version 0.19.0](https://github.com/lobehub/lobe-vidol/compare/v0.18.0...v0.19.0) -Released on **2024-07-15** +## [Version 0.19.0](https://github.com/lobehub/lobe-vidol/compare/v0.18.0...v0.19.0) +Released on **2024-07-15** #### ✨ Features -- **misc**: 添加角色设定模板, 添加角色设定模板翻译. - +- **misc**: 添加角色设定模板，添加角色设定模板翻译. #### 🐛 Bug Fixes -- **misc**: 修复上传问题和语言切换问题, 修复订阅下载和删除角色时的体验. - +- **misc**: 修复上传问题和语言切换问题，修复订阅下载和删除角色时的体验.
- -
Improvements and Fixes - - #### What's improved -* **misc**: 添加角色设定模板 ([e097d91](https://github.com/lobehub/lobe-vidol/commit/e097d91)) -* **misc**: 添加角色设定模板翻译 ([bfe5dbe](https://github.com/lobehub/lobe-vidol/commit/bfe5dbe)) - - +- **misc**: 添加角色设定模板 ([e097d91](https://github.com/lobehub/lobe-vidol/commit/e097d91)) +- **misc**: 添加角色设定模板翻译 ([bfe5dbe](https://github.com/lobehub/lobe-vidol/commit/bfe5dbe)) #### What's fixed -* **misc**: 修复上传问题和语言切换问题 ([2259ea2](https://github.com/lobehub/lobe-vidol/commit/2259ea2)) -* **misc**: 修复订阅下载和删除角色时的体验 ([cf9e64e](https://github.com/lobehub/lobe-vidol/commit/cf9e64e)) +- **misc**: 修复上传问题和语言切换问题 ([2259ea2](https://github.com/lobehub/lobe-vidol/commit/2259ea2)) +- **misc**: 修复订阅下载和删除角色时的体验 ([cf9e64e](https://github.com/lobehub/lobe-vidol/commit/cf9e64e))
-
[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
-## [Version 0.18.0](https://github.com/lobehub/lobe-vidol/compare/v0.17.1...v0.18.0) -Released on **2024-07-14** +## [Version 0.18.0](https://github.com/lobehub/lobe-vidol/compare/v0.17.1...v0.18.0) +Released on **2024-07-14** #### ✨ Features -- **misc**: Settings 添加触控全局配置, support touch list, 添加 touch setting, 添加 touch setting. - +- **misc**: Settings 添加触控全局配置，support touch list, 添加 touch setting, 添加 touch setting.
- -
Improvements and Fixes - - #### What's improved -* **misc**: Settings 添加触控全局配置 ([4de71db](https://github.com/lobehub/lobe-vidol/commit/4de71db)) -* **misc**: Support touch list ([c33ee7d](https://github.com/lobehub/lobe-vidol/commit/c33ee7d)) -* **misc**: 添加 touch setting ([3b0fe95](https://github.com/lobehub/lobe-vidol/commit/3b0fe95)) -* **misc**: 添加 touch setting ([d196b78](https://github.com/lobehub/lobe-vidol/commit/d196b78)) +- **misc**: Settings 添加触控全局配置 ([4de71db](https://github.com/lobehub/lobe-vidol/commit/4de71db)) +- **misc**: Support touch list ([c33ee7d](https://github.com/lobehub/lobe-vidol/commit/c33ee7d)) +- **misc**: 添加 touch setting ([3b0fe95](https://github.com/lobehub/lobe-vidol/commit/3b0fe95)) +- **misc**: 添加 touch setting ([d196b78](https://github.com/lobehub/lobe-vidol/commit/d196b78))
-
[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
-### [Version 0.17.1](https://github.com/lobehub/lobe-vidol/compare/v0.17.0...v0.17.1) -Released on **2024-07-11** +### [Version 0.17.1](https://github.com/lobehub/lobe-vidol/compare/v0.17.0...v0.17.1) +Released on **2024-07-11** #### 🐛 Bug Fixes -- **misc**: 修复多语言未加载问题, 修复多语言未加载问题, 修复多语言未加载问题. - +- **misc**: 修复多语言未加载问题，修复多语言未加载问题，修复多语言未加载问题.
- -
Improvements and Fixes - - #### What's fixed -* **misc**: 修复多语言未加载问题 ([0ec684b](https://github.com/lobehub/lobe-vidol/commit/0ec684b)) -* **misc**: 修复多语言未加载问题 ([848da10](https://github.com/lobehub/lobe-vidol/commit/848da10)) -* **misc**: 修复多语言未加载问题 ([23118dc](https://github.com/lobehub/lobe-vidol/commit/23118dc)) +- **misc**: 修复多语言未加载问题 ([0ec684b](https://github.com/lobehub/lobe-vidol/commit/0ec684b)) +- **misc**: 修复多语言未加载问题 ([848da10](https://github.com/lobehub/lobe-vidol/commit/848da10)) +- **misc**: 修复多语言未加载问题 ([23118dc](https://github.com/lobehub/lobe-vidol/commit/23118dc))
-
[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
-## [Version 0.17.0](https://github.com/lobehub/lobe-vidol/compare/v0.16.0...v0.17.0) -Released on **2024-07-09** +## [Version 0.17.0](https://github.com/lobehub/lobe-vidol/compare/v0.16.0...v0.17.0) +Released on **2024-07-09** #### ✨ Features - **misc**: Add llm i18n, 添加语言设置存储. -
- -
Improvements and Fixes - - #### What's improved -* **misc**: Add llm i18n ([16c3a95](https://github.com/lobehub/lobe-vidol/commit/16c3a95)) -* **misc**: 添加语言设置存储 ([48ae825](https://github.com/lobehub/lobe-vidol/commit/48ae825)) +- **misc**: Add llm i18n ([16c3a95](https://github.com/lobehub/lobe-vidol/commit/16c3a95)) +- **misc**: 添加语言设置存储 ([48ae825](https://github.com/lobehub/lobe-vidol/commit/48ae825))
-
[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
-## [Version 0.16.0](https://github.com/lobehub/lobe-vidol/compare/v0.15.0...v0.16.0) -Released on **2024-07-08** +## [Version 0.16.0](https://github.com/lobehub/lobe-vidol/compare/v0.15.0...v0.16.0) +Released on **2024-07-08** #### ✨ Features -- **misc**: Upload avatar with cover, 迁移 voice 表单, 迁移表单到 json 表单，设计角色设定布局. - +- **misc**: Upload avatar with cover, 迁移 voice 表单，迁移表单到 json 表单，设计角色设定布局. #### 🐛 Bug Fixes - **misc**: Duplicate version of remark, i18n problem. -
- -
Improvements and Fixes - - #### What's improved -* **misc**: Upload avatar with cover ([28273ba](https://github.com/lobehub/lobe-vidol/commit/28273ba)) -* **misc**: 迁移 voice 表单 ([c5ad9bf](https://github.com/lobehub/lobe-vidol/commit/c5ad9bf)) -* **misc**: 迁移表单到 json 表单，设计角色设定布局 ([0ca3192](https://github.com/lobehub/lobe-vidol/commit/0ca3192)) - - +- **misc**: Upload avatar with cover ([28273ba](https://github.com/lobehub/lobe-vidol/commit/28273ba)) +- **misc**: 迁移 voice 表单 ([c5ad9bf](https://github.com/lobehub/lobe-vidol/commit/c5ad9bf)) +- **misc**: 迁移表单到 json 表单，设计角色设定布局 ([0ca3192](https://github.com/lobehub/lobe-vidol/commit/0ca3192)) #### What's fixed -* **misc**: Duplicate version of remark ([c8d89d6](https://github.com/lobehub/lobe-vidol/commit/c8d89d6)) -* **misc**: I18n problem ([bafdf39](https://github.com/lobehub/lobe-vidol/commit/bafdf39)) +- **misc**: Duplicate version of remark ([c8d89d6](https://github.com/lobehub/lobe-vidol/commit/c8d89d6)) +- **misc**: I18n problem ([bafdf39](https://github.com/lobehub/lobe-vidol/commit/bafdf39))
-
[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
-## [Version 0.15.0](https://github.com/lobehub/lobe-vidol/compare/v0.14.0...v0.15.0) -Released on **2024-07-08** +## [Version 0.15.0](https://github.com/lobehub/lobe-vidol/compare/v0.14.0...v0.15.0) +Released on **2024-07-08** #### ✨ Features -- **misc**: Add chat file i18n, add componets file i18n, add constant about i18n, add i18n default, add i18n language file, add i18next, add jest file, add judge environment utils, add my file i18n, add role file i18n, add test file, i18n-cli config file, 更新i18n相关依赖. - +- **misc**: Add chat file i18n, add componets file i18n, add constant about i18n, add i18n default, add i18n language file, add i18next, add jest file, add judge environment utils, add my file i18n, add role file i18n, add test file, i18n-cli config file, 更新 i18n 相关依赖.
- -
Improvements and Fixes - - #### What's improved -* **misc**: Add chat file i18n ([21ec05c](https://github.com/lobehub/lobe-vidol/commit/21ec05c)) -* **misc**: Add componets file i18n ([96ad19f](https://github.com/lobehub/lobe-vidol/commit/96ad19f)) -* **misc**: Add constant about i18n ([b8efb5e](https://github.com/lobehub/lobe-vidol/commit/b8efb5e)) -* **misc**: Add i18n default ([e4ef91e](https://github.com/lobehub/lobe-vidol/commit/e4ef91e)) -* **misc**: Add i18n language file ([27b57e4](https://github.com/lobehub/lobe-vidol/commit/27b57e4)) -* **misc**: Add i18next ([c19f4c3](https://github.com/lobehub/lobe-vidol/commit/c19f4c3)) -* **misc**: Add jest file ([65cd766](https://github.com/lobehub/lobe-vidol/commit/65cd766)) -* **misc**: Add judge environment utils ([08a8d4c](https://github.com/lobehub/lobe-vidol/commit/08a8d4c)) -* **misc**: Add my file i18n ([12128ff](https://github.com/lobehub/lobe-vidol/commit/12128ff)) -* **misc**: Add role file i18n ([66bb7d4](https://github.com/lobehub/lobe-vidol/commit/66bb7d4)) -* **misc**: Add test file ([01d8f39](https://github.com/lobehub/lobe-vidol/commit/01d8f39)) -* **misc**: I18n-cli config file ([6345b7c](https://github.com/lobehub/lobe-vidol/commit/6345b7c)) -* **misc**: 更新 i18n 相关依赖 ([cf54e7e](https://github.com/lobehub/lobe-vidol/commit/cf54e7e)) +- **misc**: Add chat file i18n ([21ec05c](https://github.com/lobehub/lobe-vidol/commit/21ec05c)) +- **misc**: Add componets file i18n ([96ad19f](https://github.com/lobehub/lobe-vidol/commit/96ad19f)) +- **misc**: Add constant about i18n ([b8efb5e](https://github.com/lobehub/lobe-vidol/commit/b8efb5e)) +- **misc**: Add i18n default ([e4ef91e](https://github.com/lobehub/lobe-vidol/commit/e4ef91e)) +- **misc**: Add i18n language file ([27b57e4](https://github.com/lobehub/lobe-vidol/commit/27b57e4)) +- **misc**: Add i18next ([c19f4c3](https://github.com/lobehub/lobe-vidol/commit/c19f4c3)) +- **misc**: Add jest file ([65cd766](https://github.com/lobehub/lobe-vidol/commit/65cd766)) +- **misc**: Add judge environment utils ([08a8d4c](https://github.com/lobehub/lobe-vidol/commit/08a8d4c)) +- **misc**: Add my file i18n ([12128ff](https://github.com/lobehub/lobe-vidol/commit/12128ff)) +- **misc**: Add role file i18n ([66bb7d4](https://github.com/lobehub/lobe-vidol/commit/66bb7d4)) +- **misc**: Add test file ([01d8f39](https://github.com/lobehub/lobe-vidol/commit/01d8f39)) +- **misc**: I18n-cli config file ([6345b7c](https://github.com/lobehub/lobe-vidol/commit/6345b7c)) +- **misc**: 更新 i18n 相关依赖 ([cf54e7e](https://github.com/lobehub/lobe-vidol/commit/cf54e7e))
-
[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
-## [Version 0.14.0](https://github.com/lobehub/lobe-vidol/compare/v0.13.0...v0.14.0) -Released on **2024-07-07** +## [Version 0.14.0](https://github.com/lobehub/lobe-vidol/compare/v0.13.0...v0.14.0) +Released on **2024-07-07** #### ✨ Features -- **misc**: 上传封面, 成功上传文件到 S3, 添加 Agent 大模型参数, 添加 required 标签 & 抽取 base64ToFile 方法, 添加 trpc upload 调用接口, 添加 trpc upload 调用接口, 添加 trpc upload 调用接口, 添加 useUploadAgent 方法上传角色文件, 添加更多配置参数, 添加模型分类. - +- **misc**: 上传封面，成功上传文件到 S3, 添加 Agent 大模型参数，添加 required 标签 & 抽取 base64ToFile 方法，添加 trpc upload 调用接口，添加 trpc upload 调用接口，添加 trpc upload 调用接口，添加 useUploadAgent 方法上传角色文件，添加更多配置参数，添加模型分类. #### 🐛 Bug Fixes - **misc**: Axios upload error, build error, numeral type error, 文件上传处理. -
- -
Improvements and Fixes - - #### What's improved -* **misc**: 上传封面 ([5291b97](https://github.com/lobehub/lobe-vidol/commit/5291b97)) -* **misc**: 成功上传文件到 S3 ([66fad94](https://github.com/lobehub/lobe-vidol/commit/66fad94)) -* **misc**: 添加 Agent 大模型参数 ([6ca10ce](https://github.com/lobehub/lobe-vidol/commit/6ca10ce)) -* **misc**: 添加 required 标签 & 抽取 base64ToFile 方法 ([4b7d288](https://github.com/lobehub/lobe-vidol/commit/4b7d288)) -* **misc**: 添加 trpc upload 调用接口 ([2941823](https://github.com/lobehub/lobe-vidol/commit/2941823)) -* **misc**: 添加 trpc upload 调用接口 ([73f149a](https://github.com/lobehub/lobe-vidol/commit/73f149a)) -* **misc**: 添加 trpc upload 调用接口 ([6892099](https://github.com/lobehub/lobe-vidol/commit/6892099)) -* **misc**: 添加 useUploadAgent 方法上传角色文件 ([8c7112e](https://github.com/lobehub/lobe-vidol/commit/8c7112e)) -* **misc**: 添加更多配置参数 ([146a5c1](https://github.com/lobehub/lobe-vidol/commit/146a5c1)) -* **misc**: 添加模型分类 ([a75de1b](https://github.com/lobehub/lobe-vidol/commit/a75de1b)) - - +- **misc**: 上传封面 ([5291b97](https://github.com/lobehub/lobe-vidol/commit/5291b97)) +- **misc**: 成功上传文件到 S3 ([66fad94](https://github.com/lobehub/lobe-vidol/commit/66fad94)) +- **misc**: 添加 Agent 大模型参数 ([6ca10ce](https://github.com/lobehub/lobe-vidol/commit/6ca10ce)) +- **misc**: 添加 required 标签 & 抽取 base64ToFile 方法 ([4b7d288](https://github.com/lobehub/lobe-vidol/commit/4b7d288)) +- **misc**: 添加 trpc upload 调用接口 ([2941823](https://github.com/lobehub/lobe-vidol/commit/2941823)) +- **misc**: 添加 trpc upload 调用接口 ([73f149a](https://github.com/lobehub/lobe-vidol/commit/73f149a)) +- **misc**: 添加 trpc upload 调用接口 ([6892099](https://github.com/lobehub/lobe-vidol/commit/6892099)) +- **misc**: 添加 useUploadAgent 方法上传角色文件 ([8c7112e](https://github.com/lobehub/lobe-vidol/commit/8c7112e)) +- **misc**: 添加更多配置参数 ([146a5c1](https://github.com/lobehub/lobe-vidol/commit/146a5c1)) +- **misc**: 添加模型分类 ([a75de1b](https://github.com/lobehub/lobe-vidol/commit/a75de1b)) #### What's fixed -* **misc**: Axios upload error ([fc70a3d](https://github.com/lobehub/lobe-vidol/commit/fc70a3d)) -* **misc**: Build error ([e64fdda](https://github.com/lobehub/lobe-vidol/commit/e64fdda)) -* **misc**: Numeral type error ([73b1b48](https://github.com/lobehub/lobe-vidol/commit/73b1b48)) -* **misc**: 文件上传处理 ([7c2822c](https://github.com/lobehub/lobe-vidol/commit/7c2822c)) +- **misc**: Axios upload error ([fc70a3d](https://github.com/lobehub/lobe-vidol/commit/fc70a3d)) +- **misc**: Build error ([e64fdda](https://github.com/lobehub/lobe-vidol/commit/e64fdda)) +- **misc**: Numeral type error ([73b1b48](https://github.com/lobehub/lobe-vidol/commit/73b1b48)) +- **misc**: 文件上传处理 ([7c2822c](https://github.com/lobehub/lobe-vidol/commit/7c2822c))
-
[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top) diff --git a/README.md b/README.md index 5e2c2686..2cf96ad9 100644 --- a/README.md +++ b/README.md @@ -39,6 +39,10 @@ Experience the magic of virtual idol creation with Lobe Vidol, enjoy the eleganc - [👋🏻 Getting Started & Join Our Community](#-getting-started--join-our-community) - [✨ Features](#-features) + - [1.🗣️ **Smooth Conversation Experience**](#1️-smooth-conversation-experience) + - [2. 💎 **Exquisite UI Design**](#2--exquisite-ui-design) + - [3. 💨 **Vroid Model Preview**](#3--vroid-model-preview) + - [4. 🎇 **MMD Dance Support**](#4--mmd-dance-support) - [📦 Ecosystem](#-ecosystem) - [⌨️ Local Development](#️-local-development) - [🤝 Contributing](#-contributing) @@ -79,27 +83,29 @@ Please be aware that LobeVidol is currently under active development, and feedba ## ✨ Features ### 1.🗣️ **Smooth Conversation Experience** + Fluid responses ensure a smooth conversation experience. It fully supports Markdown rendering, including code highlighting, LaTex formulas and more. Snipaste_2024-04-23_23-47-02 - ### 2. 💎 **Exquisite UI Design** + With a carefully designed interface, it offers an elegant appearance and smooth interaction. It supports light and dark themes. PWA support provides a more native-like experience; Snipaste_2024-04-23_23-48-56 ### 3. 💨 **Vroid Model Preview** + Using the Vroid Editor, you can create and upload your own virtual idol to the website, play with them; ![324259872-113e4882-6710-4d81-a04f-a407989f947d](https://github.com/lobehub/lobe-vidol/assets/4705237/c3cf87c3-f8c0-49ef-b966-e451e2fbf583) ### 4. 🎇 **MMD Dance Support** + With the support of mmd-parser, you can play vmd files with your favarite idol; Just Dance! Snipaste_2024-04-23_23-43-21 -
[![][back-to-top]](#readme-top) @@ -282,8 +288,8 @@ This project is [MIT](./LICENSE) licensed. [pr-welcome-link]: https://github.com/lobehub/lobe-vidol/pulls [pr-welcome-shield]: https://img.shields.io/badge/%F0%9F%A4%AF%20PR%20WELCOME-%E2%86%92-ffcb47?labelColor=black&style=for-the-badge [profile-link]: https://github.com/lobehub -[sponsor-link]: https://opencollective.com/lobehub 'Become 🩷 LobeHub Sponsor' +[sponsor-link]: https://opencollective.com/lobehub "Become 🩷 LobeHub Sponsor" [sponsor-shield]: https://img.shields.io/badge/-Sponsor%20LobeHub-f04f88?logo=opencollective&logoColor=white&style=flat-square [vercel-link]: https://vidol.lobehub.com [vercel-shield]: https://img.shields.io/website?down_message=offline&label=vercel&labelColor=black&logo=vercel&style=flat-square&up_message=online&url=https%3A%2F%2Fvidol.lobehub.com -[vercel-shield-badge]: https://img.shields.io/website?down_message=offline&label=try%20lobechat&labelColor=black&logo=vercel&style=for-the-badge&up_message=online&url=https%3A%2F%2Fvidol.lobehub.com \ No newline at end of file +[vercel-shield-badge]: https://img.shields.io/website?down_message=offline&label=try%20lobechat&labelColor=black&logo=vercel&style=for-the-badge&up_message=online&url=https%3A%2F%2Fvidol.lobehub.com diff --git a/README.zh-CN.md b/README.zh-CN.md index 1e547c8f..87ecd57e 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -6,7 +6,7 @@ # Lobe Vidol -与Lobe Vidol一起体验虚拟偶像创作的魔力，享受我们精致的UI设计，支持MMD的舞蹈内容，并能与人物进行流畅的对话—所有这些功能都集成在一个无缝的平台上。 +与 Lobe Vidol 一起体验虚拟偶像创作的魔力，享受我们精致的 UI 设计，支持 MMD 的舞蹈内容，并能与人物进行流畅的对话 — 所有这些功能都集成在一个无缝的平台上。 每个人都可以创造虚拟偶像 @@ -39,8 +39,19 @@ - [👋🏻 开始使用 & 交流](#-开始使用--交流) - [✨ 特性一览](#-特性一览) + - [1. **流畅的对话体验**](#1-流畅的对话体验) + - [2. **背景情境设定**](#2-背景情境设定) + - [3. **丰富的动作和姿式库**](#3-丰富的动作和姿式库) + - [4. **精致 UI 设计**](#4-精致-ui-设计) + - [5. **丰富的角色编辑体验**](#5-丰富的角色编辑体验) + - [6. **MMD 舞蹈支持**](#6-mmd-舞蹈支持) + - [7. \*\* PMX 舞台加载功能 \*\*](#7--pmx-舞台加载功能-) + - [8. \*\* 触摸响应功能 \*\*](#8--触摸响应功能-) + - [9. \*\* 角色市场 \*\*](#9--角色市场-) + - [10. \*\* 舞蹈市场 \*\*](#10--舞蹈市场-) + - [11. \*\* TTS & STT 语音会话 \*\*](#11--tts--stt-语音会话-) - [📦 生态](#-生态) -- [⌨️ 本地开发](#-本地开发) +- [⌨️ 本地开发](#️-本地开发) - [🤝 参与贡献](#-参与贡献) - [🩷 社区赞助](#-社区赞助) - [🔗 更多工具](#-更多工具) @@ -53,10 +64,10 @@ ## 👋🏻 开始使用 & 交流 -LobeVidol 目前正在积极开发中，有任何需求或者问题，欢迎提交 [issues][issues-link] +LobeVidol 目前正在积极开发中，有任何需求或者问题，欢迎提交 \[issues]\[issues-link] -| [![][vercel-shield-badge]][vercel-link] | 无需安装或注册！访问我们的网站，即可快速体验 | -| :---------------------------------------- | :----------------------------------------------------------------------------------------------------------------- | +| [![][vercel-shield-badge]][vercel-link] | 无需安装或注册！访问我们的网站，即可快速体验 | +| :---------------------------------------- | :----------------------------------------------- | | [![][discord-shield-badge]][discord-link] | 加入我们的 Discord 社区！这是你可以与开发者和其他 LobeHub 热衷用户交流的地方. | > \[!IMPORTANT] @@ -81,70 +92,70 @@ LobeVidol 目前正在积极开发中，有任何需求或者问题，欢迎提 ## ✨ 特性一览 ### 1. **流畅的对话体验** -流式响应带来流畅的对话体验，你可以通过设定角色对话情境把人物的动作和表情放入（）内，将正在发生的事或场景放入[]内来身临其境。 + +流式响应带来流畅的对话体验，你可以通过设定角色对话情境把人物的动作和表情放入（）内，将正在发生的事或场景放入 \[] 内来身临其境。 fluent chat experience ### 2. **背景情境设定** + 你可以通过设定背景图片的方式让对话更加符合情境： background setting ### 3. **丰富的动作和姿式库** + 内置 Mixamo 角色动作与姿式库，你可以让角色在对话时摆出你想要的姿势或动作: motions and postures - ### 4. **精致 UI 设计** + 经过精心设计的界面，具有优雅的外观和流畅的交互效果，支持亮暗色主题，适配移动端。支持 PWA，提供更加接近原生应用的体验。 ui design ### 5. **丰富的角色编辑体验** -使用角色编辑器，你可以创建属于你自己的虚拟偶像，设定触摸反应，上传 VRM 模型到网站并与他们互动。 + +使用角色编辑器，你可以创建属于你自己的虚拟偶像，设定触摸反应，上传 VRM 模型到网站并与他们互动。 role edit ### 6. **MMD 舞蹈支持** -借助 mmd-parser 的支持，你可以使用 vmd 文件和最喜欢的偶像一起跳舞; Just Dance! - +借助 mmd-parser 的支持，你可以使用 vmd 文件和最喜欢的偶像一起跳舞；Just Dance! - -### 7. ** PMX 舞台加载功能** +### 7. \*\* PMX 舞台加载功能 \*\* 我们添加了舞台加载功能并内置丰富的舞台选择，让角色跳舞时可以搭配不同的舞台风格: pmx stage -### 8. ** 触摸响应功能 ** +### 8. \*\* 触摸响应功能 \*\* 点击角色的不同身体部位，角色将做出不同的反应，你也可以自己编辑角色的触摸反应来创造与众不同的交互效果： - - -### 9. ** 角色市场 ** +### 9. \*\* 角色市场 \*\* 在 LobeVidol 的角色市场中汇聚了众多精心设计的角色，这些角色让你可以体验到不同的情境和交互体验，让你拥有不一样的陪伴体验。 我们的市场不仅是一个展示平台，更是一个协作的空间。在这里，每个人都可以贡献自己的想象，分享个人设定的角色。 > \[!TIP] -> 通过创建角色功能你可以轻松地将你的角色作品提交到我们的平台, 我们特别强调的是，LobeVidol 建立了一套精密的自动化国际化（i18n）工作流程， 它的强大之处在于能够无缝地将你的角色转化为多种语言版本。 这意味着，不论你的用户使用何种语言，他们都能无障碍地体验到你的角色。 +> 通过创建角色功能你可以轻松地将你的角色作品提交到我们的平台，我们特别强调的是，LobeVidol 建立了一套精密的自动化国际化（i18n）工作流程， 它的强大之处在于能够无缝地将你的角色转化为多种语言版本。 这意味着，不论你的用户使用何种语言，他们都能无障碍地体验到你的角色。 discover -### 10. ** 舞蹈市场 ** +### 10. \*\* 舞蹈市场 \*\* 在 LobeVidol 的舞蹈市场中添加了丰富的 MMD 舞蹈资源，这些舞蹈构成了丰富的视觉体验，你可以搭配不同的角色，舞台，音乐和舞蹈来创造不一样的观看体验。 Snipaste_2024-11-05_21-22-47 -### 11. ** TTS & STT 语音会话 ** +### 11. \*\* TTS & STT 语音会话 \*\* LobeVidol 支持文字转语音（Text-to-Speech，TTS）和语音转文字（Speech-to-Text，STT）技术，这使得我们的应用能够将文本信息转化为清晰的语音输出，用户可以像与真人交谈一样与我们的对话助手进行交流。 用户可以从多种声音中选择，给助手搭配合适的音源。 同时，对于那些倾向于听觉学习或者想要在忙碌中获取信息的用户来说，TTS 提供了一个极佳的解决方案。 @@ -159,16 +170,16 @@ LobeVidol 支持文字转语音（Text-to-Speech，TTS）和语音转文字（Sp ## 📦 生态 -| NPM | 仓库 | 描述 | 版本 | -| --------------------------------- | --------------------------------------- | ---------------------------------------------------------------------------------------- | ----------------------------------------- | -| [@lobehub/ui][lobe-ui-link] | [lobehub/lobe-ui][lobe-ui-github] | 构建 AIGC 网页应用程序而设计的开源 UI 组件库 | [![][lobe-ui-shield]][lobe-ui-link] | -| [@lobehub/icons][lobe-icons-link] | [lobehub/lobe-icons][lobe-icons-github] | 主流 AI / LLM 模型和公司 SVG Logo 与 Icon 合集 | [![][lobe-icons-shield]][lobe-icons-link] | -| [@lobehub/tts][lobe-tts-link] | [lobehub/lobe-tts][lobe-tts-github] | AI TTS / STT 语音合成 / 识别 React Hooks 库 | [![][lobe-tts-shield]][lobe-tts-link] | +| NPM | 仓库 | 描述 | 版本 | +| --------------------------------- | --------------------------------------- | ----------------------------------------------------------------------------- | ----------------------------------------- | +| [@lobehub/ui][lobe-ui-link] | [lobehub/lobe-ui][lobe-ui-github] | 构建 AIGC 网页应用程序而设计的开源 UI 组件库 | [![][lobe-ui-shield]][lobe-ui-link] | +| [@lobehub/icons][lobe-icons-link] | [lobehub/lobe-icons][lobe-icons-github] | 主流 AI / LLM 模型和公司 SVG Logo 与 Icon 合集 | [![][lobe-icons-shield]][lobe-icons-link] | +| [@lobehub/tts][lobe-tts-link] | [lobehub/lobe-tts][lobe-tts-github] | AI TTS / STT 语音合成 / 识别 React Hooks 库 | [![][lobe-tts-shield]][lobe-tts-link] | | [@lobehub/lint][lobe-lint-link] | [lobehub/lobe-lint][lobe-lint-github] | LobeHub 代码样式规范 ESlint，Stylelint，Commitlint，Prettier，Remark 和 Semantic Release | [![][lobe-lint-shield]][lobe-lint-link] | - **[Vidol market](https://github.com/v-idol/vidol-chat-agents)** - This is the Market Index of Vidol Chat. Vidol accesses index.json from this repo to show user the list of available agents and dances. -- **[Vidol agent sample](https://github.com/v-idol/vidol-agent-sample)** - Vidol人物数据模版 -- **[Vidol dance sample](https://github.com/v-idol/vidol-dance-sample)** - Vidol舞蹈数据模版 +- **[Vidol agent sample](https://github.com/v-idol/vidol-agent-sample)** - Vidol 人物数据模版 +- **[Vidol dance sample](https://github.com/v-idol/vidol-dance-sample)** - Vidol 舞蹈数据模版
@@ -201,7 +212,7 @@ $ bun dev ## 🤝 参与贡献 -我们非常欢迎各种形式的贡献。如果你对贡献代码感兴趣，可以查看我们的 GitHub [Issues][github-issues-link] 和 [Projects][github-project-link]，大展身手，向我们展示你的奇思妙想。 +我们非常欢迎各种形式的贡献。如果你对贡献代码感兴趣，可以查看我们的 GitHub [Issues][github-issues-link] 和 \[Projects]\[github-project-link]，大展身手，向我们展示你的奇思妙想。 [![][pr-welcome-shield]][pr-welcome-link] @@ -333,7 +344,7 @@ This project is [MIT](./LICENSE) licensed. [pr-welcome-link]: https://github.com/lobehub/lobe-vidol/pulls [pr-welcome-shield]: https://img.shields.io/badge/%F0%9F%A4%AF%20PR%20WELCOME-%E2%86%92-ffcb47?labelColor=black&style=for-the-badge [profile-link]: https://github.com/lobehub -[sponsor-link]: https://opencollective.com/lobehub 'Become 🩷 LobeHub Sponsor' +[sponsor-link]: https://opencollective.com/lobehub "Become 🩷 LobeHub Sponsor" [sponsor-shield]: https://img.shields.io/badge/-Sponsor%20LobeHub-f04f88?logo=opencollective&logoColor=white&style=flat-square [vercel-link]: https://vidol.lobehub.com [vercel-shield]: https://img.shields.io/website?down_message=offline&label=vercel&labelColor=black&logo=vercel&style=flat-square&up_message=online&url=https%3A%2F%2Fvidol.lobehub.com diff --git a/contributing/Basic/Architecture.md b/contributing/Basic/Architecture.md new file mode 100644 index 00000000..c11ccb35 --- /dev/null +++ b/contributing/Basic/Architecture.md @@ -0,0 +1,45 @@ +# Architecture Design + +LobeVidol is an AI conversation application built on the Next.js framework, designed to provide a personalized AI dialogue platform that allows users to interact with AI using natural language. Below is an overview of the architecture design for LobeVidol: + +#### TOC + +- [Application Architecture Overview](#application-architecture-overview) +- [Frontend Architecture](#frontend-architecture) +- [Edge Runtime API](#edge-runtime-api) +- [Agent Marketplace](#agent-marketplace) +- [Dance Marketplace](#dance-marketplace) +- [Security and Performance Optimization](#security-and-performance-optimization) +- [Development and Deployment Process](#development-and-deployment-process) + +## Application Architecture Overview + +The overall architecture of LobeVidol consists of the frontend, Edge Runtime API, Agent Marketplace, and Dance Marketplace. These components work together to provide a complete AI experience. + +## Frontend Architecture + +The frontend of LobeVidol utilizes the Next.js framework, leveraging its powerful SSR (Server-Side Rendering) capabilities and routing features. The frontend employs a range of technology stacks, including the antd component library, lobe-ui AIGC component library, zustand for state management, swr for data fetching, and i18next for internationalization. These technologies collectively support the functionality and features of LobeVidol. + +Components in the frontend architecture include app, components, config, constants, features, lib, hooks, layout, locales, services, store, styles, types, and utils. Each component has specific responsibilities and collaborates with others to achieve various functionalities. + +## Edge Runtime API + +The Edge Runtime API is one of the core components of LobeVidol, responsible for handling the core logic of AI conversations. It provides an interface for interaction with the AI engine, including natural language processing, intent recognition, and response generation. The Edge Runtime API communicates with the frontend, receiving user input and returning appropriate responses. + +## Agent Marketplace + +The Agent Marketplace is an important part of LobeVidol, offering a variety of AI Agents for users to experience different roles. The marketplace also provides functionality for using and uploading Agents, allowing users to discover Agents created by others and easily share their own Agents with the community. + +## Dance Marketplace + +The Dance Marketplace is another key component of LobeVidol, providing various dance files to enrich the interactions of LobeVidol's characters. Users can search for and download dance files from the marketplace, which can then be applied to their Agents for a more dynamic interaction experience. + +## Security and Performance Optimization + +To optimize performance, LobeVidol utilizes Next.js's SSR capabilities, achieving fast page loading and response times. Additionally, a series of performance optimization measures are implemented, including code splitting, caching, and resource compression. + +## Development and Deployment Process + +The development process for LobeVidol includes version control, testing, continuous integration, and continuous deployment. The development team uses a version control system for code management and conducts unit tests and integration tests to ensure code quality. The continuous integration and continuous deployment processes ensure rapid delivery and deployment of code. + +This overview provides a brief introduction to the architecture design of LobeVidol, detailing the responsibilities and collaboration of each component, as well as the impact of design decisions on application functionality and performance. diff --git a/contributing/Basic/Chat-API.md b/contributing/Basic/Chat-API.md new file mode 100644 index 00000000..9aa45af1 --- /dev/null +++ b/contributing/Basic/Chat-API.md @@ -0,0 +1,160 @@ +# Conversation API Implementation Logic + +The large model AI implementation of LobeVidol primarily relies on OpenAI's API, including the core conversation API on the backend and the integration API on the frontend. Next, we will introduce the implementation ideas and code for both the backend and frontend. + +#### TOC + +- [Backend Implementation](#backend-implementation) + - [Core Conversation API](#core-conversation-api) + - [Conversation Result Processing](#conversation-result-processing) +- [Frontend Implementation](#frontend-implementation) + - [Frontend Integration](#frontend-integration) + - [Using Streaming to Get Results](#using-streaming-to-get-results) + +## Backend Implementation + +The following code removes authentication, error handling, and other logic, retaining only the core functionality. + +### Core Conversation API + +In `src/app/api/chat/openai/route.ts`, a method for handling POST requests is defined, which is mainly responsible for extracting the `OpenAIChatStreamPayload` type payload from the request body and creating an OpenAI instance using the `createBizOpenAI` function based on the request and model information. Subsequently, this method calls `createChatCompletion` to handle the actual conversation and return the response result. If an error occurs during the creation of the OpenAI instance, it directly returns an error response. + +```ts +export const POST = async (req: Request) => { + const payload = (await req.json()) as OpenAIChatStreamPayload; + + const openaiOrErrResponse = createBizOpenAI(req, payload.model); + + // if resOrOpenAI is a Response, it means there is an error, just return it + if (openaiOrErrResponse instanceof Response) return openaiOrErrResponse; + + return createChatCompletion({ openai: openaiOrErrResponse, payload }); +}; +``` + +### Conversation Result Processing + +In the `src/app/api/openai/chat/createChatCompletion.ts` file, the `createChatCompletion` method is primarily responsible for interacting with the OpenAI API to process conversation requests. It first preprocesses the messages in the payload, then sends an API request using the `openai.chat.completions.create` method, and converts the returned response into a streaming format using `OpenAIStream`. If an error occurs during the API call, the method generates and processes the corresponding error response. + +```ts +import { OpenAIStream, StreamingTextResponse } from 'ai'; + +export const createChatCompletion = async ({ payload, openai }: CreateChatCompletionOptions) => { + // Preprocess messages + const { messages, ...params } = payload; + // Send API request + try { + const response = await openai.chat.completions.create( + { + messages, + ...params, + stream: true, + } as unknown as OpenAI.ChatCompletionCreateParamsStreaming, + { headers: { Accept: '*/*' } }, + ); + const stream = OpenAIStream(response); + return new StreamingTextResponse(stream); + } catch (error) { + // Check if the error is an OpenAI APIError + if (error instanceof OpenAI.APIError) { + let errorResult: any; + // If the error is an OpenAI APIError, there will be an error object + if (error.error) { + errorResult = error.error; + } else if (error.cause) { + errorResult = error.cause; + } + // If there are no other request errors, the error object is similar to a Response object + else { + errorResult = { headers: error.headers, stack: error.stack, status: error.status }; + } + console.error(errorResult); + // Return error response + return createErrorResponse(ChatErrorType.OpenAIBizError, { + endpoint: openai.baseURL, + error: errorResult, + }); + } + console.error(error); + return createErrorResponse(ChatErrorType.InternalServerError, { + endpoint: openai.baseURL, + error: JSON.stringify(error), + }); + } +}; +``` + +## Frontend Implementation + +### Frontend Integration + +In the `src/services/chat.ts` file, we define the `ChatService` class. This class provides several methods to handle interactions with the OpenAI chat API. + +The `createAssistantMessage` method is used to create a new assistant message. It accepts an object containing plugins, messages, and other parameters, as well as an optional `FetchOptions` object. This method merges the default proxy configuration with the provided parameters, preprocesses the messages and tools, and then calls the `getChatCompletion` method to obtain the chat completion task. + +The `getChatCompletion` method is used to retrieve the chat completion task. It accepts an `OpenAIChatStreamPayload` object and an optional `FetchOptions` object. This method merges the default proxy configuration with the provided parameters and then sends a POST request to OpenAI's chat API. + +The `processMessages` method is used to handle chat messages. It accepts an array of chat messages, an optional model name, and an optional array of tools. This method processes the message content, mapping the input `messages` array to an array of `OpenAIChatMessage` types, and if there are enabled tools, it adds the system role of the tools to the system message. + +```ts +class ChatService { + // Create a new assistant message + createAssistantMessage(params: object, fetchOptions?: FetchOptions) { + // Implementation details... + } + + // Get chat completion task + getChatCompletion(payload: OpenAIChatStreamPayload, fetchOptions?: FetchOptions) { + // Implementation details... + } + + // Process chat messages + processMessages(messages: ChatMessage[], modelName?: string, tools?: Tool[]) { + // Implementation details... + } +} +``` + +### Using Streaming to Get Results + +In the `src/utils/fetch.ts` file, we define the `fetchSSE` method, which uses a streaming method to fetch data. When a new data chunk is read, it calls the `onMessageHandle` callback function to process the data chunk, thereby achieving a typewriter output effect. + +```ts +export const fetchSSE = async (fetchFn: () => Promise, options: FetchSSEOptions = {}) => { + const response = await fetchFn(); + + // If not ok, it indicates a request error + if (!response.ok) { + const chatMessageError = await getMessageError(response); + + options.onErrorHandle?.(chatMessageError); + return; + } + + const returnRes = response.clone(); + + const data = response.body; + + if (!data) return; + let output = ''; + const reader = data.getReader(); + const decoder = new TextDecoder(); + + let done = false; + + while (!done) { + const { value, done: doneReading } = await reader.read(); + done = doneReading; + const chunkValue = decoder.decode(value, { stream: true }); + + output += chunkValue; + options.onMessageHandle?.(chunkValue); + } + + await options?.onFinish?.(output); + + return returnRes; +}; +``` + +This concludes the core implementation of the LobeVidol conversation API. With an understanding of these core codes, one can further expand and optimize the AI capabilities of LobeVidol. diff --git a/contributing/Basic/Contributing-Guidelines.md b/contributing/Basic/Contributing-Guidelines.md new file mode 100644 index 00000000..459c9609 --- /dev/null +++ b/contributing/Basic/Contributing-Guidelines.md @@ -0,0 +1,85 @@ +# Code Style and Contribution Guidelines + +Welcome to the LobeVidol Code Style and Contribution Guidelines. This guide will help you understand our coding standards and contribution process, ensuring consistency in our code and the smooth progress of the project. + +## TOC + +- [Code Style](#code-style) + - [ESLint](#eslint) + - [Prettier](#prettier) + - [remarklint](#remarklint) + - [stylelint](#stylelint) +- [Contribution Process](#contribution-process) + - [Gitmoji](#gitmoji) + - [Semantic Release](#semantic-release) + - [Commitlint](#commitlint) + - [How to Contribute](#how-to-contribute) + +## Code Style + +In LobeVidol, we use the `@lobehub/lint` package to unify our code style. This package includes configurations for `ESLint`, `Prettier`, `remarklint`, and `stylelint` to ensure that our JavaScript, Markdown, and CSS files adhere to the same coding standards. + +### ESLint + +Our project uses ESLint to check for issues in JavaScript code. You can find the `.eslintrc.js` file in the root directory of the project, which contains our extensions and custom rules for the ESLint configuration from `@lobehub/lint`. + +To ensure compatibility with the Next.js framework, we have added `plugin:@next/next/recommended` to the configuration. Additionally, we have disabled some rules to accommodate the specific needs of our project. + +Please run ESLint before submitting your code to ensure it meets the project standards. + +### Prettier + +Prettier is responsible for code formatting to maintain consistency. You can find our Prettier configuration in `.prettierrc.js`, which is imported from `@lobehub/lint`. + +It is recommended that you configure your editor to automatically run Prettier on file save, or run it manually before submitting. + +### remarklint + +For Markdown files, we use remarklint to ensure uniformity in document formatting. You can find the corresponding configuration file in the project. + +### stylelint + +We use stylelint to enforce style guidelines for CSS code. In the `stylelint` configuration file, we have made some adjustments to the custom rules based on the configuration from `@lobehub/lint`. + +Make sure your style code passes the stylelint checks before submission. + +## Contribution Process + +LobeVidol adopts gitmoji and semantic release as our code submission and release processes. + +### Gitmoji + +When submitting code, please use gitmoji to annotate your commit messages. This helps other contributors quickly understand the content and purpose of your submission. + +Gitmoji commit messages use specific emojis to indicate the type or intent of the commit. Here is an example: + +``` +📝 Update README with contribution guidelines + +- Added section about code style preferences +- Included instructions for running tests +- Corrected typos and improved formatting +``` + +In this example, the 📝 emoji represents a documentation update. The commit message clearly describes the changes made, providing specific details. + +### Semantic Release + +We use semantic release to automate version control and the release process. Please ensure your commit messages follow the semantic release conventions so that when code is merged into the main branch, the system can automatically create a new version and release it. + +### Commitlint + +To ensure consistency in commit messages, we use `commitlint` to check the format of commit messages. You can find the relevant rules in the `.commitlintrc.js` configuration file. + +Before submitting your code, please ensure your commit messages adhere to our standards. + +### How to Contribute + +1. Fork the project to your account. +2. Create a new branch for development. +3. After development is complete, ensure your code passes the aforementioned style checks. +4. Submit your changes and annotate your commit message with the appropriate gitmoji. +5. Create a Pull Request to the main branch of the original project. +6. Wait for code review and make necessary modifications based on feedback. + +Thank you for following these guidelines; they help us maintain the quality and consistency of the project. We look forward to your contributions! diff --git a/contributing/Basic/Feature-Development-Frontend.md b/contributing/Basic/Feature-Development-Frontend.md new file mode 100644 index 00000000..6e1ed261 --- /dev/null +++ b/contributing/Basic/Feature-Development-Frontend.md @@ -0,0 +1,126 @@ +# How to Develop a New Feature: Frontend Implementation + +LobeVidol is built on the Next.js framework, using TypeScript as the primary development language. When developing new features, we need to follow a specific development process to ensure code quality and stability. The general process can be divided into the following five steps: + +1. Routing: Define routes (`src/app`) +2. Data Structure: Define data structures (`src/types`) +3. Business Logic Implementation: Zustand store (`src/store`) +4. Page Display: Write static components/pages (`src/app//features/.tsx`) +5. Function Binding: Bind the store to the page triggers (`const [state, function] = useNewStore(s => [s.state, s.function])`) + +Taking the "Chat Messages" feature as an example, here are the brief steps to implement this feature: + +#### TOC + +- [1. Define Routes](#1-define-routes) +- [2. Define Data Structures](#2-define-data-structures) +- [3. Create Zustand Store](#3-create-zustand-store) +- [4. Create Pages and Components](#4-create-pages-and-components) +- [5. Function Binding](#5-function-binding) + +## 1. Define Routes + +In the `src/app` directory, we need to define a new route to host the "Chat Messages" page. Generally, we would create a new folder under `src/app`, for example, `chat`, and within this folder, create a `page.tsx` file that exports a React component as the main body of the page. + +```tsx +// src/app/chat/page.tsx +import ChatPage from './features/chat'; + +export default ChatPage; +``` + +## 2. Define Data Structures + +In the `src/types` directory, we need to define the data structure for "Chat Messages." For example, we can create a `chat.ts` file and define the `ChatMessage` type within it: + +```ts +// src/types/chat.ts + +export type ChatMessage = { + id: string; + content: string; + timestamp: number; + sender: 'user' | 'bot'; +}; +``` + +## 3. Create Zustand Store + +In the `src/store` directory, we need to create a new Zustand Store to manage the state of "Chat Messages." For example, we can create a `chatStore.ts` file and define a Zustand Store within it: + +```ts +// src/store/chatStore.ts +import create from 'zustand'; + +type ChatState = { + messages: ChatMessage[]; + addMessage: (message: ChatMessage) => void; +}; + +export const useChatStore = create((set) => ({ + messages: [], + addMessage: (message) => set((state) => ({ messages: [...state.messages, message] })), +})); +``` + +## 4. Create Pages and Components + +In `src/app//features/.tsx`, we need to create a new page or component to display "Chat Messages." In this file, we can use the Zustand Store created above, as well as Ant Design components to build the UI: + +```jsx +// src/features/chat/index.tsx +import { List, Typography } from 'antd'; +import { useChatStore } from 'src/store/chatStore'; + +const ChatPage = () => { + const messages = useChatStore((state) => state.messages); + + return ( + ( + + {message.content} + + )} + /> + ); +}; + +export default ChatPage; +``` + +## 5. Function Binding + +In the page or component, we need to bind the Zustand Store's state and methods to the UI. In the example above, we have already bound the `messages` state to the `dataSource` property of the list. Now, we also need a method to add new messages. We can define this method in the Zustand Store and then use it in the page or component: + +```jsx +import { Button } from 'antd'; + +const ChatPage = () => { + const messages = useChatStore((state) => state.messages); + const addMessage = useChatStore((state) => state.addMessage); + + const handleSend = () => { + addMessage({ id: '1', content: 'Hello, world!', timestamp: Date.now(), sender: 'user' }); + }; + + return ( + <> + ( + + {message.content} + + )} + /> + + + ); +}; + +export default ChatPage; +``` + +These are the steps to implement the "Chat Messages" feature in LobeVidol. Of course, in the actual development of LobeVidol, the business demands and scenarios faced are far more complex than the demo above, so please develop according to the actual situation. diff --git a/contributing/Basic/Folder-Structure.md b/contributing/Basic/Folder-Structure.md new file mode 100644 index 00000000..48411a4f --- /dev/null +++ b/contributing/Basic/Folder-Structure.md @@ -0,0 +1,21 @@ +# Directory Structure + +The folder directory structure of LobeVidol is as follows: + +```bash +src +├── app # Code related to the main application logic and state management +├── components # Reusable UI components +├── constants # Definitions for constants, such as action types, route names, etc. +├── features # Functional modules related to business features, such as Agent settings, plugin development pop-ups, and other reusable modules with business logic +├── hooks # Custom utility hooks reused throughout the application +├── layout # Layout components for the application, such as navigation bars, sidebars, etc. +├── locales # Internationalization language files +├── lib # General utility libraries, such as plugins, VMD animation implementations, etc. +├── panels # Panel components for display +├── services # Encapsulated backend service interfaces, such as HTTP requests +├── store # Zustand store for state management +├── styles # Global style files +├── types # TypeScript type definition files +└── utils # General utility functions +``` diff --git a/contributing/Basic/Intro.md b/contributing/Basic/Intro.md new file mode 100644 index 00000000..b2e90f2b --- /dev/null +++ b/contributing/Basic/Intro.md @@ -0,0 +1,113 @@ +# Technical Development Getting Started Guide + +Welcome to the LobeVidol Technical Development Getting Started Guide. LobeVidol is an AI conversation application built on the Next.js framework, integrating a variety of technology stacks to achieve diverse functionalities and features. This guide will detail the main technical components of LobeVidol, as well as how to configure and use these technologies in your development environment. + +#### TOC + +- [Basic Technology Stack](#basic-technology-stack) +- [Folder Directory Structure](#folder-directory-structure) +- [Local Development Environment Setup](#local-development-environment-setup) +- [Code Style and Contribution Guidelines](#code-style-and-contribution-guidelines) +- [Internationalization Implementation Guide](#internationalization-implementation-guide) +- [Appendix: Resources and References](#appendix-resources-and-references) + +## Basic Technology Stack + +The core technology stack of LobeVidol is as follows: + +- **Framework**: We chose [Next.js](https://nextjs.org/), a powerful React framework that provides key features such as server-side rendering, routing framework, and Router Handler for our project. +- **Component Library**: We use [Ant Design (antd)](https://ant.design/) as our base component library, along with [lobe-ui](https://github.com/lobehub/lobe-ui) as our business component library. +- **State Management**: We selected [zustand](https://github.com/pmndrs/zustand), a lightweight and easy-to-use state management library. +- **Network Requests**: We adopted [swr](https://swr.vercel.app/), a React Hooks library for data fetching. +- **Routing**: We directly use the routing solution provided by [Next.js](https://nextjs.org/). +- **Internationalization**: We use [i18next](https://www.i18next.com/) to implement multi-language support for the application. +- **Styling**: We use [antd-style](https://github.com/ant-design/antd-style), a CSS-in-JS library that works with Ant Design. +- **Unit Testing**: We use [vitest](https://github.com/vitest-dev/vitest) for unit testing. + +## Folder Directory Structure + +The folder directory structure of LobeVidol is as follows: + +```bash +src +├── app # Code related to the main logic and state management of the application +├── components # Reusable UI components +├── constants # Definitions of constants, such as action types, route names, etc. +├── features # Functional modules related to business features, such as Agent settings, plugin development pop-ups, etc. +├── hooks # Custom utility hooks reused throughout the application +├── layout # Layout components of the application, such as navigation bars, sidebars, etc. +├── locales # Internationalization language files +├── lib # General utility libraries, such as plugins, VMD animation implementations, etc. +├── panels # Panel components for display +├── services # Encapsulated backend service interfaces, such as HTTP requests +├── store # Zustand store for state management +├── styles # Global style files +├── types # TypeScript type definition files +└── utils # General utility functions +``` + +For a detailed introduction to the directory structure, see: [Folder Directory Structure](Folder-Structure.en-US.md) + +## Local Development Environment Setup + +This section will outline how to set up the development environment for local development. Before you begin, please ensure that Node.js, Git, and your chosen package manager (Bun or PNPM) are installed in your local environment. + +We recommend using WebStorm as your Integrated Development Environment (IDE). + +1. **Get the Code**: Clone the LobeVidol repository to your local machine: + +```bash +git clone https://github.com/lobehub/lobe-vidol.git +``` + +2. **Install Dependencies**: Navigate to the project directory and install the required dependencies: + +```bash +cd lobe-vidol +# If you are using Bun +bun install +# If you are using PNPM +pnpm install +``` + +3. **Run and Debug**: Start the local development server and begin your development journey: + +```bash +# Start the development server using Bun +bun run dev +# Access the application at http://localhost:3010 +``` + +> \[!IMPORTANT]\ +> If you encounter the error `Could not find "stylelint-config-recommended"` when installing dependencies with `npm`, please reinstall the dependencies using `pnpm` or `bun`. + +Now, you should be able to see the welcome page of LobeVidol in your browser. For a detailed environment configuration guide, please refer to [Development Environment Setup Guide](Setup-Development.en-US.md). + +## Code Style and Contribution Guidelines + +In the LobeVidol project, we place great importance on code quality and consistency. To this end, we have established a set of code style standards and contribution processes to ensure that every developer can smoothly participate in the project. Below are the code style and contribution guidelines you need to follow as a developer. + +- **Code Style**: We use `@lobehub/lint` to unify the code style, including ESLint, Prettier, remarklint, and stylelint configurations. Please adhere to our coding standards to maintain consistency and readability in the code. +- **Contribution Process**: We adopt gitmoji and semantic release for our code submission and release processes. Please use gitmoji to annotate your commit messages and ensure compliance with semantic release standards so that our automation system can correctly handle version control and releases. + +All contributions will undergo code review. Maintainers may suggest modifications or requests. Please respond positively to review comments and make timely adjustments; we look forward to your participation and contributions. + +For detailed code style and contribution guidelines, please refer to [Code Style and Contribution Guidelines](Contributing-Guidelines.en-US.md). + +## Internationalization Implementation Guide + +LobeVidol uses `i18next` and `lobe-i18n` to implement multi-language support, ensuring a global user experience. + +The internationalization files are located in `src/locales`, containing the default language (Chinese). We will automatically generate JSON files for other languages through `lobe-i18n`. + +If you want to add a new language, you need to follow specific steps, detailed in the [New Language Addition Guide](../Internationalization/Add-New-Locale.en-US.md). We encourage you to participate in our internationalization efforts to provide better services for users worldwide. + +For a detailed internationalization implementation guide, please refer to [Internationalization Implementation Guide](../Internationalization/Internationalization-Implementation.en-US.md). + +## Appendix: Resources and References + +To support developers in better understanding and utilizing the LobeVidol technology stack, we provide a comprehensive list of resources and references — [LobeVidol Resources and References](https://github.com/lobehub/lobe-vidol/wiki/Resources.en-US) - visit our maintained resource list, which includes tutorials, articles, and other useful links. + +We encourage developers to take advantage of these resources to deepen their learning and enhance their skills. Join community discussions through [LobeVidol GitHub Discussions](https://github.com/lobehub/lobe-vidol/discussions) or [Discord](https://discord.com/invite/AYFPHvv2jT) to ask questions or share your experiences. + +If you have any questions or need further assistance, please do not hesitate to reach out to us through the channels mentioned above. diff --git a/contributing/Basic/Resources.md b/contributing/Basic/Resources.md new file mode 100644 index 00000000..c1ad334b --- /dev/null +++ b/contributing/Basic/Resources.md @@ -0,0 +1,17 @@ +# Resources and References + +The design and development of LobeVidol rely heavily on outstanding projects within the community and ecosystem. Throughout the design and development process, we have utilized or referenced several excellent resources and guidelines. Below are some key reference resources for developers to consult during their development and learning journey: + +1. **OpenAI API Guide**: We use OpenAI's API to obtain and process AI conversation data. You can check out the [OpenAI API Guide](https://platform.openai.com/docs/api-reference/introduction) for more details. + +2. **OpenAI SDK**: We utilize OpenAI's Node.js SDK to interact with OpenAI's API. You can view the source code and documentation in the [OpenAI SDK](https://github.com/openai/openai-node) GitHub repository. + +3. **AI SDK**: We use Vercel's AI SDK to obtain and process AI conversation data. You can refer to the documentation of the [AI SDK](https://sdk.vercel.ai/docs) for more information. + +4. **Next.js Documentation**: Our project is built on Next.js, and you can check the [Next.js Documentation](https://nextjs.org/docs) for more information about Next.js. + +5. **Three VRM**: We use Three.js and VRM to display 3D characters. You can find more information about Three VRM in the [Three VRM](https://github.com/pixiv/three-vrm) GitHub repository. + +6. **mmd-parser**: We use mmd-parser to parse MMD files, allowing characters to dance to music. You can learn more about mmd-parser in the [mmd-parser](https://github.com/takahirox/mmd-parser) GitHub repository. + +We will continue to update and expand this list to provide developers with more reference resources. diff --git a/contributing/Basic/Setup-Development.md b/contributing/Basic/Setup-Development.md new file mode 100644 index 00000000..1e6da158 --- /dev/null +++ b/contributing/Basic/Setup-Development.md @@ -0,0 +1,69 @@ +# Environment Setup Guide + +Welcome to the development environment setup guide for LobeVidol. + +#### TOC + +- [Online Development](#online-development) +- [Local Development](#local-development) + - [Development Environment Requirements](#development-environment-requirements) + - [Project Setup](#project-setup) + +## Online Development + +If you have access to GitHub CodeSpaces, you can click the button below to enter the online development environment with one click: + +[![][codespaces-shield]][codespaces-link] + +## Local Development + +Before you start developing LobeVidol, you need to install and configure some necessary software and tools in your local environment. This document will guide you through these steps. + +### Development Environment Requirements + +First, you need to install the following software: + +- Node.js: LobeVidol is built on Node.js, so you need to install it. We recommend installing the latest stable version. +- Bun: We use Bun as our preferred package manager. You can download and install it from the official Bun website. +- PNPM: We use PNPM as a supplementary package manager. You can download and install it from the official PNPM website. +- Git: We use Git for version control. You can download and install it from the official Git website. +- IDE: You can choose your favorite Integrated Development Environment (IDE). We recommend using WebStorm, which is a powerful IDE particularly suited for TypeScript development. + +### Project Setup + +After installing the software mentioned above, you can start setting up the LobeVidol project. + +1. **Get the Code**: First, you need to clone the LobeVidol repository from GitHub. Run the following command in your terminal: + +```bash +git clone https://github.com/lobehub/lobe-vidol.git +``` + +2. **Install Dependencies**: Next, navigate to the project directory and use Bun to install the project's dependencies: + +```bash +cd lobe-vidol +bun i +``` + +If you are using PNPM, you can execute: + +```bash +cd lobe-vidol +pnpm i +``` + +3. **Start the Development Server**: After installing the dependencies, you can start the development server: + +```bash +bun run dev +``` + +Now, you can open your browser and go to `http://localhost:3010`, where you should see the welcome page of LobeVidol. This indicates that you have successfully set up the development environment. + +![](https://github-production-user-asset-6210df.s3.amazonaws.com/28616219/274655364-414bc31e-8511-47a3-af17-209b530effc7.png) + +If you encounter any issues with the environment setup during development, or if you have any questions regarding LobeVidol development, feel free to reach out to us. We look forward to seeing your contributions! + +[codespaces-link]: https://codespaces.new/lobehub/lobe-vidol +[codespaces-shield]: https://github.com/codespaces/badge.svg diff --git a/contributing/Basic/Test.md b/contributing/Basic/Test.md new file mode 100644 index 00000000..a10f6279 --- /dev/null +++ b/contributing/Basic/Test.md @@ -0,0 +1,87 @@ +# Testing Guide + +LobeVidol's testing strategy includes unit testing and end-to-end (E2E) testing. Below is a detailed description of each type of testing: + +#### TOC + +- [Unit Testing](#unit-testing) +- [🚧 End-to-End Testing](#-end-to-end-testing) +- [Development Testing](#development-testing) + - [1. Unit Testing](#1-unit-testing) +- [Testing Strategy](#testing-strategy) + +## Unit Testing + +Unit testing is used to test the functionality of independent units in the application (such as components, functions, utility functions, etc.). We use [vitest][vitest-url] for unit testing. + +To run unit tests, you can use the following command: + +``` +npm run test +``` + +This will run all unit tests and generate a test report. + +We encourage developers to write corresponding unit tests while writing code to ensure the quality and stability of the code. + +## 🚧 End-to-End Testing + +End-to-end testing is used to test the functionality and performance of the application in a real environment. It simulates real user operations and verifies the application's performance in different scenarios. + +Currently, LobeVidol does not have integrated end-to-end testing, but we will gradually introduce it in future iterations. + +## Development Testing + +### 1. Unit Testing + +Unit testing is conducted on the smallest testable units in the application, typically targeting functions, components, or modules. In LobeVidol, we use [vitest][vitest-url] for unit testing. + +#### Writing Test Cases + +Before writing unit tests, you need to create a directory that matches the directory of the file being tested and name the test file `.test.ts`. For example, if you want to test the `src/utils/formatDate.ts` file, the test file should be named `src/utils/formatDate.test.ts`. + +In the test file, you can use the `describe` and `it` functions to organize and write test cases. The `describe` function is used to create a test suite, while the `it` function is used to write specific test cases. + +```typescript +import { formatNumber } from './formatNumber'; + +describe('formatNumber', () => { + it('should format number with comma separator', () => { + const result = formatNumber(1000); + expect(result).toBe('1,000'); + }); + + it('should return the same number if it is less than 1000', () => { + const result = formatNumber(500); + expect(result).toBe('500'); + }); +}); +``` + +In the test cases, you can use the `expect` function to assert whether the test results meet expectations. The `expect` function can be used with various matchers, such as `toBe`, `toEqual`, `toBeTruthy`, etc. + +#### Running Unit Tests + +To execute the unit tests, run the following command: + +``` +npm run test +``` + +This will run all unit tests and output the test results. + +## Testing Strategy + +To write effective test cases, you can consider the following testing strategies: + +- **Boundary Condition Testing**: Test the boundary conditions of inputs, such as minimum values, maximum values, null values, etc. +- **Exception Handling Testing**: Test the code that handles exceptional situations, such as error handling and fallbacks in exceptional cases. +- **Functional Testing**: Test whether various functional modules of the application work correctly, including user interactions and data processing. +- **Compatibility Testing**: Test the application's compatibility across different browsers and devices. +- **Performance Testing**: Test the application's performance under different loads, such as response time and resource usage. + +Additionally, ensure that your test cases have good coverage, addressing key code and functionality within the application. + +By properly writing and executing unit tests, integration tests, and end-to-end tests, you can enhance the quality and stability of the application and promptly identify and fix potential issues. + +[vitest-url]: https://vitest.dev/ diff --git a/contributing/Internationalization/Add-New-Locale.md b/contributing/Internationalization/Add-New-Locale.md new file mode 100644 index 00000000..5dcdf9d1 --- /dev/null +++ b/contributing/Internationalization/Add-New-Locale.md @@ -0,0 +1,62 @@ +# New Language Addition Guide + +Using [lobe-i18n](https://github.com/lobehub/lobe-cli-toolbox/tree/master/packages/lobe-i18n) as the i18n solution allows you to quickly add new language support to your application. + +## TOC + +- [Adding New Language Support](#adding-new-language-support) + - [Step 1: Update the Internationalization Configuration File](#step-1-update-the-internationalization-configuration-file) + - [Step 2: Automatically Translate Language Files](#step-2-automatically-translate-language-files) + - [Step 3: Submit and Review Your Changes](#step-3-submit-and-review-your-changes) + - [Additional Information](#additional-information) + +## Adding New Language Support + +To add new internationalization support for a language (for example, adding Vietnamese `vi-VN`), please follow these steps: + +### Step 1: Update the Internationalization Configuration File + +1. Open the `.i18nrc.js` file. You can find this file in the root directory of your project. +2. Add the new language code to the configuration file. For instance, to add Vietnamese, you need to include `'vi-VN'` in the configuration. + +```js +module.exports = { + // ... other configurations + + outputLocales: [ + 'zh-TW', + 'en-US', + 'ru-RU', + 'ja-JP', + // ... other languages + + 'vi-VN', // Add 'vi-VN' to the array + ], +}; +``` + +### Step 2: Automatically Translate Language Files + +Use the `lobe-i18n` tool to automatically translate language files, so you don't have to manually update the i18n files. + +Run the following command to automatically translate and generate the language files for Vietnamese: + +```bash +npm run i18n +``` + +This will utilize the `lobe-i18n` tool to process the language files. + +### Step 3: Submit and Review Your Changes + +Once you have completed the above steps, you need to submit your changes and create a Pull Request. + +Please ensure that you follow the contribution guidelines and provide the necessary description to explain your changes. + +### Additional Information + +- After submitting your Pull Request, please be patient while waiting for the project maintainers to review it. +- If you encounter any issues, feel free to reach out to the community for assistance. +- For more accurate results, ensure that your Pull Request is based on the latest main branch and is kept in sync with it. + +By following the steps above, you can successfully add new language support and ensure that the application can provide a localized experience for more users. diff --git a/contributing/Internationalization/Internationalization-Implementation.md b/contributing/Internationalization/Internationalization-Implementation.md new file mode 100644 index 00000000..6ec23ce3 --- /dev/null +++ b/contributing/Internationalization/Internationalization-Implementation.md @@ -0,0 +1,115 @@ +# Internationalization Implementation Guide + +Welcome to the Internationalization Implementation Guide. This document will guide you through the internationalization mechanisms, including file structure and how to add new languages. We use `i18next` and `lobe-i18n` as our internationalization solutions, aiming to provide users with a seamless multilingual experience. + +## TOC + +- [Overview of Internationalization](#overview-of-internationalization) +- [File Structure](#file-structure) +- [Core Implementation Logic](#core-implementation-logic) +- [Adding New Language Support](#adding-new-language-support) +- [Resources and Further Reading](#resources-and-further-reading) + +## Overview of Internationalization + +Internationalization (often abbreviated as i18n) is the process that allows applications to adapt to different languages and regions. In our project, we support multiple languages and utilize the `i18next` library to enable dynamic language switching and content localization. Our goal is to provide a localized experience for users around the globe. + +## File Structure + +In our project, the files related to internationalization are organized as follows: + +- `src/locales/default`: Contains the translation files for the default development language (Chinese), which we refer to as Chinese. +- `locales`: Contains folders for all supported languages, with each language folder containing the corresponding translation files, which are automatically generated by lobe-i18n. + +In the `src/locales` directory structure, the `default` folder contains the original translation files (Chinese), while each language folder contains the corresponding JSON translation files. The files in each language folder correspond to the TypeScript files in the `default` folder, ensuring consistency in the structure of translation files across languages. + +``` +src/locales +├── create.ts +├── default +│ ├── chat.ts // Contains characters related to the chat page +│ ├── role.ts // Contains characters related to the role page +│ ├── common.ts // Contains translations for common characters, such as confirm, delete, etc. +│ ├── error.ts // Contains characters related to error handling +│ ├── index.ts // Resource index +│ ├── market.ts // Contains characters related to the discovery page +│ ├── setting.ts // Contains characters related to the settings page +│ └── welcome.ts // Contains characters related to the welcome page +└── resources.ts +``` + +The file structure automatically generated by lobe-i18n is as follows: + +``` +locales +├── ar +│ ├── chat.json +│ ├── common.json +│ ├── error.json +│ └── ... (other translation files) +├── de-DE +│ ├── chat.json +│ ├── common.json +│ ├── error.json +│ └── ... (other translation files) +├── en-US +├── ... (other language directories) +├── zh-CN +└── zh-TW +``` + +## Core Implementation Logic + +The core implementation logic of internationalization is as follows: + +- Initialize and configure using the `i18next` library. +- Automatically detect the user's language preference using `i18next-browser-languagedetector`. +- Dynamically load translation resources using `i18next-resources-to-backend`. +- Set the direction of the HTML document (LTR or RTL) based on the user's language preference. + +Here is a simplified pseudocode example to illustrate the core implementation logic of internationalization: + +```ts +import i18n from 'i18next'; +import LanguageDetector from 'i18next-browser-languagedetector'; +import resourcesToBackend from 'i18next-resources-to-backend'; +import { isRtlLang } from 'rtl-detect'; + +// Create and configure the i18n instance +const createI18nInstance = (lang) => { + const i18nInstance = i18n + .use(LanguageDetector) // Use language detection + .use( + resourcesToBackend((language, namespace) => { + // Dynamically load the corresponding language translation resources + return import(`path/to/locales/${language}/${namespace}.json`); + }), + ); + + // Listen for language change events and dynamically set document direction + i18nInstance.on('languageChanged', (language) => { + const direction = isRtlLang(language) ? 'rtl' : 'ltr'; + document.documentElement.dir = direction; // Set HTML document direction + }); + + // Initialize the i18n instance + i18nInstance.init({ + // Relevant configuration + }); + + return i18nInstance; +}; +``` + +In this example, we demonstrate how to use `i18next` and related plugins to initialize internationalization settings. We dynamically import translation resources and respond to language change events to adjust the text direction of the page. This process provides flexible multilingual support capabilities. + +## Adding New Language Support + +To add support for a new language, please refer to the detailed steps in the [New Language Addition Guide](Add-New-Locale.en-US.md). + +## Resources and Further Reading + +- [i18next Official Documentation](https://www.i18next.com/) +- [lobe-i18n Tool Documentation](https://github.com/lobehub/lobe-cli-toolbox/tree/master/packages/lobe-i18n) + +By following this guide, you can better understand and participate in the internationalization efforts, providing a seamless multilingual experience for users worldwide. diff --git a/contributing/State-Management/State-Management-Intro.md b/contributing/State-Management/State-Management-Intro.md new file mode 100644 index 00000000..6d4a0220 --- /dev/null +++ b/contributing/State-Management/State-Management-Intro.md @@ -0,0 +1,212 @@ +# Best Practices for State Management + +LobeVidol differs from traditional CRUD web applications by offering a wealth of interactive capabilities. Designing a data flow architecture that is easy to develop and maintain is crucial. This document will introduce best practices for data flow management in LobeVidol. + +## TOC + +- [Conceptual Elements](#conceptual-elements) +- [Structural Layers](#structural-layers) + - [Best Practices for LobeVidol SessionStore Directory Structure](#best-practices-for-lobevidol-sessionstore-directory-structure) +- [Implementation of SessionStore](#implementation-of-sessionstore) + +## Conceptual Elements + +| Term | Explanation | +| -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| store | A state library (store) that contains the application's state and actions. It allows access to and modification of the state during application rendering. | +| state | State refers to the data of the application, which holds the current status of the application. Changes in state **will always trigger a re-render** of the application to reflect the new state. | +| action | An action is an operation function that describes interaction events occurring within the application. Actions are typically triggered by user interactions, network requests, or timers. Actions can be **synchronous** or **asynchronous**. | +| reducer | A reducer is a pure function that takes the current state and an action as parameters and returns a new state. It is used to update the application's state based on the action type. Reducers are pure functions with no side effects, thus they must be **synchronous** functions. | +| selector | A selector is a function used to retrieve specific data from the application's state. It takes the application's state as a parameter and returns computed or transformed data. Selectors can combine parts of the state or multiple states to generate derived data. They are typically used to map the application's state to component props for use by the components. | +| slice | A slice is a concept used to represent a portion of the data model's state. It specifies a state slice, along with the associated state, actions, reducers, and selectors. Using slices allows for breaking down a large store into smaller, more maintainable subtypes. | + +## Structural Layers + +Depending on the complexity, the organization of the store's structure can vary significantly: + +- **Low Complexity**: Typically includes 2 to 5 states and 3 to 4 actions. The structure usually consists of a single `store.ts` and an `initialState.ts`. + +```bash +DataFill/store +├── index.ts +└── initialState.ts +``` + +- **Medium Complexity**: Generally contains 5 to 15 states and 5 to 10 actions. There may be selectors to implement derived states, and reducers to simplify some data changes. The structure typically includes a `store.ts`, an `initialState.ts`, and either a `selectors.ts` or `reducer.ts`. + +```bash +IconPicker/store +├── index.ts +├── initialState.ts +├── selectors.ts +└── store.ts +``` + +```bash +SortableList/store +├── index.ts +├── initialState.ts +├── listDataReducer.ts +└── store.ts +``` + +- **Moderate Complexity**: Contains 15 to 30 states and 10 to 20 actions. It is likely to have selectors to aggregate derived states and reducers to simplify some data changes. + +At this point, maintaining a single action store becomes challenging, often leading to the breakdown into multiple slices to manage different actions. The following code represents the internal data flow of the `SortableTree` component: + +```bash +SortableTree/store +├── index.ts +├── initialState.ts +├── selectors.ts +├── slices +├── crudSlice.ts +├── dndSlice.ts +└── selectionSlice.ts +├── store.ts +└── treeDataReducer.ts +``` + +- **High Complexity**: Contains more than 30 states and over 20 actions. Modular cohesion through slices is essential. Each slice declares its own initState, actions, reducers, and selectors. + +The following directory structure represents a previous version of the SessionStore, which has high complexity and implements a significant amount of business logic. However, with the modularization of slices and a fractal architecture mindset, it becomes easy to locate corresponding modules, making it straightforward to add features and iterate. + +```bash +LobeVidol SessionStore +├── index.ts +├── initialState.ts +├── selectors.ts +├── slices +│ ├── agentConfig +│ │ ├── action.ts +│ │ ├── index.ts +│ │ ├── initialState.ts +│ │ └── selectors.ts +│ ├── chat +│ │ ├── actions +│ │ │ ├── index.ts +│ │ │ ├── message.ts +│ │ │ └── topic.ts +│ │ ├── index.ts +│ │ ├── initialState.ts +│ │ ├── reducers +│ │ │ ├── message.ts +│ │ │ └── topic.ts +│ │ ├── selectors +│ │ │ ├── chat.ts +│ │ │ ├── index.ts +│ │ │ ├── token.ts +│ │ │ ├── topic.ts +│ │ │ └── utils.ts +│ │ └── utils.ts +│ └── session +│ ├── action.ts +│ ├── index.ts +│ ├── initialState.ts +│ ├── reducers +│ │ └── session.ts +│ └── selectors +│ ├── export.ts +│ ├── index.ts +│ └── index.ts +└── store.ts +``` + +### Best Practices for LobeVidol SessionStore Directory Structure + +In the LobeVidol application, session management is a complex functional module, so we adopted the [slice pattern](https://github.com/pmndrs/zustand/blob/main/docs/guides/slices-pattern.md) to organize the data flow. Below is the directory structure of the LobeVidol SessionStore, where each directory and file has its specific purpose: + +```fish +src/store/session +├── index.ts # Aggregated export file for SessionStore +├── initialState.ts # Aggregates all slices' initial states +├── selectors.ts # Selectors exported from various slices +├── store.ts # Creation and usage of SessionStore +├── helpers.ts # Helper functions +└── slices # Independent functional slices +    ├── agent # Assistant Slice +    │   ├── action.ts +    │   ├── index.ts +    │   └── selectors.ts +    └── session # Session Slice +       ├── action.ts +       ├── helpers.ts +       ├── initialState.ts +       └── selectors +          ├── export.ts +          ├── index.ts +          └── index.ts +``` + +## Implementation of SessionStore + +In LobeVidol, the SessionStore is designed as the core module for managing session state and logic. It consists of multiple Slices, each managing a portion of related state and logic. Below is a simplified example of the implementation of SessionStore: + +#### store.ts + +```ts +import { PersistOptions, devtools, persist, subscribeWithSelector } from 'zustand/middleware'; +import { shallow } from 'zustand/shallow'; +import { devtools } from 'zustand/middleware'; +import { createWithEqualityFn } from 'zustand/traditional'; + +import { SessionStoreState, initialState } from './initialState'; +import { AgentAction, createAgentSlice } from './slices/agent/action'; +import { SessionAction, createSessionSlice } from './slices/session/action'; + +// =============== Aggregate createStoreFn ============ // + +export type SessionStore = SessionAction & AgentAction & SessionStoreState; +const createStore: StateCreator = (...parameters) => ({ + ...initialState, + ...createAgentSlice(...parameters), + ...createSessionSlice(...parameters), +}); + +// =============== Implement useStore ============ // + +export const useSessionStore = createWithEqualityFn()( + persist( + subscribeWithSelector( + devtools(createStore, { + name: 'LobeChat_Session' + (isDev ? '_DEV' : ''), + }), + ), + persistOptions, + ), + shallow, +); +``` + +In this `store.ts` file, we create a `useSessionStore` hook that utilizes the `zustand` library to create a global state manager. We merge the initialState with the state and actions of each Slice to form a complete SessionStore. + +#### slices/session/action.ts + +```ts +import { StateCreator } from 'zustand'; + +import { SessionStore } from '@/store/session'; + +export interface SessionActions { + /** + * A custom hook that uses SWR to fetch sessions data. + */ + useFetchSessions: () => SWRResponse; +} + +export const createSessionSlice: StateCreator< + SessionStore, + [['zustand/devtools', never]], + [], + SessionAction +> = (set, get) => ({ + useFetchSessions: () => { + // ...logic to initialize sessions + }, + // ...implementation of other actions +}); +``` + +In the `action.ts` file, we define a `SessionActions` interface to describe session-related actions and implement a `useFetchSessions` function to create these actions. We then merge these actions with the initial state to form the session-related Slice. + +Through this structured, layered, and modular approach, we can ensure that LobeVidol's SessionStore is clear, maintainable, and also easy to extend and test. diff --git a/contributing/State-Management/State-Management-Intro.zh-CN.md b/contributing/State-Management/State-Management-Intro.zh-CN.md index 3433a08a..6410f8a2 100644 --- a/contributing/State-Management/State-Management-Intro.zh-CN.md +++ b/contributing/State-Management/State-Management-Intro.zh-CN.md @@ -11,14 +11,14 @@ LobeVidol 不同于传统 CRUD 的网页，存在大量的富交互能力，如 ## 概念要素 -| 概念名词 | 解释 | -| -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| store | 状态库 (store)，包含存储应用的状态、动作。允许在应用渲染中访问和修改状态。 | -| state | 状态 (state) 是指应用程序的数据，存储了应用程序的当前状态，状态的变化**一定会触发应用的重新渲染**，以反映新的状态。 | -| action | 动作 (action) 是一个操作函数，它描述了应用程序中发生的交互事件。动作通常是由用户交互、网络请求或定时器等触发。 action 可以是**同步**的，也可以是**异步**的。 | -| reducer | 归约器 (reducer) 是一个纯函数，它接收当前状态和动作作为参数，并返回一个新的状态。它用于根据动作类型来更新应用程序的状态。Reducer 是一个纯函数，不存在副作用，因此一定是 **同步** 函数。 | +| 概念名词 | 解释 | +| -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | +| store | 状态库 (store)，包含存储应用的状态、动作。允许在应用渲染中访问和修改状态。 | +| state | 状态 (state) 是指应用程序的数据，存储了应用程序的当前状态，状态的变化**一定会触发应用的重新渲染**，以反映新的状态。 | +| action | 动作 (action) 是一个操作函数，它描述了应用程序中发生的交互事件。动作通常是由用户交互、网络请求或定时器等触发。 action 可以是**同步**的，也可以是**异步**的。 | +| reducer | 归约器 (reducer) 是一个纯函数，它接收当前状态和动作作为参数，并返回一个新的状态。它用于根据动作类型来更新应用程序的状态。Reducer 是一个纯函数，不存在副作用，因此一定是 **同步** 函数。 | | selector | 选择器 (selector) 是一个函数，用于从应用程序的状态中获取特定的数据。它接收应用程序的状态作为参数，并返回经过计算或转换后的数据。Selector 可以将状态的一部分或多个状态组合起来，以生成派生的数据。Selector 通常用于将应用程序的状态映射到组件的 props，以供组件使用。 | -| slice | 切片 (slice) 是一个概念，用于表达数据模型状态的一部分。它指定了一个状态切片（slice），以及与该切片相关的 state、action、reducer 和 selector。使用 Slice 可以将大型的 Store 拆分为更小的、可维护的子类型。 | +| slice | 切片 (slice) 是一个概念，用于表达数据模型状态的一部分。它指定了一个状态切片（slice），以及与该切片相关的 state、action、reducer 和 selector。使用 Slice 可以将大型的 Store 拆分为更小的、可维护的子类型。 | ## 结构分层 diff --git a/contributing/State-Management/State-Management-Selectors.md b/contributing/State-Management/State-Management-Selectors.md new file mode 100644 index 00000000..27c4695d --- /dev/null +++ b/contributing/State-Management/State-Management-Selectors.md @@ -0,0 +1,49 @@ +# Data Storage and Retrieval Module + +Selectors are the data retrieval module under the LobeVidol data flow development framework. Their purpose is to extract data from the store using specific logic for component consumption. + +Taking `src/store/tool/slices/plugin/selectors.ts` as an example: + +This TypeScript code snippet defines an object named `pluginSelectors`, which contains a series of selector functions used to retrieve data from the plugin storage state. Selectors are functions that extract and derive data from Zustand. This particular example is designed to manage the state related to the plugin system of the front-end application. + +Here are some key points explained: + +- `getCustomPluginById`: Returns custom plugin information based on the plugin ID. +- `getInstalledPluginById`: Returns information about the installed plugin based on the plugin ID. +- `getPluginManifestById`: Returns the plugin manifest based on the plugin ID. +- `getPluginMetaById`: Returns plugin metadata based on the plugin ID. +- `getPluginSettingsById`: Returns plugin settings based on the plugin ID. +- `installedCustomPluginMetaList`: Returns a list of metadata for all installed custom plugins. +- `installedPluginManifestList`: Returns a list of manifests for all installed plugins. +- `installedPluginMetaList`: Returns a list of metadata for all installed plugins. +- `installedPlugins`: Returns a list of all installed plugins. +- `isPluginHasUI`: Determines whether a plugin has a UI component based on the plugin ID. +- `isPluginInstalled`: Checks if a plugin is installed based on the plugin ID. +- `storeAndInstallPluginsIdList`: Returns a list of all IDs from the store and installed plugins. + +Selectors encapsulate complex state selection logic within separate functions, making the code cleaner and more intuitive when calling state data in other parts of the application. Additionally, since TypeScript is used, each function can have clearly defined input and output types, which helps improve code reliability and development efficiency. + +In components, you can simply import the relevant selectors to directly access the data for consumption: + +```tsx | pure +import { useToolStore } from '@/store/tool'; +import { pluginSelectors } from '@/store/tool/selectors'; + +const Render = () => { + const list = useToolStore(pluginSelectors.installedPluginMetaList); + + return <> ... ; +}; +``` + +The benefits of this implementation include: + +1. **Decoupling and Reusability**: By keeping selectors independent of components, we can reuse these selectors across multiple components without rewriting the data retrieval logic. This reduces code duplication, enhances development efficiency, and makes the codebase cleaner and easier to maintain. +2. **Performance Optimization**: Selectors can be used to compute derived data, avoiding the need to recalculate the same data in each component. When the state changes, only the selectors that depend on that part of the state will be recalculated, reducing unnecessary renders and computations. +3. **Ease of Testing**: Selectors are pure functions that only depend on the parameters passed to them. This means they can be tested in isolation without needing to mock the entire store or component tree. +4. **Type Safety**: Since LobeVidol uses TypeScript, each selector has clearly defined input and output types. This provides developers with the advantages of autocompletion and compile-time checks, reducing runtime errors. +5. **Maintainability**: Selectors centralize the logic for reading state, making it more intuitive to track state changes and manage them. If the state structure changes, we only need to update the relevant selectors instead of searching and replacing multiple locations throughout the codebase. +6. **Composability**: Selectors can compose other selectors to create more complex selection logic. This pattern allows developers to build a hierarchy of selectors, making state selection more flexible and powerful. +7. **Simplified Component Logic**: Components do not need to know the structure of the state or how to retrieve and compute the required data. Components simply call selectors to get the data needed for rendering, making the component logic simpler and clearer. + +With this design, LobeVidol developers can focus more on building user interfaces and business logic without worrying about the details of data retrieval and processing. This pattern also provides better adaptability and extensibility for potential future changes in the state structure. diff --git a/docs/tts.md b/docs/tts.md deleted file mode 100644 index 95667708..00000000 --- a/docs/tts.md +++ /dev/null @@ -1,10 +0,0 @@ -## TTS - -Text To Speech（文字转语音） - -### 方案选择 - -本地模型: - -- [Vits-fast](https://github.com/Plachtaa/VITS-fast-fine-tuning) -- [edge-tts](https://github.com/rany2/edge-tts) diff --git a/package.json b/package.json index 923870a6..5fb8e614 100644 --- a/package.json +++ b/package.json @@ -27,11 +27,12 @@ "scripts": { "build": "next build", "dev": "next dev", - "docs:i18n": "lobe-i18n md && npm run lint:mdx", + "docs:i18n": "lobe-i18n md && npm run lint:md", "i18n": "npm run workflow:i18n && lobe-i18n", "lint": "npm run lint:ts && npm run lint:style && npm run type-check", "lint:circular": "dpdm src/**/*.ts --warning false --tree false --exit-code circular:1 -T true --skip-dynamic-imports circular", "lint:md": "remark . --quiet --frail --output", + "lint:mdx": "npm run workflow:mdx-with-lint && prettier -c --write \"{src,docs}/**/*.mdx\" && npm run workflow:mdx-with-lint", "lint:style": "stylelint \"{src,tests}/**/*.{js,jsx,ts,tsx}\" --fix", "lint:ts": "eslint \"{src,tests}/**/*.{js,jsx,ts,tsx}\" --fix", "prepare": "husky", @@ -42,7 +43,9 @@ "test:coverage": "vitest run --coverage", "test:update": "vitest -u", "type-check": "tsc --noEmit", - "workflow:i18n": "tsx scripts/i18nWorkflow/index.ts" + "workflow:i18n": "tsx scripts/i18nWorkflow/index.ts", + "workflow:mdx": "tsx scripts/mdxWorkflow/index.ts", + "workflow:mdx-with-lint": "tsx scripts/mdxWorkflow/index.ts && eslint \"docs/**/*.mdx\" --quiet --fix" }, "lint-staged": { "*.mdx": [ @@ -156,11 +159,14 @@ "dpdm": "^3.14.0", "eslint": "^8.57.1", "glob": "^10.4.5", + "gray-matter": "^4.0.3", "husky": "^9.1.6", "jsdom": "^24.1.3", "just-diff": "^6.0.2", "lint-staged": "^15.2.10", "prettier": "^3.3.3", + "remark-cli": "^11.0.0", + "remark-parse": "^10.0.2", "semantic-release": "^21.1.2", "stylelint": "^15.11.0", "tsx": "^4.19.1", diff --git a/scripts/mdxWorkflow/index.ts b/scripts/mdxWorkflow/index.ts new file mode 100644 index 00000000..a3e40ce6 --- /dev/null +++ b/scripts/mdxWorkflow/index.ts @@ -0,0 +1,48 @@ +import { consola } from 'consola'; +import { globSync } from 'glob'; +import matter from 'gray-matter'; +import { readFileSync, unlinkSync, writeFileSync } from 'node:fs'; +import { resolve } from 'node:path'; + +const fixWinPath = (path: string) => path.replaceAll('\\', '/'); + +export const root = resolve(__dirname, '../..'); + +const run = () => { + const posts = globSync(fixWinPath(resolve(root, 'docs/**/*.mdx'))); + + for (const post of posts) { + try { + const mdx = readFileSync(post, 'utf8'); + if (!mdx || mdx.replaceAll(' ', '').replaceAll('\n', '') === '') { + consola.error(post, 'is EMPTY !!!!!'); + unlinkSync(post); + continue; + } + const { data, content } = matter(mdx); + const formatedContent = content + .replaceAll('\\<', '<') + .replaceAll("{' '}\n", '') + .replaceAll(`'<`, `'`) + .replaceAll(`"<`, `"`) + .replaceAll(`>'`, `'`) + .replaceAll(`>"`, `"`) + .replaceAll(' width', '} width') + .replaceAll("'[https", "'https") + .replaceAll('"[https', '"https') + .replaceAll(/]\(http(.*)\/>\)/g, '') + .replaceAll(`\\*\\* `, '** ') + .replaceAll(` \\*\\*`, ' **') + .replaceAll(/\n{2,}/g, '\n\n'); + + writeFileSync(post, matter.stringify(formatedContent, data)); + } catch (error) { + consola.error(post); + consola.error(error); + } + } +}; + +run(); From 5ead6458cbf9094612e6ff4a5bae86d9a7ae3f2e Mon Sep 17 00:00:00 2001 From: rdmclin2 Date: Tue, 5 Nov 2024 21:51:45 +0800 Subject: [PATCH 2/2] chore: update readme --- README.md | 171 ++++++++++++++++++++++++++++++++---------------- README.zh-CN.md | 17 ++--- 2 files changed, 123 insertions(+), 65 deletions(-) diff --git a/README.md b/README.md index 2cf96ad9..479ff19a 100644 --- a/README.md +++ b/README.md @@ -6,11 +6,11 @@ # Lobe Vidol -Experience the magic of virtual idol creation with Lobe Vidol, enjoy the elegance of our Exquisite UI Design, dance along using MMD Dance Support, and engage in Smooth Conversations—all in one seamless platform. +Experience the magic of virtual idol creation with Lobe Vidol. Enjoy our exquisite UI design, support for MMD dance content, and seamless conversations with characters—all integrated into one cohesive platform. -Making Virtual Idols Accessible for EveryOne +Anyone can create a virtual idol -**English** · [简体中文](./README.zh-CN.md) · [Changelog](./CHANGELOG.md) · [Report Bug][github-issues-link] · [Request Feature][github-issues-link] +[English](./README.md) · **简体中文** · [Changelog](./CHANGELOG.md) · [Report Bug][github-issues-link] · [Request Feature][github-issues-link] [![][github-release-shield]][github-release-link] [![][vercel-shield]][vercel-link] @@ -30,42 +30,51 @@ Experience the magic of virtual idol creation with Lobe Vidol, enjoy the eleganc
> \[!NOTE] -> Lobe Vidol is currently in the early stages of development and available for beta testing. You are welcome to join and contribute. +> Lobe Vidol is currently in the early stages of development and is now open for Beta testing. We welcome you to join us and contribute!
-Table of contents +Table of Contents #### TOC -- [👋🏻 Getting Started & Join Our Community](#-getting-started--join-our-community) -- [✨ Features](#-features) - - [1.🗣️ **Smooth Conversation Experience**](#1️-smooth-conversation-experience) - - [2. 💎 **Exquisite UI Design**](#2--exquisite-ui-design) - - [3. 💨 **Vroid Model Preview**](#3--vroid-model-preview) - - [4. 🎇 **MMD Dance Support**](#4--mmd-dance-support) +- [👋🏻 Getting Started & Community](#-getting-started--community) +- [✨ Features Overview](#-features-overview) + - [1. **Seamless Conversation Experience**](#1-seamless-conversation-experience) + - [2. **Background Context Setting**](#2-background-context-setting) + - [3. **Rich Library of Actions and Poses**](#3-rich-library-of-actions-and-poses) + - [4. **Exquisite UI Design**](#4-exquisite-ui-design) + - [5. **Rich Character Editing Experience**](#5-rich-character-editing-experience) + - [6. **MMD Dance Support**](#6-mmd-dance-support) + - [7. **PMX Stage Loading Feature**](#7-pmx-stage-loading-feature) + - [8. **Touch Response Feature**](#8-touch-response-feature) + - [9. **Character Marketplace**](#9-character-marketplace) + - [10. **Dance Marketplace**](#10-dance-marketplace) + - [11. **TTS & STT Voice Conversations**](#11-tts--stt-voice-conversations) - [📦 Ecosystem](#-ecosystem) - [⌨️ Local Development](#️-local-development) - [🤝 Contributing](#-contributing) -- [🩷 Sponsor](#-sponsor) -- [🔗 Links](#-links) - - [More Products](#more-products) - - [Credits](#credits) +- [🩷 Community Sponsorship](#-community-sponsorship) +- [🔗 More Tools](#-more-tools) + - [More Projects](#more-projects) + - [Related Links](#related-links) ####
-## 👋🏻 Getting Started & Join Our Community +## 👋🏻 Getting Started & Community -Please be aware that LobeVidol is currently under active development, and feedback is welcome for any [issues][github-issues-link] encountered. +Lobe Vidol is actively under development. If you have any requests or questions, feel free to submit \[issues]\[issues-link]. -| [![][vercel-shield-badge]][vercel-link] | No installation or registration necessary! Visit our website to experience it firsthand. | -| :---------------------------------------- | :----------------------------------------------------------------------------------------------------------------- | -| [![][discord-shield-badge]][discord-link] | Join our Discord community! This is where you can connect with developers and other enthusiastic users of LobeHub. | +| [![][vercel-shield-badge]][vercel-link] | No installation or registration required! Visit our website for a quick experience. | +| :---------------------------------------- | :--------------------------------------------------------------------------------------------------------------- | +| [![][discord-shield-badge]][discord-link] | Join our Discord community! This is where you can interact with developers and other enthusiastic LobeHub users. | > \[!IMPORTANT] > -> **Star Us**, You will receive all release notifications from GitHub without any delay \~ ⭐️ +> **Star the project** to receive all release notifications from GitHub without delay!～⭐️ + +star (1)
Star History @@ -80,31 +89,79 @@ Please be aware that LobeVidol is currently under active development, and feedba
-## ✨ Features +## ✨ Feature Overview + +### 1. **Smooth Conversational Experience** + +Streamed responses provide a smooth conversational experience. You can set the dialogue context by placing character actions and expressions in parentheses () and the ongoing events or scenes in square brackets [] to create an immersive experience. + +fluent chat experience + +### 2. **Background Context Setting** + +You can enhance the dialogue by setting a background image that fits the context: + +background setting + +### 3. **Rich Library of Actions and Poses** + +With a built-in library of Mixamo character actions and poses, you can have characters strike the desired poses or perform actions during conversations: + +motions and postures + +### 4. **Elegant UI Design** + +The meticulously designed interface features an elegant appearance and smooth interaction effects, supporting both light and dark themes, and is optimized for mobile devices. It also supports PWA, providing an experience closer to that of a native application. -### 1.🗣️ **Smooth Conversation Experience** +ui design -Fluid responses ensure a smooth conversation experience. It fully supports Markdown rendering, including code highlighting, LaTex formulas and more. +### 5. **Rich Character Editing Experience** -Snipaste_2024-04-23_23-47-02 +Using the character editor, you can create your own virtual idol, set touch responses, upload VRM models to the site, and interact with them. -### 2. 💎 **Exquisite UI Design** +role edit -With a carefully designed interface, it offers an elegant appearance and smooth interaction. It supports light and dark themes. PWA support provides a more native-like experience; +### 6. **MMD Dance Support** + +With the support of mmd-parser, you can dance with your favorite idols using vmd files; Just Dance! + + + +### 7. **PMX Stage Loading Feature** + +We have added a stage loading feature with a rich selection of stages, allowing characters to dance with different stage styles: + +pmx stage + +### 8. **Touch Response Feature** + +By clicking on different body parts of the character, they will respond differently. You can also edit the character's touch responses to create unique interactive effects: + + + +### 9. **Character Marketplace** + +The LobeVidol character marketplace gathers a variety of meticulously designed characters, allowing you to experience different contexts and interactions, providing a unique companionship experience. +Our marketplace is not just a display platform but a collaborative space where everyone can contribute their imagination and share their personally designed characters. + +> \[!TIP] +> +> With the character creation feature, you can easily submit your character creations to our platform. We emphasize that LobeVidol has established a sophisticated automated internationalization (i18n) workflow, which seamlessly converts your characters into multiple language versions. This means that regardless of the language your users speak, they can experience your characters without barriers. -Snipaste_2024-04-23_23-48-56 +discover -### 3. 💨 **Vroid Model Preview** +### 10. **Dance Marketplace** -Using the Vroid Editor, you can create and upload your own virtual idol to the website, play with them; +The LobeVidol dance marketplace features a rich collection of MMD dance resources, creating a wealth of visual experiences. You can combine different characters, stages, music, and dances to create a unique viewing experience. -![324259872-113e4882-6710-4d81-a04f-a407989f947d](https://github.com/lobehub/lobe-vidol/assets/4705237/c3cf87c3-f8c0-49ef-b966-e451e2fbf583) +Snipaste_2024-11-05_21-22-47 -### 4. 🎇 **MMD Dance Support** +### 11. **TTS & STT Voice Conversations** -With the support of mmd-parser, you can play vmd files with your favarite idol; Just Dance! +LobeVidol supports Text-to-Speech (TTS) and Speech-to-Text (STT) technologies, enabling our application to convert text information into clear voice output. Users can interact with our conversational assistant as if they were talking to a real person. +Users can choose from a variety of voices to match their assistant with the appropriate sound source. Additionally, for those who prefer auditory learning or want to obtain information while busy, TTS provides an excellent solution. -Snipaste_2024-04-23_23-43-21 +In LobeVidol, we have carefully selected a range of high-quality voice options (OpenAI Audio, Microsoft Edge Speech) to meet the needs of users from different regions and cultural backgrounds. Users can select suitable voices based on personal preferences or specific scenarios to achieve a personalized communication experience.
@@ -114,16 +171,16 @@ With the support of mmd-parser, you can play vmd files with your favarite idol; ## 📦 Ecosystem -| NPM | Repository | Description | Version | -| --------------------------------- | --------------------------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------- | -| [@lobehub/ui][lobe-ui-link] | [lobehub/lobe-ui][lobe-ui-github] | Open-source UI component library dedicated to building AIGC web applications. | [![][lobe-ui-shield]][lobe-ui-link] | -| [@lobehub/icons][lobe-icons-link] | [lobehub/lobe-icons][lobe-icons-github] | Popular AI / LLM Model Brand SVG Logo and Icon Collection. | [![][lobe-icons-shield]][lobe-icons-link] | -| [@lobehub/tts][lobe-tts-link] | [lobehub/lobe-tts][lobe-tts-github] | High-quality & reliable TTS/STT React Hooks library | [![][lobe-tts-shield]][lobe-tts-link] | -| [@lobehub/lint][lobe-lint-link] | [lobehub/lobe-lint][lobe-lint-github] | Configurations for ESlint, Stylelint, Commitlint, Prettier, Remark, and Semantic Release for LobeHub. | [![][lobe-lint-shield]][lobe-lint-link] | +| NPM | Repository | Description | Version | +| --------------------------------- | --------------------------------------- | ------------------------------------------------------------------------------------------------------- | ----------------------------------------- | +| [@lobehub/ui][lobe-ui-link] | [lobehub/lobe-ui][lobe-ui-github] | An open-source UI component library designed for building AIGC web applications | [![][lobe-ui-shield]][lobe-ui-link] | +| [@lobehub/icons][lobe-icons-link] | [lobehub/lobe-icons][lobe-icons-github] | A collection of SVG logos and icons for mainstream AI / LLM models and companies | [![][lobe-icons-shield]][lobe-icons-link] | +| [@lobehub/tts][lobe-tts-link] | [lobehub/lobe-tts][lobe-tts-github] | A React Hooks library for AI TTS / STT voice synthesis / recognition | [![][lobe-tts-shield]][lobe-tts-link] | +| [@lobehub/lint][lobe-lint-link] | [lobehub/lobe-lint][lobe-lint-github] | LobeHub code style guidelines for ESlint, Stylelint, Commitlint, Prettier, Remark, and Semantic Release | [![][lobe-lint-shield]][lobe-lint-link] | -- **[Vidol market](https://github.com/v-idol/vidol-chat-agents)** - This is the Market Index of Vidol Chat. Vidol accesses index.json from this repo to show user the list of available agents and dances. -- **[Vidol agent sample](https://github.com/v-idol/vidol-agent-sample)** - This is the sample repo to define an AI agent in Vidol. -- **[Vidol dance sample](https://github.com/v-idol/vidol-dance-sample)** - This is the sample repo to define a dance in Vidol. +- **[Vidol market](https://github.com/v-idol/vidol-chat-agents)** - This is the Market Index of Vidol Chat. Vidol accesses index.json from this repo to show users the list of available agents and dances. +- **[Vidol agent sample](https://github.com/v-idol/vidol-agent-sample)** - Vidol character data template +- **[Vidol dance sample](https://github.com/v-idol/vidol-dance-sample)** - Vidol dance data template
@@ -133,11 +190,11 @@ With the support of mmd-parser, you can play vmd files with your favarite idol; ## ⌨️ Local Development -You can use Github Codespaces for online development: +You can use GitHub Codespaces for online development: [![][github-codespace-shield]][github-codespace-link] -Or clone it for local development: +Or use the following commands for local development: [![][bun-shield]][bun-link] @@ -156,7 +213,7 @@ $ bun dev ## 🤝 Contributing -Contributions of all types are more than welcome, if you are interested in contributing code, feel free to check out our GitHub [Issues][github-issues-link] to get stuck in to show us what you’re made of. +We warmly welcome contributions in various forms. If you're interested in contributing code, please check out our GitHub [Issues][github-issues-link] and [Projects][github-project-link] to showcase your creativity and skills. [![][pr-welcome-shield]][pr-welcome-link] @@ -198,14 +255,14 @@ Contributions of all types are more than welcome, if you are interested in contr
-## 🩷 Sponsor +## 🩷 Community Sponsorship -Every bit counts and your one-time donation sparkles in our galaxy of support! You're a shooting star, making a swift and bright impact on our journey. Thank you for believing in us – your generosity guides us toward our mission, one brilliant flash at a time. +Every bit of support is incredibly valuable, coming together to form the brilliant galaxy we support! You are like a shooting star that lights up our path forward in an instant. Thank you for your trust — your support acts like a guiding star, repeatedly illuminating the way for the project. - + @@ -215,16 +272,16 @@ Every bit counts and your one-time donation sparkles in our galaxy of support! Y
-## 🔗 Links +## 🔗 More Tools -### More Products +### More Projects -- **[🤖 Lobe Chat][lobe-chat] :** An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application. -- **[🅰️ Lobe SD Theme][lobe-theme]:** Modern theme for Stable Diffusion WebUI, exquisite interface design, highly customizable UI, and efficiency-boosting features. -- **[⛵️ Lobe Midjourney WebUI][lobe-midjourney-webui]:** WebUI for Midjourney, leverages AI to quickly generate a wide array of rich and diverse images from text prompts, sparking creativity and enhancing conversations. -- **[🌏 Lobe i18n][lobe-i18n] :** Lobe i18n is an automation tool for the i18n (internationalization) translation process, powered by ChatGPT. It supports features such as automatic splitting of large files, incremental updates, and customization options for the OpenAI model, API proxy, and temperature. +- **[🤖 Lobe Chat][lobe-chat] :** An open-source, extensible (Function Calling) plugin system, modern design ChatGPT/LLMs chat application and development framework. Supports one-click free deployment of your private ChatGPT/LLMs application. +- **[🅰️ Lobe SD Theme][lobe-theme]:** A modern theme for Stable Diffusion WebUI, featuring exquisite interface design, highly customizable UI, and efficiency-enhancing features. +- **[⛵️ Lobe Midjourney WebUI][lobe-midjourney-webui]:** Midjourney WebUI, capable of quickly generating a rich variety of images based on text prompts, inspiring creativity and enhancing dialogue. +- **[🌏 Lobe i18n][lobe-i18n]:** Lobe i18n is an automation tool for the i18n (internationalization) translation process powered by ChatGPT. It supports automatic splitting of large files, incremental updates, and customizable options for OpenAI models, API proxies, and temperature. -### Credits +### Related Links - **mmd-parser** - - **three-vrm** - @@ -288,7 +345,7 @@ This project is [MIT](./LICENSE) licensed. [pr-welcome-link]: https://github.com/lobehub/lobe-vidol/pulls [pr-welcome-shield]: https://img.shields.io/badge/%F0%9F%A4%AF%20PR%20WELCOME-%E2%86%92-ffcb47?labelColor=black&style=for-the-badge [profile-link]: https://github.com/lobehub -[sponsor-link]: https://opencollective.com/lobehub "Become 🩷 LobeHub Sponsor" +[sponsor-link]: https://opencollective.com/lobehub 'Become 🩷 LobeHub Sponsor' [sponsor-shield]: https://img.shields.io/badge/-Sponsor%20LobeHub-f04f88?logo=opencollective&logoColor=white&style=flat-square [vercel-link]: https://vidol.lobehub.com [vercel-shield]: https://img.shields.io/website?down_message=offline&label=vercel&labelColor=black&logo=vercel&style=flat-square&up_message=online&url=https%3A%2F%2Fvidol.lobehub.com diff --git a/README.zh-CN.md b/README.zh-CN.md index 87ecd57e..9a13ebd0 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -66,8 +66,8 @@ LobeVidol 目前正在积极开发中，有任何需求或者问题，欢迎提交 \[issues]\[issues-link] -| [![][vercel-shield-badge]][vercel-link] | 无需安装或注册！访问我们的网站，即可快速体验 | -| :---------------------------------------- | :----------------------------------------------- | +| [![][vercel-shield-badge]][vercel-link] | 无需安装或注册！访问我们的网站，即可快速体验 | +| :---------------------------------------- | :---------------------------------------------------------------------------- | | [![][discord-shield-badge]][discord-link] | 加入我们的 Discord 社区！这是你可以与开发者和其他 LobeHub 热衷用户交流的地方. | > \[!IMPORTANT] @@ -145,6 +145,7 @@ LobeVidol 目前正在积极开发中，有任何需求或者问题，欢迎提 我们的市场不仅是一个展示平台，更是一个协作的空间。在这里，每个人都可以贡献自己的想象，分享个人设定的角色。 > \[!TIP] +> > 通过创建角色功能你可以轻松地将你的角色作品提交到我们的平台，我们特别强调的是，LobeVidol 建立了一套精密的自动化国际化（i18n）工作流程， 它的强大之处在于能够无缝地将你的角色转化为多种语言版本。 这意味着，不论你的用户使用何种语言，他们都能无障碍地体验到你的角色。 discover @@ -170,11 +171,11 @@ LobeVidol 支持文字转语音（Text-to-Speech，TTS）和语音转文字（Sp ## 📦 生态 -| NPM | 仓库 | 描述 | 版本 | -| --------------------------------- | --------------------------------------- | ----------------------------------------------------------------------------- | ----------------------------------------- | -| [@lobehub/ui][lobe-ui-link] | [lobehub/lobe-ui][lobe-ui-github] | 构建 AIGC 网页应用程序而设计的开源 UI 组件库 | [![][lobe-ui-shield]][lobe-ui-link] | -| [@lobehub/icons][lobe-icons-link] | [lobehub/lobe-icons][lobe-icons-github] | 主流 AI / LLM 模型和公司 SVG Logo 与 Icon 合集 | [![][lobe-icons-shield]][lobe-icons-link] | -| [@lobehub/tts][lobe-tts-link] | [lobehub/lobe-tts][lobe-tts-github] | AI TTS / STT 语音合成 / 识别 React Hooks 库 | [![][lobe-tts-shield]][lobe-tts-link] | +| NPM | 仓库 | 描述 | 版本 | +| --------------------------------- | --------------------------------------- | ---------------------------------------------------------------------------------------- | ----------------------------------------- | +| [@lobehub/ui][lobe-ui-link] | [lobehub/lobe-ui][lobe-ui-github] | 构建 AIGC 网页应用程序而设计的开源 UI 组件库 | [![][lobe-ui-shield]][lobe-ui-link] | +| [@lobehub/icons][lobe-icons-link] | [lobehub/lobe-icons][lobe-icons-github] | 主流 AI / LLM 模型和公司 SVG Logo 与 Icon 合集 | [![][lobe-icons-shield]][lobe-icons-link] | +| [@lobehub/tts][lobe-tts-link] | [lobehub/lobe-tts][lobe-tts-github] | AI TTS / STT 语音合成 / 识别 React Hooks 库 | [![][lobe-tts-shield]][lobe-tts-link] | | [@lobehub/lint][lobe-lint-link] | [lobehub/lobe-lint][lobe-lint-github] | LobeHub 代码样式规范 ESlint，Stylelint，Commitlint，Prettier，Remark 和 Semantic Release | [![][lobe-lint-shield]][lobe-lint-link] | - **[Vidol market](https://github.com/v-idol/vidol-chat-agents)** - This is the Market Index of Vidol Chat. Vidol accesses index.json from this repo to show user the list of available agents and dances. @@ -344,7 +345,7 @@ This project is [MIT](./LICENSE) licensed. [pr-welcome-link]: https://github.com/lobehub/lobe-vidol/pulls [pr-welcome-shield]: https://img.shields.io/badge/%F0%9F%A4%AF%20PR%20WELCOME-%E2%86%92-ffcb47?labelColor=black&style=for-the-badge [profile-link]: https://github.com/lobehub -[sponsor-link]: https://opencollective.com/lobehub "Become 🩷 LobeHub Sponsor" +[sponsor-link]: https://opencollective.com/lobehub 'Become 🩷 LobeHub Sponsor' [sponsor-shield]: https://img.shields.io/badge/-Sponsor%20LobeHub-f04f88?logo=opencollective&logoColor=white&style=flat-square [vercel-link]: https://vidol.lobehub.com [vercel-shield]: https://img.shields.io/website?down_message=offline&label=vercel&labelColor=black&logo=vercel&style=flat-square&up_message=online&url=https%3A%2F%2Fvidol.lobehub.com