add translation shot

src/lib/components/Prompt.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   export let value: string;
   export let placeholder: string = "Ask me anything...";
+  export let label: string | undefined = "Prompt";
   export let onChange: (v: string) => void
 </script>
 
@@ -9,7 +10,7 @@
     for="prompt"
     class="font-sans text-slate-400 font-regular text-sm"
   >
-    Prompt:
+    {label ?? 'Prompt'}:
   </label>
   <textarea
     id="prompt"

src/lib/components/SelectModel.svelte

@@ -39,7 +39,10 @@
             height={22}
             class="rounded-full"
           />
-          <p>{selectedModel.id}</p>
+          <p>{selectedModel?.label ?? selectedModel?.id}</p>
+          {#if selectedModel?.label}
+            <p class="text-slate-400 text-xs">({selectedModel?.id})</p>
+          {/if}
         </div>
         {:else}
         <p class="opacity-70">Select a model</p>
@@ -52,7 +55,7 @@
       class:opacity-0={!open}
     >
       <div class="bg-slate-900 border border-slate-700/80 text-white p-2 font-code rounded-lg">
-        {#each items as { id, logo}}
+        {#each items as { id, logo, label }}
           <button
             class={`w-full flex items-center justify-start gap-3 p-2 cursor-pointer hover:bg-slate-800/60 rounded-lg ${selectedModel?.id === id && 'bg-slate-800/60'}`}
             on:click={() => handleSelect(id)}
@@ -64,7 +67,7 @@
               height={22}
               class="rounded-full"
             />
-            <p>{id}</p>
+            <p>{label ?? id}</p>
           </button>
         {/each}
       </div>

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

@@ -6,8 +6,7 @@
 </script>
 
 <div class="text-white p-6 font-code text-xs !leading-loose">
-  {body.inputs ?? "No input provided"}
-  {#if res?.[0]?.generated_text}
-  <span>{res[0]?.generated_text?.replace(body?.inputs, "")}</span>
+  {#if res?.[0]?.translation_text}
+  {res[0]?.translation_text}
   {/if}
 </div>

src/lib/components/translation/Form.svelte

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

src/lib/components/translation/Response.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import Icon from '@iconify/svelte';
+  import Highlight 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/utils/models.ts

@@ -20,4 +20,32 @@ export const IMAGE_GENERATIONS: Array<Model> = [
     id: "stabilityai/stable-diffusion-xl-base-1.0",
     logo: "https://aeiljuispo.cloudimg.io/v7/https://cdn-uploads.huggingface.co/production/uploads/643feeb67bc3fbde1385cc25/7vmYr2XwVcPtkLzac_jxQ.png?w=200&h=200&f=face"
   },
+]
+
+export const TRANSLATION_MODELS: Array<Model> = [
+  {
+    id: "Helsinki-NLP/opus-mt-fr-en",
+    label: "French to English",
+    logo: "https://aeiljuispo.cloudimg.io/v7/https://cdn-uploads.huggingface.co/production/uploads/1588345309691-5dd96eb166059660ed1ee413.png?w=200&h=200&f=face",
+  }, {
+    id: "Helsinki-NLP/opus-mt-en-fr",
+    label: "English to French",
+    logo: "https://aeiljuispo.cloudimg.io/v7/https://cdn-uploads.huggingface.co/production/uploads/1588345309691-5dd96eb166059660ed1ee413.png?w=200&h=200&f=face",
+  }, {
+    id: "Helsinki-NLP/opus-mt-de-en",
+    label: "German to English",
+    logo: "https://aeiljuispo.cloudimg.io/v7/https://cdn-uploads.huggingface.co/production/uploads/1588345309691-5dd96eb166059660ed1ee413.png?w=200&h=200&f=face",
+  }, {
+    id: "Helsinki-NLP/opus-mt-en-de",
+    label: "English to German",
+    logo: "https://aeiljuispo.cloudimg.io/v7/https://cdn-uploads.huggingface.co/production/uploads/1588345309691-5dd96eb166059660ed1ee413.png?w=200&h=200&f=face",
+  }, {
+    id: "Helsinki-NLP/opus-mt-es-en",
+    label: "Spanish to English",
+    logo: "https://aeiljuispo.cloudimg.io/v7/https://cdn-uploads.huggingface.co/production/uploads/1588345309691-5dd96eb166059660ed1ee413.png?w=200&h=200&f=face",
+  }, {
+    id: "Helsinki-NLP/opus-mt-en-es",
+    label: "English to Spanish",
+    logo: "https://aeiljuispo.cloudimg.io/v7/https://cdn-uploads.huggingface.co/production/uploads/1588345309691-5dd96eb166059660ed1ee413.png?w=200&h=200&f=face",
+  }
 ]

src/lib/utils/type.ts

@@ -1,4 +1,5 @@
 export interface Model {
   id: string;
   logo: string;
+  label?: string;
 }

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

@@ -0,0 +1,38 @@
+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?.model) {
+    throw error(400, 'missing model value')
+  }
+
+  if (!body?.inputs || body.inputs === null) {
+    throw error(400, 'missing inputs value')
+  }
+
+  const response = await fetch(env.SECRET_INFERENCE_API_URL + "/models/" + body.model, {
+    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/image-generation/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Form from "$lib/components/image-generation/Form.svelte";
   import Response from "$lib/components/image-generation/Response.svelte";
+  import Loading from "$lib/components/Loading.svelte";
 
   let loading: boolean = false;
   let data: string | ArrayBuffer | null = ''
@@ -21,6 +22,7 @@
   const onchange = (newForm: Record<string, any>) => form = newForm
 
   const onsubmit = async () => {
+    if (loading) return
     loading = true
     const request = await fetch('/api/image-generation', {
       method: 'POST',
@@ -46,12 +48,15 @@
 <main class="min-h-screen w-full grid 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>
+    <div class="flex justify-end">
       <button
-        class="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"
+        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}
         Submit
       </button>
     </div>

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Loading from "$lib/components/Loading.svelte";
   import Form from "$lib/components/text-generation/Form.svelte";
   import Response from "$lib/components/text-generation/Response.svelte";
 
@@ -22,6 +23,7 @@
   const onchange = (newForm: Record<string, any>) => form = newForm
 
   const onsubmit = async () => {
+    if (loading) return
     loading = true
     const request = await fetch('/api/text-generation', {
       method: 'POST',
@@ -46,6 +48,9 @@
         disabled={loading}
         on:click={onsubmit}
       >
+        {#if loading}
+          <Loading />
+        {/if}
         Submit
       </button>
     </div>

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

@@ -1,3 +1,54 @@
-<div>
-  <p>translation example</p>
-</div>
+<script lang="ts">
+  import Response from "$lib/components/translation/Response.svelte";
+  import Loading from "$lib/components/Loading.svelte";
+  import Form from "$lib/components/translation/Form.svelte";
+  
+  let loading: boolean = false;
+  let data: Record<string, any> = {}
+  let bodyRequest: Record<string, any> = {}
+
+  let form: Record<string, any> = {
+    model: "Helsinki-NLP/opus-mt-fr-en",
+    inputs: null,
+  }
+
+  const onchange = (newForm: Record<string, any>) => form = newForm
+
+  const onsubmit = async () => {
+    if (loading) return
+    loading = true
+    const request = await fetch('/api/text-generation', {
+      method: 'POST',
+      body: JSON.stringify(form),
+      headers: {
+        "Content-Type": "application/json"
+      }
+    })
+    const response = await request.clone().json().catch(() => ({}))
+    console.log(response)
+    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>