انیمیشن‌های خالص CSS در برابر JS؛ محک سخت‌گیرانه برای هوش مصنوعی

تصور کنید یک برنامه‌نویس را استخدام می‌کنید که ادعا می‌کند در طراحی رابط کاربری متخصص است، اما وقتی ابزارهای کمکی‌اش را می‌گیرید، حتی یک دکمه ساده را هم نمی‌تواند به حرکت درآورد. این دقیقاً همان نقطه‌ای است که Cascade مدل‌های هوش مصنوعی را به چالش می‌کشد تا بفهمند چه کسی واقعاً کد می‌زند و چه کسی فقط الگوهای متنی را تقلید می‌کند. مدلی که برای انیمیشن به جاوااسکریپت متکی است، در کنار همتای رقصان خود، تنها یک فریم یخ‌زده تولید می‌کند وقتی موتور اسکریپتe کشته شود. این فرض اصلی Cascade است؛ یک میدان نبرد دو-مدلی که طراحی شده تا «حس‌های ذهنی» (Vibes) ذهنی را با اثبات ساختاری قابلیت‌ها جایگزین کند. این پروژه که در ۲۷ سپتامبر ۲۰۲۶ منتشر شد، روشی را معرفی می‌کند که در آن سندباکس امنیتی خود مرورگر به عنوان داور عمل می‌کند.

بسیاری از مقایسه‌های فعلی بین مدل‌ها بر اساس بنچمارک‌های لو رفته یا گفتگوهای دست‌چین‌شده است که به‌راحتی قابل دست‌کاری هستند. وقتی یک مدل جدید عرضه می‌شود، مراسم معرفی آشناست: یک عدد بنچمارک بزرگتر، یک ترنسکریپت گلچین شده، یا یک توییتی که ادعا می‌کند «فقط احساس می‌شود که هوشمندتر است». هیچ‌کدام از این‌ها در برابر یک فرد شکاک دوام نمی‌آورند، زیرا بنچمارک‌ها به داده‌های آموزشی نشت می‌کنند و عبارت «احساس می‌شود هوشمندتر است» قابل ابطال نیست. Cascade این مشکل را با استفاده از یک محدودیت حل می‌کند: انیمیشن خالص CSS. این چیزی است که یا در یک محیط محدود از نظر فیزیکی ممکن است، یا نیست.

همان‌طور که در تحلیل‌های قبلی ما درباره‌ی نشت داده‌ها در بنچمارک‌های هوش مصنوعی اشاره کردیم، مدل‌ها اغلب پاسخ‌های درست را حفظ می‌کنند نه اینکه استدلال کنند. Cascade برای حل این مشکل، شبیه به کسی است که برای اثبات برقی بودن یک ماشین، مخزن بنزین را حذف می‌کند؛ اگر ماشین همچنان حرکت کند، دلیلش فقط و فقط موتور الکتریکی است. در اینجا، موتور جاوااسکریپت از خط لوله رندرینگ حذف می‌شود تا فقط ترکیب‌کننده CSS (CSS Compositor) — که مثل یک کارگردان صحنه، دستورات بصری را بدون نیاز به منطق برنامه‌نویسی اجرا می‌کند — باقی بماند. بیننده می‌تواند ببیند که نتیجه واقعی است بدون اینکه به نویسنده اعتماد کند؛ این یک نمایش است که روی ویدیو ضبط می‌شود و در آن تقلب از نظر ساختاری غیرممکن است.

مکانیزم اجرای محیط ایزوله

این سامانه از یک تگ <iframe sandbox=""> با ویژگی sandbox خالی استفاده می‌کند. بر اساس مستندات پروژه، این پیکربندی باعث می‌شود مرورگر با خروجی مدل مانند یک کد مخرب برخورد کند و هرگونه اجرای اسکریپت را مسدود نماید. توجه کنید که چه چیزهایی غایب هستند: هیچ allow-scripts و هیچ allow-same-origin وجود ندارد.

از آنجا که انیمیشن‌های CSS (مانند @keyframes و transitions) در لایه‌ی استایل و خط لوله ترکیب‌کننده مرورگر اجرا می‌شوند و نیازی به موتور اسکریپت ندارند، به کار خود ادامه می‌دهند. اما هر پاسخی که به جاوااسکریپت وابسته باشد — مثلاً استفاده از setInterval — در فریم صفر متوقف می‌شود. در واقع، تولیدکنندگان مرورگر مکانیزم اجرایی را فراهم می‌کنند و Cascade صرفاً آن را قاب‌بندی کرده و یک بنر «JavaScript: DISABLED» برای شفافیت اضافه کرده است.

معماری: واسطه‌ای صادق و سبک

