126 lines
8.2 KiB
HTML
126 lines
8.2 KiB
HTML
<div id="uni_roadmap" class="uni-roadmap uk-section uk-section-large@m uk-panel uk-overflow-hidden">
|
|
<div class="uk-container uk-container-small">
|
|
<header class="uk-grid-xsmall uk-flex-center uk-flex-middle uk-text-center uk-child-width-auto@m uk-grid"
|
|
data-uk-grid>
|
|
<div class="uk-panel">
|
|
<h2 class="uk-h3 uk-h1@m">Proses Sistem Klasifikasi</h2>
|
|
</div>
|
|
</header>
|
|
<div class="uk-panel uk-margin-medium-top uk-margin-2xlarge-top@m">
|
|
<div class="uk-grid-column-large uk-grid-row-collapse@m uk-grid-divider uk-child-width-1-2@m uk-text-muted uk-grid"
|
|
data-uk-grid="">
|
|
<div>
|
|
<div
|
|
class="uni-phase uk-panel uk-card uk-card-small uk-card-medium@m uk-radius uk-radius-xlarge@m uk-box-shadow-xsmall dark:uk-background-white-5">
|
|
<span
|
|
class="uni-phase-progress uk-text-small uk-text-bold uk-position-top-right uk-position-small uk-text-white uk-background-gradient"><span>1</span></span>
|
|
<div class="uk-panel">
|
|
<span class="uni-phase-count uk-text-overline uk-text-gradient">Phase 01</span>
|
|
<h3 class="uni-phase-title uk-h4 uk-h3@m uk-margin-remove-bottom">Pengumpulan Data</h3>
|
|
<p class="uni-phase-description uk-text-large@m">Mengumpulkan gambar produk yang
|
|
dimanipulasi (misalnya, diubah warna, ditambahkan objek, dihapus bagian gambar) serta
|
|
data Real.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="uk-visible@m">
|
|
<canvas height="245"></canvas>
|
|
</div>
|
|
<div class="uk-visible@m">
|
|
<canvas height="245"></canvas>
|
|
</div>
|
|
<div>
|
|
<div
|
|
class="uni-phase uk-panel uk-card uk-card-small uk-card-medium@m uk-radius uk-radius-xlarge@m uk-box-shadow-xsmall dark:uk-background-white-5 uni-phase-even">
|
|
<span
|
|
class="uni-phase-progress uk-text-small uk-text-bold uk-position-top-right uk-position-small uk-text-white uk-background-gradient"><span>2</span></span>
|
|
<div class="uk-panel">
|
|
<span class="uni-phase-count uk-text-overline uk-text-gradient">Phase 02</span>
|
|
<h3 class="uni-phase-title uk-h4 uk-h3@m uk-margin-remove-bottom">Praproses Gambar</h3>
|
|
<p class="uni-phase-description uk-text-large@m">Ukuran semua gambar disesuaikan, nilai
|
|
piksel dinormalisasi, dan teknik augmentasi data diterapkan untuk meningkatkan jumlah
|
|
data dan mencegah overfitting.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div
|
|
class="uni-phase uk-panel uk-card uk-card-small uk-card-medium@m uk-radius uk-radius-xlarge@m uk-box-shadow-xsmall dark:uk-background-white-5">
|
|
<span
|
|
class="uni-phase-progress uk-text-small uk-text-bold uk-position-top-right uk-position-small uk-text-white uk-background-gradient"><span>3</span></span>
|
|
<div class="uk-panel">
|
|
<span class="uni-phase-count uk-text-overline uk-text-gradient">Phase 03</span>
|
|
<h3 class="uni-phase-title uk-h4 uk-h3@m uk-margin-remove-bottom">Ekstraksi Fitur Error
|
|
Level Analysis (ELA)</h3>
|
|
<p class="uni-phase-description uk-text-large@m">ELA menghitung perbedaan kompresi di setiap
|
|
piksel, kemudian mengubahnya menjadi peta fitur, yang menunjukkan potensi manipulasi
|
|
pada gambar.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="uk-visible@m">
|
|
<canvas height="245"></canvas>
|
|
</div>
|
|
<div class="uk-visible@m">
|
|
<canvas height="245"></canvas>
|
|
</div>
|
|
<div>
|
|
<div
|
|
class="uni-phase uk-panel uk-card uk-card-small uk-card-medium@m uk-radius uk-radius-xlarge@m uk-box-shadow-xsmall dark:uk-background-white-5 uni-phase-even">
|
|
<span
|
|
class="uni-phase-progress uk-text-small uk-text-bold uk-position-top-right uk-position-small uk-text-white uk-background-gradient"><span>4</span></span>
|
|
<div class="uk-panel">
|
|
<span class="uni-phase-count uk-text-overline uk-text-gradient">Phase 04</span>
|
|
<h3 class="uni-phase-title uk-h4 uk-h3@m uk-margin-remove-bottom">Klasifikasi dengan
|
|
Convolutional Neural Network (CNN)</h3>
|
|
<p class="uni-phase-description uk-text-large@m">Model CNN dibangun untuk klasifikasi
|
|
gambar, dilatih dengan menggunakan peta fitur ELA dan label gambar, serta dievaluasi
|
|
kinerjanya pada set data validasi untuk mengukur akurasi dan efektivitasnya dalam
|
|
mengklasifikasikan gambar.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div
|
|
class="uni-phase uk-panel uk-card uk-card-small uk-card-medium@m uk-radius uk-radius-xlarge@m uk-box-shadow-xsmall dark:uk-background-white-5">
|
|
<span
|
|
class="uni-phase-progress uk-text-small uk-text-bold uk-position-top-right uk-position-small uk-text-white uk-background-gradient"><span>5</span></span>
|
|
<div class="uk-panel">
|
|
<span class="uni-phase-count uk-text-overline uk-text-gradient">Phase 05</span>
|
|
<h3 class="uni-phase-title uk-h4 uk-h3@m uk-margin-remove-bottom">Pengujian Model</h3>
|
|
<p class="uni-phase-description uk-text-large@m">Uji aplikasi dengan berbagai gambar produk
|
|
untuk memastikan akurasinya.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="uk-visible@m">
|
|
<canvas height="245"></canvas>
|
|
</div>
|
|
<div class="uk-visible@m">
|
|
<canvas height="245"></canvas>
|
|
</div>
|
|
<div>
|
|
<div
|
|
class="uni-phase uk-panel uk-card uk-card-small uk-card-medium@m uk-radius uk-radius-xlarge@m uk-box-shadow-xsmall dark:uk-background-white-5 uni-phase-even">
|
|
<span
|
|
class="uni-phase-progress uk-text-small uk-text-bold uk-position-top-right uk-position-small uk-text-white uk-background-gradient"><span>6</span></span>
|
|
<div class="uk-panel">
|
|
<span class="uni-phase-count uk-text-overline uk-text-gradient">Phase 06</span>
|
|
<h3 class="uni-phase-title uk-h4 uk-h3@m uk-margin-remove-bottom">Pengembangan Aplikasi</h3>
|
|
<p class="uni-phase-description uk-text-large@m">Antarmuka pengguna dibangun untuk
|
|
mengunggah gambar produk, kemudian model CNN yang telah dilatih diintegrasikan ke dalam
|
|
aplikasi. Hasil klasifikasi (asli atau dimanipulasi) ditampilkan kepada pengguna,
|
|
memberikan informasi tentang keaslian gambar produk yang diunggah.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- roadmap end -->
|
|
|
|
<img class="uk-width-2xsmall uk-flex-center uk-margin-auto uk-margin-medium uk-margin-large@m"
|
|
src="../static/assets/images/divider-01.svg" alt="Divider"
|
|
data-anime="opacity:[0, 1]; translateY:[24, 0]; onview: true; delay: 100;"> |