@umituz/react-native-ai-generation-content 1.17.229 → 1.17.231

package/src/features/shared/README.md

@@ -0,0 +1,280 @@
+# Shared Features
+
+Common functionality and utilities shared across multiple AI features.
+
+## Overview
+
+This directory contains shared components, hooks, and utilities used by multiple features. It provides reusable implementations for common patterns like dual image/video processing.
+
+## Features
+
+- **Dual Image/Video Processing**: Shared logic for features that require two inputs
+- **Common Hooks**: Reusable hooks for similar feature patterns
+- **Type Definitions**: Shared TypeScript types and interfaces
+- **Utilities**: Common helper functions
+
+## Installation
+
+This is part of `@umituz/react-native-ai-generation-content`.
+
+```bash
+npm install @umituz/react-native-ai-generation-content
+```
+
+## Dual Image/Video Processing
+
+Many AI features require two images or videos as input (e.g., face swap, AI hug, AI kiss). The dual image/video processing module provides a shared implementation for these features.
+
+### Data Types
+
+#### DualImageVideoProcessingStartData
+
+```tsx
+interface DualImageVideoProcessingStartData {
+  sourceImageOrVideo: string; // Base64 of source image/video
+  targetImageOrVideo: string; // Base64 of target image/video
+  options?: Record<string, any>;
+}
+```
+
+#### DualImageVideoResult
+
+```tsx
+interface DualImageVideoResult {
+  success: boolean;
+  result?: {
+    imageUrl?: string;
+    videoUrl?: string;
+    thumbnailUrl?: string;
+    metadata?: Record<string, any>;
+  };
+  error?: string;
+}
+```
+
+#### DualImageVideoFeatureConfig
+
+```tsx
+interface DualImageVideoFeatureConfig {
+  featureType: string; // e.g., 'face-swap', 'ai-hug', 'ai-kiss'
+  inputType: 'image' | 'video';
+  defaultOptions?: Record<string, any>;
+  onProcessingStart?: () => void;
+  onProcessingComplete?: (result: DualImageVideoResult) => void;
+  onError?: (error: string) => void;
+}
+```
+
+## Usage Example
+
+### Using Dual Image/Video Processing
+
+```tsx
+import { useDualImageVideoProcessing } from '@umituz/react-native-ai-generation-content';
+
+function FaceSwapScreen() {
+  const [sourceImage, setSourceImage] = useState<string | null>(null);
+  const [targetImage, setTargetImage] = useState<string | null>(null);
+
+  const {
+    state,
+    selectSourceImage,
+    selectTargetImage,
+    process,
+    reset,
+    isReady,
+  } = useDualImageVideoProcessing({
+    config: {
+      featureType: 'face-swap',
+      inputType: 'image',
+      defaultOptions: {
+        enhanceFace: true,
+        matchSkinTone: true,
+      },
+      onProcessingStart: () => console.log('Starting face swap...'),
+      onProcessingComplete: (result) => console.log('Complete:', result),
+      onError: (error) => console.error('Error:', error),
+    },
+    onSelectSourceImage: async () => {
+      // Select source image
+      const result = await ImagePicker.launchImageLibrary({ mediaType: 'photo' });
+      if (result.assets && result.assets[0].uri) {
+        const base64 = await convertToBase64(result.assets[0].uri);
+        setSourceImage(base64);
+        return base64;
+      }
+      return null;
+    },
+    onSelectTargetImage: async () => {
+      // Select target image
+      const result = await ImagePicker.launchImageLibrary({ mediaType: 'photo' });
+      if (result.assets && result.assets[0].uri) {
+        const base64 = await convertToBase64(result.assets[0].uri);
+        setTargetImage(base64);
+        return base64;
+      }
+      return null;
+    },
+  });
+
+  return (
+    <View>
+      <DualImagePicker
+        sourceImage={sourceImage}
+        targetImage={targetImage}
+        onSelectSourceImage={selectSourceImage}
+        onSelectTargetImage={selectTargetImage}
+      />
+
+      <Button
+        title="Process"
+        onPress={process}
+        disabled={!isReady || state.isProcessing}
+      />
+
+      {state.isProcessing && <ActivityIndicator />}
+
+      {state.result && (
+        <Image source={{ uri: state.result.result?.imageUrl }} />
+      )}
+
+      {state.error && <Text>Error: {state.error}</Text>}
+    </View>
+  );
+}
+```
+
+## State Management
+
+### Processing State
+
+```tsx
+interface DualImageVideoState {
+  sourceImageOrVideo: string | null;
+  targetImageOrVideo: string | null;
+  result: DualImageVideoResult | null;
+  isProcessing: boolean;
+  progress: number;
+  error: string | null;
+}
+```
+
+## Features Using Dual Image/Video Processing
+
+- **Face Swap**: Swap faces between two images
+- **AI Hug**: Generate hug images from two photos
+- **AI Kiss**: Generate kiss images from two photos
+- **Couple Future**: Generate future predictions for couples
+
+## Helper Components
+
+### DualImagePicker
+
+```tsx
+import { DualImagePicker } from '@umituz/react-native-ai-generation-content';
+
+<DualImagePicker
+  sourceImage={sourceImage}
+  targetImage={targetImage}
+  onSelectSourceImage={handleSelectSource}
+  onSelectTargetImage={handleSelectTarget}
+  sourceLabel="First Image"
+  targetLabel="Second Image"
+/>
+```
+
+### DualVideoPicker
+
+```tsx
+import { DualVideoPicker } from '@umituz/react-native-ai-generation-content';
+
+<DualVideoPicker
+  sourceVideo={sourceVideo}
+  targetVideo={targetVideo}
+  onSelectSourceVideo={handleSelectSource}
+  onSelectTargetVideo={handleSelectTarget}
+  sourceLabel="First Video"
+  targetLabel="Second Video"
+/>
+```
+
+## Advanced Usage
+
+### Custom Processing Logic
+
+```tsx
+import { useDualImageVideoProcessing } from '@umituz/react-native-ai-generation-content';
+
+const { process } = useDualImageVideoProcessing({
+  config: {
+    featureType: 'my-custom-feature',
+    inputType: 'image',
+  },
+  // ... other props
+  customProcess: async (source, target, options) => {
+    // Custom processing logic
+    const result = await myCustomProcessingFunction(source, target, options);
+    return result;
+  },
+});
+```
+
+### Validation
+
+```tsx
+const { validate } = useDualImageVideoProcessing({
+  // ... config
+  validateInput: (source, target) => {
+    if (!source || !target) {
+      throw new Error('Both images are required');
+    }
+    if (source.size > MAX_SIZE) {
+      throw new Error('Source image is too large');
+    }
+    if (target.size > MAX_SIZE) {
+      throw new Error('Target image is too large');
+    }
+    return true;
+  },
+});
+```
+
+### Before Process Hook
+
+```tsx
+const { process } = useDualImageVideoProcessing({
+  // ... config
+  onBeforeProcess: async (source, target) => {
+    // Show confirmation dialog
+    return new Promise((resolve) => {
+      Alert.alert(
+        'Confirm',
+        'Do you want to proceed?',
+        [
+          { text: 'Cancel', onPress: () => resolve(false) },
+          { text: 'OK', onPress: () => resolve(true) },
+        ]
+      );
+    });
+  },
+});
+```
+
+## Best Practices
+
+1. **Input Validation**: Always validate inputs before processing
+2. **Error Handling**: Handle errors gracefully and show user-friendly messages
+3. **Progress Tracking**: Show progress to users during processing
+4. **Confirmation**: Use confirmation dialogs for destructive operations
+5. **State Reset**: Reset state after successful operations
+
+## Related Features
+
+- [Face Swap](../face-swap) - Swap faces between images
+- [AI Hug](../ai-hug) - Generate AI hug images
+- [AI Kiss](../ai-kiss) - Generate AI kiss images
+- [Couple Future](../couple-future) - Generate future couple predictions
+
+## License
+
+MIT

