update files

dist/main.js

@@ -1,4 +1,4 @@
-// src/oauth.ts
+// src/token.ts
 var TokenManager = class {
   constructor() {
     this.token = null;
@@ -25,98 +25,53 @@ var TokenManager = class {
 };
 var tokenManager = new TokenManager();
 
-// src/main.ts
-async function getOrganizationInfo(accessToken) {
-  const response = await fetch("https://huggingface.co/api/whoami-v2", {
-    headers: {
-      Authorization: `Bearer ${accessToken}`
+// src/api-client.ts
+var Client = class {
+  constructor(baseUrl2, token) {
+    this.baseUrl = baseUrl2.endsWith("/") ? baseUrl2.slice(0, -1) : baseUrl2;
+    this.token = token;
+  }
+  getHeaders(contentType) {
+    const headers = {
+      Authorization: `Bearer ${this.token}`
+    };
+    if (contentType) {
+      headers["Content-Type"] = contentType;
     }
-  });
-  if (!response.ok) {
-    throw new Error(
-      `Failed to fetch organization info: ${response.statusText}`
-    );
-  }
-  return response.json();
-}
-async function getOrganizationMembers(accessToken, organization) {
-  const response = await fetch(
-    `https://huggingface.co/api/organizations/${organization}/members`,
-    {
-      headers: {
-        Authorization: `Bearer ${accessToken}`
-      }
+    return headers;
+  }
+  async handleResponse(response) {
+    if (!response.ok) {
+      throw new Error(`API request failed: ${response.statusText}`);
     }
-  );
-  if (!response.ok) {
-    throw new Error(
-      `Failed to fetch organization members: ${response.statusText}`
-    );
-  }
-  return response.json();
-}
-async function createResourceGroup(accessToken, organization, name, members) {
-  const response = await fetch(
-    `https://huggingface.co/api/organizations/${organization}/resource-groups`,
-    {
+    return response.json();
+  }
+  async get(path) {
+    const url = `${this.baseUrl}${path.startsWith("/") ? path : "/" + path}`;
+    const response = await fetch(url, {
+      headers: this.getHeaders()
+    });
+    return this.handleResponse(response);
+  }
+  async post(path, payload) {
+    const url = `${this.baseUrl}${path.startsWith("/") ? path : "/" + path}`;
+    const response = await fetch(url, {
       method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${accessToken}`
-      },
-      body: JSON.stringify({
-        name,
-        description: `Resource group for repository ${name}`,
-        autoJoin: {
-          enabled: true,
-          role: "admin"
-        }
-      })
-    }
-  );
-  if (!response.ok) {
-    throw new Error(`Failed to create resource group: ${response.statusText}`);
-  }
-}
-async function createRepository(accessToken, name, organization, resourceGroupName) {
-  const response = await fetch("https://huggingface.co/api/repos/create", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${accessToken}`
-    },
-    body: JSON.stringify({
-      type: "model",
-      name,
-      organization,
-      private: false
-    })
-  });
-  if (!response.ok) {
-    throw new Error(`Failed to create repository: ${response.statusText}`);
-  }
-  if (organization && resourceGroupName) {
-    const members = await getOrganizationMembers(accessToken, organization);
-    await createResourceGroup(
-      accessToken,
-      organization,
-      resourceGroupName,
-      members
-    );
-  }
-}
-var init = async () => {
-  if (tokenManager.isAuthenticated()) {
-    showAuthenticatedUI();
-  } else {
-    showUnauthenticatedUI();
+      headers: this.getHeaders("application/json"),
+      body: JSON.stringify(payload)
+    });
+    return this.handleResponse(response);
   }
 };
+
+// src/main.ts
+var baseUrl = "https://huggingface.co/api";
 var showAuthenticatedUI = async () => {
   const accessToken = tokenManager.getAccessToken();
   if (!accessToken) {
     throw new Error("Access token not found");
   }
+  const client = new Client(baseUrl, accessToken);
   const tokenForm = document.getElementById("token-form");
   if (tokenForm) {
     tokenForm.style.display = "none";
@@ -131,40 +86,42 @@ var showAuthenticatedUI = async () => {
     signoutButton.onclick = () => tokenManager.logout();
   }
   const createRepoButton = document.getElementById("create-repo");
-  const repoNameInput = document.getElementById(
-    "repo-name"
-  );
-  const resourceGroupInput = document.getElementById(
-    "resource-group-name"
-  );
+  const repoNameInput = document.getElementById("repo-name");
+  const resourceGroupInput = document.getElementById("resource-group-name");
   const resourceGroupContainer = document.getElementById(
     "resource-group-container"
   );
   if (createRepoButton && repoNameInput) {
     createRepoButton.onclick = async () => {
       const repoName = repoNameInput.value.trim();
-      const orgSelect2 = document.getElementById(
-        "org-select"
-      );
+      const orgSelect2 = document.getElementById("org-select");
       if (repoName) {
         try {
-          const selectedOrg = orgSelect2?.value || void 0;
-          const resourceGroupName = selectedOrg ? resourceGroupInput?.value.trim() : void 0;
-          console.log({ selectedOrg, resourceGroupName });
-          await createRepository(
-            accessToken,
-            repoName,
-            selectedOrg,
-            resourceGroupName
-          );
-          repoNameInput.value = "";
-          if (resourceGroupInput) {
-            resourceGroupInput.value = "";
+          const organizationName = orgSelect2?.value || void 0;
+          const resourceGroupName = organizationName ? resourceGroupInput?.value.trim() : void 0;
+          const repo = await client.post("repos/create", {
+            type: "model",
+            name: repoName,
+            organization: organizationName,
+            private: true
+          });
+          console.log({ repo });
+          if (organizationName && resourceGroupName) {
+            await client.post(
+              `organizations/${organizationName}/resource-groups`,
+              {
+                name: resourceGroupName,
+                description: `Resource group for repository ${name}`,
+                autoJoin: {
+                  enabled: true,
+                  role: "admin"
+                }
+              }
+            );
           }
           alert("Repository and resource group created successfully!");
         } catch (error) {
-          console.error("Failed to create repository:", error);
-          alert("Failed to create repository. Please try again.");
+          console.error(error);
         }
       }
     };
@@ -180,21 +137,17 @@ var showAuthenticatedUI = async () => {
     };
   }
   try {
-    const orgInfo = await getOrganizationInfo(accessToken);
-    if (orgSelect && orgInfo.orgs) {
-      orgInfo.orgs.forEach((org) => {
+    const userInfo = await client.get("whoami-v2");
+    if (orgSelect && userInfo.orgs) {
+      userInfo.orgs.forEach((org) => {
         const option = document.createElement("option");
         option.value = org.name;
         option.textContent = org.name;
         orgSelect.appendChild(option);
       });
     }
-    const preElement = document.querySelector("pre");
-    if (preElement) {
-      preElement.textContent = JSON.stringify(orgInfo, null, 2);
-    }
   } catch (error) {
-    console.error("Failed to fetch organization info:", error);
+    console.error(error);
   }
 };
 var showUnauthenticatedUI = () => {
@@ -220,4 +173,11 @@ var showUnauthenticatedUI = () => {
     signoutButton.style.display = "none";
   }
 };
-init().catch(console.error);
+var init = async () => {
+  if (tokenManager.isAuthenticated()) {
+    showAuthenticatedUI();
+  } else {
+    showUnauthenticatedUI();
+  }
+};
+init();

index.html

@@ -21,10 +21,10 @@
         </div>
         <div id="repo-form" style="display: none;" class="repo-form">
             <select id="org-select" class="repo-input">
-                <option value="">Personal Account</option>
+                <option value="">Own account</option>
             </select>
             <input type="text" id="repo-name" placeholder="Enter repository name" class="repo-input">
-            <div id="resource-group-container" style="display: none;">
+            <div id="resource-group-container" style="display: none; width: 100%;">
                 <input type="text" id="resource-group-name" placeholder="Enter resource group name" class="repo-input">
             </div>
             <button id="create-repo" class="repo-button">Create Repository</button>

src/api-client.ts

@@ -0,0 +1,44 @@
+export class Client {
+  private baseUrl: string;
+  private token: string;
+
+  constructor(baseUrl: string, token: string) {
+    this.baseUrl = baseUrl.endsWith("/") ? baseUrl.slice(0, -1) : baseUrl;
+    this.token = token;
+  }
+
+  private getHeaders(contentType?: string): HeadersInit {
+    const headers: HeadersInit = {
+      Authorization: `Bearer ${this.token}`,
+    };
+    if (contentType) {
+      headers["Content-Type"] = contentType;
+    }
+    return headers;
+  }
+
+  private async handleResponse<T>(response: Response): Promise<T> {
+    if (!response.ok) {
+      throw new Error(`API request failed: ${response.statusText}`);
+    }
+    return response.json();
+  }
+
+  async get<T>(path: string): Promise<T> {
+    const url = `${this.baseUrl}${path.startsWith("/") ? path : "/" + path}`;
+    const response = await fetch(url, {
+      headers: this.getHeaders(),
+    });
+    return this.handleResponse<T>(response);
+  }
+
+  async post<T>(path: string, payload: unknown): Promise<T> {
+    const url = `${this.baseUrl}${path.startsWith("/") ? path : "/" + path}`;
+    const response = await fetch(url, {
+      method: "POST",
+      headers: this.getHeaders("application/json"),
+      body: JSON.stringify(payload),
+    });
+    return this.handleResponse<T>(response);
+  }
+}

src/main.ts

@@ -1,147 +1,18 @@
-import { tokenManager } from "./oauth";
+import { tokenManager } from "./token";
+import { Client } from "./api-client";
+import { WhoAmIUser } from "@huggingface/hub";
 
-interface OrganizationInfo {
-  type: string;
-  id: string;
-  name: string;
-  role: string;
-}
-
-interface WhoAmIResponse {
-  type: string;
-  id: string;
-  name: string;
-  email?: string;
-  fullname?: string;
-  avatarUrl?: string;
-  orgs: OrganizationInfo[];
-}
-
-interface OrganizationMember {
-  user: string;
-  role: string;
-}
-
-async function getOrganizationInfo(
-  accessToken: string
-): Promise<WhoAmIResponse> {
-  const response = await fetch("https://huggingface.co/api/whoami-v2", {
-    headers: {
-      Authorization: `Bearer ${accessToken}`,
-    },
-  });
-
-  if (!response.ok) {
-    throw new Error(
-      `Failed to fetch organization info: ${response.statusText}`
-    );
-  }
-
-  return response.json();
-}
-
-async function getOrganizationMembers(
-  accessToken: string,
-  organization: string
-): Promise<OrganizationMember[]> {
-  const response = await fetch(
-    `https://huggingface.co/api/organizations/${organization}/members`,
-    {
-      headers: {
-        Authorization: `Bearer ${accessToken}`,
-      },
-    }
-  );
-
-  if (!response.ok) {
-    throw new Error(
-      `Failed to fetch organization members: ${response.statusText}`
-    );
-  }
-
-  return response.json();
-}
-
-async function createResourceGroup(
-  accessToken: string,
-  organization: string,
-  name: string,
-  members: OrganizationMember[]
-): Promise<void> {
-  const response = await fetch(
-    `https://huggingface.co/api/organizations/${organization}/resource-groups`,
-    {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${accessToken}`,
-      },
-      body: JSON.stringify({
-        name: name,
-        description: `Resource group for repository ${name}`,
-        autoJoin: {
-          enabled: true,
-          role: "admin",
-        },
-      }),
-    }
-  );
-
-  if (!response.ok) {
-    throw new Error(`Failed to create resource group: ${response.statusText}`);
-  }
-}
-
-async function createRepository(
-  accessToken: string,
-  name: string,
-  organization?: string,
-  resourceGroupName?: string
-): Promise<void> {
-  const response = await fetch("https://huggingface.co/api/repos/create", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${accessToken}`,
-    },
-    body: JSON.stringify({
-      type: "model",
-      name: name,
-      organization: organization,
-      private: false,
-    }),
-  });
-
-  if (!response.ok) {
-    throw new Error(`Failed to create repository: ${response.statusText}`);
-  }
-
-  // If organization and resource group name are provided, create a resource group
-  if (organization && resourceGroupName) {
-    const members = await getOrganizationMembers(accessToken, organization);
-    await createResourceGroup(
-      accessToken,
-      organization,
-      resourceGroupName,
-      members
-    );
-  }
-}
-
-const init = async (): Promise<void> => {
-  if (tokenManager.isAuthenticated()) {
-    showAuthenticatedUI();
-  } else {
-    showUnauthenticatedUI();
-  }
-};
+const baseUrl = "https://huggingface.co/api";
 
 const showAuthenticatedUI = async () => {
   const accessToken = tokenManager.getAccessToken();
+
   if (!accessToken) {
     throw new Error("Access token not found");
   }
 
+  const client = new Client(baseUrl, accessToken);
+
   // Hide token form
   const tokenForm = document.getElementById("token-form");
   if (tokenForm) {
@@ -159,14 +30,12 @@ const showAuthenticatedUI = async () => {
     signoutButton.onclick = () => tokenManager.logout();
   }
 
-  // Add create repo functionality
+  // Add create repo ui
   const createRepoButton = document.getElementById("create-repo");
-  const repoNameInput = document.getElementById(
-    "repo-name"
-  ) as HTMLInputElement;
-  const resourceGroupInput = document.getElementById(
-    "resource-group-name"
-  ) as HTMLInputElement;
+  const repoNameInput = <HTMLInputElement>document.getElementById("repo-name");
+  const resourceGroupInput = <HTMLInputElement>(
+    document.getElementById("resource-group-name")
+  );
   const resourceGroupContainer = document.getElementById(
     "resource-group-container"
   );
@@ -174,31 +43,44 @@ const showAuthenticatedUI = async () => {
   if (createRepoButton && repoNameInput) {
     createRepoButton.onclick = async () => {
       const repoName = repoNameInput.value.trim();
-      const orgSelect = document.getElementById(
-        "org-select"
-      ) as HTMLSelectElement;
+      const orgSelect = <HTMLSelectElement>(
+        document.getElementById("org-select")
+      );
+
       if (repoName) {
         try {
-          const selectedOrg = orgSelect?.value || undefined;
-          const resourceGroupName = selectedOrg
+          const organizationName = orgSelect?.value || undefined;
+          const resourceGroupName = organizationName
             ? resourceGroupInput?.value.trim()
             : undefined;
 
-          console.log({ selectedOrg, resourceGroupName });
-          await createRepository(
-            accessToken,
-            repoName,
-            selectedOrg,
-            resourceGroupName
-          );
-          repoNameInput.value = ""; // Clear input after success
-          if (resourceGroupInput) {
-            resourceGroupInput.value = ""; // Clear resource group input
+          // create repo
+          const repo = await client.post<void>("repos/create", {
+            type: "model",
+            name: repoName,
+            organization: organizationName,
+            private: true,
+          });
+
+          console.log({ repo });
+          // create RG
+          if (organizationName && resourceGroupName) {
+            await client.post<void>(
+              `organizations/${organizationName}/resource-groups`,
+              {
+                name: resourceGroupName,
+                description: `Resource group for repository ${name}`,
+                autoJoin: {
+                  enabled: true,
+                  role: "admin",
+                },
+              }
+            );
           }
+
           alert("Repository and resource group created successfully!");
         } catch (error) {
-          console.error("Failed to create repository:", error);
-          alert("Failed to create repository. Please try again.");
+          console.error(error);
         }
       }
     };
@@ -216,32 +98,24 @@ const showAuthenticatedUI = async () => {
     };
   }
 
-  // Get organization info and populate org select
   try {
-    const orgInfo = await getOrganizationInfo(accessToken);
+    const userInfo = await client.get<WhoAmIUser>("whoami-v2");
 
     // Populate org select
-    if (orgSelect && orgInfo.orgs) {
-      orgInfo.orgs.forEach((org) => {
+    if (orgSelect && userInfo.orgs) {
+      userInfo.orgs.forEach((org) => {
         const option = document.createElement("option");
         option.value = org.name;
         option.textContent = org.name;
         orgSelect.appendChild(option);
       });
     }
-
-    // Display user info
-    const preElement = document.querySelector("pre");
-    if (preElement) {
-      preElement.textContent = JSON.stringify(orgInfo, null, 2);
-    }
   } catch (error) {
-    console.error("Failed to fetch organization info:", error);
+    console.error(error);
   }
 };
 
 const showUnauthenticatedUI = () => {
-  // Show token form
   const tokenForm = document.getElementById("token-form");
   const tokenInput = document.getElementById("token-input") as HTMLInputElement;
   const tokenSubmit = document.getElementById("token-submit");
@@ -257,7 +131,6 @@ const showUnauthenticatedUI = () => {
     };
   }
 
-  // Hide other UI elements
   const repoForm = document.getElementById("repo-form");
   const signoutButton = document.getElementById("signout");
   if (repoForm) {
@@ -268,4 +141,12 @@ const showUnauthenticatedUI = () => {
   }
 };
 
-init().catch(console.error);
+const init = async (): Promise<void> => {
+  if (tokenManager.isAuthenticated()) {
+    showAuthenticatedUI();
+  } else {
+    showUnauthenticatedUI();
+  }
+};
+
+init();