Add support for numpy array and other types to gr.Dataframe() initial value (#2804)

* bigquery draft

* updated guide

* orjson fix

* formatting

* changelog

* rm guide

Author: abidlabs

CHANGELOG.md

@@ -4,7 +4,7 @@
 No changes to highlight.
 
 ## Bug Fixes:
-No changes to highlight.
+* Allows `gr.Dataframe()` to take a `pandas.DataFrame` that includes numpy array and other types as its initial value, by [@abidlabs](https://github.com/abidlabs) in [PR 2804](https://github.com/gradio-app/gradio/pull/2804) 
 
 ## Documentation Changes:
 No changes to highlight.

gradio/components.py

@@ -2449,7 +2449,7 @@ def postprocess(
         """
         if y is None:
             return self.postprocess(self.test_input)
-        if isinstance(y, Dict):
+        if isinstance(y, dict):
             return y
         if isinstance(y, str):
             y = pd.read_csv(y)

gradio/routes.py

@@ -31,6 +31,7 @@
 from fastapi.security import OAuth2PasswordRequestForm
 from fastapi.templating import Jinja2Templates
 from jinja2.exceptions import TemplateNotFound
+from jinja2.utils import htmlsafe_json_dumps
 from starlette.responses import RedirectResponse
 from starlette.websockets import WebSocketState
 
@@ -55,11 +56,28 @@
 class ORJSONResponse(JSONResponse):
     media_type = "application/json"
 
+    @staticmethod
+    def _render(content: Any) -> bytes:
+        return orjson.dumps(
+            content,
+            option=orjson.OPT_SERIALIZE_NUMPY | orjson.OPT_PASSTHROUGH_DATETIME,
+            default=str,
+        )
+
     def render(self, content: Any) -> bytes:
-        return orjson.dumps(content, option=orjson.OPT_SERIALIZE_NUMPY)
+        return ORJSONResponse._render(content)
+
+    @staticmethod
+    def _render_str(content: Any) -> str:
+        return ORJSONResponse._render(content).decode("utf-8")
+
+
+def toorjson(value):
+    return htmlsafe_json_dumps(value, dumps=ORJSONResponse._render_str)
 
 
 templates = Jinja2Templates(directory=STATIC_TEMPLATE_LIB)
+templates.env.filters["toorjson"] = toorjson
 
 
 ###########

test/test_components.py

@@ -551,8 +551,7 @@ async def test_in_interface(self):
 
 
 class TestImage:
-    @pytest.mark.asyncio
-    async def test_component_functions(self):
+    def test_component_functions(self):
         """
         Preprocess, postprocess, serialize, generate_sample, get_config, _segment_by_slic
         type: pil, file, filepath, numpy
@@ -618,8 +617,7 @@ async def test_component_functions(self):
         image_output = gr.Image(type="numpy")
         assert image_output.postprocess(y_img).startswith("data:image/png;base64,")
 
-    @pytest.mark.asyncio
-    async def test_in_interface_as_input(self):
+    def test_in_interface_as_input(self):
         """
         Interface, process, interpret
         type: file
@@ -638,8 +636,7 @@ async def test_in_interface_as_input(self):
             lambda x: np.sum(x), image_input, "number", interpretation="default"
         )
 
-    @pytest.mark.asyncio
-    async def test_in_interface_as_output(self):
+    def test_in_interface_as_output(self):
         """
         Interface, process
         """
@@ -789,8 +786,7 @@ def test_tokenize(self):
         similarity = SequenceMatcher(a=x_wav["data"], b=x_new).ratio()
         assert similarity > 0.9
 
-    @pytest.mark.asyncio
-    async def test_in_interface(self):
+    def test_in_interface(self):
         def reverse_audio(audio):
             sr, data = audio
             return (sr, np.flipud(data))
@@ -806,8 +802,7 @@ def reverse_audio(audio):
         ).ratio()
         assert similarity > 0.99
 
-    @pytest.mark.asyncio
-    async def test_in_interface_as_output(self):
+    def test_in_interface_as_output(self):
         """
         Interface, process
         """
@@ -1007,7 +1002,7 @@ def test_dataframe_postprocess_all_types(self):
                     "%B %d, %Y, %r"
                 ),
                 "number": np.array([0.2233, 0.57281]),
-                "number_2": np.array([84, 23]).astype(np.int),
+                "number_2": np.array([84, 23]).astype(np.int64),
                 "bool": [True, False],
                 "markdown": ["# Hello", "# Goodbye"],
             }
@@ -1167,8 +1162,7 @@ def test_component_functions(self):
             }
         ).endswith(".mp4")
 
-    @pytest.mark.asyncio
-    async def test_in_interface(self):
+    def test_in_interface(self):
         """
         Interface, process
         """
@@ -1396,8 +1390,7 @@ def test_color_argument(self):
         )
         assert update_5["color"] == "transparent"
 
-    @pytest.mark.asyncio
-    async def test_in_interface(self):
+    def test_in_interface(self):
         """
         Interface, process
         """
@@ -1640,8 +1633,7 @@ def test_component_functions(self):
             "root_url": None,
         } == html_component.get_config()
 
-    @pytest.mark.asyncio
-    async def test_in_interface(self):
+    def test_in_interface(self):
         """
         Interface, process
         """
@@ -1660,8 +1652,7 @@ def test_component_functions(self):
             """<h1>Let\'s learn about <span class="math inline"><span style=\'font-size: 0px\'>x</span><svg xmlns:xlink="http://www.w3.org/1999/xlink" width="11.6pt" height="19.35625pt" viewBox="0 0 11.6 19.35625" xmlns="http://www.w3.org/2000/svg" version="1.1">\n \n <defs>\n  <style type="text/css">*{stroke-linejoin: round; stroke-linecap: butt}</style>\n </defs>\n <g id="figure_1">\n  <g id="patch_1">\n   <path d="M 0 19.35625"""
         )
 
-    @pytest.mark.asyncio
-    async def test_in_interface(self):
+    def test_in_interface(self):
         """
         Interface, process
         """
@@ -1693,8 +1684,7 @@ def test_component_functions(self):
             "style": {},
         } == component.get_config()
 
-    @pytest.mark.asyncio
-    async def test_in_interface(self):
+    def test_in_interface(self):
         """
         Interface, process
         """

test/test_routes.py

@@ -4,6 +4,8 @@
 import sys
 from unittest.mock import patch
 
+import numpy as np
+import pandas as pd
 import pytest
 import starlette.routing
 import websockets
@@ -398,3 +400,24 @@ def test_show_api_queue_not_enabled():
     io.close()
     io.launch(prevent_thread_lock=True, show_api=False)
     assert not io.show_api
+
+
+def test_orjson_serialization():
+    df = pd.DataFrame(
+        {
+            "date_1": pd.date_range("2021-01-01", periods=2),
+            "date_2": pd.date_range("2022-02-15", periods=2).strftime("%B %d, %Y, %r"),
+            "number": np.array([0.2233, 0.57281]),
+            "number_2": np.array([84, 23]).astype(np.int64),
+            "bool": [True, False],
+            "markdown": ["# Hello", "# Goodbye"],
+        }
+    )
+
+    with gr.Blocks() as demo:
+        gr.DataFrame(df)
+    app, _, _ = demo.launch(prevent_thread_lock=True)
+    test_client = TestClient(app)
+    response = test_client.get("/")
+    assert response.status_code == 200
+    demo.close()

ui/packages/app/build_plugins.ts

@@ -11,7 +11,7 @@ export function inject_ejs(): Plugin {
 		transformIndexHtml: (html) => {
 			return html.replace(
 				/%gradio_config%/,
-				`<script>window.gradio_config = {{ config | tojson }};</script>`
+				`<script>window.gradio_config = {{ config | toorjson }};</script>`
 			);
 		}
 	};