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

package/src/features/remove-background/README.md

@@ -0,0 +1,292 @@
+# Remove Background
+
+Remove backgrounds from images using AI with precision.
+
+## Features
+
+- Automatic background detection and removal
+- Keep main subject while removing background
+- Support for complex subjects (hair, fur, transparent objects)
+- Fine-tune edges for professional results
+- Export as transparent PNG
+
+## 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 { useRemoveBackgroundFeature } from '@umituz/react-native-ai-generation-content';
+import * as ImagePicker from 'react-native-image-picker';
+
+function RemoveBackgroundScreen() {
+  const [image, setImage] = useState<string | null>(null);
+
+  const feature = useRemoveBackgroundFeature({
+    config: {
+      edgeSmoothness: 'medium',
+      onProcessingStart: () => console.log('Removing background...'),
+      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;
+    },
+    onSaveImage: async (imageUrl) => {
+      await saveToGallery(imageUrl);
+    },
+  });
+
+  return (
+    <View>
+      <PhotoUploadCard
+        image={image}
+        onSelectImage={feature.selectImage}
+        title="Select Image to Remove Background"
+      />
+
+      <Button
+        title="Remove Background"
+        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()}
+          showTransparentBackground
+        />
+      )}
+    </View>
+  );
+}
+```
+
+### Using the Unified AI Feature Screen
+
+```tsx
+import { AIFeatureScreen } from '@umituz/react-native-ai-generation-content';
+
+function App() {
+  return (
+    <AIFeatureScreen
+      featureId="remove-background"
+      userId="user-123"
+    />
+  );
+}
+```
+
+## Configuration Options
+
+### Feature Config
+
+```tsx
+interface RemoveBackgroundFeatureConfig {
+  edgeSmoothness?: 'low' | 'medium' | 'high';
+  returnMask?: boolean; // Return the mask along with result
+  onProcessingStart?: () => void;
+  onProcessingComplete?: (result: RemoveBackgroundResult) => void;
+  onError?: (error: string) => void;
+}
+```
+
+### Processing Options
+
+```tsx
+interface RemoveBackgroundOptions {
+  edgeSmoothness: 'low' | 'medium' | 'high';
+  featherEdges?: boolean; // Soften edges for natural look
+  preserveHair?: boolean; // Better hair detection (default: true)
+  backgroundColor?: string; // Add new background color
+}
+```
+
+## Usage Flow
+
+1. Select **Image** - Choose an image with background to remove
+2. Configure **Options** - Adjust edge smoothness and other settings
+3. Tap **Remove Background** - Start the removal process
+4. View **Result** - See the image with transparent background
+5. Save or Edit - Save as PNG or add new background
+
+## Component Examples
+
+### Edge Smoothness Selector
+
+```tsx
+import { GridSelector } from '@umituz/react-native-ai-generation-content';
+
+const smoothnessOptions = [
+  { id: 'low', name: 'Sharp', description: 'Precise edges' },
+  { id: 'medium', name: 'Balanced', description: 'Natural edges' },
+  { id: 'high', name: 'Smooth', description: 'Soft edges' },
+];
+
+function MyScreen() {
+  const [smoothness, setSmoothness] = useState('medium');
+
+  return (
+    <GridSelector
+      options={smoothnessOptions}
+      selectedOption={smoothness}
+      onSelectOption={setSmoothness}
+    />
+  );
+}
+```
+
+### Background Preview
+
+```tsx
+import { View, Image } from 'react-native';
+
+const previewBackgrounds = [
+  { color: '#FFFFFF', name: 'White' },
+  { color: '#000000', name: 'Black' },
+  { color: '#F0F0F0', name: 'Gray' },
+  { color: 'transparent', name: 'Transparent' },
+];
+
+function BackgroundPreview({ imageUrl }) {
+  const [background, setBackground] = useState('transparent');
+
+  return (
+    <View style={{ backgroundColor: background }}>
+      <Image
+        source={{ uri: imageUrl }}
+        style={{ width: 300, height: 300 }}
+      />
+    </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)}
+  />
+)}
+```
+
+## Advanced Usage
+
+### Custom Edge Smoothness
+
+```tsx
+const result = await feature.process({
+  edgeSmoothness: 'high',
+  featherEdges: true,
+  preserveHair: true,
+});
+```
+
+### Add New Background
+
+```tsx
+// After removing background, add a new one
+const result = await feature.process({
+  edgeSmoothness: 'medium',
+  backgroundColor: '#FF5733', // Orange background
+});
+```
+
+### Export with Mask
+
+```tsx
+const result = await feature.process({
+  edgeSmoothness: 'medium',
+  returnMask: true,
+});
+
+// result.maskUrl contains the segmentation mask
+```
+
+## Use Cases
+
+### Product Photos
+
+```tsx
+// Remove background for e-commerce product photos
+const result = await feature.process({
+  edgeSmoothness: 'high',
+  preserveHair: false,
+});
+```
+
+### Profile Pictures
+
+```tsx
+// Create clean profile pictures
+const result = await feature.process({
+  edgeSmoothness: 'medium',
+  featherEdges: true,
+});
+```
+
+### Graphic Design
+
+```tsx
+// Extract subjects for design work
+const result = await feature.process({
+  edgeSmoothness: 'low',
+  returnMask: true,
+});
+```
+
+## Best Practices
+
+1. **Image Quality**: Use high-resolution images for best results
+2. **Subject Separation**: Ensure subject is clearly separated from background
+3. **Edge Smoothness**: Adjust based on subject type (high for hair, low for objects)
+4. **Hair/Fur**: Enable hair preservation for better results
+5. **Lighting**: Even lighting produces better edge detection
+
+## Error Handling
+
+```tsx
+const { state, process } = useRemoveBackgroundFeature({ ...config });
+
+useEffect(() => {
+  if (state.error) {
+    Alert.alert('Removal Failed', state.error);
+  }
+}, [state.error]);
+```
+
+## Related Features
+
+- [Replace Background](../replace-background) - Replace with new background
+- [Remove Object](../remove-object) - Remove unwanted objects
+- [Image to Image](../image-to-image) - Transform images with AI
+
+## License
+
+MIT

package/src/features/remove-object/README.md

@@ -0,0 +1,352 @@
+# Remove Object
+
+Remove unwanted objects from images using AI.
+
+## Features
+
+- Remove any unwanted object from photos
+- Automatic background reconstruction
+- Smart fill to maintain image quality
+- Support for multiple objects
+- Natural-looking results
+
+## 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 { useRemoveObjectFeature } from '@umituz/react-native-ai-generation-content';
+import * as ImagePicker from 'react-native-image-picker';
+
+function RemoveObjectScreen() {
+  const [image, setImage] = useState<string | null>(null);
+  const [mask, setMask] = useState<string | null>(null);
+
+  const feature = useRemoveObjectFeature({
+    config: {
+      onProcessingStart: () => console.log('Removing object...'),
+      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 object to remove
+      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 with Object to Remove"
+      />
+
+      <MaskEditor
+        image={image}
+        mask={mask}
+        onMaskCreated={feature.createMask}
+      />
+
+      <Button
+        title="Remove Object"
+        onPress={feature.process}
+        disabled={!feature.isReady || feature.state.isProcessing}
+      />
+
+      {feature.state.isProcessing && (
+        <View>
+          <Text>Removing object...</Text>
+          <ProgressBar progress={feature.state.progress} />
+        </View>
+      )}
+
+      {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="remove-object"
+      userId="user-123"
+    />
+  );
+}
+```
+
+## Configuration Options
+
+### Feature Config
+
+```tsx
+interface RemoveObjectFeatureConfig {
+  fillMethod?: 'smart' | 'blur' | 'color'; // How to fill the removed area
+  onProcessingStart?: () => void;
+  onProcessingComplete?: (result: RemoveObjectResult) => void;
+  onError?: (error: string) => void;
+}
+```
+
+### Processing Options
+
+```tsx
+interface RemoveObjectOptions {
+  mask: string; // Base64 mask indicating the object to remove
+  fillMethod: 'smart' | 'blur' | 'color';
+  featherEdges?: boolean; // Soften edges for natural look (default: true)
+  preserveContext?: boolean; // Maintain surrounding context (default: true)
+}
+```
+
+## Fill Methods
+
+### Smart Fill
+
+AI-powered intelligent reconstruction:
+
+```tsx
+const result = await feature.process({
+  mask: maskImage,
+  fillMethod: 'smart',
+  preserveContext: true,
+});
+```
+
+### Blur Fill
+
+Blur and blend surrounding area:
+
+```tsx
+const result = await feature.process({
+  mask: maskImage,
+  fillMethod: 'blur',
+  featherEdges: true,
+});
+```
+
+### Color Fill
+
+Fill with average surrounding color:
+
+```tsx
+const result = await feature.process({
+  mask: maskImage,
+  fillMethod: 'color',
+  featherEdges: true,
+});
+```
+
+## Usage Flow
+
+1. Select **Image** - Choose an image with unwanted objects
+2. Create **Mask** - Paint over the objects to remove
+3. Choose **Fill Method** - Select how to fill the removed area
+4. Tap **Remove** - Start the removal process
+5. View Result - See the cleaned image
+6. Save or Edit - 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: 'blur', name: 'Blur', description: 'Blurred fill' },
+  { id: 'color', name: 'Color', description: 'Solid color fill' },
+];
+
+<GridSelector
+  options={fillMethods}
+  selectedOption={selectedMethod}
+  onSelectOption={setSelectedMethod}
+/>
+```
+
+### Mask Editor
+
+```tsx
+import { View, Image } from 'react-native';
+import { GestureHandlerRootView, GestureDetector } from 'react-native-gesture-handler';
+
+function MaskEditor({ image, mask, onMaskCreated }) {
+  const [isDrawing, setIsDrawing] = useState(false);
+
+  const handleDraw = (gestureEvent) => {
+    // Implement drawing logic
+    // Update mask as user draws
+  };
+
+  return (
+    <GestureDetector onGestureEvent={handleDraw}>
+      <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' }}
+          />
+        )}
+      </View>
+    </GestureDetector>
+  );
+}
+```
+
+### 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 Photobombers
+
+```tsx
+// Remove unwanted people from photos
+const result = await feature.process({
+  mask: photobomberMask,
+  fillMethod: 'smart',
+});
+```
+
+### Clean Up Backgrounds
+
+```tsx
+// Remove distracting elements
+const result = await feature.process({
+  mask: objectMask,
+  fillMethod: 'smart',
+  preserveContext: true,
+});
+```
+
+### Remove Text & Watermarks
+
+```tsx
+// Remove unwanted text or logos
+const result = await feature.process({
+  mask: textMask,
+  fillMethod: 'blur',
+  featherEdges: true,
+});
+```
+
+### Remove Objects from Nature
+
+```tsx
+// Remove trash, signs, etc. from nature photos
+const result = await feature.process({
+  mask: objectMask,
+  fillMethod: 'smart',
+});
+```
+
+## Best Practices
+
+1. **Mask Precision**: Paint carefully over the object edges
+2. **Fill Method**: Use Smart Fill for most natural results
+4. **Simple Backgrounds**: Easier removal from simple backgrounds
+5. **Context Preservation**: Enable for objects near important elements
+6. **Multiple Passes**: For difficult objects, try multiple approaches
+
+## Advanced Usage
+
+### Multiple Objects
+
+```tsx
+// Create mask covering all objects to remove
+const combinedMask = combineMasks([mask1, mask2, mask3]);
+const result = await feature.process({
+  mask: combinedMask,
+  fillMethod: 'smart',
+});
+```
+
+### Iterative Refinement
+
+```tsx
+// Remove object, then adjust if needed
+let result = await feature.process({
+  mask: initialMask,
+  fillMethod: 'smart',
+});
+
+if (!result.success || needsRefinement) {
+  const refinedMask = refineMask(initialMask);
+  result = await feature.process({
+    mask: refinedMask,
+    fillMethod: 'smart',
+  });
+}
+```
+
+## Error Handling
+
+```tsx
+const { state, process } = useRemoveObjectFeature({ ...config });
+
+useEffect(() => {
+  if (state.error) {
+    Alert.alert('Removal Failed', state.error);
+  }
+}, [state.error]);
+```
+
+## Related Features
+
+- [Remove Background](../remove-background) - Remove entire backgrounds
+- [Inpainting](../inpainting) - Fill in missing parts of images
+- [Replace Background](../replace-background) - Replace with new background
+
+## License
+
+MIT