แอปแปลงภาพหน้าจอเป็นโค้ด
- แอปง่าย ๆ สำหรับแปลงภาพหน้าจอเป็น HTML/Tailwind CSS
- ใช้ GPT-4 Vision เพื่อสร้างโค้ด และใช้ DALL-E 3 เพื่อสร้างภาพที่คล้ายกัน
- หากต้องการดูเดโม ให้ดูส่วนตัวอย่างด้านล่าง
อัปเดตล่าสุด
- เพิ่มตัวเลือกสำหรับปิดการสร้างภาพของ DALL-E ในกรณีที่ไม่ต้องการสร้างภาพ
- สามารถดูโค้ดได้โดยตรงภายในแอป
- หาก AI ใช้สไตล์ผิดหรือพลาดบางส่วนไป สามารถสั่งให้อัปเดตโค้ดได้
เริ่มต้นใช้งาน
- แอปประกอบด้วยฟรอนต์เอนด์ React/Vite และแบ็กเอนด์ FastAPI
- ต้องมีคีย์ OpenAI API ที่เข้าถึง GPT-4 Vision API ได้
- มีวิธีรันทั้งแบ็กเอนด์และฟรอนต์เอนด์ ทำให้ใช้งานแอปได้บนเครื่องโลคัล
คำถามที่พบบ่อย (FAQ)
- มีแนวทางแก้ไขเมื่อเกิดข้อผิดพลาดระหว่างตั้งค่าแบ็กเอนด์
- แนะนำวิธีขอรับคีย์ OpenAI API ที่มีโมเดล GPT4 Vision
- แนะนำวิธีส่งฟีดแบ็ก ขอฟีเจอร์ และรายงานบั๊ก
ตัวอย่าง
- มีตัวอย่างต้นฉบับและเวอร์ชันจำลองของหน้า NYTimes, Instagram, Hacker News เป็นต้น
เวอร์ชันโฮสต์
- ต้องมีคีย์ OpenAI และต้องเข้าถึง GPT-4 Vision ได้
- สามารถดูคำแนะนำการติดตั้งแบบโลคัลได้ในส่วนเริ่มต้นใช้งาน
ความเห็นของ GN⁺
แอปนี้เป็นเครื่องมือที่ล้ำสมัยสำหรับแปลงภาพหน้าจอเป็นโค้ดเว็บ โดยจุดสำคัญที่สุดคือการใช้เทคโนโลยี AI รุ่นใหม่อย่าง GPT-4 Vision และ DALL-E 3 เทคโนโลยีนี้น่าสนใจและชวนติดตาม เพราะช่วยให้นักพัฒนาเว็บและดีไซเนอร์ประหยัดเวลาและมีโอกาสโฟกัสกับงานสร้างสรรค์ได้มากขึ้น นอกจากนี้ ฟีเจอร์ที่ให้ผู้ใช้สั่ง AI เพื่อแก้ไขโค้ดได้โดยตรงยังช่วยปรับปรุงประสบการณ์ใช้งาน และเพิ่มความแม่นยำของ AI อีกด้วย
1 ความคิดเห็น
ความคิดเห็นจาก Hacker News
มีความเห็นว่าทехнологีนี้ให้ความรู้สึกราวกับเวทมนตร์ และแม้จะเข้าใจแนวคิดที่ว่าโครงข่ายประสาทเทียมเป็นการจำลองชุดฟังก์ชันที่แมปอินพุตไปเป็นเอาต์พุต แต่ก็ยังน่าทึ่งที่ GPT สามารถจำลองกระบวนการแมปรูปภาพไปเป็นโทเคนข้อความ HTML+Tailwind แล้วให้เบราว์เซอร์เรนเดอร์มันออกมาได้
มีคำถามว่าสามารถมองเครื่องมือนี้เป็น diagram compiler ได้หรือไม่ และมันจะเป็นส่วนหนึ่งของ build pipeline ที่แปลงอาร์ติแฟกต์จากเครื่องมืออย่าง Sketch หรือ Figma ไปเป็น HTML/CSS/JS ได้หรือไม่
ตัวอย่างพรอมต์ที่ใช้ Tailwind, HTML และ JS เพื่อสร้าง single-page app จากภาพสกรีนช็อตหน้าเว็บที่ผู้ใช้ให้มา พร้อมคำสั่งที่เน้นการคัดลอกดีไซน์ให้ตรงอย่างแม่นยำ
ความเห็นส่วนตัวว่าบางทีอาจมีแนวทางที่ดีกว่าการทำ defensive prompting แต่สิ่งที่น่าทึ่งคือเทคโนโลยีนี้ใช้งานได้จริง
กล่าวถึงวิดีโอวิจัยบน YouTube ที่ระบุว่าการเพิ่มวลี "สิ่งนี้สำคัญมากต่ออาชีพของฉัน" ช่วยยกระดับคุณภาพของผลลัพธ์ และเห็นว่าวลีนี้ช่วยปรับปรุงคุณภาพเอาต์พุตของงานหลายประเภทได้
มีความเห็นว่าเทคโนโลยีนี้ขยายขอบเขตของปัญหาที่สามารถแก้ได้ จนทำให้ต้องกลับมาคิดว่าควรสร้างอะไร และควรมองปัญหาและแก้มันด้วยวิธีที่ต่างออกไปอย่างไร
มีความเห็นว่าน่าทึ่งที่สามารถทำงานนี้ได้ด้วยโมเดลทั่วไป แต่ในขณะเดียวกันก็สามารถสร้างข้อมูลสำหรับ supervised learning ได้อย่างง่ายดาย
มีข้อมูลว่าจะเตรียมเปิดเวอร์ชันที่โฮสต์ผ่าน GitHub Pages และ Pico พร้อมคำถามว่าทำไมจึงเลือก Pico
ชื่นชมว่าวิธีแสดงเดโมเว็บไซต์ที่สร้างขึ้นแบบเรียลไทม์ผ่าน
iframeที่ใช้srcdocนั้นเรียบง่ายและสง่างามมีความเห็นว่าหากต้องการคัดลอกเว็บไซต์เดิม การใช้ Httrack อาจให้ผลลัพธ์ที่ใกล้เคียงกว่าและช่วยประหยัดค่าใช้จ่ายของ GPT API
แสดงความกังวลว่าการสร้างเว็บไซต์ฟิชชิงจะทำได้เร็วขึ้นมาก
มีความเห็นว่าเครื่องมือนี้เหมาะอย่างยิ่งสำหรับรับมือกับคำขอที่เปลี่ยนไปเรื่อย ๆ จากผู้จัดการโครงการ และตั้งคำถามว่ามันจะทำงานกับอินพุตที่กำกวมอย่าง "Make it pop" ได้หรือไม่