How to Use Open AI's GPT-4o in FlutterFlow - Part 2
ฝัง
- เผยแพร่เมื่อ 28 ส.ค. 2024
- In this second video in the series Integrating Open AI's newest model, GPT-4.0 Omni, in FlutterFlow, we'll cover three steps:
1. Structuring Backend
2. Designing UI
3. Implementing Logic
Setting up Firebase
• Firebase Setup | Flutt...
If you have any questions, feel free to ask in the comments below. Let's jump into FlutterFlow and get started!
Ready to try FlutterFlow for yourself? Start building your app today with a free trial 👉 www.flutterflo...
Follow us on Twitter 👉 / flutterflow
--------------
FlutterFlow is a low-code builder for native apps, bringing design and development into one tool. With drag-and-drop functionality, you can build pixel-perfect UIs and easily connect your app to live data via Firebase or APIs. Plus, you can add advanced features like push notifications, payments, animations, and more. Whether you build your own custom widgets or write custom code, FlutterFlow makes it easy to bring your app ideas to life.
This is good; however, as I mentioned previously, you shouldn't hardcode your API key in the front end. I also feel you should show people how to limit message lengths to prevent token overflow and create new chats. It is cool you can do this from within FF but its a major security risk. I know FF launched Cloud Functions not too long ago but theres really no videos on it which I think would be cool to see if they can make some. Nonetheless the structure is the same whether you use an API call or a cloud function youd be passing in the old messages to chatgpt.
Can you show the correct way to do it? Thank you.
@@dogstank I'm making a free course on youtube I will make sure it'll be in there
It’s a great video, do continue with web app UI like chat GPT & titles and showing multiple chats + animations
Hard to follow, since various premade components and templates are used, and only briefly explained. Whenever such videos are made, one should assume the viewer does not have such things.
Great tutorial! Thanks! I would appreciate an addition of image input and chat history.
th-cam.com/video/BoaxDTUwWxw/w-d-xo.html
This is actually better
Merci pour cette vidéo ! Je suis justement entrain de créer un Chat OpenAI spécialisé pour les développeurs flutter dans ma Formation. Hâte d'avoir le mode stream directement intégré dans FlutterFlow !
Finally, after a month❤❤❤
please more tutorial about the topic! Thanks!!!
yessssssssssssss please more features
Thanks for this video I’ve been waiting for the 2nd part.🎉🎉
Nice tutorial. How do you have the chat history? Aren't you passing the text field message in the prompt?
Project link? Thanks in advance
It would be great to get the code snippet for the custom function (or the prompt) so we don't have to watch the video and re-type it.
I'm using a component to store my gpt chat messages and cannot access Page State variables from the component level, even though the component is nested under the chat_ai_page where I defined the Page State variables that you created around 7:00
I love FF but it's been an absolute disaster trying to create a functional gpt bot. The premade flows are different that these tutorial videos, the API setup is confusing, the bot can't handle UTC encoding even those I pass UTC-8 encoding in the content header of the API call, and due to the problem above, I can't get the bot to remember the chat history.
Ya'll should look at Poe AI to see how they handle bot creation. The FF UI should look a lot more like Poe's to enable rapid development of chat bots. Honestly, I'd rather just build this bot in python - it seems easier that way.
where did the "prompt" came from at 15:38? didn't we set it as a variable "messages" in the part 1? can someone please help!
I have the same problem. The only variable that appears is the “message” variable. Can someone help us?
In "Deifne API call" variable section; you can either change the variable name to from "message" to "prompt" or keep the variable name same (message) and just select the "Is List" as true
@@mujtabaim thanks man
@@mujtabaim but if we set the list "true", the test api call will not work. figured out the hard way
@@vishalkumar-yi4uw yeah, in Part 2, it was set to List JSON. So when I changed it, the test is not working. But the action appears to be working.
Please add the image option to upload the image and ask question from gpt4o
This is great, what the best use of this chat? is the audio possible to not type just ask questions?
where the prompt variable come from and why is it a list?
Hey team flutter flow can you make a complete video on eCommerce application with Admin panel this is very useful for everyone who use flutter flow specially for beginners 😉
very confusing when you don't show parts such as the component icon for the assistant in ChatBubbles component
where are you getting this prompt variable????? mine shows up as messages i followed everything from the video
Same here...
@@jgilbertomty from the part 1 of the video. Tho i think he named it "messages" on the part 1. Also, i noticed in the part 1 API setting that the list was set to false. While in Part 2, he used List JSON. So im also a bit confused
FINALLY!!!! THANKS!!!!!!
Hi im stuck at 20:58 please help 😢
The options are not in there in my project and it says current variable is not valid
If you don't see it it's probably because you need to provide a name for the action output variable
@@FlutterFlow Can you explain better how to solve the problem, I am facing the same problem but I can't find a way to solve it and I don't understand where to provide a name for the action output variable since it is a custom function and does not allow passing values
@@FlutterFlow I have watched the video multiple times to see what step I didn't do but I can't find it.
@@FlutterFlow the problem is that the connection with the API that you show in the first video doesn't match with the second video, in the first video you define a variable called "messages", but in the second is called "prompts" and apparently has a different structure, but you didn't show that change, can you explain that please
Help, please!!!! At minute 15:30, when you set the variable in the API Call, it adds a field that is the “prompt”. I don't know where this variable comes from. The only variable that appears to me is “message”. Can someone help me?
i am facing the same issue
this worked for me -> In "Deifne API call" variable section; you can either change the variable name to from "message" to "prompt" or keep the variable name same (message) and just select the "Is List" as true
@@mujtabaim Thank you very much for your help!!!!!!
Is there any app which is in use now(means on playstore it will be) which is created by flutterflow
Why don’t you show us how to properly upload images into Firebase Storage? There isn’t even an easy way to achieve this without hardcoding. Why can’t we choose the bucket path where we want to upload our generated images? We cant do this in the flow editor action...
I wish I could do dis😭😭
But am having trouble paying for the API credits in my country 😭
Can you please create a video on how to create a paywall (in-app purchases) wherein premium content or features are accessible only to paid users. Couldn’t find any good tutorial on it.
why don't you guys put the template? its very hard to follow along with the code.
Add a voice message function, please
FF Team can you start working on bugs? Development starts to be really hard because of how everything works. Less cool new features, more focus on bugs fixes pls.
This is one of the things we're focusing on in the next couple months. Thanks for the feedback.
Please would love to let users upload images. How to do that?
Okay I’m kinda stuck at 9:31 it mentions something about authenticated users, I don’t have this parameter set. How do I add it?
Here are the instructions for setting that up: th-cam.com/video/uri_Mwp_eAY/w-d-xo.html
@@FlutterFlow thanks for getting back me I actually found that very same video, although I’m having issues when running the new chat response, I did it exactly the same as you but nothing. I’ll be honest and admit I know very little about how api calls are made so I’ll spend a day just understanding and conceptualizing what exactly is happening here.
But thanks again for the video and the reply! 👍🏿👍🏿👍🏿
Hello. I want to show the marker as a price on the map like a airbnb. please add a new options or make a video showing how it's done
Steaming needs to be made no-code-level easy to implement with FF given that users expect that level of responsiveness from any app (otherwise they'll use chatgpt directly)
Coming very soon...
@@FlutterFlow that would be a beautiful surprise :)
*WARNING* This tutorial does not work. It is a waste of time (and the creator knows it).
Do not waste your time with this tutorial. Large sections are skipped or simply do not work.
*DO NOT WASTE YOUR TIME*
can you make a weather app? :D thanks
You can but the feature is not built with flutterflow
If I might are you trying to build something like that?
@@Phantom_Drille yes, i want to make a weather app for my community.
Please improve your support ticket system. Replies to queries take far too long, seeing the consultant is online and ignoring your query is not a good look. Once a consultant engages you, they shouldn’t take another 24 hours to get back to you again.
This caused me to cancel my subscription and switch to normal code.
*Code pasted by instructor at **17:55*
messages ??= [];
// Reverse the list
final reversedMessages = messages.reversed.toList();
final List jsonList = reversedMessages.map((message) {
return {
'role': message.role.toString().split('.').last,
'content': message.content,
};
}).toList();
return jsonList;
❤🎉