Spaces:

victor
/

trimmer

Running

App Files Files

victor HF Staff commited on 27 days ago

Commit

d3fe503

0 Parent(s):

Add message trimmer demo with real WildChat conversations

Browse files

Files changed (1) hide show

index.html +516 -0

index.html ADDED Viewed

	@@ -0,0 +1,516 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Message Trimmer Demo - WildChat Conversations</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            padding: 20px;
+            min-height: 100vh;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+            overflow: hidden;
+        }
+        header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 30px;
+            text-align: center;
+        }
+        h1 {
+            font-size: 2em;
+            margin-bottom: 10px;
+        }
+        .subtitle {
+            opacity: 0.9;
+            font-size: 0.95em;
+        }
+        .controls {
+            padding: 25px 30px;
+            background: #f8f9fa;
+            border-bottom: 1px solid #e9ecef;
+        }
+        .control-group {
+            margin-bottom: 20px;
+        }
+        .control-group:last-child {
+            margin-bottom: 0;
+        }
+        label {
+            display: block;
+            font-weight: 600;
+            margin-bottom: 8px;
+            color: #495057;
+            font-size: 0.9em;
+        }
+        input[type="range"] {
+            width: 100%;
+            height: 6px;
+            border-radius: 3px;
+            background: #dee2e6;
+            outline: none;
+            -webkit-appearance: none;
+        }
+        input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            background: #667eea;
+            cursor: pointer;
+        }
+        input[type="range"]::-moz-range-thumb {
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            background: #667eea;
+            cursor: pointer;
+            border: none;
+        }
+        .value-display {
+            display: inline-block;
+            background: #667eea;
+            color: white;
+            padding: 4px 12px;
+            border-radius: 12px;
+            font-size: 0.85em;
+            font-weight: 600;
+            margin-left: 10px;
+        }
+        select {
+            width: 100%;
+            padding: 10px;
+            border: 2px solid #dee2e6;
+            border-radius: 6px;
+            font-size: 0.95em;
+            background: white;
+            cursor: pointer;
+        }
+        select:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+        .conversation {
+            padding: 30px;
+        }
+        .message {
+            margin-bottom: 30px;
+            animation: fadeIn 0.3s ease-in;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .message-header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 12px;
+            gap: 10px;
+        }
+        .role-badge {
+            padding: 6px 14px;
+            border-radius: 20px;
+            font-size: 0.75em;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        .role-user {
+            background: #e7f5ff;
+            color: #1971c2;
+        }
+        .role-assistant {
+            background: #f3f0ff;
+            color: #5f3dc4;
+        }
+        .char-count {
+            font-size: 0.75em;
+            color: #868e96;
+            font-weight: 500;
+        }
+        .message-content {
+            background: #f8f9fa;
+            padding: 20px;
+            border-radius: 8px;
+            border-left: 4px solid #dee2e6;
+            position: relative;
+        }
+        .message-user .message-content {
+            border-left-color: #1971c2;
+        }
+        .message-assistant .message-content {
+            border-left-color: #5f3dc4;
+        }
+        .original {
+            margin-bottom: 15px;
+            padding-bottom: 15px;
+            border-bottom: 2px dashed #dee2e6;
+        }
+        .trimmed {
+            background: #fff3bf;
+            padding: 15px;
+            border-radius: 6px;
+            border: 2px solid #ffd43b;
+        }
+        .section-label {
+            font-size: 0.7em;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            color: #495057;
+            margin-bottom: 8px;
+        }
+        .trimmed .section-label {
+            color: #e67700;
+        }
+        .content-text {
+            line-height: 1.6;
+            color: #212529;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+        }
+        .stats {
+            margin-top: 10px;
+            padding: 10px;
+            background: rgba(255,255,255,0.7);
+            border-radius: 4px;
+            font-size: 0.8em;
+            color: #495057;
+        }
+        .stats strong {
+            color: #212529;
+        }
+        .reduction {
+            color: #e67700;
+            font-weight: 600;
+        }
+        .code-reference {
+            background: #f8f9fa;
+            border: 1px solid #dee2e6;
+            border-radius: 6px;
+            padding: 20px;
+            margin: 20px 30px;
+            font-family: 'Monaco', 'Menlo', monospace;
+            font-size: 0.85em;
+            line-height: 1.6;
+        }
+        .code-reference h3 {
+            margin-bottom: 15px;
+            color: #495057;
+            font-size: 1em;
+        }
+        .code-line {
+            color: #212529;
+            margin: 4px 0;
+        }
+        .comment {
+            color: #6c757d;
+        }
+        button {
+            background: #667eea;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 0.9em;
+            font-weight: 600;
+            margin-top: 10px;
+        }
+        button:hover {
+            background: #5568d3;
+        }
+        .info-box {
+            background: #e7f5ff;
+            border: 2px solid #1971c2;
+            border-radius: 8px;
+            padding: 20px;
+            margin: 20px 30px;
+        }
+        .info-box h3 {
+            color: #1971c2;
+            margin-bottom: 10px;
+            font-size: 1em;
+        }
+        .info-box p {
+            color: #495057;
+            line-height: 1.6;
+            font-size: 0.9em;
+        }
+        .no-trim {
+            background: #d3f9d8;
+            padding: 15px;
+            border-radius: 6px;
+            border: 2px solid #51cf66;
+        }
+        .no-trim .section-label {
+            color: #2b8a3e;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>Message Trimmer Demo</h1>
+            <p class="subtitle">Demonstrating trim functions on real WildChat-1M conversations</p>
+        </header>
+        <div class="info-box">
+            <h3>About This Demo</h3>
+            <p>
+                This demo shows how the <strong>trimMiddle()</strong> function works in the LLM router architecture.
+                The function trims messages by keeping the start (60%) and end (40%) with a clear
+                <strong>[... CONTENT TRIMMED ...]</strong> indicator in between,
+                reducing token count while preserving context for intent classification.
+                Adjust the max length sliders below to see how different messages are trimmed.
+            </p>
+        </div>
+        <div class="controls">
+            <div class="control-group">
+                <label>
+                    Max Assistant Message Length: <span class="value-display" id="assistantLengthValue">500</span>
+                </label>
+                <input type="range" id="assistantLength" min="50" max="1000" value="500" step="10">
+            </div>
+            <div class="control-group">
+                <label>
+                    Max Previous User Message Length: <span class="value-display" id="userLengthValue">400</span>
+                </label>
+                <input type="range" id="userLength" min="50" max="1000" value="400" step="10">
+            </div>
+            <div class="control-group">
+                <label>Select Conversation:</label>
+                <select id="conversationSelect">
+                    <option value="0">Loading conversations...</option>
+                </select>
+            </div>
+        </div>
+        <div class="code-reference">
+            <h3>Implementation (from src/lib/server/router/arch.ts)</h3>
+            <div class="code-line"><span class="comment">// Trim assistant messages to reduce routing prompt size</span></div>
+            <div class="code-line">if (m.role === "assistant") {</div>
+            <div class="code-line">&nbsp;&nbsp;return { ...m, content: trimMiddle(m.content, maxAssistantLength) };</div>
+            <div class="code-line">}</div>
+            <div class="code-line"></div>
+            <div class="code-line"><span class="comment">// Trim previous user messages (latest preserved)</span></div>
+            <div class="code-line">if (m.role === "user" && idx !== lastUserIndex) {</div>
+            <div class="code-line">&nbsp;&nbsp;return { ...m, content: trimMiddle(m.content, maxPrevUserLength) };</div>
+            <div class="code-line">}</div>
+        </div>
+        <div id="conversationDisplay" class="conversation">
+            <p style="text-align: center; color: #868e96;">Loading conversations...</p>
+        </div>
+    </div>
+    <script>
+        // Implementation of trimMiddle function from arch.ts
+        function trimMiddle(content, maxLength) {
+            if (content.length <= maxLength) return content;
+            const indicator = " [... CONTENT TRIMMED ...] ";
+            const availableLength = maxLength - indicator.length;
+            if (availableLength <= 0) {
+                return content.slice(0, maxLength);
+            }
+            // Reserve more space for the start (60%)
+            const startLength = Math.ceil(availableLength * 0.6);
+            const endLength = availableLength - startLength;
+            if (endLength <= 0) {
+                return content.slice(0, availableLength) + indicator;
+            }
+            const start = content.slice(0, startLength);
+            const end = content.slice(-endLength);
+            return start + indicator + end;
+        }
+        // Fetch and store conversations
+        let conversations = [];
+        async function loadConversations() {
+            try {
+                const response = await fetch('https://datasets-server.huggingface.co/rows?dataset=allenai%2FWildChat-1M&config=default&split=train&offset=0&length=100');
+                const data = await response.json();
+                // Filter for conversations with multiple turns
+                conversations = data.rows
+                    .filter(row => row.row.conversation && row.row.conversation.length >= 2)
+                    .map(row => row.row.conversation)
+                    .slice(0, 20); // Take first 20 conversations
+                populateConversationSelect();
+                displayConversation(0);
+            } catch (error) {
+                console.error('Error loading conversations:', error);
+                document.getElementById('conversationDisplay').innerHTML =
+                    '<p style="text-align: center; color: #dc3545;">Error loading conversations. Please refresh the page.</p>';
+            }
+        }
+        function populateConversationSelect() {
+            const select = document.getElementById('conversationSelect');
+            select.innerHTML = conversations.map((conv, idx) => {
+                const preview = conv[0].content.slice(0, 60).replace(/\n/g, ' ');
+                return `<option value="${idx}">Conversation ${idx + 1}: ${preview}...</option>`;
+            }).join('');
+        }
+        function displayConversation(index) {
+            const conversation = conversations[index];
+            if (!conversation) return;
+            const assistantLength = parseInt(document.getElementById('assistantLength').value);
+            const userLength = parseInt(document.getElementById('userLength').value);
+            const lastUserIndex = conversation.map((m, idx) => ({ idx, role: m.role }))
+                .reverse()
+                .find(m => m.role === 'user')?.idx ?? -1;
+            let html = '';
+            conversation.forEach((message, idx) => {
+                const isUser = message.role === 'user';
+                const isLastUser = idx === lastUserIndex;
+                const content = message.content;
+                let trimmed = content;
+                let shouldTrim = false;
+                // Apply trimming logic
+                if (message.role === 'assistant') {
+                    trimmed = trimMiddle(content, assistantLength);
+                    shouldTrim = content.length > assistantLength;
+                } else if (message.role === 'user' && !isLastUser) {
+                    trimmed = trimMiddle(content, userLength);
+                    shouldTrim = content.length > userLength;
+                }
+                const reductionPercent = shouldTrim ?
+                    (((content.length - trimmed.length) / content.length) * 100).toFixed(1) : 0;
+                html += `
+                    <div class="message message-${message.role}">
+                        <div class="message-header">
+                            <span class="role-badge role-${message.role}">${message.role}</span>
+                            <span class="char-count">${content.length} characters</span>
+                            ${isLastUser ? '<span class="char-count" style="color: #2b8a3e; font-weight: 600;">★ Latest user message - preserved</span>' : ''}
+                        </div>
+                        <div class="message-content">
+                            <div class="original">
+                                <div class="section-label">Original</div>
+                                <div class="content-text">${escapeHtml(content)}</div>
+                            </div>
+                            <div class="${shouldTrim ? 'trimmed' : 'no-trim'}">
+                                <div class="section-label">${shouldTrim ? 'Trimmed for Router' : 'No Trimming Required'}</div>
+                                <div class="content-text">${escapeHtml(trimmed)}</div>
+                                ${shouldTrim ? `
+                                    <div class="stats">
+                                        <strong>Original:</strong> ${content.length} chars |
+                                        <strong>Trimmed:</strong> ${trimmed.length} chars |
+                                        <span class="reduction">Reduced by ${reductionPercent}%</span>
+                                    </div>
+                                ` : ''}
+                            </div>
+                        </div>
+                    </div>
+                `;
+            });
+            document.getElementById('conversationDisplay').innerHTML = html;
+        }
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+        // Event listeners
+        document.getElementById('assistantLength').addEventListener('input', (e) => {
+            document.getElementById('assistantLengthValue').textContent = e.target.value;
+            const selectedIndex = parseInt(document.getElementById('conversationSelect').value);
+            displayConversation(selectedIndex);
+        });
+        document.getElementById('userLength').addEventListener('input', (e) => {
+            document.getElementById('userLengthValue').textContent = e.target.value;
+            const selectedIndex = parseInt(document.getElementById('conversationSelect').value);
+            displayConversation(selectedIndex);
+        });
+        document.getElementById('conversationSelect').addEventListener('change', (e) => {
+            displayConversation(parseInt(e.target.value));
+        });
+        // Initialize
+        loadConversations();
+    </script>
+</body>
+</html>