当前位置： 首页 > news >正文

ml5.js框架实现AI图片识别

news 2026/2/11 1:11:25

ml5.js

ml5.js 提供了简单的接口来加载和使用机器学习模型，如图像分类、文本生成、姿态估计等，不需要深入理解底层的数学原理或复杂的编程技巧

ml5.js 构建在 TensorFlow.js 之上，提供了一系列预训练模型和简易的 API 接口

图片识别

先进行一个简单的图片识别demo (这里我使用的是汽车图片)

  1. 首先创建一个index.html
  2. 引入必要的库

创建index.html

<!DOCTYPE html>
<html lang="en"><head><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/p5.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/addons/p5.sound.min.js"></script><script src="https://unpkg.com/ml5@1/dist/ml5.min.js"></script><meta charset="utf-8" /></head><style>html,body {margin: 0;padding: 0;}canvas {display: block;}</style><body><main></main><script src="sketch.js"></script></body>
</html>

创建sketch.js

// 图像分类器
let classifier
// 图像
let img
// 结果
let resultfunction setup() {// 创建幕布createCanvas(400, 400)// 图像分类器初始化完成后调用classify函数if (classifier) {classifier.classify(img, (res, error) => {if (error) {console.error(error)return}result = resconsole.log(res)})} else {console.error('图像分类器未初始化完成')}
}function draw() {// 绘制背景background(220)if (img) {image(img, 0, 0, width, height)}// 绘制结果if (result) {fill(255)stroke(0)textSize(18)label = 'Label: ' + result[0].labelconfidence = 'Confidence: ' + nf(result[0].confidence, 0, 2)text(label, 10, 360)text(confidence, 10, 380)}
}
function preload() {// 图像分类器初始化classifier = ml5.imageClassifier('MobileNet', function () {console.log('图像分类器初始化完成')})img = loadImage('https://picsum.photos/id/133/2742/1828')
}
function gotResult(res, error) {if (error) {console.error(error)return}result = resconsole.log(results)
}

ml5官网

相关文章：

ml5.js框架实现AI图片识别

ml5.js ml5.js 提供了简单的接口来加载和使用机器学习模型&#xff0c;如图像分类、文本生成、姿态估计等&#xff0c;不需要深入理解底层的数学原理或复杂的编程技巧 ml5.js 构建在 TensorFlow.js 之上&#xff0c;提供了一系列预训练模型和简易的 API 接口 图片识别 先进行一…...

编程日记 2025/2/13 8:22:16

HDFS应用-后端存储cephfs-文件存储和对象存储数据双向迁移

DistCp&#xff08;分布式拷贝&#xff09;是用于大规模集群内部和集群之间拷贝的工具。 它使用Map/Reduce实现文件分发&#xff0c;错误处理和恢复&#xff0c;以及报告生成。 它把文件和目录的列表作为map任务的输入&#xff0c;每个任务会完成源列表中部分文件的拷贝 配置/…...

编程日记 2025/2/13 8:20:09

关于atomic 是否是线程安全的问题

在 Objective - C 里&#xff0c;atomic 特性并不能保证对象是完全线程安全的&#xff0c;下面从其基本原理、部分线程安全场景以及局限性来详细说明&#xff1a; 先看一个例子 #import <Foundation/Foundation.h>interface MyClass : NSObject property (atomic, assi…...

编程日记 2025/2/13 8:14:02

在实体机和wsl2中安装docker、使用GPU

正常使用docker和gpu&#xff0c;直接命令行安装dcoker和&#xff0c;nvidia-container-toolkit。区别在于&#xff0c;后者在于安装驱动已经cuda加速时存在系统上的差异。 1、安装gpu驱动 在实体机中&#xff0c;安装cuda加速包&#xff0c;我们直接安装 driver 和 cuda 即可…...

编程日记 2025/2/13 8:13:01

HTTP3.0:QUIC协议详解

