Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="Test and simulate conversations with your VTuber AI"> | |
| <title>Response Tester - VTuber AI Manager</title> | |
| <link rel="stylesheet" href="css/main.css"> | |
| <link rel="stylesheet" href="css/components.css"> | |
| </head> | |
| <body> | |
| <nav class="sidebar" role="navigation" aria-label="Main navigation"> | |
| <div class="logo"> | |
| <span class="logo-icon">🎭</span> | |
| VTuber AI Manager | |
| </div> | |
| <ul> | |
| <li><a href="index.html">Dashboard</a></li> | |
| <li><a href="personality-config.html">Personality</a></li> | |
| <li><a href="response-tester.html" class="active">Response Tester</a></li> | |
| <li><a href="analytics.html">Analytics</a></li> | |
| <li><a href="settings.html">Settings</a></li> | |
| </ul> | |
| <div class="sidebar-footer"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with"> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| </nav> | |
| <main class="main-content"> | |
| <header> | |
| <h1>Conversation Simulator</h1> | |
| </header> | |
| <div class="tester-layout"> | |
| <!-- Chat Interface --> | |
| <section class="chat-simulator"> | |
| <div class="chat-messages" id="chat-messages"> | |
| <div class="message ai"> | |
| <div class="message-avatar">🤖</div> | |
| <div class="message-content"> | |
| Hello! I'm your VTuber AI assistant. How can I help you today? | |
| </div> | |
| </div> | |
| </div> | |
| <div class="chat-input-area"> | |
| <input type="text" id="user-input" placeholder="Type your message..." | |
| aria-label="Message input"> | |
| <button id="send-message" class="btn-primary">Send</button> | |
| <button id="clear-chat" class="btn-secondary">Clear</button> | |
| </div> | |
| <!-- Latency Display --> | |
| <div class="latency-display"> | |
| <span>Last Response Time: <strong id="response-time">--ms</strong></span> | |
| </div> | |
| </section> | |
| <!-- Performance Metrics --> | |
| <aside class="metrics-panel"> | |
| <h3>Performance Metrics</h3> | |
| <div class="metric-item"> | |
| <label>Average Latency:</label> | |
| <span id="avg-latency">--ms</span> | |
| </div> | |
| <div class="metric-item"> | |
| <label>Min Latency:</label> | |
| <span id="min-latency">--ms</span> | |
| </div> | |
| <div class="metric-item"> | |
| <label>Max Latency:</label> | |
| <span id="max-latency">--ms</span> | |
| </div> | |
| <div class="metric-item"> | |
| <label>Total Messages:</label> | |
| <span id="total-messages">0</span> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="latency-chart"></canvas> | |
| </div> | |
| <h3>Test Scenarios</h3> | |
| <div class="scenario-buttons"> | |
| <button class="scenario-btn" data-scenario="greeting">👋 Greeting</button> | |
| <button class="scenario-btn" data-scenario="emotion">💝 Emotional Support</button> | |
| <button class="scenario-btn" data-scenario="humor">😄 Humor Test</button> | |
| <button class="scenario-btn" data-scenario="technical">💻 Technical Question</button> | |
| </div> | |
| </aside> | |
| </div> | |
| </main> | |
| <script src="js/response-tester.js"></script> | |
| </body> | |
| </html> |