Uniapp+基于百度智能云完成AI视觉功能(附前端思路)

本博客使用uniapp+百度智能云图像大模型中的AI视觉API(本文以物体检测为例)完成了一个简单的图像识别页面,调用百度智能云API可以实现快速训练模型并且部署的效果。

uniapp+百度智能云AI视觉页面实现

  • 先上效果图
  • 实现过程
    • 百度智能云Easy DL训练图像模型
    • 公有云服务发布API
    • 调用AI视觉API
      • EasyDL 物体检测 调用模型公有云API Python3实现
      • Uniapp 调用模型公有云API Vue2实现
        • image-tools 图像转换工具
        • 图像识别实现方法
        • 页面结构示例

先上效果图

从相册选择图片后上传后,点击识别,即可进行虫害识别。
虫害名称识别

实现过程

百度智能云Easy DL训练图像模型

首先,你可能需要有一个百度智能云的账号,如果没有的话,指路:百度智能云
这是Easy DL给出的介绍:训练模型的基本流程如下图所示,全程可视化简易操作。在数据已经准备好的情况下,最快15分钟即可获得定制模型。
官方文档:Easy DL 文档中心
百度智能云使用流程
数据处理——模型训练——模型校验——模型部署等步骤跟着官方文档走就好了,进入平台后各种操作指引都做的很好;根据你的具体业务场景训练模型即可。

公有云服务发布API

发布公有云服务,将训练完成的模型部署在百度云服务器,通过API接口调用模型。如果在这里你选择了将模型部署在公有云,则需要自定义服务名称、接口地址后缀等,发布服务。
发布新服务
接口文档(以物体检测为例,其他接口文档在左侧目录也可以找到):物体检测接口文档

调用AI视觉API

EasyDL 物体检测 调用模型公有云API Python3实现

以下代码为Python3调用公有云API的实现过程,注意:目标图片、接口地址、token、api_key、secret_key都需要根据你的情况进行更改,否则代码无法运行!


"""
EasyDL 物体检测 调用模型公有云API Python3实现
"""import json
import base64
import requests
"""
使用 requests 库发送请求
使用 pip(或者 pip3)检查我的 python3 环境是否安装了该库,执行命令pip freeze | grep requests
若返回值为空,则安装该库pip install requests
"""# 目标图片的 本地文件路径,支持jpg/png/bmp格式
IMAGE_FILEPATH = "你的图片.jpg"# 可选的请求参数
# threshold: 默认值为建议阈值,请在 我的模型-模型效果-完整评估结果-详细评估 查看建议阈值
PARAMS = {"threshold": 0.3}# 服务详情 中的 接口地址
MODEL_API_URL = "你的接口地址"# 调用 API 需要 ACCESS_TOKEN。若已有 ACCESS_TOKEN 则于下方填入该字符串
# 否则,留空 ACCESS_TOKEN,于下方填入 该模型部署的 API_KEY 以及 SECRET_KEY,会自动申请并显示新 ACCESS_TOKEN
ACCESS_TOKEN = "你的token"
API_KEY = "你的SK"
SECRET_KEY = "你的AK"print("1. 读取目标图片 '{}'".format(IMAGE_FILEPATH))
with open(IMAGE_FILEPATH, 'rb') as f:base64_data = base64.b64encode(f.read())base64_str = base64_data.decode('UTF8')
print("将 BASE64 编码后图片的字符串填入 PARAMS 的 'image' 字段")
PARAMS["image"] = base64_strif not ACCESS_TOKEN:print("2. ACCESS_TOKEN 为空,调用鉴权接口获取TOKEN")auth_url = "https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials"               "&client_id={}&client_secret={}".format(API_KEY, SECRET_KEY)auth_resp = requests.get(auth_url)auth_resp_json = auth_resp.json()ACCESS_TOKEN = auth_resp_json["access_token"]print("新 ACCESS_TOKEN: {}".format(ACCESS_TOKEN))
else:print("2. 使用已有 ACCESS_TOKEN")print("3. 向模型接口 'MODEL_API_URL' 发送请求")
request_url = "{}?access_token={}".format(MODEL_API_URL, ACCESS_TOKEN)
response = requests.post(url=request_url, json=PARAMS)
response_json = response.json()
response_str = json.dumps(response_json, indent=4, ensure_ascii=False)
print("结果:{}".format(response_str))
print(base64_str)

Uniapp 调用模型公有云API Vue2实现

image-tools 图像转换工具

注意!!!
image-tools是uniapp中一个图像转换工具插件:image-tools
API中传入的目标图片是需要base64编码的,因此无论是拍照还是从相册传入图片后都需要对图像转换base64编码。
但是!!公有云API中需要的base64编码是没有头部的,因此需要用正则表达式将image-tools转换的base64编码头部去掉!
以选择本地相册图片进行识别为例:

//选择本地的图片识别chooseImage() {uni.chooseImage({count: 1,sourceType: ['album'],success: res => {this.imageUrl = res.tempFilePaths[0];this.result = ''pathToBase64(res.tempFilePaths[0]).then(base64 => {// 去掉base64编码头部正则this.base64 = base64.replace(/^data:image\/\w+;base64,/, "")}).catch(error => {console.error(error)}) },});}
图像识别实现方法
identify() {uni.showToast({ title: '识别中..', icon: 'loading' });const MODEL_API_URL = "你的接口地址";const ACCESS_TOKEN = "你的access_token"uni.request({url: `${MODEL_API_URL}?access_token=${ACCESS_TOKEN}`,method: 'POST',data: {image: this.base64,},header: {"Content-Type":'application/json'},success: res => {console.log('识别结果:', res.data);this.result = res.data.results;this.imageUrl = 'data:image/jpeg;base64,'+res.data.data.base64},fail: error => {console.error('识别请求失败', error);}})}
页面结构示例
<template><view><view class="container"><view class="button-container"><button class="button" @click="takePhoto">实时拍照</button><button class="button" @click="chooseImage">从相册选择</button></view><view class="image-container"><canvas class="canvas" canvas-id="myCanvas" v-show="showCanvas"></canvas><image v-if="!showCanvas && imageUrl" :src="imageUrl" mode="aspectFill"></image></view><button class="identify-button" @click="identify">识别</button><view class="result" v-for="res in result"><text>识别结果: {{ res.name }}, 置信度:{{ parseFloat(res.score*100).toFixed(2) }}% </text></view></view></view></view></view> 
</template>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/811160.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Hi3861 OpenHarmony嵌入式应用入门--鸿蒙开发环境搭建

目录 简介 准备材料 安装开发环境 配置开发工具和sdk 新建工程 代码编译 简介 本篇将进行hi3861开发环境的搭建&#xff0c;并能够编译默认工程。 准备材料 华为集成开发环境工具DevEco Device Tool 华为集成开发环境IDE DevEco Device Tool下载 | HarmonyOS设备开发 …

SpringBoot自动配置原理(超级干货,直接面试使用,没有长篇大论)

SpringBoot的自动配置 遵循约定大于配置的原则&#xff0c;在boot程序启动后&#xff0c;起步依赖中的一下bean对象会自动注入到ioc容器 当面试官问你&#xff1a;说一说SpringBoot自动配置原理 你回答&#xff1a; 如此回答不到一分钟就过了&#xff0c;主打简单真实好用&am…

HarmonyOS开发学习:【DevEco Device Tool 安装配置(问题全解)】

本文介绍如何在Windows主机上安装DevEco Device Tool工具。 坑点总结&#xff1a; 国内部分网络环境下&#xff0c;安装npm包可能会很慢或者超时&#xff0c;推荐使用国内npm源&#xff08;如淘宝源、华为源等&#xff09;&#xff1b;serialport这个npm包安装的过程中需要编…

切比雪夫窗函数

Skip to content 产品解决方案学术支持社区活动 获取 MATLAB登录到您的 MathWorks 帐户 Help Center 搜索帮助中心 帮助中心 Off-Canvas Navigation Menu Toggle Documentation Home Signal Processing Signal Processing ToolboxSpectral AnalysisWindows chebwinO…

动态规划解决背包问题

目录 动态规划步骤&#xff1a; 1.01背包问题 2.完全背包问题 动态规划步骤&#xff1a; step1.分析问题&#xff0c;定义dp数组&#xff08;下标含义&#xff09; step2.初始化dp数组&#xff08;边界&#xff09; step3.写dp状态转换方程&#xff08;明确dp数组遍历顺序…

【Web】CTFSHOW-ThinkPHP5-6反序列化刷题记录(全)

目录 web611 web612 web613-622 web623 web624-626 纯记录exp&#xff0c;链子不作赘述 web611 具体分析&#xff1a; ThinkPHP-Vuln/ThinkPHP5/ThinkPHP5.1.X反序列化利用链.md at master Mochazz/ThinkPHP-Vuln GitHub 题目直接给了反序列化入口 exp: <?ph…

【刷题】图论——最小生成树:局域网

要想去除边&#xff0c;并且不改变连通性&#xff0c;而且去除的值最大&#xff0c;相当于保留最小生成树。 注意这题连通块有若干个&#xff0c;所以运行Kruskal相当于形成若干个最小生成树。 如果是prim只能事先处理好各个连通块&#xff0c;然后在连通块内部单独用prim 题目…

【vue】watch 侦听器

watch&#xff1a;可监听值的变化&#xff0c;旧值和新值 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><titl…

HarmonyOS开发实例:【自定义Emitter】

介绍 本示例使用[Emitter]实现事件的订阅和发布&#xff0c;使用[自定义弹窗]设置广告信息。 效果预览 使用说明 进入首页后弹出广告弹窗&#xff0c;点击即可关闭。点击商品列表中的一个商品可以跳转到商品详情页。在商品详情页点击首页可以返回到商品列表页&#xff0c;点…

结构型模式--2.桥接模式【大海贼时代】

1. 组建海贼团 哥尔D罗杰是罗杰海贼团船长。他最终征服了伟大航路&#xff0c;完成了伟大航路的航行&#xff0c;被人们成为海贼王。后来得了绝症&#xff0c;得知自己命不久矣&#xff0c;主动自首并在东海罗格镇被处刑。临死前罗杰的一句话“想要我的宝藏吗&#xff1f;想要…

电商新宠:淘宝拍立淘API接口助力精准搜索商品信息

淘宝拍立淘API接口&#xff0c;作为电商领域的新宠&#xff0c;正以其独特的图像识别技术为精准搜索商品信息提供强大的助力。这项基于深度学习和计算机视觉技术的先进服务&#xff0c;使得用户能够通过上传图片来快速搜索淘宝平台上的相关商品&#xff0c;极大地提升了购物体验…

弹性云服务器性能对比(内附测试数据),快快网络服务器崭露头角

随着计算技术的不断革新&#xff0c;云服务器已成为企业和个人部署应用与服务的首选。尤其线上业务日益盛行的今天&#xff0c;云服务商的实力更是备受瞩目。对于企业而言&#xff0c;高稳定&#xff0c;存储速度都是不可或缺的基本要求&#xff0c;这些都对公有云的云端编解码…

【Linux系统】进程状态

1.直接谈论Linux的进程状态 Linux进程状态本质上是task_struct这个结构体内的一个变量用来存储进程状态。 task_struct { //内部的一个属性 int status; } R运行状态&#xff08;running&#xff09;: 并不意味着进程一定在运行中&#xff0c;它表明进程要么是在运行中要么在运…

【深度学习】深度学习md笔记总结第4篇:TensorFlow介绍,学习目标【附代码文档】

深度学习笔记完整教程&#xff08;附代码资料&#xff09;主要内容讲述&#xff1a;深度学习课程&#xff0c;深度学习介绍要求,目标,学习目标,1.1.1 区别,学习目标,学习目标。TensorFlow介绍&#xff0c;2.4 张量学习目标,2.4.1 张量(Tensor),2.4.2 创建张量的指令,2.4.3 张量…

hbase基础shell用法

HBase中用create命令创建表&#xff0c;具体如下&#xff1a; create student,Sname,Ssex,Sage,Sdept,course 此时&#xff0c;即创建了一个“student”表&#xff0c;属性有&#xff1a;Sname,Ssex,Sage,Sdept,course。因为HBase的表中会有一个系统默认的属性作为行键&#x…

李彦宏放话:百度AI大模型绝不抢开发者饭碗

关注卢松松&#xff0c;会经常给你分享一些我的经验和观点。 昨晚&#xff0c;李彦宏内部讲话称&#xff1a;AI大模型开源意义不大&#xff0c;百度绝不抢开发者饭碗。 但你一定要说话算话哦&#xff0c;可千万别说&#xff1a;“我永远不做手机&#xff0c;谁再敢提做手机就给…

科技云报道:从“奇点”到“大爆炸”,生成式AI开启“十年周期”

科技云报道原创。 世界是复杂的&#xff0c;没有人知道未来会怎样&#xff0c;但如果单纯从技术的角度&#xff0c;我们总是能够沿着技术发展的路径&#xff0c;找到一些主导未来趋势的脉络。 从Sora到Suno&#xff0c;从OpenAI到Copilot、Blackwell&#xff0c;这些热词在大…

[温故] 红黑树算法

前言 最近在突然想起一些基础的东西, 向着温故知新, 有了些新的感悟和大家分享一下. 排序算法是数据结构的一个重要组成部分, 当时学习的时候没有少折腾, 这里来看看大佬们怎么运用这些数据结构来构建庞大的计算机体系的. 二叉树是排序算法的一个衍生, 基于二叉树的构建不同…

C语言--2048小游戏

需要用到EasyX图形库 #include <stdio.h> #include <stdlib.h> #include <time.h> #include<assert.h> #include <conio.h> #include <windows.h> #include<graphics.h> #include<string.h> #define ROW 4 /* 行数 */ #defin…

Rust面试宝典第2题:逆序输出整数

题目 写一个方法&#xff0c;将一个整数逆序打印输出到控制台。注意&#xff1a;当输入的数字含有结尾的0时&#xff0c;输出不应带有前导的0。比如&#xff1a;123的逆序输出为321&#xff0c;8600的逆序输出为68&#xff0c;-609的逆序输出为-906。 解析 这道题本身并没有什么…