@umituz/react-native-ai-generation-content 1.26.2 → 1.26.4

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

@@ -1,408 +0,0 @@
-# Meme Generator Feature
-
-Create memes from images with AI-generated text and styling.
-
-## 📍 Import Path
-
-```typescript
-import { useMemeGeneratorFeature } from '@umituz/react-native-ai-generation-content';
-```
-
-**Location**: `src/features/meme-generator/`
-
-## 🎯 Feature Purpose
-
-Generate memes from images with customizable text, templates, and styling. Supports classic top/bottom text format, modern styling, minimal design, and bold impact templates with font and color customization.
-
----
-
-## 📋 Usage Strategy
-
-### When to Use This Feature
-
-✅ **Use Cases:**
-- Creating humorous memes
-- Generating shareable social media content
-- Creating marketing memes
-- Making reaction images
-- Personalized content creation
-
-❌ **When NOT to Use:**
-- Complex image editing (use image editing software)
-- Graphic design work (use design tools)
-- Text-to-image generation (use Text to Image)
-- Adding artistic effects (use Style Transfer)
-
-### Implementation Strategy
-
-1. **Select image** for meme background
-2. **Choose template** (classic, modern, minimal, bold)
-3. **Add text** (top and/or bottom)
-4. **Customize style** (font, size, colors)
-5. **Generate meme** with progress tracking
-6. **Preview result** and offer regeneration
-7. **Save or share** final meme
-
----
-
-## ⚠️ Critical Rules (MUST FOLLOW)
-
-### 1. Image Requirements
-- **MUST** provide ONE image for meme
-- **MUST** use clear, appropriate images
-- **MUST** have visible content
-- **MUST NOT** exceed file size limits (10MB max)
-- **MUST** respect copyright and usage rights
-
-### 2. Configuration
-- **MUST** provide valid `userId` for tracking
-- **MUST** specify `template` (classic, modern, minimal, bold)
-- **MUST** implement `onError` callback
-- **MUST** implement `onSelectImage` callback
-- **MUST** provide text input fields
-
-### 3. State Management
-- **MUST** check `isReady` before enabling generate button
-- **MUST** display progress during generation
-- **MUST** handle long processing times
-- **MUST** display `error` state with clear messages
-- **MUST** implement proper cleanup on unmount
-
-### 4. Performance
-- **MUST** implement image compression before upload
-- **MUST** show progress indicator for processing
-- **MUST** cache results locally
-- **MUST** allow users to cancel processing
-- **MUST NOT** generate multiple memes simultaneously
-
-### 5. Content Quality
-- **MUST** provide text preview
-- **MUST** allow font and color customization
-- **MUST** handle various text lengths
-- **MUST** ensure text readability
-- **MUST** offer template switching
-
----
-
-## 🚫 Prohibitions (MUST AVOID)
-
-### Strictly Forbidden
-
-❌ **NEVER** do the following:
-
-1. **No Missing Images**
-   - Always validate image is selected
-   - Never call process() without image
-
-2. **No Auto-Processing**
-   - Never start generation without user action
-   - Always require explicit "Create" button press
-   - Show preview before processing
-
-3. **No Hardcoded Credentials**
-   - Never store API keys in component files
-   - Use environment variables or secure storage
-
-4. **No Unhandled Errors**
-   - Never ignore generation failures
-   - Always explain what went wrong
-   - Provide retry or alternative options
-
-5. **No Memory Leaks**
-   - Never store both original and meme simultaneously
-   - Clean up temporary images
-   - Implement proper image disposal
-
-6. **No Blocked UI**
-   - Never block main thread with image processing
-   - Always show progress indicator
-   - Allow cancellation
-
-7. **No Offensive Content**
-   - Never generate hate speech or offensive content
-   - Implement content moderation
-   - Provide content guidelines
-
----
-
-## 🤖 AI Agent Directions
-
-### For AI Code Generation Tools
-
-When using this feature with AI code generation tools, follow these guidelines:
-
-#### Prompt Template for AI Agents
-
-```
-You are implementing a meme generator feature using @umituz/react-native-ai-generation-content.
-
-REQUIREMENTS:
-1. Import from: @umituz/react-native-ai-generation-content
-2. Use the useMemeGeneratorFeature hook
-3. Select meme template (classic, modern, minimal, bold)
-4. Implement image selection UI
-5. Add text input fields (top and bottom)
-6. Customize style (font, size, colors)
-7. Validate image and text before generation
-8. Show result preview
-9. Handle long processing times with progress
-10. Implement proper error handling
-11. Implement cleanup on unmount
-
-CRITICAL RULES:
-- MUST validate image and text before calling generate()
-- MUST show result preview with quality check
-- MUST handle template selection
-- MUST handle text input (top and bottom)
-- MUST implement debouncing (300ms)
-- MUST allow regeneration with different settings
-
-CONFIGURATION:
-- Provide valid userId (string)
-- Set template: 'classic' | 'modern' | 'minimal' | 'bold'
-- Set topText: string (optional)
-- Set bottomText: string (optional)
-- Set fontSize: number (font size)
-- Set textColor: string (text color)
-- Set strokeColor: string (text outline color)
-- Implement onSelectImage callback
-- Implement onSaveResult callback
-- Configure callbacks: onProcessingStart, onProcessingComplete, onError
-
-MEME TEMPLATES:
-- classic: Top/bottom text format
-- modern: Contemporary styling
-- minimal: Clean, simple design
-- bold: Big, impactful text
-
-OPTIONS:
-- fontSize: Adjust text size
-- textColor: Text color
-- strokeColor: Text outline color
-- font: Font family selection
-
-STRICTLY FORBIDDEN:
-- No missing image validation
-- No auto-processing without user action
-- No hardcoded API keys
-- No unhandled errors
-- No memory leaks
-- No blocking UI
-- No offensive content generation
-
-QUALITY CHECKLIST:
-- [ ] Image selection implemented
-- [ ] Template selector added
-- [ ] Text inputs included (top/bottom)
-- [ ] Style customization (font, colors)
-- [ ] Validation before generate()
-- [ ] Result preview display
-- [ ] Progress indicator during processing
-- [ ] Error display with retry option
-- [ ] Download/share functionality
-- [ ] Template switching option
-```
-
-#### AI Implementation Checklist
-
-Use this checklist when generating code:
-
-- [ ] Feature imported from correct path
-- [ ] Image selection implemented
-- [ ] Template selector added
-- [ ] Text inputs implemented (top/bottom)
-- [ ] Style customization added
-- [ ] Validation before generate()
-- [ ] Result preview display
-- [ ] Progress indicator during processing
-- [ ] Error display with user-friendly message
-- [ ] Download/share buttons
-- [ ] Template switching option
-- [ ] Cleanup on unmount
-- [ ] Original image preserved
-
----
-
-## 🛠️ Configuration Strategy
-
-### Essential Configuration
-
-```typescript
-// Required fields
-{
-  userId: string
-  template: 'classic' | 'modern' | 'minimal' | 'bold'
-  onSelectImage: () => Promise<string | null>
-}
-
-// Optional callbacks
-{
-  onProcessingStart?: () => void
-  onProcessingComplete?: (result) => void
-  onError?: (error: string) => void
-}
-```
-
-### Recommended Settings
-
-1. **Meme Templates**
-   - Classic: Traditional top/bottom text format
-   - Modern: Contemporary styling with flexible placement
-   - Minimal: Clean, simple design
-   - Bold: Big, impactful text
-
-2. **Text Options**
-   - Top text: Primary message
-   - Bottom text: Secondary message or punchline
-   - Keep text short and punchy
-
-3. **Style Customization**
-   - Font size: Adjust based on image size
-   - Text color: Ensure good contrast
-   - Stroke color: Add outline for readability
-
-4. **Image Quality**
-   - Minimum: 512x512 resolution
-   - Recommended: 1024x1024 or higher
-   - Format: JPEG or PNG
-   - Max size: 10MB
-
----
-
-## 📊 State Management
-
-### Feature States
-
-**isReady**: boolean
-- Image selected and text provided (optional)
-- Check before enabling generate button
-
-**isProcessing**: boolean
-- Meme generation in progress
-- Show loading/progress indicator
-- Disable generate button
-
-**progress**: number (0-100)
-- Generation progress percentage
-- Update progress bar
-
-**error**: string | null
-- Error message if generation failed
-- Display to user with clear message
-
-**result**: {
-  imageUrl: string
-  originalImageUrl?: string
-  template?: string
-  topText?: string
-  bottomText?: string
-  metadata?: any
-}
-
----
-
-## 🎨 Best Practices
-
-### Meme Creation
-
-1. **Text Quality**
-   - Keep text short and punchy
-   - Ensure good readability
-   - Match text to image content
-
-2. **Template Selection**
-   - Classic: Traditional memes
-   - Modern: Contemporary content
-   - Minimal: Subtle messages
-   - Bold: Impactful statements
-
-3. **Style Customization**
-   - Ensure text contrasts well
-   - Adjust font size appropriately
-   - Use stroke for readability
-
-### User Experience
-
-1. **Template Preview**
-   - Show examples of each template
-   - Preview before generating
-   - Explain template characteristics
-
-2. **Text Input**
-   - Provide clear input fields
-   - Show character limits
-   - Suggest text examples
-
----
-
-## 🐛 Common Pitfalls
-
-### Readability Issues
-
-❌ **Problem**: Text is hard to read
-✅ **Solution**: Adjust font size, add stroke, improve contrast
-
-### Template Issues
-
-❌ **Problem**: Wrong template for content
-✅ **Solution**: Try different template, adjust text placement
-
-### Content Issues
-
-❌ **Problem**: Text doesn't match image
-✅ **Solution**: Ensure text relevance to image content
-
----
-
-## 📦 Related Components
-
-Use these components from the library:
-
-- **PhotoUploadCard**: Upload image interface
-- **MemeTemplateSelector**: Choose meme template
-- **TextInputFields**: Top/bottom text input
-- **ColorPicker**: Select text and stroke colors
-- **ResultDisplay**: Show generated meme
-- **ProgressBar**: Progress display
-
-Located at: `src/presentation/components/`
-
----
-
-## 🔄 Migration Strategy
-
-If migrating from previous implementation:
-
-1. **Update imports** to new path
-2. **Add template selector**
-3. **Implement text input fields**
-4. **Add style customization options**
-5. **Update state handling** for new structure
-6. **Test all meme templates**
-
----
-
-## 📚 Additional Resources
-
-- Main documentation: `/docs/`
-- API reference: `/docs/api/`
-- Examples: `/docs/examples/basic/meme-generator/`
-- Architecture: `/ARCHITECTURE.md`
-
----
-
-**Last Updated**: 2025-01-08
-**Version**: 2.0.0 (Strategy-based Documentation)
-
----
-
-## 📝 Changelog
-
-### v2.0.0 - 2025-01-08
-- **BREAKING**: Documentation format changed to strategy-based
-- Removed extensive code examples
-- Added rules, prohibitions, and AI agent directions
-- Focus on best practices and implementation guidance
-
-### v1.0.0 - Initial Release
-- Initial feature documentation

