diff --git a/.gitattributes b/.gitattributes index a6344aac8c09253b3b630fb776ae94478aa0275b..2359b33db2b81b4eadf69ec809bef1735d19aded 100644 --- a/.gitattributes +++ b/.gitattributes @@ -33,3 +33,6 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text *.zip filter=lfs diff=lfs merge=lfs -text *.zst filter=lfs diff=lfs merge=lfs -text *tfevents* filter=lfs diff=lfs merge=lfs -text +flasktest/flagged/output[[:space:]]0/tmptcfpnuba.png filter=lfs diff=lfs merge=lfs -text +flasktest/originalScreenshot.png filter=lfs diff=lfs merge=lfs -text +flasktest/screenshot.png filter=lfs diff=lfs merge=lfs -text diff --git a/flasktest/.DS_Store b/flasktest/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..2127a269826a00d4158d0856826e706c87da2565 Binary files /dev/null and b/flasktest/.DS_Store differ diff --git a/flasktest/195638scr_9f285ecae64a4be-1-e1680102791743-600x600.jpg b/flasktest/195638scr_9f285ecae64a4be-1-e1680102791743-600x600.jpg new file mode 100644 index 0000000000000000000000000000000000000000..dac1e05a5f2ba9b2152390e327d20ae53cf43a8b Binary files /dev/null and b/flasktest/195638scr_9f285ecae64a4be-1-e1680102791743-600x600.jpg differ diff --git a/flasktest/39784076765_0a9e81d191_b.jpg b/flasktest/39784076765_0a9e81d191_b.jpg new file mode 100644 index 0000000000000000000000000000000000000000..1d28b0c18b23f3534eea88bb6b61f81ff215f1f9 Binary files /dev/null and b/flasktest/39784076765_0a9e81d191_b.jpg differ diff --git a/flasktest/4_20-Album.jpeg b/flasktest/4_20-Album.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..3c9d233e52bd88ec19ff8ffcaa53c20eb620b6b1 Binary files /dev/null and b/flasktest/4_20-Album.jpeg differ diff --git a/flasktest/52789698833_0364bf6445_b.jpg b/flasktest/52789698833_0364bf6445_b.jpg new file mode 100644 index 0000000000000000000000000000000000000000..ccae016083749407a57b6b2bb203b2d46c06c800 Binary files /dev/null and b/flasktest/52789698833_0364bf6445_b.jpg differ diff --git a/flasktest/52959407600_454f5e13cc_b.jpg b/flasktest/52959407600_454f5e13cc_b.jpg new file mode 100644 index 0000000000000000000000000000000000000000..ab8b725808fa999eeda5825e0c84737a3e7dc741 Binary files /dev/null and b/flasktest/52959407600_454f5e13cc_b.jpg differ diff --git a/flasktest/64539b7c5de18db18468da1c_Group%202061.png b/flasktest/64539b7c5de18db18468da1c_Group%202061.png new file mode 100644 index 0000000000000000000000000000000000000000..793ca8a62174c86b49efbfb6f78fa4d16e35e88d Binary files /dev/null and b/flasktest/64539b7c5de18db18468da1c_Group%202061.png differ diff --git a/flasktest/64539b7c5de18db18468da1c_Group%202061.svg b/flasktest/64539b7c5de18db18468da1c_Group%202061.svg new file mode 100644 index 0000000000000000000000000000000000000000..41c3247b49891e58644dd4ea9d51a83d05dd6390 --- /dev/null +++ b/flasktest/64539b7c5de18db18468da1c_Group%202061.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/flasktest/647763a154149e2140da5526_Group%202062.png b/flasktest/647763a154149e2140da5526_Group%202062.png new file mode 100644 index 0000000000000000000000000000000000000000..8c5fcea3081d9c2e699abb6de803a6bcbf1bf292 Binary files /dev/null and b/flasktest/647763a154149e2140da5526_Group%202062.png differ diff --git a/flasktest/647763a154149e2140da5526_Group%202062.svg b/flasktest/647763a154149e2140da5526_Group%202062.svg new file mode 100644 index 0000000000000000000000000000000000000000..8ef81370f16dd89a63411152b970fc3a4fdefc3a --- /dev/null +++ b/flasktest/647763a154149e2140da5526_Group%202062.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/flasktest/Buddy-Bear-Left-Main-250x188.jpg b/flasktest/Buddy-Bear-Left-Main-250x188.jpg new file mode 100644 index 0000000000000000000000000000000000000000..2c5d2b87dcc38cb32363527177938ae52e822d14 Binary files /dev/null and b/flasktest/Buddy-Bear-Left-Main-250x188.jpg differ diff --git a/flasktest/GAB-Hat-Clip-Overhead-250x188.jpg b/flasktest/GAB-Hat-Clip-Overhead-250x188.jpg new file mode 100644 index 0000000000000000000000000000000000000000..0c71c954523dacd9a21e016c8502940943c12b4d Binary files /dev/null and b/flasktest/GAB-Hat-Clip-Overhead-250x188.jpg differ diff --git a/flasktest/Girl-Scouts-Patch-Gab-Gear-250x188.jpg b/flasktest/Girl-Scouts-Patch-Gab-Gear-250x188.jpg new file mode 100644 index 0000000000000000000000000000000000000000..be379dfec3e3751b65badecbfafbc39a8e5840aa Binary files /dev/null and b/flasktest/Girl-Scouts-Patch-Gab-Gear-250x188.jpg differ diff --git a/flasktest/Have-Questions_304x184.jpg b/flasktest/Have-Questions_304x184.jpg new file mode 100644 index 0000000000000000000000000000000000000000..596d7d487a9bb38eacc14de5db6a62713db9b66f Binary files /dev/null and b/flasktest/Have-Questions_304x184.jpg differ diff --git a/flasktest/Medication-Home-Delivery_304x184.jpg b/flasktest/Medication-Home-Delivery_304x184.jpg new file mode 100644 index 0000000000000000000000000000000000000000..ec9b0933fd63d8213bd1cd5c7993aee50b15d72a Binary files /dev/null and b/flasktest/Medication-Home-Delivery_304x184.jpg differ diff --git a/flasktest/My-Prescription-Benefits_304x184.jpg b/flasktest/My-Prescription-Benefits_304x184.jpg new file mode 100644 index 0000000000000000000000000000000000000000..1da123ed8b9d15692aa1361cc57604732db25c23 Binary files /dev/null and b/flasktest/My-Prescription-Benefits_304x184.jpg differ diff --git a/flasktest/PopSocket-Featured-250x188.jpg b/flasktest/PopSocket-Featured-250x188.jpg new file mode 100644 index 0000000000000000000000000000000000000000..25600aedc6b2155c9b046bd73b9ae903fa40943b Binary files /dev/null and b/flasktest/PopSocket-Featured-250x188.jpg differ diff --git a/flasktest/README.md b/flasktest/README.md new file mode 100644 index 0000000000000000000000000000000000000000..757d17233e9d016c634c1c081c75c5528375393f --- /dev/null +++ b/flasktest/README.md @@ -0,0 +1,6 @@ +--- +title: Fanklin_Importer_CSS +app_file: handSwithFFog.py +sdk: gradio +sdk_version: 3.35.2 +--- diff --git a/flasktest/RS195853_20220524_Malawi_FCDO_TC_DSC_9708-scr-1-600x600.jpg b/flasktest/RS195853_20220524_Malawi_FCDO_TC_DSC_9708-scr-1-600x600.jpg new file mode 100644 index 0000000000000000000000000000000000000000..ba13b421599e283f9567d5a70d886e9dffde43ca Binary files /dev/null and b/flasktest/RS195853_20220524_Malawi_FCDO_TC_DSC_9708-scr-1-600x600.jpg differ diff --git a/flasktest/RadioWorkshop-icons-800px-navy-Radio.png b/flasktest/RadioWorkshop-icons-800px-navy-Radio.png new file mode 100644 index 0000000000000000000000000000000000000000..06ca6b06cf5d34cfe7985a48e031ff21a73d41c5 Binary files /dev/null and b/flasktest/RadioWorkshop-icons-800px-navy-Radio.png differ diff --git a/flasktest/UN0791792_Suday_March2023-600x600.jpg b/flasktest/UN0791792_Suday_March2023-600x600.jpg new file mode 100644 index 0000000000000000000000000000000000000000..07a34e64ceebdc312148641c72ac78bff645eba5 Binary files /dev/null and b/flasktest/UN0791792_Suday_March2023-600x600.jpg differ diff --git a/flasktest/UNI217680-600x600.jpg b/flasktest/UNI217680-600x600.jpg new file mode 100644 index 0000000000000000000000000000000000000000..5d4bf739240af36a0f311e0be4b44db8d45fe8a3 Binary files /dev/null and b/flasktest/UNI217680-600x600.jpg differ diff --git a/flasktest/__pycache__/gradd.cpython-310.pyc b/flasktest/__pycache__/gradd.cpython-310.pyc new file mode 100644 index 0000000000000000000000000000000000000000..8b4bb1c4064275a5278f61ec49c81888345f15c4 Binary files /dev/null and b/flasktest/__pycache__/gradd.cpython-310.pyc differ diff --git a/flasktest/__pycache__/gradioHandS.cpython-310.pyc b/flasktest/__pycache__/gradioHandS.cpython-310.pyc new file mode 100644 index 0000000000000000000000000000000000000000..45f4c35426139166ece1dd884d7ec9d8af85cb63 Binary files /dev/null and b/flasktest/__pycache__/gradioHandS.cpython-310.pyc differ diff --git a/flasktest/__pycache__/handSwithFF.cpython-310.pyc b/flasktest/__pycache__/handSwithFF.cpython-310.pyc new file mode 100644 index 0000000000000000000000000000000000000000..96a5cdff88ec0de54375ca97a6e0806ecdd47f1a Binary files /dev/null and b/flasktest/__pycache__/handSwithFF.cpython-310.pyc differ diff --git a/flasktest/__pycache__/handSwithFFog.cpython-310.pyc b/flasktest/__pycache__/handSwithFFog.cpython-310.pyc new file mode 100644 index 0000000000000000000000000000000000000000..912f473a1b3b2a7cba99c44efeed7b8045cee1f5 Binary files /dev/null and b/flasktest/__pycache__/handSwithFFog.cpython-310.pyc differ diff --git a/flasktest/__pycache__/index.cpython-310.pyc b/flasktest/__pycache__/index.cpython-310.pyc new file mode 100644 index 0000000000000000000000000000000000000000..7857c021d85928e3338d21dee542a7f2a541ebb4 Binary files /dev/null and b/flasktest/__pycache__/index.cpython-310.pyc differ diff --git a/flasktest/__pycache__/index0.cpython-310.pyc b/flasktest/__pycache__/index0.cpython-310.pyc new file mode 100644 index 0000000000000000000000000000000000000000..18ce1837b6da1c6acd4c206e9d88bd56f5787fed Binary files /dev/null and b/flasktest/__pycache__/index0.cpython-310.pyc differ diff --git a/flasktest/__pycache__/index3.cpython-310.pyc b/flasktest/__pycache__/index3.cpython-310.pyc new file mode 100644 index 0000000000000000000000000000000000000000..4baca2cddb4fa48e765f8994fc75b974b45d0fba Binary files /dev/null and b/flasktest/__pycache__/index3.cpython-310.pyc differ diff --git a/flasktest/a827d3.jpg b/flasktest/a827d3.jpg new file mode 100644 index 0000000000000000000000000000000000000000..c19e631c25e52aaf97c646175615cf4887eb9e25 Binary files /dev/null and b/flasktest/a827d3.jpg differ diff --git a/flasktest/algorithm-cover.png b/flasktest/algorithm-cover.png new file mode 100644 index 0000000000000000000000000000000000000000..b8de1d21623ca7a8d4f8e8717852612e1bd4e8b9 Binary files /dev/null and b/flasktest/algorithm-cover.png differ diff --git a/flasktest/burger.svg b/flasktest/burger.svg new file mode 100644 index 0000000000000000000000000000000000000000..8a7d20216e265ff34bad915cc3f35681af0b06cb --- /dev/null +++ b/flasktest/burger.svg @@ -0,0 +1,10 @@ + \ No newline at end of file diff --git a/flasktest/cb978c.jpg b/flasktest/cb978c.jpg new file mode 100644 index 0000000000000000000000000000000000000000..783780966d0243877e26d2cab03ccf6cd5b69f22 Binary files /dev/null and b/flasktest/cb978c.jpg differ diff --git a/flasktest/childrensradiofoundation.html b/flasktest/childrensradiofoundation.html new file mode 100644 index 0000000000000000000000000000000000000000..972af02fae63b5ab49492c67ed2139cfa599f079 --- /dev/null +++ b/flasktest/childrensradiofoundation.html @@ -0,0 +1,58 @@ +
+
+
+ + + + + + +
+
+

