victor HF staff commited on
Commit
d644838
1 Parent(s): ad481ce

Settings UI update (#638)

Browse files

* add description

* modal size

* copy link to model

* layout

* use copy component

src/lib/components/CopyToClipBoardBtn.svelte CHANGED
@@ -35,17 +35,17 @@
35
  </script>
36
 
37
  <button
38
- class="btn rounded-lg border border-gray-200 px-2 py-2 text-sm shadow-sm transition-all hover:border-gray-300 active:shadow-inner dark:border-gray-600 dark:hover:border-gray-400 {classNames}
39
- {!isSuccess && 'text-gray-200 dark:text-gray-200'}
40
- {isSuccess && 'text-green-500'}
41
- "
42
  title={"Copy to clipboard"}
43
  type="button"
44
  on:click
45
  on:click={handleClick}
46
  >
47
- <span class="relative">
48
- <IconCopy />
 
 
 
49
  <Tooltip classNames={isSuccess ? "opacity-100" : "opacity-0"} />
50
- </span>
51
  </button>
 
35
  </script>
36
 
37
  <button
38
+ class="btn rounded-lg border border-gray-200 px-2 py-2 text-sm shadow-sm transition-all hover:border-gray-300 active:shadow-inner dark:border-gray-700 dark:hover:border-gray-500 {classNames}"
 
 
 
39
  title={"Copy to clipboard"}
40
  type="button"
41
  on:click
42
  on:click={handleClick}
43
  >
44
+ <div class="relative">
45
+ <slot>
46
+ <IconCopy />
47
+ </slot>
48
+
49
  <Tooltip classNames={isSuccess ? "opacity-100" : "opacity-0"} />
50
+ </div>
51
  </button>
src/routes/settings/+layout.svelte CHANGED
@@ -31,7 +31,7 @@
31
  if (browser) window;
32
  goto(previousPage);
33
  }}
34
- class="z-10 grid h-[95dvh] w-[90dvw] grid-cols-1 content-start gap-x-10 gap-y-6 overflow-hidden rounded-2xl bg-white p-4 shadow-2xl outline-none sm:h-[80dvh] md:grid-cols-3 md:grid-rows-[auto,1fr] md:p-8 xl:w-[1100px]"
35
  >
36
  <div class="col-span-1 flex items-center justify-between md:col-span-3">
37
  <h2 class="text-xl font-bold">Settings</h2>
@@ -46,7 +46,7 @@
46
  </button>
47
  </div>
48
  <div
49
- class="col-span-1 flex flex-col overflow-y-auto whitespace-nowrap max-md:-mx-4 max-md:h-[160px] max-md:border md:pr-6"
50
  >
51
  {#each data.models.filter((el) => !el.unlisted) as model}
52
  <a
@@ -82,8 +82,10 @@
82
  </div>
83
 
84
  {#if $settings.recentlySaved}
85
- <div class="absolute bottom-0 right-0 m-2 inline p-2 text-gray-400">
86
- <CarbonCheckmark class="inline text-lg" />
 
 
87
  Saved
88
  </div>
89
  {/if}
 
31
  if (browser) window;
32
  goto(previousPage);
33
  }}
34
+ class="xl: z-10 grid h-[95dvh] w-[90dvw] grid-cols-1 content-start gap-x-10 gap-y-6 overflow-hidden rounded-2xl bg-white p-4 shadow-2xl outline-none sm:h-[80dvh] md:grid-cols-3 md:grid-rows-[auto,1fr] md:p-8 xl:w-[1200px] 2xl:h-[70dvh]"
35
  >
36
  <div class="col-span-1 flex items-center justify-between md:col-span-3">
37
  <h2 class="text-xl font-bold">Settings</h2>
 
46
  </button>
47
  </div>
48
  <div
49
+ class="col-span-1 flex flex-col overflow-y-auto whitespace-nowrap max-md:-mx-4 max-md:h-[245px] max-md:border md:pr-6"
50
  >
51
  {#each data.models.filter((el) => !el.unlisted) as model}
52
  <a
 
82
  </div>
83
 
84
  {#if $settings.recentlySaved}
85
+ <div
86
+ class="absolute bottom-4 right-4 m-2 flex items-center gap-1.5 rounded-full border border-gray-300 bg-gray-200 px-3 py-1 text-black"
87
+ >
88
+ <CarbonCheckmark />
89
  Saved
90
  </div>
91
  {/if}
src/routes/settings/[...model]/+page.svelte CHANGED
@@ -2,7 +2,9 @@
2
  import { page } from "$app/stores";
3
  import type { BackendModel } from "$lib/server/models";
4
  import { useSettingsStore } from "$lib/stores/settings";
 
5
  import CarbonArrowUpRight from "~icons/carbon/arrow-up-right";
 
6
 
7
  const settings = useSettingsStore();
8
 
@@ -24,11 +26,19 @@
24
  </script>
25
 
26
  <div class="flex flex-col items-start">
27
- <h2 class="mb-2.5 text-xl font-semibold">
28
- {$page.params.model}
29
- </h2>
 
30
 
31
- <div class="flex items-center gap-4">
 
 
 
 
 
 
 
32
  <a
33
  href={model.modelUrl || "https://huggingface.co/" + model.name}
34
  target="_blank"
@@ -62,6 +72,14 @@
62
  Model website
63
  </a>
64
  {/if}
 
 
 
 
 
 
 
 
65
  </div>
66
 
67
  <button
 
2
  import { page } from "$app/stores";
3
  import type { BackendModel } from "$lib/server/models";
4
  import { useSettingsStore } from "$lib/stores/settings";
5
+ import CopyToClipBoardBtn from "$lib/components/CopyToClipBoardBtn.svelte";
6
  import CarbonArrowUpRight from "~icons/carbon/arrow-up-right";
7
+ import CarbonLink from "~icons/carbon/link";
8
 
9
  const settings = useSettingsStore();
10
 
 
26
  </script>
27
 
28
  <div class="flex flex-col items-start">
29
+ <div class="mb-5 flex flex-col gap-1.5">
30
+ <h2 class="text-lg font-semibold md:text-xl">
31
+ {$page.params.model}
32
+ </h2>
33
 
34
+ {#if model.description}
35
+ <p class=" text-gray-600">
36
+ {model.description}
37
+ </p>
38
+ {/if}
39
+ </div>
40
+
41
+ <div class="flex flex-wrap items-center gap-2 md:gap-4">
42
  <a
43
  href={model.modelUrl || "https://huggingface.co/" + model.name}
44
  target="_blank"
 
72
  Model website
73
  </a>
74
  {/if}
75
+ <CopyToClipBoardBtn
76
+ value="{$page.url.origin}/?model={model.id}"
77
+ classNames="!border-none !shadow-none !py-0 !px-1 !rounded-md"
78
+ >
79
+ <div class="flex items-center gap-1.5">
80
+ <CarbonLink />Copy direct link to model
81
+ </div>
82
+ </CopyToClipBoardBtn>
83
  </div>
84
 
85
  <button