songtianlun/prmbr-image-mksaas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: optimize ai image generator

Browse Source
This commit is contained in:
javayhu 2025-06-28 22:47:40 +08:00
parent 1a297e33f9
commit 0453db5ec6
7 changed files with 98 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
env.example
View File

@ -155,3 +155,12 @@ NEXT_PUBLIC_AFFILIATE_PROMOTEKIT_ID=""
# -----------------------------------------------------------------------------
NEXT_PUBLIC_TURNSTILE_SITE_KEY=""
TURNSTILE_SECRET_KEY=""
# -----------------------------------------------------------------------------
# AI
# https://mksaas.com/docs/ai
# -----------------------------------------------------------------------------
FAL_API_KEY=""
FIREWORKS_API_KEY=""
OPENAI_API_KEY=""
REPLICATE_API_TOKEN=""

25
src/ai/image/components/ImageGeneratorHeader.tsx Normal file
View File

@ -0,0 +1,25 @@
import { Button } from '@/components/ui/button';
import { ArrowUpRightIcon } from 'lucide-react';
import Link from 'next/link';
import { QualityModeToggle } from './QualityModeToggle';
export const ImageGeneratorHeader = () => {
return (
<header className="mb-4">
<div className="mx-auto flex justify-between items-center">
<div>
<h1 className="text-xl flex sm:text-xl sm:font-bold antialiased font-semibold">
<span className="mr-2">🏞️</span> AI Image Generator
</h1>
</div>
{/* <Link href={`${process.env.NEXT_PUBLIC_APP_URL}`} target="_blank">
<Button size="icon" className="block sm:hidden">
<ArrowUpRightIcon className="w-4 h-4" />
</Button>
</Link> */}
{/* <QualityModeToggle onValueChange={() => {}} value="performance" /> */}
</div>
</header>
);
};

6
src/ai/image/components/ImagePlayground.tsx
View File

