update

aikit/A0.md

@@ -29,8 +29,8 @@
 
 解决办法：卸载电脑所有的python版本，然后重新安装uploader如下图：<br>
 1、点击控制面板<br>
- <img src="/media/EX/w1.png" width="400"/><br>
+ <img src="./media/EX/w1.png" width="400"/><br>
 2、点击程序里面的卸载程序<br>
-  <img src="/media/EX/w2.png"/><br>
+  <img src="./media/EX/w2.png"/><br>
 3、找到所有的python，全部右键卸载<br>
-   <img src="/media/EX/w3.png"/><br>
+   <img src="./media/EX/w3.png"/><br>

aikit/A2.md

@@ -1,17 +1,17 @@
 # <b>AI模块更新固件步骤说明</b>
 ### 1.	打开x.cocoro.cn网页下载最新版的固件文件以及内存卡文件
-<img src="/media/ai/AI_update.png" width="350"/>
+<img src="./media/ai/AI_update.png" width="350"/>
 
 ### 2.	找到下载好的内存卡文件并解压
 
 ### 3.  取出AI模块中的内存卡,使用读卡器删除里面的所有文件,并复制图片中的所有文件到内存卡中
-<img src="/media/ai/AI_file.png" width="350"/>
+<img src="./media/ai/AI_file.png" width="350"/>
 
 ### 4.  打开CocoBlockly X Uploader,右键电脑右下角CocoBlockly X Uploader图标，选择AI模块固件更新选项
-<img src="/media/ai/AI_update_file.png" width="350"/>
+<img src="./media/ai/AI_update_file.png" width="350"/>
 
 ### 5.  进入AI模块固件更新页面,选择打开下载好的固件文件,点击下载即可
-<img src="/media/ai/AI_update_fireware.png" width="350"/>
+<img src="./media/ai/AI_update_fireware.png" width="350"/>
 
 ### 6.  固件更新过程大概需要2到3分钟,当出现下面弹窗,固件更新完毕
-<img src="/media/ai/AI_update_finish.png" width="350"/>
+<img src="./media/ai/AI_update_finish.png" width="350"/>

aikit/AI_1.md

@@ -10,8 +10,8 @@ CocoRobo AI模组是CocoRobo为了推广人工智能教育而研发的「即插
 
 <table style="margin-top:20px;">
 	<tr>
-		<td width="50%"><img src="/media/ai/AI_zhengmian.png" width="350"/></td>
-		<td width="50%"><img src="/media/ai/AI_fanmian.png" width="350"/></td>
+		<td width="50%"><img src="./media/ai/AI_zhengmian.png" width="350"/></td>
+		<td width="50%"><img src="./media/ai/AI_fanmian.png" width="350"/></td>
 	</tr>
 	<tr>
 		<td>正面</td>
@@ -30,8 +30,8 @@ AI 模组作为人工智能相关应用的主控模组，拥有基础计算机
 
 <table style="margin-top:20px;">
 	<tr>
-		<td width="50%"><img src="/media/ai/AI_photozheng.png" width="350"/></td>
-		<td width="50%"><img src="/media/ai/AI_photofan.png" width="350"/></td>
+		<td width="50%"><img src="./media/ai/AI_photozheng.png" width="350"/></td>
+		<td width="50%"><img src="./media/ai/AI_photofan.png" width="350"/></td>
 	</tr>
 	<tr>
 		<td>正面</td>
@@ -45,8 +45,8 @@ AI 模组作为人工智能相关应用的主控模组，拥有基础计算机
 
 <table style="margin-top:20px;">
 	<tr>
-		<td width="50%"><img src="/media/ai/AI_screenzheng.png" width="350"/></td>
-		<td width="50%"><img src="/media/ai/AI_screenfan.png" width="350"/></td>
+		<td width="50%"><img src="./media/ai/AI_screenzheng.png" width="350"/></td>
+		<td width="50%"><img src="./media/ai/AI_screenfan.png" width="350"/></td>
 	</tr>
 	<tr>
 		<td>正面</td>
@@ -64,17 +64,17 @@ AI 模组作为人工智能相关应用的主控模组，拥有基础计算机
 1）连接AI模组、摄影镜头模组和萤幕模组三部分，按照如下图所示的位置进行连接
 <table style="margin-top:20px;">
 	<tr>
-		<td width="50%"><img src="/media/ai/AI_anzhuang_1.png" width="350"/></td>
-		<td width="20%"><img src="/media/ai/AI_anzhuang_3.png" width="350"/></td>
-    <td width="30%"><img src="/media/ai/AI_anzhuang_2.png" width="350"/></td>
+		<td width="50%"><img src="./media/ai/AI_anzhuang_1.png" width="350"/></td>
+		<td width="20%"><img src="./media/ai/AI_anzhuang_3.png" width="350"/></td>
+    <td width="30%"><img src="./media/ai/AI_anzhuang_2.png" width="350"/></td>
 	</tr>
 </table>
 
 2）使用Micro USB数据线连接AI模组和电脑
 <table style="margin-top:20px;">
 	<tr>
-		<td width="50%"><img src="/media/ai/AI_usb_1.png" width="350"/></td>
-		<td width="50%"><img src="/media/ai/AI_usb_2.png" width="350"/></td>
+		<td width="50%"><img src="./media/ai/AI_usb_1.png" width="350"/></td>
+		<td width="50%"><img src="./media/ai/AI_usb_2.png" width="350"/></td>
 	</tr>
 	<tr>
 		<td>Micro USB数据线连接电子模组</td>
@@ -83,7 +83,7 @@ AI 模组作为人工智能相关应用的主控模组，拥有基础计算机
 </table>
 
 连接完成后，便可看到初始介面，按如下图所示的步骤即可体验AI模组的功能样例。<br>
-<img src="/media/ai/AI_connectfinish.png" width="350"/>
+<img src="./media/ai/AI_connectfinish.png" width="350"/>
 <br>STEP 1：将模组通过数据线连接到电脑的USB端口，启动AI模组；
 <br>STEP 2：模组顶部左侧按钮左移，右侧按钮右移，按右侧按钮右移到Try Demos，按底部左边按钮确认，即可进入AI样例体验选单；
 <br>STEP 3：在AI体验列表介面，按右侧按钮可实现翻页操作，再按底部确定按钮即可进行体验。
@@ -92,75 +92,75 @@ AI 模组作为人工智能相关应用的主控模组，拥有基础计算机
 ## B.	CocoBlockly X
 CocoBlockly X图形化编程工具，是可用于学习Python基础以及AI模组的在线编程环境。通过这款工具可以给IoT模组和AI推理模组编写程式及上传程式。<br>
 在Chrome浏览器输入网址 http://x.cocorobo.hk ，即可开始在CocoBlockly X编程。<br>
-<img src="/media/ai/AI_coco1.png" width="350"/>
+<img src="./media/ai/AI_coco1.png" width="350"/>
 1. 文档存取区：程式项目命名、保存（保存为.xml档）、删除所有积木及所有积木一键截图
 2. 模式切换区：样例加载、模式切换（主机板模组与 AI 模组）<br>
-<img src="/media/ai/AI_coco2.png" width="350"/>
+<img src="./media/ai/AI_coco2.png" width="350"/>
 3. 辅助区：学习资料、项目档导入及导出、语言设置、以及用户登入
 <br>其中，学习资料按钮，可以跳转至EDU或者AI HUB学习平台：<br>
-<img src="/media/ai/AI_coco3.png" width="350"/>
-<img src="/media/ai/AI_coco4.png" width="350"/>
+<img src="./media/ai/AI_coco3.png" width="350"/>
+<img src="./media/ai/AI_coco4.png" width="350"/>
 4.	积木指令区：除基础积木以外（由「逻辑」至「序列埠通讯」），不同模式下拥有不同的扩展积木
 5.	积木编程区：将积木拖入此区域中以进行程式编写
 6.	Python编程区：当用户将积木拖入积木编程区以后，此处将会生成对应的Python源代码，支持用户对代码进行编辑、复制、下载及上传，下载后缀为 .py格式的python文档<br>
-<img src="/media/ai/AI_coco5.png" width="350"/>
+<img src="./media/ai/AI_coco5.png" width="350"/>
 7.	上传区：用户可选择使用有线或者无线上传模式
 
 ---
 ## C.	CocoBlockly Uploader
 CocoBlockly Uploader是一款跨平台的上传插件，安装后可以使CocoBlockly X实现浏览器、IoT模组和AI推理模组间的通讯，将编写完成的程式上传到相关模组。安装方法如下：
 1. 进入CocoBlockly X编程平台，http://x.cocorobo.hk <br>
-<img src="/media/ai/AI_uploader1.png" width="350"/>
+<img src="./media/ai/AI_uploader1.png" width="350"/>
 2.	将滑鼠移向右下方「上传区域」的「下载」图示位置，点按「Windows」下载Uploader，如果是Mac系统，则点按「Mac」进行下载。<br>
-<img src="/media/ai/AI_uploader2.png" width="350"/>
+<img src="./media/ai/AI_uploader2.png" width="350"/>
 
 #### Windows系统下的安装：
 1. 下载完成后执行安装档，点按「安装」按钮，进行安装<br>
-<img src="/media/ai/AI_upload1.png" width="210"/>
-<img src="/media/ai/AI_upload2.png" width="210"/>
+<img src="./media/ai/AI_upload1.png" width="210"/>
+<img src="./media/ai/AI_upload2.png" width="210"/>
 <br><br><B>注意，已安装其它版本Python的用户请先卸载Python。</B><br><br>
 2. 安装程式会启动Python安装视窗，在选单中点按「Repair」，开始进行Python安装程式<br>
-<img src="/media/ai/AI_upload3.png" width="210"/>
-<img src="/media/ai/AI_upload4.png" width="210"/>
+<img src="./media/ai/AI_upload3.png" width="210"/>
+<img src="./media/ai/AI_upload4.png" width="210"/>
 3. 安装完成后点按「Close」按钮<br>
-<img src="/media/ai/AI_upload5.png" width="210"/>
+<img src="./media/ai/AI_upload5.png" width="210"/>
 4. 继续安装Uploader，按照安装程式执行<br>
-<img src="/media/ai/AI_upload6.png" width="210"/>
-<img src="/media/ai/AI_upload7.png" width="210"/>
-<img src="/media/ai/AI_upload8.png" width="210"/><br>
+<img src="./media/ai/AI_upload6.png" width="210"/>
+<img src="./media/ai/AI_upload7.png" width="210"/>
+<img src="./media/ai/AI_upload8.png" width="210"/><br>
 5. 最后，点按「完成」结束Uploader安装程式 <br>
-<img src="/media/ai/AI_upload9.png" width="210"/>
-<img src="/media/ai/AI_upload10.png" width="210"/><br>
+<img src="./media/ai/AI_upload9.png" width="210"/>
+<img src="./media/ai/AI_upload10.png" width="210"/><br>
 6. 点击GO TO COCOBLOCKLY X即可进入积木编程页面
 
 #### Mac系统下的安装：
 1)「Mac」用户右键点击安装档案，选择“安装程式（预设值）”进行安装<br>
