Встановіть додаток ChatGPT локально: навіщо і як це зробити

ChatGPT призначений для надання швидких відповідей на ваші запити. Ви можете отримати доступ до ChatGPT онлайн; однак, якщо ви бажаєте встановити програму, цей посібник може допомогти.

Ми обговоримо покроковий метод локального встановлення програми ChatGPT, щоб ви могли використовувати її для отримання швидших відповідей із підвищеною конфіденційністю.

Навіщо встановлювати програму ChatGPT локально?

Встановлення моделі штучного інтелекту на ваш комп’ютер має кілька переваг, деякі з яких згадуються тут:

• Швидкий і чуйний – Ви можете запустити його безпосередньо на своєму пристрої. Це означає, що програма використовуватиме процесор і пам’ять пристрою, що працюватиме ефективніше, ніж під час роботи на віддаленому сервері.
• Підвищена конфіденційність і безпека – Використання програми локально покращить конфіденційність і безпеку ваших особистих даних. Дані більше не будуть передаватися з вашого пристрою на віддалений сервер.
• Можливість налаштування – Встановлення програми локально дозволить вам налаштувати програму відповідно до ваших уподобань і вимог. Ви можете змінити інтерфейс користувача, функції програми тощо.
• Не потрібно стикатися з простоями – Якщо програму встановлено локально, вам не доведеться знову входити або чекати відповіді сервера, якщо він зайнятий. Тому немає простоїв.

Як я можу встановити програму ChatGPT локально?

Перш ніж виконувати кроки для локального встановлення програми ChatGPT, вам слід виконати такі перевірки:

• Спочатку встановіть розширення Node.js на код VS.
• Потім отримайте розширення Git для коду VS.

1. Створіть папку та відкрийте її в Visual Studio Code

1. Клацніть правою кнопкою миші на порожньому місці робочого столу, виберіть новий, потім Папка.
2. Перейменуйте папку як Open_AI_ChatGPT додаток
3. Натисніть вікна ключ, вид Код Visual Studioі натисніть ВІДЧИНЕНО.
4. Перейти до Файл меню та виберіть Відкрити папку.
5. Виберіть папку та натисніть Виберіть папку.
6. Далі перейдіть до Переглянути меню та виберіть Термінал.

2. Перевірте, чи встановлено Node.js

1. Введіть наступний код, щоб перевірити, чи встановлено у вас node.js, і натисніть Enter: вузол -в
2. Якщо виникне помилка, перейдіть до наступного кроку.
3. Перейти до Веб-сайт Node.js і завантажте Node.js
4. Двічі клацніть, щоб відкрити файл інсталятора. Натисніть Далі.
5. Тепер прийміть усі положення та умови та натисніть Далі.
6. Натисніть Далі у всіх наступних вікнах, а потім натисніть встановити щоб розпочати встановлення.
7. Тепер перезапустіть Visual Studio Code.
8. Після цього поверніться до терміналу, введіть наступний код, щоб створити a Ванільне сховище JavaScriptі натисніть Enter: створити npm [електронна пошта захищена] клієнт --шаблон vanilla
9. Далі введіть Ю і натисніть Enter.
10. Виберіть Ваніль як каркас, коли буде запропоновано.
11. Виберіть JavaScript як варіант, коли запитують. Ви побачите багато файлів і папок, створених у папці програми Open_AI_ChatGPT.

3. Встановити залежності

1. Введіть наступну команду, щоб увійти в каталог клієнта, і натисніть Enter: cd .\клієнт\
2. Далі скопіюйте та вставте таку команду та натисніть Enter: встановити npm
3. Перейдіть за цим посиланням і завантажте заархівовану папку під назвою "assets".
4. Тепер скопіюйте папку вилучених активів у папку клієнта.
5. Потім видаліть файли vite.svg і counter.js.
6. Нарешті перемістіть файл favicon від активів папку до громадськість папку.

4. Напишіть код у style.css

1. Скопіюйте та вставте наведений нижче код у папці style.css:
   @import url(" https://fonts.googleapis.com/css2?family=Alegreya+Sans:[електронна пошта захищена];300;400;500;700;800;900&display=swap");
