NeuroTrace-AI / frontend.py
MalikShehram's picture
Create frontend.py
33a823e verified
import gradio as gr
# Custom CSS for a professional, clean medical UI
custom_css = """
body { background-color: #f4f7f6; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
.gradio-container { max-width: 900px !important; margin: auto; padding-top: 40px; }
.header-text { text-align: center; color: #2c3e50; margin-bottom: 10px; }
.sub-text { text-align: center; color: #7f8c8d; font-size: 1.1em; margin-bottom: 30px; }
.box-container { box-shadow: 0 4px 8px rgba(0,0,0,0.1); border-radius: 10px; background: white; padding: 20px; }
.predict-btn { background-color: #3498db !important; color: white !important; font-weight: bold; border-radius: 5px; }
.predict-btn:hover { background-color: #2980b9 !important; }
"""
def build_ui(predict_function):
# Using Gradio Blocks for advanced layout control
with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as interface:
# Header Section
gr.Markdown("<h1 class='header-text'>🧠 Neurological Assessment Tool</h1>")
gr.Markdown("<p class='sub-text'>AI-Powered Parkinson's Disease Detection via Spiral/Wave Analysis</p>")
# Application Body
with gr.Row(elem_classes="box-container"):
# Left Column: Input
with gr.Column():
gr.Markdown("### 1. Upload Patient Scan")
image_input = gr.Image(type="pil", label="Drawings (Spiral or Wave)")
analyze_btn = gr.Button("Analyze Scan", elem_classes="predict-btn")
# Right Column: Output
with gr.Column():
gr.Markdown("### 2. AI Diagnosis Results")
result_output = gr.Label(num_top_classes=2, label="Confidence Scores")
gr.Markdown("*Note: This tool is for research purposes and does not replace a clinical diagnosis.*")
# Connect the button to the backend function
analyze_btn.click(
fn=predict_function,
inputs=image_input,
outputs=result_output
)
return interface