Skip to content

Commit d809d9c

Browse files
flexboxflexbox
committed
Add old-tv challenge
1 parent 13008f6 commit d809d9c

File tree

9 files changed

+250
-35
lines changed

9 files changed

+250
-35
lines changed

‎README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,18 @@ Explore [the complete mindmap](https://my.mindnode.com/h85zxxubxjuSewNvxwdhA3Ef3
66

77
## Projects
88

9+
Build with
10+
11+
```
12+
cp -r tensorflowjs-template new
13+
```
14+
915
1. [mobilenet](mobilenet/)
1016
1. [nsfwjs](nsfwjs/)
1117
1. [joker-face](joker-face/)
1218
1. [image-to-tensor](image-to-tensor/)
1319
1. [tensor-reversal](tensor-reversal/)
20+
1. [old-tv](old-tv/)
1421

1522
## Ressources
1623

‎old-tv/README.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Old TV Tensor Challenge
2+
3+
![](./images/old-tv.gif)
4+
5+
<span>Photo by <a href="https://unsplash.com/@sbk202?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Sam Balye</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
6+
7+
<span>Photo by <a href="https://unsplash.com/@clemono2?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Clem Onojeghuo</a> on <a href="https://unsplash.com/s/photos/old-car?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
8+
9+
## Getting Started
10+
11+
```
12+
yarn
13+
yarn start
14+
```

‎old-tv/images/old-tv.gif‎

16.9 MB
Loading

‎old-tv/images/sam-balye-8apM7vbRP-U-unsplash.jpg‎

99.8 KB
Loading

‎old-tv/index.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>TensorFlow Template</title>
5+
<meta charset="UTF-8" />
6+
<link
7+
rel="stylesheet"
8+
href="./node_modules/modern-normalize/modern-normalize.css"
9+
/>
10+
</head>
11+
12+
<body>
13+
<h1>OLD TV with TensorFlowJS</h1>
14+
<code id="tfversion"></code>
15+
<div id="app">
16+
<div class="buttons">
17+
<button id="rgb">RGB</button>
18+
<button id="bw">BW</button>
19+
<button id="power">Off</button>
20+
</div>
21+
<canvas id="bsod"></canvas>
22+
<div id="screen"></div>
23+
</div>
24+
25+
<script src="./src/index.js"></script>
26+
</body>
27+
</html>

‎old-tv/package.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "tensorflowjs-template",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.html",
6+
"scripts": {
7+
"start": "parcel index.html --open",
8+
"build": "parcel build index.html"
9+
},
10+
"dependencies": {
11+
"@tensorflow/tfjs": "^2.0.1",
12+
"modern-normalize": "^0.7.0"
13+
},
14+
"devDependencies": {
15+
"@babel/core": "7.2.0",
16+
"parcel-bundler": "^1.6.1"
17+
},
18+
"keywords": []
19+
}

