Create a custom Smart Assistant device using Web Technologies

By Raddy in CSS JavaScript ·

This article is still in progress.

Have you ever wondered if you could make your own privacy-based custom Assistant device that is tailored to your needs unlike Alexa or Google Assistant? Well, I did and I figured out that it is actually fairly easy to do using web technologies and a few API’s.

So let’s start with what is a smart assistant device and what do they actually do? Let’s have a look at the definition from Wikipedia.

An automated personal assistant or an Intelligent Personal Assistant is a mobile software agent that can perform tasks, or services, on behalf of an individual based on a combination of user input, location awareness, and the ability to access information from a variety of online sources (such as weather conditions, traffic congestion, news, stock prices, user schedules, retail prices, etc.).

Wikipedia

Popular smart assistants include Google Assistant, Alexa, Siri and the new Celia from Huawei. They are actually fairly cheap to buy now.

You can support the blog and YouTube channel and buy thru my links!

In this blog post, we will look at how we can create our own custom assistant using web technologies. We will be mainly using HTML, CSS, and JavaScript to build the project and to make the device smart, we will throw in some API’s such as Weather, Google – YouTube and Unsplash.

If you don’t like reading you are in luck because I’ve already recorded everything on a video tutorial for you to watch.

Full Video – 1h 38min

First of all, before we begin, let’s have a look at a demo video of how our smart assistant will work. Obviously you can customize yours the way you want and add the features that are helpful to you.

Demo

YouTube API:
https://console.developers.google.com/apis/library/

Open Weather API:
https://openweathermap.org/api

Unsplash API:
https://unsplash.com/developers

Odometer JS:
https://github.hubspot.com/odometer/docs/welcome/

Let’s start with the HTML. Basically as explained in the video tutorial each section will act as a individual page. You can also make separate documents for each page if you like, but my application is fairly small so this is a good way of doing it.

I’ve included Odometer library files to make the YouTube API counter spin. Annyang is the speech recognition library that i will be using.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gorilla Hub</title>
    <link rel="stylesheet" href="css/styles.css">
    <link href="https://fonts.googleapis.com/css?family=Work+Sans:400,700&display=swap" rel="stylesheet"> 
    <link rel="stylesheet" href="css/odometer-theme-default.css">
    <link rel="stylesheet" href="css/owfont-regular.min.css">
</head>
<body>
    
    <div class="wrapper">

        <a name="anchorHome"></a>
        <section id="home">
            <!-- <div class="testlink"><a href="#anchorWeather">Go Weather</a></div> -->
            <div id="time">00:00</div>
            <div id="notifications">Notifications</div>
            <div id="demo">Say "Gorilla Hub show weather..."</div>
            <div id="subcount">
                <div id="subcount__title">YouTube Subscribers</div>
                <div id="subcount__number" class="odometer">0000</div>
            </div>
        </section>

        <a name="anchorWeather"></a>
        <section id="weather">
            <!-- <div class="testlink"><a href="#anchorHome">Go Home</a></div> -->
            <div id="wheaterstuff">
                <div class="weather__icon owf"></div>
                <div class="weather__title">Weather</div> 
            </div>
        </section>
    </div> 
    
    <script src="js/odometer.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/annyang/2.6.1/annyang.min.js"></script>
    <script src="js/script.js"></script>
</body>
</html>

CSS

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    font-family: 'Work Sans', sans-serif;
    background-color: bisque;
    background-image: url("../img/sf1.jpg");
    background-size: cover;
    color: #fff;
}

.wrapper {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    scroll-behavior: smooth; 
}

section {
    position: relative;
    padding: 1em;
    width: 100vw;
    height: 100vh;
    font-size: 3em;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    grid-template: "a"
                   "b"
                   "c";
}

#time {
    grid-area: c;
    justify-self: left;
    align-self: end;
    line-height: 0.7;
    font-weight: 700;
}

#notifications {
    grid-area: a;
    justify-self: end;
    font-size: 0.5em;
}

#demo {
    grid-area: c;
    justify-self: end;
    align-self: end;
    font-size: 0.5em;
    font-style: italic;
    opacity: 0.6;
}

#subcount {
    grid-area: b;
    justify-self: center;
    align-self: center;
    text-align: center;
}

#subcount #subcount__title {
    font-size: 0.5em;
}

#subcount #subcount__number {
    display: block;
}

#weather {
    background-size: cover;
}
#wheaterstuff {
    grid-area: b;
    justify-self: center;
    align-self: center;
    text-align: center;
    text-transform: capitalize;
}

.testlink {
    grid-area: a;
    justify-content: start;
    font-size: 0.5em;
}


@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}


@keyframes fadeIn {
    0% {
        display: block;
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

And here is the speech recognition code. Create a file called script.js and include that file in your js folder. I’ve also left the language settings for you.

if (annyang) {
    console.log("We have annyang");

    // annyang.setLanguage('bg');

    var commands = {
        'Gorilla Hub show home' : home,
        'show home' : home,
        'Gorilla Hub show weather' : weather,
        'show weather' : weather

        // 'първа страница' : home,
        // 'време' : weather
    }


    function home() {
        console.log("Home");
        location.hash = "anchorHome";
    }

    function weather(){
        console.log("Weather");
        location.hash = "anchorWeather";
    }

    // Add Commands
    annyang.addCommands(commands);

    // Start listening
    annyang.start();

}

If you have copied the code and included all files required, you should by now have a voice command device fully working.

In the next few articles, we will look at how to do the YouTube Subscriptions counter and how to get the weather from Open Weather API.

Other affiliate Links:

7″ IPS TOUCH SCREEN
https://amzn.to/3aNUAl5

RASPBERRY PI 3 Model B+
https://amzn.to/2xWGUpm

NEW RASPBERRY PI 4 MODELL B
https://amzn.to/2wYtZmH

Leave a Reply

Your email address will not be published. Required fields are marked *