شنو هو Claude Image View؟
Claude Image View هو مود ديال Claude Code كيعرض صور مصغّرة للصور اللي كتلسّق فالمطالبة. عوض ما تخدم غير مع الوسوم البسيطة بحال [Image #1]، تقدر تشوف الصور الموافقة فصف فوق خانة الإدخال مباشرة.
هاد المود مفيد خصوصاً ملي كتقارن بين لقطات الشاشة، التصاور، ولا حالات الواجهة. كل صورة مصغّرة عليها الرقم ديال وسم الصورة المرتابط بها، وهاد الشي كيخلّيك تشير للصورة الصحيحة بسهولة فالمطالبة ديالك.
المزايا الرئيسية
- معاينات فورية: الصور المصغّرة كيبانو مباشرة منين كتلسّق صورة. ما خاصكش تضغط على شي زر آخر.
- دعم صور متعددة: ملي كتلسّق بزاف ديال الصور، كيتخلق صف ديال الصور المصغّرة المرقّمة.
- الحفاظ على النِّسب: لقطات الشاشة العريضة كاتبقى عريضة، والصور العمودية كاتبقى طويلة.
- ملاءمة تلقائية: البلاطات كيتصغّرو باش يناسبو المساحة المتوفرة، وكيمنعو صف الصور المصغّرة من التمرير ولا التقطّاع.
- تنظيف تلقائي: الصف كيختافي من بعد ما كتبعث المطالبة ولا كتحيد وسوم الصور الموافقة.
- خدمة محلية فقط: المود ما كيدير حتى طلب للشبكة وما كيكتب حتى ملف.
المتطلبات
قبل ما تثبّت المود، تأكّد باللي البيئة ديالك كتوفّر هاد المتطلبات:
- الإصدار
2.1.287ولا أحدث من Claude Code، حيث كيدعم المودات. - macOS ولا Linux.
- طرفية كتدعم بروتوكول رسومات kitty، بحال Ghostty ولا kitty.
إلى كانت الطرفية ديالك ما كتدعمش بروتوكول رسومات kitty، البلاطات غادي تعرض نص بحال
[Image #1]عوض الصورة الفعلية. تطبيق Claude Desktop كيعرض الصور الملصقة من الأصل، وهاد المود ما كيرسم فيه والو.
ثبّت Claude Image View
التثبيت من داخل Claude Code
حلّ جلسة ديال Claude Code ونفّذ هاد الأوامر بالترتيب:
/plugin marketplace add jarrodwatts/claude-image-view
/plugin install image-view
/reload-pluginsالأمر الأول كيزيد سوق الإضافات ديال المشروع، والثاني كيثبّت المود، والثالث كيعيد تحميل الإضافات المثبتة فالجلسة الحالية.
التثبيت من الطرفية
إلى كنت كتفضّل تستعمل الصدفة، زِد السوق وثبّت الإضافة بهاد الأوامر:
claude plugin marketplace add jarrodwatts/claude-image-view
claude plugin install image-view@claude-image-viewمن بعد التثبيت، نفّذ /reload-plugins داخل جلسة Claude Code خدامة. أو تقدر تبدا جلسة جديدة.
الاستعمال الأساسي
- حلّ Claude Code فطرفية متوافقة.
- لسّق صورة فالمطالبة.
- قلّب فوق خانة الإدخال على الصورة المصغّرة المرقّمة.
- كتب الطلب ديالك واستعمل الوسم اللي تخلق، بحال
[Image #1]. - بعث المطالبة. صف الصور المصغّرة كيتفرّغ بوحدو.
مثلاً، من بعد ما كتلسّق جوج ديال الصور، تقدر تكتب:
Why is the header misaligned in [Image #1] compared with [Image #2]?صف المعاينة كيعرض الصورتين وعليهما الوسمان #1 و#2، وكيعاونك تتأكّد باللي المطالبة كتشير ليهم بالترتيب المقصود.
حيد المعاينة قبل الإرسال
إلى حيدتي وسم صورة من المطالبة، البلاطة المرتابطة بها كتحيد حتى هي. وحين كتحيد جميع وسوم الصور، الصف كامل كيتفرّغ.
كيفاش كيخدم المود
Claude Code كيخزّن الصور الملصقة فذاكرة مؤقتة ديال الجلسة، بمسار على هاد الشكل:
<tmp>/<project>/<session>/images/<n>.pngمن بعد كيدخل وسم مطابق بحال [Image #n] فالمطالبة. Claude Image View كيربط هاد الوسوم بالملفات المخزنة مؤقتاً بهاد الطريقة:
- كل 200 ميلي ثانية، كيقرا خانة المطالبة وكيقلّب على وسوم
[Image #n]. التايمر ضروري حيث لصق صورة ما كيطلقش حدث ديال التعديل. - لكل وسم مكتاشف، كيلقى ملف PNG المخزّن مؤقتاً وكيقرا أبعاد الصورة من ترويسة PNG ديالها.
- كيرسم صور مصغّرة بالحجم المناسب فوق المطالبة باستعمال عنصر
Imageديال Claude Code.
الطرفية كتقرا كل ملف صورة مباشرة، وبهذا بيانات الصور ما كتدوزش من المود نفسو.
الأمان والتحقق
Claude Image View كيخدم محلياً. ما كيدير حتى طلب للشبكة وما كيكتب حتى ملف. الولوج ديالو محدود فقراءة خانة المطالبة، وعرض المجلد المؤقت ديال Claude Code باش يلقى ذاكرة الجلسة الحالية، وقراءة البايتات اللولة من الصور الملصقة.
إلى ما كانش CLAUDE_CODE_TMPDIR مضبوط، المود كينفّذ id -u مرة وحدة باش يحدّد المجلد المؤقت الافتراضي. تقدر تفحص الـ hooks والاستدعاءات ديالو بالتحقق من المستودع:
claude plugin validate .حل المشاكل
ما بانش صف الصور المصغّرة
نفّذ /plugin فـ Claude Code وشوف سطر الحالة الخافت اللي تحت التبويبات. خاصو يبيّن image-view كمود نشيط. إلى ما بانش، نفّذ:
/reload-pluginsبلاطة كاتقول “no preview”
هاد الرسالة كتعني باللي المود ما قدرش يلقى ملف الصورة المخزّن مؤقتاً. ممكن Claude Code بدّل فين كيتخزنو الصور الملصقة. سجّل إصدار Claude Code ديالك وحلّ مشكل فمستودع المشروع.
البلاطة كتعرض وسم الصورة عوض الصورة
إلا كانت شي خانة فيها [Image #1] بلاصة الصورة المصغّرة، راه التيرمينال ديالك ما كيدعمش بروتوكول الرسومات ديال kitty. بدّل لتيرمينال متوافق بحال Ghostty ولا kitty.
نصائح متقدمة والتطوير
تأكّد من نسخة Claude Code ديالك
إلا ما تحمّلاش المود، تأكّد بلي كتستعمل Claude Code 2.1.287 ولا نسخة أحدث. الإصدارات القديمة ما فيهاش الدعم الضروري للمودات.
جرّب بلا تثبيت
المساهمين يقدرو ينسخو المستودع ويحمّلوه غير لجلسة وحدة:
git clone https://github.com/jarrodwatts/claude-image-view
cd claude-image-view
claude --plugin-dir .هاد الشي مفيد باش تجرّب التغييرات المحلية بلا ما تثبّت المود بشكل دائم.
تحقّق وشغّل الاختبارات
من داخل المستودع المنسوخ، تحقّق من الإضافة وشغّل مجموعة الاختبارات ديالها:
claude plugin validate .
claude plugin test .فأول مرة كيحمّل فيها Claude Code المود، كيكتب تعريفات أنواع API فـ .claude-plugin/types/. من بعد، تقدر تدير فحص للأنواع ديال المشروع بهاد الأمر:
tsc -p .الخلاصة
Claude Image View كيخلّي جلسات Claude Code اللي فيها الصور أسهل فالمتابعة، حيث كيحط صور مصغّرة مرقّمة ومتجاوبة فوق خانة الطلب. التثبيت كيحتاج غير شوية ديال الأوامر، والمعاينات كيبانو مباشرة، ومعالجة الصور كاملة كتبقى محلية. مع نسخة مدعومة من Claude Code وتيرمينال متوافق مع kitty، تقدر تقارن الصور اللي لصقت وترجع ليها بلا ما تعتمد غير على وسوم الصور اللي ممكن تكون مبهمة.