fix: css according to design

Signed-off-by: Graham White <[email protected]>

src/app.css

@@ -1,22 +1,51 @@
+/* Hide the standard Gradio footer */
 footer {
     display: none !important;
 }
+/* Make the text in the input box and chat label bigger */
+textarea, .wrapper > label {
+    font-size: 20px;
+}
+.input-container {
+    align-items: center;
+}
+/* Make the chat label bold */
+.wrapper > label {
+    font-weight: bold;
+}
+/* Limit the overall width of the demo */
+.gradio-container {
+    max-width: 1200px !important;
+}
+/* Theme anchor links with Carbon coloring */
 .gr_docs_link a {
     color: #78A9FF;
 }
+/* Title alignment with the Granite icon */
 .gr_title {
     display: flex;
     align-items: center;
+    margin-bottom: -0.5rem;
 }
 .gr_title img {
-    height: 40px;
-    width: 40px;
+    height: 42px;
+    width: 42px;
     margin-right: 1rem;
-    margin-bottom: -10px;
+    margin-bottom: -6px;
     filter: invert(0%) sepia(0%) saturate(7459%) hue-rotate(154deg) brightness(96%) contrast(100%);
 }
+/* Color the Granite icon in white for dark mode */
 @media (prefers-color-scheme: dark) {
     .gr_title img {
         filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(162deg) brightness(101%) contrast(104%);
     }
-  }
+}
+/* Only one form on the page, within the Accordion component */
+.form {
+    flex-direction: row;
+    background-color: var(--block-background-fill);
+}
+.gr_accordion_element {
+    width: 50%;
+    margin: 0px;
+}

src/app.py

@@ -98,13 +98,31 @@ css_file_path = Path(Path(__file__).parent / "app.css")
 head_file_path = Path(Path(__file__).parent / "app_head.html")
 
 # advanced settings (displayed in Accordion)
-temperature_slider = gr.Slider(minimum=0, maximum=1.0, value=TEMPERATURE, step=0.1, label="Temperature")
-top_p_slider = gr.Slider(minimum=0, maximum=1.0, value=TOP_P, step=0.05, label="Top P")
-top_k_slider = gr.Slider(minimum=0, maximum=100, value=TOP_K, step=1, label="Top K")
+temperature_slider = gr.Slider(
+    minimum=0, maximum=1.0, value=TEMPERATURE, step=0.1, label="Temperature", elem_classes=["gr_accordion_element"]
+)
+top_p_slider = gr.Slider(
+    minimum=0, maximum=1.0, value=TOP_P, step=0.05, label="Top P", elem_classes=["gr_accordion_element"]
+)
+top_k_slider = gr.Slider(
+    minimum=0, maximum=100, value=TOP_K, step=1, label="Top K", elem_classes=["gr_accordion_element"]
+)
 repetition_penalty_slider = gr.Slider(
-    minimum=0, maximum=2.0, value=REPETITION_PENALTY, step=0.1, label="Repetition Penalty"
+    minimum=0,
+    maximum=2.0,
+    value=REPETITION_PENALTY,
+    step=0.1,
+    label="Repetition Penalty",
+    elem_classes=["gr_accordion_element"],
+)
+max_new_tokens_slider = gr.Slider(
+    minimum=1,
+    maximum=2000,
+    value=MAX_NEW_TOKENS,
+    step=1,
+    label="Max New Tokens",
+    elem_classes=["gr_accordion_element"],
 )
-max_new_tokens_slider = gr.Slider(minimum=1, maximum=2000, value=MAX_NEW_TOKENS, step=1, label="Max New Tokens")
 chat_interface_accordion = gr.Accordion(label="Advanced Settings", open=False)
 
 with gr.Blocks(