Update app.py

app.py

@@ -6,13 +6,15 @@ For more information on `huggingface_hub` Inference API support, please check th
 """
 client = InferenceClient(model="Futuresony/future_ai_12_10_2024.gguf")
 
-# Fixed parameters
-MAX_TOKENS = 512
-TEMPERATURE = 0.7
-TOP_P = 0.95
 
-
-def respond(message, history: list[tuple[str, str]], system_message):
+def respond(
+    message,
+    history: list[tuple[str, str]],
+    system_message,
+    max_tokens,
+    temperature,
+    top_p,
+):
     messages = [{"role": "system", "content": system_message}]
 
     for val in history:
@@ -27,10 +29,10 @@ def respond(message, history: list[tuple[str, str]], system_message):
 
     for message in client.chat_completion(
         messages,
-        max_tokens=MAX_TOKENS,
+        max_tokens=max_tokens,
         stream=True,
-        temperature=TEMPERATURE,
-        top_p=TOP_P,
+        temperature=temperature,
+        top_p=top_p,
     ):
         token = message.choices[0].delta.content
 
@@ -38,75 +40,83 @@ def respond(message, history: list[tuple[str, str]], system_message):
         yield response
 
 
-# Gradio interface setup
-with gr.Blocks() as demo:
-    # Chatbot Interface
-    chatbot = gr.Chatbot(type="messages")  # Use 'messages' format for compatibility
-    state = gr.State([])
-    system_message = gr.Textbox(
-        value="You are a helpful assistant.",
-        label="System Prompt",
-        placeholder="Enter system instructions here...",
-    )
+# JavaScript for speech recognition
+speech_recognition_js = """
+<script>
+    let micButton = document.getElementById('mic_button');
+    let userInputBox = document.getElementById('user_input');
+    let recognition = null;
+
+    if ('webkitSpeechRecognition' in window) {
+        recognition = new webkitSpeechRecognition();
+        recognition.continuous = false;
+        recognition.interimResults = false;
+
+        recognition.onresult = function(event) {
+            const transcript = event.results[0][0].transcript;
+            userInputBox.value = transcript;
+        };
+
+        recognition.onspeechend = function() {
+            recognition.stop(); // Stop listening after 2 seconds of silence
+        };
+
+        micButton.onclick = function() {
+            recognition.start(); // Start listening when mic button is clicked
+        };
+    } else {
+        micButton.onclick = function() {
+            alert("Speech recognition is not supported in this browser.");
+        };
+    }
+</script>
+"""
+
+# Gradio Chat Interface
+demo = 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)",
+        ),
+    ],
+)
+
+# Add mic button to the interface
+with gr.Blocks() as ui:
     with gr.Row():
-        user_message = gr.Textbox(
-            label="Your Message",
-            placeholder="Type your message or use the mic button...",
-            elem_id="user_input_box",
+        gr.HTML(
+            """
+            <style>
+                #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%;
+                }
+            </style>
+            <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined">
+            <div style="display: flex; align-items: center;">
+                <button id="mic_button">🎤</button>
+                <input id="user_input" type="text" placeholder="Type your message here..." />
+            </div>
+            """
         )
-        mic_button = gr.Button(value="🎤", elem_id="mic_button")  # Add mic button
-
-    send_button = gr.Button("Send")
-
-    # Function to handle user inputs and display assistant responses
-    def chat(user_input, chat_history, sys_msg):
-        response_generator = respond(user_input, chat_history, sys_msg)
-        response = ""
-        for partial_response in response_generator:
-            response = partial_response
-        chat_history.append((user_input, response))
-        return chat_history, chat_history
-
-    send_button.click(
-        chat,
-        inputs=[user_message, state, system_message],
-        outputs=[chatbot, state],
-    )
-
-    # Inject JavaScript for Speech Recognition using Gradio's HTML component
-    gr.HTML(
-        """
-        <script>
-        let micButton = document.getElementById('mic_button');
-        let userInputBox = document.getElementById('user_input_box');
-        let recognition = null;
-
-        if ('webkitSpeechRecognition' in window) {
-            recognition = new webkitSpeechRecognition();
-            recognition.continuous = false;
-            recognition.interimResults = false;
-
-            recognition.onresult = function(event) {
-                const transcript = event.results[0][0].transcript;
-                userInputBox.value = transcript;
-            };
-
-            recognition.onspeechend = function() {
-                recognition.stop(); // Stop listening after 2 seconds of silence
-            };
-
-            micButton.onclick = function() {
-                recognition.start(); // Start listening when mic button is clicked
-            };
-        } else {
-            micButton.onclick = function() {
-                alert("Speech recognition is not supported in this browser.");
-            };
-        }
-        </script>
-        """
-    )
-
-if __name__ == "__main__":
+        gr.HTML(speech_recognition_js)  # Inject JavaScript for mic button
+
     demo.launch()