البرنامج التعليمي: استخدام Azure الذكاء الاصطناعي Vision لإنشاء بيانات تعريف الصورة في Azure Storage
في هذا البرنامج التعليمي، ستتعلم كيفية دمج خدمة Azure الذكاء الاصطناعي Vision في تطبيق ويب لإنشاء بيانات تعريف للصور التي تم تحميلها. وهذا مفيد لسيناريوهات إدارة الأصول الرقمية (DAM)، كما في حالة إذا كانت الشركة تريد إنشاء تسميات توضيحية وصفية بسرعة أو كلمات رئيسية قابلة للبحث لجميع صورها.
ستستخدم Visual Studio لكتابة تطبيق ويب MVC يقبل الصور التي يتم يحملها المستخدمون ويخزن الصور في مخزن Azure للبيانات الثنائية الكبيرة. ستتعلم كيفية قراءة وكتابة الكائنات الثنائية كبيرة الحجم في C# واستخدام بيانات تعريف الكائنات الثنائية الكبيرة لإرفاق معلومات إضافية إلى الكائنات الثنائية الكبيرة التي تنشئها. ثم سترسل كل صورة تم تحميلها بواسطة المستخدم إلى واجهة برمجة تطبيقات Azure الذكاء الاصطناعي Vision لإنشاء تسمية توضيحية وبيانات تعريف البحث عن الصورة. وأخيرًا، يمكنك نشر التطبيق على السحابة باستخدام Visual Studio.
هذا البرنامج التعليمي يوضح لك كيفية:
- إنشاء حساب تخزين وحاويات تخزين باستخدام مدخل Azure
- إنشاء تطبيق ويب في Visual Studio ونشره في Azure
- استخدام Azure الذكاء الاصطناعي Vision API لاستخراج المعلومات من الصور
- إرفاق بيانات التعريف بصور Azure Storage
- التحقق من بيانات تعريف الصورة باستخدام Azure Storage Explorer
تلميح
يعد القسم استخدام Azure الذكاء الاصطناعي Vision لإنشاء بيانات تعريف أكثر صلة بتحليل الصور. انتقل إليه إذا كنت تريد فقط أن ترى كيف يتم تكامل تحليل الصور في تطبيق تم إنشائه.
في حال لم يكن لديك اشتراك Azure، فأنشئ حساباً مجانيّاً قبل البدء.
المتطلبات الأساسية
- Visual Studio إصدار Community لعام 2017 أو أعلى، مع تثبيت أعباء العمل "ASP.NET وتطوير الويب" و "تطوير Azure".
- أداة Azure Storage Explorer المثبتة.
إنشاء حساب تخزين
في هذا القسم، ستستخدم مدخل Azure لإنشاء حساب تخزين. ثم ستنشئ زوجًا من الحاويات: واحدة لتخزين الصور التي يحملها المستخدم، وأخرى لتخزين الصور المصغرة المنشأة من الصور التي تم تحميلها.
سجل الدخول إلى مدخل Microsoft Azure في المستعرض الخاص بك. سجل الدخول إذا طًلب منك باستخدام حسابك في مايكروسوفت.
لإنشاء حساب تخزين، حدد + Create a resource في الشريط على اليسار. ثم حدد Storage، متبوعا بحساب التخزين.
أدخل اسمًا فريدًا لحساب التخزين في Name وتأكد من ظهور علامة اختيار خضراء بجواره. الاسم مهم، لأنه يشكل جزءًا واحدًا من عنوان URL يتم من خلاله الوصول إلى الكائنات الثنائية الكبيرة التي تم إنشاؤها ضمن هذا الحساب. ضع حساب التخزين في مجموعة موارد جديدة تسمى "IntellipixResources"، وحدد المنطقة الأقرب إليك. قم بالإنهاء عن طريق تحديد الزر Review + create في أسفل الشاشة لإنشاء حساب تخزين جديد.
إشعار
يمكن أن يتراوح طول أسماء حسابات التخزين من 3 إلى 24 حرفًا ويمكن أن تحتوي فقط على أرقام وأحرف صغيرة. بالإضافة إلى ذلك، يجب أن يكون الاسم الذي تدخله فريدًا داخل Azure. إذا اختار شخص آخر نفس الاسم، سيتم إعلامك بأن الاسم غير متوفر مع ظهور علامة تعجب حمراء في حقل Name.
حدد مجموعات الموارد في الشريط على اليسار. ثم حدد مجموعة الموارد "IntellipixResources".
في علامة التبويب التي تفتح لمجموعة الموارد، حدد حساب التخزين الذي أنشأته. إذا لم يكن حساب التخزين موجودا بعد، يمكنك تحديد تحديث في أعلى علامة التبويب حتى يظهر.
في علامة التبويب لحساب التخزين، حدد Blobs لعرض قائمة الحاويات المقترنة بهذا الحساب.
حساب التخزين حاليًا لا يحتوي على حاويات. قبل أن تتمكن من إنشاء كائن ثنائي كبير، يجب عليك إنشاء حاوية لتخزينه فيها. حدد + Container لإنشاء حاوية جديدة. اكتب
photosفي حقل Name وحدد Blobكمستوى وصول عام. ثم حدد موافق لإنشاء حاوية باسم "الصور".بشكل افتراضي، تكون الحاويات ومحتوياتها خاصة. اختيار Blob كمستوى وصول يجعل الكائنات الثنائية الكبيرة في حاوية "photos" متاحة للجمهور، ولكن لا يجعل الحاوية نفسها عامة. هذا ما تريده لأن الصور المخزنة في حاوية الصور سيتم ربطها من تطبيق ويب.
كرر الخطوة السابقة لإنشاء حاوية للصور المصغرة تسمى "thumbnails» مرة أخرى مع الحرص على تعيين مستوى الوصول العام الحاوية إلى Blob.
تأكد من ظهور الحاويتين في قائمة الحاويات لحساب التخزين هذا، وأن الأسماء مكتوبة بشكل صحيح.
أغلق شاشة "Blob service". حدد مفاتيح الوصول في القائمة على الجانب الأيمن من شاشة حساب التخزين، ثم حدد الزر نسخ بجوار مفتاحالمفتاح 1. الصق مفتاح الوصول هذا في محرر النص المفضل لديك لاستخدامه لاحقًا.
لقد أنشأت الآن حساب تخزين للاحتفاظ بالصور التي تم تحميلها إلى التطبيق الذي ستنشئه، وحاويات لتخزين الصور فيها.
تشغيل Azure Storage Explorer
Azure Storage Explorer هي أداة مجانية توفر واجهة رسومية للعمل مع Azure Storage على أجهزة الكمبيوتر التي تعمل بأنظمة Windows وmacOS وLinux. وتوفر معظم الوظائف نفسها التي يتيحها مدخل Azure كما تقدم ميزات أخرى مثل القدرة على عرض بيانات تعريف الكائنات الثنائية كبيرة الحجم. في هذا القسم، ستستخدم مستكشف تخزين Microsoft Azure لعرض الحاويات التي أنشأتها في القسم السابق.
إذا لم تكن قد ثبت ّمستكشف التخزين أو كنت ترغب في التأكد من تشغيل أحدث إصدار، انتقل إلى http://storageexplorer.com/ وحمله وثبته.
بدء مستكشف التخزين. إذا طلب منك تسجيل الدخول، فاستخدم حساب Microsoft نفسه الذي استخدمته لتسجيل الدخول إلى مدخل Microsoft Azure. إذا لم تشاهد حساب التخزين في الجزء الأيمن من Storage Explorer، فحدد الزر إدارة الحسابات المميز أدناه وتأكد من إضافة كل من حساب Microsoft والاشتراك المستخدم لإنشاء حساب التخزين إلى Storage Explorer.
حدد السهم الصغير بجوار حساب التخزين لعرض محتوياته، ثم حدد السهم بجوار حاويات Blob. تأكد من ظهور الحاويات التي أنشأتها في القائمة.
الحاويات فارغة حاليًا، ولكن هذا سيتغير بمجرد نشر تطبيقك وبدء تحميل الصور. سيسهل عليك تثبيت مستكشف التخزين معرفة ما يكتبه تطبيقك إلى مخزن البيانات الثنائية الكبيرة.
إنشاء تطبيق ويب جديد في Visual Studio
في هذا القسم، ستنشئ تطبيق ويب جديد في Visual Studio وتضيف تعليمات برمجية لتنفيذ الوظائف الأساسية المطلوبة لتحميل الصور وكتابتها إلى مخزن البيانات الثنائية الكبيرة وعرضها في صفحة ويب.
ابدأ Visual Studio واستخدم الأمر File -> New -> Project لإنشاء مشروع Visual C# جديد في تطبيق ويب ASP.NET المسمى "Intellipix" (اختصارًا لـ "Intelligent" بمعنى الصور الذكية).
في مربع الحوار "New ASP.NET Web Application"، تأكد من تحديد MVC. ثم حدد موافق.
خذ بعض الوقت لمراجعة بنية المشروع في مستكشف الحلول. من بين أمور أخرى، هناك مجلد يسمى Controllers يحتوي على وحدات تحكم MVC للمشروع، ومجلد اسمه Views يحتوي على طرق عرض المشروع. سوف تستخدم الأصول في هذه المجلدات وغيرها أثناء تنفيذ التطبيق.
استخدم الأمر Debug -> Start Without Debugging في Visual Studio (أو اضغط Ctrl+F5) لبدء تشغيل التطبيق في مستعرضك. إليك كيف يبدو التطبيق في حالته الحالية:
أغلق المستعرض وعد إلى Visual Studio. في مستكشف الحلول، انقر بزر الماوس الأيمن فوق مشروع Intellipix وحدد Manage NuGet Packages.... حدد استعراض. ثم اكتب
imageresizerفي مربع البحث وحدد حزمة NuGet المسماة ImageResizer. وأخيرا، حدد تثبيت لتثبيت أحدث إصدار مستقر من الحزمة. يحتوي ImageResizer على واجهات برمجة التطبيقات التي ستستخدمها لإنشاء صور مصغرة من الصور التي تم تحميلها إلى التطبيق. وافق على أية تغييرات واقبل أية تراخيص تُعرض عليك.
كرر هذه العملية لإضافة حزمة NuGet المسماة WindowsAzure.Storage إلى المشروع. تحتوي هذه الحزمة على واجهات برمجة التطبيقات للوصول إلى Azure Storage من تطبيقات .NET. وافق على أية تغييرات واقبل أية تراخيص تُعرض عليك.
افتح Web.configثم أضف العبارة التالية إلى القسم
<appSettings>، لاستبدال ACCOUNT_NAME باسم حساب التخزين الذي أنشأته في القسم الأول، ACCOUNT_KEY بمفتاح الوصول الذي قمت بحفظه.<add key="StorageConnectionString" value="DefaultEndpointsProtocol=https;AccountName=ACCOUNT_NAME;AccountKey=ACCOUNT_KEY" />هام
يهدف ملف Web.config إلى الاحتفاظ بمعلومات حساسة مثل مفاتيح الاشتراك الخاصة بك، ويتم التعامل مع أي طلب HTTP إلى ملف بملحق .config بواسطة محرك ASP.NET، الذي يقوم بإرجاع رسالة "هذا النوع من الصفحات غير خدم". ومع ذلك، إذا كان المهاجم قادرا على العثور على بعض الاستغلال الآخر الذي يسمح له بعرض محتويات Web.config الخاصة بك، فسيتمكن من كشف هذه المعلومات. راجع حماية سلاسل الاتصال ion ومعلومات التكوين الأخرى للحصول على خطوات إضافية يمكنك اتخاذها لتأمين بيانات Web.config بشكل أكبر.
افتح الملف المسمى _Layout.cshtml في مجلد المشروع Views/Shared. في السطر 19، قم بتغيير "اسم التطبيق" إلى "Intellipix". يجب أن يبدو السطر كما يلي:
@Html.ActionLink("Intellipix", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })إشعار
في مشروع MVC ASP.NET، _Layout.cshtml هي طريقة عرض خاصة بمثابة قالب لطرق عرض أخرى. عادة ما تقوم بتعريف رأس وتذييل المحتوى المشترك في كل طرق العرض في هذا الملف.
انقر بزر الماوس الأيمن فوق مجلد المشروعModels ثم استخدم الأمر Add -> Class... لإضافة ملف فئة يسمى BlobInfo.cs إلى المجلد. ثم استبدال فئة BlobInfo الفارغة بتعريف الفئة التالي:
public class BlobInfo { public string ImageUri { get; set; } public string ThumbnailUri { get; set; } public string Caption { get; set; } }افتح HomeController.cs من مجلد Controllers وأضف
usingالعبارات التالية إلى أعلى الملف:using ImageResizer; using Intellipix.Models; using Microsoft.WindowsAzure.Storage; using Microsoft.WindowsAzure.Storage.Blob; using System.Configuration; using System.Threading.Tasks; using System.IO;استبدل الأسلوب Index في HomeController.cs بالتطبيق التالي:
public ActionResult Index() { // Pass a list of blob URIs in ViewBag CloudStorageAccount account = CloudStorageAccount.Parse(ConfigurationManager.AppSettings["StorageConnectionString"]); CloudBlobClient client = account.CreateCloudBlobClient(); CloudBlobContainer container = client.GetContainerReference("photos"); List<BlobInfo> blobs = new List<BlobInfo>(); foreach (IListBlobItem item in container.ListBlobs()) { var blob = item as CloudBlockBlob; if (blob != null) { blobs.Add(new BlobInfo() { ImageUri = blob.Uri.ToString(), ThumbnailUri = blob.Uri.ToString().Replace("/photos/", "/thumbnails/") }); } } ViewBag.Blobs = blobs.ToArray(); return View(); }يعدد أسلوب Index الجديد الكائنات الثنائية كبيرة الحجم في الحاوية
"photos"ويمرر صفيف من كائنات BlobInfo تمثل تلك الكائنات الثنائية الكبيرة إلى طريقة العرض من خلال خاصية ViewBagفي ASP.NET MVC. لاحقًا، ستقوم بتعديل طريقة العرض لتعداد هذه الكائنات وعرض مجموعة من الصور المصغرة. الفئات التي ستستخدمها للوصول إلى حساب التخزين الخاص بك وتعداد الكائنات الثنائية الكبيرة CloudStorageAccount وCloudBlobClient وCloudBlobContainer تأتي من حزمة WindowsAzure.Storage التي قمت بتثبيتها من خلال NuGet.أضف الأسلوب التالي إلى فئة HomeController في HomeController.cs:
[HttpPost] public async Task<ActionResult> Upload(HttpPostedFileBase file) { if (file != null && file.ContentLength > 0) { // Make sure the user selected an image file if (!file.ContentType.StartsWith("image")) { TempData["Message"] = "Only image files may be uploaded"; } else { try { // Save the original image in the "photos" container CloudStorageAccount account = CloudStorageAccount.Parse(ConfigurationManager.AppSettings["StorageConnectionString"]); CloudBlobClient client = account.CreateCloudBlobClient(); CloudBlobContainer container = client.GetContainerReference("photos"); CloudBlockBlob photo = container.GetBlockBlobReference(Path.GetFileName(file.FileName)); await photo.UploadFromStreamAsync(file.InputStream); // Generate a thumbnail and save it in the "thumbnails" container using (var outputStream = new MemoryStream()) { file.InputStream.Seek(0L, SeekOrigin.Begin); var settings = new ResizeSettings { MaxWidth = 192 }; ImageBuilder.Current.Build(file.InputStream, outputStream, settings); outputStream.Seek(0L, SeekOrigin.Begin); container = client.GetContainerReference("thumbnails"); CloudBlockBlob thumbnail = container.GetBlockBlobReference(Path.GetFileName(file.FileName)); await thumbnail.UploadFromStreamAsync(outputStream); } } catch (Exception ex) { // In case something goes wrong TempData["Message"] = ex.Message; } } } return RedirectToAction("Index"); }هذا هو الأسلوب الذي يتم استدعاؤه عندما تحمل صورة. فهو يخزن كل صورة تم تحميلها ككائن ثنائي كبير الحجم في الحاوية
"photos"، وينشئ صورة مصغرة من الصورة الأصلية باستخدام الحزمةImageResizer، ويخزن الصورة المصغرة ككائن ثنائي كبير الحجم في الحاوية"thumbnails".افتح Index.cshmtl في مجلد المشروعViews/Home واستبدل محتوياته بالتعليمة والعلامات التالية:
@{ ViewBag.Title = "Intellipix Home Page"; } @using Intellipix.Models <div class="container" style="padding-top: 24px"> <div class="row"> <div class="col-sm-8"> @using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" })) { <input type="file" name="file" id="upload" style="display: none" onchange="$('#submit').click();" /> <input type="button" value="Upload a Photo" class="btn btn-primary btn-lg" onclick="$('#upload').click();" /> <input type="submit" id="submit" style="display: none" /> } </div> <div class="col-sm-4 pull-right"> </div> </div> <hr /> <div class="row"> <div class="col-sm-12"> @foreach (BlobInfo blob in ViewBag.Blobs) { <img src="@blob.ThumbnailUri" width="192" title="@blob.Caption" style="padding-right: 16px; padding-bottom: 16px" /> } </div> </div> </div> @section scripts { <script type="text/javascript" language="javascript"> if ("@TempData["Message"]" !== "") { alert("@TempData["Message"]"); } </script> }اللغة المستخدمة هنا هي Razor، والتي تمكنك من تضمين تعليمة برمجية قابلة للتنفيذ في علامة HTML. العبارة
@foreachفي منتصف الملف تعدد الكائنات BlobInfo التي تمر من وحدة التحكم في ViewBag وتنشئ عناصر HTML<img>منها. تتم تهيئة خاصيةsrcلكل عنصر بمعرف URI الخاص بالكائن الثنائي كبير الحجم والذي يحتوي على الصورة المصغرة.حمل وفك ضغط ملف photos.zip من مستودع عينة البيانات في GitHub. هذه مجموعة متنوعة من الصور المختلفة التي يمكنك استخدامها لاختبار التطبيق.
احفظ التغييرات واضغط على Ctrl+F5 لبدء التطبيق في المستعرض. ثم حدد تحميل صورة وتحميل إحدى الصور التي قمت بتنزيلها. تأكد من ظهور نسخة مصغرة من الصورة على الصفحة.
حمِّل بعض الصور من مجلد photos. تأكد من ظهورها على الصفحة أيضًا:
انقر بزر الماوس الأيمن في المستعرض وحدد View page source لعرض التعليمات البرمجية المصدر للصفحة. ابحث عن العناصر
<img>التي تمثل الصور المصغرة للصورة. لاحظ أن عناوين URL المعينة إلى الصور تشير مباشرة إلى الكائنات الثنائية كبيرة الحجم في مخزن الكائنات الثنائية الكبيرة. وذلك لأنك تعين مستوى الوصول العام للحاويات إلى الكائن الثنائي كبير الحجم، مما يمكن من الوصول العام إلى الكائنات الثنائية الكبيرة الموجودة بالداخل.ارجع إلى Azure Storage Explorer (أو أعد تشغيله إذا كنت لم تتركه قيد التشغيل) وحدد الحاوية
"photos"الموجودة ضمن حساب التخزين. يجب أن يساوي عدد الكائنات الثنائية الكبيرة في الحاوية عدد الصور التي قمت بتحميلها. انقر نقرًا مزدوجًا فوق أحد الكائنات الثنائية الكبيرة لتحميله ورؤية الصورة المخزنة فيه.
افتح الحاوية
"thumbnails"في مستكشف التخزين. افتح أحد الكائنات الثنائية كبيرة الحجم لعرض الصور المصغرة التي تم إنشاؤها من الصور المحملة.
لا يقدم التطبيق حتى الآن طريقة لعرض الصور الأصلية التي قمت بتحميلها. من الناحية المثالية، يجب أن يؤدي تحديد صورة مصغرة إلى عرض الصورة الأصلية. ستضيف هذه الميزة في الخطوة التالية.
إضافة صندوق ضوء لعرض الصور
في هذا القسم، ستستخدم مكتبة جافا سكريبت مجانية ومفتوحة المصدر لإضافة عارض مربع ضوء يتيح للمستخدمين مشاهدة الصور الأصلية التي قاموا بتحميلها (بدلاً من الصور المصغرة فقط). ستكون الملفات متاحة لك. كل ما عليك القيام به هو دمجها في المشروع وإجراء تعديل طفيف على Index.cshtml.
قم بتنزيل ملفات .css وlightbox.js من مستودع التعليمات البرمجية GitHub.
في مستكشف الحلول، انقر بزر الماوس الأيمن فوق مجلد Scripts للمشروع الخاص بك واستخدم الأمر Add -> New Item... لإنشاء ملف lightbox.js. الصق محتويات ملف المثال في مستودع التعليمات البرمجية GitHub.
انقر بزر الماوس الأيمن فوق المجلد "Content" للمشروع واستخدم الأمر Add -> New Item... لإنشاء ملف lightbox.css. الصق محتويات ملف المثال في مستودع التعليمات البرمجية GitHub.
حمل وفك ضغط ملف buttons.zip من مستودع ملفات البيانات في GitHub:https://github.com/Azure-Samples/cognitive-services-sample-data-files/tree/master/ComputerVision/storage-lab-tutorial. ينبغي أن يكون لديك أربع صور أزرار.
انقر بزر الماوس الأيمن فوق المشروع Intellipix في مستكشف الحلول واستخدم الأمر Add -> New Folder لإضافة مجلد يسمى "Images" إلى المشروع.
انقر بزر الماوس الأيمن فوق المجلد Images واستخدم الأمر Add -> Existing Item... لاستيراد الصور الأربع التي قمت بتنزيلها.
افتح BundleConfig.cs في مجلد "App_Start" الخاص بالمشروع. أضف العبارة التالية إلى الأسلوب
RegisterBundlesفي BundleConfig.cs:bundles.Add(new ScriptBundle("~/bundles/lightbox").Include( "~/Scripts/lightbox.js"));في نفس الأسلوب، ابحث عن العبارة التي تنشئ
StyleBundleمن "~/Content/css" وأضف lightbox.css إلى قائمة أوراق الأنماط في الحزمة. هكذا تبدو الجملة المعدلة:bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css", "~/Content/lightbox.css"));افتح _Layout.cshtml في مجلد المشروع Views/Shared وأضف العبارة التالية قبل عبارة
@RenderSectionناحية الأسفل:@Scripts.Render("~/bundles/lightbox")المهمة الأخيرة هي دمج عارض مربع الضوء في الصفحة الرئيسية. للقيام بذلك، افتح Index.cshtml (في المجلد Views/Home للمشروع) واستبدل حلقة
@foreachبهذه:@foreach (BlobInfo blob in ViewBag.Blobs) { <a href="@blob.ImageUri" rel="lightbox" title="@blob.Caption"> <img src="@blob.ThumbnailUri" width="192" title="@blob.Caption" style="padding-right: 16px; padding-bottom: 16px" /> </a> }احفظ التغييرات واضغط على Ctrl+F5 لبدء التطبيق في المستعرض. ثم حدد إحدى الصور التي قمت بتحميلها سابقا. تأكد من ظهور مربع ضوء يظهر عرضًا مكبرًا للصورة.
حدد X في الزاوية السفلية اليسرى من مربع الضوء لتجاهله.
الآن لديك طريقة لعرض الصور التي قمت بتحميلها. الخطوة التالية هي عمل المزيد بتلك الصور.
استخدام Azure الذكاء الاصطناعي Vision لإنشاء بيانات التعريف
إنشاء مورد Vision
ستحتاج إلى إنشاء مورد Computer Vision لحساب Azure الخاص بك؛ يدير هذا المورد وصولك إلى خدمة Azure الذكاء الاصطناعي Vision من Azure.
اتبع الإرشادات الواردة في إنشاء مورد خدمات Azure الذكاء الاصطناعي لإنشاء مورد متعدد الخدمات أو مورد Vision.
ثم انتقل إلى القائمة لمجموعة الموارد الخاصة بك وحدد مورد الرؤية الذي قمت بإنشائه. انسخ عنوان URL أسفل Endpoint إلى مكان يمكنك استرداده منه بسهولة في لحظة. ثم حدد إظهار مفاتيح الوصول.
إشعار
الموارد الجديدة التي تم إنشاؤها بعد 1 يوليو 2019 ستستخدم أسماء النطاقات الفرعية المخصصة. لمزيد من المعلومات وقائمة كاملة بنقاط النهاية الإقليمية، راجع أسماء النطاقات الفرعية المخصصة لخدمات Azure الذكاء الاصطناعي.
في النافذة التالية، انسخ قيمة المفتاح 1 إلى الحافظة.
إضافة بيانات اعتماد Azure الذكاء الاصطناعي Vision
بعد ذلك، ستضيف بيانات الاعتماد المطلوبة إلى تطبيقك حتى يتمكن من الوصول إلى موارد الرؤية.
انتقل إلى ملف Web.config في جذر موقع الويب. أضف العبارات التالية إلى قسم <appSettings> من الملف، واستبدل المفتاح VISION_KEYالذي نسخته في الخطوة السابقة، واستبدال VISION_ENDPOINT بمعرف URL الذي حفظته في الخطوة الأسبق.
<add key="SubscriptionKey" value="VISION_KEY" />
<add key="VisionEndpoint" value="VISION_ENDPOINT" />
في مستكشف الحلول. انقر بزر الماوس الأيمن فوق حل المشروع وحدد Manage NuGet Packages. في مدير الحزمة الذي يفتح، حدد Browse، وحدد Include prerelease، وابحث عن Azure.الذكاء الاصطناعي.Vision.ImageAnalysis. حدد تثبيت.
إضافة تعليمة برمجية لإنشاء بيانات التعريف
بعد ذلك، ستضيف التعليمات البرمجية التي تستخدم بالفعل خدمة Azure الذكاء الاصطناعي Vision لإنشاء بيانات تعريف للصور.
افتح HomeController.cs من مجلد Controllers في المشروع وأضف
usingالعبارات التالية إلى أعلى الملف:using Azure; using Azure.AI.Vision.ImageAnalysis; using System;ثم انتقل إلى الأسلوب Upload، هذا الأسلوب يحول ويحمّل الصور إلى مخزن الكائن الثنائي كبير الحجم. أضف التعليمات البرمجية التالية مباشرة بعد الكتلة التي تبدأ بـ
// Generate a thumbnail(أو في نهاية عملية إنشاء الصورة-الكائن الثنائي كبير الحجم). تأخذ هذه التعليمة البرمجية الكائن الثنائي كبير الحجم الذي يحتوي على الصورة (photo)، وتستخدم Azure الذكاء الاصطناعي Vision لإنشاء وصف لتلك الصورة. تنشئ Azure الذكاء الاصطناعي Vision API أيضا قائمة بالكلمات الأساسية التي تنطبق على الصورة. يتم تخزين الوصف والكلمات الأساسية التي تم إنشاؤها في بيانات تعريف الكائن الثنائي كبير الحجم بحيث يمكن استردادها لاحقًا.// create a new ImageAnalysisClient ImageAnalysisClient client = new ImageAnalysisClient( new Uri(Environment.GetEnvironmentVariable(ConfigurationManager.AppSettings["VisionEndpoint"])), new AzureKeyCredential(ConfigurationManager.AppSettings["SubscriptionKey"])); VisualFeatures = visualFeatures = VisualFeatures.Caption | VisualFeatures.Tags; ImageAnalysisOptions analysisOptions = new ImageAnalysisOptions() { GenderNeutralCaption = true, Language = "en", }; Uri imageURL = new Uri(photo.Uri.ToString()); ImageAnalysisResult result = client.Analyze(imageURL,visualFeatures,analysisOptions); // Record the image description and tags in blob metadata photo.Metadata.Add("Caption", result.Caption.Text); for (int i = 0; i < result.Tags.Values.Count; i++) { string key = String.Format("Tag{0}", i); photo.Metadata.Add(key, result.Tags.Values[i]); } await photo.SetMetadataAsync();بعد ذلك، انتقل إلى الأسلوب Index في نفس الملف. يعدد هذا الأسلوب الصور المخزنة في حاوية الكائن الثنائي الكبير المستهدفة (كمثيلات IListBlobItem) ويمررها إلى طريقة عرض التطبيق. استبدل الكتلة
foreachفي هذا الأسلوب بالتعليمات البرمجية التالية. هذه التعليمة البرمجية تستدعي CloudBlockBlob.FetchAttributes للحصول على بيانات التعريف المرفقة بكل كائن ثنائي كبير الحجم. حيث تستخرج الوصف الذي تم إنشاؤه بواسطة الكمبيوتر (caption) من بيانات التعريف وتضيفه إلى كائن BlobInfo الذي يُمرر إلى طريقة العرض.foreach (IListBlobItem item in container.ListBlobs()) { var blob = item as CloudBlockBlob; if (blob != null) { blob.FetchAttributes(); // Get blob metadata var caption = blob.Metadata.ContainsKey("Caption") ? blob.Metadata["Caption"] : blob.Name; blobs.Add(new BlobInfo() { ImageUri = blob.Uri.ToString(), ThumbnailUri = blob.Uri.ToString().Replace("/photos/", "/thumbnails/"), Caption = caption }); } }
اختبار التطبيق
احفظ تغييراتك في Visual Studio واضغط على Ctrl+F5 لبدء التطبيق في المستعرض. استخدم التطبيق لتحميل المزيد من الصور، إما من مجموعة الصور التي قمت بتنزيلها أو من مجلدك الخاص. عند تمرير المؤشر فوق إحدى الصور الجديدة في طريقة العرض، يجب أن تظهر نافذة تلميح الأدوات وتعرض التسمية التوضيحية التي تم إنشاؤها بواسطة الكمبيوتر للصورة.
لعرض كافة بيانات التعريف المرفقة، استخدم Azure Storage Explorer لعرض حاوية التخزين التي تستخدمها للصور. انقر بزر الماوس الأيمن فوق أي من الكائنات الثنائية كبيرة الحجم في الحاوية وحدد Properties. في مربع الحوار، سترى قائمة بأزواج قيم المفاتيح. يتم تخزين وصف الصورة الذي تم إنشاؤه بواسطة الكمبيوتر في العنصر Caption، ويتم تخزين كلمات البحث الرئيسية في Tag0وTag1 وهكذا. عند الانتهاء، حدد إلغاء الأمر لإغلاق مربع الحوار.
إضافة بحث إلى التطبيق
في هذا القسم، ستضيف مربع بحث إلى الصفحة الرئيسية، مما يتيح للمستخدمين إجراء عمليات بحث عن الكلمات الرئيسية على الصور التي قاموا بتحميلها. الكلمات الأساسية هي تلك التي تم إنشاؤها بواسطة Azure الذكاء الاصطناعي Vision API وتخزينها في بيانات تعريف blob.
فتح Index.cshtml في مجلدViews/Home للمشروع وأضف العبارات التالية إلى العنصر الفارغ
<div>مع السمةclass="col-sm-4 pull-right":@using (Html.BeginForm("Search", "Home", FormMethod.Post, new { enctype = "multipart/form-data", @class = "navbar-form" })) { <div class="input-group"> <input type="text" class="form-control" placeholder="Search photos" name="term" value="@ViewBag.Search" style="max-width: 800px"> <span class="input-group-btn"> <button class="btn btn-primary" type="submit"> <i class="glyphicon glyphicon-search"></i> </button> </span> </div> }تضيف هذه التعليمة البرمجية وهذه العلامة مربع بحث وزر Search إلى الصفحة الرئيسية.
افتح HomeController.cs من مجلد Controllers للمشروع وأضف الأسلوب التالي للفئة HomeController:
[HttpPost] public ActionResult Search(string term) { return RedirectToAction("Index", new { id = term }); }هذه هي الطريقة التي يتم استدعاؤها عندما يحدد المستخدم الزر بحث الذي تمت إضافته في الخطوة السابقة. فهو يقوم بتحديث الصفحة ويتضمن معلمة بحث في عنوان URL.
استبدل الأسلوب Index بالتطبيق التالي:
public ActionResult Index(string id) { // Pass a list of blob URIs and captions in ViewBag CloudStorageAccount account = CloudStorageAccount.Parse(ConfigurationManager.AppSettings["StorageConnectionString"]); CloudBlobClient client = account.CreateCloudBlobClient(); CloudBlobContainer container = client.GetContainerReference("photos"); List<BlobInfo> blobs = new List<BlobInfo>(); foreach (IListBlobItem item in container.ListBlobs()) { var blob = item as CloudBlockBlob; if (blob != null) { blob.FetchAttributes(); // Get blob metadata if (String.IsNullOrEmpty(id) || HasMatchingMetadata(blob, id)) { var caption = blob.Metadata.ContainsKey("Caption") ? blob.Metadata["Caption"] : blob.Name; blobs.Add(new BlobInfo() { ImageUri = blob.Uri.ToString(), ThumbnailUri = blob.Uri.ToString().Replace("/photos/", "/thumbnails/"), Caption = caption }); } } } ViewBag.Blobs = blobs.ToArray(); ViewBag.Search = id; // Prevent search box from losing its content return View(); }لاحظ أن أسلوب الفهرس يقبل الآن معلمة
idتحتوي على القيمة التي اكتبها المستخدم في مربع البحث. تشير المعلمة الفارغة أو المفقودةidإلى أنه يجب عرض جميع الصور.أضف الأسلوب التالي إلى فئة HomeController:
private bool HasMatchingMetadata(CloudBlockBlob blob, string term) { foreach (var item in blob.Metadata) { if (item.Key.StartsWith("Tag") && item.Value.Equals(term, StringComparison.InvariantCultureIgnoreCase)) return true; } return false; }يتم استدعاء هذا الأسلوب بواسطة الأسلوب Index لتحديد ما إذا كانت الكلمات الأساسية لبيانات التعريف المرفقة بالكائن الثنائي كبير الحجم لصورة معينة تحتوي على مصطلح البحث الذي قام المستخدم بإدخاله.
شغل التطبيق مرة أخرى وحمّل العديد من الصور. لا تتردد في استخدام الصور الخاصة بك، وليس فقط تلك المقدمة مع البرنامج التعليمي.
اكتب كلمة أساسية مثل "river" في مربع البحث. ثم حدد الزر بحث .
ستختلف نتائج البحث حسب ما كتبته والصور التي قمت بتحميلها. ولكن النتيجة يجب أن تكون قائمة تمت تصفيتها من الصور التي تتضمن كلماتها الأساسية لبيانات التعريف كل أو جزء من الكلمة الأساسية التي كتبتها.
حدد زر الخلف الخاص بالمستعرض لعرض جميع الصور مرة أخرى.
لقد انتهيت تقريبًا. حان الوقت لنشر التطبيق على السحابة.
توزيع التطبيق على Azure
في هذا القسم، ستقوم بنشر التطبيق إلى Azure من Visual Studio. سوف تسمح لـ Visual Studio بإنشاء تطبيق Azure ويب لك، مما يوفر عليك عناء الاضطرار إلى الانتقال إلى مدخل Azure وإنشاءه بشكل منفصل.
انقر بزر الماوس الأيمن فوق المشروع في مستكشف الحلول وحدد Publish... من قائمة السياق. تأكد من تحديد Microsoft Azure App Service وCreate New ، ثم حدد الزر Publish .
في مربع الحوار التالي، حدد مجموعة الموارد "IntellipixResources" ضمن Resource Group. حدد الزر New... بجوار "App Service Plan" وأنشئ App Service Plan جديدة في نفس الموقع الذي حددته لحساب التخزين في إنشاء حساب تخزين، مع قبول الإعدادات الافتراضية في كل مكان آخر. قم بالإنهاء عن طريق تحديد الزر إنشاء .
بعد لحظات قليلة، سيظهر التطبيق في نافذة المتصفح. لاحظ عنوان URL في شريط العناوين. لم يعد التطبيق يعمل محليًا؛ إنه على الويب، حيث يكون الوصول إليه متاحًا للجمهور.
إذا قمت بإجراء تغييرات على التطبيق وأردت دفع التغييرات إلى الويب، فاذهب إلى عملية النشر مرة أخرى. لا يزال بإمكانك اختبار التغييرات محليًا قبل النشر على ويب.
تنظيف الموارد
إذا كنت ترغب في مواصلة العمل على تطبيق الويب، فشاهد قسم الخطوات التالية. إذا كنت لا تخطط لمتابعة استخدام هذا التطبيق، يجب حذف كافة الموارد الخاصة بالتطبيق. للقيام بحذف الموارد، يمكنك حذف مجموعة الموارد التي تحتوي على اشتراك Azure Storage ومورد الرؤية. سيؤدي ذلك إلى إزالة حساب التخزين، والكائنات الثنائية الكبيرة التي تم تحميلها إليه، ومورد خدمة التطبيقات اللازم للاتصال بتطبيق الويب ASP.NET.
لحذف مجموعة الموارد، افتح علامة التبويب Resource groups في المدخل، وانتقل إلى مجموعة الموارد التي استخدمتها لهذا المشروع، وحدد Delete resource group في أعلى طريقة العرض. سيطلب منك كتابة اسم مجموعة الموارد لتأكيد رغبتك في حذفه. لا يمكن استرداد مجموعة موارد بعد حذفها.
الخطوات التالية
هناك الكثير مما يمكنك القيام به لاستخدام Azure وتطوير تطبيق Intellipix الخاص بك إلى أبعد من ذلك. على سبيل المثال، يمكنك إضافة دعم لمصادقة المستخدمين وحذف الصور، وبدلا من إجبار المستخدم على انتظار خدمات Azure الذكاء الاصطناعي لمعالجة صورة بعد التحميل، يمكنك استخدام Azure Functions لاستدعاء Azure الذكاء الاصطناعي Vision API بشكل غير متزامن في كل مرة تتم فيها إضافة صورة إلى تخزين الكائنات الثنائية كبيرة الحجم. يمكنك أيضًا إجراء أي عدد من عمليات تحليل الصور الأخرى على الصورة الموضحة في النظرة العامة.