hypercore-kb / opencog-kb / language-learning / mvp / dashboard / index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Language Learning Monitor</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <header>
    <h1>Language Learning Monitor</h1>
    <div id="connection-panel">
      <input type="text" id="server-input" value="localhost:18080" placeholder="server:port">
      <button id="connect-btn">Connect</button>
      <span id="connection-status" class="disconnected">Disconnected</span>
    </div>
  </header>

  <main>
    <!-- Stats Cards -->
    <section id="stats-panel">
      <div class="stat-card">
        <span class="stat-value" id="pairs-count">--</span>
        <span class="stat-label">Pairs</span>
      </div>
      <div class="stat-card">
        <span class="stat-value" id="words-count">--</span>
        <span class="stat-label">Words</span>
      </div>
      <div class="stat-card">
        <span class="stat-value" id="sections-count">--</span>
        <span class="stat-label">Sections</span>
      </div>
      <div class="stat-card">
        <span class="stat-value" id="memory-usage">--</span>
        <span class="stat-label">Memory (MB)</span>
      </div>
      <div class="stat-card">
        <span class="stat-value" id="uptime">--</span>
        <span class="stat-label">Uptime (s)</span>
      </div>
      <div class="stat-card">
        <span class="stat-value" id="epoch">--</span>
        <span class="stat-label">Epoch</span>
      </div>
    </section>

    <!-- Learning Progress -->
    <section id="progress-panel">
      <h2>Learning Progress</h2>
      <div class="progress-row">
        <span class="progress-label">Sentences:</span>
        <span class="progress-value" id="sentences-count">0</span>
      </div>
      <div class="progress-row">
        <span class="progress-label">Parses:</span>
        <span class="progress-value" id="parses-count">0</span>
      </div>
      <div class="progress-row">
        <span class="progress-label">N Drift:</span>
        <span class="progress-value" id="n-drift">0%</span>
        <div class="drift-bar">
          <div class="drift-fill" id="drift-fill"></div>
        </div>
      </div>
    </section>

    <!-- Charts -->
    <section id="charts-section">
      <div class="chart-container">
        <h3>Pairs Over Time</h3>
        <canvas id="pairs-chart"></canvas>
      </div>
      <div class="chart-container">
        <h3>Memory Over Time</h3>
        <canvas id="memory-chart"></canvas>
      </div>
    </section>

    <!-- Activity Feed -->
    <section id="activity-section">
      <h2>Recent Activity</h2>
      <ul id="activity-list">
        <li class="activity-empty">No activity yet</li>
      </ul>
    </section>

    <!-- Interactive Panel -->
    <section id="interactive-section">
      <h2>Interactive</h2>
      <div class="input-group">
        <label for="parse-input">Parse Text:</label>
        <input type="text" id="parse-input" placeholder="the cat sat on the mat">
        <button id="parse-btn">Parse</button>
      </div>
      <div class="input-group">
        <label for="learn-input">Learn Text:</label>
        <input type="text" id="learn-input" placeholder="enter text to learn">
        <button id="learn-btn">Learn</button>
      </div>
      <div class="input-group">
        <label for="command-input">Scheme Command:</label>
        <input type="text" id="command-input" placeholder="(memory-status)">
        <button id="command-btn">Run</button>
      </div>
      <div id="command-output">
        <pre id="output-content"></pre>
      </div>
    </section>
  </main>

  <footer>
    <p>OpenCog Language Learning Dashboard</p>
  </footer>

  <script src="dashboard.js"></script>
</body>
</html>