Update index.html

index.html

@@ -3,28 +3,90 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI Studio Lite</title>
-
-    <!-- Official Gradio Lite CDN -->
-    <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
+    <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: 16px; font-family: -apple-system, BlinkMacSystemFont, sans-serif;">
-    <h3 style="text-align: center; color: #333; margin-bottom: 12px;">AI Studio Workspace</h3>
+<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="toggleAuth()" style="background: #2563eb; color: #fff; border: none; padding: 6px 12px; border-radius: 6px; font-size: 12px; cursor: pointer;">Sign In</button>
+        </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>
+        </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: 1px; 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>
+        <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;">
+            Ready for input...
+        </div>
+    </div>
+
+    <script>
+        // Check initial sign-in state
+        window.addEventListener('DOMContentLoaded', async () => {
+            if (puter.auth.isSignedIn()) {
+                document.getElementById('authBtn').innerText = "Connected";
+            }
+        });
 
-    <gradio-lite>
-import gradio as gr
+        async function toggleAuth() {
+            if (!puter.auth.isSignedIn()) {
+                await puter.auth.signIn();
+                document.getElementById('authBtn').innerText = "Connected";
+            } else {
+                alert("You are already signed in!");
+            }
+        }
 
-def respond(message):
-    return f"Received on mobile: {message}"
+        async function generateImage() {
+            const prompt = document.getElementById('promptInput').value;
+            const output = document.getElementById('outputArea');
+            
+            if (!prompt.trim()) {
+                output.innerText = "Please enter a prompt first.";
+                return;
+            }
+            
+            output.innerHTML = "Generating image (processing)...";
+            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;
+            }
+        }
 
-demo = gr.Interface(
-    fn=respond,
-    inputs=gr.Textbox(label="Prompt", placeholder="Type your idea here..."),
-    outputs=gr.Textbox(label="Response"),
-    title="Simple Echo Demo"
-)
-demo.launch()
-    </gradio-lite>
+        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: " + err;
+            }
+        }
+    </script>
 </body>
-</html>
+</html>