From e7b76952740d373570b92f9d8e46e1ec05d0ee8e Mon Sep 17 00:00:00 2001
From: Neucrack <CZD666666@gmail.com>
Date: Wed, 3 Apr 2024 11:54:24 +0800
Subject: [PATCH] update docs

---
 README.md                           |   4 +-
 README_ZH.md                        |   4 +-
 docs/doc/zh/sidebar.yaml            |   5 +-
 docs/doc/zh/video/jpeg_streaming.md |  45 ++++
 docs/doc/zh/vision/ai.md            |  30 +++
 docs/doc/zh/vision/camera.md        |  63 +++++
 docs/doc/zh/vision/classify.md      |  42 ++++
 docs/doc/zh/vision/display.md       |   9 +-
 docs/doc/zh/vision/find_blobs.md    |  55 +++++
 docs/doc/zh/vision/image_ops.md     | 352 ++++++++++++++++++++++++++++
 docs/doc/zh/vision/maixhub_train.md |  19 ++
 docs/doc/zh/vision/yolov5.md        |  46 ++++
 docs/pages/index/README.md          |  66 ++----
 docs/pages/index_en/README.md       |  65 ++---
 14 files changed, 715 insertions(+), 90 deletions(-)
 create mode 100644 docs/doc/zh/video/jpeg_streaming.md

diff --git a/README.md b/README.md
index f32b8ea7..c09e94df 100644
--- a/README.md
+++ b/README.md
@@ -57,7 +57,7 @@ while 1:
 
 Result video:
 
-<video controls autoplay loop muted preload src="https://github.com/sipeed/MaixPy/assets/8625829/d06e4f0e-31af-4679-b3bc-1f93cd633af0" type="video/mp4">
+<video playsinline controls autoplay loop muted preload src="https://github.com/sipeed/MaixPy/assets/8625829/d06e4f0e-31af-4679-b3bc-1f93cd633af0" type="video/mp4">
 Classifier Result video
 </video>
 
