Lovelace
velace's first appearance in these alleys.
去閱讀 Lovelace 文檔。
Lovelace 是一個 Web 應用程序，允許使用 Python 的 GPT4FREE 庫與 ChatGPT 自由互動。軟體是用JavaScript編寫的，伺服器端使用NodeJS + Express + SocketIO，前端使用Vite + ReactJS。
後端允許不同的客戶端與 ChatGPT 進行通訊。如果您使用 Lovelace 的目的是為了您自己的目的或目的，您只能在您的網路中掛載後端伺服器，而忽略應用程式的另一端，即用戶端；後端允許透過 API 進行交互，或者您可以使用某些 SocketIO 用戶端透過 WebSocket 進行連線。
目錄：
在您的電腦或伺服器上安裝 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庫。來自Python。如果你沒有安裝pip或沒有安裝 Python 包，即使你在網路上安裝了後端伺服器和客戶端，你也將無法執行任何操作，因為當向透過 WebSocket 或透過 API 使用後端的 NodeJS python-shell庫，與負責回傳回應的相應Python 檔案進行通信，如果沒有必要的要求，則會拋出錯誤。
克隆 Github 儲存庫後，我們可以繼續配置和網路安裝前端和後端應用程序，但是，讓我們更深入地了解儲存每個子資料夾的內容，這些子資料夾包含透過克隆儲存庫產生的資料夾。
| 資料夾 | 描述 |
|---|---|
| 客戶 | 「Client」資料夾儲存了Vite + React應用程式的原始程式碼，即Lovelace前端，您可以將網站掛載到您的網路上，以便能夠與後端通訊並與AI建立高品質的對話！ |
| 文件 | 「Documentation」資料夾包含軟體文件的原始碼：https://lovelace-docs.codewithrodi.com/。 |
| 伺服器 | 「Server」資料夾包含 Lovelace 後端的原始程式碼，它是在 NodeJS 下使用 Express 建置的，以提供 API 和 SocketIO，用於在 WebSocket 下傳輸回應。 |
此外，除了資料夾之外，您還會遇到一些文件，這些文件將以相同的方式與下面的描述一起呈現。
| 文件 | 描述 |
|---|---|
| .clocignore | 它由“cloc”軟體使用，該軟體可以對軟體程式碼行進行計數，並透過技術和所使用的程式語言可能具有的註釋將它們分開。在「clocignore」檔案中，有軟體在計數時必須忽略的那些檔案和目錄的路徑。 |
| 執照 | 包含用戶端和伺服器原始碼受約束的 Lovelace 許可證。該軟體根據 MIT 許可證獲得許可。 |
複製儲存庫並且隨後安裝了必要的伺服器和客戶端 NPM 模組後，就可以設定後端以開始使用該軟體了。
讓我們從伺服器開始，這就是神奇發生的地方，你可以透過 API 請求或使用 WebSocket 與 AI 進行通訊；接下來，您將看到一系列命令，以便能夠在網路中安裝伺服器。
# 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假設閱讀中此時你已經在網路上架設了後端伺服器，我們可以繼續架設客戶端的伺服器，這樣你就可以開始透過你所造訪的網站與AI進行互動了。
客戶端應用程式使用ReactJS構建，使用Vite作為開發工具。只需幾個終端命令，您就可以立即在網路上快速設定和部署應用程式！透過遵循我們的說明並利用 ReactJS 和 Vite 的強大功能，您將體驗到無縫且高效的設定流程。
確保為了正確使用 Web 應用程序，伺服器必須已在網路上運行。
# 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 編寫的 Web 應用程式的流行選擇。它具有顯著的優勢，例如在開發過程中載入新模組或編譯原始碼時大大減少啟動時間。透過利用 Vite，開發者可以體驗到更高的生產力和更快的開發週期。其速度和效能優化使其成為 Web 開發專案的寶貴工具。
Web 應用程式能夠偵測存取平台的 Web 瀏覽器的語言，以便稍後能夠偵測是否有所請求語言的內容翻譯，如果不存在，則翻譯將會退回。預設對應英文。
考慮一下，要新增翻譯，您可以存取Client/src/Locale/ ，其中最後一個Locale/資料夾包含一系列 JSON，其格式如下{LANGUAGE_IN_ISO_369}.json ；如果您想要新增的翻譯，您只需遵循格式並複製相應的鍵，其值將更新為您正在建立的所需語言。
目前，Web 應用程式中存在以下翻譯： French - Arabic - Chinese - German - English - Spanish - Italian - Portuguese - Russian - Turkish 。
如果您打算利用 Lovelace 來滿足您的個人需求和目標，您可以忽略在 ReactJS 中實現的客戶端應用程式。相反，請將您的注意力轉移到伺服器上，因為這是魔法真正發生的地方。
請記住，當使用 API 或 WebSocket 與後端通訊時，作為Model or Role發送的資料不區分大小寫，也就是說，如果Model的值為gPT-3.5-TUrbO並不重要，因為它將從後端格式化後， Prompt顯然也不重要，但賦予Provider的值是，在後面的閱讀中你將學習如何獲取可用的 Provider 以便在與 AI 建立交互時能夠使用，以同樣的方式您將能夠知道它們各自的型號是什麼，或者您現在可以訪問lovelace後端公共實例的相同路徑/api/v1/chat/providers/並查看資訊。
以下是透過本機 Fetch 函數使用 API 的範例：
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 ) ;
} ) ( ) ;您可以透過查看Client/src/Services/Chat/Context.jsx和Client/src/Services/Chat/Service.js檔案來了解客戶端如何透過 API 與後端通信，這就是魔法發生的地方。
從後端伺服器來看，WebSocket 的伺服器是在 SocketIO 的幫助下提供的，因此建議使用相同程式庫提供的用戶端，例如 NodeJS 中的npm i socket.io-client 。如果您想要「即時」回應，建議使用這種類型的通信，因為來自 AI 的回應與透過 API 進行通訊不同，您不應該等待 AI 處理完回應才能顯示。 。使用 WebSocket，來自 AI 的回應會分部分傳輸，從而立即產生與客戶端的互動。
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' ) ;
}
} ;
} ) ( ) ; 如果您想透過 WebSocket 以另一種語言與 Lovelace 後端建立通信，而不是所提供的語言，您可以考慮：
考慮一下，儘管後端使用了GPT4FREE python 庫，但後者的提供程序與 Lovelace 提供的提供程序不同。您可以使用 API 獲取可用提供者的列表，您將在其中獲取諸如允許使用的模型、託管服務的網址以及與 AI 交互時必須指定的名稱等信息你已經在例子中看到了。以前的（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 後端伺服器的請求的其他範例不同，取得提供者清單及其各自的可用模型是一項非常簡單的任務，因為我們只需向/api/v1 /chat/providers/發送[GET]請求，其中回應將是先前向您顯示的 JSON。
對於以下範例，我們將在 NodeJS 中使用 Axios，您可以使用npm i axios命令透過 NPM 套件管理器進行安裝。
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
