code changs for multiple protobuf 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 (assuming you're running python3).
18 ```
19 python -m http.server 5000
20 ```
21
22 Afterwards, just point your browser at `http://localhost:5000/face-privacy.html`.
23
24 ## Example mood classification demo (docker and protobuf)
25 To customize this demo, one should change either the included javascript
26 or simply update the primary classification URL on the page itself during runtime.
27 This demo utilizes the [javascript protobuf library](https://github.com/dcodeIO/ProtoBuf.js/)
28 to encode parameters into proto binaries in the browser.
29
30 ** NOTE ** One version of the face model's protobuf schema is included with
31 this web page, but it may change over time.  If you receive encoding errors
32 or unexpected results, please verify that your target model and this web page
33 are using the same `.proto` file.
34
35 * confirm that your target docker instance is configured and running
36 * download this directory to your local machine
37     * confirm the host port and classification service URL in the file `face-privacy.js`
38     * modify the `protoDefault` setting to be 1
39 ```
40 urlDefault: "http://localhost:8884/transform",
41 ```
42 * view the page `face-privacy.html` in a Crome or Firefox browser
43 * you can switch between a few sample images or upload your own by clicking on the buttons below the main image window
44
45 Example web application with blur process.
46
47 * ![example web application blurring multiple faces](example_running.jpg "Example multi-face blur")
48
49 ### Special decoding example
50 In `protobuf` mode, you can also download a binary, encoded version of the last
51 image that was sent to the remote service.  When available, the <strong>Download Encoded Message</strong>
52 button will be enabled and a binary file will be generated in the browser.
53
54 ```
55 protoc --decode=sapLzHrujUMPBGCBEMWQFxEIMsxocFrG.FaceImage model.pixelate.proto < protobuf.bin
56 ```
57
58 **NOTE** The specific package name may have changed since the time of writing,
59 so be sure to check the contents of the current `.proto` file.
60
61
62 ## Example mood classification demo (HTTP parameters)
63 To customize this demo, one should change either the included javascript
64 or simply update the primary classification URL on the page itself during runtime.
65
66 * confirm that your local instance is configured and running
67 * download this directory to your local machine
68     * confirm the host port and classification service URL in the file `face-privacy.js`
69     * modify the `protoDefault` setting to be 0
70 ```
71 urlDefault: "http://localhost:8884/transform",
72 ```
73 * view the page `face-privacy.html` in a Crome or Firefox browser
74 * you can switch between a few sample images or upload your own by clicking on the buttons below the main image window
75
76
77 # Example Interface
78 An instance should first be built and downloaded and then
79 launched locally.  Afterwards, the sample application found in
80 [web_demo](web_demo) uses a `localhost` service to classify
81 and visualize the results of image classification.
82
83 * [Commercial example](../../web_demo/images/commercial.jpg) ([youtube source](https://www.youtube.com/watch?v=34KfCNapnUg))
84 * [Reunion face sample](../../web_demo/images/face_reunion.jpg) ([flickr source](https://flic.kr/p/bEgYbs))
85 * [family face example](../../web_demo/images/face_family.jpg) ([pexel source](https://www.pexels.com/photo/adult-affection-beautiful-beauty-265764/))
86 * [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))
87 * [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))
88
89
90 before  | after
91 ------- | -------
92 ![raw commercial](../../web_demo/images/commercial.jpg)  | ![pixelated commercial](../../web_demo/images/commercial_pixelate.jpg)
93 ![raw face](../../web_demo/images/face_family.jpg)  | ![pixelated commercial](../../web_demo/images/face_family_pixelate.jpg)