Update app.py

app.py

@@ -19,34 +19,52 @@ with open('styles.css', 'r', encoding='utf-8') as file:
 with open('scripts.js', 'r', encoding='utf-8') as file:
     scripts = """
         async () => {
-        function waitForElementById(id, callback) {
-            const element = document.getElementById(id);
-            if (element) {
-                callback(element);
-                return;
-            }
-
-            const observer = new MutationObserver((mutationsList, observer) => {
-                for (let mutation of mutationsList) {
-                    if (mutation.type === 'childList') {
-                const element = document.getElementById(id);
-                        if (element) {
-                            callback(element);
-                            observer.disconnect();
-                            return;
+            const handleCheatsheetsJsonChange = (root_element) => {
+                %s
+            };
+        
+            function observeCheatsheetsJson() {
+                const cheatsheetsJsonElement = document.getElementById('cheatsheets_json');
+            
+                if (cheatsheetsJsonElement) {
+                    const observer = new MutationObserver((mutationsList) => {
+                        for (const mutation of mutationsList) {
+                            if (mutation.type === 'childList' || mutation.type === 'characterData') {
+                                handleCheatsheetsJsonChange();
+                            }
                         }
-                    }
+                    });
+            
+                    observer.observe(cheatsheetsJsonElement, {
+                        childList: true,
+                        characterData: true,
+                        subtree: true,
+                    });
+            
+                    handleCheatsheetsJsonChange();
+                } else {
+                    const observer = new MutationObserver((mutationsList, observer) => {
+                        for (const mutation of mutationsList) {
+                            if (mutation.type === 'childList') {
+                                const cheatsheetsJsonElement = document.getElementById('cheatsheets_json');
+                                if (cheatsheetsJsonElement) {
+                                    observer.disconnect();
+                                    observeCheatsheetsJson();
+                                }
+                            }
+                        }
+                    });
+            
+                    observer.observe(document.body, {
+                        childList: true,
+                        subtree: true,
+                    });
                 }
-            });
-
-                observer.observe(document.body, { childList: true, subtree: true });
             }
-
-            waitForElementById('cheatsheets_json', (root_element) => {
-                %s
-            });
             
-            }
+            observeCheatsheetsJson();
+            
+        }
         """ % (file.read())
 
 @tool
@@ -56,10 +74,6 @@ def json_string_to_poster(json_string:str)-> str:
         json_string: stringified json data
     """
 
-    #html_template = cheatsheet_template.replace('%cheatsheet%', json_string)
-
-    #return html_template
-
     return f"""
         <div id="root"></div>
         <div id="cheatsheets_json" style="display: none;">{repair_json(json_string)}</div>