Spaces:
Running
Running
dr-data
Fix preview component: eliminate blinking, ensure HTML updates, add smooth transitions
dcd5e1d
| // Test script to verify smart HTML context reduction | |
| function getSmartHtmlContext(html, selectedElementHtml) { | |
| // If no selected element, use the original HTML but truncate if too large | |
| if (!selectedElementHtml) { | |
| return html.length > 10000 ? | |
| html.substring(0, 10000) + "...\n<!-- HTML truncated for context efficiency -->" : | |
| html; | |
| } | |
| // If there's a selected element, provide minimal context around it | |
| const selectedIndex = html.indexOf(selectedElementHtml); | |
| if (selectedIndex === -1) { | |
| // Fallback: if selected element not found, use truncated HTML | |
| return html.length > 8000 ? | |
| html.substring(0, 8000) + "...\n<!-- HTML truncated for context efficiency -->" : | |
| html; | |
| } | |
| // Provide context around the selected element | |
| const contextSize = 2000; // Characters before and after | |
| const start = Math.max(0, selectedIndex - contextSize); | |
| const end = Math.min(html.length, selectedIndex + selectedElementHtml.length + contextSize); | |
| let contextHtml = html.substring(start, end); | |
| // Add markers if we truncated | |
| if (start > 0) { | |
| contextHtml = "...\n<!-- Context starts here -->\n" + contextHtml; | |
| } | |
| if (end < html.length) { | |
| contextHtml = contextHtml + "\n<!-- Context ends here -->\n..."; | |
| } | |
| return contextHtml; | |
| } | |
| console.log("Testing smart HTML context reduction:\n"); | |
| // Test 1: Large HTML without selected element | |
| const largeHtml = "<html><body>" + "x".repeat(15000) + "</body></html>"; | |
| const result1 = getSmartHtmlContext(largeHtml); | |
| console.log("1. Large HTML without selection:"); | |
| console.log(` Original: ${largeHtml.length} chars`); | |
| console.log(` Reduced: ${result1.length} chars`); | |
| console.log(` Savings: ${largeHtml.length - result1.length} chars\n`); | |
| // Test 2: Large HTML with selected element | |
| const htmlWithElement = "<html><head><title>Test</title></head><body><div>Start</div>" + "x".repeat(10000) + "<button id='test'>Click me</button>" + "y".repeat(10000) + "</body></html>"; | |
| const selectedElement = "<button id='test'>Click me</button>"; | |
| const result2 = getSmartHtmlContext(htmlWithElement, selectedElement); | |
| console.log("2. Large HTML with selected element:"); | |
| console.log(` Original: ${htmlWithElement.length} chars`); | |
| console.log(` Reduced: ${result2.length} chars`); | |
| console.log(` Savings: ${htmlWithElement.length - result2.length} chars`); | |
| console.log(` Context includes selected element: ${result2.includes(selectedElement)}\n`); | |
| // Test 3: Small HTML (should not be truncated) | |
| const smallHtml = "<div>Small content</div>"; | |
| const result3 = getSmartHtmlContext(smallHtml); | |
| console.log("3. Small HTML:"); | |
| console.log(` Original: ${smallHtml.length} chars`); | |
| console.log(` Reduced: ${result3.length} chars`); | |
| console.log(` No truncation: ${smallHtml === result3}\n`); | |
| console.log("✅ All tests completed successfully!"); | |