-<img src="/media/ai/AI_macupload1.png" width="210"/><br>
+<img src="./media/ai/AI_macupload1.png" width="210"/><br>
 2) 进入安装页面，点击“继续”，之后点击“安装“
-<img src="/media/ai/AI_macupload2.png" width="210"/>
-<img src="/media/ai/AI_macupload3.png" width="210"/><br>
+<img src="./media/ai/AI_macupload2.png" width="210"/>
+<img src="./media/ai/AI_macupload3.png" width="210"/><br>
 3) 验证你的密码，然后点击“安装软件”进入正在安装页面，等待即可<br>
-<img src="/media/ai/AI_macupload4.png" width="210"/>
-<img src="/media/ai/AI_macupload5.png" width="210"/><br>
+<img src="./media/ai/AI_macupload4.png" width="210"/>
+<img src="./media/ai/AI_macupload5.png" width="210"/><br>
 4) 出现下图“已成功安装“页面，则表示uploader已成功安装，即可看到程式图标<br>
-<img src="/media/ai/AI_macupload6.png" width="210"/>
-<img src="/media/ai/AI_macupload7.png" width="210"/><br>
+<img src="./media/ai/AI_macupload6.png" width="210"/>
+<img src="./media/ai/AI_macupload7.png" width="210"/><br>
 
 ---
 ## D.	上传程式
 将IoT模组或AI推理模组，通过USB接驳线与电脑连接。打开CocoBlockly X编程工具。
 1.	进入CocoBlockly X编程平台，http://x.cocorobo.hk
 <br>
-<img src="/media/ai/AI_shangchuan1.png" width="350"/><br>
+<img src="./media/ai/AI_shangchuan1.png" width="350"/><br>
 2.	在上方「切换区域」选择AI模组：
 <br>
-<img src="/media/ai/AI_shangchuan2.png" width="350"/><br>
+<img src="./media/ai/AI_shangchuan2.png" width="350"/><br>
 3.	在右下方「上传区域」检查以下设定：
 <br>
-<img src="/media/ai/AI_shangchuan3.png" width="350"/><br>
+<img src="./media/ai/AI_shangchuan3.png" width="350"/><br>
 4.	在「上传区域」点按如下图所示中，左下角位置的「运行」按钮上传程式到AI模组中。
 <br>
-<img src="/media/ai/AI_shangchuan4.png" width="350"/><br>
+<img src="./media/ai/AI_shangchuan4.png" width="350"/><br>
 
 上传失败或出现其他错误，请参阅：[Uploader常见错误处理](/aikit/A0.md)。
 
@@ -168,7 +168,7 @@ CocoBlockly Uploader是一款跨平台的上传插件，安装后可以使CocoBl
 
 1）上图中左下角第一个按钮为「运行程式」按钮，即运行当前blockly中的程式，断开连接后，再次接通，不会继续运行当前程式，而是显示初始化菜单介面：
 <br>
-<img src="/media/ai/AI_shangchuan5.png" width="300"/><br>
+<img src="./media/ai/AI_shangchuan5.png" width="300"/><br>
 且选择「Run Last」选项，也不会运行之前的程式，如果想要再次运行，需要再次点击运行按钮
 <br>
 2）左下角第二个按钮为「上传程式」按钮，将程式上传到AI模组中，便会存储在模组中，断开连接，再次接通后，选择「Run Last」选项，即可运行上次的程式。
@@ -177,13 +177,13 @@ CocoBlockly Uploader是一款跨平台的上传插件，安装后可以使CocoBl
 
 ---
 ## E.	串口互动窗
-串口互动窗用于显示或查看AI模组上的数据，是测试数据（感应器、网路请求）的好帮手。在「代码区」点按「串口互动窗」。在积木指令区点按「序列埠通讯」，在积木编程区放置【打印】指令<img src="/media/ai/AI_E1.png" width="250"/>。然后在「上传区域」点按「运行代码」按钮，当显示「上载成功！100%」后在「代码区」点按「串口互动窗」，会显示「Hello World!」<br>
+串口互动窗用于显示或查看AI模组上的数据，是测试数据（感应器、网路请求）的好帮手。在「代码区」点按「串口互动窗」。在积木指令区点按「序列埠通讯」，在积木编程区放置【打印】指令<img src="./media/ai/AI_E1.png" width="250"/>。然后在「上传区域」点按「运行代码」按钮，当显示「上载成功！100%」后在「代码区」点按「串口互动窗」，会显示「Hello World!」<br>
 Windows系统：
 <br>
-<img src="/media/ai/AI_E2.png" width="300"/><br>
+<img src="./media/ai/AI_E2.png" width="300"/><br>
 Mac系统：
 <br>
-<img src="/media/ai/AI_E3.png" width="300"/><br>
+<img src="./media/ai/AI_E3.png" width="300"/><br>
 
 ---
 ## F.	CocoBlockly X编程体验
@@ -196,13 +196,13 @@ Mac系统：
 3)AI模组｜图像处理：「萤幕文字」并输入「Hello World！」<br><br>
 （其中「文字大小」可通过修改数字改变；颜色可选择，此处选为红色）
 </td>
-		<td width="50%"><img src="/media/ai/AI_f1.png" width="350"/><img src="/media/ai/AI_f2.png" width="350"/></td>
+		<td width="50%"><img src="./media/ai/AI_f1.png" width="350"/><img src="./media/ai/AI_f2.png" width="350"/></td>
 	</tr>
 	<tr>
 		<td colspan=2>完成编程后，在「上传区域」点按「运行代码」，观察AI萤幕模组的变化。<br>
 运行结果：
 <br>
-<img src="/media/ai/AI_f3.png" width="250"/><br>
+<img src="./media/ai/AI_f3.png" width="250"/><br>
 </td>
 	</tr>
 </table>
@@ -216,13 +216,13 @@ Mac系统：
 3)AI模组｜图像处理：「萤幕文字」并输入「Hello World！」<br><br>
 4)修改座标的X值及Y值，使「Hello World！放置萤幕正中心位置。
 </td>
-		<td width="50%"><img src="/media/ai/AI_f4.png" width="350"/><img src="/media/ai/AI_f5.png" width="350"/></td>
+		<td width="50%"><img src="./media/ai/AI_f4.png" width="350"/><img src="./media/ai/AI_f5.png" width="350"/></td>
 	</tr>
 	<tr>
 		<td colspan=2>完成编程后，在「上传区域」点按「运行代码」，观察AI萤幕模组的变化。<br>
 运行结果：
 <br>
-<img src="/media/ai/AI_f6.png" width="250"/><br>
+<img src="./media/ai/AI_f6.png" width="250"/><br>
 </td>
 	</tr>
 </table>
@@ -237,14 +237,14 @@ Mac系统：
 4)AI模组｜基础：「按钮状态」<br><br>
 5)AI模组｜图像处理：「萤幕文字」（颜色为白色）
 </td>
-		<td width="50%"><img src="/media/ai/AI_f7.png" width="350"/><img src="/media/ai/AI_f8.png" width="350"/></td>
+		<td width="50%"><img src="./media/ai/AI_f7.png" width="350"/><img src="./media/ai/AI_f8.png" width="350"/></td>
 	</tr>
 	<tr>
 		<td colspan=2>运行结果：当按钮A按下，显示Hello World！，否则不显示任何文字。<br>
 未按键：
-<img src="/media/ai/AI_f9.png" width="150"/>
+<img src="./media/ai/AI_f9.png" width="150"/>
 按A键：
-<img src="/media/ai/AI_f10.png" width="150"/>
+<img src="./media/ai/AI_f10.png" width="150"/>
 </td>
 	</tr>
 </table>
@@ -254,10 +254,10 @@ Mac系统：
 上面第三步「逻辑判断」积木块的实现方式如下：<br>
 1）选择：
 <br>
-<img src="/media/ai/AI_f11.png" width="250"/><br>
+<img src="./media/ai/AI_f11.png" width="250"/><br>
 2）点击左上角图标，显示如下：
 <br>
-<img src="/media/ai/AI_f12.png" width="250"/><br>
+<img src="./media/ai/AI_f12.png" width="250"/><br>
 3）拖拽「否则」积木块到右侧，放到「如果」下面，即可显示出「否则」部分：
 <br>
-<img src="/media/ai/AI_f13.png" width="250"/><br>
+<img src="./media/ai/AI_f13.png" width="250"/><br>

aikit/AI_2.md

@@ -4,13 +4,13 @@
 ## 	A.萤幕模组
 模组连接一个LCD彩色萤幕显示器，萤幕解析度为240 x 240 px (像素)，可显示JPG, BMP 等格式图片。像素，组成点阵数位影像的最小方块单位，每个方块都有一个明确的位置和被分配的色彩数值，小方格颜色和位置就决定该图像所呈现出来的样子。如下图所示：
 <br>
-<img src="/media/ai/AI_g1.png" width="300"/><br>
+<img src="./media/ai/AI_g1.png" width="300"/><br>
 我们以坐标系(X, Y)标明方块的位置，X代表水准方向(X轴)，Y代表垂直方向(Y轴)，列萤幕的左上角为起始点(0, 0)（代表第一行，第一列），最大值为(239, 239)。<br>
 例如方块(4, 3)，指方块的位置由左而右第5列，由上至下第4行(因为X、Y座标均从0开始)。
 <table style="margin-top:20px;">
 	<tr>
-		<td width="50%"><img src="/media/ai/AI_g2.png" width="350"/></td>
-		<td width="50%"><img src="/media/ai/AI_g3.png" width="350"/></td>
+		<td width="50%"><img src="./media/ai/AI_g2.png" width="350"/></td>
+		<td width="50%"><img src="./media/ai/AI_g3.png" width="350"/></td>
 	</tr>
 	<tr >
 		<td colspan=2>活动：列出方格A及方格B的座标系：A __________ B __________</td>
@@ -26,97 +26,97 @@
     <td width="30%">说明</td>
 	</tr>
   <tr>
-    <td width="50%"><img src="/media/ai/AI_h1.png" width="200"/></td>
+    <td width="50%"><img src="./media/ai/AI_h1.png" width="200"/></td>
     <td width="20%">初始化</td>
     <td width="30%">初始化萤幕</td>
   </tr>
   <tr>
-    <td width="50%"><img src="/media/ai/AI_h2.png" width="200"/><img src="/media/ai/AI_h3.png" width="200"/></td>
+    <td width="50%"><img src="./media/ai/AI_h2.png" width="200"/><img src="./media/ai/AI_h3.png" width="200"/></td>
     <td width="20%">改变萤幕状态</td>
-    <td width="30%">旋转萤幕方向、萤幕镜面翻转<img src="/media/ai/AI_h4.png" width="200"/></td>
+    <td width="30%">旋转萤幕方向、萤幕镜面翻转<img src="./media/ai/AI_h4.png" width="200"/></td>
   </tr>
   <tr>
-    <td width="50%"><img src="/media/ai/AI_h5.png" width="200"/></td>
+    <td width="50%"><img src="./media/ai/AI_h5.png" width="200"/></td>
     <td width="20%">改变萤幕颜色</td>
