Spaces:
Sleeping
Sleeping
HuggingFace-SK
commited on
Commit
·
3e9e64f
1
Parent(s):
9ca0acd
add markdown support
Browse files- static/index.js +6 -7
- static/style.css +28 -1
- templates/index.html +4 -2
static/index.js
CHANGED
|
@@ -111,7 +111,8 @@ function send_frame(dataUrl) {
|
|
| 111 |
key: dataUrl,
|
| 112 |
user_item_info: document.getElementById("user_item_info").value
|
| 113 |
};
|
| 114 |
-
|
|
|
|
| 115 |
fetch('/analyse', {
|
| 116 |
method: 'POST',
|
| 117 |
headers: {
|
|
@@ -121,12 +122,10 @@ function send_frame(dataUrl) {
|
|
| 121 |
})
|
| 122 |
.then(response => response.text())
|
| 123 |
.then(data => {
|
| 124 |
-
|
| 125 |
-
|
| 126 |
-
|
| 127 |
-
|
| 128 |
-
span.style.fontSize = '16px';
|
| 129 |
-
document.body.appendChild(span);
|
| 130 |
|
| 131 |
})
|
| 132 |
.catch((error) => {
|
|
|
|
| 111 |
key: dataUrl,
|
| 112 |
user_item_info: document.getElementById("user_item_info").value
|
| 113 |
};
|
| 114 |
+
document.getElementById("ai_output").style.display="block"
|
| 115 |
+
document.getElementById("ai_output").classList.toggle('animated');
|
| 116 |
fetch('/analyse', {
|
| 117 |
method: 'POST',
|
| 118 |
headers: {
|
|
|
|
| 122 |
})
|
| 123 |
.then(response => response.text())
|
| 124 |
.then(data => {
|
| 125 |
+
var htmlContent = marked.parse(data)
|
| 126 |
+
|
| 127 |
+
document.getElementById("ai_output").innerHTML=htmlContent;
|
| 128 |
+
document.getElementById("ai_output").classList.toggle('animated');
|
|
|
|
|
|
|
| 129 |
|
| 130 |
})
|
| 131 |
.catch((error) => {
|
static/style.css
CHANGED
|
@@ -74,4 +74,31 @@ color:black;
|
|
| 74 |
box-shadow: 0px 4px 20px 4px rgba(0, 0, 0, 0.38);
|
| 75 |
font-weight: 600;
|
| 76 |
color:black;
|
| 77 |
-
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 74 |
box-shadow: 0px 4px 20px 4px rgba(0, 0, 0, 0.38);
|
| 75 |
font-weight: 600;
|
| 76 |
color:black;
|
| 77 |
+
}
|
| 78 |
+
|
| 79 |
+
.ai_output{
|
| 80 |
+
margin: 0;
|
| 81 |
+
position: relative;
|
| 82 |
+
display:block;
|
| 83 |
+
min-height: 60px;
|
| 84 |
+
text-align: left;
|
| 85 |
+
margin-top: 20px;
|
| 86 |
+
padding:10px;
|
| 87 |
+
border:none;
|
| 88 |
+
border-radius: 12.25px;
|
| 89 |
+
background-color: #f2f2f2;
|
| 90 |
+
box-shadow: 0px 4px 20px 4px rgba(0, 0, 0, 0.38);
|
| 91 |
+
font-weight: 400;
|
| 92 |
+
color:rgb(38, 38, 38);
|
| 93 |
+
}
|
| 94 |
+
|
| 95 |
+
.animated{
|
| 96 |
+
background: linear-gradient(110deg, #ececec 8%, #d0d0d0 18%, #ececec 33%);
|
| 97 |
+
background-size: 200% 100%;
|
| 98 |
+
animation: 1.5s shine linear infinite;
|
| 99 |
+
}
|
| 100 |
+
@keyframes shine {
|
| 101 |
+
to {
|
| 102 |
+
background-position-x: -200%;
|
| 103 |
+
}
|
| 104 |
+
}
|
templates/index.html
CHANGED
|
@@ -6,6 +6,7 @@
|
|
| 6 |
<title>NutriFind</title>
|
| 7 |
<link rel="stylesheet" href="static/style.css" />
|
| 8 |
<script type="module" src="static/index.js"></script>
|
|
|
|
| 9 |
</head>
|
| 10 |
<body>
|
| 11 |
|
|
@@ -33,10 +34,11 @@ box-shadow: 0px 4px 20px 4px rgba(0, 0, 0, 0.38); z-index:100">
|
|
| 33 |
<button class="btn" id="take-pic">Click</button>
|
| 34 |
<button class="btn" id="clear-pic" style="display:none">Clear ✖</button>
|
| 35 |
<button class="btn" id="send-pic" style="display:none">Send ➤</button>
|
| 36 |
-
<span
|
| 37 |
-
<input type="range" id="resolution" min="0" max="4000" step="100" value="0">
|
| 38 |
<span style="display:block"id="currentResolution"></span>
|
| 39 |
</span>
|
|
|
|
| 40 |
|
| 41 |
</center>
|
| 42 |
</body>
|
|
|
|
| 6 |
<title>NutriFind</title>
|
| 7 |
<link rel="stylesheet" href="static/style.css" />
|
| 8 |
<script type="module" src="static/index.js"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
| 10 |
</head>
|
| 11 |
<body>
|
| 12 |
|
|
|
|
| 34 |
<button class="btn" id="take-pic">Click</button>
|
| 35 |
<button class="btn" id="clear-pic" style="display:none">Clear ✖</button>
|
| 36 |
<button class="btn" id="send-pic" style="display:none">Send ➤</button>
|
| 37 |
+
<span style="display:none">
|
| 38 |
+
<input type="range" id="resolution" min="0" max="4000" step="100" value="0" >
|
| 39 |
<span style="display:block"id="currentResolution"></span>
|
| 40 |
</span>
|
| 41 |
+
<div id="ai_output" class="ai_output" style="display:none" id="output"></div>
|
| 42 |
|
| 43 |
</center>
|
| 44 |
</body>
|