‎old-tv/src/index.js‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
import * as tf from '@tensorflow/tfjs';
2+
import './styles.css';
3+
4+
document.getElementById(
5+
'tfversion'
6+
).innerHTML = `TensorFlow version: ${tf.version.tfjs}`;
7+
8+
const blankScreenCanvas = document.getElementById('bsod');
9+
const blankScreen = tf.fill([400, 500, 1], 0.2);
10+
tf.browser.toPixels(blankScreen, blankScreenCanvas);
11+
12+
// CHALLENGE
13+
// make a function getImage that takes the number of channels as an argument
14+
// and returns a tensor image with that many channels of random pixel values
15+
// that is 250 pixels tall and 350 pixels wide
16+
// EXAMPLES:
17+
// getImage(1) should return a black and white static image
18+
// getImage(3) should return a random color static image
19+
20+
let backImage = blankScreen;
21+
const img = new Image();
22+
img.crossOrigin = 'anonymous';
23+
img.src =
24+
'https://images.unsplash.com/photo-1472591339360-3d2c23f5a619?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2165&q=80';
25+
console.log('img', img.src);
26+
img.onload = (result) => {
27+
backImage = tf.image.resizeBilinear(
28+
tf.browser.fromPixels(img),
29+
[400, 500],
30+
true
31+
);
32+
// prevent memory leaks!
33+
tensorArr.forEach((t) => t.dispose());
34+
loadImages(3);
35+
};
36+
37+
function getImage(channels) {
38+
return tf.randomUniform([400, 500, channels], 0, 1);
39+
}
40+
function getTwoImage(channels) {
41+
return tf
42+
.randomUniform([400, 500, channels], 0, 255, 'int32')
43+
.add(backImage)
44+
.div(512);
45+
}
46+
47+
let imgIndex = 0;
48+
let canvasArr;
49+
let tensorArr;
50+
let tvPower = true;
51+
const screen = document.getElementById('screen');
52+
const rgbButton = document.getElementById('rgb');
53+
const bwButton = document.getElementById('bw');
54+
const powerButton = document.getElementById('power');
55+
56+
// This function creates 20 canvas elements based on your tensor function and
57+
// loads them to the page with display = 'none'
58+
function loadImages(channels) {
59+
screen.innerHTML = '';
60+
canvasArr = [];
61+
tensorArr = [];
62+
for (let i = 0; i < 20; i++) {
63+
const canvas = document.createElement('canvas');
64+
screen.appendChild(canvas);
65+
canvasArr.push(canvas);
66+
canvas.style.display = 'none';
67+
// Your getImage function at work!
68+
// const staticImg = getImage(channels);
69+
const staticImg = getTwoImage(channels);
70+
tensorArr.push(staticImg);
71+
tf.browser.toPixels(staticImg, canvas);
72+
}
73+
}
74+
75+
// this function animates the static by looping over the array of canvas elements
76+
// and toggling their display to be visible one at a time if the TV is "on"
77+
function animatetvStatic() {
78+
requestAnimationFrame(() => {
79+
canvasArr[imgIndex].style.display = 'none';
80+
imgIndex++;
81+
if (imgIndex >= canvasArr.length) imgIndex = 0;
82+
if (tvPower) {
83+
canvasArr[imgIndex].style.display = 'block';
84+
}
85+
animatetvStatic();
86+
});
87+
}
88+
89+
// this changes the array of canvas elements to be all black and white static
90+
bwButton.onclick = function () {
91+
// prevent memory leaks!
92+
tensorArr.forEach((t) => t.dispose());
93+
// load images with 1 channel, aka black and white
94+
loadImages(1);
95+
};
96+
97+
// this changes the array of canvas elements to be all color static
98+
rgbButton.onclick = function () {
99+
// prevent memory leaks!
100+
tensorArr.forEach((t) => t.dispose());
101+
// load images with 3 channel, aka full color static!
102+
loadImages(3);
103+
};
104+
105+
// toggles a boolean that our animation function uses to decide
106+
// whether or not to display canvas elements
107+
powerButton.onclick = function () {
108+
tvPower = !tvPower;
109+
powerButton.textContent = tvPower ? 'Off' : 'On';
110+
};
111+
112+
// kicks things off with color static!
113+
loadImages(3);
114+
animatetvStatic();

‎old-tv/src/styles.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
body {
2+
padding: 20px 40px;
3+
}
4+
5+
#app {
6+
background-image: url(../images/sam-balye-8apM7vbRP-U-unsplash.jpg);
7+
background-size: cover;
8+
width: 960px;
9+
height: 654px;
10+
position: relative;
11+
}
12+
13+
#bsod,
14+
#screen {
15+
position: absolute;
16+
top: 145px;
17+
left: 180px;
18+
width: 500px;
19+
height: 400px;
20+
}
21+
22+
.buttons {
23+
position: absolute;
24+
top: 240px;
25+
right: 180px;
26+
display: grid;
27+
grid-row-gap: 30px;
28+
}
29+
30+
#rgb,
31+
#bw {
32+
border-radius: 100%;
33+
width: 50px;
34+
height: 50px;
35+
}

‎tensorflowjs-template/yarn.lock‎ renamed to ‎old-tv/yarn.lock‎

Lines changed: 34 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -988,9 +988,9 @@
988988
form-data "^3.0.0"
989989

990990
"@types/node@*":
991-
version "14.0.23"
992-
resolved "https://registry.yarnpkg.com/@types/node/-/node-14.0.23.tgz#676fa0883450ed9da0bb24156213636290892806"
993-
integrity sha512-Z4U8yDAl5TFkmYsZdFPdjeMa57NOvnaf1tljHzhouaPEp7LCj2JKkejpI1ODviIAQuW4CcQmxkQ77rnLsOOoKw==
991+
version "14.0.26"
992+
resolved "https://registry.yarnpkg.com/@types/node/-/node-14.0.26.tgz#22a3b8a46510da8944b67bfc27df02c34a35331c"
993+
integrity sha512-W+fpe5s91FBGE0pEa0lnqGLL4USgpLgs4nokw16SrBBco/gQxuua7KnArSEOd5iaMqbbSHV10vUDkJYJJqpXKA==
994994

995995
"@types/offscreencanvas@~2019.3.0":
996996
version "2019.3.0"
@@ -1478,9 +1478,9 @@ caniuse-api@^3.0.0:
14781478
lodash.uniq "^4.5.0"
14791479

