Update index.html

index.html

@@ -4,7 +4,6 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Open-Generative-AI Studio</title>
-    <!-- Include Puter.js for zero-key AI and cloud features -->
     <script src="https://js.puter.com/v2/"></script>
 </head>
 <body style="margin: 0; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: #0b0b0f; color: #f1f1f3;">
@@ -12,7 +11,7 @@
         
         <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
             <h2 style="margin: 0; color: #fff; font-size: 20px;">Open-Generative-AI Studio</h2>
-            <button id="authBtn" onclick="toggleAuth()" style="background: #2563eb; color: #fff; border: none; padding: 6px 12px; border-radius: 6px; font-size: 12px; cursor: pointer;">Sign In</button>
+            <button id="authBtn" onclick="handleAuth()" style="background: #2563eb; color: #fff; border: none; padding: 6px 12px; border-radius: 6px; font-size: 12px; cursor: pointer;">Sign In / Connect</button>
         </div>
 
         <div style="margin-bottom: 16px;">
@@ -22,7 +21,7 @@
 
         <div style="display: flex; gap: 10px; margin-bottom: 20px;">
             <button onclick="generateImage()" style="flex: 1; background: #7c3aed; color: #fff; border: none; padding: 10px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer;">Generate Image</button>
-            <button onclick="generateText()" style="flex: 1px; background: #2563eb; color: #fff; border: none; padding: 10px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer;">Ask AI</button>
+            <button onclick="generateText()" style="flex: 1; background: #2563eb; color: #fff; border: none; padding: 10px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer;">Ask AI</button>
         </div>
 
         <label style="display: block; font-weight: 600; margin-bottom: 6px; font-size: 13px; color: #a1a1aa;">Output Result</label>
@@ -32,19 +31,26 @@
     </div>
 
     <script>
-        // Check initial sign-in state
         window.addEventListener('DOMContentLoaded', async () => {
-            if (puter.auth.isSignedIn()) {
-                document.getElementById('authBtn').innerText = "Connected";
+            try {
+                if (puter.auth.isSignedIn()) {
+                    document.getElementById('authBtn').innerText = "Connected";
+                }
+            } catch (e) {
+                console.log("Auth check skipped");
             }
         });
 
-        async function toggleAuth() {
-            if (!puter.auth.isSignedIn()) {
+        async function handleAuth() {
+            try {
+                document.getElementById('authBtn').innerText = "Connecting...";
+                // Attempt standard sign-in popup
                 await puter.auth.signIn();
                 document.getElementById('authBtn').innerText = "Connected";
-            } else {
-                alert("You are already signed in!");
+            } catch (err) {
+                console.error(err);
+                document.getElementById('authBtn').innerText = "Sign In Failed";
+                alert("Popup was blocked or closed. Tip: Log into puter.com in another tab first, then return here and try again.");
             }
         }
 
@@ -57,16 +63,15 @@
                 return;
             }
             
-            output.innerHTML = "Generating image (processing)...";
+            output.innerHTML = "Generating image...";
             try {
-                // Generates an image element directly using Puter.js
                 const imgElement = await puter.ai.txt2img(prompt);
                 output.innerHTML = "";
                 imgElement.style.maxWidth = "100%";
                 imgElement.style.borderRadius = "6px";
                 output.appendChild(imgElement);
             } catch (err) {
-                output.innerText = "Error: " + err;
+                output.innerText = "Error: Please sign in first or check connection. (" + err + ")";
             }
         }
 
@@ -84,7 +89,7 @@
                 const response = await puter.ai.chat(prompt);
                 output.innerHTML = `<div style="text-align: left; width: 100%; white-space: pre-wrap;">${response}</div>`;
             } catch (err) {
-                output.innerText = "Error: " + err;
+                output.innerText = "Error: Please sign in first or check connection. (" + err + ")";
             }
         }
     </script>