- refactor docs following other model examples
[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 ## Example mood classification demo
16 To customize this demo, one should change either the included javascript
17 or simply update the primary classification URL on the page itself during runtime.
18
19 * confirm that your local instance is configured and running
20 * download this directory to your local machine
21     * confirm the host port and classification service URL in the file `face-privacy.js`
22 ```
23 classificationServer: "http://localhost:8884/transform",
24 ```
25 * view the page `face-privacy.html` in a Crome or Firefox browser
26 * probabilities will be updated on the right side fo the screen
27 * you can switch between a few sample images or upload your own by clicking on the buttons below the main image window
28
29 Example web application with *awe* mood classification
30
31 * ![example web application blurring multiple facs](example_running.jpg "Example multi-face blur")
32
33
34 # Example Interface
35 An instance should first be built and downloaded and then
36 launched locally.  Afterwards, the sample application found in
37 [web_demo](web_demo) uses a `localhost` service to classify
38 and visualize the results of image classification.
39
40 * [Commercial example](web_demo/images/commercial.jpg) ([youtube source](https://www.youtube.com/watch?v=34KfCNapnUg))
41 * [Reunion face sample](web_demo/images/face_reunion.jpg) ([flickr source](https://flic.kr/p/bEgYbs))
42 * [family face example](web_demo/images/face_family.jpg) ([pexel source](https://www.pexels.com/photo/adult-affection-beautiful-beauty-265764/))
43 * [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))
44 * [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))
45
46
47 before  | after
48 ------- | -------
49 ![raw commercial](web_demo/images/commercial.jpg)  | ![pixelated commercial](web_demo/images/commercial_pixelate.jpg)
50 ![raw face](web_demo/images/face_family.jpg)  | ![pixelated commercial](web_demo/images/face_family_pixelate.jpg)