«Создайте собственное приглашение 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, обрабатывает ответ, отображая сгенерированное сообщение, и сохраняет введенные пользователем данные в контейнере истории чата. Он также включает обработку ошибок для регистрации любых потенциальных ошибок, которые могут возникнуть во время процесса.