یک رویکرد زبان بینایی برای درک اساسی رابط کاربری – وبلاگ هوش مصنوعی گوگل

ارسال شده توسط یانگ لی، دانشمند پژوهش، و گانگ لی، مهندس نرم افزار، تحقیقات گوگل

درک محاسباتی رابط های کاربر (UI) گامی کلیدی برای دستیابی به رفتارهای UI هوشمند است. قبلاً، ما وظایف مختلف مدل‌سازی رابط کاربری، از جمله شرح ویجت، خلاصه‌سازی صفحه، و زمین‌بندی فرمان را بررسی کردیم که سناریوهای تعامل متنوعی مانند اتوماسیون و دسترسی را بررسی می‌کنند. ما همچنین نشان دادیم که چگونه یادگیری ماشینی می‌تواند با تشخیص آشفتگی قابلیت لمس و ارائه بینش‌هایی برای بهبود طراحی UI، به متخصصین تجربه کاربر کمک کند تا کیفیت رابط کاربری را بهبود بخشند. این آثار همراه با کارهایی که توسط دیگران در این زمینه ایجاد شده‌اند نشان داده‌اند که چگونه شبکه‌های عصبی عمیق می‌توانند تجربیات کاربر نهایی و عمل طراحی تعامل را تغییر دهند.

با این موفقیت‌ها در پرداختن به تکالیف UI، یک سوال طبیعی این است که آیا می‌توانیم درک اساسی از رابط‌های کاربری به دست آوریم که می‌تواند برای وظایف UI خاص مفید باشد. به عنوان اولین تلاش ما برای پاسخ به این سوال، ما یک مدل چند وظیفه ای را برای رسیدگی به طیف وسیعی از وظایف UI به طور همزمان ایجاد کردیم. اگرچه این کار تا حدودی پیشرفت کرد، اما چند چالش باقی مانده است. مدل‌های رابط کاربری قبلی به شدت به سلسله‌مراتب نمای رابط کاربری متکی هستند – به عنوان مثال، ساختار یا ابرداده یک صفحه رابط کاربری تلفن همراه مانند مدل شیء سند برای یک صفحه وب – که به مدل اجازه می‌دهد مستقیماً اطلاعات دقیقی از اشیاء رابط کاربری روی صفحه (مثلاً انواع آنها) به دست آورد. ، محتوای متن و موقعیت). این ابرداده به مدل‌های قبلی برتری‌هایی نسبت به همتایان فقط بینایی خود داده است. با این حال، سلسله مراتب نماها همیشه قابل دسترسی نیستند و اغلب با توضیحات اشیاء از دست رفته یا اطلاعات ساختار نامناسب خراب می شوند. در نتیجه، علیرغم دستاوردهای کوتاه مدت استفاده از سلسله مراتب دید، ممکن است در نهایت عملکرد و کاربرد مدل را مختل کند. علاوه بر این، مدل‌های قبلی مجبور بودند با اطلاعات ناهمگن در میان مجموعه‌های داده و وظایف رابط کاربری سروکار داشته باشند، که اغلب منجر به معماری‌های مدل پیچیده‌ای می‌شد که مقیاس‌بندی یا تعمیم در بین وظایف دشوار بود.

در «Spotlight: Mobile UI Understanding with Vision-Language Models with a Focus» که برای انتشار در ICLR 2023 پذیرفته شده است، ما یک رویکرد فقط چشم انداز را ارائه می دهیم که هدف آن دستیابی به درک کلی رابط کاربری به طور کامل از پیکسل های خام است. ما یک رویکرد یکپارچه را برای نشان دادن وظایف مختلف رابط کاربری معرفی می‌کنیم، که اطلاعات مربوط به آن را می‌توان به صورت جهانی با دو روش اصلی نمایش داد: دید و زبان. حالت بینایی آنچه را که یک فرد از صفحه رابط کاربری می بیند، به تصویر می کشد، و حالت زبان می تواند زبان طبیعی یا هر توالی نشانه مرتبط با کار باشد. ما نشان می‌دهیم که Spotlight به‌طور قابل‌توجهی دقت را در طیف وسیعی از وظایف UI، از جمله شرح‌نویسی ویجت، خلاصه‌سازی صفحه، زمین‌گذاری فرمان و پیش‌بینی قابلیت لمس، بهبود می‌بخشد.

