sentiment analysis

src/lib/components/sidebar/Sidebar.svelte

@@ -29,11 +29,11 @@
 			label: "Translation",
 			icon: "bi:translate",
 		},
-		// {
-		// 	path: "/text-generation/chat",
-		// 	label: "Chat",
-		// 	icon: "ph:chat-dots-fill",
-		// },
+		{
+			path: "/text-generation/text-analysis",
+			label: "Text Analysis",
+			icon: "carbon:phrase-sentiment",
+		},
 	];
 
 	let open: boolean = false;

src/lib/components/snippets/Curl.svelte

@@ -13,11 +13,12 @@
   let isCopied: boolean = false;
 
   const generateCurlRequestFromEndpoint = (body: Record<string, any>) => {
+    const b = { ...body };
     const fullpath = `${env.PUBLIC_INFERENCE_API_URL}/models/${endpoint}`;
-    delete body.model
+    delete b.model
     return `curl -X POST "${fullpath}" \\
   -H ${JSON.stringify(headers)}
-  -d ${JSON.stringify(body)}
+  -d ${JSON.stringify(b)}
 `;
   };
 

src/lib/components/snippets/Javascript.svelte

@@ -12,15 +12,16 @@
   let isCopied: boolean = false;
 
   const generateCurlRequestFromEndpoint = (body: Record<string, any>) => {
+    const b = { ...body };
     const fullpath = `${env.PUBLIC_INFERENCE_API_URL}/models/${endpoint}`;
-    delete body.model
+    delete b.model
     
     return `const response = await fetch(
       "${fullpath}",
       {
         method: "POST",
         headers: ${JSON.stringify(headers)},
-        body: ${JSON.stringify(body)}
+        body: ${JSON.stringify(b)}
       }
     )`;
   };

src/lib/components/snippets/Python.svelte

@@ -12,8 +12,9 @@
   let isCopied: boolean = false;
 
   const generateCurlRequestFromEndpoint = (body: Record<string, any>) => {
+    const b = { ...body };
     const fullpath = `${env.PUBLIC_INFERENCE_API_URL}/models/${endpoint}`;
-    delete body.model
+    delete b.model
 
     const removeEmptyValues = (data: Record<string, any>) => {
       const formattedData = { ...data };
@@ -30,7 +31,7 @@
       return formattedData;
     };
 
-    const formattedBody = removeEmptyValues(body ?? {});
+    const formattedBody = removeEmptyValues(b ?? {});
     return `import requests
 response = requests.post(
   "${fullpath}",

src/lib/components/text-analysis/Form.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import Prompt from "$lib/components/Prompt.svelte";
+
+  export let form: Record<string, any>;
+  export let onForm: (form: Record<string, any>) => void;
+</script>
+
+<Prompt
+  value={form.inputs}
+  placeholder="Enter your text here"
+  onChange={(inputs) => onForm({ ...form, inputs })}
+/>

src/lib/components/text-analysis/Preview.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  export let body: Record<string, any>;
+  export let res: Record<string, any>;
+
+  console.log(body, res)
+
+</script>
+
+<div class="text-white p-6 font-code text-xs !leading-loose">
+  {#if res?.[0]?.translation_text}
+  {res[0]?.translation_text}
+  {/if}
+</div>

src/lib/components/text-analysis/Response.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import Icon from '@iconify/svelte';
+  import Highlight, { LineNumbers } from "svelte-highlight";
+  import json from "svelte-highlight/languages/json";
+  import "svelte-highlight/styles/night-owl.css"
+  
+  import Loading from "$lib/components/Loading.svelte"
+  import CodePreview from '$lib/components/CodePreview.svelte';
+	import Preview from '$lib/components/text-generation/Preview.svelte';
+
+  export let loading: boolean;
+  export let res: any;
+  export let form: Record<string, any>;
+  export let body: Record<string, any>;
+  export let endpoint: string;
+
+  let tab = 0
+
+  $: code = JSON.stringify(res ?? {}, null, 2)
+
+  let TABS = [
+  {
+    label: "Formatted preview",
+    icon: "material-symbols:preview",
+  },
+  {
+    label: "Code example",
+    icon: "carbon:code",
+  },
+];
+</script>
+
+<div class="lg:h-screen flex flex-col relative">
+  <div class="w-full jsonResponse relative">
+    <div class="bg-slate-950 w-full uppercase px-5 py-4 text-zinc-400 text-sm font-semibold border-b border-slate-900 flex items-center justify-start gap-2">
+      <Icon icon="carbon:json" class="w-5 h-5" />
+      Response
+    </div>
+    <Highlight language={json} {code}>
+    </Highlight>
+    {#if loading}
+      <Loading>
+        <p class="text-slate-400 text-lg mt-4">Processing...</p>
+      </Loading>
+    {/if}
+  </div>
+  <div class="bg-slate-950 overflow-auto flex-1">
+    <div class="w-full uppercase text-zinc-400 text-sm font-semibold border-t border-slate-900 flex items-start sticky top-0 bg-slate-950">
+      {#each TABS as { label, icon }, idx }
+      <button
+        class={`flex items-center justify-start gap-2 px-5 border-r py-4 border-slate-900 bg-slate-900/40 cursor-pointer hover:bg-slate-900/60 transition-all duration-200 ${tab === idx ? '!bg-slate-950 hover:bg-slate-900/40' : 'border-b'}`}
+        on:click={() => tab = idx}
+      >
+        <Icon icon={icon} class="w-5 h-5" />
+        {label}
+      </button>
+      {/each}
+      <div class="flex flex-1 w-full pointer-events-none text-slate-950 border-b border-slate-900 h-[53px] bg-slate-900/40"></div>
+    </div>
+    {#if tab === 0}
+      <Preview body={body} res={res} />
+      {:else if tab === 1}
+      <CodePreview body={form} endpoint={endpoint} />
+    {/if}
+  </div>
+</div>

src/lib/components/text-generation/Preview.svelte

@@ -2,11 +2,24 @@
   export let body: Record<string, any>;
   export let res: Record<string, any>;
 
-  console.log(body)
+  
+  $: progressions = res?.flat()
+  
+  
+  $: console.log(progressions, body)
 </script>
 
-<div class="text-white p-6 font-code text-xs !leading-loose">
-  {#if res?.[0]?.translation_text}
-  {res[0]?.translation_text}
-  {/if}
+<div class="text-white p-6 font-code text-xs !leading-loose grid grid-cols-1 gap-3 w-full max-w-lg">
+  "{body?.inputs}"
+  {#each progressions as { label, score }}
+    <div>
+      <div class="flex items-center justify-between mb-1">
+        <p class="text-blue-500">{label}</p>
+        <p class="text-green-500 text-xs">{score}</p>
+      </div>
+      <div class="w-full rounded-full bg-slate-800 h-[8px]">
+        <div class="h-full rounded-full bg-gradient-to-r from-blue-500 to-green-500" style="width: {score * 100}%"></div>
+      </div>
+    </div>
+  {/each}
 </div>

src/routes/api/text-analysis/+server.ts

@@ -0,0 +1,34 @@
+import { error, json, type RequestEvent } from '@sveltejs/kit';
+import { env } from '$env/dynamic/private'
+
+/** @type {import('./$types').RequestHandler} */
+export async function POST({ request }: RequestEvent) {
+  const body = await request?.json().catch(() => {});
+
+  if (!body?.inputs || body.inputs === null) {
+    throw error(400, 'missing inputs value')
+  }
+
+  const response = await fetch(env.SECRET_INFERENCE_API_URL + "/models/lxyuan/distilbert-base-multilingual-cased-sentiments-student", {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${env.SECRET_HF_TOKEN}`,
+      'Content-Type': 'application/json',
+      ['x-use-cache']: "0"
+    },
+    body: JSON.stringify(body),
+  })
+  .then((res) => res.json())
+  .then((res) => res)
+  .catch((error) => {
+    return {
+      error: error.message,
+    }
+  })
+
+  if ("error" in response) {
+    error(400, response.error as string)
+  }
+
+  return json(response)
+}

