AI - เครื่องมือสร้างเรื่องราวและรูปภาพ

การทำงาน

📦 HTML, CSS, JavaScript และ GEMINI API: สร้างเรื่องราวแบบอินเทอร์แอกทีฟและเครื่องมือสร้างรูปภาพ

📝 การสร้างเรื่องราว: ใช้ Generative AI ของ Google เพื่อสร้างเรื่องราวตามข้อมูลที่ผู้ใช้ป้อน

🖼️ การสร้างรูปภาพ: ดึงข้อมูลรูปภาพที่ตรงกันจาก Unsplash API

🖊️ การโต้ตอบของผู้ใช้: ป้อนข้อความสำหรับเรื่องราวและสร้างรูปภาพด้วยปุ่ม

⏳ ตัวบ่งชี้การโหลด: แสดงภาพสปินเนอร์ระหว่างการสร้างเรื่องราวและการดึงข้อมูลรูปภาพ

⚠️ การจัดการข้อผิดพลาด: แสดงข้อความแสดงข้อผิดพลาดและบันทึกข้อผิดพลาดสำหรับการแก้ไขข้อบกพร่อง

🖥️ การแสดงเนื้อหา: แสดงผลเรื่องราวและรูปภาพที่สร้างขึ้นในเลย์เอาต์ที่เรียบร้อย

📱 การออกแบบที่ตอบสนอง: ปรับองค์ประกอบ UI ให้เหมาะกับหน้าจอขนาดต่างๆ

🎨 การเปลี่ยนแปลงสไตล์แบบไดนามิก: ปรับเส้นขอบและระดับความสูงของพื้นที่ข้อความเมื่อโฟกัส/เบลอ

✨ JavaScript สมัยใหม่: ใช้ async/await เพื่อเขียนโค้ดที่เรียบร้อย ดูแลรักษาง่าย และเป็นแบบโมดูล