package/src/features/meme-generator/index.ts

@@ -1,3 +0,0 @@
-export * from "./presentation/screens";
-export * from "./presentation/components";
-export * from "./infrastructure/services/MemeGenerationService";

package/src/features/meme-generator/infrastructure/services/MemeGenerationService.ts

@@ -1,87 +0,0 @@
-import { providerRegistry } from "../../../../infrastructure/services";
-
-
-export interface MemeGenerationParams {
-  prompt: string;
-  styleId?: string;
-}
-
-export class MemeGenerationService {
-  /**
-   * Enhance a simple user prompt into a rich image generation prompt
-   * @param prompt - The user's meme idea
-   * @param modelId - REQUIRED: Text-to-text model ID from app config
-   */
-  async enhancePrompt(prompt: string, modelId: string): Promise<string> {
-    try {
-      const provider = providerRegistry.getActiveProvider();
-      if (!provider) {
-        throw new Error("AI provider not available");
-      }
-
-      if (!modelId) {
-        throw new Error("modelId is required for enhancePrompt. Please provide model from app config.");
-      }
-
-      const systemPrompt = `You are an AI art director. Take the user's simple meme idea and transform it into a visually rich, detailed, and funny image generation prompt. Your response should be only the new prompt, no explanations. Idea: "${prompt}"`;
-
-      const result = await provider.run<{ text?: string, data?: { text: string } }>(
-        modelId,
-        { prompt: systemPrompt }
-      );
-
-      // Handle different provider response formats
-      const text = result.text || result.data?.text || prompt;
-      return text;
-    } catch (error) {
-      if (__DEV__) {
-         
-        console.error("[MemeGenerationService] Enhance prompt error:", error);
-      }
-      return prompt;
-    }
-  }
-
-  /**
-   * Generate a meme image
-   * @param prompt - The final prompt to use (should already be enhanced if desired)
-   * @param modelId - REQUIRED: Image generation model ID from app config
-   */
-  async generateMeme(prompt: string, modelId: string): Promise<string> {
-    try {
-      const provider = providerRegistry.getActiveProvider();
-      if (!provider) {
-        throw new Error("AI provider not available");
-      }
-
-      if (!modelId) {
-        throw new Error("modelId is required for generateMeme. Please provide model from app config.");
-      }
-
-      const finalPrompt = `High-quality, funny meme: ${prompt}. Cinematic, vibrant, clean subject, NO TEXT in image.`;
-
-      const result = await provider.run<{ images: { url: string }[] }>(
-        modelId,
-        {
-          prompt: finalPrompt,
-          image_size: "square",
-          num_inference_steps: 4
-        }
-      );
-
-      if (result.images && result.images.length > 0) {
-        return result.images[0].url;
-      }
-
-      throw new Error("No image generated");
-    } catch (error) {
-      if (__DEV__) {
-         
-        console.error("[MemeGenerationService] Generate meme error:", error);
-      }
-      throw error;
-    }
-  }
-}
-
-export const memeGenerationService = new MemeGenerationService();

