chore: optimize ai image generator

env.example

@@ -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=""

src/ai/image/components/ImageGeneratorHeader.tsx

@@ -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>
+  );
+};

src/ai/image/components/ImagePlayground.tsx

@@ -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}

src/ai/image/components/PromptInput.tsx

@@ -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" />
               )}

src/ai/image/components/spinner.tsx

@@ -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}`} />;
-}

src/ai/image/lib/provider-config.ts

@@ -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',
   },

src/config/navbar-config.tsx

@@ -69,9 +69,9 @@ export function getNavbarLinks(): NestedMenuItem[] {
       href: Routes.Docs,
       external: false,
     },
-    // {
+    {
-    //   title: t('ai.title'),
+      title: t('ai.title'),
-    //   items: [
+      items: [
         // {
         //   title: t('ai.items.text.title'),
         //   description: t('ai.items.text.description'),
@@ -79,13 +79,13 @@ export function getNavbarLinks(): NestedMenuItem[] {
         //   href: Routes.AIText,
         //   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'),
         //   description: t('ai.items.video.description'),
@@ -100,8 +100,8 @@ export function getNavbarLinks(): NestedMenuItem[] {
         //   href: Routes.AIAudio,
         //   external: false,
         // },
-    //   ],
+      ],
-    // },
+    },
     {
       title: t('pages.title'),
       items: [