Frontend changes (#80)

- Hide Gradio footer, replace with TOS and PP - Update stats table for a consistent header font - add github and anyscale links to the top right corner - Update model selector buttons - Make model description tab scrollable - Render model output as markdown <img width="1322" alt="image" src="https://github.com/ray-project/aviary/assets/3463757/d8c4a0be-3cae-4724-81c9-e73904b3517f"> <img width="1278" alt="image" src="https://github.com/ray-project/aviary/assets/3463757/abd79e88-ba53-4246-a919-88ebf3e984ba">
ray-project · May 27, 2023 · da386dc · da386dc
1 parent 7d259e1
commit da386dc
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 21 deletions.
diff --git a/aviary/common/constants.py b/aviary/common/constants.py
@@ -121,6 +121,27 @@
     border-radius: 32px !important;
     border: none !important;
 }
+.block.ref-link {
+    flex-grow: 0 !important;
+}
+.block.ref-link a {
+    background: none !important;
+    border: 2px solid var(--button-secondary-border-color) !important;
+    border-radius: 20px;
+    color: var(--button-primary-text-color) !important;
+    display: block;
+    height: 40px;
+    line-height: 36px;
+    text-decoration: none;
+    text-align: center;
+}
+.block.ref-link a:visited {
+    color: var(--button-primary-text-color) !important;
+}
+.block.ref-link.primary a {
+    background: var(--button-primary-background-fill) !important;
+    border: 2px solid var(--button-primary-background-fill) !important;
+}
 .main,
 .contain,
 #component-0,
@@ -208,9 +229,10 @@
 .output-content {
     flex-grow: 1 !important;
 }
-.output-content > .form {
+.output-text.block {
+    background: var(--input-background-fill) !important;
     flex-grow: 3 !important;
-    border: none !important;
+    padding: 8px 12px !important;
 }
 .output-content > .output-stats {
     flex-grow: 1 !important;
@@ -221,24 +243,37 @@
 .output-stats td,
 .output-stats th {
     padding: 0 !important;
-    color: #aaa !important;
+    color: var(--body-text-color-subdued) !important;
 }
 .output-stats th,
 .output-stats td {
-    border-bottom-color: #aaa !important;
-}
-.output-text {
-    padding: 0 !important;
-    background: none !important;
+    border-bottom-color: var(--body-text-color-subdued) !important;
 }
 
-#leaderboard-tab {
-    overflow: auto;
+#leaderboard-tab,
+#models-tab {
+    overflow: auto !important;
 }
 #refresh-leaderboard-button {
     margin-top: 12px;
 }
-
+footer {
+    display: none !important;
+}
+#footer {
+    bottom: 0;
+    color: var(--body-text-color-subdued) !important;
+    left: 0;
+    margin-bottom: var(--size-2);
+    margin-top: var(--size-4);
+    position: fixed;
+    text-align: center;
+}
+#footer a,
+#footer a:visited {
+    color: var(--body-text-color-subdued) !important;
+    text-decoration: none !important;
+}
 """
 # Database to be used for Mongo DB
 DB_NAME = "aviary"

diff --git a/aviary/frontend/app.py b/aviary/frontend/app.py
@@ -90,11 +90,8 @@ def show_results(buttons, llm_text_boxes, llm_stats):
                     value=f"\U0001F31F Best answer is #{i + 1}",
                     elem_classes="rank-button pill-button",
                 )
-                buttons[i].style(style="sm")
             with gr.Row(elem_classes="output-content"):
-                llm_text_boxes[i] = gr.TextArea(
-                    show_label=False,
-                    lines=3,
+                llm_text_boxes[i] = gr.Markdown(
                     elem_classes="output-text",
                 )
                 llm_stats[i] = gr.Markdown(DEFAULT_STATS, elem_classes="output-stats")
@@ -148,13 +145,14 @@ def model_selection():
         ]
 
     with gr.Row(elem_id="model-category-row"):
+        gr.HTML("<span>Select LLMs for me: </span>")
         choices = list(SELECTION_DICT.keys())
 
         category_buttons = [
             gr.Button(
                 value=choice,
                 variant="secondary",
-                elem_classes="pill-button",
+                elem_classes="pill-button rank-button",
             )
             for choice in choices
         ]
@@ -170,13 +168,16 @@ def model_selection():
 
 
 def gradio_app_builder():
-    with gr.Blocks(theme=THEME, css=CSS, elem_id="container") as demo:
+    with gr.Blocks(theme=THEME, css=CSS, elem_id="container", title="Aviary") as demo:
         llm_text_boxes = [None] * NUM_LLM_OPTIONS
         llm_stats = [None] * NUM_LLM_OPTIONS
         btns = [None] * NUM_LLM_OPTIONS
         # We need to store the raw completion
         raw_completions = gr.State([None] * NUM_LLM_OPTIONS)
-        gr.Markdown(HEADER)
+        with gr.Row():
+            gr.Markdown(HEADER)
+            gr.HTML("<a href='https://github.com/ray-project/aviary/' target='_blank'>GitHub</a>", elem_classes="ref-link")
+            gr.HTML("<a href='https://anyscale.com' target='_blank'>Sign up for Anyscale</a>", elem_classes="ref-link primary")
         with gr.Tab("Compare", elem_id="top-tab-group"), gr.Row():
             with gr.Column(elem_id="left-column"):
                 with gr.Column(elem_id="left-column-content"):
@@ -214,7 +215,7 @@ def gradio_app_builder():
                 gr.Markdown("## Performance")
                 perf_df = gr.DataFrame(value=LDR.generate_perf_leaderboard)
 
-        with gr.Tab("Models"), gr.Row(elem_id="aviary-model-desc"), gr.Row():
+        with gr.Tab("Models", elem_id="models-tab"), gr.Row(elem_id="aviary-model-desc"), gr.Row():
             gr.Markdown(MODEL_DESCRIPTIONS)
 
         with gr.Tab("About"), gr.Row(elem_id="aviary-desc"):
@@ -246,6 +247,8 @@ def gradio_app_builder():
             ).then(
                 fn=unset_last, inputs=btns[i], outputs=btns[i]
             )
+        with gr.Row(elem_id="footer"):
+            gr.HTML("<a href='http://anyscale.com/aviary-tos' target='_blank'>Terms of Use</a> • <a href='http://anyscale.com/privacy-policy' target='_blank'>Privacy Policy</a>")
         return demo
 
 

diff --git a/aviary/frontend/utils.py b/aviary/frontend/utils.py
@@ -16,8 +16,10 @@
     LOGGER = gr.CSVLogger()
 
 
-DEFAULT_STATS = t = """| Latency [s] | - |
+DEFAULT_STATS = t = """
+        | <!-- --> | <!-- --> |
         |---|---|
+        | Latency [s] | - |
         | Cost [$] | - |
         | Tokens (i/o) | - |
         | Per 1K Tokens [$] | - |
@@ -32,8 +34,10 @@ def gen_stats(dictionary):
         * 1000
     )
 
-    return f"""| Lat [s] | {dictionary['total_time']:.1f} |
+    return f"""
+            | <!-- --> | <!-- --> |
             |---|---|
+            | Lat [s] | {dictionary['total_time']:.1f} |
             | Cost [$] | {dictionary['total_time'] * G5_COST_PER_S_IN_DOLLARS:.4f} |
             | Tokens (i/o) | {dictionary['num_total_tokens']:.1f} |
             | Per 1K Tok [$] | {cost_per_k:.4f} |