DocSum UI support

DocSum/ui/svelte/src/lib/doc.svelte

@@ -20,7 +20,7 @@
   import DropFile from "./dropFile.svelte";
   import SpinLoading from "./assets/spinLoading.svelte";
   import { kb_id, loading } from "./shared/Store.js";
-  import { Textarea } from "flowbite-svelte";
+  import { Textarea, Select } from "flowbite-svelte";
   import { createEventDispatcher } from "svelte";
   import { getNotificationsContext } from "svelte-notifications";
 
@@ -31,6 +31,22 @@
   let message = "";
   let formModal = false;
   let currentIdx = 1;
+  let languageOption = "auto";
+  let summaryType = "auto";
+
+  const languageOptions = [
+    { value: "auto", name: "Auto" },
+    { value: "en", name: "English" },
+    { value: "zh", name: "Chinese" }
+  ];
+
+  const summaryTypeOptions = [
+    { value: "auto", name: "Auto" },
+    { value: "stuff", name: "Stuff" },
+    { value: "truncate", name: "Truncate" },
+    { value: "map_reduce", name: "Map Reduce" },
+    { value: "refine", name: "Refine" }
+  ];
 
   function togglePanel(index: number) {
     if (activePanel === index) {
@@ -72,15 +88,37 @@
     } else {
       loading.set(true);
       if ($kb_id !== "") {
-        dispatch("generateSummary", { mode: "file", value: $kb_id });
+        dispatch("generateSummary", {
+          mode: "file",
+          value: $kb_id,
+          languageOption,
+          summaryType
+        });
       } else if (message !== "") {
-        dispatch("generateSummary", { mode: "text", value: message });
+        dispatch("generateSummary", {
+          mode: "text",
+          value: message,
+          languageOption,
+          summaryType
+        });
       }
     }
   }
 </script>
 
 <div class="w-full h-full relative">
+  <!-- Language and Summary Type Options at the top -->
+  <div class="mb-6 grid grid-cols-2 gap-4">
+    <div>
+      <Label for="language-select" class="mb-2 text-sm font-medium text-gray-700">Language Option</Label>
+      <Select id="language-select" bind:value={languageOption} items={languageOptions} />
+    </div>
+    <div>
+      <Label for="summary-type-select" class="mb-2 text-sm font-medium text-gray-700">Summary Type</Label>
+      <Select id="summary-type-select" bind:value={summaryType} items={summaryTypeOptions} />
+    </div>
+  </div>
+
   {#each [1, 2] as panelIndex}
     <div id="accordion-open" data-accordion="open">
       <h2 id={`accordion-open-heading-${panelIndex}`}>
@@ -139,6 +177,7 @@
       </div>
     </div>
   {/each}
+
   {#if $loading}
     <button
       type="submit"

DocSum/ui/svelte/src/lib/shared/Network.ts

@@ -16,7 +16,14 @@ import { env } from "$env/dynamic/public";
 
 const DOC_BASE_URL = env.DOC_BASE_URL;
 
-export async function fetchTextStream(query: string | Blob, params: string, file: Blob, fileName: string | undefined) {
+export async function fetchTextStream(
+  query: string | Blob,
+  params: string,
+  file: Blob,
+  fileName: string | undefined,
+  languageOption: string = "auto",
+  summaryType: string = "auto",
+) {
   const url = `${DOC_BASE_URL}`; // Ensure the URL is constructed correctly
   const formData = new FormData();
 
@@ -29,10 +36,14 @@ export async function fetchTextStream(query: string | Blob, params: string, file
     formData.append("files", file, fileName);
     formData.append("messages", query);
     formData.append("type", "text");
+    formData.append("language_option", languageOption);
+    formData.append("summary_type", summaryType);
   } else if (params === "text") {
     formData.append("files", file, fileName);
     formData.append("messages", query);
     formData.append("type", "text");
+    formData.append("language_option", languageOption);
+    formData.append("summary_type", summaryType);
   }
 
   // Initiate the POST request to upload the file

DocSum/ui/svelte/src/routes/+page.svelte

@@ -34,14 +34,21 @@
   const callTextStream = async (
     query: string,
     urlSuffix: string,
-    params: string
+    params: string,
+    languageOption: string = "auto",
+    summaryType: string = "auto"
   ) => {
+
+    console.log('callTextStream', languageOption, summaryType);
+
     // Fetch the stream
     const eventStream = await fetchTextStream(
       query,
       params,
       $uploadFile,
-      $uploadFilesName
+      $uploadFilesName,
+      languageOption,
+      summaryType
     );
 
     // Process the stream as an async iterator
@@ -61,10 +68,24 @@
   };
 
   async function handleGenerateSummary(e) {
+    console.log('handleGenerateSummary', e);
+
     if (e.detail.mode === "file") {
-      await callTextStream(e.detail.value, "/file_summarize", "doc_id");
+      await callTextStream(
+        e.detail.value,
+        "/file_summarize",
+        "doc_id",
+        e.detail.languageOption,
+        e.detail.summaryType
+      );
     } else if (e.detail.mode === "text") {
-      await callTextStream(e.detail.value, "/text_summarize", "text");
+      await callTextStream(
+        e.detail.value,
+        "/text_summarize",
+        "text",
+        e.detail.languageOption,
+        e.detail.summaryType
+      );
     }
   }