جمع بيانات المثال الثاني في TensorFlow.js

تعرض هذه الصفحة مرحلة جمع البيانات في
Example 2 من أمثلة TensorFlow.js، وتوضح منذ البداية
أن المثال الثاني يستخدم نفس الهيكل البرمجي العام
للمثال الأول، لكن مع مجموعة بيانات مختلفة.
أي أن الفكرة العامة في الجلب والتنظيف والرسم ما تزال نفسها،
لكن نوع البيانات هنا تغيّر من بيانات السيارات إلى
بيانات منازل.

فكرة مجموعة البيانات

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

{
  \"Avg. Area Income\": 79545.45857,
  \"Avg. Area House Age\": 5.682861322,
  \"Avg. AreaNumberofRooms\": 7.009188143,
  \"Avg. Area Number of Bedrooms\": 4.09,
  \"Area Population\": 23086.8005,
  \"Price\": 1059033.558
}

وتعرض الصفحة أيضًا مثالًا آخر لكائن منزل مختلف:

{
  \"Avg. Area Income\": 79248.64245,
  \"Avg. Area House Age\": 6.002899808,
  \"Avg. AreaNumberofRooms\": 6.730821019,
  \"Avg. Area Number of Bedrooms\": 3.09,
  \"Area Population\": 40173.07217,
  \"Price\": 1505890.915
}

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

مصدر البيانات

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

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

تنظيف البيانات

بعد عرض شكل البيانات الأصلية، تنتقل الصفحة إلى مرحلة
Cleaning Data.
وتؤكد أن التحضير لتعلم الآلة يتطلب دائمًا أمرين:

• إزالة البيانات التي لا نحتاجها
• تنظيف البيانات من الأخطاء

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

إزالة البيانات غير الضرورية

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

الصفحة تعرض الدالة التالية:

function extractData(obj) {
  return {x:obj.Horsepower, y:obj.Miles_per_Gallon};
}

لكن هنا توجد ملاحظة مهمة:
هذه الدالة كما هي ظاهرة في الصفحة تبدو
موروثة من مثال السيارات السابق،
لأنها تستخدم Horsepower وMiles_per_Gallon،
بينما سياق الصفحة نفسه يتحدث عن بيانات المنازل،
كما أن الرسم النهائي الظاهر في الصفحة يستخدم
Rooms وPrice.

لذلك فالفهم المنطقي للمثال الثاني هنا هو أن الهدف
في سياق المنازل يكون استخراج متغير إدخال مناسب
مثل عدد الغرف، مع متغير إخراج هو السعر.

إزالة الأخطاء من البيانات

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

وتعرض الصفحة الدالة التالية:

function removeErrors(obj) {
  return obj.x != null && obj.y != null;
}

هذه الدالة تعيد false
إذا كانت قيمة x أو y فارغة،
وبالتالي يتم استبعاد هذا السجل من البيانات.

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

جلب البيانات

بعد تجهيز دالتي الاستخراج والتنظيف، تعرض الصفحة
دالة لجلب البيانات من الملف الخارجي،
ثم تحويلها إلى JSON، ثم تمريرها عبر
مرحلتين: map وfilter.

async function runTF() {
  const jsonData = await fetch(\"cardata.json\");
  let values = await jsonData.json();
  values = values.map(extractData).filter(removeErrors);
}

هذه الدالة تشرح سير العمل بوضوح:

• تحميل الملف باستخدام fetch()
• تحويل المحتوى إلى JSON
• استخراج القيم المطلوبة فقط
• إزالة السجلات ذات الأخطاء

وكما في جزء `extractData()`، يبدو أن اسم الملف
المستخدم في السطر المعروض ما يزال من المثال السابق،
لكن المنطق العام للصفحة واضح:
تحميل البيانات، ثم تنظيفها، ثم تجهيزها للرسم والتدريب.

رسم البيانات

في الجزء الأخير من الصفحة، تعرض W3Schools
دالة جاهزة لرسم البيانات باستخدام
tfjs-vis في شكل
Scatter Plot.

function tfPlot(values, surface) {
  tfvis.render.scatterplot(surface,
    {values:values, series:[\'Original\',\'Predicted\']},
    {xLabel:\'Rooms\', yLabel:\'Price\',});
}

وهنا يظهر بوضوح أن الصفحة تريد في المثال الثاني
عرض العلاقة بين:

• Rooms على المحور الأفقي
• Price على المحور الرأسي

كما أن وجود سلسلتين باسم
Original وPredicted
يوحي بأن الرسم سيُستخدم لاحقًا ليس فقط لعرض البيانات الأصلية،
بل أيضًا لمقارنة النتائج التي سيتوقعها النموذج بعد التدريب.

ما الذي نتعلمه من هذه الصفحة؟

الدرس الأساسي هنا هو أن مرحلة البيانات في المثال الثاني
لا تختلف جوهريًا عن المثال الأول من حيث الهيكل،
لكنها تختلف في نوع البيانات والمتغيرات المختارة.

والصفحة توضّح أن العمل الجيد مع البيانات يتطلب:

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

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

الخلاصة

يوضح هذا الدرس أن Example 2 Data
في TensorFlow.js يعتمد على بيانات منازل محفوظة بصيغة JSON،
وأن الصفحة تشرح 3 خطوات رئيسية:
استخراج البيانات المطلوبة فقط،
إزالة الأخطاء والقيم الفارغة،
ثم جلب البيانات ورسمها باستخدام Scatter Plot.
ورغم أن الصفحة تحتوي على بعض الأسطر التي تبدو موروثة
من مثال السيارات السابق، فإن السياق العام للمثال الثاني
يشير بوضوح إلى التركيز على العلاقة بين
Rooms وPrice
ضمن بيانات المنازل.