Lovelace
velace's first appearance in these alleys.
Allez lire la documentation Lovelace.
Lovelace est une application Web qui permet une interaction gratuite avec ChatGPT en utilisant la bibliothèque GPT4FREE de Python. Le logiciel est écrit en JavaScript, en utilisant NodeJS + Express + SocketIO côté serveur et Vite + ReactJS sur le frontend.
Le backend permet à différents clients de communiquer avec ChatGPT. Si votre objectif avec Lovelace est de l'utiliser à vos propres fins, vous pouvez uniquement monter le serveur Backend sur votre réseau et ignorer l'autre côté de l'application, c'est-à-dire le client ; le backend permet son interaction via l'API, ou vous pouvez utiliser la connexion par WebSocket à l'aide d'un client SocketIO.
Table des matières:
L'installation de Lovelace sur votre ordinateur ou serveur est relativement simple, vous ne devriez pas avoir de complications majeures dans le processus ; cependant, avant de commencer à cloner le référentiel, assurez-vous d'avoir au moins NodeJS v18.0.0 et Python v3.10 .
Considérez que, si la version NodeJS requise n'est pas installée sur votre système, vous pouvez utiliser le gestionnaire de versions 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 Si vous n'avez pas Python v3.10 sur votre système, vous pouvez envisager les éléments suivants :
# (DEBIAN)
sudo add-apt-repository ppa:deadsnakes/ppa && sudo apt update && sudo apt install python3.10
# (MacOS)
brew install [email protected]De la même manière, pensez à installer pip sur votre système, car il sera utilisé lors de l'installation des modules nécessaires pour pouvoir monter le serveur backend au sein du réseau.
curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py
python3 get-pip.pyMaintenant, en supposant que les dépendances susmentionnées soient installées sur votre système, nous pouvons passer à l'étape suivante...
Avant de commencer à installer et à configurer le serveur backend en tant qu'interface Lovelace, nous devons cloner le référentiel Github où se trouve le code source de l'application.
Considérez qu'à ce stade de la lecture, je suppose que vous disposez déjà de Python version 3.10 ou supérieure et de NodeJS version 18.0.0 ; Dans la lecture précédente, avant de procéder à l'installation, les étapes pour installer chacun d'eux ont été expliquées.
# 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 Vous préférerez peut-être tout exécuter sur une seule ligne...
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 .. Gardez à l'esprit que, lorsque vous installez les modules nécessaires pour exécuter le serveur, la commande pip install -r Requirements.txt est exécutée afin d'installer les packages nécessaires pour pouvoir utiliser la bibliothèque GPT4FREE . de Python. Si pip n'est pas installé ou si vous n'installez pas les packages Python, même si le serveur backend et le client sont montés sur le réseau, vous ne pourrez rien faire, car lorsqu'une demande est faite à à la fois via WebSocket ou via l'API en utilisant la bibliothèque python-shell NodeJS du backend, la communication est établie avec le fichier Python correspondant qui est chargé de renvoyer la réponse et s'il ne répond pas aux exigences nécessaires, il générera une erreur.
Une fois que vous avez cloné le référentiel Github, nous pouvons passer à la configuration et au montage réseau des applications frontend et backend. Cependant, approfondissons un peu ce qui stocke chaque sous-dossier contenant le dossier généré par le clonage du référentiel.
| Dossier | Description |
|---|---|
| Client | Le dossier "Client" stocke le code source de l'application Vite + React, c'est-à-dire le frontend Lovelace, où vous pouvez monter le site Web sur votre réseau pour pouvoir communiquer avec le backend et établir des conversations de qualité avec l'IA ! |
| Documentation | Le dossier « Documentation » abrite le code source de la documentation du logiciel : https://lovelace-docs.codewithrodi.com/. |
| Serveur | Le dossier "Serveur" héberge le code source du backend Lovelace, où il est construit sous NodeJS en utilisant Express pour fournir l'API et SocketIO pour la transmission des réponses sous WebSocket. |
De plus, outre les dossiers, vous rencontrerez certains fichiers, qui seront également présentés avec une description ci-dessous.
| Déposer | Description |
|---|---|
| .cloignore | Il est utilisé par le logiciel "cloc", qui permet de compter les lignes de code d'un logiciel, en les séparant par technologie et par les commentaires que peut avoir le langage de programmation utilisé. À l'intérieur du fichier "clocignore", se trouvent les chemins de ces fichiers et répertoires que le logiciel doit ignorer lors du comptage. |
| LICENCE | Contient la licence Lovelace à laquelle sont soumis le code source du Client et du Serveur. Ce logiciel est sous licence MIT. |
Une fois le référentiel cloné et que vous avez ensuite installé les modules Serveur et Client NPM nécessaires, il est temps de configurer le backend pour commencer à utiliser le logiciel.
Commençons par le serveur, c'est là que la magie opèrera, vous pourrez communiquer avec l'IA via des requêtes API ou en utilisant celles de WebSocket ; Ensuite, la série de commandes vous sera présentée pour pouvoir monter le serveur au sein du réseau.
# Accessing the <Server> folder that houses the repository you cloned earlier
cd Server/
# Running the server...
npm run start Si vous avez tout fait correctement, le serveur devrait déjà être en cours d'exécution sur votre système. Vous pouvez le vérifier si vous accédez à http://0.0.0.0:8000/api/v1/ !
Script ( npm run <script_name> ) | Description |
|---|---|
| commencer | L'exécution normale du serveur commence, vous pouvez envisager cette option au cas où vous souhaiteriez le monter en production. |
| développeur | Démarrez l'exécution du serveur en mode développement à l'aide du package "nodemon". |
Vous devez savoir que les variables d'environnement sont des valeurs de caractères dynamiques, qui vous permettent de stocker des informations relatives aux informations d'identification, aux configurations, etc..., puis il vous sera présenté le fichier ".env" situé dans le code source du serveur, où à son tour vous aurez une description du fonctionnement des variables disponibles.
# 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 = 100kbEn supposant qu'à ce stade de la lecture, le serveur backend est déjà configuré sur le réseau, nous pouvons continuer à configurer le serveur du client, où, de cette manière, vous pourrez commencer à interagir avec l'IA via le site Web que vous configurera ensuite...
L'application client est construite avec ReactJS en utilisant Vite comme outil de développement. Avec seulement quelques commandes de terminal, vous pouvez rapidement configurer et déployer l'application sur votre réseau en un rien de temps ! En suivant nos instructions et en utilisant la puissance de ReactJS et de Vite, vous bénéficierez d'un processus de configuration transparent et efficace.
Assurez-vous que, pour utiliser correctement l'application Web, il est nécessaire que le serveur soit déjà en cours d'exécution sur le réseau.
# 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 Bon piratage !... Votre serveur devrait fonctionner à l' http://0.0.0.0:5173/ .
De la même manière que lors de la lecture précédente, la liste des variables d'environnement que l'application client a dans son fichier ".env" sera présentée ensuite, accompagnée d'une description de celle-ci.
# 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 Dans le cas où vous souhaitez modifier l'adresse réseau ou le port utilisé lors du lancement du serveur Vite sur le réseau, vous pouvez envisager de modifier le fichier vite.config.js . Ce fichier contient les paramètres de configuration du serveur Vite. Vous trouverez ci-dessous le contenu du fichier 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 : { }
}
} ) ;Veuillez noter que la modification de ces paramètres doit être effectuée avec prudence, car cela peut affecter l'accessibilité du serveur. Assurez-vous de choisir une adresse réseau appropriée et un port qui n'est pas déjà utilisé.
Vite est un choix populaire pour développer des applications Web écrites en JavaScript en raison de son environnement très efficace. Il offre des avantages non négligeables comme la réduction drastique du temps de démarrage lors du chargement de nouveaux modules ou la compilation du code source pendant le processus de développement. En tirant parti de Vite, les développeurs peuvent bénéficier d'une productivité améliorée et de cycles de développement plus rapides. Ses optimisations de vitesse et de performances en font un outil précieux pour les projets de développement Web.
L'application web a la capacité de détecter la langue du navigateur web à partir duquel on accède à la plateforme, afin de pouvoir détecter ultérieurement s'il existe une traduction du contenu disponible dans la langue demandée, si elle n'existe pas, une la traduction sera restituée. par défaut, ce qui correspond à l'anglais.
Considérez que, pour ajouter de nouvelles traductions, vous pouvez accéder Client/src/Locale/ , où ce dernier dossier Locale/ héberge une série de JSON au format suivant {LANGUAGE_IN_ISO_369}.json ; Dans le cas où vous souhaitez ajouter une nouvelle traduction, il vous suffit de suivre le format et de copier les clés respectives dont la valeur est mise à jour dans la langue souhaitée que vous créez.
Actuellement, les traductions suivantes existent au sein de l'application web : French - Arabic - Chinese - German - English - Spanish - Italian - Portuguese - Russian - Turkish .
Si votre intention est d'utiliser Lovelace pour vos besoins et objectifs individuels, vous pouvez ignorer l'application client implémentée dans ReactJS. Au lieu de cela, détournez votre attention vers le serveur, car c'est là que l'enchantement a réellement lieu.
Gardez à l'esprit que lors de la communication avec le backend à l'aide de l'API ou de WebSocket, les données envoyées en tant que Model or Role ne sont pas sensibles à la casse, c'est-à-dire que si la valeur de Model est gPT-3.5-TUrbO cela n'aura pas d'importance, car ce sera le cas. formaté depuis le backend, le Prompt n'est évidemment pas important non plus, mais la valeur attribuée au Provider l'est, dans des lectures ultérieures, vous apprendrez comment obtenir les fournisseurs disponibles pour pouvoir les utiliser lors de l'établissement d'une interaction avec l'IA, de la même manière que vous pourrez savoir quels sont leurs modèles respectifs, ou vous pouvez désormais accéder au même chemin /api/v1/chat/providers/ de l'instance publique du backend lovelace et afficher les informations.
Voici un exemple utilisant l'API via la fonction native 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 ) ) ;Si vous souhaitez utiliser Axios lors de la communication, vous pouvez envisager :
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 ) ;
} ) ( ) ; Vous pouvez voir comment le client communique avec le backend via l'API en consultant les fichiers Client/src/Services/Chat/Context.jsx et Client/src/Services/Chat/Service.js , où la magie opère.
Depuis le serveur backend, un serveur WebSocket est fourni à l'aide de SocketIO, il est donc recommandé d'utiliser un client fourni par la même bibliothèque, comme npm i socket.io-client dans le cas de NodeJS. Il est recommandé d'utiliser ce type de communication si l'on souhaite une réponse « instantanée », puisque la réponse de l'IA, contrairement à l'utilisation de la communication via API, il ne faut pas attendre que l'IA ait fini de traiter la réponse pour s'afficher . . Grâce à WebSocket, la réponse de l'IA est transmise en plusieurs parties, générant instantanément une interaction avec le client.
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' ) ;
}
} ;
} ) ( ) ; Si vous souhaitez établir une communication avec le Backend Lovelace via WebSocket dans une autre langue que celle présentée, vous pouvez envisager :
Considérez que, malgré le fait que la bibliothèque python GPT4FREE soit utilisée dans le backend, les fournisseurs de ce dernier sont différents de ceux proposés par Lovelace. Vous pouvez obtenir la liste des fournisseurs disponibles à l'aide de l'API, où vous obtiendrez des informations telles que les modèles qu'elle permet d'utiliser, l'adresse Web où le service est hébergé et le nom qui doit être spécifié lors de l'interaction avec l'IA comme vous l'avez vu dans les exemples. précédent (API, WS).
La réponse que vous devriez obtenir de https://lovelace-backend.codewithrodi.com/api/v1/chat/providers/ devrait être :
{
"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 " ] }
]
}
}
}Comme vous l'avez vu, la liste des fournisseurs est divisée en 2 parties, une pour les requêtes effectuées via l'API et une pour celles qui utilisent WebSocket.
Contrairement à d'autres exemples où des requêtes au serveur backend Lovelace sont impliquées, obtenir la liste des fournisseurs et leurs modèles respectifs disponibles est une tâche assez simple, puisqu'il suffit d'envoyer une requête [GET] à /api/v1 /chat/providers/ , où la réponse sera le JSON qui vous a été montré précédemment.
Pour l'exemple suivant, nous utiliserons Axios dans NodeJS, que vous pouvez installer à l'aide du gestionnaire de packages NPM à l'aide de la commande 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
