واجهة برمجة تطبيقات كشف الأشكال للواجهة الأمامية: دليل لدمج رؤية الحاسوب في المتصفح

يتطور متصفح الويب ليصبح منصة قوية لأكثر من مجرد عرض المحتوى الثابت. مع التقدم في جافاسكريبت وواجهات برمجة تطبيقات المتصفح، يمكننا الآن أداء مهام معقدة مباشرة من جانب العميل. أحد هذه التطورات هو واجهة برمجة تطبيقات كشف الأشكال (Shape Detection API)، وهي واجهة برمجة تطبيقات للمتصفح تسمح للمطورين بكشف أشكال متنوعة في الصور ومقاطع الفيديو، بما في ذلك الوجوه والباركود والنصوص. هذا يفتح عالمًا من الإمكانيات لإنشاء تطبيقات ويب تفاعلية وذكية، كل ذلك دون الاعتماد على المعالجة من جانب الخادم لمهام رؤية الحاسوب الأساسية.

ما هي واجهة برمجة تطبيقات كشف الأشكال؟

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

• FaceDetector: يكشف الوجوه البشرية في الصور ومقاطع الفيديو.
• BarcodeDetector: يكشف ويفك شفرة صيغ الباركود المختلفة.
• TextDetector: يكشف مناطق النصوص داخل الصور. (ملاحظة: لم يتم تطبيقه على نطاق واسع في جميع المتصفحات بعد)

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

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

دعم المتصفحات

لا يزال دعم المتصفحات لواجهة برمجة تطبيقات كشف الأشكال في تطور. بينما تتوفر الواجهة في بعض المتصفحات الحديثة مثل Chrome و Edge، قد يكون الدعم في متصفحات أخرى مثل Firefox و Safari محدودًا أو يتطلب تمكين الميزات التجريبية. تحقق دائمًا من أحدث جداول توافق المتصفحات قبل الاعتماد على الواجهة في بيئة الإنتاج. يمكنك استخدام مواقع مثل caniuse.com للتحقق من الدعم الحالي لكل ميزة.

استخدام واجهة برمجة تطبيقات FaceDetector

لنبدأ بمثال عملي على استخدام واجهة برمجة تطبيقات FaceDetector لكشف الوجوه في صورة.

الكشف الأساسي عن الوجوه

إليك مقتطف شفرة أساسي يوضح كيفية استخدام FaceDetector:

const faceDetector = new FaceDetector();

const image = document.getElementById('myImage'); // افترض أن هذا عنصر <img>

faceDetector.detect(image)
  .then(faces => {
    faces.forEach(face => {
      console.log('Face detected at:', face.boundingBox);
      // يمكنك رسم مستطيل حول الوجه باستخدام canvas
    });
  })
  .catch(error => {
    console.error('Face detection failed:', error);
  });

الشرح:

1. نقوم بإنشاء مثيل جديد من فئة FaceDetector.
2. نحصل على مرجع لعنصر صورة (<img>) في ملف HTML الخاص بنا.
3. نستدعي دالة detect() الخاصة بـ FaceDetector، ونمرر لها عنصر الصورة.
4. تُرجع دالة detect() كائن Promise يتم حله بمصفوفة من كائنات Face، يمثل كل منها وجهًا تم اكتشافه.
5. نقوم بالمرور على مصفوفة كائنات Face ونسجل المربع المحيط بكل وجه في وحدة التحكم. تحتوي خاصية boundingBox على إحداثيات المستطيل المحيط بالوجه.
6. نقوم أيضًا بتضمين كتلة catch() للتعامل مع أي أخطاء قد تحدث أثناء عملية الكشف.

تخصيص خيارات كشف الوجوه

يقبل مُنشئ FaceDetector كائنًا اختياريًا مع خيارات التكوين:

• maxDetectedFaces: الحد الأقصى لعدد الوجوه التي سيتم اكتشافها. القيمة الافتراضية هي 1.
• fastMode: قيمة منطقية تشير إلى ما إذا كان سيتم استخدام وضع كشف أسرع، ولكنه قد يكون أقل دقة. القيمة الافتراضية هي false.

مثال:

const faceDetector = new FaceDetector({ maxDetectedFaces: 5, fastMode: true });

رسم مستطيلات حول الوجوه المكتشفة

لتسليط الضوء بصريًا على الوجوه المكتشفة، يمكنك رسم مستطيلات حولها باستخدام واجهة برمجة تطبيقات HTML5 Canvas. إليك الطريقة:

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');

const image = document.getElementById('myImage');

faceDetector.detect(image)
  .then(faces => {
    faces.forEach(face => {
      const { x, y, width, height } = face.boundingBox;

      context.beginPath();
      context.rect(x, y, width, height);
      context.lineWidth = 2;
      context.strokeStyle = 'red';
      context.stroke();
    });
  })
  .catch(error => {
    console.error('Face detection failed:', error);
  });

مهم: تأكد من وضع عنصر الـ canvas بشكل صحيح فوق عنصر الصورة.

استخدام واجهة برمجة تطبيقات BarcodeDetector

