Membangun sistem rekomendasi film full stack

1. Sebelum memulai

Mulai dari merekomendasikan film atau restoran, hingga menyoroti video yang menghibur, mesin pemberi saran, yang juga dikenal sebagai sistem pemberi saran, adalah aplikasi machine learning yang sangat penting. Sistem rekomendasi membantu Anda menampilkan konten yang menarik dari kumpulan kandidat yang besar kepada pengguna. Misalnya, Google Play Store menawarkan jutaan aplikasi untuk diinstal, sedangkan YouTube menyediakan miliaran video untuk ditonton. Bahkan, lebih banyak aplikasi dan video ditambahkan setiap hari.

Dalam codelab ini, Anda akan mempelajari cara membuat rekomendasi fullstack menggunakan:

• TensorFlow Recommenders untuk melatih model pengambilan dan peringkat untuk rekomendasi film
• TensorFlow Serving untuk menyajikan model
• Flutter untuk membuat aplikasi lintas platform guna menampilkan rekomendasi film

Prasyarat

• Pengetahuan dasar tentang pengembangan Flutter dengan Dart
• Pengetahuan dasar tentang machine learning dengan TensorFlow, seperti pelatihan versus deployment
• Pemahaman dasar tentang sistem rekomendasi
• Pengetahuan dasar tentang Python, terminal, dan Docker

Yang akan Anda pelajari

• Cara melatih model pengambilan dan peringkat menggunakan TensorFlow Recommenders
• Cara menyajikan model rekomendasi terlatih menggunakan TensorFlow Serving
• Cara membangun aplikasi Flutter lintas platform untuk menampilkan item yang direkomendasikan

Yang Anda butuhkan

• Flutter SDK
• Penyiapan Android dan iOS untuk Flutter
• Penyiapan Desktop untuk Flutter
• Penyiapan Web untuk Flutter
• Penyiapan Visual Studio Code (VS Code) untuk Flutter dan Dart
• Docker
• Bash
• Python 3.7+
• Akses ke Colab

2. Menyiapkan lingkungan pengembangan Flutter Anda

Untuk pengembangan Flutter, Anda memerlukan dua software untuk menyelesaikan codelab ini—Flutter SDK dan editor.

Anda dapat menjalankan frontend codelab menggunakan salah satu perangkat berikut:

• Simulator iOS (perlu menginstal alat Xcode).
• Android Emulator (memerlukan penyiapan di Android Studio).
• Browser (Chrome diperlukan untuk proses debug).
• Aplikasi desktop Windows, Linux, atau macOS. Anda harus melakukan pengembangan di platform tempat Anda berencana men-deploy aplikasi. Jadi, jika ingin mengembangkan aplikasi desktop Windows, Anda harus mengembangkannya di Windows untuk mengakses rantai build yang sesuai. Ada persyaratan spesifik per sistem operasi yang dibahas secara mendetail di docs.flutter.dev/desktop.

Untuk backend, Anda memerlukan:

• Komputer Linux atau Mac berbasis Intel.

3. Memulai persiapan

Untuk mendownload kode codelab ini:

1. Buka repositori GitHub untuk codelab ini.
2. Klik Code > Download zip guna mendownload semua kode untuk codelab ini.

3. Ekstrak file zip yang didownload untuk mengekstrak folder root codelabs-main dengan semua resource yang Anda butuhkan.

Untuk codelab ini, Anda hanya memerlukan file dalam subdirektori tfrs-flutter/ di repositori, yang berisi beberapa folder:

• Folder step0 hingga step5 berisi kode awal yang Anda bangun untuk setiap langkah dalam codelab ini.
• Folder finished berisi kode yang sudah selesai untuk aplikasi contoh yang telah selesai.
• Setiap folder berisi subfolder backend, yang mencakup kode backend mesin rekomendasi, dan subfolder frontend, yang mencakup kode frontend Flutter

4. Mendownload dependensi untuk project

Backend

Kita akan menggunakan Flask untuk membuat backend. Buka terminal Anda dan jalankan perintah berikut:

pip install Flask flask-cors requests numpy

Frontend

1. Di VS Code, klik File > Open folder, lalu pilih folder step0 dari kode sumber yang Anda download sebelumnya.
2. Buka file step0/frontend/lib/main.dart. Jika Anda melihat dialog VS Code yang meminta Anda mendownload paket yang diperlukan untuk aplikasi awal, klik Get packages.
3. Jika Anda tidak melihat dialog ini, buka terminal lalu jalankan perintah flutter pub get di folder step0/frontend.

