import gradio as gr

from transcription import process_audio


custom_css = """
.gradio-container {
    background-color: #f5f5f5;
}
.gr-button-primary {
    background-color: #f55036 !important;
    border-color: #f55036 !important;
}
.gr-button-secondary {
    color: #f55036 !important;
    border-color: #f55036 !important;
}
#groq-badge {
    position: fixed;
    bottom: 20px;
    right: 90px;
    z-index: 1000;
}
"""


with gr.Blocks(theme=gr.themes.Default(), css=custom_css) as app:
    gr.Markdown("# 🎙️ Voice-Powered AI Assistant.")

    api_key_input = gr.Textbox(type="password", label="Enter your Groq API Key")

    with gr.Row():
        audio_inputs = gr.Audio(label="Speak here", type="numpy")

    with gr.Row():
        transcription_output = gr.Textbox(label="Transcription")
        response_output = gr.Textbox(label="AI Assistant Response")

    submit_button = gr.Button("Process", variant="primary")

    gr.HTML(
        """
    <div id="groq-badge">
        <div style="color: #f55036; font-weight: bold;">POWERED BY GROQ</div>
    </div>
    """
    )

    submit_button.click(
        process_audio,
        inputs=[audio_inputs, api_key_input],
        outputs=[transcription_output, response_output],
    )

    gr.Markdown(
        """
    ## How to use this app:
    1. Enter your Groq API Key in the provided field.
    2. Click on the microphone icon and speak your message (or forever hold your peace)! You can also provide a supported audio file. Supported audio files include mp3, mp4, mpeg, mpga, m4a, wav, and webm file types.
    3. Click the "Process" button to transcribe your speech and generate a response from our AI assistant.
    4. The transcription and AI assistant response will appear in the respective text boxes.
    
    """
    )

app.launch()