51CTO首页
AI.x社区
博客
学堂
精品班
软考社区
免费课
企业培训
鸿蒙开发者社区
WOT技术大会
IT证书
公众号矩阵
移动端
短视频免费课程课程排行直播课软考学堂
全部课程厂商认证IT技术24年11月软考PMP项目管理免费题库
在线学习
文章资源问答课堂专栏直播
51CTO
鸿蒙开发者社区
51CTO技术栈
51CTO官微
51CTO学堂
51CTO博客
CTO训练营
鸿蒙开发者社区订阅号
51CTO软考
51CTO学堂APP
51CTO学堂企业版APP
鸿蒙开发者社区视频号
51CTO软考题库
账号设置 退出

基于鸿蒙的恶性皮肤肿瘤检测系统

作者：学习中的爬虫
系统 OpenHarmony
本项目采用MaskRCNN算法，在ModelArts平台对皮肤病图像训练，将训练好的模型部署到华为云ECS服务器中。

​​想了解更多关于开源的内容，请访问：​​

​​51CTO 开源基础软件社区​​

​​https://ost.51cto.com​​

项目背景

恶性皮肤肿瘤，是一种起源于表皮基底细胞或毛囊外根鞘的低度恶性肿瘤。临床有两种类型，即基底细胞癌、鳞状细胞癌，均来源于角化细胞。常见的恶性皮肤肿瘤有Bowen病、Paget病、基底细胞癌、鳞状细胞癌、恶性黑素瘤等。恶性皮肤肿瘤大部分生长于原发部位，但也有转移和不明方向的肿瘤发生。恶性皮肤肿瘤的发生率和死亡率逐年升高，通常诊断出患有恶性皮肤肿瘤的患者年龄在65-74岁，恶性皮肤肿瘤造成患者死亡的高发年龄为75-84岁。

恶性皮肤肿瘤多发生于皮肤，也可见于黏膜和内脏，如果在患病初期就进行治疗，那么5年之内的存活率可以显著提高7倍。目前医院临床主要依靠皮肤镜或者病理组织切片来确诊恶性皮肤肿瘤。但这种方式存在一定的问题，比如皮肤镜中图像对比度低，肉眼难以区分；人工检查费时费力；专家数量不足，偏远地区医患比达1:70000等。

团队介绍

识瘤者团队是一家专注于恶性皮肤肿瘤识别技术研发的在校创新创业团队，旨在利用我们的设备帮助患者更早的发现病情，为国家的基础医疗做出自己的贡献。

识瘤者团队来自于梅科尔工作室，目前梅科尔工作室已经形成了一个跨多专业深入融合的平台，研究方向覆盖医疗器械、五轴数 控机床装备研发、3D打印、软体机器人、人工智能、机器人、大数据、物联网、新能源等多个领域，目前有10个研发小组和上百个在研项目。并且工作室还多次承担国家级大学生创新创业项目，参加各个级别比赛，至今获得国际奖项27项、国家级奖项158项、省级奖项412项。

#DAYU200体验官#基于鸿蒙的恶性皮肤肿瘤检测系统-开源基础软件社区

应用场景

面向客户分为大三类：医院及医保公司、医疗软件服务商、个人用户。

  1. 针对医院及医保公司提供两种解决方案，一是由Qt应用程序主导的S款售卖模式，二是由DAYU200开发板主导H款售卖模式。两者都使用皮肤镜采集图像，图像展示在设备界面，在端侧对图片进行预处理，调用部署到ESC的模型识别病灶区域，将数据归档至数据库和OBS对象存储服务中，持久化存储。
  2. 针对医疗软件服务商提供API，识瘤者将恶性皮肤肿瘤图像噪声消除、纹理特征提取分割能力作为后端服务，供客户调用模型进行二次开发；
  3. 针对个人用户提供鸿蒙APP自测、查看历史诊疗记录等功能。
    本项目采用MaskRCNN算法，在ModelArts平台对皮肤病图像训练，将训练好的模型部署到华为云ECS服务器中。

设计思路

本检测系统首先采集病灶区域图像信息，随后对图像进行预处理，即去毛和滤波等处理，接着采用对比度调整、移动裁剪和颜色平衡调整等方法进行数据增强，随后进行模型的训练、封装，模型部署后，通过采集患者的信息，可以检测相应的图片及反馈相应的分级检测结果，如图所示：

#DAYU200体验官#基于鸿蒙的恶性皮肤肿瘤检测系统-开源基础软件社区

在DAYU200开发板上，也有较好的表现力：

登录界面

hml源码

<div class="container">
    <image src="../../common/image_st/logo.png" class="image-mode" ></image>
    <div class="content">
        <input id="id" class="input" type="number" value="{{id}}" maxlength="20" enterkeytype="next"
               placeholder="手机号/邮箱/账号" onchange="idChange" >
        </input>
        <input id="password" class="input" type="password" value="{{password}}" maxlength="20" enterkeytype="done"
                placeholder="请输入密码" onchange="pswChange">
        </input>
    <!--        <div>-->
    <!--            <button class="button" type="capsule" value="登录" onclick="login"></button>-->
    <!--            <button class="button" type="capsule" value="注册" onclick="register"></button>-->
    <!--        </div>-->
        <div class="div_button">
            <div class="login_button"  onclick="login">
                <text class="div_login_button_text">
                    登录
                </text>
            </div>
            <div class="register_button" onclick="register">
                <text class="div_register_button_text">
                    注册账号
                </text>
            </div>
        </div>
    </div>
    <div class="problem_privacy">
        <button class="problem" type="text" value="帮助"
                @click="clickfun('help')"></button>
        <button class="privacy" type="text" value="隐私声明"
                @click="clickfun('privacy statement')"></button>
    </div>
</div>

CSS源码