36

+

radio stations

+
+
+
+
+ + + + + + +
+
+

4197

+

youth trained reporters

+
+
+
+
+ + + + + + +
+
+

6.4m

+

listeners across africa

+
+
+
+
+ + + + + + +
+
+

21

+

broadcast languages

+
+
+
\ No newline at end of file diff --git a/flasktest/cloneNonDefault.py b/flasktest/cloneNonDefault.py new file mode 100644 index 0000000000000000000000000000000000000000..24333024589a2814b75ff6ff94c012fc448e6bc7 --- /dev/null +++ b/flasktest/cloneNonDefault.py @@ -0,0 +1,46 @@ +import asyncio +import json +from pyppeteer import launch + +async def compare_styles(url, container_selector): + browser = await launch() + page = await browser.newPage() + await page.goto(url) + + container_element = await page.querySelector(container_selector) + if container_element: + await compare_element_styles(page, container_element, container_selector) + else: + print(f'Container element with selector "{container_selector}" not found.') + + await browser.close() + +async def compare_element_styles(page, element, identifier): + clone_selector = '__cloned_element__' + await page.evaluate(f'el => el.cloneNode(true)', element, force_expr=True) + await page.evaluate(f'el => {{ el.style.all = "unset"; el.setAttribute("id", "{clone_selector}"); }}', element, force_expr=True) + + clone_handle = await page.querySelector(f'#{clone_selector}') + + computed_styles = await element.executionContext().evaluate('(el) => JSON.stringify(getComputedStyle(el))', element) + clone_styles = await clone_handle.executionContext().evaluate('(el) => JSON.stringify(getComputedStyle(el))', clone_handle) + + print(f'Here are the styles for element {identifier}:') + + computed_styles_dict = json.loads(computed_styles) + clone_styles_dict = json.loads(clone_styles) + + for style_property, actual_value in computed_styles_dict.items(): + clone_value = clone_styles_dict.get(style_property) + + if actual_value != clone_value: + print(f'{style_property}: {actual_value}') + + child_elements = await page.querySelectorAll(f'{element._remoteObject.description} > *') + for i, child_element in enumerate(child_elements): + await compare_element_styles(page, child_element, f'{identifier}.{i}') + +url = input('Enter the URL of the webpage: ') +container_selector = input('Enter the container selector: ') + +asyncio.get_event_loop().run_until_complete(compare_styles(url, container_selector)) diff --git a/flasktest/countly.html b/flasktest/countly.html new file mode 100644 index 0000000000000000000000000000000000000000..4db52c20f5b56c2710711678ba461c13cfa303c1 --- /dev/null +++ b/flasktest/countly.html @@ -0,0 +1,40 @@ +
+
+
+ + + + + + +
+
+
Become fully compliant and leave any security threats out the door
+
"With Countly, you are your data's sole owner, controller, and processor. You are in charge."
+
+
+
+
+ + + + + + +
+
+
Stay trustworthy by working with trustworthy
+
"ISO 27001 and SOC2 certified, Countly takes privacy seriously and helps you do the same within your organization and with your customers."
+
+
+
+
+ 🔒 +
+
+
+
"Dont compromise on your data privacy standards and retain full control of your hosting"
+
"Countly supports your needs no matter what. Be it self-hosting or private deployments in the cloud."
+
+
+
\ No newline at end of file diff --git a/flasktest/cozyio.html b/flasktest/cozyio.html new file mode 100644 index 0000000000000000000000000000000000000000..35c616a393535311ad34677f78ce649d2821863a --- /dev/null +++ b/flasktest/cozyio.html @@ -0,0 +1,44 @@ +
+
+
+ + + + + + +
+
+

BUDDY BEAR (LIMITED EDITION)

+

$50.00

+
+
+
+
+ + + + + + +
+
+

GIRL SCOUTS UPSTANDER PATCH

+

$3.00

+
+
+
+
+ + + + + + +
+
+

HAT CLIPS

+

$6.95

+
+
+
\ No newline at end of file diff --git a/flasktest/dbf731.jpg b/flasktest/dbf731.jpg new file mode 100644 index 0000000000000000000000000000000000000000..da5defa42568b44dba5568308ff602fa9accbec7 Binary files /dev/null and b/flasktest/dbf731.jpg differ diff --git a/flasktest/elemFrompt.py b/flasktest/elemFrompt.py new file mode 100644 index 0000000000000000000000000000000000000000..16f130dba85a4314d5e8c1d4a9a6a5c4f4a96aea --- /dev/null +++ b/flasktest/elemFrompt.py @@ -0,0 +1,38 @@ +import asyncio +from pyppeteer import launch + +async def get_element_html(url, x, y): + # const browser = await puppeteer.launch( {"headless": false, args: ['--start-maximized'] } ); + browser = await launch() + page = await browser.newPage() + + await page.setViewport({'width': 3072, 'height': 1920}) + await page.goto(url) + + # Get the HTML element at the specified (x, y) coordinate + element = await page.evaluate( + '''(x, y) => { + const element = document.elementFromPoint(x, y); + return element ? element.outerHTML : null; + }''', + x, y + ) + + await browser.close() + return element + +async def save_html_to_file(html, filename): + with open(filename, 'w') as file: + file.write(html) + +async def main(): + url = input("Enter URL: ") + x = int(input("Enter X coordinate: ")) + y = int(input("Enter Y coordinate: ")) + filename = f'at{x}and{y}.html' + + html = await get_element_html(url, x, y) + await save_html_to_file(html, filename) + print("HTML saved to", filename) + +asyncio.run(main()) \ No newline at end of file diff --git a/flasktest/elixirsolutions.html b/flasktest/elixirsolutions.html new file mode 100644 index 0000000000000000000000000000000000000000..966753c0ebee310a196149757b33ca2f60de0c33 --- /dev/null +++ b/flasktest/elixirsolutions.html @@ -0,0 +1,47 @@ +
+
+
+ + + + + Woman typing on laptop + +
+
+

My Prescription Benefits

+

For information on your prescription benefits, log into your Member Portal. Find ways to save, review your coverage, find a network pharmacy and more.

+

Member Portal

+
+
+
+
+ + + + + Man checking prescriptions on laptop + +
+
+

Medication Home Delivery

+

To fill or refill prescriptions by mail, log into your Member Portal. Track the status of your order, transfer prescriptions, view your medication history and more.

+

Learn More

+
+
+
+
+ + + + + Young couple checking tablet + +
+
+

Have Questions?

+

Learn more about how Elixir can help you better manage your prescription benefits. Get answers about mail order, specialty and find forms and resources.

+

Members Page