文章目录 HTTP3.0:QUIC协议详解QUIC是什么QUIC为什么这么快**连接建立快&#xff1a;一见钟情型协议****拥抱UDP&#xff1a;轻装上阵****多路复用&#xff1a;一条路走到黑****更智能的丢包处理****内置加密****网络切换无压力****拥塞控制更智能** QUIC的应用场景QUIC未来会取…...

编程日记 2025/2/13 8:10:59

【EXCEL】【VBA】处理GI Log获得Surf格式的CONTOUR DATA

【EXCEL】【VBA】处理GI Log获得Surf格式的CONTOUR DATA data source1： BH coordination tabledata source2：BH layer tableprocess 1：Collect BH List To Layer Tableprocess 2：match Reduced Level from "Layer"+"BH"data source1： BH coordination…...

编程日记 2025/2/13 8:04:52

【数据处理】使用python收集网络数据--爬虫基础

我们经常需要获取大量的网络数据用于分析&#xff0c;靠人工获取效率太低&#xff0c;所以用代码获取成为大多数人的主要选择&#xff0c;这里简单介绍下使用python进行网络数据爬取的方法 数据获取 由于我们没有各个平台的内部数据和接口&#xff0c;要想获取数据只能从网页…...

编程日记 2025/2/13 8:01:49

代码随想录二叉树篇（含源码）

二叉树与递归 前言226.翻转二叉树算法思路及代码solution 1 用分解问题的思路来解决solution 2 用遍历的思路来解决 101.对称二叉树算法思路及代码solution 104.二叉树的最大深度算法思路及代码solution 1 遍历solution 2 分解问题 111.二叉树的最小深度算法思路及代码solution…...

编程日记 2025/2/13 7:58:46

网络安全检测思路

对于主机的安全检测&#xff0c;我们通常直接采用nmap或者类似软件进行扫描&#xff0c;然后针对主机操作系统及其 开放端口判断主机的安全程度&#xff0c;这当然是一种方法&#xff0c;但这种方法往往失之粗糙&#xff0c;我仔细考虑了一下&#xff0c;觉 得按下面的流程进行…...

编程日记 2025/2/13 7:57:44

ios通过xib创建控件

之前写过ios动态创建控件及添加事件&#xff0c;纯手工代码写控件&#xff0c;虽然比较灵活&#xff0c;但是就是代码量比较多。这次我们通过xib来创建app下载列表项 AppView.xib。一个imageview,一个label,一个button构成 1.创建AppView.xib 2.再创建xib对应的mode&#xff0…...

编程日记 2025/2/13 7:56:43

跟着李沐老师学习深度学习（八）

数值稳定性 模型初始化和激活函数 数值稳定性 神经网络的梯度 考虑如下d层的神经网络&#xff08;t代表层&#xff09; 计算损失 l 关于参数 Wt 的梯度&#xff1a; 这样的矩阵乘法带来的问题&#xff1a; &#xff08;1&#xff09;梯度爆炸 &#xff08;2&#xff09;梯度…...

编程日记 2025/2/13 7:54:40

元宵小花灯

吃完饭散步回来的路上&#xff0c;看到一个小朋友拿着元宵小灯&#xff0c;后面的家长也闲适的哼着歌。 想起前阵子看到说&#xff0c;大人爱看小孩玩&#xff0c;也是共享那份天真快乐吧。 我小时候每年的元宵节&#xff0c;也有自己的小灯&#xff0c;那是九几年&#xff0c…...

编程日记 2025/2/13 7:52:36

算法——搜索算法：原理、类型与实战应用

搜索算法&#xff1a;开启高效信息检索的钥匙 在信息爆炸的时代&#xff0c;搜索算法无疑是计算机科学领域中熠熠生辉的存在&#xff0c;它就像一把神奇的钥匙&#xff0c;为我们打开了高效信息检索的大门。无论是在日常生活中&#xff0c;还是在专业的工作场景里&#xff0c;…...

