gradia 1.0.0__py3-none-any.whl → 2.0.0__py3-none-any.whl

gradia/viz/static/js/timeline.js

@@ -0,0 +1,471 @@
+// timeline.js - Learning Timeline v2.0
+
+const timelineState = {
+    summaries: [],
+    insights: null,
+    currentSample: null,
+    charts: {},
+    pollInterval: null,
+    lastSummaryCount: 0
+};
+
+// ============================================================================
+// Initialization
+// ============================================================================
+
+async function initTimeline() {
+    initStabilityChart();
+    startPolling();
+    await fetchInitialData();
+}
+
+function startPolling() {
+    timelineState.pollInterval = setInterval(async () => {
+        await fetchSummaries();
+        await fetchInsights();
+    }, 1000);
+}
+
+async function fetchInitialData() {
+    await fetchSummaries();
+    await fetchInsights();
+}
+
+// ============================================================================
+// Data Fetching
+// ============================================================================
+
+async function fetchSummaries() {
+    try {
+        const res = await fetch('/api/timeline/summaries');
+        if (!res.ok) return;
+        
+        const summaries = await res.json();
+        
+        if (summaries.length > timelineState.lastSummaryCount) {
+            timelineState.summaries = summaries;
+            timelineState.lastSummaryCount = summaries.length;
+            updateTimelineOverview();
+            updateTrainingContext();
+        }
+    } catch (e) {
+        console.error('Failed to fetch summaries:', e);
+    }
+}
+
+async function fetchInsights() {
+    try {
+        const res = await fetch('/api/timeline/insights');
+        if (!res.ok) return;
+        
+        const insights = await res.json();
+        timelineState.insights = insights;
+        
+        updateInstabilityPanel();
+        updateStabilityChart();
+    } catch (e) {
+        console.error('Failed to fetch insights:', e);
+    }
+}
+
+async function fetchSampleTimeline(sampleId) {
+    try {
+        const res = await fetch(`/api/timeline/sample/${sampleId}`);
+        if (!res.ok) return null;
+        return await res.json();
+    } catch (e) {
+        console.error('Failed to fetch sample timeline:', e);
+        return null;
+    }
+}
+
+// ============================================================================
+// Timeline Overview (Block A)
+// ============================================================================
+
+function updateTimelineOverview() {
+    const container = document.getElementById('timeline-overview');
+    const insights = timelineState.insights;
+    const summaries = timelineState.summaries;
+    
+    if (!insights || !summaries.length) {
+        container.innerHTML = '<div class="timeline-loading"><span>Waiting for training data...</span></div>';
+        return;
+    }
+    
+    const trackedSamples = insights.tracked_samples || [];
+    const maxEpoch = Math.max(...summaries.map(s => s.epoch), 1);
+    
+    // Build sample stability map from insights
+    const stabilityMap = {};
+    
+    // Process all stability data from insights
+    for (const item of insights.top_flipping || []) {
+        stabilityMap[item.sample_id] = item.stability_class;
+    }
+    for (const item of insights.late_learners || []) {
+        stabilityMap[item.sample_id] = 'late_learner';
+    }
+    for (const item of insights.never_correct || []) {
+        stabilityMap[item.sample_id] = 'stable_wrong';
+    }
+    
+    // Build HTML
+    let html = '';
+    
+    // Epoch axis
+    html += '<div class="epoch-axis">';
+    for (let e = 1; e <= maxEpoch; e++) {
+        html += `<span class="epoch-label">${e}</span>`;
+    }
+    html += '</div>';
+    
+    html += '<div class="timeline-grid">';
+    
+    // Limit to first 50 samples for performance
+    const displaySamples = trackedSamples.slice(0, 50);
+    
+    for (const sampleId of displaySamples) {
+        const stability = stabilityMap[sampleId] || 'unknown';
+        
+        html += `<div class="timeline-row">`;
+        html += `<span class="timeline-sample-id" onclick="openSampleInspector(${sampleId})">#${sampleId}</span>`;
+        html += `<div class="timeline-epochs">`;
+        
+        // Create epoch cells (simplified - full implementation would fetch per-sample events)
+        for (let e = 1; e <= maxEpoch; e++) {
+            const cellClass = getStabilityCellClass(stability, e, maxEpoch);
+            html += `<div class="epoch-cell ${cellClass}" 
+                         onclick="openSampleInspector(${sampleId})"
+                         title="Sample ${sampleId}, Epoch ${e}"></div>`;
+        }
+        
+        html += '</div></div>';
+    }
+    
+    html += '</div>';
+    
+    if (trackedSamples.length > 50) {
+        html += `<div style="text-align: center; padding: 10px; color: var(--text-secondary); font-size: 0.8rem;">
+            Showing 50 of ${trackedSamples.length} tracked samples
+        </div>`;
+    }
+    
+    container.innerHTML = html;
+}
+
+function getStabilityCellClass(stability, epoch, maxEpoch) {
+    // Simplified visualization based on stability class
+    switch (stability) {
+        case 'stable_correct':
+            return 'correct';
+        case 'stable_wrong':
+            return 'wrong';
+        case 'unstable':
+            // Alternate for visual effect
+            return epoch % 2 === 0 ? 'correct' : 'wrong';
+        case 'late_learner':
+            // Show transition
+            const transitionPoint = Math.floor(maxEpoch * 0.6);
+            return epoch >= transitionPoint ? 'correct' : 'wrong';
+        default:
+            return '';
+    }
+}
+
+// ============================================================================
+// Training Context (Block D)
+// ============================================================================
+
+function updateTrainingContext() {
+    const summaries = timelineState.summaries;
+    const insights = timelineState.insights;
+    
+    if (summaries.length > 0) {
+        const latest = summaries[summaries.length - 1];
+        document.getElementById('current-epoch').textContent = latest.epoch;
+        document.getElementById('training-status').textContent = 'Training';
+        document.getElementById('training-status').style.color = 'var(--accent)';
+    }
+    
+    if (insights) {
+        document.getElementById('tracked-count').textContent = insights.total_tracked || 0;
+    }
+}
+
+// ============================================================================
+// Instability Panel (Block C)
+// ============================================================================
+
+function updateInstabilityPanel() {
+    const insights = timelineState.insights;
+    if (!insights) return;
+    
+    // Top Flipping
+    const flippingList = document.getElementById('flipping-list');
+    if (insights.top_flipping && insights.top_flipping.length > 0) {
+        flippingList.innerHTML = insights.top_flipping.slice(0, 5).map(item => `
+            <div class="sample-item" onclick="openSampleInspector(${item.sample_id})">
+                <span class="sample-id">#${item.sample_id}</span>
+                <span class="sample-meta">Label: ${item.true_label}</span>
+                <span class="flip-badge">${item.flip_count} flips</span>
+            </div>
+        `).join('');
+    } else {
+        flippingList.innerHTML = '<span class="empty-state">No flipping samples detected</span>';
+    }
+    
+    // Late Learners
+    const lateList = document.getElementById('late-learners-list');
+    if (insights.late_learners && insights.late_learners.length > 0) {
+        lateList.innerHTML = insights.late_learners.slice(0, 5).map(item => `
+            <div class="sample-item" onclick="openSampleInspector(${item.sample_id})">
+                <span class="sample-id">#${item.sample_id}</span>
+                <span class="sample-meta">First correct: Epoch ${item.first_correct_epoch}</span>
+            </div>
+        `).join('');
+    } else {
+        lateList.innerHTML = '<span class="empty-state">No late learners detected</span>';
+    }
+    
+    // Never Correct
+    const neverList = document.getElementById('never-correct-list');
+    if (insights.never_correct && insights.never_correct.length > 0) {
+        neverList.innerHTML = insights.never_correct.slice(0, 5).map(item => `
+            <div class="sample-item" onclick="openSampleInspector(${item.sample_id})">
+                <span class="sample-id">#${item.sample_id}</span>
+                <span class="sample-meta">True: ${item.true_label} → Pred: ${item.current_prediction}</span>
+            </div>
+        `).join('');
+    } else {
+        neverList.innerHTML = '<span class="empty-state">All samples correct at least once</span>';
+    }
+}
+
+// ============================================================================
+// Stability Chart
+// ============================================================================
+
+function initStabilityChart() {
+    const ctx = document.getElementById('stabilityChart').getContext('2d');
+    
+    timelineState.charts.stability = new Chart(ctx, {
+        type: 'doughnut',
+        data: {
+            labels: ['Stable Correct', 'Stable Wrong', 'Unstable', 'Late Learner'],
+            datasets: [{
+                data: [0, 0, 0, 0],
+                backgroundColor: ['#238636', '#da3633', '#d29922', '#58a6ff'],
+                borderColor: '#0d1117',
+                borderWidth: 2
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    position: 'bottom',
+                    labels: { color: '#8b949e', padding: 15 }
+                }
+            }
+        }
+    });
+}
+
+function updateStabilityChart() {
+    const insights = timelineState.insights;
+    if (!insights || !insights.stability_distribution) return;
+    
+    const dist = insights.stability_distribution;
+    const chart = timelineState.charts.stability;
+    
+    chart.data.datasets[0].data = [
+        dist.stable_correct || 0,
+        dist.stable_wrong || 0,
+        dist.unstable || 0,
+        dist.late_learner || 0
+    ];
+    chart.update();
+}
+
+// ============================================================================
+// Sample Inspector (Block B)
+// ============================================================================
+
+async function openSampleInspector(sampleId) {
+    const modal = document.getElementById('sample-inspector-modal');
+    modal.style.display = 'flex';
+    
+    // Fetch sample data
+    const data = await fetchSampleTimeline(sampleId);
+    if (!data) {
+        alert('Could not load sample data');
+        closeSampleInspector();
+        return;
+    }
+    
+    timelineState.currentSample = data;
+    
+    // Update header stats
+    document.getElementById('inspector-sample-id').textContent = `#${data.sample_id}`;
+    document.getElementById('inspector-true-label').textContent = data.true_label || '-';
+    document.getElementById('inspector-flip-count').textContent = data.flip_count || 0;
+    document.getElementById('inspector-stability').textContent = formatStability(data.stability_class);
+    
+    // Update charts
+    updateInspectorCharts(data);
+    
+    // Update event history
+    updateEventHistory(data.events || []);
+}
+
+function closeSampleInspector() {
+    document.getElementById('sample-inspector-modal').style.display = 'none';
+    timelineState.currentSample = null;
+}
+
+function formatStability(stability) {
+    const map = {
+        'stable_correct': '✓ Stable',
+        'stable_wrong': '✗ Persistent Error',
+        'unstable': '⚡ Unstable',
+        'late_learner': '🕐 Late Learner',
+        'unknown': '?'
+    };
+    return map[stability] || stability;
+}
+
+function updateInspectorCharts(data) {
+    const events = data.events || [];
+    if (!events.length) return;
+    
+    const epochs = events.map(e => e.epoch);
+    const confidences = events.map(e => e.confidence);
+    const predictions = events.map(e => e.predicted_label);
+    const correctness = events.map(e => e.correct ? 1 : 0);
+    
+    // Prediction trajectory chart
+    const predCtx = document.getElementById('predictionChart').getContext('2d');
+    if (timelineState.charts.prediction) {
+        timelineState.charts.prediction.destroy();
+    }
+    
+    timelineState.charts.prediction = new Chart(predCtx, {
+        type: 'line',
+        data: {
+            labels: epochs,
+            datasets: [{
+                label: 'Correct',
+                data: correctness,
+                borderColor: '#238636',
+                backgroundColor: 'rgba(35, 134, 54, 0.1)',
+                fill: true,
+                tension: 0.3,
+                stepped: true
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            scales: {
+                y: { 
+                    min: 0, 
+                    max: 1,
+                    ticks: { 
+                        callback: v => v === 1 ? 'Correct' : 'Wrong',
+                        color: '#8b949e'
+                    },
+                    grid: { color: '#30363d' }
+                },
+                x: { 
+                    title: { display: true, text: 'Epoch', color: '#8b949e' },
+                    grid: { color: '#30363d' }
+                }
+            },
+            plugins: { legend: { display: false } }
+        }
+    });
+    
+    // Confidence chart
+    const confCtx = document.getElementById('confidenceChart').getContext('2d');
+    if (timelineState.charts.confidence) {
+        timelineState.charts.confidence.destroy();
+    }
+    
+    timelineState.charts.confidence = new Chart(confCtx, {
+        type: 'line',
+        data: {
+            labels: epochs,
+            datasets: [{
+                label: 'Confidence',
+                data: confidences,
+                borderColor: '#58a6ff',
+                backgroundColor: 'rgba(88, 166, 255, 0.1)',
+                fill: true,
+                tension: 0.3
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            scales: {
+                y: { 
+                    min: 0, 
+                    max: 1,
+                    grid: { color: '#30363d' },
+                    ticks: { color: '#8b949e' }
+                },
+                x: { 
+                    title: { display: true, text: 'Epoch', color: '#8b949e' },
+                    grid: { color: '#30363d' }
+                }
+            },
+            plugins: { legend: { display: false } }
+        }
+    });
+}
+
+function updateEventHistory(events) {
+    const container = document.getElementById('event-history-list');
+    
+    if (!events.length) {
+        container.innerHTML = '<span class="empty-state">No events recorded</span>';
+        return;
+    }
+    
+    // Detect flips
+    const flips = new Set();
+    for (let i = 1; i < events.length; i++) {
+        if (events[i].predicted_label !== events[i-1].predicted_label) {
+            flips.add(i);
+        }
+    }
+    
+    container.innerHTML = events.map((e, idx) => `
+        <div class="event-item ${e.correct ? 'correct' : 'wrong'}">
+            <span class="epoch-badge">Epoch ${e.epoch}</span>
+            <span>True: ${e.true_label}</span>
+            <span>Pred: ${e.predicted_label}</span>
+            <span>Conf: ${(e.confidence * 100).toFixed(1)}%</span>
+            <span>${flips.has(idx) ? '<span class="flip-marker">⚡ FLIP</span>' : ''}</span>
+        </div>
+    `).join('');
+}
+
+// Close modal on backdrop click
+document.getElementById('sample-inspector-modal')?.addEventListener('click', function(e) {
+    if (e.target === this) {
+        closeSampleInspector();
+    }
+});
+
+// Keyboard handler
+document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape') {
+        closeSampleInspector();
+    }
+});
+
+// Initialize on load
+document.addEventListener('DOMContentLoaded', initTimeline);

gradia/viz/templates/configure.html

@@ -30,7 +30,7 @@
             <div style="flex-grow:1"></div>
 
             <div class="sidebar-section" style="font-size: 0.75rem; color: #565869;">
-                v1.3.0
+                v2.0.0
             </div>
         </aside>
 

gradia/viz/templates/index.html

@@ -29,6 +29,10 @@
 
             <div class="sidebar-label">Actions</div>
             <div style="display: flex; flex-direction: column; gap: 10px;">
+                <button class="btn-primary" onclick="window.location.href='/timeline'"
+                    style="background:rgba(88, 166, 255, 0.1); border:1px solid var(--accent); color:var(--accent); font-size: 0.8rem; padding: 10px;">🔬
+                    Learning Timeline</button>
+
                 <button class="btn-primary" onclick="window.location.href='/configure'"
                     style="background:var(--bg-card); border:1px solid var(--border); font-size: 0.8rem; padding: 10px;">New
                     Experiment</button>
@@ -49,7 +53,7 @@
             <div style="flex-grow:1"></div>
 
             <div class="sidebar-section" style="font-size: 0.75rem; color: #565869;">
-                v1.3.0
+                v2.0.0
             </div>
         </aside>
 
@@ -117,24 +121,22 @@
                 </div>
                 <div class="social-links">
                     <!-- Instagram -->
-                    <a href="https://instagram.com" target="_blank" title="Instagram">
+                    <a href="https://instagram.com/stifler.xd" target="_blank" title="Instagram @stifler.xd">
                         <svg class="social-icon" viewBox="0 0 24 24">
                             <path
                                 d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
                         </svg>
                     </a>
-                    <!-- HF (Placeholder Circle) -->
-                    <a href="https://huggingface.co" target="_blank" title="Hugging Face">
+                    <!-- Hugging Face -->
+                    <a href="https://huggingface.co/STiFLeR7" target="_blank" title="Hugging Face @STiFLeR7">
                         <svg class="social-icon" viewBox="0 0 24 24">
-                            <path
-                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" />
+                            <path d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.114 2.504.336 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.163 22 16.418 22 12c0-5.523-4.477-10-10-10z"/>
                         </svg>
                     </a>
                     <!-- PyPI -->
-                    <a href="https://pypi.org" target="_blank" title="PyPI">
+                    <a href="https://pypi.org/user/stifler.xd/" target="_blank" title="PyPI @stifler.xd">
                         <svg class="social-icon" viewBox="0 0 24 24">
-                            <path
-                                d="M12.8 1.6C12.8 1.05 12.35 0.6 11.8 0.6H3.2C2.65 0.6 2.2 1.05 2.2 1.6V10.2C2.2 10.75 2.65 11.2 3.2 11.2H4.8V12.8H3.2C2.1 12.8 1.2 13.7 1.2 14.8V21.8C1.2 22.9 2.1 23.8 3.2 23.8H10.2C11.3 23.8 12.2 22.9 12.2 21.8V20.2H12.8C13.9 20.2 14.8 19.3 14.8 18.2V11.2H11.2V10.2H11.8C12.35 10.2 12.8 9.75 12.8 9.2V1.6ZM10.2 21.8H3.2V14.8H10.2V21.8ZM20.8 11.2H13.8V18.2H14.8V19.2C14.8 19.75 15.25 20.2 15.8 20.2H21.2C22.3 20.2 23.2 19.3 23.2 18.2V11.2C23.2 10.1 22.3 9.2 21.2 9.2H20.8V11.2ZM19.2 16.2H16.2V13.2H19.2V16.2Z" />
+                            <path d="M12.042 0L4.018 3.531v5.969l3.16-1.339V4.719l4.864-2.063 4.864 2.063v3.442l3.16 1.339V3.531L12.042 0zm7.976 7.406l-7.976 3.375-7.976-3.375v8.813l7.976 3.375 7.976-3.375V7.406zM4.018 17.906v3.563L12.042 25l8.024-3.531v-3.563l-8.024 3.375-8.024-3.375z"/>
                         </svg>
                     </a>
                 </div>