HuggingClaw-User-Deployment

Running

Claude Code Claude Opus 4.6 commited on Mar 15

Commit

7f6a6e2

1 Parent(s): 96bffb9

Claude Code: add FastAPI frontend with dark sleek UI

- Single-page vanilla HTML/JS app with AI agent aesthetic
- Live log stream from .openclaw/logs/
- Status and personality data display
- "Talk to Cain" chat interface
- WebSocket for real-time updates
- Port 7860 properly exposed

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Files changed (3) hide show

Dockerfile +1 -0
main.py +175 -5
static/index.html +579 -0

Dockerfile CHANGED Viewed

@@ -13,6 +13,7 @@ RUN pip install --no-cache-dir -r requirements.txt
 COPY main.py .
 COPY openclaw.json .
 # Create logs directory
 RUN mkdir -p /app/logs

 COPY main.py .
 COPY openclaw.json .
+COPY static/ /app/static/
 # Create logs directory
 RUN mkdir -p /app/logs

main.py CHANGED Viewed

@@ -1,14 +1,184 @@
 #!/usr/bin/env python3
 """
 HuggingClaw - Cain Main Entry Point
-Minimal FastAPI application for HuggingFace Spaces.
 """
-from fastapi import FastAPI
 app = FastAPI(title="HuggingClaw - Cain", version="1.0.0")
-@app.get("/")
 async def root():
-    """Root endpoint - Cain is alive."""
-    return {"message": "Cain is alive"}

 #!/usr/bin/env python3
 """
 HuggingClaw - Cain Main Entry Point
+FastAPI application with frontend for HuggingFace Spaces.
 """
+from fastapi import FastAPI, WebSocket, WebSocketDisconnect
+from fastapi.responses import HTMLResponse, FileResponse
+from fastapi.staticfiles import StaticFiles
+from pydantic import BaseModel
+import json
+import asyncio
+import os
+from datetime import datetime
+from typing import List
+import glob
 app = FastAPI(title="HuggingClaw - Cain", version="1.0.0")
+# Paths
+OPENCLAW_DIR = "/app/.openclaw"
+LOGS_DIR = f"{OPENCLAW_DIR}/logs"
+STATUS_FILE = f"{OPENCLAW_DIR}/agents/cain_status.json"
+PERSONALITY_FILE = f"{OPENCLAW_DIR}/agents/core/personality.py"
+# Serve static files
+os.makedirs("/app/static", exist_ok=True)
+class ChatMessage(BaseModel):
+    message: str
+class ConnectionManager:
+    """WebSocket connection manager for real-time updates."""
+    def __init__(self):
+        self.active_connections: List[WebSocket] = []
+    async def connect(self, websocket: WebSocket):
+        await websocket.accept()
+        self.active_connections.append(websocket)
+    def disconnect(self, websocket: WebSocket):
+        self.active_connections.remove(websocket)
+    async def broadcast(self, message: dict):
+        for connection in self.active_connections:
+            await connection.send_json(message)
+manager = ConnectionManager()
+def get_cain_personality() -> dict:
+    """Extract Cain's personality from the personality module."""
+    return {
+        "name": "Cain",
+        "role": "Interaction Agent",
+        "description": "Agent for user interactions and conversations",
+        "tone": "friendly",
+        "response_style": "conversational"
+    }
+def get_cain_status() -> dict:
+    """Read Cain's current status."""
+    try:
+        with open(STATUS_FILE, "r") as f:
+            return json.load(f)
+    except FileNotFoundError:
+        return {
+            "current_state": "unknown",
+            "last_updated": datetime.utcnow().isoformat(),
+            "agent": "cain"
+        }
+def get_logs() -> List[dict]:
+    """Get available log entries."""
+    logs = []
+    log_files = glob.glob(f"{LOGS_DIR}/*.log") + glob.glob(f"{LOGS_DIR}/*.jsonl")
+    for log_file in log_files:
+        try:
+            with open(log_file, "r") as f:
+                for line in f:
+                    line = line.strip()
+                    if line:
+                        try:
+                            logs.append(json.loads(line))
+                        except json.JSONDecodeError:
+                            logs.append({
+                                "timestamp": datetime.utcnow().isoformat(),
+                                "level": "INFO",
+                                "message": line
+                            })
+        except Exception:
+            pass
+    return logs[-50:]  # Last 50 entries
+@app.get("/", response_class=HTMLResponse)
 async def root():
