<commit_before><!DOCTYPE html>
<html>
<head>
    <title>Smile to Me</title>
    <meta charset="utf-8">
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="js/webcam.js"></script> 
    <script src="js/clmtrackr.js"></script>
    <script src="js/model_pca_20_svm_emotionDetection.js"></script>
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
    body {
        background-color: silver;
    }
    #my_positions {
        width: 100%;
        height: 200px;
    }
    </style>
</head>
<body>
    <div class="container">
        <center style="margin: 50 auto;">
            <h1>Smile to Me</h1>
        </center>
        <div class="row">
            <div class="col-md-5 col-sm-5 col-md-offset-1 col-sm-offset-1">
                <canvas id="my_canvas" width="400" height="300" style="position: absolute; top: 0px: left: 0px"></canvas>
                <div id="my_camera" style="width:400px; height:300px;"></div>
            </div>
            <div class="col-md-5 col-sm-5">
                <div id="my_result" style="width:400px; height:300px;"></div>
                <div>
                    <p>Detected Emotion:</p>
                    <table>
                        <thead>
                            <tr>
                                <th>Emotion</th>
                                <th>Possibility</th>
                            </tr>
                            </thead>
                            <tbody id="my_emotion">
                            <tr>
                                <td>Smile</td>
                                <td>NaN</td>
                            </tr>
                            <tr>
                                <td>Happy</td>
                                <td>NaN</td>
                            </tr>
                            <tr>
                                <td>Surprise</td>
                                <td>NaN</td>
                            </tr>
                            <tr>
                                <td>Anger</td>
                                <td>NaN</td>
                            </tr>
                            <tr>
                                <td>Sad</td>
                                <td>NaN</td>
                            </tr>
                        </tbody>
                    </table>
                    <p>Time Elapse: <span id="my_time">NaN</span></p>
                </div>
                <!--<textarea id="my_positions" class="input-lg center" readonly="readonly"></textarea>-->
                <input id="my_url" type="text" class="input-lg" />
                <a class="btn btn-info" href="javascript:void(take_snapshot())">Take Snapshot</a>
                <a class="btn btn-primary" href="javascript:void(smile_to_me())">Smile?</a>
            </div>
        </div>
    </div>

    <!-- JavaScript to handle Camera and Face Recognition -->
    <script language="JavaScript">
        Webcam.attach( '#my_camera' );

        function handle_ajax(data) {
            var result = data['result'];
            if (result) {
                var tbody = $('#my_emotion').children();
                for (var i=0; i<5; i++) {
                    tbody.eq(i).children('td').eq(0).html(result[1][i][0]);
                    tbody.eq(i).children('td').eq(1).html(result[1][i][1]);
                }
                $('#my_time').html(result[2]);
            }
        }


        function smile_to_me() {
            var image_url = $('#my_url').val();
            if (image_url == '') {
                // Get image data from #my_result
                var image_base64 = $('#my_result').children('img').attr('src').split(',')[1];
                // Push image data to http://127.0.0.1:5000/classfy_url
                $.ajax({
                    url: "http://127.0.0.1:5000/classify_base64",
                    type: "POST",
                    data: {
                        base64: image_base64
                    },
                    success: handle_ajax
                });
            } else {
                $.ajax({
                    url: "http://127.0.0.1:5000/classify_url",
                    type: "GET",
                    data: {
                        imageurl: image_url
                    },
                    success: handle_ajax
                });
            }
        }
        
        function take_snapshot() {
            Webcam.snap( function(data_uri) {
                document.getElementById('my_result').innerHTML = '<img src="'+data_uri+'"/>';
            } );
        }

        var videoInput = document.getElementById('my_camera').children[1];
        videoInput.width = videoInput.offsetWidth;
        videoInput.height = videoInput.offsetHeight;
        var canvasInput = document.getElementById('my_canvas');
        var cc = canvasInput.getContext('2d');

        var ctracker = new clm.tracker();
        ctracker.init(pModel);
        ctracker.start(videoInput);

        function positionLoop() {<commit_msg>Update Snapshot when post a url in the inputbox.<commit_after><!DOCTYPE html>
<html>
<head>
    <title>Smile to Me</title>
    <meta charset="utf-8">
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="js/webcam.js"></script> 
    <script src="js/clmtrackr.js"></script>
    <script src="js/model_pca_20_svm_emotionDetection.js"></script>
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
    body {
        background-color: silver;
    }
    #my_positions {
        width: 100%;
        height: 200px;
    }
    </style>