14801480
caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001093:
1481-
version "1.0.30001102"
1482-
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001102.tgz#3275e7a8d09548f955f665e532df88de0b63741a"
1483-
integrity sha512-fOjqRmHjRXv1H1YD6QVLb96iKqnu17TjcLSaX64TwhGYed0P1E1CCWZ9OujbbK4Z/7zax7zAzvQidzdtjx8RcA==
1481+
version "1.0.30001106"
1482+
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001106.tgz#7e2132711295ef30ffe5ee45b71936354d105d8c"
1483+
integrity sha512-XqSQKt9Fd3Z9BoN0cpSaITcTInKhMNGkaWtQ4rDnyQU1BJzzWDWCUi3cJflaPWk2kbrkYkfMrMrjIFzb3kd6NQ==
14841484

14851485
caseless@~0.12.0:
14861486
version "0.12.0"
@@ -1813,13 +1813,12 @@ css-select@^2.0.0:
18131813
nth-check "^1.0.2"
18141814

18151815
css-selector-tokenizer@^0.7.0:
1816-
version "0.7.2"
1817-
resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.2.tgz#11e5e27c9a48d90284f22d45061c303d7a25ad87"
1818-
integrity sha512-yj856NGuAymN6r8bn8/Jl46pR+OC3eEvAhfGYDUe7YPtTPAYrSSw4oAniZ9Y8T5B92hjhwTBLUen0/vKPxf6pw==
1816+
version "0.7.3"
1817+
resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.3.tgz#735f26186e67c749aaf275783405cf0661fae8f1"
1818+
integrity sha512-jWQv3oCEL5kMErj4wRnK/OPoBi0D+P1FR2cDCKYPaMeD2eW3/mttav8HT4hT1CKopiJI/psEULjkClhvJo4Lvg==
18191819
dependencies:
18201820
cssesc "^3.0.0"
18211821
fastparse "^1.1.2"
1822-
regexpu-core "^4.6.0"
18231822

18241823
css-tree@1.0.0-alpha.37:
18251824
version "1.0.0-alpha.37"
@@ -2133,9 +2132,9 @@ ee-first@1.1.1:
21332132
integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
21342133

21352134
electron-to-chromium@^1.3.488:
2136-
version "1.3.500"
2137-
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.500.tgz#ac082dd2279251b14f1a7f6af6fd16655cf3eb7b"
2138-
integrity sha512-Zz8BZh4Ssb/rZBaicqpi+GOQ0uu3y+24+MxBLCk0UYt8EGoZRP4cYzYHHwXGZfrSbCU4VDjbWN+Tg+TPgOUX6Q==
2135+
version "1.3.509"
2136+
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.509.tgz#830fcb89cd66dc2984d18d794973b99e3f00584c"
2137+
integrity sha512-cN4lkjNRuTG8rtAqTOVgwpecEC2kbKA04PG6YijcKGHK/kD0xLjiqExcAOmLUwtXZRF8cBeam2I0VZcih919Ug==
21392138

21402139
elliptic@^6.0.0, elliptic@^6.5.2:
21412140
version "6.5.3"
@@ -2166,9 +2165,9 @@ entities@^2.0.0:
21662165
integrity sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ==
21672166

21682167
envinfo@^7.3.1:
2169-
version "7.5.1"
2170-
resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.5.1.tgz#93c26897225a00457c75e734d354ea9106a72236"
2171-
integrity sha512-hQBkDf2iO4Nv0CNHpCuSBeaSrveU6nThVxFGTrq/eDlV716UQk09zChaJae4mZRsos1x4YLY2TaH3LHUae3ZmQ==
2168+
version "7.7.2"
2169+
resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.7.2.tgz#098f97a0e902f8141f9150553c92dbb282c4cabe"
2170+
integrity sha512-k3Eh5bKuQnZjm49/L7H4cHzs2FlL5QjbTB3JrPxoTI8aJG7hVMe4uKyJxSYH4ahseby2waUwk5OaKX/nAsaYgg==
21722171

21732172
error-ex@^1.3.1:
21742173
version "1.3.2"
@@ -2268,9 +2267,9 @@ etag@~1.8.1:
22682267
integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
22692268

22702269
events@^3.0.0:
2271-
version "3.1.0"
2272-
resolved "https://registry.yarnpkg.com/events/-/events-3.1.0.tgz#84279af1b34cb75aa88bf5ff291f6d0bd9b31a59"
2273-
integrity sha512-Rv+u8MLHNOdMjTAFeT3nCjHn2aGlx435FP/sDHNaRhDEMwyI/aB22Kj2qIN8R0cw3z28psEQLYwxVKLsKrMgWg==
2270+
version "3.2.0"
2271+
resolved "https://registry.yarnpkg.com/events/-/events-3.2.0.tgz#93b87c18f8efcd4202a461aec4dfc0556b639379"
2272+
integrity sha512-/46HWwbfCX2xTawVfkKLGxMifJYQBWMwY1mjywRtb4c9x8l5NP3KoJtnIOiL1hfdRkIuYhETxQlo62IF8tcnlg==
22742273

22752274
evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
22762275
version "1.0.3"
@@ -3424,9 +3423,9 @@ node-libs-browser@^2.0.0:
34243423
vm-browserify "^1.0.1"
34253424

34263425
node-releases@^1.1.58:
3427-
version "1.1.59"
3428-
resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.59.tgz#4d648330641cec704bff10f8e4fe28e453ab8e8e"
3429-
integrity sha512-H3JrdUczbdiwxN5FuJPyCHnGHIFqQ0wWxo+9j1kAXAzqNMAHlo+4I/sYYxpyK0irQ73HgdiyzD32oqQDcU2Osw==
3426+
version "1.1.60"
3427+
resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.60.tgz#6948bdfce8286f0b5d0e5a88e8384e954dfe7084"
3428+
integrity sha512-gsO4vjEdQaTusZAEebUWp2a5d7dF5DYoIpDG7WySnk7BuZDW+GPpHXoXXuYawRBr/9t5q54tirPz79kFIWg4dA==
34303429

34313430
normalize-html-whitespace@^1.0.0:
34323431
version "1.0.0"
@@ -4277,9 +4276,9 @@ regenerator-runtime@^0.11.0:
42774276
integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
42784277

42794278
regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.5:
4280-
version "0.13.5"
4281-
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697"
4282-
integrity sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==
4279+
version "0.13.7"
4280+
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
4281+
integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
42834282

42844283
regenerator-transform@^0.14.2:
42854284
version "0.14.5"
@@ -4296,7 +4295,7 @@ regex-not@^1.0.0, regex-not@^1.0.2:
42964295
extend-shallow "^3.0.2"
42974296
safe-regex "^1.1.0"
42984297

4299-
regexpu-core@^4.6.0, regexpu-core@^4.7.0:
4298+
regexpu-core@^4.7.0:
43004299
version "4.7.0"
43014300
resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.0.tgz#fcbf458c50431b0bb7b45d6967b8192d91f3d938"
43024301
integrity sha512-TQ4KXRnIn6tz6tjnrXEkD/sshygKH/j5KzK86X8MkeHyZ8qst/LZ89j3X4/8HEIfHANTFIP/AbXakeRhWIl5YQ==
@@ -4335,19 +4334,19 @@ repeat-string@^1.6.1:
43354334
resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
43364335
integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
43374336

4338-
request-promise-core@1.1.3:
4339-
version "1.1.3"
4340-
resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.3.tgz#e9a3c081b51380dfea677336061fea879a829ee9"
4341-
integrity sha512-QIs2+ArIGQVp5ZYbWD5ZLCY29D5CfWizP8eWnm8FoGD1TX61veauETVQbrV60662V0oFBkrDOuaBI8XgtuyYAQ==
4337+
request-promise-core@1.1.4:
4338+
version "1.1.4"
4339+
resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.4.tgz#3eedd4223208d419867b78ce815167d10593a22f"
4340+
integrity sha512-TTbAfBBRdWD7aNNOoVOBH4pN/KigV6LyapYNNlAPA8JwbovRti1E88m3sYAwsLi5ryhPKsE9APwnjFTgdUjTpw==
43424341
dependencies:
4343-
lodash "^4.17.15"
4342+
lodash "^4.17.19"
43444343

43454344
request-promise-native@^1.0.5:
4346-
version "1.0.8"
4347-
resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.8.tgz#a455b960b826e44e2bf8999af64dff2bfe58cb36"
4348-
integrity sha512-dapwLGqkHtwL5AEbfenuzjTYg35Jd6KPytsC2/TLkVMz8rm+tNt72MGUWT1RP/aYawMpN6HqbNGBQaRcBtjQMQ==
4345+
version "1.0.9"
4346+
resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.9.tgz#e407120526a5efdc9a39b28a5679bf47b9d9dc28"
4347+
integrity sha512-wcW+sIUiWnKgNY0dqCpOZkUbF/I+YPi+f09JZIDa39Ec+q82CpSYniDp+ISgTTbKmnpJWASeJBPZmoxH84wt3g==
43494348
dependencies:
4350-
request-promise-core "1.1.3"
4349+
request-promise-core "1.1.4"
43514350
stealthy-require "^1.1.1"
43524351
tough-cookie "^2.3.3"
43534352

0 commit comments

Comments
 (0)