AI Agents · درس

نماذج الرؤية لفهم الشاشة

أرسل لقطات الشاشة إلى نموذج متعدد الوسائط كي «يرى» ما سيراه الإنسان.

نماذج الرؤية لفهم الشاشة درس مجاني في AI Agents على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في AI Agents، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة AI Agents 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

لماذا الرؤية؟

يصعب التعبير عن بعض إجراءات الويب باستخدام المحدّدات:

اختبارات CAPTCHA (أو محاولات التعامل معها)
العناصر المحدّدة بصريًا (فقاعات الدردشة وواجهات المستخدم الديناميكية)
التطبيقات التي لا تحتوي على DOM ثابت (Canvas / WebGL)

تتيح نماذج اللغة الكبيرة متعددة الوسائط للوكيل رؤية الشاشة.

Take a Screenshot, Send to LLM

import base64
page.screenshot(path='screen.png')
with open('screen.png', 'rb') as f:
    b64 = base64.b64encode(f.read()).decode()

response = client.chat.completions.create(
    model='gpt-4o',
    messages=[{
        'role': 'user',
        'content': [
            {'type': 'text', 'text': 'What buttons are visible? Return JSON.'},
            {'type': 'image_url', 'image_url': {'url': f'data:image/png;base64,{b64}'}}
        ]
    }]
)

Anthropic Vision

response = client.messages.create(
    model='claude-sonnet-4-5',
    max_tokens=1024,
    messages=[{
        'role': 'user',
        'content': [
            {'type': 'image', 'source': {'type': 'base64', 'media_type': 'image/png', 'data': b64}},
            {'type': 'text', 'text': 'Describe what you see.'}
        ]
    }]
)

جودة الرؤية

يمكن لـ GPT-4o وClaude Sonnet 4.5:

وصف لقطات الشاشة بدقة
قراءة النصوص في الصور (OCR)
تحديد عناصر واجهة المستخدم حسب موضعها
رصد الأنماط والحالات الشاذة

لكنها لا تزال تواجه صعوبة مع النصوص الصغيرة جدًا والجداول المعقدة وإحداثيات البكسل الدقيقة.

تحديد العناصر حسب الوصف

اسألوا النموذج «أين زر Submit؟» وسيعيد إحداثيات تقريبية أو تعليمات:

prompt = 'Look at the screenshot. Where is the Submit button? Return the approximate (x, y) coordinates of its center.'
# Response: {"x": 420, "y": 530}

تنبيه بشأن دقة الإحداثيات

النماذج ليست دقيقة على مستوى البكسل. تعاملوا مع إحداثياتها باعتبارها تلميحات. ولإجراء نقرات دقيقة، ادمجوا بينها وبين محدّدات DOM متى أمكن.

SoM (مجموعة العلامات)

أضيفوا إلى لقطة الشاشة مربعات مرقّمة حول العناصر التفاعلية. ثم اسألوا النموذج «أي رقم تريد النقر عليه؟»:

حدّدوا العناصر التفاعلية عبر DOM
ارسموا تراكبات مرقّمة
أرسلوا لقطة الشاشة المشروحة إلى LLM
يرد LLM برقم، ثم تنقرون على ذلك العنصر

وهذا أكثر موثوقية بكثير من الإحداثيات الحرة.

Code for SoM

elements = page.query_selector_all('button, a, input, [role="button"]')
annotated = draw_numbered_overlays(screenshot, elements)
idx = ask_llm_for_choice(annotated, prompt='Click the Submit button')
elements[idx].click()

الاستدلال متعدد الإطارات

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

زمن الاستجابة والتكلفة

تستهلك كل لقطة شاشة نحو 85 ألف رمز عند الدقة الكاملة. التكاليف:

gpt-4o: ‏0.85 دولارًا لكل 100 صورة
claude-sonnet-4-5: نحو 1.50 دولار لكل 100 صورة

غيّروا حجم الصور قبل إرسالها، واستخدموا الرؤية فقط عندما يفشل التحديد المستند إلى DOM.

Resize for Cheaper Calls

from PIL import Image
img = Image.open('screen.png')
img.thumbnail((1024, 1024))
img.save('screen-small.png')

الرجوع إلى OCR

لاستخراج النصوص فقط، يكون OCR (مثل Tesseract وPaddleOCR) أرخص بكثير وغالبًا أفضل من نماذج الرؤية اللغوية الكبيرة.

نمط SoM

ما نمط كتابة التعليمات Set-of-Marks (SoM)؟

مراجعة

أرسلوا لقطات الشاشة إلى GPT-4o أو Claude لفهم الشاشة. استخدموا تعليقات SoM التوضيحية للتفاعل الموثوق. واستخدموا OCR للنصوص فقط. غيّروا الحجم لتوفير التكلفة.

الأسئلة الشائعة

هل درس «نماذج الرؤية لفهم الشاشة» مجاني؟

نعم — نص درس «نماذج الرؤية لفهم الشاشة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة AI Agents، انتقل إلى CoddyKit PRO. تتضمن دورة AI Agents 4 دروس في المجموع.

ماذا ستتعلم في «نماذج الرؤية لفهم الشاشة»؟

أرسل لقطات الشاشة إلى نموذج متعدد الوسائط كي «يرى» ما سيراه الإنسان. تتمرن على AI Agents مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ AI Agents؟

لا تُشترط خبرة سابقة. AI Agents على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «نماذج الرؤية لفهم الشاشة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس AI Agents هذا؟

نعم. كل درس في AI Agents يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

أتمتة المتصفح باستخدام Playwright
نماذج الرؤية لفهم الشاشة
أنماط استخدام الحاسوب (Anthropic Computer-Use)
بناء وكيل موثوق لملء النماذج

← العودة إلى AI Agents