| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Qwen3 Session Analysis</title> |
| | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| | <style> |
| | * { |
| | margin: 0; |
| | padding: 0; |
| | box-sizing: border-box; |
| | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| | } |
| | |
| | body { |
| | background: linear-gradient(135deg, #f09333 0%, #f5576c 100%); |
| | min-height: 100vh; |
| | display: flex; |
| | justify-content: center; |
| | align-items: center; |
| | padding: 20px; |
| | } |
| | |
| | .container { |
| | display: flex; |
| | flex-direction: column; |
| | align-items: center; |
| | max-width: 1200px; |
| | width: 100%; |
| | gap: 30px; |
| | } |
| | |
| | .header { |
| | text-align: center; |
| | color: white; |
| | text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); |
| | padding: 15px; |
| | } |
| | |
| | .header h1 { |
| | font-size: 2.5rem; |
| | margin-bottom: 10px; |
| | } |
| | |
| | .header p { |
| | font-size: 1.1rem; |
| | opacity: 0.9; |
| | } |
| | |
| | .smartphone { |
| | width: 350px; |
| | height: 700px; |
| | background: #ff8c00; |
| | border-radius: 40px; |
| | padding: 20px; |
| | box-shadow: |
| | 0 15px 35px rgba(0, 0, 0, 0.3), |
| | inset 0 -5px 15px rgba(255, 255, 255, 0.2), |
| | inset 0 5px 15px rgba(0, 0, 0, 0.1); |
| | position: relative; |
| | border: 8px solid #333; |
| | overflow: hidden; |
| | } |
| | |
| | |
| | .smartphone::before { |
| | content: ''; |
| | position: absolute; |
| | top: 0; |
| | left: 50%; |
| | transform: translateX(-50%); |
| | width: 180px; |
| | height: 25px; |
| | background: #333; |
| | border-radius: 0 0 15px 15px; |
| | z-index: 10; |
| | } |
| | |
| | .screen { |
| | width: 100%; |
| | height: 100%; |
| | background: #fff9eb; |
| | border-radius: 25px; |
| | overflow: hidden; |
| | display: flex; |
| | flex-direction: column; |
| | position: relative; |
| | } |
| | |
| | .screen-header { |
| | background: linear-gradient(to right, #ff8c00, #ff6b35); |
| | color: white; |
| | padding: 15px 20px; |
| | text-align: center; |
| | font-weight: bold; |
| | font-size: 1.2rem; |
| | box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); |
| | } |
| | |
| | .chat-container { |
| | flex: 1; |
| | padding: 20px; |
| | overflow-y: auto; |
| | display: flex; |
| | flex-direction: column; |
| | gap: 15px; |
| | } |
| | |
| | .message { |
| | max-width: 80%; |
| | padding: 12px 15px; |
| | border-radius: 20px; |
| | position: relative; |
| | animation: fadeIn 0.3s ease-out; |
| | } |
| | |
| | @keyframes fadeIn { |
| | from { opacity: 0; transform: translateY(10px); } |
| | to { opacity: 1; transform: translateY(0); } |
| | } |
| | |
| | .user-message { |
| | background: #ff8c00; |
| | color: white; |
| | align-self: flex-end; |
| | border-bottom-right-radius: 5px; |
| | } |
| | |
| | .assistant-message { |
| | background: #f0f0f0; |
| | color: #333; |
| | align-self: flex-start; |
| | border-bottom-left-radius: 5px; |
| | } |
| | |
| | .message-header { |
| | font-size: 0.8rem; |
| | opacity: 0.7; |
| | margin-bottom: 5px; |
| | } |
| | |
| | .message-content { |
| | line-height: 1.4; |
| | } |
| | |
| | .code-block { |
| | background: #2d2d2d; |
| | color: #f8f8f2; |
| | padding: 12px; |
| | border-radius: 8px; |
| | font-family: 'Courier New', monospace; |
| | font-size: 0.9rem; |
| | overflow-x: auto; |
| | margin-top: 10px; |
| | white-space: pre-wrap; |
| | } |
| | |
| | .check-bubble { |
| | background: #4CAF50; |
| | color: white; |
| | width: 50px; |
| | height: 50px; |
| | border-radius: 50%; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | font-size: 1.8rem; |
| | align-self: flex-end; |
| | margin-top: 10px; |
| | animation: bounce 0.5s ease; |
| | } |
| | |
| | @keyframes bounce { |
| | 0%, 100% { transform: scale(1); } |
| | 50% { transform: scale(1.1); } |
| | } |
| | |
| | .input-area { |
| | padding: 15px 20px; |
| | border-top: 1px solid #e0e0e0; |
| | display: flex; |
| | gap: 10px; |
| | background: white; |
| | } |
| | |
| | .send-button { |
| | background: #ff8c00; |
| | color: white; |
| | border: none; |
| | width: 50px; |
| | height: 50px; |
| | border-radius: 50%; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | font-size: 1.3rem; |
| | cursor: pointer; |
| | transition: all 0.2s; |
| | box-shadow: 0 4px 8px rgba(255, 140, 0, 0.3); |
| | } |
| | |
| | .send-button:hover { |
| | background: #ff6b35; |
| | transform: translateY(-2px); |
| | box-shadow: 0 6px 12px rgba(255, 140, 0, 0.4); |
| | } |
| | |
| | .send-button:active { |
| | transform: translateY(1px); |
| | box-shadow: 0 2px 4px rgba(255, 140, 0, 0.3); |
| | } |
| | |
| | .instructions { |
| | background: rgba(255, 255, 255, 0.9); |
| | border-radius: 15px; |
| | padding: 20px; |
| | max-width: 600px; |
| | text-align: center; |
| | box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| | margin-top: 10px; |
| | } |
| | |
| | .instructions h3 { |
| | color: #ff6b35; |
| | margin-bottom: 10px; |
| | } |
| | |
| | .highlight { |
| | color: #ff6b35; |
| | font-weight: bold; |
| | } |
| | |
| | .analysis-output { |
| | background: white; |
| | border-radius: 15px; |
| | padding: 25px; |
| | max-width: 800px; |
| | width: 100%; |
| | box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); |
| | margin-top: 10px; |
| | display: none; |
| | animation: slideUp 0.5s ease-out; |
| | } |
| | |
| | @keyframes slideUp { |
| | from { opacity: 0; transform: translateY(20px); } |
| | to { opacity: 1; transform: translateY(0); } |
| | } |
| | |
| | .analysis-output.active { |
| | display: block; |
| | } |
| | |
| | .output-header { |
| | color: #ff6b35; |
| | border-bottom: 2px solid #ff8c00; |
| | padding-bottom: 10px; |
| | margin-bottom: 20px; |
| | display: flex; |
| | align-items: center; |
| | gap: 10px; |
| | } |
| | |
| | .output-header i { |
| | font-size: 1.5rem; |
| | } |
| | |
| | .metric-card { |
| | background: #fff9f0; |
| | border-radius: 10px; |
| | padding: 15px; |
| | margin-bottom: 15px; |
| | border-left: 4px solid #ff8c00; |
| | } |
| | |
| | .metric-title { |
| | font-weight: bold; |
| | color: #ff6b35; |
| | margin-bottom: 5px; |
| | } |
| | |
| | .metric-value { |
| | font-size: 1.2rem; |
| | font-weight: bold; |
| | color: #333; |
| | } |
| | |
| | @media (max-width: 768px) { |
| | .smartphone { |
| | width: 320px; |
| | height: 650px; |
| | } |
| | |
| | .header h1 { |
| | font-size: 2rem; |
| | } |
| | } |
| | </style> |
| | </head> |
| | <body> |
| | <div class="container"> |
| | <div class="header"> |
| | <h1>Qwen3 Session Analysis Output</h1> |
| | <p>Click the send button on the orange smartphone to view the session analysis</p> |
| | </div> |
| | |
| | <div class="smartphone"> |
| | <div class="screen"> |
| | <div class="screen-header"> |
| | Qwen3 Coder Next - Session Analysis |
| | </div> |
| | |
| | <div class="chat-container" id="chatContainer"> |
| | <div class="message user-message"> |
| | <div class="message-header">User Prompt</div> |
| | <div class="message-content">Write a Python function to check if a string is a palindrome:</div> |
| | </div> |
| | |
| | <div class="message assistant-message"> |
| | <div class="message-header">Qwen3 Response</div> |
| | <div class="message-content">A string that reads the same backward as forward, e.g., madam or abba.</div> |
| | <div class="code-block">def is_palindrome(s): |
| | s = s.lower() |
| | return s == s[::-1]</div> |
| | </div> |
| | |
| | |
| | </div> |
| | |
| | <div class="input-area"> |
| | <button class="send-button" id="sendButton"> |
| | <i class="fas fa-paper-plane"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="instructions"> |
| | <h3>How It Works</h3> |
| | <p>Click the <span class="highlight">orange send button</span> above to trigger the Qwen3 session analysis. A check mark emoji (✅) will appear in a second chat bubble, and the detailed analysis will be displayed below.</p> |
| | </div> |
| | |
| | <div class="analysis-output" id="analysisOutput"> |
| | <div class="output-header"> |
| | <i class="fas fa-chart-bar"></i> |
| | <h2>Qwen3 Session Analysis - Detailed Output</h2> |
| | </div> |
| | |
| | <div class="metric-card"> |
| | <div class="metric-title">Timestamp</div> |
| | <div class="metric-value">2026-02-09T12:05:00.240048</div> |
| | </div> |
| | |
| | <div class="metric-card"> |
| | <div class="metric-title">Mode</div> |
| | <div class="metric-value">test</div> |
| | </div> |
| | |
| | <div class="metric-card"> |
| | <div class="metric-title">Model Path</div> |
| | <div class="metric-value">./qwen3-coder-next-mlx</div> |
| | </div> |
| | |
| | <div class="metric-card"> |
| | <div class="metric-title">Performance Metrics</div> |
| | <div class="metric-value">Total Time: 5.10 seconds</div> |
| | <div class="metric-value">Tokens Generated: 360</div> |
| | <div class="metric-value">Tokens/Second: 70.59</div> |
| | </div> |
| | |
| | <div class="metric-card"> |
| | <div class="metric-title">Session Summary</div> |
| | <div class="metric-value">Total Conversations: 1</div> |
| | <div class="metric-value">Total User Messages: 0</div> |
| | <div class="metric-value">Total Assistant Messages: 0</div> |
| | <p style="margin-top: 10px; color: #666;">Note: The analysis script shows 0 messages due to the JSONL structure storing the entire interaction as a single object rather than individual message entries.</p> |
| | </div> |
| | |
| | <div class="metric-card"> |
| | <div class="metric-title">Response Preview</div> |
| | <p style="margin-top: 8px; line-height: 1.5;">The assistant provided a comprehensive Python function to check for palindromes, including both a basic case-insensitive version and an enhanced version that ignores non-alphanumeric characters using regular expressions.</p> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <script> |
| | document.getElementById('sendButton').addEventListener('click', function() { |
| | const chatContainer = document.getElementById('chatContainer'); |
| | const analysisOutput = document.getElementById('analysisOutput'); |
| | |
| | |
| | const checkBubble = document.createElement('div'); |
| | checkBubble.className = 'check-bubble'; |
| | checkBubble.innerHTML = '✅'; |
| | chatContainer.appendChild(checkBubble); |
| | |
| | |
| | analysisOutput.classList.add('active'); |
| | |
| | |
| | analysisOutput.scrollIntoView({ behavior: 'smooth' }); |
| | |
| | |
| | const smartphone = document.querySelector('.smartphone'); |
| | smartphone.style.transform = 'translateY(-5px)'; |
| | setTimeout(() => { |
| | smartphone.style.transform = 'translateY(0)'; |
| | }, 100); |
| | |
| | |
| | this.disabled = true; |
| | this.innerHTML = '<i class="fas fa-check"></i>'; |
| | this.style.background = '#4CAF50'; |
| | this.style.boxShadow = '0 4px 8px rgba(76, 175, 80, 0.3)'; |
| | }); |
| | </script> |
| | </body> |
| | </html> |
