في هذا الفيديو، سنتعلم كيفية إنشاء برنامج توليد صور بالذكاء الاصطناعي باستخدام HTML و CSS و JavaScript.
جميع الروابط هنا :
openai:
https://openai.com/
___________________
openai introduction :
https://platform.openai.com/docs/introduction
___________________
openai api keys :
https://platform.openai.com/api-keys
___________________
openai reference images :
https://platform.openai.com/docs/api-reference/images/create
___________________
للتواصل معي على حسابي على instagram :
https://www.instagram.com/abdelrahman_noufal/
___________________
أكاديمية نوفيل لتعليم البرمجة :
https://nouvil.net/
___________________
جروب الفيسبوك الخاص بنا :
https://www.facebook.com/groups/1810581845642171/
___________________
حسابي على الفيسبوك للاهمية فقط :
https://www.facebook.com/abdelrahman.g.nofal
___________________
خطوات عمل ai images generator using html and css and js :
البرنامج مكون من واجهة مستخدم بسيطة تم عملها بال html and css
و تم الاستعانة ب openai او chatgpt في توليد الصور باستخدام api key من شات جي بي تي مخصص لانشاء صور بالذكاء الاصطناعي
و من خلال الجافاسكريبت قمنا بعمل برنامج يقوم بعمل request ل openai لكي يتم استخدام ai المخصص بهم في توليد الصور
______________
توقيت الفيديو
00:00 ai images generator using js
01:28 انشاء ملفات المشروع
02:59 html code
04:45 css style
12:28 images style
16:08 openai api create images
17:15 get api key
18:00 get images using javascript
19:57 request to the OpenAI API
24:23 Parse the response as JSON
26:09 build html elements
28:50 اصلاح مشكلة تكرار الصور
29:22 الانتهاء من المشروع و تجربته
@user-wi2ww8hd8i6 months agoاكتر واحد بحب شرحه و برتاح لصوته وهو بيتكلم ياريت تكمل في المشاريع دي افضل 45
@
@bashar1_x6 months agoشكرا الك ابتديت اتعلم برمجة بسببك ابتديت بتعلم html.css من عندك ووصلت لمستواه جيد وتعلمت Javascript عند أكاديمية ترميز وبفضلوا، الحمدلله وصلت لمستواه عالي في front end، وتعلمت node.js express وتعلمت ال back end, ووصلت لمستواه full stack وتعلمت برمجة بوتات تلكرام بي node.js والبداية بفضلك أشكرك ❤ ...4
@
@DrHeba-zz8ik6 months agoشكرا ليك انا عمري 15 سنه وقاعد بتعلم وفاهم وبلشت اتطبق شكرا من اعماق القلب 4
@
@rafiatala84215 months agoشكرا لك اخ عبد الرحمن على الشرح الجميل والواضح الذي يدل على انك متمكن من البرمجة.وعلى عطاءك المميز الصادر من انسان يحب امته. 7
@
@eslammohamed-po3sd6 months agoانا فعلا مش مصدق ده بتنشر كل اسرار البرمجه 5
@
@storylifekids4 months agoسبحان من رزقك العلم الله يرحم والديك❤❤ 1
@
@hacksploit-mf8yz6 months agoغبت عنك فتره لقيتها خارب الدنيا ❤❤❤❤❤❤ 1
@
@MohamedSalama696 months agoيا أخي عليا النعمه بحبك من زماااان ( انت حد محترم )❤ 3
@
@user-ye5tc5ju1b6 months agoدائما مبدع الأستاذ عبدالرحمن زادك الله فى علمك ولله وفيت و كفيت 1
@osamaabdelaziz73126 months agoيارب من نجاح لنجاح أكثر، بارك الله فيك 2
@
@open-source2436 months ago🎉 شكرا جدا على المجهود الرائع و المعلومات المفيدة 😊 2
@
@Mc-bs7mg6 months agoبعدين عن الموقع شرحك جميل ومفهوم جدا جدا استمر على هذا النمط 1
@
@arystanfans6 months agoI'm soo excited 😊 love your tutorial 😍 1
@
@purple879466 months agoبارك الله فيك مشكور عبد الرحمن ماقصرت ❤ 1
@
@ahmedmohamed087436 months agoوالله يابشمهندس انت رقم واحد فى مصر غصب عن اي حد انسان واثق من نفسه وعارف هو بيعمل ايه انا بدرس باك اند بس برتاح اسمعلك والله 1
@
@yosefelmatbole45826 months agoعظمه يا هندسه اقسم بالله ربنا يبارك فى حضرتك 3
@
@takeactions6 months agoالسلام عليكم ورحمة الله وبركاته ، أحبك في الله سيدي الفاضل. تحية طيبة من المغرب.
@
@Smile2006NBES6 months agoakhi ana min alMaghrib , allah ijazik bikol khir inchaalah
@
@raafatzakarie21493 months agoشكرا ليك اخويا الغالي شرحك جميل جدا جدا 1
@kaderlakhdar57356 months agoبارك الله فيك ، شرحك الاروع على الاطلاق 4
@
@AymaneDigital6 months agoدائما مبدع ، بارك الله فيك أستاذ ، وشكرا على الشرح الوافي 🙌🤩 2
@
@09913940076 months agoماشاء الله عليك مبدع ورائع بالشرح أتمنى إنك تعملنا كورس node.js لأن شرحك لايعلى عليه بارك الله بك وزادك علماً 11
@
@muhammed_sassi6 months agoولله مشاء الله استفدت من الفيديو كثير ❤ جزاك الله خيرا 2
@
@abdelghaniaittamghart74905 months agoشكرا جدا على المجهود الرائع و المعلومات المفيدة متى ستشرح php ???? , جزاك الله كل خير 1
@
@seifldeen1166 months agoعظمة يا هندسة❤️والله افضل شرح وافضل محتوى عربي ياريت كورس رياكت جي اس💞💞💞💞💞💞💞
@
@user-hg9bi9yp4f6 months agoاتمني يا هندسة تنزل كورس لارافيل لاني محتاجه جدا 😢❤ 1
@
@user-ft4lw8kr8y6 months agoاستاذنا الغااااالي الله يخليك بصحتك وعافيتك وشكراااا من القلب على المعلومات الرااائعة في قناتك وعلى شرحك الرااااائع الذي جعلني احب البرمجة وانا اعتبرك قدوة لي واتمنى لك الخير والتوفيق الدائم❤❤ 2
@
@elyamani14856 months agoسلام استاذ Abdelrahman Gamal انا من متتبعيك و اريد ان اشكرك على كورس الجافاسكريبت و اريد منك ان تعمل لنا كورس عن (react.js) و (react.native) لانك تقوم بايصال الفكرة بطريقة جيدة وشكرااا ❤️❤️❤️❤️ 1
@
@MohamedSaid-li1th6 months agoربنا يبارك فيك يا هندسة وينفع بعلمك مفيش كورس react قريب؟
@Badr.Din.6 months agoمشاء الله انا مبرمج مبتدئ و تحمست و انشاء الله اصبح مبرمج قوي مثلك 1
@
@awsfader2477last monthممكن كورس عن flutter وشرح عن مستقبلها وامكانية العمل في السوق 1
@
@coverderk12756 months agoما شاء الله. الله يحفظك. ممكن سؤال هل استطيع بنفس الفكرة عمل موقع لتوليد النصوص مثل chat gpt 1
@
@hamdysart6 months agoماشاء لله ربنا يبارك فيك ❤❤ بس هو ممكن لو سمحت تعمل بروجيكت يكون بيحول الصورة الشخصية لصورة انمي شبيهة 😊
@
@arkaturawow96555 months agoشكرا على الشرح يا أستاذ ❤ , لكن هل api Key free أو لازم ندفع ؟ 1
@
@anasfalah27796 months agoلدي سؤال لماذا الأغلب لا يتحدث عن اجاكس في جافاسكريبت رغم أهميتها الكبيرة هل هناك بديل لها ام ماذا وهل ممكن دورة عن اجاكس وشكرا 4
@
@annane61006 months agoاحسنت يا استاذ انا فهمت نص الطريق و ناقصني اتعلم اكثر عن الجافا . بعد ما اكمل طريق cs50 شكرا لك 2
@
@Mc-bs7mg6 months agoاستاذ اتمنى اتسويلنا شرح عن كيفيه شراء templates من مواقع والتعديل عليها وانشاء اتصالات مع قواعد البيانات ورفعها على سيرفر شكرا لك 1
@
@TiroxF6 months agoبارك الله فيك استاذ تسعى لنشر العلم ، انت ملاذنا الوحيد لما العالم صار كلو مادي ❤ جزاءك عند ربنا ❤ عندي سؤال ، هل تشوف تطور الذكاء الاصطناعي ممكن ياثر على مطور الويب الفرونت ولا الباك ؟ 18
@
@salwaalbozebeeba47872 months agoأخوي العزيز أشكرك على مجهودك رائع, تقدر تعمل شرح لانغولر للأبليكشن ويب
@
@heatshot3964last monthشكرا استاذ ممكن تعمل مشروع إنشاء خدمة تحويل الصوت إلى نص
@
@To_happy6 months agoهل تعرف انته شنوو؟ انت مو فقط محترف في البرمجه نته محترف في توصيل المعلومه ومحترف في جذب الانتباه ومحترف في عدم وجود الملل في الفيديو انت بكل بساطه شخص عظيم ❤🎉 استمررر وتستاهل 10 مليون 2
@
@yousra-rw7cclast monthالسلام عليكم، ان شاء الله يفتح عليك يا أستاذ، والله بشكرك كثير على المجهودات في ميزان حسناتك، وصحة ان شاء الله دائما تمام، أبغي كورس اذ تفضلت يا شيخ عن API وكيف نستخدمها في مشاريع، شكرا، بارك الله فيك
@
@user-hz4fc2zm8m5 months agoالله يقويك وينفع فيك البلاد والعباد وانا عايزه وردة حمراء لالك ❤❤ متابعتك وطالبتك من سوريا ❤ 1
@
@davidgeen56136 months agoشكرا جزيلا ياستاذ على الفيديو والشرح الراءع ممكن حضرتك ترفع لنا ملفات html و سيكريبت javascript للتحميل ؟ طبعا بدون رابطك على openai! وشكرا جزيلا من 🇲🇦 3
@
@systembreaker46516 months agoاستاذ عبدالرحمن ممكن فيديو شرح كيفية ارسال واستقبال الدتا من تكبيق فلاسك الى نود Api 1
@
@jamestojames3176 months agoيا حبيب الدنيا ربى تكون بخير كنت بدور فى قناتك عن شرح laravel و مش لاقى اى نتيجه،هل فى فيديو شرح ليها و لا لسه ؟ شكرا مقدما يا محترم
@
@modysherif156 months agoبعد اذن حضرتك ي بشمهندس مافيش منصة لحضرتك فيها لغات البرمجة كلها حتى لو مدفوعة 1
@
@mohamedatefgewaly49686 months agoOpenai detect that my API key was pushed to Github and disabled it.... Is there a solution ? 2
@
@isaeid66076 months agoوالله انت ملكش حل جزاك الله خيرا ربنا يحفظك بس طلب لو أمكن ازي اعمل data table لطلاب ويكون قدام كل اسم في الجدول زر حاضر أو غايب أو منقطع ويعدل مباشرة في الداتا
@
@virustiktok91976 months agoمهندس هسا عندي مشكلة انه الكود نفسه عم يعطيني api for open ai غلط 3
@
@nesreenwaleed75386 months agoلم استطيع توليد api key يظهر لي الرسالة Error generating API key (error=enforcement_failed). If this issue persists please contact us thro ما الحل 2
@
@awsfader24776 months agoبارك الله فيك اخي عاشت ايدك … ياريت تعلمنا على عمل بوت تلجرام في بايثون نقدر من خلاله نجمع نقاد رشق وتمويل في الانستغرام وباقي البرامج
مقاطع الفيديو ذات الصلة على انشاء برنامج توليد صور بالذكاء الاصطناعي بال html - css - javascript كندا:
ابتديت اتعلم برمجة بسببك ابتديت بتعلم html.css من عندك ووصلت لمستواه جيد
وتعلمت Javascript عند أكاديمية ترميز
وبفضلوا، الحمدلله وصلت لمستواه عالي في front end،
وتعلمت node.js express وتعلمت ال back end, ووصلت لمستواه full stack
وتعلمت برمجة بوتات تلكرام بي node.js
والبداية بفضلك أشكرك ❤ ... 4
أحبك في الله سيدي الفاضل. تحية طيبة من المغرب.
تحياتي لك بش مهندس ممكن تكمل دروس الcs50 1
بارك الله بك وزادك علماً 11
متى ستشرح php ????
, جزاك الله كل خير 1
مفيش كورس react قريب؟
بس هو ممكن لو سمحت تعمل بروجيكت يكون بيحول الصورة الشخصية لصورة انمي شبيهة 😊
شراء templates من مواقع والتعديل عليها وانشاء اتصالات مع قواعد البيانات ورفعها على سيرفر شكرا لك 1
عندي سؤال ، هل تشوف تطور الذكاء الاصطناعي ممكن ياثر على مطور الويب الفرونت ولا الباك ؟ 18
وانا عايزه وردة حمراء لالك ❤❤ متابعتك وطالبتك من سوريا ❤ 1
ممكن حضرتك ترفع لنا ملفات html و سيكريبت javascript للتحميل ؟ طبعا بدون رابطك على openai! وشكرا جزيلا من 🇲🇦 3
كنت بدور فى قناتك عن شرح laravel
و مش لاقى اى نتيجه،هل فى فيديو شرح ليها و لا لسه ؟ شكرا مقدما يا محترم
Is there a solution ? 2
بس طلب لو أمكن
ازي اعمل data table لطلاب ويكون قدام كل اسم في الجدول
زر حاضر أو غايب أو منقطع ويعدل مباشرة في الداتا
يظهر لي الرسالة
Error generating API key (error=enforcement_failed). If this issue persists please contact us thro
ما الحل 2