Hugging Face's logo

Spaces:
CharlieBoyer
/
whdemo
Runtime error

App Files Community
Charlie commited on
Commit
67e3349
·
1 Parent(s): d19958c

update files

Browse files
Files changed (5) hide show
  1. .gitignore +0 -2
  2. dist/app.js +71 -0
  3. dist/index.html +35 -0
  4. dist/index.js +4 -0
  5. dist/styles.css +68 -0
.gitignore CHANGED
@@ -1,8 +1,6 @@
1
  # Node modules
2
  node_modules/
3
 
4
- # Build output
5
- dist/
6
 
7
  # Log files
8
  *.log
 
1
  # Node modules
2
  node_modules/
3
 
 
 
4
 
5
  # Log files
6
  *.log
dist/app.js ADDED
@@ -0,0 +1,71 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // DOM Elements
2
+ const loginSection = document.getElementById("login-section");
3
+ const profileSection = document.getElementById("profile-section");
4
+ const loginButton = document.getElementById("login-button");
5
+ const logoutButton = document.getElementById("logout-button");
6
+ const usernameElement = document.getElementById("username");
7
+ const avatarElement = document.getElementById("avatar");
8
+ // Check for OAuth redirect and handle the token
9
+ async function checkAndHandleOAuth() {
10
+ try {
11
+ const oauthResult = await window.HuggingFaceHub.oauthHandleRedirectIfPresent();
12
+ if (oauthResult) {
13
+ // Store the tokens
14
+ localStorage.setItem("hf_token", oauthResult.accessToken);
15
+ localStorage.setItem("hf_user", JSON.stringify(oauthResult.userInfo));
16
+ // Update UI
17
+ updateUIWithUserInfo(oauthResult.userInfo);
18
+ }
19
+ else {
20
+ // Check if we have stored tokens
21
+ const storedUser = localStorage.getItem("hf_user");
22
+ if (storedUser) {
23
+ updateUIWithUserInfo(JSON.parse(storedUser));
24
+ }
25
+ }
26
+ }
27
+ catch (error) {
28
+ console.error("OAuth error:", error);
29
+ localStorage.removeItem("hf_token");
30
+ localStorage.removeItem("hf_user");
31
+ showLoginSection();
32
+ }
33
+ }
34
+ // Update UI with user information
35
+ function updateUIWithUserInfo(userInfo) {
36
+ usernameElement.textContent =
37
+ userInfo.name || userInfo.preferred_username || "User";
38
+ if (userInfo.picture) {
39
+ avatarElement.src = userInfo.picture;
40
+ }
41
+ showProfileSection();
42
+ }
43
+ // Show login section
44
+ function showLoginSection() {
45
+ loginSection.style.display = "block";
46
+ profileSection.style.display = "none";
47
+ }
48
+ // Show profile section
49
+ function showProfileSection() {
50
+ loginSection.style.display = "none";
51
+ profileSection.style.display = "block";
52
+ }
53
+ // Handle login button click
54
+ loginButton.addEventListener("click", async () => {
55
+ try {
56
+ const loginUrl = await window.HuggingFaceHub.oauthLoginUrl();
57
+ window.location.href = loginUrl;
58
+ }
59
+ catch (error) {
60
+ console.error("Login error:", error);
61
+ }
62
+ });
63
+ // Handle logout button click
64
+ logoutButton.addEventListener("click", () => {
65
+ localStorage.removeItem("hf_token");
66
+ localStorage.removeItem("hf_user");
67
+ showLoginSection();
68
+ });
69
+ // Initialize the app
70
+ checkAndHandleOAuth();
71
+ export {};
dist/index.html ADDED
@@ -0,0 +1,35 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>HF OAuth Demo</title>
8
+ <link rel="stylesheet" href="styles.css">
9
+ </head>
10
+
11
+ <body>
12
+ <div class="container">
13
+ <h1>Welcome to HF OAuth Demo</h1>
14
+
15
+ <!-- Login section (shown when logged out) -->
16
+ <div id="login-section">
17
+ <button id="login-button" class="btn">Sign in with Hugging Face</button>
18
+ </div>
19
+
20
+ <!-- Profile section (shown when logged in) -->
21
+ <div id="profile-section" style="display: none;">
22
+ <div class="profile-info">
23
+ <img id="avatar" class="avatar" src="" alt="Profile picture">
24
+ <h2 id="username"></h2>
25
+ </div>
26
+ <button id="logout-button" class="btn">Logout</button>
27
+ </div>
28
+ </div>
29
+
30
+ <!-- Load HuggingFace.js -->
31
+ <script src="https://unpkg.com/@huggingface/[email protected]/dist/hub.min.js"></script>
32
+ <script type="module" src="./app.js"></script>
33
+ </body>
34
+
35
+ </html>
dist/index.js ADDED
@@ -0,0 +1,4 @@
 
 
 
 
 
1
+ function greet(name) {
2
+ return `Hello, ${name}!`;
3
+ }
4
+ document.body.innerHTML = greet("World");
dist/styles.css ADDED
@@ -0,0 +1,68 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ * {
2
+ margin: 0;
3
+ padding: 0;
4
+ box-sizing: border-box;
5
+ }
6
+
7
+ body {
8
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
9
+ Ubuntu, Cantarell, sans-serif;
10
+ line-height: 1.6;
11
+ background-color: #f5f8fa;
12
+ color: #333;
13
+ }
14
+
15
+ .container {
16
+ max-width: 800px;
17
+ margin: 2rem auto;
18
+ padding: 2rem;
19
+ background-color: white;
20
+ border-radius: 10px;
21
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
22
+ text-align: center;
23
+ }
24
+
25
+ h1 {
26
+ margin-bottom: 2rem;
27
+ color: #2d3748;
28
+ }
29
+
30
+ .btn {
31
+ background-color: #4a5568;
32
+ color: white;
33
+ padding: 0.75rem 1.5rem;
34
+ border: none;
35
+ border-radius: 5px;
36
+ font-size: 1rem;
37
+ cursor: pointer;
38
+ transition: background-color 0.2s;
39
+ }
40
+
41
+ .btn:hover {
42
+ background-color: #2d3748;
43
+ }
44
+
45
+ .profile-info {
46
+ margin: 2rem 0;
47
+ }
48
+
49
+ .avatar {
50
+ width: 100px;
51
+ height: 100px;
52
+ border-radius: 50%;
53
+ margin-bottom: 1rem;
54
+ }
55
+
56
+ #username {
57
+ color: #2d3748;
58
+ font-size: 1.5rem;
59
+ margin-bottom: 1rem;
60
+ }
61
+
62
+ #logout-button {
63
+ background-color: #e53e3e;
64
+ }
65
+
66
+ #logout-button:hover {
67
+ background-color: #c53030;
68
+ }