API tools faq
paste
Guest User

Chat Log Viewer for LM Studio 0.3.x

a guest
Oct 28th, 2024
83
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.98 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Chat Log Viewer for 0.3.x</title>
  7.     <style>
  8.         body {
  9.             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  10.             margin: 0;
  11.             padding: 20px;
  12.             background-color: #0a0a0a; /* Darker background */
  13.             color: #e0e0e0; /* Lighter text color */
  14.         }
  15.         h3 {
  16.             color: #ffffff; /* Header color */
  17.             text-align: center; /* Centered header */
  18.         }
  19.         .container {
  20.             width: 60%; /* Default container width */
  21.             margin: auto; /* Center the container */
  22.             transition: width 0.3s; /* Smooth transition for width change */
  23.         }
  24.         .header-container {
  25.             display: flex;
  26.             justify-content: space-between; /* Space between items */
  27.             align-items: center;
  28.             margin-bottom: 20px;
  29.             padding: 10px;
  30.             background-color: #1c1c1c; /* Header background */
  31.             border-radius: 8px;
  32.         }
  33.         .dropdown-container {
  34.             display: flex;
  35.             align-items: center; /* Align elements */
  36.             gap: 15px; /* Space between elements */
  37.         }
  38.         .dropdown-left {
  39.             margin-right: auto; /* Pushes this dropdown to the left */
  40.         }
  41.         #chat {
  42.             background-color: #1b1b26;
  43.             border: 1px solid #444;
  44.             border-radius: 8px;
  45.             padding: 20px;
  46.             max-height: 1000px;
  47.             overflow-y: auto;
  48.             margin-top: 20px;
  49.             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  50.         }
  51.         .message {
  52.             margin: 15px 0;
  53.             padding: 15px;
  54.             border-radius: 10px;
  55.             color: #ECECEC;
  56.             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  57.         }
  58.         .user {
  59.             background-color: #1E1D1F; /* User message background */
  60.         }
  61.         .assistant {
  62.             background-color: #152031; /* Assistant message background */
  63.         }
  64.         .message-content {
  65.             margin-left: 10px;
  66.         }
  67.  
  68.         #model-name, #system-prompt, #file-name {
  69.             color: #bbb;
  70.             margin-top: 10px;
  71.             background-color: #1b1b26;
  72.             padding: 10px;
  73.             border-radius: 5px;
  74.             text-align: center; /* Center text */
  75.         }
  76.         select {
  77.             padding: 5px;
  78.             border-radius: 5px;
  79.             background-color: #333; /* Dropdown background */
  80.             color: #fff; /* Dropdown text color */
  81.             border: 1px solid #444; /* Dropdown border color */
  82.         }
  83.         input[type="text"] {
  84.             padding: 5px;
  85.             border-radius: 5px;
  86.             border: 1px solid #444; /* Input border color */
  87.             background-color: #333; /* Input background */
  88.             color: #fff; /* Input text color */
  89.             display: none; /* Hidden by default */
  90.         }
  91.     </style>
  92. </head>
  93. <body>
  94.  
  95. <div class="container" id="container">
  96.     <h3>Chat Log Viewer</h3>
  97.  
  98.     <div class="header-container">
  99.         <div class="dropdown-container">
  100.             <label for="width-select">Width:</label>
  101.             <select id="width-select">
  102.                 <option value="30">30%</option>
  103.                 <option value="40">40%</option>
  104.                 <option value="50">50%</option>
  105.                 <option value="60" selected>60%</option>
  106.                 <option value="70">70%</option>
  107.                 <option value="80">80%</option>
  108.                 <option value="90">90%</option>
  109.                 <option value="100">100%</option>
  110.             </select>
  111.         </div>
  112.  
  113.         <div class="dropdown-container">
  114.             <label for="user-select">User:</label>
  115.             <select id="user-select" onchange="toggleUserInput()">
  116.                 <option value="YourName" selected>YourName</option>
  117.                 <option value="Human">Human</option>
  118.                 <option value="User">User</option>
  119.                 <option value="Other">Other</option>
  120.             </select>
  121.             <input type="text" id="user-input" placeholder="Enter custom name" oninput="updateUserName()" />
  122.  
  123.             <label for="assistant-select">Assistant:</label>
  124.             <select id="assistant-select" onchange="toggleAssistantInput()">
  125.                 <option value="Assistant">Assistant</option>
  126.                 <option value="Robot" selected>Robot</option>
  127.                 <option value="Teacher">Teacher</option>
  128.                 <option value="Other">Other</option>
  129.             </select>
  130.             <input type="text" id="assistant-input" placeholder="Enter custom name" oninput="updateAssistantName()" />
  131.         </div>
  132.  
  133.         <input type="file" id="file-input" accept=".json" />
  134.     </div>
  135.  
  136.     <div id="file-name"></div> <!-- New div for the name from JSON -->
  137.     <div id="model-name"></div>
  138.     <div id="system-prompt"></div>
  139.     <div id="chat"></div>
  140. </div>
  141.  
  142. <script>
  143.     function convertNewLinesToHTML(text) {
  144.         let formattedText = text.replace(/\n{2,}/g, '<br><br>');
  145.         formattedText = formattedText.replace(/\n/g, '<br>');
  146.         return formattedText;
  147.     }
  148.  
  149.     document.getElementById('file-input').addEventListener('change', (event) => {
  150.         const file = event.target.files[0];
  151.  
  152.         if (!file) {
  153.             alert("Please select a JSON file.");
  154.             return;
  155.         }
  156.  
  157.         const reader = new FileReader();
  158.         reader.onload = function(event) {
  159.             try {
  160.                 const chatData = JSON.parse(event.target.result);
  161.                 displayChat(chatData.messages);
  162.  
  163.                 // Extracting name from JSON
  164.                 const fileName = chatData.name || "No Name Found";
  165.                 document.getElementById('file-name').innerText = `File Name: ${fileName}`; // Display the name
  166.  
  167.                 const lastMessage = chatData.messages[chatData.messages.length - 1];
  168.                 const modelName = lastMessage.versions[0].steps[0].genInfo?.indexedModelIdentifier || "Unknown Model";
  169.                 const fields = chatData.perChatPredictionConfig?.fields;
  170.  
  171.                 const systemPromptField = fields?.find(field => field.key === "llm.prediction.systemPrompt");
  172.                 const systemPrompt = systemPromptField ? systemPromptField.value : "No System Prompt Found";
  173.  
  174.                 displayModelInfo(modelName, systemPrompt);
  175.             } catch (error) {
  176.                 alert("Error parsing JSON: " + error.message);
  177.             }
  178.         };
  179.         reader.readAsText(file);
  180.     });
  181.  
  182.     function displayChat(messages) {
  183.         const chatContainer = document.getElementById('chat');
  184.         chatContainer.innerHTML = ''; // Clear previous messages
  185.  
  186.         const userName = document.getElementById('user-select').value === 'Other'
  187.             ? document.getElementById('user-input').value
  188.             : document.getElementById('user-select').value;
  189.  
  190.         const assistantName = document.getElementById('assistant-select').value === 'Other'
  191.             ? document.getElementById('assistant-input').value
  192.             : document.getElementById('assistant-select').value;
  193.  
  194.         messages.forEach(messageObj => {
  195.             const message = messageObj.versions[0]; // Get the first version
  196.             const role = message.role; // Get the role (user/assistant)
  197.             let content = '';
  198.  
  199.             if (role === 'user' && message.content) {
  200.                content = message.content.map(item => item.text).join(' ');
  201.             } else if (role === 'assistant' && message.steps) {
  202.                content = message.steps.map(step =>
  203.                    step.content ? step.content.map(item => item.text).join(' ') : ''
  204.                ).join(' ').trim();
  205.             }
  206.  
  207.             if (content) {
  208.                 const messageDiv = document.createElement('div');
  209.                 messageDiv.className = `message ${role}`;
  210.                 const displayName = role === 'user' ? userName : assistantName;
  211.                 messageDiv.innerHTML = `<strong>${displayName}:</strong> <span class="message-content">${convertNewLinesToHTML(content)}</span>`;
  212.                 chatContainer.appendChild(messageDiv);
  213.             }
  214.         });
  215.     }
  216.  
  217.     function displayModelInfo(modelName, systemPrompt) {
  218.         document.getElementById('model-name').innerText = `Model Name: ${modelName}`;
  219.         document.getElementById('system-prompt').innerText = `System Prompt: ${systemPrompt}`;
  220.     }
  221.  
  222.     // Event listener for width selection
  223.     document.getElementById('width-select').addEventListener('change', (event) => {
  224.         const width = event.target.value;
  225.         document.getElementById('container').style.width = `${width}%`;
  226.     });
  227.  
  228.     // Toggle User input visibility
  229.     function toggleUserInput() {
  230.         const userSelect = document.getElementById('user-select');
  231.         const userInput = document.getElementById('user-input');
  232.         userInput.style.display = userSelect.value === 'Other' ? 'block' : 'none';
  233.     }
  234.  
  235.     // Toggle Assistant input visibility
  236.     function toggleAssistantInput() {
  237.         const assistantSelect = document.getElementById('assistant-select');
  238.         const assistantInput = document.getElementById('assistant-input');
  239.         assistantInput.style.display = assistantSelect.value === 'Other' ? 'block' : 'none';
  240.     }
  241.  
  242.     // Update User name when typing in input
  243.     function updateUserName() {
  244.         const userInput = document.getElementById('user-input');
  245.         if (userInput.style.display === 'block') {
  246.             document.getElementById('user-select').value = 'Other'; // Ensure dropdown reflects manual entry
  247.         }
  248.     }
  249.  
  250.     // Update Assistant name when typing in input
  251.     function updateAssistantName() {
  252.         const assistantInput = document.getElementById('assistant-input');
  253.         if (assistantInput.style.display === 'block') {
  254.             document.getElementById('assistant-select').value = 'Other'; // Ensure dropdown reflects manual entry
  255.         }
  256.     }
  257.  
  258.     // Update chat display when dropdown changes
  259.     document.getElementById('user-select').addEventListener('change', () => {
  260.         document.getElementById('chat').innerHTML = ''; // Clear previous messages
  261.         loadChatData(); // Reload chat data
  262.         toggleUserInput(); // Show/hide user input
  263.     });
  264.  
  265.     document.getElementById('assistant-select').addEventListener('change', () => {
  266.         document.getElementById('chat').innerHTML = ''; // Clear previous messages
  267.         loadChatData(); // Reload chat data
  268.         toggleAssistantInput(); // Show/hide assistant input
  269.     });
  270.  
  271.     function loadChatData() {
  272.         const fileInput = document.getElementById('file-input');
  273.         const file = fileInput.files[0];
  274.  
  275.         if (file) {
  276.             const reader = new FileReader();
  277.             reader.onload = function(event) {
  278.                 try {
  279.                     const chatData = JSON.parse(event.target.result);
  280.                     displayChat(chatData.messages);
  281.                 } catch (error) {
  282.                     alert("Error parsing JSON: " + error.message);
  283.                 }
  284.             };
  285.             reader.readAsText(file);
  286.         }
  287.     }
  288.    
  289. // Update chat display on Enter key press
  290. document.getElementById('user-input').addEventListener('keydown', function(event) {
  291.     if (event.key === 'Enter') {
  292.         updateUserName(); // Update the user name
  293.         document.getElementById('chat').innerHTML = ''; // Clear previous messages
  294.         loadChatData(); // Reload chat data to reflect new name
  295.     }
  296. });
  297.  
  298. document.getElementById('assistant-input').addEventListener('keydown', function(event) {
  299.     if (event.key === 'Enter') {
  300.         updateAssistantName(); // Update the assistant name
  301.         document.getElementById('chat').innerHTML = ''; // Clear previous messages
  302.         loadChatData(); // Reload chat data to reflect new name
  303.     }
  304. });
  305.    
  306. </script>
  307.  
  308. </body>
  309. </html>
  310.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!