User is participating in a hackathon to create a chatbot using the agentic AI infrastructure called Groclake.## Історія:
Наразі я беру участь у хакатоні, в якому ми повинні створити чат-бота як частину завдання, використовуючи агентну інфраструктуру штучного інтелекту під назвою Groclake, яку надають організатори.
Ось коротка інформація про Groclake:
Groclake — це інфраструктура агентного штучного інтелекту для автоматизації комерції. Це комплексний набір бібліотек, API, конекторів і сховищ даних, який надає єдиний шлюз для оркестрування складних робочих процесів комерції. Філософія Groclake полягає в тому, щоб допомогти розробникам і будівельникам швидко створювати складні функції для підприємств, використовуючи готові інструменти, що підтримуються штучним інтелектом.
Groclake чудово доповнює агентні робочі процеси, оскільки забезпечує простий шлях від агента до програми, використовуючи одноточкові з’єднання замість точка-точка для виклику інструментів.
Учасники також отримали вступний код, який вони повинні слідувати та зрозуміти, щоб створити свої власні розробки.
Що створювати?
В наші часи ми зазвичай надсилаємо побажання своїм близьким через повідомлення та історії. І на півдорозі до цього ми опиняємося в роздумах: як мені побажати, що написати, хочу бути креативним, але як? І так далі. Тому ось відповідь на всі ці питання — KavyaKreate — створюй свою власну Кав'ю з допомогою ШІ. Кав'я (Kavya) хінді означає вірш, і, як випливає з назви, ця програма генерує вірш за вказівкою користувача, але що ж особливого в цьому, адже навіть ChatGPT може це зробити, правда? KavyaKreate може створювати зображення за мотивами вірша.
Також, ви можете створювати власні картки та надсилати їх своїм друзям, щоб привітати їх.
Як створити:
Отже, ми використали Flask для бекенду, оскільки цей фреймворк дуже простий для створення працездатного, але надійного бекенду.
Підхід до бекенду:
Встановіть необхідні залежності у вашому поточному середовищі Python за допомогою наступних команд:
pip install groclake
pip install python-dotenv
pip install flask
Ви також можете використовувати однорядковий підхід для встановлення. Це залежить від вашого стилю програмування.
Наступний крок — отримати свої облікові дані Groclake з їх офіційного сайту. Збережіть ці дані в своєму файлі .env. Тепер створіть файл main.py і імпортуйте наступне
from groclake.modellake import ModelLake
from dotenv import load_dotenv
from flask import Flask, request, jsonify
Після імпорту залежностей є кілька завдань, які нам потрібно виконати.
Ось пояснення наступних рядків коду:
load_dotenv() — цей метод завантажує файл .env у ваше середовище
model_lake = ModelLake() — ініціалізація моделі
app = Flask(name) — створення екземпляру Flask додатку
conversation_history = [] — ініціалізація порожньої історії розмови
# Завантаження змінних середовища
load_dotenv()
# Ініціалізація екземпляру ModelLake
model_lake = ModelLake()
# Ініціалізація Flask додатку
app = Flask(__name__)
# Ініціалізація історії розмов (повинна зберігатися між викликами, якщо це потрібно)
conversation_history = []
Створений кінцевий точка (endpoint) прийматиме введення користувача, оброблятиме його та повертатиме відповідь, згенеровану AI моделлю. Давайте розберемо це крок за кроком, щоб ви могли реалізувати це самостійно.
1. Налаштування кінцевої точки
Перш за все, визначте маршрут у вашому Flask додатку для обробки POST запитів.
Цей маршрут буде відповідати за отримання вводу користувача у форматі JSON.
@app.route("/chat", methods=["POST"])
def chatbot():
try:
# Парсинг вхідного JSON запиту
data = request.get_json()
# Перевірка, чи є обов'язкове поле 'user_input'
if not data or "user_input" not in data:
return jsonify({"error": "'user_input' є обов'язковим полем у JSON запиті"}), 400 # Отримання вводу користувача
user_input = data["user_input"]
Тут request.get_json() витягує JSON запит з HTTP запиту. Просте перевіряння гарантує, що ключ user_input існує, в іншому випадку повертається відповідь з помилкою.
2. Управління історією розмов
Для забезпечення контекстних відповідей слід зберігати історію розмов. Кожне повідомлення (як від користувача, так і від чат-бота) додається до цієї історії.
# Додавання вводу користувача до історії розмов
conversation_history.append({"role": "user", "content": user_input})
3.
Підготовка Payload для AI моделі
Далі потрібно створити payload, який міститиме історію розмови та будь-які необхідні параметри для AI моделі. Наприклад:
# Створення payload для моделі
payload = {
"messages": conversation_history,
"max_tokens": 700, # Налаштуйте ліміт токенів за потребою
}
4. Генерація відповіді чат-бота
Припустимо, ви використовуєте AI модель, доступну через model_lake.chat_complete. Ця функція приймає payload і повертає відповідь моделі:
# Отримання відповіді від моделі
reply = model_lake.chat_complete(payload=payload)
# Отримання відповіді від асистента
bot_reply = reply.get("answer", "Вибачте, я не зміг обробити це.")
Цей код отримує відповідь від моделі або повертає повідомлення про помилку, якщо відповідь недійсна.
5.
Оновлення історії розмови
Збережіть відповідь чат-бота в історії розмови для подальшого контексту:
# Додаємо відповідь асистента до історії розмови
conversation_history.append({"role": "assistant", "content": bot_reply})
6. Надсилання відповіді
Нарешті, поверніть відповідь чат-бота у вигляді JSON payload:
# Повертаємо відповідь бота
return jsonify({"bot_reply": bot_reply})
7.
Обробка помилок
Огорніть всю логіку в блок try-except для коректної обробки непередбачених помилок:
except Exception as e:
# Повертаємо відповідь з помилкою та повідомленням про виключення
return jsonify({"error": str(e)}), 500
Остаточний код
Зібравши все разом, повний код виглядатиме так:
@app.route("/chat", methods=["POST"])
def chatbot():
try:
data = request.get_json()
if not data or "user_input" not in data:
return jsonify({"error": "'user_input' is required in JSON payload"}), 400 user_input = data["user_input"]
conversation_history.append({"role": "user", "content": user_input}) payload = {
"messages": conversation_history,
"max_tokens": 700,
} reply = model_lake.chat_complete(payload=payload)
bot_reply = reply.get("answer", "Sorry, I couldn't process that.")
conversation_history.append({"role": "assistant", "content": bot_reply}) return jsonify({"bot_reply": bot_reply})
except Exception as e:
return jsonify({"error": str(e)}), 500
Основні моменти, які слід пам'ятати
- Валідація: Завжди перевіряйте вхідні дані, щоб уникнути непередбачених помилок.
- Управління станом: Використовуйте історію розмови для того, щоб взаємодія з чат-ботом була більш логічною та послідовною.
- Обробка помилок: Реалізуйте надійну обробку помилок для забезпечення надійності.
Підхід до фронтенду:
Цей інтерфейс підключається до бекенду для генерації відповідей і включає такі функції, як анімації завантаження та копіювання відповідей у буфер обміну.
Розглянемо це крок за кроком.
1. Імпортування необхідних пакетів
Почнімо з імпорту потрібних пакетів для побудови інтерфейсу користувача та обробки HTTP запитів.
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:flutter/services.dart'; // Імпорт для функціональності буфера обміну
import 'package:loading_indicator/loading_indicator.dart';
Тут http використовується для відправлення HTTP запитів, а loading_indicator надає готову анімацію для відображення процесу завантаження.
Визначте Stateful Widget
Створіть StatefulWidget під назвою ChatBotScreen для керування станом інтерфейсу чату.
class ChatBotScreen extends StatefulWidget {
@override
_ChatBotScreenState createState() => _ChatBotScreenState();
}
class _ChatBotScreenState extends State {
final TextEditingController _controller = TextEditingController();
final List _messages = [];
bool _isLoading = false;
final String backendUrl = "http://localhost:5000/chat"; // Замініть на URL вашого бекенду
3.
Відправка повідомлень
Визначте функцію _sendMessage для відправки введеного тексту користувачем на бекенд і обробки відповіді чат-бота.
Додайте введене повідомлення користувача
Коли користувач відправляє повідомлення, воно додається до списку повідомлень:
setState(() {
_messages.add({"role": "user", "content": userInput});
_isLoading = true; // Почати анімацію завантаження
});
_controller.clear(); // Очистити текстове поле
Зробіть POST запит
Використовуйте пакет http для відправки введеного тексту на бекенд:
final response = await http.post(
Uri.parse(backendUrl),
headers: {'Content-Type': 'application/json'},
body: json.encode({"user_input": userInput}),
);
Обробка відповіді
Якщо бекенд відповідає успішно, додайте відповідь бота до списку повідомлень:
if (response.statusCode == 200) {
final data = json.decode(response.body);
final botReply = data["bot_reply"] ?? "Вибачте, відповіді немає.";
setState(() {
_messages.add({"role": "assistant", "content": botReply});
});
} else {
setState(() {
_messages.add({"role": "assistant", "content": "Помилка: ${response.statusCode} - ${response.reasonPhrase}"});
});
}
Обробіть виключення для забезпечення стабільності:
catch (e) {
setState(() {
_messages.add({"role": "assistant", "content": "Помилка: $e"});
});
}
І наостанок, зупиніть анімацію завантаження:
finally {
setState(() {
_isLoading = false;
});
}
4.
Копіювання в буфер обміну
Додайте функціональність для копіювання відповіді бота в буфер обміну:
void _copyToClipboard(String botReply) {
Clipboard.setData(ClipboardData(text: botReply));
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Скопійовано в буфер обміну!')),
);
}
5. Побудова інтерфейсу
AppBar
Визначте AppBar з кастомним заголовком:
appBar: AppBar(
backgroundColor: Colors.pink,
title: Row(
children: [
Text("KavyaKreate ", style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white)),
Text("- Створіть свій Kavya за допомогою AI", style: TextStyle(fontWeight: FontWeight.w400, fontSize: 18, color: Colors.white)),
],
),
),
Повідомлення чату
Відображайте повідомлення за допомогою ListView.builder, чергуючи повідомлення користувача та бота.
Додати анімацію завантаження, коли відповідь бота ще не надійшла:
Expanded(
child: ListView.builder(
itemCount: _messages.length + (_isLoading ? 1 : 0),
itemBuilder: (context, index) {
if (index == _messages.length && _isLoading) {
return Align(
alignment: Alignment.centerLeft,
child: SizedBox(
width: 60,
child: LoadingIndicator(
indicatorType: Indicator.ballPulse,
colors: const [Colors.red, Colors.yellow, Colors.green],
),
),
);
}
final message = _messages[index];
final isUser = message["role"] == "user"; return Align(
alignment: isUser ? Alignment.centerRight : Alignment.centerLeft,
child: Column(
crossAxisAlignment: isUser ? CrossAxisAlignment.end : CrossAxisAlignment.start,
children: [
CircleAvatar(
child: Text(isUser ? "👤" : "🤖", style: TextStyle(fontSize: 20)),
),
Container(
padding: EdgeInsets.all(10),
margin: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
decoration: BoxDecoration(
color: isUser ? Colors.blue[100] : Colors.grey[300],
borderRadius: BorderRadius.circular(10),
),
child: Text(
message["content"] ?? "",
style: TextStyle(fontSize: 16),
),
),
],
),
);
},
),
),
Поле вводу
Додайте текстове поле вводу та кнопку відправки:
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Expanded(
child: TextField(
controller: _controller,
decoration: InputDecoration(
hintText: "Почніть з 'Створити вірш...'",
border: OutlineInputBorder(),
),
),
),
IconButton(
icon: Icon(Icons.send),
onPressed: () {
_sendMessage(_controller.text);
},
),
],
),
),
Основні функції
- Повідомлення користувача та бота: Відрізняються за відправником.
- Анімація завантаження: Показує активність під час очікування відповіді бота.
- Копіювання в буфер обміну: Дозволяє користувачам легко копіювати відповіді бота.
Тестування:
Запустіть сервер і протестуйте додаток! Ось як це виглядає.
Висновок:
Отже, ось як ми створили свій власний генератор віршів за допомогою AI.
В майбутньому ми інтегруємо генератор фону для зображень на базі AI та функціональність розширення для Chrome, щоб додаток можна було інтегрувати і в інші програми. Щодо комерції, цей додаток орієнтований на роздрібну торгівлю подарунками.
Поділіться своїми враженнями про цей додаток у коментарях. Також ставте свої питання щодо цього додатку або технологічного стеку в коментарях. Я обов'язково відповім. Нарешті, продовжуйте експериментувати!
Перекладено з: Here’s How I Created AI Poem Generator