# 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