في وضع ملء الشاشة، تتداخل شريط الهروب أحيانًا مع المحتوى، مما يجعل التفاعل معه مستحيلًا.
في بعض الأحيان، لا يظهر “تشغيل القطع الأثرية” على الفور، ولكنه يظهر بمجرد تحريك مؤشر الماوس فوق أيقونات المنشور على سبيل المثال (يبدو).
كان لدي حالة واحدة فقط لم يتم فيها عرض أي نتيجة. رأيت المؤشر، ثم لم يحدث شيء.
بشكل عام، يعمل بشكل جيد جدًا.
إليك بعض العروض التوضيحية.
ليس من السهل جدًا الحصول على عرض توضيحي جيد. كالعادة، كلما كان الموجه أكثر تفصيلاً، كان ذلك أفضل.
في بعض الأحيان، تكون الدقة الإضافية مطلوبة. لا يتضمن دائمًا جميع الموارد، أو لا يستجيب، أو يتطلب رمزًا للانتظار حتى يتم تحميل الصفحة. أيضًا، يؤدي استخدام المكتبات الخارجية إلى زيادة فرصة الفشل.
لقد استمتعت بهذه الميزة أكثر من اللازم.
موجه (محاكاة حركة المقذوف)
أنشئ صفحة لمحاكاة حركة المقذوف. يجب أن تقوم الصفحة بما يلي:
السماح للمستخدمين بإدخال السرعة الأولية وزاوية وارتفاع المقذوف.
استخدام أشرطة تمرير لضبط معلمات الإدخال في الوقت الفعلي.
تضمين زر “إعادة تعيين” للبدء من جديد.
فيديو
موجه (لعبة سقوط الرموز التعبيرية)
أنشئ صفحة يختار فيها المستخدمون مزاجهم، وتبدأ الرموز التعبيرية في التساقط على الشاشة. يجب أن تقوم الصفحة بما يلي:
توفير خيارات مزاج مثل “سعيد” أو “متجهم” أو “بيتزا”.
جعل الرموز التعبيرية مثل أو أو تتساقط بلا نهاية من أعلى الشاشة.
السماح للمستخدمين بالنقر على الرموز التعبيرية “لجمعها” مع مؤثر صوتي مضحك.
تضمين عداد سخيف مثل “شرائح البيتزا المجمعة: 27”.
استخدام HTML و CSS و JavaScript للمتعة المتحركة.
فيديو
موجه (عارض بسيط للنظام الشمسي)
أنشئ صفحة لتصوير النظام الشمسي. يجب أن تقوم الصفحة بما يلي:
عرض نظام شمسي متحرك ومفصل بمقياس مصغر يوضح مدارات الكواكب.
السماح للمستخدمين بالنقر على كوكب لعرض معلومات مثل الحجم والمسافة من الشمس وفترة الدوران.
السماح للمستخدمين بالتكبير والتصغير.
تضمين شريط تمرير لتسريع أو إبطاء حركة الدوران.
استخدام HTML و CSS و JavaScript للتفاعل والرسوم المتحركة.
التأكد من أن الحاوية تستخدم عرضًا وارتفاعًا بنسبة 100٪.
فيديو
موجه (ملعب رسوم CSS)
أنشئ صفحة يمكن للمستخدمين فيها تجربة الرسوم المتحركة والانتقالات باستخدام CSS. يجب أن تقوم الصفحة بما يلي:
عرض عناصر مختلفة (مثل الأزرار، مربعات التقسيم) يمكن للمستخدمين تحريكها باستخدام CSS.
السماح للمستخدمين بالاختيار من قائمة خصائص الرسوم المتحركة (مثل التحويل، التعتيم، الانتقال، الدوران).
توفير أشرطة تمرير لضبط المدة ووظيفة التوقيت وتأخير الرسوم المتحركة.
السماح للمستخدمين بمعاينة الرسوم المتحركة في الوقت الفعلي ومعرفة كيف تؤثر التغييرات على الرسوم المتحركة.
استخدام JavaScript لتحديث خصائص CSS ديناميكيًا و HTML / CSS للتصميم.
فيديو
موجه (لوحة معلومات بيانات تفاعلية)
أنشئ صفحة تصور لوحة معلومات بيانات مع رسوم بيانية تفاعلية. يجب أن تقوم الصفحة بما يلي:
عرض رسوم بيانية متعددة، مثل رسم بياني شريطي، ورسم بياني خطي، ورسم بياني دائري، يمثل كل منها مجموعات بيانات مختلفة (مثل المبيعات، السكان، بيانات الطقس).
السماح للمستخدمين بتصفية البيانات حسب النطاق الزمني أو الفئة أو الموقع باستخدام قوائم منسدلة أو أشرطة تمرير.
تحديث الرسوم البيانية في الوقت الفعلي أثناء تفاعل المستخدمين مع عوامل التصفية.
عرض إحصائيات وصفية (مثل المتوسط، الوسيط، المنوال) للبيانات المحددة.
استخدام Chart.js أو D3.js لعرض الرسوم البيانية و JavaScript لمعالجة تصفية البيانات والحسابات الإحصائية.
هل سيعمل مع استعلامات مستكشف البيانات المشتركة عالميًا (مستوى الثقة 0) التي يتم الوصول إليها عبر واجهة برمجة التطبيقات؟ إذا كان الأمر كذلك، فلديه بعض الإمكانات لتوليد تصورات ممتعة وديناميكية لنشاط المنتدى.
لم يكن لدي الوقت لاختباره بنفسي، ولكن ربما يشعر شخص ما بتجربته لهذا الاستخدام
يمكنك توصيله بأداة مخصصة، سيكون الأمر يتطلب قدرًا كبيرًا من المناورة، ولكن ربما سأقوم فقط بإنشاء الأداة المخصصة لعرض الرسم البياني بطريقة ما في حالة الاستخدام هذه، يمكننا اللعب بهذه الفكرة
يمكنك بالتأكيد مشاركة التصورات، سأريك
نعم، هذا صحيح ليس فقط بالنسبة لـ AI Web Artifacts ولكن أيضًا عند استخدام LLM لإنشاء HTML و JavaScript و CSS.
إذا كان بإمكان المرء الحفاظ على التطوير كـ HTML و JavaScript و CSS عاديين/فانيليا، مما يعني أنه لا يتضمن أي مكتبات خارجية، فإن فرص الحصول على كود يعمل وخالٍ من الأخطاء تزداد بشكل كبير. أيضًا، كلما كانت المكتبة أكثر غموضًا، فهذا يعني أن النموذج تلقى بيانات تدريب أقل، وكلما زاد احتمال أن يتخيل النموذج لإكمال الرد، وبالتالي المزيد من الأخطاء.
بصفتي مستخدمًا منتظمًا لمنتدى OpenAI، أرى الكثير من تقلبات النماذج. خلال الأسبوعين الماضيين، زادت التقارير عن المشاكل، لكن هذه المشاكل تذكرنا بالمشاكل التي تحدث قبل إصدار رئيسي أو نماذج جديدة.
في تجربتي المحدودة، باستخدام Claude 3.5 Sonnet، كنت أتبادل الحوار ذهابًا وإيابًا مع Web Creator وأحقق بعض التقدم، لكنه في النهاية يبدأ في النسيان وأضطر إلى البدء من جديد في جلسة جديدة. أشعر أنه سيكون من الأسهل لمس الكود يدويًا بدلاً من إضاعة المطالبات والمخاطرة بالنسيان.
هل يمكنني تعديل الكود الذي تم إنشاؤه؟
هل يمكنني بدء سياق جديد بقطعة أثرية موجودة؟ (سألت Web Creator وقال لا.)
نعم مارك، هذه مشكلة صعبة، أعمل على إعادة تصميم الأجزاء الداخلية للأثر:
كما أزعجتني التعديلات غير المستقرة بلا نهاية. ما زلت أقرر عدد الخيارات التي سأقدمها.
لقد نقلت النظام إلى نهج مشابه لـ “Aider” مثل “Architect”، حيث تستدعي الأداة نموذج لغوي كبير (LLM) لإجراء التحديثات، لذا فهي قادرة على القيام بذلك بشكل أكثر موثوقية ولا توجد مشكلة انحراف بعد الآن. الجانب السلبي هو أن النظام الجديد قد يستخدم المزيد من الرموز المميزة بسبب وجود مستوى من الازدواجية التي لا مفر منها.
قد أسمح لك بالبدء بأثر موجود (جعله يستنسخه) إذا تمت مشاركة الأثر علنًا… سأفكر في كيفية تحقيق ذلك، أحتاج إلى توخي الحذر الشديد بشأن الأمان.
عادةً، عندما أقوم بالتكرار باستخدام Web Creator، فإنه يقول شيئًا مثل “سأقوم بتحديث القطعة الأثرية بالميزة الجديدة” ثم يكتب كتلًا من HTML و CSS و JavaScript، ثم يعرض القطعة الأثرية المحدثة حتى أتمكن من تشغيل القطعة الأثرية.
اليوم، يقول باستمرار “سأقوم بتحديث القطعة الأثرية” ويكتب كتل التعليمات البرمجية، ولكنه يحذف بعد ذلك التعليمات البرمجية والقطعة الأثرية (إذا قام بإنشائها بالفعل). لذا أترك بـ “سأقوم بتحديث القطعة الأثرية”. حتى لو قمت بتحرير منشور المبدع، فهذا كل ما يوجد.
لم أقم بتحديث أو تغيير أي شيء. لا توجد أخطاء في وحدة التحكم. Claude 3.5 Sonnet.
أو 
تتساقط بلا نهاية من أعلى الشاشة.
