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

基于Tensorflow.js的花卉识别编程实践

news 来源：原创 2024/9/8 5:06:31

使用TensorFlow.js进行编程有许多优点，特别适合开发机器学习和深度学习的应用。TensorFlow.js可以直接在浏览器中运行，无需服务器或特殊环境配置。这使得开发者可以轻松地创建和部署基于Web的机器学习应用。TensorFlow.js提供了许多预训练模型，开发者可以直接使用这些模型进行各种任务，如图像分类、物体检测、自然语言处理等，减少了从头开始训练模型的时间和资源。
使用Tensorflow.js，所有的计算都在本地进行，数据不会被发送到服务器，有助于保护用户的隐私。由于数据不离开用户的设备，减少了数据泄露的风险。
下面以基于TensorFlow.js的花卉识别为例，讲述编程涉及的关键问题。
主要功能是：
（1）用户选择图片。
（2）选择花朵的2种方式：

双击鼠标：已鼠标位置为中心，固定大小的矩形框确定花朵区域。
拖动鼠标框选花朵区域。

（3）裁剪图片，获取花朵图片，识别花朵类别，显示识别结果。

深度学习的训练模型需要保存为SavedModel的模型，再转换为Tensorflow.js格式模型（1个json文件+几个bin文件）。
下面对关键的代码进行说明。

index.html中需要加载Tensorflow.js库

<!-- Import TensorFlow.js library -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>

花卉识别的主要功能均在ai_flower.js实现，下面介绍其中的关键函数。

加载模型和标签

loadModel()：异步加载TensorFlow模型。加载成功后更新页面提示。

