Spaces:

marcodsn
/

SOC_Visualizer

Running

App Files Files Community

marcodsn commited on Aug 8, 2025

Commit

bc08836

verified ·

1 Parent(s): 9eaf1c8

Update index.html

Browse files

Files changed (1) hide show

index.html +149 -26

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>JSONL Conversation Visualizer</title>
         <style>
             /* --- Reset and Global Styles --- */
             * {
@@ -55,22 +55,47 @@
             }
             .input-section h1 {
-                margin-bottom: 12px;
                 font-size: 20px;
                 font-weight: 500;
             }
             #jsonInput {
                 width: 100%;
-                height: 120px;
-                padding: 10px;
                 border: 1px solid #ccc;
                 border-radius: 2px;
                 font-family: monospace;
                 font-size: 12px;
                 resize: vertical;
             }
             #parseBtn {
                 margin-top: 8px;
                 padding: 8px 16px;
@@ -80,12 +105,19 @@
                 border-radius: 2px;
                 cursor: pointer;
                 font-size: 13px;
             }
             #parseBtn:hover {
                 background: #555;
             }
             .error {
                 color: #d73a49;
                 margin-top: 8px;
@@ -238,12 +270,31 @@
         <div class="app-container">
             <div class="sidebar">
                 <div class="input-section">
-                    <h1>JSONL Visualizer</h1>
                     <textarea
                         id="jsonInput"
-                        placeholder="Paste your JSONL data here..."
                     ></textarea>
-                    <button id="parseBtn">Parse</button>
                     <div id="error" class="error"></div>
                 </div>
                 <div class="header-info" id="headerInfo">
@@ -259,29 +310,110 @@
         </div>
         <script>
-            document
-                .getElementById("parseBtn")
-                .addEventListener("click", parseConversation);
-            function parseConversation() {
-                const input = document.getElementById("jsonInput").value.trim();
-                const errorDiv = document.getElementById("error");
-                const headerInfo = document.getElementById("headerInfo");
-                const mainContent = document.getElementById("mainContent");
                 // Reset view on each parse attempt
                 errorDiv.style.display = "none";
                 headerInfo.style.display = "none";
                 mainContent.style.display = "none";
-                if (!input) {
                     errorDiv.textContent = "Input cannot be empty.";
                     errorDiv.style.display = "block";
                     return;
                 }
                 try {
-                    const data = JSON.parse(input);
                     // Show the components on successful parse
                     headerInfo.style.display = "block";
                     mainContent.style.display = "flex"; // Use flex as it's a flex container
@@ -331,7 +463,6 @@
             }
             function renderChat(chatParts, experience) {
-                const chatArea = document.getElementById("chatArea");
                 chatArea.innerHTML = "";
                 chatParts.forEach((part) => {
@@ -407,14 +538,6 @@
                 content = content.replace(/\n/g, "<br>");
                 return content;
             }
-            document
-                .getElementById("jsonInput")
-                .addEventListener("keydown", function (e) {
-                    if (e.ctrlKey && e.key === "Enter") {
-                        parseConversation();
-                    }
-                });
         </script>
     </body>
 </html>

     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>SOC Visualizer</title>
         <style>
             /* --- Reset and Global Styles --- */
             * {
             }
             .input-section h1 {
+                margin-bottom: 16px;
                 font-size: 20px;
                 font-weight: 500;
             }
+            .input-section h2 {
+                font-size: 14px;
+                font-weight: 500;
+                margin-top: 16px;
+                margin-bottom: 8px;
+                color: #555;
+            }
+            .input-group {
+                margin-bottom: 12px;
+            }
+            .input-group label {
+                display: block;
+                font-size: 13px;
+                margin-bottom: 4px;
+            }
+            .input-group select,
             #jsonInput {
                 width: 100%;
+                padding: 8px;
                 border: 1px solid #ccc;
                 border-radius: 2px;
+                font-size: 13px;
+                background-color: #fff;
+            }
+            #jsonInput {
+                height: 120px;
                 font-family: monospace;
                 font-size: 12px;
                 resize: vertical;
             }
+            #loadBtn,
             #parseBtn {
                 margin-top: 8px;
                 padding: 8px 16px;
                 border-radius: 2px;
                 cursor: pointer;
                 font-size: 13px;
+                width: 100%;
             }
+            #loadBtn:hover,
             #parseBtn:hover {
                 background: #555;
             }
