Skip to content

UI update: API documentation page#2652

Merged
aliabid94 merged 23 commits into
mainfrom
doc_postman
Nov 20, 2022
Merged

UI update: API documentation page#2652
aliabid94 merged 23 commits into
mainfrom
doc_postman

Conversation

@gary149
Copy link
Copy Markdown
Contributor

@gary149 gary149 commented Nov 15, 2022

New footer (we can grayscale icons color if too visible, and keep the colors on hover):

image

New doc page:

image

Dark mode:

image

@github-actions
Copy link
Copy Markdown
Contributor

All the demos for this PR have been deployed at https://huggingface.co/spaces/gradio-pr-deploys/pr-2652-all-demos

Comment thread ui/packages/app/index.html
Comment thread ui/packages/app/src/Blocks.svelte Outdated
</div>
&nbsp; &bull; &nbsp;
View <img src={api_logo} alt="" class="w-2.5 md:w-3 mx-1" />API
documentation
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably going to have to rework a bit on this (not sure it's very clear)
image

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agree, I think this should be tweaked so that the icons are not in the middle of the text. Perhaps "Use as API" instead of "View API documentation"?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

or maybe "Use this app API" to focus that it's this app's API

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(not sure)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

went with "Use via API", open to suggestions

</div>
<button
on:click={run.bind(null, dependency_index)}
class="gr-button gr-button-lg gr-button-primary w-full mt-4"
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could add a clear/reset button.
image

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

haha I feel like at this point we're just recreating gradio in the api page :P

Comment thread ui/packages/app/src/ApiDocs.svelte
Comment thread ui/packages/app/src/ApiDocs.svelte Outdated
@abidlabs
Copy link
Copy Markdown
Member

Absolutely love the new look @gary149!

@aliabid94 aliabid94 marked this pull request as ready for review November 17, 2022 18:24
@aliabid94
Copy link
Copy Markdown
Contributor

Should work with every component now, ready for review

@abidlabs
Copy link
Copy Markdown
Member

abidlabs commented Nov 17, 2022

Love the new design of the footer and API page! @aliabid94 I just built the frontend to test locally and I'm running into this weird behavior where the modal pops up when the Gradio app is running inside of an iframe (e.g. on Spaces or in a jupyter notebook), but not if it is opened in a new browser tab. See here:

7df17382-9158-4d6e-95fd-5e459d70bef4

Tested on Chrome + Edge, including incognito. Also tested when launching the Interface from a regular script instead of from a jupyter notebook. Are you able to reproduce?

@abidlabs
Copy link
Copy Markdown
Member

abidlabs commented Nov 18, 2022

Thanks for the fix @aliabid94, this is working now for me. Generally works great across many different demos.

I noticed a few small UI improvements/nits:

  • When a demo has multiple API endpoints, it's easy to miss that fact because the documentation for each endpoint takes so much room. I would add the # of API endpoints at the top after the URL

image

  • I don't think it's super clear what the "run" button does, for someone who is seeing this page for the first time. I think the old name of "Try it now" or something is clearer

image

@aliabid94 aliabid94 merged commit 7022735 into main Nov 20, 2022
@aliabid94 aliabid94 deleted the doc_postman branch November 20, 2022 22:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants