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

Я следил за различными видами использования chatGPT с момента его выхода. Описываемое далее решение я еще не встречал и поэтому думаю оно будет кому-то полезным.

Формулировка задачи

Необходимо создать онлайн-чата для сайта со следующими возможностями:

• Общение с посетителями на любых языках

• Запрос варианта ответа на запрос посетителя у chatGPT, обученного на базе знаний компании

• Реализовать все на бесплатных сервисах

Итак, поехали!

Шаг №1: Выбор сервиса для онлайн-чата

Для реализации задачи нам нужна возможность ставить свой обработчик на событие отправки сообщения посетителя. При этом сам сервис должен быть бесплатным.

По итогу был выбрал сервис Tawk.to, у которого есть вот эти два обработчика:

Шаг №2: Обучение chatGPT

Для формирования базы знаний компании мы будем использовать библиотеку:

????️ LlamaIndex ???? (GPT Index)

https://github.com/jerryjliu/llama_index

Вот пример использования библиотеки из официальной документации

!pip install llama-index

import os
os.environ["OPENAI_API_KEY"] = 'YOUR_OPENAI_API_KEY'

from llama_index import GPTSimpleVectorIndex, SimpleDirectoryReader
documents = SimpleDirectoryReader('data').load_data()
index = GPTSimpleVectorIndex(documents)

# save to disk
index.save_to_disk('index.json')
# load from disk
index = GPTSimpleVectorIndex.load_from_disk('index.json')

index.query("<question_text>?")

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

# auras.txt

AURA Services

AURA Services, based in Tel Aviv, Israel, is a platform that mediates between local partner performers and clients and focused on short-term local services.

AURA do marketing and local advertisement to promote local partner performers.

The company acts as a broker and charges a commission from local partner performers for promotion of each service for clients.

Шаг №3: Подготовка базы в Notion

Все поступающие сообщения от посетителей мы будем сохранять в Notion.

Вот шаблон таблицы:

https://candied-cactus-f66.notion.site/9cc1b8d874244cc0bef06d6de762d8df

Процесс создания интеграции хорошо описан в этой статье:

https://notionso.ru/kb/sozdanie-integratsiy-s-pomoschyu-api-notion/

У нас будет вот такая функция для создание записей в таблице Notion:

def insertDatabase(databaseId, record, token):
    headers = {
        "Accept": "application/json",
        "Authorization": "Bearer " + token,
        "Content-Type": "application/json",
        "Notion-Version": "2021-05-13",
    }
    createUrl = "https://api.notion.com/v1/pages"
    data = json.dumps(record)
    res = requests.request("POST", createUrl, headers=headers, data=data)
    return res

Пример записи в таблицу:

record = {"parent": { "database_id": notion_DB_id },"properties": {}}
record['properties']['URL'] = {"title": [{"text": {"content": "https://aura-s.com/"}}]}
record['properties']['Message'] = {"rich_text": [{"text": {"content": "Hello World!"}}]}
record['properties']['chatGPT_reply_English'] = {"rich_text": [{"text": {"content": "How i can help you?"}}]}
insertDatabase(databaseId, record, token)

Шаг №4: Создание Телеграм-бота

Найдите бота @BotFather  и отправьте ему команду /start или /newbot, чтобы создать нового бота. Затем следуйте инструкциям, вводя название и короткое имя для вашего бота. После этого вы получите ответ с токеном бота и ссылкой на документацию. Важно сохранить токен в надежном месте, так как он необходим для авторизации и установки связи между вами и вашим ботом.

Шаг №5: Запуск HTTP API на Flask

Для обработки поступающих от посетителей сообщений нам необходимо написать небольшой Backend на Flask.

У нас будет только одна точка входа в API, которая принимает входящее сообщение, затем отправляет запрос в chatGPT и просит его ответить на 3-х языках. Полученные ответы мы отправляем в телеграм бот и в таблицу Notion.

Вот код нашего API:

from flask import Flask, render_template, redirect, url_for, request, session, jsonify
from flask_cors import CORS
from os import path
import json
import os
import requests
import datetime
import openai
import telebot

app = Flask(__name__)
CORS(app)  # эта команда необходима для работы с API из React-приложений

bot = telebot.TeleBot(config.tg_bot_key)
    
# /api/v1.0/new_online_chat_message
@app.route('/api/v1.0/new_online_chat_message', methods=['GET'])
def new_online_chat_message():
    url = request.args.get("url", '-')
    message = request.args.get("message", '-')
    print('[START - new_online_chat_message]')
    notion_DB_id = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
    record = {"parent": { "database_id": notion_DB_id },"properties": {}}
    record['properties']['URL'] = {"title": [{"text": {"content": url}}]}
    record['properties']['Message'] = {"rich_text": [{"text": {"content": message}}]}
    
    # Ask chatGPT
    reply = ''
    if message != '-':
        index = GPTSimpleVectorIndex.load_from_disk('/wiki/index.json')
				
				# ID чата с телеграм ботом        
				chat_id = 'XXXXXXXXX'

        # English
        response = index.query(message + '. Answer in English', response_mode="compact")
        record['properties']['chatGPT_reply_English'] = {"rich_text": [{"text": {"content": response.response}}]}
        reply = response.response
        bot.send_message(chat_id, '????????\n' + reply)
        
        # Spanish
        response = index.query(message + '. Answer in Spanish', response_mode="compact")
        record['properties']['chatGPT_reply_Spanish'] = {"rich_text": [{"text": {"content": response.response}}]}
        reply = response.response
        bot.send_message(chat_id, '????????\n' + reply)
        
        # German
        response = index.query(message + '. Answer in German', response_mode="compact")
        record['properties']['chatGPT_reply_German'] = {"rich_text": [{"text": {"content": response.response}}]}
        reply = response.response
        bot.send_message(chat_id, '????????\n' + reply)
    
    res = notion_api.insertDatabase(notion_DB_id, record, config.notion_token)
    print(res, res.text)
    ###
    return reply

if __name__ == "__main__":
    app.run(debug=True, host='0.0.0.0', port=5000)

Шаг №6: Отправка сообщений из чата на сайте на HTTP API

И финальная часть - мы добавляем обработчик в виджет чата Tawk.to:

<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/640e244831ebfa0fe7f220c1/1grbjrffn';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
  window.Tawk_API = window.Tawk_API || {};
window.Tawk_API.onChatMessageVisitor = function(message){
  var x = new XMLHttpRequest();
x.open("GET", "https://АДРЕС_API/api/v1.0/new_online_chat_message?url=aura-s.com&message="+message, true);
x.onload = function (){
    alert( x.responseText);
}
x.send(null);
  
};
</script>
<!--End of Tawk.to Script-->

Демонстрация работы

Итог

Я надеюсь данное решение будет вам полезно и если вы используете его где-то, напишите пожалуйста про это в комментариях.

И конечно я готов ответить на все ваши вопросы, пишите в мой ТГ.