Установите приложение ChatGPT локально: зачем и как это сделать

ЧатGPT предназначен для обеспечения быстрых ответов на ваши запросы. Вы можете получить доступ к 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: узел -v
2. Если это происходит с ошибкой, перейдите к следующему шагу.
3. Перейти к Веб-сайт Node.js и загрузите Node.js
4. Дважды щелкните, чтобы открыть файл установщика. Нажмите Следующий.
5. Теперь примите все условия и нажмите Следующий.
6. Нажмите Следующий во всех следующих окнах, затем нажмите Установить чтобы начать установку.
7. Теперь перезапустите Visual Studio Code.
8. После этого вернитесь к терминалу, введите следующий код, чтобы создать Репозиторий ванильного JavaScriptи нажмите Enter: нпм создать [электронная почта защищена] клиент --template ваниль
9. Далее введите Д и нажмите Enter.
10. Выбирать ваниль в качестве основы при появлении запроса.
11. Выбирать JavaScript как вариант, когда спросят. Вы увидите множество файлов и папок, созданных в папке приложения Open_AI_ChatGPT.

3. Установить зависимости

1. Введите следующую команду, чтобы войти в каталог клиента, и нажмите Enter: компакт-диск .\клиент\
2. Затем скопируйте и вставьте следующую команду и нажмите Enter: установка нпм
3. Перейдите по этой ссылке и загрузите заархивированную папку с именем assets.
4. Теперь скопируйте папку извлеченных активов в папку клиента.
5. Затем удалите файлы vite.svg и counter.js.
6. Наконец, переместите файл фавикона из ресурсы папку в публичный папка.

4. Пишите код в style.css

1. Скопируйте и вставьте приведенный ниже код в папку style.css:
   @импорт URL(" https://fonts.googleapis.com/css2?family=Alegreya+Sans:[электронная почта защищена];300;400;500;700;800;900&display=swap");
* {
 маржа: 0;
 заполнение: 0;
 box-sizing: граница-коробка;
 семейство шрифтов: "Alegreya Sans", без засечек;
}
тело {
фон: #343541;
}
#приложение {
ширина: 100vw;
высота: 100вх;
фон: #343541;
дисплей: гибкий;
flex-направление: столбец;
выравнивание элементов: по центру;
выравнивание содержимого: пробел между;
}
#чат_контейнер {
гибкий: 1;
ширина: 100%;
высота: 100%;
переполнение-у: прокрутка;
дисплей: гибкий;
flex-направление: столбец;
зазор: 10 пикселей;
-ms-overflow-style: нет;
ширина полосы прокрутки: нет;
нижний отступ: 20px;
поведение прокрутки: гладкое;
}
/* скрывает полосу прокрутки */
#chat_container::-webkit-scrollbar {
дисплей: нет;
}
.обертка {
ширина: 100%;
отступ: 15 пикселей;
}
.ай {
фон: #40414F;
}
.чат {
ширина: 100%;
максимальная ширина: 1280 пикселей;
поле: 0 авто;
 дисплей: гибкий;
flex-направление: строка;
выравнивание элементов: flex-start;
зазор: 10 пикселей;
}
.профиль {
ширина: 36 пикселей;
высота: 36 пикселей;
радиус границы: 5px;
фон: #5436DA;
дисплей: гибкий;
выравнивание содержимого: по центру;
выравнивание элементов: по центру;
}
.ai .профиль {
фон: #10a37f;
}
.профиль изображения {
ширина: 60%;
высота: 60%;
подходит для объекта: содержит;
}
.сообщение {
гибкий: 1;
цвет: #dcdcdc;
размер шрифта: 20px;
максимальная ширина: 100%;
переполнение-x: прокрутка;
/*
* пустое пространство относится к любым пробелам, символам табуляции или новой строки, которые используются для форматирования кода CSS.
* указывает, как должно обрабатываться пустое пространство внутри элемента. Это похоже на значение «pre», которое указывает браузеру рассматривать все пробелы как значимые и сохранять их точно такими, как они появляются в исходном коде.
* Значение pre-wrap позволяет браузеру переносить длинные строки текста на несколько строк, если это необходимо.
* Значение по умолчанию для свойства пробела в CSS — «нормальное». Это говорит браузеру свернуть несколько пробелов в один пробел и переносить текст на несколько строк по мере необходимости, чтобы он поместился в его контейнере.
*/
пробел: предварительная обертка;
-ms-overflow-style: нет;
ширина полосы прокрутки: нет;}
/* скрывает полосу прокрутки */
.message::-webkit-полоса прокрутки {
дисплей: нет;
}
форма {
ширина: 100%;
максимальная ширина: 1280 пикселей;
поле: 0 авто;
отступ: 10 пикселей;
фон: #40414F;
дисплей: гибкий;
flex-направление: строка;
зазор: 10 пикселей;
}
текстовая область {
ширина: 100%;
цвет: #fff;
размер шрифта: 18px;
отступ: 10 пикселей;
фон: прозрачный;
радиус границы: 5px;
граница: нет;
контур: нет;
}
кнопка {
контур: 0;
граница: 0; курсор: указатель;
фон: прозрачный;
}
форма изображения {
ширина: 30 пикселей;
высота: 30 пикселей;
}

