@umituz/react-native-ai-generation-content 1.88.3 → 1.88.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.88.3",
+  "version": "1.88.5",
   "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/presentation/screens/CreationsGalleryScreen.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useCallback, useState } from "react";
-import { View } from "react-native";
+import { View, FlatList } from "react-native";
 import { ScreenLayout } from "@umituz/react-native-design-system/layouts";
 import { FilterSheet, useAppFocusEffect } from "@umituz/react-native-design-system/molecules";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
@@ -101,37 +101,42 @@ export function CreationsGalleryScreen({
     onPostToFeed: onShareToFeed ? () => onShareToFeed(item) : undefined,
   }), [callbacks, onCreationPress, onShareToFeed]);
 
-  const renderItem = useCallback(({ item }: { item: Creation }) => (
-    <CreationCard
-      creation={item}
-      titleText={getItemTitle(item)}
-      callbacks={getItemCallbacks(item)}
-      canPostToFeed={!!onShareToFeed && item.status === "completed"}
-    />
-  ), [getItemTitle, getItemCallbacks, onShareToFeed]);
+  const [pageLimit, setPageLimit] = useState(6);
+
+  const paginatedCreations = useMemo(() => {
+    return filters.filtered.slice(0, pageLimit);
+  }, [filters.filtered, pageLimit]);
 
