การใช้งาน Clarifai api เพื่อตรวจสอบรูปภาพ

ในสมัยก่อนการทำเว็บประกาศขายหรือที่สมาชิกสามารถใส่รูปภาพได้เองนั้น เป็นเรื่องยากที่ต้องตรวจสอบว่าเป็นรูปที่ต้องการจริงหรือเปล่า เช่นเป็นเว็บเกี่ยวกับประกาศขายรถแต่ใส่รูปของบ้านมาแทนทำให้ผู้ดูแลเว็บต้องปวดหัวมานั่งลบกันทุกวัน ปัจจะบันก็มี AI ที่จะเข้ามาช่วยทำงานแทนคนในส่วนนี้ ผมไปเจอ api ที่เป็น image recognition ชื่อ   https://www.clarifai.com/  แต่วันนี้ผมจะใช้ ่javascript จริงๆก็มีอีกหลายยี่ห้อ ทั้ง google,ibm,microsoft

เรามาดูตัวอย่างกันครับ

(สมมุติถ้าผมทำเว็บรถที่สมาชิกสามารถมาลงรูปรถเองได้ต้องใส่รูปรถเท่านั้น )

จากตัวอย่างหากไม่ใช่รูปรถระบบจะบอกว่าไม่มีรูปรถ และด้านขวา api จะตอบกลับมาว่ามีโอกาศเป็นรูปอะไรบ้าง ซึ่งประโยชน์ตรงนี้เองที่ทำให้เราสามารถตรวจสอบรูปเบื้องตนของสมาชิกที่จะลงรูปก่อนได้

วิธีการ

1 ไปสมัครสมาชิกกับ www.clarifai.com และสร้าง api key ขึ้นมาเพื่อใช้งาน

2 เป็นส่วนของ Code js ที่สำคัญ

$(document).ready(function(){  

const app = new Clarifai.App({
 apiKey: 'Your Api Key'
});



var detect = "car"; // ตัวแปลสำหรับ Detect ว่าให้เป็นอะไร
var status_yes = ""; // text แสดงสถานะ

// functionสำหรับอ่่านไฟล์ในและส่ง  Api
function readURL(input) {

    if (input.files && input.files[0]) {
        
      var reader = new FileReader();
      reader.onload = function (e) {
     
      if(e.total>1235716){ // Detect Size
      alert("ไฟล์ใหญ่เกินไป");
      return false;
      }
      var imageData = e.target.result;
      $("#tempimage .datashow").html("<img width='100%' src='" + imageData +"' />");
      imageData = imageData.replace(/^data:image\/(.*);base64,/, "");
       
      // ส่วนเรียก api     
      app.models.predict(Clarifai.GENERAL_MODEL,imageData).then(function(response) {
                     
                     $(".res").html("");
                     $(".imagetxt").html("");
                    status_yes = "<span style='color:red;'>ไม่มีรูปของรถยนต์อยู่เลย</span>";
                     $.each(response.outputs[0].data.concepts, function( index, value ) { // loop ค่่าที่ api ตอบกลับมา
                              
                              
                          if(value.name==detect && value.value > 0.95){
                                 status_yes = "<span style='color:green;'>มีรูปรถผ่าน</span>";
                            }
                            
                          $(".res").append("<p>"+value.name+" : "+value.value+"</p>");
                      });
                      
                      $(".imagetxt").html(status_yes);
                      
      },
      function(err) {
              console.error(err);
      });
            
            
      }

        reader.readAsDataURL(input.files[0]);
    }
}

$(".fileupload").change(function(){
    readURL(this);
});





 

             
          });

ซึ่ง code js ที่สำคัญก็มีแค่นี้ครับ ส่วนไฟล์ทั้งหมดสามารถ Download ได้ครับ

ปล.

• api ส่วนใหญ่จะเสียเงินตามครั้งการใช้งาน แต่จะเริ่มจากฟรีก่อน
• การใช้ javascrpt ตรวจสอบอาจไม่ปลอดภัยควรใช้ Server ตรวจสอบอีกชั้นจะดีกว่า