Spaces:
Runtime error
Runtime error
Commit ·
2941c67
1
Parent(s): 029622e
Upd result handler UI. Add webicon
Browse files- .DS_Store +0 -0
- app.py +1 -0
- static/icon.png +0 -0
- static/index.html +5 -1
- static/script.js +8 -2
- static/styles.css +43 -2
.DS_Store
CHANGED
|
Binary files a/.DS_Store and b/.DS_Store differ
|
|
|
app.py
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
|
|
| 1 |
import os
|
| 2 |
from pathlib import Path
|
| 3 |
from tempfile import TemporaryDirectory
|
|
|
|
| 1 |
+
# Root API: https://binkhoale1812-similaritychecker.hf.space/
|
| 2 |
import os
|
| 3 |
from pathlib import Path
|
| 4 |
from tempfile import TemporaryDirectory
|
static/icon.png
ADDED
|
static/index.html
CHANGED
|
@@ -5,6 +5,7 @@
|
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
<title>Face Similarity Comparator</title>
|
| 7 |
<link rel="stylesheet" href="/static/styles.css" />
|
|
|
|
| 8 |
</head>
|
| 9 |
<body>
|
| 10 |
<header>
|
|
@@ -40,7 +41,10 @@
|
|
| 40 |
|
| 41 |
<section id="results" class="hidden">
|
| 42 |
<canvas id="lines-canvas"></canvas>
|
| 43 |
-
<
|
|
|
|
|
|
|
|
|
|
| 44 |
</section>
|
| 45 |
|
| 46 |
<script src="/static/script.js"></script>
|
|
|
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
<title>Face Similarity Comparator</title>
|
| 7 |
<link rel="stylesheet" href="/static/styles.css" />
|
| 8 |
+
<link rel="website icon" type="png" href="/static/icon.png" >
|
| 9 |
</head>
|
| 10 |
<body>
|
| 11 |
<header>
|
|
|
|
| 41 |
|
| 42 |
<section id="results" class="hidden">
|
| 43 |
<canvas id="lines-canvas"></canvas>
|
| 44 |
+
<div id="result-layout">
|
| 45 |
+
<div id="tester-column"></div>
|
| 46 |
+
<div id="sampler-column"></div>
|
| 47 |
+
</div>
|
| 48 |
</section>
|
| 49 |
|
| 50 |
<script src="/static/script.js"></script>
|
static/script.js
CHANGED
|
@@ -75,16 +75,22 @@ function getBorderColor(percent) {
|
|
| 75 |
|
| 76 |
function renderResults({ tester, results }) {
|
| 77 |
resultsSection.classList.remove("hidden");
|
|
|
|
|
|
|
|
|
|
|
|
|
| 78 |
const testerSquare = createSquare(testerInput.files[0], "#3b82f6");
|
| 79 |
-
|
|
|
|
| 80 |
|
| 81 |
results.forEach((r, idx) => {
|
| 82 |
const square = createSquare(samplerInput.files[idx], getBorderColor(r.similarity));
|
| 83 |
-
|
| 84 |
drawLineBetween(testerSquare, square, r.similarity);
|
| 85 |
});
|
| 86 |
}
|
| 87 |
|
|
|
|
| 88 |
function createSquare(file, borderColor) {
|
| 89 |
const url = URL.createObjectURL(file);
|
| 90 |
const div = document.createElement("div");
|
|
|
|
| 75 |
|
| 76 |
function renderResults({ tester, results }) {
|
| 77 |
resultsSection.classList.remove("hidden");
|
| 78 |
+
|
| 79 |
+
const testerColumn = document.getElementById("tester-column");
|
| 80 |
+
const samplerColumn = document.getElementById("sampler-column");
|
| 81 |
+
|
| 82 |
const testerSquare = createSquare(testerInput.files[0], "#3b82f6");
|
| 83 |
+
testerSquare.classList.add("tester-node");
|
| 84 |
+
testerColumn.appendChild(testerSquare);
|
| 85 |
|
| 86 |
results.forEach((r, idx) => {
|
| 87 |
const square = createSquare(samplerInput.files[idx], getBorderColor(r.similarity));
|
| 88 |
+
samplerColumn.appendChild(square);
|
| 89 |
drawLineBetween(testerSquare, square, r.similarity);
|
| 90 |
});
|
| 91 |
}
|
| 92 |
|
| 93 |
+
|
| 94 |
function createSquare(file, borderColor) {
|
| 95 |
const url = URL.createObjectURL(file);
|
| 96 |
const div = document.createElement("div");
|
static/styles.css
CHANGED
|
@@ -89,6 +89,33 @@
|
|
| 89 |
justify-content: flex-start;
|
| 90 |
overflow-x: auto;
|
| 91 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 92 |
|
| 93 |
.square {
|
| 94 |
width: 120px;
|
|
@@ -120,7 +147,21 @@
|
|
| 120 |
font-size: 0.8rem;
|
| 121 |
transform: translate(-50%, -50%);
|
| 122 |
}
|
| 123 |
-
|
| 124 |
@media (max-width: 600px) {
|
| 125 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 126 |
}
|
|
|
|
| 89 |
justify-content: flex-start;
|
| 90 |
overflow-x: auto;
|
| 91 |
}
|
| 92 |
+
|
| 93 |
+
#result-layout {
|
| 94 |
+
display: flex;
|
| 95 |
+
justify-content: center;
|
| 96 |
+
align-items: center;
|
| 97 |
+
position: relative;
|
| 98 |
+
width: 100%;
|
| 99 |
+
padding: 2rem 0;
|
| 100 |
+
gap: 3rem;
|
| 101 |
+
flex-wrap: wrap;
|
| 102 |
+
}
|
| 103 |
+
|
| 104 |
+
#tester-column {
|
| 105 |
+
display: flex;
|
| 106 |
+
justify-content: center;
|
| 107 |
+
align-items: center;
|
| 108 |
+
}
|
| 109 |
+
.tester-node {
|
| 110 |
+
box-shadow: 0 0 10px rgba(59,130,246,0.5);
|
| 111 |
+
}
|
| 112 |
+
|
| 113 |
+
#sampler-column {
|
| 114 |
+
display: flex;
|
| 115 |
+
flex-direction: column;
|
| 116 |
+
gap: 2rem;
|
| 117 |
+
align-items: center;
|
| 118 |
+
}
|
| 119 |
|
| 120 |
.square {
|
| 121 |
width: 120px;
|
|
|
|
| 147 |
font-size: 0.8rem;
|
| 148 |
transform: translate(-50%, -50%);
|
| 149 |
}
|
| 150 |
+
|
| 151 |
@media (max-width: 600px) {
|
| 152 |
+
#result-layout {
|
| 153 |
+
flex-direction: column;
|
| 154 |
+
gap: 2rem;
|
| 155 |
+
}
|
| 156 |
+
|
| 157 |
+
#sampler-column {
|
| 158 |
+
flex-direction: row;
|
| 159 |
+
flex-wrap: wrap;
|
| 160 |
+
justify-content: center;
|
| 161 |
+
}
|
| 162 |
+
|
| 163 |
+
.square {
|
| 164 |
+
width: 80px;
|
| 165 |
+
height: 80px;
|
| 166 |
+
}
|
| 167 |
}
|