5. Langkah 0: Jalankan aplikasi awal

1. Buka file step0/frontend/lib/main.dart di VS Code, pastikan Android Emulator atau iOS Simulator disiapkan dengan benar dan muncul di status bar.

Misalnya, berikut adalah tampilan yang Anda lihat saat menggunakan Pixel 5 dengan Android Emulator:

Berikut adalah tampilan yang Anda lihat saat menggunakan iPhone 13 dengan Simulator iOS:

2. Klik Start debugging.

Catatan: Codelab ini mengasumsikan bahwa Anda men-deploy model rekomendasi di komputer lokal. Jika Anda men-deploy model di mesin jarak jauh lain, ubah alamat IP 10.0.2.2 atau 127.0.0.1 dalam kode ke alamat IP mesin jarak jauh yang menjalankan TensorFlow Serving.

Menjalankan dan menjelajahi aplikasi

Aplikasi akan diluncurkan di Android Emulator atau Simulator iOS. UI-nya cukup sederhana. Ada kolom teks yang dapat digunakan pengguna untuk mengetik teks sebagai ID pengguna. Aplikasi Flutter akan mengirimkan permintaan kueri ke backend, yang menjalankan 2 model rekomendasi dan menampilkan daftar rekomendasi film yang diberi peringkat. Frontend akan menampilkan hasil di UI setelah menerima respons.

Jika Anda mengklik Recommend sekarang, tidak akan terjadi apa-apa karena aplikasi belum dapat berkomunikasi dengan backend.

6. Langkah 1: Buat model pengambilan dan peringkat untuk mesin rekomendasi

Mesin pemberi saran di dunia nyata sering kali terdiri dari beberapa tahap:

1. Tahap pengambilan bertanggung jawab untuk memilih kumpulan awal ratusan kandidat dari semua kemungkinan kandidat. Tujuan utama model ini adalah untuk secara efisien menyingkirkan semua kandidat yang tidak diminati pengguna. Karena model pengambilan mungkin berurusan dengan jutaan kandidat, model tersebut harus efisien secara komputasi.
2. Tahap pemberian peringkat mengambil output model pengambilan dan menyetelnya secara halus untuk memilih beberapa rekomendasi terbaik. Tugasnya adalah mempersempit kumpulan item yang mungkin diminati pengguna menjadi daftar pendek yang berisi ratusan kandidat yang mungkin diminati pengguna.
3. Tahap pasca-peringkat membantu memastikan keberagaman, keaktualan, dan keadilan serta mengatur ulang item kandidat menjadi serangkaian rekomendasi yang berguna dalam urutan puluhan.

Untuk codelab ini, Anda melatih model pengambilan dan model peringkat menggunakan set data MovieLens yang populer. Anda dapat membuka kode pelatihan di bawah melalui Colab dan mengikuti petunjuknya:

• Model pengambilan MovieLens
• Model peringkat MovieLens

Catatan: Kode pelatihan diadaptasi dari tutorial pengambilan dasar dan peringkat dasar TensorFlow Recommenders. Lihat tutorial untuk mengetahui informasi selengkapnya. Selain itu, video untuk membangun model pengambilan dasar dan video untuk membangun model peringkat dasar adalah referensi yang berguna.

7. Langkah 2: Buat backend mesin rekomendasi

Catatan: Petunjuk di bawah hanya berlaku untuk mesin Linux atau Mac berbasis Intel. Anda dapat menyesuaikan perintah untuk Windows. Lihat dokumentasi Docker untuk mengetahui informasi selengkapnya. Untuk Mac berbasis Apple Silicon, TensorFlow Serving tidak akan berfungsi karena tidak kompatibel mulai Januari 2024.

Setelah melatih model pengambilan dan peringkat, Anda dapat men-deploy-nya dan membuat backend.

Catatan: Model SavedModel terlatih disediakan di folder step2/backend/retrieval/exported-retrieval/ dan step2/backend/ranking/exported-ranking/ untuk memudahkan Anda.

Memulai TensorFlow Serving

Karena Anda perlu menggunakan model pengambilan dan peringkat untuk membuat daftar film yang direkomendasikan, Anda men-deploy keduanya secara bersamaan menggunakan TensorFlow Serving.

• Di terminal Anda, buka folder step2/backend di komputer Anda dan mulai TensorFlow Serving dengan Docker:

docker run -t --rm -p 8501:8501 -p 8500:8500 -v "$(pwd)/:/models/" tensorflow/serving --model_config_file=/models/models.config

