General.svelte 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  1. <script lang="ts">
  2. import { getDocs } from '$lib/apis/documents';
  3. import {
  4. getChunkParams,
  5. getQuerySettings,
  6. scanDocs,
  7. updateChunkParams,
  8. updateQuerySettings
  9. } from '$lib/apis/rag';
  10. import { documents } from '$lib/stores';
  11. import { onMount, getContext } from 'svelte';
  12. import { toast } from 'svelte-sonner';
  13. const i18n = getContext('i18n');
  14. export let saveHandler: Function;
  15. let loading = false;
  16. let chunkSize = 0;
  17. let chunkOverlap = 0;
  18. let querySettings = {
  19. template: '',
  20. k: 4
  21. };
  22. const scanHandler = async () => {
  23. loading = true;
  24. const res = await scanDocs(localStorage.token);
  25. loading = false;
  26. if (res) {
  27. await documents.set(await getDocs(localStorage.token));
  28. toast.success($i18n.t('Scan complete!'));
  29. }
  30. };
  31. const submitHandler = async () => {
  32. const res = await updateChunkParams(localStorage.token, chunkSize, chunkOverlap);
  33. querySettings = await updateQuerySettings(localStorage.token, querySettings);
  34. };
  35. onMount(async () => {
  36. const res = await getChunkParams(localStorage.token);
  37. if (res) {
  38. chunkSize = res.chunk_size;
  39. chunkOverlap = res.chunk_overlap;
  40. }
  41. querySettings = await getQuerySettings(localStorage.token);
  42. });
  43. </script>
  44. <form
  45. class="flex flex-col h-full justify-between space-y-3 text-sm"
  46. on:submit|preventDefault={() => {
  47. submitHandler();
  48. saveHandler();
  49. }}
  50. >
  51. <div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-80">
  52. <div>
  53. <div class=" mb-2 text-sm font-medium">{$i18n.t('General Settings')}</div>
  54. <div class=" flex w-full justify-between">
  55. <div class=" self-center text-xs font-medium">
  56. {$i18n.t('Scan for documents from {{path}}', { path: '/data/docs' })}
  57. </div>
  58. <button
  59. class=" self-center text-xs p-1 px-3 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 rounded flex flex-row space-x-1 items-center {loading
  60. ? ' cursor-not-allowed'
  61. : ''}"
  62. on:click={() => {
  63. scanHandler();
  64. console.log('check');
  65. }}
  66. type="button"
  67. disabled={loading}
  68. >
  69. <div class="self-center font-medium">{$i18n.t('Scan')}</div>
  70. <!-- <svg
  71. xmlns="http://www.w3.org/2000/svg"
  72. viewBox="0 0 16 16"
  73. fill="currentColor"
  74. class="w-3 h-3"
  75. >
  76. <path
  77. fill-rule="evenodd"
  78. d="M13.836 2.477a.75.75 0 0 1 .75.75v3.182a.75.75 0 0 1-.75.75h-3.182a.75.75 0 0 1 0-1.5h1.37l-.84-.841a4.5 4.5 0 0 0-7.08.932.75.75 0 0 1-1.3-.75 6 6 0 0 1 9.44-1.242l.842.84V3.227a.75.75 0 0 1 .75-.75Zm-.911 7.5A.75.75 0 0 1 13.199 11a6 6 0 0 1-9.44 1.241l-.84-.84v1.371a.75.75 0 0 1-1.5 0V9.591a.75.75 0 0 1 .75-.75H5.35a.75.75 0 0 1 0 1.5H3.98l.841.841a4.5 4.5 0 0 0 7.08-.932.75.75 0 0 1 1.025-.273Z"
  79. clip-rule="evenodd"
  80. />
  81. </svg> -->
  82. {#if loading}
  83. <div class="ml-3 self-center">
  84. <svg
  85. class=" w-3 h-3"
  86. viewBox="0 0 24 24"
  87. fill="currentColor"
  88. xmlns="http://www.w3.org/2000/svg"
  89. ><style>
  90. .spinner_ajPY {
  91. transform-origin: center;
  92. animation: spinner_AtaB 0.75s infinite linear;
  93. }
  94. @keyframes spinner_AtaB {
  95. 100% {
  96. transform: rotate(360deg);
  97. }
  98. }
  99. </style><path
  100. 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"
  101. opacity=".25"
  102. /><path
  103. 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"
  104. class="spinner_ajPY"
  105. /></svg
  106. >
  107. </div>
  108. {/if}
  109. </button>
  110. </div>
  111. </div>
  112. <hr class=" dark:border-gray-700" />
  113. <div class=" ">
  114. <div class=" text-sm font-medium">{$i18n.t('Chunk Params')}</div>
  115. <div class=" flex">
  116. <div class=" flex w-full justify-between">
  117. <div class="self-center text-xs font-medium min-w-fit">{$i18n.t('Chunk Size')}</div>
  118. <div class="self-center p-3">
  119. <input
  120. class=" w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600"
  121. type="number"
  122. placeholder={$i18n.t('Enter Chunk Size')}
  123. bind:value={chunkSize}
  124. autocomplete="off"
  125. min="0"
  126. />
  127. </div>
  128. </div>
  129. <div class="flex w-full">
  130. <div class=" self-center text-xs font-medium min-w-fit">{$i18n.t('Chunk Overlap')}</div>
  131. <div class="self-center p-3">
  132. <input
  133. class="w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600"
  134. type="number"
  135. placeholder={$i18n.t('Enter Chunk Overlap')}
  136. bind:value={chunkOverlap}
  137. autocomplete="off"
  138. min="0"
  139. />
  140. </div>
  141. </div>
  142. </div>
  143. <div class=" text-sm font-medium">{$i18n.t('Query Params')}</div>
  144. <div class=" flex">
  145. <div class=" flex w-full justify-between">
  146. <div class="self-center text-xs font-medium flex-1">{$i18n.t('Top K')}</div>
  147. <div class="self-center p-3">
  148. <input
  149. class=" w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600"
  150. type="number"
  151. placeholder={$i18n.t('Enter Top K')}
  152. bind:value={querySettings.k}
  153. autocomplete="off"
  154. min="0"
  155. />
  156. </div>
  157. </div>
  158. <!-- <div class="flex w-full">
  159. <div class=" self-center text-xs font-medium min-w-fit">Chunk Overlap</div>
  160. <div class="self-center p-3">
  161. <input
  162. class="w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600"
  163. type="number"
  164. placeholder="Enter Chunk Overlap"
  165. bind:value={chunkOverlap}
  166. autocomplete="off"
  167. min="0"
  168. />
  169. </div>
  170. </div> -->
  171. </div>
  172. <div>
  173. <div class=" mb-2.5 text-sm font-medium">{$i18n.t('RAG Template')}</div>
  174. <textarea
  175. bind:value={querySettings.template}
  176. class="w-full rounded p-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none resize-none"
  177. rows="4"
  178. />
  179. </div>
  180. </div>
  181. </div>
  182. <div class="flex justify-end pt-3 text-sm font-medium">
  183. <button
  184. class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
  185. type="submit"
  186. >
  187. {$i18n.t('Save')}
  188. </button>
  189. </div>
  190. </form>