تسمح لك واجهة برمجة تطبيقات BarcodeDetector باكتشاف وفك شفرة الباركود في الصور ومقاطع الفيديو. وهي تدعم مجموعة واسعة من صيغ الباركود، بما في ذلك:

• EAN-13
• EAN-8
• UPC-A
• UPC-E
• Code 128
• Code 39
• Code 93
• Codabar
• ITF
• QR Code
• Data Matrix
• Aztec
• PDF417

الكشف الأساسي عن الباركود

إليك كيفية استخدام BarcodeDetector:

const barcodeDetector = new BarcodeDetector();

const image = document.getElementById('myBarcodeImage');

barcodeDetector.detect(image)
  .then(barcodes => {
    barcodes.forEach(barcode => {
      console.log('Barcode detected:', barcode.rawValue);
      console.log('Barcode format:', barcode.format);
      console.log('Bounding Box:', barcode.boundingBox);
    });
  })
  .catch(error => {
    console.error('Barcode detection failed:', error);
  });

الشرح:

1. نقوم بإنشاء مثيل جديد من فئة BarcodeDetector.
2. نحصل على مرجع لعنصر صورة يحتوي على باركود.
3. نستدعي دالة detect()، ونمرر لها عنصر الصورة.
4. تُرجع دالة detect() كائن Promise يتم حله بمصفوفة من كائنات DetectedBarcode.
5. يحتوي كل كائن DetectedBarcode على معلومات حول الباركود المكتشف، بما في ذلك:
• rawValue: قيمة الباركود المفككة.
• format: صيغة الباركود (على سبيل المثال، 'qr_code', 'ean_13').
• boundingBox: إحداثيات المربع المحيط بالباركود.
6. نسجل هذه المعلومات في وحدة التحكم.
7. نقوم بتضمين معالجة الأخطاء.

تخصيص صيغ كشف الباركود

يمكنك تحديد صيغ الباركود التي تريد اكتشافها عن طريق تمرير مصفوفة اختيارية من تلميحات الصيغ إلى مُنشئ BarcodeDetector:

const barcodeDetector = new BarcodeDetector({ formats: ['qr_code', 'ean_13'] });

سيؤدي هذا إلى قصر الكشف على رموز QR وباركود EAN-13، مما قد يحسن الأداء.

استخدام واجهة برمجة تطبيقات TextDetector (تجريبية)

تم تصميم واجهة برمجة تطبيقات TextDetector لاكتشاف مناطق النص داخل الصور. ومع ذلك، من المهم ملاحظة أن هذه الواجهة لا تزال تجريبية وقد لا يتم تطبيقها في جميع المتصفحات. يمكن أن يكون توفرها وسلوكها غير متسقين. تحقق من توافق المتصفح بعناية قبل محاولة استخدامها.

الكشف الأساسي عن النصوص (إذا كانت متوفرة)

إليك مثال على كيفية استخدام TextDetector، ولكن تذكر أنه قد لا يعمل:

const textDetector = new TextDetector();

const image = document.getElementById('myTextImage');

textDetector.detect(image)
  .then(texts => {
    texts.forEach(text => {
      console.log('Text detected:', text.rawValue);
      console.log('Bounding Box:', text.boundingBox);
    });
  })
  .catch(error => {
    console.error('Text detection failed:', error);
  });

إذا كانت TextDetector متاحة وكان الكشف ناجحًا، فستحتوي مصفوفة texts على كائنات DetectedText، لكل منها rawValue (النص المكتشف) و boundingBox.

اعتبارات وأفضل الممارسات

• الأداء: بينما توفر المعالجة من جانب العميل مزايا أداء في بعض الحالات، إلا أن تحليل الصور المعقد لا يزال يستهلك الكثير من الموارد. قم بتحسين صورك ومقاطع الفيديو الخاصة بك للتسليم عبر الويب لتقليل وقت المعالجة. فكر في استخدام خيار fastMode في FaceDetector للكشف الأسرع، وإن كان قد يكون أقل دقة.
• الخصوصية: أكد على مزايا الخصوصية للمعالجة من جانب العميل لمستخدميك. كن شفافًا بشأن كيفية استخدامك للواجهة وكيفية التعامل مع بياناتهم (أو عدم التعامل معها، في هذه الحالة).
• معالجة الأخطاء: قم دائمًا بتضمين معالجة أخطاء قوية للتعامل بأناقة مع الحالات التي لا تكون فيها الواجهة مدعومة، أو يفشل فيها الكشف. قدم رسائل خطأ مفيدة للمستخدم.
• كشف الميزات: قبل استخدام واجهة برمجة تطبيقات كشف الأشكال، تحقق مما إذا كانت مدعومة في متصفح المستخدم:

if ('FaceDetector' in window) {
  // FaceDetector مدعوم
} else {
  console.warn('FaceDetector is not supported in this browser.');
  // قم بتوفير تطبيق بديل أو تعطيل الميزة
}

