CodeGen Gradio UI Enhancements (#1904)

Signed-off-by: okhleif-IL <omar.khleif@intel.com>

Author: okhleif-10

CodeGen/ui/gradio/codegen_ui_gradio.py

@@ -46,13 +46,24 @@
 
 
 # Define the functions that will be used in the app
+
+
+def add_to_history(prompt, history):
+    history.append([prompt["text"], ""])
+    return history, ""
+
+
 def conversation_history(prompt, index, use_agent, history):
     print(f"Generating code for prompt: {prompt} using index: {index} and use_agent is {use_agent}")
-    history.append([prompt, ""])
-    response_generator = generate_code(prompt, index, use_agent)
+    history = add_to_history(prompt, history)[0]
+    response_generator = generate_code(prompt["text"], index, use_agent)
     for token in response_generator:
         history[-1][-1] += token
-        yield history
+        yield history, ""
+
+
+def clear_history():
+    return ""
 
 
 def upload_media(media, index=None, chunk_size=1500, chunk_overlap=100):
@@ -287,19 +298,32 @@ def get_file_names(files):
 # Define UI components
 with gr.Blocks() as ui:
     with gr.Tab("Code Generation"):
-        gr.Markdown("### Generate Code from Natural Language")
-        chatbot = gr.Chatbot(label="Chat History")
-        prompt_input = gr.Textbox(label="Enter your query")
-        with gr.Column():
-            with gr.Row(equal_height=True):
+        with gr.Row():
+            with gr.Column(scale=2):
                 database_dropdown = gr.Dropdown(choices=get_indices(), label="Select Index", value="None", scale=10)
                 db_refresh_button = gr.Button("Refresh Dropdown", scale=0.1)
                 db_refresh_button.click(update_indices_dropdown, outputs=database_dropdown)
                 use_agent = gr.Checkbox(label="Use Agent", container=False)
 
-        generate_button = gr.Button("Generate Code")
-        generate_button.click(
-            conversation_history, inputs=[prompt_input, database_dropdown, use_agent, chatbot], outputs=chatbot
+            with gr.Column(scale=9):
+                gr.Markdown("### Generate Code from Natural Language")
+                chatbot = gr.Chatbot(label="Chat History")
+                with gr.Row(equal_height=True):
+                    with gr.Column(scale=8):
+                        prompt_input = gr.MultimodalTextbox(
+                            show_label=False, interactive=True, placeholder="Enter your query", sources=[]
+                        )
+                    with gr.Column(scale=1, min_width=150):
+                        with gr.Row(elem_id="buttons") as button_row:
+                            clear_btn = gr.Button(value="🗑️  Clear", interactive=True)
+                            clear_btn.click(clear_history, None, chatbot)
+
+        prompt_input.submit(add_to_history, inputs=[prompt_input, chatbot], outputs=[chatbot, prompt_input])
+
+        prompt_input.submit(
+            conversation_history,
+            inputs=[prompt_input, database_dropdown, use_agent, chatbot],
+            outputs=[chatbot, prompt_input],
         )
 
     with gr.Tab("Resource Management"):
@@ -315,7 +339,7 @@ def get_file_names(files):
                 )
             with gr.Column(scale=3):
                 file_upload = gr.File(label="Upload Files", file_count="multiple")
-                url_input = gr.Textbox(label="Media to be ingested (Append URL's in a new line)")
+                url_input = gr.Textbox(label="Media to be ingested. Append URL's in a new line (Shift + Enter)")
                 upload_button = gr.Button("Upload", variant="primary")
                 upload_status = gr.Textbox(label="Upload Status")
                 file_upload.change(get_file_names, inputs=file_upload, outputs=url_input)