Catatan: File models.config menentukan cara kedua model harus di-deploy di TensorFlow Serving. Jika Anda melatih dan mendownload model dari Colab sendiri, pastikan untuk memperbarui jalur model dalam file models.config.

Docker akan otomatis mendownload image TensorFlow Serving terlebih dahulu, yang memerlukan waktu sebentar. Setelah itu, TensorFlow Serving akan dimulai. Log akan terlihat seperti cuplikan kode berikut:

2022-04-24 09:32:06.461702: I tensorflow_serving/model_servers/server_core.cc:465] Adding/updating models.
2022-04-24 09:32:06.461843: I tensorflow_serving/model_servers/server_core.cc:591]  (Re-)adding model: retrieval
2022-04-24 09:32:06.461907: I tensorflow_serving/model_servers/server_core.cc:591]  (Re-)adding model: ranking
2022-04-24 09:32:06.576920: I tensorflow_serving/core/basic_manager.cc:740] Successfully reserved resources to load servable {name: retrieval version: 123}
2022-04-24 09:32:06.576993: I tensorflow_serving/core/loader_harness.cc:66] Approving load for servable version {name: retrieval version: 123}
2022-04-24 09:32:06.577011: I tensorflow_serving/core/loader_harness.cc:74] Loading servable version {name: retrieval version: 123}
2022-04-24 09:32:06.577848: I external/org_tensorflow/tensorflow/cc/saved_model/reader.cc:38] Reading SavedModel from: /models/retrieval/exported-retrieval/123
2022-04-24 09:32:06.583809: I external/org_tensorflow/tensorflow/cc/saved_model/reader.cc:90] Reading meta graph with tags { serve }
2022-04-24 09:32:06.583879: I external/org_tensorflow/tensorflow/cc/saved_model/reader.cc:132] Reading SavedModel debug info (if present) from: /models/retrieval/exported-retrieval/123
2022-04-24 09:32:06.584970: I external/org_tensorflow/tensorflow/core/platform/cpu_feature_guard.cc:142] This TensorFlow binary is optimized with oneAPI Deep Neural Network Library (oneDNN) to use the following CPU instructions in performance-critical operations:  AVX2 FMA
To enable them in other operations, rebuild TensorFlow with the appropriate compiler flags.
2022-04-24 09:32:06.629900: I external/org_tensorflow/tensorflow/cc/saved_model/loader.cc:206] Restoring SavedModel bundle.
2022-04-24 09:32:06.634662: I external/org_tensorflow/tensorflow/core/platform/profile_utils/cpu_utils.cc:114] CPU Frequency: 2800000000 Hz
2022-04-24 09:32:06.672534: I external/org_tensorflow/tensorflow/cc/saved_model/loader.cc:190] Running initialization op on SavedModel bundle at path: /models/retrieval/exported-retrieval/123
2022-04-24 09:32:06.673629: I tensorflow_serving/core/basic_manager.cc:740] Successfully reserved resources to load servable {name: ranking version: 123}
2022-04-24 09:32:06.673765: I tensorflow_serving/core/loader_harness.cc:66] Approving load for servable version {name: ranking version: 123}
2022-04-24 09:32:06.673786: I tensorflow_serving/core/loader_harness.cc:74] Loading servable version {name: ranking version: 123}
2022-04-24 09:32:06.674731: I external/org_tensorflow/tensorflow/cc/saved_model/reader.cc:38] Reading SavedModel from: /models/ranking/exported-ranking/123
2022-04-24 09:32:06.683557: I external/org_tensorflow/tensorflow/cc/saved_model/reader.cc:90] Reading meta graph with tags { serve }
2022-04-24 09:32:06.683601: I external/org_tensorflow/tensorflow/cc/saved_model/reader.cc:132] Reading SavedModel debug info (if present) from: /models/ranking/exported-ranking/123
2022-04-24 09:32:06.688665: I external/org_tensorflow/tensorflow/cc/saved_model/loader.cc:277] SavedModel load for tags { serve }; Status: success: OK. Took 110815 microseconds.
2022-04-24 09:32:06.690019: I tensorflow_serving/servables/tensorflow/saved_model_warmup_util.cc:59] No warmup data file found at /models/retrieval/exported-retrieval/123/assets.extra/tf_serving_warmup_requests
2022-04-24 09:32:06.693025: I tensorflow_serving/core/loader_harness.cc:87] Successfully loaded servable version {name: retrieval version: 123}
2022-04-24 09:32:06.702594: I external/org_tensorflow/tensorflow/cc/saved_model/loader.cc:206] Restoring SavedModel bundle.
2022-04-24 09:32:06.745361: I external/org_tensorflow/tensorflow/cc/saved_model/loader.cc:190] Running initialization op on SavedModel bundle at path: /models/ranking/exported-ranking/123
2022-04-24 09:32:06.772363: I external/org_tensorflow/tensorflow/cc/saved_model/loader.cc:277] SavedModel load for tags { serve }; Status: success: OK. Took 97633 microseconds.
2022-04-24 09:32:06.774853: I tensorflow_serving/servables/tensorflow/saved_model_warmup_util.cc:59] No warmup data file found at /models/ranking/exported-ranking/123/assets.extra/tf_serving_warmup_requests
2022-04-24 09:32:06.777706: I tensorflow_serving/core/loader_harness.cc:87] Successfully loaded servable version {name: ranking version: 123}
2022-04-24 09:32:06.778969: I tensorflow_serving/model_servers/server_core.cc:486] Finished adding/updating models
2022-04-24 09:32:06.779030: I tensorflow_serving/model_servers/server.cc:367] Profiler service is enabled
2022-04-24 09:32:06.784217: I tensorflow_serving/model_servers/server.cc:393] Running gRPC ModelServer at 0.0.0.0:8500 ...
[warn] getaddrinfo: address family for nodename not supported
2022-04-24 09:32:06.785748: I tensorflow_serving/model_servers/server.cc:414] Exporting HTTP/REST API at:localhost:8501 ...
[evhttp_server.cc : 245] NET_LOG: Entering the event loop ...

