@umituz/react-native-ai-generation-content 1.17.58 → 1.17.60

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.
Files changed (11) hide show
  1. package/package.json +1 -1
  2. package/src/features/ai-hug/presentation/components/AIHugFeature.tsx +22 -36
  3. package/src/features/ai-kiss/presentation/components/AIKissFeature.tsx +22 -36
  4. package/src/features/anime-selfie/presentation/components/AnimeSelfieFeature.tsx +21 -35
  5. package/src/features/face-swap/presentation/components/FaceSwapFeature.tsx +22 -36
  6. package/src/features/hd-touch-up/presentation/components/HDTouchUpFeature.tsx +21 -35
  7. package/src/features/photo-restoration/presentation/components/PhotoRestoreFeature.tsx +21 -45
  8. package/src/features/remove-background/presentation/components/RemoveBackgroundFeature.tsx +21 -35
  9. package/src/features/remove-object/presentation/components/RemoveObjectFeature.tsx +52 -66
  10. package/src/features/replace-background/presentation/components/ReplaceBackgroundFeature.tsx +30 -44
  11. package/src/presentation/components/AIGenerationForm.tsx +16 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umituz/react-native-ai-generation-content",
3
- "version": "1.17.58",
3
+ "version": "1.17.60",
4
4
  "description": "Provider-agnostic AI generation orchestration for React Native",
5
5
  "main": "src/index.ts",
6
6
  "types": "src/index.ts",
package/src/features/ai-hug/presentation/components/AIHugFeature.tsx CHANGED
@@ -12,7 +12,7 @@ import {
12
12
  AtomicButton,
13
13
  } from "@umituz/react-native-design-system";
14
14
  import { DualImagePicker } from "../../../../presentation/components/image-picker/DualImagePicker";
15
- import { ErrorDisplay } from "../../../../presentation/components/display/ErrorDisplay";
15
+ import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
16
16
  import { useAIHugFeature } from "../hooks";
