The emerging natural language generation models like GPT-2, GPT-3, and the latest Dalle-E have widened the scope for developers for building the ultimate machine avatar that can understand and engage in a natural dialogue like humans.
Flutter after its overwhelming success as a cross-platform mobile app development framework, has also become a staple frontend choice for conversational AI primarily for two reasons, the flexible UI development kit that can be integrated into the desktop, web, and mobile apps and its modular component-based architecture where bot interfaces can be built with platform-specific widgets.
To understand where Flutter fits into the conversational AI development tech stack, it is important to have a closer look at the user interface requirements of conversational AI. Let’s begin our discussion by pointing out these basics.
Conversational AI User Interface: What is really at stake?
We have discussed in a previous blog post, chatbot support with their preconfigured answers based upon some decision tree or business logic already looks outdated because of their limitations to extend support and answer queries beyond a certain threshold. This is where conversational AI chips in with its robust intent-matching capabilities powered by frequently trained data models.
Now, can you imagine a conversational AI avatar on your screen making a welcome face while starting a dialogue on a lighter note like “I think it’s cold out there in Atlanta now”. In the make-believe reality of the digital universe, you can be easily accustomed to answering with a pleasant answer like “Yes Liberty, it’s already 2 degrees here in the afternoon. By the way, can you tell me about occupation-related exceptions for the X insurance policy?” Thus the conversation takes on a smooth flow and engages the querying customer naturally.
Irrespective of the chosen OS platform for deploying your conversational AI, it needs to have a native and platform-specific look and feel. The conversational AI interface while facilitating dialogue should offer flexible text and visual inputs. This is why animated expressions for the bot avatar, effortless user interactions, and visual clues for accompanying conversations, are so important for User Interface (UI) and (UX) attributes of conversational AI.
Flutter is all integration-ready for conversational AI
By leveraging the component based structure of Flutter you can use some Dart packages, plugins and Rest APIs for developing conversational AI. Here we are going to explain 3 different ways to do it.
- Using Flutter’s GPT-3 Plugin
OpenAI offers a standalone GPT-3 API and while using Flutter for frontend you can use the related Dart package which facilitates the GPT3 API invocation as shown below.
Installation
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
dependencies: flutter: sdk: flutter gpt_3_dart: Usage import 'package:gpt_3_dart/gpt_3_dart.dart'; void main() async { OpenAI openAI = new OpenAI(apiKey: "YOUR_KEY_HERE"); String complete = await openAI.complete("This is a test.", 10); List search = await openAI .search(["White House", "hospital", "school"], "the president"); print(complete); print(search); } |
- Using RASA conversational AI framework with Flutter
To integrate the RASA framework for your Flutter-based conversational AI project, there is Rasa’s REST api accessible within Flutter. After calling this API you need to render the response. For calling the REST API in Flutter follow this path:
1 2 3 4 5 6 7 8 9 10 11 12 |
Future<http.Response> getBotResponse(String senderId, String message) { return http.post( 'http://your-bot-ip:5005/webhooks/rest/webhook', headers: <String, String>{ 'Content-Type': 'application/json; charset=UTF-8', }, body: jsonEncode(<String, String>{ 'sender': senderId, 'message': message }), ); } |
- Integrating Dalle-E API with Flutter for Conversational AI
Flutter developers are now capable of integrating latest DALL·E text-to-image generation model for conversational AI projects through an API. Here is how this integration takes place:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
var result = await http.post( Uri.parse("https://api.openai.com/v1/engines/davinci/completions"), headers: { "Authorization": "Bearer, "Accept":"application/json", "Content-Type": "application/json", }, body: jsonEncode({ "prompt":prompt, "max_tokens":1000, "temperature":0, // "top_p":1, "stop":"Human:", }) ); var body = jsonDecode(result.body); var text = body["choices"][0]["text"]; |
- Integrating DialogFlow with Flutter for Conversational AI
For integrating DialogFlow with Flutter you have the DialogFlowtter package ensuring a fast and seamless integration to DialogFlow framework for your conversational AI project. DialogFlowtter supports deployment across major OS platforms including Android, iOS and Web. Here is how the basic integration goes:
Add DialogFlowtter package to your Flutter dependencies in you pubspec.yaml:
1 2 |
dependencies: dialog_flowtter: ^0.3.1 |
Ensure adding the dialog_flow_auth.json, which is the file with details of the dialogflow integration to the pubspec.yaml assets:
1 2 3 4 5 6 7 8 9 10 11 |
flutter: uses-material-design: true assets: - assets/dialog_flow_auth.json We will cover this in detail in future blogs, but here is the part where you setup the code for Dialogflow in the app. AuthGoogle authGoogle = await AuthGoogle(fileJson: "assets/dialog_flow_auth.json").build(); Dialogflow dialogFlow = Dialogflow(authGoogle: authGoogle, language: Language.english); AIResponse response = await dialogFlow.detectIntent(query); |
Apart from all the integrations that we have mentioned in this blog post, there are other chatbot frameworks like Sarufi.io that can be easily integrated into Flutter through Dart SDK packages or plugins.
Modular UI widgets of Flutter puts complexity at bay
As a robust, multifaceted, and modular Frontend technology, the most unique thing Flutter brings to the table is a rich repository of customisable UI widgets covering all native UI elements of every operating system platform. This ensures modular UI development while fully adhering to platform-specific UI principles. In the context of conversational AI, Flutter, unlike other cross-platform technologies, does not need to depend on native UI components for deployment across multiple platforms.
The smooth Frontend development apart, the widget-based development approach along with third-party components help developers to manage, update and maintain the application frontend seamlessly. On top of that, every Flutter widget is fully customizable and allows developers to tweak the look and feel of the interface as per their needs.
Lastly, thanks to this widget-based development approach Flutter doesn’t need to connect to the native UI components by using a JavaScript bridge and this further simplifies the development process. With Flutter taking care of the frontend, developers can focus more on intent training, fine-tuning data models and dialogue flow, and all related stuff.
Flutter is almost a full-stack offering at your disposal with Firebase
Flutter has evolved with more capabilities with every subsequent update. For example, the Google Firebase backend support through a plugin has always been a helpful tool for developers to complete different backend tasks ranging from data storage, cloud integration, device testing, data screening, etc. Now the same Firebase backend support has become better and more extensive following the Flutter 3.0 release.
To make use of Firebase features Flutter developers now have direct access to an array of Firebase plugins covering almost all backend development, maintenance, and support-related tasks. You can access these Firebase tools right from the widget library of Flutter.
In the context of conversational AI development, Flutter following the latest release, offers almost a complete technology stack in a bundle. With the ready-to-access testing tools and developer-friendly Hot Reload feature allowing real-time code changes and updates, concerns over testing and deployment are fully taken care of. By extending the capabilities further with the third-party components, Flutter can take care of the entire frontend and backend development, testing, and deployment.
Over to You
The evolution of Flutter has caught up with the emergence of some mind-blowing data modeling technologies. Conversational AI developers who are more prone to build their solutions from scratch by using the latest NLP models, can easily find Flutter as the right Frontend choice for all the flexibility, modularity, ease of testing and deployment, and cross-platform advantages this framework offers.
P.S. Know more about designing next-generation conversational AI apps using Flutter, Dall-E, and GPT-3. Watch our on-demand webinar here.
