@umituz/react-native-ai-generation-content 1.20.5 → 1.20.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,421 +0,0 @@
1
- # Image Captioning Feature
2
-
3
- Generate descriptive captions for images using AI.
4
-
5
- ## 📍 Import Path
6
-
7
- ```typescript
8
- import { useImageCaptioningFeature } from '@umituz/react-native-ai-generation-content';
9
- ```
10
-
11
- **Location**: `src/features/image-captioning/`
12
-
13
- ## 🎯 Feature Purpose
14
-
15
- Generate detailed, descriptive captions for images using AI. Supports multiple caption styles (detailed, brief, creative, factual) with keyword extraction, object recognition, and scene description capabilities.
16
-
17
- ---
18
-
19
- ## 📋 Usage Strategy
20
-
21
- ### When to Use This Feature
22
-
23
- ✅ **Use Cases:**
24
- - Generating social media captions
25
- - Creating alt text for accessibility
26
- - Auto-generating image descriptions for CMS
27
- - SEO-friendly image descriptions
28
- - Content management and organization
29
-
30
- ❌ **When NOT to Use:**
31
- - Generating images from descriptions (use Text to Image)
32
- - Detailed image analysis beyond captions (use image analysis tools)
33
- - Real-time video captioning
34
- - Multi-image comparisons
35
-
36
- ### Implementation Strategy
37
-
38
- 1. **Select image** to caption
39
- 2. **Choose caption style** (detailed, brief, creative, factual)
40
- 3. **Configure options** (keywords, objects, scene)
41
- 4. **Generate caption** with progress tracking
42
- 5. **Review result** with metadata
43
- 6. **Copy or share** caption
44
-
45
- ---
46
-
47
- ## ⚠️ Critical Rules (MUST FOLLOW)
48
-
49
- ### 1. Image Requirements
50
- - **MUST** provide ONE image to caption
51
- - **MUST** use clear, appropriate images
52
- - **MUST** have visible content
53
- - **MUST NOT** exceed file size limits (10MB max)
54
- - **MUST** respect copyright and usage rights
55
-
56
- ### 2. Configuration
57
- - **MUST** provide valid `userId` for tracking
58
- - **MUST** specify `captionStyle` (detailed, brief, creative, factual)
59
- - **MUST** implement `onError` callback
60
- - **MUST** implement `onSelectImage` callback
61
- - **MUST** handle caption display and copying
62
-
63
- ### 3. State Management
64
- - **MUST** check `isReady` before enabling generate button
65
- - **MUST** display progress during generation
66
- - **MUST** handle `isProcessing` state to prevent duplicate requests
67
- - **MUST** display `error` state with clear messages
68
- - **MUST** implement proper cleanup on unmount
69
-
70
- ### 4. Performance
71
- - **MUST** implement image compression before upload
72
- - **MUST** show progress indicator for processing
73
- - **MUST** cache results locally
74
- - **MUST** allow users to cancel processing
75
- - **MUST NOT** generate multiple captions simultaneously
76
-
77
- ### 5. Content Quality
78
- - **MUST** provide caption with confidence score
79
- - **MUST** support optional metadata (keywords, objects, scene)
80
- - **MUST** handle various image types
81
- - **MUST** support multiple caption styles
82
- - **MUST** offer regeneration with different styles
83
-
84
- ---
85
-
86
- ## 🚫 Prohibitions (MUST AVOID)
87
-
88
- ### Strictly Forbidden
89
-
90
- ❌ **NEVER** do the following:
91
-
92
- 1. **No Missing Images**
93
- - Always validate image is selected
94
- - Never call process() without image
95
- - Show clear upload prompt
96
-
97
- 2. **No Auto-Processing**
98
- - Never start captioning without user action
99
- - Always require explicit "Generate" button press
100
- - Show preview before processing
101
-
102
- 3. **No Hardcoded Credentials**
103
- - Never store API keys in component files
104
- - Use environment variables or secure storage
105
-
106
- 4. **No Unhandled Errors**
107
- - Never ignore captioning failures
108
- - Always explain what went wrong
109
- - Provide retry or alternative options
110
-
111
- 5. **No Memory Leaks**
112
- - Never store both image and caption unnecessarily
113
- - Clean up temporary images
114
- - Implement proper image disposal
115
-
116
- 6. **No Blocked UI**
117
- - Never block main thread with image processing
118
- - Always show progress indicator
119
- - Allow cancellation
120
-
121
- 7. **No Copyright Issues**
122
- - Never claim copyright on generated captions
123
- - Respect image usage rights
124
- - Provide attribution when needed
125
-
126
- ---
127
-
128
- ## 🤖 AI Agent Directions
129
-
130
- ### For AI Code Generation Tools
131
-
132
- When using this feature with AI code generation tools, follow these guidelines:
133
-
134
- #### Prompt Template for AI Agents
135
-
136
- ```
137
- You are implementing an image captioning feature using @umituz/react-native-ai-generation-content.
138
-
139
- REQUIREMENTS:
140
- 1. Import from: @umituz/react-native-ai-generation-content
141
- 2. Use the useImageCaptioningFeature hook
142
- 3. Select caption style (detailed, brief, creative, factual)
143
- 4. Implement image selection UI
144
- 5. Configure options (keywords, objects, scene)
145
- 6. Validate image before captioning
146
- 7. Display caption with metadata
147
- 8. Handle long processing times with progress
148
- 9. Implement proper error handling
149
- 10. Implement cleanup on unmount
150
-
151
- CRITICAL RULES:
152
- - MUST validate image before calling process()
153
- - MUST display caption with confidence score
154
- - MUST handle caption style selection
155
- - MUST handle optional metadata options
156
- - MUST implement debouncing (300ms)
157
- - MUST allow regeneration with different styles
158
- - MUST implement copy to clipboard functionality
159
-
160
- CONFIGURATION:
161
- - Provide valid userId (string)
162
- - Set captionStyle: 'detailed' | 'brief' | 'creative' | 'factual'
163
- - Set language?: string (caption language, default: 'en')
164
- - Set includeKeywords?: boolean (include extracted keywords)
165
- - Set maxCaptionLength?: number (maximum caption length)
166
- - Implement onSelectImage callback
167
- - Configure callbacks: onProcessingStart, onProcessingComplete, onError
168
-
169
- CAPTION STYLES:
170
- - detailed: Comprehensive, descriptive captions
171
- - brief: Short, concise captions
172
- - creative: Artistic and creative descriptions
173
- - factual: Objective, factual descriptions
174
-
175
- OPTIONS:
176
- - includeKeywords: Extract and include keywords (default: false)
177
- - includeObjects: List detected objects (default: false)
178
- - includeScene: Describe scene setting (default: false)
179
- - maxCaptionLength: Limit caption length (default: unlimited)
180
- - language: Caption language (default: 'en')
181
-
182
- STRICTLY FORBIDDEN:
183
- - No missing image validation
184
- - No auto-processing without user action
185
- - No hardcoded API keys
186
- - No unhandled errors
187
- - No memory leaks
188
- - No blocking UI
189
- - No copyright issues
190
-
191
- QUALITY CHECKLIST:
192
- - [ ] Image selection implemented
193
- - [ ] Caption style selector added
194
- - [ ] Optional metadata toggles included
195
- - [ ] Validation before process()
196
- - [ ] Caption display with confidence score
197
- - [ ] Keywords/objects/scene display (when enabled)
198
- - [ ] Progress indicator during processing
199
- - [ ] Error display with retry option
200
- - [ ] Copy to clipboard functionality
201
- - [ ] Regeneration with different styles
202
- ```
203
-
204
- #### AI Implementation Checklist
205
-
206
- Use this checklist when generating code:
207
-
208
- - [ ] Feature imported from correct path
209
- - [ ] Image selection implemented
210
- - [ ] Caption style selector added
211
- - [ ] Metadata toggles implemented
212
- - [ ] Validation before process()
213
- - [ ] Caption display with confidence
214
- - [ ] Keywords display (when enabled)
215
- - [ ] Objects display (when enabled)
216
- - [ ] Scene display (when enabled)
217
- - [ ] Progress indicator during processing
218
- - [ ] Error display with user-friendly message
219
- - [ ] Copy to clipboard button
220
- - [ ] Regeneration option
221
- - [ ] Cleanup on unmount
222
-
223
- ---
224
-
225
- ## 🛠️ Configuration Strategy
226
-
227
- ### Essential Configuration
228
-
229
- ```typescript
230
- // Required fields
231
- {
232
- userId: string
233
- captionStyle: 'detailed' | 'brief' | 'creative' | 'factual'
234
- onSelectImage: () => Promise<string | null>
235
- }
236
-
237
- // Optional callbacks
238
- {
239
- includeKeywords?: boolean
240
- includeObjects?: boolean
241
- includeScene?: boolean
242
- maxCaptionLength?: number
243
- onProcessingStart?: () => void
244
- onProcessingComplete?: (result) => void
245
- onError?: (error: string) => void
246
- }
247
- ```
248
-
249
- ### Recommended Settings
250
-
251
- 1. **Caption Styles**
252
- - Detailed: Comprehensive descriptions (recommended for CMS)
253
- - Brief: Short captions (social media, alt text)
254
- - Creative: Artistic descriptions (marketing, storytelling)
255
- - Factual: Objective descriptions (accessibility, documentation)
256
-
257
- 2. **Metadata Options**
258
- - includeKeywords: Extract key terms for categorization
259
- - includeObjects: List detected objects
260
- - includeScene: Describe environment/setting
261
-
262
- 3. **Length Limits**
263
- - Alt text: 125 characters recommended
264
- - Instagram: 2200 characters maximum
265
- - Twitter: 280 characters maximum
266
- - No limit for CMS/documentation
267
-
268
- ---
269
-
270
- ## 📊 State Management
271
-
272
- ### Feature States
273
-
274
- **isReady**: boolean
275
- - Image selected and validated
276
- - Check before enabling generate button
277
-
278
- **isProcessing**: boolean
279
- - Caption generation in progress
280
- - Show loading/progress indicator
281
- - Disable generate button
282
-
283
- **progress**: number (0-100)
284
- - Generation progress percentage
285
- - Update progress bar
286
-
287
- **error**: string | null
288
- - Error message if generation failed
289
- - Display to user with clear message
290
-
291
- **result**: {
292
- caption: string
293
- keywords?: string[]
294
- objects?: string[]
295
- scene?: string
296
- confidence: number
297
- language: string
298
- }
299
-
300
- ---
301
-
302
- ## 🎨 Best Practices
303
-
304
- ### Caption Style Selection
305
-
306
- 1. **Detailed**
307
- - Use for: CMS, documentation, comprehensive descriptions
308
- - Best: High-quality, content-rich images
309
- - Example: "A serene beach scene at sunset with gentle waves rolling onto the shore. The sky is painted in vibrant shades of orange and pink as the sun dips below the horizon."
310
-
311
- 2. **Brief**
312
- - Use for: Social media, quick summaries, alt text
313
- - Best: Any image type
314
- - Example: "Beach sunset with orange sky"
315
-
316
- 3. **Creative**
317
- - Use for: Marketing, storytelling, artistic content
318
- - Best: Visually striking or emotional images
319
- - Example: "Nature's daily masterpiece unfolds as the sun bids farewell, painting the sky in a breathtaking symphony of warm hues."
320
-
321
- 4. **Factual**
322
- - Use for: Accessibility, documentation, objective needs
323
- - Best: Any image type
324
- - Example: "A beach at sunset. Visible elements include sand, ocean water, sky, sun, and birds."
325
-
326
- ### Use Case Matching
327
-
328
- 1. **Social Media**
329
- - Style: Brief or Creative
330
- - Length: Match platform limits
331
- - Include keywords: Yes
332
-
333
- 2. **Accessibility (Alt Text)**
334
- - Style: Factual or Brief
335
- - Length: 125 characters
336
- - Include keywords: Optional
337
-
338
- 3. **CMS/Documentation**
339
- - Style: Detailed
340
- - Length: No limit
341
- - Include all metadata: Yes
342
-
343
- ---
344
-
345
- ## 🐛 Common Pitfalls
346
-
347
- ### Quality Issues
348
-
349
- ❌ **Problem**: Caption doesn't match image content
350
- ✅ **Solution**: Try different caption style, improve image quality
351
-
352
- ### Length Issues
353
-
354
- ❌ **Problem**: Caption too long for platform
355
- ✅ **Solution**: Use maxCaptionLength parameter
356
-
357
- ### Missing Metadata
358
-
359
- ❌ **Problem**: Keywords or objects not showing
360
- ✅ **Solution**: Enable includeKeywords and includeObjects options
361
-
362
- ### Confidence Issues
363
-
364
- ❌ **Problem**: Low confidence caption
365
- ✅ **Solution**: Review and edit caption, improve image quality
366
-
367
- ---
368
-
369
- ## 📦 Related Components
370
-
371
- Use these components from the library:
372
-
373
- - **PhotoUploadCard**: Upload image interface
374
- - **CaptionStyleSelector**: Choose caption style
375
- - **MetadataToggles**: Enable/disable keywords, objects, scene
376
- - **CaptionDisplay**: Display caption with metadata
377
- - **CopyButton**: Copy caption to clipboard
378
- - **ProgressBar**: Progress display
379
-
380
- Located at: `src/presentation/components/`
381
-
382
- ---
383
-
384
- ## 🔄 Migration Strategy
385
-
386
- If migrating from previous implementation:
387
-
388
- 1. **Update imports** to new path
389
- 2. **Add caption style selector**
390
- 3. **Implement metadata toggles**
391
- 4. **Add copy to clipboard functionality**
392
- 5. **Update state handling** for new structure
393
- 6. **Display confidence scores**
394
- 7. **Test all caption styles**
395
-
396
- ---
397
-
398
- ## 📚 Additional Resources
399
-
400
- - Main documentation: `/docs/`
401
- - API reference: `/docs/api/`
402
- - Examples: `/docs/examples/basic/image-captioning/`
403
- - Architecture: `/ARCHITECTURE.md`
404
-
405
- ---
406
-
407
- **Last Updated**: 2025-01-08
408
- **Version**: 2.0.0 (Strategy-based Documentation)
409
-
410
- ---
411
-
412
- ## 📝 Changelog
413
-
414
- ### v2.0.0 - 2025-01-08
415
- - **BREAKING**: Documentation format changed to strategy-based
416
- - Removed extensive code examples
417
- - Added rules, prohibitions, and AI agent directions
418
- - Focus on best practices and implementation guidance
419
-
420
- ### v1.0.0 - Initial Release
421
- - Initial feature documentation
@@ -1,47 +0,0 @@
1
- /**
2
- * Image Captioning Domain Entities
3
- */
4
-
5
- export interface ImageCaptioningConfig {
6
- /**
7
- * Detail level of the caption
8
- * @default 'standard'
9
- */
10
- detailLevel?: 'brief' | 'standard' | 'detailed';
11
-
12
- /**
13
- * Language for the caption
14
- * @default 'en'
15
- */
16
- language?: string;
17
- }
18
-
19
- export interface ImageCaptioningRequest {
20
- /**
21
- * The image to be captioned.
22
- * Can be a Base64 string or a remote URL.
23
- */
24
- image: string;
25
-
26
- /**
27
- * Optional context or question to guide the captioning
28
- */
29
- prompt?: string;
30
-
31
- /**
32
- * Optional configuration
33
- */
34
- options?: ImageCaptioningConfig;
35
- }
36
-
37
- export interface ImageCaptioningResult {
38
- /**
39
- * The generated caption text
40
- */
41
- text: string;
42
-
43
- /**
44
- * Metadata about the generation
45
- */
46
- metadata?: Record<string, unknown>;
47
- }
@@ -1 +0,0 @@
1
- export * from './domain/entities';