Tutorials
Free, Unlimited Image Generation API
This tutorial will show you how to use Puter.js to generate images with AI in your apps for free, without needing API keys or servers. Puter.js provides access to powerful image generation models including GPT Image, DALL-E 3, Gemini 2.5 Flash Image Preview (Nano Banana), and DALL-E 2 directly from your frontend code.
Puter is the pioneer of the "User Pays" model, which allows developers to incorporate AI capabilities into their applications while each user covers their own usage costs. This model enables developers to offer advanced image generation capabilities to users at no cost to themselves, without any API keys or server-side setup.
Getting Started
You can use Puter.js without any API keys or sign-ups. To start using Puter.js, include the following script tag in your HTML file, either in the <head> or <body> section:
<script src="https://js.puter.com/v2/"></script>
Nothing else is required to start using Puter.js for free image generation capabilities.
Example 1Generate a simple image
To generate an image using GPT Image, use the puter.ai.txt2img() function:
puter.ai.txt2img("A peaceful mountain landscape at sunset")
.then(imageElement => {
document.body.appendChild(imageElement);
});
Full code example:
<html>
<body>
<h1>AI Image Generation</h1>
<script src="https://js.puter.com/v2/"></script>
<script>
puter.ai.txt2img("A peaceful mountain landscape at sunset")
.then(imageElement => {
document.body.appendChild(imageElement);
});
</script>
</body>
</html>
The above example uses the default model to generate an image. You can specify different models and quality settings as shown in the next example.
Example 2Use different models and quality settings
You can specify different image generation models and quality levels:
<html>
<body>
<h2>Different Models Comparison</h2>
<div id="images"></div>
<script src="https://js.puter.com/v2/"></script>
<script>
const prompt = "A futuristic city with flying cars";
const container = document.getElementById('images');
container.innerHTML = '';
// GPT Image with low quality
puter.ai.txt2img(prompt, { model: "gpt-image-1", quality: "low" })
.then(img => {
const div = document.createElement('div');
div.innerHTML = '<h3>GPT Image (Quality set to low)</h3>';
div.appendChild(img);
container.appendChild(div);
});
// DALL-E 3 with high quality
puter.ai.txt2img(prompt, { model: "dall-e-3", quality: "hd" })
.then(img => {
const div = document.createElement('div');
div.innerHTML = '<h3>DALL-E 3 (Quality set to hd)</h3>';
div.appendChild(img);
container.appendChild(div);
});
// Gemini 2.5 Flash Image Preview (Nano Banana)
puter.ai.txt2img(prompt, { model: "gemini-2.5-flash-image-preview" })
.then(img => {
const div = document.createElement('div');
div.innerHTML = '<h3>Gemini 2.5 Flash Image Preview (Nano Banana)</h3>';
div.appendChild(img);
container.appendChild(div);
});
</script>
</body>
</html>
List of supported image generation models
The following image generation models are supported by Puter.js, which can be used with the puter.ai.txt2img() function:
gemini-2.5-flash-image-preview
gpt-image-1
gpt-image-1-mini
dall-e-3
dall-e-2
You can also specify quality settings:
- For
gpt-image-1:high,medium, orlow(default:low) - For
gpt-image-1-mini:high,medium, orlow(default:low) - For
dall-e-3:hdor standard (default: standard) - For
gemini-2.5-flash-image-preview: no quality setting is supported
That's it! You now have free access to powerful image generation models using Puter.js. This allows you to create applications with AI-powered image generation capabilities without needing API keys, backend infrastructure, or managing costs. True serverless image generation!
Related
Free, Serverless AI and Cloud
Start creating powerful web applications with Puter.js in seconds!
Get Started Now