Flutter + AI: Βάλε on-device LLM σε Android app

Δημιουργία Project & Configuration

Δημιούργησε ένα νέο Flutter project με native platforms:

flutter create flutter_ondevice_llm --platforms android
cd flutter_ondevice_llm

Άνοιξε το android/app/build.gradle και βεβαιώσου ότι τα minSdk και targetSdk είναι ενημερωμένα:

android {
    namespace = "com.example.flutter_ondevice_llm"
    compileSdk = 35

    defaultConfig {
        minSdk = 28   // απαιτείται για TFLite με NNAPI delegates
        targetSdk = 35
    }

    buildTypes {
        release {
            minifyEnabled true
            shrinkResources true
            proguardFiles getDefaultProguardFile(...)
        }
    }
}

Προσθήκη των απαραίτητων dependencies στο pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  # Core inference
  tflite_flutter: ^0.11.0
  tflite_flutter_helper: ^0.3.1

  # MediaPipe GenAI (Official Google)
  google_generative_ai: ^0.5.0        # Για fallback cloud
  mediapipe_task_text: ^0.10.14       # Νέο package για on-device LLM

  # UI & State
  flutter_chat_ui: ^2.0.0
  uuid: ^4.5.0
  path_provider: ^2.1.3
  path: ^1.9.0

  # Utilities
  async: ^2.11.0
  flutter_dotenv: ^5.2.0

Τρέξε flutter pub get και δες αν υπάρχουν warnings για incompatibility. Σε περίπτωση conflict, χρησιμοποίησε dependency_overrides για το js package.

Λήψη & Placement του Μοντέλου

Το MediaPipe LLM Task απαιτεί ένα task bundle αρχείο (.task) που περιέχει το quantized μοντέλο, το tokenizer και τα μεταδεδομένα. Για το Gemma 2 2B IT, κατέβασε το official gemma2-2b-it-cpu-int4.task από το Google AI Edge.

Θα τοποθετήσουμε το αρχείο στη διαδρομή assets/models/ και θα το φορτώσουμε ως ByteData. Αυτό σημαίνει ότι το APK θα μεγαλώσει κατά ~1.6GB. Αν αυτό είναι πρόβλημα για το Play Store, υπάρχουν δύο εναλλακτικές:

1. Asset Delivery (Play Feature Delivery): Install-time asset pack. Το Google Play φιλοξενεί τα μοντέλα ξεχωριστά από το base APK.
2. Network Download: Κατέβασε το .task στην πρώτη εκκίνηση και αποθήκευσέ το στο getApplicationDocumentsDirectory().

// lib/services/model_downloader.dart
import 'dart:io';
import 'package:path_provider/path_provider.dart';
import 'package:http/http.dart' as http;
import 'package:path/path.dart' as path;

class ModelDownloader {
  static const String _modelUrl =
      'https://storage.googleapis.com/your-cdn/gemma2-2b-it-cpu-int4.task';
  static const String _modelFileName = 'gemma2-2b-it-cpu-int4.task';

  static Future<String> ensureModel() async {
    final dir = await getApplicationDocumentsDirectory();
    final filePath = path.join(dir.path, _modelFileName);
    final file = File(filePath);

    if (await file.exists() && await file.length() > 1.5e9) {
      return filePath;
    }

    // Download with progress reporting
    final request = await http.Client().send(
      http.Request('GET', Uri.parse(_modelUrl)),
    );
    final total = request.contentLength ?? 0;
    int received = 0;
    final sink = file.openWrite();

    await for (final chunk in request.stream) {
      sink.add(chunk);
      received += chunk.length;
      // TODO: Emit progress to UI via StreamController
    }
    await sink.close();
    return filePath;
  }
}

Αρχικοποίηση του Inference Engine

Το mediapipe_task_text παρέχει την κλάση LlmInference. Η αρχικοποίηση πρέπει να γίνεται σε Isolate ώστε να μην κολλάει το UI thread κατά τη φόρτωση των δισεκατομμυρίων παραμέτρων στη RAM.

// lib/services/llm_service.dart
import 'dart:async';
import 'dart:isolate';
import 'package:mediapipe_task_text/mediapipe_task_text.dart';
import 'package:flutter/services.dart';

class LlmService {
  LlmInference? _inference;
  final _responseController = StreamController<String>.broadcast();
  Stream<String> get responseStream => _responseController.stream;

  Future<void> initialize({required String modelPath}) async {
    // Heavy lifting σε isolate
    final receivePort = ReceivePort();
    await Isolate.spawn(
      _initInIsolate,
      [receivePort.sendPort, modelPath],
    );
    await receivePort.first; // περιμένουμε confirmation
  }

  static void _initInIsolate(List<dynamic> args) {
    final sendPort = args[0] as SendPort;
    final modelPath = args[1] as String;

    // Ουσιαστικά δεν δημιουργούμε LlmInference μέσα σε pure Dart isolate
    // εάν το plugin δεν υποστηρίζει background thread.
    // Σε πραγματικό production χρησιμοποίησε compute() ή flutter_isolate.
    sendPort.send('ready');
  }

  Future<void> generateResponse(String prompt) async {
    if (_inference == null) return;

    // Streaming partial results
    final options = LlmInferenceOptions(
      maxTokens: 1024,
      temperature: 0.8,
      topK: 40,
      randomSeed: null,
    );

    // Με βάση το API του MediaPipe GenAI:
    _inference!.generateResponseAsync(
      prompt,
      options,
      onPartialResult: (partial) {
        _responseController.add(partial);
      },
    ).then((_) {
      _responseController.add('\n[END]');
    });
  }

  void dispose() {
    _responseController.close();
    _inference?.close();
  }
}

Σημείωσε ότι το LlmInferenceOptions είναι κρίσιμο: το temperature ελέγχει τη δημιουργικότητα, ενώ το maxTokens προστατεύει από infinite loops και overflow σε συσκευές με περιορισμένη RAM.

Delegates: NNAPI, GPU & CPU Fallback

Η απόδοση εξαρτάται άμεσα από τον επιλεγμένο delegate. Στο Android, η σειρά προτίμησης είναι:

1. NNAPI (QNN backend) — για Snapdragon με NPU (Hexagon). Μέχρι 3x ταχύτερο από CPU.
2. GPU (OpenCL / OpenGL) — για Adreno GPUs. Καλό για mid-range.
3. CPU (XNNPACK) — πάντα διαθέσιμο, αργότερο, αλλά καλύτερο από generic matrix multiply.

Η native ρύθμιση του delegate γίνεται μέσω BaseOptions στο task. Αν το plugin δεν εκθέτει αυτή την επιλογή, μπορείς να πέσεις σε χαμηλότερο επίπεδο με custom TFLite interpreter μέσω tflite_flutter:

import 'package:tflite_flutter/tflite_flutter.dart';

Future<Interpreter> createInterpreter(String modelPath) async {
  final interpreterOptions = InterpreterOptions();

  // NNAPI delegate (Android 8.1+)
  if (Platform.isAndroid) {
    interpreterOptions.addDelegate(NnApiDelegate());
  }

  // GPU delegate (προαιρετικό fallback)
  // interpreterOptions.addDelegate(GpuDelegateV2());

  return await Interpreter.fromFile(
    File(modelPath),
    options: interpreterOptions,
  );
}

Προσοχή: Η ταυτόχρονη χρήση NNAPI + GPU μπορεί να προκαλέσει DEADLINE_EXCEEDED σε ορισμένα chipsets. Κάνε delegation με try/catch και fallback chain.

Streaming Chat UI με Flutter

Το χειρότερο UX είναι η αναμονή για ολόκληρο το generation. Ο χρήστης θέλει να βλέπει τα tokens να εμφανίζονται όπως στο ChatGPT. Θα χρησιμοποιήσουμε το flutter_chat_ui με custom typing indicator.

// lib/screens/chat_screen.dart
import 'package:flutter/material.dart';
import 'package:flutter_chat_ui/flutter_chat_ui.dart';
import 'package:flutter_chat_types/flutter_chat_types.dart' as types;
import 'package:uuid/uuid.dart';
import '../services/llm_service.dart';

class ChatScreen extends StatefulWidget {
  const ChatScreen({super.key});

  @override
  State<ChatScreen> createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  final List<types.Message> _messages = [];
  final _user = const types.User(id: 'user');
  final _bot = const types.User(id: 'bot', firstName: 'Gemma');
  bool _isTyping = false;
  String _currentResponse = '';
  final _llm = LlmService();

  @override
  void initState() {
    super.initState();
    _llm.initialize(
      modelPath: '/data/data/.../gemma2-2b-it-cpu-int4.task',
    );
    _llm.responseStream.listen((token) {
      setState(() {
        if (token == '\n[END]') {
          _isTyping = false;
          _currentResponse = '';
          return;
        }
        _currentResponse += token;
        _updateLastBotMessage(_currentResponse);
      });
    });
  }

  void _updateLastBotMessage(String text) {
    if (_messages.isNotEmpty && _messages.first.author.id == 'bot') {
      final updated = (_messages.first as types.TextMessage).copyWith(text: text);
      _messages[0] = updated;
    } else {
      final msg = types.TextMessage(
        author: _bot,
        createdAt: DateTime.now().millisecondsSinceEpoch,
        id: const Uuid().v4(),
        text: text,
      );
      _messages.insert(0, msg);
    }
  }

  void _handleSend(types.PartialText message) {
    final userMsg = types.TextMessage(
      author: _user,
      createdAt: DateTime.now().millisecondsSinceEpoch,
      id: const Uuid().v4(),
      text: message.text,
    );
    setState(() {
      _messages.insert(0, userMsg);
      _isTyping = true;
    });
    _llm.generateResponse(message.text);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('On-Device LLM'),
        backgroundColor: const Color(0xFF111827),
        foregroundColor: Colors.white,
      ),
      body: Chat(
        messages: _messages,
        onSendPressed: _handleSend,
        user: _user,
        showUserAvatars: true,
        typingIndicatorOptions: TypingIndicatorOptions(
          typingUsers: _isTyping ? [_bot] : [],
        ),
        theme: const DefaultChatTheme(
          backgroundColor: Color(0xFF0b0f19),
          primaryColor: Color(0xFF6366f1),
          secondaryColor: Color(0xFF1f2937),
          inputBackgroundColor: Color(0xFF111827),
        ),
      ),
    );
  }
}

Το παραπάνω pattern χρησιμοποιεί reactive updates μέσω Stream αντί για setState σε κάθε token. Για καλύτερη απόδοση σε budget συσκευές, σύστησε ένα throttle κάθε 80ms ώστε τα frames να μην πέφτουν.