Lovelace
velace's first appearance in these alleys.
اذهب لقراءة وثائق Lovelace.
Lovelace هو تطبيق ويب يسمح بالتفاعل المجاني مع ChatGPT باستخدام مكتبة Python's GPT4FREE. تمت كتابة البرنامج بلغة JavaScript، باستخدام NodeJS + Express +ocketIO من جانب الخادم وVite + ReactJS على الواجهة الأمامية.
تسمح الواجهة الخلفية للعملاء المختلفين بالتواصل مع ChatGPT. إذا كان غرضك مع Lovelace هو استخدامه لأغراضك أو أغراضك الخاصة، فيمكنك فقط تركيب خادم الواجهة الخلفية في شبكتك وتجاهل الجانب الآخر من التطبيق، أي العميل؛ تسمح الواجهة الخلفية بتفاعلها من خلال واجهة برمجة التطبيقات (API)، أو يمكنك استخدام الاتصال عن طريق WebSocket باستخدام بعض عملاء SwitchIO.
جدول المحتويات:
يعد تثبيت 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]بنفس الطريقة، فكر في تثبيت النقطة على نظامك، حيث سيتم استخدامها عند تثبيت الوحدات الضرورية لتتمكن من تحميل خادم الواجهة الخلفية داخل الشبكة.
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) باستخدام مكتبة NodeJS python-shell من الواجهة الخلفية، يتم الاتصال بملف 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) عبر وظيفة الجلب الأصلية:
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 بمساعدة JackIO، لذلك يوصى باستخدام عميل توفره نفس المكتبة، مثل npm i socket.io-client في حالة NodeJS. يوصى باستخدام هذا النوع من الاتصال إذا كنت تريد استجابة "فورية"، حيث أن الاستجابة من الذكاء الاصطناعي، على عكس استخدام الاتصال عبر واجهة برمجة التطبيقات، يجب ألا تنتظر حتى ينتهي الذكاء الاصطناعي من معالجة الاستجابة حتى يتم عرضها . . باستخدام 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 Backend من خلال WebSocket's بلغة أخرى غير تلك المقدمة، فيمكنك مراعاة ما يلي:
ضع في اعتبارك أنه على الرغم من حقيقة أن مكتبة GPT4FREE python تُستخدم في الواجهة الخلفية، فإن موفري هذه الأخيرة يختلفون عن تلك التي تقدمها 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 " ] }
]
}
}
}كما رأيت، تنقسم قائمة الموفرين إلى جزأين، أحدهما لتلك الاستعلامات التي يتم إجراؤها من خلال واجهة برمجة التطبيقات بينما مخصص لتلك الاستعلامات التي تستخدم 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
