TensorFlow.js入門(一)一維向量的學習


TensorFlow的介紹

  TensorFlow是谷歌基於DistBelief進行研發的第二代人工智能學習系統,其命名來源於本身的運行原理。Tensor(張量)意味着N維數組,Flow(流)意味着基於數據流圖的計算,TensorFlow為張量從流圖的一端流動到另一端計算過程。TensorFlow是將復雜的數據結構傳輸至人工智能神經網中進行分析和處理過程的系統。
  TensorFlow是一個著名的開源的人工智能系統,被廣泛應用於語音識別或圖像識別等多項機器學習和深度學習領域。它目前支持的程序語言有: Java, Python, Go, Lua, R, JavaScript, 其中2018年3 月 31 日 ,TensorFlow 宣布增加支持 JavaScript,並推出開源庫 TensorFlow.js 。
  我們將會介紹在前端開發中TensorFlow的相關內容,即TensorFlow.js的學習與應用。

Tensorflow中的一維向量及其運算

  tensor 是 TensorFlow.js 的數據中心單元:由一組數值組成的一維或多維數組。在 TensorFlow.js中,一維向量的構造函數主要為:tf.tensor()和tf.tensor1d(),具體的API文檔可以參考:https://js.tensorflow.org/api/0.12.0/
  可以用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需要添加"script"標簽,如下:

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.12.0"> </script>

  我們通過一個小小的例子,來說明在TensorFlow.js中一維向量的使用方法,其完整的HTML代碼如下:

<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>
		function show(){
			var a = [1,2,3,4,5];
			var b = [2,3,4,5,6];
			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>
  <p id="first_element"></p>
  <p id="whole_array"></p>
  <button onclick="show()" id="show" value="show">show</button>
  </body>
  
</html>

顯示的網頁如下圖:

實戰

  在剛才的例子中,我們僅僅只給出了一個簡單的例子,那么,如果要實現稍微復雜一點的功能呢,比如下面的網頁:

  我們可以用TensorFlow.js來實現這些向量運算。該網頁的完整的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="tf_result.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>

在其中我們用到了tf_result.js,其完整的JavaScript代碼如下:

$(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>;");
			}
		}
		
	});
	
});

  運行剛才的網頁,效果如下:


  怎么樣,是不是覺得TensorFlow.js也酷酷的呢?結合TensorFlow.js以及前端網頁方面的知識,我們可以給出許多酷炫的TensorFlow的應用,以后我們會慢慢講到。本次項目的Github地址為:https://github.com/percent4/tensorflow_js_learning

注意:本人現已開通兩個微信公眾號: 因為Python(微信號為:python_math)以及輕松學會Python爬蟲(微信號為:easy_web_scrape), 歡迎大家關注哦~~


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM