vibefast-cli 1.1.5 → 1.3.0

package/recipes/image-generator-supabase/apps/native/src/features/image-generator/hooks/use-image-generator.ts

@@ -0,0 +1,103 @@
+import { useState } from 'react';
+import { Alert } from 'react-native';
+
+import { useGenerateImage } from '@/api-client/supabase/image-generator';
+
+import { getImageModelById } from '../models/models';
+import type { ImageGeneratorSettings } from './use-image-generator-settings';
+
+type GeneratedImageData = {
+  imageUri: string;
+  prompt: string;
+  provider: string;
+  model: string;
+  mimeType: string;
+  imageId?: string;
+  storageId?: string;
+};
+
+/**
+ * Custom hook for managing image generation state and operations
+ */
+type UseImageGeneratorOptions = {
+  settings: ImageGeneratorSettings;
+  isSettingsLoaded: boolean;
+};
+
+export const useImageGenerator = ({
+  settings,
+  isSettingsLoaded,
+}: UseImageGeneratorOptions) => {
+  const [prompt, setPrompt] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [generatedImageData, setGeneratedImageData] =
+    useState<GeneratedImageData | null>(null);
+
+  const generateImageMutation = useGenerateImage();
+
+  /**
+   * Generate an image based on the current prompt
+   */
+  const handleGenerateImage = async () => {
+    if (!prompt.trim()) {
+      Alert.alert('Warning', 'Please enter a prompt to generate an image');
+      return;
+    }
+
+    if (!isSettingsLoaded) {
+      Alert.alert('Please wait', 'Settings are still loading...');
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      const selectedModel = getImageModelById(settings.modelId);
+      const provider = selectedModel?.provider ?? settings.provider;
+      const result = await generateImageMutation.mutateAsync({
+        prompt: prompt.trim(),
+        provider,
+        model: selectedModel?.id ?? settings.modelId,
+      });
+
+      const imageUri = result.imageDataUri || result.imageUrl || '';
+      const mimeType = result.mimeType || (result.imageUrl ? 'image/png' : '');
+
+      console.log('Frontend received result:', {
+        provider: result.provider,
+        model: result.model,
+        mimeType,
+        dataUriLength: imageUri.length,
+        dataUriPreview: imageUri.substring(0, 100),
+      });
+
+      setGeneratedImageData({
+        imageUri,
+        prompt: result.prompt ?? prompt.trim(),
+        provider: result.provider ?? provider,
+        model: result.model ?? settings.modelId,
+        mimeType: mimeType || 'image/png',
+        imageId: result.imageId,
+        storageId: result.storageId,
+      });
+      // Alert.alert('Success', 'Image generated successfully!');
+    } catch (error) {
+      console.error('Image generation error:', error);
+      Alert.alert(
+        'Error',
+        error instanceof Error ? error.message : 'Failed to generate image',
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return {
+    prompt,
+    setPrompt,
+    isLoading,
+    generatedImageData,
+    generatedImageUri: generatedImageData?.imageUri || null, // backward compatibility
+    handleGenerateImage,
+    settings,
+  };
+};

package/recipes/image-generator-supabase/apps/native/src/features/image-generator/models/models.ts

@@ -0,0 +1,66 @@
+export type ImageProvider = 'openai' | 'gemini';
+
+export type ImageModelId =
+  | 'dall-e-3'
+  | 'gpt-image-1'
+  | 'gemini-2.5-flash-image';
+
+export type ImageModel = {
+  id: ImageModelId;
+  name: string;
+  description: string;
+  provider: ImageProvider;
+  defaultSize?: string;
+  defaultAspectRatio?: string;
+  isPremium?: boolean;
+};
+
+export const IMAGE_MODELS: ImageModel[] = [
+  {
+    id: 'dall-e-3',
+    name: 'DALL·E 3',
+    description:
+      'OpenAI’s flagship model for creative storytelling and illustration.',
+    provider: 'openai',
+    defaultSize: '1024x1024',
+  },
+  {
+    id: 'gpt-image-1',
+    name: 'GPT Image 1',
+    description:
+      'GPT-4o based image model with strong photorealism and typography.',
+    provider: 'openai',
+    defaultSize: '1024x1024',
+  },
+  {
+    id: 'gemini-2.5-flash-image',
+    name: 'Gemini 2.5 Flash Image',
+    description:
+      'Fast and cost-effective image generation ideal for rapid iteration.',
+    provider: 'gemini',
+    defaultSize: '1024x1024',
+  },
+];
+
+export const DEFAULT_IMAGE_MODEL_ID: ImageModelId = 'gemini-2.5-flash-image';
+
+export const getImageModelsByProvider = (provider: ImageProvider) =>
+  IMAGE_MODELS.filter((model) => model.provider === provider);
+
+export const getImageModelById = (id: ImageModelId) =>
+  IMAGE_MODELS.find((model) => model.id === id) ?? null;
+
+export const getProviderDisplayName = (provider: ImageProvider) => {
+  switch (provider) {
+    case 'openai':
+      return 'OpenAI';
+    case 'gemini':
+      return 'Google Gemini';
+    default:
+      return provider;
+  }
+};
+
+export const IMAGE_MODEL_PROVIDERS: ImageProvider[] = Array.from(
+  new Set(IMAGE_MODELS.map((model) => model.provider)),
+) as ImageProvider[];

package/recipes/image-generator-supabase/apps/native/src/features/image-generator/services/image-gallery-service.ts

@@ -0,0 +1,96 @@
+import { defaultCacheService } from '@/core/cache';
+
+export type SavedImageMetadata = {
+  id: string;
+  prompt: string;
+  provider: string;
+  model: string;
+  savedAt: number;
+  localUri: string;
+  remoteImageId?: string;
+  storageId?: string;
+};
+
+const GALLERY_CACHE_KEY = 'image_gallery_v1';
+
+/**
+ * Service for managing the local image gallery with MMKV persistence
+ */
+export class ImageGalleryService {
+  /**
+   * Get all saved images from the gallery
+   */
+  static async getAllImages(): Promise<SavedImageMetadata[]> {
+    try {
+      const images =
+        await defaultCacheService.getItem<SavedImageMetadata[]>(
+          GALLERY_CACHE_KEY,
+        );
+      return images || [];
+    } catch (error) {
+      console.error('Failed to load gallery images:', error);
+      return [];
+    }
+  }
+
+  /**
+   * Add a new image to the gallery
+   */
+  static async addImage(
+    metadata: Omit<SavedImageMetadata, 'id' | 'savedAt'>,
+  ): Promise<void> {
+    try {
+      const existingImages = await ImageGalleryService.getAllImages();
+      const newImage: SavedImageMetadata = {
+        ...metadata,
+        id: `img_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+        savedAt: Date.now(),
+      };
+
+      const updatedImages = [newImage, ...existingImages];
+      await defaultCacheService.setItem(GALLERY_CACHE_KEY, updatedImages);
+    } catch (error) {
+      console.error('Failed to add image to gallery:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Remove an image from the gallery
+   */
+  static async removeImage(imageId: string): Promise<void> {
+    try {
+      const existingImages = await ImageGalleryService.getAllImages();
+      const updatedImages = existingImages.filter((img) => img.id !== imageId);
+      await defaultCacheService.setItem(GALLERY_CACHE_KEY, updatedImages);
+    } catch (error) {
+      console.error('Failed to remove image from gallery:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Clear all images from the gallery
+   */
+  static async clearGallery(): Promise<void> {
+    try {
+      await defaultCacheService.setItem(GALLERY_CACHE_KEY, []);
+    } catch (error) {
+      console.error('Failed to clear gallery:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Get the total number of saved images
+   */
+  static async getImageCount(): Promise<number> {
+    try {
+      const images = await ImageGalleryService.getAllImages();
+      return images.length;
+    } catch (error) {
+      console.error('Failed to get image count:', error);
+      return 0;
+    }
+  }
+}

package/recipes/image-generator-supabase/apps/native/src/features/image-generator/services/image-save-service.ts

@@ -0,0 +1,120 @@
+import { File, Paths } from 'expo-file-system';
+import * as MediaLibrary from 'expo-media-library';
+import { Alert, Platform } from 'react-native';
+
+import { ImageGalleryService } from './image-gallery-service';
+
+export type ImageSaveMetadata = {
+  prompt: string;
+  provider: string;
+  model: string;
+  remoteImageId?: string;
+  storageId?: string;
+};
+
+/**
+ * Service for handling image saving operations to the device gallery and local storage
+ */
+export class ImageSaveService {
+  /**
+   * Save a base64 image data URI to the device gallery and local gallery
+   * @param imageDataUri - The data URI containing the image (e.g., 'data:image/png;base64,iVBORw0KGgo...')
+   * @param metadata - Optional metadata about the image generation
+   * @returns Promise that resolves when save is complete
+   */
+  static async saveImageToGallery(
+    imageDataUri: string,
+    metadata?: ImageSaveMetadata,
+  ): Promise<void> {
+    try {
+      // Check if running on web - FileSystem is not available
+      if (Platform.OS === 'web') {
+        // On web, just save to local gallery
+        if (metadata) {
+          await ImageGalleryService.addImage({
+            prompt: metadata.prompt,
+            provider: metadata.provider,
+            model: metadata.model,
+            localUri: imageDataUri,
+            remoteImageId: metadata.remoteImageId,
+            storageId: metadata.storageId,
+          });
+          Alert.alert('Success!', 'Image saved to your gallery.');
+        }
+        return;
+      }
+
+      // Request permissions (native only)
+      const { status } = await MediaLibrary.requestPermissionsAsync();
+      if (status !== 'granted') {
+        Alert.alert(
+          'Permission Required',
+          'We need permission to save photos to your gallery.',
+        );
+        return;
+      }
+
+      // Extract base64 data from data URI (supports multiple formats)
+      const match = imageDataUri.match(/^data:image\/(\w+);base64,(.+)$/);
+      if (!match) {
+        throw new Error('Invalid image data format');
+      }
+      const [, imageFormat, base64Code] = match;
+      const fileExtension = imageFormat === 'jpeg' ? 'jpg' : imageFormat;
+
+      // Create temporary file using new File API
+      const filename = `generated-image-${Date.now()}.${fileExtension}`;
+      const file = new File(Paths.cache, filename);
+
+      // Create and write the file
+      file.create();
+      await file.write(base64Code, { encoding: 'base64' });
+
+      // Save to device gallery
+      const asset = await MediaLibrary.createAssetAsync(file.uri);
+      await MediaLibrary.createAlbumAsync('MyAppImages', asset, false);
+
+      // Save to local gallery if metadata is provided
+      if (metadata) {
+        await ImageGalleryService.addImage({
+          prompt: metadata.prompt,
+          provider: metadata.provider,
+          model: metadata.model,
+          localUri: imageDataUri,
+          remoteImageId: metadata.remoteImageId,
+          storageId: metadata.storageId,
+        });
+      }
+
+      Alert.alert('Success!', 'Image saved to your gallery.');
+    } catch (error) {
+      console.error('Failed to save image:', error);
+      Alert.alert('Error', 'Could not save the image.');
+    }
+  }
+
+  /**
+   * Save image only to local gallery (without device gallery)
+   * @param imageDataUri - The data URI containing the image
+   * @param metadata - Metadata about the image generation
+   * @returns Promise that resolves when save is complete
+   */
+  static async saveToLocalGallery(
+    imageDataUri: string,
+    metadata: ImageSaveMetadata,
+  ): Promise<void> {
+    try {
+      await ImageGalleryService.addImage({
+        prompt: metadata.prompt,
+        provider: metadata.provider,
+        model: metadata.model,
+        localUri: imageDataUri,
+        remoteImageId: metadata.remoteImageId,
+        storageId: metadata.storageId,
+      });
+    } catch (error) {
+      console.error('Failed to save to local gallery:', error);
+      throw error;
+    }
+  }
+}

package/recipes/image-generator-supabase/packages/backend/supabase/functions/generate-image/index.ts

@@ -0,0 +1,291 @@
+/**
+ * Generate Image Edge Function
+ *
+ * Handles AI image generation with JWT authentication.
+ * Supports OpenAI (DALL-E 3) and Google Gemini providers.
+ *
+ * Requirements: 6.1, 6.2, 6.3, 6.4, 6.5
+ */
+
+import 'jsr:@supabase/functions-js/edge-runtime.d.ts';
+import { createClient } from 'npm:@supabase/supabase-js@2';
+
+// CORS headers for browser requests
+const corsHeaders = {
+  'Access-Control-Allow-Origin': '*',
+  'Access-Control-Allow-Headers':
+    'authorization, x-client-info, apikey, content-type',
+  'Access-Control-Allow-Methods': 'POST, OPTIONS',
+};
+
+interface GenerateImageRequest {
+  prompt: string;
+  provider?: 'openai' | 'gemini';
+  model?: string;
+  size?: string;
+  quality?: 'standard' | 'hd';
+}
+
+interface GenerateImageResponse {
+  success: boolean;
+  imageUrl?: string;
+  imageDataUri?: string;
+  storageId?: string;
+  recordId?: string;
+  provider: string;
+  model: string;
+  error?: string;
+}
+
+Deno.serve(async (req: Request) => {
+  // Handle CORS preflight
+  if (req.method === 'OPTIONS') {
+    return new Response('ok', { headers: corsHeaders });
+  }
+
+  if (req.method !== 'POST') {
+    return new Response(JSON.stringify({ error: 'Method not allowed' }), {
+      status: 405,
+      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
+    });
+  }
+
+  try {
+    // 6.1: Authenticate the request
+    const authHeader = req.headers.get('Authorization');
+    if (!authHeader) {
+      return new Response(JSON.stringify({ error: 'Missing authorization header' }), {
+        status: 401,
+        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
+      });
+    }
+
+    const token = authHeader.replace('Bearer ', '');
+
+    // Create Supabase client with user's JWT
+    const supabaseUrl = Deno.env.get('SUPABASE_URL')!;
+    const supabasePublishableKey = Deno.env.get('SUPABASE_ANON_KEY')!;
+    const supabaseSecretKey = Deno.env.get('SUPABASE_SECRET_KEY')!;
+
+    const supabase = createClient(supabaseUrl, supabasePublishableKey, {
+      global: { headers: { Authorization: `Bearer ${token}` } },
+    });
+
+    // Admin client for storage operations
+    const supabaseAdmin = createClient(supabaseUrl, supabaseSecretKey);
+
+    // Verify the user
+    const { data: { user }, error: authError } = await supabase.auth.getUser();
+    if (authError || !user) {
+      return new Response(JSON.stringify({ error: 'Invalid or expired token' }), {
+        status: 401,
+        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
+      });
+    }
+
+    // Parse request body
+    const body: GenerateImageRequest = await req.json();
+    const { prompt, provider = 'openai', model, size = '1024x1024', quality = 'standard' } = body;
+
+    if (!prompt || prompt.trim().length === 0) {
+      return new Response(JSON.stringify({ error: 'Prompt is required' }), {
+        status: 400,
+        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
+      });
+    }
+
+    let imageData: { url?: string; b64_json?: string } | null = null;
+    let usedProvider: string;
+    let usedModel: string;
+
+    if (provider === 'gemini') {
+      // 6.3: Generate with Gemini provider
+      const geminiApiKey = Deno.env.get('GEMINI_API_KEY');
+      if (!geminiApiKey) {
+        return new Response(JSON.stringify({ error: 'Gemini API not configured' }), {
+          status: 500,
+          headers: { ...corsHeaders, 'Content-Type': 'application/json' },
+        });
+      }
+
+      usedModel = model || 'gemini-2.0-flash-preview-image-generation';
+      usedProvider = 'gemini';
+
+      // Use Gemini's image generation API
+      const geminiResponse = await fetch(
+        `https://generativelanguage.googleapis.com/v1beta/models/${usedModel}:generateContent?key=${geminiApiKey}`,
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            contents: [
+              {
+                parts: [{ text: `Generate an image: ${prompt}` }],
+              },
+            ],
+            generationConfig: {
+              responseModalities: ['TEXT', 'IMAGE'],
+            },
+          }),
+        }
+      );
+
+      if (!geminiResponse.ok) {
+        const errorText = await geminiResponse.text();
+        console.error('Gemini API error:', errorText);
+        return new Response(
+          JSON.stringify({ error: 'Failed to generate image with Gemini' }),
+          {
+            status: 500,
+            headers: { ...corsHeaders, 'Content-Type': 'application/json' },
+          }
+        );
+      }
+
+      const geminiData = await geminiResponse.json();
+      
+      // Extract image from Gemini response
+      const parts = geminiData.candidates?.[0]?.content?.parts || [];
+      const imagePart = parts.find((p: any) => p.inlineData?.mimeType?.startsWith('image/'));
+      
+      if (imagePart?.inlineData) {
+        imageData = { b64_json: imagePart.inlineData.data };
+      } else {
+        return new Response(
+          JSON.stringify({ error: 'No image generated by Gemini' }),
+          {
+            status: 500,
+            headers: { ...corsHeaders, 'Content-Type': 'application/json' },
+          }
+        );
+      }
+    } else {
+      // 6.2: Generate with OpenAI provider (DALL-E 3)
+      const openaiApiKey = Deno.env.get('OPENAI_API_KEY');
+      if (!openaiApiKey) {
+        return new Response(JSON.stringify({ error: 'OpenAI API not configured' }), {
+          status: 500,
+          headers: { ...corsHeaders, 'Content-Type': 'application/json' },
+        });
+      }
+
+      usedModel = model || 'dall-e-3';
+      usedProvider = 'openai';
+
+      const openaiResponse = await fetch('https://api.openai.com/v1/images/generations', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${openaiApiKey}`,
+        },
+        body: JSON.stringify({
+          model: usedModel,
+          prompt,
+          n: 1,
+          size,
+          quality,
+          response_format: 'b64_json',
+        }),
+      });
+
+      if (!openaiResponse.ok) {
+        const errorData = await openaiResponse.json();
+        console.error('OpenAI API error:', errorData);
+        return new Response(
+          JSON.stringify({ error: errorData.error?.message || 'Failed to generate image' }),
+          {
+            status: 500,
+            headers: { ...corsHeaders, 'Content-Type': 'application/json' },
+          }
+        );
+      }
+
+      const openaiData = await openaiResponse.json();
+      imageData = openaiData.data?.[0];
+    }
+
+    if (!imageData) {
+      return new Response(JSON.stringify({ error: 'No image data received' }), {
+        status: 500,
+        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
+      });
+    }
+
+    // 6.4: Store image in Supabase Storage and create generated_images record
+    let storageId: string | null = null;
+    let imageUrl: string | null = null;
+
+    if (imageData.b64_json) {
+      // Decode base64 and upload to storage
+      const imageBuffer = Uint8Array.from(atob(imageData.b64_json), (c) => c.charCodeAt(0));
+      const filename = `${user.id}/${crypto.randomUUID()}.png`;
+
+      const { data: uploadData, error: uploadError } = await supabaseAdmin.storage
+        .from('generated-images')
+        .upload(filename, imageBuffer, {
+          contentType: 'image/png',
+          upsert: false,
+        });
+
+      if (uploadError) {
+        console.error('Storage upload error:', uploadError);
+      } else {
+        storageId = uploadData.path;
+        
+        // Get signed URL for the image
+        const { data: signedUrlData } = await supabaseAdmin.storage
+          .from('generated-images')
+          .createSignedUrl(filename, 3600); // 1 hour expiry
+        
+        imageUrl = signedUrlData?.signedUrl || null;
+      }
+    } else if (imageData.url) {
+      imageUrl = imageData.url;
+    }
+
+    // Create generated_images record
+    const { data: record, error: recordError } = await supabase
+      .from('generated_images')
+      .insert({
+        user_id: user.id,
+        prompt,
+        image_url: imageUrl,
+        storage_id: storageId,
+        mime_type: 'image/png',
+        provider: usedProvider,
+        model: usedModel,
+      })
+      .select('id')
+      .single();
+
+    if (recordError) {
+      console.error('Error creating generated_images record:', recordError);
+    }
+
+    // 6.5: Return the image data URI and metadata
+    const response: GenerateImageResponse = {
+      success: true,
+      imageUrl: imageUrl || undefined,
+      imageDataUri: imageData.b64_json ? `data:image/png;base64,${imageData.b64_json}` : undefined,
+      storageId: storageId || undefined,
+      recordId: record?.id,
+      provider: usedProvider,
+      model: usedModel,
+    };
+
+    return new Response(JSON.stringify(response), {
+      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
+    });
+  } catch (error) {
+    console.error('Generate image error:', error);
+    return new Response(
+      JSON.stringify({
+        error: error instanceof Error ? error.message : 'Internal server error',
+      }),
+      {
+        status: 500,
+        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
+      }
+    );
+  }
+});