File size: 3,832 Bytes
634567d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
// Evaluation Page - ROUGE Metrics Chart

// Sample benchmark data (from CNN/DailyMail evaluation)
const benchmarkData = {
    textrank: {
        rouge1: 0.43,
        rouge2: 0.18,
        rougeL: 0.35
    },
    bart: {
        rouge1: 0.51,
        rouge2: 0.34,
        rougeL: 0.48
    },
    pegasus: {
        rouge1: 0.55,
        rouge2: 0.30,
        rougeL: 0.52
    }
};

// Initialize chart
document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('rougeChart').getContext('2d');
    
    const chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['TextRank', 'BART', 'PEGASUS'],
            datasets: [
                {
                    label: 'ROUGE-1',
                    data: [
                        benchmarkData.textrank.rouge1,
                        benchmarkData.bart.rouge1,
                        benchmarkData.pegasus.rouge1
                    ],
                    backgroundColor: '#6D8196',
                    borderRadius: 6
                },
                {
                    label: 'ROUGE-2',
                    data: [
                        benchmarkData.textrank.rouge2,
                        benchmarkData.bart.rouge2,
                        benchmarkData.pegasus.rouge2
                    ],
                    backgroundColor: '#CBCBCB',
                    borderRadius: 6
                },
                {
                    label: 'ROUGE-L',
                    data: [
                        benchmarkData.textrank.rougeL,
                        benchmarkData.bart.rougeL,
                        benchmarkData.pegasus.rougeL
                    ],
                    backgroundColor: '#4A4A4A',
                    borderRadius: 6
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            plugins: {
                legend: {
                    display: true,
                    position: 'bottom',
                    labels: {
                        padding: 20,
                        font: {
                            size: 12,
                            family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto'
                        },
                        usePointStyle: true,
                        pointStyle: 'circle'
                    }
                },
                tooltip: {
                    backgroundColor: '#4A4A4A',
                    padding: 12,
                    titleFont: {
                        size: 13
                    },
                    bodyFont: {
                        size: 12
                    },
                    callbacks: {
                        label: function(context) {
                            return context.dataset.label + ': ' + context.parsed.y.toFixed(2);
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    max: 0.6,
                    ticks: {
                        font: {
                            size: 11
                        },
                        color: '#6D8196'
                    },
                    grid: {
                        color: 'rgba(203, 203, 203, 0.3)',
                        drawBorder: false
                    }
                },
                x: {
                    ticks: {
                        font: {
                            size: 12,
                            weight: '500'
                        },
                        color: '#4A4A4A'
                    },
                    grid: {
                        display: false
                    }
                }
            }
        }
    });
});