puter

Running

App Files Files Community

Zain437 commited on Oct 28, 2025

Commit

8b2178b

verified ·

1 Parent(s): 4db27eb

Update index.html

Browse files

Files changed (1) hide show

index.html +95 -72

index.html CHANGED Viewed

@@ -1,89 +1,112 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width" />
-  <title>AI Chat App with Puter Auth</title>
-  <link rel="stylesheet" href="style.css" />
-  <script src="https://js.puter.com/v2/"></script>
-</head>
-<body>
-  <!-- Authentication Section -->
-  <div id="auth-container">
-    <h2>Welcome to AI Chat</h2>
-    <p>Please sign in with your Puter account to continue.</p>
-    <button id="sign-in">🔐 Sign in with Puter</button>
-    <pre id="auth-status"></pre>
-  </div>
-  <!-- Chat Section (hidden until authenticated) -->
-  <div id="chat-container" style="display:none;">
-    <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>
-  </div>
-  <p class="footer-text">Created using <strong>Puter.JS</strong></p>
-  <script>
-    const authContainer = document.getElementById("auth-container");
-    const chatContainer = document.getElementById("chat-container");
-    const authStatus = document.getElementById("auth-status");
-    const messagesDiv = document.getElementById("messages");
-    const input = document.getElementById("input-message");
-    const sendBtn = document.getElementById("send-btn");
-    const messages = [];
-    // --- Sign-in handler ---
-    document.getElementById("sign-in").addEventListener("click", async () => {
-      try {
-        const user = await puter.auth.signIn();
-        authStatus.textContent = "✅ Signed in:\n" + JSON.stringify(user, null, 2);
-        authContainer.style.display = "none";
-        chatContainer.style.display = "flex";
-        addMessage(`Welcome ${user.user.username || "User"}! You’re now authenticated.`, "ai");
-      } catch (error) {
-        authStatus.textContent = "❌ Error:\n" + JSON.stringify(error, null, 2);
       }
-    });
-    // --- Chat logic ---
-    function addMessage(text, sender) {
-      const msg = document.createElement("div");
-      msg.classList.add("message", sender);
-      msg.textContent = text;
-      messagesDiv.appendChild(msg);
-      messagesDiv.scrollTop = messagesDiv.scrollHeight;
-    }
-    async function sendMessage() {
-      const userText = input.value.trim();
-      if (!userText) return;
-      addMessage(userText, "user");
-      messages.push({ role: "user", content: userText });
-      input.value = "";
-      addMessage("Thinking...", "ai");
-      try {
-        const response = await puter.ai.chat(messages);
-        const reply = response.message.content || "No response from AI.";
-        messages.push(response.message);
-        messagesDiv.lastChild.textContent = reply;
-      } catch (err) {
-        console.error(err);
-        messagesDiv.lastChild.textContent = "⚠️ Error: Failed to get response.";
       }
-    }
-    sendBtn.addEventListener("click", sendMessage);
-    input.addEventListener("keypress", e => {
-      if (e.key === "Enter") sendMessage();
-    });
-  </script>
-</body>
 </html>

 <!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>