← back to Google+ Jinglecompare with ground truth →
model output
Qwen3-VL-8B-Instruct
Google+ Jingle
A 0.51T 0.33
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 body {
9 margin: 0;
10 padding: 0;
11 background-color: white;
12 display: flex;
13 justify-content: center;
14 align-items: center;
15 height: 100vh;
16 }
17 .bell {
18 width: 50px;
19 height: 50px;
20 position: relative;
21 animation: swing 1.5s ease-in-out infinite alternate;
22 }
23 .bell:before {
24 content: "";
25 position: absolute;
26 top: 0;
27 left: 0;
28 width: 100%;
29 height: 100%;
30 background: linear-gradient(to bottom, #ccc, #aaa);
31 border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
32 transform: rotate(10deg);
33 }
34 .bell:after {
35 content: "";
36 position: absolute;
37 top: 10px;
38 left: 10px;
39 width: 30px;
40 height: 30px;
41 background: #ccc;
42 border-radius: 50%;
43 z-index: 1;
44 }
45 .bell .clapper {
46 position: absolute;
47 bottom: 0;
48 left: 50%;
49 transform: translateX(-50%);
50 width: 10px;
51 height: 10px;
52 background: #aaa;
53 border-radius: 50%;
54 z-index: 2;
55 }
56 .bell .clapper:before {
57 content: "";
58 position: absolute;
59 top: -5px;
60 left: 50%;
61 transform: translateX(-50%);
62 width: 10px;
63 height: 10px;
64 background: #aaa;
65 border-radius: 50%;
66 z-index: 3;
67 }
68 @keyframes swing {
69 0% {
70 transform: rotate(0deg) scale(1);
71 }
72 100% {
73 transform: rotate(10deg) scale(1.05);
74 }
75 }
76 </style>
77</head>
78<body>
79 <div class="bell">
80 <div class="clapper"></div>
81 </div>
82</body>
83</html>