-: Alright, so in this video,
what we're gonna have a look at is,
how you can analyze landing pages, your landing page,
and competitor's landing pages using GPT Vision.
We're gonna use something called pyppeteer
which is a puppeteer port for Python,
and this allows us to run puppeteer browsers
and to execute some commands on some headless browsers.
And so there's a couple of different types
of installations that we're running in,
there's pyppeteer stealth, pyppeteer,
and we're also gonna use langchain as well.
We are also gonna add in some user agents.
Now, user agents are a way for us to potentially spoof
to other websites and pretend
that we're actually a real browser.
And then what you're gonna need to do is,
when you run this script,
make sure that you put your domain in here
'cause this is what's gonna be
inside of the prompt later on.
So I'm gonna be using the homepage for analysis,
but the homepage of my website
is still under this specific domain.
Now, once you've changed that domain,
we have this function here,
which is called screenshot full page.
And what it does is, it loads a headless browser,
it creates a page and then if the device type is mobile,
it emulates a different view port
and sets the user agent for the mobile user agent
and some other little bits.
But if it's a desktop that's entered into this specific type
of function as a parameter, then we set the view port
to be slightly larger and we also emulate
the view port should be that size
and also updating the user agent here.
And then we've also got a function which is meant
to improve the stealthiness of your browsers
and that comes from puppeteer stealth.
And then what we've got is a bit that says we're gonna wait
until the network is idle.
And this means that if the browser is downloading resources
after it's visited the page, then what's gonna happen is,
you can specifically wait
until all those resource is downloaded.
And then what we do is, we scroll to the bottom
to ensure that all the lazy loaded images are loaded.
And then after that we wait around two seconds
and then we scroll all the way back to the top.
And then what we do is, we take a screenshot
of the entire page by changing the view port
so that the width is equal to the body.scroll width,
and the height is equal to the the scroll height
of the document of body.
We take a single screenshot and we save that screenshot.
And so now, what you do is, you provide your list of URLs
and you can see here what I'm gonna be analyzing
is the homepage and then I'm gonna be comparing
it against these two data engineering pages.
Now, if your domain wasn't inside of this first one,
so you can see my domain is, understandingdata.com,
then it'll raise an error because you do need to update
that domain that's at the top of this script.
And then we get some clean names
and then we basically say, let's create a screenshot.
And then we set up an asynchronous function
which allows us to loop over every URL
for both desktop and mobile devices
and then you'll see we get this kind of output here
where it says, taking a screenshot of understanding data
and we've also got this other one, dufrain.co.uk
and fdmgroup.com.
And then what we do is, we then decide,
okay, we've got all these individual screenshots
and I can show you a couple of examples of those.
This is the desktop, this is the mobile, this is the desktop
for dufrain, this is the mobile for dufrain,
it's quite large as you can see.
And then we've also got the desktop for fdmgroup
and the mobile for fdmgroup.
So they're pretty good.
There's a couple of different edge cases
that we'll wanna talk about in terms
of how you'd wanna improve the script in the future.
But for now, we'll say that these images are good enough.
And so what we then do is,
we need to convert these images to Base64,
and we've got all the images in this folder.
They've been written out to this folder.
And so we're gonna use glob,
which is gonna allow us on the left-hand side,
to go and access all these individual PNG files.
And so, we basically go through 'em,
we'll go and get all the the screenshot files
and we'll encode those into Base64 encoded images.
And then after that,
then we set up a langchain pydantic model.
And the idea behind this is that we want
to not only get the vision model to respond to us,
but we want the vision model to respond
to us in a standardized way
that we could include in a application.
So this could be the backend of the application
and we could provide a standardized output by json.
And so what we've got is a feedback aspect.
So what the aspect is the description
and the recommendations.
And then you've got a website URL,
you've got them some strengths, some areas for improvement,
which are a list of feedback aspects,
and then we've got some general feedback.
There's optional and also some additional comments
as optional too.
And so what happens is,
we then set up a interesting approach where we say,
act as a marketing user researcher.
You'll receive a set of screenshots for my website
and there'll be some different websites.
And then please provide brief analysis of the screenshots
and we must provide a json schema.
And this is this output parser
with the get format instructions allows us
to convert the vision model's response
to a standardized output.
Now, the vision model doesn't currently support json mode
and it doesn't support function calling.
So this is the only way
that we can actually get json data out
of GPT Vision at the moment.
But you'll see what we do is,
we also then say a message saying, here's my website pages
and then we pretend to be the AI
and say thanks for providing your webpage in both desktop
and mobile versions.
Before analyzing them on each research
to different websites to understand the competition,
can you please provide some information
on the different websites?
And then we provide it all of the ones
that aren't our domain in that specific screenshot,
Base64's dictionary.
And so then we get a response from the vision model.
And you can see the vision model gives us a range
of strengths and some areas for improvement.
And so that's basically what we've got at the moment.
You've got this chat model
and that takes the prompt into the model,
into the output passer, we invoke the chain
And then once we get that back,
then you've got this pydantic model.
Now, I think just to talk
on a couple of different edge cases
that have propped up whilst making this,
I think the next steps would be, can we automatically click
on cookie banners and can we also click
on any pop-ups, banner ads?
And can we also create an XY coordinate grid
that will allow us to completely control the vision model
because that's also gonna be important
from, like these two ones,
what we're really trying to do is,
figure out can we reliably generate XY coordinates
to automate actions?
But the other way we could do cookies is by,
the pop-ups is by specifically looking at all the HTML data
and getting rid of any JavaScript
and just looking at the pure DOM
and then asking ChatGPT, can you see any DOM elements
that look worthy of being clicked on pop-up elements?
But I suspect that an XY coordinate grid will allow us
to completely control the vision model
and drive that to be a lot more autonomous
in terms of interacting with the website
and also clicking away banners before it takes screenshots.
So hopefully, you found this useful,
yet there's a lot to go through.
But the main premise is, we are getting lots
of images asynchronously from using a browser
on your local machine.
And then after that, then what you can do is,
you can use all those images
to perform a competitor analysis on multiple landing pages.