AVM框架的模块使用───以客服功能为示例

于 2023-01-05 15:09:40 发布
阅读量350 收藏
点赞数
分类专栏： APiCloud之AVM框架 文章标签： 语音识别 人工智能 vue.js 前端框架 前端 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csbnlyz/article/details/128563747
版权

以开发客服功能为例，基于AVM框架编写，结合iflyRecognition 模块（封装了 科大讯飞 的SDK 的语音听写、语音在线合成功能），轻松简单地实现了语音转文字客服功能。

stml代码：

<template name='tpl'>
        <view class="page">
                <safe-area class="header">
                        <text class="header__title">客服</text>
                </safe-area>
                <scroll-view class="main" id="box">
                        <text class="time">{nowtime}</text>
                        <view class="servicebox">
                                <img class="avatarimg" src="../../image/kf@3x.png" alt="">
                                <view class="questionbox">
                                        <view class="question">
                                                <text class="questiontxt">猜你想问</text>
                                        </view>
                                        <view class="question" v-for="(item,index) in listdata" @click="trigger(item)">
                                                <text class="questioncon">{item.titleName}</text>
                                                <img class="rightimg" src="../../image/right.png" alt="">
                                        </view>
                                </view>
                        </view>
                        <view class="answerbox">
                                <view class="answercon" v-for="(item,index) in showdata">
                                        <text class="time">{item.time}</text>
                                        <view class="userbox" v-if="item.user==1">
                                                <view class="contxtbox">
                                                        <text class="answercontxt">{item.con}</text>
                                                </view>
                                                <img class="avatarimg2" src="../../image/wd_tx.png" alt="">
                                        </view>
                                        <view class="serbox" v-if="item.user==2">
                                                <img class="avatarimg" src="../../image/kf@3x.png" alt="">
                                                <view class="contxtbox">
                                                        <text class="answercontxt">{item.con}</text>
                                                </view>
                                        </view>
                                </view>
                        </view>
                </scroll-view>
                <view class="footer">
                        <img @click="phonebtn()" class="phoneimg" src="../../image/phone.png" alt="">
                        <input class="foottxt" v-model="sendword" type="text">
                        <button class="footbtn" @click="send()">发送</button>
                </view>
                <view class="showbox" v-if="isshow">
                        <view class="wordsbox" v-if="words">
                                <text class="wordstxt">{words}</text>
                        </view>
                        <view class="mainbox" @click="stop()">
                                <img class="ypgif" src="../../image/yp.gif" alt="">
                                <img class="stopimg" src="../../image/xslx_lzz@2x.png" alt="">
                        </view>
                </view>
        </view>
</template>
<script>
export default {
        name: "tpl",
        apiready() {
                this.data.nowtime = this.getTimeData()//当前时间
                this.init()//模块初始化
        },
        data() {
                return {
                        nowtime: '',//当前时间
                        listdata: [//想问的问题
                                {
                                        titleName: "公告",
                                        titleContent: "2021年12月1日至2022年1月31日，APP开展深圳地区公测，欢迎各位家长及同学们参与公测并给我们提供宝贵的意见、建议。公测期间前100位成功注册的用户将免费获得VIP课程。",
                                },
                                {
                                        titleName: "账号与登录",
                                        titleContent: "输入手机号码，在获取验证码后可以快速完成账户注册。在这个过程中您需要选择并确认您的身份（学生、老师）。选择学生身份：请同学您按指引要求填写相关信息后点击“提交”完成账户注册。选择老师身份：请老师您按指引要求填写相关信息后点击“提交”完成老师身份的账户注册。",
                                },
                                {
                                        titleName: "选择课程",
                                        titleContent: "在【学习】栏目内，您可以选择您想要的课程内容，包括可以免费使用的“听、背、读”部分的内容，以及收费的“诵、讲”部分的VIP内容。完成充值后即可使用VIP内容。",
                                },
                                {
                                        titleName: "充值与消费",
                                        titleContent: "目前我们设立有“月卡VIP会员”、“季卡VIP会员”、“半年VIP会员”、“年卡VIP会员”四个档次，您可以根据自己的需求来购买会员。（公测期间，前100位注册用户可免费获得终生VIP用户权限）。",
                                },
                                {
                                        titleName: "操作问题",
                                        titleContent: "请您简单描述一下您所遇到的操作问题，现在由于咨询的人数较多，我们将尽快予以答复，请您耐心等待。",
                                },
                                {
                                        titleName: "反馈bug",
                                        titleContent: "请您简单描述一下您所遇到的bug，我们会将您所提供的线索及时反馈给技术部门，感谢给予我们的帮助。",
                                },
                                {
                                        titleName: "建议",
                                        titleContent: "我们非常乐于倾听您的声音，感谢您宝贵的建议！",
                                },
                                {
                                        titleName: "投诉",
                                        titleContent: "请您简单描述一下您要投诉的内容，现在由于咨询的人数较多，我们将尽快予以答复，请您耐心等待。",
                                }
                        ],
                        isshow: false,//显示话筒输入
                        words: '',//文本
                        showdata: [],//显示的数据
                        sendword: "",//发送文字
                };
        },
        computed: {

        },
        methods: {
                //获取当前时间时分
                getTimeData() {
                        var data = new Date()
                        var h = data.getHours() < 10 ? '0' + data.getHours() : data.getHours()
                        var m = data.getMinutes() < 10 ? '0' + data.getMinutes() : data.getMinutes()
                        var now = h + ':' + m
                        return now
                },
                //模块初始化
                init() {
                        console.log("初始化");
                        var iflyRecognition = api.require('iflyRecognition');
                        iflyRecognition.createUtility({
                                ios_appid: '******',
                                android_appid: '*******'
                        }, function (ret, err) {
                                if (ret.status) {
                                        console.log('创建成功');
                                } else {
                                        console.log('创建失败');
                                }
                        });
                },
                //话筒输入
                phonebtn() {
                        this.data.isshow = true
                        this.start()//开始识别
                },
                //开始识别
                start() {
                        console.log("开始");
                        var that =this
                        var iflyRecognition = api.require('iflyRecognition');
                        iflyRecognition.record({
                                vadbos: 10000,
                                vadeos: 10000,
                                rate: 16000,
                                asrptt: 1,
                        }, function (ret, err) {
                                if (ret.status) {
                                        that.data.words = ret.wordStr
                                        console.log(JSON.stringify(ret));
                                } else {
                                        console.log(JSON.stringify(err));
                                }
                        });
                },
                //停止
                stop() {
                        this.data.isshow = false
                        console.log("停止");
                        var iflyRecognition = api.require('iflyRecognition');
                        iflyRecognition.stopRecord();
                        this.data.sendword =this.data.words
                },
                //点击问题
                trigger(item) {
                        var obj = {
                                time: this.getTimeData(),
                                user: 1,//用户
                                con: item.titleName//用户点击的问题内容
                        }
                        this.data.showdata.push(obj) //用户点击的数据
                        document.getElementById('box').scrollTo({ position: 'lower' });//滚动到底部
                        //一秒后客服回答
                        setTimeout(() => {
                                var obj2 = {
                                        time: this.getTimeData(),
                                        user: 2,//客服
                                        con: item.titleContent //回答的内容
                                }
                                this.data.showdata.push(obj2) //客服回答
                        }, 1000)
                        setTimeout(() => {
                                document.getElementById('box').scrollTo({ position: 'lower' });//滚动到底部
                        }, 1100)
                },
                //发送问题
                send() {
                        var obj = {
                                time: this.getTimeData(),
                                user: 1,
                                con: this.data.sendword//用户输入的内容
                        }
                        this.data.showdata.push(obj) //用户发送的问题内容
                        document.getElementById('box').scrollTo({ position: 'lower' });//滚动到底部
                        //一秒后客服回答
                        setTimeout(() => {
                                var obj2 = {
                                        time: this.getTimeData(),
                                        user: 2,//客服
                                        con: "反馈成功，24小时以内会联系您" //回答的内容
                                }
                                this.data.showdata.push(obj2) //客服回答
                        }, 1000)
                        setTimeout(() => {
                                document.getElementById('box').scrollTo({ position: 'lower' });//滚动到底部
                        }, 1100)
                        this.data.sendword = ""
                },
        }
};
</script>
<style>
.page {
        height: 100%;
        background-color: #fafafa;
}
.header {
        background: #81a9c3;
        justify-content: center;
        align-items: center;
}
.header__title {
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        height: 50px;
        line-height: 50px;
}

.main {
        flex: 1;
        padding: 15px;
}
.time {
        text-align: center;
        line-height: 24px;
        color: rgb(78, 78, 78);
}
.servicebox {
        flex-direction: row;
}
.avatarimg {
        width: 40px;
        height: 40px;
        margin-right: 10px;
        border-radius: 50%;
}
.avatarimg2 {
        width: 40px;
        height: 40px;
        margin-left: 10px;
        border-radius: 50%;
}
.questionbox {
        width: 200px;
        background-color: #ffffff;
        padding: 10px;
}
.question {
        width: 100%;
        padding: 5px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgb(219, 219, 219);
}
.questiontxt {
        color: rgb(0, 0, 0);
        font-size: 16px;
}
.questioncon {
        color: rgb(107, 107, 107);
        font-size: 14px;
}
.rightimg {
        width: 7px;
        height: 12px;
}

.answercon {
        padding: 10px 0px;
}
.userbox {
        width: 100%;
        flex-direction: row;
        justify-content: flex-end;
}
.serbox {
        width: 100%;
        flex-direction: row;
        justify-content: left;
}
.contxtbox {
        background: #fff;
        padding: 10px;
        border-radius: 8px;
        align-items: center;
}
.answercontxt {
        font-size: 14px;
        color: #333;
}
.footer {
        width: 100%;
        height: 60px;
        background: #ffffff;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 20px;
}
.phoneimg {
        width: 30px;
        height: 30px;
        margin-right: 10px;
}
.foottxt {
        width: 75%;
        height: 30px;
        padding: 0 5px;
}
.footbtn {
        margin-left: 10px;
        width: 80px;
        height: 30px;
        background-color: rgba(251, 131, 78, 0.8);
        color: #fff;
}
.showbox {
        width: 100%;
        height: 100%;
        background: rgba(33, 6, 0, 0.4);
        position: absolute;
        z-index: 9;
        top: 0px;
        left: 0px;
        justify-content: center;
        align-items: center;
}
.wordstxt {
        background: #ffffff;
        padding: 10px;
}
.mainbox {
        width: 150px;
        height: 80px;
        justify-content: center;
        align-items: center;
}
.ypgif {
        width: 150px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
}
.stopimg {
        width: 70px;
}
</style>

效果图：

