الذكاء الاصطناعي والتكنولوجيا on kenji.blog

جدار تطوير الذكاء الاصطناعي

Sun, 20 Jul 2025 21:52:42 +0900

جدار تطوير الذكاء الاصطناعي

〜 وصلنا إلى المحطة الثامنة، لكن ما بعدها كان جحيمًا 〜

مرحبًا، أنا kenji.

في الآونة الأخيرة، أسمع كثيرًا أشخاصًا يقولون: “طلبت من الذكاء الاصطناعي وصنع لي تطبيقًا!” لقد تجاوزنا عصر البرمجة بدون كود (no-code) والبرمجة بقليل من الكود (low-code)، ودخلنا مرحلة “البرمجة بالأجواء” (vibe-coding).

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

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

حتى المحطة الثامنة يبدو الأمر “في غاية السهولة”

التطوير باستخدام الذكاء الاصطناعي يبدو سهلاً حقًا في البداية. إدخال/إخراج الملفات (File I/O)؟ يعمل في الوقت الحالي. الشبكة؟ حسنًا، إنها تتصل. قاعدة البيانات؟ JSON يكفي. واجهة المستخدم (UI)؟ كتب ChatGPT كود React بالفعل. الدفع؟ يمكن نسخ ولصق واجهة برمجة تطبيقات (API) الخاصة بـ Stripe.

هنا، يتبادر إلى ذهنك وهم: “هل أصبحت مهندسًا بالفعل؟” لكن الجحيم الحقيقي يبدأ من هنا.

لماذا نتعثر؟

السبب بسيط: “الذكاء الاصطناعي يبني شيئًا يبدو مكتملًا، لكن التعديلات النهائية تُترك بالكامل للبشر.”

ضياع البيانات أثناء إدخال/إخراج الملفات
ضعف تطبيع قاعدة البيانات (DB normalization) مما يجعل البحث بطيئًا
واجهة المستخدم غير بديهية
عدم إجراء اختبارات الحمل، مما يؤدي إلى انهيار التطبيق عند زيادة الزيارات
الرفض عند مراجعة التطبيق من قبل Apple/Google
انتهاك المتطلبات القانونية (مما يكاد يسبب فضيحة)

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

لكن، هناك مفارقة

هنا نلاحظ مفارقة واحدة.

ماذا لو أصبح الذكاء الاصطناعي قادرًا حقًا على فعل كل شيء في المستقبل؟ بمعنى، ماذا لو “تم التعامل مع الأمان، والدفع، والتصميم بشكل مثالي بواسطة الذكاء الاصطناعي”؟

في تلك اللحظة، قد تختفي الحاجة إلى قيام البشر بإنشاء التطبيقات من الأساس.

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

🌀 على سبيل المثال

في الماضي، كنا “نفتح تطبيق الآلة الحاسبة لنقوم بالحساب”، أما الآن، فيكفي أن نقول: “يا Siri، كم حاصل ضرب 12 في 32؟"، وينتهي الأمر.

وبالمثل، إذا قلنا: “أيها الذكاء الاصطناعي، قم بتعديل هذه الصورة وشاركها”، فقد تنتهي العملية دون المرور عبر واجهة المستخدم (UI) أو واجهة برمجة التطبيقات (API) الخاصة بالتطبيق.

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

في النهاية، ما الذي يمكننا فعله الآن؟

إذن، ماذا يجب أن نفعل؟

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

الذكاء الاصطناعي هو أداة، ومصعد، وأحيانًا منافس. لكن، أسئلة “ماذا نصنع” و “لماذا نصنعه” لا تزال أسئلة تخصنا نحن البشر.

الخلاصة:

جدار تطوير الذكاء الاصطناعي ليس تكنولوجيا، بل هو مفارقة هيكلية

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

وربما، عندما نصل إلى القمة، سيكون بانتظارنا مستقبل نسأل فيه أنفسنا: “هل كان من الضروري حقًا تسلق هذا الجبل؟”

تجربة mermaid.js

Sat, 25 May 2024 02:18:09 +0900

ما هو mermaid.js

mermaid.js هي مكتبة JavaScript تتيح لك كتابة بنية مخصصة تعتمد على النص (صيغة Mermaid) لعرض المخططات المعقدة رسومياً مثل المخططات الانسيابية والرسوم البيانية ومخططات جانت. يتم استخدامها أيضاً في خدمات مختلفة مثل GitHub و Qiita و Notion. في هذه المرة، سنحاول تمكين استخدام mermaid.js في hugo.

تمكين استخدام mermaid.js في hugo

الخطوات كالتالي:

أضف التالي إلى layouts/partials/extend_footer.html.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


{{ if or .Params.mermaid .Site.Params.mermaid }}
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.3.0/dist/mermaid.min.js"></script>
{{- $loadmermaid := resources.Get "js/load-mermaid.js" }}
<script src="{{ $loadmermaid.RelPermalink }}"></script>
<script>
 window.initMermaid();
 if (isDarkTheme()) {
 setPrefTheme('dark');
 } else {
 setPrefTheme('light');
 }
