Привет, ребята, меня зовут Рохит, я разработчик программного обеспечения и создатель контента на YouTube. Несколько дней назад я интегрировал API модели PaLM от Google в нативную выставку React и создал диалогового чат-бота с искусственным интеллектом. На самом деле это довольно просто.
Прежде чем приступить к программированию, посетите веб-сайт Google AI: https://developers.generativeai.google/ и присоединитесь к списку ожидания, чтобы получить ключ API для PaLM. Я получил свой ключ API в течение 24 часов, поэтому уверен, что и вы тоже.
Как только вы получите доступ, вы увидите три подсказки: текстовую подсказку, подсказку данных и подсказку чата. Мы используем подсказку чата, потому что будем создавать диалогового чат-бота с искусственным интеллектом.
Для этого проекта нам нужна только внешняя библиотека для получения HTTP-запроса. Да! вы правильно угадали! Установите Axios с помощью npm
Теперь у нас все готово!!! Если вы новичок в области разработки чат-ботов, я бы порекомендовал вам посмотреть пошаговое руководство. Поскольку этот проект не для новичков, но как новичок вы должны создавать проекты такого типа, чтобы улучшить свои навыки.
Внутри вашей основной функции или в соответствии с вашим кодом вы можете скопировать и вставить следующий код. Потому что этот код творит настоящую магию. Остальное будет частью пользовательского интерфейса, поэтому вы сможете настроить или использовать его по своему усмотрению.
const [messages, setMessages] = useState([]); const [inputText, setInputText] = useState(''); const PALM_API_KEY = '######################'; // replace your API Key const generateText = async () => { if (inputText.trim() === '') { return; } const apiUrl = `https://generativelanguage.googleapis.com/v1beta2/models/chat-bison-001:generateMessage`; const requestData = { prompt: { context: '', examples: [], messages: [{ content: inputText }] }, temperature: 0.25, top_k: 40, top_p: 0.95, candidate_count: 1, }; const headers = { 'Content-Type': 'application/json', }; try { const response = await axios.post(`${apiUrl}?key=${PALM_API_KEY}`, requestData, { headers, }); if (response.status === 200) { if (response.data && response.data.candidates && response.data.candidates.length > 0) { const botResponse = response.data.candidates[0].content; // Add the user's input to the messages array const newUserMessage = { id: messages.length + 1, text: inputText, sender: 'user', // Set the sender as 'user' timestamp: new Date().getTime(), }; // Add the bot's response to the messages array const newBotMessage = { id: messages.length + 2, content: botResponse, sender: 'bot', // Set the sender as 'bot' timestamp: new Date().getTime(), }; setMessages([...messages, newUserMessage, newBotMessage]); setInputText(''); } else { console.error('Response structure is not as expected.'); } } else { console.error('Google Cloud API request failed with status:', response.status); } } catch (error) { console.error('An error occurred while making the Google Cloud API request:', error); } };
- Инициализируйте состояние, используя хук useState React. messages будут хранить историю разговоров, а inputText будет хранить введенные пользователем данные.
- Создайте функцию с именемgenerateText, которая срабатывает, когда пользователь нажимает кнопку отправки. Начните с проверки, не является ли ввод пользователя просто пустыми местами. Если это так, выйдите из функции.
- Мы готовим данные для нашего запроса API. Мы настраиваем URL-адрес API и создаем объект с именем requestData. Этот объект включает в себя входной текст, предоставленный пользователем, и некоторые параметры конфигурации, такие как температура, top_k, top_p и Candidate_count. Эти параметры влияют на вывод ответов нашего чат-бота. Мы будем следовать официальной документации для правильного использования этих параметров.
- Axios: мы отправляем запрос POST на URL-адрес API, передавая наш ключ API и объект requestData в теле запроса. Если все пройдет гладко, мы получим ответ от API.
- Проверяем, равен ли статус ответа 200 (что означает успех). Если да, переходим к извлечению ответа бота из ответа API. Затем мы создаем новые объекты сообщений как для ввода пользователя, так и для ответа бота. Эти объекты содержат такую информацию, как идентификатор отправителя, текст, тип отправителя (пользователь или бот) и метку времени.
- Мы обновляем состояние наших сообщений новыми сообщениями, используя функцию setMessages. Это приводит к повторной визуализации пользовательского интерфейса и отображению обновленной истории разговоров. Мы также очищаем inputText, чтобы пользователь мог легко ввести другое сообщение.
Если вы чувствуете, что где-то потерялись в этой сборке проекта, посмотрите пошаговое руководство здесь:
Вот и все!!!! Если вы здесь, обязательно аплодируйте. Это поможет средним алгоритмам продвигать мою статью среди более широкой аудитории. Спасибо за прочтение. Приятного кодирования!!
Поддержите мою работу