Spaces:

wop
/

Dataset-edit-visual

Running

App Files Files Community

wop commited on Feb 27

Commit

e6e185b

verified ·

1 Parent(s): e540ed7

Update index.html

Browse files

Files changed (1) hide show

index.html +88 -88

index.html CHANGED Viewed

@@ -6,7 +6,7 @@
     <title>Amber Chat Visualizer</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
-        /* Custom Yellow Grayscale Palette */
         :root {
             --amber-50: #fffbeb;
             --amber-100: #fef3c7;
@@ -17,13 +17,13 @@
             --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;
         }
@@ -65,18 +65,18 @@
 <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>
@@ -88,27 +88,27 @@
     <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>
@@ -120,7 +120,7 @@
             "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." }
             ]
         };
@@ -161,84 +161,84 @@
             // 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>

     <title>Amber Chat Visualizer</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
+        /* Softer Amber Palette */
         :root {
             --amber-50: #fffbeb;
             --amber-100: #fef3c7;
             --amber-600: #d97706;
             --amber-700: #b45309;
             --amber-800: #92400e;
+            --amber-900: #453a2a; /* Softer dark brown */
+            --amber-950: #30251a; /* Softer deep brown */
         }
         body {
+            background-color: #f8f5f0; /* Light cream background */
+            color: #5d4e37; /* Soft brown text */
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
         }
 <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-200/50 bg-white shadow-sm">
         <div class="flex items-center space-x-3">
+            <div class="bg-amber-100 p-2 rounded-lg">
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-amber-600" 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-700">Amber Chat <span class="text-amber-500 font-light">Visualizer</span></h1>
         </div>
+        <div class="flex items-center gap-4 text-xs font-mono text-amber-600">
             <span class="hidden sm:inline">JSON + VISUAL SYNC</span>
+            <button onclick="copyJson()" class="p-2 hover:bg-amber-100 rounded-full transition-colors text-amber-600">
                 <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>
     <main class="main-container flex-1 flex overflow-hidden">
         <!-- Editor Panel -->
+        <section class="panel w-1/2 flex flex-col bg-white/60 border-r border-amber-200/30">
+            <div class="px-4 py-2 bg-white/80 border-b border-amber-200/30 flex justify-between items-center">
+                <span class="text-[10px] font-mono uppercase tracking-widest text-amber-600">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-700 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-50/50 custom-scrollbar">
             <!-- Bubbles injected here -->
         </section>
     </main>
     <!-- Footer -->
+    <footer class="h-10 border-t border-amber-200/30 flex items-center justify-between px-6 bg-white text-[10px] uppercase tracking-widest text-amber-600">
         <div>Click text to edit visually</div>
+        <div>Soft Amber Mode</div>
     </footer>
     <script>
             "messages": [
                 { "role": "system", "content": "You are a helpful assistant." },
                 { "role": "user", "content": "Tell me about this yellow theme." },
+                { "role": "assistant", "content": "This is a soft amber theme. By using warmer tones and reducing contrast, it aims to be much easier on your eyes during long coding sessions." }
             ]
         };
             // 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-600' : 'text-amber-500'}`;
             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-200 text-amber-900 rounded-br-none font-medium'
                 : isSystem
+                    ? 'bg-amber-100/50 border border-amber-200/50 text-amber-700 italic text-center w-full max-w-none text-sm'
+                    : 'bg-white border border-amber-200/50 text-amber-800 rounded-bl-none';
+            body.className = `max-w-[90%] md:max-w-[85%] rounded-2xl px-5 py-3 shadow-sm ${bubbleClasses}`;
             // Handle thought tags
             const content = msg.content || "";
+            const thinkMatch = content.match([\s\S]?)</think>/);
+              const thoughtText = thinkMatch ? thinkMatch[1] : "";
+const cleanText = content.replace(/[\s\S]?</think>/, '').trim();
+if (isAssistant || thoughtText) {
+const details = document.createElement('details');
+details.open = !!thoughtText;
+details.className = 'mb-3 bg-amber-50/50 rounded-lg border border-amber-200/50 overflow-hidden';
+const summary = document.createElement('summary');
+summary.className = 'cursor-pointer p-2 text-[10px] font-bold text-amber-600 hover:bg-amber-100/50 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-600/70 border-t border-amber-200/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(/[\s\S]*?<\/think>/, '').trim();
+msg.content = `${value}
+${cleanPart}`;
+} else if (field === 'content') {
+const currentContent = msg.content || "";
+const thinkMatch = currentContent.match([\s\S]*?)</think>/);
+  const thinkPart = thinkMatch ? `${thinkMatch[1]}` : "";
+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>