Update UI

app.py

@@ -11,7 +11,7 @@ For more information on `huggingface_hub` Inference API support, please check th
  
 TOKEN = os.getenv("HF_TOKEN")
  
-client = InferenceClient("HuggingFaceH4/zephyr-7b-beta" , token=TOKEN)
+client = InferenceClient("HuggingFaceH4/zephyr-7b-beta" , token="")
 system_message ="You are a capable and freindly assistant."
 history = []
 no_change_btn = gr.Button()
@@ -19,16 +19,42 @@ enable_btn = gr.Button(interactive=True)
 disable_btn = gr.Button(interactive=False)
 
 #  ================================================================================================================================
+#  ================================================================================================================================
+def initialiate_state():
+    state = gr.State()
+    state.history = list[tuple[str, str]]
+    state.current_query = ""
+    state.current_response = ""
+    state.roles = ["user", "assistant"]
+    return state
+
+def add_question(state, textbox):
+    print(textbox)
+    state.current_query = textbox.value
+    state.current_response = ""
+    state.history.append({"role": "user", "content": textbox.value})
+    return state , textbox
+
+def add_response(state,chatbot,  assistant_message):
+    current_question = state.current_query
+    state.current_response = assistant_message
+    state.history.append({"role": "system", "content": assistant_message})
+    chatbot.append((current_question , assistant_message))
+    return state , assistant_message
+
+
 #  ================================================================================================================================
 
 def chat(
     state,
+    chatbot,
     message,
     # history: list[tuple[str, str]],
     max_tokens,
     temperature,
     top_p,
 ):
+    
     print("Message: ", message)
     print("History: ", history)
     print("System Message: ", system_message)
