diff --git a/src/components/settings/ContentFilterSettings.tsx b/src/components/settings/ContentFilterSettings.tsx index 2e58cd92..d46cb16d 100644 --- a/src/components/settings/ContentFilterSettings.tsx +++ b/src/components/settings/ContentFilterSettings.tsx @@ -1,9 +1,10 @@ import React, { useEffect, useState } from 'react'; -import { Form, InputNumber, Switch, Select, Tooltip } from 'antd'; +import { Form, Switch, Select, Tooltip } from 'antd'; import { QuestionCircleOutlined } from '@ant-design/icons'; import useGenericSettings from '@app/hooks/useGenericSettings'; import { SettingsGroupType } from '@app/types/settings.types'; import BaseSettingsForm from './BaseSettingsForm'; +import { InputNumberField } from './Settings.styles'; const { Option } = Select; @@ -115,7 +116,7 @@ const ContentFilterSettings: React.FC = () => { { type: 'number', min: 100, message: 'Value must be at least 100' } ]} > - + { { type: 'number', min: 1, message: 'Value must be at least 1' } ]} > - + { const { @@ -58,7 +59,7 @@ const GeneralSettings: React.FC = () => { { pattern: /^\d+$/, message: 'Port must be a number' } ]} > - + { { required: true, message: 'Please enter the private key' } ]} > - } placeholder="Enter private key" /> @@ -92,7 +93,7 @@ const GeneralSettings: React.FC = () => { } > - } placeholder="Enter service tag" /> @@ -109,7 +110,7 @@ const GeneralSettings: React.FC = () => { } > - } placeholder="./data/stats.db" /> diff --git a/src/components/settings/ImageModerationSettings.tsx b/src/components/settings/ImageModerationSettings.tsx index 7bd2012f..3de2e57d 100644 --- a/src/components/settings/ImageModerationSettings.tsx +++ b/src/components/settings/ImageModerationSettings.tsx @@ -1,21 +1,15 @@ import React, { useEffect, useState } from 'react'; -import { Form, Input, InputNumber, Switch, Select, Tooltip } from 'antd'; +import { Form, Switch, Tooltip } from 'antd'; import { QuestionCircleOutlined } from '@ant-design/icons'; import useGenericSettings from '@app/hooks/useGenericSettings'; import { ImageModerationSettings as ImageModerationSettingsType, SettingsGroupType } from '@app/types/settings.types'; import BaseSettingsForm from './BaseSettingsForm'; - -const { Option } = Select; +import * as S from './Settings.styles'; +const { Option } = S.SelectField; const ImageModerationSettings: React.FC = () => { - const { - settings, - loading, - error, - fetchSettings, - updateSettings, - saveSettings, - } = useGenericSettings('image_moderation'); + const { settings, loading, error, fetchSettings, updateSettings, saveSettings } = + useGenericSettings('image_moderation'); const [form] = Form.useForm(); const [isUserEditing, setIsUserEditing] = useState(false); @@ -24,13 +18,13 @@ const ImageModerationSettings: React.FC = () => { useEffect(() => { if (settings && !isUserEditing) { console.log('ImageModerationSettings - Received settings:', settings); - + // The useGenericSettings hook now returns properly prefixed field names // so we can use the settings directly without transformation const settingsObj = settings as Record; - + console.log('ImageModerationSettings - Setting form values directly:', settingsObj); - + // Set form values directly since they're already properly prefixed form.setFieldsValue(settingsObj); console.log('ImageModerationSettings - Form values after set:', form.getFieldsValue()); @@ -70,11 +64,7 @@ const ImageModerationSettings: React.FC = () => { setIsUserEditing(false); }} > - + @@ -89,27 +79,35 @@ const ImageModerationSettings: React.FC = () => { } > - + - + -
+

Moderation Mode Details:

-

Basic Mode: Only detects genitals, anus, and exposed breasts. Fastest processing (no Llama Vision). Best for high-volume applications.

-

Strict Mode: Includes all "basic" detection plus automatic blocking of all detected buttocks. Fast processing. Best for zero-tolerance platforms.

-

Full Mode (Default): Complete analysis with contextual evaluation. Slower due to Llama Vision, but most accurate. Reduces false positives.

+

+ Basic Mode: Only detects genitals, anus, and exposed breasts. Fastest processing (no + Llama Vision). Best for high-volume applications. +

+

+ Strict Mode: Includes all "basic" detection plus automatic blocking of all + detected buttocks. Fast processing. Best for zero-tolerance platforms. +

+

+ Full Mode (Default): Complete analysis with contextual evaluation. Slower due to Llama + Vision, but most accurate. Reduces false positives. +

@@ -118,14 +116,11 @@ const ImageModerationSettings: React.FC = () => { label="API Endpoint" rules={[{ required: true, message: 'Please enter the API endpoint' }]} > - + - - + + { } rules={[ { required: true, message: 'Please enter a threshold value' }, - { type: 'number', min: 0, max: 1, message: 'Value must be between 0 and 1' } + { type: 'number', min: 0, max: 1, message: 'Value must be between 0 and 1' }, ]} > - + { label="Check Interval (seconds)" rules={[ { required: true, message: 'Please enter a check interval' }, - { type: 'number', min: 1, message: 'Value must be at least 1' } + { type: 'number', min: 1, message: 'Value must be at least 1' }, ]} > - + { label="Concurrency" rules={[ { required: true, message: 'Please enter a concurrency value' }, - { type: 'number', min: 1, message: 'Value must be at least 1' } + { type: 'number', min: 1, message: 'Value must be at least 1' }, ]} > - + { label="Timeout (seconds)" rules={[ { required: true, message: 'Please enter a timeout value' }, - { type: 'number', min: 1, message: 'Value must be at least 1' } + { type: 'number', min: 1, message: 'Value must be at least 1' }, ]} > - + diff --git a/src/components/settings/OllamaSettings.tsx b/src/components/settings/OllamaSettings.tsx index cc9f49bb..3c37515a 100644 --- a/src/components/settings/OllamaSettings.tsx +++ b/src/components/settings/OllamaSettings.tsx @@ -1,11 +1,12 @@ import React, { useEffect, useState } from 'react'; -import { Form, Input, InputNumber, Select, Tooltip } from 'antd'; +import { Form, Tooltip } from 'antd'; import { QuestionCircleOutlined } from '@ant-design/icons'; import useGenericSettings from '@app/hooks/useGenericSettings'; import { SettingsGroupType } from '@app/types/settings.types'; import BaseSettingsForm from './BaseSettingsForm'; +import { InputField, InputNumberField, SelectField } from './Settings.styles'; -const { Option } = Select; +const { Option } = SelectField; const OllamaSettings: React.FC = () => { const { @@ -113,7 +114,7 @@ const OllamaSettings: React.FC = () => { { type: 'url', message: 'Please enter a valid URL' } ]} > - + { { required: true, message: 'Please select an Ollama model' } ]} > - + { { type: 'number', min: 1, message: 'Value must be at least 1' } ]} > - + diff --git a/src/components/settings/RelayInfoSettings.tsx b/src/components/settings/RelayInfoSettings.tsx index fcfaaa71..19d617a1 100644 --- a/src/components/settings/RelayInfoSettings.tsx +++ b/src/components/settings/RelayInfoSettings.tsx @@ -1,23 +1,23 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import { Form, Input, Select, Tooltip } from 'antd'; -import { QuestionCircleOutlined, InfoCircleOutlined, UserOutlined, KeyOutlined } from '@ant-design/icons'; +import { + QuestionCircleOutlined, + InfoCircleOutlined, + UserOutlined, + KeyOutlined, + UploadOutlined, +} from '@ant-design/icons'; import useGenericSettings from '@app/hooks/useGenericSettings'; import { SettingsGroupType } from '@app/types/settings.types'; import BaseSettingsForm from './BaseSettingsForm'; - +import * as S from './Settings.styles'; +import { ComingSoonWrapper } from '@app/styles/themes/reusableComponentStyles'; const { Option } = Select; const { TextArea } = Input; const RelayInfoSettings: React.FC = () => { - const { - settings, - loading, - error, - fetchSettings, - updateSettings, - saveSettings, - } = useGenericSettings('relay_info'); - + const { settings, loading, error, fetchSettings, updateSettings, saveSettings } = useGenericSettings('relay_info'); + const [image, setImage] = useState(null); const [form] = Form.useForm(); // Update form values when settings change @@ -32,6 +32,11 @@ const RelayInfoSettings: React.FC = () => { updateSettings(changedValues); }; + // const onUploadIcon = (url: string) => { + // // use as onUploadIcon prop in Upload Component + // setImage(url); + // }; + // Common NIPs that relays might support const nipOptions = [ { value: 1, label: 'NIP-01: Basic protocol flow' }, @@ -64,12 +69,7 @@ const RelayInfoSettings: React.FC = () => { onSave={saveSettings} onReset={fetchSettings} > -
+ { } - rules={[ - { required: true, message: 'Please enter the relay name' } - ]} + rules={[{ required: true, message: 'Please enter the relay name' }]} > - } - placeholder="My Nostr Relay" - /> + } placeholder="My Nostr Relay" /> - + + + Relay Icon  + + + +  (Coming Soon) + + } + > + { + } + // > Upload Relay Icon} + /> + } + {image && ( + + + + )} + + { } > -