import gradio as gr

# Load the model
interface = gr.load("models/fastinom/ASR_fassy")

# Customize the Gradio interface with additional styles and layout
css = """
body {
background-color: #f5f5f5;
font-family: 'Arial', sans-serif;
}
.container {
max-width: 800px;
margin: auto;
padding: 20px;
background-color: #ffffff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
h1 {
text-align: center;
color: #333;
}
.audio-container {
display: flex;
justify-content: center;
margin-top: 20px;
}
.output-container {
margin-top: 20px;
}
.button-container {
display: flex;
justify-content: center;
margin-top: 20px;
}
"""

# Define the function to use the loaded model
def custom_interface(audio):
    return interface(audio)

# Define the Gradio Blocks layout
with gr.Blocks(css=css) as demo:
    gr.Markdown("# Shona Speech-to-Text App", elem_classes="container")
    
    with gr.Row(elem_classes="container"):
        gr.Markdown("### Record your voice in Shona and get the transcription:")
        
    audio = gr.Audio(type="filepath", label="Record Your Voice", elem_classes="audio-container")
    transcription = gr.Textbox(label="Transcription", placeholder="Transcription will appear here...", elem_classes="output-container")

    with gr.Row(elem_classes="button-container"):
        submit_btn = gr.Button("Submit")
    
    # Connect the submit button to the custom interface function
    submit_btn.click(custom_interface, inputs=audio, outputs=transcription)

# Launch the interface
demo.launch()