Spaces:

enzostvs
/

lora-studio

Running on CPU Upgrade

App Files Files Community

enzostvs HF staff commited on Jun 18

Commit

5770977

•

1 Parent(s): bf003c3

add mini space header

Browse files

Files changed (5) hide show

package-lock.json +9 -10
src/app.html +8 -0
src/lib/components/spaceheader/SpaceMiniHeader.svelte +41 -0
src/routes/+layout.svelte +2 -0
src/routes/models/+layout.svelte +0 -2

package-lock.json CHANGED Viewed

@@ -10,6 +10,7 @@
 			"dependencies": {
 				"@aws-sdk/client-s3": "^3.490.0",
 				"@huggingface/hub": "^0.12.3",
 				"@iconify/svelte": "^3.1.4",
 				"@prisma/client": "^5.7.1",
 				"@svelte-put/clickoutside": "^3.0.1",
@@ -56,17 +57,10 @@
 				"vite": "^4.4.2"
 			}
 		},
-		"../@huggingface-mini-header": {
-			"name": "@huggingface/space-header",
-			"version": "1.0.0",
-			"extraneous": true,
-			"license": "ISC",
-			"devDependencies": {
-				"tsup": "^8.1.0",
-				"typescript": "^5.4.5"
-			}
 		},
-		"../huggingface.js/packages/space-header": {
 			"name": "@huggingface/space-header",
 			"version": "1.0.0",
 			"extraneous": true,
@@ -1287,6 +1281,11 @@
 				"node": ">=18"
 			}
 		},
 		"node_modules/@humanwhocodes/config-array": {
 			"version": "0.11.13",
 			"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",

 			"dependencies": {
 				"@aws-sdk/client-s3": "^3.490.0",
 				"@huggingface/hub": "^0.12.3",
+				"@huggingface/space-header": "^1.0.1",
 				"@iconify/svelte": "^3.1.4",
 				"@prisma/client": "^5.7.1",
 				"@svelte-put/clickoutside": "^3.0.1",
 				"vite": "^4.4.2"
 			}
 		},
+		"../../huggingface.js/packages/space-header": {
+			"extraneous": true
 		},
+		"../@huggingface-mini-header": {
 			"name": "@huggingface/space-header",
 			"version": "1.0.0",
 			"extraneous": true,
 				"node": ">=18"
 			}
 		},
