feat: show bias score on news component

This change somehow causes an lethal crash with SvelteKit sometimes.

The root cause might be this one:
nodejs/undici#1540

src/lib/components/News.svelte

@@ -1,38 +1,73 @@
 <script lang="ts">
+  import LoadingIcon from '$lib/components/LoadingIcon.svelte'
+  import type { GetBiasArgs, GetBiasResult } from '$lib/server/get-bias'
   import IconEmotionHappy from '~icons/ri/emotion-happy-line'
   import IconEmotionNormal from '~icons/ri/emotion-normal-line'
   import IconEmotionUnhappy from '~icons/ri/emotion-unhappy-line'
+  import IconGovernment from '~icons/ri/government-line'
 
   export let title: string
   export let description: string
   export let urlToImage: string | null
   export let publishedAt: string
+  export let content: string
   export let sentimentKind: 'positive' | 'negative' | 'neutral'
   export let sentimentScore: number
+
+  $: getBias = async (): Promise<GetBiasResult['bias']> => {
+    const body: GetBiasArgs = { content }
+    const response = await fetch('api/bias', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(body),
+    })
+    return response.json().then(r => r.bias)
+  }
 </script>
 
 <section
   class="flex m-2 rounded-2xl bg-base-200 transition group group-hover:bg-base-300"
 >
-  <div
-    class="flex flex-col gap-1 justify-center items-center p-2 lg:flex-row lg:gap-5"
-  >
-    <div class="flex flex-col gap-1 items-center">
+  <div class="flex gap-1 justify-center items-center p-2 lg:flex-row lg:gap-5">
+    <div class="flex flex-col gap-1 items-center w-12">
       {#if sentimentKind === 'positive'}
         <IconEmotionHappy
-          class="text-emerald-700 dark:text-emerald-400 text-lg lg:text-3xl"
+          class="text-emerald-700 dark:text-emerald-400 text-2xl lg:text-3xl flex-1"
         />
       {:else if sentimentKind === 'negative'}
         <IconEmotionUnhappy
-          class="text-rose-700 dark:text-rose-400 text-lg lg:text-3xl"
+          class="text-rose-700 dark:text-rose-400 text-2xl lg:text-3xl flex-1"
         />
       {:else}
         <IconEmotionNormal
-          class="text-neutral-700 dark:text-neutral-400 text-lg lg:text-3xl"
+          class="text-neutral-700 dark:text-neutral-400 text-2xl lg:text-3xl flex-1"
         />
       {/if}
       <span class="lg:text-lg">{(sentimentScore * 100).toFixed(1)}%</span>
     </div>
+
+    <div class="flex flex-col gap-1 items-center w-12">
+      {#await getBias()}
+        <div class="h-full max-h-16 aspect-square"><LoadingIcon /></div>
+      {:then bias}
+        {#if bias > 0}
+          <IconGovernment
+            class="text-red-500 dark:text-red-400 text-2xl lg:text-3xl flex-1"
+          />
+        {:else if bias < 0}
+          <IconGovernment
+            class="text-blue-500 dark:text-blue-400 text-2xl lg:text-3xl flex-1"
+          />
+        {:else}
+          <IconGovernment
+            class="text-neutral-700 dark:text-neutral-400 text-2xl lg:text-3xl flex-1"
+          />
+        {/if}
+        <span class="lg:text-lg">{(Math.abs(bias) * 100).toFixed(1)}%</span>
+      {:catch}
+        <p>error</p>
+      {/await}
+    </div>
   </div>
 
   <div

src/routes/article/+page.svelte

@@ -68,15 +68,15 @@
           <div class="flex flex-col items-center">
             {#if data.articleNews.sentiment.kind === 'positive'}
               <IconEmotionHappy
-                class="text-emerald-700 dark:text-emerald-400 text-lg lg:text-md flex-1"
+                class="text-emerald-700 dark:text-emerald-400 text-lg flex-1"
               />
             {:else if data.articleNews.sentiment.kind === 'negative'}
               <IconEmotionUnhappy
-                class="text-rose-700 dark:text-rose-400 text-lg lg:text-md flex-1"
+                class="text-rose-700 dark:text-rose-400 text-lg flex-1"
               />
             {:else}
               <IconEmotionNormal
-                class="text-neutral-700 dark:text-neutral-400 text-lg lg:text-md flex-1"
+                class="text-neutral-700 dark:text-neutral-400 text-lg flex-1"
               />
             {/if}
             <p>{(data.articleNews.sentiment.confidence * 100).toFixed(1)}%</p>
@@ -88,15 +88,15 @@
             <div class="flex flex-col items-center">
               {#if bias > 0}
                 <IconGovernment
-                  class="text-red-500 dark:text-red-400 text-lg lg:text-md flex-1"
+                  class="text-red-500 dark:text-red-400 text-lg flex-1"
                 />
               {:else if bias < 0}
                 <IconGovernment
-                  class="text-blue-500 dark:text-blue-400 text-lg lg:text-md flex-1"
+                  class="text-blue-500 dark:text-blue-400 text-lg flex-1"
                 />
               {:else}
                 <IconGovernment
-                  class="text-neutral-700 dark:text-neutral-400 text-lg lg:text-md flex-1"
+                  class="text-neutral-700 dark:text-neutral-400 text-lg flex-1"
                 />
               {/if}
               <p>{(Math.abs(bias) * 100).toFixed(1)}%</p>
@@ -141,6 +141,7 @@
               description={news.description}
               urlToImage={news.urlToImage}
               publishedAt={news.publishedAt}
+              content={news.content}
               sentimentKind={news.sentiment.kind}
               sentimentScore={news.sentiment.confidence}
             /></a

src/routes/search/+page.svelte

@@ -22,6 +22,7 @@
             description={news.description}
             urlToImage={news.urlToImage}
             publishedAt={news.publishedAt}
+            content={news.content}
             sentimentKind={news.sentiment.kind}
             sentimentScore={news.sentiment.confidence}
           /></a