From 36ecaff2b5a2e8929d701b9acdf25cef12a44abb Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sat, 9 Mar 2019 16:35:07 -0800
Subject: [PATCH] add text io

---
 gradio/static/css/gradio.css                   |  4 ++++
 gradio/static/js/interfaces/input/sketchpad.js |  1 -
 gradio/static/js/interfaces/input/textbox.js   | 18 +++++++-----------
 gradio/static/js/interfaces/output/textbox.js  |  5 ++++-
 gradio/templates/input/image_upload.html       |  1 +
 gradio/templates/input/sketchpad.html          |  1 +
 gradio/templates/input/textbox.html            |  6 ++++++
 gradio/templates/output/textbox.html           |  6 ++++++
 8 files changed, 29 insertions(+), 13 deletions(-)
 create mode 100644 gradio/templates/input/textbox.html
 create mode 100644 gradio/templates/output/textbox.html

diff --git a/gradio/static/css/gradio.css b/gradio/static/css/gradio.css
index 24af9a62b9..545ac043df 100644
--- a/gradio/static/css/gradio.css
+++ b/gradio/static/css/gradio.css
@@ -181,3 +181,7 @@
 canvas {
   border: solid 1px black;
 }
+
+textarea {
+  resize: none;
+}
diff --git a/gradio/static/js/interfaces/input/sketchpad.js b/gradio/static/js/interfaces/input/sketchpad.js
index 1499ba6ddf..c86d88918d 100644
--- a/gradio/static/js/interfaces/input/sketchpad.js
+++ b/gradio/static/js/interfaces/input/sketchpad.js
@@ -19,7 +19,6 @@ $('body').on('click', '.clear', function(e) {
 })
 $('body').on('click', '.submit', function(e) {
     var dataURL = canvas.toDataURL("image/png");
-    console.log(dataURL)
     ws.send(dataURL, function(e){
       notifyError(e)
     });
diff --git a/gradio/static/js/interfaces/input/textbox.js b/gradio/static/js/interfaces/input/textbox.js
index aa267c0310..c7dd0d0634 100644
--- a/gradio/static/js/interfaces/input/textbox.js
+++ b/gradio/static/js/interfaces/input/textbox.js
@@ -1,13 +1,9 @@
-var text = $("#textbox-input").val();
-
-$('#clear-button').click(function(e){
-    $("textbox-input").text("");
+$('body').on('click', '.clear', function(e) {
+  $(".input_text").val("");
 })
-
-$('#submit-button').click(function(e){
-    var text = $("#textbox-input").val();
-    ws.send(text, function(e){
-      notifyError(e)
-    });
-
+$('body').on('click', '.submit', function(e) {
+  text = $(".input_text").text();
+  ws.send(text, function(e){
+    notifyError(e)
+  });
 })
diff --git a/gradio/static/js/interfaces/output/textbox.js b/gradio/static/js/interfaces/output/textbox.js
index 2ae76e92dd..f07c41a270 100644
--- a/gradio/static/js/interfaces/output/textbox.js
+++ b/gradio/static/js/interfaces/output/textbox.js
@@ -1,3 +1,6 @@
+$('body').on('click', '.clear', function(e) {
+  $(".output_text").val("");
+})
 ws.onmessage = function (event) {
- 	$("#textbox-output").val(event.data);
+ 	$(".output_text").val(event.data);
 }
diff --git a/gradio/templates/input/image_upload.html b/gradio/templates/input/image_upload.html
index ca534a06b1..e69f03a7d3 100644
--- a/gradio/templates/input/image_upload.html
+++ b/gradio/templates/input/image_upload.html
@@ -6,6 +6,7 @@
   </div>
   <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>
 <script src="../static/js/interfaces/input/image_upload.js"></script>
diff --git a/gradio/templates/input/sketchpad.html b/gradio/templates/input/sketchpad.html
index 94c59d122e..7b6fc187ae 100644
--- a/gradio/templates/input/sketchpad.html
+++ b/gradio/templates/input/sketchpad.html
@@ -9,5 +9,6 @@
     <canvas id="canvas"></canvas>
   </div>
 </div>
+
 <script src="http://yiom.github.io/sketchpad/javascripts/sketchpad.js"></script>
 <script src="../static/js/interfaces/input/sketchpad.js"></script>
diff --git a/gradio/templates/input/textbox.html b/gradio/templates/input/textbox.html
new file mode 100644
index 0000000000..8784a32fa7
--- /dev/null
+++ b/gradio/templates/input/textbox.html
@@ -0,0 +1,6 @@
+<div class="gradio input text">
+  <div class="role">Input</div>
+  <textarea class="input_text" placeholder="Enter text here..."></textarea>
+</div>
+
+<script src="../static/js/interfaces/input/textbox.js"></script>
diff --git a/gradio/templates/output/textbox.html b/gradio/templates/output/textbox.html
new file mode 100644
index 0000000000..add7bcd4b1
--- /dev/null
+++ b/gradio/templates/output/textbox.html
@@ -0,0 +1,6 @@
+<div class="gradio output text">
+  <div class="role">Output</div>
+  <textarea readonly class="output_text"></textarea>
+</div>
+
+<script src="../static/js/interfaces/output/textbox.js"></script>