+
+
+
\ No newline at end of file diff --git a/flasktest/firefall.py b/flasktest/firefall.py new file mode 100644 index 0000000000000000000000000000000000000000..032378d8abd18dc728b673cfe769cceb556c71de --- /dev/null +++ b/flasktest/firefall.py @@ -0,0 +1,57 @@ +import os, json, requests + +# enter the client id from imss here +client_id = 'MDSR_Firefall' +client_secret = 's8e-8CGebu-kO3Vt_ICCNzQU8sCVYCHqcuFq' #enter the client secret from imss here +permanent_auth_code = 'eyJhbGciOiJSUzI1NiIsIng1dSI6Imltc19uYTEtc3RnMS1rZXktcGFjLTEuY2VyIiwia2lkIjoiaW1zX25hMS1zdGcxLWtleS1wYWMtMSIsIml0dCI6InBhYyJ9.eyJpZCI6Ik1EU1JfRmlyZWZhbGxfc3RnIiwidHlwZSI6ImF1dGhvcml6YXRpb25fY29kZSIsImNsaWVudF9pZCI6Ik1EU1JfRmlyZWZhbGwiLCJ1c2VyX2lkIjoiTURTUl9GaXJlZmFsbEBBZG9iZUlEIiwiYXMiOiJpbXMtbmExLXN0ZzEiLCJvdG8iOmZhbHNlLCJjcmVhdGVkX2F0IjoiMTY4MTE0NTIxNDk1MCIsInNjb3BlIjoic3lzdGVtIn0.Yoz7IPhmIBV2uNKl1CJJ9rJ0HmvDBQFbh0AihlHdsOa1E3yBs7WB9ilTCUVodifg8gh1yw4QRllV1NKS2RYeiGxQU7rXAF7SEnH_X_Tqdl735PBnBFL8sW_x76dzmT6MZIzynz8Ywu57qztvFnHoLMfJ7HsNt7rkOqF3IZByOinxyJzRTwMfygHSKjoQx6A4S7LbuQWjlqDbM9RaeCcakMEqGvSKqkLQvtMg40ZQYSNELoFtbATfwuVrHWOglAQS4A2FR24ziop137imu4HrTr-syDYki8VWV27WuGGo632_K2vJwqbaYjZvyrtsuBLH3fGGgXgyM5EA_Jk_lcMFog' #imss -> service tokens -> permanent auth token +ims_url = 'https://ims-na1-stg1.adobelogin.com/ims/token/v2' +firefall_client_id = "MDSR_Firefall" +ims_org_id = client_id +api_key = client_id +azure_url = 'https://firefall-stage.adobe.io/v1/completions' + +def get_openai_response(azure_url, ims_org_id, api_key, temp_auth_token, json_data): + headers = { + 'x-gw-ims-org-id': ims_org_id, + 'x-api-key': api_key, + 'Authorization': f'Bearer {temp_auth_token}', + 'Content-Type': 'application/json', + } + response = requests.post(azure_url, headers=headers, json=json_data) + return json.loads(response.text) + +def get_temp_auth_token(ims_url, client_id, client_secret, permanent_auth_code): + params = { + 'client_id': client_id, + 'client_secret': client_secret, + 'code': permanent_auth_code, + 'grant_type': 'authorization_code', + } + response = requests.post(ims_url, params=params) + return json.loads(response.text) + + +response = get_temp_auth_token(ims_url, client_id, client_secret, permanent_auth_code) +# print(response) +temp_auth_token = response['access_token'] + +query = """hello world!""" +json_data = { + "dialogue":{ + "question": query + }, + "llm_metadata": { + "model_name": "gpt-4", + "temperature": 0.0, + "max_tokens": 8071, + "top_p": 1.0, + "frequency_penalty": 0, + "presence_penalty": 0, + "n": 1, + "llm_type": "azure_chat_openai" + } + } + +openai_response = get_openai_response(azure_url, ims_org_id, api_key, temp_auth_token, json_data) +# print("OpenAI Response:", openai_response) +print("OpenAI Response:", openai_response['generations'][0][0]['text']) diff --git a/flasktest/flagged/.DS_Store b/flasktest/flagged/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..92df230aab287c72ec748573e52c01a08242207c Binary files /dev/null and b/flasktest/flagged/.DS_Store differ diff --git a/flasktest/flagged/log.csv b/flasktest/flagged/log.csv new file mode 100644 index 0000000000000000000000000000000000000000..1cd23622032072c4fbf37e6870d9f014839e5e92 --- /dev/null +++ b/flasktest/flagged/log.csv @@ -0,0 +1,41 @@ +url,selector,franklinHTML,output 0,output 1,output 2,output 3,flag,username,timestamp +https://countly.com/,.grid-3-cards-ver-home,"
+
+
+ + + + + + +
+
+
Become fully compliant and leave any security threats out the door
+
""With Countly, you are your data's sole owner, controller, and processor. You are in charge.""
+
+
+
+
+ + + + + + +
+
+
Stay trustworthy by working with trustworthy
+
""ISO 27001 and SOC2 certified, Countly takes privacy seriously and helps you do the same within your organization and with your customers.""
+
+
+
+
+ 🔒 +
+
+
+
""Don’t compromise on your data privacy standards and retain full control of your hosting""
+
""Countly supports your needs no matter what. Be it self-hosting or private deployments in the cloud.""
+
+
+
",/Users/prakharsingh/Code/flasktest/flagged/output 0/tmptcfpnuba.png,/Users/prakharsingh/Code/flasktest/flagged/output 1/tmpv1a06_56.png,/Users/prakharsingh/Code/flasktest/flagged/output 2/1f67e024d31d0dacee2762092a3e3f7e8ee98b35/originalStyles.txt,/Users/prakharsingh/Code/flasktest/flagged/output 3/1418b254a6486c0322a832c1efdf98a2ea6fd9e9/franklinStyles.css,,,2023-06-23 12:32:57.854312 diff --git a/flasktest/flagged/output 0/tmptcfpnuba.png b/flasktest/flagged/output 0/tmptcfpnuba.png new file mode 100644 index 0000000000000000000000000000000000000000..adb3c0d76e55e6d2b840503bca1f110280152ef8 --- /dev/null +++ b/flasktest/flagged/output 0/tmptcfpnuba.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:e8188657a8336fa7e5a7645bd8bf5a94e62c4c8bdcf485f120199f5a1cac17b6 +size 2033855 diff --git a/flasktest/flagged/output 1/tmpv1a06_56.png b/flasktest/flagged/output 1/tmpv1a06_56.png new file mode 100644 index 0000000000000000000000000000000000000000..ef7714e8617d6393781c578aebcd07551988d301 Binary files /dev/null and b/flasktest/flagged/output 1/tmpv1a06_56.png differ diff --git a/flasktest/flagged/output 2/1f67e024d31d0dacee2762092a3e3f7e8ee98b35/originalStyles.txt b/flasktest/flagged/output 2/1f67e024d31d0dacee2762092a3e3f7e8ee98b35/originalStyles.txt new file mode 100644 index 0000000000000000000000000000000000000000..65a8230247b3b190e970ffe61766127557d83449 --- /dev/null +++ b/flasktest/flagged/output 2/1f67e024d31d0dacee2762092a3e3f7e8ee98b35/originalStyles.txt @@ -0,0 +1,432 @@ +Lets name text with Text Content = "Countly supports your needs no matter what. Be it self-hosting or private deployments in the cloud." as text1. The computed styles of text1 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(255, 255, 255) + display: block + flex-direction: row + float: none + font-family: Basiercircle, sans-serif + font-size: 16px + font-weight: 400 + height: 48px + line-height: 24px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: left + width: 660px"" + +Lets name text with Text Content = "Don’t compromise on your data privacy standards and retain full control of your hosting" as text2. The computed styles of text2 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(255, 255, 255) + display: block + flex-direction: row + float: none + font-family: Basiercircle, sans-serif + font-size: 28px + font-weight: 600 + height: 68px + line-height: 34px + margin-bottom: 16px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: left + width: 660px"" + +text1,text2 is nested inside a container. Lets name this container as container1. The computed styles of container1 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(255, 255, 255) + display: block + flex-direction: row + float: none + font-family: Basiercircle, sans-serif + font-size: 16px + font-weight: 400 + height: 132px + line-height: 24px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 50px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: left + width: 660px"" + +Lets name undefined with undefined as undefined1. The computed styles of undefined1 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(255, 255, 255) + display: inline + flex-direction: row + float: none + font-family: Basiercircle, sans-serif + font-size: 40px + font-weight: 600 + height: auto + line-height: 48px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: auto"" + +Lets name text with Text Content = "🔒" as text3. The computed styles of text3 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(255, 255, 255) + display: inline + flex-direction: row + float: none + font-family: Basiercircle, sans-serif + font-size: 62px + font-weight: 600 + height: auto + line-height: 80px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: auto"" + +undefined1,text3 is nested inside a container. Lets name this container as container2. The computed styles of container2 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(255, 255, 255) + display: block + flex-direction: row + float: none + font-family: Basiercircle, sans-serif + font-size: 40px + font-weight: 600 + height: 80px + line-height: 48px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 62px"" + +container1,container2 is nested inside a container. Lets name this container as container3. The computed styles of container3 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(255, 255, 255) + display: flex + flex-direction: column + float: none + font-family: Basiercircle, sans-serif + font-size: 16px + font-weight: 400 + height: 410px + line-height: 24px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 58px + padding-left: 40px + padding-right: 40px + padding-top: 58px + text-align: start + width: 740px"" + +Lets name text with Text Content = "ISO 27001 and SOC2 certified, Countly takes privacy seriously and helps you do the same within your organization and with your customers." as text4. The computed styles of text4 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(36, 41, 46) + display: block + flex-direction: row + float: none + font-family: Basiercircle, sans-serif + font-size: 16px + font-weight: 400 + height: 120px + line-height: 24px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: left + width: 275px"" + +Lets name text with Text Content = "Stay trustworthy by working with trustworthy" as text5. The computed styles of text5 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(255, 133, 75) + display: block + flex-direction: row + float: none + font-family: Basiercircle, sans-serif + font-size: 28px + font-weight: 600 + height: 102px + line-height: 34px + margin-bottom: 16px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: left + width: 275px"" + +text4,text5 is nested inside a container. Lets name this container as container4. The computed styles of container4 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(36, 41, 46) + display: block + flex-direction: row + float: none + font-family: Basiercircle, sans-serif + font-size: 16px + font-weight: 400 + height: 238px + line-height: 24px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 50px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: left + width: 275px"" + +Lets name image with src = "64539b7c5de18db18468da1c_Group%202061.png" as image1. The computed styles of image1 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(36, 41, 46) + display: block + flex-direction: row + float: none + font-family: Basiercircle, sans-serif + font-size: 16px + font-weight: 400 + height: 189.062px + line-height: 24px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: center + width: 275px"" + +container4,image1 is nested inside a container. Lets name this container as container5. The computed styles of container5 are:- +"" background-color: rgb(255, 255, 255) + box-sizing: border-box + clear: none + color: rgb(36, 41, 46) + display: flex + flex-direction: column + float: none + font-family: Basiercircle, sans-serif + font-size: 16px + font-weight: 400 + height: 557.062px + line-height: 24px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 40px + padding-left: 40px + padding-right: 40px + padding-top: 40px + text-align: center + width: 355px"" + +Lets name text with Text Content = "With Countly, you are your data's sole owner, controller, and processor. You are in charge." as text6. The computed styles of text6 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(36, 41, 46) + display: block + flex-direction: row + float: none + font-family: Basiercircle, sans-serif + font-size: 16px + font-weight: 400 + height: 72px + line-height: 24px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: left + width: 275px"" + +Lets name text with Text Content = "Become fully compliant and leave any security threats out the door" as text7. The computed styles of text7 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(255, 133, 75) + display: block + flex-direction: row + float: none + font-family: Basiercircle, sans-serif + font-size: 28px + font-weight: 600 + height: 136px + line-height: 34px + margin-bottom: 16px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: left + width: 275px"" + +text6,text7 is nested inside a container. Lets name this container as container6. The computed styles of container6 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(36, 41, 46) + display: block + flex-direction: row + float: none + font-family: Basiercircle, sans-serif + font-size: 16px + font-weight: 400 + height: 224px + line-height: 24px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 50px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: left + width: 275px"" + +Lets name image with src = "647763a154149e2140da5526_Group%202062.png" as image2. The computed styles of image2 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(36, 41, 46) + display: block + flex-direction: row + float: none + font-family: Basiercircle, sans-serif + font-size: 16px + font-weight: 400 + height: 100px + line-height: 24px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 35px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: center + width: 250px"" + +container6,image2 is nested inside a container. Lets name this container as container7. The computed styles of container7 are:- +"" background-color: rgb(255, 255, 255) + box-sizing: border-box + clear: none + color: rgb(36, 41, 46) + display: flex + flex-direction: column + float: none + font-family: Basiercircle, sans-serif + font-size: 16px + font-weight: 400 + height: 557.062px + line-height: 24px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 40px + padding-left: 40px + padding-right: 40px + padding-top: 40px + text-align: center + width: 355px"" + +container3,container5,container7 is nested inside a container. Lets name this container as container8. The computed styles of container8 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(36, 41, 46) + display: grid + flex-direction: row + float: none + font-family: Basiercircle, sans-serif + font-size: 16px + font-weight: 400 + height: 991.062px + line-height: 24px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 740px"" + diff --git a/flasktest/flagged/output 3/1418b254a6486c0322a832c1efdf98a2ea6fd9e9/franklinStyles.css b/flasktest/flagged/output 3/1418b254a6486c0322a832c1efdf98a2ea6fd9e9/franklinStyles.css new file mode 100644 index 0000000000000000000000000000000000000000..79932589e50910482dfaaa15c3a1a36a186567c7 --- /dev/null +++ b/flasktest/flagged/output 3/1418b254a6486c0322a832c1efdf98a2ea6fd9e9/franklinStyles.css @@ -0,0 +1,84 @@ +.cards { + display: grid; + width: 740px; + height: 991.062px; +} + +.cards > div { + display: flex; + flex-direction: column; +} + +.cards > div:nth-child(1), +.cards > div:nth-child(2) { + background-color: rgb(255, 255, 255); + padding: 40px; + width: 355px; + height: 557.062px; + text-align: center; +} + +.cards > div:nth-child(3) { + background-color: rgba(0, 0, 0, 0); + padding: 58px 40px; + width: 740px; + height: 410px; + text-align: start; +} + +.cards img { + display: block; + margin-top: 35px; + width: 250px; + height: 100px; +} + +.cards .emoji-62px { + font-size: 62px; + line-height: 80px; +} + +.cards > div > div:nth-child(1) { + height: 80px; + width: 62px; + text-align: start; +} + +.cards > div > div:nth-child(2) { + margin-top: 50px; + width: 275px; +} + +.cards > div > div:nth-child(2) > div:nth-child(1) { + font-size: 28px; + font-weight: 600; + line-height: 34px; + color: rgb(255, 133, 75); + height: 102px; + margin-bottom: 16px; +} + +.cards > div > div:nth-child(2) > div:nth-child(2) { + font-size: 16px; + font-weight: 400; + line-height: 24px; + color: rgb(36, 41, 46); + height: 120px; +} + +.cards > div:nth-child(3) > div:nth-child(2) > div:nth-child(1) { + font-size: 28px; + font-weight: 600; + line-height: 34px; + color: rgb(255, 255, 255); + height: 68px; + margin-bottom: 16px; +} + +.cards > div:nth-child(3) > div:nth-child(2) > div:nth-child(2) { + font-size: 16px; + font-weight: 400; + line-height: 24px; + color: rgb(255, 255, 255); + height: 48px; +} \ No newline at end of file diff --git a/flasktest/flickrblog.html b/flasktest/flickrblog.html new file mode 100644 index 0000000000000000000000000000000000000000..03d90cfb981cb0491df2de2e8c1908a1ea314b5f --- /dev/null +++ b/flasktest/flickrblog.html @@ -0,0 +1,42 @@ +
+
+
+ + + + + + +
+
+

Weekly Snapshot with Flickr Social, 6/09/2023

+
+
+
+
+ + + + + + +
+
+

Celebrate World Ocean Day 2023

+
+
+
+
+ + + + + + + +
+
+

16 Questions about One Photo with Hari K Patibanda

+
+
+
\ No newline at end of file diff --git a/flasktest/franklinHTML.html b/flasktest/franklinHTML.html new file mode 100644 index 0000000000000000000000000000000000000000..141b806e772192397d59aed67a81197e189469df --- /dev/null +++ b/flasktest/franklinHTML.html @@ -0,0 +1,48 @@ + +
+
+
+ + + + + + +
+
+

Uplift Exercise Physiology

+

"""[SimpleSet is] really good! Super quick to setup... Great variety of exercises... You can create and send a high quality, easily digestible program to a patient within minutes, making it a win-win-win for the patient, clinician and business owner."""

+ Read More... +
+
+
+
+ + + + + + +
+
+

PHIT Well

+

"""There is an unbeatable value for the cost of [SimpleSet]. We found the intuitive functionality [of SimpleSet] perfect for our high paced clinic, where our clinicians were able to pick up and use the programming without extensive training."""

+ Read More... +
+
+
+
+ + + + + + +
+
+

Sports Physio YYC

+

""My motto is teach a person to fish — I breed a culture of being able to maintain and help yourself through a sustainable recovery, and SimpleSet has been a huge player in this.""

+ Read More... +
+
+
\ No newline at end of file diff --git a/flasktest/franklinStyles.css b/flasktest/franklinStyles.css new file mode 100644 index 0000000000000000000000000000000000000000..0195f0732aa9d5fa665de1c12da82997b6508302 --- /dev/null +++ b/flasktest/franklinStyles.css @@ -0,0 +1,82 @@ +.cards { + display: grid; + width: 688px; + height: 2364.23px; +} + +.cards > div { + background-color: rgb(238, 238, 238); + width: 688px; + height: 796.078px; +} + +.cards > div > div:first-child { + height: 454.078px; + padding-top: 454.078px; + width: 688px; +} + +.cards > div > div:first-child img { + display: block; + width: 688px; + height: 454.078px; + margin: 0; + padding: 0; +} + +.cards > div > div:last-child { + padding: 50px 26px; + height: 342px; + width: 688px; +} + +.cards h2 { + font-family: Lato, "Trebuchet MS", sans-serif; + font-size: 28px; + font-weight: 700; + height: 41px; + line-height: 41px; + margin: 0; + padding: 0; + text-align: center; + color: rgb(17, 17, 17); + margin-bottom: 32px; +} + +.cards p { + font-family: Lato, "Trebuchet MS", sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 26px; + margin: 0; + padding: 0; + text-align: start; + color: rgb(17, 17, 17); + width: 636px; +} + +.cards a { + font-family: Lato, "Trebuchet MS", sans-serif; + font-size: 16px; + font-weight: 700; + line-height: normal; + display: block; + text-align: center; + color: rgb(255, 255, 255); + margin: 32px 47.7031px 0; + padding: 20px; + width: 540.594px; + text-decoration: none; +} + +.cards div:nth-child(1) p { + height: 78px; +} + +.cards div:nth-child(2) p { + height: 52px; +} + +.cards div:nth-child(3) p { + height: 78px; +} \ No newline at end of file diff --git a/flasktest/gabnow.html b/flasktest/gabnow.html new file mode 100644 index 0000000000000000000000000000000000000000..5159f192428df1ea43846b7c43f27d92388aa774 --- /dev/null +++ b/flasktest/gabnow.html @@ -0,0 +1,58 @@ +
+
+
+ + + + + + +
+
+