</script>
{{ end }}

※ يتم تحميل mermaid.min.js فقط إذا كان mermaid: true في عبارة if. هذه المكتبة كبيرة نوعاً ما، حوالي 3 ميغابايت.

قم بإنشاء assets/js/load-mermaid.js. يتم استخدام هذه العملية للتهيئة وإعادة الرسم عند تبديل السمة ديناميكياً.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62


(function(window){
'use strict'

 const elementCode = '.mermaid'
 const loadMermaid = function(theme) {
 window.mermaid.initialize({theme})
 window.mermaid.init({theme}, document.querySelectorAll(elementCode))
 }
 const saveOriginalData = function(){
 return new Promise((resolve, reject) => {
 try {
 var els = document.querySelectorAll(elementCode),
 count = els.length;
 els.forEach(element => {
 element.setAttribute('data-original-code', element.innerHTML)
 count--
 if(count == 0){
 resolve()
 }
 });
 } catch (error) {
 reject(error)
 }
 })
 }
 const resetProcessed = function(){
 return new Promise((resolve, reject) => {
 try {
 var els = document.querySelectorAll(elementCode),
 count = els.length;
 els.forEach(element => {
 if(element.getAttribute('data-original-code') != null){
 element.removeAttribute('data-processed')
 element.innerHTML = element.getAttribute('data-original-code')
 }
 count--
 if(count == 0){
 resolve()
 }
 });
 } catch (error) {
 reject(error)
 }
 })
 }

 const init = ()=>{
 saveOriginalData()
 .catch( console.error )
 document.body.addEventListener('dark-theme-set', ()=>{
 resetProcessed()
 .then(loadMermaid('dark'))
 .catch(console.error)
 })
 document.body.addEventListener('light-theme-set', ()=>{
 resetProcessed()
 .then(loadMermaid('default'))
 .catch(console.error)
 })
 }
 window.initMermaid = init
})(window);

تمت الإشارة إلى الكود الأصلي هنا:

Reinitialize with new theme #1945

قم بتعديل عملية تبديل السمة في header.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


function switchTheme(theme) {
 switch (theme) {
 case 'light':
{{ if or .Params.mermaid .Site.Params.mermaid }}
 document.body.dispatchEvent(new CustomEvent('light-theme-set'));
{{ end }}
 document.body.classList.remove('dark');
 break;
 case 'dark':
{{ if or .Params.mermaid .Site.Params.mermaid }}
 document.body.dispatchEvent(new CustomEvent('dark-theme-set'));
{{ end }}
 document.body.classList.add('dark');
 break;
 // auto
 default:
 if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
{{ if or .Params.mermaid .Site.Params.mermaid }}
 document.body.dispatchEvent(new CustomEvent('dark-theme-set'));
{{ end }}
 document.body.classList.add('dark');
 }
 }
}

قم بإنشاء layouts/shortcodes/mermaid.html

1
2
3


<div class="mermaid" align="{{ if .Get "align" }}{{ .Get "align" }}{{ else }}center{{ end }}">
 {{ safeHTML .Inner }}
</div>

الآن أصبح mermaid.js جاهزاً للاستخدام.

استخدام mermaid.js

أضف التالي إلى تعريف المقالة

1

marmaid: true

أضف التالي إلى نص المقالة

المخطط الانسيابي

1
2
3
4
5
6


{{<mermaid align="center">}}
graph TD
 A[البداية] -->|الشرط 1| B(الشرط 2)
 B --> C{الشرط 3}
 C -->|الشرط 4| D[النهاية]
{{</mermaid>}}

النتيجة

graph TD A[البداية] -->|الشرط 1| B(الشرط 2) B --> C{الشرط 3} C -->|الشرط 4| D[النهاية]

مخطط جانت

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


{{<mermaid align="center">}}
gantt
 section Project
 تحديد المتطلبات :done, a, 2024-05-25, 5d
 التصميم الأساسي :done, b, after a, 5d
 التصميم التفصيلي :done, c, after b, 5d
 التصنيع :active, d, after c, 10d
 اختبار الوحدة :crit, e, after d, 5d
 اختبار التكامل : f, after e, 5d
 الاختبار الشامل : g, after f, 5d
 الإصدار :milestone, h, after g, 1d
{{</mermaid>}}

النتيجة

gantt section Project تحديد المتطلبات :done, a, 2024-05-25, 5d التصميم الأساسي :done, b, after a, 5d التصميم التفصيلي :done, c, after b, 5d التصنيع :active, d, after c, 10d اختبار الوحدة :crit, e, after d, 5d اختبار التكامل : f, after e, 5d الاختبار الشامل : g, after f, 5d الإصدار :milestone, h, after g, 1d

مخطط التسلسل

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


