Spaces:
Running
Running
coyotte508
commited on
Commit
·
c144f47
1
Parent(s):
124aade
use fetch event source
Browse files- app.js +10 -10
- index.html +9 -0
app.js
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
|
|
|
|
|
| 1 |
// On loaded, add event listeners
|
| 2 |
window.document.addEventListener("DOMContentLoaded", () => {
|
| 3 |
const form = window.document.querySelector("form");
|
|
@@ -72,24 +74,22 @@ window.document.addEventListener("DOMContentLoaded", () => {
|
|
| 72 |
|
| 73 |
const jobId = result["metadata"]["job_id"];
|
| 74 |
|
| 75 |
-
|
|
|
|
|
|
|
|
|
|
| 76 |
headers: {
|
| 77 |
Authorization: `Bearer ${hfToken.value}`,
|
| 78 |
},
|
| 79 |
});
|
| 80 |
|
| 81 |
-
|
| 82 |
-
|
| 83 |
-
|
| 84 |
-
|
| 85 |
-
const logSource = new EventSource(`https://huggingface.co/api/jobs/${jobId}/logs-stream`, {
|
| 86 |
headers: {
|
| 87 |
Authorization: `Bearer ${hfToken.value}`,
|
| 88 |
},
|
| 89 |
});
|
| 90 |
-
|
| 91 |
-
logSource.onmessage = (event) => {
|
| 92 |
-
logOuput.textContent += `${event.data}\n`;
|
| 93 |
-
};
|
| 94 |
});
|
| 95 |
});
|
|
|
|
| 1 |
+
import { fetchEventSource } from '@microsoft/fetch-event-source';
|
| 2 |
+
|
| 3 |
// On loaded, add event listeners
|
| 4 |
window.document.addEventListener("DOMContentLoaded", () => {
|
| 5 |
const form = window.document.querySelector("form");
|
|
|
|
| 74 |
|
| 75 |
const jobId = result["metadata"]["job_id"];
|
| 76 |
|
| 77 |
+
fetchEventSource(`https://huggingface.co/api/jobs/${jobId}/sse`, {
|
| 78 |
+
onmessage: (event) => {
|
| 79 |
+
eventOutput.textContent += `${event.data}\n`;
|
| 80 |
+
},
|
| 81 |
headers: {
|
| 82 |
Authorization: `Bearer ${hfToken.value}`,
|
| 83 |
},
|
| 84 |
});
|
| 85 |
|
| 86 |
+
fetchEventSource(`https://huggingface.co/api/jobs/${jobId}/logs-stream`, {
|
| 87 |
+
onmessage: (event) => {
|
| 88 |
+
logOuput.textContent += `${event.data}\n`;
|
| 89 |
+
},
|
|
|
|
| 90 |
headers: {
|
| 91 |
Authorization: `Bearer ${hfToken.value}`,
|
| 92 |
},
|
| 93 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
| 94 |
});
|
| 95 |
});
|
index.html
CHANGED
|
@@ -5,6 +5,15 @@
|
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
<script src="https://cdn.tailwindcss.com"></script>
|
| 7 |
<script type="module" src="./app.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 8 |
</head>
|
| 9 |
<body>
|
| 10 |
<div class="container mx-auto pt-8 flex flex-col gap-4">
|
|
|
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
<script src="https://cdn.tailwindcss.com"></script>
|
| 7 |
<script type="module" src="./app.js"></script>
|
| 8 |
+
<!-- polyfill for firefox + import maps -->
|
| 9 |
+
<script src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
|
| 10 |
+
<script type="importmap">
|
| 11 |
+
{
|
| 12 |
+
"imports": {
|
| 13 |
+
"@microsoft/fetch-event-source": "https://cdn.jsdelivr.net/npm/@microsoft/[email protected]/+esm"
|
| 14 |
+
}
|
| 15 |
+
}
|
| 16 |
+
</script>
|
| 17 |
</head>
|
| 18 |
<body>
|
| 19 |
<div class="container mx-auto pt-8 flex flex-col gap-4">
|