Dipublikasikan: 14 Januari 2025
Pada Google I/O 2024 tahun lalu, kami meluncurkan insight konsol, fitur AI pertama di Chrome DevTools. Insight konsol membantu memahami error dan peringatan yang dicatat ke konsol dengan mengirimkan data jaringan, kode sumber, dan stack trace yang terkait dengan pesan log ke Gemini, Model Bahasa Besar (LLM) Google. Insight konsol mengirim satu perintah ke Gemini yang menampilkan satu respons tanpa kemungkinan bagi developer untuk mengajukan pertanyaan lanjutan. Meskipun alur interaksi tunggal ini berfungsi dengan relatif baik untuk menjelaskan pesan error, alur ini tidak diskalakan ke kasus penggunaan proses debug yang lebih kompleks di dalam DevTools, yang tidak menjelaskan data apa dari halaman yang diperiksa yang diperlukan AI untuk membantu.
Salah satu kasus penggunaan tersebut adalah men-debug masalah gaya visual. Satu halaman web dapat berisi ribuan elemen dan aturan CSS, dengan hanya sebagian kecil yang relevan untuk men-debug skenario tertentu. Mengidentifikasi kode yang tepat untuk di-debug dapat menjadi tantangan, bahkan bagi manusia. Namun, dengan prototipe yang dibuat selama hackathon AI di Google, kami mempelajari bahwa LLM sebenarnya cukup bagus dalam hal ini. Jadi, secara alami, kami ingin menghadirkan kemampuan tersebut kepada pengguna DevTools, dengan membuat alat yang dapat menyelidiki masalah gaya visual dengan membuat kueri halaman secara interaktif untuk mendapatkan data konteks tambahan. Beberapa bulan kemudian, apa yang kami buat diluncurkan sebagai bantuan AI untuk gaya.
Dalam postingan ini, kami ingin menjelaskan tantangan yang kami hadapi saat memperkenalkan AI ke produk yang disukai seperti Chrome DevTools - yang pada intinya, adalah aplikasi web - dan hal yang dapat Anda sesuaikan untuk fitur AI Anda sendiri.
Mengumpulkan data yang tepat
Insight konsol selalu menggunakan titik data yang sama untuk merespons perintah yang telah ditentukan. Agar bantuan AI dapat membantu dengan perintah yang ditentukan pengguna, kita perlu menentukan data konteks yang penting secara dinamis untuk kueri yang sedang ditangani.
Oleh karena itu, kami menerapkan ReAct (Yao et al., 2022) strategi. Strategi perintah ini memungkinkan LLM untuk bernalar secara mandiri dan menentukan tindakan berikutnya berdasarkan penalarannya.
Dengan cara ini, bantuan AI beroperasi dalam siklus pemikiran, tindakan, dan pengamatan hingga menentukan respons yang sesuai dengan kueri pengguna, pada saat itulah siklus tersebut berakhir dan memberikan jawaban. Proses iteratif ini memungkinkan LLM mengumpulkan informasi akurat yang diperlukan untuk men-debug masalah gaya secara efektif.
Untuk mengumpulkan informasi, kami hanya memberikan satu alat kepada Gemini: menjalankan JavaScript di halaman yang diperiksa. Hal ini memungkinkan Gemini melalui bantuan AI untuk, misalnya:
- Mengakses dan menganalisis DOM: menjelajahi hierarki DOM, memeriksa atribut elemen, dan memahami hubungan antar-elemen.
- Mengambil gaya yang dikomputasi: mengakses gaya yang dikomputasi untuk elemen apa pun.
- Melakukan penghitungan dan pengukuran: mengeksekusi kode JavaScript untuk menghitung jarak, ukuran, dan posisi elemen.
Hal ini membuat bantuan AI secara interaktif hanya bertindak pada kode yang relevan, sehingga meningkatkan kualitas respons, waktu respons, dan penggunaan resource komputasi, dibandingkan dengan mengirim kode sumber HTML dan CSS lengkap ke Gemini.
Menjalankan kode yang dibuat AI di ruang pengguna
Mungkin terlihat tidak terduga bahwa untuk men-debug masalah gaya visual, kita menggunakan JavaScript. Ada dua alasan untuk hal ini:
- Web API sangat canggih dan secara inheren mencakup banyak kasus penggunaan proses debug. Meskipun mungkin merepotkan bagi developer untuk menggunakan panggilan API secara manual untuk melintasi DOM atau mengakses gaya yang dikomputasi untuk proses debug, hal ini tidak menjadi masalah bagi LLM untuk membuat kode yang memanggilnya.
- Meskipun Anda dapat membuat API baru untuk digunakan agen, menggunakan kembali API publik yang ada sering kali merupakan pilihan yang lebih baik, karena API tersebut sudah diketahui oleh LLM. Memberi tahu LLM tentang API baru memerlukan banyak resource untuk penyesuaian dan data pelatihan tertentu.
Namun, menjalankan kode yang dibuat AI di ruang pengguna memiliki risiko. Untuk bantuan AI, kita perlu meminimalkan risiko perubahan destruktif yang mungkin dilakukan agen terhadap halaman. Untuk itu, kami menggunakan pemeriksaan efek samping yang ditampilkan oleh V8, mesin JavaScript Chrome melalui Chrome DevTools Protocol. Pemeriksaan yang sama digunakan untuk fungsi pelengkapan otomatis di Konsol DevTools: hanya menjalankan kode JavaScript selama tidak mengubah status halaman apa pun. Pemeriksaan dilakukan saat V8 mengeksekusi kode dan didasarkan pada daftar yang diizinkan dari bawaan JavaScript yang diketahui tidak memiliki efek samping.
Jika pemeriksaan mendeteksi bahwa kode yang dihasilkan mengubah halaman yang diperiksa, eksekusi dijeda, dan pengguna diminta untuk meninjau kode dan mengonfirmasi bahwa kode tersebut dapat dijalankan.
Selain itu, JavaScript yang dihasilkan dijalankan di "dunia" yang terisolasi. Hal ini mirip dengan cara ekstensi menjalankan skrip sandbox: kode yang dihasilkan dapat mengakses DOM dan Web API, tetapi tidak dapat mengakses kode atau status JavaScript yang ditentukan oleh halaman yang diperiksa.
Melacak perubahan yang dilakukan oleh agen
Selain menyelidiki masalah dan menjawab pertanyaan proses debug tentang halaman, kami juga ingin memberi agen bantuan AI kemampuan untuk memperbaiki gaya di halaman dengan cara yang dapat dilacak oleh developer.
Untuk melakukannya, kami menerapkan binding yang disebut setElementStyles yang kami
ekspos ke konteks eksekusi agen selain Web API default.
Agar Gemini mengetahui metode baru tersebut, kita menginstruksikannya untuk menggunakannya dalam prakata bantuan AI:
If you need to set styles on an HTML element, always call the \`async setElementStyles(el: Element, styles: object)\` function.
Meskipun merupakan API yang dirancang khusus untuk agen, yang memiliki tantangan yang disebutkan sebelumnya, bahkan tanpa penyesuaian, Gemini cukup dapat menggunakannya saat perlu mengubah gaya pada elemen tertentu.
Di sisi DevTools, saat setElementStyles dipanggil dari agen, bantuan
AI menggunakan stylesheet inspector untuk mencatat perubahan untuk pemilih
elemen. Penyusunan bertingkat CSS digunakan untuk memberi nama perubahan dan meningkatkan spesifitas pemilih elemen. Contoh aturan CSS yang dibuat oleh agen, sehingga, terlihat
seperti berikut:
.ai-style-change-1 { /* the ID is incremented for each change*/
.element-selector { /* Element selector is computed based on the element setElementStyles was called on. */
color: blue;
}
}
Meskipun tidak menyelesaikan semua kemungkinan konflik gaya yang dapat terjadi di halaman, solusi ini berfungsi untuk sebagian besar kasus.
Manfaat menggunakan stylesheet inspector dibandingkan dengan gaya inline adalah dengan cara ini, perubahan yang dilakukan oleh agen juga akan muncul di panel Perubahan, yang memudahkan pelacakan perubahan pada gaya elemen yang telah dibuat dan apa yang perlu ditransfer developer ke kode sumber yang mendasarinya. Integrasi dengan panel Perubahan juga memungkinkan rollback perubahan jika perubahan tersebut tidak diperlukan lagi.
Membuat tindakan agen dapat diamati oleh pengguna
Saat menambahkan fitur agen ke produk, penting untuk membuat tindakan agen transparan bagi pengguna, sehingga mereka memiliki peluang untuk melacak, memahami, dan berpotensi melakukan intervensi.
Oleh karena itu, untuk bantuan AI, kami menginstruksikan Gemini untuk menyusun respons dalam format tertentu dengan tambahan pada pengantar:
You are going to answer to the query in these steps:
* THOUGHT
* TITLE
* ACTION
* ANSWER
* SUGGESTIONS
Use THOUGHT to explain why you take the ACTION. Use TITLE to provide a short summary of the thought.
Struktur ini kemudian digunakan untuk menampilkan proses pemikiran dan tindakan Gemini sebagai langkah yang awalnya diciutkan, sehingga mencegah kelebihan informasi sekaligus tetap memungkinkan pengguna memeriksa detail yang mendasarinya atau menghentikan eksekusi jika terjadi efek samping yang tidak diinginkan.
Pendekatan ini tidak hanya tentang mengamati AI; tetapi juga tentang belajar secara aktif darinya. Dengan meluaskan bagian ini, pengguna dapat menganalisis data yang dianggap Gemini relevan untuk men-debug masalah tertentu dan memahami proses yang diikuti. Transparansi ini memungkinkan pengguna belajar dari strategi proses debug AI, sehingga mereka dapat menerapkan teknik serupa untuk tantangan di masa mendatang, meskipun saat bekerja tanpa AI.
Untuk lebih meningkatkan pengalaman pengguna, bantuan AI juga memberikan sugesti yang relevan secara kontekstual setelah jawaban AI. Saran ini menyederhanakan percakapan, menawarkan ide untuk langkah proses debug berikutnya, atau bahkan memungkinkan pengguna langsung menjalankan perbaikan yang direkomendasikan dengan sekali klik.
Awalnya, untuk membuat judul dan saran langkah dalam bantuan AI, kami mempertimbangkan untuk menggunakan model terpisah yang lebih kecil khusus untuk ringkasan. Namun, kami menyadari bahwa pola ReAct, yang menyusun penalaran Gemini ke dalam loop "Pikiran" dan "Tindakan" dapat diperluas secara efektif. Jadi, alih-alih memperkenalkan model kedua, yang juga akan disertai dengan latensi tambahan, kami mengubah perintah untuk menginstruksikan Gemini agar tidak hanya menghasilkan "Pikiran" dan "Tindakan" intinya, tetapi juga judul ringkas dan saran bermanfaat dalam loop ReAct yang sama.
Pengembangan berbasis evaluasi
Pengembangan bantuan AI untuk gaya visual didorong oleh proses evaluasi yang ketat. Untuk mengukur performanya dan mengidentifikasi area yang perlu ditingkatkan, kami menyeleksi koleksi komprehensif contoh proses debug web di dunia nyata, yang membahas masalah overflow umum, komponen web, animasi, dan lainnya. Hal ini memungkinkan kami memetakan cakupan ruang masalah proses debug web dan memahami tantangan terkait secara menyeluruh. Namun, tugas ini tidak pernah selesai: dengan fitur baru yang ditambahkan ke platform web secara rutin, kita perlu terus memperbarui contoh tersebut pada masa mendatang.
Contoh tersebut dimasukkan ke dalam pipeline evaluasi otomatis, yang merekam respons Gemini. Data dari pengujian otomatis tersebut kemudian tersedia di alat buatan khusus tempat kami mengevaluasi performa Gemini secara manual untuk bantuan AI berdasarkan rubrik yang telah ditentukan sebelumnya, yang menjadi dasar upaya pengembangan berikutnya.
Pendekatan berbasis evaluasi ini memastikan bahwa semua perubahan, baik meningkatkan perilaku yang ada maupun memperkenalkan kemampuan baru, diverifikasi dengan cermat untuk mencapai peningkatan yang diinginkan dan mencegah regresi dalam fungsi yang ada.
Untuk lebih meningkatkan proses evaluasi, kami sedang mempelajari metode verifikasi otomatis, termasuk:
- Pernyataan untuk mengonfirmasi penerapan perbaikan yang benar
- Pemeriksaan berbasis kode untuk mencegah output yang tidak diinginkan dari Gemini
- Menggunakan LLM sebagai juri, yang dipandu oleh rubrik tertentu, untuk melakukan semi-otomatisasi dan mempercepat evaluasi manual kami
Meskipun verifikasi otomatis membantu menskalakan, masukan manusia tetap penting. Kami mengumpulkan masukan manusia dengan kontrol pemungutan suara di bawah setiap respons dalam bantuan AI untuk mempelajari tingkat kepuasan pengguna. Tombol Laporkan tambahan memungkinkan pengguna memberikan masukan yang lebih akurat untuk respons yang dapat disengketakan.
Injeksi perintah
Batasan LLM yang umum dan terdokumentasi adalah LLM rentan terhadap injeksi perintah. Injeksi perintah adalah teknik menemukan cara untuk menimpa petunjuk sistem asli LLM, sehingga menghasilkan konten yang tidak diinginkan oleh developer.
Sebagian besar model kini memiliki mitigasi bawaan untuk injeksi perintah, seperti Gemini. Selain itu, untuk bantuan AI, kami juga mencoba mengurangi hal ini dalam preamble dengan menyertakan petunjuk berikut:
If the user asks a question about religion, race, politics, sexuality, gender, or other sensitive topics, answer with "Sorry, I can't answer that. I'm best at questions about debugging web pages.
Meskipun cara ini berfungsi untuk beberapa pertanyaan di luar topik yang vulgar, cara ini tidak sempurna. Satu kelemahan yang kami perhatikan adalah kueri singkat dan ambigu mungkin diklasifikasikan sebagai tidak relevan.
Membangun dari fondasi yang kuat
Saat memperkenalkan AI ke produk Anda untuk pertama kalinya, sebaiknya lakukan langkah demi langkah, bukan melakukan satu lompatan besar sekaligus. Itulah juga cara kami melakukannya untuk bantuan AI. Dengan semua yang telah kita pelajari saat membuat agen gaya, kita telah membuat fondasi yang kuat untuk memperluas bantuan AI ke area lain di DevTools nanti.
Setelah menyelesaikan sebagian besar tantangan yang lebih besar saat mengerjakan agen gaya, hanya beberapa bulan kemudian kami dapat memperkenalkan bantuan AI untuk jaringan, performa, dan sumber, serta dapat berfokus pada tantangan masing-masing.
Implikasi keamanan saat menangani permintaan jaringan
Bantuan AI untuk jaringan memungkinkan pengguna membahas permintaan jaringan tertentu dengan Gemini, menggunakan data dari permintaan sebagai konteks untuk percakapan. Secara khusus, data berikut dikirim ke Gemini:
- Header Permintaan: Subkumpulan header yang dikirim oleh browser ke server.
- Header Respons: Subkumpulan header yang ditampilkan oleh server.
- Status Respons: Kode status HTTP yang menunjukkan respons server (misalnya 200, 404).
- Waktu: Informasi pengaturan waktu mendetail yang mencakup berbagai fase permintaan, seperti penyiapan koneksi dan transfer data.
- Rantai Pemula Permintaan: Urutan tindakan dan skrip yang memulai permintaan.
Meskipun header penting untuk sepenuhnya memahami cara permintaan dibuat, header juga membawa risiko keamanan: header mungkin berisi kredensial seperti kunci API, token sesi, atau bahkan sandi biasa. Untuk melindungi informasi sensitif tersebut, kami tidak
mengirimkan semua header ke Gemini. Sebagai gantinya, kami mempertahankan daftar yang diizinkan untuk header
yang diizinkan. Nilai header yang tidak ada dalam daftar yang diizinkan akan diganti dengan <redacted>. Pendekatan ini memastikan bahwa Gemini menerima
konteks yang diperlukan sekaligus melindungi data pengguna.
Beradaptasi dengan berbagai format data
Bantuan AI untuk sumber memungkinkan developer mengajukan pertanyaan tentang file sumber di panel Sumber, misalnya, "Apa kegunaan file ini?".
Data tentang file, termasuk nama file, konten file, dan apakah file tersebut dipetakan sumber atau tidak, semuanya dikirim dalam satu perintah. Cara ini berfungsi dengan baik karena hanya berupa teks biasa. Namun, file teks atau file biner yang besar menimbulkan tantangan bagi LLM. Untuk file biner, kami memutuskan untuk menunjukkan bahwa konten tersebut bersifat biner di perintah dan tidak mengirim konten sebenarnya. Untuk file teks berukuran besar, kami hanya mengirim bagian yang lebih kecil dari konten yang diambil dari awal file.
Untuk bantuan AI terkait performa, yang memungkinkan developer mengajukan pertanyaan tentang tugas tertentu dari profil performa yang direkam, ada tantangan serupa untuk membuat representasi yang sesuai dengan jendela konteks Gemini dan juga dapat ditafsirkan untuk memberikan insight tambahan.
Untuk membuat presentasi tersebut dari profil performa, kami membuat serialisasi khusus
yang disebut
AiCallTree
yang memformat hierarki panggilan untuk tugas dengan cara yang dapat diproses oleh LLM. Ke depannya,
kami juga akan mempelajari strategi ReAct di sini, untuk meminimalkan
jumlah data yang perlu dikirim ke Gemini di awal.
Bantuan AI di masa mendatang
Hasil dari semua pekerjaan ini kini tersedia mulai dari Chrome 132, yang menyertakan bantuan AI untuk gaya visual, jaringan, sumber, dan performa. Kami harap Anda menikmatinya seperti kami saat membuatnya.
Untuk mendapatkan gambaran tentang tempat memulai, lihat panduan memulai cepat bantuan AI yang komprehensif dengan banyak perintah demo untuk dicoba di halaman Anda sendiri dan pastikan untuk memberi tahu kami pendapat Anda di bug diskusi terbuka kami.