The Image Analyzer is a powerful and flexible feature that allows you to create various AI-powered analysis flows by simply defining a configuration. It's designed to be easily extensible without requiring significant code changes.

Overview

The entire image analysis feature is driven by a master configuration file.

src/features/image-analyzer/config/master-analysis-config.ts: This is the single source of truth. It defines all available analysis flows, including the photo capture steps, UI text, and the backend logic to call.
Dynamic Routes: The screens for this feature use Expo Router's dynamic routes (e.g., /analysis/[type]). The type parameter from the URL is used to look up the correct configuration from the master file.
Backend Logic: The AI analysis itself is handled by the analyzeImages action in convex/imageAnalysisFunctions.ts, which takes the image data and a configuration ID.

How-To: Create a New Analysis Type

Let's walk through creating a new "Car Damage Analyzer" to see how easy it is to extend the system.

Step 1: Define the Backend Logic in Convex

First, we need to tell our backend how to analyze car damage.

Open convex/lib/ai/analysisConfigs.ts and add a new configuration object for our car analysis. This includes the traits to score and the prompts for the AI.

convex/lib/ai/analysisConfigs.ts

// ... existing configs

export const CAR_ANALYSIS_CONFIG: AnalysisConfig = {
  id: 'car_analysis',
  name: 'Vehicle Damage Analysis',
  description: 'Comprehensive analysis of vehicle damage from images.',
  traits: {
    dent_severity: {
      name: 'Dent Severity',
      description: 'The severity of any dents or impacts.',
      instructions: 'Analyze the depth and size of any dents.',
    },
    scratch_length: {
      name: 'Scratch Length',
      description: 'The length and depth of any scratches.',
      instructions: 'Assess the length and visibility of scratches on the paint.',
    },
    // ... add more traits like 'paint_damage', 'part_alignment', etc.
  },
  prompts: {
    base: 'You are an expert car insurance adjuster. Analyze the provided vehicle images for damage.',
    instructions: 'Please analyze the vehicle and provide scores (0-100) and feedback for each damage trait...',
  },
  schema: z.object({
    // ... define the Zod schema for the expected AI response
  }),
};

// IMPORTANT: Register your new config
export const ANALYSIS_CONFIGS: Record<string, AnalysisConfig> = {
  face_analysis: FACE_ANALYSIS_CONFIG,
  car_analysis: CAR_ANALYSIS_CONFIG, // <-- Add your new config here
};

Step 2: Define the Frontend Flow

Now, let's create the configuration for the frontend UI.

Open src/features/image-analyzer/config/master-analysis-config.ts and add a new entry to the MASTER_ANALYSIS_CONFIGS object.

src/features/image-analyzer/config/master-analysis-config.ts

// ... existing configs

export const MASTER_ANALYSIS_CONFIGS: Record<string, AnalysisFlowConfig> = {
  'face-analysis': {
    // ...
  },
  'car-damage-check': { // This is our new flow ID
    id: 'car-damage-check',
    name: 'Car Damage Check',
    icon: '🚗',
    color: '#EF4444', // Red
    convexAnalysisConfigId: 'car_analysis', // Links to the backend config
    photoSteps: [
      {
        id: 'front_damage',
        label: 'Front View',
        description: 'Capture a clear photo of the front of the car.',
        guideImage: require('@assets/features/image-identifier/front.jpg'), // Replace with a car guide image
      },
      {
        id: 'side_damage',
        label: 'Side View',
        description: 'Capture the side where the damage occurred.',
        guideImage: require('@assets/features/image-identifier/side.jpg'), // Replace
      },
    ],
    skipOptionsScreen: true, // Go straight to analysis
    defaultPreferences: {
      goal: 'assess_damage',
      feedbackStyle: 'professional',
    },
    availableGoals: [],
    availableFeedbackStyles: [],
  },
};

Step 3: Add a Button to the Home Screen

Finally, add a new <FeatureButton> to the home screen to launch your new flow.

Open src/app/(tabs)/index.tsx and add a new entry to the features array.

src/app/(tabs)/index.tsx

const features = [
  // ... existing features
  {
    id: 'car-damage-check',
    title: 'Car Damage Check',
    icon: '🚗',
    color: '#EF4444', // Red
    description: 'Assess vehicle damage with AI',
    route: '/analysis/car-damage-check', // This route now works automatically!
    testID: 'car-damage-button',
  },
];

And that's it! You have now created a completely new, end-to-end AI analysis feature by defining its configuration in just three places.

The Image Analyzer

Overview

How-To: Create a New Analysis Type

Step 1: Define the Backend Logic in Convex

Step 2: Define the Frontend Flow

Step 3: Add a Button to the Home Screen

On this page