async function loadModel() {try {// 加载Savedmodel转换模型model = await tf.loadGraphModel(modelUrl);document.getElementById('result').innerText = "Model loaded successfully.";// console.log("Model input:", model.input)// console.log(model.summary())} catch (error) {console.error("Error loading model:", error);document.getElementById('predict').disabled = true;document.getElementById('result').innerText = "Error loading model.";}
}

loadLabelMap(label_map_path, label_encn_path)：异步加载类别标签和英文-中文对照表。

async function loadLabelMap(label_map_path, label_encn_path){try {// 获取标签类别名称const responseMap = await fetch(label_map_path);labelMap = await responseMap.json();const responseEncn = await fetch(label_encn_path);leabelEnCn = await responseEncn.json();} catch (error) {console.error("加载类别标签失败:", error);document.getElementById('result').innerText = "加载类别标签失败。";}
}

处理图片上传

handleImageUpload(event)：处理图片选择事件，清空上次识别结果，加载新的图片并显示在页面上。同时创建临时图像对象获取原始图像尺寸，并更新覆盖画布的尺寸和位置。

function handleImageUpload(event) {// 清空上次识别结果document.getElementById('result').innerText = "";document.getElementById('promptText').innerText = "";// 清除之前的裁剪图片const croppedImgElement = document.getElementById('croppedImage');croppedImgElement.src = '';croppedImgElement.style.display = 'none';// 清除虚线框overlay.style.display = 'none';// 禁用预测按钮document.getElementById('predict').disabled = true; // 未确定矩形框isSelectRect = false;// 获取 imgElementconst imgElement = document.getElementById('image');imgElement.style.display = 'none';// 清除之前的虚线框const overlayCanvas = document.getElementById('overlayCanvas');overlayCanvas.style.display = 'none';// 加载图片const file = event.target.files[0];const reader = new FileReader();reader.onload = function(e) {const imgElement = document.getElementById('image');imgElement.src = e.target.result;imgElement.style.display = 'block';// 创建一个临时的 Image 对象来获取原始尺寸const tempImg = new Image();tempImg.onload = function() {// 保存原始图像数据和尺寸const canvas = document.createElement('canvas');canvas.width = tempImg.naturalWidth;canvas.height = tempImg.naturalHeight;const ctx = canvas.getContext('2d');ctx.drawImage(tempImg, 0, 0);imgElement.dataset.originalImage = canvas.toDataURL();imgElement.dataset.naturalWidth = tempImg.naturalWidth;imgElement.dataset.naturalHeight = tempImg.naturalHeight;// 更新 overlayCanvas 尺寸和位置const overlayCanvas = document.getElementById('overlayCanvas');overlayCanvas.width = tempImg.naturalWidth;overlayCanvas.height = tempImg.naturalHeight;overlayCanvas.style.display = 'block';// 确保 canvas 与 imgElement 对齐const imgRect = imgElement.getBoundingClientRect();overlayCanvas.style.position = 'absolute';overlayCanvas.style.left = `${imgRect.left}px`;overlayCanvas.style.top = `${imgRect.top}px`;// 添加提示文本document.getElementById('promptText').innerText = '请拖动鼠标，框选花朵。';};tempImg.src = e.target.result;};reader.readAsDataURL(file);
}

裁剪并显示图像

cropImage(cropStartX, cropStartY, cropEndX, cropEndY)：根据用户拖动的矩形框或双击鼠标确定的矩形框，裁剪图像，并显示裁剪后的图像（方便调试）。裁剪区域相对于原始图像进行计算，以确保裁剪的准确性。

function cropImage(cropStartX, cropStartY, cropEndX, cropEndY) {const imgElement = document.getElementById('image');const originalImageData = imgElement.dataset.originalImage;const naturalWidth = parseInt(imgElement.dataset.naturalWidth, 10);const naturalHeight = parseInt(imgElement.dataset.naturalHeight, 10);// Get the image's bounding rectangleconst imgRect = imgElement.getBoundingClientRect();// Calculate the scaling factorsconst scaleX = naturalWidth / imgElement.width;const scaleY = naturalHeight / imgElement.height;// Convert displayed coordinates to original image coordinatesconst sx = cropStartX * scaleX;const sy = cropStartY * scaleY;const ex = cropEndX * scaleX;const ey = cropEndY * scaleY;const width = ex - sx;const height = ey - sy;// Ensure the crop area is within image boundsconst adjustedStartX = Math.max(0, Math.min(sx, naturalWidth - width));const adjustedStartY = Math.max(0, Math.min(sy, naturalHeight - height));const canvas = document.createElement('canvas');const ctx = canvas.getContext('2d');// Set canvas dimensionscanvas.width = cropEndX - cropStartX;canvas.height = cropEndY - cropStartY;// Create a temporary image object to load the original image dataconst tempImg = new Image();tempImg.onload = function() {// Draw the cropped area on the canvasctx.drawImage(tempImg, adjustedStartX, adjustedStartY, width, height, 0, 0, canvas.width, canvas.height);const croppedImgElement = document.getElementById('croppedImage');croppedImgElement.src = canvas.toDataURL();croppedImgElement.style.display = 'block';};tempImg.src = originalImageData;document.getElementById('predict').disabled = false; // 启用预测按钮document.getElementById('promptText').innerText = ''}

预测图像

predictImage()：使用加载的模型对裁剪后的图像进行预测。获取图像元素并将其转换为TensorFlow张量。调整图像大小，归一化并添加批量维度后进行预测。解析预测结果并显示前k个预测结果。

async function predictImage() {if (!model) {document.getElementById('result').innerText = "模型尚未加载。";return;}if (!isSelectRect) {document.getElementById('result').innerText = "请拖动鼠标，框选花朵。";return;}// 获取图像元素const imgElement = document.getElementById('croppedImage');// 从图像元素创建张量const tensorImg = tf.browser.fromPixels(imgElement).toFloat();// 调整为模型需要的输入大小const resizedImg = tf.image.resizeBilinear(tensorImg, [224, 224]); // 归一化图像const normalizedImg = resizedImg.div(255.0);// 添加批量维度const batchedImg = normalizedImg.expandDims(0);// 进行预测let predictions;try {predictions = await model.execute(batchedImg);} catch (error) {console.error("模型预测失败:", error);document.getElementById('result').innerText = "模型预测失败。";return;}// 检查 predictions 是否有效if (!predictions || Array.isArray(predictions) && predictions.length === 0) {console.error("模型预测返回了无效的输出。");document.getElementById('result').innerText = "模型预测返回了无效的输出。";return;}// 获取第一个 Tensor 作为输出// 实际不是数组const outputTensor = Array.isArray(predictions) ? predictions[0] : predictions;if (!outputTensor) {console.error("输出 Tensor 未定义");document.getElementById('result').innerText = "输出 Tensor 未定义。";return;}// 将 Tensor 转换为数组let probabilities;try {probabilities = await outputTensor.data(); // 使用 .data() 而不是 .array()// console.log("probabilities:")// console.log(probabilities)} catch (error) {console.error("Tensor 转换为数组失败:", error);document.getElementById('result').innerText = "Tensor 转换为数组失败。";return;}// 获取 top-k 预测const topKIndices = Array.from(probabilities).map((prob, index) => ({prob, index})).sort((a, b) => b.prob - a.prob).slice(0, topK).map(item => item.index);const topKProbabilities = topKIndices.map(index => probabilities[index]);// console.log(topKIndices)// console.log(topKProbabilities)// 显示 top-k 预测结果, label编号从1开始（index+1），不是从0开始let resultText = "";topKIndices.forEach((index, i) => {const className = labelMap[index + 1] || "Unknown"; // 从字典中获取类别名称const cnName = leabelEnCn[className];const probability = topKProbabilities[i];resultText += `${className}-${cnName}: ${probability.toFixed(4)}\n`; // 保留四位小数});document.getElementById('result').innerText = resultText;
}

下载完整源代码

加载模型和标签

处理图片上传

裁剪并显示图像

预测图像

相关文章：