نحوه تولید داده های ساخت یافته به صورت خودکار با استفاده از چشم انداز رایانه

افزودن داده های ساخت یافته به صفحات وب سایت شما بسیار مهم است زیرا نتایج غنی همچنان جای پیوندهای ساده و قدیمی آبی را می گیرند.

در اعلامیه Google از ابزار تست نتایج غنی از خارج شدن از بتا ، آنها گفتند:

“نتایج غنی تجربیاتی در جستجوی Google است که فراتر از پیوند آبی استاندارد است. آنها از داده های ساختاری تهیه شده اند و می توانند شامل چرخ فلك ، تصاویر یا سایر عناصر غیر متنی باشند. در طول دو سال گذشته ما آزمون نتایج غنی را تهیه کرده ایم تا به شما کمک کنیم داده های ساختاری شده خود را آزمایش کنید و نتایج غنی خود را پیش نمایش کنید. “

در حالی که پیشرفت های این ابزار واقعاً خوش آمدید و تعداد مناسبی از ابزار و پلاگین ها وجود دارد که به تولید داده های ساخت یافته کمک می کند ، هنوز یک شکاف قابل توجه وجود دارد.

افزودن داده های درست و صحیح به صفحات وب یک تلاش دستی است، و همانطور که نیاز به بازی با کد دارد ، که بسیار مستعد خطای انسانی است.

در این پست ، من می خواهم یک تکنیک نسبتاً پیشرفته را ارائه دهم که می تواند به تولید داده های با کیفیت و بدون ورودی دستی کمک کند.

تبلیغات

ادامه خواندن زیر

این متکی بر آخرین پیشرفتهای در بینایی کامپیوتر و اتصال مفاهیم از رشته های کاملاً متفاوت است.

در اینجا برنامه فنی ما است:

  • ما لیستی از عکسهای صفحه محصول را که تیم من حاشیه نویسی کرده است برای نشان دادن مواردی مانند نام محصول ، قیمت ، توضیحات ، تصویر اصلی و غیره به دست خواهیم آورد.
  • ما حاشیه نویسی ها را به فرمی که توسط سرویس تشخیص اشیاء Google AutoML Google انتظار دارد تبدیل خواهیم کرد.
  • ما مراحل بارگذاری تصاویر حاشیه نویسی ، آموزش و ارزیابی مدلی را که می تواند حاشیه نویسی در تصاویر جدید را پیش بینی کند ، طی خواهیم کرد.
  • کد پیش بینی را از پایتون بر روی تصاویر جدید اجرا خواهیم کرد.
  • عکسهای جدیدی را به طور خودکار با استفاده از عروسکی تهیه می کنیم و کد JavaScript را تزریق می کنیم تا پیش بینی ها را به داده های ساخت یافته تبدیل کند.
  • ما برخی از مفاهیم کلیدی را که این تکنیک را ممکن می سازد مرور خواهیم کرد.

بیایید ابتدا مفاهیم بنیادی را مرور کنیم.

ویژن کامپیوتر 101

بهترین روش برای یادگیری و قدردانی از قدرت بینایی کامپیوتر ، اجرای یک مثال سریع است.

من یک نوت بوک ساده Colab را کنار هم قرار داده ام که اساساً مراحل ذکر شده در این repo از Streamlit را دنبال می کند.

لطفاً یک کپی تهیه کرده و انتخاب کنید زمان اجرا> همه را اجرا کنید، برای اجرای همه سلولها

در پایان ، شما باید یک URL ngrok پویا دریافت کنید.

آن را در مرورگر خود کپی و جایگذاری کنید و پس از بارگیری وزن YOLO ، شما انتخاب کنید برنامه را اجرا کنید در نوار کناری ، باید برنامه وب نسخه ی نمایشی را در زیر مشاهده کنید.

نحوه تولید داده های ساخت یافته به صورت خودکار با استفاده از چشم انداز رایانه

این برنامه وب به شما امکان می دهد تصاویر مختلفی را مرور کرده و از الگوریتم دید رایانه YOLO3 استفاده کنید ، که مخفف عبارت You Only Look Once است.

