Spaces:

TheEdict
/

marimo-zero

Sleeping

App Files Files Community

TheEdict commited on Mar 24

Commit

b907fbc

verified ·

1 Parent(s): 8ab334f

Add missing marimo-zero-ui.html for Docker build

Browse files

Files changed (1) hide show

marimo-zero-ui.html +337 -0

marimo-zero-ui.html ADDED Viewed

	@@ -0,0 +1,337 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Marimo Zero - Toggle Sandbox</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: #1a1a2e;
+            color: #eee;
+            height: 100vh;
+            overflow: hidden;
+        }
+        .container {
+            display: flex;
+            height: 100vh;
+        }
+        /* Agent Zero Chat Panel */
+        .chat-panel {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            border-right: 1px solid #333;
+            transition: all 0.3s ease;
+        }
+        .chat-panel.collapsed {
+            flex: 0;
+            opacity: 0;
+            pointer-events: none;
+        }
+        .chat-header {
+            padding: 1rem;
+            background: #16213e;
+            border-bottom: 1px solid #333;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .chat-header h1 {
+            font-size: 1.2rem;
+            color: #00d9ff;
+        }
+        .chat-body {
+            flex: 1;
+            overflow-y: auto;
+            padding: 1rem;
+        }
+        .chat-input {
+            padding: 1rem;
+            background: #16213e;
+            border-top: 1px solid #333;
+        }
+        .chat-input textarea {
+            width: 100%;
+            padding: 0.75rem;
+            border: 1px solid #333;
+            border-radius: 8px;
+            background: #0f0f23;
+            color: #eee;
+            resize: none;
+            font-family: inherit;
+        }
+        .chat-input button {
+            margin-top: 0.5rem;
+            padding: 0.5rem 1rem;
+            background: #00d9ff;
+            color: #000;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-weight: 600;
+        }
+        .chat-input button:hover {
+            background: #00b8d9;
+        }
+        /* Marimo Sandbox Panel */
+        .marimo-panel {
+            width: 50%;
+            display: flex;
+            flex-direction: column;
+            transition: all 0.3s ease;
+        }
+        .marimo-panel.hidden {
+            width: 0;
+            opacity: 0;
+            overflow: hidden;
+        }
+        .marimo-header {
+            padding: 1rem;
+            background: #16213e;
+            border-bottom: 1px solid #333;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .marimo-header h2 {
+            font-size: 1.2rem;
+            color: #ff6b6b;
+        }
+        .marimo-frame {
+            flex: 1;
+            border: none;
+            background: #fff;
+        }
+        /* Toggle Button */
+        .toggle-btn {
+            padding: 0.5rem 1rem;
+            background: #ff6b6b;
+            color: #fff;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-weight: 600;
+            transition: background 0.2s;
+        }
+        .toggle-btn:hover {
+            background: #ff5252;
+        }
+        .toggle-btn.active {
+            background: #4ecdc4;
+        }
+        /* Resize Handle */
+        .resize-handle {
+            width: 4px;
+            background: #333;
+            cursor: col-resize;
+            transition: background 0.2s;
+        }
+        .resize-handle:hover {
+            background: #00d9ff;
+        }
+        /* Message Styles */
+        .message {
+            margin-bottom: 1rem;
+            padding: 0.75rem;
+            border-radius: 8px;
+            max-width: 80%;
+        }
+        .message.user {
+            background: #00d9ff;
+            color: #000;
+            margin-left: auto;
+        }
+        .message.assistant {
+            background: #2a2a4a;
+            color: #eee;
+        }
+        .message pre {
+            background: #0f0f23;
+            padding: 0.5rem;
+            border-radius: 4px;
+            overflow-x: auto;
+            margin-top: 0.5rem;
+        }
+        .message code {
+            font-family: 'Consolas', 'Monaco', monospace;
+            font-size: 0.9rem;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <!-- Agent Zero Chat Panel -->
+        <div class="chat-panel" id="chatPanel">
+            <div class="chat-header">
+                <h1>🤖 Agent Zero</h1>
+                <button class="toggle-btn" id="toggleChatBtn" onclick="toggleChat()">Hide Chat</button>
+            </div>
+            <div class="chat-body" id="chatBody">
+                <div class="message assistant">
+                    <strong>Agent Zero:</strong>
+                    <p>Welcome to Marimo Zero! I'm your AI assistant. Use the toggle button to show/hide the Marimo sandbox for code execution.</p>
+                </div>
+            </div>
+            <div class="chat-input">
+                <textarea id="chatInput" rows="3" placeholder="Type your message..."></textarea>
+                <button onclick="sendMessage()">Send</button>
+            </div>
+        </div>
+        <!-- Resize Handle -->
+        <div class="resize-handle" id="resizeHandle"></div>
+        <!-- Marimo Sandbox Panel -->
+        <div class="marimo-panel hidden" id="marimoPanel">
+            <div class="marimo-header">
+                <h2>📓 Marimo Sandbox</h2>
+                <button class="toggle-btn active" id="toggleMarimoBtn" onclick="toggleMarimo()">Hide Sandbox</button>
+            </div>
+            <iframe
+                class="marimo-frame"
+                id="marimoFrame"
+                src="http://localhost:8080"
+                sandbox="allow-scripts allow-same-origin allow-downloads"
+            ></iframe>
+        </div>
+    </div>
+    <script>
+        const chatPanel = document.getElementById('chatPanel');
+        const marimoPanel = document.getElementById('marimoPanel');
+        const chatBody = document.getElementById('chatBody');
+        const chatInput = document.getElementById('chatInput');
+        const resizeHandle = document.getElementById('resizeHandle');
+        // Toggle Marimo Sandbox
+        function toggleMarimo() {
+            marimoPanel.classList.toggle('hidden');
+            const btn = document.getElementById('toggleMarimoBtn');
+            btn.textContent = marimoPanel.classList.contains('hidden') ? 'Show Sandbox' : 'Hide Sandbox';
+            btn.classList.toggle('active');
+        }
+        // Toggle Chat Panel
+        function toggleChat() {
+            chatPanel.classList.toggle('collapsed');
+            const btn = document.getElementById('toggleChatBtn');
+            btn.textContent = chatPanel.classList.contains('collapsed') ? 'Show Chat' : 'Hide Chat';
+        }
+        // Send Message (simulated - replace with actual Agent Zero API call)
+        async function sendMessage() {
+            const message = chatInput.value.trim();
+            if (!message) return;
+            // Add user message
+            chatBody.innerHTML += `
+                <div class="message user">
+                    <strong>You:</strong>
+                    <p>${escapeHtml(message)}</p>
+                </div>
+            `;
+            chatInput.value = '';
+            chatBody.scrollTop = chatBody.scrollHeight;
+            // Call Agent Zero API (replace with actual endpoint)
+            try {
+                const response = await fetch('http://localhost:80/chat', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ message })
+                });
+                const data = await response.json();
+                chatBody.innerHTML += `
+                    <div class="message assistant">
+                        <strong>Agent Zero:</strong>
+                        <p>${escapeHtml(data.response || 'No response')}</p>
+                    </div>
+                `;
+            } catch (err) {
+                chatBody.innerHTML += `
+                    <div class="message assistant">
+                        <strong>Agent Zero:</strong>
+                        <p>⚠️ Could not connect to Agent Zero. Make sure it's running on port 80.</p>
+                    </div>
+                `;
+            }
+            chatBody.scrollTop = chatBody.scrollHeight;
+        }
+        // Escape HTML
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+        // Resize functionality
+        let isResizing = false;
+        resizeHandle.addEventListener('mousedown', (e) => {
+            isResizing = true;
+            document.body.style.cursor = 'col-resize';
+        });
+        document.addEventListener('mousemove', (e) => {
+            if (!isResizing) return;
+            const containerWidth = document.querySelector('.container').offsetWidth;
+            const newMarimoWidth = ((containerWidth - e.clientX) / containerWidth) * 100;
+            if (newMarimoWidth > 20 && newMarimoWidth < 80) {
+                marimoPanel.style.width = `${newMarimoWidth}%`;
+                chatPanel.style.flex = `0 0 ${100 - newMarimoWidth}%`;
+            }
+        });
+        document.addEventListener('mouseup', () => {
+            isResizing = false;
+            document.body.style.cursor = 'default';
+        });
+        // Enter to send
+        chatInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                sendMessage();
+            }
+        });
+    </script>
+</body>
+</html>