Add image proxy endpoint to fix broken image links

- Added /api/images/<conversation_id>/<filename> endpoint to proxy images from blob storage
- Backend now saves proxy URLs instead of direct blob URLs
- Frontend converts old blob URLs to proxy URLs when loading conversations
- Fixes 403 Forbidden errors when accessing generated images

Author: hunterjam

content-gen/src/app.py

@@ -315,11 +315,17 @@ async def generate():
             try:
                 blob_service = await get_blob_service()
                 if response.get("image_base64"):
-                    image_url = await blob_service.save_generated_image(
+                    blob_url = await blob_service.save_generated_image(
                         conversation_id=conversation_id,
                         image_base64=response["image_base64"]
                     )
-                    response["image_url"] = image_url
+                    # Convert blob URL to proxy URL for frontend access
+                    # blob_url format: https://account.blob.core.windows.net/container/conv_id/filename.png
+                    # proxy URL format: /api/images/conv_id/filename.png
+                    if blob_url:
+                        parts = blob_url.split("/")
+                        filename = parts[-1]  # e.g., "20251202222126.png"
+                        response["image_url"] = f"/api/images/{conversation_id}/{filename}"
             except Exception as e:
                 logger.warning(f"Failed to save image to blob storage: {e}")
 
@@ -342,6 +348,8 @@ async def generate():
                 )
 
                 # Save the full generated content for restoration
+                # Note: image_base64 is NOT saved to CosmosDB as it exceeds document size limits
+                # Images will only persist if blob storage is working
                 generated_content_to_save = {
                     "text_content": response.get("text_content"),
                     "image_url": response.get("image_url"),
@@ -376,6 +384,40 @@ async def generate():
     )
 
 
+# ==================== Image Proxy Endpoint ====================
+
+@app.route("/api/images/<conversation_id>/<filename>", methods=["GET"])
+async def proxy_generated_image(conversation_id: str, filename: str):
+    """
+    Proxy generated images from blob storage.
+    This allows the frontend to access images without exposing blob storage credentials.
+    """
+    try:
+        blob_service = await get_blob_service()
+        await blob_service.initialize()
+        
+        blob_name = f"{conversation_id}/{filename}"
+        blob_client = blob_service._generated_images_container.get_blob_client(blob_name)
+        
+        # Download the blob
+        download = await blob_client.download_blob()
+        image_data = await download.readall()
+        
+        # Determine content type from filename
+        content_type = "image/png" if filename.endswith(".png") else "image/jpeg"
+        
+        return Response(
+            image_data,
+            mimetype=content_type,
+            headers={
+                "Cache-Control": "public, max-age=86400",  # Cache for 24 hours
+            }
+        )
+    except Exception as e:
+        logger.exception(f"Error proxying image: {e}")
+        return jsonify({"error": "Image not found"}), 404
+
+
 # ==================== Product Endpoints ====================
 
 @app.route("/api/products", methods=["GET"])

content-gen/src/frontend/src/App.tsx

@@ -66,15 +66,29 @@ function App() {
             }
           }
 
+          // Build image URL: convert old blob URLs to proxy URLs, or use existing proxy URL
+          let imageUrl: string | undefined = gc.image_url;
+          if (imageUrl && imageUrl.includes('blob.core.windows.net')) {
+            // Convert old blob URL to proxy URL
+            // blob URL format: https://account.blob.core.windows.net/container/conv_id/filename.png
+            const parts = imageUrl.split('/');
+            const filename = parts[parts.length - 1];
+            const convId = parts[parts.length - 2];
+            imageUrl = `/api/images/${convId}/${filename}`;
+          }
+          if (!imageUrl && gc.image_base64) {
+            imageUrl = `data:image/png;base64,${gc.image_base64}`;
+          }
+          
           const restoredContent: GeneratedContent = {
             text_content: typeof textContent === 'object' && textContent ? {
               headline: textContent?.headline,
               body: textContent?.body,
               cta_text: textContent?.cta,
               tagline: textContent?.tagline,
             } : undefined,
-            image_content: (gc.image_url || gc.image_prompt) ? {
-              image_url: gc.image_url,
+            image_content: (imageUrl || gc.image_prompt) ? {
+              image_url: imageUrl,
               prompt_used: gc.image_prompt,
               alt_text: gc.image_revised_prompt || 'Generated marketing image',
             } : undefined,