My element action is only working once

Plugin builders
1

Hello friends! Sorry if it’s written incorrectly, but I’m using Google Translate.

I’m creating a plugin using Face API JS…

I’m calling an action of an element, which returns an asynchronous function.

When calling it for the first time, everything works normally, but when I call it for the second time, it doesn’t access the “attainedPlainText” variable.

Code:

Action Element
Action Element1071×548 38.5 KB

First Call
First Click

Second Call
Second Click

It restarts normally after I refresh the page but it only works once

2

Don’t use context.async. That’s all.

3

Hi @keith , thanks for replying

I have to use it to import the face api modules. Any suggestion?

4

Load scripts in the Headers section of your element plugin. You won’t be able to use “import”, just load the vanilla JS version of your package (find it on jsdelivr).

5

I tried, but modules are missing

image
image1360×768 85.1 KB

image
image1360×768 78.5 KB

6

I dunno. Load the model before attempting inference, like the error says? I’m not stackoverflow up in here.

7

Got it, thanks for the help. I’ll look on stackoverflow then. I thought this was a forum for us to help each other out, sorry to bother you.

1 Like
9

Ok! Tkz

10

I solved my problem with below code in header:

<script>    
async function ssd() {   
await faceapi.nets.ssdMobilenetv1.loadFromUri("https://cdn.jsdelivr.net/npm/@vladmandic/[email protected]/model/")
 }
 ssd()
</script>

After that I created an asyncronous function that I use when calling it, using “then” it returns the result.

function(instance, properties, context) {    
    const element = document.getElementById(properties.id_element)
    const img = element.querySelector('img');
    const imageAnonymous = new Image();
    imageAnonymous.src = img.getAttribute('src');
    imageAnonymous.crossOrigin = "Anonymous";
    imageAnonymous.width = img.width;
    imageAnonymous.height = img.height;


    async function receive() {
        let list = [];
        const detection = await faceapi.detectSingleFace(imageAnonymous).withFaceLandmarks().withFaceDescriptor();
        if (detection) {
            console.log(detection.descriptor);
            list.push(detection.descriptor);
            console.log(list);
        } else {
            console.log('No face detected');
        }
        return list;
    }

    receive().then((result) => {
        console.log(result);

        if (result.length > 0) {
            const faceDescriptorString = JSON.stringify(result[0]);
        
            instance.publishState('ID_Face1', faceDescriptorString);
        } else {
            console.log('No face detected');
        }
    });
}