File size: 6,510 Bytes
9f50d19
 
 
a999793
 
 
a6f2237
a999793
9f50d19
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
a999793
 
 
9f50d19
a999793
 
 
7cde845
a999793
 
 
9f50d19
a999793
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9f50d19
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
65ea836
 
a999793
9f50d19
 
 
 
 
 
 
 
 
 
 
 
 
 
 
a999793
 
9f50d19
 
a999793
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
import streamlit as st
import pyttsx3
import threading
import wave
import io
import speech_recognition as sr
from gradio_client import Client
import streamlit.components.v1 as components

# Initialize session state
if "messages" not in st.session_state:
    st.session_state["messages"] = []  # Store chat history

# Function to generate a response using Gradio client
def generate_response(query):
    try:
        client = Client("Gopikanth123/llama2")
        result = client.predict(query=query, api_name="/predict")
        return result
    except Exception as e:
        return f"Error communicating with the Gradio backend: {e}"

# Function to handle user input and bot response
def handle_user_input(user_input):
    if user_input:
        # Add user message to session state
        st.session_state["messages"].append({"user": user_input})

        # Generate bot response
        response = generate_response(user_input)
        st.session_state["messages"].append({"bot": response})

        # Speak out bot response in a new thread to avoid blocking
        threading.Thread(target=speak_text, args=(response,), daemon=True).start()

# Function to speak text (Voice Output)
def speak_text(text):
    engine = pyttsx3.init()
    engine.stop()  # Ensure no previous loop is running
    engine.say(text)
    engine.runAndWait()

# Function to update chat history dynamically
def update_chat_history():
    chat_history = st.session_state["messages"]
    for msg in chat_history:
        if "user" in msg:
            st.markdown(f"<div class='chat-bubble user-message'><strong>You:</strong> {msg['user']}</div>", unsafe_allow_html=True)
        if "bot" in msg:
            st.markdown(f"<div class='chat-bubble bot-message'><strong>Bot:</strong> {msg['bot']}</div>", unsafe_allow_html=True)

# Function to recognize speech from audio received as bytes
def recognize_speech_from_audio(audio_bytes):
    st.info("Processing audio...")

    # Convert byte stream to audio file
    audio_data = io.BytesIO(audio_bytes)
    recognizer = sr.Recognizer()

    # Recognize speech from the audio data
    with sr.AudioFile(audio_data) as source:
        audio = recognizer.record(source)

    try:
        recognized_text = recognizer.recognize_google(audio)
        st.session_state["user_input"] = recognized_text
        st.success(f"Recognized Text: {recognized_text}")
        handle_user_input(recognized_text)
    except sr.UnknownValueError:
        st.error("Sorry, I couldn't understand the audio.")
    except sr.RequestError:
        st.error("Could not request results; please check your internet connection.")

# JavaScript for audio recording and sending data to Streamlit
audio_recorder_html = """
    <script>
        let audioChunks = [];
        let mediaRecorder;
        
        function startRecording() {
            navigator.mediaDevices.getUserMedia({ audio: true })
                .then(function(stream) {
                    mediaRecorder = new MediaRecorder(stream);
                    mediaRecorder.ondataavailable = function(event) {
                        audioChunks.push(event.data);
                    };
                    mediaRecorder.onstop = function() {
                        const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
                        const reader = new FileReader();
                        reader.onloadend = function() {
                            const audioBase64 = reader.result.split(',')[1];
                            window.parent.postMessage({ 'type': 'audio_data', 'audio': audioBase64 }, '*');
                        };
                        reader.readAsDataURL(audioBlob);
                    };
                    mediaRecorder.start();
                });
        }
        
        function stopRecording() {
            mediaRecorder.stop();
        }
        
        function handleStartStop() {
            if (mediaRecorder && mediaRecorder.state === "recording") {
                stopRecording();
            } else {
                startRecording();
            }
        }
    </script>
    <button onclick="handleStartStop()">Start/Stop Recording</button>
    <p>Click the button to start/stop audio recording.</p>
"""

# Main Streamlit app
st.set_page_config(page_title="Llama2 Chatbot", page_icon="🤖", layout="wide")
st.markdown(
    """
    <style>
    .stButton>button {
        background-color: #6C63FF;
        color: white;
        font-size: 16px;
        border-radius: 10px;
        padding: 10px 20px;
    }
    .stTextInput>div>input {
        border: 2px solid #6C63FF;
        border-radius: 10px;
        padding: 10px;
    }
    .chat-container {
        background-color: #F7F9FC;
        padding: 20px;
        border-radius: 15px;
        max-height: 400px;
        overflow-y: auto;
    }
    .chat-bubble {
        padding: 10px 15px;
        border-radius: 15px;
        margin: 5px 0;
        max-width: 80%;
        display: inline-block;
    }
    .user-message {
        background-color: #D1C4E9;
        text-align: left;
        margin-left: auto;
    }
    .bot-message {
        background-color: #BBDEFB;
        text-align: left;
        margin-right: auto;
    }
    .input-container {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 0;
    }
    </style>
    """,
    unsafe_allow_html=True
)

st.title("🤖 Chat with Llama2 Bot")
st.markdown(
    """
    Welcome to the *Llama2 Chatbot*!   
    - *Type* your message below, or   
    - *Speak* to the bot using your microphone.   
    """
)

# Display chat history
chat_history_container = st.container()
with chat_history_container:
    # Add input field within a form
    with st.form(key='input_form', clear_on_submit=True):
        user_input = st.text_input("Type your message here...", placeholder="Hello, how are you?")
        submit_button = st.form_submit_button("Send")

        # Handle form submission
        if submit_button:
            handle_user_input(user_input)

    # Display JavaScript for audio recording
    components.html(audio_recorder_html, height=300)

    # Update chat history on every interaction
    update_chat_history()

# Listening to the audio data sent by JavaScript
def process_audio_data():
    audio_data = st.experimental_get_query_params().get('audio', [None])[0]
    if audio_data:
        recognize_speech_from_audio(audio_data)

# Call the function to process audio if available
process_audio_data()