ทำงานโดยใช้ API การเสร็จสิ้นการแชทของ OpenAI (เช่น gpt-3.5-turbo, gpt-4 ฯลฯ) คุณจะต้องมีสิทธิ์เข้าถึง API นี้ (ชำระเงิน)
การใช้ gpt-4 ผ่าน API นั้นเร็วกว่าการใช้ ChatGPT plus มาก และไม่จำกัดจำนวนข้อความ
แชททั้งหมดจะถูกเก็บไว้ใน localStorage ดังนั้นคุณจะไม่สามารถเข้าถึงได้จากเบราว์เซอร์หรืออุปกรณ์อื่น เว้นแต่คุณจะใช้ฟังก์ชันส่งออก / นำเข้า
นี่ถือเป็นการทดลองเรียนรู้
ฉันต้องการลองใช้ OpenAI API และในขณะเดียวกัน ฉันก็อยากรู้ว่าจะง่ายแค่ไหนในการเขียนอินเทอร์เฟซใน Web Components ธรรมดาด้วย Tailwind CSS
ฉันต้องการให้การพัฒนาง่ายที่สุดเท่าที่จะเป็นไปได้ โดยควรไม่มีขั้นตอนการสร้างใดๆ และไม่มีแพ็คเกจ npm อย่างแน่นอน
ดังนั้นเพียงแค่โหลดไฟล์ลงในเบราว์เซอร์ของคุณและเริ่มเขียนโค้ด
ขณะนี้โครงสร้างค่อนข้างยุ่ง เนื่องจากฉันได้ลองทำสิ่งที่แตกต่างกัน
นี่คือผลลัพธ์!
โดยทำงานทั้งหมดจากหน้า GitHub ในเบราว์เซอร์ โดยไม่มีการเรียกจากภายนอก ยกเว้น OpenAI API
ขออภัย TailwindCSS ต้องมีขั้นตอนการสร้าง เว้นแต่ว่าคุณต้องการโหลด CSS lib ทั้งหมดลงในเบราว์เซอร์ของคุณ
ดังนั้นฉันจึงยอมรับว่าฉันต้องเรียกใช้ tailwindcss CLI ขนาดเล็กซึ่งจะเฝ้าดูโค้ดและสร้างไฟล์ CSS ใหม่เมื่อมีการเปลี่ยนแปลง
และหากต้องการใช้การนำเข้า ทุกอย่างจะต้องทำหน้าที่เป็นเว็บไซต์ที่เหมาะสม เช่น: http:// ไม่ใช่ file:///
ดังนั้นฉันจึงต้องใช้เว็บเซิร์ฟเวอร์ขนาดเล็ก (npx http-server) ในไดเร็กทอรีนี้เมื่อทำการพัฒนา
อย่างน้อยสิ่งเหล่านี้ก็รวดเร็วเมื่อเทียบกับการใช้อะไรอย่าง Webpack, Vite ฯลฯ
และไม่มีขั้นตอนการสร้าง - เป็นเพียงบริการ dev เล็กๆ น้อยๆ สองสามอย่าง
แม้ว่าจะสามารถหลีกเลี่ยงเฟรมเวิร์กได้ แต่เพียงใช้ Web Components คุณไม่จำเป็นต้องพึ่งพาภายนอกมากมาย ก่อนที่ชีวิตของคุณจะง่ายขึ้น เช่นโดยใช้บางอย่างเช่นไวต์
Vite จะช่วยให้คุณรักษาการพึ่งพาภายนอกทั้งหมดไว้ในเครื่อง (คุณให้บริการ) และอัปเดตอยู่เสมอ และเปิดใช้งานการโหลดซ้ำแบบด่วน
การใช้ Web Components เพียงอย่างเดียวจะใช้ได้กับเบราว์เซอร์สมัยใหม่เท่านั้น ดังนั้นคุณจึงควรเลือกซื้อ Framework เช่นกัน หากคุณต้องการสนับสนุนเบราว์เซอร์ใดๆ ที่ผู้สร้างไม่รองรับอีกต่อไป (เช่น Internet Explorer, Chrome รุ่นเก่า, Safari เป็นต้น)