البرنامج التعليمي: التعرف على شعارات خدمة Azure في صور الكاميرا

مقالة
07/20/2023

في هذا البرنامج التعليمي، سوف تستكشف نموذج تطبيق يستخدم Custom Vision كجزء من سيناريو أكبر. يقوم تطبيق الذكاء الاصطناعي Visual Provision، وهو تطبيق Xamarin.Forms للأنظمة الأساسية للأجهزة المحمولة، بتحليل صور شعارات خدمة Azure ثم نشر هذه الخدمات في حساب Azure الخاص بالمستخدم. ستتعلم هنا كيف يستخدم Custom Vision بالتنسيق مع المكونات الأخرى لتقديم تطبيق مفيد من نهاية إلى نهاية. يمكنك تشغيل سيناريو التطبيق بأكمله لنفسك، أو يمكنك إكمال جزء Custom Vision فقط من الإعداد واستكشاف كيفية استخدام التطبيق له.

يوضح لك هذا البرنامج التعليمي كيفية:

إنشاء كاشف كائنات مخصصة للتعرف على شعارات خدمة Azure.
قم بتوصيل تطبيقك ب Azure الذكاء الاصطناعي Vision وCustom Vision.
إنشاء حساب كيان خدمة لـ Azure لنشر خدمات Azure من التطبيق.

إذا لم يكن لديك اشتراك Azure، فأنشئ حساباً مجانياً قبل أن تبدأ.

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

Visual Studio 2017 أو إصدار أحدث
حمل عمل Xamarin Visual Studio (انظر تثبيت Xamarin)
محاكي iOS أو Android لـ Visual Studio
Azure CLI (اختياري)

احصل على الكود المصدري

إذا كنت ترغب في استخدام تطبيق الويب المتوفر، استنسخ أو حمل الشفرة المصدرية للتطبيق من مستودع AI Visual Provision على GitHub. افتح ملف Source/VisualProvision.sln في Visual Studio. في وقت لاحق، ستقوم بتحرير بعض ملفات المشروع حتى تتمكن من تشغيل التطبيق بنفسك.

أنشئ أداة الكشف عن الكائن

سجل الدخول إلى مدخل ويب Custom Vision وأنشئ مشروعا جديدا. حدد مشروع الكشف عن الكائنات واستخدم مجال الشعار، وسيسمح ذلك للخدمة باستخدام خوارزمية محسنة للكشف عن الشعار.

تحميل ووضع علامات على الصور

بعد ذلك، درب خوارزمية الكشف عن الشعار عن طريق تحميل صور شعارات خدمة Azure ووضع علامات عليها يدوياً. يتضمن مستودع AIVisualProvision مجموعة من الصور التدريبية التي يمكنك استخدامها. على موقع ويب، حدد الزر Add images في علامة التبويب Training Images ثم انتقل إلى مجلد Documents/Images/Training_DataSet في المستودع. ستحتاج إلى وضع علامة يدوياً على الشعارات في كل صورة، لذلك إذا كنت تختبر هذا المشروع فقط، قد ترغب في تحميل مجموعة فرعية فقط من الصور. حمل 15 حالة على الأقل من كل علامة تنوي استخدامها.

بعد تحميل صور التدريب، حدد أول صورة على الشاشة. ستظهر نافذة وضع العلامات. ارسم مربعات وعين علامات لكل شعار في كل صورة.

تم تكوين التطبيق للعمل مع سلاسل علامات محددة. ستجد التعريفات في الملفSource\VisualProvision\Services\Recognition\RecognitionService.cs:

private const string TAG_ACTIVE_DIRECTORY = "ACTIVE_DIRECTORY";
private const string TAG_APP_SERVICE = "APP_SERVICE";
private const string TAG_NOTIFICATION_HUBS = "NOTIFICATION_HUBS";
private const string TAG_MOBILE_APPS = "MOBILE_APPS";
private const string TAG_AZURE_SEARCH = "AZURE_SEARCH";
private const string TAG_AZURE_CDN = "CDN";
private const string TAG_AZURE_MACHINE_LEARNING = "MACHINE_LEARNING";
private const string TAG_AZURE_STORAGE = "STORAGE";
private const string TAG_IOT_EDGE = "IOT_EDGE";
private const string TAG_COSMOS_DB = "COSMOS_DB";
private const string TAG_COGNITIVE_SERVICES = "COGNITIVE_SERVICES";
private const string TAG_SQL_DATABASE = "SQL_DATABASE";
private const string TAG_MYSQL_CLEARDB_DATABASE = "MYSQL_CLEARDB_DATABASE";
private const string TAG_REDIS_CACHE = "REDIS_CACHE";
private const string TAG_APP_INSIGHTS = "APPLICATION_INSIGHTS";
private const string TAG_AZURE_FUNCTIONS = "AZURE_FUNCTIONS";

بعد وضع علامة على صورة، انتقل إلى اليمين لوضع علامة على الصورة التالية. أغلق نافذة وضع العلامات عند الانتهاء.

درب أداة الكشف عن الكائن

في الجزء الأيسر، عين مفتاح "Tags" إلى "Tagged" لعرض الصور. ثم حدد الزر الأخضر في أعلى الصفحة لتدريب النموذج. ستتدرب الخوارزمية على التعرف على نفس العلامات في الصور الجديدة. كما سيقوم باختبار النموذج على بعض الصور الموجودة لديك لإنشاء درجات الدقة.

الحصول على عنوان URL التنبؤ

بعد تدريب النموذج الخاص بك، ستكون مستعداً لدمجه في تطبيقك. ستحتاج إلى الحصول على عنوان "URL" لنقطة النهاية (عنوان النموذج الذي سيقوم التطبيق بالاستعلام عنه) ومفتاح التنبؤ (لمنح التطبيق حق الوصول إلى طلبات التنبؤ). في علامة التبويب Performance حدد زر Prediction URL في أعلى الصفحة.

انسخ عنوان "URL" لـ نقطة النهاية وقيمة مفتاح التنبؤ إلى الحقول المناسبة في ملف Source\VisualProvision\AppSettings.cs:

// Custom Vision
public const string CustomVisionPredictionUrl = "INSERT YOUR COMPUTER VISION API URL HERE FOR MAGNETS RECOGNITION";
public const string CustomVisionPredictionKey = "INSERT YOUR COMPUTER VISION PREDICTION KEY HERE FOR MAGNETS RECOGNITION";

افحص استخدام Custom Vision

افتح ملف Source/VisualProvision/Services/Recognition/CustomVisionService.cs لمعرفة كيفية استخدام التطبيق لمفتاح Custom Vision وعنوان "URL" لـ نقطة النهاية. يأخذ أسلوب PredictImageContentsAsync دفق بايت من ملف صورة مع رمز إلغاء (لإدارة المهام غير المتزامنة)، ويدعوCustom Vision prediction API، ويعيد نتيجة التنبؤ.

public async Task<PredictionResult> PredictImageContentsAsync(Stream imageStream, CancellationToken cancellationToken)
{
    var client = new HttpClient();
    client.DefaultRequestHeaders.Add("Prediction-key", AppSettings.CustomVisionPredictionKey);

    byte[] imageData = StreamToByteArray(imageStream);

    HttpResponseMessage response;
    using (var content = new ByteArrayContent(imageData))
    {
        content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
        response = await client.PostAsync(AppSettings.CustomVisionPredictionUrl, content);
    }

    var resultJson = await response.Content.ReadAsStringAsync();
    return JsonConvert.DeserializeObject<PredictionResult>(resultJson);
}

تأخذ هذه النتيجة شكل مثيل PredictionResult التي تحتوي في حد ذاتها على قائمة مثيلات التنبؤ. يحتوي التنبؤ على علامة تم اكتشافها وموقع مربعها المحيط في الصورة.

public class Prediction
{
    public double Probability { get; set; }

    public string TagId { get; set; }

    public string TagName { get; set; }

    public BoundingBox BoundingBox { get; set; }
}

لمعرفة المزيد حول كيفية تعامل التطبيق مع هذه البيانات، ابدأ باستخدام أسلوب GetResourcesAsync. يُعرف هذا الأسلوب في ملف Source/VisualProvision/Services/Recognition/RecognitionService.cs.

إضافة التعرف على النص

اكتمال جزء Custom Vision من البرنامج التعليمي. إذا كنت ترغب في تشغيل التطبيق، فستحتاج إلى دمج خدمة Azure الذكاء الاصطناعي Vision أيضا. يستخدم التطبيق ميزة التعرف على نص Azure الذكاء الاصطناعي Vision لتكملة عملية الكشف عن الشعار. يمكن التعرف على شعار Azure من خلال مظهره أو بواسطة النص المطبوع بالقرب منه. على عكس نماذج الرؤية المخصصة، يتم تدريب Azure الذكاء الاصطناعي Vision مسبقا لتنفيذ عمليات معينة على الصور أو مقاطع الفيديو.

اشترك في خدمة Azure الذكاء الاصطناعي Vision للحصول على عنوان URL للمفتاح ونقطة النهاية. للحصول على تعليمات بخصوص هذه الخطوة، راجع كيفية الحصول على المفاتيح .

بعد ذلك، افتح ملف Source\VisualProvision\AppSettings.cs ثم قم بملء المتغيرات ComputerVisionEndpoint وComputerVisionKey بالقيم الصحيحة.

// Computer Vision
public const string ComputerVisionEndpoint = "INSERT COMPUTER VISION ENDPOINT HERE FOR HANDWRITING";
public const string ComputerVisionKey = "INSERT YOUR COMPUTER VISION KEY HERE FOR HANDWRITING";

إنشاء كيان الخدمة

