การสร้างโค้ดและไวร์เฟรม
ภาพรวม
เมื่อคุณใส่คำอธิบายรูปภาพด้วย bounding box และกำหนดพฤติกรรมแล้ว คุณสามารถสร้างโค้ดคอมโพเนนต์ที่ใช้งานได้หรือเลย์เอาต์ไวร์เฟรม AI ใช้ตำแหน่ง bounding box, ประเภทองค์ประกอบ และการกำหนดพฤติกรรมเพื่อสร้างเอาต์พุตที่แม่นยำ
แถบด้านข้างผู้ช่วย AI
แผงผู้ช่วย AI เป็นแถบด้านข้างขวาที่ใช้กำหนดค่าและทริกเกอร์การสร้างโค้ดหรือไวร์เฟรม มีตัวควบคุมต่อไปนี้:
ตัวเลือก Vision Model
เลือกโมเดล AI vision ที่จะใช้วิเคราะห์รูปภาพและสร้างเอาต์พุต โมเดลต่างกันอาจให้ระดับรายละเอียดและความแม่นยำที่แตกต่างกัน
ตัวเลือกเฟรมเวิร์ก
เลือกเฟรมเวิร์กเป้าหมายสำหรับการสร้างโค้ด (เช่น React, Vue, Svelte) โค้ดที่สร้างจะใช้ไวยากรณ์และรูปแบบของเฟรมเวิร์กที่เลือก
แท็บ Components / Wireframes
สลับระหว่างการสร้างโค้ดคอมโพเนนต์ (แท็บ Components) หรือเลย์เอาต์ไวร์เฟรม (แท็บ Wireframes) จากรูปภาพที่ใส่คำอธิบาย
กลุ่มรูปภาพ
แสดงรายการกลุ่มรูปภาพทั้งหมดสำหรับโปรเจกต์ reverse ปัจจุบัน เลือกกลุ่มเพื่อดูตัวอย่างรูปภาพและกำหนดค่าการสร้าง แต่ละกลุ่มแสดงจำนวนรูปภาพ
สร้างบล็อก
คลิกเพื่อเริ่มกระบวนการสร้าง AI AI จะวิเคราะห์รูปภาพของกลุ่มที่เลือกพร้อมคำอธิบาย bounding box และพฤติกรรมเพื่อสร้างเอาต์พุต
โหมดเอาต์พุต
สร้างโค้ด
แปลงรูปภาพที่ใส่คำอธิบายเป็นโค้ดคอมโพเนนต์ที่ใช้งานได้สำหรับเฟรมเวิร์กเป้าหมาย (React, Vue, Svelte ฯลฯ) โค้ดที่สร้างรวมเลย์เอาต์ สไตล์ และพฤติกรรมที่คุณกำหนดบน bounding box
สร้างไวร์เฟรม
ส่งออกรูปภาพที่ใส่คำอธิบายเป็นเลย์เอาต์ไวร์เฟรมที่เปิดในเครื่องมือ Wireframe แต่ละ bounding box จะกลายเป็นองค์ประกอบไวร์เฟรมที่คุณสามารถปรับแต่ง จัดเรียงใหม่ และเชื่อมต่อกับหน้าจออื่น
ฟีเจอร์การสร้างโค้ด
การเลือกเฟรมเวิร์ก
เลือกเฟรมเวิร์กเป้าหมายก่อนสร้าง เฟรมเวิร์กที่รองรับรวมถึง React, Vue, Svelte, SolidJS, Angular และอื่นๆ
การแมปพฤติกรรม
พฤติกรรมที่กำหนดให้ bounding box จะถูกแปลงเป็น event handler, ลอจิกการนำทาง, modal และโค้ดแบบโต้ตอบอื่นในเอาต์พุต
ความแม่นยำเลย์เอาต์
AI ใช้ตำแหน่งและขนาด bounding box จากรูปภาพเพื่อสร้างเลย์เอาต์ที่ตรงกับการออกแบบภาพต้นฉบับอย่างใกล้เคียง
บันทึกไปยังบล็อก
คอมโพเนนต์ที่สร้างสามารถบันทึกโดยตรงไปยังไลบรารีบล็อกเพื่อนำกลับมาใช้ข้ามโปรเจกต์
เพิ่มลงในโปรเจกต์
แทรกโค้ดที่สร้างโดยตรงลงในโปรเจกต์ปัจจุบันเป็นไฟล์คอมโพเนนต์ใหม่
เคล็ดลับ
เพื่อผลลัพธ์ที่ดีที่สุด ใช้รูปภาพความละเอียดสูงที่มีองค์ประกอบ UI ที่ชัดเจน วาด bounding box รอบแต่ละองค์ประกอบอย่างแน่น กำหนดพฤติกรรมที่เฉพาะเจาะจงแทนคำอธิบายคลุมเครือ — "เปิด signup modal" ทำงานได้ดีกว่า "ทำอะไรบางอย่าง" AI ทำงานได้ดีที่สุดกับเลย์เอาต์เว็บมาตรฐานและรูปแบบ UI ทั่วไป