Spaces:
No application file
No application file
File size: 8,148 Bytes
1f8f99f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 |
# import asyncio
from pyppeteer import launch
from pyppeteer.errors import ElementHandleError
import gradio as gr
async def highlight_element(page, selector):
try:
element = await page.querySelector(selector)
if element:
await page.evaluate('element => element.style.backgroundColor = "yellow"', element)
styles = await page.evaluate('(element) => { const computedStyles = window.getComputedStyle(element); return Array.from(computedStyles).map(prop => `${prop}: ${computedStyles.getPropertyValue(prop)}`); }', element)
return styles
except ElementHandleError:
pass
return None
async def getStyles(page, selector, text_file):
try:
await page.waitForSelector(selector)
styles = await page.evaluate('''(selector) => {
const contentTypeIndex = {};
const childs = {};
let finalString = "";
function elementIndentifier(element) {
const tagName = element.tagName.toLowerCase();
// Check for different element types
if (tagName === 'p' || tagName[0] === 'h' || tagName === 'span' || tagName === 'div' || tagName === 'ul' || tagName === 'ol') {
// Text-based elements
return `Text Content = "${element.textContent}"`;
} else if (tagName === 'img' || tagName === 'audio' || tagName === 'video') {
// Image, audio or video elements
return `src = "${element.src}"`;
} else if (tagName === 'a' || tagName === 'link') {
// Link elements
return `href = "${element.href}"`;
} else if (tagName === 'input' || tagName === 'textarea' || tagName === 'select') {
// Form elements
return `value = "${element.value}"`;
} else if (tagName === 'table') {
// Table-related elements
// Example to retrieve cell content
const cellContent = Array.from(element.querySelectorAll('td, th')).map(cell => cell.innerHTML);
return `rows = "${element.rows}", "cellContent = "${cellContent.join(', ')}"`;
} else if (tagName === 'input' && (element.type === 'checkbox' || element.type === 'radio')) {
// Checkbox and Radio Button elements
return `checked = "${element.checked}"`;
}
}
function contentType(element) {
const tagName = element.tagName.toLowerCase();
// Check for different element types
if (tagName === 'p' || tagName[0] === 'h' || tagName === 'span' || tagName === 'div' || tagName === 'ul' || tagName === 'ol') {
return "text";
} else if (tagName === 'img') {
return "image";
} else if (tagName === 'audio') {
return "audio";
} else if (tagName === 'video') {
return "video";
} else if (tagName === 'a' || tagName === 'link') {
return "link";
} else if (tagName === 'input' || tagName === 'textarea' || tagName === 'select') {
return "form";
} else if (tagName === 'table') {
return "table";
} else if (tagName === 'input' && (element.type === 'checkbox' || element.type === 'radio')) {
// Checkbox and Radio Button elements
return "button";
}
}
function nameElems(element) {
for (let i = element.children.length - 1; i >= 0; i--) {
nameElems(element.children[i]);
}
if(element.children.length !== 1 && element.tagName.toLowerCase() !== "link"){
const s1 = element.children.length ? "container" : contentType(element);
contentTypeIndex[s1] ? contentTypeIndex[s1]++ : contentTypeIndex[s1] = 1;
const elemName = `${s1}${contentTypeIndex[s1]}`;
element.name = elemName;
}
if(element.children.length === 1){
element.name = element.children[0].name;
}
}
function postorderTraversal(element) {
// Recursively traverse child nodes in postorder
for (let i = element.children.length - 1; i >= 0; i--) {
postorderTraversal(element.children[i]);
}
// Process the current element
const s1 = element.children.length ? "container" : contentType(element);
if (element.children.length > 1) {
for (let i = element.children.length - 1; i >= 0; i--) {
childs[element.name] ? childs[element.name].push(element.children[i].name) : childs[element.name] = [element.children[i].name];
}
finalString = finalString + `${childs[element.name]} are nested inside a container. Lets name this container as ${element.name}. The computed styles of ${element.name} are:-\n`;
} else if (!element.children.length && element.tagName.toLowerCase() !== "link") {
finalString += `Lets name ${s1} with ${elementIndentifier(element)} as ${element.name}. The computed styles of ${element.name} are:-\n`;
}
if(element.children.length !== 1 && element.tagName.toLowerCase() !== "link"){
const computedStyles = getComputedStyle(element);
desired_properties = [
"background-color", "box-sizing", "clear", "color", "display",
"flex-direction", "float", "font-family", "font-size", "font-weight",
"height", "line-height", "margin-bottom", "margin-left", "margin-right",
"margin-top", "padding-bottom", "padding-left", "padding-right",
"padding-top", "text-align", "width"
];
finalString += `\"\"`
for (let i = 0; i < desired_properties.length; i++) {
const prop = desired_properties[i];
finalString += `\t${prop}: ${computedStyles.getPropertyValue(prop)}`;
if(prop !== "width"){
finalString += `\n`;
}
}
finalString += `\"\"\n\n`
}
}
const rootElement = document.querySelector(selector);
nameElems(rootElement);
postorderTraversal(rootElement);
return finalString;
}''', selector)
with open(text_file, 'w') as f:
f.write(styles)
except ElementHandleError:
pass
return None
async def highlightAndStyles(url, selector, franklinHTML):
browser = await launch(handleSIGINT=False, handleSIGTERM=False, handleSIGHUP=False)
page = await browser.newPage()
await page.goto(url)
text_file = "styles.txt"
image_file = "screenshot.png"
await getStyles(page, selector, text_file)
await highlight_element(page, selector)
await page.setViewport({"width": 3072, "height": 1920})
await page.screenshot({'path': image_file, 'fullPage': True})
await browser.close()
return image_file, text_file
# def run_script(url, selector):
# return await highlightAndStyles(url, selector)
# print("Screenshot and styles saved successfully!")
iface = gr.Interface(fn=highlightAndStyles, inputs=["text", "text", "text"], outputs=["image", "file"])
iface.launch()
# default signal handlers caused the program to only run on main thread of main interpreter. KEyboard INterrupt
# caused program to go out of main thread. Switching off those default handlers made it work. |