Website Improvements and Fixes

[aliabid94]

Let's fix all the bugs in the website, clean up the code, and make it pixel perfect.

Known issues now:

• [ ] The example images don't load because of CORS - we may need to ask HF spaces to enable CORS for examples (e.g. https://huggingface.co/gradioiframe/abidlabs/Echocardiogram-Segmentation/+/file/img2.jpg). But first check if it's not a gradio problem (maybe we lost CORS support during the fastapi migration, we had explicitly enabled it with flask)
• [x] The custom css leaking out of the embedding on the audio example in the main page is a hard (maybe impossible) fix - can you just fork that space and have the custom css target only things inside the output component.

Code cleanup:

• [ ] Make sure guides look good when just read as markdown too (for related_spaces and tags)
• [ ] Allow a {{ spaces["user/repo"] }} tag just like we have {{ demo["folder"] }} tag for embedding spaces instead of directly using iframes
• [ ] I like that we compile the homepage to a bunch of static files because we don't have to worry about any python app going down. But the compile step is very slow, especially when running in dev mode (npm run start) because it recompiles everything on change. Tailwind has a Just-in-time compile mode we should look into to make building fast.
• [ ] Also maybe refactor the files? render_html.py is getting kind of chunky.
• [ ] The way the website restarts right now on the server might not be the best way to do things. Right now, a cron jon runs gradio/website/reload_website.sh every minute. Maybe take a look if there's a better way to do this.

Other:

• [ ] Is there any uptime bot checking http://gradio.app? I think @dawoodkhan82 might know more about this.
• [ ] Make a pass through the website and check everything works in both mobile and desktop.

[aliabid94]

• Also I don't know where we're at with lighthouse/pagespeed tests since the website was rewritten

[abidlabs]

The example images don't load because of CORS - we may need to ask HF spaces to enable CORS for examples (e.g. https://huggingface.co/gradioiframe/abidlabs/Echocardiogram-Segmentation/+/file/img2.jpg). But first check if it's not a gradio problem (maybe we lost CORS support during the fastapi migration, we had explicitly enabled it with flask)

There's no CORS issue. I just ran the following code in a browser (or even an HTML renderer) and everything ran fine. I'm pretty sure there's some issue happening on the www.gradio.app website. Note that the example images are loading fine, it's just that you can't click on them to select them.

<iframe src="https://hf.space/gradioiframe/abidlabs/Echocardiogram-Segmentation/+" width=800 height=400></iframe>

[abidlabs]

The custom css leaking out of the embedding on the audio example in the main page is a hard (maybe impossible) fix - can you just fork that space and have the custom css target only things inside the output component.

Fixed. It was my own Space so I just removed the conflicting CSS.

Allow a {{ spaces["user/repo"] }} tag just like we have {{ demo["folder"] }} tag for embedding spaces instead of directly using iframes

What about simple things like changing the width and height of the iframe? We might be complicating things unnecessarily...

[abidlabs]

This is an important issue that covers a lot of things, and I don't want to lose it, especially as you work on the website next week @aliabd.

So I converted @aliabid94's original post into a checklist. Let's knock out everything else on this list.

Alsco cc @dawoodkhan82 for the penultimate point

[omerXfaruq]

What is the latest situation of this issue @dawoodkhan82?