@umituz/react-native-ai-generation-content 1.17.185 → 1.17.187

package/package.json

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

package/src/domains/creations/presentation/hooks/useCreationPersistence.ts

@@ -23,7 +23,7 @@ export interface UseCreationPersistenceConfig {
   /** Credit cost for this feature (passed to onCreditDeduct) */
   readonly creditCost?: number;
   /** Callback to deduct credits on successful processing */
-  readonly onCreditDeduct?: (cost: number) => Promise<void>;
+  readonly onCreditDeduct?: (cost: number) => Promise<void | boolean>;
 }
 
 /**

package/src/index.ts

@@ -150,3 +150,30 @@ export * from "./features/text-to-voice";
 export * from "./features/hd-touch-up";
 export * from "./features/meme-generator";
 export * from "./infrastructure/orchestration";
+
+// Unified AI Feature Screen
+export {
+  AIFeatureScreen,
+  AI_FEATURE_CONFIGS,
+  getAIFeatureConfig,
+  hasAIFeature,
+  getAllAIFeatureIds,
+  getAIFeaturesByMode,
+  createFeatureTranslations,
+  createSingleImageTranslations,
+  createDualImageTranslations,
+  createComparisonTranslations,
+  createPromptTranslations,
+} from "./presentation/screens/ai-feature";
+export type {
+  AIFeatureId,
+  AIFeatureMode,
+  AIFeatureOutputType,
+  AIFeatureCreditType,
+  AIFeatureConfig,
+  AIFeatureScreenProps,
+  SingleImageTranslationKeys,
+  DualImageTranslationKeys,
+  ComparisonTranslationKeys,
+  PromptTranslationKeys,
+} from "./presentation/screens/ai-feature";

package/src/presentation/screens/ai-feature/AIFeatureScreen.tsx

@@ -0,0 +1,157 @@
+/**
+ * AIFeatureScreen
+ * Unified screen component for all AI features
+ * Reduces 9 screens to 1 configurable component
+ */
+
+import React, { useMemo, useCallback } from "react";
+import { View } from "react-native";
+import { ScreenLayout } from "@umituz/react-native-design-system";
+import { useLocalization } from "@umituz/react-native-localization";
+
+import { AIGenScreenHeader } from "../../components/headers/AIGenScreenHeader";
+import { CreditBadge } from "../../components/headers/CreditBadge";
+import { prepareImage } from "../../../infrastructure/utils/feature-utils";
+import { useCreationPersistence } from "../../../domains/creations/presentation/hooks/useCreationPersistence";
+
+// Feature components
+import { AnimeSelfieFeature } from "../../../features/anime-selfie/presentation/components/AnimeSelfieFeature";
+import { RemoveBackgroundFeature } from "../../../features/remove-background/presentation/components/RemoveBackgroundFeature";
+import { HDTouchUpFeature } from "../../../features/hd-touch-up/presentation/components/HDTouchUpFeature";
+import { UpscaleFeature } from "../../../features/upscaling/presentation/components/UpscaleFeature";
+import { PhotoRestoreFeature } from "../../../features/photo-restoration/presentation/components/PhotoRestoreFeature";
+import { RemoveObjectFeature } from "../../../features/remove-object/presentation/components/RemoveObjectFeature";
+import { ReplaceBackgroundFeature } from "../../../features/replace-background/presentation/components/ReplaceBackgroundFeature";
+import { FaceSwapFeature } from "../../../features/face-swap/presentation/components/FaceSwapFeature";
+import { AIHugFeature } from "../../../features/ai-hug/presentation/components/AIHugFeature";
+import { AIKissFeature } from "../../../features/ai-kiss/presentation/components/AIKissFeature";
+
+import { createFeatureTranslations } from "./translations";
+import type { AIFeatureScreenProps, AIFeatureId } from "./types";
+
+/**
+ * Feature component mapping
+ * Using explicit any type for component registry to allow dynamic prop injection
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const FEATURE_COMPONENTS: Record<AIFeatureId, React.ComponentType<any>> = {
+  "anime-selfie": AnimeSelfieFeature,
+  "remove-background": RemoveBackgroundFeature,
+  "hd-touch-up": HDTouchUpFeature,
+  upscale: UpscaleFeature,
+  "photo-restore": PhotoRestoreFeature,
+  "remove-object": RemoveObjectFeature,
+  "replace-background": ReplaceBackgroundFeature,
+  "face-swap": FaceSwapFeature,
+  "ai-hug": AIHugFeature,
+  "ai-kiss": AIKissFeature,
+};
+
+/**
+ * AIFeatureScreen - Unified component for all AI features
+ */
+export const AIFeatureScreen: React.FC<AIFeatureScreenProps> = ({
+  config,
+  creditCost,
+  onDeductCredits,
+  onSelectImage,
+  onSaveMedia,
+  onCheckCreditGuard,
+  imageCredits,
+  headerRightContent,
+}) => {
+  const { t } = useLocalization();
+
+  // Create persistence callbacks
+  const persistence = useCreationPersistence({
+    type: config.id,
+    creditCost,
+    onCreditDeduct: onDeductCredits,
+  });
+
+  // Create translations based on feature mode
+  const translations = useMemo(
+    () => createFeatureTranslations(config, t),
+    [config, t],
+  );
+
+  // Create feature config
+  const featureConfig = useMemo(
+    () => ({
+      prepareImage,
+      ...config.extraConfig,
+      ...persistence,
+    }),
+    [config.extraConfig, persistence],
+  );
+
+  // Credit guard callback
+  const handleBeforeProcess = useCallback(async () => {
+    // Convert featureId to PascalCase for analytics
+    const featureName = config.id
+      .split("-")
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join("");
+    return onCheckCreditGuard(creditCost, featureName);
+  }, [config.id, creditCost, onCheckCreditGuard]);
+
+  // Get the feature component
+  const FeatureComponent = FEATURE_COMPONENTS[config.id];
+
+  // Build props based on feature mode
+  const featureProps = useMemo(() => {
+    const baseProps = {
+      config: featureConfig,
+      translations,
+      onBeforeProcess: handleBeforeProcess,
+    };
+
+    // Add mode-specific props
+    switch (config.mode) {
+      case "single":
+      case "single-with-prompt":
+        return {
+          ...baseProps,
+          onSelectImage,
+          onSaveImage: onSaveMedia,
+        };
+      case "dual":
+        return {
+          ...baseProps,
+          onSelectSourceImage: onSelectImage,
+          onSelectTargetImage: onSelectImage,
+          onSaveImage: onSaveMedia,
+        };
+      case "dual-video":
+        return {
+          ...baseProps,
+          onSelectSourceImage: onSelectImage,
+          onSelectTargetImage: onSelectImage,
+          onSaveVideo: onSaveMedia,
+        };
+      default:
+        return baseProps;
+    }
+  }, [config.mode, featureConfig, translations, handleBeforeProcess, onSelectImage, onSaveMedia]);
+
+  // Default header right content with credit badge
+  const defaultHeaderRight = (
+    <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+      <CreditBadge credits={imageCredits} compact />
+    </View>
+  );
+
+  return (
+    <ScreenLayout
+      header={
+        <AIGenScreenHeader
+          title={t(`${config.translationPrefix}.title`)}
+          rightContent={headerRightContent ?? defaultHeaderRight}
+        />
+      }
+      scrollable={false}
+    >
+      <FeatureComponent {...featureProps} />
+    </ScreenLayout>
+  );
+};

package/src/presentation/screens/ai-feature/index.ts

@@ -0,0 +1,20 @@
+/**
+ * AI Feature Screen
+ * Unified screen component for all AI features
+ */
+
+export { AIFeatureScreen } from "./AIFeatureScreen";
+export { AI_FEATURE_CONFIGS, getAIFeatureConfig, hasAIFeature, getAllAIFeatureIds, getAIFeaturesByMode } from "./registry";
+export { createFeatureTranslations, createSingleImageTranslations, createDualImageTranslations, createComparisonTranslations, createPromptTranslations } from "./translations";
+export type {
+  AIFeatureId,
+  AIFeatureMode,
+  AIFeatureOutputType,
+  AIFeatureCreditType,
+  AIFeatureConfig,
+  AIFeatureScreenProps,
+  SingleImageTranslationKeys,
+  DualImageTranslationKeys,
+  ComparisonTranslationKeys,
+  PromptTranslationKeys,
+} from "./types";

package/src/presentation/screens/ai-feature/registry.ts

@@ -0,0 +1,130 @@
+/**
+ * AI Feature Registry
+ * Static configuration for all AI features
+ */
+
+import type { AIFeatureConfig, AIFeatureId } from "./types";
+
+/**
+ * Feature configurations registry
+ */
+export const AI_FEATURE_CONFIGS: Record<AIFeatureId, AIFeatureConfig> = {
+  // Single image features
+  "anime-selfie": {
+    id: "anime-selfie",
+    mode: "single",
+    outputType: "image",
+    creditType: "image",
+    translationPrefix: "anime-selfie",
+  },
+  "remove-background": {
+    id: "remove-background",
+    mode: "single",
+    outputType: "image",
+    creditType: "image",
+    translationPrefix: "remove-background",
+    extraConfig: { featureType: "remove-background" },
+  },
+  "hd-touch-up": {
+    id: "hd-touch-up",
+    mode: "single",
+    outputType: "image",
+    creditType: "image",
+    translationPrefix: "hd-touch-up",
+    extraConfig: { featureType: "hd-touch-up" },
+  },
+
+  // Comparison result features
+  upscale: {
+    id: "upscale",
+    mode: "single",
+    outputType: "image",
+    creditType: "image",
+    translationPrefix: "upscale",
+    hasComparisonResult: true,
+    extraConfig: { featureType: "upscale", defaultScaleFactor: 2 },
+  },
+  "photo-restore": {
+    id: "photo-restore",
+    mode: "single",
+    outputType: "image",
+    creditType: "image",
+    translationPrefix: "photo-restore",
+    hasComparisonResult: true,
+  },
+
+  // Prompt features
+  "remove-object": {
+    id: "remove-object",
+    mode: "single-with-prompt",
+    outputType: "image",
+    creditType: "image",
+    translationPrefix: "remove-object",
+  },
+  "replace-background": {
+    id: "replace-background",
+    mode: "single-with-prompt",
+    outputType: "image",
+    creditType: "image",
+    translationPrefix: "replace-background",
+    extraConfig: { featureType: "replace-background" },
+  },
+
+  // Dual image features
+  "face-swap": {
+    id: "face-swap",
+    mode: "dual",
+    outputType: "image",
+    creditType: "image",
+    translationPrefix: "face-swap",
+    extraConfig: { featureType: "face-swap" },
+  },
+
+  // Dual image video features
+  "ai-hug": {
+    id: "ai-hug",
+    mode: "dual-video",
+    outputType: "video",
+    creditType: "image",
+    translationPrefix: "ai-hug",
+  },
+  "ai-kiss": {
+    id: "ai-kiss",
+    mode: "dual-video",
+    outputType: "video",
+    creditType: "image",
+    translationPrefix: "ai-kiss",
+  },
+};
+
+/**
+ * Get feature config by ID
+ */
+export function getAIFeatureConfig(featureId: AIFeatureId): AIFeatureConfig {
+  const config = AI_FEATURE_CONFIGS[featureId];
+  if (!config) {
+    throw new Error(`Unknown AI feature: ${featureId}`);
+  }
+  return config;
+}
+
+/**
+ * Check if feature exists
+ */
+export function hasAIFeature(featureId: string): featureId is AIFeatureId {
+  return featureId in AI_FEATURE_CONFIGS;
+}
+
+/**
+ * Get all feature IDs
+ */
+export function getAllAIFeatureIds(): AIFeatureId[] {
+  return Object.keys(AI_FEATURE_CONFIGS) as AIFeatureId[];
+}
+
+/**
+ * Get features by mode
+ */
+export function getAIFeaturesByMode(mode: AIFeatureConfig["mode"]): AIFeatureConfig[] {
+  return Object.values(AI_FEATURE_CONFIGS).filter((config) => config.mode === mode);
+}

