Привет, ребята, меня зовут Рохит, я разработчик программного обеспечения и создатель контента на 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, чтобы пользователь мог легко ввести другое сообщение.

Если вы чувствуете, что где-то потерялись в этой сборке проекта, посмотрите пошаговое руководство здесь:

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

Поддержите мою работу

https://www.patreon.com/_ninza7