code changs for multiple protobuf models
[face-privacy-filter.git] / web_demo / face-privacy.html
index 76de4bc..4d7f17d 100755 (executable)
@@ -1,72 +1,89 @@
-<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>