Update src files with improvements and fixes

src/ai/flows/auto-select-image-model.ts

@@ -4,14 +4,16 @@
  * @fileOverview Smart routing flow for automatically selecting the best image generation provider.
  * 
  * This flow:
- * 1. Checks which API keys are valid/present
- * 2. If smart routing is enabled and multiple providers are available, uses AI to select the best one
+ * 1. Checks which API keys are valid/present (from client or env)
+ * 2. Uses keyword matching to select the best provider for the prompt
  * 3. Falls back to available providers when some are unavailable
  * 4. Returns the selected provider along with available options
+ * 
+ * NOTE: This version uses keyword matching only (no AI/Genkit) to support
+ * client-only API key mode without requiring server-side env configuration.
  */
 
-import { ai } from '@/ai/genkit';
-import { z } from 'genkit';
+import { z } from 'zod';
 import {
   type ImageProvider,
   PROVIDER_CONFIGS
@@ -31,9 +33,9 @@ const ClientApiKeysSchema = z.object({
 // Input schema for the smart router
 const SmartRouterInputSchema = z.object({
   prompt: z.string().describe('The user prompt for image generation.'),
-  smartRoutingEnabled: z.boolean().describe('Whether AI-based smart routing is enabled.'),
+  smartRoutingEnabled: z.boolean().describe('Whether smart routing is enabled.'),
   preferredProvider: ProviderEnum.optional().describe('User-preferred provider when smart routing is disabled.'),
-  clientApiKeys: ClientApiKeysSchema.describe('Optional API keys provided by user from client-side.'),
+  clientApiKeys: ClientApiKeysSchema.describe('API keys provided by user from client-side.'),
 });
 export type SmartRouterInput = z.infer<typeof SmartRouterInputSchema>;
 
@@ -45,80 +47,96 @@ const SmartRouterOutputSchema = z.object({
 });
 export type SmartRouterOutput = z.infer<typeof SmartRouterOutputSchema>;
 
-// AI prompt for selecting the best provider based on the user's prompt
-const selectProviderPrompt = ai.definePrompt({
-  name: 'selectProviderPrompt',
-  input: {
-    schema: z.object({
-      prompt: z.string(),
-      availableProviders: z.array(z.string()),
-    }),
-  },
-  output: {
-    schema: z.object({
-      selectedProvider: ProviderEnum,
-      reason: z.string(),
-    }),
-  },
-  prompt: `You are an AI assistant that selects the best image generation provider based on a user's prompt.
-
-Available providers: {{{availableProviders}}}
-
-Provider strengths:
-- openai (DALL-E 3): Best for photorealistic images, product photography, professional headshots, realistic scenes, and detailed realistic artwork.
-- google (Gemini): Best for general purpose, quick generation, simple images, icons, and versatile everyday needs.
-- qwen (Qwen Image Plus): Best for artistic, creative, stylized, anime, illustration, digital art, fantasy, and visually striking artistic images.
-
-Analyze the prompt and select the BEST provider from the AVAILABLE providers list.
-If a provider is not in the available list, DO NOT select it.
-
-User's prompt: {{{prompt}}}
-
-Respond with:
-1. selectedProvider: The name of the best provider (must be one from the available list)
-2. reason: A brief explanation of why this provider is best for this prompt`,
-});
-
 /**
- * Check if a provider has a valid key either from client or env
+ * Check if a provider has a valid key from client
  */
-function hasValidKey(provider: ImageProvider, clientKeys?: { openai?: string; google?: string; qwen?: string }): boolean {
+function hasValidClientKey(provider: ImageProvider, clientKeys?: { openai?: string; google?: string; qwen?: string }): boolean {
   const clientKey = clientKeys?.[provider];
-  if (clientKey && clientKey.trim().length > 0) {
-    return true;
+  return !!(clientKey && clientKey.trim().length > 0);
+}
+
+/**
+ * Keyword-based provider selection
+ */
+function selectProviderByKeywords(
+  prompt: string,
+  availableProviders: ('openai' | 'google' | 'qwen')[]
+): { provider: 'openai' | 'google' | 'qwen'; reason: string } {
+  const lowerPrompt = prompt.toLowerCase();
+
+  // Check for photorealistic keywords -> OpenAI
+  const photorealisticKeywords = [
+    'photo', 'photograph', 'realistic', 'professional', 'headshot',
+    'product', 'portrait', 'camera', 'hdr', 'stock photo', 'documentary'
+  ];
+  if (availableProviders.includes('openai') &&
+    photorealisticKeywords.some(kw => lowerPrompt.includes(kw))) {
+    return {
+      provider: 'openai',
+      reason: 'Detected photorealistic content - using OpenAI DALL-E for best results.',
+    };
   }
-  return false; // Server-side env check is done separately
+
+  // Check for artistic keywords -> Qwen
+  const artisticKeywords = [
+    'artistic', 'fantasy', 'abstract', 'stylized', 'watercolor',
+    'painting', 'illustration', 'anime', 'digital art', 'concept art',
+    'cartoon', 'manga', 'sketch', 'oil painting', 'impressionist',
+    'surreal', 'dreamy', 'magical', 'ethereal'
+  ];
+  if (availableProviders.includes('qwen') &&
+    artisticKeywords.some(kw => lowerPrompt.includes(kw))) {
+    return {
+      provider: 'qwen',
+      reason: 'Detected artistic/creative content - using Qwen for stylized results.',
+    };
+  }
+
+  // Default to Google for general purpose
+  if (availableProviders.includes('google')) {
+    return {
+      provider: 'google',
+      reason: 'Using Google Gemini for general purpose image generation.',
+    };
+  }
+
+  // Final fallback - use first available
+  return {
+    provider: availableProviders[0],
+    reason: `Using ${PROVIDER_CONFIGS[availableProviders[0]].displayName} as default.`,
+  };
 }
 
 /**
  * Smart router for selecting the best image generation provider.
+ * Uses keyword matching for selection (no external AI calls).
  */
 export async function smartSelectProvider(input: SmartRouterInput): Promise<SmartRouterOutput> {
   // 1. Get available providers from environment
   const envAvailableProviders = await getAvailableProviders();
 
-  // 2. Also check client-provided keys
+  // 2. Check client-provided keys
   const clientKeys = input.clientApiKeys;
   const allProviders: ImageProvider[] = ['openai', 'google', 'qwen'];
 
   // Combine: provider is available if it has env key OR valid client key
   const availableProviders = allProviders.filter(provider =>
-    envAvailableProviders.includes(provider) || hasValidKey(provider, clientKeys)
+    envAvailableProviders.includes(provider) || hasValidClientKey(provider, clientKeys)
   );
 
-  // 2. Handle case where no providers are available
+  // 3. Handle case where no providers are available
   if (availableProviders.length === 0) {
     return {
       selectedProvider: 'google', // Default, but won't work
       availableProviders: [],
-      reason: 'No API keys are configured. Please add at least one API key to your environment.',
+      reason: 'No API keys are configured. Please add at least one API key in Settings.',
     };
   }
 
   // Cast to the enum type for Zod compatibility
   const typedAvailableProviders = availableProviders as ('openai' | 'google' | 'qwen')[];
 
-  // 3. If only one provider is available, use it
+  // 4. If only one provider is available, use it
   if (typedAvailableProviders.length === 1) {
     const provider = typedAvailableProviders[0];
     return {
@@ -128,7 +146,7 @@ export async function smartSelectProvider(input: SmartRouterInput): Promise<Smar
     };
   }
 
-  // 4. If smart routing is disabled and user has a preference
+  // 5. If smart routing is disabled and user has a preference
   if (!input.smartRoutingEnabled && input.preferredProvider) {
     // Check if preferred provider is available
     if (typedAvailableProviders.includes(input.preferredProvider)) {
@@ -140,70 +158,22 @@ export async function smartSelectProvider(input: SmartRouterInput): Promise<Smar
     } else {
       // Preferred provider not available, fall back to first available
       const fallback = typedAvailableProviders[0];
+      const preferredConfig = input.preferredProvider ? PROVIDER_CONFIGS[input.preferredProvider] : null;
+      const preferredDisplayName = preferredConfig?.displayName || input.preferredProvider || 'Selected provider';
       return {
         selectedProvider: fallback,
         availableProviders: typedAvailableProviders,
-        reason: `${PROVIDER_CONFIGS[input.preferredProvider].displayName} is not available. Falling back to ${PROVIDER_CONFIGS[fallback].displayName}.`,
-      };
-    }
-  }
-
-  // 5. Smart routing enabled - use AI to select the best provider
-  try {
-    const { output } = await selectProviderPrompt({
-      prompt: input.prompt,
-      availableProviders: typedAvailableProviders,
-    });
-
-    if (output && typedAvailableProviders.includes(output.selectedProvider)) {
-      return {
-        selectedProvider: output.selectedProvider,
-        availableProviders: typedAvailableProviders,
-        reason: output.reason,
+        reason: `${preferredDisplayName} is not available. Falling back to ${PROVIDER_CONFIGS[fallback].displayName}.`,
       };
     }
-  } catch (error) {
-    console.error('[SmartRouter] AI selection failed, using fallback:', error);
   }
 
-  // 6. Fallback: Use keyword matching if AI fails
-  const prompt = input.prompt.toLowerCase();
+  // 6. Smart routing enabled - use keyword matching to select appropriate provider
+  const selection = selectProviderByKeywords(input.prompt, typedAvailableProviders);
 
-  // Check for photorealistic keywords -> OpenAI
-  const photorealisticKeywords = ['photo', 'realistic', 'professional', 'headshot', 'product', 'portrait'];
-  if (typedAvailableProviders.includes('openai') &&
-    photorealisticKeywords.some(kw => prompt.includes(kw))) {
-    return {
-      selectedProvider: 'openai',
-      availableProviders: typedAvailableProviders,
-      reason: 'Detected photorealistic content in prompt, using OpenAI DALL-E.',
-    };
-  }
-
-  // Check for artistic keywords -> Qwen
-  const artisticKeywords = ['artistic', 'fantasy', 'abstract', 'stylized', 'watercolor', 'painting', 'illustration', 'anime', 'digital art'];
-  if (typedAvailableProviders.includes('qwen') &&
-    artisticKeywords.some(kw => prompt.includes(kw))) {
-    return {
-      selectedProvider: 'qwen',
-      availableProviders: typedAvailableProviders,
-      reason: 'Detected artistic content in prompt, using Qwen Image Plus.',
-    };
-  }
-
-  // Default to Google for general purpose
-  if (typedAvailableProviders.includes('google')) {
-    return {
-      selectedProvider: 'google',
-      availableProviders: typedAvailableProviders,
-      reason: 'Using Google Gemini for general purpose image generation.',
-    };
-  }
-
-  // Final fallback - use first available
   return {
-    selectedProvider: typedAvailableProviders[0],
+    selectedProvider: selection.provider,
     availableProviders: typedAvailableProviders,
-    reason: `Using ${PROVIDER_CONFIGS[typedAvailableProviders[0]].displayName} as default.`,
+    reason: selection.reason,
   };
 }

src/ai/flows/enhance-user-prompt.ts

@@ -1,50 +1,94 @@
 'use server';
 
 /**
- * @fileOverview This file defines a Genkit flow for enhancing user-provided prompts using the Gemini AI model.
- *
- * The flow takes a user prompt as input and returns an enhanced version of the prompt.
- * It exports:
- *   - enhanceUserPrompt: The main function to call to enhance a prompt.
- *   - EnhanceUserPromptInput: The input type for the enhanceUserPrompt function.
- *   - EnhanceUserPromptOutput: The output type for the enhanceUserPrompt function.
+ * @fileOverview Prompt enhancement flow that optionally uses Google AI to enhance prompts.
+ * 
+ * If a Google API key is available (from client or env), it will use AI to enhance the prompt.
+ * Otherwise, it returns the original prompt unchanged.
+ * 
+ * This supports client-only API key mode without requiring server-side env configuration.
  */
 
-import {ai} from '@/ai/genkit';
-import {z} from 'genkit';
+import { z } from 'zod';
 
 const EnhanceUserPromptInputSchema = z.object({
   prompt: z.string().describe('The user-provided prompt to enhance.'),
+  googleApiKey: z.string().optional().describe('Optional Google API key from client.'),
 });
 export type EnhanceUserPromptInput = z.infer<typeof EnhanceUserPromptInputSchema>;
 
 const EnhanceUserPromptOutputSchema = z.object({
-  enhancedPrompt: z.string().describe('The AI-enhanced version of the prompt.'),
+  enhancedPrompt: z.string().describe('The enhanced version of the prompt.'),
 });
 export type EnhanceUserPromptOutput = z.infer<typeof EnhanceUserPromptOutputSchema>;
 
+/**
+ * Enhance a user prompt using Google AI if available.
+ * Falls back to returning the original prompt if no API key is available.
+ */
 export async function enhanceUserPrompt(input: EnhanceUserPromptInput): Promise<EnhanceUserPromptOutput> {
-  return enhanceUserPromptFlow(input);
-}
+  // Use provided API key or fall back to environment variable
+  const apiKey = input.googleApiKey || process.env.GOOGLE_GENAI_API_KEY;
 
-const enhanceUserPromptPrompt = ai.definePrompt({
-  name: 'enhanceUserPromptPrompt',
-  input: {schema: EnhanceUserPromptInputSchema},
-  output: {schema: EnhanceUserPromptOutputSchema},
-  prompt: `You are an AI prompt enhancer.  You will take the user's prompt and enhance it to be more descriptive and specific, in order to get better results from image generation models.
+  // If no API key available, return original prompt
+  if (!apiKey) {
+    console.log('[EnhancePrompt] No Google API key available, skipping enhancement');
+    return { enhancedPrompt: input.prompt };
+  }
 
-User Prompt: {{{prompt}}}`,
-  model: 'googleai/gemini-2.5-pro',
-});
+  try {
+    // Use Google's REST API directly to enhance the prompt
+    const response = await fetch(
+      `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          contents: [
+            {
+              parts: [
+                {
+                  text: `You are an AI prompt enhancer for image generation. Take the user's prompt and enhance it to be more descriptive and specific, to get better results from image generation models.
+
+IMPORTANT: 
+- Only return the enhanced prompt, nothing else.
+- Keep the core subject and intent the same.
+- Add details about lighting, style, composition, and mood.
+- Keep it concise (under 200 words).
 
-const enhanceUserPromptFlow = ai.defineFlow(
-  {
-    name: 'enhanceUserPromptFlow',
-    inputSchema: EnhanceUserPromptInputSchema,
-    outputSchema: EnhanceUserPromptOutputSchema,
-  },
-  async input => {
-    const {output} = await enhanceUserPromptPrompt(input);
-    return output!;
+User's prompt: ${input.prompt}
+
+Enhanced prompt:`,
+                },
+              ],
+            },
+          ],
+          generationConfig: {
+            temperature: 0.7,
+            maxOutputTokens: 300,
+          },
+        }),
+      }
+    );
+
+    if (!response.ok) {
+      console.warn('[EnhancePrompt] API call failed, using original prompt');
+      return { enhancedPrompt: input.prompt };
+    }
+
+    const data = await response.json();
+    const enhancedText = data.candidates?.[0]?.content?.parts?.[0]?.text;
+
+    if (enhancedText && enhancedText.trim().length > 0) {
+      console.log('[EnhancePrompt] Successfully enhanced prompt');
+      return { enhancedPrompt: enhancedText.trim() };
+    }
+
+    return { enhancedPrompt: input.prompt };
+  } catch (error) {
+    console.warn('[EnhancePrompt] Failed to enhance prompt, using original:', error);
+    return { enhancedPrompt: input.prompt };
   }
-);
+}

src/ai/flows/generate-image-google.ts

@@ -2,14 +2,14 @@
 
 /**
  * @fileOverview Google Gemini image generation flow.
- * Uses the Genkit AI framework with Google's Gemini model for image generation.
+ * Uses Google's Generative AI API directly to support client-provided API keys.
  */
 
-import { ai } from '@/ai/genkit';
-import { z } from 'genkit';
+import { z } from 'zod';
 
 const GenerateImageGoogleInputSchema = z.object({
     prompt: z.string().describe('The text prompt to generate an image from.'),
+    apiKey: z.string().optional().describe('Optional API key provided by user.'),
 });
 export type GenerateImageGoogleInput = z.infer<typeof GenerateImageGoogleInputSchema>;
 
@@ -21,37 +21,87 @@ const GenerateImageGoogleOutputSchema = z.object({
 export type GenerateImageGoogleOutput = z.infer<typeof GenerateImageGoogleOutputSchema>;
 
 export async function generateImageGoogle(input: GenerateImageGoogleInput): Promise<GenerateImageGoogleOutput> {
-    return generateImageGoogleFlow(input);
-}
+    // Use provided API key or fall back to environment variable
+    const apiKey = input.apiKey || process.env.GOOGLE_GENAI_API_KEY;
 
-const generateImageGoogleFlow = ai.defineFlow(
-    {
-        name: 'generateImageGoogleFlow',
-        inputSchema: GenerateImageGoogleInputSchema,
-        outputSchema: GenerateImageGoogleOutputSchema,
-    },
-    async (input) => {
-        const startTime = Date.now();
-
-        const { media } = await ai.generate({
-            model: 'googleai/gemini-2.0-flash-exp',
-            prompt: input.prompt,
-            config: {
-                responseModalities: ['IMAGE', 'TEXT'],
-            },
-        });
+    if (!apiKey) {
+        throw new Error('Google API key is not configured. Please add your API key in Settings.');
+    }
+
+    const startTime = Date.now();
+
+    try {
+        // Use Google's REST API directly to support client-provided keys
+        const response = await fetch(
+            `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash-exp:generateContent?key=${apiKey}`,
+            {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    contents: [
+                        {
+                            parts: [
+                                {
+                                    text: input.prompt,
+                                },
+                            ],
+                        },
+                    ],
+                    generationConfig: {
+                        responseModalities: ['IMAGE', 'TEXT'],
+                    },
+                }),
+            }
+        );
+
+        if (!response.ok) {
+            const error = await response.json().catch(() => ({}));
+            const errorMessage = error.error?.message || response.statusText;
+            throw new Error(`Google API error: ${errorMessage}`);
+        }
 
+        const data = await response.json();
         const endTime = Date.now();
         console.log(`[Google] Image generation took ${endTime - startTime}ms`);
 
-        if (!media?.url) {
-            throw new Error('Google image generation failed - no image returned');
+        // Extract image from response
+        // The response structure: { candidates: [{ content: { parts: [{ inlineData: { mimeType, data } }] } }] }
+        const candidates = data.candidates;
+        if (!candidates || candidates.length === 0) {
+            throw new Error('Google image generation failed - no candidates returned');
         }
 
+        const parts = candidates[0]?.content?.parts;
+        if (!parts || parts.length === 0) {
+            throw new Error('Google image generation failed - no parts in response');
+        }
+
+        // Find the image part
+        const imagePart = parts.find((part: any) => part.inlineData?.mimeType?.startsWith('image/'));
+
+        if (!imagePart?.inlineData?.data) {
+            // Check if we got text instead of image
+            const textPart = parts.find((part: any) => part.text);
+            if (textPart) {
+                console.error('[Google] Received text instead of image:', textPart.text);
+            }
+            throw new Error('Google image generation failed - no image data in response');
+        }
+
+        // Convert to data URI
+        const mimeType = imagePart.inlineData.mimeType;
+        const base64Data = imagePart.inlineData.data;
+        const dataUri = `data:${mimeType};base64,${base64Data}`;
+
         return {
-            url: media.url,
+            url: dataUri,
             prompt: input.prompt,
             provider: 'google' as const,
         };
+    } catch (error) {
+        console.error('[Google] Generation error:', error);
+        throw error;
     }
-);
+}

src/ai/flows/generate-image.ts

@@ -54,8 +54,9 @@ export async function generateImage(input: GenerateImageInput): Promise<Generate
 
     case 'google':
     default:
-      // Google uses Genkit which reads from process.env directly
-      // Client-provided keys for Google would require a different approach
-      return generateImageGoogle({ prompt: input.prompt });
+      return generateImageGoogle({
+        prompt: input.prompt,
+        apiKey: input.apiKeys?.google,
+      });
   }
 }

src/app/page.tsx

@@ -73,10 +73,13 @@ export default function DashboardPage() {
         description: routerResult.reason,
       });
 
-      // 4. Enhance prompt
+      // 4. Enhance prompt (uses Google API if available)
       let generationPrompt = values.prompt;
       try {
-        const enhanced = await enhanceUserPrompt({ prompt: values.prompt });
+        const enhanced = await enhanceUserPrompt({
+          prompt: values.prompt,
+          googleApiKey: apiKeys.google || undefined,
+        });
         generationPrompt = enhanced.enhancedPrompt;
       } catch (enhanceError) {
         console.warn('[Page] Prompt enhancement failed, using original prompt:', enhanceError);

src/lib/api-config.ts

@@ -24,7 +24,7 @@ export const PROVIDER_CONFIGS: Record<ImageProvider, ProviderConfig> = {
     google: {
         name: 'google',
         displayName: 'Google Gemini',
-        envKey: 'GEMINI_API_KEY',
+        envKey: 'GOOGLE_GENAI_API_KEY',
         bestFor: ['general purpose', 'quick', 'versatile', 'simple', 'icons'],
         description: 'Best for general purpose and quick generation',
     },