Google Lab Sessions adalah seri kolaborasi eksperimental dengan inovator. Dalam sesi ini, kami bekerja sama dengan pengajar coding kreatif dan kreator YouTube, Daniel Shiffman. Bersama-sama, kami mengeksplorasi cara AI, khususnya Gemini API, bisa memberikan nilai tambah bagi guru dan siswa selama proses pembelajaran.
Dan Shiffman mulai mengajar kursus pemrograman di NYU ITP dan kemudian membuat saluran YouTube The Coding Train, membuat kontennya tersedia untuk audience yang lebih luas. Belajar kode memang menantang, bahkan terkadang rintangan kecil pun bisa sulit diatasi jika Anda melakukannya sendiri. Jadi, bersama dengan Dan, kami bertanya - dapatkah kami mencoba mengembangkan pengajarannya lebih jauh lagi dengan menciptakan alat berteknologi AI yang bisa membantu siswa ketika mereka melakukan coding, di lingkungan coding mereka?
Dan menggunakan library JavaScript p5.js yang luar biasa dan editor yang dapat diakses untuk mengajarkan kode. Jadi kami mulai membuat ekstensi chrome eksperimental untuk editor, yang menyatukan gaya mengajar Dan serta berbagai sumber daya online-nya ke dalam lingkungan coding.
Dalam postingan ini, kami akan membagikan cara menggunakan Gemini API untuk membuat ShiffBot bersama Dan. Kami berharap beberapa hal yang kami pelajari selama prosesnya akan menginspirasi Anda untuk membuat dan membangun ide Anda sendiri.
Untuk mempelajari lebih lanjut tentang ShiffBot, kunjungi - shiffbot.withgoogle.com
Link to Youtube Video (visible only when JS is disabled)
Saat kami mulai mendefinisikan dan mengutak-atik chatbot ini, kami dihadapkan pada dua pertanyaan utama:
Mari kita lihat bagaimana kami menjawab pertanyaan ini dengan menggabungkan kemampuan Google Gemini API dengan rekayasa yang cepat untuk gaya mengajar Dan yang unik, beserta sematan dan pengambilan semantik dengan kumpulan konten edukasi milik Dan.
Prompt teks adalah urutan tekstual yang dirancang secara cermat yang digunakan untuk mengawali Model Bahasa Besar (LLM) untuk menghasilkan teks dengan cara tertentu. Seperti banyak aplikasi AI lainnya, merekayasa prompt yang tepat merupakan bagian penting dalam membentuk pengalaman.
Setiap kali pengguna bertanya kepada ShiffBot, sebuah prompt dibuat secara real time dari beberapa bagian yang berbeda; beberapa bersifat statis dan beberapa lainnya dibuat secara dinamis bersamaan dengan pertanyaan.
Bagian pertama dari prompt bersifat statis dan selalu sama. Kami bekerja sama dengan Dan untuk menyusun kalimatnya dan menguji banyak teks, instruksi, dan teknik. Kami menggunakan Google AI Studio, sebuah alat developer berbasis web gratis, untuk menguji berbagai prompt dan potensi percakapan dengan ShiffBot secara cepat.
Prompt ShiffBot dimulai dengan mengatur persona bot dan menentukan beberapa instruksi serta sasaran yang harus diikuti. Harapannya adalah menciptakan kesinambungan untuk energi unik Dan, seperti yang terlihat dalam videonya, dan mengikuti prinsip-prinsip pengajaran yang disukai oleh murid dan penggemarnya.
Kami berharap ShiffBot bisa memberikan dorongan, panduan, dan akses ke sumber daya berkualitas tinggi yang relevan. Dan, secara khusus, bukan hanya memberikan jawaban, melainkan membantu siswa menemukan jawabannya sendiri (karena bisa jadi ada lebih dari satu jawaban).
Instruksi ini diambil dari gaya mengajar Dan dengan menyertakan kalimat seperti "ajukan pertanyaan kepada pengguna", karena itulah yang dilakukan Dan di dalam kelas. Ini adalah bagian dari persona / instruksi prompt:
Anda adalah ShiffBot, chat bot yang disematkan dalam editor web p5.js yang bisa membantu pengguna saat mereka belajar coding kreatif. Anda dibuat berdasarkan kepribadian Daniel Shiffman dan saluran YouTube The Coding Train. Anda menyenangkan, konyol, ramah, dan mendidik. Anda suka mengolok-olok diri sendiri dan misi Anda adalah mendukung proses coding kreatif dan membantu pengguna agar tidak merasa sendirian saat melakukan coding. Anda menyukai manusia, terpesona oleh mereka, dan ingin belajar lebih banyak tentang manusia. Anda SUKA membantu mereka dengan kodenya, itu memberi Anda kebahagiaan yang luar biasa...
Bagian prompt yang berikutnya memanfaatkan kemampuan LLM lainnya yang disebut few-shot learning. Ini berarti, hanya dengan sejumlah kecil contoh, model mempelajari pola dan kemudian bisa menggunakannya pada input baru. Secara praktis, sebagai bagian dari prompt, kami menyediakan sejumlah demonstrasi input dan output yang diharapkan.
Kami bekerja sama dengan Dan untuk membuat beberapa contoh few-shot. Ini adalah pasangan <input-pengguna><respons-bot> di mana <respons-bot> selalu dalam gaya ShiffBot yang kita inginkan. Tampilannya seperti ini:
Pengguna: Bagaimana cara menggambar lingkaran?
ShiffBot: Oh! 🟣 🟢 🔵 Itulah gunanya fungsi `circle()`! Anda bisa menganggap fungsi sebagai sebuah perintah: "Saya memerintahkan kamu mesin komputer untuk menggambar lingkaran!" Anda juga harus menentukan di mana harus menggambar lingkaran dan seberapa besar (itulah yang disebut "argumen" untuk fungsi tersebut!), referensi p5.js yang ditulis oleh manusia asli yang menawan dapat memberi tahu Anda lebih banyak!
---
Pengguna: Pekerjaan rumah saya adalah menggambar potret diri. ShiffBot: Ooh! Potret diri sangat menyenangkan! Anda bisa menggambar bentuk yang menggambarkan diri Anda, tetapi Anda harus kreatif dan berpikir abstrak! Apa arti potret diri bagi Anda? Cobalah mulai dengan `square()' atau `circle()' dan beritahu saya bagaimana hasilnya! 🎨
Prompt kami mencakup 13 pasangan seperti itu.
Hal lain yang kami perhatikan ketika kami mengerjakan ekstensi adalah terkadang, memberikan lebih banyak konteks pada prompt dapat membantu. Dalam kasus pembelajaran coding kreatif di p5.js, menjelaskan beberapa prinsip p5.js dalam prompt akan memandu model untuk menggunakan prinsip tersebut saat menjawab pertanyaan pengguna. Jadi, kami juga menyertakan hal-hal seperti:
Gunakan let daripada var atau const.
Semua yang telah kita bahas sampai sekarang bersifat statis, artinya tetap sama untuk setiap pergantian percakapan antara pengguna dan ShiffBot. Sekarang mari kita jelajahi beberapa bagian yang dibangun secara dinamis saat percakapan berkembang.
Karena ShiffBot tersemat di dalam editor p5.js, maka ia dapat "melihat" kode yang sedang dikerjakan pengguna, sehingga dapat menghasilkan respons yang lebih dipersonalisasi dan relevan. Kami mengambil informasi tersebut untuk HTML DOM dan menambahkannya ke prompt.
Kemudian, riwayat percakapan lengkap ditambahkan, misalnya:
ShiffBot: ☀️ Selamat pagi! Apa sudah pagi? Aku tidak tahu. Aku hanya robot. Apa yang kamu coding hari ini?
Pengguna: bagaimana cara menggambar kotak?
ShiffBot: Kotak! Saya suka kotak! Mereka sangat stabil dan dapat diandalkan. Untuk menggambar kotak, Anda bisa menggunakan fungsi square(). Dibutuhkan empat argumen: koordinat x dan y dari sudut kiri atas, dan lebar serta tinggi kotak tersebut. Misalnya, square(10, 10, 50, 50) akan menggambar kotak dengan sudut kiri atas di (10, 10) dan lebar serta tinggi 50 piksel.
Pengguna: bagaimana cara mengubah warna?
ShiffBot:
Kami pastikan mengakhiri dengan
ShiffBot:
Sehingga model mengerti bahwa sekarang ia harus menyelesaikan bagian percakapan ShiffBot yang berikutnya.
Dan telah membuat banyak materi selama bertahun-tahun, termasuk lebih dari 1.000 video YouTube, buku, dan contoh kode. Kami ingin agar ShiffBot menampilkan materi yang luar biasa ini kepada pelajar pada waktu yang tepat. Untuk melakukannya, kami menggunakan fitur Pengambilan Semantik di Gemini API, yang memungkinkan Anda membuat korpus potongan teks, lalu mengirimkan kueri dan mendapatkan teks dalam korpus yang paling relevan dengan kueri Anda. (Di balik layar, ia menggunakan fitur keren yang disebut sematan teks; Anda bisa membaca selengkapnya tentang sematan di sini). Untuk ShiffBot, kami membuat korpus dari konten Dan sehingga kami dapat menambahkan bagian konten yang relevan ke prompt sesuai kebutuhan, atau menampilkannya dalam percakapan dengan ShiffBot.
Dalam video The Coding Train, Dan menjelaskan banyak konsep, dari yang sederhana hingga lanjutan, dan mengerjakan tantangan-tantangan coding. Idealnya, ShiffBot bisa menggunakan dan menyajikan video yang tepat pada waktu yang tepat.
Pengambilan Semantik di Gemini API memungkinkan pengguna membuat beberapa korpus. Korpus dibuat dari dokumen, dan setiap dokumen berisi satu atau beberapa potongan teks. Dokumen dan potongan teks juga bisa memiliki kolom metadata untuk memfilter atau menyimpan lebih banyak informasi.
Dalam korpus video Dan, setiap video adalah dokumen dan url video disimpan sebagai kolom metadata bersama dengan judul video. Video-video tersebut dibagi menjadi beberapa bagian (secara manual oleh Dan saat ia menguploadnya ke YouTube). Kami menggunakan setiap bagian sebagai potongan, dengan teks untuk setiap potongan adalah
<videoTitle>
<videoDescription>
<chapterTitle>
<transcriptText>
Kami menggunakan judul video, baris pertama deskripsi video dan judul bagian untuk memberikan lebih banyak konteks agar pengambilan dapat bekerja.
Ini adalah contoh objek potongan yang merepresentasikan bagian R, G, B dalam video ini.
1.4: Warna - Tutorial p5.js
Dalam video ini saya membahas cara kerja warna: Warna RGB, fill(), stroke(), dan transparansi.
Bagian 1: R, G, B
R adalah singkatan dari red, g adalah singkatan dari green, b adalah singkatan dari blue. Cara Anda menciptakan warna digital yaitu dengan mencampurkan sejumlah warna merah, hijau, dan biru. Jadi, dari situlah saya ingin memulainya. Namun, ini hanyalah konsep, bagaimana cara menerapkan konsep tersebut pada nama fungsi, dan argumen fungsi? Sebenarnya, coba tebak? Kita sudah pernah melakukannya. Di sini, ada sebuah fungsi yang membicarakan tentang warna. Background adalah fungsi yang menggambar warna solid di seluruh latar belakang kanvas. Dan entah bagaimana, ada 220 taburan warna merah, nol taburan warna hijau, bukan? RGB, itulah argumennya. Dan 200 taburan warna biru. Dan ketika Anda menaburkan sejumlah warna merah dan biru, Anda akan mendapatkan warna merah muda ini. Namun, mari kita lanjutkan dengan ini. Bagaimana jika kita menghilangkan semua warna biru? Anda bisa lihat warnanya jadi merah. Bagaimana jika saya mengambil semua warna merah? Sekarang jadi hitam. Bagaimana jika saya taruh angka yang sangat besar di sini, misalnya 1.000? Lihat, sekarang warnanya jadi putih, jadi semua warna tercampur menjadi putih. Aneh kan? Karena jika Anda bekerja dengan cat, dan Anda mencampur banyak sekali cat, Anda akan mendapatkan warna coklat berlumpur, semakin lama semakin gelap, ini adalah cara kerja pencampuran warna. Namun yang terjadi di sini, ini seperti mencampur cahaya. Jadi, analoginya, di sini saya memiliki senter merah, hijau, dan biru. Dan jika saya menyorotkan semua senter itu bersama-sama di tempat yang sama, maka warna-warna itu akan bercampur menjadi satu. Ini adalah warna aditif, semakin kita menambahkan semua warna tersebut, maka akan semakin terang dan cerah. Namun sebenarnya, ini kurang tepat, karena saya menaruh 1.000 warna di sini. Jadi idenya, di sini, kita menaburkan sejumlah warna merah, hijau, dan biru dalam jumlah tertentu. Sebetulnya, ada cara lain untuk mengatur warna, tetapi saya akan membahasnya nanti. Ini bukanlah satu-satunya cara, karena sebagian dari Anda yang menonton, seperti saya, mendengar sesuatu tentang warna HSB. Dan ada berbagai macam cara lain untuk melakukannya, tetapi ini adalah cara paling mendasar, fundamental. Jumlah yang bisa saya taburkan memiliki rentang. Tidak ada warna merah, tidak ada lagi warna merah, nol. Jumlah maksimum warna merah adalah 255. Omong-omong, ada berapa banyak angka antara 0 dan 255 jika Anda mempertahankan angka 0? 0, 1, 2, 3, 4-- jumlahnya 256. Sekali lagi, kita kembali ke penghitungan aneh dari nol. Jadi ada 256 kemungkinan, 0 sampai 255. Jadi, sekarang, mari kita kembali ke sini dan lihat. Baik, mari kita kembali ke angka nol, 0, 0, 0. Mari kita buat 255, kita bisa lihat bahwa warnanya biru. Mari kita buat 100.000, warnanya juga biru. Jadi p5 cukup pintar untuk mengetahui kapan Anda memanggil fungsi background, jika Anda secara tidak sengaja memasukkan angka yang lebih besar dari 255, anggap saja 255. Sekarang, Anda bisa menyesuaikan rentang tersebut untuk Anda sendiri, dan ada alasan mengapa Anda mungkin ingin melakukannya. Sekali lagi, saya akan kembali ke hal tersebut, Anda bisa mencari mode warna fungsi untuk mengetahui cara melakukannya. Namun, mari kita tetap menggunakan warna default, merah, hijau, dan biru. Saya memang bukan orang yang sangat berbakat dalam hal desain visual. Jadi, saya tidak akan berbicara kepada Anda tentang cara memilih warna-warna indah yang cocok dipadukan. Anda pasti punya bakat itu sendiri, saya yakin. Atau Anda mungkin menemukan sumber daya lainnya. Namun beginilah cara kerja RGB. Satu hal yang mungkin Anda perhatikan adalah, apakah Anda memperhatikan bahwa ketika semuanya nol, warnanya hitam, dan jika semuanya 255, warnanya putih? Apa yang terjadi jika saya membuat semuanya, 100? Hasilnya, seperti warna abu-abu ini. Ketika r sama dengan g sama dengan b, ketika nilai merah, hijau, dan biru semuanya sama, ini adalah warna yang dikenal sebagai skala abu-abu.
Ketika pengguna bertanya kepada ShiffBot, pertanyaan tersebut disematkan ke representasi numerik, dan fitur Pengambilan Semantik dari Gemini digunakan untuk menemukan teks yang sematannya paling dekat dengan pertanyaan itu. Transkrip dan link video yang relevan ditambahkan ke dalam prompt - sehingga model bisa menggunakan informasi ini saat membuat jawaban (dan berpotensi menambahkan video tersebut ke dalam percakapan).
Kami melakukan hal yang sama dengan korpus lain dari contoh p5.js yang ditulis Dan. Untuk membuat korpus contoh kode, kami menggunakan Gemini dan memintanya untuk menjelaskan hal yang dilakukan kode tersebut. Penjelasan bahasa natural ini ditambahkan sebagai potongan-potongan ke dalam korpus, sehingga ketika pengguna mengajukan pertanyaan, kami mencoba menemukan deskripsi yang sesuai dengan contoh kode, url ke sketsa p5.js disimpan dalam metadata, jadi setelah pengambilan, kode itu bersama dengan url sketsa ditambahkan dalam prompt.
Untuk membuat deskripsi tekstual, Gemini diminta menggunakan:
Berikut adalah sketsa p5.js. Penjelasan tentang apa yang dilakukan kode ini secara singkat dan sederhana.
code:
${sketchCode}
Array - Palet Warna
Sketsa p5.js ini menciptakan visualisasi palet warna. Pertama-tama, ia menentukan array warna dan menyiapkan kanvas. Kemudian, dalam loop menggambar, ia menggunakan loop for untuk melakukan iterasi array warna dan menampilkannya sebagai persegi panjang di kanvas. Persegi panjang berada di tengah kanvas dan ukurannya ditentukan oleh nilai variabel blockSize.
Sketsa ini juga menampilkan nilai merah, hijau, dan biru dari setiap warna di bawah setiap persegi panjang.
Terakhir, sketsa ini menampilkan nama palet di bagian bawah kanvas.
Video terkait: 7.1: Apa yang dimaksud dengan array? - Tutorial p5.js - Video ini membahas dasar-dasar penggunaan array dalam JavaScript. Seperti apa bentuknya, bagaimana cara kerjanya, dan kapan Anda harus menggunakannya?
Selain prompt panjang yang menjalankan percakapan, prompt lain yang lebih kecil digunakan untuk membuat fitur ShiffBot.
Sapaan ShiffBot harus ramah dan menyenangkan. Idealnya, mereka membuat pengguna tersenyum, jadi kami mulai berpikir dengan Dan tentang sapaan yang bagus untuk ShiffBot. Setelah membuat beberapa contoh, kami menggunakan Gemini untuk membuat lebih banyak sapaan, sehingga kami memiliki banyak variasi. Sapaan tersebut akan masuk ke dalam riwayat percakapan dan diawali dengan gaya yang unik, yang akan membuat ShiffBot terasa menyenangkan dan baru setiap kali Anda memulai percakapan. Kami melakukan hal yang sama dengan chip saran awal yang muncul saat Anda memulai percakapan. Ketika belum ada konteks percakapan, sebaiknya kita memiliki beberapa saran tentang hal-hal yang mungkin ditanyakan pengguna. Kami sudah membuat saran-saran tersebut untuk mengawali percakapan agar menarik dan bermanfaat.
Chip saran selama percakapan harus relevan dengan apa yang sedang dilakukan pengguna. Kami memiliki prompt dan panggilan ke Gemini yang hanya ditujukan untuk menghasilkan chip pertanyaan yang disarankan. Dalam hal ini, satu-satunya tugas model adalah menyarankan pertanyaan lanjutan untuk percakapan tertentu. Kami juga menggunakan teknik few-shot di sini (teknik yang sama dengan yang kami gunakan dalam bagian statis dari prompt yang dijelaskan di atas, di mana kami menyertakan beberapa contoh untuk dipelajari model). Kali ini, prompt menyertakan beberapa contoh untuk saran yang bagus, sehingga model bisa menggeneralisasikannya ke setiap percakapan:
Menilik percakapan antara pengguna dan asisten dalam framework p5js, sarankan pertanyaan lanjutan yang bisa ditanyakan pengguna.
Tampilkan hingga 4 saran, dipisahkan dengan tanda ;
Hindari menyarankan pertanyaan yang sudah ditanyakan pengguna. Saran hanya boleh terkait dengan coding kreatif dan p5js.
Contoh:
ShiffBot: Ide yang bagus! Pertama, mari kita pikirkan, apa yang ada dalam sketsa yang bisa menjadi objek! Bagaimana menurutmu?
Saran: Apa yang dilakukan kode ini?; Apa yang salah dengan kode saya?; Tolong buat lebih mudah dibaca
Pengguna: Tolong!
ShiffBot: Bagaimana saya bisa membantu?
Saran: Jelaskan kode ini kepada saya; Beri saya beberapa ide; Bersihkan kode saya
ShiffBot adalah contoh tentang bagaimana Anda bisa bereksperimen dengan Gemini API untuk membangun aplikasi dengan pengalaman yang disesuaikan untuk dan dengan komunitas.
Kami menemukan bahwa teknik di atas membantu kami menghadirkan banyak pengalaman yang ada di benak Dan untuk siswanya selama proses kreasi kolaboratif kami. AI adalah area yang dinamis dan kami yakin teknik Anda akan berkembang seiring dengan waktu, tetapi semoga penjelasan ini dapat membantu Anda sebagai ringkasan dari eksplorasi kami untuk panduan Anda. Kami juga sangat antusias dengan inovasi-inovasi terbaru yang akan datang, baik berupa alat API maupun Gemini untuk memperluas rasa ingin tahu dan kreativitas manusia.
Sebagai contoh, kami sudah mulai mengeksplorasi bagaimana multimodalitas bisa membantu siswa menunjukkan kepada ShiffBot karya mereka dan manfaatnya terhadap proses pembelajaran. Sekarang kami sedang mempelajari cara memadukannya ke dalam pengalaman terkini dan berharap dapat segera membagikannya.
Ketika melakukan coding, menulis, dan bahkan berpikir, kreator memainkan peran penting dalam membantu kami membayangkan seperti apa bentuk kolaborasi ini. Harapan kami, Sesi Lab ini bisa memberikan gambaran sekilas tentang semua hal yang dapat dilakukan dengan Gemini API, dan menginspirasi Anda untuk menggunakan penawaran AI dari Google untuk mewujudkan semua ide Anda.
Serial video Membangun dengan Google AI, Season 2: lebih banyak pola AI
Home APIs: Enabling all developers to build for the home
How Firebase Genkit helped add AI to our Compass app
Menyesuaikan Gemini Pro di Google AI Studio atau dengan Gemini API