[ ... ] ให้ตรงงานคุณก่อน copyผมอยากทำเว็บแอปตัวหนึ่งด้วย Python ชื่อโปรเจกต์ [ai-content-poster] ช่วยวางโครงเริ่มต้นให้หน่อยครับ สิ่งที่แอปนี้จะทำ (เล่าให้เห็นภาพก่อน): ดึงข่าวมา → ให้ AI สรุปเป็นภาษาไทย → สร้างรูป → โพสต์ขึ้นเพจ Facebook ให้อัตโนมัติ ตอนนี้ผมขอแค่โครงเปล่าๆ ที่รันขึ้นก่อน เดี๋ยวค่อยเติมทีละส่วน อยากใช้ FastAPI เป็นตัวหลัก เก็บข้อมูลใน SQLite ผ่าน SQLAlchemy ส่วนหน้าเว็บใช้ Jinja2 template คู่กับ Tailwind (โหลดผ่าน CDN ไปก่อนได้) ฟอนต์ Inter ขอไฟล์ประมาณนี้: - ตัวหลักของแอป — พอเปิดแอปให้มันสร้างตารางใน database ให้อัตโนมัติ และอ่านค่า port จาก environment (ไม่ตั้งก็ใช้ 8000) - ไฟล์จัดการ database แยกออกมา - ไฟล์ models ยังว่างไว้ก่อนได้ เดี๋ยวขั้นถัดไปค่อยเติม - requirements.txt - template 2 หน้า: หน้าโครงหลักที่มีแถบเมนูด้านซ้าย เนื้อหาอยู่ขวา กับหน้าแรกที่โชว์แค่ "App is running" ให้รู้ว่าเว็บขึ้นแล้ว บริบทของผม: [ธุรกิจ/แบรนด์ = ..., อยากได้หน้าตาแอปโทนแบบ = ...] พอเสร็จช่วยบอกวิธีรันด้วย แล้วขอดูโค้ดทุกไฟล์แบบเต็มๆ เลยครับ ผมจะได้ก๊อปไปวางได้เลย
ต่อจากเมื่อกี้ครับ ทีนี้ผมอยากได้ตารางเก็บข้อมูล ช่วยออกแบบ models ให้หน่อย ผมนึกภาพว่าต้องเก็บ 3 อย่าง: 1. ร่างเนื้อหา (draft) — ตัวที่ AI สร้างมาแต่ยังไม่ได้โพสต์ ต้องเก็บ ลิงก์ข่าวต้นทาง, หัวข้อ, เนื้อหา, แคปชั่นที่จะโพสต์, แล้วก็สถานะว่าตอนนี้ไปถึงไหนแล้ว (รอคิว / กำลังสรุป / พร้อมโพสต์ / กำลังสร้างรูป / กำลังโพสต์ / โพสต์แล้ว / พัง) กับวันที่สร้าง-แก้ล่าสุด อีกอย่างคือผมอยากได้ช่องแบบยืดหยุ่นไว้เก็บ "ตอนนี้ user เลือกอะไรไปแล้วบ้าง" ระหว่างทำ wizard เช่นเลือกเนื้อหาเวอร์ชันไหน เลือกรูปไหน — เก็บเป็น JSON ก้อนเดียวได้ไหม จะได้ไม่ต้องเพิ่มคอลัมน์ทุกครั้งที่มีขั้นตอนใหม่ 2. โพสต์ที่ลงจริงแล้ว — ผูกกลับไปที่ draft, เก็บ id ของโพสต์ฝั่ง Facebook, ลิงก์โพสต์, เวลาที่ลง 3. ค่าใช้จ่าย AI — ทุกครั้งที่เรียก AI ให้บันทึกว่าใช้โมเดลอะไร กี่ token คิดเป็นกี่ดอลลาร์ และเป็นงานประเภทไหน (สรุปข่าว / คัดข่าว / สร้างรูป) เดี๋ยวผมจะเอาไปทำหน้าสรุปค่าใช้จ่าย เรื่องที่อยากให้ระวัง: เวลาทุกอันขอเก็บเป็น UTC นะครับ เดี๋ยวค่อยแปลงเป็นเวลาไทยตอนแสดงผล และช่วยใส่ index ให้ช่องสถานะกับ id โพสต์ฝั่ง Facebook ด้วย เพราะจะค้นบ่อย ยังไม่ต้องทำระบบ migration ครับ ตอนเปิดแอปให้มันสร้างตารางเองได้เลย แล้ว log บอกหน่อยว่ามี draft กับโพสต์อยู่กี่รายการ ผมจะได้รู้ว่าข้อมูลยังอยู่ครบ บริบทของผม: [อยากเก็บอะไรเพิ่มอีกไหม เช่น ...] ขอดูโค้ดเต็มๆ ทั้ง 2 ไฟล์เลยครับ
ทีนี้มาถึงส่วนดึงข่าวครับ ผมอยากให้แอปไปดึงข่าวจาก RSS ของเว็บข่าวหลายๆ เจ้ามารวมกันในที่เดียว แหล่งข่าวที่อยากใช้ [แก้เป็นเว็บที่ผมตามอยู่จริง]: - TechCrunch - VentureBeat - The Verge อยากได้ 2 อย่างครับ อย่างแรก ฟังก์ชันดึงรายการข่าวจากทุกแหล่ง เอามารวมเป็นลิสต์เดียว แต่ละข่าวมี หัวข้อ ลิงก์ เนื้อหาย่อ วันที่ และชื่อแหล่งที่มา ขอให้กรองเอาเฉพาะข่าวใน 2 วันล่าสุดพอ และถ้าข่าวเดียวกันโผล่ซ้ำจากหลายแหล่งให้ตัดออกเหลืออันเดียว อย่างที่สอง ฟังก์ชันเปิดลิงก์ข่าวเข้าไปดึงเนื้อหาเต็มออกมา (เพราะ RSS ให้มาแค่ 2-3 บรรทัด ไม่พอให้ AI สรุป) เอาสัก 3000 ตัวอักษรแรกก็พอ จุดที่ผมเคยเจอปัญหา ฝากระวังให้ด้วย: - เว็บข่าวหลายเจ้าบล็อกถ้าเห็นว่าเป็นบอท ช่วยใส่ User-Agent ให้เหมือน Chrome ปกติ - อย่าไปขอ compression แบบ brotli นะครับ (ขอแค่ gzip กับ deflate พอ) ผมเคยโดนมาแล้ว มันส่งไฟล์บีบอัดกลับมาแล้วอ่านออกมาเป็นตัวอักษรมั่วๆ เสียเวลาหาปัญหาอยู่นาน - ถ้าดึงไม่ได้ให้คืนค่าว่างเปล่าไปเลย อย่าให้ error เด้งจนแอปพัง เดี๋ยวผมมี fallback ไปใช้เนื้อย่อจาก RSS แทน แล้วก็ทำ endpoint ให้หน้าเว็บเรียกดูรายการข่าวได้ ขอ cache ไว้สัก 10 นาที จะได้ไม่ต้องยิงไปเว็บข่าวใหม่ทุกครั้งที่กดรีเฟรช บริบทของผม: [หัวข้อข่าวที่สนใจ = ..., แหล่งข่าวภาษา = ...] ขอโค้ดเต็มๆ พร้อมบอกด้วยว่าต้องลง library อะไรเพิ่มครับ
มาถึงหัวใจของแอปแล้วครับ — ส่วนที่ให้ AI อ่านข่าวแล้วเขียนโพสต์ให้ ผมจะใช้ Claude API นะครับ อยากได้ 2 ฟังก์ชัน ฟังก์ชันแรก คัดข่าวก่อน ว่าข่าวนี้ควรเอามาโพสต์ไหม ให้ตอบแค่ "เอา" หรือ "ไม่เอา" ตรงนี้ใช้โมเดลตัวเล็กที่สุด (Haiku) พอครับ เพราะต้องยิงเยอะ อยากประหยัด เกณฑ์คัด — คนอ่านเพจผมคือ [เจ้าของธุรกิจ SME ไทยที่อยากรู้ว่า AI เอามาใช้กับงานได้ยังไง]: - เอา: เครื่องมือ AI ที่ใช้ได้จริง, เอาไปใช้กับธุรกิจได้, AI ในชีวิตประจำวัน - ไม่เอา: งานวิจัยลึกๆ, เรื่องที่มีแต่โปรแกรมเมอร์เข้าใจ, ข่าวบริษัทแต่งตั้งผู้บริหาร ฟังก์ชันที่สอง ตัวสรุปข่าวจริง อันนี้ใช้โมเดลตัวเก่ง (Sonnet) เพราะต้องการงานเขียนที่ดี ขอผลลัพธ์ 4 ชิ้น: - ประโยคเปิดหนึ่งบรรทัด ที่อ่านแล้วอยากอ่านต่อ - เนื้อหาสรุปภาษาไทยสัก 3-4 ย่อหน้า เขียนแบบคุยกับเพื่อน ไม่ต้องเป็นทางการ - แคปชั่นเต็มที่พร้อมโพสต์ลง Facebook เลย (ประโยคเปิด + เนื้อหา + แฮชแท็กไทยสัก 3-5 อัน + ลิงก์ข่าวต้นทาง) - ข้อความสั้นๆ 5-10 คำ สำหรับเอาไปแปะบนรูป ไม่ต้องมีจุดปิดท้าย โทนที่อยากได้: [อบอุ่น ใช้ได้จริง อ่านง่าย ไม่วิชาการ — แก้เป็นโทนแบรนด์ผม] เผื่อไว้หน่อยครับ: บางทีดึงเนื้อข่าวไม่ได้ (เว็บบล็อก) ถ้าเนื้อหาที่ส่งเข้าไปสั้นผิดปกติ ให้ใช้หัวข้อกับเนื้อย่อจาก RSS แทนไปก่อน จะได้ยังพอเขียนอะไรออกมาได้ ดีกว่าพังไปเลย อีกอย่าง ทุกครั้งที่เรียก AI ช่วยบันทึกไว้ด้วยว่าใช้ไปกี่ token คิดเป็นเงินเท่าไหร่ ลงตารางค่าใช้จ่ายที่ทำไว้ตอนแรก ผมอยากรู้ว่าเดือนนึงหมดเท่าไหร่ API key ให้อ่านจาก environment นะครับ อย่า hardcode ลงโค้ด ขอดูโค้ดเต็มๆ ครับ
ทีนี้ผมอยากได้รูปประกอบโพสต์ครับ โพสต์ที่มีรูปคนเห็นเยอะกว่าเยอะ อยากได้ 2 แบบให้เลือก แบบแรก ให้ AI วาดรูปให้ (ใช้ gpt-image-2 ของ OpenAI) ขนาดจัตุรัส 1024x1024 คุณภาพระดับกลางพอ ไม่ต้องสูงสุด จะได้ไม่แพง สไตล์ที่อยากได้คือ [ภาพประกอบสไตล์เทคโนโลยีสมัยใหม่ สีสด สะอาดตา — แก้เป็นสไตล์ที่ผมชอบ] แบบที่สอง แบบประหยัด ไม่ต้องเรียก AI เลย — สร้างการ์ดพื้นสีทึบ ขนาด 1080x1080 แล้วเอาข้อความสั้นๆ ที่ AI เขียนไว้มาวางกลางรูป มุมล่างขวาใส่ [ชื่อแบรนด์ผม] ตัวเล็กๆ ตรงนี้ทำด้วย Pillow ได้เลย เรื่องฟอนต์ไทย ฝากด้วยครับ เครื่อง server มักไม่มีฟอนต์ไทยติดมา ถ้าไม่จัดการดีๆ ข้อความจะกลายเป็นสี่เหลี่ยมเรียงกันหมด ช่วยใส่ฟอนต์ไทยไปกับโปรเจกต์เลย จุดสำคัญที่ผมเคยพลาดหนักมาก: หลังสร้างรูปเสร็จ ก่อนจะเอาไปโพสต์ ช่วยแปลงเป็น JPEG คุณภาพสัก 92 ก่อนนะครับ อย่าส่ง PNG ตรงๆ — ผมเคยส่ง PNG ที่มันใหญ่ 3-5 MB แล้ว Facebook ปฏิเสธ ขึ้น error แปลกๆ ที่อ่านไม่รู้เรื่องเลยว่าเกิดจากรูปใหญ่ นั่งหาปัญหาอยู่ครึ่งวัน แปลงเป็น JPEG แล้วเล็กลง 4-6 เท่า ตาเปล่ามองไม่ออกว่าต่าง สุดท้ายทำ endpoint ให้เปิดดูรูปที่สร้างไว้ผ่านเว็บได้ด้วย จะได้เอามาโชว์ตอน preview บริบทของผม: [สไตล์ภาพที่ชอบ = ..., สีแบรนด์ = #...] API key อ่านจาก environment นะครับ ขอโค้ดเต็มๆ ครับ
ทีนี้ถึงส่วนที่โพสต์ขึ้น Facebook จริงแล้วครับ ผมมีเพจอยู่แล้วและมี access token ของเพจแล้ว ที่อยากได้: - โพสต์รูปพร้อมแคปชั่นขึ้นเพจ ทั้งแบบโพสต์เดี๋ยวนี้เลย และแบบตั้งเวลาไว้โพสต์ทีหลัง - ตอบคอมเมนต์ใต้โพสต์ตัวเองได้ (ผมชอบเอาลิงก์ข่าวต้นทางไปไว้ในคอมเมนต์แทนที่จะยัดในแคปชั่น) - ดูรายการโพสต์ที่ตั้งเวลาไว้ว่ามีอะไรรออยู่บ้าง ขอสิ่งนี้ก่อนอย่างอื่นเลยครับ — โหมดซ้อม (dry run) ทำเป็นสวิตช์ใน environment ถ้าเปิดโหมดนี้ไว้ ให้มันทำทุกอย่างเหมือนจริงหมด log ออกมาให้ดูว่าจะโพสต์อะไร แต่ห้ามยิงไป Facebook จริงเด็ดขาด แล้วคืนค่าปลอมกลับมาให้โค้ดส่วนอื่นทำงานต่อได้ เหตุผลคือผมเคยโดนมาแล้ว — ตอนนั้นแค่ทดสอบระบบตั้งเวลาโพสต์ ตั้งไว้ 15 นาที คิดว่าไม่เป็นไร ปรากฏว่ามันขึ้นเพจจริง ลูกค้าเห็นข้อความทดสอบ ผมไม่อยากให้เกิดอีก ขอให้ค่าเริ่มต้นเป็นโหมดซ้อมไว้เสมอ ต้องตั้งใจไปปิดเองถึงจะโพสต์จริงได้ อีกเรื่อง ตอนอัปโหลดรูป ช่วยแปลงเป็น JPEG ก่อนส่งด้วยนะครับ (เหตุผลเดียวกับที่เล่าไปตอนทำรูป — FB ไม่รับไฟล์ใหญ่ แล้ว error ที่มันคืนมาก็ไม่ได้บอกว่าเป็นเพราะรูป) เวลา Facebook ตอบ error กลับมา ช่วย log ให้เห็นชัดๆ ว่ายิงไป endpoint ไหน ได้อะไรกลับมา ไม่งั้นเวลาพังจะไล่ปัญหาไม่ถูก ขอโค้ดเต็มๆ ครับ
อยากได้ระบบแจ้งเตือนเข้า LINE ครับ เวลาโพสต์ขึ้นเพจสำเร็จแล้ว ให้เด้งบอกในกลุ่ม LINE ของทีม จะได้รู้กันทุกคนโดยไม่ต้องมานั่งเช็คเพจเอง ผมมี LINE Official Account กับ token แล้ว อยากให้ข้อความที่เด้งเป็นการ์ดสวยๆ (Flex Message) ประมาณนี้: - หัวการ์ดพื้นสีเขียว เขียนว่า "โพสต์ขึ้นแล้ว" - ตรงกลางเป็นหัวข้อข่าวตัวหนา ใต้ลงมาเป็นแคปชั่นย่อสัก 2 บรรทัด - ล่างสุดมีปุ่มกดแล้วเปิดโพสต์นั้นใน Facebook ได้เลย [แก้ข้อความกับปุ่มให้ตรงกับทีมผม] เรื่องที่ขอเน้นครับ: ตัวแจ้งเตือนนี้ห้ามทำให้ระบบหลักพังเด็ดขาด ถ้า LINE ส่งไม่ได้ token หมดอายุ หรือเน็ตมีปัญหา ให้มันเงียบๆ ไปแล้ว log ไว้พอ อย่าให้ error เด้งขึ้นมาจนโพสต์ที่ลง Facebook สำเร็จแล้วกลับกลายเป็นสถานะพัง — โพสต์มันขึ้นไปแล้วจริงๆ แค่แจ้งเตือนไม่ถึงเท่านั้นเอง แล้วขอสวิตช์โหมดซ้อมเหมือนฝั่ง Facebook ด้วยครับ ตอนพัฒนาจะได้ไม่ยิงข้อความรบกวนกลุ่มจริง ช่วยต่อให้ด้วยว่าหลังโพสต์ Facebook สำเร็จปุ๊บ ให้เรียกตัวแจ้งเตือนนี้ต่อทันที ขอโค้ดเต็มๆ ครับ
ทีนี้ผมอยากได้หน้าเว็บที่ใช้งานจริง เป็นแบบทีละขั้นตอน (wizard) ให้คนในทีมที่ไม่ใช่สายเทคก็กดใช้เองได้ ขั้นตอนที่ผมนึกไว้: 1. เปิดมาเจอรายการข่าวที่ดึงมาแล้ว เห็นหัวข้อ แหล่งข่าว วันที่ — กดปุ่ม "เลือกข่าวนี้" ที่ข่าวที่สนใจ 2. ระหว่าง AI สรุปอยู่ ขอหน้ารอที่มีวงกลมหมุนๆ บอกว่า "กำลังสรุปข่าว..." แล้วพอเสร็จให้เด้งไปขั้นถัดไปเองโดยไม่ต้องกดรีเฟรช 3. AI เขียนมาให้เลือกหลายเวอร์ชัน ผมกดเลือกอันที่ชอบ 4. หน้าสร้างรูป — มีช่องข้อความที่จะแปะบนรูป (เติมมาจาก AI แล้ว แต่ผมแก้เองได้) กดปุ่มสร้างรูป แล้วรอแบบเดียวกับข้อ 2 5. ได้รูปมา 2 แบบวางข้างกัน กดเลือกอันที่ชอบ 6. หน้าสุดท้าย เห็นแคปชั่นเต็ม (แก้ได้) กับรูปที่เลือก แล้วมี 2 ปุ่ม "โพสต์เลย" กับ "ตั้งเวลา" (กดตั้งเวลาแล้วให้โผล่ช่องเลือกวันเวลา) เรื่องเทคนิค ผมไม่อยากใช้ React หรือ framework หนักๆ ครับ อยากให้ใช้ HTMX พอ เพราะผมอ่าน JavaScript ไม่ค่อยออก แก้เองไม่ได้ ให้หน้าเว็บคุยกับ server แล้วสลับเนื้อหาทีละส่วนก็พอ สถานะว่าตอนนี้ไปถึงขั้นไหนแล้ว ให้ดูจากข้อมูลใน database ที่ทำไว้ตอนแรกนะครับ (สถานะกับก้อน JSON ที่เก็บว่าเลือกอะไรไปแล้ว) จะได้ปิดหน้าเว็บไปแล้วกลับมาเปิดใหม่ยังทำต่อจากเดิมได้ บริบทของผม: [ข้อความกับปุ่มแต่ละขั้น ปรับให้เป็นคำที่ทีมผมใช้กันจริง] ขอโค้ดเต็มๆ ทั้งฝั่ง server และหน้าเว็บทุกขั้นตอนเลยครับ
ปัญหาคืองาน AI มันช้าครับ สรุปข่าวใช้ 20-30 วินาที สร้างรูปเป็นนาที ถ้าให้หน้าเว็บนั่งรอตรงๆ มันจะค้างจนบางทีหลุด timeout ไปเลย ผมอยากให้เปลี่ยนเป็นแบบนี้: พอกดปุ่ม ให้เด้งกลับมาทันทีว่า "รับงานแล้ว" แล้วงานจริงไปทำเบื้องหลัง ส่วนหน้าเว็บก็คอยถามเป็นระยะว่า "เสร็จยัง" แล้วค่อยอัปเดตหน้าจอเมื่อเสร็จ (อันนี้ต่อกับหน้า wizard ที่ทำไว้) ระหว่างทำงานอยากให้บอกด้วยว่าตอนนี้ทำอะไรอยู่ เช่น "กำลังดึงเนื้อข่าว" → "กำลังให้ AI สรุป" → "กำลังสร้างรูป" จะได้ไม่ต้องนั่งมองวงกลมหมุนเฉยๆ ไม่รู้ว่าค้างหรือยังทำอยู่ งานที่ต้องเอาไปทำเบื้องหลังมี 3 อย่าง: สรุปข่าว, สร้างรูป, และโพสต์ขึ้น Facebook (อันหลังนี่รวมคอมเมนต์กับส่ง LINE ด้วย รวมๆ แล้วนานเหมือนกัน) ยังไม่ต้องลง Redis หรือระบบคิวใหญ่ๆ นะครับ ตอนนี้มีผู้ใช้แค่ไม่กี่คน ใช้ของที่ Python มีอยู่แล้วก็พอ จุดที่ผมเคยเจอปัญหา 2 เรื่อง ฝากด้วย: หนึ่ง — ตอนสร้างงานใหม่ ต้องบันทึกลง database ให้เรียบร้อยก่อนค่อยส่งงานไปทำเบื้องหลัง ผมเคยพลาดตรงนี้ งานเบื้องหลังมันวิ่งไปเร็วกว่า พอไปหาข้อมูลใน database ก็ไม่เจอ แล้ว error ว่าไม่มีข้อมูลนี้ ทั้งที่หน้าเว็บแสดงว่ามีอยู่ สอง — เวลา deploy ใหม่ ตัวแอปมันรีสตาร์ท งานที่ค้างอยู่จะหายไปเงียบๆ แล้วสถานะจะค้างที่ "กำลังสรุป" ตลอดกาล ไม่ไปไหนต่อ ขอให้ตอนแอปเปิดขึ้นมาทุกครั้ง เช็คหาตัวที่ค้างสถานะพวกนี้แล้วเปลี่ยนเป็น "พัง" ไปเลย พร้อมมีปุ่มให้กดลองใหม่ได้ ขอโค้ดเต็มๆ ครับ
ถึงเวลาเอาขึ้นเซิร์ฟเวอร์จริงแล้วครับ ผมมี VPS อยู่ตัวหนึ่ง (Ubuntu) แล้วก็มี Traefik รันอยู่แล้วสำหรับจัดการ HTTPS ให้แอปอื่นๆ อยากให้แอปนี้ไปอยู่ด้วยกัน ช่วยทำไฟล์ที่จำเป็นให้หน่อย — Dockerfile, docker compose, .dockerignore, กับไฟล์ตัวอย่าง environment ที่ลิสต์ทุก key ที่ต้องใส่ (ไม่ต้องใส่ค่าจริง ผมจะไปเติมเองบนเซิร์ฟเวอร์) จุดที่ผมกลัวที่สุดคือข้อมูลหาย ขอเน้นเรื่องนี้เป็นพิเศษครับ — ไฟล์ database ต้องอยู่นอก container นะครับ ผูกเป็น volume ไว้ ผมเคยเจอมาแล้วตอนใช้ hosting เจ้าอื่น ตอนนั้นไฟล์ database อยู่ในตัว container พอ deploy ใหม่ทีนึงข้อมูลหายเกลี้ยงที ทั้งข่าวที่ร่างไว้ ทั้งประวัติโพสต์ หายไปหมด กว่าจะรู้ตัวคือเสียไปหลายวัน อยากให้ deploy กี่ครั้งข้อมูลก็ยังอยู่ อีกอย่าง ตอนสร้าง image ต้องมี library ที่จำเป็นสำหรับประมวลผลรูปด้วยนะครับ (Pillow ต้องใช้พวก jpeg/png) ไม่งั้นตอนสร้างรูปจะพัง แล้วก็ฟอนต์ไทยที่คุยกันไว้ตอนทำรูป ต้องติดไปกับ image ด้วย โดเมนที่จะใช้: [subdomain.โดเมนผม.com] Traefik ผมอยู่ใน network ชื่อ: [ชื่อ network] พอเสร็จช่วยเขียนขั้นตอน deploy เป็นข้อๆ ให้ด้วยครับ ว่าต้องทำอะไรบ้างตั้งแต่ ssh เข้าเครื่อง ยัน เช็คว่าแอปขึ้นแล้วจริง ผมจะได้ทำตามทีละบรรทัด ขอไฟล์ทั้งหมดแบบเต็มๆ ครับ