.container {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.image-mode{
    margin-top: 100px;
    margin-bottom: 30px;
    width: 80%;
/*    object-fit: cover;*/
    height: 190px;
}
.title {
    margin-top: 10px;
    font-size: 30px;
    color: #1216D8;
}
/* 输入框 */
.content {
    margin-left: 10%;
    margin-right: 10%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.input {
    placeholder-color: gray;
    margin-top: 20px;
    justify-content: center;
    align-items: center;
}
/* 对class#EB0F54n"的组件设置样式 */
.button {
    width: 100px;
    height: 50px;
    background-color: #4c5cf1;
    font-size: 20px;
    text-color: #FFFFFF;
    margin: 20px;
    margin-top: 10px;
}
.problem_privacy {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 30%;
}
.div_button {
/*    width: 90%;*/
    flex-direction: column;  /* 按照列排 */
    align-items: center;  /* 在X轴方向上居中 */
    top:50px;
}
.div_login_button_text {
    left: 250px;
    top: 25px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 40px;
    font-weight: normal;
    color: #FFFFFF;
}
.div_register_button_text {
    left: 210px;
    top: 25px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 40px;
    font-weight: normal;
    color: #5868E8;
}
/* 对class#EB0F54n"的组件设置样式 */
.login_button {
    border-radius: 50px;
    width: 100%;
    height: 100px;
    background-color: #5868E8;
    margin-bottom: 16px;
}
/* 对class#EB0F54n"的组件设置样式 */
.register_button {
    border-radius: 50px;
    width: 100%;
    height: 100px;
    background-color: #e0dad4;
}

js源码

import router from '@system.router';
export default {
    login() {
        router.push ({
            uri:'pages/first/first', // 跳转到注册页面
        })
    },
    register(){
      router.push({
          uri:'pages/register/register',
      })
    },
    data: {
        title: "",
    },
}

注册界面

hml源码

<div class="container">
    <image src="../../common/image_st/logo.png" class="image-mode" ></image>
<!-- 手机号和密码 -->
    <div class ="input-container">
        <input class="input-text" type="number" placeholder="请输入手机号" onchange="getPhone"></input>
    </div>
    <div class ="input-container">
        <input class="input-text" type="password" placeholder="请输入密码" onchange="getPsw"></input>
    </div>
    <div class ="input-container">
        <input class="input-text" type="text" placeholder="请输入姓名" onchange="getName"></input>
    </div>
    <div class ="input-container">
        <input class="input-text" type="number" placeholder="请输入身份证号" onchange="getIdNumber"></input>
    </div>
<!--    <div class ="input-container">-->
<!--        <input class="input-text" type="number" placeholder="短信验证码" onchange="getName"></input>-->
<!--        <button type="capsule" value="获取验证码" class="idbtn">-->
<!--        </button>-->
<!--    </div>-->
<!-- gender -->
    <div class ="item-container1">
        <text class="item-title">性别</text>
        <div>
            <label target="radio1" style="font-size: 40px;">男:</label>
            <input id="radio1" type="radio" name="radio" value="male" onchange="getMaleGender" checked="true"></input>
            <label target="radio2" style="font-size: 40px;">女:</label>
            <input id="radio2" type="radio" name="radio" value="female" onchange="getFemaleGender"></input>
        </div>
    </div>
<!-- 生日 -->
    <div class="item-container2">
        <text class="item-title">生日</text>
        <div class="item-content">
            <picker type="date" end="2021-10-01" selected="1990-01-01" value="{{date}}" onchange="getDate"></picker>
        </div>
    </div>
<!-- area -->
    <div class ="item-container3">
        <text class="item-title">地区</text>
        <select class="select" onchange="getArea">
            <option value="亚洲" selected="true">亚洲</option>
            <option value="欧洲">欧洲</option>
            <option value="美洲">美洲</option>
            <option value="非洲">非洲</option>
            <option value="大洋洲">大洋洲</option>
        </select>
    </div>
    <div class="content1_1">
        <div class="button" onclick="onRegister">
            <text class="button_text">注册</text>
        </div>
        <div class="button" onclick="last">
            <text class="button_text">返回</text>
        </div>
    </div>
    <dialog class="sureDialog" id="hintDialog">
        <div class="dialog-div">
            <text class="text">确定注册?</text>
            <div class="dialog-div">
                <button type="text" value="确定" onclick="sethintDialog" class="btn-txt"></button>
            </div>
        </div>
    </dialog>
</div>

CSS源码

@import "../../common/css/common.css";
.container {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.page-title-wrap {
    padding-top: 30px;
    justify-content: center;
}
.image-mode{
    margin-end: 50px;
    margin-top: 50px;
    margin-bottom: 30px;
    width: 80%;
    object-fit: cover;
}
.input-container{
    justify-content: center;
    margin-bottom: 30px;
}
.input-text {
    placeholder-color: gray;
    margin-left: 30px;
    margin-right: 30px;
    height: 100px;
}
.idbtn{
    width: 200fp;
    margin-right: 30px;
    font-size: 15px;
    background-color: #2d6dea;
}
.item-container {
    margin-left: 30px;
    margin-bottom: 20px;
}
.item-container1 {
    margin-left: -130px;
    margin-bottom: 20px;
}
.item-container2 {
    margin-left: -160px;
    margin-bottom: 20px;
}
.item-container3 {
    margin-left: -190px;
    margin-bottom: 20px;
}
.item-title {
    font-size: 40px;
    padding-left: 30px;
    padding-right: 20px;
    color: #aaaaaa;
    text-align: left;
}
.item-content {
    width: 300px;
    height: 60px;
    border-radius: 30px;
    background-color: aliceblue;
    justify-content: center;
    text-align: left;
}
.select{
    text-align: left;
}
.content1_1 {
    margin-top: 10px;
    justify-content: center;
    align-items: center;
}
/* 对class#EB0F54n"的组件设置样式 */
.button {
    width: 200px;
    height: 100px;
    background-color: #5768e4;
    font-size: 20px;
    text-color: #FFFFFF;
    margin: 10px;
    border-radius: 50px;
}
.button_text {
    left: 60px;
    top: 27px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 40px;
    font-weight: normal;
    color: #FFFFFF;
}
.sureDialog{
    height: 30%;
    width: 80%;
    align-content: center;
}
.dialog-div{
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
    margin-bottom: 20px;
}

js源码

import storage from '@system.storage';
import prompt from '@system.prompt'
import router from '@system.router'
import http from '@ohos.net.http'
export default {
    data: {
        phone: '',
        psw: '',
        name: '',
        idNumber: '',
        date: '1990-01-01',
        gender: 'male',
        area: '亚洲',
    },
    getPhone(e) {
        this.phone = e.value;
        console.info("phone=" + this.phone)
    },
    getPsw(e){
        this.psw = e.value;
    },
    getName(e){
        this.name = e.value;
    },
    getIdNumber(e){
        this.idNumber = e.value;
    },
    getDate(e) {
        this.date = e.year + '-' + (e.month + 1) + '-' + e.day;
        console.info("date=" + this.date)
    },
    getFemaleGender(e) {
        if (e.checked) {
            this.gender = 'female'
        }
    },
    getMaleGender(e) {
        if (e.checked) {
            this.gender = 'male'
        }
    },
    getArea(e) {
        this.area = e.newValue;
        console.info("area=" + this.area)
    },
    onRegister() {
        const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
        if(!reg.test(this.phone)){
            prompt.showToast({  // 提示请求错误
                message: '手机号非法',
                duration: 3000,
            })
            return;
        }
        if (this.psw.length < 6) {
            prompt.showToast({
                message: this.$t('密码至少为6位')
            })
            return;
        }
        if (this.name.length == 0) {
            prompt.showToast({
                message: this.$t('姓名不能为空')
            })
            return;
        }
        if (this.date.length == 0) {
            prompt.showToast({
                message: this.$t('日期不能为空')
            })
            return;
        }
        let _IDRe18 = /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
        let _IDRe15 =  /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/

        if(!_IDRe18.test(this.idNumber) && !_IDRe15.test(this.idNumber)){
            prompt.showToast({  // 提示请求错误
                message: '身份证号非法'+this.idNumber,
                duration: 3000,
            })
            return;
        }
        this.$element('hintDialog').show()
    },
    sethintDialog(e) {
        this.$element('hintDialog').close()
        // let声明的变量的作用域是块或者子块
        let httpRequest = http.createHttp();
        // 创建一个http，里面包括发起请求、中断请求、订阅/取消订阅HTTP Response Header 事件。
        // 每一个HttpRequest对象对应一个Http请求。如需发起多个Http请求，须为每个Http请求创建对应HttpRequest对象。
        //返回一个HttpRequest对象，里面包括request、destroy、on和off方法。
        let url = "http://124.70.109.103:8000/userRegister/";
        httpRequest.request(url, {
            // 注意请求方法：http.POST
            method: 'POST',
            extraData: {
                phone: this.phone,
                password: this.psw,
                name: this.name,
                gender: this.gender,
                date: this.date,
                idNumber: this.idNumber,
            },
        }, (err, data)=> {  // 判断是否请求成功
            if (!err) {  // 请求成功
                this.returnContent = JSON.parse(data.result);  //JSON.parse(字符串)——将字符串转换成json数据格式
                var code = this.returnContent.code;  //使用json将province赋值给code
                if(code==400){
                    prompt.showToast({  // 提示请求错误
                        message: this.returnContent.errmsg,
                        duration: 3000,
                    })
                }
                if(code==200){
                    storage.set({
                        key: 'id',
                        value: this.phone,
                    });
                    storage.set({
                        key: 'psw',
                        value: this.psw,
                    });
                    router.push ({
                        uri:'pages/index/index',  //跳转到指定页面
                    })
                    prompt.showToast({  // 提示信息
                        message: this.returnContent.message,
                        duration: 3000,
                    })
                }
            } else {  // 请求失败
                prompt.showToast({
                    message: data.result,
                    duration: 3000,
                });
            }
        })
    },
    last() {
        router.push({
            uri:'pages/login/login', // 指定要跳转的页面
        })
    },
    //    // 生日选择器
    //    chooseBirthday(e) {
    //        let month = (e.month + 1) + "";
    //        if (month.length == 1) {
    //            month = "0" + month;
    //        }
    //        let day = e.day + "";
    //        if (day.length == 1) {
    //  tex          day = "0" + day;
    //        }
    //        let birthday = e.year + "-" + month + "-" + day;
    //        this.birthday = birthday;
    //        this.birthdayVal = birthday;
    //    },
}

首页界面

#DAYU200体验官#基于鸿蒙的恶性皮肤肿瘤检测系统-开源基础软件社区

hml源码

<!--<element name='comp' src='../../pages/nav/nav.hml'></element>-->
<element name="slz-tabber" src="../../common/components/tabber/tabber.hml"></element>
<div id="wrapper">
    <div class="input1">/*搜索服务*/
        <search hint="智慧医疗" searchbutton="搜索" @search="search"></search>
    </div>
    <div class="containerC">/*提示服务*/
        <swiper id="swiperImage" class="swiper-style">
            <image src="{{$item}}" class="image-mode" for="{{imageList}}"></image>/*轮播图*/
        </swiper>
    </div>
    <div class="container">
        <text class="title">点击了解相关信息</text>
        <list class="list">
            <list-item class="listItem" onclick="text1">
                <div>
                    <image src="../../common/images/1.png" class="tp"></image>
                    <div class="text1">
                        <text class="text2" >什么是黑色素瘤</text>
                        <text class="text3">具体展开谈论</text>
                    </div>
                </div>
            </list-item>
            <list-item class="listItem" onclick="text2">
                <div>
                    <image src="../../common/images/2.png" class="tp"></image>
                    <div class="text1">
                        <text class="text2" >黑色素瘤早知道</text>
                        <text class="text3">早发现，早就诊</text>
                    </div>
                </div>
            </list-item>
            <list-item class="listItem" onclick="text3">
                <div>
                    <image src="../../common/images/3.png" class="tp"></image>
                    <div class="text1">
                        <text class="text2" >黑色素瘤耐受性</text>
                        <text class="text3">耐受性发生的新机制</text>
                    </div>
                </div>
            </list-item>
            <list-item class="listItem" onclick="text4">
                <div>
                    <image src="../../common/images/4.png" class="tp"></image>
                    <div class="text1">
                        <text class="text2" >黑色素瘤的免疫治疗</text>
                        <text class="text3">黑色素瘤患者指南</text>
                    </div>
                </div>
            </list-item>
        </list>
    </div>
    <slz-tabber index="0"></slz-tabber>
</div>

CSS源码

#wrapper {
    flex-direction: column;
}
#div7 {
    width: 100%;
    height: 50px;
    background-color: #bb96f3;
}
.input1{
    margin-top: 30%;
    width: 90%;
    height: 100px;
    margin-left: 5%;
}
.containerC{
    width: 90%;
    height: 200fp;
    margin-left: 5%;
}
.swiper-style {
    indicator-color: #8388f8;/*轮播图*/
    indicator-selected-color: #9ebbde;
    indicator-size: 5px;
    margin-top: 15px;
}
.image-mode{
    object-fit: contain;
}
.remin{
    width: 90%;
    margin-left: 7%;
    margin-top: 2%;
    border-color: black;
    border-width: 2px;
}
.ld{
    top: 7px;
    width: 40px;
    height: 40px;
}
.ts{
    width:80%;
    text-align: center;
}
.introduce{
    font-size: 25px;
    font-family: HYQiHei-65S;
    margin-top: 3px;
    padding: 0px;
}
.tp{
    width: 200px;
    height: 150px;
    border-radius: 5px 5px 5px 5px;
    box-shadow:  1px 1px 1px 1px #d6d6d6;
    margin-right: 10px;
}
.container {
    flex-direction: column;
    width: 100%;
}
.title{
    height: 50px;
    font-size: 25px;
    color: grey;
    margin-top: 0px;
    margin-left: 30px;
}
.text1{
    flex-direction: column;
    margin-left: 12px;
    width: 70%;
    text-align: left;
}
.text2{
    font-size: 23fp;
    display: grid;
}
.text3{
    font-size: 20fp;
    font-weight:500;
    color: darkgrey;
    width:237px;
    display: grid;
}
.list{
    width: 96%;
    margin-left: 5%;
/*    height: 1000px;*/
/*    columns: 1;*/
}
.listItem{
    width: 100%;
    height: 200px;
    border-bottom: 1px solid #DEDEDE;
    align-items: center;
    font-size: 20px;
}

js源码

import router from '@system.router';
export default {
    launch() {
        router.push ({
            uri1:'pages/page2/page2', // 指定要跳转的页面
        })
    },
    by() {
        router.push ({
            uri:'pages/page1/page1', // 跳转到注册页面
        })
    },
    text1() {
        router.push ({
            uri:'pages/text1/text1', // 跳转到注册页面
        })
    },
    text2() {
        router.push ({
            uri:'pages/text2/text2', // 跳转到注册页面
        })
    },
    text3() {
        router.push ({
            uri:'pages/text3/text3', // 跳转到注册页面
        })
    },
    text4() {
        router.push ({
            uri:'pages/text4/text4', // 跳转到注册页面
        })
    },
    data: {
        title: "",
        fresh:false,
        //        descriptionFirstParagraph:'右上方进行拍照识别，分级诊疗。\n下方是一下关于黑色素瘤的知识。',
        //不能大写
        //轮播图片
        imageList: ['/common/images/p11.png', '/common/images/p12.png', '/common/images/p13.png', '/common/images/p14.png', '/common/images/p15.png'],
        scrollAmount: 5,
        loop: -1,
        marqueeDir: 'left',
        //        marqueeCustomData: '右上方进行拍照识别，进行分级诊疗。\n下方是一下关于黑色素瘤的知识。',
        //将["","","","",""...]结构的数据转化为[["","",""],["",""],["","",""]...]结构
        //       ["one","two"],
        datas:[
            ["three","four","five"],
            ["six","seven"],
            ["eight","nine","ten"]]
    },
    //输入框内容改变时执行
    searchChange(e){
        //将输入框中的值赋给变量 id
        this.id = e.value;
    },
    closeSecond(e) {
        this.second = false;
    }
}

科普文章

#DAYU200体验官#基于鸿蒙的恶性皮肤肿瘤检测系统-开源基础软件社区

#DAYU200体验官#基于鸿蒙的恶性皮肤肿瘤检测系统-开源基础软件社区

部分代码

hml源码

<div id="wrapper">
    <div id="div1">
        <image id="image0" src="../../common/images/8.png" onclick="back"></image>
    </div>
    <text id="text1">什么是黑色素瘤？</text>
    <div class="author">
        <text id="text3">黄园清</text>
        <text id="text4">2022-03-07-19：56</text>
    </div>
    <text id="text5">
        我们在之前的栏目中，介绍过皮肤癌的相关信息，今天，我们来具体展开谈论一下，皮肤癌中恶性程度很高的一个种类——黑色素瘤。
        黑色素瘤，又称恶性黑色素瘤，是一种从黑色素细胞发展而来的癌症，是皮肤癌中罕见的癌症。好发于皮肤但也可能出现在口腔、肠道或眼睛中。女性患者的黑色素瘤最常出现在腿，而男性患者则最常出现在背部。有时黑色素瘤是由痣转变发展而来，有这种转变的痣外观上的改变包括尺寸变大、边缘变得不规则、颜色改变、发痒、或皮肤破坏。</text>
    <image id="image3" src="../../common/images/7.png"></image>
    <div id="div3">
        <text id="text2">对于肤色较浅的人而言，紫外线暴露是造成黑色素瘤的主因。太阳或日晒床都是可能的紫外线来源。大约有25%的黑色素瘤是从痣发展而来。有很多痣、家中曾有人得过黑色素瘤，以及免疫力低下的人，罹患黑色素瘤的风险都较高。一些罕见的基因缺陷，例如着色性干皮症，也会增加罹患的风险。诊断方法是对可疑的皮肤病变部位进行切片检查。
            避免紫外线暴露以及使用防晒油可以预防黑色素瘤的产生。治疗方法通常是手术切除。对于黑色素瘤较大的病患，会检测邻近的淋巴结来判断是否发生转移。若没有转移的话大部分的病患可被治愈。对于黑色素瘤已发生转移的病患，免疫疗法、生物性治疗、放射线治疗或化学治疗可能可以增加存活率在美国，病患在接受治疗后，若只有局部病变五年存活率为98%，若已发生转移，五年存活率则为17%。复发或转移的可能性取决于该黑色素瘤厚度、细胞分裂速度、以及覆盖其上的皮肤是否被破坏，近年发展的免疫疗法对于该病症颇有效果，能够提高治愈率。</text>
    </div>
    <image id="image1" src="../../common/images/11.png"></image>
</div>

CSS源码

#wrapper {
    flex-direction: column;
    margin-left: 3%;
    margin-right: 3%;
    height: 3200px;
}
#div1 {
    width: 100px;
    height: 100px;
}
#image0 {
    width: 90px;
    height: 90px;
    top: 10px;
    right: -10px;
}
#image2 {
    height: 40px;
    top: 15px;
    right: -250px;
}
#text1 {
    font-size: 25fp;
    margin-bottom: 10px;
}
.author {
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10px;
}
#text3 {
    font-size: 40px;
    color: rgba(0,0,0,0.56);
    margin-right: 50px;
}
#text4 {
    font-size: 20px;
    color: rgba(0,0,0,0.56);
}
#text5 {
    font-size: 40px;
}
#image3 {
    width: 95%;
    height: 400px;
