Hello guys,

This is my first module !
Well I give most of the credit to @sean who created the code as i’m not a dev at all .

What I did is taking MMM-TriggerNotification and MMM-HTMLBox, and merge those 2 modules in one to create mine based on the idea I had.

https://github.com/ejay-ibm/MMM-AI

MMM-AI

MMM-AI is a simple module based on a mix of MMM-NotificationTrigger & MMM-HTMLBOX from eouia that allow to have animation of ‘AI’ kind when the assistant ( Alexa / MMM-Mk2assistant ) is in standby mode ( waiting for user instruction) or talking mode ( when assistant is replying ) triggered by Notification sent by these modules.

Screenshot

    Standby animation                     Talking animation

Full gif here :
https://github.com/ejay-ibm/MMM-AI/blob/master/jarvis-standby2.gif
https://github.com/ejay-ibm/MMM-AI/blob/master/jarvis-talk2.gif

Installation

In the MagicMirror/modules directory run :

git clone https://github.com/ejay-ibm/MMM-AI.git

Configuration Sample

{
      module: "MMM-AI",
      position: "top_center",
      config: {
        width: "300px",
        height: "300px",
        refresh_interval_sec: 0, // you should not refresh, because content will be back to default value.
        content: `<img id="MY_ANIMATION" src="modules/MMM-AI/jarvis-standby2.gif"/>`,
        triggers: [
          {
            trigger: "HOTWORD_RESUME", // HOTWORD_LISTENING if you use MMM-HOTWORD  or HOTWORD_RESUME if you use MMM-AssistantMk2
            fires: [
              {
                fire: "standby_Image",
                payload: payload => {
                  var img = document.getElementById("MY_ANIMATION");
                  img.src = "modules/MMM-AI/jarvis-standby2.gif";
                  return payload;
                }
              }
            ]
          },
		{
            trigger: "ASSISTANT_UNDERSTOOD", // HOTWORD_SLEEPING if you use MMM-HOTWORD  or HOTWORD_PAUSE if you use MMM-AssistantMk2
            fires: [
              {
                fire: "Talk_Image",
                payload: payload => {
                  var img = document.getElementById("MY_ANIMATION");
                  img.src = "modules/MMM-AI/jarvis-talk2.gif";
                  return payload;
                }
              }
            ]
          }
        ]
      }
    },

Additional Info

please make sure you are up to date on the Mk2 assistant module for this module to work as expected
All other configuration sample from https://github.com/eouia/MMM-HTMLBOX & https://github.com/eouia/MMM-NotificationTrigger are applicable to this module.

Thanks again to Sean : https://github.com/eouia/ who have created this code that I have merged for this module purpose.
Animated images are created by me using crazy talk and Photoshop I will work to create additional ones.

If you have any idea on standby/talk animation I can create for this module feel free to propose them !
I’m planning to make an ‘HAL’ one
based on this image :

Ejay

@teitlebot Hey the feature has been implemented,
Sorry i’m crawling under work and forgot to update ( I’ll update my repo in the week . )
You just need to update your Mk2 assisant ( Git Pull from MMM-Assistant folder)
@Sean the developer gently added new notification called ASSISTANT_UNDERSTOOD . Use that one to trigger the talking effect .

That is my config.js sample :

module: "MMM-AI",
      position: "top_center",
      config: {
        width: "300px",
        height: "400px",
        refresh_interval_sec: 0, // you should not refresh, because content will be back to default value.
        content: `<img id="MY_ANIMATION" src="modules/MMM-AI/jarvis-standby2.gif"/>`,
        triggers: [
          {
            trigger: "HOTWORD_RESUME", 
            fires: [
              {
                fire: "standby_Image",
                payload: payload => {
                  var img = document.getElementById("MY_ANIMATION");
                  img.src = "modules/MMM-AI/jarvis-standby2.gif";
                  return payload;
                }
              }
            ]

          },
                   {
            trigger: "HOTWORD_PAUSE",
            fires: [
              {
                fire: "VOLUME_STORE",
                //fire: "VOLUME_MUTE",
                exec: "amixer set Master 10% -q"
              }

            ]

          },
  
        {
            trigger: "ASSISTANT_UNDERSTOOD", 
            fires: [
              {
                fire: "VOLUME_RESTORE",
                payload: payload => {
                  var img = document.getElementById("MY_ANIMATION");
                  img.src = "modules/MMM-AI/jarvis-talk2.gif";
                  return payload;
                }
              }
            ]
          }
        ]
      }
    },

Ejay

Hi,

From the doc here:

https://github.com/MichMich/MagicMirror/wiki/Configuring-the-Raspberry-Pi

Autohiding the Mouse Pointer
Install unclutter:

sudo apt-get install unclutter
You can create an .xinitrc script to run the tool.
See https://wiki.archlinux.org/index.php/Unclutter

But a simpler option is to add a line to the end of the file:

$ nano ~/.config/lxsession/LXDE-pi/autostart
...
@unclutter -display :0 -idle 3 -root -noevents
This will add a 3 second delay, before the pointer disappears from the screen when not using it.

Hope this helps

Ejay

@Sean @teitlebot
Might sound stupid and not feasible at first but this is how I would do the trick.
1st I would use a Notification from input ( camera , pir sensor)
for PIR sensor it would be PRESENCE_DETECTED .
Then I would trigger a command and in this command use the repeat after me function .
So you can get voice output directly from the assistant saying “hello” when presence is detected .
Then for facial recognition it’s just a matter of condition and what notification to send. for each notification a different repat after me.

Does it make sense?

Ejay

@teitlebot Hi would do it from photophop as part of the animation . But their’s maybe a way to do it in javascript but that would need some additional implementation in the modules .

Working with the gif is more flexible in my taste .

Ejay

@bibi Hi,
I would definitely recommend Mk2assistant + Hotword module.
Ejay

@zdenek Very nice looking and result.

As often in mirror showcase, the back is not shown ( yes that’s often the ugly part as well I know :) ) but I think it is interesting to see how all hardware are implemented in the back .

Would you mind to share some pictures of the back ?

Thanks

@F17MC @Cr4z33
I don’t think the issue is with the module but with what the assistant return to the module .

the module is expecting something like “”(open.spotify.com - https://open.spotify.com/artist/2Gkz5N7rWiCE3jlCgsw1yp""

So i’m not getting why your assistant doesn’t understand what to search for.

I’ll continue digging

Ejay

@boblazer
I tried this as well and failed the rendering was not good( at least to my taste )
I would recommend to go for a glass and apply the film on it.
My method:
Clean the glass with a window clearer product and use ( sorry for my english) a dedicated glass cleaner napkin to avoid dust at the maximum.
again to avoid any dust use a vacuum to have your glass 100% clean
Then with a sprayer, put inside some water and a drop of soap.
Spray on your glass and then apply the film starting at the bottom and evacuate the water while you progress developing the film.
you shouldn’t get any air bubble by doing this way .

Note : do not cut the film on edge once it is done leave a few millimeters on each side and let it dry for a couple of days . Once dry you can cut the edge of the film to fit your glass.

Hope it helps .

Ejay