enable direct protobuf response for face models
[face-privacy-filter.git] / docs / tutorials / lesson3.md
1 # Web Demo
2 This web page sample allows the user to submit an image to
3 an image classification and image mood classification service
4 in serial progression.
5
6 ** Image Copyrights May Apply ** - the included sample videos may carry
7 additional copyrights and are not meant for public resale or consumption.
8
9 ## Browser Interaction
10 Most browsers should have no
11 CORS or other cross-domain objections to dropping the file `face-privacy.html`
12 into the browser and accesing a locally hosted server API, as configured
13 in [the previous tutorial](lesson2.md).
14
15 If you want to run the test locally, you can use the built-in python
16 webserver with the line below while working in the `web_demo` directory.
17 ```
18 python -m http.server 5000
19 ```
20
21 Afterwards, just point your browser at `http://localhost:5000/face-privacy.html`.
22
23 ## Example mood classification demo (docker and protobuf)
24 To customize this demo, one should change either the included javascript
25 or simply update the primary classification URL on the page itself during runtime.
26 This demo utilizes the [javascript protobuf library](https://github.com/dcodeIO/ProtoBuf.js/)
27 to encode parameters into proto binaries in the browser.
28
29 ** NOTE ** One version of the face model's protobuf schema is included with
30 this web page, but it may change over time.  If you receive encoding errors
31 or unexpected results, please verify that your target model and this web page
32 are using the same `.proto` file.
33
34 * confirm that your target docker instance is configured and running
35 * download this directory to your local machine
36     * confirm the host port and classification service URL in the file `face-privacy.js`
37     * modify the `protoDefault` setting to be 1
38 ```
39 urlDefault: "http://localhost:8884/transform",
40 ```
41 * view the page `face-privacy.html` in a Crome or Firefox browser
42 * you can switch between a few sample images or upload your own by clicking on the buttons below the main image window
43
44 Example web application with blur process.
45
46 * ![example web application blurring multiple faces](example_running.jpg "Example multi-face blur")
47
48 ### Special decoding example
49 In `protobuf` mode, you can also download a binary, encoded version of the last
50 image that was sent to the remote service.  When available, the <strong>Download Encoded Message</strong>
51 button will be enabled and a binary file will be generated in the browser.
52
53 ```
54 protoc --decode=sapLzHrujUMPBGCBEMWQFxEIMsxocFrG.FaceImage model.proto < protobuf.bin
55 ```
56
57
58 ## Example mood classification demo (HTTP parameters)
59 To customize this demo, one should change either the included javascript
60 or simply update the primary classification URL on the page itself during runtime.
61
62 * confirm that your local instance is configured and running
63 * download this directory to your local machine
64     * confirm the host port and classification service URL in the file `face-privacy.js`
65     * modify the `protoDefault` setting to be 0
66 ```
67 urlDefault: "http://localhost:8884/transform",
68 ```
69 * view the page `face-privacy.html` in a Crome or Firefox browser
70 * you can switch between a few sample images or upload your own by clicking on the buttons below the main image window
71
72
73 # Example Interface
74 An instance should first be built and downloaded and then
75 launched locally.  Afterwards, the sample application found in
76 [web_demo](web_demo) uses a `localhost` service to classify
77 and visualize the results of image classification.
78
79 * [Commercial example](../../web_demo/images/commercial.jpg) ([youtube source](https://www.youtube.com/watch?v=34KfCNapnUg))
80 * [Reunion face sample](../../web_demo/images/face_reunion.jpg) ([flickr source](https://flic.kr/p/bEgYbs))
81 * [family face example](../../web_demo/images/face_family.jpg) ([pexel source](https://www.pexels.com/photo/adult-affection-beautiful-beauty-265764/))
82 * [DiCaprio celebrity face sample](../../web_demo/images/face_DiCaprio.jpg) ([wikimedia source](https://en.wikipedia.org/wiki/Celebrity#/media/File:Leonardo_DiCaprio_visited_Goddard_Saturday_to_discuss_Earth_science_with_Piers_Sellers_(26105091624)_cropped.jpg))
83 * [Schwarzenegger celebrity face sample](../../web_demo/images/face_Schwarzenegger.jpg) ([wikimedia source](https://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/A._Schwarzenegger.jpg/220px-A._Schwarzenegger.jpg))
84
85
86 before  | after
87 ------- | -------
88 ![raw commercial](../../web_demo/images/commercial.jpg)  | ![pixelated commercial](../../web_demo/images/commercial_pixelate.jpg)
89 ![raw face](../../web_demo/images/face_family.jpg)  | ![pixelated commercial](../../web_demo/images/face_family_pixelate.jpg)