Spaces:

djuna
/

Chat-Template-Tester

Running

App Files Files Community

djuna commited on Oct 25, 2024

Commit

2bae4ee

verified ·

1 Parent(s): 9d4f479

Update index.html

Browse files

Files changed (1) hide show

index.html +413 -19

index.html CHANGED Viewed

@@ -1,19 +1,413 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chat Template Tester</title>
+    <script src="https://mozilla.github.io/nunjucks/files/nunjucks.min.js"></script>
+    <style>
+        /* CSS Reset and Base styles */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: system-ui, -apple-system, sans-serif;
+            background-color: #f5f5f5;
+            line-height: 1.6;
+            color: #333;
+        }
+        /* Container */
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        @media (max-width: 768px) {
+            .container {
+                padding: 12px;
+            }
+        }
+        /* Typography */
+        h1 {
+            font-size: clamp(1.5rem, 4vw, 2rem);
+            margin-bottom: 1.5rem;
+            color: #333;
+        }
+        h2 {
+            font-size: clamp(1.2rem, 3vw, 1.5rem);
+            margin-bottom: 1rem;
+            color: #444;
+        }
+        /* Card Layout */
+        .card {
+            background: white;
+            padding: clamp(16px, 3vw, 24px);
+            border-radius: 12px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            margin-bottom: 20px;
+        }
+        /* Form Elements */
+        .input-group {
+            display: flex;
+            gap: 8px;
+            margin-bottom: 12px;
+        }
+        @media (max-width: 600px) {
+            .input-group {
+                flex-direction: column;
+            }
+            .input-group select,
+            .input-group input,
+            .input-group button {
+                width: 100%;
+            }
+        }
+        textarea,
+        input[type="text"],
+        select {
+            padding: 12px;
+            border: 1.5px solid #ddd;
+            border-radius: 8px;
+            font-size: 14px;
+            background: #fff;
+            transition: border-color 0.2s;
+        }
+        textarea:focus,
+        input[type="text"]:focus,
+        select:focus {
+            outline: none;
+            border-color: #4CAF50;
+        }
+        select {
+            min-width: 120px;
+        }
+        @media (max-width: 600px) {
+            select {
+                min-width: 100%;
+            }
+        }
+        textarea {
+            width: 100%;
+            min-height: 120px;
+            resize: vertical;
+            font-family: inherit;
+        }
+        /* Buttons */
+        button {
+            background-color: #4CAF50;
+            color: white;
+            padding: 12px 20px;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 500;
+            transition: all 0.2s;
+            white-space: nowrap;
+        }
+        button:hover {
+            background-color: #45a049;
+            transform: translateY(-1px);
+        }
+        button:active {
+            transform: translateY(0);
+        }
+        button.secondary {
+            background-color: #6c757d;
+        }
+        button.danger {
+            background-color: #dc3545;
+        }
+        button.small {
+            padding: 6px 12px;
+            font-size: 13px;
+        }
+        /* Messages Section */
+        .message {
+            background-color: #f8f9fa;
+            padding: 16px;
+            border-radius: 8px;
+            margin-bottom: 12px;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            flex-wrap: wrap;
+        }
+        @media (max-width: 600px) {
+            .message {
+                flex-direction: column;
+                align-items: stretch;
+            }
+        }
+        .message-content {
+            flex-grow: 1;
+            min-width: 200px;
+            word-break: break-word;
+        }
+        .message strong {
+            color: #495057;
+            margin-right: 8px;
+            display: inline-block;
+        }
+        .message-actions {
+            display: flex;
+            gap: 6px;
+            flex-wrap: wrap;
+        }
+        @media (max-width: 600px) {
+            .message-actions {
+                justify-content: flex-end;
+                margin-top: 8px;
+            }
+        }
+        /* Configuration section */
+        .config-group {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            margin-bottom: 16px;
+            flex-wrap: wrap;
+        }
+        @media (max-width: 600px) {
+            .config-group {
+                flex-direction: column;
+                align-items: stretch;
+            }
+        }
+        /* Output section */
+        #output {
+            white-space: pre-wrap;
+            background-color: #f8f9fa;
+            padding: 16px;
+            border-radius: 8px;
+            font-family: monospace;
+            border: 1.5px solid #ddd;
+            overflow-x: auto;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+        /* Checkbox styling */
+        .checkbox-wrapper {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        input[type="checkbox"] {
+            width: 16px;
+            height: 16px;
+        }
+        /* Loading state */
+        .loading {
+            opacity: 0.7;
+            pointer-events: none;
+        }
+        /* Focus styles for accessibility */
+        :focus-visible {
+            outline: 2px solid #4CAF50;
+            outline-offset: 2px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Chat Template Tester</h1>
+        <div class="card">
+            <h2>Messages</h2>
+            <div class="input-group">
+                <select id="role">
+                    <option value="user">User</option>
+                    <option value="assistant">Assistant</option>
+                    <option value="system">System</option>
+                </select>
+                <input type="text" id="content" placeholder="Type your message here..." style="flex-grow: 1">
+                <button onclick="addMessage()">Add Message</button>
+            </div>
+            <div id="messages"></div>
+        </div>
+        <div class="card">
+            <h2>Configuration</h2>
+            <div class="config-group">
+                <div class="checkbox-wrapper">
+                    <input type="checkbox" id="addGenerationPrompt">
+                    <label for="addGenerationPrompt">Add Generation Prompt</label>
+                </div>
+                <div class="input-group" style="margin-bottom: 0; flex-grow: 1;">
+                    <input type="text" id="bosToken" placeholder="BOS Token (e.g., <s>)" style="flex-grow: 1;">
+                </div>
+            </div>
+            <h2>Template</h2>
+            <textarea id="template" placeholder="Enter your template here..."></textarea>
+            <button onclick="applyTemplate()" style="margin-top: 16px">Apply Template</button>
+        </div>
+        <div class="card">
+            <h2>Output</h2>
+            <pre id="output"></pre>
+        </div>
+    </div>
+    <script>
+        let messages = [];
+        let editingIndex = null;
+        function addMessage() {
+            const role = document.getElementById('role').value;
+            const content = document.getElementById('content').value;
+            if (content.trim()) {
+                messages.push({ role, content });
+                updateMessageDisplay();
+                document.getElementById('content').value = '';
+                document.getElementById('content').focus();
+            }
+        }
+        function updateMessageDisplay() {
+            const messagesDiv = document.getElementById('messages');
+            messagesDiv.innerHTML = messages.map((msg, index) => `
+                <div class="message">
+                    <div class="message-content">
+                        <strong>${msg.role}:</strong>
+                        ${editingIndex === index
+                            ? `<input type="text" id="editContent" value="${msg.content}" style="width: 100%;">`
+                            : msg.content}
+                    </div>
+                    <div class="message-actions">
+                        ${editingIndex === index
+                            ? `<button class="small" onclick="saveEdit(${index})">Save</button>`
+                            : `<button class="small secondary" onclick="editMessage(${index})">Edit</button>`}
+                        <button class="small danger" onclick="removeMessage(${index})">Remove</button>
+                        <button class="small" onclick="moveMessageUp(${index})" ${index === 0 ? 'disabled' : ''}>↑</button>
+                        <button class="small" onclick="moveMessageDown(${index})" ${index === messages.length - 1 ? 'disabled' : ''}>↓</button>
+                    </div>
+                </div>
+            `).join('');
+        }
+        function removeMessage(index) {
+            messages.splice(index, 1);
+            updateMessageDisplay();
+        }
+        function editMessage(index) {
+            editingIndex = index;
+            updateMessageDisplay();
+            setTimeout(() => {
+                const editInput = document.getElementById('editContent');
+                if (editInput) {
+                    editInput.focus();
+                    editInput.select();
+                }
+            }, 0);
+        }
+        function saveEdit(index) {
+            const newContent = document.getElementById('editContent').value;
+            if (newContent.trim()) {
+                messages[index].content = newContent;
+                editingIndex = null;
+                updateMessageDisplay();
+            }
+        }
+        function moveMessageUp(index) {
+            if (index > 0) {
+                [messages[index - 1], messages[index]] = [messages[index], messages[index - 1]];
+                updateMessageDisplay();
+            }
+        }
+        function moveMessageDown(index) {
+            if (index < messages.length - 1) {
+                [messages[index], messages[index + 1]] = [messages[index + 1], messages[index]];
+                updateMessageDisplay();
+            }
+        }
+        function applyTemplate() {
+            const template = document.getElementById('template').value;
+            const addGenerationPrompt = document.getElementById('addGenerationPrompt').checked;
+            const bosToken = document.getElementById('bosToken').value;
+            const context = {
+                messages: messages,
+                add_generation_prompt: addGenerationPrompt,
+                bos_token: bosToken,
+            };
+            try {
+                document.getElementById('output').parentElement.classList.add('loading');
+                const result = nunjucks.renderString(template, context);
+                const decodedResult = result.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&');
+                document.getElementById('output').textContent = decodedResult;
+            } catch (error) {
+                document.getElementById('output').textContent = `Error: ${error.message}`;
+            } finally {
+                document.getElementById('output').parentElement.classList.remove('loading');
+            }
+        }
+        // Keyboard shortcuts and accessibility
+        document.addEventListener('keydown', function(e) {
+            // Add message on Enter in the content input
+            if (e.target.id === 'content' && e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                addMessage();
+            }
+            // Save edit on Enter in the edit input
+            if (e.target.id === 'editContent' && e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                saveEdit(editingIndex);
+            }
+            // Cancel edit on Escape
+            if (e.key === 'Escape' && editingIndex !== null) {
+                editingIndex = null;
+                updateMessageDisplay();
+            }
+        });
+        // Initialize
+        updateMessageDisplay();
+    </script>
+</body>
+</html>