Catatan: Setelah memulai image docker TensorFlow Serving, Anda dapat membuka http://localhost:8501/v1/models/<MODEL_NAME>/metadata untuk memeriksa detail tensor input dan output. Dalam codelab ini, ganti <MODEL_NAME> dengan retrieval atau ranking.

Membuat endpoint baru

Karena TensorFlow Serving tidak mendukung 'penggabungan' beberapa model berurutan, Anda perlu membuat layanan baru yang menghubungkan model pengambilan dan peringkat.

• Tambahkan kode ini ke fungsi get_recommendations() dalam file step2/backend/recommendations.py:

user_id = request.get_json()["user_id"]
retrieval_request = json.dumps({"instances": [user_id]})
retrieval_response = requests.post(RETRIEVAL_URL, data=retrieval_request)
movie_candidates = retrieval_response.json()["predictions"][0]["output_2"]

ranking_queries = [
    {"user_id": u, "movie_title": m}
    for (u, m) in zip([user_id] * NUM_OF_CANDIDATES, movie_candidates)
]
ranking_request = json.dumps({"instances": ranking_queries})
ranking_response = requests.post(RANKING_URL, data=ranking_request)
movies_scores = list(np.squeeze(ranking_response.json()["predictions"]))
ranked_movies = [
    m[1] for m in sorted(list(zip(movies_scores, movie_candidates)), reverse=True)
]

return make_response(jsonify({"movies": ranked_movies}), 200)

Mulai layanan Flask

Sekarang Anda dapat memulai layanan Flask.

• Di terminal Anda, buka folder step2/backend/ dan jalankan perintah berikut:

FLASK_APP=recommender.py FLASK_ENV=development flask run

Flask akan menyiapkan endpoint baru di http://localhost:5000/recommend. Anda akan melihat log seperti di bawah ini:

 * Serving Flask app 'recommender.py' (lazy loading)
 * Environment: development
 * Debug mode: on
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 705-382-264
127.0.0.1 - - [25/Apr/2022 19:44:47] "POST /recommend HTTP/1.1" 200 -

Anda dapat mengirim permintaan contoh ke endpoint untuk memastikan endpoint berfungsi seperti yang diharapkan:

curl -X POST -H "Content-Type: application/json" -d '{"user_id":"42"}' http://localhost:5000/recommend

Endpoint akan menampilkan daftar film yang direkomendasikan untuk pengguna 42:

{
  "movies": [
    "While You Were Sleeping (1995)",
    "Preacher's Wife, The (1996)",
    "Michael (1996)",
    "Lion King, The (1994)",
    "Father of the Bride Part II (1995)",
    "Sleepless in Seattle (1993)",
    "101 Dalmatians (1996)",
    "Bridges of Madison County, The (1995)",
    "Rudy (1993)",
    "Jack (1996)"
  ]
}

Selesai! Anda telah berhasil membuat backend untuk merekomendasikan film berdasarkan ID pengguna.

