vibefast-cli 1.1.3 → 1.2.1

package/recipes/image-analysis-supabase/packages/backend/supabase/functions/analyze-image/index.ts

@@ -0,0 +1,312 @@
+/**
+ * Analyze Image Edge Function
+ *
+ * Handles AI image analysis with JWT authentication.
+ * Accepts base64 images and analysis preferences.
+ *
+ * Requirements: 7.1, 7.2, 7.3, 7.4
+ */
+
+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 AnalyzeImageRequest {
+  images: Array<{
+    data: string; // base64 encoded image
+    mimeType?: string;
+  }>;
+  preferences: {
+    goal?: string;
+    feedbackStyle?: 'detailed' | 'concise' | 'bullet-points';
+    focusAreas?: string[];
+  };
+  analysisConfigId?: string;
+  provider?: 'openai' | 'gemini';
+}
+
+interface AnalyzeImageResponse {
+  success: boolean;
+  analysisId: string;
+  status: 'processing' | 'completed' | 'failed';
+  results?: any;
+  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 {
+    // 7.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' },
+      });
+    }
+
+    // 7.1: Parse request body - accept base64 images and preferences
+    const body: AnalyzeImageRequest = await req.json();
+    const { images, preferences, analysisConfigId, provider = 'openai' } = body;
+
+    if (!images || images.length === 0) {
+      return new Response(JSON.stringify({ error: 'At least one image is required' }), {
+        status: 400,
+        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
+      });
+    }
+
+    // Upload images to storage and get storage IDs
+    const imageStorageIds: string[] = [];
+    for (const image of images) {
+      const imageBuffer = Uint8Array.from(atob(image.data), (c) => c.charCodeAt(0));
+      const filename = `${user.id}/analysis/${crypto.randomUUID()}.${image.mimeType?.split('/')[1] || 'png'}`;
+
+      const { data: uploadData, error: uploadError } = await supabaseAdmin.storage
+        .from('chat-attachments')
+        .upload(filename, imageBuffer, {
+          contentType: image.mimeType || 'image/png',
+          upsert: false,
+        });
+
+      if (uploadError) {
+        console.error('Storage upload error:', uploadError);
+      } else {
+        imageStorageIds.push(uploadData.path);
+      }
+    }
+
+    // 7.2: Create image_analyses record with status "processing"
+    const { data: analysisRecord, error: createError } = await supabase
+      .from('image_analyses')
+      .insert({
+        user_id: user.id,
+        status: 'processing',
+        image_storage_ids: imageStorageIds,
+        analysis_config_id: analysisConfigId || null,
+        preferences: preferences || {},
+      })
+      .select('id')
+      .single();
+
+    if (createError) {
+      console.error('Error creating analysis record:', createError);
+      return new Response(
+        JSON.stringify({ error: 'Failed to create analysis record' }),
+        {
+          status: 500,
+          headers: { ...corsHeaders, 'Content-Type': 'application/json' },
+        }
+      );
+    }
+
+    // Build the analysis prompt based on preferences
+    let analysisPrompt = 'Analyze this image';
+    if (preferences?.goal) {
+      analysisPrompt += ` with the goal of: ${preferences.goal}`;
+    }
+    if (preferences?.focusAreas && preferences.focusAreas.length > 0) {
+      analysisPrompt += `. Focus on: ${preferences.focusAreas.join(', ')}`;
+    }
+    if (preferences?.feedbackStyle) {
+      analysisPrompt += `. Provide ${preferences.feedbackStyle} feedback`;
+    }
+    analysisPrompt += '.';
+
+    try {
+      let analysisResults: any;
+
+      if (provider === 'gemini') {
+        // Use Gemini for analysis
+        const geminiApiKey = Deno.env.get('GEMINI_API_KEY');
+        if (!geminiApiKey) {
+          throw new Error('Gemini API not configured');
+        }
+
+        const imageParts = images.map((img) => ({
+          inlineData: {
+            mimeType: img.mimeType || 'image/png',
+            data: img.data,
+          },
+        }));
+
+        const geminiResponse = await fetch(
+          `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${geminiApiKey}`,
+          {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              contents: [
+                {
+                  parts: [
+                    ...imageParts,
+                    { text: analysisPrompt },
+                  ],
+                },
+              ],
+            }),
+          }
+        );
+
+        if (!geminiResponse.ok) {
+          const errorText = await geminiResponse.text();
+          throw new Error(`Gemini API error: ${errorText}`);
+        }
+
+        const geminiData = await geminiResponse.json();
+        analysisResults = {
+          provider: 'gemini',
+          model: 'gemini-2.0-flash',
+          analysis: geminiData.candidates?.[0]?.content?.parts?.[0]?.text || '',
+          raw: geminiData,
+        };
+      } else {
+        // Use OpenAI for analysis
+        const openaiApiKey = Deno.env.get('OPENAI_API_KEY');
+        if (!openaiApiKey) {
+          throw new Error('OpenAI API not configured');
+        }
+
+        const imageContents = images.map((img) => ({
+          type: 'image_url',
+          image_url: {
+            url: `data:${img.mimeType || 'image/png'};base64,${img.data}`,
+          },
+        }));
+
+        const openaiResponse = await fetch('https://api.openai.com/v1/chat/completions', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${openaiApiKey}`,
+          },
+          body: JSON.stringify({
+            model: 'gpt-4o',
+            messages: [
+              {
+                role: 'user',
+                content: [
+                  { type: 'text', text: analysisPrompt },
+                  ...imageContents,
+                ],
+              },
+            ],
+            max_tokens: 1000,
+          }),
+        });
+
+        if (!openaiResponse.ok) {
+          const errorData = await openaiResponse.json();
+          throw new Error(errorData.error?.message || 'OpenAI API error');
+        }
+
+        const openaiData = await openaiResponse.json();
+        analysisResults = {
+          provider: 'openai',
+          model: 'gpt-4o',
+          analysis: openaiData.choices?.[0]?.message?.content || '',
+          raw: openaiData,
+        };
+      }
+
+      // 7.3: Update record with results and status "completed"
+      const { error: updateError } = await supabase
+        .from('image_analyses')
+        .update({
+          status: 'completed',
+          results: analysisResults,
+        })
+        .eq('id', analysisRecord.id);
+
+      if (updateError) {
+        console.error('Error updating analysis record:', updateError);
+      }
+
+      const response: AnalyzeImageResponse = {
+        success: true,
+        analysisId: analysisRecord.id,
+        status: 'completed',
+        results: analysisResults,
+      };
+
+      return new Response(JSON.stringify(response), {
+        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
+      });
+    } catch (analysisError) {
+      // 7.4: Update record with status "failed" and error message
+      const errorMessage = analysisError instanceof Error ? analysisError.message : 'Unknown error';
+      
+      await supabase
+        .from('image_analyses')
+        .update({
+          status: 'failed',
+          error_message: errorMessage,
+        })
+        .eq('id', analysisRecord.id);
+
+      const response: AnalyzeImageResponse = {
+        success: false,
+        analysisId: analysisRecord.id,
+        status: 'failed',
+        error: errorMessage,
+      };
+
+      return new Response(JSON.stringify(response), {
+        status: 500,
+        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
+      });
+    }
+  } catch (error) {
+    console.error('Analyze 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-analysis-supabase/packages/backend/supabase/migrations/image_analysis.sql

@@ -0,0 +1,42 @@
+-- Image Analysis Feature Migration
+-- Creates tables for AI image analysis results
+-- Run this migration when adding the image-analysis feature via CLI
+
+-- ============================================================================
+-- IMAGE_ANALYSES TABLE
+-- Stores AI image analysis requests and results
+-- ============================================================================
+CREATE TABLE IF NOT EXISTS image_analyses (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  status TEXT NOT NULL CHECK (status IN ('processing', 'completed', 'failed')),
+  image_storage_ids TEXT[] NOT NULL,
+  analysis_config_id TEXT,
+  preferences JSONB NOT NULL,
+  results JSONB,
+  error_message TEXT,
+  created_at TIMESTAMPTZ DEFAULT now()
+);
+
+-- ============================================================================
+-- INDEXES
+-- ============================================================================
+CREATE INDEX IF NOT EXISTS idx_image_analyses_user_id ON image_analyses(user_id);
+CREATE INDEX IF NOT EXISTS idx_image_analyses_status ON image_analyses(status);
+
+-- ============================================================================
+-- RLS POLICIES
+-- ============================================================================
+ALTER TABLE image_analyses ENABLE ROW LEVEL SECURITY;
+
+CREATE POLICY "image_analyses_select_own" ON image_analyses
+  FOR SELECT USING (auth.uid() = user_id);
+
+CREATE POLICY "image_analyses_insert_own" ON image_analyses
+  FOR INSERT WITH CHECK (auth.uid() = user_id);
+
+CREATE POLICY "image_analyses_update_own" ON image_analyses
+  FOR UPDATE USING (auth.uid() = user_id);
+
+CREATE POLICY "image_analyses_delete_own" ON image_analyses
+  FOR DELETE USING (auth.uid() = user_id);

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

@@ -0,0 +1,57 @@
+{
+  "name": "image-analysis",
+  "version": "1.0.0",
+  "description": "AI-powered image analysis with Supabase backend",
+  "copy": [
+    {
+      "from": "apps/native/src/features/image-analyzer",
+      "to": "apps/native/src/features/image-analyzer"
+    },
+    {
+      "from": "packages/backend/supabase/functions/analyze-image",
+      "to": "packages/backend/supabase/functions/analyze-image"
+    },
+    {
+      "from": "packages/backend/supabase/migrations/image_analysis.sql",
+      "to": "packages/backend/supabase/migrations/image_analysis.sql"
+    },
+    {
+      "from": "packages/backend/src/services/image-analyses.ts",
+      "to": "packages/backend/src/services/image-analyses.ts"
+    }
+  ],
+  "nav": {
+    "href": "/(root)/(protected)/image-analyzer",
+    "label": "Image Analyzer",
+    "icon": "🔍",
+    "color": "#3B82F6"
+  },
+  "target": "native",
+  "dependencies": {
+    "expo": [
+      "@supabase/supabase-js",
+      "@tanstack/react-query",
+      "expo-camera",
+      "expo-image-picker"
+    ]
+  },
+  "env": [
+    {
+      "key": "OPENAI_API_KEY",
+      "description": "OpenAI API key for vision analysis",
+      "example": "sk-...",
+      "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 analyze-image"
+    }
+  ]
+}

package/recipes/image-generator/apps/native/src/features/image-generator/app/index.tsx

@@ -22,11 +22,18 @@ import type { ReportReason } from '@/features/chatbot/constants/report-reasons';
 import { ImageModelSelector } from '@/features/image-generator/components/image-model-selector';
 import { ImagePlaceholder } from '@/features/image-generator/components/image-placeholder';
 import { useImageGenerator } from '@/features/image-generator/hooks/use-image-generator';
+import { useImageGeneratorSettings } from '@/features/image-generator/hooks/use-image-generator-settings';
 import { ImageSaveService } from '@/features/image-generator/services/image-save-service';
 import { translate } from '@/lib';
 import { useThemeConfig } from '@/lib/use-theme-config';
 
 export default function ImageGeneratorScreen() {
+  const {
+    settings,
+    isLoaded: isSettingsLoaded,
+    updateModel,
+  } = useImageGeneratorSettings();
+
   const {
     prompt,
     setPrompt,
@@ -34,7 +41,10 @@ export default function ImageGeneratorScreen() {
     generatedImageData,
     generatedImageUri,
     handleGenerateImage,
-  } = useImageGenerator();
+  } = useImageGenerator({
+    settings,
+    isSettingsLoaded,
+  });
 
   const [isReportModalVisible, setIsReportModalVisible] = useState(false);
   const theme = useThemeConfig();
@@ -154,7 +164,11 @@ export default function ImageGeneratorScreen() {
                 <Text className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
                   Generated Image
                 </Text>
-                <ImageModelSelector testID="image-model-selector-inline" />
+                <ImageModelSelector
+                  testID="image-model-selector-inline"
+                  settings={settings}
+                  onModelChange={updateModel}
+                />
               </View>
               {generatedImageUri ? (
                 <Image

package/recipes/image-generator/apps/native/src/features/image-generator/components/image-model-selector.tsx

@@ -7,7 +7,7 @@ import colors from '@/components/ui/colors';
 import { Modal, useModal } from '@/components/ui/core/overlays/modal';
 import { GeminiIcon } from '@/components/ui/icons/gemini';
 import { OpenaiIcon } from '@/components/ui/icons/openai';
-import { useImageGeneratorSettings } from '@/features/image-generator/hooks/use-image-generator-settings';
+import type { ImageGeneratorSettings } from '@/features/image-generator/hooks/use-image-generator-settings';
 import {
   DEFAULT_IMAGE_MODEL_ID,
   getImageModelById,
@@ -33,6 +33,8 @@ const getProviderIcon = (provider: ImageProvider): React.ComponentType<any> => {
 
 type ModelSelectorProps = {
   testID?: string;
+  settings: ImageGeneratorSettings;
+  onModelChange: (modelId: ImageModelId) => Promise<void> | void;
 };
 
 /**
@@ -40,10 +42,11 @@ type ModelSelectorProps = {
  */
 export const ImageModelSelector: React.FC<ModelSelectorProps> = ({
   testID = 'image-model-selector',
+  settings,
+  onModelChange,
 }) => {
   const theme = useThemeConfig();
   const modal = useModal();
-  const { settings, updateModel } = useImageGeneratorSettings();
 
   const currentModel =
     getImageModelById(settings.modelId) ??
@@ -55,9 +58,12 @@ export const ImageModelSelector: React.FC<ModelSelectorProps> = ({
     return <IconComponent />;
   };
 
-  const handleModelSelect = (modelId: ImageModelId) => {
-    updateModel(modelId);
-    modal.dismiss();
+  const handleModelSelect = async (modelId: ImageModelId) => {
+    try {
+      await onModelChange(modelId);
+    } finally {
+      modal.dismiss();
+    }
   };
 
   return (

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

@@ -5,7 +5,7 @@ import { Alert } from 'react-native';
 import { imageGeneratorApi } from '@/api-client/image-generator';
 
 import { getImageModelById } from '../models/models';
-import { useImageGeneratorSettings } from './use-image-generator-settings';
+import type { ImageGeneratorSettings } from './use-image-generator-settings';
 
 type GeneratedImageData = {
   imageUri: string;
@@ -20,14 +20,20 @@ type GeneratedImageData = {
 /**
  * Custom hook for managing image generation state and operations
  */
-export const useImageGenerator = () => {
+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 { settings, isLoaded } = useImageGeneratorSettings();
-
   const generateImage = imageGeneratorApi.useGenerateImage();
 
   /**
@@ -39,7 +45,7 @@ export const useImageGenerator = () => {
       return;
     }
 
-    if (!isLoaded) {
+    if (!isSettingsLoaded) {
       Alert.alert('Please wait', 'Settings are still loading...');
       return;
     }

package/recipes/image-generator/packages/backend/convex/imageGeneration/index.ts

@@ -2,11 +2,11 @@
  * Image Generation Domain Aggregator
  *
  * Single entry point for all image generation Convex functions.
- * Re-exports functions from imageGeneratorFunctions.ts to decouple
+ * Re-exports functions from imageGenerator.ts to decouple
  * frontend from internal file structure.
  */
 
 export {
   generateImageAction,
   saveImageRecord,
-} from '../imageGeneratorFunctions';
+} from '../imageGenerator';

package/recipes/image-generator/recipe.json

@@ -1,12 +1,8 @@
 {
   "name": "image-generator",
-  "version": "1.1.0",
+  "version": "1.0.0",
   "description": "AI-powered image generation",
   "copy": [
-    {
-      "from": "apps/native/src/app/(root)/(protected)/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"
@@ -15,49 +11,30 @@
       "from": "apps/native/src/api-client/image-generator.ts",
       "to": "apps/native/src/api-client/image-generator.ts"
     },
-    {
-      "from": "packages/backend/convex/imageGeneration/index.ts",
-      "to": "packages/backend/convex/imageGeneration/index.ts"
-    },
     {
       "from": "packages/backend/convex/imageGenerator.ts",
       "to": "packages/backend/convex/imageGenerator.ts"
+    },
+    {
+      "from": "packages/backend/convex/imageGeneration",
+      "to": "packages/backend/convex/imageGeneration"
     }
   ],
+  "configuration": {
+    "apiClient": {
+      "exports": [
+        "export { type ImageGeneratorApi, imageGeneratorApi } from './image-generator';"
+      ]
+    }
+  },
   "nav": {
     "href": "/(root)/(protected)/image-generator",
     "label": "Image Generator",
     "icon": "🎨",
-    "color": "#A855F7"
+    "color": "#8B5CF6"
   },
   "target": "native",
-  "env": [
-    {
-      "key": "OPENAI_API_KEY",
-      "description": "OpenAI key for DALL-E image generation (optional - use this OR Gemini, not both).",
-      "example": "sk-abc123def456",
-      "link": "https://platform.openai.com/account/api-keys",
-      "file": "packages/backend/.env.local"
-    },
-    {
-      "key": "GEMINI_API_KEY",
-      "description": "Google Generative AI key for Gemini image generation (optional - use this OR OpenAI, not both).",
-      "example": "AIzaSyExampleGeminiKey",
-      "link": "https://aistudio.google.com/api-keys",
-      "file": "packages/backend/.env.local"
-    }
-  ],
-  "manualSteps": [
-    {
-      "title": "Get an LLM API key (OpenAI or Gemini)",
-      "description": "You can start with either provider (OpenAI or Gemini). Add one now; add the other later if you want.",
-      "link": "https://platform.openai.com/account/api-keys"
-    },
-    {
-      "title": "Add key to .env file",
-      "description": "Open your .env file and add at least one key:\n\n  For OpenAI: OPENAI_API_KEY=sk-...\n  For Gemini: GEMINI_API_KEY=AIzaSy...\nYou can add both; the app will use the configured provider.",
-      "file": ".env",
-      "content": "OPENAI_API_KEY=sk-...\nGEMINI_API_KEY=AIzaSy...\n"
-    }
-  ]
+  "dependencies": {
+    "expo": ["expo-file-system", "expo-media-library", "expo-sharing"]
+  }
 }

package/recipes/image-generator-supabase/apps/native/src/features/image-generator/app/_layout.tsx

@@ -0,0 +1,26 @@
+import { Stack } from 'expo-router';
+
+import { translate } from '@/lib';
+
+export default function ImageGeneratorLayout() {
+  return (
+    <Stack
+      screenOptions={{
+        headerShown: true,
+      }}
+    >
+      <Stack.Screen
+        name="index"
+        options={{
+          title: translate('image_generator.title'),
+        }}
+      />
+      <Stack.Screen
+        name="gallery"
+        options={{
+          title: `${translate('image_generator.gallery_title')} (0)`,
+        }}
+      />
+    </Stack>
+  );
+}