provide input image used, and demo context

app.py

@@ -16,7 +16,7 @@ def api_classification(url):
     if url_to_use == "exemple":
         url_to_use = "https://images.pexels.com/photos/326900/pexels-photo-326900.jpeg?cs=srgb&dl=pexels-pixabay-326900.jpg&fm=jpg"
     predictions = svc.predict(url_to_use)
-    return json.dumps(predictions)
+    return json.dumps(predictions), url_to_use
 
 
 with gr.Blocks() as app:
@@ -24,23 +24,43 @@ with gr.Blocks() as app:
         with gr.Row():
             with gr.Column():
                 # https://www.gradio.app/guides/key-component-concepts
-                gr.Textbox(value="This is a BioCLIP based prediction. You must input a public url of an image and you will get TreeOfLife predictions as result", interactive=False)
+                gr.HTML(value="""
+    This <a href="https://huggingface.co/spaces/3oly/grBird">Gradio BioCLIP API</a> is a <a href="https://github.com/Imageomics/bioclip">BioCLIP</a> based prediction.<br/><br/>
+    <small>origin is a <a href="https://huggingface.co/spaces/imageomics/bioclip-demo">BioCLIP DEMO</a> 
+    <a href="https://huggingface.co/spaces/imageomics/bioclip-demo/discussions/7">discussion</a>
+    following <a href="https://github.com/boly38/pyBird">pyBird</a> MVP.</small>
+    <br/>
+    <h2>How to use Gradio UI ?</h2>
+    <ul>
+    <li>You must input a <b>public url of an image</b> and submit by clicking on "predict".</li>
+    <li>You will get TreeOfLife predictions as result.</li>
+    </ul>
+    <h2>How to use Gradio API (Node.js, Python, Bash Curl) ?</h2>
+    <ul>
+    <li>You must follow the demo footer link called "Use via API". There is some example provided.</li>
+    </ul>
+    <h2>Credits</h2>
+    <ul>
+    <li>This API endpoint is (only) an augmented fork of the <a href="https://github.com/Imageomics/bioclip">BioCLIP</a> : a wrapper that provide another form of API call.</li>
+    <li>Research context, model, and contact are available at <a href="https://github.com/Imageomics/bioclip">Imageomics/bioclip</a>.</li>
+    </ul>    
+                """, show_label=False)
                 api_input = gr.Textbox(
-                    placeholder="Image url here",
                     lines=1,
-                    label="Image url",
-                    show_label=True,
+                    label="Input a public image url",
+                    show_label=False,
                     info="Add image url here.",
                     value="https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/d/o/Downy-woodpecker-Matt-Williams.jpg?crop=0%2C39%2C3097%2C2322&wid=820&hei=615&scl=3.776829268292683"
                 )
-                api_classification_btn = gr.Button("API", variant="primary")
+                api_classification_btn = gr.Button("predict", variant="primary")
+                api_classification_output_gallery = gr.Image(label="Input image used")
             with gr.Column():
-                api_classification_output = gr.JSON()  # https://www.gradio.app/docs/gradio/json
+                api_classification_output_json = gr.JSON(label="This is classification result")  # https://www.gradio.app/docs/gradio/json
 
     api_classification_btn.click(
         fn=api_classification,
         inputs=[api_input],
-        outputs=[api_classification_output],
+        outputs=[api_classification_output_json, api_classification_output_gallery],
     )
 app.queue(max_size=20)
 app.launch()