-    <td width="30%">填充萤幕颜色：<img src="/media/ai/AI_h6.png" width="200"/></td>
+    <td width="30%">填充萤幕颜色：<img src="./media/ai/AI_h6.png" width="200"/></td>
   </tr>
   <tr>
-    <td width="50%"><img src="/media/ai/AI_h7.png" width="200"/></td>
+    <td width="50%"><img src="./media/ai/AI_h7.png" width="200"/></td>
     <td width="20%">自定义萤幕颜色</td>
     <td width="30%">填入不同的RGB（红绿蓝）值，达到自定义颜色的效果</td>
   </tr>
   <tr>
-    <td width="50%"><img src="/media/ai/AI_h8.png" width="200"/></td>
+    <td width="50%"><img src="./media/ai/AI_h8.png" width="200"/></td>
     <td width="20%">清除萤幕</td>
     <td width="30%">清除萤幕</td>
   </tr>
   <tr>
-    <td width="50%"><img src="/media/ai/AI_h9.png" width="200"/><img src="/media/ai/AI_h10.png" width="200"/><img src="/media/ai/AI_h11.png" width="200"/></td>
+    <td width="50%"><img src="./media/ai/AI_h9.png" width="200"/><img src="./media/ai/AI_h10.png" width="200"/><img src="./media/ai/AI_h11.png" width="200"/></td>
     <td width="20%">参数调节</td>
     <td width="30%">改变RGB值、XY坐标值和宽高值</td>
   </tr>
   <tr>
-    <td width="50%"><img src="/media/ai/AI_h12.png" width="200"/></td>
+    <td width="50%"><img src="./media/ai/AI_h12.png" width="200"/></td>
     <td width="20%">建立画布</td>
     <td width="30%">建立画布并定义画布的大小</td>
   </tr>
   <tr>
-    <td width="50%"><img src="/media/ai/AI_h13.png" width="200"/></td>
+    <td width="50%"><img src="./media/ai/AI_h13.png" width="200"/></td>
     <td width="20%">自定画布幕颜色</td>
     <td width="30%">填入不同的RGB（红绿蓝）值，达到自定义颜色的效果</td>
   </tr>
   <tr>
-    <td width="50%"><img src="/media/ai/AI_h24.png" width="200"/></td>
+    <td width="50%"><img src="./media/ai/AI_h24.png" width="200"/></td>
     <td width="20%">建立画布</td>
     <td width="30%">建立并储存画布在SD记忆卡</td>
   </tr>
   <tr>
-    <td width="50%"><img src="/media/ai/AI_h14.png" width="200"/></td>
+    <td width="50%"><img src="./media/ai/AI_h14.png" width="200"/></td>
     <td width="20%">显示画布</td>
     <td width="30%">定义画布在萤幕上的起始位置</td>
   </tr>
   <tr>
-    <td width="50%"><img src="/media/ai/AI_h15.png" width="200"/></td>
+    <td width="50%"><img src="./media/ai/AI_h15.png" width="200"/></td>
     <td width="20%">绘制文字</td>
     <td width="30%">萤幕可以同时显示文字及图形，特别适合用作图像识别。必须同时使用「建立画布」及「显示画布」指令。</td>
   </tr>
   <tr>
-    <td width="50%"><img src="/media/ai/AI_h16.png" width="200"/></td>
+    <td width="50%"><img src="./media/ai/AI_h16.png" width="200"/></td>
     <td width="20%">绘制直线</td>
     <td width="30%">在画布上绘画直线，输入起点及终点坐标。可以选择线条颜色及厚度。</td>
   </tr>
   <tr>
-    <td width="50%"><img src="/media/ai/AI_h17.png" width="200"/></td>
+    <td width="50%"><img src="./media/ai/AI_h17.png" width="200"/></td>
     <td width="20%">绘制矩形</td>
     <td width="30%">在画布上绘画矩形，可以是实心或空心，输入起点坐标及尺寸。可以选择线条颜色及厚度。</td>
   </tr>
   <tr>
-    <td width="50%"><img src="/media/ai/AI_h18.png" width="200"/></td>
+    <td width="50%"><img src="./media/ai/AI_h18.png" width="200"/></td>
     <td width="20%">绘制圆形</td>
     <td width="30%">在画布上绘画圆形，可以是实心或空心，输入圆心的坐标及半径。可以选择线条颜色及厚度。</td>
   </tr>
   <tr>
-    <td width="50%"><img src="/media/ai/AI_h19.png" width="200"/></td>
+    <td width="50%"><img src="./media/ai/AI_h19.png" width="200"/></td>
     <td width="20%">绘制十字标</td>
     <td width="30%">在画布上绘画十字标，输入中心坐标。可以选择线条延伸长度、厚度及颜色。</td>
   </tr>
   <tr>
-    <td width="50%"><img src="/media/ai/AI_h20.png" width="200"/></td>
+    <td width="50%"><img src="./media/ai/AI_h20.png" width="200"/></td>
     <td width="20%">绘制箭头</td>
     <td width="30%">在画布上绘画箭头，输入起点及终点坐标。可以选择线条颜色及厚度。</td>
   </tr>
   <tr>
-    <td width="50%"><img src="/media/ai/AI_h21.png" width="200"/></td>
+    <td width="50%"><img src="./media/ai/AI_h21.png" width="200"/></td>
     <td width="20%">绘制图片</td>
     <td width="30%">在画布上绘画图片，图片从SD卡的档路径中选取，输入起点坐标及缩放比例。</td>
   </tr>
   <tr>
-    <td width="50%"><img src="/media/ai/AI_h22.png" width="200"/></td>
+    <td width="50%"><img src="./media/ai/AI_h22.png" width="200"/></td>
     <td width="20%">显示画布</td>
     <td width="30%">显示指定画布，画布名可修改</td>
   </tr>
   <tr>
-    <td width="50%"><img src="/media/ai/AI_h23.png" width="200"/></td>
+    <td width="50%"><img src="./media/ai/AI_h23.png" width="200"/></td>
     <td width="20%">清除画布</td>
     <td width="30%">清除所选画布中的所有内容</td>
   </tr>
@@ -132,7 +132,7 @@
 3)AI模组｜图像处理：「绘制矩形」<br><br>
 4)AI模组｜图像处理：「显示画布」
 </td>
-  <td><img src="/media/ai/AI_I1.png" width="350"/><img src="/media/ai/AI_I2.png" width="350"/></td>
+  <td><img src="./media/ai/AI_I1.png" width="350"/><img src="./media/ai/AI_I2.png" width="350"/></td>
 </tr>
 </table>
 以上活动首先会建立一幅空白画布并命名为「canvas」，画布的大小设定为240 x 240。接著输入「重复执行」指令，使萤幕不断显示矩形图案，如果没有使用该指令，矩形图案只会显示一次就消失。在「重复执行」指令中加入「绘制矩形」及「显示画布」指令并输入参数如下：
@@ -153,7 +153,7 @@
 </table>
 注：「建立画布」是指建立图像变数，将获取的影像存放在变数中，作进一步使用。<br>
 运行结果：
-<img src="/media/ai/AI_I3.png" width="200"/>
+<img src="./media/ai/AI_I3.png" width="200"/>
 
 ##### 活动二：修改活动一程式，在萤幕上显示延长横线
 <table style="margin-top:20px;">
@@ -163,10 +163,10 @@
 2)变数：「i」<br>
 将变数「i」放在「绘制矩形」座标参数中的X值处
 </td>
-  <td><img src="/media/ai/AI_I4.png" width="350"/><img src="/media/ai/AI_I5.png" width="350"/></td>
+  <td><img src="./media/ai/AI_I4.png" width="350"/><img src="./media/ai/AI_I5.png" width="350"/></td>
 </tr>
-<tr><td colspan=2>点按「运行」后观察萤幕的变化，并简短描述如下：<br><img src="/media/ai/AI_I8.png" width="350"/></td></tr><tr>
-<td colspan=2>运行结果：不断延长的直线<br><img src="/media/ai/AI_I6.png" width="200"/><img src="/media/ai/AI_I7.png" width="200"/> </td></tr>
+<tr><td colspan=2>点按「运行」后观察萤幕的变化，并简短描述如下：<br><img src="./media/ai/AI_I8.png" width="350"/></td></tr><tr>
+<td colspan=2>运行结果：不断延长的直线<br><img src="./media/ai/AI_I6.png" width="200"/><img src="./media/ai/AI_I7.png" width="200"/> </td></tr>
 </table>
 
 ##### 挑战一：
@@ -174,14 +174,14 @@
 <tr>
   <td colspan=2>修改活动二的程式，在萤幕上显示一个红色方块，由左向右移动，每次移动一格。<br>
 提示：尝试运用以下积木<br>
-<img src="/media/ai/AI_I9.png" width="350"/>
+<img src="./media/ai/AI_I9.png" width="350"/>
 </td>
 </tr>
 <tr>
-<td colspan=2>参考程式：<br><img src="/media/ai/AI_I10.png" width="200"/><img src="/media/ai/AI_I11.png" width="200"/> </td>
+<td colspan=2>参考程式：<br><img src="./media/ai/AI_I10.png" width="200"/><img src="./media/ai/AI_I11.png" width="200"/> </td>
 </tr>
 <tr >
-<td colspan=2>运行结果：<br><img src="/media/ai/AI_I12.png" width="200"/><img src="/media/ai/AI_I13.png" width="200"/> </td>
+<td colspan=2>运行结果：<br><img src="./media/ai/AI_I12.png" width="200"/><img src="./media/ai/AI_I13.png" width="200"/> </td>
 </tr>
 </table>
 
@@ -195,11 +195,11 @@
 4)AI模组｜图像处理：「绘制矩形」<br>
 5)AI模组｜图像处理：「显示画布」
 </td><td>
-<img src="/media/ai/AI_I14.png" width="350"/>
+<img src="./media/ai/AI_I14.png" width="350"/>
 </td>
 </tr>
 <tr >
-<td colspan=2>运行结果：<br><img src="/media/ai/AI_I15.png" width="200"/></td>
+<td colspan=2>运行结果：<br><img src="./media/ai/AI_I15.png" width="200"/></td>
 </tr>
 </table>
 此活动目标为理解路径的概念：<br>
@@ -213,11 +213,11 @@
 2)AI模组｜图像处理：「绘制文本」放在「绘制矩形」指令之下<br>
 3)AI模组｜图像处理：「显示画布」（必要积木，否则不会显示任何讯息）
 </td><td>
-<img src="/media/ai/AI_I21.png" width="350"/><img src="/media/ai/AI_I17.png" width="350"/>
+<img src="./media/ai/AI_I21.png" width="350"/><img src="./media/ai/AI_I17.png" width="350"/>
 </td>
 </tr>
 <tr>
-<td  colspan=2>运行结果：<br><img src="/media/ai/AI_I18.png" width="200"/></td>
+<td  colspan=2>运行结果：<br><img src="./media/ai/AI_I18.png" width="200"/></td>
 </tr>
 </table>
 
