DEV Community: hannah 🐙

Introducing Gradio 5.0 🪄 Build and share AI web apps in minutes

hannah 🐙 — Wed, 16 Oct 2024 00:34:09 +0000

Hey folks 👋 Today we're launching Gradio 5.0 on Product Hunt. If you've never heard of Gradio, let's fix that!

What is Gradio?

Gradio is an open-source library that allows you to create customizable web interfaces for your machine learning models with Python. Whether you have your own model, or you want to try out a cool new open-source LLM without any hassle, Gradio is the answer. It's designed to be intuitive for developers (both newbies and experienced) and accessible for users.

Quick Start Tutorial

Here's a super simple demonstration of how you can create and deploy a demo via Hugging Face Spaces with a Gradio Chatbot template and customize it to our liking.

Create a Space for your Gradio demo here, and select the Chatbot template.

If you'd rather just run a Gradio demo locally, you can skip the next couple of steps, run pip install gradio and copy and paste the script further down.

You'll see your Gradio demo building at first, and then voila! You should be able to try out your own chatbot.

What if we want to customise this a little bit?

Let's change "friendly chatbot" to "pirate chatbot". I also want to test out the Mistral 7B Instruct LLM instead. You can either edit the app.py file in your Space repo, or you can clone the repo and run it locally with the command gradio app.py.

Here's my script with the changes:

import gradio as gr
from huggingface_hub import InferenceClient

client = InferenceClient("mistralai/Mistral-7B-Instruct-v0.3")


def respond(
    message,
    history: list[tuple[str, str]],
    system_message,
    max_tokens,
    temperature,
    top_p,
):
    messages = [{"role": "system", "content": system_message}]

    for val in history:
        if val[0]:
            messages.append({"role": "user", "content": val[0]})
        if val[1]:
            messages.append({"role": "assistant", "content": val[1]})

    messages.append({"role": "user", "content": message})

    response = ""

    for message in client.chat_completion(
        messages,
        max_tokens=max_tokens,
        stream=True,
        temperature=temperature,
        top_p=top_p,
    ):
        token = message.choices[0].delta.content

        response += token
        yield response


demo = gr.ChatInterface(
    respond,
    additional_inputs=[
        gr.Textbox(value="You are a pirate Chatbot.", label="System message"),
        gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens"),
        gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature"),
        gr.Slider(
            minimum=0.1,
            maximum=1.0,
            value=0.95,
            step=0.05,
            label="Top-p (nucleus sampling)",
        ),
    ],
)


if __name__ == "__main__":
    demo.launch()

If you're running this locally, simply run gradio app.py (or whatever you named this script file). If you edited this via the Hugging Face Spaces platform, you should just see it building and running in Spaces pretty quickly!

Now let's give it a go.

That's it! How cool is that? Plus, users of your space can also simply edit that pirate text with anything they want as well via the Additional Inputs section in the UI.

We can embed this Space anywhere, or you can share it via a Share link.

So what's new in Gradio 5.0?

Server Side Rendering: Massive performance improvements
UI Components: We've updated our UI components and given them a sleeker look
Major security enhancements: Safely deploy your web app without worrying about web security

...and a lot more.

Give it a try and see how quickly you can turn your ideas into shareable web apps! If you're stuck on how to start, have a play around with our Gradio Playground and have our LLM build a Gradio app for you.

Don't forget to check out Gradio 5.0 on Product Hunt and if you have a moment, we'd love for your support if you find it useful.

Happy coding! 🚀

13 ways to level up your site's accessibility ✨

hannah 🐙 — Thu, 23 Jul 2020 12:49:57 +0000

I recently posted a thread on twitter on making your site more accessible. It turned out to be super helpful for a lot of people, so I wanted to condense this into a post for people to refer to.

Having researched a little more into the topic for a new client, I found some changes I could make to my projects which could make all the difference to someone's experience when navigating a site using assistive technology.

1. Planning Ahead

Something that I need to work on is thinking about accessibility from the beginning. I’m working on it, but i still have a couple projects where I’m retroactively fixing my a11y blunders, including my own new site. I’m calling myself out here. It’s poor etiquette and wastes time.

2. Uppercase Text Properly

Instead of typing out uppercase content in all caps manually, use text-transform: uppercase on its class or id in CSS instead. this is because some screen readers read capitalised text letter by letter. Can you imagine how annoying that would be?!

3. Use Aria-label

