vibefast-cli 1.1.3 → 1.2.1

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

package/recipes/image-generator-supabase/packages/backend/supabase/migrations/image_generator.sql

@@ -0,0 +1,71 @@
+-- Image Generator Feature Migration
+-- Creates tables for AI-generated images
+-- Run this migration when adding the image-generator feature via CLI
+
+-- ============================================================================
+-- GENERATED_IMAGES TABLE
+-- Stores AI-generated images metadata
+-- ============================================================================
+CREATE TABLE IF NOT EXISTS generated_images (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  prompt TEXT NOT NULL,
+  image_url TEXT,
+  storage_id TEXT,
+  mime_type TEXT,
+  provider TEXT NOT NULL,
+  model TEXT NOT NULL,
+  created_at TIMESTAMPTZ DEFAULT now()
+);
+
+-- ============================================================================
+-- INDEXES
+-- ============================================================================
+CREATE INDEX IF NOT EXISTS idx_generated_images_user_id ON generated_images(user_id);
+
+-- ============================================================================
+-- RLS POLICIES
+-- ============================================================================
+ALTER TABLE generated_images ENABLE ROW LEVEL SECURITY;
+
+CREATE POLICY "generated_images_select_own" ON generated_images
+  FOR SELECT USING (auth.uid() = user_id);
+
+CREATE POLICY "generated_images_insert_own" ON generated_images
+  FOR INSERT WITH CHECK (auth.uid() = user_id);
+
+CREATE POLICY "generated_images_update_own" ON generated_images
+  FOR UPDATE USING (auth.uid() = user_id);
+
+CREATE POLICY "generated_images_delete_own" ON generated_images
+  FOR DELETE USING (auth.uid() = user_id);
+
+-- ============================================================================
+-- STORAGE BUCKET - generated-images
+-- ============================================================================
+INSERT INTO storage.buckets (id, name, public, file_size_limit, allowed_mime_types)
+VALUES (
+  'generated-images',
+  'generated-images',
+  false,
+  10485760,  -- 10MB limit
+  ARRAY['image/jpeg', 'image/png', 'image/webp']
+) ON CONFLICT (id) DO NOTHING;
+
+-- Storage RLS for generated-images
+CREATE POLICY "Users can view their own generated images"
+ON storage.objects FOR SELECT TO authenticated
+USING (bucket_id = 'generated-images' AND (storage.foldername(name))[1] = auth.uid()::text);
+
+CREATE POLICY "Users can upload their own generated images"
+ON storage.objects FOR INSERT TO authenticated
+WITH CHECK (bucket_id = 'generated-images' AND (storage.foldername(name))[1] = auth.uid()::text);
+
+CREATE POLICY "Users can update their own generated images"
+ON storage.objects FOR UPDATE TO authenticated
+USING (bucket_id = 'generated-images' AND (storage.foldername(name))[1] = auth.uid()::text)
+WITH CHECK (bucket_id = 'generated-images' AND (storage.foldername(name))[1] = auth.uid()::text);
+
+CREATE POLICY "Users can delete their own generated images"
+ON storage.objects FOR DELETE TO authenticated
+USING (bucket_id = 'generated-images' AND (storage.foldername(name))[1] = auth.uid()::text);

package/recipes/image-generator-supabase/recipe.json

@@ -0,0 +1,59 @@
+{
+  "name": "image-generator",
+  "version": "1.0.0",
+  "description": "AI-powered image generation with Supabase backend",
+  "copy": [
+    {
+      "from": "apps/native/src/app/image-generator",
+      "to": "apps/native/src/app/(root)/(protected)/image-generator"
+    },
+    {
+      "from": "apps/native/src/features/image-generator",
+      "to": "apps/native/src/features/image-generator"
+    },
+    {
+      "from": "packages/backend/supabase/functions/generate-image",
+      "to": "packages/backend/supabase/functions/generate-image"
+    },
+    {
+      "from": "packages/backend/supabase/migrations/image_generator.sql",
+      "to": "packages/backend/supabase/migrations/image_generator.sql"
+    }
+  ],
+  "nav": {
+    "href": "/(root)/(protected)/image-generator",
+    "label": "Image Generator",
+    "icon": "🎨",
+    "color": "#8B5CF6"
+  },
+  "target": "native",
+  "dependencies": {
+    "expo": [
+      "@supabase/supabase-js",
+      "@tanstack/react-query",
+      "expo-file-system",
+      "expo-media-library",
+      "expo-sharing"
+    ]
+  },
+  "env": [
+    {
+      "key": "OPENAI_API_KEY",
+      "description": "OpenAI API key for DALL-E image generation",
+      "example": "sk-...",
+      "link": "https://platform.openai.com/api-keys",
+      "file": "packages/backend/supabase/.env",
+      "required": true
+    }
+  ],
+  "manualSteps": [
+    {
+      "title": "Apply Supabase migration",
+      "description": "Run: cd packages/backend && supabase db push"
+    },
+    {
+      "title": "Deploy Edge Function",
+      "description": "Run: cd packages/backend && supabase functions deploy generate-image"
+    }
+  ]
+}