started frontend
This commit is contained in:
parent
002c72094d
commit
b9f2745ac8
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -30,7 +30,7 @@ class RecipeList(Resource):
|
|||
print("get recipes",end - start, "\n")
|
||||
|
||||
start = time.time()
|
||||
recs = search.getRecDict(indx, ingreds )
|
||||
recs = search.getRecDict(indx, ingreds)
|
||||
end = time.time()
|
||||
print("calc overlay",end - start, "\n")
|
||||
|
||||
|
|
|
|||
|
|
@ -12,35 +12,3 @@ function getJSON(url, callback, fallback) {
|
|||
};
|
||||
xhr.send();
|
||||
};
|
||||
|
||||
function putJSON(url, data, callback, fallback) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('PUT', url, true);
|
||||
xhr.responseType = 'json';
|
||||
xhr.setRequestHeader('Content-Type', 'application/json');
|
||||
xhr.onload = function () {
|
||||
var status = xhr.status;
|
||||
if (status < 400) {
|
||||
callback(null, xhr.response);
|
||||
} else {
|
||||
fallback();
|
||||
}
|
||||
};
|
||||
xhr.send(data);
|
||||
};
|
||||
|
||||
function postJSON(url, data, callback, fallback) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', url, true);
|
||||
xhr.responseType = 'json';
|
||||
xhr.setRequestHeader('Content-Type', 'application/json');
|
||||
xhr.onload = function () {
|
||||
var status = xhr.status;
|
||||
if (status < 400) {
|
||||
callback(null, xhr.response);
|
||||
} else {
|
||||
fallback();
|
||||
}
|
||||
};
|
||||
xhr.send(data);
|
||||
};
|
||||
|
|
@ -1,25 +1,5 @@
|
|||
#list{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top:0;
|
||||
width: 20rem;
|
||||
min-height: 100%;
|
||||
|
||||
}
|
||||
|
||||
#switch{
|
||||
width: 25rem;
|
||||
height: 5rem;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: -50%;
|
||||
|
||||
}
|
||||
.navButton{
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
#main{
|
||||
width: 65rem;
|
||||
height: 38rem;
|
||||
|
|
@ -28,37 +8,10 @@
|
|||
left: -50%;
|
||||
display: block;
|
||||
padding: 0;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.listIMG{
|
||||
width: 5rem;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.navi{
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
.personalInfo{
|
||||
float: right;
|
||||
width: 9rem;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
.card{
|
||||
margin-top:1rem;
|
||||
}
|
||||
.card-text{
|
||||
padding: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
#middle-left{
|
||||
float: left;
|
||||
}
|
||||
#middle-right{
|
||||
float:right;
|
||||
}
|
||||
.middle{
|
||||
padding: 2rem ;
|
||||
margin: 0 !important;
|
||||
|
|
@ -66,21 +19,16 @@
|
|||
width: 45%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#image-left{
|
||||
width:100%;
|
||||
|
||||
#nav-container{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
#image-right{
|
||||
width:100%;
|
||||
|
||||
#search-form{
|
||||
width:25rem;
|
||||
|
||||
}
|
||||
|
||||
.heroInfo{
|
||||
|
||||
#nav-button{
|
||||
float: right;
|
||||
width: 12%;
|
||||
}
|
||||
|
||||
.middle-controls{
|
||||
margin-left: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
|
@ -1,150 +1,24 @@
|
|||
|
||||
rootKontext = ""
|
||||
selected = null
|
||||
var ml = document.getElementById('middle-left');
|
||||
var mr = document.getElementById('middle-right');
|
||||
personData = {}
|
||||
|
||||
/**
|
||||
* Retrieves input data from a form and returns it as a JSON object.
|
||||
* @param {HTMLFormControlsCollection} elements the form elements
|
||||
* @return {Object} form data as an object literal
|
||||
*/
|
||||
const formToJSON = elements => [].reduce.call(elements, (data, element) => {
|
||||
data[element.name] = element.value;
|
||||
return data;
|
||||
}, {});
|
||||
|
||||
function focusNav(id) {
|
||||
focusedID = id;
|
||||
$(id).addClass('btn-primary').siblings().removeClass('btn-primary')
|
||||
//$(id).removeClass('active').siblings().removeClass('active')
|
||||
}
|
||||
|
||||
function focusPerson(id) {
|
||||
selected = id;
|
||||
$("#person" + id).removeClass('border-light').siblings().addClass('border-light')
|
||||
$("#person" + id).addClass('border-success').siblings().removeClass('border-success')
|
||||
renderPersonRight()
|
||||
}
|
||||
|
||||
function loadPersonList(data) {
|
||||
console.log(data)
|
||||
data = data["data"]
|
||||
let el = document.getElementById('list');
|
||||
data.forEach(function (item) {
|
||||
string = `
|
||||
<div class="card border-light" onclick="focusPerson(${item["person_id"]})" id="person${item["person_id"]}">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">${item["fname"]} ${item["lname"]}</h4>
|
||||
<h6 class="card-subtitle mb-2 text-muted">${item["timestamp"]}</h6>
|
||||
|
||||
<p class="card-text">
|
||||
<img class="listImg" src="${item["face"]}"></img>
|
||||
<div class="personalInfo">
|
||||
Gender: ${item["gender"]} <br>
|
||||
YoB: ${item["yob"]} <br>
|
||||
Available FP: ${item["fingerprints"].length} <br>
|
||||
|
||||
</div>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
el.innerHTML += string;
|
||||
})
|
||||
}
|
||||
|
||||
function snapShot(){
|
||||
postJSON(rootKontext + "/api/v1/camera/", {},
|
||||
function (error, data) {
|
||||
document.getElementById('image-left').src = rootKontext + "/api/v1/camera/still";
|
||||
},
|
||||
null
|
||||
);
|
||||
}
|
||||
|
||||
function renderPersonRight(data){
|
||||
string = `
|
||||
<img src="${data["face"]}" id="image-right"> </img>
|
||||
|
||||
<h4 class="heroInfo">
|
||||
Gender: ${data["gender"]} <br>
|
||||
YoB: ${data["yob"]} <br>
|
||||
Available FP: ${data["fingerprints"].length} <br>
|
||||
<h3>Score: ${data["matching_score"]} </h3>
|
||||
</h4>
|
||||
|
||||
`
|
||||
mr.innerHTML = string;
|
||||
}
|
||||
|
||||
function enrole(){
|
||||
data = {}
|
||||
data["fname"] = document.getElementById("personform")["fname"].value
|
||||
data["lname"] = document.getElementById("personform")["lname"].value
|
||||
data["gender"] = document.getElementById("personform")["gender"].value
|
||||
data["yob"] = document.getElementById("personform")["yob"].value
|
||||
data = {"person": data}
|
||||
console.log(data)
|
||||
postJSON(rootKontext + "/api/v1/person/", JSON.stringify(data),
|
||||
function(){
|
||||
location.reload()
|
||||
},
|
||||
null
|
||||
)
|
||||
}
|
||||
|
||||
function identify(){
|
||||
snapShot()
|
||||
getJSON(rootKontext + "/api/v1/person/?useFace=True",
|
||||
function (error, data) {
|
||||
data = data["data"]
|
||||
renderPersonRight(data)
|
||||
$("#middle-right").removeClass("border-danger").addClass("boarder-success")
|
||||
},
|
||||
function(){
|
||||
$("#middle-right").removeClass("border-success").addClass("border-danger")
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function validate(){
|
||||
snapShot()
|
||||
getJSON(rootKontext + "/api/v1/person/" + selected + "?useFace=True",
|
||||
function (error, data) {
|
||||
data = data["data"]
|
||||
renderPersonRight(data)
|
||||
$("#middle-right").removeClass("border-danger").addClass("border-success")
|
||||
},
|
||||
function(){
|
||||
mr.innerHTML="<p><h3>Please select a person<br> from the list, which you want to use for validation</h3></p>"
|
||||
$("#middle-right").removeClass("border-success").addClass("border-danger")
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function loadStream() {
|
||||
string = `
|
||||
<img src="${rootKontext + "/api/v1/camera/stream"}" id="image-left"> </img>
|
||||
`
|
||||
ml.innerHTML += string;
|
||||
|
||||
string = `
|
||||
<img src="${rootKontext + "/api/v1/camera/still"}" id="image-right"> </img>
|
||||
`
|
||||
mr.innerHTML += string;
|
||||
}
|
||||
rl = document.getElementById("recipe-list")
|
||||
|
||||
function loadData() {
|
||||
getJSON(rootKontext + "/api/v1/person/",
|
||||
searchString = document.getElementById("search-field").value
|
||||
searchArray = searchString.split(',');
|
||||
getParams = ""
|
||||
searchArray.forEach(
|
||||
function(item, index){
|
||||
if (index > 0){
|
||||
getParams += "&ingred=" + item.trim()
|
||||
}
|
||||
else{
|
||||
getParams += "?ingred=" + item.trim()
|
||||
}
|
||||
});
|
||||
console.log(getParams)
|
||||
getJSON("/api/v1/recipe/"+getParams,
|
||||
function (error, data) {
|
||||
ml = document.getElementById('middle-left');
|
||||
mr = document.getElementById('middle-right');
|
||||
personData = data
|
||||
loadPersonList(data)
|
||||
renderIdentify()
|
||||
data = data["data"] // remove wrapper
|
||||
console.log(data)
|
||||
},
|
||||
null
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,61 +0,0 @@
|
|||
function clearMiddle(){
|
||||
ml.innerHTML = ""
|
||||
mr.innerHTML = ""
|
||||
}
|
||||
|
||||
function renderValidate(){
|
||||
clearMiddle()
|
||||
string = `
|
||||
<img src="${rootKontext + "/api/v1/camera/stream"}" id="image-left"> </img>
|
||||
|
||||
<button onclick="validate()" class="btn btn-primary float-right middle-controls">Verify</button>
|
||||
<button onclick="renderValidate()" class="btn btn-warning float-right middle-controls">Retry</button>
|
||||
`
|
||||
ml.innerHTML = string;
|
||||
$("#middle-right").removeClass("border-danger").removeClass("border-success")
|
||||
}
|
||||
|
||||
function renderChange(){
|
||||
clearMiddle()
|
||||
$("#middle-right").removeClass("border-danger").removeClass("border-success")
|
||||
console.log("change")
|
||||
|
||||
}
|
||||
function renderEnrole(){
|
||||
clearMiddle()
|
||||
string = `
|
||||
<img src="${rootKontext + "/api/v1/camera/stream"}" id="image-left"> </img>
|
||||
|
||||
<button onclick="snapShot()" class="btn btn-primary float-right middle-controls">Snap</button>
|
||||
<button onclick="renderEnrole()" class="btn btn-warning float-right middle-controls">Retry</button>
|
||||
`
|
||||
ml.innerHTML = string;
|
||||
|
||||
string2 = `
|
||||
<form id="personform">
|
||||
<input type="text" class="form-control" name="fname" placeholder="First Name" ><br>
|
||||
<input type="text" class="form-control" name="lname" placeholder="Last Name" ><br>
|
||||
<select class="form-control" id="gender" name="gender">
|
||||
<option>male</option>
|
||||
<option>female</option>
|
||||
<option>other</option>
|
||||
</select><br>
|
||||
<input type="text" class="form-control" name="yob" placeholder="YoB"><br>
|
||||
|
||||
</form>
|
||||
<button type="button" class="btn btn-success float-right" onclick="enrole()">Enrole</button>
|
||||
`
|
||||
mr.innerHTML = string2;
|
||||
$("#middle-right").removeClass("border-danger").removeClass("border-success")
|
||||
}
|
||||
function renderIdentify(){
|
||||
clearMiddle()
|
||||
string = `
|
||||
<img src="${rootKontext + "/api/v1/camera/stream"}" id="image-left"> </img>
|
||||
|
||||
<button onclick="identify()" class="btn btn-primary float-right middle-controls">Identify</button>
|
||||
<button onclick="renderIdentify()" class="btn btn-warning float-right middle-controls">Retry</button>
|
||||
`
|
||||
ml.innerHTML = string;
|
||||
$("#middle-right").removeClass("border-danger").removeClass("border-success")
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -8,7 +8,7 @@
|
|||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
|
||||
<link href="https://bootswatch.com/4/superhero/bootstrap.css" rel="stylesheet" id="bootstrap-css3">
|
||||
<link rel="stylesheet" title="default" href="/static/main.css">
|
||||
|
||||
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
|
||||
<!-- jQuery library -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||
|
||||
|
|
@ -24,39 +24,48 @@
|
|||
<script src="/static/coms.js"></script>
|
||||
<script src="/static/render.js"></script>
|
||||
<script src="/static/main.js"></script>
|
||||
|
||||
<script src="/static/vanta/three.r95.min.js"></script>
|
||||
<script src="/static/vanta/vanta.net.min.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div style="position: fixed; left: 50%; z-index: 9999;">
|
||||
<div class="navbar navbar-expand-lg navbar-dark bg-dark" id="switch">
|
||||
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
||||
<button type="button" class="btn btn-primary navButton active" id="option1" onclick="focusNav('#option1'); renderIdentify()"> Identify
|
||||
<button type="button" class="btn navButton" id="option2" onclick="focusNav('#option2'); renderValidate()"> Verify
|
||||
<button type="button" class="btn navButton" id="option3" onclick="focusNav('#option3'); renderEnrole()"> Enrole
|
||||
<button type="button" class="btn navButton" id="option4" onclick="focusNav('#option4'); renderChange()"> Change
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="position: fixed; left: 50%;">
|
||||
<div class="container bg-dark" id="main">
|
||||
<div class="middle card" id="middle-left">
|
||||
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary" id="nav-container">
|
||||
<form class="form-inline my-2 my-lg-0" id="search-form" onsubmit="loadData();return false" action="#">
|
||||
<input class="form-control" type="text" id="search-field" placeholder="Mehl, Eier, Zucker" style="width:88%">
|
||||
<button class="btn btn-secondary my-2 my-sm-0" id="nav-button" type="button" onclick="loadData()">🔍</button>
|
||||
</form>
|
||||
</nav>
|
||||
<div id="recipe-list">
|
||||
|
||||
</div>
|
||||
<div class="middle card" id="middle-right">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="container bg-dark" id="list">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script>loadData();</script>
|
||||
|
||||
</body>
|
||||
|
||||
<script>
|
||||
VANTA.BIRDS({
|
||||
el: "body",
|
||||
mouseControls: true,
|
||||
touchControls: true,
|
||||
minHeight: 200.00,
|
||||
minWidth: 200.00,
|
||||
scale: 1.00,
|
||||
scaleMobile: 1.00,
|
||||
color1: 0x91a75e,
|
||||
color2: 0xdc1818,
|
||||
colorMode: "lerpGradient",
|
||||
speedLimit: 8.00,
|
||||
separation: 8.00,
|
||||
alignment: 86.00,
|
||||
cohesion: 19.00
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
2
run.py
2
run.py
|
|
@ -1,5 +1,5 @@
|
|||
from application import app
|
||||
|
||||
app.run(host="localhost", port='5001', debug=True)
|
||||
app.run(host="localhost", port='5001', debug=True, threaded=True)
|
||||
|
||||
|
||||
|
|
|
|||
35
search.py
35
search.py
|
|
@ -4,36 +4,10 @@ import nltk as nltk
|
|||
from nltk.corpus import stopwords
|
||||
import time
|
||||
import heapq
|
||||
from collections import Counter
|
||||
|
||||
dbSession = Session()
|
||||
|
||||
def slow():
|
||||
recipes = dbSession.query(Recipe).all()
|
||||
|
||||
|
||||
arr = {}
|
||||
for recipe in recipes:
|
||||
rec = recipe
|
||||
recipe = recipe.ingredients()
|
||||
if len(recipe) > len(inputArr) + maxMissing:
|
||||
continue
|
||||
counter = 0
|
||||
for i in inputArr:
|
||||
for x in recipe:
|
||||
if i in x:
|
||||
counter += 1
|
||||
continue
|
||||
counter = str(counter)
|
||||
|
||||
if counter not in arr:
|
||||
arr[counter] = []
|
||||
|
||||
arr[counter].append(rec.ingredients())
|
||||
#print(rec.name)
|
||||
|
||||
# for y, x in arr.items():
|
||||
# for xx in x:
|
||||
# print(xx)
|
||||
|
||||
def faster(inputArr):
|
||||
indx = {}
|
||||
|
|
@ -75,6 +49,10 @@ def stemInput(inputArr):
|
|||
def getRecDict(indx, inputArr):
|
||||
#inputArr = stem(inputArr)
|
||||
outDict = {}
|
||||
k = Counter(indx)
|
||||
# Finding 1000 highest values
|
||||
indx = k.most_common(1000)
|
||||
indx = dict(indx)
|
||||
for key, value in indx.items():
|
||||
ingred = dbSession.query(Trunk.name).filter(Trunk.recipe_id==int(key)).all()
|
||||
outDict[calcOverlay(inputArr, ingred)] = int(key)
|
||||
|
|
@ -82,7 +60,8 @@ def getRecDict(indx, inputArr):
|
|||
outDict2 = {}
|
||||
for key in heapq.nlargest(10, outDict.keys()):
|
||||
key2 = outDict[key]
|
||||
outDict2[key] = (dbSession.query(Recipe).filter(Recipe.recipe_id==key2).first().name, key2, dbSession.query(Ingredient.name).filter(Ingredient.recipe_id==key2).all())
|
||||
rec = dbSession.query(Recipe).filter(Recipe.recipe_id==key2).first()
|
||||
outDict2[key] = (key2, rec.name, rec.instructions, rec.url, [r[0] for r in dbSession.query(Ingredient.name).filter(Ingredient.recipe_id==key2).all()])
|
||||
return outDict2
|
||||
|
||||
def printDict(indx, inputArr):
|
||||
|
|
|
|||
Loading…
Reference in New Issue