package/src/presentation/screens/ai-feature/translations.ts

@@ -0,0 +1,94 @@
+/**
+ * AI Feature Translations Factory
+ * Creates translation objects from prefix and t function
+ */
+
+import type { AIFeatureConfig } from "./types";
+
+type TranslateFunction = (key: string) => string;
+
+/**
+ * Create single image translations
+ */
+export function createSingleImageTranslations(prefix: string, t: TranslateFunction) {
+  return {
+    uploadTitle: t(`${prefix}.uploadTitle`),
+    uploadSubtitle: t(`${prefix}.uploadSubtitle`),
+    uploadChange: t(`${prefix}.uploadChange`),
+    uploadAnalyzing: t(`${prefix}.uploadAnalyzing`),
+    description: t(`${prefix}.description`),
+    processingText: t(`${prefix}.processingText`),
+    processButtonText: t(`${prefix}.processButtonText`),
+    successText: t(`${prefix}.successText`),
+    saveButtonText: t(`${prefix}.saveButtonText`),
+    tryAnotherText: t(`${prefix}.tryAnotherText`),
+  };
+}
+
+/**
+ * Create comparison result translations (upscale, photo-restore)
+ */
+export function createComparisonTranslations(prefix: string, t: TranslateFunction) {
+  return {
+    ...createSingleImageTranslations(prefix, t),
+    beforeLabel: t(`${prefix}.beforeLabel`),
+    afterLabel: t(`${prefix}.afterLabel`),
+  };
+}
+
+/**
+ * Create prompt feature translations (remove-object, replace-background)
+ */
+export function createPromptTranslations(prefix: string, t: TranslateFunction) {
+  return {
+    ...createSingleImageTranslations(prefix, t),
+    promptPlaceholder: t(`${prefix}.promptPlaceholder`),
+    maskTitle: t(`${prefix}.maskTitle`),
+    maskSubtitle: t(`${prefix}.maskSubtitle`),
+  };
+}
+
+/**
+ * Create dual image translations (face-swap, ai-hug, ai-kiss)
+ */
+export function createDualImageTranslations(prefix: string, t: TranslateFunction) {
+  return {
+    sourceUploadTitle: t(`${prefix}.sourceUploadTitle`),
+    sourceUploadSubtitle: t(`${prefix}.sourceUploadSubtitle`),
+    targetUploadTitle: t(`${prefix}.targetUploadTitle`),
+    targetUploadSubtitle: t(`${prefix}.targetUploadSubtitle`),
+    uploadChange: t(`${prefix}.uploadChange`),
+    uploadAnalyzing: t(`${prefix}.uploadAnalyzing`),
+    description: t(`${prefix}.description`),
+    processingText: t(`${prefix}.processingText`),
+    processButtonText: t(`${prefix}.processButtonText`),
+    successText: t(`${prefix}.successText`),
+    saveButtonText: t(`${prefix}.saveButtonText`),
+    tryAnotherText: t(`${prefix}.tryAnotherText`),
+    modalTitle: t(`${prefix}.modalTitle`),
+    modalMessage: t(`${prefix}.modalMessage`),
+    modalHint: t(`${prefix}.modalHint`),
+    modalBackgroundHint: t(`${prefix}.modalBackgroundHint`),
+  };
+}
+
+/**
+ * Create translations based on feature config
+ */
+export function createFeatureTranslations(config: AIFeatureConfig, t: TranslateFunction) {
+  const { translationPrefix, mode, hasComparisonResult } = config;
+
+  switch (mode) {
+    case "single":
+      return hasComparisonResult
+        ? createComparisonTranslations(translationPrefix, t)
+        : createSingleImageTranslations(translationPrefix, t);
+    case "single-with-prompt":
+      return createPromptTranslations(translationPrefix, t);
+    case "dual":
+    case "dual-video":
+      return createDualImageTranslations(translationPrefix, t);
+    default:
+      return createSingleImageTranslations(translationPrefix, t);
+  }
+}