@ -11,6 +11,7 @@ import {
initializeProviderRecord,
} from '../lib/provider-config';
import type { Suggestion } from '../lib/suggestions';
import { ImageGeneratorHeader } from './ImageGeneratorHeader';
import { ModelCardCarousel } from './ModelCardCarousel';
import { ModelSelect } from './ModelSelect';
import { PromptInput } from './PromptInput';
@ -75,8 +76,11 @@ export function ImagePlayground({
};
return (
<div className="min-h-screen rounded-lg bg-background py-8 px-4 sm:px-6 lg:px-8">
<div className="rounded-lg bg-background py-8 px-4 sm:px-6 lg:px-8">
<div className="max-w-7xl mx-auto">
{/* header */}
<ImageGeneratorHeader />
{/* input prompt */}
<PromptInput
onSubmit={handlePromptSubmit}

12
src/ai/image/components/PromptInput.tsx
View File

@ -1,12 +1,13 @@
import { Textarea } from '@/components/ui/textarea';
import { cn } from '@/lib/utils';
import { ArrowUp, ArrowUpRight, RefreshCw } from 'lucide-react';
import { ArrowUp, ArrowUpRight, Loader2, RefreshCw } from 'lucide-react';
import { useState } from 'react';
import { type Suggestion, getRandomSuggestions } from '../lib/suggestions';
import { Spinner } from './spinner';
type QualityMode = 'performance' | 'quality';
// showProviders/onToggleProviders/mode/onModeChange are not used yet
interface PromptInputProps {
onSubmit: (prompt: string) => void;
isLoading?: boolean;
@ -62,10 +63,11 @@ export function PromptInput({
onKeyDown={handleKeyDown}
placeholder="Enter your prompt here"
rows={3}
className="text-base bg-transparent border-muted-foreground p-2 resize-none placeholder:text-muted-foreground text-foreground focus-visible:ring-0 focus-visible:ring-offset-0"
className="text-base bg-transparent border-muted p-2 resize-none placeholder:text-muted-foreground text-foreground focus-visible:ring-0 focus-visible:ring-offset-0"
/>
<div className="flex items-center justify-between pt-1">
<div className="flex items-center justify-between space-x-2">
{/* refresh suggestions */}
<button
type="button"
onClick={updateSuggestions}
@ -73,6 +75,7 @@ export function PromptInput({
>
<RefreshCw className="w-4 h-4 text-muted-foreground group-hover:opacity-70" />
</button>
{/* suggestions */}
{suggestions.map((suggestion, index) => (
<button
type="button"
@ -96,14 +99,15 @@ export function PromptInput({
</button>
))}
</div>
{/* submit prompt */}
<button
type="button"
onClick={handleSubmit}
disabled={isLoading || !input.trim()}
className="h-8 w-8 rounded-full bg-primary flex items-center justify-center disabled:opacity-50"
className="h-8 w-8 cursor-pointer rounded-full bg-primary flex items-center justify-center disabled:opacity-50"
>
{isLoading ? (
<Spinner className="w-3 h-3 text-primary-foreground" />
<Loader2 className="w-3 h-3 text-primary-foreground animate-spin" />
) : (
<ArrowUp className="w-5 h-5 text-primary-foreground" />
)}

5
src/ai/image/components/spinner.tsx
View File

@ -1,5 +0,0 @@
import { Loader2 } from "lucide-react";
export function Spinner({ className }: { className?: string }) {
return <Loader2 className={`h-4 w-4 animate-spin ${className}`} />;
}

22
src/ai/image/lib/provider-config.ts
View File

@ -15,6 +15,7 @@ export const PROVIDERS: Record<
models: string[];
}
> = {
// https://ai-sdk.dev/providers/ai-sdk-providers/replicate#image-models
replicate: {
displayName: 'Replicate',
iconPath: '/provider-icons/replicate.svg',
@ -30,6 +31,8 @@ export const PROVIDERS: Record<
'luma/photon',
'luma/photon-flash',
'recraft-ai/recraft-v3',
// 'recraft-ai/recraft-v3-svg', // added by Fox
// 'stability-ai/stable-diffusion-3.5-medium', // added by Fox
'stability-ai/stable-diffusion-3.5-large',
'stability-ai/stable-diffusion-3.5-large-turbo',
],
@ -40,12 +43,18 @@ export const PROVIDERS: Record<
// color: 'from-green-500 to-emerald-500',
// models: ['imagen-3.0-generate-001', 'imagen-3.0-fast-generate-001'],
// },
// https://ai-sdk.dev/providers/ai-sdk-providers/openai#image-models
openai: {
displayName: 'OpenAI',
iconPath: '/provider-icons/openai.svg',
color: 'from-blue-500 to-cyan-500',
models: ['dall-e-2', 'dall-e-3'],
models: [
// 'gpt-image-1', // added by Fox
'dall-e-2',
'dall-e-3',
],
},
// https://ai-sdk.dev/providers/ai-sdk-providers/fireworks#image-models
fireworks: {
displayName: 'Fireworks',
iconPath: '/provider-icons/fireworks.svg',
@ -60,26 +69,31 @@ export const PROVIDERS: Record<
'accounts/fireworks/models/stable-diffusion-xl-1024-v1-0',
],
},
// https://ai-sdk.dev/providers/ai-sdk-providers/fal#image-models
fal: {
displayName: 'Fal',
iconPath: '/provider-icons/fal.svg',
color: 'from-orange-500 to-red-500',
models: [
'fal-ai/flux/dev',
'fal-ai/flux/dev', // added by Fox
'fal-ai/flux-pro/kontext',
'fal-ai/flux-pro/kontext/max',
'fal-ai/flux-lora',
'fal-ai/fast-sdxl',
'fal-ai/flux-pro/v1.1-ultra',
'fal-ai/ideogram/v2',
'fal-ai/recraft-v3',
'fal-ai/hyper-sdxl',
// 'fal-ai/stable-diffusion-3.5-large',
],
},
};
export const MODEL_CONFIGS: Record<ModelMode, Record<ProviderKey, string>> = {
performance: {
replicate: 'stability-ai/stable-diffusion-3.5-large-turbo',
replicate: 'stability-ai/stable-diffusion-3.5-medium',
// vertex: 'imagen-3.0-fast-generate-001',
openai: 'dall-e-2',
openai: 'dall-e-3',
fireworks: 'accounts/fireworks/models/flux-1-schnell-fp8',
fal: 'fal-ai/flux/dev',
},

66
src/config/navbar-config.tsx
View File

@ -69,39 +69,39 @@ export function getNavbarLinks(): NestedMenuItem[] {
href: Routes.Docs,
external: false,
},
// {
// title: t('ai.title'),
// items: [
// {
// title: t('ai.items.text.title'),
// description: t('ai.items.text.description'),
// icon: <SquarePenIcon className="size-4 shrink-0" />,
// href: Routes.AIText,
// external: false,
// },
// {
// title: t('ai.items.image.title'),
// description: t('ai.items.image.description'),
// icon: <ImageIcon className="size-4 shrink-0" />,
// href: Routes.AIImage,
// external: false,
// },
// {
// title: t('ai.items.video.title'),
// description: t('ai.items.video.description'),
// icon: <FilmIcon className="size-4 shrink-0" />,
// href: Routes.AIVideo,
// external: false,
// },
// {
// title: t('ai.items.audio.title'),
// description: t('ai.items.audio.description'),
// icon: <AudioLinesIcon className="size-4 shrink-0" />,
// href: Routes.AIAudio,
// external: false,
// },
// ],
// },
{
title: t('ai.title'),
items: [
// {
// title: t('ai.items.text.title'),
// description: t('ai.items.text.description'),
// icon: <SquarePenIcon className="size-4 shrink-0" />,
// href: Routes.AIText,
// external: false,
// },
{
title: t('ai.items.image.title'),
description: t('ai.items.image.description'),
icon: <ImageIcon className="size-4 shrink-0" />,
href: Routes.AIImage,
external: false,
},
// {
// title: t('ai.items.video.title'),
// description: t('ai.items.video.description'),
// icon: <FilmIcon className="size-4 shrink-0" />,
// href: Routes.AIVideo,
// external: false,
// },
// {
// title: t('ai.items.audio.title'),
// description: t('ai.items.audio.description'),
// icon: <AudioLinesIcon className="size-4 shrink-0" />,
// href: Routes.AIAudio,
// external: false,
// },
],
},
{
title: t('pages.title'),
items: [