Pertama-tama mengimport library yang dibutuhkan
from flask import Flask, render_template, request
import pandas as pd
import joblib1. render_template: untuk memanggil file html yang dibuat (Disini nama file htmlnya adalah index.html)
2. request: berguna untuk mengambil file yang nantinya di upload dan siap diprediksi
3. joblib: berguna untuk mensave model kedalam format 'pickle' atau disingkat 'pkl'
File index.html seperti berikut
<!DOCTYPE html>
<html>
<title>Prediksi GDP</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<head>
<body>
<h1 class = "text-center">Prediksi GDP</h1>
<form class="p-3 text-center", action="/", method="post", enctype="multipart/form-data">
<input class = 'form-control', type="file", name="prediksi">
<input class = 'btn btn-primary mt-3', type="submit", value="Menuju Prediksi">
</form>
{% if prediction %}
<h3 class = "p-2 text-center">Hasil prediksi sebagai berikut</h3>
<br>
{{prediction}}
{% endif%}
</body>
</head>
</html>Pada code bagian bawah terdapat prediction yang merupakan sebuah variabel yang menyimpan hasil prediksi dari file yang diupload. Variabel tersebut bersumber dari code python yang telah ditulis sebelumnya. Berikut source-code nya
from flask import Flask, render_template, request
import pandas as pd
import joblib
from IPython.display import display,HTML
app = Flask(__name__)
model_hasil = joblib.load('knn.pkl')
@app.route('/', methods=['GET', 'POST'])
def index():
if request.method == 'GET':
return render_template('index.html')
elif request.method == 'POST':
csv_file = request.files.get('prediksi')
X_test = pd.read_csv(csv_file, index_col = 'number')
X_test['predik'] = model_hasil.predict(X_test)
return render_template('index.html', prediction=HTML(X_test.to_html(classes='table')))
if __name__ == '__main__':
app.run(port="3000")Pada variabel csv_file terdapat sebuah kata 'prediksi', dimana kata tersebut telah diinisialkan dari file html pada fungsi input. Dimana kata tersebut harus sama saat dimasukkan kedalam code python.
Sehingga file lengkap nya seperti berikut
Code Python
from flask import Flask, render_template, request
import pandas as pd
import joblib
from IPython.display import display,HTML
app = Flask(__name__)
model_hasil = joblib.load('knn.pkl')
@app.route('/', methods=['GET', 'POST'])
def index():
if request.method == 'GET':
return render_template('index.html')
elif request.method == 'POST':
csv_file = request.files.get('prediksi')
X_test = pd.read_csv(csv_file, index_col = 'number')
X_test['predik'] = model_hasil.predict(X_test)
return render_template('index.html', prediction=HTML(X_test.to_html(classes='table')))
if __name__ == '__main__':
app.run(port="3000")Code HTML
Source-code html lengkapnya seperti pada penjelasan sebelumnya.
Hasil
Gambar di atas merupakan tampilan dari source code HTML jika dijalankan. Selanjutnya tinggal melakukan proses upload file yang akan di prediksi. Nama file yang diuji berna ''gapminder_testing.csv". Setelah diupload, tinggal mengklik tombol "Menuju Prediksi" dan hasil yang didapatkan seperti berikut.
Comments