Tutorials

Free, Unlimited Imagen API

Reynaldi Chernando

This tutorial shows how to use Puter.js for generating images with Google's Imagen 4 models for free, without needing API keys or backend infrastructure. With Puter.js, you gain immediate access to Imagen 4 models including Imagen 4, Imagen 4 Fast, and Imagen 4 Ultra, all callable directly from client-side JavaScript.

Puter.js uses the User-Pays model, where users of your application cover their own usage costs. This means you as a developer don't pay anything for users' usage, making your app practically free to run. You can scale to unlimited users and you pay nothing for the cloud services.

Getting Started

Using Puter.js requires zero configuration and no API keys. Simply add this script tag to your HTML file (works in both <head> and <body> sections):

<script src="https://js.puter.com/v2/"></script>

This single script tag is all you need to start generating images with Imagen 4 models in your application.

Example 1: Generate an image with Imagen 4

To generate an image using Imagen 4, use the puter.ai.txt2img() function:

puter.ai.txt2img(
    "A serene Japanese garden with cherry blossoms and a koi pond",
    { model: "google/imagen-4.0-preview", provider: "together-ai", disable_safety_checker: true }
)
.then(imageElement => {
    document.body.appendChild(imageElement);
});

Full code example:

<html>
<body>
    <h1>Imagen 4 Image Generation</h1>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        puter.ai.txt2img(
            "A serene Japanese garden with cherry blossoms and a koi pond",
            { model: "google/imagen-4.0-preview", provider: "together-ai", disable_safety_checker: true }
        )
        .then(imageElement => {
            document.body.appendChild(imageElement);
        });
    </script>
</body>
</html>

Example 2: Fast image generation with Imagen 4 Fast

To generate an image quickly using Imagen 4 Fast, simply change the model parameter:

puter.ai.txt2img(
    "A cyberpunk cityscape with neon lights and flying vehicles",
    { model: "google/imagen-4.0-fast", provider: "together-ai", disable_safety_checker: true }
)
.then(imageElement => {
    document.body.appendChild(imageElement);
});

Full code example:

<html>
<body>
    <h1>Imagen 4 Fast Image Generation</h1>
    <script src="https://js.puter.com/v2/"></script>
    <script>
        puter.ai.txt2img(
            "A cyberpunk cityscape with neon lights and flying vehicles",
            { model: "google/imagen-4.0-fast", provider: "together-ai", disable_safety_checker: true }
        )
        .then(imageElement => {
            document.body.appendChild(imageElement);
        });
    </script>
</body>
</html>

Example 3: High realism with Imagen 4 Ultra

To generate images with maximum realism and quality using Imagen 4 Ultra:

puter.ai.txt2img(
    "An extreme close-up shot plunges into a beautiful field overflowing with abundant frosted wildflowers. Innumerable petals and stems, vibrant with underlying hues of deep pinks, purples, and yellows, are delicately glazed with a layer of sparkling ice crystals. The frost catches the crisp morning light, creating a shimmering effect over the vivid colors beneath. The razor-thin depth of field renders only the nearest blossoms in hyper-sharp detail, revealing the intricate crystalline structures against the bright pigments, while the dense field behind melts into a dazzling, soft-focus tapestry of frosted color and light. This view captures the magical contrast between the icy coating and the persistent vibrancy of the flowers, evoking a sense of resilient beauty in the cold dawn.",
    { model: "google/imagen-4.0-ultra", provider: "together-ai", disable_safety_checker: true }
)
.then(imageElement => {
    document.body.appendChild(imageElement);
});

Full code example:

<html>
<body>
    <h1>Imagen 4 Ultra High Realism</h1>
    <button onclick="generateImage()">Generate Ultra Realistic Image</button>
    <div id="imageContainer"></div>

    <script src="https://js.puter.com/v2/"></script>
    <script>
        function generateImage() {
            // Clear previous image
            document.getElementById('imageContainer').innerHTML = 'Generating...';

            puter.ai.txt2img(
                "An extreme close-up shot plunges into a beautiful field overflowing with abundant frosted wildflowers. Innumerable petals and stems, vibrant with underlying hues of deep pinks, purples, and yellows, are delicately glazed with a layer of sparkling ice crystals. The frost catches the crisp morning light, creating a shimmering effect over the vivid colors beneath. The razor-thin depth of field renders only the nearest blossoms in hyper-sharp detail, revealing the intricate crystalline structures against the bright pigments, while the dense field behind melts into a dazzling, soft-focus tapestry of frosted color and light. This view captures the magical contrast between the icy coating and the persistent vibrancy of the flowers, evoking a sense of resilient beauty in the cold dawn.",
                { model: "google/imagen-4.0-ultra", provider: "together-ai", disable_safety_checker: true }
            )
            .then(imageElement => {
                document.getElementById('imageContainer').innerHTML = '';
                document.getElementById('imageContainer').appendChild(imageElement);
            });
        }
    </script>
</body>
</html>

Supported Imagen Models

The following Imagen models are supported by Puter.js, which can be used with the puter.ai.txt2img() function:

google/imagen-4.0-preview
google/imagen-4.0-fast
google/imagen-4.0-ultra



You're all set! With Puter.js, you've unlocked free access to Google's powerful Imagen 4 models. Build stunning AI-powered image generation features into your apps—no API keys to manage, no backend servers to maintain, and zero infrastructure costs. Experience truly serverless image generation with Imagen!

Related

Free, Serverless AI and Cloud

Start creating powerful web applications with Puter.js in seconds!

Get Started Now

Read the Docs • Try the Playground