i/o for single image, js update (CORS+generalize)
[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="face-privacy.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         <canvas id="srcImgCanvas" width="380" height="270" ></canvas>
41         <span>raw image</span>
42     </div>
43     <div>
44         <img id="destImg" width="380" height="270" crossorigin />
45         <span>post-processed image</span>
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         <img src="images/face_reunion.jpg" />
59         <span><a href="https://flic.kr/p/bEgYbs" target="_new">flickr source</a></span>
60     </div>
61     <div>
62         <img src="images/face_family.jpg" />
63         <span><a href="https://www.pexels.com/photo/adult-affection-beautiful-beauty-265764/" target="_new">pexels source</a></span>
64     </div>
65     <div>
66         <img src="images/commercial.jpg" movie="images/commercial.mp4" />
67         <span><a href="https://www.youtube.com/watch?v=34KfCNapnUg" target="_new">youtube source</a></span>
68     </div>
69     <div>
70         <img src="images/face_Schwarzenegger.jpg" />
71         <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>
72     </div>
73     <div>
74         <label>Custom Upload</label><br/>
75         <input type="file" id="imageLoader" name="imageLoader"/>
76     </div>
77 </div>
78     <br />
79     <span class="tiny"><em>Note: These sample images are copyright of their original authors and are provided
80         only for testing and demonstration purposes, and are not authorized for sale or redistribution
81         outside of this context.</em>
82     </span>
83
84 <hr  />
85 <form action="javascript:void(0);">
86 <table class="tableConfig">
87     <tr><td><label for="serverUrl">Transform URL:</label></td>
88         <td><input type="text" name="serverUrl" id="serverUrl" size="60" />
89         <br /><span class="tiny"><em>Note: The endpoint url may be modified when a new method below is utilized.</em></span></td></tr>
90     <tr><td><label for="protoMethod">Protobuf Method:</label></td>
91         <td><select name="protoMethod" id="protoMethod" ><option value="">(disabled, not loaded)</option></select></td></tr>
92     <tr><td><label for="protoButton">Protobuf Message:</label></td>
93         <td><button type="button" name="protoInput" id="protoInput" >Download Encoded Input</button> -
94         <button type="button" name="protoOutput" id="protoOutput" >Download Encoded Response</button></td></tr>
95     <tr><td><span class="tiny"><strong>PRO TIP:</strong></span></td>
96         <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>
97 </table>
98 </form>
99 <hr  />
100 <div>
101     Face privacy processing using <em>detected faces</em> and a subsequent processing operation.
102 <br/>
103 <br/>
104 <a href='http://www.research.att.com/projects/Video/'>Video and Multimedia Technologies Research</a>
105 </div>
106 <!-- move script to buttom for faster page load --->
107 <script type="text/javascript" src="jquery.js"></script>
108 <script type="text/javascript" src="protobuf/protobuf.min.js"></script>
109 <script type="text/javascript" src="jquery-ajax-native.js"></script>
110 <script type="text/javascript" src="demo-framework.js"></script>
111 <script type="text/javascript" src="face-privacy.js"></script>
112 </body>
113 </html>