Many small fixes to website and docs (#8537)

* change banner * replace Sequence with list * fix capitilization issues in nav * fix demo for gr.Examples * show respective install from main commands for clients * only upload versioned demos on a new version release * formatting * add changeset * add changeset --------- Co-authored-by: gradio-pr-bot <[email protected]>
gradio-app · Jun 12, 2024 · 81ae766 · 81ae766
1 parent c2a0d05
commit 81ae766
Show file tree

Hide file tree

Showing 15 changed files with 61 additions and 32 deletions.
diff --git a/.changeset/true-places-post.md b/.changeset/true-places-post.md
@@ -0,0 +1,6 @@
+---
+"gradio": patch
+"website": patch
+---
+
+fix:Many small fixes to website and docs
diff --git a/gradio/helpers.py b/gradio/helpers.py
@@ -83,7 +83,7 @@ class Examples:
     assigns event listener so that clicking on an example populates the input/output
     components. Optionally handles example caching for fast inference.
 
-    Demos: fake_gan
+    Demos: calculator_blocks
     Guides: more-on-examples-and-flagging, using-hugging-face-integrations, image-classification-in-pytorch, image-classification-in-tensorflow, image-classification-with-vision-transformers, create-your-own-friends-with-a-gan
     """
 

diff --git a/js/_website/generate_jsons/generate.py b/js/_website/generate_jsons/generate.py
@@ -9,6 +9,7 @@
 
 WEBSITE_DIR = os.path.abspath(os.path.join(os.path.dirname(__file__), ".."))
 GRADIO_DIR = os.path.abspath(os.path.join(WEBSITE_DIR, "..", "..", "gradio"))
+ROOT_DIR = os.path.abspath(os.path.join(WEBSITE_DIR, "..", ".."))
 
 def make_dir(root, path):
     return os.path.abspath(os.path.join(root, path))
@@ -26,6 +27,8 @@ def download_from_s3(bucket_name, s3_folder, local_dir):
 
 
 def get_latest_release():
+    with open(make_dir(ROOT_DIR, "client/js/package.json")) as f:
+        js_client_version = json.load(f)["version"]
     with open(make_dir(GRADIO_DIR, "package.json")) as f:
         version = json.load(f)["version"]
         with open(make_dir(WEBSITE_DIR, "src/lib/json/version.json"), "w+") as j:
@@ -35,7 +38,9 @@ def get_latest_release():
         with open(make_dir(WEBSITE_DIR, "src/lib/json/wheel.json"), "w+") as j:
             sha = run(["git", "log", "-1", "--format='%H'"], capture_output=True).stdout.decode("utf-8").strip("'\n")
             json.dump({
-                        "wheel": f"https://gradio-builds.s3.amazonaws.com/{sha}/gradio-{version}-py3-none-any.whl"
+                        "gradio_install": f"pip install https://gradio-builds.s3.amazonaws.com/{sha}/gradio-{version}-py3-none-any.whl",
+                        "gradio_py_client_install": f"pip install 'gradio-client @ git+https://github.com/gradio-app/gradio@{sha}#subdirectory=client/python'",
+                        "gradio_js_client_install": f"npm install https://gradio-builds.s3.amazonaws.com/{sha}/gradio-client-{js_client_version}.tgz",
                         }, j)
         if not os.path.exists(make_dir(WEBSITE_DIR, f"src/lib/templates_{version.replace('.', '-')}")):
             download_from_s3("gradio-docs-json", f"{version}/templates/", make_dir(WEBSITE_DIR, f"src/lib/templates_{version.replace('.', '-')}"))

diff --git a/js/_website/generate_jsons/src/docs/__init__.py b/js/_website/generate_jsons/src/docs/__init__.py
@@ -183,6 +183,12 @@ def format_name(page_name):
         if page_name.lower().endswith(".svx"):
             page_name = page_name[:-4]
         pretty_page_name = " ".join([word[0].upper() + word[1:] for word in page_name.split("-")])
+        for library in organized:
+            for category in organized[library]:
+                if page_name in organized[library][category]:
+                    return index, page_name, organized[library][category][page_name]["name"], page_path
+        if page_name == "chatinterface": 
+            pretty_page_name =  "ChatInterface"              
         return index, page_name, pretty_page_name, page_path
 
 

diff --git a/js/_website/src/lib/components/DocsNav.svelte b/js/_website/src/lib/components/DocsNav.svelte
@@ -3,9 +3,7 @@
 	import { clickOutside } from "./clickOutside.js";
 
 	export let library_pages: any;
-
 	export let current_nav_link = "";
-	let docs_type = "python";
 
 	let show_nav = false;
 	let searchTerm = "";

diff --git a/js/_website/src/lib/components/EventListeners.svelte b/js/_website/src/lib/components/EventListeners.svelte
@@ -82,7 +82,10 @@
 							<code class="block">
 								{param["name"]}
 							</code>
-							<p class="text-gray-500 italic">{param["annotation"]}</p>
+							<p class="text-gray-500 italic">
+								{param["annotation"].replace("Sequence[", "list[")}
+							</p>
+
 							{#if "default" in param}
 								<p class="text-gray-500 font-semibold">
 									default: {param["default"]}

diff --git a/js/_website/src/lib/components/FunctionDoc.svelte b/js/_website/src/lib/components/FunctionDoc.svelte
@@ -107,7 +107,9 @@
 								<code class="block">
 									{param["name"]}
 								</code>
-								<p class="text-gray-500 italic">{param["annotation"]}</p>
+								<p class="text-gray-500 italic">
+									{param["annotation"].replace("Sequence[", "list[")}
+								</p>
 								{#if "default" in param}
 									<p class="text-gray-500 font-semibold">
 										default: {param["default"]}

diff --git a/js/_website/src/lib/components/Header.svelte b/js/_website/src/lib/components/Header.svelte
@@ -12,26 +12,22 @@
 <!-- 4.0 Launch BANNER  -->
 <div class="main-header flex-row">
 	<div
-		class="relative isolate flex items-center gap-x-6 overflow-hidden bg-gradient-to-r from-white via-yellow-200 to-white px-6 py-2 sm:px-3.5 sm:before:flex-1"
+		class="relative isolate flex items-center gap-x-6 overflow-hidden bg-gradient-to-r from-white via-yellow-200 to-white px-6 py-2 sm:px-3.5 sm:before:flex-1 mx-auto"
 	>
-		<div class="flex flex-wrap items-center gap-x-4 gap-y-2">
+		<div class="flex flex-wrap items-center gap-x-4 gap-y-2 flex-grow">
 			<div class="flex flex-wrap items-center gap-x-4 gap-y-2 mx-auto">
-				<p class="text-md leading-6 text-gray-700 text-center">
-					<strong class="font-semibold">Introducing Gradio Clients</strong><svg
-						viewBox="0 0 2 2"
-						class="mx-2 inline h-0.5 w-0.5 fill-current"
-						aria-hidden="true"><circle cx="1" cy="1" r="1" /></svg
-					>Join us on Thursday, 9am PST
+				<p class="text-md leading-6 text-gray-700 text-center mx-auto">
+					<strong class="font-semibold">Introducing Gradio Clients</strong>
 				</p>
 				<a
 					href="https://www.youtube.com/watch?v=44vi31hehw4"
 					target="_blank"
 					class="mx-auto flex-none rounded-full px-3.5 py-1 text-sm font-semibold text-white bg-gradient-to-br from-orange-300 via-orange-500 to-orange-300 hover:drop-shadow-md"
-					>Livestream <span aria-hidden="true">&rarr;</span></a
+					>Watch <span aria-hidden="true">&rarr;</span></a
 				>
 			</div>
 		</div>
-		<div class="flex flex-1 justify-end"></div>
+		<div class="hidden justify-end flex-grow sm:flex"></div>
 	</div>
 	<div
 		class="container mx-auto flex flex-wrap justify-between flex-row relative items-center px-4 py-5 gap-6 text-lg z-50"

diff --git a/js/_website/src/lib/components/ParamTable.svelte b/js/_website/src/lib/components/ParamTable.svelte
@@ -22,7 +22,7 @@
 								{param["name"]}
 							</code>
 							<p class="text-gray-500 italic">
-								{param["annotation"]}
+								{param["annotation"].replace("Sequence[", "list[")}
 							</p>
 							{#if "default" in param}
 								<p class="text-gray-500 font-semibold">

diff --git a/js/_website/src/routes/[[version]]/docs/+layout.server.ts b/js/_website/src/routes/[[version]]/docs/+layout.server.ts
@@ -6,7 +6,6 @@ export const prerender = true;
 
 const DOCS_BUCKET = "https://gradio-docs-json.s3.us-west-2.amazonaws.com";
 const VERSION = version.version;
-const WHEEL = wheel.wheel;
 
 async function load_release_docs(
 	version: string
@@ -34,7 +33,6 @@ export async function load({ params, url }) {
 	let js_pages = docs_json.js_pages || [];
 	let js_client = docs_json.js_client;
 	let on_main = params.version === "main";
-	let wheel: string = WHEEL;
 	let pages: any = docs_json.pages;
 
 	let url_version = params?.version || VERSION;

diff --git a/js/_website/src/routes/[[version]]/docs/gradio/[doc]/+page.svelte b/js/_website/src/routes/[[version]]/docs/gradio/[doc]/+page.svelte
@@ -8,7 +8,8 @@
 
 	let name: string = data.name;
 	let on_main: boolean;
-	let wheel: string = data.wheel;
+	let wheel: any = data.wheel;
+	let install_command: string = wheel.gradio_install;
 	let url_version: string = data.url_version;
 
 	let y: number;
@@ -126,7 +127,7 @@
 					</p>
 					<div class="codeblock">
 						<pre class="language-bash" style="padding-right: 50px;"><code
-								class="language-bash">pip install {wheel}</code
+								class="language-bash">{install_command}</code
 							></pre>
 					</div>
 					<p class="float-right text-sm">

diff --git a/js/_website/src/routes/[[version]]/docs/js-client/+page.server.ts b/js/_website/src/routes/[[version]]/docs/js-client/+page.server.ts
@@ -121,6 +121,7 @@ export async function load({ parent }) {
 		helpers,
 		modals,
 		routes,
-		py_client
+		py_client,
+		wheel
 	};
 }
diff --git a/js/_website/src/routes/[[version]]/docs/js-client/+page.svelte b/js/_website/src/routes/[[version]]/docs/js-client/+page.svelte
@@ -10,13 +10,16 @@
 	let modals = data.modals;
 	let routes = data.routes;
 	let py_client = data.py_client;
+	let wheel: any = data.wheel;
+	let install_command: string = wheel.gradio_js_client_install;
 
 	let readme_html = data.readme_html;
 	$: components = data.components;
 	$: helpers = data.helpers;
 	$: modals = data.modals;
 	$: routes = data.routes;
 	$: py_client = data.py_client;
+	$: on_main = data.on_main;
 </script>
 
 <MetaTags
@@ -53,6 +56,18 @@
 					See the <a class="link" href="/changelog">Release History</a>
 				</p>
 			</div>
+			<div
+				class="bg-gray-100 border border-gray-200 text-gray-800 px-3 py-1 mt-4 rounded-lg lg:ml-10"
+			>
+				<p class="my-2">
+					To install the Gradio JS Client from main, run the following command:
+				</p>
+				<div class="codeblock mb-2">
+					<pre class="language-bash" style="padding-right: 50px;"><code
+							class="language-bash">{install_command}</code
+						></pre>
+				</div>
+			</div>
 
 			<div class="lg:ml-10 flex justify-between mt-4"></div>
 			<div class="flex flex-row">

diff --git a/js/_website/src/routes/[[version]]/docs/python-client/[doc]/+page.svelte b/js/_website/src/routes/[[version]]/docs/python-client/[doc]/+page.svelte
@@ -8,7 +8,8 @@
 
 	let name: string = data.name;
 	let on_main: boolean;
-	let wheel: string = data.wheel;
+	let wheel: any = data.wheel;
+	let install_command: string = wheel.gradio_py_client_install;
 	let url_version: string = data.url_version;
 	let module = data.module.default;
 
@@ -142,17 +143,14 @@
 					class="bg-gray-100 border border-gray-200 text-gray-800 px-3 py-1 mt-4 rounded-lg lg:ml-10"
 				>
 					<p class="my-2">
-						To install Gradio from main, run the following command:
+						To install the Gradio Python Client from main, run the following
+						command:
 					</p>
-					<div class="codeblock">
+					<div class="codeblock mb-2">
 						<pre class="language-bash" style="padding-right: 50px;"><code
-								class="language-bash">pip install {wheel}</code
+								class="language-bash">{install_command}</code
 							></pre>
 					</div>
-					<p class="float-right text-sm">
-						*Note: Setting <code style="font-size: 0.85rem">share=True</code> in
-						<code style="font-size: 0.85rem">launch()</code> will not work.
-					</p>
 				</div>
 			{/if}
 

diff --git a/scripts/upload_website_demos.py b/scripts/upload_website_demos.py
@@ -128,6 +128,6 @@ def upload_demo_to_space(
     if args.AUTH_TOKEN is not None:
         hello_world_version = str(huggingface_hub.space_info("gradio/hello_world").cardData["sdk_version"])
         for demo in demos:
-            # if hello_world_version != args.GRADIO_VERSION:
-            upload_demo_to_space(demo_name=demo, space_id="gradio/" + demo, hf_token=args.AUTH_TOKEN, gradio_version=args.GRADIO_VERSION)
+            if hello_world_version != args.GRADIO_VERSION:
+                upload_demo_to_space(demo_name=demo, space_id="gradio/" + demo, hf_token=args.AUTH_TOKEN, gradio_version=args.GRADIO_VERSION)
             upload_demo_to_space(demo_name=demo, space_id="gradio/" + demo + "_main", hf_token=args.AUTH_TOKEN, gradio_version=args.GRADIO_VERSION, gradio_wheel_url=gradio_wheel_url, gradio_client_url=args.CLIENT_URL)