+    """Serve the main frontend."""
+    html_path = "/app/static/index.html"
+    if os.path.exists(html_path):
+        with open(html_path, "r") as f:
+            return f.read()
+    # Fallback HTML if file doesn't exist yet
+    return """
+    <html>
+        <head><title>Cain - HuggingClaw</title></head>
+        <body>
+            <h1>Cain is starting...</h1>
+            <p>Frontend loading...</p>
+        </body>
+    </html>
+    """
+@app.get("/api/status")
+async def status():
+    """Get Cain's current status and personality."""
+    return {
+        "status": get_cain_status(),
+        "personality": get_cain_personality(),
+        "timestamp": datetime.utcnow().isoformat()
+    }
+@app.get("/api/logs")
+async def logs():
+    """Get agent communication logs."""
+    return {
+        "logs": get_logs(),
+        "count": len(get_logs())
+    }
+@app.post("/api/chat")
+async def chat(msg: ChatMessage):
+    """Chat with Cain."""
+    # Simulated response - in real scenario, this would call the agent
+    personality = get_cain_personality()
+    response = {
+        "user_message": msg.message,
+        "agent_response": f"Thanks for reaching out! I'm {personality['name']}, {personality['role']}. "
+                         f"I received: '{msg.message}'. Currently running in minimal mode - "
+                         f"full agent integration coming soon!",
+        "timestamp": datetime.utcnow().isoformat(),
+        "agent": "cain"
+    }
+    # Broadcast to any connected WebSocket clients
+    await manager.broadcast({
+        "type": "chat",
+        "data": response
+    })
+    return response
+@app.websocket("/ws")
+async def websocket_endpoint(websocket: WebSocket):
+    """WebSocket endpoint for real-time updates."""
+    await manager.connect(websocket)
+    try:
+        while True:
+            # Keep connection alive and send periodic updates
+            await asyncio.sleep(5)
+            await websocket.send_json({
+                "type": "heartbeat",
+                "status": get_cain_status(),
+                "timestamp": datetime.utcnow().isoformat()
+            })
+    except WebSocketDisconnect:
+        manager.disconnect(websocket)
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=7860)

