Building a game for Medical Professionals using Google’s Generative AI models and Flutter
Generative AI opens up a myriad of possibilities for building apps with advanced reasoning and follow-up capabilities. From tailoring personalised content and facilitating natural conversations to creating dynamic scenario simulations and providing adaptive learning experiences, the potential applications are diverse and transformative.
Jacob Portnoff (with the username: medschoolbro) creates these Instagram reels (like this) where he tries to make a diagnosis in 30 secs.
This inspired me to create a diagnostic game named “Doctor Diagnose”. A Flutter-based application tailored for medical professionals, aims to challenge players to identify and diagnose potential ailments based on presented symptoms using Google’s Gemini model.
Note: This game is intended for educational purposes only and should not be used as a substitute for professional medical advice, diagnosis, or treatment. Always seek the advice of your physician or other qualified health provider with any questions you may have regarding a medical condition.
How to get started?
Doctor Diagnose is built using Flutter, Google’s open source framework for building beautiful, natively compiled, multi-platform applications from a single codebase.
We start by creating a new Flutter project using the following command.
flutter create --empty --org com.aditya doctordiagnoseThis would create a new folder with the name `doctordiagnose` and we can navigate to the project directory using:
cd doctordiagnoseUsing Google’s Generative AI Model (Gemini)
The Flutter team has recently unveiled the Google AI Dart SDK, a new pub.dev package: google_generative_ai, and supporting resources to enable us to build your own generative AI-based features into Dart and Flutter apps.
To use the Gemini API, we’ll need an API key. The quickstart here covers setting up a project and initializing the Generative AI Model.
The google_generative_ai package can be added as follows:
flutter pub add google_generative_aiChanges to code
To begin with, we start by modifying the MainApp() to add some custom colors and text styles as below:
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFFc9f66f)),
textTheme: const TextTheme(
titleMedium: TextStyle(color: Color(0xFF252525)),
bodyMedium: TextStyle(color: Colors.white),
),
appBarTheme: const AppBarTheme(
backgroundColor: Color(0xFFc9f66f),
),
scaffoldBackgroundColor: const Color(0xFF1C1C1C),
),
home: const HomeScreen(),
);
}
}
Next, we need to create a HomeScreen() widget to show a grid view of different scenarios as the following:
import 'package:doctordiagnose/data/data.dart';
import 'package:doctordiagnose/screens/diagnose_screen.dart';
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: const [Icon(Icons.abc)],
title: Text(
"Diagnose",
style: Theme.of(context).textTheme.titleMedium,
),
),
body: Center(
child: SizedBox(
width: 600,
child: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemCount: 5,
itemBuilder: (BuildContext context, int index) {
final scenario = medicalScenarios[index];
return GestureDetector(
onTap: () async => {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => DiagnoseScreen(
medicalScenario: scenario,
),
),
),
},
child: Card(
color: const Color(0xFF252525),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const SizedBox(
height: 18,
),
SizedBox(
width: 80,
child: Image(
image:
AssetImage('assets/avatars/avatar$index.png'),
),
),
const Spacer(),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 18.0),
child: Center(
child: Text(
'Symptoms: ${scenario['symptom']}',
textAlign: TextAlign.center,
),
),
),
const Spacer(),
],
)),
);
}),
),
),
);
}
}It would create a screen (as in the image below) with characters used from the Desi Log Illustration Pack, a free resource providing mix-and-match components for diverse Indian characters, made by Juhi Chitra.
This would also require some changes to pubspec.yaml for assets.
Read Adding assets and images.
Lastly, we need to add a ChatScreen() which will be used by Medical Professionals or any user to interact with the AI model. A great example of such a chat in Flutter is available on the DartPad as Gemini API Sample.
Reusing some of the components from here, we can add chat with the following change to the _model.startChat()
_model = GenerativeModel(
model: 'gemini-pro',
apiKey: Env.apiKey,
);
_chat = _model.startChat(history: [
Content.text('''
You’re are an AI model tasked to generate symptoms of a medical disease (in 4-5 word sentence), and the person playing (in this case a medical professional or a student) would try to guess what it could be by chatting with the AI and asking follow up questions. If the user is able to guess correctly, they are awarded points to be later used in an in-app leaderboard.
The current symptoms shared to the user are ${widget.medicalScenario['symptom']}.
Chat as the AI responsible to answer any follow up questions. Mention clearly if the user is able to guess the possible cause of symptoms. If not, follow up with hints without giving away the answer. Refuse to answer anything unrelated to the current question. Do not use superlatives or adjectives and keep the language simple and professional.
'''),
Content.model([
TextPart(
'Let us get started! What is the probable cause of ${widget.medicalScenario['symptom']}')
])
]);The `${widget.medicalScenario[‘symptom’]` is passed from the HomeScreen() to the ChatScreen() to share the user selection with the model. This sets the stage for the user to start guessing the reasons for the ailment and is the core of the application. It looks like this:
With this done, we are ready to test and deploy the application! I used Firebase hosting to deploy my app and it is available here.
The complete code for the application is available open source on GitHub: https://github.com/adityathakurxd/doctordiagnose
You can run the code on your system by following these steps:
- Fork the repository and clone it to your system
2. Navigate to the project directory
cd doctordiagnose3. Install dependencies
flutter pub get4. Create a new file called `.env` in the project directory and add your API key. To use the Gemini API, you’ll need an API key. If you don’t already have one, create a key in Google AI Studio.
API_KEY = YOUR API KEY5. This project uses envied to read environment variables. Run the following command to generate an env.g.dart file using build_runner.
dart run build_runner build -d6. Run the application
flutter run -d chromeConclusion
Leveraging the generative power of Google’s AI, the game produces realistic scenarios for users to test their diagnosis skills.
This not only makes the app a great learning tool but also shows how powerful AI can be in creating cool and practical experiences. As we keep exploring what AI can do in making apps, there’s a lot of exciting stuff ahead.
What is possible?
Generative AI can bring a lot of fun and learning to games. Picture a language-learning game adjusting difficulty as you progress or a historical decision simulator with AI creating realistic outcomes. Developers can improve coding skills with dynamically generated challenges, and math enthusiasts can solve puzzles of varying difficulty levels.
For art lovers, there’s a game where AI generates unique artworks for your virtual gallery. Musicians can enjoy composing with AI-generated algorithms, while mystery puzzle games challenge players with AI-created scenarios. Environmental simulations let you make decisions affecting ecosystems, and space exploration games offer unique planets and challenges crafted by AI.
Whether you’re into business strategy, medical diagnostics, or philosophy debates, generative AI can create engaging virtual scenarios.
For a change of pace, explore psychological themes or practice wildlife conservation efforts in games with realistic challenges. Culinary enthusiasts can experiment with AI-generated recipes, and virtual reality training simulations offer hands-on learning experiences. Manage virtual cities facing urban challenges, navigate political scenarios, or explore astronomy with AI-generated celestial phenomena. And if you need a break, relax in a calming game with AI-designed serene environments and activities. The possibilities are endless and exciting!
The question is: What will you build?
