{"id":26150287,"url":"https://github.com/peter-gy/quarto-gradio","last_synced_at":"2025-12-24T07:48:02.241Z","repository":{"id":280261848,"uuid":"939244188","full_name":"peter-gy/quarto-gradio","owner":"peter-gy","description":"Embed Pyodide-powered, entirely serverless Python Gradio apps into Quarto documents.","archived":false,"fork":false,"pushed_at":"2025-03-02T10:32:27.000Z","size":5754,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-02T11:28:00.946Z","etag":null,"topics":["gradio","gradio-lite","pyodide","python","quarto","quarto-extension","reveal-js","web-assembly"],"latest_commit_sha":null,"homepage":"https://quarto-gradio.peter.gy","language":"Lua","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/peter-gy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-26T08:26:12.000Z","updated_at":"2025-03-02T10:32:30.000Z","dependencies_parsed_at":"2025-03-02T11:38:13.843Z","dependency_job_id":null,"html_url":"https://github.com/peter-gy/quarto-gradio","commit_stats":null,"previous_names":["peter-gy/quarto-gradio"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peter-gy%2Fquarto-gradio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peter-gy%2Fquarto-gradio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peter-gy%2Fquarto-gradio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peter-gy%2Fquarto-gradio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/peter-gy","download_url":"https://codeload.github.com/peter-gy/quarto-gradio/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242980730,"owners_count":20216285,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gradio","gradio-lite","pyodide","python","quarto","quarto-extension","reveal-js","web-assembly"],"created_at":"2025-03-11T05:55:07.173Z","updated_at":"2025-12-24T07:48:02.192Z","avatar_url":"https://github.com/peter-gy.png","language":"Lua","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Gradio Lite Extension for Quarto \u003cimg src=\"/web/public/quarto-gradio-logo.png\" align=\"right\" alt=\"Logo: an abstract shape fusing elements of the Quarto logo and the Gradio logo\" width=\"150\"/\u003e\n\n\u003e Enable embedding entirely serverless, browser-based Gradio applications and coding playgrounds in your Quarto documents.\n\n`quarto-gradio` is an extension that embeds [Gradio Lite](https://www.gradio.app/guides/gradio-lite) apps into HTML documents, allowing your Python applications to run directly within your web browser without the need for a server.\n\n- 🌐 100% browser-based, [Pyodide-powered](https://pyodide.org/en/stable/), no Python server required\n- 📓 Supports all Quarto input formats including Jupyter Notebooks\n- ⚡ Supports all HTML-based output formats including [Reveal.js](https://revealjs.com) presentations\n- 📚 Comes with [interactive documentation](https://quarto-gradio.peter.gy)\n\n## Installing\n\n```bash\nquarto add peter-gy/quarto-gradio\n```\n\nThis will install the extension under the `_extensions` subdirectory.\nIf you're using version control, you will want to check in this directory.\n\n## Using\n\nThis extension is implemented as a Quarto filter. Once registered, it works out of the box with Python code blocks and can be customized further via top-level metadata in the document's frontmatter as well as via cell options specified within comments at the top of code blocks.\n\nThis extension was designed to work both with documents written in **Q**uarto **M**ark**d**own and Jupyter Notebooks; therefore, it is possible to iterate on your Gradio app's code in a convenient, traditional server-based Jupyter environment and distribute your notebook as a static, completely serverless web bundle.\n\n\u003e [!TIP]\n\u003e The extension allows advanced configuration via cell options. For example, specifying `#| gr-playground: true` transforms the Gradio Lite interface into an interactive coding playground.\n\n![jupyter-notebook-workflow](web/public/notebook-flow.gif)\n\n### Playground Mode\n\n````md\n---\ntitle: \"Quarto 🔹🔸 Gradio Lite\"\n\nfilters:\n  - gradio\n---\n\n```{python}\n#| gr-theme: light\n#| gr-playground: true\n#| gr-layout: vertical\nimport gradio as gr\n\ndef greet(name):\n    return f\"Hello {name}!\"\n\ngr.Interface(fn=greet, inputs=\"textbox\", outputs=\"textbox\", live=True).launch()\n```\n````\n\n### Application Mode\n\n````md\n---\ntitle: \"Quarto 🔹🔸 Gradio Lite\"\n\nfilters:\n  - gradio\n---\n\n```{python}\n#| gr-theme: light\nimport gradio as gr\n\ndef greet(name):\n    return f\"Hello {name}!\"\n\ngr.Interface(fn=greet, inputs=\"textbox\", outputs=\"textbox\", live=True).launch()\n```\n````\n\n## Example\n\nHere is the source code of a minimal example: [example.qmd](example.qmd).\n\nFor more detailed guide, further examples and rendered output, please refer to the [documentation site](https://quarto-gradio.peter.gy).\n\n## Design\n\nThe main idea behind this extension is to hook into the lifecycle of the Quarto document at the stage where it is represented as a [Pandoc Abstract Syntax Tree (AST)](https://pandoc.org/filters.html), collect all the source code from Python code blocks and dynamically construct the appropriate HTML tree by populating the `\u003cgradio-requirements/\u003e` and `\u003cgradio-lite/\u003e` tags.\n\n![document-processing-flow](web/public/flow.svg)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeter-gy%2Fquarto-gradio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpeter-gy%2Fquarto-gradio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeter-gy%2Fquarto-gradio/lists"}