updating the flutter AI playground's behavior and layout #52
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,219 @@ | ||
| // Copyright 2025 Google LLC | ||
|
Contributor
There was a problem hiding this comment. This is also duplicated code that doesn't need to be duplicated! We should eb able to use the original chat demo, just swap out the model in that is being used! There was a problem hiding this comment. I cleaned up the chat demo so it will focus on the function calling part and always select the gemini 2.5 flash. The majority of the UI component is moved to shared folder and reuse between two demos. I think it's ok to have independent demo page for different purposes. |
||
| // | ||
| // Licensed under the Apache License, Version 2.0 (the "License"); | ||
| // you may not use this file except in compliance with the License. | ||
| // You may obtain a copy of the License at | ||
| // | ||
| // http://www.apache.org/licenses/LICENSE-2.0 | ||
| // | ||
| // Unless required by applicable law or agreed to in writing, software | ||
| // distributed under the License is distributed on an "AS IS" BASIS, | ||
| // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| // See the License for the specific language governing permissions and | ||
| // limitations under the License. | ||
|
|
||
| import 'dart:typed_data'; | ||
| import 'dart:developer'; | ||
| import 'package:flutter/material.dart'; | ||
| import 'package:flutter/foundation.dart' show kIsWeb; | ||
| import 'package:permission_handler/permission_handler.dart'; | ||
| import 'package:firebase_ai/firebase_ai.dart'; | ||
| import 'package:flutter_riverpod/flutter_riverpod.dart'; | ||
| import 'package:image_picker/image_picker.dart'; | ||
| import '../../shared/ui/app_frame.dart'; | ||
| import '../../shared/ui/app_spacing.dart'; | ||
| import './ui_components/ui_components.dart'; | ||
| import './firebaseai_chat_service.dart'; | ||
| import 'ui_components/model_picker.dart'; | ||
| import './models/gemini_model_nano.dart'; | ||
|
|
||
| class ChatDemoNano extends ConsumerStatefulWidget { | ||
| const ChatDemoNano({super.key}); | ||
|
|
||
| @override | ||
| ConsumerState<ChatDemoNano> createState() => ChatDemoNanoState(); | ||
| } | ||
|
|
||
| class ChatDemoNanoState extends ConsumerState<ChatDemoNano> { | ||
| // Service for interacting with the Gemini API. | ||
| late final ChatServiceNano _chatService; | ||
|
|
||
| // UI State | ||
| final List<MessageData> _messages = <MessageData>[]; | ||
| final TextEditingController _userTextInputController = | ||
| TextEditingController(); | ||
| Uint8List? _attachment; | ||
| final ScrollController _scrollController = ScrollController(); | ||
| bool _loading = false; | ||
| OverlayPortalController opController = OverlayPortalController(); | ||
|
|
||
| @override | ||
| void initState() { | ||
| super.initState(); | ||
| _chatService = ChatServiceNano(ref); | ||
| geminiModels.selectModel('gemini-2.5-flash-image-preview'); | ||
| _chatService.init(); | ||
| _userTextInputController.text = | ||
| 'Hot air balloons rising over the San Francisco Bay at golden hour with a view of the Golden Gate Bridge. Make it anime style.'; | ||
| } | ||
|
|
||
| @override | ||
| void didChangeDependencies() { | ||
| requestPermissions(); | ||
| super.didChangeDependencies(); | ||
| } | ||
|
|
||
| @override | ||
| void dispose() { | ||
| _scrollController.dispose(); | ||
| _userTextInputController.dispose(); | ||
| super.dispose(); | ||
| } | ||
|
|
||
| Future<void> requestPermissions() async { | ||
| if (!kIsWeb) { | ||
| await Permission.manageExternalStorage.request(); | ||
| } | ||
| } | ||
|
|
||
| void _scrollToEnd() { | ||
| WidgetsBinding.instance.addPostFrameCallback((_) { | ||
| if (_scrollController.hasClients) { | ||
| _scrollController.animateTo( | ||
| _scrollController.position.maxScrollExtent, | ||
| duration: const Duration(milliseconds: 300), | ||
| curve: Curves.easeOut, | ||
| ); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| void _pickImage() async { | ||
| final pickedImage = await ImagePicker().pickImage( | ||
| source: ImageSource.gallery, | ||
| ); | ||
|
|
||
| if (pickedImage != null) { | ||
| final imageBytes = await pickedImage.readAsBytes(); | ||
| setState(() { | ||
| _attachment = imageBytes; | ||
| }); | ||
| log('attachment saved!'); | ||
| } | ||
| } | ||
|
|
||
| void sendMessage(String text) async { | ||
| if (text.isEmpty) return; | ||
|
|
||
| setState(() { | ||
| _loading = true; | ||
| }); | ||
|
|
||
| // Add user message to UI | ||
| final userMessageText = text.trim(); | ||
| final userAttachment = _attachment; | ||
| _messages.add( | ||
| MessageData( | ||
| text: userMessageText, | ||
| image: userAttachment != null ? Image.memory(userAttachment) : null, | ||
| fromUser: true, | ||
| ), | ||
| ); | ||
| setState(() { | ||
| _attachment = null; | ||
| _userTextInputController.clear(); | ||
| }); | ||
| _scrollToEnd(); | ||
|
|
||
| // Construct the Content object for the service | ||
| final content = (userAttachment != null) | ||
| ? Content.multi([ | ||
| TextPart(userMessageText), | ||
| InlineDataPart('image/jpeg', userAttachment), | ||
| ]) | ||
| : Content.text(userMessageText); | ||
|
|
||
| // Call the service and handle the response | ||
| try { | ||
| final chatResponse = await _chatService.sendMessage(content); | ||
| _messages.add( | ||
| MessageData( | ||
| text: chatResponse.text, | ||
| image: chatResponse.image, | ||
| fromUser: false, | ||
| ), | ||
| ); | ||
| } catch (e) { | ||
| if (mounted) { | ||
| ScaffoldMessenger.of(context).showSnackBar( | ||
| SnackBar( | ||
| content: Text(e.toString()), | ||
| backgroundColor: Theme.of(context).colorScheme.error, | ||
| ), | ||
| ); | ||
| } | ||
| } finally { | ||
| setState(() { | ||
| _loading = false; | ||
| }); | ||
| _scrollToEnd(); | ||
| } | ||
| } | ||
|
|
||
| void showModelPicker() { | ||
| showDialog( | ||
| context: context, | ||
| builder: (context) { | ||
| return ModelPicker( | ||
| selectedModel: geminiModels.selectedModel, | ||
| onSelected: (value) { | ||
| _chatService.changeModel(value); | ||
| setState(() { | ||
| _userTextInputController.text = | ||
| geminiModels.selectedModel.defaultPrompt; | ||
| _messages.clear(); | ||
| }); | ||
| }, | ||
| ); | ||
| }, | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return Scaffold( | ||
| body: Column( | ||
| children: [ | ||
| Expanded( | ||
| child: AppFrame( | ||
| child: Padding( | ||
| padding: const EdgeInsets.all(AppSpacing.s16), | ||
| child: Center( | ||
| child: Column( | ||
| mainAxisAlignment: MainAxisAlignment.center, | ||
| children: <Widget>[ | ||
| Expanded( | ||
| child: MessageListView( | ||
| messages: _messages, | ||
| scrollController: _scrollController, | ||
| ), | ||
| ), | ||
| if (_loading) const LinearProgressIndicator(), | ||
| AttachmentPreview(attachment: _attachment), | ||
| ], | ||
| ), | ||
| ), | ||
| ), | ||
| ), | ||
| ), | ||
| MessageInputBar( | ||
| textController: _userTextInputController, | ||
| loading: _loading, | ||
| sendMessage: sendMessage, | ||
| onPickImagePressed: _pickImage, | ||
| ), | ||
| ], | ||
| ), | ||
| ); | ||
| } | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think it's a good idea to hijack the UI and automatically send the first message. As someone launching the demo for the first time, sending the message automatically kind of takes away the user's agency? Generally a bad UX pattern to execute an action without user consent. Maybe an alternative is to add a pop up or something that says "click send message" to see a tool call! or something that encourages the user to send the initial message, but still lets them decide.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Added a dialog to ask the user to make the decision