5. Напишите код в Index.html

1. Введите следующий код в файл index.html:
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   
   
   
   

   
   
   
   
   
   
2. Нажмите Ctrl + S, чтобы сохранить скрипт.
3. Перейдите на левую панель Visual Studio Code и переименуйте main.js в script.js.

6. Выполнение команд в Терминале

1. Подойдите к терминалу и нажмите Ctrl + С чтобы увидеть, где вы будете писать команды. Вы должны быть в папке клиента. Если нет, введите следующую команду и нажмите Enter: компакт-диск клиент
2. Введите следующую команду и нажмите Enter: нпм запустить разработчик
3. Вы получите веб-адрес, чтобы увидеть, как это выглядит до сих пор. Если вы получите ошибку, указанную на скриншоте, двигайтесь вперед.

7. Напишите код в файле script.js

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

   
   

   
   источник = $ {isAi? бот: пользователь}
   alt="${isAi? 'бот': 'пользователь'}"
   />
   

   
   

   ${значение}

   
   

   
   
   
   `
   )
   }
   const handleSubmit = async (e) => {
   e.preventDefault();
   константные данные = новые данные формы (форма);
   // полоса чата пользователя
   chatContainer.innerHTML += chatStripe (false, data.get('prompt'));
   // чтобы очистить текстовое поле ввода
   форма.сброс();
   // полоса чата бота
   const uniqueId = generateUniqueId();
   chatContainer.innerHTML += chatStripe (true, " ", uniqueId);
   // для фокусировки прокрутите вниз
   chatContainer.scrollTop = chatContainer.scrollHeight;
   // конкретный раздел сообщения
   const messageDiv = document.getElementById (uniqueId);
   // messageDiv.innerHTML = "..."
   загрузчик (messageDiv);
   константный ответ = ожидание выборки(' http://localhost: 8001/', {
   метод: «ПОСТ»,
   заголовки: {
   «Тип контента»: «приложение/json»
   },
   тело: JSON.stringify({
   подсказка: data.get('подсказка')
   })
   })
   ClearInterval (интервал загрузки);
   messageDiv.innerHTML = '';
   если (ответ.хорошо) {
   константные данные = ожидание response.json();
   const parsedData = data.bot.trim();
   typeText (messageDiv, parsedData);
   } еще {
   const err = ожидание ответа.текст();
   messageDiv.innerHTML = "Что-то пошло не так";
   предупреждение (ошибка);
   }
   }
   form.addEventListener('отправить', handleSubmit);
   form.addEventListener('keyup', (e) => {
   если (e.keyCode 13) {
   дескриптор отправки (е);
   }
   })
2. Затем нажмите Ctrl + С чтобы сохранить сценарий.

8. Создайте новую папку внутри папки приложения Open_AI_ChatGPT и установите модули.

1. Создайте папку в Приложение Open_AI_ChatGPT папку и назовите ее Сервер.
2. Открыть Терминал и нажмите Кртл + С чтобы остановить работающее приложение.
3. Введите следующую команду и нажмите Enter, чтобы выйти из папки Client: CD ..
4. Скопируйте и вставьте следующую команду, чтобы ввести Сервер каталог и нажмите Enter: компакт-диск сервер
5. Введите следующую команду и нажмите Enter, чтобы создать файл package.json в папке сервера: инициализация npm -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();
константная конфигурация = новая конфигурация ({
APIKey: процесс.env. OPENAI_API_KEY,
});
const openai = новый OpenAIApi (конфигурация);
константное приложение = экспресс();
app.use(cors());
app.use(express.json());
app.get('/', async (req, res) => {
рез.статус (200).отправить({
сообщение: «Привет из GPT!»,
})
});
app.post('/', async (req, res) => {
пытаться {
константная подсказка = req.body.prompt;
константный ответ = ожидание openai.createCompletion({
модель: "текст-davinci-003",
подсказка: `${подсказка}`,
температура: 0, // Более высокие значения означают, что модель будет больше рисковать.
max_tokens: 3000, // Максимальное количество токенов для генерации при завершении. Большинство моделей имеют длину контекста 2048 токенов (за исключением новейших моделей, которые поддерживают 4096).
top_p: 1, // альтернатива выборке по температуре, называемая выборкой ядра
частота_пенальти: 0,5, // число между -2,0 и 2,0. Положительные значения штрафуют новые токены на основе их существующая частота в тексте до сих пор, уменьшая вероятность того, что модель повторит одну и ту же строку дословно
присутствия_пенальти: 0, // число между -2.0 и 2.0. Положительные значения штрафуют новые токены в зависимости от того, появляются ли они в тексте до сих пор, что увеличивает вероятность того, что модель будет говорить о новых темах.
});
рез.статус (200).отправить({
бот: response.data.choices[0].text
});
} поймать (ошибка) {
console.log (ошибка);
res.status (500).send (ошибка || 'Что-то пошло не так');
}
});
app.listen (5000, () => console.log('Сервер ИИ запущен http://localhost: 8001'));

11. Пишите код в package.json

1. Скопируйте и вставьте следующий код и нажмите Ctrl + С сохранить:

{
"имя": "сервер",
"версия": "1.0.0",
"описание": "",
"тип": "модуль",
"скрипты": {
"сервер": "сервер nodemon"
},
"ключевые слова": [],
"автор": "",
"лицензия": "ISC",
"зависимости": {
"Корс": "^ 2.8.5",
"дотенв": "^16.0.3",
"экспресс": "^4.18.2",
"узел": "^2.0.20",
"опенай": "^3.1.0"
}
}

12. Протестируйте код

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

13. Установите приложение Git Bash и настройте его с помощью своей учетной записи GitHub.

1. Вы можете пропустить этот шаг, если он уже настроен. Загрузите приложение Git Bash.
2. Войдите в свой Аккаунт GitHub.
3. Во время установки сохраните его в папку Open_AI_ChatGPT.
4. Затем нажмите клавишу Windows, введите «Изменить системные переменные среды» и нажмите «Открыть».
5. Дважды щелкните путь и нажмите «Изменить».
6. Добавьте сюда путь к файлу git, затем нажмите «ОК» и «ОК».
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 wincredНастройка ядра диспетчера учетных данных git
13. Следуйте инструкциям, чтобы настроить его, и вставьте токен, сгенерированный при запросе пароля.
14. Закройте приложение Git Bash.

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

14.1 Создать репозиторий

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

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

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

15. Развернуть сервер

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

16. Разверните интерфейс

1. Перейти на сайт Vercel.
2. Нажмите Начать развертывание.
3. Под Импорт Git-репозитория, нажмите Продолжить с GitHub.
4. Введите свой Имя пользователя GitHub и выберите имя репозитория и нажмите Импортировать.
5. Под Настроить проект, выберите имя.
6. Изменить корневая директория от / к клиент, нажмите Продолжать и Развертывать.
7. Вернитесь на панель инструментов и нажмите Посещать.
8. Теперь вы можете увидеть приложение.

Итак, это подробные шаги по установке приложения ChatGPT локально на ваше устройство. Где-то застрял? Пожалуйста, укажите свои вопросы или опасения в разделе комментариев ниже.