/*    top: -150px;*/
}
#div3 {
    height: 1300px;
}
#text2 {
/*    width: 335.518308406395px;*/
/*    height: 996.6529138731304px;*/
/*    top: -150px;*/
    right: -10px;
    font-size: 40px;
}
#image1 {
/*    width: 350px;*/
    width: 95%;
    height: 400px;
}

js源码

import router from '@system.router';
// xxx.js
export default {
    data: {
        title: 'World'
    },
    back(){
        router.push ({
            uri:'pages/first/first', // 跳转到注册页面
        })
    }
}

历史记录

#DAYU200体验官#基于鸿蒙的恶性皮肤肿瘤检测系统-开源基础软件社区

hml源码

<element name="slz-tabber" src="../../common/components/tabber/tabber.hml"></element>
<div class="container">
<!--    </div>-->
        <list class="listA">
            <list-item-group>
                <list-item><text class="groupA">2022-03-21 09:04:58</text></list-item>
                <list-item>
                    <div class="container_1">
                        <div id="div1">
                            <text id="text2">结果与分析</text>
                        </div>
                        <div id="div3">
                            <div id="div5">
                                <text id="text3">皮肤病病灶\r\n区域拟合图</text>
                            </div>
                            <image id="image2" src="../../common/image_a/1.png"></image>
                        </div>
                        <div class="z1">
                            <image id="image3" src="../../common/image_a/a.bmp"></image>
                            <text id="text4">检测报告</text>
                        </div>
                        <div class="z2">
                            <div class="z3">
                                <text id="text5">
                                    类别：色素性皮肤病
                                </text>
                            </div>
                            <div class="z4">
                                <image id="image5" src="../../common/image_a/2.png"></image>
                            <!--                        <image id="image5" src="data:image/jpg;base64,{{ $item.detection_result_img}}"></image>-->
                                <div class="z5">
                                    <text id="text6">置信度：0.9846</text>
                                    <slider id="slider1" value="984.6"></slider>
                                </div>
                            </div>
                        <!--                    <image id="image5" src="common/images/4.jpg"></image>-->
                            <div class="z6">
                                <image id="image7" src="../../common/images/笔记本.png"></image>
                                <div class="z6_1">
                                    <text id="text8">疾病概括</text>
                                    <text id="text9">
                                        色素性皮肤病由色素减少或增多引起皮肤颜色改变。
                                    </text>
                                </div>
                            </div>
                            <div class="z7">
                                <image id="image8" src="../../common/images/分析.png"></image>
                                <div class="z7_1">
                                    <text id="text10">病因分析</text>
                                    <text id="text11" >
                                        黑素细胞和黑素生成异常造成，可由遗传及环境因素引起，它是皮肤病中的一类常见疾病
                                    </text>
                                </div>
                            </div>
                            <div class="z8">
                                <image id="image9" src="../../common/images/紧急.png"></image>
                                <div class="z8_1">
                                    <text id="text12">定期观察</text>
                                    <text id="text13">如情况恶化及时就医</text>
                                </div>
                            </div>
                        </div>
                    </div>
                </list-item>
            </list-item-group>
            <list-item-group>
                <list-item><text class="groupA">2022-03-21 09:12:20</text></list-item>
                <list-item>
                    <div class="container_1">
                        <div id="div1">
                            <text id="text2">结果与分析</text>
                        </div>
                        <div id="div3">
                            <div id="div5">
                                <text id="text3">皮肤病病灶\r\n区域拟合图</text>
                            </div>
                            <image id="image2" src="../../common/image_a/3.png"></image>
                        </div>
                        <div class="z1">
                            <image id="image3" src="../../common/image_a/a.bmp"></image>
                            <text id="text4">检测报告</text>
                        </div>
                        <div class="z2">
                            <div class="z3">
                                <text id="text5">
                                    类别：痣
                                </text>
                            </div>
                            <div class="z4">
                                <image id="image5" src="../../common/image_a/4.png"></image>
                            <!--                        <image id="image5" src="data:image/jpg;base64,{{ $item.detection_result_img}}"></image>-->
                                <div class="z5">
                                    <text id="text6">置信度：0.3853</text>
                                    <slider id="slider1" value="984.6"></slider>
                                </div>
                            </div>

                            <div class="z6">
                                <image id="image7" src="../../common/images/笔记本.png"></image>
                                <div class="z6_1">
                                    <text id="text8">疾病概括</text>
                                    <text id="text9">
                                        黑色素痣是一群良性的黑色素细胞，聚集在表皮与真皮的交界产生的。
                                    </text>
                                </div>
                            </div>
                            <div class="z7">
                                <image id="image8" src="../../common/images/分析.png"></image>
                                <div class="z7_1">
                                    <text id="text10">病因分析</text>
                                    <text id="text11" >
                                        紫外线使黑色素瘤形成的一大主因，日常生活做好防晒。新老角质交替过慢也是黑色素形成的原因。
                                    </text>
                                </div>
                            </div>
                            <div class="z8">
                                <image id="image9" src="../../common/images/紧急.png"></image>
                                <div class="z8_1">
                                    <text id="text12">定期观察</text>
                                    <text id="text13">如情况恶化及时就医</text>
                                </div>
                            </div>
                        </div>
                    </div>
                </list-item>
            </list-item-group>
            <list-item-group>
                <list-item><text class="groupA">2022-03-21 15:04:42</text></list-item>
                <list-item>
                    <div class="container_1">
                        <div id="div1">
                            <text id="text2">结果与分析</text>
                        </div>
                        <div id="div3">
                            <div id="div5">
                                <text id="text3">皮肤病病灶\r\n区域拟合图</text>
                            </div>
                            <image id="image2" src="../../common/image_a/5.png"></image>
                        </div>
                        <div class="z1">
                            <image id="image3" src="../../common/image_a/a.bmp"></image>
                            <text id="text4">检测报告</text>
                        </div>
                        <div class="z2">
                            <div class="z3">
                                <text id="text5">
                                    类别：痣
                                </text>
                            </div>
                            <div class="z4">
                                <image id="image5" src="../../common/image_a/6.png"></image>
                            <!--                        <image id="image5" src="data:image/jpg;base64,{{ $item.detection_result_img}}"></image>-->
                                <div class="z5">
                                    <text id="text6">置信度：0.9423</text>
                                    <slider id="slider1" value="984.6"></slider>
                                </div>
                            </div>
                        <!--                    <image id="image5" src="common/images/4.jpg"></image>-->
                            <div class="z6">
                                <image id="image7" src="../../common/images/笔记本.png"></image>
                                <div class="z6_1">
                                    <text id="text8">疾病概括</text>
                                    <text id="text9">
                                        黑色素痣是一群良性的黑色素细胞，聚集在表皮与真皮的交界产生的。
                                    </text>
                                </div>
                            </div>
                            <div class="z7">
                                <image id="image8" src="../../common/images/分析.png"></image>
                                <div class="z7_1">
                                    <text id="text10">病因分析</text>
                                    <text id="text11" >
                                        紫外线使黑色素瘤形成的一大主因，日常生活做好防晒。新老角质交替过慢也是黑色素形成的原因。
                                    </text>
                                </div>
                            </div>
                            <div class="z8">
                                <image id="image9" src="../../common/images/紧急.png"></image>
                                <div class="z8_1">
                                    <text id="text12">定期观察</text>
                                    <text id="text13">如情况恶化及时就医</text>
                                </div>
                            </div>
                        </div>
                    </div>
                </list-item>
            </list-item-group>
            <list-item-group>
                <list-item><text class="groupA">2022-03-21 14:01:17</text></list-item>
                <list-item>
                    <div class="container_1">
                        <div id="div1">
                            <text id="text2">结果与分析</text>
                        </div>
                        <div id="div3">
                            <div id="div5">
                                <text id="text3">皮肤病病灶\r\n区域拟合图</text>
                            </div>
                            <image id="image2" src="../../common/image_a/7.png"></image>
                        </div>
                        <div class="z1">
                            <image id="image3" src="../../common/image_a/a.bmp"></image>
                            <text id="text4">检测报告</text>
                        </div>
                        <div class="z2">
                            <div class="z3">
                                <text id="text5">
                                    类别：痣
                                </text>
                            </div>
                            <div class="z4">
                                <image id="image5" src="../../common/image_a/8.png"></image>
                                <div class="z5">
                                    <text id="text6">置信度：0.4497</text>
                                    <slider id="slider1" value="984.6"></slider>
                                </div>
                            </div>
                            <div class="z6">
                                <image id="image7" src="../../common/images/笔记本.png"></image>
                                <div class="z6_1">
                                    <text id="text8">疾病概括</text>
                                    <text id="text9">
                                        黑色素痣是一群良性的黑色素细胞，聚集在表皮与真皮的交界产生的。
                                    </text>
                                </div>
                            </div>
                            <div class="z7">
                                <image id="image8" src="../../common/images/分析.png"></image>
                                <div class="z7_1">
                                    <text id="text10">病因分析</text>
                                    <text id="text11" >
                                        紫外线使黑色素瘤形成的一大主因，日常生活做好防晒。新老角质交替过慢也是黑色素形成的原因。
                                    </text>
                                </div>
                            </div>
                            <div class="z8">
                                <image id="image9" src="../../common/images/紧急.png"></image>
                                <div class="z8_1">
                                    <text id="text12">定期观察</text>
                                    <text id="text13">如情况恶化及时就医</text>
                                </div>
                            </div>
                        </div>
                    </div>
                </list-item>
            </list-item-group>
        </list>
    <slz-tabber index="1"></slz-tabber>
