‏gpu-lexer: هایلایتر کد بدون گرامر روی WebGPU

نویسنده تو این پست gpu-lexer رو معرفی می‌کنه: یه syntax highlighter که هیچ grammar (یعنی مجموعه قانون‌هایی که برای هر زبان می‌گه کدوم کلمه keyword یا string هست) نداره. به‌جاش یه مدل خیلی کوچیک روی WebGPU (یعنی API جدید مرورگر برای استفاده از GPU) اجرا می‌شه و نوع هر بخش کد رو حدس می‌زنه. کل کتابخونه حدود 28kB هست و خروجیش آرایه‌ای از spanهاست که نوع، شروع و پایان هر تیکه رو می‌گه:

import { parse } from 'gpu-lexer'

const spans = await parse('source code')
// {
//   type: 'plain' | 'comment' | 'string' | 'number' | 'keyword' | 'type' | 'function' | 'constant' | 'operator'
//   start: number
//   end: number
// }[]

ایده از یه زنجیره «چرا» شروع شد. باندل هایلایترها بزرگه، چون هر زبان گرامر خودشو می‌خواد و زبان‌ها هم تمومی ندارن. ولی بیشتر سینتکس بین زبان‌ها مشترکه: var x =، let x =، val x = و def x = همه یه ایده‌ان. پس به‌جای اینکه این قانون رو برای هر زبان دوباره بنویسی، یه مدل می‌تونه اونو از روی مثال‌ها یاد بگیره و حتی روی زبان‌هایی که ندیده هم به کار ببره.

نویسنده جواب رو تو image segmentation پیدا کرد، یعنی مدلی که به هر پیکسل عکس یه برچسب می‌ده، مثلاً دیوار یا میز. هایلایت کد همون مسئله‌ست با یه بُعد کمتر: کد رو به کوچیک‌ترین تیکه‌ها (کلمه، نماد، فاصله) می‌شکنی و هر کدوم رو یه پیکسل حساب می‌کنی. مدل هم به همسایه‌ها نیاز داره و هم به کل تصویر، مثلاً اینکه 200 تیکه قبل یه string باز شده یا نه.

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

ایدهٔ دوم «دنبال 100٪ نباش» هست. اگه هایلایتر اشتباه کنه، بدترین اتفاق اینه که یه کلمه رنگ اشتباه بگیره، ولی کدت هنوز درست اجرا می‌شه. تازه ابزارهای قانون‌محور هم بی‌نقص نیستن: در مقایسه با Shiki، دقت Prism.js حدود 84.1٪ و Highlight.js حدود 70.1٪ هست و gpu-lexer به 86.8٪ رسیده. در عوض یه مدل برای همهٔ زبان‌ها داری، به‌جای حدود 1MB گرامر Shiki، و یه فایل 5.5 میلیون کاراکتری رو زیر یه ثانیه پردازش می‌کنه، بدون اینکه main thread قفل بشه.

نویسنده می‌گه ابزارهای جدید رو مثل عنصرهای تازهٔ شیمی ببین: تغییر بزرگ وقتی میاد که با چیزهای قدیمی ترکیبشون کنی. WebGPU تا حالا بیشتر برای shader و 3D استفاده شده، ولی می‌تونه کارهای معمولی مثل tokenize کردن کد رو هم انجام بده. آخرش هم با ضرب‌المثل چینی «آجر بنداز تا یشم بگیری» می‌گه چرا ایدهٔ خام رو هم باید منتشر کرد. تو چند روز بقیه مدل‌های کوچیک خودشونو ساختن، مثل gpu-cron برای ساختن cron از زبان طبیعی، gpu-pii برای پیدا کردن اطلاعات شخصی و gpu-font برای تشخیص فونت تو اسکرین‌شات.

نکات کلیدی:

• حجم کل gpu-lexer حدود 28kB هست، در برابر حدود 1MB گرامر برای Shiki.
• دقت در مقایسه با Shiki: gpu-lexer حدود 86.8٪، Prism.js حدود 84.1٪ و Highlight.js حدود 70.1٪.
• یه فایل 5.5 میلیون کاراکتری رو زیر یه ثانیه و بدون بلاک کردن main thread هایلایت می‌کنه.
• خروجی 9 نوع توکن داره، مثل keyword، string، comment و operator.
• پروژهٔ jev-lexer همین pipeline رو نگه داشته ولی مدل آموزش‌دیده رو با یه LLM عوض کرده.