Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/interface improvements #41

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Feature/interface improvements #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b545057
Added command line argument to define the port
Jul 11, 2020
6f3b2a9
Debounce the api calls when moving the from/to rectangle
Roemer Jul 11, 2020
c3114a4
Added a toggle to switch between preview stream and still image
Roemer Jul 11, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 58 additions & 6 deletions interface.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" />

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>

</head>
<body style="background-color:#232323;">
<div style="left:50%; position:absolute; top:50%; transform:translate(-50%, -50%);">
Expand All @@ -42,7 +45,7 @@
<td>
<div style="padding:40px 40px 40px 20px;">
<div style="background-color:#1D1D1D; border:1px solid #2A2A2A; display:inline-block;">
<img src="/get_live" />
<img id="previewImage" src="/get_live" />
</div>
</div>
</td>
Expand All @@ -52,6 +55,14 @@
</div>

<div style="bottom:16px; position:fixed; right:16px;">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="preview_stream" autocomplete="off" checked> <i class="fa fa-film"></i>
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="preview_still" autocomplete="off"> <i class="fa fa-image"></i>
</label>
</div>
<button class="btn btn-primary" id="autozoom" style="font-size:14px; position:relative; z-index:2;"><i class="fa fa-magic"></i></button>
<button class="btn btn-primary" id="load" style="font-size:14px; position:relative;"><i class="fa fa-folder-open"></i><input id="file" type="file" style="cursor:pointer; bottom:0px; height:100%; left:0px; opacity:0.0; position:absolute; right:0px; top:0px; width:100%; z-index:1;" /></button>
<a class="btn btn-primary" id="save" href="/get_result" target="_blank" style="font-size:14px; position:relative; z-index:2;"><i class="fa fa-save"></i></a>
Expand All @@ -63,6 +74,33 @@
</script>

<script type="text/javascript">
// Debounce time for the change commands for from/to image border
debounceTime = 250;

// Function to get the preview image and display it
async function updatePreviewImage() {
$.ajax({
type: "GET",
url: "/get_live_still",
xhrFields: {
responseType: 'blob'
},
success: function(data, jqXHR, response) {
toBase64(data).then((value) => {
jQuery("#previewImage").attr('src', value);
});
}
});
}

// Function to convert the file blob to base64
const toBase64 = file => new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});

jQuery(window.document)
.on('keydown', function(objEvent) {
if (objEvent.keyCode === 49) {
Expand Down Expand Up @@ -99,6 +137,16 @@
})
;

jQuery('#preview_stream')
.on('click', function() {
jQuery("#previewImage").attr('src', '/get_live');
});

jQuery('#preview_still')
.on('click', function() {
jQuery("#previewImage").attr('src', '/get_live_still');
});

jQuery('#autozoom')
.on('click', function() {
jQuery('#plause').find('i').removeClass().addClass('fa').addClass('fa-play');
Expand Down Expand Up @@ -177,7 +225,7 @@

objFrom.options.crop();
},
'crop': function() {
'crop': $.debounce(debounceTime, function() {
jQuery('#plause').find('i').removeClass().addClass('fa').addClass('fa-play');
jQuery.post('/update_mode', { 'strMode': 'manual' });

Expand All @@ -187,7 +235,7 @@
'intCropWidth': Math.round(objFrom.getData().width),
'intCropHeight': Math.round(objFrom.getData().height)
});
}
})
});

objTo = new Cropper(jQuery('#to').get(0), {
Expand All @@ -209,7 +257,7 @@

objTo.options.crop();
},
'crop': function() {
'crop': $.debounce(debounceTime, function() {
jQuery('#plause').find('i').removeClass().addClass('fa').addClass('fa-play');
jQuery.post('/update_mode', { 'strMode': 'manual' });

Expand All @@ -218,14 +266,18 @@
'fltCenterV': objTo.getData().y + (0.5 * objTo.getData().height),
'intCropWidth': Math.round(objTo.getData().width),
'intCropHeight': Math.round(objTo.getData().height)
}, function(data) {
updatePreviewImage();
});
}
})
});

jQuery.post('/load_image', {
'strFile': objEvent.target.files[0].name,
'strData': objImage.toDataURL()
})
}, function(data) {
updatePreviewImage();
});
}, {
'canvas': true,
'minWidth': 1024,
Expand Down
42 changes: 41 additions & 1 deletion interface.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import torch
import torchvision

import argparse
import base64
import cupy
import cv2
Expand Down Expand Up @@ -39,6 +40,15 @@

##########################################################

# Parse arguments
def getOptions(args=sys.argv[1:]):
parser = argparse.ArgumentParser(description="Parses command.")
parser.add_argument("-p", "--port", type=int, default=8080, help="The port to use")
options = parser.parse_args(args)
return options

options = getOptions()

objCommon = {}

exec(open('./common.py', 'r').read())
Expand Down Expand Up @@ -145,6 +155,34 @@ def update_to():
return ''
# end

@objFlask.route(rule='/get_live_still', methods=[ 'GET' ])
def get_live_still():
if objPlayback['intTime'] > len(objPlayback['fltTime']) - 1:
objPlayback['intTime'] = 0
# end

if objPlayback['strImage'] is None:
imgBytes = cv2.imencode(ext='.jpg', img=numpy.ones([ 768, 1024, 3 ], numpy.uint8) * 29, params=[ cv2.IMWRITE_JPEG_QUALITY, 80 ])[1].tobytes()
else:
intTime = objPlayback['intTime']
fltTime = objPlayback['fltTime'][intTime]

if objPlayback['strMode'] == 'automatic':
objPlayback['intTime'] += 1

npyKenburns = process_kenburns({
'fltSteps': [ fltTime ],
'objFrom': objPlayback['objFrom'],
'objTo': objPlayback['objTo'],
'boolInpaint': False
})[0]

imgBytes = cv2.imencode(ext='.jpg', img=npyKenburns, params=[ cv2.IMWRITE_JPEG_QUALITY, 60 ])[1].tobytes()
# end

objKenburns = io.BytesIO(imgBytes)
return flask.send_file(filename_or_fp=objKenburns, mimetype='image/jpeg', as_attachment=True, attachment_filename='kenburns.jpeg', cache_timeout=-1)

@objFlask.route(rule='/get_live', methods=[ 'GET' ])
def get_live():
def generator():
Expand Down Expand Up @@ -210,4 +248,6 @@ def get_result():
return flask.send_file(filename_or_fp=objKenburns, mimetype='video/mp4', as_attachment=True, attachment_filename='kenburns.mp4', cache_timeout=-1)
# end

gevent.pywsgi.WSGIServer(listener=('0.0.0.0', 8080), application=objFlask).serve_forever()

print('Starting server on port ' + str(options.port))
gevent.pywsgi.WSGIServer(listener=('0.0.0.0', options.port), application=objFlask).serve_forever()