Introduction to Text Integration in Image Generation Using Symfony

Introduction to Text Integration in Image Generation

Welcome to the final lesson of this course on creating images with Gemini's image generation and Symfony . 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 image generation model and display them using Symfony. 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 image generation model. Here's a step-by-step walkthrough of the code: PHP<?php // Load Symfony's autoloader require_once __DIR__ . '/vendor/autoload.php'; require_once __DIR__ . '/GeminiImageGenerator.php'; // Use Symfony's environment variables component to load .env use Symfony\Component\Dotenv\Dotenv; // Load environment variables from .env file if it exists if (file_exists(__DIR__ . '/.env')) { (new Dotenv())->load(__DIR__ . '/.env'); } // Create the image generator $imageGenerator = new GeminiImageGenerator(); // 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."; try { // Generate the image using our prompt $imageDataList = $imageGenerator->generateImages($prompt, [ 'sampleCount' => 1, 'aspectRatio' => GeminiImageGenerator::RATIO_1_1, ]); if (empty($imageDataList)) { echo "❌ No image data received from the API\n"; exit(1); } $image_binary = $imageDataList[0]; } catch (\Exception $e) { echo "Error: " . $e->getMessage() . "\n"; exit(1); } In this code, we initialize our GeminiImageGenerator class and define a prompt that includes text placement instructions. We then use the generator to create an image, specifying the sample count and aspect ratio.

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 Symfony

Once the image is generated, you need to process and save it for display in your Symfony application. Here's how you can do that:

PHP

// Process and save the generated image
if (isset($image_binary)) {
    $output_path = './public/images/generated_image.png';
    
    // Ensure directory exists
    $dir = dirname($output_path);
    if (!is_dir($dir)) {
        mkdir($dir, 0755, true);
    }
    
    // If file exists, remove it first
    if (file_exists($output_path)) {
        if (!unlink($output_path)) {
            die("❌ Failed to remove existing file: $output_path\n");
        }
        echo "🔄 Removed existing file before writing new one.\n";
    }
    
    // Write the image data to a file
    if (file_put_contents($output_path, $image_binary) === false) {
        die("❌ Failed to write image to: $output_path\n");
    }
    
    // Save the prompt to a text file for reference
    $prompt_path = str_replace('.png', '.txt', $output_path);
    file_put_contents($prompt_path, $prompt);
    
    echo "✅ Image successfully saved to $output_path\n";
    echo "✅ Prompt saved to $prompt_path\n";
} else {
    echo "❌ Image generation failed.\n";
}

In this code, we save the image binary data to a specified directory. We also save the prompt used to generate the image for reference. This process allows you to store the generated image, which you can then serve in your Symfony application.

Optional — real-world Symfony integration: The controller and Twig snippets below show how you would serve a generated image in a full Symfony web app. The practice exercises in this unit run as standalone CLI scripts that save images to files, so you don't need to implement these snippets to complete the course. They're included as a reference for when you build a complete web application.

To display this image in a Symfony application, you would typically create a controller that renders a template containing the image:

<?php
// src/Controller/ImageController.php
namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class ImageController extends AbstractController
{
    #[Route('/image', name: 'app_image')]
    public function index(): Response
    {
        return $this->render('image/index.html.twig', [
            'image_path' => '/public/images/generated_image.png',
        ]);
    }
}

And in your Twig template:

Twig

{# templates/image/index.html.twig #}
{% extends 'base.html.twig' %}

{% block title %}Generated Image{% endblock %}

{% block body %}
    <h1>Generated Image with Text</h1>
    <img src="{{ image_path }}" alt="AI-generated image with text">
{% endblock %}