src/routes/text-generation/chat/+page.svelte

@@ -1,3 +0,0 @@
-<div>
-  <p>chat example</p>
-</div>

src/routes/text-generation/text-analysis/+page.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import Response from "$lib/components/text-analysis/Response.svelte";
+  import Loading from "$lib/components/Loading.svelte";
+  import Form from "$lib/components/text-analysis/Form.svelte";
+  
+  let loading: boolean = false;
+  let data: Record<string, any> = {}
+  let bodyRequest: Record<string, any> = {}
+
+  let form: Record<string, any> = {
+    inputs: null,
+    model: "lxyuan/distilbert-base-multilingual-cased-sentiments-student"
+  }
+
+  const onchange = (newForm: Record<string, any>) => form = newForm
+
+  const onsubmit = async () => {
+    if (loading) return
+    loading = true
+    const request = await fetch('/api/text-analysis', {
+      method: 'POST',
+      body: JSON.stringify(form),
+      headers: {
+        "Content-Type": "application/json"
+      }
+    })
+    const response = await request.clone().json().catch(() => ({}))
+    data = response
+    bodyRequest = form
+    loading = false
+  }
+</script>
+
+<main class="min-h-screen w-full grid grid-cols-1 lg:grid-cols-2">
+  <div class="p-6 lg:p-10 w-full flex flex-col gap-6 lg:overflow-auto lg:h-screen">
+    <Form form={form} onForm={onchange} />
+    <div class="flex justify-end">
+      <button
+        class="w-full bg-gradient-to-r from-slate-900/50 to-slate-900 border border-slate-800/40 text-white rounded-lg text-base transition-all duration-200 leading-relaxed outline-none relative py-3 px-6"
+        disabled={loading}
+        on:click={onsubmit}
+        >
+        {#if loading}
+          <Loading />
+        {/if}
+        Translate
+      </button>
+    </div>
+  </div>
+  <div class="border-t lg:border-t-0 lg:border-l border-slate-900 bg-slate-950">
+    <Response loading={loading} res={data} body={bodyRequest} form={form} endpoint={form.model} />
+  </div>
+</main>

src/routes/text-generation/translation/+page.svelte

@@ -25,7 +25,6 @@
       }
     })
     const response = await request.clone().json().catch(() => ({}))
-    console.log(response)
     data = response
     bodyRequest = form
     loading = false