@@ -225,12 +225,12 @@
 <table style="margin-top:20px;">
 <tr>
   <td colspan=2>编写程式，在萤幕正中心位置显示白色方框，框内打印你的英文名。如下图所示：<br>
-<img src="/media/ai/AI_I19.png" width="350"/><br>
+<img src="./media/ai/AI_I19.png" width="350"/><br>
 提示：需要计算文字及方框的尺寸，对应萤幕的面积尺寸，修改文字及方框的座标位置，使二者能显示在萤幕的正中心位置。
 </td>
 </tr>
 <tr colspan=2>
-<td>参考程式：<br><img src="/media/ai/AI_I20.png" width="200"/></td>
+<td>参考程式：<br><img src="./media/ai/AI_I20.png" width="200"/></td>
 </tr>
 </table>
 
@@ -239,7 +239,7 @@
 硬体设备：AI推理模组、萤幕模组<br>
 任务目标：运用「变数」及「循环」，用【线条】指令制作一个万花筒动画<br>
 基本流程/步骤：<br>
-<img src="/media/ai/AI_j1.png" width="200"/><br>
+<img src="./media/ai/AI_j1.png" width="200"/><br>
 第一步：模组初始化<br>
 <table style="margin-top:20px;">
 <tr>
@@ -248,7 +248,7 @@
 2)循环：「重复执行」<br>
 3)AI模组｜图像处理：「清除画布」
 </td><td>
-<img src="/media/ai/AI_j2.png" width="350"/>
+<img src="./media/ai/AI_j2.png" width="350"/>
 </td></tr>
 </table>
 
@@ -262,20 +262,20 @@
 6)AI模组｜图像处理：【显示画布】<br>
 7)时间：【等待】
 </td><td>
-<img src="/media/ai/AI_j3.png" width="350"/>
+<img src="./media/ai/AI_j3.png" width="350"/>
 </td>
 </table>
 观察结果：<br>
 <table style="margin-top:20px;">
 <tr>
-  <td ><img src="/media/ai/AI_j4.png" width="350"/>
+  <td ><img src="./media/ai/AI_j4.png" width="350"/>
 </td><td>
-<img src="/media/ai/AI_j5.png" width="350"/>
+<img src="./media/ai/AI_j5.png" width="350"/>
 </td><td>
-<img src="/media/ai/AI_j6.png" width="350"/>
+<img src="./media/ai/AI_j6.png" width="350"/>
 </td></tr>
 <tr>
-<td colspan=3>参考程式：<br><img src="/media/ai/AI_j7.png" width="350"/><img src="/media/ai/AI_j11.png" width="350"/>
+<td colspan=3>参考程式：<br><img src="./media/ai/AI_j7.png" width="350"/><img src="./media/ai/AI_j11.png" width="350"/>
 </td>
 </tr>
 </table>
@@ -283,10 +283,10 @@
 ##### 挑战题：
 <table style="margin-top:20px;">
 <tr>
-  <td >如何透过【For循环】方法，延续上面绘画的直线，在余下的空间位置绘画直线，如下图所示：<img src="/media/ai/AI_j8.png" width="350"/>
+  <td >如何透过【For循环】方法，延续上面绘画的直线，在余下的空间位置绘画直线，如下图所示：<img src="./media/ai/AI_j8.png" width="350"/>
 </td></tr>
 <tr>
-<td >参考程式：<br><img src="/media/ai/AI_j9.png" width="350"/><img src="/media/ai/AI_j10.png" width="350"/>
+<td >参考程式：<br><img src="./media/ai/AI_j9.png" width="350"/><img src="./media/ai/AI_j10.png" width="350"/>
 </td>
 </tr>
 </table>

aikit/AI_3.md

@@ -13,7 +13,7 @@
     <td width="30%">说明</td>
 	</tr>
   <tr>
-    <td width="50%"><img src="/media/ai/AI_l1.png" width="200"/></td>
+    <td width="50%"><img src="./media/ai/AI_l1.png" width="200"/></td>
     <td width="20%">初始化</td>
     <td width="30%">汇入相机的程式库，可设定以下两项属性：<br>
 影像尺寸：320x240及160x120<br>
@@ -21,49 +21,49 @@
 </td>
   </tr>
   <tr>
-    <td width="50%"><img src="/media/ai/AI_l2.png" width="200"/></td>
+    <td width="50%"><img src="./media/ai/AI_l2.png" width="200"/></td>
     <td width="20%">影像尺寸</td>
     <td width="30%">设定影像的显示尺寸，最大尺寸可输入：宽240 高240
 </td>
   </tr>
   <tr>
-    <td width="50%"><img src="/media/ai/AI_l3.png" width="200"/></td>
+    <td width="50%"><img src="./media/ai/AI_l3.png" width="200"/></td>
     <td width="20%">获取影像</td>
     <td width="30%">获取从摄影镜头拍摄的影像
 </td>
   </tr>
   <tr>
-    <td width="50%"><img src="/media/ai/AI_l4.png" width="200"/></td>
+    <td width="50%"><img src="./media/ai/AI_l4.png" width="200"/></td>
     <td width="20%">校正图像</td>
     <td width="30%">对广角镜头获取的图片进行校正
 </td>
   </tr>
   <tr>
-    <td width="50%"><img src="/media/ai/AI_l5.png" width="200"/></td>
+    <td width="50%"><img src="./media/ai/AI_l5.png" width="200"/></td>
     <td width="20%">属性设定</td>
-    <td width="30%">设定「启用」或「停用」以下五个属性：<img src="/media/ai/AI_l6.png" width="200"/>
+    <td width="30%">设定「启用」或「停用」以下五个属性：<img src="./media/ai/AI_l6.png" width="200"/>
 </td>
   </tr>
   <tr>
-    <td width="50%"><img src="/media/ai/AI_l7.png" width="200"/></td>
+    <td width="50%"><img src="./media/ai/AI_l7.png" width="200"/></td>
     <td width="20%">属性设定</td>
     <td width="30%">设定影像的对比度、亮度及色彩饱和度等数值属性，范围定为-3至3
 </td>
   </tr>
   <tr>
-    <td width="50%"><img src="/media/ai/AI_l8.png" width="200"/></td>
+    <td width="50%"><img src="./media/ai/AI_l8.png" width="200"/></td>
     <td width="20%">录制影片</td>
     <td width="30%">设定影片录制参数，包括储存路径、影片宽度及高度
 </td>
   </tr>
   <tr>
-    <td width="50%"><img src="/media/ai/AI_l9.png" width="200"/></td>
+    <td width="50%"><img src="./media/ai/AI_l9.png" width="200"/></td>
     <td width="20%">画布录制</td>
     <td width="30%">录制影片
 </td>
   </tr>
   <tr>
-    <td width="50%"><img src="/media/ai/AI_l10.png" width="200"/></td>
+    <td width="50%"><img src="./media/ai/AI_l10.png" width="200"/></td>
     <td width="20%">停止录影</td>
     <td width="30%">停止录影
 </td>
@@ -83,9 +83,9 @@
 6.	AI模组｜相机：【获取影像】<br>
 7.	AI模组｜图像处理：【显示画布】<br>
 </td>
-  <td><img src="/media/ai/AI_m1.png" width="350"/></td>
+  <td><img src="./media/ai/AI_m1.png" width="350"/></td>
 </tr>
-<tr><td colspan=2>运行结果：启用AI摄影镜头并在萤幕上出现画面<br><img src="/media/ai/AI_m2.png" width="350"/></td></tr>
+<tr><td colspan=2>运行结果：启用AI摄影镜头并在萤幕上出现画面<br><img src="./media/ai/AI_m2.png" width="350"/></td></tr>
 </table>
 
 ##### 活动二：每隔1秒拍照并储存相片
@@ -98,22 +98,22 @@
 2.	时间：【等候】设定为1000毫秒<br>
 
 </td>
-  <td><img src="/media/ai/AI_m3.png" width="350"/></td>
+  <td><img src="./media/ai/AI_m3.png" width="350"/></td>
 </tr>
-<tr><td colspan=2>运行结果：每隔1秒会自动拍照1次，影像显示在萤幕上并储存在SD记忆卡中。从AI推理模组取出SD记忆卡，透过电脑打开影像档案：user/saved.jpg<br><img src="/media/ai/AI_m4.png" width="350"/></td></tr>
+<tr><td colspan=2>运行结果：每隔1秒会自动拍照1次，影像显示在萤幕上并储存在SD记忆卡中。从AI推理模组取出SD记忆卡，透过电脑打开影像档案：user/saved.jpg<br><img src="./media/ai/AI_m4.png" width="350"/></td></tr>
 </table>
 思考问题：上面程式运行一段时间后，为什么SD记忆卡仍只有一幅影像档案？
-<br><img src="/media/ai/AI_s9.png" width="350"/>
+<br><img src="./media/ai/AI_s9.png" width="350"/>
 
 ##### 挑战一：
 <table style="margin-top:20px;">
 <tr>
   <td >修改上面程式，每次拍照并储存图像时均会将新的图像存进SD卡。<br>
 提示：尝试运用以下的积木<br>
-<img src="/media/ai/AI_m5.png" width="200"/>
-<img src="/media/ai/AI_m6.png" width="200"/>
+<img src="./media/ai/AI_m5.png" width="200"/>
+<img src="./media/ai/AI_m6.png" width="200"/>
 </td></tr>
-<tr><td >参考程式：<br><img src="/media/ai/AI_m7.png" width="350"/></td></tr>
+<tr><td >参考程式：<br><img src="./media/ai/AI_m7.png" width="350"/></td></tr>
 </table>
 
 ##### 活动三：透过按动按钮拍照并储存相片
@@ -126,7 +126,7 @@
 4.	AI模组｜图像处理：【显示画布】<br>
 5.	时间：【等候】设定为1000毫秒<br>
 </td>
-  <td><img src="/media/ai/AI_m8.png" width="350"/></td>
+  <td><img src="./media/ai/AI_m8.png" width="350"/></td>
 </tr>
 <tr><td colspan=2>运行结果：即时影像显示在萤幕上，当按钮B按下时，会将即时影像储存在SD记忆卡并在萤幕上停顿显示1秒，随后再次显示即时影像。</td></tr>
 </table>
@@ -146,9 +146,9 @@
 10.	AI模组｜视讯处理：【停止录制】<br>
 
 </td>
-  <td><img src="/media/ai/AI_m9.png" width="350"/></td>
+  <td><img src="./media/ai/AI_m9.png" width="350"/></td>
 </tr>
-<tr><td colspan=2><img src="/media/ai/AI_m10.png" width="350"/></td></tr>
+<tr><td colspan=2><img src="./media/ai/AI_m10.png" width="350"/></td></tr>
 <tr><td colspan=2>运行结果：从AI模组取出SD记忆卡，在电脑开启影片档案(路径：/sd/user/record.avi)查看影片是否录制成功。</td></tr>
 </table>
 
@@ -170,9 +170,9 @@
 如按钮A松开:AI模组｜视讯处理：【停止录制】
 
 </td>
