دارك فيل: هناك شبكة عصبية تعمل خلف هذه الصفحة

الشكل الساحر أمامك وما يسلب لُبك هو دارك فيل، مكوّن React من تصميم ديفيد هاز، مبتكر ومؤسس ReactBits. DarkVeil هو مكوّن خلفية متحركة، مصمم ليبدو طبيعيًا وانسيابيًا. يصفه ديفيد بأنه «خلفية داكنة خفيفة مع حركة سلسة ومعالجة لاحقة» (React Bits، بدون تاريخ).

يمكنك أن تفترض أن تصميما مرئيا بهذه الأناقة والجمال يتمتع بجودة لا يمكن تحقيقها بأي قدر من حيل CSS أو JS. أنت على حق؛ إنه فقط بعض الرياضيات وذكاء اصطناعي، ولكن كيف؟

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

لكن كيف وصلنا إلى هنا؟ ليس من خلال تطوير الويب.

ستانلي والأصل البيولوجي

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

ويصيغها بهذا الشكل:

«في علم الأحياء، تمثل الجينات الموجودة في الحمض النووي هياكل معقدة للغاية تتكون من تريليونات الأجزاء المترابطة، مثل الدماغ البشري. ومع ذلك، لا يحتوي الحمض النووي على تريليونات من الجينات؛ بل إن 30 ألف جين فقط تشفر الجسم البشري بأكمله» (ستانلي، 2007).

إذا كان بإمكان 30,000 جين ترميز دماغ بشري، فما هو الحد الأدنى من الترميز اللازم لإنتاج نمط بصري؟

في عام 2007، نشر ستانلي بحثًا بعنوان «شبكات إنتاج الأنماط التركيبية: تجريد جديد للتطور»، ساعيًا لفهم كيفية إنتاج الحمض النووي للكائنات الحية المعقدة دون تخزين مخطط أولي (ستانلي، 2007).

تتمثل الفكرة الرئيسية للبحث في شبكات إنتاج الأنماط التركيبية في أنه بدلًا من تواصل البكسلات مع جيرانها — ما أسماه ستانلي بالتفاعلات المحلية، وهي الطريقة التي تعمل بها معظم الأنظمة التوليدية — يحتاج كل بكسل إلى معرفة معلومة واحدة فقط عن نفسه.

«أين أنا؟»

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

شبكات CPPNs وشبكات ANNs

هل هما متطابقان؟ بصراحة، الإجابة هي نعم ولا. صُممت الشبكات العصبية الاصطناعية (ANNs) كنماذج للإدراك، وتحديدًا للدماغ البشري؛ بينما تُركّب الشبكات العصبية المكانية المُبرمجة (CPPNs) دوالًا رياضية لتوليد أنماط مكانية، على غرار آلية عمل الحمض النووي (DNA). وتُطبّق هذه الشبكات آليات مُشابهة على مشاكل مُختلفة.

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

يكمن الاختلاف في المطلوب من الشبكة القيام به، وفي البيانات المُتاحة لها.

وراء الشكل دالة

تُهمل التفاعلات المحلية، لكن الحاجة إلى بديل يؤدي الوظيفة نفسها تبقى قائمة. هنا يأتي دور دوال التنشيط. على عكس الشبكات العصبية الاصطناعية التقليدية التي تُطبق عادةً دالة تنشيط واحدة، مثل ReLU أو sigmoid، على جميع العقد، تجمع شبكات CPPN بين دوال رياضية متعددة.

الدالة التي استخدمها DarkVeil بشكل أساسي هي sigmoid.

1vec4 sigmoid(vec4 x){return 1./(1.+exp(-x));}

السبب الرياضي وراء ظهور الشكل الحي بدلاً من الهندسي هو أن دالة سيجمويد تحوّل أي قيمة إلى النطاق (0، 1) بسلاسة واستمرارية وقابلية للتفاضل. وقد اختارها ستانلي تحديداً لأنها تُنتج انتقالات التدرج السلسة التي تُظهرها الأنماط البيولوجية. في كل مرة ترى فيها حافة ناعمة في الخلفية، فإن هذه الدالة هي المسؤولة عن ذلك.

