-1

I want to change the HTML element, which the ID is D-image, and use it as a prediction model. I tried to change CSS but it won't let me save it. The only thing I want to do is change its CSS filter property and use a changed(means greyed) D-image element to predict. Here is my BODY HTML code

<div>Teachable Machine Image Model</div>
<button type="button" onclick="init()">Start</button>
<button type="button" onclick="predict()">predict</button>
<script class="jsbin" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="file-upload">
    <button class="file-upload-btn" type="button" onclick="$('.file-upload-input').trigger( 'click' )">Add Image</button>

    <div class="image-upload-wrap">
        <input class="file-upload-input" type='file' onchange="readURL(this);" accept="image/*" />
        <div class="drag-text">
            <h3>Drag and drop a file or select add Image</h3>
        </div>
    </div>
    <div class="file-upload-content">
        <img class="file-upload-image" id="D-image" src="#" alt="your image" />
        <div class="image-title-wrap">
            <button type="button" onclick="removeUpload()" class="remove-image">Remove
                <span class="image-title">Uploaded Image</span>
            </button>
        </div>
    </div>
</div>
<div id="webcam-container"></div>
<div id="label-container"></div>

Here is my original javascript code

         <script type="text/javascript">
    // More API functions here:
    // https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image
    // the link to your model provided by Teachable Machine export panel
    const URL = "https://teachablemachine.withgoogle.com/models/ca88ZGYrw/";
    let model, webcam, labelContainer, maxPredictions;
    // Load the image model and setup the webcam
    async function init() {
        const modelURL = URL + "model.json";
        const metadataURL = URL + "metadata.json";
        // load the model and metadata
        // Refer to tmImage.loadFromFiles() in the API to support files from a file picker
        // or files from your local hard drive
        // Note: the pose library adds "tmImage" object to your window (window.tmImage)
        model = await tmImage.load(modelURL, metadataURL);
        maxPredictions = model.getTotalClasses();
        labelContainer = document.getElementById("label-container");
        for (let i = 0; i < maxPredictions; i++) { // and class labels
            labelContainer.appendChild(document.createElement("div"));
        }
    }
    // run the webcam image through the image model
    async function predict() {
        // predict can take in an image, video or canvas html element
        var image = document.getElementById("D-image")
        const prediction = await model.predict(image, false);
        for (let i = 0; i < maxPredictions; i++) {
            const classPrediction =
                prediction[i].className + ": " + prediction[i].probability.toFixed(2);
            labelContainer.childNodes[i].innerHTML = classPrediction;
        }
    }
</script>

I also tried this but when I do prediction it won't let me use the changed D-image element.

        <script type="text/javascript">
    // More API functions here:
    // https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image
    // the link to your model provided by Teachable Machine export panel
    const URL = "https://teachablemachine.withgoogle.com/models/ca88ZGYrw/";
    let model, webcam, labelContainer, maxPredictions;
    // Load the image model and setup the webcam
    async function init() {
        const modelURL = URL + "model.json";
        const metadataURL = URL + "metadata.json";
        // load the model and metadata
        // Refer to tmImage.loadFromFiles() in the API to support files from a file picker
        // or files from your local hard drive
        // Note: the pose library adds "tmImage" object to your window (window.tmImage)
        model = await tmImage.load(modelURL, metadataURL);
        maxPredictions = model.getTotalClasses();
        labelContainer = document.getElementById("label-container");
        for (let i = 0; i < maxPredictions; i++) { // and class labels
            labelContainer.appendChild(document.createElement("div"));
        }
    }
    // run the webcam image through the image model
    async function predict() {
        // predict can take in an image, video or canvas html element
        var image = document.getElementById("D-image").style.webkitFilter = "grayscale(100%)";
        const prediction = await model.predict(image, false);
        for (let i = 0; i < maxPredictions; i++) {
            const classPrediction =
                prediction[i].className + ": " + prediction[i].probability.toFixed(2);
            labelContainer.childNodes[i].innerHTML = classPrediction;
        }
    }
</script>

Is there any way to save changed CSS property for the next javascript code(execution)?

Jihyung Kim
  • 11
  • 2

1 Answers1

0

CSS does not modify the image data so you can't use it to pass a modified image to a JS function. The resulting image data after CSS has been applied is not available to your JS code at all. All you can access is the original image data.

BTW, your code causes the image variable to be equal to the string "grayscale(100%)" because the result of any assignment expression is the value assigned, so document.getElementById("D-image").style.webkitFilter = "grayscale(100%)" returns "grayscale(100%)" , then you are assigning that result to your variable instead of the image element. That is why it breaks when you do that.

You have to modify the image data. There are ways to get the raw image data

Once you have that data, you have to do some processing to make it grayscale, CSS cannot serve as a shortcut here. Maybe this will help.

After you have modified the image data, you have to turn it into a format your function can accept. It looks like it accepts HTML elements so figure out how to change it back into an image element and you should be good.

Chris Rollins
  • 550
  • 3
  • 9