</head>
<body>
    <div class="container">
        <center style="margin: 50 auto;">
            <h1>Smile to Me</h1>
        </center>
        <div class="row">
            <div class="col-md-5 col-sm-5 col-md-offset-1 col-sm-offset-1">
                <canvas id="my_canvas" width="400" height="300" style="position: absolute; top: 0px: left: 0px"></canvas>
                <div id="my_camera" style="width:400px; height:300px;"></div>
            </div>
            <div class="col-md-5 col-sm-5">
                <div id="my_result" style="width:400px; height:300px;"></div>
                <div>
                    <p>Detected Emotion:</p>
                    <table>
                        <thead>
                            <tr>
                                <th>Emotion</th>
                                <th>Possibility</th>
                            </tr>
                            </thead>
                            <tbody id="my_emotion">
                            <tr>
                                <td>Smile</td>
                                <td>NaN</td>
                            </tr>
                            <tr>
                                <td>Happy</td>
                                <td>NaN</td>
                            </tr>
                            <tr>
                                <td>Surprise</td>
                                <td>NaN</td>
                            </tr>
                            <tr>
                                <td>Anger</td>
                                <td>NaN</td>
                            </tr>
                            <tr>
                                <td>Sad</td>
                                <td>NaN</td>
                            </tr>
                        </tbody>
                    </table>
                    <p>Time Elapse: <span id="my_time">NaN</span></p>
                </div>
                <!--<textarea id="my_positions" class="input-lg center" readonly="readonly"></textarea>-->
                <input id="my_url" type="text" class="input-lg" />
                <a class="btn btn-info" href="javascript:void(take_snapshot())">Take Snapshot</a>
                <a class="btn btn-primary" href="javascript:void(smile_to_me())">Smile?</a>
            </div>
        </div>
    </div>

    <!-- JavaScript to handle Camera and Face Recognition -->
    <script language="JavaScript">
        Webcam.attach( '#my_camera' );

        function handle_ajax(data) {
            var result = data['result'];
            if (result) {
                var tbody = $('#my_emotion').children();
                for (var i=0; i<5; i++) {
                    tbody.eq(i).children('td').eq(0).html(result[1][i][0]);
                    tbody.eq(i).children('td').eq(1).html(result[1][i][1]);
                }
                $('#my_time').html(result[2]);
            }
        }


        function smile_to_me() {
            var image_url = $('#my_url').val();
            if (image_url == '') {
                // Get image data from #my_result
                var image_base64 = $('#my_result').children('img').attr('src').split(',')[1];
                // Push image data to http://12192.168.127.12:5000/classfy_url
                $.ajax({
                    url: "http://127.0.0.1:5000/classify_base64",
                    type: "POST",
                    data: {
                        base64: image_base64
                    },
                    success: handle_ajax
                });
            } else {
                $.ajax({
                    url: "http://127.0.0.1:5000/classify_url",
                    type: "GET",
                    data: {
                        imageurl: image_url
                    },
                    success: handle_ajax
                });
                $('#my_result').children('img').attr('src', image_url);
            }
        }
        
        function take_snapshot() {
            Webcam.snap( function(data_uri) {
                document.getElementById('my_result').innerHTML = '<img src="'+data_uri+'"/>';
            } );
        }

        var videoInput = document.getElementById('my_camera').children[1];
        videoInput.width = videoInput.offsetWidth;
        videoInput.height = videoInput.offsetHeight;
        var canvasInput = document.getElementById('my_canvas');
        var cc = canvasInput.getContext('2d');

        var ctracker = new clm.tracker();
        ctracker.init(pModel);
        ctracker.start(videoInput);

        function positionLoop() {
{'fraction_non_alphanumeric': 0.1477055449330784, 'fraction_numerical': 0.01959847036328872, 'mean_word_length': 1.1595788604459125, 'pattern_counts': {'":': 0, '<': 205, '<?xml version=': 0, '>': 203, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 6, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1424167', 'n_tokens_mistral': 3100, 'n_tokens_neox': 2847, 'n_words': 474}