Add an anchor_links parameter to gr.ParamViewer that allows linking to specific parameters.
#10495
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🪼 branch checks and previews
Install Gradio from this PR pip install https://gradio-pypi-previews.s3.amazonaws.com/f331adcd354ebe18c74608a76dc229b70270d929/gradio-5.14.0-py3-none-any.whlInstall Gradio Python Client from this PR pip install "gradio-client @ git+https://github.com/gradio-app/gradio@f331adcd354ebe18c74608a76dc229b70270d929#subdirectory=client/python"Install Gradio JS Client from this PR npm install https://gradio-npm-previews.s3.amazonaws.com/f331adcd354ebe18c74608a76dc229b70270d929/gradio-client-1.10.0.tgzUse Lite from this PR <script type="module" src="https://gradio-lite-previews.s3.amazonaws.com/f331adcd354ebe18c74608a76dc229b70270d929/dist/lite.js""></script> |
🦄 change detectedThis Pull Request includes changes to the following packages.
With the following changelog entry.
Maintainers or the PR author can modify the PR title to modify this entry.
|
|
@abidlabs, there's a problem in your website code that if there are multiple params on the page with the same name, they're both getting the same id so the linking gets broken because it doesn't know which to reference. For example, the docs for interface has fn paramater in the class and also in load. Both get the id "param-fn" so this link is broken: https://d3a08c02.gradio-website.pages.dev/docs/gradio/interface#param-fn It should be param-{class/function name}-{param-name} I've done something similar before. so let me fix this |
|
Ah right of course, thanks for taking care of it! |
aliabd
approved these changes
Feb 5, 2025
There was a problem hiding this comment.
Ok @abidlabs. based on your suggestion you can now pass a string to anchor_links that will act as a prefix.
I tested this with the website and this modified demo:
import gradio as gr
with gr.Blocks() as demo:
gr.Markdown("The `round()` function in Python takes two parameters"*1000)
gr.ParamViewer(
{
"number": {
"type": "int | float",
"description": "The number to round",
"default": None
},
"ndigits": {
"type": "int",
"description": "The number of digits to round to",
"default": "0",
},
"ndigits2": {
"type": "int",
"description": "The number of digits to round to",
"default": "0",
},
"ndigits3": {
"type": "int",
"description": "The number of digits to round to",
"default": "0",
},
"ndigits4": {
"type": "int",
"description": "The number of digits to round to",
"default": "0",
},
"ndigits5": {
"type": "int",
"description": "The number of digits to round to",
"default": "0",
}
},
anchor_links=True,
)
gr.ParamViewer(
{
"number": {
"type": "int | float",
"description": "The number to round",
"default": None
},
"ndigits": {
"type": "int",
"description": "The number of digits to round to",
"default": "0",
},
"ndigits2": {
"type": "int",
"description": "The number of digits to round to",
"default": "0",
},
"ndigits3": {
"type": "int",
"description": "The number of digits to round to",
"default": "0",
},
"ndigits4": {
"type": "int",
"description": "The number of digits to round to",
"default": "0",
},
"ndigits5": {
"type": "int",
"description": "The number of digits to round to",
"default": "0",
}
},
anchor_links=False,
)
gr.ParamViewer(
{
"number": {
"type": "int | float",
"description": "The number to round",
"default": None
},
"ndigits": {
"type": "int",
"description": "The number of digits to round to",
"default": "0",
},
"ndigits2": {
"type": "int",
"description": "The number of digits to round to",
"default": "0",
},
"ndigits3": {
"type": "int",
"description": "The number of digits to round to",
"default": "0",
},
"ndigits4": {
"type": "int",
"description": "The number of digits to round to",
"default": "0",
},
"ndigits5": {
"type": "int",
"description": "The number of digits to round to",
"default": "0",
}
},
anchor_links="bananas",
)
gr.ParamViewer(
{
"number": {
"type": "int | float",
"description": "The number to round",
"default": None
},
"ndigits": {
"type": "int",
"description": "The number of digits to round to",
"default": "0",
},
"ndigits2": {
"type": "int",
"description": "The number of digits to round to",
"default": "0",
},
"ndigits3": {
"type": "int",
"description": "The number of digits to round to",
"default": "0",
},
"ndigits4": {
"type": "int",
"description": "The number of digits to round to",
"default": "0",
},
"ndigits5": {
"type": "int",
"description": "The number of digits to round to",
"default": "0",
}
},
anchor_links="",
)
if __name__ == "__main__":
demo.launch()And it's working great. Because paramtable.svelte wasn't passing fn/class names i had to edit all the svx files. but now should be good to go. please take a look at my changes though
|
LGTM @aliabd thanks so much for the fix! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes: #10339 and updates our docs to use this.
Test with: