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)