micrograd: the backward pass

Source

The video is this document. The narration is the text of each Line, and a word inside it makes an object appear when it is spoken.

  <Scene id="backward" title="Backward pass" pattern="dag" slots={{title: "title", graph: "g", note: "rule"}}>
    <Beat id="forward">
      <State target="title" visible/>
      <State target="g" visible/>
      <State target="g#x.grad" visible={false}/>
      <State target="g#y.grad" visible={false}/>
      <State target="g#z.grad" visible={false}/>
      <State target="rule" visible={false}/>
      <Line id="l1">First, the <DrawIn on="g" dur={1.2}>forward pass</DrawIn> computes <CountUp on="g#z.data">z equals</CountUp> x times y.</Line>
    </Beat>
    <Beat
      id="grads"
      interactions={[
        {
          id: "drag-x",
          on: {target: "g#x.data", event: "change"},
          do: [{setParam: "x", value: {$expr: "value"}}],
          export: "ignore"
        }
      ]}
    >
      <Line id="l2" text="Then gradients flow backward, starting from dz/dz = 1.">Then gradients flow <Flow on={["g#e3", "g#e1", "g#e2"]} stagger={0.3} params={{direction: "backward"}}>backward,</Flow> starting from d z by d z <Appear on="g#z.grad">equals one.</Appear></Line>
      <Line id="l3" text="For a product, each input gets the other input as its gradient."/>
      <Stamp on={["g#x.grad", "g#y.grad"]} line="l3" word="other input" stagger={0.2}/>
      <Appear on="rule" line="l3" word="each input"/>
    </Beat>
  </Scene>