-
Chrome DevTools MCP Server ทำอะไรได้บ้างแล้วจะช่วยคนทำเว็บให้สะดวกขึ้นยังไงได้บ้าง
•
สำหรับคนที่เขียนเว็บด้วย AI มาซักพักจะเจอปัญหาคล้ายๆกันคือ มันไม่มีลูกตาที่เอาไว้ดู design หรือ test function ว่าทำงานถูกต้องมั้ย หลายๆครั้งเราก็ต้องเดาเอาหรือก็ต้องเทสด้วยมือ หลายๆครั้งก็จะเจอปัญหาว่าเขียน code ออกมาดีมากแต่ว่า error ตอนใช้จริง ช่วงที่ MCP ออกมาใหม่ๆแล้ว พวก tools เริ่มต่อ MCP ได้ก็มีคนทำ tools ที่เป็น browser ออกมาอย่าง https://browsermcp.io/ ซึ่งก็มีคนใช้อยู่ไม่น้อย แต่ก็มีคำถามว่าพวก Browser จะทำเองมั้ยหรือจะปล่อยให้ community ทำ จนกระทั่งเมื่อหลายเดือนก่อนในประชุมครั้งนึงของ GDE (Google Developer Expert) คน Google ก็เปิด Demo feature นี้ให้กลุ่ม GDE ดูว่า Chrome กำลังจะมี MCP…
-
Try creating a fully offline, web-based Knowledge-Based Chatbot with On-device AI and Chrome Built-in AI.
•
TLDR Use a technique similar to RAG (Retrieval-Augmented Generation) by pulling data from an on-device Knowledge Base to help the AI answer more accurately. Create a chatbot that runs 100% on the user’s browser, no server required. Use Transformers.js to run an AI model for converting text into vectors (Embeddings)…
-
ลอง สร้าง Knowledge Based Chatbot แบบ Full offline บนเว็บ ด้วย On-device AI และ Chrome Built-in AI
•
TLDR– สร้างแชทบอทที่ทำงาน 100% บนเบราว์เซอร์ของผู้ใช้ ไม่ต้องมีเซิร์ฟเวอร์-ใช้ Transformers.js เพื่อรันโมเดล AI สำหรับแปลงข้อความเป็น Vector (Embeddings) ในฝั่ง Client– ข้อมูลผู้ใช้เป็นส่วนตัวทั้งหมดเพราะไม่ได้ส่งไปไหน และตอบสนองได้ทันทีเพราะไม่มี Latency ของเน็ตเวิร์ค-ใช้เทคนิคคล้าย RAG (Retrieval-Augmented Generation) โดยดึงข้อมูลจาก Knowledge Base ในเครื่องมาช่วยให้ AI ตอบได้แม่นยำขึ้น ช่วงนี้ ผมอินกับ On-Device / AI Built In มาก งาน Google IO Extended ผมก็พูดเรื่องนี้ คราวนี้ก็เลยมาคิดว่า ปกติแล้วพวก AI ที่เป็น Server เนี่ยเค้าทำอะไรได้บ้างนะ แล้วมันจะเอามาทำบน Browser แทนได้มั้ยนะ ก็เลยคิดว่า เออมันมี…
-
Half a year has passed, let’s see what Built-in AI on Chrome can do today.
•
TLDR:– Chrome now includes 6 high-level functions for calling Gemini Nano: Translator, Language Detector, Summarizer, Writer/Rewriter, Proofreader, and Prompt APIs. – Some are available in Chrome 138 stable, with the Prompt API initially for Extensions. – Microsoft Edge is also introducing similar on-device AI features. Several months ago, Google launched Built-in AI…
-
ผ่านไปครึ่งปี มาดูกันว่า วันนี้ Built-in AI บน Chrome ทำอะไรได้บ้างแล้ว
•
TLDR วันนี้ Chrome ยัด highlevel function สำหรับเรียก Gemini nano มาแล้ว 6 ตัว Translator API, Language Detector API, Summarizer API, Writer / Rewriter API, Proofreader API, Prompt API บางตัวจะเริ่มใช้ได้ตั้งแต่ Chrome 138 ส่วน Prompt API ใช้ได้บน Extension ก่อน Microsoft Edge เอาด้วย function หน้าตาเหมือนกันเลย จากหลายเดือนก่อนที่ Google เปิดตัว Built-in AI มาใน chrome ที่ทำให้นักพัฒนาสามารถเข้าถึงตัว model…
-
เอา Gemma 3 มารันบน Browser มันรอดมั้ยนะ
•
เหมือนจะมี Model ใหม่ออกมา เป็น gemma3–1b-it-int4-web จากที่ทดลองไม่เจอ Bug นะครับ แต่ size ใหญ่ขึ้นนิดนึงตจาก 500MB เป็น 700MB https://huggingface.co/litert-community/Gemma3-1B-IT/blob/main/gemma3-1b-it-int4-web.task ต้องบอกก่อนว่า Idea หรือ Tools ที่ใช้รัน LLM บน Browser มีมาซักพักแล้ว ไม่ว่าจะเป็น MediaPipe LLM Inference ของ Google หรือ WebLLM แต่ปัญหาใหญ่ๆมันคือไซส์ model นี่แหละที่ต่อให้เล็กขนาดไหนก็ใหญ่ระดับ GB ทั้งนั้น เมื่อวีคก่อน Google ออก Gemma 3 ออกมา ซึ่งจุดเด่นของ Model รุ่นนี้คือมันเล็กลงมาก และที่มันเด็ดเนี่ยคือมันมี version ที่ขนาด 1…
-
Preload ของที่ต้องใช้ไว้ก่อนด้วย Speculation Rules API
•
ใครจำได้เนี่ยเมื่อก่อน ถ้าเราจะ reload อะไรซักอย่างบนหน้าเว็บไว้ก่อนเราก็จะใช้ tag prefetch, preload ที่เอาไปใส่ใน Meta แต่ปัญหาใหญ่ๆเลยคือ มัน ทำให้มันทำงาน เป็น programatic ยากมากๆ Chrome ก็เลยออกของใหม่มา นั่นคือ Speculation Rules API จริงๆมันคือ หลักการเดิมเลยคือ การที่เราระบุไว้ก่อนว่าอะไรที่น่าจะใช้แล้วบอก Browser ว่า ให้โหลดหน้านั้นมารอไว้ก่อนเลยนะ วิธีใช้ วิธีคือ เราก็แค่ประกาศ script หน้าตาประมาณด้านบนเอาไว้เพื่อบอก Browser ว่า Link ไหนในหน้าเว็บนี้ ควร preload เอาไว้ก่อน 1. Prerender – อันนี้คือ condition ของ page ที่อยากให้ prerender background ไว้ก่อนที่…
-
และแล้วทำ Picture in Picture บน Element อะไรก็ได้
•
วันก่อน ประชุม Google meet ก็เหลือบไปเห็นว่า มันมี UI ที่เป็น Pictue in picture แบบนี้โผล่ออกมา ก็ตกใจว่ามันทำได้ยังไงเพราะว่า มัน support แต่ Video นิ ก็เลยค้นจนไปเจอว่า ตอนนี้ใน Chrome เราสามารถทำ Picture in Picture บน element อะไรก็ได้แล้ว เอาจริงๆเหมือนง่ายนะแต่มีจุดงง อยู่หลายจุดมากๆเลย มาดูกันว่าต้องทำยังไงบ้าง โดยที่ผมจะทำตัวอย่างเป็น application แชท How-to 1.เราต้องสร้าง element ที่เราจะเอาไปยัดใน PIP ขึ้นมาก่อน สมมติว่าผมสร้าง element ที่เป็นแชทขึ้นมา แล้วหลังจากนั้นก็สร้าง ปุ่มที่จะ active pip ขึ้นมา แล้วพอปุ่มนั้น active…