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

package/src/features/style-transfer/README.md

@@ -0,0 +1,301 @@
+# Style Transfer
+
+Apply artistic styles to images using AI.
+
+## Features
+
+- Transform photos into artwork
+- Multiple artistic styles (painting, sketch, watercolor, etc.)
+- Customizable style intensity
+- Preserve image content while changing style
+- High-quality artistic 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 { useStyleTransferFeature } from '@umituz/react-native-ai-generation-content';
+import * as ImagePicker from 'react-native-image-picker';
+
+function StyleTransferScreen() {
+  const [image, setImage] = useState<string | null>(null);
+
+  const feature = useStyleTransferFeature({
+    config: {
+      style: 'oil-painting',
+      intensity: 0.8,
+      onProcessingStart: () => console.log('Applying style...'),
+      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;
+    },
+    onSaveResult: async (imageUrl) => {
+      await saveToGallery(imageUrl);
+    },
+  });
+
+  return (
+    <View>
+      <PhotoUploadCard
+        image={image}
+        onSelectImage={feature.selectImage}
+        title="Select Image to Style"
+      />
+
+      <StyleSelector
+        selectedStyle={feature.state.style}
+        onSelectStyle={feature.setStyle}
+      />
+
+      <IntensitySlider
+        value={feature.state.intensity}
+        onChange={feature.setIntensity}
+      />
+
+      <Button
+        title="Apply Style"
+        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="style-transfer"
+      userId="user-123"
+    />
+  );
+}
+```
+
+## Configuration Options
+
+### Feature Config
+
+```tsx
+interface StyleTransferFeatureConfig {
+  style?: 'oil-painting' | 'watercolor' | 'sketch' | 'anime' | 'impressionist';
+  intensity?: number; // 0.0 - 1.0 (default: 0.8)
+  onProcessingStart?: () => void;
+  onProcessingComplete?: (result: StyleTransferResult) => void;
+  onError?: (error: string) => void;
+}
+```
+
+### Processing Options
+
+```tsx
+interface StyleTransferOptions {
+  style: string; // Style ID
+  intensity: number; // How strong the style is (0.0 - 1.0)
+  preserveDetails?: boolean; // Maintain original details (default: true)
+}
+```
+
+## Available Styles
+
+### Oil Painting
+
+Classic oil painting style:
+
+```tsx
+const result = await feature.process({
+  style: 'oil-painting',
+  intensity: 0.8,
+  preserveDetails: true,
+});
+```
+
+### Watercolor
+
+Soft watercolor painting style:
+
+```tsx
+const result = await feature.process({
+  style: 'watercolor',
+  intensity: 0.7,
+});
+```
+
+### Sketch
+
+Pencil sketch style:
+
+```tsx
+const result = await feature.process({
+  style: 'sketch',
+  intensity: 0.9,
+});
+```
+
+### Anime
+
+Anime/manga style:
+
+```tsx
+const result = await feature.process({
+  style: 'anime',
+  intensity: 0.8,
+});
+```
+
+### Impressionist
+
+Impressionist painting style:
+
+```tsx
+const result = await feature.process({
+  style: 'impressionist',
+  intensity: 0.7,
+});
+```
+
+## Usage Flow
+
+1. Select **Image** - Choose an image to transform
+2. Choose **Style** - Select the artistic style
+3. Adjust **Intensity** - Control style strength
+4. Tap **Apply** - Start the style transfer
+5. View Result - See the styled image
+6. Save or Share - Save or share the result
+
+## Component Examples
+
+### Style Selector
+
+```tsx
+import { StylePresetsGrid } from '@umituz/react-native-ai-generation-content';
+
+const styles = [
+  { id: 'oil-painting', name: 'Oil Painting', preview: '...' },
+  { id: 'watercolor', name: 'Watercolor', preview: '...' },
+  { id: 'sketch', name: 'Sketch', preview: '...' },
+  { id: 'anime', name: 'Anime', preview: '...' },
+  { id: 'impressionist', name: 'Impressionist', preview: '...' },
+];
+
+<StylePresetsGrid
+  styles={styles}
+  selectedStyle={selectedStyle}
+  onSelectStyle={setSelectedStyle}
+/>
+```
+
+### Intensity Slider
+
+```tsx
+import { Slider } from 'react-native';
+
+<Slider
+  minimumValue={0}
+  maximumValue={1}
+  step={0.1}
+  value={intensity}
+  onValueChange={setIntensity}
+/>
+
+<Text>Style Intensity: {Math.round(intensity * 100)}%</Text>
+```
+
+### 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
+
+### Art Creation
+
+```tsx
+// Create artwork from photos
+const result = await feature.process({
+  style: 'oil-painting',
+  intensity: 0.9,
+});
+```
+
+### Social Media
+
+```tsx
+// Create stylized content
+const result = await feature.process({
+  style: 'sketch',
+  intensity: 0.8,
+});
+```
+
+### Photo Effects
+
+```tsx
+// Add artistic effects to photos
+const result = await feature.process({
+  style: 'watercolor',
+  intensity: 0.7,
+});
+```
+
+## Best Practices
+
+1. **Style Selection**: Match style to image content for best results
+2. **Intensity**: Start with 0.7-0.8 for balanced results
+3. **Image Quality**: High-quality images produce better artwork
+4. **Preserve Details**: Enable for photos with important details
+5. **Experiment**: Try different styles to find the best match
+
+## Related Features
+
+- [Anime Selfie](../anime-selfie) - Convert photos to anime style
+- [Image to Image](../image-to-image) - Transform images with AI
+- [Text to Image](../text-to-image) - Generate artwork from text
+
+## License
+
+MIT

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

@@ -0,0 +1,228 @@
+# Text to Image
+
+Generate images from text prompts using AI.
+
+## Features
+
+- Generate images from natural language descriptions
+- Support for multiple aspect ratios and sizes
+- Style presets for different artistic effects
+- Multiple image generation in one request
+- Progress tracking during 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 { useTextToImageFeature } from '@umituz/react-native-ai-generation-content';
+
+function TextToImageScreen() {
+  const feature = useTextToImageFeature({
+    config: {
+      model: 'imagen-3',
+      onPromptChange: (prompt) => console.log('Prompt changed:', prompt),
+      onProcessingStart: () => console.log('Starting generation...'),
+      onProcessingComplete: (result) => console.log('Generation complete:', result),
+      onError: (error) => console.error('Error:', error),
+    },
+    userId: 'user-123',
+  });
+
+  return (
+    <View>
+      <TextInput
+        placeholder="Describe the image you want to create..."
+        onChangeText={feature.setPrompt}
+        value={feature.state.prompt}
+      />
+
+      <Button
+        title="Generate Image"
+        onPress={() => feature.generate()}
+        disabled={!feature.isReady}
+      />
+
+      {feature.state.isProcessing && (
+        <Text>Progress: {feature.state.progress}%</Text>
+      )}
+
+      {feature.state.imageUrl && (
+        <Image source={{ uri: feature.state.imageUrl }} />
+      )}
+
+      {feature.state.error && (
+        <Text>Error: {feature.state.error}</Text>
+      )}
+    </View>
+  );
+}
+```
+
+### Using the Unified AI Feature Screen
+
+```tsx
+import { AIFeatureScreen } from '@umituz/react-native-ai-generation-content';
+
+function App() {
+  return (
+    <AIFeatureScreen
+      featureId="text-to-image"
+      userId="user-123"
+    />
+  );
+}
+```
+
+## Configuration Options
+
+### Feature Config
+
+```tsx
+interface TextToImageFeatureConfig {
+  model?: string; // AI model to use (default: 'imagen-3')
+  onPromptChange?: (prompt: string) => void;
+  onProcessingStart?: () => void;
+  onProcessingComplete?: (result: TextToImageResult) => void;
+  onError?: (error: string) => void;
+  buildInput?: (prompt: string, options: TextToImageOptions) => any;
+  extractResult?: (response: any) => TextToImageResult;
+}
+```
+
+### Generation Options
+
+```tsx
+interface TextToImageOptions {
+  aspectRatio?: '1:1' | '16:9' | '9:16' | '4:3' | '3:4';
+  numberOfImages?: number; // 1-4
+  style?: 'realistic' | 'artistic' | 'anime' | '3d' | 'painting';
+  negativePrompt?: string;
+}
+```
+
+## Advanced Usage
+
+### Custom Style Selector
+
+```tsx
+import { StyleSelector } from '@umituz/react-native-ai-generation-content';
+
+const styles = [
+  { id: 'realistic', name: 'Realistic', preview: '...' },
+  { id: 'artistic', name: 'Artistic', preview: '...' },
+  { id: 'anime', name: 'Anime', preview: '...' },
+];
+
+function MyScreen() {
+  const [selectedStyle, setSelectedStyle] = useState('realistic');
+
+  return (
+    <StyleSelector
+      styles={styles}
+      selectedStyle={selectedStyle}
+      onSelectStyle={setSelectedStyle}
+    />
+  );
+}
+```
+
+### Aspect Ratio Selection
+
+```tsx
+import { AspectRatioSelector } from '@umituz/react-native-ai-generation-content';
+
+function MyScreen() {
+  const [aspectRatio, setAspectRatio] = useState('1:1');
+
+  return (
+    <AspectRatioSelector
+      selectedAspectRatio={aspectRatio}
+      onSelectAspectRatio={setAspectRatio}
+    />
+  );
+}
+```
+
+## Examples
+
+### Basic Image Generation
+
+```tsx
+const result = await feature.generate({
+  aspectRatio: '16:9',
+  numberOfImages: 2,
+});
+```
+
+### With Style Preset
+
+```tsx
+const result = await feature.generate({
+  style: 'artistic',
+  negativePrompt: 'blurry, low quality',
+});
+```
+
+### Multiple Images
+
+```tsx
+const result = await feature.generate({
+  numberOfImages: 4,
+});
+
+// Access all generated images
+result.imageUrls.forEach(url => {
+  console.log('Generated image:', url);
+});
+```
+
+## Example Prompts
+
+```tsx
+const examplePrompts = [
+  'A beautiful sunset over mountains with vibrant colors',
+  'Futuristic cityscape at night with neon lights',
+  'Enchanted forest with magical glowing mushrooms',
+  'Cozy coffee shop interior on a rainy day',
+  'Dragon flying over snow-capped mountain peaks',
+];
+```
+
+## Error Handling
+
+```tsx
+const { state, generate } = useTextToImageFeature({ ...config });
+
+useEffect(() => {
+  if (state.error) {
+    Alert.alert('Generation Failed', state.error);
+  }
+}, [state.error]);
+```
+
+## Best Practices
+
+1. **Prompt Quality**: Use detailed, descriptive prompts for better results
+2. **Aspect Ratio**: Choose the right aspect ratio for your use case
+3. **Batch Generation**: Generate multiple images to get more options
+4. **Negative Prompts**: Use negative prompts to avoid unwanted elements
+5. **Error Handling**: Always handle errors gracefully in production
+
+## Related Features
+
+- [Text to Video](../text-to-video) - Generate videos from text
+- [Image to Image](../image-to-image) - Transform images with AI
+- [Style Transfer](../style-transfer) - Apply artistic styles to images
+
+## License
+
+MIT