#BuildWithAI: A Gemini TV show trivia game: A short Android story

In this short talk, delivered as part of the GDG Global Gemini Show and Tell #BuildWithAI event (https://gdg.community.dev/events/details/google-gdg-global-presents-gemini-show-amp-tell/) I briefly discussed how with the help of Gemini I was able to implement a TV show trivia game inside my open-source Android app Upnext: TV Series Manager using the Firebase Multimodal Tasks with Gemini API Cloud Function

Transcript

1. A TV show trivia game: A short Android story Global Ahmed Tikiwa | Google Developer Expert (GDE) Android
2. About me + Google Developer Expert (GDE) in Android + Software Engineer @ Bol, Netherlands + X/Twitter: @ahmed_tikiwa + LinkedIn: https://www.linkedin.com/in/ahmed-tikiwa/ @ahmed_tikiwa
3. Agenda + Overview of the Android app + Google AI or Vertex AI + Using Vertex AI: Getting ideas + Firebase Gemini API Cloud Function + Code runthrough + Demo @ahmed_tikiwa
4. Overview of the Android app Global
5. @ahmed_tikiwa Upnext: TV Series Manager Open Source and part of the Google Developers Dev Library Available for download on the Google Play Store since 2015
6. Google AI or Vertex AI Global
7. Vertex AI Gemini API via Google AI Studio Gemini API via Vertex AI Studio https://aistudio.google.com https://cloud.google.com/vertex-ai @ahmed_tikiwa See ai.google.dev/available-regions for available regions
8. Vertex AI Gemini API via Google AI Studio Gemini API via Vertex AI Studio https://aistudio.google.com https://cloud.google.com/vertex-ai @ahmed_tikiwa See ai.google.dev/available-regions for available regions
9. Using Vertex AI: Getting ideas Global
10. “I have an Android app that I built. It has a screen that displays a schedule of TV shows that aired the previous day, the next day and the current day. There is another screen that displays the most popular TV shows, the most anticipated TV shows and the current trending TV shows. I want to integrate Generative AI models into the Android app but need ideas.”
11. Gemini’s response in Vertex AI Studio @ahmed_tikiwa console.cloud.google.com/vertex-ai/generative
12. Character and Story Creation - Users can create their own TV shows with the help of GenAI for the storylines and characters - Potential for choose-your-ending adventures with the help of GenAI GENERATED WITH AI @ahmed_tikiwa
13. Personalised Recommendations - Personalised TV show recommendations based on user’s preferences, watch history, and interactions with the app - GenAI suggestions based on data analysis user’s unique interests @ahmed_tikiwa GENERATED WITH AI
14. Similar Shows, Enhanced descriptions - Use GenAI to generate a list of similar TV shows to the one the user is currently viewing - Use GenAI to provide information on the show’s overall quality, critical reception, audience reactions @ahmed_tikiwa GENERATED WITH AI
15. Interactive Quizzes and Trivia - Use GenAI to generate questions and answers, challenge user’s knowledge, entertain - Fun, engaging and promotes discovery and new content exploration @ahmed_tikiwa GENERATED WITH AI
16. Firebase Gemini API Cloud Function Global
17. @ahmed_tikiwa Multimodal Tasks with the Gemini API function Installation and setup Extension requires upgrade to Blaze Plan Wizard will enable APIs and create resources required for the function to run Install via Firebase Console for Firebase Project
18. @ahmed_tikiwa Multimodal Tasks with the Gemini API function Vertex AI Cloud Function Interaction with Gemini API Models New Firestore Documents will trigger the cloud function
19. Setting up the code Global
20. app/build.gradle plugins {...} android {...} dependencies { ... // Firebase Firestore implementation libs.firebase.firestore // Lottie Compose Android implementation libs.lottie.compose.android ... }
21. @ahmed_tikiwa UI Layer How the quiz code is structured TriviaScreen TriviaViewModel TriviaScreenUiState
22. @ahmed_tikiwa UI Layer How the quiz code is structured TriviaScreen TriviaViewModel Data Layer VertexAIRepository TriviaScreenUiState
23. @ahmed_tikiwa UI Layer How the quiz code is structured TriviaScreen TriviaViewModel Data Layer VertexAIRepository TriviaScreenUiState Data Source Vertex AI
24. VertexAIRepository.kt The Data Layer class VertexAIRepository( private val firebaseFirestore: FirebaseFirestore ) { suspended fun getTrivia(instruction: String): Flow<Result<GeminiTriviaResponse?>> { ... } }
25. VertexAIRepository.kt The Data Layer class VertexAIRepository(...) { suspended fun getTrivia(instruction: String): Flow<Result<GeminiTriviaResponse?>> { // used convert the json response from Firebase into a data object val gson = Gson() val document = firebaseFirestore.collection(COLLECTION_PATH) .document(DOCUMENT_PATH) // Execute the GenAI query by uploading a document with the instruction document.set(GeminiMultimodalRequest(instruction)).await() ... } }
26. VertexAIRepository.kt The Data Layer class VertexAIRepository(...) { suspended fun getTrivia(instruction: String): Flow<Result<GeminiTriviaResponse?>> { ... return firebaseFirestore .collection(COLLECTION_PATH) .getFirestoreDataAsFlow { querySnapshot -> when (querySnapshot) { is Result.Success -> { ... } is Result.GenericError -> Result.GenericError(error = querySnapshot.error) is Result.Loading -> Result.Loading(true) is Result.NetworkError -> Result.NetworkError } }.flowOn(Dispatchers.IO)
27. TriviaViewModel.kt The UI Layer @HiltViewModel class TriviaViewModel @Inject constructor( private val vertexAIRepository: VertexAIRepository ) : ViewModel() { init { getTrivia() } ... }
28. TriviaViewModel.kt The UI Layer @HiltViewModel class TriviaViewModel ... { ... private fun getTrivia() { val prompt = "5 random TV shows" viewModelScope.launch { try { vertexAIRepository.getTrivia(prompt).collect { result -> ... } } catch (e: Exception) { _uiState.value = TriviaScreenUiState.Error( e.localizedMessage ?: "An expected error occurred. Please try again" )
29. TriviaViewModel.kt The UI Layer @HiltViewModel class TriviaViewModel ... { ... private fun getTrivia() { ... when (result) { is Result.Loading -> _uiState.value = TriviaScreenUiState.Loading ... } }
30. TriviaViewModel.kt The UI Layer @HiltViewModel class TriviaViewModel ... { ... private fun getTrivia() { ... when (result) { is Result.Success -> { _questions.value = result.data?.triviaQuiz?.toTriviaQuestions() _currentQuestion.value = _questions.value?.firstOrNull() determineNextQuestion() _uiState.value = TriviaScreenUiState.Success( questions = _questions.value, currentQuestion = _currentQuestion.value, nextQuestion = _nextQuestion.value, correctAnswers = _correctAnswers.value )
31. TriviaViewModel.kt The UI Layer @HiltViewModel class TriviaViewModel ... { ... private fun getTrivia() { ... when (result) { else -> _uiState.value = TriviaScreenUiState.Error(result.toString()) ... } }
32. TriviaScreen.kt The UI Layer @Destination @Composable fun TriviaScreen( viewModel: TriviaViewModel = hiltViewModel() ) { val triviaUiState: TriviaScreenUiState by viewModel.uiState.collectAsState() val scrollState = rememberScrollState() Box( modifier = Modifier .padding(8.dp) .fillMaxSize() .verticalScroll(scrollState) ) { when (triviaUiState) {...} }
33. TriviaScreen.kt The UI Layer @Composable fun TriviaLoadingScreen( modifier: Modifier = Modifier ) { Column(...) { LottieAnimation(...) Spacer(modifier = Modifier.height(16.dp)) Text(...) Spacer(modifier = Modifier.height(16.dp)) CircularProgressIndicator() } } Animation credits: https://lottiefiles.com/8gnezozpwu
34. TriviaScreen.kt The UI Layer Animation credits: https://lottiefiles.com/Nabil_mersni @Composable fun TriviaCompleteScreen( correctAnswers: Int, modifier: Modifier = Modifier ) { ... Column(...) { LottieAnimation(...) Spacer(modifier = Modifier.height(8.dp)) Text(...) Spacer(modifier = Modifier.height(4.dp)) Text(...)
35. TriviaScreen.kt The UI Layer @Composable fun TriviaQuestion( triviaQuestion: TriviaQuestion, modifier: Modifier = Modifier, onChoiceSelected: (String) -> Unit, ) { Column(...) { Spacer(Modifier.height(8.dp)) Text(...) Spacer(Modifier.height(8.dp)) Text(...) Spacer(Modifier.height(16.dp)) ChoiceButtons(...) { answer -> onChoiceSelected(answer) }
36. The result Global
37. @ahmed_tikiwa Powered by Gemini & Firebase
38. References + Introduction to Gemini https://deepmind.google/technologies/gemini/#introduction + Upnext: TV Series Manager https://devlibrary.withgoogle.com/products/android/repos/akitikkx-upnext + Multimodal Tasks with the Gemini API Firebase Cloud Function documentation https://extensions.dev/extensions/googlecloud/firestore-multimodal-genai + Firebase Firestore documentation https://firebase.google.com/docs/firestore + Vertex AI Gemini API documentation https://cloud.google.com/vertex-ai/generative-ai/docs/start/quickstarts/quickstart-multimodal @ahmed_tikiwa
39. Thank you! X/Twitter: @ahmed_tikiwa LinkedIn: linkedin.com/in/ahmed-tikiwa/