diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index e5daa54d6a..c13e3cff68 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -2,14 +2,15 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="fd73cd66-e80f-470e-a2ec-e220d3b6b864" name="Default Changelist" comment="">
-      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/Sentiment Analysis (textbox to class) .ipynb" beforeDir="false" afterPath="$PROJECT_DIR$/Sentiment Analysis (textbox to class) .ipynb" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/Emotional Detector.ipynb" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/Test Notebook.ipynb" beforeDir="false" afterPath="$PROJECT_DIR$/Test Notebook.ipynb" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/gradio.py" beforeDir="false" afterPath="$PROJECT_DIR$/gradio.py" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/js/all-io.js" beforeDir="false" afterPath="$PROJECT_DIR$/js/all-io.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/networking.py" beforeDir="false" afterPath="$PROJECT_DIR$/networking.py" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/outputs.py" beforeDir="false" afterPath="$PROJECT_DIR$/outputs.py" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/templates/tmp_html.html" beforeDir="false" afterPath="$PROJECT_DIR$/templates/tmp_html.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/css/draw-a-digit.css" beforeDir="false" afterPath="$PROJECT_DIR$/css/draw-a-digit.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/inputs.py" beforeDir="false" afterPath="$PROJECT_DIR$/inputs.py" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/js/dropzone.js" beforeDir="false" afterPath="$PROJECT_DIR$/js/dropzone.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/js/image-upload-input.js" beforeDir="false" afterPath="$PROJECT_DIR$/js/image-upload-input.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/preprocessing_utils.py" beforeDir="false" afterPath="$PROJECT_DIR$/preprocessing_utils.py" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/templates/image_upload_input.html" beforeDir="false" afterPath="$PROJECT_DIR$/templates/image_upload_input.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/templates/tmp_html.html" beforeDir="false" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="SHOW_DIALOG" value="false" />
@@ -79,7 +80,7 @@
         <counts>
           <entry key="css" value="3" />
           <entry key="gitignore" value="1" />
-          <entry key="html" value="3" />
+          <entry key="html" value="4" />
           <entry key="ipynb" value="1" />
           <entry key="js" value="5" />
           <entry key="py" value="11" />
@@ -88,7 +89,7 @@
       <usages-collector id="statistics.file.types.open">
         <counts>
           <entry key="CSS" value="3" />
-          <entry key="HTML" value="3" />
+          <entry key="HTML" value="4" />
           <entry key="IPNB" value="1" />
           <entry key="JavaScript" value="5" />
           <entry key="PLAIN_TEXT" value="1" />
@@ -122,7 +123,7 @@
         <entry file="file://$PROJECT_DIR$/css/draw-a-digit.css">
           <provider selected="true" editor-type-id="text-editor">
             <state relative-caret-position="1225">
-              <caret line="75" column="15" selection-start-line="75" selection-start-column="15" selection-end-line="75" selection-end-column="15" />
+              <caret line="96" column="15" selection-start-line="96" selection-start-column="15" selection-end-line="96" selection-end-column="15" />
             </state>
           </provider>
         </entry>
@@ -148,8 +149,8 @@
       <file pinned="false" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/gradio.py">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="422">
-              <caret line="121" column="23" selection-start-line="121" selection-start-column="23" selection-end-line="121" selection-end-column="23" />
+            <state relative-caret-position="647">
+              <caret line="130" column="13" selection-start-line="130" selection-start-column="13" selection-end-line="130" selection-end-column="13" />
               <folding>
                 <element signature="e#0#14#0" expanded="true" />
                 <marker date="1550563754843" expanded="true" signature="1905:2502" ph="..." />
@@ -387,11 +388,11 @@
     <frame x="-6" y="-6" width="1513" height="1013" extended-state="6" />
     <editor active="true" />
     <layout>
-      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.25360826" />
+      <window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.25360826" />
       <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
       <window_info id="Favorites" order="2" side_tool="true" />
       <window_info anchor="bottom" id="Message" order="0" />
-      <window_info anchor="bottom" id="Find" order="1" />
+      <window_info anchor="bottom" id="Find" order="1" weight="0.32945284" />
       <window_info anchor="bottom" id="Run" order="2" />
       <window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
       <window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
@@ -535,7 +536,7 @@
     <entry file="file://$PROJECT_DIR$/css/draw-a-digit.css">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="1225">
-          <caret line="75" column="15" selection-start-line="75" selection-start-column="15" selection-end-line="75" selection-end-column="15" />
+          <caret line="96" column="15" selection-start-line="96" selection-start-column="15" selection-end-line="96" selection-end-column="15" />
         </state>
       </provider>
     </entry>
@@ -589,10 +590,17 @@
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/templates/tmp_html.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="100">
+          <caret line="55" selection-start-line="45" selection-end-line="55" />
+        </state>
+      </provider>
+    </entry>
     <entry file="file://$PROJECT_DIR$/gradio.py">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="422">
-          <caret line="121" column="23" selection-start-line="121" selection-start-column="23" selection-end-line="121" selection-end-column="23" />
+        <state relative-caret-position="647">
+          <caret line="130" column="13" selection-start-line="130" selection-start-column="13" selection-end-line="130" selection-end-column="13" />
           <folding>
             <element signature="e#0#14#0" expanded="true" />
             <marker date="1550563754843" expanded="true" signature="1905:2502" ph="..." />
diff --git a/Emotional Detector.ipynb b/Emotional Detector.ipynb
new file mode 100644
index 0000000000..d2609382e3
--- /dev/null
+++ b/Emotional Detector.ipynb	
@@ -0,0 +1,103 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stderr",
+     "output_type": "stream",
+     "text": [
+      "Using TensorFlow backend.\n"
+     ]
+    }
+   ],
+   "source": [
+    "import numpy as np\n",
+    "import sklearn\n",
+    "import gradio\n",
+    "from keras.models import load_model\n",
+    "\n",
+    "%load_ext autoreload\n",
+    "%autoreload 2"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "WARNING:tensorflow:From C:\\Users\\ALI\\Anaconda3\\lib\\site-packages\\tensorflow\\python\\framework\\op_def_library.py:263: colocate_with (from tensorflow.python.framework.ops) is deprecated and will be removed in a future version.\n",
+      "Instructions for updating:\n",
+      "Colocations handled automatically by placer.\n",
+      "WARNING:tensorflow:From C:\\Users\\ALI\\Anaconda3\\lib\\site-packages\\keras\\backend\\tensorflow_backend.py:3445: calling dropout (from tensorflow.python.ops.nn_ops) with keep_prob is deprecated and will be removed in a future version.\n",
+      "Instructions for updating:\n",
+      "Please use `rate` instead of `keep_prob`. Rate should be set to `rate = 1 - keep_prob`.\n",
+      "WARNING:tensorflow:From C:\\Users\\ALI\\Anaconda3\\lib\\site-packages\\tensorflow\\python\\ops\\math_ops.py:3066: to_int32 (from tensorflow.python.ops.math_ops) is deprecated and will be removed in a future version.\n",
+      "Instructions for updating:\n",
+      "Use tf.cast instead.\n"
+     ]
+    }
+   ],
+   "source": [
+    "model = load_model('models/emotion.h5')"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 3,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def post_p(prediction): \n",
+    "    emotional_dict = {0: \"Angry\", 1: \"Disgusted\", 2: \"Fearful\", 3: \"Happy\", 4: \"Neutral\", 5: \"Sad\", 6: \"Surprised\"}\n",
+    "    return emotional_dict[prediction]"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "Model available locally at: http://localhost:7860/templates/tmp_html.html\n",
+      "Model available publicly for 8 hours at: https://27f58110.ngrok.io/templates/tmp_html.html\n"
+     ]
+    }
+   ],
+   "source": [
+    "iface = gradio.Interface(input='imageupload', output='class', model=model, model_type='keras',postprocessing_fn=post_p)\n",
+    "iface.launch()"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.7.1"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}
diff --git a/Test Notebook.ipynb b/Test Notebook.ipynb
index 9bdc05ba1f..e5b7080e46 100644
--- a/Test Notebook.ipynb	
+++ b/Test Notebook.ipynb	
@@ -34,16 +34,7 @@
    "metadata": {
     "scrolled": true
    },
-   "outputs": [
-    {
-     "name": "stderr",
-     "output_type": "stream",
-     "text": [
-      "C:\\Users\\islam\\Anaconda3\\envs\\tensorflow\\lib\\site-packages\\keras\\engine\\saving.py:327: UserWarning: Error in loading the saved optimizer state. As a result, your model is starting with a freshly initialized optimizer.\n",
-      "  warnings.warn('Error in loading the saved optimizer '\n"
-     ]
-    }
-   ],
+   "outputs": [],
    "source": [
     "model = load_model('.models/mnist-cnn.h5')"
    ]
@@ -59,9 +50,9 @@
      "name": "stdout",
      "output_type": "stream",
      "text": [
-      "Model available locally at: http://localhost:7868/templates/tmp_html.html\n",
-      "Model available publicly for 8 hours at: https://43b48cd0.ngrok.io/templates/tmp_html.html\n",
-      "Note: Gradio is in beta stage, please report all bugs to: a12d@stanford.edu\n"
+      "NOTE: Gradio is in beta stage, please report all bugs to: a12d@stanford.edu\n",
+      "Model available locally at: http://localhost:7869/templates/tmp_html.html\n",
+      "Model available publicly for 8 hours at: http://7a121434.ngrok.io/templates/tmp_html.html\n"
      ]
     }
    ],
diff --git a/css/draw-a-digit.css b/css/draw-a-digit.css
index e474cd04b4..3724d65e55 100644
--- a/css/draw-a-digit.css
+++ b/css/draw-a-digit.css
@@ -23,7 +23,28 @@ body {
 }
 
 
+.uploader {position:relative; overflow:hidden; width:300px; height:350px; background:#f3f3f3; border:2px dashed #e8e8e8;}
 
+#filePhoto{
+    position:absolute;
+    width:300px;
+    height:400px;
+    top:-50px;
+    left:0;
+    z-index:2;
+    opacity:0;
+    cursor:pointer;
+}
+
+.uploader img{
+    position:absolute;
+    width:302px;
+    height:352px;
+    top:-1px;
+    left:-1px;
+    z-index:1;
+    border:none;
+}
 #textbox-input {
     border-radius: 25px;
     border: 2px solid #000;
diff --git a/inputs.py b/inputs.py
index 60a63132e4..de4d101e21 100644
--- a/inputs.py
+++ b/inputs.py
@@ -74,5 +74,21 @@ class Textbox(AbstractInput):
         """
         return text
 
+class ImageUpload(AbstractInput):
+
+    def _get_template_path(self):
+        return 'templates/image_upload_input.html'
+
+    def _pre_process(self, imgstring):
+        """
+        """
+        content = imgstring.split(';')[1]
+        image_encoded = content.split(',')[1]
+        body = base64.decodebytes(image_encoded.encode('utf-8'))
+        im = Image.open(BytesIO(base64.b64decode(image_encoded))).convert('L')
+        im = preprocessing_utils.resize_and_crop(im, (48, 48))
+        array = np.array(im).flatten().reshape(1, 48, 48, 1)
+        return array
+
 
 registry = {cls.__name__.lower(): cls for cls in AbstractInput.__subclasses__()}
diff --git a/js/dropzone.js b/js/dropzone.js
index 3e082e9eff..0abe7a73ab 100644
--- a/js/dropzone.js
+++ b/js/dropzone.js
@@ -152,7 +152,7 @@ var Dropzone = function (_Emitter) {
          * provide a function that will be called with `files` and
          * must return the url (since `v3.12.0`)
          */
-        url: "image/png",
+        url: null,
 
         /**
          * Can be changed to `"put"` if necessary. You can also provide a function
diff --git a/js/image-upload-input.js b/js/image-upload-input.js
index 7302d24cea..26581a6953 100644
--- a/js/image-upload-input.js
+++ b/js/image-upload-input.js
@@ -1,15 +1,55 @@
-Dropzone.options.image_upload_input = {
-    autoProcessQueue: false,
-};
+// function previewFile(){
+//    var preview = document.querySelector('img'); //selects the query named img
+//    var file    = document.querySelector('input[type=file]').files[0]; //sames as here
+//    var reader  = new FileReader();
 
-myDropzone.on('addedfile', function(file) {
-        var reader = new FileReader();
-        dataURL = reader.readAsDataURL(file);
-});
+//    reader.onloadend = function () {
+//        preview.src = reader.result;
+//    }
+
+//    if (file) {
+//        reader.readAsDataURL(file); //reads the data as a URL
+//        console.log(file)
+//    } else {
+//        preview.src = "";
+//    }
+// }
+
+// previewFile();  //calls the function named previewFile()
+
+// $('#submit-button').click(function(e){
+//    var file    = document.querySelector('input[type=file]').files[0]; //sames as here
+//    var reader  = new FileReader();
+//    var preview = document.querySelector('img'); //selects the query named img
+
+//    if (file) {
+//         reader.readAsDataURL(file); //reads the data as a URL
+//         console.log(preview.src)
+//         ws.send(preview.src, function(e){
+//       notifyError(e)
+//     });
+// }
+// })
 
 
-$('#submit-button').on("click", function() { 
-   ws.send(dataURL, function(e){
+var imageLoader = document.getElementById('filePhoto');
+    imageLoader.addEventListener('change', handleImage, false);
+
+function handleImage(e) {
+    var reader = new FileReader();
+    reader.onload = function (event) {
+        
+        $('.uploader img').attr('src',event.target.result);
+    }
+    reader.readAsDataURL(e.target.files[0]);
+}
+
+$('#submit-button').click(function(e){
+
+    // var reader = new FileReader();
+    // reader.readAsDataURL(e.target.files[0]);
+    var src = $('.uploader img').attr('src');
+    ws.send(src, function(e){
       notifyError(e)
     });
- });
+})
diff --git a/preprocessing_utils.py b/preprocessing_utils.py
index dbafe2c4f2..bcdc4302d0 100644
--- a/preprocessing_utils.py
+++ b/preprocessing_utils.py
@@ -34,7 +34,7 @@ def resize_and_crop(img, size, crop_type='top'):
             raise ValueError('ERROR: invalid value for crop_type')
         img = img.crop(box)
     elif ratio < img_ratio:
-        img = img.resize((size[1] * img.size[0] / img.size[1], size[1]),
+        img = img.resize((size[1] * img.size[0] // img.size[1], size[1]),
                          Image.ANTIALIAS)
         # Crop in the top, middle or bottom
         if crop_type == 'top':
diff --git a/templates/image_upload_input.html b/templates/image_upload_input.html
index 7caddbab68..404dfb0a53 100644
--- a/templates/image_upload_input.html
+++ b/templates/image_upload_input.html
@@ -1,15 +1,31 @@
-<link rel="stylesheet" href="../css/dropzone.css">
+<!-- <link rel="stylesheet" href="../css/dropzone.css">
 <div class="col-6">
 	<h5>Image Upload Input:</h5>
-	<div id="dropzone">
-	    <form action="" class="dropzone dz-clickable" id="image_upload_input">
-	        <div class="dz-message">Drop files here or click to upload.</div>
-	    </form>
-	</div>
+	
+<input type="file" onchange="previewFile()"><br>
+<img src="" height="200" alt="Image preview...">
+
   <div class="btn-group" role="group" aria-label="Basic example">
   <button type="button" class="btn btn-primary" id="submit-button">Submit</button>
   <button type="button" class="btn btn-secondary" id="clear-button">Clear</button>
   </div>
 </div>
-<script src="../js/dropzone.js"></script>
+<script src="../js/image-upload-input.js"></script>
+
+ -->
+<div class="col-6">
+	<h5>Image Upload Input:</h5>
+
+ <div class="uploader" onclick="$('#filePhoto').click()">
+    click here or drag your images for preview
+    <img src=""/>
+    <input type="file" name="userprofile_picture"  id="filePhoto" />
+</div>    
+  <div class="btn-group" role="group" aria-label="Basic example">
+  <button type="button" class="btn btn-primary" id="submit-button">Submit</button>
+  <button type="button" class="btn btn-secondary" id="clear-button">Clear</button>
+  </div>
+
+
+</div>
 <script src="../js/image-upload-input.js"></script>
diff --git a/templates/tmp_html.html b/templates/tmp_html.html
deleted file mode 100644
index 60ccdfccc7..0000000000
--- a/templates/tmp_html.html
+++ /dev/null
@@ -1,86 +0,0 @@
-<bound method Tag.prettify of 
-<!DOCTYPE doctype html>
-
-<script src="../js/all-io.js"></script>
-<script crossorigin="anonymous" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
-<script src="../js/bootstrap.min.js"></script>
-<script src="../js/bootstrap-notify.min.js"></script>
-<html lang="en">
-<head>
-<meta charset="utf-8"/>
-<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"/>
-<meta content="" name="description"/>
-<meta content="" name="author"/>
-<title>Gradio</title>
-<!-- Bootstrap core CSS -->
-<link href="../css/bootstrap.min.css" rel="stylesheet"/>
-<link href="../css/draw-a-digit.css" rel="stylesheet"/>
-<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
-</head>
-<body>
-<div id="overlay" style="visibility: hidden"></div>
-<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
-<a class="navbar-brand" href="#">Gradio</a>
-<button aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarsExampleDefault" data-toggle="collapse" type="button">
-<span class="navbar-toggler-icon"></span>
-</button>
-<div class="collapse navbar-collapse" id="navbarsExampleDefault">
-<ul class="navbar-nav mr-auto">
-</ul>
-<ul class="navbar-nav">
-<!--<li class="nav-item">-->
-<!--<a class="nav-link" href="#">Help</a>-->
-<!--</li>-->
-<li class="nav-item">
-<em><strong><span id="model-status" style="color:#3ee263">Model: running</span></strong></em>
-</li>
-</ul>
-</div>
-</nav>
-<main class="container starter-template" role="main">
-<div class="row">
-<!-- INPUT 
-====================================================================================================================================================== -->
-<div class="col-6">
-<h5>Sketch Pad Input: (Use your cursor to draw)</h5>
-<canvas height="400" id="canvas" width="400"></canvas><br/>
-<div aria-label="Basic example" class="btn-group" role="group">
-<button class="btn btn-primary" id="submit-button" type="button">Recognize</button>
-<button class="btn btn-secondary" id="clear-button" type="button">Clear</button>
-</div>
-</div>
-<script src="../js/sketchpad-input.js"></script>
-
-<!-- OUTPUT 
-====================================================================================================================================================== -->
-<div class="col-6">
-<h5>Class Output:</h5>
-<div id="predict_div" style="background-color:grey">
-</div>
-</div>
-<script src="../js/class-output.js"></script>
-
-</div>
-</main></body></html>
-<!-- /.container -->
-<footer class="footer">
-<div class="container">
-<span class="text-muted">
-<!-- Add font awesome icons -->
-            Gradio is open-source, help make it better  
-            <a class="fa fa-github" href="https://github.com/abidlabs/gradiome" target="_blank"></a>
-</span>
-<span class="text-muted pull-right">
-<!-- Add font awesome icons -->
-            Found this useful? Kindly spread the word  
-            <a class="fa fa-facebook" href="https://www.facebook.com/sharer/sharer.php?u=www.siliconprep.com" target="_blank"></a>
-<a class="fa fa-twitter" href="https://twitter.com/home?status=Check%20out%20Gradio%20tool%20at%20www.siliconprep.com" target="_blank"></a>
-</span>
-</div>
-</footer>
-<!-- Bootstrap core JavaScript
-    ================================================== -->
-<!-- Placed at the end of the document so the pages load faster -->
-
-
->
\ No newline at end of file