Feat input fidelity (#20)

* feat: add input fidelity parameter for image editing

* fix: update import statement for CorsRule in AzureBlobStorageService

* fix: clear existing CORS rules before setting new ones in AzureBlobStorageService

* feat: add image dimensions to metadata and enhance image handling in AzureBlobStorageService

Author: alisoliman

backend/api/endpoints/images.py

@@ -213,6 +213,8 @@ async def edit_image(request: ImageEditRequest):
                 params["output_format"] = request.output_format
             if request.output_format in ["webp", "jpeg"] and request.output_compression != 100:
                 params["output_compression"] = request.output_compression
+            if request.input_fidelity and request.input_fidelity != "low":
+                params["input_fidelity"] = request.input_fidelity
             if request.user:
                 params["user"] = request.user
 
@@ -268,11 +270,24 @@ async def edit_image_upload(
     size: str = Form("auto"),
     quality: str = Form("auto"),
     output_format: str = Form("png"),
+    input_fidelity: str = Form("low"),
     image: List[UploadFile] = File(...),
     mask: Optional[UploadFile] = File(None)
 ):
-    """Edit input images uploaded via multipart form data"""
+    """Edit input images uploaded via multipart form data
+
+    Supports input_fidelity parameter for gpt-image-1:
+    - 'low' (default): Standard fidelity, faster processing
+    - 'high': Better reproduction of input image features, additional cost (~$0.04-$0.06 per image)
+    """
     try:
+        # Validate input_fidelity parameter
+        if input_fidelity not in ["low", "high"]:
+            raise HTTPException(
+                status_code=400,
+                detail="input_fidelity must be either 'low' or 'high'"
+            )
+
         # Validate file size for all images
         max_file_size_mb = settings.GPT_IMAGE_MAX_FILE_SIZE_MB
         temp_files = []
@@ -366,6 +381,8 @@ async def edit_image_upload(
             # Add quality parameter for gpt-image-1
             if model == "gpt-image-1":
                 params["quality"] = quality
+                if input_fidelity and input_fidelity != "low":
+                    params["input_fidelity"] = input_fidelity
                 # Note: output_format is not supported for image editing in the OpenAI API
                 # Keeping this commented to document the limitation
                 # if output_format != "png":
@@ -526,6 +543,10 @@ async def save_generated_images(
                     img_format = img.format or "PNG"
                     has_transparency = img.mode == 'RGBA' and 'A' in img.getbands()
 
+                    # Add width and height to metadata
+                    metadata["width"] = str(img.width)
+                    metadata["height"] = str(img.height)
+
                     if has_transparency:
                         metadata["has_transparency"] = "true"
                         # Ensure PNG format for transparent images
@@ -580,9 +601,14 @@ async def save_generated_images(
                     "Content-Type", "image/png")
                 ext = content_type.split("/")[-1]
 
-                # Check if image has transparency using PIL
+                # Check if image has transparency using PIL and get dimensions
                 with Image.open(img_file) as img:
                     has_transparency = img.mode == 'RGBA' and 'A' in img.getbands()
+
+                    # Add width and height to metadata
+                    metadata["width"] = str(img.width)
+                    metadata["height"] = str(img.height)
+
                     if has_transparency:
                         metadata["has_transparency"] = "true"
 

backend/core/azure_storage.py

@@ -1,5 +1,6 @@
 import os
 import uuid
+import logging
 from typing import Dict, BinaryIO, Optional, Union, List, Tuple
 from fastapi import UploadFile
 from azure.storage.blob import BlobServiceClient, ContentSettings
@@ -8,6 +9,8 @@
 
 from backend.core.config import settings
 
+logger = logging.getLogger(__name__)
+
 
 class AzureBlobStorageService:
     """Service for handling Azure Blob Storage operations"""
@@ -47,9 +50,18 @@ def _configure_cors(self) -> None:
         from frontend domains
         """
         try:
-            from azure.storage.blob._models import CorsRule
+            from azure.storage.blob import CorsRule
 
-            # Define CORS rules
+            # First, clear any existing CORS rules to avoid conflicts
+            try:
+                print("Clearing existing CORS rules...")
+                self.blob_service_client.set_service_properties(cors=[])
+                print("Existing CORS rules cleared successfully")
+            except Exception as clear_error:
+                print(
+                    f"Warning: Could not clear existing CORS rules: {clear_error}")
+
+            # Define CORS rules with individual origins (not comma-separated)
             cors_rules = [
                 CorsRule(
                     allowed_origins=[
@@ -74,16 +86,21 @@ def _configure_cors(self) -> None:
                 )
             ]
 
+            print(
+                f"Setting CORS rules with {len(cors_rules[0].allowed_origins)} origins...")
+            print(f"Origins: {cors_rules[0].allowed_origins}")
+
             # Set CORS rules
-            self.blob_service_client.set_service_properties(
-                cors=cors_rules
-            )
+            self.blob_service_client.set_service_properties(cors=cors_rules)
 
             print("Successfully configured CORS for Azure Blob Storage")
 
         except Exception as e:
             print(
                 f"Warning: Could not configure CORS for Azure Blob Storage: {e}")
+            # Print more details for debugging
+            import traceback
+            print(f"Full error traceback: {traceback.format_exc()}")
             # Don't fail if CORS configuration fails, as it might be due to permissions
 
     def list_blobs(self, container_name: str, prefix: Optional[str] = None,
@@ -365,6 +382,21 @@ async def upload_asset(self, file: UploadFile, asset_type: str = "image",
 
             # Upload the file
             file_content = await file.read()
+
+            # For images, add width and height to metadata if not already present
+            if asset_type == "image" and "width" not in upload_metadata:
+                try:
+                    from PIL import Image
+                    import io
+
+                    # Get image dimensions using PIL
+                    with Image.open(io.BytesIO(file_content)) as img:
+                        upload_metadata["width"] = str(img.width)
+                        upload_metadata["height"] = str(img.height)
+                except Exception as e:
+                    # If we can't get dimensions, log but continue
+                    logger.warning(f"Could not get image dimensions: {str(e)}")
+
             blob_client.upload_blob(
                 data=file_content,
                 content_settings=content_settings,

backend/core/gpt_image.py

@@ -188,6 +188,7 @@ def edit_image(self, **kwargs):
             n = kwargs.get("n", 1)
             size = kwargs.get("size", "auto")
             quality = kwargs.get("quality", "auto")
+            input_fidelity = kwargs.get("input_fidelity", "low")
 
             # Azure OpenAI requires REST API for image edits
             if self.provider == "azure":
@@ -235,15 +236,19 @@ def edit_image(self, **kwargs):
                 if quality != "auto":
                     data["quality"] = quality
 
+                # Add input_fidelity if not default
+                if input_fidelity != "low":
+                    data["input_fidelity"] = input_fidelity
+
                 # Add any other supported parameters (excluding image/mask which are in files)
                 for key, value in kwargs.items():
-                    if key not in ["prompt", "image", "mask", "n", "size", "quality", "model"] and value is not None:
+                    if key not in ["prompt", "image", "mask", "n", "size", "quality", "input_fidelity", "model"] and value is not None:
                         data[key] = value
 
                 logger.info(
                     f"Editing image with Azure REST API, deployment: {self.deployment_name}, "
                     f"{'multiple' if isinstance(image, list) else 'single'} image(s), "
-                    f"quality: {quality}, size: {size}"
+                    f"quality: {quality}, size: {size}, input_fidelity: {input_fidelity}"
                 )
 
                 # Send the request
@@ -265,7 +270,8 @@ def edit_image(self, **kwargs):
                 logger.info(
                     f"Editing image with OpenAI SDK, model {model}, "
                     f"{len(kwargs.get('image', [])) if isinstance(kwargs.get('image', []), list) else '1'} "
-                    f"reference image(s), quality: {kwargs.get('quality', 'auto')}, size: {size}"
+                    f"reference image(s), quality: {kwargs.get('quality', 'auto')}, size: {size}, "
+                    f"input_fidelity: {input_fidelity}"
                 )
 
                 # Call the OpenAI API to edit the image

backend/models/images.py

@@ -93,6 +93,17 @@ class ImageEditRequest(ImageGenerationRequest):
                                                     "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
                                                 ])
 
+    # gpt-image-1 specific edit parameters:
+    input_fidelity: Optional[str] = Field("low",
+                                          description="Input fidelity setting for image editing: 'low' (default, faster), 'high' (better reproduction of input image features, additional cost). Only available for image editing operations.",
+                                          examples=["low", "high"])
+
+    @validator('input_fidelity')
+    def validate_input_fidelity(cls, v):
+        if v is not None and v not in ["low", "high"]:
+            raise ValueError("input_fidelity must be either 'low' or 'high'")
+        return v
+
 
 class InputTokensDetails(BaseModel):
     """Details about input tokens for image generation"""

frontend/app/edit-image/components/GenerateForm.tsx

@@ -31,6 +31,7 @@ export default function GenerateForm({
   const [quality, setQuality] = useState('auto');
   const [size] = useState('auto');
   const [outputFormat, setOutputFormat] = useState('png');
+  const [inputFidelity, setInputFidelity] = useState('low');
   const [showPromptIdeas, setShowPromptIdeas] = useState(false);
 
   // Create the debug mask URL on component mount
@@ -230,6 +231,7 @@ export default function GenerateForm({
           formData.append('quality', quality);
           formData.append('size', size);
           formData.append('output_format', outputFormat);
+          formData.append('input_fidelity', inputFidelity);
 
           // Submit the form data
           await onSubmit(formData);
@@ -319,7 +321,7 @@ export default function GenerateForm({
         </div>
 
         <div className="flex items-center gap-3 mt-4">
-          <div className="grid grid-cols-2 gap-3 flex-1">
+          <div className="grid grid-cols-3 gap-3 flex-1">
             <div>
               <Label className="text-sm font-medium mb-1.5 block">
                 Image Quality
@@ -358,6 +360,24 @@ export default function GenerateForm({
                 </SelectContent>
               </Select>
             </div>
+            
+            <div>
+              <Label className="text-sm font-medium mb-1.5 block">
+                Input Fidelity
+              </Label>
+              <Select 
+                value={inputFidelity} 
+                onValueChange={setInputFidelity}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Select fidelity" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="low">Low</SelectItem>
+                  <SelectItem value="high">High</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
           </div>
 
           <Button 

frontend/app/new-video/page.tsx

@@ -167,7 +167,7 @@ function NewVideoPageContent() {
       setIsLoadingMore(false);
       setIsRefreshing(false);
     }
-  }, [limit, offset, folderParam, videos.length]);
+  }, [limit, offset, folderParam, videos, loading]);
 
   // Register for upload completion notifications
   useEffect(() => {

frontend/components/ImageCreationContainer.tsx

@@ -32,6 +32,7 @@ interface ImageGenerationSettings {
   background: string;
   outputFormat: string;
   quality: string;
+  inputFidelity: string;
   sourceImages?: File[];
   brandsList?: string[];
 }
@@ -181,7 +182,8 @@ export function ImageCreationContainer({ className = "", onImagesSaved }: ImageC
           generationPrompt, // Use protected prompt for generation
           newSettings.variations, // Number of variations from dropdown
           newSettings.imageSize, // Use selected size
-          newSettings.quality // Quality parameter
+          newSettings.quality, // Quality parameter
+          newSettings.inputFidelity // Input fidelity parameter
         );
 
         // Update the loading toast to success

frontend/components/ImageDetailView.tsx

@@ -516,6 +516,8 @@ export function ImageDetailView({
                     ref={imageRef}
                     src={image.src}
                     alt={image.title || image.name}
+                    width={image.originalItem?.metadata?.width ? parseInt(image.originalItem.metadata.width) : image.width || 1024}
+                    height={image.originalItem?.metadata?.height ? parseInt(image.originalItem.metadata.height) : image.height || 1024}
                     className={`max-h-full max-w-full object-contain rounded-lg ${image.originalItem?.metadata?.has_transparency === "true" ? 'z-10' : ''}`}
                     onLoad={() => setIsLoading(false)}
                     onError={() => {