FREE Napkins.dev Together AI🤖Screenshot To Code v0.dev Open Source Alternative Llama 3.2 90B Vision
In this video
- 00:00Introduction to Napkins.dev: Together AI Open Source Tool
- 00:29Overview of Napkins.dev and Together AI Capabilities
- 01:05Supported Models: Llama 3 Vision and Sandpack Code Interface
- 01:40Running Napkins.dev Locally: Cloning the Repo and Setup
- 02:18Configuring Environment Variables and S3 Setup
- 02:51NPM Installation and Running on Localhost
- 03:13Using Hosted Version of Napkins.dev for Free
- 03:40Turning Wireframes into React + Tailwind Apps
- 04:34Demonstrating App Generation and Code Sandbox Integration
- 05:00Testing Open Source Model with YouTube Channel Example
- 05:33Large Model Performance and Hosted Version Benefits
- 06:02Overview of Together AI's Open Source AI Tools Collection
- 06:38Exploring More Together AI Demo Projects
- 07:07Channel Updates, Community Links, and AI Business Support
- 07:45Outro and Daily Upload Reminder
Links from the video
Transcript
1,609 wordsWhat's going on guys Josh poock here and in today's video we are going to be taking a look at an open source free alternative to tools like vzer as well as an alternative to another open source tool we covered screenshot to code this tool is called napkins. deev and it is created by together. a we're going to dive into it show you how you can use it let's Dive Right [Music] In all right guys so here is napkins dodev so from
Screenshot to app like I mentioned before we recently covered screenshot to code on this channel and napkins. deev like I mentioned is um made by together. a and if you're not familiar with together. I'll leave a link in the description down below you can sign up for free and they give you a certain amount of credits and they allow you to run some of the open source larger models like Llama 90b Or and it's pretty nice for running open source models
That are larger which you wouldn't be able to run on your system okay so sign up there and make sure you get an API key cuz we're going to need it in just a second okay so like I said you could use llama 3.1 405b um llama 3.2 Vision bunch of different options I'd also use a sandpack for the code interface right here as you can see a live coding environment in record time live coding in the browser as you can
See here and it uses Amazon S3 here for the file uploads it's a nextjs app router with tailwind and helicone is available for observability and and you can see that is right here llm for observability for developers the open source platform for logging monitoring and debugging as you can see here it's pretty nice so this is optional you don't actually have to um use this in the environment variables but the other ones are mandatory all right now there is two ways
To use this so first things first um we'll go over actually how to run it locally so what you're going to do is you're going to copy this get clone repo Command right here and you're going to go into your terminal and then you're going to go to the location where of course you want to clone it and then you're simply just going to run get clone napkins once you do that you can actually just open up napkins so CH CD
Into napkins and then just run code dot to open up napkins in vs code okay once you have that open you'll see that this is the napkins repo um if we go over here to the example. EnV you will see that this is where your environment variables will be so we got our S3 upload key S3 upload secret the bucket the region and then the together API key so really you just needed together API key and then all the S3 stuff
You don't need the helicone if you don't want it but you're going to want to make a copy of this and rename it Tov step three it says create a S3 bucket and add your credentials to the EnV follow this guide to set them up all required fields are in the env. example so if we go here this is actually uh next S3 upload all right so if you need help setting up the S3 you can see that this is what
It is using and you can reference these docs right here I'll leave them in the description down below uh make sure you get those keys and then plug them into the environment variables and once that is done you can simply run npm install and then you can also run npm runev to start it up on Local Host 3000 okay so that's going to start it up and we'll come back to that in just a second before I do I just want
To mention that you can actually go to napkins. deev if want and you can actually just use their hosted version 100% for free which is really nice so as you can see here we got napkins. deev made by together. a turn your wireframe into an app upload an image of your website design and we'll build it out for you with react plus Tailwind all right so the cool thing about this is It's using llama 3.2 11b or llama 3.2 90b Vision
All right so up here you can actually go ahead and test it out it says need an example image try ours so here's just an example image as you can see it looks like it's just some written stuff on a napkin which is where the name comes from you can go ahead and click on generate app and it is analyzing the image right here you can see here that we got the sand pack over here on the left hand side and
It is generating this clawed uh artifacts like interface right here and look at that we got pretty damn close we got the logo the um home about contact login is a little bit on the left where it should be on the right which is okay we got book and appointment you know pretty much the entire form right here you could open it in sandbox right here so you click this it's going to open in code sandbox. where you could view it
See all the code there but of course you could simply just copy the code right here and use this code now let's go ahead and try something else I'm just going to drag our YouTube interface right here and then click on generate app and you'll see here it is analyzed the image as you can see the code is being generated right here really pretty quick I mean you know as an open source model of course it's being hosted on together. a
Which is really nice cuz you can get fast inference times with these open- Source large um parameter models right here and here we have um a replica of you know what's supposed to be my YouTube channel right here so we can see we got the home video shorts playlist Community Etc all right now we're going to use the chat GPT interface right here we'll go ahead and try the 11b model to see how well it can do with that okay so
It looks like it is messing up with the smaller model I I believe I'm going to go ahead and try it one more time let's go ahead generate the app okay yeah so definitely I would recommend using the larger models right here let's go ahead and try it now okay and definitely not perfect but as you can see at least it's actually working to a degree all right so it's a pretty simple app I think you guys get the point now
The one thing I will say that is kind of cool is if you are using their hosted version you essentially get it for free because you're not putting in your together AI API key now if you do do it self-hosted you will have your API key in there so it will be using your credits or your tokens whatnot and I just wanted to cover this tool quick some of you guys may be familiar with some of the other tools that we've
Covered from together AI such as llama coder there's a few different ones here too as well and this is actually a nice little demo pack that together AI released announcing together demos all 10 open source AI apps I built this year in one place they have 500k users plus and 12 and 12K GitHub Stars overall and they're all free and open source so pretty cool stuff that they actually released this you could go ahead you know use these tools build upon
These tools iterate up on these tools we got notes GPT explore careers Twitter bio nap Gins right here PDF to chat llama tutor turbo seek llama coder link shot product description generator so pretty cool stuff leave all this Linked In the description Down Below guys let me know what your thoughts are about napkins as well as some of these other together AI demo projects just wanted to give you guys a quick update I'm working on a few other videos so stay
Tuned for that if you guys are new to the channel we upload videos every single day on AI Marketing sales business gr so if you like that type of content you got some value here make sure to smash the like button comment down below and subscribe to stay up to date with the daily uploads also too guys if you haven't already joined our free community stric community.com I'll leave a link down below for our free Facebook group and Discord Channel and
Then also too guys if you run a business and you need help booking more appointments with paid advertising outbound prospecting implementing ai ai agents into your business like AI cold callers call centers whatever the case may be book a call down below at executives.com apply to see if it's a good fit or not other than that guys I will see you in tomorrow's video keep hustling keep grinding and of course accelerate your stride take care