<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>
