productize.life
TH EN
AI · เว็บ Static

เว็บ static ก็มี AI ได้
ไม่ต้องมี backend ไม่ต้องมี API key

เมื่อวานหน้าเว็บเรายังเป็นไฟล์ HTML นิ่ง ๆ วันนี้มันรับไอเดียจากคนอ่านแล้วตีกลับเป็นโครง PRD ได้ ทั้งหมดนี้ไม่มี server ของตัวเอง ไม่มี API key ในโค้ด และบิลยังเป็นศูนย์ นี่คือวิธีทำ พร้อมตัวเลขที่วัดจริงทุกตัว

Yim· เขียนด้วยกันกับ Dobby (AI Oracle)/4 ก.ค. 2026

เรื่องนี้เกิดในวันเดียว เช้าวันนี้หน้า landing บริการที่ปรึกษา PRD ของเรายังเป็นเว็บ static ธรรมดา มีข้อความ มีรูป มีปุ่มอีเมล จบแค่นั้น พอตกบ่าย หน้าเดิมนั้นมีกล่องให้คนอ่านวางไอเดียแอปของตัวเอง แล้ว AI ตีกลับมาเป็นโครง PRD แปดหัวข้อพร้อมจุดเสี่ยง ภายในสิบกว่าวินาที

สิ่งที่ไม่ได้เพิ่มเข้ามาเลยคือ server เรายังไม่มี backend ของตัวเอง ไม่มี VM ไม่มี container และในโค้ดทั้งหมดไม่มี API key สักตัว ตัวเว็บก็ยังเป็นไฟล์ HTML static เหมือนเดิมทุกประการ

ที่ทำแบบนี้ได้เพราะของชิ้นเดียว: Cloudflare Workers AI บทความนี้เล่าว่ามันทำงานยังไง พร้อมของที่บทความแนวนี้มักไม่มีให้ คือตัวเลขที่วัดจากของจริง ทั้งจำนวน neurons ต่อคำตอบ ความเร็ว และบิลปลายทาง เพราะเราเพิ่งกดวัดมาเองสด ๆ ก่อนเขียน

ช่วงที่ 1ของจริงที่เพิ่งขึ้น: กล่อง AI บนหน้า landing

โจทย์ของเราชัดมาก หน้า landing ขายบริการที่ปรึกษา product requirement อยากให้คนอ่านได้ "ลองของ" ก่อนตัดสินใจทัก เลยทำสองชิ้น ชิ้นแรกเป็น quiz เจ็ดข้อให้ประเมินความพร้อมของ requirement ตัวเอง อันนั้นเป็น JavaScript ล้วน ๆ ไม่มี AI ส่วนชิ้นที่สองคือพระเอกของบทความนี้ กล่องที่รับไอเดียแล้วตีกลับเป็นโครง PRD คนอ่านเล่าไอเดียมาสามสี่ประโยค ระบบตอบกลับเป็นโครงแปดหัวข้อ ตั้งแต่ปัญหา ผู้ใช้ ขอบเขต ไปจนถึงเกณฑ์ตรวจรับ ปิดท้ายด้วยจุดเสี่ยงที่ควรตอบให้ได้ก่อนสั่ง AI ลงมือสร้าง

ตัวโมเดลที่ตอบคือ Llama 3.3 70B (รุ่น instruct fp8 fast) รันอยู่บนเครือข่าย Cloudflare ไม่ใช่เครื่องเรา และภาษาไทยที่ได้อยู่ในระดับใช้งานได้จริง ลองเล่นของจริงได้ที่ productize.life/services/prd

เบราว์เซอร์ หน้าเว็บ static + fetch Cloudflare Worker ตรวจ gate อีเมล นับ rate limit ใน KV env.AI.run() Workers AI Llama 3.3 70B
ทางเดินของหนึ่งคำถาม: ทุกอย่างอยู่บนเครือข่าย Cloudflare ไม่มี server ของเราสักเครื่อง

ช่วงที่ 2ทำไมไม่ต้องมี backend ไม่ต้องมี API key

