AI
/
crush
şunun yansıması https://github.com/charmbracelet/crush.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
							<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Crush Usage Statistics</title>
    <link rel="preconnect" href="https://cdn.jsdelivr.net" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap"
      rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
      {{.CSS}}
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header-wrapper">
        <a href="https://charm.land/crush" class="header-link">
          <div class="header-content">
            <div class="header-svg">{{.Header}}</div>
            <div class="heartbit-svg">{{.Heartbit}}</div>
          </div>
        </a>
      </div>

      <div class="header-info">
        Generated by {{.Username}} for {{.ProjectName}} on {{.GeneratedAt}}.
      </div>

      <div class="stats-grid">
        <div class="stat-card">
          <h3>Total Sessions</h3>
          <div class="value" id="total-sessions"></div>
        </div>
        <div class="stat-card">
          <h3>Total Messages</h3>
          <div class="value" id="total-messages"></div>
        </div>
        <div class="stat-card">
          <h3>Total Tokens</h3>
          <div class="value" id="total-tokens"></div>
        </div>
        <div class="stat-card">
          <h3>Total Cost</h3>
          <div class="value cost" id="total-cost"></div>
        </div>
        <div class="stat-card">
          <h3>Tokens/Session</h3>
          <div class="value" id="avg-tokens"></div>
        </div>
        <div class="stat-card">
          <h3>Response Time</h3>
          <div class="value" id="avg-response"></div>
        </div>
      </div>

      <div class="charts-grid">
        <div class="chart-card full-width">
          <h2>Activity Heatmap</h2>
          <div class="chart-container tall">
            <canvas id="heatmapChart"></canvas>
          </div>
        </div>

        <div class="chart-card full-width">
          <h2>Activity (Last 30 Days)</h2>
          <div class="chart-container tall">
            <canvas id="recentActivityChart"></canvas>
          </div>
        </div>

        <div class="chart-card full-width">
          <h2>Tool Usage</h2>
          <div class="chart-container tall">
            <canvas id="toolChart"></canvas>
          </div>
        </div>

        <div class="chart-row">
          <div class="chart-card">
            <h2>Messages by Provider</h2>
            <div class="chart-container">
              <canvas id="providerPieChart"></canvas>
            </div>
          </div>

          <div class="chart-card">
            <h2>Token Distribution</h2>
            <div class="chart-container">
              <canvas id="tokenPieChart"></canvas>
            </div>
          </div>
        </div>

        <div class="chart-card full-width">
          <h2>Usage by Model</h2>
          <div class="chart-container tall">
            <canvas id="modelChart"></canvas>
          </div>
        </div>

        <div class="chart-card full-width">
          <h2>Daily Usage History</h2>
          <div style="overflow-x: auto">
            <table id="daily-table">
              <thead>
                <tr>
                  <th>Date</th>
                  <th>Sessions</th>
                  <th>Prompt Tokens</th>
                  <th>Completion Tokens</th>
                  <th>Total Tokens</th>
                  <th>Cost</th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <div class="footer-container">
      <div class="footer">{{.Footer}}</div>
    </div>

    <script>
      const stats = {{.StatsJSON}};
      {{.JS}}
    </script>
  </body>
</html>