#DAYU200體驗官#丢失兒童尋找系統

丢失兒童尋找系統

項目背景

根據“團圓”系統資料顯示，兒童失蹤原因主要有被拐賣、離家出走、迷路走失、意外身亡等原因。走失事件往往容易轉變為拐賣等惡劣的刑事案件，有很多孩子，或者遇到了拐賣兒童的人販子，或者受到了意外傷害，最終給家庭帶來毀滅性災難。現在社會中層出不窮的騙入手段、騙子不斷更新的騙人技巧，不得不讓每一位孩子的家長擔心自己孩子的安危。根據《中國走失人口白皮書(2020)》，在整個2020年期間，我國走失人次達到了100萬。其中未成年人占7.4%，也就是說，兒童走失人口近74000人，而失蹤後找回來的大概隻占到0.1%。按照國務委員、公安部部長、國務院反拐部國際聯席會議總召集人趙克志，公安部黨委書記、分管日常工作的副部長王小洪部署要求，公安部決定自3月1日起至12月31日開展打擊拐賣婦女兒童犯罪專項行動。我們的産品應運而生，能夠幫助專項行動打出聲威、打出實效，切實維護婦女兒童合法權益。

團隊介紹

追尋者團隊于2021年6月在鄭州輕工業大學梅科爾工作室成立，緻力于尋找丢失兒童，使其阖家團圓。團隊成員之間優勢互補、配合默契，分别負責算法設計、前後端開發、App開發、硬體開發，在各自負責的領域發光發熱。在深度學習和機器視覺方面，本團隊成員具有濃厚的興趣和較為豐富的學習經驗，緻力于跨年齡人臉識别技術的學習和探索，将丢失兒童的識别和身份确認作為項目發展方向。身為大學生的我們将社會責任牢記心中，在努力提升自身知識儲備和能力的同時，為尋找丢失兒童事業竭盡心力。梅科爾工作室的老師和同學們在極為有限的條件下讓價值最大化，工作室在老齡化、老年人康複、特殊人群關愛等方向發展良好，總計參與到60餘個醫療項目的聯合創新開發中。

項目簡介

項目采用pytorch和華為開源自研AI架構MindSpore，可以根據警方或他人提供的圖檔判斷其是否為丢失兒童。同時還可以根據丢失兒童的時間長短，通過使用者上傳兒童的照片進行預估并生成當下的照片，更加便于家庭和警方尋找丢失兒童，幫助丢失兒童早日回歸家庭。

項目主要分為算法端、硬體端、鴻蒙App以及Vue前端，主要用到的軟體有pycharm、idea、anaconda等。

算法端分為跨年齡人臉識别算法和人臉變老預測算法。跨年齡人臉識别算法通過使用MTCNN（多任務卷積神經網絡）設計三層級聯架構的 CNN 算法進行檢測，提取出不受年齡幹擾的身份特征，以此達到跨年齡人臉識别。人臉變老預測算法以GAN 為基礎，并按照年齡、性别和語義分割對其進行标記，預測一個人在未來的樣貌，或者他在過去的樣貌。

網頁端是Vue前端，源代碼在gitee上開源，使用者可通過網站檢視上傳、搜尋以及檢視丢失兒童資訊，并且可以與我們進行聯系和回報。網頁端偏向資訊檢視等功能，更多的操作需要進一步在鴻蒙App進行使用。

移動端目前為鴻蒙App。鴻蒙App，相對于微信小程式來說，App可以離線進行部分功能操作，提高了産品的适應面。通過網絡連接配接将資訊存儲到伺服器中，以達到多端資訊互通。

技術架構

開發環境

DevEco Studio for OpenHarmony3.0.0.900

OpenHarmony版本：3.1_Release

開發闆：DAYU200

開發過程

首頁

hml源碼：

<element name='comp' src='../../components/tabbar/tabbar.hml'></element>
<div class="container">
    <div class="text">
        <text>丢失兒童尋找</text>
    </div>
    <div class="container1">
        <swiper autoplay="true" class="swiper">
            <image src="{{$item}}" for="{{imageList}}" class="img"></image>
        </swiper>
    </div>
    <div class="text1">
        <div class="line_y"></div>
        <text>今日推薦</text>
    </div>
    <image class="img1" src="../../common/images/a1.jpg"></image>
    <image class="img1" src="../../common/images/a3.jpg"></image>
    <comp index="0"></comp>
