ลอง เอา Google Gemini API มาทำเป็น Progresive Web App ง่ายๆช่วยสรุปข่าวสำหรับคนขี้เกียจอ่าน

พอดีว่าวันก่อนที่ Gemini Advance เปิดตัว ก็ได้เมลบอกว่าอยากให้ GDE ไปช่วยกันลอง Gemini API บวกกับ เค้าปล่อย Gemini Pro 1.5 ออกมาเป็น teaser ให้ เหล่า GDE เล่นด้วย ก็เลยคิดว่าจะทำอะไรดีนะ เพราะถ้าสมมติแค่ไปลอง API มันก็คงไม่ได้อะไร บวกกับมีไอเดียอยู่แล้วว่าอยาก เอาทำ PWA ที่ช่วยเราอ่านข่าวเร็วๆ เพราะเริ่มขี้เกียจเปิด Link เข้าไป เพราะนอกจากจะเจอเนื้อหายาวๆก็ยังต้องเจอ Ads อีก ซึ่ง ไม่ได้ยากอะไรเลย ง่ายมากๆ แถมถ้าใครชินกับ openai ที่เป็น GPT-3.5 หรือ GPT-4 อยู่แล้ว ก็ยิ่งง่ายเข้าไปใหญ่ เพื่อทดสอบจริงจังหน่อยผมก็เลยทำ Project เล็กๆที่ชื่อว่า ITLIDR (It Too Long I Don’t Read) ขึ้นมา เพื่อ Test เจ้า Gemini Pro

เข้าไปดู API กันก่อน

สำหรับใครที่อยากจะใช้ Model Gemini Pro หรือ Gemini Vision Pro เนี่ย เราก็สามารถเข้าไปดู Tutorial กับ เอา API Key ได้จาก https://aistudio.google.com/ ซึ่งก็ไม่ได้มีอะไรซับซ้อน แค่กดปุ่ม “Get API Key” หรือถ้าใครอยากดู code ตัวอย่างก็มี ปุ่ม Get code ให้ลองดูตัวอย่าง code แต่ละ ภาษาได้เลย

เริ่มที่แกะเนื้อหาก่อน

คือ เจ้า Model Gemini เนี่ย มันไม่ต่อ Internet ทำให้อยู่ดีๆเราจะโยน Link ไปตรงๆไม่ได้ เราต้องเอาเนื้อหาออกมาก่อน แต่ไอ้จะไปเอา HTML ออกมาทั้งดุ้นก็คงไม่ Work ตอนแรกก็คิดว่าจะไปใช้ Service ที่เป็น API based สำหรับเอาไว้ extract content ออกมาจาก link แต่คิดไปคิดมา อันนี้ทำเล่นๆ ไม่ควรที่จะต้องไปเสียเงินกับเรื่องแบบนั้น ก็เลยคิดว่า โอเคลองหา lib ที่เอาไว้ แกะ content ดูแล้วกันไม่แม่นก็ช่างมันไม่ได้ซีเรียส ก็เลยไปเจอกับ Lib https://github.com/extractus/article-extractor ที่ดูดีเลย วิธีใช้ก็ง่ายแค่โยน link เข้าไปก็จบเลย ตัวอย่าง code ง่ายๆประมาณนี้

	import { extract } from '@extractus/article-extractor'

	const input = 'https://travel.kapook.com/view241146.html'

	try {
	const article = await extract(input)
	console.log(article)
	// {
	// "url": "https://travel.kapook.com/view241146.html",
	// "title": "ร้านซาลาเปาเจ้าอร่อย กรุงเทพฯ ไส้แน่น พร้อมเดลิเวอรี่ถึงบ้าน",
	// "description": "ร้านซาลาเปาเจ้าอร่อย หนึ่งในเมนูติ่มซำสุดฮิต แป้งนุ่ม ไส้หลากสไตล์ ไม่ต้องไปซื้อถึงหน้าร้าน ก็พร้อมจัดส่งมาให้กินช่วงกักตัวอยู่บ้าน เพราะโควิด 19 ทำให้ไม่กล้าออกจากบ้านไปนั่งกินร้านอาหาร…",
	// "links": [
	// "https://travel.kapook.com/view241146.html"
	// ],
	// "image": "https://s359.kapook.com/",
	// "content": "<div>\n <p><strong> ร้านซาลาเปาเจ้าอร่อย หนึ่งในเมนูติ่มซำสุดฮิต แป้งนุ่ม ไส้หลากสไตล์ ไม่ต้องไปซื้อถึงหน้าร้าน ก็พร้อมจัดส่งมาให้กินช่วงกักตัวอยู่บ้าน</strong></p>\n <p> เพราะโควิด 19 ทำให้ไม่กล้าออกจากบ้านไปนั่งกิน<a href="https://travel.kapook.com/restaurant.html" target="_blank">ร้านอาหาร</a> แต่ก็แอบเบื่อสั่งเมนูข้าวและเมนูเส้นเหมือนกันนะ ถ้าเช่นนั้นสั่งซาลาเปากินเอาอิ่มกันดีไหม วันนี้เราขอแนะนำร้านซาลาเปาเจ้าอร่อย บริการส่งตรงถึงบ้าน ว่าแต่มีร้านไหนน่าลองบ้างมาส่องกันเลย</p><p>\n </p><h3>1. วราภรณ์ซาลาเปา</h3>\n<p></p> \n <p> ร้านซาลาเปาเจ้าดังไม่ว่าใครก็ต้องรู้จัก มีสาขาทั้งในพื้นที่กรุงเทพฯ และปริมณฑล ความเด่นของซาลาเปาคือแป้งนุ่มเนียนลื่นคอ ปัจจุบันมีทั้งหมด 10 ไส้ ได้แก่ หมูสับ หมูแดง ผัก เขียวหวานไก่ หมูสับเป็ดย่าง ครีม ถั่วดำ เผือกแปะก๊วย ลูกบัวไข่เค็ม และมะพร้าว นอกจากนี้ยังมีเมนูติ่มซำอื่น ๆ เช่น ขนมจีบ ฮะเก๋า ปูจ๋า เปาะเปี๊ยะ เป็นต้น ถ้าใครอยากจัดหนักก็มีเมนูอาหารจานเดียวอย่างเช่น ข้าวหมูแดง ข้าวไก่อบ ข้าวขาหมู และมีเมนูกับข้าวอย่างเช่น ขาหมู แกงเขียวหวานไก่ เป็นต้น</p>\n<p><strong>ช่องทางการสั่ง :</strong> ยอดสั่งขั้นต่ำ 350 บาท ไม่จำกัดพื้นที่ในการจัดส่ง คิดค่าบริการจัดส่งตามระยะทาง จากสาขาที่ให้บริการ ดูรายละเอียดสาขาได้จาก <a href="https://www.warapornsalapao.com/Service" target="_blank">warapornsalapao.com</a><br />\n <strong>เบอร์โทรศัพท์ :</strong> 086 342 2928<br />\n <strong>เฟซบุ๊ก :</strong> <a href="https://web.facebook.com/warapornsalapao.th" target="_blank">วราภรณ์ ซาลาเปา</a></p><p>\n </p><h3>2. กู่หลงเปา</h3>\n<p></p><p> ร้านซาลาเปาย่านเยาวราช พิกัดมาจากรถไฟฟ้าใต้ดิน ออกจากสถานีวัดมังกร ทางออกประตู 1 แล้วเดินมาทางสามแยกหมอมีประมาณ 2-3 นาที สูตรซาลาเปาแต้จิ๋วโบราณเกือบ 100 ปี ซาลาเปาทำมือ แป้งสีเหลืองจากมันเทศเหนียวนุ่มหนึบหนับ ยิ่งเคี้ยวยิ่งหวาน แป้งไม่ร่วนติดฟัน กับไส้หลากหลาย ได้แก่ หมูสับไข่เค็มหอมกลิ่นพริกไทย ถั่วหวานงากลิ่นหอม และเผือกกวนเคี้ยวนุ่มหวานน้อย และขอแนะนำหมั่นโถว แป้งนุ่มฟูหวานกลมกล่อม หรือหมั่นโถวอบ เปลือกด้านนอกกรอบและหอมมัน ส่วนด้านในเหนียวนุ่ม แนะนำกินคู่กับขาหมูหรือแกงต่าง ๆ</p>\n<p><strong>ช่องทางการสั่ง :</strong> Line @gulongbao, LINE MAN, Grab, Gojek และ Robinhood<br />\n <strong>เบอร์โทรศัพท์ :</strong> 095 797 5747, 082 545 5666<br />\n <strong>เฟซบุ๊ก :</strong> <a href="https://web.facebook.com/GuLongBaoSalapao" target="_blank">กู่หลงเปา – Gu Long Bao ซาลาเปาโบราณ</a></p><p>\n </p><h3>3. นิวเหลียงสุน</h3>\n<p></p><p> ร้านซาลาเปาสูตรแต้จิ๋วในตำนานมีหลายสาขา ได้แก่ สาขาเทอดไท ตลาดวัดกลาง และตลาดพลู สืบทอดความอร่อยมายาวนานกว่า 50 ปี ซาลาเปาแป้งนุ่ม รสชาติกำลังดี มีหลายไส้ ได้แก่ ไส้ชาร์โคลมันม่วง ไส้ถั่วเขียว ไส้ครีม ไส้งาดำ ไส้หมูแดง ไส้หมูสับไข่เค็ม และไส้เผือก นอกจากนี้ยังมีขนมจีบ บ๊ะจ่างไส้เค็ม และบ๊ะจ่างไส้หวาน เมนูใหม่ล่าสุดที่อยากให้ลองนั่นคือ หมั่นโถวทอดกับซอสสังขยา ความพิเศษคือทอดด้วยหม้อทอดไร้น้ำมัน กรอบนอกนุ่มใน ทาด้วยเนยแท้ มาพร้อมซอสสังขยาหวานหอม ใช้ใบเตยปลูกเองปลอดสารพิษ ไม่ใส่สารกันบูด</p>\n<p><span> <strong>ช่องทางการสั่ง<span> </span> :</strong> Line paht_paht<br />\n <strong>เบอร์โทรศัพท์ :</strong> 093 296 5650<br />\n <strong>เฟซบุ๊ก :</strong> <a href="https://web.facebook.com/newliangsoon" target="_blank">newliangsoon</a></span></p><p>\n </p><h3>4. ซาลาเปาโกอ้วน</h3>\n<p></p><p> ร้านซาลาเปาเจ้าดังจาก<a href="https://travel.kapook.com/view130982.html" target="_blank"><strong>หาดใหญ่</strong></a> ส่งตรงความอร่อยถึงกรุงเทพฯ แล้วหลายสาขา เมนูซิกเนเจอร์ที่อยากให้ลองคือซาลาเปาทอดไส้หมูแดงไข่เค็ม แป้งกรอบนอกนุ่มใน และยังมีซาลาเปานึ่งหลากหลายไส้ เช่น ซาลาเปาจักรพรรดิ ซาลาเปาไส้กุ้งไข่เค็ม ซาลาเปาหมูย่างชาร์โคล รวมทั้งยังมีหมั่นโถวนึ่ง หมั่นโถวปิ้งราดด้วยสังขยาใบเตย ขนมจีบทอด หมั่นโถวสังขยาใบเตย หมั่นโถวปิ้งเนยนม สำหรับเครื่องดื่มที่อยากแนะนำคือชาเย็นสูตรชาใต้แท้ ๆ รสชาติเข้มข้น ไม่ใส่สี</p>\n<p><strong>ช่องทางการสั่ง :</strong> @koouan, Grab, LINE MAN และ Gojek<br />\n <strong> เบอร์โทรศัพท์ :</strong> 02 494 9109<br />\n <strong> เฟซบุ๊ก :</strong> <a href="https://web.facebook.com/salapao.koouan" target="_blank">ซาลาเปาโกอ้วน</a></p><p>\n </p><h3>5. ซาลาเปาคุณเอี๊ยวสี่พระยา บางรัก</h3>\n<p></p><p> ร้านซาลาเปาสูตรโบราณ แป้งเหนียวนุ่ม ไม่มีส่วนผสมของวัตถุกันเสีย มีทั้งซาลาเปานึ่งไส้หวานและไส้เค็ม ได้แก่ หมูสับไข่เค็ม หมูแดง ครีม เผือก งาดำ และเห็ด โดยเฉพาะซาลาเปาไส้เห็ด ไส้ยอดนิยม หอมกลิ่นพริกไทย ถ้ายังไม่อิ่มลองจัดขนมจีบกุ้ง หรือบ๊ะจ่างไส้แน่น ๆ สักลูก แต่ละลูกรวมวัตถุดิบคุณภาพ 8 ชนิด ได้แก่ ไข่แดงเค็ม กุ้งแห้ง แปะก๊วย ถั่วลิสง กุนเชียง เห็ดหอม หมู และเผือกกวน รสเข้มข้นหอมพริกไทย สำหรับใครอยากจัดหนักสามารถสั่งขาหมูพะโล้ น้ำพะโล้หอม ๆ เนื้อหมูนุ่ม ๆ มากินกับข้าวสวยก็อร่อย</p>\n<p><strong> ช่องทางการสั่ง :</strong> @salapaokhunewe, LINE MAN, Robinhood และ Gojek<br />\n <strong>เบอร์โทรศัพท์ :</strong> 02 235 6660, 089 664 4641<br />\n <strong> เฟซบุ๊ก :</strong> <a href="https://web.facebook.com/salapaokhunewe" target="_blank">ซาลาเปาคุณเอี๊ยว</a></p><p>\n </p><h3>6. นพเก้าซาลาเปา (NOPPAKAO SALAPAO)</h3>\n<p></p><p> ซาลาเปาร้านดังย่านถนนประดิพัทธ์ อร่อยนุ่ม ราคาคุ้มค่า เริ่มต้นเพียง 15 บาท มีหลากหลายไส้ ได้แก่ หมูสับ หมูแดง ไข่เค็ม ผักเห็ดหอม ถั่วทอง ครีม ถั่วดำ เผือกแปะก๊วย งาดำ และมันม่วง ซาลาเปาที่อยากให้ลองคือ บิ๊กเปาไส้หมูสับฮ่องเต้ ไข่เค็มเต็มคำ กุนเชียงและเห็ดหอมชิ้นใหญ่ นอกจากนี้ยังมีขนมจีบปู ขนมจีบกุ้ง และบ๊ะจ่าง</p>\n<p><strong>ช่องทางการสั่ง :</strong> Line @pao9, Grab, LINE MAN และ Gojek<br />\n <strong> เบอร์โทรศัพท์ :</strong> 02 278 0424, 02 271 1988<br />\n <strong>เฟซบุ๊ก :</strong> <a href="https://web.facebook.com/NOPPAKAOTHESALAPAO" target="_blank">นพเก้าซาลาเปา</a></p><p>\n </p><h3>7. ร้านซาลาเปา ไต้แป๊ะ เยาวราช</h3>\n<p></p><p> ร้านซาลาเปาเจ้าเก่าย่านเยาวราช เปิดกิจการมากว่า 80 ปี พิกัดอยู่ทางเข้าที่จอดรถของตึกฮั่วเซ่งเฮง หรือติดกับภัตตาคารตั้งใจอยู่ ความพิเศษของซาลาเปาคือเป็นแป้งหมักแบบโบราณ สีออกเหลือง มีความนุ่มและหอมอร่อย มีทั้งหมด 5 ไส้ ได้แก่ หมูสับไข่เค็มและเห็ดหอม ถั่วเหลือง ครีมคัสตาร์ด งาดำ และเผือกแปะก๊วย ปั้นใหม่สดทุกวัน นอกจากนี้ยังมีขนมจีบหมูและขนมจีบกุ้ง และน้ำเก๊กฮวยไว้ดื่มเพิ่มความสดชื่นด้วย</p>\n<p><strong>ช่องทางการสั่ง :</strong> Line zzaoozz, LINE MAN<br />\n <strong>เบอร์โทรศัพท์ :</strong> 089 664 9250, 088 687 553<br />\n <strong>เฟซบุ๊ก :</strong> <a href="https://web.facebook.com/bigwhitebun" target="_blank">ร้านซาลาเปา ไต้แป๊ะ</a></p><p>\n </p><h3>8. ลิ้มอ่วงซุย</h3>\n<p></p><p> ร้านขนมจีบ-ซาลาเปาเก่าแก่ ย่านเยาวราช เปิดมานานกว่า 60 ปี ตั้งอยู่ในตลาดเล่งบ๊วยเอี๊ยะ ซอยเจริญกรุง 16 ตรงข้ามกับสถานีรถไฟฟ้าวัดมังกร ทางออกที่ 3 จำหน่ายซาลาเปานึ่งหลายไส้ ได้แก่ หมูสับไข่เค็ม หมูแดง ครีม และถั่วดำ นอกจากนี้ยังมีขนมจีบหมูผสมกุ้ง สูตรดั้งเดิม ลูกใหญ่เน้นไส้ บ๊ะจ่างไส้เค็มและหวาน ถ้าชอบกินของทอดแนะนำฮ่อยจ๊อปู แฮ่กึ๊นกุ้ง และขลุ่ยกุ้ง มื้อเย็นถ้าใครอยากกินสุกี้ที่ร้านก็มีเครื่องประกอบสุกี้หรือก๋วยเตี๋ยว ได้แก่ ลูกชิ้นปลา ลูกชิ้นกุ้ง และฮือก้วย</p>\n<div>\n <p><strong>ช่องทางการสั่ง :</strong> Inbox facebook, LINE MAN, Robinhood และ Grab<br />\n <strong> เบอร์โทรศัพท์ :</strong> 02 221 7985<br />\n <strong> เฟซบุ๊ก :</strong> <a href="https://web.facebook.com/Limauangzhui" target="_blank">ลิ้มอ่วงซุย ขนมจีบ-ซาลาเปา เจ้าดังในเยาวราช</a></p></div><p>\n </p><h3>9. ต้นไหมขนมจีบซาลาเปา ประชานิเวศน์ 3</h3>\n<p></p><p> ร้านซาลาเปาเจ้าเด็ดย่านนนทบุรี พิกัดใกล้ธนาคารไทยพาณิชย์ สาขาวัดบัวขวัญ จำหน่ายซาลาเปาราคาสุดคุ้มแค่ 15 บาท แป้งนุ่มสีขาวไส้แน่น มีทั้งไส้หมูสับ หมูแดง ครีม ถั่วดำ และถั่วเหลือง และยังมีขนมจีบหมูสับ โรยกระเทียมเจียว กินกับพริกน้ำส้มรสแซ่บ สำหรับใครที่อยากกินสะดวกหรืออยากสั่งแจกในงานต่าง ๆ มีบริการชุดสุดคุ้มในราคาพิเศษ 45 บาท ประกอบด้วย ขนมจีบ 5 ลูก และซาลาเปา 1 ลูก เลือกไส้ได้</p>\n<div>\n <p><strong>ช่องทางการสั่ง :</strong> Inbox facebook, LINE MAN<br />\n <strong>เบอร์โทรศัพท์ :</strong> 089 666 6691<br />\n <strong>เฟซบุ๊ก :</strong> <a href="https://web.facebook.com/kanyakonkampa" target="_blank">ต้นไหมขนมจีบซาลาเปาประชานิเวศน์ 3</a></p></div><p>\n </p><h3>10. โตซาลาเปา</h3>\n<p></p><p> ร้านซาลาเปาย่านพระนคร อยู่ใกล้สี่แยกสำราญราษฎร์ ติดปากทางเข้า-ออกโรงพักสำราญราษฎร์ ซาลาเปาแป้งนุ่มไส้เยอะ ไส้มีให้เลือกถึง 6 ไส้ ได้แก่ หมูแดง หมูสับ ครีม ไส้ผักเกาลัด ไส้เผือกลูกบัว และถั่วดำแปะก๊วย และยังมีขนมจีบไส้หมูผสมกุ้งให้เลือกอีกด้วย</p>\n<p><strong>ช่องทางการสั่ง :</strong> Line @tohsalapao, LINE MAN และ Gojek<br />\n <strong> เบอร์โทรศัพท์ :</strong> 02 221 5074, 098 959 3668<br />\n <strong>เฟซบุ๊ก :</strong> <a href="https://web.facebook.com/toh.salapao" target="_blank">โต ซาลาเปา</a></p><p>\n </p><h3>11. ศุภชัย ซาลาเปา – ประดิพัทธ์</h3>\n<p></p><p> ร้านซาลาเปาเจ้าอร่อย เปิดกิจการมานานกว่า 42 ปี มีทั้งหมด 3 สาขา ได้แก่ สาขาประดิพัทธ์ ปากซอยประดิพัทธ์ 8 สาขาเมืองทองธานี ในปั๊มน้ำมันบางจาก ตรงข้ามมหาวิทยาลัยสุโขทัยฯ และสาขา Center One อนุสาวรีย์ชัยฯ ชั้น 2 ซาลาเปาทุกลูกปั้นมือทั้งหมดด้วยความใส่ใจ มีทั้งหมด 12 รสชาติ โดยเฉพาะซาลาเปาไส้ถั่วดำ เมนูซิกเนเจอร์ที่ไส้ถั่วดำมีความเนียนละเอียด และซาลาเปาไส้สังขยาลาวา รสหวานแบบพอดี นอกจากนี้ยังมีขนมเปี๊ยะถั่วไข่เค็ม ขนมเปี๊ยะถั่วไข่เค็มฝอยทอง บ๊ะจ่าง และขนมจีบ สำหรับคนรักสุขภาพต้องลองน้ำสมุนไพร ได้แก่ น้ำส้ม น้ำมะขาม น้ำเก๊กฮวย น้ำเก๊กฮวยผสมหล่อฮั้งก้วย</p>\n<p><strong> ช่องทางการสั่ง :</strong> Line @suppachaipao, Grab, LINE MAN และ Foodpanda<br />\n <strong>เบอร์โทรศัพท์ :</strong> 02 278 3306<br />\n <strong>เฟซบุ๊ก :</strong> <a href="https://web.facebook.com/suppachaisalapao1978" target="_blank">Suppachai salapao – ศุภชัย ซาลาเปา</a></p><p>\n </p><h3>12. อร่อย ขนมจีบ ซาลาเปา</h3>\n<p></p><div> <p> ร้านซาลาเปาอร่อยย่านนางเลิ้ง ร้านเป็นตึกแถวอยู่บนถนนพะเนียงฝั่งหลังวัดโสมนัส ซาลาเปาเด็ดตรงแป้งนุ่มมาก ทิ้งไว้นานก็ยังนุ่มอยู่ มีหลายไส้ ได้แก่ หมูสับไข่เค็ม หมูแดงเห็ดหอม เผือก และงาดำผสมถั่วดำ นอกจากนี้ยังมีขนมจีบหมู หมั่นโถว บ๊ะจ่าง และปลาเส้นทอด</p><p>\n <strong>ช่องทางการสั่ง :</strong> Grab<br />\n <strong>เบอร์โทรศัพท์ :</strong> 02 282 2391, 089 926 5845<br />\n <strong>เฟซบุ๊ก :</strong> <a href="https://web.facebook.com/%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%99%E0%B8%AD%E0%B8%A3%E0%B9%88%E0%B8%AD%E0%B8%A2%E0%B8%82%E0%B8%99%E0%B8%A1%E0%B8%88%E0%B8%B5%E0%B8%9A-%E0%B8%8B%E0%B8%B2%E0%B8%A5%E0%B8%B2%E0%B9%80%E0%B8%9B%E0%B8%B2-%E0%B8%A7%E0%B8%B1%E0%B8%94%E0%B9%82%E0%B8%AA%E0%B8%A1%E0%B8%99%E0%B8%B1%E0%B8%AA-1998722780193348/" target="_blank">ร้าน "อร่อย" ขนมจีบ ซาลาเปา วัดโสมนัส</a></p></div><p>\n </p><h3>13. ซาลาเปาทับหลี</h3>\n<p></p><div> <p> ร้านซาลาเปาเจ้าเก่าแก่ มีหลายสาขาทั่วกรุงเทพฯ แป้งนุ่มทำสดใหม่ทุกวัน ไม่ใส่สารกันบูด ขอแนะนำซาลาเปาไส้หมูค้อง หอมพริกไทยดำสูตรทางใต้ หรือซาลาเปาไส้ไก่คั่วกลิ้ง รสชาติจัดจ้าน หอมพริกแกงคั่วสด สำหรับคนไม่กินเนื้อสัตว์ขอแนะนำซาลาเปาไส้ผักรวม ผักเน้น ๆ เต้าหู้เป็นชิ้น อร่อยเข้มข้นได้ประโยชน์ และยังมีขนมจีบหมูล้วน ไม่ผสมแป้งและผงฟู บ๊ะจ่างเครื่องแน่น มีทั้งเห็ดหอม แปะก๊วย กุนเชียง ไข่แดงเค็ม หมูชิ้น เผือกหวาน เม็ดบัว กุ้งแห้ง และถั่วลิสง</p><p>\n <strong> ช่องทางการสั่ง :</strong> @tublee, Grabfood, LINE MAN, Gojek และ Foodpanda<br />\n <strong>เบอร์โทรศัพท์ :</strong> 098 654 4142<br />\n <strong>เฟซบุ๊ก :</strong> <a href="https://web.facebook.com/tubleeofficial" target="_blank">ซาลาเปาทับหลี ประกายจันทร์</a></p></div><p>\n </p><h3>14. ร้านซาลาเปาเชอรี่</h3>\n<p></p><div>\n <p> ร้านซาลาเปาเจ้าดัง เปิดบริการมาแล้วกว่า 20 ปี อยู่ปากซอยปุณณวิถี 25 สุขุมวิท 101 จำหน่ายซาลาเปาไส้หมูสับไข่เค็ม ใส่เห็ดหอมและพริกไทย ซาลาเปาไส้ครีม รสชาติหอมนมหวานพอดี และซาลาเปาไส้ชาเขียว วัตถุดิบจากชาเขียวผสมถั่วเขียว</p><p>\n <strong>ช่องทางการสั่ง :</strong> LINE MAN, Foodpanda และ Gojek<br />\n <strong> เบอร์โทรศัพท์ :</strong> 02 311 7722<br />\n <strong> เฟซบุ๊ก :</strong> <a href="https://web.facebook.com/cherrysalapao.official" target="_blank">Cherrysalapao เชอร์รี่</a></p></div><div>\n<p> <a href="https://cooking.kapook.com/view181866.html" target="_blank">ซาลาเปาฟักทอง อร่อยเหมือนเดิม เติมความมุ้งมิ้ง</a></p>\n<p> <a href="https://cooking.kapook.com/view171871.html" target="_blank">ซาลาเปาไส้หมูสับ สูตรติ่มซำมือใหม่ทำได้ใช้แป้งสำเร็จรูป</a></p>\n<p> <a href="https://cooking.kapook.com/view140946.html" target="_blank">ซาลาเปาหมูสับไข่เค็ม เมนูติ่มซำเหมือนเดิม เพิ่มเติมความมุ้งมิ้ง</a></p>\n<div> <p><a href="https://cooking.kapook.com/view166850.html" target="_blank">ซาลาเปาไส้ครีม ซาลาเปาไส้หมูแดง สูตรแป้งซาลาเปาเหนียวนุ่มอร่อยได้ข้ามวัน</a></p><p>\nขอบคุณข้อมูลจาก<br />\n<a href="https://web.facebook.com/warapornsalapao.th" target="_blank">เฟซบุ๊ก วราภรณ์ ซาลาเปา</a>, <a href="https://web.facebook.com/GuLongBaoSalapao" target="_blank">เฟซบุ๊ก กู่หลงเปา – Gu Long Bao ซาลาเปาโบราณ</a>, <a href="https://web.facebook.com/newliangsoon" target="_blank">เฟซบุ๊ก newliangsoon</a>, <a href="https://web.facebook.com/salapao.koouan" target="_blank">เฟซบุ๊ก ซาลาเปาโกอ้วน</a>, <a href="https://web.facebook.com/salapaokhunewe" target="_blank">เฟซบุ๊ก ซาลาเปาคุณเอี๊ยว</a>, <a href="https://web.facebook.com/NOPPAKAOTHESALAPAO" target="_blank">เฟซบุ๊ก นพเก้าซาลาเปา</a>, <a href="https://web.facebook.com/bigwhitebun" target="_blank">เฟซบุ๊ก ร้านซาลาเปา ไต้แป๊ะ</a>, <a href="https://web.facebook.com/Limauangzhui" target="_blank">เฟซบุ๊ก ลิ้มอ่วงซุย ขนมจีบ-ซาลาเปา เจ้าดังในเยาวราช</a>, <a href="https://web.facebook.com/kanyakonkampa" target="_blank">เฟซบุ๊ก ต้นไหมขนมจีบซาลาเปาประชานิเวศน์ 3</a>, <a href="https://web.facebook.com/toh.salapao" target="_blank">เฟซบุ๊ก โต ซาลาเปา</a>, <a href="https://web.facebook.com/suppachaisalapao1978" target="_blank">เฟซบุ๊ก Suppachai salapao – ศุภชัย ซาลาเปา</a>, <a href="https://web.facebook.com/%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%99%E0%B8%AD%E0%B8%A3%E0%B9%88%E0%B8%AD%E0%B8%A2%E0%B8%82%E0%B8%99%E0%B8%A1%E0%B8%88%E0%B8%B5%E0%B8%9A-%E0%B8%8B%E0%B8%B2%E0%B8%A5%E0%B8%B2%E0%B9%80%E0%B8%9B%E0%B8%B2-%E0%B8%A7%E0%B8%B1%E0%B8%94%E0%B9%82%E0%B8%AA%E0%B8%A1%E0%B8%99%E0%B8%B1%E0%B8%AA-1998722780193348/" target="_blank">เฟซบุ๊ก ร้าน "อร่อย" ขนมจีบ ซาลาเปา วัดโสมนัส</a>, <a href="https://web.facebook.com/tubleeofficial" target="_blank">เฟซบุ๊ก ซาลาเปาทับหลี ประกายจันทร์</a>, <a href="https://web.facebook.com/cherrysalapao.official" target="_blank">เฟซบุ๊ก Cherrysalapao เชอร์รี่</a></p></div>\n</div> \n </div>",
	// "author": "@kapookdotcom",
	// "favicon": "https://www.kapook.com/favicon.ico",
	// "source": "travel.kapook.com",
	// "published": "2022-07-05T14:27:35+07:00",
	// "ttr": 146,
	// "type": "website"
	// }
	} catch (err) {
	console.error(err)
	}

