Spaces:

wop
/

Dataset-edit-visual

Running

App Files Files Community

wop commited on Feb 27

Commit

dd73a3e

verified ·

1 Parent(s): e6e185b

Update index.html

Browse files

Files changed (1) hide show

index.html +242 -228

index.html CHANGED Viewed

@@ -1,244 +1,258 @@
 <!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>
-        /* Softer Amber 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: #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;
-        }
-        .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-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>
-            </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-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>
-        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": "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." }
-            ]
-        };
-        // 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-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>

 <!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 — Dark Theme</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<style>
+  /* Dark Amber Palette */
+  :root {
+    --bg-dark: #1a1a1a; /* deep gray background */
+    --bg-panel: #2a2a2a; /* panels slightly lighter */
+    --amber-light: #f0c04a; /* soft amber highlight */
+    --amber-muted: #d9b54a; /* for subtle accents */
+    --text-light: #e0e0e0; /* main text */
+    --text-muted: #b0a074; /* secondary text */
+    --border: rgba(240,192,74,0.15);
+    --scroll-thumb: rgba(240,192,74,0.25);
+    --bubble-user: rgba(240,192,74,0.15);
+    --bubble-assistant: rgba(255,255,255,0.05);
+    --bubble-system: rgba(240,192,74,0.08);
+  }
+  body {
+    background-color: var(--bg-dark);
+    color: var(--text-light);
+    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: var(--scroll-thumb);
+    border-radius: 10px;
+  }
+  .editable:focus {
+    outline: none;
+    background: rgba(240,192,74,0.05);
+    border-bottom: 1px solid var(--amber-light);
+  }
+  .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; }
+  }
+  header, footer {
+    background: rgba(30,30,30,0.9);
+    border-color: var(--border);
+    backdrop-filter: blur(6px);
+  }
+  .panel {
+    background: var(--bg-panel);
+    border-color: var(--border);
+  }
+  /* Chat bubbles */
+  .bubble-user {
+    background: var(--bubble-user);
+    color: var(--text-light);
+    border-radius: 16px;
+    padding: 0.75rem 1.25rem;
+    max-width: 90%;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
+  }
+  .bubble-assistant {
+    background: var(--bubble-assistant);
+    color: var(--text-light);
+    border-radius: 16px;
+    padding: 0.75rem 1.25rem;
+    max-width: 90%;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  }
+  .bubble-system {
+    background: var(--bubble-system);
+    color: var(--amber-muted);
+    font-style: italic;
+    border-left: 3px solid var(--amber-muted);
+    padding-left: 12px;
+    border-radius: 6px;
+  }
+  /* Thought boxes */
+  .thought-box {
+    background: rgba(240,192,74,0.05);
+    border: 1px solid var(--border);
+    padding: 8px;
+    border-radius: 8px;
+  }
+  details > summary {
+    cursor: pointer;
+    padding: 4px;
+    font-size: 10px;
+    font-weight: bold;
+    color: var(--amber-light);
+    list-style: none;
+  }
+  details > summary::-webkit-details-marker { display: none; }
+</style>
 </head>
 <body class="flex flex-col h-screen overflow-hidden">
+<header class="flex items-center justify-between px-6 py-4 border-b shadow-sm">
+  <div class="flex items-center space-x-3">
+    <div class="p-2 rounded-lg bg-amber-light/20">
+      <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-amber-light" 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" style="color:var(--amber-light)">Amber Chat <span class="text-amber-muted font-light">Visualizer</span></h1>
+  </div>
+  <div class="flex items-center gap-4 text-xs font-mono text-amber-muted">
+    <span class="hidden sm:inline">JSON + VISUAL SYNC</span>
+    <button onclick="copyJson()" class="p-2 hover:bg-amber-light/10 rounded-full transition-colors">
+      <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-2"/>
+      </svg>
+    </button>
+  </div>
+</header>
+<main class="main-container flex-1 flex overflow-hidden">
+  <section class="panel w-1/2 flex flex-col border-r">
+    <div class="px-4 py-2 bg-transparent border-b flex justify-between items-center">
+      <span class="text-[10px] font-mono uppercase tracking-widest text-amber-muted">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-light font-mono text-sm outline-none resize-none custom-scrollbar" spellcheck="false"></textarea>
+  </section>
+  <section id="chat-preview" class="panel w-1/2 overflow-y-auto p-6 md:p-12 custom-scrollbar">
+    <!-- bubbles injected -->
+  </section>
+</main>
+<footer class="h-10 flex items-center justify-between px-6 border-t text-[10px] uppercase tracking-widest text-amber-muted">
+  <div>Click text to edit visually</div>
+  <div>Dark Amber 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 dark theme."},
+    { "role":"assistant","content":"<think>The user wants a calmer dark version.</think>This is a dark amber theme: deep charcoal backgrounds, soft amber highlights, low-contrast bubbles for comfortable nighttime reading."}
+  ]
+};
+jsonEditor.value = JSON.stringify(data,null,2);
+renderChat();
+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,i)=>{ chatPreview.appendChild(createBubble(msg,i)); });
 }
+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-6 w-full ${isUser?'items-end':'items-start'}`;
+  const label=document.createElement('div');
+  label.contentEditable=true;
+  label.className='text-[10px] font-semibold uppercase tracking-widest mb-1 px-1 outline-none';
+  label.style.color=isUser?'var(--amber-light)':'var(--amber-muted)';
+  label.innerText=msg.role;
+  label.onblur=(e)=>updateData(index,'role',e.target.innerText);
+  const body=document.createElement('div');
+  let bubbleClass='';
+  if(isUser) bubbleClass='bubble-user';
+  else if(isSystem) bubbleClass='bubble-system';
+  else bubbleClass='bubble-assistant';
+  body.className=bubbleClass;
+  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='thought-box';
+    const summary=document.createElement('summary');
+    summary.innerHTML='<span class="mr-2">▶</span> THOUGHT PROCESS';
+    const thoughtDiv=document.createElement('div');
+    thoughtDiv.contentEditable=true;
+    thoughtDiv.className='p-2 text-xs';
+    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';
+  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 current=msg.content||"";
+    const clean=current.replace(/<think>[\s\S]*?<\/think>/,'').trim();
+    msg.content=`<think>${value}</think>${clean}`;
+  }
+  else if(field==='content'){
+    const current=msg.content||"";
+    const thinkMatch=current.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 orig=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=orig,1400);
 }
+</script>
+</body>
 </html>