Spaces:

Sachin5112
/

continuumlearner

Sleeping

File size: 11,522 Bytes


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ContinuumGPT - Hierarchical Memory</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .header {
            background: white;
            padding: 30px;
            border-radius: 20px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            margin-bottom: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 36px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 10px;
        }

        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: white;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        .stat-card h3 {
            color: #667eea;
            font-size: 32px;
            margin-bottom: 5px;
        }

        .stat-card p {
            color: #666;
            font-size: 14px;
        }

        .level-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: bold;
            margin-top: 5px;
        }

        .level-1 { background: #4CAF50; color: white; }
        .level-2 { background: #FF9800; color: white; }
        .level-3 { background: #9C27B0; color: white; }

        .chat-area {
            background: white;
            padding: 30px;
            border-radius: 20px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            margin-bottom: 30px;
        }

        .input-area {
            margin-bottom: 20px;
        }

        textarea {
            width: 100%;
            padding: 15px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            font-size: 16px;
            resize: vertical;
            min-height: 100px;
        }

        .btn {
            padding: 15px 30px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            margin-right: 10px;
            transition: transform 0.2s;
        }

        .btn:hover {
            transform: translateY(-2px);
        }

        .response-area {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            margin-top: 20px;
            min-height: 150px;
        }

        .response-area h3 {
            color: #667eea;
            margin-bottom: 10px;
        }

        .log {
            background: white;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            max-height: 400px;
            overflow-y: auto;
        }

        .log-entry {
            padding: 10px;
            border-bottom: 1px solid #e0e0e0;
            font-size: 14px;
        }

        .success { color: #28a745; }
        .error { color: #dc3545; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🧠 ContinuumGPT</h1>
            <p>Hierarchical Memory System</p>
            <p style="margin-top: 10px; color: #666;">
                Dataset: <a href="https://huggingface.co/datasets/Sahil5112/ContinuumGPT" target="_blank" style="color: #667eea;">Sahil5112/ContinuumGPT</a>
            </p>
            <p style="margin-top: 5px; color: #999; font-size: 13px;">
                🗄️ Level 1: Fresh → Level 2: Archived → Level 3: Super-Summary
            </p>
        </div>

        <div class="stats">
            <div class="stat-card">
                <h3 id="level1Count">0</h3>
                <p>Level 1 (Fresh)</p>
                <span class="level-badge level-1">Detailed Q&A</span>
            </div>
            <div class="stat-card">
                <h3 id="level2Count">0</h3>
                <p>Level 2 (Archived)</p>
                <span class="level-badge level-2">Compressed</span>
            </div>
            <div class="stat-card">
                <h3 id="level3Count">0</h3>
                <p>Level 3 (Super)</p>
                <span class="level-badge level-3">Global Knowledge</span>
            </div>
            <div class="stat-card">
                <h3 id="bufferedCount">0</h3>
                <p>Buffered (Unsaved)</p>
            </div>
            <div class="stat-card">
                <h3 id="autoGenCount">0</h3>
                <p>Auto-Generated</p>
            </div>
            <div class="stat-card">
                <h3 id="totalEntries">0</h3>
                <p>Total Entries</p>
            </div>
        </div>

        <div class="chat-area">
            <h2 style="margin-bottom: 20px; color: #667eea;">Chat with ContinuumGPT</h2>

            <div class="input-area">
                <textarea id="userQuery" placeholder="Ask me anything..."></textarea>
            </div>

            <button class="btn" onclick="sendMessage()">💬 Send</button>
            <button class="btn" onclick="flushBuffer()">💾 Save Buffer</button>
            <button class="btn" onclick="archiveNow()">📦 Archive Now</button>
            <button class="btn" onclick="refreshStats()">🔄 Refresh</button>

            <div class="response-area">
                <h3>Response</h3>
                <div id="responseText" style="white-space: pre-wrap;"></div>
                <div id="summaryText" style="margin-top: 10px; font-style: italic; color: #666;"></div>
            </div>
        </div>

        <div class="log">
            <h2 style="margin-bottom: 15px; color: #667eea;">Activity Log</h2>
            <div id="activityLog"></div>
        </div>
    </div>

    <script>
        async function sendMessage() {
            const query = document.getElementById('userQuery').value.trim();
            if (!query) {
                alert('Please enter a message');
                return;
            }

            const responseText = document.getElementById('responseText');
            const summaryText = document.getElementById('summaryText');
            responseText.innerHTML = '🔄 Thinking...';
            summaryText.innerHTML = '';

            try {
                const response = await fetch('/api/chat', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ query })
                });

                const data = await response.json();

                if (!data.success) {
                    responseText.textContent = `Error: ${data.error}`;
                    addLog(`❌ Error: ${data.error}`, 'error');
                    return;
                }

                responseText.textContent = data.response;
                summaryText.innerHTML = `📝 Summary: ${data.summary}`;
                addLog(`✅ Response saved to Level ${data.level} (${data.buffered} buffered)`, 'success');

                document.getElementById('userQuery').value = '';
                document.getElementById('bufferedCount').textContent = data.buffered;

                await refreshStats();
            } catch (error) {
                responseText.textContent = `Error: ${error.message}`;
                addLog(`❌ Error: ${error.message}`, 'error');
            }
        }

        async function flushBuffer() {
            try {
                const response = await fetch('/api/flush-buffer', { method: 'POST' });
                const data = await response.json();

                if (data.success) {
                    addLog(`💾 ${data.message}`, 'success');
                    await refreshStats();
                } else {
                    addLog(data.message, 'success');
                }
            } catch (error) {
                addLog(`❌ Error: ${error.message}`, 'error');
            }
        }

        async function archiveNow() {
            try {
                addLog('🔄 Running archive process...', 'success');
                const response = await fetch('/api/archive-now', { method: 'POST' });
                const data = await response.json();

                if (data.success) {
                    addLog(`📦 ${data.message}`, 'success');
                    await refreshStats();
                } else {
                    addLog(`Error: ${data.error}`, 'error');
                }
            } catch (error) {
                addLog(`❌ Error: ${error.message}`, 'error');
            }
        }

        async function refreshStats() {
            try {
                const response = await fetch('/api/dataset-stats');
                const data = await response.json();

                if (data.success) {
                    document.getElementById('level1Count').textContent = data.level_1_fresh;
                    document.getElementById('level2Count').textContent = data.level_2_archived;
                    document.getElementById('level3Count').textContent = data.level_3_super;
                    document.getElementById('bufferedCount').textContent = data.buffered;
                    document.getElementById('autoGenCount').textContent = data.auto_generated_count || 0;
                    document.getElementById('totalEntries').textContent = data.total_entries;
                    addLog('📊 Stats refreshed', 'success');
                }
            } catch (error) {
                addLog(`❌ Error: ${error.message}`, 'error');
            }
        }

        function addLog(message, type = '') {
            const log = document.getElementById('activityLog');
            const entry = document.createElement('div');
            entry.className = `log-entry ${type}`;
            entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
            log.insertBefore(entry, log.firstChild);

            while (log.children.length > 50) {
                log.removeChild(log.lastChild);
            }
        }

        // Initialize
        refreshStats();
        addLog('🚀 ContinuumGPT Hierarchical Memory initialized', 'success');
        addLog('🗄️ Auto-archiving runs every 10 minutes', 'success');
        addLog('🤖 Auto-training runs every 5 minutes', 'success');
        addLog('💾 Auto-save ENABLED - all responses saved immediately', 'success');

        // Auto-refresh
        setInterval(refreshStats, 30000);

        // Enter to send
        document.getElementById('userQuery').addEventListener('keydown', function(e) {
            if (e.key === 'Enter' && e.ctrlKey) {
                sendMessage();
            }
        });

</script>
</body>
</html>