view raw extracts.js hosted with ❤ by GitHub

ซึ่งพอเราได้ content ออกมา มันก็มักจะมี html tag ติดมาด้วยก็แค่ remove ออก

เขียน prompt ยังไงดี

เอาจริงๆเราก็ลอง prompt อยู่หลายอันพอสมควร แต่อันที่รู้สึกว่ามันน่าจะโอเคที่สุดก็คือ

This is an article or news from website ${request.body.url}. Please summary to 1 paragraph in the ${language} lanaguage. This is full article ${plainContent}

เพราะตอนแรกลองไม่บอกว่า จะเอาแค่ 1 paragraph ตัว Model ก็ พ่นออกมายาวกว่าบทความจริงอีก แถมถ้าไม่บอกภาษาบางครั้งก็พ่นออกมาเป็นภาษา อังกฤษ ทั้งที่ระบุไปแล้วว่าเอาภาษาเดียวกับ บทความก็ยังมีหลุดมาบ้างทำให้ต้อง specific ภาษาลงไป ซึ่ง ถ้าใครอยากเทส prompt ก่อน ก็ลองในหน้า AI studio ได้เลย ยังไม่ต้องลองเขียน code ก็ได้ เอาจนกว่าเราจะโอเคกับมันก็ค่อยมาลองเขียนเป็น code

