JavaScript 和 TensorFlow.js 实现前端的猫狗大战！

起源

在掘金看到大佬的一篇文章前端页面如何运行AI+图像识别实战
运行了，很好玩。
然后我就想起久远前的CV入门的猫狗分类。接着从上面的代码修改成输出是猫是狗。

原理就是使用 TensorFlow.js 和预训练的 MobileNet 模型进行图像分类（前端的缺点就是只能引入可以js引入的预训练模型。。。准确率跟速度都不太行，可以当玩具玩玩哈哈）然后再判断检测结果有无cat or dog… 我也试着找其他的动物分类模型或者猫狗分类模型，好像没有？

实现页面

在这里插入图片描述

前端代码

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>MobileNet Cat vs Dog Image Classifier</title><style>.container{margin: 40px auto;width:max(50vw, 400px);display: flex;flex-direction: column;align-items: center;}.custom-file-upload{display: flex;align-items: center;cursor: pointer;gap: 10px;border: 2px solid black;padding: 8px 16px;border-radius: 6px;}#file-upload{display: none;}#image-container{width: 100%;margin-top: 20px;position: relative;}#image-container > img{width: 100%;}#status{margin-top: 20px;font-size: 18px;}</style></head><body><mainclass="container"><h1>猫狗大战</h1><labelfor="file-upload"class="custom-file-upload"><inputtype="file"accept="image/*"id="file-upload"/>
        上传图片
      </label><divid="image-container"></div><pid="status"></p></main><!-- 引入 TensorFlow.js 和 MobileNet 模型 --><scriptsrc="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script><scriptsrc="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet"></script><script>
      document
        .getElementById("file-upload").addEventListener("change",async(event)=>{const file = event.target.files[0];if(file){const reader =newFileReader();
            reader.onload=asyncfunction(e){const image = document.createElement("img");
              image.src = e.target.result;
              image.onload=async()=>{
                document.getElementById("image-container").innerHTML ="";// 清除之前的图片
                document.getElementById("image-container").appendChild(image);awaitclassifyImage(image);};
              image.onerror=()=>{
                console.error("图片加载失败");
                document.getElementById("status").textContent ="图片加载失败。";};};
            reader.onerror=()=>{
              console.error("文件读取失败");
              document.getElementById("status").textContent ="文件读取失败。";};
            reader.readAsDataURL(file);}});asyncfunctionclassifyImage(image){const status = document.getElementById("status");
        status.textContent ="分析中...";try{// 加载 MobileNet 模型const model =await mobilenet.load();
          console.log("模型加载完成");// 对图片进行分类const predictions =await model.classify(image);
          console.log("预测结果:", predictions);// 解析结果并显示let result ="未识别为猫或狗";// 检测有可能多个结果数组，参考全部结果，有cat或者dog就判断
          predictions.forEach((prediction)=>{if(prediction.className.toLowerCase().includes("cat")){
              result ="是猫！";}elseif(prediction.className.toLowerCase().includes("dog")){
              result ="是狗！";}});

          status.textContent = result;}catch(error){
          console.error("分类过程中出错", error);
          status.textContent ="分类失败，请重试。";}}</script></body></html>

直接浏览器运行就可以~

改进？（猫狗品种名词）

需要怎么把一些结果中的猫狗品种名词也识别出来（比如 golden retriever， Tibetan mastiff ），现在就是识别 dog这个单词，有误杀。
在这里插入图片描述

修改 classifyImage 函数（试图提高准确率）

为了处理模型输出的预测结果中包含猫狗的品种名称而没有直接包含“cat”或“dog”，可以创建一个包含常见猫狗品种名称的列表。
dogBreeds 和 catBreeds 数组中列出常见的猫狗品种名称。

asyncfunctionclassifyImage(image){const status = document.getElementById('status');
      status.textContent ='分析中...';// 猫狗品种名称列表const dogBreeds =["dog","poodle","retriever","mastiff","bulldog","terrier","beagle","chihuahua","pomeranian","husky","shepherd","dachshund","spaniel","collie","shih tzu","greyhound"];const catBreeds =["cat","persian","siamese","sphynx","ragdoll","bengal","maine coon","british shorthair","siberian","abyssinian","birman","burmese","chartreux"];try{// 加载 MobileNet 模型const model =await mobilenet.load();
          console.log('模型加载完成');// 对图片进行分类const predictions =await model.classify(image);
          console.log('预测结果:', predictions);// 解析结果并显示let result ='未识别为猫或狗';

          predictions.forEach(prediction=>{const className = prediction.className.toLowerCase();if(dogBreeds.some(breed=> className.includes(breed))){
                  result ='是狗！';}elseif(catBreeds.some(breed=> className.includes(breed))){
                  result ='是猫！';}});

          status.textContent = result;}catch(error){
          console.error('分类过程中出错', error);
          status.textContent ='分类失败，请重试。';}}

更新猫狗品种名单

const dogBreeds =["dog","poodle","retriever","mastiff","bulldog","terrier","beagle","chihuahua","pomeranian","husky","shepherd","dachshund","spaniel","collie","shih tzu","greyhound","corgi","papillon","pug","boxer","rottweiler","doberman","dalmatian","akita","shiba","samoyed","weimaraner","vizsla","whippet","malamute","great dane","labrador","golden retriever","cocker spaniel","king charles spaniel","brittany","poodle","bull terrier","yorkshire terrier","jack russell terrier","australian shepherd","bernese mountain dog","bichon frise","border collie","boston terrier","bouvier des flandres","basset hound","bloodhound","cane corso","cavalier king charles spaniel","chow chow","english springer spaniel","french bulldog","german shepherd","goldendoodle","irish setter","keeshond","maltese","newfoundland","pekingese","rhodesian ridgeback","saint bernard","schipperke","shar pei","silky terrier","soft coated wheaten terrier","staffordshire bull terrier","tibetan mastiff","vizsla","weimaraner","west highland white terrier","xoloitzcuintli"];const catBreeds =["cat","persian","siamese","sphynx","ragdoll","bengal","maine coon","british shorthair","siberian","abyssinian","birman","burmese","chartreux","himalayan","exotic shorthair","scottish fold","savannah","norwegian forest","oriental","american shorthair","egyptian mau","manx","japanese bobtail","tonkinese","ocicat","devon rex","cornish rex","singapura","la perm","balinese","snowshoe","turkish angora","turkish van","selkirk rex","somali","bombay","american curl","chausie","korat","nebelung","peterbald","american wirehair","british longhair","sokoke","javanese"];

标签：前端 javascript tensorflow

本文转载自: https://blog.csdn.net/weixin_43720253/article/details/140549938
版权归原作者 Jara_Wong 所有，如有侵权，请联系我们删除。