@@ -37,13 +63,10 @@ def chat(
     print("Top P: ", top_p)
 
     messages = [{"role": "system", "content": system_message}]
-
+    history= state.history
     for val in history:
-        if val[0]:
-            messages.append({"role": "user", "content": val[0]})
-        if val[1]:
-            messages.append({"role": "assistant", "content": val[1]})
-    # message =run_rag(message, history)
+        messages.append(val)
+     
  
     messages.append({"role": "user", "content": run_rag(message)})
     response = ""
@@ -55,17 +78,16 @@ def chat(
         messages,
  
         max_tokens=max_tokens,
-        stream=True,
+        stream=False,
         temperature=temperature,
         top_p=top_p,
     ):
         token = message.choices[0].delta.content
         response += str(token)
-        state.messages[-1][-1] = str(token) 
-        yield (state, state.to_gradio_chatbot(), "", None) + (disable_btn, disable_btn, disable_btn, enable_btn, enable_btn)
-
-    yield (state, state.to_gradio_chatbot(), "", None) + (enable_btn,) * 5
+    add_response(state,message , response)
+    yield (state, response) + (enable_btn,) * 5
   
+
 #  ================================================================================================================================
 
 theme = gr.themes.Base(
@@ -105,35 +127,10 @@ top_p = gr.Slider(
     label="Top-p (nucleus sampling)",
     info="Higher values is equivalent to sampling more low-probability tokens.",
 )
-textbox = gr.Textbox(show_label=False, placeholder="Enter text and press ENTER", container=False)
 #  ================================================================================================================================
   
-# with gr.Blocks(
-#     fill_height=True,
-#     css=""".gradio-container .avatar-container {height: 40px width: 40px !important;} #duplicate-button {margin: auto; color: white; background: #f1a139; border-radius: 100vh; margin-top: 2px; margin-bottom: 2px;}""",
-# ) as main:
-#     gr.ChatInterface(
-#         chat,
-#         chatbot=chatbot,
-#         title="Retrieval Augmented Generation (RAG) Chatbot",
-#         examples=EXAMPLES,
-#         theme=theme,
-#         fill_height=True,
-#         additional_inputs=[
- 
-#             max_new_tokens,
-#             temperature,
-#             top_p,
-#         ],
-#     )
-     
  
 
-# with gr.Blocks(theme=theme, css="footer {visibility: hidden}textbox{resize:none}", title="RAG") as demo:
-#     gr.TabbedInterface([main ] , tab_names=["Chatbot"]  )
-
-# demo.launch()
-
 
 def upvote_last_response(state):
     return ("",) + (disable_btn,) * 3
@@ -144,17 +141,6 @@ def downvote_last_response(state):
 def flag_last_response(state):
     return ("",) + (disable_btn,) * 3
 
-def add_text(state ,textbox ):
-    print("textbox: ", textbox)
-    if state is None:
-        state = gr.State()
-        state.messages = [[("assistant", "")]]
-    state.text = textbox
-    history=""
-    state.append_message(state.roles[0], textbox)# 
-    state.append_message(state.roles[1], "")
-    yield (state, None,  history) + (disable_btn, disable_btn, disable_btn, enable_btn, enable_btn)
-
 block_css = """
 #buttons button {
     min-width: min(120px,100%);
@@ -162,8 +148,9 @@ block_css = """
 """
 #  ================================================================================================================================
 
+
 with gr.Blocks(title="CuMo", theme=theme, css=block_css) as demo:
-    state = gr.State()
+    state = initialiate_state()
     gr.Markdown("Retrieval Augmented Generation (RAG) Chatbot" )
     with gr.Row():
         with gr.Column(scale=8):
@@ -172,13 +159,19 @@ with gr.Blocks(title="CuMo", theme=theme, css=block_css) as demo:
                 label="Retrieval Augmented Generation (RAG) Chatbot",
                 height=400,
                 layout="bubble",
- 
             )
             with gr.Row():
                 with gr.Column(scale=8):
-                    textbox.render()
+                    # textbox.render()
+                    textbox = gr.Textbox(show_label=False,
+                                          placeholder="Enter text and press ENTER",
+                                            container=False,
+                                            show_copy_button=True
+                                            )
+
                 with gr.Column(scale=1, min_width=100):
                     submit_btn = gr.Button(value="Submit", variant="primary" )
+               
             with gr.Row(elem_id="buttons") as button_row:
                 upvote_btn = gr.Button(value="👍  Upvote", interactive=False)
                 downvote_btn = gr.Button(value="👎  Downvote", interactive=False)
@@ -200,8 +193,8 @@ with gr.Blocks(title="CuMo", theme=theme, css=block_css) as demo:
                     max_output_tokens = gr.Slider(minimum=0, maximum=1024, value=512, step=64, interactive=True, label="Max output tokens",)
 
 #  ================================================================================================================================
- 
     btn_list = [upvote_btn, downvote_btn, flag_btn, regenerate_btn, clear_btn]
+
     upvote_btn.click(
         upvote_last_response,
         [state],
@@ -218,26 +211,19 @@ with gr.Blocks(title="CuMo", theme=theme, css=block_css) as demo:
         [textbox, upvote_btn, downvote_btn, flag_btn]
     )
 
-
-    textbox.submit(
-            add_text,
+    submit_btn.click(
+            add_question,
             [state,  textbox],
-            [state, chatbot, textbox] + btn_list,
+            [state, textbox],
         ).then(
             chat,
-            [state,  textbox,max_output_tokens,  temperature, top_p],
-            [state, chatbot, textbox] + btn_list,
+            [state, chatbot, textbox , max_new_tokens , temperature ,top_p],
+            [state, textbox] + btn_list,
+
         )
 
-    submit_btn.click(
-        add_text,
-        [state , textbox],
-        [state,chatbot,  textbox] + btn_list,
-    ).then(
-        chat,
-        [state,  textbox, max_output_tokens , temperature, top_p ],
-        [state,chatbot,  textbox] + btn_list,
-    )
+ 
+    # )
 #  ================================================================================================================================
 demo.launch()
 #  ================================================================================================================================