Spaces:

wop
/

Dataset-edit-visual

Running

App Files Files Community

wop commited on Feb 27

Commit

e540ed7

verified ·

1 Parent(s): b259315

Update index.html

Browse files

Files changed (1) hide show

index.html +244 -19

index.html CHANGED Viewed

@@ -1,19 +1,244 @@
-<!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>Amber Chat Visualizer</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        /* Custom Yellow Grayscale Palette */
+        :root {
+            --amber-50: #fffbeb;
+            --amber-100: #fef3c7;
+            --amber-200: #fde68a;
+            --amber-300: #fcd34d;
+            --amber-400: #fbbf24;
+            --amber-500: #f59e0b;
+            --amber-600: #d97706;
+            --amber-700: #b45309;
+            --amber-800: #92400e;
+            --amber-900: #78350f;
+            --amber-950: #1a1405; /* Deep warm black */
+        }
+        body {
+            background-color: var(--amber-950);
+            color: var(--amber-200);
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+        }
+        .custom-scrollbar::-webkit-scrollbar {
+            width: 6px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb {
+            background: rgba(245, 158, 11, 0.2);
+            border-radius: 10px;
+        }
+        .editable:focus {
+            outline: none;
+            border-bottom: 1px solid var(--amber-500);
+            background: rgba(245, 158, 11, 0.1);
+        }
+        /* Logic for mobile/desktop layout */
+        .main-container {
+            height: calc(100vh - 100px);
+        }
+        @media (max-width: 768px) {
+            .main-container {
+                flex-direction: column;
+                overflow-y: auto;
+            }
+            .panel {
+                height: 500px;
+                width: 100% !important;
+                flex-shrink: 0;
+            }
+        }
+    </style>
+</head>
+<body class="flex flex-col h-screen overflow-hidden">
+    <!-- Header -->
+    <header class="flex items-center justify-between px-6 py-4 border-b border-amber-900/50 bg-amber-950 shadow-lg">
+        <div class="flex items-center space-x-3">
+            <div class="bg-amber-500/20 p-2 rounded-lg">
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
+                </svg>
+            </div>
+            <h1 class="text-xl font-bold tracking-tight text-amber-400">Amber Chat <span class="text-amber-700 font-light">Visualizer</span></h1>
+        </div>
+        <div class="flex items-center gap-4 text-xs font-mono text-amber-700">
+            <span class="hidden sm:inline">JSON + VISUAL SYNC</span>
+            <button onclick="copyJson()" class="p-2 hover:bg-amber-500/10 rounded-full transition-colors text-amber-500">
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
+                </svg>
+            </button>
+        </div>
+    </header>
+    <!-- Main Content -->
+    <main class="main-container flex-1 flex overflow-hidden">
+        <!-- Editor Panel -->
+        <section class="panel w-1/2 flex flex-col bg-black/40 border-r border-amber-900/30">
+            <div class="px-4 py-2 bg-amber-950/80 border-b border-amber-900/30 flex justify-between items-center">
+                <span class="text-[10px] font-mono uppercase tracking-widest text-amber-700">source.json</span>
+                <span id="json-error" class="text-[10px] text-red-500 hidden">Invalid JSON</span>
+            </div>
+            <textarea id="json-editor"
+                class="flex-1 p-6 bg-transparent text-amber-500 font-mono text-sm outline-none resize-none custom-scrollbar"
+                spellcheck="false"></textarea>
+        </section>
+        <!-- Preview Panel -->
+        <section id="chat-preview" class="panel w-1/2 overflow-y-auto p-6 md:p-12 bg-amber-950/20 custom-scrollbar">
+            <!-- Bubbles injected here -->
+        </section>
+    </main>
+    <!-- Footer -->
+    <footer class="h-10 border-t border-amber-900/30 flex items-center justify-between px-6 bg-amber-950 text-[10px] uppercase tracking-widest text-amber-800">
+        <div>Click text to edit visually</div>
+        <div>Grayscale Yellow Tint Mode</div>
+    </footer>
+    <script>
+        const jsonEditor = document.getElementById('json-editor');
+        const chatPreview = document.getElementById('chat-preview');
+        const errorLabel = document.getElementById('json-error');
+        let data = {
+            "messages": [
+                { "role": "system", "content": "You are a helpful assistant." },
+                { "role": "user", "content": "Tell me about this yellow theme." },
+                { "role": "assistant", "content": "<think>The user is noticing the monochrome amber palette. I should explain that it's designed for focus and health.</think>This is a yellow-tint grayscale theme. By removing blue light and focusing on amber tones, it aims to be much easier on your eyes during long coding sessions." }
+            ]
+        };
+        // Initialize
+        jsonEditor.value = JSON.stringify(data, null, 2);
+        renderChat();
+        // Listen for JSON changes
+        jsonEditor.addEventListener('input', (e) => {
+            try {
+                const parsed = JSON.parse(e.target.value);
+                if (parsed.messages && Array.isArray(parsed.messages)) {
+                    data = parsed;
+                    renderChat();
+                    errorLabel.classList.add('hidden');
+                }
+            } catch (err) {
+                errorLabel.classList.remove('hidden');
+            }
+        });
+        function renderChat() {
+            chatPreview.innerHTML = '';
+            data.messages.forEach((msg, index) => {
+                const bubble = createBubble(msg, index);
+                chatPreview.appendChild(bubble);
+            });
+        }
+        function createBubble(msg, index) {
+            const isUser = msg.role.toLowerCase() === 'user';
+            const isAssistant = msg.role.toLowerCase() === 'assistant';
+            const isSystem = msg.role.toLowerCase() === 'system';
+            const container = document.createElement('div');
+            container.className = `flex flex-col mb-8 w-full ${isUser ? 'items-end' : 'items-start'}`;
+            // Role label
+            const label = document.createElement('div');
+            label.contentEditable = true;
+            label.className = `text-[10px] font-bold uppercase tracking-widest mb-1 px-1 outline-none ${isUser ? 'text-amber-400' : 'text-amber-700'}`;
+            label.innerText = msg.role;
+            label.onblur = (e) => updateData(index, 'role', e.target.innerText);
+            // Bubble body
+            const body = document.createElement('div');
+            const bubbleClasses = isUser
+                ? 'bg-amber-600 text-amber-950 rounded-br-none font-medium'
+                : isSystem
+                    ? 'bg-amber-900/20 border border-amber-900/50 text-amber-600 italic text-center w-full max-w-none text-sm'
+                    : 'bg-amber-900/40 border border-amber-800/50 text-amber-100 rounded-bl-none';
+            body.className = `max-w-[90%] md:max-w-[85%] rounded-2xl px-5 py-3 shadow-lg ${bubbleClasses}`;
+            // Handle thought tags
+            const content = msg.content || "";
+            const thinkMatch = content.match(/<think>([\s\S]*?)<\/think>/);
+            const thoughtText = thinkMatch ? thinkMatch[1] : "";
+            const cleanText = content.replace(/<think>[\s\S]*?<\/think>/, '').trim();
+            if (isAssistant || thoughtText) {
+                const details = document.createElement('details');
+                details.open = !!thoughtText;
+                details.className = 'mb-3 bg-black/30 rounded-lg border border-amber-900/50 overflow-hidden';
+                const summary = document.createElement('summary');
+                summary.className = 'cursor-pointer p-2 text-[10px] font-bold text-amber-700 hover:bg-amber-500/5 flex items-center select-none outline-none';
+                summary.innerHTML = `<span class="mr-1">▶</span> THOUGHT PROCESS`;
+                const thoughtDiv = document.createElement('div');
+                thoughtDiv.contentEditable = true;
+                thoughtDiv.className = 'p-3 text-xs text-amber-500/70 border-t border-amber-900/50 outline-none leading-relaxed';
+                thoughtDiv.innerText = thoughtText;
+                thoughtDiv.onblur = (e) => updateData(index, 'thought', e.target.innerText);
+                details.appendChild(summary);
+                details.appendChild(thoughtDiv);
+                body.appendChild(details);
+            }
+            const mainText = document.createElement('div');
+            mainText.contentEditable = true;
+            mainText.className = 'outline-none whitespace-pre-wrap leading-relaxed text-sm md:text-base';
+            mainText.innerText = cleanText;
+            mainText.onblur = (e) => updateData(index, 'content', e.target.innerText);
+            body.appendChild(mainText);
+            container.appendChild(label);
+            container.appendChild(body);
+            return container;
+        }
+        function updateData(index, field, value) {
+            const msg = data.messages[index];
+            if (field === 'role') {
+                msg.role = value;
+            } else if (field === 'thought') {
+                const currentContent = msg.content || "";
+                const cleanPart = currentContent.replace(/<think>[\s\S]*?<\/think>/, '').trim();
+                msg.content = `<think>${value}</think>${cleanPart}`;
+            } else if (field === 'content') {
+                const currentContent = msg.content || "";
+                const thinkMatch = currentContent.match(/<think>([\s\S]*?)<\/think>/);
+                const thinkPart = thinkMatch ? `<think>${thinkMatch[1]}</think>` : "";
+                msg.content = thinkPart + value;
+            }
+            jsonEditor.value = JSON.stringify(data, null, 2);
+        }
+        function copyJson() {
+            jsonEditor.select();
+            document.execCommand('copy');
+            const btn = document.querySelector('button[onclick="copyJson()"]');
+            const original = btn.innerHTML;
+            btn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>`;
+            setTimeout(() => btn.innerHTML = original, 2000);
+        }
+    </script>
+</body>
+</html>