Kami menyebarkan proyek ML menggunakan Flask sebagai REST API dan membuatnya dapat diakses melalui aplikasi Flutter

Pendahuluan

Pembelajaran mesin sudah ada di mana-mana dan hampir tidak mungkin menemukan perangkat lunak yang tidak menggunakannya secara langsung atau tidak langsung. Mari kita buat aplikasi kecil yang dapat mengunggah gambar ke server untuk pengakuan nanti menggunakan ML. Dan kemudian kami akan membuatnya tersedia melalui aplikasi seluler dengan pencarian teks berdasarkan konten.

Kami akan menggunakan Flask untuk REST API kami, Flutter untuk aplikasi seluler dan Keras untuk pembelajaran mesin. Kami menggunakan MongoDB sebagai basis data untuk menyimpan informasi tentang isi gambar, dan untuk informasi kami menggunakan model ResNet50 yang sudah terlatih. Jika perlu, kita dapat mengganti model menggunakan metode save_model () dan load_model () yang tersedia di Keras. Yang terakhir akan membutuhkan sekitar 100 MB pada saat pemuatan awal model. Anda dapat membaca tentang model lain yang tersedia di dokumentasi .

Mari kita mulai dengan Flask

Jika Anda tidak terbiasa dengan Flask, Anda dapat membuat rute dengan hanya menambahkan dekorator app .route ('/') ke controller, di mana aplikasi adalah variabel aplikasi. Contoh:

from flask import Flask app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello, World!' 

Ketika Anda memulai dan pergi ke alamat default 127.0.0.1 : 5000 / kami akan melihat jawabannya Hello World! Anda dapat membaca tentang cara melakukan sesuatu yang lebih rumit dalam dokumentasi .

Mari kita mulai membuat backend penuh:

 import os import tensorflow as tf from tensorflow.keras.models import load_model from tensorflow.keras.preprocessing import image as img from keras.preprocessing.image import img_to_array import numpy as np from PIL import Image from keras.applications.resnet50 import ResNet50,decode_predictions,preprocess_input from datetime import datetime import io from flask import Flask,Blueprint,request,render_template,jsonify from modules.dataBase import collection as db 

Seperti yang Anda lihat, impor mengandung tensorflow , yang akan kita gunakan sebagai backend untuk keras , serta numpy untuk bekerja dengan array multidimensi.

 mod = Blueprint('backend', __name__, template_folder='templates', static_folder='./static') UPLOAD_URL = 'http://192.168.1.103:5000/static/' model = ResNet50(weights='imagenet') model._make_predict_function() 

Pada baris pertama kami membuat cetak biru untuk pengaturan aplikasi yang lebih nyaman. Karena itu, Anda harus menggunakan mod .route ('/') untuk menghias pengontrol. Model Resnet50 , yang sudah dilatih tentang imagenet, perlu memanggil _make_predict_function () untuk menginisialisasi. Tanpa langkah ini, ada peluang untuk mendapatkan kesalahan. Dan model lain dapat digunakan dengan mengganti garis

 model = ResNet50(weights='imagenet') 

pada

 model = load_model('saved_model.h5') 

Akan terlihat seperti apa pengontrolnya:

 @mod.route('/predict', methods=['POST']) def predict(): if request.method == 'POST': # ,    if 'file' not in request.files: return "someting went wrong 1" user_file = request.files['file'] temp = request.files['file'] if user_file.filename == '': return "file name not found ..." else: path = os.path.join(os.getcwd()+'\\modules\\static\\'+user_file.filename) user_file.save(path) classes = identifyImage(path) db.addNewImage( user_file.filename, classes[0][0][1], str(classes[0][0][2]), datetime.now(), UPLOAD_URL+user_file.filename) return jsonify({ "status":"success", "prediction":classes[0][0][1], "confidence":str(classes[0][0][2]), "upload_time":datetime.now() }) 

Dalam kode di atas, gambar yang diunduh dilewatkan ke metode identifyImage (file_path) , yang diimplementasikan sebagai berikut:

 def identifyImage(img_path): image = img.load_img(img_path, target_size=(224,224)) x = img_to_array(image) x = np.expand_dims(x, axis=0) # images = np.vstack([x]) x = preprocess_input(x) preds = model.predict(x) preds = decode_predictions(preds, top=1) print(preds) return preds 

