336 lines
12 KiB
TypeScript
336 lines
12 KiB
TypeScript
import type { Metadata } from 'next';
|
||
import { TipBox } from '@/components/docs/shared/TipBox';
|
||
import { Table } from '@/components/docs/shared/Table';
|
||
import { CodeBlock } from '@/components/docs/shared/CodeBlock';
|
||
import { DocPage } from '@/components/docs/layout/DocPage';
|
||
import { JsonLd } from '@/components/seo/JsonLd';
|
||
import { createDocsMetadata, DOCS_PAGES } from '@/config/docs-seo';
|
||
import { createBreadcrumbSchema, createTechArticleSchema } from '@/config/docs-schema';
|
||
import { Hero, SectionHeader, InlineCode } from '@/components/docs/blocks';
|
||
|
||
const PAGE = DOCS_PAGES['live-urls'];
|
||
|
||
export const metadata: Metadata = createDocsMetadata(PAGE);
|
||
|
||
const breadcrumbSchema = createBreadcrumbSchema([
|
||
{ name: 'Home', path: '/' },
|
||
{ name: 'Documentation', path: '/docs/' },
|
||
{ name: 'Live URLs', path: '/docs/live-urls/' },
|
||
]);
|
||
|
||
const articleSchema = createTechArticleSchema(PAGE);
|
||
|
||
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: 'placeholder-images', text: 'Placeholder Images', 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 (
|
||
<>
|
||
<JsonLd data={breadcrumbSchema} />
|
||
<JsonLd data={articleSchema} />
|
||
<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: 16:9)',
|
||
],
|
||
[
|
||
<InlineCode key="p">template</InlineCode>,
|
||
<span key="r" className="text-gray-500">
|
||
No
|
||
</span>,
|
||
'Enhancement template to use',
|
||
],
|
||
[
|
||
<InlineCode key="p">autoEnhance</InlineCode>,
|
||
<span key="r" className="text-gray-500">
|
||
No
|
||
</span>,
|
||
'Enable prompt enhancement (default: true)',
|
||
],
|
||
]}
|
||
/>
|
||
</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">Static HTML & serverless sites</strong>
|
||
<p className="text-gray-400 text-sm mt-1">
|
||
Deploy HTML pages without configuring asset hosting or CDN infrastructure. Images
|
||
are served directly from Banatie's edge network.
|
||
</p>
|
||
</div>
|
||
</li>
|
||
<li className="flex items-start gap-3">
|
||
<span className="text-purple-400 mt-1">•</span>
|
||
<div>
|
||
<strong className="text-white">AI-assisted development</strong>
|
||
<p className="text-gray-400 text-sm mt-1">
|
||
Enable AI coding assistants to generate complete HTML or JSX with contextual
|
||
images in a single pass—no asset pipeline required.
|
||
</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">AI placeholder images</strong>
|
||
<p className="text-gray-400 text-sm mt-1">
|
||
Replace gray boxes and random stock photos with contextual AI images. Perfect for
|
||
prototypes, client demos, and design mockups.
|
||
</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">
|
||
Generate unique images based on user data or preferences for dynamic,
|
||
individualized experiences.
|
||
</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
|
||
|
||
<section id="placeholder-images" className="mb-12">
|
||
<TipBox variant="protip">
|
||
Use Live URLs as intelligent placeholder images during development. Generate contextual
|
||
visuals that match your design intent—no more gray boxes or random stock photos.
|
||
</TipBox>
|
||
|
||
<p className="text-gray-400 text-sm mt-6 mb-4">Common placeholder configurations:</p>
|
||
|
||
<CodeBlock
|
||
code={`<!-- Avatar placeholder (200×200) -->
|
||
<img src="https://cdn.banatie.app/.../live/avatars?prompt=professional+headshot&aspectRatio=1:1" />
|
||
|
||
<!-- Thumbnail placeholder (300×200) -->
|
||
<img src="https://cdn.banatie.app/.../live/thumbs?prompt=product+photo&aspectRatio=3:2" />
|
||
|
||
<!-- Hero placeholder (1200×630) -->
|
||
<img src="https://cdn.banatie.app/.../live/hero?prompt=modern+office+interior&aspectRatio=1200:630" />
|
||
|
||
<!-- Card image placeholder (400×300) -->
|
||
<img src="https://cdn.banatie.app/.../live/cards?prompt=abstract+gradient+background&aspectRatio=4:3" />`}
|
||
language="html"
|
||
filename="Placeholder Examples"
|
||
/>
|
||
|
||
<div className="mt-6">
|
||
<TipBox variant="compact" type="info">
|
||
For dark mode interfaces, include "dark theme" or "dark background" in your prompt.
|
||
</TipBox>
|
||
</div>
|
||
</section>
|
||
|
||
</DocPage>
|
||
</>
|
||
);
|
||
}
|