计算机毕业设计-基于神经网络APP-整合Vue+SpringBoot+TensorFlow框架-诗联AI

最新推荐文章于 2024-05-28 09:57:19 发布

阿联爱学习

最新推荐文章于 2024-05-28 09:57:19 发布

阅读量1.7k

点赞数

分类专栏： # 毕业设计文章标签： tensorflow 人工智能神经网络计算机毕业设计 Vue

本文链接：https://blog.csdn.net/qq_41593124/article/details/113140180

版权

毕业设计专栏收录该内容

5 篇文章 1 订阅

订阅专栏

诗联AI-基于神经网络APP-整合Vue+SpringBoot+TensorFlow框架

1.项目整体概述

1.1项目背景

对联，又被称为楹联或对子，是中国的传统文化之一，最开始是写在布上、纸上或刻在竹子、木头、柱子上的对偶语句。从格式上看，对联分为三个部分：上联、下联和横批。横批可以有，也可以没有，上下联字数相等，对应位置词语关系紧密。对联讲究平仄协调，对仗工整，是一字一音的中华语言独特的艺术形式，具有浓厚的美感，受到人们的广泛喜爱。对联是中国的传统文化之一，中国的对联文化是中国传统文化的完美结晶,也是中国语言的瑰宝，受到了人们的广泛喜爱。与其他的文学艺术形式一样，经过漫长发展过程，形成了比较成熟的体系，并且有着越来越广泛的应用，与人们的生活有着越来越紧密的联系，成为社会形态的重要组成部分。相传，对联起于五代后蜀主孟昶，他将“新年纳余庆，佳节号长春”挂在他的门框上，第一句的意思是：新的一年里享受着先代的遗泽，第二句的意思是：佳节预示着桃符的内涵。既可以驱灾辟邪，还包含了祝愿和祈福的内容，这就成为了中国最早的一副春联。到宋朝的时候，在桃木板上写对联已经非常普遍了，从王安石的诗句“爆竹声中一岁除，春风送暖入屠苏。千门万户曈曈日，总把新桃换旧符”中可以看出来，每到除夕，家家户户都要挂桃符，这已经成为一种习俗了。后来，门神出现之后，门神就担负着驱邪避灾的使命，而桃符就用来祈求美好的福运和表达美好的心愿了。后来，随着对联的广泛使用，对联的种类也越来越多，办喜事的时候贴的叫喜联，春节的时候贴的叫春联，办丧事的时候贴的叫做挽联。楹联习俗对于弘扬中华民族文化有着非常重大的价值，在华人乃至全世界使用汉语的地区以及与汉语和汉字有文化渊源的民族中传承和流播。随着计算机在人类生活中的各个领域逐步取代人类的劳动，人们希望计算机也能理解人类的语言，从而使得计算机在人类的语言文化艺术方面也能有所贡献。对联作为一种习俗，是中国传统文化非常重要的组成部分。为了让爱好者和初学者更加方便的学习对联知识，也更加进一步弘扬和传承中华民族文化，对联的自动生成问题近年来受到关注。本团队以对联为研究对象，研究计算机模拟生成对联的方法和效果。本对联生成模型采用了基于TensorFlow的深度学习框架的LSTM长短期记忆神经网络，首先把对联的字转化成词向量，引入Distributed Representation的分词方法，能够很好地将文字转化成便于计算机理解的数字特征向量，然后利用大量的对联数据，对于这个网络进行训练，使其能够学习到大量对联数据的“特点”，进而能够自己对下联。当然，单纯的LSTM长短期记忆神经网络无法对对联这种有特殊格律要求的文学句子做出很好地应对，需要考虑对联问题的特殊性，所以我们引入了AM（Attention Mechanism）注意力机制，能够增加该网络模型处理对联的能力，对出的对联能更符合对联的结构，语境，格律要求。

1.2.原理分析

本对联生成模型采用了基于TensorFlow的深度学习框架的LSTM长短期记忆神经网络，首先把对联的字转化成词向量，引入Distributed Representation的分词方法，能够很好地将文字转化成便于计算机理解的数字特征向量，然后利用大量的对联数据，对于这个网络进行训练，使其能够学习到大量对联数据的“特点”，进而能够自己对下联。当然，单纯的LSTM长短期记忆神经网络无法对对联这种有特殊格律要求的文学句子做出很好地应对，需要考虑对联问题的特殊性，所以我们引入了AM（Attention Mechanism）注意力机制，能够增加该网络模型处理对联的能力，对出的对联能更符合对联的结构，语境，格律要求。

2.项目效果

2.1.SpringBoot启动

2.2.Python启动

2.3.Vue前端启动

2.4.功能截图

诗联AI-主页

诗联AI-诗歌大厅

诗联AI-简介

诗联AI-自动对联

诗联AI-对联测评

诗联AI-留言板

诗联AI-搜索

诗联AI-个人主页

为你写诗

3.项目解读

3.1前端（VUE）

3.1.1为什么采用vue做前端？

1、轻量级框架

只关注视图层,是一个构建数据的视图集合,大小只有几十kb

Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统

2、简单易学

国人开发,中文文档,不存在语言障碍,易于理解和学习

3、双向数据绑定

也就是所谓的响应式数据绑定。这里的响应式不是@media 媒体查询中的响应式布局，而是指vue.js会自动对页面中某些数据的变化做出同步的响应。

也就是说，vue.js会自动响应数据的变化情况，并且根据用户在代码中预先写好的绑定关系，对所有绑定在一起的数据和视图内容都进行修改。而这种绑定关系，就是以input 标签的v-model属性来声明的，因此你在别的地方可能也会看到有人粗略的称vue.js为声明式渲染的模版引擎。

