Побудуйте AI-Powered ChatBot

Feb 2, 2026

Як

An illustration showing an android with an electronic brain in front of a globe marked with symbols indicated technological advancement, such as binary code, molecules and communications relays.

Штучний інтелект (AI) дозволяє нам створювати нові способи перегляду існуючих проблем, від переосмислення навколишнього середовища до того, як ми дізнаємося. Ваші проекти - чи додатки, веб-сайти або ігри - можуть використовувати AI, щоб зробити їх більш залученням, легше використовувати та мати більш цінних результатів. Одним з таких методів передбачає створення природного мови chatbot, щоб допомогти користувачам взаємодіяти з вашим сайтом.

Щоб створити свій перший ChatBot, ми будемо використовувати новий інструмент діалогового потоку Google. Він використовує потужне машинобудування, а також мову до тексту. Він може бути включений прямо на ваш веб-сайт як віджет або налаштування до ваших потреб.

Якщо ви перебуваєте у процесі планування нового сайту, вам знадобиться поради щодо всього від ідеалу Веб-будівельник до якої веб хостинг Служба вибрати, тому перевірте наші гіди. Створення нової системи дизайну? Збережіть його надійно в хмара зберігання Так що вона доступна для всієї вашої команди. Тепер на тому, як створити Chatbot ...

01. Створіть обліковий запис

Йти до dialogflow.com і створіть свій обліковий запис. Увійдіть і згоден з дозволами, щоб увімкнути діалог, щоб мати доступ до вашого облікового запису.

02. Створіть агент

DialogForth використовує термін "агент", щоб представляти екземпляри вашого AI. Подумайте про агенту як віртуальний інтелект, який ви створюєте. Ви могли б мати багато агентів, які працюють для вас, кожен з власним особистістю та цілями.

Натисніть кнопку "Створити агент" та введіть ім'я для вашого агента: "HAL 9000".

03. Створіть намір

По-перше, потрібно створити намір. Ми визначаємо "намір" входів користувача. Натисніть "Створити намір" і назвати його "відкрити двері". Натисніть "Зберегти".

04. Потягніть AI за цей намір

An image showing the Google Dialogflow interface – in the box that's marked 'USER SAYS', it reads 'open the door hal' and in the box marked 'DEFAULT RESPONSE', it reads 'Sorry Dave. I can't do that now'. — Навчати АІ для наміру, надаючи фрази, які користувач може використовувати

Потягніть AI для цього наміру, надаючи фрази, які користувач може використовувати. NLP AI буде використовувати ці та отримані варіанти для підготовки агента. Додайте наступні тренувальні фрази в вікні "Навчальні фрази" та додайте стільки власних, скільки вам подобається:

"Відкрийте двері підлоги, Хал".
"Відкрийте двері".
"Дозвольте мені, Хал!"

05. Додати відповіді

Далі потрібно додати деякі відповіді, з якими реагуватиме агент. Ви вводите ці у вікні "відповіді". Спробуйте подібне до цього:

- Я боюся, що я не можу це зробити, Дейв.
- Я не можу це зробити.

Потім натисніть "Додати відповіді" та "зберегти" у верхній частині. Ви побачите сповіщення про те, що агент навчається, а потім він готовий.

06. Випробування ЧатБот

На правій частині екрана є інструмент тестування. CHATBOT буде використовувати службу мовлення Google, щоб перекласти свій голос у текст, якщо ви спробуєте це. Ви повинні побачити результати вашого запиту та відповіді агент AI вибраний. Дуже круто!

07. Створіть та використовуйте суб'єкт господарювання

Суб'єкти - це поняття, які можна визначити та повторно використовуватись у відповідях агента як змінні. Давайте тренувати AI, щоб зрозуміти, коли користувач виражає емоції, то використовуйте це у відповідь користувачеві.

У лівому меню натисніть "Організації". Введіть "емоції" для назви вашого нового сутності. Зберігайте перевірку "визначити синоніми". Клацніть у таблиці нижче і введіть "сердитий" як першу емоцію. Потім клацніть праворуч від того, щоб додати такі синоніми, як "божевільний", "засмучений", і так далі. Потім додайте інший запис для "наляканих" і використовуйте синоніми "боїться", "налякані" та ін., Що вам подобається. Натисніть "Зберегти", коли це зроблено.

Це тепер навчив агента, щоб зрозуміти, що "сердитий" і "зляканий" - це емоції, який користувач може спілкуватися. Всі ці синоніми є варіаціями, які можуть виникнути. AI буде генерувати деякі.

08. Створіть новий намір

Тепер ми збираємося створити новий намір використовувати "Емоційне", яку ми створили. Зателефонуйте до цього намірів "Емоції" та натисніть "Зберегти".

Далі додати нові тренувальні фрази, такі як "Ти лякаєш мене", "Ти змушує мене з розуму", і "Я дуже сердиться", використовуючи варіанти сердитого та страшного ключових слів. Це буде навчати агента, щоб зрозуміти різні способи, щоб користувач може фразувати цю емоційну заяву.

Ви помітите, що система висвітлює злякані та сердиті слова для вас. Це вже позначає їх як суб'єкти. Він також додав запис у вікно "Дії та параметри". Це дає змогу використовувати ці суб'єкти у ваших відповідях.

09. Додайте відповідь за допомогою нової "емоції"

У вікні відповідей додайте нові відповіді, які використовують цю нову сутність. Зверніть увагу на "$", щоб позначити "$ Emotion". Спробуйте додати ці відповіді:

- Мені шкода, що ви відчуваєте $ emotion, dave.
"Почуття $ emotion - це людська відповідь, Дейв".

Натисніть "Додати відповіді" та натисніть кнопку "Зберегти" у верхній частині екрана, щоб зберегти весь намір.

10. Перевірте свій Chatbot знову

Спробуйте сказати або набирати наступні фрази в інструменті тестування.

- Ти робиш мене дуже сердитом Хал.
- Ти мене вийшов.

Зверніть увагу, як він відповів, використовуючи "наляканий" з другим? Він використовував наш синонім, "Freaked", щоб знати, що ми мали налякані. Дуже круто.

Не соромтеся грати з цим, а також додати деякі інші наміри та відповіді, які вам подобаються, а потім додати це на веб-сторінку.

11. Активуйте веб-інтеграцію

An image showing Google Dialogflow's pop-up featuring a direct link and embeddable HTML snippet for a created chatbot. — Натискання на веб-демо відображатимуть фрагмент коду, який ви можете використовувати, щоб скинути віджет на свій власний веб-сайт

Щоб додати його до своєї веб-сторінки, натисніть "Інтеграцію" у лівому меню. Потім натисніть кнопку "Web Demo", щоб увімкнути цю опцію.

З'явиться спливаюче вікно, що показує вам пряму посилання, щоб ви могли використовувати для перевірки вашої інтеграції відразу. Він також буде відображати фрагмент коду, який ви можете використовувати, щоб скинути віджет на свій веб-сайт. Скопіюйте цей фрагмент до буфера обміну, щоб ви могли вставити його на свій сайт.

12. Створіть основну веб-сторінку та додайте фрагмент

Створіть основну сторінку HMTL і включайте цей фрагмент коду далі. Спробуйте наступний код і завантажте його на свій сервер або запустіть його на локальному сервері. Замініть фрагмент нижче з одним, який ви скопіювали від вашого діалогуного потоку:

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; title & gt; net - ai chatbot & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; iframe
    Дозволити = "мікрофон"; ширина = "350" висота = "430" src = "https://console.dialogflow.com/api-client/demo/embedded/bbd27d04-5546-4b62-85a5-c373575a33aa" & gt;
& lt; / iframe & gt;
& lt; / body & gt;
& lt; / html & gt;

Ця стаття була опублікована у випуску 312 чистих, найпопулярніших журналів у світі для веб-дизайнерів та розробників. Купити проблему 312 або Підписатися на мережу .

Keen, щоб дізнатися більше про те, як ви можете принести AI на свої сайти та програми?

An image promoting generate New York 2019 from April 24th -25th and speaker Josh Clark's keynote 'AI is your new design material'. — Генерація, нагорода конференції для веб-дизайнерів, повертається до NYC 24-25 квітня! Щоб забронювати квитки відвідування www.generateconf.com

Хочете дізнатись більше про те, як ви можете принести AI у ваші конструкції? Джош Кларк, засновник великого середовища, буде віддати свою Keynote 'AI - це ваш новий дизайн-матеріал' у створенні Нью-Йорку 25 квітня, в якому він навчить вас використовувати машинний вміст, розуміння та взаємодію як конструкторський матеріал у Ваша повсякденна робота.

Генерувати Нью-Йорк працює з 24-25 квітня - Отримайте квитки зараз !

Пов'язані статті:

Посібник з хмарного бачення Google
7 величезних технологічних тенденцій у 2019 році, щоб конструктори повинні знати
Будуть замінені роботами?

Побудуйте AI-Powered ChatBot

01. Створіть обліковий запис

02. Створіть агент

03. Створіть намір

04. Потягніть AI за цей намір

05. Додати відповіді

06. Випробування ЧатБот

07. Створіть та використовуйте суб'єкт господарювання

08. Створіть новий намір

09. Додайте відповідь за допомогою нової "емоції"

10. Перевірте свій Chatbot знову

11. Активуйте веб-інтеграцію

12. Створіть основну веб-сторінку та додайте фрагмент

Keen, щоб дізнатися більше про те, як ви можете принести AI на свої сайти та програми?

Як - Найпопулярніші статті

Як анімувати з бібліотекою Mo.JS

Affinity Designer: Як використовувати ефекти та стилі

Як змінити розмір зображення в Photoshop

Як підготувати файл для друку

висвітлюйте свою 3D-роботу з купольними вогнями

Рівень ігрових символів з творчим збором

Намалюйте портрет у маслах

Побудуйте простий музичний плеєр з реагуванням

Категорії