From d6689e7e6a7cfcb0306b6dc2af77637aaa0c49ea Mon Sep 17 00:00:00 2001
From: julianbollig <julian.bollig@tngtech.com>
Date: Thu, 14 Nov 2024 18:05:56 +0100
Subject: [PATCH 01/10] 26 - Added + button and simple pop-up structure;
 connection to download panel still missing

Signed-off-by: julianbollig <julian.bollig@tngtech.com>
---
 WebUI/src/App.vue                     |  17 +-
 WebUI/src/assets/i18n/en-US.json      |   3 +
 WebUI/src/components/AddLLMDialog.vue | 277 ++++++++++++++++++++++++++
 WebUI/src/views/Answer.vue            |  27 ++-
 4 files changed, 319 insertions(+), 5 deletions(-)
 create mode 100644 WebUI/src/components/AddLLMDialog.vue

diff --git a/WebUI/src/App.vue b/WebUI/src/App.vue
index 8cce1c57..d24f1cfb 100644
--- a/WebUI/src/App.vue
+++ b/WebUI/src/App.vue
@@ -66,17 +66,18 @@
         @show-download-model-confirm="showDownloadModelConfirm"></create>
       <enhance v-show="activeTabIdx == 1" ref="enhanceCompt" @show-download-model-confirm="showDownloadModelConfirm">
       </enhance>
-      <answer v-show="activeTabIdx == 2" @show-download-model-confirm="showDownloadModelConfirm"></answer>
+      <answer v-show="activeTabIdx == 2" @show-download-model-confirm="showDownloadModelConfirm" @show-model-request="showModelRequest"></answer>
       <learn-more v-show="activeTabIdx == 3"></learn-more>
       <app-settings v-if="showSetting" @close="hideAppSettings" @show-download-model-confirm="showDownloadModelConfirm"></app-settings>
     </div>
     <download-dialog v-show="showDowloadDlg" ref="downloadDigCompt" @close="showDowloadDlg = false"></download-dialog>
+    <add-l-l-m-dialog v-show="showModelRequestDialog" ref="addLLMCompt" @close="showModelRequestDialog = false"></add-l-l-m-dialog>
   </main>
   <footer class="flex-none px-4 flex justify-between items-center select-none" :class="{'bg-black bg-opacity-50': theme.active === 'lnl', 'bg-black bg-opacity-80': theme.active === 'bmg', 'border-t border-color-spilter': theme.active === 'dark'}">
     <div>
       <p>Al Playground from Intel Corporation <a href="https://github.com/intel/ai-playground" target="_blank"
           class="text-blue-500">https://github.com/intel/ai-playground</a></p>
-      <p>AI Playground version: v{{ productVersion }} 
+      <p>AI Playground version: v{{ productVersion }}
         <a href="https://github.com/intel/ai-playground/blob/main/AI%20Playground%20Users%20Guide.pdf" target="_blank"
         class="text-blue-500">  User Guide</a>
 
@@ -115,6 +116,7 @@ import { useGlobalSetup } from "./assets/js/store/globalSetup";
 import DownloadDialog from '@/components/DownloadDialog.vue';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
 import { useTheme } from "./assets/js/store/theme.ts";
+import AddLLMDialog from "@/components/AddLLMDialog.vue";
 
 
 const isOpen = ref(false);
@@ -131,8 +133,12 @@ const showSettingBtn = ref<HTMLButtonElement>();
 
 const showDowloadDlg = ref(false);
 
+const showModelRequestDialog = ref(false);
+
 const downloadDigCompt = ref<InstanceType<typeof DownloadDialog>>();
 
+const addLLMCompt = ref<InstanceType<typeof AddLLMDialog>>();
+
 const fullscreen = ref(false);
 
 const platformTitle = window.envVars.platformTitle;
