خبر و ترفند روز

خبر و ترفند های روز را اینجا بخوانید!

فقط چند نماگرفت از یک برنامه به کلود، کدکس و آنتی‌گرویتی دادم؛ یکی از آن‌ها برنامه را تقریباً پیکسل‌به‌پیکسل بازسازی کرد

بازسازی تقریباً پیکسل‌به‌پیکسل یک برنامه به‌دست یکی از سه ابزار Claude، Codex و Antigravity، تنها با دیدن تصاویر
توسعهٔ رابط کاربری دارد عجیب‌وغریب می‌شود

کدنویسی بر پایهٔ حس‌وحال، ملزومات ساخت نرم‌افزار را به‌کلی دگرگون کرده است. تا همین چندی پیش، کسی که دانش فنی اندکی داشت یا اصلاً با این حوزه آشنا نبود، ناچار بود ساعت‌ها آموزش کدنویسی ببیند، مبانی یک زبان برنامه‌نویسی را یاد بگیرد و بعد هم زمان بیشتری صرف کند تا بفهمد چرا کدش از کار کردن سر باز می‌زند.

حالا کافی است خواسته‌تان را با زبان سادهٔ انگلیسی شرح دهید، یک عامل هوش مصنوعی کدنویس را در مسیر درست بیندازید و بی‌آنکه تک‌تک خط‌های زیرساخت آن را درک کنید، به محصولی کاربردی برسید. اما اکنون بسیار فراتر از دورانی رفته‌ایم که مدل‌های زبانی بزرگ فقط در پشت صحنه چند خط کد تحویل می‌دادند. مدل‌های کدنویسی در جنبه‌های بصری توسعه نیز به‌شکل چشمگیری توانمندتر شده‌اند.

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

عمداً برنامه‌ای را برگزیدم که مدل‌ها احتمالاً نمی‌شناختند

آشنایی قبلی، آزمون را بی‌اعتبار می‌کرد

نمای تصویر شماره IMG_3690

ابتدا فکر می‌کردم سراغ برنامه‌ای بروم که کمی پیچیده‌تر، اما در عین حال شناخته‌شده باشد؛ مثلاً یک شبکهٔ اجتماعی مانند اینستاگرام یا اسنپ‌چت، یا برنامه‌ای با ظاهر متمایز مانند گوگل مپس که بازسازی باورپذیر رابطش واقعاً چالش‌برانگیز باشد.

مشکل این بود که مدل‌ها به‌احتمال زیاد از پیش با همهٔ این برنامه‌ها آشنایی زیادی داشتند. حتی اگر فقط نماگرفت‌ها را در اختیارشان می‌گذاشتم، باز هم این پرسش باقی می‌ماند که آیا رابط کاربری را بر پایهٔ آنچه می‌بینند مهندسی معکوس می‌کنند یا صرفاً به دانسته‌های قبلی خود دربارهٔ ظاهر برنامه تکیه دارند.

به نظرم این کار تمام هدف آزمایش را از میان می‌برد؛ بنابراین عمداً برنامه‌ای کمتر شناخته‌شده را انتخاب کردم که احتمالاً بیشتر مردم حتی نامش را هم نشنیده‌اند: فوکوس. این برنامهٔ متن‌باز برای تمرکز طراحی شده و با مسدود کردن برنامه‌های حواس‌پرت‌کن، کمک می‌کند از گوشی‌تان فاصله بگیرید. مهم‌تر از آن، برای این آزمون رابطی تمیز و متمایز دارد، بی‌آنکه آن‌قدر پیچیده باشد که مقایسه به آزمونی برای مهندسی بخش پشتی تبدیل شود.

فوکوس به معنای مرسوم نیز برنامهٔ شناخته‌شده‌ای نیست. البته چون این پروژه متن‌باز است، یک مدل زبانی بزرگ از نظر فنی می‌توانست کد منبعش را پیدا کند، اما در جریان آزمون چنین اجازه‌ای ندادم. برای هر ابزار از دستور زیر استفاده کردم:

مطلب مرتبط:   نحوه بزرگ کردن متن به صورت خودکار در 4 برنامه محبوب پردازش کلمه

مجموعه‌ای از نماگرفت‌ها در پوشهٔ منابع در اختیار شما قرار گرفته است.

برنامهٔ نشان‌داده‌شده در این نماگرفت‌ها را با استفاده از React، تا حد امکان دقیق بازسازی کنید.

هدف شما دستیابی به بیشترین شباهت بصری با نماگرفت‌های مرجع است. چیدمان، حروف‌چینی، رنگ‌ها، فاصله‌ها، اندازه‌ها، اجزا و طراحی کلی را مستقیماً از روی نماگرفت‌ها استنباط کنید.

الزامات:

  • همهٔ صفحه‌های نشان‌داده‌شده در تصاویر مرجع را بسازید.
  • در صورت لزوم، ناوبری میان صفحه‌های بازسازی‌شده را کاربردی کنید.
  • حالت‌ها و تعاملات قابل‌مشاهدهٔ رابط کاربری را تا جایی که به‌طور منطقی ممکن است، بازسازی کنید.
  • برای هر بخشی که در حالت عادی به بخش پشتی یا قابلیت‌های سطح سیستم‌عامل نیاز دارد، از داده‌های محلی یا ساختگی استفاده کنید.
  • رابط را از نو طراحی نکنید، ساده‌تر نسازید و بهبود ندهید. آن را تا حد امکان با نماگرفت‌ها منطبق کنید.
  • برای یافتن برنامهٔ اصلی، وب، GitHub، مستندات یا هیچ منبع بیرونی دیگری را جست‌وجو نکنید.
  • برای یافتن کد منبع برنامه تلاش نکنید.
  • پیاده‌سازی خود را تنها بر نماگرفت‌های ارائه‌شده استوار کنید.
  • می‌توانید پیاده‌سازی خود را در مرورگر بررسی کنید و در صورت نیاز، بارها آن را اصلاح کنید.
  • اصلاح پیاده‌سازی را تا زمانی ادامه دهید که مطمئن شوید با نمونه‌های مرجع شباهت نزدیکی دارد.

پس از پایان کار، مطمئن شوید پروژه با موفقیت اجرا می‌شود و همهٔ صفحه‌های بازسازی‌شده در دسترس‌اند.

من از نسخهٔ خط فرمان هر سه ابزار استفاده کردم و هرکدام را در پوشه‌ای جداگانه، با مجموعه‌ای کاملاً یکسان از تصاویر مرجع، راه انداختم. برای Claude Code از Opus ۵، برای Codex از GPT-۶ Sol و برای Antigravity از Gemini ۳.۱ Pro استفاده کردم و توان استدلال پیشرفته را نیز در هر سه فعال نگه داشتم.

کدکس، بهترین گزینهٔ همه‌فن‌حریف بود

البته یک اشتباه خنده‌دار هم داشت

مدتی پیش در XDA مقاله‌ای نوشتم و توضیح دادم که Codex تقریباً در همه‌چیز عالی عمل می‌کند، جز کارهای فرانت‌اند. اما از آن زمان، OpenAI به سراغ خانوادهٔ جدیدتر GPT-۶، شامل Astra، Sol و Luna، رفته و تفاوت عملکرد آن در فرانت‌اند کاملاً محسوس است. برای این آزمون از GPT-۶ Sol استفاده کردم؛ مدلی که به‌طور ویژه برای برنامه‌نویسی پیچیده‌تر و گردش‌کارهای عامل‌محور ساخته شده است.

از میان هر سه ابزار، نتیجهٔ Codex با اختلاف به نسخهٔ اصلی نزدیک‌تر بود. بااین‌حال، پیش از پرداختن به همهٔ کارهایی که درست انجام داد، باید به بامزه‌ترین اشتباهش اشاره کنم: به‌جای آنکه نام برنامه را Foqos بگذارد، به‌طرزی نامعلوم تصمیم گرفته بود آن را Fogos بنامد.

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

مطلب مرتبط:   8 ترفند مفهومی قدرتمند برای سرعت بخشیدن به گردش کار

در نماگرفت‌هایی که در اختیارش گذاشتم، دکمهٔ پشتیبانی از نماد سادهٔ قلب استفاده می‌کرد و Codex آن را طوری بازسازی کرد که واقعاً جزئی از رابط کاربری به نظر می‌رسید. در مقابل، Claude آن را با یک شکلک قلب قرمز واقعی جایگزین کرد که در میان رابط خوش‌ساخت برنامه فوراً به چشم می‌آمد. عملکرد Antigravity در این مورد جایی میان این دو قرار داشت.

همین موضوع دربارهٔ دیگر عناصر رابط کاربری نیز صدق می‌کرد. Codex جزئیات کوچک را همواره همچون اجزای واقعی رابط بازسازی می‌کرد، نه صرفاً نمونه‌هایی تقریبی. نماد تنظیمات، دکمه‌ها، حاشیهٔ کارت‌ها و بخش نمایه در ساختهٔ آن بسیار به مرجع نزدیک‌تر بودند؛ درحالی‌که Claude و Antigravity بیشتر به استفاده از نمادهای عمومی یا برداشت دوباره و اندکی متفاوت از سبک ظاهری گرایش داشتند. برای نمونه، Claude هرجا می‌توانست یک شکلک اضافه کرده بود!

از نظر قلم‌ها و حروف‌چینی کلی نیز Codex نزدیک‌ترین نتیجه را ارائه داد. اندازه، ضخامت و سلسله‌مراتب نوشته‌ها بسیار وفادارتر به نسخهٔ اصلی بود؛ درحالی‌که Claude برخی عناصر را کمی بزرگ‌تر ساخته بود و Antigravity در مجموع ظاهر محافظه‌کارانه‌تری داشت. هیچ‌کدام همهٔ جزئیات را بی‌نقص بازسازی نکردند، اما Codex تنها ابزاری بود که می‌توانستم بی‌آنکه فوراً متوجه ایرادی شوم، نگاهم را میان تصویر مرجع و نسخهٔ بازسازی‌شده جابه‌جا کنم.

کلود کار قابل‌قبولی انجام داد

جایی خلاقیت به خرج داد که اصلاً نمی‌خواستم

گذشته از نکاتی که پیش‌تر گفتم، به‌گمانم Claude در مجموع عملکرد نسبتاً خوبی داشت. در واقع، تنها گزینه از میان این سه بود که برخی کنترل‌های بازسازی‌شده را واقعاً تعاملی کرد؛ کلیدها را می‌شد روشن و خاموش کرد و صرفاً عناصر ثابت رابط کاربری نبودند. جای‌گذاری دکمه‌ها نیز عموماً به تصویر مرجع نزدیک بود و ساختار کلی صفحه‌ها منطقی به نظر می‌رسید.

آنچه Claude را از Codex عقب انداخت، بیشتر جزئیات بصری کوچک بود. انتخاب نمادهای آکنده از شکلک آشکارترین نمونه به شمار می‌رفت، اما در چند بخش نیز فاصله‌گذاری، حروف‌چینی و اندازه‌ها در مقایسه با نسخهٔ اصلی کمی نادرست به نظر می‌رسیدند. هیچ ایراد فاحشی وجود نداشت، ولی وقتی آن را کنار تصویر مرجع می‌گذاشتم، بیشتر شبیه بازسازی بسیار خوبی بود تا نسخه‌ای تقریباً مو‌به‌مو.

بااین‌همه، این تنها نتیجه‌ای بود که در آن توهمی آشکار دیدم! بخش نمایه‌های جدیدی که در اختیارش گذاشته بودم، فقط این قسمت‌ها را در بر می‌گرفت: نام، راهبرد مسدودسازی و برنامه‌های مسدودشده. من نماگرفتی از صفحهٔ کامل ارائه نکرده بودم. Codex و Antigravity به همان گزینه‌های دیده‌شده در نماگرفت پایبند ماندند، اما Claude خودسرانه بخشی با عنوان «گزینه‌ها» افزود که دو کلید داشت: «فعال‌سازی فعالیت زنده» و «حالت سخت‌گیرانه».

ازآنجاکه این گزینه‌ها واقعاً در برنامهٔ اصلی وجود دارند، کنجکاو شدم بدانم آیا Claude برخلاف دستورهایم به‌نحوی دربارهٔ Foqos جست‌وجو کرده است یا نه. بنابراین، مستقیم از خودش پرسیدم. Claude پاسخ داد که اصلاً وب را جست‌وجو نکرده و هر دو ردیف را بر پایهٔ الگوهای رایج در برنامه‌های تمرکز ساخته است.

مطلب مرتبط:   بررسی Elgato Stream Deck Neo: کاربرپسندترین Stream Deck برای مبتدیان

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

آنتی‌گراویتی ایراد بزرگی نداشت، اما باز هم آخر شد

ظاهر خوبی داشت، اما به‌اندازهٔ کافی نزدیک نبود

شاید انتقاد از آنتی‌گراویتی از همه دشوارتر بود، چون نتیجه‌اش واقعاً ایراد مشخصی نداشت. ظاهر برنامه پرداخت‌شده بود، صفحه‌ها ساختار درستی داشتند و در نگاه نخست هیچ‌چیز خراب یا نامتعارفی به چشم نمی‌آمد.

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

برای نمونه، آنتی‌گراویتی برخی نشانه‌های رنگی ظریف‌ترِ تصویر مرجع را از قلم انداخته بود. کدکس و کلود هر دو متوجه شده بودند که برای متمایز کردن بعضی خانه‌ها در بخش‌هایی از شبکه فعالیت، از طیف‌های کمی روشن‌ترِ بنفش استفاده شده است؛ اما آنتی‌گراویتی این بخش را بسیار یکدست‌تر نمایش داده بود. جزئیات کوچکی است، ولی وقتی نسخه‌ها را کنار هم می‌گذاشتیم، نتیجه آنتی‌گراویتی به‌وضوح تخت‌تر و کم‌وفادارتر به نسخه اصلی به نظر می‌رسید.

باز هم باید گفت که نتیجه آنتی‌گراویتی ایرادی نداشت، اما هیچ ویژگی خاصی هم در آن نبود که مرا به مکث وادارد و با خودم بگویم تصویر مرجع را تمام‌وکمال بازآفرینی کرده است. از آنجا که هدف اصلی این آزمایش، یافتن ابزاری بود که بتواند بیش از همه به تصاویر نزدیک شود، همین تفاوت‌های کوچک روی هم انباشته شدند و در نهایت آنتی‌گراویتی را در جایگاه آخر قرار دادند.

در نهایت، این آزمایش فوق‌العاده جالب بود؛ چون هر سه ابزار بسیار بیشتر از آنچه انتظار داشتم به نمونه اصلی نزدیک شدند. هیچ‌کدام نسخه‌ای بی‌نقص نساختند، اما همگی توانستند تنها با تکیه بر تصاویر، جزئیات شگفت‌انگیزی را استنباط کنند؛ از چیدمان، فاصله‌گذاری و رنگ‌ها گرفته تا ساختار اجزا و حتی برخی تعامل‌ها!

منبع: این مطلب ترجمه و بومی‌سازی مقاله‌ای از MakeUseOf به قلم Mahnoor Faisal است. مشاهده مقاله اصلی