Add multiPages

CMD.md

@@ -0,0 +1 @@
+gradio app.py

app.py

@@ -1,16 +1,92 @@
+# DEV reloads require a refresh on the browser.
+# https://gist.github.com/brandon8863/3ee552870a066eba463d37f0b39a547a
 import gradio as gr
-from transformers import pipeline
+import webpages.blip_image_captioning as blip_image_captioning 
+import home as home
 
-pipe = pipeline("image-to-text",
-                model="Salesforce/blip-image-captioning-base")
+ 
+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")
+ 
+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
+                else:
+                    return (
+                        home.get_not_found_page(local_state),
+                        local_state,
+                    )
 
 
-def launch(input):
-    out = pipe(input)
-    return out[0]['generated_text']
 
-iface = gr.Interface(launch,
-                     inputs=gr.Image(type='pil'),
-                     outputs="text")
+# =======================================================================================================
+# 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:
 
-iface.launch()
+    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()

home.py

@@ -0,0 +1,55 @@
+import gradio as gr
+
+
+
+def get() :
+    with gr.Column() as result:
+        gr.HTML("<br/><br/><br/><br/>")
+        gr.Markdown("# Welcome to Khaled Space! 👋",height=100)
+ 
+        gr.Markdown(    """
+                    
+
+
+    Welcome to **Khaled's AI Learning Hub**! 🚀
+
+    This platform is dedicated to showcasing AI development projects, all designed to help you explore and understand the power of artificial intelligence. 🤖💡
+
+    **👈 Select a project from the sidebar** to see hands-on examples ranging from data processing to model deployment. Each project page will guide you through different aspects of AI development, helping you gain practical insights.
+
+ 
+                    
+
+
+    """)
+        gr.HTML("<br/><br/><br/><br/>")
+
+    
+    return result
+
+
+#
+# PAGES can be in external files
+#
+def get_not_found_page(local_state):
+    with gr.Column() as result:
+        gr.Markdown("## 404 - PAGE NOT FOUND")
+
+        gr.Label(f"404 Page {type(local_state)}: {local_state }")
+    return result
+
+
+def get_landing_page(local_state):
+    with gr.Column() as result:
+        gr.Markdown("## LANDING PAGE")
+
+        if local_state:
+            gr.Label(f"Landing Page {type(local_state)}")
+            gr.Label(f"Page: {local_state }")
+    return result
+
+
+# with gr.Blocks() as demo:
+#        get()
+# if __name__ == "__main__":
+#     demo.launch()

webpages/blip_image_captioning.py

@@ -0,0 +1,37 @@
+import gradio as gr
+from transformers import pipeline
+
+# class blip_image_captioning:
+#   def __init__(self):
+     
+pipe = pipeline("image-to-text",
+                    model="Salesforce/blip-image-captioning-base")
+
+
+def launch(input):
+        out = pipe(input)
+        return out[0]['generated_text']
+
+def itf():
+        return gr.Interface(launch,
+                        inputs=gr.Image(type='pil'),
+                        outputs="text")
+
+iface = gr.Interface(launch,
+                        inputs=gr.Image(type='pil'),
+                        outputs="text")
+    # def __str__(self):
+    #    return  gr.Interface(launch,
+    #                     inputs=gr.Image(type='pil'),
+    #                     outputs="text")
+
+    # iface.launch()
+
+def get(local_state):
+    with gr.Column() as result:
+        gr.HTML("<br/>")
+        gr.Markdown("## Find out what in the photo")
+        itf()
+        gr.HTML("<br/><br/><br/><br/>")
+        
+    return result