From 89e02e893efa23ec280fdbf09edff6a513be56ba Mon Sep 17 00:00:00 2001
From: Markus Schuettler <markus.schuettler@tngtech.com>
Date: Tue, 26 Nov 2024 14:40:47 +0100
Subject: [PATCH] Implement review comments

---
 WebUI/src/components/AddLLMDialog.vue   | 108 +++++++++++-------------
 WebUI/src/components/ui/input/Input.vue |   2 +-
 WebUI/src/views/AppSettings.vue         |   2 +-
 3 files changed, 52 insertions(+), 60 deletions(-)

diff --git a/WebUI/src/components/AddLLMDialog.vue b/WebUI/src/components/AddLLMDialog.vue
index 61ca1beb..a80d68d2 100644
--- a/WebUI/src/components/AddLLMDialog.vue
+++ b/WebUI/src/components/AddLLMDialog.vue
@@ -1,21 +1,22 @@
 <template>
-    <div class="dialog-container z-10">
-        <div class="dialog-mask absolute left-0 top-0 w-full h-full bg-black/55 flex justify-center items-center">
-            <div class="py-10 px-20 w-500px flex flex-col items-center justify-center bg-gray-600 rounded-3xl gap-6 text-white"
-                :class="{ 'animate-scale-in': animate }">
-              <p v-html= "i18nState.REQUEST_LLM_MODEL_NAME"></p>
-              <textarea class="rounded-xl border border-color-spilter flex-auto w-full h-auto resize-none" rows="1"
-                        :placeholder="languages.COM_LLM_HF_PROMPT" v-model="modelRequest" @keydown="fastGenerate"></textarea>
-              <p v-show = "addModelError" style="color: #F44336;">{{ addModelErrorMessage }}</p>
-              <div class="flex justify-center items-center gap-9">
-                <button @click="closeAdd" class="bg-color-control-bg  py-1 px-4 rounded">{{ i18nState.COM_CLOSE }}</button>
-                <button @click="addModel" class="bg-color-control-bg  py-1 px-4 rounded">{{ i18nState.COM_ADD }}</button>
-              </div>
-            </div>
+  <div class="dialog-container z-10">
+    <div class="dialog-mask absolute left-0 top-0 w-full h-full bg-black/55 flex justify-center items-center">
+      <div
+        class="py-10 px-20 w-500px flex flex-col items-center justify-center bg-gray-600 rounded-3xl gap-6 text-white"
+        :class="{ 'animate-scale-in': animate }">
+        <p v-html="i18nState.REQUEST_LLM_MODEL_NAME"></p>
+        <Input :placeholder="languages.COM_LLM_HF_PROMPT" v-model="modelRequest" @keyup.enter="addModel"></Input>
+        <p v-show="addModelError" style="color: #F44336;">{{ addModelErrorMessage }}</p>
+        <div class="flex justify-center items-center gap-9">
+          <button @click="closeAdd" class="bg-color-control-bg  py-1 px-4 rounded">{{ i18nState.COM_CLOSE }}</button>
+          <button @click="addModel" class="bg-color-control-bg  py-1 px-4 rounded">{{ i18nState.COM_ADD }}</button>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 <script setup lang="ts">
+import { Input } from '@/components/ui/input'
 import { useGlobalSetup } from '@/assets/js/store/globalSetup';
 import { useI18N } from '@/assets/js/store/i18n';
 import { useModels, userModels } from '@/assets/js/store/models';
@@ -29,68 +30,59 @@ const addModelErrorMessage = ref("")
 const addModelError = ref(false);
 const animate = ref(false);
 const emits = defineEmits<{
-    (e: "close"): void,
-    (e: "callCheckModel"): void,
-    (e: "showWarning", warning : string, func : () => void): void
+  (e: "close"): void,
+  (e: "callCheckModel"): void,
+  (e: "showWarning", warning: string, func: () => void): void
 }>();
 
