File size: 3,867 Bytes
f201f54
 
 
 
 
 
fc1ca8e
f201f54
fc1ca8e
f201f54
 
 
 
fc1ca8e
 
 
f201f54
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
fc1ca8e
 
f201f54
 
 
 
 
 
 
 
 
 
 
 
fc1ca8e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f201f54
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
$(document).ready(function() {
    const video = document.getElementById('videoElement');
    const canvas = document.getElementById('canvas');
    const capturedImage = document.getElementById('capturedImage');
    const hfResult = document.getElementById('hfResult');
    const cameraSelect = document.getElementById('cameraSelect');
    const actionButtons = document.getElementById('actionButtons');
    let stream = null;
    let currentImageUrl = null;

    // Open camera
    $('#openCamera').click(function() {
        $('#cameraContainer').show();
        actionButtons.style.display = 'none';
        capturedImage.style.display = 'none';
        hfResult.textContent = '';
        startCamera(cameraSelect.value);
    });

    // Switch camera
    cameraSelect.addEventListener('change', function() {
        if (stream) {
            stopCamera();
            startCamera(this.value);
        }
    });

    // Capture image
    $('#captureButton').click(function() {
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        canvas.getContext('2d').drawImage(video, 0, 0);
        const dataUrl = canvas.toDataURL('image/jpeg');

        // Send to server
        $.ajax({
            type: 'POST',
            url: '/capture',
            data: { image: dataUrl },
            success: function(response) {
                if (response.status === 'success') {
                    capturedImage.src = response.image_url;
                    capturedImage.style.display = 'block';
                    hfResult.textContent = JSON.stringify(response.hf_result, null, 2);
                    actionButtons.style.display = 'block';
                    currentImageUrl = response.image_url;
                    stopCamera();
                    $('#cameraContainer').hide();
                } else {
                    alert('Error: ' + response.message);
                }
            },
            error: function() {
                alert('Failed to capture image.');
            }
        });
    });

    // Retake button
    $('#retakeButton').click(function() {
        $('#cameraContainer').show();
        actionButtons.style.display = 'none';
        capturedImage.style.display = 'none';
        hfResult.textContent = '';
        startCamera(cameraSelect.value);
    });

    // Upload to Instagram
    $('#uploadButton').click(function() {
        if (!currentImageUrl) {
            alert('No image to upload.');
            return;
        }
        $.ajax({
            type: 'POST',
            url: '/upload_instagram',
            data: { image_url: currentImageUrl },
            success: function(response) {
                if (response.status === 'success') {
                    alert('Image uploaded to Instagram successfully!');
                    actionButtons.style.display = 'none';
                    capturedImage.style.display = 'none';
                    hfResult.textContent = '';
                } else {
                    alert('Error uploading to Instagram: ' + response.message);
                }
            },
            error: function() {
                alert('Failed to upload image to Instagram.');
            }
        });
    });

    function startCamera(facingMode) {
        const constraints = {
            video: { facingMode: facingMode }
        };
        navigator.mediaDevices.getUserMedia(constraints)
            .then(function(mediaStream) {
                stream = mediaStream;
                video.srcObject = stream;
            })
            .catch(function(err) {
                alert('Error accessing camera: ' + err.message);
            });
    }

    function stopCamera() {
        if (stream) {
            stream.getTracks().forEach(track => track.stop());
            stream = null;
            video.srcObject = null;
        }
    }
});