style updates

evals/evals.yaml

@@ -2,8 +2,11 @@
     results-file: ./crossword/crossword-turbo.jsonl
     second-results-file: ./crossword/crossword-turbo-0301.jsonl
     functions-file: ./crossword/crossword_fns.py
+    link: https://github.com/openai/evals/tree/main/evals/registry/data/partially_solved_crossword_clues
 - emotional-intelligence:
     results-file: ./crossword/crossword-turbo.jsonl
     second-results-file: ./crossword/crossword-turbo-0301.jsonl
+    link: https://github.com/openai/evals/tree/main/evals/registry/data/partially_solved_crossword_clues
 - crossword-only-result:
     results-file: ./crossword/crossword-turbo.jsonl
+    link: https://github.com/openai/evals/tree/main/evals/registry/data/partially_solved_crossword_clues

frontend/src/App.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import Button, { Label, Icon } from "@smui/button";
-  import Handshake from "./assets/handshake.svelte";
+  import Button, { Icon, Label } from "@smui/button";
   let data = fetch("/args").then((d) => d.json());
   let blur = function (ev) {
     ev.target.blur();
@@ -8,23 +7,30 @@
 </script>
 
 <main>
-  <h1>
-    <a href="https://github.com/openai/evals">OpenAI</a>
-    <Handshake />
-    <a href="https://zenoml.com">Zeno</a>
-  </h1>
-  <h4>Explore the results of OpenAI evals all in one place...</h4>
+  <header>
+    <h1>Evals Hub</h1>
+  </header>
+  <div class="tagline">
+    Explore and compare the results of
+    <img class="open_ai" src="./build/openai.svg" alt="OpenAI logo" />
+    <a href="https://github.com/openai/evals">
+      <b>OpenAI Evals </b>
+    </a>
+    using
+    <img class="open_ai" src="./build/zeno.png" alt="Zeno logo" />
+    <b><a href="https://github.com/zeno-ml/zeno/stargazers">Zeno</a></b>
+  </div>
   <!-- table with links to zeno sites. -->
   <div id="container">
     <div id="table-background">
       <table>
         <thead>
           <tr>
-            <th>Evaluation</th>
-            <th>Models</th>
-            <th>Accuracy</th>
-            <th>Events</th>
-            <th>Actions</th>
+            <th>evaluation</th>
+            <th>models</th>
+            <th>accuracy</th>
+            <th>instances</th>
+            <th />
           </tr>
         </thead>
         <tbody>
@@ -34,7 +40,7 @@
             {#each final_data as d}
               {@const name = Object.keys(d)[0]}
               <tr>
-                <td><div class="name-wrap">{name}</div> </td>
+                <td><a href="#"><span class="name-wrap">{name}</span></a> </td>
                 <td>
                   {#each d[name]["models"] as m}{m}<br />{/each}
                 </td>
@@ -50,10 +56,11 @@
                     on:focusout={blur}
                     href="/{name}/"
                     ripple={false}
-                    class="button-shaped-round"
+                    variant="unelevated"
+                    color="primary"
                   >
                     <Icon class="material-icons">rocket</Icon>
-                    <Label>Launch</Label>
+                    <Label>Open</Label>
                   </Button>
                 </td>
               </tr>
@@ -72,17 +79,18 @@
     justify-content: center;
   }
   #table-background {
-    background-color: #dce3f6;
-    width: 800px;
+    width: 900px;
     padding: 20px;
     border-radius: 20px;
   }
   .name-wrap {
     border: 1px solid transparent;
-    padding: 5px 10px;
-    border-radius: 20px;
-    background-color: #646cff;
-    color: white;
+    border-radius: 10px;
+    font-weight: 500;
+    color: var(--logo);
+  }
+  .name-wrap:hover {
+    color: var(--P2);
   }
   table {
     border-collapse: collapse;
@@ -106,6 +114,7 @@
   table th:last-child {
     border-radius: 0 20px 20px 0;
   }
+
   tbody:before {
     content: "@";
     display: block;
@@ -117,10 +126,29 @@
   }
   tbody tr {
     opacity: 0.9;
-    height: 64px;
+    height: 70px;
   }
-  tbody tr:hover {
+  /* tbody tr:hover {
     opacity: 1;
     background-color: #ededed;
+  } */
+  .open_ai {
+    width: 20px;
+    margin-left: 5px;
+  }
+  .tagline {
+    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>

frontend/src/theme/_smui-theme.scss

@@ -2,19 +2,16 @@
 
 @use "@material/theme/color-palette";
 
-// Svelte Colors!
 @use "@material/theme/index" as theme with (
-  $primary: #ff3e00,
-  $secondary: #676778,
-  $surface: #fff,
-  $background: #fff,
+  $primary: #6a1b9a,
+  $secondary: #989895,
+  $surface: #ffffff,
+  $background: #ffffff,
   $error: color-palette.$red-900
 );
 
-@use "@material/button/mixins" as mdc-button;
-
-.button-shaped-round {
-  @include mdc-button.shape-radius(100%);
+.material-icons {
+  fill: var(--logo);
 }
 
 :root {
@@ -24,13 +21,53 @@
 
   color-scheme: light dark;
   color: #213547;
-  background-color: #f0f3fb;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
+
+  --G1: #333333;
+  --G2: #73726f;
+  --G3: #989895;
+  --G4: #d3d3d3;
+  --G5: #ebebea;
+  --G6: #ffffff;
+  --logo: #6a1b9a;
+  --P1: #b18bd3;
+  --P2: #d2bae9;
+  --P3: #f7f1fb;
+  --P4: #f9f7fb;
+  --Y1: #f2f2ee;
+  --Y2: #fbfbfa;
+
+  --mdc-theme-primary: var(--G2);
+  --mdc-theme-secondary: var(--G3);
+  --mdc-theme-background: var(--G6);
+  --mdc-theme-surface: var(--G6);
+  --mdc-theme-error: #b71c1c;
+  --mdc-theme-on-primary: var(--G6);
+  --mdc-theme-on-secondary: var(--G6);
+  --mdc-theme-on-surface: var(--G1);
+  --mdc-theme-on-error: var(--G6);
+  --mdc-theme-text-primary-on-background: rgba(0, 0, 0, 0.87);
+  --mdc-theme-text-secondary-on-background: rgba(0, 0, 0, 0.54);
+  --mdc-theme-text-hint-on-background: rgba(0, 0, 0, 0.38);
+  --mdc-theme-text-disabled-on-background: rgba(0, 0, 0, 0.38);
+  --mdc-theme-text-icon-on-background: rgba(0, 0, 0, 0.38);
+  --mdc-theme-text-primary-on-light: rgba(0, 0, 0, 0.87);
+  --mdc-theme-text-secondary-on-light: rgba(0, 0, 0, 0.54);
+  --mdc-theme-text-hint-on-light: rgba(0, 0, 0, 0.38);
+  --mdc-theme-text-disabled-on-light: rgba(0, 0, 0, 0.38);
+  --mdc-theme-text-icon-on-light: rgba(0, 0, 0, 0.38);
+  --mdc-theme-text-primary-on-dark: white;
+  --mdc-theme-text-secondary-on-dark: rgba(255, 255, 255, 0.7);
+  --mdc-theme-text-hint-on-dark: rgba(255, 255, 255, 0.5);
+  --mdc-theme-text-disabled-on-dark: rgba(255, 255, 255, 0.5);
+  --mdc-theme-text-icon-on-dark: rgba(255, 255, 255, 0.5);
+  --mdc-outlined-button-container-height: 33px;
+  --mdc-filled-button-container-color: var(--logo);
 }
 
 a {
@@ -38,7 +75,7 @@ a {
   text-decoration: inherit;
 }
 a:hover {
-  color: #646cff;
+  color: var(--logo);
 }
 
 h1 {

zeno-evals-hub/frontend/index.html

@@ -2,11 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="./build/openai.svg" />
+    <link rel="icon" type="image/svg+xml" href="./build/zeno.png" />
     <link rel="stylesheet" href="./build/smui.css" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>OpenAI Evals Hub</title>
+    <title>Evals Hub</title>
     <!-- Material Icons -->
     <link
       rel="stylesheet"
@@ -18,15 +18,8 @@
       href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700"
     />
     <!-- Roboto Mono -->
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css?family=Roboto+Mono"
-    />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono" />
   </head>
-  <div id="header">
-    <img src="./build/openai.svg" alt="OpenAI SVG" />
-    <h2>OpenAI Evals Hub</h2>
-  </div>
   <body>
     <div id="app"></div>
     <script type="module" src="http://localhost:5173/src/main.ts"></script>