Commit 32d151dd authored by josh's avatar josh
Browse files

base files

parent cb46ad32
from flask import *
from flask_cors import CORS, cross_origin
from threading import Timer
import webbrowser
import pathlib
import os
from werkzeug.utils import secure_filename
UPLOAD_FOLDER = "/home/josh/Desktop/working_dir"
ALLOWED_EXTENSIONS = {'txt', 'pdf', 'png', 'jpg', 'jpeg', 'gif'}
app = Flask( __name__ )
CORS( app )
app.config["UPLOAD_FOLDER"] = UPLOAD_FOLDER
@app.route( "/" )
def index():
return render_template( "index.html" )
# SOURCE - https://flask.palletsprojects.com/en/1.1.x/patterns/fileuploads/
def allowed_file(filename):
return '.' in filename and \
filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
@app.route("/demo-upload", methods=["GET", "POST"])
def upload_file():
if request.method == 'POST':
# check if the post request has the file part
if 'file' not in request.files:
flash('No file part')
return redirect(request.url)
file = request.files['file']
# if user does not select file, browser also
# submit an empty part without filename
if file.filename == '':
flash('No selected file')
return redirect(request.url)
if file and allowed_file(file.filename):
filename = secure_filename(file.filename)
file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
return jsonify("Ok")
def open_browser():
webbrowser.open_new('http://127.0.0.1:2000/')
if __name__ == "__main__":
Timer( 1, open_browser ).start()
app.run( port=2000 )
/*
* MASK CREATOR COMPONENTS
*/
function uploadImage()
{
var formDataRaw = $('#FileForm')[0];
var form_data = new FormData(formDataRaw);
console.log(form_data)
$.ajax({
type: 'POST',
url: '/demo-upload',
data: form_data,
contentType: false,
cache: false,
processData: false,
async: false,
success: function (data) {
console.log('Success!');
$("#status").show();
},
});
}
/*
* Clear side bar and place mask creator tool bar
*/
function loadMaskCreator() {
var content = document.getElementsByClassName( "content" )[0];
var sideBar = document.getElementsByClassName( "sideBar" )[0];
/* Create new toolbar and creator components */
var toolbar = new MaskCreatorToolBar();
var creator = new MaskCreator();
/* Clear sidebar and content, add above components */
sideBar.innerHTML = "";
content.innerHTML = "";
sideBar.appendChild( toolbar );
content.appendChild( creator );
}
/* Mask Toolbar template */
const MaskToolTemplate = document.createElement( "template" );
MaskToolTemplate.innerHTML = `
<style>
.mask-toolbar-container {
width: 100px;
height: 100%;
background-color: yellow;
display: flex;
flex-flow: column nowrap;
}
.mask-toolbar-button {
width: 100%;
height: 50px;
background-color: green;
color: black;
border: 0px;
}
</style>
<div class="mask-toolbar-container">
<button id="button1" class="mask-toolbar-button">Button 1</button>
<button id="button2" class="mask-toolbar-button">Button 2</button>
</div>
`;
/*
* Mask Creator Tool bar Class
*/
class MaskCreatorToolBar extends HTMLElement {
constructor() {
super();
/* Tool Settings */
this._data = "data";
this.attachShadow( { mode: "open" } );
this.shadowRoot.appendChild( MaskToolTemplate.content.cloneNode( true ) );
/*this.shadowRoot.querySelector( "h3" ).innerText = this.getAttribute( "name" );*/
}
get data() { return this._data; }
set data( data ) { this._data = data; }
button1() {
console.log( "button 1 pressed" );
}
button2() {
console.log( "button 2 pressed" );
}
connectedCallback() {
this.shadowRoot.getElementById("button1").addEventListener( "click", () => this.button1() );
this.shadowRoot.getElementById("button2").addEventListener( "click", () => this.button2() );
}
disconnectedCallback() {
this.shadowRoot.querySelector("button1").removeEventListener();
this.shadowRoot.querySelector("button2").removeEventListener();
}
}
const MaskCreatorTemplate = document.createElement( "template" );
MaskCreatorTemplate.innerHTML = `
<style>
.mask-creator-container {
width: 512px;
height: 512px;
padding: 30px;
background-color: yellow;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
}
#load-image-button {
width: 150px;
height: 50px;
}
canvas {
width: 512px;
height: 512px;
}
</style>
<span>upload image to process.</span><br/>
<form id="FileForm" name="file" enctype="multipart/form-data">
<input type="file" name="file" id="File" />
<input type="button" name="submit" value="submit" onclick="uploadImage()" />
</form>
<p id="status" hidden>Success!</p>
`;
/* https://pythonise.com/series/learning-flask/flask-uploading-files */
class MaskCreator extends HTMLElement {
constructor() {
super();
//this.attachShadow( { mode: "open" } );
//this.shadowRoot.appendChild( MaskCreatorTemplate.content.cloneNode( true ) );
this.appendChild( MaskCreatorTemplate.content.cloneNode( true ) );
}
loadImage() {
var ctx = this.shadowRoot.getElementById( "main-canvas" ).getContext( "2d" );
var img = document.getElementById( "img-test" );
ctx.drawImage( img, 0, 0, 512, 512 );
}
}
window.customElements.define( "mask-creator-toolbar", MaskCreatorToolBar );
window.customElements.define( "mask-creator", MaskCreator );
/*
COLORS:
-
*/
* {
padding: 0;
margin: 0;
font-family: arial;
}
html, body {
width: 100%;
height: 100%;
}
.mainGrid {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: auto 1fr; /* 3 lines */
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
}
.header {
background-color: #333;
grid-area: header;
padding: 30px;
}
.header #headerContainer {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
color: white;
}
.header #headerContainer #siteName {
font-size: large;
font-weight: bold;
}
.content {
background-color: #ecf0f1;
grid-area: content;
padding: 5%;
padding-top: 10%;
display: flex;
flex-flow: row nowrap;
justify-content: center;
}
.sideBar {
background-color: green;
grid-area: sidebar;
}
.footer {
background-color: yellow;
grid-area: footer;
}
.button {
border: none;
color: red;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.4s;
cursor: pointer;
}
.jobPrompt {
width: 200px;
height: 250px;
padding: 30px;
background-color: white;
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
}
.jobPromptButton {
width: 100%;
background-color: white;
color: black;
border: 2px solid #333;
border-radius: 25px;
}
.jobPromptButton:hover {
background-color: #333;
color: white;
}
\ No newline at end of file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AI4HDR</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="static/styles.css">
</head>
<body>
<!--jquery-->
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="static/index.js"></script>
<div class="mainGrid">
<div class="header">
<div id="headerContainer">
<div id="siteName">AI 4 HDR</div>
</div>
</div>
<div class="content">
<div class="jobPrompt">
<button class="button jobPromptButton">Process Image</button>
<button class="button jobPromptButton" onclick="loadMaskCreator()">Create Mask</button>
<button class="button jobPromptButton">Create Model</button>
</div>
</div>
<div class="sideBar"></div>
<div class="footer"> FOOTER </div>
</div>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment