Add a banner about model temperature settings

app.py

@@ -516,6 +516,14 @@ with gr.Blocks(theme=theme, css=custom_css) as demo:
             }}
         </style>
         """, elem_classes="css-styles")
+    with gr.Row(variant="compact", elem_classes=["responsive-row", "no-padding"], ):
+        with gr.Column():
+            gr.Markdown(
+                """
+                <span class="banner-message-text">ℹ️ This app has been updated to use the recommended temperature of 0.6. We had set it to 0.8 earlier and expect 0.6 to be better. Please provide feedback using the model link.</span>
+                """
+                , elem_classes="banner-message"
+            )
     with gr.Row(variant="panel", elem_classes="responsive-row"):
         with gr.Column(scale=1, min_width=400, elem_classes="model-dropdown-container"):
             model_dropdown = gr.Dropdown(

styles.css

@@ -1,5 +1,43 @@
 :root {
     --color-grey-50: #f9fafb;
+    --banner-background: var(--secondary-400);
+    --banner-text-color: var(--primary-100);
+    --banner-background-dark: var(--secondary-800);
+    --banner-text-color-dark: var(--primary-100);
+    --banner-chrome-height: calc(16px + 43px);
+
+    /* Chrome height with no banner */
+    --chat-chrome-height-wide-no-banner: 320px;
+    --chat-chrome-height-narrow-no-banner: 450px;
+
+    /* Use these when we are not using a banner */
+    /*--chat-chrome-height-wide: var(--chat-chrome-height-wide-no-banner);*/
+    /*--chat-chrome-height-narrow: var(--chat-chrome-height-narrow-no-banner);*/
+
+    /* When we are using a banner, add the banner height to the chat chrome height */
+    --chat-chrome-height-wide: calc(var(--chat-chrome-height-wide-no-banner) + var(--banner-chrome-height));
+    --chat-chrome-height-narrow: calc(var(--chat-chrome-height-narrow-no-banner) + var(--banner-chrome-height));
+}
+
+.banner-message {
+    background-color: var(--banner-background);
+    padding: 5px;
+    margin: 0;
+    border-radius: 5px;
+    border: none;
+}
+
+.banner-message-text {
+    font-size: 13px;
+    font-weight: bolder;
+    color: var(--banner-text-color) !important;
+}
+
+body.dark .banner-message {
+    background-color: var(--banner-background-dark) !important;
+}
+body.dark .gradio-container .contain .banner-message .banner-message-text {
+    color: var(--banner-text-color-dark) !important;
 }
 
 .toast-body {
@@ -59,13 +97,17 @@ button.cancel:hover, .cancel[disabled] {
 }
 
 div.block.chatbot {
-    height: calc(100svh - 320px) !important;
+    height: calc(100svh - var(--chat-chrome-height-wide)) !important;
     max-height: 900px !important;
 }
 
+div.no-padding {
+    padding: 0 !important;
+}
+
 @media (max-width: 1280px) {
     div.block.chatbot {
-        height: calc(-320px + 100svh) !important;
+        height: calc(100svh - var(--chat-chrome-height-wide)) !important;
     }
 }
 
@@ -85,7 +127,7 @@ div.block.chatbot {
     }
 
     div.block.chatbot {
-        height: calc(-450px + 100svh) !important;
+        height: calc(100svh - var(--chat-chrome-height-narrow)) !important;
     }
 }
 
@@ -112,7 +154,6 @@ div.block.chatbot {
 @media (max-height: 932px) {
     .chatbot {
         max-height: 500px !important;
-        /*min-height: 320px;*/
     }
 }