00:00:00
I may have found the coolest AI tool
00:00:02
that is out there introducing screenshot
00:00:05
to code this is a simple application
00:00:08
that can convert a screenshot to code
00:00:10
whether that's HTML Tailwind you have
00:00:14
react bootstrap or many other different
00:00:16
types of Frameworks as well as libraries
00:00:18
it uses GPT 4 Vision to generate the
00:00:21
code and Dolly E3 to generate similar
00:00:24
looking images based off the screenshot
00:00:26
that you provided it you can now also
00:00:29
enter a UR to clone a live website which
00:00:32
is also really amazing and convenient
00:00:35
now just take a look at this example
00:00:37
where you simply take a screenshot of
00:00:39
Instagram and what screen to code will
00:00:41
do is that it will basically take a
00:00:44
couple of seconds to write the code
00:00:46
based off of each component of this
00:00:49
interface over here just take a look at
00:00:51
this now you simply just take that
00:00:53
screenshot of the Instagram uh profile
00:00:56
of Taylor Swift over here you then add
00:00:59
that screenshot to screenshot the code
00:01:01
and it will start writing the code for
00:01:03
each component of that screenshot so in
00:01:06
this case it'll write the code for the
00:01:08
follow button the message as well as
00:01:10
Source through different images based
00:01:12
off of doll e now obviously it's not
00:01:15
going to be the best images but you can
00:01:16
see that it creates like that base I
00:01:19
would say structure for the code for
00:01:22
what you want it to like basically
00:01:24
generate now I know this might be
00:01:26
getting repetitive but I really want to
00:01:28
emphasize on our private Discord as it
00:01:30
has been thriving a lot recently there
00:01:33
has been a lot of great things coming
00:01:34
out of this as you can just see from
00:01:36
this like image right here on the screen
00:01:39
where we basically just had a new
00:01:41
partnership where we are giving out paid
00:01:44
subscription plans for data coup and
00:01:46
this is an amazing effortless and
00:01:48
accurate approach for data extraction
00:01:51
now this is just an example of something
00:01:53
that we do and work with there's
00:01:54
multiple different paid subscriptions
00:01:56
that are given out to our Discord
00:01:58
members for free you simply become a
00:02:01
member and you get access to various
00:02:03
different AI tools across the month and
00:02:06
it's on different ranges of AI tools
00:02:09
it's not necessarily just data execution
00:02:11
tools but it's various different types
00:02:13
of categories in the field of AI now we
00:02:17
don't just end up giving out free
00:02:19
subscriptions to AI tools we also give
00:02:21
out various other different things like
00:02:23
collaboration opportunities where people
00:02:25
can basically work as a team to build
00:02:27
applications we have various Networks
00:02:30
we have news outlets we have resources
00:02:33
as well as daily AI inputs so definitely
00:02:36
recommend you check out the patreon link
00:02:38
in the description below as I really
00:02:39
wanted to emphasize what you guys are
00:02:41
missing out on if you guys are not a
00:02:42
part of this now here are a couple more
00:02:44
examples which showcase the usability of
00:02:47
screenshot of code now a user called
00:02:50
netster basically showcased a couple of
00:02:52
examples as to what he was able to do
00:02:54
with this now he basically first started
00:02:56
off by taking a screenshot of his is
00:03:00
inbox from his new product called
00:03:02
feedback HQ and if you go to the next
00:03:05
thing he basically took a screenshot of
00:03:07
this user interface and inputed it into
00:03:09
screen to code and he got this output
00:03:12
basically which was able to code out
00:03:14
almost everything based off the code now
00:03:17
you can see with this other example that
00:03:19
it does much better a much better job
00:03:21
when you select the HTML plus Tailwind
00:03:24
option and this is another demonstration
00:03:28
as to what it was able to code out based
00:03:30
off that input that he gave for that
00:03:32
screenshot now another example we can
00:03:35
see is that you can get simple layouts
00:03:37
being created so he basically was able
00:03:40
to create this using screenshot to code
00:03:43
and it was able to give you this
00:03:44
generation which looks really really
00:03:46
good in my opinion it coded everything
00:03:49
all the input tabs all the buttons as
00:03:52
well as making sure that the logo inputs
00:03:55
are also set now if we go down even more
00:03:58
he was also able to showcase is how it
00:04:00
would look using bootstrap now obviously
00:04:02
the dolly images are not the best so you
00:04:05
might need to configure that so that you
00:04:07
can get the best output for that but you
00:04:10
can get a gist out of this it's going to
00:04:12
be something that anyone can use to code
00:04:15
out a fully functional uh page whether
00:04:18
that's a signup page a dashboard or any
00:04:21
sort of thing that you truly want to
00:04:23
code within a couple seconds using GPT 4
00:04:26
Vision within screenshots of code now
00:04:29
throughout today's video I'm just going
00:04:30
to Showcase what you can do with this
00:04:32
and I'm just going to specify a couple
00:04:34
of the capabilities around this
00:04:36
application so with that thought guys
00:04:38
stay tuned and let's get straight into
00:04:40
the video if you would like to book a
00:04:42
one-on-one with me where you can access
00:04:44
my Consulting Services where I can help
00:04:46
you grow your business or basically give
00:04:49
you a lot of different types of
00:04:51
solutions with AI definitely take a look
00:04:53
at the calendar Link in the description
00:04:58
below hey hey what is up guys welcome
00:05:00
back to another YouTube video at the
00:05:02
world of AI in today's video we're going
00:05:04
to take a look at screenshot to code
00:05:07
it's a simple application that you can
00:05:10
basically fully code out based off of
00:05:12
screenshots it generates the code for
00:05:15
you using gb4 vision and it can do
00:05:18
various things with it based off the
00:05:20
screenshot that you provide it it can
00:05:22
code using HTML and Tailwind you can
00:05:25
also use react as well as bootstrap and
00:05:28
view this is a great way for beginners
00:05:30
to possibly or not even just beginners
00:05:33
just basic coders who can basically get
00:05:36
the framework CED up for you using the
00:05:39
screenshot to code application now for
00:05:42
this you won't actually need a chat gbt
00:05:44
Pro account you simply just need to make
00:05:46
sure that you have enough in the billing
00:05:49
payment section and this is where you
00:05:51
need to make sure that you have minimum
00:05:53
of $5 for this uh if you go onto the
00:05:56
screenshot to code application page you
00:05:58
can see that to you use screenshot the
00:06:00
code you need to subscribe a 100
00:06:01
generations for $15 and basically you're
00:06:05
able to use your own open AI API key
00:06:08
with gbd4 vision access you don't
00:06:10
actually need to upgrade to the Premium
00:06:12
plan you can just simply have enough
00:06:14
building link so that it could use that
00:06:17
building for the generation now the
00:06:19
great thing is that you don't actually
00:06:20
need to install this you can just simply
00:06:22
go onto their website and you can start
00:06:24
generating the code based off the
00:06:26
screenshots but you're also able to
00:06:29
install is locally based off the
00:06:31
installation method over here this is
00:06:33
where the app has a react uh front end
00:06:35
and it has a fast API back end you just
00:06:38
simply need to input your API key and
00:06:40
you can start running this fairly easily
00:06:41
on your Local Host you're also able to
00:06:44
do this on the website as I stated it's
00:06:47
fairly easy you can select what type of
00:06:49
code that you want to work with you can
00:06:51
use react plus Tailwind bootstrap view
00:06:54
plus Tailwind Tailwind sorry ionic plus
00:06:57
Tailwind as well as SV G but the best
00:07:01
results come with HTML plus Tailwind as
00:07:04
many people were able to see you're also
00:07:05
able to configure the generations as
00:07:07
well input your API key over here as
00:07:10
well as making sure that if you do not
00:07:13
want to use a Del e image generation you
00:07:15
can just simply turn it off but it's
00:07:17
fairly easy as that you can then save
00:07:19
this and then you can start inputting
00:07:21
the URL that you want to basically
00:07:23
generate the code for or you can simply
00:07:24
just input the screenshot over here
00:07:26
you're also you're able to import from
00:07:28
kod as well which is also a really
00:07:31
unique thing that you can do with
00:07:32
screenshots of code now let's take some
00:07:35
time to take a look at some examples as
00:07:37
to what you can do with screenshots of
00:07:39
code you can see that it was able to
00:07:41
create a replica of the New York Times
00:07:44
blog post with a simple screenshot it
00:07:46
was able to create the base code
00:07:49
framework for that blog post and you can
00:07:51
see that even replicated some of the
00:07:53
images using do e now obviously if you
00:07:56
go down you can we saw this Taylor sft
00:07:59
example example but if you go down even
00:08:01
more we can see that Hacker News was
00:08:03
also something that they were able to
00:08:05
replicate but it gets the colors wrong
00:08:07
at first so they actually nudged it to
00:08:09
improve it now if you click on this
00:08:11
let's take a look at this example it
00:08:13
takes a screenshot for Hacker News okay
00:08:17
now once they have taken the screenshot
00:08:19
they inputed it into screenshot to code
00:08:22
and we can see that it's giving you the
00:08:24
code you can preview how it looks as
00:08:26
well as it gives you the code for it so
00:08:29
in this case you can also like refix
00:08:32
certain Generations by telling them or
00:08:34
not telling them but telling screenshots
00:08:36
of code to adjust certain things and in
00:08:38
this case it tells it to change the
00:08:40
header it changes the background it
00:08:43
changes you can even ask it to change
00:08:45
the font and this is the great thing
00:08:47
about this cuz you can work Hand by hand
00:08:50
with this tool to basically generate
00:08:52
whatever you want based off the context
00:08:54
that you give it it also gives you the
00:08:56
chance to copy the code as well which is
00:08:59
really really cool so that you can even
00:09:00
edit it further on your own and that's
00:09:04
basically it for today's video on
00:09:05
screenshot to code it's just a simple
00:09:07
video showcasing new AI te I truly
00:09:10
thought that this is a really cool
00:09:12
application that you should definitely
00:09:14
take a look at because you can simply
00:09:16
create a base framework for your code
00:09:19
using this application and it could
00:09:21
definitely save a lot of time for many
00:09:23
coders but with that thought guys I'll
00:09:25
leave all the links that I used in
00:09:26
today's video in the description below
00:09:29
make sure you check out the patreon page
00:09:30
if you want to access our private
00:09:31
Discord where you can gain different
00:09:33
types of subscriptions to AI tools for
00:09:36
free giveaways collaboration you have
00:09:38
networking opportunities and so much
00:09:40
more make sure you follow us on Twitter
00:09:42
to stay up to date with the latest AI
00:09:44
Trends and lastly make sure you guys
00:09:46
subscribe turn on notification Bell like
00:09:49
this video and check out our previous
00:09:50
videos so you can stay up to date with
00:09:51
the latest AI news but with that thought
00:09:54
guys thank you guys so much for watching
00:09:55
have an amazing day spread positivity
00:09:58
and I'll see you guys fairly shortly
00:10:00
peace out fellas
