core: ✨ add new package space-header #752

enzostvs · 2024-06-13T15:28:22Z

Add the mini header into your project if running on a custom/sub domain

Example:

import { init } from "@huggingface/space-header"

// ...

init("enzostvs/lora-studio")

Must be called once the page has been mounted. If this is not the case, a log error is displayed to prevent the user

we've decided to stick with vanilla JS, which may evolve if necessary. (web component, etc)

julien-c · 2024-06-13T15:46:36Z

packages/space-header/tsconfig.json

make this file shorter?

jbilcke · 2024-06-13T16:00:44Z

packages/space-header/src/inject_to_body.ts

@@ -0,0 +1,11 @@
+export const inject_to_body = (


perhaps we should add a class name or id, to make it easier for devs to change the position within the page?

that way they don't have to change their underlying app/page design in case the header gets in the way of something (toolbar etc)

hi @jbilcke nice idea!

i tried with both, class name or id, and I decided to go for the ID while className is probably not clear enough, tailwind class will not work etc.. so easier for us to target it through their own CSS file

thanks!

Ahh got it!

I missed the box.setAttribute("id", "huggingface-space-header");

all good 👍

Related: I think we should allow users to provide a "target" and if so, rather than appending to body, append to that target.

Like with Svelte: (but same for any other framework)

https://svelte.dev/docs/client-side-component-api#creating-a-component

eg init(space, {target: "..."})

@coyotte508 should be good now! tell me if you had something different in mind 🤗

In my mind it was more of a string that can be passed to document.querySelector, but a HTMLElement works too

jbilcke · 2024-06-13T16:02:11Z

packages/space-header/src/index.ts

@@ -0,0 +1,23 @@
+import { inject_to_body} from "./inject_to_body"


maybe we could add a prettifier to have unified spaces / semicolons, but that's just code-smetics

The code was on another project before (without prettier), so should be good now!

jbilcke · 2024-06-13T16:38:36Z

Thank you @enzostvs for doing this!

for some context I had started my own independent version based on Tailwind (my goal was to stay close to the original using Tailwind ie. save time in case the original design changes, let tailwind generate a tiny optimized stylesheet, let the framework generate a tiny static .js code injector etc - I would have put it into its own standalone module not just my ai stories factory app)

but I never finished as I got involved in other things, and I think you approach works fine too (this header shouldn't change that often)..

plus no dependencies which is great! 👌

pngwn · 2024-06-14T10:18:06Z

Thanks for this PR, looks great, just have a few questions from a gradio PoV, where we may not know the user and space name up front.

we already make this request, and would need to make an extra one to get the space name anyway (you only know the space name when using this manually, we don’t have it on a subdomain), would it be possible to skip the API request and just pass in the Space object instead of a name?
the origin check isn’t sufficient for gradio as gradio apps can be hosted anywhere and all non Hugging Face urls will ‘pass’ the check causing the widget to render (colab/ locally/ etc). This isn’t anything that requires changes here but just mentioning it, we will handle this on the gradio side.

…he function to avoid the request to the HF API

enzostvs · 2024-06-14T10:37:02Z

Thanks for this PR, looks great, just have a few questions from a gradio PoV, where we may not know the user and space name up front.

we already make this request, and would need to make an extra one to get the space name anyway (you only know the space name when using this manually, we don’t have it on a subdomain), would it be possible to skip the API request and just pass in the Space object instead of a name?

@pngwn just pushed a change to cover your first point, now you can pass the namespace or directly the space information, here is the recommended info

export interface Space {
	id: string;
	likes: number;
	author: string;
}

pngwn · 2024-06-14T10:50:58Z

Amazing. Thanks!

pngwn

Looks great from the gradio side! Thanks @enzostvs!

julien-c · 2024-06-14T11:09:57Z

the origin check isn’t sufficient for gradio as gradio apps can be hosted anywhere and all non Hugging Face urls will ‘pass’ the check causing the widget to render (colab/ locally/ etc). This

Yes, you will use the Spaces env variables to check whether the Gradio app is running on Spaces, correct, @pngwn?

pngwn · 2024-06-14T11:42:51Z

@julien-c yus! We will also hide when embedded via the web component I think as the space info is already in the wrapper.

One case we may not be able to figure out is if someone embeds using an iframe. I'm not sure what we want to do in that case, should we just show it?

julien-c · 2024-06-14T12:56:36Z

One case we may not be able to figure out is if someone embeds using an iframe. I'm not sure what we want to do in that case, should we just show it?

you mean the gradio app runs on Spaces, but the raw URL like https://julien-c-coqui.hf.space is embedded in an iframe on a different website?

I would display it in that case yes (but no strong opinion)

core: ✨ add new package space-header

58c229c

enzostvs requested review from julien-c, coyotte508 and gary149 June 13, 2024 15:28

julien-c requested a review from jbilcke-hf June 13, 2024 15:42

julien-c reviewed Jun 13, 2024

View reviewed changes

jbilcke reviewed Jun 13, 2024

View reviewed changes

fix: make tsconfig shorter

cba08bc

jbilcke reviewed Jun 13, 2024

View reviewed changes

core: add types + add an ID to let user customize it easily

3f2d054

enzostvs requested a review from jbilcke June 13, 2024 16:22

coyotte508 added 3 commits June 14, 2024 09:25

👷 Add lint/formatting

ca6d4ee

🙈 Ignore dist folder during linting

7985ad4

👷 Add publish github action

595071c

add target params + can pass the space Information directly through t…

2c984af

…he function to avoid the request to the HF API

pngwn approved these changes Jun 14, 2024

View reviewed changes

coyotte508 approved these changes Jun 14, 2024

View reviewed changes

jbilcke approved these changes Jun 14, 2024

View reviewed changes

enzostvs merged commit f925d99 into main Jun 14, 2024
5 checks passed

enzostvs deleted the feat/space-header branch June 14, 2024 13:39

		@@ -0,0 +1,23 @@
		import { inject_to_body} from "./inject_to_body"

core: ✨ add new package space-header #752

core: ✨ add new package space-header #752

Uh oh!

Conversation

enzostvs commented Jun 13, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jbilcke Jun 13, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jbilcke commented Jun 13, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pngwn commented Jun 14, 2024

Uh oh!

enzostvs commented Jun 14, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pngwn commented Jun 14, 2024

Uh oh!

pngwn left a comment

Choose a reason for hiding this comment

Uh oh!

julien-c commented Jun 14, 2024

Uh oh!

pngwn commented Jun 14, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

julien-c commented Jun 14, 2024

Uh oh!

Uh oh!

Uh oh!

jbilcke Jun 13, 2024 •

edited

Loading

jbilcke commented Jun 13, 2024 •

edited

Loading

enzostvs commented Jun 14, 2024 •

edited

Loading

pngwn commented Jun 14, 2024 •

edited

Loading