</div>

css源碼：

.container {
    flex-direction: column;
    align-items: center;
}
.text {
    display: flex;
    position: fixed;
    padding: 5px 250px 15px 251px;
    background-color: #000000;
}
.text text {
    margin-left: 75px;
    line-height: 50px;
    color: #FFFFFF;
    font-size: 24px;
    align-content: center;
}
.container1 {
    flex-direction: column;
    margin-top: 70px;
    width: 100%;
    display: flex;
    align-items: center;
}
.swiper {
    flex-direction: column;
    align-content: center;
    align-items: center;
    width: 100%;
    height: 270px;
    border: 1px solid #000000;
}
.img {
    object-fit: fill;
}
.text1 {
    margin-top: 6px;
    display: flex;
    align-items: center;
    position: relative;
    padding: 10px 10px 10px 12px;
}
.text1 text {
    margin-left: 10px;
    line-height: 30px;
    font-size: 25px;
    color: #656565;
}
.line_y {
    width: 4px;
    height: 60px;
    background-color: #09bb07;
}
.img1 {
    margin-top: 3px;
    object-fit: fill;
    height: 330px;
    border: 1px solid gray;
    padding: 1px;
}

js源碼：

export default {
    data: {
        title: "",
        imageList:['/common/images/2.jpg','/common/images/1.jpg','/common/images/3.jpg']
    },
    onInit() {
        this.title = this.$t('strings.world');
    },
    swipeToIndex(index) {
        this.$element('swiperImage').swipeTo({index: index});
    }
}

資訊上傳

hml源碼：

<element name='comp' src='../../components/tabbar/tabbar.hml'></element>
<div class="container">
    <div class="text">
        <text>丢失兒童尋找</text>
    </div>
    <text class="title">走失人員資訊</text>
    <div class="input-item">
        <div class="color">
            <text class="input-title">姓名</text>
            <input class="input" type="text" placeholder="請輸入文本"></input>
        </div>
    </div>
    <div class="input-item">
        <div class="color">
            <text class="length-title input-title">年齡</text>
            <input class="input" type="text" placeholder="請輸入走失時的年齡" maxlength="20" showcounter="false"></input>
        </div>
    </div>
    <div class="input-item">
        <div class="color">
            <text class="input-title">性别</text>
            <div class="radio-div">
                <select @change="changeFruit">
                    <option value="bananaValue">
                        男
                    </option>
                    <option value="appleValue" selected="true">
                        女
                    </option>
                </select>
            </div>
        </div>
    </div>
    <div class="input-item">
        <div class="color">
            <text class="input-title">走失日期</text>
            <input class="input" type="date" placeholder="如：2021-11-27"></input>
        </div>
    </div>
    <div class="container2">
        <text class="title2">您的詳細資訊</text>
        <div class="input-item">
            <div class="color">
                <text class="input-title">姓名</text>
                <input class="input" type="text" placeholder="請輸入文本"></input>
            </div>
        </div>

        <div class="input-item">
            <div class="color">
                <text class="input-title">性别</text>
                <div class="radio-div2">
                    <select @change="changeFruit">
                        <option value="bananaValue">
                            男
                        </option>
                        <option value="appleValue" selected="true">
                            女
                        </option>
                    </select>
                </div>
            </div>
        </div>
        <div class="input-item">
            <div class="color">
                <text class="input-title">走失人員與您的關系</text>
                <div class="checkbox-div">
                    <select @change="changeFruit">
                        <option value="bananaValue">
                            父子
                        </option>
                        <option value="appleValue" selected="true">
                            母子
                        </option>
                        <option value="pearValue">
                            父女
                        </option>
                        <option value="pearValue2">
                            母女
                        </option>
                    </select>
                </div>
            </div>
        </div>

        <div class="input-item">
            <div class="color">
                <text class="input-title">是否報警</text>
                <switch showtext="true" texton="是" textoff="否" checked="true" @change="switchChange">
                </switch>
            </div>
        </div>

        <div class="input-item">
            <div class="color">
                <text class="input-title">您的郵箱</text>
                <input class="input" type="email" placeholder="友善我們聯系您"></input>
            </div>
        </div>

        <div class="input-item">
            <div class="color">
                <text class="message-title input-title">請輸入手機号</text>
                <input class="message-input" type="number" placeholder="請輸入手機号碼"></input>
            </div>
        </div>


        <div class="color">
            <input class="message-input" type="number" placeholder="請輸入驗證碼"></input>
            <input class="message-button" type="button" value="擷取驗證碼"></input>
        </div>


    </div>

    <div class="input-item">
        <div class="color">
            <image class="img" src="../../common/images/camera.png"></image>
            <button class="message-button" type="capsule" value="上傳圖檔" @click="jump"></button>

        </div>
    </div>
    <div class="input-item">
        <input class="confirm-button" type="button" value="确認"></input>
        <div class="text2">緻力于幫助丢失兒童家庭尋找丢失兒童，讓寶貝早日回家</div>
        <button class="message-button" type="capsule" value="送出" @click="jump2"></button>
    </div>

    <comp index="1"></comp>

