Allow app to fill width

.changeset/tangy-beds-guess.md

@@ -0,0 +1,6 @@
+---
+"@gradio/app": minor
+"gradio": minor
+---
+
+feat:Allow app to fill width

demo/blocks_xray/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: blocks_xray"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import time\n", "\n", "disease_values = [0.25, 0.5, 0.75]\n", "\n", "def xray_model(diseases, img):\n", "    return [{disease: disease_values[idx] for idx,disease in enumerate(diseases)}]\n", "\n", "\n", "def ct_model(diseases, img):\n", "    return [{disease: 0.1 for disease in diseases}]\n", "\n", "with gr.Blocks() as demo:\n", "    gr.Markdown(\n", "        \"\"\"\n", "# Detect Disease From Scan\n", "With this model you can lorem ipsum\n", "- ipsum 1\n", "- ipsum 2\n", "\"\"\"\n", "    )\n", "    gr.DuplicateButton()\n", "    disease = gr.CheckboxGroup(\n", "        info=\"Select the diseases you want to scan for.\",\n", "        choices=[\"Covid\", \"Malaria\", \"Lung Cancer\"], label=\"Disease to Scan For\"\n", "    )\n", "    slider = gr.Slider(0, 100)\n", "\n", "    with gr.Tab(\"X-ray\") as x_tab:\n", "        with gr.Row():\n", "            xray_scan = gr.Image()\n", "            xray_results = gr.JSON()\n", "        xray_run = gr.Button(\"Run\")\n", "        xray_run.click(\n", "            xray_model,\n", "            inputs=[disease, xray_scan],\n", "            outputs=xray_results,\n", "            api_name=\"xray_model\"\n", "        )\n", "\n", "    with gr.Tab(\"CT Scan\"):\n", "        with gr.Row():\n", "            ct_scan = gr.Image()\n", "            ct_results = gr.JSON()\n", "        ct_run = gr.Button(\"Run\")\n", "        ct_run.click(\n", "            ct_model,\n", "            inputs=[disease, ct_scan],\n", "            outputs=ct_results,\n", "            api_name=\"ct_model\"\n", "        )\n", "\n", "    upload_btn = gr.Button(\"Upload Results\", variant=\"primary\")\n", "    upload_btn.click(\n", "        lambda ct, xr: None,\n", "        inputs=[ct_results, xray_results],\n", "        outputs=[],\n", "    )\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: blocks_xray"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import time\n", "\n", "disease_values = [0.25, 0.5, 0.75]\n", "\n", "def xray_model(diseases, img):\n", "    return [{disease: disease_values[idx] for idx,disease in enumerate(diseases)}]\n", "\n", "\n", "def ct_model(diseases, img):\n", "    return [{disease: 0.1 for disease in diseases}]\n", "\n", "with gr.Blocks(fill_width=True) as demo:\n", "    gr.Markdown(\n", "        \"\"\"\n", "# Detect Disease From Scan\n", "With this model you can lorem ipsum\n", "- ipsum 1\n", "- ipsum 2\n", "\"\"\"\n", "    )\n", "    gr.DuplicateButton()\n", "    disease = gr.CheckboxGroup(\n", "        info=\"Select the diseases you want to scan for.\",\n", "        choices=[\"Covid\", \"Malaria\", \"Lung Cancer\"], label=\"Disease to Scan For\"\n", "    )\n", "    slider = gr.Slider(0, 100)\n", "\n", "    with gr.Tab(\"X-ray\") as x_tab:\n", "        with gr.Row():\n", "            xray_scan = gr.Image()\n", "            xray_results = gr.JSON()\n", "        xray_run = gr.Button(\"Run\")\n", "        xray_run.click(\n", "            xray_model,\n", "            inputs=[disease, xray_scan],\n", "            outputs=xray_results,\n", "            api_name=\"xray_model\"\n", "        )\n", "\n", "    with gr.Tab(\"CT Scan\"):\n", "        with gr.Row():\n", "            ct_scan = gr.Image()\n", "            ct_results = gr.JSON()\n", "        ct_run = gr.Button(\"Run\")\n", "        ct_run.click(\n", "            ct_model,\n", "            inputs=[disease, ct_scan],\n", "            outputs=ct_results,\n", "            api_name=\"ct_model\"\n", "        )\n", "\n", "    upload_btn = gr.Button(\"Upload Results\", variant=\"primary\")\n", "    upload_btn.click(\n", "        lambda ct, xr: None,\n", "        inputs=[ct_results, xray_results],\n", "        outputs=[],\n", "    )\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/blocks_xray/run.py

@@ -10,7 +10,7 @@ def xray_model(diseases, img):
 def ct_model(diseases, img):
     return [{disease: 0.1 for disease in diseases}]
 
-with gr.Blocks() as demo:
+with gr.Blocks(fill_width=True) as demo:
     gr.Markdown(
         """
 # Detect Disease From Scan

gradio/blocks.py

@@ -955,6 +955,7 @@ def __init__(
         js: str | None = None,
         head: str | None = None,
         fill_height: bool = False,
+        fill_width: bool = False,
         delete_cache: tuple[int, int] | None = None,
         **kwargs,
     ):
@@ -968,6 +969,7 @@ def __init__(
             js: Custom js as a string or path to a js file. The custom js should be in the form of a single js function. This function will automatically be executed when the page loads. For more flexibility, use the head parameter to insert js inside <script> tags.
             head: Custom html to insert into the head of the demo webpage. This can be used to add custom meta tags, multiple scripts, stylesheets, etc. to the page.
             fill_height: Whether to vertically expand top-level child components to the height of the window. If True, expansion occurs when the scale value of the child components >= 1.
+            fill_width: Whether to horizontally expand to fill container fully. If False, centers and constrains app to a maximum width.
             delete_cache: A tuple corresponding [frequency, age] both expressed in number of seconds. Every `frequency` seconds, the temporary files created by this Blocks instance will be deleted if more than `age` seconds have passed since the file was created. For example, setting this to (86400, 86400) will delete temporary files every day. The cache will be deleted entirely when the server restarts. If None, no cache deletion will occur.
         """
         self.limiter = None
@@ -1001,6 +1003,7 @@ def __init__(
         self.show_error = True
         self.head = head
         self.fill_height = fill_height
+        self.fill_width = fill_width
         self.delete_cache = delete_cache
         if css is not None and os.path.exists(css):
             with open(css, encoding="utf-8") as css_file:
@@ -2044,6 +2047,7 @@ def get_config_file(self):
                 ),
             },
             "fill_height": self.fill_height,
+            "fill_width": self.fill_width,
             "theme_hash": self.theme_hash,
         }
         config.update(self.default_config.get_config())