编程日记 2025/2/13 7:50:35

告别传统测量：三维扫描仪测量工件尺寸

在现代制造业中&#xff0c;精确测量工件尺寸是确保产品质量和生产效率的关键环节。然而&#xff0c;传统测量方法往往存在效率低下、精度不足以及操作复杂等问题&#xff0c;难以满足高精度和复杂形状工件的测量需求。 传统工件尺寸测量主要依赖于卡尺、千分尺、三坐标测量仪…...

编程日记 2025/2/13 7:49:34

win32汇编环境,对话框程序使用跟踪条(滑块)控件示例一

;运行效果 ;win32汇编环境,对话框程序使用跟踪条控件示例一 ;生成2条横的跟踪条，分别设置不同的数值范围，设置不同的进度副度的例子 ;直接抄进RadAsm可编译运行。重要部分加备注。 ;下面为asm文件 ;>>>>>>>>>>>>>>>>>>…...

编程日记 2025/2/13 7:46:31

WordPress 角标插件：20 种渐变色彩搭配，打造专属菜单标识

源码介绍 WordPress 角标插件使用教程 本插件旨在为 WordPress 菜单添加角标&#xff0c;并且支持 20 种不同的角标样式。 使用步骤 您可以在 WordPress 后台的“插件”页面中&#xff0c;找到“WordPress 角标插件”&#xff0c;然后点击激活按钮。您需要进入主题的菜单设置…...

编程日记 2025/2/13 7:45:30

【鸿蒙开发】第二十九章 Stage模型-应用上下文Context、进程、线程

目录 1 Stage模型基本概念 1.1 开发流程 3 应用上下文Context的典型使用场景 3.1 获取应用文件路径 3.2 获取和修改加密分区 3.3 获取本应用中其他Module的Context 3.4 订阅进程内UIAbility生命周期变化 4 进程 4.1 概述 5 线程 5.1 线程类型 5.2 使用EventHub进行线…...

编程日记 2025/2/13 7:44:29

window 安装GitLab服务器笔记

目录 视频&#xff1a; 资源&#xff1a; Linux CeneOS7&#xff1a; VMware&#xff1a; Linux无法安装 yum install vim -y 1.手动创建目录 2.下载repo PS 补充视频不可复制的代码 安装GitLab *修改root用户密码相关&#xff08;我卡在第一步就直接放弃了这个操作&…...

编程日记 2025/2/13 7:43:27

3dgs 2025 学习笔记

CVPR 2024 3D方向总汇包含&#xff08;3DGS、三维重建、深度补全、深度估计、全景定位、表面重建和特征匹配等&#xff09;_cvpr2024-structure-awaresparse-viewx-ray3dreconstr-CSDN博客 https://github.com/apple/ml-hugs 3DGS COLMAP-Free 3D Gaussian Splatting ⭐code &…...

编程日记 2025/2/13 7:40:25

2024.1.2版本Android Studio gradle下载超时问题处理

一、问题背景 在项目的根build.gradle里面配置了以下地址后,依旧下载gradle包失败&#xff0c;平常如果出现第三方库或者gradle下载失败,配置以下地址,一般可以下载成功 maven { url https://maven.aliyun.com/repository/public } maven { url https://maven.aliyun.com/nex…...

编程日记 2025/2/13 7:39:24

uniapp 对接腾讯云IM群组成员管理（增删改查）

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

编程新知 2026/1/13 9:59:27

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

编程新知 2026/1/31 6:18:08

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

编程新知 2026/1/23 12:37:51

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

编程新知 2025/10/8 4:56:09

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2026/1/24 10:00:31

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

编程新知 2025/8/19 2:57:37

c++ 面试题(1)-----深度优先搜索（DFS）实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

编程新知 2026/1/10 10:16:16

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

编程新知 2026/2/1 21:58:45

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

编程新知 2025/10/24 9:13:44

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

编程新知 2026/2/1 5:42:50