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="" NEXT_PUBLIC_TURNSTILE_SITE_KEY=""
TURNSTILE_SECRET_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, initializeProviderRecord,
} from '../lib/provider-config'; } from '../lib/provider-config';
import type { Suggestion } from '../lib/suggestions'; import type { Suggestion } from '../lib/suggestions';
import { ImageGeneratorHeader } from './ImageGeneratorHeader';
import { ModelCardCarousel } from './ModelCardCarousel'; import { ModelCardCarousel } from './ModelCardCarousel';
import { ModelSelect } from './ModelSelect'; import { ModelSelect } from './ModelSelect';
import { PromptInput } from './PromptInput'; import { PromptInput } from './PromptInput';
@ -75,8 +76,11 @@ export function ImagePlayground({
}; };
return ( 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"> <div className="max-w-7xl mx-auto">
{/* header */}
<ImageGeneratorHeader />
{/* input prompt */} {/* input prompt */}
<PromptInput <PromptInput
onSubmit={handlePromptSubmit} onSubmit={handlePromptSubmit}

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

@ -1,12 +1,13 @@
import { Textarea } from '@/components/ui/textarea'; import { Textarea } from '@/components/ui/textarea';
import { cn } from '@/lib/utils'; 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 { useState } from 'react';
import { type Suggestion, getRandomSuggestions } from '../lib/suggestions'; import { type Suggestion, getRandomSuggestions } from '../lib/suggestions';
import { Spinner } from './spinner'; import { Spinner } from './spinner';
type QualityMode = 'performance' | 'quality'; type QualityMode = 'performance' | 'quality';
// showProviders/onToggleProviders/mode/onModeChange are not used yet
interface PromptInputProps { interface PromptInputProps {
onSubmit: (prompt: string) => void; onSubmit: (prompt: string) => void;
isLoading?: boolean; isLoading?: boolean;
@ -62,10 +63,11 @@ export function PromptInput({
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
placeholder="Enter your prompt here" placeholder="Enter your prompt here"
rows={3} 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 pt-1">
<div className="flex items-center justify-between space-x-2"> <div className="flex items-center justify-between space-x-2">
{/* refresh suggestions */}
<button <button
type="button" type="button"
onClick={updateSuggestions} onClick={updateSuggestions}
@ -73,6 +75,7 @@ export function PromptInput({
> >
<RefreshCw className="w-4 h-4 text-muted-foreground group-hover:opacity-70" /> <RefreshCw className="w-4 h-4 text-muted-foreground group-hover:opacity-70" />
</button> </button>
{/* suggestions */}
{suggestions.map((suggestion, index) => ( {suggestions.map((suggestion, index) => (
<button <button
type="button" type="button"
@ -96,14 +99,15 @@ export function PromptInput({
</button> </button>
))} ))}
</div> </div>
{/* submit prompt */}
<button <button
type="button" type="button"
onClick={handleSubmit} onClick={handleSubmit}
disabled={isLoading || !input.trim()} 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 ? ( {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" /> <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[]; models: string[];
} }
> = { > = {
// https://ai-sdk.dev/providers/ai-sdk-providers/replicate#image-models
replicate: { replicate: {
displayName: 'Replicate', displayName: 'Replicate',
iconPath: '/provider-icons/replicate.svg', iconPath: '/provider-icons/replicate.svg',
@ -30,6 +31,8 @@ export const PROVIDERS: Record<
'luma/photon', 'luma/photon',
'luma/photon-flash', 'luma/photon-flash',
'recraft-ai/recraft-v3', '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',
'stability-ai/stable-diffusion-3.5-large-turbo', 'stability-ai/stable-diffusion-3.5-large-turbo',
], ],
@ -40,12 +43,18 @@ export const PROVIDERS: Record<
// color: 'from-green-500 to-emerald-500', // color: 'from-green-500 to-emerald-500',
// models: ['imagen-3.0-generate-001', 'imagen-3.0-fast-generate-001'], // models: ['imagen-3.0-generate-001', 'imagen-3.0-fast-generate-001'],
// }, // },
// https://ai-sdk.dev/providers/ai-sdk-providers/openai#image-models
openai: { openai: {
displayName: 'OpenAI', displayName: 'OpenAI',
iconPath: '/provider-icons/openai.svg', iconPath: '/provider-icons/openai.svg',
color: 'from-blue-500 to-cyan-500', 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: { fireworks: {
displayName: 'Fireworks', displayName: 'Fireworks',
iconPath: '/provider-icons/fireworks.svg', iconPath: '/provider-icons/fireworks.svg',
@ -60,26 +69,31 @@ export const PROVIDERS: Record<
'accounts/fireworks/models/stable-diffusion-xl-1024-v1-0', 'accounts/fireworks/models/stable-diffusion-xl-1024-v1-0',
], ],
}, },
// https://ai-sdk.dev/providers/ai-sdk-providers/fal#image-models
fal: { fal: {
displayName: 'Fal', displayName: 'Fal',
iconPath: '/provider-icons/fal.svg', iconPath: '/provider-icons/fal.svg',
color: 'from-orange-500 to-red-500', color: 'from-orange-500 to-red-500',
models: [ 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/fast-sdxl',
'fal-ai/flux-pro/v1.1-ultra', 'fal-ai/flux-pro/v1.1-ultra',
'fal-ai/ideogram/v2', 'fal-ai/ideogram/v2',
'fal-ai/recraft-v3', 'fal-ai/recraft-v3',
'fal-ai/hyper-sdxl', 'fal-ai/hyper-sdxl',
// 'fal-ai/stable-diffusion-3.5-large',
], ],
}, },
}; };
export const MODEL_CONFIGS: Record<ModelMode, Record<ProviderKey, string>> = { export const MODEL_CONFIGS: Record<ModelMode, Record<ProviderKey, string>> = {
performance: { 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', // vertex: 'imagen-3.0-fast-generate-001',
openai: 'dall-e-2', openai: 'dall-e-3',
fireworks: 'accounts/fireworks/models/flux-1-schnell-fp8', fireworks: 'accounts/fireworks/models/flux-1-schnell-fp8',
fal: 'fal-ai/flux/dev', fal: 'fal-ai/flux/dev',
}, },

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

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