-  <td><img src="/media/ai/AI_m11.png" width="350"/></td>
+  <td><img src="./media/ai/AI_m11.png" width="350"/></td>
 </tr>
-<tr><td colspan=2>参考程式：<img src="/media/ai/AI_m12.png" width="350"/></td></tr>
+<tr><td colspan=2>参考程式：<img src="./media/ai/AI_m12.png" width="350"/></td></tr>
 <tr><td colspan=2>运行结果：即时影像显示在萤幕上并录制。<br>
 当按钮A按下时，开始录像并会将即时影像储存在SD记忆卡中，不按则只显示即时画面不录影。
 </td></tr>

aikit/AI_4.md

@@ -6,13 +6,13 @@
 在学习物体识别前，我们先来认识下图像识别。<br>
 图像识别，简单地来说，就是一个将图像与特定的词语对应起来的过程。从技术上来看，是利用电脑对图像进行处理、分析和理解，以识别各种不同模式的目标和对象的过程。图像识别的发展经历了三个阶段：文字识别、数字图像处理与识别、物体识别。<br>
 文字识别的研究是从 1950年开始的，一般是识别字母、数字和符号，从印刷文字识别到手写文字识别，应用非常广泛。<br>
-<img src="/media/ai/AI_n1.png" width="300"/><img src="/media/ai/AI_n2.png" width="350"/><br>
+<img src="./media/ai/AI_n1.png" width="300"/><img src="./media/ai/AI_n2.png" width="350"/><br>
 数字图像处理和识别的研究开始于1965年。数字图像与模拟图像相比具有存储、传输方便可压缩、传输过程中不易失真、处理方便等巨大优势，这些都为图像识别技术的发展提供了强大的动力。
-<br><img src="/media/ai/AI_n3.png" width="350"/><br>
+<br><img src="./media/ai/AI_n3.png" width="350"/><br>
 物体识别主要指对三维世界的物体及环境的感知和认识，属于高级的计算机视觉范畴。它是以数字图像处理与识别为基础的结合人工智能、系统学等学科的研究方向，其研究成果被广泛应用在各种工业及机器人中。
-<br><img src="/media/ai/AI_n4.png" width="350"/><br>
+<br><img src="./media/ai/AI_n4.png" width="350"/><br>
 了解了这些知识，我们再来看下面这四幅图，第一张图片是手写数字，可以看到电脑将它正确地识别为了425，后三张图片则分别分类为猫、人和车。
-<br><img src="/media/ai/AI_n5.png" width="350"/><br>
+<br><img src="./media/ai/AI_n5.png" width="350"/><br>
 这就是文字识别和物体识别的一些应用，电脑可通过深度学习算法，对输入的图像进行识别，并给出每幅图片的识别结果。<br>
 在人工智能领域，识别问题又可以归类为分类问题，所以物体识别，也可以称之为物体分类。<br>
 
@@ -21,13 +21,13 @@
 我们前面提到了，图像识别就是电脑获取，处理和分析图像数据的过程，这个过程其实也就是计算机视觉的实现过程。简而言之，计算机视觉使得电脑能够“看”事物——甚至包括人类无法看到的事物。然而，要想让电脑做到人类无法做到的事情，我们必须首先使电脑能够做到人类可以做的事情：看到并标记物体和生物。这是图像识别的主要功能。<br>
 我们先来看下下面这四幅猫的图片，我们可以很轻松地分辨出这四张图片都是猫，即使它们外形长相完全不同，且体态各异，即使它只露出了一截尾巴，但我们仍然可以分辨的出来。<br>
 但这对电脑来说却十分困难，因为电脑并没有像我们人类大脑这样复杂的系统。
-<br><img src="/media/ai/AI_n6.png" width="350"/><br>
+<br><img src="./media/ai/AI_n6.png" width="350"/><br>
 那么，到底电脑是如何识别图片的呢？我们来看下一节内容。<br>
 
 ---
 ##  B.	神经网路与深度学习
 电脑想要正确分类图片，就需要像我们人类一样去学习，知道图片中大量的资讯。目前，最有可能让电脑实现“看”的能力的技术叫做深度学习（Deep Learning，简称DL），它是一种让电脑从图片中学习的方法。学习的过程称为训练，识别的过程称为推理（测试）。
-<br><img src="/media/ai/AI_n7.png" width="350"/><br>
+<br><img src="./media/ai/AI_n7.png" width="350"/><br>
 电脑要识别图片，前提便是需要大量的图片数据作为输入，传入电脑以供其学习。<br>
 我们以识别猫为例，前期需要先准备大量的各种品类的猫，并且打上标签，告诉电脑：这些是猫，也就是这些图片的分类，然后电脑将这些数据输入网路，执行训练，通过不断地迭代进行学习，达到正确认识这些猫的目的。<br>
 然后，我们输入电脑一张新的猫的图片，进行测试，电脑执行测试演算法，便可给出输入图片的正确分类。<br>
@@ -43,57 +43,57 @@
 在研究过程中，数字手写体识别由于其有限的类别（0~9共10个数字）成为了相对简单的手写识别任务。所以，我们从简单的手写数字识别入手，来认识实现图像识别的演算法。<br>
 ##### 1.	人类学习和认识数字的过程
 前面已经提到，电脑需要像人一样思考学习，才能识别出图像，我们不妨反推一下，想一想我们小时候是怎样学习数字的，大家总结回想一下，我们学习数字的思维过程。为什么我们可以看到各式各样形状的数字，依旧可以知道它们分别是多少呢？
-<br><img src="/media/ai/AI_p1.png" width="350"/><br>
+<br><img src="./media/ai/AI_p1.png" width="350"/><br>
 这个过程也就是电脑要模仿的，我们把这个学习步骤写出来。
-<br><img src="/media/ai/AI_p2.png" width="350"/><br>
+<br><img src="./media/ai/AI_p2.png" width="350"/><br>
 这个就是人类学习和认知的过程，也就是机器要模仿的，现在我们将人的学习方式类比到电脑中，就会知道电脑学习并识别数字的过程了。
 ##### 2.	电脑学习并认识数字的过程
 ###### 1)	图像在电脑中的样子
 我们向电脑输入正确的带有标签的图像数据，电脑看到的并不是像我们人类看到的那样，如下图左边的图片，而是下图右边数字矩阵的样子。电脑中处理图像，处理的是图像中每一个像素（像素是电脑萤幕上所能显示的最小单位，是用来表示图像的单位）。
-<br><img src="/media/ai/AI_p3.png" width="350"/><br>
+<br><img src="./media/ai/AI_p3.png" width="350"/><br>
 上一节我们提到了，深度学习需要大量的数据作为输入，在手写数字识别系统中，数据来自于MNIST数据集，它包含60000个训练集和10000测试数据集。分为图片和标签，图片是28*28的像素矩阵，标签为0~9共10个数字。
 ###### 2)	模型训练——神经网路
 有了数据集，下一步，便是将数据输入到深度学习网路中，也就是神经网路中（这里采用的是LeNet-5卷积神经网路模型，卷积神经网路是深度学习神经网路中最常见的一种），进行自动的特征提取及学习，这个过程就是前面提到过的训练过程。<br>
 我们知道，人类大脑的神经网路是由神经元和突触组成，它们协同工作，完成对外界资讯的处理与传递。
-<br><img src="/media/ai/AI_p4.png" width="350"/><img src="/media/ai/AI_p5.png" width="350"/><br>
+<br><img src="./media/ai/AI_p4.png" width="350"/><img src="./media/ai/AI_p5.png" width="350"/><br>
 那么，人脑的神经网路对比到深度学习中，就是如下图所示的网路。
-<br><img src="/media/ai/AI_p6.png" width="350"/><br>
+<br><img src="./media/ai/AI_p6.png" width="350"/><br>
 大量的手写数字图像就是输入数据，作为第一层：输入层（一般情况下，输入层不在网路结构中体现，而在后面训练开始时给出），因为每张图像的像素是28x28，所以每张图像一共有784个像素，电脑中的索引一般从0开始，所以输入x即为x0-x783。 <br>
 中间部分称为隐藏层，在LeNet-5网路中，主要采用的是：卷积层Convolutional Layer（启动层为ReLu Layer）、池化层Pooling Layer以及全连接层Fully Connected Layer。<br>
 全连接层中加入启动函数：Softmax，这是一个回归模型，用于分类过程，可解决多分类问题。这里的手写数字识别就是一个多分类问题，0-9共10类，所以最后的输出层y的结果为y0-y9。
-<br><img src="/media/ai/AI_p7.png" width="350"/><br>
+<br><img src="./media/ai/AI_p7.png" width="350"/><br>
 并且Softmax也是一个概率函数，它可以给出输入图像识别为不同类别的概率，以此来让使用者判断输入图像中的数字更像哪一个识别结果。<br>
 这部分就是神经网路的网路结构，是深度学习演算法实现图像处理及学习的根本。
 ###### 3)	人类学习过程和电脑学习过程的对比
 前面我们给出了人类学习和认识数字的过程，也就是下图左边的部分，通过上一节的学习，我们知道了电脑学习并认识数字的过程，那么总结起来，就是下图右边所示的步骤。
-<br><img src="/media/ai/AI_p8.png" width="350"/><br>
+<br><img src="./media/ai/AI_p8.png" width="350"/><br>
 ###### 4)	手写数字识别的实现演示
 我们知道了手写数字识别的原理，那么，现在就来看看实际电脑中是如何实现图像识别的吧。
 打开网址：https://ai-blockly.cocorobo.hk/ ，进入AI blockly页面。<br>
 进入后，首先选择Examples选项。
-<br><img src="/media/ai/AI_p9.png" width="350"/><br>
+<br><img src="./media/ai/AI_p9.png" width="350"/><br>
 然后，继续选择Tensor Flow选项，然后选择Digit Recognition选项，并选择OK。
-<br><img src="/media/ai/AI_p10.png" width="350"/><img src="/media/ai/AI_p11.png" width="350"/><br>
+<br><img src="./media/ai/AI_p10.png" width="350"/><img src="./media/ai/AI_p11.png" width="350"/><br>
 然后，就会出现如下图所示的积木程式块。
-<br><img src="/media/ai/AI_p12.png" width="350"/><br>
+<br><img src="./media/ai/AI_p12.png" width="350"/><br>
 继续点击右下角区域中的RUN按钮，即可开始训练。
-<br><img src="/media/ai/AI_p13.png" width="350"/><br>
+<br><img src="./media/ai/AI_p13.png" width="350"/><br>
 训练的迭代过程中，会产生如下图所示的函数曲线图及网路结构资讯（Model Architecture），可通过观察曲线图的变化，来判断训练执行的状态及模型的训练效果。
