关于如何载入mobilenet模型的一些问题

[YIN-jw]

    我们希望能在本地测试scratch3_knn插件，环境已经搭建完毕，Helloworld插件也能正常使用。但目前的状况是按照readme中写的“开源人工智能相关的Scratch插件”的文章步骤进行操作后发现scratch3_knn插件无法正常使用，积木块“is loaded”一直显示“false”，我们的理解是mobilenet模型没有成功进行加载，通过反复尝试，也不清楚问题出在哪里，故提出issue。
       我们关于创建scratch3_knn插件的操作有 ：1、将您提供的scratch3_knn代码放入 scratch-vm中；2、在GitHub上将插件底层使用的tfjs和tfjs-models两个压缩包下载解压；3、由于发现使用import语句编译可以通过，但是网页无法打开（为白色的空白界面），故将import 语句修改为了require语句（修改后的部分程序附在了文后）；4、在cmder中，路径为scratch3_knn文件夹下依次运行yarn add babel-polyfill,yarn add @tensorflow/tfjs,yarn add @tensorflow-models/mobilenet,yarn add @tensorflow-models/knn-classifier语句（中间有过安装不成功的问题，之后通过反复尝试，在cmder中已经显示了成功）；5、重新按照“创建你的第一个Scratch3.0 Extensions”中的步骤进行操作,webpack-dev-server --https编译通过网页也可以打开，但积木块“is loaded”一直显示“false”，尝试了“石头剪刀布”的例子也无法正常的识别(程序也附在了文后)。
     目前我们猜测到问题出现的可能原因有：1、没有使用import语句而使用了require；2、是否是在使用yarn add 命令时，并没有将依赖成功安装上。 综上，我们诚挚的向您请教，希望您能提出一些意见或建议，不胜感激！

[wwj718]

@YIN-jw 可能是网络问题，需要加载google的模型

@summerscar 是否可能提个pr，把静态文件的方案放上来

[mickwubs97]

请问网络问题具体指什么？ 是这样的，我们在使用CodeLab提供的图像分类模块时，基本能正常运行。 但以同样的网运行我们在scratch-gui和scratch-vm上添加的knn模块时，使用import * as xxx from 'xxx'; 就会出现编译成功但网页打不开的情况。将上述语句换成 const xxx = require('xxx');则网页能成功打开，但‘isload'模块一直显示'false'，而且不能成功运行“石头剪刀布”之间的识别。所以我们判断是mobilenet网络没有成功载入，但目前还无法确知你们所说的“网络问题”具体指什么。

[summerscar]

具体原因需要通过浏览器开发者工具 console面板的报错 和 network下模型文件的加载情况才能确定

优先参考官方的引入方式

console中有knn相关报错可能由于版本问题

网络问题可能是由于拉取存储于google的模型数据失败（打开插件时查看network加载的文件是否200） 可以自行引入修改的mobilenet文件 baseurl参数 调整加载路径
模型数据 可以放于 gui/static 下， baseurl 调整为 var BASE_PATH = '/static/knn/';

还有问题的话 贴一下 console 面板的报错信息 @YIN-jw @TyutWzz-beep

[mickwubs97]

好的，十分感谢您的回复。 您说到的方面我们下一步会多加注意。

我们检查相关问题后再把相关结果贴上去。

[mickwubs97]

您好，我们就控制台所提出的问题，我做了一些记录。 首先我们遇到的问题和之前https://github.com/CodeLabClub/scratch3_knn/issues/2 所提出的问题相同，我在/home/michael/Documents/Scratch3.0/scratch-gui/node_modules/scratch-vm/src/extensions/scratch3_knn 路径下yarn add 了 @tensorflow/tfjs@0.10.0 (退回到了原来的版本）

之后出现的错误是：

Blocked loading mixed active content "http://storage.codelab.club/tfjs-models/tfjs/mobilenet_v1_1.0_224/model.json" 和 TypeError: NetworkError when attempting to fetch resource.

这是在ubuntu liunx 下使用火狐浏览器的结果。

在ubuntu linux下使用谷歌浏览器时，我们首先遇到的问题是： lib.min.js:242465 Mixed Content: The page at 'https://0.0.0.0:8601/' was loaded over HTTPS, but requested an insecure resource 'http://storage.codelab.club/tfjs-models/tfjs/mobilenet_v1_1.0_224/model.json'. This request has been blocked; the content must be served over HTTPS.

之后我们采用了 https://blog.csdn.net/cczzyc1/article/details/97135143 所提供的方法，在head element 的 meta node 中添加了 http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" 属性，上述错误消除。

但isload模块仍显示false.

此时出现的错误是： models.js:98 GET https://storage.codelab.club/tfjs-models/tfjs/mobilenet_v1_1.0_224/model.json net::ERR_SSL_VERSION_OR_CIPHER_MISMATCH 和 scratch-link-device-adapter.js:44 Uncaught (in promise) TypeError: Failed to fetch