ถึงเวลาโยน data ให้ Gemini

ตอนแรกเนี่ยเราก็กะว่าจะเขียน ให้ ยิง API เอง เพราะไม่รู้ว่ามันมี lib ของ Google สำเร็จอยู่แล้ว แต่พอไปกดดู code ตัวอย่างก็เลยตัดสินใจว่า ใช้ของที่เค้าเตรียมให้ดีกว่า จะได้ดูดีด้วย ซึ่งก็ลงเป็น npm ปกติเลย https://www.npmjs.com/package/@google/generative-ai ตอนแรกเนี่ยก็คิดว่าจะให้มัน call ผ่าน frontend ให้หมดเลยขี้เกียจ deploy backend แต่พอมาคิดไปคิดมาแล้ว ถ้าต้องเปิด API Key ออกหน้าเว็บก็คงไม่ใช่เรื่องดีเท่าไหร่ ก็เลยย้าย logic ที่จะคุยกับ Gemini ไปไว้ที่ Backend ให้หมด สำหรับ code ที่เอาไว้โยนไปหา Gemini ก็ง่ายแสนจะง่าย

	const model = genAI.getGenerativeModel({ model: "gemini-pro" });

	const prompt = `This is an article or news from website ${request.body.url}. Please summary to ${paragraph} paragraph in the ${language} lanaguage. This is full article ${plainContent}`;

	const result = await model.generateContent([prompt]);

	console.log(result.response.text());

