Giter Club home page Giter Club logo

wx-tfjs-demo's Introduction

wx-tfjs-demo

Hits

微信小程序运行 TensorFlow 的 Demo,代码与小程序「AI Pocket」不定期同步更新。

如何运行

运行环境要求

推荐系统:MacOS

NodeJS:v18.x.x

微信基础库版本:>= 2.29.0

微信开发者工具:>= v1.06.2210310

微信开发者工具的项目配置:

  • 勾选「ES6 转 ES5」
  • 勾选「增强编译」
  • 测试时请勾选「不校验合法域名……」

使用方式

  1. 克隆代码到本地
  2. 修改 project.config.json 中的 appid 配置
  3. 在小程序管理后台的“设置-第三方服务-插件管理”中,通过 appid [wx6afed118d9e81df9] 查找并添加
  4. npm i 安装依赖(有时可能需要使用 npm i --force
  5. npm run build 编译依赖
  6. 手机扫描开发者工具的预览码

TLDR

早期实现方式

改造 tfjs-core,使 TensorFlow.js 可以运行在小程序中。小程序调用摄像头成像,将图片显示在 canvas 上,通过小程序的 API 可以获取到 canvas 的「类 ImageData」数据,再调用 tfjs 的 API 实现预测。

对实现的坎坷经历感兴趣的,可以看看博文 tfjs 移植到微信小程序TensorFlowJS 移植再次尝试

目前实现方式

由于 tfjs 已经优雅地实现对多平台的支持,具体表现为可以扩展 platform 实现「移植」,而且微信小程序也开放了更多有利的 API,目前不再采用侵入式地魔改 tfjs 的方式,而是借助 tfjs 的微信插件来提供模型的加载、训练、预测等功能。

尽管相比以前方便多了,但是由于小程序的 onCameraFrame 获取到的帧数据与所展示的不一致,而且是在不同的设备上(甚至相同设备的前后摄像头)对原始帧数据的处理方式都不一样,要想得到准确的预测结果,真叫人头大。

目前,我已经摸索出一套帧数据裁切方式,而且简单测试了下,效果不错。如果有照顾不到的机型,欢迎提 Issues & PR。

小程序 Demo

小程序改名「AI Pocket」了,感觉还是挺有意义的,所以我打算认真做好这个小程序了。附上小程序二维码,欢迎大家体验 & 提出改进意见!

AIPocket

合作与交流

合作

本人在前后端开发、Docker & Swarm、持续部署、人工智能 NLP 领域都有所积累,能够快速提供成套的解决方案,如果有机会,欢迎通过各种联系方式咨询合作事宜。

另外,本项目代码开源,欢迎各位感兴趣的同学一起添砖加瓦。当然,也不限制商用,但是请尊重他人的劳动成果,不要做一些「不厚道」的事。如果本项目对你有帮助,欢迎随意打赏。

打赏

交流

可以关注下我的 个人博客,或者个人微信公众号「猎人杂货铺」,会经常有一些技术分享 & 生活感悟,欢迎多多交流!

关注公众号,留言获取「AI Pocket 交流群」的二维码,方便交流!~

猎人杂货铺 • 微信公众号

wx-tfjs-demo's People

Contributors

hunterxuan avatar yuangezhizao avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

wx-tfjs-demo's Issues

图像追踪速度

小程序里面的图像追踪运行起来比较卡,对比在blog里面放的录屏效果到挺好的,这是为什么?

wechat-webgl初始化失败

能运行程序,但是用不了WebGL加速

VM1623:1 Initialization of backend wechat-webgl failed
console.warn @ VM1623:1
t.initializeBackend @ index.js:17
(anonymous) @ index.js:17
(anonymous) @ index.js:17
(anonymous) @ index.js:17
(anonymous) @ index.js:17
r @ index.js:17
t.setBackend @ index.js:17
t.setBackend @ index.js:17
t @ VM1680 appservice.js:1089
exports.setupWechatPlatform @ VM1680 appservice.js:1089
exports.configPlugin @ VM1680 appservice.js:1074
onLaunch @ app.js? [sm]:8
(anonymous) @ WAService.js:1
(anonymous) @ WAService.js:1
pe @ WAService.js:1
(anonymous) @ WAService.js:1
(anonymous) @ WAService.js:1
(anonymous) @ app.js? [sm]:6
require @ WAService.js:1
(anonymous) @ VM1845:1
scriptLoaded @ appservice?t=1566032884110:7176
script.onload @ appservice?t=1566032884110:7219
load (async)
loadBabelModule @ appservice?t=1566032884110:7213
window.loadBabelMod @ appservice?t=1566032884110:7227
(anonymous) @ slicedToArray.js:12
VM1623:1 Error: Cannot get WebGL rendering context, WebGL is disabled

posenet迁移到uniapp上时候报错,求解

mp.runtime.esm.js?66fd:5840 TypeError: Cannot read property 'fetch' of undefined
at new HTTPRequest (http.ts?bd5e:64)
at http (http.ts?bd5e:387)
at Object.browserHTTPRequest (http.ts?bd5e:397)
at GraphModel.findIOHandler (graph_model.ts?a927:111)
at GraphModel._callee$ (graph_model.ts?a927:126)
at tryCatch (regeneratorRuntime.js?7ec2:44)
at Generator. (regeneratorRuntime.js?7ec2:125)
at Generator.next (regeneratorRuntime.js?7ec2:69)
at asyncGeneratorStep (asyncToGenerator.js?c973:3)
at _next (asyncToGenerator.js?c973:22)(env: macOS,mp,1.06.2304191; lib: 2.32.1)

请问怎么加载已经训练好的模型

已经通过 nodejs 训练好了模型,得到两个文件, 一个是模型 json 格式, 另一个是 bin 的权值文件 , 两个一起文件都不到 100k , 在小程序中怎么使用这连个文件加载模型 ?

Facemesh, IOS 体验版成功,但是安卓不可以

你好,,十分感谢作者贡献这样的学习案例。我这里遇到了一些问题,Facemesh 口红案例在IOS体验版成功,但是安卓体验版失败(而安卓打开体验版成功)。请问作者有遇到过这个问题吗?有相关解决思路吗? 感谢你的任何帮助。

安卓真机调试错误:

middle_img_v2_3283089e-4133-43d2-8021-0ae13179d07g

模型网络加载是正确的

middle_img_v2_2ec6d7a4-de5d-47f7-9649-d58262fd818g

middle_img_v2_5c9df607-5774-42c6-ac9f-7a42a6fa351g

Error: module "@tensorflow/tfjs-backend-webgl.js" is not defined

发生了这个错误。在win10上,以及安装npm,并且已经执行npm install 等操作。请问会是什么问题,谢谢!

另外,小程序能够加载云服务器中的模型。我是中学教师,想做一个平台训练数据,小程序获取训练得到的模型,在手机上做一些检测任务,供教学使用,请问能否实现?谢谢

代码缺失

嗨~ 我clone了你的代码想测试一下body-pix,但是发现里面引用utils的【getFrameSliceOptions】代码都丢了,是不是没有上传哇

module "fetch-wechat.js" is not defined

您好,首先感谢您之前所做的工作,我是一名本科计算机(人工智能专业)在读生,我在本科期间长期进行ai的学习,但是对于微信小程序端的实现还是很少见到的,看到您的工作,我觉得非常兴奋,所以打算可以为您之前的项目再继续做点什么。但是目前当我运行您的源代码时出现:

module "fetch-wechat.js" is not defined
Error: module "fetch-wechat.js" is not defined

由于我本科阶段并没有真正接触过微信小程序的制作(做过一个百度EasyDL的小微信小程序),希望您能帮助我解决这个问题,不吝感谢您!希望在您方便的时候帮我解决这个问题或者联系我:[email protected]

请问如何快速开始你的项目?

先谢谢作者的开源!

你好,我是在读学生,出于兴趣,希望将平时学习的sota视觉模型部署到移动端,而小程序就是不错的选择,但是由于没有前端和小程序开发经验,又不希望花费太多时间学习,在此请教您:就小程序开发文档或其他技术而言,我最少学习哪部分技术就能快速开始你的项目?

引入新的模型

请问,我是用yolov5训练了模型,并且导出了tfjs格式,我是否可以嵌入到该小程序中?

Some problem

你好作者,在试用这个demo之后,想请教一些问题, 初识AI这个功能,使用了knn分类器,是否能够保存这个分类器,下次打开之后直接就可以识别了呢? 非常感谢。。。

models 报 temp.slice slice is not a function 错误

Hi,在使用demo时 , 发现 在 https://github.com/HunterXuan/wx-tfjs-demo/blob/master/miniprogram/models/coco-ssd/classifier.js 文件里有下面的代码,但是temp 这个对象上并没有slice这个方法,导致无法成功执行。但是我看你的小程序上是很正常的,这个是什么原因呢?感谢回复。

const tensor = tf.tidy(() => {
        const temp = tf.browser.fromPixels({
          data: new Uint8Array(frame.data),
          width: frame.width,
          height: frame.height,
        }, 4)

        const sliceOptions = getFrameSliceOptions(this.cameraPosition, frame.width, frame.height, this.displaySize.width, this.displaySize.height)

        return temp.slice(sliceOptions.start, sliceOptions.size).resizeBilinear([this.displaySize.height, this.displaySize.width]).asType('int32')
      })

image
image

the speed of model prediction

If we run on iOS,the speed of model prediction is very slow on the wechat mini-programs. Prediction speed of Mi 8 is five times faster than iphone xs Max.

项目启动报错

Cannot read property 'createOffscreenCanvas' of undefined; at wx.createOffscreenCanvas
TypeError: Cannot read property 'createOffscreenCanvas' of undefined

Cannot assign to read only property 'btoa' of object '[object Window]';at "pages/posenet/index" page lifeCycleMethod onLoad function
TypeError: Cannot assign to read only property 'btoa' of object '[object Window]'

照相界面

你那个照相界面是系统的?怎么看起来像自己搞的

训练好的模型导入到小程序用coco-ssd加载报错

请问怎么调整训练后转化的模型 与 小程序coco-ssd加载的兼容啊。

我训练了一个模型ssd_mobilenet_v1_fpn_model模型,转化成json后在小程序用coco-ssd加载它,detect报错如下
Tensor must have a shape comprised of positive integers but got shape [100,].

这可能是格式问题,但是不知道怎么调整它,大佬知道吗

Could not initialize any backends

Follow the steps but got error when I run in my phone.

Could not initialize any backends, all backends initializations failed.

Any comments? Thx.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.