转载自:https://blog.csdn.net/weixin_34061042/article/details/89700664

一维向量及其运算

tensor 是 TensorFlow.js 的数据中心单元:由一组数值组成的一维或多维数组。在 TensorFlow.js中,一维向量的构造函数主要为:tf.tensor()和tf.tensor1d()

可以用set()和get()函数分别获取和设置向量中的元素值。
  一维向量的运算函数有很多,说明如下:

  • tf.add() 两个向量的对应元素的和
  • tf.sub() 两个向量的对应元素的差
  • tf.mul() 两个向量的对应元素的乘积
  • tf.div() 两个向量的对应元素的商
  • tf.maximum() 两个向量的对应元素的最大值
  • tf.minimum() 两个向量的对应元素的最小值
  • tf.pow() 两个向量的对应元素的幂

以上只是一部分,还有更多的函数如: tf.abs(), tf.sin(), tf.cos(), tf.tan(), tf.tan()等。

简单例子

我们通过一个小小的例子,来说明在TensorFlow.js中一维向量的使用方法。

<html>
<head>
<!-- Load TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.12.0"> </script>
<!-- Place your code in the script tag below.-->
<script>
a = [1,2,3,4,5];
b = [2,3,4,5,6];
function show(){
const vector1 = tf.tensor(a);
const vector2 = tf.tensor(b);
const res = vector2.add(vector1);
document.getElementById("first_element").innerHTML = "第一个元素为" + res.get(0)+ ".";
document.getElementById("whole_array").innerHTML = "向量:"+res;
}
</script>
</head>
<body>
<script type="text/javascript">
function printa()
{
document.write("a: " + a + "<br>");
}
function printb()
{
document.write("b: " + b + "<br>");
}
printa();
printb();
</script>
<p id="first_element"></p>
<p id="whole_array"></p>
<button onclick="show()" id="show" value="show">show</button>
</body>
</html>

接下来,我们实现稍微复杂的功能,进行张量的其他运算

<html>
<head>
<!-- Load TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.12.0"> </script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="calculate.js"></script>
</head> <body>
<center>
<h2>TensorFlow向量(一维)学习</h2>
<br><br>
<div style="width:600px"> <div>
<label class="col-sm-2 control-label">向量运算</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" value="add" checked="checked"> 加
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" value="sub"> 减
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" value="mul"> 乘
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" value="div"> 除
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" value="max"> max
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" value="min"> min
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" value="abs"> abs
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" value="sin"> sin
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" value="cos"> cos
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" value="tan"> tan
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" value="exp"> exp
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" value="log"> log
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" value="sqrt"> sqrt
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" value="square"> square
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosinline" value="cubic"> cubic
</label>
<br><br>
</div>
</div> <div>
<label for="vector1" class="col-sm-2 control-label">向量1</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="vector1" placeholder="向量1">
<br>
</div> </div> <div>
<label for="vector2" class="col-sm-2 control-label">向量2</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="vector2" placeholder="向量2">
<br>
</div>
</div> <div >
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-default" id="result">显示结果</button>
<button class="btn btn-default" id="clc">清空</button>
</div>
</div> </div> <table class="table" style="width:600px">
<caption id="tf">运行结果</caption>
<tbody>
<tr class="success" id="table">
</tr>
</tbody>
</table> </center>
</body>
</html>

一维向量运算演示.html

$(document).ready(function(){

    var flag;
/*
flag = 1表示一元运算
flag = 2表示二元运算
*/ // 清空两个输入框的输入
$("#clc").click(function(){
$("#vector1").val("");
$("#vector2").val("");
}); // 是否允许"向量2"输入框有输入
$("#vector1").click(function(){
var op = $("input[name='optionsRadiosinline']:checked").val();
var ops = ["add", "sub", "mul", "div", "max", "min"];
if (ops.indexOf(op) == -1)
flag = 1;
else
flag = 2; //文本框"向量2"禁用
if(flag == 1){
$("#vector2").val("");
$("input[type='text']").each(function () {
   $("#vector2").attr("disabled", true);
}); }
//文本框"向量2"启用
if(flag == 2){
$("input[type='text']").each(function () {
   $("#vector2").attr("disabled", false);
});
}
}); // 利用tensorflow.js的运算函数,输出计算结果
$("#result").click(function(){ if(flag == 1){
var vector1 = $("#vector1").val().split(',').map(Number);
}
if(flag == 2){
var vector1 = $("#vector1").val().toString().split(',').map(Number);
var vector2 = $("#vector2").val().toString().split(',').map(Number);
if(vector1.length != vector2.length)
alert("输入的两个向量长度不一样");
} // 利用tensorflow.js的运算函数
if( flag == 1 || ((flag == 2) && (vector1.length == vector2.length))){
var op = $("input[name='optionsRadiosinline']:checked").val();
const pow2 = tf.tensor(2).toInt(); // 计算平方
const pow3 = tf.tensor(3).toInt(); // 计算三次方 switch (op) // JavaScript的switch结构
{
case "add": // 加法
res = tf.tensor(vector1).add(tf.tensor(vector2));
break;
case "sub": // 减法
res = tf.tensor(vector1).sub(tf.tensor(vector2));
break;
case "mul": // 乘法
res = tf.tensor(vector1).mul(tf.tensor(vector2));
break;
case "div": // 除法
res = tf.tensor(vector1).div(tf.tensor(vector2));
break;
case "max": // 两个向量中的最大值,element-wise
res = tf.tensor(vector1).maximum(tf.tensor(vector2));
break;
case "min": // 两个向量中的最小值,element-wise
res = tf.tensor(vector1).minimum(tf.tensor(vector2));
break;
case "abs": // 绝对值
res = tf.tensor(vector1).abs();
break;
case "sin": // 正弦函数
res = tf.tensor(vector1).sin();
break;
case "cos": // 余弦函数
res = tf.tensor(vector1).cos();
break;
case "tan": // 正切函数
res = tf.tensor(vector1).tan();
break;
case "exp": // 指数函数,以e为底
res = tf.tensor(vector1).exp();
break;
case "log": // 对数函数,以e为底
res = tf.tensor(vector1).log();
break;
case "sqrt": // 平方根
res = tf.tensor(vector1).sqrt();
break;
case "square": // 平方
res = tf.tensor(vector1).pow(pow2);
break;
case "cubic": // 三次方
res = tf.tensor(vector1).pow(pow3);
break;
default:
res = tf.tensor([]);
} $("#table").html(""); // 清空原有表格中的数据
// 输入计算结果
for(var i=0; i< res.shape; i++){
$("tr").append("<td>"+res.get(i)+"</td>;");
}
} }); });