js/app/src/Embed.svelte

@@ -4,6 +4,7 @@
 	export let wrapper: HTMLDivElement;
 	export let version: string;
 	export let initial_height: string;
+	export let fill_width: boolean;
 	export let is_embed: boolean;
 
 	export let space: string | null;
@@ -15,6 +16,7 @@
 <div
 	bind:this={wrapper}
 	class:app={!display && !is_embed}
+	class:fill_width
 	class:embed-container={display}
 	class:with-info={info}
 	class="gradio-container gradio-container-{version}"
@@ -87,27 +89,27 @@
 	}
 
 	@media (--screen-sm) {
-		.app {
+		.app:not(.fill_width) {
 			max-width: 640px;
 		}
 	}
 	@media (--screen-md) {
-		.app {
+		.app:not(.fill_width) {
 			max-width: 768px;
 		}
 	}
 	@media (--screen-lg) {
-		.app {
+		.app:not(.fill_width) {
 			max-width: 1024px;
 		}
 	}
 	@media (--screen-xl) {
-		.app {
+		.app:not(.fill_width) {
 			max-width: 1280px;
 		}
 	}
 	@media (--screen-xxl) {
-		.app {
+		.app:not(.fill_width) {
 			max-width: 1536px;
 		}
 	}

js/app/src/Index.svelte

@@ -29,6 +29,7 @@
 		path: string;
 		app_id?: string;
 		fill_height?: boolean;
+		fill_width?: boolean;
 		theme_hash?: number;
 	}
 
@@ -411,6 +412,7 @@
 	{initial_height}
 	{space}
 	loaded={loader_status === "complete"}
+	fill_width={config?.fill_width || false}
 	bind:wrapper
 >
 	{#if (loader_status === "pending" || loader_status === "error") && !(config && config?.auth_required)}