Upload folder using huggingface_hub

App.tsx

@@ -1,5 +1,6 @@
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import { oauthLoginUrl, oauthHandleRedirectIfPresent } from "@huggingface/hub";
 import Navbar from './components/Navbar';
 import Hero from './components/Hero';
 import TrustedBy from './components/TrustedBy';
@@ -17,6 +18,26 @@ import ChatPage from './components/ChatPage';
 
 function App() {
   const [currentView, setCurrentView] = useState<'landing' | 'simulation' | 'conversation' | 'chat'>('landing');
+  const [user, setUser] = useState<any>(null);
+
+  useEffect(() => {
+    const handleAuth = async () => {
+      try {
+        const oauthResult = await oauthHandleRedirectIfPresent();
+        if (oauthResult) {
+          setUser(oauthResult.userInfo);
+          console.log("Logged in as:", oauthResult.userInfo);
+        }
+      } catch (error) {
+        console.error("Auth error:", error);
+      }
+    };
+    handleAuth();
+  }, []);
+
+  const loginWithHF = async () => {
+    window.location.href = await oauthLoginUrl();
+  };
 
   const startSimulation = () => {
     setCurrentView('simulation');
@@ -59,7 +80,7 @@ function App() {
 
   return (
     <div className="bg-black min-h-screen text-white selection:bg-teal-500/30">
-      <Navbar onStart={startSimulation} />
+      <Navbar onStart={startSimulation} onLogin={loginWithHF} user={user} />
       <main>
         <Hero onStart={startSimulation} />
         <TrustedBy />

README.md

@@ -5,6 +5,7 @@ colorFrom: blue
 colorTo: blue
 sdk: docker
 app_port: 7860
+hf_oauth: true
 ---
 
 <div align="center">

components/Navbar.tsx

@@ -5,9 +5,11 @@ import Button from './ui/Button';
 
 interface NavbarProps {
   onStart?: () => void;
+  onLogin?: () => void;
+  user?: any;
 }
 
-const Navbar: React.FC<NavbarProps> = ({ onStart }) => {
+const Navbar: React.FC<NavbarProps> = ({ onStart, onLogin, user }) => {
   const [isScrolled, setIsScrolled] = useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
@@ -46,7 +48,15 @@ const Navbar: React.FC<NavbarProps> = ({ onStart }) => {
           ))}
         </div>
 
-        <div className="hidden md:block">
+        <div className="hidden md:flex items-center gap-4">
+          {user ? (
+            <div className="flex items-center gap-3 bg-gray-900 border border-gray-800 rounded-full px-4 py-1.5">
+               {user.avatarUrl && <img src={user.avatarUrl} alt={user.preferred_username} className="w-6 h-6 rounded-full" />}
+               <span className="text-sm font-medium text-gray-300">{user.preferred_username}</span>
+            </div>
+          ) : (
+            <Button variant="outline" size="sm" onClick={onLogin}>Sign in with HF</Button>
+          )}
           <Button variant="primary" size="sm" onClick={onStart}>Start Building</Button>
         </div>
 
@@ -73,7 +83,15 @@ const Navbar: React.FC<NavbarProps> = ({ onStart }) => {
                 {link.label}
               </a>
             ))}
-            <div className="pt-4">
+            <div className="pt-4 flex flex-col gap-3">
+              {user ? (
+                <div className="flex items-center gap-3 bg-gray-900 border border-gray-800 rounded-lg px-4 py-3">
+                   {user.avatarUrl && <img src={user.avatarUrl} alt={user.preferred_username} className="w-8 h-8 rounded-full" />}
+                   <span className="font-medium text-gray-300">{user.preferred_username}</span>
+                </div>
+              ) : (
+                <Button variant="outline" className="w-full" onClick={() => { setIsMobileMenuOpen(false); if(onLogin) onLogin(); }}>Sign in with HF</Button>
+              )}
               <Button variant="primary" className="w-full" onClick={() => { setIsMobileMenuOpen(false); if(onStart) onStart(); }}>Start Building</Button>
             </div>
           </div>

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@gradio/client": "^2.0.4",
+        "@huggingface/hub": "^2.10.1",
         "express": "^5.2.1",
         "lucide-react": "^0.555.0",
         "plotly.js": "2.30.0",
@@ -747,6 +748,30 @@
         "node": ">=18.0.0"
       }
     },
+    "node_modules/@huggingface/hub": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/@huggingface/hub/-/hub-2.10.1.tgz",
+      "integrity": "sha512-FVqG3qoqlynDBfL4SfWsA5A16e61PUaiWGlrvP4YaxWLrnvhQ+224IR7O3CKu23OqBNAppWG8rBinTInK88+uA==",
+      "license": "MIT",
+      "dependencies": {
+        "@huggingface/tasks": "^0.19.85"
+      },
+      "bin": {
+        "hfjs": "dist/cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "cli-progress": "^3.12.0"
+      }
+    },
+    "node_modules/@huggingface/tasks": {
+      "version": "0.19.85",
+      "resolved": "https://registry.npmjs.org/@huggingface/tasks/-/tasks-0.19.85.tgz",
+      "integrity": "sha512-4s5+GV257GRmT7Hrt190KlGsuq53IwFtCBj+J+bvoeIpn119589wY7WY/LS5VJMLwu7pUQnouLmMKeEOKO4BSQ==",
+      "license": "MIT"
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -1620,6 +1645,16 @@
       "integrity": "sha512-0V/PkoculFl5+0Lp47JoxUcO0xSxhIBvm+BxHdD/OgXNmdRpRHCFnKVuUoWyS9EzQP+otSGv0m9Lb4yVkQBn2A==",
       "license": "MIT"
     },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/array-bounds": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/array-bounds/-/array-bounds-1.0.1.tgz",
@@ -2094,6 +2129,19 @@
       "integrity": "sha512-kgMuFyE78OC6Dyu3Dy7vcx4uy97EIbVxJB/B0eJ3bUNAkwdNcxYzgKltnyADiYwsR7SEqkkUPsEUT//OVS6XMA==",
       "license": "MIT"
     },
+    "node_modules/cli-progress": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/cli-progress/-/cli-progress-3.12.0.tgz",
+      "integrity": "sha512-tRkV3HJ1ASwm19THiiLIXLO7Im7wlTuKnvkYaTkyoAPefqjNg7W7DHKUlGRxy9vxDvbyCYQkQozvptuMkGCg8A==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "string-width": "^4.2.3"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -2816,6 +2864,13 @@
       "integrity": "sha512-fGTi3gxV/23FTYdAoUtLYp6qySe2KE3teyZitipKNRuVYcBkoP/bB3guXN/XVKUe9mxCHXnc9C4ocyz8OmgN0g==",
       "license": "MIT"
     },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/encodeurl": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
@@ -3955,6 +4010,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-generator-function": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
@@ -5846,6 +5911,34 @@
         "parenthesis": "^3.1.5"
       }
     },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strongly-connected-components": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/strongly-connected-components/-/strongly-connected-components-1.0.1.tgz",

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@gradio/client": "^2.0.4",
+    "@huggingface/hub": "^2.10.1",
     "express": "^5.2.1",
     "lucide-react": "^0.555.0",
     "plotly.js": "2.30.0",

production_server.log

@@ -0,0 +1 @@
+Server running on port 7860