</div>

CSS源码

.container {
    margin-top: 10px;
    flex-direction: column;
    margin-left: 3%;
    margin-right: 3%;
}
.listdiv{
    width: 100%;
/*    height: 100%;*/
    font-size: 25px;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #000000;
    opacity: 0.9;
    font-size: 28px;
}

.list-item{
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 5px;
    border-bottom: 1px solid black;
    border-width: 2px;
    border-color: black;
}

.textdiv{
    font-size: 30px;
    font-weight: bold;
}


.imputdiv{
    width: 100%;
    height: 35%;
}
.button1{
    width: 100%;
    height: 60%;
    display: flex;
    flex-direction: row;
}
.listG{
    height: 100px;
    border-color: black;
    border-width: 2px;
    z-index: 1;
}
.listItem{
    width: 100%;
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #DEDEDE;
    align-items: center;
    font-size: 20px;
}
.group{
    width: 96%;
    height: 600px;
    padding-left: 3%;
    margin-left: 2%;
    display: flex;
/*    border-bottom: 1px solid #DEDEDE;*/
    border-width: 1px;
    border-color: black;
    border-radius: 15px;
    box-shadow:  3px 3px 3px 3px #d6d6d6;
    font-size: 20px;
    font-weight:500;
    z-index: 1;
}
.group1{
    width: 96%;
    height: 60px;
    padding-left: 3%;
    margin-left: 6%;
    z-index:2;
}
.groupValue{
    font-size: 16px;
    width: 95%;
    height: 60px;
    margin-left: 15%;
    border-bottom: 1px solid  #DEDEDE;
}
.head{
    width: 100%;
    height: 50px;
    background-color: #6f7ee9;
}
.head_text{
    align-items: center;
    text-align:center;
    justify-content: center;
    font-size: 25px;
    color: #f8f4f4;
}
.listA{
    height: 4000px;
}
.listItem{
    width: 100%;
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #DEDEDE;
    align-items: center;
    font-size: 20px;
    border-width: 1px;
    border-color: black;
    border-radius: 15px;
    box-shadow:  3px 3px 3px 3px #d6d6d6;
}
.groupA{
    width: 96%;
    height: 150px;
/*    background-color: darkgrey;*/
    padding-left: 3%;
    margin-left: 6%;
    border-bottom: 1px solid #DEDEDE;
    font-size: 40px;
    font-weight:500;
}
.groupValueA{
    font-size: 16px;
    width: 95%;
    height: 60px;
    margin-left: 15%;
    border-bottom: 1px solid  #DEDEDE;
}

