app.py

import time
import random
import gradio as gr
from transformers import pipeline

p = pipeline("automatic-speech-recognition", "facebook/wav2vec2-base-960h")

def user(user_message, history):
    return "", history + [[user_message, None]]

# def transcribe(audio, state=""):
#     text = p(audio)["text"]
#     state += text + " "
#     return state, state

def transcribe(audio):
    text = p(audio)["text"]
    return text

def bot(history):
    bot_message = random.choice(["How are you?", "I love you", "I'm very hungry"])
    history[-1][1] = ""
    for character in bot_message:
        history[-1][1] += character
        time.sleep(0.05)
        yield history

css = """
        .gradio-container {
            font-family: 'IBM Plex Sans', sans-serif;
        }
        .gr-button {
            color: white;
            border-color: black;
            background: black;
        }
        .container {
            max-width: 730px;
            margin: auto;
            padding-top: 1.5rem;
        }
        #chatbot {
            min-height: 30rem;
            margin-bottom: 15px;
            margin-left: auto;
            margin-right: auto;
        }
        #prompt-container {
            margin-bottom: 15px;
            margin-left: auto;
            margin-right: auto;
        }
"""

with gr.Blocks(css=css) as demo:

    gr.HTML(
        """
            <div style="text-align: center; margin: 0 auto;">
              <div
                style="
                  display: inline-flex;
                  align-items: center;
                  gap: 0.8rem;
                  font-size: 1.75rem;
                "
              >
                <h1 style="font-weight: 900; margin-bottom: 7px;margin-top:5px">
                  Interview with AI (Really?)
                </h1>
              </div>
            </div>
        """
    )
    
    with gr.Box():
        
        chatbot = gr.Chatbot([], show_label=False, elem_id="chatbot").style(height="auto")
    
        with gr.Row(elem_id="prompt-container").style(mobile_collapse=False, equal_height=True):
            with gr.Column(scale=0.8):
                txt = gr.Textbox(
                    show_label=False,
                    placeholder="Type and press enter, or record your response...",
                ).style(container=False)
            with gr.Column(scale=0.2, min_width=0):
                send = gr.Button("Send")

        with gr.Row(elem_id="audio-container").style(mobile_collapse=False, equal_height=True):
            with gr.Column(scale=0.8):
                recorder = gr.Audio(source="microphone", type="filepath", show_label=False, visible=False).style(container=False)

                action_btn = gradio.Button('Start')
                def next_line(action, _):
                    if action == 'Start':
                        return {action_btn: 'Next', recorder: gradio.update(visible=True)}
                    else:
                        return {action_btn: 'Done', recorder: gradio.update(visible=False)}
                
            with gr.Column(scale=0.2, min_width=0):
                speech = gr.Button("Submit speech")

        action_btn.click(next_line, inputs=[action_btn, recorder], outputs=[action_btn, recorder])
        speech.click(transcribe, inputs=recorder, outputs=txt)
        txt.submit(user, [txt, chatbot], [txt, chatbot], queue=False).then(
            bot, chatbot, chatbot
        )
        send.click(user, [txt, chatbot], [txt, chatbot], queue=False).then(
            bot, chatbot, chatbot
        )

demo.queue()
demo.launch()