TensorFlow Visor في TensorFlow.js

عند العمل في تعلم الآلة، لا يكفي فقط إنشاء النموذج أو تدريبه،
بل نحتاج أيضًا إلى رؤية البيانات والنتائج بصريًا.
ولهذا تعرض الصفحة أداة مهمة اسمها TensorFlow Visor،
وتُعرف أيضًا باسم tfjs-vis.

وتوضح الصفحة أن هذه الأداة هي مجموعة أدوات رسومية
مخصصة لتصور بيانات تعلم الآلة ونماذج TensorFlow،
وأنها تساعد على عرض الرسوم والمخططات داخل المتصفح
بطريقة سهلة وواضحة.

ما هو TensorFlow Visor؟

تشرح الصفحة أن TensorFlow Visor هو أداة رسومية
لـ تصور تعلم الآلة، وأنه يحتوي على دوال
خاصة بعرض نماذج TensorFlow والبيانات المرتبطة بها.

كما توضح أن عمليات العرض هذه يمكن تنظيمها داخل
Visors، وهي نوافذ منبثقة داخل المتصفح،
بحيث يمكن عرض الرسوم بطريقة منفصلة ومنظمة.

وتضيف الصفحة أيضًا أنه يمكن استخدام tfjs-vis
مع أدوات رسومية مخصصة أخرى مثل:

• d3
• Chart.js
• Plotly.js

إضافة tfjs-vis إلى الصفحة

لبدء استخدام TensorFlow Visor داخل صفحة HTML،
توضح الصفحة أنه يكفي إضافة مكتبة tfjs-vis
عبر وسم script.

<script src=\"https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis\"></script>

بعد إضافة هذا السطر، يمكننا استخدام الدوال الخاصة بالرسم
والعرض مباشرة داخل JavaScript.

الرسم المبعثر Scatter Plot

أول مثال في الصفحة هو المخطط المبعثر.
في هذا المثال يتم إنشاء سلسلتين من البيانات:
First وSecond،
وكل سلسلة تحتوي على 100 نقطة عشوائية.

بعد إنشاء البيانات، يتم تمريرها إلى الدالة
tfvis.render.scatterplot()
لعرضها داخل عنصر موجود في الصفحة.

const surface = document.getElementById(\'demo\');
const series = [\'First\', \'Second\'];

const serie1 = [];
const serie2 = [];
for (let i = 0; i < 100; i++) {
  serie1[i] = {x:i, y:Math.random() * 100};
  serie2[i] = {x:i, y:Math.random() * 100};
}

const data = {values: [serie1, serie2], series}

tfvis.render.scatterplot(surface, data);

في هذا المثال:

• surface يمثل المكان الذي سيظهر فيه الرسم
• series تمثل أسماء السلاسل البيانية
• values تحتوي على البيانات نفسها

وهكذا يتم رسم السلسلتين داخل الصفحة في شكل Scatter Plot واحد.

عرض Scatter Plot داخل Visor

بعد المثال الأول، توضح الصفحة أنه يمكن عرض نفس الرسم
داخل Visor بدلًا من عنصر HTML عادي.

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

const series = [\'First\', \'Second\'];

const serie1 = [];
const serie2 = [];
for (let i = 0; i < 100; i++) {
  serie1[i] = {x:i, y:Math.random() * 100};
  serie2[i] = {x:i, y:Math.random() * 100};
}

const data = {values: [serie1, serie2], series}

tfvis.render.scatterplot({name: \"my Plots\"}, data);

الفكرة هنا أن الرسم سيظهر داخل نافذة Visor مستقلة،
وهذا مفيد عندما نريد تنظيم أكثر من رسم أو متابعة النتائج
أثناء التدريب بطريقة أوضح.

الرسوم العمودية Bar Graphs

بعد ذلك تنتقل الصفحة إلى Bar Graphs.
في هذا المثال يتم إنشاء مجموعة من العناصر،
وكل عنصر يحتوي على:

• index لتمثيل الفئة أو الموقع
• value لتمثيل القيمة

ثم يتم عرض هذه القيم باستخدام
tfvis.render.barchart().

const surface = document.getElementById(\'demo\');
const data = [
  {index: 0, value: 100},
  {index: 1, value: 200},
  {index: 2, value: 150},
  {index: 2, value: 250},
];

tfvis.render.barchart(surface, data);

هذا المثال مفيد عندما نريد مقارنة قيم منفصلة بصريًا،
مثل نتائج فئات مختلفة أو مقاييس أداء متعددة.

عرض Bar Graph داخل Visor

كما في المثال السابق، يمكن أيضًا عرض Bar Graph
داخل نافذة Visor بدلاً من عنصر HTML عادي.

const data = [
  {index: 0, value: 100},
  {index: 1, value: 200},
  {index: 2, value: 150},
  {index: 2, value: 250},
];

tfvis.render.barchart({name:\"my Graphs\"}, data);

وهنا يتم وضع الرسم في نافذة مستقلة اسمها
my Graphs.

الرسوم الخطية Line Graphs

تشرح الصفحة بعد ذلك كيفية عرض
Line Graphs باستخدام tfjs-vis.
وفي المثال يتم تعريف مجموعة نقاط تحتوي على
قيم x وy، ثم تمريرها إلى
tfvis.render.linechart().

const surface = document.getElementById(\'demo\');

let values = [
  {x: 1, y: 20},
  {x: 2, y: 30},
  {x: 3, y: 5},
  {x: 4, y: 12}
];

tfvis.render.linechart(surface, {values});

هذا النوع من الرسوم مناسب جدًا عندما نريد متابعة
اتجاه القيم بمرور الوقت أو مقارنة الأداء عبر خطوات التدريب.

عرض Line Graph داخل Visor

وتعرض الصفحة أيضًا نفس المثال ولكن داخل Visor:

let values = [
  {x: 1, y: 20},
  {x: 2, y: 30},
  {x: 3, y: 5},
  {x: 4, y: 12}
];

tfvis.render.linechart({name: \'my Lines\'}, {values});

وهنا يظهر المخطط الخطي داخل نافذة مستقلة
اسمها my Lines.

ما الذي نستفيده من TensorFlow Visor؟

تكمن أهمية TensorFlow Visor في أنه يجعل
فهم البيانات والنتائج أسهل بصريًا.
فبدلًا من الاكتفاء بالأرقام الخام داخل console،
يمكن عرض البيانات في شكل رسوم تساعد على:

• فهم شكل البيانات
• مقارنة السلاسل المختلفة
• مراقبة النتائج أثناء التدريب
• تنظيم الرسوم داخل نوافذ Visor مستقلة

وهذا يجعله مفيدًا جدًا في المشاريع التعليمية،
وكذلك أثناء تطوير النماذج ومراقبة سلوكها خطوة بخطوة.

الخلاصة

يوضح هذا الدرس أن TensorFlow Visor
أو tfjs-vis هو أداة رسومية لتصور
بيانات تعلم الآلة ونماذج TensorFlow داخل المتصفح.
ويعرض كيفية تضمين المكتبة داخل الصفحة،
ثم يشرح 3 أنواع أساسية من الرسوم:
Scatter Plot وBar Graph
وLine Graph، مع إمكانية عرض كل منها
إما داخل عنصر HTML عادي أو داخل
Visor مستقل.