DavidL72Code/UMB_Sustainable_Chatbot
0
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>SSL Chatbot Dashboard</title>7 <link rel="preconnect" href="https://fonts.googleapis.com">8 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>9 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lora:wght@600;700&display=swap" rel="stylesheet">10 <link rel="stylesheet" href="/static/dashboard.css?v=bea1aaa">11 <script>12 const defaultApiBase = "";13 const dashboardParams = new URLSearchParams(window.location.search);14 const storedBase = (() => {15 try {16 return window.localStorage.getItem("ssl_api_base") || "";17 } catch {18 return "";19 }20 })();21 window.API_BASE = (dashboardParams.get("api_base") || storedBase || window.API_BASE || defaultApiBase).replace(/\/+$/, "");22 </script>23</head>24<body>25 <header class="dashboard-header">26 <div class="dashboard-header-inner">27 <img28 src="/static/umb-logo.svg"29 alt="UMass Boston"30 class="dashboard-umb-logo"31 >32 <div class="dashboard-logo">33 <span class="dashboard-logo-name">Sustainable Solutions Lab</span>34 <span class="dashboard-logo-tagline">Chatbot Dashboard</span>35 </div>36 <nav class="header-actions" aria-label="Dashboard navigation">37 <a href="/">Chat</a>38 <button id="logoutButton" type="button" hidden>Sign out</button>39 <a href="https://www.umb.edu/ssl/" target="_blank" rel="noreferrer">Visit SSL</a>40 </nav>41 </div>42 </header>43 44 <main class="dashboard-shell">45 <section class="metric-grid" aria-label="Interaction metrics">46 <article class="metric-card">47 <span>Total Chats</span>48 <strong id="metricTotal">-</strong>49 </article>50 <article class="metric-card">51 <span>Clarifications</span>52 <strong id="metricClarifications">-</strong>53 </article>54 <article class="metric-card">55 <span>Low Confidence</span>56 <strong id="metricLowConfidence">-</strong>57 </article>58 <article class="metric-card">59 <span>Blocked</span>60 <strong id="metricBlocked">-</strong>61 </article>62 <article class="metric-card">63 <span>Errors</span>64 <strong id="metricErrors">-</strong>65 </article>66 <article class="metric-card">67 <span>Avg Latency</span>68 <strong id="metricAvgLatency">-</strong>69 </article>70 <article class="metric-card">71 <span>Total Tokens</span>72 <strong id="metricTotalTokens">-</strong>73 <small class="metric-note" id="metricAvgTokens"></small>74 </article>75 <article class="metric-card">76 <span>Token Cost</span>77 <strong id="metricTotalCost">-</strong>78 <small class="metric-note" id="metricAvgCost"></small>79 </article>80 </section>81 82 <section class="dashboard-grid">83 <article class="panel panel-wide">84 <div class="panel-header">85 <h2>Chat History</h2>86 <span id="scopeNote">Your activity this session</span>87 </div>88 <div class="history-table-wrap">89 <table class="history-table">90 <thead>91 <tr>92 <th>Status</th>93 <th>Chat Mapping</th>94 <th>Confidence</th>95 <th>Path</th>96 <th>Sources</th>97 <th>Retrieval</th>98 <th>Tokens</th>99 <th>Cost</th>100 <th>Latency</th>101 </tr>102 </thead>103 <tbody id="historyTableBody">104 <tr>105 <td colspan="9" class="empty-state">Loading dashboard data...</td>106 </tr>107 </tbody>108 </table>109 </div>110 </article>111 112 <article class="panel">113 <div class="panel-header">114 <h2>Source Usage</h2>115 </div>116 <ol class="ranked-list" id="sourceUsageList"></ol>117 <p class="empty-state" id="sourceUsageEmpty" hidden>No returned sources logged yet.</p>118 </article>119 120 <article class="panel">121 <div class="panel-header">122 <h2>Corpus Coverage</h2>123 </div>124 <ol class="ranked-list" id="categoryUsageList"></ol>125 <p class="empty-state" id="categoryUsageEmpty" hidden>Retrieved source metadata will appear here.</p>126 </article>127 128 <article class="panel">129 <div class="panel-header">130 <h2>Problem Cases</h2>131 </div>132 <div class="compact-list" id="problemEventsList"></div>133 <p class="empty-state" id="problemEventsEmpty" hidden>No blocked, error, clarification, or low-confidence cases logged.</p>134 </article>135 136 </section>137 </main>138 139 <script src="/static/dashboard.js?v=bea1aaa"></script>140</body>141</html>142