254 lines
8.8 KiB
TypeScript
254 lines
8.8 KiB
TypeScript
'use client';
|
|
|
|
/**
|
|
* API Reference: Text to Image
|
|
*
|
|
* Refactored to use block components from @/components/docs/blocks
|
|
* Demonstrates API documentation patterns with semantic components
|
|
*/
|
|
|
|
import { DocsLayout } from '@/components/docs/layout/DocsLayout';
|
|
import { DocsSidebar } from '@/components/docs/layout/DocsSidebar';
|
|
import { DocsTOC } from '@/components/docs/layout/DocsTOC';
|
|
import { SubsectionNav } from '@/components/shared/SubsectionNav';
|
|
import { TipBox } from '@/components/docs/shared/TipBox';
|
|
import { Table } from '@/components/docs/shared/Table';
|
|
import { Breadcrumb } from '@/components/docs/shared/Breadcrumb';
|
|
import { CodeBlock } from '@/components/docs/shared/CodeBlock';
|
|
import { InteractiveAPIWidget } from '@/components/docs/blocks/InteractiveAPIWidget';
|
|
import {
|
|
Hero,
|
|
SectionHeader,
|
|
InlineCode,
|
|
EndpointCard,
|
|
LinkCard,
|
|
LinkCardGrid,
|
|
} 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 navItems = [
|
|
{ label: 'Documentation', href: '/docs' },
|
|
{ label: 'Demo', href: '/demo' },
|
|
{ label: 'Examples', href: '/docs/examples' },
|
|
];
|
|
|
|
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 (
|
|
<>
|
|
{/* Subsection Navigation with API Key Input */}
|
|
<SubsectionNav
|
|
items={navItems}
|
|
currentPath="/docs/api/text-to-image"
|
|
showApiKeyInput={true}
|
|
/>
|
|
|
|
<DocsLayout
|
|
sidebar={<DocsSidebar currentPath="/docs/api/text-to-image" />}
|
|
toc={<DocsTOC items={tocItems} />}
|
|
>
|
|
<Breadcrumb
|
|
items={[
|
|
{ label: 'Documentation', href: '/docs' },
|
|
{ label: 'API Reference', href: '/docs/api' },
|
|
{ label: 'Text to Image' },
|
|
]}
|
|
/>
|
|
|
|
{/* 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>
|
|
|
|
{/* Next Steps */}
|
|
<section id="next-steps" className="mb-12">
|
|
<SectionHeader level={2} id="next-steps" className="mb-6">
|
|
Next Steps
|
|
</SectionHeader>
|
|
|
|
<LinkCardGrid columns={2}>
|
|
<LinkCard
|
|
href="/docs/api/upload"
|
|
title="Upload API"
|
|
description="Learn how to upload reference images for image-to-image generation."
|
|
accent="primary"
|
|
/>
|
|
<LinkCard
|
|
href="/docs/guides/error-handling"
|
|
title="Error Handling"
|
|
description="Best practices for handling errors and retries in production."
|
|
accent="secondary"
|
|
/>
|
|
</LinkCardGrid>
|
|
</section>
|
|
</DocsLayout>
|
|
</>
|
|
);
|
|
}
|