วิธีสร้างแอปด้วย Nano Banana: คู่มือฉบับสมบูรณ์สำหรับนักพัฒนา

จาก [@patloeber](https://x.com/@patloeber): Google ได้เปิดตัว Gemini 2.5 Flash Image ซึ่งเป็นโมเดลใหม่ที่ทรงพลังสำหรับการสร้างและแก้ไขภาพ หรือที่รู้จักกันในชื่อโค้ดเนม Nano Banana โมเดลนี้มาพร้อมความสามารถระดับ前沿ในการสร้างและจัดการภาพ ปลดล็อกแอปพลิเคชันใหม่ๆ มากมาย

คู่มือนี้จะแนะนำทีละขั้นตอนสำหรับนักพัฒนาที่ต้องการผสาน Gemini 2.5 Flash Image หรือ Nano Banana เข้ากับแอปพลิเคชันของตนโดยใช้ Gemini Developer API

คู่มือนี้จะครอบคลุมหัวข้อดังนี้:

1. การใช้ Nano Banana ใน AI Studio
2. การตั้งค่าโปรเจกต์
3. การสร้างภาพ
4. การแก้ไขภาพ
5. การฟื้นฟูภาพถ่าย
6. การใช้ภาพอินพุตหลายภาพ
7. การแก้ไขภาพแบบสนทนา
8. แนวทางปฏิบัติที่ดีที่สุดและเทคนิคการตั้งค่า Prompt
9. ตัวอย่างจากชุมชนและแรงบันดาลใจ
10. แหล่งข้อมูล

นี่คือตัวอย่างสิ่งที่คุณจะสร้างในบทช่วยสอนนี้:

1prompt = "Restore and colorize this image from 1932"
2
3response = client.models.generate_content(
4    model="gemini-2.5-flash-image-preview",
5    contents=[prompt, image],
6)

มาเริ่มกันเลย!

1. การใช้ Nano Banana ใน Google AI Studio

แม้ว่าผู้ใช้ทั่วไปจะสามารถเข้าถึง Nano Banana ได้ใน Gemini app แต่สภาพแวดล้อมที่ดีที่สุดสำหรับนักพัฒนาในการสร้างต้นแบบและทดสอบ Prompt คือ Google AI Studio AI Studio เป็นสนามเด็กเล่นสำหรับทดลองโมเดล AI ที่มีอยู่ทั้งหมดก่อนที่จะเขียนโค้ด และยังเป็นจุดเริ่มต้นสำหรับการสร้างด้วย Gemini API

คุณสามารถใช้ Nano Banana ได้ฟรีภายใน AI Studio ในการเริ่มต้น ให้ไปที่ aistudio.google.com ลงชื่อเข้าใช้ด้วยบัญชี Google ของคุณ และเลือก Nano Banana จากตัวเลือกโมเดล

สำหรับการเข้าถึงโดยตรง ให้ใช้ลิงก์นี้เพื่อเริ่มเซสชันใหม่กับโมเดล: ai.studio/banana

เคล็ดลับ

: คุณยังสามารถสร้างแอป Nano Banana แบบ Vibe Code ได้โดยตรงใน AI Studio ที่

ai.studio/apps หรือสำรวจโค้ดและ Remix หนึ่งใน

แอปที่มีอยู่

2. การตั้งค่าโปรเจกต์

ในการทำตามคู่มือนี้ คุณจะต้องมีสิ่งต่อไปนี้:

• คีย์ API จาก Google AI Studio
• การตั้งค่าการเรียกเก็บเงินสำหรับโปรเจกต์ของคุณ
• Google Gen AI SDK สำหรับ Python หรือ JavaScript/TypeScript

ขั้นตอน A: สร้างคีย์ API

ทำตามขั้นตอนเหล่านี้:

• ใน Google AI Studio คลิก Get API key ในแผงนำทางด้านซ้าย
• ในหน้าถัดไป คลิก Create API key
• เลือกโปรเจกต์ Google Cloud ที่มีอยู่หรือสร้างใหม่ โปรเจกต์นี้ใช้สำหรับจัดการการเรียกเก็บเงินสำหรับการใช้งาน API

เมื่อกระบวนการเสร็จสมบูรณ์ คีย์ API ของคุณจะปรากฏขึ้น คัดลอกและเก็บไว้อย่างปลอดภัย

ขั้นตอน B: เปิดใช้งานการเรียกเก็บเงิน

แม้ว่าการสร้างต้นแบบใน AI Studio จะฟรี แต่การใช้โมเดลผ่าน API เป็นบริการแบบชำระเงิน คุณต้องเปิดใช้งานการเรียกเก็บเงินในโปรเจกต์ Google Cloud ของคุณ

ในหน้าจอการจัดการคีย์ API คลิก Set up billing ถัดจากโปรเจกต์ของคุณและทำตามคำแนะนำบนหน้าจอ

Nano Banana มีค่าใช้จ่ายเท่าไร?

การสร้างภาพด้วย Nano Banana มีค่าใช้จ่าย $0.039 ต่อภาพ * ด้วยเงิน $1 คุณสามารถสร้างภาพได้ประมาณ 25 ภาพ

* ราคาอย่างเป็นทางการคือ $0.30/1M input tokens และ $30/1M output tokens ภาพเอาต์พุตขนาด 1024x1024px มาตรฐานใช้ 1290 tokens ซึ่งเท่ากับ $0.039 ต่อภาพ สำหรับรายละเอียด โปรดดูที่

ตารางราคาของ Gemini 2.5 Flash Image

ขั้นตอน C: ติดตั้ง SDK

เลือก SDK สำหรับภาษาที่คุณต้องการ

1pip install -U google-genai
2# Install the Pillow library for image manipulation
3pip install Pillow

1npm install @google/genai

ตัวอย่างต่อไปนี้ใช้ Python SDK สำหรับการสาธิต โค้ดที่เทียบเท่าสำหรับ

การใช้ Nano Banana ใน JavaScript

มีอยู่ใน

GitHub Gist

3. การสร้างภาพจากข้อความ

ใช้ Nano Banana เพื่อสร้างภาพหนึ่งภาพหรือมากกว่าจาก Prompt ที่เป็นข้อความบรรยาย ใช้ model ID gemini-2.5-flash-image-preview สำหรับคำขอ API ทั้งหมด

1from google import genai
2from PIL import Image
3from io import BytesIO
4
5# Configure the client with your API key
6client = genai.Client(api_key="YOUR_API_KEY")
7
8prompt = """Create a photorealistic image of an orange cat
9with a green eyes, sitting on a couch."""
10
11# Call the API to generate content
12response = client.models.generate_content(
13    model="gemini-2.5-flash-image-preview",
14    contents=prompt,
15)
16
17# The response can contain both text and image data.
18# Iterate through the parts to find and save the image.
19for part in response.candidates[0].content.parts:
20    if part.text is not None:
21        print(part.text)
22    elif part.inline_data is not None:
23        image = Image.open(BytesIO(part.inline_data.data))
24        image.save("cat.png")

Output

โมเดลนี้เป็นโมเดลแบบ Multimodal ดังนั้นการตอบสนองจึงถูกจัดโครงสร้างเป็นรายการของส่วนต่างๆ ที่สามารถมีข้อมูลข้อความและภาพ (inline_data) สลับกันได้ โค้ดด้านบนจะวนซ้ำผ่านส่วนเหล่านี้เพื่อดึงและบันทึกภาพที่สร้างขึ้น

4. การแก้ไขภาพด้วยข้อความและภาพอินพุต

ให้ภาพที่มีอยู่พร้อมกับ Prompt ข้อความเพื่อทำการแก้ไข โมเดลมีความสามารถในการรักษาความสอดคล้องของตัวละครและเนื้อหาจากภาพอินพุตได้ดีเยี่ยม

1from google import genai
2from PIL import Image
3from io import BytesIO
4
5client = genai.Client(api_key="YOUR_API_KEY")
6
7prompt = """Using the image of the cat, create a photorealistic,
8street-level view of the cat walking along a sidewalk in a
9New York City neighborhood, with the blurred legs of pedestrians
10and yellow cabs passing by in the background."""
11
12image = Image.open("cat.png")
13
14# Pass both the text prompt and the image in the 'contents' list
15response = client.models.generate_content(
16    model="gemini-2.5-flash-image-preview",
17    contents=[prompt, image],
18)
19
20for part in response.candidates[0].content.parts:
21    if part.text is not None:
22        print(part.text)
23    elif part.inline_data is not None:
24        image = Image.open(BytesIO(part.inline_data.data))
25        image.save("cat2.png")

Input and Output

5. การฟื้นฟูภาพถ่ายด้วย Nano Banana

หนึ่งในการใช้งานที่ทรงพลังของโมเดลนี้คือการฟื้นฟูภาพถ่าย ด้วย Prompt ที่เรียบง่าย มันสามารถฟื้นฟูและเพิ่มสีสันให้กับภาพถ่ายเก่าได้อย่างน่าประทับใจ

1from google import genai
2from PIL import Image
3from io import BytesIO
4
5client = genai.Client(api_key="YOUR_API_KEY")
6
7prompt = "Restore and colorize this image from 1932"
8
9image = Image.open("lunch.jpg")  # "Lunch atop a Skyscraper, 1932"
10
11response = client.models.generate_content(
12    model="gemini-2.5-flash-image-preview",
13    contents=[prompt, image],
14)
15
16for part in response.candidates[0].content.parts:
17    if part.text is not None:
18        print(part.text)
19    elif part.inline_data is not None:
20        image = Image.open(BytesIO(part.inline_data.data))
21        image.save("lunch-restored.png")

Original and Output

6. การทำงานกับภาพอินพุตหลายภาพ

คุณสามารถให้ภาพหลายภาพเป็นอินพุตสำหรับงานแก้ไขที่ซับซ้อนมากขึ้น

1from google import genai
2from PIL import Image
3from io import BytesIO
4
5client = genai.Client(api_key="YOUR_API_KEY")
6
7prompt = "Make the girl wear this t-shirt. Leave the background unchanged."
8
9image1 = Image.open("girl.png")
10image2 = Image.open("tshirt.png")
11
12response = client.models.generate_content(
13    model="gemini-2.5-flash-image-preview",
14    contents=[prompt, image1, image2],
15)
16
17for part in response.candidates[0].content.parts:
18    if part.text is not None:
19        print(part.text)
20    elif part.inline_data is not None:
21        image = Image.open(BytesIO(part.inline_data.data))
22        image.save("girl-with-tshirt.png")

Inputs 1 & 2 and Output

7. การแก้ไขภาพแบบสนทนา

สำหรับการปรับแต่งแบบวนซ้ำ คุณสามารถใช้เซสชันแชทเพื่อรักษาบริบทในหลายๆ คำขอ ซึ่งช่วยให้คุณสามารถแก้ไขภาพในรูปแบบสนทนาได้

1from google import genai
2from PIL import Image
3from io import BytesIO
4
5client = genai.Client(api_key="YOUR_API_KEY")
6
7# Create a chat
8chat = client.chats.create(
9    model="gemini-2.5-flash-image-preview"
10)
11
12# Make the first image edit
13response1 = chat.send_message(
14    [
15        "Change the cat to a bengal cat, leave everything else the same",
16        Image.open("cat.png"),
17    ]
18)
19# display / save image...
20
21# Continue chatting and editing
22response2 = chat.send_message("The cat should wear a funny party hat")
23# display / save image...

Input and Outputs 1 & 2

เคล็ดลับ

: หากคุณสังเกตเห็นว่าคุณลักษณะของภาพเริ่มเสื่อมหรือ "ล่องลอย" หลังจากแก้ไขแบบสนทนาหลายครั้ง วิธีที่ดีที่สุดคือเริ่มเซสชันใหม่ด้วยภาพล่าสุดและ Prompt ที่ละเอียดและครอบคลุมมากขึ้น เพื่อรักษาความเที่ยงตรงสูง

8. แนวทางปฏิบัติที่ดีที่สุดและเคล็ดลับการตั้งค่า Prompt สำหรับ Nano Banana

เพื่อให้ได้ผลลัพธ์ที่ดีที่สุดกับ Nano Banana ให้ปฏิบัติตามแนวทาง Prompt ต่อไปนี้:

• เจาะจงมากเป็นพิเศษ: ยิ่งคุณให้รายละเอียดเกี่ยวกับหัวเรื่อง สี แสง และองค์ประกอบมากเท่าไหร่ คุณก็ยิ่งควบคุมผลลัพธ์ได้มากขึ้นเท่านั้น
• ให้บริบทและเจตนา: อธิบายวัตถุประสงค์หรืออารมณ์ที่ต้องการของภาพ ความเข้าใจในบริบทของโมเดลจะมีอิทธิพลต่อการตัดสินใจเชิงสร้างสรรค์
• ทำซ้ำและปรับแต่ง: อย่าคาดหวังความสมบูรณ์แบบในครั้งแรก ใช้ความสามารถในการสนทนาของโมเดลเพื่อเปลี่ยนแปลงทีละน้อยและปรับแต่งภาพของคุณ
• ใช้คำแนะนำทีละขั้นตอน: สำหรับฉากที่ซับซ้อน ให้แบ่ง Prompt ของคุณเป็นชุดคำแนะนำที่ชัดเจนและเป็นลำดับ
• ใช้การวางกรอบเชิงบวก: แทนที่จะใช้ Prompt เชิงลบเช่น "ไม่มีรถ" ให้อธิบายฉากที่ต้องการในเชิงบวก: "ถนนที่ว่างเปล่าและรกร้างไร้ร่องรอยการจราจร"
• ควบคุมกล้อง: ใช้คำศัพท์เกี่ยวกับการถ่ายภาพและภาพยนตร์เพื่อกำหนดทิศทางองค์ประกอบ เช่น "wide-angle shot", "macro shot" หรือ "low-angle perspective"

สำหรับข้อมูลเชิงลึกเพิ่มเติมเกี่ยวกับแนวทางปฏิบัติที่ดีที่สุด โปรดดูโพสต์บล็อกอย่างเป็นทางการเกี่ยวกับ แนวทางปฏิบัติที่ดีที่สุดในการตั้งค่า Prompt และ คู่มือ Prompt ในเอกสารประกอบ

9. ตัวอย่างจากชุมชนและแรงบันดาลใจ

สำรวจสิ่งที่ชุมชนกำลังสร้างด้วย Nano Banana:

• การเปลี่ยนมุมมองกล้องโดย @henrydaubrez: โพสต์ X
• การเรียนรู้แบบ Few-shot สำหรับการออกแบบตัวละครที่สอดคล้องกันโดย @multimodalart: โพสต์ X
• "ลูกศรสีแดงเห็นอะไร" การแปลง Google Maps โดย @tokumin: โพสต์ X
• การสร้างภาพจาก annotations รูปไม้ขีดโดย @yachimat_manga: โพสต์ X
• การสร้างโมเดล 3 มิติจากภาพนิ่งโดย @deedydas: โพสต์ X
• การสร้างประสบการณ์ AR ตามตำแหน่งโดย @bilawalsidhu: โพสต์ X
• การแปลงแผนที่ 2 มิติเป็นกราฟิก 3 มิติโดย @demishassabis: โพสต์ X

10. แหล่งข้อมูลและขั้นตอนถัดไป

คู่มือนี้ได้ครอบคลุมพื้นฐานของการสร้างด้วย Nano Banana หรือ Gemini 2.5 Flash Image คุณได้เรียนรู้วิธีตั้งค่าสภาพแวดล้อม สร้างและแก้ไขภาพ และใช้เทคนิคขั้นสูง ตอนนี้คุณพร้อมที่จะเริ่มผสานความสามารถอันทรงพลังเหล่านี้เข้ากับโปรเจกต์ของคุณเองแล้ว

สำหรับการอ่านเพิ่มเติม โปรดดูแหล่งข้อมูลอย่างเป็นทางการ:

• Google AI Studio
• เอกสารประกอบ Gemini API
• เอกสารประกอบ Nano Banana Gemini API
• วิธีตั้งค่า Prompt Gemini 2.5 Flash Image Generation เพื่อให้ได้ผลลัพธ์ที่ดีที่สุด
• คู่มือ Prompt ในเอกสารประกอบ Nano Banana
• แอป Pixshop ใน AI Studio

หากคุณกำลังสร้างอะไรเจ๋งๆ ด้วยสิ่งนี้ ฉันอยากเห็นผลงาน! อย่าลังเลที่จะส่งข้อความหรือแท็กฉันบน X: @patloeber

\โพสต์ต้นฉบับที่ [Dev.to