vibefast-cli 1.1.5 → 1.2.1

package/recipes/image-analysis-supabase/apps/native/src/features/image-analyzer/app/camera.tsx

@@ -0,0 +1,221 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { type CameraType, CameraView, useCameraPermissions } from 'expo-camera';
+import { Stack, useLocalSearchParams, useRouter } from 'expo-router';
+import React, { useCallback, useRef, useState } from 'react';
+import { ActivityIndicator, Alert, TouchableOpacity, View } from 'react-native';
+
+import { Button, Image, Text } from '@/components/ui';
+import { useCameraCaptureStore } from '@/features/image-analyzer/hooks/use-image-analysis';
+
+type CameraScreenParams = {
+  stepId: string;
+  stepLabel: string;
+  stepDescription: string;
+  guideText: string;
+};
+
+/**
+ * Dedicated camera screen for capturing images with frame overlay guide.
+ * Based on coin-identifier-real camera implementation.
+ */
+export default function CameraScreen() {
+  const router = useRouter();
+  const params = useLocalSearchParams() as CameraScreenParams;
+  const setCapturedImage = useCameraCaptureStore(
+    (state) => state.setCapturedImage,
+  );
+  const [permission, requestPermission] = useCameraPermissions();
+  const [facing, setFacing] = useState<CameraType>('back');
+  const [capturedImageUri, setCapturedImageUri] = useState<string | null>(null);
+  const [isCapturing, setIsCapturing] = useState(false);
+  const cameraRef = useRef<CameraView>(null);
+
+  // Handle photo capture
+  const handleTakePhoto = useCallback(async () => {
+    if (!cameraRef.current || isCapturing) return;
+
+    try {
+      setIsCapturing(true);
+      const photo = await cameraRef.current.takePictureAsync({
+        quality: 0.8,
+      });
+
+      if (photo?.uri) {
+        setCapturedImageUri(photo.uri);
+      }
+    } catch (error) {
+      console.error('Error taking photo:', error);
+      Alert.alert('Error', 'Failed to take photo. Please try again.');
+    } finally {
+      setIsCapturing(false);
+    }
+  }, [isCapturing]);
+
+  // Handle retake
+  const handleRetake = useCallback(() => {
+    setCapturedImageUri(null);
+  }, []);
+
+  // Handle accept photo
+  const handleAccept = useCallback(() => {
+    if (capturedImageUri) {
+      // Store the captured image in Zustand store
+      setCapturedImage(capturedImageUri, params.stepId);
+      // Simply navigate back
+      router.back();
+    }
+  }, [capturedImageUri, setCapturedImage, params.stepId, router]);
+
+  // Toggle camera facing
+  const toggleCameraFacing = useCallback(() => {
+    setFacing((current) => (current === 'back' ? 'front' : 'back'));
+  }, []);
+
+  // Check camera permissions
+  if (!permission) {
+    return (
+      <View className="flex-1 items-center justify-center bg-black">
+        <ActivityIndicator size="large" color="white" />
+      </View>
+    );
+  }
+
+  if (!permission.granted) {
+    return (
+      <View className="flex-1 items-center justify-center bg-black px-6">
+        <Text className="mb-4 text-center text-white">
+          Camera permission is required to take photos
+        </Text>
+        <Button
+          label="Grant Permission"
+          onPress={requestPermission}
+          variant="outline"
+        />
+      </View>
+    );
+  }
+
+  // Render photo preview
+  if (capturedImageUri) {
+    return (
+      <>
+        <Stack.Screen options={{ headerShown: false }} />
+        <View className="flex-1 bg-black">
+          <Image
+            source={{ uri: capturedImageUri }}
+            className="flex-1"
+            contentFit="contain"
+          />
+
+          {/* Overlay with step info */}
+          <View className="absolute inset-x-0 top-12 px-6">
+            <View className="rounded-xl bg-black/70 p-4">
+              <Text className="text-center text-lg font-bold text-white">
+                {params.stepLabel}
+              </Text>
+              <Text className="text-center text-sm text-white/80">
+                {params.stepDescription}
+              </Text>
+            </View>
+          </View>
+
+          {/* Action buttons */}
+          <View className="absolute inset-x-0 bottom-12 flex-row justify-center gap-x-4 px-6">
+            <Button
+              label="Retake"
+              variant="outline"
+              onPress={handleRetake}
+              className="flex-1 border-slate-500 bg-slate-800"
+              textClassName="text-black"
+            />
+            <Button
+              label="Accept"
+              onPress={handleAccept}
+              className="flex-1"
+              style={{ backgroundColor: '#059669' }}
+            />
+          </View>
+        </View>
+      </>
+    );
+  }
+
+  // Render camera view
+  return (
+    <>
+      <Stack.Screen options={{ headerShown: false }} />
+      <View className="flex-1 bg-black">
+        <CameraView
+          ref={cameraRef}
+          style={{ flex: 1 }}
+          facing={facing}
+          mode="picture"
+        >
+          {/* Header with step info */}
+          <View className="absolute inset-x-0 top-12 px-6">
+            <View className="rounded-xl bg-black/70 p-4">
+              <Text className="text-center text-lg font-bold text-white">
+                {params.stepLabel}
+              </Text>
+              <Text className="text-center text-sm text-white/80">
+                📸 {params.guideText}
+              </Text>
+            </View>
+          </View>
+
+          {/* Frame guide overlay */}
+          <View className="absolute inset-0 items-center justify-center">
+            <View className="relative size-80">
+              {/* Frame */}
+              <View className="absolute inset-0 rounded-2xl border-2 border-white/60" />
+
+              {/* Corner guides */}
+              <View className="absolute left-2 top-2 size-6 border-l-4 border-t-4 border-white" />
+              <View className="absolute right-2 top-2 size-6 border-r-4 border-t-4 border-white" />
+              <View className="absolute bottom-2 left-2 size-6 border-b-4 border-l-4 border-white" />
+              <View className="absolute bottom-2 right-2 size-6 border-b-4 border-r-4 border-white" />
+
+              {/* Center guide */}
+              <View className="absolute inset-0 items-center justify-center">
+                <View className="h-1 w-8 bg-white/60" />
+                <View className="absolute h-8 w-1 bg-white/60" />
+              </View>
+            </View>
+          </View>
+
+          {/* Controls */}
+          <View className="absolute inset-x-0 bottom-12 flex-row items-center justify-center px-6">
+            {/* Close button */}
+            <TouchableOpacity
+              onPress={() => router.back()}
+              className="absolute left-6 size-12 items-center justify-center rounded-full bg-black/50"
+            >
+              <Text className="text-xl text-white">✕</Text>
+            </TouchableOpacity>
+
+            {/* Shutter button */}
+            <TouchableOpacity
+              onPress={handleTakePhoto}
+              disabled={isCapturing}
+              className="size-20 items-center justify-center rounded-full border-4 border-white bg-white/20"
+            >
+              {isCapturing ? (
+                <ActivityIndicator size="large" color="white" />
+              ) : (
+                <View className="size-16 rounded-full bg-white" />
+              )}
+            </TouchableOpacity>
+
+            {/* Flip camera button */}
+            <TouchableOpacity
+              onPress={toggleCameraFacing}
+              className="absolute right-6 size-12 items-center justify-center rounded-full bg-black/50"
+            >
+              <MaterialIcons name="cameraswitch" size={24} color="white" />
+            </TouchableOpacity>
+          </View>
+        </CameraView>
+      </View>
+    </>
+  );
+}