يتطلب التطبيق حساباً لكيان خدمة Azure لنشر الخدمات في اشتراك Azure. يتيح لك كيان الخدمة تفويض أذونات معينة إلى إحدى التطبيقات باستخدام عنصر تحكم الوصول المستند إلى دور Azure. لمعرفة المزيد، راجع دليل كيانات الخدمات.

يمكنك إنشاء كيان خدمة باستخدام Azure Cloud Shell أو Azure CLI، كما هو موضح هنا. للبدء، سجل الدخول وحدد الاشتراك الذي تريد استخدامه.

az login
az account list
az account set --subscription "<subscription name or subscription id>"

ثم أنشئ كيان الخدمة. (قد تستغرق هذه العملية بعض الوقت حتى تنتهي.)

az ad sp create-for-rbac --name <servicePrincipalName> --role Contributor --scopes /subscriptions/<subscription_id> --password <yourSPStrongPassword>

عند الانتهاء بنجاح، يجب أن تشاهد إخراج JSON التالي بما في ذلك بيانات الاعتماد الضرورية.

{
  "clientId": "(...)",
  "clientSecret": "(...)",
  "subscriptionId": "(...)",
  "tenantId": "(...)",
  ...
}

سجل القيم clientId وtenantId. أضفها إلى الحقول المناسبة في ملف Source\VisualProvision\AppSettings.cs.

/* 
 * Service principal
 *
 * Note: This settings will only be used in Debug mode to avoid developer having to enter
 * ClientId and TenantId keys each time application is deployed.
 * In Release mode, all credentials will be introduced using UI input fields.
 */
public const string ClientId = "INSERT YOUR CLIENTID HERE";
public const string TenantId = "INSERT YOUR TENANTID HERE";

تشغيل التطبيق

في هذه المرحلة، يمكنك منح التطبيق حق الوصول إلى:

نموذج Custom Vision مدرب
خدمة Azure الذكاء الاصطناعي Vision
حساب كيان الخدمة⁦

اتبع الخطوات التالية لتشغيل التطبيق:

في Visual Studio Solution Explorer، حدد إما مشروع VisualProvision.Android أو مشروع VisualProvision.iOS. اختر محاكياً مطابقاً أو جهازاً محمولاً متصلاً من القائمة المنسدلة على شريط الأدوات الرئيسي. ثم شغل التطبيق.

ملاحظة

ستحتاج إلى جهاز macOS لتشغيل محاكي iOS.
على الشاشة الأولى، أدخل معرف عميل كيان الخدمة ومعرف المستأجر، وكلمة المرور. حدد زر "Login" .
ملاحظة

على بعض المحاكيات، قد لا يتم تنشيط الزر "Login" في هذه الخطوة. إذا حدث هذا، أوقف التطبيق، افتح ملفSource/VisualProvision/Pages/LoginPage.xaml، ابحث عن Button العنصر المسمى LOGIN BUTTON، وأزل السطر التالي، ثم شغل التطبيق مرة أخرى.
```
IsEnabled="{Binding IsValid}"
```
في الشاشة التالية، حدد اشتراك Azure من القائمة المنسدلة. (يجب أن تحتوي هذه القائمة على جميع الاشتراكات التي يمكن الوصول إليها من قبل كيان الخدمة.) حدد الزر "Continue" . عند هذه النقطة، قد يطالبك التطبيق بمنح حق الوصول إلى كاميرا الجهاز وتخزين الصور. منح أذونات الوصول.
سيتم تنشيط الكاميرا على جهازك. التقط صورة لأحد شعارات خدمة Azure التي دربتها. يجب أن تطالبك نافذة نشر بتحديد منطقة ومجموعة موارد للخدمات الجديدة (كما كنت ستفعل إذا كنت تقوم بنشرها من مدخل Microsoft Azure).

تنظيف الموارد

إذا اتبعت جميع خطوات هذا السيناريو واستخدمت التطبيق لنشر خدمات Azure إلى حسابك، فسجل الدخول إلى مدخل Microsoft Azure. هناك، ألغى الخدمات التي لا تريد استخدامها.

إذا كنت تخطط لإنشاء مشروع الكشف عن الكائنات الخاصة بك باستخدام Custom Vision، قد تحتاج إلى حذف مشروع الكشف عن الشعار الذي قمت بإنشائه في هذا البرنامج التعليمي. يسمح الاشتراك المجاني في Custom Vision بمشروعين فقط. لحذف مشروع الكشف عن الشعار، على موقع Custom Vision، افتح Projects ثم حدد أيقونة سلة المحذوفات ضمن My New Project.

الخطوات التالية

في هذا البرنامج التعليمي، قمت بإعداد واستكشاف تطبيق Xamarin.Forms كامل المواصفات الذي يستخدم خدمة Custom Vision للكشف عن الشعارات في صور كاميرا الجوال. التالي، تعرف على أفضل الممارسات لبناء نموذج Custom Vision؛ بحيث يمكنك جعله قوياً ودقيقاً عند إنشاء نموذج لتطبيقك الخاص.

كيفية تحسين المصنف الخاص بك

Share via