สร้างสติกเกอร์ไลน์ด้วย Google Opal

ส่วนหนึ่งของ workshop #สร้างสติกเกอร์ไลน์ด้วยAI โดยใช้ #GoogleOpal เพียงแนบรูปถ่ายที่ต้องการใช้ทำสติกเกอร์ไปใน Mini App ที่สร้างด้วย Google Opal คลิกสร้างทีเดียว ได้สติกเกอร์ 1 ชุด 8 ท่าทาง เอาไปปรับแต่งขนาดใน #Canva แล้วอัปโหลดวางขายใน Line Creator Market ได้เลยนะคะ

ป.ล. เดี๋ยวนี้ Line Stickers ประเมินเร็วมาก รู้ผลในวนเดียว

Mini app ตัวอย่างสำหรับทางไปลอง: https://opal.google/app/1uLP26frslrk7UtWtI3scjl6aA1fSNRcI?shared

____

#วิธีสร้าง  MiniApp #สร้างสติกเกอร์ไลน์ด้วยAI โดยใช้ #GoogleOpal

#UserInputกล่องที่1: "title": "Describe Sticker"

รับค่าข้อความหรือรูปภาพจากผู้ใช้ว่าต้องการลักษณะสติกเกอร์รูปร่างแบบไหน ตัวอย่างแนบรูปถ่ายและระบุว่าสร้างสติกเกอร์จากคนในภาพ

#UserInputกล่องที่2: "title": "Sticker Subject"

รับค่าลักษณะท่าทางของสติกเกอร์ เช่น ครูสอนคอมพิวเตอร์และเทคโนโลยี

______

#GenerateAIProcessกล่องที่1: "title": "Generate Image Prompt"

ใช้เขียน Image Prompt เลือกโมเดลเป็น "Gemini-2.5-Pro" หรือ "Gemini-2.5-Flash" (ขึ้นอยู่กับสิทธิ์ของผู้สร้างนะคะ)

ใส่ Prompt:

____

You are an expert creative image prompt generator for GenAI models, skilled at crafting detailed visual descriptions that result in multiple distinct and high-quality images. Your task is to generate a natural language image prompt that combines the user's specified sticker theme and subject, clearly instructing the model to create 8 distinct Chibi-style images suitable for stickers, with no background. The prompt should incorporate an artistic style and elements relevant to the theme and subject, providing a detailed visual description for each image to be generated.

# Step by Step instructions

1. Begin by acknowledging the Sticker Theme and Sticker Subject provided.

2. Formulate a detailed visual description for the first sticker image, incorporating the Sticker Theme, Sticker Subject, an appropriate Chibi artistic style, and explicitly state "no background."

3. After creating the description for the first image, check if you have generated descriptions for exactly 8 distinct sticker images. If not, generate a detailed visual description for the next distinct sticker image, ensuring it varies from the previous ones (different poses) while still adhering to the Sticker Theme, Sticker Subject, Chibi style, and "no background." Repeat this step until you have descriptions for exactly 8 distinct images.

4. For each image description, add a header in the format "Image X:" where X is the image number.

5. Conclude the prompt with the exact phrase "IMPORTANT: Generate exactly 8 images".

Sticker Theme:

"""

{{"type": "in", "path": "ask_user_sticker_theme", "title": "Describe Sticker"}}

"""

Sticker Subject:

"""

{{"type": "in", "path": "ask_user_sticker_subject", "title": "Sticker Subject"}}

"""

IMPORTANT NOTE: Start directly with the output, do not output any delimiters.

Output:

___

#GenerateAIProcessกล่องที่2: "title": "Generate Images"

ใช้ Generate ภาพ เลือกโมเดล Nano-Banana

ใส่ Prompt:

____

Generate a single, high-quality image at a time, based on the following descriptions. Continue generating images one at a time until a total of 8 images have been created. Ensure a consistent, high-quality sticker art style with clear outlines, vibrant colors, and a polished finish suitable for a distinct sticker design. Do not create composite images or image collages.

image_generation_prompt: {{"type": "in", "path": "node_step_image_generation_prompt", "title": "Generate Image Prompt"}}

IMPORTANT: Generate exactly 8 images

___

#Output แสดงผลลัพธ์เป็นหน้าเว็บเพจสำหรับดาวน์โหลดสติกเกอร์

ใส่ Prompt:

____

Webpage Generation Instruction:

**Layout Organization**:

The webpage should have a clear, multi-section layout:

1.  **Header**: A prominent, centered header at the top of the page displaying a title like "Your Custom Stickers".

2.  **Context Section**: Immediately below the header, a dedicated section to display the "Sticker Theme" and "Sticker Subject". These should be clearly labeled and presented, perhaps in a compact, horizontally aligned block or a subtle card.

3.  **Sticker Gallery Section**: The main content area will be a gallery showcasing the multiple generated sticker images. This section should dominate the page visually.

4.  **Footer**: A simple footer at the bottom for copyright or app information.

The sticker images within the gallery should be organized using a responsive grid layout. On larger screens, aim for 3-4 columns; on tablets, 2-3 columns; and on mobile devices, a single column or 2 columns, ensuring each sticker is adequately sized and distinct. Each sticker image should be presented as an individual, distinct item.

**Style Design Language**:

*   **Visual Design Approach**: Expressive and creative, with a modern, clean aesthetic. The design should feel polished but also playful, emphasizing the artistic nature of the stickers.

*   **Aesthetic Goal**: Playful and vibrant, reminiscent of a curated sticker collection or a creative digital art showcase. The overall impression should be engaging and visually stimulating.

*   **Color Scheme**: Use a light, clean, neutral background (e.g., soft off-white or light gray) to make the diverse colors of the stickers pop. Incorporate a vibrant accent color for headings, labels, and subtle interactive elements (if any), drawing inspiration from a bright, optimistic palette (e.g., a cheerful yellow, a bright teal, or a lively coral).

*   **Typography Style**:

   *   For body text and context labels: A clean, highly readable modern sans-serif font (e.g., Inter, Nunito, Lato) to maintain clarity and a fresh feel.

   *   For titles and main headings: A slightly bolder or more distinctive sans-serif font that conveys creativity and playfulness without being overly whimsical.

*   **Spacing and Layout Principles**: Utilize generous whitespace around all elements, especially between and around the sticker images, to prevent clutter and allow each sticker to breathe and be appreciated individually. Employ consistent padding and margins throughout to establish a harmonious and organized visual flow. Images should be given ample space to ensure they are the primary focus.

**Component Guidelines**:

*   **Context Display**: The sticker theme and subject should be presented clearly, possibly within a lightweight card or container with subtle styling to differentiate them from the main gallery.

*   **Image Gallery**: Each generated sticker image should be displayed as an individual, distinct item within a responsive grid item. Consider adding a subtle border or shadow around each image to give it a physical "sticker" feel, making it appear slightly detached from the background. Images should be of good quality and scale gracefully.

*   **Responsiveness**: The entire layout, especially the image grid, must be fully responsive, adapting seamlessly to desktop, tablet, and mobile screen sizes. Images should scale appropriately, and the grid columns should adjust.

sticker_theme: {{"type": "in", "path": "ask_user_sticker_theme", "title": "Describe Sticker"}}

sticker_subject: {{"type": "in", "path": "ask_user_sticker_subject", "title": "Sticker Subject"}}

sticker_images: {{"type": "in", "path": "node_step_sticker_images", "title": "Generate Images"}}

______