-  const renderGridItems = useCallback((items: Creation[]) => {
-    const rows: Array<{ left: Creation; right: Creation | null }> = [];
-    for (let i = 0; i < items.length; i += 2) {
-      rows.push({ left: items[i], right: items[i + 1] ?? null });
+  const handleLoadMore = useCallback(() => {
+    if (pageLimit < filters.filtered.length) {
+      if (__DEV__) console.log("[CreationsGallery] Loading more...", { current: pageLimit, total: filters.filtered.length });
+      setPageLimit(prev => prev + 3);
     }
-    return rows.map((row, index) => (
-      <View key={`grid-row-${index}`} style={styles.gridRow}>
-        <CreationCardCompact
-          creation={row.left}
-          callbacks={{ onPress: getItemCallbacks(row.left).onPress }}
-        />
-        {row.right ? (
+  }, [pageLimit, filters.filtered.length]);
+
+  const renderItem = useCallback(({ item }: { item: Creation }) => {
+    if (viewMode === "grid") {
+      return (
+        <View style={styles.gridItemWrapper}>
           <CreationCardCompact
-            creation={row.right}
-            callbacks={{ onPress: getItemCallbacks(row.right).onPress }}
+            creation={item}
+            callbacks={{ onPress: getItemCallbacks(item).onPress }}
           />
-        ) : (
-          <View style={styles.gridPlaceholder} />
-        )}
+        </View>
+      );
+    }
+    
+    return (
+      <View style={styles.listItemWrapper}>
+        <CreationCard
+          creation={item}
+          titleText={getItemTitle(item)}
+          callbacks={getItemCallbacks(item)}
+          canPostToFeed={!!onShareToFeed && item.status === "completed"}
+        />
       </View>
-    ));
-  }, [getItemCallbacks]);
+    );
+  }, [viewMode, getItemTitle, getItemCallbacks, onShareToFeed]);
 
   const hasScreenHeader = Boolean(onBack);
 
@@ -147,7 +152,10 @@ export function CreationsGalleryScreen({
           showFilter={showFilter}
           filterButtons={filterButtons}
           viewMode={viewMode}
-          onViewModeChange={setViewMode}
+          onViewModeChange={(mode) => {
+            setPageLimit(6); // Reset pagination on mode change
+            setViewMode(mode);
+          }}
         />
       </View>
     );
@@ -195,24 +203,28 @@ export function CreationsGalleryScreen({
   }
 
   return (
-    <ScreenLayout header={screenHeader}>
+    <ScreenLayout header={screenHeader} scrollable={false}>
       {renderHeader}
       {filters.filtered.length === 0 ? (
         <View style={[styles.listContent, styles.emptyContent]}>
           {renderEmpty}
         </View>
-      ) : viewMode === "grid" ? (
-        <View style={styles.gridContent}>
-          {renderGridItems(filters.filtered)}
-        </View>
       ) : (
-        <View style={styles.listContent}>
-          {filters.filtered.map((item) => (
-            <React.Fragment key={item.id}>
-              {renderItem({ item })}
-            </React.Fragment>
-          ))}
-        </View>
+        <FlatList
+          key={viewMode}
+          data={paginatedCreations}
+          renderItem={renderItem}
+          keyExtractor={(item) => item.id}
+          numColumns={viewMode === "grid" ? 2 : 1}
+          contentContainerStyle={viewMode === "grid" ? styles.gridContent : styles.listContent}
+          onEndReached={handleLoadMore}
+          onEndReachedThreshold={0.5}
+          initialNumToRender={3}
+          maxToRenderPerBatch={3}
+          windowSize={5}
+          removeClippedSubviews={true}
+          showsVerticalScrollIndicator={false}
+        />
       )}
       <FilterSheet visible={filters.statusFilterVisible} onClose={filters.closeStatusFilter} options={filters.statusFilter.filterOptions} selectedIds={[filters.statusFilter.selectedId]} onFilterPress={filters.statusFilter.selectFilter} onClearFilters={filters.statusFilter.clearFilter} title={t(config.translations.statusFilterTitle ?? "creations.filter.status")} clearLabel={t(config.translations.clearFilter ?? "common.clear")} />
       <FilterSheet visible={filters.mediaFilterVisible} onClose={filters.closeMediaFilter} options={filters.mediaFilter.filterOptions} selectedIds={[filters.mediaFilter.selectedId]} onFilterPress={filters.mediaFilter.selectFilter} onClearFilters={filters.mediaFilter.clearFilter} title={t(config.translations.mediaFilterTitle ?? "creations.filter.media")} clearLabel={t(config.translations.clearFilter ?? "common.clear")} />

package/src/domains/creations/presentation/screens/creations-gallery.styles.ts

@@ -17,6 +17,14 @@ export const creationsGalleryStyles = StyleSheet.create({
   gridPlaceholder: {
     flex: 1,
   },
+  gridItemWrapper: {
+    flex: 1 / 2,
+    padding: 4,
+  },
+  listItemWrapper: {
+    width: "100%",
+    marginBottom: 16,
+  },
   screenHeader: {
     flexDirection: "row",
     alignItems: "center",

package/src/domains/generation/wizard/presentation/screens/GeneratingScreen.tsx

@@ -52,16 +52,23 @@ export const GeneratingScreen: React.FC<GeneratingScreenProps> = ({
   const phase = useGenerationPhase();
   const pulseAnim = useRef(new Animated.Value(0.6)).current;
 
+  const scanAnim = useRef(new Animated.Value(0)).current;
+
   useEffect(() => {
     const animation = Animated.loop(
       Animated.sequence([
-        Animated.timing(pulseAnim, { toValue: 1, duration: 900, useNativeDriver: true }),
-        Animated.timing(pulseAnim, { toValue: 0.6, duration: 900, useNativeDriver: true }),
+        Animated.timing(scanAnim, { toValue: 1, duration: 2500, useNativeDriver: true }),
+        Animated.timing(scanAnim, { toValue: 0, duration: 2500, useNativeDriver: true }),
       ]),
     );
     animation.start();
     return () => animation.stop();
-  }, [pulseAnim]);
+  }, [scanAnim]);
+
+  const scanTranslateY = scanAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-100, 100],
+  });
 
   const messages = useMemo(() => {
     const custom = scenario?.generatingMessages;
@@ -92,10 +99,26 @@ export const GeneratingScreen: React.FC<GeneratingScreenProps> = ({
     <ScreenLayout backgroundColor={tokens.colors.backgroundPrimary}>
       <View style={styles.container}>
         <View style={styles.content}>
-          {/* Pulsing spinner */}
-          <Animated.View style={[styles.spinnerContainer, { opacity: pulseAnim, backgroundColor: tokens.colors.primary + "15" }]}>
-            <ActivityIndicator size="large" color={tokens.colors.primary} />
-          </Animated.View>
+          {/* Scanning Animation Container */}
+          <View style={[styles.scanFrame, { borderColor: tokens.colors.primary + "30" }]}>
+            <View style={[styles.scanOverlay, { backgroundColor: tokens.colors.primary + "10" }]}>
+              <Animated.View 
+                style={[
+                  styles.scanLine, 
+                  { 
+                    backgroundColor: tokens.colors.primary,
+                    transform: [{ translateY: scanTranslateY }],
+                    shadowColor: tokens.colors.primary,
+                    shadowOpacity: 0.8,
+                    shadowRadius: 10,
+                  }
+                ]} 
+              />
+            </View>
+            <Animated.View style={[styles.spinnerOverlay, { opacity: pulseAnim }]}>
+              <ActivityIndicator size="large" color={tokens.colors.primary} />
+            </Animated.View>
+          </View>
 
           <AtomicText type="headlineMedium" style={styles.title}>
             {messages.title}
@@ -197,14 +220,31 @@ const styles = StyleSheet.create({
     alignItems: "center",
     gap: 16,
   },
-  spinnerContainer: {
-    width: 80,
-    height: 80,
-    borderRadius: 40,
+  scanFrame: {
+    width: 140,
+    height: 180,
+    borderRadius: 24,
+    borderWidth: 2,
+    overflow: "hidden",
     justifyContent: "center",
     alignItems: "center",
     marginBottom: 8,
   },
+  scanOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  scanLine: {
+    width: "120%",
+    height: 3,
+    position: "absolute",
+    left: "-10%",
+    elevation: 4,
+  },
+  spinnerOverlay: {
+    zIndex: 10,
+  },
   title: {
     textAlign: "center",
   },

package/src/infrastructure/utils/couple-input.util.ts

@@ -43,19 +43,59 @@ export function prependContext(
 }
 
 /**
- * Refines a prompt for couple mode by replacing singular terms with plural ones.
- * Primarily used to fix "baked" prompts that were generated with singular defaults.
+ * Refines a prompt for couple or solo mode by adjusting plurals and keywords.
+ * Primarily used to fix "baked" prompts that were generated with a specific mode in mind.
  */
 export function refinePromptForCouple(prompt: string, isCouple: boolean): string {
-  if (!isCouple) return prompt;
+  if (isCouple) {
+    // Ensure couple context is present
+    let refined = prompt
+      .replace(/\bthe person must be\b/gi, "both people must be")
+      .replace(/\bthe person is\b/gi, "both people are")
+      .replace(/\bkeep every facial feature\b/gi, "keep every facial feature for both people")
+      .replace(/\bthe person\b/gi, "both people")
+      .replace(/\bfacial feature\b/gi, "facial features")
+      .replace(/\bidentical\b/gi, "identical for both individuals")
+      .replace(/\binstantly recognizable\b/gi, "instantly recognizable as themselves");
 
-  return prompt
-    .replace(/The person must be/g, "Both people must be")
-    .replace(/the person is/gi, "both people are")
-    .replace(/Keep every facial feature/g, "Keep every facial feature for both people")
-    .replace(/the person/gi, "both people")
-    .replace(/facial feature/gi, "facial features")
-    .replace(/identical/g, "identical for both individuals")
-    .replace(/instantly recognizable/g, "instantly recognizable as themselves");
+    // If it doesn't already have couple-hints, add them at the start
+    if (!/\b(couple|both|matching|dual|two people)\b/i.test(refined)) {
+      refined = `A photo of a couple, ${refined}`;
+    }
+    return refined;
+  } else {
+    // Solo mode: AGGRESSIVELY remove plural references to prevent "ghost" people
+    return prompt
+      // Instead of removing the clothing descriptions, just remove the gender labels 
+      // so the AI can apply the relevant clothing to the single person it sees.
+      .replace(/\sfor women\b/gi, "")
+      .replace(/\sfor men\b/gi, "")
+      // Remove collective adjectives
+      .replace(/\bmatching\b/gi, "")
+      .replace(/\bcoordinated\b/gi, "")
+      .replace(/\bcomplementary\b/gi, "")
+      .replace(/\bcoordinating\b/gi, "")
+      .replace(/\bcouple\b/gi, "person")
+      .replace(/\bduo\b/gi, "person")
+      .replace(/\bpair\b/gi, "person") 
+      .replace(/\bdoubles\b/gi, "")
+      .replace(/\bboth\b/gi, "the person")
+      .replace(/\bthey are\b/gi, "the person is")
+      .replace(/\btheir\b/gi, "the person's")
+      // Force singular clothing
+      .replace(/\bjackets\b/gi, "jacket")
+      .replace(/\boutfits\b/gi, "outfit")
+      .replace(/\bsuits\b/gi, "suit")
+      .replace(/\btuxedos\b/gi, "tuxedo")
+      .replace(/\bgowns\b/gi, "gown")
+      .replace(/\bdresses\b/gi, "dress")
+      .replace(/\bsweaters\b/gi, "sweater")
+      .replace(/\bhoodies\b/gi, "hoodie")
+      .replace(/\bcoats\b/gi, "coat")
+      .replace(/\bshirts\b/gi, "shirt")
+      .replace(/\bhats\b/gi, "hat")
+      .replace(/\baccessories\b/gi, "accessory")
+      .replace(/\s+/g, ' ').trim();
+  }
 }