IMage genartion service and models revamp - #Migration Runs

frontend/src/pages/Sites/Settings.tsx

@@ -86,21 +86,26 @@ export default function SiteSettings() {
     image_type: 'realistic' as 'realistic' | 'artistic' | 'cartoon',
     max_in_article_images: 2,
     image_format: 'webp' as 'webp' | 'jpg' | 'png',
-    desktop_enabled: true,
-    mobile_enabled: true,
     featured_image_size: '1024x1024',
-    desktop_image_size: '1024x1024',
   });
   const [imageSettingsLoading, setImageSettingsLoading] = useState(false);
   const [imageSettingsSaving, setImageSettingsSaving] = useState(false);
   
   // Image quality to config mapping
+  // Updated to use new Runware models via API
   const QUALITY_TO_CONFIG: Record<string, { service: 'openai' | 'runware'; model: string }> = {
     standard: { service: 'openai', model: 'dall-e-2' },
     premium: { service: 'openai', model: 'dall-e-3' },
-    best: { service: 'runware', model: 'runware:97@1' },
+    best: { service: 'runware', model: 'runware:97@1' },  // Uses model-specific landscape size
   };
   
+  // Runware model choices with descriptions
+  const RUNWARE_MODEL_CHOICES = [
+    { value: 'runware:97@1', label: 'Hi Dream Full - Basic', description: 'Fast & affordable' },
+    { value: 'bria:10@1', label: 'Bria 3.2 - Quality', description: 'Commercial-safe, licensed data' },
+    { value: 'google:4@2', label: 'Nano Banana - Premium', description: 'Best quality, text rendering' },
+  ];
+  
   const getQualityFromConfig = (service?: string, model?: string): 'standard' | 'premium' | 'best' => {
     if (service === 'runware') return 'best';
     if (model === 'dall-e-3') return 'premium';
@@ -109,10 +114,11 @@ export default function SiteSettings() {
   
   const getImageSizes = (provider: string, model: string) => {
     if (provider === 'runware') {
+      // Model-specific sizes - featured uses landscape, in-article alternates
+      // Sizes shown are for featured image (landscape)
       return [
-        { value: '1280x832', label: '1280×832 pixels' },
-        { value: '1024x1024', label: '1024×1024 pixels' },
-        { value: '512x512', label: '512×512 pixels' },
+        { value: '1280x768', label: '1280×768 (Landscape)' },
+        { value: '1024x1024', label: '1024×1024 (Square)' },
       ];
     } else if (provider === 'openai') {
       if (model === 'dall-e-2') {
@@ -230,16 +236,14 @@ export default function SiteSettings() {
     
     const validSizes = sizes.map(s => s.value);
     const needsFeaturedUpdate = !validSizes.includes(imageSettings.featured_image_size);
-    const needsDesktopUpdate = !validSizes.includes(imageSettings.desktop_image_size);
     
-    if (needsFeaturedUpdate || needsDesktopUpdate) {
+    if (needsFeaturedUpdate) {
       setImageSettings(prev => ({
         ...prev,
         service: config.service,
         provider: config.service,
         model: config.model,
         featured_image_size: needsFeaturedUpdate ? defaultSize : prev.featured_image_size,
-        desktop_image_size: needsDesktopUpdate ? defaultSize : prev.desktop_image_size,
       }));
     } else {
       setImageSettings(prev => ({
@@ -438,10 +442,7 @@ export default function SiteSettings() {
           image_type: imageData.image_type || 'realistic',
           max_in_article_images: imageData.max_in_article_images || 2,
           image_format: imageData.image_format || 'webp',
-          desktop_enabled: imageData.desktop_enabled !== false,
-          mobile_enabled: imageData.mobile_enabled !== false,
           featured_image_size: imageData.featured_image_size || '1024x1024',
-          desktop_image_size: imageData.desktop_image_size || '1024x1024',
         });
       }
     } catch (error: any) {
@@ -464,10 +465,7 @@ export default function SiteSettings() {
         image_type: imageSettings.image_type,
         max_in_article_images: imageSettings.max_in_article_images,
         image_format: imageSettings.image_format,
-        desktop_enabled: imageSettings.desktop_enabled,
-        mobile_enabled: imageSettings.mobile_enabled,
         featured_image_size: imageSettings.featured_image_size,
-        desktop_image_size: imageSettings.desktop_image_size,
       };
       
       await fetchAPI('/v1/system/settings/integrations/image_generation/save/', {
@@ -1023,7 +1021,7 @@ export default function SiteSettings() {
                   <div className="p-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-gradient-to-r from-purple-500 to-brand-500 text-white">
                     <div className="flex items-center justify-between mb-3">
                       <div className="font-medium">Featured Image Size</div>
-                      <div className="text-xs bg-white/20 px-2 py-1 rounded">Always Enabled</div>
+                      <div className="text-xs bg-white/20 px-2 py-1 rounded">Landscape (Model-specific)</div>
                     </div>
                     <SelectDropdown
                       options={availableImageSizes}
@@ -1031,42 +1029,13 @@ export default function SiteSettings() {
                       onChange={(value) => setImageSettings({ ...imageSettings, featured_image_size: value })}
                       className="w-full [&_.igny8-select-styled]:bg-white/10 [&_.igny8-select-styled]:border-white/20 [&_.igny8-select-styled]:text-white"
                     />
+                    <p className="text-xs text-white/70 mt-2">
+                      In-article images alternate: Square (1024×1024) → Landscape → Square → Landscape
+                    </p>
                   </div>
                 </div>
 
-                {/* Row 3: Desktop & Mobile Images */}
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  <div className="p-4 rounded-lg border border-gray-200 dark:border-gray-700 space-y-3">
-                    <div className="flex items-center gap-3">
-                      <Checkbox
-                        checked={imageSettings.desktop_enabled}
-                        onChange={(checked) => setImageSettings({ ...imageSettings, desktop_enabled: checked })}
-                      />
-                      <Label className="font-medium text-gray-700 dark:text-gray-300">Desktop Images</Label>
-                    </div>
-                    {imageSettings.desktop_enabled && (
-                      <SelectDropdown
-                        options={availableImageSizes}
-                        value={imageSettings.desktop_image_size}
-                        onChange={(value) => setImageSettings({ ...imageSettings, desktop_image_size: value })}
-                        className="w-full"
-                      />
-                    )}
-                  </div>
-                  
-                  <div className="flex items-center gap-3 p-4 rounded-lg border border-gray-200 dark:border-gray-700">
-                    <Checkbox
-                      checked={imageSettings.mobile_enabled}
-                      onChange={(checked) => setImageSettings({ ...imageSettings, mobile_enabled: checked })}
-                    />
-                    <div>
-                      <Label className="font-medium text-gray-700 dark:text-gray-300">Mobile Images</Label>
-                      <div className="text-xs text-gray-500 dark:text-gray-400">512×512 pixels</div>
-                    </div>
-                  </div>
-                </div>
-
-                {/* Row 4: Max Images & Format */}
+                {/* Row 3: Max Images & Format */}
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                   <div>
                     <Label className="mb-2">Max In-Article Images</Label>
@@ -1076,12 +1045,14 @@ export default function SiteSettings() {
                         { value: '2', label: '2 Images' },
                         { value: '3', label: '3 Images' },
                         { value: '4', label: '4 Images' },
-                        { value: '5', label: '5 Images' },
                       ]}
                       value={String(imageSettings.max_in_article_images)}
                       onChange={(value) => setImageSettings({ ...imageSettings, max_in_article_images: parseInt(value) })}
                       className="w-full"
                     />
+                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                      Images 1 & 3: Square | Images 2 & 4: Landscape
+                    </p>
                   </div>
 
                   <div>