How I made a Pokedex for Real Life with AI / GPT4o
HTML-код
- Опубликовано: 5 июл 2024
- A new Pokemon journey begins as I try to create a real life Pokedex. Using OpenAI GPT-4o Omni and AstraDB Database, here's how I made the impossible, possible!
Astra DB (Datastax todays sponsor):
www.datastax.com/
*Due to OpenAI Pricing, I am unable to run this demo project indefinitely, you can clone your own version for testing, you can do so below:
github.com/adriantwarog/Poked...
00:00 - A Real Life Pokedex
00:44 - Inspiration - Why I'm building a Pokemon Pokedex Project
01:58 - Planning - How to build a Pokedex and Competitors
03:13 - Research - Pokedex Aesthetics and Design
04:25 - Design Preparation
05:30 - Sketching out Ideas for the Pokedex Design
06:20 - Design Mockup - Color Typography
07:53 - Design - Figma High Fidelity User Interface
09:38 - Programming - Next JS Frontend and Backend
10:10 - Database - Using DataStax - AstraDB
12:47 - AI - Integrating ChatGPT with OpenAI GPT4o model
14:42 - Camera - React Camera Capture Images & GPT4 o Analysis
16:55 - Statistics - Creating Stats Map with Data Graphs
17:36 - Voice - Recreating Pokedex Voice using AI
18:48 - Authentication - Next Auth Sign in for Users
19:42 - Database - Leaderboard and Saving Pokémon Entries
20:18 - Database - Vector Database with Astra DB
21:32 - The Pokedex for Real Life Complete
Tools that help me make this Pokedex include: Cloudinary, Fakeyou, OpenAI, Datastax AstraDB, Next JS, JavaScript, React JS, HTML, CSS, Figma, Concepts app, Remarkable, VS Code, etc.
Github Repo: ( Open Source Pokedex RL )
github.com/adriantwarog/Poked...
#pokemon #astradb #gpt4o
Want to learn more? ⭐ Check out my courses! ⭐
📘 Teach Me Design - Course: www.enhanceui.com/
📚 OpenAI + GPT - Course & Templates: enhanceui.gumroad.com/
Software & Discounts:
📦 Admin Templates and UI Kits: bit.ly/themeselection15
💻 Screen Recorder: screenstudio.lemonsqueezy.com?aff=po745
✖ Editor X: www.editorx.com/adrian-twarog
🚾 Webflow: webflow.grsm.io/adrian
🌿 Envato: 1.envato.market/yRZjz2
🌿 Envato Elements: 1.envato.market/LP0OJZ
🔴 Elementor: elementor.com/adrian/?ref=23140
Computer Gear:
⬛ Monitor: amzn.to/3f9DOQI
⌨ Keyboard: amzn.to/3eA5UFD
🐁 Mouse: amzn.to/3xVJO8l
🎤 Mic: amzn.to/3hgCfms
📱 Tablet: amzn.to/3ewt7sa
💡 Lighting: amzn.to/3vOZeZY
💡 Key Lighting: amzn.to/3f6qP2f
Camera Equipment:
📷 Camera: amzn.to/3uCv4J9
📸 Primary Lens: amzn.to/3vT6wMm
📸 Secondary Lens: amzn.to/3tyqWIX
🎥 Secondary Camera: amzn.to/3o2zCGi
🎙 Camera Mic: amzn.to/33tCz9l
🎞 USB to HDMI: amzn.to/33yW9RE 
Наука
This is literally the coolest way of using the gpt4o vision ever! Amazing job! I am currently number one in the leader boards with my entries!
Success!
Bro a Pokédex with all recognized real life species of animals would actually be dope. And can only capture via camera instead of through photos on-system, and can use AI/lidar to tell if it’s a photo of a real life thing instead of a photo of someone’s computer screen. 🔥
Exactly!
Isnt that just Google Lens with a Pokémon Theme?
Lidar! That's smart. I was like "Hmmm, how do we keep kids from cheating? I mean, they'll likely be able to cheat the AI, but once a human becomes involved..... nahhh, that'd take too much resources".
@bedxntathat’s not a game
@@BobderBenchpresser imagine making a pokedex skin mod for google lens
This is how AI should be used. To leverage passion projects into reality.
Agreed!
Don’t be police of fun please
@@Kongongongg What are you even talking about?
@@KongongonggOI! ITS THE FUN POLICE! 📢🗣️🗣️🫵
Just wait till your hear someone complain that he didn’t pay anyone to record every line in the Pokédex
I wasnt wondering why you were building this. It's obviously because its an awesome idea!
Thanks :)
This is the first AI Tech video that actually put a smile on my face. Thank you :)
Oooh x3 sugggestions :
- Search by Type
- Scanned Objects may have a Potential Rarity which gives a sense of acomplishment and a reason to go on the leaderboards
- Auto fullscreen to complete the Pokedex feel
- Custom categories for users to sort their snaps in
How can we determine the rarity of a snap though? For example, (keeping the irl objects aside for now), a Pikachu could be worth more to someone than a charmander but vice versa for the other person.
@@HT79 its not a value or what is it worth, it's literally how often you can "meet" the object in question, so like a rhino would be ultra rare and a dog or a road sign would be common
Great video and great product! Haven't gone through the source code yet and you've probably implemented this way already but, GPT has problems reproducing the same text for the same prompt unless you set a very low temperature in which case it's usually gibberish. So what would happen is different people scanning Pikachu would create different entries for it. To save on the database size and keep things consistent for everyone, what you could do is have a two layer prompt for GPT. First one will only get the pokemon/rl object name and the second prompt would get the description and stats for the name. The very first time you get a response for the second prompt, you could save it in the db. The second person who would've scan a Pikachu would get the stored records from the vector search. This will even save up on the GPT tokens. Another added benefit would be being able to poll PokemonDB for accurate stats for actual pokemons.
Database, however, needs to be redesigned a bit to have two collections - one for saving the embeddings and one for saving the user snaps.
Btw, do you have a Gitter or something similar to discuss this more, if interested?
Quite good considerations, and things I think are work building in. I think if this project had a progression plan this would be on the list!
wow this video is an absolute masterpiece, showing the whole process is really motivating and insightful
Wow first time I see something like this in youtube
Haha awesome!!!
Really awesome project and video altogether. I'm grateful youtube has recommended me your channel, it was a nice surprise. I'm eager to see what enhancements you and the community come up with.
Fantastic project and such nice presentation on the video. This deserves to go viral, good stuff man.
Dude, you are a genius and you have the cleanest desk and creative process I’ve seen.
After identifying a bird, make it resemble the pokemon.
Ahha probably could do that too!
Wow! This is inspiring! I'm trying to show my kids what the creation process looks like and how satisfying it is! Pokemon sure is a great way to do this! You always amaze!
Yep idea iteration to make a project is one of the most interesting things to me!
You legend, this is a really ingenious way to tie all of this cool technology together. Great work!
This is freaking amazing! Shared with all my Pokemon friends!
Haha that's great!!! Thanks!
It’s even more impressive that you know real life Pokémon 😮
I’m amazed by your efficiency. great video, love the format. Would love to see more like these!
Thanks
And you did it while recording and creating an amazing production video you are a LEGEND!
I enjoyed every single minute watching this video
Wow, thanks!
As a mobile app developer for many years, learned a ton from your video. Thanks for sharing!
Such a cool idea, great result and as a plus a little tutorial how to structure a project like this. These are the videos i love the internet for.
Inspirational how far creativity and persistence can take you.
Thank you for this gem of a video 🙏
Glad you enjoyed it! Yep lots of persistence for this one!!
Bro's using every gadget and device available in the world jesus
I should of coded some of it in VR too!
This is insane! As a fellow dev, props on the attention to detail. I can really see the passion behind this. 🏆
This is super cool, great explanation on the process too.
the goal was to show how ideas can be put together!
Having the "Dexter" voice is what makes this especially perfect
I can't even describe how amazing that video is. And there is so much to learn about .
This was awesome just tried it out and it works surprisingly well good job
This is really inspiring for a pokemon fan just dipping into the surface of computer science and design! Good work
The design... Wow GG, i wish you would talk about it more, how you implemented it. Really nice UI...
You have amazing design skills. How did you acquire these?
Amazing! Loved the idea
This is just epic, I had the same idea for creating an app just like this, but I wouldn't have created it to this perfection level. You are hands down 10X developer who knows UI/ UX. Really got inspired from you and I want to keep learning and developing to become like you.
This is freaken beyond amazing!!! 😁😁😁
Wow, amazing work !
Love it! Waiting for updates!
Haha will add!
This is fantastic, you can even branch this concept to emulate a Star Trek tricorder, your imagination is the limit. Brilliant !
I just recently encountered and learned next JS at work, as a data scientist. Doing stuff with RAG and chatbots, so this is def up my ally. I am also an ALL TIME Pokémon fan, currently playing radical red. Thank you for this MASTERPIECE of a video combining mine and I’m sure so many others love for tech and AI with Pokémon. Keep innovating, you’ve easily earned a sub!
Amazing to open source this. Ill definitely be adding stable diffusion to convert all images into pokemon cartoon style.
이 영상은 어떤 도구를 어떻게 멋지게 써야하는지 집중하는 것이 아니라 결국 무엇을 만드느냐가 중요하다는 것을 상기시켜주었습니다 ㅠㅠ..
많이 배워가네요..
I am super surprised you haven't done TS yet! It's a game changer and once you do it there's no going back. Awesome project! I'm looking to do a project like this as well so it's really informative that you went through each step in good enough detail instead of a super high level brushthrough!
I think I'm going to have to do a dedicated video of me learning it!
This is so inspiring to me. Thanks Adrian for making this video ❤
Thanks lots of effort was put into this!
i've always dreamed on this. Amazing
Really enjoyed this!
I watched this video two times. So good!
damn I was planning on doing this too. When I saw 4o get announced with the camera feature I instantly thought “wow thats a real life pokedex!”
nice work dude!! awesome!
This is amazing! Well done. A couple ideas to build on this... One is to use generative Ai to give the creature a Pokémon like creative name and a bio. Two is use the photo and the Pokémon like name and description to generate a cartoon version of the creature image. Then the app can switch between Pokémon world and real world
Both are great ideas, I like the idea of creating a cartoon like version of real life creatures!
@@AdrianTwarog hey! Thanks for responding. Your work is so creative and technically excellent. It's a rare combination. Well done. 👏
How are you covering the costs for running the services?
This is so cool. So excited to try it. My first project at my uni was also a C# pokedex. But it is not actually that good but I am proud for my first project. Pokemon is literally my childhood too.
This is amazing i tried it out and its like my dream come true! I always have been looking for a thing like this that isn’t a 200+ dollar investment. I suggest at some point in time show both types as I noticed that the dragonite was mono flying. Keep up the amazing work!!
I was telling my partner the other day that I wish there was a IRL Animal Crossing Flower, bird, Animal etc catalog you could go and fill out , and sure you could just take picture of your monitor but the fun is in discorvering things on your own imo. this hit that itch very close, first entry is already my doggo!
this is so cool, definitely sending this to my son.
big salute for making this a website!!
this is very cool. thank you for sharing
You are very welcome
This Guys Is A Legend Bringing Our ChildHood Dreams In Our Hand and for Free! omg Tysm For Ur Hard Work We Would Be Waiting
Your though be m process behind it is amazing
I can't express how envious I am of you for being able to do this and I can't hahaha. Pretty good job mate. The video was also very entertaining to watch! Btw, what was that device where you did the sketch for the project? Cheers!
This is AMAZING!! How many days in total it took you to make this project?
Great video 👍
Now we just need a 3D printed PokeDex with this AI.
I swear I was just talking about this a few weeks ago with my brother… Im glad yt showed me this
Amazing implementation!! Add an icon so that when I add the website to homescreen on iphone, I get a cute pokeball instead of "R".
I love this. I would like to use this in my classroom. But it needs to be translated to work. I think it would be not to difficult for the AI to add a language feature?
really cool the only thing i think would really help is if the initial line was the "dragonite the knight pokemon and the evolved form of dragonair" line at the start and then limit the response to a single sentence other than that great video i thought the use of AI in the title meant you were gonna ask chat gpt to write the code and test it as you implement it, you would be surprise how much that is going to happen in the future though i dont see it as a difference as using an API at this point its just a tool, great vid :D
Loved it!!!
This is AWSOME, you are Awsome, thanks a lot, this as an app would be perfect
haha I'm running out of openai credit!
This is the best quality tutorial I have seen online~ I loved you show the whole process in such detail and even open source it! Thank you! I just have a question, the app as it is today costs you money to run... Specially becaude of the calls to OpenAI. How could you make a profit with an app like this? If this were to become really popular I think you would need to turn it down?
Hello, do you have a video where you show the all coding process we can follow to learn ? :) thank youuu
Man, you are the best!!!
So I took a couple of pictures with it and was pretty blown away, seriously this is super cool, but the next time I went on my pictures were all gone.
I’m signed in through Google btw so I’m surprised they didn’t seem to save. Any ideas?
The cease and desist gonna go crazy for this project
What you think about the to rlcd monitor and the big me e ink they said it was good for eyes strain relief
A share option would be cool, to show others how it looks after scanning something!
Love this!
this all fun and wholesome but validate what people will upload
This app is incredible. I discovered that bananas had 5 HP with this. You should add a button that allows sharing an entry (like the banana one) with someone else.
Omg! I saw another RUclips video where a physical Pokédex was designed.
I’m very similar to you in that -that I’ve followed Pokémon for most of my life and it doesn’t make sense for me to not follow it anymore! I really wanted to build something like this but was slacking off because of not having a process in place for this. You video seems to be great for that. I’d be disappointed if this was a tutorial xD
Loving it!
Can you change the icon when it is installed as a web app?
Hmm good idea!
Could you make it that it uses the primary camera by default instead of the ultra-wide camera?
Also, when i touch the camera it opens my main camera app, which is nice, but after I take the photo it tells me that it couldn't finish the process because of low memory... But I'm not low on memory. Or it it RAM? I only have 6GBs (Samsung S20FE)
Hello good sir, what is that tablet you drew your idea sketches on like at 3:00
Didnt "Abe's projects" do the same exact thing you did and also made like a separate pokedex device?
Nice work! Just curious, what's the device using in planning? the e-book? cheers
It's reMarkable 2
Hmm why not tensorflow? I made a small prototype for the first gen, the issue was that each pokemon needs about 100+ pictures which can bloat the app size if not using a server
Loved it ❤❤
Thanks!
Thank you ❤
I'm wondering - what's the tool you use on 2:50? Is it Remarkable or something else? 😊
Remarkable!
I really hope that eventually you can have all of the different generations of the Pokedex skins available to either buy or swap too, I'm really partial to the diamond pearl version but sometimes you just can't beat the original Dexter.
That and If you swap to Dexter you get the original snark with the descriptions heh
Best times.
But mainly just the skins alone would be dope. Can't wait for this to be publicly available, hopefully there can be a choice when taking the picture also to either upload it to a public database that everyone can share and start collecting stuff togeather or a private one, either connected to your account and privatized. Stored locally on your own phones file or something in-between. Would be very useful to also have a option for accessibility to use for blind people if it had a basic voice command mode. Regardless all of these are just concepts I thought up halfway through the video. You might touch on some of them in the video somewhere later And I just don't know it yet.
No matter what this is a freaking amazing idea and is a fellow pokémon nerd who's been there since before the gold and silver games all the way to Scarlet and Violet I'm there with you fellow nerd. Gotta catch em all will never perish, even if the dream gets harder every generation 😂
I was wondering if there was a way for it to scan a image and then check the pokedex tab for similar image that is stored and pull up the information that is already there.
Can do this, though I haven’t made that feature yet, could be a wiki of comment entries! Cool idea
This is just amazing
Thanks!
What's your coding font? I like the cleanliness of it. It's like Cascadia but better
there should also be option where if the pokedex has nothing it will ask user to if they wanted to add this new things to entry in pokedex like in pokemon
just a quick question, if u let everyone use your openai api key, is that means u let them consume your openai credit?
doing gods work
Whats the ChatGPT usage like? Surely this will cost a ton as its open to all?
Your truly talented
Hi! I'm curious about the costs of running this application. As more users try it out, won't the costs become too large to maintain?
Indeed, it's the cost of operation, all businesses who use anything from OpenAI have to sort of pay it!
thank you!!! what is that tablet you are writting in the begining??
Do you mean the Remarkable?
I’m currently number 1 in the leaderboard. Just wanted to say that, have a good day!
Hahha that was quick! I wonder just how many people will be on the leaderboard!
I have a question, let's day you are using GPT-4O dont you think there might be a problem of too much users taking pictures and all causing you to pay extra for its API ? How can you solve it? Sorry I have a similar idea but based on thr real time video and I'm not able to find a good AI for it.
The cost of doing business!
I'm pretty sure Gemini 1.5 Pro accepts video as an input, but I don't know if you can attach a video outside of AI Studio, since i haven't tried Vertex AI or Google Cloud.
great work ,even i want to create software like this! loved your work