تبلیغات

ادامه خواندن زیر

متوجه خواهید شد که اشیاء مورد علاقه در تصاویر (اتومبیل ، مردم و غیره) توسط جعبه های رنگی نشان داده شده اند.

به این جعبه های محدود کننده در Computer Vision گفته می شود و وظیفه ای که می تواند آنها را پیش بینی کند ، شناسایی شیء نام دارد.

مشابه هر کار یادگیری عمیق نظارت شده ، الگوریتم های تشخیص شیء به مجموعه داده های دارای برچسب نیاز دارند.

مجموعه داده ها برای تشخیص اشیاء شامل تصاویر و برچسب ها به علاوه مختصات جعبه های حاوی برچسب ها است.

برخی از کارهای دستی سنگین که در برچسب زدن اشیاء در تصاویر مورد نیاز است وجود دارد.

خوشبختانه ، چون نیازی به درخواست اجازه در کار خود ندارم ، من 200 تصویر را که قبلاً توسط تیم من تهیه شده اند ، به اشتراک می گذارم که می توانید برای تکمیل این آموزش استفاده کنید.

ما فرایندی را که برای جمع آوری مجموعه داده های کامل خود استفاده کرده ایم و روش هایی برای مقیاس بندی خودکار آن یاد خواهیم گرفت ، بنابراین نیازی نیست که به صورت دستی هر تصویر را برچسب گذاری کنید.

اتوماسیون مرورگر برای ضبط تصویر

در یکی از ستون های اولیه من ، ایده خودکار سازی مرورگر Chrome را برای کمک به ما در انجام کارهای تکراری در جایی که API نداریم ، معرفی کردم.

از آنجا که ایده ما این است که از صفحات وب عکس بگیرید و برای بدست آوردن داده های ساخت یافته ، از تصاویر شیء استفاده کنید ، می توانیم با اتوماسیون مرورگر بخشی از فرایند را به صورت خودکار انجام دهیم

مقاله پیشنهادی  کلمات کلیدی در نام دامنه مورد نیاز نیست

با توجه به لیستی از URL های محصول ، می توانیم اسکریپت توله سگ (یا پیپتتر در پایتون) را اجرا کنیم تا همه صفحات وب باز شود و تصاویر را در دیسک ذخیره کنیم.

اکنون ، تصاویر به تنهایی کافی نیستند. ما همچنین برای هر نوع داده ساختار یافته و جعبه محدودیت ، به برچسب ها احتیاج داریم.

برای این کار حداقل دو رویکرد وجود دارد.

اولین و بدیهی است که یک شخص / تیم وارد کننده داده به صورت دستی برچسب گذاری تصاویر را دارند.

این رویکردی است که ما چند سال پیش در ابتدا این کار را انجام دادیم.

نحوه تولید داده های ساخت یافته به صورت خودکار با استفاده از چشم انداز رایانه

ما از یک ابزار منبع باز به نام LabelImg استفاده کردیم و شخص وارد اطلاعات ما به صورت دستی جعبه ها را بر روی اشیاء مورد علاقه ترسیم می کند.

تبلیغات

ادامه خواندن زیر

نتایج برچسب زدن در قالب استاندارد ذخیره می شود. در مورد ما ، از قالب DetectNet استفاده کردیم.

این قالب یک فایل txt برای هر تصویر با یک خط برای هر شی ایجاد می کند. هر خط شامل یک برچسب و مختصات است.

یکی دیگر از رویکردهای مقیاس پذیرتر که اخیراً از آن استفاده می کنیم ، صفحه نمایش صفحه هایی است که از قبل داده های ساختاری دارند و از داده های ساختاری شده برای محاسبه برچسب ها و مختصات جعبه ها استفاده می کنند.

ما هنوز هم آن را با نظارت انسانی ترکیب می کنیم ، اما در درجه اول برای اطمینان از این که روند تولید داده های آموزشی با کیفیت را تولید می کند.

Google AutoML برای شناسایی شیء ویژن

وقتی چند سال پیش برای اولین بار این ایده را امتحان کردیم ، مجبور شدیم این کار را با روش بسیار سخت انجام دهیم!

