Enhance Gradio interface by replacing markdown with a styled HTML header that includes links to resources.

app.py

@@ -56,14 +56,26 @@ def ocr_image_gradio(image, max_tokens=4096):
         return f"Error processing image: {str(e)}"
 
 # Create Gradio interface
-with gr.Blocks(title="Nanonets OCR Demo", theme=gr.themes.Soft()) as demo:
-    # Replace simple markdown with styled HTML header
+with gr.Blocks(title="Nanonets OCR Demo") as demo:
+    # Replace simple markdown with styled HTML header that includes resources
     gr.HTML("""
     <div class="title" style="text-align: center">
         <h1>🔍 Nanonets OCR - Document Text Extraction</h1>
         <p style="font-size: 1.1em; color: #6b7280; margin-bottom: 0.6em;">
             A state-of-the-art image-to-markdown OCR model for intelligent document processing
         </p>
+        <div style="display: flex; justify-content: center; gap: 20px; margin: 15px 0;">
+            <a href="https://huggingface.co/nanonets/Nanonets-OCR-s" target="_blank" style="text-decoration: none; color: #2563eb; font-weight: 500;">
+                📚 Hugging Face Model
+            </a>
+            <a href="https://nanonets.com/research/nanonets-ocr-s/" target="_blank" style="text-decoration: none; color: #2563eb; font-weight: 500;">
+                📝 Release Blog
+            </a>
+            <a href="https://github.com/NanoNets/docext" target="_blank" style="text-decoration: none; color: #2563eb; font-weight: 500;">
+                💻 GitHub Repository
+            </a>
+        </div>
+        <hr style="width: 70%; margin: 15px auto; border: none; height: 1px; background-color: #e5e7eb;">
     </div>
     """)
     
@@ -136,18 +148,6 @@ with gr.Blocks(title="Nanonets OCR Demo", theme=gr.themes.Soft()) as demo:
         - **Complex Table Extraction**: Accurately extracts complex tables from documents and converts them into both markdown 
           and HTML table formats.
         """)
-    
-    # Add links section at the bottom
-    gr.Markdown("""
-    ---
-    ### Resources
-    
-    - [📚 Hugging Face Model](https://huggingface.co/nanonets/Nanonets-OCR-s)
-    - [📝 Release Blog](https://nanonets.com/research/nanonets-ocr-s/)
-    - [💻 GitHub Repository](https://github.com/NanoNets/docext)
-    
-    ---
-    """)
 
 if __name__ == "__main__":
     demo.queue().launch()