#wrapper {
    width: 100%;
    flex-direction: column;
}

#div1 {
    width: 100%;
    height: 200px;
    background-color: #5768e4;
}

#div_image2{
    flex-direction: row-reverse;
    margin-right: 10px;
}

#image1 {
    width: 40px;
    height: 40px;
    top: 10px;
    right: -10px;
}

#text1 {
    width: 68.62300154718928px;
    height: 43.27488396080454px;
    top: 10px;
    right: -15px;
    color: #f8f4f4;
}

#text2 {
    width: 180px;
    height: 50px;
    top: 10px;
    margin-left: 90px;
    right: 80px;
    font-size: 35px;
    color: #f8f4f4;
}

#div3 {
    width: 89%;
    height: 200px;
    border-width: 1px;
    border-color: #000000;
    border-radius: 20px;
    box-shadow:  3px 3px 3px 3px #d6d6d6;
    background-color: #ffffff;
    flex-shrink: -1;
    top: -100px;
    right: -20px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}
#div5 {
    width: 250px;
    height: 90px;
    border-width: 0.05px;
    border-radius: 50px;
    background-color: #eeebeb;
    margin-top: 50px;
    left: -60px;
}
#text3 {
    left: 15px;
    top:2px;
    font-size: 35px;
}
#image2 {
    margin-top: 20px;
    width: 200px;
    height: 150px;