برای تضمین صداقت نتایج، معماری این ابزار از یک سیستم «واسطه سبک» برای مدیریت جریان بین رابط کاربری و مدل‌ها استفاده می‌کند:

• رابط کاربری React (:5173): مدیریت نمایش فرانت‌اند و تعاملات کاربر را بر عهده دارد.
• سرور Express (:3001): برای جلوگیری از مشکلات CORS و محافظت از کلیدهای API، به عنوان بک‌اند عمل می‌کند. مرورگر نمی‌تواند بدون نبردهای CORS به ارائه‌دهندگان محلی مانند Ollama (http://127.0.0.1:11434) یا LM Studio (:1234) دسترسی داشته باشد. علاوه بر این، این ساختار تضمین می‌کند که کلیدهای API هرگز به کد کلاینت ارسال نشوند.
• اجرای هم‌زمان: سرور درخواست‌های سازگار با OpenAI در مسیر /chat/completions را فوروارد می‌کند. این سرور پرامپت‌های یکسان و یک مقدار تصادفی (Nonce) منحصربه‌فرد را به‌طور هم‌زمان به دو جایگاه مدل مختلف می‌فرستد. این کار از جعل قطعیت توسط حافظه پنهان (Cache) پاسخ‌ها جلوگیری می‌کند؛ اگر یک پرامپت تکرار شود، یک Nonce تازه تضمین می‌کند که مدل صرفاً یک پاسخ کش‌شده را برنگرداند.
• پیکربندی مجزا: هر جایگاه (Slot) دارای ارائه‌دهنده، URL پایه، کلید و نام مدل مخصوص به خود است. این امر امکان برگزاری مسابقات بین مدل‌های ابری و محلی را فراهم می‌کند، مانند Particle.ai در برابر Ollama، یا مقایسه یک مدل API جدید در برابر یک نسخه کوانتیده محلی.

حسابرسی فنی و استخراج کد

پیش از آنکه کد به رابط کاربری برسد، سرور یک حسابرسی استاتیک روی بایت‌های خام انجام می‌دهد. کد HTML استخراج شده، دقیقاً همان بایت‌ها حسابرسی می‌شوند، CSS با استفاده از postcss تجزیه می‌گردد و هش SHA-256 نتیجه محاسبه می‌شود. در حالی که سندباکس محدودیت را اجرا می‌کند، حسابرسی دقیقاً گزارش می‌دهد که مدل چگونه سعی کرده است تقلب کند.

تخلفات به دو دسته تقسیم می‌شوند:

• رد صلاحیت (Disqualifications): وجود تگ‌های <script> یا ویژگی‌های هندلر رویداد on* (مانند onclick) منجر به دریافت فوری برچسب قرمز «رد صلاحیت» می‌شود. برای جلوگیری از مثبت‌های کاذب، بررسی on* ابتدا بلوک‌های <style> را حذف می‌کند تا ویژگی‌های CSS که حاوی حروف "on" هستند، به اشتباه علامت‌گذاری نشوند.
• تخلفات (Violations): استفاده از تگ‌های <iframe>، <canvas>، <svg>، <video>، <audio>، <object>، <embed>، <img> یا قوانین @import به عنوان تخلف ثبت می‌شوند. این موارد به صورت برچسب گزارش می‌شوند اما لزوماً باعث رد صلاحیت خروجی نمی‌شوند، مگر اینکه منجر به اجرای کد گردند.

برای مدیریت ماهیت نامنظم خروجی‌های LLM، Cascade از یک مسیر استخراج چندمرحله‌ای استفاده می‌کند. سیستم ابتدا به دنبال HTML در حصارهای ```html می‌گردد، سپس حصارهای عمومی حاوی نشانه‌گذاری (Markup)، سپس تگ‌های <html/doctype، سپس تگ‌های <style> و در نهایت متن خام. مقدار extractionPath همراه با هر نتیجه ارسال می‌شود تا اگر پاسخی به شکل عجیبی رندر شد، توسعه‌دهنده بتواند دقیقاً ببیند HTML چگونه بازیابی شده است.

یکپارچگی با ارائه‌دهندگان و شفافیت

این ابزار از طیف گسترده‌ای از ارائه‌دهندگان از جمله Particle.ai، OpenRouter، Ollama و LM Studio پشتیبانی می‌کند. این سیستم پیچیدگی‌های دنیای واقعی ارائه‌دهندگان را مستقیماً در تابع callSlot() کدگذاری کرده است. برای مثال، تنها مدل‌های Particle.ai و DeepSeek فیلد chat_template_kwargs را برای غیرفعال کردن استدلال (enable_thinking: false) درک می‌کنند.

برای حفظ شفافیت در مورد مدل‌های «متفکر»، سیستم مقدار usage.completion_tokens_details.reasoning_tokens را از پاسخ API می‌خواند. اگر موجود باشد نمایش داده می‌شود، در غیر این صورت عبارت "n/a" ظاهر می‌شود. نکته حیاتی این است که محتوای واقعی استدلال (reasoning_content) یا همان متن زنجیره تفکر (Chain-of-Thought)، در تابع callSlot() دور ریخته می‌شود؛ این متن هرگز لاگ نمی‌شود، نمایش داده نمی‌شود و ذخیره نمی‌گردد.

ارگونومی مدل‌های محلی نیز در اولویت قرار دارد. اگر یک نمونه Ollama خاموش باشد، سیستم به جای یک خطای کلی، متن واقعی خطا را برمی‌گرداند («Cannot reach http://127.0.0.1:11434»). علاوه بر این، اجرای مدل‌ها مشروط به موفقیت در مسیر /models نیست، که اجازه می‌دهد مدل‌هایی مانند deepseek-v4-flash-0731 حتی اگر در لیست رسمی ارائه‌دهنده نباشند، کار کنند.

ماشین CSS و آزمون مسموم

پنل کناری در Cascade ویژگی‌های خاص CSS استفاده شده، مانند conic-gradient یا @keyframes beat را لیست می‌کند. این‌ها گلچین نشده‌اند، بلکه با استفاده از postcss از دل بلوک‌های <style> واقعی پاسخ استخراج شده‌اند. با شمارش گره‌های atrule و rule ، سیستم مقایسه بصری را بر پایه تکنیک واقعی بنا می‌کند.

برای اثبات کارکرد سیستم، Cascade یک دکمه محدودیت «Verify» شامل یک آزمون مسموم (Poison Test) دارد. این دکمه یک انیمیشن از پیش تعیین شده مبتنی بر setInterval را به /api/audit می‌فرستد. سیستم باید وضعیت «رد صلاحیت» (به دلیل تگ <script>) را برگرداند و یک تصویر یخ‌زده در سندباکس رندر کند.

تأیید نهایی همچنین شامل موارد زیر است:

• اثبات حرکت: یک پیش‌فرض «اسپینر لودینگ» باید در هر دو پنل در حالی که JS غیرفعال است، به وضوح حرکت کند.
• واگرایی: هش‌های SHA-256 و تعداد قوانین CSS باید بین دو جایگاه متفاوت باشد تا اطمینان حاصل شود که سیستم یک رشته یکسان را دو بار رندر نمی‌کند.
• تأیید DOM: یک بررسی زنده تضمین می‌کند که در هر فریم پیش‌نمایش، sandbox === "" باشد.

این رویکرد، بنچمارک را از یک امتیاز عددی به یک نمایش عملی تبدیل می‌کند. با ضبط فرآیند روی ویدیو، سازنده تضمین می‌کند که تقلب به جای آنکه صرفاً توسط مجموعه‌ای از قوانین ممنوع باشد، از نظر ساختاری غیرممکن است.

برای توسعه‌دهندگان، این موضوع فرض را تغییر می‌دهد که بنچمارک‌ها باید مجموعه‌داده‌های بزرگی باشند. این ثابت می‌کند که یک تکلیف فنی واحد و بسیار محدود می‌تواند افشاگرتر از هزاران سؤال چهارگزینه‌ای باشد. این صنعت را به سمت ارزیابی‌های «اثبات کار» (Proof-of-Work) برای مدل‌های کدنویسی سوق می‌دهد. اگر در حال تست یک مدل محلی جدید هستید، سعی کنید یک چالش «CSS خالص» را پیاده‌سازی کنید تا ببینید آیا واقعاً DOM را می‌فهمد یا صرفاً الگوهای جاوااسکریپت را تقلید می‌کند. شما می‌توانید پیاده‌سازی کامل پروژه را در مخزن dailybuild.xyz بررسی کنید.

گام بعدی شما

• اگر از مدل‌های محلی استفاده می‌کنید، یک چالش «CSS خالص» برای آن‌ها طراحی کنید تا ببینید آیا واقعاً ساختار DOM را می‌فهمند یا فقط الگوهای جاوااسکریپت را تقلید می‌کنند.
• مخزن پروژه در dailybuild.xyz را بررسی کنید تا نحوه پیاده‌سازی محیط‌های ایزوله (Sandbox) را بیاموزید.
• در تست‌های بعدی خود، به جای تکیه بر پاسخ‌های متنی، خروجی‌های مدل را در محیط‌های محدود شده (Constrained Environments) آزمایش کنید.

اما تأثیر این نوع ارزیابی‌ها بر آینده مدل‌های استدلالی حتی عمیق‌تر است — به تحلیل ما درباره‌ی مدل‌های Reasoning مراجعه کنید.