code changs for multiple protobuf models
[face-privacy-filter.git] / web_demo / face-privacy.html
1 <html>
2 <!--
3 face-privacy.html - Demonstrate a face privacy service
4 D. Gibbon 8/1/17
5 E. Zavesky 10/17/17
6 Rewrite to utilize simple image-based processing steps.
7 -->
8 <head>
9 <title>Face Privacy Processing</title>
10 <link rel="stylesheet" type="text/css" href="face-privacy.css" />
11 <script type="text/javascript" src="protobuf/protobuf.min.js"></script>
12 <script type="text/javascript" src="jquery.js"></script>
13 <script type="text/javascript" src="face-privacy.js"></script>
14 </head>
15 <body>
16 <div class="mediaRibbon">
17     <div>
18         <video class="videoWin" id="srcVideo" width="380" height="270" muted controls>
19             <source id="mp4" src="images/commercial.mp4" type="video/mp4"></source>
20             Your browser does not support the video tag. Please use Chrome or Firefox.
21         </video>
22         <canvas id="srcImgCanvas" width="380" height="270" ></canvas>
23         <span>raw image</span>
24     </div>
25     <div>
26         <img id="destImg" width="380" height="270" />
27         <span>post-processed image</span>
28     </div>
29 </div>
30 <br />
31 <div id="resultText">
32    <div>
33     If utilized textual results would go here...
34     </div>
35 </div>
36 <hr  />
37 <div id="sourceRibbon" class="mediaRibbon">
38     <span class="tiny">Select an image for analysis or upload your own!</span><br />
39     <div>
40         <img src="images/face_reunion.jpg" />
41         <span><a href="https://flic.kr/p/bEgYbs" target="_new">flickr source</a></span>
42     </div>
43     <div>
44         <img src="images/face_family.jpg" />
45         <span><a href="https://www.pexels.com/photo/adult-affection-beautiful-beauty-265764/" target="_new">pexels source</a></span>
46     </div>
47     <div>
48         <img src="images/commercial.jpg" movie="images/commercial.mp4" />
49         <span><a href="https://www.youtube.com/watch?v=34KfCNapnUg" target="_new">youtube source</a></span>
50     </div>
51     <div>
52         <img src="images/face_Schwarzenegger.jpg" />
53         <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>
54     </div>
55     <div>
56         <label>Custom Upload</label><br/>
57         <input type="file" id="imageLoader" name="imageLoader"/>
58     </div>
59 </div>
60     <br />
61     <span class="tiny"><em>Note: These sample images are copyright of their original authors and are provided
62         only for testing and demonstration purposes, and are not authorized for sale or redistribution
63         outside of this context.</em>
64     </span>
65
66 <hr  />
67 <form action="javascript:void(0);">
68 <table class="tableConfig">
69     <tr><td><label for="serverUrl">Transform URL:</label></td>
70         <td><input type="text" name="serverUrl" id="serverUrl" size="60" />
71         <br /><span class="tiny"><em>Note: The endpoint url may be modified when a new method below is utilized.</em></span></td></tr>
72     <tr><td><label for="protoMethod">Protobuf Method:</label></td>
73         <td><select name="protoMethod" id="protoMethod" ><option value="">(disabled, not loaded)</option></select></td></tr>
74     <tr><td><label for="protoButton">Protobuf Message:</label></td>
75         <td><button type="button" name="protoInput" id="protoInput" >Download Encoded Input</button> -
76         <button type="button" name="protoOutput" id="protoOutput" >Download Encoded Response</button></td></tr>
77     <tr><td><span class="tiny"><strong>PRO TIP:</strong></span></td>
78         <td><span class="tiny">Add the query parameter <em><a href="." id="serverLink">url-image</a></em> to auto-load this URL.</span></td></tr>
79 </table>
80 </form>
81 <hr  />
82 <div>
83     Face privacy processing using <em>detected faces</em> and a subsequent processing operation.
84 <br/>
85 <br/>
86 <a href='http://www.research.att.com/projects/Video/'>Video and Multimedia Technologies Research</a>
87 </div>
88 </body>
89 </html>