Free, Unlimited FLUX AI API
On this page
This tutorial shows you how to add FLUX image generation to your web application using Puter.js, without needing API keys or backend infrastructure. With Puter.js, you can gain access to Black Forest Labs' FLUX models such as FLUX.2 [max], FLUX.2 [pro], FLUX.2 [flex], FLUX.2 [dev], FLUX.1 Schnell, FLUX.1 Kontext, FLUX.1 [dev], FLUX.1 [pro], FLUX 1.1 Pro, and more.
Puter.js uses the User-Pays model, where users of your application cover their own AI costs. This means you, as a developer, don't pay anything for your users' image generation, making your app practically free to run. You can scale to unlimited users and pay nothing for the AI or server usage.
Getting Started
With Puter.js, you simply add this script tag to your HTML file (works in both <head> and <body>):
<script src="https://js.puter.com/v2/"></script>
This is all you need to start generating images with FLUX models in your application.
Example 1: Basic Image Generation
To generate an image using FLUX.2 Pro, use the puter.ai.txt2img() function:
<html>
<body>
<h1>FLUX.2 Pro 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: "black-forest-labs/FLUX.2-pro", disable_safety_checker: true }
)
.then(imageElement => {
document.body.appendChild(imageElement);
});
</script>
</body>
</html>
Example 2: In-Context Image Editing
To perform image-to-image editing using FLUX.1 Kontext, you can provide an input image:
<html>
<body>
<h1>FLUX.1 Kontext Image Editing</h1>
<script src="https://js.puter.com/v2/"></script>
<script>
puter.ai.txt2img("Draw an anime style version of this image.", {
model: "black-forest-labs/FLUX.1-kontext-pro",
image_url: "https://assets.puter.site/doge.jpeg"
}).then((image) => {
document.body.appendChild(image);
});
</script>
<img src="https://assets.puter.site/doge.jpeg">
</body>
</html>
Example 3: Fast and Efficient Generation
FLUX.1 Schnell is optimised for speed, making it ideal for applications that need quick image generation:
<html>
<body>
<h1>FLUX.1 Schnell Fast Generation</h1>
<script src="https://js.puter.com/v2/"></script>
<script>
puter.ai.txt2img(
"A cyberpunk cityscape with neon lights and flying vehicles",
{ model: "black-forest-labs/FLUX.1-schnell" }
)
.then(imageElement => {
document.body.appendChild(imageElement);
});
</script>
</body>
</html>
Example 4: Professional-grade Image Generation
FLUX.2 Max delivers state-of-the-art image generation with the highest quality and unmatched realism.
<html>
<body>
<h1>FLUX.2 Max Image Generation</h1>
<div id="status"></div>
<script src="https://js.puter.com/v2/"></script>
<script>
// Start timer
const status = document.getElementById('status');
const startTime = Date.now();
const timerInterval = setInterval(() => {
const elapsed = ((Date.now() - startTime) / 1000).toFixed(1);
status.textContent = `Loading (${elapsed} seconds)`;
}, 100);
puter.ai.txt2img(
"Ultra-detailed photograph of a modern luxury penthouse at golden hour, floor-to-ceiling windows overlooking a city skyline, realistic materials and reflections",
{ model: "black-forest-labs/FLUX.2-max" }
)
.then(imageElement => {
document.body.appendChild(imageElement);
// Clear timer and show finished status
clearInterval(timerInterval);
const totalTime = ((Date.now() - startTime) / 1000).toFixed(1);
status.textContent = `Finished (${totalTime} seconds)`;
}).catch(error => {
console.error(error);
clearInterval(timerInterval);
status.textContent = JSON.stringify(error);
})
</script>
</body>
</html>
Example 5: Customizable Image Generation
FLUX.2 Flex offers customizable parameters like dimensions, seed control, and diffusion steps for more precise image generation:
<html>
<body>
<h1>FLUX.2 Flex Customizable Generation</h1>
<script src="https://js.puter.com/v2/"></script>
<script>
puter.ai.txt2img(
"A majestic dragon perched on a mountain peak, fantasy art style, detailed scales, dramatic lighting",
{
model: "black-forest-labs/FLUX.2-flex",
width: 768,
height: 1024,
steps: 30,
seed: 42,
disable_safety_checker: true
}
)
.then(imageElement => {
document.body.appendChild(imageElement);
});
</script>
</body>
</html>
Supported FLUX Models
The following FLUX models are supported by Puter.js, which can be used with the puter.ai.txt2img() function:
black-forest-labs/FLUX.1-Canny-pro
black-forest-labs/FLUX.1-dev
black-forest-labs/FLUX.1-dev-lora
black-forest-labs/FLUX.1-kontext-dev
black-forest-labs/FLUX.1-kontext-max
black-forest-labs/FLUX.1-kontext-pro
black-forest-labs/FLUX.1-krea-dev
black-forest-labs/FLUX.1-pro
black-forest-labs/FLUX.1-schnell
black-forest-labs/FLUX.1-schnell-Free
black-forest-labs/FLUX.1.1-pro
black-forest-labs/FLUX.2-dev
black-forest-labs/FLUX.2-flex
black-forest-labs/FLUX.2-max
black-forest-labs/FLUX.2-pro
Conclusion
Using Puter.js, you can integrate FLUX image generation into your app without having to use API keys or set up an AI server yourself. And thanks to the User-Pays model, you can add this feature for free to your application, since your users cover their own image generation usage, not you as the developer.
You can find more details about Puter.js image generation API in the documentation.
Related
Free, Serverless AI and Cloud
Start creating powerful web applications with Puter.js in seconds!
Get Started Now