Lovelace
velace's first appearance in these alleys.
Прочтите документацию Lovelace.
Lovelace — это веб-приложение, которое позволяет свободно взаимодействовать с ChatGPT с помощью библиотеки Python GPT4FREE. Программное обеспечение написано на JavaScript с использованием NodeJS + Express + SocketIO на стороне сервера и Vite + ReactJS на стороне интерфейса.
Бэкэнд позволяет различным клиентам взаимодействовать с ChatGPT. Если ваша цель Lovelace — использовать его в своих целях или целях, вы можете только смонтировать Backend-сервер в своей сети и игнорировать другую сторону приложения, то есть клиента; бэкэнд позволяет взаимодействовать через API, или вы можете использовать соединение через WebSocket с помощью какого-либо клиента SocketIO.
Оглавление:
Установить Lovelace на ваш компьютер или сервер относительно просто, никаких серьезных сложностей в этом процессе возникнуть не должно; однако, прежде чем приступить к клонированию репозитория, убедитесь, что у вас есть как минимум NodeJS v18.0.0 и Python v3.10 .
Учтите, что если в вашей системе не установлена необходимая версия NodeJS, вы можете использовать менеджер версий NVM (Node Version Manager) .
# Installing NVM on your system...
export NVM_DIR= " $HOME /.nvm " && (
git clone https://github.com/nvm-sh/nvm.git " $NVM_DIR "
cd " $NVM_DIR "
git checkout ` git describe --abbrev=0 --tags --match " v[0-9]* " $( git rev-list --tags --max-count=1 ) `
) && . " $NVM_DIR /nvm.sh "
# Once NVM has been installed, we proceed to install the specified NodeJS version (> 18.0.0)
nvm install 18.0.0 Если в вашей системе нет Python v3.10 , вы можете рассмотреть следующее:
# (DEBIAN)
sudo add-apt-repository ppa:deadsnakes/ppa && sudo apt update && sudo apt install python3.10
# (MacOS)
brew install [email protected]Таким же образом рассмотрите возможность установки pip в вашей системе, поскольку он будет использоваться при установке необходимых модулей для возможности монтирования внутреннего сервера в сети.
curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py
python3 get-pip.pyТеперь, предполагая, что в вашей системе установлены вышеупомянутые зависимости, мы можем перейти к следующему шагу...
Прежде чем мы начнем установку и настройку внутреннего сервера в качестве внешнего интерфейса Lovelace, нам необходимо клонировать репозиторий Github, где находится исходный код приложения.
Учтите, что на этом этапе чтения я предполагаю, что у вас уже есть Python версии 3.10 или выше и NodeJS версии 18.0.0; В предыдущем чтении, прежде чем приступить к установке, были объяснены шаги по установке каждого из них.
# Cloning the Github repository that contains the source code (I stole it from a cyber).
git clone https://github.com/CodeWithRodi/Lovelace/ && cd Lovelace
# Accessing the "Client" folder, which stores the source code of the
# Vite + ReactjS (Frontend) application, and then installing its required modules from NPM.
cd Server && npm install --force && pip install -r Requirements.txt
# Like the previous line, we access the "Server" folder that houses the source code
# for the Lovelace Backend, then we install the NPM packages required to mount on the network.
cd ../Client && npm install --force Возможно, вы предпочитаете запускать все в одной строке...
git clone https://github.com/CodeWithRodi/Lovelace/ && cd Lovelace && cd Server && npm install --force && pip install -r Requirements.txt && cd ../Client && npm install --force && cd .. Имейте в виду, что когда вы устанавливаете необходимые модули для запуска сервера, выполняется команда pip install -r Requirements.txt для установки необходимых пакетов для использования библиотеки GPT4FREE . из Питона. Если у вас не установлен pip или вы не установили пакеты Python, даже если у вас есть внутренний сервер и клиент, смонтированные в сети, вы не сможете ничего сделать, потому что при поступлении запроса к Как через WebSocket, так и через API с использованием библиотеки python-shell NodeJS из серверной части осуществляется связь с соответствующим файлом Python, который отвечает за возврат ответа, и если он не имеет необходимых требований, он выдает ошибку.
После того, как вы клонировали репозиторий Github, мы можем перейти к настройке и сетевому подключению как внешнего, так и внутреннего приложений, однако давайте немного углубимся в то, что хранит каждую подпапку, содержащую папку, созданную в результате клонирования репозитория.
| Папка | Описание |
|---|---|
| Клиент | В папке «Клиент» хранится исходный код приложения Vite + React, то есть фронтенда Lovelace, где вы можете смонтировать сайт в своей сети, чтобы иметь возможность общаться с бэкендом и устанавливать качественный диалог с ИИ! |
| Документация | В папке «Документация» находится исходный код документации по программному обеспечению: https://lovelace-docs.codewithrodi.com/. |
| Сервер | В папке «Сервер» находится исходный код бэкэнда Lovelace, который создан на базе NodeJS с использованием Express для предоставления API и SocketIO для передачи ответов через WebSocket. |
Также, кроме папок, вам попадутся некоторые файлы, которые так же будут представлены вместе с описанием ниже.
| Файл | Описание |
|---|---|
| .clocignore | Его использует программное обеспечение «cloc», которое позволяет подсчитывать строки программного кода, разделять их по технологии и комментариям, которые может иметь используемый язык программирования. Внутри файла «clocignore» указаны пути к тем файлам и каталогам, которые программа должна игнорировать при подсчете. |
| ЛИЦЕНЗИЯ | Содержит лицензию Lovelace, под действие которой распространяется исходный код Клиента и Сервера. Это программное обеспечение распространяется по лицензии MIT. |
После того как репозиторий был клонирован и вы впоследствии установили необходимые модули NPM сервера и клиента, пришло время настроить серверную часть, чтобы начать использовать программное обеспечение.
Начнем с сервера, именно здесь произойдет волшебство: вы сможете общаться с ИИ через запросы API или с помощью WebSocket; Далее вам будет представлена серия команд, позволяющих смонтировать сервер в сети.
# Accessing the <Server> folder that houses the repository you cloned earlier
cd Server/
# Running the server...
npm run start Если вы все сделали правильно, сервер уже должен быть запущен в вашей системе. Вы можете проверить это, зайдя на http://0.0.0.0:8000/api/v1/ !
Скрипт ( npm run <script_name> ) | Описание |
|---|---|
| начинать | Начинается нормальное выполнение сервера, вы можете рассмотреть этот вариант, если захотите смонтировать его в продакшене. |
| разработчик | Запустите выполнение сервера в режиме разработки с помощью пакета «nodemon». |
Вы должны знать, что переменные среды представляют собой динамические символьные значения, которые позволяют вам хранить информацию, связанную с учетными данными, конфигурациями и т. д., тогда вам будет представлен файл «.env», расположенный в исходном коде сервера, где, в свою очередь, у вас будет описание работы доступных переменных.
# Specifies the execution mode of the server, considers the value of <NODE_ENV>
# can be <development> and <production>.
NODE_ENV = production
# Address of the server where the client application is running.
CLIENT_HOST = https://lovelace.codewithrodi.com/
# Port where the server will
# start executing over the network.
SERVER_PORT = 8000
# Hostname where the server will be launched in
# complement with the previously established
# port on the network.
SERVER_HOST = 0.0.0.0
# If you have an SSL certificate, you must
# specify the certificate and then the key.
SSL_CERT =
SSL_KEY =
# Others...
CORS_ORIGIN = *
BODY_MAX_SIZE = 100kbПредполагая, что к этому моменту чтения у вас уже настроен серверный сервер в сети, мы можем продолжить настройку клиентского сервера, где, таким образом, вы можете начать взаимодействовать с ИИ через веб-сайт, который вы дальше настрою...
Клиентское приложение создано с помощью ReactJS с использованием Vite в качестве инструмента разработки. С помощью всего лишь нескольких команд терминала вы сможете быстро настроить и развернуть приложение в своей сети в кратчайшие сроки! Следуя нашим инструкциям и используя возможности ReactJS и Vite, вы получите простой и эффективный процесс установки.
Убедитесь, что для корректного использования веб-приложения необходимо, чтобы сервер уже работал в сети.
# Accessing the existing <Client> folder within the cloned repository
cd Client/
# Assuming you have already installed the necessary npm packages <npm install --force>
# we will proceed to start the server in development mode
npm run dev Удачного взлома!... Ваш сервер должен работать по адресу http://0.0.0.0:5173/ .
Точно так же, как это было сделано в предыдущем чтении, далее будет представлен список переменных среды, которые клиентское приложение имеет в своем файле «.env», вместе с его описанием.
# Address where the backend server was mounted, you must
# be sure to specify in the address if you have ridden
# the server under HTTPS, changing <http> to <https> ;)
VITE_SERVER = http://0.0.0.0:8000
# The server has a suffix to be able to access its respective API
# in this case we use v1
VITE_API_SUFFIX = /api/v1
# Others...
VITE_DONATE_LINK = https://ko-fi.com/codewithrodi
VITE_GPT4FREE_LINK = https://github.com/xtekky/gpt4free
VITE_SOFTWARE_REPOSITORY_LINK = https://github.com/codewithrodi/Lovelace Если вы хотите изменить сетевой адрес или порт, который используется при запуске сервера Vite в сети, вы можете рассмотреть возможность изменения файла vite.config.js . Этот файл содержит настройки конфигурации сервера Vite. Ниже приведено содержимое файла vite.config.js :
export default defineConfig ( {
plugins : [ react ( ) ] ,
server : {
// If you want to change the network address where the server will be mounted
// you must change <0.0.0.0> to the desired one.
host : '0.0.0.0' ,
// Following the same line above, you must modify the port <5173>
// for which you want to ride on the network.
port : 5173
} ,
define : {
global : { }
}
} ) ;Обратите внимание, что изменение этих настроек следует выполнять с осторожностью, поскольку это может повлиять на доступность сервера. Обязательно выберите подходящий сетевой адрес и порт, который еще не используется.
Vite – популярный выбор для разработки веб-приложений, написанных на JavaScript, благодаря своей высокоэффективной среде. Он предлагает значительные преимущества, такие как резкое сокращение времени запуска при загрузке новых модулей или компиляции исходного кода в процессе разработки. Используя Vite, разработчики могут повысить производительность и ускорить циклы разработки. Оптимизация скорости и производительности делает его ценным инструментом для проектов веб-разработки.
Веб-приложение имеет возможность определять язык веб-браузера, из которого осуществляется доступ к платформе, чтобы позже иметь возможность определить, доступен ли перевод контента на запрошенный язык, если он не существует, перевод будет возвращен. по умолчанию, что соответствует английскому.
Учтите, что для добавления новых переводов вы можете получить доступ к Client/src/Locale/ , где в этой последней папке Locale/ находится серия JSON в следующем формате {LANGUAGE_IN_ISO_369}.json ; Если вы хотите добавить новый перевод, вам просто нужно следовать формату и скопировать соответствующие ключи, значение которых обновляется до нужного языка, который вы создаете.
В настоящее время в веб-приложении существуют следующие переводы: French - Arabic - Chinese - German - English - Spanish - Italian - Portuguese - Russian - Turkish .
Если вы намерены использовать Lovelace для своих индивидуальных нужд и целей, вы можете игнорировать клиентское приложение, реализованное в ReactJS. Вместо этого переключите свое внимание на Сервер, поскольку именно здесь действительно происходят чары.
Имейте в виду, что при взаимодействии с серверной частью с использованием API или WebSocket данные, отправляемые как Model or Role , не чувствительны к регистру, то есть, если значение Model равно gPT-3.5-TUrbO это не будет иметь значения, поскольку оно будет отформатированный из бэкэнда, Prompt , очевидно, также не важен, но значение, присвоенное Provider , равно. В последующих чтениях вы узнаете, как получить доступных провайдеров, которые можно будет использовать при установлении взаимодействия с ИИ, в том же Таким образом, вы сможете узнать, каковы их соответствующие модели, или теперь вы можете получить доступ к тому же пути /api/v1/chat/providers/ общедоступного экземпляра бэкэнда Lovelace и просмотреть информацию.
Вот пример использования API через встроенную функцию Fetch:
const Data = {
// Select the model you want to use for the request.
// <GPT-3.5-Turbo> | <GPT-4>
Model : 'GPT-3.5-Turbo' , // Recommended Model
// Use a provider according to the model you used, consider
// that you can see the list of providers next to the models
// that have available in:
// [GET REQUEST]: http://lovelace-backend.codewithrodi.com/api/v1/chat/providers/
Provider : 'GetGpt' , // Recommended Provider, you can also use 'DeepAi'
// GPT Role
Role : 'User' ,
// Prompt that you will send to the model
Prompt : 'Hi Ada, Who are you?'
} ;
// Note that if you want to use your own instance replace
// <https://lovelace-backend.codewithrodi.com> for the address
// from your server, or <http://0.0.0.0:8000> in case it is
// is running locally.
const Endpoint = 'https://lovelace-backend.codewithrodi.com/api/v1/chat/completions' ;
// We will make the request with the Fetch API provided in a way
// native by JavaScript, specified in the first instance
// the endpoint where our request will be made, while as a second
// parameter we specify by means of an object the method, the header and the
// body that will have the request.
fetch ( Endpoint , {
// /api/v1/chat/completions/
method : 'POST' ,
// We are sending a JSON, we specify the format
// in the request header
headers : { 'Content-Type' : 'application/json' } ,
body : JSON . stringify ( Data )
} )
// We transform the response into JSON
. then ( ( Response ) => Response . json ( ) )
// Once the response has been transformed to the desired format, we proceed
// to display the response from the AI in the console.
. then ( ( Response ) => console . log ( Response . Data . Answer ) )
// Consider that <Response> has the following structure
// Response -> { Data: { Answer: String }, Status: String(Success | ClientError) }
. catch ( ( RequestError ) => console . error ( RequestError ) ) ;Если вы хотите использовать Axios при общении, вы можете рассмотреть:
const Axios = require ( 'axios' ) ;
const Data = {
Model : 'GPT-3.5-Turbo' , // Recommended Model
Provider : 'GetGpt' , // Recommended Provider, you can also use 'DeepAi'
// GPT Role
Role : 'User' ,
Prompt : 'Hi Ada, Who are you?'
} ;
const Endpoint = 'https://lovelace-backend.codewithrodi.com/api/v1/chat/completions' ;
( async function ( ) {
const Response = ( await Axios . post ( Endpoint , Data , { headers : { 'Content-Type' : 'application/json' } } ) ) . data ;
console . log ( Response . Data . Answer ) ;
} ) ( ) ; Вы можете увидеть, как клиент взаимодействует с серверной частью через API, просмотрев файлы Client/src/Services/Chat/Context.jsx и Client/src/Services/Chat/Service.js , где и происходит волшебство.
С внутреннего сервера сервер WebSocket предоставляется с помощью SocketIO, поэтому рекомендуется использовать клиент, предоставляемый той же библиотекой, например npm i socket.io-client в случае NodeJS. Рекомендуется использовать этот тип связи, если вы хотите получить «мгновенный» ответ, поскольку ответ от ИИ, в отличие от использования связи через API, не должен ждать, пока ИИ завершит обработку ответа, чтобы его можно было отобразить. . . При использовании WebSocket ответ от ИИ передается по частям, мгновенно генерируя взаимодействие с клиентом.
const { io } = require ( 'socket.io-client' ) ;
// Using the NodeJS 'readline' module, like this
// allow <Prompts> to be created by the user
// to our console application.
const ReadLine = require ( 'readline' ) . createInterface ( {
input : process . stdin ,
output : process . stdout
} ) ;
// We store the address where the Lovelace backend is mounted.
// In case your instance is running locally
// you can change the value of <Endpoint> to something like <http://0.0.0.0:8000>.
const Endpoint = 'http://lovelace-backend.codewithrodi.com/' ;
( async function ( ) {
const Socket = io ( Endpoint ) . connect ( ) ;
console . log ( `Connecting to the server... [ ${ Endpoint } ]` ) ;
Socket . on ( 'connect' , ( ) => {
console . log ( 'Connected, happy hacking!' ) ;
RunApplicationLoop ( ) ;
} ) ;
Socket . on ( 'disconnect' , ( ) => {
console . log ( 'nDisconnected, bye bye...!' ) ;
process . exit ( 0 ) ;
} ) ;
// We use <process.stdout.write(...)> instead of <console.log(...)> because
// in this way we print directly to the console without each time
// that a part of the response is received, a new line (n) is executed.
Socket . on ( 'Response' , ( StreamedAnswer ) => process . stdout . write ( StreamedAnswer ) ) ;
const BaseQuery = {
// We indicate the model that we want to use to communicate with the AI
// 'GPT-3.5-Turbo' - 'GPT-4'
Model : 'GPT-3.5-Turbo' ,
// Provider to use in the communication, keep in mind that not all
// providers offer ChatGPT 3.5 or ChatGPT 4. You can make a request
// [GET] to <https://lovelace-backend.codewithrodi.com/api/v1/chat/providers/>
Provider : 'GetGpt' ,
Role : 'User' ,
} ;
const HandleClientPrompt = ( ) => new Promise ( ( Resolve , Reject ) => {
const HandleStreamedResponseEnd = ( MaybeError ) => {
if ( MaybeError ) {
return Reject ( MaybeError ) ;
}
Resolve ( ) ;
} ;
ReadLine . question ( 'Prompt > ' , ( Prompt ) => {
// We issue <Prompt> to the server, where as the second parameter
// send the Query to it, specifying the Model, Provider, Role and Prompt.
// The last parameter corresponds to the Callback that will be called
// once the transmission of the response is finished, consider that this
// callback receives a parameter, which corresponds to whether there is an error
// or not during transmission, its content is therefore the error.
Socket . emit ( 'Prompt' , { Prompt , ... BaseQuery } , HandleStreamedResponseEnd ) ;
} ) ;
} ) ;
const RunApplicationLoop = async ( ) => {
while ( true ) {
await HandleClientPrompt ( ) ;
console . log ( 'n' ) ;
}
} ;
} ) ( ) ; Если вы хотите установить связь с бэкэндом Lovelace через WebSocket на другом языке, чем представленный, вы можете рассмотреть:
Учтите, что, несмотря на то, что внутри бэкэнда используется библиотека Python GPT4FREE , провайдеры последней отличаются от тех, которые предлагает Lovelace. Вы можете получить список доступных провайдеров с помощью API, где вы получите такую информацию, как модели, которые он позволяет использовать, веб-адрес, на котором размещена служба, и имя, которое необходимо указать при взаимодействии с ИИ, как вы видели в примерах. предыдущий (API, WS).
Ответ, который вы должны получить от https://lovelace-backend.codewithrodi.com/api/v1/chat/providers/ должен быть следующим:
{
"Status" : " Success " ,
"Data" :{
"Providers" :{
// List of providers available to use on WebSocket's
"WS" :[
{
// Name to specify when making the query
"Name" : " DeepAi " ,
// Web address where the service is hosted
"Website" : " https://deepai.org " ,
// Available models
"Models" :[ " gpt-3.5-turbo " ]
},
// ! Others WebSocket's providers...
{ "Name" : " Theb " , "Website" : " https://theb.ai " , "Models" :[ " gpt-3.5-turbo " ] },
{ "Name" : " Yqcloud " , "Website" : " https://chat9.yqcloud.top/ " , "Models" :[ " gpt-3.5-turbo " ] },
{ "Name" : " You " , "Website" : " https://you.com " , "Models" :[ " gpt-3.5-turbo " ] },
{ "Name" : " GetGpt " , "Website" : " https://chat.getgpt.world/ " , "Models" :[ " gpt-3.5-turbo " ] }
],
// List of Providers available to be able to use through the API
"API" :[
{
// Name to specify when making the query
"Name" : " Aichat " ,
// Web address where the service is hosted
"Website" : " https://chat-gpt.org/chat " ,
// Available models
"Models" :[ " gpt-3.5-turbo " ]
},
// ! Others API providers...
{ "Name" : " ChatgptLogin " , "Website" : " https://chatgptlogin.ac " , "Models" :[ " gpt-3.5-turbo " ] },
{ "Name" : " DeepAi " , "Website" : " https://deepai.org " , "Models" :[ " gpt-3.5-turbo " ] },
{ "Name" : " Yqcloud " , "Website" : " https://chat9.yqcloud.top/ " , "Models" :[ " gpt-3.5-turbo " ] },
{ "Name" : " You " , "Website" : " https://you.com " , "Models" :[ " gpt-3.5-turbo " ] },
{ "Name" : " GetGpt " , "Website" : " https://chat.getgpt.world/ " , "Models" :[ " gpt-3.5-turbo " ] }
]
}
}
}Как вы видели, список провайдеров разделен на две части: одна для запросов, выполняемых через API, и для тех, которые используют WebSocket.
В отличие от других примеров, в которых задействованы запросы к внутреннему серверу Lovelace, получение списка провайдеров и соответствующих им доступных моделей является довольно простой задачей, поскольку нам нужно только отправить запрос [GET] в /api/v1 /chat/providers/ , где ответом будет JSON, показанный вам ранее.
В следующем примере мы будем использовать Axios в NodeJS, который вы можете установить с помощью менеджера пакетов NPM с помощью команды npm i axios .
const Axios = require ( 'axios' ) ;
( async function ( ) {
// Consider that, you can replace <https://lovelace-backend.codewithrodi.com> with
// the address where your backend server is mounted. If t
