|
|
<!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>La Distancia de Levenshtein lee a Cortázar</title>
|
|
|
</head>
|
|
|
<body>
|
|
|
<section class="panel panel--original-fragment">
|
|
|
<h2>Fama y eucalipto</h2>
|
|
|
<blockquote>
|
|
|
<p>
|
|
|
Un fama anda por el bosque y aunque no necesita leña mira codiciosamente los árboles. Los árboles tienen un miedo terrible porque conocen las costumbres de los famas y temen lo peor. En medio de todos está un eucalipto hermoso, y el fama al verlo da un grito de alegría y baila tregua y baila catala en torno del perturbado eucalipto, diciendo así:
|
|
|
</p>
|
|
|
<p>
|
|
|
– Hojas antisépticas, invierno con salud, gran higiene.
|
|
|
</p>
|
|
|
<p>
|
|
|
Saca un hacha y golpea al eucalipto en el estómago, sin importársele nada. El eucalipto gime, herido de muerte, y los otros árboles oyen que dice entre suspiros:
|
|
|
</p>
|
|
|
<p>
|
|
|
– Pensar que este imbécil no tenía más que comprarse unas pastillas Valda.
|
|
|
</p>
|
|
|
<footer>Historias de Cronopios y Famas de Julio Cortázar, publicada en 1962 por la Editorial Minotauro</footer>
|
|
|
</blockquote>
|
|
|
</section>
|
|
|
<section class="panel panel--new-fragment">
|
|
|
<h2>A ti</h2>
|
|
|
<p>
|
|
|
Para que La Distancia de Levenshtein pueda leer el fragmento y producir un libro único, necesitas cambiar una palabra.
|
|
|
</p>
|
|
|
<p>
|
|
|
Puedes elegir otra especie de árbol para el eucalipto, el árbol principal del fragmento. La Distancia de Levenshtein calculará entonces qué especie se encuentra en su cercanía y se reemplazará en el fragmento la palabra más genérica 'árboles' por esta nueva especie.
|
|
|
</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">La Distancia de Levenshtein está escribiendo, por favor espere un momento.</div>
|
|
|
<div class="message" data-message="error">Ocurrió un error, inténtalo de nuevo por favor.</div>
|
|
|
<button type="submit">Generar</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> |