From 467ca213d46561d5ef363709c4b9a1b8187903c5 Mon Sep 17 00:00:00 2001 From: Ali Abdalla Date: Mon, 18 Feb 2019 23:45:20 -0800 Subject: [PATCH] image upload --- Emotional Detector.ipynb | 103 ++++++++++++++++++++++++++++++ css/draw-a-digit.css | 21 ++++++ inputs.py | 16 +++++ js/dropzone.js | 2 +- js/image-upload-input.js | 60 ++++++++++++++--- preprocessing_utils.py | 2 +- templates/image_upload_input.html | 30 +++++++-- templates/tmp_html.html | 25 +++++++- 8 files changed, 237 insertions(+), 22 deletions(-) create mode 100644 Emotional Detector.ipynb 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/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 @@ - + +
+
Image Upload Input:
+ +
+ click here or drag your images for preview + + +
+
+ + +
+ + +
diff --git a/templates/tmp_html.html b/templates/tmp_html.html index f6d186d578..f4de0403ff 100644 --- a/templates/tmp_html.html +++ b/templates/tmp_html.html @@ -41,15 +41,34 @@
+ +
+
Image Upload Input:
+
+ click here or drag your images for preview + + +
- +