مدل Spotlight

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

از آنجایی که وظایف UI اغلب مربوط به یک شی یا ناحیه خاص روی صفحه است، که نیاز به یک مدل برای تمرکز بر روی شی یا ناحیه مورد علاقه دارد، ما یک Focus Region Extractor را به یک مدل زبان بینایی معرفی می کنیم که مدل را قادر می سازد تا با توجه به زمینه صفحه، روی منطقه تمرکز کنید.

به طور خاص، ما یک خلاصه‌کننده منطقه طراحی می‌کنیم که با استفاده از جستارهای توجه تولید شده از جعبه مرزی منطقه، یک نمایش نهفته از یک منطقه صفحه را بر اساس رمزگذاری‌های ViT به دست می‌آورد (برای جزئیات بیشتر به مقاله مراجعه کنید). به طور خاص، هر مختصات (یک مقدار اسکالر، به عنوان مثال، سمت چپ، بالا، راست یا پایین) کادر محدود، که به عنوان یک کادر زرد در تصویر نشان داده شده است، ابتدا از طریق یک پرسپترون چند لایه (MLP) به عنوان مجموعه ای از بردارهای متراکم جاسازی می شود. ، و سپس به مدل ترانسفورماتور در امتداد جاسازی نوع مختصات آنها تغذیه می شود. بردارهای متراکم و جاسازی‌های نوع مختصات مربوطه آن‌ها برای نشان دادن وابستگی آنها به هر مقدار مختصات، کد رنگی دارند. پرس و جوهای مختصات سپس به خروجی کدگذاری صفحه توسط ViT از طریق توجه متقاطع توجه می کنند و خروجی توجه نهایی ترانسفورماتور به عنوان نمایش منطقه برای رمزگشایی پایین دستی توسط T5 استفاده می شود.

یک منطقه هدف روی صفحه با استفاده از جعبه محدود کننده آن برای جستجو در کدگذاری های صفحه از ViT از طریق مکانیسم های توجه خلاصه می شود.

نتایج

ما مدل Spotlight را با استفاده از دو مجموعه داده بدون برچسب (یک مجموعه داده داخلی مبتنی بر پیکره C4 و یک مجموعه داده داخلی تلفن همراه) با 2.5 میلیون صفحه رابط کاربری تلفن همراه و 80 میلیون صفحه وب از قبل آموزش می‌دهیم. سپس مدل از پیش آموزش‌دیده‌شده را برای هر یک از چهار کار پایین‌دستی (شرح‌نویسی، خلاصه‌سازی، زمینه‌سازی، و قابلیت ضربه زدن) به‌طور جداگانه تنظیم می‌کنیم. برای شرح‌نویسی ویجت و وظایف خلاصه‌سازی صفحه، ما نمرات CIDEr را گزارش می‌کنیم، که اندازه‌گیری می‌کند که توضیح متن مدل چقدر شبیه به مجموعه‌ای از مراجع ایجاد شده توسط ارزیاب‌های انسانی است. برای زمین‌بندی فرمان، دقتی را گزارش می‌کنیم که درصد دفعاتی را که مدل با موفقیت یک شی هدف را در پاسخ به فرمان کاربر تعیین می‌کند، اندازه‌گیری می‌کند. برای پیش‌بینی قابلیت ضربه‌پذیری، امتیازات F1 را گزارش می‌کنیم که توانایی مدل را در تشخیص اشیای قابل لمس از غیرقابل استفاده اندازه‌گیری می‌کند.

