2b:null 2c:["$","title",null,{"children":"Semantic tilt-shift | THE LAOB | Observable"}] 31:T5dc,md`This notebook contains an implementation of a textual transformation I call a “semantic tilt-shift,” by analogy with [tilt-shift photography](https://en.wikipedia.org/wiki/Tilt–shift_photography). One word in the text is singled out as a “focal point,” and the words around it are “blurred” both by means of lexical replacement with semantically similar words, and their visual appearance. The goal of the piece is to experiment with ways in which a text might be presented and read as a kind of visual and semantic gestalt, like looking at a blurry photograph. Here’s how it works. After you press “Submit,” each word in the input text is associated with a [GloVe](https://nlp.stanford.edu/projects/glove/) [word vector](https://github.com/aparrish/rwet/blob/master/understanding-word-vectors.ipynb). An algorithm “blurs” those word vectors by averaging them with the vectors corresponding to the surrounding words. The degree of blurring depends both on the user-adjustable blur factor and the distance from the “center” of the tilt-shift effect. The effect of the blur is represented in several ways. First, each blurred word is replaced with several superimposed words determined to be closest in meaning to the blurred vector. (Semantic similarity is calculated using an approximate nearest neighbor search among 25,000 common English words.) Second, blurred words are rendered using the CSS \`text-shadow\` property, lending them a visually blurred appearance.`32:T4c3,output = { let style = ` .word { font-family: Helvetica, sans-serif; font-size: calc(12px + 1.5vw); position: relative; text-align: center; display: inline-block; height: 1.2em; cursor: pointer; } .variant { position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); } `; let src = ``; let vecs = calc.arraySync(); for (let i = 0; i < vecs.length; i++) { let n = 0; if (i == windowCenter) { n = 1; } else if (focusFactor == 0) { n = 1; } else { n = Math.max(2, Math.floor(focus[i])*1.5); } let nns = []; if (focusFactor == 0 || i == windowCenter) { nns = [parsed[i]]; } else { nns = cachedNNs(vecs[i], n); } let variants = nns.map((y, j) => `${y}`).join(""); let thisWord = `${variants} `; src += thisWord; } console.log("hey there", src); return html`

${src}

`; }33:[] 2f:{"id":"277e0a2110092ac6","slug":"tilt-shift","title":"Semantic tilt-shift","thumbnail":"a9dd0ba2686454c997d4ba8b5ea2e72af5efd76a71c31c12c09affef5ebed5c8","access_level":"public","create_time":"$D2021-05-14T13:44:12.883Z","update_time":"$D2021-05-15T15:04:06.879Z","view_time":null,"first_public_time":"$D2021-05-14T13:49:34.528Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"f9ad025dc321419d","login":"laob","name":"THE LAOB","avatar_url":"https://avatars-next.observableusercontent.com/66d8eb5be6d3da5d0fd897ae6a60e40cecc9e185a2f2773bfc7f1ab6c02e81b3","tier":"pro"},"version":671,"publish_version":671,"role":null,"authored":false,"authors":[{"type":"individual","id":"5c3cbd6193f712f7","login":"shadoof","name":"John Cayley","avatar_url":"https://avatars-next.observableusercontent.com/d4a045c1060f722297a6047ffa90d6cd33806f54fcaa444ac3f1882c0fd4ee4f","tier":null}],"members":[{"type":"team","id":"f9ad025dc321419d","login":"laob","name":"THE LAOB","avatar_url":"https://avatars-next.observableusercontent.com/66d8eb5be6d3da5d0fd897ae6a60e40cecc9e185a2f2773bfc7f1ab6c02e81b3","tier":"pro","role":"editor"},{"type":"individual","id":"5c3cbd6193f712f7","login":"shadoof","name":"John Cayley","avatar_url":"https://avatars-next.observableusercontent.com/d4a045c1060f722297a6047ffa90d6cd33806f54fcaa444ac3f1882c0fd4ee4f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Semantic tilt-shift","cells":[{"id":645,"value":"html`

Semantic tilt-shift

ALLISON PARRISH, MAY 2021

${LAOB} / THE WORK`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":587,"value":"md`Input text:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":392,"value":"viewof srcText = Inputs.textarea({submit: true, value: \"Like a passenger on a train, the reader can study and interpret the shifting landscape, but is not free to move the tracks in a different direction. The reader's pleasure is the pleasure of the voyeur.\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":574,"value":"md`Adjust the degree of “blur” in the tilt-shift effect:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":266,"value":"viewof focusFactor = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":578,"value":"md`Adjust the position of the tilt-shift effect’s center:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":146,"value":"viewof windowCenter = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":287,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":583,"value":"md`## Implementation details\n\nThis notebook uses [Tensorflow.js](https://www.tensorflow.org/js/) for vector math, [Mnemonist](https://yomguithereal.github.io/mnemonist/) for approximate nearest neighbors (using a K-D Tree), and [Observable Inputs](https://observablehq.com/@observablehq/inputs) for the text area widget.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":51,"value":"tf = require('@tensorflow/tfjs')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"mnemonist = require('https://bundle.run/mnemonist@0.38.3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":394,"value":"Inputs = require(\"@observablehq/inputs@0.8.0/dist/inputs.umd.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":600,"value":"md`First off, the notebook loads some pre-calculated word vectors. I’ve reduced these vectors to ten dimensions using PCA in order to speed up the approximate nearest neighbors lookup. (It’s still pretty slow though.) There's a quick filter to remove tokens that consist of punctuation only.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":542,"value":"rawVecs = (await fetch(\"https://aparrish.s3.amazonaws.com/glove6B50d-pca10d-top25k.json\")).json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"vectors = {\n let processed = new Map();\n for (let [k, v] of Object.entries(rawVecs)) {\n if (/\\w+/.test(k)) {\n processed.set(k, v);\n }\n }\n return processed;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":607,"value":"md`When the user presses submit, the following cell reads the input and splits it into words.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":430,"value":"parsed = {\n let matches = srcText.matchAll(/(\\b\\p{L}+\\b)/gu);\n let parsed = Array.from(matches).map((x, i) => x[0]);\n return parsed;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":610,"value":"md`Any tokens in the source text that aren't in the 25k common English words in the pre-calculated vector file are added to the local vector map, assigned to a random vector. This is a hamfisted attempt to solve the out-of-vocabulary problem.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":406,"value":"newVectors = {\n let newVectors = new Map(vectors);\n // add oov words as random vectors\n for (let word of parsed) {\n if (!newVectors.has(word.toLowerCase())) {\n newVectors.set(word, tf.randomNormal([10]).arraySync());\n }\n }\n return newVectors;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":613,"value":"md`The following cell builds a K-D tree from the vector map (including any newly-added random vectors for OOV tokens.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":421,"value":"tree = mnemonist.KDTree.from(newVectors.entries(), 10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":622,"value":"md`Nearest-neighbor lookups are cached, to keep the interface snappy.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":291,"value":"cacheN = {\n parsed; // clear cache when text is updated\n return new Map();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":290,"value":"function cachedNNs(vec, n=20) {\n if (!cacheN.has(vec)) {\n let vals = tree.kNearestNeighbors(8, vec);\n cacheN.set(vec, vals);\n }\n return cacheN.get(vec).slice(0, n);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":628,"value":"md`The cell below looks up the word vectors for the parsed text and uses them to form a NxM tensor, where N is the number of words in the text and M is the dimensionality of the word vectors.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"a = tf.tensor(parsed.map(x => newVectors.get(x.toLowerCase())))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":631,"value":"md`The following cells calculate the blurred word vectors. Each index in the word vector tensor is averaged with every other index, weighted both by the distance of that index from the currently “focused” index, and by the value of a Gaussian curve centered on each index.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":251,"value":"focus = { // create array of blur weights by index, based on distance from window center\n let toConcat = [];\n if (windowCenter > 0) {\n toConcat.push(tf.linspace(focusFactor, 0.35, windowCenter + 1).slice([0], [windowCenter]));\n }\n toConcat.push([0.35]);\n if (windowCenter < a.shape[0] - 1) {\n toConcat.push(\n tf.linspace(0.35, focusFactor, a.shape[0] - windowCenter + 1).slice(\n [1], [a.shape[0] - windowCenter])\n );\n }\n return tf.concat(toConcat).array()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":66,"value":"calc = { // sum together weighted average for each index\n let x = [];\n for (let i = 0; i < a.shape[0]; i++) {\n x.push(a.mul(calcMultiplier(a.shape[0], i, focus[i])).sum(0).arraySync());\n }\n return tf.tensor(x);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":214,"value":"// calculate the gaussian multipler for a given index\nfunction calcMultiplier(windowSize, mu, sigma) {\n let lower = mu * -1;\n let vals = [];\n for (let i = 0; i < windowSize; i++) {\n vals.push(normalpdf(0, sigma, i - mu));\n }\n let valsTensor = tf.tensor(vals);\n return valsTensor.div(valsTensor.sum()).expandDims().transpose();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":206,"value":"function normalpdf(mu, sigma, x) {\n return (1 / (sigma * Math.sqrt(2Math.PI))) (Math.E ** ((-1 * (x - mu)**2) / (2 * sigma ** 2)))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":642,"value":"md`The following cell rescales individual blurred “words” so that their width is an average of the widths of each variant shown. I experimented with a few different effects here, but I think this worked best!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":335,"value":"resizeDivs = {\n // resize divs\n Array.from(output.getElementsByClassName(\"word\")).forEach((elem, i) => {\n console.log(elem);\n let sizes = Array.from(elem.getElementsByClassName(\"variant\")).map(\n (elem2, j) => elem2.offsetWidth\n );\n console.log(sizes);\n let largest = Math.max(...sizes);\n let avg = sizes.reduce((a, b) => a + b) / sizes.length;\n console.log(largest, avg);\n //elem.style.width = largest + \"px\";\n elem.style.width = avg + \"px\";\n Array.from(elem.getElementsByClassName(\"variant\")).forEach((elem2, j) => {\n elem2.style.transform = `translate(-50%, 0) scale(${Math.min(\n 1.25,\n avg / elem2.offsetWidth\n )})`;\n });\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":648,"value":"import { LAOB, laob_notebook_css } from \"@laob/imports\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":650,"value":"laob_notebook_css","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"