adding example bar

Dockerfile

@@ -2,7 +2,7 @@ FROM python:3.10.9
 
 WORKDIR /src
 
-COPY ./MM-REACT /src/
+COPY ./MM-REACT /src/MM-REACT
 
 COPY ./requirements.txt /src/requirements.txt
 
@@ -12,7 +12,7 @@ RUN pip install --no-cache-dir /src/langchain-0.0.94-py3-none-any.whl
 
 RUN pip install --no-cache-dir --upgrade -r /src/requirements.txt
 
-WORKDIR /src
+WORKDIR /src/MM-REACT
 
 
 CMD ["python", "app.py", "--port", "7860", "--openAIModel", "azureChatGPT", "--noIntermediateConv"]

MM-REACT/app.py

@@ -211,7 +211,14 @@ def load_chain(history, log_state):
     get_logger().warning("langchain reloaded", extra=properties)    
     history = []
     history.append(("Show me what you got!", "Hi Human, Please upload an image to get started!"))    
-    return history, history, chain, log_state, gr.Textbox.update(visible=True), gr.Button.update(visible=True), gr.UploadButton.update(visible=True)
+    
+    return history, history, chain, log_state, \
+        gr.Textbox.update(visible=True), \
+        gr.Button.update(visible=True), \
+        gr.UploadButton.update(visible=True), \
+        gr.Row.update(visible=True), \
+        gr.HTML.update(visible=True), \
+        gr.Button.update(variant="secondary")
 
 
 # executes input typed by human
@@ -390,49 +397,90 @@ def init_and_kick_off():
     # initalize chatWrapper
     chat = ChatWrapper()
 
-    with gr.Blocks() as block:  
+    exampleTitle = """<h3>Examples to start conversation..</h3>"""    
+
+    with gr.Blocks(css="#tryButton {width: 120px;}") as block:  
         llm_state = gr.State()
         history_state = gr.State()
         chain_state = gr.State()      
         log_state = gr.State() 
         
-        reset_btn = gr.Button(value="!!!CLICK to wake up MM-REACT!!!", variant="secondary", elem_id="resetbtn").style(full_width=True)
+        reset_btn = gr.Button(value="!!!CLICK to wake up MM-REACT!!!", variant="primary", elem_id="resetbtn").style(full_width=True)
 
+        example_image_size = 110
+        button_variant = "primary"
         with gr.Row():
-            chatbot = gr.Chatbot(elem_id="chatbot").style(height=620)
+            with gr.Column(scale=1.0, min_width=100):
+                chatbot = gr.Chatbot(elem_id="chatbot", label="MM-REACT Bot").style(height=620)
+            with gr.Column(scale=0.20, min_width=200, visible=False) as exampleCol:
+                with gr.Row():
+                    grExampleTitle = gr.HTML(exampleTitle, visible=False)
+                with gr.Row():
+                    with gr.Column(scale=0.50, min_width=100):
+                        example3Image = gr.Image("images/receipt.png", interactive=False).style(height=example_image_size, width=example_image_size)
+                    with gr.Column(scale=0.50, min_width=100):
+                        example3ImageButton = gr.Button(elem_id="tryButton", value="Try it!", variant=button_variant).style(full_width=True)
+                        # dummy text field to hold the path
+                        example3ImagePath = gr.Text("images/receipt.png", interactive=False, visible=False)
+                with gr.Row():
+                    with gr.Column(scale=0.50, min_width=100):
+                        example1Image = gr.Image("images/money.png", interactive=False).style(height=example_image_size, width=example_image_size)
+                    with gr.Column(scale=0.50, min_width=100):
+                        example1ImageButton = gr.Button(elem_id="tryButton", value="Try it!", variant=button_variant).style(full_width=True)
+                        # dummy text field to hold the path
+                        example1ImagePath = gr.Text("images/money.png", interactive=False, visible=False)               
+                with gr.Row():
+                    with gr.Column(scale=0.50, min_width=100):
+                        example2Image = gr.Image("images/bar_plot.png", interactive=False).style(height=example_image_size, width=example_image_size)
+                    with gr.Column(scale=0.50, min_width=100):
+                        example2ImageButton = gr.Button(elem_id="tryButton", value="Try it!", variant=button_variant).style(full_width=True)
+                        # dummy text field to hold the path
+                        example2ImagePath = gr.Text("images/bar_plot.png", interactive=False, visible=False)
+                with gr.Row():
+                    with gr.Column(scale=0.50, min_width=100):
+                        example4Image = gr.Image("images/sign.png", interactive=False).style(height=100, width=100)
+                    with gr.Column(scale=0.50, min_width=100):
+                        example4ImageButton = gr.Button(elem_id="tryButton", value="Try it!", variant=button_variant).style(full_width=True)
+                        # dummy text field to hold the path
+                        example4ImagePath = gr.Text("images/sign.png", interactive=False, visible=False)
+                with gr.Row():                        
+                    with gr.Column(scale=0.50, min_width=100):
+                        example5Image = gr.Image("images/face.jpg", interactive=False).style(height=example_image_size, width=example_image_size)
+                    with gr.Column(scale=0.50, min_width=100):
+                        example5ImageButton = gr.Button(elem_id="tryButton", value="Try it!", variant=button_variant).style(full_width=True)
+                        # dummy text field to hold the path
+                        example5ImagePath = gr.Text("images/face.jpg", interactive=False, visible=False)
+
+
 
         with gr.Row():
             with gr.Column(scale=0.75):
