Made the user imput for adding custom models clearer (restricted to r…

…epositories only / no single-files) Signed-off-by: marijnvg-tng <[email protected]>
TNG · Nov 28, 2024 · 4fa0e3e · 4fa0e3e
1 parent e3a6dec
commit 4fa0e3e
Show file tree

Hide file tree

Showing 5 changed files with 151 additions and 11 deletions.
diff --git a/WebUI/package-lock.json b/WebUI/package-lock.json
diff --git a/WebUI/package.json b/WebUI/package.json
@@ -5,20 +5,16 @@
   "scripts": {
     "dev": "cross-env VITE_PLATFORM_TITLE=\"for Local® Dev™ Mode\" vite",
     "preview": "vite preview",
-
     "fetch-build-resources": "cross-env node ./build/scripts/fetch-python-package-resources.js --target_dir=../build_resources",
-
     "prepare-python-env": "cross-env node ./build/scripts/prepare-python-env.js --build_resources_dir=../build_resources --target_dir=../build-envs/online/env",
     "install-full-python-env": "cross-env node ./build/scripts/install-full-python-env.js --env_dir=../build-envs/online/env --comfy_ui_dir=../build_resources/ComfyUI",
     "provide-electron-build-resources": "cross-env node build/scripts/provide-electron-build-resources.js --build_resources_dir=../build_resources --backend_dir=../service --target_dir=./external",
-
     "prepare-build:arc": "cross-env npm run prepare-python-env && npm run provide-electron-build-resources -- --python_env_dir=../build-envs/online/env && node ./build/scripts/render-template.js --online_installer --platform=arc",
     "prepare-build:arc-offline": "cross-env && npm run prepare-python-env && npm run install-full-python-env -- --platform=arc && npm run provide-electron-build-resources -- --python_env_dir=../build-envs/offline/arc/env && node ./build/scripts/render-template.js --no-online_installer --platform=arc",
     "prepare-build:ultra": "cross-env npm run prepare-python-env && npm run provide-electron-build-resources -- --python_env_dir=../build-envs/online/env && node ./build/scripts/render-template.js --online_installer --platform=ultra",
     "prepare-build:ultra-offline": "cross-env npm run prepare-python-env && npm run install-full-python-env -- --platform=ultra && npm run provide-electron-build-resources -- --python_env_dir=../build-envs/offline/ultra/env && node ./build/scripts/render-template.js --no-online_installer --platform=ultra",
     "prepare-build:ultra2": "cross-env npm run prepare-python-env && npm run provide-electron-build-resources -- --python_env_dir=../build-envs/online/env && node ./build/scripts/render-template.js --online_installer --platform=ultra2",
     "prepare-build:ultra2-offline": "cross-env npm run prepare-python-env && npm run install-full-python-env -- --platform=ultra2 && npm run provide-electron-build-resources -- --python_env_dir=../build-envs/offline/ultra2/env && node ./build/scripts/render-template.js --no-online_installer --platform=ultra2",
-
     "build:arc": "cross-env-shell PLATFORM=\"arc\" VITE_PLATFORM_TITLE=\"for Intel® Arc™\" \"vue-tsc && vite build && electron-builder --config build/build-config.json --win --x64\"",
     "build:arc-offline": "cross-env-shell PLATFORM=\"arc\" VITE_PLATFORM_TITLE=\"for Intel® Arc™\" \"vue-tsc && vite build && electron-builder --config build/build-config-offline.json --win --x64\"",
     "build:ultra": "cross-env-shell PLATFORM=\"ultra\" VITE_PLATFORM_TITLE=\"for Intel® Core™ Ultra\" \"vue-tsc && vite build && electron-builder --config build/build-config.json --win --x64\"",
@@ -46,6 +42,8 @@
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
     "unplugin-auto-import": "^0.18.3",
+    "v-popover": "^0.1.13",
+    "v-tooltip": "^2.1.3",
     "vue": "^3.5.12",
     "zod": "^3.23.8"
   },

diff --git a/WebUI/src/assets/i18n/en-US.json b/WebUI/src/assets/i18n/en-US.json
@@ -125,7 +125,12 @@
   "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 />for example: <i>meta-llama/Llama-3.2-1B </i>",
+  "REQUEST_LLM_MODEL_NAME":"Add a model of your choice from huggingface.co",
+  "REQUEST_LLM_MODEL_DESCRIPTION": "You can download a model repository with the syntax",
+  "REQUEST_LLM_MODEL_EXAMPLE": "&lt;namespace&gt;/&lt;repo_name&gt;, e.g. 'openai-community/gpt2'",
+  "REQUEST_LLM_SINGLE_EXAMPLE": "&lt;namespace&gt;/&lt;file_path&gt;, e.g. 'microsoft/Phi-3-mini-4k-instruct-gguf/Phi-3-mini-4k-instruct-q4.gguf'",
+  "REQUEST_LLM_MODEL_DESCRIPTION_tmp":"You can either download a model repository by providing &lt;namespace&gt;/&lt;repo_name&gt;, e.g. 'openai-community/gpt2' or a single model file, by typing &lt;namespace&gt;/&lt;file_path&gt;, e.g. 'microsoft/Phi-3-mini-4k-instruct-gguf/Phi-3-mini-4k-instruct-q4.gguf'",
+  "REQUEST_LLM_MODEL_DISCLAIMER":"NOTE: Not every model on huggingface.co is suited for the task you want it to perform. <br />Carefully read the model introduction and requirements before downloading.",
   "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
@@ -4,8 +4,21 @@
       <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>
+        <b v-html="i18nState.REQUEST_LLM_MODEL_NAME"></b>
+        <div class="flex flex-col items-center gap-2 p-4 border border-yellow-600 bg-yellow-600/10 rounded-lg">
+          <p v-html="i18nState.REQUEST_LLM_MODEL_DISCLAIMER"></p>
+        </div>
+        <div class="container flex">
+          <span @mouseover="showInfo = true" @mouseout="showInfo = false" style="vertical-align: middle;" class="svg-icon i-info w-7 h-7 px-6"></span>
+          <Input :placeholder="languages.COM_LLM_HF_PROMPT" v-model="modelRequest" @keyup.enter="addModel"></Input>
+        </div>
+        <span v-if="showInfo" class="hover-box w-0.6">
+           <p v-html="i18nState.REQUEST_LLM_MODEL_DESCRIPTION"></p>
+          <ul>
+            <li v-html="i18nState.REQUEST_LLM_MODEL_EXAMPLE"></li>
+<!--            <li v-html="i18nState.REQUEST_LLM_SINGLE_EXAMPLE"></li>-->
+          </ul>
+        </span>
         <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>
@@ -15,6 +28,7 @@
     </div>
   </div>
 </template>
+
 <script setup lang="ts">
 import { Input } from '@/components/ui/input'
 import { useGlobalSetup } from '@/assets/js/store/globalSetup';
@@ -27,6 +41,7 @@ const globalSetup = useGlobalSetup();
 const models = useModels();
 const modelRequest = ref("");
 const addModelErrorMessage = ref("")
+const showInfo = ref(false);
 const addModelError = ref(false);
 const animate = ref(false);
 const emits = defineEmits<{
@@ -101,6 +116,23 @@ function closeAdd() {
   emits("close");
 }
 
+
+
 defineExpose({ onShow });
 
-</script>
+</script>
+
+<style>
+ul {
+  list-style-type: disc;
+  padding-left: 20px;
+}
+.hover-box {
+  position: absolute;
+  background-color: rgba(90, 90, 90, 0.91);
+  border: 1px solid #000000;
+  padding: 10px;
+  border-radius: 10px;
+  z-index: 1;
+}
+</style>
diff --git a/service/model_downloader.py b/service/model_downloader.py
@@ -285,7 +285,6 @@ def move_to_desired_position(self):
                 path.abspath(desired_repo_root_dir_name)
             )
 
-
     def start_report_download_progress(self):
         thread = Thread(target=self.report_download_progress)
         thread.start()