calculate.js

效果如下:

全部的代码可见:github

TensorFlow.js入门:一维向量的学习的更多相关文章

  1. TensorFlow.js入门(一)一维向量的学习

    TensorFlow的介绍   TensorFlow是谷歌基于DistBelief进行研发的第二代人工智能学习系统,其命名来源于本身的运行原理.Tensor(张量)意味着N维数组,Flow(流)意味着 ...

  2. 【一统江湖的大前端(9)】TensorFlow.js 开箱即用的深度学习工具

    示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录 目录 一. 上手TensorFlow.js 二. ...

  3. 【特别推荐】Node.js 入门教程和学习资源汇总

    这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...

  4. Node.js 入门教程和学习资源汇总

    这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...

  5. 让我们一起学习《Node.js入门》一书吧!

    Node.js入门 读完本书之后,你将完成一个完整的web应用,该应用允许用户浏览页面以及上传文件. 里面对一些知识的讲解,让你略窥Node.js的门径.最好一段代码一段代码的写下来,我的习惯是手里拿 ...

  6. Tensorflow从入门到精通之——Tensorflow基本操作

    前边的章节介绍了什么是Tensorflow,本节将带大家真正走进Tensorflow的世界,学习Tensorflow一些基本的操作及使用方法.同时也欢迎大家关注我们的网站和系列教程:http://ww ...

  7. TensorFlow.js之安装与核心概念

    TensorFlow.js是通过WebGL加速.基于浏览器的机器学习js框架.通过tensorflow.js,我们可以在浏览器中开发机器学习.运行现有的模型或者重新训练现有的模型. 一.安装     ...

  8. Tensorflow高速入门2--实现手写数字识别

    Tensorflow高速入门2–实现手写数字识别 环境: 虚拟机ubuntun16.0.4 Tensorflow 版本号:0.12.0(仅使用cpu下) Tensorflow安装见: http://b ...

  9. 1. web前端开发分享-css,js入门篇

    关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...

随机推荐

  1. Codeforces Round #551 (Div. 2) E 二分 + 交互

    https://codeforces.com/contest/1153/problem/E 题意 边长为n的正方形里面有一条蛇,每次可以询问一个矩形,然后会告诉你蛇身和矩形相交有几部分,你需要在最多2 ...

  2. Chrome保存整个网页为图片

    打开需要保存为图片的网页 然后按F12,接着按Ctrl+Shift+P 在红框内输入full 点击下面的“Capture full size screenshot”就可以保存整个网页为图片了 原文出处 ...

  3. R语言填充空缺值

    在R语言中, imputeMissings包的特点是,如果空值是数值型,则使用median代替,如果使用的是character类型,则使用mode值代替. imputeMissing中,需要的包是im ...

  4. VSFTP日志文件详解

    开启FTP服务器记录上传下载的情况,如果启用该选项,系统将会维护记录服务器上传和下载情况的日志文件.默认情况下,该日志文件为 /var/log/vsftpd.log # This depends on ...

  5. LOOP AT GROUP语法练习

    DATA:P_MENGE TYPE EKKO-WKURS. DATA:P_MENGE1 TYPE EKKO-WKURS. SELECT * FROM EKKO INTO TABLE @DATA(LT_ ...

  6. SQL Server中使用SQL语句关闭数据库连接和删除数据库文件

    有时候我们想用DROP DATABASE语句删除数据库和数据库文件,会删不掉,因为有其他人正在使用要删除的数据库,这里有一个方法可以强制断开其它数据库连接,再删除数据库. 假如我们要删除的数据库是[T ...

  7. WPF-带有GridView的ListView样式

    ListView是展示数据的常用控件,这里简单对带有GridView的ListView样式进行设置. <Style TargetType="{x:Type ListViewItem}& ...

  8. mvc ajax跳转controller 的路径

    mvc Controller : url: "../phone/index",(控制器名,方法名) 一般处理程序.ashx :  url: "../bianji.ashx ...

  9. XMind破解版,2019年8月好使

    越来越多的公司用思维导图了,进行编写测试用例,以下为破解版,亲身实验才发 的  ,中国时间2019年8月5日 下载安装包: 链接:https://pan.baidu.com/s/1-ubJLPSEpH ...

  10. 【转】测试开发工程师必备软硬能力&高级测试开发工程师需要具备什么能力?

    对于测试的基本知识,可以查看软件测试相关书籍 对于在公司成为一位优秀的测试开发工程师,我觉得下面这篇文章涉及到的是我们需要的,稍微进行改动https://blog.csdn.net/sinat_210 ...