temp snapshot

app.ts

@@ -1,7 +1,61 @@
 const c = console;
 
-document.addEventListener("load", function () {
-	c.log("Hello");
+// const ENDPOINT = "https://huggingface.co";
+const ENDPOINT = "http://localhost:5564";
+
+async function whoami(token: string): Promise<{ name: string }> {
+	const path = `${ENDPOINT}/api/whoami-v2`;
+	const res = await fetch(path, {
+		headers: {
+			Authorization: `Bearer ${token}`,
+			Origin: `127.0.0.1:8000`
+		}
+	});
+	return await res.json();
+}
+
+async function createRepo(
+	token: string,
+	repoId: string,
+	repoType: "model" | "dataset" | "space",
+): Promise<string> {
+	const path = `${ENDPOINT}/api/repos/create`;
+	const res = await fetch(path, {
+		method: "POST",
+		headers: {
+			Authorization: `Bearer ${token}`,
+		},
+		body: JSON.stringify({
+			name: repoId,
+			type: repoType,
+		})
+	});
+	return (await res.json())["url"];
+}
+
+window.addEventListener("load", function () {
+	const tokenEl = document.querySelector<HTMLInputElement>("#token")!;
+	const repoNameEl = document.querySelector<HTMLInputElement>("#repo_name")!;
+	const button = document.querySelector("#submit")!;
+	const output = document.querySelector("#logs")!;
+
+	button.addEventListener("click", async function () {
+		const token = tokenEl.value;
+		const repoName = repoNameEl.value;
+		if (!token || !repoName) {
+			alert("You need a token and a repo name");
+			return;
+		}
+
+		button.setAttribute("disabled", "disabled");
+		try {
+			// c.log(await createRepo(token, repoName, "model"));
+			c.log(await whoami(token));
+		} catch (err) {
+			output.append(err);
+		}
+		button.removeAttribute("disabled");
+	});
 });
 
 

dist/app.js

@@ -1,4 +1,50 @@
 const c = console;
+// const ENDPOINT = "https://huggingface.co";
+const ENDPOINT = "http://localhost:5564";
+async function whoami(token) {
+    const path = `${ENDPOINT}/api/whoami-v2`;
+    const res = await fetch(path, {
+        headers: {
+            Authorization: `Bearer ${token}`,
+            Origin: `127.0.0.1:8000`
+        }
+    });
+    return await res.json();
+}
+async function createRepo(token, repoId, repoType) {
+    const path = `${ENDPOINT}/api/repos/create`;
+    const res = await fetch(path, {
+        method: "POST",
+        headers: {
+            Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({
+            name: repoId,
+            type: repoType,
+        })
+    });
+    return (await res.json())["url"];
+}
 window.addEventListener("load", function () {
-    c.log("Hello");
+    const tokenEl = document.querySelector("#token");
+    const repoNameEl = document.querySelector("#repo_name");
+    const button = document.querySelector("#submit");
+    const output = document.querySelector("#logs");
+    button.addEventListener("click", async function () {
+        const token = tokenEl.value;
+        const repoName = repoNameEl.value;
+        if (!token || !repoName) {
+            alert("You need a token and a repo name");
+            return;
+        }
+        button.setAttribute("disabled", "disabled");
+        try {
+            // c.log(await createRepo(token, repoName, "model"));
+            c.log(await whoami(token));
+        }
+        catch (err) {
+            output.append(err);
+        }
+        button.removeAttribute("disabled");
+    });
 });

index.html

@@ -82,32 +82,65 @@
 					<code class="ml-2 text-gray-800">group1-shard2of2</code>
 				</a>
 			</div>
-			
-			<p class="mt-8">
-				BTW, the TFJS demo of this model is <a href="https://storage.googleapis.com/tfjs-models/demos/mobilenet/index.html" class="underline" target="_blank">here</a>.
-			</p>
-			
+
 			<p class="mt-8">
-				Now that we have the model files, we need to get a HF user's access token.
-				You can create a token at <a target="_blank" href="https://huggingface.co/settings/tokens" class="underline text-blue-500">hf.co/settings/tokens</a> (needs write access).
+				BTW, the TFJS demo of this model is
+				<a
+					href="https://storage.googleapis.com/tfjs-models/demos/mobilenet/index.html"
+					class="underline"
+					target="_blank"
+					>here</a
+				>.
 			</p>
-			
-			<input type="text" id="token" class="rounded border-2 border-blue-500 shadow-md px-3 py-2 w-96 mt-6" placeholder="token" required />
-			
+
 			<p class="mt-8">
-				Finally, pick a repo name for your model:
+				Now that we have the model files, we need to get a HF user's access
+				token. You can create a token at
+				<a
+					target="_blank"
+					href="https://huggingface.co/settings/tokens"
+					class="underline text-blue-500"
+					>hf.co/settings/tokens</a
+				>
+				(needs write access).
 			</p>
-			
-			<input type="text" id="repo_name" class="rounded border-2 border-blue-500 shadow-md px-3 py-2 w-96 mt-6" placeholder="repo name" required />
-			
+
+			<input
+				type="text"
+				id="token"
+				class="rounded border-2 border-blue-500 shadow-md px-3 py-2 w-96 mt-6"
+				placeholder="token"
+				required
+			/>
+
+			<p class="mt-8">Finally, pick a repo name for your model:</p>
+
+			<input
+				type="text"
+				id="repo_name"
+				class="rounded border-2 border-blue-500 shadow-md px-3 py-2 w-96 mt-6"
+				placeholder="repo name"
+				required
+				value="tfjs-mobilenet"
+			/>
+
 			<p class="mt-8">
-				Press Upload to create a repo, and upload your files. It will also upload a model card for your model (you can then update it on your model page):
+				Press Upload to create a repo, and upload your files. It will also
+				upload a model card for your model (you can then update it on your model
+				page):
 			</p>
-			
-			<button id="submit" class="my-8 bg-green-500 rounded py-3 px-5 text-white shadow-md">Upload</button>
-			
+
+			<button
+				id="submit"
+				class="my-8 bg-green-500 rounded py-3 px-5 text-white shadow-md disabled:bg-slate-300"
+			>
+				Upload
+			</button>
+
 			<p class="text-gray-400 text-sm">Output logs</p>
-			<pre id="logs" class="bg-gray-100 rounded p-3 mb-8 text-sm">Output will be here</pre>
+			<pre id="logs" class="bg-gray-100 rounded p-3 mb-8 text-sm">
+Output will be here</pre
+			>
 		</div>
 	</body>
 </html>