yining1023 / styleTransfer_spell

Style Transfer example with ml5.js, training the model with Spell.run
48 stars 19 forks source link

Adding options creates an error #2

Closed mwweinberg closed 6 years ago

mwweinberg commented 6 years ago

I apologize that I'm not entirely sure what etiquette is here, so I encourage you to tell me that this is beyond the scope of an issue on the tutorial and point me off towards stackoverflow. However, it seemed like it was close enough to the demo that it was at least worth asking.

I'm trying to set up a version of the demo where the user can choose between two models. I created two buttons, moved the style.transfer(gotResult); into a function tied to each button, and gave it a shot.

There is now a fuchun button in the setup() function:

fuchunButton = createButton('Fuchun');
fuchunButton.mousePressed(fuchunPress);

a fuchunPress() function that it triggers

function fuchunPress() {
    styleFuchun.transfer(gotResultFuchun);
}

and a got ResultFuchun() function that is activated

function gotResultFuchun(err, img) {
    //adds the atribute of 'src' to the object resultImg
    resultImg.attribute('src', img.src);
    //keeps doing the transfer
    style.transfer(gotResultFuchun);
}

This works for the first frame (amazing!). Unfortunately, at that point it kicks up an error:

sketch.js:69 Uncaught (in promise) TypeError: Cannot read property 'src' of undefined
    at gotResultFuchun (sketch.js:69)
    at callcallback.js:14

Is there something obvious that I'm missing? I am a very bad python programmer and a very close to totally green javascript programmer, so I apologize if it is something that I should be seeing.

The repo is here if that is any help: https://github.com/mwweinberg/StyleTransferSwitcher

thank you!

yining1023 commented 6 years ago

I found a small thing in your code: In line 71, instead of

style.transfer(gotResultFuchun);

it should be:

styleFuchun.transfer(gotResultFuchun);

style would be undefined, it should be styleFuchun. Same with line 79. Then the code should work fine.

Another small tip is for function modelLoaded(), it's better to make sure that both models are loaded, then start transfering. Inside the function modelLoaded(), you can do:

if (yourstyle1.ready && yourstyle2.ready) {
   select('#status').html('Robots Assembled');
}
mwweinberg commented 6 years ago

Thank you so much! This is very helpful and I am super excited to start building this out with a lot of options. I also promise to stop using issues for tech support. Thank you again for this great demo and for helping me get this rolling.