update files

dist/main.js

@@ -299,7 +299,46 @@ async function getOrganizationInfo(accessToken) {
   }
   return response.json();
 }
-async function createRepository(accessToken, name, organization) {
+async function getOrganizationMembers(accessToken, organization) {
+  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, organization, name, members) {
+  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,
+        description: `Resource group for repository ${name}`,
+        users: members.map((member) => ({
+          user: member.user,
+          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: {
@@ -316,6 +355,15 @@ async function createRepository(accessToken, name, organization) {
   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 () => {
   await oauthManager.handleRedirect();
@@ -332,19 +380,34 @@ var init = async () => {
     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 orgSelect = document.getElementById(
+        const orgSelect2 = document.getElementById(
           "org-select"
         );
         if (repoName) {
           try {
-            const selectedOrg = orgSelect?.value || void 0;
-            console.log({ selectedOrg });
-            await createRepository(accessToken, repoName, selectedOrg);
+            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 = "";
-            alert("Repository created successfully!");
+            if (resourceGroupInput) {
+              resourceGroupInput.value = "";
+            }
+            alert("Repository and resource group created successfully!");
           } catch (error) {
             console.error("Failed to create repository:", error);
             alert("Failed to create repository. Please try again.");
@@ -352,11 +415,20 @@ var init = async () => {
         }
       };
     }
+    const orgSelect = document.getElementById(
+      "org-select"
+    );
+    if (orgSelect && resourceGroupContainer) {
+      orgSelect.onchange = () => {
+        if (orgSelect.value) {
+          resourceGroupContainer.style.removeProperty("display");
+        } else {
+          resourceGroupContainer.style.display = "none";
+        }
+      };
+    }
     try {
       const orgInfo = await getOrganizationInfo(accessToken);
-      const orgSelect = document.getElementById(
-        "org-select"
-      );
       if (orgSelect && orgInfo.orgs) {
         orgInfo.orgs.forEach((org) => {
           const option = document.createElement("option");

index.html

@@ -20,6 +20,9 @@
                 <option value="">Personal Account</option>
             </select>
             <input type="text" id="repo-name" placeholder="Enter repository name" class="repo-input">
+            <div id="resource-group-container" style="display: none;">
+                <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>
         </div>
         <div id="content">

src/main.ts

@@ -17,6 +17,11 @@ interface WhoAmIResponse {
   orgs: OrganizationInfo[];
 }
 
+interface OrganizationMember {
+  user: string;
+  role: string;
+}
+
 declare const window: HuggingFaceWindow;
 
 console.log("huggingface env", window.huggingface);
@@ -39,10 +44,63 @@ async function getOrganizationInfo(
   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}`,
+        users: members.map((member) => ({
+          user: member.user,
+          role: "admin",
+        })),
+      }),
+    }
+  );
+
+  if (!response.ok) {
+    throw new Error(`Failed to create resource group: ${response.statusText}`);
+  }
+}
+
 async function createRepository(
   accessToken: string,
   name: string,
-  organization?: string
+  organization?: string,
+  resourceGroupName?: string
 ): Promise<void> {
   const response = await fetch("https://huggingface.co/api/repos/create", {
     method: "POST",
@@ -61,6 +119,17 @@ async function createRepository(
   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> => {
@@ -83,6 +152,13 @@ const init = async (): Promise<void> => {
     const repoNameInput = document.getElementById(
       "repo-name"
     ) as HTMLInputElement;
+    const resourceGroupInput = document.getElementById(
+      "resource-group-name"
+    ) as HTMLInputElement;
+    const resourceGroupContainer = document.getElementById(
+      "resource-group-container"
+    );
+
     if (createRepoButton && repoNameInput) {
       createRepoButton.onclick = async () => {
         const repoName = repoNameInput.value.trim();
@@ -92,11 +168,22 @@ const init = async (): Promise<void> => {
         if (repoName) {
           try {
             const selectedOrg = orgSelect?.value || undefined;
-
-            console.log({ selectedOrg });
-            await createRepository(accessToken, repoName, selectedOrg);
+            const resourceGroupName = selectedOrg
+              ? resourceGroupInput?.value.trim()
+              : undefined;
+
+            console.log({ selectedOrg, resourceGroupName });
+            await createRepository(
+              accessToken,
+              repoName,
+              selectedOrg,
+              resourceGroupName
+            );
             repoNameInput.value = ""; // Clear input after success
-            alert("Repository created successfully!");
+            if (resourceGroupInput) {
+              resourceGroupInput.value = ""; // Clear resource group input
+            }
+            alert("Repository and resource group created successfully!");
           } catch (error) {
             console.error("Failed to create repository:", error);
             alert("Failed to create repository. Please try again.");
@@ -105,14 +192,25 @@ const init = async (): Promise<void> => {
       };
     }
 
+    // Handle org select change to show/hide resource group input
+    const orgSelect = document.getElementById(
+      "org-select"
+    ) as HTMLSelectElement;
+    if (orgSelect && resourceGroupContainer) {
+      orgSelect.onchange = () => {
+        if (orgSelect.value) {
+          resourceGroupContainer.style.removeProperty("display");
+        } else {
+          resourceGroupContainer.style.display = "none";
+        }
+      };
+    }
+
     // Get organization info and populate org select after successful authentication
     try {
       const orgInfo = await getOrganizationInfo(accessToken);
 
       // Populate org select
-      const orgSelect = document.getElementById(
-        "org-select"
-      ) as HTMLSelectElement;
       if (orgSelect && orgInfo.orgs) {
         orgInfo.orgs.forEach((org) => {
           const option = document.createElement("option");

styles/main.css

@@ -61,6 +61,10 @@ h2 {
   min-width: 200px;
 }
 
+#resource-group-container {
+  width: 100%;
+}
+
 .repo-input {
   flex: 1;
   padding: 0.8rem;