[Blocks] Support Blocks components as Plug and Use components

[omerXfaruq]

The design of Blocks does not support multiple Blocks defined outside the main Blocks scope. But this is needed for complex Blocks components as it will enable users to package their modules under smaller Blocks

We can potentially support it with a new design,

• either a workaround function that passes every component, event and layouts inside the smaller Blocks to Parent Blocks
• or have smaller Blocks as a component inside the Bigger Blocks with its config (this will need changes within frontend)

Usage example:

import gradio as gr

import random

xray_model = lambda diseases, img: {disease: random.random() for disease in diseases}
ct_model = lambda diseases, img: {disease: 0.1 for disease in diseases}

with gr.Blocks() as demo_1:
    disease = gr.CheckboxGroup(
        choices=["Covid", "Malaria", "Lung Cancer"], label="Disease to Scan For"
    )
    with gr.Tabs():
        with gr.TabItem("Blocks2"):
            with gr.Row():
                xray_scan = gr.Image()
                xray_results = gr.JSON()
            xray_run = gr.Button("Run")
            xray_run.click(
                xray_model, inputs=[disease, xray_scan], outputs=[xray_results]
            )

with gr.Blocks() as demo_2:
     with gr.Row():
            ct_scan = gr.Image()
            ct_results = gr.JSON()
            ct_run = gr.Button("Run")
            ct_run.click(ct_model, inputs=[disease, ct_scan], outputs=ct_results)


with gr.Blocks() as demo:
    gr.Markdown(
        """
# Detect Disease From Scan
With this model you can lorem ipsum
- ipsum 1
- ipsum 2
"""
    )
    disease = gr.CheckboxGroup(
        choices=["Covid", "Malaria", "Lung Cancer"], label="Disease to Scan For"
    )

    with gr.Tabs():
        with gr.TabItem("X-ray"):
            demo_1.render()
        with gr.TabItem("CT Scan"):
            demo_2.render()
    overall_probability = gr.Textbox()

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

[abidlabs]

The problem is with the render() function. It just needs to be tweaked -- I can take a look into this

[omerXfaruq]

This functionality is not supported with render yet, just shared an example outline, there could be a different function called x as well.

[abidlabs]

Here's another example discovered by @radames where mixing Blocks and Interfaces produces unexpected result:

import gradio as gr

inputs = gr.Image()
outpus =  gr.Image()

blocks = gr.Blocks()
with blocks:    
    gr.Interface(
      fn=lambda x: x,
      inputs=inputs,
      outputs=outpus,
      )
blocks.launch()

Note that this code runs properly:

import gradio as gr

blocks = gr.Blocks()
with blocks:    
    gr.Interface(
      fn=lambda x: x,
      inputs=gr.Image(),
      outputs=gr.Image())
blocks.launch() 

[omerXfaruq]

Yeah, we currently don't support Blocks within Blocks and Interface is basically an instance of Blocks. We need to write a function within Blocks to register everything inside inner Blocks to outer Blocks.

I think will probably support this after 3.0, do we want to have it before 3.0 to have a better, proper launch?

[omerXfaruq]

Btw the user needs to trigger render() for components that are defined in the outer scope of Blocks:

import gradio as gr

image_1 = gr.Image("https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80")
image_2 = gr.Image("https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=386&q=80",)

blocks = gr.Blocks()
with blocks:
    image_1.render()
    image_2.render()

blocks.launch()

[omerXfaruq]

The design could be smt like this:

    def render(self):
        """
        Adds self into appropriate BlockContext
        """
        self._id = Context.id
        Context.id += 1

        if self.__class__.__name__ == "Blocks":
            if Context.block is not None:
                #TODO: register the family tree of inner Blocks under this Block
                raise NotImplementedError

            if Context.root_block is not None:
                #TODO: register every Block inside the family tree of inner Blocks under the root_block
                #TODO: register every fn inside inner Blocks in root_block
                #TODO: register every dependencies inside inner Blocks in root_block
                raise NotImplementedError
        else:
            if Context.block is not None:
                Context.block.children.append(self)
            if Context.root_block is not None:
                Context.root_block.blocks[self._id] = self

[abidlabs]

Yup @farukozderim that's basically what I had in mind as well, working on it now