@umituz/react-native-ai-generation-content 1.15.3 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.15.3",
+  "version": "1.17.0",
   "description": "Provider-agnostic AI generation orchestration for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",

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

@@ -0,0 +1 @@
+export * from "./types";

package/src/features/photo-restoration/domain/types/index.ts

@@ -0,0 +1,13 @@
+export type {
+  PhotoRestoreOptions,
+  PhotoRestoreRequest,
+  PhotoRestoreResult,
+  PhotoRestoreFeatureState,
+  PhotoRestoreTranslations,
+  PhotoRestoreFeatureConfig,
+} from "./photo-restore.types";
+
+export type {
+  IPhotoRestoreProvider,
+  PhotoRestoreProviderEntry,
+} from "./provider.types";

package/src/features/photo-restoration/domain/types/photo-restore.types.ts

@@ -0,0 +1,57 @@
+/**
+ * Photo Restore Feature Types
+ * Request, Result, Config types for photo restoration
+ */
+
+export interface PhotoRestoreOptions {
+  fixScratches?: boolean;
+  enhanceFaces?: boolean;
+  colorize?: boolean;
+}
+
+export interface PhotoRestoreRequest {
+  imageUri: string;
+  userId: string;
+  options?: PhotoRestoreOptions;
+}
+
+export interface PhotoRestoreResult {
+  success: boolean;
+  imageUrl?: string;
+  imageBase64?: string;
+  error?: string;
+  requestId?: string;
+}
+
+export interface PhotoRestoreFeatureState {
+  imageUri: string | null;
+  processedUrl: string | null;
+  isProcessing: boolean;
+  progress: number;
+  error: string | null;
+}
+
+export interface PhotoRestoreTranslations {
+  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 interface PhotoRestoreFeatureConfig {
+  providerId?: string;
+  creditCost?: number;
+  onImageSelect?: (uri: string) => void;
+  onProcessingStart?: () => void;
+  onProcessingComplete?: (result: PhotoRestoreResult) => void;
+  onError?: (error: string) => void;
+}

package/src/features/photo-restoration/domain/types/provider.types.ts

@@ -0,0 +1,23 @@
+/**
+ * Photo Restore Provider Types
+ * Interface for provider implementations
+ */
+
+import type { PhotoRestoreRequest, PhotoRestoreResult } from "./photo-restore.types";
+
+export interface IPhotoRestoreProvider {
+  readonly providerId: string;
+  readonly providerName: string;
+
+  isAvailable(): boolean;
+
+  restore(
+    request: PhotoRestoreRequest,
+    onProgress?: (progress: number) => void,
+  ): Promise<PhotoRestoreResult>;
+}
+
+export interface PhotoRestoreProviderEntry {
+  provider: IPhotoRestoreProvider;
+  priority: number;
+}

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

@@ -1 +1,39 @@
-export * from './domain/entities';
+/**
+ * Photo Restoration Feature
+ * Provider-agnostic photo restoration feature
+ */
+
+// Domain Types
+export type {
+  PhotoRestoreOptions,
+  PhotoRestoreRequest,
+  PhotoRestoreResult,
+  PhotoRestoreFeatureState,
+  PhotoRestoreTranslations,
+  PhotoRestoreFeatureConfig,
+  IPhotoRestoreProvider,
+  PhotoRestoreProviderEntry,
+} from "./domain";
+
+// Infrastructure Services
+export {
+  photoRestoreProviderRegistry,
+  executePhotoRestore,
+  getAvailablePhotoRestoreProvider,
+  hasPhotoRestoreProvider,
+} from "./infrastructure";
+export type { ExecutePhotoRestoreOptions } from "./infrastructure";
+
+// Presentation Hooks
+export { usePhotoRestoreFeature } from "./presentation";
+export type {
+  UsePhotoRestoreFeatureProps,
+  UsePhotoRestoreFeatureReturn,
+} from "./presentation";
+
+// Presentation Components
+export { PhotoRestoreFeature, PhotoRestoreResultView } from "./presentation";
+export type {
+  PhotoRestoreFeatureProps,
+  PhotoRestoreResultViewProps,
+} from "./presentation";

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

@@ -0,0 +1 @@
+export * from "./services";

package/src/features/photo-restoration/infrastructure/services/index.ts

@@ -0,0 +1,7 @@
+export { photoRestoreProviderRegistry } from "./photo-restore-provider-registry";
+export {
+  executePhotoRestore,
+  getAvailablePhotoRestoreProvider,
+  hasPhotoRestoreProvider,
+} from "./photo-restore-executor";
+export type { ExecutePhotoRestoreOptions } from "./photo-restore-executor";

package/src/features/photo-restoration/infrastructure/services/photo-restore-executor.ts

@@ -0,0 +1,64 @@
+/**
+ * Photo Restore Executor
+ * Executes photo restore operations using registered providers
+ */
+
+import { photoRestoreProviderRegistry } from "./photo-restore-provider-registry";
+import type { PhotoRestoreRequest, PhotoRestoreResult } from "../../domain/types";
+
+declare const __DEV__: boolean;
+
+export interface ExecutePhotoRestoreOptions {
+  providerId?: string;
+  onProgress?: (progress: number) => void;
+}
+
+export async function executePhotoRestore(
+  request: PhotoRestoreRequest,
+  options?: ExecutePhotoRestoreOptions,
+): Promise<PhotoRestoreResult> {
+  const provider = photoRestoreProviderRegistry.get(options?.providerId);
+
+  if (!provider) {
+    return {
+      success: false,
+      error: "No photo restore provider available",
+    };
+  }
+
+  if (!provider.isAvailable()) {
+    return {
+      success: false,
+      error: `Provider ${provider.providerId} is not available`,
+    };
+  }
+
+  if (__DEV__) {
+    // eslint-disable-next-line no-console
+    console.log(`[PhotoRestoreExecutor] Using provider: ${provider.providerId}`);
+  }
+
+  try {
+    return await provider.restore(request, options?.onProgress);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+
+    if (__DEV__) {
+      // eslint-disable-next-line no-console
+      console.error("[PhotoRestoreExecutor] Error:", message);
+    }
+
+    return {
+      success: false,
+      error: message,
+    };
+  }
+}
+
+export function getAvailablePhotoRestoreProvider(providerId?: string) {
+  return photoRestoreProviderRegistry.get(providerId);
+}
+
+export function hasPhotoRestoreProvider(providerId: string): boolean {
+  return photoRestoreProviderRegistry.hasProvider(providerId);
+}

package/src/features/photo-restoration/infrastructure/services/photo-restore-provider-registry.ts

@@ -0,0 +1,77 @@
+/**
+ * Photo Restore Provider Registry
+ * Manages registered photo restore providers
+ */
+
+import type {
+  IPhotoRestoreProvider,
+  PhotoRestoreProviderEntry,
+} from "../../domain/types";
+
+declare const __DEV__: boolean;
+
+class PhotoRestoreProviderRegistry {
+  private providers: Map<string, PhotoRestoreProviderEntry> = new Map();
+  private defaultProviderId: string | null = null;
+
+  register(provider: IPhotoRestoreProvider, priority = 0): void {
+    this.providers.set(provider.providerId, { provider, priority });
+
+    if (__DEV__) {
+      // eslint-disable-next-line no-console
+      console.log(
+        `[PhotoRestoreRegistry] Registered provider: ${provider.providerId}`,
+      );
+    }
+  }
+
+  unregister(providerId: string): void {
+    this.providers.delete(providerId);
+  }
+
+  setDefault(providerId: string): void {
+    if (!this.providers.has(providerId)) {
+      throw new Error(`Provider ${providerId} not registered`);
+    }
+    this.defaultProviderId = providerId;
+  }
+
+  get(providerId?: string): IPhotoRestoreProvider | null {
+    const id = providerId || this.defaultProviderId;
+    if (!id) return this.getHighestPriority();
+
+    const entry = this.providers.get(id);
+    return entry?.provider || null;
+  }
+
+  getAvailable(): IPhotoRestoreProvider | null {
+    const sorted = this.getSortedProviders();
+    return sorted.find((p) => p.isAvailable()) || null;
+  }
+
+  hasProvider(providerId: string): boolean {
+    return this.providers.has(providerId);
+  }
+
+  getProviderIds(): string[] {
+    return Array.from(this.providers.keys());
+  }
+
+  private getHighestPriority(): IPhotoRestoreProvider | null {
+    const sorted = this.getSortedProviders();
+    return sorted[0] || null;
+  }
+
+  private getSortedProviders(): IPhotoRestoreProvider[] {
+    return Array.from(this.providers.values())
+      .sort((a, b) => b.priority - a.priority)
+      .map((entry) => entry.provider);
+  }
+
+  reset(): void {
+    this.providers.clear();
+    this.defaultProviderId = null;
+  }
+}
+
+export const photoRestoreProviderRegistry = new PhotoRestoreProviderRegistry();

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,132 @@
+/**
+ * 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 result: PhotoRestoreResult = await executePhotoRestore(
+      {
+        imageUri: state.imageUri,
+        userId,
+      },
+      {
+        providerId: config?.providerId,
+        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/upscaling/domain/types/upscale.types.ts

@@ -43,6 +43,9 @@ export interface UpscaleTranslations {
   successText: string;
   saveButtonText: string;
   tryAnotherText: string;
+  beforeLabel?: string;
+  afterLabel?: string;
+  compareHint?: string;
 }
 
 export interface UpscaleFeatureConfig {

package/src/features/upscaling/index.ts

@@ -38,3 +38,6 @@ export type {
   UpscaleFeatureProps,
   UpscaleResultViewProps,
 } from "./presentation";
+
+// ComparisonSlider is available from ./presentation/components if needed directly
+// but not re-exported to avoid conflict with background feature's ComparisonSlider

package/src/features/upscaling/presentation/components/ComparisonSlider.tsx

@@ -0,0 +1,206 @@
+/**
+ * Comparison Slider Component
+ * Before/After comparison slider for upscaled images
+ */
+
+import * as React from "react";
+import { memo, useState, useRef, useMemo } from "react";
+import {
+  View,
+  StyleSheet,
+  Image,
+  PanResponder,
+  Dimensions,
+} from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+const { width: SCREEN_WIDTH } = Dimensions.get("window");
+
+export interface ComparisonSliderProps {
+  originalUri: string;
+  processedUri: string;
+  beforeLabel?: string;
+  afterLabel?: string;
+}
+
+export const ComparisonSlider: React.FC<ComparisonSliderProps> = memo(
+  function ComparisonSlider({
+    originalUri,
+    processedUri,
+    beforeLabel = "Before",
+    afterLabel = "After",
+  }) {
+    const tokens = useAppDesignTokens();
+    const [sliderPosition, setSliderPosition] = useState(50);
+    const containerWidth = useRef(SCREEN_WIDTH - 48);
+
+    const panResponder = useRef(
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: () => true,
+        onPanResponderMove: (_, gestureState) => {
+          const newPosition =
+            ((gestureState.moveX - 24) / containerWidth.current) * 100;
+          setSliderPosition(Math.max(5, Math.min(95, newPosition)));
+        },
+      })
+    ).current;
+
+    const themedStyles = useMemo(
+      () =>
+        StyleSheet.create({
+          container: {
+            width: "100%",
+            aspectRatio: 1,
+            borderRadius: 20,
+            overflow: "hidden",
+            backgroundColor: tokens.colors.surfaceSecondary,
+          },
+          originalContainer: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            bottom: 0,
+            overflow: "hidden",
+            borderRightWidth: 3,
+            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.surface,
+            borderWidth: 3,
+            borderColor: tokens.colors.primary,
+          },
+          labelLeft: {
+            backgroundColor: tokens.colors.surface,
+          },
+          labelRight: {
+            backgroundColor: tokens.colors.primary,
+          },
+        }),
+      [tokens]
+    );
+
+    return (
+      <View
+        style={themedStyles.container}
+        onLayout={(e) => {
+          containerWidth.current = e.nativeEvent.layout.width;
+        }}
+      >
+        <View style={styles.imageContainer}>
+          <Image
+            source={{ uri: processedUri }}
+            style={styles.image}
+            resizeMode="cover"
+          />
+
+          <View
+            style={[
+              themedStyles.originalContainer,
+              { width: `${sliderPosition}%` },
+            ]}
+          >
+            <Image
+              source={{ uri: originalUri }}
+              style={[styles.image, { width: containerWidth.current }]}
+              resizeMode="cover"
+            />
+          </View>
+
+          <View
+            style={[styles.sliderLine, { left: `${sliderPosition}%` }]}
+            {...panResponder.panHandlers}
+          >
+            <View style={themedStyles.sliderHandle}>
+              <View style={styles.handleBars}>
+                <View
+                  style={[
+                    styles.handleBar,
+                    { backgroundColor: tokens.colors.primary },
+                  ]}
+                />
+                <View
+                  style={[
+                    styles.handleBar,
+                    { backgroundColor: tokens.colors.primary },
+                  ]}
+                />
+              </View>
+            </View>
+          </View>
+
+          <View
+            style={[styles.label, styles.labelLeft, themedStyles.labelLeft]}
+          >
+            <AtomicText type="labelSmall" style={{ color: tokens.colors.text }}>
+              {beforeLabel}
+            </AtomicText>
+          </View>
+
+          <View
+            style={[styles.label, styles.labelRight, themedStyles.labelRight]}
+          >
+            <AtomicText
+              type="labelSmall"
+              style={{ color: tokens.colors.onPrimary }}
+            >
+              {afterLabel}
+            </AtomicText>
+          </View>
+        </View>
+      </View>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  imageContainer: {
+    flex: 1,
+    position: "relative",
+  },
+  image: {
+    width: "100%",
+    height: "100%",
+  },
+  sliderLine: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    width: 3,
+    marginLeft: -1.5,
+  },
+  handleBars: {
+    flexDirection: "row",
+    gap: 4,
+  },
+  handleBar: {
+    width: 3,
+    height: 16,
+    borderRadius: 2,
+  },
+  label: {
+    position: "absolute",
+    top: 12,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 16,
+  },
+  labelLeft: {
+    left: 12,
+  },
+  labelRight: {
+    right: 12,
+  },
+});

