puter

Running

App Files Files Community

Zain437 commited on Oct 28, 2025

Commit

6417b9c

verified ·

1 Parent(s): 7840acc

Update index.html

Browse files

Files changed (1) hide show

index.html +51 -103

index.html CHANGED Viewed

@@ -1,112 +1,60 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Puter AI Chat</title>
-    <link rel="stylesheet" href="style.css" />
-    <script src="https://js.puter.com/v2/"></script>
-  </head>
-  <body>
-    <div id="app">
-      <header>
-        <h1>💬 Puter AI Chat</h1>
-        <button id="sign-in">🔐 Sign in</button>
-        <span id="status-text">Not signed in</span>
-      </header>
-      <main id="chat-container">
-        <div id="messages"></div>
-        <div id="chat-input">
-          <input
-            type="text"
-            id="input-message"
-            placeholder="Type a message..."
-          />
-          <button id="send-btn">Send</button>
-        </div>
-      </main>
-      <footer>
-        <p>
-          Built with ❤️ using <a href="https://puter.com" target="_blank">Puter.js</a> |
-          <a href="https://huggingface.co/spaces/Zain437/puter" target="_blank">View Space</a>
-        </p>
-      </footer>
-    </div>
-    <script>
-      const messages = [];
-      const statusEl = document.getElementById("status-text");
-      // 🌐 Check sign-in status on load
-      async function checkSignInStatus() {
-        const signedIn = await puter.auth.isSignedIn();
-        if (signedIn) {
-          const user = await puter.auth.getUser();
-          statusEl.textContent = `Signed in as ${user.username}`;
         } else {
-          statusEl.textContent = "Not signed in";
         }
       }
-      checkSignInStatus();
-      // 🔐 Sign in button
-      document.getElementById("sign-in").addEventListener("click", async () => {
-        try {
-          statusEl.textContent = "Signing in...";
-          const user = await puter.auth.signIn();
-          statusEl.textContent = `✅ Signed in as ${user.username}`;
-          console.log("User:", user);
-        } catch (error) {
-          statusEl.textContent = "❌ Sign-in failed";
-          console.error("Sign-in error:", error);
-        }
-      });
-      // 💬 Chat system
-      function addMessage(msg, isUser = false) {
-        const messagesDiv = document.getElementById("messages");
-        const messageDiv = document.createElement("div");
-        messageDiv.classList.add("message");
-        if (isUser) messageDiv.classList.add("user-message");
-        messageDiv.textContent = msg;
-        messagesDiv.appendChild(messageDiv);
-        messagesDiv.scrollTop = messagesDiv.scrollHeight;
       }
-      document.getElementById("send-btn").addEventListener("click", sendMessage);
-      document.getElementById("input-message").addEventListener("keypress", (e) => {
-        if (e.key === "Enter") sendMessage();
-      });
-      async function sendMessage() {
-        const input = document.getElementById("input-message");
-        const message = input.value.trim();
-        if (!message) return;
-        addMessage(message, true);
-        input.value = "";
-        messages.push({ role: "user", content: message });
-        try {
-          const response = await puter.ai.chat(messages);
-          const reply = response.message?.content || JSON.stringify(response);
-          addMessage(reply);
-          messages.push({ role: "assistant", content: reply });
-        } catch (err) {
-          addMessage("⚠️ Error connecting to AI. Check console.");
-          console.error("AI chat error:", err);
-        }
-      }
-      // 📊 Optional: Show usage in console
-      puter.auth.getMonthlyUsage().then((usage) => {
-        console.log("Usage:", usage);
-      });
-    </script>
-  </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Puter Auth Demo</title>
+  <link rel="stylesheet" href="style.css">
+  <script src="https://js.puter.com/v2/"></script>
+</head>
+<body>
+  <div class="container">
+    <h1>Puter Authentication</h1>
+    <p class="desc">Sign in to your Puter account to continue</p>
+    <button id="sign-in">Sign In</button>
+    <pre id="output">Waiting for user action...</pre>
+  </div>
+  <script>
+    const output = document.getElementById('output');
+    const signInBtn = document.getElementById('sign-in');
+    function print(msg) {
+      output.innerText = msg;
+      console.log(msg);
+    }
+    async function signInWithRedirectFallback() {
+      try {
+        print("Attempting popup sign-in...");
+        const user = await puter.auth.signIn();
+        print("✅ Signed in:\n" + JSON.stringify(user, null, 2));
+        return user;
+      } catch (err) {
+        if (err.message?.includes("popup")) {
+          print("⚠️ Popup blocked or unavailable. Trying redirect login...");
+          try {
+            await puter.auth.signIn({ mode: 'redirect' });
+          } catch (redirectErr) {
+            print("❌ Redirect sign-in failed:\n" + JSON.stringify(redirectErr));
+          }
         } else {
+          print("❌ Sign-in error:\n" + JSON.stringify(err));
         }
       }
+    }
+    signInBtn.addEventListener('click', () => {
+      signInWithRedirectFallback();
+    });
+    (async () => {
+      const user = await puter.auth.getUser();
+      if (user) {
+        print("✅ Already signed in:\n" + JSON.stringify(user, null, 2));
       }
+    })();
+  </script>
+</body>
 </html>