vibefast-cli 0.1.1

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

@@ -0,0 +1,210 @@
+import { Feather } from '@expo/vector-icons';
+import type React from 'react';
+import { ScrollView, View } from 'react-native';
+
+import { Pressable, Text } from '@/components/ui';
+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 {
+  DEFAULT_IMAGE_MODEL_ID,
+  getImageModelById,
+  getImageModelsByProvider,
+  getProviderDisplayName,
+  IMAGE_MODEL_PROVIDERS,
+  type ImageModel,
+  type ImageModelId,
+  type ImageProvider,
+} from '@/features/image-generator/models/models';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+const getProviderIcon = (provider: ImageProvider): React.ComponentType<any> => {
+  switch (provider) {
+    case 'openai':
+      return OpenaiIcon;
+    case 'gemini':
+      return GeminiIcon;
+    default:
+      return OpenaiIcon;
+  }
+};
+
+type ModelSelectorProps = {
+  testID?: string;
+};
+
+/**
+ * Image model selector component that mirrors the chatbot model selector UX.
+ */
+export const ImageModelSelector: React.FC<ModelSelectorProps> = ({
+  testID = 'image-model-selector',
+}) => {
+  const theme = useThemeConfig();
+  const modal = useModal();
+  const { settings, updateModel } = useImageGeneratorSettings();
+
+  const currentModel =
+    getImageModelById(settings.modelId) ??
+    getImageModelById(DEFAULT_IMAGE_MODEL_ID);
+
+  const getCurrentModelIcon = () => {
+    if (!currentModel) return null;
+    const IconComponent = getProviderIcon(currentModel.provider);
+    return <IconComponent />;
+  };
+
+  const handleModelSelect = (modelId: ImageModelId) => {
+    updateModel(modelId);
+    modal.dismiss();
+  };
+
+  return (
+    <>
+      <Pressable
+        onPress={modal.present}
+        className="flex-row items-center gap-2.5 rounded-full border border-neutral-300/60 bg-neutral-50 px-4 py-3.5 dark:border-neutral-800 dark:bg-neutral-800"
+        style={{ alignSelf: 'flex-start' }}
+        accessibilityLabel={`Current model: ${currentModel?.name ?? 'Select image model'}`}
+        accessibilityHint="Tap to change image generation model"
+        accessibilityRole="button"
+        testID={testID}
+      >
+        <View className="size-4">{getCurrentModelIcon()}</View>
+        <View className="max-w-[140px]">
+          <Text
+            className="text-xs font-medium text-neutral-800 dark:text-neutral-200"
+            numberOfLines={1}
+          >
+            {currentModel?.name ?? 'Select image model'}
+          </Text>
+          {/* <Text className="text-[10px] text-neutral-500 dark:text-neutral-400">
+            {currentModel?.provider
+              ? getProviderDisplayName(currentModel.provider)
+              : getProviderDisplayName("gemini")}
+          </Text> */}
+        </View>
+        <Feather
+          name="chevron-down"
+          size={14}
+          color={theme.dark ? colors.neutral[400] : colors.neutral[500]}
+        />
+      </Pressable>
+
+      <Modal ref={modal.ref} index={0} snapPoints={['70%']}>
+        <ScrollView
+          className="flex-1"
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={{ paddingHorizontal: 24 }}
+        >
+          <View className="mb-6 mt-2 items-center">
+            <Text className="text-xl font-semibold text-neutral-900 dark:text-neutral-50">
+              Choose an image model
+            </Text>
+            <Text className="mt-1 text-center text-xs text-neutral-500 dark:text-neutral-400">
+              Different models balance quality, speed, and style. Pick the one
+              that fits your workflow.
+            </Text>
+          </View>
+
+          {IMAGE_MODEL_PROVIDERS.map((provider) => {
+            const providerModels = getImageModelsByProvider(provider);
+            if (!providerModels.length) {
+              return null;
+            }
+
+            const ProviderIcon = getProviderIcon(provider);
+
+            return (
+              <View key={provider} className="mb-6">
+                <View className="mb-4 flex-row items-center gap-3">
+                  <View className="size-6">
+                    <ProviderIcon />
+                  </View>
+                  <Text className="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
+                    {getProviderDisplayName(provider)}
+                  </Text>
+                </View>
+
+                {providerModels.map((model) => (
+                  <ModelOption
+                    key={model.id}
+                    model={model}
+                    isSelected={settings.modelId === model.id}
+                    onSelect={() => handleModelSelect(model.id)}
+                    testID={`${testID}-${model.id}`}
+                  />
+                ))}
+              </View>
+            );
+          })}
+        </ScrollView>
+      </Modal>
+    </>
+  );
+};
+
+type ModelOptionProps = {
+  model: ImageModel;
+  isSelected: boolean;
+  onSelect: () => void;
+  testID?: string;
+};
+
+const ModelOption: React.FC<ModelOptionProps> = ({
+  model,
+  isSelected,
+  onSelect,
+  testID,
+}) => {
+  const theme = useThemeConfig();
+
+  return (
+    <Pressable
+      onPress={onSelect}
+      className="mb-3 rounded-2xl border p-4"
+      style={{
+        borderColor: isSelected
+          ? theme.dark
+            ? 'rgba(96, 165, 250, 0.7)'
+            : 'rgba(37, 99, 235, 0.7)'
+          : theme.dark
+            ? 'rgba(71, 85, 105, 0.6)'
+            : 'rgba(203, 213, 225, 0.7)',
+        backgroundColor: isSelected
+          ? theme.dark
+            ? 'rgba(37, 99, 235, 0.14)'
+            : 'rgba(219, 234, 254, 0.6)'
+          : theme.dark
+            ? 'rgba(51, 65, 85, 0.35)'
+            : 'rgba(248, 250, 252, 0.5)',
+      }}
+      accessibilityLabel={`Select ${model.name}`}
+      accessibilityHint="Applies this model for future image generations"
+      accessibilityState={{ selected: isSelected }}
+      testID={testID}
+    >
+      <View className="flex-row items-center justify-between">
+        <Text className="text-base font-semibold text-neutral-900 dark:text-neutral-100">
+          {model.name}
+        </Text>
+        <View className="flex-row items-center gap-2">
+          {model.isPremium ? (
+            <Text className="rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-semibold text-amber-700 dark:bg-amber-400/20 dark:text-amber-200">
+              Premium
+            </Text>
+          ) : null}
+          {model.defaultSize || model.defaultAspectRatio ? (
+            <Text className="text-[10px] font-medium uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
+              {model.defaultSize ?? model.defaultAspectRatio}
+            </Text>
+          ) : null}
+        </View>
+      </View>
+      <Text className="mt-2 text-xs text-neutral-600 dark:text-neutral-300">
+        {model.description}
+      </Text>
+    </Pressable>
+  );
+};

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

