mirror of
https://github.com/gradio-app/gradio.git
synced 2025-03-31 12:20:26 +08:00
image upload
This commit is contained in:
Ali Abdalla
parent
3a2eba1f18
commit
467ca213d4
103
Emotional Detector.ipynb
Normal file
103
Emotional Detector.ipynb
Normal file
@ -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
|
||||
}
|
||||
@ -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;
|
||||
|
||||
16
inputs.py
16
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__()}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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)
|
||||
});
|
||||
});
|
||||
})
|
||||
|
||||
@ -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':
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -41,15 +41,34 @@
|
||||
<div class="row">
|
||||
<!-- INPUT
|
||||
====================================================================================================================================================== -->
|
||||
<!-- <link rel="stylesheet" href="../css/dropzone.css">
|
||||
<div class="col-6">
|
||||
<h5>Textbox Input:</h5>
|
||||
<textarea id="textbox-input"></textarea>
|
||||
<h5>Image Upload Input:</h5>
|
||||
|
||||
<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/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 id="filePhoto" name="userprofile_picture" type="file"/>
|
||||
</div>
|
||||
<div aria-label="Basic example" class="btn-group" role="group">
|
||||
<button class="btn btn-primary" id="submit-button" type="button">Submit</button>
|
||||
<button class="btn btn-secondary" id="clear-button" type="button">Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../js/textbox-input.js"></script>
|
||||
<script src="../js/image-upload-input.js"></script>
|
||||
|
||||
<!-- OUTPUT
|
||||
====================================================================================================================================================== -->
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user