Добавление голосового помощника в приложения React с помощью Alan AI

Пользовались ли вы Cortana? Является ли Siri вашим лучшим другом? Это ваш лучший помощник, когда вы сталкиваетесь с препятствиями?💭

Если да, то вы знаете, как развитие голосовых помощников облегчило нашу жизнь, поскольку это требует минимальных усилий. Согласно прогнозам, к 2024 году количество цифровых голосовых помощников достигнет 8,4 миллиарда единиц, что превышает население Земли, а 31% пользователей смартфонов во всем мире используют голосовой поиск хотя бы раз в неделю.

Голосовой помощник — это цифровой ассистент, который использует распознавание голоса, алгоритмы обработки языка и синтез голоса для прослушивания определенных голосовых команд и возвращения соответствующей информации или выполнения определенных функций по запросу пользователя.

Голосовые помощники встроены во многие устройства, которыми мы пользуемся ежедневно, такие как мобильные телефоны, компьютеры и умные колонки.

Хотели бы вы иметь голосового помощника и в своих приложениях? 💬

Возможно, вы думаете, что для того, чтобы добавить интеллектуальный голосовой интерфейс в ваше приложение, вам придется углубиться в машинное обучение и обработку естественного языка, что займет много времени.

Здесь вам на помощь приходит Alan AI. Alan AI — это платформа B2B Voice AI для разработчиков, позволяющая развертывать и управлять голосовыми интерфейсами для корпоративных приложений. Она предоставляет бэкэнд на основе ИИ в качестве сервисного инструмента для добавления разговорного ИИ в ваши приложения.

Он также распознает контекст пользователя и изучает пользовательский интерфейс вашего приложения для разработки рабочих процессов и обучается лексике вашего приложения.

Благодаря удобной для разработчиков консоли и документации, любому человеку будет проще интегрировать его в свое приложение.

Итак, давайте интегрируем голосовой помощник Alan AI в React App.🎉.

Что мы будем создавать? 🤔

Мы будем создавать приложение QuoteBook 📚 React с интеграцией голосового помощника Alan AI. В этом проекте QuoteBook будут просто цитаты, и мы настроим голосового помощника, чтобы он говорил нам цитаты конкретного спикера. Это будет выглядеть примерно так.

Настройка проекта

  • Создайте react-приложение с помощью команды npx create-react-app.
npx create-react-app quoteBook
cd quoteBook
Войдите в полноэкранный режим Выйдите из полноэкранного режима
  • Запустите приложение react с помощью команды npm start.
npm start
Войдите в полноэкранный режим Выйдите из полноэкранного режима
  • Создайте компоненты, структура файлов должна быть такой,

  • Теперь установите Alan AI Web SDK в приложение, мы будем использовать пакет npm для установки зависимости.
 npm install @alan-ai/alan-sdk-web 
Войдите в полноэкранный режим Выйдите из полноэкранного режима
  • Импортируйте alanBtn в ваш компонент React
import alanBtn from "@alan-ai/alan-sdk-web";
Войдите в полноэкранный режим Выйти из полноэкранного режима
  • Теперь давайте добавим код в компоненты и App.jsx

App.jsx

import React, { useEffect } from "react";
import Header from "./Header";
import Footer from "./Footer";
import Quote from "./Quote";
import { Quotes } from "./Quotes";
import alanBtn from "@alan-ai/alan-sdk-web";

function App() {

  return (
    <div>
      <Header />
      {Quotes.map((quoteItem, index) => {
        return (
          <Quote
            key={index}
            id={index}
            quote={quoteItem.quote}
            author={quoteItem.author}
          />
        );
      })}
      <Footer />
    </div>
  );
}

export default App;
Войти в полноэкранный режим Выйти из полноэкранного режима

Header.jsx

import React from "react";

function Header() {
  return (
    <header>
      <h1>QuoteBook</h1>
    </header>
  );
}

export default Header;
Вход в полноэкранный режим Выйти из полноэкранного режима

Footer.jsx

import React from "react";

function Footer() {
  const year = new Date().getFullYear();
  return (
    <footer>
      <p>Copyright ⓒ {year}</p>
    </footer>
  );
}

export default Footer;
Войти в полноэкранный режим Выйти из полноэкранного режима

Цитата.jsx

import React from "react";

function Quote(props) {

  return (
    <div className="quote">
      <div className="box">
        <h1>{props.quote}</h1>
        <p>{props.author}</p>
      </div>
    </div>
  );
}

export default Quote;
Войти в полноэкранный режим Выйти из полноэкранного режима
  • Теперь давайте добавим немного контента и стилей

Quotes.js

export const Quotes = [
    {
        id: 1,
        quote: "“The purpose of our lives is to be happy.”",
        author: "— Dalai Lama"
    },
    {
        id: 2,
        quote: "“Life is what happens when you’re busy making other plans.” ",
        author: "— John Lennon"
    },
    {
        id: 3,
        quote: "“Get busy living or get busy dying.” ",
        author: "— Stephen King"
    },
    {
        id: 4,
        quote: "“Many of life’s failures are people who did not realize how close they were to success when they gave up.”",
        author: "– Thomas A. Edison"
    },
    {
        id: 5,
        quote: "“If life were predictable it would cease to be life, and be without flavor.” ",
        author: "– Eleanor Roosevelt"
    },
    {
        id: 6,
        quote: "“The whole secret of a successful life is to find out what is one’s destiny to do, and then do it.” ",
        author: "– Henry Ford"
    },
    {
        id: 7,
        quote: " “In order to write about life first you must live it.” ",
        author: "– Ernest Hemingway"
    },
    {
        id: 8,
        quote: "“The big lesson in life, baby, is never be scared of anyone or anything.”",
        author: "– Frank Sinatra"
    },
    {
        id: 9,
        quote: " “Life is a succession of lessons which must be lived to be understood.”",
        author: " — Helen Keller"
    },
    {
        id: 10,
        quote: "“Be yourself; everyone else is already taken.”",
        author: "― Oscar Wilde"
    },

];
Войти в полноэкранный режим Выйти из полноэкранного режима

Стили.css

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  /* overflow-y: hidden; */
}
html {
  font-family: "Montserrat", sans-serif;
}
body {
  background: #BDE6F1;
  padding: 0 16px;
  background-image: url("https://www.transparenttextures.com/patterns/always-grey.png");;
}

header {
  background-color: #0AA1DD;
  margin: auto -16px;
  padding: 16px 32px;
  text-align: center;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}

header h1 {
  color: #fff;
  font-family: "McLaren", cursive;
  font-weight: 200;
}

footer {
  position: absolute;
  text-align: center;
  bottom: 0;
  width: 100%;
  height: 2.5rem;
}