{{<mermaid align="center">}}
sequenceDiagram
 participant user
 participant view
 participant controller
 participant model
 participant database
 user->>view: إدخال المعرف/كلمة المرور
 view->>controller: طلب المصادقة
 controller->>model: طلب المصادقة
 model->>database: طلب المصادقة
 database-->>model: إرجاع نتيجة المصادقة
 model-->>controller: إرجاع نتيجة المصادقة
 controller-->>view: إرجاع نتيجة المصادقة
 view-->>user: عرض نتيجة المصادقة
{{</mermaid>}}

النتيجة

sequenceDiagram participant user participant view participant controller participant model participant database user->>view: إدخال المعرف/كلمة المرور view->>controller: استعلام ajax controller->>model: طلب المصادقة model->>database: إصدار SQL database-->>model: إرجاع نتيجة SQL model-->>controller: إرجاع نتيجة طلب المصادقة controller-->>view: إرجاع نتيجة استعلام ajax view-->>user: عرض نتيجة المصادقة

هذا كل شيء.

المراجع

حول الذكاء الاصطناعي التوليدي

Tue, 16 Apr 2024 02:13:56 +0900

مقاطع فيديو لمحاضرات حول الذكاء الاصطناعي التوليدي

“الذكاء الاصطناعي التوليدي” (1) البروفيسور ماسايوكي ناكاو، جامعة طوكيو 2023.9.8

“الذكاء الاصطناعي التوليدي” (2) البروفيسور كونياشي ساكاي، جامعة طوكيو 2023.10.11

“الذكاء الاصطناعي التوليدي” (3) البروفيسور يوتاكا ماتسوو، جامعة طوكيو 2024.3.15

كيفية تطبيق الفسيفساء على جزء معين من الصورة في paint.net

Tue, 11 Apr 2023 16:33:10 +0900

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

عند تحميل الصور على الإنترنت، قد ترغب في بعض الأحيان في إخفاء أجزاء معينة بوضع فسيفساء عليها، وباستخدام paint.net يمكنك تعديل الصور بسهولة وسرعة.

الخطوات

1. افتح الصورة التي تريد تعديلها في paint.net

2. استخدم أداة التحديد لاختيار الجزء الذي تريد تغطيته بالفسيفساء (يمكن التحديد المتعدد)

3. اختر من القائمة: تأثيرات (Effects) > تشويه (Distort) > فسيفساء (Pixelate)

يمكنك ضبط حجم الخلية للتحكم في خشونة الفسيفساء. كلما زادت القيمة، زادت درجة الإخفاء.
[تصغير] اختر Bilinear (صقل متعدد العينات)
[تكبير] اختر Nearest Neighbor (أقرب جار)

انقر على OK لإغلاق النافذة.

4. سيتم تطبيق الفسيفساء، قم بحفظ الصورة بعد ذلك.

هذا كل شيء.

كيفية إضافة إطار للصور باستخدام paint.net

Tue, 11 Apr 2023 14:31:59 +0900

سأوضح لك كيفية إضافة إطار للصور باستخدام paint.net.

الخطوات

1. افتح الصورة التي تريد إضافة إطار لها في paint.net

2. قم بتعيين اللون الثانوي (هذا سيكون لون الإطار)

إذا لم تكن لوحة الألوان معروضة، فاضغط على مفتاح F8 على لوحة المفاتيح.

لتعيينه إلى اللون الأسود، انقر فوق .

3. القائمة > الصورة > حدد تغيير حجم القماش

قم بزيادة العرض والارتفاع بمقدار 2 بكسل لكل منهما. زيادة بمقدار 2 بكسل تعني أن الإطار سيكون 1 بكسل. إذا كنت تريد أن يكون الإطار 5 بكسل، فقم بزيادة العرض والارتفاع بمقدار 10 بكسل لكل منهما.

حدد المرساة لتكون “الوسط”، ثم انقر فوق موافق.

4. سيتم إضافة إطار للصورة، لذا قم بحفظ الصورة.

هذا كل شيء.

جاذبية paint.net

Wed, 14 Sep 2022 19:33:31 +0900

سأقدم لكم paint.net، وهو برنامج تحرير صور أستخدمه غالبًا أثناء أعمال التطوير الخاصة بي.

ميزات مفيدة غير متوفرة في الرسام القياسي لنظام Windows

يمكنه التعامل مع الشفافية/العتامة
يمكنه التحديد التلقائي لأشكال النطاقات المعقدة
يمكنه التعامل مع الطبقات
يمكنه ضبط المستويات والسطوع والتباين وما إلى ذلك
يمكن تطبيق تأثيرات مختلفة (تمويه، تشويه، ضوضاء، إلخ)

ميزات أخرى

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

إنه برنامج عالي الوظائف ولكنه سهل الاستخدام. أنا شخصياً لم أتقن جميع ميزاته بعد.

التثبيت من هنا

https://www.getpaint.net/download.html

إذا اخترت الإصدار المجاني، يرجى النقر فوق الجزء المؤطر باللون الأحمر في الرابط أدناه.

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