toolsDetail.backToAllTools
toolsDetail.projectRecordtoolsDetail.categories.mapsTraveltoolsDetail.statuses.openSourcetoolsDetail.updatedOn

Thailand Graffiti Planner

ตัววางแผนรายวันที่สั่งงานด้วยเสียงและอ้างอิงข้อมูลจาก Maps สำหรับตามล่าสตรีทอาร์ตทั่วประเทศไทย

คุยกับมันเหมือนเพื่อนที่รู้จักวงการ: บอกว่าคุณกำลังตามหาสตรีทอาร์ตแบบไหน แล้วมันจะดึงข้อมูลจริงจาก Google Maps และจัดทุกจุดแวะไว้ด้วยกันบนแผนที่ 3D สมจริง เพื่อให้คุณเห็นว่าทัวร์หนึ่งวันเข้ากันได้จริงแค่ไหน

toolsDetail.overview

Thailand Graffiti Planner เป็นตัววางแผนทริปที่เน้นเสียงเป็นหลัก สร้างขึ้นบนแนวคิดง่าย ๆ ว่า การจัดวันตามล่ากราฟฟิตีและสตรีทอาร์ตไม่ควรต้องเปิดแท็บเบราว์เซอร์เป็นสิบพร้อมแผนที่กระดาษ แทนที่จะเป็นแบบนั้น คุณพูดกับมันออกมาดัง ๆ แล้ว Gemini Live API จะดำเนินบทสนทนาสองทางแบบเรียลไทม์ ขณะที่แอปทำงานเบื้องหลังในการค้นหา จัดกลุ่ม และวางจุดต่าง ๆ ในและรอบ ๆ ประเทศไทย

เบื้องหลัง ตัววางแผนจะไม่แต่งสถานที่ขึ้นเองเลย ทุกคำแนะนำถูกดึงผ่าน Grounding with Google Maps ซึ่งค้นข้อมูล Places แบบสด แล้วส่งชื่อจริง พิกัด และรายละเอียดกลับมาให้โมเดลพูดถึง เมื่อสถานที่หนึ่งถูกพูดถึงในบทสนทนา แอปจะดึงตำแหน่งที่แน่นอนจากไลบรารี Places แล้วปักหมุดให้ ทำให้สิ่งที่คุณได้ยินกับสิ่งที่คุณเห็นบนแผนที่ตรงกันเสมอ

ตัวแผนที่คือหัวใจของงาน: มุมมอง Google Maps 3D สมจริงที่ตอบสนองต่อบทสนทนา แทนที่จะรอให้คุณคลิกไปมา ถามถึงย่านหนึ่งแล้วกล้องจะบินไปยังภาพมุมกว้างของพื้นที่นั้น เมื่อคุณสร้างรายชื่อสถานที่ แอปจะจัดทั้งหมดไว้ในภาพเดียว โดยใช้การคำนวณกล้องที่รับรู้ระดับความสูงเพื่อเอียง ซูม และเว้นระยะมุมมอง ไม่ให้อะไรถูกบังอยู่หลังแผงบทสนทนาบนหน้าจอ นั่นคือความหมายจริงของ “การจัดกลุ่มและวางแผนที่ทัวร์” — เห็นว่ากลุ่มสถานที่วางตัวสัมพันธ์กันอย่างไรก่อนตัดสินใจเลือกเส้นทาง

มันเป็นโปรเจกต์โอเพนซอร์สในระยะเริ่มต้น ที่ fork มาจากเทมเพลต “Interactive Day Planner” ของ Google AI Studio และปรับมาเจาะวงการสตรีทอาร์ตของไทยโดยเฉพาะ ขั้นตอนสนทนาหลักและชุดเครื่องมือใช้สถาปัตยกรรมเสียงบวกการอ้างอิงข้อมูลแบบเดียวกับที่เทมเพลตมีมา ธีมกราฟฟิตีคือคาแรกเตอร์และเคสการใช้งานเริ่มต้น และโปรเจกต์ถูกวางไว้ให้ขยายต่อได้ — คาแรกเตอร์ใหม่ เครื่องมือใหม่ และขั้นตอนทัวร์กราฟฟิตีที่เจาะจงขึ้น สามารถต่อยอดได้ผ่านรูปแบบ system prompt และ tool registry เดียวกับที่เทมเพลตสาธิตไว้

toolsDetail.keyFeatures

วางแผนด้วยเสียง