-                message = gr.Textbox(label="What's on your mind??",
-                                        placeholder="What's the answer to life, the universe, and everything?",
+                message = gr.Textbox(label="Upload a pic and ask!",
+                                        placeholder="Type your question about the uploaded image",
                                         lines=1, visible=False)
             with gr.Column(scale=0.15):
                 submit = gr.Button(value="Send", variant="secondary", visible=False).style(full_width=True)
             with gr.Column(scale=0.10, min_width=0):
-                btn = gr.UploadButton("📁", file_types=["image"], visible=False).style(full_width=True)
-        
-        # with gr.Row():
-        #     with gr.Column():
-        #         example1Image = gr.Image("images/money.png", interactive=False).style(height=100, width=100)
-        #     with gr.Column():
-        #         example1ImagePath = gr.Text("images/money.png", interactive=False, visible=False)
-        #     with gr.Column():
-        #         example1ImageButton = gr.Button(value="Try it", variant="secondary").style(full_width=True)
-        # example1ImageButton.click(add_image_with_path, inputs=[history_state, chain_state, example1ImagePath],
-        #         outputs=[history_state, chatbot])
+                btn = gr.UploadButton("🖼️", file_types=["image"], visible=False).style(full_width=True)
 
 
-        message.submit(chat, inputs=[message, history_state, chain_state, log_state],
-                    outputs=[chatbot, history_state, message])
+        message.submit(chat, inputs=[message, history_state, chain_state, log_state], outputs=[chatbot, history_state, message])
 
-        submit.click(chat, inputs=[message, history_state, chain_state, log_state],
-                    outputs=[chatbot, history_state, message])
+        submit.click(chat, inputs=[message, history_state, chain_state, log_state], outputs=[chatbot, history_state, message])
 
         btn.upload(add_image, inputs=[history_state, chain_state, btn, log_state], outputs=[history_state, chatbot])
         
         # load the chain    
-        reset_btn.click(load_chain, inputs=[history_state, log_state], outputs=[chatbot, history_state, chain_state, log_state, message, submit, btn])
-        
+        reset_btn.click(load_chain, inputs=[history_state, log_state], outputs=[chatbot, history_state, chain_state, log_state, message, submit, btn, exampleCol, grExampleTitle, reset_btn])
+
+        # setup listener click for the examples
+        example1ImageButton.click(add_image_with_path, inputs=[history_state, chain_state, example1ImagePath, log_state], outputs=[history_state, chatbot])
+        example2ImageButton.click(add_image_with_path, inputs=[history_state, chain_state, example2ImagePath, log_state], outputs=[history_state, chatbot])
+        example3ImageButton.click(add_image_with_path, inputs=[history_state, chain_state, example3ImagePath, log_state], outputs=[history_state, chatbot])
+        example4ImageButton.click(add_image_with_path, inputs=[history_state, chain_state, example4ImagePath, log_state], outputs=[history_state, chatbot])
+        example5ImageButton.click(add_image_with_path, inputs=[history_state, chain_state, example5ImagePath, log_state], outputs=[history_state, chatbot])
+
+
     # launch the app
     block.launch(server_name="0.0.0.0", server_port = ARGS.port)
 
@@ -440,17 +488,11 @@ if __name__ == '__main__':
     parser = argparse.ArgumentParser()
 
     parser.add_argument('--port', type=int, required=False, default=7860)
-    parser.add_argument('--openAIModel', type=str, required=False, default='openAIGPT35')
+    parser.add_argument('--openAIModel', type=str, required=False, default='azureChatGPT')
     parser.add_argument('--noIntermediateConv', default=False, action='store_true', help='if this flag is turned on no intermediate conversation should be shown')
 
     global ARGS
     ARGS = parser.parse_args()
 
     init_and_kick_off()
-    
-   
-# python app.py --port 7860 --openAIModel 'openAIGPT35'
-# python app.py --port 7860 --openAIModel 'azureTextDavinci003'
-# python app.py --port 7861 --openAIModel 'azureChatGPT'
-# python app.py --port 7860 --openAIModel 'azureChatGPT' --noIntermediateConv
-# python app.py --port 7862 --openAIModel 'azureGPT35turbo' --noIntermediateConv
+