Hugging Face's logo

Spaces:
FlameF0X
/
Simple-Math-Benchmark
Running

App Files Community
FlameF0X commited on
Commit
4e141cd
·
verified ·
1 Parent(s): afe2e88

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +223 -26
index.html CHANGED
@@ -4,46 +4,243 @@
4
  <meta charset="UTF-8">
5
  <title>Model Benchmark: First Grade Math</title>
6
  <style>
 
 
 
 
 
 
 
 
 
 
 
 
7
  body {
8
- font-family: Arial, sans-serif;
9
- background: #f9f9f9;
10
  margin: 0;
11
- padding: 20px;
12
- text-align: center;
 
13
  }
14
- h3 {
15
- color: #333;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
17
  img {
18
- max-width: 90%;
19
  height: auto;
20
- border: 1px solid #ccc;
21
- box-shadow: 0px 0px 8px rgba(0,0,0,0.1);
22
  }
 
23
  .model-info {
 
 
 
 
 
 
 
 
 
 
 
24
  margin-top: 20px;
25
- font-size: 16px;
26
  }
27
- .model-info ul {
28
- list-style: none;
29
- padding: 0;
 
 
 
 
 
 
 
30
  }
31
- .model-info li {
32
- padding: 6px 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
33
  }
34
  </style>
35
  </head>
36
  <body>
37
- <h3>Model Accuracy on First Grade Math (1000 Questions Each)</h1>
38
- <img src="download.png" alt="Model Benchmark Chart">
39
-
40
- <div class="model-info">
41
- <h2>Models Benchmarked</h2>
42
- <ul>
43
- <li><strong>FlameF0X/MathGPT2</strong>: 763 correct / 237 incorrect</li>
44
- <li><strong>FlameF0X/Muffin-2.9b-1C25</strong>: 9 correct / 991 incorrect</li>
45
- <li><strong>FlameF0X/MuffinFace-2</strong>: 8 correct / 992 incorrect</li>
46
- </ul>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
47
  </div>
48
  </body>
49
- </html>
 
4
  <meta charset="UTF-8">
5
  <title>Model Benchmark: First Grade Math</title>
6
  <style>
7
+ :root {
8
+ --primary: #4a6fa5;
9
+ --secondary: #6b8cbe;
10
+ --accent: #ff6b6b;
11
+ --background: #f5f7fa;
12
+ --card-bg: #ffffff;
13
+ --text-dark: #2d3748;
14
+ --text-light: #4a5568;
15
+ --success: #48bb78;
16
+ --error: #e53e3e;
17
+ }
18
+
19
  body {
20
+ font-family: 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
21
+ background: var(--background);
22
  margin: 0;
23
+ padding: 0;
24
+ color: var(--text-dark);
25
+ line-height: 1.6;
26
  }
27
+
28
+ .container {
29
+ max-width: 1000px;
30
+ margin: 0 auto;
31
+ padding: 40px 20px;
32
+ }
33
+
34
+ header {
35
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
36
+ color: white;
37
+ padding: 30px 0;
38
+ border-radius: 12px;
39
+ margin-bottom: 30px;
40
+ box-shadow: 0 4px 12px rgba(0,0,0,0.1);
41
+ }
42
+
43
+ h1 {
44
+ margin: 0;
45
+ font-size: 2.4rem;
46
+ font-weight: 700;
47
  }
48
+
49
+ h2 {
50
+ color: var(--primary);
51
+ font-size: 1.8rem;
52
+ margin-top: 40px;
53
+ margin-bottom: 20px;
54
+ position: relative;
55
+ padding-bottom: 10px;
56
+ }
57
+
58
+ h2::after {
59
+ content: '';
60
+ position: absolute;
61
+ bottom: 0;
62
+ left: 0;
63
+ width: 60px;
64
+ height: 4px;
65
+ background: var(--accent);
66
+ border-radius: 2px;
67
+ }
68
+
69
+ .chart-container {
70
+ background: var(--card-bg);
71
+ border-radius: 12px;
72
+ padding: 30px;
73
+ box-shadow: 0 8px 20px rgba(0,0,0,0.06);
74
+ margin: 30px 0;
75
+ }
76
+
77
  img {
78
+ max-width: 100%;
79
  height: auto;
80
+ border-radius: 8px;
81
+ box-shadow: 0 4px 12px rgba(0,0,0,0.08);
82
  }
83
+
84
  .model-info {
85
+ background: var(--card-bg);
86
+ border-radius: 12px;
87
+ padding: 30px;
88
+ box-shadow: 0 8px 20px rgba(0,0,0,0.06);
89
+ }
90
+
91
+ .model-cards {
92
+ display: flex;
93
+ flex-wrap: wrap;
94
+ gap: 20px;
95
+ justify-content: center;
96
  margin-top: 20px;
 
97
  }
98
+
99
+ .model-card {
100
+ background: var(--card-bg);
101
+ border-radius: 10px;
102
+ padding: 20px;
103
+ box-shadow: 0 4px 10px rgba(0,0,0,0.05);
104
+ border-left: 5px solid var(--primary);
105
+ width: calc(33% - 20px);
106
+ min-width: 250px;
107
+ transition: transform 0.2s, box-shadow 0.2s;
108
  }
109
+
110
+ .model-card:hover {
111
+ transform: translateY(-5px);
112
+ box-shadow: 0 8px 15px rgba(0,0,0,0.1);
113
+ }
114
+
115
+ .model-name {
116
+ font-weight: 700;
117
+ font-size: 1.2rem;
118
+ color: var(--primary);
119
+ margin-bottom: 10px;
120
+ }
121
+
122
+ .stats {
123
+ display: flex;
124
+ justify-content: space-between;
125
+ margin-top: 15px;
126
+ }
127
+
128
+ .stat {
129
+ text-align: center;
130
+ flex: 1;
131
+ }
132
+
133
+ .stat-value {
134
+ font-size: 1.5rem;
135
+ font-weight: 700;
136
+ }
137
+
138
+ .correct {
139
+ color: var(--success);
140
+ }
141
+
142
+ .incorrect {
143
+ color: var(--error);
144
+ }
145
+
146
+ .stat-label {
147
+ font-size: 0.85rem;
148
+ color: var(--text-light);
149
+ }
150
+
151
+ .accuracy-bar {
152
+ height: 8px;
153
+ background: #f0f0f0;
154
+ border-radius: 4px;
155
+ margin-top: 10px;
156
+ overflow: hidden;
157
+ }
158
+
159
+ .accuracy-fill {
160
+ height: 100%;
161
+ background: var(--primary);
162
+ border-radius: 4px;
163
+ }
164
+
165
+ footer {
166
+ margin-top: 40px;
167
+ text-align: center;
168
+ color: var(--text-light);
169
+ font-size: 0.9rem;
170
  }
171
  </style>
172
  </head>
173
  <body>
174
+ <div class="container">
175
+ <header>
176
+ <h1>Model Benchmark: First Grade Math</h1>
177
+ <p>Performance comparison across 1,000 questions per model</p>
178
+ </header>
179
+
180
+ <div class="chart-container">
181
+ <h2>Performance Overview</h2>
182
+ <img src="download.png" alt="Model Benchmark Chart">
183
+ </div>
184
+
185
+ <div class="model-info">
186
+ <h2>Models Benchmarked</h2>
187
+ <div class="model-cards">
188
+ <div class="model-card">
189
+ <div class="model-name">FlameF0X/MathGPT2</div>
190
+ <div class="stats">
191
+ <div class="stat">
192
+ <div class="stat-value correct">763</div>
193
+ <div class="stat-label">Correct</div>
194
+ </div>
195
+ <div class="stat">
196
+ <div class="stat-value incorrect">237</div>
197
+ <div class="stat-label">Incorrect</div>
198
+ </div>
199
+ </div>
200
+ <div class="accuracy-bar">
201
+ <div class="accuracy-fill" style="width: 76.3%"></div>
202
+ </div>
203
+ </div>
204
+
205
+ <div class="model-card">
206
+ <div class="model-name">FlameF0X/Muffin-2.9b-1C25</div>
207
+ <div class="stats">
208
+ <div class="stat">
209
+ <div class="stat-value correct">9</div>
210
+ <div class="stat-label">Correct</div>
211
+ </div>
212
+ <div class="stat">
213
+ <div class="stat-value incorrect">991</div>
214
+ <div class="stat-label">Incorrect</div>
215
+ </div>
216
+ </div>
217
+ <div class="accuracy-bar">
218
+ <div class="accuracy-fill" style="width: 0.9%"></div>
219
+ </div>
220
+ </div>
221
+
222
+ <div class="model-card">
223
+ <div class="model-name">FlameF0X/MuffinFace-2</div>
224
+ <div class="stats">
225
+ <div class="stat">
226
+ <div class="stat-value correct">8</div>
227
+ <div class="stat-label">Correct</div>
228
+ </div>
229
+ <div class="stat">
230
+ <div class="stat-value incorrect">992</div>
231
+ <div class="stat-label">Incorrect</div>
232
+ </div>
233
+ </div>
234
+ <div class="accuracy-bar">
235
+ <div class="accuracy-fill" style="width: 0.8%"></div>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </div>
240
+
241
+ <footer>
242
+ <p>Benchmark results as of April 2025</p>
243
+ </footer>
244
  </div>
245
  </body>
246
+ </html>