Merge pull request #66 from HORNET-Storage/fix/image-moderation-and-react-hooks

Fix/image moderation and react hooks

Author: ColbySerpa

src/components/auth/NostrExtensionCheck/NostrExtensionCheck.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { Alert, Card, Button, Space, Typography } from 'antd';
 import { ExclamationCircleOutlined, CheckCircleOutlined, ReloadOutlined } from '@ant-design/icons';
 import styled from 'styled-components';
@@ -109,7 +109,7 @@ export const NostrExtensionCheck: React.FC<NostrExtensionCheckProps> = ({ onExte
   const [hasExtension, setHasExtension] = useState(false);
   const [isChecking, setIsChecking] = useState(true);
 
-  const checkExtension = () => {
+  const checkExtension = useCallback(() => {
     setIsChecking(true);
 
     // Check if window.nostr exists
@@ -120,7 +120,7 @@ export const NostrExtensionCheck: React.FC<NostrExtensionCheckProps> = ({ onExte
     if (extensionExists && onExtensionReady) {
       onExtensionReady();
     }
-  };
+  }, [onExtensionReady]);
 
   useEffect(() => {
     // Initial check
@@ -135,7 +135,7 @@ export const NostrExtensionCheck: React.FC<NostrExtensionCheckProps> = ({ onExte
     }, 1000);
 
     return () => clearInterval(pollInterval);
-  }, [hasExtension, onExtensionReady]);
+  }, [hasExtension, checkExtension]);
 
   const extensions = [
     {

src/components/settings/panels/ImageModerationPanel.tsx

@@ -113,7 +113,7 @@ const ImageModerationPanel: React.FC = () => {
           >
             <Option value="basic">Basic Mode (Fastest, detects explicit content only)</Option>
             <Option value="strict">Strict Mode (Fast, blocks all buttocks)</Option>
-            <Option value="full">Full Mode (Most accurate, uses Llama Vision)</Option>
+            <Option value="full">Full Mode (Most accurate, uses AI vision analysis)</Option>
           </Select>
         </Form.Item>
 
@@ -128,9 +128,9 @@ const ImageModerationPanel: React.FC = () => {
             marginBottom: '16px'
           }}>
             <h4 style={{ marginTop: 0, color: 'rgba(82, 196, 255, 1)' }}>Moderation Mode Details:</h4>
-            <p><strong>Basic Mode:</strong> Only detects genitals, anus, and exposed breasts. Fastest processing (no Llama Vision used). Best for initial screening in high-volume applications.</p>
-            <p><strong>Strict Mode:</strong> Includes all &quot;basic&quot; detection plus automatic blocking of all detected buttocks with confidence ≥ 0.4. Fast processing (no Llama Vision used). Best for zero-tolerance platforms.</p>
-            <p><strong>Full Mode (Default):</strong> Complete analysis with nuanced context evaluation. Slower due to Llama Vision processing, but most accurate and reduces false positives.</p>
+            <p><strong>Basic Mode:</strong> Only detects genitals, anus, and exposed breasts. Fastest processing (no AI vision analysis). Best for initial screening in high-volume applications.</p>
+            <p><strong>Strict Mode:</strong> Includes all &quot;basic&quot; detection plus automatic blocking of all detected buttocks with confidence ≥ 0.4. Fast processing (no AI vision analysis). Best for zero-tolerance platforms.</p>
+            <p><strong>Full Mode (Default):</strong> Complete analysis with nuanced context evaluation. Slower due to AI vision model processing, but most accurate and reduces false positives.</p>
           </div>
         </Form.Item>
 

src/hooks/useGenericSettings.ts

@@ -49,12 +49,12 @@ const extractSettingsForGroup = (settings: any, groupName: string) => {
     // Map backend fields to prefixed ones that the form expects
     // Based on the actual backend response, backend sends both prefixed and unprefixed versions
     const imageModerationMappings: Record<string, string[]> = {
-      'image_moderation_api': ['image_moderation_api'],
+      'image_moderation_api': ['image_moderation_api', 'api'],
       'image_moderation_check_interval': ['image_moderation_check_interval_seconds', 'check_interval_seconds'],
       'image_moderation_concurrency': ['image_moderation_concurrency', 'concurrency'],
       'image_moderation_enabled': ['image_moderation_enabled', 'enabled'],
       'image_moderation_mode': ['image_moderation_mode', 'mode'],
-      'image_moderation_temp_dir': ['image_moderation_temp_dir'],
+      'image_moderation_temp_dir': ['image_moderation_temp_dir', 'temp_dir'],
       'image_moderation_threshold': ['image_moderation_threshold', 'threshold'],
       'image_moderation_timeout': ['image_moderation_timeout_seconds', 'timeout_seconds']
     };
@@ -535,7 +535,9 @@ const useGenericSettings = <T extends SettingsGroupName>(
           if (groupName === 'content_filter' && key === 'full_text_kinds') {
             prefixedSettings[key] = value;
           } else {
-            prefixedSettings[`${prefix}${key}`] = value;
+            // Skip prefixing if key already has the prefix to avoid double-prefixing
+            const prefixedKey = key.startsWith(prefix) ? key : `${prefix}${key}`;
+            prefixedSettings[prefixedKey] = value;
           }
         });