Files

Kunthawat Greethong f490c63632 feat: add extension implementation and docs

Add manifest.json, sidepanel components, and scripts.
Include project assets and documentation files.
Remove placeholder blank file.

2026-01-06 08:49:28 +07:00

9.9 KiB

Raw Permalink Blame History

JSON Prompt Structure Documentation

ภาพรวม

Extension ใช้ระบบ JSON structure เพื่อสร้าง prompt ที่มีความแม่นยำและควบคุมได้ดีขึ้น โดยจะแปลงข้อมูลจากผู้ใช้เป็น JSON ก่อน แล้วจึงแปลงเป็น text prompt เพื่อส่งไปยัง Gemini

โครงสร้าง JSON

{
  "style": {
    "type": "breaking-news",
    "name": "ข่าวด่วน",
    "description": "Breaking news cover design, urgent dramatic style, bold red theme..."
  },
  "aspectRatio": {
    "ratio": "16:9",
    "description": "16:9 aspect ratio"
  },
  "text": {
    "enabled": true,
    "content": "ข่าวด่วน! เหตุการณ์สำคัญ",
    "style": "3d",
    "backgroundColor": "#ff0000",
    "borderColor": "#ffffff"
  },
  "image": {
    "hasUploadedImage": true,
    "integration": "Incorporate and integrate the uploaded image seamlessly..."
  },
  "customInstructions": "เพิ่มเอฟเฟกต์แสงสว่าง",
  "quality": {
    "level": "professional",
    "requirements": [
      "high resolution",
      "magazine cover standard",
      "visually stunning"
    ]
  },
  "metadata": {
    "timestamp": "2025-12-28T06:51:56.000Z",
    "version": "1.0"
  }
}

คำอธิบายแต่ละส่วน

1. style

type: รหัสสไตล์ (breaking-news, political, movie-poster, drama, action)
name: ชื่อสไตล์ภาษาไทย
description: คำอธิบายสไตล์แบบละเอียด

2. aspectRatio

ratio: อัตราส่วนที่เลือก (1:1, 3:4, 4:3, 2:3, 9:16, 16:9)
description: คำอธิบายอัตราส่วน

3. text

enabled: เปิด/ปิดการใส่ข้อความ
content: ข้อความที่ต้องการแสดง
style: สไตล์ตัวหนังสือ (normal, bold, 3d, outlined)
backgroundColor: สีพื้นหลังข้อความ (hex color)
borderColor: สีเส้นขอบ (hex color)

4. image

hasUploadedImage: มีรูปภาพที่อัปโหลดหรือไม่
integration: คำสั่งการผสานรูปภาพเข้ากับดีไซน์

5. customInstructions

คำสั่งเพิ่มเติมจากผู้ใช้ (string หรือ null)

6. quality

level: ระดับคุณภาพ
requirements: ข้อกำหนดคุณภาพ (array)

7. metadata

timestamp: เวลาที่สร้าง (ISO 8601)
version: เวอร์ชันของ JSON structure

กระบวนการทำงาน

1. สร้าง JSON Structure

function generatePromptJSON() {
  const promptData = {
    style: { ... },
    aspectRatio: { ... },
    text: { ... },
    // ...
  };
  return promptData;
}

2. แปลง JSON เป็น Text Prompt

function jsonToPrompt(promptData) {
  const parts = [];
  
  // ประมวลผลแต่ละส่วนของ JSON
  parts.push(promptData.style.description);
  parts.push(`Create the image in ${promptData.aspectRatio.ratio} aspect ratio`);
  
  // ... ประมวลผลต่อ
  
  return parts.join('. ') + '.';
}

3. รวมทั้งสองฟังก์ชัน

function generatePrompt() {
  const jsonStructure = generatePromptJSON();
  const textPrompt = jsonToPrompt(jsonStructure);
  
  return {
    json: jsonStructure,
    text: textPrompt
  };
}

ตัวอย่างการใช้งาน

ตัวอย่างที่ 1: ข่าวด่วนแบบมีข้อความ

Input:

สไตล์: ข่าวด่วน
ขนาด: 16:9
ข้อความ: "ข่าวด่วน!"
สไตล์ข้อความ: 3D
สีพื้นหลัง: #ff0000
สีขอบ: #ffffff

JSON Output:

{
  "style": {
    "type": "breaking-news",
    "name": "ข่าวด่วน",
    "description": "Breaking news cover design, urgent dramatic style, bold red theme, high impact typography, professional news broadcast aesthetic, dramatic lighting, sense of urgency"
  },
  "aspectRatio": {
    "ratio": "16:9",
    "description": "16:9 aspect ratio"
  },
  "text": {
    "enabled": true,
    "content": "ข่าวด่วน!",
    "style": "3d",
    "backgroundColor": "#ff0000",
    "borderColor": "#ffffff"
  },
  "image": {
    "hasUploadedImage": true,
    "integration": "Incorporate and integrate the uploaded image seamlessly into the cover design as the main visual element"
  },
  "customInstructions": null,
  "quality": {
    "level": "professional",
    "requirements": ["high resolution", "magazine cover standard", "visually stunning"]
  }
}

Text Prompt Output:

Breaking news cover design, urgent dramatic style, bold red theme, high impact typography, professional news broadcast aesthetic, dramatic lighting, sense of urgency. Create the image in 16:9 aspect ratio. Include prominent headline text: "ข่าวด่วน!" with 3D effect, depth, and dramatic shadows. Text background color: #ff0000. Text border/outline color: #ffffff. Incorporate and integrate the uploaded image seamlessly into the cover design as the main visual element. high resolution, magazine cover standard, visually stunning.

ตัวอย่างที่ 2: โปสเตอร์ภาพยนต์ไม่มีข้อความ