หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

ยินดีต้อนรับสู่ AI Component Generator พร้อม ChatGPT

โปรเจ็กต์นี้สร้างองค์ประกอบ UI เกือบทั้งหมดด้วย ChatGPT ของ OpenAI และอนุญาตให้คุณคัดลอกโค้ด html

เครื่องกำเนิดชีวภาพของ Twitter

เครื่องกำเนิดส่วนประกอบ AI2UI

มันทำงานอย่างไร

โปรเจ็กต์นี้ใช้ฟังก์ชัน ChatGPT API และ Vercel Edge โดยจะสร้างพรอมต์ตามแบบฟอร์มและการป้อนข้อมูลของผู้ใช้ จากนั้นส่งไปยัง chatGPT API ผ่านฟังก์ชัน Vercel Edge จากนั้นสตรีมการตอบกลับกลับไปยังแอปพลิเคชัน คุณสามารถขอองค์ประกอบ UI ใดก็ได้ฟรีสไตล์ เป็นไปได้มากว่ามันจะสร้างสิ่งที่ถูกต้องสำหรับคุณ นอกจากนี้ยังสามารถใช้เป็นบูตสแตรปที่ยอดเยี่ยมสำหรับโปรเจ็กต์ได้ ฉันพยายามสร้างสไตล์ Material-UI ให้เป็นสไตล์ แต่คุณสามารถเปลี่ยนลักษณะการทำงานนี้ได้

ส่งออกส่วนประกอบของคุณ

ตอนนี้คุณสามารถเลือกระหว่างการส่งออก HTML ของส่วนประกอบ UI ของคุณกับชุด Tailwind CSS, Next.js, React.js, Material UI ที่คุณต้องการ

ทำงานในพื้นที่

โปรเจ็กต์นี้สร้างด้วย Next.js และ TailwindCSS ดังนั้นคุณจึงสามารถปรับใช้กับ Vercel ได้โดยตรง

หลังจากการโคลน repo ให้ไปที่ OpenAI เพื่อสร้างบัญชีและใส่คีย์ API ของคุณในไฟล์ชื่อ .env (OPENAI_API_KEY) จากนั้นรันแอปพลิเคชันในบรรทัดคำสั่ง และจะสามารถใช้งานได้ที่ http://localhost:3000

 ติดตั้ง npm

ผู้พัฒนาเส้นด้าย

การเปลี่ยนข้อความแจ้งและคำขอของ ChatGPT

ในการเปลี่ยนการตอบกลับ ChatGPT คุณเพียงแค่ต้องยกตัวอย่างสิ่งที่คุณต้องการได้รับคืน (ใช้บทบาทผู้ช่วยเพื่อสร้างตัวอย่างการตอบกลับที่ดี)" ในตัวอย่างด้านล่าง ฉันจะแสดงวิธีสร้าง TailwindCSS และ Next .js และขอคืนโค้ด HTML ที่เกี่ยวข้องในภายหลัง

 // /api/generate.tsconst handler = async (req: Request): Promise => {const {prompt} = (await req.json()) as {prompt?: string;};if (!prompt ) {return new Response("No prompt in the request", {status: 400});} const payload: OpenAIStreamPayload = {model: "gpt-3.5-turbo",ข้อความ: [{"role": "user", "content": "create next.js + โค้ด CSS ของ tailwind สำหรับปุ่ม 200 x 100 พื้นหลังสีม่วงอ่อน สร้างข้อความ กรุณาสร้าง องค์ประกอบ next.js ที่สมบูรณ์" ผู้รับบทบาท": "ผู้ช่วย", "เนื้อหา": ` นำเข้าปฏิกิริยาจาก 'ปฏิกิริยา';                    const MyComponent = () => { return ( 
 
สวัสดีชาวโลก 
ยินดีต้อนรับสู่ส่วนประกอบ Next.js ของฉันโดยใช้ Tailwind CSS
  
 ) ;                    -                    ส่งออก MyComponent เริ่มต้น;                ` ส่วนประกอบ": "user", "เนื้อหา": "โปรดสร้างโค้ด html ด้วย inline css สิ่งที่สร้างส่วนประกอบต่อไปนี้, รูปลักษณ์และความรู้สึกของ Meterial UI, ส่งกลับเฉพาะโค้ด" เชิงบทบาท": "user" , "content": prompt},],};const stream = await OpenAIStream(payload);return new Response(stream);};

ใครเป็นคนทำโครงการนี้.

ฉันชื่อ Yuval ผู้มีหัวใจเป็นผู้ประกอบการ ฉัน ❤️ สร้างระบบแบบ end-to-end ที่ไม่เพียงแต่ดูน่าทึ่งและให้ความรู้สึกล้ำสมัย แต่ยังมีความหมายและผลกระทบที่แท้จริงอีกด้วย

- มีส่วนร่วม

ยินดีต้อนรับการมีส่วนร่วม ปัญหา และการร้องขอคุณสมบัติ!

  • แยกพื้นที่เก็บข้อมูล โคลนมันบนอุปกรณ์ของคุณ แค่นั้นแหละ?

  • ในที่สุดก็ทำการขอดึง :)

ใบอนุญาต

โครงการนี้ได้รับใบอนุญาต MIT

เรารับบริจาคด้วยความรักอันยิ่งใหญ่! แสดงความสนใจของคุณ! มีส่วนช่วย!

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด