Update app.py

app.py

@@ -132,37 +132,56 @@ function simulateButtonPress() {
     console.log('Button Pressed!');
 }
 
-// Function to observe image changes
-function observeImageChanges() {
-    // Select all images with the 'ImgToMonitor' class
-    // const images = document.querySelectorAll('.svelte-1pijsyv');
-    const images = document.querySelectorAll('.ImgToMonitor');
-    
-    // Create a MutationObserver to watch for changes in the image src
-    const observer = new MutationObserver((mutationsList, observer) => {
-        mutationsList.forEach(mutation => {
-            if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
-                // If the image src changes, simulate button press
-                console.log('Image changed!');
-                simulateButtonPress();
-            }
+// Function to monitor image src changes
+function monitorImageSrcChanges() {
+  // Create a MutationObserver instance
+  const observer = new MutationObserver((mutationsList, observer) => {
+    // Loop through all mutations
+    mutationsList.forEach(mutation => {
+      // Check if any new image tags were added
+      if (mutation.type === 'childList') {
+        mutation.addedNodes.forEach(node => {
+          if (node.nodeName === 'IMG') {
+            // New image added, monitor its src
+            observeImageSrc(node);
+          }
         });
+      }
+      // Check if an image src attribute has changed
+      if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
+        console.log('Image src changed:', mutation.target.src);
+      }
     });
-    
-    // Observer options: observe changes to attributes (like src)
-    const config = { attributes: true };
-
-    // Start observing each image
-    images.forEach(image => {
-        observer.observe(image, config);
+  });
+
+  // Options for the observer (what to monitor)
+  const config = { childList: true, attributes: true, subtree: true, attributeFilter: ['src'] };
+
+  // Start observing the document body (or any specific element)
+  observer.observe(document.body, config);
+
+  // Initial monitoring of images already in the DOM
+  document.querySelectorAll('img').forEach(img => {
+    observeImageSrc(img);
+  });
+
+  // Function to observe an image's src attribute changes
+  function observeImageSrc(img) {
+    const srcObserver = new MutationObserver(mutations => {
+      mutations.forEach(mutation => {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
+          console.log('Image src changed:', img.src);
+        }
+      });
     });
-}
-
-// Start observing
 
+    // Start observing src attribute changes of the image
+    srcObserver.observe(img, { attributes: true, attributeFilter: ['src'] });
+  }
+}
 
 window.addEventListener('load', () => {
-    observeImageChanges();
+    monitorImageSrcChanges();
     console.log("Yo");
 });