227 lines
7.9 KiB
TypeScript
227 lines
7.9 KiB
TypeScript
'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>
|
|
);
|
|
}
|