darkmode + runtime + likes

src/lib/components/result/space/Author.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
+	import Icon from "@iconify/svelte";
+  import type { Author } from "$lib/types";
 	import ProTag from "$lib/components/ProTag.svelte";
 	import Community from "$lib/components/icons/Community.svelte";
 	import Like from "$lib/components/icons/Like.svelte";
 	import UpVote from "$lib/components/icons/UpVote.svelte";
-import type { Author } from "$lib/types";
-	import Icon from "@iconify/svelte";
 
-  export let author: Author | undefined;
+  export let author: Author;
 </script>
 
 <div class="rounded-2xl bg-white dark:bg-zinc-900 p-5 shadow flex items-start justify-start gap-5 col-span-2">
-  <img src={author?.avatarUrl} alt={author?.fullname} class="w-44 h-44 rounded-xl" />
+  <img src={author?.avatarUrl} alt={author?.fullname} class="w-44 h-full rounded-xl object-cover" />
   <div class="w-full pt-2 pl-1 h-full flex flex-col justify-between">
     <div>
       {#if author?.fullname}

src/lib/components/result/space/Overview.svelte

@@ -13,6 +13,12 @@
   export let sdk_version: string | undefined;
   export let license: string | undefined;
   export let pinned: boolean | undefined;
+  export let createdAt: string | undefined;
+
+  const formatDate = (date: string) => {
+    const d = new Date(date);
+    return `${d.toLocaleString("default", { month: "short" })} ${d.getDate()}, ${d.getFullYear()}`;
+  }
 
 </script>
 
@@ -66,11 +72,11 @@
           </p>
         </div>
       {/if}
-      {#if emoji}
+      {#if createdAt}
         <div class="border rounded-lg border-zinc-300/70 dark:border-zinc-800 p-3 flex items-center justify-start gap-3">
-          <Icon icon="solar:subtitles-bold-duotone" class="w-6 h-6 text-gray-500 dark:text-white" />
+          <Icon icon="solar:calendar-date-bold-duotone" class="w-6 h-6 text-gray-500 dark:text-white" />
           <p class="uppercase text-sm text-black/60 dark:text-zinc-300 font-semibold font-title truncate">
-            {title}
+            {formatDate(createdAt)}
           </p>
         </div>
       {/if}

src/lib/components/result/space/Runtime.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import Icon from "@iconify/svelte";
+  import type { Author } from "$lib/types";
+
+  export let runtime: any;
+
+  const renderBadge = (stage: string) => {
+    switch (stage) {
+      case "RUNNING_BUILDING":
+        return "bg-blue-500/30 text-blue-600";
+      case "RUNNING":
+        return "bg-green-500/30 text-green-600";
+      case "ERROR":
+        return "bg-red-500/30 text-red-600";
+      default:
+        return "bg-gray-500/30 text-gray-600";
+    }
+  }
+</script>
+
+<div class="rounded-2xl bg-white dark:bg-zinc-900 p-5 shadow col-span-3">
+  <div class="flex w-full justify-between items-start mb-4">
+    <div class="text-zinc-700 dark:text-zinc-300 flex items-center gap-2">
+      <Icon icon="solar:settings-bold-duotone" class="w-6 h-6" />
+      <p class="font-semibold text-sm uppercase tracking-wider">Runtime config</p>
+    </div>
+    <div class={`${renderBadge(runtime.stage)} font-semibold font-title text-sm px-3 py-1 rounded-full`}>
+      {runtime.stage}
+    </div>
+  </div>
+  <div class="w-full">
+    <div class="grid grid-cols-2 gap-4">
+      {#if runtime.hardware}
+        <div class="border rounded-lg border-zinc-300/70 dark:border-zinc-800 p-3 flex items-center justify-start gap-3">
+          <Icon icon="solar:diskette-bold-duotone" class="w-6 h-6 text-gray-500 dark:text-white" />
+          <p class="uppercase text-sm text-black/60 dark:text-zinc-300 font-semibold font-title truncate">
+            Hardware: {runtime.hardware.current}
+          </p>
+        </div>
+      {/if}
+      {#if runtime.storage}
+        <div class="border rounded-lg border-zinc-300/70 dark:border-zinc-800 p-3 flex items-center justify-start gap-3">
+          <Icon icon="solar:cloud-storage-bold-duotone" class="w-6 h-6 text-gray-500 dark:text-white" />
+          <p class="uppercase text-sm text-black/60 dark:text-zinc-300 font-semibold font-title truncate">
+            Storage: {runtime.storage.current}
+          </p>
+        </div>
+      {/if}
+    </div>
+  </div>
+</div>

src/lib/components/result/space/Space.svelte

@@ -1,15 +1,28 @@
 <script lang="ts">
 	import Author from "./Author.svelte";
 	import Overview from "./Overview.svelte";
+	import Runtime from "./Runtime.svelte";
 	import Likers from "./likers/Likers.svelte";
 
   export let data: Record<string, any> | null = {};
 
+  $: formattedData = {
+    ...data?.cardData,
+    createdAt: data?.createdAt
+  }
+
   $: console.log(data);
 </script>
 
   <div class="grid grid-cols-1 lg:grid-cols-5 gap-8 mt-8">
-    <Overview {...data?.cardData} />
-    <Author author={data?.author}/>
-    <Likers likers={data?.likers} />
+    <Overview {...formattedData } />
+    {#if data?.author}
+      <Author author={data?.author} />
+    {/if}
+    {#if data?.likers}
+      <Likers likers={data?.likers} />
+    {/if}
+    {#if data?.runtime}
+      <Runtime runtime={data?.runtime} />
+    {/if}
   </div>

src/lib/components/result/space/likers/Likers.svelte

@@ -1,10 +1,10 @@
 <!-- enzostvs/stable-diffusion-tpu -->
 <script lang="ts">
-  // import { Chart, type EChartsOptions } from 'svelte-echarts'
+  import { Chart, type EChartsOptions } from 'svelte-echarts'
   import Icon from "@iconify/svelte";
 	import type { Liker } from "$lib/types";
   
-  export let likers: Record<string, Array<Liker>> | undefined;
+  export let likers: Record<string, Array<Liker>>;
   
   let tab: "data-visualization" | "global" = "global";
   const tabs = [{
@@ -21,35 +21,52 @@
     tab = id as "data-visualization" | "global"
   }
 
-  // const options: EChartsOptions = {
-  //   xAxis: {
-  //     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-  //     type: 'category',
-  //   },
-  //   yAxis: {
-  //     type: 'value',
-  //   },
-  //   series: [
-  //     {
-  //       data: [820, 932, 901, 934, 1290, 1330, 1320],
-  //       type: 'bar',
-  //     },
-  //   ],
-  // }
+  const options: EChartsOptions = {
+    xAxis: {
+      data: Object.keys(likers ?? []),
+      type: 'category',
+    },
+    yAxis: {
+      type: 'value',
+    },
+    color: ['#14b8a6'],
+    series: [
+      {
+        data: Object.keys(likers ?? []).map((key) => likers?.[key].length ?? 0),
+        type: 'bar',
+      },
+    ],
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+    },
+  }
+
+  const formatBigNumber = (num: number) => {
+    if (num < 1000) return num;
+    if (num < 1000000) return `${(num / 1000).toFixed(1)}K`;
+    if (num < 1000000000) return `${(num / 1000000).toFixed(1)}M`;
+    return `${(num / 1000000000).toFixed(1)}B`;
+  }
 </script>
 
-<div class="rounded-2xl bg-white p-5 shadow col-span-3">
-  <div class="text-zinc-700 flex items-center gap-2 mb-4">
+<div class="rounded-2xl bg-white dark:bg-zinc-900 p-5 shadow col-span-3">
+  <div class="text-zinc-700 dark:text-zinc-300 flex items-center gap-2 mb-4">
     <Icon icon="solar:heart-angle-bold-duotone" class="w-6 h-6" />
     <p class="font-semibold text-sm uppercase tracking-wider">Likes</p>
   </div>
   <div class="flex items-center justify-start gap-3 mb-5">
     {#each tabs as { id, label, icon }}
       <button
-        class="flex items-center justify-center gap-2 px-4 py-2 border-2 border-zinc-200 rounded-lg font-title text-sm font-semibold uppercase text-black/60"
+        class="flex items-center justify-center gap-2 px-4 py-2 border-2 border-zinc-200 dark:border-zinc-700 dark:text-zinc-200 rounded-lg font-title text-sm font-semibold uppercase text-black/60"
         class:bg-indigo-100={tab === id}
         class:text-indigo-600={tab === id}
         class:!border-indigo-100={tab === id}
+        class:dark:bg-indigo-100={tab === id}
+        class:dark:text-indigo-600={tab === id}
+        class:dark:!border-indigo-100={tab === id}
         on:click={() => handleSelectTab(id)}
       >
         <Icon icon={icon} class="w-6 h-6" />
@@ -58,13 +75,27 @@
     {/each}
   </div>
   {#if tab === "global"}
-    <div class="bg-red-50">
-      global
+    <div class="">
+      {#each Object.keys(likers ?? []) as year}
+        <p class="uppercase text-zinc-600 dark:text-zinc-400 font-semibold font-title text-sm">{year}</p>
+        <div class="flex items-center mt-3 flex-wrap">
+          {#each likers[year].slice(0, 100) as like}
+            <div class="flex items-center -mr-1.5 -mt-1.5 relative cursor-pointer group">
+              <img src={like.avatarUrl.includes(".svg") ? `https://huggingface.co${like.avatarUrl}` : like.avatarUrl} alt={like.fullname} class="w-8 h-8 rounded-full ring-[1px] ring-white dark:ring-zinc-900" />
+              <p class="font-title absolute left-full top-0 bg-zinc-100 shadow rounded px-2 py-0.5 text-zinc-600 text-xs opacity-0 group-hover:opacity-100 pointer-events-none z-10 whitespace-nowrap translate-y-1/2">{like.fullname}</p>
+            </div>
+          {/each}
+          {#if likers[year].length > 100}
+            <div class="w-8 h-8 flex items-center justify-center border rounded-full border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 z-10">
+              <p class="text-xs font-title text-zinc-700">+{formatBigNumber(likers[year].length - 15)}</p>
+            </div>
+          {/if}
+        </div>
+      {/each}
     </div>
   {:else}
-    <div>
-      data-visualization
+    <div class="h-[380px] -mx-8 -my-8">
+      <Chart {options} />
     </div>
   {/if}
-  <!-- <Chart {options} /> -->
 </div>

src/routes/api/search/+server.ts

@@ -26,9 +26,9 @@ export async function POST({ request }: RequestEvent) {
     },
   });
 
-  const dataAuthor = await responseAuthor.json();
+  let dataAuthor = await responseAuthor.json();
   if (dataAuthor.error) {
-    throw error(responseAuthor.status, dataAuthor.error);
+    dataAuthor = null
   }
 
   const responseLikers = await fetch(`${env.PUBLIC_API_URL}/${body.namespace}/${body.repoId}/likers?expand[]=likeAt`, {
@@ -55,7 +55,7 @@ export async function POST({ request }: RequestEvent) {
 
   const formattedData = {
     ...data,
-    author: {
+    author: dataAuthor && {
       ...dataAuthor,
       avatarUrl: dataAuthor.avatarUrl.replace("w=200&h=200", "w=400&h=400")
     },