Lovelace
velace's first appearance in these alleys.
Lesen Sie die Lovelace-Dokumentation.
Lovelace ist eine Webanwendung, die mithilfe der GPT4FREE-Bibliothek von Python eine kostenlose Interaktion mit ChatGPT ermöglicht. Die Software ist in JavaScript geschrieben und verwendet NodeJS + Express + SocketIO auf der Serverseite und Vite + ReactJS auf dem Frontend.
Das Backend ermöglicht verschiedenen Clients die Kommunikation mit ChatGPT. Wenn Ihr Zweck mit Lovelace darin besteht, es für Ihre eigenen Zwecke oder Zwecke zu nutzen, können Sie nur den Backend-Server in Ihrem Netzwerk einbinden und die andere Seite der Anwendung, also den Client, ignorieren; Das Backend ermöglicht seine Interaktion über die API, oder Sie können die Verbindung per WebSocket mithilfe eines SocketIO-Clients verwenden.
Inhaltsverzeichnis:
Die Installation von Lovelace auf Ihrem Computer oder Server ist relativ einfach, es sollten dabei keine größeren Komplikationen auftreten; Bevor Sie jedoch mit dem Klonen des Repositorys beginnen, stellen Sie sicher, dass Sie mindestens über NodeJS v18.0.0 und Python v3.10 verfügen.
Bedenken Sie, dass Sie den Versionsmanager NVM (Node Version Manager) verwenden können, falls Sie nicht die erforderliche NodeJS-Version auf Ihrem System installiert haben.
# 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 Wenn Sie Python v3.10 nicht auf Ihrem System haben, könnten Sie Folgendes in Betracht ziehen:
# (DEBIAN)
sudo add-apt-repository ppa:deadsnakes/ppa && sudo apt update && sudo apt install python3.10
# (MacOS)
brew install [email protected]Erwägen Sie auch die Installation von pip auf Ihrem System, da es bei der Installation der erforderlichen Module verwendet wird, um den Backend-Server im Netzwerk bereitstellen zu können.
curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py
python3 get-pip.pyVorausgesetzt, Sie haben die oben genannten Abhängigkeiten auf Ihrem System installiert, können wir mit dem nächsten Schritt fortfahren ...
Bevor wir mit der Installation und Konfiguration des Backend-Servers als Lovelace-Frontend beginnen, müssen wir das Github-Repository klonen, in dem sich der Quellcode der Anwendung befindet.
Bedenken Sie, dass ich an dieser Stelle der Lektüre davon ausgehe, dass Sie bereits Python Version 3.10 oder höher und NodeJS Version 18.0.0 haben; In der vorherigen Lektüre wurden vor der Installation die einzelnen Installationsschritte erläutert.
# 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 Vielleicht möchten Sie lieber alles in nur einer Zeile ausführen ...
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 .. Beachten Sie, dass bei der Installation der erforderlichen Module zum Betrieb des Servers der Befehl pip install -r Requirements.txt ausgeführt wird, um die erforderlichen Pakete zu installieren, um die GPT4FREE -Bibliothek verwenden zu können. von Python. Wenn Sie pip nicht installiert haben oder die Python-Pakete nicht installieren, können Sie nichts tun, obwohl Sie den Backend-Server und den Client im Netzwerk gemountet haben, denn wenn eine Anfrage gestellt wird Sowohl über WebSockets als auch über die API unter Verwendung der NodeJS- python-shell -Bibliothek vom Backend aus erfolgt die Kommunikation mit der entsprechenden Python-Datei, die für die Rückgabe der Antwort verantwortlich ist. Wenn sie nicht über die erforderlichen Anforderungen verfügt, wird ein Fehler ausgegeben.
Sobald Sie das Github-Repository geklont haben, können wir mit der Konfiguration und dem Netzwerk-Mounting sowohl der Frontend- als auch der Backend-Anwendungen fortfahren. Schauen wir uns jedoch etwas genauer an, was die einzelnen Unterordner speichert, die den durch das Klonen des Repositorys generierten Ordner enthalten.
| Ordner | Beschreibung |
|---|---|
| Kunde | Im Ordner „Client“ wird der Quellcode der Vite + React-Anwendung gespeichert, also das Lovelace-Frontend, wo Sie die Website in Ihrem Netzwerk bereitstellen können, um mit dem Backend zu kommunizieren und hochwertige Gespräche mit der KI aufzubauen! |
| Dokumentation | Der Ordner „Documentation“ enthält den Quellcode der Softwaredokumente: https://lovelace-docs.codewithrodi.com/. |
| Server | Der Ordner „Server“ enthält den Quellcode für das Lovelace-Backend, wo er unter NodeJS mit Express erstellt wird, um die API und SocketIO für die Übertragung von Antworten unter WebSockets bereitzustellen. |
Neben Ordnern werden Sie auch auf einige Dateien stoßen, die auf die gleiche Weise zusammen mit einer Beschreibung unten angezeigt werden.
| Datei | Beschreibung |
|---|---|
| .clocignore | Es wird von der Software „cloc“ verwendet, die es ermöglicht, die Zeilen des Softwarecodes zu zählen und sie nach Technologie und den Kommentaren zu trennen, die die verwendete Programmiersprache möglicherweise enthält. In der Datei „clocignore“ befinden sich die Pfade der Dateien und Verzeichnisse, die die Software beim Zählen ignorieren muss. |
| LIZENZ | Enthält die Lovelace-Lizenz, der der Quellcode des Clients und Servers unterliegt. Diese Software ist unter der MIT-Lizenz lizenziert. |
Sobald das Repository geklont wurde und Sie anschließend die erforderlichen Server- und Client-NPM-Module installiert haben, ist es an der Zeit, das Backend einzurichten, um mit der Nutzung der Software beginnen zu können.
Beginnen wir mit dem Server. Hier geschieht die Magie. Sie können mit der KI über API-Anfragen oder mithilfe von WebSockets kommunizieren. Als nächstes werden Ihnen die Befehlsreihen angezeigt, mit denen Sie den Server im Netzwerk bereitstellen können.
# Accessing the <Server> folder that houses the repository you cloned earlier
cd Server/
# Running the server...
npm run start Wenn Sie alles richtig gemacht haben, sollte der Server bereits auf Ihrem System laufen. Sie können es überprüfen, wenn Sie auf http://0.0.0.0:8000/api/v1/ zugreifen!
Skript ( npm run <script_name> ) | Beschreibung |
|---|---|
| Start | Die normale Ausführung des Servers beginnt. Sie können diese Option in Betracht ziehen, falls Sie ihn in der Produktion bereitstellen möchten. |
| Entwickler | Starten Sie die Ausführung des Servers im Entwicklungsmodus mit Hilfe des Pakets „nodemon“. |
Sie sollten wissen, dass Umgebungsvariablen dynamische Zeichenwerte sind, die es Ihnen ermöglichen, Informationen zu Anmeldeinformationen, Konfigurationen usw. zu speichern. Anschließend wird Ihnen die Datei „.env“ angezeigt, die sich im Quellcode des Servers befindet Sie erhalten eine Beschreibung zur Funktionsweise der verfügbaren Variablen.
# 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 = 100kbVorausgesetzt, dass Sie zu diesem Zeitpunkt der Lektüre bereits den Backend-Server im Netzwerk eingerichtet haben, können wir mit der Einrichtung des Client-Servers fortfahren, wo Sie auf diese Weise über die von Ihnen aufgerufene Website mit der KI interagieren können werde als nächstes konfigurieren...
Die Client-Anwendung wird mit ReactJS unter Verwendung von Vite als Entwicklungstool erstellt. Mit nur wenigen Terminalbefehlen können Sie die Anwendung im Handumdrehen in Ihrem Netzwerk einrichten und bereitstellen! Wenn Sie unseren Anweisungen folgen und die Leistungsfähigkeit von ReactJS und Vite nutzen, erleben Sie einen nahtlosen und effizienten Einrichtungsprozess.
Stellen Sie sicher, dass es für die korrekte Nutzung der Webanwendung erforderlich ist, dass der Server bereits im Netzwerk läuft.
# 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 Viel Spaß beim Hacken!... Ihr Server sollte unter http://0.0.0.0:5173/ laufen.
Auf die gleiche Weise wie in der vorherigen Lektüre wird als nächstes die Liste der Umgebungsvariablen, die die Clientanwendung in ihrer „.env“-Datei hat, zusammen mit einer Beschreibung präsentiert.
# 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 Falls Sie die Netzwerkadresse oder den Port ändern möchten, der beim Starten des Vite-Servers im Netzwerk verwendet wird, können Sie eine Änderung der Datei vite.config.js in Betracht ziehen. Diese Datei enthält die Konfigurationseinstellungen für den Vite-Server. Nachfolgend finden Sie den Inhalt der Datei 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 : { }
}
} ) ;Bitte beachten Sie, dass das Ändern dieser Einstellungen mit Vorsicht erfolgen sollte, da dies die Erreichbarkeit des Servers beeinträchtigen kann. Stellen Sie sicher, dass Sie eine geeignete Netzwerkadresse und einen Port wählen, der noch nicht verwendet wird.
Vite ist aufgrund seiner hocheffizienten Umgebung eine beliebte Wahl für die Entwicklung von in JavaScript geschriebenen Webanwendungen. Es bietet erhebliche Vorteile wie eine drastische Reduzierung der Startzeit beim Laden neuer Module oder beim Kompilieren des Quellcodes während des Entwicklungsprozesses. Durch die Nutzung von Vite können Entwickler eine höhere Produktivität und schnellere Entwicklungszyklen erzielen. Seine Geschwindigkeits- und Leistungsoptimierungen machen es zu einem wertvollen Werkzeug für Webentwicklungsprojekte.
Die Webanwendung verfügt über die Fähigkeit, die Sprache des Webbrowsers zu erkennen, von dem aus auf die Plattform zugegriffen wird, um später erkennen zu können, ob eine Übersetzung des Inhalts in der angeforderten Sprache verfügbar ist, falls diese nicht vorhanden ist, a Die Übersetzung wird zurückgegeben. standardmäßig, was Englisch entspricht.
Bedenken Sie, dass Sie zum Hinzufügen neuer Übersetzungen auf Client/src/Locale/ zugreifen können, wo dieser letzte Locale/ -Ordner eine Reihe von JSONs enthält, die im folgenden Format vorliegen {LANGUAGE_IN_ISO_369}.json ; Wenn Sie eine neue Übersetzung hinzufügen möchten, müssen Sie nur dem Format folgen und die entsprechenden Schlüssel kopieren, deren Wert auf die gewünschte Sprache, die Sie erstellen, aktualisiert wird.
Derzeit sind in der Webanwendung folgende Übersetzungen vorhanden: French - Arabic - Chinese - German - English - Spanish - Italian - Portuguese - Russian - Turkish .
Wenn Sie Lovelace für Ihre individuellen Bedürfnisse und Ziele nutzen möchten, können Sie die in ReactJS implementierte Client-Anwendung außer Acht lassen. Lenken Sie Ihre Aufmerksamkeit stattdessen auf den Server, da dort die Verzauberung wirklich stattfindet.
Beachten Sie, dass bei der Kommunikation mit dem Backend über die API oder WebSockets bei den als Model Model or Role gesendeten Daten die gPT-3.5-TUrbO nicht beachtet wird, d Vom Backend aus formatiert, ist die Prompt natürlich auch nicht wichtig, aber der Wert, der dem Provider zugewiesen wird, ist: In späteren Lektüren erfahren Sie, wie Sie die verfügbaren Anbieter erhalten, die Sie beim Aufbau einer Interaktion mit der KI auf die gleiche Weise verwenden können dass Sie wissen können, was ihre jeweiligen Modelle sind, oder Sie können jetzt auf denselben Pfad /api/v1/chat/providers/ der öffentlichen Instanz des Lovelace-Backends zugreifen und die Informationen anzeigen.
Hier ist ein Beispiel für die Verwendung der API über die native Fetch-Funktion:
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 ) ) ;Falls Sie Axios für die Kommunikation nutzen möchten, können Sie Folgendes in Betracht ziehen:
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 ) ;
} ) ( ) ; Sie können sehen, wie der Client über die API mit dem Backend kommuniziert, indem Sie sich die Dateien Client/src/Services/Chat/Context.jsx und Client/src/Services/Chat/Service.js ansehen, in denen Magie geschieht.
Vom Backend-Server aus wird mithilfe von SocketIO ein WebSocket-Server bereitgestellt. Daher wird empfohlen, einen Client zu verwenden, der von derselben Bibliothek bereitgestellt wird, z. B. npm i socket.io-client im Fall von NodeJS. Es wird empfohlen, diese Art der Kommunikation zu verwenden, wenn Sie eine „sofortige“ Antwort wünschen, da Sie die Antwort der KI, anders als bei der Kommunikation über API, nicht warten müssen, bis die KI die Verarbeitung der Antwort abgeschlossen hat, um angezeigt zu werden . . Mithilfe von WebSockets wird die Antwort der KI in Teilen übertragen, wodurch sofort eine Interaktion mit dem Client entsteht.
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' ) ;
}
} ;
} ) ( ) ; Wenn Sie die Kommunikation mit dem Lovelace-Backend über WebSockets in einer anderen als der vorgestellten Sprache herstellen möchten, können Sie Folgendes in Betracht ziehen:
Bedenken Sie, dass sich die Anbieter des Backends trotz der Tatsache, dass die GPT4FREE Python-Bibliothek im Backend verwendet wird, von denen von Lovelace unterscheiden. Sie können die Liste der verfügbaren Anbieter über die API abrufen. Dort erhalten Sie Informationen wie die Modelle, die sie verwenden dürfen, die Webadresse, unter der der Dienst gehostet wird, und den Namen, der bei der Interaktion mit der KI als angegeben werden muss Sie haben es in den Beispielen gesehen. vorherige (API, WS).
Die Antwort, die Sie von https://lovelace-backend.codewithrodi.com/api/v1/chat/providers/ erhalten sollten, sollte sein:
{
"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 " ] }
]
}
}
}Wie Sie gesehen haben, ist die Liste der Anbieter in zwei Teile unterteilt, einen für die Abfragen, die über die API erfolgen, und einen für diejenigen, die WebSockets verwenden.
Im Gegensatz zu anderen Beispielen, bei denen es um Anfragen an den Lovelace-Backend-Server geht, ist das Abrufen der Liste der Anbieter und ihrer jeweiligen verfügbaren Modelle eine recht einfache Aufgabe, da wir nur eine [GET]-Anfrage an /api/v1 /chat/providers/ senden müssen. , wobei die Antwort der JSON-Code ist, der Ihnen zuvor angezeigt wurde.
Für das folgende Beispiel verwenden wir Axios in NodeJS, das Sie mit dem NPM-Paketmanager und dem Befehl npm i axios installieren können.
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
