@umituz/react-native-ai-generation-content 1.17.182 → 1.17.184

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

@@ -1,17 +1,13 @@
 /**
  * UpscaleFeature Component
  * Self-contained upscale feature UI component
- * Uses hook internally, only requires config and translations
+ * Uses centralized SingleImageFeatureLayout for consistent UX
  */
 
-import React, { useCallback, useMemo } from "react";
-import { ScrollView, StyleSheet } from "react-native";
-import {
-  useAppDesignTokens,
-  AtomicText,
-} from "@umituz/react-native-design-system";
+import React, { useMemo } from "react";
 import { PhotoUploadCard } from "../../../../presentation/components/PhotoUploadCard";
-import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
+import { SingleImageFeatureLayout } from "../../../../presentation/layouts";
+import type { ProcessingModalRenderProps } from "../../../../presentation/layouts";
 import { UpscaleResultView } from "./UpscaleResultView";
 import { useUpscaleFeature } from "../hooks";
 import type {
@@ -20,21 +16,17 @@ import type {
 } from "../../domain/types";
 
 export interface UpscaleFeatureProps {
-  /** Feature configuration with provider-specific settings */
   config: UpscaleFeatureConfig;
-  /** Translations for all UI text */
-  translations: UpscaleTranslations;
-  /** Image picker callback */
+  translations: UpscaleTranslations & {
+    modalTitle?: string;
+    modalMessage?: string;
+    modalHint?: string;
+    modalBackgroundHint?: string;
+  };
   onSelectImage: () => Promise<string | null>;
-  /** Save image callback */
   onSaveImage: (imageUrl: string) => Promise<void>;
-  /** Called before processing starts. Return false to cancel. */
   onBeforeProcess?: () => Promise<boolean>;
-  /** Optional custom processing modal renderer */
-  renderProcessingModal?: (props: {
-    visible: boolean;
-    progress: number;
-  }) => React.ReactNode;
+  renderProcessingModal?: (props: ProcessingModalRenderProps) => React.ReactNode;
 }
 
 export const UpscaleFeature: React.FC<UpscaleFeatureProps> = ({
@@ -45,8 +37,6 @@ export const UpscaleFeature: React.FC<UpscaleFeatureProps> = ({
   onBeforeProcess,
   renderProcessingModal,
 }) => {
-  const tokens = useAppDesignTokens();
-
   const feature = useUpscaleFeature({
     config,
     onSelectImage,
@@ -54,38 +44,47 @@ export const UpscaleFeature: React.FC<UpscaleFeatureProps> = ({
     onBeforeProcess,
   });
 
-  const photoTranslations = useMemo(
+  const modalTranslations = useMemo(
     () => ({
-      tapToUpload: translations.uploadTitle,
-      selectPhoto: translations.uploadSubtitle,
-      change: translations.uploadChange,
-      analyzing: translations.uploadAnalyzing,
+      title: translations.modalTitle || "Processing",
+      message: translations.modalMessage || "AI is upscaling your image...",
+      hint: translations.modalHint || "This may take a moment",
+      backgroundHint: translations.modalBackgroundHint || "Continue in background",
     }),
     [translations],
   );
 
-  const handleProcess = useCallback(() => {
-    void feature.process();
-  }, [feature]);
-
-  const handleSave = useCallback(() => {
-    void feature.save();
-  }, [feature]);
-
-  const handleSelectImage = useCallback(() => {
-    void feature.selectImage();
-  }, [feature]);
-
-  if (feature.processedUrl && feature.imageUri) {
-    return (
-      <ScrollView
-        style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
-        contentContainerStyle={styles.content}
-        showsVerticalScrollIndicator={false}
-      >
+  return (
+    <SingleImageFeatureLayout
+      feature={feature}
+      translations={translations}
+      modalTranslations={modalTranslations}
+      description={translations.description}
+      renderProcessingModal={renderProcessingModal}
+      renderInput={({ imageUri, onSelect, isDisabled, isProcessing }) => (
+        <PhotoUploadCard
+          imageUri={imageUri}
+          onPress={onSelect}
+          isValidating={isProcessing}
+          disabled={isDisabled}
+          translations={{
+            tapToUpload: translations.uploadTitle,
+            selectPhoto: translations.uploadSubtitle,
+            change: translations.uploadChange,
+            analyzing: translations.uploadAnalyzing,
+          }}
+          config={{
+            aspectRatio: 1,
+            borderRadius: 24,
+            showValidationStatus: false,
+            allowChange: true,
+          }}
+        />
+      )}
+      renderCustomResult={({ processedUrl, originalImageUri, onSave, onReset }) => (
         <UpscaleResultView
-          originalUri={feature.imageUri}
-          processedUri={feature.processedUrl}
+          originalUri={originalImageUri}
+          processedUri={processedUrl}
           translations={{
             successText: translations.successText,
             saveButtonText: translations.saveButtonText,
@@ -93,79 +92,10 @@ export const UpscaleFeature: React.FC<UpscaleFeatureProps> = ({
             beforeLabel: translations.beforeLabel,
             afterLabel: translations.afterLabel,
           }}
-          onSave={handleSave}
-          onReset={feature.reset}
+          onSave={onSave}
+          onReset={onReset}
         />
-      </ScrollView>
-    );
-  }
-
-  return (
-    <>
-      <ScrollView
-        style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
-        contentContainerStyle={styles.content}
-        showsVerticalScrollIndicator={false}
-      >
-        <AIGenerationForm
-          onGenerate={handleProcess}
-          isGenerating={feature.isProcessing}
-          progress={feature.progress}
-          translations={{
-            generateButton: translations.processButtonText,
-            generatingButton: translations.processingText,
-            progressTitle: translations.processingText,
-          }}
-        >
-          <AtomicText
-            type="bodyLarge"
-            style={[styles.description, { color: tokens.colors.textSecondary }]}
-          >
-            {translations.description}
-          </AtomicText>
-
-          <PhotoUploadCard
-            imageUri={feature.imageUri}
-            onPress={handleSelectImage}
-            isValidating={feature.isProcessing}
-            disabled={feature.isProcessing}
-            translations={photoTranslations}
-            config={{
-              aspectRatio: 1,
-              borderRadius: 24,
-              showValidationStatus: false,
-              allowChange: true,
-            }}
-          />
-        </AIGenerationForm>
-      </ScrollView>
-
-      {renderProcessingModal?.({ visible: feature.isProcessing, progress: feature.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/index.ts

@@ -92,6 +92,19 @@ export {
   ASPECT_RATIO_IDS, COMMON_DURATIONS,
 } from "./presentation/components";
 
+export {
+  SingleImageFeatureLayout, SingleImageWithPromptFeatureLayout,
+  DualImageFeatureLayout, DualImageVideoFeatureLayout,
+} from "./presentation/layouts";
+export type {
+  ModalTranslations, BaseLayoutTranslations, PhotoUploadTranslations,
+  SingleImageInputRenderProps, SingleImageWithPromptInputRenderProps,
+  SingleImageWithPromptFeatureState, SingleImageWithPromptFeatureLayoutProps,
+  DualImageInputRenderProps, ResultRenderProps, CustomResultRenderProps,
+  ProcessingModalRenderProps, SingleImageFeatureLayoutProps, DualImageFeatureLayoutProps,
+  DualImageVideoFeatureState, DualImageVideoFeatureLayoutProps,
+} from "./presentation/layouts";
+
 export type {
   GenerationProgressModalProps, GenerationProgressRenderProps, GenerationProgressContentProps,
   GenerationProgressBarProps, PendingJobCardProps, StatusLabels, PendingJobProgressBarProps,

package/src/infrastructure/services/image-feature-executor.service.ts

@@ -158,10 +158,25 @@ export async function executeImageFeature(
       requestId: (result as { requestId?: string })?.requestId,
     };
   } catch (error) {
-    const message = error instanceof Error ? error.message : String(error);
+    // Extract detailed error message from FAL API errors
+    let message = "Processing failed";
+    if (error instanceof Error) {
+      message = error.message;
+    } else if (typeof error === "object" && error !== null) {
+      const errObj = error as Record<string, unknown>;
+      // FAL API error format: {detail: [{msg, type, loc}]} or {message}
+      if (Array.isArray(errObj.detail) && errObj.detail[0]?.msg) {
+        message = String(errObj.detail[0].msg);
+      } else if (errObj.detail) {
+        message = JSON.stringify(errObj.detail);
+      } else if (errObj.message) {
+        message = String(errObj.message);
+      } else if (errObj.msg) {
+        message = String(errObj.msg);
+      }
+    }
     if (__DEV__) {
-       
-      console.error(`[Image:${featureType}] Error:`, message);
+      console.error(`[Image:${featureType}] Error:`, message, error);
     }
     return { success: false, error: message };
   }

package/src/presentation/layouts/DualImageFeatureLayout.tsx

@@ -0,0 +1,149 @@
+/**
+ * DualImageFeatureLayout
+ * Centralized layout for all dual-image processing features (face-swap, ai-kiss, ai-hug)
+ * Handles: Modal, ScrollView, AIGenerationForm, AIGenerationResult
+ */
+
+import React, { useCallback } from "react";
+import { ScrollView, StyleSheet } from "react-native";
+import {
+  useAppDesignTokens,
+  useResponsive,
+  AtomicText,
+} from "@umituz/react-native-design-system";
+import { AIGenerationForm } from "../components/AIGenerationForm";
+import { AIGenerationResult } from "../components/display/AIGenerationResult";
+import { GenerationProgressModal } from "../components/GenerationProgressModal";
+import type { DualImageFeatureLayoutProps } from "./types";
+
+export const DualImageFeatureLayout: React.FC<DualImageFeatureLayoutProps> = ({
+  feature,
+  translations,
+  modalTranslations,
+  modalIcon = "sparkles",
+  renderInput,
+  renderResult,
+  description,
+  renderProcessingModal,
+  children,
+}) => {
+  const tokens = useAppDesignTokens();
+  const { width: screenWidth, horizontalPadding } = useResponsive();
+  const imageSize = screenWidth - horizontalPadding * 2;
+
+  const handleProcess = useCallback(() => {
+    void feature.process();
+  }, [feature]);
+
+  const handleSave = useCallback(() => {
+    void feature.save();
+  }, [feature]);
+
+  const handleSelectSource = useCallback(() => {
+    void feature.selectSourceImage();
+  }, [feature]);
+
+  const handleSelectTarget = useCallback(() => {
+    void feature.selectTargetImage();
+  }, [feature]);
+
+  // Default modal
+  const defaultModal = (
+    <GenerationProgressModal
+      visible={feature.isProcessing}
+      progress={feature.progress}
+      icon={modalIcon}
+      title={modalTranslations.title}
+      message={modalTranslations.message}
+      hint={modalTranslations.hint}
+      backgroundHint={modalTranslations.backgroundHint}
+      onClose={() => {}}
+    />
+  );
+
+  // Result view
+  if (feature.processedUrl) {
+    return (
+      <ScrollView
+        style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
+        contentContainerStyle={styles.content}
+        showsVerticalScrollIndicator={false}
+      >
+        <AIGenerationResult
+          successText={translations.successText}
+          primaryAction={{
+            label: translations.saveButtonText,
+            onPress: handleSave,
+          }}
+          secondaryAction={{
+            label: translations.tryAnotherText,
+            onPress: feature.reset,
+          }}
+        >
+          {renderResult({ imageUrl: feature.processedUrl, imageSize })}
+        </AIGenerationResult>
+      </ScrollView>
+    );
+  }
+
+  // Input view
+  return (
+    <>
+      <ScrollView
+        style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
+        contentContainerStyle={styles.content}
+        showsVerticalScrollIndicator={false}
+      >
+        <AIGenerationForm
+          onGenerate={handleProcess}
+          isGenerating={feature.isProcessing}
+          progress={feature.progress}
+          translations={{
+            generateButton: translations.processButtonText,
+            generatingButton: translations.processingText,
+            progressTitle: translations.processingText,
+          }}
+        >
+          {description && (
+            <AtomicText
+              type="bodyLarge"
+              style={[styles.description, { color: tokens.colors.textSecondary }]}
+            >
+              {description}
+            </AtomicText>
+          )}
+
+          {children}
+
+          {renderInput({
+            sourceImageUri: feature.sourceImageUri,
+            targetImageUri: feature.targetImageUri,
+            onSelectSource: handleSelectSource,
+            onSelectTarget: handleSelectTarget,
+            isDisabled: feature.isProcessing,
+            isProcessing: feature.isProcessing,
+          })}
+        </AIGenerationForm>
+      </ScrollView>
+
+      {renderProcessingModal
+        ? renderProcessingModal({ visible: feature.isProcessing, progress: feature.progress })
+        : defaultModal}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    paddingVertical: 16,
+  },
+  description: {
+    textAlign: "center",
+    marginHorizontal: 24,
+    marginBottom: 24,
+    lineHeight: 24,
+  },
+});

package/src/presentation/layouts/DualImageVideoFeatureLayout.tsx

@@ -0,0 +1,143 @@
+/**
+ * DualImageVideoFeatureLayout
+ * Centralized layout for dual-image video features (ai-kiss, ai-hug)
+ * Handles: Modal, ScrollView, AIGenerationForm, AIGenerationResult
+ */
+
+import React, { useCallback } from "react";
+import { ScrollView, StyleSheet } from "react-native";
+import {
+  useAppDesignTokens,
+  AtomicText,
+} from "@umituz/react-native-design-system";
+import { AIGenerationForm } from "../components/AIGenerationForm";
+import { AIGenerationResult } from "../components/display/AIGenerationResult";
+import { GenerationProgressModal } from "../components/GenerationProgressModal";
+import type { DualImageVideoFeatureLayoutProps } from "./types";
+
+export const DualImageVideoFeatureLayout: React.FC<DualImageVideoFeatureLayoutProps> = ({
+  feature,
+  translations,
+  modalTranslations,
+  modalIcon = "sparkles",
+  renderInput,
+  description,
+  renderProcessingModal,
+  children,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const handleProcess = useCallback(() => {
+    void feature.process();
+  }, [feature]);
+
+  const handleSave = useCallback(() => {
+    void feature.save();
+  }, [feature]);
+
+  const handleSelectSource = useCallback(() => {
+    void feature.selectSourceImage();
+  }, [feature]);
+
+  const handleSelectTarget = useCallback(() => {
+    void feature.selectTargetImage();
+  }, [feature]);
+
+  // Default modal
+  const defaultModal = (
+    <GenerationProgressModal
+      visible={feature.isProcessing}
+      progress={feature.progress}
+      icon={modalIcon}
+      title={modalTranslations.title}
+      message={modalTranslations.message}
+      hint={modalTranslations.hint}
+      backgroundHint={modalTranslations.backgroundHint}
+      onClose={() => {}}
+    />
+  );
+
+  // Result view (video features show result without embedded content)
+  if (feature.processedVideoUrl) {
+    return (
+      <ScrollView
+        style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
+        contentContainerStyle={styles.content}
+        showsVerticalScrollIndicator={false}
+      >
+        <AIGenerationResult
+          successText={translations.successText}
+          primaryAction={{
+            label: translations.saveButtonText,
+            onPress: handleSave,
+          }}
+          secondaryAction={{
+            label: translations.tryAnotherText,
+            onPress: feature.reset,
+          }}
+        />
+      </ScrollView>
+    );
+  }
+
+  // Input view
+  return (
+    <>
+      <ScrollView
+        style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
+        contentContainerStyle={styles.content}
+        showsVerticalScrollIndicator={false}
+      >
+        <AIGenerationForm
+          onGenerate={handleProcess}
+          isGenerating={feature.isProcessing}
+          progress={feature.progress}
+          translations={{
+            generateButton: translations.processButtonText,
+            generatingButton: translations.processingText,
+            progressTitle: translations.processingText,
+          }}
+        >
+          {description && (
+            <AtomicText
+              type="bodyLarge"
+              style={[styles.description, { color: tokens.colors.textSecondary }]}
+            >
+              {description}
+            </AtomicText>
+          )}
+
+          {children}
+
+          {renderInput({
+            sourceImageUri: feature.sourceImageUri,
+            targetImageUri: feature.targetImageUri,
+            onSelectSource: handleSelectSource,
+            onSelectTarget: handleSelectTarget,
+            isDisabled: feature.isProcessing,
+            isProcessing: feature.isProcessing,
+          })}
+        </AIGenerationForm>
+      </ScrollView>
+
+      {renderProcessingModal
+        ? renderProcessingModal({ visible: feature.isProcessing, progress: feature.progress })
+        : defaultModal}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    paddingVertical: 16,
+  },
+  description: {
+    textAlign: "center",
+    marginHorizontal: 24,
+    marginBottom: 24,
+    lineHeight: 24,
+  },
+});