Skip to content

Commit fb2cc22

Browse files
AnthonyMarinAnthonyMarin
committed
replace number fields with styled ones
1 parent efe8b43 commit fb2cc22

4 files changed

Lines changed: 45 additions & 55 deletions

File tree

‎src/components/settings/ContentFilterSettings.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import React, { useEffect, useState } from 'react';
2-
import { Form, InputNumber, Switch, Select, Tooltip } from 'antd';
2+
import { Form, Switch, Select, Tooltip } from 'antd';
33
import { QuestionCircleOutlined } from '@ant-design/icons';
44
import useGenericSettings from '@app/hooks/useGenericSettings';
55
import { SettingsGroupType } from '@app/types/settings.types';
66
import BaseSettingsForm from './BaseSettingsForm';
7+
import { InputNumberField } from './Settings.styles';
78

89
const { Option } = Select;
910

@@ -115,7 +116,7 @@ const ContentFilterSettings: React.FC = () => {
115116
{ type: 'number', min: 100, message: 'Value must be at least 100' }
116117
]}
117118
>
118-
<InputNumber min={100} style={{ width: '100%' }} />
119+
<InputNumberField min={100} style={{ width: '100%' }} />
119120
</Form.Item>
120121

121122
<Form.Item
@@ -133,7 +134,7 @@ const ContentFilterSettings: React.FC = () => {
133134
{ type: 'number', min: 1, message: 'Value must be at least 1' }
134135
]}
135136
>
136-
<InputNumber min={1} style={{ width: '100%' }} />
137+
<InputNumberField min={1} style={{ width: '100%' }} />
137138
</Form.Item>
138139

139140
<Form.Item

‎src/components/settings/ImageModerationSettings.tsx‎

Lines changed: 38 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useEffect, useState } from 'react';
2-
import { Form, Input, InputNumber, Switch, Select, Tooltip } from 'antd';
2+
import { Form, Switch, Select, Tooltip } from 'antd';
33
import { QuestionCircleOutlined } from '@ant-design/icons';
44
import useGenericSettings from '@app/hooks/useGenericSettings';
55
import { ImageModerationSettings as ImageModerationSettingsType, SettingsGroupType } from '@app/types/settings.types';
@@ -8,14 +8,8 @@ import * as S from './Settings.styles';
88
const { Option } = Select;
99

