Hướng dẫn tích hợp AI vào ứng dụng Flutter với Gemini Code Assist và Firebase AI Logic
· 5 min read
Giới thiệu
Trong thời đại AI phát triển mạnh mẽ, việc tích hợp AI vào ứng dụng di động đang trở thành xu hướng tất yếu. Bài viết này sẽ hướng dẫn bạn cách tích hợp Google Gemini và Firebase AI Logic vào ứng dụng Flutter một cách hiệu quả.
1. Cài đặt và Cấu hình
1.1. Thêm dependencies
# pubspec.yaml
dependencies:
flutter:
sdk: flutter
google_generative_ai: ^0.2.0
firebase_core: ^2.24.2
firebase_ml_kit: ^0.16.3
google_mlkit_text_recognition: ^0.11.0
1.2. Cấu hình Firebase
- Tạo project trên Firebase Console
- Tải file
google-services.jsoncho Android - Tải file
GoogleService-Info.plistcho iOS
2. Tích hợp Gemini AI
2.1. Khởi tạo Gemini Client
import 'package:google_generative_ai/google_generative_ai.dart';
class GeminiService {
final GenerativeModel _model;
GeminiService() {
_model = GenerativeModel(
model: 'gemini-pro',
apiKey: 'YOUR_API_KEY',
);
}
Future<String> generateResponse(String prompt) async {
try {
final content = [Content.text(prompt)];
final response = await _model.generateContent(content);
return response.text ?? 'No response generated';
} catch (e) {
print('Error generating response: $e');
return 'Error occurred while generating response';
}
}
}
2.2. Tạo UI cho Chat Interface
class ChatScreen extends StatefulWidget {
_ChatScreenState createState() => _ChatScreenState();
}
class _ChatScreenState extends State<ChatScreen> {
final TextEditingController _controller = TextEditingController();
final List<ChatMessage> _messages = [];
final GeminiService _geminiService = GeminiService();
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('AI Chat')),
body: Column(
children: [
Expanded(
child: ListView.builder(
itemCount: _messages.length,
itemBuilder: (context, index) => _messages[index],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Expanded(
child: TextField(
controller: _controller,
decoration: InputDecoration(
hintText: 'Type your message...',
border: OutlineInputBorder(),
),
),
),
IconButton(
icon: Icon(Icons.send),
onPressed: _sendMessage,
),
],
),
),
],
),
);
}
void _sendMessage() async {
if (_controller.text.isEmpty) return;
final userMessage = ChatMessage(
text: _controller.text,
isUser: true,
);
setState(() {
_messages.add(userMessage);
_controller.clear();
});
final response = await _geminiService.generateResponse(userMessage.text);
setState(() {
_messages.add(ChatMessage(
text: response,
isUser: false,
));
});
}
}
3. Tích hợp Firebase AI Logic
3.1. Cấu hình Firebase ML Kit
import 'package:firebase_ml_kit/firebase_ml_kit.dart';
class FirebaseAIService {
final TextRecognizer _textRecognizer = FirebaseVision.instance.textRecognizer();
Future<String> recognizeText(String imagePath) async {
try {
final FirebaseVisionImage image =
FirebaseVisionImage.fromFilePath(imagePath);
final VisionText visionText =
await _textRecognizer.processImage(image);
return visionText.text;
} catch (e) {
print('Error recognizing text: $e');
return 'Error occurred while recognizing text';
}
}
}
3.2. Tạo UI cho Text Recognition
class TextRecognitionScreen extends StatefulWidget {
_TextRecognitionScreenState createState() => _TextRecognitionScreenState();
}
class _TextRecognitionScreenState extends State<TextRecognitionScreen> {
final FirebaseAIService _aiService = FirebaseAIService();
String _recognizedText = '';
bool _isProcessing = false;
Future<void> _processImage() async {
setState(() {
_isProcessing = true;
});
// Implement image picking logic here
final String imagePath = await ImagePicker().getImage();
if (imagePath != null) {
final text = await _aiService.recognizeText(imagePath);
setState(() {
_recognizedText = text;
_isProcessing = false;
});
}
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Text Recognition')),
body: Column(
children: [
if (_isProcessing)
CircularProgressIndicator()
else
Expanded(
child: SingleChildScrollView(
padding: EdgeInsets.all(16),
child: Text(_recognizedText),
),
),
ElevatedButton(
onPressed: _processImage,
child: Text('Select Image'),
),
],
),
);
}
}
4. Best Practices và Tips
4.1. Xử lý lỗi và Retry Logic
class AIService {
Future<T> withRetry<T>(Future<T> Function() operation) async {
int maxAttempts = 3;
int attempt = 0;
while (attempt < maxAttempts) {
try {
return await operation();
} catch (e) {
attempt++;
if (attempt == maxAttempts) rethrow;
await Future.delayed(Duration(seconds: attempt * 2));
}
}
throw Exception('Max retry attempts reached');
}
}
4.2. Caching Responses
class AICache {
final Map<String, String> _cache = {};
String? getCachedResponse(String prompt) {
return _cache[prompt];
}
void cacheResponse(String prompt, String response) {
_cache[prompt] = response;
}
}
5. Performance Optimization
5.1. Lazy Loading và Pagination
class PaginatedChat extends StatefulWidget {
_PaginatedChatState createState() => _PaginatedChatState();
}
class _PaginatedChatState extends State<PaginatedChat> {
final ScrollController _scrollController = ScrollController();
final List<ChatMessage> _messages = [];
bool _isLoading = false;
int _page = 1;
void initState() {
super.initState();
_scrollController.addListener(_scrollListener);
_loadMessages();
}
void _scrollListener() {
if (_scrollController.position.pixels ==
_scrollController.position.maxScrollExtent) {
_loadMoreMessages();
}
}
Future<void> _loadMoreMessages() async {
if (_isLoading) return;
setState(() {
_isLoading = true;
});
// Implement pagination logic here
final newMessages = await _loadMessagesFromAPI(_page++);
setState(() {
_messages.addAll(newMessages);
_isLoading = false;
});
}
}
6. Testing
6.1. Unit Tests
void main() {
group('GeminiService Tests', () {
late GeminiService service;
setUp(() {
service = GeminiService();
});
test('generateResponse returns valid response', () async {
final response = await service.generateResponse('Hello');
expect(response, isNotEmpty);
});
});
}
6.2. Widget Tests
void main() {
testWidgets('Chat UI Test', (WidgetTester tester) async {
await tester.pumpWidget(MaterialApp(home: ChatScreen()));
expect(find.text('AI Chat'), findsOneWidget);
expect(find.byType(TextField), findsOneWidget);
expect(find.byIcon(Icons.send), findsOneWidget);
});
}
Kết luận
Việc tích hợp AI vào ứng dụng Flutter không chỉ giúp tăng tính năng thông minh cho ứng dụng mà còn mở ra nhiều cơ hội phát triển mới. Với Gemini và Firebase AI Logic, bạn có thể dễ dàng thêm các tính năng AI vào ứng dụng của mình.
Tài liệu tham khảo
Liên hệ
Nếu bạn có thắc mắc hoặc cần hỗ trợ thêm, hãy liên hệ:
- Email: support@huongnghiepdulieu.com
- GitHub: huongnghiepdulieu
