TIF_E41210178/resources/views/pages/index.blade.php

@extends('layout.main')

@section('content')
<!-- hero-wapper-section -->
<section class="vs-hero-wrapper4">
    <div class="banner-slide4">
        <div class="banner-slide4-content">
            <div class="container-style4">
                <div class="banner-content4">
                    <h1 class="banner-title">Klasifikasi Hewan<span>Dengan CNN</span></h1>
                    <p>Media Pembelajaran Pengenalan Hewan Pada Anak Usia Dini Menggunakan Convolutional Neural Network</p>
                    {{-- <a href="registration.html" title="" class="vs-btn banner">Apply today</a> --}}
                </div>
            </div>
        </div>
    </div>
</section>
<!-- End hero-wapper -->

<!-- service-style3 -->
<section class="service-details space">
    <div class="container-style4">
        <div class="row">
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="service-card3">
                    <div class="ser-icon3"><img src="{{ asset('assets/img/service/ser3-1.svg') }}" alt=""></div>
                    <h4 class="title"><a href="service-details.html" title="">Convolutional Neural Network<br> CNN</a></h4>
                    <span>AI Model</span>
                    <a href="#" class="ser-btn3"><i class="fa fa-arrow-right"></i></a>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="service-card3 v2">
                    <div class="ser-icon3"><img src="{{ asset('assets/img/service/ser3-2.svg') }}" alt=""></div>
                    <h4 class="title"><a href="service-details.html" title="">Classification<br> With Image</a></h4>
                    <span>Upload And Prediction Will Show</span>
                    <a href="#" class="ser-btn3"><i class="fa fa-arrow-right"></i></a>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="service-card3 v3">
                    <div class="ser-icon3"><img src="{{ asset('assets/img/service/ser3-3.svg') }}" alt=""></div>
                    <h4 class="title"><a href="service-details.html" title="">Classification<br> With Camera</a></h4>
                    <span>Just Turn On Ur Camera And Enjoy</span>
                    <a href="#" class="ser-btn3"><i class="fa fa-arrow-right"></i></a>
                </div>
            </div>
        </div>
    </div>
</section>


<!-- form-style4 -->
<section class="form-section4 space">
    <div class="container-style4">
        <!-- Menu Buttons -->
        <div class="menu-buttons text-center">
            <button class="vs-btn form" onclick="showSection('upload-classification')">Klasifikasi Unggah Gambar</button>
            <button class="vs-btn form" onclick="showSection('live-classification')">Live</button>
        </div>

        <!-- Upload Classification Form -->
        <div class="form-box4 section-content" id="upload-classification">
            <form id="predictForm" class="form-style4" enctype="multipart/form-data">
                @csrf
                @method('POST')
                <div class="title-area-four form text-center">
                    <h2>Klasifikasi Hewan Melalui Gambar</h2>
                    <span class="sub-title">Unggah gambar untuk klasifikasi hewan</span>
                </div>
                <div class="row justify-content-between">
                    <div class="col-md-12 form-group text-center">
                        <button class="vs-btn form" onclick="document.getElementById('fileInput').click();" type="button">Pilih Gambar</button>
                        <input type="file" id="fileInput" name="image" style="display: none;">
                    </div>
                </div>
                <div id="result2" class="text-center"></div>
            </form>
        </div>

        <!-- Live Classification Form -->
        <div class="form-box4 section-content" id="live-classification" style="display: none;">
            <form class="form-style4">
                <div class="title-area-four form text-center">
                    <h2>Klasifikasi Hewan Melalui Live Camera</h2>
                    <span class="sub-title">Gunakan kamera untuk klasifikasi hewan secara langsung</span>
                </div>
                <div class="row justify-content-between">
                    <div class="col-md-12 form-group text-center">
                        <label>Toggle Camera</label>
                        <button class="vs-btn form" id="toggleButton" type="button">Mulai Live Klasifikasi</button>
                    </div>
                    <div class="col-md-12 form-group text-center">
                        <label>Pilih Kamera</label>
                        <select id="cameraSelect"></select>
                    </div>
                    <div class="col-md-12 form-group text-center">
                        <video id="video" width="100%" height="400px" autoplay></video>
                        <canvas id="canvas" width="640" height="480" style="display: none;"></canvas>
                    </div>
                    <div id="result" class="text-center"></div>
                </div>
            </form>
        </div>
    </div>
</section>
<!-- End form-style4 -->
@endsection

@section('style')
<style>
    .menu-buttons .vs-btn {
        margin: 5px;
    }

    .section-content {
        display: none;
    }

    #upload-classification {
        display: block;
    }

    video {
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        /* border: 2px solid #ddd; */
    }

</style>
@endsection


@section('script')
<script>
    function showSection(sectionId) {
        var sections = document.querySelectorAll('.section-content');
        sections.forEach(function(section) {
            section.style.display = 'none';
        });
        document.getElementById(sectionId).style.display = 'block';
    }

</script>

