add new HEADER and put old html code in OLD_HEADER

app.py

@@ -81,8 +81,8 @@ EXAMPLES = [
 with open('logo.svg', 'r') as file:
     logo_svg = file.read()
 
-HEADER = f"""
-<table bgcolor="#1E2432" cellspacing="0" cellpadding="0"  width="450">
+OLDER_HEADER = f"""
+<table bgcolor="#1E2432" cellspacing="0" cellpadding="0"  width="100%">
     <tr>
         <td style="text-align: center;">
             <a href="https://www.patronus.ai/blog/lynx-state-of-the-art-open-source-hallucination-detection-model" style="display: flex; align-items: center;">
@@ -122,6 +122,31 @@ HEADER = f"""
         </td>
     </tr>
 </table>
+"""
+
+HEADER = f"""
+<div style="width: 100%; display: flex; flex-direction: column; gap: 8px; position: relative">
+    <div style="display: flex; justify-content: space-between">
+        <a href="https://www.patronus.ai">
+            <img src="https://postimage.me/images/2024/07/31/FullLogo_ColorDefault.png" width="125">
+        </a>
+        <div style="display: flex; gap: 4px;">
+            <a href="https://huggingface.co/PatronusAI/Llama-3-Patronus-Lynx-8B-Instruct">
+                <img src="https://img.shields.io/badge/%F0%9F%A4%97%20Model_Card-Huggingface-orange" height="20">
+            </a>
+            <a href="https://github.com/patronus-ai/Lynx-hallucination-detection">
+                <img src="https://img.shields.io/badge/GitHub-Lynx--hallucination--detection-indigo" height="20">
+            </a>
+            <a href="https://arxiv.org/abs/2407.08488">
+                <img src="https://img.shields.io/badge/arXiv-2407.08488-b31b1b.svg" height="20">
+            </a>
+        </div>
+    </div>
+    <div>
+        <h1>Lynx 8B v1.1 & Lynx 70B</h1>
+        <h1>Patronus Lynx Demo</h1>
+    </div>
+</div>
 
 **Patronus Lynx** is a state-of-the-art open-source model for hallucination detection.