← back to Google+ Jinglecompare with ground truth →
model output
LLaMA 4 Scout
Google+ Jingle
A 0.67T 0.22
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Bell Animation</title>
7 <style>
8 .bell {
9 position: absolute;
10 top: 50px;
11 left: 50px;
12 width: 30px;
13 height: 40px;
14 background-color: #ccc;
15 border-radius: 50%;
16 display: flex;
17 justify-content: center;
18 align-items: center;
19 }
20 .bell::before {
21 content: '';
22 position: absolute;
23 top: -5px;
24 left: 50%;
25 transform: translateX(-50%);
26 width: 5px;
27 height: 5px;
28 background-color: #ccc;
29 border-radius: 50%;
30 }
31 .bell .face {
32 position: relative;
33 width: 100%;
34 height: 100%;
35 background-color: #ccc;
36 border-radius: 50%;
37 display: flex;
38 justify-content: center;
39 align-items: center;
40 }
41 .bell .face .eyes {
42 position: absolute;
43 top: 30%;
44 left: 40%;
45 right: 40%;
46 font-size: 0;
47 }
48 .bell .face .eyes::before {
49 content: '';
50 position: absolute;
51 top: 0;
52 left: 0;
53 width: 2px;
54 height: 2px;
55 background-color: #666;
56 border-radius: 50%;
57 }
58 .bell .face .eyes::after {
59 content: '';
60 position: absolute;
61 top: 0;
62 right: 0;
63 width: 2px;
64 height: 2px;
65 background-color: #666;
66 border-radius: 50%;
67 }
68 .bell .face .mouth {
69 position: absolute;
70 top: 50%;
71 left: 50%;
72 transform: translate(-50%, -50%);
73 width: 10px;
74 height: 5px;
75 background-color: #666;
76 border-radius: 2px;
77 }
78 .animate {
79 animation: swing 2s infinite;
80 }
81 @keyframes swing {
82 0% {
83 transform: rotate(0deg);
84 }
85 50% {
86 transform: rotate(10deg);
87 }
88 100% {
89 transform: rotate(0deg);
90 }
91 }
92 </style>
93</head>
94<body>
95 <div class="bell animate">
96 <div class="face">
97 <div class="eyes"></div>
98 <div class="mouth"></div>
99 </div>
100 </div>
101</body>
102</html>