Update UI

app.py

@@ -5,7 +5,7 @@ from rag import run_rag
 
 #  ================================================================================================================================
 TOKEN = os.getenv("HF_TOKEN")
-client = InferenceClient("HuggingFaceH4/zephyr-7b-beta"  )
+client = InferenceClient("HuggingFaceH4/zephyr-7b-beta" , token=TOKEN)
 system_message ="You are a capable and freindly assistant."
 history = []
 no_change_btn = gr.Button()
@@ -103,9 +103,9 @@ def chat(
     for val in history:
         messages.append(val)
 
-    messages.append({"role": "user", "content": message})
+    messages.append({"role": "user", "content": run_rag(message)})
     response = ""
-
+    # chatbot.append((question))
     for msg in client.chat_completion(
         messages,
         max_tokens=max_tokens,
@@ -116,6 +116,8 @@ def chat(
        
         token = msg.choices[0].delta.content
         response += str(token)
+        # chatbot.append(( response))
+
         # yield "" , chatbot 
     chatbot.append((question , response))
     state.save_response(response)
@@ -136,34 +138,7 @@ EXAMPLES = [
     [ "Tell me about the actual situation in Ukraine ?"],
     [ "Tell me about current situation in palestine ?"],
 ]
-# max_new_tokens = gr.Slider(
-#     minimum=1,
-#     maximum=2048,
-#     value=1024,
-#     step=1,
-#     interactive=True,
-#     label="Max new tokens",
-# )
-# temperature = gr.Slider(
-#     minimum=0.1,
-#     maximum=0.9,
-#     value=0.6,
-#     step=0.1,
-#     visible=True,
-#     interactive=True,
-#     label="Temperature",
-#     info="Higher values will produce more diverse outputs.",
-# )
-# top_p = gr.Slider(
-#     minimum=0.1,
-#     maximum=1,
-#     value=0.9,
-#     step=0.05,
-#     visible=True,
-#     interactive=True,
-#     label="Top-p (nucleus sampling)",
-#     info="Higher values is equivalent to sampling more low-probability tokens.",
-# )
+ 
 #  ================================================================================================================================
  
 
@@ -179,23 +154,34 @@ textbox = gr.Textbox(show_label=False,
                         show_copy_button=True
                         )
 
-with gr.Blocks(title="RAG", theme=theme, css=block_css) as demo:
+with gr.Blocks(title="RAG", theme=theme, css=block_css , fill_height=True) as demo:
     
-    gr.Markdown("Retrieval Augmented Generation (RAG) Chatbot" )
-    with gr.Row():
-        with gr.Column(scale=8):
+    gr.Markdown("# **Retrieval Augmented Generation (RAG) Chatbot**" )
+    gr.Markdown("This is a demo of a chatbot that uses the RAG system to generate responses to user queries. RAG is a combination of a retriever and a generator, which allows it to generate responses based on the context of the conversation. The chatbot can be used to answer questions, provide information, and engage in conversation with users.")
+    with gr.Row(variant="panel"):
+        # with gr.Column(scale=2):
+        #     # gr.Markdown("# ****")
+        #     new_chat=gr.Button(value=" New Chat", variant="secondary", interactive=True) 
+            
+            # with gr.Column(scale=1):
+            #     exit_btn = gr.Button(value="🚪  Exit", interactive=True , variant="stop")
+        with gr.Column(scale=10):
             chatbot = gr.Chatbot(
                 elem_id="chatbot",
                 label="Retrieval Augmented Generation (RAG) Chatbot",
-                height=400,
+                height=300,
                 layout="bubble",
+                min_width=1200,
+                show_copy_button=True,
+                show_share_button=True,
+                placeholder="Ask a question or type a message...",
             )
             with gr.Row():
                 with gr.Column(scale=8):
                     textbox.render()
 
-                with gr.Column(scale=1, min_width=100):
-                    submit_btn = gr.Button(value="Submit", variant="primary", interactive=True)
+            with gr.Column(scale=1, min_width=100):
+                submit_btn = gr.Button(value="Submit", variant="primary", interactive=True)
     
         
             with gr.Row(elem_id="buttons") as button_row:
@@ -204,20 +190,27 @@ with gr.Blocks(title="RAG", theme=theme, css=block_css) as demo:
                 flag_btn = gr.Button(value="⚠️  Flag", interactive=False)
                 #stop_btn = gr.Button(value="⏹️  Stop Generation", interactive=False)
                 regenerate_btn = gr.Button(value="🔄  Regenerate", interactive=False)
-                clear_btn = gr.Button(value="🗑️  Clear", interactive=False)
-
             with gr.Column(scale=3):
+                clear_btn = gr.Button(value="🗑️  Clear", interactive=False , variant="stop")
+            with gr.Accordion("Examples", open=True) as Examples_row:
                 gr.Examples(examples=[
                 [f"Tell me about the latest news in the world ?"],
                 [f"Tell me about the increase in the price of Bitcoin ?"],
                 [f"Tell me about the actual situation in Ukraine ?"],
+                [f"How true is the news about the increase in the price of oil ?"],
                 [f"Tell me about current situation in palestinian ?"],
+                [f"Tell me about the current situation in Afghanistan ?"],
+                [f"what are the agenda of the United Nations ?"],
+                ["how trump's compain going ?"],
             ],inputs=[textbox], label="Examples")
+
+
                 
             with gr.Accordion("Parameters", open=False) as parameter_row:
-                    temperature = gr.Slider(minimum=0.0, maximum=1.0, value=0.2, step=0.1, interactive=True, label="Temperature",)
-                    top_p = gr.Slider(minimum=0.0, maximum=1.0, value=0.7, step=0.1, interactive=True, label="Top P",)
-                    max_output_tokens = gr.Slider(minimum=0, maximum=1024, value=512, step=64, interactive=True, label="Max output tokens",)
+                    temperature = gr.Slider(minimum=0.1, maximum=1.0, value=0.2, step=0.1, interactive=True, label="Temperature",)
+                    top_p = gr.Slider(minimum=0.1, maximum=1.0, value=0.7, step=0.1, interactive=True, label="Top P",)
+                    max_output_tokens = gr.Slider(minimum=0, maximum=4096, value=1024, step=64, interactive=True, label="Max output tokens",)
+        
 
 #  ================================================================================================================================
     btn_list = [upvote_btn, downvote_btn, flag_btn, regenerate_btn, clear_btn]