- minor addition to the web demo writeup
[face-privacy-filter.git] / web_demo / face-privacy.html
1 <html>\r
2 <!--\r
3 face-privacy.html - Demonstrate a face privacy service\r
4 D. Gibbon 8/1/17\r
5 E. Zavesky 10/17/17\r
6 Rewrite to utilize simple image-based processing steps.\r
7 -->\r
8 <head>\r
9 <title>Face Privacy Processing</title>\r
10 <link rel="stylesheet" type="text/css" href="face-privacy.css" />\r
11 <script type="text/javascript" src="jquery.js"></script>\r
12 <script type="text/javascript" src="face-privacy.js"></script>\r
13 </head>\r
14 <body>\r
15 <div class="mediaRibbon">\r
16     <div>\r
17         <video class="videoWin" id="srcVideo" width="380" height="270" muted controls>\r
18             <source id="mp4" src="images/commercial.mp4" type="video/mp4"></source>\r
19             Your browser does not support the video tag. Please use Chrome.\r
20         </video>\r
21         <canvas id="srcImgCanvas" width="380" height="270" ></canvas>\r
22         <span>raw image</span>\r
23     </div>\r
24     <div>\r
25         <img id="destImg" width="380" height="270" />\r
26         <span>post-processed image</span>\r
27     </div>\r
28 </div>\r
29 <hr  />\r
30 <div id="sourceRibbon" class="mediaRibbon">\r
31     <span class="tiny">Select an image for analysis or upload your own!</span><br />\r
32     <div>\r
33         <img src="images/face_reunion.jpg" />\r
34         <span><a href="https://flic.kr/p/bEgYbs" target="_new">flickr source</a></span>\r
35     </div>\r
36     <div>\r
37         <img src="images/commercial.jpg" movie="images/commercial.mp4" />\r
38         <span><a href="https://www.youtube.com/watch?v=34KfCNapnUg" target="_new">youtube source</a></span>\r
39     </div>\r
40     <div>\r
41         <img src="images/face_DiCaprio.jpg" />\r
42         <span><a href="https://en.wikipedia.org/wiki/Celebrity#/media/File:Leonardo_DiCaprio_visited_Goddard_Saturday_to_discuss_Earth_science_with_Piers_Sellers_(26105091624)_cropped.jpg" target="_new">wikipedia source</a></span>\r
43     </div>\r
44     <div>\r
45         <img src="images/face_Schwarzenegger.jpg" />\r
46         <span><a href="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/A._Schwarzenegger.jpg/220px-A._Schwarzenegger.jpg" target="_new">wikimedia source</a></span>\r
47     </div>\r
48     <div>\r
49         <label>Custom Upload</label><br/>\r
50         <input type="file" id="imageLoader" name="imageLoader"/>\r
51     </div>\r
52 </div>\r
53     <br />\r
54     <span class="tiny"><em>Note: These sample images are copyright of their original authors and are provided\r
55         only for testing and demonstration purposes, and are not authorized for sale or redistribution\r
56         outside of this context.</em>\r
57     </span>\r
58 \r
59 <hr  />\r
60 <form action="javascript:void(0);">\r
61     <label for="serverUrl">Transform URL:</label><input type="text" name="serverUrl" id="serverUrl" size="60" />\r
62     <br /><span class="tiny"><strong>PRO TIP:</strong>Add the query parameter <em><a href="." id="serverLink">url-image</a></em> to auto-load this URL.</span>\r
63 </form>\r
64 <hr  />\r
65 <div>\r
66     Face privacy processing using <em>detected faces</em> and a subsequent processinf operation.\r
67 <br/>\r
68 <br/>\r
69 <a href='http://www.research.att.com/projects/Video/'>Video and Multimedia Technologies Research</a>\r
70 </div>\r
71 </body>\r
72 </html>\r