Update app.py

app.py

@@ -1,8 +1,10 @@
 import gradio as gr
 from huggingface_hub import InferenceClient
 
-# Initialize Hugging Face Inference Client
-client = InferenceClient(model="Futuresony/future_ai_12_10_2024.gguf")
+"""
+For more information on `huggingface_hub` Inference API support, please check the docs: https://huggingface.co/docs/huggingface_hub/v0.22.2/en/guides/inference
+"""
+client = InferenceClient("Futuresony/future_ai_12_10_2024.gguf")
 
 
 def respond(
@@ -24,6 +26,7 @@ def respond(
     messages.append({"role": "user", "content": message})
 
     response = ""
+
     for message in client.chat_completion(
         messages,
         max_tokens=max_tokens,
@@ -32,124 +35,30 @@ def respond(
         top_p=top_p,
     ):
         token = message.choices[0].delta.content
+
         response += token
         yield response
 
 
-# Custom HTML and JS for mic button and speech-to-text
-mic_html = """
-<div class="mic-container">
-  <button id="mic_button" title="Click to speak">
-    <span class="material-symbols-outlined">mic</span>
-  </button>
-  <input id="user_input" type="text" placeholder="Type your message here..." />
-</div>
-<div id="status" class="status"></div>
-<style>
-.mic-container {
-  display: flex;
-  align-items: center;
-  max-width: 500px;
-  margin: 20px auto;
-  padding: 10px;
-  background: #f5f5f5;
-  border-radius: 8px;
-}
-#mic_button {
-  font-family: 'Material Symbols Outlined';
-  font-size: 24px;
-  color: #555;
-  border: none;
-  background: none;
-  cursor: pointer;
-  padding: 4px;
-  margin-right: 8px;
-}
-#user_input {
-  width: 100%;
-  padding: 8px;
-  font-size: 16px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-}
-.status {
-  margin-top: 20px;
-  text-align: center;
-  color: #666;
-}
-</style>
-<script>
-let micButton = document.getElementById('mic_button');
-let userInputBox = document.getElementById('user_input');
-let statusDiv = document.getElementById('status');
-let recognition = null;
-
-if ('webkitSpeechRecognition' in window) {
-    recognition = new webkitSpeechRecognition();
-    recognition.continuous = false;
-    recognition.interimResults = false;
-    recognition.lang = 'en-US';
-
-    recognition.onstart = function() {
-        statusDiv.textContent = "Listening...";
-        micButton.style.color = '#4CAF50';
-    };
-
-    recognition.onresult = function(event) {
-        const transcript = event.results[0][0].transcript;
-        userInputBox.value = transcript;
-        statusDiv.textContent = "Done listening.";
-        micButton.style.color = '#555';
-    };
-
-    recognition.onerror = function(event) {
-        console.error('Speech recognition error:', event.error);
-        statusDiv.textContent = "Error: " + event.error;
-        micButton.style.color = '#555';
-    };
-
-    recognition.onspeechend = function() {
-        recognition.stop();
-        statusDiv.textContent = "Stopped listening.";
-        micButton.style.color = '#555';
-    };
-
-    micButton.onclick = function() {
-        try {
-            recognition.start();
-        } catch(err) {
-            console.error('Recognition already started:', err);
-            recognition.stop();
-        }
-    };
-} else {
-    micButton.onclick = function() {
-        alert("Speech recognition is not supported in this browser.");
-        statusDiv.textContent = "Speech recognition not supported";
-    };
-    statusDiv.textContent = "Speech recognition not available";
-}
-</script>
 """
+For information on how to customize the ChatInterface, peruse the gradio docs: https://www.gradio.app/docs/chatinterface
+"""
+demo = gr.ChatInterface(
+    respond,
+    additional_inputs=[
+        gr.Textbox(value="You are a friendly Chatbot.", label="System message"),
+        gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens"),
+        gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature"),
+        gr.Slider(
+            minimum=0.1,
+            maximum=1.0,
+            value=0.95,
+            step=0.05,
+            label="Top-p (nucleus sampling)",
+        ),
+    ],
+)
 
-# Gradio Chat Interface with Mic Button
-with gr.Blocks() as demo:
-    gr.HTML(mic_html)
-    chatbot = gr.ChatInterface(
-        fn=respond,
-        additional_inputs=[
-            gr.Textbox(value="You are a friendly Chatbot.", label="System message"),
-            gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens"),
-            gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature"),
-            gr.Slider(
-                minimum=0.1,
-                maximum=1.0,
-                value=0.95,
-                step=0.05,
-                label="Top-p (nucleus sampling)",
-            ),
-        ],
-    )
 
 if __name__ == "__main__":
     demo.launch()