fix(nextjs): adds overlay to change icon color based on brightness and invert filters

servers/nextjs/app/api/presentation_to_pptx_model/route.ts

@@ -783,6 +783,72 @@ async function getElementAttributes(element: ElementHandle<Element>): Promise<El
       return undefined;
     }
 
+    function parseFilters(computedStyles: CSSStyleDeclaration) {
+      const filter = computedStyles.filter;
+      if (!filter || filter === 'none') {
+        return undefined;
+      }
+
+      const filters: {
+        invert?: number;
+        brightness?: number;
+        contrast?: number;
+        saturate?: number;
+        hueRotate?: number;
+        blur?: number;
+        grayscale?: number;
+        sepia?: number;
+        opacity?: number;
+      } = {};
+
+      // Parse filter functions
+      const filterFunctions = filter.match(/[a-zA-Z]+\([^)]*\)/g);
+      if (filterFunctions) {
+        filterFunctions.forEach(func => {
+          const match = func.match(/([a-zA-Z]+)\(([^)]*)\)/);
+          if (match) {
+            const filterType = match[1];
+            const value = parseFloat(match[2]);
+            
+            if (!isNaN(value)) {
+              switch (filterType) {
+                case 'invert':
+                  filters.invert = value;
+                  break;
+                case 'brightness':
+                  filters.brightness = value;
+                  break;
+                case 'contrast':
+                  filters.contrast = value;
+                  break;
+                case 'saturate':
+                  filters.saturate = value;
+                  break;
+                case 'hue-rotate':
+                  filters.hueRotate = value;
+                  break;
+                case 'blur':
+                  filters.blur = value;
+                  break;
+                case 'grayscale':
+                  filters.grayscale = value;
+                  break;
+                case 'sepia':
+                  filters.sepia = value;
+                  break;
+                case 'opacity':
+                  filters.opacity = value;
+                  break;
+              }
+            }
+          }
+        });
+      }
+
+      // Return undefined if no filters were parsed
+      return Object.keys(filters).length > 0 ? filters : undefined;
+    }
+
     function parseElementAttributes(el: Element) {
       const computedStyles = window.getComputedStyle(el);
 
@@ -817,6 +883,8 @@ async function getElementAttributes(element: ElementHandle<Element>): Promise<El
 
       const textWrap = computedStyles.whiteSpace !== 'nowrap';
 
+      const filters = parseFilters(computedStyles);
+
       return {
         tagName: el.tagName.toLowerCase(),
         id: el.id,
@@ -842,6 +910,7 @@ async function getElementAttributes(element: ElementHandle<Element>): Promise<El
         textWrap: textWrap,
         should_screenshot: false,
         element: undefined,
+        filters: filters,
       };
     }
 

servers/nextjs/types/element_attibutes.ts

@@ -61,6 +61,17 @@ export interface ElementAttributes {
   textWrap?: boolean;
   should_screenshot?: boolean;
   element?: ElementHandle<Element>;
+  filters?: {
+    invert?: number;
+    brightness?: number;
+    contrast?: number;
+    saturate?: number;
+    hueRotate?: number;
+    blur?: number;
+    grayscale?: number;
+    sepia?: number;
+    opacity?: number;
+  };
 }
 
 export interface SlideAttributesResult {

servers/nextjs/utils/pptx_models_utils.ts

@@ -218,11 +218,17 @@ function convertToPictureBox(element: ElementAttributes): PptxPictureBoxModel {
     path: element.imageSrc || ''
   };
 
+  // Set overlay to white if invert is 1 and brightness is 0
+  let overlay = element.overlay;
+  if (element.filters?.invert === 1 && element.filters?.brightness === 0) {
+    overlay = 'FFFFFF';
+  }
+
   return {
     position,
     margin: undefined,
     clip: element.clip ?? true,
-    overlay: element.overlay,
+    overlay,
     border_radius: element.borderRadius ? element.borderRadius.map(r => Math.round(r)) : undefined,
     shape: element.shape ? (element.shape as PptxBoxShapeEnum) : PptxBoxShapeEnum.RECTANGLE,
     object_fit: objectFit,