+		"node_modules/@huggingface/space-header": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@huggingface/space-header/-/space-header-1.0.1.tgz",
+			"integrity": "sha512-sSHZgWoeCKydlWm/qqIzDwqSHUzr9MqFkS58LZPSnSZNMvhRgU8qQCn9TXHAicFuYyW9W3JkCkc2RpnkfAycyw=="
+		},
 		"node_modules/@humanwhocodes/config-array": {
 			"version": "0.11.13",
 			"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",

src/app.html CHANGED Viewed

@@ -33,6 +33,14 @@
 			content="LoRA Studio is a platform for creating, sharing, and using models"
 		/>
 		<meta name="twitter:image" content="https://enzostvs-lora-studio.hf.space/metadata.png" />
 	</head>
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>

 			content="LoRA Studio is a platform for creating, sharing, and using models"
 		/>
 		<meta name="twitter:image" content="https://enzostvs-lora-studio.hf.space/metadata.png" />
+		<link
+			ref="stylesheet"
+			href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap"
+		/>
+		<link
+			rel="stylesheet"
+			href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600;700&display=swap"
+		/>
 	</head>
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>

src/lib/components/spaceheader/SpaceMiniHeader.svelte ADDED Viewed

	@@ -0,0 +1,41 @@

+<script lang="ts">
+	import { onMount } from "svelte";
+  let space : any = {}
+  let isVisible = false
+  onMount(async () => {
+    if (window.location.origin !== "https://huggingface.co") {
+      isVisible = true
+    }
+    const request = await fetch("https://huggingface.co/api/spaces/enzostvs/lora-studio")
+    const response = await request.json()
+    space = response
+  });
+</script>
+{#if space.id && isVisible}
+  <div class="from-gray-50 to-white text-md shadow-alternate fixed right-6 top-5 z-20 flex h-[40px] items-stretch gap-3 overflow-hidden rounded-xl border border-gray-200 bg-gradient-to-t px-4 py-2 text-gray-500 dark:border-gray-800 max-sm:hidden font-other">
+    <div class="flex items-center justify-start gap-2">
+      <img src={`https://huggingface.co/api/users/${space.author}/avatar`} class="w-3.5 h-3.5 rounded-full flex-none" alt={space.author} />
+      <div class="flex items-center justify-center gap-1">
+        <a href="https://huggingface.co/{space.author}" class="text-gray-500 hover:text-blue-600" target="_blank">{space.author}</a>
+        <span class="text-gray-300 text-lg">/</span>
+        <a href="https://huggingface.co/{space.id}" target="_blank" class="font-mono font-semibold text-gray-800 hover:text-blue-600 font-namespace">{space.id?.split('/').pop()}</a>
+      </div>
+    </div>
+    <div class="inline-flex items-center overflow-hidden whitespace-nowrap rounded-md border bg-white text-sm leading-none text-gray-500  flex-none self-center "><button class="relative flex items-center overflow-hidden from-red-50 to-transparent dark:from-red-900 p-1 focus:outline-none" title="Unlike"><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" fill="currentColor"><path d="M22.45,6a5.47,5.47,0,0,1,3.91,1.64,5.7,5.7,0,0,1,0,8L16,26.13,5.64,15.64a5.7,5.7,0,0,1,0-8,5.48,5.48,0,0,1,7.82,0L16,10.24l2.53-2.58A5.44,5.44,0,0,1,22.45,6m0-2a7.47,7.47,0,0,0-5.34,2.24L16,7.36,14.89,6.24a7.49,7.49,0,0,0-10.68,0,7.72,7.72,0,0,0,0,10.82L16,29,27.79,17.06a7.72,7.72,0,0,0,0-10.82A7.49,7.49,0,0,0,22.45,4Z"></path></svg> <svg class="absolute text-red-500 origin-center transform transition-transform ease-in
+      " xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32" fill="currentColor"><path d="M22.5,4c-2,0-3.9,0.8-5.3,2.2L16,7.4l-1.1-1.1C12,3.3,7.2,3.3,4.3,6.2c0,0-0.1,0.1-0.1,0.1c-3,3-3,7.8,0,10.8L16,29l11.8-11.9c3-3,3-7.8,0-10.8C26.4,4.8,24.5,4,22.5,4z"></path></svg> <span class="ml-4 pl-0.5 hidden">like</span></button> <button class="flex items-center border-l px-1.5 py-1 text-gray-400 focus:bg-gray-100 focus:outline-none" title="See users who liked this repository">{space.likes}</button></div>
+  </div>
+{/if}
+<style>
+  .font-namespace {
+    font-family: "IBM Plex Mono", sans-serif;
+  }
+  .font-other {
+    font-family: "Source Sans Pro", sans-serif;
+  }
+</style>

src/routes/+layout.svelte CHANGED Viewed

@@ -8,6 +8,7 @@
 	import { openWindowLogin, userStore } from "$lib/stores/use-user";
 	import Dialog from "$lib/components/dialog/Dialog.svelte";
 	import { loginModalStore } from "$lib/stores/use-login-modal";
 	export let data;
 	userStore.set(data?.user?.user);
@@ -20,6 +21,7 @@
 </script>
 <div class="flex items-start">
 	<Sidebar />
 	<main id="app" class="flex-1 h-screen overflow-y-auto">
 		<slot />

 	import { openWindowLogin, userStore } from "$lib/stores/use-user";
 	import Dialog from "$lib/components/dialog/Dialog.svelte";
 	import { loginModalStore } from "$lib/stores/use-login-modal";
+	import SpaceMiniHeader from "$lib/components/spaceheader/SpaceMiniHeader.svelte";
 	export let data;
 	userStore.set(data?.user?.user);
 </script>
 <div class="flex items-start">
+	<SpaceMiniHeader />
 	<Sidebar />
 	<main id="app" class="flex-1 h-screen overflow-y-auto">
 		<slot />

src/routes/models/+layout.svelte CHANGED Viewed

@@ -3,7 +3,6 @@
 	import InfiniteScroll from "svelte-infinite-scroll";
 	import { page } from "$app/stores";
 	import { onMount } from "svelte";
-	// import { init } from "@huggingface/space-header";
 	import { goto } from "$app/navigation";
 	import Button from "$lib/components/Button.svelte";
@@ -33,7 +32,6 @@
 	onMount(() => {
 		refetch(false);
-		// init("enzostvs/lora-studio");
 	});
 	$: elementScroll = browser ? document?.getElementById('app') : undefined;

 	import InfiniteScroll from "svelte-infinite-scroll";
 	import { page } from "$app/stores";
 	import { onMount } from "svelte";
 	import { goto } from "$app/navigation";
 	import Button from "$lib/components/Button.svelte";
 	onMount(() => {
 		refetch(false);
 	});
 	$: elementScroll = browser ? document?.getElementById('app') : undefined;