feat: extend badges
This commit is contained in:
parent
ea8b68c5bb
commit
dd1e1d2cf2
|
|
@ -64,12 +64,17 @@ export const tocItems: TocItem[] = [
|
|||
|
||||
// Color-coded feature tags
|
||||
const tagColors: Record<string, string> = {
|
||||
// Green - Free/Commercial
|
||||
'Free tier': 'bg-emerald-100 text-emerald-700 ring-1 ring-emerald-500/20',
|
||||
// Green - Commercial
|
||||
'Commercial safe': 'bg-emerald-100 text-emerald-700 ring-1 ring-emerald-500/20',
|
||||
// Blue - API/Technical
|
||||
'API': 'bg-blue-100 text-blue-700 ring-1 ring-blue-500/20',
|
||||
'API (via providers)': 'bg-blue-100 text-blue-700 ring-1 ring-blue-500/20',
|
||||
'MCP': 'bg-blue-100 text-blue-700 ring-1 ring-blue-500/20',
|
||||
'SDK': 'bg-blue-100 text-blue-700 ring-1 ring-blue-500/20',
|
||||
'CLI': 'bg-blue-100 text-blue-700 ring-1 ring-blue-500/20',
|
||||
'CDN': 'bg-blue-100 text-blue-700 ring-1 ring-blue-500/20',
|
||||
'Image Hosting': 'bg-blue-100 text-blue-700 ring-1 ring-blue-500/20',
|
||||
'Live URLs': 'bg-blue-100 text-blue-700 ring-1 ring-blue-500/20',
|
||||
// Purple - Reference types
|
||||
'Style ref': 'bg-violet-100 text-violet-700 ring-1 ring-violet-500/20',
|
||||
'Character ref': 'bg-violet-100 text-violet-700 ring-1 ring-violet-500/20',
|
||||
|
|
@ -173,8 +178,10 @@ export const Content = () => (
|
|||
<BlogImage src={leonardoAiHomepage} alt="Leonardo AI homepage" />
|
||||
<FeatureTags
|
||||
tags={[
|
||||
'Free tier',
|
||||
'API',
|
||||
'MCP',
|
||||
'SDK',
|
||||
'CDN',
|
||||
'Video',
|
||||
'Style ref',
|
||||
'Pose ref',
|
||||
|
|
@ -232,8 +239,8 @@ export const Content = () => (
|
|||
<BlogImage src={adobeFireflyHomepage} alt="Adobe Firefly homepage" />
|
||||
<FeatureTags
|
||||
tags={[
|
||||
'Free tier',
|
||||
'API',
|
||||
'SDK',
|
||||
'Commercial safe',
|
||||
'Style ref',
|
||||
'Inpaint',
|
||||
|
|
@ -285,7 +292,7 @@ export const Content = () => (
|
|||
</BlogHeading>
|
||||
<BlogServiceLink href="https://chatgpt.com">chatgpt.com</BlogServiceLink>
|
||||
<BlogImage src={chatgptHomepage} alt="ChatGPT homepage" />
|
||||
<FeatureTags tags={['Free tier', 'Text', 'Chatbot interface', 'Inpaint']} />
|
||||
<FeatureTags tags={['API', 'SDK', 'Text', 'Chatbot interface', 'Inpaint']} />
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
GPT-4o generates images natively inside ChatGPT — the same interface
|
||||
millions already use daily. No separate app, no new subscription, no
|
||||
|
|
@ -332,7 +339,7 @@ export const Content = () => (
|
|||
</BlogHeading>
|
||||
<BlogServiceLink href="https://ideogram.ai">ideogram.ai</BlogServiceLink>
|
||||
<BlogImage src={ideogramHomepage} alt="Ideogram homepage" />
|
||||
<FeatureTags tags={['Free tier', 'Text', 'Inpaint']} />
|
||||
<FeatureTags tags={['API', 'SDK', 'Text', 'Inpaint']} />
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
Founded by former Google Brain researchers specifically to solve
|
||||
typography in AI images. Where Midjourney achieves roughly 30% text
|
||||
|
|
@ -376,8 +383,10 @@ export const Content = () => (
|
|||
<BlogImage src={googleGeminiHomepage} alt="Google Gemini homepage" />
|
||||
<FeatureTags
|
||||
tags={[
|
||||
'Free tier',
|
||||
'API',
|
||||
'MCP',
|
||||
'SDK',
|
||||
'CLI',
|
||||
'Text',
|
||||
'Chatbot interface',
|
||||
'Character ref',
|
||||
|
|
@ -433,8 +442,8 @@ export const Content = () => (
|
|||
<BlogImage src={recraftAiHomepage} alt="Recraft AI homepage" />
|
||||
<FeatureTags
|
||||
tags={[
|
||||
'Free tier',
|
||||
'API',
|
||||
'SDK',
|
||||
'Vector',
|
||||
'Text',
|
||||
'Inpaint',
|
||||
|
|
@ -486,7 +495,7 @@ export const Content = () => (
|
|||
<BlogServiceLink href="https://reve.ai">reve.ai</BlogServiceLink>
|
||||
<BlogImage src={reveAiHomepage} alt="Reve AI homepage" />
|
||||
<FeatureTags
|
||||
tags={['Free tier', 'Commercial safe', 'Text', 'Object selection']}
|
||||
tags={['Commercial safe', 'Text', 'Object selection']}
|
||||
/>
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
Launched March 2025, immediately claimed #1 on Artificial Analysis's
|
||||
|
|
@ -539,7 +548,7 @@ export const Content = () => (
|
|||
<BlogServiceLink href="https://bfl.ai">bfl.ai</BlogServiceLink>
|
||||
<BlogImage src={blackForestLabsHomepage} alt="Black Forest Labs homepage" />
|
||||
<FeatureTags
|
||||
tags={['API (via providers)', 'Style ref', 'Pose ref', 'Depth ref', 'Inpaint']}
|
||||
tags={['API (via providers)', 'MCP', 'Style ref', 'Pose ref', 'Depth ref', 'Inpaint']}
|
||||
/>
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
The community favorite for self-hosting. Black Forest Labs publishes
|
||||
|
|
@ -600,7 +609,7 @@ export const Content = () => (
|
|||
<BlogServiceLink href="https://stability.ai">stability.ai</BlogServiceLink>
|
||||
<BlogImage src={stabilityAiHomepage} alt="Stability AI homepage" />
|
||||
<FeatureTags
|
||||
tags={['API (via providers)', 'Style ref', 'Pose ref', 'Depth ref', 'Inpaint']}
|
||||
tags={['API (via providers)', 'SDK', 'CLI', 'Style ref', 'Pose ref', 'Depth ref', 'Inpaint']}
|
||||
/>
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
The foundation model that democratized AI image generation. What Stable
|
||||
|
|
@ -674,7 +683,7 @@ export const Content = () => (
|
|||
</BlogHeading>
|
||||
<BlogServiceLink href="https://civitai.com">civitai.com</BlogServiceLink>
|
||||
<BlogImage src={civitaiHomepage} alt="Civitai homepage" />
|
||||
<FeatureTags tags={['Free tier', 'Inpaint']} />
|
||||
<FeatureTags tags={['API', 'CDN', 'Image Hosting', 'Inpaint']} />
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
Not a model — a marketplace and community. Tens of thousands of
|
||||
checkpoints, fine-tunes, and LoRAs for SD and FLUX families. What makes it
|
||||
|
|
@ -738,7 +747,7 @@ export const Content = () => (
|
|||
</BlogHeading>
|
||||
<BlogServiceLink href="https://replicate.com">replicate.com</BlogServiceLink>
|
||||
<BlogImage src={replicateHomepage} alt="Replicate homepage" />
|
||||
<FeatureTags tags={['API']} />
|
||||
<FeatureTags tags={['API', 'MCP', 'SDK', 'CDN']} />
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
The model marketplace for developers. 50,000+ production-ready models
|
||||
spanning image generation, transcription, and beyond. The appeal:{' '}
|
||||
|
|
@ -823,7 +832,7 @@ export const Content = () => (
|
|||
</BlogHeading>
|
||||
<BlogServiceLink href="https://fal.ai">fal.ai</BlogServiceLink>
|
||||
<BlogImage src={falAiHomepage} alt="fal.ai homepage" />
|
||||
<FeatureTags tags={['API']} />
|
||||
<FeatureTags tags={['API', 'MCP', 'SDK', 'CLI']} />
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
Speed-focused platform. 600+ models including FLUX.2, often with day-zero
|
||||
access to new releases. The technical edge:{' '}
|
||||
|
|
@ -903,7 +912,7 @@ export const Content = () => (
|
|||
</BlogHeading>
|
||||
<BlogServiceLink href="https://runware.ai">runware.ai</BlogServiceLink>
|
||||
<BlogImage src={runwareHomepage} alt="Runware homepage" />
|
||||
<FeatureTags tags={['API']} />
|
||||
<FeatureTags tags={['API', 'SDK']} />
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
The cost leader. Their <strong>Sonic Inference Engine</strong> runs on
|
||||
AI-native hardware (custom servers, storage, networking, cooling)
|
||||
|
|
@ -967,7 +976,7 @@ export const Content = () => (
|
|||
</BlogHeading>
|
||||
<BlogServiceLink href="https://segmind.com">segmind.com</BlogServiceLink>
|
||||
<BlogImage src={segmindHomepage} alt="Segmind homepage" />
|
||||
<FeatureTags tags={['Free tier', 'API']} />
|
||||
<FeatureTags tags={['API', 'SDK', 'Image Hosting']} />
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
Workflow-focused platform. <strong>PixelFlow</strong> is the
|
||||
differentiator: a cloud-based drag-and-drop builder where you create
|
||||
|
|
@ -1022,7 +1031,7 @@ export const Content = () => (
|
|||
</BlogHeading>
|
||||
<BlogServiceLink href="https://novita.ai">novita.ai</BlogServiceLink>
|
||||
<BlogImage src={novitaAiHomepage} alt="Novita AI homepage" />
|
||||
<FeatureTags tags={['API']} />
|
||||
<FeatureTags tags={['API', 'SDK']} />
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
Budget option with startup-friendly programs. The{' '}
|
||||
<strong>Agent Sandbox</strong> launched in 2025 delivers millisecond-level
|
||||
|
|
@ -1079,7 +1088,7 @@ export const Content = () => (
|
|||
</BlogHeading>
|
||||
<BlogServiceLink href="https://together.ai">together.ai</BlogServiceLink>
|
||||
<BlogImage src={togetherAiHomepage} alt="Together AI homepage" />
|
||||
<FeatureTags tags={['Free tier', 'API']} />
|
||||
<FeatureTags tags={['API', 'SDK', 'CLI', 'CDN']} />
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
Unified AI platform covering text, image, and video generation. The
|
||||
strategic advantage:{' '}
|
||||
|
|
@ -1146,7 +1155,7 @@ export const Content = () => (
|
|||
</BlogHeading>
|
||||
<BlogServiceLink href="https://banatie.app">banatie.app</BlogServiceLink>
|
||||
<BlogImage src={banatieHomepage} alt="Banatie homepage" />
|
||||
<FeatureTags tags={['API']} />
|
||||
<FeatureTags tags={['API', 'Live URLs', 'CDN', 'Image Hosting']} />
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
Developer-native image generation built for AI coding workflows.
|
||||
</p>
|
||||
|
|
@ -1204,7 +1213,7 @@ export const Content = () => (
|
|||
</BlogHeading>
|
||||
<BlogServiceLink href="https://poe.com">poe.com</BlogServiceLink>
|
||||
<BlogImage src={poeHomepage} alt="Poe homepage" />
|
||||
<FeatureTags tags={['Free tier', 'API', 'Chatbot interface']} />
|
||||
<FeatureTags tags={['API', 'Chatbot interface']} />
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
100+ models through one interface, including FLUX-pro, GPT-Image, Imagen
|
||||
3/4, DALL-E 3, Gemini. The fundamental advantage:{' '}
|
||||
|
|
@ -1260,7 +1269,7 @@ export const Content = () => (
|
|||
<BlogImage src={kreaAiHomepage} alt="Krea.ai homepage" />
|
||||
<FeatureTags
|
||||
tags={[
|
||||
'Free tier',
|
||||
'API',
|
||||
'Live editing',
|
||||
'Canvas',
|
||||
'Inpaint',
|
||||
|
|
@ -1320,7 +1329,7 @@ export const Content = () => (
|
|||
</BlogHeading>
|
||||
<BlogServiceLink href="https://freepik.com/ai">freepik.com/ai</BlogServiceLink>
|
||||
<BlogImage src={freepikAiHomepage} alt="Freepik AI homepage" />
|
||||
<FeatureTags tags={['Text', 'Inpaint', 'Upscaling']} />
|
||||
<FeatureTags tags={['API', 'Image Hosting', 'Text', 'Inpaint', 'Upscaling']} />
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
All-in-one creative platform combining stock assets, AI generation, and
|
||||
editing. The <strong>Mystic model</strong> delivers exceptional
|
||||
|
|
|
|||
Loading…
Reference in New Issue