[bot_animator]

[ 6/4/2018 update - check out the end of this thread for an improved replacement library: https://github.com/talkr-app/talkr-apng]

Hi Everyone,

I wanted to introduce a new javascript library ( https://github.com/talkr-app/gif-talkr ) that may be useful for animating text-to-speech enabled Chatbots on the web.  Here is a demo that will play an arbitrary TTS message back to you.  ( http://talkrapp.com/gifdemo/example.html)

The technique only requires a GIF file, but I hope you are pleasantly surprised by the quality of animations you can achieve.  You can see a library of sample GIF files here (http://imgur.com/a/NRZVQ) .  You could in theory use any GIF file of a talking character (see the github page for details), but ideally you can use a GIF file with a high quality animation and a special GIF extension that enables independent blink and eyebrow movements.  A future version of our iOS app talkr (http://talkrapp.com) will be able to export these GIF files.  As of now, you can only export movies from talkr which you would have to convert to a normal GIF without independent blink and eyebrow channels.

In any case, I welcome any feedback on the library or the app!  There should be nothing stopping you from bringing your chatbots to any platform that supports TTS in the browser (iOS, Android, Windows, OSX, etc)

[Freddy]

Hi there,

This is a nice system and I look forward to seeing the app being able to export the GIFs that botmasters will need.

In the meantime the example GIFs are still very usable as a bot avatar : http://elfscript.uk/chattygirl.html

What I found really cool was how convincing you made her without having to play with all that phoneme/viseme stuff.

I took the liberty of giving you a forum avatar

[8pla.net]

Freddy,

This library works with any GIF animation image.  A gifanim talking (mouth moving) and eyes blinking works best.

New Sample:  http://chatbot.altervista.org/giftts/moretesting.php

However for example, a gifanim of people dancing would vary following different user inputs.



Image Citation: Giphy.com

[Freddy]

I just see a static image there, no animation in Chrome.

She really thinks she can dance doesn't she 

[bot_animator]

I get the animation when I hit "Chat" on chrome on OSX.   That Rapunzel gif is a good one 8pla.net!  Also, that javascript TTS is a bit faster than the ones I've been using...I would definitely decrease the per-character estimate a tad (line 157 of example.js) from 50 to maybe 40 or so to get a better sync with that TTS. 

[Freddy]

Hmm tried it in FF and it did nothing either. Edge really didn't like it again. I think Chrome is up to date here, it should be.

[Freddy]

It was a little out of date, but after updating I just see a static image again.

Version 60.0.3112.78 (Official Build) (64-bit)

[8pla.net]

I just got it working under Chrome too now.

i removed some PHP I added for alpha testing to stop page caching.

Code

?r=<?=rand(111,999)?>

[Freddy]

That's got it 

Working fine now, really good choice of character, she looks crazy !

[8pla.net]

I would definitely decrease the per-character estimate a tad (line 157 of example.js) from 50 to maybe 40 or so to get a better sync with that TTS.

Thank you for your precious feedback.  I decreased the per-character estimate to luck number 38.

[8pla.net]

That's got it 

Working fine now, really good choice of character, she looks crazy !

Thank you Freddy.  It easily worked with several other GIF anims.  And when
it did not work for visemes (lip postures), the results were still fun to watch.
My suggestion is to try it with any of the many GIF anims you can find online.
This library actually works great with this little guy, (talking and blinking)... 

[bot_animator]

Just a quick update that I added blink/eyebrow idle options.  Also hooked it up to a API.AI here (my first experience with bot programming): https://talkrapp.com/gifdemo/bot/index.html

The demo works best on Windows/MAC using Chrome so you can use the speech recognition.  It also works on Android, but I could only get one English voice to work on my samsung galaxy tab.  (If anyone has an Android, especially non-samsung to try, I'd be interested to know what happens when you say "change voice".  Does the english voice change?)

Try these commands:

"Change avatar"
"Learn new response"
"Ask me about the presidents"
"Give me a word problem"
"Yes or no, will I become president one day?"

[Freddy]

Thanks for the update 

I got a message that you had updated it, but have not had a chance top play with it yet. I'll try to update the page I have with the new version.

Thank you 

[Freddy]

I had a play with this and whilst she blinks during idle time (which is great) I can't get the eyebrows to do the same. I noticed your link to her also does not have her eyebrows moving idly - so is that done yet and should I stop pulling my hair out now ?



This is in Chrome btw.

[Freddy]

With some further experiments I found that it would be useful to resize the avatar in the script somehow.

I was able to reduce the size of the avatar by hacking in some CSS onto the gif and the canvas, but this resulted in glitchy animation.

Of course I could probably solve this by using a gif editor, but I thought I would mention it.

Edit : yes this did the trick : https://ezgif.com

It's all very nice work though