@@ -0,0 +1,26 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import type React from 'react';
+import { View } from 'react-native';
+
+import { Text } from '@/components/ui';
+/**
+ * Placeholder component to show before first generation
+ */
+export const ImagePlaceholder: React.FC = () => (
+  <View
+    className="aspect-square w-full items-center justify-center rounded-lg border-2 border-dashed border-neutral-300 bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800"
+    testID="image-placeholder"
+  >
+    <View className="items-center justify-center">
+      <MaterialIcons
+        name="brush"
+        size={32}
+        color="#9CA3AF"
+        style={{ marginBottom: 8 }}
+      />
+      <Text className="text-center text-neutral-500 dark:text-neutral-400">
+        Generated image will appear here
+      </Text>
+    </View>
+  </View>
+);

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

@@ -0,0 +1,71 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import {
+  ImageGalleryService,
+  type SavedImageMetadata,
+} from '@/features/image-generator/services/image-gallery-service';
+
+/**
+ * Hook for managing the local image gallery
+ */
+export const useImageGallery = () => {
+  const [images, setImages] = useState<SavedImageMetadata[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Load images from storage
+  const loadImages = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+      const galleryImages = await ImageGalleryService.getAllImages();
+      setImages(galleryImages);
+    } catch (_err) {
+      console.error('Failed to load gallery images:', _err);
+      setError('Failed to load images');
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  // Remove an image from the gallery
+  const removeImage = useCallback(async (imageId: string) => {
+    try {
+      await ImageGalleryService.removeImage(imageId);
+      setImages((prev) => prev.filter((img) => img.id !== imageId));
+    } catch (_err) {
+      console.error('Failed to remove image:', _err);
+      setError('Failed to remove image');
+    }
+  }, []);
+
+  // Clear all images from the gallery
+  const clearGallery = useCallback(async () => {
+    try {
+      await ImageGalleryService.clearGallery();
+      setImages([]);
+    } catch (_err) {
+      console.error('Failed to clear gallery:', _err);
+      setError('Failed to clear gallery');
+    }
+  }, []);
+
+  // Refresh the gallery
+  const refreshGallery = useCallback(() => {
+    loadImages();
+  }, [loadImages]);
+
+  // Load images on mount
+  useEffect(() => {
+    loadImages();
+  }, [loadImages]);
+
+  return {
+    images,
+    isLoading,
+    error,
+    removeImage,
+    clearGallery,
+    refreshGallery,
+  };
+};

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

@@ -0,0 +1,152 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { defaultCacheService } from '@/core/cache';
+import {
+  DEFAULT_IMAGE_MODEL_ID,
+  getImageModelById,
+  getImageModelsByProvider,
+  IMAGE_MODELS,
+  type ImageModelId,
+  type ImageProvider,
+} from '@/features/image-generator/models/models';
+
+export type ImageGeneratorSettings = {
+  provider: ImageProvider;
+  modelId: ImageModelId;
+};
+
+const CACHE_KEY = 'image_generator_settings_v3';
+
+const DEFAULT_SETTINGS: ImageGeneratorSettings = {
+  provider: 'gemini',
+  modelId: DEFAULT_IMAGE_MODEL_ID,
+};
+
+type RawSettings = Partial<ImageGeneratorSettings> & {
+  provider?: unknown;
+  modelId?: unknown;
+};
+
+const providerHasModel = (
+  provider: ImageProvider,
+  modelId: ImageModelId,
+): boolean => {
+  return getImageModelsByProvider(provider).some(
+    (model) => model.id === modelId,
+  );
+};
+
+const normalizeSettings = (
+  rawSettings: RawSettings | null | undefined,
+): ImageGeneratorSettings => {
+  if (!rawSettings) {
+    return DEFAULT_SETTINGS;
+  }
+
+  const provider =
+    rawSettings.provider === 'openai' || rawSettings.provider === 'gemini'
+      ? rawSettings.provider
+      : DEFAULT_SETTINGS.provider;
+
+  const modelId =
+    typeof rawSettings.modelId === 'string' &&
+    IMAGE_MODELS.some((model) => model.id === rawSettings.modelId) &&
+    providerHasModel(provider, rawSettings.modelId)
+      ? (rawSettings.modelId as ImageModelId)
+      : DEFAULT_IMAGE_MODEL_ID;
+
+  return {
+    provider,
+    modelId,
+  };
+};
+
+/**
+ * Hook for managing image generator settings with persistent storage
+ */
+export const useImageGeneratorSettings = () => {
+  const [settings, setSettings] =
+    useState<ImageGeneratorSettings>(DEFAULT_SETTINGS);
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  // Load settings from cache on mount
+  useEffect(() => {
+    const loadSettings = async () => {
+      try {
+        const cached =
+          await defaultCacheService.getItem<RawSettings>(CACHE_KEY);
+        setSettings(normalizeSettings(cached));
+      } catch (error) {
+        console.error('Failed to load image generator settings:', error);
+      } finally {
+        setIsLoaded(true);
+      }
+    };
+
+    loadSettings();
+  }, []);
+
+  // Save settings to cache
+  const saveSettings = useCallback(
+    async (newSettings: ImageGeneratorSettings) => {
+      try {
+        const normalized = normalizeSettings(newSettings);
+        await defaultCacheService.setItem(CACHE_KEY, normalized);
+        setSettings(normalized);
+      } catch (error) {
+        console.error('Failed to save image generator settings:', error);
+      }
+    },
+    [],
+  );
+
+  const updateProvider = useCallback(
+    async (provider: ImageProvider) => {
+      const providerModels = getImageModelsByProvider(provider);
+      const defaultModelForProvider =
+        providerModels[0]?.id ?? DEFAULT_IMAGE_MODEL_ID;
+      const newSettings: ImageGeneratorSettings = {
+        provider,
+        modelId: defaultModelForProvider,
+      };
+      await saveSettings(newSettings);
+    },
+    [saveSettings],
+  );
+
+  const updateModel = useCallback(
+    async (model: string) => {
+      if (typeof model !== 'string') {
+        return;
+      }
+
+      const selectedModel = getImageModelById(model as ImageModelId);
+      if (!selectedModel) {
+        console.warn(
+          `[useImageGeneratorSettings] Unsupported model "${model}" received. Reverting to default.`,
+        );
+        await saveSettings(DEFAULT_SETTINGS);
+        return;
+      }
+
+      const provider =
+        settings.provider === selectedModel.provider
+          ? settings.provider
+          : selectedModel.provider;
+
+      const newSettings: ImageGeneratorSettings = {
+        provider,
+        modelId: selectedModel.id,
+      };
+      await saveSettings(newSettings);
+    },
+    [settings.provider, saveSettings],
+  );
+
+  return {
+    settings,
+    isLoaded,
+    updateProvider,
+    updateModel,
+  };
+};

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

@@ -0,0 +1,93 @@
+import type { Id } from '@vibefast/backend/_generated/dataModel';
+import { useState } from 'react';
+import { Alert } from 'react-native';
+
+import { imageGeneratorApi } from '@/api-client/image-generator';
+
+import { getImageModelById } from '../models/models';
+import { useImageGeneratorSettings } from './use-image-generator-settings';
+
+type GeneratedImageData = {
+  imageUri: string;
+  prompt: string;
+  provider: string;
+  model: string;
+  mimeType: string;
+  imageId?: Id<'generatedImages'>;
+  storageId?: Id<'_storage'>;
+};
+
+/**
+ * Custom hook for managing image generation state and operations
+ */
+export const useImageGenerator = () => {
+  const [prompt, setPrompt] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [generatedImageData, setGeneratedImageData] =
+    useState<GeneratedImageData | null>(null);
+
+  const { settings, isLoaded } = useImageGeneratorSettings();
+
+  const generateImage = imageGeneratorApi.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 (!isLoaded) {
+      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 generateImage({
+        prompt: prompt.trim(),
+        provider,
+        model: selectedModel?.id ?? settings.modelId,
+      });
+
+      console.log('Frontend received result:', {
+        mimeType: result.mimeType,
+        dataUriLength: result.imageDataUri.length,
+        dataUriPreview: result.imageDataUri.substring(0, 100),
+      });
+
+      setGeneratedImageData({
+        imageUri: result.imageDataUri,
+        prompt: result.prompt,
+        provider: result.provider,
+        model: result.model,
+        mimeType: result.mimeType,
+        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/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[];