|
|
<template>
|
|
|
<div class="app-container">
|
|
|
<div class="text-centent">
|
|
|
<div class="left">
|
|
|
|
|
|
<el-scrollbar height="650px" style="height:96%">
|
|
|
<el-row>
|
|
|
<el-col :span="24">
|
|
|
<div class="title-back">
|
|
|
<span>任务背景</span>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<p style="color:#FFFFFF">
|
|
|
小张在写期末课程小论文的时候，上网查资料发现一篇文章特别有参考价值，但是这篇文章无法复制，小张要怎么做才能获得这篇文章的电子版呢？
|
|
|
</p>
|
|
|
<div class="Step" v-for="item in Step1" :key="item">
|
|
|
<div class="Ellipse">
|
|
|
<div class="Step-item">步骤一</div>
|
|
|
<span >{{ item.stemContent }}</span>
|
|
|
</div>
|
|
|
<!-- <span v-if="item.studentAnswer!==''"><span v-if="!item.correctAnswer.includes(item.studentAnswer)">正确答案:{{ item.correctAnswer }}</span></span> -->
|
|
|
<p><el-radio label="A" size="large" v-model="item.studentAnswer" >A. {{ item.optionA }}</el-radio></p>
|
|
|
<p><el-radio label="B" size="large" v-model="item.studentAnswer" >B. {{ item.optionB }}</el-radio></p>
|
|
|
<div class="footer">
|
|
|
<el-button class="--primary" type="primary" round plain size="large" @click="stepOneanswer" >提交任务</el-button>
|
|
|
<el-button class="--primary " type="primary" round plain size="large" @click="downloadArticle" >点击下载文章图片</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-divider />
|
|
|
<div class="Step2 Step" v-for="item1 in Step2" :key="item">
|
|
|
<div class="Ellipse">
|
|
|
<div class="Step-item">步骤二</div>
|
|
|
<span>{{ item1.stemContent }}</span>
|
|
|
</div>
|
|
|
<p><el-checkbox label="A" size="large" v-model="item1.studentAnswer" >A. {{ item1.optionA }}</el-checkbox></p>
|
|
|
<p><el-checkbox label="B" size="large" v-model="item1.studentAnswer" >B. {{ item1.optionB }}</el-checkbox></p>
|
|
|
<p><el-checkbox label="C" size="large" v-model="item1.studentAnswer" >C. {{ item1.optionC }}</el-checkbox></p>
|
|
|
<p><el-checkbox label="D" size="large" v-model="item1.studentAnswer" >D. {{ item1.optionD }}</el-checkbox></p>
|
|
|
<p><el-checkbox label="E" size="large" v-model="item1.studentAnswer" >E. {{ item1.optionF }}</el-checkbox></p>
|
|
|
<div class="footer">
|
|
|
<el-button class="--primary" type="primary" round plain size="large" @click="stepTwoanswer">提交任务</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-divider />
|
|
|
<div class="Step3 Step">
|
|
|
<div class="Ellipse">
|
|
|
<div class="Step-item">步骤三</div>
|
|
|
<span>识别字符</span>
|
|
|
</div>
|
|
|
<div class="Identify">
|
|
|
<div class="title"><span>请用手机上的文字识别工具对步骤一下载的图片进行文字识别，识别的文字内容请复制在下方文本框中。</span></div>
|
|
|
<el-input v-model="textarea" :rows="2" type="textarea" />
|
|
|
<div class="footer">
|
|
|
<el-button class="--primary" type="primary" round plain size="large" @click="identifyText" >提交任务</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-scrollbar>
|
|
|
<div class="dialog-footer">
|
|
|
<el-button type="primary" round plain size="large" @click="submit">提交任务</el-button>
|
|
|
<el-button type="primary" round plain size="large" @click='reStart'>重新开始</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
<span @click="textDialogVisible=true"></span>
|
|
|
</div>
|
|
|
<el-dialog
|
|
|
custom-class="gdialog"
|
|
|
v-model="textDialogVisible"
|
|
|
title="文字识别OCR"
|
|
|
width="70%">
|
|
|
<el-scrollbar height="666px">
|
|
|
<p> OCR是一个简称，全称叫Optical CharacterRecognition，中文是：光学字符识别。</p>
|
|
|
<p>它的本质是：把图像形状转变为文本字符。</p>
|
|
|
<p>下面说一下，我在教育行业是如何应用OCR的</p>
|
|
|
<p>信息化教学越来越普及，很多教学素材都要搬到信息化平台，比如试卷试题。那么，纸质的试卷要电子化，就会用到OCR识别技术</p>
|
|
|
<p><img src="@/assets/images/szjj/u852.png" alt=""></p>
|
|
|
<p>这么一张图，需要识别成结构化（图片、文字、公式、表格可独立提取出来）的数据，识别结果如下所示：</p>
|
|
|
<p><img src="@/assets/images/szjj/u853.png" alt=""></p>
|
|
|
<p>而且，识别结果还可以下载成word文档，便于老师校对并进行二次编辑.</p>
|
|
|
<p>除此之外，我们常见的各种证件识别、名片识别、车牌识别等，也涉及OCR技术。</p>
|
|
|
<p>OCR技术的实现，总体上可以分为五步：预处理图片、切割字符、识别字符、恢复版面、后处理文字。</p>
|
|
|
<p><img src="@/assets/images/szjj/u856.png" alt=""></p>
|
|
|
<span class="headline">1.预处理图片</span>
|
|
|
<p>我们买回来水果，需要洗一下再吃。如果运气不好的话，还需要挖掉虫眼和糙皮才能吃。我们把吃水果前的这些步骤，叫做CSG（吃水果）的预处理。</p>
|
|
|
<p>在进行OCR之前，也需要对图片进行预处理。因为，一般待识别的图片千奇百怪，来源复杂：有拍照、有扫描、有截图。</p>
|
|
|
<p>拿拍照来说，有夏至那天中午头儿，在阳光直射下拍的；也有人在傍晚，拿着大顶转着圈儿拍的。如果不进行预处理，OCR会很为难，因此需要进行灰度化，二值化，噪声去除，倾斜矫正等预处理过程。 </p>
|
|
|
<p><img src="@/assets/images/szjj/u869.png" alt=""></p>
|
|
|
<span class="headline">2.切割字符</span>
|
|
|
<p>假设，通过了预处理，我们的图片都变得很规范，于是，我们需要切割字符，把每一个字都给他挖出来。</p>
|
|
|
<p><img src="@/assets/images/szjj/u859.png" alt=""></p>
|
|
|
<p>并且，还需要对每个字符做好标记，因为识别完了，还得还原回去。识别完了，结果是一堆单蹦的“1”、“2”、“3”、“+”、“-”字符。我们需要根据它们的相对<br/>位置，还原成“8-7=1”。所以，我们就知道了，哪个题目做对了，做错了，从而给出批改结果。</p>
|
|
|
<span class="headline">3.识别字符</span>
|
|
|
<p>图片究竟是怎么变为字符的？它还能自己学习。计算机通过学习一些样本之后，遇到一些从未遇到过的同类样本，也能正确地识别出结果，原理如下：<br/>
|
|
|
我带着孩子去公园，公园门口有一对大狮子。孩子指着狮子说，狗！我说，哦，那不是狗，那是狮子，跟狗有点像是不是。又走了一段路，公园里又出现一个麒麟的雕塑。孩子指着它说，狮子！我说，那不是狮子。<br/>
|
|
|
孩子说，是狗。我说也不是狗，它叫：麒麟。我感觉到，孩子的大脑在反向矫正信息，这就是监督学习。<br/>
|
|
|
当我给他看狗的图片时，我告诉她这是狗。<br/>
|
|
|
她根据自己的认知，找了几个特征，构建了一个模型：长嘴+尖牙=狗。<br/>
|
|
|
虽然只是看过图片，但是出门遇到真狗，她根据这个模型也认识对了。<br/>
|
|
|
后来，她遇到了狮子，她修改了模型：长嘴+尖牙+鬃毛≠狗=狮子。<br/>
|
|
|
后来，又遇到了麒麟，这个公式变得越来越复杂……决策项越来越多。<br/>
|
|
|
人工智能，就是模拟的人类的神经元，构建神经网络来尝试寻找特征和结果的关系。如果对了，就给这个特征加分。如果，错了，就给这个特征减分。<br/>
|
|
|
识别数字，也是一样。<br/>
|
|
|
比如在学习识别数字6的时候，它随机认为只要有一个圈圈特征，就是数字6。<br/>
|
|
|
验证其他样本时，发现这个随机特征是对的（不对就再换一个特征再试）。于是，它建立了一个模型：只要有圈这个特征，就是6。<br/>
|
|
|
后来，这个模型遇到了数字0。加入新样本后，人工智能发现，0也有圈，但它不是6，也有可能是0。得再找一个特征，于是，新增一条，有勾就是6。后来，它又遇到了9。那勾在上面的就是6。后来，它又遇到了字<br/>
|
|
|
母b……反正计算机有的是算力，能在很短的时间内完成这些学习。上面我是搂着说的，其实即便在32*32像素的小图片上，它随机上几十个特征去做验证，一点都不吃力。<br/>
|
|
|
这就是识别字符的原理。OCR字符的识别从来不难。难的是两头，比如开头的预处理，以及下面要说的后处理。<br/>
|
|
|
</p>
|
|
|
<span class="headline">4.恢复版面</span>
|
|
|
<p>识别出了字符，意义不大，有效地连接起来才能发挥作用。</p>
|
|
|
<p>我们期望的拆分和还原应该是下面这样：</p>
|
|
|
<p><img src="@/assets/images/szjj/u866.png" alt=""></p>
|
|
|
<p>“10+2= 4-3= 5+6=11”这些文本从数据结构上应该是一行。而且，“10+2=”从数据结构上是一个基本单位。因为，我们要对基本单位做运算和批改。这才叫还原，其实并不简单。</p>
|
|
|
<span class="headline">5.后处理文字</span>
|
|
|
<p>
|
|
|
OCR识别的最终目的，是要获得一份准确的、结构化的文本内容。<br/>
|
|
|
单个字符识别，其实是各自为战，前后不商量。<br/>
|
|
|
就比如，遇到一个圆圈形状的字符图片。OCR识别就犯了难，它是数字“0”？汉字“〇”？大写字母“O”？小写字母“o”？中文句号“。”？还是“Q”忘了加尾巴……<br/>
|
|
|
啥都对，啥都不对。<br/>
|
|
|
所以，需要矫正……校正。这两个词，都是高频词，尤其拼音打字jiaozheng，容易出错。其实，也好分辨。看语境，如果我前后提到了“文稿”，那么是“校正”的可能性就大。如果我刚刚说了“牙齿”、“视力”、“角度”啥的，那么基本上就应该是“矫正”了。
|
|
|
OCR识别的最后一步校正也是一样。如果无法确定是数字“0”还是字母“o”，可以观察它相邻的几个字符，下面一图胜千言<br/>
|
|
|
</p>
|
|
|
<p><img src="@/assets/images/szjj/u868.png" alt=""></p>
|
|
|
</el-scrollbar>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
import {getToken,getUserInfo} from "@/utils/auth.js";
|
|
|
import * as commonality from "@/api/commonality.js";
|
|
|
const { proxy } = getCurrentInstance()
|
|
|
const textDialogVisible = ref(false);
|
|
|
const downloadShow = ref(false);
|
|
|
// 答题记录
|
|
|
const errorCount = ref(0);
|
|
|
const answerRecord=ref(0)
|
|
|
// 步骤一题目
|
|
|
const Step1 = ref([]);
|
|
|
const Step2 = ref([]);
|
|
|
const CharacterRecognitionCase=()=>{
|
|
|
commonality.getTextList({userId:JSON.parse(getUserInfo()).userId,model:'文字识别OCR'}).then(res=>{
|
|
|
if(Step1.value.length<1&&Step2.value.length<1){
|
|
|
Step1.value.push(res.data[0])
|
|
|
Step2.value.push(res.data[1])
|
|
|
}
|
|
|
Step1.value.forEach(item=>{
|
|
|
if(item.optionF!==null||item.optionF!==''){
|
|
|
textarea.value=item.optionF
|
|
|
}
|
|
|
if(item.studentAnswer!==''||item.studentAnswer!==null){
|
|
|
answerRecord.value=1
|
|
|
}
|
|
|
if(item.studentAnswer==null){
|
|
|
downloadShow.value=false
|
|
|
return
|
|
|
}
|
|
|
if(item.studentAnswer === item.correctAnswer){
|
|
|
downloadShow.value=true
|
|
|
}
|
|
|
})
|
|
|
|
|
|
Step2.value.forEach(item=>{
|
|
|
answerRecord.value=3
|
|
|
if(item.studentAnswer !== null){
|
|
|
item.studentAnswer=item.studentAnswer.split(',')
|
|
|
}else{
|
|
|
item.studentAnswer=[]
|
|
|
console.log( item.studentAnswer," item.studentAnswer");
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
}
|
|
|
// submitStepOne
|
|
|
const stepOneanswer=()=>{
|
|
|
answerRecord.value=1
|
|
|
commonality.submitStepOne({userId:JSON.parse(getUserInfo()).userId,answer:Step1.value[0].studentAnswer}).then(res=>{
|
|
|
if(res.msg.includes('错误')){
|
|
|
errorCount.value=1
|
|
|
proxy.$modal.msgError(res.msg);
|
|
|
}else{
|
|
|
proxy.$modal.msgSuccess('提交成功');
|
|
|
downloadShow.value=true
|
|
|
|
|
|
}
|
|
|
}).catch(error=>{
|
|
|
errorCount.value=1
|
|
|
})
|
|
|
}
|
|
|
const stepTwoanswer=()=>{
|
|
|
if(answerRecord.value<1){
|
|
|
return proxy.$modal.msgWarning("请先完成步骤一")
|
|
|
}else if(answerRecord.value < 2){
|
|
|
return proxy.$modal.msgWarning("请先下载文章图片再进行此操作")
|
|
|
}
|
|
|
answerRecord.value=3
|
|
|
commonality.submitStepTwo({userId:JSON.parse(getUserInfo()).userId,answer:Step2.value[0].studentAnswer.join(',')}).then(res=>{
|
|
|
if(res.msg.includes('错误')){
|
|
|
errorCount.value=2
|
|
|
proxy.$modal.msgError(res.msg);
|
|
|
}else{
|
|
|
proxy.$modal.msgSuccess('提交成功');
|
|
|
}
|
|
|
}).catch(err=>{
|
|
|
errorCount.value=2
|
|
|
})
|
|
|
}
|
|
|
// 下载文章
|
|
|
const downloadArticle=()=>{
|
|
|
if(answerRecord.value<1){
|
|
|
return proxy.$modal.msgWarning("请先完成上一步")
|
|
|
}
|
|
|
answerRecord.value=2
|
|
|
window.open(`http://118.31.7.2:9868/api/stu/experimental/downloadImg?userId=${JSON.parse(getUserInfo()).userId}&TOKEN=${getToken()}`)
|
|
|
}
|
|
|
|
|
|
// 识别文字
|
|
|
const textarea=ref('')
|
|
|
// 识别文字函数
|
|
|
const identifyText=()=>{
|
|
|
const params={
|
|
|
userId:JSON.parse(getUserInfo()).userId,
|
|
|
context:textarea.value
|
|
|
}
|
|
|
if(answerRecord.value<3){
|
|
|
return proxy.$modal.msgWarning("请先完成前面的题目再进行此操作")
|
|
|
}
|
|
|
answerRecord.value=4
|
|
|
commonality.submitStepThree(params).then(res=>{
|
|
|
proxy.$modal.msgSuccess(res.msg);
|
|
|
}).catch(err=>{
|
|
|
errorCount.value=3
|
|
|
})
|
|
|
}
|
|
|
const submit = () => {
|
|
|
if( textarea.value!==''&& answerRecord.value>2){
|
|
|
answerRecord.value=4
|
|
|
}
|
|
|
if(answerRecord.value < 4){
|
|
|
return proxy.$modal.msgWarning("请先完成实训")
|
|
|
}
|
|
|
commonality
|
|
|
.submitTask({module:'人工智能',numberOfErrors:errorCount.value>10?10:errorCount.value,taskName:'文字之别OCR',userId:JSON.parse(getUserInfo()).userId})
|
|
|
.then((response) => {
|
|
|
proxy.$modal.msgSuccess("提交成功");
|
|
|
textDialogVisible.value=false
|
|
|
})
|
|
|
.catch((error) => {
|
|
|
});
|
|
|
};
|
|
|
// 重新开始
|
|
|
const reStart=()=>{
|
|
|
textarea.value=''
|
|
|
Step1.value.forEach(item=>{
|
|
|
item.studentAnswer=''
|
|
|
})
|
|
|
Step2.value.forEach(item=>{
|
|
|
item.studentAnswer=[]
|
|
|
})
|
|
|
answerRecord.value=0
|
|
|
downloadShow.value=false
|
|
|
}
|
|
|
CharacterRecognitionCase()
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.text-centent {
|
|
|
display: flex;
|
|
|
.left {
|
|
|
position: relative;
|
|
|
width: 100%;
|
|
|
}
|
|
|
.right {
|
|
|
position: absolute;
|
|
|
right: 15px;
|
|
|
top: 150px;
|
|
|
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%;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
div {
|
|
|
// p {
|
|
|
// font-size: 12px;
|
|
|
// }
|
|
|
.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 {
|
|
|
margin-bottom: 34px;
|
|
|
.Ellipse{
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
.Step-item {
|
|
|
width: 52px;
|
|
|
height: 25px;
|
|
|
color: #ffffff;
|
|
|
background: #5621f8;
|
|
|
border-radius: 13px;
|
|
|
font-size: 12px;
|
|
|
text-align: center;
|
|
|
line-height: 25px;
|
|
|
}
|
|
|
span {
|
|
|
display: inline-block;
|
|
|
margin-left: 10px !important;
|
|
|
font-size: 15px;
|
|
|
font-family: Source Han Sans CN;
|
|
|
font-weight: 600;
|
|
|
color: #FFFFFF;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
p {
|
|
|
width: calc(100% - 30%);
|
|
|
padding-left: 22px;
|
|
|
height: 36px;
|
|
|
background: #e9ebfc;
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
}
|
|
|
.--primary {
|
|
|
font-size: 12px;
|
|
|
padding-left: 40px;
|
|
|
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) {
|
|
|
width: 140px !important;
|
|
|
padding-left: 60px;
|
|
|
background: url("@/assets/images/szjj/重新开始.png") no-repeat !important;
|
|
|
background-size:cover;
|
|
|
}
|
|
|
.Identify {
|
|
|
margin-top: 20px;
|
|
|
width: calc(100% - 20%);
|
|
|
height: 420px;
|
|
|
background: #f7f7f7;
|
|
|
border: 1px solid #dcdcdc;
|
|
|
border-radius: 4px;
|
|
|
padding: 0px 18px;
|
|
|
.title {
|
|
|
height: 54px;
|
|
|
line-height: 54px;
|
|
|
span{
|
|
|
font-size: 12px;
|
|
|
font-family: Source Han Sans CN;
|
|
|
font-weight: 500;
|
|
|
line-height: 20px;
|
|
|
}
|
|
|
}
|
|
|
:deep(.el-textarea__inner) {
|
|
|
min-height: 282px !important;
|
|
|
}
|
|
|
.footer {
|
|
|
margin-top: 18px;
|
|
|
}
|
|
|
}
|
|
|
.foo_ter {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
.dis{
|
|
|
display: none !important;
|
|
|
}
|
|
|
// .btn{
|
|
|
// // margin-left: 20px;
|
|
|
// }
|
|
|
}
|
|
|
</style>
|