-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
163 lines (144 loc) · 6.51 KB
/
index.html
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Open Router Models</title>
<!-- Include DataTables CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.min.css">
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Include DataTables JS -->
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.print.min.js"></script>
<style>
th {
background-color: #4CAF50;
color: white;
padding: 10px;
text-align: left;
}
td {
padding: 8px;
border: 1px solid #ddd;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<h1>Openrouter Model Pricing</h1>
<p id="updatedDate"></p>
<p>This table provides the latest pricing information for <a href="https://openrouter.ai/" target="_blank">OpenRouter</a> models.</p>
<p>Data is checked every 12 hours.</p>
<p>The repository can be found on <a href="https://github.com/jvrck/openrouterlist" target="_blank">GitHub</a>.</p>
<table id="csvTable" class="display" style="width:100%">
<thead>
<tr id="tableHeaders"></tr>
</thead>
<tbody id="tableBody"></tbody>
</table>
<script>
$(document).ready(function() {
// Fetch and display the updated date
$.get("data/updated", function(data) {
var dateStr = data.trim();
var year = dateStr.substring(0, 4);
var month = dateStr.substring(4, 6);
var day = dateStr.substring(6, 8);
var hour = dateStr.substring(9, 11);
var minute = dateStr.substring(11, 13);
var second = dateStr.substring(13, 15);
var formattedDate = `Updated - Date: ${year}-${month}-${day} ${hour}:${minute}:${second} UTC`;
$("#updatedDate").text(formattedDate);
});
// Fetch and display the CSV data
$.get("data/output.csv", function(data) {
var lines = data.split("\n");
// Create a mapping of original headers to new headers
var headerMapping = {
"id": "Model ID",
"name": "Model Name",
"created": "Created",
"context_length": "Context Length",
"pricing.prompt": "Prompt Cost <br>$ per 1M Tokens",
"pricing.completion": "Completion Cost <br>$ per 1M Tokens",
};
// Get the headers from the first row of the CSV
var headers = lines[0].split(",");
var headerHtml = "";
headers.forEach(function(header) {
var trimmedHeader = header.trim();
var newHeader = headerMapping[trimmedHeader] || trimmedHeader; // Use the new header if it exists in the mapping, otherwise use the original header
headerHtml += "<th>" + newHeader + "</th>";
});
$("#tableHeaders").html(headerHtml);
// Function to remove quotes
function removeQuotes(value) {
return value.replace(/^"|"$/g, '').trim();
}
// Populate the table with CSV data
for (var i = 1; i < lines.length; i++) {
if (lines[i].trim() !== "") { // Skip empty lines
var row = lines[i].split(",");
var rowHtml = "<tr>";
var currentId = ""; // To hold the id value of the current row
row.forEach(function(cell, index) {
var columnName = headers[index].trim().toLowerCase();
var cleanedValue = removeQuotes(cell.trim()); // Remove quotes around the values
// Capture the id for the current row
if (columnName === "id") {
currentId = cleanedValue;
}
// Check for pricing.prompt or pricing.completion columns and multiply by 1,000,000 if id is not "openrouter/auto"
if ((columnName === "pricing.prompt" || columnName === "pricing.completion") && currentId !== "openrouter/auto") {
var numericValue = parseFloat(cleanedValue.replace(/,/g, '')); // Remove commas and convert the value to a number
if (!isNaN(numericValue)) {
var multipliedValue = numericValue * 1000000;
rowHtml += "<td>" + multipliedValue.toFixed(2) + "</td>"; // Add precision to 2 decimal places
} else {
rowHtml += "<td>Invalid</td>"; // Handle non-numeric values or empty cells
}
} else if (columnName === "created") {
// Convert Unix timestamp to YYYY-MM-DD format
var unixTimestamp = parseInt(cleanedValue, 10);
if (!isNaN(unixTimestamp)) {
var date = new Date(unixTimestamp * 1000); // Convert to milliseconds
var formattedDate = date.toISOString().split('T')[0]; // Extract date as YYYY-MM-DD
rowHtml += "<td>" + formattedDate + "</td>";
} else {
rowHtml += "<td>Invalid Date</td>"; // Handle invalid timestamps
}
} else if (columnName === "name") {
// Add hyperlink to the Model Name field
rowHtml += `<td><a href="https://openrouter.ai/models/${currentId}" target="_blank">${cleanedValue}</a></td>`;
} else {
rowHtml += "<td>" + cleanedValue + "</td>";
}
});
rowHtml += "</tr>";
$("#tableBody").append(rowHtml);
}
}
// Initialize DataTables without pagination
$('#csvTable').DataTable({
paging: false, // Disable pagination
dom: 'Bfrtip', // Display buttons
buttons: ['copy', 'csv', 'excel', 'pdf', 'print'], // Export buttons
responsive: true, // Make the table responsive for smaller screens
searchHighlight: true // Highlight search results
});
});
});
</script>
</body>
</html>