HTML

HTML I Have made a project using HTML and teachable machine in which I Had trained the AI Model to understand few book names by showing book's cover to it and the html will give the summary of the corresponding Book When the book's cover is shown. When I run this I am only getting "Teachable Machine Image Model" in the body. I am a beginner and What should I do?
`<!DOCTYPE html>

Teachable Machine Book Summary
<br> body { font-family: Arial, sans-serif; }<br> #summary-container { margin-top: 20px; }<br>

Teachable Machine Image Model

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@latest/dist/teachablemachine-image.min.js"></script>
<script type="text/javascript">
    const URL = "./my_model/";
    let model, webcam, labelContainer, maxPredictions;

    // Pre-recorded book summaries
    const bookSummaries = {
        "Ikigai": "Ikigai: The Japanese concept of finding purpose in life. This book explores how to live a fulfilling life by aligning passion, mission, vocation, and profession.",
        "The Last Bow of Sherlock Holmes": "The final adventure of Sherlock Holmes, filled with intrigue, danger, and the master detective’s legendary brilliance. The perfect conclusion to the Sherlock Holmes saga.",
        "Death Note": "A psychological thriller about a young man who discovers a notebook with deadly powers, and the moral dilemma he faces as he decides who deserves to die.",
        "Puzzles to Puzzle You": "An engaging collection of puzzles by Shakuntala Devi, designed to challenge your logic, mathematical, and lateral thinking abilities.",
        "The Alchemist": "A philosophical novel by Paulo Coelho about a shepherd’s journey in search of his personal legend, filled with wisdom on pursuing one’s dreams.",
        "The Little Prince": "A heartwarming tale of a young prince’s journey across planets, reflecting on life, love, and human nature through his conversations with the inhabitants."
    };

    // Initialize the model and webcam as soon as the page loads
    window.onload = async function() {
        const modelURL = URL + "model.json";
        const metadataURL = URL + "metadata.json";

        model = await tmImage.load(modelURL, metadataURL);
        maxPredictions = model.getTotalClasses();

        const flip = true;
        webcam = new tmImage.Webcam(200, 200, flip);
        await webcam.setup();
        await webcam.play();
        window.requestAnimationFrame(loop);

        document.getElementById("webcam-container").appendChild(webcam.canvas);
        labelContainer = document.getElementById("label-container");
        for (let i = 0; i < maxPredictions; i++) {
            labelContainer.appendChild(document.createElement("div"));
        }
    };

    async function loop() {
        webcam.update();
        await predict();
        window.requestAnimationFrame(loop);
    }

    async function predict() {
        const prediction = await model.predict(webcam.canvas);
        let highestPrediction = prediction[0];
        for (let i = 1; i < maxPredictions; i++) {
            if (prediction[i].probability > highestPrediction.probability) {
                highestPrediction = prediction[i];
            }
        }

        // Display the prediction label
        const predictionLabel = highestPrediction.className;
        labelContainer.childNodes[0].innerHTML = "Detected: " + predictionLabel;

        // Display the book summary
        const summaryContainer = document.getElementById("summary-container");
        const summary = bookSummaries[predictionLabel] || "Summary not available.";
        summaryContainer.innerHTML = `<strong>Summary:</strong> ${summary}`;
    }
</script>