-
Notifications
You must be signed in to change notification settings - Fork 2
/
index_es.html
150 lines (141 loc) · 6.09 KB
/
index_es.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<title>Wcmm - Water color melody machine</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="description" content="Wcmm - Water color melody machine"/>
<meta name="twitter:card" value="Que el intérprete sea sensible y te genere emociones es cosa tuya, el solo quiere contar historias, te ofrece cuatro con un resultado único e irrepetible. En tus manos está escuchar cada historia de forma independiente o mezclarlas entre sí."/>
<meta property="og:title" content="Wcmm - Water color melody machine"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://wcmm.bikolabs.io//"/>
<meta property="og:image" content="http://www.ejemplo.com/imagen.jpg"/>
<meta property="og:description" content=" Wcmm - Water color melody machine"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css"/>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="mobile--notification d-flex align-items-center">
<div class="mobile--notification__wrap">
<div class="text-center">
<div class="">
<img src="/assets/images/desktop-only.png" alt="Desktop only"/>
</div>
<div class="p-5">
<p>In the desktop version you will get a better experience</p>
<div class="pt-5">
<a href="/wcmm.html">Enter</a>
</div>
</div>
</div>
</div>
</div>
<div class="section--article">
<div class="d-flex justify-content-end menu--language p-3">
<div class="p-2">
<a href="index_es.html">ES</a>
</div>
<div class="menu--language__separator d-flex align-items-center">-</div>
<div class=" p-2 active">
<a href="index.html">EN</a>
</div>
</div>
<div class="container">
<div class="">
<div class="d-flex justify-content-center">
<img src="/assets/images/wcmm.png" alt="Water color melody machine"/>
</div>
<div class="text-center title--home pb-3">
<p>Watercolor melody machine</p>
</div>
</div>
<div class="row">
<div class="col-md-8 offset-md-2 home--text">
<p>
WCMM es el resultado de un proceso creativo haciendo uso de
<strong>
Machine learning</strong>. para mostrar a una
<i>
inteligencia artificial</i>
improvisando al piano mientras pinta sobre un lienzo.
</p>
<p>
WCMM está basado
<a href="https://magenta.tensorflow.org/performance-rnn">Performance_rnn</a >
de
<a href="https://magenta.tensorflow.org/">Magenta</a>, lo que dota de cierta sensibilidad a la improvisación.
</p>
<p>
Aunque, desde luego, que consideres sensible al intérprete y te genere emociones es cosa tuya. Él solo quiere contar historias y por ello te ofrece cuatro marcos narrativos diferentes con un resultado único e irrepetible. En tus manos está el escuchar cada historia de forma independiente o mezclarlos entre sí.
</p>
<div class="home--selection py-4">
<div class="home--link text-center bg--typo pb-4">
¿Por cuál empiezas?
</div>
<div class="d-flex justify-content-center">
<div class="selection--item">
<a href="/wcmm.html#menor"><img src="assets/images/icon-moon.svg" alt="Moon"/></a>
</div>
<div class="selection--item">
<a href="/wcmm.html#mayor"><img src="assets/images/icon-sun.svg" alt="Sun"/></a>
</div>
<div class="selection--item">
<a href="/wcmm.html#oriental"><img src="assets/images/icon-mountain.svg" alt="Mountain"/></a>
</div>
<div class="selection--item">
<a href="/wcmm.html#binario"><img src="assets/images/icon-binary.svg" alt="Binary"/></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="d-flex fixed-bottom justify-content-between p-3">
<div class="home--atrib cd-flex align-items-center align-self-end">
<p class="pl-3">
All of the processing happens locally in the browser using
<a href="https://magenta.tensorflow.org" target=" _blank">Magenta.js</a >,
<a href="https://www.tensorflow.org/js/" target="_blank">TensorFlow.js</a >
and
<a href="http://p5js.org" target="_blank">P5.js</a>
</p>
<p class="pl-3 pb-1">
Created by
<a href="https://medium.com/@patxangas">karlosgliberal</a>
in
<a href="http://biko.com">Biko</a>. Code of project
<a href="https://github.com/karlosgliberal/watercolormelodymachine">
Gihub</a >
</p>
</div>
<div class="d-flex">
<div class="pr-2">
<a href="https://magenta.tensorflow.org">
<img src="/assets/images/logo-magenta.png" alt="IA Magenta"/>
</a>
</div>
<div class="align-self-center">
<a href="https://www.biko2.com/bikolabs-creatividad-pirata/">
<img src="/assets/images/logo-bikolabs.png" alt="Bikolabs"/>
</a>
</div>
</div>
</footer>
<!-- <script src="main.js"></script> -->
<script></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Custom Overlay -->
<script>
(function () {
$('.menu--action').on('click', function () {
$(this).toggleClass('open');
$('.fullscreen-page').toggleClass('open');
$('.section--article').toggleClass('open');
return $(this).toggleClass('active');
});
}.call(this));
</script>
<!-- Fin Custom Overlay -->
</body>
</html>