6 Langkah Memuat Model TFLite dari Firebase Hosting ke Aplikasi Flutter

Pernah bikin aplikasi Flutter dengan on-device machine learning? Kalau iya, kemungkinan besar kamu pernah bertemu Firebase ML. Lewat layanan ini, model TensorFlow Lite (TFLite) diunggah ke cloud, lalu aplikasi mengunduhnya saat runtime. Enaknya, model bisa diganti kapan saja tanpa merilis ulang aplikasi ke Play Store atau App Store.

Sayangnya, Firebase ML sekarang sudah deprecated. Jalur migrasi resminya adalah Cloud Storage for Firebase. Layanan ini memerlukan paket Blaze (pay-as-you-go) yang tetap punya kuota tanpa biaya.

Kalau kamu masih belajar dan belum mau memasang metode pembayaran, ada cara lain. Di artikel ini, kita akan memakai Firebase Hosting untuk menyimpan model TFLite. Firebase Hosting bisa dipakai di paket Spark yang gratis. Contohnya langsung kita terapkan di aplikasi Flutter House Price Predictor.

💻 Mulai Belajar Pemrograman

Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.

Daftar Sekarang

Firebase Hosting

Firebase Hosting adalah layanan hosting dari Google untuk konten statis dan dinamis. Umumnya dipakai untuk men-deploy situs web, tapi sebenarnya ia bisa menyajikan file statis apa saja. File model .tflite pun bisa.

File yang kamu deploy akan disajikan lewat CDN global milik Google dan sudah memakai HTTPS sejak awal. Jadi, aplikasi Flutter cukup mengunduh model dari sebuah URL, tanpa SDK khusus.

Kenapa Firebase Hosting?

Ada beberapa alasan kenapa Firebase Hosting pas untuk menyimpan model TFLite.

Gratis di Paket Spark
Tidak perlu memasang metode pembayaran. Paket Spark sudah memberi kuota penyimpanan 10 GB dan transfer data 360 MB per hari.
Tetap di Ekosistem Firebase
Project yang sama masih bisa kamu pakai untuk Firestore, Authentication, atau layanan Firebase lainnya.
Update Model Tanpa Rilis Ulang
Ganti file modelnya, deploy ulang, selesai. Aplikasi akan mengambil versi terbaru saat dibuka.
Unduh Lewat Package http
Model diambil dari URL biasa, tanpa SDK Firebase khusus.

Ada satu hal yang perlu kamu ingat: Firebase Hosting tidak memiliki aturan keamanan seperti Cloud Storage. Semua file yang di-deploy bisa diakses publik. Pastikan model yang kamu unggah memang boleh diakses dan diunduh siapa saja.

Tutorial Memuat Model TFLite dari Firebase Hosting

Sebelum mulai, siapkan dulu beberapa hal berikut.

Flutter SDK versi 3.x.
Node.js dan Firebase CLI. Pasang Firebase CLI dengan perintah npm install -g firebase-tools.
Silakan unduh dan ekstrak starter project Flutter House Price Predictor.
File model house_price_prediction.tflite.

1. Login ke Firebase CLI

Buka terminal, lalu masuk dengan akun Google kamu lewat perintah berikut.

1	firebase login

Browser akan terbuka untuk proses autentikasi. Kalau sudah berhasil, tutup tab tersebut dan kembali ke terminal.

2. Buat Project Firebase dan Folder Hosting Sekaligus

Firebase Console tidak perlu dibuka. Buat saja folder bernama hosting di dalam project Flutter kamu, masuk ke folder itu, lalu jalankan firebase init.

1 2	mkdir hosting && cd hosting firebase init hosting

Setelah itu, CLI akan mengajukan beberapa pertanyaan. Jawab seperti ini.

Please select an option → pilih Create a new project.
Masukkan Project ID yang unik, misalnya house-price-predictor-<nama-kamu>, lalu isi Project display name dengan nama yang gampang diingat.
What do you want to use as your public directory? → ketik public.
Configure as a single-page app? → pilih No. Kita cuma menyajikan file statis, bukan situs web.
Set up automatic builds and deploys with GitHub? → pilih No.
File public/index.html already exists. Overwrite? → pilih No.

Begitu selesai, file .firebaserc dan firebase.json akan dibuat otomatis oleh Firebase CLI. Project barunya juga langsung berada di paket Spark, jadi tidak ada pengaturan yang perlu diubah.

hosting/

├── .firebaserc

├── firebase.json

└── public/

└── index.html

Berikutnya, buat folder public/models/ dan salin file house_price_prediction.tflite ke sana.

hosting/

└── public/