package/src/features/upscaling/presentation/components/UpscaleFeature.tsx

@@ -64,7 +64,7 @@ export const UpscaleFeature: React.FC<UpscaleFeatureProps> = ({
     onProcess();
   }, [onProcess]);
 
-  if (processedUrl) {
+  if (processedUrl && imageUri) {
     return (
       <ScrollView
         style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
@@ -72,8 +72,15 @@ export const UpscaleFeature: React.FC<UpscaleFeatureProps> = ({
         showsVerticalScrollIndicator={false}
       >
         <UpscaleResultView
-          imageUrl={processedUrl}
-          translations={translations}
+          originalUri={imageUri}
+          processedUri={processedUrl}
+          translations={{
+            successText: translations.successText,
+            saveButtonText: translations.saveButtonText,
+            tryAnotherText: translations.tryAnotherText,
+            beforeLabel: translations.beforeLabel,
+            afterLabel: translations.afterLabel,
+          }}
           onSave={onSave}
           onReset={onReset}
         />

package/src/features/upscaling/presentation/components/UpscaleResultView.tsx

@@ -1,29 +1,36 @@
 /**
  * UpscaleResultView Component
- * Displays the upscaled image result
+ * Displays the upscaled image result with before/after comparison
  */
 
 import React from "react";
-import { View, Image, StyleSheet } from "react-native";
+import { View, StyleSheet } from "react-native";
 import {
   AtomicText,
   AtomicButton,
   useAppDesignTokens,
 } from "@umituz/react-native-design-system";
+import { ComparisonSlider } from "./ComparisonSlider";
 import type { UpscaleTranslations } from "../../domain/types";
 
 export interface UpscaleResultViewProps {
-  imageUrl: string;
+  originalUri: string;
+  processedUri: string;
   translations: Pick<
     UpscaleTranslations,
-    "successText" | "saveButtonText" | "tryAnotherText"
+    | "successText"
+    | "saveButtonText"
+    | "tryAnotherText"
+    | "beforeLabel"
+    | "afterLabel"
   >;
   onSave: () => void;
   onReset: () => void;
 }
 
 export const UpscaleResultView: React.FC<UpscaleResultViewProps> = ({
-  imageUrl,
+  originalUri,
+  processedUri,
   translations,
   onSave,
   onReset,
@@ -39,18 +46,19 @@ export const UpscaleResultView: React.FC<UpscaleResultViewProps> = ({
         {translations.successText}
       </AtomicText>
 
-      <View
-        style={[
-          styles.imageCard,
-          { backgroundColor: tokens.colors.surfaceSecondary },
-        ]}
+      <ComparisonSlider
+        originalUri={originalUri}
+        processedUri={processedUri}
+        beforeLabel={translations.beforeLabel}
+        afterLabel={translations.afterLabel}
+      />
+
+      <AtomicText
+        type="bodySmall"
+        style={[styles.hint, { color: tokens.colors.textSecondary }]}
       >
-        <Image
-          source={{ uri: imageUrl }}
-          style={styles.image}
-          resizeMode="contain"
-        />
-      </View>
+        Drag slider to compare
+      </AtomicText>
 
       <View style={styles.actions}>
         <AtomicButton
@@ -79,15 +87,11 @@ const styles = StyleSheet.create({
     textAlign: "center",
     marginBottom: 24,
   },
-  imageCard: {
-    borderRadius: 24,
-    overflow: "hidden",
+  hint: {
+    textAlign: "center",
+    marginTop: 12,
     marginBottom: 24,
   },
-  image: {
-    width: "100%",
-    aspectRatio: 1,
-  },
   actions: {
     gap: 12,
   },

package/src/features/upscaling/presentation/components/index.ts

@@ -1,4 +1,6 @@
 export { UpscaleFeature } from "./UpscaleFeature";
 export { UpscaleResultView } from "./UpscaleResultView";
+export { ComparisonSlider } from "./ComparisonSlider";
 export type { UpscaleFeatureProps } from "./UpscaleFeature";
 export type { UpscaleResultViewProps } from "./UpscaleResultView";
+export type { ComparisonSliderProps } from "./ComparisonSlider";

package/src/index.ts

@@ -308,3 +308,9 @@ export * from "./features/background";
 
 export * from "./features/upscaling";
 
+// =============================================================================
+// FEATURES - Photo Restoration
+// =============================================================================
+
+export * from "./features/photo-restoration";
+

package/src/features/photo-restoration/domain/entities.ts

@@ -1,48 +0,0 @@
-/**
- * Photo Restoration Domain Entities
- */
-
-export interface PhotoRestorationConfig {
-    /**
-     * Whether to fix scratches and creases
-     * @default true
-     */
-    fixScratches?: boolean;
-
-    /**
-     * Whether to enhance faces in the photo
-     * @default true
-     */
-    enhanceFaces?: boolean;
-
-    /**
-     * Upscale factor for the result
-     * @default 2
-     */
-    upscaleFactor?: 1 | 2 | 4;
-}
-
-export interface PhotoRestorationRequest {
-    /**
-     * The image to restore.
-     * Can be a Base64 string or a remote URL.
-     */
-    image: string;
-
-    /**
-     * Optional configuration
-     */
-    options?: PhotoRestorationConfig;
-}
-
-export interface PhotoRestorationResult {
-    /**
-     * The restored image URL or Base64
-     */
-    imageUrl: string;
-
-    /**
-     * Metadata about the generation
-     */
-    metadata?: Record<string, unknown>;
-}