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

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

@@ -0,0 +1,288 @@
+# Replace Background
+
+Replace image backgrounds with new scenes using AI.
+
+## Features
+
+- Remove existing background
+- Replace with custom backgrounds
+- Built-in background templates
+- Upload custom background images
+- Natural edge blending
+
+## 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 { useReplaceBackgroundFeature } from '@umituz/react-native-ai-generation-content';
+import * as ImagePicker from 'react-native-image-picker';
+
+function ReplaceBackgroundScreen() {
+  const [foreground, setForeground] = useState<string | null>(null);
+  const [background, setBackground] = useState<string | null>(null);
+
+  const feature = useReplaceBackgroundFeature({
+    config: {
+      edgeSmoothness: 'medium',
+      onProcessingStart: () => console.log('Replacing background...'),
+      onProcessingComplete: (result) => console.log('Complete:', result),
+      onError: (error) => console.error('Error:', error),
+    },
+    onSelectForeground: async () => {
+      const result = await ImagePicker.launchImageLibrary({ mediaType: 'photo' });
+      if (result.assets && result.assets[0].uri) {
+        const base64 = await convertToBase64(result.assets[0].uri);
+        setForeground(base64);
+        return base64;
+      }
+      return null;
+    },
+    onSelectBackground: async () => {
+      const result = await ImagePicker.launchImageLibrary({ mediaType: 'photo' });
+      if (result.assets && result.assets[0].uri) {
+        const base64 = await convertToBase64(result.assets[0].uri);
+        setBackground(base64);
+        return base64;
+      }
+      return null;
+    },
+    onSaveResult: async (imageUrl) => {
+      await saveToGallery(imageUrl);
+    },
+  });
+
+  return (
+    <View>
+      <PhotoUploadCard
+        image={foreground}
+        onSelectImage={feature.selectForeground}
+        title="Select Foreground Image"
+      />
+
+      <PhotoUploadCard
+        image={background}
+        onSelectImage={feature.selectBackground}
+        title="Select New Background"
+      />
+
+      <Button
+        title="Replace Background"
+        onPress={feature.process}
+        disabled={!feature.isReady || feature.state.isProcessing}
+      />
+
+      {feature.state.isProcessing && (
+        <ActivityIndicator />
+      )}
+
+      {feature.state.result && (
+        <Image source={{ uri: feature.state.result.imageUrl }} />
+      )}
+    </View>
+  );
+}
+```
+
+### Using the Unified AI Feature Screen
+
+```tsx
+import { AIFeatureScreen } from '@umituz/react-native-ai-generation-content';
+
+function App() {
+  return (
+    <AIFeatureScreen
+      featureId="replace-background"
+      userId="user-123"
+    />
+  );
+}
+```
+
+## Configuration Options
+
+### Feature Config
+
+```tsx
+interface ReplaceBackgroundFeatureConfig {
+  edgeSmoothness?: 'low' | 'medium' | 'high';
+  adjustLighting?: boolean; // Match lighting between images
+  onProcessingStart?: () => void;
+  onProcessingComplete?: (result: ReplaceBackgroundResult) => void;
+  onError?: (error: string) => void;
+}
+```
+
+### Processing Options
+
+```tsx
+interface ReplaceBackgroundOptions {
+  edgeSmoothness: 'low' | 'medium' | 'high';
+  adjustLighting?: boolean; // Match foreground and background lighting
+  adjustColors?: boolean; // Color-grade foreground to match background
+  blurBackground?: boolean; // Add blur to background for depth effect
+}
+```
+
+## Usage Flow
+
+1. Select **Foreground** - Choose the main subject image
+2. Select **Background** - Choose new background image
+3. Configure **Options** - Adjust edge smoothness and other settings
+4. Tap **Replace** - Start the replacement process
+5. View **Result** - See the combined image
+6. Save or Share - Save or share the result
+
+## Component Examples
+
+### Background Templates
+
+```tsx
+import { StylePresetsGrid } from '@umituz/react-native-ai-generation-content';
+
+const backgrounds = [
+  { id: 'beach', name: 'Beach', preview: 'https://...' },
+  { id: 'city', name: 'City', preview: 'https://...' },
+  { id: 'nature', name: 'Nature', preview: 'https://...' },
+  { id: 'studio', name: 'Studio', preview: 'https://...' },
+];
+
+<StylePresetsGrid
+  styles={backgrounds}
+  selectedStyle={selectedBackground}
+  onSelectStyle={async (bg) => {
+    const bgImage = await downloadBackground(bg.preview);
+    setBackground(bgImage);
+  }}
+/>
+```
+
+### 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' },
+];
+
+<GridSelector
+  options={smoothnessOptions}
+  selectedOption={smoothness}
+  onSelectOption={setSmoothness}
+/>
+```
+
+### Lighting Toggle
+
+```tsx
+import { Switch } from 'react-native';
+
+<Switch
+  value={adjustLighting}
+  onValueChange={setAdjustLighting}
+/>
+
+<Text>Match Lighting</Text>
+```
+
+## Advanced Usage
+
+### Custom Options
+
+```tsx
+const result = await feature.process({
+  edgeSmoothness: 'medium',
+  adjustLighting: true,
+  adjustColors: true,
+  blurBackground: false,
+});
+```
+
+### Preset Backgrounds
+
+```tsx
+const PRESET_BACKGROUNDS = {
+  beach: 'https://example.com/bg/beach.jpg',
+  city: 'https://example.com/bg/city.jpg',
+  studio: 'https://example.com/bg/studio.jpg',
+  nature: 'https://example.com/bg/nature.jpg',
+};
+
+const result = await feature.process({
+  background: PRESET_BACKGROUNDS.beach,
+  edgeSmoothness: 'medium',
+});
+```
+
+## Use Cases
+
+### Professional Photos
+
+```tsx
+// Replace with professional studio background
+const result = await feature.process({
+  background: studioBackground,
+  adjustLighting: true,
+  adjustColors: true,
+});
+```
+
+### Travel Photos
+
+```tsx
+// Add exotic travel backgrounds
+const result = await feature.process({
+  background: beachBackground,
+  edgeSmoothness: 'high',
+});
+```
+
+### Creative Effects
+
+```tsx
+// Create fantasy backgrounds
+const result = await feature.process({
+  background: fantasyBackground,
+  blurBackground: true,
+});
+```
+
+### Product Photos
+
+```tsx
+// Clean white background for products
+const result = await feature.process({
+  background: whiteBackground,
+  edgeSmoothness: 'low',
+  adjustLighting: true,
+});
+```
+
+## Best Practices
+
+1. **Foreground Quality**: Use high-quality images with clear subjects
+2. **Background Match**: Choose backgrounds with similar perspective
+3. **Edge Smoothness**: Higher values for portraits, lower for products
+4. **Lighting**: Enable lighting adjustment for more natural results
+5. **Colors**: Use color adjustment for better foreground/background harmony
+
+## Related Features
+
+- [Remove Background](../remove-background) - Remove backgrounds
+- [Remove Object](../remove-object) - Remove unwanted objects
+- [Image to Image](../image-to-image) - Transform images with AI
+
+## License
+
+MIT

package/src/features/script-generator/README.md

@@ -0,0 +1,362 @@
+# Script Generator
+
+Generate scripts for videos, podcasts, and content using AI.
+
+## Features
+
+- Generate video scripts
+- Podcast script templates
+- Social media content scripts
+- Customizable script formats
+- Multiple tone and style options
+
+## 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 { useScriptGenerator } from '@umituz/react-native-ai-generation-content';
+
+function ScriptGeneratorScreen() {
+  const [prompt, setPrompt] = useState('');
+
+  const feature = useScriptGenerator({
+    config: {
+      scriptType: 'video',
+      tone: 'casual',
+      duration: 60, // seconds
+      onProcessingStart: () => console.log('Generating script...'),
+      onProcessingComplete: (result) => console.log('Complete:', result),
+      onError: (error) => console.error('Error:', error),
+    },
+  });
+
+  return (
+    <View>
+      <TextInput
+        placeholder="What's your script about?"
+        value={prompt}
+        onChangeText={setPrompt}
+        multiline
+        numberOfLines={4}
+      />
+
+      <ScriptTypeSelector
+        selectedType={feature.state.scriptType}
+        onSelectType={feature.setScriptType}
+      />
+
+      <ToneSelector
+        selectedTone={feature.state.tone}
+        onSelectTone={feature.setTone}
+      />
+
+      <DurationInput
+        value={feature.state.duration}
+        onChange={feature.setDuration}
+      />
+
+      <Button
+        title="Generate Script"
+        onPress={() => feature.generate(prompt)}
+        disabled={!prompt || feature.state.isProcessing}
+      />
+
+      {feature.state.isProcessing && (
+        <ActivityIndicator />
+      )}
+
+      {feature.state.result && (
+        <ScriptDisplay
+          script={feature.state.result.script}
+          onSave={() => saveScript(feature.state.result.script)}
+          onShare={() => shareScript(feature.state.result.script)}
+        />
+      )}
+    </View>
+  );
+}
+```
+
+### Using the Unified AI Feature Screen
+
+```tsx
+import { AIFeatureScreen } from '@umituz/react-native-ai-generation-content';
+
+function App() {
+  return (
+    <AIFeatureScreen
+      featureId="script-generator"
+      userId="user-123"
+    />
+  );
+}
+```
+
+## Configuration Options
+
+### Feature Config
+
+```tsx
+interface ScriptGeneratorFeatureConfig {
+  scriptType?: 'video' | 'podcast' | 'social' | 'presentation';
+  tone?: 'casual' | 'professional' | 'humorous' | 'dramatic';
+  duration?: number; // Target duration in seconds
+  language?: string; // Script language (default: 'en')
+  onProcessingStart?: () => void;
+  onProcessingComplete?: (result: ScriptGeneratorResult) => void;
+  onError?: (error: string) => void;
+}
+```
+
+### Generation Options
+
+```tsx
+interface ScriptGeneratorOptions {
+  scriptType: 'video' | 'podcast' | 'social' | 'presentation';
+  tone: 'casual' | 'professional' | 'humorous' | 'dramatic';
+  duration: number; // Target duration in seconds
+  includeVisuals?: boolean; // Include visual cues (default: true for video)
+  includeNotes?: boolean; // Include production notes (default: false)
+}
+```
+
+## Script Types
+
+### Video Script
+
+Scripts for videos with visual cues:
+
+```tsx
+const result = await feature.generate(prompt, {
+  scriptType: 'video',
+  tone: 'casual',
+  duration: 120,
+  includeVisuals: true,
+});
+```
+
+### Podcast Script
+
+Conversational scripts for podcasts:
+
+```tsx
+const result = await feature.generate(prompt, {
+  scriptType: 'podcast',
+  tone: 'casual',
+  duration: 1800, // 30 minutes
+});
+```
+
+### Social Media Script
+
+Short scripts for social platforms:
+
+```tsx
+const result = await feature.generate(prompt, {
+  scriptType: 'social',
+  tone: 'casual',
+  duration: 60, // 1 minute
+});
+```
+
+### Presentation Script
+
+Professional presentation scripts:
+
+```tsx
+const result = await feature.generate(prompt, {
+  scriptType: 'presentation',
+  tone: 'professional',
+  duration: 600, // 10 minutes
+});
+```
+
+## Tones
+
+### Casual
+
+Conversational and friendly:
+
+```tsx
+const result = await feature.generate(prompt, {
+  tone: 'casual',
+});
+```
+
+### Professional
+
+Formal and business-appropriate:
+
+```tsx
+const result = await feature.generate(prompt, {
+  tone: 'professional',
+});
+```
+
+### Humorous
+
+Funny and entertaining:
+
+```tsx
+const result = await feature.generate(prompt, {
+  tone: 'humorous',
+});
+```
+
+### Dramatic
+
+Emotional and engaging:
+
+```tsx
+const result = await feature.generate(prompt, {
+  tone: 'dramatic',
+});
+```
+
+## Usage Flow
+
+1. Enter **Topic** - Describe what the script is about
+2. Choose **Script Type** - Select the format
+3. Choose **Tone** - Select the tone/style
+4. Set **Duration** - Target length
+5. Tap **Generate** - Create the script
+6. View Result - Read and edit the script
+7. Save or Export - Save or export the script
+
+## Component Examples
+
+### Script Type Selector
+
+```tsx
+import { GridSelector } from '@umituz/react-native-ai-generation-content';
+
+const scriptTypes = [
+  { id: 'video', name: 'Video', description: 'With visual cues' },
+  { id: 'podcast', name: 'Podcast', description: 'Conversational' },
+  { id: 'social', name: 'Social Media', description: 'Short & engaging' },
+  { id: 'presentation', name: 'Presentation', description: 'Professional' },
+];
+
+<GridSelector
+  options={scriptTypes}
+  selectedOption={selectedType}
+  onSelectOption={setSelectedType}
+/>
+```
+
+### Tone Selector
+
+```tsx
+import { GridSelector } from '@umituz/react-native-ai-generation-content';
+
+const tones = [
+  { id: 'casual', name: 'Casual', description: 'Friendly & relaxed' },
+  { id: 'professional', name: 'Professional', description: 'Formal & business' },
+  { id: 'humorous', name: 'Humorous', description: 'Funny & entertaining' },
+  { id: 'dramatic', name: 'Dramatic', description: 'Emotional & engaging' },
+];
+
+<GridSelector
+  options={tones}
+  selectedOption={selectedTone}
+  onSelectOption={setSelectedTone}
+/>
+```
+
+### Duration Input
+
+```tsx
+import { TextInput } from 'react-native';
+
+<TextInput
+  placeholder="Duration (seconds)"
+  value={String(duration)}
+  onChangeText={(value) => setDuration(parseInt(value) || 60)}
+  keyboardType="numeric"
+/>
+```
+
+### Script Display
+
+```tsx
+import { ScrollView, Text } from 'react-native';
+
+<ScrollView style={{ padding: 16 }}>
+  <Text style={{ fontSize: 16, lineHeight: 24 }}>
+    {script}
+  </Text>
+</ScrollView>
+```
+
+## Use Cases
+
+### YouTube Videos
+
+```tsx
+// Generate YouTube video scripts
+const result = await feature.generate('How to cook pasta', {
+  scriptType: 'video',
+  tone: 'casual',
+  duration: 600, // 10 minutes
+});
+```
+
+### Podcast Episodes
+
+```tsx
+// Generate podcast episode scripts
+const result = await feature.generate('The future of AI', {
+  scriptType: 'podcast',
+  tone: 'casual',
+  duration: 3600, // 1 hour
+});
+```
+
+### TikTok/Reels
+
+```tsx
+// Generate short-form content
+const result = await feature.generate('Quick workout tips', {
+  scriptType: 'social',
+  tone: 'energetic',
+  duration: 60,
+});
+```
+
+### Business Presentations
+
+```tsx
+// Generate presentation scripts
+const result = await feature.generate('Q4 business review', {
+  scriptType: 'presentation',
+  tone: 'professional',
+  duration: 1200, // 20 minutes
+});
+```
+
+## Best Practices
+
+1. **Clear Prompts**: Be specific about the topic and key points
+2. **Duration**: Set realistic duration targets
+3. **Tone Matching**: Match tone to your audience and purpose
+4. **Editing**: Always review and edit generated scripts
+5. **Visual Cues**: Use visual cues for video scripts
+
+## Related Features
+
+- [Text to Voice](../text-to-voice) - Convert script to speech
+- [Text to Video](../text-to-video) - Generate video from script
+- [Audio Generation](../audio-generation) - Generate audio content
+
+## License
+
+MIT