Baton AI
wallet € {{ budget }}
{% if error %}
{% if error_message %}
{{ error_message }}
{% else %}
{% trans "Something went wrong" %}
{% endif %}
{% else %}
Translations model: {{ translations_model }}
Summarizations model: {{ summarizations_model }}
Corrections model: {{ corrections_model }}
Vision model: {{ vision_model }}
Images model: {{ images_model }}
(function ($) {
let aiChart;
const drawChart = function (themeMode) {
const textColor = themeMode === 'dark' ? '#fff' : '#000';
const lightTextColor = themeMode === 'dark' ? '#e7e7e7' : '#010101';
const ctx = document.getElementById('baton-ai-bar-stats');
const today = new Date();
const days = []
const translations = {{ translations | safe}}
const summarizations = {{ summarizations | safe}}
const corrections = {{ corrections | safe}}
const vision = {{ vision | safe}}
const images = {{ images | safe}}
for (let i = 0; i < 15; i++) {
days.push(today.toISOString().slice(0, 10))
today.setDate(today.getDate() - 1)
}
const totalCost = []
const reversedDays = days.reverse()
const translationsApiCalls = []
const translationsApiPrice = []
const summarizationsApiCalls = []
const summarizationsApiPrice = []
const correctionsApiCalls = []
const correctionsApiPrice = []
const visionApiCalls = []
const visionApiPrice = []
const imagesApiCalls = []
const imagesApiPrice = []
reversedDays.forEach((d, idx) => {
translationsApiCalls.push(translations[d]?.count || 0)
translationsApiPrice.push(translations[d]?.price || 0)
summarizationsApiCalls.push(summarizations[d]?.count || 0)
summarizationsApiPrice.push(summarizations[d]?.price || 0)
correctionsApiCalls.push(corrections[d]?.count || 0)
correctionsApiPrice.push(corrections[d]?.price || 0)
visionApiCalls.push(vision[d]?.count || 0)
visionApiPrice.push(vision[d]?.price || 0)
imagesApiCalls.push(images[d]?.count || 0)
imagesApiPrice.push(images[d]?.price || 0)
totalCost.push(
parseFloat(translations[d]?.price || 0) +
parseFloat(summarizations[d]?.price || 0) +
parseFloat(corrections[d]?.price || 0) +
parseFloat(vision[d]?.price || 0) +
parseFloat(images[d]?.price || 0) +
(idx === 0 ? 0 : totalCost[idx - 1])
)
})
Chart.defaults.font.family = "Inter Variable"
Chart.defaults.font.size = 14
Chart.defaults.font.weight = 500
aiChart = new Chart(ctx, {
plugins: [{
beforeInit(chart) {
// Get a reference to the original fit function
const originalFit = chart.legend.fit;
// Override the fit function
chart.legend.fit = function fit() {
// Call the original function and bind scope in order to use `this` correctly inside it
originalFit.bind(chart.legend)();
// Change the height as suggested in other answers
this.height += 15;
}
}
}],
data: {
labels: reversedDays.map(d => d.substr(5)),
datasets: [{
type: 'bar',
label: Baton.T.get('TransApiCalls'),
data: translationsApiCalls,
yAxisID: 'y',
backgroundColor: '#3ec6ff'
},
{
type: 'bar',
label: Baton.T.get('TransApiCost'),
data: translationsApiPrice,
yAxisID: 'y1',
backgroundColor: '#5587ff'
},
{
type: 'bar',
label: Baton.T.get('SummApiCalls'),
data: summarizationsApiCalls,
yAxisID: 'y',
backgroundColor: '#6bda82'
},
{
type: 'bar',
label: Baton.T.get('SummApiCost'),
data: summarizationsApiPrice,
yAxisID: 'y1',
backgroundColor: '#09c22f'
},
{
type: 'bar',
label: Baton.T.get('CorrApiCalls'),
data: correctionsApiCalls,
yAxisID: 'y',
backgroundColor: '#e79e9f'
},
{
type: 'bar',
label: Baton.T.get('CorrApiCost'),
data: correctionsApiPrice,
yAxisID: 'y1',
backgroundColor: '#d03d3f'
},
{
type: 'bar',
label: Baton.T.get('VisionApiCalls'),
data: visionApiCalls,
yAxisID: 'y',
backgroundColor: '#2acf87'
},
{
type: 'bar',
label: Baton.T.get('VisionApiCost'),
data: visionApiPrice,
yAxisID: 'y1',
backgroundColor: '#1d8d4e'
},
{
type: 'bar',
label: Baton.T.get('ImagesApiCalls'),
data: imagesApiCalls,
yAxisID: 'y',
backgroundColor: '#a4c3d7'
},
{
type: 'bar',
label: Baton.T.get('ImagesApiCost'),
data: imagesApiPrice,
yAxisID: 'y1',
backgroundColor: '#4988ae'
},
{
type: 'line',
label: Baton.T.get('TotalCost'),
data: totalCost,
yAxisID: 'y1',
fill: true,
backgroundColor: 'rgba(210,210,210,0.4)',
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
ticks: {
color: lightTextColor
},
title: {
display: true,
text: Baton.T.get('Date'),
font: {
weight: 700
},
color: textColor
}
},
y: {
beginAtZero: true,
ticks: {
color: lightTextColor
},
title: {
display: true,
text: Baton.T.get('Count'),
font: {
weight: 700
},
color: textColor
}
},
y1: {
beginAtZero: true,
position: 'right',
ticks: {
color: lightTextColor
},
title: {
display: true,
text: Baton.T.get('Cost') + ' (€)',
font: {
weight: 700
},
color: textColor
}
}
},
plugins: {
legend: {
labels: {
color: lightTextColor
},
position: 'right',
}
}
}
});
}
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === "attributes") {
const theme = $('html').attr('data-bs-theme');
aiChart.destroy();
drawChart(theme);
}
});
});
observer.observe($('html')[0], {
attributes: true //configure it to listen to attribute changes
});
drawChart($('html').attr('data-bs-theme'));
})(Baton.jQuery)
{% endif %}