@umituz/react-native-ai-generation-content 1.12.3 → 1.12.5

package/src/domains/face-detection/presentation/components/FaceValidationStatus.tsx

@@ -0,0 +1,111 @@
+/**
+ * FaceValidationStatus Component
+ *
+ * Displays face validation status with appropriate styling.
+ */
+
+import React from "react";
+import { View, StyleSheet, ActivityIndicator } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import { useLocalization } from "@umituz/react-native-localization";
+import type { FaceValidationState } from "../../domain/entities/FaceDetection";
+import { isValidFace } from "../../infrastructure/validators/faceValidator";
+
+interface FaceValidationStatusProps {
+  state: FaceValidationState;
+}
+
+export const FaceValidationStatus: React.FC<FaceValidationStatusProps> = ({
+  state,
+}) => {
+  const tokens = useAppDesignTokens();
+  const { t } = useLocalization();
+
+  if (state.isValidating) {
+    return (
+      <View
+        style={[styles.container, { backgroundColor: tokens.colors.surface }]}
+      >
+        <ActivityIndicator size="small" color={tokens.colors.primary} />
+        <AtomicText
+          style={[styles.text, { color: tokens.colors.textSecondary }]}
+        >
+          {t("faceDetection.analyzing")}
+        </AtomicText>
+      </View>
+    );
+  }
+
+  if (state.error) {
+    return (
+      <View
+        style={[
+          styles.container,
+          { backgroundColor: tokens.colors.errorContainer },
+        ]}
+      >
+        <AtomicIcon
+          name="alert-circle"
+          size={16}
+          customColor={tokens.colors.error}
+        />
+        <AtomicText style={[styles.text, { color: tokens.colors.error }]}>
+          {t("faceDetection.error")}
+        </AtomicText>
+      </View>
+    );
+  }
+
+  if (!state.result) {
+    return null;
+  }
+
+  const valid = isValidFace(state.result);
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: valid
+            ? tokens.colors.successContainer
+            : tokens.colors.errorContainer,
+        },
+      ]}
+    >
+      <AtomicIcon
+        name={valid ? "checkmark-circle" : "close-circle"}
+        size={16}
+        customColor={valid ? tokens.colors.success : tokens.colors.error}
+      />
+      <AtomicText
+        style={[
+          styles.text,
+          { color: valid ? tokens.colors.success : tokens.colors.error },
+        ]}
+      >
+        {valid ? t("faceDetection.success") : t("faceDetection.noFace")}
+      </AtomicText>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 8,
+    gap: 6,
+    marginTop: 8,
+  },
+  text: {
+    fontSize: 12,
+    fontWeight: "500",
+  },
+});

package/src/domains/face-detection/presentation/hooks/useFaceDetection.ts

@@ -0,0 +1,58 @@
+/**
+ * useFaceDetection Hook
+ *
+ * React hook for face detection functionality.
+ */
+
+import { useState, useCallback } from "react";
+import type {
+  FaceValidationState,
+  FaceDetectionResult,
+} from "../../domain/entities/FaceDetection";
+import { analyzeImageForFace } from "../../infrastructure/analyzers/faceAnalyzer";
+import { isValidFace } from "../../infrastructure/validators/faceValidator";
+
+interface UseFaceDetectionReturn {
+  state: FaceValidationState;
+  validateImage: (base64Image: string) => Promise<FaceDetectionResult>;
+  isValid: boolean;
+  reset: () => void;
+}
+
+const initialState: FaceValidationState = {
+  isValidating: false,
+  result: null,
+  error: null,
+};
+
+export const useFaceDetection = (): UseFaceDetectionReturn => {
+  const [state, setState] = useState<FaceValidationState>(initialState);
+
+  const validateImage = useCallback(async (base64Image: string) => {
+    setState({ isValidating: true, result: null, error: null });
+
+    try {
+      const result = await analyzeImageForFace(base64Image);
+      setState({ isValidating: false, result, error: null });
+      return result;
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : "Validation failed";
+      setState({ isValidating: false, result: null, error: message });
+      throw error;
+    }
+  }, []);
+
+  const reset = useCallback(() => {
+    setState(initialState);
+  }, []);
+
+  const isValid = state.result ? isValidFace(state.result) : false;
+
+  return {
+    state,
+    validateImage,
+    isValid,
+    reset,
+  };
+};

package/src/domains/feature-background/domain/entities/background.types.ts