view raw gemini.js hosted with ❤ by GitHub

พอได้ข้อมูลออกมาเป็น response text ก็แค่เอาไปแสดงผลบนหน้าบ้าน แค่นี้จบได้ผลออกมาตามนี้เลย

เพิ่ม feature คุยกับข่าว / Share target เข้าไปเพิ่ม

พอเริ่มทำแล้วก็คิดว่ามันน่าจะดีนะถ้าเราให้คนคุยกับข่าวได้ ก็เลยเพิ่มกล่องคล้ายๆกล่องแชทเข้าไปเพื่อให้คนพิมพ์คุยกับข่าวได้ ซึ่งก็ทำ process ทั้งหมดคล้ายๆเดิม เปลี่ยนแค prompt

This is article or news from ${request.body.url}. Based on this is an article or news ${plainContent} please answer this question “${request.body.question}”.

ซึ่งผลออกมาก็เรียกว่าพอใช้ได้ บางทีก็ตอบได้บ้างไม่ได้บ้าง อันนี้คือผลลัพธ์ที่เราถาม Gemini ว่า เค้ามีปัญหาอะไรกัน

เพื่อให้ใช้ ใน Android ง่าย ผมเลย เพิ่ม share target เข้าไป จะได้ไม่ต้องมาคอย Copy url มาแปะทุกครั้งที่จะใช้ ซึ่งก็ เพิ่ม code block นี้เข้าไปในไฟล์ manifest.json ก็จบเลย