/*    top:-10px;*/
    left: 5px;
}
#image3 {
    width: 30px;
    height: 28px;
    top:6px;
    left: 5px;
/*    margin-top: 10px;*/
/*    border-width: 2px;*/
/*    border-color: black;*/
}

#text4 {
    height: 42px;
    font-size: 40px;
    left: 7px;
    margin-end: 20px;
/*    margin-top: 12px;*/
/*    border-width: 2px;*/
/*    border-color: black;*/
}
#div6 {
    width: 91%;
    height: 389px;
    border-width: 1px;
    border-color: #000000;
    border-radius: 30px;
    box-shadow:  3px 3px 3px 3px #d6d6d6;
    top: -140px;
    right: -15px;
}
#text5 {
    height: 45.68849922640536px;
    right: -20px;
    font-size: 35px;
}
#text_class{
    font-size: 20px;
}
#text6 {
    width: 180px;
    height: 200px;
    font-size: 20px;
    left: 35px;
}
#image5 {
    width: 150px;
    height: 100px;
    left: 10px;
}
#slider1 {
    width: 150px;
    height: 44px;
    left: -25px;
}
#image7 {
    width: 35px;
    height: 33px;
    top:10px;
    left: 10px;
}
#text8 {
    width: 300px;
    height: 50px;
    font-size: 35px;
    left: 8px;
}
#text9 {
    height: 80px;
    top:-5px;
    font-size: 20px;
    left: 8px;
}
#image8 {
    width: 40px;
    height: 20px;
    top:10px;
    left: 10px;
}
#text10 {
    width: 300px;
    height: 40px;
    font-size: 35px;
    left: 8px;
}
#text11 {
    width: 550px;
    font-size: 20px;
    left: 8px;
}
#image9 {
    width: 35px;
    height: 33px;
    top:10px;
    left: 10px;
}
#text12 {
    width: 300px;
    height: 40px;
    font-size: 35px;
    left: 8px;
}
#text13 {
    width: 550px;
    font-size: 20px;
    left: 8px;
}
#div7 {
    width: 100%;
    height: 50px;
}
.container_1{
    width: 100%;
    height: 1000px;
    flex-direction: column;
}
.z1{
    width: 100%;
    height: 40px;
    top:-100px;
/*    border-width: 1px;*/
/*    border-color: black;*/
}
.z2{
    flex-direction: column;
    width: 91%;
    height: 500px;
    border-width: 1px;
    border-color: #000000;
    border-radius: 30px;
    box-shadow:  3px 3px 3px 3px #d6d6d6;
    top:-95px;
    right: -15px;
}
.z3{
    width: 400px;
    height: 50px;
}
.z4{
    flex-direction: row;
    width: 300px;
    height: 150px;
    top:5px;
}
.z5{
    flex-direction: column;
    width: 200px;
    left: 10px;
}
.z6{
    height: 300px;
    flex-direction: row;
    height: 90px;
    top:5px;
}
.z6_1{
    flex-direction:column;
    width: 550px;
    height: 200px;
    left: 10px;
}
.z7{
    flex-direction: row;
    height: 100px;
    top:5px;
}
.z7_1{
    flex-direction:column;
    height: 100px;
    left: 10px;
}
.z8{
    flex-direction: row;
    height: 100px;
    top:5px;
}
.z8_1{
    flex-direction:column;
    width: 248px;
    height: 100px;
    left: 10px;
}

