قم ببناء واجهة أمامية بسيطة لواجهة برمجة تطبيقات DALL-E وابدأ في تجربة المحتوى الذي تم إنشاؤه بواسطة الذكاء الاصطناعي اليوم.
يتحسن الذكاء الاصطناعي باستمرار ويمكنه الآن إنشاء صور مذهلة. مثال فيروسي حديث يصور الأفراد الأكثر ثراءً وتأثيراً في العالم بملابس ممزقة ، ويعيشون في بيئة فقيرة. الأمر المثير للإعجاب في الصور هو المستوى العالي من التفاصيل التي تم التقاطها في كل من الأشخاص ومحيطهم.
تعمل النماذج اللغوية مثل DALL-E و Midjourney على تعزيز قدرات توليد الصور هذه ، مع أخذ الأوصاف النصية كمدخلات وإنشاء صور آسرة.
تعرف على كيفية دمج واجهة برمجة تطبيقات DALL-E الخاصة بـ OpenAI لإنشاء صور في تطبيق React.
إنشاء الصور باستخدام نموذج اللغة DALL-E الخاص بـ OpenAI
كيف يولد نموذج اللغة DALL-E صورًا بالفعل؟ دون التعمق في تعقيدات إنشاء صور الذكاء الاصطناعي ، يفسر DALL-E أولاً الأوصاف النصية التي يتم تغذيتها لها كمدخلات باستخدام معالجة اللغة الطبيعية (NLP). ثم يعرض صورة واقعية تتطابق إلى حد كبير مع الوصف المحدد.
يمكن أن تتضمن مطالبات الإدخال أوصافًا نصية لشخص أو كائن أو مشهد. بالإضافة إلى ذلك ، يمكن أن تتضمن أيضًا تفاصيل مثل لون وشكل وحجم معين. بغض النظر عن مدى تعقيد أو بساطة نص الإدخال ، فإن DALL-E سينشئ صورة تتطابق بشكل وثيق مع وصف الإدخال.
من المهم ملاحظة أن نموذج اللغة ، تمامًا مثل النماذج الأخرى ، تم تدريبه على مجموعة بيانات كبيرة مع الملايين من بيانات الصور لمعرفة كيفية تحديد وإنشاء الصور الواقعية من معين المدخلات.
الشروع في العمل مع واجهة برمجة تطبيقات DALL-E الخاصة بـ OpenAI
واجهة برمجة تطبيقات OpenAI's DALL-E متاحة للاستخدام كإصدار تجريبي عام. لدمج واجهة برمجة التطبيقات للاستخدام في تطبيق React الخاص بك ، ستحتاج إلى مفتاح لواجهة برمجة تطبيقات OpenAI. رئيس لأكثر من أوبن إيه آيوقم بتسجيل الدخول إلى صفحة نظرة عامة على حسابك للحصول على مفتاح API الخاص بك.
بمجرد تسجيل الدخول ، انقر فوق أيقونة ملف تعريف المستخدم في القسم العلوي الأيمن من صفحة النظرة العامة الخاصة بك. بعد ذلك ، حدد وانقر فوق عرض مفاتيح API.
في صفحة إعدادات API Keys ، انقر فوق ملف إنشاء مفتاح سري جديد زر ، أدخل اسمًا لمفتاح API الخاص بك ، وانقر فوق إنشاء مفتاح سري لتوليد مفتاح API الخاص بك.
قم بإنشاء مشروع React
قم بتشغيل الأوامر أدناه على جهازك لإنشاء مشروع React جديد محليًا. ملاحظة ، يجب أن يكون لديك Node.js مثبتًا.
الرجوع إلى هاتين المادتين لمعرفة كيفية قم بتثبيت Node.js على نظام Windows و كيفية تثبيت Node.js على أوبونتو.
مشروع mkdir React
مشروع رد الفعل cd
npx إنشاء-رد فعل-التطبيق-مولد صورة التطبيق
تطبيق مولد صورة القرص المضغوط
بدء npmبدلاً من ذلك ، بدلاً من استخدام الأمر create-reaction-app ، يمكنك استخدام Vite لإعداد مشروع React الخاص بك. Vite هي أداة بناء مصممة لبناء تطبيقات الويب بسرعة وكفاءة.
دمج واجهة برمجة تطبيقات DALL-E الخاصة بـ OpenAI لإنشاء الصور
بمجرد تشغيل تطبيق React وتشغيله ، ثبّت مكتبة OpenAI's Node.js لاستخدامها في تطبيقات React.
npm تثبيت openaiبعد ذلك ، في الدليل الجذر لمجلد مشروعك ، قم بإنشاء ملف .env ملف لعقد مفتاح API الخاص بك.
REACT_APP_OPENAI_API_KEY = "مفتاح API"يمكنك العثور على رمز هذا المشروع في هذا مستودع جيثب.
قم بإنشاء مكون مولد الصورة
في ال /src الدليل ، قم بإنشاء مجلد جديد ، قم بتسميته عناصر، وأنشئ ملفًا جديدًا بداخله باسم ImageGenerator.js. أضف الكود أدناه إلى هذا الملف.
ابدأ باستيراد الوحدات المطلوبة:
يستورد"../App.css";
يستورد {useState} من"تتفاعل";
يستورد {التكوين ، OpenAIApi} من"openai";تعمل وحدة التكوين على تكوين عميل واجهة برمجة تطبيقات OpenAI للاستخدام ، بينما توفر وحدة OpenAIApi طرقًا للتفاعل مع واجهة برمجة تطبيقات OpenAI. تتيح هاتان الوحدتان الوصول إلى ميزات DALL-E واستخدامها من تطبيق React.
بعد ذلك ، حدد مكونًا وظيفيًا وأضف الكود التالي إليه:
وظيفةImageGenerator() {
مقدار ثابت [موجه ، setPrompt] = useState ("");
مقدار ثابت [result، setResult] = useState ("");
مقدار ثابت [تحميل ، setLoading] = useState (خطأ شنيع);مقدار ثابت [placeholder، setPlaceholder] = useState (
"ابحث عن أسد بالفرشاة يرسم لوحة الموناليزا ..."
);مقدار ثابت التكوين = جديد إعدادات({
apiKey: process.env. REACT_APP_OPENAI_API_KEY ،
});
مقدار ثابت openai = جديد OpenAIApi (التكوين) ؛
مقدار ثابت GeneratorImage = غير متزامن () => {
setPlaceholder (بحث $ {موجه}..`);
setLoading (حقيقي);يحاول {
مقدار ثابت الدقة = انتظر openai.createImage ({
موجه: موجه ،
ن: 1,
مقاس: "512 × 512",
});
setLoading (خطأ شنيع);
setResult (res.data.data [0] .url) ؛
} يمسك (خطأ) {
setLoading (خطأ شنيع);
وحدة التحكم.خطأ(خطأ في إنشاء الصورة: $ {error.response.data.error.message}`);
}
};
تحدد هذه الشفرة مكونًا وظيفيًا يسمى React ImageGenerator. يستخدم المكون العديد من متغيرات الحالة لإدارة موجه الإدخال ونتائج الإخراج وحالة التحميل ونص العنصر النائب.
يقوم المكون أيضًا بإنشاء ملف إعدادات كائن لعميل OpenAI API ، والذي يتضمن مفتاح API المسترجع من متغير البيئة.
غير المتزامن توليد الصورة سيتم تشغيل الوظيفة عندما ينقر المستخدم على زر ، ويمر على طول موجه المستخدم.
ثم يستدعي openai.createImage طريقة لتوليد صورة بناءً على موجه معين. تقوم هذه الطريقة بإرجاع كائن استجابة يتضمن عنوان URL للصورة المُنشأة.
إذا نجح استدعاء API ، يقوم الكود بتحديث ملف نتيجة متغير الحالة مع عنوان URL ، ويقوم بتعيين حالة التحميل إلى خطأ شنيع. إذا فشل استدعاء API ، فإنه لا يزال يعين حالة التحميل إلى خطأ شنيع، ولكنه يسجل أيضًا رسالة خطأ إلى وحدة التحكم.
أخيرًا ، قم بتصيير عناصر React JSX التي تشكل مكون مُنشئ الصورة.
يعود ("حاوية">
{ تحميل؟ (
<>جاري إنشاء الصورة... من فضلك انتظر .../h3>
</>
): (
<>قم بإنشاء صورة باستخدام Open AI API </h2>
className ="إدخال التطبيق"
placeholder = {placeholder}
onChange = {(e) => setPrompt (e.target.value)}
الصفوف ="10"
cols ="100"
/>{result.length> 0? (
"نتيجة صورة" src = {result} alt ="نتيجة" />
): (
<>
</>
)}
</>
)}
</div>
)
}
يصدّرتقصير ImageGenerator
يعرض كود هذا المكون بشكل مشروط عناصر مختلفة بناءً على قيمة تحميل المتغير الحكومي.
لو تحميل هو صحيح ، فإنه يعرض رسالة تحميل. على العكس من ذلك ، إذا تحميل خطأ ، فهو يعرض الواجهة الرئيسية لإنشاء صورة باستخدام واجهة OpenAI API التي تتكون من منطقة نصية تلتقط مطالبات المستخدم وزر إرسال.
ال نتيجة يحتفظ متغير الحالة بعنوان URL الخاص بالصورة الذي تم إنشاؤه والذي يتم عرضه لاحقًا على المتصفح.
قم بتحديث مكون App.js
أضف هذا الرمز إلى ملف App.js الخاص بك:
يستورد"./App.css";
يستورد ImageGenerator من"./component/ImageGenerator";وظيفةبرنامج() {
يعود ("برنامج">"عنوان التطبيق">
</header>
</div>
);
}
يصدّرتقصير برنامج؛
يمكنك الآن المضي قدمًا وتدوير خادم التطوير لتحديث التغييرات والانتقال إلى http://localhost: 3000 مع متصفحك لاختبار وظيفة إنشاء الصور.
للحصول على أفضل النتائج الممكنة عند استخدام أداة AI لإنشاء صورة ، تأكد من تقديم مطالبة مفصلة في منطقة النص. هذا يعني وصف الصورة بأكبر قدر ممكن من الدقة ، دون ترك أي تفاصيل.
تسمى هذه العملية الهندسة الفورية ، وهي تتضمن تقديم مطالبات مفصلة بحيث يمكن لنموذج اللغة أن ينتج أفضل النتائج بناءً على مدخلات المستخدم المقدمة.
نظرًا للطفرة الأخيرة في برامج الذكاء الاصطناعي المتاحة في السوق ، متابعة مهنة في الهندسة السريعة يمكن أن تكون فرصة مربحة.
تعظيم قوة النماذج اللغوية في تطوير البرمجيات
استحوذت أدوات الذكاء الاصطناعي المدعومة بنماذج اللغات الكبيرة على مجال تطوير البرمجيات بسبب ميزاتها وقدراتها المذهلة.
تمتلك هذه الأدوات القدرة على تحسين النظام البيئي الحالي للبرامج من خلال السماح للمطورين بدمج ميزات الذكاء الاصطناعي الرائعة التي تعزز استخدام المنتجات المختلفة - يوفر استخدام تقنية الذكاء الاصطناعي فرصة فريدة لبناء برامج مبتكرة طرق.