@@ -0,0 +1,77 @@
+/**
+ * Background Feature Types
+ * @description Core type definitions for background feature
+ */
+
+/**
+ * Studio mode for background operations
+ */
+export type StudioMode =
+    | "transparent"
+    | "remove-object"
+    | "replace-object"
+    | "relight"
+    | "creative-scene"
+    | "enhance"
+    | "clean-white"
+    | "portrait-blur";
+
+/**
+ * Background processing request input
+ */
+export interface BackgroundProcessRequest {
+    readonly imageUri: string;
+    readonly prompt?: string;
+    readonly mode?: StudioMode;
+    readonly mask?: string;
+}
+
+/**
+ * Background processing result
+ */
+export interface BackgroundProcessResult {
+    readonly success: boolean;
+    readonly imageUrl?: string;
+    readonly error?: string;
+    readonly requestId?: string;
+}
+
+/**
+ * Background feature state
+ */
+export interface BackgroundFeatureState {
+    readonly imageUri: string | null;
+    readonly prompt: string;
+    readonly processedUrl: string | null;
+    readonly isProcessing: boolean;
+    readonly progress: number;
+    readonly error: string | null;
+    readonly mode: StudioMode;
+}
+
+/**
+ * Sample prompt configuration
+ */
+export interface SamplePrompt {
+    readonly id: string;
+    readonly text: string;
+}
+
+/**
+ * Studio mode configuration
+ */
+export interface StudioModeConfig {
+    readonly id: StudioMode;
+    readonly icon: string;
+    readonly requiresPrompt?: boolean;
+    readonly requiresMask?: boolean;
+}
+
+/**
+ * Comparison view state
+ */
+export interface ComparisonState {
+    readonly originalUri: string | null;
+    readonly processedUri: string | null;
+    readonly position: number;
+}

package/src/domains/feature-background/domain/entities/component.types.ts

@@ -0,0 +1,96 @@
+/**
+ * Component Props Types
+ * @description Props definitions for background feature components
+ */
+
+import type { ImageSourcePropType } from "react-native";
+import type { SamplePrompt, StudioMode, StudioModeConfig } from "./background.types";
+
+/**
+ * Image picker component props
+ */
+export interface ImagePickerProps {
+    readonly imageUri: string | null;
+    readonly isProcessing: boolean;
+    readonly onSelectImage: () => void;
+    readonly placeholderText?: string;
+}
+
+/**
+ * Prompt input component props
+ */
+export interface PromptInputProps {
+    readonly value: string;
+    readonly onChangeText: (text: string) => void;
+    readonly isProcessing: boolean;
+    readonly label?: string;
+    readonly placeholder?: string;
+    readonly samplePrompts?: readonly SamplePrompt[];
+    readonly samplePromptsLabel?: string;
+}
+
+/**
+ * Generate button component props
+ */
+export interface GenerateButtonProps {
+    readonly isDisabled: boolean;
+    readonly isProcessing: boolean;
+    readonly onPress: () => void;
+    readonly buttonText?: string;
+}
+
+/**
+ * Result display component props
+ */
+export interface ResultDisplayProps {
+    readonly imageUrl: string | null;
+    readonly isProcessing: boolean;
+    readonly onSave: () => void;
+    readonly onReset: () => void;
+    readonly saveButtonText?: string;
+    readonly resetButtonText?: string;
+}
+
+/**
+ * Error display component props
+ */
+export interface ErrorDisplayProps {
+    readonly error: string | null;
+}
+
+/**
+ * Processing modal component props
+ */
+export interface ProcessingModalProps {
+    readonly visible: boolean;
+    readonly progress?: number;
+    readonly title?: string;
+}
+
+/**
+ * Feature header component props
+ */
+export interface FeatureHeaderProps {
+    readonly heroImage?: ImageSourcePropType;
+    readonly description?: string;
+}
+
+/**
+ * Mode selector component props
+ */
+export interface ModeSelectorProps {
+    readonly activeMode: StudioMode;
+    readonly onModeChange: (mode: StudioMode) => void;
+    readonly isProcessing: boolean;
+    readonly modes: readonly StudioModeConfig[];
+}
+
+/**
+ * Comparison slider component props
+ */
+export interface ComparisonSliderProps {
+    readonly originalUri: string;
+    readonly processedUri: string;
+    readonly beforeLabel?: string;
+    readonly afterLabel?: string;
+}

package/src/domains/feature-background/domain/entities/config.types.ts

@@ -0,0 +1,41 @@
+/**
+ * Configuration Types
+ * @description Configuration interfaces for background feature
+ */
+
+import type {
+    BackgroundProcessRequest,
+    BackgroundProcessResult,
+    StudioMode,
+} from "./background.types";
+
+/**
+ * Process request callback parameters
+ */
+export interface ProcessRequestParams extends BackgroundProcessRequest {
+    readonly onProgress?: (progress: number) => void;
+}
+
+/**
+ * Background feature configuration
+ */
+export interface BackgroundFeatureConfig {
+    readonly onProcess: (
+        params: ProcessRequestParams
+    ) => Promise<BackgroundProcessResult>;
+    readonly onSave?: (imageUrl: string) => Promise<void>;
+    readonly onError?: (error: Error) => void;
+    readonly onSuccess?: (result: BackgroundProcessResult) => void;
+    readonly defaultMode?: StudioMode;
+}
+
+/**
+ * Hook configuration
+ */
+export interface UseBackgroundFeatureConfig {
+    readonly processRequest: (
+        params: ProcessRequestParams
+    ) => Promise<BackgroundProcessResult>;
+    readonly onSelectImage?: () => Promise<string | null>;
+    readonly defaultMode?: StudioMode;
+}

package/src/domains/feature-background/domain/entities/index.ts

@@ -0,0 +1,31 @@
+/**
+ * Domain Entities Export
+ */
+
+export type {
+    BackgroundProcessRequest,
+    BackgroundProcessResult,
+    BackgroundFeatureState,
+    SamplePrompt,
+    StudioMode,
+    StudioModeConfig,
+    ComparisonState,
+} from "./background.types";
+
+export type {
+    ImagePickerProps,
+    PromptInputProps,
+    GenerateButtonProps,
+    ResultDisplayProps,
+    ErrorDisplayProps,
+    ProcessingModalProps,
+    FeatureHeaderProps,
+    ModeSelectorProps,
+    ComparisonSliderProps,
+} from "./component.types";
+
+export type {
+    ProcessRequestParams,
+    BackgroundFeatureConfig,
+    UseBackgroundFeatureConfig,
+} from "./config.types";

package/src/domains/feature-background/index.ts

@@ -0,0 +1,72 @@
+/**
+ * @umituz/react-native-ai-feature-background
+ * AI-powered background replacement and removal feature for React Native
+ *
+ * Usage:
+ *   import {
+ *     BackgroundFeature,
+ *     useBackgroundFeature,
+ *     ImagePicker,
+ *     ComparisonSlider,
+ *     ModeSelector,
+ *   } from '@umituz/react-native-ai-feature-background';
+ */
+
+// =============================================================================
+// DOMAIN LAYER - Types & Interfaces
+// =============================================================================
+
+export type {
+    BackgroundProcessRequest,
+    BackgroundProcessResult,
+    BackgroundFeatureState,
+    SamplePrompt,
+    StudioMode,
+    StudioModeConfig,
+    ComparisonState,
+    ImagePickerProps,
+    PromptInputProps,
+    GenerateButtonProps,
+    ResultDisplayProps,
+    ErrorDisplayProps,
+    ProcessingModalProps,
+    FeatureHeaderProps,
+    ModeSelectorProps,
+    ComparisonSliderProps,
+    ProcessRequestParams,
+    BackgroundFeatureConfig,
+    UseBackgroundFeatureConfig,
+} from "./domain/entities";
+
+// =============================================================================
+// INFRASTRUCTURE LAYER - Constants
+// =============================================================================
+
+export { DEFAULT_SAMPLE_PROMPTS } from "./infrastructure/constants";
+
+// =============================================================================
+// PRESENTATION LAYER - Components
+// =============================================================================
+
+export {
+    BackgroundFeature,
+    ImagePicker,
+    PromptInput,
+    GenerateButton,
+    ResultDisplay,
+    ErrorDisplay,
+    ProcessingModal,
+    FeatureHeader,
+    ComparisonSlider,
+    ModeSelector,
+} from "./presentation/components";
+
+export type { BackgroundFeatureProps } from "./presentation/components";
+
+// =============================================================================
+// PRESENTATION LAYER - Hooks
+// =============================================================================
+
+export { useBackgroundFeature } from "./presentation/hooks";
+
+export type { UseBackgroundFeatureReturn } from "./presentation/hooks";

package/src/domains/feature-background/infrastructure/constants/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Infrastructure Constants Export
+ */
+
+export { DEFAULT_SAMPLE_PROMPTS } from "./prompts.constants";

package/src/domains/feature-background/infrastructure/constants/prompts.constants.ts

@@ -0,0 +1,15 @@
+/**
+ * Default Sample Prompts
+ * @description Default prompt suggestions for background replacement
+ */
+
+import type { SamplePrompt } from "../../domain/entities";
+
+export const DEFAULT_SAMPLE_PROMPTS: readonly SamplePrompt[] = [
+    { id: "beach", text: "Beach sunset with palm trees" },
+    { id: "office", text: "Modern office with city view" },
+    { id: "mountain", text: "Mountain landscape with snow" },
+    { id: "living-room", text: "Cozy living room interior" },
+    { id: "garden", text: "Japanese garden with cherry blossoms" },
+    { id: "cityscape", text: "Futuristic cityscape at night" },
+] as const;

