Update from GitHub Actions

functions/api/hf/[[path]].ts

@@ -1,13 +1,12 @@
+import { downloadFile, commit, listFiles, RepoType, CommitOperation } from "@huggingface/hub";
+
+interface CommitBody {
+    path: string;
+    content?: string;
+    message?: string;
+    lfs?: boolean;
+}
 
-//没有固定的文档
-//接口是通过查看huggingface.co的请求来实现的
-//有个huggingface hub api
-//https://huggingface.co/docs/huggingface.js/hub/README
-//https://github.com/huggingface/huggingface.js/tree/main/packages/hub
-//https://github.com/huggingface/huggingface.js/blob/main/packages/hub/src/lib/list-files.ts
-//https://github.com/huggingface/huggingface.js/blob/main/packages/hub/src/lib/download-file.ts
-//https://github.com/huggingface/huggingface.js/blob/main/packages/hub/src/lib/commit.ts
-//https://github.com/huggingface/huggingface.js/blob/main/packages/hub/src/lib/delete-files.ts
 export const onRequest = async (context: RouteContext): Promise<Response> => {
     const request = context.request;
     const env = context.env as Env;
@@ -39,71 +38,118 @@ export const onRequest = async (context: RouteContext): Promise<Response> => {
                 headers: { 'Content-Type': 'application/json' }
             });
         }
-        // Hugging Face API 基础 URL
-        const hfApiBaseUrl = 'https://huggingface.co/api/datasets';
-
-        // 处理 GET 请求 - 获取文件内容或列出文件
 
+        const apiParams = {
+            repo: {
+                name: `${owner}/${repo}`,
+                type: 'dataset' as RepoType
+            },
+            accessToken: hfToken,
+            revision: ref
+        };
 
