Ejemplos de programas destacados

Sitio web del sistema de asistencia de reconocimiento facial Python+Django

Si necesita instalar el entorno operativo o la depuración remota, consulte la tarjeta de presentación QQ personal en la parte inferior del artículo, ¡y el personal profesional y técnico lo ayudará de forma remota!

prefacio

Este blog escribe código para <<Python+Django Face Recognition Attendance System Website>>, el código es limpio, regular y fácil de leer. La primera opción para el aprendizaje y la recomendación de aplicaciones.

Directorio de artículos

1. Software de herramienta requerido

2. Usar pasos

1. Importar biblioteca

2. Implementación del código

3. Ejecución de resultados

3. Asistencia en línea

1. Software de herramienta requerido

1. Pitón，Pycharm

2. Django

2. Usar pasos

1. Importar biblioteca

<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,user-scalable=no" name="viewport">
<title>login</title>
<style type="text/css">

    #box4{
        background-color: #5ACCC9;
        width: 500px;
        height: 50px;
        margin:auto ;
        float: left;
        position:absolute;
        top: -290;
        left: 0;
        right: 0;
        bottom: 0;
        border-style:none;
        border-radius: 5px;

    }

    #box1{
        background-color: #8C7EF3;
        width: 500px;
        height: 300px;
        margin:auto ;
        float: inline;
        position:relative;
        top: 10px;
        left: 0;
        right: 0;
        bottom: 0;
        border-style:none;
        border-radius: 5px;

    }
    .p1{
        color: black;
        font-size: 20px;
        margin-left:20px;
        margin-top: 25px;
        font-family: microsoft yahei;
        font-weight: normal;
        text-align: left;
        line-height:23px;
        position: center;

    }

    #box2{
        background-color: #8C7EF3;
        width: 120px;
        height: 250px;
        margin-top:20px;
        margin-left:70px;
        float: left;
        text-align: center;
        position:static;
    }

    #box3{
        background-color: #8C7EF3;
        width: 230px;
        height: 250px;
        margin-top:20px;
        float: left;
        text-align: center;
        position:static;
    }


    #input0{
        width: 200px;
        height: 30px;
        margin-top:20px;
    }

    #input1{
        width: 100px;
        height: 50px;
        margin: 20px;
        font-family: microsoft yahei;
        font-weight: normal;
        font-size: 16px;
    }

    #input2{
        width: 130px;
        height: 50px;
        margin: 0px;
        font-family: microsoft yahei;
        font-weight: normal;
        font-size: 16px;
        float: left;
        border-width: 0px;
        border-radius: 3px;
    }

    #pgheader1{
        background: rgb(51,51,51);
        width: 100%;
        min-width: 960px;
        height: 35px;
        margin: 0px auto;
        width: 100%;
        position: relative;z-index:5;
        border-color: rgb(255, 255, 255);
        border-width: 0px;
        border-style: solid;
        }
    #pgheader2{
        padding-top: 10px;
        padding-right: 0px;
        display: inline-block;
        z-index: 1000;
        color: rgb(255,255,255);
        font-size:15px;

    }

</style>

</head>

2. Implementación del código

el código se muestra a continuación:

<body style="background-color: #5ACCC9;">
    <div class="rowright" >
        <a class="box" href="/accounts/logout/">注销</a>
        <a class="box" href="/accounts/login/">登录</a>
    </div>

    <div  style="width:100%;text-align: center;">
            <DIV ID="pgheader1";><a ID="pgheader2" >XXX管理网站</a></DIV>
            <div>
                <h1 style="font-family:'Microsoft YaHei';font-size:30px";>人脸识别考勤管理系统</h1>
            </div>
    </div>


    <div class="row">
        <div class="row">
            <!-- Add id to image -->
            <div class="box" style="background-color: #896bda;height:400px;">
                <img id="image" src="" alt="" width="300" height="300"/>
            </div>
            <!-- 按钮1 -->
<!--            <div class="box" >-->
<!--                <button type="button" onclick="show()" id="input1">打开视频窗口</button>-->
<!--            </div>-->
        </div>

        <div class="row">
            <div class="container">
                <!--修改文章 -->
                <form style="margin-top: 7.2px;width: 250px;height: 370px" action="" method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div align="center">
                        <div ><label>编号：</label><input type="text" name="idnumberWeb" ></div>
                        <div><label>英文名：</label><input type="text" name="nameWeb" ></div>
                        <div><label>中文名：</label><input type="text" name="chinese_nameWeb" ></div>
                    </div>

                    <select name="app" style="width:100px;height:43px;">
                        <option value="selectItem" style="text-align: center; ">选择功能</option>
                        <option value="gatherF" style="text-align: center; ">gatherF</option>
                    </select>
                    <input type="submit" value="&nbsp&nbsp录入人脸&nbsp&nbsp">
                </form>
                <!--修改文章结束 -->
            </div>


            <div>
                <div class="container" style="text-align: center; " >
                    <!--显示文章 -->
                    <form style="margin-top: 10px;width: 150px" action="" method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        <input type="text" name="itemWeb" hidden value="initM">
                        <input type="submit" value="初始化模型">
                    </form>
                    <!--显示文章结束 -->
                </div>

                <div class="container" style="text-align: center; " >
                    <!--显示文章 -->
                    <form style="margin-top: 10px;width: 150px" action="" method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        <input type="text" name="itemWeb" hidden value="stopM">
                        <input type="submit" value="&nbsp&nbsp停止模型&nbsp&nbsp">
                    </form>
                    <!--显示文章结束 -->
                </div>


                <div class="container" style="text-align: center;">
                    <!--显示文章 -->
                    <form style="margin-top: 10px;width: 150px;" action="" method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        <input type="text" name="idnumberCourseWeb" value="输入课程编号" style="width:120px;"><br>
                        <input type="text" name="itemWeb" hidden value="recognF">
                        <input type="submit"  value="&nbsp&nbsp识别人脸&nbsp&nbsp">
                    </form>
                    <!--显示文章结束 -->
                </div>


                <div class="container" style="text-align: center; ">
                    <!--显示文章 -->
                    <form style="margin-top: 10px;width: 150px" action="" method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        <input type="text" name="itemWeb" hidden value="trainF">
                        <input type="submit" value="&nbsp&nbsp训练人脸&nbsp&nbsp">
                    </form>
                    <!--显示文章结束 -->
                </div>
            </div>
        </div>




    </div>

    <div id="divT" style="background-color: #0d95e8;width: 835px;height: 100px;border-radius: 5px;margin: 20px auto;font-size: 36px;font-family: 'Microsoft YaHei'; display: flex;align-items: center;justify-content: center; "></div>


