How to Use GPT-4V With Next.js 14 | Text Streaming, Image Upload, and More!
ฝัง
- เผยแพร่เมื่อ 2 ส.ค. 2024
- 🎓 Join my learning platform for module based courses, learning exercises, and more: coderprep.com/
📩 Join CodeLetter by Cooper Codes, the 3 minute tech newsletter: thecodeletter.com
Join the Cooper Codes Community: / discord (Weekly calls, free resources, tutoring, and more!)
In this video I use Next.js 14 and GPT-4V to analyze the image that a user uploads. This is a complete project, featuring streaming, image upload, API route creation, and even more features! If you’re looking for a starter project to start working with GPT-4V and Next.js 14, this video is exactly what you need. Throughout the tutorial I make sure to discuss each aspect of the process of using GPT-4V, allowing you to understand every single thing you need to know when it comes to using GPT-4V within your own Next.js 14 applications. This video should also be helpful for those familiar with GPT chatbots, and are interested in learning how to add GPT-4V to their existing workflows.
Final project: github.com/coopercodes/GPT4VW...
0:00 Introduction / Project showcase
1:31 Create Next.js 14 application
4:00 Create UI for image upload and AI response
9:15 Image upload functionality in Next.js 14
18:10 Create API route with Next.js 14 and OpenAI GPT-4V
26:10 Call GPT-4V from Next.js 14 (streaming response to user)
34:14 Final project, thanks for watching! - วิทยาศาสตร์และเทคโนโลยี
I like how you always focus on the most important stuff instead of things like tailwind classes.
Haha thank you. I have found that for teaching the core next.js / JavaScript functionality it helps to keep the UI simple.
This was exactly what I needed! Great video!
Amazing content bro
You saved me Man. Really 😄. Thank you for the video and your work.
Amazing tutorials as always, would love to see you cover the latest Assistant API.
Thanks so much for the comment and support :), I'll check out the Assistant API. Any type of implementation in particular you'd be interested in seeing?
@@CooperCodes An app which involves users creating their own chatbot for others to use would be great. With function calling involved.
Just wrote the assistant api integration in swift. it's simple in web. Getting a chat to decide if it should reply to a query with the assistant using its tools versus gpt4-turbo versus reaching for an embedding would be a good video.@@CooperCodes
Great tutorial 😊😊
Thank you so much :) glad you enjoyed!
Great demo as usual. Thanks.
Appreciate the comment as always :) glad you enjoyed
@@CooperCodesNo probs - I've been digging about in Bun again ....any plans to do a Bun video ?
Very great video. Thank you! I don't know much about useChat, how do I pass custom parameters defined on the front end to the api/chat interface?
nice!
Thanks for the comment :)
Great video. Why did you use api routes instead of server actions? Would it be possible to build this app with server actions instead of api routes? I'm new to next js and this is what confuses me the most. Thanks for the video. Keep up the good work.
Cooper, can we get a video where you loop dall e 3 and gpt 4 vision preview together so users can change or remove certain parts of the image they've uploaded while keeping everything else the same. and only what they type in the prompt of what they want changed changes
fantastic vid but how do we deploy
I was just thinking if it's possible to make a video with Next 14 using supabase to pass the context to Openai
29:18
great tutorial!! can this be used in supabse as i am trying to build a chat interface web app which fetch chat history on user authentication. Thank you!
This can 100% be used alongside Supabase, but you would have to create some PostgreSQL tables in order to save chat history and things along those lines. Within the POST request made in this tutorial you can implement a supabase client to do any database / auth operations that you may need. Hopefully this helps! Thanks so much for watching :)
why do you need to use the 'use client' at the deepest level? can it not be inherited from parent components? why would be it better to be as narrow as possible with using it?
I keep getting the error cannot find module "open-ai"
I tried to run it and giving me an error, shared on the git repo
Did you change the API key? It will not work just from cloning the repo if you do not replace the configuration with your own API key. github.com/coopercodes/GPT4VWithNextJS14ImageAnalysis/blob/20dde4b9702976204a9a699ff1d2849afe91451c/app/api/analyzeImage/route.ts#L7C17-L7C65 this link should bring you to the line.