package/src/features/sketch-to-image/README.md

@@ -0,0 +1,296 @@
+# Sketch to Image
+
+Convert hand-drawn sketches and doodles into realistic images using AI.
+
+## Features
+
+- Transform rough sketches into detailed images
+- Support for various sketch styles
+- Multiple output styles (realistic, artistic, etc.)
+- Automatic detail enhancement
+- Color and texture generation
+
+## Installation
+
+This feature is part of `@umituz/react-native-ai-generation-content`.
+
+```bash
+npm install @umituz/react-native-ai-generation-content
+```
+
+## Basic Usage
+
+### Using the Hook
+
+```tsx
+import { useSketchToImageFeature } from '@umituz/react-native-ai-generation-content';
+import * as ImagePicker from 'react-native-image-picker';
+
+function SketchToImageScreen() {
+  const [sketch, setSketch] = useState<string | null>(null);
+
+  const feature = useSketchToImageFeature({
+    config: {
+      outputStyle: 'realistic',
+      prompt: 'A beautiful landscape',
+      onProcessingStart: () => console.log('Converting sketch...'),
+      onProcessingComplete: (result) => console.log('Complete:', result),
+      onError: (error) => console.error('Error:', error),
+    },
+    onSelectSketch: async () => {
+      const result = await ImagePicker.launchImageLibrary({ mediaType: 'photo' });
+      if (result.assets && result.assets[0].uri) {
+        const base64 = await convertToBase64(result.assets[0].uri);
+        setSketch(base64);
+        return base64;
+      }
+      return null;
+    },
+    onSaveResult: async (imageUrl) => {
+      await saveToGallery(imageUrl);
+    },
+  });
+
+  return (
+    <View>
+      <PhotoUploadCard
+        image={sketch}
+        onSelectImage={feature.selectSketch}
+        title="Upload Your Sketch"
+      />
+
+      <OutputStyleSelector
+        selectedStyle={feature.state.outputStyle}
+        onSelectStyle={feature.setOutputStyle}
+      />
+
+      <PromptInput
+        prompt={feature.state.prompt}
+        onChangePrompt={feature.setPrompt}
+        placeholder="Describe what you drew..."
+      />
+
+      <Button
+        title="Convert to Image"
+        onPress={feature.process}
+        disabled={!feature.isReady || feature.state.isProcessing}
+      />
+
+      {feature.state.isProcessing && (
+        <ActivityIndicator />
+      )}
+
+      {feature.state.result && (
+        <ResultDisplay
+          originalImage={sketch}
+          resultImage={feature.state.result.imageUrl}
+          onSave={() => feature.saveResult()}
+        />
+      )}
+    </View>
+  );
+}
+```
+
+### Using the Unified AI Feature Screen
+
+```tsx
+import { AIFeatureScreen } from '@umituz/react-native-ai-generation-content';
+
+function App() {
+  return (
+    <AIFeatureScreen
+      featureId="sketch-to-image"
+      userId="user-123"
+    />
+  );
+}
+```
+
+## Configuration Options
+
+### Feature Config
+
+```tsx
+interface SketchToImageFeatureConfig {
+  outputStyle?: 'realistic' | 'artistic' | 'anime' | '3d';
+  prompt?: string; // Description of the sketch
+  onProcessingStart?: () => void;
+  onProcessingComplete?: (result: SketchToImageResult) => void;
+  onError?: (error: string) => void;
+}
+```
+
+### Generation Options
+
+```tsx
+interface SketchToImageOptions {
+  sketch: string; // Base64 sketch image
+  outputStyle: 'realistic' | 'artistic' | 'anime' | '3d';
+  prompt?: string; // Optional description
+  addColor?: boolean; // Add color to sketch (default: true)
+  addDetails?: boolean; // Enhance with details (default: true)
+}
+```
+
+## Output Styles
+
+### Realistic
+
+Photorealistic output:
+
+```tsx
+const result = await feature.process({
+  outputStyle: 'realistic',
+  addColor: true,
+  addDetails: true,
+});
+```
+
+### Artistic
+
+Artistic interpretation:
+
+```tsx
+const result = await feature.process({
+  outputStyle: 'artistic',
+});
+```
+
+### Anime
+
+Anime/manga style:
+
+```tsx
+const result = await feature.process({
+  outputStyle: 'anime',
+});
+```
+
+### 3D Render
+
+3D rendered look:
+
+```tsx
+const result = await feature.process({
+  outputStyle: '3d',
+});
+```
+
+## Usage Flow
+
+1. Select **Sketch** - Upload or draw a sketch
+2. Choose **Output Style** - Select the desired output style
+3. Add **Prompt** (optional) - Describe what you drew
+4. Tap **Convert** - Start the conversion
+5. View **Result** - See the generated image
+6. Save or Share - Save or share the result
+
+## Component Examples
+
+### Output Style Selector
+
+```tsx
+import { StylePresetsGrid } from '@umituz/react-native-ai-generation-content';
+
+const styles = [
+  { id: 'realistic', name: 'Realistic', preview: '...' },
+  { id: 'artistic', name: 'Artistic', preview: '...' },
+  { id: 'anime', name: 'Anime', preview: '...' },
+  { id: '3d', name: '3D Render', preview: '...' },
+];
+
+<StylePresetsGrid
+  styles={styles}
+  selectedStyle={selectedStyle}
+  onSelectStyle={setSelectedStyle}
+/>
+```
+
+### Prompt Input
+
+```tsx
+import { TextInput } from 'react-native';
+
+<TextInput
+  placeholder="Describe what you drew..."
+  value={prompt}
+  onChangeText={setPrompt}
+  multiline
+  numberOfLines={3}
+/>
+```
+
+### Before/After Comparison
+
+```tsx
+import { ResultDisplay } from '@umituz/react-native-ai-generation-content';
+
+{feature.state.result && sketch && (
+  <ResultDisplay
+    originalImage={sketch}
+    resultImage={feature.state.result.imageUrl}
+    onSave={() => feature.saveResult()}
+    onShare={() => shareImage(feature.state.result.imageUrl)}
+  />
+)}
+```
+
+## Use Cases
+
+### Concept Art
+
+```tsx
+// Convert rough sketches to detailed concept art
+const result = await feature.process({
+  outputStyle: 'realistic',
+  prompt: 'Futuristic cityscape',
+});
+```
+
+### Illustration
+
+```tsx
+// Turn doodles into illustrations
+const result = await feature.process({
+  outputStyle: 'artistic',
+});
+```
+
+### Storyboarding
+
+```tsx
+// Transform storyboard sketches
+const result = await feature.process({
+  outputStyle: 'realistic',
+  prompt: 'Action scene with characters',
+});
+```
+
+### Design Mockups
+
+```tsx
+// Convert design sketches to realistic mockups
+const result = await feature.process({
+  outputStyle: 'realistic',
+  addDetails: true,
+});
+```
+
+## Best Practices
+
+1. **Clear Sketches**: Use clear, readable sketches
+2. **Descriptive Prompts**: Provide detailed descriptions
+3. **Style Selection**: Match style to your use case
+4. **Multiple Iterations**: Try different styles and prompts
+5. **Sketch Quality**: Better sketches produce better results
+
+## Related Features
+
+- [Text to Image](../text-to-image) - Generate images from text
+- [Image to Image](../image-to-image) - Transform images with AI
+- [Style Transfer](../style-transfer) - Apply artistic styles
+
+## License
+
+MIT