نحوه تولید داده های ساخت یافته به صورت خودکار با استفاده از چشم انداز رایانه

من در واقع به طور خلاصه آن را در طی صحبت های TechSEO Boost در سال 2018 ذکر کردم.

من در دوره تخصصی Deep Learning با Coursera در مورد تشخیص شیء آشنا شدم و بلافاصله نقاط را متصل کردم.

تبلیغات

ادامه خواندن زیر

ما یاد گرفتیم که از YOLO استفاده کنیم ، اما در عمل فهمیدم Faster-RCNN بهترین عملکرد در آن زمان بود.

Tensorflow Object Detection API چیزهایی را ساده تر کرده است ، اما هیچ جا به اندازه آن ساده نیست با AutoML.

در هنگام استفاده از AutoML ، ما فقط باید داده ها را در قالب مورد نظر تهیه كنیم و نمونه های كافی را برای هر جعبه برچسب / محدودیت ارائه كنیم. در این زمان ، سرویس فقط به 10 نیاز دارد.

ما باید صدها نمونه از هر برچسب را بدست آوریم تا عملکرد مناسب و معقول خود را پس بگیریم.

حالا که اصول را درک می کنیم ، بیایید کار کنیم.

آماده سازی بانک اطلاعاتی ما برای AutoML

بیایید یک نمونه از مجموعه داده های محصول ما مرور کنیم. برای هر تصویر دو پرونده داریم.

پرونده اول خود تصویر مانند پرونده زیر است.

نحوه تولید داده های ساخت یافته به صورت خودکار با استفاده از چشم انداز رایانه

می توانید با استفاده از خطوط پایتون زیر ، آن را در Google Colab نمایش دهید.

تبلیغات

ادامه خواندن زیر

import numpy as np

import cv2

img = cv2.imread("img1063.jpg", cv2.IMREAD_COLOR)
from google.colab.patches import cv2_imshow
cv2_imshow(img)

بخش دوم فایل متنی مربوط به DetectNet با برچسب ها است.

می توانید آن را با خط فرمان مرور کنید.

! گربه imag1063.txt

main product image 0.0 0 0.0 30 82 790 561 0.0 0.0 0.0 0.0 0.0 0.0 0.0
original price 0.0 0 0.0 836 99 903 116 0.0 0.0 0.0 0.0 0.0 0.0 0.0
price 0.0 0 0.0 837 125 939 151 0.0 0.0 0.0 0.0 0.0 0.0 0.0
product name 0.0 0 0.0 31 8 798 39 0.0 0.0 0.0 0.0 0.0 0.0 0.0
reviews 0.0 0 0.0 114 41 315 63 0.0 0.0 0.0 0.0 0.0 0.0 0.0
quantity 0.0 0 0.0 836 198 1303 253 0.0 0.0 0.0 0.0 0.0 0.0 0.0
add to cart 0.0 0 0.0 837 289 1302 354 0.0 0.0 0.0 0.0 0.0 0.0 0.0
product description 0.0 0 0.0 843 367 1304 556 0.0 0.0 0.0 0.0 0.0 0.0 0.0

یک خط برای هر شی برچسب در تصویر وجود دارد. خط شامل نام برچسب و مختصات کادر محدودیت است.

بیایید ببینیم که وقتی نمونه آن را در AutoML بارگذاری می کنم ، این نمونه خاص چگونه به نظر می رسد.

نحوه تولید داده های ساخت یافته به صورت خودکار با استفاده از چشم انداز رایانه

می توانید ببینید که چگونه عناصر داده ساختاری به دقت با جعبه های محدودیت برچسب گذاری می شوند.

ما نام محصول ، قیمت ، مقدار ، بررسی ، توضیحات و غیره را در اختیار شما قرار می دهیم.

قبل از اینکه بتوانم نمونه های خود را بارگذاری کنم ، باید آنها را به فرمت مورد انتظار AutoML تبدیل کنم.

مقاله پیشنهادی  بیشتر سایت ها نیازی به نگرانی در مورد بودجه خزیدن ندارند