• إمكانية الوصول: ضع في اعتبارك الآثار المترتبة على إمكانية الوصول عند استخدام واجهة برمجة تطبيقات كشف الأشكال. على سبيل المثال، إذا كنت تستخدم كشف الوجوه لتمكين ميزات معينة، فقم بتوفير طرق بديلة للمستخدمين الذين لا يمكن اكتشافهم للوصول إلى تلك الميزات.
• الاعتبارات الأخلاقية: كن على دراية بالآثار الأخلاقية لاستخدام كشف الوجوه وتقنيات رؤية الحاسوب الأخرى. تجنب استخدام هذه التقنيات بطرق يمكن أن تكون تمييزية أو ضارة. على سبيل المثال، كن على دراية بالتحيزات المحتملة في خوارزميات كشف الوجوه التي قد تؤدي إلى نتائج غير دقيقة أو غير عادلة لمجموعات سكانية معينة. اعمل بجد للتخفيف من هذه التحيزات.

حالات الاستخدام والأمثلة

تفتح واجهة برمجة تطبيقات كشف الأشكال مجموعة واسعة من الإمكانيات المثيرة لتطوير تطبيقات الويب. إليك بعض الأمثلة:

• تحرير الصور والفيديو: اكتشاف الوجوه تلقائيًا في الصور ومقاطع الفيديو لتطبيق الفلاتر أو التأثيرات أو التنقيحات.
• الواقع المعزز (AR): استخدم كشف الوجوه لتراكب كائنات افتراضية على وجوه المستخدمين في الوقت الفعلي.
• إمكانية الوصول: ساعد المستخدمين ذوي الإعاقات البصرية عن طريق اكتشاف ووصف الكائنات في الصور تلقائيًا. على سبيل المثال، يمكن لموقع ويب استخدام كشف الوجوه للإعلان عن وجود شخص في بث كاميرا الويب.
• الأمان: تنفيذ مسح الباركود من جانب العميل للمصادقة الآمنة أو إدخال البيانات. يمكن أن يكون هذا مفيدًا بشكل خاص لتطبيقات الويب على الأجهزة المحمولة.
• الألعاب التفاعلية: إنشاء ألعاب تستجيب لتعابير وجوه المستخدمين أو حركاتهم. تخيل لعبة تتحكم فيها بشخصية عن طريق الرمش أو الابتسام.
• مسح المستندات: اكتشاف مناطق النص تلقائيًا في المستندات الممسوحة ضوئيًا لمعالجة التعرف الضوئي على الحروف (OCR). على الرغم من أن TextDetector نفسه قد لا يقوم بالتعرف الضوئي على الحروف، إلا أنه يمكن أن يساعد في تحديد مناطق النص لمزيد من المعالجة.
• التجارة الإلكترونية: السماح للمستخدمين بمسح باركود المنتجات في المتاجر الفعلية للعثور عليها بسرعة على موقع التجارة الإلكترونية. يمكن للمستخدم، على سبيل المثال، مسح باركود كتاب في مكتبة للعثور عليه للبيع عبر الإنترنت.
• التعليم: أدوات تعليمية تفاعلية تستخدم كشف الوجوه لقياس تفاعل الطلاب وتعديل تجربة التعلم وفقًا لذلك. على سبيل المثال، يمكن لبرنامج تعليمي مراقبة تعابير وجه الطالب لتحديد ما إذا كان مرتبكًا أو محبطًا وتقديم المساعدة المناسبة.

مثال عالمي: يمكن لشركة تجارة إلكترونية عالمية دمج مسح الباركود في موقعها على الويب للجوال مما يسمح للعملاء في مختلف البلدان بالعثور بسرعة على المنتجات بغض النظر عن اللغة المحلية أو تسميات المنتجات. يوفر الباركود معرفًا عالميًا.

بدائل لواجهة برمجة تطبيقات كشف الأشكال

بينما توفر واجهة برمجة تطبيقات كشف الأشكال طريقة ملائمة لأداء مهام رؤية الحاسوب في المتصفح، هناك أيضًا طرق بديلة يجب مراعاتها:

• المعالجة من جانب الخادم: يمكنك إرسال الصور ومقاطع الفيديو إلى خادم للمعالجة باستخدام مكتبات وأطر عمل رؤية الحاسوب المخصصة مثل OpenCV أو TensorFlow. يوفر هذا النهج مرونة وتحكمًا أكبر ولكنه يتطلب بنية تحتية أكبر ويزيد من زمن الاستجابة.
• WebAssembly (Wasm): يمكنك ترجمة مكتبات رؤية الحاسوب المكتوبة بلغات مثل C++ إلى WebAssembly وتشغيلها في المتصفح. يوفر هذا النهج أداءً شبه أصلي ولكنه يتطلب خبرة فنية أكبر وقد يزيد من حجم التنزيل الأولي لتطبيقك.
• مكتبات جافاسكريبت: توفر العديد من مكتبات جافاسكريبت وظائف رؤية الحاسوب، مثل tracking.js أو face-api.js. يمكن أن تكون هذه المكتبات أسهل في الاستخدام من WebAssembly ولكنها قد لا تكون بنفس الأداء.

الخاتمة

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

تذكر دائمًا إعطاء الأولوية للاعتبارات الأخلاقية وخصوصية المستخدم عند العمل مع تقنيات رؤية الحاسوب.