Building an AI Powered Game in Flutter (By: Sakina Abbas) - DevFest Lahore 2024

Talk by Sakina Abbas (https://www.linkedin.com/in/sakina-abbas/) at DevFest Lahore 2024 by GDG Lahore.

Transcript

1. Building an AI Powered Game with Flutter
2. Hi, I’m Sakina Abbas! Co-Founder & CEO, Reactree GDE Flutter, Dart 7+ years in Mobile Application Development Core Member of Flutter Karachi Pakistan Women in Tech Speaker for Google Developers Space, Singapore Mentor in various Google programs
4. 1. Roadmap 2. Flutter - Brief Intro 3. Firebase Vertex Ai - Getting Started 4. Prompt Engineering 5. Live Demo What will you learn today?
5. 1. Roadmap 2. Flutter - Brief Intro 3. Firebase Vertex Ai - Getting Started 4. Prompt Engineering 5. Live Demo What will you learn today?
6. What will we build today? - A scavenger hunting app - Choose location for your hunt e.g. House, office, school - Generate 5 items to find, through AI - Take a photo of the item - Validate if the photo contains the item
7. Tools used
8. 1. Roadmap 2. Flutter - Brief Intro 3. Firebase Vertex Ai - Getting Started 4. Prompt Engineering 5. Live Demo What will you learn today?
9. Flutter - Brief Introduction - SDK to build cross platform applications - Single code-base -> same application for multiple platforms! - Platforms supported: Android, iOS, Web, Windows, Mac, Linux & Fuchsia - Programming Language: Dart - Open-source - Developed & owned by Google - Age: ~7 years (May 2017)
10. 1. Roadmap 2. Flutter - Brief Intro 3. Firebase Vertex Ai - Getting Started 4. Prompt Engineering 5. Live Demo What will you learn today?
11. - Machine Learning (ML) platform by Google - Pre trained models for: - Image recognition - Text analysis, translations - Speech to text, Text to speech - API for Developers - For production use cases Firebase Vertex Ai - Brief Introduction
12. 1. Make sure your Dart version is 3.20+ 2. Create a firebase project, connect it to your game 3. Click on Build with Gemini in the Firebase console Firebase Vertex Ai - Getting Started
13. 1. Make sure your Dart version is 3.20+ 2. Create a firebase project, connect it to your game 3. Click on Build with Gemini in the Firebase console 4. Enable billing in your Firebase project 5. Enable the following APIs: a. Vertex AI API b. Vertex AI in Firebase API Firebase Vertex Ai - Getting Started
14. Firebase Vertex Ai - Getting Started
15. 6. Add firebase_vertexai dependency in pubspec.yaml 7. Initialise the Vertex AI service and the generative model Firebase Vertex Ai - Getting Started
16. Gemini - Models
17. 6. Add firebase_vertexai dependency in pubspec.yaml 7. Initialise the Vertex AI service and the generative model Firebase Vertex Ai - Getting Started class ScavengerHuntClient { ScavengerHuntClient() : _model = FirebaseVertexAI.instance.generativeModel( model: 'gemini-1.5-pro', ); final GenerativeModel _model; }
18. 6. Add firebase_vertexai dependency in pubspec.yaml 7. Initialise the Vertex AI service and the generative model 8. Call the Vertex AI Gemini API to generate item list Firebase Vertex Ai - Getting Started Future<String?> generateScavengerHuntItems (String location) async { final prompt = 'You are a scavenger hunt game where objects are found by taking a photo of them.' 'Generate a list of 5 items that could be found in the following location: $location.' 'The difficulty to find the items should be easy.' 'Keep the item name concise. All letters should be uppercase.' 'Provide your response as a JSON object with the following schema: {"items": ["", "", ...]}.' 'Do not return your result as Markdown.' ; final response = await _model.generateContent([Content. text(prompt)]); return response.text; }
19. 6. Add firebase_vertexai dependency in pubspec.yaml 7. Initialise the Vertex AI service and the generative model 8. Call the Vertex AI Gemini API to generate item list 9. Validate if the provided image is THE item or not Firebase Vertex Ai - Getting Started Future<String?> validateImage (String item , Uint8List image) async { final promptText = 'You are a scavenger hunt game where items are found by taking a photo of them.' 'You have been given the item " $item" and a photo of the item.' 'Determine if the photo is a valid photo of the item.' 'Provide your response as a JSON object with the following schema: {"isItemValid": true/false}.' 'Do not return your result as Markdown.' ; final response = await _model.generateContent([ Content. multi([TextPart(promptText) , DataPart('image/jpeg' , image)]), ]); return response.text; }
20. 1. Roadmap 2. Flutter - Brief Intro 3. Gemini - Getting Started 4. Prompt Engineering 5. Live Demo What will you learn today?
21. 1. Define your goal 2. State the response format, e.g. JSON 3. State the schema of JSON 4. Test your prompts in Google AI Studio Prompt Engineering Future<String?> generateScavengerHuntItems (String location) async { final prompt = 'You are a scavenger hunt game where objects are found by taking a photo of them.' 'Generate a list of 5 items that could be found in the following location: $location.' 'The difficulty to find the items should be easy.' 'Keep the item name concise. All letters should be uppercase.' 'Provide your response as a JSON object with the following schema: {"items": ["", "", ...]}.' 'Do not return your result as Markdown.' ; final response = await _model.generateContent([Content. text(prompt)]); return response.text; }
22. Contact Sakina Abbas sakina@reactree.com https://pk.linkedin.com/in/sa kina-abbas www.reactree.com Questions?