Merge pull request #31 from snowkylin/javascript

Javascript chapter improvements (#6)
snowkylin · Nov 11, 2019 · 08d1fbe · 08d1fbe
2 parents 6e2a87f + 927622a
commit 08d1fbe
Show file tree

Hide file tree

Showing 5 changed files with 298 additions and 160 deletions.
diff --git a/Makefile b/Makefile
@@ -20,6 +20,10 @@ install:
 	pip3 install sphinx_markdown_builder
 	pip3 install sphinx_rtd_theme
 
+.PHONHY: watch
+watch:
+	fswatch source/ | xargs -n 1 -I{} make html
+
 # Catch-all target: route all unknown targets to Sphinx using the new
 # "make mode" option.  $(O) is meant as a shortcut for $(SPHINXOPTS).
 %: Makefile

diff --git a/source/_static/code/zh/deployment/javascript/mobilenet.html b/source/_static/code/zh/deployment/javascript/mobilenet.html
@@ -0,0 +1,56 @@
+<html>
+
+<head>
+    <script src="https://unpkg.com/@tensorflow/tfjs"></script>
+    <script src="https://unpkg.com/@tensorflow-models/mobilenet"> </script>
+</head>
+
+<video width=400 height=300></video>
+<p></p>
+<img width=400 height=300 />
+
+<script>
+    const video = document.querySelector('video')
+    const image = document.querySelector('img')
+    const status = document.querySelector("p")
+
+    const canvas = document.createElement('canvas')
+    const ctx = canvas.getContext('2d')
+
+    let model
+
+    main()
+
+    async function main () {
+        status.innerText = "Model loading..."
+        model = await mobilenet.load()
+        status.innerText = "Model is loaded!"
+
+        const stream = await navigator.mediaDevices.getUserMedia({ video: true })
+        video.srcObject = stream
+        await video.play()
+
+        canvas.width = video.videoWidth
+        canvas.height = video.videoHeight
+
+        refresh()
+    }
+
+    async function refresh(){
+        ctx.drawImage(video, 0,0)
+        image.src = canvas.toDataURL('image/png')
+
+        await model.load()
+        const predictions = await model.classify(image)
+
+        const className = predictions[0].className
+        const percentage = Math.floor(100 * predictions[0].probability)
+
+        status.innerHTML = percentage + '%' + ' ' + className
+
+        setTimeout(refresh, 100)
+    }
+
+</script>
+
+</html>
diff --git a/source/_static/code/zh/deployment/javascript/regression.html b/source/_static/code/zh/deployment/javascript/regression.html
@@ -0,0 +1,38 @@
+<html>
+<head>
+    <script src="http://unpkg.com/@tensorflow/tfjs/dist/tf.min.js"></script>
+    <script>
+    const xsRaw = tf.tensor([2013, 2014, 2015, 2016, 2017])
+    const ysRaw = tf.tensor([12000, 14000, 15000, 16500, 17500])
+
+    // 归一化
+    const xs = xsRaw.sub(xsRaw.min())
+                    .div(xsRaw.max().sub(xsRaw.min()))
+    const ys = ysRaw.sub(ysRaw.min())
+                    .div(ysRaw.max().sub(ysRaw.min()))
+
+    const a = tf.scalar(Math.random()).variable()
+    const b = tf.scalar(Math.random()).variable()
+
+    // y = a * x + b.
+    const f = (x) => a.mul(x).add(b)
+    const loss = (pred, label) => pred.sub(label).square().mean()
+
+    const learningRate = 1e-3
+    const optimizer = tf.train.sgd(learningRate)
+
+    // 训练模型
+    for (let i = 0; i < 10000; i++) {
+        optimizer.minimize(() => loss(f(xs), ys))
+    }
+
+    // 预测
+    console.log(`a: ${a.dataSync()}, b: ${b.dataSync()}`)
+    const preds = f(xs).dataSync()
+    const trues = ys.arraySync()
+    preds.forEach((pred, i) => {
+        console.log(`x: ${i}, pred: ${pred.toFixed(2)}, true: ${trues[i].toFixed(2)}`)
+    })
+    </script>
+</head>
+</html>
diff --git a/source/_static/image/javascript/mobilenet.png b/source/_static/image/javascript/mobilenet.png