Skip to content

Latest commit

 

History

History
129 lines (118 loc) · 3.06 KB

README.md

File metadata and controls

129 lines (118 loc) · 3.06 KB

Step4

Goal:

  • Return best match prediction to client-side
  • Render result to HTML page

Changes in index.js

    const mostLikelyPrediction = results.predictions.sort((a, b) => {
        return (a.probability > b.probability) ? -1 :
            (a.probability === b.probability ? 0 : 1)
        ;
    })[0].tagName;
    response.setHeader('Content-Type', 'text/json');
    response.end(`{ "prediction": "${mostLikelyPrediction}" }`);

Changes in public/index.html

    <div class="appPanel">
      <div class="appResults" id="appResults">
        <div class="answer"><span>User:&nbsp;</span><span class="appUserAnswer value">-</span></div>
      </div>
      <div class="appRestart"><button id="appRestartButton" class="appRestartButton hide">NEW GAME</button></div>
    </div>

changes in public/css/app.css

/** Results panel **/
.appContainer .appPanel {
    position: relative;
    height: 20%;
    width: 100%;
    font-size: 1.3em;
    box-sizing: border-box;
    background: #3c3c3c;
    color: #cccccc;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
}

.appPanel .appResults {
    flex: 1 0 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.appResults .answer {
    flex: 0;
    padding: 0.5em;
    text-transform: uppercase;
}

.appResults .answer .value {
    font-weight: bold;
}

.appPanel .appRestart {
    flex: 1 0 0;
    align-self: center;
}

.appPanel .appRestartButton {
    padding: 0.25em 0.5em;
    font-size: 1em;
    border-radius: 1em;
}

.hide {
    display: none;
}

for .appContainer .appUserInput

change height: 80%;

Changes in public/js/app.js

reorder + optimise a bit

// Global variables
let webcamStream;
const appResults = document.getElementById('appResults');
const videoElement = document.querySelector('video');
const appRestartButton = document.getElementById('appRestartButton');

let counter = 0;
const counterStart = 0;
const counterStop = 4;
const counterStep = 1;
const timerTick = 1000;

in submitImageFromCanvas()

    ...
    // Success!
    const prediction = JSON.parse(request.responseText).prediction;
    processPrediction(prediction);
    ...

Add new method

    const processPrediction = (prediciton) => {
        appResults.querySelector(".appUserAnswer").innerHTML = prediciton;
        appRestartButton.classList.remove('hide');
    };

in startCounter()

    ...
    canvasElement.classList.add('hide');
    appRestartButton.classList.add('hide');

in const takePhoto = (videoElement, canvasElement) => {

    ...
    canvasElement.classList.remove('hide');

After bindCamera(videoElement); call

    ...
    bindCamera(videoElement);
    appRestartButton.addEventListener("click", function(){
        startCounter();
    });