1010
const ImageModerationSettings: React.FC = () => {
11-
const {
12-
settings,
13-
loading,
14-
error,
15-
fetchSettings,
16-
updateSettings,
17-
saveSettings,
18-
} = useGenericSettings('image_moderation');
11+
const { settings, loading, error, fetchSettings, updateSettings, saveSettings } =
12+
useGenericSettings('image_moderation');
1913

2014
const [form] = Form.useForm();
2115
const [isUserEditing, setIsUserEditing] = useState(false);
@@ -24,13 +18,13 @@ const ImageModerationSettings: React.FC = () => {
2418
useEffect(() => {
2519
if (settings && !isUserEditing) {
2620
console.log('ImageModerationSettings - Received settings:', settings);
27-
21+
2822
// The useGenericSettings hook now returns properly prefixed field names
2923
// so we can use the settings directly without transformation
3024
const settingsObj = settings as Record<string, any>;
31-
25+
3226
console.log('ImageModerationSettings - Setting form values directly:', settingsObj);
33-
27+
3428
// Set form values directly since they're already properly prefixed
3529
form.setFieldsValue(settingsObj);
3630
console.log('ImageModerationSettings - Form values after set:', form.getFieldsValue());
@@ -70,11 +64,7 @@ const ImageModerationSettings: React.FC = () => {
7064
setIsUserEditing(false);
7165
}}
7266
>
73-
<Form.Item
74-
name="image_moderation_enabled"
75-
label="Enable Image Moderation"
76-
valuePropName="checked"
77-
>
67+
<Form.Item name="image_moderation_enabled" label="Enable Image Moderation" valuePropName="checked">
7868
<Switch />
7969
</Form.Item>
8070

@@ -89,27 +79,35 @@ const ImageModerationSettings: React.FC = () => {
8979
</span>
9080
}
9181
>
92-
<Select
93-
allowClear={true}
94-
placeholder="Select a moderation mode"
95-
>
82+
<Select allowClear={true} placeholder="Select a moderation mode">
9683
<Option value="basic">Basic Mode (Fastest, detects explicit content only)</Option>
9784
<Option value="strict">Strict Mode (Fast, blocks all buttocks)</Option>
9885
<Option value="full">Full Mode (Most accurate, uses Llama Vision)</Option>
9986
</Select>
10087
</Form.Item>
101-
88+
10289
<Form.Item>
103-
<div style={{
104-
backgroundColor: 'rgba(0, 0, 0, 0.1)',
105-
padding: '12px',
106-
borderRadius: '4px',
107-
marginBottom: '16px'
108-
}}>
90+
<div
91+
style={{
92+
backgroundColor: 'rgba(0, 0, 0, 0.1)',
93+
padding: '12px',
94+
borderRadius: '4px',
95+
marginBottom: '16px',
96+
}}
97+
>
10998
<h4 style={{ marginTop: 0 }}>Moderation Mode Details:</h4>
110-
<p><strong>Basic Mode:</strong> Only detects genitals, anus, and exposed breasts. Fastest processing (no Llama Vision). Best for high-volume applications.</p>
111-
<p><strong>Strict Mode:</strong> Includes all &quot;basic&quot; detection plus automatic blocking of all detected buttocks. Fast processing. Best for zero-tolerance platforms.</p>
112-
<p><strong>Full Mode (Default):</strong> Complete analysis with contextual evaluation. Slower due to Llama Vision, but most accurate. Reduces false positives.</p>
99+
<p>
100+
<strong>Basic Mode:</strong> Only detects genitals, anus, and exposed breasts. Fastest processing (no
101+
Llama Vision). Best for high-volume applications.
102+
</p>
103+
<p>
104+
<strong>Strict Mode:</strong> Includes all &quot;basic&quot; detection plus automatic blocking of all
105+
detected buttocks. Fast processing. Best for zero-tolerance platforms.
106+
</p>
107+
<p>
108+
<strong>Full Mode (Default):</strong> Complete analysis with contextual evaluation. Slower due to Llama
109+
Vision, but most accurate. Reduces false positives.
110+
</p>
113111
</div>
114112
</Form.Item>
115113

@@ -121,10 +119,7 @@ const ImageModerationSettings: React.FC = () => {
121119
<S.InputField placeholder="http://localhost:8000/moderate" />
122120
</Form.Item>
123121

124-
<Form.Item
125-
name="image_moderation_temp_dir"
126-
label="Temporary Directory"
127-
>
122+
<Form.Item name="image_moderation_temp_dir" label="Temporary Directory">
128123
<S.InputField placeholder="./data/moderation/temp" />
129124
</Form.Item>
130125

@@ -140,48 +135,43 @@ const ImageModerationSettings: React.FC = () => {
140135
}
141136
rules={[
142137
{ required: true, message: 'Please enter a threshold value' },
143-
{ type: 'number', min: 0, max: 1, message: 'Value must be between 0 and 1' }
138+
{ type: 'number', min: 0, max: 1, message: 'Value must be between 0 and 1' },
144139
]}
145140
>
146-
<InputNumber
147-
step={0.1}
148-
min={0}
149-
max={1}
150-
style={{ width: '100%' }}
151-
/>
141+
<S.InputNumberField step={0.1} min={0} max={1} style={{ width: '100%' }} />
152142
</Form.Item>
153143

154144
<Form.Item
155145
name="image_moderation_check_interval"
156146
label="Check Interval (seconds)"
157147
rules={[
158148
{ required: true, message: 'Please enter a check interval' },
159-
{ type: 'number', min: 1, message: 'Value must be at least 1' }
149+
{ type: 'number', min: 1, message: 'Value must be at least 1' },
160150
]}
161151
>
162-
<InputNumber min={1} style={{ width: '100%' }} />
152+
<S.InputNumberField min={1} style={{ width: '100%' }} />
163153
</Form.Item>
164154

165155
<Form.Item
166156
name="image_moderation_concurrency"
167157
label="Concurrency"
168158
rules={[
169159
{ required: true, message: 'Please enter a concurrency value' },
170-
{ type: 'number', min: 1, message: 'Value must be at least 1' }
160+
{ type: 'number', min: 1, message: 'Value must be at least 1' },
171161
]}
172162
>
173-
<InputNumber min={1} style={{ width: '100%' }} />
163+
<S.InputNumberField min={1} style={{ width: '100%' }} />
174164
</Form.Item>
175165

176166
<Form.Item
177167
name="image_moderation_timeout"
178168
label="Timeout (seconds)"
179169
rules={[
180170
{ required: true, message: 'Please enter a timeout value' },
181-
{ type: 'number', min: 1, message: 'Value must be at least 1' }
171+
{ type: 'number', min: 1, message: 'Value must be at least 1' },
182172
]}
183173
>
184-
<InputNumber min={1} style={{ width: '100%' }} />
174+
<S.InputNumberField min={1} style={{ width: '100%' }} />
185175
</Form.Item>
186176
</Form>
187177
</BaseSettingsForm>

‎src/components/settings/OllamaSettings.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React, { useEffect, useState } from 'react';
2-
import { Form, Input, InputNumber, Select, Tooltip } from 'antd';
2+
import { Form, Select, Tooltip } from 'antd';
33
import { QuestionCircleOutlined } from '@ant-design/icons';
44
import useGenericSettings from '@app/hooks/useGenericSettings';
55
import { SettingsGroupType } from '@app/types/settings.types';
66
import BaseSettingsForm from './BaseSettingsForm';
7-
import { InputField } from './Settings.styles';
7+
import { InputField, InputNumberField } from './Settings.styles';
88

99
const { Option } = Select;
1010

@@ -162,7 +162,7 @@ const OllamaSettings: React.FC = () => {
162162
{ type: 'number', min: 1, message: 'Value must be at least 1' }
163163
]}
164164
>
165-
<InputNumber min={1} style={{ width: '100%' }} />
165+
<InputNumberField min={1} style={{ width: '100%' }} />
166166
</Form.Item>
167167
</Form>
168168
</BaseSettingsForm>

‎src/components/settings/SettingsPage.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,6 @@ const SettingsWrapper = styled.div`
123123
124124
.ant-input, .ant-input-number, .ant-select-selector {
125125
background-color: var(--input-bg-color) !important;
126-
border: 1px solid var(--border-base-color) !important;
127126
}
128127
`;
129128

0 commit comments

Comments
 (0)