update desc and layout

app.py

@@ -82,10 +82,12 @@ def predict(btn_upload, counter,image_hid, input, history):
     return history, history, "uploaded_image.png", counter, image_hid
 
 #Blocks Layout
-with gr.Blocks(css="#chatbot-component .overflow-y-auto{height:500px}") as demo:
-  with gr.Accordion("See details"):
-      gr.HTML("""<div style="text-align: center; max-width: 700px; margin: 0 auto;">
-                <div
+with gr.Blocks() as demo:  #css="#chatbot-component .overflow-y-auto{height:500px}"
+  with gr.Row():
+    with gr.Column():
+        #with gr.Accordion("See details"):
+        gr.HTML("""<div style="text-align: center; max-width: 700px; margin: 0 auto;">
+                    <div
                 style="
                     display: inline-flex;
                     align-items: center;
@@ -105,18 +107,17 @@ with gr.Blocks(css="#chatbot-component .overflow-y-auto{height:500px}") as demo:
                 This model was contributed by <a href="https://twitter.com/NielsRogge" target="_blank">nielsr</a>. 
                 The BLIP-2 model was proposed in <a href="https://arxiv.org/abs/2301.12597" target="_blank">BLIP-2: Bootstrapping Language-Image Pre-training with Frozen Image Encoders and Large Language Models</a> 
                 by Junnan Li, Dongxu Li, Silvio Savarese, Steven Hoi.<br><br>
-                </p>
-            </div>""")
+                </p></div>""")
   
-  with gr.Column(elem_id = "column_container"):
-    #text_in = gr.Textbox(value='', placeholder="Type your questions here and press enter", elem_id = "input_prompt", visible=False, label='Great! Now you can ask questions to get more information about the image')
-    btn_upload = gr.UploadButton("Upload image!", file_types=["image"], file_count="single", elem_id="upload_button")
-    chatbot = gr.Chatbot(elem_id = 'chatbot-component', label='Conversational with Images')
-    text_in = gr.Textbox(value='', placeholder="Type your questions here and press enter", elem_id = "input_prompt", visible=False, label='Great! Now you can ask questions to get more information about the image')
-    state_in = gr.State()
-    counter_out = gr.Number(visible=False, value=0, precision=0)
-    text_out = gr.Textbox(visible=False)  #getting imag name out
-    image_hid = gr.Image(visible=False) #, type='pil')
+    with gr.Column(elem_id = "column_container"):
+        #text_in = gr.Textbox(value='', placeholder="Type your questions here and press enter", elem_id = "input_prompt", visible=False, label='Great! Now you can ask questions to get more information about the image')
+        btn_upload = gr.UploadButton("Upload image!", file_types=["image"], file_count="single", elem_id="upload_button")
+        chatbot = gr.Chatbot(elem_id = 'chatbot-component', label='Conversational with Images')
+        text_in = gr.Textbox(value='', placeholder="Type your questions here and press enter", elem_id = "input_prompt", visible=False, label='Great! Now you can ask questions to get more information about the image')
+        state_in = gr.State()
+        counter_out = gr.Number(visible=False, value=0, precision=0)
+        text_out = gr.Textbox(visible=False)  #getting imag name out
+        image_hid = gr.Image(visible=False) #, type='pil')
 
   #Using Event Listeners
   btn_upload.upload(predict, [btn_upload, counter_out, image_hid, text_in, state_in], [chatbot, state_in, text_out, counter_out, image_hid])