17
17
  import type {
18
18
  AIHugTranslations,
@@ -121,42 +121,28 @@ export const AIHugFeature: React.FC<AIHugFeatureProps> = ({
121
121
  contentContainerStyle={styles.content}
122
122
  showsVerticalScrollIndicator={false}
123
123
  >
124
- <AtomicText
125
- type="bodyLarge"
126
- style={[styles.description, { color: tokens.colors.textSecondary }]}
124
+ <AIGenerationForm
125
+ onGenerate={handleProcess}
126
+ isGenerating={feature.isProcessing}
127
+ translations={{
128
+ generateButton: translations.processButtonText,
129
+ generatingButton: translations.processingText,
130
+ }}
127
131
  >
128
- {translations.description}
129
- </AtomicText>
130
-
131
- <View style={styles.pickerContainer}>
132
- <DualImagePicker
133
- sourceImageUri={feature.sourceImageUri}
134
- targetImageUri={feature.targetImageUri}
135
- isDisabled={feature.isProcessing}
136
- onSelectSource={handleSelectSource}
137
- onSelectTarget={handleSelectTarget}
138
- sourcePlaceholder={translations.sourceUploadTitle}
139
- targetPlaceholder={translations.targetUploadTitle}
140
- layout="horizontal"
141
- variant="portrait"
142
- />
143
- </View>
144
-
145
- <ErrorDisplay error={feature.error} />
146
-
147
- <View style={styles.buttonContainer}>
148
- <AtomicButton
149
- title={
150
- feature.isProcessing
151
- ? translations.processingText
152
- : translations.processButtonText
153
- }
154
- onPress={handleProcess}
155
- disabled={!canProcess}
156
- variant="primary"
157
- size="lg"
158
- />
159
- </View>
132
+ <View style={styles.pickerContainer}>
133
+ <DualImagePicker
134
+ sourceImageUri={feature.sourceImageUri}
135
+ targetImageUri={feature.targetImageUri}
136
+ isDisabled={feature.isProcessing}
137
+ onSelectSource={handleSelectSource}
138
+ onSelectTarget={handleSelectTarget}
139
+ sourcePlaceholder={translations.sourceUploadTitle}
140
+ targetPlaceholder={translations.targetUploadTitle}
141
+ layout="horizontal"
142
+ variant="portrait"
143
+ />
144
+ </View>
145
+ </AIGenerationForm>
160
146
  </ScrollView>
161
147
 
162
148
  {renderProcessingModal?.({ visible: feature.isProcessing, progress: feature.progress })}
package/src/features/ai-kiss/presentation/components/AIKissFeature.tsx CHANGED
@@ -12,7 +12,7 @@ import {
12
12
  AtomicButton,
13
13
  } from "@umituz/react-native-design-system";
14
14
  import { DualImagePicker } from "../../../../presentation/components/image-picker/DualImagePicker";
15
- import { ErrorDisplay } from "../../../../presentation/components/display/ErrorDisplay";
15
+ import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
16
16
  import { useAIKissFeature } from "../hooks";
17
17
  import type {
18
18
  AIKissTranslations,
@@ -115,42 +115,28 @@ export const AIKissFeature: React.FC<AIKissFeatureProps> = ({
115
115
  contentContainerStyle={styles.content}
116
116
  showsVerticalScrollIndicator={false}
117
117
  >
118
- <AtomicText
119
- type="bodyLarge"
120
- style={[styles.description, { color: tokens.colors.textSecondary }]}
118
+ <AIGenerationForm
119
+ onGenerate={handleProcess}
120
+ isGenerating={feature.isProcessing}
121
+ translations={{
122
+ generateButton: translations.processButtonText,
123
+ generatingButton: translations.processingText,
124
+ }}
121
125
  >
122
- {translations.description}
123
- </AtomicText>
124
-
125
- <View style={styles.pickerContainer}>
126
- <DualImagePicker
127
- sourceImageUri={feature.sourceImageUri}
128
- targetImageUri={feature.targetImageUri}
129
- isDisabled={feature.isProcessing}
130
- onSelectSource={handleSelectSource}
131
- onSelectTarget={handleSelectTarget}
132
- sourcePlaceholder={translations.sourceUploadTitle}
133
- targetPlaceholder={translations.targetUploadTitle}
134
- layout="horizontal"
135
- variant="portrait"
136
- />
137
- </View>
138
-
139
- <ErrorDisplay error={feature.error} />
140
-
141
- <View style={styles.buttonContainer}>
142
- <AtomicButton
143
- title={
144
- feature.isProcessing
145
- ? translations.processingText
146
- : translations.processButtonText
147
- }
148
- onPress={handleProcess}
149
- disabled={!canProcess}
150
- variant="primary"
151
- size="lg"
152
- />
153
- </View>
126
+ <View style={styles.pickerContainer}>
127
+ <DualImagePicker
128
+ sourceImageUri={feature.sourceImageUri}
129
+ targetImageUri={feature.targetImageUri}
130
+ isDisabled={feature.isProcessing}
131
+ onSelectSource={handleSelectSource}
132
+ onSelectTarget={handleSelectTarget}
133
+ sourcePlaceholder={translations.sourceUploadTitle}
134
+ targetPlaceholder={translations.targetUploadTitle}
135
+ layout="horizontal"
136
+ variant="portrait"
137
+ />
138
+ </View>
139
+ </AIGenerationForm>
154
140
  </ScrollView>
155
141
 
156
142
  {renderProcessingModal?.({ visible: feature.isProcessing, progress: feature.progress })}
package/src/features/anime-selfie/presentation/components/AnimeSelfieFeature.tsx CHANGED
@@ -12,7 +12,7 @@ import {
12
12
  AtomicButton,
13
13
  } from "@umituz/react-native-design-system";
14
14
  import { PhotoUploadCard } from "../../../../presentation/components/PhotoUploadCard";
15
- import { ErrorDisplay } from "../../../../presentation/components/display/ErrorDisplay";
15
+ import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
16
16
  import { useAnimeSelfieFeature } from "../hooks";
17
17
  import type {
18
18
  AnimeSelfieTranslations,
@@ -117,42 +117,28 @@ export const AnimeSelfieFeature: React.FC<AnimeSelfieFeatureProps> = ({
117
117
  contentContainerStyle={styles.content}
118
118
  showsVerticalScrollIndicator={false}
119
119
  >
120
- <AtomicText
121
- type="bodyLarge"
122
- style={[styles.description, { color: tokens.colors.textSecondary }]}
123
- >
124
- {translations.description}
125
- </AtomicText>
126
-
127
- <PhotoUploadCard
128
- imageUri={feature.imageUri}
129
- onPress={handleSelectImage}
130
- isValidating={feature.isProcessing}
131
- disabled={feature.isProcessing}
132
- translations={photoTranslations}
133
- config={{
134
- aspectRatio: 1,
135
- borderRadius: 24,
136
- showValidationStatus: false,
137
- allowChange: true,
120
+ <AIGenerationForm
121
+ onGenerate={handleProcess}
122
+ isGenerating={feature.isProcessing}
123
+ translations={{
124
+ generateButton: translations.processButtonText,
125
+ generatingButton: translations.processingText,
138
126
  }}
139
- />
140
-
141
- <ErrorDisplay error={feature.error} />
142
-
143
- <View style={styles.buttonContainer}>
144
- <AtomicButton
145
- title={
146
- feature.isProcessing
147
- ? translations.processingText
148
- : translations.processButtonText
149
- }
150
- onPress={handleProcess}
151
- disabled={!feature.imageUri || feature.isProcessing}
152
- variant="primary"
153
- size="lg"
127
+ >
128
+ <PhotoUploadCard
129
+ imageUri={feature.imageUri}
130
+ onPress={handleSelectImage}
131
+ isValidating={feature.isProcessing}
132
+ disabled={feature.isProcessing}
133
+ translations={photoTranslations}
134
+ config={{
135
+ aspectRatio: 1,
136
+ borderRadius: 24,
137
+ showValidationStatus: false,
138
+ allowChange: true,
139
+ }}
154
140
  />
155
- </View>
141
+ </AIGenerationForm>
156
142
  </ScrollView>
157
143
 
158
144
  {renderProcessingModal?.({ visible: feature.isProcessing, progress: feature.progress })}
package/src/features/face-swap/presentation/components/FaceSwapFeature.tsx CHANGED
@@ -12,7 +12,7 @@ import {
12
12
  AtomicButton,
13
13
  } from "@umituz/react-native-design-system";
14
14
  import { DualImagePicker } from "../../../../presentation/components/image-picker/DualImagePicker";
15
- import { ErrorDisplay } from "../../../../presentation/components/display/ErrorDisplay";
15
+ import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
16
16
  import { useFaceSwapFeature } from "../hooks";
17
17
  import type {
18
18
  FaceSwapTranslations,
@@ -116,42 +116,28 @@ export const FaceSwapFeature: React.FC<FaceSwapFeatureProps> = ({
116
116
  contentContainerStyle={styles.content}
117
117
  showsVerticalScrollIndicator={false}
118
118
  >
119
- <AtomicText
120
- type="bodyLarge"
121
- style={[styles.description, { color: tokens.colors.textSecondary }]}
119
+ <AIGenerationForm
120
+ onGenerate={handleProcess}
121
+ isGenerating={feature.isProcessing}
122
+ translations={{
123
+ generateButton: translations.processButtonText,
124
+ generatingButton: translations.processingText,
125
+ }}
122
126
  >
123
- {translations.description}
124
- </AtomicText>
125
-
126
- <View style={styles.pickerContainer}>
127
- <DualImagePicker
128
- sourceImageUri={feature.sourceImageUri}
129
- targetImageUri={feature.targetImageUri}
130
- isDisabled={feature.isProcessing}
131
- onSelectSource={handleSelectSource}
132
- onSelectTarget={handleSelectTarget}
133
- sourcePlaceholder={translations.sourceUploadTitle}
134
- targetPlaceholder={translations.targetUploadTitle}
135
- layout="horizontal"
136
- variant="portrait"
137
- />
138
- </View>
139
-
140
- <ErrorDisplay error={feature.error} />
141
-
142
- <View style={styles.buttonContainer}>
143
- <AtomicButton
144
- title={
145
- feature.isProcessing
146
- ? translations.processingText
147
- : translations.processButtonText
148
- }
149
- onPress={handleProcess}
150
- disabled={!canProcess}
151
- variant="primary"
152
- size="lg"
153
- />
154
- </View>
127
+ <View style={styles.pickerContainer}>
128
+ <DualImagePicker
129
+ sourceImageUri={feature.sourceImageUri}
130
+ targetImageUri={feature.targetImageUri}
131
+ isDisabled={feature.isProcessing}
132
+ onSelectSource={handleSelectSource}
133
+ onSelectTarget={handleSelectTarget}
134
+ sourcePlaceholder={translations.sourceUploadTitle}
135
+ targetPlaceholder={translations.targetUploadTitle}
136
+ layout="horizontal"
137
+ variant="portrait"
138
+ />
139
+ </View>
140
+ </AIGenerationForm>
155
141
  </ScrollView>
156
142
 
157
143
  {renderProcessingModal?.({ visible: feature.isProcessing, progress: feature.progress })}
package/src/features/hd-touch-up/presentation/components/HDTouchUpFeature.tsx CHANGED
@@ -12,7 +12,7 @@ import {
12
12
  AtomicButton,
13
13
  } from "@umituz/react-native-design-system";
14
14
  import { PhotoUploadCard } from "../../../../presentation/components/PhotoUploadCard";
15
- import { ErrorDisplay } from "../../../../presentation/components/display/ErrorDisplay";
15
+ import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
16
16
  import { useHDTouchUpFeature } from "../hooks";
17
17
  import type {
18
18
  HDTouchUpTranslations,
@@ -117,42 +117,28 @@ export const HDTouchUpFeature: React.FC<HDTouchUpFeatureProps> = ({
117
117
  contentContainerStyle={styles.content}
118
118
  showsVerticalScrollIndicator={false}
119
119
  >
120
- <AtomicText
121
- type="bodyLarge"
122
- style={[styles.description, { color: tokens.colors.textSecondary }]}
123
- >
124
- {translations.description}
125
- </AtomicText>
126
-
127
- <PhotoUploadCard
128
- imageUri={feature.imageUri}
129
- onPress={handleSelectImage}
130
- isValidating={feature.isProcessing}
131
- disabled={feature.isProcessing}
132
- translations={photoTranslations}
133
- config={{
134
- aspectRatio: 1,
135
- borderRadius: 24,
136
- showValidationStatus: false,
137
- allowChange: true,
120
+ <AIGenerationForm
121
+ onGenerate={handleProcess}
122
+ isGenerating={feature.isProcessing}
123
+ translations={{
124
+ generateButton: translations.processButtonText,
125
+ generatingButton: translations.processingText,
138
126
  }}
139
- />
140
-
141
- <ErrorDisplay error={feature.error} />
142
-
143
- <View style={styles.buttonContainer}>
144
- <AtomicButton
145
- title={
146
- feature.isProcessing
147
- ? translations.processingText
148
- : translations.processButtonText
149
- }
150
- onPress={handleProcess}
151
- disabled={!feature.imageUri || feature.isProcessing}
152
- variant="primary"
153
- size="lg"
127
+ >
128
+ <PhotoUploadCard
129
+ imageUri={feature.imageUri}
130
+ onPress={handleSelectImage}
131
+ isValidating={feature.isProcessing}
132
+ disabled={feature.isProcessing}
133
+ translations={photoTranslations}
134
+ config={{
135
+ aspectRatio: 1,
136
+ borderRadius: 24,
137
+ showValidationStatus: false,
138
+ allowChange: true,
139
+ }}
154
140
  />
155
- </View>
141
+ </AIGenerationForm>
156
142
  </ScrollView>
157
143
 
158
144
  {renderProcessingModal?.({ visible: feature.isProcessing, progress: feature.progress })}
package/src/features/photo-restoration/presentation/components/PhotoRestoreFeature.tsx CHANGED
@@ -12,6 +12,7 @@ import {
12
12
  AtomicButton,
13
13
  } from "@umituz/react-native-design-system";
14
14
  import { PhotoUploadCard } from "../../../../presentation/components/PhotoUploadCard";
15
+ import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
15
16
  import { PhotoRestoreResultView } from "./PhotoRestoreResultView";
16
17
  import { usePhotoRestoreFeature } from "../hooks";
17
18
  import type {
@@ -103,53 +104,28 @@ export const PhotoRestoreFeature: React.FC<PhotoRestoreFeatureProps> = ({
103
104
  contentContainerStyle={styles.content}
104
105
  showsVerticalScrollIndicator={false}
105
106
  >
106
- <AtomicText
107
- type="bodyLarge"
108
- style={[styles.description, { color: tokens.colors.textSecondary }]}
109
- >
110
- {translations.description}
111
- </AtomicText>
112
-
113
- <PhotoUploadCard
114
- imageUri={feature.imageUri}
115
- onPress={handleSelectImage}
116
- isValidating={feature.isProcessing}
117
- disabled={feature.isProcessing}
118
- translations={photoTranslations}
119
- config={{
120
- aspectRatio: 1,
121
- borderRadius: 24,
122
- showValidationStatus: false,
123
- allowChange: true,
107
+ <AIGenerationForm
108
+ onGenerate={handleProcess}
109
+ isGenerating={feature.isProcessing}
110
+ translations={{
111
+ generateButton: translations.processButtonText,
112
+ generatingButton: translations.processingText,
124
113
  }}
125
- />
126
-
127
- {feature.error && (
128
- <View
129
- style={[
130
- styles.errorContainer,
131
- { backgroundColor: `${tokens.colors.error}15` },
132
- ]}
133
- >
134
- <AtomicText type="bodyMedium" style={{ color: tokens.colors.error }}>
135
- {feature.error}
136
- </AtomicText>
137
- </View>
138
- )}
139
-
140
- <View style={styles.buttonContainer}>
141
- <AtomicButton
142
- title={
143
- feature.isProcessing
144
- ? translations.processingText
145
- : translations.processButtonText
146
- }
147
- onPress={handleProcess}
148
- disabled={!feature.imageUri || feature.isProcessing}
149
- variant="primary"
150
- size="lg"
114
+ >
115
+ <PhotoUploadCard
116
+ imageUri={feature.imageUri}
117
+ onPress={handleSelectImage}
118
+ isValidating={feature.isProcessing}
119
+ disabled={feature.isProcessing}
120
+ translations={photoTranslations}
121
+ config={{
122
+ aspectRatio: 1,
123
+ borderRadius: 24,
124
+ showValidationStatus: false,
125
+ allowChange: true,
126
+ }}
151
127
  />
152
- </View>
128
+ </AIGenerationForm>
153
129
  </ScrollView>
154
130
 
155
131
  {renderProcessingModal?.({ visible: feature.isProcessing, progress: feature.progress })}
package/src/features/remove-background/presentation/components/RemoveBackgroundFeature.tsx CHANGED
@@ -12,7 +12,7 @@ import {
12
12
  AtomicButton,
13
13
  } from "@umituz/react-native-design-system";
14
14
  import { PhotoUploadCard } from "../../../../presentation/components/PhotoUploadCard";
15
- import { ErrorDisplay } from "../../../../presentation/components/display/ErrorDisplay";
15
+ import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
16
16
  import { useRemoveBackgroundFeature } from "../hooks";
17
17
  import type {
18
18
  RemoveBackgroundTranslations,
@@ -117,42 +117,28 @@ export const RemoveBackgroundFeature: React.FC<RemoveBackgroundFeatureProps> = (
117
117
  contentContainerStyle={styles.content}
118
118
  showsVerticalScrollIndicator={false}
119
119
  >
120
- <AtomicText
121
- type="bodyLarge"
122
- style={[styles.description, { color: tokens.colors.textSecondary }]}
123
- >
124
- {translations.description}
125
- </AtomicText>
126
-
127
- <PhotoUploadCard
128
- imageUri={feature.imageUri}
129
- onPress={handleSelectImage}
130
- isValidating={feature.isProcessing}
131
- disabled={feature.isProcessing}
132
- translations={photoTranslations}
133
- config={{
134
- aspectRatio: 1,
135
- borderRadius: 24,
136
- showValidationStatus: false,
137
- allowChange: true,
120
+ <AIGenerationForm
121
+ onGenerate={handleProcess}
122
+ isGenerating={feature.isProcessing}
123
+ translations={{
124
+ generateButton: translations.processButtonText,
125
+ generatingButton: translations.processingText,
138
126
  }}
139
- />
140
-
141
- <ErrorDisplay error={feature.error} />
142
-
143
- <View style={styles.buttonContainer}>
144
- <AtomicButton
145
- title={
146
- feature.isProcessing
147
- ? translations.processingText
148
- : translations.processButtonText
149
- }
150
- onPress={handleProcess}
151
- disabled={!feature.imageUri || feature.isProcessing}
152
- variant="primary"
153
- size="lg"
127
+ >
128
+ <PhotoUploadCard
129
+ imageUri={feature.imageUri}
130
+ onPress={handleSelectImage}
131
+ isValidating={feature.isProcessing}
132
+ disabled={feature.isProcessing}
133
+ translations={photoTranslations}
134
+ config={{
135
+ aspectRatio: 1,
136
+ borderRadius: 24,
137
+ showValidationStatus: false,
138
+ allowChange: true,
139
+ }}
154
140
  />
155
- </View>
141
+ </AIGenerationForm>
156
142
  </ScrollView>
157
143
 
158
144
  {renderProcessingModal?.({ visible: feature.isProcessing, progress: feature.progress })}
package/src/features/remove-object/presentation/components/RemoveObjectFeature.tsx CHANGED
@@ -12,7 +12,7 @@ import {
12
12
  AtomicButton,
13
13
  } from "@umituz/react-native-design-system";
14
14
  import { PhotoUploadCard } from "../../../../presentation/components/PhotoUploadCard";
15
- import { ErrorDisplay } from "../../../../presentation/components/display/ErrorDisplay";
15
+ import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
16
16
  import { useRemoveObjectFeature } from "../hooks";
17
17
  import type {
18
18
  RemoveObjectTranslations,
@@ -116,74 +116,60 @@ export const RemoveObjectFeature: React.FC<RemoveObjectFeatureProps> = ({
116
116
  contentContainerStyle={styles.content}
117
117
  showsVerticalScrollIndicator={false}
118
118
  >
119
- <AtomicText
120
- type="bodyLarge"
121
- style={[styles.description, { color: tokens.colors.textSecondary }]}
122
- >
123
- {translations.description}
124
- </AtomicText>
125
-
126
- <PhotoUploadCard
127
- imageUri={feature.imageUri}
128
- onPress={handleSelectImage}
129
- isValidating={feature.isProcessing}
130
- disabled={feature.isProcessing}
131
- translations={photoTranslations}
132
- config={{
133
- aspectRatio: 1,
134
- borderRadius: 24,
135
- showValidationStatus: false,
136
- allowChange: true,
119
+ <AIGenerationForm
120
+ onGenerate={handleProcess}
121
+ isGenerating={feature.isProcessing}
122
+ translations={{
123
+ generateButton: translations.processButtonText,
124
+ generatingButton: translations.processingText,
137
125
  }}
138
- />
139
-
140
- <View style={styles.promptContainer}>
141
- <AtomicText
142
- type="labelMedium"
143
- style={[styles.promptLabel, { color: tokens.colors.textPrimary }]}
144
- >
145
- {translations.maskTitle}
146
- </AtomicText>
147
- <TextInput
148
- style={[
149
- styles.promptInput,
150
- {
151
- backgroundColor: tokens.colors.backgroundSecondary,
152
- color: tokens.colors.textPrimary,
153
- borderColor: tokens.colors.border,
154
- },
155
- ]}
156
- value={feature.prompt}
157
- onChangeText={feature.setPrompt}
158
- placeholder={translations.promptPlaceholder}
159
- placeholderTextColor={tokens.colors.textTertiary}
160
- multiline
161
- numberOfLines={3}
162
- editable={!feature.isProcessing}
126
+ >
127
+ <PhotoUploadCard
128
+ imageUri={feature.imageUri}
129
+ onPress={handleSelectImage}
130
+ isValidating={feature.isProcessing}
131
+ disabled={feature.isProcessing}
132
+ translations={photoTranslations}
133
+ config={{
134
+ aspectRatio: 1,
135
+ borderRadius: 24,
136
+ showValidationStatus: false,
137
+ allowChange: true,
138
+ }}
163
139
  />
164
- <AtomicText
165
- type="bodySmall"
166
- style={[styles.promptHint, { color: tokens.colors.textTertiary }]}
167
- >
168
- {translations.maskSubtitle}
169
- </AtomicText>
170
- </View>
171
140
 
172
- <ErrorDisplay error={feature.error} />
173
-
174
- <View style={styles.buttonContainer}>
175
- <AtomicButton
176
- title={
177
- feature.isProcessing
178
- ? translations.processingText
179
- : translations.processButtonText
180
- }
181
- onPress={handleProcess}
182
- disabled={!feature.imageUri || feature.isProcessing}
183
- variant="primary"
184
- size="lg"
185
- />
186
- </View>
141
+ <View style={styles.promptContainer}>
142
+ <AtomicText
143
+ type="labelMedium"
144
+ style={[styles.promptLabel, { color: tokens.colors.textPrimary }]}
145
+ >
146
+ {translations.maskTitle}
147
+ </AtomicText>
148
+ <TextInput
149
+ style={[
150
+ styles.promptInput,
151
+ {
152
+ backgroundColor: tokens.colors.backgroundSecondary,
153
+ color: tokens.colors.textPrimary,
154
+ borderColor: tokens.colors.border,
155
+ },
156
+ ]}
157
+ value={feature.prompt}
158
+ onChangeText={feature.setPrompt}
159
+ placeholder={translations.promptPlaceholder}
160
+ placeholderTextColor={tokens.colors.textTertiary}
161
+ multiline
162
+ numberOfLines={3}
163
+ editable={!feature.isProcessing}
164
+ />
165
+ <AtomicText
166
+ type="bodySmall"
167
+ style={[styles.promptHint, { color: tokens.colors.textTertiary }]}
168
+ >
169
+ {translations.maskSubtitle}
170
+ </AtomicText>
171
+ </View>
172
+ </AIGenerationForm>
187
173
  </ScrollView>
188
174
 
189
175
  {renderProcessingModal?.({ visible: feature.isProcessing, progress: feature.progress })}
package/src/features/replace-background/presentation/components/ReplaceBackgroundFeature.tsx CHANGED
@@ -13,7 +13,7 @@ import {
13
13
  AtomicInput,
14
14
  } from "@umituz/react-native-design-system";
15
15
  import { PhotoUploadCard } from "../../../../presentation/components/PhotoUploadCard";
16
- import { ErrorDisplay } from "../../../../presentation/components/display/ErrorDisplay";
16
+ import { AIGenerationForm } from "../../../../presentation/components/AIGenerationForm";
17
17
  import { useReplaceBackgroundFeature } from "../hooks";
18
18
  import type {
19
19
  ReplaceBackgroundTranslations,
@@ -118,53 +118,39 @@ export const ReplaceBackgroundFeature: React.FC<ReplaceBackgroundFeatureProps> =
118
118
  contentContainerStyle={styles.content}
119
119
  showsVerticalScrollIndicator={false}
120
120
  >
121
- <AtomicText
122
- type="bodyLarge"
123
- style={[styles.description, { color: tokens.colors.textSecondary }]}
124
- >
125
- {translations.description}
126
- </AtomicText>
127
-
128
- <PhotoUploadCard
129
- imageUri={feature.imageUri}
130
- onPress={handleSelectImage}
131
- isValidating={feature.isProcessing}
132
- disabled={feature.isProcessing}
133
- translations={photoTranslations}
134
- config={{
135
- aspectRatio: 1,
136
- borderRadius: 24,
137
- showValidationStatus: false,
138
- allowChange: true,
121
+ <AIGenerationForm
122
+ onGenerate={handleProcess}
123
+ isGenerating={feature.isProcessing}
124
+ translations={{
125
+ generateButton: translations.processButtonText,
126
+ generatingButton: translations.processingText,
139
127
  }}
140
- />
141
-
142
- <View style={styles.promptContainer}>
143
- <AtomicInput
144
- value={feature.prompt}
145
- onChangeText={feature.setPrompt}
146
- placeholder={translations.promptPlaceholder}
147
- multiline
148
- numberOfLines={3}
128
+ >
129
+ <PhotoUploadCard
130
+ imageUri={feature.imageUri}
131
+ onPress={handleSelectImage}
132
+ isValidating={feature.isProcessing}
149
133
  disabled={feature.isProcessing}
134
+ translations={photoTranslations}
135
+ config={{
136
+ aspectRatio: 1,
137
+ borderRadius: 24,
138
+ showValidationStatus: false,
139
+ allowChange: true,
140
+ }}
150
141
  />
151
- </View>
152
142
 
153
- <ErrorDisplay error={feature.error} />
154
-
155
- <View style={styles.buttonContainer}>
156
- <AtomicButton
157
- title={
158
- feature.isProcessing
159
- ? translations.processingText
160
- : translations.processButtonText
161
- }
162
- onPress={handleProcess}
163
- disabled={!feature.imageUri || feature.isProcessing}
164
- variant="primary"
165
- size="lg"
166
- />
167
- </View>
143
+ <View style={styles.promptContainer}>
144
+ <AtomicInput
145
+ value={feature.prompt}
146
+ onChangeText={feature.setPrompt}
147
+ placeholder={translations.promptPlaceholder}
148
+ multiline
149
+ numberOfLines={3}
150
+ disabled={feature.isProcessing}
151
+ />
152
+ </View>
153
+ </AIGenerationForm>
168
154
  </ScrollView>
169
155
 
170
156
  {renderProcessingModal?.({ visible: feature.isProcessing, progress: feature.progress })}
package/src/presentation/components/AIGenerationForm.tsx CHANGED
@@ -45,6 +45,7 @@ export interface AIGenerationFormProps extends PropsWithChildren {
45
45
 
46
46
  onGenerate: () => void;
47
47
  isGenerating: boolean;
48
+ hideGenerateButton?: boolean;
48
49
 
49
50
  // Custom Generate Button Props
50
51
  generateButtonProps?: {
@@ -79,6 +80,7 @@ export const AIGenerationForm: React.FC<AIGenerationFormProps> = ({
79
80
 
80
81
  onGenerate,
81
82
  isGenerating,
83
+ hideGenerateButton,
82
84
 
83
85
  generateButtonProps,
84
86
 
@@ -135,18 +137,20 @@ export const AIGenerationForm: React.FC<AIGenerationFormProps> = ({
135
137
  {/* Custom children injected here */}
136
138
  {children}
137
139
 
138
- <GenerateButton
139
- onPress={onGenerate}
140
- isProcessing={isGenerating}
141
- isDisabled={onPromptChange ? !prompt?.trim() : false}
142
- text={translations.generateButton}
143
- processingText={translations.generatingButton}
144
- variant="solid"
145
- icon={generateButtonProps?.icon || "sparkles-outline"}
146
- costLabel={generateButtonProps?.costLabel}
147
- accessoryRight={generateButtonProps?.accessoryRight}
148
- onAccessoryRightPress={generateButtonProps?.onAccessoryRightPress}
149
- />
140
+ {!hideGenerateButton && (
141
+ <GenerateButton
142
+ onPress={onGenerate}
143
+ isProcessing={isGenerating}
144
+ isDisabled={onPromptChange ? !prompt?.trim() : false}
145
+ text={translations.generateButton}
146
+ processingText={translations.generatingButton}
147
+ variant="solid"
148
+ icon={generateButtonProps?.icon || "sparkles-outline"}
149
+ costLabel={generateButtonProps?.costLabel}
150
+ accessoryRight={generateButtonProps?.accessoryRight}
151
+ onAccessoryRightPress={generateButtonProps?.onAccessoryRightPress}
152
+ />
153
+ )}
150
154
  </>
151
155
  );
152
156
  };