Update chat_app_remote.py

chat_app_remote.py

@@ -1,202 +1,15 @@
-# import gradio as gr
-# from gradio_client import Client
-# import uuid
-# import warnings
-# import numpy as np
-# import json
-# import os
-# from gradio_client import Client, FileData, handle_file
-# warnings.filterwarnings("ignore")
-# import tempfile
-# import scipy.io.wavfile as wavfile
-
-# client = Client(os.environ['src'])
-
-# custom_css = """
-# .gradio-container {
-#     justify-content: flex-start !important;
-# }
-# """
-
-# def create_frontend_demo():
-#     # This function always uses the session ID stored per browser session (via gr.State).
-#     # The session_id is generated on startup if missing and should not be changed arbitrarily.
-#     def chat_function(message, history, session_id):
-#         if not session_id:
-#             # Generate a new session ID if not available in the client's local state.
-#             session_id = "user_" + uuid.uuid4().hex[:8]
-        
-#         result = client.predict(
-#             message,      # message
-#             history,      # conversation history
-#             session_id,   # session id as defined in the front-end per client
-#             fn_index=0    # function to call in the backend
-#         )
-        
-#         # The backend returns: empty_string, new_history, audio_path, display_text
-#         _, new_history, audio_path, display_text = result
-        
-#         # Return an empty message, the updated history, the audio path, the session_id, and a display text.
-#         return "", new_history, audio_path, session_id, display_text
-
-#     with gr.Blocks(css=custom_css, theme="Respair/[email protected]") as demo:
-#         # The session_id_state is stored per front-end session, so each user gets their own.
-#         session_id_state = gr.State("")
-        
-#         with gr.Tabs() as tabs:
-#             with gr.Tab("Chat"):
-#                 # Display the session id visibly in the Chat tab.
-#                 session_display = gr.Markdown("Current Session ID: None", label="Session ID")
-#                 chatbot = gr.Chatbot(
-#                     label="Conversation History",
-#                     height=400,
-#                     avatar_images=[
-#                         "photo_2024-03-01_22-30-42.jpg",
-#                         "colored_blured.png"
-#                     ],
-#                     placeholder="Start chatting with Aira..."
-#                 )
-
-#                 gr.Markdown(
-#                     """Please, go to the Options tab and set a session ID. Do not start with 'None'.<br>
-#                     オプションタブに移動して、セッションIDを設定してください。Noneから始めないでください"""
-#                 )
-                
-#                 # Use only a textbox for input (no visible send button)
-#                 with gr.Column():
-#                     msg = gr.Textbox(
-#                         show_label=False,
-#                         placeholder="Enter text and press enter",
-#                         container=True
-#                     )
-                
-#                 audio_output = gr.Audio(
-#                     label="Aira's Response",
-#                     type="filepath",
-#                     streaming=False,
-#                     autoplay=True
-#                 )
-
-#                 with gr.Row():
-#                     audio_input = gr.Audio(
-#                         sources=["microphone"],
-#                         type="numpy",
-#                         label="Audio Input",
-#                         streaming=False
-#                     )
-                    
-#             with gr.Tab("Options"):
-#                 with gr.Column():
-#                     # This textbox lets the user set their session id only for this client
-#                     session_input = gr.Textbox(
-#                         value="",
-#                         label="Session ID (leave blank for new session)"
-#                     )
-#                     gen_id_btn = gr.Button("Set Session ID")
-#                     session_msg = gr.Markdown("")
-#                     clear_btn = gr.Button("Clear Conversation")
-                    
-#                     gr.Markdown(
-#                         """
-#                         This is a personal project I wanted to do for a while (G̶o̶t̶t̶a̶ ̶m̶a̶k̶e̶ ̶u̶s̶e̶ ̶o̶f̶ ̶t̶h̶i̶s̶ ̶P̶r̶o̶ ̶s̶u̶b̶ ̶p̶e̶r̶k̶s̶ ̶w̶h̶i̶l̶e̶ ̶I̶ ̶h̶a̶v̶e̶ ̶i̶t̶). <br>
-#                         Aira's voice was designed to be unique; it doesn't belong to any real person out there. <br>
-                        
-#                         Her design is also based on a VTuber project I did a few years ago (notice the lazy brush strokes).<br><br>
-                        
-#                         You can talk to her in English or Japanese, but she will only respond in Japanese 
-#                         (Subs over dubs, bros). Ask her to give you a Subtitle if you can't talk in Japanese. <br>
-                        
-#                         The majority of the latency depends on HF's inference API.
-#                         The language modelling part is off-the-shelf and not fine-tuned – please beware of that. 
-                        
-#                         1. Enter your Session ID above or leave blank for a new one.
-#                         2. Click 'Set Session ID' to confirm.
-#                         3. Use 'Clear Conversation' to reset the chat.
-#                         4. Your conversation history is saved on a per-session basis.
-                        
-#                         I'll try to keep this demo up for as long as I can afford.
-#                         """
-#                     )
-
-#         def respond(message, chat_history, session_id):
-#             return chat_function(message, chat_history, session_id)
-
-#         # Submit text input with Enter key
-#         msg.submit(
-#             respond,
-#             inputs=[msg, chatbot, session_id_state],
-#             outputs=[msg, chatbot, audio_output, session_id_state, session_display]
-#         )
-
-#         # Set session function that simply uses or generates a unique session id
-#         def set_session(user_id):
-#             if not user_id.strip():
-#                 new_id = "user_" + uuid.uuid4().hex[:8]
-#                 display_text = f"Current Session ID: {new_id}"
-#                 return new_id, "", display_text
-#             else:
-#                 display_text = f"Current Session ID: {user_id}"
-#                 return user_id, "", display_text
-
-#         gen_id_btn.click(
-#             set_session,
-#             inputs=[session_input],
-#             outputs=[session_id_state, session_msg, session_display]
-#         )
-        
-#         def handle_audio(audio_data, history, session_id):
-#             if audio_data is None:
-#                 return None, history, session_id, f"Current Session ID: {session_id}"
-                            
-#             try:
-#                 sample_rate, audio_array = audio_data
-#                 with tempfile.NamedTemporaryFile(suffix='.wav', delete=True) as temp:
-#                     wavfile.write(temp.name, sample_rate, audio_array)
-#                     audio = {"path": temp.name, "meta": {"_type": "gradio.FileData"}}
-#                     result = client.predict(
-#                         audio,
-#                         history,
-#                         session_id,
-#                         api_name="/handle_audio"
-#                     )
-#                     audio_path, new_history, new_session_id = result
-#                     display_text = f"Current Session ID: {new_session_id}"
-#                     return audio_path, new_history, new_session_id, display_text
-#             except Exception as e:
-#                 print(f"Error processing audio: {str(e)}")
-#                 import traceback
-#                 traceback.print_exc()
-#                 return None, history, session_id, f"Error processing audio. Session ID: {session_id}"
-            
-#         audio_input.stop_recording(
-#             handle_audio,
-#             inputs=[audio_input, chatbot, session_id_state],
-#             outputs=[audio_output, chatbot, session_id_state, session_display]
-#         )
-
-#         clear_btn.click(
-#             lambda: [],
-#             None,
-#             [chatbot]
-#         )
-
-#     return demo
-
-# if __name__ == "__main__":
-#     demo = create_frontend_demo()
-#     demo.launch(show_error=True)
 import gradio as gr
 from gradio_client import Client
 import uuid
 import warnings
 import numpy as np
