@umituz/react-native-ai-generation-content 1.16.0 → 1.17.1

package/src/features/photo-restoration/presentation/components/PhotoRestoreFeature.tsx

@@ -0,0 +1,175 @@
+/**
+ * PhotoRestoreFeature Component
+ * Main photo restore feature UI component
+ */
+
+import React, { useCallback, useMemo } from "react";
+import { View, ScrollView, StyleSheet } from "react-native";
+import {
+  useAppDesignTokens,
+  PhotoUploadCard,
+  AtomicText,
+  AtomicButton,
+} from "@umituz/react-native-design-system";
+import { PhotoRestoreResultView } from "./PhotoRestoreResultView";
+import type {
+  PhotoRestoreTranslations,
+  PhotoRestoreFeatureConfig,
+} from "../../domain/types";
+
+export interface PhotoRestoreFeatureProps {
+  imageUri: string | null;
+  processedUrl: string | null;
+  isProcessing: boolean;
+  progress: number;
+  error: string | null;
+  translations: PhotoRestoreTranslations;
+  config?: PhotoRestoreFeatureConfig;
+  onSelectImage: () => void;
+  onProcess: () => void;
+  onSave: () => void;
+  onReset: () => void;
+  renderProcessingModal?: (props: {
+    visible: boolean;
+    progress: number;
+  }) => React.ReactNode;
+}
+
+export const PhotoRestoreFeature: React.FC<PhotoRestoreFeatureProps> = ({
+  imageUri,
+  processedUrl,
+  isProcessing,
+  progress,
+  error,
+  translations,
+  onSelectImage,
+  onProcess,
+  onSave,
+  onReset,
+  renderProcessingModal,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const photoTranslations = useMemo(
+    () => ({
+      tapToUpload: translations.uploadTitle,
+      selectPhoto: translations.uploadSubtitle,
+      change: translations.uploadChange,
+      analyzing: translations.uploadAnalyzing,
+    }),
+    [translations],
+  );
+
+  const handleProcess = useCallback(() => {
+    onProcess();
+  }, [onProcess]);
+
+  if (processedUrl && imageUri) {
+    return (
+      <ScrollView
+        style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
+        contentContainerStyle={styles.content}
+        showsVerticalScrollIndicator={false}
+      >
+        <PhotoRestoreResultView
+          originalUri={imageUri}
+          processedUri={processedUrl}
+          translations={{
+            successText: translations.successText,
+            saveButtonText: translations.saveButtonText,
+            tryAnotherText: translations.tryAnotherText,
+            beforeLabel: translations.beforeLabel,
+            afterLabel: translations.afterLabel,
+          }}
+          onSave={onSave}
+          onReset={onReset}
+        />
+      </ScrollView>
+    );
+  }
+
+  return (
+    <>
+      <ScrollView
+        style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
+        contentContainerStyle={styles.content}
+        showsVerticalScrollIndicator={false}
+      >
+        <AtomicText
+          type="bodyLarge"
+          style={[styles.description, { color: tokens.colors.textSecondary }]}
+        >
+          {translations.description}
+        </AtomicText>
+
+        <PhotoUploadCard
+          imageUri={imageUri}
+          onPress={onSelectImage}
+          isValidating={isProcessing}
+          disabled={isProcessing}
+          translations={photoTranslations}
+          config={{
+            aspectRatio: 1,
+            borderRadius: 24,
+            showValidationStatus: false,
+            allowChange: true,
+          }}
+        />
+
+        {error && (
+          <View
+            style={[
+              styles.errorContainer,
+              { backgroundColor: `${tokens.colors.error}15` },
+            ]}
+          >
+            <AtomicText type="bodyMedium" style={{ color: tokens.colors.error }}>
+              {error}
+            </AtomicText>
+          </View>
+        )}
+
+        <View style={styles.buttonContainer}>
+          <AtomicButton
+            title={
+              isProcessing
+                ? translations.processingText
+                : translations.processButtonText
+            }
+            onPress={handleProcess}
+            disabled={!imageUri || isProcessing}
+            variant="primary"
+            size="lg"
+          />
+        </View>
+      </ScrollView>
+
+      {renderProcessingModal?.({ visible: isProcessing, progress })}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    paddingVertical: 16,
+  },
+  description: {
+    textAlign: "center",
+    marginHorizontal: 24,
+    marginBottom: 24,
+    lineHeight: 24,
+  },
+  errorContainer: {
+    marginHorizontal: 24,
+    marginBottom: 16,
+    padding: 16,
+    borderRadius: 12,
+  },
+  buttonContainer: {
+    marginHorizontal: 24,
+    marginTop: 8,
+  },
+});

package/src/features/photo-restoration/presentation/components/PhotoRestoreResultView.tsx

