Integrating Text into Images with Gemini Image Generation and Django

Introduction to Text Integration in Image Generation

Welcome to the final lesson of this course on creating images with Gemini Image Generation and Django . In previous lessons, you explored various aspects of image generation, including crafting effective prompts and using photography modifiers. Now, we will focus on integrating text into your images, a powerful feature that can enhance the visual storytelling of your creations. Text integration allows you to add meaningful context or branding elements to your images, making them more engaging and informative. In this lesson, you will learn how to construct prompts that guide the AI to place text within images effectively. We will also cover how to generate these images using Gemini's Gemini image generation model and display them using Django. By the end of this lesson, you will be equipped to create images with text that can be used for various applications, such as logos, posters, or digital art.

Constructing Effective Prompts for Text Placement

Creating effective prompts is crucial for guiding the AI to generate images with text. When constructing prompts, consider the following guidelines: Character Limits : Keep text short, ideally 25 characters or fewer, to ensure clarity and readability. Multiple Phrases : Use up to three distinct phrases to provide additional information without cluttering the image. Text Placement : Specify where you want the text to appear, such as "at the top arc" or "at the bottom arc." Let's break down an example prompt: "A circular emblem featuring a central image of a mountain. At the top arc, the text 'Adventure Awaits' is curved gracefully, and at the bottom arc, the text 'Explore the Unknown' follows the curve. The design has a vintage aesthetic with serif fonts." This prompt provides clear guidance on text placement and style, helping the AI generate an image that meets your expectations.

Generating Images with Text Using Gemini

Now that you understand how to construct prompts, let's generate an image with text using Gemini's Gemini image generation model. Here's a step-by-step walkthrough of the code: Python from google import genai from google.genai import types from PIL import Image from io import BytesIO import os api_key = os.getenv("GEMINI_API_KEY") if not api_key: raise ValueError("GEMINI_API_KEY not found in environment variables. Set it before running the script.") # Initialize the Gemini client client = genai.Client(api_key=api_key) # Define the prompt with text placement guidance prompt = ("A circular emblem featuring a central image of a mountain. " "At the top arc, the text 'Adventure Awaits' is curved gracefully, " "and at the bottom arc, the text 'Explore the Unknown' follows the curve. " "The design has a vintage aesthetic with serif fonts.") # Generate the image response = client.models.generate_content(model='gemini-3.1-flash-image', contents=prompt, config=types.GenerateContentConfig(response_modalities=["IMAGE"],),) In this code, we initialize the Gemini client with your API key and define a prompt that includes text placement instructions. The generate_content method is used to request an image from the Gemini image generation model, specifying the model name, prompt, and configuration settings.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Processing and Displaying Generated Images in Django

Once the image is generated, you need to process and display it using Django. Here's how you can do that:

Set up your Django project and app: If you haven't already, create a Django project and an app within it.

Configure your settings: Ensure your settings.py file is configured to serve static files. Add the following lines if they are not already present:

Python

STATIC_URL = '/static/'
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

STATIC_URL = '/static/'
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

Process and save the generated image:

Python

# Process and save the generated image
image_bytes = None
for part in response.candidates[0].content.parts:
    if part.inline_data:
        image_bytes = part.inline_data.data
        break
if image_bytes is None:
    raise ValueError("No image data returned")
image = Image.open(BytesIO(image_bytes))
output_path = os.path.join("media", "images", "generated_image.png")
os.makedirs(os.path.dirname(output_path), exist_ok=True)
image.save(output_path)

# Process and save the generated image
image_bytes = None
for part in response.candidates[0].content.parts:
    if part.inline_data:
        image_bytes = part.inline_data.data
        break
if image_bytes is None:
    raise ValueError("No image data returned")
image = Image.open(BytesIO(image_bytes))
output_path = os.path.join("media", "images", "generated_image.png")
os.makedirs(os.path.dirname(output_path), exist_ok=True)
image.save(output_path)

Create a view to display the image:

In your Django app, create a view to render a template that displays the image:

Python

from django.shortcuts import render

def display_image(request):
    return render(request, 'display_image.html', {'image_url': '/media/images/generated_image.png'})

from django.shortcuts import render

def display_image(request):
    return render(request, 'display_image.html', {'image_url': '/media/images/generated_image.png'})

Create a template to display the image:

Create a display_image.html file in your templates directory:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generated Image</title>
</head>
<body>
    <h1>Your Generated Image</h1>
    <img src="{{ image_url }}" alt="Generated Image">
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generated Image</title>
</head>
<body>
    <h1>Your Generated Image</h1>
    <img src="{{ image_url }}" alt="Generated Image">
</body>
</html>

Configure URLs:

In your urls.py, add a path to the view:

Python

from django.urls import path
from . import views

urlpatterns = [
    path('display-image/', views.display_image, name='display_image'),
]

from django.urls import path
from . import views

urlpatterns = [
    path('display-image/', views.display_image, name='display_image'),
]

Introduction to Text Integration in Image Generation

Constructing Effective Prompts for Text Placement

Generating Images with Text Using Gemini

Join the 1M+ learners on CodeSignal

Processing and Displaying Generated Images in Django

Example: Creating a Vintage Emblem with Text

Summary and Next Steps