+import json
 import os
+from gradio_client import Client, FileData, handle_file
+warnings.filterwarnings("ignore")
 import tempfile
 import scipy.io.wavfile as wavfile
 
-warnings.filterwarnings("ignore")
-
-# Set up the client for your backend on Hugging Face Spaces
 client = Client(os.environ['src'])
 
 custom_css = """
@@ -206,58 +19,64 @@ custom_css = """
 """
 
 def create_frontend_demo():
-    # The backend or conversation history might be providing a persistent session id.
-    # To avoid that, we ignore any session id returned from the backend if our gr.State was empty.
+    # This function always uses the session ID stored per browser session (via gr.State).
+    # The session_id is generated on startup if missing and should not be changed arbitrarily.
     def chat_function(message, history, session_id):
-        # If no session id exists in gr.State, generate a new one locally.
         if not session_id:
-            new_session = "user_" + uuid.uuid4().hex[:8]
-        else:
-            new_session = session_id
-
-        # Call the backend with our new_session even if one was previously returned.
+            # Generate a new session ID if not available in the client's local state.
+            session_id = "user_" + uuid.uuid4().hex[:8]
+        
         result = client.predict(
-            message,    # text message
-            history,    # conversation history
-            new_session,  # force our new_session
-            fn_index=0  # backend function index
+            message,      # message
+            history,      # conversation history
+            session_id,   # session id as defined in the front-end per client
+            fn_index=0    # function to call in the backend
         )
+        
+        # The backend returns: empty_string, new_history, audio_path, display_text
+        _, new_history, audio_path, display_text = result
+        
+        # Return an empty message, the updated history, the audio path, the session_id, and a display text.
+        return "", new_history, audio_path, session_id, display_text
 
-        # Suppose backend returns: (_ , new_history, audio_path, returned_session, display_text)
-        # We ignore the returned session id and instead continue with our new_session variable.
-        _, new_history, audio_path, returned_session, display_text = result
-
-        # Debug: if you want to check what was returned, uncomment the line below.
-        # print("Backend returned session id:", returned_session, "using ours:", new_session)
-
-        return "", new_history, audio_path, new_session, display_text
-
-    with gr.Blocks(css=custom_css, theme="default") as demo:
-        # gr.State stores the session id, which is kept in memory.
+    with gr.Blocks(css=custom_css, theme="Respair/[email protected]") as demo:
+        # The session_id_state is stored per front-end session, so each user gets their own.
         session_id_state = gr.State("")
-
-        with gr.Tabs():
+        
+        with gr.Tabs() as tabs:
             with gr.Tab("Chat"):
+                # Display the session id visibly in the Chat tab.
                 session_display = gr.Markdown("Current Session ID: None", label="Session ID")
                 chatbot = gr.Chatbot(
                     label="Conversation History",
                     height=400,
-                    placeholder="Start chatting..."
+                    avatar_images=[
+                        "photo_2024-03-01_22-30-42.jpg",
+                        "colored_blured.png"
+                    ],
+                    placeholder="Start chatting with Aira..."
                 )
+
                 gr.Markdown(
-                    "If the session id shows None upon refresh, a new session will be generated once you send a message."
-                )
-                msg = gr.Textbox(
-                    show_label=False,
-                    placeholder="Enter text and press Enter",
-                    container=True
+                    """Please, go to the Options tab and set a session ID. Do not start with 'None'.<br>
+                    オプションタブに移動して、セッションIDを設定してください。Noneから始めないでください"""
                 )
+                
+                # Use only a textbox for input (no visible send button)
+                with gr.Column():
+                    msg = gr.Textbox(
+                        show_label=False,
+                        placeholder="Enter text and press enter",
+                        container=True
+                    )
+                
                 audio_output = gr.Audio(
-                    label="Bot's Audio Response",
+                    label="Aira's Response",
                     type="filepath",
                     streaming=False,
                     autoplay=True
                 )
+
                 with gr.Row():
                     audio_input = gr.Audio(
                         sources=["microphone"],
@@ -265,9 +84,10 @@ def create_frontend_demo():
                         label="Audio Input",
                         streaming=False
                     )
-
+                    
             with gr.Tab("Options"):
                 with gr.Column():
+                    # This textbox lets the user set their session id only for this client
                     session_input = gr.Textbox(
                         value="",
                         label="Session ID (leave blank for new session)"
@@ -275,24 +95,40 @@ def create_frontend_demo():
                     gen_id_btn = gr.Button("Set Session ID")
                     session_msg = gr.Markdown("")
                     clear_btn = gr.Button("Clear Conversation")
+                    
                     gr.Markdown(
                         """
