feat: init docs section
This commit is contained in:
parent
8e315ffe01
commit
13f0a4f04f
|
|
@ -0,0 +1,334 @@
|
|||
'use client';
|
||||
|
||||
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 {
|
||||
Hero,
|
||||
SectionHeader,
|
||||
InlineCode,
|
||||
EndpointCard,
|
||||
ResponseBlock,
|
||||
} from '@/components/docs/blocks';
|
||||
|
||||
const tocItems = [
|
||||
{ id: 'overview', text: 'Overview', level: 2 },
|
||||
{ id: 'list-flows', text: 'List Flows', level: 2 },
|
||||
{ id: 'get-flow', text: 'Get Flow', level: 2 },
|
||||
{ id: 'list-flow-generations', text: 'List Flow Generations', level: 2 },
|
||||
{ id: 'list-flow-images', text: 'List Flow Images', level: 2 },
|
||||
{ id: 'update-flow-aliases', text: 'Update Flow Aliases', level: 2 },
|
||||
{ id: 'remove-flow-alias', text: 'Remove Flow Alias', level: 2 },
|
||||
{ id: 'regenerate-flow', text: 'Regenerate Flow', level: 2 },
|
||||
{ id: 'delete-flow', text: 'Delete Flow', level: 2 },
|
||||
{ id: 'next-steps', text: 'Next Steps', level: 2 },
|
||||
];
|
||||
|
||||
export default function FlowsAPIPage() {
|
||||
return (
|
||||
<DocPage
|
||||
breadcrumbItems={[
|
||||
{ label: 'Documentation', href: '/docs' },
|
||||
{ label: 'API Reference', href: '/docs/api' },
|
||||
{ label: 'Flows' },
|
||||
]}
|
||||
tocItems={tocItems}
|
||||
nextSteps={{
|
||||
links: [
|
||||
{
|
||||
href: '/docs/generation',
|
||||
title: 'Image Generation Guide',
|
||||
description: 'Learn about chaining generations with flows.',
|
||||
accent: 'primary',
|
||||
},
|
||||
{
|
||||
href: '/docs/api/generations',
|
||||
title: 'Generations API',
|
||||
description: 'Create generations within flows.',
|
||||
accent: 'secondary',
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
<Hero
|
||||
title="Flows API"
|
||||
subtitle="Manage generation chains and flow-scoped aliases."
|
||||
/>
|
||||
|
||||
<section id="overview" className="mb-12">
|
||||
<SectionHeader level={2} id="overview">
|
||||
Overview
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-4">
|
||||
Flows group related generations together. They're created automatically when you chain generations using the same flowId.
|
||||
</p>
|
||||
<p className="text-gray-300 leading-relaxed">
|
||||
Flows also support flow-scoped aliases — named references to images that are unique within a flow but don't conflict with project-level aliases.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="list-flows" className="mb-12">
|
||||
<SectionHeader level={2} id="list-flows">
|
||||
List Flows
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Retrieve all flows for your project with computed counts.
|
||||
</p>
|
||||
|
||||
<EndpointCard
|
||||
method="GET"
|
||||
endpoint="/api/v1/flows"
|
||||
baseUrl="https://api.banatie.app"
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Query Parameters</h4>
|
||||
<Table
|
||||
headers={['Parameter', 'Type', 'Description']}
|
||||
rows={[
|
||||
[<InlineCode key="p">limit</InlineCode>, 'number', 'Results per page (default: 20, max: 100)'],
|
||||
[<InlineCode key="p">offset</InlineCode>, 'number', 'Number of results to skip'],
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Example Request</h4>
|
||||
<CodeBlock
|
||||
code={`curl "https://api.banatie.app/api/v1/flows?limit=10" \\
|
||||
-H "X-API-Key: YOUR_API_KEY"`}
|
||||
language="bash"
|
||||
filename="Request"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Response</h4>
|
||||
<ResponseBlock
|
||||
status="success"
|
||||
statusCode={200}
|
||||
statusLabel="200 OK"
|
||||
content={`{
|
||||
"success": true,
|
||||
"data": [
|
||||
{
|
||||
"id": "770e8400-e29b-41d4-a716-446655440002",
|
||||
"aliases": {"@hero": "img-uuid-1", "@background": "img-uuid-2"},
|
||||
"generationCount": 5,
|
||||
"imageCount": 5,
|
||||
"createdAt": "2025-01-15T10:00:00Z",
|
||||
"updatedAt": "2025-01-15T10:30:00Z"
|
||||
}
|
||||
],
|
||||
"pagination": {
|
||||
"total": 1,
|
||||
"limit": 10,
|
||||
"offset": 0,
|
||||
"hasMore": false
|
||||
}
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="get-flow" className="mb-12">
|
||||
<SectionHeader level={2} id="get-flow">
|
||||
Get Flow
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Retrieve a single flow with detailed statistics.
|
||||
</p>
|
||||
|
||||
<EndpointCard
|
||||
method="GET"
|
||||
endpoint="/api/v1/flows/:id"
|
||||
baseUrl="https://api.banatie.app"
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Example Request</h4>
|
||||
<CodeBlock
|
||||
code={`curl https://api.banatie.app/api/v1/flows/770e8400-e29b-41d4-a716-446655440002 \\
|
||||
-H "X-API-Key: YOUR_API_KEY"`}
|
||||
language="bash"
|
||||
filename="Request"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="list-flow-generations" className="mb-12">
|
||||
<SectionHeader level={2} id="list-flow-generations">
|
||||
List Flow Generations
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Retrieve all generations in a specific flow.
|
||||
</p>
|
||||
|
||||
<EndpointCard
|
||||
method="GET"
|
||||
endpoint="/api/v1/flows/:id/generations"
|
||||
baseUrl="https://api.banatie.app"
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Example Request</h4>
|
||||
<CodeBlock
|
||||
code={`curl "https://api.banatie.app/api/v1/flows/770e8400-e29b-41d4-a716-446655440002/generations?limit=20" \\
|
||||
-H "X-API-Key: YOUR_API_KEY"`}
|
||||
language="bash"
|
||||
filename="Request"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="list-flow-images" className="mb-12">
|
||||
<SectionHeader level={2} id="list-flow-images">
|
||||
List Flow Images
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Retrieve all images (generated and uploaded) in a flow.
|
||||
</p>
|
||||
|
||||
<EndpointCard
|
||||
method="GET"
|
||||
endpoint="/api/v1/flows/:id/images"
|
||||
baseUrl="https://api.banatie.app"
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Example Request</h4>
|
||||
<CodeBlock
|
||||
code={`curl "https://api.banatie.app/api/v1/flows/770e8400-e29b-41d4-a716-446655440002/images" \\
|
||||
-H "X-API-Key: YOUR_API_KEY"`}
|
||||
language="bash"
|
||||
filename="Request"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="update-flow-aliases" className="mb-12">
|
||||
<SectionHeader level={2} id="update-flow-aliases">
|
||||
Update Flow Aliases
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Add or update flow-scoped aliases. Aliases are merged with existing ones.
|
||||
</p>
|
||||
|
||||
<EndpointCard
|
||||
method="PUT"
|
||||
endpoint="/api/v1/flows/:id/aliases"
|
||||
baseUrl="https://api.banatie.app"
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Request Body</h4>
|
||||
<Table
|
||||
headers={['Parameter', 'Type', 'Description']}
|
||||
rows={[
|
||||
[<InlineCode key="p">aliases</InlineCode>, 'object', 'Key-value pairs of aliases to add/update'],
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Example Request</h4>
|
||||
<CodeBlock
|
||||
code={`curl -X PUT https://api.banatie.app/api/v1/flows/770e8400-e29b-41d4-a716-446655440002/aliases \\
|
||||
-H "X-API-Key: YOUR_API_KEY" \\
|
||||
-H "Content-Type: application/json" \\
|
||||
-d '{
|
||||
"aliases": {
|
||||
"@hero": "image-id-123",
|
||||
"@background": "image-id-456"
|
||||
}
|
||||
}'`}
|
||||
language="bash"
|
||||
filename="Request"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="remove-flow-alias" className="mb-12">
|
||||
<SectionHeader level={2} id="remove-flow-alias">
|
||||
Remove Flow Alias
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Remove a specific alias from a flow.
|
||||
</p>
|
||||
|
||||
<EndpointCard
|
||||
method="DELETE"
|
||||
endpoint="/api/v1/flows/:id/aliases/:alias"
|
||||
baseUrl="https://api.banatie.app"
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Example Request</h4>
|
||||
<CodeBlock
|
||||
code={`curl -X DELETE https://api.banatie.app/api/v1/flows/770e8400-e29b-41d4-a716-446655440002/aliases/@hero \\
|
||||
-H "X-API-Key: YOUR_API_KEY"`}
|
||||
language="bash"
|
||||
filename="Request"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="regenerate-flow" className="mb-12">
|
||||
<SectionHeader level={2} id="regenerate-flow">
|
||||
Regenerate Flow
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Regenerate the most recent generation in the flow.
|
||||
</p>
|
||||
|
||||
<EndpointCard
|
||||
method="POST"
|
||||
endpoint="/api/v1/flows/:id/regenerate"
|
||||
baseUrl="https://api.banatie.app"
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Example Request</h4>
|
||||
<CodeBlock
|
||||
code={`curl -X POST https://api.banatie.app/api/v1/flows/770e8400-e29b-41d4-a716-446655440002/regenerate \\
|
||||
-H "X-API-Key: YOUR_API_KEY"`}
|
||||
language="bash"
|
||||
filename="Request"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="delete-flow" className="mb-12">
|
||||
<SectionHeader level={2} id="delete-flow">
|
||||
Delete Flow
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Delete a flow with cascade deletion. Images with project aliases are preserved.
|
||||
</p>
|
||||
|
||||
<EndpointCard
|
||||
method="DELETE"
|
||||
endpoint="/api/v1/flows/:id"
|
||||
baseUrl="https://api.banatie.app"
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Example Request</h4>
|
||||
<CodeBlock
|
||||
code={`curl -X DELETE https://api.banatie.app/api/v1/flows/770e8400-e29b-41d4-a716-446655440002 \\
|
||||
-H "X-API-Key: YOUR_API_KEY"`}
|
||||
language="bash"
|
||||
filename="Request"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<TipBox variant="compact" type="warning">
|
||||
Deleting a flow removes all generations and images in it. Images with project aliases are preserved (unlinked from the flow).
|
||||
</TipBox>
|
||||
</div>
|
||||
</section>
|
||||
</DocPage>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,326 @@
|
|||
'use client';
|
||||
|
||||
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 {
|
||||
Hero,
|
||||
SectionHeader,
|
||||
InlineCode,
|
||||
EndpointCard,
|
||||
ResponseBlock,
|
||||
} from '@/components/docs/blocks';
|
||||
|
||||
const tocItems = [
|
||||
{ id: 'create-generation', text: 'Create Generation', level: 2 },
|
||||
{ id: 'list-generations', text: 'List Generations', level: 2 },
|
||||
{ id: 'get-generation', text: 'Get Generation', level: 2 },
|
||||
{ id: 'update-generation', text: 'Update Generation', level: 2 },
|
||||
{ id: 'regenerate', text: 'Regenerate', level: 2 },
|
||||
{ id: 'delete-generation', text: 'Delete Generation', level: 2 },
|
||||
{ id: 'next-steps', text: 'Next Steps', level: 2 },
|
||||
];
|
||||
|
||||
export default function GenerationsAPIPage() {
|
||||
return (
|
||||
<DocPage
|
||||
breadcrumbItems={[
|
||||
{ label: 'Documentation', href: '/docs' },
|
||||
{ label: 'API Reference', href: '/docs/api' },
|
||||
{ label: 'Generations' },
|
||||
]}
|
||||
tocItems={tocItems}
|
||||
nextSteps={{
|
||||
links: [
|
||||
{
|
||||
href: '/docs/generation',
|
||||
title: 'Image Generation Guide',
|
||||
description: 'Concepts and examples for image generation.',
|
||||
accent: 'primary',
|
||||
},
|
||||
{
|
||||
href: '/docs/api/images',
|
||||
title: 'Images API',
|
||||
description: 'Upload and manage images.',
|
||||
accent: 'secondary',
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
<Hero
|
||||
title="Generations API"
|
||||
subtitle="Create and manage AI image generations."
|
||||
/>
|
||||
|
||||
<section id="create-generation" className="mb-12">
|
||||
<SectionHeader level={2} id="create-generation">
|
||||
Create Generation
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Generate a new image from a text prompt.
|
||||
</p>
|
||||
|
||||
<EndpointCard
|
||||
method="POST"
|
||||
endpoint="/api/v1/generations"
|
||||
baseUrl="https://api.banatie.app"
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Request Body</h4>
|
||||
<Table
|
||||
headers={['Parameter', 'Type', 'Required', 'Description']}
|
||||
rows={[
|
||||
[
|
||||
<InlineCode key="p">prompt</InlineCode>,
|
||||
<span key="t" className="text-cyan-400">string</span>,
|
||||
<span key="r" className="text-green-400">Yes</span>,
|
||||
'Text description of the image to generate',
|
||||
],
|
||||
[
|
||||
<InlineCode key="p">aspectRatio</InlineCode>,
|
||||
<span key="t" className="text-cyan-400">string</span>,
|
||||
<span key="r" className="text-gray-500">No</span>,
|
||||
'1:1, 16:9, 9:16, 3:2, 21:9 (default: 1:1)',
|
||||
],
|
||||
[
|
||||
<InlineCode key="p">referenceImages</InlineCode>,
|
||||
<span key="t" className="text-cyan-400">string[]</span>,
|
||||
<span key="r" className="text-gray-500">No</span>,
|
||||
'Array of image IDs or @aliases to use as references',
|
||||
],
|
||||
[
|
||||
<InlineCode key="p">flowId</InlineCode>,
|
||||
<span key="t" className="text-cyan-400">string</span>,
|
||||
<span key="r" className="text-gray-500">No</span>,
|
||||
'Associate with existing flow',
|
||||
],
|
||||
[
|
||||
<InlineCode key="p">alias</InlineCode>,
|
||||
<span key="t" className="text-cyan-400">string</span>,
|
||||
<span key="r" className="text-gray-500">No</span>,
|
||||
'Project-scoped alias (@custom-name)',
|
||||
],
|
||||
[
|
||||
<InlineCode key="p">autoEnhance</InlineCode>,
|
||||
<span key="t" className="text-cyan-400">boolean</span>,
|
||||
<span key="r" className="text-gray-500">No</span>,
|
||||
'Enable prompt enhancement (default: true)',
|
||||
],
|
||||
[
|
||||
<InlineCode key="p">meta</InlineCode>,
|
||||
<span key="t" className="text-cyan-400">object</span>,
|
||||
<span key="r" className="text-gray-500">No</span>,
|
||||
'Custom metadata',
|
||||
],
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Example Request</h4>
|
||||
<CodeBlock
|
||||
code={`curl -X POST https://api.banatie.app/api/v1/generations \\
|
||||
-H "X-API-Key: YOUR_API_KEY" \\
|
||||
-H "Content-Type: application/json" \\
|
||||
-d '{
|
||||
"prompt": "a serene mountain landscape at sunset",
|
||||
"aspectRatio": "16:9"
|
||||
}'`}
|
||||
language="bash"
|
||||
filename="Request"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Response</h4>
|
||||
<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",
|
||||
"createdAt": "2025-01-15T10:30:00Z"
|
||||
}
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="list-generations" className="mb-12">
|
||||
<SectionHeader level={2} id="list-generations">
|
||||
List Generations
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Retrieve all generations for your project with optional filtering.
|
||||
</p>
|
||||
|
||||
<EndpointCard
|
||||
method="GET"
|
||||
endpoint="/api/v1/generations"
|
||||
baseUrl="https://api.banatie.app"
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Query Parameters</h4>
|
||||
<Table
|
||||
headers={['Parameter', 'Type', 'Description']}
|
||||
rows={[
|
||||
[<InlineCode key="p">flowId</InlineCode>, 'string', 'Filter by flow ID'],
|
||||
[<InlineCode key="p">status</InlineCode>, 'string', 'Filter by status: pending, processing, success, failed'],
|
||||
[<InlineCode key="p">limit</InlineCode>, 'number', 'Results per page (default: 20, max: 100)'],
|
||||
[<InlineCode key="p">offset</InlineCode>, 'number', 'Number of results to skip'],
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Example Request</h4>
|
||||
<CodeBlock
|
||||
code={`curl "https://api.banatie.app/api/v1/generations?limit=10&status=success" \\
|
||||
-H "X-API-Key: YOUR_API_KEY"`}
|
||||
language="bash"
|
||||
filename="Request"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="get-generation" className="mb-12">
|
||||
<SectionHeader level={2} id="get-generation">
|
||||
Get Generation
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Retrieve a single generation by ID.
|
||||
</p>
|
||||
|
||||
<EndpointCard
|
||||
method="GET"
|
||||
endpoint="/api/v1/generations/:id"
|
||||
baseUrl="https://api.banatie.app"
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Example Request</h4>
|
||||
<CodeBlock
|
||||
code={`curl https://api.banatie.app/api/v1/generations/550e8400-e29b-41d4-a716-446655440000 \\
|
||||
-H "X-API-Key: YOUR_API_KEY"`}
|
||||
language="bash"
|
||||
filename="Request"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="update-generation" className="mb-12">
|
||||
<SectionHeader level={2} id="update-generation">
|
||||
Update Generation
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Update generation parameters. Changing prompt or aspectRatio triggers automatic regeneration.
|
||||
</p>
|
||||
|
||||
<EndpointCard
|
||||
method="PUT"
|
||||
endpoint="/api/v1/generations/:id"
|
||||
baseUrl="https://api.banatie.app"
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Request Body</h4>
|
||||
<Table
|
||||
headers={['Parameter', 'Type', 'Description']}
|
||||
rows={[
|
||||
[<InlineCode key="p">prompt</InlineCode>, 'string', 'New prompt (triggers regeneration)'],
|
||||
[<InlineCode key="p">aspectRatio</InlineCode>, 'string', 'New aspect ratio (triggers regeneration)'],
|
||||
[<InlineCode key="p">flowId</InlineCode>, 'string | null', 'Change flow association'],
|
||||
[<InlineCode key="p">meta</InlineCode>, 'object', 'Update custom metadata'],
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<TipBox variant="compact" type="info">
|
||||
Changing <InlineCode>prompt</InlineCode> or <InlineCode>aspectRatio</InlineCode> triggers a new generation. The image ID and URL remain the same — only the content changes.
|
||||
</TipBox>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="regenerate" className="mb-12">
|
||||
<SectionHeader level={2} id="regenerate">
|
||||
Regenerate
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Create a new image using the exact same parameters. Useful for getting a different result or recovering from failures.
|
||||
</p>
|
||||
|
||||
<EndpointCard
|
||||
method="POST"
|
||||
endpoint="/api/v1/generations/:id/regenerate"
|
||||
baseUrl="https://api.banatie.app"
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Example Request</h4>
|
||||
<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="Request"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="delete-generation" className="mb-12">
|
||||
<SectionHeader level={2} id="delete-generation">
|
||||
Delete Generation
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Delete a generation and its output image. Images with project aliases are preserved.
|
||||
</p>
|
||||
|
||||
<EndpointCard
|
||||
method="DELETE"
|
||||
endpoint="/api/v1/generations/:id"
|
||||
baseUrl="https://api.banatie.app"
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Example Request</h4>
|
||||
<CodeBlock
|
||||
code={`curl -X DELETE https://api.banatie.app/api/v1/generations/550e8400-e29b-41d4-a716-446655440000 \\
|
||||
-H "X-API-Key: YOUR_API_KEY"`}
|
||||
language="bash"
|
||||
filename="Request"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Response</h4>
|
||||
<ResponseBlock
|
||||
status="success"
|
||||
statusCode={200}
|
||||
statusLabel="200 OK"
|
||||
content={`{
|
||||
"success": true,
|
||||
"data": {
|
||||
"id": "550e8400-e29b-41d4-a716-446655440000"
|
||||
}
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</DocPage>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,361 @@
|
|||
'use client';
|
||||
|
||||
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 {
|
||||
Hero,
|
||||
SectionHeader,
|
||||
InlineCode,
|
||||
EndpointCard,
|
||||
ResponseBlock,
|
||||
} from '@/components/docs/blocks';
|
||||
|
||||
const tocItems = [
|
||||
{ id: 'upload-image', text: 'Upload Image', level: 2 },
|
||||
{ id: 'list-images', text: 'List Images', level: 2 },
|
||||
{ id: 'get-image', text: 'Get Image', level: 2 },
|
||||
{ id: 'update-image', text: 'Update Image', level: 2 },
|
||||
{ id: 'assign-alias', text: 'Assign Alias', level: 2 },
|
||||
{ id: 'delete-image', text: 'Delete Image', level: 2 },
|
||||
{ id: 'cdn-endpoints', text: 'CDN Endpoints', level: 2 },
|
||||
{ id: 'next-steps', text: 'Next Steps', level: 2 },
|
||||
];
|
||||
|
||||
export default function ImagesAPIPage() {
|
||||
return (
|
||||
<DocPage
|
||||
breadcrumbItems={[
|
||||
{ label: 'Documentation', href: '/docs' },
|
||||
{ label: 'API Reference', href: '/docs/api' },
|
||||
{ label: 'Images' },
|
||||
]}
|
||||
tocItems={tocItems}
|
||||
nextSteps={{
|
||||
links: [
|
||||
{
|
||||
href: '/docs/images',
|
||||
title: 'Working with Images Guide',
|
||||
description: 'Concepts and examples for image management.',
|
||||
accent: 'primary',
|
||||
},
|
||||
{
|
||||
href: '/docs/api/generations',
|
||||
title: 'Generations API',
|
||||
description: 'Create AI-generated images.',
|
||||
accent: 'secondary',
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
<Hero
|
||||
title="Images API"
|
||||
subtitle="Upload and manage images for your project."
|
||||
/>
|
||||
|
||||
<section id="upload-image" className="mb-12">
|
||||
<SectionHeader level={2} id="upload-image">
|
||||
Upload Image
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Upload an image file to your project storage.
|
||||
</p>
|
||||
|
||||
<EndpointCard
|
||||
method="POST"
|
||||
endpoint="/api/v1/images/upload"
|
||||
baseUrl="https://api.banatie.app"
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Form Data</h4>
|
||||
<Table
|
||||
headers={['Parameter', 'Type', 'Required', 'Description']}
|
||||
rows={[
|
||||
[
|
||||
<InlineCode key="p">file</InlineCode>,
|
||||
<span key="t" className="text-cyan-400">file</span>,
|
||||
<span key="r" className="text-green-400">Yes</span>,
|
||||
'Image file (max 5MB, JPEG/PNG/WebP)',
|
||||
],
|
||||
[
|
||||
<InlineCode key="p">alias</InlineCode>,
|
||||
<span key="t" className="text-cyan-400">string</span>,
|
||||
<span key="r" className="text-gray-500">No</span>,
|
||||
'Project-scoped alias (@custom-name)',
|
||||
],
|
||||
[
|
||||
<InlineCode key="p">flowId</InlineCode>,
|
||||
<span key="t" className="text-cyan-400">string</span>,
|
||||
<span key="r" className="text-gray-500">No</span>,
|
||||
'Associate with flow',
|
||||
],
|
||||
[
|
||||
<InlineCode key="p">meta</InlineCode>,
|
||||
<span key="t" className="text-cyan-400">string</span>,
|
||||
<span key="r" className="text-gray-500">No</span>,
|
||||
'Custom metadata (JSON string)',
|
||||
],
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Example Request</h4>
|
||||
<CodeBlock
|
||||
code={`curl -X POST https://api.banatie.app/api/v1/images/upload \\
|
||||
-H "X-API-Key: YOUR_API_KEY" \\
|
||||
-F "file=@your-image.png" \\
|
||||
-F "alias=@brand-logo"`}
|
||||
language="bash"
|
||||
filename="Request"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Response</h4>
|
||||
<ResponseBlock
|
||||
status="success"
|
||||
statusCode={201}
|
||||
statusLabel="201 Created"
|
||||
content={`{
|
||||
"success": true,
|
||||
"data": {
|
||||
"id": "550e8400-e29b-41d4-a716-446655440000",
|
||||
"storageUrl": "https://cdn.banatie.app/my-org/my-project/img/550e8400-e29b-41d4-a716-446655440000",
|
||||
"alias": "@brand-logo",
|
||||
"source": "uploaded",
|
||||
"width": 512,
|
||||
"height": 512,
|
||||
"mimeType": "image/png",
|
||||
"fileSize": 24576,
|
||||
"createdAt": "2025-01-15T10:30:00Z"
|
||||
}
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="list-images" className="mb-12">
|
||||
<SectionHeader level={2} id="list-images">
|
||||
List Images
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Retrieve all images in your project with optional filtering.
|
||||
</p>
|
||||
|
||||
<EndpointCard
|
||||
method="GET"
|
||||
endpoint="/api/v1/images"
|
||||
baseUrl="https://api.banatie.app"
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Query Parameters</h4>
|
||||
<Table
|
||||
headers={['Parameter', 'Type', 'Description']}
|
||||
rows={[
|
||||
[<InlineCode key="p">flowId</InlineCode>, 'string', 'Filter by flow ID'],
|
||||
[<InlineCode key="p">source</InlineCode>, 'string', 'Filter by source: generated, uploaded'],
|
||||
[<InlineCode key="p">alias</InlineCode>, 'string', 'Filter by exact alias match'],
|
||||
[<InlineCode key="p">limit</InlineCode>, 'number', 'Results per page (default: 20, max: 100)'],
|
||||
[<InlineCode key="p">offset</InlineCode>, 'number', 'Number of results to skip'],
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Example Request</h4>
|
||||
<CodeBlock
|
||||
code={`curl "https://api.banatie.app/api/v1/images?source=uploaded&limit=20" \\
|
||||
-H "X-API-Key: YOUR_API_KEY"`}
|
||||
language="bash"
|
||||
filename="Request"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="get-image" className="mb-12">
|
||||
<SectionHeader level={2} id="get-image">
|
||||
Get Image
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Retrieve a single image by ID or alias.
|
||||
</p>
|
||||
|
||||
<EndpointCard
|
||||
method="GET"
|
||||
endpoint="/api/v1/images/:id_or_alias"
|
||||
baseUrl="https://api.banatie.app"
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Example Requests</h4>
|
||||
<CodeBlock
|
||||
code={`# By UUID
|
||||
curl https://api.banatie.app/api/v1/images/550e8400-e29b-41d4-a716-446655440000 \\
|
||||
-H "X-API-Key: YOUR_API_KEY"
|
||||
|
||||
# By alias
|
||||
curl https://api.banatie.app/api/v1/images/@brand-logo \\
|
||||
-H "X-API-Key: YOUR_API_KEY"`}
|
||||
language="bash"
|
||||
filename="Request"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="update-image" className="mb-12">
|
||||
<SectionHeader level={2} id="update-image">
|
||||
Update Image
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Update image metadata (focal point and custom metadata).
|
||||
</p>
|
||||
|
||||
<EndpointCard
|
||||
method="PUT"
|
||||
endpoint="/api/v1/images/:id_or_alias"
|
||||
baseUrl="https://api.banatie.app"
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Request Body</h4>
|
||||
<Table
|
||||
headers={['Parameter', 'Type', 'Description']}
|
||||
rows={[
|
||||
[<InlineCode key="p">focalPoint</InlineCode>, 'object', 'Focal point for cropping {x: 0-1, y: 0-1}'],
|
||||
[<InlineCode key="p">meta</InlineCode>, 'object', 'Custom metadata'],
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Example Request</h4>
|
||||
<CodeBlock
|
||||
code={`curl -X PUT https://api.banatie.app/api/v1/images/550e8400-e29b-41d4-a716-446655440000 \\
|
||||
-H "X-API-Key: YOUR_API_KEY" \\
|
||||
-H "Content-Type: application/json" \\
|
||||
-d '{
|
||||
"focalPoint": {"x": 0.5, "y": 0.3},
|
||||
"meta": {"category": "hero"}
|
||||
}'`}
|
||||
language="bash"
|
||||
filename="Request"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="assign-alias" className="mb-12">
|
||||
<SectionHeader level={2} id="assign-alias">
|
||||
Assign Alias
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Assign or remove a project-scoped alias from an image.
|
||||
</p>
|
||||
|
||||
<EndpointCard
|
||||
method="PUT"
|
||||
endpoint="/api/v1/images/:id_or_alias/alias"
|
||||
baseUrl="https://api.banatie.app"
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Request Body</h4>
|
||||
<Table
|
||||
headers={['Parameter', 'Type', 'Description']}
|
||||
rows={[
|
||||
[<InlineCode key="p">alias</InlineCode>, 'string | null', 'Alias to assign (@name) or null to remove'],
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Example Requests</h4>
|
||||
<CodeBlock
|
||||
code={`# Assign alias
|
||||
curl -X PUT https://api.banatie.app/api/v1/images/550e8400-e29b-41d4-a716-446655440000/alias \\
|
||||
-H "X-API-Key: YOUR_API_KEY" \\
|
||||
-H "Content-Type: application/json" \\
|
||||
-d '{"alias": "@hero-background"}'
|
||||
|
||||
# Remove alias
|
||||
curl -X PUT https://api.banatie.app/api/v1/images/550e8400-e29b-41d4-a716-446655440000/alias \\
|
||||
-H "X-API-Key: YOUR_API_KEY" \\
|
||||
-H "Content-Type: application/json" \\
|
||||
-d '{"alias": null}'`}
|
||||
language="bash"
|
||||
filename="Request"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="delete-image" className="mb-12">
|
||||
<SectionHeader level={2} id="delete-image">
|
||||
Delete Image
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Permanently delete an image from storage.
|
||||
</p>
|
||||
|
||||
<EndpointCard
|
||||
method="DELETE"
|
||||
endpoint="/api/v1/images/:id_or_alias"
|
||||
baseUrl="https://api.banatie.app"
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Example Request</h4>
|
||||
<CodeBlock
|
||||
code={`curl -X DELETE https://api.banatie.app/api/v1/images/550e8400-e29b-41d4-a716-446655440000 \\
|
||||
-H "X-API-Key: YOUR_API_KEY"`}
|
||||
language="bash"
|
||||
filename="Request"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<TipBox variant="compact" type="warning">
|
||||
Deletion is permanent. The image file and all references are removed from storage.
|
||||
</TipBox>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="cdn-endpoints" className="mb-12">
|
||||
<SectionHeader level={2} id="cdn-endpoints">
|
||||
CDN Endpoints
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Access images directly via CDN (public, no authentication required):
|
||||
</p>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-white mb-3">By Image ID</h4>
|
||||
<CodeBlock
|
||||
code={`GET https://cdn.banatie.app/{org}/{project}/img/{imageId}`}
|
||||
language="text"
|
||||
filename="CDN by ID"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-white mb-3">By Alias</h4>
|
||||
<CodeBlock
|
||||
code={`GET https://cdn.banatie.app/{org}/{project}/img/@{alias}`}
|
||||
language="text"
|
||||
filename="CDN by Alias"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<TipBox variant="compact" type="info">
|
||||
CDN URLs are public and don't require authentication. They return image bytes directly with appropriate caching headers.
|
||||
</TipBox>
|
||||
</div>
|
||||
</section>
|
||||
</DocPage>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,419 @@
|
|||
'use client';
|
||||
|
||||
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 {
|
||||
Hero,
|
||||
SectionHeader,
|
||||
InlineCode,
|
||||
EndpointCard,
|
||||
ResponseBlock,
|
||||
} from '@/components/docs/blocks';
|
||||
|
||||
const tocItems = [
|
||||
{ id: 'overview', text: 'Overview', level: 2 },
|
||||
{ id: 'create-scope', text: 'Create Scope', level: 2 },
|
||||
{ id: 'list-scopes', text: 'List Scopes', level: 2 },
|
||||
{ id: 'get-scope', text: 'Get Scope', level: 2 },
|
||||
{ id: 'update-scope', text: 'Update Scope', level: 2 },
|
||||
{ id: 'regenerate-scope', text: 'Regenerate Scope', level: 2 },
|
||||
{ id: 'delete-scope', text: 'Delete Scope', level: 2 },
|
||||
{ id: 'cdn-live-endpoint', text: 'CDN Live Endpoint', level: 2 },
|
||||
{ id: 'next-steps', text: 'Next Steps', level: 2 },
|
||||
];
|
||||
|
||||
export default function LiveScopesAPIPage() {
|
||||
return (
|
||||
<DocPage
|
||||
breadcrumbItems={[
|
||||
{ label: 'Documentation', href: '/docs' },
|
||||
{ label: 'API Reference', href: '/docs/api' },
|
||||
{ label: 'Live Scopes' },
|
||||
]}
|
||||
tocItems={tocItems}
|
||||
nextSteps={{
|
||||
links: [
|
||||
{
|
||||
href: '/docs/live-urls',
|
||||
title: 'Live URLs Guide',
|
||||
description: 'Learn about live URL generation.',
|
||||
accent: 'primary',
|
||||
},
|
||||
{
|
||||
href: '/docs/api/generations',
|
||||
title: 'Generations API',
|
||||
description: 'Full control via the generations API.',
|
||||
accent: 'secondary',
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
<Hero
|
||||
title="Live Scopes API"
|
||||
subtitle="Manage scopes for live URL generation."
|
||||
/>
|
||||
|
||||
<section id="overview" className="mb-12">
|
||||
<SectionHeader level={2} id="overview">
|
||||
Overview
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-4">
|
||||
Live scopes organize live URL generations. Each scope has its own generation limit and can be configured independently.
|
||||
</p>
|
||||
<p className="text-gray-300 leading-relaxed">
|
||||
Scopes are auto-created on first use, but you can pre-configure them via this API to set custom limits.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="create-scope" className="mb-12">
|
||||
<SectionHeader level={2} id="create-scope">
|
||||
Create Scope
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Create a new live scope with custom settings.
|
||||
</p>
|
||||
|
||||
<EndpointCard
|
||||
method="POST"
|
||||
endpoint="/api/v1/live/scopes"
|
||||
baseUrl="https://api.banatie.app"
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Request Body</h4>
|
||||
<Table
|
||||
headers={['Parameter', 'Type', 'Required', 'Description']}
|
||||
rows={[
|
||||
[
|
||||
<InlineCode key="p">slug</InlineCode>,
|
||||
<span key="t" className="text-cyan-400">string</span>,
|
||||
<span key="r" className="text-green-400">Yes</span>,
|
||||
'Unique scope identifier (alphanumeric + hyphens + underscores)',
|
||||
],
|
||||
[
|
||||
<InlineCode key="p">allowNewGenerations</InlineCode>,
|
||||
<span key="t" className="text-cyan-400">boolean</span>,
|
||||
<span key="r" className="text-gray-500">No</span>,
|
||||
'Allow new generations (default: true)',
|
||||
],
|
||||
[
|
||||
<InlineCode key="p">newGenerationsLimit</InlineCode>,
|
||||
<span key="t" className="text-cyan-400">number</span>,
|
||||
<span key="r" className="text-gray-500">No</span>,
|
||||
'Maximum generations allowed (default: 30)',
|
||||
],
|
||||
[
|
||||
<InlineCode key="p">meta</InlineCode>,
|
||||
<span key="t" className="text-cyan-400">object</span>,
|
||||
<span key="r" className="text-gray-500">No</span>,
|
||||
'Custom metadata',
|
||||
],
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Example Request</h4>
|
||||
<CodeBlock
|
||||
code={`curl -X POST https://api.banatie.app/api/v1/live/scopes \\
|
||||
-H "X-API-Key: YOUR_API_KEY" \\
|
||||
-H "Content-Type: application/json" \\
|
||||
-d '{
|
||||
"slug": "hero-section",
|
||||
"allowNewGenerations": true,
|
||||
"newGenerationsLimit": 50,
|
||||
"meta": {"description": "Hero section images"}
|
||||
}'`}
|
||||
language="bash"
|
||||
filename="Request"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Response</h4>
|
||||
<ResponseBlock
|
||||
status="success"
|
||||
statusCode={201}
|
||||
statusLabel="201 Created"
|
||||
content={`{
|
||||
"success": true,
|
||||
"data": {
|
||||
"id": "880e8400-e29b-41d4-a716-446655440003",
|
||||
"slug": "hero-section",
|
||||
"allowNewGenerations": true,
|
||||
"newGenerationsLimit": 50,
|
||||
"currentGenerations": 0,
|
||||
"lastGeneratedAt": null,
|
||||
"meta": {"description": "Hero section images"},
|
||||
"createdAt": "2025-01-15T10:30:00Z"
|
||||
}
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="list-scopes" className="mb-12">
|
||||
<SectionHeader level={2} id="list-scopes">
|
||||
List Scopes
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Retrieve all live scopes for your project.
|
||||
</p>
|
||||
|
||||
<EndpointCard
|
||||
method="GET"
|
||||
endpoint="/api/v1/live/scopes"
|
||||
baseUrl="https://api.banatie.app"
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Query Parameters</h4>
|
||||
<Table
|
||||
headers={['Parameter', 'Type', 'Description']}
|
||||
rows={[
|
||||
[<InlineCode key="p">slug</InlineCode>, 'string', 'Filter by exact slug match'],
|
||||
[<InlineCode key="p">limit</InlineCode>, 'number', 'Results per page (default: 20, max: 100)'],
|
||||
[<InlineCode key="p">offset</InlineCode>, 'number', 'Number of results to skip'],
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Example Request</h4>
|
||||
<CodeBlock
|
||||
code={`curl "https://api.banatie.app/api/v1/live/scopes?limit=20" \\
|
||||
-H "X-API-Key: YOUR_API_KEY"`}
|
||||
language="bash"
|
||||
filename="Request"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="get-scope" className="mb-12">
|
||||
<SectionHeader level={2} id="get-scope">
|
||||
Get Scope
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Retrieve a single scope with statistics.
|
||||
</p>
|
||||
|
||||
<EndpointCard
|
||||
method="GET"
|
||||
endpoint="/api/v1/live/scopes/:slug"
|
||||
baseUrl="https://api.banatie.app"
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Example Request</h4>
|
||||
<CodeBlock
|
||||
code={`curl https://api.banatie.app/api/v1/live/scopes/hero-section \\
|
||||
-H "X-API-Key: YOUR_API_KEY"`}
|
||||
language="bash"
|
||||
filename="Request"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="update-scope" className="mb-12">
|
||||
<SectionHeader level={2} id="update-scope">
|
||||
Update Scope
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Update scope settings. Changes take effect immediately.
|
||||
</p>
|
||||
|
||||
<EndpointCard
|
||||
method="PUT"
|
||||
endpoint="/api/v1/live/scopes/:slug"
|
||||
baseUrl="https://api.banatie.app"
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Request Body</h4>
|
||||
<Table
|
||||
headers={['Parameter', 'Type', 'Description']}
|
||||
rows={[
|
||||
[<InlineCode key="p">allowNewGenerations</InlineCode>, 'boolean', 'Allow/disallow new generations'],
|
||||
[<InlineCode key="p">newGenerationsLimit</InlineCode>, 'number', 'Update generation limit'],
|
||||
[<InlineCode key="p">meta</InlineCode>, 'object', 'Update custom metadata'],
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Example Request</h4>
|
||||
<CodeBlock
|
||||
code={`curl -X PUT https://api.banatie.app/api/v1/live/scopes/hero-section \\
|
||||
-H "X-API-Key: YOUR_API_KEY" \\
|
||||
-H "Content-Type: application/json" \\
|
||||
-d '{
|
||||
"allowNewGenerations": false,
|
||||
"newGenerationsLimit": 100
|
||||
}'`}
|
||||
language="bash"
|
||||
filename="Request"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="regenerate-scope" className="mb-12">
|
||||
<SectionHeader level={2} id="regenerate-scope">
|
||||
Regenerate Scope
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Regenerate images in a scope. Can regenerate a specific image or all images.
|
||||
</p>
|
||||
|
||||
<EndpointCard
|
||||
method="POST"
|
||||
endpoint="/api/v1/live/scopes/:slug/regenerate"
|
||||
baseUrl="https://api.banatie.app"
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Request Body</h4>
|
||||
<Table
|
||||
headers={['Parameter', 'Type', 'Description']}
|
||||
rows={[
|
||||
[<InlineCode key="p">imageId</InlineCode>, 'string', 'Specific image to regenerate (omit for all)'],
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Example Requests</h4>
|
||||
<CodeBlock
|
||||
code={`# Regenerate specific image
|
||||
curl -X POST https://api.banatie.app/api/v1/live/scopes/hero-section/regenerate \\
|
||||
-H "X-API-Key: YOUR_API_KEY" \\
|
||||
-H "Content-Type: application/json" \\
|
||||
-d '{"imageId": "550e8400-e29b-41d4-a716-446655440000"}'
|
||||
|
||||
# Regenerate all images in scope
|
||||
curl -X POST https://api.banatie.app/api/v1/live/scopes/hero-section/regenerate \\
|
||||
-H "X-API-Key: YOUR_API_KEY" \\
|
||||
-H "Content-Type: application/json" \\
|
||||
-d '{}'`}
|
||||
language="bash"
|
||||
filename="Request"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Response</h4>
|
||||
<ResponseBlock
|
||||
status="success"
|
||||
statusCode={200}
|
||||
statusLabel="200 OK"
|
||||
content={`{
|
||||
"success": true,
|
||||
"data": {
|
||||
"regenerated": 3,
|
||||
"images": [...]
|
||||
}
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="delete-scope" className="mb-12">
|
||||
<SectionHeader level={2} id="delete-scope">
|
||||
Delete Scope
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Delete a scope and all its cached images.
|
||||
</p>
|
||||
|
||||
<EndpointCard
|
||||
method="DELETE"
|
||||
endpoint="/api/v1/live/scopes/:slug"
|
||||
baseUrl="https://api.banatie.app"
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Example Request</h4>
|
||||
<CodeBlock
|
||||
code={`curl -X DELETE https://api.banatie.app/api/v1/live/scopes/hero-section \\
|
||||
-H "X-API-Key: YOUR_API_KEY"`}
|
||||
language="bash"
|
||||
filename="Request"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<TipBox variant="compact" type="warning">
|
||||
Deleting a scope permanently removes all cached images in it. This cannot be undone.
|
||||
</TipBox>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="cdn-live-endpoint" className="mb-12">
|
||||
<SectionHeader level={2} id="cdn-live-endpoint">
|
||||
CDN Live Endpoint
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Public endpoint for live URL generation (no authentication required):
|
||||
</p>
|
||||
|
||||
<CodeBlock
|
||||
code={`GET https://cdn.banatie.app/{org}/{project}/live/{scope}?prompt=...`}
|
||||
language="text"
|
||||
filename="Live URL Format"
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Query Parameters</h4>
|
||||
<Table
|
||||
headers={['Parameter', 'Required', 'Description']}
|
||||
rows={[
|
||||
[
|
||||
<InlineCode key="p">prompt</InlineCode>,
|
||||
<span key="r" className="text-green-400">Yes</span>,
|
||||
'Text description of the image to generate',
|
||||
],
|
||||
[
|
||||
<InlineCode key="p">aspectRatio</InlineCode>,
|
||||
<span key="r" className="text-gray-500">No</span>,
|
||||
'Image ratio (default: 1:1)',
|
||||
],
|
||||
[
|
||||
<InlineCode key="p">autoEnhance</InlineCode>,
|
||||
<span key="r" className="text-gray-500">No</span>,
|
||||
'Enable prompt enhancement',
|
||||
],
|
||||
[
|
||||
<InlineCode key="p">template</InlineCode>,
|
||||
<span key="r" className="text-gray-500">No</span>,
|
||||
'Enhancement template to use',
|
||||
],
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Example</h4>
|
||||
<CodeBlock
|
||||
code={`https://cdn.banatie.app/my-org/my-project/live/hero-section?prompt=mountain+landscape&aspectRatio=16:9`}
|
||||
language="text"
|
||||
filename="Live URL Example"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<h4 className="text-sm font-semibold text-white mb-4">Response Headers</h4>
|
||||
<Table
|
||||
headers={['Header', 'Description']}
|
||||
rows={[
|
||||
[<InlineCode key="h">X-Cache-Status</InlineCode>, 'HIT (cached) or MISS (generated)'],
|
||||
[<InlineCode key="h">X-Scope</InlineCode>, 'Scope identifier'],
|
||||
[<InlineCode key="h">X-Image-Id</InlineCode>, 'Image UUID'],
|
||||
[<InlineCode key="h">X-RateLimit-Remaining</InlineCode>, 'Remaining IP rate limit (on MISS)'],
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</DocPage>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,239 @@
|
|||
'use client';
|
||||
|
||||
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 {
|
||||
Hero,
|
||||
SectionHeader,
|
||||
InlineCode,
|
||||
LinkCard,
|
||||
LinkCardGrid,
|
||||
} from '@/components/docs/blocks';
|
||||
|
||||
const tocItems = [
|
||||
{ id: 'base-url', text: 'Base URL', level: 2 },
|
||||
{ id: 'authentication', text: 'Authentication', level: 2 },
|
||||
{ id: 'response-format', text: 'Response Format', level: 2 },
|
||||
{ id: 'error-codes', text: 'Common Error Codes', level: 2 },
|
||||
{ id: 'rate-limits', text: 'Rate Limits', level: 2 },
|
||||
{ id: 'endpoints', text: 'Endpoints', level: 2 },
|
||||
{ id: 'next-steps', text: 'Next Steps', level: 2 },
|
||||
];
|
||||
|
||||
export default function APIOverviewPage() {
|
||||
return (
|
||||
<DocPage
|
||||
breadcrumbItems={[
|
||||
{ label: 'Documentation', href: '/docs' },
|
||||
{ label: 'API Reference' },
|
||||
]}
|
||||
tocItems={tocItems}
|
||||
nextSteps={{
|
||||
links: [
|
||||
{
|
||||
href: '/docs/api/generations',
|
||||
title: 'Generations API',
|
||||
description: 'Create and manage image generations.',
|
||||
accent: 'primary',
|
||||
},
|
||||
{
|
||||
href: '/docs/api/images',
|
||||
title: 'Images API',
|
||||
description: 'Upload and organize images.',
|
||||
accent: 'secondary',
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
<Hero
|
||||
title="API Reference"
|
||||
subtitle="Complete REST API reference for Banatie. All endpoints, parameters, and response formats."
|
||||
/>
|
||||
|
||||
<section id="base-url" className="mb-12">
|
||||
<SectionHeader level={2} id="base-url">
|
||||
Base URL
|
||||
</SectionHeader>
|
||||
|
||||
<CodeBlock
|
||||
code={`https://api.banatie.app`}
|
||||
language="text"
|
||||
filename="Base URL"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section id="authentication" className="mb-12">
|
||||
<SectionHeader level={2} id="authentication">
|
||||
Authentication
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
All endpoints require the <InlineCode>X-API-Key</InlineCode> header:
|
||||
</p>
|
||||
|
||||
<CodeBlock
|
||||
code={`X-API-Key: your_api_key_here`}
|
||||
language="text"
|
||||
filename="Header"
|
||||
/>
|
||||
|
||||
<p className="text-gray-300 leading-relaxed mt-6">
|
||||
See <a href="/docs/authentication" className="text-purple-400 hover:underline">Authentication</a> for details on obtaining and using API keys.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="response-format" className="mb-12">
|
||||
<SectionHeader level={2} id="response-format">
|
||||
Response Format
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
All responses follow a consistent JSON structure:
|
||||
</p>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-300 mb-3">Success Response:</p>
|
||||
<CodeBlock
|
||||
code={`{
|
||||
"success": true,
|
||||
"data": { ... }
|
||||
}`}
|
||||
language="json"
|
||||
filename="Success"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-300 mb-3">Error Response:</p>
|
||||
<CodeBlock
|
||||
code={`{
|
||||
"success": false,
|
||||
"error": {
|
||||
"message": "Error description",
|
||||
"code": "ERROR_CODE"
|
||||
}
|
||||
}`}
|
||||
language="json"
|
||||
filename="Error"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-300 mb-3">Paginated Response:</p>
|
||||
<CodeBlock
|
||||
code={`{
|
||||
"success": true,
|
||||
"data": [ ... ],
|
||||
"pagination": {
|
||||
"total": 100,
|
||||
"limit": 20,
|
||||
"offset": 0,
|
||||
"hasMore": true
|
||||
}
|
||||
}`}
|
||||
language="json"
|
||||
filename="Paginated"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="error-codes" className="mb-12">
|
||||
<SectionHeader level={2} id="error-codes">
|
||||
Common Error Codes
|
||||
</SectionHeader>
|
||||
|
||||
<Table
|
||||
headers={['Status', 'Code', 'Description']}
|
||||
rows={[
|
||||
[
|
||||
<InlineCode key="s" color="error">400</InlineCode>,
|
||||
'VALIDATION_ERROR',
|
||||
'Missing or invalid parameters',
|
||||
],
|
||||
[
|
||||
<InlineCode key="s" color="error">401</InlineCode>,
|
||||
'UNAUTHORIZED',
|
||||
'Missing or invalid API key',
|
||||
],
|
||||
[
|
||||
<InlineCode key="s" color="error">404</InlineCode>,
|
||||
'*_NOT_FOUND',
|
||||
'Requested resource not found',
|
||||
],
|
||||
[
|
||||
<InlineCode key="s" color="error">409</InlineCode>,
|
||||
'ALIAS_CONFLICT',
|
||||
'Alias already exists',
|
||||
],
|
||||
[
|
||||
<InlineCode key="s" color="error">429</InlineCode>,
|
||||
'RATE_LIMIT_EXCEEDED',
|
||||
'Too many requests',
|
||||
],
|
||||
[
|
||||
<InlineCode key="s" color="error">500</InlineCode>,
|
||||
'INTERNAL_ERROR',
|
||||
'Server error',
|
||||
],
|
||||
]}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section id="rate-limits" className="mb-12">
|
||||
<SectionHeader level={2} id="rate-limits">
|
||||
Rate Limits
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
API requests are rate limited to 100 requests per hour per API key.
|
||||
</p>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Rate limit headers are included in every response:
|
||||
</p>
|
||||
|
||||
<Table
|
||||
headers={['Header', 'Description']}
|
||||
rows={[
|
||||
[<InlineCode key="h">X-RateLimit-Limit</InlineCode>, 'Maximum requests per hour'],
|
||||
[<InlineCode key="h">X-RateLimit-Remaining</InlineCode>, 'Requests remaining in current window'],
|
||||
[<InlineCode key="h">X-RateLimit-Reset</InlineCode>, 'Unix timestamp when limit resets'],
|
||||
]}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section id="endpoints" className="mb-12">
|
||||
<SectionHeader level={2} id="endpoints">
|
||||
Endpoints
|
||||
</SectionHeader>
|
||||
|
||||
<LinkCardGrid columns={2}>
|
||||
<LinkCard
|
||||
href="/docs/api/generations"
|
||||
title="Generations"
|
||||
description="Create and manage AI image generations"
|
||||
accent="primary"
|
||||
/>
|
||||
<LinkCard
|
||||
href="/docs/api/images"
|
||||
title="Images"
|
||||
description="Upload and organize images"
|
||||
accent="secondary"
|
||||
/>
|
||||
<LinkCard
|
||||
href="/docs/api/flows"
|
||||
title="Flows"
|
||||
description="Manage generation chains"
|
||||
accent="primary"
|
||||
/>
|
||||
<LinkCard
|
||||
href="/docs/api/live-scopes"
|
||||
title="Live Scopes"
|
||||
description="Control live URL generation"
|
||||
accent="secondary"
|
||||
/>
|
||||
</LinkCardGrid>
|
||||
</section>
|
||||
</DocPage>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,226 +0,0 @@
|
|||
'use client';
|
||||
|
||||
/**
|
||||
* API Reference: Text to Image
|
||||
*
|
||||
* Refactored to use DocPage component for consistent layout
|
||||
* Layout handles SubsectionNav and Left Sidebar
|
||||
* DocPage handles Breadcrumb, Article structure, Next Steps, and TOC
|
||||
* This page provides only the content (Hero + sections)
|
||||
*/
|
||||
|
||||
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 { InteractiveAPIWidget } from '@/components/docs/blocks/InteractiveAPIWidget';
|
||||
import {
|
||||
Hero,
|
||||
SectionHeader,
|
||||
InlineCode,
|
||||
EndpointCard,
|
||||
} from '@/components/docs/blocks';
|
||||
|
||||
const tocItems = [
|
||||
{ id: 'overview', text: 'Overview', level: 2 },
|
||||
{ id: 'endpoint', text: 'Endpoint', level: 2 },
|
||||
{ id: 'parameters', text: 'Parameters', level: 2 },
|
||||
{ id: 'response', text: 'Response', level: 2 },
|
||||
{ id: 'error-codes', text: 'Error Codes', level: 2 },
|
||||
{ id: 'interactive', text: 'Try It Live', level: 2 },
|
||||
{ id: 'next-steps', text: 'Next Steps', level: 2 },
|
||||
];
|
||||
|
||||
const parameters = [
|
||||
{ name: 'prompt', type: 'string', required: true, description: 'Text description of the image to generate' },
|
||||
{ name: 'filename', type: 'string', required: false, description: 'Output filename (without extension)' },
|
||||
{ name: 'aspectRatio', type: 'string', required: false, description: 'Image aspect ratio: "1:1", "16:9", "9:16", "4:3"' },
|
||||
{ name: 'autoEnhance', type: 'boolean', required: false, description: 'Enable AI prompt enhancement for better results' },
|
||||
];
|
||||
|
||||
export default function TextToImageAPIPage() {
|
||||
return (
|
||||
<DocPage
|
||||
breadcrumbItems={[
|
||||
{ label: 'Documentation', href: '/docs' },
|
||||
{ label: 'API Reference', href: '/docs/api' },
|
||||
{ label: 'Text to Image' },
|
||||
]}
|
||||
tocItems={tocItems}
|
||||
nextSteps={{
|
||||
links: [
|
||||
{
|
||||
href: '/docs/api/upload',
|
||||
title: 'Upload API',
|
||||
description: 'Learn how to upload reference images for image-to-image generation.',
|
||||
accent: 'primary',
|
||||
},
|
||||
{
|
||||
href: '/docs/guides/error-handling',
|
||||
title: 'Error Handling',
|
||||
description: 'Best practices for handling errors and retries in production.',
|
||||
accent: 'secondary',
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
|
||||
{/* Hero Section */}
|
||||
<Hero
|
||||
title="Text to Image"
|
||||
subtitle="Generate high-quality images from text prompts using AI-powered models."
|
||||
/>
|
||||
|
||||
{/* Overview */}
|
||||
<section id="overview" className="mb-12">
|
||||
<SectionHeader level={2} id="overview">
|
||||
Overview
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-4">
|
||||
The Text to Image endpoint allows you to generate images from natural language descriptions.
|
||||
Powered by Google Gemini 2.5 Flash and Imagen 4.0, it produces photorealistic images
|
||||
optimized for your specified requirements.
|
||||
</p>
|
||||
<TipBox variant="compact" type="info">
|
||||
<strong>Tip:</strong> Enable <InlineCode>autoEnhance</InlineCode>
|
||||
to let AI improve your prompts for better image quality.
|
||||
</TipBox>
|
||||
</section>
|
||||
|
||||
{/* Endpoint */}
|
||||
<section id="endpoint" className="mb-12">
|
||||
<SectionHeader level={2} id="endpoint">
|
||||
Endpoint
|
||||
</SectionHeader>
|
||||
<EndpointCard
|
||||
method="POST"
|
||||
endpoint="/api/text-to-image"
|
||||
baseUrl="https://api.banatie.com"
|
||||
/>
|
||||
</section>
|
||||
|
||||
{/* Parameters */}
|
||||
<section id="parameters" className="mb-12">
|
||||
<SectionHeader level={2} id="parameters" className="mb-6">
|
||||
Parameters
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
All parameters should be sent in the request body as JSON.
|
||||
</p>
|
||||
|
||||
<Table
|
||||
headers={['Parameter', 'Type', 'Required', 'Description']}
|
||||
rows={parameters.map((param) => [
|
||||
<InlineCode key="name">{param.name}</InlineCode>,
|
||||
<span key="type" className="text-cyan-400">{param.type}</span>,
|
||||
<span key="required" className={param.required ? 'text-green-400' : 'text-gray-500'}>
|
||||
{param.required ? 'Yes' : 'No'}
|
||||
</span>,
|
||||
param.description,
|
||||
])}
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<TipBox variant="compact" type="info">
|
||||
<strong>Default Values:</strong> If not specified, <InlineCode>filename</InlineCode> is
|
||||
auto-generated, <InlineCode>aspectRatio</InlineCode> defaults
|
||||
to "1:1", and <InlineCode>autoEnhance</InlineCode> is false.
|
||||
</TipBox>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Response */}
|
||||
<section id="response" className="mb-12">
|
||||
<SectionHeader level={2} id="response" className="mb-4">
|
||||
Response
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-4">
|
||||
On success, the API returns a JSON object containing the generated image URL and metadata.
|
||||
</p>
|
||||
|
||||
<CodeBlock
|
||||
code={`{
|
||||
"success": true,
|
||||
"data": {
|
||||
"url": "https://cdn.banatie.com/org/project/generated/2025-01/image.png",
|
||||
"filepath": "org/project/generated/2025-01/image.png",
|
||||
"width": 1024,
|
||||
"height": 1024,
|
||||
"promptEnhancement": {
|
||||
"enhancedPrompt": "A highly detailed, photorealistic...",
|
||||
"wasEnhanced": true
|
||||
}
|
||||
},
|
||||
"metadata": {
|
||||
"generationTime": 3.42,
|
||||
"model": "imagen-4.0"
|
||||
}
|
||||
}`}
|
||||
language="json"
|
||||
filename="Success Response"
|
||||
/>
|
||||
</section>
|
||||
|
||||
{/* Error Codes */}
|
||||
<section id="error-codes" className="mb-12">
|
||||
<SectionHeader level={2} id="error-codes" className="mb-6">
|
||||
Error Codes
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
The API uses standard HTTP status codes and returns descriptive error messages.
|
||||
</p>
|
||||
|
||||
<Table
|
||||
headers={['Status Code', 'Error Type', 'Description']}
|
||||
rows={[
|
||||
[
|
||||
<InlineCode key="code" color="error">400</InlineCode>,
|
||||
'Bad Request',
|
||||
'Missing or invalid parameters in the request body',
|
||||
],
|
||||
[
|
||||
<InlineCode key="code" color="error">401</InlineCode>,
|
||||
'Unauthorized',
|
||||
'Missing or invalid API key in X-API-Key header',
|
||||
],
|
||||
[
|
||||
<InlineCode key="code" color="error">429</InlineCode>,
|
||||
'Rate Limit',
|
||||
'Too many requests. Check rate limit headers for retry timing',
|
||||
],
|
||||
[
|
||||
<InlineCode key="code" color="error">500</InlineCode>,
|
||||
'Server Error',
|
||||
'Internal server error. Contact support if persists',
|
||||
],
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<TipBox variant="compact" type="warning">
|
||||
<strong>Rate Limits:</strong> Project API keys are limited to 100 requests per hour.
|
||||
Upgrade your plan for higher limits.
|
||||
</TipBox>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Interactive Widget */}
|
||||
<section id="interactive" className="mb-12">
|
||||
<SectionHeader level={2} id="interactive" className="mb-4">
|
||||
Try It Live
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Test the API directly from this page. Enter your API key and customize the parameters below.
|
||||
</p>
|
||||
|
||||
<InteractiveAPIWidget
|
||||
endpoint="/api/text-to-image"
|
||||
method="POST"
|
||||
description="Generate an image from a text prompt"
|
||||
parameters={parameters}
|
||||
/>
|
||||
</section>
|
||||
|
||||
</DocPage>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
'use client';
|
||||
|
||||
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 {
|
||||
Hero,
|
||||
SectionHeader,
|
||||
InlineCode,
|
||||
} from '@/components/docs/blocks';
|
||||
|
||||
const tocItems = [
|
||||
{ id: 'early-access', text: 'Early Access', level: 2 },
|
||||
{ id: 'using-your-api-key', text: 'Using Your API Key', level: 2 },
|
||||
{ id: 'key-types', text: 'Key Types', level: 2 },
|
||||
{ id: 'next-steps', text: 'Next Steps', level: 2 },
|
||||
];
|
||||
|
||||
export default function AuthenticationPage() {
|
||||
return (
|
||||
<DocPage
|
||||
breadcrumbItems={[
|
||||
{ label: 'Documentation', href: '/docs' },
|
||||
{ label: 'Authentication' },
|
||||
]}
|
||||
tocItems={tocItems}
|
||||
nextSteps={{
|
||||
links: [
|
||||
{
|
||||
href: '/docs/generation',
|
||||
title: 'Start Generating',
|
||||
description: 'Create your first AI-generated image.',
|
||||
accent: 'primary',
|
||||
},
|
||||
{
|
||||
href: '/docs/api',
|
||||
title: 'API Reference',
|
||||
description: 'Full endpoint documentation.',
|
||||
accent: 'secondary',
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
<Hero
|
||||
title="Authentication"
|
||||
subtitle="How to authenticate with Banatie API using API keys."
|
||||
/>
|
||||
|
||||
<section id="early-access" className="mb-12">
|
||||
<SectionHeader level={2} id="early-access">
|
||||
Early Access
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
We're currently in early access phase. API keys are issued personally via email.
|
||||
</p>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
<strong className="text-white">To request access:</strong> Sign up at <a href="https://banatie.app" className="text-purple-400 hover:underline">banatie.app</a>. We'll send your API key within 24 hours.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="using-your-api-key" className="mb-12">
|
||||
<SectionHeader level={2} id="using-your-api-key">
|
||||
Using Your API Key
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
All API requests require the <InlineCode>X-API-Key</InlineCode> header:
|
||||
</p>
|
||||
|
||||
<CodeBlock
|
||||
code={`curl -X POST https://api.banatie.app/api/v1/generations \\
|
||||
-H "X-API-Key: your_key_here" \\
|
||||
-H "Content-Type: application/json" \\
|
||||
-d '{"prompt": "a sunset over the ocean"}'`}
|
||||
language="bash"
|
||||
filename="Authenticated Request"
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<TipBox variant="prominent" type="warning">
|
||||
<strong className="text-amber-300">Keep your API key secure.</strong> Don't commit it to version control or expose it in client-side code. Use environment variables in your applications.
|
||||
</TipBox>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="key-types" className="mb-12">
|
||||
<SectionHeader level={2} id="key-types">
|
||||
Key Types
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Banatie uses two types of API keys:
|
||||
</p>
|
||||
|
||||
<Table
|
||||
headers={['Type', 'Permissions', 'Expiration', 'Use Case']}
|
||||
rows={[
|
||||
[
|
||||
<InlineCode key="t">Project Key</InlineCode>,
|
||||
'Image generation, uploads, images',
|
||||
<span key="e" className="text-amber-400">90 days</span>,
|
||||
'Your application integration',
|
||||
],
|
||||
[
|
||||
<InlineCode key="t">Master Key</InlineCode>,
|
||||
'Full admin access, key management',
|
||||
<span key="e" className="text-green-400">Never expires</span>,
|
||||
'Server-side admin operations',
|
||||
],
|
||||
]}
|
||||
/>
|
||||
|
||||
<p className="text-gray-300 leading-relaxed mt-6">
|
||||
You'll receive a Project Key for your application. Master Keys are for administrative operations — you probably don't need one.
|
||||
</p>
|
||||
|
||||
<div className="mt-6">
|
||||
<TipBox variant="compact" type="info">
|
||||
API key management dashboard coming soon. For now, contact us if you need to rotate your key.
|
||||
</TipBox>
|
||||
</div>
|
||||
</section>
|
||||
</DocPage>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,263 @@
|
|||
'use client';
|
||||
|
||||
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 {
|
||||
Hero,
|
||||
SectionHeader,
|
||||
InlineCode,
|
||||
ResponseBlock,
|
||||
} from '@/components/docs/blocks';
|
||||
|
||||
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 (
|
||||
<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>1:1</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>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,313 +0,0 @@
|
|||
'use client';
|
||||
|
||||
/**
|
||||
* Authentication Guide
|
||||
*
|
||||
* Refactored to use DocPage component for consistent layout
|
||||
* Layout handles SubsectionNav and Left Sidebar
|
||||
* DocPage handles Breadcrumb, Article structure, Next Steps, and TOC
|
||||
* This page provides only the content (Hero + sections)
|
||||
*/
|
||||
|
||||
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 {
|
||||
Hero,
|
||||
SectionHeader,
|
||||
InlineCode,
|
||||
} from '@/components/docs/blocks';
|
||||
|
||||
const tocItems = [
|
||||
{ id: 'overview', text: 'Overview', level: 2 },
|
||||
{ id: 'api-keys', text: 'API Keys', level: 2 },
|
||||
{ id: 'key-types', text: 'Key Types', level: 3 },
|
||||
{ id: 'creating-keys', text: 'Creating Keys', level: 3 },
|
||||
{ id: 'using-keys', text: 'Using API Keys', level: 2 },
|
||||
{ id: 'rate-limits', text: 'Rate Limits', level: 2 },
|
||||
{ id: 'security', text: 'Security Best Practices', level: 2 },
|
||||
{ id: 'next-steps', text: 'Next Steps', level: 2 },
|
||||
];
|
||||
|
||||
export default function AuthenticationGuidePage() {
|
||||
return (
|
||||
<DocPage
|
||||
breadcrumbItems={[
|
||||
{ label: 'Documentation', href: '/docs' },
|
||||
{ label: 'Guides', href: '/docs/guides' },
|
||||
{ label: 'Authentication' },
|
||||
]}
|
||||
tocItems={tocItems}
|
||||
nextSteps={{
|
||||
links: [
|
||||
{
|
||||
href: '/docs/api/text-to-image',
|
||||
title: 'Start Generating Images',
|
||||
description: 'Explore the Text to Image API and start building your integration.',
|
||||
accent: 'primary',
|
||||
},
|
||||
{
|
||||
href: '/docs/guides/error-handling',
|
||||
title: 'Error Handling Guide',
|
||||
description: 'Learn how to handle authentication errors and implement retry logic.',
|
||||
accent: 'secondary',
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
|
||||
{/* Hero Section */}
|
||||
<Hero
|
||||
title="Authentication"
|
||||
subtitle="Learn how to authenticate with the Banatie API using API keys, manage rate limits, and implement security best practices."
|
||||
/>
|
||||
|
||||
{/* Overview */}
|
||||
<section id="overview" className="mb-12">
|
||||
<SectionHeader level={2} id="overview" className="mb-4">
|
||||
Overview
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Banatie uses API keys to authenticate requests. All API endpoints require authentication
|
||||
via the <InlineCode>X-API-Key</InlineCode> header.
|
||||
API keys are tied to organizations and projects, providing fine-grained access control.
|
||||
</p>
|
||||
|
||||
<TipBox variant="compact" type="info">
|
||||
<strong>Quick Start:</strong> New to API authentication? Check out our{' '}
|
||||
<a href="/docs" className="text-purple-400 hover:underline">
|
||||
Getting Started guide
|
||||
</a>{' '}
|
||||
for a step-by-step walkthrough.
|
||||
</TipBox>
|
||||
</section>
|
||||
|
||||
{/* API Keys */}
|
||||
<section id="api-keys" className="mb-12">
|
||||
<SectionHeader level={2} id="api-keys" className="mb-6">
|
||||
API Keys
|
||||
</SectionHeader>
|
||||
|
||||
<div id="key-types" className="mb-8">
|
||||
<SectionHeader level={3} id="key-types" className="mb-4">
|
||||
Key Types
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Banatie supports two types of API keys, each with different permissions and use cases:
|
||||
</p>
|
||||
|
||||
<Table
|
||||
headers={['Key Type', 'Permissions', 'Expiration', 'Use Case']}
|
||||
rows={[
|
||||
[
|
||||
<InlineCode key="type">Master Key</InlineCode>,
|
||||
'Full admin access, can create/revoke keys',
|
||||
<span key="exp" className="text-green-400">Never expires</span>,
|
||||
'Server-side admin operations, key management',
|
||||
],
|
||||
[
|
||||
<InlineCode key="type" color="success">Project Key</InlineCode>,
|
||||
'Image generation only',
|
||||
<span key="exp" className="text-amber-400">90 days</span>,
|
||||
'Application integration, API requests',
|
||||
],
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<TipBox variant="prominent" type="warning">
|
||||
<strong className="text-amber-300">Master Key Security:</strong> Master keys have full
|
||||
administrative access and never expire. Store them securely in encrypted vaults or
|
||||
secret managers. Never expose master keys in client-side code, logs, or version control.
|
||||
Use project keys for application integration whenever possible.
|
||||
</TipBox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="creating-keys" className="mb-8">
|
||||
<SectionHeader level={3} id="creating-keys" className="mb-4">
|
||||
Creating Keys
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-4">
|
||||
For first-time setup, use the bootstrap endpoint to create your initial master key:
|
||||
</p>
|
||||
|
||||
<CodeBlock
|
||||
code={`# Bootstrap your first master key (one-time only)
|
||||
curl -X POST https://api.banatie.com/api/bootstrap/initial-key
|
||||
|
||||
# Response
|
||||
{
|
||||
"success": true,
|
||||
"data": {
|
||||
"key": "bnt_master_abc123...",
|
||||
"type": "master"
|
||||
}
|
||||
}`}
|
||||
language="bash"
|
||||
filename="Bootstrap Master Key"
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<p className="text-gray-300 leading-relaxed mb-4">
|
||||
Once you have a master key, you can create project keys for your applications:
|
||||
</p>
|
||||
|
||||
<CodeBlock
|
||||
code={`# Create a project key with master key authentication
|
||||
curl -X POST https://api.banatie.com/api/admin/keys \\
|
||||
-H "X-API-Key: YOUR_MASTER_KEY" \\
|
||||
-H "Content-Type: application/json" \\
|
||||
-d '{
|
||||
"type": "project",
|
||||
"projectId": "my-app",
|
||||
"name": "Production API Key"
|
||||
}'
|
||||
|
||||
# Response
|
||||
{
|
||||
"success": true,
|
||||
"data": {
|
||||
"key": "bnt_project_xyz789...",
|
||||
"type": "project",
|
||||
"expiresAt": "2025-04-14T00:00:00Z"
|
||||
}
|
||||
}`}
|
||||
language="bash"
|
||||
filename="Create Project Key"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Using API Keys */}
|
||||
<section id="using-keys" className="mb-12">
|
||||
<SectionHeader level={2} id="using-keys" className="mb-4">
|
||||
Using API Keys
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-4">
|
||||
Include your API key in the <InlineCode>X-API-Key</InlineCode> header
|
||||
with every request:
|
||||
</p>
|
||||
|
||||
<CodeBlock
|
||||
code={`# Example: Generate an image with project key
|
||||
curl -X POST https://api.banatie.com/api/text-to-image \\
|
||||
-H "X-API-Key: bnt_project_xyz789..." \\
|
||||
-H "Content-Type: application/json" \\
|
||||
-d '{
|
||||
"prompt": "a sunset over the ocean",
|
||||
"aspectRatio": "16:9"
|
||||
}'`}
|
||||
language="bash"
|
||||
filename="Authenticated Request"
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<TipBox variant="compact" type="info">
|
||||
<strong>Environment Variables:</strong> Store API keys in environment variables, not
|
||||
hardcoded in your application. Example:{' '}
|
||||
<InlineCode>BANATIE_API_KEY</InlineCode>
|
||||
</TipBox>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Rate Limits */}
|
||||
<section id="rate-limits" className="mb-12">
|
||||
<SectionHeader level={2} id="rate-limits" className="mb-6">
|
||||
Rate Limits
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
API keys are subject to rate limits to ensure fair usage and system stability. Limits
|
||||
vary by key type and plan tier:
|
||||
</p>
|
||||
|
||||
<Table
|
||||
headers={['Key Type', 'Rate Limit', 'Reset Window', 'Upgrade Available']}
|
||||
rows={[
|
||||
[
|
||||
<InlineCode key="type">Master Key</InlineCode>,
|
||||
<span key="limit" className="text-green-400">Unlimited</span>,
|
||||
'N/A',
|
||||
'N/A',
|
||||
],
|
||||
[
|
||||
<InlineCode key="type" color="success">Project Key (Free)</InlineCode>,
|
||||
<span key="limit" className="text-amber-400">100 requests/hour</span>,
|
||||
'1 hour rolling',
|
||||
<a key="upgrade" href="/pricing" className="text-purple-400 hover:underline">Yes</a>,
|
||||
],
|
||||
[
|
||||
<InlineCode key="type" color="success">Project Key (Pro)</InlineCode>,
|
||||
<span key="limit" className="text-green-400">1,000 requests/hour</span>,
|
||||
'1 hour rolling',
|
||||
<a key="upgrade" href="/pricing" className="text-purple-400 hover:underline">Yes</a>,
|
||||
],
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<p className="text-gray-300 leading-relaxed mb-4">
|
||||
When you exceed rate limits, the API returns a <InlineCode color="error">429 Too Many Requests</InlineCode> status.
|
||||
Check the response headers for retry timing:
|
||||
</p>
|
||||
|
||||
<CodeBlock
|
||||
code={`# Rate limit response headers
|
||||
X-RateLimit-Limit: 100
|
||||
X-RateLimit-Remaining: 0
|
||||
X-RateLimit-Reset: 1704153600
|
||||
|
||||
# Error response body
|
||||
{
|
||||
"error": "Rate limit exceeded",
|
||||
"retryAfter": 3600
|
||||
}`}
|
||||
language="bash"
|
||||
filename="Rate Limit Response"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Security Best Practices */}
|
||||
<section id="security" className="mb-12">
|
||||
<SectionHeader level={2} id="security" className="mb-6">
|
||||
Security Best Practices
|
||||
</SectionHeader>
|
||||
|
||||
<TipBox variant="prominent" type="warning">
|
||||
<strong className="text-amber-300">Critical Security Guidelines:</strong>
|
||||
<ul className="mt-3 space-y-2 list-disc list-inside">
|
||||
<li>Never commit API keys to version control systems (Git, SVN, etc.)</li>
|
||||
<li>Store keys in environment variables or secret management services</li>
|
||||
<li>Use project keys in applications, reserve master keys for admin operations</li>
|
||||
<li>Rotate keys regularly, especially after team member changes</li>
|
||||
<li>Implement server-side API calls for production applications</li>
|
||||
<li>Monitor API key usage in your dashboard for suspicious activity</li>
|
||||
</ul>
|
||||
</TipBox>
|
||||
|
||||
<div className="mt-6">
|
||||
<h3 className="text-lg font-semibold text-white mb-3">Key Rotation Example</h3>
|
||||
<CodeBlock
|
||||
code={`# 1. Create new project key
|
||||
curl -X POST https://api.banatie.com/api/admin/keys \\
|
||||
-H "X-API-Key: YOUR_MASTER_KEY" \\
|
||||
-d '{"type": "project", "projectId": "my-app", "name": "New Key"}'
|
||||
|
||||
# 2. Update your application to use new key
|
||||
export BANATIE_API_KEY="bnt_project_new..."
|
||||
|
||||
# 3. Revoke old key
|
||||
curl -X DELETE https://api.banatie.com/api/admin/keys/OLD_KEY_ID \\
|
||||
-H "X-API-Key: YOUR_MASTER_KEY"`}
|
||||
language="bash"
|
||||
filename="Key Rotation Process"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</DocPage>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,214 @@
|
|||
'use client';
|
||||
|
||||
import { TipBox } from '@/components/docs/shared/TipBox';
|
||||
import { CodeBlock } from '@/components/docs/shared/CodeBlock';
|
||||
import { DocPage } from '@/components/docs/layout/DocPage';
|
||||
import {
|
||||
Hero,
|
||||
SectionHeader,
|
||||
InlineCode,
|
||||
ResponseBlock,
|
||||
} from '@/components/docs/blocks';
|
||||
|
||||
const tocItems = [
|
||||
{ id: 'image-urls', text: 'Image URLs', level: 2 },
|
||||
{ id: 'uploading-images', text: 'Uploading Images', level: 2 },
|
||||
{ id: 'listing-images', text: 'Listing & Getting Images', level: 2 },
|
||||
{ id: 'aliases', text: 'Aliases', level: 2 },
|
||||
{ id: 'deleting-images', text: 'Deleting Images', level: 2 },
|
||||
{ id: 'next-steps', text: 'Next Steps', level: 2 },
|
||||
];
|
||||
|
||||
export default function ImagesPage() {
|
||||
return (
|
||||
<DocPage
|
||||
breadcrumbItems={[
|
||||
{ label: 'Documentation', href: '/docs' },
|
||||
{ label: 'Working with Images' },
|
||||
]}
|
||||
tocItems={tocItems}
|
||||
nextSteps={{
|
||||
links: [
|
||||
{
|
||||
href: '/docs/api/images',
|
||||
title: 'API Reference: Images',
|
||||
description: 'Full endpoint documentation for images.',
|
||||
accent: 'primary',
|
||||
},
|
||||
{
|
||||
href: '/docs/generation',
|
||||
title: 'Image Generation',
|
||||
description: 'Use your images as references in generations.',
|
||||
accent: 'secondary',
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
<Hero
|
||||
title="Working with Images"
|
||||
subtitle="Upload, manage, and organize your images. CDN delivery, aliases, and image management."
|
||||
/>
|
||||
|
||||
<section id="image-urls" className="mb-12">
|
||||
<SectionHeader level={2} id="image-urls">
|
||||
Image URLs
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
All images are served via CDN with this URL structure:
|
||||
</p>
|
||||
|
||||
<CodeBlock
|
||||
code={`https://cdn.banatie.app/{org}/{project}/img/{imageId}`}
|
||||
language="text"
|
||||
filename="CDN URL Format"
|
||||
/>
|
||||
|
||||
<p className="text-gray-300 leading-relaxed mt-6">
|
||||
URLs are permanent, fast, and cached globally. Use them directly in your applications.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="uploading-images" className="mb-12">
|
||||
<SectionHeader level={2} id="uploading-images">
|
||||
Uploading Images
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Upload your own images for use as brand assets, references, or logos:
|
||||
</p>
|
||||
|
||||
<CodeBlock
|
||||
code={`curl -X POST https://api.banatie.app/api/v1/images/upload \\
|
||||
-H "X-API-Key: YOUR_API_KEY" \\
|
||||
-F "file=@your-image.png" \\
|
||||
-F "alias=@brand-logo"`}
|
||||
language="bash"
|
||||
filename="Upload Image"
|
||||
/>
|
||||
|
||||
<p className="text-gray-300 leading-relaxed mt-6 mb-4">
|
||||
Response includes the CDN URL and image details:
|
||||
</p>
|
||||
|
||||
<ResponseBlock
|
||||
status="success"
|
||||
statusCode={201}
|
||||
statusLabel="201 Created"
|
||||
content={`{
|
||||
"success": true,
|
||||
"data": {
|
||||
"id": "550e8400-e29b-41d4-a716-446655440000",
|
||||
"storageUrl": "https://cdn.banatie.app/my-org/my-project/img/550e8400-e29b-41d4-a716-446655440000",
|
||||
"alias": "@brand-logo",
|
||||
"source": "uploaded",
|
||||
"width": 512,
|
||||
"height": 512,
|
||||
"mimeType": "image/png",
|
||||
"fileSize": 24576
|
||||
}
|
||||
}`}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section id="listing-images" className="mb-12">
|
||||
<SectionHeader level={2} id="listing-images">
|
||||
Listing & Getting Images
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
List all images in your project:
|
||||
</p>
|
||||
|
||||
<CodeBlock
|
||||
code={`curl https://api.banatie.app/api/v1/images \\
|
||||
-H "X-API-Key: YOUR_API_KEY"`}
|
||||
language="bash"
|
||||
filename="List Images"
|
||||
/>
|
||||
|
||||
<p className="text-gray-300 leading-relaxed mt-6 mb-6">
|
||||
Get a specific image by ID or alias:
|
||||
</p>
|
||||
|
||||
<CodeBlock
|
||||
code={`# By UUID
|
||||
curl https://api.banatie.app/api/v1/images/550e8400-e29b-41d4-a716-446655440000 \\
|
||||
-H "X-API-Key: YOUR_API_KEY"
|
||||
|
||||
# By alias
|
||||
curl https://api.banatie.app/api/v1/images/@brand-logo \\
|
||||
-H "X-API-Key: YOUR_API_KEY"`}
|
||||
language="bash"
|
||||
filename="Get Image"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section id="aliases" className="mb-12">
|
||||
<SectionHeader level={2} id="aliases">
|
||||
Aliases
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Assign memorable names to images. Aliases start with <InlineCode>@</InlineCode> and make it easy to reference images without remembering UUIDs.
|
||||
</p>
|
||||
|
||||
<CodeBlock
|
||||
code={`curl -X PUT https://api.banatie.app/api/v1/images/550e8400-e29b-41d4-a716-446655440000/alias \\
|
||||
-H "X-API-Key: YOUR_API_KEY" \\
|
||||
-H "Content-Type: application/json" \\
|
||||
-d '{"alias": "@hero-background"}'`}
|
||||
language="bash"
|
||||
filename="Assign Alias"
|
||||
/>
|
||||
|
||||
<p className="text-gray-300 leading-relaxed mt-6 mb-6">
|
||||
Access images via CDN using their alias:
|
||||
</p>
|
||||
|
||||
<CodeBlock
|
||||
code={`https://cdn.banatie.app/my-org/my-project/img/@hero-background`}
|
||||
language="text"
|
||||
filename="CDN Alias URL"
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<TipBox variant="compact" type="info">
|
||||
<strong>Pro Tip:</strong> Use aliases for brand assets like <InlineCode>@logo</InlineCode>, <InlineCode>@brand-colors</InlineCode>. Reference them in generations without remembering UUIDs.
|
||||
</TipBox>
|
||||
</div>
|
||||
|
||||
<p className="text-gray-300 leading-relaxed mt-6 mb-4">
|
||||
Remove an alias by setting it to null:
|
||||
</p>
|
||||
|
||||
<CodeBlock
|
||||
code={`curl -X PUT https://api.banatie.app/api/v1/images/550e8400-e29b-41d4-a716-446655440000/alias \\
|
||||
-H "X-API-Key: YOUR_API_KEY" \\
|
||||
-H "Content-Type: application/json" \\
|
||||
-d '{"alias": null}'`}
|
||||
language="bash"
|
||||
filename="Remove Alias"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section id="deleting-images" className="mb-12">
|
||||
<SectionHeader level={2} id="deleting-images">
|
||||
Deleting Images
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Delete an image by ID or alias. This permanently removes the image from storage.
|
||||
</p>
|
||||
|
||||
<CodeBlock
|
||||
code={`curl -X DELETE https://api.banatie.app/api/v1/images/550e8400-e29b-41d4-a716-446655440000 \\
|
||||
-H "X-API-Key: YOUR_API_KEY"`}
|
||||
language="bash"
|
||||
filename="Delete Image"
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<TipBox variant="compact" type="warning">
|
||||
Deletion is permanent. The image file and all references are removed.
|
||||
</TipBox>
|
||||
</div>
|
||||
</section>
|
||||
</DocPage>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,258 @@
|
|||
'use client';
|
||||
|
||||
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 {
|
||||
Hero,
|
||||
SectionHeader,
|
||||
InlineCode,
|
||||
} from '@/components/docs/blocks';
|
||||
|
||||
const tocItems = [
|
||||
{ id: 'the-concept', text: 'The Concept', level: 2 },
|
||||
{ id: 'url-format', text: 'URL Format', level: 2 },
|
||||
{ id: 'try-it', text: 'Try It', level: 2 },
|
||||
{ id: 'caching-behavior', text: 'Caching Behavior', level: 2 },
|
||||
{ id: 'scopes', text: 'Scopes', level: 2 },
|
||||
{ id: 'rate-limits', text: 'Rate Limits', level: 2 },
|
||||
{ id: 'use-cases', text: 'Use Cases', level: 2 },
|
||||
{ id: 'next-steps', text: 'Next Steps', level: 2 },
|
||||
];
|
||||
|
||||
export default function LiveUrlsPage() {
|
||||
return (
|
||||
<DocPage
|
||||
breadcrumbItems={[
|
||||
{ label: 'Documentation', href: '/docs' },
|
||||
{ label: 'Live URLs' },
|
||||
]}
|
||||
tocItems={tocItems}
|
||||
nextSteps={{
|
||||
links: [
|
||||
{
|
||||
href: '/docs/api/live-scopes',
|
||||
title: 'API Reference: Live Scopes',
|
||||
description: 'Manage scopes and generation limits.',
|
||||
accent: 'primary',
|
||||
},
|
||||
{
|
||||
href: '/docs/generation',
|
||||
title: 'Image Generation',
|
||||
description: 'Full control via the generations API.',
|
||||
accent: 'secondary',
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
<Hero
|
||||
title="Live URLs"
|
||||
subtitle="Generate images directly from URL parameters. No API calls needed — just use the URL in your HTML."
|
||||
/>
|
||||
|
||||
<section id="the-concept" className="mb-12">
|
||||
<SectionHeader level={2} id="the-concept">
|
||||
The Concept
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-4">
|
||||
Put your prompt in a URL. Use it directly in an <InlineCode><img src="..."></InlineCode> tag.
|
||||
</p>
|
||||
<p className="text-gray-300 leading-relaxed">
|
||||
First request generates the image. All subsequent requests serve it from cache instantly.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="url-format" className="mb-12">
|
||||
<SectionHeader level={2} id="url-format">
|
||||
URL Format
|
||||
</SectionHeader>
|
||||
|
||||
<CodeBlock
|
||||
code={`https://cdn.banatie.app/{org}/{project}/live/{scope}?prompt=...&aspectRatio=...`}
|
||||
language="text"
|
||||
filename="Live URL Format"
|
||||
/>
|
||||
|
||||
<p className="text-gray-300 leading-relaxed mt-6 mb-4">
|
||||
Query parameters:
|
||||
</p>
|
||||
|
||||
<Table
|
||||
headers={['Parameter', 'Required', 'Description']}
|
||||
rows={[
|
||||
[
|
||||
<InlineCode key="p">prompt</InlineCode>,
|
||||
<span key="r" className="text-green-400">Yes</span>,
|
||||
'Text description of the image to generate',
|
||||
],
|
||||
[
|
||||
<InlineCode key="p">aspectRatio</InlineCode>,
|
||||
<span key="r" className="text-gray-500">No</span>,
|
||||
'Image ratio: 1:1, 16:9, 9:16, 3:2 (default: 1:1)',
|
||||
],
|
||||
[
|
||||
<InlineCode key="p">autoEnhance</InlineCode>,
|
||||
<span key="r" className="text-gray-500">No</span>,
|
||||
'Enable prompt enhancement (default: false)',
|
||||
],
|
||||
[
|
||||
<InlineCode key="p">template</InlineCode>,
|
||||
<span key="r" className="text-gray-500">No</span>,
|
||||
'Enhancement template to use',
|
||||
],
|
||||
]}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section id="try-it" className="mb-12">
|
||||
<SectionHeader level={2} id="try-it">
|
||||
Try It
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Open this URL in your browser:
|
||||
</p>
|
||||
|
||||
<CodeBlock
|
||||
code={`https://cdn.banatie.app/my-org/my-project/live/demo?prompt=a+friendly+robot+waving+hello&aspectRatio=16:9`}
|
||||
language="text"
|
||||
filename="Example Live URL"
|
||||
/>
|
||||
|
||||
<p className="text-gray-300 leading-relaxed mt-6 mb-4">
|
||||
Or use it directly in HTML:
|
||||
</p>
|
||||
|
||||
<CodeBlock
|
||||
code={`<img
|
||||
src="https://cdn.banatie.app/my-org/my-project/live/hero?prompt=mountain+landscape+at+sunset&aspectRatio=16:9"
|
||||
alt="Mountain landscape"
|
||||
/>`}
|
||||
language="html"
|
||||
filename="HTML Usage"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section id="caching-behavior" className="mb-12">
|
||||
<SectionHeader level={2} id="caching-behavior">
|
||||
Caching Behavior
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
The response includes an <InlineCode>X-Cache-Status</InlineCode> header:
|
||||
</p>
|
||||
|
||||
<Table
|
||||
headers={['Status', 'Meaning', 'Response Time']}
|
||||
rows={[
|
||||
[
|
||||
<InlineCode key="s" color="success">HIT</InlineCode>,
|
||||
'Image served from cache',
|
||||
'Instant (milliseconds)',
|
||||
],
|
||||
[
|
||||
<InlineCode key="s">MISS</InlineCode>,
|
||||
'New image generated',
|
||||
'A few seconds',
|
||||
],
|
||||
]}
|
||||
/>
|
||||
|
||||
<p className="text-gray-300 leading-relaxed mt-6">
|
||||
Cache hits are unlimited and don't count toward rate limits. Only new generations (cache MISS) are rate limited.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="scopes" className="mb-12">
|
||||
<SectionHeader level={2} id="scopes">
|
||||
Scopes
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Scopes organize your live generations. Each scope has its own generation limit.
|
||||
</p>
|
||||
|
||||
<CodeBlock
|
||||
code={`# Different scopes for different purposes
|
||||
https://cdn.banatie.app/my-org/my-project/live/hero-section?prompt=...
|
||||
https://cdn.banatie.app/my-org/my-project/live/product-gallery?prompt=...
|
||||
https://cdn.banatie.app/my-org/my-project/live/blog-images?prompt=...`}
|
||||
language="text"
|
||||
filename="Scope Examples"
|
||||
/>
|
||||
|
||||
<p className="text-gray-300 leading-relaxed mt-6">
|
||||
Scopes are auto-created on first use. You can also pre-configure them via the API to set custom limits.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="rate-limits" className="mb-12">
|
||||
<SectionHeader level={2} id="rate-limits">
|
||||
Rate Limits
|
||||
</SectionHeader>
|
||||
|
||||
<Table
|
||||
headers={['Limit Type', 'Value', 'Notes']}
|
||||
rows={[
|
||||
[
|
||||
'Per IP',
|
||||
<span key="v" className="text-amber-400">10 new generations/hour</span>,
|
||||
'Only applies to cache MISS',
|
||||
],
|
||||
[
|
||||
'Per Scope',
|
||||
<span key="v" className="text-amber-400">30 generations</span>,
|
||||
'Configurable via API',
|
||||
],
|
||||
[
|
||||
'Cache Hits',
|
||||
<span key="v" className="text-green-400">Unlimited</span>,
|
||||
'No limits on cached images',
|
||||
],
|
||||
]}
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<TipBox variant="compact" type="info">
|
||||
Rate limits protect the service from abuse. For high-volume needs, use the generations API directly.
|
||||
</TipBox>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="use-cases" className="mb-12">
|
||||
<SectionHeader level={2} id="use-cases">
|
||||
Use Cases
|
||||
</SectionHeader>
|
||||
|
||||
<ul className="space-y-4 text-gray-300">
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="text-purple-400 mt-1">•</span>
|
||||
<div>
|
||||
<strong className="text-white">Dynamic placeholders</strong>
|
||||
<p className="text-gray-400 text-sm mt-1">Generate placeholder images during development that match your design intent.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="text-purple-400 mt-1">•</span>
|
||||
<div>
|
||||
<strong className="text-white">Personalized content</strong>
|
||||
<p className="text-gray-400 text-sm mt-1">Create unique images based on user data or preferences.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="text-purple-400 mt-1">•</span>
|
||||
<div>
|
||||
<strong className="text-white">Rapid prototyping</strong>
|
||||
<p className="text-gray-400 text-sm mt-1">Test different visuals without writing backend code.</p>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="text-purple-400 mt-1">•</span>
|
||||
<div>
|
||||
<strong className="text-white">HTML emails</strong>
|
||||
<p className="text-gray-400 text-sm mt-1">Include dynamic images in email templates with just a URL.</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</DocPage>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,14 +1,5 @@
|
|||
'use client';
|
||||
|
||||
/**
|
||||
* Getting Started Page - Production Documentation
|
||||
*
|
||||
* Refactored to use DocPage component for consistent layout
|
||||
* Layout handles SubsectionNav and Left Sidebar
|
||||
* DocPage handles Breadcrumb, Article structure, Next Steps, and TOC
|
||||
* This page provides only the content (Hero + sections)
|
||||
*/
|
||||
|
||||
import { TipBox } from '@/components/docs/shared/TipBox';
|
||||
import { CodeBlock } from '@/components/docs/shared/CodeBlock';
|
||||
import { DocPage } from '@/components/docs/layout/DocPage';
|
||||
|
|
@ -16,14 +7,16 @@ import {
|
|||
Hero,
|
||||
SectionHeader,
|
||||
ResponseBlock,
|
||||
LinkCard,
|
||||
LinkCardGrid,
|
||||
} from '@/components/docs/blocks';
|
||||
|
||||
const tocItems = [
|
||||
{ id: 'introduction', text: 'Introduction', level: 2 },
|
||||
{ id: 'quick-start', text: 'Quick Start', level: 2 },
|
||||
{ id: 'installation', text: 'Installation', level: 3 },
|
||||
{ id: 'authentication', text: 'Authentication', level: 3 },
|
||||
{ id: 'first-request', text: 'Your First Request', level: 2 },
|
||||
{ id: 'what-is-banatie', text: 'What is Banatie?', level: 2 },
|
||||
{ id: 'your-first-image', text: 'Your First Image', level: 2 },
|
||||
{ id: 'production-ready', text: 'Production Ready', level: 2 },
|
||||
{ id: 'live-urls', text: 'Live URLs', level: 2 },
|
||||
{ id: 'get-your-api-key', text: 'Get Your API Key', level: 2 },
|
||||
{ id: 'next-steps', text: 'Next Steps', level: 2 },
|
||||
];
|
||||
|
||||
|
|
@ -36,161 +29,167 @@ export default function GettingStartedPage() {
|
|||
]}
|
||||
tocItems={tocItems}
|
||||
nextSteps={{
|
||||
description:
|
||||
'Now that you have generated your first image, explore these resources to build more advanced integrations:',
|
||||
links: [
|
||||
{
|
||||
href: '/docs/api/text-to-image',
|
||||
title: 'API Reference',
|
||||
description: 'Explore all available endpoints, parameters, and response formats.',
|
||||
href: '/docs/generation',
|
||||
title: 'Image Generation',
|
||||
description: 'Aspect ratios, prompt templates, using references.',
|
||||
accent: 'primary',
|
||||
},
|
||||
{
|
||||
href: '/docs/guides/authentication',
|
||||
title: 'Authentication Guide',
|
||||
description: 'Learn about API keys, rate limits, and security best practices.',
|
||||
href: '/docs/images',
|
||||
title: 'Working with Images',
|
||||
description: 'Upload your own, organize with aliases.',
|
||||
accent: 'secondary',
|
||||
},
|
||||
{
|
||||
href: '/docs/live-urls',
|
||||
title: 'Live URLs',
|
||||
description: 'Generate images directly from URL parameters.',
|
||||
accent: 'primary',
|
||||
},
|
||||
{
|
||||
href: '/docs/api',
|
||||
title: 'API Reference',
|
||||
description: 'Full endpoint documentation.',
|
||||
accent: 'secondary',
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
<Hero
|
||||
title="Get Started"
|
||||
subtitle="Generate your first AI image in a few simple steps."
|
||||
/>
|
||||
|
||||
{/* Hero Section */}
|
||||
<Hero
|
||||
title="Getting Started"
|
||||
subtitle="Welcome to the Banatie API documentation. Learn how to integrate AI-powered image generation into your applications in minutes."
|
||||
<section id="what-is-banatie" className="mb-12">
|
||||
<SectionHeader level={2} id="what-is-banatie">
|
||||
What is Banatie?
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-4">
|
||||
Banatie is an image generation API for developers. Send a text prompt, get a production-ready image delivered via CDN.
|
||||
</p>
|
||||
<p className="text-gray-300 leading-relaxed">
|
||||
Simple REST API. Optimized AI models that deliver consistent results. Images ready for production use immediately.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="your-first-image" className="mb-12">
|
||||
<SectionHeader level={2} id="your-first-image">
|
||||
Your First Image
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Once you have your API key, generate an image with a single request:
|
||||
</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 friendly robot waving hello"}'`}
|
||||
language="bash"
|
||||
filename="Generate Image"
|
||||
/>
|
||||
|
||||
{/* Introduction */}
|
||||
<section id="introduction" className="mb-12">
|
||||
<SectionHeader level={2} id="introduction">
|
||||
Introduction
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-4">
|
||||
Banatie is a developer-first API for AI-powered image generation. Built on Google Gemini
|
||||
2.5 Flash and Imagen 4.0, it transforms text prompts and reference images into
|
||||
production-ready visuals.
|
||||
</p>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Whether you are building a content creation platform, e-commerce site, or creative tool,
|
||||
Banatie provides the infrastructure you need to generate high-quality images at scale.
|
||||
</p>
|
||||
<p className="text-gray-300 leading-relaxed mt-6 mb-4">
|
||||
That's it. The response contains your image:
|
||||
</p>
|
||||
|
||||
{/* Compact Tip Box */}
|
||||
<TipBox variant="compact" type="info">
|
||||
<strong>New to API integration?</strong> Start with our{' '}
|
||||
<a href="/docs/examples" className="text-purple-400 hover:underline">
|
||||
code examples
|
||||
</a>{' '}
|
||||
to see common use cases in action.
|
||||
</TipBox>
|
||||
</section>
|
||||
|
||||
{/* Quick Start */}
|
||||
<section id="quick-start" className="mb-12">
|
||||
<SectionHeader level={2} id="quick-start" className="mb-6">
|
||||
Quick Start
|
||||
</SectionHeader>
|
||||
|
||||
<div id="installation" className="mb-8">
|
||||
<SectionHeader level={3} id="installation">
|
||||
Installation
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-4">
|
||||
Banatie is a REST API, so you do not need to install any libraries. However, we provide
|
||||
SDKs for popular languages to make integration easier.
|
||||
</p>
|
||||
|
||||
<CodeBlock
|
||||
code={`# Using npm (JavaScript/TypeScript)
|
||||
npm install @banatie/sdk
|
||||
|
||||
# Using pip (Python)
|
||||
pip install banatie
|
||||
|
||||
# Using Go
|
||||
go get github.com/banatie/sdk-go`}
|
||||
language="bash"
|
||||
filename="Installation"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="authentication" className="mb-8">
|
||||
<SectionHeader level={3} id="authentication">
|
||||
Authentication
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-4">
|
||||
All API requests require an API key. You can create an API key from your dashboard or
|
||||
using the bootstrap endpoint for initial setup.
|
||||
</p>
|
||||
|
||||
{/* Prominent Tip Box for Security Warning */}
|
||||
<div className="mb-6">
|
||||
<TipBox variant="prominent" type="warning">
|
||||
<strong className="text-amber-300">Security Best Practice:</strong> Keep your API keys secure.
|
||||
Never commit them to public repositories or expose them in client-side code. Use environment
|
||||
variables and server-side implementations for production applications.
|
||||
</TipBox>
|
||||
</div>
|
||||
|
||||
<CodeBlock
|
||||
code={`# Create your first API key (one-time bootstrap)
|
||||
curl -X POST https://api.banatie.com/api/bootstrap/initial-key
|
||||
|
||||
# Save the returned key securely
|
||||
export BANATIE_API_KEY="bnt_your_key_here"`}
|
||||
language="bash"
|
||||
filename="Get API Key"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* First Request */}
|
||||
<section id="first-request" className="mb-12">
|
||||
<SectionHeader level={2} id="first-request">
|
||||
Your First Request
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Let's generate your first image! This example uses curl, but you can use any HTTP client
|
||||
or our SDKs.
|
||||
</p>
|
||||
|
||||
<CodeBlock
|
||||
code={`curl -X POST https://api.banatie.com/api/text-to-image \\
|
||||
-H "X-API-Key: YOUR_API_KEY" \\
|
||||
-H "Content-Type: application/json" \\
|
||||
-d '{
|
||||
"prompt": "a serene mountain landscape at sunset",
|
||||
"filename": "mountain_sunset",
|
||||
"aspectRatio": "16:9",
|
||||
"autoEnhance": true
|
||||
}'`}
|
||||
language="bash"
|
||||
filename="Generate Image"
|
||||
/>
|
||||
|
||||
<div className="mt-6">
|
||||
<p className="text-sm font-semibold text-gray-300 mb-3">Expected Response:</p>
|
||||
<ResponseBlock
|
||||
status="success"
|
||||
statusCode={200}
|
||||
statusLabel="✓ 200 Success"
|
||||
content={`{
|
||||
<ResponseBlock
|
||||
status="success"
|
||||
statusCode={200}
|
||||
statusLabel="200 OK"
|
||||
content={`{
|
||||
"success": true,
|
||||
"data": {
|
||||
"url": "https://cdn.banatie.com/org/project/generated/2025-01/mountain_sunset.png",
|
||||
"filepath": "org/project/generated/2025-01/mountain_sunset.png",
|
||||
"width": 1920,
|
||||
"height": 1080,
|
||||
"promptEnhancement": {
|
||||
"enhancedPrompt": "A breathtaking mountain landscape..."
|
||||
"id": "550e8400-e29b-41d4-a716-446655440000",
|
||||
"status": "success",
|
||||
"outputImage": {
|
||||
"storageUrl": "https://cdn.banatie.app/my-org/my-project/img/8a3b2c1d-4e5f-6789-abcd-ef0123456789",
|
||||
"width": 1792,
|
||||
"height": 1008
|
||||
}
|
||||
}
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
/>
|
||||
|
||||
<p className="text-gray-300 leading-relaxed mt-6">
|
||||
Open <code className="text-purple-400">storageUrl</code> in your browser — there's your robot.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="production-ready" className="mb-12">
|
||||
<SectionHeader level={2} id="production-ready">
|
||||
Production Ready
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
The image URL is permanent and served via global CDN. What this means for you:
|
||||
</p>
|
||||
|
||||
<ul className="space-y-3 text-gray-300">
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="text-purple-400 mt-1">•</span>
|
||||
<span><strong className="text-white">Fast access</strong> — images load in milliseconds</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="text-purple-400 mt-1">•</span>
|
||||
<span><strong className="text-white">Edge cached</strong> — served from locations closest to your users</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="text-purple-400 mt-1">•</span>
|
||||
<span><strong className="text-white">Global distribution</strong> — works fast everywhere in the world</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p className="text-gray-300 leading-relaxed mt-6">
|
||||
One request. Production-ready result. Drop the URL into your app and ship.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="live-urls" className="mb-12">
|
||||
<SectionHeader level={2} id="live-urls">
|
||||
Live URLs
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
Want to skip the API call entirely? Generate images directly from a URL:
|
||||
</p>
|
||||
|
||||
<CodeBlock
|
||||
code={`https://cdn.banatie.app/my-org/my-project/live/demo?prompt=a+friendly+robot+waving+hello`}
|
||||
language="text"
|
||||
filename="Live URL"
|
||||
/>
|
||||
|
||||
<p className="text-gray-300 leading-relaxed mt-6 mb-6">
|
||||
Put this in an <code className="text-purple-400"><img src="..."></code> tag. First request generates the image, all subsequent requests serve it from cache instantly.
|
||||
</p>
|
||||
|
||||
<TipBox variant="compact" type="info">
|
||||
Perfect for placeholders, dynamic content, and rapid prototyping.
|
||||
</TipBox>
|
||||
|
||||
<p className="text-gray-300 leading-relaxed mt-6">
|
||||
<a href="/docs/live-urls" className="text-purple-400 hover:underline">Learn more about Live URLs →</a>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="get-your-api-key" className="mb-12">
|
||||
<SectionHeader level={2} id="get-your-api-key">
|
||||
Get Your API Key
|
||||
</SectionHeader>
|
||||
<p className="text-gray-300 leading-relaxed mb-6">
|
||||
We're currently in early access. API keys are issued personally.
|
||||
</p>
|
||||
|
||||
<div className="space-y-3 text-gray-300 mb-6">
|
||||
<p><strong className="text-white">To request access:</strong></p>
|
||||
<ol className="list-decimal list-inside space-y-2 pl-4">
|
||||
<li>Go to <a href="https://banatie.app" className="text-purple-400 hover:underline">banatie.app</a></li>
|
||||
<li>Enter your email in the signup form</li>
|
||||
<li>We'll send your API key within 24 hours</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
</DocPage>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,37 +41,38 @@ const navigationItems: NavItem[] = [
|
|||
{
|
||||
label: 'Getting Started',
|
||||
href: '/docs',
|
||||
icon: '🚀',
|
||||
},
|
||||
{
|
||||
label: 'Image Generation',
|
||||
href: '/docs/generation',
|
||||
},
|
||||
{
|
||||
label: 'Working with Images',
|
||||
href: '/docs/images',
|
||||
},
|
||||
{
|
||||
label: 'Live URLs',
|
||||
href: '/docs/live-urls',
|
||||
},
|
||||
{
|
||||
label: 'Authentication',
|
||||
href: '/docs/authentication',
|
||||
},
|
||||
{
|
||||
label: 'API Reference',
|
||||
href: '/docs/api',
|
||||
icon: '📚',
|
||||
children: [
|
||||
{ label: 'Text to Image', href: '/docs/api/text-to-image' },
|
||||
{ label: 'Upload', href: '/docs/api/upload' },
|
||||
{ label: 'Overview', href: '/docs/api' },
|
||||
{ label: 'Generations', href: '/docs/api/generations' },
|
||||
{ label: 'Images', href: '/docs/api/images' },
|
||||
{ label: 'Flows', href: '/docs/api/flows' },
|
||||
{ label: 'Live Scopes', href: '/docs/api/live-scopes' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Guides',
|
||||
href: '/docs/guides',
|
||||
icon: '📖',
|
||||
children: [
|
||||
{ label: 'Authentication', href: '/docs/guides/authentication' },
|
||||
{ label: 'Error Handling', href: '/docs/guides/error-handling' },
|
||||
{ label: 'Rate Limits', href: '/docs/guides/rate-limits' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Examples',
|
||||
href: '/docs/examples',
|
||||
icon: '💡',
|
||||
},
|
||||
];
|
||||
|
||||
export const DocsSidebar = ({ currentPath }: DocsSidebarProps) => {
|
||||
const [expandedSections, setExpandedSections] = useState<string[]>(['API Reference', 'Guides']);
|
||||
const [expandedSections, setExpandedSections] = useState<string[]>(['API Reference']);
|
||||
|
||||
const toggleSection = (label: string) => {
|
||||
setExpandedSections((prev) =>
|
||||
|
|
@ -119,10 +120,7 @@ export const DocsSidebar = ({ currentPath }: DocsSidebarProps) => {
|
|||
${active ? 'bg-purple-500/10 text-white font-medium' : 'text-gray-400 hover:text-white hover:bg-white/5'}
|
||||
`}
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
{item.icon && <span className="text-base">{item.icon}</span>}
|
||||
<span>{item.label}</span>
|
||||
</span>
|
||||
<span>{item.label}</span>
|
||||
{hasChildren && (
|
||||
<svg
|
||||
className={`w-4 h-4 transition-transform ${expanded ? 'rotate-90' : ''}`}
|
||||
|
|
|
|||
Loading…
Reference in New Issue