282 lines
9.7 KiB
XML
282 lines
9.7 KiB
XML
import type { Metadata } from 'next';
|
|
import { TipBox } from '@/components/docs/shared/TipBox';
|
|
import { Table } from '@/components/docs/shared/Table';
|
|
import { CodeBlock } from '@/components/docs/shared/CodeBlock';
|
|
import { DocPage } from '@/components/docs/layout/DocPage';
|
|
import { JsonLd } from '@/components/seo/JsonLd';
|
|
import { createDocsMetadata, DOCS_PAGES } from '@/config/docs-seo';
|
|
import { createBreadcrumbSchema, createTechArticleSchema } from '@/config/docs-schema';
|
|
import {
|
|
Hero,
|
|
SectionHeader,
|
|
InlineCode,
|
|
ResponseBlock,
|
|
} from '@/components/docs/blocks';
|
|
|
|
const PAGE = DOCS_PAGES['generation'];
|
|
|
|
export const metadata: Metadata = createDocsMetadata(PAGE);
|
|
|
|
const breadcrumbSchema = createBreadcrumbSchema([
|
|
{ name: 'Home', path: '/' },
|
|
{ name: 'Documentation', path: '/docs/' },
|
|
{ name: 'Image Generation', path: '/docs/generation/' },
|
|
]);
|
|
|
|
const articleSchema = createTechArticleSchema(PAGE);
|
|
|
|
const tocItems = [
|
|
{ id: 'basic-generation', text: 'Basic Generation', level: 2 },
|
|
{ id: 'aspect-ratios', text: 'Aspect Ratios', level: 2 },
|
|
{ id: 'prompt-templates', text: 'Prompt Templates', level: 2 },
|
|
{ id: 'reference-images', text: 'Using Reference Images', level: 2 },
|
|
{ id: 'continuing-generation', text: 'Continuing Generation', level: 2 },
|
|
{ id: 'regeneration', text: 'Regeneration', level: 2 },
|
|
{ id: 'next-steps', text: 'Next Steps', level: 2 },
|
|
];
|
|
|
|
export default function GenerationPage() {
|
|
return (
|
|
<>
|
|
<JsonLd data={breadcrumbSchema} />
|
|
<JsonLd data={articleSchema} />
|
|
<DocPage
|
|
breadcrumbItems={[
|
|
{ label: 'Documentation', href: '/docs/' },
|
|
{ label: 'Image Generation' },
|
|
]}
|
|
tocItems={tocItems}
|
|
nextSteps={{
|
|
links: [
|
|
{
|
|
href: '/docs/api/generations/',
|
|
title: 'API Reference: Generations',
|
|
description: 'Full endpoint documentation for generations.',
|
|
accent: 'primary',
|
|
},
|
|
{
|
|
href: '/docs/images/',
|
|
title: 'Working with Images',
|
|
description: 'Upload your own images and organize with aliases.',
|
|
accent: 'secondary',
|
|
},
|
|
],
|
|
}}
|
|
>
|
|
<Hero
|
|
title="Image Generation"
|
|
subtitle="Generate AI images from text prompts with support for references, templates, and chaining."
|
|
/>
|
|
|
|
<section id="basic-generation" className="mb-12">
|
|
<SectionHeader level={2} id="basic-generation">
|
|
Basic Generation
|
|
</SectionHeader>
|
|
<p className="text-gray-300 leading-relaxed mb-6">
|
|
Generate an image by sending a text prompt to the generations endpoint:
|
|
</p>
|
|
|
|
<CodeBlock
|
|
code={`curl -X POST https://api.banatie.app/api/v1/generations \\
|
|
-H "Content-Type: application/json" \\
|
|
-H "X-API-Key: YOUR_API_KEY" \\
|
|
-d '{
|
|
"prompt": "a serene mountain landscape at sunset",
|
|
"aspectRatio": "16:9"
|
|
}'`}
|
|
language="bash"
|
|
filename="Create Generation"
|
|
/>
|
|
|
|
<p className="text-gray-300 leading-relaxed mt-6 mb-4">
|
|
The response contains your generated image immediately:
|
|
</p>
|
|
|
|
<ResponseBlock
|
|
status="success"
|
|
statusCode={201}
|
|
statusLabel="201 Created"
|
|
content={`{
|
|
"success": true,
|
|
"data": {
|
|
"id": "550e8400-e29b-41d4-a716-446655440000",
|
|
"status": "success",
|
|
"prompt": "a serene mountain landscape at sunset",
|
|
"aspectRatio": "16:9",
|
|
"outputImage": {
|
|
"id": "8a3b2c1d-4e5f-6789-abcd-ef0123456789",
|
|
"storageUrl": "https://cdn.banatie.app/my-org/my-project/img/8a3b2c1d-4e5f-6789-abcd-ef0123456789",
|
|
"width": 1792,
|
|
"height": 1008
|
|
},
|
|
"flowId": "770e8400-e29b-41d4-a716-446655440002"
|
|
}
|
|
}`}
|
|
/>
|
|
|
|
<p className="text-gray-300 leading-relaxed mt-6">
|
|
One request, one result. The <InlineCode>storageUrl</InlineCode> is your production-ready image, served via CDN.
|
|
</p>
|
|
</section>
|
|
|
|
<section id="aspect-ratios" className="mb-12">
|
|
<SectionHeader level={2} id="aspect-ratios">
|
|
Aspect Ratios
|
|
</SectionHeader>
|
|
<p className="text-gray-300 leading-relaxed mb-6">
|
|
Choose the aspect ratio that fits your use case:
|
|
</p>
|
|
|
|
<Table
|
|
headers={['Ratio', 'Dimensions', 'Best For']}
|
|
rows={[
|
|
[
|
|
<InlineCode key="ratio">1:1</InlineCode>,
|
|
'1024 x 1024',
|
|
'Social media posts, profile pictures, thumbnails',
|
|
],
|
|
[
|
|
<InlineCode key="ratio">16:9</InlineCode>,
|
|
'1792 x 1008',
|
|
'Blog headers, presentations, video thumbnails',
|
|
],
|
|
[
|
|
<InlineCode key="ratio">9:16</InlineCode>,
|
|
'1008 x 1792',
|
|
'Stories, mobile backgrounds, vertical banners',
|
|
],
|
|
[
|
|
<InlineCode key="ratio">3:2</InlineCode>,
|
|
'1536 x 1024',
|
|
'Photography-style images, print layouts',
|
|
],
|
|
[
|
|
<InlineCode key="ratio">21:9</InlineCode>,
|
|
'2016 x 864',
|
|
'Ultra-wide banners, cinematic headers',
|
|
],
|
|
]}
|
|
/>
|
|
|
|
<p className="text-gray-300 leading-relaxed mt-6">
|
|
Default is <InlineCode>16:9</InlineCode> if not specified.
|
|
</p>
|
|
</section>
|
|
|
|
<section id="prompt-templates" className="mb-12">
|
|
<SectionHeader level={2} id="prompt-templates">
|
|
Prompt Templates
|
|
</SectionHeader>
|
|
<p className="text-gray-300 leading-relaxed mb-6">
|
|
Templates improve your prompt for specific styles. Available templates:
|
|
</p>
|
|
|
|
<Table
|
|
headers={['Template', 'Description']}
|
|
rows={[
|
|
[<InlineCode key="t">general</InlineCode>, 'Balanced style for most use cases'],
|
|
[<InlineCode key="t">photorealistic</InlineCode>, 'Photo-like realism with natural lighting'],
|
|
[<InlineCode key="t">illustration</InlineCode>, 'Artistic illustration style'],
|
|
[<InlineCode key="t">minimalist</InlineCode>, 'Clean, simple compositions'],
|
|
[<InlineCode key="t">sticker</InlineCode>, 'Sticker-style with clear edges'],
|
|
[<InlineCode key="t">product</InlineCode>, 'E-commerce product photography'],
|
|
[<InlineCode key="t">comic</InlineCode>, 'Comic book visual style'],
|
|
]}
|
|
/>
|
|
|
|
<div className="mt-6">
|
|
<TipBox variant="compact" type="info">
|
|
Template selection coming soon. Currently uses general style for all generations.
|
|
</TipBox>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="reference-images" className="mb-12">
|
|
<SectionHeader level={2} id="reference-images">
|
|
Using Reference Images
|
|
</SectionHeader>
|
|
<p className="text-gray-300 leading-relaxed mb-6">
|
|
Add reference images for style guidance or context. Pass image IDs or aliases in the <InlineCode>referenceImages</InlineCode> array:
|
|
</p>
|
|
|
|
<CodeBlock
|
|
code={`curl -X POST https://api.banatie.app/api/v1/generations \\
|
|
-H "Content-Type: application/json" \\
|
|
-H "X-API-Key: YOUR_API_KEY" \\
|
|
-d '{
|
|
"prompt": "product photo in this style",
|
|
"referenceImages": ["@brand-style", "@product-template"],
|
|
"aspectRatio": "1:1"
|
|
}'`}
|
|
language="bash"
|
|
filename="With References"
|
|
/>
|
|
|
|
<div className="mt-6">
|
|
<TipBox variant="compact" type="info">
|
|
<strong>Pro Tip:</strong> Use aliases like <InlineCode>@logo</InlineCode> instead of UUIDs. See <a href="/docs/images/" className="text-purple-400 hover:underline">Working with Images</a> to learn about aliases.
|
|
</TipBox>
|
|
</div>
|
|
|
|
<p className="text-gray-300 leading-relaxed mt-6">
|
|
You can also mention aliases directly in your prompt text — they're auto-detected:
|
|
</p>
|
|
|
|
<CodeBlock
|
|
code={`{
|
|
"prompt": "create a banner using @brand-colors and @logo style"
|
|
}`}
|
|
language="json"
|
|
filename="Auto-detected aliases"
|
|
/>
|
|
</section>
|
|
|
|
<section id="continuing-generation" className="mb-12">
|
|
<SectionHeader level={2} id="continuing-generation">
|
|
Continuing Generation
|
|
</SectionHeader>
|
|
<p className="text-gray-300 leading-relaxed mb-6">
|
|
Chain multiple generations together by passing the same <InlineCode>flowId</InlineCode>:
|
|
</p>
|
|
|
|
<CodeBlock
|
|
code={`curl -X POST https://api.banatie.app/api/v1/generations \\
|
|
-H "Content-Type: application/json" \\
|
|
-H "X-API-Key: YOUR_API_KEY" \\
|
|
-d '{
|
|
"prompt": "same scene but at night",
|
|
"flowId": "770e8400-e29b-41d4-a716-446655440002"
|
|
}'`}
|
|
language="bash"
|
|
filename="Continue in Flow"
|
|
/>
|
|
|
|
<p className="text-gray-300 leading-relaxed mt-6">
|
|
Each response includes a <InlineCode>flowId</InlineCode> you can use to continue the sequence. Flows help organize related generations together.
|
|
</p>
|
|
</section>
|
|
|
|
<section id="regeneration" className="mb-12">
|
|
<SectionHeader level={2} id="regeneration">
|
|
Regeneration
|
|
</SectionHeader>
|
|
<p className="text-gray-300 leading-relaxed mb-6">
|
|
Want a different result with the same parameters? Regenerate an existing generation:
|
|
</p>
|
|
|
|
<CodeBlock
|
|
code={`curl -X POST https://api.banatie.app/api/v1/generations/550e8400-e29b-41d4-a716-446655440000/regenerate \\
|
|
-H "X-API-Key: YOUR_API_KEY"`}
|
|
language="bash"
|
|
filename="Regenerate"
|
|
/>
|
|
|
|
<p className="text-gray-300 leading-relaxed mt-6">
|
|
Same prompt, new image. The generation ID and URL stay the same — the image content is replaced.
|
|
</p>
|
|
</section>
|
|
</DocPage>
|
|
</>
|
|
);
|
|
}
|