File size: 4,089 Bytes
1768d92
208fe4c
892d25a
d7d8b33
 
 
1768d92
 
 
208fe4c
406a5d4
208fe4c
 
406a5d4
 
 
208fe4c
 
406a5d4
 
208fe4c
678531b
50018bb
 
 
 
 
 
 
 
 
 
 
892d25a
4c2f8ad
d7d8b33
 
 
 
208fe4c
0f3dbb0
208fe4c
 
 
 
d7d8b33
 
 
 
 
 
 
 
 
678531b
 
 
0f3dbb0
 
d7d8b33
 
 
678531b
d7d8b33
 
0f3dbb0
d7d8b33
 
 
 
 
 
 
208fe4c
 
d7d8b33
 
208fe4c
d7d8b33
 
 
 
 
 
 
 
4c2f8ad
1768d92
 
 
50018bb
 
 
4c2f8ad
 
 
 
 
d7d8b33
0f3dbb0
 
d7d8b33
 
 
 
 
208fe4c
 
 
 
 
 
d7d8b33
4c2f8ad
 
 
d7d8b33
 
 
4c2f8ad
 
 
 
 
 
d7d8b33
4c2f8ad
d7d8b33
 
 
 
 
 
 
 
208fe4c
d7d8b33
 
 
 
 
 
 
 
 
 
 
208fe4c
d7d8b33
208fe4c
d7d8b33
 
208fe4c
 
 
 
 
 
50018bb
208fe4c
 
 
 
 
 
 
 
 
 
 
 
 
4c2f8ad
1768d92
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<script lang="ts">
  import Button, { Icon, Label } from "@smui/button";
  let data = fetch("/args").then((d) => d.json());
  let blur = function (ev) {
    ev.target.blur();
  };
</script>

<main>
  <header>
    <h1>Zeno + OpenAI Evals</h1>
  </header>
  <div class="tagline">
    Use the <img class="open_ai" src="./build/zeno.png" alt="Zeno logo" />
    <b><a style:color="var(--logo)" href="https://github.com/zeno-ml/zeno/">Zeno</a></b>
    AI evaluation tool to compare the performance of models accross
    <img class="open_ai" src="./build/openai.svg" alt="OpenAI logo" />
    <a href="https://github.com/openai/evals">
      <b>OpenAI Evals</b>
    </a> tasks.
  </div>
  <br />
  <div class="tagline">
    Submit a PR to add new evals to this page!
    <iframe
      src="https://ghbtns.com/github-btn.html?user=zeno-ml&repo=zeno-evals-hub&type=fork&count=true"
      frameborder="0"
      scrolling="0"
      width="150"
      height="20"
      title="GitHub"
    />
  </div>
  <!-- table with links to zeno sites. -->
  <div id="container">
    <div id="table-background">
      <table>
        <thead>
          <tr>
            <th>evaluation</th>
            <th>description</th>
            <th>models</th>
            <th>accuracy</th>
            <th>instances</th>
            <th />
          </tr>
        </thead>
        <tbody>
          {#await data}
            <p>loading</p>
          {:then final_data}
            {#each final_data as d}
              {@const name = Object.keys(d)[0]}
              <tr>
                <td
                  ><a href={d[name]["link"]}><span class="name-wrap">{name}</span></a>
                </td>
                <td>{d[name]["description"]}</td>
                <td style:min-width="120px">
                  {#each d[name]["models"] as m}{m}<br />{/each}
                </td>
                <td>
                  {#each d[name]["accuracy"] as a}{a.toFixed(2)}%<br />{/each}
                </td>
                <td>
                  {d[name]["events"][0]}
                </td>
                <td>
                  <Button
                    on:mouseleave={blur}
                    on:focusout={blur}
                    href="/{name}/"
                    ripple={false}
                    variant="unelevated"
                    color="primary"
                  >
                    <Icon class="material-icons">rocket</Icon>
                    <Label>Open</Label>
                  </Button>
                </td>
              </tr>
            {/each}
          {/await}
        </tbody>
      </table>
    </div>
  </div>
</main>

<style>
  iframe {
    margin-left: 10px;
  }
  #container {
    margin: 50px 20px;
    display: flex;
    justify-content: center;
  }
  #table-background {
    width: 1100px;
    min-width: 900px;
    padding: 20px;
    border-radius: 20px;
  }
  .name-wrap {
    border: 1px solid transparent;
    border-radius: 10px;
    font-weight: 500;
    color: var(--logo);
  }
  .name-wrap:hover {
    color: var(--P2);
  }
  table {
    border-collapse: collapse;
    text-align: left;
    cursor: default;
    margin-left: auto;
    margin-right: auto;
  }
  table thead tr th {
    border-bottom: 0.5px solid grey;
  }
  table th,
  table td {
    padding: 4px 25px;
  }
  table td:first-child,
  table th:first-child {
    border-radius: 20px 0 0 20px;
  }
  table td:last-child,
  table th:last-child {
    border-radius: 0 20px 20px 0;
  }

  tbody:before {
    content: "@";
    display: block;
    line-height: 10px;
    text-indent: -99999px;
  }
  thead tr {
    color: #213547;
  }
  tbody tr {
    opacity: 0.9;
    height: 70px;
  }
  /* tbody tr:hover {
    opacity: 1;
    background-color: #ededed;
  } */
  .open_ai {
    width: 20px;
    margin-left: 5px;
  }
  .tagline {
    font-size: 18px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .tagline b {
    margin-right: 5px;
    margin-left: 5px;
  }
  header {
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>