Hugging Face's logo

Spaces:
Maouu
/
chipling-api
Running

App Files Community
Maouu commited on
Commit
64e7b19
·
verified ·
1 Parent(s): 91e8774

Create templates/dashboard.html

Browse files
Files changed (1) hide show
  1. templates/dashboard.html +102 -0
templates/dashboard.html ADDED
@@ -0,0 +1,102 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Chipling Dashboard</title>
6
+ <script src="https://cdn.tailwindcss.com"></script>
7
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
8
+ </head>
9
+ <body class="bg-gray-100 text-gray-800">
10
+ <div class="max-w-7xl mx-auto p-6">
11
+ <h1 class="text-3xl font-bold mb-6">📊 Chipling Dashboard</h1>
12
+
13
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
14
+ <div class="bg-white p-4 rounded shadow">
15
+ <h2 class="text-xl font-bold">Total Requests</h2>
16
+ <p class="text-3xl">{{ total_requests }}</p>
17
+ </div>
18
+ <div class="bg-white p-4 rounded shadow">
19
+ <h2 class="text-xl font-bold">Most Queried</h2>
20
+ <ul>
21
+ {% for query, count in query_counts %}
22
+ <li class="text-sm">{{ query }} ({{ count }})</li>
23
+ {% endfor %}
24
+ </ul>
25
+ </div>
26
+ <div class="bg-white p-4 rounded shadow">
27
+ <h2 class="text-xl font-bold">Filter by Endpoint</h2>
28
+ <form method="get">
29
+ <select name="endpoint" class="w-full border p-2 rounded">
30
+ <option value="">All</option>
31
+ {% for ep in endpoint_counts.keys() %}
32
+ <option value="{{ ep }}" {% if ep == filter_endpoint %}selected{% endif %}>{{ ep }}</option>
33
+ {% endfor %}
34
+ </select>
35
+ <button type="submit" class="mt-2 w-full bg-blue-500 text-white px-3 py-2 rounded">Filter</button>
36
+ </form>
37
+ </div>
38
+ </div>
39
+
40
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
41
+ <div class="bg-white p-4 rounded shadow">
42
+ <h2 class="text-lg font-bold mb-2">Requests per Day</h2>
43
+ <canvas id="dateChart"></canvas>
44
+ </div>
45
+ <div class="bg-white p-4 rounded shadow">
46
+ <h2 class="text-lg font-bold mb-2">Endpoint Usage</h2>
47
+ <canvas id="endpointChart"></canvas>
48
+ </div>
49
+ </div>
50
+
51
+ <div class="bg-white p-6 rounded shadow">
52
+ <h2 class="text-2xl font-bold mb-4">Recent Logs</h2>
53
+ <table class="w-full table-auto">
54
+ <thead>
55
+ <tr class="bg-gray-200">
56
+ <th class="p-2 text-left">Time</th>
57
+ <th class="p-2 text-left">Endpoint</th>
58
+ <th class="p-2 text-left">Query</th>
59
+ </tr>
60
+ </thead>
61
+ <tbody>
62
+ {% for log in logs %}
63
+ <tr class="border-b">
64
+ <td class="p-2">{{ log.timestamp }}</td>
65
+ <td class="p-2">{{ log.endpoint }}</td>
66
+ <td class="p-2">{{ log.query }}</td>
67
+ </tr>
68
+ {% endfor %}
69
+ </tbody>
70
+ </table>
71
+ </div>
72
+ </div>
73
+
74
+ <script>
75
+ const dateData = {{ date_counts | tojson }};
76
+ const endpointData = {{ endpoint_counts | tojson }};
77
+
78
+ new Chart(document.getElementById("dateChart"), {
79
+ type: 'bar',
80
+ data: {
81
+ labels: Object.keys(dateData),
82
+ datasets: [{
83
+ label: "Requests",
84
+ data: Object.values(dateData),
85
+ backgroundColor: "rgba(59, 130, 246, 0.6)"
86
+ }]
87
+ }
88
+ });
89
+
90
+ new Chart(document.getElementById("endpointChart"), {
91
+ type: 'pie',
92
+ data: {
93
+ labels: Object.keys(endpointData),
94
+ datasets: [{
95
+ data: Object.values(endpointData),
96
+ backgroundColor: ['#60A5FA', '#FBBF24', '#34D399', '#F472B6']
97
+ }]
98
+ }
99
+ });
100
+ </script>
101
+ </body>
102
+ </html>