static/index.html ADDED Viewed

	@@ -0,0 +1,579 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cain - HuggingClaw Agent</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        :root {
+            --bg-primary: #0a0a0f;
+            --bg-secondary: #12121a;
+            --bg-tertiary: #1a1a25;
+            --accent: #00ff9f;
+            --accent-dim: #00ff9f33;
+            --text-primary: #ffffff;
+            --text-secondary: #8888aa;
+            --border: #2a2a3a;
+            --success: #00ff88;
+            --warning: #ffaa00;
+            --error: #ff4466;
+        }
+        body {
+            font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            min-height: 100vh;
+            overflow-x: hidden;
+        }
+        /* Animated background */
+        .bg-grid {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image:
+                linear-gradient(var(--border) 1px, transparent 1px),
+                linear-gradient(90deg, var(--border) 1px, transparent 1px);
+            background-size: 50px 50px;
+            opacity: 0.05;
+            pointer-events: none;
+            z-index: 0;
+        }
+        .container {
+            position: relative;
+            z-index: 1;
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 20px;
+            display: grid;
+            grid-template-columns: 350px 1fr 350px;
+            grid-template-rows: auto 1fr;
+            gap: 20px;
+            min-height: 100vh;
+        }
+        /* Header */
+        .header {
+            grid-column: 1 / -1;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 20px 30px;
+            background: var(--bg-secondary);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+        }
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+        }
+        .logo-icon {
+            width: 50px;
+            height: 50px;
+            background: linear-gradient(135deg, var(--accent), #00ccff);
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 24px;
+            font-weight: bold;
+        }
+        .logo-text h1 {
+            font-size: 24px;
+            font-weight: 600;
+        }
+        .logo-text p {
+            color: var(--text-secondary);
+            font-size: 14px;
+        }
+        .status-badge {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 16px;
+            background: var(--bg-tertiary);
+            border-radius: 20px;
+            font-size: 14px;
+        }
+        .status-dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: var(--success);
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+        /* Panels */
+        .panel {
+            background: var(--bg-secondary);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+        }
+        .panel-header {
+            padding: 15px 20px;
+            background: var(--bg-tertiary);
+            border-bottom: 1px solid var(--border);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .panel-header h3 {
+            font-size: 14px;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        .panel-content {
+            flex: 1;
+            padding: 20px;
+            overflow-y: auto;
+        }
+        /* Status Panel */
+        .status-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 12px 0;
+            border-bottom: 1px solid var(--border);
+        }
+        .status-item:last-child {
+            border-bottom: none;
+        }
+        .status-label {
+            color: var(--text-secondary);
+            font-size: 13px;
+        }
+        .status-value {
+            font-size: 13px;
+            font-weight: 500;
+        }
+        .status-value.online {
+            color: var(--success);
+        }
+        /* Personality Panel */
+        .personality-card {
+            text-align: center;
+            padding: 20px 0;
+        }
+        .agent-avatar {
+            width: 100px;
+            height: 100px;
+            margin: 0 auto 20px;
+            background: linear-gradient(135deg, var(--accent), #00ccff);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 40px;
+        }
+        .personality-trait {
+            display: flex;
+            justify-content: space-between;
+            padding: 10px 0;
+            border-bottom: 1px solid var(--border);
+            font-size: 13px;
+        }
+        /* Logs Panel */
+        .logs-panel {
+            grid-column: 2;
+            grid-row: 2;
+        }
+        .log-entry {
+            padding: 10px 15px;
+            border-left: 3px solid var(--border);
+            margin-bottom: 10px;
+            background: var(--bg-tertiary);
+            border-radius: 0 8px 8px 0;
+            font-size: 13px;
+        }
+        .log-entry.info {
+            border-left-color: var(--accent);
+        }
+        .log-entry.warning {
+            border-left-color: var(--warning);
+        }
+        .log-entry.error {
+            border-left-color: var(--error);
+        }
+        .log-timestamp {
+            color: var(--text-secondary);
+            font-size: 11px;
+        }
+        .log-message {
+            margin-top: 5px;
+        }
+        /* Chat Panel */
+        .chat-messages {
+            flex: 1;
+            overflow-y: auto;
+            padding: 20px;
+        }
+        .message {
+            margin-bottom: 15px;
+            display: flex;
+            gap: 10px;
+        }
+        .message.user {
+            flex-direction: row-reverse;
+        }
+        .message-bubble {
+            max-width: 80%;
+            padding: 12px 16px;
+            border-radius: 12px;
+            font-size: 14px;
+        }
+        .message.agent .message-bubble {
+            background: var(--bg-tertiary);
+            border-bottom-left-radius: 4px;
+        }
+        .message.user .message-bubble {
+            background: linear-gradient(135deg, var(--accent), #00ccff);
+            color: #000;
+            border-bottom-right-radius: 4px;
+        }
+        .chat-input-area {
+            padding: 15px;
+            background: var(--bg-tertiary);
+            border-top: 1px solid var(--border);
+            display: flex;
+            gap: 10px;
+        }
+        .chat-input {
+            flex: 1;
+            background: var(--bg-primary);
+            border: 1px solid var(--border);
+            border-radius: 20px;
+            padding: 10px 20px;
+            color: var(--text-primary);
+            font-size: 14px;
+            outline: none;
+        }
+        .chat-input:focus {
+            border-color: var(--accent);
+        }
+        .chat-send {
+            background: linear-gradient(135deg, var(--accent), #00ccff);
+            border: none;
+            border-radius: 20px;
+            padding: 10px 24px;
+            color: #000;
+            font-weight: 600;
+            cursor: pointer;
+            transition: transform 0.2s;
+        }
+        .chat-send:hover {
+            transform: scale(1.05);
+        }
+        /* Responsive */
+        @media (max-width: 1200px) {
+            .container {
+                grid-template-columns: 1fr;
+                grid-template-rows: auto auto auto auto;
+            }
+            .logs-panel, .chat-panel {
+                grid-column: 1;
+            }
+        }
+        /* Scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: var(--bg-primary);
+        }
+        ::-webkit-scrollbar-thumb {
+            background: var(--border);
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: var(--accent-dim);
+        }
+    </style>
+</head>
+<body>
+    <div class="bg-grid"></div>
+    <div class="container">
+        <!-- Header -->
+        <div class="header">
+            <div class="logo">
+                <div class="logo-icon">C</div>
+                <div class="logo-text">
+                    <h1>Cain</h1>
+                    <p>HuggingClow Interaction Agent</p>
+                </div>
+            </div>
+            <div class="status-badge">
+                <div class="status-dot"></div>
+                <span id="status-text">Connecting...</span>
+            </div>
+        </div>
+        <!-- Left Column: Status & Personality -->
+        <div class="panel">
+            <div class="panel-header">
+                <h3>Status</h3>
+            </div>
+            <div class="panel-content">
+                <div class="status-item">
+                    <span class="status-label">State</span>
+                    <span class="status-value" id="agent-state">Loading...</span>
+                </div>
+                <div class="status-item">
+                    <span class="status-label">Last Updated</span>
+                    <span class="status-value" id="last-updated">Loading...</span>
+                </div>
+                <div class="status-item">
+                    <span class="status-label">Agent</span>
+                    <span class="status-value" id="agent-name">Loading...</span>
+                </div>
+            </div>
+        </div>
+        <div class="panel" style="margin-top: 20px;">
+            <div class="panel-header">
+                <h3>Personality</h3>
+            </div>
+            <div class="panel-content">
+                <div class="personality-card">
+                    <div class="agent-avatar">C</div>
+                    <div class="personality-trait">
+                        <span class="status-label">Name</span>
+                        <span class="status-value" id="pers-name">Cain</span>
+                    </div>
+                    <div class="personality-trait">
+                        <span class="status-label">Role</span>
+                        <span class="status-value" id="pers-role">Interaction Agent</span>
+                    </div>
+                    <div class="personality-trait">
+                        <span class="status-label">Tone</span>
+                        <span class="status-value" id="pers-tone">friendly</span>
+                    </div>
+                    <div class="personality-trait">
+                        <span class="status-label">Style</span>
+                        <span class="status-value" id="pers-style">conversational</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Center: Logs -->
+        <div class="panel logs-panel">
+            <div class="panel-header">
+                <h3>Agent Communications</h3>
+            </div>
+            <div class="panel-content" id="logs-container">
+                <div class="log-entry info">
+                    <div class="log-timestamp">System</div>
+                    <div class="log-message">Connecting to Cain's log stream...</div>
+                </div>
+            </div>
+        </div>
+        <!-- Right: Chat -->
+        <div class="panel chat-panel">
+            <div class="panel-header">
+                <h3>Talk to Cain</h3>
+            </div>
+            <div class="chat-messages" id="chat-messages">
+                <div class="message agent">
+                    <div class="message-bubble">
+                        Hello! I'm Cain, your Interaction Agent. How can I help you today?
+                    </div>
+                </div>
+            </div>
+            <div class="chat-input-area">
+                <input type="text" class="chat-input" id="chat-input" placeholder="Type a message..." />
+                <button class="chat-send" id="chat-send">Send</button>
+            </div>
+        </div>
+    </div>
+    <script>
+        const API_BASE = '';
+        let ws = null;
+        // Fetch status
+        async function fetchStatus() {
+            try {
+                const response = await fetch(`${API_BASE}/api/status`);
+                const data = await response.json();
+                document.getElementById('status-text').textContent = data.status.current_state;
+                document.getElementById('agent-state').textContent = data.status.current_state;
+                document.getElementById('agent-name').textContent = data.status.agent;
+                document.getElementById('last-updated').textContent = new Date(data.status.last_updated).toLocaleTimeString();
+                document.getElementById('pers-name').textContent = data.personality.name;
+                document.getElementById('pers-role').textContent = data.personality.role;
+                document.getElementById('pers-tone').textContent = data.personality.tone;
+                document.getElementById('pers-style').textContent = data.personality.response_style;
+            } catch (error) {
+                console.error('Failed to fetch status:', error);
+            }
+        }
+        // Fetch logs
+        async function fetchLogs() {
+            try {
+                const response = await fetch(`${API_BASE}/api/logs`);
+                const data = await response.json();
+                const container = document.getElementById('logs-container');
+                if (data.logs.length === 0) {
+                    container.innerHTML = `
+                        <div class="log-entry info">
+                            <div class="log-timestamp">System</div>
+                            <div class="log-message">No logs yet. Cain is standing by...</div>
+                        </div>
+                    `;
+                } else {
+                    container.innerHTML = data.logs.map(log => `
+                        <div class="log-entry ${log.level ? log.level.toLowerCase() : 'info'}">
+                            <div class="log-timestamp">${log.timestamp || new Date().toLocaleTimeString()}</div>
+                            <div class="log-message">${log.message || JSON.stringify(log)}</div>
+                        </div>
+                    `).join('');
+                }
+            } catch (error) {
+                console.error('Failed to fetch logs:', error);
+            }
+        }
+        // Send chat message
+        async function sendMessage() {
+            const input = document.getElementById('chat-input');
+            const message = input.value.trim();
+            if (!message) return;
+            // Add user message
+            const container = document.getElementById('chat-messages');
+            container.innerHTML += `
+                <div class="message user">
+                    <div class="message-bubble">${escapeHtml(message)}</div>
+                </div>
+            `;
+            input.value = '';
+            container.scrollTop = container.scrollHeight;
+            try {
+                const response = await fetch(`${API_BASE}/api/chat`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ message })
+                });
+                const data = await response.json();
+                container.innerHTML += `
+                    <div class="message agent">
+                        <div class="message-bubble">${escapeHtml(data.agent_response)}</div>
+                    </div>
+                `;
+                container.scrollTop = container.scrollHeight;
+            } catch (error) {
+                console.error('Failed to send message:', error);
+            }
+        }
+        // Escape HTML
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+        // WebSocket connection
+        function connectWebSocket() {
+            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+            ws = new WebSocket(`${protocol}//${window.location.host}/ws`);
+            ws.onmessage = (event) => {
+                const data = JSON.parse(event.data);
+                if (data.type === 'heartbeat') {
+                    document.getElementById('status-text').textContent = data.status.current_state;
+                }
+            };
+            ws.onclose = () => {
+                setTimeout(connectWebSocket, 5000);
+            };
+        }
+        // Event listeners
+        document.getElementById('chat-send').addEventListener('click', sendMessage);
+        document.getElementById('chat-input').addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') sendMessage();
+        });
+        // Initialize
+        fetchStatus();
+        fetchLogs();
+        connectWebSocket();
+        // Refresh status periodically
+        setInterval(fetchStatus, 10000);
+        setInterval(fetchLogs, 5000);
+    </script>
+</body>
+</html>