BUDDY BEAR (LIMITED EDITION)

+

$50.00

+
+
+
+
+ + + + + + +
+
+

GIRL SCOUTS UPSTANDER PATCH

+

$3.00

+
+
+
+
+ + + + + + +
+
+

HAT CLIPS

+

$6.95

+
+
+
+
+ + + + + + +
+
+

POPSOCKET FOR SMARTPHONES AND TABLETS

+

$9.95

+
+
+
\ No newline at end of file diff --git a/flasktest/gradioHandS.py b/flasktest/gradioHandS.py new file mode 100644 index 0000000000000000000000000000000000000000..22771a01ab259c72f0ccaeb34c0a1e39f4155847 --- /dev/null +++ b/flasktest/gradioHandS.py @@ -0,0 +1,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. \ No newline at end of file diff --git a/flasktest/handSwithFF.py b/flasktest/handSwithFF.py new file mode 100644 index 0000000000000000000000000000000000000000..7d2fc4b902d9710fc6e11f978962f8d964ef3288 --- /dev/null +++ b/flasktest/handSwithFF.py @@ -0,0 +1,399 @@ +# import asyncio +from pyppeteer import launch +from pyppeteer.errors import ElementHandleError +import gradio as gr + +# Firefall start --------------------------------------------------------------------------------------------- + +import os, json, requests + +# enter the client id from imss here +client_id = 'MDSR_Firefall' +client_secret = 's8e-8CGebu-kO3Vt_ICCNzQU8sCVYCHqcuFq' #enter the client secret from imss here +permanent_auth_code = 'eyJhbGciOiJSUzI1NiIsIng1dSI6Imltc19uYTEtc3RnMS1rZXktcGFjLTEuY2VyIiwia2lkIjoiaW1zX25hMS1zdGcxLWtleS1wYWMtMSIsIml0dCI6InBhYyJ9.eyJpZCI6Ik1EU1JfRmlyZWZhbGxfc3RnIiwidHlwZSI6ImF1dGhvcml6YXRpb25fY29kZSIsImNsaWVudF9pZCI6Ik1EU1JfRmlyZWZhbGwiLCJ1c2VyX2lkIjoiTURTUl9GaXJlZmFsbEBBZG9iZUlEIiwiYXMiOiJpbXMtbmExLXN0ZzEiLCJvdG8iOmZhbHNlLCJjcmVhdGVkX2F0IjoiMTY4MTE0NTIxNDk1MCIsInNjb3BlIjoic3lzdGVtIn0.Yoz7IPhmIBV2uNKl1CJJ9rJ0HmvDBQFbh0AihlHdsOa1E3yBs7WB9ilTCUVodifg8gh1yw4QRllV1NKS2RYeiGxQU7rXAF7SEnH_X_Tqdl735PBnBFL8sW_x76dzmT6MZIzynz8Ywu57qztvFnHoLMfJ7HsNt7rkOqF3IZByOinxyJzRTwMfygHSKjoQx6A4S7LbuQWjlqDbM9RaeCcakMEqGvSKqkLQvtMg40ZQYSNELoFtbATfwuVrHWOglAQS4A2FR24ziop137imu4HrTr-syDYki8VWV27WuGGo632_K2vJwqbaYjZvyrtsuBLH3fGGgXgyM5EA_Jk_lcMFog' #imss -> service tokens -> permanent auth token +ims_url = 'https://ims-na1-stg1.adobelogin.com/ims/token/v2' +firefall_client_id = "MDSR_Firefall" +ims_org_id = client_id +api_key = client_id +azure_url = 'https://firefall-stage.adobe.io/v1/completions' + +def get_openai_response(azure_url, ims_org_id, api_key, temp_auth_token, json_data): + headers = { + 'x-gw-ims-org-id': ims_org_id, + 'x-api-key': api_key, + 'Authorization': f'Bearer {temp_auth_token}', + 'Content-Type': 'application/json', + } + response = requests.post(azure_url, headers=headers, json=json_data) + return json.loads(response.text) + +def get_temp_auth_token(ims_url, client_id, client_secret, permanent_auth_code): + params = { + 'client_id': client_id, + 'client_secret': client_secret, + 'code': permanent_auth_code, + 'grant_type': 'authorization_code', + } + response = requests.post(ims_url, params=params) + return json.loads(response.text) + + +response = get_temp_auth_token(ims_url, client_id, client_secret, permanent_auth_code) +# print(response) +temp_auth_token = response['access_token'] + +async def gptResponse(franklinHTML, originalStyles, css_file): + query = f'I will provide you :-\n1. HTML code,\n2. \"Computed\" Styles (obtained from \"Computed\" tab) of all the elements inside this HTML.\n\nBased on these two information, can you generate \"CSS\" code for the given HTML so that it styles the HTML according to the provided \"Computed\" styles.\n\n' + query += f'1. HTML code:-\n\n' + query += f'```{franklinHTML}```\n\n' + query += f'2. \"Computed\" Styles (obtained from \"Computed\" tab) of all the elements inside this HTML:-\n\n' + query += f'{originalStyles}\n\n' + query += f'Generate \"CSS\" code for the given HTML block so that it styles the HTML block according to the provided \"Computed\" styles. Don\'t included the styles inline, instead generate a separate file for it (external css). Only generate the \"CSS\" code and no explanation.' + + with open("query.txt", 'w') as f: + f.write(query) + + json_data = { + "dialogue":{ + "question": query + }, + "llm_metadata": { + "llm_type": "azure_chat_openai", + "model_name": "gpt-4-32k", + "temperature": 0.2, + # "model_name": "gpt-4", + # "temperature": 0.0, + # "max_tokens": 8071, + # "top_p": 1.0, + # "frequency_penalty": 0, + # "presence_penalty": 0, + # "n": 1, + # "llm_type": "azure_chat_openai" + } + } + + openai_response = get_openai_response(azure_url, ims_org_id, api_key, temp_auth_token, json_data) + # print("OpenAI Response:", openai_response) + res = openai_response['generations'][0][0]['text'] + with open(css_file, 'w') as f: + f.write(res) + # return ("OpenAI Response: " + openai_response['generations'][0][0]['text']) + +# Firefall end ----------------------------------------------------------------------------------------------- + +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) + + originalStyles = 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 + const splitUrl = element.src.split('/').slice(-1)[0]; + + // Search for the file extension + const extensions = ['.jpg', '.png', '.webp']; + let fileName = splitUrl; + extensions.forEach(extension => { + if (splitUrl.includes(extension)) { + fileName = splitUrl.split(extension)[0] + extension; + } + }); + + return `src = "${fileName}"`; + } 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(originalStyles) + + return originalStyles + + except ElementHandleError: + pass + return None + +# ------------------------------------------------------------------------------------------------------------- + +from bs4 import BeautifulSoup +import shutil +# import urllib +# from urllib.request import Request, urlretrieve +# from urllib.error import HTTPError + +# def download_images(url, selector): + +# response = requests.get(url, stream=True, headers={'User-agent': 'Mozilla/6.0'}) +# soup = BeautifulSoup(response.text, 'html.parser') + +# img_tags = [] + +# modifiedSelector = selector[1:] +# if selector[0] == '.': +# img_tags += soup.find(class_ = modifiedSelector).find_all('img') +# else: +# img_tags += soup.find(id = modifiedSelector).find_all('img') + +# for img in img_tags: + +# # Split URL by the last backslash +# split_url = img['src'].rsplit('/', 1) +# file_name_with_query = split_url[1] + +# # Search for the file extension +# extensions = ['.jpg', '.png', '.webp'] +# img_name = file_name_with_query +# for extension in extensions: +# if extension in file_name_with_query: +# img_name = file_name_with_query.split(extension)[0] + extension +# break + +# r = requests.get(url+img['src'], stream=True, headers={'User-agent': 'Mozilla/6.0'}) +# if r.status_code == 200: +# with open(img_name, 'wb') as f: +# r.raw.decode_content = True +# shutil.copyfileobj(r.raw, f) + + # try: + # urlretrieve(img['src'], img_name) + # # print(f"Downloaded {img_name}") + # except HTTPError: + # urlretrieve(img_url, img_name) + # # except Exception as e: + # # print(f"Failed to download {img_name}: {str(e)}") + +# # Usage example +# download_images('https://www.elixirsolutions.com/', element_class='columncontainer') + +# ------------------------------------------------------------------------------------------------------------- + +async def regeneratedBlock(html_file, css_file, rebuilt_file): + with open(html_file, 'r') as file: + content = file.read() + + new_content = f'\n' + content + + with open(html_file, 'w') as file: + file.write(new_content) + + browser = await launch(handleSIGINT=False, handleSIGTERM=False, handleSIGHUP=False) + page = await browser.newPage() + await page.goto(f'file://{os.getcwd()}/{html_file}') + + await page.setViewport({"width": 3072, "height": 1920}) + await page.screenshot({'path': rebuilt_file}) + await browser.close() + +# -------------------------------------------------------------------------------------------------------------- + +async def highlightAndStyles(url, selector, franklinHTML): + # download_images(url, selector) + browser = await launch(handleSIGINT=False, handleSIGTERM=False, handleSIGHUP=False) + page = await browser.newPage() + await page.goto(url) + + text_file = "originalStyles.txt" + image_file = "originalScreenshot.png" + css_file = "franklinStyles.css" + html_file = "franklinHTML.html" + rebuilt_file = "regeneratedScreenshot.png" + + with open(html_file, 'w') as f: + f.write(franklinHTML) + + originalStyles = 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() + + await gptResponse(franklinHTML, originalStyles, css_file) + + await regeneratedBlock(html_file, css_file, rebuilt_file) + return image_file, rebuilt_file, text_file, css_file + +# -------------------------------------------------------------------------------------------------------------- + +with open('elixirsolutions.html', 'r') as f: + content1 = f.read() +with open('flickrblog.html', 'r') as f: + content2 = f.read() +with open('snoopdogg.html', 'r') as f: + content3 = f.read() +with open('gabnow.html', 'r') as f: + content4 = f.read() +with open('childrensradiofoundation.html', 'r') as f: + content5 = f.read() +with open('unicef.html', 'r') as f: + content6 = f.read() + +demo = gr.Interface( + highlightAndStyles, + [ + gr.Text(), + gr.Text(), + gr.Text() + ], + [ + gr.Image(), + gr.Image(), + gr.File(), + gr.File() + ], + examples=[ + ["https://www.elixirsolutions.com/", ".columncontainer", f'{content1}'], + ["https://blog.flickr.net/en", ".featured-post-wrap", f'{content2}'], + ["https://snoopdogg.com/", ".ae-outer-wrapper", f'{content3}'], + ["https://www.gabnow.org/", ".products", f'{content4}'], + ["https://childrensradiofoundation.org/", ".col-sm-6", f'{content5}'], + ["https://www.unicef.org.uk/", ".c-selected-blocks", f'{content6}'], + ], + title="Franklin CSS", + description="", +) + +demo.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. + + + diff --git a/flasktest/handSwithFFog.py b/flasktest/handSwithFFog.py new file mode 100644 index 0000000000000000000000000000000000000000..9991d630a552a80969d2000258a6d6958ceb6ada --- /dev/null +++ b/flasktest/handSwithFFog.py @@ -0,0 +1,449 @@ +# import asyncio +from pyppeteer import launch +from pyppeteer.errors import ElementHandleError +import gradio as gr + +# Firefall start --------------------------------------------------------------------------------------------- + +import os, json, requests + +# enter the client id from imss here +client_id = 'MDSR_Firefall' +client_secret = 's8e-8CGebu-kO3Vt_ICCNzQU8sCVYCHqcuFq' #enter the client secret from imss here +permanent_auth_code = 'eyJhbGciOiJSUzI1NiIsIng1dSI6Imltc19uYTEtc3RnMS1rZXktcGFjLTEuY2VyIiwia2lkIjoiaW1zX25hMS1zdGcxLWtleS1wYWMtMSIsIml0dCI6InBhYyJ9.eyJpZCI6Ik1EU1JfRmlyZWZhbGxfc3RnIiwidHlwZSI6ImF1dGhvcml6YXRpb25fY29kZSIsImNsaWVudF9pZCI6Ik1EU1JfRmlyZWZhbGwiLCJ1c2VyX2lkIjoiTURTUl9GaXJlZmFsbEBBZG9iZUlEIiwiYXMiOiJpbXMtbmExLXN0ZzEiLCJvdG8iOmZhbHNlLCJjcmVhdGVkX2F0IjoiMTY4MTE0NTIxNDk1MCIsInNjb3BlIjoic3lzdGVtIn0.Yoz7IPhmIBV2uNKl1CJJ9rJ0HmvDBQFbh0AihlHdsOa1E3yBs7WB9ilTCUVodifg8gh1yw4QRllV1NKS2RYeiGxQU7rXAF7SEnH_X_Tqdl735PBnBFL8sW_x76dzmT6MZIzynz8Ywu57qztvFnHoLMfJ7HsNt7rkOqF3IZByOinxyJzRTwMfygHSKjoQx6A4S7LbuQWjlqDbM9RaeCcakMEqGvSKqkLQvtMg40ZQYSNELoFtbATfwuVrHWOglAQS4A2FR24ziop137imu4HrTr-syDYki8VWV27WuGGo632_K2vJwqbaYjZvyrtsuBLH3fGGgXgyM5EA_Jk_lcMFog' #imss -> service tokens -> permanent auth token +ims_url = 'https://ims-na1-stg1.adobelogin.com/ims/token/v2' +firefall_client_id = "MDSR_Firefall" +ims_org_id = client_id +api_key = client_id +azure_url = 'https://firefall-stage.adobe.io/v1/completions' + +def get_openai_response(azure_url, ims_org_id, api_key, temp_auth_token, json_data): + headers = { + 'x-gw-ims-org-id': ims_org_id, + 'x-api-key': api_key, + 'Authorization': f'Bearer {temp_auth_token}', + 'Content-Type': 'application/json', + } + response = requests.post(azure_url, headers=headers, json=json_data) + return json.loads(response.text) + +def get_temp_auth_token(ims_url, client_id, client_secret, permanent_auth_code): + params = { + 'client_id': client_id, + 'client_secret': client_secret, + 'code': permanent_auth_code, + 'grant_type': 'authorization_code', + } + response = requests.post(ims_url, params=params) + return json.loads(response.text) + + +response = get_temp_auth_token(ims_url, client_id, client_secret, permanent_auth_code) +# print(response) +temp_auth_token = response['access_token'] + +async def gptResponse(franklinHTML, originalStyles, css_file): + query = f'I will provide you :-\n1. HTML code,\n2. \"Computed\" Styles (obtained from \"Computed\" tab) of all the elements inside this HTML.\n\nBased on these two information, can you generate \"CSS\" code for the given HTML so that it styles the HTML according to the provided \"Computed\" styles.\n\n' + query += f'1. HTML code:-\n\n' + query += f'```{franklinHTML}```\n\n' + query += f'2. \"Computed\" Styles (obtained from \"Computed\" tab) of all the elements inside this HTML:-\n\n' + query += f'{originalStyles}\n\n' + query += f'Generate \"CSS\" code for the given HTML block so that it styles the HTML block according to the provided \"Computed\" styles. Don\'t included the styles inline, instead generate a separate file for it (external css). Only generate the \"CSS\" code and no explanation.' + query += f'\n\nThe generated CSS code must be around 1000 tokens atleast' + + with open("query.txt", 'w') as f: + f.write(query) + + json_data = { + "dialogue":{ + "question": query + }, + "llm_metadata": { + "llm_type": "azure_chat_openai", + "model_name": "gpt-4-32k", + "temperature": 0.2, + # "model_name": "gpt-4", + # "temperature": 0.0, + # "max_tokens": 8071, + # "top_p": 1.0, + # "frequency_penalty": 0, + # "presence_penalty": 0, + # "n": 1, + # "llm_type": "azure_chat_openai" + } + } + + openai_response = get_openai_response(azure_url, ims_org_id, api_key, temp_auth_token, json_data) + # print("OpenAI Response:", openai_response) + res = openai_response['generations'][0][0]['text'] + with open(css_file, 'w') as f: + f.write(res) + # return ("OpenAI Response: " + openai_response['generations'][0][0]['text']) + +# Firefall end ----------------------------------------------------------------------------------------------- + +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) + + originalStyles = 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' || tagName === 'article') { // divs can be used for wrapping text as well + // Text-based elements + return `Text Content = "${element.textContent}"`; + } else if (tagName === 'img' || tagName === 'audio' || tagName === 'video') { + // Image, audio or video elements + let splitUrl = element.src.split('/').slice(-1)[0]; + if(element['data-src']){ + splitUrl = element['data-src'].split('/').slice(-1)[0]; + } + + // Search for the file extension + const extensions = ['.jpg', '.png', '.webp', '.svg']; + let fileName = splitUrl; + extensions.forEach(extension => { + if (splitUrl.includes(extension)) { + if(extension === '.svg'){ + fileName = splitUrl.split(extension)[0] + '.png'; + }else{ + fileName = splitUrl.split(extension)[0] + extension; + } + } + }); + + return `src = "${fileName}"`; + } 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]); + } + + const s1 = element.children.length ? "container" : contentType(element); + contentTypeIndex[s1] ? contentTypeIndex[s1]++ : contentTypeIndex[s1] = 1; + const elemName = `${s1}${contentTypeIndex[s1]}`; + + element.name = elemName; + + } + + + 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) { + 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]} ${childs[element.name] > 1 ? 'are' : 'is'} nested inside a container. Lets name this container as ${element.name}. The computed styles of ${element.name} are:-\n`; + } else{ + finalString += `Lets name ${s1} with ${elementIndentifier(element)} as ${element.name}. The computed styles of ${element.name} are:-\n`; + } + + 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(originalStyles) + + return originalStyles + + except ElementHandleError: + pass + return None + +# ------------------------------------------------------------------------------------------------------------- + +from bs4 import BeautifulSoup +import shutil +from urllib.parse import urlparse +# import urllib +# from urllib.request import Request, urlretrieve +# from urllib.error import HTTPError +from cairosvg import svg2png + +def download_images(url, selector): + + response = requests.get(url, stream=True, headers={'User-agent': 'Mozilla/6.0'}) + soup = BeautifulSoup(response.text, 'html.parser') + + img_tags = [] + + # can now and operate multiple class or ids but this assumes that selector will be for a div or block in originalDOM will be a div + img_tags += soup.select_one(f'div{selector}').find_all('img') + + # modifiedSelector = selector[1:] + # if selector[0] == '.': + # img_tags += soup.find(class_ = modifiedSelector).find_all('img') + # else: + # img_tags += soup.find(id = modifiedSelector).find_all('img') + + for img in img_tags: + + img_url = img['src'] + try: + img_url = img['data-src'] + except KeyError: + img_url = img['src'] + + # Split URL by the last backslash + split_url = img_url.rsplit('/', 1) + file_name_with_query = split_url[1] + + # Search for the file extension + extensions = ['.jpg', '.png', '.webp', '.svg'] + img_name = file_name_with_query + for extension in extensions: + if extension in file_name_with_query: + img_name = file_name_with_query.split(extension)[0] + extension + break + + try: + r = requests.get(img_url, stream=True, headers={'User-agent': 'Mozilla/6.0'}) + if r.status_code == 200: + with open(img_name, 'wb') as f: + r.raw.decode_content = True + shutil.copyfileobj(r.raw, f) + except: + parsed_url = urlparse(url) + scheme = parsed_url.scheme + netloc = parsed_url.netloc + homePage_url = f"{scheme}://{netloc}" + + new_url = homePage_url + img['src'] + + try: + r = requests.get(new_url, stream=True, headers={'User-agent': 'Mozilla/6.0'}) + if r.status_code == 200: + with open(img_name, 'wb') as f: + r.raw.decode_content = True + shutil.copyfileobj(r.raw, f) + except: + newer_url = img['currentSrc'] + try: + r = requests.get(newer_url, stream=True, headers={'User-agent': 'Mozilla/6.0'}) + if r.status_code == 200: + with open(img_name, 'wb') as f: + r.raw.decode_content = True + shutil.copyfileobj(r.raw, f) + except: + print(Exception) + + if '.svg' in img_name: + with open(img_name, 'r') as f: + svg_code = f.read() + img_name = img_name[:img_name.index('.svg')] + '.png' + svg2png(bytestring=svg_code,write_to=img_name) + +# # try: +# # urlretrieve(img['src'], img_name) +# # # print(f"Downloaded {img_name}") +# # except HTTPError: +# # urlretrieve(img_url, img_name) +# # # except Exception as e: +# # # print(f"Failed to download {img_name}: {str(e)}") + +# # # Usage example +# # download_images('https://www.elixirsolutions.com/', element_class='columncontainer') + +# ------------------------------------------------------------------------------------------------------------- + +async def regeneratedBlock(html_file, css_file, rebuilt_file): + with open(html_file, 'r') as file: + content = file.read() + + new_content = f'\n' + content + + with open(html_file, 'w') as file: + file.write(new_content) + + browser = await launch(handleSIGINT=False, handleSIGTERM=False, handleSIGHUP=False) + page = await browser.newPage() + await page.goto(f'file://{os.getcwd()}/{html_file}') + + await page.setViewport({"width": 3072, "height": 1920}) + await page.screenshot({'path': rebuilt_file}) + await browser.close() + +# -------------------------------------------------------------------------------------------------------------- + +async def highlightAndStyles(url, selector, franklinHTML): + download_images(url, selector) + browser = await launch(handleSIGINT=False, handleSIGTERM=False, handleSIGHUP=False) + page = await browser.newPage() + await page.goto(url) + + text_file = "originalStyles.txt" + image_file = "originalScreenshot.png" + css_file = "franklinStyles.css" + html_file = "franklinHTML.html" + rebuilt_file = "regeneratedScreenshot.png" + + with open(html_file, 'w') as f: + f.write(franklinHTML) + + originalStyles = 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() + + await gptResponse(franklinHTML, originalStyles, css_file) + + await regeneratedBlock(html_file, css_file, rebuilt_file) + return image_file, rebuilt_file, text_file, css_file + +# -------------------------------------------------------------------------------------------------------------- + +with open('elixirsolutions.html', 'r') as f: + content1 = f.read() +with open('flickrblog.html', 'r') as f: + content2 = f.read() +with open('snoopdogg.html', 'r') as f: + content3 = f.read() +with open('gabnow.html', 'r') as f: + content4 = f.read() +with open('childrensradiofoundation.html', 'r') as f: + content5 = f.read() +with open('unicef.html', 'r') as f: + content6 = f.read() +with open('countly.html', 'r') as f: + content7 = f.read() +with open('simpleset.html', 'r') as f: + content8 = f.read() + +demo = gr.Interface( + highlightAndStyles, + [ + gr.Text(), + gr.Text(), + gr.Text() + ], + [ + gr.Image(), + gr.Image(), + gr.File(), + gr.File() + ], + examples=[ + ["https://www.elixirsolutions.com/", ".columncontainer", f'{content1}'], + ["https://blog.flickr.net/en", ".featured-post-wrap", f'{content2}'], + ["https://snoopdogg.com/", ".ae-outer-wrapper", f'{content3}'], + ["https://www.gabnow.org/", ".woocommerce.columns-4", f'{content4}'], + ["https://childrensradiofoundation.org/", ".col-lg-8.col-sm-12", f'{content5}'], + ["https://www.unicef.org.uk/", ".c-selected-blocks", f'{content6}'], + ["https://countly.com/", ".grid-3-cards-ver-home", f'{content7}'], + ["https://simpleset.net/", ".studies", f'{content8}'], + ], + title="Franklin CSS", + description="", +) +demo.launch(share=False) + + + + +# 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. + + + diff --git a/flasktest/highlightAndStyles.py b/flasktest/highlightAndStyles.py new file mode 100644 index 0000000000000000000000000000000000000000..f0f61eebb0048bed50853d6c5bc92d2831d525dd --- /dev/null +++ b/flasktest/highlightAndStyles.py @@ -0,0 +1,90 @@ +import asyncio +from pyppeteer import launch +from pyppeteer.errors import ElementHandleError + +async def highlight_element(page, attribute): + try: + element = await page.querySelector(attribute) + 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, attribute, text_file): + try: + await page.waitForSelector(attribute) + + container_styles = await page.evaluate('''(attribute) => { + const container = document.querySelector(attribute); + const computedStyles = getComputedStyle(container); + const styles = {}; + for (let i = 0; i < computedStyles.length; i++) { + const prop = computedStyles[i]; + styles[prop] = computedStyles.getPropertyValue(prop); + } + return styles; + }''', attribute) + + styles = await page.evaluate('''(attribute) => { + const container = document.querySelector(attribute); + const elements = container.querySelectorAll("*"); + + const extractStyles = (element, tagName, index, totalIndex) => { + const computedStyles = getComputedStyle(element); + const styles = {}; + for (let i = 0; i < computedStyles.length; i++) { + const prop = computedStyles[i]; + styles[prop] = computedStyles.getPropertyValue(prop); + } + return styles; + }; + + const result = {}; + elements.forEach((element, index) => { + const tagName = element.tagName.toLowerCase(); + const tagIndex = [...container.querySelectorAll(tagName)].indexOf(element); + const totalIndex = index; + const variableName = `${tagName}-${tagIndex}-${totalIndex}`; + result[variableName] = extractStyles(element, tagName, tagIndex, totalIndex); + }); + + return result; + }''', attribute) + + with open(text_file, 'w') as f: + f.write(f'Styles of container {attribute}:\n') + for prop, value in container_styles.items(): + f.write(f'{prop}: {value}\n') + f.write('\n') + + for variable_name, element_styles in styles.items(): + f.write(f'Here goes the styles of {variable_name}:\n') + for prop, value in element_styles.items(): + f.write(f'{prop}: {value}\n') + f.write('\n') + + except ElementHandleError: + pass + return None + +async def highlightAndStyles(url, attribute): + browser = await launch() + page = await browser.newPage() + await page.goto(url) + + text_file = "styles.txt" + image_file = "screenshot.png" + await getStyles(page, attribute, text_file) + styles = await highlight_element(page, attribute) + + await page.screenshot({'path': image_file, 'fullPage': True}) + await browser.close() + +url = input("Enter the URL of the web page: ") +attribute = input("Enter the class or ID attribute to highlight (e.g., .container or #element): ") + +asyncio.get_event_loop().run_until_complete(highlightAndStyles(url, attribute)) +print("Screenshot and styles saved successfully!") diff --git a/flasktest/imageDownloader.py b/flasktest/imageDownloader.py new file mode 100644 index 0000000000000000000000000000000000000000..c39453e3295feaec58b5ade68c0c256b0d672872 --- /dev/null +++ b/flasktest/imageDownloader.py @@ -0,0 +1,67 @@ +# import os + +# css_file = "newFile.css" +# print(f'file:{os.getcwd()}{css_file}') + +import requests +from bs4 import BeautifulSoup +import shutil + +def download_images(url, selector): + + response = requests.get(url, stream=True, headers={'User-agent': 'Mozilla/6.0'}) + soup = BeautifulSoup(response.text, 'html.parser') + + # print(soup) + img_tags = [] + + modifiedSelector = selector[1:] + if selector[0] == '.': + img_tags += soup.select_one(f'div{selector}').find_all('img') + else: + img_tags += soup.find(id = modifiedSelector).find_all('img') + + try: + print(img_tags[0]['data-src']) + except Exception as e: + print(e) + # if(img_tags[0]['data-src']): + # print(img_tags[0]['data-src']) + # else: + # print('Yo') + # for img in img_tags: + + # # Split URL by the last backslash + # split_url = img['src'].rsplit('/', 1) + # file_name_with_query = split_url[1] + + # # Search for the file extension + # extensions = ['.jpg', '.png', '.webp'] + # img_name = file_name_with_query + # for extension in extensions: + # if extension in file_name_with_query: + # img_name = file_name_with_query.split(extension)[0] + extension + # break + + # r = requests.get(img['src'], stream=True, headers={'User-agent': 'Mozilla/6.0'}) + # if r.status_code == 200: + # with open(img_name, 'wb') as f: + # r.raw.decode_content = True + # shutil.copyfileobj(r.raw, f) + # else: + # print(r.status_code) + + # try: + # urlretrieve(img['src'], img_name) + # # print(f"Downloaded {img_name}") + # except HTTPError: + # urlretrieve(img_url, img_name) + # # except Exception as e: + # # print(f"Failed to download {img_name}: {str(e)}") +url = input("URL: ") +selector = input("Selector: ") + +download_images(url,selector) +# # Usage example +# download_images('https://www.elixirsolutions.com/', element_class='columncontainer') + diff --git a/flasktest/originalScreenshot.png b/flasktest/originalScreenshot.png new file mode 100644 index 0000000000000000000000000000000000000000..eb3edb4294a9ec166d0de6e8c182de554febfac5 --- /dev/null +++ b/flasktest/originalScreenshot.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c35d59be6e512d8b9f6f540d7b66e150cb3eefddbc2a150c17a2f7ef34e96e31 +size 3152536 diff --git a/flasktest/originalStyles.txt b/flasktest/originalStyles.txt new file mode 100644 index 0000000000000000000000000000000000000000..90b2f55acf1af3c17abf449ffc6417e2be11cc5c --- /dev/null +++ b/flasktest/originalStyles.txt @@ -0,0 +1,528 @@ +Lets name link with href = "https://simpleset.net/cs/ericaholmes" as link1. The computed styles of link1 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(255, 255, 255) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 700 + height: 59px + line-height: normal + margin-bottom: 0px + margin-left: 47.7031px + margin-right: 47.7031px + margin-top: 32px + padding-bottom: 20px + padding-left: 20px + padding-right: 20px + padding-top: 20px + text-align: center + width: 540.594px"" + +Lets name text with Text Content = ""My motto is teach a person to fish — I breed a culture of being able to maintain and help yourself through a sustainable recovery, and SimpleSet has been a huge player in this."" as text1. The computed styles of text1 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 400 + height: 52px + line-height: 26px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 636px"" + +Lets name text with Text Content = "Sports Physio YYC" as text2. The computed styles of text2 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 28px + font-weight: 700 + height: 41px + line-height: 41px + margin-bottom: 32px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: center + width: 636px"" + +link1,text1,text2 is nested inside a container. Lets name this container as container1. The computed styles of container1 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 400 + height: 316px + line-height: normal + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 50px + padding-left: 26px + padding-right: 26px + padding-top: 50px + text-align: start + width: 688px"" + +Lets name image with src = "cb978c.jpg" as image1. The computed styles of image1 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 400 + height: 454.078px + line-height: normal + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 688px"" + +image1 is nested inside a container. Lets name this container as container2. The computed styles of container2 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 400 + height: 454.078px + line-height: normal + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 454.078px + text-align: start + width: 688px"" + +container1,container2 is nested inside a container. Lets name this container as container3. The computed styles of container3 are:- +"" background-color: rgb(238, 238, 238) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 400 + height: 770.078px + line-height: normal + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 688px"" + +Lets name link with href = "https://simpleset.net/cs/phitwell" as link2. The computed styles of link2 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(255, 255, 255) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 700 + height: 59px + line-height: normal + margin-bottom: 0px + margin-left: 47.7031px + margin-right: 47.7031px + margin-top: 32px + padding-bottom: 20px + padding-left: 20px + padding-right: 20px + padding-top: 20px + text-align: center + width: 540.594px"" + +Lets name text with Text Content = ""There is an unbeatable value for the cost of [SimpleSet]. We found the intuitive functionality [of SimpleSet] perfect for our high paced clinic, where our clinicians were able to pick up and use the programming without extensive training."" as text3. The computed styles of text3 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 400 + height: 78px + line-height: 26px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 636px"" + +Lets name text with Text Content = "PHIT Well" as text4. The computed styles of text4 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 28px + font-weight: 700 + height: 41px + line-height: 41px + margin-bottom: 32px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: center + width: 636px"" + +link2,text3,text4 is nested inside a container. Lets name this container as container4. The computed styles of container4 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 400 + height: 342px + line-height: normal + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 50px + padding-left: 26px + padding-right: 26px + padding-top: 50px + text-align: start + width: 688px"" + +Lets name image with src = "dbf731.jpg" as image2. The computed styles of image2 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 400 + height: 454.078px + line-height: normal + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 688px"" + +image2 is nested inside a container. Lets name this container as container5. The computed styles of container5 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 400 + height: 454.078px + line-height: normal + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 454.078px + text-align: start + width: 688px"" + +container4,container5 is nested inside a container. Lets name this container as container6. The computed styles of container6 are:- +"" background-color: rgb(238, 238, 238) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 400 + height: 796.078px + line-height: normal + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 688px"" + +Lets name link with href = "https://simpleset.net/cs/uplift" as link3. The computed styles of link3 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(255, 255, 255) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 700 + height: 59px + line-height: normal + margin-bottom: 0px + margin-left: 47.7031px + margin-right: 47.7031px + margin-top: 32px + padding-bottom: 20px + padding-left: 20px + padding-right: 20px + padding-top: 20px + text-align: center + width: 540.594px"" + +Lets name text with Text Content = ""[SimpleSet is] really good! Super quick to setup... Great variety of exercises... You can create and send a high quality, easily digestible program to a patient within minutes, making it a win-win-win for the patient, clinician and business owner."" as text5. The computed styles of text5 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 400 + height: 78px + line-height: 26px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 636px"" + +Lets name text with Text Content = "Uplift Exercise Physiology" as text6. The computed styles of text6 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 28px + font-weight: 700 + height: 41px + line-height: 41px + margin-bottom: 32px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: center + width: 636px"" + +link3,text5,text6 is nested inside a container. Lets name this container as container7. The computed styles of container7 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 400 + height: 342px + line-height: normal + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 50px + padding-left: 26px + padding-right: 26px + padding-top: 50px + text-align: start + width: 688px"" + +Lets name image with src = "a827d3.jpg" as image3. The computed styles of image3 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 400 + height: 454.078px + line-height: normal + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 688px"" + +image3 is nested inside a container. Lets name this container as container8. The computed styles of container8 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 400 + height: 454.078px + line-height: normal + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 454.078px + text-align: start + width: 688px"" + +container7,container8 is nested inside a container. Lets name this container as container9. The computed styles of container9 are:- +"" background-color: rgb(238, 238, 238) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 400 + height: 796.078px + line-height: normal + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 688px"" + +container3,container6,container9 is nested inside a container. Lets name this container as container10. The computed styles of container10 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: grid + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 400 + height: 2364.23px + line-height: normal + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 688px"" + diff --git a/flasktest/output.png b/flasktest/output.png new file mode 100644 index 0000000000000000000000000000000000000000..8c5fcea3081d9c2e699abb6de803a6bcbf1bf292 Binary files /dev/null and b/flasktest/output.png differ diff --git a/flasktest/output1.png b/flasktest/output1.png new file mode 100644 index 0000000000000000000000000000000000000000..8c5fcea3081d9c2e699abb6de803a6bcbf1bf292 Binary files /dev/null and b/flasktest/output1.png differ diff --git a/flasktest/query.txt b/flasktest/query.txt new file mode 100644 index 0000000000000000000000000000000000000000..7190262f556c9a517b54fea9cde20a744b4a0c82 --- /dev/null +++ b/flasktest/query.txt @@ -0,0 +1,591 @@ +I will provide you :- +1. HTML code, +2. "Computed" Styles (obtained from "Computed" tab) of all the elements inside this HTML. + +Based on these two information, can you generate "CSS" code for the given HTML so that it styles the HTML according to the provided "Computed" styles. + +1. HTML code:- + +```
+
+
+ + + + + + +
+
+

