Spaces:

wop
/

visualize

Sleeping

App Files Files Community

wop commited on 5 days ago

Commit

58342e8

verified ·

1 Parent(s): 3e03411

Create static/index.html

Browse files

Files changed (1) hide show

static/index.html +670 -0

static/index.html ADDED Viewed

	@@ -0,0 +1,670 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Human Essence - Emotional Flow Visualizer</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            color: #333;
+        }
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        header {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 15px;
+            padding: 30px;
+            margin-bottom: 20px;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+        }
+        h1 {
+            color: #667eea;
+            font-size: 2.5em;
+            margin-bottom: 10px;
+            text-align: center;
+        }
+        .subtitle {
+            text-align: center;
+            color: #666;
+            font-size: 1.1em;
+        }
+        .stats-bar {
+            display: flex;
+            justify-content: space-around;
+            margin-top: 20px;
+            padding: 15px;
+            background: #f8f9fa;
+            border-radius: 10px;
+        }
+        .stat-item {
+            text-align: center;
+        }
+        .stat-value {
+            font-size: 2em;
+            font-weight: bold;
+            color: #667eea;
+        }
+        .stat-label {
+            color: #666;
+            font-size: 0.9em;
+        }
+        .controls {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 15px;
+            padding: 20px;
+            margin-bottom: 20px;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+        }
+        .control-group {
+            display: flex;
+            gap: 15px;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+        button {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 1em;
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+        button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+        }
+        button:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+        input[type="number"] {
+            padding: 10px;
+            border: 2px solid #ddd;
+            border-radius: 8px;
+            font-size: 1em;
+            width: 100px;
+        }
+        select {
+            padding: 10px;
+            border: 2px solid #ddd;
+            border-radius: 8px;
+            font-size: 1em;
+            min-width: 200px;
+        }
+        .entries-list {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 15px;
+            padding: 20px;
+            margin-bottom: 20px;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+        }
+        .entry-item {
+            padding: 15px;
+            margin-bottom: 10px;
+            background: #f8f9fa;
+            border-radius: 10px;
+            cursor: pointer;
+            transition: all 0.3s;
+            border-left: 4px solid transparent;
+        }
+        .entry-item:hover {
+            background: #e9ecef;
+            border-left-color: #667eea;
+            transform: translateX(5px);
+        }
+        .entry-item.active {
+            background: #667eea;
+            color: white;
+            border-left-color: #764ba2;
+        }
+        .entry-preview {
+            font-size: 0.9em;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        .visualization {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 15px;
+            padding: 30px;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+            min-height: 400px;
+        }
+        .text-display {
+            font-size: 1.2em;
+            line-height: 1.8;
+            margin-bottom: 30px;
+            padding: 20px;
+            background: #f8f9fa;
+            border-radius: 10px;
+        }
+        .word {
+            display: inline-block;
+            padding: 2px 4px;
+            margin: 2px;
+            border-radius: 4px;
+            transition: all 0.3s;
+            cursor: pointer;
+        }
+        .word:hover {
+            transform: scale(1.1);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+        }
+        .emotion-chart {
+            margin-top: 30px;
+        }
+        .chart-container {
+            position: relative;
+            height: 300px;
+            margin-bottom: 20px;
+        }
+        canvas {
+            width: 100%;
+            height: 100%;
+        }
+        .emotion-legend {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 15px;
+            margin-top: 20px;
+        }
+        .legend-item {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .legend-color {
+            width: 20px;
+            height: 20px;
+            border-radius: 4px;
+        }
+        .loading {
+            text-align: center;
+            padding: 40px;
+            color: #666;
+        }
+        .error {
+            background: #fee;
+            color: #c33;
+            padding: 15px;
+            border-radius: 8px;
+            margin: 10px 0;
+        }
+        .pagination {
+            display: flex;
+            justify-content: center;
+            gap: 10px;
+            margin-top: 20px;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .fade-in {
+            animation: fadeIn 0.5s ease-out;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>🎭 Human Essence</h1>
+            <p class="subtitle">Emotional Flow Visualizer</p>
+            <div class="stats-bar" id="statsBar">
+                <div class="stat-item">
+                    <div class="stat-value" id="totalEntries">-</div>
+                    <div class="stat-label">Total Entries</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-value" id="withText">-</div>
+                    <div class="stat-label">With Text</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-value" id="withEmotions">-</div>
+                    <div class="stat-label">With Emotions</div>
+                </div>
+            </div>
+        </header>
+        <div class="controls">
+            <div class="control-group">
+                <button onclick="loadStats()">📊 Load Stats</button>
+                <button onclick="loadEntries()">📝 Load Entries</button>
+                <select id="emotionFilter" onchange="filterByEmotion()">
+                    <option value="">All Emotions</option>
+                </select>
+                <input type="number" id="limitInput" value="50" min="1" max="500" placeholder="Limit">
+                <button onclick="previousPage()" id="prevBtn">← Previous</button>
+                <span id="pageInfo">Page 1</span>
+                <button onclick="nextPage()" id="nextBtn">Next →</button>
+            </div>
+        </div>
+        <div class="entries-list" id="entriesList">
+            <div class="loading">Click "Load Entries" to start exploring</div>
+        </div>
+        <div class="visualization" id="visualization">
+            <div class="loading">Select an entry to visualize its emotional flow</div>
+        </div>
+    </div>
+    <script>
+        let currentOffset = 0;
+        let currentLimit = 50;
+        let totalEntries = 0;
+        let selectedEntryIndex = null;
+        let entries = [];
+        let emotionColors = {};
+        let availableEmotions = new Set();
+        // Color palette for emotions
+        const emotionPalette = [
+            '#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8',
+            '#F7DC6F', '#BB8FCE', '#85C1E2', '#F8B739', '#52B788',
+            '#E63946', '#A8DADC', '#457B9D', '#1D3557', '#F4A261',
+            '#2A9D8F', '#E9C46A', '#F4A261', '#E76F51', '#264653'
+        ];
+        function getColorForEmotion(emotion) {
+            if (!emotionColors[emotion]) {
+                const index = Object.keys(emotionColors).length % emotionPalette.length;
+                emotionColors[emotion] = emotionPalette[index];
+            }
+            return emotionColors[emotion];
+        }
+        async function loadStats() {
+            try {
+                const response = await fetch('/api/stats');
+                const stats = await response.json();
+                document.getElementById('totalEntries').textContent = stats.total_entries;
+                document.getElementById('withText').textContent = stats.entries_with_text;
+                document.getElementById('withEmotions').textContent = stats.entries_with_emotions;
+                // Update emotion filter dropdown
+                const filterSelect = document.getElementById('emotionFilter');
+                filterSelect.innerHTML = '<option value="">All Emotions</option>';
+                for (const [emotion, count] of Object.entries(stats.emotion_distribution)) {
+                    availableEmotions.add(emotion);
+                    const option = document.createElement('option');
+                    option.value = emotion;
+                    option.textContent = `${emotion} (${count})`;
+                    filterSelect.appendChild(option);
+                }
+            } catch (error) {
+                console.error('Error loading stats:', error);
+            }
+        }
+        async function loadEntries() {
+            const limit = parseInt(document.getElementById('limitInput').value) || 50;
+            currentLimit = limit;
+            try {
+                const response = await fetch(`/api/dataset?limit=${limit}&offset=${currentOffset}`);
+                const data = await response.json();
+                entries = data.entries;
+                totalEntries = data.total;
+                displayEntries(entries);
+                updatePagination();
+            } catch (error) {
+                console.error('Error loading entries:', error);
+                document.getElementById('entriesList').innerHTML =
+                    '<div class="error">Failed to load entries. Please try again.</div>';
+            }
+        }
+        function displayEntries(entriesToDisplay) {
+            const container = document.getElementById('entriesList');
+            if (entriesToDisplay.length === 0) {
+                container.innerHTML = '<div class="loading">No entries found</div>';
+                return;
+            }
+            container.innerHTML = entriesToDisplay.map((entry, idx) => {
+                const globalIdx = currentOffset + idx;
+                const preview = entry.text ? entry.text.substring(0, 100) : '(empty)';
+                const hasEmotions = entry.emotional_flow && entry.emotional_flow.length > 0;
+                return `
+                    <div class="entry-item ${selectedEntryIndex === globalIdx ? 'active' : ''}"
+                         onclick="selectEntry(${globalIdx})">
+                        <div class="entry-preview">${preview}${entry.text && entry.text.length > 100 ? '...' : ''}</div>
+                        ${hasEmotions ? `<small>${entry.emotional_flow.length} emotion(s)</small>` : ''}
+                    </div>
+                `;
+            }).join('');
+        }
+        function selectEntry(index) {
+            selectedEntryIndex = index;
+            const entry = entries[index - currentOffset];
+            if (!entry) return;
+            // Update active state in list
+            document.querySelectorAll('.entry-item').forEach((item, idx) => {
+                item.classList.toggle('active', currentOffset + idx === index);
+            });
+            visualizeEntry(entry);
+        }
+        function visualizeEntry(entry) {
+            const container = document.getElementById('visualization');
+            if (!entry.text) {
+                container.innerHTML = '<div class="loading">This entry has no text</div>';
+                return;
+            }
+            // Split text into words
+            const words = entry.text.split(/\\s+/);
+            // Build word display with emotion coloring
+            let wordHTML = '';
+            const emotionData = {};
+            if (entry.emotional_flow && entry.emotional_flow.length > 0) {
+                // Collect all emotion data by word index
+                entry.emotional_flow.forEach(flow => {
+                    const color = getColorForEmotion(flow.label);
+                    flow.curves.forEach(curve => {
+                        for (let i = curve.start_word; i <= curve.end_word; i++) {
+                            if (!emotionData[i]) {
+                                emotionData[i] = [];
+                            }
+                            emotionData[i].push({
+                                label: flow.label,
+                                intensity: curve.peak_intensity,
+                                color: color
+                            });
+                        }
+                    });
+                });
+            }
+            // Create word spans with styling
+            wordHTML = words.map((word, idx) => {
+                const emotions = emotionData[idx];
+                let style = '';
+                let title = word;
+                if (emotions && emotions.length > 0) {
+                    // Use the strongest emotion for this word
+                    const strongest = emotions.reduce((max, e) =>
+                        e.intensity > max.intensity ? e : max, emotions[0]);
+                    const opacity = 0.3 + (strongest.intensity * 0.7);
+                    style = `background-color: ${strongest.color}${Math.round(opacity * 255).toString(16).padStart(2, '0')};
+                             border: 2px solid ${strongest.color};`;
+                    title = `${word}\\n${emotions.map(e => `${e.label}: ${(e.intensity * 100).toFixed(1)}%`).join('\\n')}`;
+                }
+                return `<span class="word" style="${style}" title="${title}">${word}</span>`;
+            }).join(' ');
+            // Create charts for each emotion
+            let chartsHTML = '';
+            if (entry.emotional_flow && entry.emotional_flow.length > 0) {
+                chartsHTML = '<div class="emotion-chart">';
+                entry.emotional_flow.forEach((flow, flowIdx) => {
+                    const color = getColorForEmotion(flow.label);
+                    chartsHTML += `
+                        <h3 style="color: ${color}; margin-bottom: 10px;">${flow.label}</h3>
+                        <div class="chart-container">
+                            <canvas id="chart-${flowIdx}"></canvas>
+                        </div>
+                    `;
+                });
+                chartsHTML += '</div>';
+                // Add legend
+                chartsHTML += '<div class="emotion-legend">';
+                entry.emotional_flow.forEach(flow => {
+                    const color = getColorForEmotion(flow.label);
+                    chartsHTML += `
+                        <div class="legend-item">
+                            <div class="legend-color" style="background-color: ${color}"></div>
+                            <span>${flow.label}</span>
+                        </div>
+                    `;
+                });
+                chartsHTML += '</div>';
+            }
+            container.innerHTML = `
+                <div class="fade-in">
+                    <h2 style="margin-bottom: 20px; color: #667eea;">Text Analysis</h2>
+                    <div class="text-display">${wordHTML}</div>
+                    ${chartsHTML}
+                </div>
+            `;
+            // Draw charts after DOM is updated
+            if (entry.emotional_flow && entry.emotional_flow.length > 0) {
+                setTimeout(() => {
+                    entry.emotional_flow.forEach((flow, flowIdx) => {
+                        drawChart(`chart-${flowIdx}`, flow);
+                    });
+                }, 100);
+            }
+        }
+        function drawChart(canvasId, flow) {
+            const canvas = document.getElementById(canvasId);
+            if (!canvas) return;
+            const ctx = canvas.getContext('2d');
+            const rect = canvas.parentElement.getBoundingClientRect();
+            canvas.width = rect.width;
+            canvas.height = rect.height;
+            const color = getColorForEmotion(flow.label);
+            const curves = flow.curves;
+            if (curves.length === 0) return;
+            // Find max word index
+            const maxWord = Math.max(...curves.map(c => c.end_word));
+            const padding = 40;
+            const chartWidth = canvas.width - padding * 2;
+            const chartHeight = canvas.height - padding * 2;
+            // Clear canvas
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            // Draw axes
+            ctx.strokeStyle = '#ddd';
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            ctx.moveTo(padding, padding);
+            ctx.lineTo(padding, canvas.height - padding);
+            ctx.lineTo(canvas.width - padding, canvas.height - padding);
+            ctx.stroke();
+            // Draw grid lines
+            ctx.strokeStyle = '#eee';
+            for (let i = 0; i <= 4; i++) {
+                const y = padding + (chartHeight * i / 4);
+                ctx.beginPath();
+                ctx.moveTo(padding, y);
+                ctx.lineTo(canvas.width - padding, y);
+                ctx.stroke();
+                // Y-axis labels
+                ctx.fillStyle = '#666';
+                ctx.font = '12px Arial';
+                ctx.textAlign = 'right';
+                ctx.fillText((1 - i/4).toFixed(1), padding - 10, y + 4);
+            }
+            // Draw intensity curve
+            ctx.strokeStyle = color;
+            ctx.lineWidth = 3;
+            ctx.beginPath();
+            curves.forEach((curve, idx) => {
+                const x = padding + (curve.start_word / maxWord) * chartWidth;
+                const y = padding + chartHeight - (curve.peak_intensity * chartHeight);
+                if (idx === 0) {
+                    ctx.moveTo(x, y);
+                } else {
+                    ctx.lineTo(x, y);
+                }
+            });
+            ctx.stroke();
+            // Draw points
+            curves.forEach(curve => {
+                const x = padding + (curve.start_word / maxWord) * chartWidth;
+                const y = padding + chartHeight - (curve.peak_intensity * chartHeight);
+                ctx.fillStyle = color;
+                ctx.beginPath();
+                ctx.arc(x, y, 5, 0, Math.PI * 2);
+                ctx.fill();
+                // Add word index label
+                ctx.fillStyle = '#666';
+                ctx.font = '10px Arial';
+                ctx.textAlign = 'center';
+                ctx.fillText(curve.start_word, x, canvas.height - padding + 15);
+            });
+            // X-axis label
+            ctx.fillStyle = '#666';
+            ctx.font = '12px Arial';
+            ctx.textAlign = 'center';
+            ctx.fillText('Word Index', canvas.width / 2, canvas.height - 10);
+            // Y-axis label
+            ctx.save();
+            ctx.translate(15, canvas.height / 2);
+            ctx.rotate(-Math.PI / 2);
+            ctx.fillText('Intensity', 0, 0);
+            ctx.restore();
+        }
+        function filterByEmotion() {
+            const filter = document.getElementById('emotionFilter').value;
+            currentOffset = 0;
+            if (!filter) {
+                loadEntries();
+                return;
+            }
+            // Client-side filtering for now
+            const filtered = entries.filter(entry =>
+                entry.emotional_flow &&
+                entry.emotional_flow.some(flow => flow.label === filter)
+            );
+            displayEntries(filtered);
+            document.getElementById('pageInfo').textContent = 'Filtered View';
+        }
+        function updatePagination() {
+            const currentPage = Math.floor(currentOffset / currentLimit) + 1;
+            const totalPages = Math.ceil(totalEntries / currentLimit);
+            document.getElementById('pageInfo').textContent =
+                `Page ${currentPage} of ${totalPages}`;
+            document.getElementById('prevBtn').disabled = currentOffset === 0;
+            document.getElementById('nextBtn').disabled = currentOffset + currentLimit >= totalEntries;
+        }
+        function previousPage() {
+            if (currentOffset > 0) {
+                currentOffset -= currentLimit;
+                loadEntries();
+            }
+        }
+        function nextPage() {
+            if (currentOffset + currentLimit < totalEntries) {
+                currentOffset += currentLimit;
+                loadEntries();
+            }
+        }
+        // Load stats on page load
+        window.addEventListener('load', () => {
+            loadStats();
+        });
+        // Handle window resize for charts
+        window.addEventListener('resize', () => {
+            if (selectedEntryIndex !== null) {
+                const entry = entries[selectedEntryIndex - currentOffset];
+                if (entry) {
+                    visualizeEntry(entry);
+                }
+            }
+        });
+    </script>
+</body>
+</html>