Hugging Face's logo

Spaces:
huggingface
/
space-build
Running

App Files Community
coyotte508 commited on
Commit
06a4efd
·
1 Parent(s): 903c838

add webpage

Browse files
Files changed (3) hide show
  1. Dockerfile +7 -2
  2. app.js +94 -0
  3. index.html +72 -0
Dockerfile CHANGED
@@ -22,5 +22,10 @@ WORKDIR /app
22
  COPY build.sh /app/build.sh
23
  RUN chmod +x /app/build.sh
24
 
25
- # Command to run the build script
26
- CMD ["/app/build.sh"]
 
 
 
 
 
 
22
  COPY build.sh /app/build.sh
23
  RUN chmod +x /app/build.sh
24
 
25
+ COPY app.js /app/app.js
26
+ COPY index.html /app/index.html
27
+
28
+ # Command to run the build script, when launched from a job
29
+ # CMD ["/app/build.sh"]
30
+
31
+ CMD ["python3", "-m", "http.server", "7860", "--directory", "/app"]
app.js ADDED
@@ -0,0 +1,94 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // On loaded, add event listeners
2
+ window.document.addEventListener("DOMContentLoaded", () => {
3
+ const form = window.document.querySelector("form");
4
+ const spaceName = window.document.querySelector("#space-name");
5
+ const buildCommand = window.document.querySelector("#build-command");
6
+ const hfToken = window.document.querySelector("#hf-token");
7
+ const outputPath = window.document.querySelector("#output-path");
8
+
9
+ const output = window.document.querySelector("#output");
10
+ const logOuput = window.document.querySelector("#log-output");
11
+ const eventOutput = window.document.querySelector("#event-output");
12
+
13
+ form.addEventListener("submit", async (event) => {
14
+ event.preventDefault();
15
+
16
+ output.textContent = "";
17
+ logOuput.textContent = "";
18
+ eventOutput.textContent = "";
19
+
20
+ const data = {
21
+ environment: {
22
+ HF_SPACE_NAME: spaceName.value,
23
+ BUILD_COMMAND: buildCommand.value,
24
+ HF_TOKEN: hfToken.value,
25
+ // Remove filename
26
+ OUTPUT_PATH: outputPath.value.replace(/\/[^/]*$/, ""),
27
+ },
28
+ arguments: [],
29
+ command: ["/app/build.sh"],
30
+ flavor: "cpu-basic"
31
+ };
32
+
33
+ const tokenOwnerResp = await fetch("https://huggingface.co/api/whoami-v2", {
34
+ method: "GET",
35
+ headers: {
36
+ Authorization: `Bearer ${data.hfToken}`,
37
+ },
38
+ });
39
+
40
+ if (!tokenOwnerResp.ok) {
41
+ output.textContent = "Invalid token";
42
+ return;
43
+ }
44
+
45
+ const tokenOwer = (await tokenOwnerResp.json())["name"];
46
+
47
+ if (!tokenOwer) {
48
+ output.textContent = "Invalid token";
49
+ return;
50
+ }
51
+
52
+ output.textContent += `Token owner: ${tokenOwer}\n`;
53
+
54
+ const jobResponse = await fetch(`https://huggingface.co/api/jobs/${tokenOwer}`, {
55
+ method: "POST",
56
+ headers: {
57
+ "Content-Type": "application/json",
58
+ Authorization: `Bearer ${data.hfToken}`,
59
+ },
60
+ body: JSON.stringify(data),
61
+ });
62
+
63
+ const result = await jobResponse.json();
64
+
65
+ if (!jobResponse.ok) {
66
+ output.textContent = `Error: ${result.error}`;
67
+ return;
68
+ }
69
+
70
+ result.textContent += JSON.stringify(result, null, 2);
71
+
72
+ const jobId = result["id"];
73
+
74
+ const eventSource = new EventSource(`https://huggingface.co/api/jobs/${jobId}/sse`, {
75
+ headers: {
76
+ Authorization: `Bearer ${data.hfToken}`,
77
+ },
78
+ });
79
+
80
+ eventSource.onmessage = (event) => {
81
+ eventOutput.textContent += `${event.data}\n`;
82
+ };
83
+
84
+ const logSource = new EventSource(`https://huggingface.co/api/jobs/${jobId}/logs-stream`, {
85
+ headers: {
86
+ Authorization: `Bearer ${data.hfToken}`,
87
+ },
88
+ });
89
+
90
+ logSource.onmessage = (event) => {
91
+ logOuput.textContent += `${event.data}\n`;
92
+ };
93
+ });
94
+ });
index.html ADDED
@@ -0,0 +1,72 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8" />
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">
11
+ <form id="build-form" class="flex flex-col gap-4">
12
+ <input
13
+ id="hf-token"
14
+ type="text"
15
+ placeholder="hf_..."
16
+ required
17
+ class="border rounded p-2"
18
+ />
19
+ <input
20
+ id="space-name"
21
+ type="text"
22
+ placeholder="Space Name"
23
+ required
24
+ class="border rounded p-2"
25
+ />
26
+ <input
27
+ id="build-command"
28
+ type="text"
29
+ value="npm run build"
30
+ required
31
+ class="border rounded p-2"
32
+ />
33
+ <input
34
+ id="output-path"
35
+ type="text"
36
+ value="dist/index.html"
37
+ required
38
+ class="border rounded p-2"
39
+ />
40
+ <button
41
+ type="submit"
42
+ class="bg-blue-500 text-white rounded p-2 hover:bg-blue-600"
43
+ >
44
+ Submit
45
+ </button>
46
+ </form>
47
+
48
+ <p>Output</p>
49
+ <pre
50
+ id="output"
51
+ style="max-height: 400px; height: 400px; overflow: auto"
52
+ class="bg-slate-50 rounded p-2"
53
+ ></pre>
54
+
55
+ <p>Job logs</p>
56
+
57
+ <pre
58
+ id="log-output"
59
+ style="max-height: 400px; height: 400px; overflow: auto"
60
+ class="bg-slate-50 rounded p-2"
61
+ ></pre>
62
+
63
+ <p>Job events</p>
64
+
65
+ <pre
66
+ id="event-output"
67
+ style="max-height: 400px; height: 400px; overflow: auto"
68
+ class="bg-slate-50 rounded p-2"
69
+ ></pre>
70
+ </div>
71
+ </body>
72
+ </html>