Show HN: screenshot-to-code - แปลงภาพหน้าจอเป็นโค้ด HTML ที่สะอาดด้วย GPT Vision (เครื่องมือ OSS)
(github.com/abi)- เป็นเครื่องมือที่ใช้ AI แปลงภาพหน้าจอ ม็อกอัป ดีไซน์จาก Figma และการบันทึกหน้าจอ ให้กลายเป็นโค้ดที่สะอาดและใช้งานได้จริง
- สแต็กที่รองรับคือ HTML + Tailwind, HTML + CSS, React + Tailwind, Vue + Tailwind, Bootstrap, Ionic + Tailwind
- รองรับฟีเจอร์รับ การบันทึกหน้าจอ ที่แสดงการทำงานของเว็บไซต์ แล้วแปลงเป็นต้นแบบที่ใช้งานได้
- โมเดล AI เริ่มต้นคือ Gemini 3 Flash Preview, Gemini 3.1 Pro Preview, GPT-5.5, GPT-5.4 Mini, Claude Opus 4.6, Claude Opus 4.8 และใช้ z-image-turbo บน Replicate สำหรับการสร้างภาพ
- การรันแบบโลคัลต้องมี API key และการตั้งค่าทั้งฝั่งแบ็กเอนด์และฟรอนต์เอนด์ โดยโครงสร้างแอปคือ ฟรอนต์เอนด์ React/Vite และ แบ็กเอนด์ FastAPI
- ต้องมีคีย์จากผู้ให้บริการโมเดลอย่างน้อยหนึ่งรายใน OpenAI, Anthropic หรือ Gemini
- Gemini ใช้ดึงโลโก้และรูปภาพจริงออกจากภาพหน้าจอ และจำเป็นสำหรับโหมดวิดีโอ
- Replicate ใช้เปิดใช้งานการแก้ไขภาพ การลบพื้นหลัง และการสร้างภาพบน Replicate
- หากเพิ่มคีย์หลายตัว ระบบจะเลือกชุดโมเดลที่ทรงพลังกว่าให้โดยอัตโนมัติตามแต่ละ variant และหากมีเพียงคีย์เดียวก็จะใช้เฉพาะโมเดลของผู้ให้บริการนั้น
- ฟีเจอร์เสริม screenshot preview จะเรนเดอร์หน้าที่สร้างขึ้นใน headless browser หลังติดตั้ง Chromium เพื่อให้ตรวจสอบภาพได้ และหากไม่มี Chromium ระบบจะข้ามเครื่องมือนี้
- รองรับทั้งการพัฒนาแบบโลคัล การใช้แอปที่โฮสต์ไว้ และการรันผ่าน Docker โดยเมื่อรันด้วย Docker แอปจะทำงานที่
http://localhost:5173
1 ความคิดเห็น
ความคิดเห็นบน Hacker News
สิ่งนี้ดูเหมือน เวทมนตร์ จริง ๆ และผมไม่รู้ว่าจะเอาไปวางไว้ตรงไหนในโมเดลในหัวของผมเกี่ยวกับวิธีที่การคำนวณทำงาน
ผมเข้าใจว่าโครงข่ายประสาทเป็น ตัวประมาณฟังก์ชันสากล หมายความว่ามันโมเดลชุดของฟังก์ชันที่แมปอินพุตไปเป็นเอาต์พุตในโดเมนหนึ่ง ๆ ตัวอย่างอย่าง MNIST นั้นพอเข้าใจในเชิงแนวคิดได้
แต่ในกรณีนี้ ผมสงสัยว่าการเรียนรู้ทั่วไปของ GPT กำลังทำการแมปค่าจากความเข้มของพิกเซลไปเป็นโทเค็นข้อความ HTML+Tailwind แล้วผลลัพธ์ที่เบราว์เซอร์ตีความและเรนเดอร์โทเค็นเหล่านั้นออกมาใกล้เคียงกับภาพอินพุตหรือเปล่า
ถ้าเป็นอย่างนั้น GPT ก็เท่ากับโมเดลไม่ใช่แค่การแปลงพิกเซล→HTML/CSS แต่ยังรวมถึงวิธีที่เบราว์เซอร์เรนเดอร์ HTML/CSS ด้วย ซึ่งแม้จะยอมรับได้ว่ามีการแมปแบบนั้นอยู่ แต่ก็น่าทึ่งที่ GPT สามารถอนุมานสิ่งนั้นออกมาได้ทั้งที่ยังเขียนเรื่องอื่น ๆ อีกมากมายได้ด้วย
ในเชิงปฏิบัติมากขึ้น ผมยังสงสัยว่าเราจะมองเครื่องมือแบบนี้เป็นเหมือน คอมไพเลอร์ไดอะแกรม ได้ไหม และในอนาคตมันจะกลายเป็นส่วนหนึ่งของ build pipeline ที่รับเอาต์พุตจาก Sketch/Figma แล้วส่งออก HTML/CSS/JS ได้หรือไม่
latent space คือพื้นที่ n มิติที่ไอเดียและแนวคิดที่คล้ายกันจะอยู่ใกล้กัน และการจัดวางนี้ถูกสร้างขึ้นจากข้อมูลฝึกระหว่างการเรียนรู้ ดังนั้นกระบวนการฝึกก็คือกระบวนการสร้าง latent space นั่นเอง
ลองจินตนาการบนกริด 2 มิติว่า “house” กับ “mansion” อยู่ใกล้กัน ส่วน “growling” อยู่คนละมุมโดยสิ้นเชิง latent space แบบ GPT-4 ก็คล้ายกัน แต่มีเป็นร้อยถึงพันมิติ และความต่างของสเกลนี้ทำให้สามารถจัดเรียงความรู้อันมหาศาลได้อย่างมีประโยชน์
กลับมาที่การอ่านภาพ ข้อมูลฝึกมีภาพเว็บเพจกับโค้ดที่สอดคล้องกัน และโค้ดนั้นบอกกระบวนการฝึกว่าควรวางคู่โค้ด-ภาพไว้ตรงไหน ป้ายกำกับและคำบรรยายก็ช่วยวางภาพลงใน latent space ได้เหมือนข้อความ
ดังนั้นเมื่อให้ภาพเว็บไซต์ใหม่กับ GPT-4 และขอ HTML ที่สอดคล้องกัน มันก็สามารถวางภาพนั้นลงใน latent space แล้วดึง HTML ที่สอดคล้องกันซึ่งอยู่ใกล้ ๆ ออกมาได้
แต่ไม่ได้บอกอะไรเลยเกี่ยวกับความสามารถในการฝึกหรือโครงสร้างที่จำเป็น และโครงสร้างที่ต้องใช้อาจใหญ่จนไม่สมจริงก็ได้
อัลกอริทึมการฝึกที่ใช้กันคือ backpropagation ผ่าน stochastic gradient descent ไม่ใช่ตัวเรียนรู้สากล และไม่มีการรับประกันว่าจะหาค่าต่ำสุดทั่วทั้งระบบเจอ
ดูเหมือนจะเป็นทิศทางที่ข้ามขั้น Sketch/Figma แล้วไปสู่ โปรโตไทป์ที่รันได้ โดยตรง
มุมมองที่ว่า “มันฟิตฟังก์ชันใด ๆ ก็ได้” นั้นถูกต้อง แต่ไม่ได้บอกว่าในทางปฏิบัติเราทำแบบนั้นได้ด้วยทรัพยากรจำกัดหรือไม่ ดังนั้นโดยตัวมันเองจึงไม่ค่อยมีประโยชน์นัก
สิ่งที่น่าทึ่งตอนนี้ไม่ใช่ตัวประมาณสากลที่มีมานานแล้ว แต่คือการที่มัน ประมาณแนวคิดเชิงนามธรรมได้ดีขนาดนี้ และคำตอบอยู่ที่ขนาดของข้อมูล
มีมุมมองว่าการบีบอัดคือปัญญา และโมเดลเหล่านี้มองได้ว่าเป็นตัวบีบอัดที่ดี ระหว่างการฝึก น้ำหนักมีขนาดคงที่และเล็กกว่าข้อมูลที่พยายามฟิตมาก และถ้าเป้าหมายคือการกู้คืนต้นฉบับ หรือก็คือการทำนายโทเค็นถัดไป ก็ไม่มีทางอื่นนอกจากต้องบีบอัดข้อมูลให้ดีมาก
ยิ่งฉลาดก็ยิ่งทำนาย/บีบอัดได้ดีขึ้น และเมื่อถูกบังคับให้บีบอัด ก็เท่ากับถูกบังคับให้ได้ปัญญาในทางปฏิบัติ คล้ายกับการจะสอบ คุณอาจท่องจำคำตอบได้ แต่ถ้ามีโจทย์เป็นพัน ๆ ข้อจนจำไม่ไหว วิธีที่ดีที่สุดคือเรียนวิชานั้นแล้วอนุมานคำตอบระหว่างสอบ
ภาวะคู่กันระหว่างการบีบอัด/ปัญญานี้เป็นเรื่องถกเถียงสำหรับฝ่ายที่ปฏิเสธความสามารถในการทั่วไปของ LLM แต่ตอนนี้มันเป็นโมเดลทางความคิดของผม และผมยังหักล้างมันไม่ได้
ถ้ายอมรับมุมมองนี้ ความสามารถหลายโมดัล ก็ใกล้เคียงกับปัญหาทางวิศวกรรม ผมไม่รู้ภายในของ GPT-4V อย่างแน่ชัด แต่พออนุมานได้จากงานวิจัยหลายโมดัลที่เปิดเผยต่อสาธารณะ
ถ้ามีคู่ของภาพกับข้อความที่อธิบายภาพนั้น ก็ทำการ tokenize/embed ภาพเหมือนกับข้อความได้ เช่น ViT(Visual Transformer) ที่เปลี่ยนภาพเป็นคุณลักษณะเชิงภาพราย patch แล้วทำให้เป็นลำดับยาว ๆ
เมื่อป้อน embedding นี้ให้ LLM ที่ผ่านการ pretrain แล้ว และบังคับให้ทำนายข้อความคำอธิบายภาพ ก็ไม่มีทางอื่นนอกจากต้องได้ความเข้าใจภาพโดยทั่วไปจาก embedding ของภาพ
หลังจากเข้าใจข้อมูลในภาพที่ให้มาและแสดงออกเป็นภาษาธรรมชาติได้แล้ว ก็แค่ทำ instruction tuning ให้มันใช้ความเข้าใจนั้น
โมเดลสร้างภาพอย่าง Stable Diffusion ก็คล้ายกัน คือฝึกโมเดลแบบ contrastive อย่าง CLIP ให้ embedding ของภาพและ embedding ของข้อความที่เป็นแนวคิดเดียวกันอยู่ใกล้กัน แล้วใช้ข้อมูลคู่นั้นเพื่อปรับทิศทางการสร้าง
สิ่งที่น่าทึ่งคือมันมีความสามารถระดับนี้แล้ว และสามารถได้ความสามารถมากขึ้นด้วยการคำนวณที่มากขึ้นเท่านั้น ถ้า final loss ของ GPT-4 ตอนนี้คือ 1 และไม่ทางใดก็ทางหนึ่งสามารถลดลงเหลือ 0.1 ได้ ก็มีโอกาสสูงที่จะเก่งขึ้นมาก
สำหรับคำถามที่สอง ดูเหมือนจะเป็นไปในทิศทางนั้น และน่าจะทำได้แม้กระทั่งตอนนี้
ประเด็นสำคัญอยู่ตรงนี้: https://github.com/abi/screenshot-to-code/blob/main/backend/...
พรอมป์ต์สั่งให้ทำตัวเป็นผู้เชี่ยวชาญ Tailwind สำหรับผู้ใช้ ดูสกรีนช็อตแล้วสร้างแอปหน้าเดียวด้วย Tailwind, HTML และ JS
มีคำสั่งอย่างเช่นให้ปรับสีพื้นหลัง สีตัวอักษร ขนาดฟอนต์ padding, margin, border ฯลฯ ให้ตรงเป๊ะ ใช้ข้อความในสกรีนช็อตตามเดิม “เขียนโค้ดทั้งหมด”, ทำจำนวนองค์ประกอบที่ซ้ำให้ตรงกัน, อย่าละไว้ด้วยคอมเมนต์, ใช้รูปจาก placehold.co และใส่คำอธิบายละเอียดใน alt
Tailwind ใช้
https://cdn.tailwindcss.com, Google Fonts และ Font Awesome ได้ และให้คืนโค้ดทั้งหมดเฉพาะภายในแท็กเท่านั้น ห้ามใช้ Markdown code fenceโดยส่วนตัวผมไม่คิดว่า defensive prompting จะเป็นหนทางข้างหน้า แต่การที่สิ่งนี้ทำงานได้ก็น่าทึ่งจริง ๆ รู้สึกเหมือนสิ่งที่เคยฝันตอนวัยรุ่น ตอนนี้ทำได้ด้วยความพยายามค่อนข้างน้อยแล้ว
คือ ทำตามคำสั่งแบบไม่นิ่ง, สร้างบั๊ก แล้วแก้ด้วยการตะโกนใส่เครื่อง
ถ้าเห็นคำว่า “นี่เป็นความท้าทายที่ซับซ้อน” อีกครั้งคงเหนื่อยจริง ๆ บางครั้งโมเดลที่ “ขี้เกียจ” น้อยกว่า แม้ประสิทธิภาพจะมีแค่ 60% ก็ยังดีกว่า การจะดึงความสามารถอีก 40% ที่เหลือออกมาต้องใช้ prompt engineering เพิ่มเติม ซึ่งรู้สึกเหมือนไม่ใช่ข้อจำกัดทางเทคนิค แต่เหมือนถูกทำให้อ่อนลงโดยตั้งใจ
ถึงอย่างนั้น สำหรับคู่แข่งแล้วข้อเรียกร้องแบบนี้ก็ยังยากอยู่ดี ตอนนี้ OpenAI เลยชนะ
แน่นอนว่ามันยังเจ๋งและมีประโยชน์มาก ดังนั้นถ้ามีการแข่งขันที่ไม่ได้เอาแต่บ่นแต่ทำได้จริง ๆ โผล่ขึ้นมา อีกไม่กี่ปีข้างหน้าน่าจะสนุก
ลองเพิ่มว่า “การทำสิ่งนี้ให้ถูกต้องสำคัญต่ออาชีพของฉันมาก” น่าจะดี
ตอนนี้หาไม่เจอแล้ว แต่ตามวิดีโอวิจัย YouTube บางอันบอกว่าคุณภาพผลลัพธ์ดีขึ้นอย่างเห็นได้ชัดในหลายงาน
ตามงานวิจัย พรอมป์ต์ที่มีภาษาทางอารมณ์ทำให้ประสิทธิภาพโดยรวม ดีขึ้น 8% ในงานอย่าง “เปลี่ยนประโยคให้เป็นภาษาทางการ” และ “หาลักษณะร่วมของวัตถุที่กำหนด”
ตอนนี้ไม่รู้แล้วว่าควรสร้างอะไร หรือควรคิดเรื่องที่จะสร้างอย่างไร
ไม่ได้ตั้งใจจะดูถูกโปรเจกต์นี้เลย และขอบคุณที่เปิดซอร์ส แต่ตอนนี้มีปัญหาทั้งกลุ่มที่ดูเหมือนแก้ได้ค่อนข้างง่าย จนรู้สึกว่า “แล้วจะทำไปทำไม?”
คงต้อง ปรับกรอบการตั้งปัญหาใหม่ ทั้งในแง่ว่าอะไรควรค่าแก่การแก้ และควรแก้อย่างไร
ถ้าเครื่องมือแบบนี้สร้าง “โค้ดที่ดีพอ” ซึ่งต้องเกลาอีกนิดหน่อยได้ ก็จะ ประหยัดเวลาได้มาก
ถ้ามันแค่ปล่อยโค้ดมั่ว ๆ ออกมาก็มีประโยชน์น้อยลง
คนสายเทคนิคมักหมกมุ่นกับเครื่องมือที่ใช้มากเกินไป ไม่รู้เห็นโปรเจกต์ “hello world” ว่างเปล่าธรรมดาสุด ๆ ถูกเอามาโชว์เพียงเพราะฝืนจับ Framework A กับ Toolkit B มาต่อกันมากี่ครั้งแล้ว และมันน่าเบื่อจริง ๆ
เทคโนโลยีที่ใช้ LLM ท้าทายในบริบทนี้ เพราะต้องคิดใหม่ถึงความเป็นไปได้เอง ถ้าเครื่องมือเป็นแบบอเนกประสงค์ การทำ showcase ธรรมดา ๆ ก็แทบไม่มีความหมาย
จุดที่น่าทึ่งคือแน่นอนว่ามันทำได้ด้วยโมเดลทั่วไป แต่การสร้าง ข้อมูล supervised learning สำหรับงานนี้น่าจะค่อนข้างง่าย
สร้าง HTML → render แล้วถ่ายสกรีนช็อต → ใช้ข้อมูลนั้นย้อนกลับไปฝึกได้
ในหน้า GitHub บอกว่าจะมีเวอร์ชันที่โฮสต์ผ่าน Pico เลยสงสัยว่าทำไมถึงเลือก Pico
เพิ่งรู้จัก Pico จากหน้านั้น แต่ดูเหมือน Pico จะจ่ายให้แค่ 30% ของรายได้ ซึ่งเป็นครึ่งหนึ่งของส่วนแบ่ง 60% ของ app store ทั่วไป และเท่าที่อ่านมา ดูเหมือนจะจ่ายเฉพาะเมื่อผู้ใช้ฟรีลองใช้แอปแล้วสมัคร ส่วนผู้ใช้ที่มีอยู่บนแพลตฟอร์มอยู่แล้วมาใช้จะไม่ได้จ่าย
เงื่อนไขดูแย่กว่าแพลตฟอร์มแบบดั้งเดิมมาก แถมฐานผู้ใช้ก็ดูเล็กกว่า เลยสงสัยเหตุผลที่เลือก
และ Pico เป็นแพลตฟอร์มสร้างเว็บแอปทั่วไป ส่วนรายได้ 30% นั้นใช้กับ affiliate เท่านั้น ไม่ได้ใช้กับการชำระเงินภายในแอป Pico ยังไม่รองรับการชำระเงินภายในแอป
ไม่ค่อยเข้าใจประเด็น ถ้าจะคัดลอกเว็บไซต์ที่มีอยู่ ทำไมไม่ใช้ Httrack
เว็บต้นฉบับย่อมเหมือนกว่าเสมอ และยังประหยัดค่า GPT API ได้ด้วย เทคนิคนี้จะโดดเด่นในกรณีจากสเก็ตช์ไปเป็นเว็บไซต์
ชอบมากที่เดโมเว็บไซต์ที่สร้างขึ้นถูกแสดงทันทีระหว่างกำลังสร้าง ด้วย iframe ที่มี
srcdocเรียบง่ายและสวยงาม
หากมองข้ามรายละเอียดการทำงานของ “AI” ไป สิ่งนี้ก็เป็นการสร้าง HTML ในความหมายที่คล้ายกับการแปลงภาพแรสเตอร์ให้เป็น SVG ที่พอขยายแล้วดูแย่ และทำให้ renderer ต้องวาดเส้นกับเติมสีที่ไม่จำเป็น
กล่าวคือผลลัพธ์ยังดูไม่สะอาดพอที่จะส่งต่อให้เว็บเดเวลลอปเปอร์ได้ เดเวลลอปเปอร์คงต้องเขียนใหม่แทบทั้งหมด ยกเว้นโครงสร้างระดับบนสุดที่เห็นชัดที่สุด ซึ่งแต่เดิมก็ไม่จำเป็นต้องใช้เครื่องมือขั้นสูงอยู่แล้ว และปลั๊กอิน snippet ของ text editor ยังทำได้ดีกว่า
หลายส่วนของการพัฒนาเว็บมองไม่เห็นด้วยซ้ำ accessibility คือเมทาดาทาที่ไม่สามารถได้มาจาก screenshot และ CSS แบบ responsive ก็น่าจะต้องใช้วิดีโอที่บันทึกพฤติกรรมและแอนิเมชันทั้งหมดโดยไม่ตกหล่น
JavaScript ดูแทบจะเป็นไปไม่ได้ที่จะตัดสินจากการรู้จำภาพไม่ว่าจะมากแค่ไหนก็ตาม
แบบนี้คัดลอก HTML จริงจาก developer tools โดยตรงจะไม่ดีกว่าหรือ?
น่าจะทำให้สร้าง เว็บไซต์ฟิชชิง ได้เร็วขึ้นมาก