Repository: gradio-app/gradio
Pull request: PDF component custom component guide
## Description

Closes #2031

We should have a series of step-by-step guides for creating custom components.
Rendering a PDF in js is actually tricky. So we should have easier guides too and order them by difficulty.

## 🎯 PRs Should Target Issues

Before your create a PR, please check to see if there is [an existing issue](https://github.com/gradio-app/gradio/issues) for this change. If not, please create an issue before you create this PR, unless the fix is very small. 

Not adhering to this guideline will result in the PR being closed. 

## Tests

1. PRs will only be merged if tests pass on CI. To run the tests locally, please set up [your Gradio environment locally](https://github.com/gradio-app/gradio/blob/main/CONTRIBUTING.md) and run the tests: `bash scripts/run_all_tests.sh`

2. You may need to run the linters: `bash scripts/format_backend.sh` and `bash scripts/format_frontend.sh`
  


Problem statement:
PDF display in a block 
- I have searched to see if a similar issue already exists but I can't find any solution.
- I am working on a dashboard to demo a model that classifies articles and output tags, and I need the users to correct the results/output of the model. 


**Solution**  
I would like to have a feature that allows the display of a pdf file on the dashboard.

Hints from issue discussion:
Thanks @BouzidiImen for the suggestion. Agree that this would be a useful component!
https://github.com/vinodnimbalkar/svelte-pdf could be a good candidate for integration
Any thoughts on this @abidlabs ?
Hi! We've now made it possible for Gradio users to create their own custom components -- meaning that you can write some Python and JavaScript (Svelte), and publish it as a Gradio component. You can use it in your own Gradio apps, or share it so that anyone can use it in their Gradio apps. Here are some examples of custom Gradio components:

* A "Rich Textbox" that [allows you to write bold/italics/colored text](https://huggingface.co/spaces/abidlabs/gradio_rich_textbox)
* A "Folium Map Viewer" component that [allows you to use interactive maps](https://huggingface.co/spaces/freddyaboulton/gradio_folium)

You can see the source code for those components by clicking the "Files" icon and then clicking "src". The complete source code for the backend and frontend is visible. **In particular, its very fast if you want to build off an existing component**. We've put together a Guide: https://www.gradio.app/guides/five-minute-guide, and we're happy to help if you'd like to put together a custom component for this issue

Commit message: format

Patch to review:
diff --git a/.changeset/dirty-wasps-divide.md b/.changeset/dirty-wasps-divide.md
new file mode 100644
index 0000000000..a27b8528ed
--- /dev/null
+++ b/.changeset/dirty-wasps-divide.md
@@ -0,0 +1,5 @@
+---
+"website": minor
+---
+
+feat:PDF component custom component guide
diff --git a/guides/05_custom-components/07_pdf-component-example.md b/guides/05_custom-components/07_pdf-component-example.md
new file mode 100644
index 0000000000..7b5c098749
--- /dev/null
+++ b/guides/05_custom-components/07_pdf-component-example.md
@@ -0,0 +1,672 @@
+# Case Study: A Component to Display PDFs
+
+Let's work through an example of building a custom gradio component for displaying PDF files.
+This component will come in handy for showcasing [document question answering](https://huggingface.co/models?pipeline_tag=document-question-answering&sort=trending) models, which typically work on PDF input.
+
+## Step 0: Prerequisites
+Make sure you have gradio 4.0 installed.
+As of the time of publication, the latest release is 4.1.1.
+Also, please read the [Five Minute Tour](./five-minute-guide) of custom components and the [Key Concepts](./key-component-concepts) guide before starting.
+
+
+## Step 1: Creating the custom component
+
+Navigate to a directory of your choosing and run the following command:
+
+```bash
+gradio cc create MyPDF
+```
+
+This will create a subdirectory called `mypdf` in your current working directory.
+There are three main subdirectories in `mypdf`: `frontend`, `backend`, and `demo`.
+If you open `mypdf` in your code editor, it will look like this:
+
+![directory structure](https://gradio-builds.s3.amazonaws.com/assets/pdf-guide/CodeStructure.png)
+
+Tip: For this demo we are not templating off a current gradio component. But you can see the list of available templates with `gradio cc show` and then pass the template name to the `--template` option, e.g. `gradio cc create <Name> --template <foo>`
+
+## Step 2: Frontend - modify package.json
+
+We're going to use the [pdfjs](https://mozilla.github.io/pdf.js/) javascript library to display the pdfs in the frontend. 
+Let's start off by adding it to our frontend project's dependencies, as well as adding a couple of other projects we'll need.
+
+In the `dependencies` key, remove `svelte-json-view` and add the following dependencies: `@gradio/client`, `@gradio/upload`, `@gradio/icons`, `@gradio/button`, and `pdfjs-dist`.
+Also make sure you add `pdfjs-dist` in `devDependencies`.
+
+The complete `package.json` should look like this:
+
+```json
+{
+  "name": "gradio_mypdf",
+  "version": "0.2.0",
+  "description": "Gradio component for displaying PDFs",
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "private": false,
+  "main_changeset": true,
+  "exports": {
+    ".": "./Index.svelte",
+    "./example": "./Example.svelte",
+    "./package.json": "./package.json"
+  },
+  "devDependencies": {
+    "pdfjs-dist": "3.11.174"
+  },
+  "dependencies": {
+    "@gradio/atoms": "0.2.0",
+    "@gradio/statustracker": "0.3.0",
+    "@gradio/utils": "0.2.0",
+    "@gradio/client": "0.7.1",
+    "@gradio/upload": "0.3.2",
+    "@gradio/icons": "0.2.0",
+    "@gradio/button": "0.2.3",
+    "pdfjs-dist": "3.11.174"
+  }
+}
+```
+
+
+Tip: I'm using the latest version of the `@gradio/` packages as of the time of writing. You can find the latest version by going to the gradio javascript package documentation [here](https://www.gradio.app/main/docs/js). Its recommended you use the same versions as me as the API can change.
+
+Whenever you modify the dependencies for either your frontend or backend projects, run the install command:
+
+```bash
+gradio cc install
+```
+
+Navigate to `Index.svelte` and delete mentions of `JSONView`
+
+```ts
+import { JsonView } from "@zerodevx/svelte-json-view";
+```
+
+```ts
+<JsonView json={value} />
+```
+
+## Step 3: Frontend - Launching the Dev Server
+
+Run the `dev` command to launch the development server.
+This will open the demo in `demo/app.py` in an environment where changes to the `frontend` and `backend` directories will reflect instantaneously in the launched app.
+
+After launching the dev server, you should see a link printed to your console that says `Frontend Server (Go here): ... `.
+ 
+![](https://gradio-builds.s3.amazonaws.com/assets/pdf-guide/dev_server_terminal.png)
+
+You should see the following:
+
+![](https://gradio-builds.s3.amazonaws.com/assets/pdf-guide/frontend_start.png)
+
+
+
+Its not impressive yet but we're ready to start coding!
+
+## Step 4: Frontend - The basic skeleton
+
+We're going to start off by first writing the skeleton of our frontend and then adding the pdf rendering logic.
+Add the following imports and expose the following properties to the top of your file in the `<script>` tag.
+You may get some warnings from your code editor that some props are not used.
+That's ok.
+
+```ts
+    import { tick } from "svelte";
+    import type { Gradio } from "@gradio/utils";
+    import { Block, BlockLabel } from "@gradio/atoms";
+    import { File } from "@gradio/icons";
+    import { StatusTracker } from "@gradio/statustracker";
+    import type { LoadingStatus } from "@gradio/statustracker";
+    import type { FileData } from "@gradio/client";
+    import { normalise_file } from "@gradio/client";
+    import { Upload, ModifyUpload } from "@gradio/upload";
+
+	export let elem_id = "";
+	export let elem_classes: string[] = [];
+	export let visible = true;
+	export let value: FileData | null = null;
+	export let container = true;
+	export let scale: number | null = null;
+	export let root: string;
+	export let height: number | null = 500;
+	export let label: string;
+	export let proxy_url: string;
+	export let min_width: number | undefined = undefined;
+	export let loading_status: LoadingStatus;
+	export let gradio: Gradio<{
+		change: never;
+		upload: never;
+	}>;
+
+    let _value = value;
+    let old_value = _value;
+```
+
+
+Tip: We want our frontend to dispatch `change` and `upload` events when the underlying PDF changes or is updated. That's what this line means: `Gradio<{change: never; upload: never;}>;`
+
+We want our frontend component to let users upload a PDF document if there isn't one already loaded.
+If it is loaded, we want to display it underneath a "clear" button that lets our users upload a new document. 
+We're going to use the `Upload` and `ModifyUpload` components that come with the `@gradio/upload` package to do this.
+Underneath the `</script>` tag, delete all the current code and add the following:
+
+```ts
+<Block {visible} {elem_id} {elem_classes} {container} {scale} {min_width}>
+    {#if loading_status}
+        <StatusTracker
+            autoscroll={gradio.autoscroll}
+            i18n={gradio.i18n}
+            {...loading_status}
+        />
+    {/if}
+    <BlockLabel
+        show_label={label !== null}
+        Icon={File}
+        float={value === null}
+        label={label || "File"}
+    />
+    {#if _value}
+        <ModifyUpload i18n={gradio.i18n} absolute />
+    {:else}
+        <Upload
+            filetype={"application/pdf"}
+            file_count="single"
+            {root}
+        >
+            Upload your PDF
+        </Upload>
+    {/if}
+</Block>
+```
+
+You should see the following when you navigate to your app after saving your current changes:
+
+![](https://gradio-builds.s3.amazonaws.com/assets/pdf-guide/frontend_1.png)
+
+## Step 5: Frontend - Nicer Upload Text
+
+The `Upload your PDF` text looks a bit small and barebones. 
+Lets customize it!
+
+Create a new file called `PdfUploadText.svelte` and copy the following code.
+Its creating a new div to display our "upload text" with some custom styling.
+
+Tip: Notice that we're leveraging Gradio core's existing css variables here: `var(--size-60)` and `var(--body-text-color-subdued)`
+
+
+```ts
+<script lang="ts">
+	import { Upload as UploadIcon } from "@gradio/icons";
+	export let hovered = false;
+
+</script>
+
+<div class="wrap">
+	<span class="icon-wrap" class:hovered><UploadIcon /> </span>
+    Drop PDF
+    <span class="or">- or -</span>
+    Click to Upload
+</div>
+
+<style>
+	.wrap {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		min-height: var(--size-60);
+		color: var(--block-label-text-color);
+		line-height: var(--line-md);
+		height: 100%;
+		padding-top: var(--size-3);
+	}
+
+	.or {
+		color: var(--body-text-color-subdued);
+		display: flex;
+	}
+
+	.icon-wrap {
+		width: 30px;
+		margin-bottom: var(--spacing-lg);
+	}
+
+	@media (--screen-md) {
+		.wrap {
+			font-size: var(--text-lg);
+		}
+	}
+
+	.hovered {
+		color: var(--color-accent);
+	}
+</style>
+```
+
+Now import `PdfUploadText.svelte` in your `<script>` and pass it to the `Upload` component!
+
+```ts
+	import PdfUploadText from "./PdfUploadText.svelte";
+
+...
+
+    <Upload
+        filetype={"application/pdf"}
+        file_count="single"
+        {root}
+    >
+        <PdfUploadText />
+    </Upload>
+```
+
+After saving your code, the frontend should now look like this:
+
+![](https://gradio-builds.s3.amazonaws.com/assets/pdf-guide/better_upload.png)
+
+## Step 6: PDF Rendering logic
+
+This is the most advanced javascript part.
+It took me a while to figure it out!
+Do not worry if you have trouble, the important thing is to not be discouraged 💪
+Ask for help in the gradio [discord](https://discord.gg/hugging-face-879548962464493619) if you need and ask for help.
+
+With that out of the way, let's start off by importing `pdfjs` and loading the code of the pdf worker from the mozilla cdn.
+
+```ts
+	import pdfjsLib from "pdfjs-dist";
+    ...
+    pdfjsLib.GlobalWorkerOptions.workerSrc =  "https://cdn.bootcss.com/pdf.js/3.11.174/pdf.worker.js";
+```
+
+Also create the following variables:
+
+```ts
+    let pdfDoc;
+    let numPages = 1;
+    let currentPage = 1;
+    let canvasRef;
+```
+
+Now, we will use `pdfjs` to render a given page of the PDF onto an `html` document.
+Add the following code to `Index.svelte`:
+
+```ts
+    async function get_doc(value: FileData) {
+        const loadingTask = pdfjsLib.getDocument(value.url);
+        pdfDoc = await loadingTask.promise;
+        numPages = pdfDoc.numPages;
+        render_page();
+    }
+
+    function render_page() {
+    // Render a specific page of the PDF onto the canvas
+        pdfDoc.getPage(currentPage).then(page => {
+            const ctx  = canvasRef.getContext('2d')
+            ctx.clearRect(0, 0, canvasRef.width, canvasRef.height);
+            let viewport = page.getViewport({ scale: 1 });
+            let scale = height / viewport.height;
+            viewport = page.getViewport({ scale: scale });
+
+            const renderContext = {
+                canvasContext: ctx,
+                viewport,
+            };
+            canvasRef.width = viewport.width;
+            canvasRef.height = viewport.height;
+            page.render(renderContext);
+        });
+    }
+
+    // Compute the url to fetch the file from the backend
+    // whenever a new value is passed in.
+    $: _value = normalise_file(value, root, proxy_url);
+
+    // If the value changes, render the PDF of the currentPage
+    $: if(JSON.stringify(old_value) != JSON.stringify(_value)) {
+        if (_value){
+            get_doc(_value);
+        }
+        old_value = _value;
+        gradio.dispatch("change");
+    }
+```
+
+
+Tip: The `$:` syntax in svelte is how you declare statements to be reactive. Whenever any of the inputs of the statement change, svelte will automatically re-run that statement.
+
+Now place the `canvas` underneath the `ModifyUpload` component:
+
+```ts
+<div class="pdf-canvas" style="height: {height}px">
+    <canvas bind:this={canvasRef}></canvas>
+</div>
+```
+
+And add the following styles to the `<style>` tag:
+
+```ts
+<style>
+    .pdf-canvas {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+</style>
+```
+
+## Step 7: Handling The File Upload And Clear
+
+Now for the fun part - actually rendering the PDF when the file is uploaded!
+Add the following functions to the `<script>` tag:
+
+```ts
+    async function handle_clear() {
+        _value = null;
+        await tick();
+        gradio.dispatch("change");
+    }
+
+    async function handle_upload({detail}: CustomEvent<FileData>): Promise<void> {
+        value = detail;
+        await tick();
+        gradio.dispatch("change");
+        gradio.dispatch("upload");
+    }
+```
+
+Now we will run them whenever the `Upload` component uploads a file and whenever the `ModifyUpload` component clears the current file.
+
+```ts
+    <ModifyUpload i18n={gradio.i18n} on:clear={handle_clear} absolute />
+    
+    ...
+    
+    <Upload
+        on:load={handle_upload}
+        filetype={"application/pdf"}
+        file_count="single"
+        {root}
+    >
+        <PdfUploadText/>
+    </Upload>
+```
+
+Congratulations! You have a working pdf uploader!
+
+![upload-gif](https://gradio-builds.s3.amazonaws.com/assets/pdf-guide/pdf_component_gif_docs.gif)
+
+## Step 8: Adding buttons to navigate pages
+
+If a user uploads a PDF document with multiple pages, they will only be able to see the first one.
+Let's add some buttons to help them navigate the page.
+We will use the `BaseButton` from `@gradio/button` so that they look like regular Gradio buttons.
+
+Import the `BaseButton` and add the following functions that will render the next and previous page of the PDF.
+
+```ts
+    import { BaseButton } from "@gradio/button";
+
+    ...
+
+    function next_page() {
+        if (currentPage >= numPages) {
+            return;
+        }
+        currentPage++;
+        render_page();
+    }
+
+    function prev_page() {
+        if (currentPage == 1) {
+            return;
+        }
+        currentPage--;
+        render_page();
+    }
+```
+
+Now we will add them underneath the canvas in a separate `<div>`
+
+```ts
+    ...
+
+    <ModifyUpload i18n={gradio.i18n} on:clear={handle_clear} absolute />
+    <div class="pdf-canvas" style="height: {height}px">
+        <canvas bind:this={canvasRef}></canvas>
+    </div>
+    <div class="button-row">
+        <BaseButton on:click={prev_page}>
+            ⬅️
+        </BaseButton>
+        <span class="page-count"> {currentPage} / {numPages} </span>
+        <BaseButton on:click={next_page}>
+            ➡️
+        </BaseButton>
+    </div>
+    
+    ...
+
+<style>
+    .button-row {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .page-count {
+        margin: 0 10px;
+        font-family: var(--font-mono);
+    }
+```
+
+Congratulations! The frontend is almost complete 🎉
+
+![multipage-pdf-gif](https://gradio-builds.s3.amazonaws.com/assets/pdf-guide/pdf_multipage.gif)
+
+## Step 8.5: The Example view
+
+We're going to want users of our component to get a preview of the PDF if its used as an `example` in a `gr.Interface` or `gr.Examples`.
+
+To do so, we're going to add some of the pdf rendering logic in `Index.svelte` to `Example.svelte`.
+
+
+```ts
+<script lang="ts">
+	export let value: string;
+	export let samples_dir: string;
+	export let type: "gallery" | "table";
+	export let selected = false;
+	import pdfjsLib from "pdfjs-dist";
+	pdfjsLib.GlobalWorkerOptions.workerSrc =  "https://cdn.bootcss.com/pdf.js/3.11.174/pdf.worker.js";
+	
+	let pdfDoc;
+	let canvasRef;
+
+	async function get_doc(url: string) {
+		const loadingTask = pdfjsLib.getDocument(url);
+		pdfDoc = await loadingTask.promise;
+		renderPage();
+		}
+
+	function renderPage() {
+		// Render a specific page of the PDF onto the canvas
+			pdfDoc.getPage(1).then(page => {
+				const ctx  = canvasRef.getContext('2d')
+				ctx.clearRect(0, 0, canvasRef.width, canvasRef.height);
+				
+				const viewport = page.getViewport({ scale: 0.2 });
+				
+				const renderContext = {
+					canvasContext: ctx,
+					viewport
+				};
+				canvasRef.width = viewport.width;
+				canvasRef.height = viewport.height;
+				page.render(renderContext);
+			});
+		}
+	
+	$: get_doc(samples_dir + value);
+</script>
+
+<div
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+	style="justify-content: center; align-items: center; display: flex; flex-direction: column;"
+>
+	<canvas bind:this={canvasRef}></canvas>
+</div>
+
+<style>
+	.gallery {
+		padding: var(--size-1) var(--size-2);
+	}
+</style>
+```
+
+
+Tip: Exercise for the reader - reduce the code duplication between `Index.svelte` and `Example.svelte` 😊
+
+
+You will not be able to render examples until we make some changes to the backend code in the next step!
+
+## Step 9: The backend
+
+The backend changes needed are smaller.
+We're almost done!
+
+What we're going to do is:
+* Add `change` and `upload` events to our component.
+* Add a `height` property to let users control the height of the PDF.
+* Set the `data_model` of our component to be `FileData`. This is so that Gradio can automatically cache and safely serve any files that are processed by our component.
+* Modify the `preprocess` method to return a string corresponding to the path of our uploaded PDF.
+* Modify the `postprocess` to turn a path to a PDF created in an event handler to a `FileData`.
+
+When all is said an done, your component's backend code should look like this:
+
+```python
+from __future__ import annotations
+from typing import Any, Callable
+
+from gradio.components.base import Component
+from gradio.data_classes import FileData
+from gradio import processing_utils
+
+class PDF(Component):
+
+    EVENTS = ["change", "upload"]
+
+    data_model = FileData
+
+    def __init__(self, value: Any = None, *,
+                 height: int | None = None,
+                 label: str | None = None, info: str | None = None,
+                 show_label: bool | None = None,
+                 container: bool = True,
+                 scale: int | None = None,
+                 min_width: int | None = None,
+                 interactive: bool | None = None,
+                 visible: bool = True,
+                 elem_id: str | None = None,
+                 elem_classes: list[str] | str | None = None,
+                 render: bool = True,
+                 load_fn: Callable[..., Any] | None = None,
+                 every: float | None = None):
+        super().__init__(value, label=label, info=info,
+                         show_label=show_label, container=container,
+                         scale=scale, min_width=min_width,
+                         interactive=interactive, visible=visible,
+                         elem_id=elem_id, elem_classes=elem_classes,
+                         render=render, load_fn=load_fn, every=every)
+        self.height = height
+
+    def preprocess(self, payload: FileData) -> str:
+        return payload.path
+
+    def postprocess(self, value: str | None) -> FileData:
+        if not value:
+            return None
+        return FileData(path=value)
+
+    def example_inputs(self):
+        return "https://gradio-builds.s3.amazonaws.com/assets/pdf-guide/fw9.pdf"
+
+    def as_example(self, input_data: str | None) -> str | None:
+        if input_data is None:
+            return None
+        return processing_utils.move_resource_to_block_cache(input_data, self)
+```
+
+## Step 10: Add a demo and publish!
+
+To test our backend code, let's add a more complex demo that performs Document Question and Answering with huggingface transformers.
+
+In our `demo` directory, create a `requirements.txt` file with the following packages
+
+```
+torch
+transformers
+pdf2image
+pytesseract
+```
+
+
+Tip: Remember to install these yourself and restart the dev server! You may need to install extra non-python dependencies for `pdf2image`. See [here](https://pypi.org/project/pdf2image/). Feel free to write your own demo if you have trouble.
+
+
+```python
+import gradio as gr
+from gradio_pdf import PDF
+from pdf2image import convert_from_path
+from transformers import pipeline
+from pathlib import Path
+
+dir_ = Path(__file__).parent
+
+p = pipeline(
+    "document-question-answering",
+    model="impira/layoutlm-document-qa",
+)
+
+def qa(question: str, doc: str) -> str:
+    img = convert_from_path(doc)[0]
+    output = p(img, question)
+    return sorted(output, key=lambda x: x["score"], reverse=True)[0]['answer']
+
+
+demo = gr.Interface(
+    qa,
+    [gr.Textbox(label="Question"), PDF(label="Document")],
+    gr.Textbox(),
+)
+
+demo.launch()
+```
+
+See our demo in action below!
+
+<video autoplay muted loop>
+  <source src="https://gradio-builds.s3.amazonaws.com/assets/pdf-guide/PDFDemo.mov" type="video/mp4" />
+</video>
+
+Finally lets build our component with `gradio cc build` and publish it with the `gradio cc publish` command!
+This will guide you through the process of uploading your component to [PyPi](https://pypi.org/) and [HuggingFace Spaces](https://huggingface.co/spaces).
+
+
+Tip: You may need to add the following lines to the `Dockerfile` of your HuggingFace Space.
+
+```Dockerfile
+RUN mkdir -p /tmp/cache/
+RUN chmod a+rwx -R /tmp/cache/
+RUN apt-get update && apt-get install -y poppler-utils tesseract-ocr
+
+ENV TRANSFORMERS_CACHE=/tmp/cache/
+```
+
+## Conclusion
+
+I hope you enjoyed this tutorial!
+The complete source code for our component is [here](https://huggingface.co/spaces/freddyaboulton/gradio_pdf/tree/main/src).
+Please don't hesitate to reach out to the gradio community on the [HuggingFace Discord](https://discord.gg/hugging-face-879548962464493619) if you get stuck.
\ No newline at end of file
diff --git a/js/_website/src/routes/[[version]]/guides/+page.svelte b/js/_website/src/routes/[[version]]/guides/+page.svelte
index 6b9ea9ded1..0a877a4df2 100644
--- a/js/_website/src/routes/[[version]]/guides/+page.svelte
+++ b/js/_website/src/routes/[[version]]/guides/+page.svelte
@@ -62,89 +62,42 @@
 		<DropDown />
 	</div>
 
-	<!-- CUSTOM COMPONENTS HIGHLIGHT -->
-	<div class="category mb-8 p-4 border-orange-300 border rounded-xl">
-		<h2 class="mb-4 text-2xl font-thin block">
-			<svg
-				class="inline align-baseline"
-				xmlns="http://www.w3.org/2000/svg"
-				xmlns:xlink="http://www.w3.org/1999/xlink"
-				version="1.1"
-				width="18"
-				height="18"
-				viewBox="0 0 256 256"
-				xml:space="preserve"
-			>
-				<defs> </defs>
-				<g
-					style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;"
-					transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)"
-				>
-					<path
-						d="M 89.011 87.739 c -0.599 -1.371 -1.294 -2.652 -1.968 -3.891 l -0.186 -0.343 l -15.853 -15.91 c -0.371 -0.375 -0.746 -0.748 -1.12 -1.12 c -0.671 -0.667 -1.342 -1.335 -1.997 -2.018 l -1.459 -1.437 l 23.316 -23.317 l -1.704 -1.704 c -9.111 -9.112 -22.925 -12.518 -35.353 -8.759 l -6.36 -6.359 c 0.769 -7.805 -2.017 -15.69 -7.503 -21.175 L 37.123 0 L 0 37.122 l 1.706 1.704 c 5.487 5.487 13.368 8.271 21.176 7.503 l 6.36 6.36 C 25.484 65.115 28.889 78.93 38 88.041 l 1.703 1.704 l 23.316 -23.316 l 1.438 1.458 c 0.679 0.653 1.344 1.321 2.009 1.989 c 0.373 0.374 0.745 0.748 1.117 1.116 l 15.699 15.7 l 0.566 0.352 c 1.239 0.673 2.52 1.369 3.891 1.968 L 90 90 L 89.011 87.739 z"
-						style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255 124 1); fill-rule: nonzero; opacity: 1;"
-						transform=" matrix(1 0 0 1 0 0) "
-						stroke-linecap="round"
-					/>
-				</g>
-			</svg>
-
-			Custom Components<sup class="text-orange-500">NEW</sup>
-		</h2>
-		<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
-			{#each ["Five Minute Guide", "Key Component Concepts", "Configuration", "Backend", "Frontend", "Frequently Asked Questions"] as guide}
-				<a
-					class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow bg-gradient-to-r {data
-						.COLOR_SETS[3][0]} {data.COLOR_SETS[3][1]}"
-					href="./guides/{guide.toLowerCase().replace(/ /g, '-')}"
-				>
-					<div class="flex flex-col p-4 h-min">
-						<h2 class="group-hover:underline text-lg">{guide}</h2>
-						<div class="tags-holder"></div>
-					</div>
-				</a>
-			{/each}
-		</div>
-	</div>
-
 	{#each data.guides_by_category as { category, guides }, i (category)}
-		{#if !(category == "Custom Components")}
-			<div class="category mb-8 p-4">
-				<h2
-					class:hidden={guides.filter(isNotHidden).length === 0}
-					class="mb-4 text-2xl font-thin block"
-				>
-					{category}
-				</h2>
-				<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
-					{#each guides as guide (guide.name)}
-						<a
-							class:hidden={guide.hidden}
-							class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow bg-gradient-to-r {data
-								.COLOR_SETS[i][0]} {data.COLOR_SETS[i][1]}"
-							href=".{guide.url}"
-						>
-							<div class="flex flex-col p-4 h-min">
-								<h2 class="group-hover:underline text-lg">
-									{guide.pretty_name}
-								</h2>
-								<div class="tags-holder">
-									{#if guide.tags}
-										<p class="text-gray-600">
-											<!--
+		<div class="category mb-8 p-4">
+			<h2
+				class:hidden={guides.filter(isNotHidden).length === 0}
+				class="mb-4 text-2xl font-thin block"
+			>
+				{category}
+			</h2>
+			<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+				{#each guides as guide (guide.name)}
+					<a
+						class:hidden={guide.hidden}
+						class="guide-box flex lg:col-span-1 flex-col group overflow-hidden relative rounded-xl shadow-sm hover:shadow-alternate transition-shadow bg-gradient-to-r {data
+							.COLOR_SETS[i][0]} {data.COLOR_SETS[i][1]}"
+						href=".{guide.url}"
+					>
+						<div class="flex flex-col p-4 h-min">
+							<h2 class="group-hover:underline text-lg">
+								{guide.pretty_name}
+							</h2>
+							<div class="tags-holder">
+								{#if guide.tags}
+									<p class="text-gray-600">
+										<!--
                     -->{#each guide.tags as tag, j (tag)}<!--
                     -->{tag}{#if j !== guide.tags.length - 1},&nbsp;{/if}<!--
                     -->{/each}<!--
                 -->
-										</p>
-									{/if}
-								</div>
+									</p>
+								{/if}
 							</div>
-						</a>
-					{/each}
-				</div>
+						</div>
+					</a>
+				{/each}
 			</div>
-		{/if}
+		</div>
 	{/each}
 
 	<div


Code review comments:
diff_hunk: @@ -0,0 +1,672 @@
+# Case Study: A Component to Display PDFs
+
+Let's work through an example of building a custom gradio component for displaying PDF files.
+This component will come in handy for showcasing [document question answering](https://huggingface.co/models?pipeline_tag=document-question-answering&sort=trending) models, which typically work on PDF input.
+
+## Step 0: Prerequisites
+Make sure you have gradio 4.0 installed.
+As of the time of publication, the latest release is 4.1.1.
+Also, please read the [Five Minute Tour](./five-minute-guide) of custom components and the [Key Concepts](./key-component-concepts) guide before starting.
+
+
+## Step 1: Creating the custom component
+
+Navigate to a directory of your choosing and run the following command:
+
+```bash
+gradio cc create MyPDF
path: guides/05_custom-components/07_pdf-component-example.md
text: @user1:
Nit: Would `PDFViewer` be a better name for a component?
```suggestion
gradio cc create PDFViewer
```

@author:
I just called it `PDF` which is what I originally used so that the screenshots are accurate and made a note about that.