-<html>\r
-<!--\r
-face-privacy.html - Demonstrate a face privacy service\r
-D. Gibbon 8/1/17\r
-E. Zavesky 10/17/17\r
-Rewrite to utilize simple image-based processing steps.\r
--->\r
-<head>\r
-<title>Face Privacy Processing</title>\r
-<link rel="stylesheet" type="text/css" href="face-privacy.css" />\r
-<script type="text/javascript" src="jquery.js"></script>\r
-<script type="text/javascript" src="face-privacy.js"></script>\r
-</head>\r
-<body>\r
-<div class="mediaRibbon">\r
- <div>\r
- <video class="videoWin" id="srcVideo" width="380" height="270" muted controls>\r
- <source id="mp4" src="images/commercial.mp4" type="video/mp4"></source>\r
- Your browser does not support the video tag. Please use Chrome.\r
- </video>\r
- <canvas id="srcImgCanvas" width="380" height="270" ></canvas>\r
- <span>raw image</span>\r
- </div>\r
- <div>\r
- <img id="destImg" width="380" height="270" />\r
- <span>post-processed image</span>\r
- </div>\r
-</div>\r
-<hr />\r
-<div id="sourceRibbon" class="mediaRibbon">\r
- <span class="tiny">Select an image for analysis or upload your own!</span><br />\r
- <div>\r
- <img src="images/face_reunion.jpg" />\r
- <span><a href="https://flic.kr/p/bEgYbs" target="_new">flickr source</a></span>\r
- </div>\r
- <div>\r
- <img src="images/commercial.jpg" movie="images/commercial.mp4" />\r
- <span><a href="https://www.youtube.com/watch?v=34KfCNapnUg" target="_new">youtube source</a></span>\r
- </div>\r
- <div>\r
- <img src="images/face_DiCaprio.jpg" />\r
- <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
- </div>\r
- <div>\r
- <img src="images/face_Schwarzenegger.jpg" />\r
- <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
- </div>\r
- <div>\r
- <label>Custom Upload</label><br/>\r
- <input type="file" id="imageLoader" name="imageLoader"/>\r
- </div>\r
-</div>\r
- <br />\r
- <span class="tiny"><em>Note: These sample images are copyright of their original authors and are provided\r
- only for testing and demonstration purposes, and are not authorized for sale or redistribution\r
- outside of this context.</em>\r
- </span>\r
-\r
-<hr />\r
-<form action="javascript:void(0);">\r
- <label for="serverUrl">Transform URL:</label><input type="text" name="serverUrl" id="serverUrl" size="60" />\r
- <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
-</form>\r
-<hr />\r
-<div>\r
- Face privacy processing using <em>detected faces</em> and a subsequent processinf operation.\r
-<br/>\r
-<br/>\r
-<a href='http://www.research.att.com/projects/Video/'>Video and Multimedia Technologies Research</a>\r
-</div>\r
-</body>\r
-</html>\r
+<html>
+<!--
+face-privacy.html - Demonstrate a face privacy service
+D. Gibbon 8/1/17
+E. Zavesky 10/17/17
+Rewrite to utilize simple image-based processing steps.
+-->
+<head>
+<title>Face Privacy Processing</title>
+<link rel="stylesheet" type="text/css" href="face-privacy.css" />
+<script type="text/javascript" src="protobuf/protobuf.min.js"></script>
+<script type="text/javascript" src="jquery.js"></script>
+<script type="text/javascript" src="face-privacy.js"></script>
+</head>
+<body>
+<div class="mediaRibbon">
+ <div>
+ <video class="videoWin" id="srcVideo" width="380" height="270" muted controls>
+ <source id="mp4" src="images/commercial.mp4" type="video/mp4"></source>
+ Your browser does not support the video tag. Please use Chrome or Firefox.
+ </video>
+ <canvas id="srcImgCanvas" width="380" height="270" ></canvas>
+ <span>raw image</span>
+ </div>
+ <div>
+ <img id="destImg" width="380" height="270" />
+ <span>post-processed image</span>
+ </div>
+</div>
+<br />
+<div id="resultText">
+ <div>
+ If utilized textual results would go here...
+ </div>
+</div>
+<hr />
+<div id="sourceRibbon" class="mediaRibbon">
+ <span class="tiny">Select an image for analysis or upload your own!</span><br />
+ <div>
+ <img src="images/face_reunion.jpg" />
+ <span><a href="https://flic.kr/p/bEgYbs" target="_new">flickr source</a></span>
+ </div>
+ <div>
+ <img src="images/face_family.jpg" />
+ <span><a href="https://www.pexels.com/photo/adult-affection-beautiful-beauty-265764/" target="_new">pexels source</a></span>
+ </div>
+ <div>
+ <img src="images/commercial.jpg" movie="images/commercial.mp4" />
+ <span><a href="https://www.youtube.com/watch?v=34KfCNapnUg" target="_new">youtube source</a></span>
+ </div>
+ <div>
+ <img src="images/face_Schwarzenegger.jpg" />
+ <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>
+ </div>
+ <div>
+ <label>Custom Upload</label><br/>
+ <input type="file" id="imageLoader" name="imageLoader"/>
+ </div>
+</div>
+ <br />
+ <span class="tiny"><em>Note: These sample images are copyright of their original authors and are provided
+ only for testing and demonstration purposes, and are not authorized for sale or redistribution
+ outside of this context.</em>
+ </span>
+
+<hr />
+<form action="javascript:void(0);">
+<table class="tableConfig">
+ <tr><td><label for="serverUrl">Transform URL:</label></td>
+ <td><input type="text" name="serverUrl" id="serverUrl" size="60" />
+ <br /><span class="tiny"><em>Note: The endpoint url may be modified when a new method below is utilized.</em></span></td></tr>
+ <tr><td><label for="protoMethod">Protobuf Method:</label></td>
+ <td><select name="protoMethod" id="protoMethod" ><option value="">(disabled, not loaded)</option></select></td></tr>
+ <tr><td><label for="protoButton">Protobuf Message:</label></td>
+ <td><button type="button" name="protoInput" id="protoInput" >Download Encoded Input</button> -
+ <button type="button" name="protoOutput" id="protoOutput" >Download Encoded Response</button></td></tr>
+ <tr><td><span class="tiny"><strong>PRO TIP:</strong></span></td>
+ <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>
+</table>
+</form>
+<hr />
+<div>
+ Face privacy processing using <em>detected faces</em> and a subsequent processing operation.
+<br/>
+<br/>
+<a href='http://www.research.att.com/projects/Video/'>Video and Multimedia Technologies Research</a>
+</div>
+</body>
+</html>
Code Review / face-privacy-filter.git / blobdiff