-
-function fastGenerate(e: KeyboardEvent) {
-  if (e.code == "Enter") {
-    if (e.ctrlKey || e.shiftKey || e.altKey) {
-      modelRequest.value += "\n";
-    } else {
-      e.preventDefault();
-      if (modelRequest.value !== "") {
-        addModel()
-      }
-    }
-  }
-}
-
 function onShow() {
   animate.value = true;
 }
 
 async function addModel() {
   const previousModel = globalSetup.modelSettings.llm_model
-  const is_in_models = models.models.some((model) => model.name === modelRequest.value)
-
-  if (!is_in_models) {
-    const url_exists = await urlExists(modelRequest.value);
-    if (url_exists) {
-      addModelError.value = false
-      const is_llm = await isLLM(modelRequest.value);
-      if (!is_llm) {
-        emits("showWarning", i18nState.WARNING_MODEL_TYPE_WRONG, async() => {
-          await registerModel();
-          emits("callCheckModel");
-          closeAdd();
-        });
-      } else {
-        await registerModel()
-        emits("callCheckModel");
-        closeAdd();
-      }
-    } else {
-        globalSetup.modelSettings.llm_model = previousModel
-        addModelErrorMessage.value = i18nState.ERROR_REPO_NOT_EXISTS
-        addModelError.value = true;
-      }
-  } else {
-    globalSetup.modelSettings.llm_model = previousModel
-    addModelErrorMessage.value = i18nState.ERROR_ALREADY_IN_MODELS
+  const isInModels = models.models.some((model) => model.name === modelRequest.value)
+
+  const cancelAndShowWarning = (text: string) => {
+    globalSetup.modelSettings.llm_model = previousModel;
+    addModelErrorMessage.value = text;
     addModelError.value = true;
   }
+
+  if (isInModels) {
+    cancelAndShowWarning(i18nState.ERROR_ALREADY_IN_MODELS);
+    return;
+  }
+
+  const urlExists = await checkIfUrlExists(modelRequest.value);
+  if (!urlExists) {
+    cancelAndShowWarning(i18nState.ERROR_REPO_NOT_EXISTS);
+    return;
+  }
+
+  addModelError.value = false;
+
+  const isLlm = await isLLM(modelRequest.value);
+  const downloadNewModel = async () => {
+    await registerModel();
+    emits("callCheckModel");
+    closeAdd();
+  };
+
+  if (!isLlm) {
+    emits("showWarning", i18nState.WARNING_MODEL_TYPE_WRONG, downloadNewModel);
+  } else {
+    downloadNewModel();
+  }
 }
 
 async function registerModel() {
-  userModels.push({name: modelRequest.value, type: 'llm', downloaded: false})
+  userModels.push({ name: modelRequest.value, type: 'llm', downloaded: false })
   await models.refreshModels()
   globalSetup.modelSettings.llm_model = modelRequest.value;
 }
 
-async function urlExists(repo_id: string) {
+async function checkIfUrlExists(repo_id: string) {
   const response = await fetch(`${globalSetup.apiHost}/api/checkHFRepoExists?repo_id=${repo_id}`)
   const data = await response.json()
   return data.exists;
diff --git a/WebUI/src/components/ui/input/Input.vue b/WebUI/src/components/ui/input/Input.vue
index a7d9ed70..a16a1ef9 100644
--- a/WebUI/src/components/ui/input/Input.vue
+++ b/WebUI/src/components/ui/input/Input.vue
@@ -20,5 +20,5 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 </script>
 
 <template>
-  <input type="password" v-model="modelValue" :class="cn('flex h-9 w-full rounded-md border bg-[var(--textbox-bg)] px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 focus-visible:outline-none focus-visible:border-[var(--color-active)] disabled:cursor-not-allowed disabled:opacity-50 ', props.class)">
+  <input v-model="modelValue" :class="cn('flex h-9 w-full rounded-md border bg-[var(--textbox-bg)] px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 focus-visible:outline-none focus-visible:border-[var(--color-active)] disabled:cursor-not-allowed disabled:opacity-50 ', props.class)">
 </template>
diff --git a/WebUI/src/views/AppSettings.vue b/WebUI/src/views/AppSettings.vue
index 7a389cec..54b3d98a 100644
--- a/WebUI/src/views/AppSettings.vue
+++ b/WebUI/src/views/AppSettings.vue
@@ -36,7 +36,7 @@
                 <div class="flex flex-col gap-3">
                     <p>{{ languages.SETTINGS_MODEL_HUGGINGFACE_API_TOKEN }}</p>
                     <div class="flex flex-col items-start gap-1">
-                        <Input v-model="models.hfToken" :class="{ 'border-red-500': models.hfToken && !models.hfTokenIsValid }"/>
+                        <Input type="password" v-model="models.hfToken" :class="{ 'border-red-500': models.hfToken && !models.hfTokenIsValid }"/>
                         <div class="text-xs text-red-500 select-none" :class="{'opacity-0': !(models.hfToken && !models.hfTokenIsValid)}">{{ languages.SETTINGS_MODEL_HUGGINGFACE_INVALID_TOKEN_TEXT }}</div>
                     </div>
                 </div>