<script>
    const videoElement = document.getElementById('video');
    const canvasElement = document.getElementById('canvas');
    const resultElement = document.getElementById('result');
    const toggleButton = document.getElementById('toggleButton');
    const cameraSelect = document.getElementById('cameraSelect');
    let mediaStream = null;
    let isLiveDetectionActive = false;
    let detectionInterval = null;

    async function getCameraDevices() {
        const devices = await navigator.mediaDevices.enumerateDevices();
        return devices.filter(device => device.kind === 'videoinput');
    }

    async function setupCamera(cameraId) {
        const constraints = {
            video: {
                deviceId: cameraId
                , facingMode: 'environment'
            }
        };
        mediaStream = await navigator.mediaDevices.getUserMedia(constraints);
        videoElement.srcObject = mediaStream;
    }

    async function toggleLiveDetection() {
        try {
            if (isLiveDetectionActive) {
                if (mediaStream) {
                    mediaStream.getTracks().forEach(track => track.stop());
                }
                videoElement.srcObject = null;
                resultElement.style.display = 'none';
                clearInterval(detectionInterval); // Stop detection interval
            } else {
                const cameras = await getCameraDevices();
                if (cameras.length > 0) {
                    await setupCamera(cameras[0].deviceId);
                    videoElement.srcObject = mediaStream;
                    resultElement.style.display = 'block';
                    detectionInterval = setInterval(captureAndSendFrame, 1000); // Start detection interval
                } else {
                    console.error('No cameras available.');
                }
            }
            isLiveDetectionActive = !isLiveDetectionActive;
        } catch (error) {
            console.error('Error accessing the camera: ', error);
        }
    }

    toggleButton.addEventListener('click', toggleLiveDetection);

    cameraSelect.addEventListener('change', async (event) => {
        if (mediaStream) {
            mediaStream.getTracks().forEach(track => track.stop());
        }
        await setupCamera(event.target.value);
        videoElement.srcObject = mediaStream;
    });

    async function populateCameraList() {
        const cameras = await getCameraDevices();
        cameras.forEach(camera => {
            const option = document.createElement('option');
            option.value = camera.deviceId;
            option.text = camera.label || `Camera ${camera.deviceId}`;
            cameraSelect.appendChild(option);
        });
    }

    populateCameraList().catch(console.error);

    function captureAndSendFrame() {
        if (!isLiveDetectionActive) return; // Prevent detection if not active
        const canvasContext = canvasElement.getContext('2d');
        canvasContext.drawImage(videoElement, 0, 0, canvasElement.width, canvasElement.height);
        const data = new FormData();
        data.append('image', dataURItoBlob(canvasElement.toDataURL()));

        fetch('http://127.0.0.1:5000/predict', {
                method: 'POST'
                , body: data
            })
            .then(response => response.json())
            .then(data => {
                if (data.prediction) {
                    resultElement.innerHTML = `<div class="alert alert-success alert-dismissible fade show" role="alert"><strong>Hasil Deteksi: </strong>${data.prediction}</div>`;
                } else {
                    resultElement.innerHTML = `<div class="alert alert-danger alert-dismissible fade show" role="alert"><strong>Hasil Deteksi: </strong>Tidak dapat mendeteksi objek</div>`;
                }
            })
            .catch(error => {
                console.error('Error sending frame to API: ', error);
            });
    }

    function dataURItoBlob(dataURI) {
        const byteString = atob(dataURI.split(',')[1]);
        const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
        const ab = new ArrayBuffer(byteString.length);
        const ia = new Uint8Array(ab);
        for (let i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }
        return new Blob([ab], {
            type: mimeString
        });
    }

    // Initial hide resultElement
    resultElement.style.display = 'none';

    $(document).ready(function() {

        $('#fileInput').on('change', function() {
            var formData = new FormData($('#predictForm')[0]);
            var resultDiv = $('#result2');
            resultDiv.empty();
            resultDiv.append(`
                        <div class="alert alert-info alert-dismissible fade show">
                    <strong>Info!</strong> Sedang memproses gambar...
                </div>


                    `);

            $.ajax({
                type: 'POST'
                , url: '/', // Ubah URL ini jika perlu
                data: formData
                , contentType: false
                , processData: false
                , success: function(response) {
                    var hasil = response.hasil;
                    var gambar = response.gambar;


                    // Clear previous results
                    resultDiv.empty();

                    if (hasil) {
                        resultDiv.append(`
                        <img height="200px" width="200px" src="{{ asset('images/hewan/') }}/${gambar}" alt="" style="border-radius: 15px;">
                        <br><br>
                        <div class="alert alert-info alert-dismissible fade show" role="alert"><strong>Hasil Deteksi: </strong>${hasil}</div>
                    `);
                    } else {
                        resultDiv.append(`
                        <div class="alert alert-info alert-dismissible fade show" role="alert"><strong>Hasil Deteksi: </strong>Tidak dapat mendeteksi objek</div>
                    `);
                    }
                }
                , error: function(xhr, status, error) {
                    console.error(xhr.responseText);
                    resultDiv.append(`
                        <div class="alert alert-info alert-dismissible fade show" role="alert"><strong>Terjadi Kesalahan </strong></div>
                    `);
                }
            });
        });
    });

</script>
@endsection