工程网站模板制作教程,网站页面如何架构,我做推广找不到我的网站,网站怎么制作的前言
在当今科技飞速发展的时代#xff0c;JavaScript#xff08;JS#xff09;作为广泛应用的编程语言#xff0c;展现出了强大的活力与无限的可能性。与此同时#xff0c;自然语言处理#xff08;NLP#xff09;领域也正在经历着深刻的变革与进步。
当这两者碰撞在一…前言
在当今科技飞速发展的时代JavaScriptJS作为广泛应用的编程语言展现出了强大的活力与无限的可能性。与此同时自然语言处理NLP领域也正在经历着深刻的变革与进步。
当这两者碰撞在一起时一个全新的领域就此打开——图片分析。
实现
效果展示 通过点击上传图片按钮上传图片后通过AI帮助我们对图像进行识别
实现过程
页面
main classcontainerlabel forfile-upload classcustom-file-upload!-- input typefile idfile-upload acceptimage/* --input typefile acceptimage/* idfile-upload上传图片/labeldiv idimage-container/divp idstatus/p/mainmain classcontainer: 这是一个 main 元素,表示页面的主要内容区域label forfile-upload classcustom-file-upload: 这是一个 label 元素,它与 file-upload 输入框关联input typefile acceptimage/* idfile-upload: 这是一个 input 元素,类型为 file。acceptimage/* 属性表示只允许上传图片文件。idfile-upload 属性用于与 label 元素关联div idimage-container/div: 这是一个空的 div 元素,其 id 为 image-container。用于显示上传的图片预览
js代码
// transformers库导入pipeline模块 npl 任务
import { pipeline, env } from https://cdn.jsdelivr.net/npm/xenova/transformers2.6.0首先从导入transformers库导入pipeline模块和env
transformers 是一个由 Hugging Face 开发的开源 Python 库,用于快速开发和部署最先进的自然语言处理(NLP)模型为 NLP 开发者提供了一个强大、灵活和易用的工具集。无论是进行基础的文本分类还是构建复杂的对话系统,transformers 都可以成为开发者的首选。
// 设置当前的环境对象 不要加载本地模型使用远程加载 transformers库
env.allowLocalModels false;设置当前的环境对象 不要加载本地模型使用远程加载 transformers库 // 通过id获取input元素const fileUpload document.getElementById(file-upload);const imageContainer document.getElementById(image-container)// 文件输入框元素添加监听器 事件名称change 指定触发事件执行的函数fileUpload.addEventListener(change, function (e) {// 获取目标事件看看效果 只要获取的第第一张图片只上传一张图片// console.log(e.target.files[0]);const file e.target.files[0];// 新建一个FileReader 对象 文件的本质是 01 序列 // 图片比较大 const reader new FileReader();reader.onload function (e2) {// 读完了 加载完成const image document.createElement(img); // 图片对象console.log(e2.target.result);image.src e2.target.result;//添加图片src获取图片展示到div中imageContainer.appendChild(image)// 启动ai任务 功能模块化封装出去detect(image)}reader.readAsDataURL(file)})获取 HTML 元素: const fileUpload document.getElementById(file-upload);: 通过 ID 获取文件上传的 input 元素。const imageContainer document.getElementById(image-container);: 通过 ID 获取用于显示图片的容器 div。 添加事件监听器: fileUpload.addEventListener(change, function (e) { ... });: 给文件上传 input 添加 ‘change’ 事件监听器,当用户选择文件时触发。 处理上传文件: const file e.target.files[0];:获取用户选择的第一个文件。const reader new FileReader();: 创建一个 FileReader 对象,用于读取文件内容。reader.onload function (e2) { ... };: 当文件读取完成时,触发 ‘onload’ 回调函数。const image document.createElement(img);: 创建一个新的 img 元素用于显示图片。image.src e2.target.result;: 将读取到的文件内容设置为 img 元素的 src 属性,显示图片。imageContainer.appendChild(image);: 将 img 元素添加到图片容器 div 中,完成图片预览。 触发 AI 检测: detect(image);: 在图片加载完成后,调用一个名为 detect 的函数来执行 AI 检测任务。这个函数没有在代码中定义,需要在其他地方实现。
其中将detect单独模块化体现了封装的思想
const status document.getElementById(status);// 通过pipeline启动一个检测图片的AI任务并选择合适的模型const detect async (image) {status.textContent 分析中...;const detector await pipeline(object-detection,Xenova/detr-resnet-50) // 适合对象检测的模型 model 实例化了detector对象const output await detector(image.src, {threshold: 0.1,percentage: true})// console.log(output);output.forEach(rendesrBox)}上述代码
const detector await pipeline(object-detection, Xenova/detr-resnet-50);: 使用 Hugging Face 的 pipeline 函数加载预训练的对象检测模型。这里选择了 “Xenova/detr-resnet-50” 模型,它适用于对象检测任务。const output await detector(image.src, { threshold: 0.1, percentage: true });: 使用加载的对象检测模型对图像进行分析,返回检测结果。这里设置了置信度阈值为 0.1,并将结果以百分比的形式返回。output.forEach(renderBox);: 遍历检测结果,对每个检测到的对象调用一个名为 renderBox 的函数进行渲染。
function renderBox({ box, label }) {console.log(box, label);const { xmax, xmin, ymax, ymin } boxconst boxElement document.createElement(div);boxElement.className bounding-boxObject.assign(boxElement.style, {borderColor: #123123,borderWidth: 1px,borderStyle: solid,left: 100 * xmin %,top: 100 * ymin %,width: 100 * (xmax - xmin) %,height: 100 * (ymax - ymin) %})const labelElement document.createElement(span);labelElement.textContent label;labelElement.className bounding-box-labellabelElement.style.backgroundColor #000000boxElement.appendChild(labelElement);imageContainer.appendChild(boxElement);}对于每个检测到的对象,都会在图像容器中渲染一个带有标签的边界框,以可视化地显示检测结果
完整js代码
script typemodule// transformers库导入pipeline模块 npl 任务 import { pipeline, env } from https://cdn.jsdelivr.net/npm/xenova/transformers2.6.0// 设置当前的环境对象 不要加载本地模型使用远程加载 transformers库env.allowLocalModels false;// 通过id获取input元素const fileUpload document.getElementById(file-upload);const imageContainer document.getElementById(image-container)// 文件输入框元素添加监听器 事件名称change 指定触发事件执行的函数fileUpload.addEventListener(change, function (e) {// 获取目标事件看看效果 只要获取的第第一张图片只上传一张图片// console.log(e.target.files[0]);const file e.target.files[0];// 新建一个FileReader 对象 文件的本质是 01 序列 // 图片比较大 const reader new FileReader();reader.onload function (e2) {// 读完了 加载完成const image document.createElement(img); // 图片对象console.log(e2.target.result);image.src e2.target.result;//添加图片src获取图片展示到div中imageContainer.appendChild(image)// 启动ai任务 功能模块化封装出去detect(image)}reader.readAsDataURL(file)})const status document.getElementById(status);// 通过pipeline启动一个检测图片的AI任务并选择合适的模型const detect async (image) {status.textContent 分析中...;const detector await pipeline(object-detection,Xenova/detr-resnet-50) // 适合对象检测的模型 model 实例化了detector对象const output await detector(image.src, {threshold: 0.1,percentage: true})// console.log(output);output.forEach(rendesrBox)}function renderBox({ box, label }) {console.log(box, label);const { xmax, xmin, ymax, ymin } boxconst boxElement document.createElement(div);boxElement.className bounding-boxObject.assign(boxElement.style, {borderColor: #123123,borderWidth: 1px,borderStyle: solid,left: 100 * xmin %,top: 100 * ymin %,width: 100 * (xmax - xmin) %,height: 100 * (ymax - ymin) %})const labelElement document.createElement(span);labelElement.textContent label;labelElement.className bounding-box-labellabelElement.style.backgroundColor #000000boxElement.appendChild(labelElement);imageContainer.appendChild(boxElement);}/script总结
AI 技术的发展带来了很多新的可能性前端技术结合AI将有更广阔的未来
