25:["$","title",null,{"children":"Dreaming Fantasia | Jeremy Ashkenas | Observable"}] 4b:T44c,model = { // We have a basic sequential model, with relu activation and normal biases const model = tf.sequential(); model.add( tf.layers.dense({ units: hidden_size, inputShape: [3], activation: activation, kernelInitializer: tf.initializers.varianceScaling({ mode: "fanOut", scale: 2.5 }), biasInitializer: "zeros" }) ); // Hidden layers. for (let i = 0; i < num_layers; i++) { model.add( tf.layers.dense({ units: hidden_size, activation: activation, kernelInitializer: tf.initializers.varianceScaling({ mode: "fanOut", scale: 2.5 }), biasInitializer: "zeros" }) ); } // Final layer. model.add( tf.layers.dense({ units: 4, activation: last_layer_activation, kernelInitializer: tf.initializers.varianceScaling({ mode: "fanOut", scale: 2.5 }), biasInitializer: "zeros" }) ); model.compile({ loss: "meanSquaredError", optimizer: tf.train.adamax(0.01) }); return model; }4c:Tad9,ImagesData = { const { w, h } = size.train; class ImagesData { constructor(imgs) { this.imgs = imgs; this.width = w; this.height = h; } async load() { this.numImages = 0; this.canvases = []; for (const url of this.imgs) this.loadImageFromUrl(await fetchImage(url)); } // Get the original images (canvases or urls) getCanvases() { return this.canvases; } dispose() { this.imageData.dispose(); } // Load the images into the canvas, and then into tensors. loadImageFromUrl(image) { this.numImages++; const context = DOM.context2d(w, h, 1); context.scale(1 / scaleDownTraining, 1 / scaleDownTraining); context.drawImage(image, 0, 0); const data = context.getImageData(0, 0, w, h); this.canvases.push(data); let d = tf.fromPixels(data, 4); d = d.reshape([w * h, 4]); this.imageData = this.imageData ? this.imageData.concat(d) : d; } loadImagesFromCanvases() { this.numImages = 0; for (const canvas of this.imgs) this.loadImageFromCanvas(canvas); } // Load the images into the canvas, and then into tensors. loadImageFromCanvas(canvas) { this.numImages++; const data = canvas.getContext("2d").getImageData(0, 0, w, h); this.canvases.push(data); let d = tf.fromPixels(data, 4); d = d.reshape([w * h, 4]); this.imageData = this.imageData ? this.imageData.concat(d) : d; } // Get a collection of random indices within the image bounds. getRandIndxs(num) { return tf.tidy(() => { const imageIdxs = tf.randomUniform([num], 0, this.numImages, "int32"); const xs = tf.randomUniform([num], 0, w, "int32"); const ys = tf.randomUniform([num], 0, h, "int32"); return [imageIdxs, xs, ys]; }); } // Given a set of indices, return the corresponding pixels getPixFromIdxs(imgIdxs, xs, ys) { return tf.tidy(() => { // Determine the indices of the pixels in the 1d data array. const imgIdxOffsets = imgIdxs.mul(tf.scalar(w * h, "int32")); const imgXYs = tf.add(xs, tf.mul(ys, tf.scalar(w, "int32"))); const idxs = tf.add(imgIdxOffsets, imgXYs); let x = tf.gather(this.imageData, idxs); // Scale between 0 and 1. x = tf.cast(x, "float32"); x = x.div(tf.scalar(255)); return x; }); } makeIdxArray(w, h, idx) { const idxs = []; for (let y = 0; y < h; y++) { for (let x = 0; x < w; x++) { idxs.push((idx * 100) / this.numImages); idxs.push((x * this.width) / w); idxs.push((y * this.height) / h); } } return idxs; } } return ImagesData; }4d:[] 47:{"id":"24301953191dbbf1","slug":"dreaming-fantasia","title":"Dreaming Fantasia","thumbnail":"90616889b3f497ddd80ca6342258a4a7330097c5cdb0860d82ae575a681bb3da","access_level":"public","create_time":"$D2018-07-19T20:29:28.455Z","update_time":"$D2018-07-20T21:04:37.105Z","view_time":null,"first_public_time":"$D2018-07-20T14:24:24.200Z","has_unpublished_edits":null,"fork":{"id":"71bee67fb511958b","slug":"animation-with-cppns","title":"Animation with CPPNs","owner":{"id":"40231d5ecaf9a271","login":"emilyreif","name":"Emily Reif"}},"stars":8,"starred":false,"owner":{"type":"team","id":"172cc08ef8a18a4b","login":"jashkenas","name":"Jeremy Ashkenas","avatar_url":"https://avatars-next.observableusercontent.com/fa1903f8171d4621ef49de28e0ff1fb965960ec87df175d8b543c4b09508b45b","tier":"starter_2024","bio":"Used to work on @observablehq — still think it rocks.\n🏍 🌎 👶","followed_by_you":false,"follows_you":false},"version":6832,"publish_version":6832,"role":null,"authored":false,"authors":[{"type":"individual","id":"783616ba9fb55f5d","login":"jashkenas","name":"Jeremy Ashkenas","avatar_url":"https://avatars-next.observableusercontent.com/fa1903f8171d4621ef49de28e0ff1fb965960ec87df175d8b543c4b09508b45b","tier":null,"bio":"Used to work on @observablehq — still think it rocks.\n🏍 🌎 👶","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"783616ba9fb55f5d","login":"jashkenas","name":"Jeremy Ashkenas","avatar_url":"https://avatars-next.observableusercontent.com/fa1903f8171d4621ef49de28e0ff1fb965960ec87df175d8b543c4b09508b45b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Dreaming Fantasia","cells":[{"id":12,"value":"md`# Dreaming Fantasia\n#### *(With Convolutional Pattern Producing Neural Networks)*\n
\nChoose a sequence from [Fantasia](https://animationscreencaps.com/fantasia-1940/), then click **Train** to train the neural network on a few sample frames. The model will send \\`(x, y, time)\\` through it’s scattering of hidden nodes to try to predict the color of that pixel at that moment, in order to generate an animation. For more fun, try training again, and again, and maybe just one more time...\n\nForked from [Emily Reif’s](https://beta.observablehq.com/@emilyreif) extremely cool [Animation with CPPNs](https://beta.observablehq.com/@emilyreif/animation-with-cppns) notebook. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6087,"value":"viewof sequence = {\n const sel = select({\n title: \"Sequence\",\n value: \"blossom\",\n options: Object.keys(sequences)\n });\n sel.addEventListener(\"input\", () => {\n mutable ready = false;\n });\n return sel;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6535,"value":"controls = {\n const train = html``;\n train.onclick = () => {\n if (mutable training) return;\n train.innerHTML = \"Train more\";\n mutable ready = false;\n trainModel(imageSeqData);\n };\n return train;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6472,"value":"viewof status = {\n sequence;\n const inner = html`Untrained`;\n const wrapper = html`

Status: ${inner}

`;\n wrapper.value = inner;\n return wrapper;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6421,"value":"viewof canvas = {\n sequence;\n const { w, h } = size.draw;\n const canvas = html`