基于计算机视觉的工地钢筋计数

手动钢筋计数是一项耗时的任务，而且容易出错和不一致。但是，你可以使用计算机视觉自动进行钢筋计数。你可以使用经过微调的计算机视觉模型来计算单个钢筋，这对于构建库存管理和质量验证系统非常有用

在这篇博文中，我们将学习如何使用计算机视觉自动进行钢筋计数。我们将构建的钢筋计数系统使用摄像头捕捉钢筋排列的图像，并应用使用 Roboflow 构建和托管的计算机视觉模型来分析和解释视觉数据。

Roboflow Universe 上已经有一个可用于钢筋计数的公共模型，因此我们不必训练模型。相反，我们可以使用现有的模型。

NSDT工具推荐： Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器 - REVIT导出3D模型插件 - 3D模型语义搜索引擎 - Three.js虚拟轴心开发包 - 3D模型在线减面 - STL模型在线切割

1、钢筋计数 API

在我们的最终应用程序中，用户将实时获取钢筋图像，这些图像存储在服务器上。之后，我们可以调用钢筋计数模式来检测和计算每幅图像中的钢筋总数。下图显示了我们的应用程序的结构。

对于这个项目，我们将使用 Roboflow Universe 提供的钢筋计数 API 和 Roboflow 托管 API，用于基于 PHP 部署钢筋计数应用程序。

Roboflow Universe 的钢筋计数项目是在钢筋数据集上进行训练的。该项目的训练模型可通过托管推理 API 和其他部署方法获得预测。

训练后的模型能够使用图像中的边界框准确检测钢筋，并可进一步利用这些钢筋来构建我们的应用程序。

2、构建应用程序

要构建应用程序，我们将在 PHP 应用程序中使用 Roboflow 托管 API。首先，我们需要获取所需的信息，例如模型 ID 和 API 密钥，这可以通过访问项目页面上的 API 文档链接来完成。

以下是测试模型的简单 PHP 代码。我们将使用下图来测试应用程序。

以下是我们可以用来测试模型的代码：

<?php// Base 64 Encode Image
$data = base64_encode(file_get_contents("rebar.jpg"));$api_key = "API_Key"; // Set API Key
$model_endpoint = "rebar-dataset-qchab/2"; // Set model endpoint (Found in Dataset URL)// URL for Http Request
$url = "https://detect.roboflow.com/" . $model_endpoint
. "?api_key=" . $api_key
. "&name=rebar.jpg";// Setup + Send Http request
$options = array('http' => array ('header' => "Content-type: application/x-www-form-urlencoded\r\n",'method'  => 'POST','content' => $data));$context  = stream_context_create($options);
$result = file_get_contents($url, false, $context);
echo $result;
?>

运行上述代码将生成以下输出：

{"time":0.05434697300006519,"image":{"width":640,"height":640},"predictions":[{"x":137.5,"y":284.0,"width":21.0,"height":28.0,"confidence":0.8618741035461426,"class":"0","class_id":0,"detection_id":"c146c502-0a99-41c8-b9c1-b62df14dc875"},{"x":248.0,"y":517.0,"width":22.0,"height":30.0,"confidence":0.8511471748352051,"class":"0","class_id":0,"detection_id":"838f948f-93a2-4551-a85e-db9942ad6b80"},{"x":182.5,"y":428.0,"width":21.0,"height":30.0,"confidence":0.8510258197784424,"class":"0","class_id":0,"detection_id":"c4dc9cf0-aec2-4f80-b9c7-ae4cb8fcb93d"},{"x":221.5,"y":498.5,"width":21.0,"height":29.0,"confidence":0.8491973876953125,"class":"0","class_id":0,"detection_id":"eb2fff69-dbf7-496b-b33d-8753bea8a4ae"},...

结果以 JSON 格式返回，此信息将在我们的 PHP 代码中用于在检测到的钢筋实例上绘制边界框并计算钢筋总数。

3、构建用户界面

我们现在将构建以下界面，该界面将允许用户浏览和上传捕获的图像，然后运行预测以检测和计算图像中的钢筋。

选择图像并单击“运行预测”按钮后，将显示结果输出。如下图所示，应用程序在每个检测到的对象上绘制一个边界框，并显示检测到的总对象数：

现在让我们了解构建应用程序的代码。代码分为以下几个部分：

表单提交检查
图像处理
HTML 输出
显示结果

表单提交检查：首先，我们指定一个条件语句来检查表单是否已通过 POST 方法提交以及是否已上传图像文件：

if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_FILES["image"])) {// Image processing code} else {// Default response if no image is uploaded
}

此条件确保仅当表单提交了图像文件时才会执行后续代码。

图像处理：在 if 块中，代码处理上传的图像。以下是处理图像的代码。

$image_data = file_get_contents($_FILES["image"]["tmp_name"]);$base64_image = base64_encode($image_data);$api_key = "API_KEY"; // Set API Key$model_endpoint = "rebar-dataset-qchab/2"; // Set model endpoint (Found in Dataset URL)// URL for Http Request$url = "https://detect.roboflow.com/" . $model_endpoint . "?api_key=" . $api_key;// Setup + Send Http request$options = array('http' => array('header' => "Content-type: application/x-www-form-urlencoded\r\n",'method' => 'POST','content' => $base64_image));$context = stream_context_create($options);$result = file_get_contents($url, false, $context);// Decode JSON response$response = json_decode($result, true);