ขับเคลื่อนด้วย Gemini Live API ทั้งประสบการณ์ทำงานเป็นบทสนทนาด้วยเสียงแบบเรียลไทม์ — บอกสิ่งที่คุณต้องการแล้วได้คำตอบเป็นเสียงภาษาธรรมชาติกลับมา พร้อมข้อความถอดเสียงสดแสดงคู่กับแผนที่

อ้างอิงข้อมูลจริงจาก Google Maps

คำแนะนำสถานที่มาจาก Grounding with Google Maps ไม่ใช่จินตนาการของโมเดล ทุกจุดที่ถูกพูดถึงจะถูกจับคู่กับ Place ID จริง และดึงผ่านไลบรารี Places เพื่อพิกัดและรายละเอียดที่แท้จริง

จัดหลายจุดแวะบนแผนที่ 3D

เครื่องมือ frameLocations โดยเฉพาะ ช่วยให้โมเดลบินกล้องไปยังภาพมุมกว้างของเมืองหรือพื้นที่ แล้วจัดรายชื่อจุดแวะทั้งหมดไว้ในมุมมองเดียวเมื่อคุณวางแผนเสร็จ

การคำนวณกล้องที่รับรู้ระดับความสูง

ยูทิลิตี lookAtWithPadding ที่สร้างขึ้นเอง คำนวณจุดกึ่งกลางกล้อง มุมเอียง และระยะจากภูมิศาสตร์ของจุดที่คุณเลือก โดยคำนึงถึงระดับความสูงและแผง UI ที่บังส่วนหนึ่งของหน้าจอ ทำให้การจัดมุมมองดูสะอาดบนทุกเลย์เอาต์

แผนที่อัปเดตตามสถานะแบบรีแอ็กทีฟ

หมุดและการเคลื่อนกล้องไม่ได้ถูกสั่งตรงจากการเรียกเครื่องมือของ AI — แต่ไปอัปเดตสถานะกลางของแอป แล้วแผนที่ตอบสนองต่อสถานะนั้น เป็นรูปแบบที่แยกส่วนกัน ซึ่งทำให้มุมมองแผนที่คงเส้นคงวาไม่ว่าเครื่องมือใดจะเป็นตัวสั่งการเปลี่ยนแปลง

ออกแบบมาให้ต่อยอดได้

system prompt และ tool registry ถูกแยกออกจากกันอย่างเป็นระเบียบ ทำให้สลับ ปรับ หรือขยายคาแรกเตอร์ทัวร์กราฟฟิตีได้ — เทมเพลตพื้นฐานสาธิตเรื่องนี้ไว้แล้วด้วยการส่งคาแรกเตอร์ “ล่าสมบัติ” ที่ต่างกันโดยสิ้นเชิงบนชุดเครื่องมือเดียวกันเป๊ะ

toolsDetail.architecture

ฟรอนต์เอนด์แอปหน้าเดียวที่สร้างด้วย React 19 บน Vite ใช้ Zustand จัดการสถานะกลางของบันทึกบทสนทนา หมุดบนแผนที่ และเป้าหมายของกล้อง
การเชื่อมต่อแผนที่@vis.gl/react-google-maps โหลด Google Maps JavaScript API พร้อม React wrapper ที่สร้างเองครอบ web component gmp-map-3d รุ่นทดลอง สำหรับมุมมองแผนที่ 3D สมจริง รวมถึง API ของ Places, Geocoding และ Elevation
เลเยอร์ AI / เสียงGemini Live API ผ่าน SDK @google/genai ห่อด้วยไคลเอนต์ที่สร้างเอง ซึ่งจัดการวงจรการเชื่อมต่อ และสตรีมเสียง การถอดเสียง และเหตุการณ์การเรียกเครื่องมือแบบเรียลไทม์
แหล่งข้อมูลสถานที่ไม่มีฐานข้อมูลกราฟฟิตีแบบตายตัวหรือคัดสรรไว้ล่วงหน้า — ทุกสถานที่มาจากการค้น Grounding with Google Maps แบบสดตอนสนทนา ทำให้ผลลัพธ์ทันสมัยตรงกับสิ่งที่อยู่บน Google Maps จริง
โฮสติ้งส่งมอบเป็น static build จาก Vite ที่รันฝั่งไคลเอนต์ทั้งหมด โดยใช้ Gemini API key และ Google Maps Platform key — ไม่มีบริการแบ็กเอนด์เฉพาะ
React 19TypeScriptViteGemini Live API@google/genai@vis.gl/react-google-mapsGoogle Maps Photorealistic 3D MapsZustand

toolsDetail.bottomCtaQuestion

toolsDetail.browseAllTools