gemini-extension/README.md

Auto Cover Generator - Chrome Extension

🎨 คำอธิบาย

Extension สำหรับ Google Chrome ที่ช่วยสร้างหน้าปกข่าว/Youtube แบบอัตโนมัติด้วย Gemini AI โดยไม่ต้องใช้ API Key

✨ ฟีเจอร์

• 📱 Side Panel - แสดงผลด้านขวาของหน้า Gemini
• 🎭 เลือกสไตล์ปก - ข่าวด่วน, ข่าวการเมือง, โปสเตอร์ภาพยนต์, ดราม่า, แอคชั่น
• 📐 เลือกขนาด - 1:1, 3:4, 4:3, 2:3, 9:16, 16:9
• ✍️ ปรับแต่งตัวหนังสือ - 3D, ตัวหนา, มีเส้นขอบ
• 🎨 กำหนดสี - สีพื้นหลังข้อความ, สีเส้นขอบ
• 🖼️ อัปโหลดรูปภาพ - Drag & Drop หรือเลือกไฟล์
• 🤖 สร้าง Prompt อัตโนมัติ - ระบบสร้าง prompt ที่เหมาะสมตามการตั้งค่า
• 💾 ดาวน์โหลด - บันทึกรูปที่สร้างเสร็จลง Downloads

📦 การติดตั้ง

วิธีที่ 1: โหลด Extension แบบ Unpacked (สำหรับพัฒนา/ทดสอบ)

1. เปิด Chrome แล้วไปที่ chrome://extensions/
2. เปิด Developer mode ที่มุมขวาบน
3. คลิก Load unpacked
4. เลือกโฟลเดอร์ auto-cover-extension
5. Extension จะถูกติดตั้งและพร้อมใช้งาน

วิธีที่ 2: สร้าง Icons (ถ้าต้องการ)

1. เปิดไฟล์ icons/create-icons.html ในเบราว์เซอร์
2. รอให้ไฟล์ icon ดาวน์โหลดอัตโนมัติ (icon16.png, icon48.png, icon128.png)
3. ย้ายไฟล์ไปไว้ในโฟลเดอร์ icons/

หรือใช้ไอคอนชั่วคราวที่มีอยู่แล้ว

🚀 วิธีใช้งาน

1. เปิดหน้า Gemini

   • ไปที่ https://gemini.google.com
   • Extension จะเปิด Side Panel อัตโนมัติ

2. อัปโหลดรูปภาพ

   • ลากไฟล์มาวางในพื้นที่อัปโหลด
   • หรือคลิกเพื่อเลือกไฟล์

3. เลือกสไตล์และขนาด

   • คลิกเลือกสไตล์ที่ต้องการ (ข่าวด่วน, การเมือง, ฯลฯ)
   • เลือกขนาดหน้าปก (16:9, 1:1, ฯลฯ)

4. ปรับแต่งข้อความ (ถ้าต้องการ)

   • พิมพ์หัวข้อข่าว
   • เลือกสไตล์ตัวหนังสือ (ปกติ, ตัวหนา, 3D, มีเส้นขอบ)
   • กำหนดสีพื้นหลังและสีเส้นขอบ
   • หรือติ๊กเอาออกถ้าไม่ต้องการข้อความ

5. เพิ่ม Prompt เพิ่มเติม (ถ้ามี)

   • พิมพ์รายละเอียดเพิ่มเติมที่ต้องการ

6. สร้างหน้าปก

   • คลิกปุ่ม "สร้างหน้าปก"
   • ระบบจะส่ง prompt ไปยัง Gemini อัตโนมัติ
   • รอ Gemini สร้างรูปภาพ

7. ดาวน์โหลด

   • เมื่อรูปสร้างเสร็จ คลิกปุ่ม "ดาวน์โหลด"
   • รูปจะถูกบันทึกลงโฟลเดอร์ Downloads

🎯 ตัวอย่างสไตล์

ข่าวด่วน (Breaking News)

• ธีมสีแดงเร่งด่วน
• ตัวหนังสือโดดเด่น
• บรรยากาศเร้าใจ

ข่าวการเมือง (Political)

• ธีมสีน้ำเงินเป็นทางการ
• ดีไซน์มืออาชีพ
• บรรยากาศจริงจัง

โปสเตอร์ภาพยนต์ (Movie Poster)

• สไตล์ซีเนมาติก
• แสงเงาดราม่า
• ดีไซน์แบบ Hollywood

ดราม่า (Drama)

• บรรยากาศอารมณ์
• สีโทนอบอุ่น
• เน้นตัวละคร

แอคชั่น (Action)

• องค์ประกอบระเบิด
• พลังงานสูง
• สีสันเข้มข้น

🛠️ โครงสร้างโปรเจค

auto-cover-extension/
├── manifest.json              # Extension configuration
├── icons/                     # Extension icons
│   ├── icon16.png
│   ├── icon48.png
│   ├── icon128.png
│   └── create-icons.html
├── sidepanel/                 # Side panel UI
│   ├── panel.html
│   ├── panel.css
│   └── panel.js
└── scripts/                   # Background & content scripts
    ├── background.js
    └── content.js

⚙️ เทคโนโลยี

• Manifest V3 - Chrome Extension API ล่าสุด
• Side Panel API - แสดงผล UI ด้านข้าง
• Content Scripts - โต้ตอบกับหน้า Gemini
• Chrome Storage API - บันทึกการตั้งค่า
• Chrome Downloads API - ดาวน์โหลดรูปภาพ

📝 หมายเหตุ

• Extension ต้องใช้งานบนหน้า https://gemini.google.com เท่านั้น
• ต้องเข้าสู่ระบบ Google Account ที่มีสิทธิ์ใช้ Gemini
• การสร้างรูปภาพขึ้นอยู่กับความสามารถของ Gemini
• DOM selectors อาจต้องปรับปรุงถ้า Gemini เปลี่ยนโครงสร้างหน้าเว็บ

🐛 การแก้ไขปัญหา

Extension ไม่แสดง Side Panel

• ตรวจสอบว่าอยู่ในหน้า gemini.google.com
• ลองคลิกที่ไอคอน Extension
• Reload หน้าเว็บ

ไม่สามารถส่ง Prompt ได้

• ตรวจสอบว่า Gemini โหลดเสร็จแล้ว
• ลองรีเฟรชหน้าเว็บ
• เช็ค Console สำหรับ error messages

รูปภาพไม่ถูกดาวน์โหลด

• ตรวจสอบว่า Gemini สร้างรูปเสร็จแล้ว
• ตรวจสอบ permissions ของ Chrome
• ลองคลิกขวาที่รูปแล้ว Save Image As

📄 License

MIT License - ใช้งานได้อย่างอิสระ

👨‍💻 ผู้พัฒนา

สร้างด้วย ❤️ โดยใช้ Gemini AI