Uplift Exercise Physiology

+

"""[SimpleSet is] really good! Super quick to setup... Great variety of exercises... You can create and send a high quality, easily digestible program to a patient within minutes, making it a win-win-win for the patient, clinician and business owner."""

+ Read More... +
+
+
+
+ + + + + + +
+
+

PHIT Well

+

"""There is an unbeatable value for the cost of [SimpleSet]. We found the intuitive functionality [of SimpleSet] perfect for our high paced clinic, where our clinicians were able to pick up and use the programming without extensive training."""

+ Read More... +
+
+
+
+ + + + + + +
+
+

Sports Physio YYC

+

""My motto is teach a person to fish — I breed a culture of being able to maintain and help yourself through a sustainable recovery, and SimpleSet has been a huge player in this.""

+ Read More... +
+
+
``` + +2. "Computed" Styles (obtained from "Computed" tab) of all the elements inside this HTML:- + +Lets name link with href = "https://simpleset.net/cs/ericaholmes" as link1. The computed styles of link1 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(255, 255, 255) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 700 + height: 59px + line-height: normal + margin-bottom: 0px + margin-left: 47.7031px + margin-right: 47.7031px + margin-top: 32px + padding-bottom: 20px + padding-left: 20px + padding-right: 20px + padding-top: 20px + text-align: center + width: 540.594px"" + +Lets name text with Text Content = ""My motto is teach a person to fish — I breed a culture of being able to maintain and help yourself through a sustainable recovery, and SimpleSet has been a huge player in this."" as text1. The computed styles of text1 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 400 + height: 52px + line-height: 26px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 636px"" + +Lets name text with Text Content = "Sports Physio YYC" as text2. The computed styles of text2 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 28px + font-weight: 700 + height: 41px + line-height: 41px + margin-bottom: 32px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: center + width: 636px"" + +link1,text1,text2 is nested inside a container. Lets name this container as container1. The computed styles of container1 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 400 + height: 316px + line-height: normal + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 50px + padding-left: 26px + padding-right: 26px + padding-top: 50px + text-align: start + width: 688px"" + +Lets name image with src = "cb978c.jpg" as image1. The computed styles of image1 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 400 + height: 454.078px + line-height: normal + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 688px"" + +image1 is nested inside a container. Lets name this container as container2. The computed styles of container2 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 400 + height: 454.078px + line-height: normal + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 454.078px + text-align: start + width: 688px"" + +container1,container2 is nested inside a container. Lets name this container as container3. The computed styles of container3 are:- +"" background-color: rgb(238, 238, 238) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 400 + height: 770.078px + line-height: normal + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 688px"" + +Lets name link with href = "https://simpleset.net/cs/phitwell" as link2. The computed styles of link2 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(255, 255, 255) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 700 + height: 59px + line-height: normal + margin-bottom: 0px + margin-left: 47.7031px + margin-right: 47.7031px + margin-top: 32px + padding-bottom: 20px + padding-left: 20px + padding-right: 20px + padding-top: 20px + text-align: center + width: 540.594px"" + +Lets name text with Text Content = ""There is an unbeatable value for the cost of [SimpleSet]. We found the intuitive functionality [of SimpleSet] perfect for our high paced clinic, where our clinicians were able to pick up and use the programming without extensive training."" as text3. The computed styles of text3 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 400 + height: 78px + line-height: 26px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 636px"" + +Lets name text with Text Content = "PHIT Well" as text4. The computed styles of text4 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 28px + font-weight: 700 + height: 41px + line-height: 41px + margin-bottom: 32px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: center + width: 636px"" + +link2,text3,text4 is nested inside a container. Lets name this container as container4. The computed styles of container4 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 400 + height: 342px + line-height: normal + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 50px + padding-left: 26px + padding-right: 26px + padding-top: 50px + text-align: start + width: 688px"" + +Lets name image with src = "dbf731.jpg" as image2. The computed styles of image2 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 400 + height: 454.078px + line-height: normal + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 688px"" + +image2 is nested inside a container. Lets name this container as container5. The computed styles of container5 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 400 + height: 454.078px + line-height: normal + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 454.078px + text-align: start + width: 688px"" + +container4,container5 is nested inside a container. Lets name this container as container6. The computed styles of container6 are:- +"" background-color: rgb(238, 238, 238) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 400 + height: 796.078px + line-height: normal + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 688px"" + +Lets name link with href = "https://simpleset.net/cs/uplift" as link3. The computed styles of link3 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(255, 255, 255) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 700 + height: 59px + line-height: normal + margin-bottom: 0px + margin-left: 47.7031px + margin-right: 47.7031px + margin-top: 32px + padding-bottom: 20px + padding-left: 20px + padding-right: 20px + padding-top: 20px + text-align: center + width: 540.594px"" + +Lets name text with Text Content = ""[SimpleSet is] really good! Super quick to setup... Great variety of exercises... You can create and send a high quality, easily digestible program to a patient within minutes, making it a win-win-win for the patient, clinician and business owner."" as text5. The computed styles of text5 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 400 + height: 78px + line-height: 26px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 636px"" + +Lets name text with Text Content = "Uplift Exercise Physiology" as text6. The computed styles of text6 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 28px + font-weight: 700 + height: 41px + line-height: 41px + margin-bottom: 32px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: center + width: 636px"" + +link3,text5,text6 is nested inside a container. Lets name this container as container7. The computed styles of container7 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 400 + height: 342px + line-height: normal + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 50px + padding-left: 26px + padding-right: 26px + padding-top: 50px + text-align: start + width: 688px"" + +Lets name image with src = "a827d3.jpg" as image3. The computed styles of image3 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 400 + height: 454.078px + line-height: normal + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 688px"" + +image3 is nested inside a container. Lets name this container as container8. The computed styles of container8 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 400 + height: 454.078px + line-height: normal + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 454.078px + text-align: start + width: 688px"" + +container7,container8 is nested inside a container. Lets name this container as container9. The computed styles of container9 are:- +"" background-color: rgb(238, 238, 238) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: block + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 400 + height: 796.078px + line-height: normal + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 688px"" + +container3,container6,container9 is nested inside a container. Lets name this container as container10. The computed styles of container10 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(17, 17, 17) + display: grid + flex-direction: row + float: none + font-family: Lato, "Trebuchet MS", sans-serif + font-size: 16px + font-weight: 400 + height: 2364.23px + line-height: normal + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 688px"" + + + +Generate "CSS" code for the given HTML block so that it styles the HTML block according to the provided "Computed" styles. Don't included the styles inline, instead generate a separate file for it (external css). Only generate the "CSS" code and no explanation. + +The generated CSS code must be around 1000 tokens atleast \ No newline at end of file diff --git a/flasktest/regeneratedScreenshot.png b/flasktest/regeneratedScreenshot.png new file mode 100644 index 0000000000000000000000000000000000000000..609802d8c0db1eeeadd13f19197aa54239065629 Binary files /dev/null and b/flasktest/regeneratedScreenshot.png differ diff --git a/flasktest/screenshot.png b/flasktest/screenshot.png new file mode 100644 index 0000000000000000000000000000000000000000..4ef863e903944808b91e113797db6be17b64ccfb --- /dev/null +++ b/flasktest/screenshot.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1942d25d50c5723da85f3394e37f06258f2b9732e36f5c602295047fcb07c4f2 +size 1560487 diff --git a/flasktest/simpleset.html b/flasktest/simpleset.html new file mode 100644 index 0000000000000000000000000000000000000000..f5b692722c7b64d389b485bee7f759df584d37f7 --- /dev/null +++ b/flasktest/simpleset.html @@ -0,0 +1,47 @@ +
+
+
+ + + + + + +
+
+

Uplift Exercise Physiology

+

"""[SimpleSet is] really good! Super quick to setup... Great variety of exercises... You can create and send a high quality, easily digestible program to a patient within minutes, making it a win-win-win for the patient, clinician and business owner."""

+ Read More... +
+
+
+
+ + + + + + +
+
+

PHIT Well

+

"""There is an unbeatable value for the cost of [SimpleSet]. We found the intuitive functionality [of SimpleSet] perfect for our high paced clinic, where our clinicians were able to pick up and use the programming without extensive training."""

+ Read More... +
+
+
+
+ + + + + + +
+
+

Sports Physio YYC

+

""My motto is teach a person to fish — I breed a culture of being able to maintain and help yourself through a sustainable recovery, and SimpleSet has been a huge player in this.""

+ Read More... +
+
+
\ No newline at end of file diff --git a/flasktest/snoop-album-bodr.jpg b/flasktest/snoop-album-bodr.jpg new file mode 100644 index 0000000000000000000000000000000000000000..07f3797b6ebf9e8906e51e32287e67aba5a4dfa4 Binary files /dev/null and b/flasktest/snoop-album-bodr.jpg differ diff --git a/flasktest/snoopdogg.css b/flasktest/snoopdogg.css new file mode 100644 index 0000000000000000000000000000000000000000..93630988fe92ada4bd050c719cfc465f0ebbd622 --- /dev/null +++ b/flasktest/snoopdogg.css @@ -0,0 +1,3 @@ +img { + display: inline-block; +} \ No newline at end of file diff --git a/flasktest/snoopdogg.html b/flasktest/snoopdogg.html new file mode 100644 index 0000000000000000000000000000000000000000..e3d303c60ee76f8a39f1d184cabdf880d303b184 --- /dev/null +++ b/flasktest/snoopdogg.html @@ -0,0 +1,44 @@ +
+
+
+ + + + + + +
+
+

B.O.D.R. / 2022

+

View Album

+
+
+
+
+ + + + + + +
+
+

ALGORITHM / 2021

+

View Album

+
+
+
+
+ + + + + + +
+
+

FROM THE STREET 2 THA SUITES / 2021

+

View Album

+
+
+
\ No newline at end of file diff --git a/flasktest/snoopdoggDebug.html b/flasktest/snoopdoggDebug.html new file mode 100644 index 0000000000000000000000000000000000000000..f3236e73f45b052516487f8e23741c433d4c4936 --- /dev/null +++ b/flasktest/snoopdoggDebug.html @@ -0,0 +1,45 @@ + +
+
+
+ + + + + + +
+
+

B.O.D.R. / 2022

+

View Album

+
+
+
+
+ + + + + + +
+
+

ALGORITHM / 2021

+

View Album

+
+
+
+
+ + + + + + +
+
+

FROM THE STREET 2 THA SUITES / 2021

+

View Album

+
+
+
\ No newline at end of file diff --git a/flasktest/styles.js b/flasktest/styles.js new file mode 100644 index 0000000000000000000000000000000000000000..74e49e5ffd0ac54adaca5942063f1818d16e697c --- /dev/null +++ b/flasktest/styles.js @@ -0,0 +1,125 @@ +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 && element.tagName.toLowerCase() !== "link") { + 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 += `${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) { + finalString += `Lets name ${s1} with ${elementIndentifier(element)} as ${element.name}. The computed styles of ${element.name} are:-\n`; + } + + // if(element.children.length === 1){ + // childs[element.parentElement.name].push(element.children[0].name); + // } + + 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" + ]; + for (let i = 0; i < computedStyles.length; i++) { + const prop = computedStyles[i]; + if (desired_properties.includes(prop)) + finalString += `${prop}: ${computedStyles.getPropertyValue(prop)}; `; + } + finalString += `\n`; + } + +} + +const rootElement = document.querySelector('.columncontainer'); +nameElems(rootElement); +postorderTraversal(rootElement); +finalString + ','; diff --git a/flasktest/styles.txt b/flasktest/styles.txt new file mode 100644 index 0000000000000000000000000000000000000000..33dc832c254755e75edb6eaae45df8fba1b1a87d --- /dev/null +++ b/flasktest/styles.txt @@ -0,0 +1,460 @@ +Lets name link with href = "https://www.elixirsolutions.com/members" as link1. The computed styles of link1 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(2, 76, 153) + display: inline + flex-direction: row + float: none + font-family: proxima-nova, sans-serif + font-size: 18px + font-weight: 800 + height: auto + line-height: 18px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: auto"" + +Lets name text with Text Content = "Learn more about how Elixir can help you better manage your prescription benefits. Get answers about mail order, specialty and find forms and resources." as text1. The computed styles of text1 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(36, 36, 36) + display: block + flex-direction: row + float: none + font-family: proxima-nova, sans-serif + font-size: 16px + font-weight: 400 + height: 120px + line-height: 24px + margin-bottom: 25px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 239.984px"" + +Lets name text with Text Content = "Have Questions?" as text2. The computed styles of text2 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(0, 34, 80) + display: block + flex-direction: row + float: none + font-family: proxima-nova, sans-serif + font-size: 20px + font-weight: 700 + height: 24px + line-height: 24px + margin-bottom: 15px + margin-left: 0px + margin-right: 0px + margin-top: 15px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 239.984px"" + +Lets name image with src = "https://www.elixirsolutions.com/content/dam/elixirdotcom/home/Have-Questions_304x184.jpg" as image1. The computed styles of image1 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(36, 36, 36) + display: inline + flex-direction: row + float: none + font-family: proxima-nova, sans-serif + font-size: 16px + font-weight: 400 + height: 145.25px + line-height: 16px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 239.984px"" + +link1,text1,text2,image1 are nested inside a container. Lets name this container as container1. The computed styles of container1 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(36, 36, 36) + display: block + flex-direction: row + float: none + font-family: proxima-nova, sans-serif + font-size: 16px + font-weight: 400 + height: 365.25px + line-height: 16px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 239.984px"" + +Lets name text with Text Content = " + + + +" as text3. The computed styles of text3 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(36, 36, 36) + display: block + flex-direction: row + float: none + font-family: proxima-nova, sans-serif + font-size: 16px + font-weight: 400 + height: 0px + line-height: 16px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 239.984px"" + +Lets name link with href = "https://www.elixirsolutions.com/members/about-mail" as link2. The computed styles of link2 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(2, 76, 153) + display: inline + flex-direction: row + float: none + font-family: proxima-nova, sans-serif + font-size: 18px + font-weight: 800 + height: auto + line-height: 18px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: auto"" + +Lets name text with Text Content = "To fill or refill prescriptions by mail, log into your Member Portal. Track the status of your order, transfer prescriptions, view your medication history and more. " as text4. The computed styles of text4 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(36, 36, 36) + display: block + flex-direction: row + float: none + font-family: proxima-nova, sans-serif + font-size: 16px + font-weight: 400 + height: 120px + line-height: 24px + margin-bottom: 25px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 239.984px"" + +Lets name text with Text Content = "Medication Home Delivery" as text5. The computed styles of text5 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(0, 34, 80) + display: block + flex-direction: row + float: none + font-family: proxima-nova, sans-serif + font-size: 20px + font-weight: 700 + height: 24px + line-height: 24px + margin-bottom: 15px + margin-left: 0px + margin-right: 0px + margin-top: 15px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 239.984px"" + +Lets name image with src = "https://www.elixirsolutions.com/content/dam/elixirdotcom/home/Medication-Home-Delivery_304x184.jpg" as image2. The computed styles of image2 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(36, 36, 36) + display: inline + flex-direction: row + float: none + font-family: proxima-nova, sans-serif + font-size: 16px + font-weight: 400 + height: 145.25px + line-height: 16px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 239.984px"" + +link2,text4,text5,image2 are nested inside a container. Lets name this container as container2. The computed styles of container2 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(36, 36, 36) + display: block + flex-direction: row + float: none + font-family: proxima-nova, sans-serif + font-size: 16px + font-weight: 400 + height: 365.25px + line-height: 16px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 239.984px"" + +text3,container2 are nested inside a container. Lets name this container as container3. The computed styles of container3 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(36, 36, 36) + display: block + flex-direction: row + float: left + font-family: proxima-nova, sans-serif + font-size: 16px + font-weight: 400 + height: 365.25px + line-height: 16px + margin-bottom: 0px + margin-left: 0px + margin-right: 15px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 239.984px"" + +Lets name link with href = "https://www.elixirsolutions.com/register&login" as link3. The computed styles of link3 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(2, 76, 153) + display: inline + flex-direction: row + float: none + font-family: proxima-nova, sans-serif + font-size: 18px + font-weight: 800 + height: auto + line-height: 18px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: auto"" + +Lets name text with Text Content = "For information on your prescription benefits, log into your Member Portal. Find ways to save, review your coverage, find a network pharmacy and more. " as text6. The computed styles of text6 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(36, 36, 36) + display: block + flex-direction: row + float: none + font-family: proxima-nova, sans-serif + font-size: 16px + font-weight: 400 + height: 120px + line-height: 24px + margin-bottom: 25px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 239.984px"" + +Lets name text with Text Content = "My Prescription Benefits" as text7. The computed styles of text7 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(0, 34, 80) + display: block + flex-direction: row + float: none + font-family: proxima-nova, sans-serif + font-size: 20px + font-weight: 700 + height: 24px + line-height: 24px + margin-bottom: 15px + margin-left: 0px + margin-right: 0px + margin-top: 15px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 239.984px"" + +Lets name image with src = "https://www.elixirsolutions.com/content/dam/elixirdotcom/home/My-Prescription-Benefits_304x184.jpg" as image3. The computed styles of image3 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(36, 36, 36) + display: inline + flex-direction: row + float: none + font-family: proxima-nova, sans-serif + font-size: 16px + font-weight: 400 + height: 145.25px + line-height: 16px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 239.984px"" + +link3,text6,text7,image3, are nested inside a container. Lets name this container as container4. The computed styles of container4 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(36, 36, 36) + display: block + flex-direction: row + float: none + font-family: proxima-nova, sans-serif + font-size: 16px + font-weight: 400 + height: 365.25px + line-height: 16px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 239.984px"" + +container1,container3,container4 are nested inside a container. Lets name this container as container5. The computed styles of container5 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: both + color: rgb(36, 36, 36) + display: block + flex-direction: row + float: none + font-family: proxima-nova, sans-serif + font-size: 16px + font-weight: 400 + height: 365.25px + line-height: 16px + margin-bottom: 48px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 750px"" + +container5, are nested inside a container. Lets name this container as container6. The computed styles of container6 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(0, 0, 0) + display: block + flex-direction: row + float: none + font-family: proxima-nova, sans-serif + font-size: 16px + font-weight: 400 + height: 413.25px + line-height: 16px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 25px + padding-right: 25px + padding-top: 0px + text-align: start + width: 800px"" + diff --git a/flasktest/styles22bt.py b/flasktest/styles22bt.py new file mode 100644 index 0000000000000000000000000000000000000000..92fa6529752a16d7383f128eafae600fd791a317 --- /dev/null +++ b/flasktest/styles22bt.py @@ -0,0 +1,168 @@ +import asyncio +import pyppeteer + + +async def extract_styles(url, selector, output_file): + + browser = await pyppeteer.launch() + page = await browser.newPage() + await page.goto(url) + + await page.waitForSelector(selector) + + originalStyles = 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 + const splitUrl = element.src.split('/').slice(-1)[0]; + + // Search for the file extension + const extensions = ['.jpg', '.png', '.webp']; + let fileName = splitUrl; + extensions.forEach(extension => { + if (splitUrl.includes(extension)) { + fileName = splitUrl.split( + extension)[0] + extension; + } + }); + + return `src = "${fileName}"`; + } 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(output_file, 'w') as f: + f.write(originalStyles) + + # return originalStyles + + await browser.close() + print(f'Styles of container {selector} and elements inside it saved to {output_file}') + +url = input("Enter the URL: ") +selector = input("Enter the class/id attribute of the container element: ") +output_file = "styles22bt.txt" + +asyncio.get_event_loop().run_until_complete( + extract_styles(url, selector, output_file)) diff --git a/flasktest/styles22bt.txt b/flasktest/styles22bt.txt new file mode 100644 index 0000000000000000000000000000000000000000..c567e31eb6c7d0ebec8a2a88540a5d888c08f02f --- /dev/null +++ b/flasktest/styles22bt.txt @@ -0,0 +1,288 @@ +Lets name link with href = "https://blog.flickr.net/en/2023/05/23/16-questions-about-one-photo-with-hari-k-patibanda/" as link1. The computed styles of link1 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(33, 33, 36) + display: inline + flex-direction: row + float: none + font-family: "Proxima Light", Helvetica, Arial, "Lucida Grande", sans-serif + font-size: 18px + font-weight: 400 + height: auto + line-height: 23.4px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: auto"" + +Lets name image with src = "52789698833_0364bf6445_b.jpg" as image1. The computed styles of image1 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(0, 141, 223) + display: inline + flex-direction: row + float: none + font-family: "Proxima Regular", Helvetica, Arial, "Lucida Grande", sans-serif + font-size: 16px + font-weight: 400 + height: 144.891px + line-height: 24px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 219.312px"" + +link1,image1 are nested inside a container. Lets name this container as container1. The computed styles of container1 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(33, 33, 36) + display: block + flex-direction: row + float: left + font-family: "Proxima Regular", Helvetica, Arial, "Lucida Grande", sans-serif + font-size: 16px + font-weight: 400 + height: 197.891px + line-height: 24px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 219.312px"" + +Lets name link with href = "https://blog.flickr.net/en/2023/06/08/celebrate-world-ocean-day-2023/" as link2. The computed styles of link2 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(33, 33, 36) + display: inline + flex-direction: row + float: none + font-family: "Proxima Light", Helvetica, Arial, "Lucida Grande", sans-serif + font-size: 18px + font-weight: 400 + height: auto + line-height: 23.4px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: auto"" + +Lets name image with src = "39784076765_0a9e81d191_b.jpg" as image2. The computed styles of image2 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(0, 141, 223) + display: inline + flex-direction: row + float: none + font-family: "Proxima Regular", Helvetica, Arial, "Lucida Grande", sans-serif + font-size: 16px + font-weight: 400 + height: 144.891px + line-height: 24px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 219.312px"" + +link2,image2 are nested inside a container. Lets name this container as container2. The computed styles of container2 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(33, 33, 36) + display: block + flex-direction: row + float: left + font-family: "Proxima Regular", Helvetica, Arial, "Lucida Grande", sans-serif + font-size: 16px + font-weight: 400 + height: 197.891px + line-height: 24px + margin-bottom: 0px + margin-left: 39px + margin-right: 39px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 219.312px"" + +Lets name link with href = "https://blog.flickr.net/en/2023/06/09/weekly-snapshot-with-flickr-social-6-09-2023/" as link3. The computed styles of link3 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(33, 33, 36) + display: inline + flex-direction: row + float: none + font-family: "Proxima Light", Helvetica, Arial, "Lucida Grande", sans-serif + font-size: 18px + font-weight: 400 + height: auto + line-height: 23.4px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: auto"" + +Lets name image with src = "52959407600_454f5e13cc_b.jpg" as image3. The computed styles of image3 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(0, 141, 223) + display: inline + flex-direction: row + float: none + font-family: "Proxima Regular", Helvetica, Arial, "Lucida Grande", sans-serif + font-size: 16px + font-weight: 400 + height: 144.891px + line-height: 24px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 219.312px"" + +link3,image3 are nested inside a container. Lets name this container as container3. The computed styles of container3 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(33, 33, 36) + display: block + flex-direction: row + float: left + font-family: "Proxima Regular", Helvetica, Arial, "Lucida Grande", sans-serif + font-size: 16px + font-weight: 400 + height: 197.891px + line-height: 24px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 219.312px"" + +container1,container2,container3 are nested inside a container. Lets name this container as container4. The computed styles of container4 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(33, 33, 36) + display: block + flex-direction: row + float: none + font-family: "Proxima Regular", Helvetica, Arial, "Lucida Grande", sans-serif + font-size: 16px + font-weight: 400 + height: 197.891px + line-height: 24px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 736px"" + +Lets name text with Text Content = "Featured" as text1. The computed styles of text1 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: both + color: rgb(0, 0, 0) + display: block + flex-direction: row + float: none + font-family: "Proxima Light", Helvetica, Arial, "Lucida Grande", sans-serif + font-size: 24px + font-weight: 400 + height: 27px + line-height: 27.6px + margin-bottom: 6px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 0px + padding-right: 0px + padding-top: 0px + text-align: start + width: 736px"" + +container4,text1 are nested inside a container. Lets name this container as container5. The computed styles of container5 are:- +"" background-color: rgba(0, 0, 0, 0) + box-sizing: border-box + clear: none + color: rgb(33, 33, 36) + display: block + flex-direction: row + float: none + font-family: "Proxima Regular", Helvetica, Arial, "Lucida Grande", sans-serif + font-size: 16px + font-weight: 400 + height: 230.891px + line-height: 24px + margin-bottom: 0px + margin-left: 0px + margin-right: 0px + margin-top: 0px + padding-bottom: 0px + padding-left: 32px + padding-right: 32px + padding-top: 0px + text-align: start + width: 800px"" + diff --git a/flasktest/test.js b/flasktest/test.js new file mode 100644 index 0000000000000000000000000000000000000000..76cf58b680dd7ffa61a2e3b068a0f0d210be3e0b --- /dev/null +++ b/flasktest/test.js @@ -0,0 +1,14 @@ +// Dictionary-like object +const dictionary = {}; + +function addToDictionary(input) { + dictionary[input]?dictionary[input]++:dictionary[input]=1; +} + +// Example usage +addToDictionary("apple"); +addToDictionary("banana"); +addToDictionary("apple"); +addToDictionary("orange"); + +console.log(dictionary); diff --git a/flasktest/test.py b/flasktest/test.py new file mode 100644 index 0000000000000000000000000000000000000000..de1ed8ecdcb21e9e99af8d82e13ff8896971a6b1 --- /dev/null +++ b/flasktest/test.py @@ -0,0 +1,31 @@ +from cairosvg import svg2png + +svg_code = """ + + + + + + + + + + + + + + + + + + + + + + + + + +""" + +svg2png(bytestring=svg_code,write_to='output1.png') diff --git a/flasktest/unicef.html b/flasktest/unicef.html new file mode 100644 index 0000000000000000000000000000000000000000..75d33d7deb97e49fc0f5d206114c2f763ebbb2ca --- /dev/null +++ b/flasktest/unicef.html @@ -0,0 +1,58 @@ +
+
+
+ + + + + + +
+
+

WHAT WE DO

+

Here in the UK and globally

+
+
+
+
+ + + + + + +
+
+

WATER, SANITATION AND HYGIENE

+

Discover the difference safe water can make to a child's life

+
+
+
+
+ + + + + + +
+
+

NUTRITION AND LIFE-SAVING THERAPEUTIC FOOD

+

A good start in life for every child

+
+
+
+
+ + + + + + +
+
+

KEEPING CHILDREN SAFE WITH VACCINES

+

The fight against deadly disease

+
+
+
\ No newline at end of file