220 lines
11 KiB
PHP
220 lines
11 KiB
PHP
@extends('layouts.dashboard')
|
|
|
|
@section('content')
|
|
<div class="toolbar py-5 py-lg-15" id="kt_toolbar">
|
|
<div id="kt_toolbar_container" class="container-xxl d-flex flex-stack flex-wrap">
|
|
<div class="page-title d-flex flex-column me-3">
|
|
<h1 class="d-flex text-white fw-bolder my-1 fs-3">Dashboard</h1>
|
|
<ul class="breadcrumb breadcrumb-separatorless fw-bold fs-7 my-1">
|
|
<li class="breadcrumb-item text-white opacity-75">
|
|
<a href="{{ route('dashboard.index', ['id' => 1]) }}" class="text-white text-hover-primary">Home</a>
|
|
</li>
|
|
<li class="breadcrumb-item">
|
|
<span class="bullet bg-white opacity-75 w-5px h-2px"></span>
|
|
</li>
|
|
<li class="breadcrumb-item text-white opacity-75">Dataset</li>
|
|
</ul>
|
|
</div>
|
|
<div class="d-flex align-items-center py-3 py-md-1">
|
|
<a href="#" class="btn btn-bg-white btn-active-color-primary" data-bs-toggle="modal"
|
|
data-bs-target="#uji_model" id="kt_toolbar_primary_button">Uji Model</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" tabindex="-1" id="uji_model">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 class="modal-title">Pilih Variasi Split Data</h3>
|
|
|
|
<div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal"
|
|
aria-label="Close">
|
|
<i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<div class="mb-0">
|
|
<p>
|
|
<strong>
|
|
Jumlah Keseluruhan Data Test : 2021
|
|
</strong>
|
|
</p>
|
|
<label class="form-label">Pilih Persentase Data Test</label>
|
|
<div id="kt_slider_basic"></div>
|
|
|
|
<div class="pt-5">
|
|
<div class="fw-semibold mb-2">
|
|
Data Test: <span id="kt_slider_basic_test">20</span>%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary" id="uji_model_button">Save changes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="kt_content_container" class="d-flex flex-column-fluid align-items-start container-xxl">
|
|
<div class="content flex-row-fluid" id="kt_content">
|
|
<div class="row g-5 g-xxl-8">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-bordered text-center align-middle">
|
|
<thead class="table-dark">
|
|
<tr>
|
|
<th class="min-w-50px">No</th>
|
|
<th class="min-w-200px">Clean Text Translated</th>
|
|
<th class="min-w-100px">Label</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach ($dataset['data'] as $item)
|
|
<tr>
|
|
<td>{{ $loop->iteration }}</td>
|
|
<td class="text-start">{{ $item['processed_text'] ?? '-' }}</td>
|
|
<td>
|
|
@if ($item['label'] == 0)
|
|
<span class="badge bg-danger">{{ 'background' }}</span>
|
|
@elseif ($item['label'] == 1)
|
|
<span class="badge bg-success">{{ 'method' }}</span>
|
|
@else
|
|
<span class="badge bg-primary">{{ 'result' ?? 'N/A' }}</span>
|
|
@endif
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
@if (isset($dataset['last_page']) && $dataset['last_page'] > 1)
|
|
<div class="d-flex justify-content-end mt-4 mb-4">
|
|
<nav>
|
|
<ul class="pagination">
|
|
{{-- Tombol "Previous" --}}
|
|
@if ($dataset['current_page'] > 1)
|
|
<li class="page-item">
|
|
<a class="page-link" href="?page={{ $dataset['current_page'] - 1 }}">«</a>
|
|
</li>
|
|
@endif
|
|
|
|
{{-- Menampilkan halaman relatif (-3 hingga +3 dari current page) --}}
|
|
@php
|
|
$start = max(1, $dataset['current_page'] - 3);
|
|
$end = min($dataset['last_page'], $dataset['current_page'] + 3);
|
|
@endphp
|
|
|
|
@for ($i = $start; $i <= $end; $i++)
|
|
<li class="page-item {{ $i == $dataset['current_page'] ? 'active' : '' }}">
|
|
<a class="page-link" href="?page={{ $i }}">{{ $i }}</a>
|
|
</li>
|
|
@endfor
|
|
|
|
{{-- Tombol "Next" --}}
|
|
@if ($dataset['current_page'] < $dataset['last_page'])
|
|
<li class="page-item">
|
|
<a class="page-link" href="?page={{ $dataset['current_page'] + 1 }}">»</a>
|
|
</li>
|
|
@endif
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@push('js')
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
var slider = document.querySelector("#kt_slider_basic");
|
|
var valueTest = document.querySelector("#kt_slider_basic_test");
|
|
noUiSlider.create(slider, {
|
|
start: [100],
|
|
connect: [true, false],
|
|
range: {
|
|
min: 10,
|
|
max: 100
|
|
},
|
|
step: 5
|
|
});
|
|
|
|
slider.noUiSlider.on("update", function(values) {
|
|
valueTest.innerHTML = values;
|
|
});
|
|
});
|
|
|
|
$(document).ready(function() {
|
|
$('#uji_model_button').on('click', function() {
|
|
var valueTest = document.querySelector("#kt_slider_basic_test").textContent;
|
|
|
|
var backendUrl = @json(env('BACKEND_URL'));
|
|
const data = {
|
|
test_size: (valueTest / 100)
|
|
}
|
|
|
|
Swal.fire({
|
|
title: 'Loading...',
|
|
text: 'Please wait while we process your request.',
|
|
allowOutsideClick: false,
|
|
didOpen: () => {
|
|
Swal.showLoading();
|
|
}
|
|
});
|
|
$.ajax({
|
|
url: backendUrl + "/test",
|
|
type: 'post',
|
|
dataType: 'json',
|
|
headers: {
|
|
'Content-type': 'application/json'
|
|
},
|
|
data: JSON.stringify(data),
|
|
success: function(response) {
|
|
Swal.close();
|
|
console.log(response);
|
|
|
|
var accuracy = response.accuracy *
|
|
100;
|
|
var classificationReport = response.classification_report;
|
|
var confusionMatrix = response.confusion_matrix;
|
|
|
|
var resultHtml = `
|
|
<h3>Test Results</h3>
|
|
<p><strong>Accuracy:</strong> ${accuracy.toFixed(2)}%</p>
|
|
<h4>Classification Report</h4>
|
|
<ul>
|
|
<li><strong>Background:</strong> F1-Score: ${classificationReport["0"]["f1-score"].toFixed(2)}, Precision: ${classificationReport["0"]["precision"].toFixed(2)}, Recall: ${classificationReport["0"]["recall"].toFixed(2)}</li>
|
|
<li><strong>Method:</strong> F1-Score: ${classificationReport["1"]["f1-score"].toFixed(2)}, Precision: ${classificationReport["1"]["precision"].toFixed(2)}, Recall: ${classificationReport["1"]["recall"].toFixed(2)}</li>
|
|
<li><strong>Result:</strong> F1-Score: ${classificationReport["2"]["f1-score"].toFixed(2)}, Precision: ${classificationReport["2"]["precision"].toFixed(2)}, Recall: ${classificationReport["2"]["recall"].toFixed(2)}</li>
|
|
</ul>
|
|
`;
|
|
Swal.fire({
|
|
title: `Test Completed with ${response.total_data} data test`,
|
|
html: resultHtml,
|
|
confirmButtonText: 'Ok',
|
|
cancelButtonText: 'Close',
|
|
focusCancel: true
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
window.location.href = "/dashboard/uji_model";
|
|
}
|
|
});
|
|
},
|
|
error: function(xhr, status, error) {
|
|
Swal.close();
|
|
$('#result').html('Error: ' + error);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|
|
|
|
@endsection
|