这也就是vue.js最大的优点，通过MVVM思想实现数据的双向绑定，让开发者不用再操作dom对象，有更多的时间去思考业务逻辑。

4、组件化

在前端应用，我们是否也可以像编程一样把模块封装呢？这就引入了组件化开发的思想。

Vue.js通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中，我们只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数叫做组件的属性），然后再分别写好各种组件的实现（填坑），然后整个应用就算做完了。

5、视图,数据,结构分离

使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作

6、虚拟DOM

现在的网速越来越快了，很多人家里都是几十甚至上百M的光纤，手机也是4G起步了，按道理一个网页才几百K，而且浏览器本身还会缓存很多资源文件，那么几十M的光纤为什么打开一个之前已经打开过，已经有缓存的页面还是感觉很慢呢？这就是因为浏览器本身处理DOM也是有性能瓶颈的，尤其是在传统开发中，用JQuery或者原生的JavaScript DOM操作函数对DOM进行频繁操作的时候，浏览器要不停的渲染新的DOM树，导致页面看起来非常卡顿。

而Virtual DOM则是虚拟DOM的英文，简单来说，他就是一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交，将DOM操作变化反映到DOM树上。

7、运行速度更快

像比较与react而言,同样都是操作虚拟dom,就性能而言,vue存在很大的优势

3.1.2 Vue前端分析

1.项目总体截图

2.配置

主页面index.html

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <!-- 用于适配手机 -->
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="320" name="MobileOptimized">
</head>
<html>
    <body>
        <div id="app">
          </div>
    </body>
</html>

配置main.js

import Vue from 'vue'// 导入主组件

import App from './App.vue'// 导入主程序入口

import MintUI from 'mint-ui'//导入Mint-UI组件
import 'mint-ui/lib/style.css'
import { Tabbar, TabItem,Search} from 'mint-ui';
Vue.component(Tabbar.name, Tabbar);
Vue.component(TabItem.name, TabItem);
Vue.component(Search.name, Search);
Vue.use(MintUI)

import  './lib/MUI/css/mui.css'// 导入MUI的css样式
import './lib/MUI/css/style.css'

// import './lib/MUI/js/mui.min.js'// 导入MUI的js样式

import axios from 'axios'// 导入axios异步请求
Vue.prototype.$axios = axios;
import VueRouter from 'vue-router'// 导入路由组件
Vue.use(VueRouter)
Vue.prototype.$router=VueRouter;// 将路由控件放入内部
import router from './router.js'// 导入自定义的路由

import waterfall from 'vue-waterfall2'// 导入瀑布流组件
Vue.use(waterfall)

 // 导入卡片滑动组件
//  import cardSlide from 'vue-card-slide'   
//  // require引入
// // var cardSlide = require('CardSlide')
// Vue.use(cardSlide)// 组件中使用



//定义全局的接口地址
// Vue.prototype.jiekou="127.0.0.1:8888"
Vue.prototype.jiekou="127.0.0.1:8888"

var app=new Vue({
    el:'#app',
    render: c=>c(App),// 挂在主程序,
    router
})

路由router.js

import VueRouter from 'vue-router'
import home from './components/home.vue'
// 注册登录
import login from './components/login/login.vue'
import registry from './components/login/registry.vue'

import weiyuMail from './components/mail/weiyuMail.vue'
import selfsetting from './components/selfinfo/selfsetting.vue'
import main from './components/main.vue'
import mailInfo from './components/mail/mailInfo.vue'

import about from './/components/about/about.vue'
import tellyou from './/components/tellyou/tellyou.vue'


//科普模块
import weiyuhall from './components/hall/weiyuhall.vue'
import weiyuinfo from './components/hall/weiyuinfo.vue'

// 四大功能模块
import couplet1 from './components/couplet/couplet1.vue'
import couplet2 from './components/couplet/couplet2.vue'
import couplet3 from './components/couplet/couplet3.vue'
import couplet4 from './components/couplet/couplet4.vue'

// 搜索模块
import search from './components/com/search.vue'


// 查看评论
import comment from './components/mail/comments.vue'

// 创建路由对象
var router =new VueRouter({
    routes: [
        { 
            path:'/home',  
            component: home,
            children:[
                { path:'/weiyuMail',  component: weiyuMail},
                { path:'/selfsetting',  component: selfsetting},
                { path:'/main',  component: main},

                // 科普模块
                { path:'/hall/weiyuhall',  component: weiyuhall},
                { path:'/hall/weiyuhall/info/:id',  component: weiyuinfo},

                { path:'/mail/mailinfo/:id',  component: mailInfo},
                { path:'/about/about',  component: about},
                { path:'/tellyou/tellyou',  component: tellyou},
                { path:'/weiyu/couplet1',  component: couplet1},// 楹联人
                { path:'/weiyu/couplet222',  component: couplet2},// 对联测评
                { path:'/weiyu/couplet3',  component: couplet3},// 古诗人
                { path:'/weiyu/couplet4',  component: couplet4},// 图片识别成对联

                { path:'/weiyu/search',  component: search},// 搜索模块

                { path:'/weiyu/comment/:id',  component: comment},// 评论模块

                { path:'/',redirect:'/main'}   
            ]
        },
        { path:'/login',  component: login},
        { path:'/registry',  component: registry},
        { path:'/about',  component: about},
        { path:'/',redirect:'/login'}   
    ],//配置路由跳转
    linkActiveClass: 'mui-active'// 配置路由活跃状态
})
//对外暴露对象
export default router

3.webpack打包

可以将项目资源文件打包成一个配置文件bundle.js文件

通过命令行输入webpcak