Google AI Studio - ลองใช้ Starter Apps

(บทความต้นฉบับมี system prompt, code snippet และ gif รวมอยู่ด้วย)

• เมื่อ Google AI Studio อัปเดต ก็ได้เพิ่มพื้นที่สำหรับลองเล่นมินิแอปหลากหลายแบบ (Starter Apps) ที่ใช้ Gemini
• สามารถรันเดโมมากกว่า 10 แบบพร้อมแก้โค้ดไปด้วยได้ และเพราะใช้ Gemini API Key ที่ฝังมาให้ในตัวจึงใช้ฟรี
  • แต่ถ้าใช้เยอะเกินไปจะเจอ 400 error น่าจะมีอะไรทำนอง daily call limit อยู่
  • ถ้าใช้บัญชีอื่นก็รันได้

ลองเดาดู: ทำไม Google ถึงเปิดเดโมเหล่านี้?

• ช่วงหลังมานี้ Gemini ได้รับความสนใจจากความสามารถแบบ multimodal ที่ไปไกลกว่าข้อความ ทั้งเข้าใจและสร้างภาพหรือวิดีโอได้ รวมถึงความสามารถด้านการเขียนโค้ดที่ยอดเยี่ยม
• แต่ที่ผ่านมาส่วนใหญ่ยังถูกใช้อยู่แค่ใน LLM chatbot และยังไม่ค่อยมีคนทั่วไปนำไปใช้ในระดับ API มากนัก
• Google อาจกำลังหวังให้ความสามารถเหล่านี้ถูกใช้งานผ่าน API มากขึ้นและสร้างรายได้ จึงนำเดโมเหล่านี้ออกมาให้ดูหรือไม่?
  • เพราะทุกเดโมเป็นเหมือนโชว์เคสที่แสดงให้เห็นว่าความสามารถของ Gemini สามารถนำไปประกอบเป็นเว็บแอปในระดับโค้ด และเชื่อมกับ Google API อื่น ๆ ได้อย่างไร

วิเคราะห์ prompt และโค้ดของเดโม

ลองดูตัวที่ซับซ้อน 2 ตัว

Video Toys: ทำความเข้าใจวิดีโอและอธิบาย + ตัวอย่าง vibe coding

• เป็นเดโมที่ใช้ Gemini 2.5 วิเคราะห์วิดีโอ YouTube แล้วทำ vibe coding สร้างแอปสื่อการเรียนรู้แบบ interactive อย่างง่ายให้
  • ให้โมเดลวิเคราะห์วิดีโอในบทบาท “นักการศึกษาที่เชี่ยวชาญในการสร้างประสบการณ์การเรียนรู้ผ่าน interactive web app และเป็น product designer” จากนั้นทำสเปกของเว็บแอปนั้นและลงมือสร้างมัน
• วิดีโอตัวอย่างมีการวิเคราะห์เนื้อหาไว้แล้ว จึงสามารถลองรันแอปสื่อการเรียนรู้ได้ทันที
• ต่างจากเดโมอื่นที่มีไฟล์ไม่กี่ไฟล์ ตัวนี้สร้างด้วย React
• ผู้ใช้สามารถแก้ไขได้ทั้งหมดทั้งสเปกสำหรับ vibe coding ที่ Gemini สร้างให้ และโค้ดที่ถูกสร้างขึ้น
• แนะนำสำหรับคนที่อยากสร้างบริการจากวิดีโอ หรือบริการที่สร้างโค้ด

Maps Planner: ตัวอย่าง multimodal + function calling + structured output + Maps API

• เป็นเดโมที่เมื่อป้อนชื่อสถานที่แล้วจะอธิบายเกี่ยวกับสถานที่นั้น และถ้าเปิด Day Planner Mode ก็จะวางแผนท่องเที่ยวหนึ่งวันให้ พร้อมประเมินเวลาเดินทาง
• รองรับทั้ง General Explorer Mode และ Day Planner Mode ด้วย system prompt เดียว 2 โหมด
  • น่าสนใจตรงที่มีการปรับ system prompt อย่างละเอียดตามโหมดที่ผู้ใช้เลือก
• มีการกำหนดฟังก์ชันเพื่อรับส่งข้อมูลแผนที่อย่างแม่นยำ และวาดเส้นระหว่างสองตำแหน่งได้อย่างถูกต้อง จากนั้นให้ Gemini เป็นผู้เรียกใช้
  • สิ่งที่อยากทำให้ได้ผ่าน MCP ก็น่าจะเป็นความขยายต่อได้แบบนี้
• นอกจาก prompt จะดีแล้ว ยังแสดงวิธีจัดการ Maps API และข้อมูลตำแหน่งได้ดีด้วย แนะนำสำหรับคนที่อยากสร้างบริการเกี่ยวกับแผนที่

ลองทำเอง

• สามารถคัดลอกเดโมแอปมา custom ได้ และยังมี template สำหรับคนที่อยากเริ่มทำตั้งแต่ต้นอีกหลายแบบ
• ลองคัดลอกเดโมสร้างภาพชื่อ Explain Things with Lots of Tiny Cats มาทำเป็นของตัวเอง
  • เป็นเดโมที่เมื่อขอให้ช่วยอธิบายแนวคิดอะไรสักอย่าง จะสร้างเป็นเหมือนเว็บตูนโดยใช้ metaphor ของแมวหลายตัว
  • ที่น่าสนใจคือ prompt ที่ทำให้โมเดลสร้างภาพต่อเนื่อง (No commentary, just begin your explanation. Keep going until you're done.) และโค้ดที่ค่อย ๆ แสดงภาพที่สร้างขึ้นทีละภาพแบบ stream
• เปลี่ยนเป็นเวอร์ชันภาษาเกาหลี + ฮิปโป แล้วทำเป็น ฮิปโปรู้ทุกเรื่อง
  • ดึงฟอนต์ภาษาเกาหลีที่เหมาะสมจาก Google Fonts มาใช้ แล้วปรับ HTML code กับ prompt เล็กน้อย
• มีฟังก์ชันแชร์แอปของตัวเอง แต่ดูเหมือนจะทำงานได้ไม่ค่อยดี
  • เพราะไฟล์ที่เกี่ยวข้องทั้งหมดถูกเก็บไว้ใน Google Drive จึงแค่เข้าไปแชร์ไฟล์ใน Google Drive ตรง ๆ เหมือนการแชร์ไฟล์ทั่วไปก็ได้

Gemini Cookbook

• ถ้า Starter Apps เป็นตัวอย่างเว็บแอปสนุก ๆ ที่นี่ก็มีตัวอย่าง Python หลากหลายแบบ
  • มีตัวอย่าง Gemini 2.5 Flash ที่เพิ่งเปิดเผยเมื่อไม่กี่ชั่วโมงก่อนด้วย
• เหมาะสำหรับคนที่กำลังจะสร้างบริการ generative AI เอาไว้อ้างอิง