{"share_target": { "action": "/", "method": "GET", "params": { "title": "title", "text": "text", "url": "url" } }}

คราวนี้เราก็สามารถใช้แชร์ใน Android แชร์ link ข่าวตรงๆมาหา App เราได้แล้ว

ใครที่อยากจะลองใช้ App นี้ก็เข้าไปได้ที่ https://itlidr.thangman22.com/ นะครับ หรือถ้าใครอยากเข้าไปดู code ว่าทำงานยังไงก็ไปดูได้ที่ repo

https://github.com/thangman22/itlidr

คราวนี้เรามาพูดถึงตัว Gemini บ้างดีกว่า

Gemini ดีจริงหรือเปล่า?

คนก็สงสัยว่าเราควรใช้ Google Gemini pro หรือ GPT ดีกว่า ผมก็เลยลองเอา prompt เดียวกันไป รันใน model ทุกตัว เพื่อดูว่า model แต่ละตัวตอบอะไรออกมา

This is an article or news from website https://thestandard.co/returning-an-illegal-gun-is-not-a-crime/. Please summary to 1 paragraph in the thai lanaguage. This is full articleวันนี้ (26 กุมภาพันธ์) ไตรศุลี ไตรสรณกุล เลขานุการรัฐมนตรีว่าการกระทรวงมหาดไทย ในฐานะโฆษกกระทรวงมหาดไทย เปิดเผยว่า กระทรวงมหาดไทยได้ดำเนินการตามข้อสั่งการที่ เศรษฐา ทวีสิน นายกรัฐมนตรี และรัฐมนตรีว่าการกระทรวงการคลัง ได้ให้กระทรวงมหาดไทยกำหนดมาตรการให้ผู้ครอบครองอาวุธปืนและเครื่องกระสุนปืนผิดกฎหมาย นำอาวุธปืนและเครื่องกระสุนปืนมาส่งมอบให้แก่ทางราชการ พร้อมกำหนดยกเว้นความรับผิดทางอาญาให้แก่บุคคลนั้นด้วย เพื่อให้เป็นมาตรการลดจำนวนปืน สิ่งเทียมอาวุธปืนผิดกฎหมาย ที่มีผู้ใช้ในการก่ออาชญากรรมและความรุนแรงในสังคมล่าสุด กระทรวงมหาดไทยได้ยกร่างพระราชกำหนด (พ.ร.ก.) ยกเว้นความรับผิดทางอาญาให้แก่ผู้นำอาวุธปืนหรือเครื่องกระสุนปืนที่ไม่ได้รับอนุญาตหรือที่กฎหมายห้ามออกใบอนุญาต หรือสิ่งเทียมอาวุธ มามอบให้แก่ทางราชการ พ.ศ. … พร้อมกับยกร่างหลักเกณฑ์และวิธีการในการส่งมอบการรับมอบการเก็บรักษาและการทำลายอาวุธปืนที่ได้มีการนำมาคืนดังกล่าวเสร็จเรียบร้อยแล้ว และ อนุทิน ชาญวีรกูล ในฐานะรัฐมนตรีว่าการกระทรวงมหาดไทย ได้ลงนามในร่าง พ.ร.ก. และร่างหลักเกณฑ์ดังกล่าวแล้ว ขณะนี้อยู่ระหว่างการนำเสนอให้สำนักเลขาธิการคณะรัฐมนตรี (สลค.) นำไปบรรจุเป็นวาระเสนอให้ที่ประชุมคณะรัฐมนตรี (ครม.) พิจารณาอนุมัติและดำเนินการตามขั้นตอนทางกฎหมายเพื่อมีผลบังคับต่อไปไตรศุลีกล่าวต่ออีกว่า ที่รัฐบาลและกระทรวงมหาดไทยได้มีมาตรการทางกฎหมายดังกล่าว เนื่องด้วยปัจจุบันได้เกิดกรณีการประทุษร้ายทำลายชีวิตและทรัพย์สินของประชาชนที่ปรากฏขึ้นจำนวนมาก ซึ่งสถิติปี 2559–2566 พบว่า อาวุธปืนที่ใช้ก่อเหตุอาชญากรรมนั้น ร้อยละ 83 เป็นอาวุธปืนผิดกฎหมาย ขณะที่สิ่งเทียมอาวุธปืนซึ่งดัดแปลงเป็นอาวุธปืนได้เพิ่มจำนวนมากขึ้นจากการลักลอบทำ ดัดแปลง สั่ง นำเข้า หรือค้า ทั้งช่องทางปกติและช่องทางออนไลน์ ซึ่งเพียงการจับกุมปราบปรามไม่สามารถแก้ไขปัญหาได้ทั้งหมด จำเป็นต้องมีหลายมาตรการควบคู่กัน เพื่อเร่งลดผลกระทบต่อทางสังคมจากปัญหาอาวุธปืน ทั้งทางด้านความเชื่อมั่น ความปลอดภัยสาธารณะ ความสงบเรียบร้อย ความมั่นคง ทางเศรษฐกิจ การท่องเที่ยว และการลงทุน”การควบคุมอาวุธปืนและสิ่งเทียมอาวุธปืนให้มีจำนวนลดน้อยลงถือเป็นกรณีฉุกเฉิน จำเป็นเร่งด่วนที่ต้องเร่งดำเนินการ เพื่อประโยชน์ในอันที่จะรักษาความปลอดภัยของประเทศและความปลอดภัยสาธารณะ ซึ่งการออก พ.ร.ก.ยกเว้นความรับผิดทางอาญาให้แก่ผู้นำอาวุธปืนหรือสิ่งเทียมอาวุธที่ไม่ได้รับอนุญาตมาส่งมอบให้ทางราชการในเวลาที่กำหนด พร้อมกำหนดเกณฑ์การส่งมอบ การเก็บรักษา และการทำลายอาวุธปืนดังกล่าว จะเป็นมาตรการที่จะช่วยให้มีการลดจำนวนอาวุธปืนในระบบลงได้ในเวลาอันสั้น” ไตรศุลีกล่าว

