完善文档
This commit is contained in:
wux_labs
@@ -9,6 +9,16 @@
|
||||
- **【全模态】** 人工智能：文字、语音、图片、视频，全模态功能创作体验。
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<img src="./docs/images/image-00.png" alt="image-00" width="100%" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<br />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="./docs/images/image-01.png" alt="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
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>UAI Editor</title>
|
||||
<link rel="icon" href="/favicon.png" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="uai-editor"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
* 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
|
||||
<template>
|
||||
<div ref="editorDiv"/>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { UAIEditor } from '@uai-team/uai-editor';
|
||||
import '@uai-team/uai-editor/dist/style.css';
|
||||
|
||||
export default {
|
||||
mounted(){
|
||||
new UAIEditor({
|
||||
element: this.$refs.editorDiv as Element,
|
||||
content: 'UAI Editor 是一个面向 AI 的、现代 UI 风格的下一代富文本编辑器。开箱即用、支持所有前端框架。',
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 与 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 (
|
||||
<>
|
||||
<div ref={divRef} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
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)。
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="./docs/images/image-81.png" alt="image-81"/>
|
||||
</td>
|
||||
<td>
|
||||
<img src="./docs/images/image-82.png" alt="image-82"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
### 用户文档
|
||||
|
||||
启动文档服务：
|
||||
@@ -248,28 +109,16 @@ docsify serve docs/user --port 3010
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<img src="./docs/images/image-91.png" alt="image-01"/>
|
||||
<img src="./docs/images/image-91.png" alt="image-91"/>
|
||||
</td>
|
||||
<td>
|
||||
<img src="./docs/images/image-92.png" alt="image-02"/>
|
||||
<img src="./docs/images/image-92.png" alt="image-92"/>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
或者，您也可以直接访问：[文档编辑](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) 对所有用户免费开放，无需担心版权问题。
|
||||
|
||||
Reference in New Issue
Block a user