mirror of
https://github.com/Aider-AI/aider.git
synced 2025-05-30 17:24:59 +00:00
feat: Add code-in-json-syntax.js and update code-in-json-benchmark.js
This commit is contained in:
Paul Gauthier
Paul Gauthier (aider)
parent
e90642295d
commit
f91faf52dc
2 changed files with 232 additions and 0 deletions
|
|
@ -0,0 +1,139 @@
|
|||
<div id="chartContainer" style="position: relative; height: 0; padding-bottom: 50%; margin-bottom: 20px;">
|
||||
<canvas id="passRateChart" style="position: absolute; width: 100%; height: 100%;"></canvas>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var ctx = document.getElementById('passRateChart').getContext('2d');
|
||||
|
||||
var yamlData = {{ site.data.code-in-json | jsonify }};
|
||||
|
||||
var models = [...new Set(yamlData.map(item => item.model))].sort();
|
||||
var editFormats = [...new Set(yamlData.map(item => item.edit_format))];
|
||||
|
||||
var datasets = editFormats.map(format => ({
|
||||
label: format,
|
||||
data: models.map(model => {
|
||||
var items = yamlData.filter(d => d.model === model && d.edit_format === format);
|
||||
if (items.length === 0) return null;
|
||||
var average = items.reduce((sum, item) => sum + item.pass_rate_1, 0) / items.length;
|
||||
return parseFloat(average.toFixed(1));
|
||||
}),
|
||||
backgroundColor: function(context) {
|
||||
const format = context.dataset.label;
|
||||
if (format === 'Markdown') {
|
||||
return 'rgba(54, 162, 235, 0.8)';
|
||||
} else if (format.startsWith('JSON')) {
|
||||
const ctx = context.chart.ctx;
|
||||
const gradient = ctx.createPattern(createStripedCanvas(format === 'JSON (strict)'), 'repeat');
|
||||
return gradient;
|
||||
} else {
|
||||
return 'rgba(75, 192, 192, 0.8)';
|
||||
}
|
||||
},
|
||||
}));
|
||||
|
||||
var data = {
|
||||
labels: models,
|
||||
datasets: datasets
|
||||
};
|
||||
|
||||
var config = {
|
||||
type: 'bar',
|
||||
data: data,
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
x: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Model'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Pass Rate (%, average of 5 runs)'
|
||||
},
|
||||
max: 70
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Pass rate by model and code wrapping strategy',
|
||||
font: {
|
||||
size: 16
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Adjust chart height based on screen width
|
||||
function adjustChartHeight() {
|
||||
var container = document.getElementById('chartContainer');
|
||||
if (window.innerWidth < 600) {
|
||||
container.style.paddingBottom = '75%'; // Increase height on small screens
|
||||
} else {
|
||||
container.style.paddingBottom = '50%'; // Default height
|
||||
}
|
||||
}
|
||||
|
||||
// Call the function initially and on window resize
|
||||
adjustChartHeight();
|
||||
window.addEventListener('resize', adjustChartHeight);
|
||||
|
||||
function createStripedCanvas(isStrict) {
|
||||
const patternCanvas = document.createElement('canvas');
|
||||
const patternContext = patternCanvas.getContext('2d');
|
||||
const size = 10;
|
||||
patternCanvas.width = size;
|
||||
patternCanvas.height = size;
|
||||
|
||||
patternContext.fillStyle = 'rgba(255, 99, 132, 0.8)';
|
||||
patternContext.fillRect(0, 0, size, size);
|
||||
|
||||
if (isStrict) {
|
||||
patternContext.strokeStyle = 'rgba(255, 255, 255, 0.8)';
|
||||
patternContext.lineWidth = 0.75;
|
||||
patternContext.beginPath();
|
||||
patternContext.moveTo(0, 0);
|
||||
patternContext.lineTo(size, size);
|
||||
patternContext.stroke();
|
||||
}
|
||||
|
||||
return patternCanvas;
|
||||
}
|
||||
|
||||
new Chart(ctx, config);
|
||||
});
|
||||
|
||||
function createStripedCanvas(isStrict) {
|
||||
const patternCanvas = document.createElement('canvas');
|
||||
const patternContext = patternCanvas.getContext('2d');
|
||||
const size = 10;
|
||||
patternCanvas.width = size;
|
||||
patternCanvas.height = size;
|
||||
|
||||
patternContext.fillStyle = 'rgba(255, 99, 132, 0.8)';
|
||||
patternContext.fillRect(0, 0, size, size);
|
||||
|
||||
if (isStrict) {
|
||||
patternContext.strokeStyle = 'rgba(255, 255, 255, 0.8)';
|
||||
patternContext.lineWidth = 0.75;
|
||||
patternContext.beginPath();
|
||||
patternContext.moveTo(0, 0);
|
||||
patternContext.lineTo(size, size);
|
||||
patternContext.stroke();
|
||||
}
|
||||
|
||||
return patternCanvas;
|
||||
}
|
||||
</script>
|
||||
93
aider/website/_includes/code-in-json-syntax.js
Normal file
93
aider/website/_includes/code-in-json-syntax.js
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
<div id="syntaxErrorsContainer" style="position: relative; height: 0; padding-bottom: 50%; margin-bottom: 20px;">
|
||||
<canvas id="syntaxErrorsChart" style="position: absolute; width: 100%; height: 100%;"></canvas>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var ctx = document.getElementById('syntaxErrorsChart').getContext('2d');
|
||||
|
||||
var yamlData = {{ site.data.code-in-json | jsonify }};
|
||||
|
||||
var models = [...new Set(yamlData.map(item => item.model))].sort();
|
||||
var editFormats = [...new Set(yamlData.map(item => item.edit_format))];
|
||||
|
||||
var datasets = editFormats.map(format => ({
|
||||
label: format,
|
||||
data: models.map(model => {
|
||||
var items = yamlData.filter(d => d.model === model && d.edit_format === format);
|
||||
if (items.length === 0) return null;
|
||||
var totalErrors = items.reduce((sum, item) => sum + item.syntax_errors + item.indentation_errors, 0);
|
||||
return totalErrors;
|
||||
}),
|
||||
backgroundColor: function(context) {
|
||||
const format = context.dataset.label;
|
||||
if (format === 'Markdown') {
|
||||
return 'rgba(54, 162, 235, 0.8)';
|
||||
} else if (format.startsWith('JSON')) {
|
||||
const ctx = context.chart.ctx;
|
||||
const gradient = ctx.createPattern(createStripedCanvas(format === 'JSON (strict)'), 'repeat');
|
||||
return gradient;
|
||||
} else {
|
||||
return 'rgba(75, 192, 192, 0.8)';
|
||||
}
|
||||
},
|
||||
}));
|
||||
|
||||
var data = {
|
||||
labels: models,
|
||||
datasets: datasets
|
||||
};
|
||||
|
||||
var config = {
|
||||
type: 'bar',
|
||||
data: data,
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
x: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Model'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Total syntactic errors from 5 runs'
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Syntactic errors by model and code wrapping strategy',
|
||||
font: {
|
||||
size: 16
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Adjust chart height based on screen width
|
||||
function adjustChartHeight() {
|
||||
var container = document.getElementById('syntaxErrorsContainer');
|
||||
if (window.innerWidth < 600) {
|
||||
container.style.paddingBottom = '75%'; // Increase height on small screens
|
||||
} else {
|
||||
container.style.paddingBottom = '50%'; // Default height
|
||||
}
|
||||
}
|
||||
|
||||
// Call the function initially and on window resize
|
||||
adjustChartHeight();
|
||||
window.addEventListener('resize', adjustChartHeight);
|
||||
|
||||
new Chart(ctx, config);
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue