Klasifikasi imej menggunakan JavaScript-tutorial js-php.cn

Klasifikasi imej menggunakan JavaScript

WBOY

Lepaskan： 2023-09-09 13:01:02

ke hadapan

654 orang telah melayarinya

使用 JavaScript 进行图像分类

Maksud klasifikasi imej ialah mengekstrak sebanyak mungkin maklumat daripada imej. Contohnya, apabila anda memuat naik imej ke Google Photos, ia mengekstrak maklumat daripada imej dan mencadangkan lokasi berdasarkan maklumat tersebut.

Kami boleh menggunakan OpenCV untuk mengesan setiap maklumat kecil dalam imej dan meramalkan imej.

Melatih dan menguji model dari awal menggunakan JavaScript memerlukan banyak usaha dan memerlukan set data yang betul yang mengandungi imej yang berbeza. Jadi, dalam tutorial ini, kami akan menggunakan model pra-latihan ml5.js untuk mengklasifikasikan imej.

Pustaka

ml5.js mengandungi pelbagai model pra-latihan untuk menjadikan kehidupan pembangun lebih mudah. Selain itu, ia menggunakan GPU penyemak imbas untuk melaksanakan operasi matematik, menjadikannya lebih cekap.

Tatabahasa

Pengguna boleh menggunakan perpustakaan ml5.js untuk mengklasifikasikan imej mengikut sintaks berikut.

image_classifier.predict(image, function (err, outputs) {
   if (err) {
      return alert(err);
   } else {
      output.innerText = outputs[0].label;
   }
});

Salin selepas log masuk

Dalam sintaks di atas, "image_classifier" ialah model pengelasan imej terlatih yang diimport daripada pustaka ml5.js. Kami memanggil kaedah "ramalkan" dengan menghantar imej sebagai parameter pertama dan fungsi panggil balik sebagai parameter kedua. Dalam fungsi panggil balik kita mendapat output atau ralat.

Langkah

Langkah 1 - Tambahkan perpustakaan "ml5.js" pada kod halaman web menggunakan CDN.
Langkah 2 - Tambahkan input untuk memuat naik fail dan mengkategorikan butang.
Langkah 3 - Dalam JavaScript, akses elemen HTML yang diperlukan dan model "MobileNet" daripada ml5.js. Selain itu, fungsi modelLoad() dilaksanakan selepas model dimuatkan.
Langkah 4 - Selepas itu, setiap kali pengguna memuat naik imej, acara dicetuskan dan imej dibaca dalam fungsi panggil balik. Juga, paparkan imej pada skrin.
Langkah 5 - Apabila pengguna menekan butang pengelas imej, gunakan kaedah ramalan pengelas imej untuk meramal maklumat tentang imej.

Contoh 1

Dalam contoh di bawah, kami menambah perpustakaan "ml5.js" pada bahagian melalui CDN. Selepas itu, setiap kali pengguna memuat naik imej, kami membacanya dan memaparkannya pada skrin. Seterusnya, kami menggunakan kaedah ramalan untuk mengekstrak ciri daripada imej apabila pengguna menekan butang pengelasan. Dalam output, pengguna boleh memaparkan maklumat tentang imej di bawah imej.

<html>
<head>
   <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
</head>
<body>
   <h2>Creating the <i> Image classifier </i> using the ml5.js in JavaScript.</h2>
   <h4 id = "content"> Wait until model loads. </h4>
   <input type = "file" name = "Image" id = "upload_image" accept = "jpg,jpeg,png">
   <br> <br>
   <img src = "" class = "image" id = "show_image" width = "300px" height = "300px">
   <br>
   <button class = "button" id = "triggerClassify"> Classify the image </button>
   <br>
   <h2 id = "output"> </h2>
   <script>
      window.onload = function () {
         // access all HTML elements and image classifier
         const image_classifier = ml5.imageClassifier("MobileNet", modelLoaded);
         const triggerClassify = document.getElementById("triggerClassify");
         const upload_image = document.getElementById("upload_image");
         const show_image = document.getElementById("show_image");
         const output = document.getElementById("output");
         
         // when the model is loaded, show the message
         function modelLoaded() {
            let content = document.getElementById("content");
            content.innerText = "Model is loaded! Now, test it by uploading the image.";
         }
         
         // When the user uploads the image, show it on the screen
         upload_image.onchange = function () {
            if (this.files && this.files[0]) {
            
               // using FileReader to read the image
               var reader = new FileReader();
               reader.onload = function (e) {
                  show_image.src = e.target.result;
               };
               reader.readAsDataURL(this.files[0]);
            }
         };
         
         // classify the image when the user clicks the button
         triggerClassify.onclick = function (e) {
         
            // predict the image using the model
            image_classifier.predict(show_image, function (err, outputs) {
               if (err) {
                  return err;
               } else {
               
                  // show the output
                  output.innerText = outputs[0].label;
               }
            });
         };
      }
   </script>
</body>
</html>

Salin selepas log masuk

Contoh

Dalam contoh di bawah, pengguna boleh menampal pautan imej ke dalam medan input. Selepas itu, setiap kali mereka menekan butang dapatkan imej, ia akan memaparkan imej pada halaman web. Seterusnya, apabila pengguna mengklik butang Klasifikasi Imej, mereka boleh melihat output yang mengandungi maklumat imej pada skrin.

<html>
<head>
   <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
</head>
<body>
   <h2>Creating the <i> Image classifier </i> using the ml5.js in JavaScript.</h2>
   <h4 id = "content"> Wait until model loads. </h4>
   <input type = "text" id = "link_input" placeholder = "Paste image link here">
   <button id = "fetch_image"> Fetch Image </button>
   <br> <br>
   <img src = "" id = "show_image" width = "300px" height = "300px" crossorigin = "anonymous">
   <img src = "" class = "image" id = "imageView">
   <br>
   <button class = "button" id = "triggerClassify"> Classify the image </button>
   <br>
   <h2 id = "output"> </h2>
   <script>
      window.onload = function () {
         // access all HTML elements and image classifier
         const image_classifier = ml5.imageClassifier("MobileNet", modelLoaded);
         const triggerClassify = document.getElementById("triggerClassify");
         let link_input = document.getElementById("link_input");
         const show_image = document.getElementById("show_image");
         const output = document.getElementById("output");
         
         // when the model is loaded, show the message
         function modelLoaded() {
            let content = document.getElementById("content");
            content.innerText = "Model is loaded! Now, test it by uploading the image.";
         }
         fetch_image.onclick = function (e) {
            let link = link_input.value;
            console.log(link);
            if (link != null && link != undefined) {
               show_image.src = link;
            }
         };
         triggerClassify.onclick = function (e) {
            image_classifier.predict(show_image, function (err, outputs) {
               if (err) {
                  console.error(err);
               } else {
                  output.innerText = outputs[0].label;
               }
            });
         };
      }
   </script>
</body>
</html>

Salin selepas log masuk

Pengguna belajar mengklasifikasikan imej menggunakan model terlatih dalam JavaScript. Kami menggunakan perpustakaan "ml5.js" untuk mengekstrak ciri imej. Kita boleh mengelaskan imej menggunakan klasifikasi imej kehidupan sebenar. Selain itu, terdapat banyak kes penggunaan lain untuk klasifikasi imej.

Atas ialah kandungan terperinci Klasifikasi imej menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!