├── index.html # sudah ada, bawaan firebase init

└── models/ # folder baru

└── house_price_prediction.tflite # file baru

Isi index.html bawaan firebase init berupa halaman placeholder “Welcome to Firebase Hosting”. Situs ini hanya dipakai untuk menyajikan model, jadi sebaiknya ganti isinya supaya orang yang membuka URL root tidak bingung.

<!doctype html>

<head>

<title>Model Host</title>

</head>

<body>

<p>

Model TFLite tersedia di

<a href="/models/house_price_prediction.tflite">/models/house_price_prediction.tflite</a>.

</p>

</body>

</html>

3. Deploy Model ke Firebase Hosting

Masih di folder hosting, jalankan perintah ini.

1	firebase deploy --only hosting

Kalau berhasil, terminal akan menampilkan Hosting URL, misalnya https://<PROJECT_ID>.web.app. Coba buka https://<PROJECT_ID>.web.app/models/house_price_prediction.tflite di browser. Kalau file modelnya terunduh, berarti model sudah siap dipakai.

Urusan Firebase Hosting beres. Sekarang kita pindah ke Flutter project untuk mengunduh dan memakai model tersebut.

4. Tambahkan Dependensi Flutter

Buka pubspec.yaml dan tambahkan tiga package berikut.

dependencies:

tflite_flutter: ^0.12.1

http: ^1.5.0

path_provider: ^2.1.6

Kegunaan masing-masing package:

tflite_flutter: menjalankan inferensi model TFLite di perangkat.
http: mengunduh file model dari Firebase Hosting.
path_provider: menentukan lokasi penyimpanan file model di perangkat.

Setelah itu, jalankan flutter pub get. Selama kamu mencoba aplikasi lewat flutter run (mode debug), izin akses internet tidak akan jadi masalah karena Flutter sudah menyisipkannya di manifest debug.

Lain ceritanya saat kamu membuat aplikasi versi rilis. Manifest untuk mode debug tidak ikut dipakai, sehingga http.get() bisa gagal kalau izinnya belum ada. Supaya aman, tambahkan izin berikut secara manual di android/app/src/main/AndroidManifest.xml.

1	<uses-permission android:name="android.permission.INTERNET" />

5. Buat Service untuk Mengunduh Model

Buat file baru lib/service/firebase_hosting_service.dart, lalu tulis kode berikut.

import 'dart:io';

import 'package:http/http.dart' as http;

import 'package:path_provider/path_provider.dart';