package/recipes/image-analysis-supabase/apps/native/src/features/image-analyzer/app/image-capture-screen.tsx

@@ -0,0 +1,333 @@
+import * as ImagePicker from 'expo-image-picker';
+import { Stack, useRouter } from 'expo-router';
+import React, { useCallback, useEffect, useState } from 'react';
+import { Alert, ScrollView, TouchableOpacity, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { Button, Image, Text } from '@/components/ui';
+import type { AnalysisFlowConfig } from '@/features/image-analyzer/config/master-analysis-config';
+import { useCameraCaptureStore } from '@/features/image-analyzer/hooks/use-image-analysis';
+import { translate } from '@/lib';
+
+export type CapturedImage = {
+  uri: string;
+  stepId: string;
+};
+
+type ImageCaptureScreenProps = {
+  config: AnalysisFlowConfig;
+};
+
+/**
+ * Multi-step image capture screen that works with any analysis configuration.
+ * Guides users through capturing photos based on the provided config.
+ */
+export function ImageCaptureScreen({ config }: ImageCaptureScreenProps) {
+  const router = useRouter();
+  const { capturedImageUri, stepId, clearCapturedImage } =
+    useCameraCaptureStore();
+  const [currentStepIndex, setCurrentStepIndex] = useState(0);
+  const [capturedImages, setCapturedImages] = useState<
+    (CapturedImage | null)[]
+  >(new Array(config.photoSteps.length).fill(null));
+
+  const currentStep = config.photoSteps[currentStepIndex];
+  const allImagesCaptured = capturedImages.every((img) => img !== null);
+
+  // Handle incoming captured image from camera screen via Zustand store
+  useEffect(() => {
+    if (capturedImageUri && stepId) {
+      // Find which step this image belongs to
+      const capturedStepIndex = config.photoSteps.findIndex(
+        (step) => step.id === stepId,
+      );
+
+      if (capturedStepIndex === -1) {
+        console.error('❌ Invalid stepId:', stepId);
+        clearCapturedImage();
+        return;
+      }
+
+      // Update the captured images array
+      setCapturedImages((prevImages) => {
+        const newCapturedImages = [...prevImages];
+        newCapturedImages[capturedStepIndex] = {
+          uri: capturedImageUri,
+          stepId: stepId,
+        };
+        return newCapturedImages;
+      });
+
+      // Only auto-advance if we're currently viewing the step we just captured
+      // This prevents jumping when user manually navigates to previous steps
+      setCurrentStepIndex((currentIndex) => {
+        if (currentIndex === capturedStepIndex) {
+          // We're on the step we just captured, advance to next if not last
+          const isLastStep = capturedStepIndex === config.photoSteps.length - 1;
+          return isLastStep ? capturedStepIndex : capturedStepIndex + 1;
+        }
+        // User is viewing a different step, don't auto-advance
+        return currentIndex;
+      });
+
+      clearCapturedImage();
+    }
+  }, [capturedImageUri, stepId, clearCapturedImage, config.photoSteps]);
+
+  // Handle camera launch
+  const handleOpenCamera = useCallback(async () => {
+    try {
+      const { status } = await ImagePicker.requestCameraPermissionsAsync();
+      if (status !== 'granted') {
+        Alert.alert(
+          'Permission Required',
+          'Camera permission is required to take photos.',
+        );
+        return;
+      }
+
+      router.push({
+        pathname: '/analysis/[type]/camera' as any,
+        params: {
+          type: config.id,
+          stepId: currentStep.id,
+          stepLabel: currentStep.label,
+          stepDescription: currentStep.description,
+        },
+      });
+    } catch (error) {
+      console.error('Error requesting camera permission:', error);
+      Alert.alert('Error', 'Failed to open camera. Please try again.');
+    }
+  }, [currentStep, router, config.id]);
+
+  // Handle gallery selection
+  const handleSelectFromGallery = useCallback(async () => {
+    try {
+      const { status } =
+        await ImagePicker.requestMediaLibraryPermissionsAsync();
+      if (status !== 'granted') {
+        Alert.alert(
+          'Permission Required',
+          'Photo library permission is required to select images.',
+        );
+        return;
+      }
+
+      const result = await ImagePicker.launchImageLibraryAsync({
+        mediaTypes: ImagePicker.MediaTypeOptions.Images,
+        allowsEditing: true,
+        aspect: [4, 3],
+        quality: 0.8,
+      });
+
+      if (!result.canceled && result.assets[0]) {
+        const imageUri = result.assets[0].uri;
+
+        setCapturedImages((prevImages) => {
+          const newCapturedImages = [...prevImages];
+          newCapturedImages[currentStepIndex] = {
+            uri: imageUri,
+            stepId: currentStep.id,
+          };
+          return newCapturedImages;
+        });
+
+        // Auto-advance to next step if not last
+        const isLastStep = currentStepIndex === config.photoSteps.length - 1;
+        if (!isLastStep) {
+          setCurrentStepIndex(currentStepIndex + 1);
+        }
+      }
+    } catch (error) {
+      console.error('Error selecting from gallery:', error);
+      Alert.alert('Error', 'Failed to select image. Please try again.');
+    }
+  }, [currentStepIndex, currentStep.id, config.photoSteps.length]);
+
+  // Handle step switching - allow clicking any step freely
+  const handleStepSwitch = useCallback((targetIndex: number) => {
+    setCurrentStepIndex(targetIndex);
+  }, []);
+
+  // Handle continue - either to options or directly to loading based on config
+  const handleContinue = useCallback(() => {
+    const imageUris = capturedImages.map((img) => img!.uri);
+
+    if (config.skipOptionsScreen) {
+      // Go directly to loading with default preferences
+      router.push({
+        pathname: '/analysis/[type]/loading' as any,
+        params: {
+          type: config.id,
+          imageUris: JSON.stringify(imageUris),
+          analysisGoal: config.defaultPreferences?.goal || 'comprehensive',
+          feedbackStyle:
+            config.defaultPreferences?.feedbackStyle || 'professional',
+        },
+      });
+    } else {
+      // Go to options screen
+      router.push({
+        pathname: '/analysis/[type]/analysis-options' as any,
+        params: {
+          type: config.id,
+          imageUris: JSON.stringify(imageUris),
+        },
+      });
+    }
+  }, [capturedImages, router, config]);
+
+  const insets = useSafeAreaInsets();
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: `${config.name} ${translate('analysis.setup_title')}`,
+          headerBackButtonDisplayMode: 'generic',
+        }}
+      />
+      <ScrollView
+        className="flex-1"
+        contentContainerStyle={{ paddingBottom: 140 + insets.bottom }}
+        showsVerticalScrollIndicator={false}
+      >
+        <View className="px-6 pt-4">
+          {/* Connected Step Progress Indicator */}
+          <View className="mb-8">
+            <View className="relative flex-row items-center justify-between">
+              {config.photoSteps.map((_, index) => (
+                <React.Fragment key={index}>
+                  {/* Step Circle */}
+                  <TouchableOpacity
+                    onPress={() => handleStepSwitch(index)}
+                    className={`relative z-10 size-16 items-center justify-center rounded-full border-2 ${
+                      capturedImages[index] !== null
+                        ? 'border-green-500 bg-green-500'
+                        : index === currentStepIndex
+                          ? 'border-primary-600 bg-primary-600'
+                          : 'border-neutral-300 bg-white dark:border-neutral-600 dark:bg-neutral-800'
+                    }`}
+                  >
+                    {capturedImages[index] !== null ? (
+                      <Text className="text-2xl font-bold text-white">✓</Text>
+                    ) : index === currentStepIndex ? (
+                      <Text className="text-xl font-semibold text-white">
+                        {index + 1}
+                      </Text>
+                    ) : (
+                      <Text className="text-xl font-semibold text-neutral-500 dark:text-neutral-400">
+                        {index + 1}
+                      </Text>
+                    )}
+                  </TouchableOpacity>
+
+                  {/* Connecting Line */}
+                  {index < config.photoSteps.length - 1 && (
+                    <View
+                      className={`mx-3 h-0.5 flex-1 ${
+                        capturedImages[index] !== null
+                          ? 'bg-green-500'
+                          : index < currentStepIndex
+                            ? 'bg-primary-600'
+                            : 'bg-neutral-300 dark:bg-neutral-600'
+                      }`}
+                    />
+                  )}
+                </React.Fragment>
+              ))}
+            </View>
+
+            {/* Step Labels */}
+            {/* <View className="mt-4 flex-row justify-between px-2">
+              {config.photoSteps.map((step, index) => (
+                <View key={step.id} className="w-28 items-center">
+                  <Text
+                    numberOfLines={1}
+                    className={`text-center text-xs font-medium ${
+                      capturedImages[index] !== null
+                        ? 'text-green-600'
+                        : index === currentStepIndex
+                          ? 'text-primary-600'
+                          : 'text-neutral-500 dark:text-neutral-400'
+                    }`}
+                  >
+                    {step.label}
+                  </Text>
+                </View>
+              ))}
+            </View> */}
+          </View>
+
+          {/* Current Step Info */}
+          <View className="mb-8 rounded-3xl bg-card p-5 dark:bg-card">
+            <View className="mb-1 ml-2 flex-row items-center">
+              <Text className="flex-1 text-lg font-semibold text-neutral-900 dark:text-neutral-100">
+                {currentStep.label}
+              </Text>
+            </View>
+            <Text className="mb-4 ml-2 text-neutral-600 dark:text-neutral-300">
+              {currentStep.description}
+            </Text>
+
+            {/* Guide Image or Captured Image */}
+            <Image
+              source={
+                capturedImages[currentStepIndex]
+                  ? { uri: capturedImages[currentStepIndex]!.uri }
+                  : currentStep.guideImage
+              }
+              className="aspect-square w-full rounded-3xl"
+              contentFit="cover"
+            />
+          </View>
+        </View>
+      </ScrollView>
+
+      {/* Bottom Action Bar */}
+      <View
+        className="absolute inset-x-0 bottom-0 bg-white px-6 py-4 shadow-lg dark:bg-neutral-900"
+        style={{ paddingBottom: insets.bottom }}
+      >
+        {/* Action Buttons */}
+        <View className="mb-1 flex-row gap-x-3">
+          <Button
+            onPress={handleOpenCamera}
+            label={
+              capturedImages[currentStepIndex] ? 'Retake Photo' : 'Take Photo'
+            }
+            className="flex-1 bg-primary-600"
+            textClassName="text-white font-semibold"
+          />
+
+          <Button
+            onPress={handleSelectFromGallery}
+            label="Gallery"
+            variant="outline"
+            className="flex-1 border-neutral-300 dark:border-neutral-600"
+            textClassName="text-neutral-700 dark:text-neutral-300 text-center"
+          />
+        </View>
+
+        <Button
+          onPress={handleContinue}
+          disabled={!allImagesCaptured}
+          label={
+            config.skipOptionsScreen ? 'Start Analysis' : 'Continue to Options'
+          }
+          className={`${
+            allImagesCaptured
+              ? 'bg-neutral-800'
+              : 'bg-neutral-300 dark:bg-neutral-700'
+          }`}
+          textClassName={`font-semibold ${
+            allImagesCaptured
+              ? 'text-white'
+              : 'text-neutral-500 dark:text-neutral-400'
+          }`}
+        />
+      </View>
+    </>
+  );
+}