Add informational footer box with links to documentation

- Added custom footer styling with white background and shadow
- Included links to Evaluate Model Guide and SR Quick Start page
- Matches the design from SR demo application

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

app.py

@@ -321,6 +321,24 @@ with gr.Blocks(
         color: #374151 !important;
         font-size: 0.85rem !important;
     }
+    .custom-footer {
+        max-width: 800px !important;
+        margin: 2rem auto !important;
+        background: white !important;
+        border-radius: 12px !important;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+        border: 1px solid #e5e7eb !important;
+        padding: 1.5rem !important;
+        text-align: center !important;
+    }
+    .custom-footer a {
+        color: #1975cf !important;
+        text-decoration: none !important;
+        font-weight: 600 !important;
+    }
+    .custom-footer a:hover {
+        text-decoration: underline !important;
+    }
     """
 ) as demo:
     
@@ -427,6 +445,20 @@ with gr.Blocks(
         inputs=input_image,
         outputs=output_text
     )
+    
+    # Footer
+    gr.HTML("""
+    <div class="custom-footer">
+        <div style="margin-bottom: 0.5rem;">
+            For a detailed walkthrough, please see our
+            <a href="http://localhost:3000/sr/evaluate-sr" target="_blank">Evaluate Model Guide</a>.
+        </div>
+        <div>
+            To get started quickly, visit our
+            <a href="http://localhost:3000/sr/quick-start" target="_blank">SR Quick Start page</a>.
+        </div>
+    </div>
+    """)
 
 # Launch the demo
 if __name__ == "__main__":