You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
dianshang-qianduan/src/views/digitalMarketTech/artificialIntelligence/components/Image-recognition.vue

576 lines
18 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class="app-container4">
<div class="img-centent">
<div class="left" style=" width: 100%" >
<el-scrollbar height="640px" style="height:94%;padding: 0 15px;">
<el-row>
<el-col :span="24">
<div class="title-back">
<span>任务背景</span>
</div>
</el-col>
</el-row>
<div>
<p>
小张去东北旅游看到了很多以前没见过的植物于是使用手机中拍照识图类APP识别自己所看到的植物其中有以下两张鸢尾花的照片<br />
APP准确识别出了这是变色鸢尾和山鸢尾他想知道手机APP是怎么做到如此精准的识别的接下来我们就带他体验其中的原理吧
</p>
<div class="Step">
<div class="Step-item">步骤一</div>
<span>下图为小张拍出的两张鸢尾花照片图源来自百度</span>
</div>
<div class="img">
<img src="@/assets/images/szjj/u744.jpg" alt="" />
<img src="@/assets/images/szjj/u745.png" alt="" />
</div>
<div class="Step2" v-for="item in topicList" :key="item">
<div class="Step">
<div class="Step-item">步骤二</div>
<span>特征提取</span>
</div>
<p class="a">{{ item.stemContent }}</p>
<p>
<el-radio
label="两张图片花的颜色不同"
size="large"
v-model="item.studentAnswer"
@change="submit"
>A. {{ item.optionA }}</el-radio
>
</p>
<p>
<el-radio
label="两张图片花瓣数量不同"
size="large"
v-model="item.studentAnswer"
@change="submit"
>B. {{ item.optionB }}</el-radio
>
</p>
<p>
<el-radio
label="两张图片花瓣的长度和宽度不同"
size="large"
v-model="item.studentAnswer"
@change="submit"
>C. {{ item.optionC }}</el-radio
>
</p>
<p>
<el-radio
label="两张图片花的植株高度不同"
size="large"
v-model="item.studentAnswer"
@change="submit"
>D. {{ item.optionD }}</el-radio>
</p>
</div>
<div class="Step3">
<div class="Step">
<div class="Step-item">步骤三</div>
<span>训练分类器</span>
</div>
<p>
假设我们根据上述特征区分出了变色鸢尾和山鸢尾我们把特征进行量化假设测量得到一朵鸢尾花的花瓣长度为1.1cm宽度为0.1cm那么这朵鸢尾花的特征就可以用1.1,0.1)表示,<br />我们表示在直角坐标系中,就可以是直角坐标系中的一个点。如下:
</p>
<img src="@/assets/images/szjj/setpt1.png" alt="" />
<p>
那么我们可以想象这样一个场景我们把大量变色鸢尾和山鸢尾的图片喂给计算机同时输入图片的花瓣长度和宽度特征数据并把变色鸢尾图片标注为0把山鸢尾图片标注为1山鸢尾用黑色的点表示变色鸢尾<br />用白色的点表示,那么我们可以训练出一个分类器。
</p>
<span class="btn"> 分类器训练</span>
<p><img src="@/assets/images/szjj/setpt2.png" alt="" /></p>
<p>
这是一个简单的分类,当我们用数据对分类器进行了训练,那么它就具备了识别能力,当训练数据量越大,特征提取的越多越精确,那么系统识别能力就越精确。
</p>
<p>
这个时候我们上传一张鸢尾花图片,或者用手机对着鸢尾花拍照,系统就会计算花瓣的长度和宽度,然后对比系统已有的数据,看是落在线的上面还是下面,如果<br />落在线的下面则系统识别为1即为山鸢尾。
</p>
<span class="btn btn1" @click="Upload" :class="{'is-disabled':Answer!==''}">上传鸢尾花图片</span
>
<p><img :src="getAssetsFile(Identifyimg)" alt=""/></p>
<p>
<label for="">系统识别您上传的鸢尾花为:</label>
<el-select
class="m-2"
placeholder="请选择"
size="large"
style="width: 382px"
v-model="value"
@change="selectChange"
>
<el-option label="变色鸢尾花" value="变色鸢尾花" />
<el-option label="山鸢尾花" value="山鸢尾花" />
</el-select>
</p>
</div>
</div>
</el-scrollbar>
<div class="dialog-footer" style="margin-top:10px">
<el-button type="primary" class="tj" plain size="large" @click="submitTask" >提交任务</el-button>
<el-button type="primary" class="cxks" plain size="large" @click="reset">重新开始</el-button>
</div>
</div>
<div class="Case">
<span @click="centerDialogVisible=true"></span>
</div>
<el-dialog
custom-class="gdialog"
v-model="centerDialogVisible"
title="图像识别"
width="70%">
<el-scrollbar height="666px">
<p>
随着计算机视觉技术的发展,图像识别技术已经成为了一个热门话题。图像识别是指将图像中的信息转换为可以被计算机理解和处理的形式,从而实现图像的自动分析和处理。<br />下面,我们就来看看如何进行图像识别。
</p>
<span class="headline">一、图像识别技术的分类</span>
<p>
根据图像识别技术的不同,可以将其分为两类:一类是传统的图像识别技术,另一类是深度学习图像识别技术。
</p>
<p>
传统的图像识别技术主要是基于经验和专家知识的,例如分类、检索、识别等。这种技术虽然简单、可靠,但是在处理大量的图像时,往往需要人工干预,效率低下。
</p>
<p>
深度学习图像识别技术则是基于机器学习和深度神经网络的,它能够自动地学习和识别图像中的特征,从而实现自动分类、检索、识别等任务。相比于传统的图像识别技术,深度学习图像识别技术更加高效、准确,<br />能够处理大量的图像数据,并且具有更好的鲁棒性和泛化能力。
</p>
<span class="headline">二、图像识别技术的流程</span>
<p>图像识别技术的流程一般包括以下几个步骤:</p>
<p>
1、图像预处理对待识别的图像进行预处理包括图像增强、灰度化、二值化等操作以提高图像的可读性和稳定性。
</p>
<p>
2、特征提取从待识别的图像中提取出有用的特征这是图像识别的关键步骤。常用的特征提取方法包括卷积神经网络、最大池化等。
</p>
<p>
3、模型训练使用机器学习或深度学习算法构建图像识别模型并进行训练。常用的模型训练方法包括随机森林、卷积神经网络等。
</p>
<p>
4、模型预测使用训练好的模型对待识别的图像进行预测得到识别结果。
结果分析:对识别结果进行分析和处理,得到图像的分类、检索、识别等结果。
</p>
<span class="headline">三、图像识别技术的应用</span>
<p>
图像识别技术已经广泛应用于各个领域,例如人脸识别、目标检测、图像搜索、自动驾驶等。下面我们来看看一些具体的应用场景。
</p>
<p>
1、人脸识别人脸识别是图像识别技术的一个重要应用领域它可以用于身份识别、安全监控等方面。
</p>
<p>
2、目标检测目标检测是指在图像中检测出目标的位置和大小等信息常用于图像搜索、人脸识别等方面。
</p>
<p>
3、图像搜索图像搜索是指在大量的图像中快速定位需要的图像常用于目标检测、图像搜索等方面。
</p>
<p>
4、自动驾驶自动驾驶是指让计算机自动驾驶汽车图像识别技术可以用于汽车的自动驾驶控制、障碍物检测等方面。
</p>
<span class="headline">四、总结</span>
<p>
图像识别技术是一项重要的计算机视觉技术,它可以用于各种图像处理和识别任务。传统的图像识别技术和深度学习图像识别技术各有优缺点。
</p>
</el-scrollbar>
</el-dialog>
<el-dialog
v-model="dialogVisible"
custom-class="gdialog imggdialog"
title="上传鸢尾花图片"
width="50%"
:align-center="true"
>
<div class="Flowers">
<div class="item">
<img src="@/assets/images/szjj/1.png" alt="" />
<el-radio v-model="Answer" label="1" size="large" @change="Choiceimg"
>1</el-radio
>
</div>
<div class="item">
<img src="@/assets/images/szjj/2.png" alt="" />
<el-radio v-model="Answer" label="2" size="large" @change="Choiceimg"
>2</el-radio
>
</div>
<div class="item">
<img src="@/assets/images/szjj/3.png" alt="" />
<el-radio v-model="Answer" label="3" size="large" @change="Choiceimg"
>3</el-radio
>
</div>
</div>
</el-dialog>
</div>
</div>
</template>
<script setup>
// import { getUserId, getToken } from "@/utils/auth.js";\
import { getUserInfo,getToken } from '@/utils/auth'
import * as commonality from "@/api/commonality.js";
import {getAssetsFile} from '@/utils/index.js'
import { ref } from "vue";
const { proxy } = getCurrentInstance();
const dialogVisible = ref(false);
const centerDialogVisible = ref(false);
import * as API from "@/api/AI.js";
const timer=ref(null)
let seconds=0
watch(() => centerDialogVisible.value, (newValue) => {
if (newValue) {
timer.value=setInterval(()=>{
seconds++
},1000)
} else {
if(timer.value){
clearInterval(timer.value)
}
const data=ref({
"stuScoreDetailsDTO":{
"viewingTime": seconds,
"userId":JSON.parse(getUserInfo()).userId,
}
})
API.knowledgeProfileScore(data.value).then((res)=>{
})
}
});
const topicList = ref([]);
const Answer = ref("");
const imgList = ref([
{
name: "变色鸢尾花",
imgSrc: "szjj/1.png",
},
{
name: "变色鸢尾花",
imgSrc: "szjj/2.png",
},
{
name: "山鸢尾花",
imgSrc: "szjj/3.png",
},
]);
const restartCount = ref(0);
const step=ref(0)
const value = ref("");
const errrCount = ref(0);
const Identifyimg=ref('szjj/setpt2.png')
const dialogShowbtn = () => {
getlist();
if(restartCount.value>0) return
commonality.getImgEcho({module:'图像识别',userId:JSON.parse(getUserInfo()).userId}).then((res) => {
if(res.data.length<0) return
Answer.value = res.data[0].selectPicture;
value.value = res.data[0].selectText;
step.value=3
});
};
const getlist = () => {
commonality.getImgList({ userId: JSON.parse(getUserInfo()).userId, module: "图像识别" }).then((res) => {
topicList.value = res.data;
if( topicList.value[0].studentAnswer!==null||topicList.value[0].studentAnswer!=='') step.value=1
topicList.value.userId = JSON.parse(getUserInfo()).userId;
if(restartCount.value>0){
topicList.value.forEach((item) => {
item.studentAnswer = null;
});
}
});
};
// 答题
const submit = () => {
topicList.value[0].userId = JSON.parse(getUserInfo()).userId;
step.value=1
restartCount.value=0
commonality
.submitAnswer({ StuImageRecognitionTrainingDTO: topicList.value[0] })
.then((res) => {
proxy.$modal.msgSuccess(res.msg);
})
.catch((error) => {
errrCount.value++;
});
};
// 禁用函数
const disabled = (val) => {
if (val !== null) {
return true;
}
};
// 选择要识别的图片函数
const Choiceimg = () => {
if (Answer.value == 1 || Answer.value == 2) {
console.log(Identifyimg.value,"Identifyimg");
Identifyimg.value="szjj/点在上.png"
} else {
Identifyimg.value="szjj/点在下.png"
}
proxy.$modal.msgSuccess("选择识别成功");
dialogVisible.value = false;
step.value=2
commonality.uploadImg({irisName:value.value||null, module: "图像识别" ,order:Answer.value||null ,userId: JSON.parse(getUserInfo()).userId})
};
const selectChange = () => {
if (Answer.value == "") {
proxy.$modal.msgError("请选择识别的鸢尾花");
value.value = "";
return
}
commonality.uploadImg({irisName:value.value||null, module: "图像识别" ,order:Answer.value ||null,userId: JSON.parse(getUserInfo()).userId})
if (Answer.value == 1 || Answer.value == 2) {
if(value.value=='变色鸢尾花'){
proxy.$modal.msgSuccess("识别成功")
}else{
proxy.$modal.msgError("识别失败");
value.value = "";
errrCount.value++;
}
} else {
if(value.value=='山鸢尾花'){
proxy.$modal.msgSuccess("识别成功");
step.value=3
}else{
proxy.$modal.msgError("识别失败");
value.value = "";
errrCount.value++;
}
}
step.value=3
};
const submitTask = () => {
if(step.value<3) return proxy.$modal.msgWarning('')
commonality
.submitTask({
module: "",
numberOfErrors: errrCount.value > 10 ? 10 : errrCount.value ,
taskName: "图像识别",
userId: JSON.parse(getUserInfo()).userId,
})
.then((response) => {
proxy.$modal.msgSuccess("提交成功");
centerDialogVisible.value = false;
})
.catch((error) => {});
};
// 上传
const Upload=()=>{
if(step.value<1) return proxy.$modal.msgError('')
dialogVisible.value = true
}
//
const reset = () => {
restartCount.value=1
step.value=0
Answer.value = "";
value.value = "";
dialogVisible.value = false;
centerDialogVisible.value=false
Identifyimg.value="szjj/setpt2.png"
topicList.value.forEach((item) => {
item.studentAnswer = null;
});
};
dialogShowbtn()
</script>
<style lang="scss" scoped>
.img-centent {
.left{
position: relative;
}
// p,
// span {
// font-size: 12px;
// font-family: Source Han Sans CN;
// font-weight: 600;
// color: #333333;
// }
.Case {
position: absolute;
top: 180px;
right: 40px;
width: 216px;
padding-left: 60px;
span{
display: inline-block;
width: 110px;
height: 143px;
background: url("@/assets/images/szjj/案例任务.png") no-repeat;
background-size: 100% 100%;
}
// 鼠标小手
// cursor: pointer;
}
}
.Step-item {
width: 52px;
height: 25px;
color: #ffffff;
background: #5621F8;
border-radius: 13px;
font-size: 12px;
text-align: center;
line-height: 25px;
}
div {
.title-back {
width: 182px;
height: 66px;
line-height: 66px;
text-align: center;
background: url("@/assets/images/szjj/任务背景.png") no-repeat;
background-size: 100% 100%;
font-size: 20px;
font-family: Source Han Sans CN;
font-weight: bold;
}
.Step {
display: flex;
align-items: center;
.Step-item{
font-size: 12px;
}
span {
margin-left: 8px;
font-size: 15px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #FFFFFF;
font-weight: 600;
}
}
.img {
margin: 20px 0px;
img {
width: 332px;
height: 248px;
margin-right: 70px;
}
}
.Step2 {
width: calc(100% - 40%);
:deep(.a) {
width: 100%;
height: 100%;
background-color: transparent !important;
padding: 0;
}
p {
width: 100%;
height: 36px;
background: #e9ebfc;
border-radius: 4px;
padding: 0px 21px;
:deep(.el-radio__input.is-disabled.is-checked .el-radio__inner) {
background-color: #5621f8 !important;
border-color: #5621f8 !important;
}
}
}
.Step3 {
.btn {
display: inline-block;
min-width: 136px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 12px;
color: #ffffff;
padding-left: 10px;
background: url("@/assets/images/szjj/icon-分类器训练.png")
no-repeat;
background-size: cover;
}
.btn1 {
background: url("@/assets/images/szjj/icon-上传鸢尾花图片.png")
no-repeat !important;
background-size: cover;
// 鼠标小手
cursor: pointer;
}
}
.setp-footer {
display: flex;
justify-content: center;
margin-top: 20px;
el-button {
width: 136px;
height: 40px;
margin: 0px 10px;
}
.el-button--primary {
padding-left: 53px;
padding-right: 34px;
border: none;
color: #ffffff;
background: url("@/assets/images/szjj/提交任务.png") no-repeat !important;
background-size: 100% 100%;
}
.el-button--primary:nth-child(2) {
background: url("@/assets/images/szjj/重新开始.png") no-repeat !important;
background-size: 100% 100%;
}
}
}
:deep(.gdialog) {
&:not(.is-fullscreen) {
// margin-top: 36vh !important;
// margin-left: 26vh;
}
.el-dialog__body {
// padding: 0px !important;
.Flowers {
height: 30vh;
display: flex;
justify-content: center;
gap: 96px;
.item {
width: 196px;
height: 196px;
display: flex;
flex-direction: column;
img {
width: 196px;
height: 196px;
margin-bottom: 36px;
}
.el-radio--large {
flex-direction: column-reverse;
.el-radio__label {
padding-left: 0px !important;
// padding-bottom: 24px !important;
}
}
}
}
}
}
.is-disabled{
cursor:not-allowed;
}
:deep(.imggdialog) {
margin-top: 36vh !important;
// margin-left: 26vh;
.el-dialog__body {
.el-radio--large {
.el-radio__input {
margin-top: 24px;
}
}
}
}
.tj{
width: 136px;
height: 40px;
color: #000000 !important;
}
.cxks{
width: 136px;
height: 40px;
color: #000000 !important;
}
</style>