fg-ml-base

01 - choose-image.html

<!-- Step 1 - we need people to be able to choose their image -->
      <div class="test-image">
        <input type="file" id="testImage" onchange="onFileSelected(event)" />
      </div>

01 - title.html

<h1>Is it a .... ?</h1>

02 - preview-image.html

 <!-- when someone uploads the image we show it on the page -->
    <div class="preview-image hidden" id="preview-image">
      <img id="myImage" />
    </div>

02 - preview-image.js

/**
  This function runs when the the file field receives an input.
*/

function onFileSelected(event) {
  // show the image box
  showHide("preview-image", true);

  // get the first file uploaded
  var selectedFile = event.target.files[0];

  // use the FileReader api to do magic
  // more info here: https://developer.mozilla.org/en-US/docs/Web/API/FileReader
  var reader = new FileReader();

  // get the img tag which will soon display our image on the page
  var imgtag = document.getElementById("myImage");
  // set the title="" attrubute on the img tag to the file name
  imgtag.title = selectedFile.name;

  // The onload event is triggered each time the reading operation is successfully completed.
  reader.onload = event => {
    // set the src="" to the result - in this case the image is converted into a base64 string
    // read more here: https://css-tricks.com/data-uris/
    imgtag.src = event.target.result;
  };

  // reads the contents of the file - this triggers the function above
  // Starts reading the contents of the specified Blob, once finished, the result attribute contains a data: URL representing the file's data.
  reader.readAsDataURL(selectedFile);
  
  // hide the results box if its been submitted already
  showHide("results", false);
}

03 - submit-button.html

 <!-- a button to make it all happen -->
      <button id="identifyBtn" onclick="init()">
        Identify
      </button>

03 - submit-button.js

/**
This function is run when you click the 'Identify' button
*/
async function init() {
 
}

04 - loading.html

<!-- show a loader -->
      <div id="loading" class="hidden rotate">🐹</div>

04 - loading.js

  // We need to show we're loading something unhide the loading hamster
  showHide("loading", true);

05 - load-model.js

  // Our trained image url
  const ourModel = "https://teachablemachine.withgoogle.com/models/av5gK3anQ/";

  const modelURL = ourModel + "model.json";
  const metadataURL = ourModel + "metadata.json";
  model = await tmImage.load(modelURL, metadataURL);

06 - start-prediction.js

const testImage = document.getElementById("myImage").src;
  var myImage = new Image();
  myImage.src = testImage;

  await prediction(myImage);

07 - show-results-init.js

showHide("loading", false);
showHide("results", true);

07 - show-results.html

      <!-- we need somewhere for results to go -->
      <div class="results hidden" id="results"></div>

07 - show-results.js

async function prediction(image) {
  const prediction = await model.predict(image);
  const results = document.getElementById('results');
  // clear the results box from any previous run throughs
  const results = document.getElementById('results');
   prediction.map((myClass, i)=> {  
     results.append(`${myClass.className}: ${myClass.probability.toFixed(2)}\n\n`)
  })
  
}

final-index.html

<h1>Is it a .... ?</h1>
    
    
      
    
      
      
    <!-- Step 1 - we need people to be able to choose their image -->
    <div class="test-image">
      <input type="file" id="testImage" onchange="onFileSelected(event)" />
    </div>
    
    <!-- when someone uploads the image we show it on the page --> 
    <div class="preview-image hidden" id="preview-image">
      <img id="myImage" />
    </div>
      
    <!-- a button to make it all happen -->
    <button id="identifyBtn" onclick="init()">
      Identify
    </button>
    
    
    
      
    <!-- show a loader -->
    <div id="loading" class="hidden rotate">🐹</div>
      

    
    
    
  
    
    
  
    
    
        <!-- we need somewhere for results to go -->
      <div class="results hidden" id="results">
   
      </div>
    
    
    
<!--      <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/dist/teachablemachine-image.min.js"></script>
 -->

final-script.js

/**
  This function runs when the the file field receives an input.
*/

function onFileSelected(event) {
  // show the image box
  showHide("preview-image", true);

  // get the first file uploaded
  var selectedFile = event.target.files[0];

  // use the FileReader api to do magic
  // more info here: https://developer.mozilla.org/en-US/docs/Web/API/FileReader
  var reader = new FileReader();

  // get the img tag which will soon display our image on the page
  var imgtag = document.getElementById("myImage");
  // set the title="" attrubute on the img tag to the file name
  imgtag.title = selectedFile.name;

  // The onload event is triggered each time the reading operation is successfully completed.
  reader.onload = event => {
    // set the src="" to the result - in this case the image is converted into a base64 string
    // read more here: https://css-tricks.com/data-uris/
    imgtag.src = event.target.result;
  };

  // reads the contents of the file - this triggers the function above
  // Starts reading the contents of the specified Blob, once finished, the result attribute contains a data: URL representing the file's data.
  reader.readAsDataURL(selectedFile);
  
  showHide("results", false);
}

/**
This function is run when you click the 'Identify' button
*/
async function init() {
  // We need to show we're loading something unhide the loading hamster
  showHide("loading", true);

  // Our trained image url
  const ourModel = "https://teachablemachine.withgoogle.com/models/av5gK3anQ/";

  const modelURL = ourModel + "model.json";
  const metadataURL = ourModel + "metadata.json";
  model = await tmImage.load(modelURL, metadataURL);
  maxPredictions = model.getTotalClasses();

  const testImage = document.getElementById("myImage").src;
  var myImage = new Image();
  myImage.src = testImage;

  await prediction(myImage);

  showHide("loading", false);
  showHide("results", true);
}

async function prediction(image) {
  const prediction = await model.predict(image);
  const results = document.getElementById('results');
  // clear the results box from any previous run throughs
  const results = document.getElementById('results');
  results.innerHTML = '';
   prediction.map((myClass, i)=> {  
     results.append(`${myClass.className}: ${myClass.probability.toFixed(2)}\n\n`)
  })
  
}


/**
Show / Hide things
*/
// function showHide(id, show) {
//   if(show === true)
//     document.getElementById(id).classList.remove('hidden');
//   else 
//     document.getElementById(id).classList.add('hidden');
// }