csbnlyz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
海康VM框架软件PLC通信功能使用详解
07-19
详细介绍了海康VM软件PLC通讯的使用说明情况。
android avm灰色,引擎 | avm.js | 模块更新记录
weixin_30941657的博客
05-28 193
原标题：引擎 | avm.js | 模块更新记录☝ 点击APICloud 关注并标 星◔以下是本周发版引擎/模块/平台更新日志：■引擎|avm.js更新：-----------------------------------------------1.更新: DE3.0 修复line-height在部分场景下不生效问题。2.更新: DE3.0 优化line-height在无height情况下生效，...
APICloud AVM框架 开发视频会议APP
白鱼赤乌的博客
08-05 558
1.创建会议，确认会议时间、参会人员、会议主题、确定会议主持人（默认为发起人）可开启会议；同时会通过应用消息和短信通知参会人员。2.加入会议，可通过会议大厅找的会议列表直接加入，也可通过输入会议编号加入会议；加入会议的前提是会议已在进行中。3.快速会议，可直接确认会议人员然后发起实时视频会议，参会人员实时接收应用消息或短信，快速进入会议。3.历史会议，分为我主持的会议、我参与的会议。4.会议大厅，列表显示今天需要参加的会议。......
APICloud AVM框架 密码输入框组件
白鱼赤乌的博客
06-03 335
带网格的输入框组件，可以用于输入密码、短信验证码等场景，通常与数字键盘组件配合使用。支持自定义密码长度，支持加密和明文显示。
AVM-全景泊车-如何实现
m0_60622516的博客
11-08 2011
AVM-到底是个啥东西
linux-AVM调试【1】
wongxiaonan的博客
08-09 857
一、如何编译整个系统包     cd  /返回根目录  cd ..返回上一级目录    cd ~返回home；      进入sphe6700目录下 执行make命令；编译生产的包在out_binary下（系统包）；      系统包升级（程序包烧录）：编译6700 sdk包生成out_binary目录，将内容复制到u盘内，开发板接上短路帽及u盘，重启后系统自动升级，接荧幕会自动显示升级进度...
自动泊车之AVM环视系统算法及其框架.pdf
最新发布
05-08
自动泊车之AVM环视系统算法及其框架
fritz：用于AVM FRITZ的Perl模块！通过TR-064进行盒子交互
02-05
fritz：用于AVM FRITZ的Perl模块！通过TR-064进行盒子交互
易语言模块 VM虚拟机模块.e
12-30
易语言虚拟机操作模块源码
fritz-tls:自动为AVM FRITZ！Box安装TLS证书
03-20
OS：07.21）如果您想知道如何手动执行此操作，请查看AVM的。安装自制： brew install tisba/taps/fritz-tls去go get -u github.com/tisba/fritz-tls用法fritz-tls --auto-cert --domain fritz.example....
APICloud AVM 封装日期和时间选择组件
白鱼赤乌的博客
04-25 852
因项目中很多表单要用到日期选择和时间选择的内容，所以基于picker封装了日期和时间选择的组件。 datePicker 组件内的年份是取得举例今年100年以内的年份，可根据时间需要进行扩容或缩减，月份是12个月固定的，每月的天数，根据所选年份和月份进行获取。默认设置当前日期。 <template> <picker class="picker" id={pickerId} mode="multiSelector" range-key="name" value={date.
avm.js跨端框架全介绍
ff_888888的博客
10-30 1199
avm.js是APICloud新推出的跨端JavaScript开发框架，可同时开发 Android & iOS 原生 App、小程序和 iOS 轻 App，且多端渲染效果统一。 渲染效率提升巨大 全新的 App 引擎 3.0 不依赖 webView，提供百分百的原生渲染，保障 App 性能和体验与原生 App 一致。 下面第一张图是用avm.js 的grid-view组件实现的列表，第二张图是使用webview 渲染html页面实现的列表，可通过GPU呈现模式分析曲线看到蓝色，绿色平均...
自动驾驶—自动泊车之AVM环视系统算法框架
3D视觉工坊
07-15 5369
作者丨中投靓仔@知乎来源丨https://zhuanlan.zhihu.com/p/534553717编辑丨3D视觉工坊AVM（Around View Monitor），中文：全景环视系统。在自动驾驶领域，AVM属于自动泊车系统的一部分，是一种实用性极高、可大幅提升用户体验和驾驶安全性的功能。AVM已经是一种较为成熟的技术，中高端车型均有部署，但详细讲述AVM系统算法的技...
讯飞语音的语音听写功能实现的总结以及新手如何着手第三方SDK
维凯的趣味生活的博客
08-08 4577
讯飞语音的语音听写功能实现的总结以及新手如何着手第三方SDK 前言 {才知道前言和序言的区别，写文章的好处，吱吱} 由于本人最近有点小忙，所以没有更新博客。其实呢！我想说的是我的草稿箱都快要堆满了，只是感觉没有技术含量就不献丑了（内心独白：让一个语文几乎只有小学及格过的人写这种真的好让人揪心，我写的东西自己都不想看第二遍，此刻，如果可以，相信你会看到成千上万的表情包---表达我此刻的内心
909422229_科大讯飞语音听写Java web API接口
要有梦想，即使遥远
12-10 2976
技术交流群：958923746，有学习视频，文档等。 1. 接口说明 语音听写接口可将语音(≤60秒)转换成对应的文字信息。本接口适用于将音频一次性发送至云端，块式传输。 2. 接口地址 POST http://api.xfyun.cn/v1/service/v1/iat HTTP/1.1 Content-Type:application/x-www-form-urlencoded; c...
科大讯飞中文+日语语音听写(流式版)
热门推荐
Selenium
07-27 1万+
文章目录1.实现效果1.1日语效果2.2中文效果2.具体实现1.捕捉麦克风语音输入2.进行VAD(Voice Activity Detection)检测3.下载官网python版语音听写demo4.字幕显示5.将Python程序打包为exe3.其它 需求:记录会议的内容，将会议的语音(中文和日文)转为文字字幕并显示在电脑屏幕上。 1.实现效果 1.1日语效果 2.2中文效果 2.具体实现 讯飞语音中文实现很简单，登录讯飞开发者平台,创建应用，下载对应的demo就行了，照着文档弄，很简单。 所以
ADAS 详解
凌风探梅的专栏
10-21 1万+
先进驾驶辅助系统（Advanced Driver AssistantSystem），简称ADAS，是利用安装于车上的各式各样的传感器（可侦测光、热、压力等变数）， 在第一时间收集车内外的环境数据， 进行静、动态物体的辨识、侦测与追踪等技术上的处理， 从而能够让驾驶者在最快的时间察觉可能发生的危险， 以引起注意和提高安全性的主动安全技术。 　　近年来ADAS市场增长迅速，原来这类系统局限于高端市场
AVM环视算法 3D效果 全方位视图 韩国VADAS 让你感受不一样的360全景
guanyumingtong的博客
07-20 3961
NEXTCHIP 我们是将日常生活中所需要的产品，制作成为半导体的无设备半导体企业。 随着对个人安全、社会的财产以及信息保护的安防产业的需求不断增加，视频安防正在成为提高个人生活质量的新标准。NEXTCHIP一直独立开发视频安防市场中所需的半导体技术。我们会以这些技术为基础，努力成为在激烈的全球生存环境中，能够帮助国家提高IT竞争力的企业。我们追求，能够帮助大家提高生活质量的技术开发。我们会开发出...
AVM环视：系统搭建整体流程
qq_34468890的博客
08-27 5101
文章目录前言一、畸变矫正鱼眼相机二、透视变换三、图像拼接四、图像融合总结 前言 由于正在做AVM环视，所以记录一下整个过程，归纳为一个系列文章，并对期间遇到的错误进行归纳整理。本文主要概括了AVM环视的大致流程和逻辑，不涉及代码部分，仅供思路参考，其中涉及的具体技术会在后期整理为小章节进行分析。 一、畸变矫正 鱼眼相机 做环视基本上使用到的是鱼眼照片，因为鱼眼相机的视角范围可以达到220°到230°，所以一个相机就可以采集到一个面的全部信息，例如汽车具有四个面，那么在汽车的前后左右分别安装一个鱼眼相机.
自动驾驶——自动泊车之AVM环视系统算法框架代码
06-03
AVM环视系统全称为全景影像监控系统（All-round View Monitoring System），是一种通过车身上四个摄像头采集图像并进行合成，实现车辆周围环境全景监控的技术。其中，AVM自动泊车系统是AVM技术的一个应用场景，通过...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值