识别过程界面

#DAYU200体验官#基于鸿蒙的恶性皮肤肿瘤检测系统-开源基础软件社区

#DAYU200体验官#基于鸿蒙的恶性皮肤肿瘤检测系统-开源基础软件社区

​​视频链接​​。

​​想了解更多关于开源的内容，请访问：​​

​​51CTO 开源基础软件社区​​

​​https://ost.51cto.com​​。

责任编辑：jianghua 来源： 鸿蒙社区
鸿蒙MaskRCNN算法
相关推荐
Android实现基于肤色的皮肤检测
以前，一直没明白yuv和YcbCr之间的差异，想必有些朋友也会有同样的疑惑。所以，我看完之后就记载下来了。

2013-04-24 10:23:02

Android基于肤色Android开发
基于 OpenCV 的实时睡意检测系统
该系统可以检测一个人在开车时是否困倦，如果有的话，可以通过使用语音消息实时提醒他。该系统使用网络摄像头和电话摄像头进行实时数据传输。

2024-09-04 15:42:38

OpenCV开发Python
基于OpenHarmony的智能水质检测系统
利用OneNET中国移动物联网开放平台，使用MQTT接入，实时查看数据流，以折线图形式展示，直观清晰，以及设备上线、离线提醒。

2022-09-29 15:24:11