من همچنین نیاز داشتم که تصاویر را در یک سطل ذخیره سازی Google Cloud Storage بارگذاری کنم ، اما آن قسمت ساده است.

قالب: مجموعه ، مسیر ، برچسب ، x_min ، y_min ،،، x_max، y_max ،،

تبلیغات

ادامه خواندن زیر

ابتدا فایلها را از دیسک می خواندم و لیست هر یک از لغت نامه ها را در هر جعبه محدودیت ایجاد کردم.

defaultdict(,
            {'add to cart': 2308,
             'add to wishlist': 978,
             'additional product images': 1292,
             'availability': 832,
             'color': 600,
             'main product image': 2981,
             'price': 2719,
             'product description': 1965,
             'product name': 2888,
             'quantity': 1738,
             'reviews': 473,
             'size': 1050})

در اینجا می توانید ببینید که چه تعداد نمونه در هر جعبه / شی محدودکننده دارم.

در اینجا مثالی که به نظر می رسد:

{'objects': [{'name': 'main product image',
   'xmax': 0.4351371386212009,
   'xmin': 0.06745737583395107,
   'ymax': 1.0,
   'ymin': 0.6900175131348512},
  {'name': 'price',
   'xmax': 0.5559673832468495,
   'xmin': 0.5100074128984433,
   'ymax': 0.043782837127845885,
   'ymin': 0.008756567425569177},
  {'name': 'add to wishlist',
   'xmax': 0.5959970348406227,
   'xmin': 0.508524833209785,
   'ymax': 0.29422066549912435,
   'ymin': 0.2714535901926445},
  {'name': 'quantity',
   'xmax': 0.6404744255003706,
   'xmin': 0.508524833209785,
   'ymax': 0.6234676007005254,
   'ymin': 0.5516637478108581},
  {'name': 'size',
   'xmax': 0.793180133432172,
   'xmin': 0.5070422535211268,
   'ymax': 0.7408056042031523,
   'ymin': 0.6760070052539404},
  {'name': 'add to cart',
   'xmax': 0.6056338028169014,
   'xmin': 0.5107487027427724,
   'ymax': 0.8669001751313485,
   'ymin': 0.7933450087565674}],
 'screenshot': 'img716.jpg'}

اگر به دقت توجه کنید ، مختصات موجود در پرونده عدد صحیح بودند ، نه اعشار. AutoML انتظار دارد عددها به عدد 1 عادی شوند.

شما می توانید این کار را با تقسیم اعداد بر اساس عرض یا ارتفاع تصویر انجام دهید.

#conver to float 

                image_box = dict(name=name,

                                    xmin=max(0, float(xmin) / width),

                                    ymin=max(0, float(ymin) / height),

                                    xmax=max(0, float(xmax) / width),

                                    ymax=max(0, float(ymax) / height),

                )

هنگامی که ساختار داده ها را با مقادیر مناسب در اختیار داشته باشیم ، می توانیم آنرا به پرونده CSV با فرمت مورد انتظار ادامه دهیم.

import csv
with open('screenshots.csv', "w") as csvfile:

  csvwriter = csv.writer(csvfile)

  for example in examples:

    for obj in example["objects"]:

      #expected format -> set,path,label,x_min,y_min,,,x_max,y_max,,

      csvwriter.writerow(["UNASSIGNED", f"gs:///to_upload/{example['screenshot']}",

                          obj["name"],

                          obj["xmin"],

                          obj["ymin"],"", "",

                          obj["xmax"],

                          obj["ymax"], "", ""])

این پرونده ای را مانند زیر ایجاد می کند.

