AWS 3arabi

Posted on Nov 20

نشر تطبيق ويب بدون خادم لتحرير الصور باستخدام Amazon Bedrock

#serverless #aws #genai

تمت المراجعة والتحرير باللغة العربية بواسطة Arwa Alnitaifi.

اطلع على المقال الأصلي باللغة الإنجليزية من هنا

اعتماد الذكاء الاصطناعي التوليدي في مختلف الصناعات يُحدث ثورة في أنواع متعددة من التطبيقات، بما في ذلك تحرير الصور. يُستخدم تحرير الصور في مجالات مثل التصميم الجرافيكي، التسويق، ووسائل التواصل الاجتماعي. يعتمد المستخدمون على أدوات متخصصة لتحرير الصور، ولكن بناء حل مخصص لهذه المهمة يمكن أن يكون معقدًا. ومع ذلك، باستخدام خدمات AWS المختلفة، يمكنك بسرعة نشر حل بدون خادم لتحرير الصور. يتيح هذا النهج لفِرق العمل الوصول إلى نماذج تأسيسية (FMs) لتحرير الصور باستخدام Amazon Bedrock.

Amazon Bedrock هي خدمة مُدارة بالكامل تتيح الوصول إلى النماذج التأسيسية (FMs) من أبرز الشركات الناشئة في مجال الذكاء الاصطناعي ومن Amazon عبر واجهة برمجية (API)، مما يوفر مجموعة واسعة من النماذج لاختيار الأنسب لحالتك العملية. تعتبر Amazon Bedrock خالية من إدارة البنية التحتية، مما يتيح لك البدء بسرعة، وتخصيص النماذج التأسيسية بشكل خاص باستخدام بياناتك الخاصة، ودمجها ونشرها في تطبيقاتك باستخدام أدوات AWS بسهولة.

Amazon Titan Image Generator G1 هو نموذج تأسيسي متاح عبر Amazon Bedrock، يتيح لك إنشاء صورة من نص مكتوب أو تحميل صورة لتحريرها. تشمل الميزات الرئيسية التي نركز عليها في هذا النموذج التلوين داخل الصورة (inpainting) والتوسيع خارج حدود الصورة (outpainting).

تُقدم هذه المقالة حلاً يُبسط نشر تطبيق ويب لتحرير الصور باستخدام خدمات AWS بدون خادم. نستخدم AWS Amplify، وAmazon Cognito، وAmazon API Gateway، وAWS Lambda، وAmazon Bedrock مع نموذج Amazon Titan Image Generator G1 لبناء تطبيق يتيح تحرير الصور باستخدام التعليمات النصية. نستعرض آلية عمل الحل لفهم دور كل خدمة وكيفية ارتباطها معاً لتقديم حل متكامل. في وقت كتابة هذه المقالة، يتوفر نموذج Amazon Titan Image Generator G1 بإصدارين؛ في هذه المقالة نستخدم الإصدار الثاني.

نظرة عامة على الحل

يقدم المخطط التالي نظرة عامة ويسلط الضوء على المكونات الرئيسية. تستخدم البنية Amazon Cognito لمصادقة المستخدم و Amplify كبيئة استضافة لتطبيق الواجهة الأمامية الخاص بنا. يتم استخدام كل من API Gateway و Lambda لخدمات الواجهة الخلفية، ويتكامل Amazon Bedrock مع نموذج FM، مما يتيح للمستخدمين تحرير الصورة باستخدام الأوامر النصية.

المتطلبات الأساسية

يجب أن يكون لديك ما يلي لإكمال الحل في هذا المقالة:

حساب AWS
وصول FM في Amazon Bedrock لـ Amazon Titan Image Generator G1 v2 في نفس منطقة AWS حيث ستقوم بنشر هذا الحل
قالب AWS CloudFormation المرفق الذي تم تنزيله من مستودع aws-samples على GitHub

نشر موارد الحل باستخدام AWS CloudFormation

عند تشغيل قالب AWS CloudFormation، يتم إنشاء الموارد التالية:
موارد Amazon Cognito:

User pool: CognitoUserPoolforImageEditApp
App client: ImageEditApp

موارد Lambda:

Function: -ImageEditBackend-

موارد AWS Identity Access Management (IAM):

IAM role: -ImageEditBackendRole-
IAM inline policy: AmazonBedrockAccess (تسمح هذه السياسة لـ Lambda باستدعاء النموذج الأساسي amazon.titan-image-generator-v2:0 من Amazon Bedrock)

موارد API Gateway:

Rest API: ImageEditingAppBackendAPI
الطرق:
- OPTIONS – إضافة تعيين الرأس لـ CORS
- POST – تكامل Lambda
- المصادقة: من خلال Amazon Cognito باستخدام CognitoAuthorizer

بعد نشر قالب CloudFormation، انسخ ما يلي من علامة التبويب Outputs لاستخدامها أثناء نشر Amplify:

userPoolId
userPoolClientId
invokeUrl

إنشاء تطبيق Amplify

يجب عليك إنشاء تطبيق Amplify يدويًا باستخدام كود الواجهة الأمامية الموجود على GitHub. أكمل الخطوات التالية:

قم بتنزيل كود الواجهة الأمامية من مستودع GitHub
قم بفك ضغط الملف الذي تم تنزيله وانتقل إلى المجلد
في مجلد js، ابحث عن ملف config.js واستبدل قيم XYZ لـ userPoolId و userPoolClientId و invokeUrl بالقيم التي جمعتها من مخرجات CloudFormation. قم بتعيين قيمة المنطقة region بناءً على المنطقة التي تقوم فيها بإنشاء الحل.

فيما يلي مثال لملف config.js:

window._config = {
cognito: {
userPoolId: 'us-east-1_XXX',
userPoolClientId: 'YYY',
region: 'us-east-1'
},
api: {
invokeUrl: 'https://ZZZ.execute-api.us-east-1.amazonaws.com/prod'
}
};

حدد جميع الملفات واضغط عليها كما هو موضح في لقطة الشاشة التالية. تأكد من أنك تقوم بضغط المحتويات وليس المجلد العلوي. على سبيل المثال، إذا كان ناتج البناء الخاص بك يولد مجلدًا باسم AWS-Amplify-Code، انتقل إلى داخل هذا المجلد وحدد جميع المحتويات، ثم اضغط المحتويات.

استخدم ملف .zip الجديد لإنشاء التطبيق يدويًا في Amplify. بعد إنشائه، ستتلقى نطاقًا يمكنك استخدامه في الخطوات اللاحقة للوصول إلى التطبيق.

قم بإنشاء مستخدم تجريبي في مجموعة مستخدمي Amazon Cognito. يتطلب هذا المستخدم عنوان بريد إلكتروني لأنك ستحتاج إلى تحديد عنوان البريد الإلكتروني كـ 'موثق'

عد إلى صفحة Amplify واستخدم النطاق الذي تم إنشاؤه تلقائيًا للوصول إلى التطبيق.

استخدام Amazon Cognito لمصادقة المستخدم

Amazon Cognito هي منصة هوية يمكنك استخدامها لمصادقة وتفويض المستخدمين. نستخدم Amazon Cognito في حلنا للتحقق من المستخدم قبل أن يتمكن من استخدام تطبيق تحرير الصور.
عند الوصول إلى عنوان URL لأداة تحرير الصور، سيُطلب منك تسجيل الدخول باستخدام مستخدم تجريبي تم إنشاؤه مسبقًا. بالنسبة لتسجيلات الدخول لأول مرة، سيُطلب من المستخدمين تحديث كلمة المرور الخاصة بهم. بعد هذه العملية، يتم التحقق من بيانات اعتماد المستخدم مقابل السجلات المخزنة في مجموعة المستخدمين. إذا تطابقت بيانات الاعتماد، سيصدر Amazon Cognito رمز JSON Web Token (JWT). في قسم حمولة API المراد إرسالها من الصفحة، ستلاحظ أنه تم تحديث حقل Authorization بـ JWT الذي تم إصداره حديثًا.

استخدام Lambda لكود الواجهة الخلفية و Amazon Bedrock لوظيفة الذكاء الاصطناعي التوليدي

يتم استضافة كود الواجهة الخلفية على Lambda، ويتم تشغيله بواسطة طلبات المستخدم الموجهة من خلال API Gateway. تقوم Lambda بمعالجة بيانات الطلب وإعادة توجيهها إلى Amazon Bedrock. يتبع الرد من Amazon Bedrock نفس مسار الطلب الأولي.

استخدام API Gateway لإدارة API

يُبسط API Gateway إدارة API، مما يسمح للمطورين بنشر وصيانة ومراقبة وتأمين وتوسيع نطاق APIs الخاصة بهم بسهولة. في حالة الاستخدام لدينا، يعمل API Gateway كمنسق لمنطق التطبيق ويوفر التحكم في التدفق لإدارة الحمل على الواجهة الخلفية. بدون API Gateway، ستحتاج إلى استخدام JavaScript SDK في الواجهة الأمامية للتفاعل مباشرة مع API الخاص بـ Amazon Bedrock، مما يجلب المزيد من العمل إلى الواجهة الأمامية.

استخدام Amplify لكود الواجهة الأمامية

توفر Amplify بيئة تطوير لبناء تطبيقات الجوال والويب الآمنة والقابلة للتطوير. تسمح للمطورين بالتركيز على الكود الخاص بهم بدلاً من القلق بشأن البنية التحتية الأساسية. تتكامل Amplify أيضًا مع العديد من موفري Git. بالنسبة لهذا الحل، نقوم بتحميل كود الواجهة الأمامية يدويًا باستخدام الطريقة الموضحة سابقًا في هذا المنشور.