-<br><img src="/media/ai/AI_p14.png" width="350"/><br>
+<br><img src="./media/ai/AI_p14.png" width="350"/><br>
 如上图所示，是演示的最终效果，左边是曲线图，第一副图是训练集（loss）和验证集（val_loss）的loss变化曲线，loss是损失函数，即模型预测出的结果与标签标注的真实值的差值。这个差值是随著训练轮数Epoch的增加而逐渐减小的。<br>
 第二幅图是训练集（acc）和验证集（val_acc）的准确率变化曲线，准确率为识别正确的图像个数除以总的图像数的比值，该值随著Epoch的增加而逐渐增大。<br>
 右侧为推理测试区，在画布中写出你要测试的数字，点击Detect，即可得到最终的识别结果。<br>
 其结果将打印显示在右上方区域的Console中。
-<br><img src="/media/ai/AI_p15.png" width="350"/><img src="/media/ai/AI_p16.png" width="350"/><br>
+<br><img src="./media/ai/AI_p15.png" width="350"/><img src="./media/ai/AI_p16.png" width="350"/><br>
 手写数字识别的整个实现过程到这里就结束了。<br>
 接下来，我们来学习今天最重要的部分——物体识别。
 
 ---
 ## D.	物体识别与YOLO演算法
 物体识别（Object Recognition）是计算机视觉中的一个应用，目的是让电脑去分析一张图片或者一段影片中的物体，并标注出其中物体所属的类别。
-<br><img src="/media/ai/AI_q1.png" width="350"/><br>
+<br><img src="./media/ai/AI_q1.png" width="350"/><br>
 ###### YOLO演算法介绍：
-<br><img src="/media/ai/AI_q2.png" width="350"/><br>
+<br><img src="./media/ai/AI_q2.png" width="350"/><br>
 YOLO是目前应用非常广泛的一种物体识别演算法。YOLO的意思是You only look once，也就是你只看一眼，就能认出这是什么物体，体现YOLO演算法识别的精度和速度。<br>
 YOLO是基于Pascal VOC2012数据集的目标检测系统。它能够检测到20种Pascal的目标类别，包括：<br>
 - 人
@@ -106,17 +106,17 @@ YOLO演算法的识别过程分为两个部分，这也基本是所有视觉领
 2.  输入新的图像数据，调用模型，实现推理（inference）过程，也称为测试过程。
 我们先来看下第一步的原理：<br>
 训练就需要有网路，YOLO的网路结构如下图所示，整个检测网路包括24个卷积层和2个全连接层。其中，卷积层用来提取图像特征，全连接层用来预测图像位置和类别概率值。
-<br><img src="/media/ai/AI_q3.png" width="350"/><br>
+<br><img src="./media/ai/AI_q3.png" width="350"/><br>
 第二步：推理过程：
-<br><img src="/media/ai/AI_q4.png" width="350"/><br>
+<br><img src="./media/ai/AI_q4.png" width="350"/><br>
 加载网路模型后，其推理的计算流程如图所示，我们可以将最终识别结果之前的步骤都看做一个函数计算，通过这个计算过程，就可以得到最后的物体识别结果了。<br>
 那么，YOLO具体是如何实现物体识别的呢？我们来深入地学习一下它的内部原理。
-<br><img src="/media/ai/AI_q5.png" width="350"/><br>
+<br><img src="./media/ai/AI_q5.png" width="350"/><br>
 如上图所示，YOLO演算法将输入图片划分成7x7=49个网格（即上图中左边第一副图，S=7），如果一个物体的中心落在某网格(cell)内，则相应网格负责检测该物体。<br>
 每个网格预测两个边界框（Bounding boxes），一共预测49x2=98个边界框（上图中位于上面的那副图）。可以近似理解为在输入图片上粗略的选取98个候选区，这98个候选区覆盖了图片的整个区域，进而用回归预测这98个候选框对应的边界框。<br>
 除了给出边界框，也就是图像的位置资讯外，还会给出对应的置信度（confidence）和分类结果（categories）。其中，置信度代表了所预测的 box 中含有 object 的置信度（概率）和这个 box 预测目标位置的准确度这两重资讯。<br>
 最后，网路就给出了图像的最终识别结果，如下图所示。
-<br><img src="/media/ai/AI_q6.png" width="350"/><br>
+<br><img src="./media/ai/AI_q6.png" width="350"/><br>
 
 ---
 ## E.	AI模型积木说明
@@ -128,51 +128,51 @@ YOLO演算法的识别过程分为两个部分，这也基本是所有视觉领
     <td width="30%">说明</td>
 	</tr>
   <tr>
-    <td width="50%"><img src="/media/ai/AI_r1.png" width="300"/></td>
+    <td width="50%"><img src="./media/ai/AI_r1.png" width="300"/></td>
     <td width="20%">载入模型</td>
-    <td width="30%">载入人工智能模型，可以从选单中选择常用识别模型<img src="/media/ai/AI_r2.png" width="300"/></td>
+    <td width="30%">载入人工智能模型，可以从选单中选择常用识别模型<img src="./media/ai/AI_r2.png" width="300"/></td>
   </tr>
   <tr>
-    <td width="50%"><img src="/media/ai/AI_r3.png" width="300"/></td>
+    <td width="50%"><img src="./media/ai/AI_r3.png" width="300"/></td>
     <td width="20%">获取识别结果</td>
-    <td width="30%">获取当前结果，可选择数字识别的结果或者识别为某个数字的置信度<img src="/media/ai/AI_r4.png" width="300"/></td>
+    <td width="30%">获取当前结果，可选择数字识别的结果或者识别为某个数字的置信度<img src="./media/ai/AI_r4.png" width="300"/></td>
   </tr>
   <tr>
-    <td width="50%"><img src="/media/ai/AI_r5.png" width="300"/></td>
+    <td width="50%"><img src="./media/ai/AI_r5.png" width="300"/></td>
     <td width="20%">物体识别</td>
     <td width="30%">获取物体识别真假值，如果识别到物体会返回「真」值，否则返回「假」值</td>
   </tr>
   <tr>
-    <td width="50%"><img src="/media/ai/AI_r6.png" width="300"/></td>
+    <td width="50%"><img src="./media/ai/AI_r6.png" width="300"/></td>
     <td width="20%">物体识别结果的参数</td>
-    <td width="30%">获取识别到的每个物体的各项参数，包括：<img src="/media/ai/AI_r7.png" width="300"/></td>
+    <td width="30%">获取识别到的每个物体的各项参数，包括：<img src="./media/ai/AI_r7.png" width="300"/></td>
   </tr>
   <tr>
-    <td width="50%"><img src="/media/ai/AI_r8.png" width="300"/></td>
+    <td width="50%"><img src="./media/ai/AI_r8.png" width="300"/></td>
     <td width="20%">人脸识别</td>
     <td width="30%">获取人脸识别真假值，如果识别到人脸会返回「真」值，否则返回「假」值</td>
   </tr>
   <tr>
-    <td width="50%"><img src="/media/ai/AI_r9.png" width="300"/></td>
+    <td width="50%"><img src="./media/ai/AI_r9.png" width="300"/></td>
     <td width="20%">人脸识别结果的参数</td>
-    <td width="30%">获取识别到的每个人脸的各项参数，包括：<img src="/media/ai/AI_r10.png" width="300"/></td>
+    <td width="30%">获取识别到的每个人脸的各项参数，包括：<img src="./media/ai/AI_r10.png" width="300"/></td>
   </tr>
 <tr>
-    <td width="50%"><img src="/media/ai/AI_r11.png" width="300"/></td>
+    <td width="50%"><img src="./media/ai/AI_r11.png" width="300"/></td>
     <td width="20%">加载客制化模型</td>
     <td width="30%">从指定路径加载用户预训练好的客制化模型：/sd/user/mymodel.kmodel
 并根据要识别的物体种类来设定客制化物体的类别名称：Object Name
 </td>
   </tr>
 <tr>
-    <td width="50%"><img src="/media/ai/AI_r12.png" width="300"/></td>
+    <td width="50%"><img src="./media/ai/AI_r12.png" width="300"/></td>
     <td width="20%">客制化的物体识别</td>
     <td width="30%">获取客制化物体识别真假值，如果识别到客制化物体会返回「真」值，否则返回「假」值</td>
   </tr>
 <tr>
-    <td width="50%"><img src="/media/ai/AI_r13.png" width="300"/></td>
+    <td width="50%"><img src="./media/ai/AI_r13.png" width="300"/></td>
     <td width="20%">客制化物体识别结果的参数</td>
-    <td width="30%">获取识别到的每个客制化物体的各项参数，包括：<img src="/media/ai/AI_r14.png" width="300"/></td>
+    <td width="30%">获取识别到的每个客制化物体的各项参数，包括：<img src="./media/ai/AI_r14.png" width="300"/></td>
   </tr>
 </table>
 
@@ -195,16 +195,16 @@ YOLO演算法的识别过程分为两个部分，这也基本是所有视觉领
 </td>
 </tr>
 <tr >
-<td><img src="/media/ai/AI_s1.png" width="300"/></td>
+<td><img src="./media/ai/AI_s1.png" width="300"/></td>
 <td>注意：步骤4必须使用内建变数「img_objectrecognition」，所以首先要在步骤3使用「加载预设模型」指令，然后才进行步骤4及步骤5。</td>
 </tr>
 <tr >
-<td><img src="/media/ai/AI_s2.png" width="300"/></td>
-<td><img src="/media/ai/AI_s3.png" width="300"/></td>
+<td><img src="./media/ai/AI_s2.png" width="300"/></td>
+<td><img src="./media/ai/AI_s3.png" width="300"/></td>
 </tr>
 <tr >
 <td>测试结果：在「代码区」点按「串口互动窗」，将模组向四周扫描，并观察显示的结果如下，当检测到有物体时会显示「Object Found」，否则会显示「Nothing」</td>
-<td><img src="/media/ai/AI_s4.png" width="300"/></td>
+<td><img src="./media/ai/AI_s4.png" width="300"/></td>
 </tr>
 </table>
 
@@ -219,26 +219,26 @@ YOLO演算法的识别过程分为两个部分，这也基本是所有视觉领
 </td>
 </tr>
 <tr >
-<td colspan=2><img src="/media/ai/AI_s5.png" width="300"/></td>
+<td colspan=2><img src="./media/ai/AI_s5.png" width="300"/></td>
 </tr>
 <tr >
-<td><img src="/media/ai/AI_s6.png" width="300"/></td>
-<td><img src="/media/ai/AI_s7.png" width="300"/></td>
+<td><img src="./media/ai/AI_s6.png" width="300"/></td>
+<td><img src="./media/ai/AI_s7.png" width="300"/></td>
 </tr>
 <tr >
 <td>测试结果：点按「串口互动窗」，将模组向四周扫描，并观察显示的结果如下，当检测到有物体时会显示「物体名称」，否则会显示「Nothing」</td>
-<td><img src="/media/ai/AI_s8.png" width="300"/></td>
+<td><img src="./media/ai/AI_s8.png" width="300"/></td>
 </tr>
 </table>
 思考问题：活动二的程式运用「物体检测模型」，判断摄影镜头拍摄到的图像，并输出物体名称，此名称是如何决定？「物体检测模型」是否能够判断所有物体，输出正确名称？
