(IF) Akses Flask API
Pada materi sebelumnya https://rachmat-nur.gitbook.io/flask/integrasi-model-dengan-api/ml-model-gunting-batu-kertas, kita sudah membuat Flask API backend model permainan tangan gunting, batu dan kertas.
Pada materi kali ini, kita akan mencoba membuat halaman web menggunakan React yang dapat mengirimkan request dan menerima response dari Flask API yang sudah dibuat sebelumnya.
Endpoint API backend dapat diakses pada URL : https://web-production-a5783.up.railway.app/
Instalasi React
Jalankan perintah pnpm create vite
melalui terminal VS Code, kemudian isi project name dengan nama react-apimodel, pilih framework React, dan variant Javascript.

Kemudian masuk ke dalam folder react-apimodel dengan cara cd react-apimodel
,
jalankan perintah pnpm install
untuk menginstal dependencies yang diperlukan

Jalankan perintah pnpm run dev
untuk menjalankan aplikasi React

Klik http://localhost:5173, kemudian akan tampil web browser yang menampilkan halaman aplikasi React

Instalasi Axios
Jalankan perintah pnpm install axios

Axios adalah pustaka yang memungkinkan kita untuk membuat permintaan HTTP dari aplikasi browser atau Node.js.Sangat berguna dalam mengelola komunikasi antara frontend dan backend.
Instalasi Bootstrap
Jalankan perintah pnpm install bootstrap

Impor Bootstrap ke dalam file src/main.jsx:
import 'bootstrap/dist/css/bootstrap.min.css';
Berikut isi file main.jsx setelah diimpor Bootstrap
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import 'bootstrap/dist/css/bootstrap.min.css';
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>,
)
Modifikasi File App.jsx
Modifikasi file App.jsx seperti kode di bawah ini
import { useState } from "react"; // Import React hook `useState` untuk mengelola state dalam komponen
import axios from "axios"; // Import Axios untuk membuat HTTP request ke API
function App() { // Fungsi utama komponen App
const [file, setFile] = useState(null); // State untuk menyimpan file yang diunggah pengguna
const [prediction, setPrediction] = useState(null); // State untuk menyimpan hasil prediksi dari API
const handleFileChange = (event) => { // Fungsi untuk menangani perubahan input file
setFile(event.target.files[0]); // Mengambil file yang dipilih pengguna dan menyimpannya ke state `file`
};
const handleSubmit = async (event) => { // Fungsi untuk menangani form submit
event.preventDefault(); // Mencegah reload halaman default pada form submit
const formData = new FormData(); // Membuat instance FormData untuk mengirim file
formData.append("file", file); // Menambahkan file ke dalam FormData dengan field name "file"
try {
const response = await axios.post( // Mengirim POST request ke API menggunakan Axios
"https://web-production-a5783.up.railway.app/predict", // URL endpoint API untuk prediksi
formData, // Mengirimkan data file sebagai body request
{
headers: {
"Content-Type": "multipart/form-data", // Menentukan header untuk file upload
},
}
);
setPrediction(response.data); // Menyimpan hasil prediksi yang diterima dari API ke state `prediction`
} catch (error) {
console.error("Error uploading file:", error); // Menampilkan error jika ada masalah saat mengunggah file
}
};
return ( // Render elemen JSX
<div className="container"> {/* Wrapper untuk seluruh konten aplikasi */}
<h1 className="mt-5">Upload Gambar dan Dapatkan Prediksi</h1> {/* Header aplikasi */}
<form onSubmit={handleSubmit}> {/* Form untuk unggah file */}
<div className="form-group"> {/* Div untuk grup input form */}
<label htmlFor="fileInput">Pilih Gambar</label> {/* Label untuk input file */}
<input
type="file" // Input untuk memilih file
className="form-control" // Kelas Bootstrap untuk gaya input
id="file" // ID untuk input file
onChange={handleFileChange} // Event handler untuk perubahan file
/>
</div>
<button type="submit" className="btn btn-primary mt-3"> {/* Tombol submit form */}
Unggah
</button>
</form>
{prediction && ( // Jika prediksi tersedia, tampilkan hasilnya
<div className="mt-5"> {/* Wrapper untuk hasil prediksi */}
<h3>Hasil Prediksi</h3> {/* Header untuk hasil prediksi */}
<pre>{JSON.stringify(prediction, null, 2)}</pre> {/* Menampilkan hasil prediksi dalam format JSON yang terstruktur */}
</div>
)}
</div>
);
}
export default App; // Ekspor komponen App agar dapat digunakan di file lain
Kemudian buka kembali halaman browser, pilih Choose File

Cari gambar misalnya permainan tangan "gunting", lalu pilih Open

Kemudian tekan tombol Unggah, dan hasil prediksi gambar akan tampil

Deploy ke Vercel
Setelah pengujian di local berhasil, lakukan deploy aplikasi ke layanan cloud seperti vercel. Berikut contoh aplikasi yang dapat mengenali gambar permainan tangan guntin, batu dan kertas : https://react-apimodel.vercel.app/
Last updated