อันนี้คือ Prompt ที่ส่งไปถาม ทั้ง 4 Model ( Gemini Pro 1.0, Gemini Pro 1.5, GPT 3.5 Turbo, GPT 4)

ผลจาก Gemini 1.0

รัฐบาลไทยได้ออก พ.ร.ก. ยกเว้นความรับผิดทางอาญาให้แก่ผู้ส่งมอบอาวุธปืนผิดกฎหมายและสิ่งเทียมอาวุธปืนที่ไม่ได้รับอนุญาต โดยมีจุดประสงค์เพื่อลดจำนวนอาวุธปืนที่ใช้ก่ออาชญากรรมและความรุนแรงในสังคม รวมถึงเป็นการป้องกันการใช้ในทางที่ผิดและส่งผลกระทบต่อความปลอดภัยสาธารณะ

ผลจาก Gemini 1.5

กระทรวงมหาดไทยได้ดำเนินการตามคำสั่งของนายกรัฐมนตรี เศรษฐา ทวีสิน ในการกำหนดมาตรการเพื่อลดจำนวนอาวุธปืนผิดกฎหมาย โดยได้ร่างพระราชกำหนด (พ.ร.ก.) ยกเว้นความรับผิดทางอาญาสำหรับผู้ที่นำอาวุธปืนหรือเครื่องกระสุนปืนที่ผิดกฎหมายมาส่งมอบให้แก่ทางราชการ มาตรการนี้เกิดขึ้นเนื่องจากปัญหาอาชญากรรมและความรุนแรงที่เกิดจากอาวุธปืนผิดกฎหมายและสิ่งเทียมอาวุธปืนที่เพิ่มจำนวนมากขึ้น พ.ร.ก. นี้จะช่วยลดจำนวนอาวุธปืนในระบบลงได้อย่างรวดเร็ว และจะช่วยรักษาความปลอดภัยของประเทศและความปลอดภัยสาธารณะ