</div>

css源碼：

.container {
    width: 100%;
    flex-direction: column;
    padding: 0 0 5% 0;
    background-color: #F7F8FA;
}
.container2{
    width: 100%;
    flex-direction: column;
    padding: 0 0 5% 0;
    background-color: #F7F8FA;
}
.radio{
    font-size: 24px;
}
.title {
    color: #6D7278;
    font-size: 24px;
    font-family: HarmonyHeiTi;
    margin: 80px 0 10px 14px;
}
.title2 {
    color: #6D7278;
    font-size: 24px;
    font-family: HarmonyHeiTi;
    margin: 20px 0 10px 14px;
}
.color {
    margin: 0 4% 0 4% ;
    width: 92%;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.title,.input-title,.message-title,.length-title {
    width: 32%;
}
.input-item {
    width: 100%;
}
.input-title {
    color: #121317;
    font-family: HarmonyHeiTi;
}
.input {
    width: 70%;
}
.message-input {
    width: 45%;
}
.message-button {
    font-size: 15px;
    width: 31%;
    height: 30px;
    border-radius: 5px;
    margin-top: 5px;
}
.checkbox-div,.radio-div,.radio-div2 {
    padding: 0 38px 0 2px;
    font-size: 20px;
}
.search-item {
    border-radius: 25px;
    margin:6px 4% 6px 4%;
}
.search {
    width: 80%;
    height: 33px;
}
.button {
    width: 88px;
    height: 27px;
    margin: 4px 4px 4px 0;
}
.search,.message-input,.input,.input-title {
    font-size: 20px;
}
.input-item,.input,.message-input {
    background-color: white;
}
.input,.message-input,.search {
    placeholder-color: rgba(0,0,0,0.1);
}
.message-button,.button {
    background-color: #317AFF;
    font-size: 20px;
}
.search,.search-item {
    background-color: #F1F3F5;
}
.checkbox {
    color: #317AFF;
}
.confirm-button{
    margin-top: 20%;
    margin-left: 30% ;
    width: 60%;
    background-color: #317AFF;
    font-size: 20px;

}
.message-button{
    margin-left: 10% ;
}
switch{
    texton-color:#002aff;
    textoff-color:silver;
    text-padding:15px;
}
.img{
    width: 20%;
    margin-top: 5px;
    margin-left: 20px;
}
.text2 {
    margin-top: 70px;
    display: flex;
    align-items: center;
    position: relative;
    padding: 40px 10px 10px 12px;

}
.text2 text {
    font-size: 20px;
    color: #000000;
}

.text {
    display: flex;
    position: fixed;
    padding: 5px 250px 15px 251px;
    background-color: #000000;
}
.text text {
    margin-left: 75px;
    line-height: 50px;
    color: #FFFFFF;
    font-size: 24px;
    align-content: center;
}

js源碼：

import router from '@system.router';
export default {
    data: {
        title: ""
    },
    onInit() {
        this.title = this.$t('strings.world');
    }，
    jump(){
        router.push({
            uri: 'pages/takePhoto/index',
        });

    },
    jump2(){
        router.push({
            uri: 'pages/submit/index',
        });

    }
}

關于我們

hml源碼：

<element name='comp' src='../../components/tabbar/tabbar.hml'></element>
<div class="container">
    <div class="text">
        <text>丢失兒童尋找</text>
    </div>
    <image class="img" src="../../common/images/gy1.jpg"></image>
    <div class="text1">
        <div class="line_y"></div>
        <text>團隊介紹</text>
    </div>
    <div class="text2">
        <text>緻力于幫助丢失兒童家庭尋找丢失兒童，讓寶貝早日回家。

統一服務電話：

                 400-0000-000</text>
    </div>
    <button class="button" value="點選撥打客服電話" onclick="calling"></button>
    <comp index="3"></comp>
</div>

css源碼：

.container {
    flex-direction: column;
    align-items: center;
}
.text {
    display: flex;
    position: fixed;
    padding: 5px 259px 15px 260px;
    background-color: #000000;
}
.text text {
    margin-left: 75px;
    line-height: 50px;
    color: #FFFFFF;
    font-size: 21px;
}
.img {
    margin-top: 71px;
}
.text1 {
    height: 60px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    position: relative;
    padding: 10px 10px 10px 12px;
    background-color: #ccc;
}
.text1 text {
    margin-left: 10px;
    line-height: 30px;
    font-size: 25px;
    color: #656565;
}
.line_y {
    width: 4px;
    height: 35px;
    background-color: #09bb07;
}
.text2 {
    display: flex;
    align-items: center;
    position: relative;
    padding: 40px 10px 10px 12px;
}
.text2 text {
    font-size: 21px;
    color: #656565;
}
.button {
    margin-top: 20px;
    border-radius: 7px;
    margin-bottom: 150px;
    width: 100%;
    height: 55px;
    border: 1px solid #ccc;
    background-color: #FFFFFF;
    text-color: #1C1C1C;
    font-size: 25px;
}

js源碼：

export default {
    data: {
        title: ""
    },
    onInit() {
        this.title = this.$t('strings.world');
    }
}

導航欄

export default [
    {
        img:'common/images/icon1.png',
        simg:'common/images/icon2.png',
        name:'首頁'
    },
    {
        img:'common/images/upload.png',
        simg:'common/images/upload-1.png',
        name:'資訊上傳'
    },
    {
        img:'common/images/icon3.png',
        simg:'common/images/icon4.png',
        name:'更多功能'
    },
    {
        img:'common/images/us.png',
        simg:'common/images/us-1.png',
        name:'關于我們'
    },
]

示範視訊

目前項目基本架構已經實作，還有部分功能在完善中，近期會繼續更新文檔。

附件連結：https://ost.51cto.com/resource/2170

#DAYU200體驗官#丢失兒童尋找系統

丢失兒童尋找系統

項目背景

團隊介紹

項目簡介

技術架構

開發環境

開發過程

首頁

資訊上傳

更多功能

關于我們

導航欄

繼續閱讀

[OpenHarmony] [RK2206] 建構OpenHarmony編譯器 (二)

#DAYU200# OpenHarmony跳轉撥号界面

#打卡不停更#OpenHarmony資料轉碼應用開發實戰（上）背景需求設計建立項目頁面布局規劃UI界面編碼實作總結

賦能千行百業數字化轉型，OpenHarmony生态新成果即将亮相HDC2022

基于OpenHarmony标準接口的檔案讀寫實作案例

前行不綴未來可期，鴻蒙生态發展邁入全新階段

哔哩哔哩已經開始開發鴻蒙版本了目前第一版V0.1.0Beta采用eTS語言，基于OpenHarmonyApi9開發支援功

#DAYU200體驗官# OpenHarmony3.1 Release 編譯

#沖刺創作新星# #跟着小白一起學鴻蒙# [十二]簡單Http用戶端

我把分布式音樂播放器适配了Stage模型

想開發DAYU200，我教你

在DAYU200上實作OpenHarmony視訊播放器

OpenHarmony移植案例： build lite源碼分析之hb指令entry.py

共築使能千行百業的數字底座 | HDC 2022松湖對話順利召開

OpenHarmony社群營運報告（2022年10月）

開源鴻蒙OpenHarmony 4.0 Beta2釋出，方舟架構ArkUI-X首發