!head screeshots.csv
UNASSIGNED,gs:///to_upload/img716.jpg,main product image,0.06745737583395107,0.6900175131348512,,,0.4351371386212009,1.0,,
UNASSIGNED,gs:///to_upload/img716.jpg,price,0.5100074128984433,0.008756567425569177,,,0.5559673832468495,0.043782837127845885,,
UNASSIGNED,gs:///to_upload/img716.jpg,add to wishlist,0.508524833209785,0.2714535901926445,,,0.5959970348406227,0.29422066549912435,,
UNASSIGNED,gs:///to_upload/img716.jpg,quantity,0.508524833209785,0.5516637478108581,,,0.6404744255003706,0.6234676007005254,,
UNASSIGNED,gs:///to_upload/img716.jpg,size,0.5070422535211268,0.6760070052539404,,,0.793180133432172,0.7408056042031523,,
UNASSIGNED,gs:///to_upload/img716.jpg,add to cart,0.5107487027427724,0.7933450087565674,,,0.6056338028169014,0.8669001751313485,,
UNASSIGNED,gs:///to_upload/img2093.jpg,main product image,0.09636767976278725,0.3134851138353765,,,0.44551519644180876,0.8581436077057794,,
UNASSIGNED,gs:///to_upload/img2093.jpg,product name,0.5100074128984433,0.11208406304728546,,,0.8584136397331357,0.16112084063047286,,
UNASSIGNED,gs:///to_upload/img2093.jpg,price,0.5107487027427724,0.18739054290718038,,,0.5922905856189771,0.2381786339754816,,
UNASSIGNED,gs:///to_upload/img2093.jpg,quantity,0.5107487027427724,0.3607705779334501,,,0.5774647887323944,0.45183887915936954,,

کمی کار و درک روشنی از مفاهیم و فرآیند طول می کشد ، اما ما بسیار آماده برای آموزش مدل پیش بینی خود هستیم.

CSV را در رایانه خود بارگیری کرده و آن را در سطل ذخیره سازی Google Cloud Storage بارگذاری کنید.

from google.colab import files

files.download("screenshots.csv")

آموزش مدل پیش بینی کننده ما در AutoML

ابتدا ، برای وارد کردن تصاویر دارای برچسب در Cloud Storage ، بیایید یک مجموعه داده جدید ایجاد کنیم.

تبلیغات

ادامه خواندن زیر

نحوه تولید داده های ساخت یافته به صورت خودکار با استفاده از چشم انداز رایانه

در مرحله بعد ، CSV خود را با استفاده از مسیرهای تصویر ، برچسب ها و مختصات جعبه محدودیت انتخاب می کنیم.

نحوه تولید داده های ساخت یافته به صورت خودکار با استفاده از چشم انداز رایانه

پس از وارد کردن تصاویر ، AutoML یک مرورگر تصویری بسیار زیبا ایجاد می کند که می توانیم از آن برای بررسی تصاویر و برچسب ها استفاده کنیم.

نحوه تولید داده های ساخت یافته به صورت خودکار با استفاده از چشم انداز رایانه

سرانجام ، پس از آموزش چندین ساعت مدل ، معیارهای با دقت بسیار بالایی کسب می کنیم.

نحوه تولید داده های ساخت یافته به صورت خودکار با استفاده از چشم انداز رایانه

برای تست مدل ، من به صورت دستی عکس صفحه ای از صفحه محصول میسی را گرفتم و تصویر را در ابزار پیش بینی مدل بارگذاری کردم.

تبلیغات

ادامه خواندن زیر

نحوه تولید داده های ساخت یافته به صورت خودکار با استفاده از چشم انداز رایانه

پیش بینی ها فوق العاده خوب هستند. این مدل فقط بررسی ها و قیمت را از دست داده است.

این بدان معنی است که این مثال دقت بالا و فراخوان کم داشت.

با افزایش قیمت نمونه ها و بررسی ها ، می توانیم آن را بهبود بخشیم.

ما بررسی های کمتری داریم ، اما نمونه قیمت زیادی دارد. اما ، احتمالاً ، این قیمت مطابق با الگوهای موجود نیست.

قسمت بعدی احتمالاً جالب ترین است.

چگونه می توانیم این پیش بینی های مختصات کادر محدود را به داده های ساختاری تبدیل کنیم که می توانیم به HTML تزریق کنیم؟

پیش بینی های جعبه اتصال دهنده ما به داده های ساخت یافته تبدیل می شود

در ابتدا ، باید از پایتون تصاویر به صورت خودکار بگیرید. برای آن می توانیم از Pyppeteer استفاده کنیم.

%%writefile get_product_shot.py

import asyncio