شرح أداة تحرير الصور

انتقل إلى عنوان URL المقدم بعد إنشاء التطبيق في Amplify وقم بتسجيل الدخول. في محاولة تسجيل الدخول الأولى، سيُطلب منك إعادة تعيين كلمة المرور الخاصة بك.

أثناء اتباعك للخطوات الخاصة بهذه الأداة، ستلاحظ تحديث قسم "بيانات الـ API التي سيتم إرسالها" على الجانب الأيمن بشكل ديناميكي، مما يعكس التفاصيل المذكورة في الخطوات التالية المقابلة.

الخطوة 1: إنشاء قناع على صورتك

لإنشاء قناع على صورتك، اختر ملفًا (JPEG أو JPG أو PNG).
بعد تحميل الصورة، تقوم الواجهة الأمامية بتحويل الملف إلى base64 ويتم تحديث قيمة base_image.
عند تحديد جزء من الصورة الذي تريد تحريره، سيتم إنشاء قناع، ويتم تحديث قيمة mask بقيمة base64 جديدة. يمكنك أيضًا استخدام خيار حجم الفرشاة لضبط المنطقة التي تقوم بتحديدها.
لديك الآن الصورة الأصلية وصورة القناع مشفرة بـ base64. (يتطلب نموذج Amazon Titan Image Generator G1 أن تكون المدخلات بترميز base64.)

الخطوة 2: كتابة الأمر وتعيين خياراتك

اكتب أمرًا يصف ما تريد فعله بالصورة. في هذا المثال، نكتب "Make the driveway clear and empty". يتم عكس هذا في الأمر على اليمين.
يمكنك الاختيار من بين خيارات تحرير الصور التالية: inpainting و outpainting. يتم تحديث قيمة mode اعتمادًا على اختيارك.

استخدم inpainting لإزالة العناصر المقنعة واستبدالها ببكسلات الخلفية
استخدم outpainting لتوسيع بكسلات الصورة المقنعة إلى حدود الصورة

اختر "Send to API" لإرسال البيانات إلى API gateway. يؤدي هذا الإجراء إلى استدعاء وظيفة Lambda، التي تتحقق من صحة البيانات المستلمة. إذا تم التحقق من صحة البيانات بنجاح، تتابع وظيفة Lambda لاستدعاء API الخاص بـ Amazon Bedrock لمزيد من المعالجة.
يقوم API الخاص بـ Amazon Bedrock بإنشاء مخرجين للصورة بتنسيق base64،
والتي يتم نقلها مرة أخرى إلى تطبيق الواجهة الأمامية وعرضها كصور مرئية.

الخطوة 3: عرض وتنزيل النتيجة

تظهر الصورة التالية نتائج اختبارنا. يمكنك تنزيل النتائج أو تقديم أمر محدث للحصول على نتيجة جديدة.

الاختبار واستكشاف الأخطاء وإصلاحها

عند بدء إجراء "Send to API"، يقوم النظام بإجراء فحص التحقق. إذا كانت المعلومات المطلوبة مفقودة أو غير صحيحة، سيتم عرض إشعار خطأ. على سبيل المثال، إذا حاولت إرسال صورة إلى API دون تقديم أمر، سيظهر رسالة خطأ على الجانب الأيمن من الواجهة، تنبهك إلى المدخلات المفقودة.

حذف الموارد المستخدمة

إذا قررت التوقف عن استخدام أداة تحرير الصور، يمكنك اتباع هذه الخطوات لإزالة أداة تحرير الصور والموارد المرتبطة بها التي تم إنشاؤها باستخدام AWS CloudFormation و Amplify:
حذف مجموعة CloudFormation:

* في وحدة تحكم AWS CloudFormation، اختر Stacks في جزء التنقل
* حدد موقع المجموعة التي إنشاؤها أثناء عملية الإنشاء (قمت بتعيين اسم لها)
* حدد المجموعة واختر Delete

حذف تطبيق Amplify وموارده. للحصول على التعليمات، راجع Clean Up Resources.

الخاتمة

في هذا المنشور، استكشفنا حلاً نموذجيًا يمكنك استخدامه لنشر تطبيق تحرير الصور باستخدام خدمات AWS بدون خادم وخدمات الذكاء الاصطناعي التوليدي. استخدمنا Amazon Bedrock ونموذج Amazon Titan الأساسي الذي يتيح لك تحرير الصور باستخدام الأوامر. من خلال تبني هذا الحل، تكتسب ميزة استخدام خدمات AWS المُدارة، لذلك لا تحتاج إلى صيانة البنية التحتية الأساسية. ابدأ اليوم بإنشاء هذا الحل النموذجي.

موارد إضافية

لمعرفة المزيد عن Amazon Bedrock، راجع الموارد التالية:

لمعرفة المزيد عن نموذج Amazon Titan Image Generator G1، راجع الموارد التالية:

DEV Community