-                        1. Enter your Session ID above (or leave blank to get a new one).<br>
-                        2. Click 'Set Session ID' to confirm.<br>
-                        3. Click 'Clear Conversation' to reset the chat.
+                        This is a personal project I wanted to do for a while (G̶o̶t̶t̶a̶ ̶m̶a̶k̶e̶ ̶u̶s̶e̶ ̶o̶f̶ ̶t̶h̶i̶s̶ ̶P̶r̶o̶ ̶s̶u̶b̶ ̶p̶e̶r̶k̶s̶ ̶w̶h̶i̶l̶e̶ ̶I̶ ̶h̶a̶v̶e̶ ̶i̶t̶). <br>
+                        Aira's voice was designed to be unique; it doesn't belong to any real person out there. <br>
+                        
+                        Her design is also based on a VTuber project I did a few years ago (notice the lazy brush strokes).<br><br>
+                        
+                        You can talk to her in English or Japanese, but she will only respond in Japanese 
+                        (Subs over dubs, bros). Ask her to give you a Subtitle if you can't talk in Japanese. <br>
+                        
+                        The majority of the latency depends on HF's inference API.
+                        The language modelling part is off-the-shelf and not fine-tuned – please beware of that. 
+                        
+                        1. Enter your Session ID above or leave blank for a new one.
+                        2. Click 'Set Session ID' to confirm.
+                        3. Use 'Clear Conversation' to reset the chat.
+                        4. Your conversation history is saved on a per-session basis.
+                        
+                        I'll try to keep this demo up for as long as I can afford.
                         """
                     )
 
         def respond(message, chat_history, session_id):
             return chat_function(message, chat_history, session_id)
 
+        # Submit text input with Enter key
         msg.submit(
             respond,
             inputs=[msg, chatbot, session_id_state],
             outputs=[msg, chatbot, audio_output, session_id_state, session_display]
         )
 
-        # A separate button handler to let the user set a session id manually.
+        # Set session function that simply uses or generates a unique session id
         def set_session(user_id):
             if not user_id.strip():
                 new_id = "user_" + uuid.uuid4().hex[:8]
@@ -307,8 +143,7 @@ def create_frontend_demo():
             inputs=[session_input],
             outputs=[session_id_state, session_msg, session_display]
         )
-
-        # Handler for audio input (if implemented).
+        
         def handle_audio(audio_data, history, session_id):
             if audio_data is None:
                 return None, history, session_id, f"Current Session ID: {session_id}"
@@ -324,13 +159,13 @@ def create_frontend_demo():
                         session_id,
                         api_name="/handle_audio"
                     )
-                    # Assume backend returns (audio_path, new_history, returned_session)
-                    audio_path, new_history, returned_session = result
-                    # Force our session id rather than any returned one
-                    display_text = f"Current Session ID: {session_id}"
-                    return audio_path, new_history, session_id, display_text
+                    audio_path, new_history, new_session_id = result
+                    display_text = f"Current Session ID: {new_session_id}"
+                    return audio_path, new_history, new_session_id, display_text
             except Exception as e:
                 print(f"Error processing audio: {str(e)}")
+                import traceback
+                traceback.print_exc()
                 return None, history, session_id, f"Error processing audio. Session ID: {session_id}"
             
         audio_input.stop_recording(
@@ -339,10 +174,14 @@ def create_frontend_demo():
             outputs=[audio_output, chatbot, session_id_state, session_display]
         )
 
-        clear_btn.click(lambda: [], None, [chatbot])
+        clear_btn.click(
+            lambda: [],
+            None,
+            [chatbot]
+        )
 
     return demo
 
 if __name__ == "__main__":
     demo = create_frontend_demo()
-    demo.launch(show_error=True)
+    demo.launch(show_error=True)