Hugging Face's logo

Spaces:
AZILS
/
puter
Running

App Files Community
Zain437 commited on
Commit
a9059d4
·
verified ·
1 Parent(s): c78d515

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +30 -28
index.html CHANGED
@@ -9,13 +9,16 @@
9
  </head>
10
 
11
  <body>
 
12
  <div id="auth-container">
13
  <h2>Welcome to AI Chat</h2>
14
  <p>Please sign in with your Puter account to continue.</p>
15
  <button id="sign-in">🔐 Sign in with Puter</button>
 
16
  </div>
17
 
18
- <div id="chat-container" style="display: none;">
 
19
  <div id="messages"></div>
20
  <div id="chat-input">
21
  <input type="text" id="input-message" placeholder="Type a message..." />
@@ -26,47 +29,46 @@
26
  <p class="footer-text">Created using <strong>Puter.JS</strong></p>
27
 
28
  <script>
 
 
 
 
 
 
29
  const messages = [];
30
- const authContainer = document.getElementById('auth-container');
31
- const chatContainer = document.getElementById('chat-container');
32
- const messagesDiv = document.getElementById('messages');
33
- const input = document.getElementById('input-message');
34
- const sendBtn = document.getElementById('send-btn');
35
- const signInBtn = document.getElementById('sign-in');
36
 
37
- // Authenticate user
38
- signInBtn.addEventListener('click', async () => {
39
  try {
40
  const user = await puter.auth.signIn();
41
- console.log('Signed in:', user);
42
- authContainer.style.display = 'none';
43
- chatContainer.style.display = 'flex';
44
- addMessage(`Welcome ${user.user.username || 'User'}!`, 'ai');
45
- } catch (err) {
46
- console.error('Sign-in failed:', err);
47
- alert('Failed to sign in. Please try again.');
48
  }
49
  });
50
 
51
- // Display message in chat
52
  function addMessage(text, sender) {
53
- const msg = document.createElement('div');
54
- msg.classList.add('message', sender);
55
  msg.textContent = text;
56
  messagesDiv.appendChild(msg);
57
  messagesDiv.scrollTop = messagesDiv.scrollHeight;
58
  }
59
 
60
- // Send user message and get AI response
61
  async function sendMessage() {
62
  const userText = input.value.trim();
63
  if (!userText) return;
64
 
65
- addMessage(userText, 'user');
66
- messages.push({ role: 'user', content: userText });
67
- input.value = '';
 
 
68
 
69
- addMessage('Thinking...', 'ai');
70
  try {
71
  const response = await puter.ai.chat(messages);
72
  const reply = response.message.content || "No response from AI.";
@@ -74,13 +76,13 @@
74
  messagesDiv.lastChild.textContent = reply;
75
  } catch (err) {
76
  console.error(err);
77
- messagesDiv.lastChild.textContent = "Error: Failed to get response.";
78
  }
79
  }
80
 
81
- sendBtn.addEventListener('click', sendMessage);
82
- input.addEventListener('keypress', e => {
83
- if (e.key === 'Enter') sendMessage();
84
  });
85
  </script>
86
  </body>
 
9
  </head>
10
 
11
  <body>
12
+ <!-- Authentication Section -->
13
  <div id="auth-container">
14
  <h2>Welcome to AI Chat</h2>
15
  <p>Please sign in with your Puter account to continue.</p>
16
  <button id="sign-in">🔐 Sign in with Puter</button>
17
+ <pre id="auth-status"></pre>
18
  </div>
19
 
20
+ <!-- Chat Section (hidden until authenticated) -->
21
+ <div id="chat-container" style="display:none;">
22
  <div id="messages"></div>
23
  <div id="chat-input">
24
  <input type="text" id="input-message" placeholder="Type a message..." />
 
29
  <p class="footer-text">Created using <strong>Puter.JS</strong></p>
30
 
31
  <script>
32
+ const authContainer = document.getElementById("auth-container");
33
+ const chatContainer = document.getElementById("chat-container");
34
+ const authStatus = document.getElementById("auth-status");
35
+ const messagesDiv = document.getElementById("messages");
36
+ const input = document.getElementById("input-message");
37
+ const sendBtn = document.getElementById("send-btn");
38
  const messages = [];
 
 
 
 
 
 
39
 
40
+ // --- Sign-in handler ---
41
+ document.getElementById("sign-in").addEventListener("click", async () => {
42
  try {
43
  const user = await puter.auth.signIn();
44
+ authStatus.textContent = "✅ Signed in:\n" + JSON.stringify(user, null, 2);
45
+ authContainer.style.display = "none";
46
+ chatContainer.style.display = "flex";
47
+ addMessage(`Welcome ${user.user.username || "User"}! You’re now authenticated.`, "ai");
48
+ } catch (error) {
49
+ authStatus.textContent = "❌ Error:\n" + JSON.stringify(error, null, 2);
 
50
  }
51
  });
52
 
53
+ // --- Chat logic ---
54
  function addMessage(text, sender) {
55
+ const msg = document.createElement("div");
56
+ msg.classList.add("message", sender);
57
  msg.textContent = text;
58
  messagesDiv.appendChild(msg);
59
  messagesDiv.scrollTop = messagesDiv.scrollHeight;
60
  }
61
 
 
62
  async function sendMessage() {
63
  const userText = input.value.trim();
64
  if (!userText) return;
65
 
66
+ addMessage(userText, "user");
67
+ messages.push({ role: "user", content: userText });
68
+ input.value = "";
69
+
70
+ addMessage("Thinking...", "ai");
71
 
 
72
  try {
73
  const response = await puter.ai.chat(messages);
74
  const reply = response.message.content || "No response from AI.";
 
76
  messagesDiv.lastChild.textContent = reply;
77
  } catch (err) {
78
  console.error(err);
79
+ messagesDiv.lastChild.textContent = "⚠️ Error: Failed to get response.";
80
  }
81
  }
82
 
83
+ sendBtn.addEventListener("click", sendMessage);
84
+ input.addEventListener("keypress", e => {
85
+ if (e.key === "Enter") sendMessage();
86
  });
87
  </script>
88
  </body>