@umituz/react-native-ai-generation-content 1.20.5 → 1.20.7
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.
- package/package.json +1 -1
- package/src/features/audio-generation/README.md +0 -413
- package/src/features/audio-generation/domain/entities.ts +0 -39
- package/src/features/audio-generation/index.ts +0 -1
- package/src/features/colorization/README.md +0 -393
- package/src/features/colorization/domain/entities.ts +0 -46
- package/src/features/colorization/index.ts +0 -1
- package/src/features/future-prediction/README.md +0 -451
- package/src/features/future-prediction/domain/entities.ts +0 -45
- package/src/features/future-prediction/index.ts +0 -1
- package/src/features/image-captioning/README.md +0 -421
- package/src/features/image-captioning/domain/entities.ts +0 -47
- package/src/features/image-captioning/index.ts +0 -1
- package/src/features/inpainting/README.md +0 -406
- package/src/features/inpainting/domain/entities.ts +0 -58
- package/src/features/inpainting/index.ts +0 -1
- package/src/features/sketch-to-image/README.md +0 -393
- package/src/features/sketch-to-image/domain/entities.ts +0 -47
- package/src/features/sketch-to-image/index.ts +0 -1
- package/src/features/style-transfer/README.md +0 -400
- package/src/features/style-transfer/domain/entities.ts +0 -52
- package/src/features/style-transfer/index.ts +0 -1
|
@@ -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';
|