«Создайте собственное приглашение ChatGPT с помощью JavaScript!»✨🔮

Введение:

мы научимся создавать собственный чат с помощью HTML, CSS и JavaScript. Он создает простой веб-интерфейс, в котором пользователи могут вводить текст и получать ответы, сгенерированные моделью OpenAI GPT-3.5, с помощью JavaScript. В интерфейсе также есть кнопка новый чат и раздел история для просмотра ранее введенного текста. Пользовательский интерфейс стилизован с использованием правил CSS, определенных в теге <style> в заголовке HTML-документа. для создания API-ключа перейдите по этой ссылке, он сгенерирует API-ключ https://platform.openai.com/account/api-keys

<html>
<title>CHATGPT</title>
<head>
<style>

*{
 color:white;
}
body{
 margin:0;
 padding:0;
 background-color: #343541;
 display:flex;
 
}

h3{
 font-size:33px;
 font-weight:600;
 padding:200px 0;
  }

.sidebar{
 background-color:#202123;
 width:244px;
 height:100vh;
 display :flex;
 flex-direction:column;
 justify-content : space-between;
 
 }

.main{
 display :flex;
 flex-direction:column;
 margin-left: 3px;
 text-align:center;
 height:100vh;
 width:100%;
     }

.bottom-section{
  
  display:flex;
  flex-direction:column;
  justify-content:center;
  height:100vh;
  }

.info{
 color:rgba(255,255,255,0.5);
 font-size :16px;
     }

input{
 border :none;
 background-color:rgba(255,255,255,0.5);
 width:79%;
 font-size:20px;
 padding:20px 30px;
 
 border-radius:10px;
 
     }
 
input:focus{
     outline: none;   /*it remove the outline of input bordebox*/
     } 

.input-container{
    position :realtive;

  }

button {  
   border : solid 0.5px rgba(255,255,255,0.6);
   background-color:transparent;
   border-radius:5px;
   padding :10px;
   margin: 12px;
   cursor : pointer;
 }

button:hover {
  background-color: #555;
}

.nav{
 border-top: solid 0.2px rgba(255,255,255,0.5) /*it give a borderline above the promt*/
 
    }

 p {
      cursor :pointer;
      margin-left:6px;
       padding :10px;
       margin: 12px;
    }

.history{
  padding :10px;
  margin :10px;
  display:flex;
  flex-direction :column;
 }

#submit {
  
  width: 45px;
  border-radius: 6px;
position : relative;
     margin-left : 86%;
     bottom :50px;  /*give a submit arrow inputbox*/ 
     cursor:pointer; 
     color : black;
     font-size: 30px;
 
}

#submit:hover {
  background-color: #555;
}

</style>
</head>
<body>

<section class ="sidebar">
<button> new chat</button>

<div class = "history"></div>

<div class = "nav">
<p> CHATGPT</p>
</div>

</section>
<section class ="main">
<h3> ChatGPT</h3>
<p id = "output"> </p>

<div class = "bottom-section">
 <div class ="input-container">
 <input placeholder = "enter text "/>
 <div id = "submit">➢</div>
 </div>
</div>

</section>

<script>

const API_KEY = 'own apikey';

const submitbutton = document.querySelector('#submit')
const outputelement = document.querySelector('#output')
const inputElement = document.querySelector('input')
const historyelement = document.querySelector('.history')
const buttonElement = document.querySelector('button')

function changeInput(value){
  const inputElement = document.querySelector('input')
   inputElement.value = value
      }
