DEV Community: hannah 🐙

MiniMax-H3, explained with your favourite TV shows

hannah 🐙 — Thu, 13 Aug 2026 15:43:58 +0000

If you've been watching the open text-to-video space, MiniMax-H3 is one of the more interesting drops of the year. It generates short cinematic clips with a synced soundtrack from a text prompt, and you can drive it end-to-end without ever touching a GPU yourself.

The easiest way to explain what that actually looks like is to point at the results people have been posting. My feed has been full of H3 recreations of famous TV moments — Breaking Bad lab scenes, Friends coffee-shop bits, mockumentary moments from The Office.

// Detect dark theme var iframe = document.getElementById('tweet-2084562933162602866-755'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2084562933162602866&theme=dark" }

In this post I'll cover:

What MiniMax-H3 actually is
How you can run it yourself

What is MiniMax-H3?

MiniMax-H3 is a text-to-video model that produces short clips at cinematic resolutions. Two things make it stand out compared to earlier open video models:

Sound comes out of the same model. Most open text-to-video pipelines output silent frames and you bolt on a separate audio model afterwards. H3 emits a soundtrack aligned with the visual content in one pass.

// Detect dark theme var iframe = document.getElementById('tweet-2084353489061499021-723'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2084353489061499021&theme=dark" }

Keyframe conditioning. You can pass an optional first frame and/or last frame image and the model will interpolate a motion path between them. This turns it from a pure "vibe generator" into something you can actually direct.

// Detect dark theme var iframe = document.getElementById('tweet-2084378446122319973-582'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2084378446122319973&theme=dark" }

The knobs are the ones you'd expect:

Prompt — free form text (e.g. "Wide shot of a corporate glass boardroom at golden hour, single figure standing at the window, ominous string swell")
First frame / Last frame — optional image conditioning
Canvas — resolution + aspect ratio
Duration — length in seconds
Steps — denoising steps (more = slower + usually cleaner)
Seed — for reproducibility
Upsample prompt — lets the model rewrite your prompt into something more descriptive before generating. Useful when your prompt is closer to "guy walks into diner" than "medium wide, 35mm, natural light, subject enters frame right"

MiniMaxAI/MiniMax-H3 is now available through Hugging Face Inference Providers, so you can try it for free on Hugging Face and use your account quota.

Wrapping it as a node graph

Gradio comes with gr.Workflow, a node-graph frontend on top of Spaces. Instead of hand-wiring inputs and outputs in Python, you can just drag and drop inputs, outputs and any compatible space or model on Hugging Face (that's the beauty of open source!).

For MiniMax-H3 that means you can:

Pre-fill a scene prompt so new users see a working example immediately
Slot in an image upload node so keyframe conditioning is one click
Route the video output into a preview node
Later, chain a second operator (say, upscaling or captioning) without rewriting the UI

Running it

You can try it out on Hugging Face No GPU, no install. Here's workflow space so you can try it: akhaliq/MiniMax-H3-Turbo-Lora, just sign in with your HF account, enter your custom inputs, and hit run.

When you're ready to go further, duplicate the Space to your own profile and attach HF GPU hardware — from there you can drag and drop other Spaces, models, and functions from Hugging Face straight into your workflow and run it as much as you want.

Here's a Big Bang Theory recreation that made the rounds this week:

// Detect dark theme var iframe = document.getElementById('tweet-2084877297136566551-103'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2084877297136566551&theme=dark" }

Where to go from here

The single-operator graph is the minimum viable version. Once it's running, the interesting extensions are all graph edits, not Python edits:

Chain a keyframe helper. Drop in an image-resize / aspect-ratio-fit operator between your image reference and the H3 operator's First frame input so users can upload any-aspect-ratio photo without cropping it themselves.
Fan out canvases. Duplicate the operator with different Canvas defaults to produce landscape + vertical + square variants in one run.
Post-process. Wire the video output into an upscaler Space, or a Whisper Space to caption the generated soundtrack.

To persist a new layout you either run the Space locally and let it overwrite workflow.json, or edit the JSON directly in the repo files and redeploy.

To really improve your outputs, MiniMax have provided a prompt guide to help you get the best out of your generations.

interesting 🤔

hannah 🐙 — Fri, 10 Apr 2026 10:39:39 +0000

yuvraj sharma

Apr 8

Best AI App Frameworks in 2026

#ai #webdev #programming #python

6 min read

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. 🌎