ผลจาก GPT 3.5 Turbo

วันนี้ ไตรศุลี ไตรสรณกุล เลขานุการรัฐมนตรีว่าการกระทรวงมหาดไทย เปิดเผยว่า กระทรวงมหาดไทยได้ดำเนินการตามข้อสั่งการที่ เศรษฐา ทวีสิน นายกรัฐมนตรี และรัฐมนตรีว่าการกระทรวงการคลัง ได้ให้ กำหนดมาตรการให้ผู้ครอบครองอาวุธปืนและเครื่องกระสุนปืนผิดกฎหมาย นำอาวุธปืนและเครื่องกระสุนปืนมาส่งมอบให้แก่ทางราชการ พร้อมกำหนดยกเว้นความรับผิดทางอาญาให้แก่บุคคลนั้นด้วย เพื่อให้เป็นมาตรการลดจำนวนปืนสิ่งเทียมอาวุธปืนผิดกฎหมาย ที่มีผู้ใช้ในการก่ออาชญากรรมและความรุนแรงในสังคมล่าสุด การออก พ.ร.ก. ยกเว้นความรับผิดทางอาญาให้แก่ผู้นำอาวุธปืนหรือสิ่งเทียมอาวุธที่ไม่ได้รับอนุญาตมาส่งมอบให้ทางราชการ และร่างหลักเกณฑ์ดังกล่าว จะช่วยให้มีการลดจำนวนอาวุธปืนในระบบลงได้ในเวลาอันสั้น ไม่ว่าใครที่ลดปืนมาส่งจะได้รับการยกเว้นความรับผิดทางอาญาไปเช่นกัน นอกจากนี้ ยังต้องมีมาตรการควบคู่กัน เพื่อเร่งลดผลกระทบต่อทางสังคมจากปัญหาอาวุธปืน ด้วยความปลอดภัยของประเทศและความปลอดภัยสาธารณะ โดยรัฐบาลและกระทรวงมหาดไทยเข้ามีมาตรการดังกล่าวเพื่อลดการใช้อาวุธปืนในการก่ออาชญากรรมในสังคมลงได้ในเร็ววันข้างหน้า.

ผลจาก GPT 4 Turbo

กระทรวงมหาดไทยประกาศมาตรการตามคำสั่งของนายกรัฐมนตรี เศรษฐา ทวีสิน ให้มีการกำหนดยกเว้นความรับผิดทางอาญาสำหรับผู้ที่ครอบครองอาวุธปืนและเครื่องกระสุนปืนผิดกฎหมายเมื่อนำมาส่งคืนให้กับทางราชการ เพื่อลดจำนวนอาวุธที่ใช้ในการก่ออาชญากรรมและความรุนแรงในสังคม โดยมีการยกร่างพ.ร.ก. เกี่ยวกับหลักเกณฑ์ในการส่งมอบ การเก็บรักษา และการทำลายอาวุธดังกล่าว ซึ่งอยู่ระหว่างการนำเสนอให้คณะรัฐมนตรีพิจารณา เพื่อดำเนินการตามกฎหมายและลดผลกระทบจากปัญหาอาวุธปืนต่อสังคมอย่างเร่งด่วนและมีประสิทธิภาพ.

สำหรับผมแล้วเนื่องจาก context มันไม่ได้ซับซ้อนมากก็เลยไม่คิดว่าแต่ละตัวต่างกันเท่าไหร่ จะมีแต่ GPT 3.5 ที่บอกให้เขียน paragraph เดียว แต่ดันเขียนมาซะยาวกว่าข่าวเลย ส่วนเรื่องการใช้ภาษาก็ดูไม่ได้ต่างกันเท่าไหร่

แล้วเรื่องราคาหละ?

ต้องบอกว่าตอนนี้ Gemini Pro ยังฟรีอยู่เนื่องจากยังเป็น beta เพราะฉะนั้นการเทียบฟรีกับ ไม่ฟรีก็คงไม่สมเหตุสมผล ผมก็เลยไปเอาราคาที่ Google ประกาศว่าหลัง GA จะคิดเงินมาเทียบกันว่าทั้งสอง

จะเห็นว่าถ้าเทียบกับ GPT แล้ว Gemini ราคาถูกกว่ามากๆ ไม่นับว่าเทียบกับ GPT4 ที่ถูกกว่า เป็น 100 เท่า แถม เอาจริงๆ ส่วนตัวผมก็รู้สึกว่า Gemini Pro ก็ไม่ได้ต่างกับ GPT 4 ขนาดนั้น แต่สุดท้ายแล้วก็ต้องไปลองครับว่าอันไหนดีกับ Application ของคุณและตัวไหนตอบโจทย์คุณมากที่สุด

Links

https://github.com/thangman22/itlidr https://github.com/thangman22/itlidr https://github.com/thangman22/itlidr