package/src/presentation/screens/ai-feature/types.ts

@@ -0,0 +1,141 @@
+/**
+ * AIFeatureScreen Types
+ * Unified type definitions for all AI feature screens
+ */
+
+import type { ReactNode } from "react";
+
+/**
+ * All supported AI feature types
+ */
+export type AIFeatureId =
+  | "anime-selfie"
+  | "remove-background"
+  | "hd-touch-up"
+  | "upscale"
+  | "photo-restore"
+  | "remove-object"
+  | "replace-background"
+  | "face-swap"
+  | "ai-hug"
+  | "ai-kiss";
+
+/**
+ * Image mode for the feature
+ */
+export type AIFeatureMode = "single" | "single-with-prompt" | "dual" | "dual-video";
+
+/**
+ * Output type of the feature
+ */
+export type AIFeatureOutputType = "image" | "video";
+
+/**
+ * Credit type for the feature
+ */
+export type AIFeatureCreditType = "image" | "video";
+
+/**
+ * Translation keys structure for single image features
+ */
+export interface SingleImageTranslationKeys {
+  uploadTitle: string;
+  uploadSubtitle: string;
+  uploadChange: string;
+  uploadAnalyzing: string;
+  description: string;
+  processingText: string;
+  processButtonText: string;
+  successText: string;
+  saveButtonText: string;
+  tryAnotherText: string;
+}
+
+/**
+ * Translation keys structure for comparison result features (upscale, photo-restore)
+ */
+export interface ComparisonTranslationKeys extends SingleImageTranslationKeys {
+  beforeLabel: string;
+  afterLabel: string;
+}
+
+/**
+ * Translation keys structure for prompt features (remove-object, replace-background)
+ */
+export interface PromptTranslationKeys extends SingleImageTranslationKeys {
+  promptPlaceholder: string;
+  maskTitle?: string;
+  maskSubtitle?: string;
+}
+
+/**
+ * Translation keys structure for dual image features
+ */
+export interface DualImageTranslationKeys {
+  sourceUploadTitle: string;
+  sourceUploadSubtitle: string;
+  targetUploadTitle: string;
+  targetUploadSubtitle: string;
+  uploadChange: string;
+  uploadAnalyzing: string;
+  description: string;
+  processingText: string;
+  processButtonText: string;
+  successText: string;
+  saveButtonText: string;
+  tryAnotherText: string;
+  modalTitle?: string;
+  modalMessage?: string;
+  modalHint?: string;
+  modalBackgroundHint?: string;
+}
+
+/**
+ * Static feature configuration (doesn't change at runtime)
+ */
+export interface AIFeatureConfig {
+  /** Unique feature identifier */
+  readonly id: AIFeatureId;
+  /** Feature mode: single image, dual image, etc. */
+  readonly mode: AIFeatureMode;
+  /** Output type: image or video */
+  readonly outputType: AIFeatureOutputType;
+  /** Credit type to deduct */
+  readonly creditType: AIFeatureCreditType;
+  /** Translation key prefix (e.g., "anime-selfie" for t("anime-selfie.uploadTitle")) */
+  readonly translationPrefix: string;
+  /** Whether this feature has comparison result (before/after slider) */
+  readonly hasComparisonResult?: boolean;
+  /** Feature-specific extra config */
+  readonly extraConfig?: Record<string, unknown>;
+}
+
+/**
+ * Runtime props for AIFeatureScreen
+ */
+export interface AIFeatureScreenProps {
+  /** Feature configuration from registry */
+  readonly config: AIFeatureConfig;
+  /** Credit cost for this feature */
+  readonly creditCost: number;
+  /** Deduct credits callback */
+  readonly onDeductCredits: (cost: number) => Promise<void | boolean>;
+  /** Select image callback */
+  readonly onSelectImage: () => Promise<string | null>;
+  /** Save media callback */
+  readonly onSaveMedia: (url: string) => Promise<void>;
+  /** Credit guard check callback */
+  readonly onCheckCreditGuard: (cost: number, featureName: string) => Promise<boolean>;
+  /** Current image credits count */
+  readonly imageCredits: number;
+  /** Custom header right content */
+  readonly headerRightContent?: ReactNode;
+}
+
+/**
+ * Feature registry entry with component
+ */
+export interface AIFeatureRegistryEntry extends AIFeatureConfig {
+  /** The Feature component to render */
+  readonly Component: React.ComponentType<unknown>;
+}