@umituz/react-native-ai-generation-content 1.12.21 → 1.12.24

package/src/{domains/feature-background → features/background}/presentation/components/BackgroundFeature.tsx

@@ -3,7 +3,8 @@
  * @description Main feature component composing all sub-components
  */
 
-import React, { useCallback, useState } from "react";
+import * as React from "react";
+import { useCallback, useState } from "react";
 import { ScrollView, StyleSheet } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import type {
@@ -96,7 +97,7 @@ export const BackgroundFeature: React.FC<BackgroundFeatureProps> = ({
                 <ImagePicker
                     imageUri={feature.imageUri}
                     isProcessing={feature.isProcessing}
-                    onSelectImage={feature.selectImage}
+                    onSelectImage={() => { void feature.selectImage(); }}
                     placeholderText={placeholderText}
                 />
 
@@ -115,7 +116,7 @@ export const BackgroundFeature: React.FC<BackgroundFeatureProps> = ({
                 <ResultDisplay
                     imageUrl={feature.processedUrl}
                     isProcessing={feature.isProcessing}
-                    onSave={handleSave}
+                    onSave={() => { void handleSave(); }}
                     onReset={handleReset}
                     saveButtonText={saveButtonText}
                     resetButtonText={resetButtonText}
@@ -124,7 +125,7 @@ export const BackgroundFeature: React.FC<BackgroundFeatureProps> = ({
                 <GenerateButton
                     isDisabled={isDisabled}
                     isProcessing={feature.isProcessing}
-                    onPress={handleProcess}
+                    onPress={() => { void handleProcess(); }}
                     buttonText={generateButtonText}
                 />
             </ScrollView>

package/src/{domains/feature-background → features/background}/presentation/components/ComparisonSlider.tsx

@@ -3,7 +3,8 @@
  * @description Before/After comparison slider for images
  */
 
-import React, { memo, useState, useRef } from "react";
+import * as React from "react";
+import { memo, useState, useRef, useMemo } from "react";
 import {
     View,
     StyleSheet,
@@ -42,9 +43,45 @@ export const ComparisonSlider: React.FC<ComparisonSliderProps> = memo(
             })
         ).current;
 
+        const themedStyles = useMemo(() => StyleSheet.create({
+            container: {
+                width: "100%",
+                aspectRatio: 1,
+                borderRadius: 20,
+                overflow: "hidden",
+            },
+            originalContainer: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                bottom: 0,
+                overflow: "hidden",
+                borderRightWidth: 2,
+                borderRightColor: tokens.colors.surface,
+            },
+            sliderHandle: {
+                position: "absolute",
+                top: "50%",
+                left: -20,
+                width: 40,
+                height: 40,
+                borderRadius: 20,
+                justifyContent: "center",
+                alignItems: "center",
+                marginTop: -20,
+                backgroundColor: tokens.colors.backgroundPrimary,
+            },
+            labelLeft: {
+                backgroundColor: tokens.colors.surface,
+            },
+            labelRight: {
+                backgroundColor: tokens.colors.primary,
+            }
+        }), [tokens]);
+
         return (
             <View
-                style={styles.container}
+                style={themedStyles.container}
                 onLayout={(e) => {
                     containerWidth.current = e.nativeEvent.layout.width;
                 }}
@@ -57,7 +94,7 @@ export const ComparisonSlider: React.FC<ComparisonSliderProps> = memo(
                     />
 
                     <View
-                        style={[styles.originalContainer, { width: `${sliderPosition}%` }]}
+                        style={[themedStyles.originalContainer, { width: `${sliderPosition}%` }]}
                     >
                         <Image
                             source={{ uri: originalUri }}
@@ -70,12 +107,7 @@ export const ComparisonSlider: React.FC<ComparisonSliderProps> = memo(
                         style={[styles.sliderLine, { left: `${sliderPosition}%` }]}
                         {...panResponder.panHandlers}
                     >
-                        <View
-                            style={[
-                                styles.sliderHandle,
-                                { backgroundColor: tokens.colors.backgroundPrimary },
-                            ]}
-                        >
+                        <View style={themedStyles.sliderHandle}>
                             <View style={styles.handleBars}>
                                 <View
                                     style={[
@@ -94,16 +126,10 @@ export const ComparisonSlider: React.FC<ComparisonSliderProps> = memo(
                     </View>
 
                     {beforeLabel && (
-                        <View
-                            style={[
-                                styles.label,
-                                styles.labelLeft,
-                                { backgroundColor: tokens.colors.surface },
-                            ]}
-                        >
+                        <View style={[styles.label, styles.labelLeft, themedStyles.labelLeft]}>
                             <AtomicText
                                 type="bodySmall"
-                                style={{ color: tokens.colors.textPrimary }}
+                                color="textPrimary"
                             >
                                 {beforeLabel}
                             </AtomicText>
@@ -111,16 +137,10 @@ export const ComparisonSlider: React.FC<ComparisonSliderProps> = memo(
                     )}
 
                     {afterLabel && (
-                        <View
-                            style={[
-                                styles.label,
-                                styles.labelRight,
-                                { backgroundColor: tokens.colors.primary },
-                            ]}
-                        >
+                        <View style={[styles.label, styles.labelRight, themedStyles.labelRight]}>
                             <AtomicText
                                 type="bodySmall"
-                                style={{ color: tokens.colors.backgroundPrimary }}
+                                color="backgroundPrimary"
                             >
                                 {afterLabel}
                             </AtomicText>
@@ -133,12 +153,6 @@ export const ComparisonSlider: React.FC<ComparisonSliderProps> = memo(
 );
 
 const styles = StyleSheet.create({
-    container: {
-        width: "100%",
-        aspectRatio: 1,
-        borderRadius: 20,
-        overflow: "hidden",
-    },
     imageContainer: {
         flex: 1,
         position: "relative",
@@ -147,15 +161,6 @@ const styles = StyleSheet.create({
         width: "100%",
         height: "100%",
     },
-    originalContainer: {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        bottom: 0,
-        overflow: "hidden",
-        borderRightWidth: 2,
-        borderRightColor: "#FFFFFF",
-    },
     sliderLine: {
         position: "absolute",
         top: 0,
@@ -163,17 +168,6 @@ const styles = StyleSheet.create({
         width: 2,
         marginLeft: -1,
     },
-    sliderHandle: {
-        position: "absolute",
-        top: "50%",
-        left: -20,
-        width: 40,
-        height: 40,
-        borderRadius: 20,
-        justifyContent: "center",
-        alignItems: "center",
-        marginTop: -20,
-    },
     handleBars: {
         flexDirection: "row",
         gap: 4,

package/src/{domains/feature-background → features/background}/presentation/components/ErrorDisplay.tsx

@@ -3,7 +3,8 @@
  * @description Displays error messages
  */
 
-import React, { memo } from "react";
+import * as React from "react";
+import { memo } from "react";
 import { View, StyleSheet } from "react-native";
 import {
     AtomicText,
@@ -29,12 +30,13 @@ export const ErrorDisplay: React.FC<ErrorDisplayProps> = memo(
             >
                 <AtomicIcon
                     name="alert-circle"
-                    size={20}
+                    size="sm"
                     color="error"
                 />
                 <AtomicText
                     type="bodyMedium"
-                    style={[styles.errorText, { color: tokens.colors.error }]}
+                    color="error"
+                    style={styles.errorText}
                 >
                     {error}
                 </AtomicText>

package/src/{domains/feature-background → features/background}/presentation/components/ModeSelector.tsx

@@ -3,10 +3,10 @@
  * @description Horizontal scrollable mode selection toolbar
  */
 
-import React, { memo } from "react";
+import * as React from "react";
+import { memo } from "react";
 import { View, StyleSheet, ScrollView, TouchableOpacity } from "react-native";
 import {
-    AtomicText,
     AtomicIcon,
     useAppDesignTokens,
 } from "@umituz/react-native-design-system";

package/src/{domains/feature-background → features/background}/presentation/hooks/useBackgroundFeature.ts

@@ -85,10 +85,11 @@ export function useBackgroundFeature(
         [imageUri, prompt, mode, config]
     );
 
-    const save = useCallback(async (): Promise<void> => {
+    const save = useCallback((): Promise<void> => {
         if (!processedUrl) {
-            return;
+            return Promise.resolve();
         }
+        return Promise.resolve();
     }, [processedUrl]);
 
     const reset = useCallback((): void => {

package/src/features/colorization/domain/entities.ts

@@ -0,0 +1,46 @@
+/**
+ * Colorization Domain Entities
+ */
+
+export interface ColorizationConfig {
+    /**
+     * Guidance for color palette (e.g., "vintage", "modern", "warm")
+     */
+    palette?: string;
+
+    /**
+     * Saturation boost factor
+     * @default 1.0
+     */
+    saturation?: number;
+}
+
+export interface ColorizationRequest {
+    /**
+     * The black and white image to colorize.
+     * Can be a Base64 string or a remote URL.
+     */
+    image: string;
+
+    /**
+     * Optional prompt to guide colorization (e.g. "sunny day")
+     */
+    prompt?: string;
+
+    /**
+     * Optional configuration
+     */
+    options?: ColorizationConfig;
+}
+
+export interface ColorizationResult {
+    /**
+     * The colorized image URL or Base64
+     */
+    imageUrl: string;
+
+    /**
+     * Metadata about the generation
+     */
+    metadata?: Record<string, unknown>;
+}

package/src/features/colorization/index.ts

@@ -0,0 +1,2 @@
+export * from './domain/entities';
+export * from './presentation/hooks';

package/src/features/colorization/presentation/hooks.ts

@@ -0,0 +1,39 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useState, useCallback } from 'react';
+import { useGeneration } from '../../../presentation/hooks/use-generation';
+import { ColorizationRequest, ColorizationResult } from '../domain/entities';
+
+export interface UseColorizationReturn {
+    colorize: (request: ColorizationRequest) => Promise<ColorizationResult>;
+    isColorizing: boolean;
+    result: ColorizationResult | null;
+    error: Error | null;
+}
+
+export const useColorization = (): UseColorizationReturn => {
+    const { generate, isGenerating, error, result: genResult } = useGeneration({ model: "deprecated" });
+    const [result, setResult] = useState<ColorizationResult | null>(null);
+
+    const colorize = useCallback(async (request: ColorizationRequest) => {
+        await generate(request as any);
+
+        if (genResult?.data) {
+            setResult(genResult.data as ColorizationResult);
+            return genResult.data as ColorizationResult;
+        }
+
+        throw new Error('Colorization failed to return a result');
+    }, [generate, genResult]);
+
+    return {
+        colorize,
+        isColorizing: isGenerating,
+        result,
+        error: error as any,
+    };
+};

package/src/features/face-swap/domain/entities.ts

@@ -0,0 +1,48 @@
+/**
+ * Face Swap Domain Entities
+ */
+
+export interface FaceSwapConfig {
+    /**
+     * Enhance the face details after swapping
+     * @default true
+     */
+    enhanceFace?: boolean;
+
+    /**
+     * Preserve the skin tone of the target image
+     * @default true
+     */
+    preserveSkinTone?: boolean;
+}
+
+export interface FaceSwapRequest {
+    /**
+     * The target image where the face will be swapped TO.
+     * Can be a Base64 string or a remote URL.
+     */
+    targetImage: string;
+
+    /**
+     * The source image containing the face to swap FROM.
+     * Can be a Base64 string or a remote URL.
+     */
+    sourceImage: string;
+
+    /**
+     * Optional configuration for the swap process
+     */
+    options?: FaceSwapConfig;
+}
+
+export interface FaceSwapResult {
+    /**
+     * URL or Base64 of the resulting image
+     */
+    imageUrl: string;
+
+    /**
+     * Metadata about the generation
+     */
+    metadata?: Record<string, unknown>;
+}

package/src/features/face-swap/index.ts

@@ -0,0 +1,2 @@
+export * from './domain/entities';
+export * from './presentation/hooks';

package/src/features/face-swap/presentation/hooks.ts

@@ -0,0 +1,41 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useState, useCallback } from 'react';
+import { useGeneration } from '../../../presentation/hooks/use-generation';
+import { FaceSwapRequest, FaceSwapResult } from '../domain/entities';
+
+export interface UseFaceSwapReturn {
+    swapFace: (request: FaceSwapRequest) => Promise<FaceSwapResult>;
+    isSwapping: boolean;
+    result: FaceSwapResult | null;
+    error: Error | null;
+}
+
+export const useFaceSwap = (): UseFaceSwapReturn => {
+    // @ts-ignore - Deprecated feature, kept for backward compatibility
+    const { generate, isGenerating, error, result: genResult } = useGeneration<FaceSwapResult>({ model: 'face-swap' });
+    const [result, setResult] = useState<FaceSwapResult | null>(null);
+
+    const swapFace = useCallback(async (request: FaceSwapRequest) => {
+        // @ts-ignore - Deprecated feature
+        await generate(request);
+
+        if (genResult?.data) {
+            setResult(genResult.data as FaceSwapResult);
+            return genResult.data as FaceSwapResult;
+        }
+
+        throw new Error('Face swap failed to return a result');
+    }, [generate, genResult]);
+
+    return {
+        swapFace,
+        isSwapping: isGenerating,
+        result,
+        error: error as any,
+    };
+};

package/src/features/future-prediction/domain/entities.ts

@@ -0,0 +1,45 @@
+/**
+ * Future Prediction Domain Entities
+ */
+
+export interface FuturePredictionConfig {
+    /**
+     * Target age or years to add
+     */
+    targetAge?: number;
+
+    /**
+     * Years to add to current age
+     */
+    yearsToAdd?: number;
+
+    /**
+     * Gender (optional, if automatic detection fails)
+     */
+    gender?: 'male' | 'female';
+}
+
+export interface FuturePredictionRequest {
+    /**
+     * The image to process.
+     * Can be a Base64 string or a remote URL.
+     */
+    image: string;
+
+    /**
+     * Optional configuration
+     */
+    options?: FuturePredictionConfig;
+}
+
+export interface FuturePredictionResult {
+    /**
+     * The processed image URL or Base64
+     */
+    imageUrl: string;
+
+    /**
+     * Metadata about the generation
+     */
+    metadata?: Record<string, unknown>;
+}

package/src/features/future-prediction/index.ts

@@ -0,0 +1,2 @@
+export * from './domain/entities';
+export * from './presentation/hooks';

package/src/features/future-prediction/presentation/hooks.ts

@@ -0,0 +1,39 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useState, useCallback } from 'react';
+import { useGeneration } from '../../../presentation/hooks/use-generation';
+import { FuturePredictionRequest, FuturePredictionResult } from '../domain/entities';
+
+export interface UseFuturePredictionReturn {
+    predictFuture: (request: FuturePredictionRequest) => Promise<FuturePredictionResult>;
+    isPredicting: boolean;
+    result: FuturePredictionResult | null;
+    error: Error | null;
+}
+
+export const useFuturePrediction = (): UseFuturePredictionReturn => {
+    const { generate, isGenerating, error, result: genResult } = useGeneration({ model: "deprecated" });
+    const [result, setResult] = useState<FuturePredictionResult | null>(null);
+
+    const predictFuture = useCallback(async (request: FuturePredictionRequest) => {
+        await generate(request as any);
+
+        if (genResult?.data) {
+            setResult(genResult.data as FuturePredictionResult);
+            return genResult.data as FuturePredictionResult;
+        }
+
+        throw new Error('Future prediction failed to return a result');
+    }, [generate, genResult]);
+
+    return {
+        predictFuture,
+        isPredicting: isGenerating,
+        result,
+        error: error as any,
+    };
+};

package/src/features/image-captioning/domain/entities.ts

@@ -0,0 +1,47 @@
+/**
+ * Image Captioning Domain Entities
+ */
+
+export interface ImageCaptioningConfig {
+    /**
+     * Detail level of the caption
+     * @default 'standard'
+     */
+    detailLevel?: 'brief' | 'standard' | 'detailed';
+
+    /**
+     * Language for the caption
+     * @default 'en'
+     */
+    language?: string;
+}
+
+export interface ImageCaptioningRequest {
+    /**
+     * The image to be captioned.
+     * Can be a Base64 string or a remote URL.
+     */
+    image: string;
+
+    /**
+     * Optional context or question to guide the captioning
+     */
+    prompt?: string;
+
+    /**
+     * Optional configuration
+     */
+    options?: ImageCaptioningConfig;
+}
+
+export interface ImageCaptioningResult {
+    /**
+     * The generated caption text
+     */
+    text: string;
+
+    /**
+     * Metadata about the generation
+     */
+    metadata?: Record<string, unknown>;
+}

package/src/features/image-captioning/index.ts

@@ -0,0 +1,2 @@
+export * from './domain/entities';
+export * from './presentation/hooks';

package/src/features/image-captioning/presentation/hooks.ts

@@ -0,0 +1,39 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useState, useCallback } from 'react';
+import { useGeneration } from '../../../presentation/hooks/use-generation';
+import { ImageCaptioningRequest, ImageCaptioningResult } from '../domain/entities';
+
+export interface UseImageCaptioningReturn {
+    generateCaption: (request: ImageCaptioningRequest) => Promise<ImageCaptioningResult>;
+    isGenerating: boolean;
+    result: ImageCaptioningResult | null;
+    error: Error | null;
+}
+
+export const useImageCaptioning = (): UseImageCaptioningReturn => {
+    const { generate, isGenerating, error, result: genResult } = useGeneration({ model: "deprecated" });
+    const [result, setResult] = useState<ImageCaptioningResult | null>(null);
+
+    const generateCaption = useCallback(async (request: ImageCaptioningRequest) => {
+        await generate(request as any);
+
+        if (genResult?.data) {
+            setResult(genResult.data as ImageCaptioningResult);
+            return genResult.data as ImageCaptioningResult;
+        }
+
+        throw new Error('Caption generation failed to return a result');
+    }, [generate, genResult]);
+
+    return {
+        generateCaption,
+        isGenerating,
+        result,
+        error: error as any,
+    };
+};

package/src/features/inpainting/domain/entities.ts

@@ -0,0 +1,58 @@
+/**
+ * Inpainting Domain Entities
+ */
+
+export interface InpaintingConfig {
+    /**
+     * Strength of the inpainting effect (0.0 to 1.0)
+     * @default 0.75
+     */
+    strength?: number;
+
+    /**
+     * Guidance scale for prompt adherence
+     * @default 7.5
+     */
+    guidanceScale?: number;
+}
+
+export interface InpaintingRequest {
+    /**
+     * The original image.
+     * Can be a Base64 string or a remote URL.
+     */
+    image: string;
+
+    /**
+     * The mask image indicating areas to inpaint (white) vs keep (black).
+     * Can be a Base64 string or a remote URL.
+     */
+    mask: string;
+
+    /**
+     * Description of what to fill in the masked area
+     */
+    prompt: string;
+
+    /**
+     * Negative prompt for what to avoid
+     */
+    negativePrompt?: string;
+
+    /**
+     * Optional configuration
+     */
+    options?: InpaintingConfig;
+}
+
+export interface InpaintingResult {
+    /**
+     * The resulting image with inpainting applied
+     */
+    imageUrl: string;
+
+    /**
+     * Metadata about the generation
+     */
+    metadata?: Record<string, unknown>;
+}

package/src/features/inpainting/index.ts

@@ -0,0 +1,2 @@
+export * from './domain/entities';
+export * from './presentation/hooks';