fix fix fi x fix

frontend/src/pages/account/ContentSettingsPage.tsx

@@ -49,6 +49,17 @@ interface ContentGenerationSettings {
   defaultLength: string;
 }
 
+// AI Model Config from API
+interface AIModelConfig {
+  model_name: string;
+  display_name: string;
+  model_type: string;
+  provider: string;
+  valid_sizes?: string[];
+  quality_tier?: string;
+  credits_per_image?: number;
+}
+
 // Map user-friendly quality to internal service/model configuration
 const QUALITY_TO_CONFIG: Record<string, { service: 'openai' | 'runware'; model: string }> = {
   standard: { service: 'openai', model: 'dall-e-2' },
@@ -63,8 +74,24 @@ const getQualityFromConfig = (service?: string, model?: string): 'standard' | 'p
   return 'standard';
 };
 
-// Get available image sizes based on provider and model
-const getImageSizes = (provider: string, model: string) => {
+
+// Get available image sizes based on provider and model (from API or fallback)
+const getImageSizes = (provider: string, model: string, imageModels: AIModelConfig[]) => {
+  // First, try to find the model in the fetched models
+  const modelConfig = imageModels.find(m => 
+    m.model_name === model || 
+    (m.provider === provider && m.model_name.includes(model))
+  );
+  
+  // If found and has valid_sizes, use them
+  if (modelConfig?.valid_sizes && modelConfig.valid_sizes.length > 0) {
+    return modelConfig.valid_sizes.map(size => ({
+      value: size,
+      label: `${size.replace('x', '×')} pixels`
+    }));
+  }
+  
+  // Fallback to hardcoded sizes for backward compatibility
   if (provider === 'runware') {
     return [
       { value: '1280x832', label: '1280×832 pixels' },
@@ -101,6 +128,9 @@ export default function ContentSettingsPage() {
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   
+  // Image Models from API - for dynamic size options
+  const [imageModels, setImageModels] = useState<AIModelConfig[]>([]);
+  
   // Content Generation Settings
   const [contentSettings, setContentSettings] = useState<ContentGenerationSettings>({
     appendToPrompt: '',
@@ -141,20 +171,21 @@ export default function ContentSettingsPage() {
     };
   }, [imageQuality]);
 
-  // Get available sizes for current quality
+  // Get available sizes for current quality (uses imageModels from API)
   const availableSizes = getImageSizes(
     getCurrentConfig().service,
-    getCurrentConfig().model
+    getCurrentConfig().model,
+    imageModels
   );
 
   useEffect(() => {
     loadSettings();
   }, []);
 
-  // Update image sizes when quality changes
+  // Update image sizes when quality changes or imageModels are loaded
   useEffect(() => {
     const config = getCurrentConfig();
-    const sizes = getImageSizes(config.service, config.model);
+    const sizes = getImageSizes(config.service, config.model, imageModels);
     const defaultSize = sizes.length > 0 ? sizes[0].value : '1024x1024';
     
     const validSizes = sizes.map(s => s.value);
@@ -178,12 +209,24 @@ export default function ContentSettingsPage() {
         model: config.model,
       }));
     }
-  }, [imageQuality, getCurrentConfig]);
+  }, [imageQuality, getCurrentConfig, imageModels]);
 
   const loadSettings = async () => {
     try {
       setLoading(true);
       
+      // Load available image models from API (for dynamic sizes)
+      try {
+        const modelsResponse = await fetchAPI('/v1/billing/models/?type=image');
+        if (modelsResponse?.data) {
+          setImageModels(modelsResponse.data);
+        } else if (Array.isArray(modelsResponse)) {
+          setImageModels(modelsResponse);
+        }
+      } catch (err) {
+        console.log('Image models not available, using hardcoded sizes');
+      }
+      
       // Load image generation settings
       const imageData = await fetchAPI('/v1/system/settings/integrations/image_generation/');
       if (imageData) {