The alt tag is used for describing images, but have you used the aria-label attribute? This is used to describe an elements role for screen readers. e.g. On a button that says “close” the aria-label could be “back to homepage” to give better context. You can read more here.

4. Specify the Main Content

Be sure to use one <main> tag to specify where the main content is. This helps less abled users to ignore any fancy fluff on your site and go straight to where the main content is.

5. Hide Elements Properly

When hiding absolutely positioned content using left: -9999px instead of using display: none, it’s not visible on a typical screen but this text is still technically visible for a screen reader, so it will still read whatever it is.

6. Use `<button>` when its a button

Gosh darn it fellow devs, let’s stop using <div>s as buttons. I know they’re by default really ugly and need style stripping, but you’re losing all the button functionality such as keyboard events which screen readers look for to help with navigation.

7. Style Links Sensibly

When adding a link, you may be tempted to use text decoration: none and change the colour on hover. Don’t do this! people who are colourblind struggle with seeing it as a link and won’t see that change. plus, why not be more creative than that?! Here‘s a snazzier example (credit):

8. Size Text Properly

Text sizing is a biggie for people with visual needs. Don’t make your text so small! A good point of reference - body text should be minimum 16px, small text summaries minimum 12px. It’s generally better to use relative screen sizing though. Read more here.

9. Don't Remove that Outline!

Using outline: none (commonly done on text inputs) is keyboard user unfriendly. They use the outline to see which element they’re focused on when they’re navigating through a page, so won’t know what they’re currently interacting with. to remove it sensibly, try using unfocus.

10. Check your Site

There are some great resources which allow you to check your site with a checklist.

A resource for further info and a checklist: A11yproject.
A similar site: A11y.me.
A repo of a11y css stylesheets for your project: a11.

11. Audit your Site

Google Chrome has an open source toolkit for site accessibility auditing that you should check out. You can install this in your own project for testing. See here.

12. Double Check!

Khan Academy has an open sourced accessibility visualisation toolkit, tota11y, so you can see how your site performs with assistive tech. How awesome is that?! Check it out here.

13. See for Yourself

If you have time, try using a screen reader yourself. On a Mac, turn on VoiceOver using Cmd + 5. Navigate through your site using tab and H/B/T/L to get to the next heading, button, table and list. The closed captions will read out the aria labels! Credit to this StackOverflow answer.

There’s loads more on the internet to learn from and I’m just scratching the surface. I’m trying be a decent citizen of the internet and hope I can encourage other devs to do so too. Feel free to share more valuable tips!

Cover image credit to mds.

Hi! I'm Hannah. I'm a virtual reality developer, senior frontend developer, vrcalm cofounder helping dementia patients, and tech for good enthusiast. 🌎

Adding pseudo-elements on input elements 🚫

hannah 🐙 — Mon, 11 May 2020 14:40:21 +0000

Before you sink hours into trying to work out why that ::after pseudo-element isn't working on your text input, let me save you some time and tell you that you can't - without some extra work that is.

TLDR; Add the ::after to a sibling <span> element.

The reason being is that pseudo-elements are only supported on container elements.

W3C's specification states the following:

Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content. The 'content' property, in conjunction with these pseudo-elements, specifies what is inserted.

But what does that mean!?

Pseudo-elements are rendered in your code as child elements of parent elements.

This means that rendering an ::after selector on a button is fine, because it can be rendered as a child within a <button> component without a problem because it's a container element, as shown below.

However, the below code won't work, because <input> elements don't support children. It's not a container element, like <button> is.

If you're not well acquainted with <input> elements, here's an example of valid usage of an <input> element. Observe the fact that there's an immediate closing tag without any children within that element.

See the problem? An ::after pseudo-element can't render within an <input> because it's not a container element; it cannot support any children. So how do we get around this?

The solution is to apply an ::after pseudo-element on a sibling <span> element.

Here, we are adding an ::after selector when the <input> focus state is active. By targeting the focus state, we can append a pseudo-element to an empty adjacent <span> element and work around the <input>'s container issue.

Here's a codepen to demonstrate this.

I hope you found this useful! Follow me on the bird app @erhannah for more web dev shenanigans/virtual reality chat/dog pics. ✨

N.B: Yes, I know you could also get around this with jQuery. But it's 2020.

Hi! I'm Hannah. I'm a virtual reality developer, senior frontend developer, vrcalm cofounder helping dementia patients, and tech for good enthusiast. 🌎