diff --git a/README.md b/README.md index c31ea87..8ba46f8 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,16 @@ - **【全模态】** 人工智能：文字、语音、图片、视频，全模态功能创作体验。 + + + + + +
+ image-00 +
+
+
image-01 @@ -51,178 +61,6 @@ UAI Editor 提供了完善的文档编辑能力和 AI 创作能力，支持 Mark * UAI Editor 支持全模态大模型，包括文本生成、语音识别、语音生成、文生图、图生图、局部重绘、图片理解、文生视频、图生视频、视频理解等。 * UAI Editor 私有模型适配多种环境，包括英伟达显卡、天数智芯显卡、Pytorch、IPEX等。 -## 软件安装 - -### 基础软件安装 - -首先，我们需要安装 `nodejs`、`npm`等用于开发的基础软件。 - -Node.js 可以通过不同的方式安装，所有主要平台的官方软件包均可在 [https://nodejs.cn/download/](https://nodejs.cn/download/) 获得。 - -一种非常方便的安装 Node.js 的方法是通过包管理器，[https://nodejs.cn/download/package-manager/](https://nodejs.cn/download/package-manager/) 中列出了适用于 macOS、Linux 和 Windows 的其他软件包管理器。 - -### 有爱文档安装 - -其次，我们需要安装 UAI Editor 软件，软件已经打包发布到 [https://www.npmjs.com/](https://www.npmjs.com/) 平台，可以直接通过以下命令安装： - -```bash -npm i @uai-team/uai-editor -``` - -## 软件集成 - -然后，我们可以将 UAI Editor 与自己的项目进行集成。 - -作为一个独立的纯前端文档编辑器，UAI Editor 可以独立使用，也可以轻松无缝集成到 Vue、React、Layui、Angular 等几乎任何前端框架。 - -### 独立使用 - -* index.html - -```html - - - - - - UAI Editor - - - -
- - - -``` - -* main.ts - -```js -import { UAIEditor } from '@uai-team/uai-editor'; -import '@uai-team/uai-editor/dist/style.css'; - -new UAIEditor({ - element: "#uai-editor", - content: 'UAI Editor 是一个面向 AI 的、现代 UI 风格的下一代富文本编辑器。开箱即用、支持所有前端框架。', -}) -``` - -### 与 VUE 集成 - -```ts - - - -``` - -### 与 React 集成 - -```js -import {useEffect, useRef} from 'react'; -import { UAIEditor } from '@uai-team/uai-editor'; -import '@uai-team/uai-editor/dist/style.css'; - -function App() { - const divRef = useRef(null); - useEffect(() => { - if (divRef.current) { - const uaiEditor = new UAIEditor({ - element: divRef.current, - content: 'UAI Editor 是一个面向 AI 的、现代 UI 风格的下一代富文本编辑器。开箱即用、支持所有前端框架。', - }) - return ()=>{ - uaiEditor.destroy(); - } - } - }, []) - - return ( - <> -
- - ) -} - -export default App -``` - -### 与人工智能集成 - -如果要在 UAI Editor 中使用 AI 功能，需要在初始化 UAIEditor 的时候配置相关的配置项： - -```js -new UAIEditor({ - element: "#uai-editor", - content: 'UAI Editor 是一个面向 AI 的、现代 UI 风格的下一代富文本编辑器。开箱即用、支持所有前端框架。', - ai: { // AI 配置项 - chat: { // 聊天配置项 - models: { // 模型配置项 - "default": { - modelType: 'openai', - baseUrl: 'https://open.bigmodel.cn/api/paas/v4', - apiKey: process.env.CHATGLM_APIKEY, - model: 'glm-4-flash' - }, - "GLM-4": { // 聊天功能选择使用的模型，配置智谱AI的GLM-4-Flash模型 - modelType: 'openai', - baseUrl: 'https://open.bigmodel.cn/api/paas/v4', - apiKey: process.env.CHATGLM_APIKEY, // 此处填写您智谱AI的 API Key - model: 'glm-4-flash' - }, - "InternLM2.5": { // 聊天功能选择使用的模型，配置上海人工智能实验室的InternLM2.5模型 - modelType: 'openai', - baseUrl: 'https://internlm-chat.intern-ai.org.cn/puyu/api/v1', - apiKey: process.env.INTERNLM_TOKEN, // 此处填写您上海人工智能实验室的 API Key - model: 'internlm2.5-latest' - }, - }, - }, - image: { // 图像配置项 - models: { // 模型配置项 - text2image: { // 文本生成图像模型配置项 - "default": { - modelType: 'openai', - baseUrl: 'https://open.bigmodel.cn/api/paas/v4', // images/generations - apiKey: process.env.CHATGLM_APIKEY, - model: 'cogview-3-flash' - }, - "CogView-3": { // 绘图功能选择使用的模型，配置智谱AI的CogView-3-Flash模型 - modelType: 'openai', - baseUrl: 'https://open.bigmodel.cn/api/paas/v4', // images/generations - apiKey: process.env.CHATGLM_APIKEY, // 此处填写您智谱AI的 API Key - model: 'cogview-3-flash' - }, - } - } - } - } -}) -``` - -## 软件运行 - -最后，我们需要运行项目，执行以下命令可以运行项目或自己的项目： - -```bash -npm i - -npm run dev -``` - ## 帮助文档 UAI Editor 提供了一份使用文档，您可以通过以下方式访问： @@ -233,6 +71,29 @@ UAI Editor 提供了一份使用文档，您可以通过以下方式访问： npm i docsify -g ``` +### 开发者文档 + +启动文档服务： + +```bash +docsify serve docs/developer --port 3000 +``` + +访问文档： + +[http://localhost:3000](http://localhost:3000)。 + + + + + + +
+ image-81 + + image-82 +
+ ### 用户文档 启动文档服务： @@ -248,28 +109,16 @@ docsify serve docs/user --port 3010
- image-01 + image-91 - image-02 + image-92
或者，您也可以直接访问：[文档编辑](docs/user/base.md)、[附件插入](docs/user/insert.md)、[文档导出](docs/user/export.md)、[AI 功能](docs/user/chat.md)等文档。 -### 开发者文档 - -启动文档服务： - -```bash -docsify serve docs/developer --port 3020 -``` - -访问文档： - -[http://localhost:3020](http://localhost:3020)。 - ## 开源优势 * **免费使用：** 作为开源项目，UAI Editor 采用 [MIT 许可证](LICENSE) 对所有用户免费开放，无需担心版权问题。 diff --git a/docs/developer/.nojekyll b/docs/developer/.nojekyll new file mode 100644 index 0000000..e69de29 diff --git a/docs/developer/README.md b/docs/developer/README.md new file mode 100644 index 0000000..02ab8ee --- /dev/null +++ b/docs/developer/README.md @@ -0,0 +1,7 @@ +# UAI Editor：有爱文档，有爱、有AI、有UI。 + +> UAI Editor 是一个面向 AI 的、现代 UI 风格的下一代富文本编辑器。开箱即用、支持所有前端框架。 + +UAI Editor 是一个基于 Typescript 的适合于国人使用的纯前端文档编辑器。UAI Editor 提供完善的文档编辑能力和 AI 创作能力，支持 Markdown 语法，支持基础的富文本编辑功能，支持插入多种格式的节点类型、提供了多种类型的实用工具。 + +作为一个独立的纯前端文档编辑器，UAI Editor 可以轻松无缝集成到 Vue、React、Layui、Angular 等几乎任何前端框架。 diff --git a/docs/developer/_coverpage.md b/docs/developer/_coverpage.md new file mode 100644 index 0000000..bfc5d5d --- /dev/null +++ b/docs/developer/_coverpage.md @@ -0,0 +1,15 @@ + + +# **有爱文档（UAI-Editor）开发文档** + +> 💪打造现代 UI 风格、面向 AI 的最强、最轻量级的个人&团队文档。 + +## 有爱文档，有爱、有AI、有UI。开箱即用、支持所有前端框架。 + +- **【全行业】** 无论您是：金融、教育、医疗、零售、互联网还是传统行业。 +- **【全场景】** 无论您是：文章创作、会议记录、学术论文还是知识库管理。 +- **【全功能】** 功能丰富：文本编辑、格式排版、多媒体插入、表格制作等。 +- **【全模态】** 人工智能：文字、语音、图片、视频，全模态功能创作体验。 + + +[开始](/README.md) \ No newline at end of file diff --git a/docs/developer/_navbar.md b/docs/developer/_navbar.md new file mode 100644 index 0000000..a422bec --- /dev/null +++ b/docs/developer/_navbar.md @@ -0,0 +1,7 @@ +- [首页](/) + +- 开源地址 + - [Gitee](https://gitee.com/uai-team/uai-editor) + - [Github](https://github.com/uai-team/uai-editor) + +- 技术支持 \ No newline at end of file diff --git a/docs/developer/_sidebar.md b/docs/developer/_sidebar.md new file mode 100644 index 0000000..d38e8cc --- /dev/null +++ b/docs/developer/_sidebar.md @@ -0,0 +1,3 @@ +- 环境搭建 + - [开发环境搭建](development.md) + - [前端框架集成](integration.md) diff --git a/docs/developer/development.md b/docs/developer/development.md new file mode 100644 index 0000000..66addf2 --- /dev/null +++ b/docs/developer/development.md @@ -0,0 +1,102 @@ +# 开发环境搭建 + +## 基础软件安装 + +首先，我们需要安装 `nodejs`、`npm`等用于开发的基础软件。 + +Node.js 可以通过不同的方式安装，所有主要平台的官方软件包均可在 [https://nodejs.cn/download/](https://nodejs.cn/download/) 获得。 + +一种非常方便的安装 Node.js 的方法是通过包管理器，[https://nodejs.cn/download/package-manager/](https://nodejs.cn/download/package-manager/) 中列出了适用于 macOS、Linux 和 Windows 的其他软件包管理器。 + +## 获取项目源码 + +通过以下命令获取项目源代码： + +```bash +git clone https://gitee.com/uai-team/uai-editor +cd uai-editor +``` + +## 依赖软件安装 + +有爱文档是一个`Nodejs`项目，正常情况下只需要执行`npm install`即可完成依赖的安装，但是因为项目中依赖了`@tiptap-pro`下的一些扩展，因此在执行`npm install`命令前需要做一些额外的操作。 + +### 注册Tiptap Cloud账号 + +通过[https://cloud.tiptap.dev/register](https://cloud.tiptap.dev/register)链接注册一个Tiptap Cloud账号。 + +![](images/development-01.png) + +验证注册的邮箱。 + +![](images/development-02.png) + +填写团队信息。 + +![](images/development-03.png) + +填写个人信息。 + +![](images/development-04.png) + +### 登录Tiptap Cloud账号 + +通过[https://cloud.tiptap.dev/login](https://cloud.tiptap.dev/login)链接登录已有账号。 + +![](images/development-05.png) + +### 获取NPM token + +通过[https://cloud.tiptap.dev/v2/features/pro-extensions](https://cloud.tiptap.dev/v2/features/pro-extensions)链接，获取个人的NPM registry token。 + +![](images/development-06.png) + +复制以上Token的内容，备用。 + +### 创建.npmrc配置文件 + +根据官方文档[https://tiptap.dev/docs/guides/pro-extensions](https://tiptap.dev/docs/guides/pro-extensions)或[https://cloud.tiptap.dev/v2/features/pro-extensions](https://cloud.tiptap.dev/v2/features/pro-extensions)，在克隆项目的根目录下创建`.npmrc`文件，并填入文件内容。 + +```bash +@tiptap-pro:registry=https://registry.tiptap.dev/ +@tiptap-cloud:registry=https://registry.tiptap.dev/ +//registry.tiptap.dev/:_authToken=${上图中复制的Token} +``` + +即，`.npmrc`文件的内容应该为： + +```bash +@tiptap-pro:registry=https://registry.tiptap.dev/ +@tiptap-cloud:registry=https://registry.tiptap.dev/ +//registry.tiptap.dev/:_authToken=SnF9fofcsYRXn***************WCtXj +``` + +此时，项目的目录结构应该为： + +```bash +uai-editor +├── src +├── .gitignore +├── .npmignore +├── .npmrc # 这个是通过前面的步骤新增加的配置文件 +├── LICENSE +├── README.md +├── index.html +├── package.json +├── tsconfig.json +└── vite.config.ts +``` + +### 执行软件安装 + +完成以上操作后，就可以执行`npm install`来进行依赖的安装了。 + +## 软件运行 + +最后，我们需要运行项目，执行以下命令可以运行项目或自己的项目： + +```bash +npm install + +npm run dev +``` diff --git a/docs/developer/images/development-01.png b/docs/developer/images/development-01.png new file mode 100644 index 0000000..4f3a8e8 Binary files /dev/null and b/docs/developer/images/development-01.png differ diff --git a/docs/developer/images/development-02.png b/docs/developer/images/development-02.png new file mode 100644 index 0000000..24747d2 Binary files /dev/null and b/docs/developer/images/development-02.png differ diff --git a/docs/developer/images/development-03.png b/docs/developer/images/development-03.png new file mode 100644 index 0000000..e5d305c Binary files /dev/null and b/docs/developer/images/development-03.png differ diff --git a/docs/developer/images/development-04.png b/docs/developer/images/development-04.png new file mode 100644 index 0000000..ae38a48 Binary files /dev/null and b/docs/developer/images/development-04.png differ diff --git a/docs/developer/images/development-05.png b/docs/developer/images/development-05.png new file mode 100644 index 0000000..125c6d3 Binary files /dev/null and b/docs/developer/images/development-05.png differ diff --git a/docs/developer/images/development-06.png b/docs/developer/images/development-06.png new file mode 100644 index 0000000..55c31a5 Binary files /dev/null and b/docs/developer/images/development-06.png differ diff --git a/docs/developer/index.html b/docs/developer/index.html new file mode 100644 index 0000000..7efb4c2 --- /dev/null +++ b/docs/developer/index.html @@ -0,0 +1,56 @@ + + + + + + 有爱文档（UAI-Editor） + + + + + + + +
+ + + + + + + \ No newline at end of file diff --git a/docs/developer/integration.md b/docs/developer/integration.md new file mode 100644 index 0000000..e47f482 --- /dev/null +++ b/docs/developer/integration.md @@ -0,0 +1,163 @@ +# 前端框架集成 + +作为一个独立的纯前端文档编辑器，UAI Editor 可以独立使用，也可以轻松无缝集成到 Vue、React、Layui、Angular 等几乎任何前端框架。 + +## 有爱文档安装 + +我们需要安装 UAI Editor 软件，软件已经打包发布到 [https://www.npmjs.com/](https://www.npmjs.com/) 平台，可以直接通过以下命令安装： + +```bash +npm i @uai-team/uai-editor +``` + +## 软件集成 + +然后，我们可以将 UAI Editor 与自己的项目进行集成。 + +### 独立使用 + +* index.html + +```html + + + + + + UAI Editor + + + +
+ + + +``` + +* main.ts + +```js +import { UAIEditor } from '@uai-team/uai-editor'; +import '@uai-team/uai-editor/dist/style.css'; + +new UAIEditor({ + element: "#uai-editor", + content: 'UAI Editor 是一个面向 AI 的、现代 UI 风格的下一代富文本编辑器。开箱即用、支持所有前端框架。', +}) +``` + +### 与 VUE 集成 + +```ts + + + +``` + +### 与 React 集成 + +```js +import {useEffect, useRef} from 'react'; +import { UAIEditor } from '@uai-team/uai-editor'; +import '@uai-team/uai-editor/dist/style.css'; + +function App() { + const divRef = useRef(null); + useEffect(() => { + if (divRef.current) { + const uaiEditor = new UAIEditor({ + element: divRef.current, + content: 'UAI Editor 是一个面向 AI 的、现代 UI 风格的下一代富文本编辑器。开箱即用、支持所有前端框架。', + }) + return ()=>{ + uaiEditor.destroy(); + } + } + }, []) + + return ( + <> +
+ + ) +} + +export default App +``` + +## 与人工智能集成 + +如果要在 UAI Editor 中使用 AI 功能，需要在初始化 UAIEditor 的时候配置相关的配置项： + +```js +new UAIEditor({ + element: "#uai-editor", + content: 'UAI Editor 是一个面向 AI 的、现代 UI 风格的下一代富文本编辑器。开箱即用、支持所有前端框架。', + ai: { // AI 配置项 + chat: { // 聊天配置项 + models: { // 模型配置项 + "default": { + modelType: 'openai', + baseUrl: 'https://open.bigmodel.cn/api/paas/v4', + apiKey: process.env.CHATGLM_APIKEY, + model: 'glm-4-flash' + }, + "GLM-4": { // 聊天功能选择使用的模型，配置智谱AI的GLM-4-Flash模型 + modelType: 'openai', + baseUrl: 'https://open.bigmodel.cn/api/paas/v4', + apiKey: process.env.CHATGLM_APIKEY, // 此处填写您智谱AI的 API Key + model: 'glm-4-flash' + }, + "InternLM2.5": { // 聊天功能选择使用的模型，配置上海人工智能实验室的InternLM2.5模型 + modelType: 'openai', + baseUrl: 'https://internlm-chat.intern-ai.org.cn/puyu/api/v1', + apiKey: process.env.INTERNLM_TOKEN, // 此处填写您上海人工智能实验室的 API Key + model: 'internlm2.5-latest' + }, + }, + }, + image: { // 图像配置项 + models: { // 模型配置项 + text2image: { // 文本生成图像模型配置项 + "default": { + modelType: 'openai', + baseUrl: 'https://open.bigmodel.cn/api/paas/v4', // images/generations + apiKey: process.env.CHATGLM_APIKEY, + model: 'cogview-3-flash' + }, + "CogView-3": { // 绘图功能选择使用的模型，配置智谱AI的CogView-3-Flash模型 + modelType: 'openai', + baseUrl: 'https://open.bigmodel.cn/api/paas/v4', // images/generations + apiKey: process.env.CHATGLM_APIKEY, // 此处填写您智谱AI的 API Key + model: 'cogview-3-flash' + }, + } + } + } + } +}) +``` + +## 软件运行 + +最后，我们需要运行项目，执行以下命令可以运行项目或自己的项目： + +```bash +npm install + +npm run dev +``` diff --git a/docs/images/image-00.png b/docs/images/image-00.png new file mode 100644 index 0000000..2079de0 Binary files /dev/null and b/docs/images/image-00.png differ diff --git a/docs/images/image-81.png b/docs/images/image-81.png new file mode 100644 index 0000000..7394da1 Binary files /dev/null and b/docs/images/image-81.png differ diff --git a/docs/images/image-82.png b/docs/images/image-82.png new file mode 100644 index 0000000..293fbd5 Binary files /dev/null and b/docs/images/image-82.png differ diff --git a/docs/user/images/architecture-01.png b/docs/user/images/architecture-01.png new file mode 100644 index 0000000..2079de0 Binary files /dev/null and b/docs/user/images/architecture-01.png differ diff --git a/docs/user/images/architecture.png b/docs/user/images/architecture.png deleted file mode 100644 index 86a3f5a..0000000 Binary files a/docs/user/images/architecture.png and /dev/null differ diff --git a/docs/user/introduce.md b/docs/user/introduce.md index e92715a..b51d8fc 100644 --- a/docs/user/introduce.md +++ b/docs/user/introduce.md @@ -38,4 +38,6 @@ UAI Editor 是一个基于 Typescript 的适合于国人使用的纯前端文档 软件架构如图： -![](images/architecture.png) +* LMDeploy版 + +![](images/architecture-01.png) diff --git a/public/favicon.png b/public/favicon.png new file mode 100644 index 0000000..c41a5a9 Binary files /dev/null and b/public/favicon.png differ