首先，我们的代码读取上传的图像文件的内容并将其转换为 base64 编码的字符串。随后，代码设置访问机器学习模型端点的基本参数，包括 API 密钥和来自 Roboflow 的模型端点 URL。

我们的代码构建一个包含必要标头和内容的 HTTP 请求，封装 base64 编码的图像数据。然后使用 POST 方法将此请求分派到指定的模型端点。在收到来自模型端点的响应（通常包含有关图像中检测到的对象的信息）后，JSON 响应将解码为关联数组，以便在应用程序中进一步处理。

HTML 输出：HTML 标记用于显示用于上传图像的表单并在 HTML 画布中显示处理后的图像。

    <h2>Rebar Counting Application</h2><form action="" method="post" enctype="multipart/form-data"><input type="file" name="image" accept="image/*"><button type="submit">Run Prediction</button><br/><br/></form><div id="canvas-container"><canvas id="canvas"></canvas></div><br/><div><label for="object-count">Total Objects Detected:</label><input type="text" id="object-count" readonly value="<?= count($response["predictions"]) ?>"></div>

此 HTML 标记包含一个表单，其中有一个用于上传图像的输入字段和一个提交按钮。它还包括一个画布元素，其中将显示带有边界框的处理后的图像。用户界面中的文本框显示检测到的对象的数量。此外，用于加载图像和绘制边界框的 JavaScript 代码包含在 HTML 中：

 <script>var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");// Load image if available<?php if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_FILES["image"])): ?>var img = new Image();img.onload = function() {canvas.width = img.width;canvas.height = img.height;ctx.drawImage(img, 0, 0);// Draw bounding boxesvar predictions = <?= json_encode($response["predictions"]) ?>;var color = "rgb(103, 251, 25)"; // Red color for bounding boxespredictions.forEach(function(prediction) {var x1 = prediction.x - prediction.width / 2;var y1 = prediction.y - prediction.height / 2;var x2 = prediction.x + prediction.width / 2;var y2 = prediction.y + prediction.height / 2;// Draw bounding boxctx.beginPath();ctx.rect(x1, y1, x2 - x1, y2 - y1);ctx.strokeStyle = color;ctx.stroke();});// Update object countdocument.getElementById("object-count").value = predictions.length;};img.src = "data:image/jpeg;base64,<?= $base64_image ?>";<?php endif; ?></script>

仅当表单随图片一起提交时，才会执行此 JavaScript 代码。它会将图片加载到画布上，并根据从模型端点收到的响应在检测到的对象周围绘制边界框。您可以参考本指南了解如何从推理 API JSON 输出中绘制边界框。

以下是此博客文章的完整代码。将此代码保存在 .php 文件中并在 Web 服务器环境中执行。

<?phpif ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_FILES["image"])) {// Base 64 Encode Image$image_data = file_get_contents($_FILES["image"]["tmp_name"]);$base64_image = base64_encode($image_data);$api_key = "API_KEY"; // Set API Key$model_endpoint = "rebar-dataset-qchab/2"; // Set model endpoint (Found in Dataset URL)// URL for Http Request$url = "https://detect.roboflow.com/" . $model_endpoint . "?api_key=" . $api_key;// Setup + Send Http request$options = array('http' => array('header' => "Content-type: application/x-www-form-urlencoded\r\n",'method' => 'POST','content' => $base64_image));$context = stream_context_create($options);$result = file_get_contents($url, false, $context);// Decode JSON response$response = json_decode($result, true);
} else {$response = array("predictions" => []);
}// Create canvas size
$canvas_width = 400; // Specify canvas width
$canvas_height = 400; // Specify canvas height// Start HTML output
?>
<!DOCTYPE html>
<html>
<head><title>Image with Bounding Boxes</title><style>#canvas-container {width: <?= $canvas_width ?>px;height: <?= $canvas_height ?>px;overflow: auto;}#canvas {width: <?= $canvas_width ?>px;height: <?= $canvas_height ?>px;}</style>
</head>
<body style="padding-left: 50px;"><h2>Rebar Counting Application</h2><form action="" method="post" enctype="multipart/form-data"><input type="file" name="image" accept="image/*"><button type="submit">Run Prediction</button><br/><br/></form><div id="canvas-container"><canvas id="canvas"></canvas></div><br/><div><label for="object-count">Total Objects Detected:</label><input type="text" id="object-count" readonly value="<?= count($response["predictions"]) ?>"></div><script>var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");// Load image if available<?php if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_FILES["image"])): ?>var img = new Image();img.onload = function() {canvas.width = img.width;canvas.height = img.height;ctx.drawImage(img, 0, 0);// Draw bounding boxesvar predictions = <?= json_encode($response["predictions"]) ?>;var color = "rgb(103, 251, 25)"; // Red color for bounding boxespredictions.forEach(function(prediction) {var x1 = prediction.x - prediction.width / 2;var y1 = prediction.y - prediction.height / 2;var x2 = prediction.x + prediction.width / 2;var y2 = prediction.y + prediction.height / 2;// Draw bounding boxctx.beginPath();ctx.rect(x1, y1, x2 - x1, y2 - y1);ctx.strokeStyle = color;ctx.stroke();});// Update object countdocument.getElementById("object-count").value = predictions.length;};img.src = "data:image/jpeg;base64,<?= $base64_image ?>";<?php endif; ?></script>
</body>
</html>