Ancient Brain

Worlds Minds Users Uploads JS code Search

Intro

Introduction Features

---

Definitions Principles The AI model

---

Teaching Register a class

Learn

Getting started P5 tutorial Three.js tutorial

---

Coding course Coding course II Coding for kids WebGL course AI exercises

Browse

Starter Worlds

---

Editor's Choice Showcase Worlds Multi-user Worlds Random Worlds

---

Advanced search

Docs

Docs API docs

Register

Register Forgot password

   Login

 
// ML5 image recognition using MobileNet 
// uses AB framework
// enter URL of image at runtime

 
// no run, pause, step
AB.drawRunControls = false;

let classifier;
let img;

// asynchronous loads of resources, with callback functions when ready 
var classifierLoaded = false;
var imgLoaded = false;


	
AB.world.newRun = function()
{
    AB.runReady = false;            // prevent screenshot while waiting on splash screen 
 	ABWorld.init (  'lightblue'  ); 
    AB.headerRHS();   
 		
 	// splash screen to enter URL 
	  AB.newSplash();	
	  AB.splashHtml ( " <h1> Try to recognise any image </h1> " +
	   	                       " Enter URL of image: <input    style='width:25vw;'    maxlength='2000'  id=url NAME=url   VALUE='' > " +
	   	                       " <button onclick='recognise();'  class=ab-normbutton >Recognise</button> <p> " +
	   	                       " (Image must be on Ancient Brain) <p> " +
	   	                       " <div id=errordiv name=errordiv> </div> " );

    // can do classifier load while we are waiting for user 	   	                            
	 classifier = ml5.imageClassifier ( 'MobileNet', function()
     {
        // console.log ( "loaded classifier");
        classifierLoaded = true;
        if ( classifierLoaded && imgLoaded ) init();
     });
};



function recognise()        // user has entered a URL 
{
	var  url =  jQuery("input#url").val();
	url = url.trim();
	
	if ( ! url.startsWith ( "https://ancientbrain.com/uploads/" ) )
	{
	    $("#errordiv").html( "<font color=red> <B> Error: Image must be an upload on Ancient Brain </b></font> " );
	    return;
	}
	
	// else URL looks good 
	AB.removeSplash();	
	url =  url.replace ( "https://ancientbrain.com/uploads/", "/uploads/" );
	// console.log ( "fetching image: " + url );
	
    loadImage ( url, function ( theimg )
    {
        // console.log ( "loaded image");
        img = theimg;
        imgLoaded = true;
        if ( classifierLoaded && imgLoaded ) init();
    });
}



function init()         // all resources loaded 
{
    // center image in full window canvas, so screenshot looks good  
    // x + img.width + x = ABWorld.p5canvas.width
    var x = (ABWorld.p5canvas.width - img.width ) /2;
    var y = (ABWorld.p5canvas.height - img.height ) /2;
    image (img, x, y);
    
    AB.headerRHS();   
 //   AB.msg ( "Running image recognition ... <br> ", 1 );
    AB.runReady = true;  
    
    classifier.classify ( img, 5,  function ( error, results )          // classify, with callback function 
    {
        if (error) 
        {
            AB.msg ( "<font color=red> <B> Error recognising image. See console for details. </b></font> <br> ", 2 );
            console.log (error);
        }
        
        // results = an array ordered by confidence
        var r = "<hr> <h3> Rank Confidence Identification </h3> ";
        
        for ( var i = 0; i < results.length; i++ )
        {
            r = r + (i+1) + ". " + nf(results[i].confidence, 0, 2) + " " + results[i].label + " <br> ";
            // https://p5js.org/reference/#/p5/nf
        }
        
        AB.msg ( r, 3 );
    });
}