@umituz/react-native-ai-generation-content 1.35.4 → 1.35.6

package/package.json

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

package/src/domains/creations/index.ts

@@ -154,6 +154,7 @@ export {
 // Gallery Components
 export { CreationsHomeCard } from "./presentation/components/CreationsHomeCard";
 export { EmptyState } from "./presentation/components/EmptyState";
+export { PendingJobsSection, type PendingJobsSectionProps } from "./presentation/components/PendingJobsSection";
 
 // Utilities
 export {

package/src/domains/creations/presentation/components/PendingJobsSection.tsx

@@ -0,0 +1,78 @@
+/**
+ * PendingJobsSection Component
+ * Displays pending/processing AI generation jobs in CreationsGallery
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
+import type { BackgroundJob } from "../../../../domain/entities/job.types";
+import { PendingJobCard } from "../../../../presentation/components/PendingJobCard";
+
+export interface PendingJobsSectionProps {
+  readonly jobs: BackgroundJob[];
+  readonly onCancel?: (id: string) => void;
+  readonly onRetry?: (id: string) => void;
+  readonly title?: string;
+  readonly statusLabels?: {
+    readonly queued?: string;
+    readonly processing?: string;
+    readonly uploading?: string;
+    readonly completed?: string;
+    readonly failed?: string;
+  };
+  readonly getTypeLabel?: (type: string) => string;
+}
+
+export function PendingJobsSection({
+  jobs,
+  onCancel,
+  onRetry,
+  title,
+  statusLabels,
+  getTypeLabel,
+}: PendingJobsSectionProps): React.ReactElement | null {
+  const tokens = useAppDesignTokens();
+
+  // Only show processing/queued jobs
+  const activeJobs = jobs.filter(
+    (job) => job.status === "processing" || job.status === "queued" || job.status === "failed",
+  );
+
+  if (activeJobs.length === 0) {
+    return null;
+  }
+
+  const styles = StyleSheet.create({
+    container: {
+      marginBottom: 16,
+    },
+    title: {
+      fontSize: 14,
+      fontWeight: "600",
+      color: tokens.colors.textSecondary,
+      marginBottom: 12,
+    },
+    jobsContainer: {
+      gap: 12,
+    },
+  });
+
+  return (
+    <View style={styles.container}>
+      {title && <AtomicText style={styles.title}>{title}</AtomicText>}
+      <View style={styles.jobsContainer}>
+        {activeJobs.map((job) => (
+          <PendingJobCard
+            key={job.id}
+            job={job}
+            onCancel={onCancel}
+            onRetry={onRetry}
+            typeLabel={getTypeLabel ? getTypeLabel(job.type) : job.type}
+            statusLabels={statusLabels}
+          />
+        ))}
+      </View>
+    </View>
+  );
+}

package/src/domains/creations/presentation/components/index.ts

@@ -32,3 +32,4 @@ export { GalleryEmptyStates } from "./GalleryEmptyStates";
 export { CreationsHomeCard } from "./CreationsHomeCard";
 export { CreationRating } from "./CreationRating";
 export { CreationsGrid } from "./CreationsGrid";
+export { PendingJobsSection, type PendingJobsSectionProps } from "./PendingJobsSection";

package/src/domains/creations/presentation/screens/CreationsGalleryScreen.tsx

@@ -13,10 +13,11 @@ import {
 import { useCreations } from "../hooks/useCreations";
 import { useDeleteCreation } from "../hooks/useDeleteCreation";
 import { useGalleryFilters } from "../hooks/useGalleryFilters";
-import { GalleryHeader, CreationCard, GalleryEmptyStates } from "../components";
+import { GalleryHeader, CreationCard, GalleryEmptyStates, PendingJobsSection } from "../components";
 import { ResultPreviewScreen } from "../../../result-preview/presentation/components/ResultPreviewScreen";
 import { StarRatingPicker } from "../../../result-preview/presentation/components/StarRatingPicker";
 import { useResultActions } from "../../../result-preview/presentation/hooks/useResultActions";
+import { usePendingJobs } from "../../../../presentation/hooks/use-pending-jobs";
 import { MEDIA_FILTER_OPTIONS, STATUS_FILTER_OPTIONS } from "../../domain/types/creation-filter";
 import { getPreviewUrl } from "../../domain/utils";
 import type { Creation } from "../../domain/entities/Creation";
@@ -32,6 +33,10 @@ interface CreationsGalleryScreenProps {
   readonly onEmptyAction?: () => void;
   readonly emptyActionLabel?: string;
   readonly showFilter?: boolean;
+  /** Show pending generation jobs at the top */
+  readonly showPendingJobs?: boolean;
+  /** Title for the pending jobs section */
+  readonly pendingJobsTitle?: string;
 }
 
 export function CreationsGalleryScreen({
@@ -43,6 +48,8 @@ export function CreationsGalleryScreen({
   onEmptyAction,
   emptyActionLabel,
   showFilter = config.showFilter ?? true,
+  showPendingJobs = true,
+  pendingJobsTitle,
 }: CreationsGalleryScreenProps) {
   const tokens = useAppDesignTokens();
   const { share } = useSharing();
@@ -53,6 +60,9 @@ export function CreationsGalleryScreen({
 
   const { data: creations, isLoading, refetch } = useCreations({ userId, repository });
 
+  // Background jobs for pending generations
+  const { jobs: pendingJobs, removeJob } = usePendingJobs();
+
   // Auto-select creation when initialCreationId is provided
   useEffect(() => {
     if (initialCreationId && creations && creations.length > 0 && !hasAutoSelectedRef.current) {
@@ -180,20 +190,49 @@ export function CreationsGalleryScreen({
     />
   ), [handleShareCard, handleDelete, handleFavorite, handleCardPress, getScenarioTitle]);
 
+  // Status labels for pending jobs
+  const pendingJobStatusLabels = useMemo(() => ({
+    queued: t("generator.status.queued") || "Waiting in queue...",
+    processing: t("generator.status.processing") || "Processing...",
+    uploading: t("generator.status.uploading") || "Uploading...",
+    completed: t("generator.status.completed") || "Completed",
+    failed: t("generator.status.failed") || "Failed",
+  }), [t]);
+
   const renderHeader = useMemo(() => {
-    if ((!creations || creations.length === 0) && !isLoading) return null;
+    const hasPendingJobs = showPendingJobs && pendingJobs.length > 0;
+    const hasCreations = creations && creations.length > 0;
+
+    if (!hasPendingJobs && !hasCreations && !isLoading) return null;
+
     return (
-      <View style={[styles.header, { backgroundColor: tokens.colors.surface, borderBottomColor: tokens.colors.border }]}>
-        <GalleryHeader
-          title={t(config.translations.title)}
-          count={filters.filtered.length}
-          countLabel={t(config.translations.photoCount)}
-          showFilter={showFilter}
-          filterButtons={filterButtons}
-        />
+      <View>
+        {/* Pending Jobs Section */}
+        {showPendingJobs && (
+          <PendingJobsSection
+            jobs={pendingJobs}
+            onCancel={removeJob}
+            title={pendingJobsTitle || t("creations.pendingJobs") || "Processing..."}
+            statusLabels={pendingJobStatusLabels}
+            getTypeLabel={getScenarioTitle}
+          />
+        )}
+
+        {/* Gallery Header */}
+        {hasCreations && (
+          <View style={[styles.header, { backgroundColor: tokens.colors.surface, borderBottomColor: tokens.colors.border }]}>
+            <GalleryHeader
+              title={t(config.translations.title)}
+              count={filters.filtered.length}
+              countLabel={t(config.translations.photoCount)}
+              showFilter={showFilter}
+              filterButtons={filterButtons}
+            />
+          </View>
+        )}
       </View>
     );
-  }, [creations, isLoading, filters.filtered.length, showFilter, filterButtons, t, config, tokens]);
+  }, [creations, isLoading, filters.filtered.length, showFilter, filterButtons, t, config, tokens, showPendingJobs, pendingJobs, removeJob, pendingJobsTitle, pendingJobStatusLabels, getScenarioTitle]);
 
   const renderEmpty = useMemo(() => (
     <GalleryEmptyStates

package/src/domains/generation/wizard/presentation/hooks/useWizardGeneration.ts

@@ -1,11 +1,13 @@
 /**
  * useWizardGeneration Hook
  * Wizard generation using orchestrator + strategy factory pattern
+ * Includes background job tracking for CreationsGallery display
  */
 
-import { useEffect, useRef, useMemo } from "react";
+import { useEffect, useRef, useMemo, useCallback } from "react";
 import { useGenerationOrchestrator } from "../../../../../presentation/hooks/generation";
 import type { AlertMessages } from "../../../../../presentation/hooks/generation/types";
+import { usePendingJobs } from "../../../../../presentation/hooks/use-pending-jobs";
 import { createWizardStrategy, buildWizardInput } from "../../infrastructure/strategies";
 
 declare const __DEV__: boolean;
@@ -32,10 +34,14 @@ export interface UseWizardGenerationProps {
   readonly onSuccess?: (result: unknown) => void;
   readonly onError?: (error: string) => void;
   readonly onCreditsExhausted?: () => void;
+  /** Enable background job tracking for CreationsGallery display */
+  readonly trackAsBackgroundJob?: boolean;
 }
 
 export interface UseWizardGenerationReturn {
   readonly isGenerating: boolean;
+  /** Current job ID if tracking is enabled */
+  readonly currentJobId: string | null;
 }
 
 export const useWizardGeneration = (
@@ -50,18 +56,24 @@ export const useWizardGeneration = (
     onSuccess,
     onError,
     onCreditsExhausted,
+    trackAsBackgroundJob = true,
   } = props;
 
   const hasStarted = useRef(false);
+  const currentJobIdRef = useRef<string | null>(null);
+
+  // Background job tracking
+  const { addJob, updateJob, removeJob } = usePendingJobs();
 
   useEffect(() => {
     if (typeof __DEV__ !== "undefined" && __DEV__) {
       console.log("[useWizardGeneration] Initialized", {
         scenarioId: scenario.id,
         outputType: scenario.outputType || "video",
+        trackAsBackgroundJob,
       });
     }
-  }, [scenario.id, scenario.outputType]);
+  }, [scenario.id, scenario.outputType, trackAsBackgroundJob]);
 
   const strategy = useMemo(() => {
     return createWizardStrategy({
@@ -71,6 +83,44 @@ export const useWizardGeneration = (
     });
   }, [scenario, wizardData]);
 
+  // Handle generation success - remove job from queue
+  const handleSuccess = useCallback(
+    (result: unknown) => {
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        console.log("[useWizardGeneration] Success");
+      }
+
+      // Remove job from pending queue (creation is saved)
+      if (trackAsBackgroundJob && currentJobIdRef.current) {
+        removeJob(currentJobIdRef.current);
+        currentJobIdRef.current = null;
+      }
+
+      onSuccess?.(result);
+    },
+    [trackAsBackgroundJob, removeJob, onSuccess],
+  );
+
+  // Handle generation error - update job status
+  const handleError = useCallback(
+    (err: { message: string }) => {
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        console.log("[useWizardGeneration] Error:", err.message);
+      }
+
+      // Update job to failed status
+      if (trackAsBackgroundJob && currentJobIdRef.current) {
+        updateJob({
+          id: currentJobIdRef.current,
+          updates: { status: "failed", error: err.message, progress: 0 },
+        });
+      }
+
+      onError?.(err.message);
+    },
+    [trackAsBackgroundJob, updateJob, onError],
+  );
+
   const { generate, isGenerating } = useGenerationOrchestrator(
     strategy,
     {
@@ -83,18 +133,8 @@ export const useWizardGeneration = (
         unknown: "An error occurred",
       },
       onCreditsExhausted,
-      onSuccess: (result) => {
-        if (typeof __DEV__ !== "undefined" && __DEV__) {
-          console.log("[useWizardGeneration] Success");
-        }
-        onSuccess?.(result);
-      },
-      onError: (err) => {
-        if (typeof __DEV__ !== "undefined" && __DEV__) {
-          console.log("[useWizardGeneration] Error:", err.message);
-        }
-        onError?.(err.message);
-      },
+      onSuccess: handleSuccess,
+      onError: handleError,
     },
   );
 
@@ -116,6 +156,29 @@ export const useWizardGeneration = (
             onError?.("Failed to build generation input");
             return;
           }
+
+          // Create background job for tracking
+          if (trackAsBackgroundJob) {
+            const jobId = `wizard-${scenario.id}-${Date.now()}`;
+            currentJobIdRef.current = jobId;
+
+            addJob({
+              id: jobId,
+              input: {
+                scenarioId: scenario.id,
+                scenarioTitle: scenario.title || scenario.id,
+                outputType: scenario.outputType || "video",
+              },
+              type: scenario.outputType || "video",
+              status: "processing",
+              progress: 10,
+            });
+
+            if (typeof __DEV__ !== "undefined" && __DEV__) {
+              console.log("[useWizardGeneration] Created background job:", jobId);
+            }
+          }
+
           generate(input);
         })
         .catch((error) => {
@@ -130,7 +193,19 @@ export const useWizardGeneration = (
     if (!isGeneratingStep && hasStarted.current) {
       hasStarted.current = false;
     }
-  }, [isGeneratingStep, scenario, wizardData, isGenerating, generate, onError]);
-
-  return { isGenerating };
+  }, [
+    isGeneratingStep,
+    scenario,
+    wizardData,
+    isGenerating,
+    generate,
+    onError,
+    trackAsBackgroundJob,
+    addJob,
+  ]);
+
+  return {
+    isGenerating,
+    currentJobId: currentJobIdRef.current,
+  };
 };

package/src/domains/prompts/domain/entities/BasePromptStructure.ts

@@ -20,7 +20,6 @@ export const IDENTITY_PRESERVATION_CORE = `CRITICAL IDENTITY PRESERVATION (HIGHE
   "mandatory_rules": [
     "The face must be EXACTLY as it appears in the reference photo - 100% identical",
     "Preserve every facial detail: bone structure, eye shape, eye color, nose shape, lip shape",
-    "Maintain natural skin texture with pores, marks, and realistic details",
     "Keep the person instantly recognizable - any deviation is NOT acceptable"
   ],
   "forbidden_modifications": [
@@ -28,7 +27,6 @@ export const IDENTITY_PRESERVATION_CORE = `CRITICAL IDENTITY PRESERVATION (HIGHE
     "Do NOT alter eye color, eye shape, or eye spacing",
     "Do NOT modify nose shape, size, or position",
     "Do NOT change lip shape, thickness, or natural expression",
-    "Do NOT alter skin tone or smooth skin texture",
     "Do NOT remove natural features like freckles, moles, or wrinkles"
   ],
   "verification": "Before output: confirm face matches reference photo with 100% accuracy"
@@ -36,17 +34,14 @@ export const IDENTITY_PRESERVATION_CORE = `CRITICAL IDENTITY PRESERVATION (HIGHE
 
 /**
  * Photorealistic rendering instruction
- * Ensures high-quality, professional photography output
  */
 export const PHOTOREALISTIC_RENDERING = `PHOTOREALISTIC RENDERING REQUIREMENTS:
 {
-  "style": "HIGH-END PHOTOREALISTIC PHOTOGRAPH",
-  "quality": "8k resolution, ultra-detailed textures, professional photography",
-  "lighting": "Cinematic lighting with natural shadows and highlights",
-  "camera": "Shot on professional DSLR camera (Canon EOS R5, Sony A7R V, or equivalent)",
-  "lens": "Professional lens with appropriate focal length (35mm, 50mm, 85mm)",
+  "style": "PHOTOREALISTIC PHOTOGRAPH",
+  "quality": "high quality, professional photography",
+  "lighting": "Natural lighting with realistic shadows and highlights",
   "prohibited": "STRICTLY NO anime, cartoons, illustrations, sketches, 3D renders, or non-photorealistic styles",
-  "output": "Must look like a real photograph taken by a professional photographer"
+  "output": "Must look like a real photograph"
 }`;
 
 /**
@@ -150,14 +145,14 @@ TRANSFORMATION REQUEST:
     "environment_update": "${background.replace(/\n/g, ' ').trim()}"
   },
   "visual_constraints": {
-    "style_matching": "Render as a premium DSLR photograph",
+    "style_matching": "Render as a premium photograph",
     "face_preservation": "Maintain 100% identity of the person",
-    "lighting": "Realistic professional studio or outdoor cinematic lighting",
+    "lighting": "Realistic professional recording lighting",
     "pose": "Natural, contextually appropriate pose"
   }
 }
 
-FINAL COMMAND: Transform the input person into a strictly photorealistic ${styleName}. The result MUST be a real-life looking person in high-quality ${styleName} attire, maintaining perfect facial identity.`;
+FINAL COMMAND: Transform the input person into a photorealistic ${styleName}. The result MUST be a real-life looking person in high-quality ${styleName} attire, maintaining perfect facial identity.`;
 
 /**
  * Simplified prompt for scenarios that already include detailed instructions
@@ -171,54 +166,3 @@ export const enhanceExistingPrompt = (existingPrompt: string): string => {
 
 ${existingPrompt}`;
 };
-
-/**
- * Multi-person identity preservation rules
- * Ensures all people maintain their identities with strict rules
- * Supports any number of people (1, 2, 3, N)
- */
-export const MULTI_PERSON_PRESERVATION_RULES = {
-  requirement: "ALL individuals must have 100% identical facial appearance to their reference photos",
-  perPersonRule: "Use EXACTLY the person from @imageN - preserve 100% identical facial features",
-  forbidden: [
-    "Do NOT swap, mix, or blend facial features between people",
-    "Do NOT idealize or beautify any face",
-    "Do NOT alter facial proportions or characteristics",
-  ],
-  positioning: "Natural positioning, all looking at camera with natural expressions",
-} as const;
-
-/**
- * Creates a multi-person prompt dynamically
- *
- * @param scenarioPrompt - The scenario description
- * @param personCount - Number of people (1, 2, 3, N)
- * @returns Complete prompt with identity preservation for all people
- */
-export const createMultiPersonPrompt = (
-  scenarioPrompt: string,
-  personCount: number,
-): string => {
-  const personRefs = Array.from({ length: personCount }, (_, i) =>
-    `Person ${i + 1}: @image${i + 1} - preserve 100% facial identity`
-  ).join("\n  ");
-
-  return `${IDENTITY_PRESERVATION_CORE}
-
-MULTI-PERSON IDENTITY PRESERVATION (${personCount} people):
-{
-  "requirement": "${MULTI_PERSON_PRESERVATION_RULES.requirement}",
-  "references": [
-    ${personRefs}
-  ],
-  "forbidden": ${JSON.stringify(MULTI_PERSON_PRESERVATION_RULES.forbidden)},
-  "positioning": "${MULTI_PERSON_PRESERVATION_RULES.positioning}"
-}
-
-${PHOTOREALISTIC_RENDERING}
-
-${NATURAL_POSE_GUIDELINES}
-
-SCENARIO DESCRIPTION:
-${scenarioPrompt}`;
-};

package/src/domains/prompts/domain/entities/MultiPersonPromptStructure.ts

@@ -0,0 +1,59 @@
+import { IDENTITY_PRESERVATION_CORE, NATURAL_POSE_GUIDELINES, PHOTOREALISTIC_RENDERING } from "./BasePromptStructure";
+
+/**
+ * Multi-person identity preservation rules
+ * Ensures all people maintain their identities with strict rules
+ * Supports any number of people (1, 2, 3, N)
+ */
+export interface MultiPersonPreservationRules {
+  requirement: string;
+  perPersonRule: string;
+  forbidden: string[];
+  positioning: string;
+}
+
+export const MULTI_PERSON_PRESERVATION_RULES: MultiPersonPreservationRules = {
+  requirement: "ALL individuals must have 100% identical facial appearance to their reference photos",
+  perPersonRule: "Use EXACTLY the person from @imageN - preserve 100% identical facial features",
+  forbidden: [
+    "Do NOT swap, mix, or blend facial features between people",
+    "Do NOT idealize or beautify any face",
+    "Do NOT alter facial proportions or characteristics",
+  ],
+  positioning: "Natural positioning, all looking at camera with natural expressions",
+};
+
+/**
+ * Creates a multi-person prompt dynamically
+ *
+ * @param scenarioPrompt - The scenario description
+ * @param personCount - Number of people (1, 2, 3, N)
+ * @returns Complete prompt with identity preservation for all people
+ */
+export const createMultiPersonPrompt = (
+  scenarioPrompt: string,
+  personCount: number,
+): string => {
+  const personRefs = Array.from({ length: personCount }, (_, i) =>
+    `Person ${i + 1}: @image${i + 1} - preserve 100% facial identity`
+  ).join("\n  ");
+
+  return `${IDENTITY_PRESERVATION_CORE}
+
+MULTI-PERSON IDENTITY PRESERVATION (${personCount} people):
+{
+  "requirement": "${MULTI_PERSON_PRESERVATION_RULES.requirement}",
+  "references": [
+    ${personRefs}
+  ],
+  "forbidden": ${JSON.stringify(MULTI_PERSON_PRESERVATION_RULES.forbidden)},
+  "positioning": "${MULTI_PERSON_PRESERVATION_RULES.positioning}"
+}
+
+${PHOTOREALISTIC_RENDERING}
+
+${NATURAL_POSE_GUIDELINES}
+
+SCENARIO DESCRIPTION:
+${scenarioPrompt}`;
+};

package/src/domains/scenarios/infrastructure/utils/scenario-utils.ts

@@ -8,10 +8,8 @@
  * These ensure consistent, realistic output across all scenarios
  */
 export const PHOTOREALISTIC_BASE = {
-  quality: "ultra-realistic photograph, photorealistic, RAW photo quality, 8K UHD resolution",
-  skin: "natural skin with subtle texture, visible pores, authentic subtle imperfections, realistic human features",
-  camera: "shot on professional DSLR camera with 85mm f/1.4 lens, shallow depth of field, soft bokeh background",
-  lighting: "natural volumetric lighting, cinematic color grading",
+  quality: "photorealistic",
+  lighting: "cinematic lighting",
 } as const;
 
 /**
@@ -25,7 +23,7 @@ export const createPhotorealisticPrompt = (
   lightingOverride?: string,
 ): string => {
   const lighting = lightingOverride ?? PHOTOREALISTIC_BASE.lighting;
-  return `${PHOTOREALISTIC_BASE.quality}, ${scene}, ${PHOTOREALISTIC_BASE.skin}, ${lighting}, ${PHOTOREALISTIC_BASE.camera}`;
+  return `${PHOTOREALISTIC_BASE.quality}, ${scene}, ${lighting}`;
 };
 
 export const createStoryTemplate = (