-<br><img src="/media/ai/AI_s9.png" width="300"/>
+<br><img src="./media/ai/AI_s9.png" width="300"/>
 
 ---
 ## G.	专题学习
 硬体设备：AI推理模组、萤幕模组、摄像头模组<br>
 任务目标：利用摄影镜头将影像显示在萤幕模组上，载入物体识别模型，将识别到的物体在萤幕上标示出来。<br>
 基本流程/步骤：
-<br><img src="/media/ai/AI_t1.png" width="350"/><br>
+<br><img src="./media/ai/AI_t1.png" width="350"/><br>
 
 ###### 第一步：模组初始化
 <table style="margin-top:20px;">
@@ -248,7 +248,7 @@ YOLO演算法的识别过程分为两个部分，这也基本是所有视觉领
 2.	AI模组｜相机：【初始化】<br>
 3.	循环：【重复执行】<br>
 </td>
-<td><img src="/media/ai/AI_t2.png" width="300"/></td>
+<td><img src="./media/ai/AI_t2.png" width="300"/></td>
 </tr>
 </table>
 
@@ -266,11 +266,11 @@ YOLO演算法的识别过程分为两个部分，这也基本是所有视觉领
 </td>
 </tr>
 <tr >
-<td colspan=2><img src="/media/ai/AI_t3.png" width="300"/></td>
+<td colspan=2><img src="./media/ai/AI_t3.png" width="300"/></td>
 </tr>
 <tr >
-<td><img src="/media/ai/AI_t4.png" width="300"/></td>
-<td><img src="/media/ai/AI_t5.png" width="300"/></td>
+<td><img src="./media/ai/AI_t4.png" width="300"/></td>
+<td><img src="./media/ai/AI_t5.png" width="300"/></td>
 </tr>
 </table>
 
@@ -290,10 +290,10 @@ YOLO演算法的识别过程分为两个部分，这也基本是所有视觉领
 </td>
 </tr>
 <tr >
-<td colspan=2><img src="/media/ai/AI_t6.png" width="300"/></td>
+<td colspan=2><img src="./media/ai/AI_t6.png" width="300"/></td>
 </tr>
 <tr >
-<td colspan=2><img src="/media/ai/AI_t7.png" width="300"/></td>
+<td colspan=2><img src="./media/ai/AI_t7.png" width="300"/></td>
 </tr>
 </table>
 
@@ -305,18 +305,18 @@ YOLO演算法的识别过程分为两个部分，这也基本是所有视觉领
 </td>
 </tr>
 <tr >
-<td colspan=2><img src="/media/ai/AI_t8.png" width="300"/></td>
+<td colspan=2><img src="./media/ai/AI_t8.png" width="300"/></td>
 </tr>
 </table>
 
 ###### 完整程式：
 <table style="margin-top:20px;">
 <tr>
- <td ><img src="/media/ai/AI_t9.png" width="300"/>
+ <td ><img src="./media/ai/AI_t9.png" width="300"/>
 </td>
 </tr>
 <tr >
-<td><img src="/media/ai/AI_t10.png" width="200"/></td>
+<td><img src="./media/ai/AI_t10.png" width="200"/></td>
 </tr>
 </table>
 
@@ -339,7 +339,7 @@ c.	AI模组｜AI模型：【物体识别属性】<br>
 </td>
 </tr>
 <tr >
-<td><img src="/media/ai/AI_u1.png" width="200"/></td>
+<td><img src="./media/ai/AI_u1.png" width="200"/></td>
 </tr>
 </table>
 
@@ -352,15 +352,15 @@ c.	AI模组｜AI模型：【物体识别属性】<br>
 </td>
 </tr>
 <tr >
-<td> <img src="/media/ai/AI_u2.png" width="200"/></td>
+<td> <img src="./media/ai/AI_u2.png" width="200"/></td>
 </tr>
 <tr >
-<td> 完整Python代码：<img src="/media/ai/AI_u3.png" width="200"/></td>
+<td> 完整Python代码：<img src="./media/ai/AI_u3.png" width="200"/></td>
 </tr>
 <tr >
-<td> 完整程式：<img src="/media/ai/AI_u4.png" width="200"/></td>
+<td> 完整程式：<img src="./media/ai/AI_u4.png" width="200"/></td>
 </tr>
 <tr >
-<td> 运行结果：<img src="/media/ai/AI_u5.png" width="200"/><img src="/media/ai/AI_u6.png" width="200"/></td>
+<td> 运行结果：<img src="./media/ai/AI_u5.png" width="200"/><img src="./media/ai/AI_u6.png" width="200"/></td>
 </tr>
 </table>

extension/EX_01.md

@@ -5,8 +5,8 @@
 拓展转接模组上嵌有多组接口，包含AI 和 IoT两大类，分别配合 AI 模组和 IoT 模组使用，用于外接多种第三方感应器或电子元器件，如红外线感应器和超声波感应器等，通过「输入/输出」类积木指令编程控制。
 <table style="margin-top:20px;">
  <tr>
-   <td width="50%"><img src="/media/ai/AI_tuozhan1.png" width="350"/></td>
-   <td width="50%"><img src="/media/ai/AI_tuozhan2.png" width="350"/></td>
+   <td width="50%"><img src="./media/ai/AI_tuozhan1.png" width="350"/></td>
+   <td width="50%"><img src="./media/ai/AI_tuozhan2.png" width="350"/></td>
  </tr>
  <tr>
    <td>正面</td>
@@ -22,23 +22,23 @@
 
 ## B.	使用拓展转接模组（配合AI模组）
 效果展示：使用按钮开关控制发光二极管亮和灭。<br><br>
-<img src="/media/EX/001.jpg" width="400"/><br>
+<img src="./media/EX/001.jpg" width="400"/><br>
 效果分析：获取按钮开关的状态（输入）以控制二极管的亮和灭（输出），按钮的按下与松开两种状态、二极管的亮和灭两种状态，分别与高电平、低电平或者0和1对应。
 
 所需材料：AI模组、拓展转接模组、杜邦线（母-母）、二极管、按钮开关。<br>
-<img src="/media/EX/002.jpg" width="400"/><br>
+<img src="./media/EX/002.jpg" width="400"/><br>
 
 ### 步骤一：连接
 连接方式如下：<br>
-<img src="/media/EX/003.png" width="600"/><br>
+<img src="./media/EX/003.png" width="600"/><br>
 连接效果：<br>
-<img src="/media/EX/004.jpg" width="500"/><br>
+<img src="./media/EX/004.jpg" width="500"/><br>
 
 ### 步骤二：编写程式并上传
 
 1. 所需拓展转接模组「输入/输出」类积木指令：
 
- <img src="/media/EX/005.png" width="400"/><br>
+ <img src="./media/EX/005.png" width="400"/><br>
 
 2. 编写程式示范：<br>
 
@@ -49,10 +49,10 @@
 2.逻辑：「如果...执行」、「判断」<br>
 3.输入/输出：选择AI模组获取引脚、设定引脚<br>
 4.引脚编号务必与转接模组上实际连接的接口编号保持一致<br>
-5.数学运算：<img src="/media/EX/007.jpg"/>
+5.数学运算：<img src="./media/EX/007.jpg"/>
 
 </td>
-		<td width="50%"><img src="/media/EX/006.jpg" width="350"/>
+		<td width="50%"><img src="./media/EX/006.jpg" width="350"/>
 	</tr>
 	<tr>
 		<td colspan=2>运行结果：
@@ -63,7 +63,7 @@
 
 3. 补充<br>
 上面第2步「逻辑」积木指令的实现方式如下：<br>
-1）选择：<br><img src="/media/EX/008.jpg" /><br>
-2）点击左上角图标，显示如下：<br><img src="/media/EX/009.jpg" width="300"/><br>
+1）选择：<br><img src="./media/EX/008.jpg" /><br>
+2）点击左上角图标，显示如下：<br><img src="./media/EX/009.jpg" width="300"/><br>
 3）拖拽「否则」积木指令到右侧，放到「如果」下面，即可显示出「否则」部分：<br>
-<img src="/media/EX/010.jpg" width="300"/><br>
+<img src="./media/EX/010.jpg" width="300"/><br>

extension/EX_02.md

@@ -2,7 +2,7 @@
 
 ## A. 感应器
 <b>感应器与拓展转接模组的连接方法：</b><br>
-<img src="/media/EX/011.png" width="500"/><br>
+<img src="./media/EX/011.png" width="500"/><br>
 
 ⚠️注意：
 1. 若感应器同时有DO和AO接口，则说明此感应器支持数位讯号和类比讯号输入/输出；<br>
@@ -15,41 +15,41 @@
 - ### 光照感应器
 探测光源処是一个光敏电阻，光敏电阻是用硫化镉或硒化镉等半导体材料制成的特殊电阻器，其工作原理是基于内光电效应。随著光照强度的升高，电阻值迅速降低，由于光照产生的载流子都参与导电，在外加电场的作用下作漂移运动，电子奔向电源的正极，空穴奔向电源的负极，从而使光敏电阻器的组织迅速下降。其在无光照时，几乎呈高阻状态，暗电阻很大。
 该光照感应器对环境光线最敏感，一般用来检测周围环境的光线的亮度，触发单片机或继电器模组等。
-<img src="/media/EX/012.jpg" width="500"/><br>
+<img src="./media/EX/012.jpg" width="500"/><br>
 <br>
 使用「序列埠互动窗」打印光照感应器「数码讯号数值」：<br><br>
 ①　连接方法：<br>
-<img src="/media/EX/015.png" width="500"/><br>
-<img src="/media/EX/016.png" width="500"/><br>
+<img src="./media/EX/015.png" width="500"/><br>
+<img src="./media/EX/016.png" width="500"/><br>
 ②　程式：<br>
-<img src="/media/EX/017.png" width="500"/><br>
+<img src="./media/EX/017.png" width="500"/><br>
 ③　效果：未遮挡感应器时显示“0”；遮挡感应器时显示“1”。<br>
-<img src="/media/EX/018.jpg" width="500"/><br>
+<img src="./media/EX/018.jpg" width="500"/><br>
 
 - ### 红外避障感应器
 红外避障感应器具有一对红外讯号发射与接收二极管，发射管发射一定频率的红外讯号，接收管接受这种频率的红外讯号，儅传感器的检测方向遇到障碍物（反射面）时，红外讯号反射回来被接收管接收，经过比较器电路处理之后，输出指示処的绿色指示灯将被点亮，同时数位端口持续输出低电平讯号。<br><br>
-<img src="/media/EX/056.jpg" width="300"/><br>
+<img src="./media/EX/056.jpg" width="300"/><br>
 <br>
 使用「序列埠互动窗」打印红外避障感应器「数码讯号数值」：<br><br>
 ①　连接方法：<br>
-<img src="/media/EX/019.png" width="500"/><br>
+<img src="./media/EX/019.png" width="500"/><br>
 ②　程式：<br>
-<img src="/media/EX/020.png" width="500"/><br>
+<img src="./media/EX/020.png" width="500"/><br>
 ③　效果：<br>
