Swap websockets for SSE

.changeset/brave-cats-show.md

@@ -0,0 +1,7 @@
+---
+"@gradio/app": minor
+"@gradio/theme": minor
+"gradio": minor
+---
+
+feat:Lite: Support the custom HTML element syntax `<gradio-lite>`

.changeset/crazy-dancers-allow.md

@@ -0,0 +1,5 @@
+---
+"@gradio/wasm": minor
+---
+
+feat:Make the HTTP requests for the Wasm worker wait for the initial `run_code()` or `run_file()` to finish

.changeset/green-tips-read.md

@@ -0,0 +1,7 @@
+---
+"@gradio/app": minor
+"@gradio/wasm": minor
+"gradio": minor
+---
+
+feat:Apply formatter (and small refactoring) to the Lite-related frontend code

.changeset/twenty-dryers-wave.md

@@ -0,0 +1,7 @@
+---
+"@gradio/atoms": patch
+"@gradio/json": patch
+"gradio": patch
+---
+
+fix:Show empty JSON icon when `value` is `null`

.changeset/wise-beans-itch.md

@@ -0,0 +1,6 @@
+---
+"@gradio/dataframe": minor
+"gradio": minor
+---
+
+feat:Adds `column_widths` to `gr.Dataframe` and hide overflowing text when `wrap=False`

client/js/src/client.ts

@@ -427,6 +427,9 @@ export function api_factory(
 				}
 
 				let websocket: WebSocket;
+				let eventSource: EventSource;
+				const MAJOR_VERSION = parseInt(config.version.split(".")[0]);
+				let protocol = MAJOR_VERSION >= 4 ? "sse" : "ws";
 
 				const _endpoint = typeof endpoint === "number" ? "/predict" : endpoint;
 				let payload: Payload;
@@ -514,7 +517,7 @@ export function api_factory(
 									time: new Date()
 								});
 							});
-					} else {
+					} else if (protocol == "ws") {
 						fire_event({
 							type: "status",
 							stage: "pending",
@@ -634,6 +637,114 @@ export function api_factory(
 								websocket.send(JSON.stringify({ hash: session_hash }))
 							);
 						}
+					} else {
+						fire_event({
+							type: "status",
+							stage: "pending",
+							queue: true,
+							endpoint: _endpoint,
+							fn_index,
+							time: new Date()
+						});
+						var params = new URLSearchParams({
+							fn_index: fn_index.toString(),
+							session_hash: session_hash
+						}).toString();
+						let url = new URL(
+							`${http_protocol}//${resolve_root(
+								host,
+								config.path,
+								true
+							)}/queue/join?${params}`
+						);
+
+						eventSource = new EventSource(url);
+
+						eventSource.onmessage = function (event) {
+							const _data = JSON.parse(event.data);
+							const { type, status, data } = handle_message(
+								_data,
+								last_status[fn_index]
+							);
+
+							if (type === "update" && status && !complete) {
+								// call 'status' listeners
+								fire_event({
+									type: "status",
+									endpoint: _endpoint,
+									fn_index,
+									time: new Date(),
+									...status
+								});
+								if (status.stage === "error") {
+									eventSource.close();
+								}
+							} else if (type === "data") {
+								let event_id = _data.event_id;
+								post_data(
+									`${http_protocol}//${resolve_root(
+										host,
+										config.path,
+										true
+									)}/queue/data`,
+									{
+										...payload,
+										session_hash,
+										event_id
+									},
+									hf_token
+								);
+							} else if (type === "complete") {
+								complete = status;
+							} else if (type === "log") {
+								fire_event({
+									type: "log",
+									log: data.log,
+									level: data.level,
+									endpoint: _endpoint,
+									fn_index
+								});
+							} else if (type === "generating") {
+								fire_event({
+									type: "status",
+									time: new Date(),
+									...status,
+									stage: status?.stage!,
+									queue: true,
+									endpoint: _endpoint,
+									fn_index
+								});
+							}
+							if (data) {
+								fire_event({
+									type: "data",
+									time: new Date(),
+									data: transform_files
+										? transform_output(
+												data.data,
+												api_info,
+												config.root,
+												config.root_url
+										  )
+										: data.data,
+									endpoint: _endpoint,
+									fn_index
+								});
+
+								if (complete) {
+									fire_event({
+										type: "status",
+										time: new Date(),
+										...complete,
+										stage: status?.stage!,
+										queue: true,
+										endpoint: _endpoint,
+										fn_index
+									});
+									eventSource.close();
+								}
+							}
+						};
 					}
 				});
 