物联网MQTT
基于记忆的APT检测原理系统框架
按照数据—信息—知识逐层提炼的模式，基于记忆的APT攻击检测系统结构分为三级：存储层、分析层、展示层。

2013-07-27 19:52:50

警惕恶性“注入者木马”伺机“注入”您的系统
卡巴斯基实验室近期检测到一种名为“注入者木马”的恶意程序感染率程大幅上升的趋势，造成大量网民感染，损失惨重。

2009-08-18 13:46:20

基于区块链的数据泄漏检测系统
在企业的日常运营中，数据泄漏在广义上是指未经授权或已被授权的人员，错误或恶意地访问、删除、修改或传输企业或个人数据，而引发的各种安全事件。除了系统自身软硬件错误、以及源自外部的攻击，由组织内部人员造成的数据泄漏，在频次和财务影响等方面都呈上升趋势。

2024-04-19 08:00:00

OSSEC HIDS：开源的基于主机的入侵检测系统
OSSECHIDS的主要功能有日志分析、完整性检查、rootkit检测、基于时间的警报和主动响应。

2010-12-24 10:53:35

OSSEC HIDS开源
如何在CentOS上配置基于主机的入侵检测系统?
AIDE(全称“高级入侵检测环境”)是一种基于主机的开源入侵检测系统。它通过扫描一台(未被篡改)的Linux服务器的文件系统来构建文件属性数据库。然后，它对照该数据库，检查服务器的文件属性，然后在服务器运行时，一旦索引文件出现任何更改，就发出警告。

2015-01-27 10:18:38

入侵检测系统AIDECentOS
基于记忆的APT攻击检测系统典型应用场景
对于攻击防御方而言，由于特征的时效性和检测手段的局限性，未必能够在攻击的起始阶段实现有效检测。但对于APT这样的时间跨度长、攻击目标明确的攻击行为，在整个攻击过程中总会存在若干个攻击暴露点，以此为基础对相关的流量进行回溯关联，就有可能获取攻击者完整的攻击意图。

2013-07-27 20:11:27

在CentOS上配置基于主机的入侵检测系统（IDS）
对于某些客户，他们可能会根据他们的安全策略在他们的服务器上强制安装某种入侵检测系统。但是，不管客户是否要求，系统管理员都应该部署一个入侵检测系统，这通常是一个很好的做法。

2014-11-18 14:12:19

CentOS入侵检测系统
加密货币能否化解恶性通胀的危机？
杰克·多尔西（JackDorsey）最近在推特上发表了他对恶性通货膨胀的担忧，并称这件事情正在发生中。尽管加密是一种相对较新的技术，但我们不乏听到这样的说法，即比特币可以作为各种经济困境（包括恶性通货膨胀）的解决方案。

2021-10-27 13:53:18

加密货币比特币货币
论文推荐：基于深度对抗学习的超声图像乳腺肿瘤分割与分类
这篇论文提出了一种基于深度对抗学习的超声图像乳腺肿瘤分割分类方法（cGAN+AC+CAW），论文虽然是2019年提出的，但是他提出了使用GAN进行分割的方法在当时来说却是一个非常新奇的想法，该论文基本上把所有当时能够整合的技术全部进行了集成，并且还取得了很好的效果，所以是非常值得我们一读的，此外论文还提出了具有典型对抗损失的SSIM和l1范数损失作为损失函数。

2022-11-11 15:07:50

深度学习函数鉴别器
基于记忆的APT检测原理
在探讨APT攻击检测之前，我们先分析下检测的内涵。从本质上讲，检测是将求检对象从其所依附的环境中识别出来的过程。

2013-07-27 20:04:38

人工智能可以诊断结肠直肠癌：准确率已高达86%
AI在医疗领域有着广泛的应用前景，比如预测心脏病、侦测老年痴呆症。新研究告诉我们，AI可以用来诊断癌症。日本研究人员找到一套方法，可以用AI诊断结肠直肠癌肿瘤，在肿瘤变成恶性肿瘤之前就能发现。

2017-10-31 17:05:25

人工智能医疗领域诊断癌症
基于 Spring Boot 的实时人脸检测和识别系统
本文首先介绍了实时人脸检测和识别系统的基本需求和技术挑战。接着，通过SpringBoot和WebSocket技术实现了一个简单的实时人脸检测与识别系统，并结合代码示例详细讲解了实现过程。

2024-06-12 08:10:08

恶性通货膨胀和比特币的关系
这篇文章探讨了比特币在某些地区比其他地区被更快采用的情况——并非出于某种自由主义的冲动，而是出于绝望。

2021-05-02 23:20:49

通货膨胀比特币货币
基于机器学习的web异常检测
本文管中窥豹式的介绍了机器学习用于web异常检测的几个思路。

2017-02-16 08:25:35

基于QtWebKit的DOM XSS检测技术
DOMbasedXSS是一种基于文档对象模型（DocumentObjectModel，DOM)的XSS漏洞。简单理解，DOMXSS就是出现在JavaScript代码中的漏洞。

2013-01-09 15:27:45

DOM XSS检测QtWebKitXSS
基于深度学习的Deepfake检测综述
深度学习(DL)已成为计算机科学中最具影响力的领域之一，直接影响着当今人类生活和社会。与历史上所有其他技术创新一样，深度学习也被用于一些违法的行为。Deepfakes就是这样一种深度学习应用，在过去的几年里已经进行了数百项研究，发明和优化各种使用AI的Deepfake检测，本文主要就是讨论如何对Deepfake进行检测。

2022-10-26 15:41:38

深度学习Deepfake机器学习
点赞
收藏

51CTO技术栈公众号

业务
速览
在线客服