目前我们还在想办法解决上述问题，也希望能得到您和你们团队的建议和指导。

[summerscar]

这个问题是由于 使用https的情况下 无法请求http协议的资源 后面那个错误应该是 https://storage.codelab.club 没有配置https 两个解决方方案

1. webpack-dev-server 去掉 --https 参数启动
2. 下载 离线的模型文件 放于 scratch-gui 的static文件夹，修改mobilenet.js中url var BASE_PATH = '/static/knn/';

[mickwubs97]

summerscar您好 @summerscar ，谢谢你的建议，我这边实测是可行的，isload现在显示的是true。 我测试了“石头剪刀布”程序的一部分，根据控制台的信息，通过摄像头的样本采集是成功的，但当执行到“when get”时，显示了错误。截图如下：

具体错误如下： WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost lib.min.js:224449 Uncaught (in promise) Error: Unable to create WebGLTexture. at throwIfNull (lib.min.js:224449) at Object.createTexture (lib.min.js:224351) at createAndConfigureTexture (lib.min.js:222682) at Object.createMatrixTexture (lib.min.js:222698) at GPGPUContext../node_modules/scratch-vm/node_modules/@tensorflow/tfjs-core/dist/kernels/webgl/gpgpu_context.js.GPGPUContext.createMatrixTexture (lib.min.js:222129) at TextureManager../node_modules/scratch-vm/node_modules/@tensorflow/tfjs-core/dist/kernels/webgl/texture_manager.js.TextureManager.acquireTexture (lib.min.js:223961) at MathBackendWebGL../node_modules/scratch-vm/node_modules/@tensorflow/tfjs-core/dist/kernels/backend_webgl.js.MathBackendWebGL.uploadToGPU (lib.min.js:221579) at MathBackendWebGL../node_modules/scratch-vm/node_modules/@tensorflow/tfjs-core/dist/kernels/backend_webgl.js.MathBackendWebGL.compileAndRun (lib.min.js:221514) at MathBackendWebGL../node_modules/scratch-vm/node_modules/@tensorflow/tfjs-core/dist/kernels/backend_webgl.js.MathBackendWebGL.divide (lib.min.js:221272) at environment_1.ENV.engine.runKernel.a (lib.min.js:225678)

结果是“when get”作为一个事件并没有在采集“rock”样本完毕（10个样本）后被激活。 并且当我们点击isload时，虽然现在显示的是true，但控制台也会有红字显示错误： 具体错误开头部分是： checkPropTypes.js:20 Warning: Failed prop type: Invalid prop monitors of type OrderedMap supplied to MonitorList, expected instance of OrderedMap. in MonitorList (created by MonitorList) in MonitorList (created by Connect(MonitorList)) in Connect(MonitorList) (created by InjectIntl(Connect(MonitorList))) in InjectIntl(Connect(MonitorList)) (created by ErrorBoundaryWrapper) in ErrorBoundary (created by Connect(ErrorBoundary)) in Connect(ErrorBoundary) (created by ErrorBoundaryWrapper) in ErrorBoundaryWrapper (created by StageComponent) in div (created by Box) in Box (created by StageComponent) in div (created by Box) ……

基于上述结果，如果您和你们团队有一些想法的话我们希望能提出来，这对我们会有很大的帮助。 我们考虑这两者之间是不是有一些联系或者我们导入的静态文件是不是有问题（上述结果是基于summerscar提供的第二种方法解决isload的false问题后得出的新问题）。

希望能得到您的答复，谢谢！

[summerscar]

是否尝试过其他的系统环境 / 浏览器呢 我在mac、win10的环境下未出现过这个问题 从查到的资料来看是和GPU资源调用相关 https://www.khronos.org/webgl/wiki/HandlingContextLost

后面的报错 更新一下插件试试呢 可能是返回值类型的问题

[mickwubs97]

@summerscar ， @wwj718 ，谢谢你们的帮助，我和 @YIN-jw 有关knn的问题已经基本解决了。 总结主要问题可能就是最后的模型的导入可能目前还得使用本地的，之前加载不到可能是网络的问题。然后就是tensorflow/tfjs我们使用的是0.10.0旧版的，新版的可能需要在tensorflow/tfjs后加/dist方能使用，但是否能运行“剪刀石头布”的例子我们还没有尝试。

总之在1.从本地导入模型，2.使用tesnorflow/tfjs@0.10.0的基础上参照https://blog.just4fun.site/post/%E5%B0%91%E5%84%BF%E7%BC%96%E7%A8%8B/create-first-scratch3-extension/ 所给出的教程，是能够通过scratch_knn的index文件成功在Scratch3网页版中添加knn模块并进行“石头剪刀布”实验的。

感谢你们这几天的热心回答，我们终于在过年前能舒服一会了！

[wwj718]

@TyutWzz-beep 不客气的，目前 @summerscar 提交了一个PR，以及merge，不依赖 google 的资源了