Spaces:

wop
/

Data

Running

App Files Files Community

wop commited on 23 days ago

Commit

138290d

verified ·

1 Parent(s): 23c13d4

Update index.html

Browse files

Files changed (1) hide show

index.html +1536 -1005

index.html CHANGED Viewed

@@ -1,1059 +1,1590 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Self-Distillation</title>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        :root {
-            --bg-primary: #0a0a0f;
-            --bg-secondary: #12121a;
-            --bg-tertiary: #1a1a25;
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent: #6366f1;
-            --border: #2a2a3a;
-        }
-        body {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            height: 100vh;
-            overflow: hidden;
-        }
-        .container {
-            display: flex;
-            flex-direction: column;
-            height: 100vh;
-            padding: 20px;
-        }
-        /* Header */
-        .header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 20px;
-            padding: 15px;
-            background: var(--bg-secondary);
-            border-radius: 12px;
-            border: 1px solid var(--border);
-        }
-        .header h1 {
-            font-size: 1.5rem;
-            font-weight: 600;
-            background: linear-gradient(135deg, #6366f1, #8b5cf6);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
-        .header-controls {
-            display: flex;
-            gap: 10px;
-        }
-        .btn {
-            padding: 8px 16px;
-            border: none;
-            border-radius: 6px;
-            cursor: pointer;
-            font-size: 0.9rem;
-            transition: all 0.2s;
-        }
-        .btn-primary {
-            background: var(--accent);
-            color: white;
-        }
-        .btn-primary:hover {
-            background: #5558e3;
-            transform: translateY(-1px);
-        }
-        .btn-secondary {
-            background: var(--bg-tertiary);
-            color: var(--text-primary);
-            border: 1px solid var(--border);
-        }
-        .btn-secondary:hover {
-            background: #252535;
-        }
-        /* Editor Section */
-        .editor-section {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            margin-bottom: 20px;
-            position: relative;
-        }
-        .editor-container {
-            flex: 1;
-            position: relative;
-            border-radius: 12px;
-            overflow: hidden;
-            transition: all 0.3s ease;
-        }
-        .editor-glow {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            border-radius: 12px;
-            pointer-events: none;
-            opacity: 0;
-            transition: opacity 0.3s;
-            z-index: 1;
-        }
-        #editor {
-            width: 100%;
-            height: 100%;
-            background: var(--bg-secondary);
-            color: var(--text-primary);
-            border: 1px solid var(--border);
-            border-radius: 12px;
-            padding: 20px;
-            font-size: 1.1rem;
-            line-height: 1.6;
-            resize: none;
-            outline: none;
-            position: relative;
-            z-index: 2;
-        }
-        #editor:focus {
-            border-color: var(--accent);
-        }
-        /* Timeline Section */
-        .timeline-section {
-            background: var(--bg-secondary);
-            border-radius: 12px;
-            border: 1px solid var(--border);
-            padding: 20px;
-            min-height: 300px;
-        }
-        .timeline-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 15px;
-        }
-        .timeline-title {
-            font-size: 1.1rem;
-            font-weight: 600;
-        }
-        .emotion-input-container {
-            display: flex;
-            gap: 10px;
-            align-items: center;
-        }
-        #emotionInput {
-            padding: 8px 12px;
-            background: var(--bg-tertiary);
-            border: 1px solid var(--border);
-            border-radius: 6px;
-            color: var(--text-primary);
-            font-size: 0.9rem;
-            width: 200px;
-        }
-        #emotionInput::placeholder {
-            color: var(--text-secondary);
-        }
-        /* Timeline Canvas */
-        .timeline-canvas-container {
-            position: relative;
-            background: var(--bg-tertiary);
-            border-radius: 8px;
-            overflow: hidden;
-            cursor: crosshair;
-        }
-        #timelineCanvas {
-            display: block;
-            width: 100%;
-        }
-        /* Instructions */
-        .instructions {
-            margin-top: 15px;
-            padding: 12px;
-            background: var(--bg-tertiary);
-            border-radius: 6px;
-            font-size: 0.85rem;
-            color: var(--text-secondary);
-            line-height: 1.5;
-        }
-        .instructions strong {
-            color: var(--text-primary);
-        }
-        /* Modal */
-        .modal {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(0, 0, 0, 0.8);
-            z-index: 1000;
-            justify-content: center;
-            align-items: center;
-        }
-        .modal.active {
-            display: flex;
-        }
-        .modal-content {
-            background: var(--bg-secondary);
-            border-radius: 12px;
-            padding: 30px;
-            max-width: 500px;
-            width: 90%;
-            border: 1px solid var(--border);
-        }
-        .modal-content h2 {
-            margin-bottom: 20px;
-            font-size: 1.3rem;
-        }
-        .form-group {
-            margin-bottom: 15px;
-        }
-        .form-group label {
-            display: block;
-            margin-bottom: 5px;
-            font-size: 0.9rem;
-            color: var(--text-secondary);
-        }
-        .form-group input {
-            width: 100%;
-            padding: 10px;
-            background: var(--bg-tertiary);
-            border: 1px solid var(--border);
-            border-radius: 6px;
-            color: var(--text-primary);
-            font-size: 0.9rem;
-        }
-        .modal-actions {
-            display: flex;
-            gap: 10px;
-            justify-content: flex-end;
-            margin-top: 20px;
-        }
-        /* Status */
-        .status-bar {
-            margin-top: 10px;
-            padding: 10px;
-            background: var(--bg-tertiary);
-            border-radius: 6px;
-            font-size: 0.85rem;
-            color: var(--text-secondary);
-            display: none;
-        }
-        .status-bar.active {
-            display: block;
-        }
-        .status-bar.success {
-            border-left: 3px solid #10b981;
-        }
-        .status-bar.error {
-            border-left: 3px solid #ef4444;
-        }
-    </style>
 </head>
 <body>
-    <div class="container">
-        <!-- Header -->
-        <div class="header">
-            <h1>Self-Distillation</h1>
-            <div class="header-controls">
-                <button class="btn btn-secondary" onclick="exportJSON()">Export JSON</button>
-                <button class="btn btn-secondary" onclick="showHFModal()">Push to HF</button>
-            </div>
-        </div>
-        <!-- Editor Section -->
-        <div class="editor-section">
-            <div class="editor-container">
-                <div class="editor-glow" id="editorGlow"></div>
-                <textarea id="editor" placeholder="Write your thoughts here..."></textarea>
-            </div>
         </div>
-        <!-- Timeline Section -->
-        <div class="timeline-section">
-            <div class="timeline-header">
-                <div class="timeline-title">Emotional Timeline</div>
-                <div class="emotion-input-container">
-                    <input type="text" id="emotionInput" placeholder="Enter emotion (e.g., Joy, Anxiety)">
-                    <button class="btn btn-primary" onclick="addEmotionTrack()">Add Track</button>
-                </div>
-            </div>
-            <div class="timeline-canvas-container">
-                <canvas id="timelineCanvas"></canvas>
-            </div>
-            <div class="instructions">
-                <strong>Controls:</strong> Click on timeline to add point • Drag vertically for intensity (0-1) •
-                Drag horizontally for timing • Drag handles for fades/bumps • Move cursor in text to see active emotions
-            </div>
-            <div class="status-bar" id="statusBar"></div>
         </div>
     </div>
-    <!-- HuggingFace Modal -->
-    <div class="modal" id="hfModal">
-        <div class="modal-content">
-            <h2>Push to HuggingFace</h2>
-            <div class="form-group">
-                <label>HF Token</label>
-                <input type="password" id="hfToken" placeholder="hf_...">
-            </div>
-            <div class="form-group">
-                <label>Repository ID</label>
-                <input type="text" id="hfRepoId" placeholder="username/repo-name">
-            </div>
-            <div class="modal-actions">
-                <button class="btn btn-secondary" onclick="closeHFModal()">Cancel</button>
-                <button class="btn btn-primary" onclick="pushToHF()">Push Dataset</button>
-            </div>
         </div>
     </div>
-    <script>
-        // State Management
-        const state = {
-            text: '',
-            emotions: [],
-            tracks: [],
-            selectedPoint: null,
-            dragging: false,
-            dragType: null,
-            dragStart: { x: 0, y: 0 },
-            cursorPosition: 0
         };
-        // DOM Elements
-        const editor = document.getElementById('editor');
-        const canvas = document.getElementById('timelineCanvas');
-        const ctx = canvas.getContext('2d');
-        const emotionInput = document.getElementById('emotionInput');
-        const editorGlow = document.getElementById('editorGlow');
-        const statusBar = document.getElementById('statusBar');
-        // Color palette for emotions
-        const colorPalette = [
-            '#6366f1', '#8b5cf6', '#ec4899', '#f43f5e',
-            '#f97316', '#eab308', '#22c55e', '#06b6d4',
-            '#3b82f6', '#a855f7'
-        ];
-        let colorIndex = 0;
-        // Initialize
-        function init() {
-            loadFromLocalStorage();
-            setupEventListeners();
-            resizeCanvas();
-            render();
-        }
-        // Event Listeners
-        function setupEventListeners() {
-            editor.addEventListener('input', handleTextChange);
-            editor.addEventListener('click', handleEditorClick);
-            editor.addEventListener('keyup', handleEditorClick);
-            canvas.addEventListener('mousedown', handleCanvasMouseDown);
-            canvas.addEventListener('mousemove', handleCanvasMouseMove);
-            canvas.addEventListener('mouseup', handleCanvasMouseUp);
-            canvas.addEventListener('mouseleave', handleCanvasMouseUp);
-            window.addEventListener('resize', () => {
-                resizeCanvas();
-                render();
-            });
-        }
-        // Text Handling
-        function handleTextChange(e) {
-            state.text = e.target.value;
-            updateTimelineScale();
-            render();
-            saveToLocalStorage();
-        }
-        function handleEditorClick() {
-            state.cursorPosition = editor.selectionStart;
-            updateEditorGlow();
-            render();
-        }
-        // Canvas Setup
-        function resizeCanvas() {
-            const container = canvas.parentElement;
-            canvas.width = container.clientWidth;
-            canvas.height = 300;
-        }
-        function updateTimelineScale() {
-            // Adjust timeline based on text length
-            if (state.text.length === 0) return;
-        }
-        // Emotion Management
-        function addEmotionTrack() {
-            const emotionName = emotionInput.value.trim();
-            if (!emotionName) {
-                showStatus('Please enter an emotion name', 'error');
-                return;
-            }
-            const color = colorPalette[colorIndex % colorPalette.length];
-            colorIndex++;
-            const track = {
-                id: Date.now(),
-                label: emotionName,
-                color: color,
-                points: []
-            };
-            state.tracks.push(track);
-            emotionInput.value = '';
-            render();
-            saveToLocalStorage();
-            showStatus(`Added track: ${emotionName}`, 'success');
-        }
-        // Canvas Interaction
-        function getCanvasCoordinates(e) {
-            const rect = canvas.getBoundingClientRect();
-            return {
-                x: e.clientX - rect.left,
-                y: e.clientY - rect.top
-            };
-        }
-        function charIndexToX(charIndex) {
-            const textLength = state.text.length || 1;
-            const padding = 20;
-            const availableWidth = canvas.width - (padding * 2);
-            return padding + (charIndex / textLength) * availableWidth;
-        }
-        function xToCharIndex(x) {
-            const padding = 20;
-            const availableWidth = canvas.width - (padding * 2);
-            const textLength = state.text.length || 1;
-            const normalizedX = Math.max(0, Math.min(x - padding, availableWidth));
-            return Math.round((normalizedX / availableWidth) * textLength);
-        }
-        function intensityToY(intensity) {
-            const padding = 20;
-            const availableHeight = canvas.height - (padding * 2);
-            return padding + availableHeight - (intensity * availableHeight);
-        }
-        function yToIntensity(y) {
-            const padding = 20;
-            const availableHeight = canvas.height - (padding * 2);
-            const normalizedY = Math.max(padding, Math.min(y, canvas.height - padding));
-            return 1 - ((normalizedY - padding) / availableHeight);
-        }
-        function handleCanvasMouseDown(e) {
-            const coords = getCanvasCoordinates(e);
-            const charIndex = xToCharIndex(coords.x);
-            // Check if clicking on existing point or handle
-            const clickedItem = findItemAtPosition(coords.x, coords.y);
-            if (clickedItem) {
-                state.selectedPoint = clickedItem;
-                state.dragging = true;
-                state.dragType = clickedItem.type;
-                state.dragStart = { x: coords.x, y: coords.y };
             } else {
-                // Add new point to active track
-                const activeTrack = state.tracks[state.tracks.length - 1];
-                if (activeTrack) {
-                    const intensity = yToIntensity(coords.y);
-                    const newPoint = {
-                        id: Date.now(),
-                        charIndex: charIndex,
-                        intensity: Math.max(0, Math.min(1, intensity)),
-                        fadeIn: 0,
-                        fadeOut: 0
-                    };
-                    activeTrack.points.push(newPoint);
-                    activeTrack.points.sort((a, b) => a.charIndex - b.charIndex);
-                    state.selectedPoint = { type: 'point', point: newPoint, track: activeTrack };
-                    state.dragging = true;
-                    state.dragType = 'point';
-                    render();
-                    saveToLocalStorage();
-                }
             }
-        }
-        function handleCanvasMouseMove(e) {
-            if (!state.dragging || !state.selectedPoint) return;
-            const coords = getCanvasCoordinates(e);
-            const deltaX = coords.x - state.dragStart.x;
-            const deltaY = coords.y - state.dragStart.y;
-            if (state.dragType === 'point') {
-                const point = state.selectedPoint.point;
-                // Horizontal movement adjusts timing
-                const newCharIndex = xToCharIndex(coords.x);
-                point.charIndex = Math.max(0, Math.min(state.text.length, newCharIndex));
-                // Vertical movement adjusts intensity
-                const newIntensity = yToIntensity(coords.y);
-                point.intensity = Math.max(0, Math.min(1, newIntensity));
-                // Sort points after moving
-                state.selectedPoint.track.points.sort((a, b) => a.charIndex - b.charIndex);
-            } else if (state.dragType === 'fadeIn') {
-                const point = state.selectedPoint.point;
-                point.fadeIn = Math.max(0, Math.min(point.charIndex, point.fadeIn + deltaX / 10));
-            } else if (state.dragType === 'fadeOut') {
-                const point = state.selectedPoint.point;
-                const maxFadeOut = state.text.length - point.charIndex;
-                point.fadeOut = Math.max(0, Math.min(maxFadeOut, point.fadeOut + deltaX / 10));
-            }
-            state.dragStart = { x: coords.x, y: coords.y };
-            render();
-            saveToLocalStorage();
-        }
-        function handleCanvasMouseUp() {
-            state.dragging = false;
-            state.dragType = null;
-        }
-        function findItemAtPosition(x, y) {
-            for (const track of state.tracks) {
-                for (const point of track.points) {
-                    const pointX = charIndexToX(point.charIndex);
-                    const pointY = intensityToY(point.intensity);
-                    // Check main point
-                    if (Math.abs(x - pointX) < 10 && Math.abs(y - pointY) < 10) {
-                        return { type: 'point', point: point, track: track };
-                    }
-                    // Check fade-in handle
-                    if (point.fadeIn > 0) {
-                        const fadeInX = charIndexToX(point.charIndex - point.fadeIn);
-                        if (Math.abs(x - fadeInX) < 8 && Math.abs(y - pointY) < 8) {
-                            return { type: 'fadeIn', point: point, track: track };
-                        }
-                    }
-                    // Check fade-out handle
-                    if (point.fadeOut > 0) {
-                        const fadeOutX = charIndexToX(point.charIndex + point.fadeOut);
-                        if (Math.abs(x - fadeOutX) < 8 && Math.abs(y - pointY) < 8) {
-                            return { type: 'fadeOut', point: point, track: track };
-                        }
-                    }
-                }
-            }
-            return null;
-        }
-        // Rendering
-        function render() {
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            // Draw grid
-            drawGrid();
-            // Draw tracks
-            state.tracks.forEach(track => {
-                drawTrack(track);
-            });
-            // Draw cursor indicator
-            drawCursorIndicator();
-        }
-        function drawGrid() {
-            ctx.strokeStyle = '#2a2a3a';
-            ctx.lineWidth = 1;
-            // Vertical lines (character markers)
-            const step = Math.max(1, Math.floor(state.text.length / 20));
-            for (let i = 0; i <= state.text.length; i += step) {
-                const x = charIndexToX(i);
-                ctx.beginPath();
-                ctx.moveTo(x, 0);
-                ctx.lineTo(x, canvas.height);
-                ctx.stroke();
-            }
-            // Horizontal lines (intensity markers)
-            for (let i = 0; i <= 1; i += 0.25) {
-                const y = intensityToY(i);
-                ctx.beginPath();
-                ctx.moveTo(0, y);
-                ctx.lineTo(canvas.width, y);
-                ctx.stroke();
-            }
-        }
-        function drawTrack(track) {
-            if (track.points.length === 0) return;
-            ctx.strokeStyle = track.color;
-            ctx.fillStyle = track.color;
-            ctx.lineWidth = 2;
-            // Draw curve
             ctx.beginPath();
-            track.points.forEach((point, index) => {
-                const x = charIndexToX(point.charIndex);
-                const y = intensityToY(point.intensity);
-                if (index === 0) {
-                    ctx.moveTo(x, y);
-                } else {
-                    ctx.lineTo(x, y);
-                }
-            });
             ctx.stroke();
-            // Draw fill under curve
-            ctx.globalAlpha = 0.1;
-            ctx.lineTo(charIndexToX(track.points[track.points.length - 1].charIndex), canvas.height - 20);
-            ctx.lineTo(charIndexToX(track.points[0].charIndex), canvas.height - 20);
             ctx.closePath();
             ctx.fill();
-            ctx.globalAlpha = 1;
-            // Draw points and handles
-            track.points.forEach(point => {
-                drawPoint(point, track);
-            });
-        }
-        function drawPoint(point, track) {
-            const x = charIndexToX(point.charIndex);
-            const y = intensityToY(point.intensity);
-            // Main point
             ctx.beginPath();
-            ctx.arc(x, y, 6, 0, Math.PI * 2);
-            ctx.fillStyle = track.color;
-            ctx.fill();
-            ctx.strokeStyle = '#fff';
-            ctx.lineWidth = 2;
-            ctx.stroke();
-            // Fade-in handle
-            if (point.fadeIn > 0) {
-                const fadeInX = charIndexToX(point.charIndex - point.fadeIn);
-                ctx.beginPath();
-                ctx.arc(fadeInX, y, 4, 0, Math.PI * 2);
-                ctx.fillStyle = track.color;
-                ctx.fill();
-                ctx.beginPath();
-                ctx.moveTo(fadeInX, y);
-                ctx.lineTo(x, y);
-                ctx.strokeStyle = track.color;
-                ctx.lineWidth = 1;
-                ctx.setLineDash([3, 3]);
-                ctx.stroke();
-                ctx.setLineDash([]);
-            }
-            // Fade-out handle
-            if (point.fadeOut > 0) {
-                const fadeOutX = charIndexToX(point.charIndex + point.fadeOut);
-                ctx.beginPath();
-                ctx.arc(fadeOutX, y, 4, 0, Math.PI * 2);
-                ctx.fillStyle = track.color;
-                ctx.fill();
-                ctx.beginPath();
-                ctx.moveTo(x, y);
-                ctx.lineTo(fadeOutX, y);
-                ctx.strokeStyle = track.color;
-                ctx.lineWidth = 1;
-                ctx.setLineDash([3, 3]);
-                ctx.stroke();
-                ctx.setLineDash([]);
             }
-        }
-        function drawCursorIndicator() {
-            if (state.text.length === 0) return;
-            const x = charIndexToX(state.cursorPosition);
-            ctx.strokeStyle = '#fff';
             ctx.lineWidth = 2;
-            ctx.setLineDash([5, 5]);
-            ctx.beginPath();
-            ctx.moveTo(x, 0);
-            ctx.lineTo(x, canvas.height);
             ctx.stroke();
-            ctx.setLineDash([]);
-        }
-        // Editor Glow Effect
-        function updateEditorGlow() {
-            const activeEmotions = getActiveEmotionsAtPosition(state.cursorPosition);
-            if (activeEmotions.length === 0) {
-                editorGlow.style.opacity = '0';
-                return;
-            }
-            // Calculate weighted average color and intensity
-            let totalWeight = 0;
-            let r = 0, g = 0, b = 0;
-            activeEmotions.forEach(emotion => {
-                const color = hexToRgb(emotion.color);
-                const weight = emotion.intensity;
-                r += color.r * weight;
-                g += color.g * weight;
-                b += color.b * weight;
-                totalWeight += weight;
-            });
-            if (totalWeight > 0) {
-                r = Math.round(r / totalWeight);
-                g = Math.round(g / totalWeight);
-                b = Math.round(b / totalWeight);
-                const avgIntensity = totalWeight / activeEmotions.length;
-                editorGlow.style.background = `radial-gradient(circle at center, rgba(${r}, ${g}, ${b}, ${avgIntensity * 0.3}), transparent)`;
-                editorGlow.style.opacity = '1';
             }
-        }
-        function getActiveEmotionsAtPosition(charIndex) {
-            const activeEmotions = [];
-            state.tracks.forEach(track => {
-                track.points.forEach(point => {
-                    const start = point.charIndex - point.fadeIn;
-                    const end = point.charIndex + point.fadeOut;
-                    if (charIndex >= start && charIndex <= end) {
-                        let intensity = point.intensity;
-                        // Apply fade-in
-                        if (charIndex < point.charIndex && point.fadeIn > 0) {
-                            const fadeProgress = (charIndex - start) / point.fadeIn;
-                            intensity *= fadeProgress;
-                        }
-                        // Apply fade-out
-                        if (charIndex > point.charIndex && point.fadeOut > 0) {
-                            const fadeProgress = 1 - ((charIndex - point.charIndex) / point.fadeOut);
-                            intensity *= fadeProgress;
-                        }
-                        activeEmotions.push({
-                            label: track.label,
-                            color: track.color,
-                            intensity: Math.max(0, Math.min(1, intensity))
-                        });
-                    }
-                });
-            });
-            return activeEmotions;
-        }
-        // Data Export
-        function generateDataset() {
-            const emotionalFlow = [];
-            state.tracks.forEach(track => {
-                const curves = track.points.map(point => ({
-                    start_char: Math.max(0, point.charIndex - point.fadeIn),
-                    end_char: Math.min(state.text.length, point.charIndex + point.fadeOut),
-                    start_intensity: point.fadeIn > 0 ? 0 : point.intensity,
-                    peak_intensity: point.intensity,
-                    end_intensity: point.fadeOut > 0 ? 0 : point.intensity
-                }));
-                if (curves.length > 0) {
-                    emotionalFlow.push({
-                        label: track.label,
-                        curves: curves
-                    });
-                }
-            });
-            return {
-                text: state.text,
-                emotional_flow: emotionalFlow
-            };
-        }
-        function exportJSON() {
-            const dataset = generateDataset();
-            const jsonStr = JSON.stringify(dataset, null, 2);
-            const blob = new Blob([jsonStr], { type: 'application/json' });
-            const url = URL.createObjectURL(blob);
-            const a = document.createElement('a');
-            a.href = url;
-            a.download = 'self-distillation-dataset.json';
-            a.click();
-            URL.revokeObjectURL(url);
-            showStatus('Dataset exported successfully', 'success');
-        }
-        // HuggingFace Integration
-        function showHFModal() {
-            const savedToken = localStorage.getItem('hf_token');
-            const savedRepo = localStorage.getItem('hf_repo_id');
-            if (savedToken) document.getElementById('hfToken').value = savedToken;
-            if (savedRepo) document.getElementById('hfRepoId').value = savedRepo;
-            document.getElementById('hfModal').classList.add('active');
-        }
-        function closeHFModal() {
-            document.getElementById('hfModal').classList.remove('active');
-        }
-        async function pushToHF() {
-            const token = document.getElementById('hfToken').value.trim();
-            const repoId = document.getElementById('hfRepoId').value.trim();
-            if (!token || !repoId) {
-                showStatus('Please provide both token and repository ID', 'error');
-                return;
-            }
-            // Save credentials
-            localStorage.setItem('hf_token', token);
-            localStorage.setItem('hf_repo_id', repoId);
-            try {
-                showStatus('Preparing dataset...', 'success');
-                const dataset = generateDataset();
-                // Create Parquet-like binary data (simplified)
-                const parquetData = convertToParquet(dataset);
-                // Create dataset card (Jinja2 format)
-                const datasetCard = generateDatasetCard(dataset);
-                // Upload files
-                await uploadToHF(token, repoId, parquetData, datasetCard);
-                showStatus('Successfully pushed to HuggingFace!', 'success');
-                closeHFModal();
-            } catch (error) {
-                showStatus(`Error: ${error.message}`, 'error');
-            }
-        }
-        function convertToParquet(dataset) {
-            // Simplified Parquet conversion
-            // In production, use a proper Parquet library
-            const records = [];
-            dataset.emotional_flow.forEach(emotion => {
-                emotion.curves.forEach(curve => {
-                    records.push({
-                        text: dataset.text,
-                        emotion_label: emotion.label,
-                        start_char: curve.start_char,
-                        end_char: curve.end_char,
-                        start_intensity: curve.start_intensity,
-                        peak_intensity: curve.peak_intensity,
-                        end_intensity: curve.end_intensity
-                    });
-                });
-            });
-            // Return as JSON for simplicity (real implementation would use parquetjs)
-            return JSON.stringify(records, null, 2);
-        }
-        function generateDatasetCard(dataset) {
-            return `---
-language: en
-license: mit
-task_categories:
-- text-classification
-- sentiment-analysis
 tags:
-- emotion-detection
 - self-distillation
-- affective-computing
-pretty_name: Self-Distillation Dataset
 ---
-# Self-Distillation Dataset
-## Dataset Description
-This dataset contains text annotated with emotional flow curves, mapping character-level positions to emotional intensities.
-## Dataset Structure
-- **text**: The original text content
-- **emotional_flow**: Array of emotions with their intensity curves
-  - **label**: Emotion name
-  - **curves**: Array of intensity curves with start/end positions and intensities
-## Usage
-\`\`\`python
-import json
-with open('dataset.json', 'r') as f:
-    data = json.load(f)
-for entry in data['emotional_flow']:
-    print(f"Emotion: {entry['label']}")
-    for curve in entry['curves']:
-        print(f"  Position {curve['start_char']}-{curve['end_char']}: {curve['peak_intensity']}")
-\`\`\`
-## Generation
-Generated using the Self-Distillation web app with manual annotation.
-`;
-        }
-        async function uploadToHF(token, repoId, parquetData, datasetCard) {
-            const headers = {
-                'Authorization': `Bearer ${token}`,
-                'Content-Type': 'application/json'
-            };
-            // Upload parquet file
-            const parquetResponse = await fetch(
-                `https://huggingface.co/api/datasets/${repoId}/parquet`,
-                {
-                    method: 'POST',
-                    headers: headers,
-                    body: JSON.stringify({
-                        file: 'data.parquet',
-                        content: parquetData
-                    })
-                }
-            );
-            if (!parquetResponse.ok) {
-                throw new Error('Failed to upload parquet file');
-            }
-            // Upload README
-            const readmeResponse = await fetch(
-                `https://huggingface.co/api/datasets/${repoId}/readme`,
-                {
-                    method: 'POST',
-                    headers: headers,
-                    body: JSON.stringify({
-                        content: datasetCard
-                    })
-                }
-            );
-            if (!readmeResponse.ok) {
-                throw new Error('Failed to upload README');
             }
-        }
-        // LocalStorage
-        function saveToLocalStorage() {
-            const data = {
-                text: state.text,
-                tracks: state.tracks,
-                colorIndex: colorIndex
-            };
-            localStorage.setItem('self_distillation_data', JSON.stringify(data));
-        }
-        function loadFromLocalStorage() {
-            const saved = localStorage.getItem('self_distillation_data');
-            if (saved) {
-                try {
-                    const data = JSON.parse(saved);
-                    state.text = data.text || '';
-                    state.tracks = data.tracks || [];
-                    colorIndex = data.colorIndex || 0;
-                    editor.value = state.text;
-                } catch (e) {
-                    console.error('Failed to load saved data:', e);
-                }
-            }
         }
-        // Utility Functions
-        function hexToRgb(hex) {
-            const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);
-            return result ? {
-                r: parseInt(result[1], 16),
-                g: parseInt(result[2], 16),
-                b: parseInt(result[3], 16)
-            } : { r: 0, g: 0, b: 0 };
-        }
-        function showStatus(message, type) {
-            statusBar.textContent = message;
-            statusBar.className = `status-bar active ${type}`;
-            setTimeout(() => {
-                statusBar.classList.remove('active');
-            }, 3000);
-        }
-        // Initialize app
-        init();
-    </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>Distill — Offline Emotion Dataset Builder</title>
+  <style>
+    :root {
+      color-scheme: dark;
+      --bg0: #0a0d13;
+      --bg1: #0f141d;
+      --bg2: #141b27;
+      --line: rgba(173, 188, 255, 0.12);
+      --line-strong: rgba(173, 188, 255, 0.2);
+      --text: #eaf0ff;
+      --muted: #95a3bd;
+      --accent: #7ea7ff;
+      --good: #7cf0b0;
+      --warn: #ffca74;
+      --danger: #ff7f98;
+      --shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+    }
+    * { box-sizing: border-box; }
+    html, body { margin: 0; background:
+      radial-gradient(circle at top, rgba(126,167,255,0.08), transparent 40%),
+      linear-gradient(180deg, #0a0d13 0%, #0d121a 100%);
+      color: var(--text);
+      font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+    }
+    button, input, textarea {
+      font: inherit;
+    }
+    body {
+      min-height: 100vh;
+    }
+    #app {
+      max-width: 1500px;
+      margin: 0 auto;
+      padding: 16px;
+      display: grid;
+      gap: 14px;
+    }
+    .toolbar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 12px;
+      flex-wrap: wrap;
+      padding: 12px;
+      border: 1px solid var(--line);
+      background: rgba(255,255,255,0.04);
+      backdrop-filter: blur(14px);
+      border-radius: 18px;
+      box-shadow: var(--shadow);
+    }
+    .group {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+    .brand {
+      font-weight: 750;
+      letter-spacing: 0.02em;
+      padding-right: 4px;
+    }
+    button,
+    input[type="text"],
+    input[type="password"] {
+      border: 1px solid var(--line);
+      background: rgba(255,255,255,0.05);
+      color: var(--text);
+      border-radius: 12px;
+      transition: 120ms ease;
+    }
+    button {
+      padding: 10px 14px;
+      cursor: pointer;
+    }
+    button:hover {
+      border-color: var(--line-strong);
+      background: rgba(255,255,255,0.08);
+      transform: translateY(-1px);
+    }
+    button.primary {
+      background: linear-gradient(180deg, rgba(126,167,255,0.28), rgba(126,167,255,0.12));
+      border-color: rgba(126,167,255,0.45);
+    }
+    input[type="text"],
+    input[type="password"] {
+      padding: 10px 12px;
+      min-width: 220px;
+      outline: none;
+    }
+    input::placeholder,
+    textarea::placeholder {
+      color: #7e8ca5;
+    }
+    .editor-shell {
+      --aura: hsla(220, 80%, 60%, 0.12);
+      position: relative;
+      border: 1px solid var(--line);
+      border-radius: 24px;
+      overflow: hidden;
+      background:
+        radial-gradient(circle at top right, var(--aura), transparent 40%),
+        linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
+      box-shadow:
+        0 0 0 1px rgba(255,255,255,0.02),
+        0 16px 48px rgba(0,0,0,0.32);
+      transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
+    }
+    #editor {
+      width: 100%;
+      min-height: 34vh;
+      resize: vertical;
+      border: 0;
+      outline: 0;
+      background: transparent;
+      color: var(--text);
+      padding: 24px 24px 8px;
+      line-height: 1.65;
+      font-size: 16px;
+    }
+    .active-bar {
+      min-height: 34px;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      padding: 0 24px 18px;
+      align-items: center;
+    }
+    .pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      border: 1px solid var(--line);
+      padding: 6px 10px;
+      border-radius: 999px;
+      background: rgba(255,255,255,0.05);
+      font-size: 13px;
+      color: #dbe5ff;
+    }
+    .dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 999px;
+      flex: 0 0 auto;
+    }
+    .muted {
+      color: var(--muted);
+      font-size: 13px;
+    }
+    .main-grid {
+      display: grid;
+      grid-template-columns: minmax(0, 1.25fr) minmax(330px, 0.85fr);
+      gap: 14px;
+    }
+    .panel {
+      border: 1px solid var(--line);
+      background: rgba(255,255,255,0.04);
+      border-radius: 20px;
+      overflow: hidden;
+      box-shadow: var(--shadow);
+    }
+    .panel-head {
+      padding: 14px 16px;
+      border-bottom: 1px solid rgba(255,255,255,0.06);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 12px;
+      flex-wrap: wrap;
+    }
+    .meta {
+      color: var(--muted);
+      font-size: 12px;
+    }
+    .track-bar {
+      padding: 12px 16px 6px;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      min-height: 52px;
+      align-items: center;
+    }
+    .track-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 7px 10px;
+      border-radius: 999px;
+      border: 1px solid var(--line);
+      background: rgba(255,255,255,0.05);
+      color: var(--text);
+      cursor: pointer;
+      user-select: none;
+      font-size: 13px;
+    }
+    .track-chip:hover {
+      background: rgba(255,255,255,0.08);
+      border-color: var(--line-strong);
+    }
+    .track-chip .count {
+      color: var(--muted);
+      font-size: 12px;
+    }
+    .track-chip .close {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 18px;
+      height: 18px;
+      border-radius: 999px;
+      background: rgba(255,255,255,0.08);
+      color: #dfe8ff;
+      font-size: 12px;
+      line-height: 1;
+    }
+    .timeline-wrap {
+      padding: 0 12px 12px;
+    }
+    #timeline {
+      display: block;
+      width: 100%;
+      height: 340px;
+      border-radius: 16px;
+      background:
+        linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02));
+      cursor: crosshair;
+    }
+    .hint {
+      color: var(--muted);
+      font-size: 12px;
+      padding: 0 16px 14px;
+    }
+    pre {
+      margin: 0;
+      padding: 16px;
+      min-height: 340px;
+      max-height: 620px;
+      overflow: auto;
+      white-space: pre-wrap;
+      word-break: break-word;
+      color: #dce6ff;
+      font-size: 12px;
+      line-height: 1.5;
+    }
+    .footer-row {
+      display: flex;
+      justify-content: space-between;
+      gap: 12px;
+      flex-wrap: wrap;
+      padding: 2px 2px 10px;
+      color: var(--muted);
+      font-size: 12px;
+    }
+    .status {
+      position: fixed;
+      right: 16px;
+      bottom: 16px;
+      max-width: 420px;
+      padding: 12px 14px;
+      border-radius: 14px;
+      background: rgba(18, 24, 35, 0.95);
+      border: 1px solid rgba(255,255,255,0.1);
+      color: #eef4ff;
+      box-shadow: var(--shadow);
+      opacity: 0;
+      transform: translateY(6px);
+      pointer-events: none;
+      transition: 140ms ease;
+      z-index: 50;
+      white-space: pre-wrap;
+    }
+    .status.show {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    .modal-backdrop {
+      position: fixed;
+      inset: 0;
+      display: none;
+      align-items: center;
+      justify-content: center;
+      background: rgba(0,0,0,0.5);
+      padding: 20px;
+      z-index: 60;
+    }
+    .modal-backdrop.show {
+      display: flex;
+    }
+    .modal {
+      width: min(560px, 100%);
+      border-radius: 18px;
+      overflow: hidden;
+      border: 1px solid var(--line);
+      background: #10151f;
+      box-shadow: var(--shadow);
+    }
+    .modal h3 {
+      margin: 0;
+      padding: 16px;
+      border-bottom: 1px solid rgba(255,255,255,0.06);
+    }
+    .modal .content {
+      padding: 16px;
+      display: grid;
+      gap: 12px;
+    }
+    label {
+      display: grid;
+      gap: 6px;
+      color: #c7d3ea;
+      font-size: 13px;
+    }
+    .empty {
+      color: var(--muted);
+      font-size: 13px;
+      padding: 6px 0;
+    }
+    .warning-note {
+      color: #f7d39a;
+      font-size: 12px;
+      line-height: 1.4;
+    }
+    @media (max-width: 1020px) {
+      .main-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+  </style>
 </head>
 <body>
+  <div id="app">
+    <div class="toolbar">
+      <div class="group">
+        <div class="brand">Distill</div>
+        <button id="saveEntryBtn" class="primary">Save Entry</button>
+        <button id="exportBtn">Export Files</button>
+        <button id="uploadBtn">Push to HF</button>
+        <button id="settingsBtn">Settings</button>
+      </div>
+      <div class="group">
+        <input id="emotionNameInput" type="text" placeholder="Custom emotion…" />
+        <button id="addEmotionBtn">+ Track</button>
+      </div>
+    </div>
+    <div class="editor-shell" id="editorShell">
+      <textarea id="editor" placeholder="Write naturally. Then shape the emotional flow below."></textarea>
+      <div class="active-bar" id="activeBar"></div>
+    </div>
+    <div class="main-grid">
+      <section class="panel">
+        <div class="panel-head">
+          <strong>Emotion Timeline</strong>
+          <span class="meta" id="timelineMeta"></span>
         </div>
+        <div class="track-bar" id="trackBar"></div>
+        <div class="timeline-wrap">
+          <canvas id="timeline"></canvas>
+        </div>
+        <div class="hint">
+          Click a lane to drop a point • drag up/down for intensity • drag left/right for text offset •
+          double click or right click a point to delete • double click a track chip to rename •
+          Shift+click a lane to move the text cursor there
+        </div>
+      </section>
+      <section class="panel">
+        <div class="panel-head">
+          <strong>Live Dataset Preview</strong>
+          <span class="meta" id="entriesMeta"></span>
         </div>
+        <pre id="jsonPreview"></pre>
+      </section>
     </div>
+    <div class="footer-row">
+      <div id="metaLine">0 chars • 0 tracks • 0 saved entries</div>
+      <div>Ctrl/Cmd+S save entry • Ctrl/Cmd+E focus custom emotion input</div>
+    </div>
+  </div>
+  <div class="modal-backdrop" id="settingsBackdrop">
+    <div class="modal">
+      <h3>Hugging Face Settings</h3>
+      <div class="content">
+        <label>
+          Dataset ID
+          <input id="datasetIdInput" type="text" placeholder="username/dataset-name" />
+        </label>
+        <label>
+          Write Token
+          <input id="tokenInput" type="password" placeholder="hf_xxx" />
+        </label>
+        <div class="warning-note">
+          Stored only in your browser via localStorage. This app has no backend.
         </div>
+        <div class="group">
+          <button id="saveSettingsBtn" class="primary">Save Settings</button>
+          <button id="closeSettingsBtn">Close</button>
+        </div>
+      </div>
     </div>
+  </div>
+  <div class="status" id="status"></div>
+  <script>
+    (() => {
+      const STORAGE = {
+        settings: "distill.settings.v1",
+        draft: "distill.draft.v1",
+        entries: "distill.entries.v1"
+      };
+      const $ = (sel) => document.querySelector(sel);
+      const editor = $("#editor");
+      const editorShell = $("#editorShell");
+      const activeBar = $("#activeBar");
+      const emotionNameInput = $("#emotionNameInput");
+      const addEmotionBtn = $("#addEmotionBtn");
+      const saveEntryBtn = $("#saveEntryBtn");
+      const exportBtn = $("#exportBtn");
+      const uploadBtn = $("#uploadBtn");
+      const settingsBtn = $("#settingsBtn");
+      const timeline = $("#timeline");
+      const trackBar = $("#trackBar");
+      const jsonPreview = $("#jsonPreview");
+      const metaLine = $("#metaLine");
+      const timelineMeta = $("#timelineMeta");
+      const entriesMeta = $("#entriesMeta");
+      const settingsBackdrop = $("#settingsBackdrop");
+      const datasetIdInput = $("#datasetIdInput");
+      const tokenInput = $("#tokenInput");
+      const saveSettingsBtn = $("#saveSettingsBtn");
+      const closeSettingsBtn = $("#closeSettingsBtn");
+      const statusEl = $("#status");
+      const state = loadState();
+      let renderMeta = { lanes: [], points: [] };
+      let drag = null;
+      let pendingInput = null;
+      let toastTimer = null;
+      hydrate();
+      bind();
+      refreshAll();
+      function hydrate() {
+        editor.value = state.text;
+        datasetIdInput.value = state.settings.datasetId || "";
+        tokenInput.value = state.settings.token || "";
+      }
+      function bind() {
+        addEmotionBtn.addEventListener("click", onAddTrack);
+        emotionNameInput.addEventListener("keydown", (e) => {
+          if (e.key === "Enter") onAddTrack();
+        });
+        editor.addEventListener("beforeinput", () => {
+          pendingInput = {
+            oldText: state.text,
+            start: editor.selectionStart,
+            end: editor.selectionEnd
+          };
+        });
+        editor.addEventListener("input", () => {
+          const newText = editor.value;
+          if (pendingInput) {
+            shiftPointsForTextEdit(
+              pendingInput.start,
+              pendingInput.end,
+              newText.length - pendingInput.oldText.length,
+              newText.length
+            );
+            pendingInput = null;
+          }
+          state.text = newText;
+          persistDraft();
+          refreshLight();
+        });
+        ["click", "keyup", "mouseup", "select"].forEach((evt) => {
+          editor.addEventListener(evt, refreshLight);
+        });
+        timeline.addEventListener("mousedown", onTimelineDown);
+        window.addEventListener("mousemove", onTimelineMove);
+        window.addEventListener("mouseup", onTimelineUp);
+        timeline.addEventListener("dblclick", onTimelineDoubleClick);
+        timeline.addEventListener("contextmenu", onTimelineContextMenu);
+        window.addEventListener("resize", renderTimeline);
+        saveEntryBtn.addEventListener("click", saveEntry);
+        exportBtn.addEventListener("click", exportFiles);
+        uploadBtn.addEventListener("click", uploadToHuggingFace);
+        settingsBtn.addEventListener("click", () => openSettings(true));
+        saveSettingsBtn.addEventListener("click", saveSettings);
+        closeSettingsBtn.addEventListener("click", () => openSettings(false));
+        settingsBackdrop.addEventListener("click", (e) => {
+          if (e.target === settingsBackdrop) openSettings(false);
+        });
+        document.addEventListener("keydown", (e) => {
+          const mod = e.metaKey || e.ctrlKey;
+          if (mod && e.key.toLowerCase() === "s") {
+            e.preventDefault();
+            saveEntry();
+          }
+          if (mod && e.key.toLowerCase() === "e") {
+            e.preventDefault();
+            emotionNameInput.focus();
+            emotionNameInput.select();
+          }
+          if (e.key === "Escape") openSettings(false);
+        });
+      }
+      function loadState() {
+        const settings = loadJSON(STORAGE.settings, {});
+        const draft = loadJSON(STORAGE.draft, {});
+        const entries = loadJSON(STORAGE.entries, []);
+        return {
+          settings: {
+            datasetId: typeof settings.datasetId === "string" ? settings.datasetId : "",
+            token: typeof settings.token === "string" ? settings.token : ""
+          },
+          text: typeof draft.text === "string" ? draft.text : "",
+          emotions: sanitizeTracks(Array.isArray(draft.emotions) ? draft.emotions : []),
+          entries: Array.isArray(entries) ? entries : []
         };
+      }
+      function loadJSON(key, fallback) {
+        try {
+          const raw = localStorage.getItem(key);
+          return raw ? JSON.parse(raw) : fallback;
+        } catch {
+          return fallback;
+        }
+      }
+      function persistDraft() {
+        localStorage.setItem(
+          STORAGE.draft,
+          JSON.stringify({
+            text: state.text,
+            emotions: state.emotions
+          })
+        );
+      }
+      function persistEntries() {
+        localStorage.setItem(STORAGE.entries, JSON.stringify(state.entries));
+      }
+      function persistSettings() {
+        localStorage.setItem(STORAGE.settings, JSON.stringify(state.settings));
+      }
+      function sanitizeTracks(tracks) {
+        return tracks.map((t) => {
+          const name = String(t.name || "Emotion");
+          const hue = Number.isFinite(t.hue) ? t.hue : hueFor(name);
+          const points = Array.isArray(t.points) ? t.points.map((p) => ({
+            id: p.id || uid("pt"),
+            pos: clamp(Number(p.pos) || 0, 0, 999999999),
+            intensity: clamp(Number(p.intensity) || 0, 0, 1)
+          })) : [];
+          return {
+            id: t.id || uid("track"),
+            name,
+            hue,
+            color: colorFromHue(hue, 1, false),
+            points: points.sort((a, b) => a.pos - b.pos)
+          };
+        });
+      }
+      function uid(prefix = "id") {
+        return prefix + "_" + Math.random().toString(36).slice(2, 10);
+      }
+      function clamp(n, min, max) {
+        return Math.min(max, Math.max(min, n));
+      }
+      function round(n, digits = 3) {
+        const f = Math.pow(10, digits);
+        return Math.round(n * f) / f;
+      }
+      function hueFor(text) {
+        let h = 0;
+        for (let i = 0; i < text.length; i++) {
+          h = (h * 31 + text.charCodeAt(i)) % 360;
+        }
+        return h;
+      }
+      function colorFromHue(hue, alpha = 1, hslString = true) {
+        if (hslString) return `hsla(${hue}, 84%, 64%, ${alpha})`;
+        return `hsl(${hue}, 84%, 64%)`;
+      }
+      function shiftPointsForTextEdit(start, end, delta, newLength) {
+        const insertionOnly = start === end;
+        for (const track of state.emotions) {
+          for (const point of track.points) {
+            if (insertionOnly) {
+              if (point.pos >= start) point.pos += delta;
             } else {
+              if (point.pos > end) {
+                point.pos += delta;
+              } else if (point.pos > start && point.pos <= end) {
+                point.pos = start + Math.max(delta, 0);
+              }
             }
+            point.pos = clamp(Math.round(point.pos), 0, newLength);
+          }
+          track.points.sort((a, b) => a.pos - b.pos);
+        }
+      }
+      function onAddTrack() {
+        const name = emotionNameInput.value.trim();
+        if (!name) return;
+        const exists = state.emotions.some((t) => t.name.toLowerCase() === name.toLowerCase());
+        if (exists) {
+          toast("That emotion track already exists.");
+          emotionNameInput.select();
+          return;
+        }
+        const hue = hueFor(name);
+        state.emotions.push({
+          id: uid("track"),
+          name,
+          hue,
+          color: colorFromHue(hue, 1, false),
+          points: []
+        });
+        emotionNameInput.value = "";
+        persistDraft();
+        refreshAll();
+        toast(`Added track: ${name}`);
+      }
+      function renameTrack(trackId) {
+        const track = state.emotions.find((t) => t.id === trackId);
+        if (!track) return;
+        const next = prompt("Rename emotion", track.name);
+        if (!next || !next.trim()) return;
+        track.name = next.trim();
+        track.hue = hueFor(track.name);
+        track.color = colorFromHue(track.hue, 1, false);
+        persistDraft();
+        refreshAll();
+      }
+      function removeTrack(trackId) {
+        const track = state.emotions.find((t) => t.id === trackId);
+        state.emotions = state.emotions.filter((t) => t.id !== trackId);
+        persistDraft();
+        refreshAll();
+        if (track) toast(`Removed track: ${track.name}`);
+      }
+      function renderTrackBar() {
+        trackBar.innerHTML = "";
+        if (!state.emotions.length) {
+          const empty = document.createElement("div");
+          empty.className = "empty";
+          empty.textContent = "No emotion tracks yet. Add a custom one above, then click its lane to paint emotion over the text.";
+          trackBar.appendChild(empty);
+          return;
+        }
+        for (const track of state.emotions) {
+          const chip = document.createElement("div");
+          chip.className = "track-chip";
+          chip.title = "Double click to rename";
+          const dot = document.createElement("span");
+          dot.className = "dot";
+          dot.style.background = colorFromHue(track.hue, 0.95);
+          const label = document.createElement("span");
+          label.textContent = track.name;
+          const count = document.createElement("span");
+          count.className = "count";
+          count.textContent = `${track.points.length} pts`;
+          const close = document.createElement("span");
+          close.className = "close";
+          close.textContent = "×";
+          close.title = "Remove track";
+          close.addEventListener("click", (e) => {
+            e.stopPropagation();
+            removeTrack(track.id);
+          });
+          chip.addEventListener("dblclick", () => renameTrack(track.id));
+          chip.append(dot, label, count, close);
+          trackBar.appendChild(chip);
+        }
+      }
+      function currentCursorPos() {
+        return typeof editor.selectionStart === "number" ? editor.selectionStart : 0;
+      }
+      function intensityAt(track, pos) {
+        const points = [...track.points].sort((a, b) => a.pos - b.pos);
+        if (!points.length) return 0;
+        if (points.length === 1) return pos === points[0].pos ? points[0].intensity : 0;
+        if (pos < points[0].pos || pos > points[points.length - 1].pos) return 0;
+        for (let i = 0; i < points.length; i++) {
+          const a = points[i];
+          const b = points[i + 1];
+          if (pos === a.pos) return a.intensity;
+          if (!b) continue;
+          if (a.pos === b.pos && pos === a.pos) {
+            return b.intensity;
+          }
+          if (pos >= a.pos && pos <= b.pos) {
+            const span = Math.max(1, b.pos - a.pos);
+            const t = (pos - a.pos) / span;
+            return a.intensity + (b.intensity - a.intensity) * t;
+          }
+        }
+        return 0;
+      }
+      function getActiveEmotionsAt(pos) {
+        return state.emotions
+          .map((track) => ({
+            id: track.id,
+            name: track.name,
+            hue: track.hue,
+            intensity: round(intensityAt(track, pos), 3)
+          }))
+          .filter((x) => x.intensity > 0.001)
+          .sort((a, b) => b.intensity - a.intensity);
+      }
+      function renderActiveBar() {
+        activeBar.innerHTML = "";
+        const cursor = currentCursorPos();
+        const active = getActiveEmotionsAt(cursor);
+        if (!active.length) {
+          const muted = document.createElement("div");
+          muted.className = "muted";
+          muted.textContent = state.emotions.length
+            ? "No active emotion at the current cursor position."
+            : "Add a custom emotion track, then click in the timeline to shape how you felt while writing.";
+          activeBar.appendChild(muted);
+          editorShell.style.setProperty("--aura", "hsla(220, 80%, 60%, 0.12)");
+          editorShell.style.borderColor = "rgba(173, 188, 255, 0.12)";
+          editorShell.style.boxShadow =
+            "0 0 0 1px rgba(255,255,255,0.02), 0 16px 48px rgba(0,0,0,0.32)";
+          return;
+        }
+        for (const item of active) {
+          const pill = document.createElement("div");
+          pill.className = "pill";
+          const dot = document.createElement("span");
+          dot.className = "dot";
+          dot.style.background = colorFromHue(item.hue, 0.95);
+          const label = document.createElement("span");
+          label.textContent = `${item.name} ${Math.round(item.intensity * 100)}%`;
+          pill.append(dot, label);
+          activeBar.appendChild(pill);
+        }
+        const dominant = active[0];
+        editorShell.style.setProperty("--aura", colorFromHue(dominant.hue, 0.16 + dominant.intensity * 0.26));
+        editorShell.style.borderColor = colorFromHue(dominant.hue, 0.18 + dominant.intensity * 0.28);
+        editorShell.style.boxShadow =
+          `0 0 0 1px rgba(255,255,255,0.02),
+           0 16px 48px rgba(0,0,0,0.32),
+           0 0 ${18 + dominant.intensity * 34}px ${colorFromHue(dominant.hue, 0.1 + dominant.intensity * 0.28)}`;
+      }
+      function renderTimeline() {
+        const dpr = window.devicePixelRatio || 1;
+        const cssWidth = timeline.clientWidth || timeline.parentElement.clientWidth || 800;
+        const cssHeight = Math.max(240, state.emotions.length * 86 + 28);
+        timeline.style.height = cssHeight + "px";
+        timeline.width = Math.floor(cssWidth * dpr);
+        timeline.height = Math.floor(cssHeight * dpr);
+        const ctx = timeline.getContext("2d");
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        ctx.clearRect(0, 0, cssWidth, cssHeight);
+        renderMeta = { lanes: [], points: [] };
+        const pad = 14;
+        const gutter = 152;
+        const laneHeight = 86;
+        const graphHeight = 52;
+        const graphLeft = gutter;
+        const graphRight = cssWidth - pad;
+        const graphWidth = Math.max(10, graphRight - graphLeft);
+        const textLength = Math.max(state.text.length, 1);
+        const cursor = currentCursorPos();
+        if (!state.emotions.length) {
+          ctx.fillStyle = "rgba(255,255,255,0.08)";
+          roundRect(ctx, pad, pad, cssWidth - pad * 2, cssHeight - pad * 2, 16);
+          ctx.fill();
+          ctx.fillStyle = "rgba(255,255,255,0.65)";
+          ctx.font = "600 15px Inter, system-ui, sans-serif";
+          ctx.fillText("No tracks yet", 24, 42);
+          ctx.fillStyle = "rgba(255,255,255,0.45)";
+          ctx.font = "13px Inter, system-ui, sans-serif";
+          ctx.fillText("Add a custom emotion above. Then click here to place intensity points over the text.", 24, 66);
+          return;
+        }
+        for (let i = 0; i < state.emotions.length; i++) {
+          const track = state.emotions[i];
+          const laneY = pad + i * laneHeight;
+          const graphTop = laneY + 18;
+          const graphBottom = graphTop + graphHeight;
+          const labelX = 24;
+          const laneW = cssWidth - pad * 2;
+          const laneH = laneHeight - 10;
+          renderMeta.lanes.push({
+            trackId: track.id,
+            graphLeft,
+            graphRight,
+            graphWidth,
+            graphTop,
+            graphBottom,
+            graphHeight,
+            laneY,
+            laneH
+          });
+          ctx.fillStyle = "rgba(255,255,255,0.03)";
+          roundRect(ctx, pad, laneY, laneW, laneH, 14);
+          ctx.fill();
+          ctx.fillStyle = "rgba(255,255,255,0.04)";
+          roundRect(ctx, graphLeft - 8, graphTop - 6, graphWidth + 8, graphHeight + 12, 12);
+          ctx.fill();
+          ctx.strokeStyle = "rgba(255,255,255,0.06)";
+          ctx.lineWidth = 1;
+          for (const ratio of [0, 0.25, 0.5, 0.75, 1]) {
+            const y = graphBottom - ratio * graphHeight;
             ctx.beginPath();
+            ctx.moveTo(graphLeft, y);
+            ctx.lineTo(graphRight, y);
             ctx.stroke();
+          }
+          const cursorX = graphLeft + (cursor / textLength) * graphWidth;
+          ctx.strokeStyle = "rgba(255,255,255,0.18)";
+          ctx.lineWidth = 1;
+          ctx.beginPath();
+          ctx.moveTo(cursorX, graphTop - 6);
+          ctx.lineTo(cursorX, graphBottom + 6);
+          ctx.stroke();
+          ctx.fillStyle = colorFromHue(track.hue, 0.95);
+          ctx.beginPath();
+          ctx.arc(labelX, laneY + 24, 5, 0, Math.PI * 2);
+          ctx.fill();
+          ctx.fillStyle = "rgba(240,245,255,0.95)";
+          ctx.font = "600 14px Inter, system-ui, sans-serif";
+          ctx.fillText(track.name, labelX + 14, laneY + 29);
+          const currentIntensity = intensityAt(track, cursor);
+          ctx.fillStyle = "rgba(255,255,255,0.46)";
+          ctx.font = "12px Inter, system-ui, sans-serif";
+          ctx.fillText(
+            `${Math.round(currentIntensity * 100)}%`,
+            graphLeft - 42,
+            laneY + 29
+          );
+          const points = [...track.points].sort((a, b) => a.pos - b.pos);
+          if (points.length) {
+            const xOf = (pos) => graphLeft + (clamp(pos, 0, textLength) / textLength) * graphWidth;
+            const yOf = (intensity) => graphBottom - clamp(intensity, 0, 1) * graphHeight;
+            const first = points[0];
+            const last = points[points.length - 1];
+            ctx.beginPath();
+            ctx.moveTo(xOf(first.pos), graphBottom);
+            ctx.lineTo(xOf(first.pos), yOf(first.intensity));
+            for (const p of points) {
+              ctx.lineTo(xOf(p.pos), yOf(p.intensity));
+            }
+            ctx.lineTo(xOf(last.pos), graphBottom);
             ctx.closePath();
+            ctx.fillStyle = colorFromHue(track.hue, 0.16);
             ctx.fill();
             ctx.beginPath();
+            ctx.moveTo(xOf(first.pos), yOf(first.intensity));
+            for (let j = 1; j < points.length; j++) {
+              ctx.lineTo(xOf(points[j].pos), yOf(points[j].intensity));
             }
+            ctx.strokeStyle = colorFromHue(track.hue, 0.9);
             ctx.lineWidth = 2;
             ctx.stroke();
+            for (const p of points) {
+              const px = xOf(p.pos);
+              const py = yOf(p.intensity);
+              renderMeta.points.push({
+                trackId: track.id,
+                pointId: p.id,
+                x: px,
+                y: py
+              });
+              ctx.beginPath();
+              ctx.arc(px, py, 6.4, 0, Math.PI * 2);
+              ctx.fillStyle = colorFromHue(track.hue, 1);
+              ctx.fill();
+              ctx.strokeStyle = "rgba(8,10,14,0.95)";
+              ctx.lineWidth = 1.5;
+              ctx.stroke();
             }
+          }
+        }
+      }
+      function roundRect(ctx, x, y, w, h, r) {
+        const rr = Math.min(r, w / 2, h / 2);
+        ctx.beginPath();
+        ctx.moveTo(x + rr, y);
+        ctx.arcTo(x + w, y, x + w, y + h, rr);
+        ctx.arcTo(x + w, y + h, x, y + h, rr);
+        ctx.arcTo(x, y + h, x, y, rr);
+        ctx.arcTo(x, y, x + w, y, rr);
+        ctx.closePath();
+      }
+      function getMouseInCanvas(e) {
+        const rect = timeline.getBoundingClientRect();
+        return {
+          x: e.clientX - rect.left,
+          y: e.clientY - rect.top
+        };
+      }
+      function findLaneAt(x, y) {
+        return renderMeta.lanes.find((lane) => {
+          const insideY = y >= lane.laneY && y <= lane.laneY + lane.laneH;
+          const insideX = x >= lane.graphLeft - 8 && x <= lane.graphRight + 4;
+          return insideX && insideY;
+        }) || null;
+      }
+      function findPointHit(x, y) {
+        let best = null;
+        let bestDist = Infinity;
+        for (const pt of renderMeta.points) {
+          const dx = pt.x - x;
+          const dy = pt.y - y;
+          const d = Math.sqrt(dx * dx + dy * dy);
+          if (d <= 10 && d < bestDist) {
+            best = pt;
+            bestDist = d;
+          }
+        }
+        return best;
+      }
+      function laneXToPos(lane, x) {
+        const fraction = clamp((x - lane.graphLeft) / lane.graphWidth, 0, 1);
+        return Math.round(fraction * state.text.length);
+      }
+      function laneYToIntensity(lane, y) {
+        return clamp((lane.graphBottom - y) / lane.graphHeight, 0, 1);
+      }
+      function getTrack(trackId) {
+        return state.emotions.find((t) => t.id === trackId);
+      }
+      function getPoint(track, pointId) {
+        return track.points.find((p) => p.id === pointId);
+      }
+      function addPoint(track, pos, intensity) {
+        const point = {
+          id: uid("pt"),
+          pos: clamp(Math.round(pos), 0, state.text.length),
+          intensity: clamp(intensity, 0, 1)
+        };
+        track.points.push(point);
+        track.points.sort((a, b) => a.pos - b.pos);
+        return point;
+      }
+      function onTimelineDown(e) {
+        const { x, y } = getMouseInCanvas(e);
+        const hit = findPointHit(x, y);
+        if (hit) {
+          drag = { trackId: hit.trackId, pointId: hit.pointId };
+          e.preventDefault();
+          return;
+        }
+        const lane = findLaneAt(x, y);
+        if (!lane || x < lane.graphLeft || x > lane.graphRight) return;
+        if (e.shiftKey) {
+          const pos = laneXToPos(lane, x);
+          editor.focus();
+          editor.setSelectionRange(pos, pos);
+          refreshLight();
+          return;
+        }
+        const track = getTrack(lane.trackId);
+        if (!track) return;
+        const point = addPoint(track, laneXToPos(lane, x), laneYToIntensity(lane, y));
+        drag = { trackId: track.id, pointId: point.id };
+        persistDraft();
+        refreshAll();
+        e.preventDefault();
+      }
+      function onTimelineMove(e) {
+        if (!drag) return;
+        const { x, y } = getMouseInCanvas(e);
+        const lane = renderMeta.lanes.find((l) => l.trackId === drag.trackId);
+        const track = getTrack(drag.trackId);
+        if (!lane || !track) return;
+        const point = getPoint(track, drag.pointId);
+        if (!point) return;
+        point.pos = clamp(laneXToPos(lane, x), 0, state.text.length);
+        point.intensity = clamp(laneYToIntensity(lane, y), 0, 1);
+        track.points.sort((a, b) => a.pos - b.pos);
+        refreshLight();
+      }
+      function onTimelineUp() {
+        if (!drag) return;
+        drag = null;
+        persistDraft();
+        refreshLight();
+      }
+      function deletePointAtMouse(e) {
+        const { x, y } = getMouseInCanvas(e);
+        const hit = findPointHit(x, y);
+        if (!hit) return false;
+        const track = getTrack(hit.trackId);
+        if (!track) return false;
+        track.points = track.points.filter((p) => p.id !== hit.pointId);
+        persistDraft();
+        refreshAll();
+        return true;
+      }
+      function onTimelineDoubleClick(e) {
+        if (deletePointAtMouse(e)) {
+          e.preventDefault();
+        }
+      }
+      function onTimelineContextMenu(e) {
+        if (deletePointAtMouse(e)) {
+          e.preventDefault();
+        }
+      }
+      function buildFlowForTrack(track, textLength) {
+        const pts = [...track.points]
+          .sort((a, b) => a.pos - b.pos)
+          .map((p) => ({
+            char_index: Math.round(p.pos),
+            intensity: round(clamp(p.intensity, 0, 1), 3)
+          }));
+        const anchors = [{ char_index: 0, intensity: 0 }, ...pts, { char_index: textLength, intensity: 0 }];
+        const segments = [];
+        for (let i = 0; i < anchors.length - 1; i++) {
+          const a = anchors[i];
+          const b = anchors[i + 1];
+          if (a.char_index === b.char_index && a.intensity === b.intensity) continue;
+          segments.push({
+            start_char: a.char_index,
+            end_char: b.char_index,
+            start_intensity: round(a.intensity, 3),
+            end_intensity: round(b.intensity, 3)
+          });
+        }
+        return {
+          label: track.name,
+          color: track.color,
+          points: pts,
+          segments
+        };
+      }
+      function buildEntry({ preview = false } = {}) {
+        return {
+          id: preview ? "draft_preview" : uid("entry"),
+          created_at: preview ? null : new Date().toISOString(),
+          text: state.text,
+          text_length: state.text.length,
+          emotional_flow: state.emotions
+            .map((track) => buildFlowForTrack(track, state.text.length))
+            .filter((flow) => flow.points.length > 0)
+        };
+      }
+      function renderPreview() {
+        jsonPreview.textContent = JSON.stringify(buildEntry({ preview: true }), null, 2);
+        entriesMeta.textContent = state.entries.length
+          ? `${state.entries.length} saved entr${state.entries.length === 1 ? "y" : "ies"}`
+          : "current draft preview";
+      }
+      function updateMeta() {
+        const chars = state.text.length;
+        const tracks = state.emotions.length;
+        const entries = state.entries.length;
+        const cursor = currentCursorPos();
+        metaLine.textContent = `${chars} chars • ${tracks} tracks • ${entries} saved entries`;
+        timelineMeta.textContent = `cursor ${cursor}/${chars}`;
+      }
+      function refreshAll() {
+        renderTrackBar();
+        renderActiveBar();
+        renderPreview();
+        renderTimeline();
+        updateMeta();
+      }
+      function refreshLight() {
+        renderActiveBar();
+        renderPreview();
+        renderTimeline();
+        updateMeta();
+      }
+      function saveEntry() {
+        if (!state.text.trim()) {
+          toast("Nothing to save yet.");
+          return;
+        }
+        const entry = buildEntry({ preview: false });
+        state.entries.push(entry);
+        persistEntries();
+        renderPreview();
+        updateMeta();
+        toast(`Saved entry #${state.entries.length}`);
+      }
+      function rowsForExport() {
+        if (state.entries.length) return state.entries;
+        if (state.text.trim()) return [buildEntry({ preview: false })];
+        return [];
+      }
+      function toJSONL(rows) {
+        return rows.map((r) => JSON.stringify(r)).join("\n") + "\n";
+      }
+      function generateReadme(rows) {
+        const datasetId = state.settings.datasetId || "user/distill-dataset";
+        const example = rows[0] || buildEntry({ preview: true });
+        return `---
+pretty_name: ${datasetId.split("/").pop()}
+license: other
+tags:
+- emotion
+- journaling
+- self-distillation
+- text
+---
+# ${datasetId}
+Offline-generated writing dataset with character-aligned emotional automation.
+## Description
+This dataset stores free-form writing along with custom emotion curves mapped over character offsets.
+Each emotion has control points and derived linear segments, making it suitable for studying emotional flow during writing.
+## Row schema
+- \`id\`
+- \`created_at\`
+- \`text\`
+- \`text_length\`
+- \`emotional_flow[]\`
+  - \`label\`
+  - \`color\`
+  - \`points[]\`
+    - \`char_index\`
+    - \`intensity\`
+  - \`segments[]\`
+    - \`start_char\`
+    - \`end_char\`
+    - \`start_intensity\`
+    - \`end_intensity\`
+## Number of rows
+${rows.length}
+## Example
+\`\`\`json
+${JSON.stringify(example, null, 2)}
+\`\`\`
+`;
+      }
+      function generateJinjaTemplate() {
+        return `{% set dataset_name = dataset_name | default("distill-dataset") %}
+---
+pretty_name: {{ dataset_name }}
+license: other
 tags:
+- emotion
+- journaling
 - self-distillation
+- text
 ---
+# {{ dataset_name }}
+Generated with Distill.
+## Description
+Character-aligned emotional curves layered over text.
+## Fields
+- \`id\`
+- \`created_at\`
+- \`text\`
+- \`text_length\`
+- \`emotional_flow[].label\`
+- \`emotional_flow[].points[].char_index\`
+- \`emotional_flow[].points[].intensity\`
+- \`emotional_flow[].segments[]\`
+## Example
+{% if example %}
+\`\`\`json
+{{ example | tojson(indent=2) }}
+\`\`\`
+{% endif %}
+`;
+      }
+      function generateDatasetInfos(rows, jsonl) {
+        return {
+          default: {
+            description: "Personal self-distillation dataset with custom emotional curves aligned to text offsets.",
+            citation: "",
+            homepage: "",
+            license: "",
+            features: {
+              id: { dtype: "string", _type: "Value" },
+              created_at: { dtype: "string", _type: "Value" },
+              text: { dtype: "string", _type: "Value" },
+              text_length: { dtype: "int32", _type: "Value" },
+              emotional_flow: {
+                feature: {
+                  label: { dtype: "string", _type: "Value" },
+                  color: { dtype: "string", _type: "Value" },
+                  points: {
+                    feature: {
+                      char_index: { dtype: "int32", _type: "Value" },
+                      intensity: { dtype: "float32", _type: "Value" }
+                    },
+                    _type: "Sequence"
+                  },
+                  segments: {
+                    feature: {
+                      start_char: { dtype: "int32", _type: "Value" },
+                      end_char: { dtype: "int32", _type: "Value" },
+                      start_intensity: { dtype: "float32", _type: "Value" },
+                      end_intensity: { dtype: "float32", _type: "Value" }
+                    },
+                    _type: "Sequence"
+                  }
+                },
+                _type: "Sequence"
+              }
+            },
+            splits: {
+              train: {
+                name: "train",
+                num_examples: rows.length,
+                num_bytes: new Blob([jsonl]).size
+              }
             }
+          }
+        };
+      }
+      function textFile(path, text, type = "text/plain") {
+        return {
+          path,
+          name: path.replaceAll("/", "__"),
+          type,
+          blob: new Blob([text], { type })
+        };
+      }
+      function buildExportFiles() {
+        const rows = rowsForExport();
+        if (!rows.length) throw new Error("No saved entries or draft text to export.");
+        const jsonl = toJSONL(rows);
+        const readme = generateReadme(rows);
+        const jinja = generateJinjaTemplate();
+        const datasetInfos = JSON.stringify(generateDatasetInfos(rows, jsonl), null, 2);
+        const draftPreview = JSON.stringify(buildEntry({ preview: true }), null, 2);
+        // Minimal HF-ready export package.
+        // Parquet is not included in this no-dependency single-file MVP.
+        return [
+          textFile("data/train.jsonl", jsonl, "application/json"),
+          textFile("README.md", readme, "text/markdown"),
+          textFile("card_template.jinja2", jinja, "text/plain"),
+          textFile("dataset_infos.json", datasetInfos, "application/json"),
+          textFile("draft_preview.json", draftPreview, "application/json")
+        ];
+      }
+      function downloadBlob(name, blob) {
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = name;
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        setTimeout(() => URL.revokeObjectURL(url), 500);
+      }
+      function exportFiles() {
+        try {
+          const files = buildExportFiles();
+          files.forEach((file, i) => {
+            setTimeout(() => downloadBlob(file.name, file.blob), i * 120);
+          });
+          toast("Exported HF-ready files.\n(JSONL + README + Jinja2 + dataset_infos)");
+        } catch (err) {
+          toast(err.message || "Export failed.");
+        }
+      }
+      function openSettings(show) {
+        settingsBackdrop.classList.toggle("show", !!show);
+        if (show) {
+          datasetIdInput.value = state.settings.datasetId || "";
+          tokenInput.value = state.settings.token || "";
+        }
+      }
+      function saveSettings() {
+        state.settings.datasetId = datasetIdInput.value.trim();
+        state.settings.token = tokenInput.value.trim();
+        persistSettings();
+        openSettings(false);
+        toast("Settings saved locally.");
+      }
+      function encodeRepoPath(path) {
+        return path.split("/").map(encodeURIComponent).join("/");
+      }
+      async function maybeCreateRepo(datasetId, token) {
+        const parts = datasetId.split("/");
+        if (parts.length !== 2) return;
+        const [owner, name] = parts;
+        const tries = [
+          { type: "dataset", name, organization: owner, private: false },
+          { type: "dataset", name, private: false }
+        ];
+        for (const body of tries) {
+          try {
+            const res = await fetch("https://huggingface.co/api/repos/create", {
+              method: "POST",
+              headers: {
+                "Authorization": `Bearer ${token}`,
+                "Content-Type": "application/json"
+              },
+              body: JSON.stringify(body)
+            });
+            if (res.ok || res.status === 409) return true;
+          } catch (_) {}
         }
+        return false;
+      }
+      async function uploadFileToHF(datasetId, token, file) {
+        const path = encodeRepoPath(file.path);
+        const urls = [
+          `https://huggingface.co/api/datasets/${datasetId}/upload/main/${path}`,
+          `https://huggingface.co/api/datasets/${encodeURIComponent(datasetId)}/upload/main/${path}`
+        ];
+        let lastError = "Unknown upload error.";
+        for (const url of urls) {
+          for (const method of ["POST", "PUT"]) {
+            try {
+              const res = await fetch(url, {
+                method,
+                headers: {
+                  "Authorization": `Bearer ${token}`,
+                  "Content-Type": file.type
+                },
+                body: file.blob
+              });
+              if (res.ok) return true;
+              lastError = `${method} ${url}\n${res.status} ${await safeText(res)}`;
+            } catch (err) {
+              lastError = `${method} ${url}\n${err.message || err}`;
+            }
+          }
+        }
+        throw new Error(lastError);
+      }
+      async function safeText(res) {
+        try {
+          return await res.text();
+        } catch {
+          return "";
+        }
+      }
+      async function uploadToHuggingFace() {
+        const datasetId = state.settings.datasetId;
+        const token = state.settings.token;
+        if (!datasetId || !token) {
+          openSettings(true);
+          toast("Set Dataset ID and HF token first.");
+          return;
+        }
+        let files;
+        try {
+          files = buildExportFiles();
+        } catch (err) {
+          toast(err.message || "Nothing to upload.");
+          return;
+        }
+        toast("Uploading to Hugging Face…");
+        await maybeCreateRepo(datasetId, token);
+        try {
+          for (const file of files) {
+            await uploadFileToHF(datasetId, token, file);
+          }
+          toast(`Uploaded ${files.length} files to ${datasetId}`);
+        } catch (err) {
+          toast(
+            "Upload failed.\n" +
+            (err.message || String(err)) +
+            "\n\nYou can still use Export Files and upload manually."
+          );
+        }
+      }
+      function toast(message) {
+        statusEl.textContent = message;
+        statusEl.classList.add("show");
+        clearTimeout(toastTimer);
+        toastTimer = setTimeout(() => {
+          statusEl.classList.remove("show");
+        }, 3200);
+      }
+    })();
+  </script>
 </body>
 </html>