import gradio as gr

# Reads /info from the browser, exactly as an API client would, and renders the
# advertised default with a plain <img>. Both details matter: fetching from the
# client means the Host header is the real public host, and an <img> is loaded
# by the browser rather than downloaded by the server.
PHOTO = "https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/cheetah1.jpg"

SHOW_ADVERTISED_DEFAULT = """
async () => {
  const BUS = "https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png";
  const info = await (await fetch("gradio_api/info")).json();
  const d = info.named_endpoints["/describe"].parameters[0].parameter_default || {};
  const url = d.url || "";
  const broken = url === BUS;

  const img = url
    ? `<img src="${url}" alt="the advertised default" style="max-width:100%;max-height:320px">`
    : "<em>no default advertised</em>";
  const verdict = broken
    ? `<h3>❌ Broken</h3><p><code>/info</code> advertises a <b>bus</b> &mdash;
       <code>Image.example_payload()</code> standing in for the default. A client
       calling <code>/describe</code> without the <code>photo</code> argument
       fetches the wrong file.</p>`
    : `<h3>✅ Fixed</h3><p><code>/info</code> advertises the <b>cheetah</b> this app
       really serves, at an absolute url the client can fetch.</p>`;

  return [
    `<div style="display:flex;justify-content:center">${img}</div>`,
    `${verdict}<p><code>url</code>: <code style="word-break:break-all">${url}</code></p>`,
  ];
}
"""


def describe(photo):
    return str(photo)


with gr.Blocks(title="Default file url") as demo:
    gr.Markdown(
        "# The default file a client actually gets\n"
        "This app's `photo` parameter has a default. On the right is the image "
        "that default resolves to **for an API caller reading `/info`** — which "
        "should be the same cheetah."
    )
    with gr.Row():
        photo = gr.Image(
            label="The app's default (what you see)",
            value=PHOTO,
            type="filepath",
            height=320,
        )
        with gr.Column():
            gr.Markdown("**What `/info` advertises (what a client gets)**")
            served = gr.HTML()
    report = gr.HTML()
    path_out = gr.Textbox(visible=False)

    gr.Button("Describe", visible=False).click(
        describe, photo, path_out, api_name="describe"
    )
    demo.load(None, None, [served, report], js=SHOW_ADVERTISED_DEFAULT)

if __name__ == "__main__":
    demo.launch()