package/src/features/meme-generator/presentation/components/MemeGeneratorFeature.tsx

@@ -1,180 +0,0 @@
-/**
- * MemeGeneratorFeature Component
- *
- * Unified Text-to-Image feature component for Meme Generation.
- * Integrates PromptInput, StyleSelector, and Generation logic using useTextToImageFeature.
- */
-
-import React, { useMemo, useCallback } from "react";
-import { View, ScrollView, StyleSheet, KeyboardAvoidingView, Platform } from "react-native";
-import { useAppDesignTokens, AtomicCard, AtomicText } from "@umituz/react-native-design-system";
-import { getAuthService } from "../../../../infrastructure/config";
-import { useTextToImageFeature } from "../../../text-to-image/presentation/hooks/useTextToImageFeature";
-import { PromptInput } from "../../../../presentation/components/PromptInput";
-import { GenerateButton } from "../../../../presentation/components/buttons/GenerateButton";
-import { GridSelector } from "../../../../presentation/components/selectors/GridSelector";
-import { GenerationResultContent } from "../../../../presentation/components/result/GenerationResultContent";
-
-// Constants (Using default provided styles if config doesn't override)
-import { DEFAULT_IMAGE_STYLES } from "../../../text-to-image/domain/constants/styles.constants";
-import type { TextToImageFeatureConfig } from "../../../text-to-image/domain/types";
-
-export interface MemeGeneratorFeatureProps {
-  config: TextToImageFeatureConfig & {
-    styles?: Array<{
-        id: string;
-        name: string;
-        emoji?: string;
-        icon?: string;
-        description?: string;
-    }>;
-    [key: string]: unknown;
-  };
-  translations: Record<string, string>;
-  onSaveImage: (url: string) => Promise<void>;
-  onBeforeProcess?: () => Promise<boolean>;
-}
-
-export const MemeGeneratorFeature: React.FC<MemeGeneratorFeatureProps> = ({
-  config,
-  translations,
-  onSaveImage,
-  onBeforeProcess,
-}) => {
-  const tokens = useAppDesignTokens();
-  const authService = getAuthService();
-  const userId = authService.getUserId() || "anonymous";
-
-  // Config can override styles, or use defaults
-  const stylesList = config.styles || DEFAULT_IMAGE_STYLES;
-  
-  // Transform styles for GridSelector
-  const styleOptions = useMemo(() => stylesList.map((s: { 
-    id: string; 
-    name: string; 
-    emoji?: string; 
-    icon?: string; 
-    description?: string; 
-  }) => ({
-      value: s.id,
-      label: s.name,
-      emoji: s.emoji || s.icon, // Handle different formats
-      description: s.description
-  })), [stylesList]);
-
-  // Validate model is provided from app
-  if (!config.model) {
-    throw new Error(
-      "MemeGeneratorFeature: model is required in config. " +
-      "Please provide model from app's generation config."
-    );
-  }
-
-  const { state, setPrompt, generate, reset, isReady } = useTextToImageFeature({
-    config,
-    userId,
-  });
-
-  const [selectedStyle, setSelectedStyle] = React.useState<string | null>(null);
-
-  const handleGenerate = useCallback(async () => {
-    if (onBeforeProcess) {
-      const canProceed = await onBeforeProcess();
-      if (!canProceed) return;
-    }
-    
-    // Append style logic handled via buildInput or here
-    // For now simple pass
-    await generate();
-  }, [generate, onBeforeProcess]);
-
-  const handleSave = useCallback(() => {
-    if (state.imageUrl) {
-        onSaveImage(state.imageUrl);
-    }
-  }, [state.imageUrl, onSaveImage]);
-
-  const styles = StyleSheet.create({
-    container: {
-      flex: 1,
-    },
-    content: {
-      padding: tokens.spacing.lg,
-      gap: tokens.spacing.xl,
-      paddingBottom: 100,
-    },
-    section: {
-        gap: tokens.spacing.md,
-    },
-  });
-
-  if (state.imageUrl) {
-     return (
-        <GenerationResultContent
-            result={{ imageUrl: state.imageUrl }}
-            onSave={handleSave}
-            onRetry={reset}
-            translations={{
-                share: "Share",
-                sharing: "Sharing...",
-                save: translations.saveButtonText || "Save to Gallery",
-                retry: translations.tryAnotherText || "Create Another",
-                aiGenerated: translations.successText || "Your meme is ready!",
-            }}
-        />
-     );
-  }
-
-  return (
-    <KeyboardAvoidingView
-        behavior={Platform.OS === "ios" ? "padding" : "height"}
-        style={styles.container}
-    >
-      <ScrollView contentContainerStyle={styles.content} keyboardShouldPersistTaps="handled">
-
-        {/* Prompt Input */}
-        <View style={styles.section}>
-            <AtomicText type="labelLarge" style={{color: tokens.colors.textPrimary}}>
-                {translations.description || "Describe your meme idea"}
-            </AtomicText>
-            <PromptInput
-                value={state.prompt}
-                onChangeText={setPrompt}
-                placeholder={translations.promptPlaceholder || "Enter your funny idea..."}
-                isDisabled={state.isProcessing}
-                minHeight={100}
-            />
-        </View>
-
-        {/* Style Selector */}
-        {styleOptions.length > 0 && (
-            <GridSelector
-                title={translations.styleLabel || "Choose a Style"}
-                options={styleOptions}
-                selectedValue={selectedStyle}
-                onSelect={setSelectedStyle}
-                disabled={state.isProcessing}
-                columns={3}
-            />
-        )}
-
-        {/* Generate Button */}
-        <GenerateButton
-            onPress={handleGenerate}
-            isProcessing={state.isProcessing}
-            isDisabled={!isReady}
-            text={translations.processButtonText || "Generate Meme"}
-        />
-
-        {/* Error Display */}
-        {state.error && (
-            <AtomicCard style={{backgroundColor: tokens.colors.errorContainer}}>
-                <AtomicText style={{color: tokens.colors.error}}>
-                    {state.error}
-                </AtomicText>
-            </AtomicCard>
-        )}
-      </ScrollView>
-    </KeyboardAvoidingView>
-  );
-};

package/src/features/meme-generator/presentation/components/index.ts

@@ -1,2 +0,0 @@
-export { MemeGeneratorFeature } from "./MemeGeneratorFeature";
-export type { MemeGeneratorFeatureProps } from "./MemeGeneratorFeature";