I would like to create a website that can classify different types of cars.
(我想创建一个可以对不同类型的汽车进行分类的网站。)
I have managed to get the website working to use the mobile net model, but I would like to use a custom model that I trained in google colab and then converted into javascript.(我设法使网站能够使用移动网络模型，但是我想使用我在Google colab中训练过的自定义模型，然后将其转换为javascript。)
Does anyone know how I could achieve this?(有谁知道我怎么能做到这一点？)
Here is the javascript code:
(这是JavaScript代码：)
// Defining Variables const webcamElement = document.getElementById('webcam'); let net; var webcamrunning = false; // Flag, indicates if webcam-prediction is running or not var bw = document.getElementById('butwebcam') var bi = document.getElementById('butimage') // App that predicts image async function app() { console.log('Loading mobilenet..'); const uploadJSONInput = document.getElementById('upload-json'); const model = await tf.loadLayersModel(tf.io.browserFiles([uploadJSONInput.files[0]])); // Check if model loaded, if not, load it. if (net == undefined) {bi.innerHTML = 'Wait for Initiation...'; net = await model.load(); console.log('Sucessfully loaded model'); bi.innerHTML = 'Predict'} else {console.log('Model already loaded')}; // Make a prediction through the model on our image. const imgEl = document.getElementById('output'); const result = await net.classify(imgEl); document.getElementById('console_pic').innerText = `Prediction: ${result[0].className} Probability: ${Math.round(result[0].probability*100)} % `; } // Function that activates (starts webcam app) and deactivates the Webcam-Prediction function start_webcam(){ if (webcamrunning == false) {app_webcam(); } else {webcamrunning = false; bw.innerHTML = 'Activate Predicting'; }; }; // Setup Webcam async function setupWebcam() { return new Promise((resolve, reject) => { const navigatorAny = navigator; navigator.getUserMedia = navigator.getUserMedia || navigatorAny.webkitGetUserMedia || navigatorAny.mozGetUserMedia || navigatorAny.msGetUserMedia; if (navigator.getUserMedia) { navigator.getUserMedia({video: true}, stream => { webcamElement.srcObject = stream; webcamElement.addEventListener('loadeddata', () => resolve(), false); }, error => reject()); } else { reject(); } }); } // Webcam application async function app_webcam() { console.log('Loading mobilenet..'); // Check if model loaded, if not, load it. if (net == undefined) {bw.innerHTML = 'Wait for Initiation...'; net = await mobilenet.load(); console.log('Sucessfully loaded model');} else {console.log('Model already loaded')}; await setupWebcam(); webcamrunning =true; bw.innerHTML = 'Stop Predicting'; while (webcamrunning) { const result = await net.classify(webcamElement); document.getElementById('console_vid').innerText = `Prediction: ${result[0].className} Probability: ${Math.round(result[0].probability*100)} % `; // Give some breathing room by waiting for the next animation frame to // fire. await tf.nextFrame(); } } ;
Here is the html code:
(这是html代码：)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='styles.css'/> <input type="file" id="upload-json" src="C:\Users\USER\Desktop\ImageClassifier-master\model\model.json"/> <!-- Load the latest version of TensorFlow.js --> <script src="https://unpkg.com/@tensorflow/tfjs"></script> <script src="https://unpkg.com/@tensorflow-models/mobilenet"></script> <title> Image Classifier with MobileNet </title> </head> <body> <img style='margin-top: -6px; z-index: 19;' id="header" height ="320"> <h1 style='margin-top: -35px'> What car is that?</h1> <br> <hr/> <br> <em> <strong> </strong> </em> <br> <br> <hr/> <br> <h2> Upload your own Picture</h2> <!-- Upload Function with File Preview --> <input type="file" accept=".png, .jpg, .jpeg" height="200" onchange="document.getElementById('output').src = window.URL.createObjectURL(this.files[0])"> <!-- Predict button, calls predict function in Javascript --> <button id="butimage" onclick="app()"> Predict! </button> <!-- Window for Picture Preview --> <div class = "window"> <span class="helper"></span> <img class="center" id="output" alt="your image" src = "img/example.jpg" /> </div> <div class = "result" id="console_pic">Result</div> <br> <hr/> <br> <br> <br> <br> <script src="index.js"></script> </body> </html>
ask by user12440510 translate from so
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
