{% extends "base.html" %}

{% load static %}

{% block title %}
    科研基地
{% endblock %}

{% block content %}
    <!-- 主体内容 -->
<div class="container-fluid" xmlns="http://www.w3.org/1999/html">
    <div class="row">
        <img class="img-responsive model-img" src="{% static 'img/service.jpg' %}">
    </div>
</div>

<div class="container">
    <div class="row row-3">
        <!-- 侧边导航栏 -->
        <div class="col-md-3">
            <div class="model-details-title">
                服务支持
            </div>
            <div class="model-list">
                <ul class="list-group">
                    <li class="list-group-item" id="download">
                        <a href="{% url 'serviceApp:download' %}">资料下载</a>
                    </li>
                    <li class="list-group-item  list-group-item-info" id="platform">
                        <a href="#">人脸识别开放平台</a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 说明文字和图片 -->
        <div class="col-md-9">
            <div class="model-details-title">
                人脸识别开放平台
            </div>
            <div class="model-details">
                <h3>人脸识别</h3>
                <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                    人脸检测
                </button>
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    &times;
                                </button>
                                <h4 class="modal-title" id="myModalLabel">
                                    在线人脸检测
                                </h4>
                            <div class="modal-body">
                                <img id="photoIn" src="/static/img/sample.png" class="img-responsive"
                                    style="max-width:250px">
                                <input type="file" id="photo" name="photo" />{% csrf_token %}
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                </button>
                                <button type="button" id="compute" class="btn btn-primary">
                                    开始检测
                                </button>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal -->
                </div>
            </div>
            </div>
        </div>
    </div>
</div>
<script>
        $('#photo').on('change', function () {
            var r = new FileReader();
            var f = document.getElementById('photo').files[0];
            r.readAsDataURL(f);
            r.onload = function () {
                document.getElementById('photoIn').src = this.result ;

            };
        });
</script>
<script>
    $(function () {
        $('#compute').click(function () {
            $.ajaxSetup({
                data:{csrfmiddlewaretoken:'{{ csrf_token }}'},
            });
            var formdata = new FormData();
            var file = $("#photo")[0].files[0];
            formdata.append("image", file);
            var csrf = $('input[name="csrfmiddlewaretoken"]').val();
            formdata.append("csrfmiddlewaretoken", csrf);
            $.ajax({
                url: '/serviceApp/facedetect_', // 调用Django服务器计算函数
                type: 'POST', // 请求类
                async: false,
                data: formdata,
                processData: false,
                contentType: false,
                success: function ShowResult(data) {
                    var v = data;
                    document.getElementById('photoIn').src = "data:image/jpeg;base64," + v;
                }, // 在请求成功之后调用该回调函数输出结果
                error: function (e){
                    console.log("error");
                }
            })
        })
    })
</script>
<script>

</script>
{% endblock %}