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

package/package.json

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

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/features/upscaling/presentation/hooks/useUpscaleFeature.ts

@@ -88,10 +88,11 @@ export function useUpscaleFeature(
     );
 
     if (result.success && result.imageUrl) {
+      const url = result.imageUrl;
       setState((prev) => ({
         ...prev,
         isProcessing: false,
-        processedUrl: result.imageUrl,
+        processedUrl: url,
         progress: 100,
       }));
       config?.onProcessingComplete?.(result);