لوحة المتصدرين

في عالمنا المتغير بسرعة، يعد الذكاء الاصطناعي أحد أكثر التكنولوجيات انتشارًا وتأثيرًا في حياتنا. فالذكاء الاصطناعي يُعدّ من أكثر التطورات المثيرة والمهمة في عصرنا، إذ يوفر فرصًا جديدة لتطوير حياتنا وأعمالنا بطرق لم نكن نتخيلها من قبل. ومن بين تطبيقات الذكاء الاصطناعي، تأتي العديد من التطبيقات المميزة، مثل التعرف على الصوت والصور والترجمة الفورية، وحتى الروبوتات التي تستطيع العمل بدلاً من الإنسان في بعض المهام. فالذكاء الاصطناعي يوفر العديد من المزايا والفرص لتحسين حياتنا وأعمالنا بشكل كبير. وبالنظر إلى الذكاء الاصطناعي في نطاق الشركات، فهو يتيح لها الفرصة للتحسين من كفاءة عملياتها وتقليل الأخطاء، إلى جانب توفير تحليلات وإحصاءات دقيقة عن البيانات المخزنة والمعالجة. ومن بين أفضل التطبيقات على الذكاء الاصطناعي هي تطبيقات معالجة اللغات الطبيعية و التي انبثقت منها أدوات مثل ChatGPT التي تتيح للمستخدمين التفاعل مع النظام والحصول على إجابات دقيقة وفعالة عن الأسئلة المختلفة التي تتعلق بالمواضيع المختلفة. ChatGPT المقدم من openAI هو مثالٌ على كيف يمكن للذكاء الاصطناعي أن يساعد في التواصل بين الناس، فهو يوفر فرصة للتفاعل الفعال والدقيق بين المستخدمين والنظام. وبفضل تقنيات الذكاء الاصطناعي الحديثة، يستطيع ChatGPT التعرف على مواضيع وأسئلة مختلفة وتقديم إجابات دقيقة ومفيد ما هي OpenAI API هل تريد تطوير تطبيقات وأدوات تعتمد على تقنيات الذكاء الاصطناعي بسهولة وبدون الحاجة إلى دراسة عميقة في هذا المجال؟ هذا بالضبط ما يوفره OpenAI API، حيث يمكن للمطورين الاستفادة من الأدوات المتطورة لتطوير التطبيقات التي تستند إلى الذكاء الاصطناعي. يعد OpenAI API من أكثر الواجهات البرمجية شيوعًا في مجال الذكاء الاصطناعي، حيث يوفر للمطورين الوصول إلى النماذج الأكثر تطورًا للتعلم الآلي والتي تدعم العديد من التطبيقات والأدوات. فباستخدام هذه الواجهة البرمجية، يمكن للمطورين إنشاء تطبيقات متطورة تعتمد على الذكاء الاصطناعي في مجالات مختلفة مثل التسويق والتعليم والصحة والإدارة والمالية وغيرها. ومن بين أهم التطبيقات التي يمكن استخدام OpenAI API فيها هي التحدث مع الآلة والتعرف على الصور والنصوص والتحكم في الأجهزة الذكية. كما يمكن استخدامها في مجالات مختلفة مثل الروبوتات والألعاب والتصميم والترجمة والعديد من التطبيقات الأخرى. وبفضل تقنياتها المتطورة، تمكّن OpenAI API المستخدمين من الوصول إلى أدوات ونماذج التعلم الآلي الأكثر تطورًا، مما يجعلها خيارًا جيدًا للمطورين الذين يبحثون عن الحلول الفعالة لتطوير التطبيقات التي تعتمد على الذكاء الاصطناعي. نتعلم في هذا المقال كيفية الاستفادة من واجهة OpenAI API والاتصال بخدمة ChatGPT واستعمالها في تطبيق عملي بسيط، ويمكنك أنت بعد ذلك استعمالها في أي تطبيق تريده. فكرة المشروع ومتطلباته في هذا المقال، سنستكشف كيفية إنشاء مساعد شخصي باستخدام ChatGPT API بطريقة فعالة ومبتكرة، وكيفية تخصيص تجربة المستخدم لتلبية احتياجاتهم الفردية، سنتحدث أيضًا عن أهمية هذه التقنية في عالمنا الرقمي الحديث، وكيف يمكن أن يكون بناء مساعد شخصي باستخدام ChatGPT API استثمارًا قيماً و لكن قبل الشروع في التنفيذ علينا أن نلقي نظرة خاطفة على التقنيات المستخدمة لربط ChatGpt برمجيًا باستخدام Node.js. المتطلبات المسبقة لبناء المشروع: تثبيت بيئة Nodejs: لمن لا يعرفها، هي بيئة تشغيل JavaScript خارج المتصفح. إطار العمل Express.js: لتطوير تطبيقات الويب باستخدام Node.js، وارجع إلى مقال إعداد بيئة تطوير Node مع Express من أجل تثبيته مع Node.js. واجهة OpenAI API: توفر خدمات وأدوات للمطورين لإنشاء تطبيقات وأنظمة تعتمد على تقنيات الذكاء الاصطناعي. وتشمل خدمات OpenAI API العديد من الأدوات والتقنيات مثل GPT-3 وDALL-E ومنصة الاستكشاف للتحليلات اللغوية وتطبيقات الروبوتات والعديد من الخدمات الأخرى. الآن سنقوم بكتابة الكود البرمجي خطوة بخطوة، بدءًا من إعداد بيانات الواجهة API وصولاً إلى بناء بوت دردشة يمكنه فهم استفسارات المستخدمين والرد عليها بلغة طبيعية. تهيئة المشروع ننشئ مجلدًا جديدًا عن طريق إدخال التعليمات التالية في الطرفية terminal ونطلق عليه اسم خاص بالمشروع: $ mkdir chatgpt-api-bot $ cd chatgpt-api-bot ننشئ ملف package.json عبر الأمر التالي: $ npm init -y نضيف الحزم التالية: openai: توفر مكتبة OpenAI Node.js وصولاً إلى واجهة OpenAI API من تطبيقات Node.js readline-sync: توفر قراءة متزامنة إدخالات المستخدم من سطر الأوامر Dotenv: تسمح لنا بادارة المتغيرات في الملف ‎.env داخل بيئة المشروع إطار العمل Expressjs body-parser: تسمح لك بمعالجة الطلبات بتنسيقات مختلفة مثل JSON و XML. $ npm i openai@4.20.0 readline-sync@1.4.10 dotenv@16.3.1 express@4.18.2 body-parser إنشاء مفتاح api من OpenAI لكي نتمكن من استخدام واجهة OpenAI API داخل تطبيق Node.js، نحتاج أولاً إلى إنشاء مفتاح API من لوحة تحكم OpenAI. لإنشاء المفتاح، نتحتاج إلى إنشاء حساب مستخدم على https://openai.com والوصول إلى قسم مفاتيح واجهة برمجة التطبيقات في لوحة تحكم OpenAI ثم إنشاء مفتاح جديد. هذا المفتاح سري ويجب ألا يتم مشاركته مع أي شخص آخر، سنحتاج إلى استخدام هذا المفتاح لاحقًا عند تنفيذ برنامج Node.js للوصول إلى OpenAI API. نضيف هذا المفتاح إلى متغير البيئة في المشروع الخاص بنا، حيث ننشئ ملفًا جديدًا: touch .env نضيف في هذا الملف المتغير OPENAI_API_KEY ونسند له قيمة المفتاح api الذي نسخناه للتو: OPENAI_API_KEY="YOUR OPEN AI API KEY" بناء الواجهة الخلفية backEnd الخاص بالمشروع ننشئ ملف المشروع و ليكن اسمه index.js: $ touch index.js داخل ملف index.js نبدأ في كتابة الكود ونقوم أولا باستدعاء الحزم التي قمنا بتحميلها داخل المشروع: const express = require("express"); const bodyParser = require("body-parser"); const OpenAI = require("openai"); require("dotenv").config(); Configuration و OpenAIApi هي كائنات من حزمة OpenAI، والتي تستخدم للاتصال بواجهة OpenAI API واستخدامها dotenv لتحميل متغيرات بيئة المشروع من ملف ‎.env ننشئ بعد ذلك خادم المشروع عبر Express: const app = express(); const port = 3000; app.listen(port, () => { console.log(`Server is listening on port ${port}`); }); بناء كود الربط بين openAI api والتطبيق نضبط مكتبة openai بتمرير قيمة المفتاح الموجود في ملف بيئة المشروع: const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY, }); ننشئ الآن مصفوفة فارغة لتخزين سجل المحادثة ضمنها والتي من شأنها توفير سياق المحادثة للذكاء الاصطناعي لتوليد الإجابات المناسبة: const history = []; ننشئ مصفوفة للرسائل ثم نستخدم حلقة for لتكرار سجل المحادثة وإنشاء قائمة بالرسائل بالتنسيق المناسب لبوت الدردشة ChatGPT الخاص بـ OpenAI. و إعطاء كل رسالة دور role (إما "مستخدم" أو "مساعد ") والمحتوى (نص الرسالة)، ولمزيد من التفصيل يمكن الإطلاع على صفحة Text generation models من openAI. نضيف بعد ذلك مدخلات المستخدم user_input ودوره الحالي إلى نهاية مصفوفة الرسائل: const messages = []; for (const [input_text, completion_text] of history) { messages.push({ role: "user", content: input_text }); messages.push({ role: "assistant", content: completion_text }); } messages.push({ role: "user", content: user_input }); الآن نستخدم openai.createChatCompletion لتوليد رد من OpenAI API وندخل معامل نموذج الذكاء الاصطناعي الخاص بتوليد الرد وهو نموذج gpt-3.5-turbo: const completion = await openai.createChatCompletion({ model: "gpt-3.5-turbo", messages: messages, }); يوجد أكثر من معامل ويمكنك زيارة صفحة models لمعرفة المعاملات المتوفرة واختلافها ومعامل الرسائل messages أيضًا. نستخدم بعد ذلك التابع createChatCompletion لتوليد الاجابة من خلال الواجهة openAi API، ويتم استخراج الاستجابة التي تم إنشاؤها من نموذج ذكاء اصطناعي AI من الكائن completion ونخزنها في المتغير completion_text، ثم نطبع الاجابة في الطرفية. const completion_text = completion.choices[0].message.content; console.log(completion_text); ندخل البيانات التالية إلى مصفوفة سجل المحادثة: النص الحالي الذي أدخله المستخدم user_input والرد الذي تم إنشاؤه من قبل نموذج الذكاء الاصطناعي completion_text: history.push([user_input, completion_text]); ثم نعالج الأخطاء التي يمكن أن تحدث أثناء تنفيذ الطلب بطباعة كود الخطأ ومعلومات عن الخطأ عن طريق استخدام try/catch في JavaScript: try{ // code here } catch (error) { if (error.response) { console.log(error.response.status); console.log(error.response.data); } else { console.log(error.message); } } ما هي عمليات CRUD؟ عمليات CRUD هي اختصار للعمليات الأربعة الأساسية التي يتم استخدامها في إدارة البيانات وهي الإنشاء Create والقراءة Read والتحديث Update والحذف Delete، ويتم استخدام هذه العمليات في العادة في تطوير تطبيقات الويب والبرمجيات المختلفة التي تتعامل مع قواعد البيانات. ويوفر إطار العمل Express وظائف مختلفة لتسهيل عمليات الإنشاء والقراءة والتحديث والحذف والتي تتماشى مع عمليات CRUD. على سبيل المثال، يوفر Express وظائف لمعالجة طلبات http مثل: app.post()‎ للإنشاء app.get()‎ للقراءة app.put()‎ للتحديث app.delete()‎ للحذف ويمكن استخدام هذه الوظائف لتنفيذ عمليات CRUD بسهولة في تطبيقات Express، مما يساعد في إدارة البيانات بشكل فعال. بناء نقاط الوصول الخاصة بالمشروع سنستخدم في مشروعنا عمليتين فقط لإدارة البيانات وهما عملية الإنشاء وعملية القراءة حاليًا. نقوم بقراءة ملف index.html الذي سننشئه لاحقًا لعرض الواجهة الأمامية للتطبيق: // Serve the index.html file app.get('/', (req, res) => { res.sendFile(__dirname + '/index.html'); }); لمعالجة الرسائل القادمة من المستخدم نستخدم app.post ونقوم بكتابة كود الربط بين واجهة openAi APi والتطبيق داخل الدالة ونضيف الاستجابة اللي سوف تعود لنا من openAi APi: … app.post('/message', async (req, res) => { const message = req.body.message; // If there is a previous message, include it in the prompt const user_input = history.length > 0 ? `سجل المحادثة:\n${history.join('\n')}\nأنت: ${message}\n` : `أنت: ${message}\n`; const messages = []; for (const [input_text, completion_text] of history) { messages.push({ role: "user", content: input_text }); messages.push({ role: "assistant", content: completion_text }); } messages.push({ role: "user", content: user_input }); try { const completion = await openai.chat.completions.create({ model: "gpt-3.5-turbo", messages: messages, }); const completion_text = completion.choices[0].message.content; console.log(completion_text); history.push([user_input, completion_text]); res.json({ message: completion_text }); } catch (error) { if (error.response) { console.log(error.response.status); console.log(error.response.data); res.status(500).json({ error: 'Something went wrong' }); } else { console.log(error.message); res.status(500).json({ error: 'Something went wrong' }); } } }); لاحظ أننا قمنا بتخزين الرسائل القادمة من طلب http المرسل من المستخدم داخل المتغير message: message = req.body.message; وأعدنا الاستجابة التي نحصل عليها عبر: res.json({ message: completion_text }); انتهينا الآن من بناء الواجهة الخلفية للتطبيق وهي جاهزة للعمل، وكخطوة إضافية تُطلب عادة في اختبار الواجهات الخلفية، يمكنك تجربة نقاط الوصول عبر تطبيق postman أو Insomnia والتأكد من أن كل شيء يعمل بشكل صحيح. بناء الواجهة التفاعلية للتطبيق سنبدأ الآن بناء الواجهة الأمامية للتطبيق وهي صفحة HTML بسيطة تمكن من التفاعل مع خدمة ChatGPT ورؤية النتيجة مباشرةً. إنشاء الصفحة الرئيسية ننشئ ملف index.html الذي يمثل واجهة التطبيق الذي نعمل على بنائه: $ touch index.html نضيف كود HTML الأساسي ونضع ضمن وسم title عنوان الصفحة ولتكن دردش مع البوت chatbot: <!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <title>دردش مع البوت chatbot</title> </head> <body> </body> </html> الآن نكتب كود الصفحة داخل وسم body: <div id="container"> <h1>دردش مع البوت chatbot</h1> <div id="conversation"></div> <form> <input type="text" id="message" placeholder="اكتب رسالتك هنا" /> <button type="submit">إرسال</button> </form> </div> هنا قمنا بإضافة عنوان يظهر بأعلى الصفحة واستمارة form تحوي قسمًا لإدخال استفسارات المستخدم وزر الإرسال، ثم نعرض المحادثة داخل العنصر <div id="conversation"></div>. تنسيق الصفحة الرئيسية نقوم بوضع الكود التالي ضمن وسم <head> وهو تنسيق جاهز بسيط أضفناه للصفحة ويمكنك تعديله أو كتابة التنسيق الخاص بك: <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } #container { padding: 8rem 16rem; } h1 { text-align: center; margin: 2rem 0; } form { display: flex; justify-content: space-between; align-items: center; margin: 2rem 0; } input[type="text"] { height: 2rem; flex: 1; padding: 1rem; font-size: 1.2rem; border-radius: 0.5rem; border: none; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); } button[type="submit"] { height: 4rem; padding: 0 1.2rem; margin-right: 1rem; font-size: 1.2rem; border-radius: 0.5rem; border: none; background-color: #007bff; color: white; cursor: pointer; } #conversation { margin: 2rem; } p { margin: 0.5rem 0; } .user { color: #007bff; font-weight: bold; } .chatbot { color: #333; font-weight: bold; width: 50%; } </style> الصفحة بسيطة وستظهر بالشكل التالي: سنعمل بعدها على تركيب أجزاء المشروع مع بعضها بربط الواجهة الأمامية مع الخلفية وتجربة خصائصه. ربط الواجهة الأمامية مع الواجهة الخلفية الآن نكتب الكود الخاص بربط الواجهة الخلفية مع الواجهة التفاعلية الأمامية ونضيفه ضمن وسم body: <script> const conversationElem = document.getElementById('conversation'); const messageInput = document.getElementById('message'); // Send message to chatbot on form submit document.querySelector('form').addEventListener('submit', async (event) => { event.preventDefault(); const message = messageInput.value; messageInput.value = ''; // Send message to server and wait for response const response = await fetch('/message', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ message }) }).then(res => res.json()); // Add user message and chatbot response to conversation conversationElem.innerHTML += `<p class="user">أنت: ${message}</p>`; conversationElem.innerHTML += `<p class="chatbot">البوت: ${response.message}</p>`; console.log(response.message) }); </script> قمنا بتعريف متغيرين الأول هو conversationElem لقسم المحادثة والثاني messageInput لمدخلات المستخدم ثم قمنا باختيار النموذج الذي انشأناه في ملف index.html لمعالجة البيانات المدخلة وإرسالها إلى الواجهة الخلفية، ونستخدم لذلك الغرض دالة fetch من خلال عملية post التي قمنا بشرحها سابقًا. ثم نقوم باضافة رسالة المستخدم واستجابة بوت المحادثة المرسلة من الواجهة الخلفية للتطبيق من خلال استخدام الدالة innerHTML ونضيف العناصر ضمن وسم النص <p> ونكون بذلك قد انتهينا من المشروع النموذجي. الكود النهائي للمشروع ملف index.js: const express = require("express"); const bodyParser = require("body-parser"); const OpenAI = require("openai"); require("dotenv").config(); const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY, }); const app = express(); const port = 3000; // Array to store previous messages const history = []; // Middleware to parse JSON in the request body app.use(bodyParser.json()); // Serve the index.html file app.get("/", (req, res) => { res.sendFile(__dirname + "/index.html"); }); // Handle incoming messages app.post("/message", async (req, res) => { const message = req.body.message; // If there is a previous message, include it in the prompt const user_input = history.length > 0 ? `سجل المحادثة:\n${history.join("\n")}\nأنت: ${message}\n` : `أنت: ${message}\n`; const messages = []; for (const [input_text, completion_text] of history) { messages.push({ role: "user", content: input_text }); messages.push({ role: "assistant", content: completion_text }); } messages.push({ role: "user", content: user_input }); try { const completion = await openai.chat.completions.create({ model: "gpt-3.5-turbo", messages: messages, }); const completion_text = completion.data.choices[0].message.content; console.log(completion_text); history.push([user_input, completion_text]); res.json({ message: completion_text }); } catch (error) { if (error.response) { console.log(error.response.status); console.log(error.response.data); res.status(500).json({ error: "Something went wrong" }); } else { console.log(error.message); res.status(500).json({ error: "Something went wrong" }); } } }); // Start the server app.listen(port, () => { console.log(`Server is listening on port ${port}`); }); ملف index.html: <!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } #container { padding: 8rem 16rem; } h1 { text-align: center; margin: 2rem 0; } form { display: flex; justify-content: space-between; align-items: center; margin: 2rem 0; } input[type="text"] { height: 2rem; flex: 1; padding: 1rem; font-size: 1.2rem; border-radius: 0.5rem; border: none; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); } button[type="submit"] { height: 4rem; padding: 0 1.2rem; margin-right: 1rem; font-size: 1.2rem; border-radius: 0.5rem; border: none; background-color: #007bff; color: white; cursor: pointer; } #conversation { margin: 2rem; } p { margin: 0.5rem 0; } .user { color: #007bff; font-weight: bold; } .chatbot { color: #333; font-weight: bold; width: 50%; } </style> <title>دردش مع البوت chatbot</title> </head> <body> <div id="container"> <h1>دردش مع البوت chatbot</h1> <div id="conversation"></div> <form> <input type="text" id="message" placeholder="اكتب رسالتك هنا" /> <button type="submit">إرسال</button> </form> </div> <script> const conversationElem = document.getElementById("conversation"); const messageInput = document.getElementById("message"); // Send message to chatbot on form submit document .querySelector("form") .addEventListener("submit", async (event) => { event.preventDefault(); const message = messageInput.value; messageInput.value = ""; // Send message to server and wait for response const response = await fetch("/message", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ message }), }).then((res) => res.json()); // Add user message and chatbot response to conversation conversationElem.innerHTML += `<p class="user">أنت: ${message}</p>`; conversationElem.innerHTML += `<p class="chatbot">البوت: ${response.message}</p>`; console.log(response.message); }); </script> </body> </html> تجربة التطبيق ندخل الأمر التالي بالطرفية لتشغيل التطبيق: $ node index.js ثم نذهب للمتصفح ونقوم بإدخال العنوان التالي localhost:3000 لتظهر لنا واجهة التطبيق، ندخل أي سؤال وليكن كتابة قصة قصيرة وننتظر الرد من التطبيق كما في الصورة التالية: يمكنك تحميل كود التطبيق من هنا chatgpt-api-bot.zip تطويرات يمكن إضافتها للمشروع يمكننا تطوير المشروع السابق بالعديد من الطرق، ومنها: إضافة ميزات لبوت الدردشة: يمكنك إضافة ميزات جديدة مثل إضافة قائمة من الخيارات للمستخدم للاختيار من بينها مثل إضافة طريقة رد البوت هل هي بطريقة جدية أو بطريقة مضحكة أو بسخرية …إلخ، أو تمكين البوت من إجراء بعض العمليات الرياضية أو توفير إجابات علمية أو حتى إنشاء بوت لتعلم شيء جديد مثل تعلم البرمجة أو تعلم الإنجليزية وهكذا. تحسين واجهة المستخدم: يمكنك تحسين واجهة المستخدم لتبدو أكثر جاذبية وسهولة في الاستخدام، ويمكنك استخدام مكتبات CSS المختلفة لتحسين التصميم والإضاءة على المكونات المهمة في الصفحة. تخزين المحادثات: يمكنك إضافة القدرة على تخزين المحادثات السابقة بين المستخدم والشات بوت، وعرضها للمستخدم عند الضرورة. إضافة تحليلات: يمكنك إضافة تحليلات للمحادثات، مثل عدد المحادثات الناجحة والمحادثات التي تم إنهاؤها بشكل مبكر التي قام المستخدم باغلاقها، وعرضها بشكل رسومي لمساعدتك في تحسين أداء البوت. استخدام مكتبة React أو Vue لتصميم واجهة أمامية تفاعلية أكثر وأداء أفضل. ربط البوت مع خدمات openAI الأخرى المختلفة مثل استعمال رده في توليد صورة من خدمة DALL·E هذه بعض الأفكار التي يمكن تطبيقها لتطوير مشروع الدردشة ويمكنك استخدامها كنقطة انطلاق لمشاريعك المستقبلية، ويمكنك أن تطلع على صفحة الأمثلة من openAI التي تحوي على عشرات الأمثلة والتطبيقات التي يمكن الاستلهام منها والبناء عليها. الخلاصة بهذا نكون قد انتهينا من هذا المقال الذي شرحنا فيه كيفية ربط واجهة برمجة تطبيقات OpenAI API عبر خدمة ChatGPT مع Node.js لإنشاء بوت دردشة بسيط. وباستخدام هذه التقنيات يمكن للمطورين إضافة قيمة كبيرة لتطبيقاتهم على الويب، وتوفير تجربة مميزة للمستخدمين، وكما رأينا، فإن استخدام OpenAI's ChatGPT في Node.js ليس صعبًا بقدر ما يبدو، ويمكن لأي مطور أن يبدأ في تجربتها والاستفادة منها. ومن المؤكد أننا سنشهد مزيدًا من التطورات والتحسينات في مجال الذكاء الاصطناعي والبوتات الذكية في المستقبل، ولذلك يجب أن نستعد لمواكبة هذه التحولات والتطورات بالاستمرار في تعلم وتحسين مهاراتنا في هذا المجال، فلا شك أنه بالعمل الجاد والاستمرار في الابتكار، يمكن للجميع أن يحققوا نجاحات كبيرة في هذا المجال الواعد. اقرأ أيضًا دليل استخدام ChatGPT API لتحسين خدماتك عبر الإنترنت تطوير تطبيق 'وصفة' لاقتراح الوجبات باستخدام ChatGPT و DALL-E في PHP تطوير تطبيق 'علمني' لاستكشاف المواضيع باستخدام جافا سكريبت و ChatGPT