Surfaced extra captions via a image lightbox

Added in this update:

- Ability to "expand" an image into a lightbox that show all 3 image captions generated
- Added Featherlight and Glyphicon libraries for the above functionality
- Added new image detail endpoint that returns the html snippet used in the lightbox

Author: ajbozarth

README.md

@@ -57,5 +57,7 @@ This web app includes the following js and css libraries
 - [Image Picker](http://rvera.github.io/image-picker/)
 - [d3-cloud](https://github.com/jasondavies/d3-cloud)
 - [D3.js](https://d3js.org)
-- [Bootstrap 3](https://getbootstrap.com)
+- [Featherlight](https://noelboss.github.io/featherlight/)
 - [JQuery](https://jquery.com)
+- [Bootstrap 3](https://getbootstrap.com)
+- [Glyphicons](http://glyphicons.com)

app.py

@@ -20,6 +20,18 @@ def get(self):
         self.render("index.html", image_captions=image_captions)
 
 
+class DetailHandler(web.RequestHandler):
+    def get(self):
+        image = self.get_argument('image', None)
+        if not image:
+            self.set_status(400)
+            return self.finish("400: Missing image parameter")
+        if image not in image_captions:
+            self.set_status(404)
+            return self.finish("404: Image not found")
+        self.render("detail-snippet.html", image=image, predictions=image_captions[image])
+
+
 class CleanupHandler(web.RequestHandler):
     def get(self):
         self.render("cleanup.html")
@@ -92,7 +104,8 @@ def make_app():
     handlers = [
         (r"/", MainHandler),
         (r"/upload", UploadHandler),
-        (r"/cleanup", CleanupHandler)
+        (r"/cleanup", CleanupHandler),
+        (r"/detail", DetailHandler)
     ]
 
     configs = {

static/css/bootstrap.min.css

@@ -1,6 +1,6 @@
 /* Style sheet for MAX Image Caption Generator Web App */
 
-body .ibm-code {
+body {
     font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
 }
 
@@ -63,4 +63,39 @@ body .ibm-code {
 
 .ibm-code  ul.thumbnails.image_picker_selector li .thumbnail.selected {
     background: #5FBFBB;
-}
+}
+
+.ibm-code .thumbnail {
+    display: inline-block;
+    position: relative;
+}
+
+.thumbnails .more-info-icon {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 6px;
+    background: #FFFFFF;
+    border-radius: 4px;
+    font-size: 1.2em;
+}
+
+a.more-info-icon {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+.thumbnails .selected .more-info-icon {
+    background: #5FBFBB;
+}
+
+.featherlight .featherlight-content {
+    border-radius: 4px;
+    background: #5FBFBB;
+    border-bottom: 0;
+    max-width: 100vh;
+}
+
+.featherlight .featherlight-close-icon {
+    background: #5FBFBB;
+}