client/python/gradio_client/client.py

@@ -19,6 +19,7 @@
 from threading import Lock
 from typing import Any, Callable, Literal
 
+import httpx
 import huggingface_hub
 import requests
 import websockets
@@ -73,6 +74,7 @@ def __init__(
         serialize: bool = True,
         output_dir: str | Path = DEFAULT_TEMP_DIR,
         verbose: bool = True,
+        auth: tuple[str, str] | None = None,
     ):
         """
         Parameters:
@@ -92,6 +94,7 @@ def __init__(
             library_version=utils.__version__,
         )
         self.space_id = None
+        self.cookies: dict[str, str] = {}
         self.output_dir = (
             str(output_dir) if isinstance(output_dir, Path) else output_dir
         )
@@ -122,11 +125,15 @@ def __init__(
             print(f"Loaded as API: {self.src} ✔")
 
         self.api_url = urllib.parse.urljoin(self.src, utils.API_URL)
+        self.sse_url = urllib.parse.urljoin(self.src, utils.SSE_URL)
+        self.sse_data_url = urllib.parse.urljoin(self.src, utils.SSE_DATA_URL)
         self.ws_url = urllib.parse.urljoin(
             self.src.replace("http", "ws", 1), utils.WS_URL
         )
         self.upload_url = urllib.parse.urljoin(self.src, utils.UPLOAD_URL)
         self.reset_url = urllib.parse.urljoin(self.src, utils.RESET_URL)
+        if auth is not None:
+            self._login(auth)
         self.config = self._get_config()
         self._info = self._get_api_info()
         self.session_hash = str(uuid.uuid4())
@@ -322,7 +329,7 @@ def submit(
         inferred_fn_index = self._infer_fn_index(api_name, fn_index)
 
         helper = None
-        if self.endpoints[inferred_fn_index].use_ws:
+        if self.endpoints[inferred_fn_index].protocol in ("ws", "sse"):
             helper = Communicator(
                 Lock(),
                 JobStatus(),
@@ -363,11 +370,11 @@ def _get_api_info(self):
         # Versions of Gradio older than 3.29.0 returned format of the API info
         # from the /info endpoint
         if version.parse(self.config.get("version", "2.0")) > version.Version("3.36.1"):
-            r = requests.get(api_info_url, headers=self.headers)
+            r = requests.get(api_info_url, headers=self.headers, cookies=self.cookies)
             if r.ok:
                 info = r.json()
             else:
-                raise ValueError(f"Could not fetch api info for {self.src}")
+                raise ValueError(f"Could not fetch api info for {self.src}: {r.text}")
         else:
             fetch = requests.post(
                 utils.SPACE_FETCHER_URL,
@@ -376,7 +383,9 @@ def _get_api_info(self):
             if fetch.ok:
                 info = fetch.json()["api"]
             else:
-                raise ValueError(f"Could not fetch api info for {self.src}")
+                raise ValueError(
+                    f"Could not fetch api info for {self.src}: {fetch.text}"
+                )
 
         return info
 
@@ -599,14 +608,33 @@ def __del__(self):
     def _space_name_to_src(self, space) -> str | None:
         return huggingface_hub.space_info(space, token=self.hf_token).host  # type: ignore
 
+    def _login(self, auth: tuple[str, str]):
+        resp = requests.post(
+            urllib.parse.urljoin(self.src, utils.LOGIN_URL),
+            data={"username": auth[0], "password": auth[1]},
+        )
+        if not resp.ok:
+            raise ValueError(f"Could not login to {self.src}")
+        self.cookies = {
+            cookie.name: cookie.value
+            for cookie in resp.cookies
+            if cookie.value is not None
+        }
+
     def _get_config(self) -> dict:
         r = requests.get(
-            urllib.parse.urljoin(self.src, utils.CONFIG_URL), headers=self.headers
+            urllib.parse.urljoin(self.src, utils.CONFIG_URL),
+            headers=self.headers,
+            cookies=self.cookies,
         )
         if r.ok:
             return r.json()
+        elif r.status_code == 401:
+            raise ValueError("Could not load {self.src}. Please login.")
         else:  # to support older versions of Gradio
-            r = requests.get(self.src, headers=self.headers)
+            r = requests.get(self.src, headers=self.headers, cookies=self.cookies)
+            if not r.ok:
+                raise ValueError(f"Could not fetch config for {self.src}")
             # some basic regex to extract the config
             result = re.search(r"window.gradio_config = (.*?);[\s]*</script>", r.text)
             try:
@@ -781,7 +809,7 @@ def __init__(self, client: Client, fn_index: int, dependency: dict):
         self.api_name: str | Literal[False] | None = (
             "/" + api_name if isinstance(api_name, str) else api_name
         )
-        self.use_ws = self._use_websocket(self.dependency)
+        self.protocol = self._get_protocol(self.dependency)
         self.input_component_types = [
             self._get_component_type(id_) for id_ in dependency["inputs"]
         ]
@@ -847,23 +875,26 @@ def _inner(*data):
 
     def make_predict(self, helper: Communicator | None = None):
         def _predict(*data) -> tuple:
-            data = json.dumps(
-                {
-                    "data": data,
-                    "fn_index": self.fn_index,
-                    "session_hash": self.client.session_hash,
-                }
-            )
-            hash_data = json.dumps(
-                {
-                    "fn_index": self.fn_index,
-                    "session_hash": self.client.session_hash,
-                }
-            )
+            data = {
+                "data": data,
+                "fn_index": self.fn_index,
+                "session_hash": self.client.session_hash,
+            }
 
-            if self.use_ws:
+            hash_data = {
+                "fn_index": self.fn_index,
+                "session_hash": self.client.session_hash,
+            }
+
+            if self.protocol == "ws":
                 result = utils.synchronize_async(self._ws_fn, data, hash_data, helper)
                 if "error" in result:
+                    raise ValueError(result["error"])
+            elif self.protocol == "sse":
+                result = utils.synchronize_async(self._sse_fn, data, hash_data, helper)
+                if "error" in result:
+                    print(">>>", result)
+
                     raise ValueError(result["error"])
             else:
                 response = requests.post(
@@ -1045,15 +1076,21 @@ def process_predictions(self, *predictions):
         predictions = self.reduce_singleton_output(*predictions)
         return predictions
 
-    def _use_websocket(self, dependency: dict) -> bool:
+    def _get_protocol(self, dependency: dict) -> Literal["sse", "ws", "http"]:
+        major_version = int(self.client.config["version"].split(".")[0])
+        if major_version >= 4:
+            return "sse"
         queue_enabled = self.client.config.get("enable_queue", False)
         queue_uses_websocket = version.parse(
             self.client.config.get("version", "2.0")
         ) >= version.Version("3.2")
         dependency_uses_queue = dependency.get("queue", False) is not False
-        return queue_enabled and queue_uses_websocket and dependency_uses_queue
+        if queue_enabled and queue_uses_websocket and dependency_uses_queue:
+            return "ws"
+        else:
+            return "http"
 
-    async def _ws_fn(self, data, hash_data, helper: Communicator):
+    async def _ws_fn(self, data: dict, hash_data: dict, helper: Communicator):
         async with websockets.connect(  # type: ignore
             self.client.ws_url,
             open_timeout=10,
@@ -1062,6 +1099,18 @@ async def _ws_fn(self, data, hash_data, helper: Communicator):
         ) as websocket:
             return await utils.get_pred_from_ws(websocket, data, hash_data, helper)
 
+    async def _sse_fn(self, data: dict, hash_data: dict, helper: Communicator):
+        async with httpx.AsyncClient(timeout=httpx.Timeout(timeout=None)) as client:
+            return await utils.get_pred_from_sse(
+                client,
+                data,
+                hash_data,
+                helper,
+                self.client.sse_url,
+                self.client.sse_data_url,
+                self.client.cookies,
+            )
+
 
 @document("result", "outputs", "status")
 class Job(Future):
@@ -1102,13 +1151,9 @@ def __next__(self) -> tuple | Any:
         if not self.communicator:
             raise StopIteration()
 
-        with self.communicator.lock:
-            if self.communicator.job.latest_status.code == Status.FINISHED:
-                raise StopIteration()
-
         while True:
             with self.communicator.lock:
-                if len(self.communicator.job.outputs) == self._counter + 1:
+                if len(self.communicator.job.outputs) >= self._counter + 1:
                     o = self.communicator.job.outputs[self._counter]
                     self._counter += 1
                     return o