Repository: gradio-app/gradio

Issue:
BUG: DataFrame output cannot handle null values
#### Result:
pandas DataFrame doesn't display if more than 10 cells are to be shown initially

#### Expectation: 
The DataFrame will be displayed

#### Versions:
gradio 2.2.15
Python 3.9.6

#### Reproducible Example

```
import gradio as gr
import pandas as pd
import plotly.express as px

def show_pens(alpha):
    df_pens = pd.read_csv('https://raw.githubusercontent.com/mwaskom/seaborn-data/master/penguins.csv')
    print(df_pens)
    return df_pens.iloc[:5, :3]

iface = gr.Interface(
    fn=show_pens, 
    inputs=['text'],
    outputs=[gr.outputs.Dataframe()],
    description="Table of Palmer Penguins"
)

iface.launch()
```

### Screenshot of failing output
<img width="1312" alt="Screen Shot 2021-11-16 at 7 59 47 AM" src="https://user-images.githubusercontent.com/7703961/141990015-616ed983-0c78-4b2c-9b35-9b031d7ec735.png">

### Console error screenshot

<img width="544" alt="Screen Shot 2021-11-16 at 8 05 56 AM" src="https://user-images.githubusercontent.com/7703961/141990591-d00b6bcd-7492-4628-ad40-47264e638f2a.png">

### Working example

Change the return statement to  ` return df_pens.iloc[:3, :3]`

### Screenshot of working output

<img width="1286" alt="Screen Shot 2021-11-16 at 8 00 24 AM" src="https://user-images.githubusercontent.com/7703961/141990208-e9d1e011-c9e4-4117-a4ce-15f4099975b7.png">




Discussion:
Interesting, @aliabid94 can you look into this?
WIll take a look, thanks @discdiver 
Ah seems like there is null value in the dataframe that's throwing the rendered off - its not related to size of output. See image:
![image](https://user-images.githubusercontent.com/7870876/143135531-a15f4b70-3c00-4cf2-9de2-d98a3992926d.png)
 
Fixing the null value issue now.
Thanks. Yep, there are a few nulls. So gradio can't display DataFrames with
null values? If that's the case, probably worth adding to the docs.

FWIW, there's probably a fix as that's not an issue on Streamlit.


On Tue, Nov 23, 2021 at 4:57 PM aliabid94 ***@***.***> wrote:

> Ah seems like there is null value in the dataframe that's throwing the
> rendered off - its not related to size of output. See image:
> [image: image]
> <https://user-images.githubusercontent.com/7870876/143135531-a15f4b70-3c00-4cf2-9de2-d98a3992926d.png>
>
> Fixing the null value issue now.
>
> —
> You are receiving this because you were mentioned.
> Reply to this email directly, view it on GitHub
> <https://github.com/gradio-app/gradio/issues/371#issuecomment-977203531>,
> or unsubscribe
> <https://github.com/notifications/unsubscribe-auth/AB2Y3GJKM36PSKREN2PG5A3UNQE5TANCNFSM5IEG63IQ>
> .
> Triage notifications on the go with GitHub Mobile for iOS
> <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675>
> or Android
> <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.
>
>

Yes there's a fix in the works, will be in the next release. Will update here when it's in.
Thanks!

On Tue, Nov 23, 2021 at 5:37 PM aliabid94 ***@***.***> wrote:

> Yes there's a fix in the works, will be in the next release. Will update
> here when it's in.
>
> —
> You are receiving this because you were mentioned.
> Reply to this email directly, view it on GitHub
> <https://github.com/gradio-app/gradio/issues/371#issuecomment-977235539>,
> or unsubscribe
> <https://github.com/notifications/unsubscribe-auth/AB2Y3GJPWJQWNICKBDTVIITUNQJRBANCNFSM5IEG63IQ>
> .
> Triage notifications on the go with GitHub Mobile for iOS
> <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675>
> or Android
> <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.
>
>


Resolving patch:
diff --git a/gradio/routes.py b/gradio/routes.py
--- a/gradio/routes.py
+++ b/gradio/routes.py
@@ -9,8 +9,9 @@
 import secrets
 import traceback
 import urllib
-from typing import List, Optional, Type
+from typing import Any, List, Optional, Type
 
+import orjson
 import pkg_resources
 import uvicorn
 from fastapi import Depends, FastAPI, HTTPException, Request, status
@@ -19,6 +20,7 @@
 from fastapi.responses import FileResponse, HTMLResponse, JSONResponse
 from fastapi.security import OAuth2PasswordRequestForm
 from fastapi.templating import Jinja2Templates
+from jinja2.exceptions import TemplateNotFound
 from starlette.responses import RedirectResponse
 
 from gradio import encryptor, queueing, utils
@@ -37,7 +39,15 @@
     VERSION
 )
 
-app = FastAPI()
+
+class ORJSONResponse(JSONResponse):
+    media_type = "application/json"
+
+    def render(self, content: Any) -> bytes:
+        return orjson.dumps(content)
+
+
+app = FastAPI(default_response_class=ORJSONResponse)
 app.add_middleware(
     CORSMiddleware,
     allow_origins=["*"],
@@ -108,9 +118,15 @@ def main(request: Request, user: str = Depends(get_current_user)):
     else:
         config = {"auth_required": True, "auth_message": app.interface.auth_message}
 
-    return templates.TemplateResponse(
-        "frontend/index.html", {"request": request, "config": config}
-    )
+    try:
+        return templates.TemplateResponse(
+            "frontend/index.html", {"request": request, "config": config}
+        )
+    except TemplateNotFound:
+        raise ValueError(
+            "Did you install Gradio from source files? You need to build "
+            "the frontend by running /scripts/build_frontend.sh"
+        )
 
 
 @app.get("/config/", dependencies=[Depends(login_check)])
diff --git a/setup.py b/setup.py
--- a/setup.py
+++ b/setup.py
@@ -22,6 +22,7 @@
         "markdown-it-py[linkify,plugins]",
         "matplotlib",
         "numpy",
+        "orjson",
         "pandas",
         "paramiko",
         "pillow",


Test patch: