Documents.svelte 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823
  1. <script lang="ts">
  2. import { toast } from 'svelte-sonner';
  3. import { onMount, getContext, createEventDispatcher } from 'svelte';
  4. const dispatch = createEventDispatcher();
  5. import {
  6. getQuerySettings,
  7. updateQuerySettings,
  8. resetVectorDB,
  9. getEmbeddingConfig,
  10. updateEmbeddingConfig,
  11. getRerankingConfig,
  12. updateRerankingConfig,
  13. resetUploadDir,
  14. getRAGConfig,
  15. updateRAGConfig
  16. } from '$lib/apis/retrieval';
  17. import { knowledge, models } from '$lib/stores';
  18. import { getKnowledgeItems } from '$lib/apis/knowledge';
  19. import { uploadDir, deleteAllFiles, deleteFileById } from '$lib/apis/files';
  20. import ResetUploadDirConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
  21. import ResetVectorDBConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
  22. import SensitiveInput from '$lib/components/common/SensitiveInput.svelte';
  23. import Tooltip from '$lib/components/common/Tooltip.svelte';
  24. import Switch from '$lib/components/common/Switch.svelte';
  25. import { text } from '@sveltejs/kit';
  26. import Textarea from '$lib/components/common/Textarea.svelte';
  27. const i18n = getContext('i18n');
  28. let scanDirLoading = false;
  29. let updateEmbeddingModelLoading = false;
  30. let updateRerankingModelLoading = false;
  31. let showResetConfirm = false;
  32. let showResetUploadDirConfirm = false;
  33. let embeddingEngine = '';
  34. let embeddingModel = '';
  35. let embeddingBatchSize = 1;
  36. let rerankingModel = '';
  37. let fileMaxSize = null;
  38. let fileMaxCount = null;
  39. let contentExtractionEngine = 'default';
  40. let tikaServerUrl = '';
  41. let showTikaServerUrl = false;
  42. let textSplitter = '';
  43. let chunkSize = 0;
  44. let chunkOverlap = 0;
  45. let pdfExtractImages = true;
  46. let OpenAIKey = '';
  47. let OpenAIUrl = '';
  48. let querySettings = {
  49. template: '',
  50. r: 0.0,
  51. k: 4,
  52. hybrid: false
  53. };
  54. const embeddingModelUpdateHandler = async () => {
  55. if (embeddingEngine === '' && embeddingModel.split('/').length - 1 > 1) {
  56. toast.error(
  57. $i18n.t(
  58. 'Model filesystem path detected. Model shortname is required for update, cannot continue.'
  59. )
  60. );
  61. return;
  62. }
  63. if (embeddingEngine === 'ollama' && embeddingModel === '') {
  64. toast.error(
  65. $i18n.t(
  66. 'Model filesystem path detected. Model shortname is required for update, cannot continue.'
  67. )
  68. );
  69. return;
  70. }
  71. if (embeddingEngine === 'openai' && embeddingModel === '') {
  72. toast.error(
  73. $i18n.t(
  74. 'Model filesystem path detected. Model shortname is required for update, cannot continue.'
  75. )
  76. );
  77. return;
  78. }
  79. if ((embeddingEngine === 'openai' && OpenAIKey === '') || OpenAIUrl === '') {
  80. toast.error($i18n.t('OpenAI URL/Key required.'));
  81. return;
  82. }
  83. console.log('Update embedding model attempt:', embeddingModel);
  84. updateEmbeddingModelLoading = true;
  85. const res = await updateEmbeddingConfig(localStorage.token, {
  86. embedding_engine: embeddingEngine,
  87. embedding_model: embeddingModel,
  88. ...(embeddingEngine === 'openai' || embeddingEngine === 'ollama'
  89. ? {
  90. embedding_batch_size: embeddingBatchSize
  91. }
  92. : {}),
  93. ...(embeddingEngine === 'openai'
  94. ? {
  95. openai_config: {
  96. key: OpenAIKey,
  97. url: OpenAIUrl
  98. }
  99. }
  100. : {})
  101. }).catch(async (error) => {
  102. toast.error(error);
  103. await setEmbeddingConfig();
  104. return null;
  105. });
  106. updateEmbeddingModelLoading = false;
  107. if (res) {
  108. console.log('embeddingModelUpdateHandler:', res);
  109. if (res.status === true) {
  110. toast.success($i18n.t('Embedding model set to "{{embedding_model}}"', res), {
  111. duration: 1000 * 10
  112. });
  113. }
  114. }
  115. };
  116. const rerankingModelUpdateHandler = async () => {
  117. console.log('Update reranking model attempt:', rerankingModel);
  118. updateRerankingModelLoading = true;
  119. const res = await updateRerankingConfig(localStorage.token, {
  120. reranking_model: rerankingModel
  121. }).catch(async (error) => {
  122. toast.error(error);
  123. await setRerankingConfig();
  124. return null;
  125. });
  126. updateRerankingModelLoading = false;
  127. if (res) {
  128. console.log('rerankingModelUpdateHandler:', res);
  129. if (res.status === true) {
  130. if (rerankingModel === '') {
  131. toast.success($i18n.t('Reranking model disabled', res), {
  132. duration: 1000 * 10
  133. });
  134. } else {
  135. toast.success($i18n.t('Reranking model set to "{{reranking_model}}"', res), {
  136. duration: 1000 * 10
  137. });
  138. }
  139. }
  140. }
  141. };
  142. const submitHandler = async () => {
  143. await embeddingModelUpdateHandler();
  144. if (querySettings.hybrid) {
  145. await rerankingModelUpdateHandler();
  146. }
  147. if (contentExtractionEngine === 'tika' && tikaServerUrl === '') {
  148. toast.error($i18n.t('Tika Server URL required.'));
  149. return;
  150. }
  151. const res = await updateRAGConfig(localStorage.token, {
  152. pdf_extract_images: pdfExtractImages,
  153. file: {
  154. max_size: fileMaxSize === '' ? null : fileMaxSize,
  155. max_count: fileMaxCount === '' ? null : fileMaxCount
  156. },
  157. chunk: {
  158. text_splitter: textSplitter,
  159. chunk_overlap: chunkOverlap,
  160. chunk_size: chunkSize
  161. },
  162. content_extraction: {
  163. engine: contentExtractionEngine,
  164. tika_server_url: tikaServerUrl
  165. }
  166. });
  167. await updateQuerySettings(localStorage.token, querySettings);
  168. dispatch('save');
  169. };
  170. const setEmbeddingConfig = async () => {
  171. const embeddingConfig = await getEmbeddingConfig(localStorage.token);
  172. if (embeddingConfig) {
  173. embeddingEngine = embeddingConfig.embedding_engine;
  174. embeddingModel = embeddingConfig.embedding_model;
  175. embeddingBatchSize = embeddingConfig.embedding_batch_size ?? 1;
  176. OpenAIKey = embeddingConfig.openai_config.key;
  177. OpenAIUrl = embeddingConfig.openai_config.url;
  178. }
  179. };
  180. const setRerankingConfig = async () => {
  181. const rerankingConfig = await getRerankingConfig(localStorage.token);
  182. if (rerankingConfig) {
  183. rerankingModel = rerankingConfig.reranking_model;
  184. }
  185. };
  186. const toggleHybridSearch = async () => {
  187. querySettings.hybrid = !querySettings.hybrid;
  188. querySettings = await updateQuerySettings(localStorage.token, querySettings);
  189. };
  190. onMount(async () => {
  191. await setEmbeddingConfig();
  192. await setRerankingConfig();
  193. querySettings = await getQuerySettings(localStorage.token);
  194. const res = await getRAGConfig(localStorage.token);
  195. if (res) {
  196. pdfExtractImages = res.pdf_extract_images;
  197. textSplitter = res.chunk.text_splitter;
  198. chunkSize = res.chunk.chunk_size;
  199. chunkOverlap = res.chunk.chunk_overlap;
  200. contentExtractionEngine = res.content_extraction.engine;
  201. tikaServerUrl = res.content_extraction.tika_server_url;
  202. showTikaServerUrl = contentExtractionEngine === 'tika';
  203. fileMaxSize = res?.file.max_size ?? '';
  204. fileMaxCount = res?.file.max_count ?? '';
  205. }
  206. });
  207. </script>
  208. <ResetUploadDirConfirmDialog
  209. bind:show={showResetUploadDirConfirm}
  210. on:confirm={async () => {
  211. const res = await deleteAllFiles(localStorage.token).catch((error) => {
  212. toast.error(error);
  213. return null;
  214. });
  215. if (res) {
  216. toast.success($i18n.t('Success'));
  217. }
  218. }}
  219. />
  220. <ResetVectorDBConfirmDialog
  221. bind:show={showResetConfirm}
  222. on:confirm={() => {
  223. const res = resetVectorDB(localStorage.token).catch((error) => {
  224. toast.error(error);
  225. return null;
  226. });
  227. if (res) {
  228. toast.success($i18n.t('Success'));
  229. }
  230. }}
  231. />
  232. <form
  233. class="flex flex-col h-full justify-between space-y-3 text-sm"
  234. on:submit|preventDefault={() => {
  235. submitHandler();
  236. }}
  237. >
  238. <div class=" space-y-2.5 overflow-y-scroll scrollbar-hidden h-full pr-1.5">
  239. <div class="flex flex-col gap-0.5">
  240. <div class=" mb-0.5 text-sm font-medium">{$i18n.t('General Settings')}</div>
  241. <div class=" flex w-full justify-between">
  242. <div class=" self-center text-xs font-medium">{$i18n.t('Embedding Model Engine')}</div>
  243. <div class="flex items-center relative">
  244. <select
  245. class="dark:bg-gray-900 w-fit pr-8 rounded px-2 p-1 text-xs bg-transparent outline-none text-right"
  246. bind:value={embeddingEngine}
  247. placeholder="Select an embedding model engine"
  248. on:change={(e) => {
  249. if (e.target.value === 'ollama') {
  250. embeddingModel = '';
  251. } else if (e.target.value === 'openai') {
  252. embeddingModel = 'text-embedding-3-small';
  253. } else if (e.target.value === '') {
  254. embeddingModel = 'sentence-transformers/all-MiniLM-L6-v2';
  255. }
  256. }}
  257. >
  258. <option value="">{$i18n.t('Default (SentenceTransformers)')}</option>
  259. <option value="ollama">{$i18n.t('Ollama')}</option>
  260. <option value="openai">{$i18n.t('OpenAI')}</option>
  261. </select>
  262. </div>
  263. </div>
  264. {#if embeddingEngine === 'openai'}
  265. <div class="my-0.5 flex gap-2">
  266. <input
  267. class="flex-1 w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
  268. placeholder={$i18n.t('API Base URL')}
  269. bind:value={OpenAIUrl}
  270. required
  271. />
  272. <SensitiveInput placeholder={$i18n.t('API Key')} bind:value={OpenAIKey} />
  273. </div>
  274. {/if}
  275. {#if embeddingEngine === 'ollama' || embeddingEngine === 'openai'}
  276. <div class="flex mt-0.5 space-x-2">
  277. <div class=" self-center text-xs font-medium">{$i18n.t('Embedding Batch Size')}</div>
  278. <div class=" flex-1">
  279. <input
  280. id="steps-range"
  281. type="range"
  282. min="1"
  283. max="2048"
  284. step="1"
  285. bind:value={embeddingBatchSize}
  286. class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
  287. />
  288. </div>
  289. <div class="">
  290. <input
  291. bind:value={embeddingBatchSize}
  292. type="number"
  293. class=" bg-transparent text-center w-14"
  294. min="-2"
  295. max="16000"
  296. step="1"
  297. />
  298. </div>
  299. </div>
  300. {/if}
  301. <div class=" flex w-full justify-between">
  302. <div class=" self-center text-xs font-medium">{$i18n.t('Hybrid Search')}</div>
  303. <button
  304. class="p-1 px-3 text-xs flex rounded transition"
  305. on:click={() => {
  306. toggleHybridSearch();
  307. }}
  308. type="button"
  309. >
  310. {#if querySettings.hybrid === true}
  311. <span class="ml-2 self-center">{$i18n.t('On')}</span>
  312. {:else}
  313. <span class="ml-2 self-center">{$i18n.t('Off')}</span>
  314. {/if}
  315. </button>
  316. </div>
  317. </div>
  318. <hr class="dark:border-gray-850" />
  319. <div class="space-y-2" />
  320. <div>
  321. <div class=" mb-2 text-sm font-medium">{$i18n.t('Embedding Model')}</div>
  322. {#if embeddingEngine === 'ollama'}
  323. <div class="flex w-full">
  324. <div class="flex-1 mr-2">
  325. <select
  326. class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
  327. bind:value={embeddingModel}
  328. placeholder={$i18n.t('Select a model')}
  329. required
  330. >
  331. {#if !embeddingModel}
  332. <option value="" disabled selected>{$i18n.t('Select a model')}</option>
  333. {/if}
  334. {#each $models.filter((m) => m.id && m.ollama && !(m?.preset ?? false)) as model}
  335. <option value={model.id} class="bg-gray-50 dark:bg-gray-700">{model.name}</option>
  336. {/each}
  337. </select>
  338. </div>
  339. </div>
  340. {:else}
  341. <div class="flex w-full">
  342. <div class="flex-1 mr-2">
  343. <input
  344. class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
  345. placeholder={$i18n.t('Set embedding model (e.g. {{model}})', {
  346. model: embeddingModel.slice(-40)
  347. })}
  348. bind:value={embeddingModel}
  349. />
  350. </div>
  351. {#if embeddingEngine === ''}
  352. <button
  353. class="px-2.5 bg-gray-50 hover:bg-gray-200 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded-lg transition"
  354. on:click={() => {
  355. embeddingModelUpdateHandler();
  356. }}
  357. disabled={updateEmbeddingModelLoading}
  358. >
  359. {#if updateEmbeddingModelLoading}
  360. <div class="self-center">
  361. <svg
  362. class=" w-4 h-4"
  363. viewBox="0 0 24 24"
  364. fill="currentColor"
  365. xmlns="http://www.w3.org/2000/svg"
  366. >
  367. <style>
  368. .spinner_ajPY {
  369. transform-origin: center;
  370. animation: spinner_AtaB 0.75s infinite linear;
  371. }
  372. @keyframes spinner_AtaB {
  373. 100% {
  374. transform: rotate(360deg);
  375. }
  376. }
  377. </style>
  378. <path
  379. d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
  380. opacity=".25"
  381. />
  382. <path
  383. d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
  384. class="spinner_ajPY"
  385. />
  386. </svg>
  387. </div>
  388. {:else}
  389. <svg
  390. xmlns="http://www.w3.org/2000/svg"
  391. viewBox="0 0 16 16"
  392. fill="currentColor"
  393. class="w-4 h-4"
  394. >
  395. <path
  396. d="M8.75 2.75a.75.75 0 0 0-1.5 0v5.69L5.03 6.22a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 0 0-1.06-1.06L8.75 8.44V2.75Z"
  397. />
  398. <path
  399. d="M3.5 9.75a.75.75 0 0 0-1.5 0v1.5A2.75 2.75 0 0 0 4.75 14h6.5A2.75 2.75 0 0 0 14 11.25v-1.5a.75.75 0 0 0-1.5 0v1.5c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25v-1.5Z"
  400. />
  401. </svg>
  402. {/if}
  403. </button>
  404. {/if}
  405. </div>
  406. {/if}
  407. <div class="mt-2 mb-1 text-xs text-gray-400 dark:text-gray-500">
  408. {$i18n.t(
  409. 'Warning: If you update or change your embedding model, you will need to re-import all documents.'
  410. )}
  411. </div>
  412. {#if querySettings.hybrid === true}
  413. <div class=" ">
  414. <div class=" mb-2 text-sm font-medium">{$i18n.t('Reranking Model')}</div>
  415. <div class="flex w-full">
  416. <div class="flex-1 mr-2">
  417. <input
  418. class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
  419. placeholder={$i18n.t('Set reranking model (e.g. {{model}})', {
  420. model: 'BAAI/bge-reranker-v2-m3'
  421. })}
  422. bind:value={rerankingModel}
  423. />
  424. </div>
  425. <button
  426. class="px-2.5 bg-gray-50 hover:bg-gray-200 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded-lg transition"
  427. on:click={() => {
  428. rerankingModelUpdateHandler();
  429. }}
  430. disabled={updateRerankingModelLoading}
  431. >
  432. {#if updateRerankingModelLoading}
  433. <div class="self-center">
  434. <svg
  435. class=" w-4 h-4"
  436. viewBox="0 0 24 24"
  437. fill="currentColor"
  438. xmlns="http://www.w3.org/2000/svg"
  439. >
  440. <style>
  441. .spinner_ajPY {
  442. transform-origin: center;
  443. animation: spinner_AtaB 0.75s infinite linear;
  444. }
  445. @keyframes spinner_AtaB {
  446. 100% {
  447. transform: rotate(360deg);
  448. }
  449. }
  450. </style>
  451. <path
  452. d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
  453. opacity=".25"
  454. />
  455. <path
  456. d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
  457. class="spinner_ajPY"
  458. />
  459. </svg>
  460. </div>
  461. {:else}
  462. <svg
  463. xmlns="http://www.w3.org/2000/svg"
  464. viewBox="0 0 16 16"
  465. fill="currentColor"
  466. class="w-4 h-4"
  467. >
  468. <path
  469. d="M8.75 2.75a.75.75 0 0 0-1.5 0v5.69L5.03 6.22a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 0 0-1.06-1.06L8.75 8.44V2.75Z"
  470. />
  471. <path
  472. d="M3.5 9.75a.75.75 0 0 0-1.5 0v1.5A2.75 2.75 0 0 0 4.75 14h6.5A2.75 2.75 0 0 0 14 11.25v-1.5a.75.75 0 0 0-1.5 0v1.5c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25v-1.5Z"
  473. />
  474. </svg>
  475. {/if}
  476. </button>
  477. </div>
  478. </div>
  479. {/if}
  480. </div>
  481. <hr class=" dark:border-gray-850" />
  482. <div class="">
  483. <div class="text-sm font-medium mb-1">{$i18n.t('Content Extraction')}</div>
  484. <div class="flex w-full justify-between">
  485. <div class="self-center text-xs font-medium">{$i18n.t('Engine')}</div>
  486. <div class="flex items-center relative">
  487. <select
  488. class="dark:bg-gray-900 w-fit pr-8 rounded px-2 text-xs bg-transparent outline-none text-right"
  489. bind:value={contentExtractionEngine}
  490. on:change={(e) => {
  491. showTikaServerUrl = e.target.value === 'tika';
  492. }}
  493. >
  494. <option value="">{$i18n.t('Default')} </option>
  495. <option value="tika">{$i18n.t('Tika')}</option>
  496. </select>
  497. </div>
  498. </div>
  499. {#if showTikaServerUrl}
  500. <div class="flex w-full mt-1">
  501. <div class="flex-1 mr-2">
  502. <input
  503. class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
  504. placeholder={$i18n.t('Enter Tika Server URL')}
  505. bind:value={tikaServerUrl}
  506. />
  507. </div>
  508. </div>
  509. {/if}
  510. </div>
  511. <hr class=" dark:border-gray-850" />
  512. <div class=" ">
  513. <div class=" text-sm font-medium mb-1">{$i18n.t('Query Params')}</div>
  514. <div class=" flex gap-1.5">
  515. <div class="flex flex-col w-full gap-1">
  516. <div class=" text-xs font-medium w-full">{$i18n.t('Top K')}</div>
  517. <div class="w-full">
  518. <input
  519. class=" w-full rounded-lg py-1.5 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
  520. type="number"
  521. placeholder={$i18n.t('Enter Top K')}
  522. bind:value={querySettings.k}
  523. autocomplete="off"
  524. min="0"
  525. />
  526. </div>
  527. </div>
  528. {#if querySettings.hybrid === true}
  529. <div class=" flex flex-col w-full gap-1">
  530. <div class="text-xs font-medium w-full">
  531. {$i18n.t('Minimum Score')}
  532. </div>
  533. <div class="w-full">
  534. <input
  535. class=" w-full rounded-lg py-1.5 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
  536. type="number"
  537. step="0.01"
  538. placeholder={$i18n.t('Enter Score')}
  539. bind:value={querySettings.r}
  540. autocomplete="off"
  541. min="0.0"
  542. title={$i18n.t('The score should be a value between 0.0 (0%) and 1.0 (100%).')}
  543. />
  544. </div>
  545. </div>
  546. {/if}
  547. </div>
  548. {#if querySettings.hybrid === true}
  549. <div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
  550. {$i18n.t(
  551. 'Note: If you set a minimum score, the search will only return documents with a score greater than or equal to the minimum score.'
  552. )}
  553. </div>
  554. {/if}
  555. <div class="mt-2">
  556. <div class=" mb-1 text-xs font-medium">{$i18n.t('RAG Template')}</div>
  557. <Tooltip
  558. content={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
  559. placement="top-start"
  560. >
  561. <Textarea
  562. bind:value={querySettings.template}
  563. placeholder={$i18n.t('Leave empty to use the default prompt, or enter a custom prompt')}
  564. />
  565. </Tooltip>
  566. </div>
  567. </div>
  568. <hr class=" dark:border-gray-850" />
  569. <div class=" ">
  570. <div class="mb-1 text-sm font-medium">{$i18n.t('Chunk Params')}</div>
  571. <div class="flex w-full justify-between mb-1.5">
  572. <div class="self-center text-xs font-medium">{$i18n.t('Text Splitter')}</div>
  573. <div class="flex items-center relative">
  574. <select
  575. class="dark:bg-gray-900 w-fit pr-8 rounded px-2 text-xs bg-transparent outline-none text-right"
  576. bind:value={textSplitter}
  577. >
  578. <option value="">{$i18n.t('Default')} ({$i18n.t('Character')})</option>
  579. <option value="token">{$i18n.t('Token')} ({$i18n.t('Tiktoken')})</option>
  580. </select>
  581. </div>
  582. </div>
  583. <div class=" flex gap-1.5">
  584. <div class=" w-full justify-between">
  585. <div class="self-center text-xs font-medium min-w-fit mb-1">{$i18n.t('Chunk Size')}</div>
  586. <div class="self-center">
  587. <input
  588. class=" w-full rounded-lg py-1.5 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
  589. type="number"
  590. placeholder={$i18n.t('Enter Chunk Size')}
  591. bind:value={chunkSize}
  592. autocomplete="off"
  593. min="0"
  594. />
  595. </div>
  596. </div>
  597. <div class="w-full">
  598. <div class=" self-center text-xs font-medium min-w-fit mb-1">
  599. {$i18n.t('Chunk Overlap')}
  600. </div>
  601. <div class="self-center">
  602. <input
  603. class="w-full rounded-lg py-1.5 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
  604. type="number"
  605. placeholder={$i18n.t('Enter Chunk Overlap')}
  606. bind:value={chunkOverlap}
  607. autocomplete="off"
  608. min="0"
  609. />
  610. </div>
  611. </div>
  612. </div>
  613. <div class="my-2">
  614. <div class="flex justify-between items-center text-xs">
  615. <div class=" text-xs font-medium">{$i18n.t('PDF Extract Images (OCR)')}</div>
  616. <div>
  617. <Switch bind:state={pdfExtractImages} />
  618. </div>
  619. </div>
  620. </div>
  621. </div>
  622. <hr class=" dark:border-gray-850" />
  623. <div class="">
  624. <div class="text-sm font-medium mb-1">{$i18n.t('Files')}</div>
  625. <div class=" flex gap-1.5">
  626. <div class="w-full">
  627. <div class=" self-center text-xs font-medium min-w-fit mb-1">
  628. {$i18n.t('Max Upload Size')}
  629. </div>
  630. <div class="self-center">
  631. <Tooltip
  632. content={$i18n.t(
  633. 'The maximum file size in MB. If the file size exceeds this limit, the file will not be uploaded.'
  634. )}
  635. placement="top-start"
  636. >
  637. <input
  638. class="w-full rounded-lg py-1.5 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
  639. type="number"
  640. placeholder={$i18n.t('Leave empty for unlimited')}
  641. bind:value={fileMaxSize}
  642. autocomplete="off"
  643. min="0"
  644. />
  645. </Tooltip>
  646. </div>
  647. </div>
  648. <div class=" w-full">
  649. <div class="self-center text-xs font-medium min-w-fit mb-1">
  650. {$i18n.t('Max Upload Count')}
  651. </div>
  652. <div class="self-center">
  653. <Tooltip
  654. content={$i18n.t(
  655. 'The maximum number of files that can be used at once in chat. If the number of files exceeds this limit, the files will not be uploaded.'
  656. )}
  657. placement="top-start"
  658. >
  659. <input
  660. class=" w-full rounded-lg py-1.5 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-none"
  661. type="number"
  662. placeholder={$i18n.t('Leave empty for unlimited')}
  663. bind:value={fileMaxCount}
  664. autocomplete="off"
  665. min="0"
  666. />
  667. </Tooltip>
  668. </div>
  669. </div>
  670. </div>
  671. </div>
  672. <hr class=" dark:border-gray-850" />
  673. <div>
  674. <button
  675. class=" flex rounded-xl py-2 px-3.5 w-full hover:bg-gray-200 dark:hover:bg-gray-800 transition"
  676. on:click={() => {
  677. showResetUploadDirConfirm = true;
  678. }}
  679. type="button"
  680. >
  681. <div class=" self-center mr-3">
  682. <svg
  683. xmlns="http://www.w3.org/2000/svg"
  684. viewBox="0 0 24 24"
  685. fill="currentColor"
  686. class="size-4"
  687. >
  688. <path
  689. fill-rule="evenodd"
  690. d="M5.625 1.5H9a3.75 3.75 0 0 1 3.75 3.75v1.875c0 1.036.84 1.875 1.875 1.875H16.5a3.75 3.75 0 0 1 3.75 3.75v7.875c0 1.035-.84 1.875-1.875 1.875H5.625a1.875 1.875 0 0 1-1.875-1.875V3.375c0-1.036.84-1.875 1.875-1.875ZM9.75 14.25a.75.75 0 0 0 0 1.5H15a.75.75 0 0 0 0-1.5H9.75Z"
  691. clip-rule="evenodd"
  692. />
  693. <path
  694. d="M14.25 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 16.5 7.5h-1.875a.375.375 0 0 1-.375-.375V5.25Z"
  695. />
  696. </svg>
  697. </div>
  698. <div class=" self-center text-sm font-medium">{$i18n.t('Reset Upload Directory')}</div>
  699. </button>
  700. <button
  701. class=" flex rounded-xl py-2 px-3.5 w-full hover:bg-gray-200 dark:hover:bg-gray-800 transition"
  702. on:click={() => {
  703. showResetConfirm = true;
  704. }}
  705. type="button"
  706. >
  707. <div class=" self-center mr-3">
  708. <svg
  709. xmlns="http://www.w3.org/2000/svg"
  710. viewBox="0 0 16 16"
  711. fill="currentColor"
  712. class="w-4 h-4"
  713. >
  714. <path
  715. fill-rule="evenodd"
  716. d="M3.5 2A1.5 1.5 0 0 0 2 3.5v9A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5v-7A1.5 1.5 0 0 0 12.5 4H9.621a1.5 1.5 0 0 1-1.06-.44L7.439 2.44A1.5 1.5 0 0 0 6.38 2H3.5Zm6.75 7.75a.75.75 0 0 0 0-1.5h-4.5a.75.75 0 0 0 0 1.5h4.5Z"
  717. clip-rule="evenodd"
  718. />
  719. </svg>
  720. </div>
  721. <div class=" self-center text-sm font-medium">
  722. {$i18n.t('Reset Vector Storage/Knowledge')}
  723. </div>
  724. </button>
  725. </div>
  726. </div>
  727. <div class="flex justify-end pt-3 text-sm font-medium">
  728. <button
  729. class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
  730. type="submit"
  731. >
  732. {$i18n.t('Save')}
  733. </button>
  734. </div>
  735. </form>