• uniapp引入Tensorflow.js所会发生的一些问题( 主要发布平台 微信小程序 )


    问题环境

    python 环境

    版本
    tensorflow2.6.0
    tensorflow-js3.18.0

    uniapp(vue)

    完整引入包

    {
      "dependencies": {
    	"@tensorflow/tfjs-core": "3.5.0",
    	"@tensorflow/tfjs-converter":"3.5.0",
    	"@tensorflow/tfjs-backend-webgl":"3.5.0",
    	"@tensorflow/tfjs-backend-cpu":"3.5.0",
    	"fetch-wechat": "0.0.3"
      }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    问题一:Uniapp环境下如何引入Tensorflow.js包

    在package.json下配置

    {
      "dependencies": {
    	"@tensorflow/tfjs-core": "3.5.0",
    	"@tensorflow/tfjs-converter":"3.5.0",
      }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    PS: 许多文章都说只需要引入tensorflow.js 子包,但是子包所蕴涵的功能并不全面。如果你只是一个新手,最好是直接加载@tensorflow/tfjs。后续慢慢了解自己需要用到那几个模块再进行删减.

    具体各个包的功能如下

    功能说明
    tfjs-core基础包(数据基本结构)
    tfjs-converter模型导入
    tfjs-layers自己构建模型
    tfjs-data数据流
    tfjs-backend-webgl作为前端使用时需要导入
    tfjs-backend-cpu作为前端使用时需要导入

    后续在目标项目的路径下打开命令行, 输入指令

     npm install
    
    • 1

    当然,你有更好的方法也可以指明或留言

    问题:当在微信小程序环境出现错误“No backend found in registry”

    单纯只是在web环境运行你的配置只需要

    {
    	"@tensorflow/tfjs-backend-webgl":"3.5.0"
    }
    
    
    • 1
    • 2
    • 3
    • 4

    如果你的代码需要在微信小程序上运行则需要同时引入两个包

    {
    	"@tensorflow/tfjs-backend-webgl":"3.5.0",
    	"@tensorflow/tfjs-backend-cpu":"3.5.0",
    }
    
    
    • 1
    • 2
    • 3
    • 4
    • 5

    同时你所引入的这个包,需要在你对应的页面或者公共地方引入

    	require('@tensorflow/tfjs-backend-webgl');
    	require('@tensorflow/tfjs-backend-cpu')
    
    • 1
    • 2

    问题: uniapp内没问题,微信小程序 错误:Cannot read property ‘fetch’ of undefined

    如果你已经和引入fetchWetch , 并且在对应的页面已经引入。那么你估计是没有调用插件代码。
    你需要在公共文件的onLaunch 内写下这段代码

    
    				var fetchWechat = require('fetch-wechat');
    				var tf = require('@tensorflow/tfjs-core');
    				var webgl = require('@tensorflow/tfjs-backend-webgl');
    				var plugin = requirePlugin('tfjsPlugin');
    				
    				
    				plugin.configPlugin({
    					// polyfill fetch function
    					fetchFunc: fetchWechat.fetchFunc(),
    					// inject tfjs runtime
    					tf,
    					// inject webgl backend
    					webgl,
    					// provide webgl canvas
    					canvas: wx.createOffscreenCanvas()
    				});
    				
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    但是这时候一般都会有问题,由于requirePlugin ,似乎是只有在微信小程序才会永远的功能。如果我们在现在调用会直接报错。
    面对这种情况,我们只有两种方法

    1. 直接盲写代码,放弃在uniapp内调试。(如果采用这种,我觉得其实可以尝试一下直接在微信小程序开发工具直接开发。说不好能节省不少的时间)
    2. 对上面的方法进行加工,仅在微信小程序环境下进行调用
    			// 获取平台基本信息
    			let systemInfo = uni.getSystemInfoSync()
    			// 获取当前的平台
    			let uniPlatform = systemInfo.uniPlatform
    			if (uniPlatform == "mp-weixin") {
    				
    				var fetchWechat = require('fetch-wechat');
    				var tf = require('@tensorflow/tfjs-core');
    				var webgl = require('@tensorflow/tfjs-backend-webgl');
    				var plugin = requirePlugin('tfjsPlugin');
    				
    				
    				plugin.configPlugin({
    					// polyfill fetch function
    					fetchFunc: fetchWechat.fetchFunc(),
    					// inject tfjs runtime
    					tf,
    					// inject webgl backend
    					webgl,
    					// provide webgl canvas
    					canvas: wx.createOffscreenCanvas()
    				});
    			}
    		},
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
  • 相关阅读:
    vue父组件调用子组件的方法 或传递值给子组件
    IDEA 设置提示信息
    鸿蒙App开发新思路:小程序转App
    CDR插件开发之Addon插件008 - 在VS中下载安装Addons插件模板
    贴片电阻材质:了解电子元件的核心构成 | 百能云芯
    超市商品管理系统 毕业设计 JAVA+Vue+SpringBoot+MySQL
    力扣-字符串-字符的统计
    Vector的扩容机制原理及源码分析
    浅谈HTTP缓存与CDN缓存的那点事
    微源股份冲刺上市:上半年利润下滑六成,戴兴科夫妇为实控人
  • 原文地址:https://blog.csdn.net/ArroGance_X/article/details/128117218