Phone AI (no libraries) · Part 3 · HTML + JavaScript
I drew a heart. My phone AI learned it LIVEPRO
Part 3: no dataset at all. Every tap adds a dot and the 24-neuron brain learns the shape while you draw. Draw anything and watch it learn.
<meta name="viewport" content="width=device-width, user-scalable=no">
<style>body { margin: 0; background: #0b0f17; display: grid; place-items: center; height: 100vh; }</style>
<canvas id="c"></canvas>
<button id="b" style="width:100%;font-size:22px;padding:14px">tap = yellow</button>
<script>
const c = document.getElementById("c");
const b = document.getElementById("b");
const g = c.getContext("2d");
const S = c.width = c.height = Math.min(innerWidth, innerHeight);
// no dataset: my finger makes the dots
const pts = [];
let color = 1;
c.onclick = e => pts.push([e.offsetX / S * 2 - 1, e.offsetY / S * 2 - 1, color]);
b.onclick = () => { color = 1 - color; b.textContent = color ? "tap = yellow" : "tap = blue"; };
// the same brain as part 2: 24 neurons
+ 52 more lines in the app (Pro)
Open code AI3 in Pocket Compiler
Download the Pocket Compiler app — free
No app yet? Install it, then open the app and type the code AI3 in Code Library.