+            #loadBtn:disabled {
+                background: #ccc;
+                cursor: not-allowed;
+            }
             .error {
                 color: #d73a49;
                 margin-top: 8px;
         <div class="app-container">
             <div class="sidebar">
                 <div class="input-section">
+                    <h1>SOC Visualizer</h1>
+                    <div class="input-group">
+                        <label for="fileSelector">1. Select a file</label>
+                        <select id="fileSelector">
+                            <option value="">-- Choose a file --</option>
+                        </select>
+                    </div>
+                    <div class="input-group">
+                        <label for="lineSelector">2. Select a conversation</label>
+                        <select id="lineSelector" disabled></select>
+                    </div>
+                    <button id="loadBtn" disabled>Load Conversation</button>
+                    <hr style="margin: 24px 0" />
+                    <h2>Or Paste Manually</h2>
                     <textarea
                         id="jsonInput"
+                        placeholder="Paste a single JSON conversation object here..."
                     ></textarea>
+                    <button id="parseBtn">Parse Manual Input</button>
                     <div id="error" class="error"></div>
                 </div>
                 <div class="header-info" id="headerInfo">
         </div>
         <script>
+            // --- VIRTUAL FILE SYSTEM ---
+            // In a real application, you would fetch these files.
+            // For this tool, simply add your JSONL file content here.
+            // Each key is a filename, and the value is the file's content as a string.
+            // Each line in the string must be a complete, valid JSON object.
+            const virtualFiles = {
+                "soc_sample_1.jsonl": `{ "experience": { "persona1": { "id": "p1", "name": "Alex", "age": 28, "traits": ["tech-savvy", "impatient", "witty"], "background": "Software developer who loves sci-fi movies.", "chatting_style": "Uses short sentences and a lot of tech jargon." }, "persona2": { "id": "p2", "name": "Ben", "age": 30, "traits": ["patient", "thoughtful", "curious"], "background": "Librarian who enjoys classic literature.", "chatting_style": "Writes in full paragraphs and asks many questions." }, "relationship": "Friends", "situation": "Discussing a new movie they both saw.", "topic": "Movie review" }, "chat_parts": [ { "sender": "p1", "messages": ["Did you see 'Galaxy Runners'? The CGI was insane."] }, { "sender": "p2", "messages": ["I did! I found the plot to be a bit derivative of older films, though. What did you think of the story itself?"] }, { "sender": "p1", "messages": ["Story? lol who cares. The FTL jumps looked amazing.", "And that scene with the alien armada... <gif>mind_blown.gif</gif>"] }, { "sender": "p2", "messages": ["Haha, fair enough. The visual spectacle was certainly its strong suit. I just wish they had spent more time developing the main character's motivations."] } ] }
+{ "experience": { "persona1": { "id": "p1", "name": "Chloe", "age": 22, "traits": ["energetic", "loves food", "uses emojis"], "background": "Culinary student exploring new cafes.", "chatting_style": "Very casual, lots of emojis and slang." }, "persona2": { "id": "p2", "name": "David", "age": 24, "traits": ["calm", "methodical", "minimalist"], "background": "Architecture student who prefers quiet places.", "chatting_style": "Concise and to the point." }, "relationship": "Siblings", "situation": "Making plans for the weekend.", "topic": "Weekend plans" }, "chat_parts": [ { "sender": "p1", "messages": ["heyyyy!! what r u up to this weekend? 🤩"] }, { "sender": "p2", "messages": ["Not much. Probably finishing up my model for studio."] }, { "sender": "p1", "messages": ["omg nooo you have to come with me to this new brunch place downtown! 🥞🧇🥑", "the pics look amazing!! <image>brunch_spread.jpg</image>"] }, { "sender": "p2", "messages": ["Hah, looks intense. Maybe. What time?"] }, { "sender": "p1", "messages": ["11am! be there or be square! 😉"] } ] }`,
+                "soc_sample_2.jsonl": `{ "experience": { "persona1": { "id": "p1", "name": "Sarah", "age": 45, "traits": ["organized", "caring", "formal"], "background": "Project manager and mother of two.", "chatting_style": "Proper grammar and punctuation, plans everything." }, "persona2": { "id": "p2", "name": "Tom", "age": 46, "traits": ["forgetful", "easy-going", "humorous"], "background": "Graphic designer who works from home.", "chatting_style": "Casual, uses ellipses, often cracks jokes." }, "relationship": "Married Couple", "situation": "Coordinating grocery shopping.", "topic": "Groceries" }, "chat_parts": [ { "sender": "p1", "messages": ["Hi honey, I'm heading to the store after work. I've shared the updated grocery list with you. Please take a look."] }, { "sender": "p2", "messages": ["Hey! ok will check... pretty sure we still have milk tho?"] }, { "sender": "p1", "messages": ["The kids finished it this morning. Please double-check the list for quantities. I don't want to forget the baking soda for Maya's science project again."] }, { "sender": "p2", "messages": ["oops right! science fair volcano... classic.", "got it. list looks good. grab me some of those fancy chips? 🙏", "the sea salt and vinegar ones"] } ] }`,
+            };
+            // --- END VIRTUAL FILE SYSTEM ---
+            // --- DOM Elements ---
+            const fileSelector = document.getElementById("fileSelector");
+            const lineSelector = document.getElementById("lineSelector");
+            const loadBtn = document.getElementById("loadBtn");
+            const parseBtn = document.getElementById("parseBtn");
+            const jsonInput = document.getElementById("jsonInput");
+            const errorDiv = document.getElementById("error");
+            const headerInfo = document.getElementById("headerInfo");
+            const mainContent = document.getElementById("mainContent");
+            const chatArea = document.getElementById("chatArea");
+            // --- Event Listeners ---
+            document.addEventListener("DOMContentLoaded", initialize);
+            fileSelector.addEventListener("change", handleFileSelection);
+            loadBtn.addEventListener("click", loadSelectedConversation);
+            parseBtn.addEventListener("click", parseManualInput);
+            jsonInput.addEventListener("keydown", function (e) {
+                if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
+                    parseManualInput();
+                }
+            });
+            // --- Functions ---
+            function initialize() {
+                // Populate the file selector on page load
+                Object.keys(virtualFiles).forEach((filename) => {
+                    const option = document.createElement("option");
+                    option.value = filename;
+                    option.textContent = filename;
+                    fileSelector.appendChild(option);
+                });
+            }
+            function handleFileSelection() {
+                const selectedFile = fileSelector.value;
+                lineSelector.innerHTML = ""; // Clear previous options
+                if (selectedFile) {
+                    const content = virtualFiles[selectedFile];
+                    const lines = content.split("\n").filter((line) => line.trim() !== "");
+                    lines.forEach((line, index) => {
+                        const option = document.createElement("option");
+                        option.value = index;
+                        // Try to parse to get a topic for a better label
+                        try {
+                           const data = JSON.parse(line);
+                           option.textContent = `Conversation ${index + 1}: ${data.experience.topic}`;
+                        } catch (e) {
+                           option.textContent = `Conversation ${index + 1}`;
+                        }
+                        lineSelector.appendChild(option);
+                    });
+                    lineSelector.disabled = false;
+                    loadBtn.disabled = false;
+                } else {
+                    lineSelector.disabled = true;
+                    loadBtn.disabled = true;
+                }
+            }
+            function loadSelectedConversation() {
+                const fileName = fileSelector.value;
+                const lineIndex = lineSelector.value;
+                if (fileName && lineIndex !== null) {
+                    const content = virtualFiles[fileName];
+                    const lines = content.split("\n");
+                    const jsonString = lines[lineIndex];
+                    processAndRender(jsonString);
+                }
+            }
+            function parseManualInput() {
+                const jsonString = jsonInput.value.trim();
+                processAndRender(jsonString);
+            }
+            function processAndRender(jsonString) {
                 // Reset view on each parse attempt
                 errorDiv.style.display = "none";
                 headerInfo.style.display = "none";
                 mainContent.style.display = "none";
+                if (!jsonString) {
                     errorDiv.textContent = "Input cannot be empty.";
                     errorDiv.style.display = "block";
                     return;
                 }
                 try {
+                    const data = JSON.parse(jsonString);
                     // Show the components on successful parse
                     headerInfo.style.display = "block";
                     mainContent.style.display = "flex"; // Use flex as it's a flex container
             }
             function renderChat(chatParts, experience) {
                 chatArea.innerHTML = "";
                 chatParts.forEach((part) => {
                 content = content.replace(/\n/g, "<br>");
                 return content;
             }
         </script>
     </body>
 </html>