Generate model exploration

README.md

@@ -1,12 +1,5 @@
 # SQuAD-explorer
 The [Stanford Question Answering Dataset](https://stanford-qa.com) is a large reading comprehension dataset.
-This repository is intended to let people explore different versions and subsets of the dataset visually.
+This repository is intended to let people explore the dataset and visualize model predictions.
 
-## From Dataset to Website
-We use [gulp](http://gulpjs.com/) to generate a static website from dataset files. This website is hosted on the [gh-pages branch](https://github.com/rajpurkar/SQuAD-explorer/tree/gh-pages).
-
-### Features
-- A webpage is generate for each article, with questions laid out next to the context on which they are posed.
-When the user hovers on a question, the question words and a corresponding answer is highlighted in the context.
-- An index webpage is generated for each dataset file, which lists the articles with a link to their corresponding webpages.
-- The dataset files are grouped by the version number (found as the value for the key 'version' in the file contents).
+This website is hosted on the [gh-pages branch](https://github.com/rajpurkar/SQuAD-explorer/tree/gh-pages).

gulpfile.js

@@ -10,6 +10,7 @@ var image = require('gulp-image')
 var stylus = require('gulp-stylus')
 var minify = require('gulp-minify')
 var path = require('path')
+var fs = require('fs')
 
 var build_dir = 'SQuAD-explorer/' // good to have this be the same as the repo name for gh-pages purposes
 
@@ -57,6 +58,7 @@ var filepaths = [
   // dataset_folder + 'train-v1.0.json'
 ]
 
+
 var exploration_tasks = []
 
 filepaths.forEach(function (filename) {
@@ -84,6 +86,11 @@ filepaths.forEach(function (filename) {
     exploration_tasks.push(name)
   })
 
+  // models
+  var models_folder = './models/'
+  var models = fs.readdirSync(models_folder).map(
+    function (a) { return a.slice(0, -5)})
+
   var list_task_name = version_and_split + '/' + 'index'
   exploration_tasks.push(list_task_name)
   gulp.task(list_task_name, function () {
@@ -93,7 +100,8 @@ filepaths.forEach(function (filename) {
           'articles': article_generations,
           'prefix': build_prefix,
           'version': version,
-          'split': split
+          'split': split,
+          'models': models
         }
       }))
       .pipe(pug())

views/explore.pug

@@ -11,18 +11,32 @@ block extralinks
 
 block extrascripts
 
+mixin model_showcase(model)
+  if model
+    h2 #{model}
+  ul.list-inline
+    each article in articles
+      li
+        if !model
+          a(href='/' + prefix + article + '.html').btn.actionBtn.inverseBtn
+            | #{decodeURIComponent(article.split('/').pop())}
+        else
+          a(href='/' + prefix + article + '.html' + '?model=' + model).btn.actionBtn.inverseBtn
+            | #{decodeURIComponent(article.split('/').pop())}
+
 block content
   .cover
     .container
       .row
-        .col-md-8.col-md-offset-2
+        .col-md-12
           .infoCard
             .infoBody
               .infoHeadline
                 h1 Explore SQuAD
                 h2 Version #{version}, #{split} set
-              ul.list-inline
-                each article in articles
-                  li
-                    a(href='/' + prefix + article + '.html').btn.actionBtn.inverseBtn
-                      | #{decodeURIComponent(article.split('/').pop())}
+              +model_showcase()
+              hr
+              h1 Visualize Model Predictions
+              each model in models
+                +model_showcase(model)
+

views/js/model.js

@@ -16,7 +16,7 @@
   }
   var model_name = getUrlParameter('model')
   if (model_name) {
-    $.getJSON('/SQuAD-explorer/models/' + model_name, function (data) {
+    $.getJSON('/SQuAD-explorer/models/' + model_name + '.json', function (data) {
       $('.prediction-holder').show()
       $('.qa-wrap').each(function () {
         var id = $(this).attr('data-id')