<!--    <div class="row">-->
<!--        <form action="" method="post" enctype="multipart/form-data" style="background-color: #86cfda;height:120px;width: 790px;display: flex;">-->
<!--            {% csrf_token %}-->
<!--            <div class="box" style="background-color: #896bda;height:100px;width: 900px;display: inline-block;">-->
<!--                <input type="text" name="checkCoursePlan" hidden value="checkCoursePlan">-->
<!--                <input type="text" id="showPlan"  style="height: 90px">-->
<!--            </div>-->
<!--            <div class="box"  style="width: 180px">-->
<!--                <input type="submit" value="查看课程计划" id="input1" style=";width:150px ">-->
<!--            </div>-->
<!--        </form>-->
<!--    </div>-->


<style>
  table {
    width: 100%;
    max-width: 830px;
    border-collapse: collapse;
  }
  th, td {
    padding: 0.5em 1em;
    text-align: center;
    border: 1px solid #ccc;
  }
  th {
    background-color: #eee;
    font-weight: bold;
    text-align: center;
  }
</style>

<div style="width: 100%; display: flex; justify-content: center;">
  <table style="margin: auto;">
    <thead>
      <tr>
        <th>课程编号</th>
        <th>名称</th>
        <th>教师姓名</th>
        <th>开始时间</th>
        <th>结束时间</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        {% for field in BookRoomT %}
            <tr>
                <td>{
    
    { field.id }}</a></td>
                <td>{
    
    { field.course }}</td>
                <td>{
    
    { field.chinese_name }}</td>
                <td>{
    
    { field.start_time }}</td>
                <td>{
    
    { field.close_time }}</td>
            </tr>
        {% endfor %}
      </tr>
    </tbody>
  </table>
</div>




{% if messages %}
<script>
    {% for msg in messages %}
        alert('{
    
    { msg.message }}');
    {% endfor %}
</script>
{% endif %}

<script type="text/javascript">
    var gatherT = "{
    
    {gatherT}}"
    const intervalId = setInterval(function() {
        console.log("gatherT:",gatherT)
        if (gatherT === "采集结束") {
            var image = document.getElementById("divT");
            divT.innerHTML = "采集结束";
            clearInterval(intervalId);
        }
    }, 1000);
</script>

<script type="text/javascript">
    var trainT = "{
    
    {trainT}}"
    const intervalId2 = setInterval(function() {
        console.log("trainT:",trainT)
        if (trainT === "训练结束") {
            var image = document.getElementById("divT");
            divT.innerHTML = "训练结束";
            clearInterval(intervalId2);
        }
    }, 1000);
</script>

<script type="text/javascript">
    var stringT2 = "{
    
    {stringT2}}"
    var chinese_name = "{
    
    {chinese_nameT}}"
    var idnumberNum = "{
    
    {idnumberNumT}}"
    const intervalId3 = setInterval(function() {

        console.log("stringT2:",stringT2)
        if (stringT2 === "识别成功") {
            var image = document.getElementById("divT");
            divT.innerHTML = "姓名:" + chinese_name + "编号:"+ idnumberNum + "  "+"识别成功";
            clearInterval(intervalId3);
        }
    }, 1000);
</script>

<!--<script>-->
<!--    var coursePlanT = "{
    
    {coursePlanT}}"-->
<!--    setInterval(function() {-->
<!--        // var stringT1 = "{
    
    {stringT1}}"-->
<!--        console.log("coursePlanT:",coursePlanT)-->
<!--        var showPlanT = document.getElementById("showPlan");-->
<!--        showPlanT.value +=coursePlanT;-->
<!--    }, 1000);-->
<!--</script>-->


</body>
</html>

3. Ejecución de resultados

3. Asistencia en línea:

Si necesita instalar el entorno operativo o la depuración remota, consulte la tarjeta de presentación QQ personal en la parte inferior del artículo, ¡y el personal profesional y técnico lo ayudará de forma remota!
1) Entorno de instalación y operación remota, depuración de código
2) Qt, C++, guía de entrada de Python
3) Embellecimiento de la interfaz
4) Producción de software