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