summaryrefslogtreecommitdiff
path: root/server/app/index.html
blob: 3c1b0dfdaf85feae6b830cf4c701d77fa8e96ed8 (plain)
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
151
152
153
154
155
156
157
158
159
160
161
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
  <link rel="shortcut icon" href="/static/img/favicon.ico" />
  <title>DullDream (v2 x ZkM)</title>
  <link rel="stylesheet" type="text/css" href="static/css/dullbrown-theme.css">
</head>
<body>

<header>
  <h1><a href="/"><img src="/static/img/dulldream_logo_200.png" alt="DullDream"></a></h1>
  <h2 class="subtitle">Neural network photo effect</h2>
</header>

<div class="upload_view container">
  <div class="row">
    <div id="photo_area" class="dash_border">
      <input class="hidden_input" id="user_file" type="file" accept="image/*">
      <canvas class="photo" id="user_photo_canvas" width="512" height="512"></canvas>
      <div class="center_inner">
        <label id="take_photo_btn" for="user_file" class="upload_center_btn">
          <div class='btn-lg btn'>Take Photo</div>
        </label>
        <div id="details"></div>
        <div id="progress"></div>
      </div>

      <div id="preloader_anim">
        <img src="/static/img/loader.gif">
      </div>
    </div>
  </div>

  <div id="upload_controls" class="row">
    <div class="align_center">
      <div id="restart_btn">
        <a id="restart_btn" class="btn btn-md btn-default" role="button">Change Image</a>
        <input type='file' accept="image/*">
      </div>
      <div id="dropdown_btn">
        <select id="dropdown"></select>
      </div>
      <div id="upload_btn">
        <a id="take_photo_btn" class="btn btn-md btn-important" role="button">Upload</a>
      </div>
    </div>
    <div class="align_center consent_box">
      <label>
        <input type="checkbox" id="agree" value="1" checked>
        I consent to have my dulled image displayed at ZkM.
      </label>
    </div>
  </div>

  <div id="about_btn" class="row">
    <div class="align_center">
      <a class="btn btn-sm btn-default about_button" role="button">About</a>
      <a class="btn btn-sm btn-default privacy_button" role="button">Privacy</a>
      <p class="notice">
        All images uploaded can be used for exhibition and review purposes.
      </p>
      <p class="notice">
        Currently this work is on view at <a href="http://zkm.de/en/event/2017/10/open-codes">ZKM</a>. View recent DullDreams <a href="/gallery">here</a>.
      </p>
    </div>
  </div>
</div>

<div class="about_view modal">
  <div class="inner">
    <header>
      <h1><img src="/static/img/dulldream_logo_200.png" alt="DullDream"></h1>
    </header>
    <div class='content'>
      <p>
        <b><i>DullDream™ by DullTech™</i></b> is a series of experiments appropriating neural network image recognition technology to make visual representation less interesting.
      </p>
      <p>
        Can machine learning help us desensitize? Our impactful lives are clogging up social media feeds with unique filter settings, leaving us nostalgic for a vanilla future. Can machine learning help us achieve this? Take the excitement out of our lives, prepare us for a time where we will all have to be the same, have the same values and culture? Painting a future where the Dull is no longer a dream but a nightmare?
      </p>
      <p>
        DullDream™ was developed for Transmediale 2017 - Ever Elusive by <a href="http://constantdullaart.com">Constant Dullaart</a> in collaboration with <a href="http://ahprojects.com">Adam Harvey</a>. It has generously been made possible by the Creative Industries Fund NL.
      </p>
    </div>
    <center><a class="btn btn-sm btn-default" href="/" role="button">Home</a></center>
  </div>
</div>

<div class="privacy_view modal">
  <div class="inner">
    <header>
      <h1><img src="/static/img/dulldream_logo_200.png" alt="DullDream"></h1>
    </header>
    <div class='content'>
      <h3>Privacy Notice</h3>
      <p>
        Images uploaded to this site are being used for a public art display at <a href="http://zkm.de/en/event/2017/10/open-codes">ZKM</a>
      </p>
      <p>
        If you would not like to be included, be sure to uncheck the permission box on the upload page.
      </p>
      
    </div>
    <center><a class="btn btn-sm btn-default" href="/" role="button">Home</a></center>
  </div>
</div>


<div class="result_view">
  <div class="final_result">
  </div>

  <div class="row made_with">
    Made with DullDream.xyz for ZKM OpenCodes 2017
  </div>

  <div class="row">
    <button class='btn' id="show_all_results">Detailed Analysis</button>
  </div>

  <div class="all_results">
  </div>

  <div id="share_btns" class="row">
    <a id="permalink" href="#">Permalink</a>
  </div>

  <div id="about_btn" class="row">
    <div class="align_center">
      <a href="/" class="btn btn-sm btn-default home_button" role="button">Home</a>
      <a class="btn btn-sm btn-default about_button" role="button">About</a>
      <a class="btn btn-sm btn-default privacy_button" role="button">Privacy</a>
    </div>
    
  </div>

</div>

<div id="footer">
  DullDream™ (beta) by <a href="http://constantdullaart.com">Constant Dullaart</a>.
  Made in collaboration with <a href="http://ahprojects.com">Adam Harvey</a>
</div>

</body>
<script type="text/html" id="result_template">
  <div class="row">
    <img src="{img}"><br>
    <b>{title}</b>
  </div>
</script>
<script type="text/json" id="dropdown_options">[]</script>
<script type="text/javascript" src="static/js/vendor/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="static/js/vendor/ExifReader.js"></script>
<script type="text/javascript" src="static/js/vendor/canvas-to-blob.js"></script>
<script type="text/javascript" src="static/js/vendor/prefixfree.js"></script>
<script type="text/javascript" src="static/js/util.js"></script>
<script type="text/javascript" src="static/js/upload.js"></script>
<script type="text/javascript" src="static/js/app.js"></script>
</html>