package/src/domains/feature-background/presentation/components/BackgroundFeature.tsx

@@ -0,0 +1,145 @@
+/**
+ * Background Feature Component
+ * @description Main feature component composing all sub-components
+ */
+
+import React, { useCallback, useState } from "react";
+import { ScrollView, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import type {
+    BackgroundFeatureConfig,
+    SamplePrompt,
+} from "../../domain/entities";
+import { ImagePicker } from "./ImagePicker";
+import { PromptInput } from "./PromptInput";
+import { GenerateButton } from "./GenerateButton";
+import { ResultDisplay } from "./ResultDisplay";
+import { ErrorDisplay } from "./ErrorDisplay";
+import { ProcessingModal } from "./ProcessingModal";
+import { FeatureHeader } from "./FeatureHeader";
+import { useBackgroundFeature } from "../hooks";
+import type { ImageSourcePropType } from "react-native";
+
+export interface BackgroundFeatureProps {
+    readonly config: BackgroundFeatureConfig;
+    readonly onSelectImage: () => Promise<string | null>;
+    readonly heroImage?: ImageSourcePropType;
+    readonly description?: string;
+    readonly promptLabel?: string;
+    readonly promptPlaceholder?: string;
+    readonly samplePrompts?: readonly SamplePrompt[];
+    readonly samplePromptsLabel?: string;
+    readonly generateButtonText?: string;
+    readonly saveButtonText?: string;
+    readonly resetButtonText?: string;
+    readonly processingText?: string;
+    readonly placeholderText?: string;
+}
+
+export const BackgroundFeature: React.FC<BackgroundFeatureProps> = ({
+    config,
+    onSelectImage,
+    heroImage,
+    description,
+    promptLabel,
+    promptPlaceholder,
+    samplePrompts,
+    samplePromptsLabel,
+    generateButtonText,
+    saveButtonText,
+    resetButtonText,
+    processingText,
+    placeholderText,
+}) => {
+    const tokens = useAppDesignTokens();
+    const [prompt, setPrompt] = useState("");
+
+    const feature = useBackgroundFeature({
+        processRequest: config.onProcess,
+        onSelectImage,
+    });
+
+    const handleProcess = useCallback(async () => {
+        await feature.process(prompt);
+        if (feature.processedUrl && config.onSuccess) {
+            config.onSuccess({
+                success: true,
+                imageUrl: feature.processedUrl,
+            });
+        }
+    }, [feature, prompt, config]);
+
+    const handleSave = useCallback(async () => {
+        if (feature.processedUrl && config.onSave) {
+            await config.onSave(feature.processedUrl);
+        }
+    }, [feature.processedUrl, config]);
+
+    const handleReset = useCallback(() => {
+        feature.reset();
+        setPrompt("");
+    }, [feature]);
+
+    const isDisabled = !feature.imageUri || !prompt.trim();
+
+    return (
+        <>
+            <ScrollView
+                style={[styles.container, { padding: tokens.spacing.lg }]}
+                showsVerticalScrollIndicator={false}
+            >
+                <FeatureHeader
+                    heroImage={heroImage}
+                    description={description}
+                />
+
+                <ImagePicker
+                    imageUri={feature.imageUri}
+                    isProcessing={feature.isProcessing}
+                    onSelectImage={feature.selectImage}
+                    placeholderText={placeholderText}
+                />
+
+                <PromptInput
+                    value={prompt}
+                    onChangeText={setPrompt}
+                    isProcessing={feature.isProcessing}
+                    label={promptLabel}
+                    placeholder={promptPlaceholder}
+                    samplePrompts={samplePrompts}
+                    samplePromptsLabel={samplePromptsLabel}
+                />
+
+                <ErrorDisplay error={feature.error} />
+
+                <ResultDisplay
+                    imageUrl={feature.processedUrl}
+                    isProcessing={feature.isProcessing}
+                    onSave={handleSave}
+                    onReset={handleReset}
+                    saveButtonText={saveButtonText}
+                    resetButtonText={resetButtonText}
+                />
+
+                <GenerateButton
+                    isDisabled={isDisabled}
+                    isProcessing={feature.isProcessing}
+                    onPress={handleProcess}
+                    buttonText={generateButtonText}
+                />
+            </ScrollView>
+
+            <ProcessingModal
+                visible={feature.isProcessing}
+                progress={feature.progress}
+                title={processingText}
+            />
+        </>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+});