Hugging Face's logo

Spaces:
Maouu
/
chipling-api
Running

App Files Community
chipling-api
File size: 3,343 Bytes 
64e7b19
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Chipling Dashboard</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body class="bg-gray-100 text-gray-800">
  <div class="max-w-7xl mx-auto p-6">
    <h1 class="text-3xl font-bold mb-6">📊 Chipling Dashboard</h1>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
      <div class="bg-white p-4 rounded shadow">
        <h2 class="text-xl font-bold">Total Requests</h2>
        <p class="text-3xl">{{ total_requests }}</p>
      </div>
      <div class="bg-white p-4 rounded shadow">
        <h2 class="text-xl font-bold">Most Queried</h2>
        <ul>
          {% for query, count in query_counts %}
          <li class="text-sm">{{ query }} ({{ count }})</li>
          {% endfor %}
        </ul>
      </div>
      <div class="bg-white p-4 rounded shadow">
        <h2 class="text-xl font-bold">Filter by Endpoint</h2>
        <form method="get">
          <select name="endpoint" class="w-full border p-2 rounded">
            <option value="">All</option>
            {% for ep in endpoint_counts.keys() %}
              <option value="{{ ep }}" {% if ep == filter_endpoint %}selected{% endif %}>{{ ep }}</option>
            {% endfor %}
          </select>
          <button type="submit" class="mt-2 w-full bg-blue-500 text-white px-3 py-2 rounded">Filter</button>
        </form>
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
      <div class="bg-white p-4 rounded shadow">
        <h2 class="text-lg font-bold mb-2">Requests per Day</h2>
        <canvas id="dateChart"></canvas>
      </div>
      <div class="bg-white p-4 rounded shadow">
        <h2 class="text-lg font-bold mb-2">Endpoint Usage</h2>
        <canvas id="endpointChart"></canvas>
      </div>
    </div>

    <div class="bg-white p-6 rounded shadow">
      <h2 class="text-2xl font-bold mb-4">Recent Logs</h2>
      <table class="w-full table-auto">
        <thead>
          <tr class="bg-gray-200">
            <th class="p-2 text-left">Time</th>
            <th class="p-2 text-left">Endpoint</th>
            <th class="p-2 text-left">Query</th>
          </tr>
        </thead>
        <tbody>
          {% for log in logs %}
          <tr class="border-b">
            <td class="p-2">{{ log.timestamp }}</td>
            <td class="p-2">{{ log.endpoint }}</td>
            <td class="p-2">{{ log.query }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <script>
    const dateData = {{ date_counts | tojson }};
    const endpointData = {{ endpoint_counts | tojson }};

    new Chart(document.getElementById("dateChart"), {
      type: 'bar',
      data: {
        labels: Object.keys(dateData),
        datasets: [{
          label: "Requests",
          data: Object.values(dateData),
          backgroundColor: "rgba(59, 130, 246, 0.6)"
        }]
      }
    });

    new Chart(document.getElementById("endpointChart"), {
      type: 'pie',
      data: {
        labels: Object.keys(endpointData),
        datasets: [{
          data: Object.values(endpointData),
          backgroundColor: ['#60A5FA', '#FBBF24', '#34D399', '#F472B6']
        }]
      }
    });
  </script>
</body>
</html>