40d7e4d1186df705bb97de18b98060f7bfabd561
[face-privacy-filter.git] / web_demo / face-privacy.html
1 <html>
2 <!---
3   ===============LICENSE_START=======================================================
4   Acumos Apache-2.0
5   ===================================================================================
6   Copyright (C) 2017-2018 AT&T Intellectual Property & Tech Mahindra. All rights reserved.
7   ===================================================================================
8   This Acumos software file is distributed by AT&T and Tech Mahindra
9   under the Apache License, Version 2.0 (the "License");
10   you may not use this file except in compliance with the License.
11   You may obtain a copy of the License at
12
13   http://www.apache.org/licenses/LICENSE-2.0
14
15   This file is distributed on an "AS IS" BASIS,
16   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
17   See the License for the specific language governing permissions and
18   limitations under the License.
19   ===============LICENSE_END=========================================================
20 -->
21 <!--
22 face-privacy.html - Demonstrate a face privacy service
23 D. Gibbon 8/1/17
24 E. Zavesky 10/17/17
25 Rewrite to utilize simple image-based processing steps.
26 -->
27 <head>
28 <title>Face Privacy Processing</title>
29 <link rel="stylesheet" type="text/css" href="face-privacy.css" />
30 <script type="text/javascript" src="protobuf/protobuf.min.js"></script>
31 <script type="text/javascript" src="jquery.js"></script>
32 <script type="text/javascript" src="face-privacy.js"></script>
33 </head>
34 <body>
35 <div class="mediaRibbon">
36     <div>
37         <video class="videoWin" id="srcVideo" width="380" height="270" muted controls>
38             <source id="mp4" src="images/commercial.mp4" type="video/mp4"></source>
39             Your browser does not support the video tag. Please use Chrome or Firefox.
40         </video>
41         <canvas id="srcImgCanvas" width="380" height="270" ></canvas>
42         <span>raw image</span>
43     </div>
44     <div>
45         <img id="destImg" width="380" height="270" />
46         <span>post-processed image</span>
47     </div>
48 </div>
49 <br />
50 <div id="resultText">
51    <div>
52     If utilized textual results would go here...
53     </div>
54 </div>
55 <hr  />
56 <div id="sourceRibbon" class="mediaRibbon">
57     <span class="tiny">Select an image for analysis or upload your own!</span><br />
58     <div>
59         <img src="images/face_reunion.jpg" />
60         <span><a href="https://flic.kr/p/bEgYbs" target="_new">flickr source</a></span>
61     </div>
62     <div>
63         <img src="images/face_family.jpg" />
64         <span><a href="https://www.pexels.com/photo/adult-affection-beautiful-beauty-265764/" target="_new">pexels source</a></span>
65     </div>
66     <div>
67         <img src="images/commercial.jpg" movie="images/commercial.mp4" />
68         <span><a href="https://www.youtube.com/watch?v=34KfCNapnUg" target="_new">youtube source</a></span>
69     </div>
70     <div>
71         <img src="images/face_Schwarzenegger.jpg" />
72         <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>
73     </div>
74     <div>
75         <label>Custom Upload</label><br/>
76         <input type="file" id="imageLoader" name="imageLoader"/>
77     </div>
78 </div>
79     <br />
80     <span class="tiny"><em>Note: These sample images are copyright of their original authors and are provided
81         only for testing and demonstration purposes, and are not authorized for sale or redistribution
82         outside of this context.</em>
83     </span>
84
85 <hr  />
86 <form action="javascript:void(0);">
87 <table class="tableConfig">
88     <tr><td><label for="serverUrl">Transform URL:</label></td>
89         <td><input type="text" name="serverUrl" id="serverUrl" size="60" />
90         <br /><span class="tiny"><em>Note: The endpoint url may be modified when a new method below is utilized.</em></span></td></tr>
91     <tr><td><label for="protoMethod">Protobuf Method:</label></td>
92         <td><select name="protoMethod" id="protoMethod" ><option value="">(disabled, not loaded)</option></select></td></tr>
93     <tr><td><label for="protoButton">Protobuf Message:</label></td>
94         <td><button type="button" name="protoInput" id="protoInput" >Download Encoded Input</button> -
95         <button type="button" name="protoOutput" id="protoOutput" >Download Encoded Response</button></td></tr>
96     <tr><td><span class="tiny"><strong>PRO TIP:</strong></span></td>
97         <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>
98 </table>
99 </form>
100 <hr  />
101 <div>
102     Face privacy processing using <em>detected faces</em> and a subsequent processing operation.
103 <br/>
104 <br/>
105 <a href='http://www.research.att.com/projects/Video/'>Video and Multimedia Technologies Research</a>
106 </div>
107 </body>
108 </html>