|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<style>
|
|
|
/* http://meyerweb.com/eric/tools/css/reset/
|
|
|
v2.0 | 20110126
|
|
|
License: none (public domain)
|
|
|
*/
|
|
|
|
|
|
html, body, div, span, applet, object, iframe,
|
|
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
|
|
a, abbr, acronym, address, big, cite, code,
|
|
|
del, dfn, em, img, ins, kbd, q, s, samp,
|
|
|
small, strike, strong, sub, sup, tt, var,
|
|
|
b, u, i, center,
|
|
|
dl, dt, dd, ol, ul, li,
|
|
|
fieldset, form, label, legend,
|
|
|
table, caption, tbody, tfoot, thead, tr, th, td,
|
|
|
article, aside, canvas, details, embed,
|
|
|
figure, figcaption, footer, header, hgroup,
|
|
|
menu, nav, output, ruby, section, summary,
|
|
|
time, mark, audio, video {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
border: 0;
|
|
|
font-size: 100%;
|
|
|
font: inherit;
|
|
|
vertical-align: baseline;
|
|
|
}
|
|
|
/* HTML5 display-role reset for older browsers */
|
|
|
article, aside, details, figcaption, figure,
|
|
|
footer, header, hgroup, menu, nav, section {
|
|
|
display: block;
|
|
|
}
|
|
|
body {
|
|
|
line-height: 1;
|
|
|
}
|
|
|
ol, ul {
|
|
|
list-style: none;
|
|
|
}
|
|
|
blockquote, q {
|
|
|
quotes: none;
|
|
|
}
|
|
|
blockquote:before, blockquote:after,
|
|
|
q:before, q:after {
|
|
|
content: '';
|
|
|
content: none;
|
|
|
}
|
|
|
table {
|
|
|
border-collapse: collapse;
|
|
|
border-spacing: 0;
|
|
|
}
|
|
|
</style>
|
|
|
<style>
|
|
|
@font-face {
|
|
|
font-family: XanhMono;
|
|
|
src: url(static/fonts/XanhMono-Regular.woff2) format('woff2'),
|
|
|
url(static/fonts/XanhMono-Regular.woff) format('woff'),
|
|
|
url(static/fonts/XanhMono-Regular.ttf) format('truetype');
|
|
|
font-weight: 400;
|
|
|
font-style: normal;
|
|
|
}
|
|
|
|
|
|
@font-face {
|
|
|
font-family: XanhMono;
|
|
|
src: url(static/fonts/XanhMono-Italic.woff2) format('woff2'),
|
|
|
url(static/fonts/XanhMono-Italic.woff) format('woff'),
|
|
|
url(static/fonts/XanhMono-Italic.ttf) format('truetype');
|
|
|
font-weight: 400;
|
|
|
font-style: italic;
|
|
|
}
|
|
|
|
|
|
:root {
|
|
|
--font-size: 13pt;
|
|
|
--line-height: 17pt;
|
|
|
--font-size-smaller: 11pt;
|
|
|
--line-height--smaller: 15pt;
|
|
|
}
|
|
|
|
|
|
body {
|
|
|
font-family: XanhMono;
|
|
|
margin: 0;
|
|
|
font-size: var(--font-size);
|
|
|
line-height: var(--line-height);
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
overflow: hidden;
|
|
|
max-height: 100vh;
|
|
|
}
|
|
|
|
|
|
h1 {
|
|
|
font-size: 24pt;
|
|
|
line-height: 29pt;
|
|
|
}
|
|
|
|
|
|
h2 {
|
|
|
font-size: 20pt;
|
|
|
line-height: 29pt;
|
|
|
}
|
|
|
|
|
|
a {
|
|
|
color: currentColor;
|
|
|
}
|
|
|
|
|
|
a:hover {
|
|
|
text-decoration: none;
|
|
|
}
|
|
|
|
|
|
blockquote {
|
|
|
font-style: italic;
|
|
|
}
|
|
|
|
|
|
p, form {
|
|
|
margin-top: var(--line-height);
|
|
|
}
|
|
|
|
|
|
footer {
|
|
|
font-style: normal;
|
|
|
margin-top: var(--line-height);
|
|
|
font-size: var(--font-size-smaller);
|
|
|
line-height: var(--line-height--smaller);
|
|
|
}
|
|
|
|
|
|
input, select, option, button {
|
|
|
font: inherit;
|
|
|
}
|
|
|
|
|
|
.panel {
|
|
|
padding: calc(2 * var(--line-height)) calc(2 * var(--line-height)) calc(2 * var(--line-height)) var(--line-height);
|
|
|
overflow: auto;
|
|
|
max-height: 100%;
|
|
|
}
|
|
|
|
|
|
.panel--original-fragment,
|
|
|
.panel--new-fragment {
|
|
|
flex: 1.5;
|
|
|
}
|
|
|
|
|
|
.panel--about {
|
|
|
flex: 1;
|
|
|
font-size: var(--font-size-smaller);
|
|
|
line-height: var(--line-height--smaller);
|
|
|
background: rgb(220, 236, 220);
|
|
|
min-height: calc(100vh - 4 * var(--line-height));
|
|
|
}
|
|
|
|
|
|
label {
|
|
|
margin-top: calc(0.25 * var(--line-height));
|
|
|
vertical-align: middle;
|
|
|
display: inline-block;
|
|
|
margin-right: 0.25em;
|
|
|
}
|
|
|
|
|
|
input[type="radio"] {
|
|
|
margin: 0 .25em 0 0;
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
|
|
|
button {
|
|
|
display: block;
|
|
|
margin-top: var(--line-height);
|
|
|
margin-bottom: var(--line-height);
|
|
|
}
|
|
|
|
|
|
#language_switcher {
|
|
|
position: fixed;
|
|
|
top: var(--line-height);
|
|
|
right: var(--line-height);
|
|
|
}
|
|
|
|
|
|
.panel--about[lang="es"] [lang="en"],
|
|
|
.panel--about[lang="en"] [lang="es"] {
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
.message {
|
|
|
display: none;
|
|
|
font-size: var(--font-size-smaller);
|
|
|
line-height: var(--line-height--smaller);
|
|
|
font-style: italic;
|
|
|
margin: var(--line-height--smaller) 0;
|
|
|
}
|
|
|
|
|
|
.message[data-active] {
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 900px) {
|
|
|
:root {
|
|
|
--font-size: 11.5pt;
|
|
|
--line-height: 14.5pt;
|
|
|
--font-size-smaller: 10pt;
|
|
|
--line-height--smaller: 13pt;
|
|
|
}
|
|
|
|
|
|
h1 {
|
|
|
font-size: 20pt;
|
|
|
line-height: 25pt;
|
|
|
}
|
|
|
|
|
|
h2 {
|
|
|
font-size: 16pt;
|
|
|
line-height: 20pt;
|
|
|
}
|
|
|
|
|
|
body {
|
|
|
flex-direction: column;
|
|
|
overflow: initial;
|
|
|
}
|
|
|
|
|
|
.panel {
|
|
|
max-height: initial;
|
|
|
min-height: initial;
|
|
|
height: initial;
|
|
|
flex: 0 0 auto;
|
|
|
overflow: initial;
|
|
|
}
|
|
|
|
|
|
.panel--about {
|
|
|
order: -1;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
</style>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Levenshtein Distancia reads Cortázar</title>
|
|
|
</head>
|
|
|
<body>
|
|
|
<section class="panel panel--original-fragment">
|
|
|
<h2>Fama and eucalyptus</h2>
|
|
|
<blockquote>
|
|
|
<p>
|
|
|
A fama is walking through a forest, and although he needs no wood he gazes greedily at the trees. The trees are terribly afraid because they are acquainted with the customs of the famas and anticipate the worst. Dead center of the wood there stands a handsome eucalyptus and the fama on seeing it gives a cry of happiness and dances respite and dances Catalan around the disturbed eucalyptus, talking like this:
|
|
|
</p>
|
|
|
<p>
|
|
|
— Antiseptic leaves, winter with health, great sanitation!
|
|
|
</p>
|
|
|
<p>
|
|
|
He fetches an axe and whacks the eucalyptus in the stomach. It doesn’t bother the fama at all. The eucalyptus screams, wounded to death, and the other trees hear him say between sighs:
|
|
|
</p>
|
|
|
<p>
|
|
|
— To think that all this imbecile had to do was buy some Valda tablets.
|
|
|
</p>
|
|
|
<footer>Cronopios and Famas by Julio Cortázar, published in 1962, English edition, 1999, New Directions Classic</footer>
|
|
|
</blockquote>
|
|
|
</section>
|
|
|
<section class="panel panel--new-fragment">
|
|
|
<h2>To you</h2>
|
|
|
<p>
|
|
|
In order for Levenshtein's Distance to read the fragment and produce a unique book, you need to change one word.
|
|
|
</p>
|
|
|
<p>
|
|
|
You can choose another tree species for the eucalyptus, the main tree in the fragment. The Levenshtein Distance will then calculate which species is in its vicinity and the more generic word 'trees' will be replaced in the fragment by this new species.
|
|
|
</p>
|
|
|
<form action="{{ BASEURL }}/generate" method="POST">
|
|
|
<!-- <select name="selected_tree"> -->
|
|
|
{% for tree in trees %}
|
|
|
<label><input type="radio" name="selected_tree" value="{{ tree }}" />{{ tree }}</label>
|
|
|
{% endfor %}
|
|
|
<!-- </select> -->
|
|
|
<div class="message" data-message="working">Levenshtein Distance is busy writing, please wait a moment.</div>
|
|
|
<div class="message" data-message="error">An error occurred, please try again.</div>
|
|
|
<button type="submit">Generate</button>
|
|
|
</form>
|
|
|
</section>
|
|
|
<section class="panel panel--about" lang="es">
|
|
|
<nav id="language_switcher">
|
|
|
<a href="#" data-target-lang="es">ES</a>
|
|
|
<a href="#" data-target-lang="en">EN</a>
|
|
|
</nav>
|
|
|
<section lang="es">
|
|
|
<h1>La Distancia de Levenshtein lee a Cortázar</h1>
|
|
|
<p>'La Distancia de Levenshtein lee a Cortázar' es el quinto capítulo de <a href = "https://www.tabakalera.eus/es/agora-cemento-codigo">ÁGORA / CEMENTO / CÓDIGO</a>, una exposición online comisariada por <a href ="https://www.tabakalera.eus/es/lekutan">Lekutan</a>, dentro del programa Komisario Berriak, proyecto apoyado por <a href = "https://www.tabakalera.eus">Tabakalera</a> en Donostia / San Sebastián. <a href = "https://www.anaisberck.be">Anaïs Berck</a> presenta aquí una primera versión de un libro en la editorial 'Editorial Algoliteraria: crear alianzas con los árboles'. En esta editorial los autores son algoritmos y los libros presentan los resultados narrativos escritos desde su punto de vista.</p>
|
|
|
<p>El autor de este libro es el algoritmo <a href ="https://es.wikipedia.org/wiki/Distancia_de_Levenshtein">La Distancia de Levenhstein</a>, el tema es el eucalipto en "Fama y eucalipto", un fragmento de <a href ="https://es.wikipedia.org/wiki/Historias_de_cronopios_y_de_famas">Historias de Cronopios y de Famas</a> de <a href ="https://es.wikipedia.org/wiki/Julio_Cort%C3%A1zar">Julio Cortázar</a>.</p>
|
|
|
<p>El tiraje del libro es por definición infinito y cada copia será única.</p>
|
|
|
<p>La distancia de Levenshtein, distancia de edición o distancia entre palabras es un algoritmo que opera en los correctores ortográficos. Es el número mínimo de operaciones requeridas para transformar una palabra en otra. Una operación puede ser una inserción, eliminación o la sustitución de un carácter. El algoritmo fue una invención del científico ruso Vladimir Levenshtein en 1965.</p>
|
|
|
</section>
|
|
|
<section lang="en">
|
|
|
<!-- Engels -->
|
|
|
<h1>Levenshtein Distance reads Cortázar</h1>
|
|
|
<p>'Levenshtein Distance reads Cortázar' is the fifth chapter of <a href = "https://www.tabakalera.eus/es/agora-cemento-codigo">ÁGORA / CEMENTO / CÓDIGO</a>, an online exhibition curated by <a href ="https://www.tabakalera.eus/es/lekutan">Lekutan</a>, within the programme of Komisario Berriak supported by <a href = "https://www.tabakalera.eus">Tabakalera</a>. <a href = "https://www.anaisberck.be">Anaïs Berck</a> presents herewith a first version of a first book of the publishing house 'Algoliterary Publishing: making kin with trees'. In this publishing house the authors are algorithms, presented with their contexts and codes; and the books present the narrative point of view of the algorithm.</p>
|
|
|
<p>The author of this book is the algorithm <a href ="https://en.wikipedia.org/wiki/Levenshtein_distance">Levenhstein Distance</a>, the subject is the eucalyptus tree in "Fama y eucalipto", an excerpt from Historias de Cronopios y de Famas by <a href ="https://en.wikipedia.org/wiki/Julio_Cort%C3%A1zar">Julio Cortázar</a>.</p>
|
|
|
<p>The printrun of the book is by definition infinite and each copy is unique.</p>
|
|
|
<p>Levenshtein distance, edit distance or word distance is an algorithm that operates in spell checkers. It is the minimum number of operations required to transform one word into another. An operation can be an insertion, deletion or substitution of a character. The algorithm was an invention of Russian scientist Vladimir Levenshtein in 1965.</p>
|
|
|
</section>
|
|
|
</section>
|
|
|
<script>
|
|
|
(function () {
|
|
|
var toggles = document.querySelectorAll('[data-target-lang]');
|
|
|
var panel = document.querySelector('.panel--about');
|
|
|
|
|
|
for (let i = 0; i < toggles.length; i++) {
|
|
|
toggles[i].addEventListener('click', function () {
|
|
|
panel.setAttribute('lang', this.dataset.targetLang)
|
|
|
});
|
|
|
}
|
|
|
})();
|
|
|
|
|
|
function getFilename (headers, fallback) {
|
|
|
if (headers.has('Content-Disposition')) {
|
|
|
header = headers.get('Content-Disposition')
|
|
|
matches = header.match(/filename="(.+)"/)
|
|
|
|
|
|
if (matches.length == 2) {
|
|
|
return matches[1]
|
|
|
}
|
|
|
}
|
|
|
|
|
|
return fallback;
|
|
|
}
|
|
|
|
|
|
(function () {
|
|
|
if (fetch) {
|
|
|
var form = document.querySelector('form'),
|
|
|
button = form.querySelector('button'),
|
|
|
messageWorking = document.querySelector('[data-message="working"]'),
|
|
|
messageError = document.querySelector('[data-message="error"]');
|
|
|
|
|
|
form.addEventListener('submit', function (e) {
|
|
|
e.preventDefault();
|
|
|
button.disabled = true;
|
|
|
delete messageError.dataset.active;
|
|
|
messageWorking.dataset.active = true;
|
|
|
const data = new FormData(form);
|
|
|
|
|
|
fetch(form.action, {
|
|
|
method: "POST",
|
|
|
body: data
|
|
|
}).then(function (r) {
|
|
|
console.log(r);
|
|
|
r.blob().then(function (blob) {
|
|
|
var filename = getFilename(r.headers, 'La distancia de Levenshtein.pdf');
|
|
|
const a = document.createElement('a');
|
|
|
a.setAttribute('href', URL.createObjectURL(blob));
|
|
|
a.setAttribute('download', filename);
|
|
|
|
|
|
if (document.createEvent) {
|
|
|
const event = document.createEvent('MouseEvents');
|
|
|
event.initEvent('click', true, true);
|
|
|
a.dispatchEvent(event);
|
|
|
}
|
|
|
else {
|
|
|
a.click();
|
|
|
}
|
|
|
delete messageWorking.dataset.active;
|
|
|
button.disabled = false;
|
|
|
});
|
|
|
}).catch(function() {
|
|
|
delete messageWorking.dataset.active;
|
|
|
messageError.dataset.active = true;
|
|
|
button.disabled = false;
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
})();
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |