Update index.html

index.html

@@ -4,57 +4,30 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Open-Generative-AI Studio</title>
-    <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;">
     <div style="max-width: 650px; margin: 30px auto; background: #16161e; padding: 24px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); border: 1px solid #2d2d3d;">
         
         <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="handleAuth()" style="background: #2563eb; color: #fff; border: none; padding: 6px 12px; border-radius: 6px; font-size: 12px; cursor: pointer;">Sign In / Connect</button>
+            <span style="background: #10b981; color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600;">Static Mode</span>
         </div>
 
         <div style="margin-bottom: 16px;">
-            <label style="display: block; font-weight: 600; margin-bottom: 6px; font-size: 13px; color: #a1a1aa;">Prompt / Description</label>
-            <textarea id="promptInput" rows="3" placeholder="Describe the image or content you want to generate..." style="width: 100%; padding: 10px; box-sizing: border-box; background: #0b0b0f; border: 1px solid #2d2d3d; color: #fff; border-radius: 6px; font-size: 14px;"></textarea>
+            <label style="display: block; font-weight: 600; margin-bottom: 6px; font-size: 13px; color: #a1a1aa;">Creative Prompt</label>
+            <textarea id="promptInput" rows="3" placeholder="Describe a scene, character, mood, or style..." style="width: 100%; padding: 10px; box-sizing: border-box; background: #0b0b0f; border: 1px solid #2d2d3d; color: #fff; border-radius: 6px; font-size: 14px;"></textarea>
         </div>
 
-        <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: 1; background: #2563eb; color: #fff; border: none; padding: 10px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer;">Ask AI</button>
-        </div>
+        <button onclick="handleGenerate()" style="background: #2563eb; color: #fff; border: none; padding: 12px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; width: 100%; margin-bottom: 20px;">Generate Studio Output</button>
 
-        <label style="display: block; font-weight: 600; margin-bottom: 6px; font-size: 13px; color: #a1a1aa;">Output Result</label>
-        <div id="outputArea" style="padding: 16px; background: #0b0b0f; border: 1px solid #2d2d3d; border-radius: 6px; min-height: 100px; font-size: 14px; color: #d4d4d8; text-align: center; display: flex; align-items: center; justify-content: center;">
+        <label style="display: block; font-weight: 600; margin-bottom: 6px; font-size: 13px; color: #a1a1aa;">Output Panel</label>
+        <div id="outputArea" style="padding: 16px; background: #0b0b0f; border: 1px solid #2d2d3d; border-radius: 6px; min-height: 80px; font-size: 14px; color: #d4d4d8; display: flex; align-items: center; justify-content: center; text-align: center;">
             Ready for input...
         </div>
     </div>
 
     <script>
-        window.addEventListener('DOMContentLoaded', async () => {
-            try {
-                if (puter.auth.isSignedIn()) {
-                    document.getElementById('authBtn').innerText = "Connected";
-                }
-            } catch (e) {
-                console.log("Auth check skipped");
-            }
-        });
-
-        async function handleAuth() {
-            try {
-                document.getElementById('authBtn').innerText = "Connecting...";
-                // Attempt standard sign-in popup
-                await puter.auth.signIn();
-                document.getElementById('authBtn').innerText = "Connected";
-            } 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.");
-            }
-        }
-
-        async function generateImage() {
+        function handleGenerate() {
             const prompt = document.getElementById('promptInput').value;
             const output = document.getElementById('outputArea');
             
@@ -63,34 +36,11 @@
                 return;
             }
             
-            output.innerHTML = "Generating image...";
-            try {
-                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: Please sign in first or check connection. (" + err + ")";
-            }
+            output.innerHTML = "Processed static request for: <br><b style='color:#60a5fa; margin-top:5px; display:block;'>" + escapeHtml(prompt) + "</b>";
         }
 
-        async function generateText() {
-            const prompt = document.getElementById('promptInput').value;
-            const output = document.getElementById('outputArea');
-            
-            if (!prompt.trim()) {
-                output.innerText = "Please enter a prompt first.";
-                return;
-            }
-            
-            output.innerHTML = "Thinking...";
-            try {
-                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: Please sign in first or check connection. (" + err + ")";
-            }
+        function escapeHtml(text) {
+            return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
         }
     </script>
 </body>