class FirebaseHostingService {

// Ganti <PROJECT_ID> dengan ID project Firebase kamu.

static const _modelUrl =

'https://<PROJECT_ID>.web.app/models/house_price_prediction.tflite';

static const _fileName = 'house_price_prediction.tflite';

Future<File> loadModel() async {

final dir = await getApplicationDocumentsDirectory();

final file = File('${dir.path}/$_fileName');

// Menyimpan ETag (penanda versi file dari server) milik model lokal.

final etagFile = File('${dir.path}/$_fileName.etag');

final isCached = await file.exists() && await etagFile.exists();

try {

final response = await http.get(

Uri.parse(_modelUrl),

headers: {

if (isCached) 'If-None-Match': await etagFile.readAsString(),

);

// 304: model di server sama dengan model lokal, tidak perlu unduh ulang.

if (response.statusCode == 304) return file;

if (response.statusCode != 200) {

throw HttpException('Gagal mengunduh model: ${response.statusCode}');

}

await file.writeAsBytes(response.bodyBytes, flush: true);

final etag = response.headers['etag'];

if (etag != null) await etagFile.writeAsString(etag);

} catch (e) {

// Offline atau server bermasalah: pakai model hasil unduhan sebelumnya.

if (await file.exists()) return file;

rethrow;

}

return file;

}

Begini cara kerja loadModel().

Aplikasi mengecek apakah file model dan ETag-nya sudah ada di direktori dokumen. ETag adalah penanda versi file yang dikirim oleh server.
Kalau sudah ada, ETag tersebut dikirim lewat header If-None-Match. Selama model di server belum berubah, server cukup membalas 304 Not Modified tanpa mengirim isi file, dan aplikasi langsung memakai model lokal.
Kalau model belum ada atau sudah berubah, server membalas 200 sekaligus mengirim model terbaru. Model itu lalu disimpan di perangkat bersama ETag barunya.
Kalau unduhan gagal, misalnya karena perangkat sedang offline, aplikasi memakai model yang pernah diunduh sebelumnya.

Lalu, kenapa tidak langsung pakai model lokal saja kalau file-nya sudah ada? Karena aplikasi jadi tidak pernah tahu ada model baru. Dengan ETag, kuota tetap hemat dan modelnya tetap up-to-date.

6. Muat Model ke LiteRT

Langkah terakhir, pakai FirebaseHostingService di dalam LiteRtService. Karena loadModel() mengembalikan objek File, model bisa langsung dimuat dengan Interpreter.fromFile().

class LiteRtService {

final FirebaseHostingService _hostingService;

LiteRtService(this._hostingService);

late final File modelFile;

late final Interpreter interpreter;

Future<void> initModel() async {

modelFile = await _hostingService.loadModel();

final options = InterpreterOptions()

..useNnApiForAndroid = true

..useMetalDelegateForIOS = true;

interpreter = Interpreter.fromFile(modelFile, options: options);

}

// ...

}

Setelah itu, daftarkan kedua service di home_page.dart menggunakan Provider.

Provider(

create: (context) => FirebaseHostingService(),

Provider(

create: (context) => LiteRtService(

context.read(),

)..initModel(),

Semua sudah siap. Jalankan aplikasi dengan flutter run, isi jumlah lantai, kamar tidur, kamar mandi, dan luas tanah, lalu tekan tombol “Prediksi Harga Rumah”. Hasil prediksi harganya akan muncul di layar.

Bagaimana Cara Memperbarui Model?

Gampang. Timpa file house_price_prediction.tflite di folder public/models/ dengan model baru, lalu jalankan lagi firebase deploy –only hosting. Model terbaru akan terunduh otomatis saat aplikasi dibuka berikutnya, tanpa perlu rilis ulang.

Namun, perhatikan kuota internet pengguna. Setiap kali model baru diterbitkan, ETag di server ikut berubah sehingga aplikasi akan mengunduh ulang seluruh berkas model. Pada contoh ini, ukuran model hanya sekitar 310 KB sehingga unduhannya tidak terlalu membebani kuota. Lain halnya kalau ukuran modelmu puluhan MB, unduhan otomatis lewat jaringan seluler bisa bikin pengguna kesal.

Untungnya, dengan pengecekan ETag, model hanya diunduh utuh sekali untuk setiap versi. Selama modelnya belum diganti, aplikasi cuma menerima respons 304 yang ukurannya beberapa ratus byte. Pengecekan ini membantu menghemat kuota data pengguna.

Firebase Hosting vs Cloud Storage for Firebase

Dua-duanya bisa dipakai untuk menyajikan model TFLite. Cloud Storage for Firebase adalah jalur migrasi resmi dari Firebase ML, sementara Firebase Hosting jadi alternatif untuk kebutuhan tertentu. Berikut perbandingannya.

Aspek	Firebase Hosting	Cloud Storage for Firebase
Paket minimum	Spark (gratis)	Blaze, perlu memasang metode pembayaran
Biaya	Tersedia 10 GB penyimpanan dan bisa mengakses 360 MB/hari transfer data	Tersedia kuota tanpa biaya, pemakaian di atas kuota ditagih sesuai penggunaan
Keamanan akses	Tidak ada security rules, semua file publik	Ada security rules (allow read: if …) supaya bisa dibatasi aksesnya
Package di aplikasi	http untuk mengunduh model dari URL	firebase_core untuk inisialisasi Firebase dan firebase_storage untuk mengunduh model dari bucket
Update model	Ganti file lalu firebase deploy	Unggah ulang lewat Console atau CLI
Deteksi model berubah	Lewat ETag dan If-None-Match	Lewat getMetadata(), misalnya membandingkan md5Hash dengan nilai yang tersimpan di perangkat
Cocok untuk	Model yang boleh diakses publik	Model yang perlu kontrol akses, misalnya khusus pengguna yang sudah login

Kalau modelmu boleh diakses siapa saja dan kamu ingin tetap di paket Spark, Firebase Hosting bisa jadi pilihan. Kalau modelnya perlu dibatasi atau kamu butuh integrasi dengan Firebase Authentication, pakai Cloud Storage for Firebase.

Kesimpulan

Mantap. Sekarang kamu sudah tahu cara memuat model TFLite dari Firebase Hosting, kan?

Sejak Firebase ML deprecated, ada dua pilihan untuk menyajikan model: Cloud Storage for Firebase sebagai jalur resmi, atau Firebase Hosting yang bisa dipakai di paket Spark. Dengan Firebase Hosting, aplikasi Flutter cukup mengunduh model dari URL, menyimpannya di perangkat, lalu menjalankannya dengan LiteRT.

Selamat mencoba, ya. Kalau ada pengalaman atau pertanyaan setelah mencobanya, tulis saja di kolom komentar.