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

<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}
        Analyze
      </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>