در این آزمایش، ما Spotlight را با چندین مدل معیار مقایسه می کنیم. Widget Caption از سلسله مراتب مشاهده و تصویر هر شی UI برای ایجاد یک توضیح متنی برای شی استفاده می کند. به طور مشابه، Screen2Words از سلسله مراتب مشاهده و عکس صفحه و همچنین ویژگی های کمکی (به عنوان مثال، توضیحات برنامه) برای ایجاد خلاصه ای برای صفحه استفاده می کند. در همین راستا، VUT اسکرین شات ها و سلسله مراتب مشاهده را برای انجام چندین کار ترکیب می کند. در نهایت، مدل اصلی Tappability از ابرداده‌های شیء از سلسله مراتب دید و اسکرین شات برای پیش‌بینی قابلیت لمس شی استفاده می‌کند. Taperception، یک مدل پیگیری از Tappability، از یک رویکرد پیش‌بینی قابلیت لمسی فقط بینایی استفاده می‌کند. ما دو نوع مدل Spotlight را با توجه به اندازه بلوک ساختمان ViT آن شامل B/16 و L/16 بررسی می‌کنیم. Spotlight در چهار کار مدل‌سازی رابط کاربری به‌شدت از پیشرفته‌ترین فناوری‌ها فراتر رفت.

مدل

عنوان بندی

خلاصه سازی

زمین کردن

قابلیت ضربه زدن

خطوط پایه

عنوان ویجت

97

–

–

–

Screen2Words

–

61.3

–

–

ولی

99.3

65.6

82.1

–

درک مخروطی

–

–

–

85.5

قابلیت ضربه زدن

–

–

–

87.9

نور افکن

ب/16

136.6

103.5

95.7

86.9

L/16

141.8

106.7

95.8

88.4

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

مدل			عنوان بندی			خلاصه سازی			زمین کردن			قابلیت ضربه زدن
چند وظیفه ای VUT			99.3			65.1			80.8			–
Spotlight B/16			140			102.7			90.8			89.4
Spotlight L/16			141.3			99.2			94.2			89.5

برای درک اینکه چگونه منطقه Summarizer Spotlight را قادر می‌سازد تا بر روی یک منطقه هدف و نواحی مربوطه روی صفحه تمرکز کند، وزن‌های توجه (که نشان می‌دهد توجه مدل در عکس صفحه کجاست) را برای هر دو عنوان ویجت و وظایف خلاصه‌سازی صفحه تجزیه و تحلیل می‌کنیم. در شکل زیر، برای کار عنوان کردن ویجت، مدل «انتخاب تیم چلسی» را برای چک باکس سمت چپ، که با یک کادر قرمز رنگ مشخص شده است، پیش‌بینی می‌کند. ما می‌توانیم از نقشه حرارتی توجه آن (که توزیع وزن‌های توجه را نشان می‌دهد) در سمت راست ببینیم که مدل یاد می‌گیرد که نه تنها به منطقه هدف کادر چک توجه کند، بلکه متن «چلسی» در سمت چپ را نیز برای تولید نشان می‌دهد. عنوان. برای مثال خلاصه‌سازی صفحه، مدل با توجه به اسکرین شات سمت چپ، «صفحه نمایش آموزش یک برنامه یادگیری» را پیش‌بینی می‌کند. در این مثال، منطقه هدف کل صفحه است و مدل یاد می‌گیرد که به بخش‌های مهم در آن توجه کند. صفحه نمایش برای خلاصه سازی

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

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

نتیجه

ما نشان می‌دهیم که Spotlight از روش‌های قبلی که هم از اسکرین‌شات‌ها و هم از سلسله‌مراتب مشاهده به‌عنوان ورودی استفاده می‌کنند، بهتر عمل می‌کند، و نتایج پیشرفته‌ای را در چندین وظایف UI نماینده ایجاد می‌کند. این وظایف از دسترسی، اتوماسیون تا طراحی و ارزیابی تعامل را شامل می شود. رویکرد ما برای درک رابط کاربری تلفن همراه، نیاز به استفاده از سلسله مراتب دید را کاهش می‌دهد، به معماری اجازه می‌دهد به راحتی مقیاس‌بندی شود و از موفقیت مدل‌های زبان بینایی بزرگ که برای دامنه عمومی از قبل آموزش داده شده‌اند، بهره‌مند شود. در مقایسه با تلاش‌های اخیر مدل‌های زبان بینایی بزرگ مانند Flamingo و PaLI، Spotlight نسبتاً کوچک است و آزمایش‌های ما این روند را نشان می‌دهد که مدل‌های بزرگ‌تر عملکرد بهتری دارند. Spotlight را می توان به راحتی برای کارهای بیشتر رابط کاربری اعمال کرد و به طور بالقوه در بسیاری از وظایف تعامل و تجربه کاربر پیش رفت.

تصدیق

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