async function getMessage() {
  console.log('clicked');  // when we click a submitbutton than it show a clicked in console
  
  const options = {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${API_KEY}`, 
      'Content-Type': 'application/json'
    },

    body: JSON.stringify({
      model: "gpt-3.5-turbo",
      messages: [{ role: "user", content: inputElement.value}], 
      max_tokens: 25
    })
  }

  try {
    const response =  await fetch('https://api.openai.com/v1/chat/completions', options) 
      const data = await response.json()
 console.log(data)
 outputelement.textContent = data.choices[0].message.content
  
   if (data.choices[0].message.content && inputElement.value){
  const pElement=document.createElement('p')
  pElement.textContent = inputElement.value
  pElement.addEventListener('click',() => changeInput(pElement.textContent))
  historyelement.append(pElement) 
 //for input value we entered to save in history 
  }
   
      } catch (error) {
     console.error(error)
          }

}

submitbutton.addEventListener('click', getMessage)

function clearInput(){

 inputElement.value = ''
       }

buttonElement.addEventListener('click',clearInput)

</script>

</body>
</html>

💬объяснение кода:

API_KEY = 'own apikey';

const submitbutton = document.querySelector('#submit')
const outputelement = document.querySelector('#output')
const inputElement = document.querySelector('input')
const historyelement = document.querySelector('.history')
const buttonElement = document.querySelector('button')

🟩const historyelement = document.querySelector('.history') использует JavaScript для выбора элемента HTML с именем класса «история» из DOM (объектной модели документа).

const historyelement: определяет переменную с именем historyelement с использованием ключевого слова const, что означает, что переменную нельзя переназначить после ее первоначального назначения.

document.querySelector('.history'): эта часть вызывает метод querySelector объекта document, который представляет весь HTML-документ. Этот метод используется для выбора элемента из DOM на основе определенного селектора CSS. В данном случае селектором является ' .history', который выбирает элемент с именем класса «история».

Итак, код находит и сохраняет ссылку на элемент HTML с именем класса «история» в переменной historyelement. Это позволяет вам манипулировать этим элементом HTML или взаимодействовать с ним с помощью JavaScript, например, изменять его содержимое, применять стили и т. д.

🟩 const outputelement = document.querySelector('#output') он выбирает элемент HTML с идентификатором «выход» из DOM (объектная модель документа).

const outputelement: определяет переменную с именем outputelement с использованием ключевого слова const, что означает, что переменную нельзя переназначить после ее первоначального назначения.

document.querySelector('#output'): Эта часть вызывает метод querySelector объекта document, который представляет весь HTML-документ. Этот метод используется для выбора элемента из DOM на основе определенного селектора CSS. В данном случае селектором является '#output',, который выбирает элемент с идентификатором «выход».

следовательно, код находит и сохраняет ссылку на элемент HTML с «выходным» идентификатором в переменной outputelement. Это позволяет вам манипулировать этим элементом HTML или взаимодействовать с ним с помощью JavaScript.

🟩const buttonElement = document.querySelector('button') использует JavaScript для выбора элемента HTML, но выбирает первый элемент <button>, который встречается в DOM.

const buttonElement: создается постоянная переменная с именемbuttonElement для хранения ссылки на выбранный элемент кнопки.

document.querySelector('button'): Эта часть использует метод querySelector для поиска первого вхождения элемента HTML, соответствующего селектору 'button'. В данном случае селектором является просто 'button', который нацелен на все элементы <button> в DOM.

async function getMessage() {
  // API call to OpenAI
}

Функция getMessage — это асинхронная функция, которая выполняет API-вызов OpenAI с использованием предоставленного ключа API. Он создает объект параметров с заголовками и телом JSON, содержащим модель, сообщения и max_tokens.

submitbutton.addEventListener('click', getMessage);

Эта строка добавляет прослушиватель событий к кнопке отправки. При нажатии кнопки вызывается функция getMessage для получения и отображения ответа чата от API OpenAI.

function changeInput(value) {
  const inputElement = document.querySelector('input')
  inputElement.value = value;
}

Эта функция changeInput предназначена для обновления значения элемента ввода HTML указанным значением.

◾Объявление функции:

  • function changeInput(value) { ... }: Эта строка определяет функцию с именем changeInput, которая принимает один параметр с именем value. Параметр value представляет новое значение, которое вы хотите установить для элемента ввода.

◾Выбор элемента ввода:

  • const inputElement = document.querySelector('input');: эта строка использует метод document.querySelector для выбора первого элемента <input>, который встречается в DOM. Аргумент 'input' — это селектор CSS для выбора всех элементов <input>. Выбранный элемент ввода сохраняется в переменной inputElement.

◾Установка значения входного элемента:

  • inputElement.value = value;: Эта строка устанавливает для свойства value выбранного элемента <input> значение, переданное в качестве аргумента функции. Параметр value содержит новое значение, которое вы хотите присвоить элементу ввода.
function clearInput() {
  inputElement.value = '';
}
buttonElement.addEventListener('click', clearInput);

Эти строки определяют функцию clearInput для очистки значения входного элемента. К кнопке «новый чат» добавлен прослушиватель событий, так что нажатие на нее очищает поле ввода и мы можем ввести новый текст.

try {
  const response = await fetch('https://api.openai.com/v1/chat/completions', options);
  const data = await response.json();
  console.log(data);
  outputelement.textContent = data.choices[0].message.content;
}
const response = await fetch('https://api.openai.com/v1/chat/completions', options);

◾Эта строка выполняет асинхронный запрос API к конечной точке OpenAI «https://api.openai.com/v1/chat/completions» с использованием функции выборки. Объект параметров содержит заголовки и тело JSON, необходимые для запроса. Ключевое слово await указывает, что код будет ждать получения ответа, прежде чем продолжить.

const data = await response.json();: эта строка асинхронно анализирует ответ API как JSON и сохраняет его в переменной data.

console.log(data);: объект data регистрируется в консоли браузера. В целях отладки может быть полезно просмотреть структуру ответа API.

⭐Обновление выходного элемента:

outputelement.textContent = data.choices[0].message.content;: когда мы нажимаем значок отправки, эта строка устанавливает текстовое содержимое outputelement в содержимое сообщения, сгенерированного моделью OpenAI. Объект data содержит массив с именем choices в нулевой позиции индекса (в консоли), и отображается содержимое сообщения первого выбора. сообщение.содержание.

⭐Хранение истории:

if (data.choices[0].message.content && inputElement.value) {
  const pElement = document.createElement('p');
  pElement.textContent = inputElement.value;
  pElement.addEventListener('click', () => changeInput(pElement.textContent));
  historyelement.append(pElement);
}

это условный блок, который выполняется только в том случае, если и содержимое сгенерированного сообщения (data.choices[0].message.content), и значение входного элемента (inputElement.value) не пусты.

⭐Условная проверка:

  • if (data.choices[0].message.content && inputElement.value) { ... }: эта строка инициирует условную блокировку. Он проверяет, являются ли data.choices[0].message.content и inputElement.value правдивыми (не пустыми или нулевыми). Если оба условия верны, код внутри блока будет выполнен.

◾Создание элемента абзаца:const pElement = document.createElement('p');: Эта строка создает новый элемент <p> (абзац) с использованием метода document.createElement. Этот элемент будет использоваться для отображения ввода пользователя в истории чата.

◾ Установка текстового содержимого абзаца:pElement.textContent = inputElement.value;: Эта строка устанавливает текстовое содержимое вновь созданного элемента <p> в значение входного элемента. Это означает, что текстовое содержимое элемента <p> будет таким же, как то, которое пользователь ввел в поле ввода перед отправкой.

⭐Добавление прослушивателя событий кликов:

  • pElement.addEventListener('click', () => changeInput(pElement.textContent));: Эта строка добавляет прослушиватель событий щелчка к элементу <p>. Когда пользователь нажимает на элемент <p> (который представляет предыдущее сообщение чата), запускается функция обратного вызова прослушивателя событий. Эта функция вызывает функцию changeInput и передает текстовое содержимое выбранного элемента <p> в качестве аргумента. Целью этого является установка значения поля ввода в соответствии с содержимым сообщения чата, по которому щелкнули, что позволяет пользователю легко редактировать или продолжать разговор.

⭐ Добавление в контейнер истории чата:

  • historyelement.append(pElement);: эта строка добавляет вновь созданный элемент <p> (представляющий ввод пользователя) в контейнер historyelement. Этот контейнер, скорее всего, отвечает за отображение истории чата.

Этот условный блок кода создает новый элемент <p> для представления ввода пользователя в истории чата. Он устанавливает текстовое содержимое элемента <p> для ввода пользователя, добавляет прослушиватель событий щелчка, чтобы можно было легко изменять вводимые данные, и добавляет элемент <p> в контейнер истории чата, если и входные данные, и сгенерированное сообщение не пусты..

⭐Обработка ошибок:

} catch (error) {
  console.error(error);
}

Если в блоке try возникает ошибка (например, неудачный запрос API), выполняется код внутри блока catch. Сообщение об ошибке записывается в консоль браузера с помощью console.error.

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