Neural Network Training Made Simple

%23%20%2F%2F%2F%20script%0A%23%20dependencies%20%3D%20%5B%22marimo%22%2C%20%22numpy%3D%3D2.4.3%22%2C%20%22anywidget%22%2C%20%22traitlets%3D%3D5.14.3%22%2C%20%22wigglystuff%22%5D%0A%23%20%0A%23%20%5Btool.marimo.export%5D%0A%23%20lock_kind%20%3D%20%22observed%22%0A%23%20%2F%2F%2F%0A%0Aimport%20marimo%0A%0A__generated_with%20%3D%20%220.25.2%22%0Aapp%20%3D%20marimo.App(%0A%20%20%20%20width%3D%22medium%22%2C%0A%20%20%20%20app_title%3D%22Neural%20Network%20Training%20Made%20Simple%22%2C%0A%20%20%20%20html_head_file%3D%22head.html%22%2C%0A)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_()%3A%0A%20%20%20%20import%20marimo%20as%20mo%0A%20%20%20%20import%20numpy%20as%20np%0A%20%20%20%20import%20anywidget%0A%20%20%20%20import%20traitlets%0A%20%20%20%20from%20wigglystuff%20import%20FloatingPanel%0A%0A%20%20%20%20return%20FloatingPanel%2C%20anywidget%2C%20mo%2C%20np%2C%20traitlets%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(anywidget%2C%20traitlets)%3A%0A%20%20%20%20class%20SigmoidCalculator(anywidget.AnyWidget)%3A%0A%20%20%20%20%20%20%20%20%22%22%22Computes%20%CF%83(x)%20and%20%CF%83'(x)%20in%20the%20browser%2C%20so%20the%20floating%20panel%0A%20%20%20%20%20%20%20%20never%20re-renders%20(and%20never%20jumps%20back%20to%20its%20corner).%22%22%22%0A%0A%20%20%20%20%20%20%20%20x%20%3D%20traitlets.Float(0.0).tag(sync%3DTrue)%0A%20%20%20%20%20%20%20%20sigmoid%20%3D%20traitlets.Float(0.5).tag(sync%3DTrue)%0A%20%20%20%20%20%20%20%20derivative%20%3D%20traitlets.Float(0.25).tag(sync%3DTrue)%0A%0A%20%20%20%20%20%20%20%20_esm%20%3D%20%22%22%22%0A%20%20%20%20%20%20%20%20function%20sigmoid(x)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%2F%2F%20numerically%20stable%20for%20large%20%7Cx%7C%0A%20%20%20%20%20%20%20%20%20%20if%20(x%20%3E%3D%200)%20return%201%20%2F%20(1%20%2B%20Math.exp(-x))%3B%0A%20%20%20%20%20%20%20%20%20%20const%20e%20%3D%20Math.exp(x)%3B%0A%20%20%20%20%20%20%20%20%20%20return%20e%20%2F%20(1%20%2B%20e)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20function%20fmt(v)%20%7B%0A%20%20%20%20%20%20%20%20%20%20if%20(v%20%3D%3D%3D%200)%20return%20%220%22%3B%0A%20%20%20%20%20%20%20%20%20%20const%20a%20%3D%20Math.abs(v)%3B%0A%20%20%20%20%20%20%20%20%20%20return%20a%20%3C%201e-4%20%7C%7C%20a%20%3E%3D%201e6%20%3F%20v.toExponential(4)%20%3A%20String(%2Bv.toPrecision(6))%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20function%20render(%7B%20model%2C%20el%20%7D)%20%7B%0A%20%20%20%20%20%20%20%20%20%20el.innerHTML%20%3D%20%60%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22sc%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Clabel%20class%3D%22sc-in%22%3Ex%20%3D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22number%22%20step%3D%22any%22%20value%3D%22%24%7Bmodel.get(%22x%22)%7D%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Flabel%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22sc-row%22%3E%3Cspan%3E%CF%83(x)%3C%2Fspan%3E%3Ccode%20data-k%3D%22s%22%3E%3C%2Fcode%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22sc-row%22%3E%3Cspan%3E%CF%83%E2%80%B2(x)%20%3D%20%CF%83(x)(1%20%E2%88%92%20%CF%83(x))%3C%2Fspan%3E%3Ccode%20data-k%3D%22d%22%3E%3C%2Fcode%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%60%3B%0A%20%20%20%20%20%20%20%20%20%20const%20input%20%3D%20el.querySelector(%22input%22)%3B%0A%20%20%20%20%20%20%20%20%20%20const%20out%20%3D%20(k)%20%3D%3E%20el.querySelector(%60%5Bdata-k%3D%22%24%7Bk%7D%22%5D%60)%3B%0A%20%20%20%20%20%20%20%20%20%20function%20update()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20x%20%3D%20parseFloat(input.value)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(!Number.isFinite(x))%20%7B%20out(%22s%22).textContent%20%3D%20out(%22d%22).textContent%20%3D%20%22%E2%80%94%22%3B%20return%3B%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20s%20%3D%20sigmoid(x)%2C%20d%20%3D%20s%20*%20(1%20-%20s)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20out(%22s%22).textContent%20%3D%20fmt(s)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20out(%22d%22).textContent%20%3D%20fmt(d)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20model.set(%22x%22%2C%20x)%3B%20model.set(%22sigmoid%22%2C%20s)%3B%20model.set(%22derivative%22%2C%20d)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20model.save_changes()%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20input.addEventListener(%22input%22%2C%20update)%3B%0A%20%20%20%20%20%20%20%20%20%20update()%3B%0A%0A%20%20%20%20%20%20%20%20%20%20async%20function%20copy(text)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20try%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20await%20navigator.clipboard.writeText(text)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20catch%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20fallback%20for%20iframes%20where%20the%20Clipboard%20API%20is%20blocked%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20const%20ta%20%3D%20document.createElement(%22textarea%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20ta.value%20%3D%20text%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20ta.style.cssText%20%3D%20%22position%3Afixed%3Bopacity%3A0%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20document.body.appendChild(ta)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20ta.select()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20document.execCommand(%22copy%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20ta.remove()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20el.querySelectorAll(%22code%22).forEach((c)%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20c.title%20%3D%20%22Click%20to%20copy%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20c.addEventListener(%22click%22%2C%20async%20()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20const%20text%20%3D%20c.textContent%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(text%20%3D%3D%3D%20%22%E2%80%94%22%20%7C%7C%20c.classList.contains(%22copied%22))%20return%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20await%20copy(text)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20c.classList.add(%22copied%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20c.textContent%20%3D%20%22Copied!%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20setTimeout(()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20c.classList.remove(%22copied%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20update()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%20900)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20export%20default%20%7B%20render%20%7D%3B%0A%20%20%20%20%20%20%20%20%22%22%22%0A%0A%20%20%20%20%20%20%20%20_css%20%3D%20%22%22%22%0A%20%20%20%20%20%20%20%20.sc%20%7B%20display%3A%20flex%3B%20flex-direction%3A%20column%3B%20gap%3A%208px%3B%20min-width%3A%20240px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-family%3A%20system-ui%2C%20sans-serif%3B%20font-size%3A%2014px%3B%20%7D%0A%20%20%20%20%20%20%20%20.sc-in%20%7B%20display%3A%20flex%3B%20align-items%3A%20center%3B%20gap%3A%208px%3B%20font-weight%3A%20600%3B%20%7D%0A%20%20%20%20%20%20%20%20.sc-in%20input%20%7B%20flex%3A%201%3B%20padding%3A%204px%208px%3B%20font%3A%20inherit%3B%20font-weight%3A%20400%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20border%3A%201px%20solid%20%238884%3B%20border-radius%3A%206px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20transparent%3B%20color%3A%20inherit%3B%20%7D%0A%20%20%20%20%20%20%20%20.sc-row%20%7B%20display%3A%20flex%3B%20justify-content%3A%20space-between%3B%20gap%3A%2016px%3B%20%7D%0A%20%20%20%20%20%20%20%20.sc-row%20code%20%7B%20font-variant-numeric%3A%20tabular-nums%3B%20cursor%3A%20pointer%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20padding%3A%200%204px%3B%20border-radius%3A%204px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20transition%3A%20background%200.15s%3B%20%7D%0A%20%20%20%20%20%20%20%20.sc-row%20code%3Ahover%20%7B%20background%3A%20%238882%3B%20%7D%0A%20%20%20%20%20%20%20%20.sc-row%20code.copied%20%7B%20color%3A%20%2316a34a%3B%20%7D%0A%20%20%20%20%20%20%20%20%22%22%22%0A%0A%20%20%20%20return%20(SigmoidCalculator%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(FloatingPanel%2C%20SigmoidCalculator%2C%20mo)%3A%0A%20%20%20%20sigmoid_calc%20%3D%20mo.ui.anywidget(SigmoidCalculator())%0A%0A%20%20%20%20calculator%20%3D%20FloatingPanel(%0A%20%20%20%20%20%20%20%20sigmoid_calc%2C%20corner%3D%22top-right%22%2C%20title%3D%22Sigmoid%20calculator%22%0A%20%20%20%20)%0A%0A%20%20%20%20calculator%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(FloatingPanel%2C%20network_svg)%3A%0A%20%20%20%20%23%20The%20network's%20structure%20(node%20names%20only)%2C%20always%20one%20click%20away%20while%0A%20%20%20%20%23%20reading.%20Starts%20collapsed%20so%20it%20doesn't%20cover%20the%20text.%0A%20%20%20%20_nodes%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%22A%22%3A%20(60%2C%2070%2C%20%22%22)%2C%0A%20%20%20%20%20%20%20%20%22B%22%3A%20(60%2C%20190%2C%20%22%22)%2C%0A%20%20%20%20%20%20%20%20%22C%20(bias)%22%3A%20(150%2C%20290%2C%20%22%22)%2C%0A%20%20%20%20%20%20%20%20%22D%22%3A%20(290%2C%2070%2C%20%22%22)%2C%0A%20%20%20%20%20%20%20%20%22E%22%3A%20(290%2C%20190%2C%20%22%22)%2C%0A%20%20%20%20%20%20%20%20%22F%20(bias)%22%3A%20(390%2C%20290%2C%20%22%22)%2C%0A%20%20%20%20%20%20%20%20%22G%22%3A%20(460%2C%20130%2C%20%22%22)%2C%0A%20%20%20%20%7D%0A%20%20%20%20_edges%20%3D%20%5B%0A%20%20%20%20%20%20%20%20(_src%2C%20_dst%2C%200%2C%200.5%2C%201)%0A%20%20%20%20%20%20%20%20for%20_src%2C%20_dst%20in%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20(%22A%22%2C%20%22D%22)%2C%20(%22A%22%2C%20%22E%22)%2C%20(%22B%22%2C%20%22D%22)%2C%20(%22B%22%2C%20%22E%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20(%22C%20(bias)%22%2C%20%22D%22)%2C%20(%22C%20(bias)%22%2C%20%22E%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20(%22D%22%2C%20%22G%22)%2C%20(%22E%22%2C%20%22G%22)%2C%20(%22F%20(bias)%22%2C%20%22G%22)%2C%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%5D%0A%0A%20%20%20%20FloatingPanel(%0A%20%20%20%20%20%20%20%20network_svg(%0A%20%20%20%20%20%20%20%20%20%20%20%20_nodes%2C%20_edges%2C%20width%3D510%2C%20height%3D330%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20show_weights%3DFalse%2C%20labels_inside%3DTrue%2C%0A%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20corner%3D%22top-left%22%2C%0A%20%20%20%20%20%20%20%20width%3D360%2C%0A%20%20%20%20%20%20%20%20collapsed%3DTrue%2C%0A%20%20%20%20%20%20%20%20title%3D%22Network%22%2C%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20%23%20Neural%20Network%20Training%20Made%20Simple%0A%0A%20%20%20%20Every%20neural%20network%20learns%20the%20same%20way%3A%20it%20makes%20a%20guess%2C%20measures%20how%20wrong%20the%20guess%20is%2C%20and%20nudges%20every%20weight%20so%20the%20next%20guess%20is%20a%20little%20less%20wrong.%20In%20this%20notebook%20we'll%20do%20that%20once%2C%20by%20hand%2C%20on%20a%20tiny%20network%20with%20just%209%20weights.%20All%20you%20need%20is%20high-school%20algebra%20and%20the%20idea%20of%20a%20slope.%20While%20you%20read%2C%20the%20**Network**%20panel%20(top%20left%2C%20click%20to%20expand)%20shows%20how%20the%20nodes%20are%20connected%2C%20and%20the%20**Sigmoid%20calculator**%20(top%20right)%20does%20the%20arithmetic%20for%20you.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20def%20network_svg(%0A%20%20%20%20%20%20%20%20nodes%2C%20edges%2C%20target%3DNone%2C%20width%3D600%2C%20height%3D340%2C%20r%3D24%2C%20clickable%3DFalse%2C%0A%20%20%20%20%20%20%20%20highlight%3DNone%2C%20show_weights%3DTrue%2C%20labels_inside%3DFalse%2C%0A%20%20%20%20)%3A%0A%20%20%20%20%20%20%20%20%22%22%22Draw%20a%20small%20feed-forward%20network%20as%20an%20inline%20SVG.%0A%0A%20%20%20%20%20%20%20%20nodes%3A%20%7Bname%3A%20(x%2C%20y%2C%20value_text)%7D%0A%20%20%20%20%20%20%20%20edges%3A%20%5B(src%2C%20dst%2C%20weight%2C%20t%2C%20side)%5D%20-%20the%20weight%20label%20sits%20at%20fraction%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%60t%60%20along%20the%20edge%2C%20nudged%20to%20%60side%60%20(%2B1%20%2F%20-1)%20of%20the%20line.%0A%20%20%20%20%20%20%20%20clickable%3A%20add%20a%20wide%20invisible%20hit%20area%20to%20each%20edge%2C%20so%20a%20widget%20can%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20make%20connections%20clickable.%20Every%20edge%20is%20wrapped%20in%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20data-edge%3D%22AD%22%3E%20(first%20letters%20of%20its%20two%20nodes)%20either%20way.%0A%20%20%20%20%20%20%20%20highlight%3A%20optional%20set%20of%20edge%20keys%20(e.g.%20%7B%22DG%22%2C%20%22EG%22%7D)%3B%20all%20other%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20edges%20are%20drawn%20faded.%0A%20%20%20%20%20%20%20%20show_weights%3A%20False%20draws%20plain%20grey%20connections%20with%20no%20weight%20labels.%0A%20%20%20%20%20%20%20%20labels_inside%3A%20write%20the%20node's%20letter%20inside%20its%20circle%20(and%20%22bias%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20above%20bias%20nodes)%20instead%20of%20the%20name%20above%20and%20the%20value%20inside.%0A%20%20%20%20%20%20%20%20%22%22%22%0A%20%20%20%20%20%20%20%20parts%20%3D%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20f'%3Csvg%20viewBox%3D%220%200%20%7Bwidth%7D%20%7Bheight%7D%22%20width%3D%22100%25%22%20'%0A%20%20%20%20%20%20%20%20%20%20%20%20f'style%3D%22max-width%3A%7Bwidth%7Dpx%3Bfont-family%3Asystem-ui%2Csans-serif%3Bcolor%3Ainherit%22%3E'%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20'%3Cdefs%3E%3Cmarker%20id%3D%22nn-arrow%22%20viewBox%3D%220%200%2010%2010%22%20refX%3D%229%22%20refY%3D%225%22%20'%0A%20%20%20%20%20%20%20%20%20%20%20%20'markerWidth%3D%226%22%20markerHeight%3D%226%22%20orient%3D%22auto-start-reverse%22%3E'%0A%20%20%20%20%20%20%20%20%20%20%20%20'%3Cpath%20d%3D%22M0%2C0%20L10%2C5%20L0%2C10%20z%22%20fill%3D%22context-stroke%22%2F%3E%3C%2Fmarker%3E%3C%2Fdefs%3E'%2C%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%20%20for%20src%2C%20dst%2C%20w%2C%20t%2C%20side%20in%20edges%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20x1%2C%20y1%2C%20_%20%3D%20nodes%5Bsrc%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20x2%2C%20y2%2C%20_%20%3D%20nodes%5Bdst%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20dx%2C%20dy%20%3D%20x2%20-%20x1%2C%20y2%20-%20y1%0A%20%20%20%20%20%20%20%20%20%20%20%20d%20%3D%20(dx**2%20%2B%20dy**2)%20**%200.5%0A%20%20%20%20%20%20%20%20%20%20%20%20ux%2C%20uy%20%3D%20dx%20%2F%20d%2C%20dy%20%2F%20d%0A%20%20%20%20%20%20%20%20%20%20%20%20sx%2C%20sy%20%3D%20x1%20%2B%20ux%20*%20r%2C%20y1%20%2B%20uy%20*%20r%0A%20%20%20%20%20%20%20%20%20%20%20%20ex%2C%20ey%20%3D%20x2%20-%20ux%20*%20(r%20%2B%202)%2C%20y2%20-%20uy%20*%20(r%20%2B%202)%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20show_weights%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color%20%3D%20%22%232563eb%22%20if%20w%20%3E%3D%200%20else%20%22%23dc2626%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stroke_w%20%3D%200.75%20%2B%202.5%20*%20min(abs(w)%2C%201.5)%0A%20%20%20%20%20%20%20%20%20%20%20%20else%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color%2C%20stroke_w%20%3D%20%22currentColor%22%2C%201.5%0A%20%20%20%20%20%20%20%20%20%20%20%20key%20%3D%20f%22%7Bsrc%5B0%5D%7D%7Bdst%5B0%5D%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20faded%20%3D%20highlight%20is%20not%20None%20and%20key%20not%20in%20highlight%0A%20%20%20%20%20%20%20%20%20%20%20%20fade_attr%20%3D%20'%20opacity%3D%220.25%22'%20if%20faded%20else%20%22%22%0A%20%20%20%20%20%20%20%20%20%20%20%20parts.append(f'%3Cg%20data-edge%3D%22%7Bkey%7D%22%7Bfade_attr%7D%3E')%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20clickable%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20parts.append(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f'%3Cline%20class%3D%22hit%22%20x1%3D%22%7Bsx%3A.1f%7D%22%20y1%3D%22%7Bsy%3A.1f%7D%22%20x2%3D%22%7Bex%3A.1f%7D%22%20'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f'y2%3D%22%7Bey%3A.1f%7D%22%20stroke%3D%22transparent%22%20stroke-width%3D%2218%22%2F%3E'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20%20%20%20%20parts.append(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f'%3Cline%20class%3D%22edge%22%20x1%3D%22%7Bsx%3A.1f%7D%22%20y1%3D%22%7Bsy%3A.1f%7D%22%20x2%3D%22%7Bex%3A.1f%7D%22%20y2%3D%22%7Bey%3A.1f%7D%22%20'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f'stroke%3D%22%7Bcolor%7D%22%20stroke-width%3D%22%7Bstroke_w%3A.2f%7D%22%20stroke-opacity%3D%220.8%22%20'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f'marker-end%3D%22url(%23nn-arrow)%22%2F%3E'%0A%20%20%20%20%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20%20%20%20%20lx%20%3D%20sx%20%2B%20(ex%20-%20sx)%20*%20t%20-%20uy%20*%2011%20*%20side%0A%20%20%20%20%20%20%20%20%20%20%20%20ly%20%3D%20sy%20%2B%20(ey%20-%20sy)%20*%20t%20%2B%20ux%20*%2011%20*%20side%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20show_weights%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20parts.append(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f'%3Ctext%20x%3D%22%7Blx%3A.1f%7D%22%20y%3D%22%7Bly%20%2B%204%3A.1f%7D%22%20font-size%3D%2212%22%20'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f'text-anchor%3D%22middle%22%20fill%3D%22%7Bcolor%7D%22%3E%7Bw%3A%2B.2f%7D%3C%2Ftext%3E'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20%20%20%20%20parts.append(%22%3C%2Fg%3E%22)%0A%20%20%20%20%20%20%20%20for%20name%2C%20(x%2C%20y%2C%20val)%20in%20nodes.items()%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20labels_inside%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20parts.append(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f'%3Ccircle%20cx%3D%22%7Bx%7D%22%20cy%3D%22%7By%7D%22%20r%3D%22%7Br%7D%22%20fill%3D%22none%22%20'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f'stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%2F%3E'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f'%3Ctext%20x%3D%22%7Bx%7D%22%20y%3D%22%7By%20%2B%206%7D%22%20font-size%3D%2217%22%20font-weight%3D%22600%22%20'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f'text-anchor%3D%22middle%22%20fill%3D%22currentColor%22%3E%7Bname%5B0%5D%7D%3C%2Ftext%3E'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20%22bias%22%20in%20name%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20parts.append(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f'%3Ctext%20x%3D%22%7Bx%7D%22%20y%3D%22%7By%20-%20r%20-%208%7D%22%20font-size%3D%2212%22%20text-anchor%3D%22middle%22%20'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f'fill%3D%22currentColor%22%20fill-opacity%3D%220.7%22%3Ebias%3C%2Ftext%3E'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20continue%0A%20%20%20%20%20%20%20%20%20%20%20%20parts.append(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f'%3Ccircle%20cx%3D%22%7Bx%7D%22%20cy%3D%22%7By%7D%22%20r%3D%22%7Br%7D%22%20fill%3D%22none%22%20'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f'stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%2F%3E'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f'%3Ctext%20x%3D%22%7Bx%7D%22%20y%3D%22%7By%20%2B%204%7D%22%20font-size%3D%2213%22%20text-anchor%3D%22middle%22%20'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f'fill%3D%22currentColor%22%3E%7Bval%7D%3C%2Ftext%3E'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f'%3Ctext%20x%3D%22%7Bx%7D%22%20y%3D%22%7By%20-%20r%20-%208%7D%22%20font-size%3D%2213%22%20font-weight%3D%22600%22%20'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f'text-anchor%3D%22middle%22%20fill%3D%22currentColor%22%3E%7Bname%7D%3C%2Ftext%3E'%0A%20%20%20%20%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20if%20target%20is%20not%20None%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20gx%2C%20gy%2C%20_%20%3D%20nodes%5B%22G%22%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20parts.append(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f'%3Ctext%20x%3D%22%7Bgx%20%2B%20r%20%2B%2012%7D%22%20y%3D%22%7Bgy%20%2B%204%7D%22%20font-size%3D%2213%22%20'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f'fill%3D%22currentColor%22%3Etarget%20t%20%3D%20%7Btarget%3Ag%7D%3C%2Ftext%3E'%0A%20%20%20%20%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20parts.append(%22%3C%2Fsvg%3E%22)%0A%20%20%20%20%20%20%20%20return%20mo.Html(%22%22.join(parts))%0A%0A%20%20%20%20return%20(network_svg%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(np)%3A%0A%20%20%20%20%23%20Small%20random%20weights%20keep%20the%20sigmoid%20out%20of%20its%20flat%2C%20saturated%20regions%2C%0A%20%20%20%20%23%20so%20gradients%20are%20healthy%20at%20the%20start%20of%20training.%20Fixed%20seed%20%3D%3E%20the%0A%20%20%20%20%23%20article%20shows%20the%20same%20numbers%20on%20every%20run.%0A%20%20%20%20_rng%20%3D%20np.random.default_rng(seed%3D7)%0A%20%20%20%20_names%20%3D%20%5B%22AD%22%2C%20%22AE%22%2C%20%22BD%22%2C%20%22BE%22%2C%20%22CD%22%2C%20%22CE%22%2C%20%22DG%22%2C%20%22EG%22%2C%20%22FG%22%5D%0A%20%20%20%20weights%20%3D%20dict(zip(_names%2C%20np.round(_rng.uniform(-0.5%2C%200.5%2C%20len(_names))%2C%202)))%0A%20%20%20%20inputs%20%3D%20%7B%22A%22%3A%201.0%2C%20%22B%22%3A%200.0%7D%0A%20%20%20%20target%20%3D%201.0%0A%20%20%20%20learning_rate%20%3D%200.5%20%20%23%20%CE%BC%3A%20how%20big%20a%20step%20each%20update%20takes%0A%20%20%20%20return%20inputs%2C%20learning_rate%2C%20target%2C%20weights%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20%23%23%20The%20Setup%0A%0A%20%20%20%20Let's%20consider%20the%20following%20Neural%20Network.%20It%20has%3A%0A%0A%20%20%20%20-%20Two%20input%20nodes%0A%20%20%20%20-%20Two%20hidden%20nodes%0A%20%20%20%20-%20One%20output%20node%0A%20%20%20%20-%20Two%20bias%20nodes%0A%0A%20%20%20%20Every%20connection%20between%20two%20nodes%20has%20an%20assigned%20weight.%20When%20we%20start%2C%20these%20weights%20are%20assigned%20randomly.%20The%20goal%20of%20training%20the%20Neural%20Network%20is%20to%20adjust%20these%20weights%20so%20that%20for%20each%20given%20input%20we%20get%20the%20desired%20output.%0A%0A%20%20%20%20A%20bias%20node%20always%20outputs%201.%20Its%20outgoing%20weights%2C%20called%20the%20**biases**%2C%20are%20learned%20just%20like%20any%20other%20weight.%20A%20bias%20lets%20a%20node%20shift%20its%20weighted%20sum%20up%20or%20down%2C%20whatever%20its%20inputs%20are.%20Without%20it%2C%20a%20node%20whose%20inputs%20are%20all%200%20would%20always%20have%20a%20weighted%20sum%20of%200%2C%20no%20matter%20what%20its%20weights%20are.%0A%0A%20%20%20%20We'll%20be%20using%20a%20single%20example%20for%20out%20training%20and%20we'll%20walk%20through%20exactly%20one%20training%20step%3A%0A%0A%20%20%20%20-%20Compute%20a%20prediction%0A%20%20%20%20-%20Measure%20the%20error%0A%20%20%20%20-%20Update%20all%20weights%0A%0A%20%20%20%20Finally%2C%20we'll%20check%20that%20the%20network%20prediction's%20have%20improved.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(inputs%2C%20network_svg%2C%20target%2C%20weights)%3A%0A%20%20%20%20_nodes%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%22A%22%3A%20(60%2C%2070%2C%20f%22%7Binputs%5B'A'%5D%3A.1f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22B%22%3A%20(60%2C%20190%2C%20f%22%7Binputs%5B'B'%5D%3A.1f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22C%20(bias)%22%3A%20(150%2C%20290%2C%20%221%22)%2C%0A%20%20%20%20%20%20%20%20%22D%22%3A%20(290%2C%2070%2C%20%22%22)%2C%0A%20%20%20%20%20%20%20%20%22E%22%3A%20(290%2C%20190%2C%20%22%22)%2C%0A%20%20%20%20%20%20%20%20%22F%20(bias)%22%3A%20(390%2C%20290%2C%20%221%22)%2C%0A%20%20%20%20%20%20%20%20%22G%22%3A%20(460%2C%20130%2C%20%22%22)%2C%0A%20%20%20%20%7D%0A%20%20%20%20_edges%20%3D%20%5B%0A%20%20%20%20%20%20%20%20(%22A%22%2C%20%22D%22%2C%20weights%5B%22AD%22%5D%2C%200.5%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22A%22%2C%20%22E%22%2C%20weights%5B%22AE%22%5D%2C%200.2%2C%20-1)%2C%0A%20%20%20%20%20%20%20%20(%22B%22%2C%20%22D%22%2C%20weights%5B%22BD%22%5D%2C%200.2%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22B%22%2C%20%22E%22%2C%20weights%5B%22BE%22%5D%2C%200.5%2C%20-1)%2C%0A%20%20%20%20%20%20%20%20(%22C%20(bias)%22%2C%20%22D%22%2C%20weights%5B%22CD%22%5D%2C%200.35%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22C%20(bias)%22%2C%20%22E%22%2C%20weights%5B%22CE%22%5D%2C%200.5%2C%20-1)%2C%0A%20%20%20%20%20%20%20%20(%22D%22%2C%20%22G%22%2C%20weights%5B%22DG%22%5D%2C%200.5%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22E%22%2C%20%22G%22%2C%20weights%5B%22EG%22%5D%2C%200.5%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22F%20(bias)%22%2C%20%22G%22%2C%20weights%5B%22FG%22%5D%2C%200.5%2C%20-1)%2C%0A%20%20%20%20%5D%0A%20%20%20%20network_svg(_nodes%2C%20_edges%2C%20target%3Dtarget)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20%23%23%20Forward%20Pass%0A%0A%20%20%20%20Before%20we%20can%20start%20adjusting%2C%20we%20need%20to%20know%20what's%20the%20current%20prediction%20of%20the%20network.%20We'll%20perform%20a%20**forward%20pass**.%0A%0A%20%20%20%20A%20network%20turns%20an%20input%20into%20a%20prediction%20by%20multiplying%20by%20weights%2C%20applying%20an%20activation%20function%2C%20and%20repeating%20layer%20by%20layer.%0A%0A%20%20%20%20%23%23%23%20Node's%20activation%0A%0A%20%20%20%20Each%20node%2C%20sometimes%20called%20a%20_unit_%2C%20has%20its%20own%20activation%20level.%20For%20any%20node%20in%20the%20hidden%20(and%20output)%20layer%2C%20this%20activation%20level%20(%24y%24)%20is%20given%20by%20the%20weighted%20sum%20of%20all%20connections%20going%20to%20this%20node%2C%20passed%20through%20an%20activation%20function.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20Formally%2C%20computing%20a%20node's%20activation%20takes%20two%20steps.%0A%0A%20%20%20%20**1.%20Weighted%20sum.**%20For%20node%20%24j%24%2C%20multiply%20the%20activation%20%24y_i%24%20of%20every%20node%20%24i%24%20connected%20to%20it%20by%20the%20weight%20%24w_%7Bij%7D%24%20of%20that%20connection%2C%20and%20add%20the%20results%3A%0A%0A%20%20%20%20%24%24%0A%20%20%20%20x_j%20%3D%20%5Csum_%7Bi%7D%20y_i%20%5C%2C%20w_%7Bij%7D%0A%20%20%20%20%24%24%0A%0A%20%20%20%20A%20bias%20node%20is%20treated%20like%20any%20other%20node%20whose%20activation%20is%20always%20%24y%20%3D%201%24%2C%20so%20its%20weight%20is%20simply%20added%20to%20the%20sum.%0A%0A%20%20%20%20**2.%20Activation%20level.**%20Pass%20the%20weighted%20sum%20through%20the%20activation%20function.%20Here%20we%20use%20the%20**sigmoid**%20%24%5Csigma%24%3A%0A%0A%20%20%20%20%24%24%0A%20%20%20%20y_j%20%3D%20%5Csigma(x_j)%20%3D%20%5Cfrac%7B1%7D%7B1%20%2B%20e%5E%7B-x_j%7D%7D%0A%20%20%20%20%24%24%0A%0A%20%20%20%20The%20sigmoid%20squashes%20any%20real%20number%20into%20the%20range%20%24(0%2C%201)%24%3A%20large%20positive%20sums%20give%20activations%20close%20to%201%2C%20large%20negative%20sums%20give%20activations%20close%20to%200.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20Let's%20take%20a%20look%20at%20node%20%24D%24%20in%20our%20network%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(inputs%2C%20network_svg%2C%20weights)%3A%0A%20%20%20%20%23%20Zoom%20in%20on%20hidden%20node%20D%3A%20only%20the%20three%20connections%20that%20feed%20into%20it.%0A%20%20%20%20_nodes%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%22A%22%3A%20(60%2C%2050%2C%20f%22%7Binputs%5B'A'%5D%3A.1f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22B%22%3A%20(60%2C%20150%2C%20f%22%7Binputs%5B'B'%5D%3A.1f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22C%20(bias)%22%3A%20(60%2C%20250%2C%20%221%22)%2C%0A%20%20%20%20%20%20%20%20%22D%22%3A%20(320%2C%20150%2C%20%22%3F%22)%2C%0A%20%20%20%20%7D%0A%20%20%20%20_edges%20%3D%20%5B%0A%20%20%20%20%20%20%20%20(%22A%22%2C%20%22D%22%2C%20weights%5B%22AD%22%5D%2C%200.5%2C%20-1)%2C%0A%20%20%20%20%20%20%20%20(%22B%22%2C%20%22D%22%2C%20weights%5B%22BD%22%5D%2C%200.5%2C%20-1)%2C%0A%20%20%20%20%20%20%20%20(%22C%20(bias)%22%2C%20%22D%22%2C%20weights%5B%22CD%22%5D%2C%200.5%2C%201)%2C%0A%20%20%20%20%5D%0A%20%20%20%20network_svg(_nodes%2C%20_edges%2C%20width%3D400%2C%20height%3D290)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(inputs%2C%20mo%2C%20np%2C%20weights)%3A%0A%20%20%20%20_x_D%20%3D%20(%0A%20%20%20%20%20%20%20%20inputs%5B%22A%22%5D%20*%20weights%5B%22AD%22%5D%0A%20%20%20%20%20%20%20%20%2B%20inputs%5B%22B%22%5D%20*%20weights%5B%22BD%22%5D%0A%20%20%20%20%20%20%20%20%2B%201.0%20*%20weights%5B%22CD%22%5D%0A%20%20%20%20)%0A%20%20%20%20_y_D%20%3D%201%20%2F%20(1%20%2B%20np.exp(-_x_D))%0A%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20r%22For%20node%20%24D%24%2C%20the%20weighted%20sum%20is%22%0A%20%20%20%20%20%20%20%20%22%5Cn%5Cn%24%24%5Cn%22%0A%20%20%20%20%20%20%20%20r%22%5Cbegin%7Baligned%7D%22%0A%20%20%20%20%20%20%20%20r%22x_D%20%26%3D%20y_A%20w_%7BAD%7D%20%2B%20y_B%20w_%7BBD%7D%20%2B%20y_C%20w_%7BCD%7D%20%5C%5C%22%0A%20%20%20%20%20%20%20%20f%22%26%3D%20%7Binputs%5B'A'%5D%3Ag%7D%20%5C%5Ccdot%20(%7Bweights%5B'AD'%5D%3Ag%7D)%20%22%0A%20%20%20%20%20%20%20%20f%22%2B%20%7Binputs%5B'B'%5D%3Ag%7D%20%5C%5Ccdot%20(%7Bweights%5B'BD'%5D%3Ag%7D)%20%22%0A%20%20%20%20%20%20%20%20f%22%2B%201%20%5C%5Ccdot%20(%7Bweights%5B'CD'%5D%3Ag%7D)%20%5C%5C%5C%5C%22%0A%20%20%20%20%20%20%20%20f%22%26%3D%20%7B_x_D%3A.4f%7D%22%0A%20%20%20%20%20%20%20%20r%22%5Cend%7Baligned%7D%22%0A%20%20%20%20%20%20%20%20%22%5Cn%24%24%5Cn%5Cn%22%0A%20%20%20%20%20%20%20%20%22and%20its%20activation%20level%20is%22%0A%20%20%20%20%20%20%20%20%22%5Cn%5Cn%24%24%5Cn%22%0A%20%20%20%20%20%20%20%20f%22y_D%20%3D%20%5C%5Csigma(%7B_x_D%3A.4f%7D)%20%3D%20%7B_y_D%3A.4f%7D%22%0A%20%20%20%20%20%20%20%20%22%5Cn%24%24%5Cn%5Cn%22%0A%20%20%20%20%20%20%20%20%22You%20can%20check%20this%20with%20the%20sigmoid%20calculator%20in%20the%20top-right%20corner.%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20Your%20turn.%20These%20are%20the%20connections%20that%20feed%20into%20node%20%24E%24%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(inputs%2C%20network_svg%2C%20weights)%3A%0A%20%20%20%20%23%20Zoom%20in%20on%20hidden%20node%20E%3A%20only%20the%20three%20connections%20that%20feed%20into%20it.%0A%20%20%20%20_nodes%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%22A%22%3A%20(60%2C%2050%2C%20f%22%7Binputs%5B'A'%5D%3A.1f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22B%22%3A%20(60%2C%20150%2C%20f%22%7Binputs%5B'B'%5D%3A.1f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22C%20(bias)%22%3A%20(60%2C%20250%2C%20%221%22)%2C%0A%20%20%20%20%20%20%20%20%22E%22%3A%20(320%2C%20150%2C%20%22%3F%22)%2C%0A%20%20%20%20%7D%0A%20%20%20%20_edges%20%3D%20%5B%0A%20%20%20%20%20%20%20%20(%22A%22%2C%20%22E%22%2C%20weights%5B%22AE%22%5D%2C%200.5%2C%20-1)%2C%0A%20%20%20%20%20%20%20%20(%22B%22%2C%20%22E%22%2C%20weights%5B%22BE%22%5D%2C%200.5%2C%20-1)%2C%0A%20%20%20%20%20%20%20%20(%22C%20(bias)%22%2C%20%22E%22%2C%20weights%5B%22CE%22%5D%2C%200.5%2C%201)%2C%0A%20%20%20%20%5D%0A%20%20%20%20network_svg(_nodes%2C%20_edges%2C%20width%3D400%2C%20height%3D290)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20%23%20Quiz%3A%20the%20activation%20of%20node%20E%20(value%20updates%20on%20%22Check%22).%0A%20%20%20%20answer_form%20%3D%20(%0A%20%20%20%20%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20%20%20%20%20r%22%22%22%0A%20%20%20%20**Quick%20check%3A%20what%20is%20the%20activation%20level%20of%20node%20%24E%24%3F%20Round%20to%20at%20least%203%20decimal%20places.**%0A%0A%20%20%20%20%24y_E%20%3D%24%20%7By_E%7D%0A%20%20%20%20%22%22%22%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20.batch(y_E%3Dmo.ui.text(placeholder%3D%22e.g.%200.42%22))%0A%20%20%20%20%20%20%20%20.form(submit_button_label%3D%22Check%22%2C%20bordered%3DFalse)%0A%20%20%20%20)%0A%20%20%20%20answer_form%0A%20%20%20%20return%20(answer_form%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(answer_form%2C%20inputs%2C%20mo%2C%20np%2C%20weights)%3A%0A%20%20%20%20%23%20Recompute%20node%20E%20from%20the%20actual%20network%2C%20so%20the%20check%20follows%20the%20weights.%0A%20%20%20%20_x_E%20%3D%20(%0A%20%20%20%20%20%20%20%20inputs%5B%22A%22%5D%20*%20weights%5B%22AE%22%5D%0A%20%20%20%20%20%20%20%20%2B%20inputs%5B%22B%22%5D%20*%20weights%5B%22BE%22%5D%0A%20%20%20%20%20%20%20%20%2B%201.0%20*%20weights%5B%22CE%22%5D%0A%20%20%20%20)%0A%20%20%20%20_y_E%20%3D%201%20%2F%20(1%20%2B%20np.exp(-_x_E))%0A%20%20%20%20_tol%20%3D%200.005%20%20%23%20accept%20answers%20rounded%20to%202%20decimal%20places%0A%0A%20%20%20%20_raw%20%3D%20answer_form.value%5B%22y_E%22%5D%20if%20answer_form.value%20else%20None%0A%20%20%20%20if%20_raw%20is%20None%3A%0A%20%20%20%20%20%20%20%20_feedback%20%3D%20None%0A%20%20%20%20else%3A%0A%20%20%20%20%20%20%20%20try%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20_guess%20%3D%20float(_raw.strip().replace(%22%2C%22%2C%20%22.%22))%0A%20%20%20%20%20%20%20%20except%20ValueError%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20_guess%20%3D%20None%0A%0A%20%20%20%20%20%20%20%20if%20_guess%20is%20None%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20_feedback%20%3D%20mo.callout(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20mo.md(f%22%60%7B_raw%7D%60%20isn't%20a%20number.%20Try%20again.%22)%2C%20kind%3D%22warn%22%0A%20%20%20%20%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20elif%20abs(_guess%20-%20_y_E)%20%3C%3D%20_tol%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20_feedback%20%3D%20mo.callout(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f%22**Correct!**%20%24x_E%20%3D%20%7B_x_E%3A.4f%7D%24%2C%20so%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f%22%24y_E%20%3D%20%5C%5Csigma(%7B_x_E%3A.4f%7D)%20%3D%20%7B_y_E%3A.4f%7D%24.%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20kind%3D%22success%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20elif%20abs(_guess%20-%20_x_E)%20%3C%3D%20_tol%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20_feedback%20%3D%20mo.callout(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22That's%20the%20**weighted%20sum**%20%24x_E%24.%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22Don't%20forget%20to%20pass%20it%20through%20the%20sigmoid.%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20kind%3D%22warn%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20else%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20_feedback%20%3D%20mo.callout(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22Not%20quite.%20Compute%20the%20weighted%20sum%20%24x_E%24%20first%2C%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22then%20apply%20%24%5C%5Csigma%24%20to%20it.%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20kind%3D%22danger%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20)%0A%0A%20%20%20%20_feedback%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20Now%20we%20have%20the%20activation%20levels%20of%20both%20hidden%20nodes.%20Finally%2C%20we%20do%20the%20same%20for%20the%20output%20node.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell%0Adef%20_(inputs%2C%20np%2C%20weights)%3A%0A%20%20%20%20def%20sigmoid(x)%3A%0A%20%20%20%20%20%20%20%20return%201%20%2F%20(1%20%2B%20np.exp(-x))%0A%0A%0A%20%20%20%20def%20forward(w%2C%20inputs)%3A%0A%20%20%20%20%20%20%20%20%22%22%22Forward%20pass%20through%20the%20whole%20network.%20Bias%20nodes%20C%20and%20F%20are%20always%201.%22%22%22%0A%20%20%20%20%20%20%20%20y%20%3D%20%7B%22A%22%3A%20inputs%5B%22A%22%5D%2C%20%22B%22%3A%20inputs%5B%22B%22%5D%2C%20%22C%22%3A%201.0%2C%20%22F%22%3A%201.0%7D%0A%20%20%20%20%20%20%20%20y%5B%22D%22%5D%20%3D%20sigmoid(y%5B%22A%22%5D%20*%20w%5B%22AD%22%5D%20%2B%20y%5B%22B%22%5D%20*%20w%5B%22BD%22%5D%20%2B%20y%5B%22C%22%5D%20*%20w%5B%22CD%22%5D)%0A%20%20%20%20%20%20%20%20y%5B%22E%22%5D%20%3D%20sigmoid(y%5B%22A%22%5D%20*%20w%5B%22AE%22%5D%20%2B%20y%5B%22B%22%5D%20*%20w%5B%22BE%22%5D%20%2B%20y%5B%22C%22%5D%20*%20w%5B%22CE%22%5D)%0A%20%20%20%20%20%20%20%20y%5B%22G%22%5D%20%3D%20sigmoid(y%5B%22D%22%5D%20*%20w%5B%22DG%22%5D%20%2B%20y%5B%22E%22%5D%20*%20w%5B%22EG%22%5D%20%2B%20y%5B%22F%22%5D%20*%20w%5B%22FG%22%5D)%0A%20%20%20%20%20%20%20%20return%20y%0A%0A%0A%20%20%20%20activations%20%3D%20forward(weights%2C%20inputs)%0A%20%20%20%20return%20activations%2C%20forward%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(activations%2C%20network_svg%2C%20target%2C%20weights)%3A%0A%20%20%20%20%23%20Same%20layout%20as%20the%20setup%20diagram%2C%20now%20with%20every%20activation%20filled%20in.%0A%20%20%20%20_nodes%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%22A%22%3A%20(60%2C%2070%2C%20f%22%7Bactivations%5B'A'%5D%3A.1f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22B%22%3A%20(60%2C%20190%2C%20f%22%7Bactivations%5B'B'%5D%3A.1f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22C%20(bias)%22%3A%20(150%2C%20290%2C%20%221%22)%2C%0A%20%20%20%20%20%20%20%20%22D%22%3A%20(290%2C%2070%2C%20f%22%7Bactivations%5B'D'%5D%3A.3f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22E%22%3A%20(290%2C%20190%2C%20f%22%7Bactivations%5B'E'%5D%3A.3f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22F%20(bias)%22%3A%20(390%2C%20290%2C%20%221%22)%2C%0A%20%20%20%20%20%20%20%20%22G%22%3A%20(460%2C%20130%2C%20f%22%7Bactivations%5B'G'%5D%3A.3f%7D%22)%2C%0A%20%20%20%20%7D%0A%20%20%20%20_edges%20%3D%20%5B%0A%20%20%20%20%20%20%20%20(%22A%22%2C%20%22D%22%2C%20weights%5B%22AD%22%5D%2C%200.5%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22A%22%2C%20%22E%22%2C%20weights%5B%22AE%22%5D%2C%200.2%2C%20-1)%2C%0A%20%20%20%20%20%20%20%20(%22B%22%2C%20%22D%22%2C%20weights%5B%22BD%22%5D%2C%200.2%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22B%22%2C%20%22E%22%2C%20weights%5B%22BE%22%5D%2C%200.5%2C%20-1)%2C%0A%20%20%20%20%20%20%20%20(%22C%20(bias)%22%2C%20%22D%22%2C%20weights%5B%22CD%22%5D%2C%200.35%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22C%20(bias)%22%2C%20%22E%22%2C%20weights%5B%22CE%22%5D%2C%200.5%2C%20-1)%2C%0A%20%20%20%20%20%20%20%20(%22D%22%2C%20%22G%22%2C%20weights%5B%22DG%22%5D%2C%200.5%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22E%22%2C%20%22G%22%2C%20weights%5B%22EG%22%5D%2C%200.5%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22F%20(bias)%22%2C%20%22G%22%2C%20weights%5B%22FG%22%5D%2C%200.5%2C%20-1)%2C%0A%20%20%20%20%5D%0A%20%20%20%20network_svg(_nodes%2C%20_edges%2C%20target%3Dtarget)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(activations%2C%20mo%2C%20target)%3A%0A%20%20%20%20mo.md(rf%22%22%22%0A%20%20%20%20%23%23%20Squared%20Error%20Loss%0A%0A%20%20%20%20The%20prediction%20of%20our%20network%20is%20%24%7Bactivations%5B%22G%22%5D%3A.3f%7D%24.%20The%20actual%20value%20(_target_)%20is%20%24%7Btarget%3Ag%7D%24.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20%23%20Quiz%3A%20is%20the%20prediction%20too%20high%20or%20too%20low%3F%20(value%20updates%20on%20%22Check%22)%0A%20%20%20%20over_under_quiz%20%3D%20mo.ui.radio(%0A%20%20%20%20%20%20%20%20options%3D%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22Overestimating%20(the%20prediction%20is%20too%20high)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22Underestimating%20(the%20prediction%20is%20too%20low)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22Neither%20(the%20prediction%20is%20spot%20on)%22%2C%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20label%3D%22**Quick%20check%3A**%20is%20the%20network%20overestimating%20or%20underestimating%20the%20target%3F%22%2C%0A%20%20%20%20).form(submit_button_label%3D%22Check%22%2C%20bordered%3DFalse)%0A%20%20%20%20over_under_quiz%0A%20%20%20%20return%20(over_under_quiz%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(activations%2C%20mo%2C%20over_under_quiz%2C%20target)%3A%0A%20%20%20%20_y%2C%20_t%20%3D%20activations%5B%22G%22%5D%2C%20target%0A%20%20%20%20_correct%20%3D%20%22Over%22%20if%20_y%20%3E%20_t%20else%20(%22Under%22%20if%20_y%20%3C%20_t%20else%20%22Neither%22)%0A%20%20%20%20_push%20%3D%20%22down%22%20if%20_y%20%3E%20_t%20else%20%22up%22%0A%20%20%20%20_answer%20%3D%20over_under_quiz.value%0A%0A%20%20%20%20if%20_answer%20is%20None%3A%0A%20%20%20%20%20%20%20%20_feedback%20%3D%20None%0A%20%20%20%20elif%20_answer.startswith(_correct)%3A%0A%20%20%20%20%20%20%20%20_feedback%20%3D%20mo.callout(%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f%22**Correct!**%20The%20prediction%20%24y_G%20%3D%20%7B_y%3A.3f%7D%24%20is%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f%22%7B'above'%20if%20_y%20%3E%20_t%20else%20'below'%7D%20the%20target%20%24t%20%3D%20%7B_t%3Ag%7D%24%2C%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f%22so%20training%20should%20push%20%24y_G%24%20**%7B_push%7D**.%20Keep%20this%20in%20mind%3A%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22the%20direction%20of%20the%20error%20will%20decide%20which%20way%20every%20weight%20moves.%22%0A%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20kind%3D%22success%22%2C%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20elif%20_answer.startswith(%22Neither%22)%3A%0A%20%20%20%20%20%20%20%20_feedback%20%3D%20mo.callout(%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f%22Not%20quite.%20The%20prediction%20%24%7B_y%3A.3f%7D%24%20and%20the%20target%20%24%7B_t%3Ag%7D%24%20are%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f%22%7Babs(_t%20-%20_y)%3A.3f%7D%20apart%2C%20so%20there's%20still%20an%20error%20to%20fix.%22%0A%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20kind%3D%22danger%22%2C%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20else%3A%0A%20%20%20%20%20%20%20%20_feedback%20%3D%20mo.callout(%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f%22Not%20quite.%20Compare%20the%20two%20numbers%3A%20the%20prediction%20%24%7B_y%3A.3f%7D%24%20is%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f%22**%7B'larger'%20if%20_y%20%3E%20_t%20else%20'smaller'%7D**%20than%20the%20target%20%24%7B_t%3Ag%7D%24.%22%0A%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20kind%3D%22danger%22%2C%0A%20%20%20%20%20%20%20%20)%0A%0A%20%20%20%20_feedback%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20To%20measure%20the%20error%20we%20use%20**squared%20error%20loss**.%20It%20measures%20how%20far%20the%20neural%20network's%20prediction%20is%20from%20the%20desired%20output.%0A%0A%20%20%20%20%24%24%0A%20%20%20%20L%3D(t-y)%5E2%0A%20%20%20%20%24%24%0A%0A%20%20%20%20Here%3A%0A%0A%20%20%20%20-%20%24t%24%20%3D%20target%20(correct)%20output%0A%20%20%20%20-%20%24y%24%20%3D%20predicted%20output%0A%20%20%20%20-%20%24t-y%24%20%3D%20prediction%20error%0A%0A%20%20%20%20By%20squaring%20the%20prediction%20error%20we%20achieve%20two%20things%3A%0A%0A%20%20%20%20-%20It%20makes%20the%20error%20positive%20(no%20matter%20whether%20the%20network%20overestimates%20or%20underestimates)%0A%20%20%20%20-%20It%20penalises%20larger%20errors%20more%20heavily%0A%0A%20%20%20%20For%20mathematical%20convenience%2C%20we%20also%20multiply%20the%20entire%20expression%20by%20%24%5Cfrac%7B1%7D%7B2%7D%24%20(you'll%20see%20why%20in%20a%20moment)%3A%0A%0A%20%20%20%20%24%24%0A%20%20%20%20L%3D%5Cfrac%7B1%7D%7B2%7D(t-y)%5E2%0A%20%20%20%20%24%24%0A%0A%20%20%20%20We%20call%20this%20the%20**loss**%20%24L%24.%20In%20our%20case%2C%20%24y%24%20is%20the%20output%20node's%20activation%20%24y_G%24.%0A%0A%20%20%20%20%23%23%23%20Error%20as%20a%20function%20of%20weights%0A%0A%20%20%20%20We%20can%20view%20training%20as%20an%20_optimisation%20problem_.%20The%20goal%20is%20to%20find%20weights%20that%20make%20the%20error%20small.%0A%0A%20%20%20%20You%20can%20play%20around%20with%20the%20weights%20(which%20are%20still%20random)%20and%20see%20how%20the%20error%20changes.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo%2C%20weights)%3A%0A%20%20%20%20%23%20One%20slider%20per%20weight%2C%20starting%20at%20the%20network's%20random%20initial%20weights.%0A%20%20%20%20weight_sliders%20%3D%20mo.ui.dictionary(%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20_k%3A%20mo.ui.slider(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20-3.0%2C%203.0%2C%20step%3D0.01%2C%20value%3Dfloat(_w)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3Df%22%24w_%7B%7B%7B_k%7D%7D%7D%24%22%2C%20show_value%3DTrue%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20%20%20%20%20for%20_k%2C%20_w%20in%20weights.items()%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20)%0A%20%20%20%20return%20(weight_sliders%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(activations%2C%20forward%2C%20inputs%2C%20mo%2C%20network_svg%2C%20target%2C%20weight_sliders)%3A%0A%20%20%20%20_w%20%3D%20weight_sliders.value%0A%0A%20%20%20%20%23%20Forward%20pass%20with%20the%20slider%20weights.%0A%20%20%20%20_y%20%3D%20forward(_w%2C%20inputs)%0A%20%20%20%20_y_A%2C%20_y_B%2C%20_y_D%2C%20_y_E%2C%20_y_G%20%3D%20(_y%5B_k%5D%20for%20_k%20in%20%22ABDEG%22)%0A%0A%20%20%20%20_error%20%3D%200.5%20*%20(target%20-%20_y_G)%20**%202%0A%20%20%20%20_initial_error%20%3D%200.5%20*%20(target%20-%20activations%5B%22G%22%5D)%20**%202%0A%0A%20%20%20%20_nodes%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%22A%22%3A%20(60%2C%2070%2C%20f%22%7B_y_A%3A.1f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22B%22%3A%20(60%2C%20190%2C%20f%22%7B_y_B%3A.1f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22C%20(bias)%22%3A%20(150%2C%20290%2C%20%221%22)%2C%0A%20%20%20%20%20%20%20%20%22D%22%3A%20(290%2C%2070%2C%20f%22%7B_y_D%3A.3f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22E%22%3A%20(290%2C%20190%2C%20f%22%7B_y_E%3A.3f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22F%20(bias)%22%3A%20(390%2C%20290%2C%20%221%22)%2C%0A%20%20%20%20%20%20%20%20%22G%22%3A%20(460%2C%20130%2C%20f%22%7B_y_G%3A.3f%7D%22)%2C%0A%20%20%20%20%7D%0A%20%20%20%20_edges%20%3D%20%5B%0A%20%20%20%20%20%20%20%20(%22A%22%2C%20%22D%22%2C%20_w%5B%22AD%22%5D%2C%200.5%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22A%22%2C%20%22E%22%2C%20_w%5B%22AE%22%5D%2C%200.2%2C%20-1)%2C%0A%20%20%20%20%20%20%20%20(%22B%22%2C%20%22D%22%2C%20_w%5B%22BD%22%5D%2C%200.2%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22B%22%2C%20%22E%22%2C%20_w%5B%22BE%22%5D%2C%200.5%2C%20-1)%2C%0A%20%20%20%20%20%20%20%20(%22C%20(bias)%22%2C%20%22D%22%2C%20_w%5B%22CD%22%5D%2C%200.35%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22C%20(bias)%22%2C%20%22E%22%2C%20_w%5B%22CE%22%5D%2C%200.5%2C%20-1)%2C%0A%20%20%20%20%20%20%20%20(%22D%22%2C%20%22G%22%2C%20_w%5B%22DG%22%5D%2C%200.5%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22E%22%2C%20%22G%22%2C%20_w%5B%22EG%22%5D%2C%200.5%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22F%20(bias)%22%2C%20%22G%22%2C%20_w%5B%22FG%22%5D%2C%200.5%2C%20-1)%2C%0A%20%20%20%20%5D%0A%0A%20%20%20%20%23%20Sliders%20grouped%20by%20the%20node%20they%20feed%20into.%0A%20%20%20%20_groups%20%3D%20%7B%22Into%20D%22%3A%20%5B%22AD%22%2C%20%22BD%22%2C%20%22CD%22%5D%2C%20%22Into%20E%22%3A%20%5B%22AE%22%2C%20%22BE%22%2C%20%22CE%22%5D%2C%20%22Into%20G%22%3A%20%5B%22DG%22%2C%20%22EG%22%2C%20%22FG%22%5D%7D%0A%20%20%20%20_slider_grid%20%3D%20mo.hstack(%0A%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.vstack(%5Bmo.md(f%22**%7B_title%7D**%22)%5D%20%2B%20%5Bweight_sliders%5B_k%5D%20for%20_k%20in%20_keys%5D)%0A%20%20%20%20%20%20%20%20%20%20%20%20for%20_title%2C%20_keys%20in%20_groups.items()%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20justify%3D%22space-between%22%2C%0A%20%20%20%20%20%20%20%20widths%3D%22equal%22%2C%0A%20%20%20%20)%0A%0A%20%20%20%20_stats%20%3D%20mo.hstack(%0A%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.stat(f%22%7B_y_G%3A.4f%7D%22%2C%20label%3D%22Prediction%20y%22%2C%20caption%3Df%22target%20t%20%3D%20%7Btarget%3Ag%7D%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.stat(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f%22%7B_error%3A.4f%7D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%22Loss%20L%20%3D%20%C2%BD(t%20%E2%88%92%20y)%C2%B2%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20caption%3Df%22random%20weights%3A%20%7B_initial_error%3A.4f%7D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20direction%3D%22decrease%22%20if%20_error%20%3C%20_initial_error%20else%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22increase%22%20if%20_error%20%3E%20_initial_error%20else%20None%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20target_direction%3D%22decrease%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20justify%3D%22start%22%2C%0A%20%20%20%20%20%20%20%20gap%3D2%2C%0A%20%20%20%20)%0A%0A%20%20%20%20mo.vstack(%5B_slider_grid%2C%20network_svg(_nodes%2C%20_edges%2C%20target%3Dtarget)%2C%20_stats%5D%2C%20gap%3D1.5)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20%23%23%20Which%20Way%20Should%20Each%20Weight%20Move%3F%0A%0A%20%20%20%20Moving%20sliders%20by%20hand%20doesn't%20scale.%20A%20real%20network%20has%20millions%20of%20weights.%20Training%20needs%20an%20automatic%20way%20to%20answer%20one%20question%20for%20every%20weight%3A%0A%0A%20%20%20%20%3E%20_If%20I%20increase%20this%20weight%20a%20tiny%20bit%2C%20does%20the%20loss%20go%20up%20or%20down%2C%20and%20how%20fast%3F_%0A%0A%20%20%20%20That%20answer%20is%20the%20**gradient**%20%24%5Cfrac%7B%5Cpartial%20L%7D%7B%5Cpartial%20w%7D%24%3A%20the%20slope%20of%20the%20loss%20when%20we%20change%20just%20that%20one%20weight%20and%20keep%20all%20the%20others%20fixed.%0A%0A%20%20%20%20-%20Slope%20**positive**%3A%20increasing%20%24w%24%20increases%20the%20loss%2C%20so%20we%20should%20**decrease**%20%24w%24.%0A%20%20%20%20-%20Slope%20**negative**%3A%20increasing%20%24w%24%20decreases%20the%20loss%2C%20so%20we%20should%20**increase**%20%24w%24.%0A%20%20%20%20-%20The%20**steeper**%20the%20slope%2C%20the%20more%20that%20weight%20matters%20right%20now%2C%20and%20the%20bigger%20the%20step.%0A%0A%20%20%20%20**Click%20any%20connection**%20in%20the%20network%20to%20pick%20a%20weight.%20The%20curve%20next%20to%20it%20shows%20the%20loss%20as%20that%20one%20weight%20changes%2C%20with%20all%20other%20weights%20kept%20at%20their%20random%20starting%20values.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(anywidget%2C%20traitlets)%3A%0A%20%20%20%20class%20NetworkPicker(anywidget.AnyWidget)%3A%0A%20%20%20%20%20%20%20%20%22%22%22Shows%20a%20network%20SVG%20and%20lets%20the%20reader%20click%20a%20connection%20to%20select%0A%20%20%20%20%20%20%20%20it.%20%60selected%60%20holds%20the%20edge%20key%2C%20e.g.%20%22DG%22.%22%22%22%0A%0A%20%20%20%20%20%20%20%20svg%20%3D%20traitlets.Unicode(%22%22).tag(sync%3DTrue)%0A%20%20%20%20%20%20%20%20selected%20%3D%20traitlets.Unicode(%22%22).tag(sync%3DTrue)%0A%0A%20%20%20%20%20%20%20%20_esm%20%3D%20%22%22%22%0A%20%20%20%20%20%20%20%20function%20render(%7B%20model%2C%20el%20%7D)%20%7B%0A%20%20%20%20%20%20%20%20%20%20const%20root%20%3D%20document.createElement(%22div%22)%3B%0A%20%20%20%20%20%20%20%20%20%20root.className%20%3D%20%22np%22%3B%0A%20%20%20%20%20%20%20%20%20%20el.appendChild(root)%3B%0A%0A%20%20%20%20%20%20%20%20%20%20function%20apply()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20sel%20%3D%20model.get(%22selected%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20root.classList.toggle(%22has-sel%22%2C%20!!sel)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20root.querySelectorAll(%22%5Bdata-edge%5D%22).forEach((g)%20%3D%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20g.classList.toggle(%22sel%22%2C%20g.dataset.edge%20%3D%3D%3D%20sel)%0A%20%20%20%20%20%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20function%20pick(key)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20model.set(%22selected%22%2C%20key)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20model.save_changes()%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20apply()%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20function%20draw()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20root.innerHTML%20%3D%20model.get(%22svg%22)%20%2B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20'%3Cdiv%20class%3D%22np-hint%22%3EClick%20a%20connection%20to%20pick%20its%20weight%3C%2Fdiv%3E'%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20root.querySelectorAll(%22%5Bdata-edge%5D%22).forEach((g)%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20const%20key%20%3D%20g.dataset.edge%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20g.setAttribute(%22tabindex%22%2C%20%220%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20g.setAttribute(%22role%22%2C%20%22button%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20g.setAttribute(%22aria-label%22%2C%20%22weight%20w_%22%20%2B%20key)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20g.addEventListener(%22click%22%2C%20()%20%3D%3E%20pick(key))%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20g.addEventListener(%22keydown%22%2C%20(e)%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(e.key%20%3D%3D%3D%20%22Enter%22%20%7C%7C%20e.key%20%3D%3D%3D%20%22%20%22)%20%7B%20e.preventDefault()%3B%20pick(key)%3B%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20apply()%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20model.on(%22change%3Asvg%22%2C%20draw)%3B%0A%20%20%20%20%20%20%20%20%20%20model.on(%22change%3Aselected%22%2C%20apply)%3B%0A%20%20%20%20%20%20%20%20%20%20draw()%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20export%20default%20%7B%20render%20%7D%3B%0A%20%20%20%20%20%20%20%20%22%22%22%0A%0A%20%20%20%20%20%20%20%20_css%20%3D%20%22%22%22%0A%20%20%20%20%20%20%20%20.np%20%5Bdata-edge%5D%20%7B%20cursor%3A%20pointer%3B%20outline%3A%20none%3B%20transition%3A%20opacity%200.15s%3B%20%7D%0A%20%20%20%20%20%20%20%20.np.has-sel%20%5Bdata-edge%5D%3Anot(.sel)%20%7B%20opacity%3A%200.25%3B%20%7D%0A%20%20%20%20%20%20%20%20.np.has-sel%20%5Bdata-edge%5D%3Anot(.sel)%3Ahover%20%7B%20opacity%3A%200.7%3B%20%7D%0A%20%20%20%20%20%20%20%20.np%20%5Bdata-edge%5D.sel%20.edge%20%7B%20stroke%3A%20%23f97316%3B%20stroke-opacity%3A%201%3B%20%7D%0A%20%20%20%20%20%20%20%20.np%20%5Bdata-edge%5D.sel%20text%20%7B%20fill%3A%20%23f97316%3B%20font-weight%3A%20700%3B%20%7D%0A%20%20%20%20%20%20%20%20.np%20%5Bdata-edge%5D%3Afocus-visible%20.hit%20%7B%20stroke%3A%20rgba(249%2C%20115%2C%2022%2C%200.25)%3B%20%7D%0A%20%20%20%20%20%20%20%20.np-hint%20%7B%20font-size%3A%2012px%3B%20opacity%3A%200.6%3B%20text-align%3A%20center%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-family%3A%20system-ui%2C%20sans-serif%3B%20margin-top%3A%204px%3B%20%7D%0A%20%20%20%20%20%20%20%20%22%22%22%0A%0A%20%20%20%20return%20(NetworkPicker%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(NetworkPicker%2C%20activations%2C%20mo%2C%20network_svg%2C%20target%2C%20weights)%3A%0A%20%20%20%20_nodes%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%22A%22%3A%20(60%2C%2070%2C%20f%22%7Bactivations%5B'A'%5D%3A.1f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22B%22%3A%20(60%2C%20190%2C%20f%22%7Bactivations%5B'B'%5D%3A.1f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22C%20(bias)%22%3A%20(150%2C%20290%2C%20%221%22)%2C%0A%20%20%20%20%20%20%20%20%22D%22%3A%20(290%2C%2070%2C%20f%22%7Bactivations%5B'D'%5D%3A.3f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22E%22%3A%20(290%2C%20190%2C%20f%22%7Bactivations%5B'E'%5D%3A.3f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22F%20(bias)%22%3A%20(390%2C%20290%2C%20%221%22)%2C%0A%20%20%20%20%20%20%20%20%22G%22%3A%20(460%2C%20130%2C%20f%22%7Bactivations%5B'G'%5D%3A.3f%7D%22)%2C%0A%20%20%20%20%7D%0A%20%20%20%20_edges%20%3D%20%5B%0A%20%20%20%20%20%20%20%20(%22A%22%2C%20%22D%22%2C%20weights%5B%22AD%22%5D%2C%200.5%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22A%22%2C%20%22E%22%2C%20weights%5B%22AE%22%5D%2C%200.2%2C%20-1)%2C%0A%20%20%20%20%20%20%20%20(%22B%22%2C%20%22D%22%2C%20weights%5B%22BD%22%5D%2C%200.2%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22B%22%2C%20%22E%22%2C%20weights%5B%22BE%22%5D%2C%200.5%2C%20-1)%2C%0A%20%20%20%20%20%20%20%20(%22C%20(bias)%22%2C%20%22D%22%2C%20weights%5B%22CD%22%5D%2C%200.35%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22C%20(bias)%22%2C%20%22E%22%2C%20weights%5B%22CE%22%5D%2C%200.5%2C%20-1)%2C%0A%20%20%20%20%20%20%20%20(%22D%22%2C%20%22G%22%2C%20weights%5B%22DG%22%5D%2C%200.5%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22E%22%2C%20%22G%22%2C%20weights%5B%22EG%22%5D%2C%200.5%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22F%20(bias)%22%2C%20%22G%22%2C%20weights%5B%22FG%22%5D%2C%200.5%2C%20-1)%2C%0A%20%20%20%20%5D%0A%20%20%20%20weight_picker%20%3D%20mo.ui.anywidget(%0A%20%20%20%20%20%20%20%20NetworkPicker(%0A%20%20%20%20%20%20%20%20%20%20%20%20svg%3Dnetwork_svg(_nodes%2C%20_edges%2C%20target%3Dtarget%2C%20clickable%3DTrue).text%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20selected%3D%22DG%22%2C%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20)%0A%20%20%20%20return%20(weight_picker%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(forward%2C%20inputs%2C%20mo%2C%20np%2C%20target%2C%20weight_picker%2C%20weights)%3A%0A%20%20%20%20_k%20%3D%20weight_picker.value%5B%22selected%22%5D%20or%20%22DG%22%0A%0A%0A%20%20%20%20def%20_loss(w_k)%3A%0A%20%20%20%20%20%20%20%20_y%20%3D%20forward(%7B**weights%2C%20_k%3A%20w_k%7D%2C%20inputs)%0A%20%20%20%20%20%20%20%20return%200.5%20*%20(target%20-%20_y%5B%22G%22%5D)%20**%202%0A%0A%0A%20%20%20%20_ws%20%3D%20np.linspace(-3%2C%203%2C%20241)%0A%20%20%20%20_Ls%20%3D%20np.array(%5B_loss(_v)%20for%20_v%20in%20_ws%5D)%0A%20%20%20%20_w0%20%3D%20float(weights%5B_k%5D)%0A%20%20%20%20_L0%20%3D%20_loss(_w0)%0A%20%20%20%20_h%20%3D%201e-5%0A%20%20%20%20_slope%20%3D%20(_loss(_w0%20%2B%20_h)%20-%20_loss(_w0%20-%20_h))%20%2F%20(2%20*%20_h)%0A%0A%20%20%20%20%23%20---%20hand-drawn%20SVG%20plot%20(no%20plotting%20library%20needed)%20-------------------%0A%20%20%20%20%23%20Text%20never%20sits%20inside%20the%20plot%20area%3A%20the%20legend%20goes%20above%20it%20and%20the%0A%20%20%20%20%23%20%22lower%20loss%22%20arrow%20goes%20in%20its%20own%20strip%20below%20the%20x-axis%20tick%20labels.%0A%20%20%20%20_W%2C%20_H%20%3D%20520%2C%20360%0A%20%20%20%20_ml%2C%20_mr%2C%20_mt%2C%20_mb%20%3D%2060%2C%2016%2C%2040%2C%2078%0A%20%20%20%20_Lmax%20%3D%20max(float(_Ls.max())%20*%201.1%2C%201e-3)%0A%20%20%20%20_ORANGE%2C%20_BLUE%2C%20_GREEN%20%3D%20%22%23f97316%22%2C%20%22%232563eb%22%2C%20%22%2316a34a%22%0A%20%20%20%20_w_sym%20%3D%20(%0A%20%20%20%20%20%20%20%20'%3Ctspan%20font-style%3D%22italic%22%3Ew%3C%2Ftspan%3E'%0A%20%20%20%20%20%20%20%20f'%3Ctspan%20baseline-shift%3D%22sub%22%20font-size%3D%220.75em%22%3E%7B_k%7D%3C%2Ftspan%3E'%0A%20%20%20%20)%0A%0A%20%20%20%20def%20_px(w)%3A%0A%20%20%20%20%20%20%20%20return%20_ml%20%2B%20(w%20%2B%203)%20%2F%206%20*%20(_W%20-%20_ml%20-%20_mr)%0A%0A%20%20%20%20def%20_py(L)%3A%0A%20%20%20%20%20%20%20%20return%20_H%20-%20_mb%20-%20L%20%2F%20_Lmax%20*%20(_H%20-%20_mt%20-%20_mb)%0A%0A%20%20%20%20_parts%20%3D%20%5B%0A%20%20%20%20%20%20%20%20f'%3Csvg%20viewBox%3D%220%200%20%7B_W%7D%20%7B_H%7D%22%20width%3D%22100%25%22%20style%3D%22max-width%3A%7B_W%7Dpx%3B'%0A%20%20%20%20%20%20%20%20'font-family%3Asystem-ui%2Csans-serif%3Bcolor%3Ainherit%22%3E'%2C%0A%20%20%20%20%20%20%20%20'%3Cdefs%3E%3Cmarker%20id%3D%22curve-arrow%22%20viewBox%3D%220%200%2010%2010%22%20refX%3D%228%22%20refY%3D%225%22%20'%0A%20%20%20%20%20%20%20%20'markerUnits%3D%22userSpaceOnUse%22%20markerWidth%3D%2211%22%20markerHeight%3D%2211%22%20'%0A%20%20%20%20%20%20%20%20f'orient%3D%22auto-start-reverse%22%3E%3Cpath%20d%3D%22M0%2C0%20L10%2C5%20L0%2C10%20z%22%20fill%3D%22%7B_GREEN%7D%22%2F%3E%3C%2Fmarker%3E%3C%2Fdefs%3E'%2C%0A%20%20%20%20%5D%0A%20%20%20%20%23%20legend%20(above%20the%20plot%20area)%0A%20%20%20%20_parts.append(%0A%20%20%20%20%20%20%20%20f'%3Ccircle%20cx%3D%22%7B_ml%20%2B%206%7D%22%20cy%3D%2216%22%20r%3D%225%22%20fill%3D%22%7B_ORANGE%7D%22%2F%3E'%0A%20%20%20%20%20%20%20%20f'%3Ctext%20x%3D%22%7B_ml%20%2B%2016%7D%22%20y%3D%2220%22%20font-size%3D%2213%22%20fill%3D%22currentColor%22%3Ecurrent%20%7B_w_sym%7D%20%3D%20%7B_w0%3Ag%7D%3C%2Ftext%3E'%0A%20%20%20%20%20%20%20%20f'%3Cline%20x1%3D%22%7B_ml%20%2B%20190%7D%22%20y1%3D%2216%22%20x2%3D%22%7B_ml%20%2B%20216%7D%22%20y2%3D%2216%22%20stroke%3D%22%7B_ORANGE%7D%22%20'%0A%20%20%20%20%20%20%20%20'stroke-width%3D%222%22%20stroke-dasharray%3D%226%204%22%2F%3E'%0A%20%20%20%20%20%20%20%20f'%3Ctext%20x%3D%22%7B_ml%20%2B%20222%7D%22%20y%3D%2220%22%20font-size%3D%2213%22%20fill%3D%22currentColor%22%3Eslope%20(gradient)%3C%2Ftext%3E'%0A%20%20%20%20)%0A%20%20%20%20%23%20axes%20%2B%20ticks%0A%20%20%20%20_x0%2C%20_y0%20%3D%20_ml%2C%20_H%20-%20_mb%0A%20%20%20%20_parts.append(%0A%20%20%20%20%20%20%20%20f'%3Cline%20x1%3D%22%7B_x0%7D%22%20y1%3D%22%7B_y0%7D%22%20x2%3D%22%7B_W%20-%20_mr%7D%22%20y2%3D%22%7B_y0%7D%22%20stroke%3D%22currentColor%22%20stroke-opacity%3D%220.5%22%2F%3E'%0A%20%20%20%20%20%20%20%20f'%3Cline%20x1%3D%22%7B_x0%7D%22%20y1%3D%22%7B_mt%7D%22%20x2%3D%22%7B_x0%7D%22%20y2%3D%22%7B_y0%7D%22%20stroke%3D%22currentColor%22%20stroke-opacity%3D%220.5%22%2F%3E'%0A%20%20%20%20)%0A%20%20%20%20for%20_t%20in%20range(-3%2C%204)%3A%0A%20%20%20%20%20%20%20%20_parts.append(%0A%20%20%20%20%20%20%20%20%20%20%20%20f'%3Ctext%20x%3D%22%7B_px(_t)%3A.1f%7D%22%20y%3D%22%7B_y0%20%2B%2016%7D%22%20font-size%3D%2211%22%20text-anchor%3D%22middle%22%20'%0A%20%20%20%20%20%20%20%20%20%20%20%20f'fill%3D%22currentColor%22%20fill-opacity%3D%220.7%22%3E%7B_t%7D%3C%2Ftext%3E'%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20for%20_f%20in%20(0%2C%200.5%2C%201)%3A%0A%20%20%20%20%20%20%20%20_v%20%3D%20_Lmax%20%2F%201.1%20*%20_f%0A%20%20%20%20%20%20%20%20_parts.append(%0A%20%20%20%20%20%20%20%20%20%20%20%20f'%3Ctext%20x%3D%22%7B_x0%20-%206%7D%22%20y%3D%22%7B_py(_v)%20%2B%204%3A.1f%7D%22%20font-size%3D%2211%22%20text-anchor%3D%22end%22%20'%0A%20%20%20%20%20%20%20%20%20%20%20%20f'fill%3D%22currentColor%22%20fill-opacity%3D%220.7%22%3E%7B_v%3A.3f%7D%3C%2Ftext%3E'%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20_parts.append(%0A%20%20%20%20%20%20%20%20f'%3Ctext%20x%3D%22%7B(_W%20%2B%20_ml)%20%2F%202%7D%22%20y%3D%22%7B_H%20-%206%7D%22%20font-size%3D%2213%22%20text-anchor%3D%22middle%22%20'%0A%20%20%20%20%20%20%20%20f'fill%3D%22currentColor%22%3E%7B_w_sym%7D%3C%2Ftext%3E'%0A%20%20%20%20%20%20%20%20f'%3Ctext%20x%3D%2216%22%20y%3D%22%7B(_mt%20%2B%20_y0)%20%2F%202%7D%22%20font-size%3D%2213%22%20text-anchor%3D%22middle%22%20'%0A%20%20%20%20%20%20%20%20f'fill%3D%22currentColor%22%20transform%3D%22rotate(-90%2016%20%7B(_mt%20%2B%20_y0)%20%2F%202%7D)%22%3E'%0A%20%20%20%20%20%20%20%20'%3Ctspan%20font-style%3D%22italic%22%3EL%3C%2Ftspan%3E%20(loss)%3C%2Ftext%3E'%0A%20%20%20%20)%0A%20%20%20%20%23%20loss%20curve%0A%20%20%20%20_pts%20%3D%20%22%20%22.join(f%22%7B_px(a)%3A.1f%7D%2C%7B_py(b)%3A.1f%7D%22%20for%20a%2C%20b%20in%20zip(_ws%2C%20_Ls))%0A%20%20%20%20_parts.append(f'%3Cpolyline%20points%3D%22%7B_pts%7D%22%20fill%3D%22none%22%20stroke%3D%22%7B_BLUE%7D%22%20stroke-width%3D%222.5%22%2F%3E')%0A%20%20%20%20%23%20tangent%20line%20(the%20gradient)%20around%20the%20current%20weight%0A%20%20%20%20_ta%2C%20_tb%20%3D%20max(-3%2C%20_w0%20-%200.8)%2C%20min(3%2C%20_w0%20%2B%200.8)%0A%20%20%20%20_parts.append(%0A%20%20%20%20%20%20%20%20f'%3Cline%20x1%3D%22%7B_px(_ta)%3A.1f%7D%22%20y1%3D%22%7B_py(_L0%20%2B%20_slope%20*%20(_ta%20-%20_w0))%3A.1f%7D%22%20'%0A%20%20%20%20%20%20%20%20f'x2%3D%22%7B_px(_tb)%3A.1f%7D%22%20y2%3D%22%7B_py(_L0%20%2B%20_slope%20*%20(_tb%20-%20_w0))%3A.1f%7D%22%20'%0A%20%20%20%20%20%20%20%20f'stroke%3D%22%7B_ORANGE%7D%22%20stroke-width%3D%222%22%20stroke-dasharray%3D%226%204%22%2F%3E'%0A%20%20%20%20)%0A%20%20%20%20%23%20dotted%20guide%20from%20the%20current%20point%20down%20to%20the%20axis%0A%20%20%20%20_parts.append(%0A%20%20%20%20%20%20%20%20f'%3Cline%20x1%3D%22%7B_px(_w0)%3A.1f%7D%22%20y1%3D%22%7B_py(_L0)%3A.1f%7D%22%20x2%3D%22%7B_px(_w0)%3A.1f%7D%22%20y2%3D%22%7B_y0%7D%22%20'%0A%20%20%20%20%20%20%20%20f'stroke%3D%22%7B_ORANGE%7D%22%20stroke-opacity%3D%220.6%22%20stroke-dasharray%3D%222%203%22%2F%3E'%0A%20%20%20%20)%0A%20%20%20%20%23%20%22move%20this%20way%22%20arrow%2C%20opposite%20to%20the%20slope%2C%20below%20the%20tick%20labels%0A%20%20%20%20_ay%20%3D%20_y0%20%2B%2036%0A%20%20%20%20if%20abs(_slope)%20%3E%201e-9%3A%0A%20%20%20%20%20%20%20%20_dir%20%3D%20-1%20if%20_slope%20%3E%200%20else%201%0A%20%20%20%20%20%20%20%20_ax%20%3D%20min(max(_px(_w0)%20%2B%20_dir%20*%2070%2C%20_ml%20%2B%204)%2C%20_W%20-%20_mr%20-%204)%0A%20%20%20%20%20%20%20%20_parts.append(%0A%20%20%20%20%20%20%20%20%20%20%20%20f'%3Cline%20x1%3D%22%7B_px(_w0)%3A.1f%7D%22%20y1%3D%22%7B_ay%7D%22%20x2%3D%22%7B_ax%3A.1f%7D%22%20y2%3D%22%7B_ay%7D%22%20'%0A%20%20%20%20%20%20%20%20%20%20%20%20f'stroke%3D%22%7B_GREEN%7D%22%20stroke-width%3D%222.5%22%20marker-end%3D%22url(%23curve-arrow)%22%2F%3E'%0A%20%20%20%20%20%20%20%20%20%20%20%20f'%3Ctext%20x%3D%22%7B(_px(_w0)%20%2B%20_ax)%20%2F%202%3A.1f%7D%22%20y%3D%22%7B_ay%20%2B%2017%7D%22%20font-size%3D%2212%22%20'%0A%20%20%20%20%20%20%20%20%20%20%20%20f'text-anchor%3D%22middle%22%20fill%3D%22%7B_GREEN%7D%22%3Elower%20loss%3C%2Ftext%3E'%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20%23%20current%20weight%0A%20%20%20%20_parts.append(%0A%20%20%20%20%20%20%20%20f'%3Ccircle%20cx%3D%22%7B_px(_w0)%3A.1f%7D%22%20cy%3D%22%7B_py(_L0)%3A.1f%7D%22%20r%3D%226%22%20fill%3D%22%7B_ORANGE%7D%22%2F%3E'%0A%20%20%20%20)%0A%20%20%20%20_parts.append(%22%3C%2Fsvg%3E%22)%0A%0A%20%20%20%20if%20abs(_slope)%20%3C%201e-9%3A%0A%20%20%20%20%20%20%20%20_note%20%3D%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20f%22The%20slope%20is%20**0**%3A%20this%20weight%20multiplies%20node%20%7B_k%5B0%5D%7D%2C%20whose%20activation%20is%200%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%22for%20this%20input.%20Changing%20it%20has%20no%20effect%20on%20the%20prediction%2C%20so%20the%20gradient%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%22says%3A%20leave%20it%20alone%20(for%20this%20example).%22%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20else%3A%0A%20%20%20%20%20%20%20%20_verb%20%3D%20%22decrease%22%20if%20_slope%20%3E%200%20else%20%22increase%22%0A%20%20%20%20%20%20%20%20_note%20%3D%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20f%22At%20the%20current%20weight%20the%20slope%20(orange)%20is%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20f%22%24%5C%5Cfrac%7B%7B%5C%5Cpartial%20L%7D%7D%7B%7B%5C%5Cpartial%20w_%7B%7B%7B_k%7D%7D%7D%7D%7D%20%5C%5Capprox%20%7B_slope%3A.4f%7D%24.%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20f%22It's%20%7B'positive'%20if%20_slope%20%3E%200%20else%20'negative'%7D%2C%20so%20we%20should%20**%7B_verb%7D**%20%24w_%7B%7B%7B_k%7D%7D%7D%24%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20f%22(green%20arrow).%22%0A%20%20%20%20%20%20%20%20)%0A%0A%20%20%20%20_plot%20%3D%20mo.vstack(%0A%20%20%20%20%20%20%20%20%5Bmo.md(f%22**Loss%20as%20a%20function%20of%20%24w_%7B%7B%7B_k%7D%7D%7D%24**%22)%2C%20mo.Html(%22%22.join(_parts))%5D%2C%0A%20%20%20%20%20%20%20%20align%3D%22center%22%2C%0A%20%20%20%20)%0A%20%20%20%20mo.vstack(%0A%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.hstack(%5Bweight_picker%2C%20_plot%5D%2C%20widths%3D%5B1%2C%201%5D%2C%20align%3D%22center%22%2C%20gap%3D1.5)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.md(_note)%2C%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20gap%3D1%2C%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20So%20every%20training%20step%20does%20the%20same%20thing%20for%20every%20weight%3A%20take%20a%20small%20step%20**against**%20the%20slope.%0A%0A%20%20%20%20%24%24%0A%20%20%20%20w%20%5Cleftarrow%20w%20-%20%5Cmu%20%5C%2C%20%5Cfrac%7B%5Cpartial%20L%7D%7B%5Cpartial%20w%7D%0A%20%20%20%20%24%24%0A%0A%20%20%20%20The%20**learning%20rate**%20%24%5Cmu%24%20is%20a%20small%20number%20that%20controls%20the%20step%20size.%20Too%20small%20and%20training%20crawls%3B%20too%20big%20and%20we%20overshoot%20the%20bottom%20of%20the%20curve.%0A%0A%20%20%20%20Above%2C%20we%20measured%20the%20slope%20by%20brute%20force%3A%20change%20the%20weight%20a%20tiny%20bit%20and%20recompute%20the%20whole%20network.%20That%20works%20for%20one%20weight%2C%20but%20it's%20far%20too%20slow%20for%20millions.%20Next%2C%20we'll%20find%20a%20simple%20formula%20for%20it%20instead.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(activations%2C%20mo%2C%20network_svg%2C%20target%2C%20weights)%3A%0A%20%20%20%20%23%20The%20forward-pass%20diagram%20again%2C%20with%20only%20w_DG%20drawn%20at%20full%20strength.%0A%20%20%20%20_nodes%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%22A%22%3A%20(60%2C%2070%2C%20f%22%7Bactivations%5B'A'%5D%3A.1f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22B%22%3A%20(60%2C%20190%2C%20f%22%7Bactivations%5B'B'%5D%3A.1f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22C%20(bias)%22%3A%20(150%2C%20290%2C%20%221%22)%2C%0A%20%20%20%20%20%20%20%20%22D%22%3A%20(290%2C%2070%2C%20f%22%7Bactivations%5B'D'%5D%3A.3f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22E%22%3A%20(290%2C%20190%2C%20f%22%7Bactivations%5B'E'%5D%3A.3f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22F%20(bias)%22%3A%20(390%2C%20290%2C%20%221%22)%2C%0A%20%20%20%20%20%20%20%20%22G%22%3A%20(460%2C%20130%2C%20f%22%7Bactivations%5B'G'%5D%3A.3f%7D%22)%2C%0A%20%20%20%20%7D%0A%20%20%20%20_edges%20%3D%20%5B%0A%20%20%20%20%20%20%20%20(%22A%22%2C%20%22D%22%2C%20weights%5B%22AD%22%5D%2C%200.5%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22A%22%2C%20%22E%22%2C%20weights%5B%22AE%22%5D%2C%200.2%2C%20-1)%2C%0A%20%20%20%20%20%20%20%20(%22B%22%2C%20%22D%22%2C%20weights%5B%22BD%22%5D%2C%200.2%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22B%22%2C%20%22E%22%2C%20weights%5B%22BE%22%5D%2C%200.5%2C%20-1)%2C%0A%20%20%20%20%20%20%20%20(%22C%20(bias)%22%2C%20%22D%22%2C%20weights%5B%22CD%22%5D%2C%200.35%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22C%20(bias)%22%2C%20%22E%22%2C%20weights%5B%22CE%22%5D%2C%200.5%2C%20-1)%2C%0A%20%20%20%20%20%20%20%20(%22D%22%2C%20%22G%22%2C%20weights%5B%22DG%22%5D%2C%200.5%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22E%22%2C%20%22G%22%2C%20weights%5B%22EG%22%5D%2C%200.5%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22F%20(bias)%22%2C%20%22G%22%2C%20weights%5B%22FG%22%5D%2C%200.5%2C%20-1)%2C%0A%20%20%20%20%5D%0A%0A%20%20%20%20mo.vstack(%5B%0A%20%20%20%20%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20%23%23%20Final%20Layer%20Update%0A%0A%20%20%20%20Let's%20start%20with%20the%20weights%20closest%20to%20the%20output%3A%20the%20three%20weights%20going%20into%20node%20%24G%24.%0A%0A%20%20%20%20Let's%20follow%20just%20one%20of%20them%2C%20%24w_%7BDG%7D%24%20(the%20connection%20from%20%24D%24%20to%20%24G%24).%0A%20%20%20%20%22%22%22)%2C%0A%20%20%20%20%20%20%20%20network_svg(_nodes%2C%20_edges%2C%20target%3Dtarget%2C%20highlight%3D%7B%22DG%22%7D)%2C%0A%20%20%20%20%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20This%20weight%20doesn't%20touch%20the%20loss%20directly.%20Its%20effect%20travels%20through%20three%20steps%3A%0A%0A%20%20%20%201.%20%24w_%7BDG%7D%24%20changes%20the%20**weighted%20sum**%20of%20node%20%24G%24%2C%20called%20%24x_G%24%0A%20%20%20%202.%20%24x_G%24%20changes%20the%20**prediction**%20%24y_G%20%3D%20%5Csigma(x_G)%24%0A%20%20%20%203.%20%24y_G%24%20changes%20the%20**loss**%20%24L%20%3D%20%5Cfrac%7B1%7D%7B2%7D(t%20-%20y_G)%5E2%24%0A%0A%20%20%20%20Think%20of%20it%20as%20three%20gears%20in%20a%20row.%20Turn%20the%20first%20gear%2C%20and%20the%20last%20one%20turns%20too%2C%20by%20an%20amount%20that%20depends%20on%20the%20ratio%20of%20each%20pair%20of%20gears.%20So%20for%20every%20step%20we'll%20ask%20one%20simple%20question%3A%0A%0A%20%20%20%20%3E%20_If%20the%20input%20to%20this%20step%20goes%20up%20by%20a%20tiny%20amount%2C%20how%20much%20does%20its%20output%20move%3F_%0A%0A%20%20%20%20We'll%20call%20each%20answer%20a%20**rate**.%20Then%20we'll%20combine%20the%20three%20rates.%0A%20%20%20%20%22%22%22)%2C%0A%20%20%20%20%5D)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(activations%2C%20target%2C%20weights)%3A%0A%20%20%20%20%23%20Everything%20the%20final-layer%20update%20needs%2C%20computed%20once%20from%20the%20network.%0A%20%20%20%20_y%20%3D%20activations%0A%20%20%20%20_x_G%20%3D%20_y%5B%22D%22%5D%20*%20weights%5B%22DG%22%5D%20%2B%20_y%5B%22E%22%5D%20*%20weights%5B%22EG%22%5D%20%2B%20_y%5B%22F%22%5D%20*%20weights%5B%22FG%22%5D%0A%20%20%20%20output_grad%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%22x_G%22%3A%20_x_G%2C%0A%20%20%20%20%20%20%20%20%22y_G%22%3A%20_y%5B%22G%22%5D%2C%0A%20%20%20%20%20%20%20%20%22rate2%22%3A%20_y%5B%22G%22%5D%20*%20(1%20-%20_y%5B%22G%22%5D)%2C%20%20%23%20sigmoid%20slope%20at%20x_G%0A%20%20%20%20%20%20%20%20%22rate3%22%3A%20-(target%20-%20_y%5B%22G%22%5D)%2C%20%20%23%20loss%20slope%20at%20y_G%0A%20%20%20%20%7D%0A%20%20%20%20output_grad%5B%22delta_G%22%5D%20%3D%20-output_grad%5B%22rate2%22%5D%20*%20output_grad%5B%22rate3%22%5D%0A%20%20%20%20return%20(output_grad%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(activations%2C%20mo)%3A%0A%20%20%20%20_yD%20%3D%20activations%5B%22D%22%5D%0A%20%20%20%20mo.md(rf%22%22%22%0A%20%20%20%20%23%23%23%20Step%201%3A%20weight%20%E2%86%92%20weighted%20sum%0A%0A%20%20%20%20The%20weighted%20sum%20of%20node%20%24G%24%20is%0A%0A%20%20%20%20%24%24%0A%20%20%20%20x_G%20%3D%20y_D%5C%2Cw_%7B%7BDG%7D%7D%20%2B%20y_E%5C%2Cw_%7B%7BEG%7D%7D%20%2B%201%5Ccdot%20w_%7B%7BFG%7D%7D%0A%20%20%20%20%24%24%0A%0A%20%20%20%20Only%20the%20first%20term%20contains%20%24w_%7B%7BDG%7D%7D%24.%20So%20if%20%24w_%7B%7BDG%7D%7D%24%20goes%20up%20by%20some%20small%20amount%2C%20%24x_G%24%20goes%20up%20by%20%24y_D%24%20times%20that%20amount.%20The%20other%20terms%20don't%20change.%0A%0A%20%20%20%20In%20our%20network%20%24y_D%20%3D%20%7B_yD%3A.3f%7D%24%2C%20so%20every%20%24%2B1%24%20on%20the%20weight%20adds%20%24%7B_yD%3A.3f%7D%24%20to%20%24x_G%24.%0A%0A%20%20%20%20**Rate%201%20%3D%20%24y_D%24%20%3D%20%7B_yD%3A.3f%7D**%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo%2C%20output_grad)%3A%0A%20%20%20%20_x_G%2C%20_y_G%2C%20_r2%20%3D%20output_grad%5B%22x_G%22%5D%2C%20output_grad%5B%22y_G%22%5D%2C%20output_grad%5B%22rate2%22%5D%0A%20%20%20%20mo.md(rf%22%22%22%0A%20%20%20%20%23%23%23%20Step%202%3A%20weighted%20sum%20%E2%86%92%20prediction%0A%0A%20%20%20%20The%20prediction%20is%20the%20weighted%20sum%20passed%20through%20the%20sigmoid%3A%20%24y_G%20%3D%20%5Csigma(x_G)%24.%20How%20much%20%24y_G%24%20moves%20depends%20on%20**how%20steep%20the%20sigmoid%20is**%20at%20%24x_G%24%3A%0A%0A%20%20%20%20-%20near%20the%20middle%2C%20the%20curve%20is%20steep%2C%20so%20a%20push%20on%20%24x_G%24%20moves%20the%20prediction%20a%20lot%0A%20%20%20%20-%20far%20to%20the%20left%20or%20right%2C%20it's%20almost%20flat%2C%20so%20the%20prediction%20barely%20moves%0A%0A%20%20%20%20The%20steepness%20of%20the%20sigmoid%20has%20a%20neat%20formula%20that%20only%20needs%20its%20output%3A%0A%0A%20%20%20%20%24%24%0A%20%20%20%20%5Csigma'(x)%20%3D%20%5Csigma(x)%5C%2C%5Cbigl(1%20-%20%5Csigma(x)%5Cbigr)%0A%20%20%20%20%5Cquad%5CRightarrow%5Cquad%0A%20%20%20%20%5Ctext%7B%7Bsteepness%20at%20%7D%7D%20x_G%20%3D%20y_G(1%20-%20y_G)%0A%20%20%20%20%24%24%0A%0A%20%20%20%20In%20our%20network%20%24x_G%20%3D%20%7B_x_G%3A.3f%7D%24%20and%20%24y_G%20%3D%20%7B_y_G%3A.3f%7D%24%2C%20so%0A%0A%20%20%20%20**Rate%202%20%3D%20%24y_G(1-y_G)%24%20%3D%20%7B_y_G%3A.3f%7D%20%C3%97%20%7B1%20-%20_y_G%3A.3f%7D%20%3D%20%7B_r2%3A.3f%7D**%0A%0A%20%20%20%20_Check%20it%20yourself%3A_%20type%20%24%7B_x_G%3A.4f%7D%24%20into%20the%20sigmoid%20calculator%20(top%20right)%20and%20read%20off%20%24%5Csigma'(x)%24.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo%2C%20np%2C%20output_grad)%3A%0A%20%20%20%20%23%20Sigmoid%20with%20the%20current%20point%20x_G%20and%20its%20tangent%20(slope%20%3D%20rate%202).%0A%20%20%20%20_x0%2C%20_y0%2C%20_s%20%3D%20output_grad%5B%22x_G%22%5D%2C%20output_grad%5B%22y_G%22%5D%2C%20output_grad%5B%22rate2%22%5D%0A%20%20%20%20_W%2C%20_H%20%3D%20480%2C%20270%0A%20%20%20%20_ml%2C%20_mr%2C%20_mt%2C%20_mb%20%3D%2048%2C%2016%2C%2036%2C%2050%0A%20%20%20%20_ORANGE%2C%20_BLUE%20%3D%20%22%23f97316%22%2C%20%22%232563eb%22%0A%0A%20%20%20%20def%20_px(x)%3A%0A%20%20%20%20%20%20%20%20return%20_ml%20%2B%20(x%20%2B%206)%20%2F%2012%20*%20(_W%20-%20_ml%20-%20_mr)%0A%0A%20%20%20%20def%20_py(y)%3A%0A%20%20%20%20%20%20%20%20return%20_H%20-%20_mb%20-%20y%20*%20(_H%20-%20_mt%20-%20_mb)%0A%0A%20%20%20%20_xs%20%3D%20np.linspace(-6%2C%206%2C%20241)%0A%20%20%20%20_pts%20%3D%20%22%20%22.join(f%22%7B_px(a)%3A.1f%7D%2C%7B_py(1%20%2F%20(1%20%2B%20np.exp(-a)))%3A.1f%7D%22%20for%20a%20in%20_xs)%0A%20%20%20%20_ta%2C%20_tb%20%3D%20_x0%20-%201.6%2C%20_x0%20%2B%201.6%0A%20%20%20%20_sub%20%3D%20lambda%20base%2C%20s%3A%20(%0A%20%20%20%20%20%20%20%20f'%3Ctspan%20font-style%3D%22italic%22%3E%7Bbase%7D%3C%2Ftspan%3E'%0A%20%20%20%20%20%20%20%20f'%3Ctspan%20baseline-shift%3D%22sub%22%20font-size%3D%220.75em%22%3E%7Bs%7D%3C%2Ftspan%3E'%0A%20%20%20%20)%0A%20%20%20%20_parts%20%3D%20%5B%0A%20%20%20%20%20%20%20%20f'%3Csvg%20viewBox%3D%220%200%20%7B_W%7D%20%7B_H%7D%22%20width%3D%22%7B_W%7D%22%20height%3D%22%7B_H%7D%22%20style%3D%22max-width%3A100%25%3Bheight%3Aauto%3B'%0A%20%20%20%20%20%20%20%20'display%3Ablock%3Bmargin%3A0%20auto%3Bfont-family%3Asystem-ui%2Csans-serif%3Bcolor%3Ainherit%22%3E'%2C%0A%20%20%20%20%20%20%20%20%23%20legend%20(outside%20the%20plot%20area)%0A%20%20%20%20%20%20%20%20f'%3Ccircle%20cx%3D%22%7B_ml%20%2B%206%7D%22%20cy%3D%2216%22%20r%3D%225%22%20fill%3D%22%7B_ORANGE%7D%22%2F%3E'%0A%20%20%20%20%20%20%20%20f'%3Ctext%20x%3D%22%7B_ml%20%2B%2016%7D%22%20y%3D%2220%22%20font-size%3D%2213%22%20fill%3D%22currentColor%22%3E'%0A%20%20%20%20%20%20%20%20f'our%20node%3A%20%7B_sub(%22x%22%2C%20%22G%22)%7D%20%3D%20%7B_x0%3A.3f%7D%2C%20%7B_sub(%22y%22%2C%20%22G%22)%7D%20%3D%20%7B_y0%3A.3f%7D%3C%2Ftext%3E'%0A%20%20%20%20%20%20%20%20f'%3Cline%20x1%3D%22%7B_ml%20%2B%20250%7D%22%20y1%3D%2216%22%20x2%3D%22%7B_ml%20%2B%20276%7D%22%20y2%3D%2216%22%20stroke%3D%22%7B_ORANGE%7D%22%20'%0A%20%20%20%20%20%20%20%20'stroke-width%3D%222%22%20stroke-dasharray%3D%226%204%22%2F%3E'%0A%20%20%20%20%20%20%20%20f'%3Ctext%20x%3D%22%7B_ml%20%2B%20282%7D%22%20y%3D%2220%22%20font-size%3D%2213%22%20fill%3D%22currentColor%22%3Esteepness%20%3D%20%7B_s%3A.3f%7D%3C%2Ftext%3E'%2C%0A%20%20%20%20%20%20%20%20%23%20axes%0A%20%20%20%20%20%20%20%20f'%3Cline%20x1%3D%22%7B_ml%7D%22%20y1%3D%22%7B_py(0)%7D%22%20x2%3D%22%7B_W%20-%20_mr%7D%22%20y2%3D%22%7B_py(0)%7D%22%20stroke%3D%22currentColor%22%20stroke-opacity%3D%220.5%22%2F%3E'%0A%20%20%20%20%20%20%20%20f'%3Cline%20x1%3D%22%7B_px(0)%7D%22%20y1%3D%22%7B_mt%7D%22%20x2%3D%22%7B_px(0)%7D%22%20y2%3D%22%7B_py(0)%7D%22%20stroke%3D%22currentColor%22%20stroke-opacity%3D%220.25%22%2F%3E'%0A%20%20%20%20%20%20%20%20f'%3Cline%20x1%3D%22%7B_ml%7D%22%20y1%3D%22%7B_mt%7D%22%20x2%3D%22%7B_ml%7D%22%20y2%3D%22%7B_py(0)%7D%22%20stroke%3D%22currentColor%22%20stroke-opacity%3D%220.5%22%2F%3E'%2C%0A%20%20%20%20%5D%0A%20%20%20%20for%20_t%20in%20range(-6%2C%207%2C%202)%3A%0A%20%20%20%20%20%20%20%20_parts.append(%0A%20%20%20%20%20%20%20%20%20%20%20%20f'%3Ctext%20x%3D%22%7B_px(_t)%3A.1f%7D%22%20y%3D%22%7B_py(0)%20%2B%2016%3A.1f%7D%22%20font-size%3D%2211%22%20text-anchor%3D%22middle%22%20'%0A%20%20%20%20%20%20%20%20%20%20%20%20f'fill%3D%22currentColor%22%20fill-opacity%3D%220.7%22%3E%7B_t%7D%3C%2Ftext%3E'%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20for%20_v%20in%20(0%2C%200.5%2C%201)%3A%0A%20%20%20%20%20%20%20%20_parts.append(%0A%20%20%20%20%20%20%20%20%20%20%20%20f'%3Ctext%20x%3D%22%7B_ml%20-%206%7D%22%20y%3D%22%7B_py(_v)%20%2B%204%3A.1f%7D%22%20font-size%3D%2211%22%20text-anchor%3D%22end%22%20'%0A%20%20%20%20%20%20%20%20%20%20%20%20f'fill%3D%22currentColor%22%20fill-opacity%3D%220.7%22%3E%7B_v%3Ag%7D%3C%2Ftext%3E'%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20_parts%20%2B%3D%20%5B%0A%20%20%20%20%20%20%20%20f'%3Ctext%20x%3D%22%7B(_W%20%2B%20_ml)%20%2F%202%7D%22%20y%3D%22%7B_H%20-%208%7D%22%20font-size%3D%2213%22%20text-anchor%3D%22middle%22%20'%0A%20%20%20%20%20%20%20%20f'fill%3D%22currentColor%22%3E%7B_sub(%22x%22%2C%20%22G%22)%7D%20(weighted%20sum)%3C%2Ftext%3E'%2C%0A%20%20%20%20%20%20%20%20f'%3Ctext%20x%3D%2214%22%20y%3D%22%7B(_mt%20%2B%20_py(0))%20%2F%202%7D%22%20font-size%3D%2213%22%20text-anchor%3D%22middle%22%20'%0A%20%20%20%20%20%20%20%20f'fill%3D%22currentColor%22%20transform%3D%22rotate(-90%2014%20%7B(_mt%20%2B%20_py(0))%20%2F%202%7D)%22%3E%7B_sub(%22y%22%2C%20%22G%22)%7D%20%3D%20%CF%83(%7B_sub(%22x%22%2C%20%22G%22)%7D)%3C%2Ftext%3E'%2C%0A%20%20%20%20%20%20%20%20f'%3Cpolyline%20points%3D%22%7B_pts%7D%22%20fill%3D%22none%22%20stroke%3D%22%7B_BLUE%7D%22%20stroke-width%3D%222.5%22%2F%3E'%2C%0A%20%20%20%20%20%20%20%20f'%3Cline%20x1%3D%22%7B_px(_ta)%3A.1f%7D%22%20y1%3D%22%7B_py(_y0%20%2B%20_s%20*%20(_ta%20-%20_x0))%3A.1f%7D%22%20'%0A%20%20%20%20%20%20%20%20f'x2%3D%22%7B_px(_tb)%3A.1f%7D%22%20y2%3D%22%7B_py(_y0%20%2B%20_s%20*%20(_tb%20-%20_x0))%3A.1f%7D%22%20'%0A%20%20%20%20%20%20%20%20f'stroke%3D%22%7B_ORANGE%7D%22%20stroke-width%3D%222%22%20stroke-dasharray%3D%226%204%22%2F%3E'%2C%0A%20%20%20%20%20%20%20%20f'%3Ccircle%20cx%3D%22%7B_px(_x0)%3A.1f%7D%22%20cy%3D%22%7B_py(_y0)%3A.1f%7D%22%20r%3D%226%22%20fill%3D%22%7B_ORANGE%7D%22%2F%3E'%2C%0A%20%20%20%20%20%20%20%20%22%3C%2Fsvg%3E%22%2C%0A%20%20%20%20%5D%0A%20%20%20%20mo.Html(%22%22.join(_parts))%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo%2C%20output_grad%2C%20target)%3A%0A%20%20%20%20_y_G%2C%20_r3%20%3D%20output_grad%5B%22y_G%22%5D%2C%20output_grad%5B%22rate3%22%5D%0A%20%20%20%20_below%20%3D%20_y_G%20%3C%20target%0A%20%20%20%20mo.md(rf%22%22%22%0A%20%20%20%20%23%23%23%20Step%203%3A%20prediction%20%E2%86%92%20loss%0A%0A%20%20%20%20The%20loss%20is%20%24L%20%3D%20%5Cfrac%7B%7B1%7D%7D%7B%7B2%7D%7D(t%20-%20y_G)%5E2%24.%20Its%20slope%20with%20respect%20to%20the%20prediction%20is%0A%0A%20%20%20%20%24%24%0A%20%20%20%20%5Cfrac%7B%7B%5Cpartial%20L%7D%7D%7B%7B%5Cpartial%20y_G%7D%7D%20%3D%20-(t%20-%20y_G)%0A%20%20%20%20%24%24%0A%0A%20%20%20%20(The%20%242%24%20from%20the%20square%20cancels%20the%20%24%5Cfrac%7B%7B1%7D%7D%7B%7B2%7D%7D%24.%20That's%20exactly%20why%20we%20added%20it.)%0A%0A%20%20%20%20In%20words%3A%20the%20rate%20is%20the%20gap%20between%20the%20target%20and%20the%20prediction%2C%20with%20a%20minus%20sign.%20Our%20prediction%20%24%7B_y_G%3A.3f%7D%24%20is%20**%7B%22below%22%20if%20_below%20else%20%22above%22%7D**%20the%20target%20%24%7Btarget%3Ag%7D%24%2C%20so%20pushing%20the%20prediction%20up%20makes%20the%20loss%20go%20**%7B%22down%22%20if%20_below%20else%20%22up%22%7D**.%20Hence%20the%20%7B%22negative%22%20if%20_r3%20%3C%200%20else%20%22positive%22%7D%20rate.%0A%0A%20%20%20%20**Rate%203%20%3D%20%24-(t%20-%20y_G)%24%20%3D%20%24-(%7Btarget%3Ag%7D%20-%20%7B_y_G%3A.3f%7D)%24%20%3D%20%7B_r3%3A.3f%7D**%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20%23%23%23%20Putting%20the%20three%20steps%20together%0A%0A%20%20%20%20Now%20turn%20the%20first%20gear.%20Nudge%20%24w_%7BDG%7D%24%20by%20a%20small%20amount%2C%20and%20watch%20the%20change%20travel%20to%20the%20loss.%20Each%20arrow%20multiplies%20by%20its%20rate%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20nudge%20%3D%20mo.ui.slider(%0A%20%20%20%20%20%20%20%20-0.5%2C%200.5%2C%20step%3D0.01%2C%20value%3D0.1%2C%0A%20%20%20%20%20%20%20%20label%3Dr%22Nudge%20%24w_%7BDG%7D%24%20by%22%2C%20show_value%3DTrue%2C%0A%20%20%20%20)%0A%20%20%20%20nudge%0A%20%20%20%20return%20(nudge%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(%0A%20%20%20%20activations%2C%0A%20%20%20%20forward%2C%0A%20%20%20%20inputs%2C%0A%20%20%20%20mo%2C%0A%20%20%20%20network_svg%2C%0A%20%20%20%20nudge%2C%0A%20%20%20%20output_grad%2C%0A%20%20%20%20target%2C%0A%20%20%20%20weights%2C%0A)%3A%0A%20%20%20%20_d%20%3D%20nudge.value%0A%20%20%20%20_r1%2C%20_r2%2C%20_r3%20%3D%20activations%5B%22D%22%5D%2C%20output_grad%5B%22rate2%22%5D%2C%20output_grad%5B%22rate3%22%5D%0A%20%20%20%20_dx%20%3D%20_r1%20*%20_d%0A%20%20%20%20_dy%20%3D%20_r2%20*%20_dx%0A%20%20%20%20_dL%20%3D%20_r3%20*%20_dy%0A%0A%20%20%20%20%23%20The%20real%20change%2C%20recomputing%20the%20whole%20network%20with%20the%20nudged%20weight.%0A%20%20%20%20_w_nudged%20%3D%20%7B**weights%2C%20%22DG%22%3A%20weights%5B%22DG%22%5D%20%2B%20_d%7D%0A%20%20%20%20_y_nudged%20%3D%20forward(_w_nudged%2C%20inputs)%0A%20%20%20%20_L_before%20%3D%200.5%20*%20(target%20-%20activations%5B%22G%22%5D)%20**%202%0A%20%20%20%20_y_after%20%3D%20_y_nudged%5B%22G%22%5D%0A%20%20%20%20_dL_real%20%3D%200.5%20*%20(target%20-%20_y_after)%20**%202%20-%20_L_before%0A%0A%20%20%20%20%23%20The%20whole%20network%20with%20the%20nudged%20weight%20highlighted%3B%20activations%20update%20live.%0A%20%20%20%20_nodes%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%22A%22%3A%20(60%2C%2070%2C%20f%22%7B_y_nudged%5B'A'%5D%3A.1f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22B%22%3A%20(60%2C%20190%2C%20f%22%7B_y_nudged%5B'B'%5D%3A.1f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22C%20(bias)%22%3A%20(150%2C%20290%2C%20%221%22)%2C%0A%20%20%20%20%20%20%20%20%22D%22%3A%20(290%2C%2070%2C%20f%22%7B_y_nudged%5B'D'%5D%3A.3f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22E%22%3A%20(290%2C%20190%2C%20f%22%7B_y_nudged%5B'E'%5D%3A.3f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22F%20(bias)%22%3A%20(390%2C%20290%2C%20%221%22)%2C%0A%20%20%20%20%20%20%20%20%22G%22%3A%20(460%2C%20130%2C%20f%22%7B_y_nudged%5B'G'%5D%3A.3f%7D%22)%2C%0A%20%20%20%20%7D%0A%20%20%20%20_edges%20%3D%20%5B%0A%20%20%20%20%20%20%20%20(%22A%22%2C%20%22D%22%2C%20_w_nudged%5B%22AD%22%5D%2C%200.5%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22A%22%2C%20%22E%22%2C%20_w_nudged%5B%22AE%22%5D%2C%200.2%2C%20-1)%2C%0A%20%20%20%20%20%20%20%20(%22B%22%2C%20%22D%22%2C%20_w_nudged%5B%22BD%22%5D%2C%200.2%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22B%22%2C%20%22E%22%2C%20_w_nudged%5B%22BE%22%5D%2C%200.5%2C%20-1)%2C%0A%20%20%20%20%20%20%20%20(%22C%20(bias)%22%2C%20%22D%22%2C%20_w_nudged%5B%22CD%22%5D%2C%200.35%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22C%20(bias)%22%2C%20%22E%22%2C%20_w_nudged%5B%22CE%22%5D%2C%200.5%2C%20-1)%2C%0A%20%20%20%20%20%20%20%20(%22D%22%2C%20%22G%22%2C%20_w_nudged%5B%22DG%22%5D%2C%200.5%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22E%22%2C%20%22G%22%2C%20_w_nudged%5B%22EG%22%5D%2C%200.5%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22F%20(bias)%22%2C%20%22G%22%2C%20_w_nudged%5B%22FG%22%5D%2C%200.5%2C%20-1)%2C%0A%20%20%20%20%5D%0A%20%20%20%20_network%20%3D%20network_svg(_nodes%2C%20_edges%2C%20target%3Dtarget%2C%20highlight%3D%7B%22DG%22%7D)%0A%0A%20%20%20%20_box%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%22border%22%3A%20%221.5px%20solid%20color-mix(in%20srgb%2C%20currentColor%2030%25%2C%20transparent)%22%2C%0A%20%20%20%20%20%20%20%20%22border-radius%22%3A%20%2210px%22%2C%0A%20%20%20%20%20%20%20%20%22padding%22%3A%20%228px%2014px%22%2C%0A%20%20%20%20%20%20%20%20%22min-width%22%3A%20%2296px%22%2C%0A%20%20%20%20%7D%0A%20%20%20%20_loss_color%20%3D%20%22%2316a34a%22%20if%20_dL%20%3C%200%20else%20(%22%23dc2626%22%20if%20_dL%20%3E%200%20else%20%22inherit%22)%0A%0A%20%20%20%20def%20_node(name%2C%20change%2C%20color%3D%22inherit%22%2C%20border%3DNone)%3A%0A%20%20%20%20%20%20%20%20return%20mo.vstack(%0A%20%20%20%20%20%20%20%20%20%20%20%20%5Bmo.md(name)%2C%20mo.md(f%22**%7Bchange%3A%2B.4f%7D**%22).style(%7B%22color%22%3A%20color%7D)%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20align%3D%22center%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20gap%3D0%2C%0A%20%20%20%20%20%20%20%20).style(%7B**_box%2C%20**(%7B%22border-color%22%3A%20border%7D%20if%20border%20else%20%7B%7D)%7D)%0A%0A%20%20%20%20def%20_arrow(rate)%3A%0A%20%20%20%20%20%20%20%20return%20mo.vstack(%0A%20%20%20%20%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20mo.md(f%22%C3%97%20%7Brate%3A.3f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20mo.Html(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20'%3Csvg%20width%3D%2270%22%20height%3D%2212%22%20viewBox%3D%220%200%2070%2012%22%20style%3D%22display%3Ablock%3Bcolor%3Ainherit%22%3E'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20'%3Cline%20x1%3D%220%22%20y1%3D%226%22%20x2%3D%2264%22%20y2%3D%226%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%2F%3E'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20'%3Cpath%20d%3D%22M62%2C1%20L70%2C6%20L62%2C11%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%2F%3E'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%3C%2Fsvg%3E%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20mo.md(%22%26nbsp%3B%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20align%3D%22center%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20gap%3D0%2C%0A%20%20%20%20%20%20%20%20)%0A%0A%20%20%20%20_ripple%20%3D%20mo.hstack(%0A%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20_node(%22%24w_%7BDG%7D%24%22%2C%20_d)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20_arrow(_r1)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20_node(%22%24x_G%24%22%2C%20_dx)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20_arrow(_r2)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20_node(%22%24y_G%24%22%2C%20_dy)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20_arrow(_r3)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20_node(%22%24L%24%22%2C%20_dL%2C%20color%3D_loss_color%2C%20border%3D%22%233b82f6%22)%2C%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20justify%3D%22center%22%2C%0A%20%20%20%20%20%20%20%20align%3D%22center%22%2C%0A%20%20%20%20%20%20%20%20gap%3D0.5%2C%0A%20%20%20%20%20%20%20%20wrap%3DTrue%2C%0A%20%20%20%20)%0A%0A%20%20%20%20_check%20%3D%20mo.md(%0A%20%20%20%20%20%20%20%20f%22Recomputing%20the%20whole%20network%20with%20%24w_%7B%7BDG%7D%7D%20%3D%20%7Bweights%5B'DG'%5D%20%2B%20_d%3A.2f%7D%24%20changes%20the%20loss%20by%20%22%0A%20%20%20%20%20%20%20%20f%22**%7B_dL_real%3A%2B.4f%7D**.%20That's%20very%20close%20to%20the%20chain's%20estimate%20of%20%7B_dL%3A%2B.4f%7D.%20%22%0A%20%20%20%20%20%20%20%20%22(The%20match%20is%20only%20approximate%20because%20the%20curves%20bend%3B%20the%20smaller%20the%20nudge%2C%20the%20closer%20it%20gets.)%22%0A%20%20%20%20)%0A%20%20%20%20mo.vstack(%5B_network%2C%20_ripple%2C%20_check%5D%2C%20gap%3D1)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(activations%2C%20mo%2C%20output_grad)%3A%0A%20%20%20%20_r1%2C%20_r2%2C%20_r3%20%3D%20activations%5B%22D%22%5D%2C%20output_grad%5B%22rate2%22%5D%2C%20output_grad%5B%22rate3%22%5D%0A%20%20%20%20_slope%20%3D%20_r1%20*%20_r2%20*%20_r3%0A%20%20%20%20mo.md(rf%22%22%22%0A%20%20%20%20So%20**the%20loss%20moves%20by%20rate%201%20%C3%97%20rate%202%20%C3%97%20rate%203%20per%20unit%20of%20nudge**.%20That%20product%20is%20exactly%20the%20slope%20we%20were%20after%3A%0A%0A%20%20%20%20%24%24%0A%20%20%20%20%5Cfrac%7B%7B%5Cpartial%20L%7D%7D%7B%7B%5Cpartial%20w_%7B%7BDG%7D%7D%7D%7D%0A%20%20%20%20%3D%20%5Cunderbrace%7B%7By_D%7D%7D_%7B%7B%5Ctext%7B%7Brate%201%7D%7D%7D%7D%0A%20%20%20%20%5Ccdot%20%5Cunderbrace%7B%7By_G(1-y_G)%7D%7D_%7B%7B%5Ctext%7B%7Brate%202%7D%7D%7D%7D%0A%20%20%20%20%5Ccdot%20%5Cunderbrace%7B%7B-(t-y_G)%7D%7D_%7B%7B%5Ctext%7B%7Brate%203%7D%7D%7D%7D%0A%20%20%20%20%3D%20%7B_r1%3A.3f%7D%20%5Ctimes%20%7B_r2%3A.3f%7D%20%5Ctimes%20(%7B_r3%3A.3f%7D)%0A%20%20%20%20%3D%20%7B_slope%3A.4f%7D%0A%20%20%20%20%24%24%0A%0A%20%20%20%20It's%20the%20same%20slope%20we%20measured%20on%20the%20loss%20curve%20for%20%24w_%7B%7BDG%7D%7D%24%20earlier%2C%20but%20this%20time%20from%20three%20multiplications%20instead%20of%20re-running%20the%20network.%0A%0A%20%20%20%20Multiplying%20rates%20along%20a%20path%20like%20this%20is%20called%20the%20**chain%20rule**.%20It's%20the%20core%20idea%20of%20**backpropagation**.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(activations%2C%20mo%2C%20network_svg%2C%20output_grad%2C%20target%2C%20weights)%3A%0A%20%20%20%20_r2%2C%20_r3%2C%20_delta%20%3D%20output_grad%5B%22rate2%22%5D%2C%20output_grad%5B%22rate3%22%5D%2C%20output_grad%5B%22delta_G%22%5D%0A%20%20%20%20_rows%20%3D%20%5B%5D%0A%20%20%20%20for%20_k%20in%20%22DEF%22%3A%0A%20%20%20%20%20%20%20%20_r1%20%3D%20activations%5B_k%5D%0A%20%20%20%20%20%20%20%20_input%20%3D%20%22%241%24%20(bias)%22%20if%20_k%20%3D%3D%20%22F%22%20else%20f%22%24y_%7B_k%7D%20%3D%20%7B_r1%3A.3f%7D%24%22%0A%20%20%20%20%20%20%20%20_rows.append(%0A%20%20%20%20%20%20%20%20%20%20%20%20f%22%7C%20%24w_%7B%7B%7B_k%7DG%7D%7D%24%20%7C%20%7B_input%7D%20%7C%20%24%7B_r2%3A.3f%7D%24%20%7C%20%24%7B_r3%3A.3f%7D%24%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20f%22%7C%20%24%7B_r1%20*%20_r2%20*%20_r3%3A.4f%7D%24%20%7C%22%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20_table%20%3D%20%22%5Cn%22.join(_rows)%0A%0A%20%20%20%20%23%20The%20forward-pass%20diagram%20again%2C%20with%20w_EG%20and%20w_FG%20drawn%20at%20full%20strength.%0A%20%20%20%20_nodes%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%22A%22%3A%20(60%2C%2070%2C%20f%22%7Bactivations%5B'A'%5D%3A.1f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22B%22%3A%20(60%2C%20190%2C%20f%22%7Bactivations%5B'B'%5D%3A.1f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22C%20(bias)%22%3A%20(150%2C%20290%2C%20%221%22)%2C%0A%20%20%20%20%20%20%20%20%22D%22%3A%20(290%2C%2070%2C%20f%22%7Bactivations%5B'D'%5D%3A.3f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22E%22%3A%20(290%2C%20190%2C%20f%22%7Bactivations%5B'E'%5D%3A.3f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22F%20(bias)%22%3A%20(390%2C%20290%2C%20%221%22)%2C%0A%20%20%20%20%20%20%20%20%22G%22%3A%20(460%2C%20130%2C%20f%22%7Bactivations%5B'G'%5D%3A.3f%7D%22)%2C%0A%20%20%20%20%7D%0A%20%20%20%20_edges%20%3D%20%5B%0A%20%20%20%20%20%20%20%20(%22A%22%2C%20%22D%22%2C%20weights%5B%22AD%22%5D%2C%200.5%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22A%22%2C%20%22E%22%2C%20weights%5B%22AE%22%5D%2C%200.2%2C%20-1)%2C%0A%20%20%20%20%20%20%20%20(%22B%22%2C%20%22D%22%2C%20weights%5B%22BD%22%5D%2C%200.2%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22B%22%2C%20%22E%22%2C%20weights%5B%22BE%22%5D%2C%200.5%2C%20-1)%2C%0A%20%20%20%20%20%20%20%20(%22C%20(bias)%22%2C%20%22D%22%2C%20weights%5B%22CD%22%5D%2C%200.35%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22C%20(bias)%22%2C%20%22E%22%2C%20weights%5B%22CE%22%5D%2C%200.5%2C%20-1)%2C%0A%20%20%20%20%20%20%20%20(%22D%22%2C%20%22G%22%2C%20weights%5B%22DG%22%5D%2C%200.5%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22E%22%2C%20%22G%22%2C%20weights%5B%22EG%22%5D%2C%200.5%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22F%20(bias)%22%2C%20%22G%22%2C%20weights%5B%22FG%22%5D%2C%200.5%2C%20-1)%2C%0A%20%20%20%20%5D%0A%0A%20%20%20%20mo.vstack(%5B%0A%20%20%20%20%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20%23%23%23%20The%20other%20two%20weights%0A%0A%20%20%20%20%24w_%7BEG%7D%24%20and%20%24w_%7BFG%7D%24%20travel%20along%20the%20same%20path.%20Steps%202%20and%203%20are%20about%20node%20%24G%24%2C%20not%20about%20the%20weight%2C%20so%20**their%20rates%20are%20identical**.%20Only%20rate%201%20changes%3A%20it's%20the%20activation%20of%20the%20node%20the%20weight%20comes%20from.%0A%20%20%20%20%22%22%22)%2C%0A%20%20%20%20%20%20%20%20network_svg(_nodes%2C%20_edges%2C%20target%3Dtarget%2C%20highlight%3D%7B%22EG%22%2C%20%22FG%22%7D)%2C%0A%20%20%20%20%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20rf%22%22%22%0A%20%20%20%20%7C%20Weight%20%7C%20Rate%201%20(input%20activation)%20%7C%20Rate%202%20%7C%20Rate%203%20%7C%20Slope%20%24%5Cfrac%7B%7B%5Cpartial%20L%7D%7D%7B%7B%5Cpartial%20w%7D%7D%24%20%7C%0A%20%20%20%20%7C---%7C---%7C---%7C---%7C---%7C%0A%20%20%20%20%22%22%22%0A%20%20%20%20%20%20%20%20%2B%20_table%0A%20%20%20%20%20%20%20%20%2B%20rf%22%22%22%0A%0A%20%20%20%20Because%20rates%202%20and%203%20are%20shared%2C%20it's%20handy%20to%20give%20their%20product%20a%20name.%20With%20the%20sign%20flipped%2C%20it's%20called%20the%20**error%20signal**%20of%20node%20%24G%24%2C%20written%20%24%5Cdelta_G%24%20(delta)%3A%0A%0A%20%20%20%20%24%24%0A%20%20%20%20%5Cdelta_G%20%3D%20(t%20-%20y_G)%5C%2Cy_G(1%20-%20y_G)%0A%20%20%20%20%24%24%0A%20%20%20%20%22%22%22%0A%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%5D)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20%23%20Quiz%3A%20the%20sign%20of%20%CE%B4_G%20(value%20updates%20on%20%22Check%22).%0A%20%20%20%20delta_g_quiz%20%3D%20mo.ui.radio(%0A%20%20%20%20%20%20%20%20options%3D%5B%22Positive%22%2C%20%22Negative%22%2C%20%22Zero%22%5D%2C%0A%20%20%20%20%20%20%20%20label%3D(%0A%20%20%20%20%20%20%20%20%20%20%20%20r%22**Quick%20check%3A**%20our%20prediction%20is%20below%20the%20target.%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20r%22Will%20%24%5Cdelta_G%24%20be%20positive%2C%20negative%20or%20zero%3F%22%0A%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20).form(submit_button_label%3D%22Check%22%2C%20bordered%3DFalse)%0A%20%20%20%20delta_g_quiz%0A%20%20%20%20return%20(delta_g_quiz%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(activations%2C%20delta_g_quiz%2C%20mo%2C%20output_grad%2C%20target)%3A%0A%20%20%20%20_y%2C%20_t%2C%20_delta%20%3D%20activations%5B%22G%22%5D%2C%20target%2C%20output_grad%5B%22delta_G%22%5D%0A%20%20%20%20_err%2C%20_slope%20%3D%20_t%20-%20_y%2C%20_y%20*%20(1%20-%20_y)%0A%20%20%20%20_correct%20%3D%20%22Positive%22%20if%20_delta%20%3E%200%20else%20(%22Negative%22%20if%20_delta%20%3C%200%20else%20%22Zero%22)%0A%20%20%20%20_answer%20%3D%20delta_g_quiz.value%0A%0A%20%20%20%20if%20_answer%20is%20None%3A%0A%20%20%20%20%20%20%20%20_feedback%20%3D%20None%0A%20%20%20%20elif%20_answer%20%3D%3D%20_correct%3A%0A%20%20%20%20%20%20%20%20_feedback%20%3D%20mo.callout(%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f%22**Correct!**%20%24t%20-%20y_G%20%3D%20%7B_err%3A.3f%7D%24%20is%20positive%2C%20and%20%24y_G(1%20-%20y_G)%20%3D%20%7B_slope%3A.3f%7D%24%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22is%20**always**%20positive%2C%20because%20a%20sigmoid's%20output%20lies%20between%200%20and%201.%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22So%20the%20sign%20of%20%24%5C%5Cdelta_G%24%20comes%20only%20from%20the%20error%3A%20the%20prediction%20is%20too%20low%2C%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22so%20%24%5C%5Cdelta_G%20%3E%200%24%20and%20node%20%24G%24%20wants%20its%20weighted%20sum%20to%20go%20**up**.%22%0A%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20kind%3D%22success%22%2C%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20elif%20_answer%20%3D%3D%20%22Zero%22%3A%0A%20%20%20%20%20%20%20%20_feedback%20%3D%20mo.callout(%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22Not%20quite.%20%24%5C%5Cdelta_G%24%20is%20zero%20only%20when%20the%20prediction%20is%20exactly%20right%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f%22(%24t%20%3D%20y_G%24).%20Here%20%24t%20-%20y_G%20%3D%20%7B_err%3A.3f%7D%24%2C%20so%20there's%20still%20an%20error%20to%20pass%20back.%22%0A%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20kind%3D%22danger%22%2C%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20else%3A%0A%20%20%20%20%20%20%20%20_feedback%20%3D%20mo.callout(%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f%22Not%20quite.%20Check%20each%20factor's%20sign%3A%20the%20prediction%20is%20below%20the%20target%2C%20so%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f%22%24t%20-%20y_G%20%3D%20%7B_err%3A.3f%7D%24%20is%20positive.%20And%20%24y_G(1%20-%20y_G)%24%20can%20never%20be%20negative%2C%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22because%20%24y_G%24%20lies%20between%200%20and%201.%22%0A%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20kind%3D%22danger%22%2C%0A%20%20%20%20%20%20%20%20)%0A%0A%20%20%20%20_feedback%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(activations%2C%20mo%2C%20output_grad%2C%20target)%3A%0A%20%20%20%20_y%2C%20_delta%20%3D%20activations%5B%22G%22%5D%2C%20output_grad%5B%22delta_G%22%5D%0A%20%20%20%20mo.md(rf%22%22%22%0A%20%20%20%20For%20our%20network%3A%0A%0A%20%20%20%20%24%24%0A%20%20%20%20%5Cdelta_G%20%3D%20(%7Btarget%3Ag%7D%20-%20%7B_y%3A.3f%7D)%20%5Ctimes%20%7B_y%20*%20(1%20-%20_y)%3A.3f%7D%20%3D%20%7B_delta%3A.4f%7D%0A%20%20%20%20%24%24%0A%0A%20%20%20%20Then%20the%20slope%20for%20any%20of%20the%20three%20weights%20is%20simply%20%24-%5Cdelta_G%20%5Ctimes%24%20(the%20activation%20the%20weight%20comes%20from).%20You%20can%20read%20%24%5Cdelta_G%24%20as%20_%22which%20way%2C%20and%20how%20strongly%2C%20node%20%24G%24%20wants%20its%20weighted%20sum%20to%20change%22_.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(learning_rate%2C%20mo)%3A%0A%20%20%20%20mo.md(rf%22%22%22%0A%20%20%20%20%23%23%23%20Updating%20the%20weights%0A%0A%20%20%20%20Remember%20the%20update%20rule%3A%20step%20**against**%20the%20slope%2C%20scaled%20by%20the%20learning%20rate%20%24%5Cmu%24%3A%0A%0A%20%20%20%20%24%24%0A%20%20%20%20w%20%5Cleftarrow%20w%20-%20%5Cmu%20%5Ccdot%20%5Cfrac%7B%7B%5Cpartial%20L%7D%7D%7B%7B%5Cpartial%20w%7D%7D%0A%20%20%20%20%24%24%0A%0A%20%20%20%20The%20slope%20is%20%24-%5Cdelta_G%20%5Ccdot%20y_k%24%2C%20where%20%24y_k%24%20is%20the%20activation%20of%20the%20node%20the%20weight%20comes%20from.%20The%20two%20minus%20signs%20cancel%2C%20so%0A%0A%20%20%20%20%24%24%0A%20%20%20%20%5CDelta%20w_k%20%3D%20%5Cmu%20%5Ccdot%20%5Cdelta_G%20%5Ccdot%20y_k%0A%20%20%20%20%24%24%0A%0A%20%20%20%20In%20plain%20words%3A%20**each%20weight%20changes%20by%20(learning%20rate)%20%C3%97%20(node%20%24G%24's%20error%20signal)%20%C3%97%20(how%20active%20its%20input%20node%20was)**.%20A%20connection%20from%20a%20barely%20active%20node%20hardly%20changes%2C%20because%20it%20barely%20contributed%20to%20the%20mistake.%0A%0A%20%20%20%20We'll%20use%20a%20learning%20rate%20of%20%24%5Cmu%20%3D%20%7Blearning_rate%3Ag%7D%24.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(%0A%20%20%20%20activations%2C%0A%20%20%20%20forward%2C%0A%20%20%20%20inputs%2C%0A%20%20%20%20learning_rate%2C%0A%20%20%20%20mo%2C%0A%20%20%20%20network_svg%2C%0A%20%20%20%20output_grad%2C%0A%20%20%20%20target%2C%0A%20%20%20%20weights%2C%0A)%3A%0A%20%20%20%20_mu%20%3D%20learning_rate%0A%20%20%20%20_y_G%20%3D%20activations%5B%22G%22%5D%0A%20%20%20%20_delta_G%20%3D%20output_grad%5B%22delta_G%22%5D%0A%0A%20%20%20%20_new%20%3D%20dict(weights)%0A%20%20%20%20_rows%20%3D%20%5B%5D%0A%20%20%20%20for%20_k%20in%20%22DEF%22%3A%0A%20%20%20%20%20%20%20%20_name%20%3D%20f%22%7B_k%7DG%22%0A%20%20%20%20%20%20%20%20_dw%20%3D%20_mu%20*%20_delta_G%20*%20activations%5B_k%5D%0A%20%20%20%20%20%20%20%20_new%5B_name%5D%20%3D%20weights%5B_name%5D%20%2B%20_dw%0A%20%20%20%20%20%20%20%20_rows.append(%0A%20%20%20%20%20%20%20%20%20%20%20%20f%22%7C%20%24w_%7B%7B%7B_name%7D%7D%7D%24%20%7C%20%24%7Bweights%5B_name%5D%3A.4f%7D%24%20%7C%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20f%22%24%7B_mu%3Ag%7D%20%5C%5Ctimes%20%7B_delta_G%3A.4f%7D%20%5C%5Ctimes%20%7Bactivations%5B_k%5D%3A.4f%7D%20%3D%20%7B_dw%3A%2B.4f%7D%24%20%7C%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20f%22%24%7B_new%5B_name%5D%3A.4f%7D%24%20%7C%22%0A%20%20%20%20%20%20%20%20)%0A%0A%20%20%20%20_loss_before%20%3D%200.5%20*%20(target%20-%20_y_G)%20**%202%0A%20%20%20%20_y_after%20%3D%20forward(_new%2C%20inputs)%0A%20%20%20%20_y_G_after%20%3D%20_y_after%5B%22G%22%5D%0A%20%20%20%20_loss_after%20%3D%200.5%20*%20(target%20-%20_y_G_after)%20**%202%0A%0A%20%20%20%20_table%20%3D%20mo.md(%0A%20%20%20%20%20%20%20%20%22%7C%20Weight%20%7C%20Old%20%7C%20%24%5C%5CDelta%20w%20%3D%20%5C%5Cmu%20%5C%5Ccdot%20%5C%5Cdelta_G%20%5C%5Ccdot%20y_k%24%20%7C%20New%20%7C%5Cn%22%0A%20%20%20%20%20%20%20%20%22%7C---%7C---%7C---%7C---%7C%5Cn%22%20%2B%20%22%5Cn%22.join(_rows)%0A%20%20%20%20)%0A%0A%20%20%20%20_stats%20%3D%20mo.hstack(%0A%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.stat(f%22%7B_y_G%3A.4f%7D%20%E2%86%92%20%7B_y_G_after%3A.4f%7D%22%2C%20label%3D%22Prediction%20y_G%22%2C%20caption%3Df%22target%20t%20%3D%20%7Btarget%3Ag%7D%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.stat(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f%22%7B_loss_after%3A.4f%7D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%22Loss%20after%20one%20update%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20caption%3Df%22before%3A%20%7B_loss_before%3A.4f%7D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20direction%3D%22decrease%22%20if%20_loss_after%20%3C%20_loss_before%20else%20%22increase%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20target_direction%3D%22decrease%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20justify%3D%22start%22%2C%0A%20%20%20%20%20%20%20%20gap%3D2%2C%0A%20%20%20%20)%0A%0A%20%20%20%20%23%20The%20network%20after%20the%20update%3A%20new%20last-layer%20weights%20(highlighted)%20and%0A%20%20%20%20%23%20the%20activations%20recomputed%20with%20them.%20Hidden-layer%20weights%20are%20unchanged.%0A%20%20%20%20_nodes%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%22A%22%3A%20(60%2C%2070%2C%20f%22%7B_y_after%5B'A'%5D%3A.1f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22B%22%3A%20(60%2C%20190%2C%20f%22%7B_y_after%5B'B'%5D%3A.1f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22C%20(bias)%22%3A%20(150%2C%20290%2C%20%221%22)%2C%0A%20%20%20%20%20%20%20%20%22D%22%3A%20(290%2C%2070%2C%20f%22%7B_y_after%5B'D'%5D%3A.3f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22E%22%3A%20(290%2C%20190%2C%20f%22%7B_y_after%5B'E'%5D%3A.3f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22F%20(bias)%22%3A%20(390%2C%20290%2C%20%221%22)%2C%0A%20%20%20%20%20%20%20%20%22G%22%3A%20(460%2C%20130%2C%20f%22%7B_y_G_after%3A.3f%7D%22)%2C%0A%20%20%20%20%7D%0A%20%20%20%20_edges%20%3D%20%5B%0A%20%20%20%20%20%20%20%20(%22A%22%2C%20%22D%22%2C%20_new%5B%22AD%22%5D%2C%200.5%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22A%22%2C%20%22E%22%2C%20_new%5B%22AE%22%5D%2C%200.2%2C%20-1)%2C%0A%20%20%20%20%20%20%20%20(%22B%22%2C%20%22D%22%2C%20_new%5B%22BD%22%5D%2C%200.2%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22B%22%2C%20%22E%22%2C%20_new%5B%22BE%22%5D%2C%200.5%2C%20-1)%2C%0A%20%20%20%20%20%20%20%20(%22C%20(bias)%22%2C%20%22D%22%2C%20_new%5B%22CD%22%5D%2C%200.35%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22C%20(bias)%22%2C%20%22E%22%2C%20_new%5B%22CE%22%5D%2C%200.5%2C%20-1)%2C%0A%20%20%20%20%20%20%20%20(%22D%22%2C%20%22G%22%2C%20_new%5B%22DG%22%5D%2C%200.5%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22E%22%2C%20%22G%22%2C%20_new%5B%22EG%22%5D%2C%200.5%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22F%20(bias)%22%2C%20%22G%22%2C%20_new%5B%22FG%22%5D%2C%200.5%2C%20-1)%2C%0A%20%20%20%20%5D%0A%20%20%20%20_network%20%3D%20mo.vstack(%0A%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.md(%22**The%20network%20after%20one%20update**%20(updated%20weights%20highlighted)%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20network_svg(_nodes%2C%20_edges%2C%20target%3Dtarget%2C%20highlight%3D%7B%22DG%22%2C%20%22EG%22%2C%20%22FG%22%7D)%2C%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20align%3D%22center%22%2C%0A%20%20%20%20)%0A%0A%20%20%20%20mo.vstack(%5B_table%2C%20_network%2C%20_stats%5D%2C%20gap%3D1.5)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(activations%2C%20mo%2C%20target)%3A%0A%20%20%20%20_below%20%3D%20activations%5B%22G%22%5D%20%3C%20target%0A%20%20%20%20_by_input%20%3D%20sorted(%22DEF%22%2C%20key%3Dlambda%20k%3A%20activations%5Bk%5D)%0A%20%20%20%20_least%2C%20_most%20%3D%20_by_input%5B0%5D%2C%20_by_input%5B-1%5D%0A%20%20%20%20_name%20%3D%20%7B%22D%22%3A%20%22node%20%24D%24%22%2C%20%22E%22%3A%20%22node%20%24E%24%22%2C%20%22F%22%3A%20%22the%20bias%20node%20%24F%24%20(always%20%241%24)%22%7D%0A%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20f%22The%20prediction%20is%20%7B'below'%20if%20_below%20else%20'above'%7D%20the%20target%2C%20so%20%24%5C%5Cdelta_G%24%20is%20%22%0A%20%20%20%20%20%20%20%20f%22%7B'positive'%20if%20_below%20else%20'negative'%7D%20and%20every%20last-layer%20weight%20%22%0A%20%20%20%20%20%20%20%20f%22%7B'grows'%20if%20_below%20else%20'shrinks'%7D.%20This%20pushes%20%24y_G%24%20%22%0A%20%20%20%20%20%20%20%20f%22%7B'up'%20if%20_below%20else%20'down'%7D%20toward%20%24t%24.%20%22%0A%20%20%20%20%20%20%20%20f%22The%20weight%20from%20%7B_name%5B_most%5D%7D%20changes%20the%20most%2C%20and%20the%20weight%20from%20%22%0A%20%20%20%20%20%20%20%20f%22%7B_name%5B_least%5D%7D%20changes%20the%20least%2C%20because%20that%20node%20was%20the%20least%20active%20input.%22%0A%20%20%20%20%20%20%20%20%22%5Cn%5Cn%22%0A%20%20%20%20%20%20%20%20%22The%20hidden-layer%20weights%20(faded%20in%20the%20diagram)%20haven't%20changed%20yet.%20%22%0A%20%20%20%20%20%20%20%20%22Updating%20them%20follows%20the%20same%20idea%2C%20just%20with%20a%20longer%20chain.%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20%23%23%20Updating%20Hidden%20Layers%0A%0A%20%20%20%20For%20the%20output%20node%2C%20we%20knew%20exactly%20what%20it%20_should_%20have%20produced%3A%20the%20target%20%24t%24.%20For%20a%20hidden%20node%20like%20%24D%24%20there%20is%20no%20target.%20Nobody%20tells%20us%20what%20%24D%24%20should%20have%20output.%0A%0A%20%20%20%20But%20we%20don't%20actually%20need%20one.%20We%20know%20how%20%24D%24%20affects%20the%20loss%3A%20**through%20%24G%24**.%20So%20we%20can%20do%20the%20same%20thing%20as%20before%20and%20follow%20the%20chain%2C%20it's%20just%20a%20bit%20longer.%0A%0A%20%20%20%20Let's%20follow%20the%20weight%20%24w_%7BAD%7D%24%20(from%20input%20%24A%24%20to%20hidden%20node%20%24D%24)%3A%0A%0A%20%20%20%201.%20%24w_%7BAD%7D%24%20changes%20the%20weighted%20sum%20%24x_D%24.%20**Rate%3A%20%24y_A%24**%2C%20the%20input%20it%20multiplies%20(same%20idea%20as%20step%201%20before).%0A%20%20%20%202.%20%24x_D%24%20changes%20%24D%24's%20output%20%24y_D%20%3D%20%5Csigma(x_D)%24.%20**Rate%3A%20%24y_D(1-y_D)%24**%2C%20the%20sigmoid's%20steepness%20at%20%24D%24%20(same%20idea%20as%20step%202%20before).%0A%20%20%20%203.%20%24y_D%24%20changes%20%24G%24's%20weighted%20sum%20%24x_G%24.%20**Rate%3A%20%24w_%7BDG%7D%24**.%20This%20one%20is%20new%3A%20%24D%24's%20output%20enters%20%24x_G%24%20multiplied%20by%20%24w_%7BDG%7D%24.%0A%20%20%20%204.%20%24x_G%24%20changes%20the%20loss%20%24L%24.%20We've%20already%20done%20this%20part!%20It's%20rate%202%20%C3%97%20rate%203%20from%20the%20final%20layer%2C%20which%20is%20%24-%5Cdelta_G%24.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(activations%2C%20output_grad%2C%20weights)%3A%0A%20%20%20%20%23%20Error%20signals%20for%20every%20non-input%20node.%20Hidden%20deltas%20use%20the%20weights%20from%0A%20%20%20%20%23%20the%20forward%20pass%20(the%20old%20ones)%2C%20not%20the%20freshly%20updated%20output%20weights.%0A%20%20%20%20deltas%20%3D%20%7B%22G%22%3A%20output_grad%5B%22delta_G%22%5D%7D%0A%20%20%20%20for%20_h%20in%20%22DE%22%3A%0A%20%20%20%20%20%20%20%20_y%20%3D%20activations%5B_h%5D%0A%20%20%20%20%20%20%20%20deltas%5B_h%5D%20%3D%20weights%5Bf%22%7B_h%7DG%22%5D%20*%20deltas%5B%22G%22%5D%20*%20_y%20*%20(1%20-%20_y)%0A%20%20%20%20return%20(deltas%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20hidden_nudge%20%3D%20mo.ui.slider(%0A%20%20%20%20%20%20%20%20-0.5%2C%200.5%2C%20step%3D0.01%2C%20value%3D0.1%2C%0A%20%20%20%20%20%20%20%20label%3Dr%22Nudge%20%24w_%7BAD%7D%24%20by%22%2C%20show_value%3DTrue%2C%0A%20%20%20%20)%0A%20%20%20%20hidden_nudge%0A%20%20%20%20return%20(hidden_nudge%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(%0A%20%20%20%20activations%2C%0A%20%20%20%20deltas%2C%0A%20%20%20%20forward%2C%0A%20%20%20%20hidden_nudge%2C%0A%20%20%20%20inputs%2C%0A%20%20%20%20mo%2C%0A%20%20%20%20network_svg%2C%0A%20%20%20%20target%2C%0A%20%20%20%20weights%2C%0A)%3A%0A%20%20%20%20_d%20%3D%20hidden_nudge.value%0A%20%20%20%20_yD%20%3D%20activations%5B%22D%22%5D%0A%20%20%20%20_rates%20%3D%20%5Bactivations%5B%22A%22%5D%2C%20_yD%20*%20(1%20-%20_yD)%2C%20weights%5B%22DG%22%5D%2C%20-deltas%5B%22G%22%5D%5D%0A%20%20%20%20_changes%20%3D%20%5B_d%5D%0A%20%20%20%20for%20_r%20in%20_rates%3A%0A%20%20%20%20%20%20%20%20_changes.append(_changes%5B-1%5D%20*%20_r)%0A%0A%20%20%20%20%23%20The%20real%20change%2C%20recomputing%20the%20whole%20network%20with%20the%20nudged%20weight.%0A%20%20%20%20_w_nudged%20%3D%20%7B**weights%2C%20%22AD%22%3A%20weights%5B%22AD%22%5D%20%2B%20_d%7D%0A%20%20%20%20_y_nudged%20%3D%20forward(_w_nudged%2C%20inputs)%0A%20%20%20%20_L_before%20%3D%200.5%20*%20(target%20-%20activations%5B%22G%22%5D)%20**%202%0A%20%20%20%20_y_after%20%3D%20_y_nudged%5B%22G%22%5D%0A%20%20%20%20_dL_real%20%3D%200.5%20*%20(target%20-%20_y_after)%20**%202%20-%20_L_before%0A%0A%20%20%20%20%23%20The%20whole%20network%20with%20the%20nudge's%20path%20(A%20%E2%86%92%20D%20%E2%86%92%20G)%20highlighted%3B%0A%20%20%20%20%23%20activations%20update%20live.%0A%20%20%20%20_nodes%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%22A%22%3A%20(60%2C%2070%2C%20f%22%7B_y_nudged%5B'A'%5D%3A.1f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22B%22%3A%20(60%2C%20190%2C%20f%22%7B_y_nudged%5B'B'%5D%3A.1f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22C%20(bias)%22%3A%20(150%2C%20290%2C%20%221%22)%2C%0A%20%20%20%20%20%20%20%20%22D%22%3A%20(290%2C%2070%2C%20f%22%7B_y_nudged%5B'D'%5D%3A.3f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22E%22%3A%20(290%2C%20190%2C%20f%22%7B_y_nudged%5B'E'%5D%3A.3f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22F%20(bias)%22%3A%20(390%2C%20290%2C%20%221%22)%2C%0A%20%20%20%20%20%20%20%20%22G%22%3A%20(460%2C%20130%2C%20f%22%7B_y_nudged%5B'G'%5D%3A.3f%7D%22)%2C%0A%20%20%20%20%7D%0A%20%20%20%20_edges%20%3D%20%5B%0A%20%20%20%20%20%20%20%20(%22A%22%2C%20%22D%22%2C%20_w_nudged%5B%22AD%22%5D%2C%200.5%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22A%22%2C%20%22E%22%2C%20_w_nudged%5B%22AE%22%5D%2C%200.2%2C%20-1)%2C%0A%20%20%20%20%20%20%20%20(%22B%22%2C%20%22D%22%2C%20_w_nudged%5B%22BD%22%5D%2C%200.2%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22B%22%2C%20%22E%22%2C%20_w_nudged%5B%22BE%22%5D%2C%200.5%2C%20-1)%2C%0A%20%20%20%20%20%20%20%20(%22C%20(bias)%22%2C%20%22D%22%2C%20_w_nudged%5B%22CD%22%5D%2C%200.35%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22C%20(bias)%22%2C%20%22E%22%2C%20_w_nudged%5B%22CE%22%5D%2C%200.5%2C%20-1)%2C%0A%20%20%20%20%20%20%20%20(%22D%22%2C%20%22G%22%2C%20_w_nudged%5B%22DG%22%5D%2C%200.5%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22E%22%2C%20%22G%22%2C%20_w_nudged%5B%22EG%22%5D%2C%200.5%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22F%20(bias)%22%2C%20%22G%22%2C%20_w_nudged%5B%22FG%22%5D%2C%200.5%2C%20-1)%2C%0A%20%20%20%20%5D%0A%20%20%20%20_network%20%3D%20network_svg(_nodes%2C%20_edges%2C%20target%3Dtarget%2C%20highlight%3D%7B%22AD%22%2C%20%22DG%22%7D)%0A%0A%20%20%20%20_box%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%22border%22%3A%20%221.5px%20solid%20color-mix(in%20srgb%2C%20currentColor%2030%25%2C%20transparent)%22%2C%0A%20%20%20%20%20%20%20%20%22border-radius%22%3A%20%2210px%22%2C%0A%20%20%20%20%20%20%20%20%22padding%22%3A%20%228px%2012px%22%2C%0A%20%20%20%20%20%20%20%20%22min-width%22%3A%20%2288px%22%2C%0A%20%20%20%20%7D%0A%0A%20%20%20%20def%20_node(name%2C%20change%2C%20color%3D%22inherit%22%2C%20border%3DNone)%3A%0A%20%20%20%20%20%20%20%20return%20mo.vstack(%0A%20%20%20%20%20%20%20%20%20%20%20%20%5Bmo.md(name)%2C%20mo.md(f%22**%7Bchange%3A%2B.4f%7D**%22).style(%7B%22color%22%3A%20color%7D)%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20align%3D%22center%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20gap%3D0%2C%0A%20%20%20%20%20%20%20%20).style(%7B**_box%2C%20**(%7B%22border-color%22%3A%20border%7D%20if%20border%20else%20%7B%7D)%7D)%0A%0A%20%20%20%20def%20_arrow(rate%2C%20note)%3A%0A%20%20%20%20%20%20%20%20return%20mo.vstack(%0A%20%20%20%20%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20mo.md(f%22%C3%97%20%7Brate%3A.3f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20mo.Html(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20'%3Csvg%20width%3D%2256%22%20height%3D%2212%22%20viewBox%3D%220%200%2056%2012%22%20style%3D%22display%3Ablock%3Bcolor%3Ainherit%22%3E'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20'%3Cline%20x1%3D%220%22%20y1%3D%226%22%20x2%3D%2250%22%20y2%3D%226%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%2F%3E'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20'%3Cpath%20d%3D%22M48%2C1%20L56%2C6%20L48%2C11%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%2F%3E'%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%3C%2Fsvg%3E%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20mo.md(note).style(%7B%22font-size%22%3A%20%220.8em%22%2C%20%22opacity%22%3A%20%220.7%22%7D)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20align%3D%22center%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20gap%3D0%2C%0A%20%20%20%20%20%20%20%20)%0A%0A%20%20%20%20_dL%20%3D%20_changes%5B-1%5D%0A%20%20%20%20_loss_color%20%3D%20%22%2316a34a%22%20if%20_dL%20%3C%200%20else%20(%22%23dc2626%22%20if%20_dL%20%3E%200%20else%20%22inherit%22)%0A%20%20%20%20_ripple%20%3D%20mo.hstack(%0A%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20_node(%22%24w_%7BAD%7D%24%22%2C%20_changes%5B0%5D)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20_arrow(_rates%5B0%5D%2C%20%22%24y_A%24%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20_node(%22%24x_D%24%22%2C%20_changes%5B1%5D)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20_arrow(_rates%5B1%5D%2C%20%22%24y_D(1-y_D)%24%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20_node(%22%24y_D%24%22%2C%20_changes%5B2%5D)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20_arrow(_rates%5B2%5D%2C%20%22%24w_%7BDG%7D%24%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20_node(%22%24x_G%24%22%2C%20_changes%5B3%5D)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20_arrow(_rates%5B3%5D%2C%20r%22%24-%5Cdelta_G%24%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20_node(%22%24L%24%22%2C%20_dL%2C%20color%3D_loss_color%2C%20border%3D%22%233b82f6%22)%2C%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20justify%3D%22center%22%2C%0A%20%20%20%20%20%20%20%20align%3D%22center%22%2C%0A%20%20%20%20%20%20%20%20gap%3D0.25%2C%0A%20%20%20%20%20%20%20%20wrap%3DTrue%2C%0A%20%20%20%20)%0A%20%20%20%20_check%20%3D%20mo.md(%0A%20%20%20%20%20%20%20%20f%22Recomputing%20the%20whole%20network%20with%20%24w_%7B%7BAD%7D%7D%20%3D%20%7Bweights%5B'AD'%5D%20%2B%20_d%3A.2f%7D%24%20changes%20the%20loss%20by%20%22%0A%20%20%20%20%20%20%20%20f%22**%7B_dL_real%3A%2B.5f%7D**%2C%20compared%20with%20the%20chain's%20estimate%20of%20%7B_dL%3A%2B.5f%7D.%22%0A%20%20%20%20)%0A%20%20%20%20mo.vstack(%5B_network%2C%20_ripple%2C%20_check%5D%2C%20gap%3D1)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(activations%2C%20deltas%2C%20forward%2C%20inputs%2C%20mo%2C%20target%2C%20weights)%3A%0A%20%20%20%20_yD%20%3D%20activations%5B%22D%22%5D%0A%20%20%20%20_slope%20%3D%20-deltas%5B%22D%22%5D%20*%20activations%5B%22A%22%5D%0A%20%20%20%20_slope_DG%20%3D%20-deltas%5B%22G%22%5D%20*%20activations%5B%22D%22%5D%0A%0A%0A%20%20%20%20%23%20Brute-force%20check%3A%20nudge%20w_AD%20both%20ways%20and%20re-run%20the%20whole%20network.%0A%20%20%20%20def%20_loss(w_AD)%3A%0A%20%20%20%20%20%20%20%20return%200.5%20*%20(target%20-%20forward(%7B**weights%2C%20%22AD%22%3A%20w_AD%7D%2C%20inputs)%5B%22G%22%5D)%20**%202%0A%0A%0A%20%20%20%20_h%20%3D%201e-5%0A%20%20%20%20_brute%20%3D%20(_loss(weights%5B%22AD%22%5D%20%2B%20_h)%20-%20_loss(weights%5B%22AD%22%5D%20-%20_h))%20%2F%20(2%20*%20_h)%0A%20%20%20%20_check%20%3D%20%22%E2%9C%93%22%20if%20abs(_brute%20-%20_slope)%20%3C%201e-6%20else%20%22%E2%9C%97%22%0A%20%20%20%20_ratio%20%3D%20abs(_slope_DG)%20%2F%20abs(_slope)%0A%20%20%20%20mo.md(rf%22%22%22%0A%20%20%20%20Multiplying%20the%20four%20rates%20gives%20the%20slope%3A%0A%0A%20%20%20%20%24%24%0A%20%20%20%20%5Cfrac%7B%7B%5Cpartial%20L%7D%7D%7B%7B%5Cpartial%20w_%7B%7BAD%7D%7D%7D%7D%0A%20%20%20%20%3D%20y_A%20%5Ccdot%20y_D(1-y_D)%20%5Ccdot%20w_%7B%7BDG%7D%7D%20%5Ccdot%20(-%5Cdelta_G)%0A%20%20%20%20%3D%20%7Bactivations%5B%22A%22%5D%3Ag%7D%20%5Ctimes%20%7B_yD%20*%20(1%20-%20_yD)%3A.3f%7D%20%5Ctimes%20(%7Bweights%5B%22DG%22%5D%3Ag%7D)%20%5Ctimes%20(%7B-deltas%5B%22G%22%5D%3A.4f%7D)%0A%20%20%20%20%3D%20%7B_slope%3A.4f%7D%0A%20%20%20%20%24%24%0A%0A%20%20%20%20To%20check%20it%2C%20we%20measure%20the%20slope%20by%20brute%20force%20again%3A%20nudge%20%24w_%7B%7BAD%7D%7D%24%20by%20a%20tiny%20amount%20and%20re-run%20the%20whole%20network.%0A%0A%20%20%20%20**Chain%20rule%3A**%20%24%7B_slope%3A.4f%7D%24%20%C2%B7%20**Brute%20force%3A**%20%24%7B_brute%3A.4f%7D%24%20%7B_check%7D%0A%0A%20%20%20%20This%20slope%20is%20about%20%7B_ratio%3A.0f%7D%20times%20smaller%20than%20the%20one%20for%20%24w_%7B%7BDG%7D%7D%24%20(%24%7B_slope_DG%3A.4f%7D%24).%20Each%20step%20back%20multiplies%20the%20signal%20by%20a%20sigmoid%20slope%2C%20which%20is%20at%20most%20%240.25%24%2C%20and%20by%20a%20weight.%20Here%20the%20sigmoid%20slope%20is%20%24%7B_yD%20*%20(1%20-%20_yD)%3A.3f%7D%24%20and%20%24w_%7B%7BDG%7D%7D%20%3D%20%7Bweights%5B%22DG%22%5D%3Ag%7D%24%2C%20both%20well%20below%201%20in%20size%2C%20so%20the%20signal%20shrinks%20on%20its%20way%20back.%20With%20small%20weights%20like%20ours%2C%20it%20tends%20to%20fade%20the%20further%20it%20travels%20from%20the%20output.%20In%20deep%20networks%20with%20many%20layers%2C%20this%20is%20called%20the%20_vanishing%20gradient_%20problem.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20%23%23%23%20Passing%20the%20blame%20backwards%0A%0A%20%20%20%20Look%20at%20the%20last%20three%20rates%20again%3A%20%24y_D(1-y_D)%20%5Ccdot%20w_%7BDG%7D%20%5Ccdot%20(-%5Cdelta_G)%24.%20None%20of%20them%20depend%20on%20which%20weight%20_into_%20%24D%24%20we%20picked.%20They%20only%20describe%20node%20%24D%24%20itself%20and%20where%20it%20sends%20its%20output.%20So%2C%20just%20as%20we%20did%20for%20%24G%24%2C%20we%20flip%20the%20sign%20and%20bundle%20them%20into%20**node%20%24D%24's%20error%20signal**%3A%0A%0A%20%20%20%20%24%24%0A%20%20%20%20%5Cdelta_D%20%3D%20w_%7BDG%7D%5C%2C%5Cdelta_G%20%5Ccdot%20y_D(1%20-%20y_D)%0A%20%20%20%20%24%24%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20%23%20Quiz%3A%20the%20sign%20of%20%CE%B4_D%20(value%20updates%20on%20%22Check%22).%0A%20%20%20%20delta_d_quiz%20%3D%20mo.ui.radio(%0A%20%20%20%20%20%20%20%20options%3D%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22Positive%3A%20D%20should%20become%20more%20active%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22Negative%3A%20D%20should%20become%20less%20active%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22Zero%3A%20D%20isn't%20to%20blame%22%2C%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20label%3D(%0A%20%20%20%20%20%20%20%20%20%20%20%20r%22**Quick%20check%3A**%20%24%5Cdelta_G%24%20is%20positive%2C%20but%20%24w_%7BDG%7D%24%20is%20negative.%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20r%22Will%20%24%5Cdelta_D%24%20be%20positive%2C%20negative%20or%20zero%3F%22%0A%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20).form(submit_button_label%3D%22Check%22%2C%20bordered%3DFalse)%0A%20%20%20%20delta_d_quiz%0A%20%20%20%20return%20(delta_d_quiz%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(activations%2C%20delta_d_quiz%2C%20deltas%2C%20mo%2C%20weights)%3A%0A%20%20%20%20_yD%2C%20_w%2C%20_dG%2C%20_dD%20%3D%20activations%5B%22D%22%5D%2C%20weights%5B%22DG%22%5D%2C%20deltas%5B%22G%22%5D%2C%20deltas%5B%22D%22%5D%0A%20%20%20%20_correct%20%3D%20%22Positive%22%20if%20_dD%20%3E%200%20else%20(%22Negative%22%20if%20_dD%20%3C%200%20else%20%22Zero%22)%0A%20%20%20%20_answer%20%3D%20delta_d_quiz.value%0A%20%20%20%20_signs%20%3D%20(%0A%20%20%20%20%20%20%20%20f%22%24w_%7B%7BDG%7D%7D%20%3D%20%7B_w%3Ag%7D%24%20is%20negative%2C%20%24%5C%5Cdelta_G%20%3D%20%7B_dG%3A.4f%7D%24%20is%20positive%2C%20and%20%22%0A%20%20%20%20%20%20%20%20f%22%24y_D(1%20-%20y_D)%20%3D%20%7B_yD%20*%20(1%20-%20_yD)%3A.3f%7D%24%20is%20always%20positive.%20%22%0A%20%20%20%20%20%20%20%20%22Negative%20%C3%97%20positive%20%C3%97%20positive%20is%20**negative**%22%0A%20%20%20%20)%0A%0A%20%20%20%20if%20_answer%20is%20None%3A%0A%20%20%20%20%20%20%20%20_feedback%20%3D%20None%0A%20%20%20%20elif%20_answer.startswith(_correct)%3A%0A%20%20%20%20%20%20%20%20_feedback%20%3D%20mo.callout(%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f%22**Correct!**%20%7B_signs%7D%3A%20%24%5C%5Cdelta_D%20%3D%20%7B_dD%3A.4f%7D%24.%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%24D%24%20feeds%20%24G%24%20through%20a%20negative%20weight%2C%20so%20the%20more%20active%20%24D%24%20is%2C%20the%20lower%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%24G%24%20goes.%20Since%20%24G%24%20needs%20to%20go%20**up**%2C%20%24D%24%20should%20become%20**less**%20active.%22%0A%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20kind%3D%22success%22%2C%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20elif%20_answer.startswith(%22Zero%22)%3A%0A%20%20%20%20%20%20%20%20_feedback%20%3D%20mo.callout(%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22Not%20quite.%20%24%5C%5Cdelta_D%24%20would%20only%20be%20zero%20if%20%24D%24%20had%20no%20influence%20on%20%24G%24%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f%22(a%20weight%20of%200)%20or%20%24G%24%20had%20no%20error.%20Here%20%24w_%7B%7BDG%7D%7D%20%3D%20%7B_w%3Ag%7D%24%20and%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f%22%24%5C%5Cdelta_G%20%3D%20%7B_dG%3A.4f%7D%24%2C%20so%20%24D%24%20shares%20part%20of%20the%20blame.%22%0A%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20kind%3D%22danger%22%2C%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20else%3A%0A%20%20%20%20%20%20%20%20_feedback%20%3D%20mo.callout(%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.md(f%22Not%20quite.%20Multiply%20the%20signs%3A%20%7B_signs%7D.%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20kind%3D%22danger%22%2C%0A%20%20%20%20%20%20%20%20)%0A%0A%20%20%20%20_feedback%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20You%20can%20read%20this%20as%20**%22how%20much%20of%20%24G%24's%20mistake%20is%20%24D%24's%20fault%22**%3A%0A%0A%20%20%20%20-%20**%24%5Cdelta_G%24**%3A%20how%20wrong%20%24G%24%20was%2C%20and%20in%20which%20direction.%0A%20%20%20%20-%20**%24%5Ctimes%5C%2C%20w_%7BDG%7D%24**%3A%20%24D%24%20is%20responsible%20in%20proportion%20to%20how%20strongly%20it's%20connected%20to%20%24G%24.%20A%20weak%20connection%20means%20little%20influence%2C%20so%20little%20blame.%20A%20negative%20weight%20flips%20the%20direction%3A%20if%20%24G%24%20needs%20to%20go%20up%2C%20%24D%24%20should%20go%20_down_.%0A%20%20%20%20-%20**%24%5Ctimes%5C%2C%20y_D(1-y_D)%24**%3A%20how%20easily%20%24D%24%20can%20change%20its%20output%20right%20now.%20If%20%24D%24's%20sigmoid%20is%20flat%2C%20pushing%20on%20it%20does%20little.%0A%0A%20%20%20%20The%20error%20signal%20travels%20**backwards**%20through%20the%20same%20weights%20the%20activations%20travelled%20forwards.%20That's%20where%20the%20name%20**backpropagation**%20comes%20from.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(activations%2C%20deltas%2C%20mo%2C%20weights)%3A%0A%20%20%20%20%23%20Backward%20pass%3A%20error%20signals%20flow%20from%20G%20back%20to%20D%20and%20E.%0A%20%20%20%20_pos%20%3D%20%7B%22D%22%3A%20(230%2C%2095)%2C%20%22E%22%3A%20(230%2C%20295)%2C%20%22G%22%3A%20(480%2C%20195)%7D%0A%20%20%20%20_r%20%3D%2042%0A%20%20%20%20_ORANGE%20%3D%20%22%23f97316%22%0A%0A%20%20%20%20def%20_color(v)%3A%0A%20%20%20%20%20%20%20%20return%20%22%232563eb%22%20if%20v%20%3E%3D%200%20else%20%22%23dc2626%22%0A%0A%20%20%20%20def%20_sub(base%2C%20s)%3A%0A%20%20%20%20%20%20%20%20return%20(%0A%20%20%20%20%20%20%20%20%20%20%20%20f'%3Ctspan%20font-style%3D%22italic%22%3E%7Bbase%7D%3C%2Ftspan%3E'%0A%20%20%20%20%20%20%20%20%20%20%20%20f'%3Ctspan%20baseline-shift%3D%22sub%22%20font-size%3D%220.75em%22%3E%7Bs%7D%3C%2Ftspan%3E'%0A%20%20%20%20%20%20%20%20)%0A%0A%20%20%20%20%23%20Fixed%20pixel%20size%20(shrinks%20on%20narrow%20screens%20via%20max-width)%2C%20so%20the%0A%20%20%20%20%23%20diagram%20never%20collapses%20inside%20a%20shrink-to-fit%20container.%0A%20%20%20%20_parts%20%3D%20%5B%0A%20%20%20%20%20%20%20%20'%3Csvg%20viewBox%3D%220%200%20580%20360%22%20width%3D%22580%22%20height%3D%22360%22%20style%3D%22max-width%3A100%25%3Bheight%3Aauto%3B'%0A%20%20%20%20%20%20%20%20'display%3Ablock%3Bmargin%3A0%20auto%3Bfont-family%3Asystem-ui%2Csans-serif%3Bcolor%3Ainherit%22%3E'%2C%0A%20%20%20%20%20%20%20%20'%3Cdefs%3E%3Cmarker%20id%3D%22bp-arrow%22%20viewBox%3D%220%200%2010%2010%22%20refX%3D%229%22%20refY%3D%225%22%20'%0A%20%20%20%20%20%20%20%20'markerUnits%3D%22userSpaceOnUse%22%20markerWidth%3D%2214%22%20markerHeight%3D%2214%22%20orient%3D%22auto-start-reverse%22%3E'%0A%20%20%20%20%20%20%20%20f'%3Cpath%20d%3D%22M0%2C0%20L10%2C5%20L0%2C10%20z%22%20fill%3D%22%7B_ORANGE%7D%22%2F%3E%3C%2Fmarker%3E%3C%2Fdefs%3E'%2C%0A%20%20%20%20%20%20%20%20f'%3Ctext%20x%3D%22290%22%20y%3D%2222%22%20font-size%3D%2216%22%20font-weight%3D%22600%22%20text-anchor%3D%22middle%22%20fill%3D%22%7B_ORANGE%7D%22%3E'%0A%20%20%20%20%20%20%20%20%22%E2%97%80%20error%20signals%20flow%20backwards%3C%2Ftext%3E%22%2C%0A%20%20%20%20%5D%0A%20%20%20%20_gx%2C%20_gy%20%3D%20_pos%5B%22G%22%5D%0A%20%20%20%20for%20_h%20in%20%22DE%22%3A%0A%20%20%20%20%20%20%20%20_hx%2C%20_hy%20%3D%20_pos%5B_h%5D%0A%20%20%20%20%20%20%20%20_dx%2C%20_dy%20%3D%20_hx%20-%20_gx%2C%20_hy%20-%20_gy%0A%20%20%20%20%20%20%20%20_len%20%3D%20(_dx**2%20%2B%20_dy**2)%20**%200.5%0A%20%20%20%20%20%20%20%20_ux%2C%20_uy%20%3D%20_dx%20%2F%20_len%2C%20_dy%20%2F%20_len%0A%20%20%20%20%20%20%20%20_sx%2C%20_sy%20%3D%20_gx%20%2B%20_ux%20*%20_r%2C%20_gy%20%2B%20_uy%20*%20_r%0A%20%20%20%20%20%20%20%20_ex%2C%20_ey%20%3D%20_hx%20-%20_ux%20*%20(_r%20%2B%203)%2C%20_hy%20-%20_uy%20*%20(_r%20%2B%203)%0A%20%20%20%20%20%20%20%20_parts.append(%0A%20%20%20%20%20%20%20%20%20%20%20%20f'%3Cline%20x1%3D%22%7B_sx%3A.1f%7D%22%20y1%3D%22%7B_sy%3A.1f%7D%22%20x2%3D%22%7B_ex%3A.1f%7D%22%20y2%3D%22%7B_ey%3A.1f%7D%22%20'%0A%20%20%20%20%20%20%20%20%20%20%20%20f'stroke%3D%22%7B_ORANGE%7D%22%20stroke-width%3D%223%22%20stroke-dasharray%3D%228%205%22%20marker-end%3D%22url(%23bp-arrow)%22%2F%3E'%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20%23%20label%20sits%20beside%20the%20arrow%3A%20above%20it%20for%20D%2C%20below%20it%20for%20E%0A%20%20%20%20%20%20%20%20_side%20%3D%20-1%20if%20_h%20%3D%3D%20%22D%22%20else%201%0A%20%20%20%20%20%20%20%20_nx%2C%20_ny%20%3D%20-_uy%2C%20_ux%0A%20%20%20%20%20%20%20%20if%20_ny%20*%20_side%20%3C%200%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20_nx%2C%20_ny%20%3D%20-_nx%2C%20-_ny%0A%20%20%20%20%20%20%20%20_mx%20%3D%20(_sx%20%2B%20_ex)%20%2F%202%20%2B%20_nx%20*%2030%0A%20%20%20%20%20%20%20%20_my%20%3D%20(_sy%20%2B%20_ey)%20%2F%202%20%2B%20_ny%20*%2030%20%2B%206%0A%20%20%20%20%20%20%20%20_w%20%3D%20weights%5Bf%22%7B_h%7DG%22%5D%0A%20%20%20%20%20%20%20%20_parts.append(%0A%20%20%20%20%20%20%20%20%20%20%20%20f'%3Ctext%20x%3D%22%7B_mx%3A.1f%7D%22%20y%3D%22%7B_my%3A.1f%7D%22%20font-size%3D%2216%22%20text-anchor%3D%22middle%22%20'%0A%20%20%20%20%20%20%20%20%20%20%20%20f'fill%3D%22currentColor%22%3E%C3%97%20%7B_sub(%22w%22%2C%20_h%20%2B%20%22G%22)%7D%20%3D%20%7B_w%3Ag%7D%3C%2Ftext%3E'%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20%20%20%20%20%23%20sigmoid%20steepness%2C%20written%20to%20the%20left%20of%20the%20hidden%20node%0A%20%20%20%20%20%20%20%20_yh%20%3D%20activations%5B_h%5D%0A%20%20%20%20%20%20%20%20_parts.append(%0A%20%20%20%20%20%20%20%20%20%20%20%20f'%3Ctext%20x%3D%22%7B_hx%20-%20_r%20-%2012%7D%22%20y%3D%22%7B_hy%20%2B%206%7D%22%20font-size%3D%2216%22%20text-anchor%3D%22end%22%20'%0A%20%20%20%20%20%20%20%20%20%20%20%20f'fill%3D%22currentColor%22%3E%C3%97%20%7B_sub(%22y%22%2C%20_h)%7D(1%E2%88%92%7B_sub(%22y%22%2C%20_h)%7D)%20%3D%20%7B_yh%20*%20(1%20-%20_yh)%3A.3f%7D%3C%2Ftext%3E'%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20for%20_n%2C%20(_x%2C%20_y)%20in%20_pos.items()%3A%0A%20%20%20%20%20%20%20%20_d%20%3D%20deltas%5B_n%5D%0A%20%20%20%20%20%20%20%20_parts.append(%0A%20%20%20%20%20%20%20%20%20%20%20%20f'%3Ccircle%20cx%3D%22%7B_x%7D%22%20cy%3D%22%7B_y%7D%22%20r%3D%22%7B_r%7D%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%2F%3E'%0A%20%20%20%20%20%20%20%20%20%20%20%20f'%3Ctext%20x%3D%22%7B_x%7D%22%20y%3D%22%7B_y%20-%20_r%20-%2010%7D%22%20font-size%3D%2217%22%20font-weight%3D%22700%22%20text-anchor%3D%22middle%22%20'%0A%20%20%20%20%20%20%20%20%20%20%20%20f'fill%3D%22currentColor%22%3E%7B_n%7D%3C%2Ftext%3E'%0A%20%20%20%20%20%20%20%20%20%20%20%20f'%3Ctext%20x%3D%22%7B_x%7D%22%20y%3D%22%7B_y%20-%204%7D%22%20font-size%3D%2215%22%20text-anchor%3D%22middle%22%20fill%3D%22currentColor%22%20'%0A%20%20%20%20%20%20%20%20%20%20%20%20f'fill-opacity%3D%220.75%22%3E%7B_sub(%22%CE%B4%22%2C%20_n)%7D%3C%2Ftext%3E'%0A%20%20%20%20%20%20%20%20%20%20%20%20f'%3Ctext%20x%3D%22%7B_x%7D%22%20y%3D%22%7B_y%20%2B%2017%7D%22%20font-size%3D%2216%22%20font-weight%3D%22700%22%20text-anchor%3D%22middle%22%20'%0A%20%20%20%20%20%20%20%20%20%20%20%20f'fill%3D%22%7B_color(_d)%7D%22%3E%7B_d%3A%2B.4f%7D%3C%2Ftext%3E'%0A%20%20%20%20%20%20%20%20)%0A%20%20%20%20_parts.append(%22%3C%2Fsvg%3E%22)%0A%20%20%20%20mo.Html(%22%22.join(_parts))%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(deltas%2C%20mo%2C%20weights)%3A%0A%20%20%20%20_dir%20%3D%20lambda%20v%3A%20%22up%22%20if%20v%20%3E%200%20else%20%22down%22%0A%20%20%20%20mo.md(rf%22%22%22%0A%20%20%20%20In%20our%20network%2C%20%24%5Cdelta_G%20%3D%20%7Bdeltas%5B%22G%22%5D%3A.4f%7D%24%20is%20positive%3A%20%24G%24%20should%20have%20been%20higher.%20The%20two%20hidden%20nodes%20receive%20different%20messages%3A%0A%0A%20%20%20%20-%20%24w_%7B%7BDG%7D%7D%20%3D%20%7Bweights%5B%22DG%22%5D%3Ag%7D%24%2C%20so%20%24%5Cdelta_D%20%3D%20%7Bdeltas%5B%22D%22%5D%3A.4f%7D%24.%20%24D%24%20should%20push%20its%20weighted%20sum%20**%7B_dir(deltas%5B%22D%22%5D)%7D**%7B%22%20(the%20negative%20weight%20flips%20the%20direction%3A%20lower%20%24D%24%20means%20higher%20%24G%24)%22%20if%20weights%5B%22DG%22%5D%20%3C%200%20else%20%22%22%7D.%0A%20%20%20%20-%20%24w_%7B%7BEG%7D%7D%20%3D%20%7Bweights%5B%22EG%22%5D%3Ag%7D%24%2C%20so%20%24%5Cdelta_E%20%3D%20%7Bdeltas%5B%22E%22%5D%3A.4f%7D%24.%20%24E%24%20should%20push%20its%20weighted%20sum%20**%7B_dir(deltas%5B%22E%22%5D)%7D**.%0A%0A%20%20%20%20In%20our%20network%20each%20hidden%20node%20feeds%20just%20one%20node%2C%20%24G%24.%20In%20bigger%20networks%20a%20hidden%20node%20usually%20feeds%20several%20nodes%20in%20the%20next%20layer.%20It%20then%20collects%20blame%20from%20all%20of%20them%2C%20so%20we%20**add%20up**%20their%20contributions%3A%0A%0A%20%20%20%20%24%24%0A%20%20%20%20%5Cdelta_i%20%3D%20%5CBigl(%5Csum_%7B%7Bj%7D%7D%20w_%7B%7Bij%7D%7D%5C%2C%5Cdelta_j%5CBigr)%20%5Ccdot%20y_i(1%20-%20y_i)%0A%20%20%20%20%24%24%0A%0A%20%20%20%20where%20%24j%24%20runs%20over%20every%20node%20that%20%24i%24%20sends%20its%20output%20to.%20Weight%20each%20downstream%20error%20signal%20by%20its%20connection%2C%20add%20them%20up%2C%20then%20multiply%20by%20the%20node's%20own%20sigmoid%20steepness.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(learning_rate%2C%20mo)%3A%0A%20%20%20%20mo.md(rf%22%22%22%0A%20%20%20%20%23%23%23%20One%20rule%20for%20every%20weight%0A%0A%20%20%20%20Now%20every%20non-input%20node%20has%20an%20error%20signal%2C%20and%20**every%20weight%20is%20updated%20with%20the%20same%20rule**%2C%20whichever%20layer%20it's%20in%3A%0A%0A%20%20%20%20%24%24%0A%20%20%20%20%5CDelta%20w_%7B%7Bij%7D%7D%20%3D%20%5Cmu%20%5Ccdot%20%5Cdelta_j%20%5Ccdot%20y_i%0A%20%20%20%20%24%24%0A%0A%20%20%20%20In%20words%3A%20_(learning%20rate)%20%C3%97%20(error%20signal%20of%20the%20node%20the%20weight%20goes%20**into**)%20%C3%97%20(activation%20of%20the%20node%20it%20comes%20**from**)_.%20It's%20exactly%20the%20rule%20we%20used%20for%20the%20final%20layer%2C%20with%20%24%5Cdelta_G%24%20replaced%20by%20%24%5Cdelta_D%24%20or%20%24%5Cdelta_E%24.%0A%0A%20%20%20%20One%20detail%3A%20we%20compute%20**all**%20the%20error%20signals%20first%2C%20using%20the%20weights%20from%20the%20forward%20pass%2C%20and%20only%20then%20update.%20(That's%20why%20%24%5Cdelta_D%24%20above%20uses%20the%20old%20%24w_%7B%7BDG%7D%7D%24%2C%20not%20the%20updated%20one.)%0A%0A%20%20%20%20With%20%24%5Cmu%20%3D%20%7Blearning_rate%3Ag%7D%24%2C%20the%20hidden-layer%20updates%20are%3A%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(activations%2C%20deltas%2C%20learning_rate%2C%20mo%2C%20weights)%3A%0A%20%20%20%20_rows%20%3D%20%5B%5D%0A%20%20%20%20for%20_i%20in%20%22ABC%22%3A%0A%20%20%20%20%20%20%20%20for%20_j%20in%20%22DE%22%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20_name%20%3D%20f%22%7B_i%7D%7B_j%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20_y_i%20%3D%20activations%5B_i%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20_dw%20%3D%20learning_rate%20*%20deltas%5B_j%5D%20*%20_y_i%0A%20%20%20%20%20%20%20%20%20%20%20%20_src%20%3D%20%221%20%5C%5Ctext%7B%20(bias)%7D%22%20if%20_i%20%3D%3D%20%22C%22%20else%20f%22%7B_y_i%3Ag%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20_delta%20%3D%20f%22(%7Bdeltas%5B_j%5D%3A.4f%7D)%22%20if%20deltas%5B_j%5D%20%3C%200%20else%20f%22%7Bdeltas%5B_j%5D%3A.4f%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20_dw_txt%20%3D%20%220%22%20if%20_dw%20%3D%3D%200%20else%20f%22%7B_dw%3A%2B.4f%7D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20_rows.append(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f%22%7C%20%24w_%7B%7B%7B_name%7D%7D%7D%24%20%7C%20%24%7Bweights%5B_name%5D%3A.4f%7D%24%20%7C%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f%22%24%7Blearning_rate%3Ag%7D%20%5C%5Ctimes%20%7B_delta%7D%20%5C%5Ctimes%20%7B_src%7D%20%3D%20%7B_dw_txt%7D%24%20%7C%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f%22%24%7Bweights%5B_name%5D%20%2B%20_dw%3A.4f%7D%24%20%7C%22%0A%20%20%20%20%20%20%20%20%20%20%20%20)%0A%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20%22%7C%20Weight%20%7C%20Old%20%7C%20%24%5C%5CDelta%20w_%7Bij%7D%20%3D%20%5C%5Cmu%20%5C%5Ccdot%20%5C%5Cdelta_j%20%5C%5Ccdot%20y_i%24%20%7C%20New%20%7C%5Cn%22%0A%20%20%20%20%20%20%20%20%22%7C---%7C---%7C---%7C---%7C%5Cn%22%20%2B%20%22%5Cn%22.join(_rows)%0A%20%20%20%20%20%20%20%20%2B%20%22%5Cn%5CnThe%20weights%20from%20input%20%24B%24%20don't%20change%20at%20all%3A%20%24B%20%3D%200%24%2C%20so%20they%20had%20no%20influence%20on%20%22%0A%20%20%20%20%20%20%20%20%22this%20prediction.%20That's%20the%20same%20flat%20curve%20we%20saw%20for%20%24w_%7BBD%7D%24%20and%20%24w_%7BBE%7D%24%20earlier.%22%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(%0A%20%20%20%20activations%2C%0A%20%20%20%20deltas%2C%0A%20%20%20%20forward%2C%0A%20%20%20%20inputs%2C%0A%20%20%20%20learning_rate%2C%0A%20%20%20%20mo%2C%0A%20%20%20%20network_svg%2C%0A%20%20%20%20target%2C%0A%20%20%20%20weights%2C%0A)%3A%0A%20%20%20%20%23%20One%20complete%20training%20step%3A%20every%20weight%20updated%20with%20%CE%94w_ij%20%3D%20%CE%BC%20%CE%B4_j%20y_i.%0A%20%20%20%20full_update%20%3D%20%7B%0A%20%20%20%20%20%20%20%20_name%3A%20weights%5B_name%5D%20%2B%20learning_rate%20*%20deltas%5B_name%5B1%5D%5D%20*%20activations%5B_name%5B0%5D%5D%0A%20%20%20%20%20%20%20%20for%20_name%20in%20weights%0A%20%20%20%20%7D%0A%20%20%20%20_y%20%3D%20forward(full_update%2C%20inputs)%0A%20%20%20%20_loss_before%20%3D%200.5%20*%20(target%20-%20activations%5B%22G%22%5D)%20**%202%0A%20%20%20%20_loss_after%20%3D%200.5%20*%20(target%20-%20_y%5B%22G%22%5D)%20**%202%0A%0A%20%20%20%20_nodes%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%22A%22%3A%20(60%2C%2070%2C%20f%22%7B_y%5B'A'%5D%3A.1f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22B%22%3A%20(60%2C%20190%2C%20f%22%7B_y%5B'B'%5D%3A.1f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22C%20(bias)%22%3A%20(150%2C%20290%2C%20%221%22)%2C%0A%20%20%20%20%20%20%20%20%22D%22%3A%20(290%2C%2070%2C%20f%22%7B_y%5B'D'%5D%3A.3f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22E%22%3A%20(290%2C%20190%2C%20f%22%7B_y%5B'E'%5D%3A.3f%7D%22)%2C%0A%20%20%20%20%20%20%20%20%22F%20(bias)%22%3A%20(390%2C%20290%2C%20%221%22)%2C%0A%20%20%20%20%20%20%20%20%22G%22%3A%20(460%2C%20130%2C%20f%22%7B_y%5B'G'%5D%3A.3f%7D%22)%2C%0A%20%20%20%20%7D%0A%20%20%20%20_edges%20%3D%20%5B%0A%20%20%20%20%20%20%20%20(%22A%22%2C%20%22D%22%2C%20full_update%5B%22AD%22%5D%2C%200.5%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22A%22%2C%20%22E%22%2C%20full_update%5B%22AE%22%5D%2C%200.2%2C%20-1)%2C%0A%20%20%20%20%20%20%20%20(%22B%22%2C%20%22D%22%2C%20full_update%5B%22BD%22%5D%2C%200.2%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22B%22%2C%20%22E%22%2C%20full_update%5B%22BE%22%5D%2C%200.5%2C%20-1)%2C%0A%20%20%20%20%20%20%20%20(%22C%20(bias)%22%2C%20%22D%22%2C%20full_update%5B%22CD%22%5D%2C%200.35%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22C%20(bias)%22%2C%20%22E%22%2C%20full_update%5B%22CE%22%5D%2C%200.5%2C%20-1)%2C%0A%20%20%20%20%20%20%20%20(%22D%22%2C%20%22G%22%2C%20full_update%5B%22DG%22%5D%2C%200.5%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22E%22%2C%20%22G%22%2C%20full_update%5B%22EG%22%5D%2C%200.5%2C%201)%2C%0A%20%20%20%20%20%20%20%20(%22F%20(bias)%22%2C%20%22G%22%2C%20full_update%5B%22FG%22%5D%2C%200.5%2C%20-1)%2C%0A%20%20%20%20%5D%0A%20%20%20%20_stats%20%3D%20mo.hstack(%0A%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.stat(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f%22%7Bactivations%5B'G'%5D%3A.4f%7D%20%E2%86%92%20%7B_y%5B'G'%5D%3A.4f%7D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%22Prediction%20y_G%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20caption%3Df%22target%20t%20%3D%20%7Btarget%3Ag%7D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.stat(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f%22%7B_loss_after%3A.4f%7D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20label%3D%22Loss%20after%20one%20training%20step%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20caption%3Df%22before%3A%20%7B_loss_before%3A.4f%7D%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20direction%3D%22decrease%22%20if%20_loss_after%20%3C%20_loss_before%20else%20%22increase%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20target_direction%3D%22decrease%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20justify%3D%22start%22%2C%0A%20%20%20%20%20%20%20%20gap%3D2%2C%0A%20%20%20%20)%0A%20%20%20%20mo.vstack(%0A%20%20%20%20%20%20%20%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.md(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22%23%23%20The%20Result%5Cn%5Cn%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22We've%20now%20updated%20all%20nine%20weights%3A%20the%20three%20going%20into%20%24G%24%20and%20the%20six%20going%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22into%20the%20hidden%20layer.%20That%20completes%20one%20full%20training%20step.%20Let's%20run%20the%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22forward%20pass%20again%20with%20the%20new%20weights%20and%20see%20whether%20the%20prediction%20has%20%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20f%22moved%20towards%20the%20target%20%24t%20%3D%20%7Btarget%3Ag%7D%24.%22%0A%20%20%20%20%20%20%20%20%20%20%20%20)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20network_svg(_nodes%2C%20_edges%2C%20target%3Dtarget)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20_stats%2C%0A%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20gap%3D1.5%2C%0A%20%20%20%20)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20%23%23%20Recap%3A%20One%20Training%20Step%0A%0A%20%20%20%20That's%20the%20whole%20backpropagation%20algorithm.%20For%20each%20training%20example%3A%0A%0A%20%20%20%201.%20**Forward%20pass**%3A%20compute%20every%20node's%20activation%2C%20from%20the%20inputs%20to%20the%20output.%0A%20%20%20%202.%20**Output%20error%20signal**%3A%20%24%5Cdelta_G%20%3D%20(t%20-%20y_G)%5C%2Cy_G(1%20-%20y_G)%24.%0A%20%20%20%203.%20**Backward%20pass**%3A%20pass%20the%20error%20signals%20back%2C%20layer%20by%20layer%3A%20%24%5Cdelta_i%20%3D%20%5Cbigl(%5Csum_j%20w_%7Bij%7D%5C%2C%5Cdelta_j%5Cbigr)%5C%2C%20y_i(1-y_i)%24.%0A%20%20%20%204.%20**Update%20every%20weight**%3A%20%24%5CDelta%20w_%7Bij%7D%20%3D%20%5Cmu%5C%2C%5Cdelta_j%5C%2Cy_i%24.%0A%0A%20%20%20%20One%20step%20only%20nudges%20the%20prediction%20a%20little%20toward%20the%20target.%20Training%20repeats%20these%20four%20steps%20many%20times%2C%20until%20the%20loss%20is%20small.%0A%0A%20%20%20%20%2F%2F%2F%20tip%20%7C%20Try%20it%20yourself%0A%20%20%20%20In%20%5BNeural%20Network%20Training%20(Exercise)%5D(..%2Fneural-network-training-exercise%2F)%20you%20do%20a%20full%20training%20step%20by%20hand%20on%20a%20network%20you%20choose%2C%20with%20instant%20feedback%20on%20every%20answer.%0A%20%20%20%20%2F%2F%2F%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0Aif%20__name__%20%3D%3D%20%22__main__%22%3A%0A%20%20%20%20app.run()%0A