app.py

import gradio as gr
import speech_recognition as sr
from huggingface_hub import InferenceClient
from io import BytesIO

client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")

def respond(
    message,
    history: list[tuple[str, str]],
    system_message,
    max_tokens,
    temperature,
    top_p,
):
    try:
        messages = [{"role": "system", "content": system_message}]

        for val in history:
            if val[0]:
                messages.append({"role": "user", "content": val[0]})
            if val[1]:
                messages.append({"role": "assistant", "content": val[1]})

        messages.append({"role": "user", "content": message})

        response = ""

        for message in client.chat_completion(
            messages,
            max_tokens=max_tokens,
            stream=True,
            temperature=temperature,
            top_p=top_p,
        ):
            token = message.choices[0].delta.content
            response += token
            yield response
    
    except Exception as e:
        yield f"An error occurred: {str(e)}"

def recognize_speech(audio_file):
    recognizer = sr.Recognizer()
    with sr.AudioFile(audio_file) as source:
        audio_data = recognizer.record(source)
        try:
            text = recognizer.recognize_google(audio_data)
            return text
        except sr.UnknownValueError:
            return "Sorry, I could not understand the audio."
        except sr.RequestError as e:
            return f"Could not request results; {e}"

# Define custom CSS
custom_css = """
/* Add your custom CSS styles here */
body {
    font-family: Arial, sans-serif;
    background-color: white;
}
.gradio-container {
    border: linear-gradient(90deg, rgba(0,0,0,1) 1%, rgba(15,6,83,1) 53%, rgba(22,9,121,1) 100%, rgba(0,212,255,1) 100%);
    border-radius: 10px;
    padding: 20px;
    background-color: #ffffff;
    box-shadow:0 0 12px 12px solid black; 
}
.gradio-input {
    border-radius: 5px;
    border: 1px solid #ddd;
    padding: 10px;
}
.gradio-button {
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
}
.gradio-output {
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    box-shadow:0 0 12px 12px solid grey; 
}
"""

# Create a Gradio chat interface with custom CSS
with gr.Blocks(css=custom_css) as demo:
    system_msg = gr.Textbox(value="You are a Chatbot. Your name is Evy. You are Developed By Joe.", label="System message")
    max_tokens = gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens")
    temperature = gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature")
    top_p = gr.Slider(minimum=0.1, maximum=1.0, value=0.95, step=0.05, label="Top-p (nucleus sampling)")
    
    input_textbox = gr.Textbox(label="Your message")
    voice_input = gr.Audio(source="microphone", type="file", label="Record your message")
    with gr.Row():
        submit_button = gr.Button("Send")
        voice_button = gr.Button("🎤 Speak")
        
    chatbot_output = gr.Textbox(label="Chatbot response", interactive=False)

    submit_button.click(respond, inputs=[input_textbox, gr.State([]), system_msg, max_tokens, temperature, top_p], outputs=chatbot_output)
    voice_input.change(lambda x: recognize_speech(BytesIO(x)), inputs=[voice_input], outputs=input_textbox)
    
# Launch the interface
if __name__ == "__main__":
    demo.launch()