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

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

@@ -0,0 +1,369 @@
+# Image to Video
+
+Convert static images into animated videos using AI.
+
+## Features
+
+- Animate static photos into videos
+- Multiple animation styles (zoom, pan, 3D motion)
+- Support for various durations
+- Natural movement patterns
+- High-quality output
+
+## 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 { useImageToVideoFeature } from '@umituz/react-native-ai-generation-content';
+import * as ImagePicker from 'react-native-image-picker';
+
+function ImageToVideoScreen() {
+  const [image, setImage] = useState<string | null>(null);
+
+  const feature = useImageToVideoFeature({
+    config: {
+      motionType: 'zoom-in',
+      duration: 4,
+      onProcessingStart: () => console.log('Creating video...'),
+      onProcessingComplete: (result) => console.log('Complete:', result),
+      onError: (error) => console.error('Error:', error),
+    },
+    onSelectImage: async () => {
+      const result = await ImagePicker.launchImageLibrary({ mediaType: 'photo' });
+      if (result.assets && result.assets[0].uri) {
+        const base64 = await convertToBase64(result.assets[0].uri);
+        setImage(base64);
+        return base64;
+      }
+      return null;
+    },
+    onSaveVideo: async (videoUrl) => {
+      await saveToGallery(videoUrl);
+    },
+  });
+
+  return (
+    <View>
+      <PhotoUploadCard
+        image={image}
+        onSelectImage={feature.selectImage}
+        title="Select Image to Animate"
+      />
+
+      <MotionTypeSelector
+        selectedType={feature.state.motionType}
+        onSelectType={feature.setMotionType}
+      />
+
+      <DurationSelector
+        selectedDuration={feature.state.duration}
+        onSelectDuration={feature.setDuration}
+      />
+
+      <Button
+        title="Create Video"
+        onPress={feature.process}
+        disabled={!feature.isReady || feature.state.isProcessing}
+      />
+
+      {feature.state.isProcessing && (
+        <View>
+          <Text>Progress: {feature.state.progress}%</Text>
+          <ProgressBar progress={feature.state.progress} />
+        </View>
+      )}
+
+      {feature.state.result && (
+        <Video source={{ uri: feature.state.result.videoUrl }} />
+      )}
+    </View>
+  );
+}
+```
+
+### Using the Unified AI Feature Screen
+
+```tsx
+import { AIFeatureScreen } from '@umituz/react-native-ai-generation-content';
+
+function App() {
+  return (
+    <AIFeatureScreen
+      featureId="image-to-video"
+      userId="user-123"
+    />
+  );
+}
+```
+
+## Configuration Options
+
+### Feature Config
+
+```tsx
+interface ImageToVideoFeatureConfig {
+  motionType?: 'zoom-in' | 'zoom-out' | 'pan-left' | 'pan-right' | '3d';
+  duration?: number; // Video duration in seconds (2-8)
+  onProcessingStart?: () => void;
+  onProcessingComplete?: (result: ImageToVideoResult) => void;
+  onError?: (error: string) => void;
+}
+```
+
+### Generation Options
+
+```tsx
+interface ImageToVideoOptions {
+  motionType: 'zoom-in' | 'zoom-out' | 'pan-left' | 'pan-right' | '3d';
+  duration: number; // Duration in seconds
+  intensity?: number; // Motion intensity 0.0 - 1.0 (default: 0.7)
+  fps?: number; // Frames per second (default: 30)
+}
+```
+
+## Motion Types
+
+### Zoom In
+
+Gradually zoom into the image:
+
+```tsx
+const result = await feature.process({
+  motionType: 'zoom-in',
+  duration: 4,
+  intensity: 0.7,
+});
+```
+
+### Zoom Out
+
+Gradually zoom out from the image:
+
+```tsx
+const result = await feature.process({
+  motionType: 'zoom-out',
+  duration: 5,
+  intensity: 0.6,
+});
+```
+
+### Pan Left
+
+Pan the image to the left:
+
+```tsx
+const result = await feature.process({
+  motionType: 'pan-left',
+  duration: 4,
+  intensity: 0.7,
+});
+```
+
+### Pan Right
+
+Pan the image to the right:
+
+```tsx
+const result = await feature.process({
+  motionType: 'pan-right',
+  duration: 4,
+  intensity: 0.7,
+});
+```
+
+### 3D Motion
+
+Add depth with 3D parallax effect:
+
+```tsx
+const result = await feature.process({
+  motionType: '3d',
+  duration: 5,
+  intensity: 0.8,
+});
+```
+
+## Usage Flow
+
+1. Select **Image** - Choose a static image to animate
+2. Choose **Motion Type** - Select the animation style
+3. Set **Duration** - Choose video length
+4. Tap **Create Video** - Start the animation
+5. View Result - Watch the generated video
+6. Save or Share - Save to gallery or share
+
+## Component Examples
+
+### Motion Type Selector
+
+```tsx
+import { StylePresetsGrid } from '@umituz/react-native-ai-generation-content';
+
+const motionTypes = [
+  { id: 'zoom-in', name: 'Zoom In', preview: '...' },
+  { id: 'zoom-out', name: 'Zoom Out', preview: '...' },
+  { id: 'pan-left', name: 'Pan Left', preview: '...' },
+  { id: 'pan-right', name: 'Pan Right', preview: '...' },
+  { id: '3d', name: '3D Motion', preview: '...' },
+];
+
+<StylePresetsGrid
+  styles={motionTypes}
+  selectedStyle={selectedMotionType}
+  onSelectStyle={setSelectedMotionType}
+/>
+```
+
+### Duration Selector
+
+```tsx
+import { DurationSelector, createDurationOptions } from '@umituz/react-native-ai-generation-content';
+
+const durations = createDurationOptions([2, 3, 4, 5, 6, 7, 8]);
+
+<DurationSelector
+  selectedDuration={duration}
+  onSelectDuration={setDuration}
+  durations={durations}
+/>
+```
+
+### Intensity Slider
+
+```tsx
+import { Slider } from 'react-native';
+
+<Slider
+  minimumValue={0}
+  maximumValue={1}
+  step={0.1}
+  value={intensity}
+  onValueChange={setIntensity}
+/>
+
+<Text>Motion Intensity: {Math.round(intensity * 100)}%</Text>
+```
+
+## Advanced Usage
+
+### Custom Options
+
+```tsx
+const result = await feature.process({
+  motionType: '3d',
+  duration: 6,
+  intensity: 0.8,
+  fps: 30,
+});
+```
+
+### Progress Stages
+
+```tsx
+const { state } = useImageToVideoFeature({ ...config });
+
+// Progress stages:
+// - Analyzing image (0-20%)
+// - Generating motion (20-60%)
+// - Rendering frames (60-90%)
+// - Finalizing video (90-100%)
+```
+
+### Video Preview
+
+```tsx
+import { Video } from 'expo-av';
+import { useRef } from 'react';
+
+const videoRef = useRef<Video>(null);
+
+<Video
+  ref={videoRef}
+  source={{ uri: feature.state.result.videoUrl }}
+  useNativeControls
+  resizeMode="contain"
+  style={{ width: '100%', height: 300 }}
+/>
+```
+
+## Use Cases
+
+### Social Media Content
+
+```tsx
+// Create animated posts
+const result = await feature.process({
+  motionType: 'zoom-in',
+  duration: 4,
+});
+```
+
+### Photo Slideshows
+
+```tsx
+// Animate photos for slideshows
+const result = await feature.process({
+  motionType: 'pan-right',
+  duration: 5,
+});
+```
+
+### Product Showcases
+
+```tsx
+// Create dynamic product videos
+const result = await feature.process({
+  motionType: '3d',
+  duration: 6,
+  intensity: 0.8,
+});
+```
+
+### Storytelling
+
+```tsx
+// Add motion to story images
+const result = await feature.process({
+  motionType: 'zoom-out',
+  duration: 5,
+});
+```
+
+## Best Practices
+
+1. **Image Quality**: Use high-resolution images for best results
+2. **Subject Focus**: Choose motion that highlights the main subject
+3. **Duration**: Shorter durations (3-5s) work well for social media
+4. **Intensity**: Moderate intensity (0.6-0.8) produces natural motion
+5. **Testing**: Try different motion types to find the best fit
+
+## Error Handling
+
+```tsx
+const { state, process } = useImageToVideoFeature({ ...config });
+
+useEffect(() => {
+  if (state.error) {
+    Alert.alert('Generation Failed', state.error);
+  }
+}, [state.error]);
+```
+
+## Related Features
+
+- [Text to Video](../text-to-video) - Generate videos from text
+- [Text to Image](../text-to-image) - Generate images from text
+- [Upscaling](../upscaling) - Increase image resolution before video creation
+
+## License
+
+MIT

package/src/features/inpainting/README.md

@@ -0,0 +1,302 @@
+# Inpainting
+
+Fill in missing or hidden parts of images using AI.
+
+## Features
+
+- Fill in missing areas of images
+- Remove unwanted objects seamlessly
+- Extend image boundaries
+- Smart content-aware fill
+- Natural-looking reconstruction
+
+## 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 { useInpaintingFeature } from '@umituz/react-native-ai-generation-content';
+import * as ImagePicker from 'react-native-image-picker';
+
+function InpaintingScreen() {
+  const [image, setImage] = useState<string | null>(null);
+  const [mask, setMask] = useState<string | null>(null);
+
+  const feature = useInpaintingFeature({
+    config: {
+      fillMethod: 'smart',
+      onProcessingStart: () => console.log('Filling area...'),
+      onProcessingComplete: (result) => console.log('Complete:', result),
+      onError: (error) => console.error('Error:', error),
+    },
+    onSelectImage: async () => {
+      const result = await ImagePicker.launchImageLibrary({ mediaType: 'photo' });
+      if (result.assets && result.assets[0].uri) {
+        const base64 = await convertToBase64(result.assets[0].uri);
+        setImage(base64);
+        return base64;
+      }
+      return null;
+    },
+    onCreateMask: async () => {
+      // User paints over the area to fill
+      const maskImage = await paintMaskOverImage(image);
+      setMask(maskImage);
+      return maskImage;
+    },
+    onSaveResult: async (imageUrl) => {
+      await saveToGallery(imageUrl);
+    },
+  });
+
+  return (
+    <View>
+      <PhotoUploadCard
+        image={image}
+        onSelectImage={feature.selectImage}
+        title="Select Image"
+      />
+
+      <MaskEditor
+        image={image}
+        mask={mask}
+        onMaskCreated={feature.createMask}
+      />
+
+      <FillMethodSelector
+        selectedMethod={feature.state.fillMethod}
+        onSelectMethod={feature.setFillMethod}
+      />
+
+      <Button
+        title="Fill Area"
+        onPress={feature.process}
+        disabled={!feature.isReady || feature.state.isProcessing}
+      />
+
+      {feature.state.isProcessing && (
+        <ActivityIndicator />
+      )}
+
+      {feature.state.result && (
+        <ResultDisplay
+          originalImage={image}
+          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="inpainting"
+      userId="user-123"
+    />
+  );
+}
+```
+
+## Configuration Options
+
+### Feature Config
+
+```tsx
+interface InpaintingFeatureConfig {
+  fillMethod?: 'smart' | 'contextual' | 'pattern';
+  onProcessingStart?: () => void;
+  onProcessingComplete?: (result: InpaintingResult) => void;
+  onError?: (error: string) => void;
+}
+```
+
+### Processing Options
+
+```tsx
+interface InpaintingOptions {
+  mask: string; // Base64 mask of area to fill
+  fillMethod: 'smart' | 'contextual' | 'pattern';
+  preserveContext?: boolean; // Maintain surrounding context (default: true)
+  blendEdges?: boolean; // Blend filled area with surroundings (default: true)
+}
+```
+
+## Fill Methods
+
+### Smart Fill
+
+AI-powered intelligent reconstruction:
+
+```tsx
+const result = await feature.process({
+  mask: maskImage,
+  fillMethod: 'smart',
+  preserveContext: true,
+});
+```
+
+### Contextual Fill
+
+Fill based on surrounding content:
+
+```tsx
+const result = await feature.process({
+  mask: maskImage,
+  fillMethod: 'contextual',
+  blendEdges: true,
+});
+```
+
+### Pattern Fill
+
+Fill with detected patterns:
+
+```tsx
+const result = await feature.process({
+  mask: maskImage,
+  fillMethod: 'pattern',
+});
+```
+
+## Usage Flow
+
+1. Select **Image** - Choose an image with missing or unwanted areas
+2. Create **Mask** - Paint over the area to fill
+3. Choose **Fill Method** - Select the fill strategy
+4. Tap **Fill** - Start the inpainting process
+5. View **Result** - See the filled image
+6. Save or Adjust - Save or make further adjustments
+
+## Component Examples
+
+### Fill Method Selector
+
+```tsx
+import { GridSelector } from '@umituz/react-native-ai-generation-content';
+
+const fillMethods = [
+  { id: 'smart', name: 'Smart Fill', description: 'AI reconstruction' },
+  { id: 'contextual', name: 'Contextual', description: 'Based on surroundings' },
+  { id: 'pattern', name: 'Pattern', description: 'Pattern matching' },
+];
+
+<GridSelector
+  options={fillMethods}
+  selectedOption={selectedMethod}
+  onSelectOption={setSelectedMethod}
+/>
+```
+
+### Mask Editor
+
+```tsx
+import { View, Image } from 'react-native';
+
+function MaskEditor({ image, mask, onMaskCreated }) {
+  return (
+    <View style={{ position: 'relative' }}>
+      <Image source={{ uri: image }} style={{ width: 300, height: 300 }} />
+      {mask && (
+        <Image
+          source={{ uri: mask }}
+          style={{ width: 300, height: 300, position: 'absolute', opacity: 0.5 }}
+        />
+      )}
+      <Button title="Paint Mask" onPress={onMaskCreated} />
+    </View>
+  );
+}
+```
+
+### Before/After Comparison
+
+```tsx
+import { ResultDisplay } from '@umituz/react-native-ai-generation-content';
+
+{feature.state.result && image && (
+  <ResultDisplay
+    originalImage={image}
+    resultImage={feature.state.result.imageUrl}
+    onSave={() => feature.saveResult()}
+    onShare={() => shareImage(feature.state.result.imageUrl)}
+  />
+)}
+```
+
+## Use Cases
+
+### Remove Objects
+
+```tsx
+// Remove unwanted objects
+const result = await feature.process({
+  mask: objectMask,
+  fillMethod: 'smart',
+});
+```
+
+### Repair Damaged Photos
+
+```tsx
+// Fix tears or damaged areas
+const result = await feature.process({
+  mask: damageMask,
+  fillMethod: 'contextual',
+  blendEdges: true,
+});
+```
+
+### Extend Image
+
+```tsx
+// Expand image boundaries
+const result = await feature.process({
+  mask: extensionMask,
+  fillMethod: 'smart',
+});
+```
+
+### Fill Missing Parts
+
+```tsx
+// Complete missing elements
+const result = await feature.process({
+  mask: missingPartMask,
+  fillMethod: 'smart',
+  preserveContext: true,
+});
+```
+
+## Best Practices
+
+1. **Mask Precision**: Paint carefully around the edges
+2. **Fill Method**: Use Smart Fill for most cases
+3. **Context Preservation**: Enable for natural results
+4. **Multiple Tries**: May need multiple attempts for complex areas
+5. **Edge Blending**: Enable for seamless integration
+
+## Related Features
+
+- [Remove Object](../remove-object) - Remove unwanted objects
+- [Remove Background](../remove-background) - Remove backgrounds
+- [Photo Restoration](../photo-restoration) - Restore old photos
+
+## License
+
+MIT