fix: align descriptive text to the Figma design

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

src/app.css

@@ -4,7 +4,7 @@ footer {
 .gr_docs_link {
     float: right;
     font-size: var(--text-xs);
-    margin-top: -8px;
+    margin-top: 2px;
 }
 .gr_title {
     display: flex;

src/app.py

@@ -18,8 +18,16 @@ SYS_PROMPT = f"""Knowledge Cutoff Date: April 2024.
 Today's Date: {today_date}.
 You are Granite, developed by IBM. You are a helpful AI assistant"""
 TITLE = "IBM Granite 3.1 8b Instruct"
-DESCRIPTION = "Try one of the sample prompts below or write your own. Remember, just like developers, \
-               AI models can make mistakes."
+DESCRIPTION = """
+<p>Granite 3.1 is a general purpose large language model released in the open under an Apache 2.0 license. Granite
+models support a 128k context length.</p>
+
+<p>Try one of the sample prompts below or write your own. Remember, AI models can make mistakes.
+<span class="gr_docs_link">
+<a href="https://www.ibm.com/granite/docs/">View Documentation</a> <i class="fa fa-external-link"></i>
+</span>
+</p>
+"""
 MAX_INPUT_TOKEN_LENGTH = 128_000
 MAX_NEW_TOKENS = 1024
 TEMPERATURE = 0.7
@@ -90,10 +98,6 @@ with gr.Blocks(
         elem_classes=["gr_title"],
     )
     gr.HTML(DESCRIPTION)
-    gr.HTML(
-        value='<a href="https://www.ibm.com/granite/docs/">View Documentation</a> <i class="fa fa-external-link"></i>',
-        elem_classes=["gr_docs_link"],
-    )
     chat_interface = gr.ChatInterface(
         fn=generate,
         examples=[