chore: add guide docs

src/components/markdown-with-highlight/index.tsx

@@ -11,7 +11,7 @@ function code({ className, ...props }: React.DetailedHTMLProps<React.HTMLAttribu
       lineNumberStyle={{
         color: '#999',
       }}
-      showLineNumbers
+      showLineNumbers={match[1] !== 'bash'}
       language={match[1]}
       PreTag="div"
       // @ts-ignore

src/layouts/main/index.tsx

@@ -52,8 +52,10 @@ export default function Layout() {
   const { i18n } = useTranslation();
 
   useEffect(() => {
-    if (location.pathname === '/') {
-      navigate(`/guide`);
+    if (location.pathname === '/' || location.pathname === '/guide') {
+      navigate(`/guide/introduction`, {
+        replace: true,
+      });
     }
   }, [i18n.language, location.pathname, navigate]);
 

src/locale/resources/en-US.json

@@ -1,5 +1,23 @@
 {
   "guide": "Guide",
+  "guide.intro": "Introduction",
+  "guide.intro.product": "Overview",
+  "guide.intro.features": "Features",
+  "guide.intro.concepts": "Concepts",
+  "guide.task-create": "Create task",
+  "guide.task-create.basic": "Basic configuration",
+  "guide.task-create.data-import": "Data import",
+  "guide.task-create.annotation-config": "Annotation config",
+  "guide.task-annotation": "Annotation",
+  "guide.task-annotation.image": "Image",
+  "guide.task-annotation.video": "Video",
+  "guide.task-annotation.audio": "Audio",
+  "guide.task-check": "Task overview",
+  "guide.account": "Account",
+  "guide.export": "Export result",
+  "guide.export.image": "Image format",
+  "guide.export.video": "Video format",
+  "guide.export.audio": "Audio format",
   "schema": "Schema",
   "getting started": "Getting Started",
   "install": "Install",

src/locale/resources/zh-CN.json

@@ -1,5 +1,23 @@
 {
   "guide": "使用指南",
+  "guide.intro": "产品介绍",
+  "guide.intro.product": "介绍",
+  "guide.intro.features": "功能",
+  "guide.intro.concepts": "概念",
+  "guide.task-create": "创建任务",
+  "guide.task-create.basic": " 任务配置",
+  "guide.task-create.data-import": "数据导入",
+  "guide.task-create.annotation-config": "标注配置",
+  "guide.task-annotation": "任务标注",
+  "guide.task-annotation.image": "图片",
+  "guide.task-annotation.video": "视频",
+  "guide.task-annotation.audio": "音频",
+  "guide.task-check": "查看任务",
+  "guide.account": "账号",
+  "guide.export": "结果导出",
+  "guide.export.image": "图片",
+  "guide.export.video": "视频",
+  "guide.export.audio": "音频",
   "schema": "标注格式",
   "getting started": "开始",
   "install": "安装",

src/pages/guide.audio/index.tsx → src/pages/guide.account/index.tsx

@@ -1,8 +1,8 @@
 import MarkdownWithHighlight from '@/components/markdown-with-highlight';
 
-import Markdown from './audio.mdx';
+import Markdown from './markdown.mdx';
 
-export default function AudioGuide() {
+export default function Account() {
   return (
     <MarkdownWithHighlight>
       <Markdown />

src/pages/guide.account/markdown.mdx

@@ -0,0 +1,17 @@
+import xlabAcount from './xlab-account-cn.png';
+import localAcount from './local-account-cn.png';
+
+## 注册与登录
+
+### 在线版
+
+可通过“手机验证码”注册登录，也可使用“手机号/邮箱+密码”的方式注册登录。
+
+<img src={xlabAcount} />
+
+### 离线版
+
+账号信息存储在本地电脑，可通过用邮箱注册来进行登录。
+
+<img src={localAcount} />
+

src/pages/guide.export/index.tsx

@@ -0,0 +1,11 @@
+import MarkdownWithHighlight from '@/components/markdown-with-highlight';
+
+import Markdown from './markdown.mdx';
+
+export default function Introduction() {
+  return (
+    <MarkdownWithHighlight>
+      <Markdown />
+    </MarkdownWithHighlight>
+  );
+}

src/pages/guide.export/markdown.mdx

@@ -0,0 +1,23 @@
+import imageUrl from './image.png';
+import video from './video.png';
+import audio from './audio.png';
+
+# 导出标注结果
+
+## 图片
+
+完成标注后，可将标注结果文件以JSON，COCO,MASK形式导出。
+
+<img src={imageUrl} />
+
+## 视频
+
+完成标注后，可将标注结果文件以JSON形式导出。
+
+<img src={video} />
+
+## 音频
+
+完成标注后，可将标注结果文件以JSON形式导出。
+
+<img src={audio} />

src/pages/guide.text/index.tsx → src/pages/guide.install/index.tsx

@@ -1,8 +1,8 @@
 import MarkdownWithHighlight from '@/components/markdown-with-highlight';
 
-import Markdown from './text.mdx';
+import Markdown from './markdown.mdx';
 
-export default function TextGuide() {
+export default function Page() {
   return (
     <MarkdownWithHighlight>
       <Markdown />

src/pages/guide.install/markdown.mdx

@@ -0,0 +1,35 @@
+## 安装
+
+1. 安装 [Miniconda](https://docs.conda.io/en/latest/miniconda.html)，选择对应的操作系统类型并下载安装。
+
+> **注：** 如果你的系统是 MacOS intel 芯片，请安装[intel x86_64版本的Miniconda](https://docs.conda.io/en/latest/miniconda.html)。
+
+2. 安装完毕后，在终端运行以下命令（过程中的提示选择默认 `y` 即可）：
+
+```bash
+conda create -n labelu python=3.7
+```
+
+> **注：** Windows 平台可在 Anaconda Prompt 程序中运行以上命令。
+
+3. 激活环境：
+
+```bash
+conda activate labelu
+```
+
+4. 安装 LabelU：
+
+```bash
+pip install labelu
+```
+
+> 安装测试版本：`pip install --extra-index-url https://test.pypi.org/simple/ labelu==<测试版本号>`
+
+5. 运行 LabelU：
+
+```bash
+labelu
+```
+
+6. 打开浏览器，访问 http://localhost:8000/ 即可使用 LabelU。

src/pages/guide.introduction/index.tsx

@@ -0,0 +1,11 @@
+import MarkdownWithHighlight from '@/components/markdown-with-highlight';
+
+import Markdown from './markdown.mdx';
+
+export default function Introduction() {
+  return (
+    <MarkdownWithHighlight>
+      <Markdown />
+    </MarkdownWithHighlight>
+  );
+}

src/pages/guide.introduction/markdown.mdx

@@ -0,0 +1,49 @@
+## 产品介绍
+
+LabelU是一个开源的数据标注工具，它可以帮助用户快速、准确、高效地对数据进行标注，从而提高机器学习模型的性能和质量。LabelU支持多种标注类型，包括标签分类、拉框、多边形、点、线、文本描述等，满足不同场景和需求的标注任务。
+体验产品可通过以下两种方式：
+- 在线体验：[https://labelu.shlab.tech/](https://labelu.shlab.tech/)
+- 本地部署：[https://github.com/opendatalab/labelU/tree/main#install-locally-with-miniconda](https://github.com/opendatalab/labelU/tree/main#install-locally-with-miniconda)
+
+## 功能特性
+
+LabelU提供了多种标注工具和功能，支持图像、视频、音频标注。
+
+- 图像类：多功能图像处理工具，涵盖2D框、语义分割、多段线、关键点等多种标注工具，协助您轻松完成图像的标识、注释和分析。
+- 视频类：具备强大视频处理能力，可实现视频分割、视频分类、视频信息提取等功能，为模型训练提供优质标注数据。
+- 音频类：高效精准的音频分析工具，可实现音频分割、音频分类、音频信息提取等功能，将复杂的声音信息直观可视化。
+
+## 概念说明
+
+<table>
+  <thead>
+    <tr>
+      <th>名词</th>
+      <th>说明</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td style={{ whiteSpace: 'nowrap' }}>任务（task）</td>
+      <td>为了对某个数据集进行标注而建立的任务</td>
+    </tr>
+    <tr>
+      <td style={{ whiteSpace: 'nowrap' }}>标签（label）</td>
+      <td>标注时需要添加的分类标识，比如猫、狗、行人、车辆</td>
+    </tr>
+    <tr>
+      <td style={{ whiteSpace: 'nowrap' }}>标记（annotation）</td>
+      <td>进行一次标注后生成的对象，比如一个矩形框、一个点</td>
+    </tr>
+    <tr>
+      <td style={{ whiteSpace: 'nowrap' }}>属性（attribute）</td>
+      <td>对标签的进一步描述，比如将某个物体标为车辆后，添加属性“车辆遮挡率为20%”</td>
+    </tr>
+    <tr>
+      <td style={{ whiteSpace: 'nowrap' }}>标注结果（result）</td>
+      <td>标记+标签+属性，一条完整的标注记录</td>
+    </tr>
+  </tbody>
+</table>
+
+点击「标注工具」框下拉工具，可选择「标签分类」，「文本描述」这些全局工具，以及「拉框」，「标点」，「多边形」，「标线」这些标记工具。配置说明如下：

src/pages/guide.task-annotation.audio/index.tsx

@@ -0,0 +1,11 @@
+import MarkdownWithHighlight from '@/components/markdown-with-highlight';
+
+import Markdown from './markdown.mdx';
+
+export default function AnnotationConfig() {
+  return (
+    <MarkdownWithHighlight>
+      <Markdown />
+    </MarkdownWithHighlight>
+  );
+}

src/pages/guide.task-annotation.audio/markdown.mdx

@@ -0,0 +1,45 @@
+import global from './global.png';
+import tool from './tool.png';
+
+# 音频标注
+
+标注流程说明：
+
+1. 判断任务是否为无效，若无效点击跳过，进入下一音频，若有效，有标注任务时（目标检测、语意分割、线标注、点标注），标注工具和配置的一致
+2. 在全局标签上，可以勾选预先配置好的「标签分类」来给整个音频打上标签，也可以在「文本描述」下对于视频进行文字说明
+3. 在具体标记上，首先点击左上角的「工具样式」来选择标记方式，在音频中完成该样式的标记后同步在右方的标记栏中。对于该标签的名称等信息可以手动点击后进行修改
+4. 在右侧标签结果管理栏单击标签结果可选中图片中对应标记，工具栏中选中工具切换为标签结果的工具。点击「修改」详细信息可下拉选择标签名称，点击「隐藏」按钮可隐藏这一条标记信息，点击「删除」按钮可删除这一条标记信息
+5. 若有效，有标签描述、分类任务时，在右侧结果管理栏填写描述和分类结果
+6. 选择「下一页」，进入下一个音频
+7. 重复1~6，直到标注完成
+
+## 工具介绍
+
+<table>
+<thead>
+    <tr>
+        <th style={{ whiteSpace: 'nowrap' }}>工具样式</th>
+        <th>使用方法</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td>片段分割</td>
+        <td>播放音频并找到你想要开始切割的点，按下暂停并点击确定起始点。可以直接在时间线上点击并拖动选择终止点，来选择你想要切割的音频部分。</td>
+    </tr>
+    <tr>
+        <td>时间戳</td>
+        <td>选中找到你想引用或高亮的时间点，如果你想标记音频的1小时10分钟30秒处，你应该点击01:10:30这个进度条的点。</td>
+    </tr>
+    </tbody>
+</table>
+
+
+## 全局标签
+
+<img src={global} />
+
+
+## 标记
+
+<img src={tool} />

src/pages/guide.task-annotation.image/index.tsx

@@ -0,0 +1,11 @@
+import MarkdownWithHighlight from '@/components/markdown-with-highlight';
+
+import Markdown from './markdown.mdx';
+
+export default function AnnotationConfig() {
+  return (
+    <MarkdownWithHighlight>
+      <Markdown />
+    </MarkdownWithHighlight>
+  );
+}