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 pemberi rekomendasi, adalah penerapan machine learning yang sangat penting. Pemberi rekomendasi membantu Anda menampilkan konten yang menarik dari sekumpulan besar kandidat kepada pengguna Anda. Misalnya, Google Play Store menawarkan jutaan aplikasi untuk diinstal, sedangkan YouTube menyediakan miliaran video untuk ditonton. Selain itu, semakin banyak aplikasi dan video yang ditambahkan setiap hari.

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

• Pemberi Rekomendasi TensorFlow untuk melatih pengambilan dan model peringkat untuk rekomendasi film
• TensorFlow Serving untuk menyajikan model
• Flutter untuk membuat aplikasi lintas platform guna menampilkan film yang direkomendasikan

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 Pemberi Rekomendasi TensorFlow
• Cara menayangkan 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 dan yang lebih baru
• 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 pemberi saran, 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: Menjalankan aplikasi awal

1. Buka file step0/frontend/lib/main.dart di VS Code, pastikan Android Emulator atau Simulator iOS 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 menjadi 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 memungkinkan pengguna mengetik teks sebagai ID pengguna. Aplikasi Flutter akan mengirimkan permintaan kueri ke backend, yang menjalankan 2 model rekomendasi dan menampilkan daftar peringkat rekomendasi film. Frontend akan menampilkan hasilnya 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 pemberian peringkat untuk mesin pemberi saran

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 kandidat yang mungkin. Tujuan utama model ini adalah menyingkirkan semua kandidat yang tidak diminati pengguna secara efisien. Karena model pengambilan mungkin berurusan dengan jutaan kandidat, model itu harus efisien secara komputasi.
2. Tahap peringkat mengambil output model pengambilan dan menyesuaikannya untuk memilih beberapa rekomendasi terbaik. Tugasnya adalah mempersempit kumpulan item yang mungkin diminati pengguna menjadi daftar pendek kandidat dalam urutan ratusan.
3. Tahap pasca pemeringkatan membantu memastikan keberagaman, keaktualan, dan keadilan, serta mengatur ulang item kandidat menjadi serangkaian rekomendasi yang berguna dengan urutan lusinan.

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

• Model pengambilan MovieLens
• Model peringkat MovieLens

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

7. Langkah 2: Membuat backend mesin pemberi saran

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

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

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

Memulai TensorFlow Serving

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

• Di terminal Anda, buka folder step2/backend di komputer 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 di-deploy di TensorFlow Serving. Jika Anda melatih dan mendownload model dari Colab sendiri, pastikan Anda memperbarui jalur model di 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 'rantai' beberapa model berurutan, Anda perlu membuat layanan baru yang menghubungkan model pengambilan dan peringkat.

• Tambahkan kode ini ke fungsi get_recommendations() di 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)

Memulai 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 membangun 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 contoh permintaan 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 akan men-deploy model pengambilan dan peringkat ke dalam satu instance TensorFlow Serving. Dalam praktiknya, adalah hal yang umum untuk men-deploy VM ke dalam cluster terpisah untuk mengelola beban kerja produksi dengan lebih baik.

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

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

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

• Tambahkan kode ini ke fungsi recommend() di 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 akan mengupdate UI untuk menampilkan daftar film yang direkomendasikan bagi pengguna yang ditentukan.

• 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 Recommend.

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 Recommend.

Mac

1. Untuk Mac, Anda perlu menyiapkan hak yang sesuai karena aplikasi akan mengirim permintaan HTTP ke backend. Harap buka 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 Recommend.

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 Recommend.

10. Langkah 5: Jalankan aplikasi Flutter di platform web

Satu hal lagi yang dapat Anda lakukan adalah menambahkan dukungan web ke aplikasi Flutter. Secara default, platform web secara otomatis diaktifkan 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 Recommend.

11. Selamat

Anda telah membangun aplikasi full stack untuk merekomendasikan film kepada pengguna!

Meskipun aplikasi ini hanya merekomendasikan film, Anda telah mempelajari alur kerja keseluruhan dalam membangun mesin pemberi saran yang canggih 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 pendek).

Pelajari lebih lanjut

• Halaman beranda TensorFlow Reocommenders
• Halaman beranda TensorFlow Serving
• Halaman beranda Flutter
• Membangun sistem rekomendasi dengan serial video TensorFlow di YouTube