from pyppeteer import launch

async def main():

    url = "https://www.amazon.com/Kohler-Elongated-AquaPiston-Technology-Left-Hand/dp/B005E3KZOO"

    browser = await launch(executablePath="/usr/lib/chromium-browser/chromium-browser",args=['--no-sandbox'])

    page = await browser.newPage()

    await page.goto(url)

    await page.screenshot({'path': 'product_shot.png'})

    await browser.close()

asyncio.get_event_loop().run_until_complete(main())

برای اینکه این کار در Colab کار کند ، باید نصب کنیم کرومدرایور

!apt install chromium-chromedriver

اجرای توابع async در داخل Jupyter یا Colab می تواند یک درد باشد ، بنابراین ترجیح می دهم که آنها را به صورت اسکریپت اجرا کنم.

تبلیغات

ادامه خواندن زیر

%%bash

python get_product_shot.py

نحوه تولید داده های ساخت یافته به صورت خودکار با استفاده از چشم انداز رایانه
حالا که تصویر صفحه داریم ، می توانیم پیش بینی آن را اجرا کنیم.

این کد برای بدست آوردن پیش بینی ها از مدل ماست.

import sys

import os

from google.cloud import automl_v1beta1

from google.cloud.automl_v1beta1.proto import service_pb2

os.environ["GOOGLE_APPLICATION_CREDENTIALS"] = "CHANGE-ME.json"

# 'content' is base-64-encoded image data.

def get_prediction(file_path, project_id, model_id):

  with open(file_path, 'rb') as ff:

    content = ff.read()

  prediction_client = automl_v1beta1.PredictionServiceClient()

  name = 'projects/{}/locations/us-central1/models/{}'.format(project_id, model_id)

  payload = {'image': {'image_bytes': content }}

  params = {}

  request = prediction_client.predict(name, payload, params)

  return request  # waits till request is returned

این کد نیاز به ایجاد یک حساب کاربری با دسترسی به سرویس AutoML دارد.

نحوه تولید داده های ساخت یافته به صورت خودکار با استفاده از چشم انداز رایانه
یک فایل JSON ایجاد کنید ، آن را در Colab بارگذاری کنید و کدی را که می گوید “CHANGE-ME.json” را با نام مسیر تغییر دهید.

این خط پیش بینی هایی را از تصویری که گرفتیم تولید می کند.

تبلیغات

ادامه خواندن زیر

response = get_prediction("img1996.jpg", , )

بیایید پیش بینی های مدل خود را در صفحه محصول آمازون بررسی کنیم.

نحوه تولید داده های ساخت یافته به صورت خودکار با استفاده از چشم انداز رایانه

نگاه کنید که چگونه این مدل قادر به شناسایی نام محصول حتی با وجود پاپ تا حدی مانع آن شد.

بسیار چشمگیر!

به منظور ترسیم جعبه ها و برچسب ها ، من تابعی را ایجاد کردم که نام و تصویر پاسخ عکس را از مدل AutoML می گیرد. شما می توانید آن را در این عیب پیدا کنید.

فقط کافی است با این خطوط تماس بگیرید.

img_with_boxes = draw_bounding_boxes("product_shot.png", response)

من همچنین پیش بینی هایی را که به عقب برمی گردیم چاپ می کنم.

Predicted label and score: additional product images 99.40%
Predicted x1, y1: (62, 450)
Predicted x2, y2: (300, 495)
Predicted label and score: product description 98.80%
Predicted x1, y1: (364, 373)
Predicted x2, y2: (694, 600)
Predicted label and score: product name 94.47%
Predicted x1, y1: (369, 180)
Predicted x2, y2: (696, 283)
Predicted label and score: main product image 90.14%
Predicted x1, y1: (86, 247)
Predicted x2, y2: (284, 432)

سپس ، ما می توانیم آنها را در اینجا تجسم کنیم.

from google.colab.patches import cv2_imshow

cv2_imshow(img_with_boxes)

حالا به قسمت فریبنده می رسیم.

بیایید از مختصات پیش بینی شده برای توصیف محصول استفاده کنیم ، که در بالا به صورت برجسته ذکر شده است.