-<img src="/media/EX/019.jpg" width="500"/><br>
+<img src="./media/EX/019.jpg" width="500"/><br>
 
 - ### 雨滴感应器
 可用于不同天气状况的监测，并转换成数位讯号或类比讯号；使用时，感应板上没有水滴时，数位输出为高电平，开关指示灯灭，感应版越干燥，读取的模拟接口的数值越大，滴上一滴水，数位输出为低电平，开关指示灯亮，水滴越多，读取的模拟接口的数值越小。
 支持：数位讯号、类比讯号输入<br>
 参数：5.0*4.0cm<br><br>
-<img src="/media/EX/021.png" width="500"/><br><br>
+<img src="./media/EX/021.png" width="500"/><br><br>
 使用「序列埠互动窗」打印光照感应器「数码讯号数值」：<br><br>
 ①　连接方法：<br>
-<img src="/media/EX/015.png" width="500"/><br>
+<img src="./media/EX/015.png" width="500"/><br>
 ②　程式：<br>
-<img src="/media/EX/017.png" width="500"/><br>
+<img src="./media/EX/017.png" width="500"/><br>
 ③　效果：无雨时显示“1”；有雨时显示“0”。<br>
-<img src="/media/EX/022.png" width="500"/><br>
+<img src="./media/EX/022.png" width="500"/><br>
 提示：此处使用湿纸巾模拟雨滴效果。
 
 
@@ -58,60 +58,60 @@
 将感应器插入土壤中，通过类比／数位转换电压讯号，即可检测土壤水分，土壤越干燥，输出电压越小，读取的模拟接口的数值则越大，相反，越湿润输出电压越大（数值越小），读取的模拟接口的数值则越小。<br>
 支持：数位讯号、类比讯号<br>
 注意：高电平数位输出为1，低电平数位输出为0；<br><br>
-<img src="/media/EX/023.png" width="500"/><br><br>
+<img src="./media/EX/023.png" width="500"/><br><br>
 使用「序列埠互动窗」打印光照感应器「数码讯号数值」：<br><br>
 ①　连接方法：<br>
-<img src="/media/EX/024.png" width="500"/><br>
+<img src="./media/EX/024.png" width="500"/><br>
 ②　程式：<br>
-<img src="/media/EX/025.png" width="500"/><br>
+<img src="./media/EX/025.png" width="500"/><br>
 ③　效果：无雨时显示“1”；有雨时显示“0”。<br>
-<img src="/media/EX/026.jpg" width="500"/><br>
+<img src="./media/EX/026.jpg" width="500"/><br>
 
 
 - ### 烟雾感应器
 当感应器所处环境中存在可燃性气体时，感应器的电导率随空气中可燃性气体浓度的增加而增大，类比讯号对应的输出电压随浓度越高电压越高。<br><br>
-<img src="/media/EX/027.png" width="500"/><br><br>
+<img src="./media/EX/027.png" width="500"/><br><br>
 使用「序列埠互动窗」打印烟雾感应器「数码讯号数值」：<br><br>
 ①　连接方法：<br>
-<img src="/media/EX/047.png" width="500"/><br>
+<img src="./media/EX/047.png" width="500"/><br>
 ②　程式：<br>
-<img src="/media/EX/048.png" width="500"/><br>
+<img src="./media/EX/048.png" width="500"/><br>
 ③　效果：<br>
-<img src="/media/EX/049.jpg" width="500"/><br>
+<img src="./media/EX/049.jpg" width="500"/><br>
 
 - ### 火焰感应器
 火焰是由各种燃烧生成物、中间物、高温气体、碳氢物质以及无机物质为主题的高温固体微粒构成的。火焰的热辐射具有离散光谱的气体辐射和连续光谱的固体辐射。不同燃烧物的火焰辐射强度、波长分布有所差异，但总体来说，其对应火焰温度的近红外波长域及紫外光域具有很大的辐射强度，根据这种特性可制成火焰传感器。<br>
 可监测火焰或者波长在 760nm-1100nm 范围内的光源，打火机测试火焰距离为80cm，与火焰的距离越大，测试距离越远。<br><br>
-<img src="/media/EX/028.png" width="500"/><br>
+<img src="./media/EX/028.png" width="500"/><br>
 使用「序列埠互动窗」打印火焰感应器「数码讯号数值」：<br><br>
 ①　连接方法：<br>
-<img src="/media/EX/050.png" width="500"/><br>
+<img src="./media/EX/050.png" width="500"/><br>
 ②　程式：<br>
-<img src="/media/EX/051.png" width="500"/><br>
+<img src="./media/EX/051.png" width="500"/><br>
 ③　效果：<br>
-<img src="/media/EX/052.jpg" width="500"/><br>
+<img src="./media/EX/052.jpg" width="500"/><br>
 
 - ### 震动感应器
 震动感应器的作用主要是将机械量接收下来，并转换为与之成比例的电量。它并不是直接将原始要测的机械量转变为电量，而是将原始要测的机械量作为震动感应器的输入量，然后由机械接收部分加以接收，形成另一个适合于变换的机械量，最后由机电变换部分再变换为电量。因此一个感应器的工作性能是由机械接收部分和机电变换部分的工作性能来决定的。<br>
 震动感应器用于各种震动触发作用，不震动时，震动开关呈闭合导通状态，输出端输出低电平讯号，绿色指示灯亮。<br><br>
-<img src="/media/EX/029.png" width="500"/><br>
+<img src="./media/EX/029.png" width="500"/><br>
 使用「序列埠互动窗」打印火焰感应器「数码讯号数值」：<br><br>
 ①　连接方法：<br>
-<img src="/media/EX/053.png" width="500"/><br>
+<img src="./media/EX/053.png" width="500"/><br>
 ②　程式：<br>
-<img src="/media/EX/054.png" width="500"/><br>
+<img src="./media/EX/054.png" width="500"/><br>
 ③　效果：晃动震动感应器时，显示“1”；保持静止时，显示“0”。 <br>
-<img src="/media/EX/055.png" width="600"/><br>
+<img src="./media/EX/055.png" width="600"/><br>
 
 ## B. 伺服马达
 伺服马达（Servomotor）是对用于使用伺服机构的马达总称。指依照命令动作的意义。所谓伺服系统，就是依照指示命令动作所构成的控制装置，应用于马达的伺服控制，将感测器装在马达与控制对象机器上，侦测结果会返回伺服放大器与指令值做比较。<br><br>
-<img src="/media/EX/030.png" width="400"/><br><br>
+<img src="./media/EX/030.png" width="400"/><br><br>
 设定伺服马达转动<br><br>
 ①　连接方法：<br>
-<img src="/media/EX/031.png" width="500"/><br>
-<img src="/media/EX/032.png" width="400"/><br>
+<img src="./media/EX/031.png" width="500"/><br>
+<img src="./media/EX/032.png" width="400"/><br>
 ②　程式：<br>
-<img src="/media/EX/033.png" width="500"/><br>
+<img src="./media/EX/033.png" width="500"/><br>
 
 <table style="margin-top:20px;">
 	<tr>
@@ -122,7 +122,7 @@
 4. 引脚编号务必与转接模组上实际连接的接口编号保持一致<br>
 5. 时间：「等待」<br>
 </td>
-		<td width="50%"><img src="/media/EX/034.png" width="350"/>
+		<td width="50%"><img src="./media/EX/034.png" width="350"/>
 	</tr>
 	<tr>
 		<td colspan=2>运行效果：伺服马达的舵臂会先转动至90度，再返回起始位置，一直重复

extension/EX_03.md

@@ -4,37 +4,37 @@
 Micro:bit是由英国BBC公司推出的面向青少年编程教育的微型计算机，别看它身材不大，但麻雀虽小五脏俱全，一块小板子上集成了加速度传感器，磁力传感器，两个可编程按钮，25个单色LED，蓝牙等常用感测器设备，采用Micro usb口供电，可外接电池盒，在底部还有多个环孔连接器，可用于控制外接设备。<br>
 学习使用Micro:bit请参阅：
 Micro:bit快速入门 https://archive.microbit.org/hk/guide/quick/<br>
-<img src="/media/EX/038.jpg" width="400"/><br><br>
+<img src="./media/EX/038.jpg" width="400"/><br><br>
 cocorobo的AI模组可以通过拓展版模组与Micro:bit通讯。<br>
 ### 1. 拓展转接模组与Micro:bit通讯
 ①  连接方法<br>
 Micro:bit与拓展转接模组的PIN口：<br>
-<img src="/media/EX/043.jpg" width="700"/><br><br>
+<img src="./media/EX/043.jpg" width="700"/><br><br>
 使用鳄鱼夹连接Micro:bit与拓展转接模组：<br>
-<img src="/media/EX/045.png" width="500"/><br><br>
-<img src="/media/EX/044.png" width="500"/><br><br>
+<img src="./media/EX/045.png" width="500"/><br><br>
+<img src="./media/EX/044.png" width="500"/><br><br>
 连接效果如下：<br>
-<img src="/media/EX/046.png" width="500"/><br><br>
+<img src="./media/EX/046.png" width="500"/><br><br>
 ② ：Micro:bit程式设计<br>
 程式设计平台：https://makecode.microbit.org/<br>
 编写下图程式接收序列埠通讯文字：<br>
-<img src="/media/EX/035.png" width="500"/><br><br>
+<img src="./media/EX/035.png" width="500"/><br><br>
 ③：AI模组程式设计<br>
 程式设计平台：https://x.cocorobo.hk<br>
-<img src="/media/EX/039.png" width="500"/><br><br>
+<img src="./media/EX/039.png" width="500"/><br><br>
 ④ 运行程式后查看Micro:bit的效果<br>
-<img src="/media/EX/040.gif" width="400"/><br><br>
+<img src="./media/EX/040.gif" width="400"/><br><br>
 
 ### 2. AI模组控制Micro:bit
 ①  连接方法同上。<br>
 ② ：Micro:bit程式设计<br>
 编写下图程式接收序列埠通讯文字并做出不同指令：<br>
-<img src="/media/EX/037.png" width="500"/><br><br>
+<img src="./media/EX/037.png" width="500"/><br><br>
 ③：AI模组程式设计<br>
 编写下图程式按下按键发送不同文字：<br>
-<img src="/media/EX/041.png" width="500"/><br><br>
+<img src="./media/EX/041.png" width="500"/><br><br>
 ④ 运行程式后查看Micro:bit的效果<br>
-<img src="/media/EX/042.gif" width="400"/><br><br>
+<img src="./media/EX/042.gif" width="400"/><br><br>
 
 ## B. Arduino
 更多功能持续更新中。

index.html

@@ -64,7 +64,7 @@
         window.$docsify = {
             name: 'CocoBlockly X Help',
             // repo: '',
-            logo: '/media/help-logo.png',
+            logo: './media/help-logo.png',
             themeColor: '#225dd5',
             homepage: 'index.md',
             auto2top: true,

index.md

@@ -1,5 +1,5 @@
 # CocoBlockly X 在线帮助文档
-<img src="/media/blockly.png" width="650"/>
+<img src="./media/blockly.png" width="650"/>
 
 ## AI Kit