include vendor files

gradio/static/css/vendor/cropper.css

@@ -0,0 +1,305 @@
+/*!
+ * Cropper v4.0.0
+ * https://github.com/fengyuanchen/cropper
+ *
+ * Copyright (c) 2014-2018 Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2018-04-01T06:26:32.417Z
+ */
+
+.cropper-container {
+  direction: ltr;
+  font-size: 0;
+  line-height: 0;
+  position: relative;
+  -ms-touch-action: none;
+  touch-action: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.cropper-container img {/*Avoid margin top issue (Occur only when margin-top <= -height)
+ */
+  display: block;
+  height: 100%;
+  image-orientation: 0deg;
+  max-height: none !important;
+  max-width: none !important;
+  min-height: 0 !important;
+  min-width: 0 !important;
+  width: 100%;
+}
+
+.cropper-wrap-box,
+.cropper-canvas,
+.cropper-drag-box,
+.cropper-crop-box,
+.cropper-modal {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.cropper-wrap-box,
+.cropper-canvas {
+  overflow: hidden;
+}
+
+.cropper-drag-box {
+  background-color: #fff;
+  opacity: 0;
+}
+
+.cropper-modal {
+  background-color: #000;
+  opacity: .5;
+}
+
+.cropper-view-box {
+  display: block;
+  height: 100%;
+  outline-color: rgba(51, 153, 255, 0.75);
+  outline: 1px solid #39f;
+  overflow: hidden;
+  width: 100%;
+}
+
+.cropper-dashed {
+  border: 0 dashed #eee;
+  display: block;
+  opacity: .5;
+  position: absolute;
+}
+
+.cropper-dashed.dashed-h {
+  border-bottom-width: 1px;
+  border-top-width: 1px;
+  height: 33.33333%;
+  left: 0;
+  top: 33.33333%;
+  width: 100%;
+}
+
+.cropper-dashed.dashed-v {
+  border-left-width: 1px;
+  border-right-width: 1px;
+  height: 100%;
+  left: 33.33333%;
+  top: 0;
+  width: 33.33333%;
+}
+
+.cropper-center {
+  display: block;
+  height: 0;
+  left: 50%;
+  opacity: .75;
+  position: absolute;
+  top: 50%;
+  width: 0;
+}
+
+.cropper-center:before,
+.cropper-center:after {
+  background-color: #eee;
+  content: ' ';
+  display: block;
+  position: absolute;
+}
+
+.cropper-center:before {
+  height: 1px;
+  left: -3px;
+  top: 0;
+  width: 7px;
+}
+
+.cropper-center:after {
+  height: 7px;
+  left: 0;
+  top: -3px;
+  width: 1px;
+}
+
+.cropper-face,
+.cropper-line,
+.cropper-point {
+  display: block;
+  height: 100%;
+  opacity: .1;
+  position: absolute;
+  width: 100%;
+}
+
+.cropper-face {
+  background-color: #fff;
+  left: 0;
+  top: 0;
+}
+
+.cropper-line {
+  background-color: #39f;
+}
+
+.cropper-line.line-e {
+  cursor: ew-resize;
+  right: -3px;
+  top: 0;
+  width: 5px;
+}
+
+.cropper-line.line-n {
+  cursor: ns-resize;
+  height: 5px;
+  left: 0;
+  top: -3px;
+}
+
+.cropper-line.line-w {
+  cursor: ew-resize;
+  left: -3px;
+  top: 0;
+  width: 5px;
+}
+
+.cropper-line.line-s {
+  bottom: -3px;
+  cursor: ns-resize;
+  height: 5px;
+  left: 0;
+}
+
+.cropper-point {
+  background-color: #39f;
+  height: 5px;
+  opacity: .75;
+  width: 5px;
+}
+
+.cropper-point.point-e {
+  cursor: ew-resize;
+  margin-top: -3px;
+  right: -3px;
+  top: 50%;
+}
+
+.cropper-point.point-n {
+  cursor: ns-resize;
+  left: 50%;
+  margin-left: -3px;
+  top: -3px;
+}
+
+.cropper-point.point-w {
+  cursor: ew-resize;
+  left: -3px;
+  margin-top: -3px;
+  top: 50%;
+}
+
+.cropper-point.point-s {
+  bottom: -3px;
+  cursor: s-resize;
+  left: 50%;
+  margin-left: -3px;
+}
+
+.cropper-point.point-ne {
+  cursor: nesw-resize;
+  right: -3px;
+  top: -3px;
+}
+
+.cropper-point.point-nw {
+  cursor: nwse-resize;
+  left: -3px;
+  top: -3px;
+}
+
+.cropper-point.point-sw {
+  bottom: -3px;
+  cursor: nesw-resize;
+  left: -3px;
+}
+
+.cropper-point.point-se {
+  bottom: -3px;
+  cursor: nwse-resize;
+  height: 20px;
+  opacity: 1;
+  right: -3px;
+  width: 20px;
+}
+
+@media (min-width: 768px) {
+  .cropper-point.point-se {
+    height: 15px;
+    width: 15px;
+  }
+}
+
+@media (min-width: 992px) {
+  .cropper-point.point-se {
+    height: 10px;
+    width: 10px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .cropper-point.point-se {
+    height: 5px;
+    opacity: .75;
+    width: 5px;
+  }
+}
+
+.cropper-point.point-se:before {
+  background-color: #39f;
+  bottom: -50%;
+  content: ' ';
+  display: block;
+  height: 200%;
+  opacity: 0;
+  position: absolute;
+  right: -50%;
+  width: 200%;
+}
+
+.cropper-invisible {
+  opacity: 0;
+}
+
+.cropper-bg {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
+}
+
+.cropper-hide {
+  display: block;
+  height: 0;
+  position: absolute;
+  width: 0;
+}
+
+.cropper-hidden {
+  display: none !important;
+}
+
+.cropper-move {
+  cursor: move;
+}
+
+.cropper-crop {
+  cursor: crosshair;
+}
+
+.cropper-disabled .cropper-drag-box,
+.cropper-disabled .cropper-face,
+.cropper-disabled .cropper-line,
+.cropper-disabled .cropper-point {
+  cursor: not-allowed;
+}

gradio/static/js/vendor/sketchpad.js

@@ -0,0 +1,297 @@
+//    The MIT License (MIT)
+//
+//    Copyright (c) 2014 YIOM
+//
+//    Permission is hereby granted, free of charge, to any person obtaining a copy
+//    of this software and associated documentation files (the "Software"), to deal
+//    in the Software without restriction, including without limitation the rights
+//    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+//    copies of the Software, and to permit persons to whom the Software is
+//    furnished to do so, subject to the following conditions:
+//
+//    The above copyright notice and this permission notice shall be included in
+//    all copies or substantial portions of the Software.
+//
+//    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+//    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+//    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+//    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+//    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+//    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+//    THE SOFTWARE.
+
+function Sketchpad(config) {
+  // Enforces the context for all functions
+  for (var key in this.constructor.prototype) {
+    this[key] = this[key].bind(this);
+  }
+
+  // Warn the user if no DOM element was selected
+  if (!config.hasOwnProperty('element')) {
+    console.error('SKETCHPAD ERROR: No element selected');
+    return;
+  }
+
+  this.element = config.element;
+
+  // Width can be defined on the HTML or programatically
+  this._width = config.width || $(this.element).attr('data-width') || 0;
+  this._height = config.height || $(this.element).attr('data-height') || 0;
+
+  // Pen attributes
+  this.color = config.color || $(this.element).attr('data-color') || '#000000';
+  this.penSize = config.penSize || $(this.element).attr('data-penSize') || 5;
+
+  // ReadOnly sketchpads may not be modified
+  this.readOnly = config.readOnly ||
+                  $(this.element).attr('data-readOnly') ||
+                  false;
+  if (!this.readOnly) {
+      $(this.element).css({cursor: 'crosshair'});
+  }
+
+  // Stroke control variables
+  this.strokes = config.strokes || [];
+  this._currentStroke = {
+    color: null,
+    size: null,
+    lines: [],
+  };
+
+  // Undo History
+  this.undoHistory = config.undoHistory || [];
+
+  // Animation function calls
+  this.animateIds = [];
+
+  // Set sketching state
+  this._sketching = false;
+
+  // Setup canvas sketching listeners
+  this.reset();
+}
+
+//
+// Private API
+//
+
+Sketchpad.prototype._cursorPosition = function(event) {
+  return {
+    x: event.pageX - $(this.canvas).offset().left,
+    y: event.pageY - $(this.canvas).offset().top,
+  };
+};
+
+Sketchpad.prototype._draw = function(start, end, color, size) {
+  this._stroke(start, end, color, size, 'source-over');
+};
+
+Sketchpad.prototype._erase = function(start, end, color, size) {
+  this._stroke(start, end, color, size, 'destination-out');
+};
+
+Sketchpad.prototype._stroke = function(start, end, color, size, compositeOperation) {
+  this.context.save();
+  this.context.lineJoin = 'round';
+  this.context.lineCap = 'round';
+  this.context.strokeStyle = color;
+  this.context.lineWidth = size;
+  this.context.globalCompositeOperation = compositeOperation;
+  this.context.beginPath();
+  this.context.moveTo(start.x, start.y);
+  this.context.lineTo(end.x, end.y);
+  this.context.closePath();
+  this.context.stroke();
+
+  this.context.restore();
+};
+
+//
+// Callback Handlers
+//
+
+Sketchpad.prototype._mouseDown = function(event) {
+  this._lastPosition = this._cursorPosition(event);
+  this._currentStroke.color = this.color;
+  this._currentStroke.size = this.penSize;
+  this._currentStroke.lines = [];
+  this._sketching = true;
+  this.canvas.addEventListener('mousemove', this._mouseMove);
+};
+
+Sketchpad.prototype._mouseUp = function(event) {
+  if (this._sketching) {
+    this.strokes.push($.extend(true, {}, this._currentStroke));
+    this._sketching = false;
+  }
+  this.canvas.removeEventListener('mousemove', this._mouseMove);
+};
+
+Sketchpad.prototype._mouseMove = function(event) {
+  var currentPosition = this._cursorPosition(event);
+
+  this._draw(this._lastPosition, currentPosition, this.color, this.penSize);
+  this._currentStroke.lines.push({
+    start: $.extend(true, {}, this._lastPosition),
+    end: $.extend(true, {}, currentPosition),
+  });
+
+  this._lastPosition = currentPosition;
+};
+
+Sketchpad.prototype._touchStart = function(event) {
+  event.preventDefault();
+  if (this._sketching) {
+    return;
+  }
+  this._lastPosition = this._cursorPosition(event.changedTouches[0]);
+  this._currentStroke.color = this.color;
+  this._currentStroke.size = this.penSize;
+  this._currentStroke.lines = [];
+  this._sketching = true;
+  this.canvas.addEventListener('touchmove', this._touchMove, false);
+};
+
+Sketchpad.prototype._touchEnd = function(event) {
+  event.preventDefault();
+  if (this._sketching) {
+    this.strokes.push($.extend(true, {}, this._currentStroke));
+    this._sketching = false;
+  }
+  this.canvas.removeEventListener('touchmove', this._touchMove);
+};
+
+Sketchpad.prototype._touchCancel = function(event) {
+  event.preventDefault();
+  if (this._sketching) {
+    this.strokes.push($.extend(true, {}, this._currentStroke));
+    this._sketching = false;
+  }
+  this.canvas.removeEventListener('touchmove', this._touchMove);
+};
+
+Sketchpad.prototype._touchLeave = function(event) {
+  event.preventDefault();
+  if (this._sketching) {
+    this.strokes.push($.extend(true, {}, this._currentStroke));
+    this._sketching = false;
+  }
+  this.canvas.removeEventListener('touchmove', this._touchMove);
+};
+
+Sketchpad.prototype._touchMove = function(event) {
+  event.preventDefault();
+  var currentPosition = this._cursorPosition(event.changedTouches[0]);
+
+  this._draw(this._lastPosition, currentPosition, this.color, this.penSize);
+  this._currentStroke.lines.push({
+    start: $.extend(true, {}, this._lastPosition),
+    end: $.extend(true, {}, currentPosition),
+  });
+
+  this._lastPosition = currentPosition;
+};
+
+//
+// Public API
+//
+
+Sketchpad.prototype.reset = function() {
+  // Set attributes
+  this.canvas = $(this.element)[0];
+  this.canvas.width = this._width;
+  this.canvas.height = this._height;
+  this.context = this.canvas.getContext('2d');
+
+  // Setup event listeners
+  this.redraw(this.strokes);
+
+  if (this.readOnly) {
+    return;
+  }
+
+  // Mouse
+  this.canvas.addEventListener('mousedown', this._mouseDown);
+  this.canvas.addEventListener('mouseout', this._mouseUp);
+  this.canvas.addEventListener('mouseup', this._mouseUp);
+
+  // Touch
+  this.canvas.addEventListener('touchstart', this._touchStart);
+  this.canvas.addEventListener('touchend', this._touchEnd);
+  this.canvas.addEventListener('touchcancel', this._touchCancel);
+  this.canvas.addEventListener('touchleave', this._touchLeave);
+};
+
+Sketchpad.prototype.drawStroke = function(stroke) {
+  for (var j = 0; j < stroke.lines.length; j++) {
+    var line = stroke.lines[j];
+    this._draw(line.start, line.end, stroke.color, stroke.size);
+  }
+};
+
+Sketchpad.prototype.redraw = function(strokes) {
+  for (var i = 0; i < strokes.length; i++) {
+    this.drawStroke(strokes[i]);
+  }
+};
+
+Sketchpad.prototype.toObject = function() {
+  return {
+    width: this.canvas.width,
+    height: this.canvas.height,
+    strokes: this.strokes,
+    undoHistory: this.undoHistory,
+  };
+};
+
+Sketchpad.prototype.toJSON = function() {
+  return JSON.stringify(this.toObject());
+};
+
+Sketchpad.prototype.animate = function(ms, loop, loopDelay) {
+  this.clear();
+  var delay = ms;
+  var callback = null;
+  for (var i = 0; i < this.strokes.length; i++) {
+    var stroke = this.strokes[i];
+    for (var j = 0; j < stroke.lines.length; j++) {
+      var line = stroke.lines[j];
+      callback = this._draw.bind(this, line.start, line.end,
+                                 stroke.color, stroke.size);
+      this.animateIds.push(setTimeout(callback, delay));
+      delay += ms;
+    }
+  }
+  if (loop) {
+    loopDelay = loopDelay || 0;
+    callback = this.animate.bind(this, ms, loop, loopDelay);
+    this.animateIds.push(setTimeout(callback, delay + loopDelay));
+  }
+};
+
+Sketchpad.prototype.cancelAnimation = function() {
+  for (var i = 0; i < this.animateIds.length; i++) {
+    clearTimeout(this.animateIds[i]);
+  }
+};
+
+Sketchpad.prototype.clear = function() {
+  this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+};
+
+Sketchpad.prototype.undo = function() {
+  this.clear();
+  var stroke = this.strokes.pop();
+  if (stroke) {
+    this.undoHistory.push(stroke);
+    this.redraw(this.strokes);
+  }
+};
+
+Sketchpad.prototype.redo = function() {
+  var stroke = this.undoHistory.pop();
+  if (stroke) {
+    this.strokes.push(stroke);
+    this.drawStroke(stroke);
+  }
+};

gradio/templates/input/csv.html

@@ -7,5 +7,5 @@
   <input class="hidden_upload" type="file" accept=".csv" />
 </div>
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.6.3/papaparse.min.js"></script>
+<script src="../static/js/vendor/papaparse.min.js"></script>
 <script src="../static/js/interfaces/input/csv.js"></script>

gradio/templates/input/image_upload.html

@@ -7,6 +7,6 @@
   <input class="hidden_upload" type="file" accept="image/x-png,image/gif,image/jpeg" />
 </div>
 
-<link rel="stylesheet" href="https://fengyuanchen.github.io/cropper/css/cropper.css">
-<script src="https://fengyuanchen.github.io/cropper/js/cropper.js"></script>
+<link rel="stylesheet" href="../static/css/vendor/cropper.css">
+<script src="../static/js/vendor/cropper.js"></script>
 <script src="../static/js/interfaces/input/image_upload.js"></script>

gradio/templates/input/sketchpad.html

@@ -10,5 +10,5 @@
   </div>
 </div>
 
-<script src="http://yiom.github.io/sketchpad/javascripts/sketchpad.js"></script>
+<script src="../static/js/vendor/sketchpad.js"></script>
 <script src="../static/js/interfaces/input/sketchpad.js"></script>