Rozpoznávání obrázků v TensorFlow.js

Pro rozpoznávání obrázků v TensorFlow.js na webové stránce navrhneme následující projektovou strukturu:

Index.html: Hlavní stránka, která zobrazuje uživatelské rozhraní pro nahrávání obrázků.
styles.css: Soubor CSS pro stylování stránky.
script.js: JavaScriptový soubor, který obsahuje logiku TensorFlow.js pro zpracování a rozpoznávání obrázků.
model/: Složka obsahující předtrénovaný model (pokud používáme lokální model místo načítání z URL).

Nejprve vytvoříme základní HTML strukturu s možností nahrávání obrázků. Poté přidáme TensorFlow.js a logiku pro zpracování a rozpoznávání obrázků.

				
					<!DOCTYPE html>
<html>
<head>
    <title>Rozpoznávání obrázků s TensorFlow.js</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body data-rsssl=1>
    <h1>Rozpoznávač obrázků</h1>
    <input type="file" id="image-upload" accept="image/*">
    <button id="predict-button">Rozpoznat obrázek</button>
    <div id="prediction-result"></div>

    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
    <script src="script.js"></script>
</body>
</html>

Nyní přejdeme k souboru styles.css pro základní stylování a pak k script.js pro logiku rozpoznávání obrázků v TensorFlow.js.

Nejdříve styles.css:

				
					body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin-top: 50px;
}

#image-upload {
    margin: 20px 0;
}

#prediction-result {
    margin-top: 20px;
    font-size: 20px;
    color: blue;
}

A nyní script.js. Tento skript bude obsahovat kód pro načítání modelu TensorFlow.js, zpracování nahraného obrázku a zobrazení predikce. Pro tento příklad použijeme model MobileNet, který je široce používán pro rozpoznávání obrázků.

				
					let model;

window.onload = async () => {
    model = await tf.loadLayersModel('model/model.json');
    document.getElementById('predict-button').addEventListener('click', predictImage);
};

async function predictImage() {
    const imageUpload = document.getElementById('image-upload');
    const image = tf.browser.fromPixels(await getImageData(imageUpload));
    const resizedImage = tf.image.resizeBilinear(image, [224, 224]);
    const normalizedImage = resizedImage.div(255.0).expandDims();
    const predictions = await model.predict(normalizedImage).data();
    displayPrediction(predictions);
}

function getImageData(imageUpload) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = (event) => {
            const img = new Image();
            img.onload = () => resolve(img);
            img.onerror = reject;
            img.src = event.target.result;
        };
        reader.readAsDataURL(imageUpload.files[0]);
    });
}

function displayPrediction(predictions) {
    const predictionResult = document.getElementById('prediction-result');
    // Zde přidáme kód pro zobrazení výsledků predikce
    predictionResult.textContent = `Predikce: ${predictions}`;
}

Všimněte si, že v tomto kódu předpokládáme, že model a jeho váhy jsou uloženy ve složce model/. Tento model je třeba připravit a načíst z předem definovaného zdroje nebo URL.