本帖最后由 琼仔TKO 于 2020-7-13 09:04 编辑
Omega AI
故事要从20207-10号的晚上开始讲述，10号的晚上我看了一篇短文小说《一生之签》，在此部小说中，有一个人工智能，“Omega AI” 它起初是一款帮助开发者本身管理项目的AI,但是后来因为出色的平等管理分配，从而让全世界的人民都通过“Omega AI”来管理平分他们的财富.....
可能你从上面的语句无法理解我想表达的意思，不要紧，我马上给你讲述 我所写的“Omega AI”过程.....
开发环境
Node 12.13.0
Electron 9.1.0
vsCode 1.47
软件名称+版本
第一步：搭建开发环境1.1 安装：https://code.visualstudio.com/ 前往VsCode 官网下载并安装好vsCode 1.2 安装：https://nodejs.org/en/ 前往NodeJS官网下载长期稳定版的Node,稳定版的后缀是LTS 1.3 安装：electron 框架 在cmd 窗口下使用全局安装 ，在工作空间使用局部安装，两个可以一起安装，不影响开发 npm install electron --save-dev （局部项目安装） npm install -g electron (全局安装) 注意：详细的安装步骤，可以某度一下，就会有很多很详细的安装教程
第二步：创建工作空间
2.1 创建：在你空余空间足够大于3G的磁盘中创建一个，名称为Omega AI 的文件夹 2.2 创建：在文件夹中新建 三个文件夹(System,UI,node_inde)和一个index.js 2.3 打开：使用VsCode 打开 Omega AI 文件夹
第三步：编写
3.1 编写index.js
[JavaScript] 纯文本查看 复制代码
var electron=require('electron')
var app=electron.app//引用app
var BrowserWindow=electron.BrowserWindow//窗口引用
var mainWindow=null;//声明要打开的主窗口
app.on('ready',()=>{
mainWindow=new BrowserWindow({width:400,height:38,frame:false,resizable: false})
mainWindow.loadFile('UI/run_main/index.html')//加载主html页面
mainWindow.on('closed',()=>{
mainWindow=null;
})
})
3.2 编写 主界面 UI 文件
3.2.1 因为界面是html格式的，所以你需要先创建一个标准html5文件格式的html
3.2.2 标准html5
[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
3.2.3 编写详细UI 引入boostarp 4
css文件
[HTML] 纯文本查看 复制代码 <link rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
js文件
[HTML] 纯文本查看 复制代码 <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="../JS/jquery-3.3.1.min.js"></script>
3.2.4 编写详细UI 代码编写
[HTML] 纯文本查看 复制代码 <body style="background-color: #c5dce4;overflow:-Scroll;overflow-y:hidden;">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text ngpms" id="basic-addon1"><img style="width: 20px;height: auto;" src="../IM/airbnb.png"></span>
</div>
<input type="text" class="form-control" placeholder="omegaAI" aria-label="Username" id="Put"
aria-describedby="basic-addon1">
</div>
<div id="space">
</div>
</body>
到此为止，界面算是搭建出了 接下来就进入文本文字动态合成语音编写
3.3 文本文字动态合成语音编写
3.3.1 在System文件夹下新建一个处理语音的文件夹voice并再创建一个voice.js文件
3.3.2 文本文字动态合成，这个如果自己全全处理，是非常麻烦的，所以我们使用阿里云的语音合成公测接口，
3.3.3 voice.js 代码如下
[JavaScript] 纯文本查看 复制代码 function openVoice(data){
var VoiceInterface=' <audio autoplay="autoplay">\n' +
'\t\t\t<source \n' +
'\t\t\t\tsrc="https://nls-gateway.cn-shanghai.aliyuncs.com/stream/v1/tts?appkey=0AJEtyC66dKQiY9a&token=9b34a9d538934919bc3bfdea14f66347&format=mp3&voice=Aiya&speech_rate=-150&volume=70&text=\n' +
' '+data+'，\n' +
' "\n' +
'\t\t\t\ttype="audio/mp3" />\n' +
'\t\t</audio>';
$("#space").html(VoiceInterface);
}
//读取JSON
function openJSON(JSON){
$.getJSON(JSON, function (data){
});
}
这包含两个事件处理函数，一个是词典读取加载函数，一个是语音合成接口处理函数，
介绍 语音合成接口处理函数
本质：通过访问接口传递文本文字数据获得语音播放url,在将url编写到一个预处理的audio标签中，并将标签通过Jquery切入到事先div中
分析代码：
定义一个变量VoiceInterface
对变量进行预处理
使用$().html进行切入操作
3.4.1 在vs Code 工具中 选择“终端--新建终端” 3.4.2 输入 npm init --yes 初始化当前开发空间
3.5.1 效果图
3.6 打包项目
3.6.1 安装electron打包工具electron-packager npm install electron-packager -g3.6.2 配置打包命令 在初始化项目空间时所生成的package.json中 "scripts": { "start": "electron .", "pack": "electron-packager . myClient --win --out ../myClient --arch=x64 --app-version=0.0.1 --electron-version=2.0.0" }
npm run pack
打包完成后，找到输出目录，打开打包完成后的文件夹，
可以看到生成了.exe的执行文件以及其他的一堆配置文件，双击myClient.exe就可以打开应用程序了。现在，我们已经得到了应用程序的绿色版本（无需安装，拷贝整个文件目录之后即可使用）
初期版本的开发流程就到此结束完整的开发空间图：
下载：https://qtm.lanzouj.com/b00nkhh7a密码:8cdo | 
[复制链接]
发表于 2020-7-13 08:26
|
发表于 2020-7-13 10:07
，小白完全不会求详细使用教程