@@ -219,8 +225,15 @@ function postImageToEnhance(imageUrl: string) {
 
 function showDownloadModelConfirm(downList: DownloadModelParam[], success?: () => void, fail?: () => void) {
   showDowloadDlg.value = true;
+  console.log(downList)
   nextTick(() => {
     downloadDigCompt.value!.showConfirm(downList, success, fail);
+    console.log(showDowloadDlg.value)
   });
 }
+
+function showModelRequest(success?: () => void, fail?: () => void) {
+  showModelRequestDialog.value = true;
+}
+
 </script>
diff --git a/WebUI/src/assets/i18n/en-US.json b/WebUI/src/assets/i18n/en-US.json
index 06315107..1a79644b 100644
--- a/WebUI/src/assets/i18n/en-US.json
+++ b/WebUI/src/assets/i18n/en-US.json
@@ -3,9 +3,11 @@
   "COM_SETTINGS": "Settings",
   "COM_MINI": "Minimize",
   "COM_CLOSE": "Close",
+  "COM_ADD": "Add",
   "COM_RESTORE": "Restore Defaults",
   "COM_SD_PROMPT": "Input prompt to generate image",
   "COM_LLM_PROMPT": "Input prompt to generate answer",
+  "COM_LLM_HF_PROMPT": "<user>/<model>",
   "COM_CLICK_UPLOAD": "- Click To Upload Image -",
   "COM_GENERATE": "Generate",
   "COM_GENERATING": "Generating",
@@ -123,6 +125,7 @@
   "DECREASE_FONT_SIZE": "Shrink Text",
   "ANSWER_RAG_ENABLE":"Enable File Query",
   "ANSWER_RAG_OPEN_DIALOG":"Open File Uploader",
+  "REQUEST_LLM_MODEL_NAME":"Add a model of your choice from huggingface.co: ",
   "DOWNLOADER_CONFRIM_TIP":"You are missing one or more models needed to run. Would you like to download the model(s) listed below?",
   "DOWNLOADER_MODEL":"Model",
   "DOWNLOADER_INFO":"Info",
diff --git a/WebUI/src/components/AddLLMDialog.vue b/WebUI/src/components/AddLLMDialog.vue
new file mode 100644
index 00000000..7199fc1e
--- /dev/null
+++ b/WebUI/src/components/AddLLMDialog.vue
@@ -0,0 +1,277 @@
+<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-20 px-20 w-768px flex flex-col items-center justify-center bg-gray-600 rounded-3xl gap-8 text-white"
+                :class="{ 'animate-scale-in': animate }">
+              <p>{{ i18nState.REQUEST_LLM_MODEL_NAME }}</p>
+              <textarea class="rounded-xl border border-color-spilter flex-auto w-full h-auto resize-none"
+                        :placeholder="languages.COM_LLM_HF_PROMPT" v-model="modelRequest" @keydown="fastGenerate"></textarea>
+              <div class="flex justify-center items-center gap-9">
+                <button @click="cancelDownload" class="rounded border bg-red-500 py-1 px-4">{{ i18nState.COM_CANCEL }}</button>
+                <button @click="addModel" class="rounded border bg-red-500 py-1 px-4">{{ i18nState.COM_ADD }}</button>
+              </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { useGlobalSetup } from '@/assets/js/store/globalSetup';
+import ProgressBar from './ProgressBar.vue';
+import Answer from '@/views/Answer.vue';
+import { useI18N } from '@/assets/js/store/i18n';
+import { SSEProcessor } from '@/assets/js/sseProcessor';
+import { util } from '@/assets/js/util';
+import { Const } from '@/assets/js/const';
+import { toast } from '@/assets/js/toast';
+import { useModels } from '@/assets/js/store/models';
+import DownloadDialog from "@/components/DownloadDialog.vue";
+
+const i18nState = useI18N().state;
+const globalSetup = useGlobalSetup();
+const models = useModels();
+let downloding = false;
+const curDownloadTip = ref("");
+const allDownloadTip = ref("");
+const modelRequest = ref("");
+const percent = ref(0);
+const completeCount = ref(0);
+const taskPercent = ref(0);
+const showComfirm = ref(false);
+const sizeRequesting = ref(false);
+const hashError = ref(false);
+const errorText = ref("");
+let abortController: AbortController;
+const animate = ref(false);
+const emits = defineEmits<{
+    (e: "close"): void, (e: "addModel"): void
+}>();
+const readTerms = ref(false);
+const downloadList = ref<DownloadModelRender[]>([]);
+const componentAnswer = ref<InstanceType<typeof Answer>>();
+
+
+onDeactivated(() => {
+    animate.value = false;
+})
+
+function fastGenerate(e: KeyboardEvent) {
+  // ToDo: Live-Check if model available
+  if (e.code == "Enter") {
+    if (e.ctrlKey || e.shiftKey || e.altKey) {
+      modelRequest.value += "\n";
+    } else {
+      e.preventDefault();
+      addModel()
+    }
+  }
+}
+
+function addModel() {
+  // Check if model exists - if not --> error message
+  // Check if model is not already in list
+  // go to download dialog
+  globalSetup.modelSettings.llm_model =  modelRequest.value
+  // ToDo: try to connect to checkModel in a better way
+  emits("addModel");
+  // componentAnswer.value!.checkModel()
+  // ToDo: close panel when download dialog works
+}
+
+
+function dataProcess(line: string) {
+    console.log(line);
+    const dataJson = line.slice(5);
+    const data = JSON.parse(dataJson) as LLMOutCallback;
+    switch (data.type) {
+        case "download_model_progress":
+            curDownloadTip.value = `${i18nState.COM_DOWNLOAD_MODEL} ${data.repo_id}\r\n${data.download_size}/${data.total_size} ${data.percent}% ${i18nState.COM_DOWNLOAD_SPEED}: ${data.speed}`;
+            percent.value = data.percent;
+            break;
+        case "download_model_completed":
+            completeCount.value++;
+            const allTaskCount = downloadList.value.length;
+            if (completeCount.value == allTaskCount) {
+                downloding = false;
+                emits("close");
+                downloadResolve && downloadResolve();
+            } else {
+                taskPercent.value = util.toFixed(completeCount.value / allTaskCount * 100, 1);
+                percent.value = 100;
+                allDownloadTip.value = `${i18nState.DOWNLOADER_DONWLOAD_TASK_PROGRESS} ${completeCount.value}/${allTaskCount}`;
+            }
+            models.refreshModels();
+            break;
+        case "allComplete":
+            downloding = false;
+            emits("close");
+            break;
+        case "error":
+            hashError.value = true;
+            switch (data.err_type) {
+                case "not_enough_disk_space":
+                    errorText.value = i18nState.ERR_NOT_ENOUGH_DISK_SPACE.replace("{requires_space}", data.requires_space).replace("{free_space}", data.free_space);
+                    break;
+                case "download_exception":
+                    errorText.value = i18nState.ERR_DOWNLOAD_FAILED;
+                    toast.error(i18nState.ERR_DOWNLOAD_FAILED);
+                    break;
+                case "runtime_error":
+                    errorText.value = i18nState.ERROR_RUNTIME_ERROR;
+                    break;
+                case "unknow_exception":
+                    errorText.value = i18nState.ERROR_GENERATE_UNKONW_EXCEPTION;
+                    break;
+            }
+            break;
+    }
+}
+
+let downloadResolve: undefined | (() => void);
+let downloadReject: ((args: DownloadFailedParams) => void) | undefined
+
+async function showLLMRequest(success?: () => void, fail?: (args: DownloadFailedParams) => void) {
+    if (downloding) {
+        toast.error(i18nState.DOWNLOADER_CONFLICT);
+        fail && fail({ type: "conflict" })
+        return;
+    }
+    animate.value = true;
+    curDownloadTip.value = i18nState.DOWNLOADER_CONFRIM_TIP;
+    showComfirm.value = true;
+    hashError.value = false;
+    percent.value = 0;
+    downloadList.value = downList.map((item) => {
+        return { repo_id: item.repo_id, type: item.type, size: "???" }
+    });
+    readTerms.value = false;
+    downloadResolve = success;
+    downloadReject = fail;
+    try {
+        const sizeResponse = await fetch(`${globalSetup.apiHost}/api/getModelSize`, {
+            method: "POST",
+            body: JSON.stringify(downList),
+            headers: {
+                "Content-Type": "application/json"
+            }
+        });
+        const gatedResponse = await fetch(`${globalSetup.apiHost}/api/isModelGated`, {
+            method: "POST",
+            body: JSON.stringify(downList),
+            headers: {
+                "Content-Type": "application/json"
+            }
+        });
+        const sizeData = (await sizeResponse.json()) as ApiResponse & { sizeList: StringKV };
+        const gatedData = (await gatedResponse.json()) as ApiResponse & { gatedList: Record<string, boolean> };
+        for (const item of downloadList.value) {
+            item.size = sizeData.sizeList[`${item.repo_id}_${item.type}`] || "";
+            item.gated = gatedData.gatedList[item.repo_id] || false;
+        }
+        downloadList.value = downloadList.value;
+        sizeRequesting.value = false;
+    } catch (ex) {
+        fail && fail({ type: "error", error: ex });
+    }
+}
+
+function getInfoUrl(repoId: string, type: number) {
+    if (type == 4){
+        return "https://github.com/xinntao/Real-ESRGAN"
+    }
+
+    switch(repoId){
+        case "Lykon/dreamshaper-8":
+            return "https://huggingface.co/spaces/CompVis/stable-diffusion-license"
+        case "Lykon/dreamshaper-8-inpainting":
+            return "https://huggingface.co/spaces/CompVis/stable-diffusion-license"
+        case "RunDiffusion/Juggernaut-XL-v9":
+            return "https://huggingface.co/spaces/CompVis/stable-diffusion-license"
+        case "microsoft/Phi-3-mini-4k-instruct":
+            return "https://huggingface.co/microsoft/Phi-3-mini-4k-instruct/resolve/main/LICENSE"
+        case "BAAI/bge-large-en-v1.5":
+            return "https://huggingface.co/datasets/choosealicense/licenses/blob/main/markdown/mit.md"
+        case "latent-consistency/lcm-lora-sdv1-5":
+            return "https://huggingface.co/stabilityai/stable-diffusion-xl-base-1.0/blob/main/LICENSE.md"
+        case "latent-consistency/lcm-lora-sdxl":
+            return "https://huggingface.co/stabilityai/stable-diffusion-xl-base-1.0/blob/main/LICENSE.md"
+
+    }
+
+    return `https://huggingface.co/${repoId}`;
+}
+
+function getFunctionTip(type: number) {
+    switch (type) {
+        case Const.MODEL_TYPE_LLM:
+            return i18nState.DOWNLOADER_FOR_ANSWER_GENERATE;
+        case Const.MODEL_TYPE_EMBEDDING:
+            return i18nState.DOWNLOADER_FOR_RAG_QUERY;
+        case Const.MODEL_TYPE_STABLE_DIFFUSION:
+        case Const.MODEL_TYPE_LORA:
+        case Const.MODEL_TYPE_VAE:
+            return i18nState.DOWNLOADER_FOR_IMAGE_GENERATE;
+        case Const.MODEL_TYPE_INPAINT:
+            return i18nState.DOWNLOADER_FOR_INAPINT_GENERATE;
+        case Const.MODEL_TYPE_PREVIEW:
+            return i18nState.DOWNLOADER_FOR_IMAGE_PREVIEW;
+        case Const.MODEL_TYPE_ESRGAN:
+            return i18nState.DOWNLOADER_FOR_IMAGE_UPSCALE;
+    }
+}
+
+function download() {
+    downloding = true;
+    allDownloadTip.value = `${i18nState.DOWNLOADER_DONWLOAD_TASK_PROGRESS} 0/${downloadList.value.length}`;
+    percent.value = 0;
+    completeCount.value = 0;
+    abortController = new AbortController();
+    curDownloadTip.value = "";
+    fetch(`${globalSetup.apiHost}/api/downloadModel`, {
+        method: "POST",
+        body: JSON.stringify(toRaw(downloadList.value)),
+        headers: {
+            "Content-Type": "application/json",
+            ...(models.hfTokenIsValid ? { Authorization: `Bearer ${models.hfToken}` } : {})
+        },
+        signal: abortController.signal
+    }).then((response) => {
+        const reader = response.body!.getReader();
+        return new SSEProcessor(reader, dataProcess, undefined).start();
+    }).catch(ex => {
+        downloadReject && downloadReject({ type: "error", error: ex });
+        downloding = false;
+    })
+}
+
+function cancelConfirm() {
+    downloadReject && downloadReject({ type: "cancelConfrim" });
+    emits("close");
+}
+
+function confirmDownload() {
+    showComfirm.value = false;
+    hashError.value = false;
+    return download();
+}
+
+function cancelDownload() {
+    abortController?.abort();
+    fetch(`${globalSetup.apiHost}/api/stopDownloadModel`)
+    emits("close");
+    downloadReject && downloadReject({ type: "cancelDownload" });
+}
+
+
+function close() {
+    downloadReject && downloadReject({ type: "error", error: errorText.value });
+}
+
+
+defineExpose({ showLLMRequest, download });
+</script>
+<style scoped>
+table {
+    border-collapse: separate;
+    border-spacing: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/WebUI/src/views/Answer.vue b/WebUI/src/views/Answer.vue
index 89523f4b..44bfa152 100644
--- a/WebUI/src/views/Answer.vue
+++ b/WebUI/src/views/Answer.vue
@@ -104,6 +104,7 @@
                                 <model-drop-down-item :model="slotItem.item"></model-drop-down-item>
                             </template>
                         </drop-selector>
+                        <button class="svg-icon i-generate-add w-10 h-10 text-purple-500 ml-1.5" @click="addLLMModel"></button>
                         <button class="svg-icon i-refresh w-5 h-5 text-purple-500 flex-none ml-1"
                             @animationend="removeRonate360" @click="refreshLLMModles"></button>
                         <!-- <button
@@ -178,6 +179,9 @@
         <teleport to="#answerPanel" v-if="showDowloadDlg">
             <download-dialog ref="downloadDigCompt"></download-dialog>
         </teleport>
+        <teleport to="#answerPanel" v-if="showModelRequestDialog">
+            <add-l-l-m-dialog ref="addLLMDialog" @add-model="checkModel"></add-l-l-m-dialog>
+        </teleport>
     </div>
 
 </template>
@@ -187,6 +191,7 @@ import ProgressBar from "../components/ProgressBar.vue";
 import LoadingBar from "../components/LoadingBar.vue";
 import DropSelector from "@/components/DropSelector.vue";
 import DownloadDialog from "@/components/DownloadDialog.vue";
+import AddLLMDialog from "@/components/AddLLMDialog.vue";
 import ModelDropDownItem from "@/components/ModelDropDownItem.vue";
 import { useI18N } from '@/assets/js/store/i18n';
 import { toast } from '@/assets/js/toast';
@@ -222,16 +227,20 @@ let receiveOut = "";
 let chatPanel: HTMLElement;
 const markdownParser = new MarkdownParser(i18nState.COM_COPY);
 const showDowloadDlg = ref(false);
+const showModelRequestDialog = ref(false);
 const ragData = reactive({
     enable: false,
     processEnable: false,
     showUploader: false,
 });
 const downloadDigCompt = ref<InstanceType<typeof DownloadDialog>>()
+const addLLMDialog = ref<InstanceType<typeof AddLLMDialog>>()
+
 const source = ref("");
 const emits = defineEmits<{
     (e: "showDownloadModelConfirm", downloadList: DownloadModelParam[], success?: () => void, fail?: () => void): void,
-}>();
+  (e: "showModelRequest", success?: () => void, fail?: () => void): void}>();
+
 let abortContooler: AbortController | null;
 const stopping = ref(false);
 const fontSizeIndex = ref(1); // sets default to text-sm
@@ -420,9 +429,10 @@ async function newPromptGenerate() {
 }
 
 async function checkModel() {
-    return new Promise<void>(async (resolve, reject) => {
+  return new Promise<void>(async (resolve, reject) => {
         const checkList: CheckModelExistParam[] = [{ repo_id: globalSetup.modelSettings.llm_model, type: Const.MODEL_TYPE_LLM }];
         if (!(await globalSetup.checkModelExists(checkList))[0].exist) {
+          console.log(checkList)
             emits(
                 "showDownloadModelConfirm",
                 checkList,
@@ -435,6 +445,8 @@ async function checkModel() {
     });
 }
 
+
+
 async function generate(chatContext: ChatItem[]) {
     if (processing.value || chatContext.length == 0) { return; }
 
@@ -500,6 +512,15 @@ function changeLLMModel(model: Model, _: number) {
     globalSetup.applyModelSettings({ llm_model: model.name });
 }
 
+async function addLLMModel() {
+    return new Promise<void>(async (resolve, reject) => {
+      emits("showModelRequest", resolve, reject);
+    })
+
+}
+
+
+
 async function refreshLLMModles(e: Event) {
     const button = e.target as HTMLElement;
     button.classList.add("animate-ronate360");
@@ -574,5 +595,5 @@ async function enableRag() {
     ragData.processEnable = false;
 }
 
-
+defineExpose({checkModel});
 </script>
\ No newline at end of file

From 409131a15bbf186daa6869dac9bdc49dbfc22d4b Mon Sep 17 00:00:00 2001
From: marijnvg-tng <marijn.vangeest@tngtech.com>
Date: Thu, 14 Nov 2024 23:33:33 +0100
Subject: [PATCH 02/10] 26 - Implemented functioning download request from the
 'addLLMDialog' panel.

Signed-off-by: marijnvg-tng <marijn.vangeest@tngtech.com>
---
 WebUI/src/App.vue                     | 11 +++++++++--
 WebUI/src/components/AddLLMDialog.vue | 14 +++++---------
 WebUI/src/views/Answer.vue            | 11 ++++++-----
 3 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/WebUI/src/App.vue b/WebUI/src/App.vue
index d24f1cfb..7078325d 100644
--- a/WebUI/src/App.vue
+++ b/WebUI/src/App.vue
@@ -66,12 +66,12 @@
         @show-download-model-confirm="showDownloadModelConfirm"></create>
       <enhance v-show="activeTabIdx == 1" ref="enhanceCompt" @show-download-model-confirm="showDownloadModelConfirm">
       </enhance>
-      <answer v-show="activeTabIdx == 2" @show-download-model-confirm="showDownloadModelConfirm" @show-model-request="showModelRequest"></answer>
+      <answer v-show="activeTabIdx == 2" ref = "answer" @show-download-model-confirm="showDownloadModelConfirm" @show-model-request="showModelRequest"></answer>
       <learn-more v-show="activeTabIdx == 3"></learn-more>
       <app-settings v-if="showSetting" @close="hideAppSettings" @show-download-model-confirm="showDownloadModelConfirm"></app-settings>
     </div>
     <download-dialog v-show="showDowloadDlg" ref="downloadDigCompt" @close="showDowloadDlg = false"></download-dialog>
-    <add-l-l-m-dialog v-show="showModelRequestDialog" ref="addLLMCompt" @close="showModelRequestDialog = false"></add-l-l-m-dialog>
+    <add-l-l-m-dialog v-show="showModelRequestDialog" ref="addLLMCompt" @close="showModelRequestDialog = false" @call-check-model="callCheckModel"></add-l-l-m-dialog>
   </main>
   <footer class="flex-none px-4 flex justify-between items-center select-none" :class="{'bg-black bg-opacity-50': theme.active === 'lnl', 'bg-black bg-opacity-80': theme.active === 'bmg', 'border-t border-color-spilter': theme.active === 'dark'}">
     <div>
@@ -129,6 +129,8 @@ const showSetting = ref(false);
 
 const enhanceCompt = ref<InstanceType<typeof Enhance>>();
 
+const answer = ref<InstanceType<typeof Answer>>();
+
 const showSettingBtn = ref<HTMLButtonElement>();
 
 const showDowloadDlg = ref(false);
@@ -236,4 +238,9 @@ function showModelRequest(success?: () => void, fail?: () => void) {
   showModelRequestDialog.value = true;
 }
 
+function callCheckModel(){
+  answer.value!.checkModel();
+}
+
+
 </script>
diff --git a/WebUI/src/components/AddLLMDialog.vue b/WebUI/src/components/AddLLMDialog.vue
index 7199fc1e..e6b45671 100644
--- a/WebUI/src/components/AddLLMDialog.vue
+++ b/WebUI/src/components/AddLLMDialog.vue
@@ -16,15 +16,12 @@
 </template>
 <script setup lang="ts">
 import { useGlobalSetup } from '@/assets/js/store/globalSetup';
-import ProgressBar from './ProgressBar.vue';
-import Answer from '@/views/Answer.vue';
 import { useI18N } from '@/assets/js/store/i18n';
 import { SSEProcessor } from '@/assets/js/sseProcessor';
 import { util } from '@/assets/js/util';
 import { Const } from '@/assets/js/const';
 import { toast } from '@/assets/js/toast';
 import { useModels } from '@/assets/js/store/models';
-import DownloadDialog from "@/components/DownloadDialog.vue";
 
 const i18nState = useI18N().state;
 const globalSetup = useGlobalSetup();
@@ -43,11 +40,11 @@ const errorText = ref("");
 let abortController: AbortController;
 const animate = ref(false);
 const emits = defineEmits<{
-    (e: "close"): void, (e: "addModel"): void
+    (e: "close"): void,
+    (e: "callCheckModel"): void
 }>();
 const readTerms = ref(false);
 const downloadList = ref<DownloadModelRender[]>([]);
-const componentAnswer = ref<InstanceType<typeof Answer>>();
 
 
 onDeactivated(() => {
@@ -71,10 +68,9 @@ function addModel() {
   // Check if model is not already in list
   // go to download dialog
   globalSetup.modelSettings.llm_model =  modelRequest.value
-  // ToDo: try to connect to checkModel in a better way
-  emits("addModel");
-  // componentAnswer.value!.checkModel()
-  // ToDo: close panel when download dialog works
+  emits("callCheckModel");
+  // ToDo: close panel, only when download dialog works
+  emits("close")
 }
 
 
diff --git a/WebUI/src/views/Answer.vue b/WebUI/src/views/Answer.vue
index 44bfa152..1b05afa6 100644
--- a/WebUI/src/views/Answer.vue
+++ b/WebUI/src/views/Answer.vue
@@ -239,7 +239,8 @@ const addLLMDialog = ref<InstanceType<typeof AddLLMDialog>>()
 const source = ref("");
 const emits = defineEmits<{
     (e: "showDownloadModelConfirm", downloadList: DownloadModelParam[], success?: () => void, fail?: () => void): void,
-  (e: "showModelRequest", success?: () => void, fail?: () => void): void}>();
+    (e: "showModelRequest", success?: () => void, fail?: () => void): void
+}>();
 
 let abortContooler: AbortController | null;
 const stopping = ref(false);
@@ -432,7 +433,6 @@ async function checkModel() {
   return new Promise<void>(async (resolve, reject) => {
         const checkList: CheckModelExistParam[] = [{ repo_id: globalSetup.modelSettings.llm_model, type: Const.MODEL_TYPE_LLM }];
         if (!(await globalSetup.checkModelExists(checkList))[0].exist) {
-          console.log(checkList)
             emits(
                 "showDownloadModelConfirm",
                 checkList,
@@ -519,8 +519,6 @@ async function addLLMModel() {
 
 }
 
-
-
 async function refreshLLMModles(e: Event) {
     const button = e.target as HTMLElement;
     button.classList.add("animate-ronate360");
@@ -595,5 +593,8 @@ async function enableRag() {
     ragData.processEnable = false;
 }
 
-defineExpose({checkModel});
+defineExpose({
+  checkModel
+})
+
 </script>
\ No newline at end of file

From e3944b807a25d3902350fa007078092e92068edf Mon Sep 17 00:00:00 2001
From: marijnvg-tng <marijn.vangeest@tngtech.com>
Date: Mon, 18 Nov 2024 18:01:31 +0100
Subject: [PATCH 03/10] 26 - Finalizing adding additional user models
 functionality.

Signed-off-by: marijnvg-tng <marijn.vangeest@tngtech.com>
---
 WebUI/src/assets/i18n/en-US.json      |   2 +
 WebUI/src/assets/js/store/models.ts   |   6 +-
 WebUI/src/components/AddLLMDialog.vue | 252 ++++----------------------
 service/model_downloader.py           |   3 +
 service/web_api.py                    |  16 ++
 5 files changed, 66 insertions(+), 213 deletions(-)

diff --git a/WebUI/src/assets/i18n/en-US.json b/WebUI/src/assets/i18n/en-US.json
index 1a79644b..b5a28ab3 100644
--- a/WebUI/src/assets/i18n/en-US.json
+++ b/WebUI/src/assets/i18n/en-US.json
@@ -162,6 +162,8 @@
   "ERROR_RUNTIME_ERROR": "If a critical failure occurs, please restart the program and try again",
   "ERROR_GENERATE_UNKONW_EXCEPTION": "An unknown error occurred. failed to generate from model",
   "ERROR_FOLDER_NOT_EXISTS": "The specified directory does not exist",
+  "ERROR_REPO_NOT_EXISTS": "The specified repository-ID could not be found",
+  "ERROR_ALREADY_IN_MODELS": "The specified model is already in the list",
   "ERROR_ENHANCE_IMAGE_NOT_SET": "Please configure the input image to be generated",
   "ERROR_UNFOUND_GRAPHICS": "If the necessary hardware for program execution is not detected on the computer device, the program will terminate upon clicking OK.",
   "ERROR_PYTHON_BACKEND_INIT": "Backend initialization failed",
diff --git a/WebUI/src/assets/js/store/models.ts b/WebUI/src/assets/js/store/models.ts
index 7782acc1..8e3c676e 100644
--- a/WebUI/src/assets/js/store/models.ts
+++ b/WebUI/src/assets/js/store/models.ts
@@ -17,6 +17,9 @@ const predefinedModels: Model[] = [
     // { name: 'THUDM/chatglm3-6b', type: 'llm', downloaded: false },
 ]    
 
+export const userModels: Model[] = [
+]
+
 export const useModels = defineStore("models", () => {
 
     const hfToken = ref<string | undefined>(undefined);
@@ -39,9 +42,10 @@ export const useModels = defineStore("models", () => {
             ...inpaintModels.map<Model>(name => ({ name, type: 'inpaint', downloaded: true })),
             ...embeddingModels.map<Model>(name => ({ name, type: 'embedding', downloaded: true })),
         ];
+
         const notYetDownloaded = (model: Model) => !downloadedModels.map(m => m.name).includes(model.name);
 
-        models.value = [...downloadedModels, ...predefinedModels.filter(notYetDownloaded)];
+        models.value = [...downloadedModels, ...userModels, ...predefinedModels.filter(notYetDownloaded)];
         console.log(models);
 
         }
diff --git a/WebUI/src/components/AddLLMDialog.vue b/WebUI/src/components/AddLLMDialog.vue
index e6b45671..aa010f3f 100644
--- a/WebUI/src/components/AddLLMDialog.vue
+++ b/WebUI/src/components/AddLLMDialog.vue
@@ -6,8 +6,9 @@
               <p>{{ i18nState.REQUEST_LLM_MODEL_NAME }}</p>
               <textarea class="rounded-xl border border-color-spilter flex-auto w-full h-auto resize-none"
                         :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="cancelDownload" class="rounded border bg-red-500 py-1 px-4">{{ i18nState.COM_CANCEL }}</button>
+                <button @click="closeAdd" class="rounded border bg-red-500 py-1 px-4">{{ i18nState.COM_CLOSE }}</button>
                 <button @click="addModel" class="rounded border bg-red-500 py-1 px-4">{{ i18nState.COM_ADD }}</button>
               </div>
             </div>
@@ -17,34 +18,19 @@
 <script setup lang="ts">
 import { useGlobalSetup } from '@/assets/js/store/globalSetup';
 import { useI18N } from '@/assets/js/store/i18n';
-import { SSEProcessor } from '@/assets/js/sseProcessor';
-import { util } from '@/assets/js/util';
-import { Const } from '@/assets/js/const';
-import { toast } from '@/assets/js/toast';
-import { useModels } from '@/assets/js/store/models';
+import { useModels, userModels } from '@/assets/js/store/models';
 
 const i18nState = useI18N().state;
 const globalSetup = useGlobalSetup();
 const models = useModels();
-let downloding = false;
-const curDownloadTip = ref("");
-const allDownloadTip = ref("");
 const modelRequest = ref("");
-const percent = ref(0);
-const completeCount = ref(0);
-const taskPercent = ref(0);
-const showComfirm = ref(false);
-const sizeRequesting = ref(false);
-const hashError = ref(false);
-const errorText = ref("");
-let abortController: AbortController;
+const addModelErrorMessage = ref("")
+const addModelError = ref(false);
 const animate = ref(false);
 const emits = defineEmits<{
     (e: "close"): void,
     (e: "callCheckModel"): void
 }>();
-const readTerms = ref(false);
-const downloadList = ref<DownloadModelRender[]>([]);
 
 
 onDeactivated(() => {
@@ -63,207 +49,49 @@ function fastGenerate(e: KeyboardEvent) {
   }
 }
 
-function addModel() {
-  // Check if model exists - if not --> error message
-  // Check if model is not already in list
-  // go to download dialog
-  globalSetup.modelSettings.llm_model =  modelRequest.value
-  emits("callCheckModel");
-  // ToDo: close panel, only when download dialog works
-  emits("close")
-}
-
-
-function dataProcess(line: string) {
-    console.log(line);
-    const dataJson = line.slice(5);
-    const data = JSON.parse(dataJson) as LLMOutCallback;
-    switch (data.type) {
-        case "download_model_progress":
-            curDownloadTip.value = `${i18nState.COM_DOWNLOAD_MODEL} ${data.repo_id}\r\n${data.download_size}/${data.total_size} ${data.percent}% ${i18nState.COM_DOWNLOAD_SPEED}: ${data.speed}`;
-            percent.value = data.percent;
-            break;
-        case "download_model_completed":
-            completeCount.value++;
-            const allTaskCount = downloadList.value.length;
-            if (completeCount.value == allTaskCount) {
-                downloding = false;
-                emits("close");
-                downloadResolve && downloadResolve();
-            } else {
-                taskPercent.value = util.toFixed(completeCount.value / allTaskCount * 100, 1);
-                percent.value = 100;
-                allDownloadTip.value = `${i18nState.DOWNLOADER_DONWLOAD_TASK_PROGRESS} ${completeCount.value}/${allTaskCount}`;
-            }
-            models.refreshModels();
-            break;
-        case "allComplete":
-            downloding = false;
-            emits("close");
-            break;
-        case "error":
-            hashError.value = true;
-            switch (data.err_type) {
-                case "not_enough_disk_space":
-                    errorText.value = i18nState.ERR_NOT_ENOUGH_DISK_SPACE.replace("{requires_space}", data.requires_space).replace("{free_space}", data.free_space);
-                    break;
-                case "download_exception":
-                    errorText.value = i18nState.ERR_DOWNLOAD_FAILED;
-                    toast.error(i18nState.ERR_DOWNLOAD_FAILED);
-                    break;
-                case "runtime_error":
-                    errorText.value = i18nState.ERROR_RUNTIME_ERROR;
-                    break;
-                case "unknow_exception":
-                    errorText.value = i18nState.ERROR_GENERATE_UNKONW_EXCEPTION;
-                    break;
-            }
-            break;
-    }
-}
-
-let downloadResolve: undefined | (() => void);
-let downloadReject: ((args: DownloadFailedParams) => void) | undefined
-
-async function showLLMRequest(success?: () => void, fail?: (args: DownloadFailedParams) => void) {
-    if (downloding) {
-        toast.error(i18nState.DOWNLOADER_CONFLICT);
-        fail && fail({ type: "conflict" })
-        return;
-    }
-    animate.value = true;
-    curDownloadTip.value = i18nState.DOWNLOADER_CONFRIM_TIP;
-    showComfirm.value = true;
-    hashError.value = false;
-    percent.value = 0;
-    downloadList.value = downList.map((item) => {
-        return { repo_id: item.repo_id, type: item.type, size: "???" }
-    });
-    readTerms.value = false;
-    downloadResolve = success;
-    downloadReject = fail;
-    try {
-        const sizeResponse = await fetch(`${globalSetup.apiHost}/api/getModelSize`, {
-            method: "POST",
-            body: JSON.stringify(downList),
-            headers: {
-                "Content-Type": "application/json"
-            }
-        });
-        const gatedResponse = await fetch(`${globalSetup.apiHost}/api/isModelGated`, {
-            method: "POST",
-            body: JSON.stringify(downList),
-            headers: {
-                "Content-Type": "application/json"
-            }
-        });
-        const sizeData = (await sizeResponse.json()) as ApiResponse & { sizeList: StringKV };
-        const gatedData = (await gatedResponse.json()) as ApiResponse & { gatedList: Record<string, boolean> };
-        for (const item of downloadList.value) {
-            item.size = sizeData.sizeList[`${item.repo_id}_${item.type}`] || "";
-            item.gated = gatedData.gatedList[item.repo_id] || false;
-        }
-        downloadList.value = downloadList.value;
-        sizeRequesting.value = false;
-    } catch (ex) {
-        fail && fail({ type: "error", error: ex });
-    }
-}
-
-function getInfoUrl(repoId: string, type: number) {
-    if (type == 4){
-        return "https://github.com/xinntao/Real-ESRGAN"
-    }
-
-    switch(repoId){
-        case "Lykon/dreamshaper-8":
-            return "https://huggingface.co/spaces/CompVis/stable-diffusion-license"
-        case "Lykon/dreamshaper-8-inpainting":
-            return "https://huggingface.co/spaces/CompVis/stable-diffusion-license"
-        case "RunDiffusion/Juggernaut-XL-v9":
-            return "https://huggingface.co/spaces/CompVis/stable-diffusion-license"
-        case "microsoft/Phi-3-mini-4k-instruct":
-            return "https://huggingface.co/microsoft/Phi-3-mini-4k-instruct/resolve/main/LICENSE"
-        case "BAAI/bge-large-en-v1.5":
-            return "https://huggingface.co/datasets/choosealicense/licenses/blob/main/markdown/mit.md"
-        case "latent-consistency/lcm-lora-sdv1-5":
-            return "https://huggingface.co/stabilityai/stable-diffusion-xl-base-1.0/blob/main/LICENSE.md"
-        case "latent-consistency/lcm-lora-sdxl":
-            return "https://huggingface.co/stabilityai/stable-diffusion-xl-base-1.0/blob/main/LICENSE.md"
-
-    }
-
-    return `https://huggingface.co/${repoId}`;
-}
-
-function getFunctionTip(type: number) {
-    switch (type) {
-        case Const.MODEL_TYPE_LLM:
-            return i18nState.DOWNLOADER_FOR_ANSWER_GENERATE;
-        case Const.MODEL_TYPE_EMBEDDING:
-            return i18nState.DOWNLOADER_FOR_RAG_QUERY;
-        case Const.MODEL_TYPE_STABLE_DIFFUSION:
-        case Const.MODEL_TYPE_LORA:
-        case Const.MODEL_TYPE_VAE:
-            return i18nState.DOWNLOADER_FOR_IMAGE_GENERATE;
-        case Const.MODEL_TYPE_INPAINT:
-            return i18nState.DOWNLOADER_FOR_INAPINT_GENERATE;
-        case Const.MODEL_TYPE_PREVIEW:
-            return i18nState.DOWNLOADER_FOR_IMAGE_PREVIEW;
-        case Const.MODEL_TYPE_ESRGAN:
-            return i18nState.DOWNLOADER_FOR_IMAGE_UPSCALE;
-    }
-}
-
-function download() {
-    downloding = true;
-    allDownloadTip.value = `${i18nState.DOWNLOADER_DONWLOAD_TASK_PROGRESS} 0/${downloadList.value.length}`;
-    percent.value = 0;
-    completeCount.value = 0;
-    abortController = new AbortController();
-    curDownloadTip.value = "";
-    fetch(`${globalSetup.apiHost}/api/downloadModel`, {
-        method: "POST",
-        body: JSON.stringify(toRaw(downloadList.value)),
-        headers: {
-            "Content-Type": "application/json",
-            ...(models.hfTokenIsValid ? { Authorization: `Bearer ${models.hfToken}` } : {})
-        },
-        signal: abortController.signal
-    }).then((response) => {
-        const reader = response.body!.getReader();
-        return new SSEProcessor(reader, dataProcess, undefined).start();
-    }).catch(ex => {
-        downloadReject && downloadReject({ type: "error", error: ex });
-        downloding = false;
-    })
+async function addModel() {
+  const previousModel = globalSetup.modelSettings.llm_model
+  const url_exists = await urlExists(modelRequest.value);
+
+  const is_in_models = models.models.some((model) => model.name === modelRequest.value)
+
+  if (url_exists && !is_in_models) {
+    userModels.push({ name: modelRequest.value, type: 'llm', downloaded: false })
+    await models.refreshModels()
+    console.log(models.models)
+    globalSetup.modelSettings.llm_model = modelRequest.value;
+    emits("callCheckModel");
+    emits("close")
+  } else if (is_in_models) {
+    globalSetup.modelSettings.llm_model = previousModel
+    addModelErrorMessage.value = i18nState.ERROR_ALREADY_IN_MODELS
+    addModelError.value = true;
+  } else {
+    globalSetup.modelSettings.llm_model = previousModel
+    addModelErrorMessage.value = i18nState.ERROR_REPO_NOT_EXISTS
+    addModelError.value = true;
+  }
 }
 
-function cancelConfirm() {
-    downloadReject && downloadReject({ type: "cancelConfrim" });
-    emits("close");
-}
 
-function confirmDownload() {
-    showComfirm.value = false;
-    hashError.value = false;
-    return download();
-}
+async function urlExists(repo_id: string) {
+  const response = await fetch(`${globalSetup.apiHost}/api/checkURLExists`, {
+    method: "POST",
+    body: JSON.stringify(repo_id),
+    headers: {
+      "Content-Type": "application/json"
+    }})
 
-function cancelDownload() {
-    abortController?.abort();
-    fetch(`${globalSetup.apiHost}/api/stopDownloadModel`)
-    emits("close");
-    downloadReject && downloadReject({ type: "cancelDownload" });
+  const data = await response.json()
+  return data.exists;
 }
 
-
-function close() {
-    downloadReject && downloadReject({ type: "error", error: errorText.value });
+function closeAdd() {
+  addModelError.value = false;
+  modelRequest.value = "";
+  emits("close");
 }
 
-
-defineExpose({ showLLMRequest, download });
 </script>
 <style scoped>
 table {
diff --git a/service/model_downloader.py b/service/model_downloader.py
index 538da864..e552251d 100644
--- a/service/model_downloader.py
+++ b/service/model_downloader.py
@@ -83,6 +83,9 @@ def __init__(self, hf_token=None) -> None:
         self.thread_lock = Lock()
         self.hf_token = hf_token
 
+    def probe_url(self, repo_id: str):
+        model_info(repo_id)
+
     def is_gated(self, repo_id: str):
         try:
             info = model_info(repo_id)
diff --git a/service/web_api.py b/service/web_api.py
index 3ac03ce9..ac1a77b1 100644
--- a/service/web_api.py
+++ b/service/web_api.py
@@ -66,6 +66,7 @@
 import rag
 import model_config
 from model_downloader import HFPlaygroundDownloader
+import huggingface_hub as hf
 from psutil._common import bytes2human
 import traceback
 
@@ -195,6 +196,21 @@ def check_model_exist():
         result_list.append({"repo_id": repo_id, "type": type, "exist": exist})
     return jsonify({"code": 0, "message": "success", "exists": result_list})
 
+@app.route("/api/checkURLExists", methods=["POST"])
+def check_url_exists():
+    address = request.get_json()
+    downloader = HFPlaygroundDownloader()
+    exists = True
+    try:
+        downloader.probe_url(address)
+    except hf.utils._errors.RepositoryNotFoundError:
+        exists = False
+
+    return jsonify(
+            {
+                "exists": exists
+            }
+        )
 
 size_cache = dict()
 lock = threading.Lock()

From 1a83745045716b08916475e72f81c5b5fd1d0d72 Mon Sep 17 00:00:00 2001
From: julianbollig <julian.bollig@tngtech.com>
Date: Tue, 19 Nov 2024 11:15:40 +0100
Subject: [PATCH 04/10] 26 - Optimized Design

Signed-off-by: julianbollig <julian.bollig@tngtech.com>
---
 WebUI/src/assets/i18n/en-US.json      |  4 ++--
 WebUI/src/components/AddLLMDialog.vue | 12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/WebUI/src/assets/i18n/en-US.json b/WebUI/src/assets/i18n/en-US.json
index b5a28ab3..9f21a777 100644
--- a/WebUI/src/assets/i18n/en-US.json
+++ b/WebUI/src/assets/i18n/en-US.json
@@ -7,7 +7,7 @@
   "COM_RESTORE": "Restore Defaults",
   "COM_SD_PROMPT": "Input prompt to generate image",
   "COM_LLM_PROMPT": "Input prompt to generate answer",
-  "COM_LLM_HF_PROMPT": "<user>/<model>",
+  "COM_LLM_HF_PROMPT": "<namespace>/<repo_name>",
   "COM_CLICK_UPLOAD": "- Click To Upload Image -",
   "COM_GENERATE": "Generate",
   "COM_GENERATING": "Generating",
@@ -125,7 +125,7 @@
   "DECREASE_FONT_SIZE": "Shrink Text",
   "ANSWER_RAG_ENABLE":"Enable File Query",
   "ANSWER_RAG_OPEN_DIALOG":"Open File Uploader",
-  "REQUEST_LLM_MODEL_NAME":"Add a model of your choice from huggingface.co: ",
+  "REQUEST_LLM_MODEL_NAME":"Add a model of your choice from huggingface.co,<br />e.g. meta-llama/Llama-3.2-11B-Vision-Instruct: ",
   "DOWNLOADER_CONFRIM_TIP":"You are missing one or more models needed to run. Would you like to download the model(s) listed below?",
   "DOWNLOADER_MODEL":"Model",
   "DOWNLOADER_INFO":"Info",
diff --git a/WebUI/src/components/AddLLMDialog.vue b/WebUI/src/components/AddLLMDialog.vue
index aa010f3f..601f07db 100644
--- a/WebUI/src/components/AddLLMDialog.vue
+++ b/WebUI/src/components/AddLLMDialog.vue
@@ -1,15 +1,15 @@
 <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-20 px-20 w-768px flex flex-col items-center justify-center bg-gray-600 rounded-3xl gap-8 text-white"
+            <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>{{ i18nState.REQUEST_LLM_MODEL_NAME }}</p>
-              <textarea class="rounded-xl border border-color-spilter flex-auto w-full h-auto resize-none"
+              <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="rounded border bg-red-500 py-1 px-4">{{ i18nState.COM_CLOSE }}</button>
-                <button @click="addModel" class="rounded border bg-red-500 py-1 px-4">{{ i18nState.COM_ADD }}</button>
+                <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>
@@ -61,7 +61,7 @@ async function addModel() {
     console.log(models.models)
     globalSetup.modelSettings.llm_model = modelRequest.value;
     emits("callCheckModel");
-    emits("close")
+    closeAdd()
   } else if (is_in_models) {
     globalSetup.modelSettings.llm_model = previousModel
     addModelErrorMessage.value = i18nState.ERROR_ALREADY_IN_MODELS

From d01f15d104b97e13d775f2ebffa00a3f5360a6b1 Mon Sep 17 00:00:00 2001
From: julianbollig <julian.bollig@tngtech.com>
Date: Tue, 19 Nov 2024 19:01:01 +0100
Subject: [PATCH 05/10] 26 - added warning if download model is not an LLM

Signed-off-by: julianbollig <julian.bollig@tngtech.com>
---
 WebUI/src/App.vue                      | 18 +++++---
 WebUI/src/assets/i18n/en-US.json       |  5 ++-
 WebUI/src/assets/js/store/models.ts    |  2 +-
 WebUI/src/components/AddLLMDialog.vue  | 58 +++++++++++++++++---------
 WebUI/src/components/WarningDialog.vue | 46 ++++++++++++++++++++
 service/model_downloader.py            |  3 ++
 service/web_api.py                     | 15 +++++++
 7 files changed, 120 insertions(+), 27 deletions(-)
 create mode 100644 WebUI/src/components/WarningDialog.vue

diff --git a/WebUI/src/App.vue b/WebUI/src/App.vue
index 7078325d..d025f238 100644
--- a/WebUI/src/App.vue
+++ b/WebUI/src/App.vue
@@ -71,7 +71,8 @@
       <app-settings v-if="showSetting" @close="hideAppSettings" @show-download-model-confirm="showDownloadModelConfirm"></app-settings>
     </div>
     <download-dialog v-show="showDowloadDlg" ref="downloadDigCompt" @close="showDowloadDlg = false"></download-dialog>
-    <add-l-l-m-dialog v-show="showModelRequestDialog" ref="addLLMCompt" @close="showModelRequestDialog = false" @call-check-model="callCheckModel"></add-l-l-m-dialog>
+    <add-l-l-m-dialog v-show="showModelRequestDialog" ref="addLLMCompt" @close="showModelRequestDialog = false" @call-check-model="callCheckModel" @show-warning="showWarning"></add-l-l-m-dialog>
+    <warning-dialog v-show="showWarningDialog" ref="warningCompt" @close="showWarningDialog = false"></warning-dialog>
   </main>
   <footer class="flex-none px-4 flex justify-between items-center select-none" :class="{'bg-black bg-opacity-50': theme.active === 'lnl', 'bg-black bg-opacity-80': theme.active === 'bmg', 'border-t border-color-spilter': theme.active === 'dark'}">
     <div>
@@ -117,6 +118,7 @@ import DownloadDialog from '@/components/DownloadDialog.vue';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
 import { useTheme } from "./assets/js/store/theme.ts";
 import AddLLMDialog from "@/components/AddLLMDialog.vue";
+import WarningDialog from "@/components/WarningDialog.vue";
 
 
 const isOpen = ref(false);
@@ -137,10 +139,14 @@ const showDowloadDlg = ref(false);
 
 const showModelRequestDialog = ref(false);
 
+const showWarningDialog = ref(false);
+
 const downloadDigCompt = ref<InstanceType<typeof DownloadDialog>>();
 
 const addLLMCompt = ref<InstanceType<typeof AddLLMDialog>>();
 
+const warningCompt = ref<InstanceType<typeof WarningDialog>>();
+
 const fullscreen = ref(false);
 
 const platformTitle = window.envVars.platformTitle;
@@ -169,7 +175,6 @@ onBeforeMount(async () => {
   })
 })
 
-
 function showAppSettings() {
   if (showSetting.value === false) {
     showSetting.value = true;
@@ -227,14 +232,12 @@ function postImageToEnhance(imageUrl: string) {
 
 function showDownloadModelConfirm(downList: DownloadModelParam[], success?: () => void, fail?: () => void) {
   showDowloadDlg.value = true;
-  console.log(downList)
   nextTick(() => {
     downloadDigCompt.value!.showConfirm(downList, success, fail);
-    console.log(showDowloadDlg.value)
   });
 }
 
-function showModelRequest(success?: () => void, fail?: () => void) {
+function showModelRequest() {
   showModelRequestDialog.value = true;
 }
 
@@ -242,5 +245,10 @@ function callCheckModel(){
   answer.value!.checkModel();
 }
 
+function showWarning(message : string, func : () => void) {
+  warningCompt.value!.warningMessage = message;
+  showWarningDialog.value = true;
+  warningCompt.value!.confirmFunction = func;
+}
 
 </script>
diff --git a/WebUI/src/assets/i18n/en-US.json b/WebUI/src/assets/i18n/en-US.json
index 9f21a777..892d8ab3 100644
--- a/WebUI/src/assets/i18n/en-US.json
+++ b/WebUI/src/assets/i18n/en-US.json
@@ -125,7 +125,7 @@
   "DECREASE_FONT_SIZE": "Shrink Text",
   "ANSWER_RAG_ENABLE":"Enable File Query",
   "ANSWER_RAG_OPEN_DIALOG":"Open File Uploader",
-  "REQUEST_LLM_MODEL_NAME":"Add a model of your choice from huggingface.co,<br />e.g. meta-llama/Llama-3.2-11B-Vision-Instruct: ",
+  "REQUEST_LLM_MODEL_NAME":"Add a model of your choice from huggingface.co,<br />for example: <i>meta-llama/Llama-3.2-1B </i>",
   "DOWNLOADER_CONFRIM_TIP":"You are missing one or more models needed to run. Would you like to download the model(s) listed below?",
   "DOWNLOADER_MODEL":"Model",
   "DOWNLOADER_INFO":"Info",
@@ -169,5 +169,6 @@
   "ERROR_PYTHON_BACKEND_INIT": "Backend initialization failed",
   "ERROR_PYTHON_BACKEND_INIT_DETAILS_TEXT": "The AI inference backend failed to initialize. Please try restarting the application. If the problem persists, you can check the Details for additional information about the error.",
   "ERROR_PYTHON_BACKEND_INIT_DETAILS": "Details",
-  "ERROR_PYTHON_BACKEND_INIT_OPEN_LOG": "Open Log"
+  "ERROR_PYTHON_BACKEND_INIT_OPEN_LOG": "Open Log",
+  "WARNING_MODEL_TYPE_WRONG": "The model type doesn't seem to fit the requirements. Are you sure, you want to continue?"
 }
diff --git a/WebUI/src/assets/js/store/models.ts b/WebUI/src/assets/js/store/models.ts
index 8e3c676e..62db3420 100644
--- a/WebUI/src/assets/js/store/models.ts
+++ b/WebUI/src/assets/js/store/models.ts
@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 
-type ModelType = "llm" | "embedding" | "stableDiffusion" | "inpaint" | "lora" | "vae";
+export type ModelType = "llm" | "embedding" | "stableDiffusion" | "inpaint" | "lora" | "vae" | "undefined";
 
 export type Model = {
     name: string;
diff --git a/WebUI/src/components/AddLLMDialog.vue b/WebUI/src/components/AddLLMDialog.vue
index 601f07db..e829530d 100644
--- a/WebUI/src/components/AddLLMDialog.vue
+++ b/WebUI/src/components/AddLLMDialog.vue
@@ -18,7 +18,8 @@
 <script setup lang="ts">
 import { useGlobalSetup } from '@/assets/js/store/globalSetup';
 import { useI18N } from '@/assets/js/store/i18n';
-import { useModels, userModels } from '@/assets/js/store/models';
+import { useModels, userModels , ModelType} from '@/assets/js/store/models';
+
 
 const i18nState = useI18N().state;
 const globalSetup = useGlobalSetup();
@@ -29,16 +30,15 @@ const addModelError = ref(false);
 const animate = ref(false);
 const emits = defineEmits<{
     (e: "close"): void,
-    (e: "callCheckModel"): void
+    (e: "callCheckModel"): void,
+    (e: "showWarning", warning : string, func : () => void): void
 }>();
 
-
 onDeactivated(() => {
     animate.value = false;
 })
 
 function fastGenerate(e: KeyboardEvent) {
-  // ToDo: Live-Check if model available
   if (e.code == "Enter") {
     if (e.ctrlKey || e.shiftKey || e.altKey) {
       modelRequest.value += "\n";
@@ -51,28 +51,38 @@ function fastGenerate(e: KeyboardEvent) {
 
 async function addModel() {
   const previousModel = globalSetup.modelSettings.llm_model
-  const url_exists = await urlExists(modelRequest.value);
-
   const is_in_models = models.models.some((model) => model.name === modelRequest.value)
 
-  if (url_exists && !is_in_models) {
-    userModels.push({ name: modelRequest.value, type: 'llm', downloaded: false })
-    await models.refreshModels()
-    console.log(models.models)
-    globalSetup.modelSettings.llm_model = modelRequest.value;
-    emits("callCheckModel");
-    closeAdd()
-  } else if (is_in_models) {
-    globalSetup.modelSettings.llm_model = previousModel
-    addModelErrorMessage.value = i18nState.ERROR_ALREADY_IN_MODELS
-    addModelError.value = true;
+  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, () => {performDownload()});
+      } else {
+        await performDownload()
+      }
+    } else {
+        globalSetup.modelSettings.llm_model = previousModel
+        addModelErrorMessage.value = i18nState.ERROR_REPO_NOT_EXISTS
+        addModelError.value = true;
+        console.log("Hey")
+      }
   } else {
     globalSetup.modelSettings.llm_model = previousModel
-    addModelErrorMessage.value = i18nState.ERROR_REPO_NOT_EXISTS
+    addModelErrorMessage.value = i18nState.ERROR_ALREADY_IN_MODELS
     addModelError.value = true;
   }
 }
 
+async function performDownload() {
+  userModels.push({name: modelRequest.value, type: 'llm', downloaded: false})
+  await models.refreshModels()
+  globalSetup.modelSettings.llm_model = modelRequest.value;
+  emits("callCheckModel");
+  closeAdd()
+}
 
 async function urlExists(repo_id: string) {
   const response = await fetch(`${globalSetup.apiHost}/api/checkURLExists`, {
@@ -81,11 +91,21 @@ async function urlExists(repo_id: string) {
     headers: {
       "Content-Type": "application/json"
     }})
-
   const data = await response.json()
   return data.exists;
 }
 
+async function isLLM(repo_id: string) {
+  const response = await fetch(`${globalSetup.apiHost}/api/isLLM`, {
+    method: "POST",
+    body: JSON.stringify(repo_id),
+    headers: {
+      "Content-Type": "application/json"
+    }})
+  const data = await response.json()
+  return data.isllm
+}
+
 function closeAdd() {
   addModelError.value = false;
   modelRequest.value = "";
diff --git a/WebUI/src/components/WarningDialog.vue b/WebUI/src/components/WarningDialog.vue
new file mode 100644
index 00000000..54a6a533
--- /dev/null
+++ b/WebUI/src/components/WarningDialog.vue
@@ -0,0 +1,46 @@
+<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= "warningMessage"></p>
+              <div class="flex justify-center items-center gap-9">
+                <button @click="cancelConfirm" class="bg-color-control-bg  py-1 px-4 rounded">{{i18nState.COM_CANCEL}}</button>
+                <button @click="confirmAdd" class="bg-color-control-bg  py-1 px-4 rounded">{{i18nState.COM_CONFIRM}}</button>
+              </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { useI18N } from '@/assets/js/store/i18n.ts';
+const i18nState = useI18N().state;
+const confirmFunction = ref(() => {})
+const warningMessage = ref("")
+const animate = ref(false);
+const emits = defineEmits<{
+    (e: "close"): void
+}>();
+
+onDeactivated(() => {
+    animate.value = false;
+})
+
+async function confirmAdd() {
+  confirmFunction.value()
+  emits("close");
+}
+
+function cancelConfirm() {
+  emits("close");
+}
+
+defineExpose({warningMessage, confirmFunction});
+
+</script>
+<style scoped>
+table {
+    border-collapse: separate;
+    border-spacing: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/service/model_downloader.py b/service/model_downloader.py
index e552251d..3d9a2f25 100644
--- a/service/model_downloader.py
+++ b/service/model_downloader.py
@@ -86,6 +86,9 @@ def __init__(self, hf_token=None) -> None:
     def probe_url(self, repo_id: str):
         model_info(repo_id)
 
+    def probe_type(self, repo_id : str):
+        return model_info(repo_id).pipeline_tag
+
     def is_gated(self, repo_id: str):
         try:
             info = model_info(repo_id)
diff --git a/service/web_api.py b/service/web_api.py
index ac1a77b1..edd0ec80 100644
--- a/service/web_api.py
+++ b/service/web_api.py
@@ -212,6 +212,21 @@ def check_url_exists():
             }
         )
 
+@app.route("/api/isLLM", methods=["POST"])
+def is_llm():
+    address = request.get_json()
+    downloader = HFPlaygroundDownloader()
+    try:
+        model_type_hf = downloader.probe_type(address)
+    except:
+        model_type_hf = "undefined"
+    return jsonify(
+            {
+            "isllm": model_type_hf == "text-generation"
+            }
+        )
+
+
 size_cache = dict()
 lock = threading.Lock()
 

From 7a86aa0998d6a47504a3978419fda77aad43ad23 Mon Sep 17 00:00:00 2001
From: marijnvg-tng <marijn.vangeest@tngtech.com>
Date: Wed, 20 Nov 2024 15:34:26 +0100
Subject: [PATCH 06/10] 26 - Code cleanup after revision

Signed-off-by: marijnvg-tng <marijn.vangeest@tngtech.com>
---
 WebUI/src/App.vue                       |  6 ++++++
 WebUI/src/assets/js/store/models.ts     |  1 -
 WebUI/src/components/AddLLMDialog.vue   | 10 ++++++----
 WebUI/src/components/DownloadDialog.vue |  4 ----
 WebUI/src/components/InpaintMask.vue    |  1 -
 WebUI/src/components/WarningDialog.vue  |  9 +++++----
 WebUI/src/views/Answer.vue              | 12 ------------
 service/model_downloader.py             | 14 +++++++++++---
 service/web_api.py                      |  7 ++-----
 9 files changed, 30 insertions(+), 34 deletions(-)

diff --git a/WebUI/src/App.vue b/WebUI/src/App.vue
index d025f238..7a5c7087 100644
--- a/WebUI/src/App.vue
+++ b/WebUI/src/App.vue
@@ -239,6 +239,9 @@ function showDownloadModelConfirm(downList: DownloadModelParam[], success?: () =
 
 function showModelRequest() {
   showModelRequestDialog.value = true;
+  nextTick(() => {
+    addLLMCompt.value!.onShow();
+  });
 }
 
 function callCheckModel(){
@@ -249,6 +252,9 @@ function showWarning(message : string, func : () => void) {
   warningCompt.value!.warningMessage = message;
   showWarningDialog.value = true;
   warningCompt.value!.confirmFunction = func;
+  nextTick(() => {
+    warningCompt.value!.onShow();
+  });
 }
 
 </script>
diff --git a/WebUI/src/assets/js/store/models.ts b/WebUI/src/assets/js/store/models.ts
index 62db3420..4f96b650 100644
--- a/WebUI/src/assets/js/store/models.ts
+++ b/WebUI/src/assets/js/store/models.ts
@@ -46,7 +46,6 @@ export const useModels = defineStore("models", () => {
         const notYetDownloaded = (model: Model) => !downloadedModels.map(m => m.name).includes(model.name);
 
         models.value = [...downloadedModels, ...userModels, ...predefinedModels.filter(notYetDownloaded)];
-        console.log(models);
 
         }
 
diff --git a/WebUI/src/components/AddLLMDialog.vue b/WebUI/src/components/AddLLMDialog.vue
index e829530d..8a1d6638 100644
--- a/WebUI/src/components/AddLLMDialog.vue
+++ b/WebUI/src/components/AddLLMDialog.vue
@@ -34,9 +34,6 @@ const emits = defineEmits<{
     (e: "showWarning", warning : string, func : () => void): void
 }>();
 
-onDeactivated(() => {
-    animate.value = false;
-})
 
 function fastGenerate(e: KeyboardEvent) {
   if (e.code == "Enter") {
@@ -49,6 +46,10 @@ function fastGenerate(e: KeyboardEvent) {
   }
 }
 
+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)
@@ -67,7 +68,6 @@ async function addModel() {
         globalSetup.modelSettings.llm_model = previousModel
         addModelErrorMessage.value = i18nState.ERROR_REPO_NOT_EXISTS
         addModelError.value = true;
-        console.log("Hey")
       }
   } else {
     globalSetup.modelSettings.llm_model = previousModel
@@ -112,6 +112,8 @@ function closeAdd() {
   emits("close");
 }
 
+defineExpose({ onShow });
+
 </script>
 <style scoped>
 table {
diff --git a/WebUI/src/components/DownloadDialog.vue b/WebUI/src/components/DownloadDialog.vue
index 7488bcf5..81a9c3ce 100644
--- a/WebUI/src/components/DownloadDialog.vue
+++ b/WebUI/src/components/DownloadDialog.vue
@@ -111,10 +111,6 @@ const readTerms = ref(false);
 const downloadList = ref<DownloadModelRender[]>([]);
 
 
-onDeactivated(() => {
-    animate.value = false;
-})
-
 function dataProcess(line: string) {
     console.log(line);
     const dataJson = line.slice(5);
diff --git a/WebUI/src/components/InpaintMask.vue b/WebUI/src/components/InpaintMask.vue
index c660d3da..d8b07ec5 100644
--- a/WebUI/src/components/InpaintMask.vue
+++ b/WebUI/src/components/InpaintMask.vue
@@ -108,7 +108,6 @@ function moveWithShadow(e: MouseEvent) {
 
 function showShadow() {
     shadowPos.show = true;
-    console.log("showShadow");
 }
 
 defineExpose({ clearMaskImage, getMaskImage })
diff --git a/WebUI/src/components/WarningDialog.vue b/WebUI/src/components/WarningDialog.vue
index 54a6a533..86ce3b97 100644
--- a/WebUI/src/components/WarningDialog.vue
+++ b/WebUI/src/components/WarningDialog.vue
@@ -22,9 +22,6 @@ const emits = defineEmits<{
     (e: "close"): void
 }>();
 
-onDeactivated(() => {
-    animate.value = false;
-})
 
 async function confirmAdd() {
   confirmFunction.value()
@@ -35,7 +32,11 @@ function cancelConfirm() {
   emits("close");
 }
 
-defineExpose({warningMessage, confirmFunction});
+function onShow(){
+  animate.value = true
+}
+
+defineExpose({warningMessage, confirmFunction, onShow });
 
 </script>
 <style scoped>
diff --git a/WebUI/src/views/Answer.vue b/WebUI/src/views/Answer.vue
index 1b05afa6..603ff59c 100644
--- a/WebUI/src/views/Answer.vue
+++ b/WebUI/src/views/Answer.vue
@@ -176,12 +176,6 @@
             </div>
             <rag v-if="ragData.showUploader" ref="ragPanel" @close="ragData.showUploader = false"></rag>
         </div>
-        <teleport to="#answerPanel" v-if="showDowloadDlg">
-            <download-dialog ref="downloadDigCompt"></download-dialog>
-        </teleport>
-        <teleport to="#answerPanel" v-if="showModelRequestDialog">
-            <add-l-l-m-dialog ref="addLLMDialog" @add-model="checkModel"></add-l-l-m-dialog>
-        </teleport>
     </div>
 
 </template>
@@ -190,8 +184,6 @@ import Rag from "../components/Rag.vue";
 import ProgressBar from "../components/ProgressBar.vue";
 import LoadingBar from "../components/LoadingBar.vue";
 import DropSelector from "@/components/DropSelector.vue";
-import DownloadDialog from "@/components/DownloadDialog.vue";
-import AddLLMDialog from "@/components/AddLLMDialog.vue";
 import ModelDropDownItem from "@/components/ModelDropDownItem.vue";
 import { useI18N } from '@/assets/js/store/i18n';
 import { toast } from '@/assets/js/toast';
@@ -226,15 +218,11 @@ const loadingModel = ref(false);
 let receiveOut = "";
 let chatPanel: HTMLElement;
 const markdownParser = new MarkdownParser(i18nState.COM_COPY);
-const showDowloadDlg = ref(false);
-const showModelRequestDialog = ref(false);
 const ragData = reactive({
     enable: false,
     processEnable: false,
     showUploader: false,
 });
-const downloadDigCompt = ref<InstanceType<typeof DownloadDialog>>()
-const addLLMDialog = ref<InstanceType<typeof AddLLMDialog>>()
 
 const source = ref("");
 const emits = defineEmits<{
diff --git a/service/model_downloader.py b/service/model_downloader.py
index 3d9a2f25..16d0ffc9 100644
--- a/service/model_downloader.py
+++ b/service/model_downloader.py
@@ -1,4 +1,5 @@
 from huggingface_hub import HfFileSystem, hf_hub_url, model_info
+from huggingface_hub.utils._errors import RepositoryNotFoundError
 from typing import Any, Callable, Dict, List
 from os import path, makedirs, rename
 import requests
@@ -11,11 +12,11 @@
 import traceback
 import concurrent.futures
 import aipg_utils as utils
+import shutil
 
 model_list_cache = dict()
 model_lock = Lock()
 
-
 class HFFileItem:
     relpath: str
     size: int
@@ -83,8 +84,12 @@ def __init__(self, hf_token=None) -> None:
         self.thread_lock = Lock()
         self.hf_token = hf_token
 
-    def probe_url(self, repo_id: str):
-        model_info(repo_id)
+    def hf_url_exists(self, repo_id: str):
+        try:
+            model_info(repo_id)
+            return True
+        except RepositoryNotFoundError:
+            return False
 
     def probe_type(self, repo_id : str):
         return model_info(repo_id).pipeline_tag
@@ -264,6 +269,9 @@ def multiple_thread_downlod(self, thread_count: int):
                     path.join(self.save_path, self.repo_id.replace("/", "---"))
                 ),
             )
+        else:
+            # Download aborted
+            shutil.rmtree(self.save_path_tmp)
 
     def start_report_download_progress(self):
         thread = Thread(target=self.report_download_progress)
diff --git a/service/web_api.py b/service/web_api.py
index edd0ec80..8cd0470a 100644
--- a/service/web_api.py
+++ b/service/web_api.py
@@ -196,15 +196,12 @@ def check_model_exist():
         result_list.append({"repo_id": repo_id, "type": type, "exist": exist})
     return jsonify({"code": 0, "message": "success", "exists": result_list})
 
+
 @app.route("/api/checkURLExists", methods=["POST"])
 def check_url_exists():
     address = request.get_json()
     downloader = HFPlaygroundDownloader()
-    exists = True
-    try:
-        downloader.probe_url(address)
-    except hf.utils._errors.RepositoryNotFoundError:
-        exists = False
+    exists = downloader.hf_url_exists(address)
 
     return jsonify(
             {

From 138151c3eb640120fc44c09ad80503a459779c20 Mon Sep 17 00:00:00 2001
From: marijnvg-tng <marijn.vangeest@tngtech.com>
Date: Thu, 21 Nov 2024 18:22:08 +0100
Subject: [PATCH 07/10] 26 - Fixed minor inaccuracies

Signed-off-by: marijnvg-tng <marijn.vangeest@tngtech.com>
---
 service/web_api.py | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/service/web_api.py b/service/web_api.py
index 8cd0470a..771184b8 100644
--- a/service/web_api.py
+++ b/service/web_api.py
@@ -66,7 +66,6 @@
 import rag
 import model_config
 from model_downloader import HFPlaygroundDownloader
-import huggingface_hub as hf
 from psutil._common import bytes2human
 import traceback
 
@@ -215,7 +214,7 @@ def is_llm():
     downloader = HFPlaygroundDownloader()
     try:
         model_type_hf = downloader.probe_type(address)
-    except:
+    except Exception:
         model_type_hf = "undefined"
     return jsonify(
             {

From a325a2d0e743c1d99c6c51a4e37cca6c106267d6 Mon Sep 17 00:00:00 2001
From: marijnvg-tng <marijn.vangeest@tngtech.com>
Date: Fri, 22 Nov 2024 13:57:35 +0100
Subject: [PATCH 08/10] 26 - more improvements for revision

Signed-off-by: marijnvg-tng <marijn.vangeest@tngtech.com>
---
 WebUI/src/components/AddLLMDialog.vue | 18 +++++-------------
 WebUI/src/views/Answer.vue            | 16 +++++++++-------
 service/model_downloader.py           |  2 +-
 service/web_api.py                    | 12 ++++++------
 4 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/WebUI/src/components/AddLLMDialog.vue b/WebUI/src/components/AddLLMDialog.vue
index 8a1d6638..b2238771 100644
--- a/WebUI/src/components/AddLLMDialog.vue
+++ b/WebUI/src/components/AddLLMDialog.vue
@@ -41,7 +41,9 @@ function fastGenerate(e: KeyboardEvent) {
       modelRequest.value += "\n";
     } else {
       e.preventDefault();
-      addModel()
+      if (modelRequest.value !== "") {
+        addModel()
+      }
     }
   }
 }
@@ -85,23 +87,13 @@ async function performDownload() {
 }
 
 async function urlExists(repo_id: string) {
-  const response = await fetch(`${globalSetup.apiHost}/api/checkURLExists`, {
-    method: "POST",
-    body: JSON.stringify(repo_id),
-    headers: {
-      "Content-Type": "application/json"
-    }})
+  const response = await fetch(`${globalSetup.apiHost}/api/checkURLExists?repo_id=${repo_id}`)
   const data = await response.json()
   return data.exists;
 }
 
 async function isLLM(repo_id: string) {
-  const response = await fetch(`${globalSetup.apiHost}/api/isLLM`, {
-    method: "POST",
-    body: JSON.stringify(repo_id),
-    headers: {
-      "Content-Type": "application/json"
-    }})
+  const response = await fetch(`${globalSetup.apiHost}/api/isLLM?repo_id=${repo_id}`)
   const data = await response.json()
   return data.isllm
 }
diff --git a/WebUI/src/views/Answer.vue b/WebUI/src/views/Answer.vue
index 603ff59c..56c60963 100644
--- a/WebUI/src/views/Answer.vue
+++ b/WebUI/src/views/Answer.vue
@@ -388,14 +388,16 @@ async function simulatedInput() {
 }
 
 function fastGenerate(e: KeyboardEvent) {
-    if (e.code == "Enter") {
-        if (e.ctrlKey || e.shiftKey || e.altKey) {
-            question.value += "\n";
-        } else {
-            e.preventDefault();
-            newPromptGenerate();
-        }
+  if (e.code == "Enter") {
+    if (e.ctrlKey || e.shiftKey || e.altKey) {
+      question.value += "\n";
+    } else {
+      e.preventDefault();
+      if (question.value !== "") {
+        newPromptGenerate()
+      }
     }
+  }
 }
 
 async function newPromptGenerate() {
diff --git a/service/model_downloader.py b/service/model_downloader.py
index 16d0ffc9..a9df3b9d 100644
--- a/service/model_downloader.py
+++ b/service/model_downloader.py
@@ -1,5 +1,5 @@
 from huggingface_hub import HfFileSystem, hf_hub_url, model_info
-from huggingface_hub.utils._errors import RepositoryNotFoundError
+from huggingface_hub.utils import RepositoryNotFoundError
 from typing import Any, Callable, Dict, List
 from os import path, makedirs, rename
 import requests
diff --git a/service/web_api.py b/service/web_api.py
index 771184b8..c2a505db 100644
--- a/service/web_api.py
+++ b/service/web_api.py
@@ -196,11 +196,11 @@ def check_model_exist():
     return jsonify({"code": 0, "message": "success", "exists": result_list})
 
 
-@app.route("/api/checkURLExists", methods=["POST"])
+@app.route("/api/checkURLExists", methods=["GET"])
 def check_url_exists():
-    address = request.get_json()
+    repo_id = request.args.get('repo_id')
     downloader = HFPlaygroundDownloader()
-    exists = downloader.hf_url_exists(address)
+    exists = downloader.hf_url_exists(repo_id)
 
     return jsonify(
             {
@@ -208,12 +208,12 @@ def check_url_exists():
             }
         )
 
-@app.route("/api/isLLM", methods=["POST"])
+@app.route("/api/isLLM", methods=["GET"])
 def is_llm():
-    address = request.get_json()
+    repo_id = request.args.get('repo_id')
     downloader = HFPlaygroundDownloader()
     try:
-        model_type_hf = downloader.probe_type(address)
+        model_type_hf = downloader.probe_type(repo_id)
     except Exception:
         model_type_hf = "undefined"
     return jsonify(

From c617ce0b691c0d70300771fd45a728ac269a56fb Mon Sep 17 00:00:00 2001
From: julianbollig <julian.bollig@tngtech.com>
Date: Tue, 26 Nov 2024 11:38:55 +0100
Subject: [PATCH 09/10] 26 - Adding final changes before merging with dev

Signed-off-by: julianbollig <julian.bollig@tngtech.com>
---
 WebUI/src/components/AddLLMDialog.vue  | 27 +++++++++++++-------------
 WebUI/src/components/WarningDialog.vue |  8 +-------
 service/web_api.py                     |  4 ++--
 3 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/WebUI/src/components/AddLLMDialog.vue b/WebUI/src/components/AddLLMDialog.vue
index b2238771..61ca1beb 100644
--- a/WebUI/src/components/AddLLMDialog.vue
+++ b/WebUI/src/components/AddLLMDialog.vue
@@ -18,7 +18,7 @@
 <script setup lang="ts">
 import { useGlobalSetup } from '@/assets/js/store/globalSetup';
 import { useI18N } from '@/assets/js/store/i18n';
-import { useModels, userModels , ModelType} from '@/assets/js/store/models';
+import { useModels, userModels } from '@/assets/js/store/models';
 
 
 const i18nState = useI18N().state;
@@ -62,9 +62,15 @@ async function addModel() {
       addModelError.value = false
       const is_llm = await isLLM(modelRequest.value);
       if (!is_llm) {
-        emits("showWarning", i18nState.WARNING_MODEL_TYPE_WRONG, () => {performDownload()});
+        emits("showWarning", i18nState.WARNING_MODEL_TYPE_WRONG, async() => {
+          await registerModel();
+          emits("callCheckModel");
+          closeAdd();
+        });
       } else {
-        await performDownload()
+        await registerModel()
+        emits("callCheckModel");
+        closeAdd();
       }
     } else {
         globalSetup.modelSettings.llm_model = previousModel
@@ -78,16 +84,14 @@ async function addModel() {
   }
 }
 
-async function performDownload() {
+async function registerModel() {
   userModels.push({name: modelRequest.value, type: 'llm', downloaded: false})
   await models.refreshModels()
   globalSetup.modelSettings.llm_model = modelRequest.value;
-  emits("callCheckModel");
-  closeAdd()
 }
 
 async function urlExists(repo_id: string) {
-  const response = await fetch(`${globalSetup.apiHost}/api/checkURLExists?repo_id=${repo_id}`)
+  const response = await fetch(`${globalSetup.apiHost}/api/checkHFRepoExists?repo_id=${repo_id}`)
   const data = await response.json()
   return data.exists;
 }
@@ -99,6 +103,7 @@ async function isLLM(repo_id: string) {
 }
 
 function closeAdd() {
+  addModelErrorMessage.value = "";
   addModelError.value = false;
   modelRequest.value = "";
   emits("close");
@@ -106,10 +111,4 @@ function closeAdd() {
 
 defineExpose({ onShow });
 
-</script>
-<style scoped>
-table {
-    border-collapse: separate;
-    border-spacing: 10px;
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/WebUI/src/components/WarningDialog.vue b/WebUI/src/components/WarningDialog.vue
index 86ce3b97..7cfe91a9 100644
--- a/WebUI/src/components/WarningDialog.vue
+++ b/WebUI/src/components/WarningDialog.vue
@@ -38,10 +38,4 @@ function onShow(){
 
 defineExpose({warningMessage, confirmFunction, onShow });
 
-</script>
-<style scoped>
-table {
-    border-collapse: separate;
-    border-spacing: 10px;
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/service/web_api.py b/service/web_api.py
index c2a505db..5cf6fa69 100644
--- a/service/web_api.py
+++ b/service/web_api.py
@@ -196,8 +196,8 @@ def check_model_exist():
     return jsonify({"code": 0, "message": "success", "exists": result_list})
 
 
-@app.route("/api/checkURLExists", methods=["GET"])
-def check_url_exists():
+@app.route("/api/checkHFRepoExists", methods=["GET"])
+def check_if_huggingface_repo_exists():
     repo_id = request.args.get('repo_id')
     downloader = HFPlaygroundDownloader()
     exists = downloader.hf_url_exists(repo_id)

From 291681467b64467f18b407fff9107e43bac14bd3 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 10/10] Implement review comments

Signed-off-by: Markus Schuettler <markus.schuettler@tngtech.com>
---
 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>