Pertama, kami mengonversi gambar ke ukuran 224 * 224, karena dialah yang dibutuhkan oleh model kita. Kemudian kita meneruskan ke byte gambar model.predict () pra-diproses. Sekarang model kami dapat memprediksi apa yang ada pada gambar ( top = 1 diperlukan untuk mendapatkan hasil tunggal yang paling mungkin).

Simpan data yang diterima tentang konten gambar dalam MongoDB menggunakan fungsi db.addData () . Ini adalah bagian kode yang relevan:

 from pymongo import MongoClient from bson import ObjectId client = MongoClient("mongodb://localhost:27017") # host uri db = client.image_predition #Select the database image_details = db.imageData def addNewImage(i_name, prediction, conf, time, url): image_details.insert({ "file_name":i_name, "prediction":prediction, "confidence":conf, "upload_time":time, "url":url }) def getAllImages(): data = image_details.find() return data 

Karena kami menggunakan cetak biru, kode untuk API dapat ditempatkan di file terpisah:

 from flask import Flask,render_template,jsonify,Blueprint mod = Blueprint('api',__name__,template_folder='templates') from modules.dataBase import collection as db from bson.json_util import dumps @mod.route('/') def api(): return dumps(db.getAllImages()) 

Seperti yang Anda lihat, kami menggunakan json untuk mengembalikan data database. Anda dapat melihat hasilnya di alamat 127.0.0.1 : 5000 / api

Di atas, tentu saja, hanya potongan kode yang paling penting. Proyek lengkap dapat dilihat di repositori GitHub . Dan lebih banyak tentang Pymongo dapat ditemukan di sini .

Kami membuat aplikasi Flutter

Versi seluler akan menerima gambar dan data pada isinya melalui REST API. Inilah hasilnya:

Kelas ImageData merangkum data gambar:

 import 'dart:convert'; import 'package:http/http.dart' as http; import 'dart:async'; class ImageData { // static String BASE_URL ='http://192.168.1.103:5000/'; String uri; String prediction; ImageData(this.uri,this.prediction); } Future<List<ImageData>> LoadImages() async { List<ImageData> list; //complete fetch .... var data = await http.get('http://192.168.1.103:5000/api/'); var jsondata = json.decode(data.body); List<ImageData> newslist = []; for (var data in jsondata) { ImageData n = ImageData(data['url'],data['prediction']); newslist.add(n); } return newslist; } 

Di sini kita mendapatkan json, mengonversinya ke daftar objek ImageData, dan mengembalikannya ke Future Builder menggunakan fungsi LoadImages ()

Mengunggah gambar ke server

 uploadImageToServer(File imageFile) async { print("attempting to connecto server......"); var stream = new http.ByteStream(DelegatingStream.typed(imageFile.openRead())); var length = await imageFile.length(); print(length); var uri = Uri.parse('http://192.168.1.103:5000/predict'); print("connection established."); var request = new http.MultipartRequest("POST", uri); var multipartFile = new http.MultipartFile('file', stream, length, filename: basename(imageFile.path)); //contentType: new MediaType('image', 'png')); request.files.add(multipartFile); var response = await request.send(); print(response.statusCode); } 

Untuk membuat Flask tersedia di jaringan lokal, nonaktifkan mode debug dan temukan alamat ipv4 menggunakan ipconfig . Anda dapat memulai server lokal seperti ini:

 app.run(debug=False, host='192.168.1.103', port=5000) 

Kadang-kadang firewall dapat mencegah aplikasi mengakses localhost, maka itu harus dikonfigurasi ulang atau dinonaktifkan.

Semua kode sumber aplikasi tersedia di github . Berikut ini tautan yang akan membantu Anda memahami apa yang sedang terjadi:

Keras: https://keras.io/

Flutter: https://flutter.dev/

MongoDB: https://www.tutorialspoint.com/mongodb/

Kursus Python dan Flask Harvard: https://www.youtube.com/watch?v=j5wysXqaIV8&t=5515s (kuliah 2,3,4 sangat penting)

GitHub: https://github.com/SHARONZACHARIA