Misc changes before 2.0.0 release (#19)

* add back static-dir flag

* staticDir

* Implement --write-template

* Add general keyboard shortcuts

README.md

@@ -75,6 +75,23 @@ to each image on your local file system. The results will go in `output.csv`.
 
 For more details, run `classify-images --help`.
 
+Tips & Tricks
+-------------
+
+It can be hard to remember the exact format for template files. localturk can help! Run it with
+the `--write-template` argument to generate a template file for your input that you can edit:
+
+ localturk --write-template tasks.csv > template.html
+
+When you're going through many tasks, keyboard shortcuts can speed things up tremendously.
+localturk supports these via the `data-key` attribute on form elements. For example, make yourer
+submit button look like this:
+
+ <input type="submit" name="result" value="Good" data-key="d">
+
+Now, when you press `d`, it'll automatically click the "Good" button for you. _Note that this
+feature is not available on mechanical turk itself!_
+
 Development
 -----------
 

classify-images.ts

@@ -18,6 +18,8 @@ import * as escape from 'escape-html';
 import * as fs from 'fs';
 import * as program from 'commander';
 
+import {dedent} from './utils';
+
 const temp = require('temp').track();
 
 function list(val) {
@@ -41,10 +43,11 @@ if (program.args.length == 0) {
 }
 
 if (fs.existsSync(program.output)) {
- console.warn(`Output file ${program.output} already exists.
-Its contents will be assumed to be previously-generated labels.
-If you want to start from scratch, either delete this file,
-rename it or specify a different output via --output`);
+ console.warn(dedent`
+ Output file ${program.output} already exists.
+ Its contents will be assumed to be previously-generated labels.
+ If you want to start from scratch, either delete this file,
+ rename it or specify a different output via --output`);
 }
 
 const csvInfo = temp.openSync({suffix: '.csv'});
@@ -55,47 +58,27 @@ fs.closeSync(csvInfo.fd);
 
 const buttonsHtml = program.labels.map((label, idx) => {
  const buttonText = `${label} (${1 + idx})`;
- return `<button type="submit" id='${1+idx}' name="label" value="${label}">${escape(buttonText)}</button>`;
+ return `<button type="submit" data-key='${1+idx}' name="label" value="${label}">${escape(buttonText)}</button>`;
 }).join('&nbsp;');
 
 const widthHtml = program.max_width ? ` width="${program.max_width}"` : '';
-const undoHtml = `
-</form>
-<form action="/delete-last" method="POST" style="display: inline-block">
- <input type="submit" id="undo-button" value="Undo Last (z)">
-</form>`;
+const undoHtml = dedent`
+ </form>
+ <form action="/delete-last" method="POST" style="display: inline-block">
+  <input type="submit" id="undo-button" data-key="z" value="Undo Last (z)">
+ </form>`;
 let html = buttonsHtml + undoHtml + '\n<p><img src="${path}" ' + widthHtml + '></p>';
 
 // Add keyboard shortcuts. 1=first button, etc.
-html += `
-<script>
-window.addEventListener("keydown", function(e) {
- var code = e.keyCode;
- if (code == 90) {
- var el = document.getElementById("undo-button");
- e.preventDefault();
- el.click();
- return;
- }
- var num = null;
- if (code >= 48 && code <= 57) num = code - 48; // numbers above keyboard
- if (code >= 96 && code <= 105) num = code - 96; // numpad
- if (num === null) return;
- var el = document.getElementById(num);
- if (el) {
- e.preventDefault();
- el.click();
- }
-});
-</script>
-<style>
- form { display: inline-block; }
- #undo-button { margin-left: 20px; }
-</style>`;
+html += dedent`
+ <style>
+ form { display: inline-block; }
+ #undo-button { margin-left: 20px; }
+ </style>`;
 
 fs.writeSync(templateInfo.fd, html);
 fs.closeSync(templateInfo.fd);
 
-const args = ['localturk', '-q', '--static_dir', '.', templateInfo.path, csvInfo.path, program.output];
+const args = ['localturk', '--static-dir', '.', templateInfo.path, csvInfo.path, program.output];
 console.log('Running ', args.join(' '));
 child_process.spawn(args[0], args.slice(1), {stdio: 'inherit'});

localturk.ts

@@ -18,23 +18,35 @@ import open = require('open');
 import * as _ from 'lodash';
 
 import * as csv from './csv';
+import {makeTemplate} from './sample-template';
 import * as utils from './utils';
 import { outputFile } from 'fs-extra';
 
 program
  .version('2.0.0')
  .usage('[options] template.html tasks.csv outputs.csv')
  .option('-p, --port <n>', 'Run on this port (default 4321)', parseInt)
+ .option('-s, --static-dir <dir>',
+ 'Serve static content from this directory. Default is same directory as template file.')
  .option('-w, --write-template', 'Generate a stub template file based on the input CSV.')
  .parse(process.argv);
 
-const {args} = program;
-if (3 !== args.length) {
+const {args, writeTemplate} = program;
+if (!((3 === args.length && !writeTemplate) ||
+ (1 === args.length && writeTemplate))) {
  program.help();
 }
+if (writeTemplate) {
+ // tasks.csv is the only input with --write-template.
+ args.unshift('');
+ args.push('');
+}
 
 const [templateFile, tasksFile, outputsFile] = args;
 const port = program.port || 4321;
+// --static-dir is particularly useful for classify-images, where the template file is in a
+// temporary directory but the image files could be anywhere.
+const staticDir = program['staticDir'] || path.dirname(templateFile);
 
 type Task = {[key: string]: string};
 let flash = ''; // this is used to show warnings in the web UI.
@@ -45,6 +57,7 @@ async function renderTemplate({task, numCompleted, numTotal}: TaskStats) {
  for (const k in task) {
  fullDict[k] = utils.htmlEntities(task[k]);
  }
+ // Note: these two fields are not available in mechanical turk.
  fullDict['ALL_JSON'] = utils.htmlEntities(JSON.stringify(task, null, 2));
  fullDict['ALL_JSON_RAW'] = JSON.stringify(task);
  const userHtml = utils.renderTemplate(template, fullDict);
@@ -56,19 +69,31 @@ async function renderTemplate({task, numCompleted, numTotal}: TaskStats) {
  `<input type=hidden name="${k}" value="${utils.htmlEntities(v)}">`
  ).join('\n');
 
- return `
-<!doctype html>
-<html>
-<title>${numCompleted} / ${numTotal} - localturk</title>
-<body><form action=/submit method=post>
-<p>${numCompleted} / ${numTotal} <span style="background: yellow">${thisFlash}</span></p>
-${sourceInputs}
-${userHtml}
-<hr/><input type=submit />
-</form>
-</body>
-</html>
-`;
+ return utils.dedent`
+ <!doctype html>
+ <html>
+ <title>${numCompleted} / ${numTotal} - localturk</title>
+ <body><form action=/submit method=post>
+ <p>${numCompleted} / ${numTotal} <span style="background: yellow">${thisFlash}</span></p>
+ ${sourceInputs}
+ ${userHtml}
+ <hr/><input type=submit />
+ </form>
+ <script>
+ // Support keyboard shortcuts via, e.g. <.. data-key="1" />
+ window.addEventListener("keydown", function(e) {
+ if (document.activeElement !== document.body) return;
+ var key = e.key;
+ const el = document.querySelector('[data-key="' + key + '"]');
+ if (el) {
+ e.preventDefault();
+ el.click();
+ }
+ });
+ </script>
+ </body>
+ </html>
+ `;
 }
 
 async function readCompletedTasks(): Promise<Task[]> {
@@ -119,15 +144,10 @@ async function getNextTask(): Promise<TaskStats> {
  }
 }
 
-if (program['write-template']) {
- // TODO(danvk): implement.
- process.exit(0);
-}
-
 const app = express();
 app.use(bodyParser.urlencoded({extended: false}));
 app.use(errorhandler());
-app.use(express.static(path.resolve(path.dirname(templateFile))));
+app.use(express.static(path.resolve(staticDir)));
 
 app.get('/', utils.wrapPromise(async (req, res) => {
  const nextTask = await getNextTask();
@@ -155,7 +175,17 @@ app.post('/delete-last', utils.wrapPromise(async (req, res) => {
  res.redirect('/');
 }));
 
-app.listen(port);
-const url = `http://localhost:${port}`;
-console.log('Running local turk on', url);
-open(url);
+
+if (writeTemplate) {
+ (async () => {
+ const columns = await csv.readHeaders(tasksFile);
+ console.log(makeTemplate(columns));
+ })().catch(e => {
+ console.error(e);
+ });
+} else {
+ app.listen(port);
+ const url = `http://localhost:${port}`;
+ console.log('Running local turk on', url);
+ open(url);
+}

sample-template.ts

@@ -0,0 +1,18 @@
+import {dedent, htmlEntities} from './utils';
+
+/**
+ * Write out a sample template file for a given input CSV.
+ */
+export function makeTemplate(columnNames: string[]) {
+ const inputs = columnNames.map(column => column + ': ${' + column + '}');
+ return dedent`
+ ${inputs.join('<br>\n ')}
+
+ <!--
+ Use named form elements to generate output as desired.
+ Use data-key="x" to set a keyboard shortcut for buttons.
+ -->
+ <input type="text" size="80" name="notes" placeholder="Notes go here">
+ <input type="submit" name="result" data-key="a" value="Class A">
+ <input type="submit" name="result" data-key="b" value="Class B">`;
+}

utils.ts

@@ -53,3 +53,24 @@ export function wrapPromise(
  });
  };
 }
+
+/**
+ * Removes leading indents from a template string without removing all leading whitespace.
+ * Taken from tslint.
+ */
+export function dedent(strings: TemplateStringsArray, ...values: any[]) {
+ let fullString = strings.reduce((accumulator, str, i) => accumulator + values[i - 1] + str);
+
+ // match all leading spaces/tabs at the start of each line
+ const match = fullString.match(/^[ \t]*(?=\S)/gm);
+ if (!match) {
+ // e.g. if the string is empty or all whitespace.
+ return fullString;
+ }
+
+ // find the smallest indent, we don't want to remove all leading whitespace
+ const indent = Math.min(...match.map(el => el.length));
+ const regexp = new RegExp('^[ \\t]{' + indent + '}', 'gm');
+ fullString = indent > 0 ? fullString.replace(regexp, '') : fullString;
+ return fullString;
+}