@@ -0,0 +1,98 @@
+/**
+ * PhotoRestoreResultView Component
+ * Displays the restored image result with before/after comparison
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicButton,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import { ComparisonSlider } from "../../../background/presentation/components/ComparisonSlider";
+import type { PhotoRestoreTranslations } from "../../domain/types";
+
+export interface PhotoRestoreResultViewProps {
+  originalUri: string;
+  processedUri: string;
+  translations: Pick<
+    PhotoRestoreTranslations,
+    | "successText"
+    | "saveButtonText"
+    | "tryAnotherText"
+    | "beforeLabel"
+    | "afterLabel"
+  >;
+  onSave: () => void;
+  onReset: () => void;
+}
+
+export const PhotoRestoreResultView: React.FC<PhotoRestoreResultViewProps> = ({
+  originalUri,
+  processedUri,
+  translations,
+  onSave,
+  onReset,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.container}>
+      <AtomicText
+        type="headlineMedium"
+        style={[styles.title, { color: tokens.colors.success }]}
+      >
+        {translations.successText}
+      </AtomicText>
+
+      <ComparisonSlider
+        originalUri={originalUri}
+        processedUri={processedUri}
+        beforeLabel={translations.beforeLabel}
+        afterLabel={translations.afterLabel}
+      />
+
+      <AtomicText
+        type="bodySmall"
+        style={[styles.hint, { color: tokens.colors.textSecondary }]}
+      >
+        Drag slider to compare
+      </AtomicText>
+
+      <View style={styles.actions}>
+        <AtomicButton
+          title={translations.saveButtonText}
+          onPress={onSave}
+          variant="primary"
+          size="lg"
+        />
+        <AtomicButton
+          title={translations.tryAnotherText}
+          onPress={onReset}
+          variant="secondary"
+          size="lg"
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 24,
+  },
+  title: {
+    textAlign: "center",
+    marginBottom: 24,
+  },
+  hint: {
+    textAlign: "center",
+    marginTop: 12,
+    marginBottom: 24,
+  },
+  actions: {
+    gap: 12,
+  },
+});

package/src/features/photo-restoration/presentation/components/index.ts

@@ -0,0 +1,4 @@
+export { PhotoRestoreFeature } from "./PhotoRestoreFeature";
+export { PhotoRestoreResultView } from "./PhotoRestoreResultView";
+export type { PhotoRestoreFeatureProps } from "./PhotoRestoreFeature";
+export type { PhotoRestoreResultViewProps } from "./PhotoRestoreResultView";

package/src/features/photo-restoration/presentation/hooks/index.ts

@@ -0,0 +1,5 @@
+export { usePhotoRestoreFeature } from "./usePhotoRestoreFeature";
+export type {
+  UsePhotoRestoreFeatureProps,
+  UsePhotoRestoreFeatureReturn,
+} from "./usePhotoRestoreFeature";

package/src/features/photo-restoration/presentation/hooks/usePhotoRestoreFeature.ts

@@ -0,0 +1,137 @@
+/**
+ * usePhotoRestoreFeature Hook
+ * Manages photo restore feature state and actions
+ */
+
+import { useState, useCallback } from "react";
+import { executePhotoRestore } from "../../infrastructure/services";
+import type {
+  PhotoRestoreFeatureState,
+  PhotoRestoreFeatureConfig,
+  PhotoRestoreResult,
+} from "../../domain/types";
+
+declare const __DEV__: boolean;
+
+export interface UsePhotoRestoreFeatureProps {
+  config: PhotoRestoreFeatureConfig;
+  userId: string;
+  onSelectImage: () => Promise<string | null>;
+  onSaveImage: (imageUrl: string) => Promise<void>;
+}
+
+export interface UsePhotoRestoreFeatureReturn extends PhotoRestoreFeatureState {
+  selectImage: () => Promise<void>;
+  process: () => Promise<void>;
+  save: () => Promise<void>;
+  reset: () => void;
+}
+
+const initialState: PhotoRestoreFeatureState = {
+  imageUri: null,
+  processedUrl: null,
+  isProcessing: false,
+  progress: 0,
+  error: null,
+};
+
+export function usePhotoRestoreFeature(
+  props: UsePhotoRestoreFeatureProps,
+): UsePhotoRestoreFeatureReturn {
+  const { config, userId, onSelectImage, onSaveImage } = props;
+  const [state, setState] = useState<PhotoRestoreFeatureState>(initialState);
+
+  const selectImage = useCallback(async () => {
+    try {
+      const uri = await onSelectImage();
+      if (uri) {
+        setState((prev) => ({ ...prev, imageUri: uri, error: null }));
+        config.onImageSelect?.(uri);
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      setState((prev) => ({ ...prev, error: message }));
+    }
+  }, [onSelectImage, config]);
+
+  const handleProgress = useCallback((progress: number) => {
+    setState((prev) => ({ ...prev, progress }));
+  }, []);
+
+  const process = useCallback(async () => {
+    if (!state.imageUri) return;
+
+    setState((prev) => ({
+      ...prev,
+      isProcessing: true,
+      progress: 0,
+      error: null,
+    }));
+
+    config.onProcessingStart?.();
+
+    if (__DEV__) {
+      // eslint-disable-next-line no-console
+      console.log("[usePhotoRestoreFeature] Starting photo restore process");
+    }
+
+    const imageBase64 = await config.prepareImage(state.imageUri);
+
+    const result: PhotoRestoreResult = await executePhotoRestore(
+      {
+        imageUri: state.imageUri,
+        imageBase64,
+        userId,
+      },
+      {
+        model: config.model,
+        buildInput: config.buildInput,
+        extractResult: config.extractResult,
+        onProgress: handleProgress,
+      },
+    );
+
+    if (result.success && result.imageUrl) {
+      const url = result.imageUrl;
+      setState((prev) => ({
+        ...prev,
+        isProcessing: false,
+        processedUrl: url,
+        progress: 100,
+      }));
+      config.onProcessingComplete?.(result);
+    } else {
+      const errorMessage = result.error || "Processing failed";
+      setState((prev) => ({
+        ...prev,
+        isProcessing: false,
+        error: errorMessage,
+        progress: 0,
+      }));
+      config.onError?.(errorMessage);
+    }
+  }, [state.imageUri, userId, config, handleProgress]);
+
+  const save = useCallback(async () => {
+    if (!state.processedUrl) return;
+
+    try {
+      await onSaveImage(state.processedUrl);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      setState((prev) => ({ ...prev, error: message }));
+    }
+  }, [state.processedUrl, onSaveImage]);
+
+  const reset = useCallback(() => {
+    setState(initialState);
+  }, []);
+
+  return {
+    ...state,
+    selectImage,
+    process,
+    save,
+    reset,
+  };
+}

package/src/features/photo-restoration/presentation/index.ts

@@ -0,0 +1,2 @@
+export * from "./hooks";
+export * from "./components";

package/src/features/remove-background/domain/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Remove Background Domain Index
+ */
+
+export * from "./types";

package/src/features/remove-background/domain/types/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Remove Background Domain Types Index
+ */
+
+export type {
+  RemoveBackgroundOptions,
+  RemoveBackgroundRequest,
+  RemoveBackgroundResult,
+  RemoveBackgroundFeatureState,
+  RemoveBackgroundTranslations,
+  RemoveBackgroundInputBuilder,
+  RemoveBackgroundResultExtractor,
+  RemoveBackgroundFeatureConfig,
+} from "./remove-background.types";

package/src/features/remove-background/domain/types/remove-background.types.ts

@@ -0,0 +1,69 @@
+/**
+ * Remove Background Feature Types
+ * Request, Result, Config types for background removal
+ */
+
+export interface RemoveBackgroundOptions {
+  refineEdges?: boolean;
+  outputFormat?: "png" | "webp";
+  backgroundColor?: string;
+}
+
+export interface RemoveBackgroundRequest {
+  imageUri: string;
+  imageBase64?: string;
+  userId: string;
+  options?: RemoveBackgroundOptions;
+}
+
+export interface RemoveBackgroundResult {
+  success: boolean;
+  imageUrl?: string;
+  imageBase64?: string;
+  error?: string;
+  requestId?: string;
+}
+
+export interface RemoveBackgroundFeatureState {
+  imageUri: string | null;
+  processedUrl: string | null;
+  isProcessing: boolean;
+  progress: number;
+  error: string | null;
+}
+
+export interface RemoveBackgroundTranslations {
+  uploadTitle: string;
+  uploadSubtitle: string;
+  uploadChange: string;
+  uploadAnalyzing: string;
+  description: string;
+  processingText: string;
+  processButtonText: string;
+  successText: string;
+  saveButtonText: string;
+  tryAnotherText: string;
+  beforeLabel?: string;
+  afterLabel?: string;
+  compareHint?: string;
+}
+
+export type RemoveBackgroundInputBuilder = (
+  base64: string,
+  options?: RemoveBackgroundOptions,
+) => Record<string, unknown>;
+
+export type RemoveBackgroundResultExtractor = (result: unknown) => string | undefined;
+
+export interface RemoveBackgroundFeatureConfig {
+  providerId?: string;
+  creditCost?: number;
+  model: string;
+  buildInput: RemoveBackgroundInputBuilder;
+  extractResult?: RemoveBackgroundResultExtractor;
+  prepareImage: (imageUri: string) => Promise<string>;
+  onImageSelect?: (uri: string) => void;
+  onProcessingStart?: () => void;
+  onProcessingComplete?: (result: RemoveBackgroundResult) => void;
+  onError?: (error: string) => void;
+}

package/src/features/remove-background/index.ts

@@ -0,0 +1,27 @@
+/**
+ * Remove Background Feature
+ * Provider-agnostic background removal feature
+ */
+
+// Domain Types
+export type {
+  RemoveBackgroundOptions,
+  RemoveBackgroundRequest,
+  RemoveBackgroundResult,
+  RemoveBackgroundFeatureState,
+  RemoveBackgroundTranslations,
+  RemoveBackgroundFeatureConfig,
+  RemoveBackgroundInputBuilder,
+  RemoveBackgroundResultExtractor,
+} from "./domain";
+
+// Infrastructure Services
+export { executeRemoveBackground, hasRemoveBackgroundSupport } from "./infrastructure";
+export type { ExecuteRemoveBackgroundOptions } from "./infrastructure";
+
+// Presentation Hooks
+export { useRemoveBackgroundFeature } from "./presentation";
+export type {
+  UseRemoveBackgroundFeatureProps,
+  UseRemoveBackgroundFeatureReturn,
+} from "./presentation";

package/src/features/remove-background/infrastructure/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Remove Background Infrastructure Index
+ */
+
+export * from "./services";

package/src/features/remove-background/infrastructure/services/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Remove Background Infrastructure Services Index
+ */
+
+export { executeRemoveBackground, hasRemoveBackgroundSupport } from "./remove-background-executor";
+export type { ExecuteRemoveBackgroundOptions } from "./remove-background-executor";

package/src/features/remove-background/infrastructure/services/remove-background-executor.ts

@@ -0,0 +1,95 @@
+/**
+ * Remove Background Executor
+ * Provider-agnostic background removal execution using active AI provider
+ * Model and input format are provided via options from app level
+ */
+
+import { providerRegistry } from "../../../../infrastructure/services";
+import { cleanBase64 } from "../../../../infrastructure/utils";
+import type {
+  RemoveBackgroundRequest,
+  RemoveBackgroundResult,
+  RemoveBackgroundInputBuilder,
+  RemoveBackgroundResultExtractor,
+} from "../../domain/types";
+
+declare const __DEV__: boolean;
+
+export interface ExecuteRemoveBackgroundOptions {
+  model: string;
+  buildInput: RemoveBackgroundInputBuilder;
+  extractResult?: RemoveBackgroundResultExtractor;
+  onProgress?: (progress: number) => void;
+}
+
+function defaultExtractResult(result: unknown): string | undefined {
+  if (typeof result !== "object" || result === null) return undefined;
+
+  const r = result as Record<string, unknown>;
+
+  if (typeof r.image === "string") return r.image;
+  if (Array.isArray(r.images) && r.images[0]?.url) return r.images[0].url;
+
+  return undefined;
+}
+
+export async function executeRemoveBackground(
+  request: RemoveBackgroundRequest,
+  options: ExecuteRemoveBackgroundOptions,
+): Promise<RemoveBackgroundResult> {
+  const provider = providerRegistry.getActiveProvider();
+
+  if (!provider) {
+    return { success: false, error: "No AI provider configured" };
+  }
+
+  if (!provider.isInitialized()) {
+    return { success: false, error: "AI provider not initialized" };
+  }
+
+  if (!request.imageBase64) {
+    return { success: false, error: "Image base64 is required" };
+  }
+
+  const { model, buildInput, extractResult, onProgress } = options;
+
+  if (__DEV__) {
+    // eslint-disable-next-line no-console
+    console.log(`[RemoveBackground] Provider: ${provider.providerId}, Model: ${model}`);
+  }
+
+  try {
+    onProgress?.(10);
+
+    const base64 = cleanBase64(request.imageBase64);
+    onProgress?.(30);
+
+    const input = buildInput(base64, request.options);
+    onProgress?.(40);
+
+    const result = await provider.run(model, input);
+    onProgress?.(90);
+
+    const extractor = extractResult || defaultExtractResult;
+    const imageUrl = extractor(result);
+    onProgress?.(100);
+
+    if (!imageUrl) {
+      return { success: false, error: "No image in response" };
+    }
+
+    return { success: true, imageUrl };
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    if (__DEV__) {
+      // eslint-disable-next-line no-console
+      console.error("[RemoveBackground] Error:", message);
+    }
+    return { success: false, error: message };
+  }
+}
+
+export function hasRemoveBackgroundSupport(): boolean {
+  const provider = providerRegistry.getActiveProvider();
+  return provider !== null && provider.isInitialized();
+}

package/src/features/remove-background/presentation/hooks/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Remove Background Presentation Hooks Index
+ */
+
+export { useRemoveBackgroundFeature } from "./useRemoveBackgroundFeature";
+export type {
+  UseRemoveBackgroundFeatureProps,
+  UseRemoveBackgroundFeatureReturn,
+} from "./useRemoveBackgroundFeature";