* {
 запас: 0;
 відступ: 0;
 box-sizing: border-box;
 сімейство шрифтів: "Alegreya Sans", sans-serif;
}
тіло {
фон: #343541;
}
#додаток {
ширина: 100vw;
висота: 100vh;
фон: #343541;
дисплей: гнучкий;
flex-direction: колонка;
align-items: center;
justify-content: пробіл між;
}
#chat_container {
згинання: 1;
ширина: 100%;
висота: 100%;
переповнення-y: прокручування;
дисплей: гнучкий;
flex-direction: колонка;
проміжок: 10px;
-ms-overflow-style: немає;
scrollbar-width: немає;
padding-bottom: 20px;
scroll-behavior: гладкий;
}
/* приховує смугу прокрутки */
#chat_container::-webkit-scrollbar {
дисплей: немає;
}
.wrapper {
ширина: 100%;
відступ: 15 пікселів;
}
.ai {
тло: #40414F;
}
.chat {
ширина: 100%;
максимальна ширина: 1280 пікселів;
запас: 0 авто;
 дисплей: гнучкий;
flex-direction: row;
align-items: flex-start;
проміжок: 10px;
}
.profile {
ширина: 36 пікселів;
висота: 36px;
border-radius: 5px;
тло: #5436DA;
дисплей: гнучкий;
justify-content: центр;
align-items: center;
}
.ai .profile {
тло: #10a37f;
}
.profile img {
ширина: 60%;
висота: 60%;
object-fit: містити;
}
.повідомлення {
згинання: 1;
колір: #dcdcdc;
розмір шрифту: 20px;
максимальна ширина: 100%;
переповнення-x: прокручування;
/*
* пробіли — це будь-які пробіли, табуляції або символи нового рядка, які використовуються для форматування коду CSS
* вказує, як слід обробляти пробіли в елементі. Воно подібне до значення "pre", яке повідомляє браузеру розглядати весь пробіл як значний і зберігати його точно так, як воно відображається у вихідному коді.
* Значення попереднього обтікання дозволяє браузеру переносити довгі рядки тексту на кілька рядків, якщо це необхідно.
* Значенням за замовчуванням для властивості пробілу в CSS є "normal". Це вказує веб-переглядачу згортати кілька символів пробілу в один пробіл і переносити текст на кілька рядків, якщо це необхідно, щоб поміститися в його контейнер.
*/
пробіл: попередня обгортка;
-ms-overflow-style: немає;
scrollbar-width: немає;}
/* приховує смугу прокрутки */
.message::-webkit-scrollbar {
дисплей: немає;
}
форма {
ширина: 100%;
максимальна ширина: 1280 пікселів;
запас: 0 авто;
відступ: 10 пікселів;
тло: #40414F;
дисплей: гнучкий;
flex-direction: row;
проміжок: 10px;
}
textarea {
ширина: 100%;
колір: #fff;
розмір шрифту: 18px;
відступ: 10 пікселів;
фон: прозорий;
border-radius: 5px;
межа: немає;
контур: немає;
}
кнопка {
контур: 0;
межа: 0; курсор: покажчик;
фон: прозорий;
}
форма img {
ширина: 30 пікселів;
висота: 30 пікселів;
}

5. Напишіть код у Index.html

1. Введіть такий код у файл index.html:
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   
   
   
   

   
   
   
   
   
   
2. Натисніть Ctrl + S, щоб зберегти сценарій.
3. Перейдіть на ліву панель Visual Studio Code та перейменуйте main.js на script.js.

6. Виконуйте команди в терміналі

1. Підійдіть до терміналу та натисніть Ctrl + C щоб побачити, де ви будете писати команди. Ви повинні бути в папці клієнта. Якщо ні, введіть таку команду та натисніть Enter: cd клієнт
2. Введіть таку команду та натисніть Enter: npm run dev
3. Ви отримаєте веб-адресу, щоб побачити, як це виглядає на даний момент. Якщо ви отримуєте помилку, згадану на знімку екрана, рухайтеся вперед.

7. Запишіть код у файл script.js

1. Видаліть вміст, присутній у файлі script.js, і скопіюйте та вставте наступний код:
   імпорт бота з './assets/bot.svg'
   імпортувати користувача з './assets/user.svg'
   const form = document.querySelector('form');
   const chatContainer = document.querySelector('#chat_container');
   нехай loadInterval;
   завантажувач функцій (елемент) {
   element.textContent = '';
   loadInterval = setInterval(() => {
   // Оновити текстовий вміст індикатора завантаження
   element.textContent += '.';
   // Якщо індикатор завантаження досяг трьох точок, скиньте його
   if (element.textContent '...') {
   element.textContent = '';
   }
   }, 300)
   }
   функція typeText (елемент, текст) {
   нехай індекс = 0;
   let interval = setInterval(() => {
   if (index < text.length) {
   element.innerHTML += text.charAt (індекс);
   індекс++;
   } ще {
   clearInterval (інтервал);
   }
   }, 20)
   }
   функція generateUniqueId() {
   const timestamp = Date.now();
   const randomNumber = Math.random();
   const hexadecimalString = randomNumber.toString (16);
   return `id-${timestamp}-${hexadecimalString}`;
   }
   функція chatStripe (isAi, значення, uniqueId) {
   повернення (
   `
   
   
   

   
   

   
   src=${isAi? бот: користувач}
   alt="${isAi? 'бот': 'користувач'}"
   />
   

   
   

   ${value}

   
   

   
   
   
   `
   )
   }
   const handleSubmit = async (e) => {
   e.preventDefault();
   const data = new FormData (форма);
   // чат користувача
   chatContainer.innerHTML += chatStripe (false, data.get('prompt'));
   // щоб очистити введення текстового поля
   form.reset();
   // chatstripe бота
   const uniqueId = generateUniqueId();
   chatContainer.innerHTML += chatStripe (true, " ", uniqueId);
   // для фокусування прокрутіть униз
   chatContainer.scrollTop = chatContainer.scrollHeight;
   // певне повідомлення div
   const messageDiv = document.getElementById (uniqueId);
   // messageDiv.innerHTML = "..."
   завантажувач (messageDiv);
   const response = await fetch(' http://localhost: 8001/', {
   метод: 'POST',
   заголовки: {
   'Content-Type': 'application/json'
   },
   тіло: JSON.stringify({
   підказка: data.get('підказка')
   })
   })
   clearInterval (loadInterval);
   messageDiv.innerHTML = '';
   if (response.ok) {
   const data = очікування response.json();
   const parsedData = data.bot.trim();
   typeText (messageDiv, parsedData);
   } ще {
   const err = очікування response.text();
   messageDiv.innerHTML = "Щось пішло не так";
   насторожити (помилитися);
   }
   }
   form.addEventListener('submit', handleSubmit);
   form.addEventListener('keyup', (e) => {
   if (e.keyCode 13) {
   handleSubmit (e);
   }
   })
2. Потім натисніть Ctrl + С щоб зберегти сценарій.

8. Створіть нову папку в папці програми Open_AI_ChatGPT і встановіть модулі

1. Створіть папку в Програма Open_AI_ChatGPT папку та назвіть її Сервер.
2. ВІДЧИНЕНО Термінал і натисніть Crtl + C щоб зупинити запущену програму.
3. Введіть наступну команду та натисніть Enter, щоб вийти з папки клієнта: cd ..
4. Скопіюйте та вставте наступну команду, щоб увійти в Сервер каталог і натисніть Enter: cd сервер
5. Введіть таку команду та натисніть Enter, щоб створити файл package.json у папці сервера: npm init -y
6. Щоб установити залежності, введіть наступну команду та натисніть Enter. Це створить новий файл під назвою package-lock.json: npm встановити cors dotenv express nodemon openai

9. Згенеруйте ключ API та вкажіть його в .env

1. Перейти до Відкрити веб-сайт API і увійдіть.
2. Тепер натисніть Особисті і виберіть Переглянути ключі API.
3. Натисніть Створіть новий секретний ключ і скопіюйте ключ.
4. В сервер створіть новий файл і назвіть його .env.
5. В .env файлу, введіть наступний код після заміни ключа API на ключ, який ви скопіювали з веб-сайту Open API, і натисніть Enter: OPENAI_API_KEY="Ключ API"

10. Створіть новий файл server.js і напишіть скрипт

1. Створіть новий файл у папці сервера та перейменуйте його в server.js.
2. Скопіюйте та вставте наступний сценарій у цей файл і натисніть Ctrl+С щоб зберегти файл:

імпорт експрес з 'експрес';
імпорт * як dotenv з 'dotenv';
імпорт cors з 'cors';
імпорт { Конфігурація, OpenAIApi } з 'openai';
dotenv.config();
конфігурація const = нова конфігурація({
apiKey: process.env. OPENAI_API_KEY,
});
const openai = новий OpenAIApi (конфігурація);
const app = express();
app.use (cors());
app.use (express.json());
app.get('/', async (req, res) => {
res.status (200).send({
повідомлення: "Привіт від GPT!",
})
});
app.post('/', async (req, res) => {
спробувати {
const prompt = req.body.prompt;
const response = await openai.createCompletion({
модель: "text-davinci-003",
підказка: `${prompt}`,
temperature: 0, // Вищі значення означають, що модель більше ризикуватиме.
max_tokens: 3000, // Максимальна кількість токенів для генерації під час завершення. Більшість моделей мають довжину контексту 2048 токенів (за винятком найновіших моделей, які підтримують 4096).
top_p: 1, // альтернатива вибірці з температурою, яка називається ядерною вибіркою
frequency_penalty: 0,5, // Число від -2,0 до 2,0. Позитивні значення штрафують нові токени на основі їх наявна частота в тексті на даний момент, зменшуючи ймовірність повторення моделлю того самого рядка дослівно.
present_penalty: 0, // Число від -2,0 до 2,0. Позитивні значення штрафують нові маркери залежно від того, чи з’явилися вони в тексті до цього часу, збільшуючи ймовірність того, що модель обговорюватиме нові теми.
});
res.status (200).send({
бот: response.data.choices[0].text
});
} catch (помилка) {
console.log (помилка);
res.status (500).send (помилка || 'Щось пішло не так');
}
});
app.listen (5000, () => console.log('сервер ШІ запущено на http://localhost: 8001'));

11. Напишіть код у package.json

1. Скопіюйте та вставте наступний код і натисніть Ctrl + С зберегти:

{
"ім'я": "сервер",
"версія": "1.0.0",
"опис": "",
"type": "модуль",
"сценарії":{
"сервер": "сервер nodemon"
},
"ключові слова": [],
"автор": "",
"ліцензія": "ISC",
"залежності": {
"cors": "^2.8.5",
"dotenv": "^16.0.3",
"express": "^4.18.2",
"nodemon": "^2.0.20",
"openai": "^3.1.0"
}
}

12. Перевірте код

1. Тепер клацніть меню «Термінал» у коді Visual Studio та виберіть «Розлитий термінал».
2. У вас буде два термінали; назвемо їх термінальний сервер і термінальний клієнт.
3. На сервері терміналів натисніть Ctrl + C. Введіть таку команду, щоб увійти в каталог сервера, і натисніть Enter: cd server
4. Далі скопіюйте та вставте таку команду та натисніть Enter, щоб запустити сервер: сервер запуску npm
5. Натисніть представлене посилання, і ви побачите на сторінці повідомлення Привіт від GPT
6. Тепер у термінальному клієнті натисніть Ctrl + C. Введіть таку команду, щоб увійти в каталог клієнта, і натисніть Enter: cd клієнт
7. Скопіюйте та вставте таку команду та натисніть Enter, щоб запустити клієнт: npm run dev
8. Далі натисніть на посилання та введіть Привіт як ся маєш; ви бачите, що бот шукає відповідь.

13. Встановіть програму Git Bash і налаштуйте її за допомогою облікового запису GitHub

1. Ви можете пропустити цей крок, якщо його вже налаштовано. Завантажте програму Git Bash.
2. Увійдіть у свій Обліковий запис GitHub.
3. Під час встановлення збережіть його в папці Open_AI_ChatGPT.
4. Далі натисніть клавішу Windows, введіть edit the system Environment variables і натисніть Open.
5. Двічі клацніть шлях і натисніть Редагувати.
6. Додайте сюди шлях до файлу git, потім натисніть OK і OK.
7. Запустіть Git Bash, введіть наступну команду після заміни імені користувача на ім’я користувача облікового запису GitHub і натисніть Enter: git config --global user.name "ім'я користувача"
8. Скопіюйте та вставте таку команду після заміни адреси електронної пошти своєю адресою електронної пошти та натисніть Enter: git config --global user.email "адреса електронної пошти"
9. Перейдіть до облікового запису GitHub, клацніть стрілку спадного меню та виберіть Налаштування. Тепер перейдіть до налаштувань розробника.
10. Розгорніть Особисті маркери доступу та виберіть Точні маркери. Натисніть Створити новий маркер.
11. Перейменуйте його та виберіть термін дії. Потім скопіюйте маркер і збережіть його в блокноті.
12. Введіть наступні команди одну за одною та натисніть Enter: git config --global credential.helper wincredgit credential-manager-core configure
13. Дотримуйтесь підказок, щоб налаштувати його та вставити маркер, згенерований під час запиту пароля.
14. Закрийте програму Git Bash.

14. Створіть репозиторій і опублікуйте код

14.1 Створіть репозиторій

1. Увійдіть у свій Обліковий запис GitHub.
2. Знайдіть стрілка спадного меню поруч із зображенням профілю та виберіть Ваші сховища.
3. Натисніть новий.
4. Введіть Назва сховища, виберіть Громадськийі натисніть Створити репозиторій.
5. Перейдіть до коду VS, натисніть Ctrl + Cі переконайтеся, що ви перебуваєте в програмі Open_AI_ChatGPT або в кореневій папці. Якщо ні, введіть наступний код і натисніть Enter: компакт-диск
6. Тоді, в сервер папку, додайте новий файл і назвіть його .gitignore.
7. В .gitignore файл, введіть наступний код, щоб переконатися .env і node_modules не вставляються GitHub:
   .env
node_modules

14.2 Опублікуйте свій код у репозиторії

1. Перейдіть до коду VS, скопіюйте та вставте наступні команди одну за одною та натисніть Enter після кожної команди: git initgit commit -m "перша фіксація"git гілка -M main
2. Введіть таку команду після заміни https://github.com/SrishtiSisodia/CHAT-BOT-APP з адресою вашого сховища, зазначеною на GitHub:
   git віддалене додавання джерела https://github.com/SrishtiSisodia/CHAT-BOT-APP
3. Тепер, щоб ввести код, введіть таку команду та натисніть Enter: git push -u origin main
4. Перезавантажте свою сторінку GitHub, і ваш код буде завантажено туди.
5. На коді VS натисніть Ctrl + C на термінальному сервері та термінальному клієнті, щоб зупинити їх запуск.

15. Розгорніть сервер

1. Перейти до візуалізації веб-сайті та зареєструйтеся за допомогою GitHub.
2. Ви побачите інформаційну панель, натисніть «Створити», а потім виберіть «Веб-служби».
3. Знайдіть «Підключити нове сховище», введіть URL-адресу свого сховища в загальнодоступному сховищі Git і натисніть «Підключити».
4. На наступній сторінці додайте ім’я, виберіть регіон, виберіть гілку як основну, виберіть кореневий каталог як сервер, виберіть середовище як вузол і введіть Команда Start - запустити сервер npm
5. Натисніть «Безкоштовно» та натисніть «Створити веб-службу».
6. Сервер буде розгорнуто; зачекайте, доки статус розгортання стане активним.
7. Перейдіть до середовища; для Key введіть OpenAI_API_Key, а для значення введіть секретний ключ API, який ви створили на кроці 9.
8. Тепер у вас буде веб-адреса; додайте його до файлу script.js. Потім у коді VS перейдіть до файлу script.js і замініть веб-адресу в коді, згаданому нижче, новою веб-адресою з візуалізованого веб-сайту:
   const response = await fetch(' http://localhost: 8001/'const response = await fetch(' https://chatgptapp-lswi.onrender.com/'
9. На Код VS Термінал, введіть наступні команди одну за одною та натискайте Enter після кожної команди: git add.git commit -m 'оновити URL-адресу сервера'git push

16. Розгорніть передню частину

1. Перейдіть на сайт Vercel.
2. Натисніть Почніть розгортання.
3. Під Імпорт сховища Git, натисніть Продовжити з GitHub.
4. Введіть свій Ім'я користувача GitHub виберіть назву сховища та натисніть Імпорт.
5. Під Налаштувати проект, виберіть назву.
6. Змінити кореневий каталог від / до клієнт, натисніть Продовжити і Розгорнути.
7. Поверніться на інформаційну панель і натисніть Відвідайте.
8. Тепер ви можете побачити програму.

Отже, це детальні кроки для локального встановлення програми ChatGPT на вашому пристрої. Десь застряг? Будь ласка, зазначте свої запитання чи проблеми в розділі коментарів нижче.