@@ -75,7 +75,7 @@ print("received:", serial.read(timeout = 2000))
 
 We also provide a handy **[MaixVision](https://wiki.sipeed.com/en/maixvision)** workstation software to make development easier and faster:
 
-<video controls muted preload src="https://github.com/sipeed/MaixPy/assets/8625829/1168a282-d7c2-45bc-9ffb-c00de1ca24f5" type="video/mp4">
+<video playsinline controls muted preload src="https://github.com/sipeed/MaixPy/assets/8625829/1168a282-d7c2-45bc-9ffb-c00de1ca24f5" type="video/mp4">
 MaixVision
 </video>
 
diff --git a/README_ZH.md b/README_ZH.md
index d7fba9de..39932a6e 100644
--- a/README_ZH.md
+++ b/README_ZH.md
@@ -57,7 +57,7 @@ while 1:
 
 效果视频:
 
-<video controls autoplay loop muted preload src="https://github.com/sipeed/MaixPy/assets/8625829/d06e4f0e-31af-4679-b3bc-1f93cd633af0" type="video/mp4">
+<video playsinline controls autoplay loop muted preload src="https://github.com/sipeed/MaixPy/assets/8625829/d06e4f0e-31af-4679-b3bc-1f93cd633af0" type="video/mp4">
 Classifier Result video
 </video>
 
@@ -75,7 +75,7 @@ print("received:", serial.read(timeout = 2000))
 
 我们还提供了便捷的 **[MaixVision](https://wiki.sipeed.com/maixvision)** 工作站，让开发更简单快速：
 
-<video controls muted preload src="https://github.com/sipeed/MaixPy/assets/8625829/1168a282-d7c2-45bc-9ffb-c00de1ca24f5" type="video/mp4">
+<video playsinline controls muted preload src="https://github.com/sipeed/MaixPy/assets/8625829/1168a282-d7c2-45bc-9ffb-c00de1ca24f5" type="video/mp4">
 MaixVision
 </video>
 
diff --git a/docs/doc/zh/sidebar.yaml b/docs/doc/zh/sidebar.yaml
index 7a5ccdb7..dbb703bd 100644
--- a/docs/doc/zh/sidebar.yaml
+++ b/docs/doc/zh/sidebar.yaml
@@ -53,10 +53,11 @@ items:
     label: 自学习检测器
 -   file: vision/object_track.md
     label: 物体轨迹跟踪和计数
--   file: vision/maixhub_train.md
-    label: MaixHub 在线训练AI模型
 -   file: vision/ocr.md
     label: OCR 文字识别
+-   file: vision/maixhub_train.md
+    label: MaixHub 在线 AI 模型训练
+
 
 -   label: AI 听觉
 -   file: audio/record.md
diff --git a/docs/doc/zh/video/jpeg_streaming.md b/docs/doc/zh/video/jpeg_streaming.md
new file mode 100644
index 00000000..8b52010d
--- /dev/null
+++ b/docs/doc/zh/video/jpeg_streaming.md
@@ -0,0 +1,45 @@
+---
+title: MaixPy 视频流 JPEG 推流 / 发送图片到服务器
+update:
+  - date: 2024-04-03
+    author: neucrack
+    version: 1.0.0
+    content: 初版文档
+---
+
+## 简介
+
+有时需要将图像发送到服务器，或者将摄像头的视频推送到服务器，这里提供一个最简单的方法，即压缩成 `JPEG` 图片，然后一张一张地发送到服务器。
+
+注意，这是一种最简单的方法，不算很正规的视频推流方法，也不适合高分辨率高帧率的视频流，因为这只是一张一张发送图片，如果要高效推送视频流，请使用后文的 `RTSP` 或者 `RTMP` 模块。
+
+## 使用方法
+
+```python
+from maix import image
+import requests
+
+# create image
+img = image.Image(640, 480, image.Format.FMT_RGB)
+# draw something
+img.draw_rect(60, 60, 80, 80, image.Color.from_rgb(255, 0, 0))
+
+# convert to jpeg
+jpeg = img.to_format(image.Format.FMT_JPEG) # image.Format.FMT_PNG
+# get jpeg bytes
+jpeg_bytes = jpeg.to_bytes()
+
+# faster way, borrow memory from jpeg object,
+# but be carefully, when jpeg object is deleted, jpeg_bytes object MUST NOT be used, or program will crash
+# jpeg_bytes = jpeg.to_bytes(copy = False)
+
+# send image binary bytes to server
+url = "http://192.168.0.123:8080/upload"
+res = requests.post(url, data=jpeg_bytes)
+print(res.status_code)
+print(res.text)
+```
+
+可以看到，先将图片转换成了 `JPEG` 格式，然后将 `JPEG` 图片的二进制数据通过`TCP`发送到服务器。
+
+
diff --git a/docs/doc/zh/vision/ai.md b/docs/doc/zh/vision/ai.md
index e69de29b..5b3fe2da 100644
--- a/docs/doc/zh/vision/ai.md
+++ b/docs/doc/zh/vision/ai.md
@@ -0,0 +1,30 @@
+---
+title: AI 视觉基本知识
+update:
+  - date: 2024-04-03
+    author: neucrack
+    version: 1.0.0
+    content: 初版文档
+---
+
+
+## 简介
+
+如果没有 AI 基础，在学习 AI 前可以先看[什么是人工智能(AI)和机器学习](https://wiki.sipeed.com/ai/zh/basic/what_is_ai.html) 了解一下 AI 的基本概念。
+
+然后我们使用的视觉 AI 一般都是基于`深度神经网络学习`这个方法，有兴趣可以看看[深度神经网络（DNN）基础知识](https://wiki.sipeed.com/ai/zh/basic/dnn_basic.html)
+
+
+## MaixPy 中使用视觉 AI
+
+在 MaixPy 中使用视觉 AI 很简单，默认提供了常用的 AI 模型，不需要自己训练模型就可以直接使用，在[MaixHub 模型库](https://maixhub.com/model/zoo) 中选择`maixcam` 就可以找到。
+
+并且在底层已经封装好的 API，只需要简单的调用就可以实现。
+
+如果你想训练自己的模型，也可以先从[MaixHub 在线训练](https://maixhub.com/model/training/project) 开始，在线平台只需要点点点就能训练出模型，不需要购买昂贵的机器，不需要搭建复杂的开发环境，也不需要写代码，非常适合入门，也适合懒得翻代码的老手。
+
+一般训练得到了模型文件，直接传输到设备上，调用 MaixPy 的 API 就可以使用了，具体的调用方法看后文。
+
+
+
+
diff --git a/docs/doc/zh/vision/camera.md b/docs/doc/zh/vision/camera.md
index e69de29b..66fd19ee 100644
--- a/docs/doc/zh/vision/camera.md
+++ b/docs/doc/zh/vision/camera.md
@@ -0,0 +1,63 @@
+---
+title: MaixPy 摄像头使用
+update:
+  - date: 2024-04-03
+    author: neucrack
+    version: 1.0.0
+    content: 初版文档
+---
+
+
+## 简介
+
+对于 MaixCAM 默认搭载了 GC4653 摄像头，或者可选的 OS04A10 摄像头或者全局快门摄像头，甚至是 HDMI 转 MIPI 模块，都可以直接用简单的 API 调用。
+
+## API 文档
+
+本文介绍常用方法，更多 API 使用参考 [maix.camera](/api/maix/camera.html) 模块的文档。
+
+## 摄像头切换
+
+不同的摄像头使用不同的驱动，需要在系统中选择正确的驱动。
+
+TODO：如何切换摄像头，比如 GC4653 和 OS04A10 之间的切换。
+
+
+## 从摄像头获取图像
+
+使用 MaixPy 轻松获取：
+```python
+from maix import camera
+
+cam = camera.Camera(640, 480)
+
+while 1:
+    img = cam.read()
+    print(img)
+```
+
+这里我们从`maix`模块导入`camera`模块，然后创建一个`Camera`对象，指定图像的宽度和高度。然后在一个循环中不断读取图像， 默认出的图为`RGB`格式，如果需要`BGR`格式，其它格式请看 API 文档。
+
+## 跳过 开头的帧
+
+摄像头初始化的一小段时间，可能图像采集还没稳定出现奇怪的画面，可以通过`skip_frames`函数跳过开头的几帧：
+```python
+cam = camera.Camera(640, 480)
+cam.skip_frames(30)           # 跳过开头的30帧
+```
+
+## 显示图像
+
+MaixPy 提供了`display`模块，可以方便的显示图像：
+```python
+from maix import camera, display
+
+cam = camera.Camera(640, 480)
+disp = display.Display()
+
+while 1:
+    img = cam.read()
+    disp.show(img)
+```
+
+
diff --git a/docs/doc/zh/vision/classify.md b/docs/doc/zh/vision/classify.md
index e69de29b..f73037cc 100644
--- a/docs/doc/zh/vision/classify.md
+++ b/docs/doc/zh/vision/classify.md
@@ -0,0 +1,42 @@
+---
+title: MaixPy 使用 AI 模型进行物体分类
+---
+
+## 物体分类概念
+
+比如眼前有两张图片，一张图里面是苹果，另一张是飞机，物体分类的任务就是把两张图分别依次输入给 AI 模型，模型会依次输出两个结果，一个是苹果，一个是飞机。
+
+## MaixPy 中使用物体分类
+
+MaixPy 默认提供了 `imagenet` 数据集训练得到的 `1000`分类模型，可以直接使用：
+```python
+from maix import camera, display, image, nn
+
+classifier = nn.Classifier(model="/root/models/mobilenetv2.mud")
+cam = camera.Camera(classifier.input_width(), classifier.input_height(), classifier.input_format())
+dis = display.Display()
+
+while 1:
+    img = cam.read()
+    res = classifier.classify(img)
+    max_idx, max_prob = res[0]
+    msg = f"{max_prob:5.2f}: {classifier.labels[max_idx]}"
+    img.draw_string(10, 10, msg, image.COLOR_RED)
+    dis.show(img)
+```
+
+效果视频:
+
+<video playsinline controls autoplay loop muted preload src="https://wiki.sipeed.com/maixpy/static/video/classifier.mp4" type="video/mp4">
+Classifier Result video
+</video>
+
+这里使用了摄像头拍摄图像，然后传给 `classifier`进行识别，得出结果后，将结果显示在屏幕上。
+
+更多 API 使用参考 [maix.nn](/api/maix/nn.html) 模块的文档。
+
+
+## 训练自己的分类模型
+
+请到[MaixHub](https://maixhub.com) 学习并训练分类模型，创建项目时选择`分类模型`即可。
+
diff --git a/docs/doc/zh/vision/display.md b/docs/doc/zh/vision/display.md
index aa507362..fb3ce5af 100644
--- a/docs/doc/zh/vision/display.md
+++ b/docs/doc/zh/vision/display.md
@@ -12,6 +12,11 @@ update:
 
 MaixPy 提供了`display`模块，可以将图像显示到屏幕上，同时，也可以将图像发送到 MaixVision 显示，方便调试和开发。
 
+## API 文档
+
+本文介绍常用方法，更多 API 请看 API 文档的 [display](/api/maix/display.md) 部分。
+
+
 ## 使用屏幕
 
 * 导入`display`模块：
@@ -85,7 +90,3 @@ img.draw_string(10, 10, "Hello MaixPy!", color=image.Color.from_rgb(255, 255, 25
 img.send_to_maixvision()
 ```
 
-## 更多 API
-
-更多 API 请看 API 文档的 [display](../../../api/maix/display.md) 部分。
-
diff --git a/docs/doc/zh/vision/find_blobs.md b/docs/doc/zh/vision/find_blobs.md
index e69de29b..206bfb63 100644
--- a/docs/doc/zh/vision/find_blobs.md
+++ b/docs/doc/zh/vision/find_blobs.md
@@ -0,0 +1,55 @@
+---
+title: MaixPy 找色块
+update:
+  - date: 2024-04-03
+    author: neucrack
+    version: 1.0.0
+    content: 初版文档
+---
+
+## 简介
+
+在视觉应用中，找色块是一个非常常见的需求，比如机器人找色块，自动化生产线找色块等等。
+即需要识别画面中的特定的颜色区域，获取这个区域的位置和大小等信息。
+
+
+## 使用设备自带的找色块应用
+
+打开设备，选择`找色块`应用，然后在下方选择要识别的颜色，或者自定义颜色，即可以识别到对应的颜色了，同时串口也会输出识别到的坐标和颜色信息。
+
+<video src="/static/video/find_blobs.mp4" controls="controls" width="100%" height="auto"></video>
+
+### 自定义颜色的方法
+
+TODO：
+
+### 串口协议
+
+TODO：
+
+## 使用 MaixPy 找色块
+
+`maix.image.Image`中提供了`find_blobs`方法，可以方便的找色块。
+
+```python
+from maix import image, camera, display
+
+cam = camera.Camera(320, 240)
+disp = display.Display()
+
+thresholds = [[0, 100, -120, -10, 0, 30]]
+
+while 1:
+    img = cam.read()
+    blobs = img.find_blobs(thresholds)
+    for blob in blobs:
+        img.draw_rectangle(blob[0], blob[1], blob[2], blob[3], color=(255, 0, 0))
+    disp.show(img)
+```
+
+这里的 `thresholds` 是一个颜色阈值列表，每个元素是一个颜色阈值，同时找到多个阈值就传入多个，每个颜色阈值的格式为 `[L_MIN, L_MAX, A_MIN, A_MAX, B_MIN, B_MAX]`，这里的 `L`、`A`、`B` 是`LAB`颜色空间的三个通道，`L` 通道是亮度，`A` 通道是红绿通道，`B` 通道是蓝黄通道。
+可以在上面使用`找色块`应用中找到被检测物体对应的颜色阈值。
+
+更多参数和用法请参考 API 文档。
+
+
diff --git a/docs/doc/zh/vision/image_ops.md b/docs/doc/zh/vision/image_ops.md
index e69de29b..33bac057 100644
--- a/docs/doc/zh/vision/image_ops.md
+++ b/docs/doc/zh/vision/image_ops.md
@@ -0,0 +1,352 @@
+---
+title: MaixPy 图像基础操作
+update:
+  - date: 2024-04-03
+    author: neucrack
+    version: 1.0.0
+    content: 初版文档
+---
+
+## 简介
+
+视觉应用中图像占据非常重要的位置，不管是图片还是视频，因为视频本质上就是一帧帧的图像，所以图像处理是视觉应用的基础。
+
+## API 文档
+
+本文介绍常用方法， 更多 API 参考 [maix.image](/api/maix/image.html) 模块的文档。
+
+## 图像格式
+
+MaixPy 提供基础图像模块`image`，里面最重要的就是`image.Image`类，用于图像的创建以及各种图像基础操作，以及图像加载和保存等。
+
+图像格式有很多，一般我们用`image.Format.FMT_RGB888` 或者 `image.Format.FMT_RGBA8888` 或者 `image.Format.FMT_GRAYSCALE`或者`image.Format.FMT_BGR888`等。
+
+大家知道 `RGB` 三色可以合成任意颜色，所以一般情况下我们使用 `image.Format.FMT_RGB888`就足够， `RGB888` 在内存中是 `RGB packed` 排列，即在内存中的排列：
+`像素1_红色, 像素1_绿色, 像素1_蓝色, 像素2_红色, 像素2_绿色, 像素2_蓝色, ...` 依次排列。
+
+
+## 创建图像
+
+创建图像很简单，只需要指定图像的宽度和高度以及图像格式即可：
+```python
+from maix import image
+
+img = image.Image(320, 240, image.Format.FMT_RGB888)
+print(img)
+print(img.width(), img.height(), img.format())
+```
+
+`320` 是图像的宽度，`240` 是图像的高度，`image.Format.FMT_RGB888` 是图像的格式，格式参数可以省略，默认是`image.Format.FMT_RGB888`。
+
+这里通过`img.width()`、`img.height()`、`img.format()`可以获取图像的宽度、高度和格式。
+
+## 显示到屏幕
+
+MaixPy 提供了`maix.display.Display`类，可以方便的显示图像：
+
+```python
+from maix import image, display
+
+disp = display.Display()
+
+img = image.Image(320, 240, image.Format.FMT_RGB888)
+disp.show(img)
+```
+
+注意这里因为没有图像数据，所以显示的是黑色的图像，修改画面看后文。
+
+
+## 从文件系统读取图像
+
+MaixPy 提供了`maix.image.load`方法，可以从文件系统读取图像：
+
+```python
+from maix import image
+
+img = image.load("/root/image.jpg")
+print(img)
+```
+
+注意这里`/root/image.jpg` 是提前传输到了板子上的，方法可以看前面的教程。
+可以支持 `jpg` 和 `png` 格式的图像。
+
+
+## 保存图像到文件系统
+
+MaixPy 的`maix.image.Image`提供了`save`方法，可以保存图像到文件系统：
+
+```python
+from maix import image
+
+img = image.Image(320, 240, image.Format.FMT_RGB888)
+
+# do something with img
+img.save("/root/image.jpg")
+```
+
+## 画框
+
+`image.Image`提供了`draw_rect`方法，可以在图像上画框：
+
+```python
+from maix import image
+
+img = image.Image(320, 240, image.Format.FMT_RGB888)
+img.draw_rect(10, 10, 100, 100, image.Color.from_rgb(255, 0, 0))
+```
+
+这里的参数依次是：`x`, `y`, `w`, `h`, `color`，`x` 和 `y` 是框的左上角坐标，`w` 和 `h` 是框的宽度和高度，`color` 是框的颜色，可以使用`image.Color.from_rgb`方法创建颜色。
+可以用`thickness`指定框的线宽，默认是`1`，
+
+也可以画实心框，传参 `thickness=-1` 即可：
+
+```python
+from maix import image
+
+img = image.Image(320, 240, image.Format.FMT_RGB888)
+img.draw_rect(10, 10, 100, 100, (255, 0, 0), thickness=-1)
+```
+
+
+## 写字符串
+
+`image.Image`提供了`draw_string`方法，可以在图像上写字：
+
+```python
+from maix import image
+
+img = image.Image(320, 240, image.Format.FMT_RGB888)
+img.draw_string(10, 10, "Hello MaixPy", image.Color.from_rgb(255, 0, 0))
+```
+
+这里的参数依次是：`x`, `y`, `text`, `color`，`x` 和 `y` 是文字的左上角坐标，`text` 是要写的文字，`color` 是文字的颜色，可以使用`image.Color.from_rgb`方法创建颜色。
+
+还可以放大字体，传参 `scale` 即可：
+
+```python
+img.draw_string(10, 10, "Hello MaixPy", image.Color.from_rgb(255, 0, 0), scale=2)
+```
+
+获取字体的宽度和高度：
+
+```python
+w, h = img.string_size("Hello MaixPy", scale=2)
+print(w, h)
+```
+
+**注意**这里`scale`是放大倍数，默认是`1`，和`draw_string`应该保持一致。
+
+
+## 画线
+
+`image.Image`提供了`draw_line`方法，可以在图像上画线：
+
+```python
+from maix import image
+
+img = image.Image(320, 240, image.Format.FMT_RGB888)
+img.draw_line(10, 10, 100, 100, image.Color.from_rgb(255, 0, 0))
+```
+
+这里的参数依次是：`x1`, `y1`, `x2`, `y2`, `color`，`x1` 和 `y1` 是线的起点坐标，`x2` 和 `y2` 是线的终点坐标，`color` 是线的颜色，可以使用`image.Color.from_rgb`方法创建颜色。
+
+## 画圆
+
+`image.Image`提供了`draw_circle`方法，可以在图像上画圆：
+
+```python
+from maix import image
+
+img = image.Image(320, 240, image.Format.FMT_RGB888)
+img.draw_circle(100, 100, 50, image.Color.from_rgb(255, 0, 0))
+```
+
+这里的参数依次是：`x`, `y`, `r`, `color`，`x` 和 `y` 是圆心坐标，`r` 是半径，`color` 是圆的颜色，可以使用`image.Color.from_rgb`方法创建颜色。
+
+## 缩放图像
+
+`image.Image`提供了`resize`方法，可以缩放图像：
+
+```python
+from maix import image
+
+img = image.Image(320, 240, image.Format.FMT_RGB888)
+img_new = img.resize(160, 120)
+print(img, img_new)
+```
+
+注意这里`resize`方法返回一个新的图像对象，原图像不变。
+
+## 剪裁图像
+
+`image.Image`提供了`crop`方法，可以剪裁图像：
+
+```python
+from maix import image
+
+img = image.Image(320, 240, image.Format.FMT_RGB888)
+img_new = img.crop(10, 10, 100, 100)
+print(img, img_new)
+```
+
+注意这里`crop`方法返回一个新的图像对象，原图像不变。
+
+## 旋转图像
+
+`image.Image`提供了`rotate`方法，可以旋转图像：
+
+```python
+from maix import image
+
+img = image.Image(320, 240, image.Format.FMT_RGB888)
+img_new = img.rotate(90)
+print(img, img_new)
+```
+
+注意这里`rotate`方法返回一个新的图像对象，原图像不变。
+
+## 拷贝图像
+
+`image.Image`提供了`copy`方法，可以拷贝一份独立的图像：
+
+```python
+from maix import image
+
+img = image.Image(320, 240, image.Format.FMT_RGB888)
+img_new = img.copy()
+print(img, img_new)
+```
+
+## 仿射变换
+
+`image.Image`提供了`affine`方法，可以进行仿射变换，即提供当前图中三个及以上的点坐标，以及目标图中对应的点坐标，可以自动进行图像的旋转、缩放、平移等操作变换到目标图像：
+
+
+```python
+from maix import image
+
+img = image.Image(320, 240, image.Format.FMT_RGB888)
+img_new = img.affine([(10, 10), (100, 10), (10, 100)], [(10, 10), (100, 20), (20, 100)])
+print(img, img_new)
+```
+
+更多参数和用法请参考 API 文档。
+
+## 画关键点
+
+`image.Image`提供了`draw_keypoints`方法，可以在图像上画关键点：
+
+```python
+from maix import image
+
+img = image.Image(320, 240, image.Format.FMT_RGB888)
+
+keypoints = [(10, 10), (100, 10), (10, 100)]
+img.draw_keypoints(keypoints, image.Color.from_rgb(255, 0, 0), size=10, thickness=1, fill=False)
+```
+
+在坐标`(10, 10)`、`(100, 10)`、`(10, 100)`画三个红色的关键点，关键点的大小是`10`，线宽是`1`，不填充。
+
+
+
+## 画十字
+
+`image.Image`提供了`draw_cross`方法，可以在图像上画十字：
+
+```python
+from maix import image
+
+img = image.Image(320, 240, image.Format.FMT_RGB888)
+img.draw_cross(100, 100, image.Color.from_rgb(255, 0, 0), size=5, thickness=1)
+```
+
+在坐标`(100, 100)`画一个红色的十字，十字的延长大小是`5`，所以线段长度为`2 * size + thickness`, 线宽是`1`。
+
+## 画箭头
+
+`image.Image`提供了`draw_arrow`方法，可以在图像上画箭头：
+
+```python
+from maix import image
+
+img = image.Image(320, 240, image.Format.FMT_RGB888)
+img.draw_arrow(10, 10, 100, 100, image.Color.from_rgb(255, 0, 0), thickness=1)
+```
+
+在坐标`(10, 10)`画一个红色的箭头，箭头的终点是`(100, 100)`，线宽是`1`。
+
+
+## 画图
+
+`image.Image`提供了`draw_image`方法，可以在图像上画图：
+
+```python
+from maix import image
+
+img = image.Image(320, 240, image.Format.FMT_RGB888)
+img2 = image.Image(100, 100, image.Format.FMT_RGB888)
+img2.draw_rect(10, 10, 90, 90, image.Color.from_rgb(255, 0, 0))
+img.draw_image(10, 10, img2)
+```
+
+
+## 转换格式
+
+`image.Image`提供了`to_format`方法，可以转换图像格式：
+
+```python
+from maix import image
+
+img = image.Image(320, 240, image.Format.FMT_RGB888)
+img_new = img.to_format(image.Format.FMT_BGR888)
+print(img, img_new)
+img_jpg = img.to_format(image.Format.FMT_JPEG)
+print(img, img_new)
+```
+
+注意这里`to_format`方法返回一个新的图像对象，原图像不变。
+
+## 和 Numpy/OpenCV 格式互相转换
+
+另外还可以转换成`numpy`数组，这样就能给`numpy`和`opencv`等库使用：
+
+```python
+from maix import image
+
+img = image.Image(320, 240, image.Format.FMT_RGB888)
+img_np = image.image2cv(img)
+img2   = image.cv2image(img_np)
+print(type(img_np), img_np, img_np.shape)
+print(type(img2), img2)
+```
+
+## 和 bytes 数据互相转换
+
+`image.Image`提供了`to_bytes`方法，可以转换图像为`bytes`数据：
+
+```python
+from maix import image
+
+img = image.Image(320, 240, image.Format.FMT_RGB888)
+data = img.to_bytes()
+print(type(data), len(data), img.data_size())
+
+img2 = image.Image(320, 240, image.Format.FMT_RGB888, data)
+print(img2)
+```
+
+这里`to_bytes`获得一个新的`bytes`对象，是独立的内存，不会影响原图。
+`image.Image`构造函数中传入`data`参数可以直接从`bytes`数据构造图像对象，注意新的图像也是独立的内存，不会影响到`data`。
+
+因为涉及到内存拷贝，所以这个方法比较耗时，不建议频繁使用。
+> 如果你想用不拷贝的方式优化程序（不建议轻易使用，写不好代码会导致程序容易崩溃，），请看 API 文档。
+
+
+## 更多基础 API 使用方法
+
+更多 API 使用方法请参考 [maix.image](/api/maix/image.html) 模块的文档。
+
+
+
+
+
diff --git a/docs/doc/zh/vision/maixhub_train.md b/docs/doc/zh/vision/maixhub_train.md
index e69de29b..21f7d374 100644
--- a/docs/doc/zh/vision/maixhub_train.md
+++ b/docs/doc/zh/vision/maixhub_train.md
@@ -0,0 +1,19 @@
+---
+title: 使用 MaixHub 在线训练 AI 模型给 MaixPy 使用
+update:
+  - date: 2024-04-03
+    author: neucrack
+    version: 1.0.0
+    content: 初版文档
+---
+
+## 简介
+
+MaixHub 提供了在线训练 AI 模型的功能，可以直接在浏览器中训练模型，不需要购买昂贵的机器，不需要搭建复杂的开发环境，也不需要写代码，非常适合入门，也适合懒得翻代码的老手。
+
+## 使用方法
+
+请到 [MaixHub](https://maixhub.com) 注册账号，然后登录，主页有视频教程，学习即可。
+
+注意 `物体分类模型` 比 `物体检测模型` 更简单，因为物体检测需要标注物体在图中的位置，会比较麻烦， 如果是初学者建议先从物体分类开始。
+
diff --git a/docs/doc/zh/vision/yolov5.md b/docs/doc/zh/vision/yolov5.md
index e69de29b..98ffb899 100644
--- a/docs/doc/zh/vision/yolov5.md
+++ b/docs/doc/zh/vision/yolov5.md
@@ -0,0 +1,46 @@
+---
+title: MaixPy 使用 YOLOv5 模型进行目标检测
+---
+
+
+## 目标检测概念
+
+目标检测是指在图像或视频中检测出目标的位置和类别，比如在一张图中检测出苹果、飞机等物体，并且标出物体的位置。
+
+和分类不同的是多了一个位置信息，所以目标检测的结果一般是一个矩形框，框出物体的位置。
+
+## MaixPy 中使用目标检测
+
+MaixPy 默认提供了 `YOLOv5` 模型，可以直接使用：
+
+```python
+from maix import camera, display, image, nn, app
+
+detector = nn.YOLOv5(model="/root/models/yolov5s.mud")
+
+cam = camera.Camera(detector.input_width(), detector.input_height(), detector.input_format())
+dis = display.Display()
+
+while not app.need_exit():
+    img = cam.read()
+    objs = detector.detect(img, conf_th = 0.5, iou_th = 0.45)
+    for obj in objs:
+        img.draw_rect(obj.x, obj.y, obj.w, obj.h, color = image.COLOR_RED)
+        msg = f'{detector.labels[obj.class_id]}: {obj.score:.2f}'
+        img.draw_string(obj.x, obj.y, msg, color = image.COLOR_RED)
+    dis.show(img)
+```
+
+效果视频:
+
+<video playsinline controls autoplay loop muted preload src="https://wiki.sipeed.com/maixpy/static/video/detector.mp4" type="video/mp4">
+
+
+这里使用了摄像头拍摄图像，然后传给 `detector`进行检测，得出结果后，将结果(分类名称和位置)显示在屏幕上。
+
+更多 API 使用参考 [maix.nn](/api/maix/nn.html) 模块的文档。
+
+## 训练自己的目标检测模型
+
+请到[MaixHub](https://maixhub.com) 学习并训练目标检测模型，创建项目时选择`目标检测模型`即可。
+
diff --git a/docs/pages/index/README.md b/docs/pages/index/README.md
index 0b2f03cb..3ca00219 100644
--- a/docs/pages/index/README.md
+++ b/docs/pages/index/README.md
@@ -9,14 +9,16 @@ id: home_page
 </div>
 
 <style>
-
+.md_page #page_content
+{
+    padding: 1em;
+}
 .md_page #page_content > div
 {
     width: 100%;
     max-width: 100%;
     text-align: left;
 }
-
 @media (min-width: 1280px) {
     .md_page #page_content > div
     {
@@ -24,28 +26,24 @@ id: home_page
         max-width: 1440px;
     }
 }
-
 h1 {
     font-size: 3em;
     font-weight: 600;
     margin-top: 0.67em;
     margin-bottom: 0.67em;
 }
-
 h2 {
     font-size: 1.6em;
     font-weight: 600;
     margin-top: 1em;
     margin-bottom: 0.67em;
 }
-
 h3 {
     font-size: 1.5em;
     font-weight: 400;
     margin-top: 0.5em;
     margin-bottom: 0.5em;
 }
-
 #tags > p {
     display: flex;
     justify-content: center;
@@ -54,11 +52,9 @@ h3 {
 #tags > p a {
     margin: 0 0.2em;
 }
-
 #feature video, #feature img {
     height: 15em;
 }
-
 .feature_item {
     display: flex;
     flex-direction: column;
@@ -70,46 +66,37 @@ h3 {
     overflow: hidden;
     max-width: 20em;
 }
-
 .feature_item .feature {
     font-size: 1.2em;
     font-weight: 600;
 }
-
 .feature_item .description {
     font-size: 0.8em;
     font-weight: 400;
 }
-
 .feature_item video, .feature_item img {
     width: 100%;
     object-fit: cover;
 }
-
 .feature_item .img_video {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }
-
-
 .feature_item > div {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
 }
-
 .feature_item p {
     padding: 0.5em;
 }
-
 #page_content li {
     margin: 0.5em;
     list-style-type: disc;
 }
-
 </style>
 
 <div class="w-full flex flex-col justify-center text-center">
@@ -120,16 +107,16 @@ h3 {
     <h3>快速落地 AI 视觉、听觉应用</h3>
 </div>
 
-<div id="big_btn_wrapper" class="text-center p-4">
-    <a class="btn" href="/doc/zh/index.html">快速开始 🚀📖</a>
-    <a class="btn" href="/api/">API 参考 📚</a>
-    <a class="btn" target="_blank" href="https://wiki.sipeed.com/maixcam">硬件平台：MaixCAM 📷</a>
-    <a class="btn" target="_blank" href="https://github.com/sipeed/maixpy">开源仓库 ⭐️</a>
+<div id="big_btn_wrapper" class="flex flex-wrap justify-center items-center">
+    <a class="btn m-1" href="/doc/zh/index.html">快速开始 🚀📖</a>
+    <a class="btn m-1" href="/api/">API 参考 📚</a>
+    <a class="btn m-1" target="_blank" href="https://wiki.sipeed.com/maixcam">硬件平台：MaixCAM 📷</a>
+    <a class="btn m-1" target="_blank" href="https://github.com/sipeed/maixpy">开源仓库 ⭐️</a>
 </div>
 
 <div class="flex justify-center" id="tags">
 
-[![GitHub Repo stars](https://img.shields.io/github/stars/sipeed/MaixPy?style=social)](https://github.com/sipeed/MaixPy/stargazers)[![Apache 2.0](https://img.shields.io/badge/license-Apache%20v2.0-orange.svg)]("https://github.com/sipeed/MaixPy/blob/main/LICENSE.md)[![PyPI](https://img.shields.io/pypi/v/maixpy.svg)](https://pypi.python.org/pypi/maixpy/)[![PyPI - Downloads](https://img.shields.io/pypi/dm/maixpy?label=pypi%20downloads)](https://pypi.org/project/maixpy/)![GitHub repo size](https://img.shields.io/github/repo-size/sipeed/maixpy) [![Build MaixCAM](https://github.com/sipeed/MaixPy/actions/workflows/build_maixcam.yml/badge.svg)](https://github.com/sipeed/MaixPy/actions/workflows/build_maixcam.yml)[![Trigger wiki](https://github.com/sipeed/MaixPy/actions/workflows/trigger_wiki.yml/badge.svg)](https://github.com/sipeed/MaixPy/actions/workflows/trigger_wiki.yml)
+[![GitHub Repo stars](https://img.shields.io/github/stars/sipeed/MaixPy?style=social)](https://github.com/sipeed/MaixPy)[![Apache 2.0](https://img.shields.io/badge/license-Apache%20v2.0-orange.svg)]("https://github.com/sipeed/MaixPy/blob/main/LICENSE.md)[![PyPI](https://img.shields.io/pypi/v/maixpy.svg)](https://pypi.python.org/pypi/maixpy/)[![PyPI - Downloads](https://img.shields.io/pypi/dm/maixpy?label=pypi%20downloads)](https://pypi.org/project/maixpy/)[![GitHub repo size](https://img.shields.io/github/repo-size/sipeed/maixpy)](https://github.com/sipeed/MaixPy) [![Build MaixCAM](https://github.com/sipeed/MaixPy/actions/workflows/build_maixcam.yml/badge.svg)](https://github.com/sipeed/MaixPy/actions/workflows/build_maixcam.yml)[![Trigger wiki](https://github.com/sipeed/MaixPy/actions/workflows/trigger_wiki.yml/badge.svg)](https://github.com/sipeed/MaixPy/actions/workflows/trigger_wiki.yml)
 
 
 </div>
@@ -150,8 +137,7 @@ h3 {
 <div class="mt-6"></div>
 
 <div id="id1" class="flex flex-row justify-start flex-wrap">
-
-<div>
+<div class="w-full">
 <h2>简易的 API 设计， 10 行代码进行 AI 图像识别：</h2>
 
 ```python
@@ -171,18 +157,17 @@ while 1:
 ```
 
 </div>
-
-<video controls autoplay loop muted preload  class="pl-6 pb-4 self-end" src="/static/video/classifier.mp4" type="video/mp4">
+<video playsinline controls autoplay loop muted preload  class="pl-6 pb-4 self-end" src="/static/video/classifier.mp4" type="video/mp4">
 Classifier Result video
 </video>
-
 </div> <!-- id1 -->
 
 
 <!-- div start-->
+<div class="w-full">
 <h2>硬件外设控制，不在话下：</h2>
-<div class="flex flex-row justify-start flex-wrap">
-<div class="mr-4">
+<div class="w-full flex flex-row justify-start flex-wrap">
+<div class="w-full mr-4">
 
 串口收发：
 
@@ -197,7 +182,7 @@ print("received:", serial.read(timeout = 2000))
 ```
 
 </div>
-<div>
+<div class="w-full">
 
 I2C 收发：
 
@@ -211,6 +196,7 @@ dev1.writeto(0x12, b'hello')
 print("received:", dev1.readfrom(0x12, 5))
 ```
 
+</div>
 </div>
 </div>
 <!-- div end-->
@@ -220,7 +206,7 @@ print("received:", dev1.readfrom(0x12, 5))
 
 简化开发环境，让开发更简单快速：
 
-<video controls muted preload src="/static/video/maixvision.mp4" type="video/mp4" style="height:20em;">
+<video playsinline controls muted preload src="/static/video/maixvision.mp4" type="video/mp4" style="height:20em;">
 MaixVision
 </video>
 
@@ -264,7 +250,7 @@ MaixVision
 <div class="flex flex-wrap justify-between">
     <div class="feature_item">
         <div class="img_video">
-            <video controls autoplay loop muted preload src="/static/video/maixvision.mp4"></video>
+            <video playsinline controls autoplay loop muted preload src="/static/video/maixvision.mp4"></video>
             <p class="feature">Python + MaixVision IDE</p>
             <p class="description">简单的API，带有硬件加速，包含许多库，如numpy，opencv，MaixVision IDE 编程</p>
         </div>
@@ -291,7 +277,7 @@ MaixVision
     </div>
     <div class="feature_item">
         <div class="img_video">
-            <video controls autoplay loop muted preload src="/static/video/app_store.mp4"></video>
+            <video playsinline controls autoplay loop muted preload src="/static/video/app_store.mp4"></video>
             <p class="feature">APP商店</p>
             <p class="description">将您的APP分享给社区，并一键安装<a href="https://maixhub.com/app">APPs</a>。</p>
         </div>
@@ -309,7 +295,7 @@ MaixVision
     </div>
     <div class="feature_item">
         <div class="img_video">
-            <video controls autoplay loop muted preload src="/static/video/classifier.mp4"></video>
+            <video playsinline controls autoplay loop muted preload src="/static/video/classifier.mp4"></video>
             <p class="feature">AI 分类</p>
             <p class="description">识别物体类别</p>
         </div>
@@ -318,7 +304,7 @@ MaixVision
     </div>
     <div class="feature_item">
         <div class="img_video">
-            <video controls autoplay loop muted preload src="/static/video/detector.mp4"></video>
+            <video playsinline controls autoplay loop muted preload src="/static/video/detector.mp4"></video>
             <p class="feature">AI 对象检测</p>
             <p class="description">识别物体类别和坐标</p>
         </div>
@@ -381,7 +367,7 @@ MaixVision
     </div>
     <div class="feature_item">
         <div class="img_video">
-            <video controls autoplay loop muted preload src="/static/video/find_blobs.mp4"></video>
+            <video playsinline controls autoplay loop muted preload src="/static/video/find_blobs.mp4"></video>
             <p class="feature">查找颜色</p>
             <p class="description">查找颜色斑点</p>
         </div>
@@ -390,7 +376,7 @@ MaixVision
     </div>
     <div class="feature_item">
         <div class="img_video">
-            <video controls autoplay loop muted preload src="/static/video/line_track.mp4"></video>
+            <video playsinline controls autoplay loop muted preload src="/static/video/line_track.mp4"></video>
             <p class="feature">巡线</p>
             <p class="description">小车巡线，物流搬运</p>
         </div>
@@ -399,7 +385,7 @@ MaixVision
     </div>
     <div class="feature_item">
         <div class="img_video">
-            <video controls autoplay loop muted preload src="/static/video/qr_apriltag.mp4"></video>
+            <video playsinline controls autoplay loop muted preload src="/static/video/qr_apriltag.mp4"></video>
             <p class="feature">QR码和AprilTag</p>
             <p class="description">识别QR码和AprilTag</p>
         </div>
@@ -426,7 +412,7 @@ MaixVision
     </div>
     <div class="feature_item">
         <div class="img_video">
-            <video controls autoplay loop muted preload src="/static/video/desktop_monitor.mp4"></video>
+            <video playsinline controls autoplay loop muted preload src="/static/video/desktop_monitor.mp4"></video>
             <p class="feature">桌面监视器</p>
             <p class="description">监视PC信息，如CPU，内存，网络等。</p>
         </div>
diff --git a/docs/pages/index_en/README.md b/docs/pages/index_en/README.md
index 0f62a6c5..3c11f69a 100644
--- a/docs/pages/index_en/README.md
+++ b/docs/pages/index_en/README.md
@@ -9,14 +9,16 @@ id: home_page
 </div>
 
 <style>
-
+.md_page #page_content
+{
+    padding: 1em;
+}
 .md_page #page_content > div
 {
     width: 100%;
     max-width: 100%;
     text-align: left;
 }
-
 @media (min-width: 1280px) {
     .md_page #page_content > div
     {
@@ -24,28 +26,24 @@ id: home_page
         max-width: 1440px;
     }
 }
-
 h1 {
     font-size: 3em;
     font-weight: 600;
     margin-top: 0.67em;
     margin-bottom: 0.67em;
 }
-
 h2 {
     font-size: 1.6em;
     font-weight: 600;
     margin-top: 1em;
     margin-bottom: 0.67em;
 }
-
 h3 {
     font-size: 1.5em;
     font-weight: 400;
     margin-top: 0.5em;
     margin-bottom: 0.5em;
 }
-
 #tags > p {
     display: flex;
     justify-content: center;
@@ -54,11 +52,9 @@ h3 {
 #tags > p a {
     margin: 0 0.2em;
 }
-
 #feature video, #feature img {
     height: 15em;
 }
-
 .feature_item {
     display: flex;
     flex-direction: column;
@@ -70,46 +66,37 @@ h3 {
     overflow: hidden;
     max-width: 20em;
 }
-
 .feature_item .feature {
     font-size: 1.2em;
     font-weight: 600;
 }
-
 .feature_item .description {
     font-size: 0.8em;
     font-weight: 400;
 }
-
 .feature_item video, .feature_item img {
     width: 100%;
     object-fit: cover;
 }
-
 .feature_item .img_video {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }
-
-
 .feature_item > div {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
 }
-
 .feature_item p {
     padding: 0.5em;
 }
-
 #page_content li {
     margin: 0.5em;
     list-style-type: disc;
 }
-
 </style>
 
 <div class="w-full flex flex-col justify-center text-center">
@@ -120,16 +107,16 @@ h3 {
     <h3>Easily create AI projects with Python on edge device</h3>
 </div>
 
-<div id="big_btn_wrapper" class="text-center p-4">
-    <a class="btn" href="/doc/en/index.html">Quick Start 🚀📖</a>
-    <a class="btn" href="/api/">API Reference 📚</a>
-    <a class="btn" target="_blank" href="https://wiki.sipeed.com/maixcam">Hardware：MaixCAM 📷</a>
-    <a class="btn" target="_blank" href="https://github.com/sipeed/maixpy">Source Code ⭐️</a>
+<div id="big_btn_wrapper" class="flex flex-wrap justify-center items-center">
+    <a class="btn m-1" href="/doc/en/index.html">Quick Start 🚀📖</a>
+    <a class="btn m-1" href="/api/">API Reference 📚</a>
+    <a class="btn m-1" target="_blank" href="https://wiki.sipeed.com/maixcam">Hardware：MaixCAM 📷</a>
+    <a class="btn m-1" target="_blank" href="https://github.com/sipeed/maixpy">Source Code ⭐️</a>
 </div>
 
 <div class="flex justify-center" id="tags">
 
-[![GitHub Repo stars](https://img.shields.io/github/stars/sipeed/MaixPy?style=social)](https://github.com/sipeed/MaixPy/stargazers)[![Apache 2.0](https://img.shields.io/badge/license-Apache%20v2.0-orange.svg)]("https://github.com/sipeed/MaixPy/blob/main/LICENSE.md)[![PyPI](https://img.shields.io/pypi/v/maixpy.svg)](https://pypi.python.org/pypi/maixpy/)[![PyPI - Downloads](https://img.shields.io/pypi/dm/maixpy?label=pypi%20downloads)](https://pypi.org/project/maixpy/)![GitHub repo size](https://img.shields.io/github/repo-size/sipeed/maixpy) [![Build MaixCAM](https://github.com/sipeed/MaixPy/actions/workflows/build_maixcam.yml/badge.svg)](https://github.com/sipeed/MaixPy/actions/workflows/build_maixcam.yml)[![Trigger wiki](https://github.com/sipeed/MaixPy/actions/workflows/trigger_wiki.yml/badge.svg)](https://github.com/sipeed/MaixPy/actions/workflows/trigger_wiki.yml)
+[![GitHub Repo stars](https://img.shields.io/github/stars/sipeed/MaixPy?style=social)](https://github.com/sipeed/MaixPy)[![Apache 2.0](https://img.shields.io/badge/license-Apache%20v2.0-orange.svg)]("https://github.com/sipeed/MaixPy/blob/main/LICENSE.md)[![PyPI](https://img.shields.io/pypi/v/maixpy.svg)](https://pypi.python.org/pypi/maixpy/)[![PyPI - Downloads](https://img.shields.io/pypi/dm/maixpy?label=pypi%20downloads)](https://pypi.org/project/maixpy/)[![GitHub repo size](https://img.shields.io/github/repo-size/sipeed/maixpy)](https://github.com/sipeed/MaixPy) [![Build MaixCAM](https://github.com/sipeed/MaixPy/actions/workflows/build_maixcam.yml/badge.svg)](https://github.com/sipeed/MaixPy/actions/workflows/build_maixcam.yml)[![Trigger wiki](https://github.com/sipeed/MaixPy/actions/workflows/trigger_wiki.yml/badge.svg)](https://github.com/sipeed/MaixPy/actions/workflows/trigger_wiki.yml)
 
 
 </div>
@@ -148,10 +135,8 @@ English | [中文](/)
 
 
 <div class="mt-6"></div>
-
 <div id="id1" class="flex flex-row justify-start flex-wrap">
-
-<div>
+<div class="w-full">
 <h2>Easy-to-use API, AI vision classify in 10 lines</h2>
 
 ```python
@@ -171,18 +156,17 @@ while 1:
 ```
 
 </div>
-
-<video controls autoplay loop muted preload  class="pl-6 pb-4 self-end" src="/static/video/classifier.mp4" type="video/mp4">
+<video playsinline controls autoplay loop muted preload  class="pl-6 pb-4 self-end" src="/static/video/classifier.mp4" type="video/mp4">
 Classifier Result video
 </video>
-
 </div> <!-- id1 -->
 
 
 <!-- div start-->
+<div class="w-full">
 <h2>Hardware peripheral control:</h2>
 <div class="flex flex-row justify-start flex-wrap">
-<div class="mr-4">
+<div class="w-full mr-4">
 
 Serial send and receive:
 
@@ -197,7 +181,7 @@ print("received:", serial.read(timeout = 2000))
 ```
 
 </div>
-<div>
+<div class="w-full">
 
 I2C send and receive:
 
@@ -211,6 +195,7 @@ dev1.writeto(0x12, b'hello')
 print("received:", dev1.readfrom(0x12, 5))
 ```
 
+</div>
 </div>
 </div>
 <!-- div end-->
@@ -220,7 +205,7 @@ print("received:", dev1.readfrom(0x12, 5))
 
 Simplify the development environment, make development easier and faster:
 
-<video controls muted preload src="/static/video/maixvision.mp4" type="video/mp4" style="height:20em;">
+<video playsinline controls muted preload src="/static/video/maixvision.mp4" type="video/mp4" style="height:20em;">
 MaixVision
 </video>
 
@@ -263,7 +248,7 @@ Below are some of the features, for more please see the [documentation](/doc/en/
 <div class="flex flex-wrap justify-between">
     <div class="feature_item">
         <div class="img_video">
-            <video controls autoplay loop muted preload src="/static/video/maixvision.mp4"></video>
+            <video playsinline controls autoplay loop muted preload src="/static/video/maixvision.mp4"></video>
             <p class="feature">Python + MaixVision IDE</p>
             <p class="description">Simple API, with hardware acceleration, including many libraries, such as numpy, opencv, MaixVision IDE programming</p>
         </div>
@@ -290,7 +275,7 @@ Below are some of the features, for more please see the [documentation](/doc/en/
     </div>
     <div class="feature_item">
         <div class="img_video">
-            <video controls autoplay loop muted preload src="/static/video/app_store.mp4"></video>
+            <video playsinline controls autoplay loop muted preload src="/static/video/app_store.mp4"></video>
             <p class="feature">App Store</p>
             <p class="description">Share your APP to community, and one-click install <a href="https://maixhub.com/app">APPs</a>.</p>
         </div>
@@ -308,7 +293,7 @@ Below are some of the features, for more please see the [documentation](/doc/en/
     </div>
     <div class="feature_item">
         <div class="img_video">
-            <video controls autoplay loop muted preload src="/static/video/classifier.mp4"></video>
+            <video playsinline controls autoplay loop muted preload src="/static/video/classifier.mp4"></video>
             <p class="feature">AI Classifier</p>
             <p class="description">Classify object type</p>
         </div>
@@ -317,7 +302,7 @@ Below are some of the features, for more please see the [documentation](/doc/en/
     </div>
     <div class="feature_item">
         <div class="img_video">
-            <video controls autoplay loop muted preload src="/static/video/detector.mp4"></video>
+            <video playsinline controls autoplay loop muted preload src="/static/video/detector.mp4"></video>
             <p class="feature">AI Object Detection</p>
             <p class="description">Classify object type and position</p>
         </div>
@@ -380,7 +365,7 @@ Below are some of the features, for more please see the [documentation](/doc/en/
     </div>
     <div class="feature_item">
         <div class="img_video">
-            <video controls autoplay loop muted preload src="/static/video/find_blobs.mp4"></video>
+            <video playsinline controls autoplay loop muted preload src="/static/video/find_blobs.mp4"></video>
             <p class="feature">Find Blobs</p>
             <p class="description">Find color blobs</p>
         </div>
@@ -389,7 +374,7 @@ Below are some of the features, for more please see the [documentation](/doc/en/
     </div>
     <div class="feature_item">
         <div class="img_video">
-            <video controls autoplay loop muted preload src="/static/video/line_track.mp4"></video>
+            <video playsinline controls autoplay loop muted preload src="/static/video/line_track.mp4"></video>
             <p class="feature">Line Tracking</p>
             <p class="description">Car line tracking, logistics handling</p>
         </div>
@@ -398,7 +383,7 @@ Below are some of the features, for more please see the [documentation](/doc/en/
     </div>
     <div class="feature_item">
         <div class="img_video">
-            <video controls autoplay loop muted preload src="/static/video/qr_apriltag.mp4"></video>
+            <video playsinline controls autoplay loop muted preload src="/static/video/qr_apriltag.mp4"></video>
             <p class="feature">QR Code and AprilTag</p>
             <p class="description">Recognize QR code and AprilTag</p>
         </div>
@@ -425,7 +410,7 @@ Below are some of the features, for more please see the [documentation](/doc/en/
     </div>
     <div class="feature_item">
         <div class="img_video">
-            <video controls autoplay loop muted preload src="/static/video/desktop_monitor.mp4"></video>
+            <video playsinline controls autoplay loop muted preload src="/static/video/desktop_monitor.mp4"></video>
             <p class="feature">Desktop Monitor</p>
             <p class="description">Monitor PC information, such as CPU, memory, network, etc.</p>
         </div>