Lovelace
velace's first appearance in these alleys.
Bacalah dokumentasi Lovelace.
Lovelace adalah aplikasi web yang memungkinkan interaksi gratis dengan ChatGPT menggunakan perpustakaan GPT4FREE Python. Perangkat lunak ini ditulis dalam JavaScript, menggunakan NodeJS + Express + SocketIO di sisi server dan Vite + ReactJS di Frontend.
Backend memungkinkan klien yang berbeda untuk berkomunikasi dengan ChatGPT. Jika tujuan Anda dengan Lovelace adalah menggunakannya untuk tujuan atau keperluan Anda sendiri, Anda hanya dapat memasang server Backend di jaringan Anda dan mengabaikan sisi lain dari aplikasi, yaitu klien; backend memungkinkan interaksinya melalui API, atau Anda dapat menggunakan koneksi melalui WebSocket menggunakan beberapa klien SocketIO.
Daftar isi:
Menginstal Lovelace di komputer atau server Anda relatif sederhana, Anda tidak akan mengalami komplikasi besar dalam prosesnya; namun, sebelum Anda mulai mengkloning repositori, pastikan Anda memiliki setidaknya NodeJS v18.0.0 dan Python v3.10 .
Pertimbangkan bahwa, jika Anda tidak menginstal versi NodeJS yang diperlukan di sistem Anda, Anda dapat menggunakan manajer versi 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 Jika Anda tidak memiliki Python v3.10 di sistem Anda, Anda dapat mempertimbangkan hal berikut:
# (DEBIAN)
sudo add-apt-repository ppa:deadsnakes/ppa && sudo apt update && sudo apt install python3.10
# (MacOS)
brew install [email protected]Dengan cara yang sama, pertimbangkan untuk menginstal pip di sistem Anda, karena ini akan digunakan saat menginstal modul yang diperlukan untuk dapat memasang server backend dalam jaringan.
curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py
python3 get-pip.pySekarang, dengan asumsi Anda telah menginstal dependensi yang disebutkan di atas pada sistem Anda, kita dapat melanjutkan ke langkah berikutnya...
Sebelum kita mulai menginstal dan mengkonfigurasi server backend sebagai frontend Lovelace, kita perlu mengkloning repositori Github tempat kode sumber aplikasi berada.
Pertimbangkan bahwa, pada tahap pembacaan ini, saya berasumsi bahwa Anda sudah memiliki Python versi 3.10 atau lebih tinggi dan NodeJS versi 18.0.0; Pada bacaan sebelumnya, sebelum melanjutkan instalasi, telah dijelaskan langkah-langkah instalasi masing-masing.
# 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 Anda mungkin lebih suka menjalankan semuanya hanya dalam satu baris...
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 .. Ingatlah bahwa, saat Anda menginstal modul yang diperlukan untuk menjalankan server, perintah pip install -r Requirements.txt dijalankan untuk menginstal paket yang diperlukan agar dapat menggunakan perpustakaan GPT4FREE . dari Python. Jika Anda belum menginstal pip atau Anda tidak menginstal paket Python, meskipun Anda memiliki server backend dan klien terpasang di jaringan, Anda tidak akan dapat melakukan apa pun, karena ketika permintaan dibuat ke baik Melalui WebSocket atau melalui API menggunakan pustaka python-shell NodeJS dari backend, komunikasi dilakukan ke file Python terkait yang bertugas mengembalikan respons dan jika tidak memiliki persyaratan yang diperlukan, itu akan menimbulkan kesalahan.
Setelah Anda mengkloning repositori Github, kita dapat melanjutkan ke konfigurasi dan pemasangan jaringan aplikasi frontend dan backend. Namun, mari kita gali lebih dalam tentang apa yang menyimpan setiap subfolder yang berisi folder yang dihasilkan dengan mengkloning repositori.
| Map | Keterangan |
|---|---|
| Klien | Folder "Klien" menyimpan kode sumber aplikasi Vite + React, yaitu frontend Lovelace, tempat Anda dapat memasang situs web di jaringan Anda agar dapat berkomunikasi dengan backend dan menjalin percakapan berkualitas dengan AI! |
| Dokumentasi | Folder "Dokumentasi" menampung kode sumber dokumen perangkat lunak: https://lovelace-docs.codewithrodi.com/. |
| pelayan | Folder "Server" menampung kode sumber untuk backend Lovelace, yang dibangun di bawah NodeJS menggunakan Express untuk menyediakan API dan SocketIO untuk transmisi respons di bawah WebSocket. |
Selain folder, Anda akan menemukan beberapa file, yang dengan cara yang sama akan disajikan bersama dengan uraian di bawah ini.
| Mengajukan | Keterangan |
|---|---|
| .cloignore | Ini digunakan oleh perangkat lunak "cloc", yang memungkinkan penghitungan baris kode perangkat lunak, memisahkannya berdasarkan teknologi dan komentar yang mungkin dimiliki oleh bahasa pemrograman yang digunakan. Di dalam file "clocignore", terdapat jalur file dan direktori yang harus diabaikan oleh perangkat lunak saat menghitung. |
| LISENSI | Berisi lisensi Lovelace yang menjadi subjek kode sumber Klien dan Server. Perangkat lunak ini dilisensikan di bawah lisensi MIT. |
Setelah repositori dikloning dan Anda kemudian menginstal modul NPM Server dan Klien yang diperlukan, sekarang saatnya menyiapkan backend untuk mulai menggunakan perangkat lunak.
Mari kita mulai dengan server, di sinilah keajaiban akan terjadi, Anda dapat berkomunikasi dengan AI melalui permintaan API atau menggunakan WebSocket; Selanjutnya Anda akan disuguhkan rangkaian perintah untuk dapat me-mount server di dalam jaringan.
# Accessing the <Server> folder that houses the repository you cloned earlier
cd Server/
# Running the server...
npm run start Jika Anda telah melakukan semuanya dengan benar, server seharusnya sudah berjalan di sistem Anda. Anda dapat memeriksanya jika Anda mengakses http://0.0.0.0:8000/api/v1/ !
Skrip ( npm run <script_name> ) | Keterangan |
|---|---|
| awal | Eksekusi normal server dimulai, Anda dapat mempertimbangkan opsi ini jika Anda ingin memasangnya dalam produksi. |
| dev | Mulai eksekusi server dalam mode pengembangan dengan bantuan paket "nodemon". |
Anda harus tahu bahwa variabel lingkungan adalah nilai karakter dinamis, yang memungkinkan Anda menyimpan informasi terkait kredensial, konfigurasi, dll..., kemudian Anda akan disajikan dengan file ".env" yang terletak di dalam kode sumber server, di mana pada gilirannya Anda akan mendapatkan deskripsi tentang pengoperasian variabel yang tersedia.
# 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 = 100kbDengan asumsi bahwa pada titik pembacaan ini Anda sudah menyiapkan server backend di jaringan, kami dapat terus menyiapkan server klien, di mana, dengan cara ini, Anda dapat mulai berinteraksi dengan AI melalui situs web yang Anda akan mengkonfigurasi selanjutnya...
Aplikasi klien dibangun dengan ReactJS menggunakan Vite sebagai alat pengembangannya. Hanya dengan beberapa perintah terminal, Anda dapat dengan cepat mengatur dan menyebarkan aplikasi di jaringan Anda dalam waktu singkat! Dengan mengikuti instruksi kami dan memanfaatkan kekuatan ReactJS dan Vite, Anda akan merasakan proses penyiapan yang lancar dan efisien.
Pastikan bahwa untuk menggunakan aplikasi web dengan benar, server harus sudah berjalan di jaringan.
# 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 Selamat meretas!... Server Anda seharusnya berjalan di http://0.0.0.0:5173/ .
Dengan cara yang sama seperti yang dilakukan pada bacaan sebelumnya, daftar variabel lingkungan yang dimiliki aplikasi klien dalam file ".env"-nya akan disajikan selanjutnya, beserta deskripsinya.
# 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 Jika Anda ingin mengubah alamat jaringan atau port yang digunakan saat meluncurkan server Vite di jaringan, Anda dapat mempertimbangkan untuk memodifikasi file vite.config.js . File ini berisi pengaturan konfigurasi untuk server Vite. Berikut isi file 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 : { }
}
} ) ;Harap dicatat bahwa mengubah pengaturan ini harus dilakukan dengan hati-hati, karena dapat mempengaruhi aksesibilitas server. Pastikan untuk memilih alamat jaringan yang sesuai dan port yang belum digunakan.
Vite adalah pilihan populer untuk mengembangkan aplikasi web yang ditulis dalam JavaScript karena lingkungannya yang sangat efisien. Ini menawarkan keuntungan yang signifikan seperti mengurangi waktu startup secara drastis ketika memuat modul baru atau mengkompilasi kode sumber selama proses pengembangan. Dengan memanfaatkan Vite, pengembang dapat merasakan peningkatan produktivitas dan siklus pengembangan yang lebih cepat. Optimalisasi kecepatan dan kinerjanya menjadikannya alat yang berharga untuk proyek pengembangan web.
Aplikasi web memiliki kemampuan untuk mendeteksi bahasa web browser dari mana platform diakses, untuk nantinya dapat mendeteksi jika ada terjemahan konten yang tersedia dalam bahasa yang diminta, jika tidak ada, a terjemahan akan dikembalikan. secara default, yang sesuai dengan bahasa Inggris.
Pertimbangkan bahwa, untuk menambahkan terjemahan baru, Anda dapat mengakses Client/src/Locale/ , di mana folder Locale/ terakhir ini menampung serangkaian JSON dalam format berikut {LANGUAGE_IN_ISO_369}.json ; Jika Anda ingin menambahkan terjemahan baru, Anda hanya perlu mengikuti format dan menyalin masing-masing kunci yang nilainya diperbarui ke bahasa yang Anda buat.
Saat ini, terjemahan berikut ada dalam aplikasi web: French - Arabic - Chinese - German - English - Spanish - Italian - Portuguese - Russian - Turkish .
Jika niat Anda adalah menggunakan Lovelace untuk kebutuhan dan tujuan pribadi Anda, Anda dapat mengabaikan aplikasi Klien yang diterapkan di ReactJS. Alih-alih, alihkan perhatian Anda ke Server, karena di sinilah pesona sebenarnya terjadi.
Ingatlah bahwa ketika berkomunikasi dengan backend menggunakan API atau WebSocket, data yang dikirim sebagai Model or Role tidak peka huruf besar-kecil, artinya, jika nilai Model adalah gPT-3.5-TUrbO tidak akan menjadi masalah, karena akan menjadi diformat dari backend, Prompt juga jelas tidak penting, tetapi nilai yang diberikan kepada Provider adalah, dalam bacaan selanjutnya Anda akan mempelajari cara mendapatkan penyedia yang tersedia untuk dapat digunakan saat menjalin interaksi dengan AI, dengan cara yang sama bahwa kamu akan melakukannya dapat mengetahui modelnya masing-masing, atau sekarang Anda dapat mengakses jalur yang sama /api/v1/chat/providers/ dari instance publik backend lovelace dan melihat informasinya.
Berikut ini contoh penggunaan API melalui fungsi Ambil asli:
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 ) ) ;Jika Anda ingin menggunakan Axios saat melakukan komunikasi, Anda dapat mempertimbangkan:
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 ) ;
} ) ( ) ; Anda dapat melihat bagaimana klien berkomunikasi dengan backend melalui API dengan melihat file Client/src/Services/Chat/Context.jsx dan Client/src/Services/Chat/Service.js , tempat keajaiban terjadi.
Dari server backend, server WebSocket disediakan dengan bantuan SocketIO, jadi disarankan untuk menggunakan klien yang disediakan oleh perpustakaan yang sama, seperti npm i socket.io-client dalam kasus NodeJS. Disarankan untuk menggunakan jenis komunikasi ini jika Anda menginginkan respons yang "seketika", karena respons dari AI, tidak seperti menggunakan komunikasi melalui API, Anda tidak boleh menunggu hingga AI selesai memproses respons agar dapat ditampilkan. . . Menggunakan WebSocket, respons dari AI ditransmisikan sebagian, menghasilkan interaksi dengan klien secara instan.
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' ) ;
}
} ;
} ) ( ) ; Jika Anda ingin menjalin komunikasi dengan Lovelace Backend melalui WebSocket dalam bahasa lain selain yang disajikan, Anda dapat mempertimbangkan:
Pertimbangkan bahwa, meskipun pustaka python GPT4FREE digunakan di backend, penyedia yang terakhir berbeda dari yang ditawarkan oleh Lovelace. Anda dapat memperoleh daftar penyedia yang tersedia menggunakan API, di mana Anda akan memperoleh informasi seperti model yang diizinkan untuk digunakan, alamat web tempat layanan dihosting dan nama yang harus ditentukan saat berinteraksi dengan AI sebagai Anda telah melihat dalam contoh. sebelumnya (API, WS).
Respons yang harus Anda dapatkan dari https://lovelace-backend.codewithrodi.com/api/v1/chat/providers/ adalah:
{
"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 " ] }
]
}
}
}Seperti yang Anda lihat, daftar penyedia dibagi menjadi 2 bagian, satu untuk kueri yang dibuat melalui API sedangkan untuk yang menggunakan WebSocket.
Tidak seperti contoh lain yang melibatkan permintaan ke server backend Lovelace, mendapatkan daftar penyedia dan masing-masing model yang tersedia cukup mudah, karena kita hanya perlu mengirimkan permintaan [GET] ke /api/v1 /chat/providers/ , yang responsnya adalah JSON yang ditunjukkan kepada Anda sebelumnya.
Untuk contoh berikut, kami akan menggunakan Axios dalam NodeJS, yang dapat Anda instal menggunakan manajer paket NPM menggunakan perintah 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
