Всем привет! Меня зовут Кушал Мани, я энтузиаст клиентской разработки. Сегодня я поделюсь с вами всеми знаниями, которые я получил, создавая проекты и просматривая документацию.
ChatGPT — это усовершенствованная языковая модель, созданная OpenAI, которая произвела революцию в области разговорного ИИ. Он постоянно развивается и расширяет границы возможностей ИИ.
ChatGPT представляет собой значительный шаг вперед в стремлении создать машины, способные понимать и генерировать человеческие разговоры.
Хотя ChatGPT демонстрирует впечатляющие возможности, важно признать, что у него есть и некоторые ограничения. Ответы ChatGPT генерируются на основе шаблонов и информации, полученной во время обучения. Поэтому иногда он может давать неверные или предвзятые ответы, так как ему не хватает возможностей проверки фактов в реальном времени. Несмотря на то, что OpenAI принял меры для уменьшения вредных выходных данных, проблемы, связанные с предвзятостью и неправильным использованием, все еще существуют.
В этом блоге мы начнем путешествие, чтобы узнать, как создать свой собственный ChatGPT. Мы рассмотрим шаги и инструменты, необходимые для воплощения вашей мечты о диалоговом ИИ в реальность.
Предварительно необходимо :-
- Код VS (рекомендуется)
- HTML, CSS, Javascript, Vue.JS
- Аксиос
- Стабильное подключение к Интернету
Если у вас есть все, что указано в разделе «Предварительные требования», то все готово.
Я разделил этот блог на 4 уровня, и на каждом уровне есть несколько шагов с фрагментами для лучшего понимания.
Итак, начнем наше путешествие
Уровень 1: — Получение ключа API и URL-адреса API
Шаг 1. Откройте браузер, перейдите на страницу https://platform.openai.com/signup и создайте свою учетную запись.
Шаг 2 . После создания учетной записи перейдите на панель инструментов и выберите параметр Личные в правом верхнем углу.
Шаг 3. Нажмите кнопку Просмотреть ключ API, и вы будете перенаправлены на страницу создания ключа API.
Шаг 4. В разделе Ключи API нажмите кнопку с надписью Создать новый секретный ключ, после чего откроется модальное окно.
Шаг 5. Дайте уникальное имя вашему секретному ключу и нажмите кнопку Создать секретный ключ.
Шаг 6. Скопируйте сгенерированный секретный ключ и закройте браузер.
Ура !!! Вы завершили уровень 1 создания собственного ChatGPT.
Уровень 2: - Настройка кода VS
Шаг 1. Откройте терминал в коде VS и напишите следующую команду.
vue create openai
Шаг 2.Теперь выберите свою версию vue с помощью клавиш со стрелками и нажмите Eввод, и начнется создание вашего проект
Шаг 3:- После успешного создания вашего проекта перейдите в свой проект, используя команду cd и название вашего проекта
В моем случае это будет cd открытый
cd openai
Шаг 4.Теперь запустите другую команду для установки Axiosт.е. npm i axiosи нажмите Enter
npm i axios
Шаг 5:- Теперь запустите команду npm run serve для создания проекта и откройте свой локальный сервер.
npm run serve
Ура !!! Вы завершили уровень 2 создания собственного ChatGPT.
Уровень 3: - Проектирование вашего ChatGPT (необязательно)
Здесь мы разработаем наше приложение. Вы можете пропустить этот уровень, если хотите разработать собственное приложение. Хотя я использую формат Option API для его создания, вы также можете использовать формат API композиции для того же файла .
Приложение имеет 4 основные вещи, т.е.
- Кнопка "Создать текст"
- TextArea для отображения вывода вашего запроса
- Область ввода для ввода вашего запроса
- Немного CSS и CSS Flexbox, чтобы сделать его отзывчивым
Шаг 1 –фрагменты кода HTML
<template>
<div>
<div class="card">
<div class="card-border">
<div class="container">
<h1 style="margin: 20px;">Generate Solutions using Open AI</h1>
<div class="Text-Area">
<textarea id="text_area" ref='text_area' cols="30" rows="10"></textarea>
</div>
<div class="Query-Area">
<input type="text" ref='query_area' id="query_area" placeholder="enter your Query">
</div>
<div class="Btns">
<button id="btn1" ref="myButton" @click="GenerateText">Generate Text</button>
</div>
</div>
</div>
</div>
</div>
</template>
Шаг 2:сниппеты CSS
<style scoped>
.card {
display: flex;
/* background-color: #504fb5; */
height: 100%;
justify-content: center;
}
.card-border {
border: outset;
color: black;
background-image: url('../../../../Desktop/imgs/270AD9C6-5B63-4DAA-B1A0-1EDBC04B7362.jpeg');
box-shadow: rgba(132, 234, 229, 0.2) 0 80px 15px 15px;
/* background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB); */
border-radius: 20px;
}
.container {
width: auto;
height: 100%;
}
.Text-Area {
display: flex;
height: 28rem;
justify-content: center;
}
#text_area {
resize: none;
height: 70%;
color: rgba(69, 115, 176, 0.855);
border-radius: 10px;
width: 90%;
}
.Query-Area {
display: flex;
justify-content: center;
}
#query_area {
display: flex;
color: rgb(44, 98, 89);
position: relative;
margin: 5px;
bottom: 130px;
width: 85%;
font-weight: bolder;
height: 30px;
padding: 10px;
border-radius: 10px;
}
.Btns {
display: flex;
justify-content: center;
position: relative;
bottom: 125px;
margin: 20px;
width: 100%;
}
#btn1 {
display: flex;
width: 80%;
background-color: black;
color: white;
height: 50px;
font-weight: bold;
border-radius: 12px;
justify-content: center;
align-items: center;
margin-right: 30px;
}
#btn1:hover {
display: flex;
width: 80%;
cursor:pointer;
background-color: white;
transition: 1s;
color: black;
border-radius: 12px;
justify-content: center;
align-items: center;
margin-right: 30px;
}
</style>
Ура !!! Вы завершили уровень 3 Проектирования своего ChatGPT.
Уровень 4: Добавление функциональности
Здесь мы добавим функциональность в наше приложение.
Шаг 1: импортируйте Axios, написав следующую команду, т. е. импортируйте axios из ‘axios’;
затем мы определяем свойство данных, в котором мы указываем наш ключ API, который мы скопировали, и URL-адрес API, т.е. https://api.openai.com/v1/chat/completions
Шаг 2: - Здесь мы добавим функциональность нашему приложению,
(i) Выберите область запроса в HTML и проверьте, пуста она или нет, если она пуста, мы выдадим предупреждение о Неверный ввод.
(ii) Если область запроса не пуста, мы создадим заголовок и данные для нашего API,
(iii) Заголовок включает две вещи: Авторизация и тип контента.
- в Авторизация мы поместим Bearer и наш Ключ API
- в content-type мы поместим application/json
(iv) Данные включают две вещи, т. е. модель и сообщение. В сообщении у нас есть две вещи, т. е. роль и содержание.
- Здесь модель включает gpt-3.5-turbo, который мы используем в настоящее время, а роль включает пользователя, а контент включает значение что мы получаем из области запроса
Шаг 3.Теперь мы вызовем библиотеку axios с помощью метода Postrequest и включим заголовки , данные и URL-адрес API
Шаг 4.Затем мы получим API, пока API формирует ответ, мы изменим innerText с Generate Text на Generate
Шаг 5.После создания ответа мы поместим Response в textArea, чтобы отобразить вывод.
Шаг 6.Для создания решений, таких как ChatGPT, мы добавим еще одну функцию, которая будет печатать ответ по 5–5 символов.
<script>
import axios from 'axios';
export default {
name: 'OpenAI',
data() {
return {
API_Key: 'Paste your API Key',
API_URL: 'https://api.openai.com/v1/chat/completions'
}
},
methods: {
GenerateText() {
if (this.$refs.query_area.value === '') {
alert('Invalid Input');
this.$refs.query_area.value = '';
return false;
}
else {
this.$refs.myButton.disabled = true;
this.$refs.myButton.style.cursor = 'wait';
this.$refs.myButton.innerText = 'Generating....'
const headers = {
' Authorization': `Bearer ${this.API_Key}`,
'Content-Type': 'application/json'
};
const data = {
model: 'gpt-3.5-turbo',
messages: [{ role: 'user', content: this.$refs.query_area.value }]
};
axios.post(this.API_URL, data, { headers })
.then(response => {
console.log(response.data);
this.printLikeChatGPT(response.data.choices[0].message.content)
this.$refs.myButton.disabled = true;
this.$refs.myButton.innerText = 'Generate Text'
this.$refs.query_area.value = '';
})
.catch(error => {
console.error(error);
});
}
},
printLikeChatGPT(data)
{
this.$refs.myButton.disabled = false;
this.$refs.myButton.style.cursor = 'pointer';
const substring = data;
let i =0;
const setInter = setInterval(()=>{
this.$refs.text_area.value += substring.slice(i,i+5);
i +=5;
if(this.$refs.text_area.value == data)
{
clearInterval(setInter);
}
},200)
},
}
}
</script>
Поздравляем !!! Вы успешно завершили уровень 4 раздела Добавление функций.
Теперь откройте свой терминал и нажмите на свой сервер localHost
“ Ура!! 👏👏 Похлопайте себе, создав собственный ChatGPT ”
Краткое содержание
В этом блоге описан весь процесс от настройки кода VS до добавления функциональности в ChatGPT. Я попытался сделать процесс/этапы максимально простыми, разделив шаги на разные уровни level . Надеюсь, весь этот процесс окажется полезным и надеюсь, вам понравилось🤗.
Документация от OpenAI также очень помогла, и я рекомендую следовать ей, так как я тоже следовал ей и нашел ее очень точной и точной.
