使用 p5.js、TensorFlow 和 MobileNet 进行随机图像和分类答案

【问题标题】：Random Image and Classification with p5.js, TensorFlow and MobileNet使用 p5.js、TensorFlow 和 MobileNet 进行随机图像和分类
【发布时间】：2021-04-12 00:05:28
【问题描述】：

我正在向社区寻求帮助，因为我的代码卡住了。对于一个项目，我需要使用 MobileNet 和 TensorFlow 在 P5.js 上创建一个图像分类程序。

我想知道如何创建一个按钮，随机显示一张图片（在我下载的 3 张图片中），图片下方有 MobileNet 分类和我提供的信息（如“危险”）？

Result wanted

这是我已经完成的。谢谢你:)


    var model_mobilenet;
    var loaded;
    
    
    function setup() {
      createCanvas(400, 300);
      mobilenet.load().then(modelLoaded);
    
      military = loadImage('military');
      rifle = loadImage('rifle');
      revolver = loadImage('revolver');
      
      createButton("Take a picture").mousePressed(btnClicked);
    }
    
    function classifyDone(res) {
      print(res);
      if (res[0].className == "rifle")
      {
      print("Danger");
      createP("Danger");
      }
      
      else if (res[0].className == "revolver, six-gun, six-shooter")
      {
      print("Danger");
      createP("Danger");
      }
      else if (res[0].className == "military uniform")
      {
        print("Not sure about this one");
        createP("Not sure about this one");
      }
      else {
        print("Evrything is okay");
        createP("Everything is okay");
      }
    }
    
    function modelLoaded(net) {
      model_mobilenet = net;
      loaded = true;
      print("Model loaded");
    }
    
    function btnClicked() {
      
    image(military, 0, 0, 400, 300);
      
    if (loaded == true)
    {
    model_mobilenet.classify(military.elt).then(classifyDone);
      }
    }

【问题讨论】：

假设 MobileNet 部分有效，您只需将 3 张图像存储在一个数组中，然后从数组中选择一个随机图像。您可以编写一个单独的基本草图来执行此操作：加载 3 张图像，将它们存储在一个数组中，使用 p5 中的random()。方便地允许您传递一个数组（例如let images = [military, rifle, revolver]; console.log(random(images));。查看this similar question

标签： tensorflow button classification display mobilenet

【解决方案1】：

    var model_mobilenet;
var loaded;


function setup() {
  createCanvas(400, 300);
  mobilenet.load().then(modelLoaded);

  revolver = loadImage('revolver.jpg');
  baseball = loadImage('baseball.jpg');
  rifle = loadImage('rifle.jpg');

  
  createButton("DANGER OR NOT?").mousePressed(btnClicked);
}

function classifyDone(res) {
  print(res);
  
  createP("Model detected a <b>" + res[0].className + "</b> with a confidence of <b>" + res[0].probability + "</b>");
  if (res[0].className =="assault rifle, assault gun")
  
  { createP("<b>Danger, find a shelter, quickly !</b>");}
  
  else if (res[0].className == "revolver, six-gun, six-shooter")
 
  { createP("<b>Danger, find a shelter, quickly !</b>");}

  else {   createP("Everything is okay");  }
}

/* if ($(".revolver, six-gun, six-shooter").css('font-color: red')){
$(".assault rifle, assault gun").css('font-color: green'); */

function modelLoaded(net) {
  model_mobilenet = net;
  loaded = true;
  print("Model loaded");
}

function btnClicked() {
 
let randomNumber = Math.random()
if(randomNumber<0.3)
{
  image(baseball, 0, 0, 400, 300);
model_mobilenet.classify(baseball.canvas).then(classifyDone);
  }
else if (randomNumber<0.6)
{
    image(rifle, 0, 0, 400, 300);
model_mobilenet.classify(rifle.canvas).then(classifyDone);
  }
  else 
{
    image(revolver, 0, 0, 400, 300); 
model_mobilenet.classify(revolver.canvas).then(classifyDone);
  }
}

这是我得到的结果。它不是很好，但如果再多一点 CSS，它就会很令人满意。请随时向我询问更多详细信息。这是result。

【讨论】：