Sigmoid

ReLU

Gaussian

Sine

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

ثم لدينا:

1vec4 cppn_fn(vec2 coordinate, float in0, float in1, float in2){

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

كل ما يلي هو عملية التمرير الأمامي.

أول ما تقوم به الشبكة هو بناء مدخلاتها.

1buf[6]=vec4(coordinate.x, coordinate.y, 0.3948333106474662+in0, 0.36+in1);2buf[7]=vec4(0.14+in2, sqrt(coordinate.x*coordinate.x+coordinate.y*coordinate.y), 0., 0.);

يمثل الإحداثيان coordinate.x وcoordinate.y موقع البكسل. أما in0 وin1 وin2 فهي إشارات زمنية تتغير قيمها ببطء، وستكون مسؤولة لاحقًا عن الحركة.

ثم هناك:

1sqrt(coordinate.x*coordinate.x+coordinate.y*coordinate.y)

وهي ببساطة المسافة الشعاعية من المركز.

يمثل كل منحنى مستوى مسافةً متساوية من المركز.

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

داخل عملية التمرير الأمامي

من هنا تبدأ الشبكة الفعلية.

1buf[0]=mat4(vec4(6.5404263,-3.6126034,...)*buf[6]+mat4(...)*buf[7]+vec4(...);2buf[1]=mat4(vec4(-3.3522482,...)*buf[6]+mat4(...)*buf[7]+vec4(...);3buf[0]=sigmoid(buf[0]);4buf[1]=sigmoid(buf[1]);

والتي هي الطبقة المخفية الأولى.

الأرقام التي تبدو عشوائية داخل mat4(vec4(...)) هي الأوزان. تُضرب المدخلات بهذه الأوزان، ويُضاف إليها تحيز، ثم يُمرر الناتج عبر دالة سيجمويد.

عملية ضرب المصفوفات، والتحيز، والتنشيط، تجعلها طبقة شبكة عصبية.

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

يتكرر الهيكل نفسه بأوزان مختلفة.

1buf[6]=sigmoid(buf[6]);2buf[7]=sigmoid(buf[7]);

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

هذا التركيب هو الجزء الأهم.

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

في النهاية، تُدمج جميع هذه القيم الوسيطة في طبقة الإخراج.

1buf[0]=mat4(...)*buf[0]+mat4(...)*buf[1]+...+mat4(...)*buf[7]+vec4(...);2buf[0]=sigmoid(buf[0]);3return vec4(buf[0].x, buf[0].y, buf[0].z, 1.);

تُغذّي جميع المخازن الثمانية عملية تحويل نهائية واحدة. تُطبّق دالة سيجمويد للمرة الأخيرة.

ثم:

1buf[0].x, buf[0].y, buf[0].z

تتحول إلى الأحمر والأخضر والأزرق. هذه هي العملية برمتها.

يُحدد البكسل موقعه في الشبكة. ويتغير هذا الموقع عبر سلسلة من الدوال الموزونة، لينتج عنها ثلاثة أرقام. تُحدد هذه الأرقام الثلاثة لون البكسل.

كرر هذه العملية لكل بكسل على الشاشة، لتحصل على النمط المطلوب.

يُغيّر الوقت كل شيء

كانت شبكات CPPN الأصلية ثابتة. أنماط حية مذهلة، لكنها مع ذلك ثابتة. يضيف DarkVeil مدخلاً آخر لإضفاء حيوية على الصورة: الوقت.

القيم الثلاث المذكورة سابقاً، in0 وin1 وin2، تأتي من هنا:

1fragColor=cppn_fn(2  uv,3  0.1*sin(0.3*uTime),4  0.1*sin(0.69*uTime),5  0.1*sin(0.44*uTime)6);

ثلاث موجات جيبية، لكل منها تردد مختلف: 0.3، 0.69، و0.44 على التوالي.

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

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

لكن DarkVeil تُغير الزمن في مكان آخر أيضًا.

قبل حتى أن تدخل الإحداثيات إلى الشبكة، يحدث ما يلي:

1uv+=uWarp*vec2(2  sin(uv.y*6.283+uTime*0.5),3  cos(uv.x*6.283+uTime*0.5)4)*0.05;

عندما تكون قيمة uWarp غير صفرية، يتغير نظام الإحداثيات نفسه.

عادةً، تدخل البكسلات عند الإحداثيات (x, y) إلى الشبكة من نفس الموضع. عند تفعيل خاصية التشويه، تُغيّر دالتا الجيب وجيب التمام هذه الإحداثيات قليلاً بمرور الوقت. في النسخة المعروضة من المقال، تكون قيمة uWarp صفرًا، لذا فإن هذا المسار الاختياري مُعطّل.

قبل المعالجة اللاحقة، يصل الزمن إلى الشبكة عبر مسارين: يُغيّر القيم الثلاث الإضافية الداخلة إلى الشبكة، وعندما تكون قيمة uWarp غير صفرية، يُغيّر الإحداثيات المُدخلة إليها.

إشارات إلى الشبكة

in0، in1، in2: ثلاث موجات، لكل منها تردد مختلف.

تشويه الإحداثيات

uWarp: يوضح كيف يتغير موضع البكسل بمرور الوقت. يستخدم العرض في المقالة القيمة 0 افتراضيًا.

تُبقي المدخلات المتغيرة النمط متحركًا دون الحاجة إلى تفاعل البكسلات مع بعضها البعض. لا يزال كل بكسل يُقيّم بشكل مستقل؛ وتتغير القيم المُمررة عبر الدالة بمرور الوقت.

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

بمعنى آخر، مجرد أنظمة إحداثيات جديدة تُمرر إلى دوال أخرى.

ما بعد الشبكة: المعالجة اللاحقة

وأخيراً، بعد أن تكون الشبكة قد أنتجت الصورة بالفعل، يقوم برنامج DarkVeil بتطبيق عمليات المعالجة اللاحقة.

1col.rgb=hueShiftRGB(col.rgb, uHueShift);2col.rgb*=1.-(scanline_val*scanline_val)*uScan;3col.rgb+=(rand(gl_FragCoord.xy+uTime)-0.5)*uNoise;

دوران اللون، وتعتيم خطوط المسح، وتشويش الصورة.

هذه تأثيرات تظليل طبيعية. تحدث بعد أن يحدد برنامج CPPN البنية الأساسية ولون النمط. وهذا فرق جوهري.

تُنتج الشبكة الشكل، أما الباقي فهو معالجة لاحقة.

خلفية داكنة خفيفة

وصف ديفيد هاز DarkVeil بأنه «خلفية داكنة خفيفة مع حركة سلسة» (React Bits، بدون تاريخ). وهو محقٌّ بالنسبة للمطور الذي يستخدمه، أو المستخدم الذي يراه. ولكنه أيضًا عبارة عن شبكة عصبية مُدرَّبة تُجري عملية تمرير أمامي على كل بكسل على شاشتك، ستين مرة في الثانية، استنادًا إلى ورقة بحثية نُشرت عام ٢٠٠٧ حول كيفية بناء الحمض النووي للكائنات الحية دون تخزين تريليونات الجينات. كلا الوصفين صحيح، فكلاهما ينظر إلى نفس الكائن من مسافات مختلفة.

المراجع

React Bits. (n.d.). Dark Veil. https://reactbits.dev/backgrounds/dark-veil

Stanley, K. O. (2007). Compositional pattern producing networks: A novel abstraction of development. Genetic Programming and Evolvable Machines, 8(2), 131–162. https://doi.org/10.1007/s10710-007-9028-8