app.py

# DEV reloads require a refresh on the browser.
# https://gist.github.com/brandon8863/3ee552870a066eba463d37f0b39a547a
import gradio as gr
import webpages.blip_image_captioning as blip_image_captioning 
import webpages.text_generation as text_generation 

import home as home

 
def routs():
    with gr.Column():
                # anchor = gr.HTML("<h1>🏠</h1>")
                anchor = gr.HTML("<br/><br/><br/><br/>")
                #
                # BUTTONS FOR PAGE NAVIGATION
                #
                with gr.Column() as result:
                    gr.Button("🏠 Home", link="/?page=home")
                    gr.Button("👀 Find out what in the photo", link="/?page=blip_image_captioning")
                    gr.Button("📝 Text Generation", link="/?page=text_generation")

 
def handePages(local_state):
     with gr.Column(scale=30):
                #
                # SIMPLE PAGE ROUTING HERE
                #
                if (
                    local_state == None
                ):
                    return home.get_landing_page(local_state), local_state
                elif local_state  == "home":
                    return home.get(), local_state
                elif local_state  == "blip_image_captioning":
                    return blip_image_captioning.get(local_state), local_state
                elif local_state  == "text_generation":
                    return text_generation.get(local_state), local_state
                else:
                    return (
                        home.get_not_found_page(local_state),
                        local_state,
                    )



# =======================================================================================================
# APP_SHELL - for multiple pages
#
with gr.Blocks(fill_height=True   , css=".contain { display: flex !important; flex-direction: column !important; }"
    "#component-0, #component-3, #component-10, #component-8  { height: 100% !important; }"
    "#chatbot { flex-grow: 1 !important; overflow: auto !important;}"
    "#col { height: calc(100vh - 112px - 16px) !important; }") as demo:

    def init_state(request: gr.Request):
        #
        # PULL URL PARAMS HERE
        #
        page =  request.query_params.get("page")
        print(f"** page: {page}")
        if (
                    page == None
                ):
            page = "home" 
        # result["page"] = request.query_params.get("page")
        return page  # this result populates "state"

    state = gr.State()

    #
    # POPULATE user "state" with request data
    #
    demo.load(
        fn=init_state,
        inputs=None,
        outputs=state,
        queue=True,
        show_progress=False,
    )

    content = gr.HTML("...")

    @gr.render(inputs=[state], triggers=[state.change])
    def page_content(local_state):
        print(f"** local_state: {local_state}")
        with gr.Row(variant="panel") as result:
            routs()
            handePages(local_state)
            
    #
    # HACK: Would be nice to delay rendering until state is populated
    #
    def page_content_update(local_state):
        return gr.HTML("...",visible=False )

    state.change(fn=page_content_update, inputs=state, outputs=content)


demo.launch()