|
|
<template>
|
|
|
<div class="app-container2">
|
|
|
<div class="Naturallanguageprocessing">
|
|
|
<div class="left">
|
|
|
<el-scrollbar height="620px" style="height: 93%">
|
|
|
<el-row>
|
|
|
<el-col :span="24">
|
|
|
<div class="TaskBackground">
|
|
|
<span style="color: #000000">任务背景</span>
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<div class="gdialog">
|
|
|
<p style="color: #ffffff !important">
|
|
|
hatGPT突然火爆，小张也去了解了ChatGPT，发现ChatGPT是美国人工智能研究实验室OpenAI新推出的一种人工智能技术驱动的自然语言处理工具，使用了Transformer神经网络架构，也是GPT-3.5架构，这是一种用于处理序列数据的模型，拥有语言理解和文本生成能力，尤其是它会通过连接大量的语料库来训练模型，这些语料库包含了真实世界中的对话，使得ChatGPT具备上知天文下知地理，还能根据聊天的上下文进行互动的能力，做到与真正人类几乎无异的聊天场景进行交流。ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。如此强大的工具，背后是什么原理呢，让我们一起来看一下吧。
|
|
|
<br />
|
|
|
<br />
|
|
|
ChatGPT的核心是自然语言处理，接下来我们了解下自然语言处理的过程吧。
|
|
|
</p>
|
|
|
<div class="step">
|
|
|
<div class="step-item">
|
|
|
<span>步骤一</span>
|
|
|
</div>
|
|
|
<span>文本分词</span>
|
|
|
<br />
|
|
|
</div>
|
|
|
<p style="color: #ffffff !important">
|
|
|
中文分词(Chinese Word Segmentation)指的是将一个汉字序列切分成一个个单独的词。简单的讲，中文分词就是让计算机系统在汉语文本中的词与词之间自动加上空格或其他边界标记。
|
|
|
<br />
|
|
|
|
|
|
请对下面两句话进行分词，分词结果请去掉标点符号：
|
|
|
<br />
|
|
|
</p>
|
|
|
<p style="color: #ffffff !important">这个门把手坏了，请你来修一下。</p>
|
|
|
<el-row>
|
|
|
<el-col :span="24">
|
|
|
<el-input v-model.trim="text1.input1" style="width: 160px; margin-right: 15px" @change="textChanged(text1, 1)" />
|
|
|
<el-input v-model.trim="text1.input2" style="width: 160px; margin-right: 15px" @change="textChanged(text1, 1)" />
|
|
|
<el-input v-model.trim="text1.input3" style="width: 160px; margin-right: 15px" @change="textChanged(text1, 1)" />
|
|
|
<el-input v-model.trim="text1.input4" style="width: 160px; margin-right: 15px" @change="textChanged(text1, 1)" />
|
|
|
<el-input v-model.trim="text1.input5" style="width: 160px; margin-right: 15px" @change="textChanged(text1, 1)" />
|
|
|
<el-input v-model.trim="text1.input6" style="width: 160px; margin-right: 15px" @change="textChanged(text1, 1)" />
|
|
|
<el-input v-model.trim="text1.input7" style="width: 160px; margin-right: 15px" @change="textChanged(text1, 1)" />
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<p style="color: #ffffff !important">快把手拿开，这里危险不能摸。</p>
|
|
|
<el-row>
|
|
|
<el-col :span="24">
|
|
|
<el-input v-model.trim="text2.input1" style="width: 147px; margin-right: 5px" @change="textChanged(text2, 2)" />
|
|
|
<el-input v-model.trim="text2.input2" style="width: 147px; margin-right: 5px" @change="textChanged(text2, 2)" />
|
|
|
<el-input v-model.trim="text2.input3" style="width: 147px; margin-right: 5px" @change="textChanged(text2, 2)" />
|
|
|
<el-input v-model.trim="text2.input4" style="width: 147px; margin-right: 5px" @change="textChanged(text2, 2)" />
|
|
|
<el-input v-model.trim="text2.input5" style="width: 147px; margin-right: 5px" @change="textChanged(text2, 2)" />
|
|
|
<el-input v-model.trim="text2.input6" style="width: 147px; margin-right: 5px" @change="textChanged(text2, 2)" />
|
|
|
<el-input v-model.trim="text2.input7" style="width: 147px; margin-right: 5px" @change="textChanged(text2, 2)" />
|
|
|
<el-input v-model.trim="text2.input8" style="width: 147px; margin-right: 5px" @change="textChanged(text2, 2)" />
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<p style="color: #ffffff !important">请问上面两句话中“把手”有何区别？计算机是如何识别两句话中“把手”的不同含义的？</p>
|
|
|
<div class="answer">
|
|
|
<!-- <span v-if="item.correctAnswer!==null& item.studentAnswer!==item.correctAnswer">正确答案:{{item.correctAnswer}}</span> -->
|
|
|
<p><el-checkbox v-model="answer.studentAnswer" label="A" size="large" @change="answerChanged(answer, '1')">A.上面那句话中把手是名词，指门把手，用于开关门的，门把手可作为一个词</el-checkbox></p>
|
|
|
<p><el-checkbox v-model="answer.studentAnswer" label="B" size="large" @change="answerChanged(answer, '1')">B.下面那句话中把手是动宾结构，是挪开手的意思，这里的把手不能作为一个词</el-checkbox></p>
|
|
|
<p><el-checkbox v-model="answer.studentAnswer" label="C" size="large" @change="answerChanged(answer, '1')">C.计算机可以根据上下文语境，语义解析，大规模语料库等推断两句话中“把手”的不同含义</el-checkbox></p>
|
|
|
<p><el-checkbox v-model="answer.studentAnswer" label="D" size="large" @change="answerChanged(answer, '1')">D.人很容易理解这两句中“把手”的不同，但是这对计算机来说是比较难的</el-checkbox></p>
|
|
|
</div>
|
|
|
<el-divider />
|
|
|
<div class="step">
|
|
|
<div class="step-item">
|
|
|
<span>步骤二</span>
|
|
|
</div>
|
|
|
<span>词性标注</span>
|
|
|
<br />
|
|
|
</div>
|
|
|
<p style="color: #ffffff !important">
|
|
|
根据上一步文本分词相关知识，我们知道中文中同样一个词在不同的句子，不同的上下文环境中有不同的含义，因此要结合上下文进行词性标注，词性标注是自然语言处理
|
|
|
<br />
|
|
|
中一项非常重要的基础性工作，词性标注主要被应用于文本挖掘（text mining）和NLP领域，是各类基于文本的机器学习任务，例如语义分析等的预处理步骤。
|
|
|
</p>
|
|
|
<p style="color: #ffffff !important">
|
|
|
请对下面两句话进行词性标注:
|
|
|
<br />
|
|
|
<br />
|
|
|
1.警察制服了小偷
|
|
|
<br />
|
|
|
<br />
|
|
|
2.环卫工上班必须穿制服
|
|
|
<br />
|
|
|
<br />
|
|
|
上面两句话中“制服”都是一个词语，它们有什么不同？下面说法正确的是：
|
|
|
</p>
|
|
|
<div class="answer">
|
|
|
<p><el-checkbox v-model="answer2.studentAnswer" label="A" size="large" @change="answerChanged(answer2, '2')">A.上面那句话中制服是动词</el-checkbox></p>
|
|
|
<p><el-checkbox v-model="answer2.studentAnswer" label="B" size="large" @change="answerChanged(answer2, '2')">B.下面那句话中制服是名词</el-checkbox></p>
|
|
|
<p><el-checkbox v-model="answer2.studentAnswer" label="C" size="large" @change="answerChanged(answer2, '2')">C.只有人才能识别出这两句话中制服的不同，目前计算机还无法识别这两句话中制服的不同含义</el-checkbox></p>
|
|
|
<p><el-checkbox v-model="answer2.studentAnswer" label="D" size="large" @change="answerChanged(answer2, '2')">D.让计算机识别出这两句话中“制服”的不同并不容易，依赖于强大的语料库和算法。</el-checkbox></p>
|
|
|
</div>
|
|
|
<el-divider />
|
|
|
<div class="step">
|
|
|
<div class="step-item">
|
|
|
<span>步骤三</span>
|
|
|
</div>
|
|
|
<span>文本摘要</span>
|
|
|
<br />
|
|
|
</div>
|
|
|
<p style="color: #ffffff !important">
|
|
|
对于长文本的文本总结，在信息快速膨胀的时代尤其有意义，如对每日新闻的自动总结可以快速为我们提供有效的信息。文本总结模型有两种可用的方法，一种是摘要式的方法，即从 语义方面提供更加简单精炼的总结；另一种是抽取式的方法，即通过对原文中的关键语句进行重新排列，最大限度地提炼原文的主要信息。抽取式的方法不需要人工标注和训练，因此 更加简单明了。
|
|
|
<br />
|
|
|
请针对下面这段文字进行总结，撰写100字以内的摘要，再点击自动生成摘要，跟自己撰写的摘要对比下，体验下AI的强大功能吧。
|
|
|
</p>
|
|
|
<div class="Abstract">
|
|
|
<el-scrollbar height="300px">
|
|
|
<div class="texts" style="color: #000000 !important">
|
|
|
大模型的高速发展和渗透带来生成式人工智能的广泛应用，形形色色的生成式人工智能插件在短短几个月内交互到了人类社会的生产生活中，引发新一轮智能化浪潮。正如数十年前计算机技术、互联网革命引领了技术与生产方式的历史性变革，生成式人工智能开始深刻地影响人们生活的方方面面。当我们使用生成式人工智能高效搜索、生成文本、提高工作效率，当我们感受训练聊天机器人的新鲜感，当我们在文本之上使用图像生成、音频视频生成，生成式人工智能的潜在风险也在不知不觉中逐渐渗透。
|
|
|
<br />
|
|
|
<br />
|
|
|
科技创新的二元性历来受到社会广泛关注，从互联网的数据隐私到智能机器人的道德伦理，再到生成式人工智能对于个人隐私的处理和引发潜在欺诈行为风险，如何规范应用值得我们深度思考。
|
|
|
<br />
|
|
|
<br />
|
|
|
用户会给生成式人工智能工具提供个人、公司或所属社会组织的非公开信息，模型获得了这些数据，便有可能在后续各类生成任务中泄露信息。过去担忧手机APP等软件在用户未察觉时对其隐私进行观察和调用，而在生成式人工智能应用场景中，亦存在隐私和信息泄露风险。例如，生成式人工智能可以被用来创建背景丰富、看似来源可靠的信息，进而诱导用户点击恶意链接或下载恶意软件；可以塑造丰富立体的社交媒体形象，甚至模仿某人的声音或外貌，引导造谣与诈骗；可以被训练为向特定用户推荐误导性内容，或在某些情况下加强他们已有的偏见，等等。
|
|
|
<br />
|
|
|
<br />
|
|
|
生成式人工智能可处理海量数据，但也给知识产权保护、个人隐私保护、打击虚假信息等方面带来新挑战。积极推进人工智能治理，法治与社会教育是促进守正创新的两大抓手。
|
|
|
<br />
|
|
|
<br />
|
|
|
一方面，营造安全有序的法治环境，规范生成式人工智能服务。为减少虚假信息的传播，建议明确禁止或限制其在特定领域的使用。例如，批量化的虚拟形象创建和对话；为降低隐私泄露风险，建议规定生成式人工智能使用个人数据时需经用户同意，确保数据隐私得到保护，用户有权决定哪些数据可以被使用，以及生成的内容如何使用；为减少对社会公序良俗的破坏，建议严格限制仇恨言论、歧视性内容创建。可考量设立专门的机构负责技术审查和认证，评估生成式人工智能系统的安全性、可信度、伦理问题等。
|
|
|
</div>
|
|
|
</el-scrollbar>
|
|
|
<el-input type="textarea" style="width: calc(100% - 20px); margin-top: 10px" placeholder="请针对上述文本给出100-300字的文本摘要" v-model.trim="digest" />
|
|
|
<div class="Abstract-footer">
|
|
|
<el-button type="primary" size="mini" @click="generateAbstract">提交</el-button>
|
|
|
<el-button type="primary" size="mini" @click="generateAbstractAuto">自动生成摘要</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-divider />
|
|
|
<div class="step">
|
|
|
<div class="step-item">
|
|
|
<span>步骤四</span>
|
|
|
</div>
|
|
|
<span>词云</span>
|
|
|
<br />
|
|
|
</div>
|
|
|
<p style="color: #ffffff !important">
|
|
|
词云主要提供了一种观察社交媒体网站上的热门话题或搜索关键字的一种方式，它可以对网络文本中出现频率较高的“关键词”予以视觉上的突出，形成“关键词云层”或“关键词渲染”，从而过滤掉大量的文本信息，使浏览网页者只要一眼扫过文本就可以领略文本的主旨。
|
|
|
<br />
|
|
|
<br />
|
|
|
|
|
|
接下来来体验下词云生成吧：
|
|
|
</p>
|
|
|
<div class="Abstract">
|
|
|
<el-scrollbar height="300px">
|
|
|
<div class="texts">
|
|
|
人工智能发展迎来新趋势
|
|
|
<br />
|
|
|
通顺的自然语言生成 通达的全领域知识体系覆盖 通畅的人机交互接口
|
|
|
<br />
|
|
|
人工智能发展迎来新趋势（AI前沿观察）
|
|
|
<br />
|
|
|
中央经济工作会议提出，要大力推进新型工业化，发展数字经济，加快推动人工智能发展。
|
|
|
<br />
|
|
|
2023年10月18日，中国在第三届“一带一路”国际合作高峰论坛期间发布《全球人工智能治理倡议》，围绕人工智能发展、安全、治理三方面系统阐述了人工智能治理中国方案。
|
|
|
<br />
|
|
|
近年来，全球人工智能技术快速发展，成为推动科技和产业加速发展的重要力量，对经济社会发展和人类文明进步产生深远影响。人工智能技术发展现状如何？有哪些应用？未来趋势怎样？记者采访了相关专家。
|
|
|
<br />
|
|
|
人工智能处理复杂任务的能力大为提升
|
|
|
<br />
|
|
|
当前，人工智能技术已进入实用阶段，正深刻地改变着人类的生产生活。
|
|
|
<br />
|
|
|
“近70年的发展历程中，人工智能经历了灌输规则、灌输知识、从数据中学习这三个阶段。近年来在全球迅速发展的人工智能大模型技术，其依托的基本模型都基于‘大数据+大算力+强算法’训练，这是人工智能发展第三阶段的典型体现。”北京智源人工智能研究院院长黄铁军说。
|
|
|
<br />
|
|
|
目前，各类人工智能大模型处于迅猛发展之中，全球众多高科技企业纷纷投身人工智能大模型建设。
|
|
|
<br />
|
|
|
“现在围绕人工智能大模型已形成相对成熟的技术框架，但产品和生态尚在发展形成之中。”中国科学院自动化研究所副所长、研究员曾大军说，“总体而言，人工智能大模型的技术发展历程相比以往任何人工智能技术都更为迅猛，其影响力也是史无前例的。”
|
|
|
<br />
|
|
|
人工智能大模型的出现，为通用人工智能的实现打开了新的想象空间，大大提升了人工智能处理复杂任务的能力。
|
|
|
<br />
|
|
|
“比如，基于人工智能大语言模型的聊天机器人能够实现高质量的信息整合、翻译和简单问题求解与规划。”曾大军说，“这类机器人受到关注，主要是因为其已初步具备通用人工智能的部分特性，包括通顺的自然语言生成、全领域的知识体系覆盖、跨任务场景的通用处理模型、通畅的人机交互接口。”
|
|
|
<br />
|
|
|
不过，目前人工智能大模型能力仍有局限性。
|
|
|
<br />
|
|
|
“一方面，由于人工智能大模型自身结构和机制漏洞，有被恶意攻击的风险；另一方面，人工智能大模型自身的知识表达和学习模式还存在缺陷，导致其回答会有常识性错误、杜撰内容等。”曾大军说，“人工智能学者们正在围绕这些问题进行攻关。”
|
|
|
<br />
|
|
|
人工智能加速迈向全面应用新阶段
|
|
|
<br />
|
|
|
“我是刚入学的大一计算机专业学生，想选修人工智能课程，需要做什么准备？”“你需要学习基础数学知识、编程语言，学习机器学习算法，关注技术趋势……”这段对话并非出自师生之间，而是学生与人工智能之间的问答。
|
|
|
<br />
|
|
|
2023年8月，浙江大学联合高等教育出版社等发布“智海—三乐”教育垂直大模型，在核心教材、领域论文和学位论文等语料和专业指令数据集的基础上，可提供智能问答、试题生成、学习导航、教学评估等服务，现已在多所高校应用。
|
|
|
<br />
|
|
|
“我们把这些教材拆成语句、段落、篇章去‘喂给’大模型，这些高质量的语料会合成词与词之间的概率关联，给学生以启迪。”浙江大学教授吴飞说。
|
|
|
<br />
|
|
|
工业质检、知识管理、代码生成、语音交互……当前，中国人工智能正从单点应用向多元化应用、从通用场景向行业特定场景不断深入，加速迈向全面应用新阶段。特别是随着人工智能大模型的突破和生成式人工智能的兴起，人工智能得以更好处理生产生活中的复杂问题，为各行业实现产品和流程革新提供了更加先进的工具和手段。
|
|
|
<br />
|
|
|
预测一个台风未来10天的路径，过去需要在3000台服务器上花费5小时进行仿真，现在基于预训练的盘古气象大模型，10秒内就可以获得更精确的预测结果；字数将近4000万的一套古籍，研究人员利用人工智能，3个多月就完成了识别、点校、上线发布……
|
|
|
<br />
|
|
|
“人工智能大模型带动生成式人工智能产业迅速发展，在科学探索、技术研发、艺术创作、企业经营等诸多领域都带来了巨大的创新机遇。”中国工程院院士王恩东说。
|
|
|
<br />
|
|
|
在供需两侧的共同推动下，技术创新成果开始大规模地从实验室研究走向产业实践，人工智能产业化进程不断加快。据不完全统计，截至2023年10月，中国累计发布200余个人工智能大模型，科研院所和企业成为开发主力军。
|
|
|
<br />
|
|
|
在华为混合云总裁尚海峰看来，以人工智能为代表的创新技术，正在加快重塑各个行业。
|
|
|
<br />
|
|
|
科技部新一代人工智能发展研究中心主任赵志耘表示：“人工智能技术正沿着追求更高精度、挑战更复杂任务、拓展能力边界等方向持续演进。场景创新成为人工智能技术升级、产业增长的新路径。”
|
|
|
<br />
|
|
|
浪潮信息高级副总裁刘军认为，未来，人工智能还需要进一步去深入应用场景、赋能具体的产业环节。“这个过程很难靠一家厂商独立完成，需要产业链、创新生态更多的深度协同。”刘军说。
|
|
|
<br />
|
|
|
更加通用的人工智能有望实现
|
|
|
<br />
|
|
|
专家表示，以人工智能大模型为代表的人工智能第三发展阶段，未来会有一段较长的发展红利期，将成为新一轮科技革命和产业变革的重要驱动力量。
|
|
|
<br />
|
|
|
中国科学院自动化研究所对人工智能大模型的演进态势做了研判，曾大军介绍了其观点：应用和创新生态正在发生剧变或至少有剧变的潜质，人工智能大模型推动决策智能迅猛发展，人工智能大模型小型化和领域专业化需求非常迫切，更加通用的人工智能有望实现。
|
|
|
<br />
|
|
|
曾大军说：“人工智能大模型就像一个人类大脑的雏形，通过‘喂给’各种数据，实现各种智能能力。人工智能大模型正在重新定义人与计算机的互动关系，有望成为人机交互的主要接口。”
|
|
|
<br />
|
|
|
曾大军着重强调了人工智能大模型小型化和领域化的发展。他表示，现有人工智能大模型的算力和能耗挑战，会促使很多工作向领域专用化、轻量级的小模型或大小模型混搭的方向发展，特别是金融、教育、医疗、交通等领域，力求降低大模型的成本。
|
|
|
<br />
|
|
|
黄铁军认为人工智能将从信息智能到实体智能发展，视觉、具身人工智能大模型将是下一个爆发点。“大数据是世界的表达，从中训练出的语言认知模型可以支持信息服务，语言类大模型能够提高自动驾驶、机器人等实体的智能水平，但还需要视觉、听觉、具身、交互等技术的发展。”
|
|
|
<br />
|
|
|
黄铁军告诉记者，目前的智能涌现还只是静态涌现，还不具备人脑的动态涌现能力。“未来有望通过类脑智能实现真正拥有动态涌现能力的人工智能。”
|
|
|
<br />
|
|
|
曾大军认为，人工智能大模型有望发展成为更加通用的人工智能。“在不久的将来，人工智能大模型将超越信息域，结合硬件设施，发展成为与物理和人类世界互动的具象智能，逐步缩小与真正的‘通用人工智能’的差距。”
|
|
|
<br />
|
|
|
“预计未来智能程度还将不断提高，对各行业的带动和影响更为深刻，这是其他技术难以比肩的。”黄铁军说。
|
|
|
<br />
|
|
|
在曾大军看来，决策科学加人工智能融合创新，能够碰撞出非常多的火花。
|
|
|
<br />
|
|
|
“人工智能，特别是经过知识自动推理的加持之后，能够实现从已知到未知的跨越。”曾大军进一步解释，“更高层级的决策功能，比如产业态势的研判、风险评估等，这种从未知到未知的决策，机器智能有可能起到很大的辅助作用。”（记者 吴月辉 谷业凯）
|
|
|
</div>
|
|
|
</el-scrollbar>
|
|
|
<div class="Wordcloud">
|
|
|
<div class="left">
|
|
|
<el-button type="primary" size="mini" @click="generateWordcloud">生成词云图</el-button>
|
|
|
</div>
|
|
|
<div class="right1"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-scrollbar>
|
|
|
<div class="dialog-footer">
|
|
|
<el-button @click="submit" class="tj">提交任务</el-button>
|
|
|
<el-button type="primary" class="tj" @click="restart">重新开始</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
<span @click="NaturallanguageprocessingVisible = true"></span>
|
|
|
</div>
|
|
|
<el-dialog custom-class="gdialog" v-model="NaturallanguageprocessingVisible" title="自然语言处理" width="66%">
|
|
|
<el-scrollbar height="650px">
|
|
|
<p>
|
|
|
自然语言处理( Natural Language Processing, NLP)是计算机科学领域与人工智能领域中的一个重要方向。它研究能实现人与计算机之间用自然语言进行有效通信的各种理论和方法。自然语言处理是一门融语言学、计算机科学、数学于一体的科学。因此，这一领域的研究将涉及自然语言，即人们日常使用的语言，所以它与语言学的研究有着密切的联系，但又有重要的区别。自然语言处理并不是一般地研究自然语言，而在于研制能有效地实现自然语言通信的计算机系统，特别是其中的软件系统。因而它是计算机科学的一部分。
|
|
|
<br />
|
|
|
<br />
|
|
|
自然语言处理主要应用于机器翻译、舆情监测、自动摘要、观点提取、文本分类、问题回答、文本语义对比、语音识别、中文OCR等方面。
|
|
|
<br />
|
|
|
<br />
|
|
|
针对文本数据，自然语言处理流程如下：
|
|
|
<br />
|
|
|
<br />
|
|
|
<span class="headline">1.文本分词</span>
|
|
|
<br />
|
|
|
中文分词就是让计算机系统在汉语文本中的词与词之间自动加上空格或其他边界标记。中文分词是文本挖掘的基础，对于输入的一段中文，成功的进行中文分词，可以达到电脑自动识别语句含义的效果。
|
|
|
<br />
|
|
|
中文分词技术属于自然语言处理技术范畴，对于一句话，人可以通过自己的知识来明白哪些是词，哪些不是词，但如何让计算机也能理解？其处理过程就是分词算法。
|
|
|
<br />
|
|
|
有了成熟的分词算法，是否就能容易的解决中文分词的问题呢？事实远非如此。中文是一种十分复杂的语言，让计算机理解中文语言更是困难。在中文分词过程中，有两大难题一直没有完全突破。
|
|
|
<br />
|
|
|
<br />
|
|
|
歧义识别
|
|
|
<br />
|
|
|
歧义是指同样的一句话，可能有两种或者更多的切分方法。例如，在句子“这个门把手坏了”中，“把手”是个词，但在句子“请把手拿开”中，“把手”就不是一个词；在句子“将军任命了一名中将”中，“中将”是个词，但在句子“产量三年中将增长两倍”中，“中将”就不再是词。这些词计算机又如何去识别?
|
|
|
<br />
|
|
|
<br />
|
|
|
如果交集型歧义和组合型歧义计算机都能解决的话，在歧义中还有一个难题，是真歧义。真歧义意思是给出一句话，由人去判断也不知道哪个应该是词，哪个应该不是词。例如：“乒乓球拍卖完了”，可以切分成“乒乓 球拍 卖 完 了”、也可切分成“乒乓球 拍卖 完 了”，如果没有上下文其他的句子，恐怕谁也不知道“拍卖”在这里算不算一个词。
|
|
|
<br />
|
|
|
<br />
|
|
|
新词识别
|
|
|
<br />
|
|
|
命名实体（人名、地名）、新词，专业术语称为未登录词。也就是那些在分词词典中没有收录，但又确实能称为词的那些词。最典型的是人名，人可以很容易理解。句子“王军虎去广州了”中，“王军虎”是个词，因为是一个人的名字，但要是让计算机去识别就困难了。如果把“王军虎”做为一个词收录到字典中去，全世界有那么多名字，而且每时每刻都有新增的人名，收录这些人名本身就是一项既不划算又巨大的工程。即使这项工作可以完成，还是会存在问题，例如：在句子“王军虎头虎脑的”中，“王军虎”还能不能算词？
|
|
|
<br />
|
|
|
<br />
|
|
|
除了人名以外，还有机构名、地名、产品名、商标名、简称、省略语等都是很难处理的问题，而且这些又正好是人们经常使用的词，因此对于搜索引擎来说，分词系统中的新词识别十分重要。新词识别准确率已经成为评价一个分词系统好坏的重要标志之一。
|
|
|
<br />
|
|
|
<br />
|
|
|
<span class="headline">2.词性标注</span>
|
|
|
<br />
|
|
|
根据上一步文本分词相关知识，我们知道中文中同样一个词在不同的句子，不同的上下文环境中有不同的含义，因此要结合上下文进行词性标注，词性标注（Part-Of-Speech tagging, POS tagging）也被称为语法标注（grammatical tagging）或词类消疑（word-category disambiguation），是语料库语言学（corpus linguistics）中将语料库内单词的词性按其含义和上下文内容进行标记的文本数据处理技术。
|
|
|
<br />
|
|
|
<br />
|
|
|
词性标注在本质上是分类问题，将语料库中的单词按词性分类。一个词的词性由其在所属语言的含义、形态和语法功能决定。以汉语为例，汉语的词类系统有18个子类，包括7类体词，4类谓词、5类虚词、代词和感叹词。词类不是闭合集，而是有兼词现象，例如“制服”在作为“服装”和作为“动作”时会被归入不同的词类，因此词性标注与上下文有关 [3] 。对词类的理论研究可以得到基于人工规则的词性标注方法，这类方法对句子的形态进行分析并按预先给定的规则赋予词类
|
|
|
<br />
|
|
|
<br />
|
|
|
词性标注可以由人工或特定算法完成，使用机器学习（machine learning）方法实现词性标注是自然语言处理（Natural Language Processing, NLP）的研究内容。常见的词性标注算法包括隐马尔可夫模型（Hidden Markov Model, HMM）、条件随机场（Conditional random fields, CRFs）等。
|
|
|
<br />
|
|
|
<br />
|
|
|
<span class="headline">3.分类管理</span>
|
|
|
<br />
|
|
|
分类管理是进行文本分类之前先预定义类别，例如新闻资讯中的体育、政治、科技等类别，因此我们需要先进行分类器训练，让系统知道什么样的文本属于哪一类，本系统使用了训练文本集训练分类器，人为定义一个类别，上传语料文件，对系统进行训练，训练完之后，系统会自动把与语料内容相关度比较高的分为一类，语料内容越丰富，分类越准确。
|
|
|
<br />
|
|
|
<br />
|
|
|
<span class="headline">4.文本分类</span>
|
|
|
<br />
|
|
|
文本分类是用电脑对文本集按照一定的分类体系或标准进行自动分类标记。它根据一个已经被标注的训练文档集合, 找到文档特征和文档类别之间的关系模型, 然后利用这种学习得到的关系模型对新的文档进行类别判断。
|
|
|
<br />
|
|
|
伴随着信息的爆炸式增长，人工标注数据已经变得耗时、质量低下，且受到标注人主观意识的影响。因此，利用机器自动化的实现对文本的标注变得具有现实意义，将重复且枯燥的文本标注任务交由计算机进行处理能够有效克服以上问题，同时所标注的数据具有一致性、高质量等特点。
|
|
|
<br />
|
|
|
<br />
|
|
|
其应用场景众多，包括：
|
|
|
<br />
|
|
|
情感分析（Sentiment Analyse）
|
|
|
<br />
|
|
|
主题分类（Topic Labeling）
|
|
|
<br />
|
|
|
问答任务(Question Answering)
|
|
|
<br />
|
|
|
意图识别(Dialog Act Classification)
|
|
|
<br />
|
|
|
自然语言推理（Natural Language Inference）
|
|
|
<br />
|
|
|
<br />
|
|
|
其分类标签可以是：
|
|
|
<br />
|
|
|
情感分析（积极、消极、中性）
|
|
|
<br />
|
|
|
主题分类（金融、体育、军事、社会）
|
|
|
<br />
|
|
|
问答任务（是、否）
|
|
|
<br />
|
|
|
意图识别（天气查询、歌曲搜索、随机闲聊）
|
|
|
<br />
|
|
|
自然语言推理（导出、矛盾、中立）
|
|
|
<br />
|
|
|
<br />
|
|
|
<span class="headline">5.文本摘要</span>
|
|
|
<br />
|
|
|
文本摘要是指通过各种技术，对文本或者是文本的集合，抽取、总结或是精炼其中的要点信息，用以概括和展示原始文本的主要内容或大意。作为文本生成任务的主要方向之一，从本质上而言，这是一种信息压缩技术。文本摘要技术是信息爆炸时代，提升人们获取有效信息效率的关键技术之一，如何从冗余、非结构化的长文本中提炼出关键信息，构成精简通顺的摘要，是文本摘要的核心问题。
|
|
|
<br />
|
|
|
<br />
|
|
|
按照实现技术方案的不同，可以分为抽取式文本摘要、生成式文本摘要；
|
|
|
<br />
|
|
|
抽取式摘要，即直接从原文中抽取一些预先设置好的单元来组成摘要，抽取单元一般为句子、短语或词语，目前大多数方法都是以句子作为抽取单元。抽取式的方法基于一个假设，一篇文档的核心思想可以用文档中的某一句或几句话来概括，那么摘要的任务就变成了找到文档中最重要的几句话。
|
|
|
<br />
|
|
|
生成式摘要，它试图通过理解原文的意思来生成摘要，其实就是模仿人类写摘要的方式，可能会用 原文中的词 ，也可能会用新词 (未出现在原文中的词)来做表述。其优点是相比于抽取式而言用词更加灵活 ，因为所产生的词可能从未在原文中出现过。 总的来说，抽取式的文本摘要直接从原文中摘取完整的句子作为文章的摘要，所以通常在语法层面的正确性以及对原文概括的准确性上比较占优势，如同按部就班的老实人，令人心安；生成式的文本摘要可以产生原文中没有的单词和短语，容易产生事实性错误，好比一位逍遥的江湖侠客，蛟龙终非池中物，目前，我们这位侠客虽然艳惊四座，但却容易野马脱缰，返回不符合事实的结果。
|
|
|
<br />
|
|
|
<br />
|
|
|
<span class="headline">6.相似度计算</span>
|
|
|
<br />
|
|
|
在自然语言处理中，我们经常需要判定两个东西是否相似。
|
|
|
<br />
|
|
|
比如，在微博的热点话题推荐那里，我们需要比较微博之间的相似度，让相似度高的微博聚集在一起形成一个簇，提出一个主题。
|
|
|
<br />
|
|
|
在问答系统中，比如说人工客服，我们需要提前准备好问题和一些答案，让用户输入的问题与题库中的问题进行相似度的比较，最后输出答案。
|
|
|
<br />
|
|
|
在推荐系统中，我们需要提取一个用户的所有物品，在根据这个物品找到对应的用户群，比较两个用户之间的相似性，在进行相应的推荐（协同过滤）。
|
|
|
<br />
|
|
|
在对语料进行预处理的时候，我们需要给予文本的相似度，把相似度高的重复主题过滤掉。
|
|
|
<br />
|
|
|
如果是文本分析，它首先就要用到分词技术，然后去掉不必要的词（语气词，连接词）。然后对词给一个抽象的量表示权重，最后在用一些方法去统计出整体的相似度。
|
|
|
<br />
|
|
|
<br />
|
|
|
<span class="headline">7.情感分析</span>
|
|
|
<br />
|
|
|
情感分析是指通过文本来挖掘人们对于产品、服务、组织、个人、事件等的观点、情感倾向、态度等。情感分析是随着互联网发展而产生的，早期主要用于对网上销售商品的用户评语的分析，以便判断用户对其所购商品是“喜欢”还是“不喜欢”。后期随着自媒体的流行，情感分析技术更多地用于识别话题发起者、参与者的情感趋向，从中判断或挖掘话题中的价值，由此来分析相关舆情。
|
|
|
<br />
|
|
|
情感分析的流程包括文本预处理、特征标注与选择、训练模型、调整模型。本系统是先新建情感词，用户定义情感词，并上传语料对系统进行训练，训练之后系统即可自动对用户输入的文本进行情感分析，给出情感分析结果，语料内容越丰富则分析结果越准确。
|
|
|
<br />
|
|
|
随着近年来深度学习的发展，以及文本数据的可获取性不断提升，情感分析在自然语言处理研究领域中日渐举足轻重，慢慢从理论研究领域拓展到实践应用中。目前主要用于预测电影票房、股票趋势、舆情分析、改进服务及产品、了解用户体验等。
|
|
|
<br />
|
|
|
<br />
|
|
|
<span class="headline">8.数据可视化</span>
|
|
|
<br />
|
|
|
数据可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息。但是，这并不就意味着数据可视化就一定因为要实现其功能用途而令人感到枯燥乏味，或者是为了看上去绚丽多彩而显得极端复杂。为了有效地传达思想概念，美学形式与功能需要齐头并进，通过直观地传达关键的方面与特征，从而实现对于相当稀疏而又复杂的数据集的深入洞察。
|
|
|
<br />
|
|
|
数据可视化是以图形的方式呈现结构化或非结构化数据，从而将隐藏在数据中的信息直接呈现给人们。它不仅仅是使用数据可视化工具将数据转化为图形。相反，它是从数据的角度看待世界。换句话说，数据可视化的对象是数据，把可视化作为探索世界的手段。
|
|
|
<br />
|
|
|
数据可视化最大重要性是在于它帮助人们更快地理解数据。寻找堆积如山的信息之间的联系并不容易，但图形和图表可以将无形的信息，转化为可见的图形符号，直接清晰地表达出来，帮助你快速发现关键点。研究表明，人们记得他们看到的大约80%的事情，但只记得他们读过的20%。大脑记忆图像的速度比抽象单词快一百万倍。所以，可视化数据可以加深人们对信息的记忆。
|
|
|
</p>
|
|
|
</el-scrollbar>
|
|
|
<template #footer></template>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
import * as commonality from "@/api/commonality";
|
|
|
// import {getUserId} from "@/utils/auth.js";
|
|
|
import { getUserInfo } from "@/utils/auth";
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
const NaturallanguageprocessingVisible = ref(false);
|
|
|
const text1 = ref({
|
|
|
input1: "",
|
|
|
input2: "",
|
|
|
input3: "",
|
|
|
input4: "",
|
|
|
input5: "",
|
|
|
input6: "",
|
|
|
input7: "",
|
|
|
});
|
|
|
const text2 = ref({
|
|
|
input1: "",
|
|
|
input2: "",
|
|
|
input3: "",
|
|
|
input4: "",
|
|
|
input5: "",
|
|
|
input6: "",
|
|
|
input7: "",
|
|
|
input8: "",
|
|
|
});
|
|
|
let participleRecord = ref(0); //分词记录
|
|
|
// 正确计数
|
|
|
const correctCount = ref(0);
|
|
|
// 错误计数
|
|
|
const errorCount = ref(0);
|
|
|
const digest = ref(""); //摘要
|
|
|
const digest1 = ref(""); //摘要
|
|
|
const restartStatus = ref(false);
|
|
|
const textChanged = (text, setp) => {
|
|
|
const sentence1 = "这个/门把手/坏/了/请你/来/修一下";
|
|
|
const sentence2 = "快/把/手/拿开/这里/危险/不能/摸";
|
|
|
if (Object.values(text).every((value) => value !== "")) {
|
|
|
if (setp == 1) {
|
|
|
if (JSON.stringify(Object.values(text)) === JSON.stringify(sentence1.split("/"))) {
|
|
|
proxy.$modal.msgSuccess("分词成功");
|
|
|
participleRecord.value = 1;
|
|
|
correctCount.value = 1;
|
|
|
} else {
|
|
|
proxy.$modal.msgWarning("分词错误，请重新输入");
|
|
|
errorCount.value++;
|
|
|
}
|
|
|
} else {
|
|
|
if (JSON.stringify(Object.values(text)) === JSON.stringify(sentence2.split("/"))) {
|
|
|
proxy.$modal.msgSuccess("分词成功");
|
|
|
participleRecord.value = 2;
|
|
|
correctCount.value = 2;
|
|
|
} else {
|
|
|
proxy.$modal.msgWarning("分词错误，请重新输入");
|
|
|
errorCount.value++;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
// 答题
|
|
|
const answer = ref({
|
|
|
correctAnswer: "A,B,C,D",
|
|
|
studentAnswer: [],
|
|
|
});
|
|
|
const answer2 = ref({
|
|
|
correctAnswer: "A,B,D",
|
|
|
studentAnswer: [],
|
|
|
});
|
|
|
|
|
|
// 答题
|
|
|
const answerChanged = (item, idx) => {
|
|
|
if (idx === "1") {
|
|
|
if (participleRecord.value !== 2) {
|
|
|
proxy.$modal.msgWarning("请先完成文本分詞");
|
|
|
item.studentAnswer = [];
|
|
|
return;
|
|
|
}
|
|
|
if (item.studentAnswer.length == 4) {
|
|
|
correctCount.value = 3;
|
|
|
proxy.$modal.msgSuccess("回答正确");
|
|
|
}
|
|
|
} else {
|
|
|
if (answer.value.studentAnswer.length < 0) {
|
|
|
proxy.$modal.msgWarning("请先完成步骤一");
|
|
|
item.studentAnswer = [];
|
|
|
return;
|
|
|
}
|
|
|
if (item.studentAnswer.length == 3) {
|
|
|
if (item.studentAnswer.includes("A") && item.studentAnswer.includes("B") && item.studentAnswer.includes("D")) {
|
|
|
correctCount.value = 4;
|
|
|
proxy.$modal.msgSuccess("回答正确");
|
|
|
} else {
|
|
|
proxy.$modal.msgWarning("回答错误");
|
|
|
let ErrorAnswer = item.studentAnswer.filter((item) => item !== "A" && item !== "B" && item !== "D");
|
|
|
let index = item.studentAnswer.indexOf(ErrorAnswer[0]);
|
|
|
item.studentAnswer = item.studentAnswer.splice(0, index);
|
|
|
errorCount.value++;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
// 生成摘要
|
|
|
const generateAbstract = () => {
|
|
|
if (correctCount.value < 4) {
|
|
|
proxy.$modal.msgWarning("请先完成步骤二");
|
|
|
return;
|
|
|
}
|
|
|
const test = "生成式人工智能深刻影响人们生活的方方面面，当我们使用生成式人工智能高效搜索、生成文本、提高工作效率时，生成式人工智能的潜在风险也在不知不觉中逐渐渗透。生成式人工智能可处理海量数据，但也给知识产权保护、个人隐私保护、打击虚假信息等方面带来新挑战。积极推进人工智能治理，法治与社会教育是促进守正创新的两大抓手。一方面，营造安全有序的法治环境，规范生成式人工智能服务。同时，健全生成式人工智能系统出现问题时的法律责任和赔偿机制，另一方面，加强对公众的教育与培训也至关重要，强调伦理和法律约束，以提高对这些潜在风险的认识。";
|
|
|
if (digest.value == "") return proxy.$modal.msgError("请输入摘要");
|
|
|
proxy.$modal.msgSuccess("提交成功");
|
|
|
correctCount.value = 5;
|
|
|
};
|
|
|
// 自动生成摘要
|
|
|
const generateAbstractAuto = () => {
|
|
|
if (correctCount.value < 5) {
|
|
|
proxy.$modal.msgWarning("请先撰写100字以内的摘要，再点击自动生成摘要进行对比!");
|
|
|
return;
|
|
|
}
|
|
|
commonality
|
|
|
.getSummary({ userId: "487" })
|
|
|
.then((res) => {
|
|
|
digest.value = res.msg;
|
|
|
proxy.$modal.msgSuccess("自动生成摘要");
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
errorCount++;
|
|
|
});
|
|
|
};
|
|
|
// 生成词云
|
|
|
const generateWordcloud = () => {
|
|
|
// if(correctCount.value<5) {
|
|
|
// proxy.$modal.msgWarning('请先完成步骤三');
|
|
|
// return
|
|
|
// }
|
|
|
commonality.creatWordCloud({ userId: "487" }).then((res) => {
|
|
|
var blobUrl = URL.createObjectURL(res);
|
|
|
document.querySelector(".right1").innerHTML = `<img src="${blobUrl}" alt="词云图" style="width: 100%; height: 304px;">`;
|
|
|
proxy.$modal.msgSuccess("生成词云图");
|
|
|
correctCount.value = 6;
|
|
|
});
|
|
|
};
|
|
|
const submit = () => {
|
|
|
if (correctCount.value < 6) {
|
|
|
proxy.$modal.msgWarning("请先完成所有步骤");
|
|
|
return;
|
|
|
}
|
|
|
handleClose();
|
|
|
console.log(errorCount.value, "errorCount.value");
|
|
|
commonality
|
|
|
.submitTask({ module: "人工智能", numberOfErrors: errorCount.value > 10 ? 10 : errorCount.value || 0, taskName: "自然语言处理", userId: JSON.parse(getUserInfo()).userId })
|
|
|
.then((response) => {
|
|
|
proxy.$modal.msgSuccess("提交任务成功");
|
|
|
NaturallanguageprocessingVisible.value = false;
|
|
|
restartStatus.value = false;
|
|
|
})
|
|
|
.catch((error) => {});
|
|
|
};
|
|
|
// 重新开始
|
|
|
const restart = () => {
|
|
|
correctCount.value = 0;
|
|
|
participleRecord.value = 0;
|
|
|
digest.value = "";
|
|
|
restartStatus.value = true;
|
|
|
text1.value = {
|
|
|
input1: "",
|
|
|
input2: "",
|
|
|
input3: "",
|
|
|
input4: "",
|
|
|
input5: "",
|
|
|
input6: "",
|
|
|
input7: "",
|
|
|
};
|
|
|
text2.value = {
|
|
|
input1: "",
|
|
|
input2: "",
|
|
|
input3: "",
|
|
|
input4: "",
|
|
|
input5: "",
|
|
|
input6: "",
|
|
|
input7: "",
|
|
|
input8: "",
|
|
|
};
|
|
|
answer.value.studentAnswer = [];
|
|
|
answer2.value.studentAnswer = [];
|
|
|
document.querySelector(".right1").innerHTML = "";
|
|
|
console.log(answer.value, "restartStatus.value");
|
|
|
NaturallanguageprocessingVisible.value = false;
|
|
|
};
|
|
|
// 保存记录
|
|
|
const handleClose = () => {
|
|
|
const dataObj = {
|
|
|
userId: JSON.parse(getUserInfo()).userId,
|
|
|
stepOneA: Object.values(text1.value).join(",") || "",
|
|
|
stepOneB: Object.values(text2.value).join(",") || "",
|
|
|
stepOneC: answer.value.studentAnswer.join(",") || "",
|
|
|
stepOneD: answer2.value.studentAnswer.join(",") || "",
|
|
|
textOne: digest.value,
|
|
|
numberOfErrors: errorCount.value || 0,
|
|
|
subState: correctCount.value,
|
|
|
};
|
|
|
if (document.querySelector(".right1 img") !== null) {
|
|
|
dataObj.textThree = document.querySelector(".right1 img").src;
|
|
|
}
|
|
|
NaturallanguageprocessingVisible.value = false;
|
|
|
if (restartStatus.value) return;
|
|
|
commonality
|
|
|
.saveNlp(dataObj)
|
|
|
.then((response) => {})
|
|
|
.catch((error) => {});
|
|
|
};
|
|
|
const getList = () => {
|
|
|
commonality
|
|
|
.getNlpEcho({ userId: JSON.parse(getUserInfo()).userId })
|
|
|
.then((response) => {
|
|
|
if (restartStatus.value) return;
|
|
|
if (response.data) {
|
|
|
const data = response.data;
|
|
|
if (data.stepOneA) {
|
|
|
participleRecord.value = 1;
|
|
|
} else if (data.stepOneB) {
|
|
|
participleRecord.value = 2;
|
|
|
}
|
|
|
if (data.stepOneC) {
|
|
|
correctCount.value = 3;
|
|
|
}
|
|
|
if (data.stepOneD) {
|
|
|
correctCount.value = 4;
|
|
|
}
|
|
|
if (data.textOne) {
|
|
|
correctCount.value = 5;
|
|
|
}
|
|
|
if (data.textThree) {
|
|
|
correctCount.value = 6;
|
|
|
}
|
|
|
errorCount.value = data.numberOfErrors || 0;
|
|
|
text1.value = {
|
|
|
input1: data.stepOneA.split(",")[0],
|
|
|
input2: data.stepOneA.split(",")[1],
|
|
|
input3: data.stepOneA.split(",")[2],
|
|
|
input4: data.stepOneA.split(",")[3],
|
|
|
input5: data.stepOneA.split(",")[4],
|
|
|
input6: data.stepOneA.split(",")[5],
|
|
|
input7: data.stepOneA.split(",")[6],
|
|
|
};
|
|
|
text2.value = {
|
|
|
input1: data.stepOneB.split(",")[0],
|
|
|
input2: data.stepOneB.split(",")[1],
|
|
|
input3: data.stepOneB.split(",")[2],
|
|
|
input4: data.stepOneB.split(",")[3],
|
|
|
input5: data.stepOneB.split(",")[4],
|
|
|
input6: data.stepOneB.split(",")[5],
|
|
|
input7: data.stepOneB.split(",")[6],
|
|
|
input8: data.stepOneB.split(",")[7],
|
|
|
};
|
|
|
answer.value.studentAnswer = data.stepOneC.split(",");
|
|
|
answer2.value.studentAnswer = data.stepOneD.split(",");
|
|
|
digest.value = data.textOne;
|
|
|
correctCount.value = data.subState;
|
|
|
console.log(correctCount.value, "correctCount.value");
|
|
|
var blobUrl = URL.createObjectURL(data.textThree);
|
|
|
|
|
|
document.querySelector(".right1").innerHTML = `<img src="${blobUrl}" alt="词云图" style="width: 100%; height: 304px;">`;
|
|
|
}
|
|
|
})
|
|
|
.catch((error) => {});
|
|
|
};
|
|
|
getList();
|
|
|
// 页面销毁
|
|
|
onBeforeUnmount(() => {
|
|
|
handleClose();
|
|
|
});
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.Naturallanguageprocessing {
|
|
|
display: flex;
|
|
|
|
|
|
.left {
|
|
|
position: relative;
|
|
|
// width: calc(100% - 216px);
|
|
|
height: 100%;
|
|
|
}
|
|
|
.right {
|
|
|
position: absolute;
|
|
|
top: 180px;
|
|
|
right: 41px;
|
|
|
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;
|
|
|
}
|
|
|
}
|
|
|
.TaskBackground {
|
|
|
span {
|
|
|
display: inline-block;
|
|
|
width: 181px;
|
|
|
height: 66px;
|
|
|
text-align: center;
|
|
|
line-height: 66px;
|
|
|
background: url("@/assets/images/szjj/任务背景.png") no-repeat !important;
|
|
|
background-size: 100% 100% !important;
|
|
|
font-family: Source Han Sans CN;
|
|
|
font-weight: bold;
|
|
|
font-size: 20px;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
.gdialog {
|
|
|
width: calc(100% - 160px);
|
|
|
|
|
|
.step {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
.step-item {
|
|
|
width: 52px;
|
|
|
height: 25px;
|
|
|
line-height: 25px;
|
|
|
text-align: center;
|
|
|
background: #5621f8;
|
|
|
border-radius: 12px;
|
|
|
margin-right: 8px;
|
|
|
span {
|
|
|
display: inline-block;
|
|
|
font-family: Source Han Sans CN;
|
|
|
font-weight: bold;
|
|
|
font-size: 12px;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
span {
|
|
|
font-size: 15px;
|
|
|
color: #ffffff;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.answer {
|
|
|
p {
|
|
|
width: calc(100% - 30%);
|
|
|
// height: 36px;
|
|
|
background: #e9ebfc;
|
|
|
border-radius: 4px;
|
|
|
padding: 0px 21px;
|
|
|
.el-checkbox {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.Abstract {
|
|
|
width: calc(100% - 10%);
|
|
|
// height: 543px;
|
|
|
background: #f7f7f7;
|
|
|
border-radius: 4px;
|
|
|
border: 1px solid #dcdcdc;
|
|
|
padding: 19px 19px 21px 19px;
|
|
|
margin-bottom: 20px;
|
|
|
.texts {
|
|
|
width: calc(100% - 20px);
|
|
|
// height: 317px;
|
|
|
padding: 16px 33px 49px 19px;
|
|
|
background: #ffffff;
|
|
|
border-radius: 5px;
|
|
|
border: 1px solid #e5e5e5;
|
|
|
font-family: Source Han Sans CN;
|
|
|
font-weight: 500;
|
|
|
font-size: 12px;
|
|
|
color: #333333;
|
|
|
line-height: 20px;
|
|
|
}
|
|
|
.Abstract-footer {
|
|
|
margin-top: 12px;
|
|
|
.el-button {
|
|
|
height: 40px;
|
|
|
border: none;
|
|
|
padding: 12px 40px !important;
|
|
|
}
|
|
|
.el-button:nth-child(1) {
|
|
|
background: url("@/assets/images/szjj/提交任务.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
.el-button:nth-child(2) {
|
|
|
background: url("@/assets/images/szjj/重新开始.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
}
|
|
|
.Wordcloud {
|
|
|
display: flex;
|
|
|
margin-top: 12px;
|
|
|
// min-height:347px;
|
|
|
.left {
|
|
|
width: calc(100% - 68%);
|
|
|
// height: 311px;
|
|
|
|
|
|
.el-button:nth-child(1) {
|
|
|
height: 40px;
|
|
|
border: none;
|
|
|
padding: 12px 40px !important;
|
|
|
background: url("@/assets/images/szjj/提交任务.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
}
|
|
|
.right1 {
|
|
|
width: 401px;
|
|
|
// height: 304px;
|
|
|
padding: 10px;
|
|
|
// background: #FFFFFF;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.el-scrollbar {
|
|
|
// height: 300px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
:deep(.el-textarea__inner) {
|
|
|
height: 124px !important;
|
|
|
}
|
|
|
.dialog-footer {
|
|
|
margin-top: 5px;
|
|
|
}
|
|
|
.tj {
|
|
|
--el-button-hover-text-color: #000000;
|
|
|
}
|
|
|
</style>
|