@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,393 +0,0 @@
1
- # Sketch to Image Feature
2
-
3
- Convert hand-drawn sketches and doodles into realistic images using AI.
4
-
5
- ## 📍 Import Path
6
-
7
- ```typescript
8
- import { useSketchToImageFeature } from '@umituz/react-native-ai-generation-content';
9
- ```
10
-
11
- **Location**: `src/features/sketch-to-image/`
12
-
13
- ## 🎯 Feature Purpose
14
-
15
- Transform rough sketches into detailed, realistic images using AI. Supports multiple output styles including realistic, artistic, anime, and 3D render. Automatically adds color, details, and textures to bring drawings to life.
16
-
17
- ---
18
-
19
- ## 📋 Usage Strategy
20
-
21
- ### When to Use This Feature
22
-
23
- ✅ **Use Cases:**
24
- - Creating concept art from sketches
25
- - Turning doodles into illustrations
26
- - Transforming storyboard sketches
27
- - Converting design sketches to mockups
28
- - Quick prototyping and ideation
29
-
30
- ❌ **When NOT to Use:**
31
- - Generating images from text only (use Text to Image)
32
- - Applying artistic styles to photos (use Style Transfer)
33
- - Image-to-image transformation (use Image to Image)
34
- - Creating detailed artwork from scratch
35
-
36
- ### Implementation Strategy
37
-
38
- 1. **Select or draw sketch** to convert
39
- 2. **Choose output style** (realistic, artistic, anime, 3D)
40
- 3. **Add prompt** (optional) describing the sketch
41
- 4. **Configure options** (add color, add details)
42
- 5. **Generate image** with progress tracking
43
- 6. **Preview result** and offer regeneration
44
- 7. **Save or share** final image
45
-
46
- ---
47
-
48
- ## ⚠️ Critical Rules (MUST FOLLOW)
49
-
50
- ### 1. Sketch Requirements
51
- - **MUST** provide ONE sketch image
52
- - **MUST** use clear, readable sketches
53
- - **MUST** have visible line work
54
- - **MUST NOT** exceed file size limits (10MB max)
55
- - **MUST** be in a common image format
56
-
57
- ### 2. Configuration
58
- - **MUST** provide valid `userId` for tracking
59
- - **MUST** specify `outputStyle` (realistic, artistic, anime, 3D)
60
- - **MUST** implement `onError` callback
61
- - **MUST** implement `onSelectSketch` callback
62
- - **MUST** provide optional prompt input
63
-
64
- ### 3. State Management
65
- - **MUST** check `isReady` before enabling generate button
66
- - **MUST** display progress during generation
67
- - **MUST** handle long processing times
68
- - **MUST** display `error` state with clear messages
69
- - **MUST** implement proper cleanup on unmount
70
-
71
- ### 4. Performance
72
- - **MUST** implement image compression before upload
73
- - **MUST** show progress indicator for processing
74
- - **MUST** cache results locally
75
- - **MUST** allow users to cancel processing
76
- - **MUST NOT** generate multiple images simultaneously
77
-
78
- ### 5. Content Quality
79
- - **MUST** provide sketch-to-result comparison
80
- - **MUST** allow style adjustment
81
- - **MUST** handle various sketch types
82
- - **MUST** support descriptive prompts
83
- - **MUST** offer regeneration with different settings
84
-
85
- ---
86
-
87
- ## 🚫 Prohibitions (MUST AVOID)
88
-
89
- ### Strictly Forbidden
90
-
91
- ❌ **NEVER** do the following:
92
-
93
- 1. **No Missing Sketches**
94
- - Always validate sketch is selected
95
- - Never call process() without sketch
96
-
97
- 2. **No Auto-Processing**
98
- - Never start conversion without user action
99
- - Always require explicit "Convert" 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 conversion failures
108
- - Always explain what went wrong
109
- - Provide retry or alternative options
110
-
111
- 5. **No Memory Leaks**
112
- - Never store both sketch and result simultaneously
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 Poor Sketch Quality**
122
- - Never use unreadable or extremely messy sketches
123
- - Always provide guidance on sketch quality
124
- - Show examples of good sketches
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 a sketch to image 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 useSketchToImageFeature hook
142
- 3. Select output style (realistic, artistic, anime, 3d)
143
- 4. Implement sketch selection/upload UI
144
- 5. Add optional prompt input for description
145
- 6. Configure options (addColor, addDetails)
146
- 7. Validate sketch before conversion
147
- 8. Show sketch-to-result comparison
148
- 9. Handle long processing times with progress
149
- 10. Implement proper error handling
150
- 11. Implement cleanup on unmount
151
-
152
- CRITICAL RULES:
153
- - MUST validate sketch before calling convert()
154
- - MUST show sketch-to-result comparison
155
- - MUST handle output style selection
156
- - MUST handle prompt input
157
- - MUST implement debouncing (300ms)
158
- - MUST allow regeneration with different settings
159
-
160
- CONFIGURATION:
161
- - Provide valid userId (string)
162
- - Set outputStyle: 'realistic' | 'artistic' | 'anime' | '3d'
163
- - Set prompt: string (optional description)
164
- - Set addColor: boolean (add color to sketch)
165
- - Set addDetails: boolean (enhance with details)
166
- - Implement onSelectSketch callback
167
- - Implement onSaveResult callback
168
- - Configure callbacks: onProcessingStart, onProcessingComplete, onError
169
-
170
- OUTPUT STYLES:
171
- - realistic: Photorealistic output
172
- - artistic: Artistic interpretation
173
- - anime: Anime/manga style
174
- - 3d: 3D rendered look
175
-
176
- OPTIONS:
177
- - addColor: Add color to sketch (default: true)
178
- - addDetails: Enhance with details (default: true)
179
- - prompt: Optional description of sketch content
180
-
181
- STRICTLY FORBIDDEN:
182
- - No missing sketch validation
183
- - No auto-processing without user action
184
- - No hardcoded API keys
185
- - No unhandled errors
186
- - No memory leaks
187
- - No blocking UI
188
- - No poor sketch quality acceptance
189
-
190
- QUALITY CHECKLIST:
191
- - [ ] Sketch selection/upload implemented
192
- - [ ] Output style selector added
193
- - [ ] Prompt input included
194
- - [ ] Validation before convert()
195
- - [ ] Sketch-to-result comparison view
196
- - [ ] Progress indicator during processing
197
- - [ ] Error display with retry option
198
- - [ ] Download/share functionality
199
- - [ ] Regeneration with different styles
200
- ```
201
-
202
- #### AI Implementation Checklist
203
-
204
- Use this checklist when generating code:
205
-
206
- - [ ] Feature imported from correct path
207
- - [ ] Sketch selection implemented
208
- - [ ] Output style selector added
209
- - [ ] Prompt input implemented
210
- - [ ] Validation before convert()
211
- - [ ] Sketch-to-result comparison view
212
- - [ ] Progress indicator during processing
213
- - [ ] Error display with user-friendly message
214
- - [ ] Download/share buttons
215
- - [ ] Regeneration option
216
- - [ ] Cleanup on unmount
217
- - [ ] Original sketch preserved
218
-
219
- ---
220
-
221
- ## 🛠️ Configuration Strategy
222
-
223
- ### Essential Configuration
224
-
225
- ```typescript
226
- // Required fields
227
- {
228
- userId: string
229
- outputStyle: 'realistic' | 'artistic' | 'anime' | '3d'
230
- onSelectSketch: () => Promise<string | null>
231
- }
232
-
233
- // Optional callbacks
234
- {
235
- onProcessingStart?: () => void
236
- onProcessingComplete?: (result) => void
237
- onError?: (error: string) => void
238
- }
239
- ```
240
-
241
- ### Recommended Settings
242
-
243
- 1. **Output Styles**
244
- - Realistic: Photorealistic output (recommended for concept art)
245
- - Artistic: Artistic interpretation (creative projects)
246
- - Anime: Anime/manga style (illustrations)
247
- - 3D: 3D rendered look (product mockups)
248
-
249
- 2. **Options**
250
- - addColor: Add color to sketch (default: true)
251
- - addDetails: Enhance with AI-generated details (default: true)
252
-
253
- 3. **Sketch Quality**
254
- - Clear, readable line work
255
- - Visible shapes and forms
256
- - Good contrast
257
- - Max size: 10MB
258
-
259
- ---
260
-
261
- ## 📊 State Management
262
-
263
- ### Feature States
264
-
265
- **isReady**: boolean
266
- - Sketch selected and validated
267
- - Check before enabling generate button
268
-
269
- **isProcessing**: boolean
270
- - Conversion in progress
271
- - Show loading/progress indicator
272
- - Disable generate button
273
-
274
- **progress**: number (0-100)
275
- - Conversion progress percentage
276
- - Update progress bar
277
-
278
- **error**: string | null
279
- - Error message if conversion failed
280
- - Display to user with clear message
281
-
282
- **result**: {
283
- imageUrl: string
284
- sketchImageUrl?: string
285
- outputStyle?: string
286
- prompt?: string
287
- metadata?: any
288
- }
289
-
290
- ---
291
-
292
- ## 🎨 Best Practices
293
-
294
- ### Sketch Creation
295
-
296
- 1. **Sketch Quality**
297
- - Good: Clear lines, readable shapes
298
- - Bad: Extremely messy, unreadable
299
-
300
- 2. **Style Selection**
301
- - Match style to use case
302
- - Consider final application
303
- - Test different styles
304
-
305
- 3. **Prompt Writing**
306
- - Be descriptive about content
307
- - Include important details
308
- - Mention style preferences
309
-
310
- ### User Experience
311
-
312
- 1. **Sketch Upload**
313
- - Support multiple upload methods
314
- - Allow camera capture
315
- - Provide sketch guidelines
316
-
317
- 2. **Preview**
318
- - Show sketch preview before conversion
319
- - Compare different output styles
320
- - Display prompt examples
321
-
322
- ---
323
-
324
- ## 🐛 Common Pitfalls
325
-
326
- ### Quality Issues
327
-
328
- ❌ **Problem**: Poor conversion results
329
- ✅ **Solution**: Use clearer sketch, try different style, add descriptive prompt
330
-
331
- ### Style Issues
332
-
333
- ❌ **Problem**: Output doesn't match expectations
334
- ✅ **Solution**: Try different output style, improve prompt
335
-
336
- ### Content Issues
337
-
338
- ❌ **Problem**: AI misinterprets sketch
339
- ✅ **Solution**: Add descriptive prompt, use clearer sketch
340
-
341
- ---
342
-
343
- ## 📦 Related Components
344
-
345
- Use these components from the library:
346
-
347
- - **PhotoUploadCard**: Upload sketch interface
348
- - **OutputStyleSelector**: Choose output style
349
- - **PromptInput**: Enter sketch description
350
- - **ResultDisplay**: Sketch-to-result comparison
351
- - **ProgressBar**: Progress display
352
-
353
- Located at: `src/presentation/components/`
354
-
355
- ---
356
-
357
- ## 🔄 Migration Strategy
358
-
359
- If migrating from previous implementation:
360
-
361
- 1. **Update imports** to new path
362
- 2. **Add output style selector**
363
- 3. **Implement prompt input**
364
- 4. **Update state handling** for new structure
365
- 5. **Add sketch-to-result comparison**
366
- 6. **Test all output styles**
367
-
368
- ---
369
-
370
- ## 📚 Additional Resources
371
-
372
- - Main documentation: `/docs/`
373
- - API reference: `/docs/api/`
374
- - Examples: `/docs/examples/basic/sketch-to-image/`
375
- - Architecture: `/ARCHITECTURE.md`
376
-
377
- ---
378
-
379
- **Last Updated**: 2025-01-08
380
- **Version**: 2.0.0 (Strategy-based Documentation)
381
-
382
- ---
383
-
384
- ## 📝 Changelog
385
-
386
- ### v2.0.0 - 2025-01-08
387
- - **BREAKING**: Documentation format changed to strategy-based
388
- - Removed extensive code examples
389
- - Added rules, prohibitions, and AI agent directions
390
- - Focus on best practices and implementation guidance
391
-
392
- ### v1.0.0 - Initial Release
393
- - Initial feature documentation
@@ -1,47 +0,0 @@
1
- /**
2
- * Sketch to Image Domain Entities
3
- */
4
-
5
- export interface SketchToImageConfig {
6
- /**
7
- * Strength of the prompt influence vs sketch influence (0.0 to 1.0)
8
- * @default 0.7
9
- */
10
- strength?: number;
11
-
12
- /**
13
- * Steps for generation
14
- * @default 20
15
- */
16
- steps?: number;
17
- }
18
-
19
- export interface SketchToImageRequest {
20
- /**
21
- * The sketch image.
22
- * Can be a Base64 string or a remote URL.
23
- */
24
- sketchImage: string;
25
-
26
- /**
27
- * Description of the desired output
28
- */
29
- prompt: string;
30
-
31
- /**
32
- * Optional configuration
33
- */
34
- options?: SketchToImageConfig;
35
- }
36
-
37
- export interface SketchToImageResult {
38
- /**
39
- * The generated realistic image URL
40
- */
41
- imageUrl: string;
42
-
43
- /**
44
- * Metadata about the generation
45
- */
46
- metadata?: Record<string, unknown>;
47
- }
@@ -1 +0,0 @@
1
- export * from './domain/entities';