Allow gradio embeds in colab without share

CHANGELOG.md

@@ -32,6 +32,7 @@ No changes to highlight.
 * Carousel component is now deprecated by [@abidlabs](https://github.com/abidlabs) in [PR 2434](https://github.com/gradio-app/gradio/pull/2434)
 * Build Gradio from source in ui tests by by [@freddyaboulton](https://github.com/freddyaboulton) in [PR 2440](https://github.com/gradio-app/gradio/pull/2440) 
 * Change "return ValueError" to "raise ValueError" by [@vzakharov](https://github.com/vzakharov) in [PR 2445](https://github.com/gradio-app/gradio/pull/2445) 
+* Gradio is now embedded directly in colab without requiring the share link by [@aliabid94](https://github.com/aliabid94) in [PR 2455](https://github.com/gradio-app/gradio/pull/2455) 
 
 
 

gradio/blocks.py

@@ -14,6 +14,7 @@
 from typing import TYPE_CHECKING, Any, AnyStr, Callable, Dict, List, Optional, Tuple
 
 import anyio
+import pkg_resources
 import requests
 from anyio import CapacityLimiter
 
@@ -484,18 +485,6 @@ def __init__(
             }
             utils.initiated_analytics(data)
 
-    @property
-    def share(self):
-        return self._share
-
-    @share.setter
-    def share(self, value: Optional[bool]):
-        # If share is not provided, it is set to True when running in Google Colab, or False otherwise
-        if value is None:
-            self._share = True if utils.colab_check() else False
-        else:
-            self._share = value
-
     @classmethod
     def from_config(cls, config: dict, fns: List[Callable]) -> Blocks:
         """Factory method that creates a Blocks from a config and list of functions."""
@@ -1063,7 +1052,6 @@ def reverse(text):
             self.queue()
 
         self.config = self.get_config_file()
-        self.share = share
         self.encrypt = encrypt
         self.max_threads = max(
             self._queue.max_thread_count if self.enable_queue else 0, max_threads
@@ -1110,26 +1098,38 @@ def reverse(text):
                     )
         utils.launch_counter()
 
+        self.is_colab = utils.colab_check()
+        self.share = (
+            share
+            if share is not None
+            else True
+            if self.is_colab and self.enable_queue
+            else False
+        )
+
         # If running in a colab or not able to access localhost,
         # a shareable link must be created.
-        is_colab = utils.colab_check()
-        if is_colab or (_frontend and not networking.url_ok(self.local_url)):
+
+        if self.is_colab and not quiet:
+            if debug:
+                print(strings.en["COLAB_DEBUG_TRUE"])
+            else:
+                print(strings.en["COLAB_DEBUG_FALSE"])
+
+        if (self.is_colab and not self.share) or (
+            _frontend and not networking.url_ok(self.local_url)
+        ):
             if not self.share:
                 raise ValueError(
-                    "When running in Google Colab or when localhost is not accessible, a shareable link must be created. Please set share=True."
+                    "When using queueing in Colab or when localhost is not accessible, a shareable link must be created. Please set share=True."
                 )
-            if is_colab and not quiet:
-                if debug:
-                    print(strings.en["COLAB_DEBUG_TRUE"])
-                else:
-                    print(strings.en["COLAB_DEBUG_FALSE"])
         else:
             print(
                 strings.en["RUNNING_LOCALLY_SEPARATED"].format(
                     self.protocol, self.server_name, self.server_port
                 )
             )
-        if is_colab and self.requires_permissions:
+        if self.is_colab and self.requires_permissions:
             print(strings.en["MEDIA_PERMISSIONS_IN_COLAB"])
 
         if self.share:
@@ -1171,12 +1171,21 @@ def reverse(text):
 
                 if self.share:
                     while not networking.url_ok(self.share_url):
-                        time.sleep(1)
+                        time.sleep(0.2)
                     display(
                         HTML(
                             f'<div><iframe src="{self.share_url}" width="{self.width}" height="{self.height}" allow="autoplay; camera; microphone; clipboard-read; clipboard-write;" frameborder="0" allowfullscreen></iframe></div>'
                         )
                     )
+                elif self.is_colab:
+                    with open(
+                        pkg_resources.resource_filename(
+                            "gradio", "templates/colab.html"
+                        )
+                    ) as colab_file:
+                        colab_html = colab_file.read()
+                    colab_html = colab_html.replace("$PORT", str(self.server_port))
+                    display(HTML(colab_html))
                 else:
                     display(
                         HTML(
@@ -1189,7 +1198,7 @@ def reverse(text):
         if getattr(self, "analytics_enabled", False):
             data = {
                 "launch_method": "browser" if inbrowser else "inline",
-                "is_google_colab": is_colab,
+                "is_google_colab": self.is_colab,
                 "is_sharing_on": self.share,
                 "share_url": self.share_url,
                 "ip_address": self.ip_address,

gradio/routes.py

@@ -289,6 +289,8 @@ async def run_predict(
                 )
             return output
 
+        @app.post("/run/{api_name}", dependencies=[Depends(login_check)])
+        @app.post("/run/{api_name}/", dependencies=[Depends(login_check)])
         @app.post("/api/{api_name}", dependencies=[Depends(login_check)])
         @app.post("/api/{api_name}/", dependencies=[Depends(login_check)])
         async def predict(
@@ -302,7 +304,7 @@ async def predict(
                 if body.fn_index is None:
                     return JSONResponse(
                         content={
-                            "error": f"This app has no endpoint /api/{api_name}/."
+                            "error": f"This app has no endpoint /run/{api_name}/."
                         },
                         status_code=500,
                     )

gradio/templates/colab.html

@@ -0,0 +1,26 @@
+<script>
+    document.querySelector("base").href = "https://localhost:$PORT";
+
+    function rehydrate() {
+        for (const script of document.querySelectorAll("script")) {
+            const newScript = document.createElement('script')
+            newScript.type = script.type;
+            newScript.src = script.src;
+            newScript.textContent = script.textContent;
+            const head = document.getElementsByTagName('head')[0];
+            if (script.textContent.includes("window.gradio_config =")) {
+                window.gradio_config = JSON.parse(script.textContent.replace("window.gradio_config =", "").replace(/;$/, "").trim());
+            }
+            head.appendChild(newScript);
+            newScript.remove();
+        }
+
+        console.log(window)
+    }
+    fetch(".")
+        .then((x) => x.text())
+        .then((html) => {
+            document.body.innerHTML = html;
+        })
+        .then(() => rehydrate());
+</script>

gradio/version.txt

@@ -1 +1 @@
-3.4.1
+3.0.1b122

ui/packages/app/src/ApiDocs.svelte

@@ -30,17 +30,17 @@
 						class="bg-gray-50 border border-gray-100 dark:bg-gray-800 dark:border-gray-700 p-6 rounded"
 					>
 						<h3 class="text-3xl text-amber-500 font-semibold mb-2">
-							POST /api/{dependency.api_name}
+							POST /run/{dependency.api_name}
 						</h3>
 						<div class="mb-6">
 							Full URL: <span class="underline"
-								>{root}api/{dependency.api_name}</span
+								>{root}run/{dependency.api_name}</span
 							>
 							<button
 								class="ml-1 px-2 py-0.5 rounded bg-gray-200 dark:bg-gray-700"
 								on:click={() => {
 									navigator.clipboard.writeText(
-										root + "api/" + dependency.api_name
+										root + "run/" + dependency.api_name
 									);
 									just_copied = d;
 									setTimeout(() => {

ui/packages/app/src/api.ts

@@ -112,7 +112,7 @@ export const fn =
 			function send_message(fn: number, data: any) {
 				ws_map.get(fn)?.send(JSON.stringify(data));
 			}
-			var ws_endpoint = api_endpoint === "api/" ? location.href : api_endpoint;
+			var ws_endpoint = api_endpoint === "run/" ? location.href : api_endpoint;
 			var ws_protocol = ws_endpoint.startsWith("https") ? "wss:" : "ws:";
 			if (is_space) {
 				const SPACE_REGEX = /embed\/(.*)\/\+/g;

ui/packages/app/src/main.ts

@@ -184,7 +184,7 @@ function mount_app(
 		});
 	} else {
 		let session_hash = Math.random().toString(36).substring(2);
-		config.fn = fn(session_hash, config.root + "api/", config.is_space);
+		config.fn = fn(session_hash, config.root + "run/", config.is_space);
 
 		new Blocks({
 			target: wrapper,

ui/packages/app/test/blocks_inputs.spec.ts

@@ -12,7 +12,7 @@ function mock_demo(page: Page, demo: string) {
 }
 
 function mock_api(page: Page, body: Array<unknown>) {
-	return page.route("**/api/predict/", (route) => {
+	return page.route("**/run/predict/", (route) => {
 		const id = JSON.parse(route.request().postData()!).fn_index;
 		return route.fulfill({
 			headers: {
@@ -39,7 +39,7 @@ test("renders the correct elements", async ({ page }) => {
 	await textboxTwo.fill("dawood");
 	await Promise.all([
 		page.click('text="Submit"'),
-		page.waitForResponse("**/api/predict/")
+		page.waitForResponse("**/run/predict/")
 	]);
 
 	await expect(await page.getByLabel("Output")).toHaveValue("hi dawood");

ui/packages/app/test/blocks_kinematics.spec.ts

@@ -12,7 +12,7 @@ function mock_demo(page: Page, demo: string) {
 }
 
 function mock_api(page: Page, body: Array<unknown>) {
-	return page.route("**/api/predict/", (route) => {
+	return page.route("**/run/predict/", (route) => {
 		const id = JSON.parse(route.request().postData()!).fn_index;
 		return route.fulfill({
 			headers: {
@@ -32,6 +32,6 @@ test("renders the correct elements", async ({ page }) => {
 
 	await Promise.all([
 		page.click("button"),
-		page.waitForResponse("**/api/predict/")
+		page.waitForResponse("**/run/predict/")
 	]);
 });

ui/packages/app/test/blocks_page_load.spec.ts

@@ -12,7 +12,7 @@ function mock_demo(page: Page, demo: string) {
 }
 
 function mock_api(page: Page, body: Array<unknown>) {
-	return page.route("**/api/predict/", (route) => {
+	return page.route("**/run/predict/", (route) => {
 		const id = JSON.parse(route.request().postData()!).fn_index;
 		return route.fulfill({
 			headers: {

ui/packages/app/test/blocks_xray.spec.ts

@@ -12,7 +12,7 @@ function mock_demo(page: Page, demo: string) {
 }
 
 function mock_api(page: Page, body: Array<unknown>) {
-	return page.route("**/api/predict/", (route) => {
+	return page.route("**/run/predict/", (route) => {
 		const id = JSON.parse(route.request().postData()!).fn_index;
 		return route.fulfill({
 			headers: {
@@ -65,7 +65,7 @@ test("can run an api request and display the data", async ({ page }) => {
 
 	await Promise.all([
 		run_button.click(),
-		page.waitForResponse("**/api/predict/")
+		page.waitForResponse("**/run/predict/")
 	]);
 
 	const json = await page.getByTestId("json").first();

ui/packages/app/test/input_output.spec.ts

@@ -12,7 +12,7 @@ function mock_demo(page: Page, demo: string) {
 }
 
 function mock_api(page: Page, body: Array<unknown>) {
-	return page.route("**/api/predict/", (route) => {
+	return page.route("**/run/predict/", (route) => {
 		const id = JSON.parse(route.request().postData()!).fn_index;
 		return route.fulfill({
 			headers: {
@@ -35,7 +35,7 @@ test("a component acts as both input and output", async ({ page }) => {
 	await textbox.fill("test");
 	await Promise.all([
 		page.click("button"),
-		page.waitForResponse("**/api/predict/")
+		page.waitForResponse("**/run/predict/")
 	]);
 	await expect(await textbox).toHaveValue("tset");
 });

ui/packages/app/test/kitchen_sink.spec.ts

@@ -13,7 +13,7 @@ function mock_demo(page: Page, demo: string) {
 }
 
 function mock_api(page: Page, body: Array<unknown>) {
-	return page.route("**/api/predict/", (route) => {
+	return page.route("**/run/predict/", (route) => {
 		const id = JSON.parse(route.request().postData()!).fn_index;
 		return route.fulfill({
 			headers: {
@@ -215,7 +215,7 @@ test("test outputs", async ({ page }) => {
 
 	await Promise.all([
 		submit_button.click(),
-		page.waitForResponse("**/api/predict/")
+		page.waitForResponse("**/run/predict/")
 	]);
 
 	const textbox = await page.getByLabel("Textbox").nth(2);

ui/packages/app/test/outbreak_forecast.spec.ts

@@ -13,7 +13,7 @@ function mock_demo(page: Page, demo: string) {
 }
 
 function mock_api(page: Page, body: Array<unknown>) {
-	return page.route("**/api/predict/", (route) => {
+	return page.route("**/run/predict/", (route) => {
 		const id = JSON.parse(route.request().postData()!).fn_index;
 		return route.fulfill({
 			headers: {
@@ -37,7 +37,7 @@ test("matplotlib", async ({ page }) => {
 
 	await Promise.all([
 		page.click("text=Submit"),
-		page.waitForResponse("**/api/predict/")
+		page.waitForResponse("**/run/predict/")
 	]);
 
 	const matplotlib_img = await page.locator("img").nth(0);
@@ -63,7 +63,7 @@ test("plotly", async ({ page }) => {
 
 	await Promise.all([
 		page.click("text=Submit"),
-		page.waitForResponse("**/api/predict/")
+		page.waitForResponse("**/run/predict/")
 	]);
 	await expect(page.locator(".js-plotly-plot")).toHaveCount(1);
 });