+        // 处理 GET 请求 - 获取文件内容或列出文件
         if (operation === 'raw' && request.method === 'GET') {
             const path = pathParts.length > 6 ? pathParts.slice(6).join('/') : '';
-            //这里没有错..getraw就是没有api
-            const hfUrl = `https://huggingface.co/datasets/${owner}/${repo}/raw/${ref}/${path}`;
-
-            const response = await fetch(hfUrl, {
-                headers: {
-                    'Authorization': `Bearer ${hfToken}`,
-                    'User-Agent': 'Cloudflare-Worker'
+      
+            try {
+                const response = await downloadFile({
+                    ...apiParams,
+                    path: path
+                });
+
+                if (!response) {
+                    return new Response(JSON.stringify({ error: '文件不存在' }), {
+                        status: 404,
+                        headers: { 'Content-Type': 'application/json' }
+                    });
                 }
-            });
-
-            return new Response(await response.text(), {
-                status: response.status,
-                headers: response.headers
-            });
+                return response;
+            } catch (error: any) {
+                return new Response(JSON.stringify({ error: '获取文件失败', details: error.message }), {
+                    status: 500,
+                    headers: { 'Content-Type': 'application/json' }
+                });
+            }
         }
 
         if (operation === 'tree' && request.method === 'GET') {
             const path = pathParts.length > 6 ? pathParts.slice(6).join('/') : '';
-            // 4. 列出文件
-            const hfUrl = `${hfApiBaseUrl}/${owner}/${repo}/tree/${ref}/${path}`;
-
-            const response = await fetch(hfUrl, {
-                headers: {
-                    'Authorization': `Bearer ${hfToken}`,
-                    'User-Agent': 'Cloudflare-Worker'
+            try {
+                const cursor = listFiles({
+                    ...apiParams,
+                    path: path
+                });
+
+                const files = [];
+                for await (const entry of cursor) {
+                    files.push(entry);
                 }
-            });
 
-            const data = await response.json();
-            return new Response(JSON.stringify(data), {
-                status: response.status,
-                headers: { 'Content-Type': 'application/json' }
-            });
+                return new Response(JSON.stringify(files), {
+                    headers: { 'Content-Type': 'application/json' }
+                });
+            } catch (error: any) {
+                return new Response(JSON.stringify({ error: '列出文件失败', details: error.message }), {
+                    status: 500,
+                    headers: { 'Content-Type': 'application/json' }
+                });
+            }
         }
 
         // 处理 POST 请求 - 上传文件
         if (operation === 'commit' && (request.method === 'POST' || request.method === 'PUT' || request.method === 'DELETE')) {
-            const hfUrl = `${hfApiBaseUrl}/${owner}/${repo}/commit/${ref}`;
-            const body = await request.json();
-            const response = await fetch(hfUrl, {
-                method: 'POST',
-                headers: {
-                    'Authorization': `Bearer ${hfToken}`,
-                    'Content-Type': 'application/json',
-                    'User-Agent': 'Cloudflare-Worker'
-                },
-                body: JSON.stringify(body)
-            });
+            const body = await request.json() as CommitBody;
+
+            try {
+                let operation: CommitOperation;
+
+                if (request.method === 'DELETE') {
+                    operation = {
+                        operation: 'delete',
+                        path: body.path
+                    };
+                } else {
+                    const content = body.content || '';
+                    let blobContent: Blob;
+
+                    if (body.lfs === true && body.content) {
+                        const binary = atob(body.content);
+                        const bytes = new Uint8Array(binary.length);
+                        for (let i = 0; i < binary.length; i++) {
+                            bytes[i] = binary.charCodeAt(i);
+                        }
+                        blobContent = new Blob([bytes]);
+                    } else {
+                        blobContent = new Blob([content]);
+                    }
+
+                    operation = {
+                        operation: 'addOrUpdate',
+                        path: body.path,
+                        content: blobContent
+                    };
+                }
 
-            const data = await response.json();
-            return new Response(JSON.stringify(data), {
-                status: response.status,
-                headers: { 'Content-Type': 'application/json' }
-            });
+                const response = await commit({
+                    ...apiParams,
+                    operations: [operation],
+                    title: `${request.method === 'DELETE' ? 'Delete' : 'Update'} ${body.path}`,
+                    description: body.message || `Changed via API`
+                });
+
+                return new Response(JSON.stringify(response), {
+                    status: 200,
+                    headers: { 'Content-Type': 'application/json' }
+                });
+            } catch (error: any) {
+                return new Response(JSON.stringify({ error: '提交更改失败', details: error.message }), {
+                    status: 500,
+                    headers: { 'Content-Type': 'application/json' }
+                });
+            }
         }
 
-
         // 不支持的请求方法或路径
         return new Response(JSON.stringify({ error: '不支持的请求方法或路径' }), {
             status: 400,

package-lock.json

@@ -9,6 +9,7 @@
 			"version": "0.0.0",
 			"dependencies": {
 				"@hono/node-server": "^1.13.8",
+				"@huggingface/hub": "^1.1.2",
 				"@monaco-editor/loader": "^1.5.0",
 				"@tailwindcss/vite": "^4.0.14",
 				"dotenv": "^16.4.7",
@@ -796,6 +797,24 @@
 				"hono": "^4"
 			}
 		},
+		"node_modules/@huggingface/hub": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmmirror.com/@huggingface/hub/-/hub-1.1.2.tgz",
+			"integrity": "sha512-Jf4GhvVj9ABDw4Itb3BV1T7f22iewuZva476qTicQ4kOTbosuUuFDhsVH7ZH6rVNgg20Ll9kaNBF5CXjySIT+w==",
+			"license": "MIT",
+			"dependencies": {
+				"@huggingface/tasks": "^0.18.2"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/@huggingface/tasks": {
+			"version": "0.18.3",
+			"resolved": "https://registry.npmmirror.com/@huggingface/tasks/-/tasks-0.18.3.tgz",
+			"integrity": "sha512-WCIg6tOSftCkE2WxSaDIZRsrs6bkHiH2qc4t6r8L/xoebAhQmIPEDU700zXI7ac1+I6UcCponYxn/oqu3TGNxQ==",
+			"license": "MIT"
+		},
 		"node_modules/@img/sharp-darwin-arm64": {
 			"version": "0.33.5",
 			"resolved": "https://registry.npmmirror.com/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",

package.json

@@ -16,6 +16,7 @@
 	},
 	"dependencies": {
 		"@hono/node-server": "^1.13.8",
+		"@huggingface/hub": "^1.1.2",
 		"@monaco-editor/loader": "^1.5.0",
 		"@tailwindcss/vite": "^4.0.14",
 		"dotenv": "^16.4.7",

src/services/repoApi.ts

@@ -30,6 +30,25 @@ interface IRepoApi {
   updateFile(account: Account, path: string, content: string, sha: string, message?: string): Promise<any>;
   deleteFile(account: Account, path: string, sha: string, message?: string): Promise<any>;
   createFile(account: Account, path: string, content: string, message?: string): Promise<any>;
+  createAsset(account: Account, path: string, content: Uint8Array, message?: string): Promise<any>;
+}
+
+// 浏览器环境中将 ArrayBuffer/Uint8Array 转换为 Base64 的辅助方法
+function arrayBufferToBase64(buffer: Uint8Array): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const blob = new Blob([buffer]);
+    const reader = new FileReader();
+
+    reader.onload = () => {
+      const dataUrl = reader.result as string;
+      // 移除 data URL 前缀 (例如 "data:image/png;base64,")
+      const base64 = dataUrl.split(',')[1];
+      resolve(base64);
+    };
+
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
 }
 
 // GitHub implementation
@@ -60,7 +79,6 @@ class GitHubRepoApi implements IRepoApi {
   }
 
   async updateFile(account: Account, path: string, content: string, sha: string, message?: string) {
-
     const encoder = new TextEncoder();
     const bytes = encoder.encode(content);
     const base64Content = btoa(String.fromCharCode.apply(null, [...new Uint8Array(bytes)]));
@@ -95,19 +113,29 @@ class GitHubRepoApi implements IRepoApi {
   }
 
   async createFile(account: Account, path: string, content: string, message?: string) {
+    const encoder = new TextEncoder();
+    const bytes = encoder.encode(content);
+    const encodedContent = btoa(String.fromCharCode.apply(null, [...new Uint8Array(bytes)]));
 
-    let encodedContent;
-    try {
-        // 检查内容是否已经是 Base64 编码
-        atob(content);
-        encodedContent = content;
-    } catch (e) {
-        // 如果不是，则编码它
-        const encoder = new TextEncoder();
-        const bytes = encoder.encode(content);
-        encodedContent = btoa(String.fromCharCode.apply(null, [...new Uint8Array(bytes)]));
-    }
-    
+    const response = await fetch(
+      `${API_BASE_URL}/api/github/${account.owner}/${account.repo}/${path}`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${account.token}`
+        },
+        body: JSON.stringify({ branch: account.ref, content: encodedContent, message })
+      }
+    );
+    return handleResponse(response);
+  }
+
+
+
+  async createAsset(account: Account, path: string, content: Uint8Array, message?: string) {
+
+    const encodedContent = await arrayBufferToBase64(content);
     const response = await fetch(
       `${API_BASE_URL}/api/github/${account.owner}/${account.repo}/${path}`,
       {
@@ -125,7 +153,6 @@ class GitHubRepoApi implements IRepoApi {
 
 // HuggingFace implementation
 class HuggingFaceRepoApi implements IRepoApi {
-
   async getContents(account: Account, path: string = ''): Promise<RepoContent[]> {
     const response = await fetch(
       `${API_BASE_URL}/api/hf/${account.owner}/${account.repo}/tree/${account.ref}/${path}`,
@@ -141,13 +168,14 @@ class HuggingFaceRepoApi implements IRepoApi {
     return result.map((item: any) => {
       item.sha = item.oid;
       item.name = item.path.split('/').pop() || '';
+      item.type = item.type === 'directory' ? 'dir' : 'file';
       return item;
     });
   }
 
   async getFileContent(account: Account, path: string): Promise<RepoContent> {
-    const response = await fetch(
-      `${API_BASE_URL}/api/hf/${account.owner}/${account.repo}/raw/${account.ref}/${path}`,
+    const url = `${API_BASE_URL}/api/hf/${account.owner}/${account.repo}/raw/${account.ref}/${path}`;
+    const response = await fetch(url,
       {
         method: 'GET',
         headers: {
@@ -163,6 +191,24 @@ class HuggingFaceRepoApi implements IRepoApi {
       throw new Error('认证失败，请重新登录');
     }
 
+
+    //根据响应的内容类型设置encoding
+    const contentType = response.headers.get('content-type');
+    if (contentType && contentType.startsWith('image/')) {
+      return {
+        content: await arrayBufferToBase64(await response.bytes()),
+        download_url: null,
+        encoding: 'base64',
+        name: '',
+        path: path,
+        sha: '',
+        size: 0,
+        url: '',
+        html_url: '',
+        git_url: '',
+        type: 'file'
+      };
+    }
     return {
       content: await response.text(),
       encoding: 'utf-8',
@@ -188,15 +234,10 @@ class HuggingFaceRepoApi implements IRepoApi {
           Authorization: `Bearer ${account.token}`
         },
         body: JSON.stringify({
-          "description": "",
-          "summary": message,
-          "files": [
-            {
-              "content": content,
-              "encoding": "utf-8",
-              "path": path
-            }
-          ]
+          "lfs": false,
+          "path": path,
+          "content": content,
+          "message": message,
         })
       }
     );
@@ -218,13 +259,9 @@ class HuggingFaceRepoApi implements IRepoApi {
           Authorization: `Bearer ${account.token}`
         },
         body: JSON.stringify({
-          "description": "",
-          "summary": message,
-          "deletedFiles": [
-            {
-              "path": path
-            }
-          ]
+          "lfs": false,
+          "path": path,
+          "message": message,
         })
       }
     );
@@ -241,15 +278,36 @@ class HuggingFaceRepoApi implements IRepoApi {
           Authorization: `Bearer ${account.token}`
         },
         body: JSON.stringify({
-          "description": "",
-          "summary": message,
-          "files": [
-            {
-              "content": content,
-              "encoding": "utf-8",
-              "path": path
-            }
-          ]
+          "lfs": false,
+          "path": path,
+          "content": content,
+          "message": message,
+        })
+      }
+    );
+    const result = await handleResponse(response);
+    return {
+      content: {
+        sha: result.commitOid
+      }
+    };
+  }
+
+  async createAsset(account: Account, path: string, content: Uint8Array, message?: string) {
+    const encodedContent = await arrayBufferToBase64(content);
+    const response = await fetch(
+      `${API_BASE_URL}/api/hf/${account.owner}/${account.repo}/commit/${account.ref}/${path}`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${account.token}`
+        },
+        body: JSON.stringify({
+          "lfs": true,
+          "path": path,
+          "content": encodedContent,
+          "message": message,
         })
       }
     );
@@ -310,5 +368,10 @@ export const repoApi = {
   async createFile(account: Account, path: string, content: string, message?: string) {
     const api = RepoApiFactory.getRepoApi(account.type);
     return api.createFile(account, path, content, message);
+  },
+
+  async createAsset(account: Account, path: string, content: Uint8Array, message?: string) {
+    const api = RepoApiFactory.getRepoApi(account.type);
+    return api.createAsset(account, path, content, message);
   }
 };

src/views/ContentView.vue

@@ -77,10 +77,7 @@ const fetchContent = async () => {
             if (isImageFile.value) {
                 if (result.content) {
                     // 如果有 content，将 base64 转换为 Blob URL
-                    const base64Data = result.encoding === 'base64' ?
-                        result.content :
-                        btoa(result.content);
-                    const byteCharacters = atob(base64Data);
+                    const byteCharacters = atob(result.content);
                     const byteNumbers = new Array(byteCharacters.length);
                     for (let i = 0; i < byteCharacters.length; i++) {
                         byteNumbers[i] = byteCharacters.charCodeAt(i);
@@ -353,6 +350,7 @@ const isImageFile = computed(() => {
 watch(() => route.query, async (query) => {
     // Only respond to query changes when on the repo route
     if (route.path !== '/content') return;
+    imageUrl.value = '';
     const { id, path, newFile } = query;
     isNewFile.value = !!newFile;
     if (id) {
@@ -388,6 +386,7 @@ onUnmounted(() => {
 onBeforeUnmount(() => {
     if (imageUrl.value && imageUrl.value.startsWith('blob:')) {
         URL.revokeObjectURL(imageUrl.value);
+        imageUrl.value = '';
     }
 });
 </script>

src/views/UploadView.vue

@@ -94,23 +94,18 @@ const handleConfirmUpload = async () => {
             throw new Error('Invalid file object');
         }
 
-        const content = await new Promise<string>((resolve, reject) => {
+        const content = await new Promise<Uint8Array>((resolve, reject) => {
             const reader = new FileReader();
             reader.onload = (e) => {
                 if (e.target?.result) {
-                    // 获取 base64 字符串，移除 "data:*/*;base64," 前缀
-                    const dataUrl = e.target.result.toString();
-
-                    const base64 = dataUrl.split(',')[1];
-
-                    resolve(base64);
+                    resolve(e.target.result as Uint8Array);
                 } else {
                     reject(new Error('Failed to read file content'));
                 }
             };
             reader.onerror = () => reject(reader.error);
             // 使用 readAsDataURL 来处理所有类型的文件
-            reader.readAsDataURL(selectedFile.value as File);
+            reader.readAsArrayBuffer(selectedFile.value as File);
         });
 
         const filePath = currentPath.value
@@ -122,7 +117,7 @@ const handleConfirmUpload = async () => {
             `上传文件: ${selectedFile.value.name}`;
 
         // GitHub API 要求 base64 编码的内容
-        const response = await repoApi.createFile(
+        const response = await repoApi.createAsset(
             account,
             filePath,
             content,