footer p {
  color: #ccc;
}
.quote {
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 2px 5px #ccc;
  padding: 30px 25px;
  width: 240px;
  height: 240px;
  margin: 20px;
  float: left;
}
.quote div{
  margin: auto;
}
.quote h1 {
  text-align: center;
  font-size: 1.1em;
  margin-bottom: 6px;
}
.quote p {
  text-align: center;
  font-size: 1em;
  margin-bottom: 10px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
Войти в полноэкранный режим Выход из полноэкранного режима
  • Добавьте alanBtn в App.js через useEffect.
useEffect(() => {
  alanBtn({
    key: 'YOUR_KEY_FROM_ALAN_STUDIO_HERE',
    onCommand: (commandData) => {
      if (commandData.command === 'go:back') {
        // Call the client code that will react to the received command
      }
    }
  });
}, []);
Войти в полноэкранный режим Выйдите из полноэкранного режима
  • Генерация ключа из Alan Studio

Чтобы интегрировать голосовой помощник Alan AI в ваше приложение, потребуется ключ. Чтобы сгенерировать ключ, перейдите на сайт Alan Studio и зарегистрируйтесь. Вы будете перенаправлены на страницу, которая будет выглядеть следующим образом:

Нажмите на кнопку Создать голосового помощника и создайте пустой проект, дав ему имя, для этого проекта назовите его QuoteBook:

В строке меню сверху есть вкладка Integrations, нажмите на нее. Вы найдете ваш Alan SDK Key, скопируйте его и вставьте в ваш код над комментарием.

До сих пор вы интегрировали свой проект с голосовым помощником Alan AI. Теперь давайте добавим несколько скриптов для настройки голосового помощника в зависимости от приложения.

intent('What does this app do?', 'What can I do here?', 
      reply('This app is your quote book, it keeps a collection of your favourite quotes'));

const CATEGORIES = ['dalai lama','john lennon','stephen king','thomas edison','eleanor roosevelt','henry ford','ernest hemingway','frank sinatra','helen keller','oscar wilde'];
const CATEGORIES_INTENT = `${CATEGORIES.map((category) => `${category}~${category}`).join('|')}`;
intent(`(go to|show|open) (the|) $(C~ ${CATEGORIES_INTENT})`,(p)=>{
        p.play({command:'goto',category:p.C.value.toLowerCase()})
})

intent(`(show|what is|tell me about|what's|what are|what're|read) (the|) $(C~ ${CATEGORIES_INTENT})`,(p)=>{
    if(p.C.value.toLowerCase()=='dalai lama'){
        p.play('The purpose of our lives is to be happy.')
    } else if(p.C.value.toLowerCase()=='john lennon'){
        p.play('Life is what happens when you're busy making other plans.')
    }else if(p.C.value.toLowerCase()=='stephen king'){
        p.play('Get busy living or get busy dying.')
    }else if(p.C.value.toLowerCase()=='thomas edison'){
        p.play('Many of life's failures are people who did not realize how close they were to success when they gave up.')
    }else if(p.C.value.toLowerCase()=='eleanor roosevelt'){
        p.play('If life were predictable it would cease to be life, and be without flavor.')
    }else if(p.C.value.toLowerCase()=='henry ford'){
        p.play('The whole secret of a successful life is to find out what is one's destiny to do, and then do it.')
    }else if(p.C.value.toLowerCase()=='ernest hemingway'){
        p.play('In order to write about life first you must live it.')
    }else if(p.C.value.toLowerCase()=='frank sinatra'){
        p.play('The big lesson in life, baby, is never be scared of anyone or anything.')
    }else if(p.C.value.toLowerCase()=='helen keller'){
        p.play('Life is a succession of lessons which must be lived to be understood.')
    }else if(p.C.value.toLowerCase()=='oscar wilde'){
        p.play('Be yourself; everyone else is already taken.')
    }
})

intent('(go|) back', (p) => {
    p.play('Sure, nice talking to you!');
})

Вход в полноэкранный режим Выход из полноэкранного режима

В этом скрипте мы наделяем помощника тремя пользовательскими функциями:

  1. Отвечать на вопросы, например, что делает это приложение?
  2. Подсказывать цитату по имени автора.
  3. Если вы скажете «пока», он скажет «приятно было пообщаться!

Вот так вы можете добавить простой голосовой помощник в ваше приложение React.

После этого вы можете протестировать помощника и в дальнейшем настроить его, добавив в него дополнительные функции по своему вкусу.

Заключение

Голосовые помощники могут быть отличным инструментом для интеграции и игры с вашими приложениями. Создание этого приложения QuoteBook React было информативным и полезным. Не стесняйтесь обращаться ко всему исходному коду здесь и изучать документацию Alan, чтобы понять и развить ваше приложение.
Хорошего дня! 🎇

Оцените статью
Procodings.ru
Добавить комментарий