เว็บแนวนี้ปกติจะตันตรงคำถามเดียว: จะเอา AI มาไว้ตรงไหน ถ้าเรียกจากหน้าเว็บตรง ๆ ก็ต้องฝัง API key ไว้ในหน้า ซึ่งเท่ากับแจก key ให้คนทั้งโลก ถ้าไม่อยากแจกก็ต้องมี backend มาคั่นกลาง แปลว่าต้องมีเครื่อง ต้องดูแล ต้องจ่ายรายเดือน สำหรับเว็บ static ที่ตั้งใจให้เบาที่สุด ทางไหนก็ไม่สวยทั้งคู่

Workers AI ตัดปมนี้ด้วยแนวคิดเดียว: โมเดลอยู่ที่เดียวกับ worker และสิทธิ์ผูกกับบัญชี ไม่ใช่กับ key ถ้าเว็บเราเสิร์ฟผ่าน Cloudflare Worker อยู่แล้ว (ของเราใช้ worker ทำ reverse proxy กับ gate สมาชิกอยู่ก่อนแล้ว) การเพิ่ม AI คือการประกาศ binding ในไฟล์ wrangler.toml สองบรรทัด

[ai]
binding = "AI"

เท่านี้ในโค้ด worker ก็มีตัวแปร env.AI โผล่มาให้เรียกโมเดลได้เลย หนึ่ง endpoint กับหนึ่งคำสั่ง env.AI.run("@cf/meta/llama-3.3-70b-instruct-fp8-fast", ...) ก็ได้คำตอบกลับมา ไม่มี key ให้เก็บ แปลว่าไม่มี key ให้หลุด ไม่ต้อง rotate ไม่ต้องตั้ง secret manager และฝั่งหน้าเว็บก็เป็นแค่ fetch ธรรมดาที่ยิงเข้า endpoint ของโดเมนตัวเอง

ส่วนที่เหลือของงานจึงไม่ใช่เรื่อง AI เลย แต่เป็นเรื่องเดิมของงานเว็บ: ตรวจ input ตั้งเพดานการเรียก และเขียน system prompt ให้ตอบแบบที่เราอยากได้ ของเราคัดโครงมาจากเทมเพลต PRD แปดหัวข้อที่ใช้ในงานที่ปรึกษาจริง พร้อมกติกาสำคัญข้อเดียวที่อยากให้ทุกคนใส่: ห้ามแต่งรายละเอียดที่ผู้ใช้ไม่ได้บอก ข้อมูลไม่พอให้ชี้ว่าขาดตรงไหนแทนการเดา ไม่งั้นโมเดลจะเติมของที่ไม่มีใครพูดให้อย่างหน้าตาเฉย เรื่องนี้เราเขียนไว้ละเอียดใน ทำไม AI agent ถึงโกหก

ช่วงที่ 3ตัวเลขวัดจริง: neurons ความเร็ว และบิล

ราคาของ Workers AI คิดเป็นหน่วยที่ Cloudflare เรียกว่า neuron ทุกบัญชีได้ฟรีวันละ 10,000 neurons เกินจากนั้นคิด $0.011 ต่อ 1,000 neurons คำถามที่เอกสารตอบไม่ได้คือ แล้วหนึ่งคำตอบของเราจริง ๆ กินกี่ neurons เราเลยดึงตัวเลขการใช้งานจริงของวันนี้ออกมาจากระบบ analytics ของ Cloudflare เอง

ตัวเลขจากการเรียกจริง 5 ครั้ง (4 ก.ค. 2026)ค่าที่วัดได้
neurons รวม621.5 (เฉลี่ย ~124 ต่อครั้ง)
token ขาเข้า (system prompt + ไอเดีย)รวม 2,202 (~440 ต่อครั้ง)
token ขาออก (โครง PRD ที่ตอบกลับ)รวม 2,748 (~550 ต่อครั้ง)
เวลา inference เฉลี่ย9.8 วินาที ต่อคำตอบ
เวลารวมถึงหน้าเว็บ (วัดด้วย curl)~15 วินาที
โควต้าฟรี 10,000 neurons/วัน รองรับ~80 คำตอบต่อวัน
ถ้าเกินฟรี ราคาต่อคำตอบ~$0.0014 (ห้าสตางค์นิด ๆ)
บิลของวันนี้$0

ตัวเลขพวกนี้ตรวจย้อนได้ด้วย เรตของ Llama 3.3 70B fast ในหน้าราคาคือ 26,668 neurons ต่อล้าน token ขาเข้า และ 204,805 ต่อล้าน token ขาออก ลองคูณกลับ: 2,202 token ขาเข้าได้ 58.7 บวก 2,748 token ขาออกได้ 562.8 รวม 621.5 ตรงกับที่ dashboard รายงานเป๊ะ

บทเรียนที่ซ่อนอยู่ในเลขคู่นี้: ต้นทุนเกือบทั้งหมดอยู่ที่ token ขาออก (562.8 จาก 621.5) เพราะเรตขาออกแพงกว่าขาเข้าเกือบแปดเท่า อยากคุมงบให้คุมความยาวคำตอบด้วย max_tokens ก่อนจะไปนั่งบีบ prompt ขาเข้า

ส่วนความเร็ว เกือบสิบวินาทีต่อคำตอบยาว ~550 token แปลว่าของแบบนี้เหมาะกับงานตอบยาวที่คนยอมรอ อย่างการตีกลับไอเดียเป็นโครงเอกสาร และไม่เหมาะกับงาน chat โต้ตอบสั้น ๆ ที่คนคาดหวังคำตอบใน 1-2 วินาที ตั้งความคาดหวังบนหน้าเว็บให้ตรง เราเขียนบอกไว้เลยว่าราว 10-20 วินาที

แล้วตัวเลือกฟรีเจ้าอื่นอย่าง OpenRouter ล่ะ

คำถามที่เราเจอเองหลัง ship: ทำไมไม่ใช้โมเดล free ของ OpenRouter แทน คำตอบอยู่ที่เลขสามตัว (ตรวจจากเอกสาร OpenRouter, 4 ก.ค. 2026)

ช่วงที่ 4ของที่ต้องมีก่อนปล่อย AI ขึ้นหน้าเว็บ

endpoint ที่เรียกโมเดลได้ฟรีแค่วันละ 10,000 neurons ถ้าปล่อยให้ใครก็ยิงได้ไม่จำกัด สคริปต์ตัวเดียวก็เผาโควต้าทั้งวันหมดในไม่กี่นาที แล้วเริ่มไต่เข้าโซนคิดเงิน ก่อนปล่อยของจริงเราเลยตั้งด่านไว้สามชั้น

  1. gate อีเมลก่อนใช้ กล่อง AI จะเปิดหลังคนอ่านทำ quiz แล้วฝากอีเมลไว้ ฝั่ง server ยืนยันด้วย cookie ที่เซ็นลายเซ็นดิจิทัล ไม่ใช่แค่ซ่อนปุ่มด้วย JavaScript เพราะ endpoint โดนยิงตรงได้เสมอ ใครไม่มี cookie ได้ 401 กลับไป (แนวคิด gate แบบนี้เราใช้ทั้งเว็บอยู่แล้ว)
  2. เพดานต่อ IP ต่อวัน ของเราตั้งไว้ 5 ครั้ง พอสำหรับลองจริง ไม่พอสำหรับกดเล่นทิ้ง
  3. เพดานรวมทั้งระบบต่อวัน ตั้งไว้ 60 ครั้ง ต่ำกว่าโควต้าฟรี ~80 อยู่พอสมควร ชั้นนี้แหละคือประกันว่าต่อให้โดนยิงจากพัน IP บิลก็ยังเป็นศูนย์

ตัวนับเก็บใน KV (ฐานข้อมูล key-value ของ Cloudflare) ซึ่งมีนิสัยหนึ่งที่ควรรู้: มันเป็นระบบ eventual consistency คือค่าที่อ่านได้อาจช้ากว่าความจริงไปหลายสิบวินาที ตัวนับแบบนี้จึงเป็น "เพดานแบบหลวม" ที่อาจนับพลาดไปบ้างตอนยิงถี่ ๆ เรารู้เพราะเจอกับตัวตอนนั่งวัด latency: ลบตัวนับของ IP ตัวเองทิ้งแล้วยิงต่อทันที ระบบยังเห็นเลขเก่าค้างอยู่ เลยโดน 429 ของตัวเอง ซึ่งกลับเป็นเรื่องดี มันพิสูจน์ว่าด่านทำงานจริงบน production และความหลวมของมันเอียงไปทางกันไว้ก่อน ไม่ใช่ปล่อยเกิน สำหรับงานกันงบแบบนี้ หลวมแบบนี้คือโอเค เพราะเพดานรวมยังต่ำกว่าโควต้าฟรีอยู่ชั้นหนึ่งเสมอ

ช่วงที่ 5ทำเองทีละขั้น

ถ้าเว็บคุณอยู่บน Cloudflare อยู่แล้ว (หรือย้าย DNS มาได้) ทั้งหมดนี้คือ

  1. ประกาศ binding เพิ่ม [ai] + binding = "AI" ใน wrangler.toml ของ worker ที่เสิร์ฟเว็บ
  2. เพิ่ม endpoint เดียว รับ POST เป็น JSON ตรวจความยาว input แล้วส่งเข้า env.AI.run() พร้อม system prompt ที่นิยามโครงคำตอบและกติกาห้ามแต่งข้อมูล
  3. ตั้งด่านก่อนโมเดล ตรวจ gate (จะเป็นอีเมล ล็อกอิน หรืออย่างอื่นก็ได้) แล้วนับเพดานต่อ IP กับเพดานรวมใน KV ให้เพดานรวมต่ำกว่าโควต้าฟรีเสมอ ถ้าอยากได้ตัวนับแบบเป๊ะกว่านั้นค่อยขยับไปใช้ Durable Objects
  4. ฝั่งหน้าเว็บ textarea หนึ่งช่อง ปุ่มหนึ่งปุ่ม กับ fetch หนึ่งครั้ง แสดงสถานะ "กำลังคิด" ให้ชัดเพราะต้องรอราวสิบวินาที
  5. วัดก่อนคุย ยิงจริงสักห้าครั้งแล้วเปิดดู analytics ว่ากินกี่ neurons ต่อครั้ง ค่อยคำนวณว่าโควต้าฟรีพอสำหรับ traffic ของคุณไหม

โค้ด worker ฉบับเต็มทั้ง gate ลายเซ็น cookie และตัวนับ rate limit เราจะเรียบเรียงเปิดเป็น method page สำหรับสมาชิกบล็อกในตอนถัดไป ส่วนแนวคิดทั้งหมดอยู่ในบทความนี้ครบแล้ว ทำตามห้าขั้นนี้ได้โดยไม่ต้องรอ

สรุปสั้นที่สุด

เว็บ static + Cloudflare Worker + binding env.AI = เว็บมี AI โดยไม่มี server ไม่มี key และถ้าตั้งเพดานรวมต่อวันไว้ใต้โควต้าฟรี บิลจะเป็นศูนย์แบบพิสูจน์ได้ ไม่ใช่แบบภาวนา

อยากเห็นของจริงก่อนลงมือ ไปลองเล่นกล่อง AI ตัวเป็น ๆ ได้ที่ productize.life/services/prd วางไอเดียของคุณลงไปแล้วดูว่าโครง PRD ที่ตีกลับมาหน้าตาเป็นยังไง

ที่มาและอ้างอิง
ติดตาม

รับบทความใหม่และของฟรีก่อนใคร

ทิ้งอีเมลไว้ บทความใหม่และของฟรีเป็นครั้งคราวจะส่งไปให้ ไม่สแปม

ใช้อีเมลเพื่อส่งอัปเดตเท่านั้น

ความคิดเห็น

ร่วมพูดคุย

แบ่งปันความคิดเห็นได้เลย

ชื่อจะแสดงต่อสาธารณะ อีเมลเก็บเป็นความลับ ไม่แสดงที่ไหน

กำลังโหลดความคิดเห็น…