من می خواهم یک نقطه را درست در وسط جعبه محدوده محاسبه کنم. ما می توانیم این کار را با استفاده از:

x1, y1 = (364, 373)

x2, y2 = (694, 600)
x, y = ( int((x1 + x2) / 2), ( int((y1+y2) / 2)))
print(x, y) -> (529, 486)

ما می توانیم عنصر HTML DOM را در JavaScript که در این مختصات ظاهر می شود ، شناسایی کنیم.

تبلیغات

ادامه خواندن زیر

در اینجا کد با مقادیر مختصات سخت کد شده (با حروف درشت) است.

%%writefile get_element_box.py

import asyncio

from pyppeteer import launch

async def main():

    url = "https://www.amazon.com/Kohler-Elongated-AquaPiston-Technology-Left-Hand/dp/B005E3KZOO"

    browser = await launch(executablePath="/usr/lib/chromium-browser/chromium-browser",args=['--no-sandbox'])

    page = await browser.newPage()

    await page.goto(url)

    await page.screenshot({'path': 'product_shot.png'})

    output = await page.evaluate('''() => {

        var el = document.elementFromPoint(529, 486); //document.querySelector("#productTitle");

        var coords = el.getBoundingClientRect();

        return {

            x: coords.left,

            y: coords.bottom,

            tag: el.tagName,

            text: el.innerText,

            width: document.documentElement.clientWidth,

            height: document.documentElement.clientHeight,

            deviceScaleFactor: window.devicePixelRatio,

        }

    }''')

    await browser.close()

    print(output)

asyncio.get_event_loop().run_until_complete(main())

من هنگام بارگیری صفحه به یک عملکرد JavaScript سفارشی تزریق و اجرای می کنم.

تابع عناصر را با مختصاتی که محاسبه کردیم انتخاب می کند و نام برچسب و متن داخلی آن را در بین سایر صفات باز می گرداند.

آنچه در هنگام اجرای اسکریپت به نظر می رسد خروجی:

{'x': 383.03125, 'y': 519, 'tag': 'SPAN', 'text': 'Compact elongated bowl offers added comfort while occupying the same space as a round-front bowl', 'width': 800, 'height': 600, 'deviceScaleFactor': 1}

اگر تصویری را در بالا مشاهده می کنید ، آن قسمت گلوله درست در وسط توضیحات است.

در عمل ، ما از برخی منطق اضافی برای پیدا کردن عنصر والد با بزرگترین سطح همپوشانی سطح استفاده می کنیم تا بتوانیم توضیحات کامل را در مواردی مانند این ثبت کنیم.

سرانجام ، هنگامی که مختصات نام محصول پیش بینی شده را می گذاریم ، می بینیم که خروجی چگونه است.

{'x': 363.59375, 'y': 280, 'tag': 'SPAN', 'text': 'Kohler 3811-0 Santa Rosa Comfort Height Elongated 1.6 GPF Toilet with AquaPiston Flush Technology and Left-Hand Trip Lever, White', 'width': 800, 'height': 600, 'deviceScaleFactor': 1}

ما توانستیم نام کامل محصول را خیلی دقیق ضبط کنیم!

در اینجا تکالیف شماست: کد را به روز کنید تا بتوانید متن را از همه جعبه های محدود شده پیش بینی شده با برچسب های مربوطه برگردانید.

منابعی برای کسب اطلاعات بیشتر

ما یک سریال هفتگی جدید از آموزش های پایتون را با تمرکز بر بلوک های ساختمانی سئو عملی برای مبتدیان شروع کردیم.

تبلیغات

ادامه خواندن زیر

من در حال مربیگری زوج های کارورزی هستم که به پشتیبانی فنی ما کمک می کنند و آنها همانطور که می آموزند نوت بوک های Colab را گرد هم می آورند.

حتماً آنها را بررسی کرده و سعی کنید مراحل را دنبال کنید و تکالیف خانه را تکمیل کنید!

منابع بیشتر:


اعتبار تصویر

تمام تصاویر گرفته شده توسط نویسنده ، ژوئیه 2020