docs: rename locale md files

src/pages/guide.account/index.tsx

@@ -1,8 +1,20 @@
 import MarkdownWithHighlight from '@/components/markdown-with-highlight';
+import loadable from '@loadable/component';
+import { useTranslation } from 'react-i18next';
 
-import Markdown from './markdown.mdx';
+const Markdown_zh_CN = loadable(() => import('./markdown_zh-CN.mdx'));
+const Markdown_en_US = loadable(() => import('./markdown_en-US.mdx'));
+
+const fileMap: Record<string, React.ElementType> = {
+  'zh-CN': Markdown_zh_CN,
+  'en-US': Markdown_en_US,
+};
 
 export default function Account() {
+  const { i18n } = useTranslation();
+
+  const Markdown = fileMap[i18n.language] || null;
+
   return (
     <MarkdownWithHighlight>
       <Markdown />

src/pages/guide.account/markdown_en-US.mdx

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

src/pages/guide.export/index.tsx

@@ -1,8 +1,20 @@
 import MarkdownWithHighlight from '@/components/markdown-with-highlight';
+import loadable from '@loadable/component';
+import { useTranslation } from 'react-i18next';
 
-import Markdown from './markdown.mdx';
+const Markdown_zh_CN = loadable(() => import('./markdown_zh-CN.mdx'));
+const Markdown_en_US = loadable(() => import('./markdown_en-US.mdx'));
+
+const fileMap: Record<string, React.ElementType> = {
+  'zh-CN': Markdown_zh_CN,
+  'en-US': Markdown_en_US,
+};
+
+export default function Page() {
+  const { i18n } = useTranslation();
+
+  const Markdown = fileMap[i18n.language] || null;
 
-export default function Introduction() {
   return (
     <MarkdownWithHighlight>
       <Markdown />

src/pages/guide.export/markdown_zh-CN.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.install/index.tsx

@@ -1,8 +1,20 @@
 import MarkdownWithHighlight from '@/components/markdown-with-highlight';
+import loadable from '@loadable/component';
+import { useTranslation } from 'react-i18next';
 
-import Markdown from './markdown.mdx';
+const Markdown_zh_CN = loadable(() => import('./markdown_zh-CN.mdx'));
+const Markdown_en_US = loadable(() => import('./markdown_en-US.mdx'));
+
+const fileMap: Record<string, React.ElementType> = {
+  'zh-CN': Markdown_zh_CN,
+  'en-US': Markdown_en_US,
+};
 
 export default function Page() {
+  const { i18n } = useTranslation();
+
+  const Markdown = fileMap[i18n.language] || null;
+
   return (
     <MarkdownWithHighlight>
       <Markdown />

src/pages/guide.install/markdown_zh-CN.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

@@ -1,8 +1,20 @@
 import MarkdownWithHighlight from '@/components/markdown-with-highlight';
+import loadable from '@loadable/component';
+import { useTranslation } from 'react-i18next';
 
-import Markdown from './markdown.mdx';
+const Markdown_zh_CN = loadable(() => import('./markdown_zh-CN.mdx'));
+const Markdown_en_US = loadable(() => import('./markdown_en-US.mdx'));
+
+const fileMap: Record<string, React.ElementType> = {
+  'zh-CN': Markdown_zh_CN,
+  'en-US': Markdown_en_US,
+};
+
+export default function Page() {
+  const { i18n } = useTranslation();
+
+  const Markdown = fileMap[i18n.language] || null;
 
-export default function Introduction() {
   return (
     <MarkdownWithHighlight>
       <Markdown />

src/pages/guide.introduction/markdown_zh-CN.mdx

@@ -0,0 +1,50 @@
+## 产品简介
+
+### 产品介绍
+
+LabelU是一个开源的数据标注工具，它可以帮助用户快速、准确、高效地对数据进行标注，从而提高机器学习模型的性能和质量。LabelU支持多种标注类型，包括标签分类、拉框、多边形、点、线、文本描述等，满足不同场景和需求的标注任务。
+体验产品可通过以下两种方式：
+- 在线体验：[https://labelu.shlab.tech/](https://labelu.shlab.tech/)
+- 本地部署：[https://opendatalab.github.io/labelU/#/guide/install](https://opendatalab.github.io/labelU/#/guide/install)
+
+### 功能特性
+
+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

@@ -1,8 +1,20 @@
 import MarkdownWithHighlight from '@/components/markdown-with-highlight';
+import loadable from '@loadable/component';
+import { useTranslation } from 'react-i18next';
 
-import Markdown from './markdown.mdx';
+const Markdown_zh_CN = loadable(() => import('./markdown_zh-CN.mdx'));
+const Markdown_en_US = loadable(() => import('./markdown_en-US.mdx'));
+
+const fileMap: Record<string, React.ElementType> = {
+  'zh-CN': Markdown_zh_CN,
+  'en-US': Markdown_en_US,
+};
+
+export default function Page() {
+  const { i18n } = useTranslation();
+
+  const Markdown = fileMap[i18n.language] || null;
 
-export default function AnnotationConfig() {
   return (
     <MarkdownWithHighlight>
       <Markdown />

src/pages/guide.task-annotation.audio/markdown_zh-CN.mdx

@@ -0,0 +1,44 @@
+import global from './global.png';
+import tool from './tool.png';
+
+## 音频标注
+
+标注流程说明：
+
+1. 判断任务是否为无效，若无效点击跳过，进入下一音频，若有效，有标注任务时（目标检测、语意分割、线标注、点标注），标注工具和配置的一致
+2. 在全局标签上，可以勾选预先配置好的「标签分类」来给整个音频打上标签，也可以在「文本描述」下对于视频进行文字说明
+3. 在具体标记上，首先点击左上角的「工具样式」来选择标记方式，在音频中完成该样式的标记后同步在右方的标记栏中。对于该标签的名称等信息可以手动点击后进行修改
+4. 在右侧标签结果管理栏单击标签结果可选中音频中对应标记，工具栏中选中工具切换为标签结果的工具。点击「修改」详细信息可下拉选择标签名称，点击「隐藏」按钮可隐藏这一条标记信息，点击「删除」按钮可删除这一条标记信息
+5. 选择「下一页」，进入下一个音频
+6. 重复1~5，直到标注完成
+
+### 工具介绍
+
+<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

@@ -1,8 +1,20 @@
 import MarkdownWithHighlight from '@/components/markdown-with-highlight';
+import loadable from '@loadable/component';
+import { useTranslation } from 'react-i18next';
 
-import Markdown from './markdown.mdx';
+const Markdown_zh_CN = loadable(() => import('./markdown_zh-CN.mdx'));
+const Markdown_en_US = loadable(() => import('./markdown_en-US.mdx'));
+
+const fileMap: Record<string, React.ElementType> = {
+  'zh-CN': Markdown_zh_CN,
+  'en-US': Markdown_en_US,
+};
+
+export default function Page() {
+  const { i18n } = useTranslation();
+
+  const Markdown = fileMap[i18n.language] || null;
 
-export default function AnnotationConfig() {
   return (
     <MarkdownWithHighlight>
       <Markdown />

src/pages/guide.task-annotation.image/markdown_zh-CN.mdx

@@ -0,0 +1,55 @@
+import global from './global.png';
+import tool from './tool.png';
+
+## 图片标注
+
+标注流程说明：
+
+1. 判断任务是否为无效，若无效点击跳过，进入下一张图片，若有效，有标注任务时（目标检测、语意分割、线标注、点标注），标注工具和配置的一致
+2. 在全局标签上，可以勾选预先配置好的「标签分类」来给整个图片打上标签，也可以在「文本描述」下对于图片进行文字说明
+3. 在具体标记上，首先点击左上角的「工具样式」来选择标记方式，在图中完成该样式的标记后同步在右方的标记栏中。对于该标签的名称等信息可以手动点击后进行修改
+4. 在右侧标签结果管理栏单击标签结果可选中图片中对应标记，工具栏中选中工具切换为标签结果的工具。点击「修改」详细信息可下拉选择标签名称，点击「隐藏」按钮可隐藏这一条标记信息，点击「删除」按钮可删除这一条标记信息
+5. 选择「下一页」，进入下一个图片
+6. 重复1~5，直到标注完成
+
+### 全局标签
+
+<img src={global} />
+
+
+### 标记
+
+<img src={tool} />
+
+### 工具介绍
+
+<table>
+<thead>
+    <tr>
+        <th>工具样式</th>
+        <th style={{ whiteSpace: 'nowrap' }}>使用方法</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td>拉框标注</td>
+        <td>1. 选中拉框工具并配置标签，如轿车、公交车。<br />2. 单击鼠标左键标注第一点，画出框的范围之后再次单击左键，即可绘制出框。<br />3. 右键选中框之后，可以调整框的大小、有效性，也可以删除已标注的框。</td>
+    </tr>
+    <tr>
+        <td>标点标注</td>
+        <td>1. 选中标点工具并配置标签，如人体姿态14个关键点，包括头、脖子、左肩、右肩、左手肘、右手肘、左腕、右腕、左髋、右髋、左膝、右膝、左脚踝、右脚踝。<br />2. 单击鼠标左键标注指定关键点。<br />3. 右键选中点之后，可以调整点的位置、属性，也可以删除已标注的点。</td>
+    </tr>
+    <tr>
+        <td style={{ whiteSpace: 'nowrap' }}>多边形标注</td>
+        <td>1. 选中多边形工具并配置标签，如猫、狗。<br />2. 单击鼠标左键标注起始点，随后沿目标边缘多次单击左键，以此类推在围绕目标边缘右键连接最接近起始点后，即可绘制出多边形框。<br />3. 右键选中框之后，可以调整目标边缘关键点、线段、目标有效性，也可以删除已标注的多边形框。</td>
+    </tr>
+    <tr>
+        <td>标线标注</td>
+        <td>1. 选中线条工具并配置标签，如车道线。<br />2. 单击鼠标左键标注起始点，再次点击1+N后右键为终止点。<br />3. 操作Shift+左键则为垂直或水平线。</td>
+    </tr>
+    </tbody>
+</table>
+
+
+**注：** 在标记的过程中，可以点击「撤销」回退至上一步，也可以开启「显示顺序」按钮来看到标记的顺序，针对图片的调整也可以点击左下方的「图片调整」按钮来调整图片的饱和度，对比度，曝光度这些数值。
+以上操作都可以通过快捷键实现，具体的操作可以点击左上方「快捷键」按钮来进行查看。

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

@@ -1,8 +1,20 @@
 import MarkdownWithHighlight from '@/components/markdown-with-highlight';
+import loadable from '@loadable/component';
+import { useTranslation } from 'react-i18next';
 
-import Markdown from './markdown.mdx';
+const Markdown_zh_CN = loadable(() => import('./markdown_zh-CN.mdx'));
+const Markdown_en_US = loadable(() => import('./markdown_en-US.mdx'));
+
+const fileMap: Record<string, React.ElementType> = {
+  'zh-CN': Markdown_zh_CN,
+  'en-US': Markdown_en_US,
+};
+
+export default function Page() {
+  const { i18n } = useTranslation();
+
+  const Markdown = fileMap[i18n.language] || null;
 
-export default function AnnotationConfig() {
   return (
     <MarkdownWithHighlight>
       <Markdown />