Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .env.local.example
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
# Get your API key from https://fal.ai/dashboard/keys
FAL_KEY=your_fal_api_key_here
ATLASCLOUD_API_KEY=your_atlascloud_api_key_here
97 changes: 95 additions & 2 deletions app/lib/generate-image.ts
Original file line number Diff line number Diff line change
@@ -1,14 +1,22 @@
import { fal } from "@fal-ai/client";

export type ImageModel = "nano-banana-pro" | "nano-banana-lite" | "gpt-image-2";
export type ImageModel =
| "nano-banana-pro"
| "nano-banana-lite"
| "gpt-image-2"
| "atlas-nano-banana-lite";

export type AspectRatio = "1:1" | "21:9" | "9:16" | "16:9";

export type GptImageQuality = "low" | "medium" | "high";

/** Coerce an untrusted request value into a valid ImageModel (defaults to nano-banana-pro). */
export function normalizeImageModel(value: unknown): ImageModel {
return value === "gpt-image-2" || value === "nano-banana-lite" ? value : "nano-banana-pro";
return value === "gpt-image-2" ||
value === "nano-banana-lite" ||
value === "atlas-nano-banana-lite"
? value
: "nano-banana-pro";
}

interface GenerateImageInput {
Expand All @@ -35,6 +43,10 @@ export async function generateImage({
}: GenerateImageInput): Promise<GeneratedImage> {
const isEdit = Array.isArray(imageUrls) && imageUrls.length > 0;

if (model === "atlas-nano-banana-lite") {
return generateWithAtlasCloud({ prompt, imageUrls, aspectRatio });
}

if (model === "gpt-image-2") {
const endpoint = isEdit ? "openai/gpt-image-2/edit" : "openai/gpt-image-2";
const input: Record<string, unknown> = {
Expand Down Expand Up @@ -97,6 +109,87 @@ export async function generateImage({
return data.images[0];
}

const ATLAS_API_BASE = "https://api.atlascloud.ai/api/v1";
const ATLAS_POLL_INTERVAL_MS = 3_000;
const ATLAS_MAX_POLLS = 40;

async function generateWithAtlasCloud({
prompt,
imageUrls,
aspectRatio,
}: Pick<GenerateImageInput, "prompt" | "imageUrls" | "aspectRatio">): Promise<GeneratedImage> {
const apiKey = process.env.ATLASCLOUD_API_KEY;
if (!apiKey) throw new Error("ATLASCLOUD_API_KEY is not configured");

const isEdit = Boolean(imageUrls?.length);
const model = isEdit
? "google/nano-banana-2-lite/edit"
: "google/nano-banana-2-lite/text-to-image";
const response = await atlasRequest<{ id: string }>("/model/generateImage", apiKey, {
method: "POST",
body: JSON.stringify({
model,
prompt,
aspect_ratio: aspectRatio,
resolution: "1k",
...(isEdit ? { images: imageUrls } : {}),
}),
});

for (let attempt = 0; attempt < ATLAS_MAX_POLLS; attempt += 1) {
const prediction = await atlasRequest<{
status: string;
outputs?: string[] | null;
error?: string;
}>(`/model/prediction/${response.id}`, apiKey);

if (prediction.status === "completed" || prediction.status === "succeeded") {
const url = prediction.outputs?.[0];
if (!url) throw new Error("Atlas Cloud completed without an image URL");
return { url, ...aspectRatioToDimensions(aspectRatio) };
}
if (prediction.status === "failed" || prediction.status === "timeout") {
throw new Error(prediction.error || `Atlas Cloud generation ${prediction.status}`);
}
await new Promise((resolve) => setTimeout(resolve, ATLAS_POLL_INTERVAL_MS));
}

throw new Error("Atlas Cloud generation timed out");
}

async function atlasRequest<T>(path: string, apiKey: string, init?: RequestInit): Promise<T> {
const response = await fetch(`${ATLAS_API_BASE}${path}`, {
...init,
headers: {
Authorization: `Bearer ${apiKey}`,
"Content-Type": "application/json",
...init?.headers,
},
});
const payload = (await response.json()) as {
code?: number;
message?: string;
data?: T;
};
if (!response.ok || !payload.data || (payload.code != null && payload.code !== 200)) {
throw new Error(payload.message || `Atlas Cloud request failed (${response.status})`);
}
return payload.data;
}

function aspectRatioToDimensions(aspectRatio: AspectRatio): Pick<GeneratedImage, "width" | "height"> {
switch (aspectRatio) {
case "9:16":
return { width: 576, height: 1024 };
case "16:9":
return { width: 1024, height: 576 };
case "21:9":
return { width: 1024, height: 439 };
default:
return { width: 1024, height: 1024 };
}
}

function aspectRatioToImageSize(
ar: AspectRatio
): string | { width: number; height: number } {
Expand Down
7 changes: 6 additions & 1 deletion app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,11 @@ const FalSpinner = ({ size = 48 }: { size?: number }) => (

type Step = 1 | 2 | 3 | 4 | 5 | 6;
type GameMode = "side-scroller" | "isometric";
type ImageModel = "nano-banana-pro" | "nano-banana-lite" | "gpt-image-2";
type ImageModel =
| "nano-banana-pro"
| "nano-banana-lite"
| "gpt-image-2"
| "atlas-nano-banana-lite";
type GptImageQuality = "low" | "medium" | "high";

interface BoundingBox {
Expand Down Expand Up @@ -1405,6 +1409,7 @@ export default function Home() {
["nano-banana-pro", "Nano Banana Pro"],
["nano-banana-lite", "Nano Banana Lite"],
["gpt-image-2", "GPT-Image-2"],
["atlas-nano-banana-lite", "Atlas Cloud Nano Banana Lite"],
] as const).map(([value, label], i) => (
<button
key={value}
Expand Down