Catatan: Dalam codelab ini, Anda men-deploy model pengambilan dan peringkat ke dalam satu instance TensorFlow Serving. Dalam praktiknya, biasanya aplikasi ini di-deploy ke cluster terpisah untuk mengelola workload produksi dengan lebih baik.

8. Langkah 3: Buat aplikasi Flutter untuk Android dan iOS

Backend sudah siap. Anda dapat mulai mengirim permintaan ke API tersebut untuk mengkueri rekomendasi film dari aplikasi Flutter.

Aplikasi frontend cukup sederhana. Hanya memiliki TextField yang menerima ID pengguna dan mengirim permintaan (dalam fungsi recommend()) ke backend yang baru saja Anda buat. Setelah menerima respons, UI aplikasi akan menampilkan film yang direkomendasikan dalam ListView.

• Tambahkan kode ini ke fungsi recommend() dalam file step3/frontend/lib/main.dart:

final response = await http.post(
  Uri.parse('http://' + _server + ':5000/recommend'),
  headers: <String, String>{
    'Content-Type': 'application/json',
  },
  body: jsonEncode(<String, String>{
    'user_id': _userIDController.text,
  }),
);

Setelah aplikasi menerima respons dari backend, Anda memperbarui UI untuk menampilkan daftar film yang direkomendasikan untuk pengguna tertentu.

• Tambahkan kode ini tepat di bawah kode di atas:

if (response.statusCode == 200) {
  return List<String>.from(jsonDecode(response.body)['movies']);
} else {
  throw Exception('Error response');
}

Menjalankan aplikasi

1. Klik Start debugging, lalu tunggu aplikasi dimuat.
2. Masukkan ID pengguna (yaitu, 42), lalu pilih Rekomendasikan.

9. Langkah 4: Jalankan aplikasi Flutter di platform desktop

Selain Android dan iOS, Flutter juga mendukung platform desktop, termasuk Linux, Mac, dan Windows.

Linux

1. Pastikan perangkat target disetel ke di status bar VSCode.
2. Klik Start debugging, lalu tunggu aplikasi dimuat.
3. Masukkan ID pengguna (yaitu, 42), lalu pilih Rekomendasikan.

Mac

1. Untuk Mac, Anda perlu menyiapkan hak yang sesuai karena aplikasi akan mengirimkan permintaan HTTP ke backend. Lihat Hak dan App Sandbox untuk mengetahui detail selengkapnya.

Tambahkan kode ini ke step4/frontend/macOS/Runner/DebugProfile.entitlements dan step4/frontend/macOS/Runner/Release.entitlements masing-masing:

<key>com.apple.security.network.client</key>
<true/>

2. Pastikan perangkat target disetel ke di status bar VSCode.
3. Klik Start debugging, lalu tunggu aplikasi dimuat.
4. Masukkan ID pengguna (yaitu, 42), lalu pilih Rekomendasikan.

Windows

1. Pastikan perangkat target disetel ke di status bar VSCode.
2. Klik Start debugging, lalu tunggu aplikasi dimuat.
3. Masukkan ID pengguna (yaitu, 42), lalu pilih Rekomendasikan.

10. Langkah 5: Jalankan aplikasi Flutter di platform web

Hal lain yang dapat Anda lakukan adalah menambahkan dukungan web ke aplikasi Flutter. Secara default, platform web diaktifkan secara otomatis untuk aplikasi Flutter, sehingga Anda hanya perlu meluncurkannya.

1. Pastikan perangkat target disetel ke di status bar VSCode.
2. Klik Start debugging, lalu tunggu aplikasi dimuat di browser Chrome.
3. Masukkan ID pengguna (yaitu, 42), lalu pilih Rekomendasikan.

11. Selamat

Anda telah membuat aplikasi full stack untuk merekomendasikan film kepada pengguna.

Meskipun aplikasi hanya merekomendasikan film, Anda telah mempelajari alur kerja keseluruhan dalam membangun mesin rekomendasi yang efektif dan menguasai keterampilan untuk menggunakan rekomendasi di aplikasi Flutter. Anda dapat dengan mudah menerapkan apa yang telah Anda pelajari ke skenario lain (misalnya, e-Commerce, makanan, dan video singkat).

Pelajari lebih lanjut

• Halaman beranda TensorFlow Recommenders
• Halaman beranda TensorFlow Serving
• Halaman beranda Flutter
• Seri video tentang membangun sistem rekomendasi dengan TensorFlow di YouTube