SettingsModal.svelte 37 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153
  1. <script lang="ts">
  2. import Modal from '../common/Modal.svelte';
  3. import { WEB_UI_VERSION, OLLAMA_API_BASE_URL } from '$lib/constants';
  4. import toast from 'svelte-french-toast';
  5. import { onMount } from 'svelte';
  6. import { config, models, settings, user } from '$lib/stores';
  7. import { splitStream, getGravatarURL } from '$lib/utils';
  8. export let show = false;
  9. const saveSettings = async (updated) => {
  10. console.log(updated);
  11. await settings.set({ ...$settings, ...updated });
  12. await models.set(await getModels());
  13. localStorage.setItem('settings', JSON.stringify($settings));
  14. };
  15. let selectedTab = 'general';
  16. // General
  17. let API_BASE_URL = OLLAMA_API_BASE_URL;
  18. let theme = 'dark';
  19. let system = '';
  20. // Advanced
  21. let requestFormat = '';
  22. let seed = 0;
  23. let temperature = 0.8;
  24. let repeat_penalty = 1.1;
  25. let top_k = 40;
  26. let top_p = 0.9;
  27. let num_ctx = 2048;
  28. // Models
  29. let modelTag = '';
  30. let deleteModelTag = '';
  31. let digest = '';
  32. let pullProgress = null;
  33. // Addons
  34. let titleAutoGenerate = true;
  35. let speechAutoSend = false;
  36. let gravatarEmail = '';
  37. let OPENAI_API_KEY = '';
  38. // Auth
  39. let authEnabled = false;
  40. let authType = 'Basic';
  41. let authContent = '';
  42. const checkOllamaConnection = async () => {
  43. if (API_BASE_URL === '') {
  44. API_BASE_URL = OLLAMA_API_BASE_URL;
  45. }
  46. const _models = await getModels(API_BASE_URL, 'ollama');
  47. if (_models.length > 0) {
  48. toast.success('Server connection verified');
  49. await models.set(_models);
  50. saveSettings({
  51. API_BASE_URL: API_BASE_URL
  52. });
  53. }
  54. };
  55. const toggleTheme = async () => {
  56. if (theme === 'dark') {
  57. theme = 'light';
  58. } else {
  59. theme = 'dark';
  60. }
  61. localStorage.theme = theme;
  62. document.documentElement.classList.remove(theme === 'dark' ? 'light' : 'dark');
  63. document.documentElement.classList.add(theme);
  64. };
  65. const toggleRequestFormat = async () => {
  66. if (requestFormat === '') {
  67. requestFormat = 'json';
  68. } else {
  69. requestFormat = '';
  70. }
  71. saveSettings({ requestFormat: requestFormat !== '' ? requestFormat : undefined });
  72. };
  73. const toggleSpeechAutoSend = async () => {
  74. speechAutoSend = !speechAutoSend;
  75. saveSettings({ speechAutoSend: speechAutoSend });
  76. };
  77. const toggleTitleAutoGenerate = async () => {
  78. titleAutoGenerate = !titleAutoGenerate;
  79. saveSettings({ titleAutoGenerate: titleAutoGenerate });
  80. };
  81. const toggleAuthHeader = async () => {
  82. authEnabled = !authEnabled;
  83. };
  84. const pullModelHandler = async () => {
  85. const res = await fetch(`${API_BASE_URL}/pull`, {
  86. method: 'POST',
  87. headers: {
  88. 'Content-Type': 'text/event-stream',
  89. ...($settings.authHeader && { Authorization: $settings.authHeader }),
  90. ...($user && { Authorization: `Bearer ${localStorage.token}` })
  91. },
  92. body: JSON.stringify({
  93. name: modelTag
  94. })
  95. });
  96. const reader = res.body
  97. .pipeThrough(new TextDecoderStream())
  98. .pipeThrough(splitStream('\n'))
  99. .getReader();
  100. while (true) {
  101. const { value, done } = await reader.read();
  102. if (done) break;
  103. try {
  104. let lines = value.split('\n');
  105. for (const line of lines) {
  106. if (line !== '') {
  107. console.log(line);
  108. let data = JSON.parse(line);
  109. console.log(data);
  110. if (data.error) {
  111. throw data.error;
  112. }
  113. if (data.detail) {
  114. throw data.detail;
  115. }
  116. if (data.status) {
  117. if (!data.digest) {
  118. toast.success(data.status);
  119. } else {
  120. digest = data.digest;
  121. if (data.completed) {
  122. pullProgress = Math.round((data.completed / data.total) * 1000) / 10;
  123. } else {
  124. pullProgress = 100;
  125. }
  126. }
  127. }
  128. }
  129. }
  130. } catch (error) {
  131. console.log(error);
  132. toast.error(error);
  133. }
  134. }
  135. modelTag = '';
  136. models.set(await getModels());
  137. };
  138. const deleteModelHandler = async () => {
  139. const res = await fetch(`${API_BASE_URL}/delete`, {
  140. method: 'DELETE',
  141. headers: {
  142. 'Content-Type': 'text/event-stream',
  143. ...($settings.authHeader && { Authorization: $settings.authHeader }),
  144. ...($user && { Authorization: `Bearer ${localStorage.token}` })
  145. },
  146. body: JSON.stringify({
  147. name: deleteModelTag
  148. })
  149. });
  150. const reader = res.body
  151. .pipeThrough(new TextDecoderStream())
  152. .pipeThrough(splitStream('\n'))
  153. .getReader();
  154. while (true) {
  155. const { value, done } = await reader.read();
  156. if (done) break;
  157. try {
  158. let lines = value.split('\n');
  159. for (const line of lines) {
  160. if (line !== '' && line !== 'null') {
  161. console.log(line);
  162. let data = JSON.parse(line);
  163. console.log(data);
  164. if (data.error) {
  165. throw data.error;
  166. }
  167. if (data.detail) {
  168. throw data.detail;
  169. }
  170. if (data.status) {
  171. }
  172. } else {
  173. toast.success(`Deleted ${deleteModelTag}`);
  174. }
  175. }
  176. } catch (error) {
  177. console.log(error);
  178. toast.error(error);
  179. }
  180. }
  181. deleteModelTag = '';
  182. models.set(await getModels());
  183. };
  184. $: if (show) {
  185. let settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
  186. console.log(settings);
  187. theme = localStorage.theme ?? 'dark';
  188. API_BASE_URL = settings.API_BASE_URL ?? OLLAMA_API_BASE_URL;
  189. system = settings.system ?? '';
  190. requestFormat = settings.requestFormat ?? '';
  191. seed = settings.seed ?? 0;
  192. temperature = settings.temperature ?? 0.8;
  193. repeat_penalty = settings.repeat_penalty ?? 1.1;
  194. top_k = settings.top_k ?? 40;
  195. top_p = settings.top_p ?? 0.9;
  196. num_ctx = settings.num_ctx ?? 2048;
  197. titleAutoGenerate = settings.titleAutoGenerate ?? true;
  198. speechAutoSend = settings.speechAutoSend ?? false;
  199. gravatarEmail = settings.gravatarEmail ?? '';
  200. OPENAI_API_KEY = settings.OPENAI_API_KEY ?? '';
  201. }
  202. const getModels = async (url = '', type = 'all') => {
  203. let models = [];
  204. const res = await fetch(`${url ? url : $settings?.API_BASE_URL ?? OLLAMA_API_BASE_URL}/tags`, {
  205. method: 'GET',
  206. headers: {
  207. Accept: 'application/json',
  208. 'Content-Type': 'application/json',
  209. ...($settings.authHeader && { Authorization: $settings.authHeader }),
  210. ...($user && { Authorization: `Bearer ${localStorage.token}` })
  211. }
  212. })
  213. .then(async (res) => {
  214. if (!res.ok) throw await res.json();
  215. return res.json();
  216. })
  217. .catch((error) => {
  218. console.log(error);
  219. if ('detail' in error) {
  220. toast.error(error.detail);
  221. } else {
  222. toast.error('Server connection failed');
  223. }
  224. return null;
  225. });
  226. console.log(res);
  227. models.push(...(res?.models ?? []));
  228. // If OpenAI API Key exists
  229. if (type === 'all' && $settings.OPENAI_API_KEY) {
  230. // Validate OPENAI_API_KEY
  231. const openaiModelRes = await fetch(`https://api.openai.com/v1/models`, {
  232. method: 'GET',
  233. headers: {
  234. 'Content-Type': 'application/json',
  235. Authorization: `Bearer ${$settings.OPENAI_API_KEY}`
  236. }
  237. })
  238. .then(async (res) => {
  239. if (!res.ok) throw await res.json();
  240. return res.json();
  241. })
  242. .catch((error) => {
  243. console.log(error);
  244. toast.error(`OpenAI: ${error?.error?.message ?? 'Network Problem'}`);
  245. return null;
  246. });
  247. const openAIModels = openaiModelRes?.data ?? null;
  248. models.push(
  249. ...(openAIModels
  250. ? [
  251. { name: 'hr' },
  252. ...openAIModels
  253. .map((model) => ({ name: model.id, label: 'OpenAI' }))
  254. .filter((model) => model.name.includes('gpt'))
  255. ]
  256. : [])
  257. );
  258. }
  259. return models;
  260. };
  261. onMount(() => {
  262. let settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
  263. authEnabled = settings.authHeader !== undefined ? true : false;
  264. if (authEnabled) {
  265. authType = settings.authHeader.split(' ')[0];
  266. authContent = settings.authHeader.split(' ')[1];
  267. }
  268. });
  269. </script>
  270. <Modal bind:show>
  271. <div>
  272. <div class=" flex justify-between dark:text-gray-300 px-5 py-4">
  273. <div class=" text-lg font-medium self-center">Settings</div>
  274. <button
  275. class="self-center"
  276. on:click={() => {
  277. show = false;
  278. }}
  279. >
  280. <svg
  281. xmlns="http://www.w3.org/2000/svg"
  282. viewBox="0 0 20 20"
  283. fill="currentColor"
  284. class="w-5 h-5"
  285. >
  286. <path
  287. d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
  288. />
  289. </svg>
  290. </button>
  291. </div>
  292. <hr class=" dark:border-gray-800" />
  293. <div class="flex flex-col md:flex-row w-full p-4 md:space-x-4">
  294. <div
  295. class="tabs flex flex-row overflow-x-auto space-x-1 md:space-x-0 md:space-y-1 md:flex-col flex-1 md:flex-none md:w-40 dark:text-gray-200 text-xs text-left mb-3 md:mb-0"
  296. >
  297. <button
  298. class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
  299. 'general'
  300. ? 'bg-gray-200 dark:bg-gray-700'
  301. : ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
  302. on:click={() => {
  303. selectedTab = 'general';
  304. }}
  305. >
  306. <div class=" self-center mr-2">
  307. <svg
  308. xmlns="http://www.w3.org/2000/svg"
  309. viewBox="0 0 20 20"
  310. fill="currentColor"
  311. class="w-4 h-4"
  312. >
  313. <path
  314. fill-rule="evenodd"
  315. d="M8.34 1.804A1 1 0 019.32 1h1.36a1 1 0 01.98.804l.295 1.473c.497.144.971.342 1.416.587l1.25-.834a1 1 0 011.262.125l.962.962a1 1 0 01.125 1.262l-.834 1.25c.245.445.443.919.587 1.416l1.473.294a1 1 0 01.804.98v1.361a1 1 0 01-.804.98l-1.473.295a6.95 6.95 0 01-.587 1.416l.834 1.25a1 1 0 01-.125 1.262l-.962.962a1 1 0 01-1.262.125l-1.25-.834a6.953 6.953 0 01-1.416.587l-.294 1.473a1 1 0 01-.98.804H9.32a1 1 0 01-.98-.804l-.295-1.473a6.957 6.957 0 01-1.416-.587l-1.25.834a1 1 0 01-1.262-.125l-.962-.962a1 1 0 01-.125-1.262l.834-1.25a6.957 6.957 0 01-.587-1.416l-1.473-.294A1 1 0 011 10.68V9.32a1 1 0 01.804-.98l1.473-.295c.144-.497.342-.971.587-1.416l-.834-1.25a1 1 0 01.125-1.262l.962-.962A1 1 0 015.38 3.03l1.25.834a6.957 6.957 0 011.416-.587l.294-1.473zM13 10a3 3 0 11-6 0 3 3 0 016 0z"
  316. clip-rule="evenodd"
  317. />
  318. </svg>
  319. </div>
  320. <div class=" self-center">General</div>
  321. </button>
  322. <button
  323. class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
  324. 'advanced'
  325. ? 'bg-gray-200 dark:bg-gray-700'
  326. : ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
  327. on:click={() => {
  328. selectedTab = 'advanced';
  329. }}
  330. >
  331. <div class=" self-center mr-2">
  332. <svg
  333. xmlns="http://www.w3.org/2000/svg"
  334. viewBox="0 0 20 20"
  335. fill="currentColor"
  336. class="w-4 h-4"
  337. >
  338. <path
  339. d="M17 2.75a.75.75 0 00-1.5 0v5.5a.75.75 0 001.5 0v-5.5zM17 15.75a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0v-1.5zM3.75 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5a.75.75 0 01.75-.75zM4.5 2.75a.75.75 0 00-1.5 0v5.5a.75.75 0 001.5 0v-5.5zM10 11a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 11zM10.75 2.75a.75.75 0 00-1.5 0v1.5a.75.75 0 001.5 0v-1.5zM10 6a2 2 0 100 4 2 2 0 000-4zM3.75 10a2 2 0 100 4 2 2 0 000-4zM16.25 10a2 2 0 100 4 2 2 0 000-4z"
  340. />
  341. </svg>
  342. </div>
  343. <div class=" self-center">Advanced</div>
  344. </button>
  345. <button
  346. class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
  347. 'models'
  348. ? 'bg-gray-200 dark:bg-gray-700'
  349. : ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
  350. on:click={() => {
  351. selectedTab = 'models';
  352. }}
  353. >
  354. <div class=" self-center mr-2">
  355. <svg
  356. xmlns="http://www.w3.org/2000/svg"
  357. viewBox="0 0 20 20"
  358. fill="currentColor"
  359. class="w-4 h-4"
  360. >
  361. <path
  362. fill-rule="evenodd"
  363. d="M10 1c3.866 0 7 1.79 7 4s-3.134 4-7 4-7-1.79-7-4 3.134-4 7-4zm5.694 8.13c.464-.264.91-.583 1.306-.952V10c0 2.21-3.134 4-7 4s-7-1.79-7-4V8.178c.396.37.842.688 1.306.953C5.838 10.006 7.854 10.5 10 10.5s4.162-.494 5.694-1.37zM3 13.179V15c0 2.21 3.134 4 7 4s7-1.79 7-4v-1.822c-.396.37-.842.688-1.306.953-1.532.875-3.548 1.369-5.694 1.369s-4.162-.494-5.694-1.37A7.009 7.009 0 013 13.179z"
  364. clip-rule="evenodd"
  365. />
  366. </svg>
  367. </div>
  368. <div class=" self-center">Models</div>
  369. </button>
  370. <button
  371. class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
  372. 'addons'
  373. ? 'bg-gray-200 dark:bg-gray-700'
  374. : ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
  375. on:click={() => {
  376. selectedTab = 'addons';
  377. }}
  378. >
  379. <div class=" self-center mr-2">
  380. <svg
  381. xmlns="http://www.w3.org/2000/svg"
  382. viewBox="0 0 20 20"
  383. fill="currentColor"
  384. class="w-4 h-4"
  385. >
  386. <path
  387. d="M12 4.467c0-.405.262-.75.559-1.027.276-.257.441-.584.441-.94 0-.828-.895-1.5-2-1.5s-2 .672-2 1.5c0 .362.171.694.456.953.29.265.544.6.544.994a.968.968 0 01-1.024.974 39.655 39.655 0 01-3.014-.306.75.75 0 00-.847.847c.14.993.242 1.999.306 3.014A.968.968 0 014.447 10c-.393 0-.729-.253-.994-.544C3.194 9.17 2.862 9 2.5 9 1.672 9 1 9.895 1 11s.672 2 1.5 2c.356 0 .683-.165.94-.441.276-.297.622-.559 1.027-.559a.997.997 0 011.004 1.03 39.747 39.747 0 01-.319 3.734.75.75 0 00.64.842c1.05.146 2.111.252 3.184.318A.97.97 0 0010 16.948c0-.394-.254-.73-.545-.995C9.171 15.693 9 15.362 9 15c0-.828.895-1.5 2-1.5s2 .672 2 1.5c0 .356-.165.683-.441.94-.297.276-.559.622-.559 1.027a.998.998 0 001.03 1.005c1.337-.05 2.659-.162 3.961-.337a.75.75 0 00.644-.644c.175-1.302.288-2.624.337-3.961A.998.998 0 0016.967 12c-.405 0-.75.262-1.027.559-.257.276-.584.441-.94.441-.828 0-1.5-.895-1.5-2s.672-2 1.5-2c.362 0 .694.17.953.455.265.291.601.545.995.545a.97.97 0 00.976-1.024 41.159 41.159 0 00-.318-3.184.75.75 0 00-.842-.64c-1.228.164-2.473.271-3.734.319A.997.997 0 0112 4.467z"
  388. />
  389. </svg>
  390. </div>
  391. <div class=" self-center">Add-ons</div>
  392. </button>
  393. {#if !$config || ($config && !$config.auth)}
  394. <button
  395. class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
  396. 'auth'
  397. ? 'bg-gray-200 dark:bg-gray-700'
  398. : ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
  399. on:click={() => {
  400. selectedTab = 'auth';
  401. }}
  402. >
  403. <div class=" self-center mr-2">
  404. <svg
  405. xmlns="http://www.w3.org/2000/svg"
  406. viewBox="0 0 24 24"
  407. fill="currentColor"
  408. class="w-4 h-4"
  409. >
  410. <path
  411. fill-rule="evenodd"
  412. d="M12.516 2.17a.75.75 0 00-1.032 0 11.209 11.209 0 01-7.877 3.08.75.75 0 00-.722.515A12.74 12.74 0 002.25 9.75c0 5.942 4.064 10.933 9.563 12.348a.749.749 0 00.374 0c5.499-1.415 9.563-6.406 9.563-12.348 0-1.39-.223-2.73-.635-3.985a.75.75 0 00-.722-.516l-.143.001c-2.996 0-5.717-1.17-7.734-3.08zm3.094 8.016a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
  413. clip-rule="evenodd"
  414. />
  415. </svg>
  416. </div>
  417. <div class=" self-center">Authentication</div>
  418. </button>
  419. {/if}
  420. <button
  421. class="px-2.5 py-2.5 min-w-fit rounded-lg flex-1 md:flex-none flex text-right transition {selectedTab ===
  422. 'about'
  423. ? 'bg-gray-200 dark:bg-gray-700'
  424. : ' hover:bg-gray-300 dark:hover:bg-gray-800'}"
  425. on:click={() => {
  426. selectedTab = 'about';
  427. }}
  428. >
  429. <div class=" self-center mr-2">
  430. <svg
  431. xmlns="http://www.w3.org/2000/svg"
  432. viewBox="0 0 20 20"
  433. fill="currentColor"
  434. class="w-4 h-4"
  435. >
  436. <path
  437. fill-rule="evenodd"
  438. d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
  439. clip-rule="evenodd"
  440. />
  441. </svg>
  442. </div>
  443. <div class=" self-center">About</div>
  444. </button>
  445. </div>
  446. <div class="flex-1 md:min-h-[330px]">
  447. {#if selectedTab === 'general'}
  448. <div class="flex flex-col space-y-3">
  449. <div>
  450. <div class=" py-1 flex w-full justify-between">
  451. <div class=" self-center text-sm font-medium">Theme</div>
  452. <button
  453. class="p-1 px-3 text-xs flex rounded transition"
  454. on:click={() => {
  455. toggleTheme();
  456. }}
  457. >
  458. {#if theme === 'dark'}
  459. <svg
  460. xmlns="http://www.w3.org/2000/svg"
  461. viewBox="0 0 20 20"
  462. fill="currentColor"
  463. class="w-4 h-4"
  464. >
  465. <path
  466. fill-rule="evenodd"
  467. d="M7.455 2.004a.75.75 0 01.26.77 7 7 0 009.958 7.967.75.75 0 011.067.853A8.5 8.5 0 116.647 1.921a.75.75 0 01.808.083z"
  468. clip-rule="evenodd"
  469. />
  470. </svg>
  471. <span class="ml-2 self-center"> Dark </span>
  472. {:else}
  473. <svg
  474. xmlns="http://www.w3.org/2000/svg"
  475. viewBox="0 0 20 20"
  476. fill="currentColor"
  477. class="w-4 h-4 self-center"
  478. >
  479. <path
  480. d="M10 2a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 2zM10 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 15zM10 7a3 3 0 100 6 3 3 0 000-6zM15.657 5.404a.75.75 0 10-1.06-1.06l-1.061 1.06a.75.75 0 001.06 1.06l1.06-1.06zM6.464 14.596a.75.75 0 10-1.06-1.06l-1.06 1.06a.75.75 0 001.06 1.06l1.06-1.06zM18 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 0118 10zM5 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 015 10zM14.596 15.657a.75.75 0 001.06-1.06l-1.06-1.061a.75.75 0 10-1.06 1.06l1.06 1.06zM5.404 6.464a.75.75 0 001.06-1.06l-1.06-1.06a.75.75 0 10-1.061 1.06l1.06 1.06z"
  481. />
  482. </svg>
  483. <span class="ml-2 self-center"> Light </span>
  484. {/if}
  485. </button>
  486. </div>
  487. </div>
  488. <hr class=" dark:border-gray-700" />
  489. <div>
  490. <div class=" mb-2.5 text-sm font-medium">Ollama Server URL</div>
  491. <div class="flex w-full">
  492. <div class="flex-1 mr-2">
  493. <input
  494. class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
  495. placeholder="Enter URL (e.g. http://localhost:11434/api)"
  496. bind:value={API_BASE_URL}
  497. />
  498. </div>
  499. <button
  500. class="px-3 bg-gray-200 hover:bg-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 rounded transition"
  501. on:click={() => {
  502. checkOllamaConnection();
  503. }}
  504. >
  505. <svg
  506. xmlns="http://www.w3.org/2000/svg"
  507. viewBox="0 0 20 20"
  508. fill="currentColor"
  509. class="w-4 h-4"
  510. >
  511. <path
  512. fill-rule="evenodd"
  513. d="M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0V5.36l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z"
  514. clip-rule="evenodd"
  515. />
  516. </svg>
  517. </button>
  518. </div>
  519. <div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
  520. Trouble accessing Ollama? <a
  521. class=" text-gray-500 dark:text-gray-300 font-medium"
  522. href="https://github.com/ollama-webui/ollama-webui#troubleshooting"
  523. target="_blank"
  524. >
  525. Click here for help.
  526. </a>
  527. </div>
  528. </div>
  529. <hr class=" dark:border-gray-700" />
  530. <div>
  531. <div class=" mb-2.5 text-sm font-medium">System Prompt</div>
  532. <textarea
  533. bind:value={system}
  534. class="w-full rounded p-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none resize-none"
  535. rows="4"
  536. />
  537. </div>
  538. <div class="flex justify-end pt-3 text-sm font-medium">
  539. <button
  540. class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
  541. on:click={() => {
  542. saveSettings({
  543. API_BASE_URL: API_BASE_URL === '' ? OLLAMA_API_BASE_URL : API_BASE_URL,
  544. system: system !== '' ? system : undefined
  545. });
  546. show = false;
  547. }}
  548. >
  549. Save
  550. </button>
  551. </div>
  552. </div>
  553. {:else if selectedTab === 'advanced'}
  554. <div class="flex flex-col h-full justify-between space-y-3 text-sm">
  555. <div class=" space-y-3">
  556. <div>
  557. <div class=" py-1 flex w-full justify-between">
  558. <div class=" self-center text-sm font-medium">Request Mode</div>
  559. <button
  560. class="p-1 px-3 text-xs flex rounded transition"
  561. on:click={() => {
  562. toggleRequestFormat();
  563. }}
  564. >
  565. {#if requestFormat === ''}
  566. <span class="ml-2 self-center"> Default </span>
  567. {:else if requestFormat === 'json'}
  568. <!-- <svg
  569. xmlns="http://www.w3.org/2000/svg"
  570. viewBox="0 0 20 20"
  571. fill="currentColor"
  572. class="w-4 h-4 self-center"
  573. >
  574. <path
  575. d="M10 2a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 2zM10 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 15zM10 7a3 3 0 100 6 3 3 0 000-6zM15.657 5.404a.75.75 0 10-1.06-1.06l-1.061 1.06a.75.75 0 001.06 1.06l1.06-1.06zM6.464 14.596a.75.75 0 10-1.06-1.06l-1.06 1.06a.75.75 0 001.06 1.06l1.06-1.06zM18 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 0118 10zM5 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 015 10zM14.596 15.657a.75.75 0 001.06-1.06l-1.06-1.061a.75.75 0 10-1.06 1.06l1.06 1.06zM5.404 6.464a.75.75 0 001.06-1.06l-1.06-1.06a.75.75 0 10-1.061 1.06l1.06 1.06z"
  576. />
  577. </svg> -->
  578. <span class="ml-2 self-center"> JSON </span>
  579. {/if}
  580. </button>
  581. </div>
  582. </div>
  583. <hr class=" dark:border-gray-700" />
  584. <div>
  585. <div class=" py-1 flex w-full justify-between">
  586. <div class=" w-20 text-sm font-medium self-center">Seed</div>
  587. <div class=" flex-1 self-center">
  588. <input
  589. class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
  590. type="number"
  591. placeholder="Enter Seed"
  592. bind:value={seed}
  593. autocomplete="off"
  594. min="0"
  595. />
  596. </div>
  597. </div>
  598. </div>
  599. <hr class=" dark:border-gray-700" />
  600. <div>
  601. <label for="steps-range" class=" mb-2 text-sm font-medium flex justify-between">
  602. <div>Temperature</div>
  603. <div>
  604. {temperature}
  605. </div></label
  606. >
  607. <input
  608. id="steps-range"
  609. type="range"
  610. min="0"
  611. max="1"
  612. bind:value={temperature}
  613. step="0.05"
  614. class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
  615. />
  616. </div>
  617. <div>
  618. <label for="steps-range" class=" mb-2 text-sm font-medium flex justify-between">
  619. <div>Repeat Penalty</div>
  620. <div>
  621. {repeat_penalty}
  622. </div></label
  623. >
  624. <input
  625. id="steps-range"
  626. type="range"
  627. min="0"
  628. max="2"
  629. bind:value={repeat_penalty}
  630. step="0.05"
  631. class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
  632. />
  633. </div>
  634. <div>
  635. <label for="steps-range" class=" mb-2 text-sm font-medium flex justify-between">
  636. <div>Top K</div>
  637. <div>
  638. {top_k}
  639. </div></label
  640. >
  641. <input
  642. id="steps-range"
  643. type="range"
  644. min="0"
  645. max="100"
  646. bind:value={top_k}
  647. step="0.5"
  648. class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
  649. />
  650. </div>
  651. <div>
  652. <label for="steps-range" class=" mb-2 text-sm font-medium flex justify-between">
  653. <div>Top P</div>
  654. <div>
  655. {top_p}
  656. </div></label
  657. >
  658. <input
  659. id="steps-range"
  660. type="range"
  661. min="0"
  662. max="1"
  663. bind:value={top_p}
  664. step="0.05"
  665. class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
  666. />
  667. </div>
  668. <div>
  669. <label for="steps-range" class=" mb-2 text-sm font-medium flex justify-between">
  670. <div>Context Length</div>
  671. <div>
  672. {num_ctx}
  673. </div></label
  674. >
  675. <input
  676. id="steps-range"
  677. type="range"
  678. min="0"
  679. max="16000"
  680. bind:value={num_ctx}
  681. step="32"
  682. class="w-full h-2 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
  683. />
  684. </div>
  685. </div>
  686. <div class="flex justify-end pt-3 text-sm font-medium">
  687. <button
  688. class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
  689. on:click={() => {
  690. saveSettings({
  691. seed: (seed !== 0 ? seed : undefined) ?? undefined,
  692. temperature: temperature !== 0.8 ? temperature : undefined,
  693. repeat_penalty: repeat_penalty !== 1.1 ? repeat_penalty : undefined,
  694. top_k: top_k !== 40 ? top_k : undefined,
  695. top_p: top_p !== 0.9 ? top_p : undefined,
  696. num_ctx: num_ctx !== 2048 ? num_ctx : undefined
  697. });
  698. show = false;
  699. }}
  700. >
  701. Save
  702. </button>
  703. </div>
  704. </div>
  705. {:else if selectedTab === 'models'}
  706. <div class="flex flex-col space-y-3 text-sm mb-10">
  707. <div>
  708. <div class=" mb-2.5 text-sm font-medium">Pull a model</div>
  709. <div class="flex w-full">
  710. <div class="flex-1 mr-2">
  711. <input
  712. class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
  713. placeholder="Enter model tag (e.g. mistral:7b)"
  714. bind:value={modelTag}
  715. />
  716. </div>
  717. <button
  718. class="px-3 text-gray-100 bg-emerald-600 hover:bg-emerald-700 rounded transition"
  719. on:click={() => {
  720. pullModelHandler();
  721. }}
  722. >
  723. <svg
  724. xmlns="http://www.w3.org/2000/svg"
  725. viewBox="0 0 20 20"
  726. fill="currentColor"
  727. class="w-4 h-4"
  728. >
  729. <path
  730. d="M10.75 2.75a.75.75 0 00-1.5 0v8.614L6.295 8.235a.75.75 0 10-1.09 1.03l4.25 4.5a.75.75 0 001.09 0l4.25-4.5a.75.75 0 00-1.09-1.03l-2.955 3.129V2.75z"
  731. />
  732. <path
  733. d="M3.5 12.75a.75.75 0 00-1.5 0v2.5A2.75 2.75 0 004.75 18h10.5A2.75 2.75 0 0018 15.25v-2.5a.75.75 0 00-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5z"
  734. />
  735. </svg>
  736. </button>
  737. </div>
  738. <div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
  739. To access the available model names for downloading, <a
  740. class=" text-gray-500 dark:text-gray-300 font-medium"
  741. href="https://ollama.ai/library"
  742. target="_blank">click here.</a
  743. >
  744. </div>
  745. {#if pullProgress !== null}
  746. <div class="mt-2">
  747. <div class=" mb-2 text-xs">Pull Progress</div>
  748. <div class="w-full rounded-full dark:bg-gray-800">
  749. <div
  750. class="dark:bg-gray-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full"
  751. style="width: {Math.max(15, pullProgress ?? 0)}%"
  752. >
  753. {pullProgress ?? 0}%
  754. </div>
  755. </div>
  756. <div class="mt-1 text-xs dark:text-gray-700" style="font-size: 0.5rem;">
  757. {digest}
  758. </div>
  759. </div>
  760. {/if}
  761. </div>
  762. <hr class=" dark:border-gray-700" />
  763. <div>
  764. <div class=" mb-2.5 text-sm font-medium">Delete a model</div>
  765. <div class="flex w-full">
  766. <div class="flex-1 mr-2">
  767. <input
  768. class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
  769. placeholder="Enter model tag (e.g. mistral:7b)"
  770. bind:value={deleteModelTag}
  771. />
  772. </div>
  773. <button
  774. class="px-3 bg-red-700 hover:bg-red-800 text-gray-100 rounded transition"
  775. on:click={() => {
  776. deleteModelHandler();
  777. }}
  778. >
  779. <svg
  780. xmlns="http://www.w3.org/2000/svg"
  781. viewBox="0 0 20 20"
  782. fill="currentColor"
  783. class="w-4 h-4"
  784. >
  785. <path
  786. fill-rule="evenodd"
  787. d="M8.75 1A2.75 2.75 0 006 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 10.23 1.482l.149-.022.841 10.518A2.75 2.75 0 007.596 19h4.807a2.75 2.75 0 002.742-2.53l.841-10.52.149.023a.75.75 0 00.23-1.482A41.03 41.03 0 0014 4.193V3.75A2.75 2.75 0 0011.25 1h-2.5zM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4zM8.58 7.72a.75.75 0 00-1.5.06l.3 7.5a.75.75 0 101.5-.06l-.3-7.5zm4.34.06a.75.75 0 10-1.5-.06l-.3 7.5a.75.75 0 101.5.06l.3-7.5z"
  788. clip-rule="evenodd"
  789. />
  790. </svg>
  791. </button>
  792. </div>
  793. </div>
  794. </div>
  795. {:else if selectedTab === 'addons'}
  796. <form
  797. class="flex flex-col h-full justify-between space-y-3 text-sm"
  798. on:submit|preventDefault={() => {
  799. saveSettings({
  800. gravatarEmail: gravatarEmail !== '' ? gravatarEmail : undefined,
  801. gravatarUrl: gravatarEmail !== '' ? getGravatarURL(gravatarEmail) : undefined,
  802. OPENAI_API_KEY: OPENAI_API_KEY !== '' ? OPENAI_API_KEY : undefined
  803. });
  804. show = false;
  805. }}
  806. >
  807. <div class=" space-y-3">
  808. <div>
  809. <div class=" py-1 flex w-full justify-between">
  810. <div class=" self-center text-sm font-medium">Title Auto Generation</div>
  811. <button
  812. class="p-1 px-3 text-xs flex rounded transition"
  813. on:click={() => {
  814. toggleTitleAutoGenerate();
  815. }}
  816. type="button"
  817. >
  818. {#if titleAutoGenerate === true}
  819. <span class="ml-2 self-center">On</span>
  820. {:else}
  821. <span class="ml-2 self-center">Off</span>
  822. {/if}
  823. </button>
  824. </div>
  825. </div>
  826. <hr class=" dark:border-gray-700" />
  827. <div>
  828. <div class=" py-1 flex w-full justify-between">
  829. <div class=" self-center text-sm font-medium">Voice Input Auto-Send</div>
  830. <button
  831. class="p-1 px-3 text-xs flex rounded transition"
  832. on:click={() => {
  833. toggleSpeechAutoSend();
  834. }}
  835. type="button"
  836. >
  837. {#if speechAutoSend === true}
  838. <span class="ml-2 self-center">On</span>
  839. {:else}
  840. <span class="ml-2 self-center">Off</span>
  841. {/if}
  842. </button>
  843. </div>
  844. </div>
  845. <hr class=" dark:border-gray-700" />
  846. <div>
  847. <div class=" mb-2.5 text-sm font-medium">
  848. Gravatar Email <span class=" text-gray-400 text-sm">(optional)</span>
  849. </div>
  850. <div class="flex w-full">
  851. <div class="flex-1">
  852. <input
  853. class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
  854. placeholder="Enter Your Email"
  855. bind:value={gravatarEmail}
  856. autocomplete="off"
  857. type="email"
  858. />
  859. </div>
  860. </div>
  861. <div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
  862. Changes user profile image to match your <a
  863. class=" text-gray-500 dark:text-gray-300 font-medium"
  864. href="https://gravatar.com/"
  865. target="_blank">Gravatar.</a
  866. >
  867. </div>
  868. </div>
  869. <hr class=" dark:border-gray-700" />
  870. <div>
  871. <div class=" mb-2.5 text-sm font-medium">
  872. OpenAI API Key <span class=" text-gray-400 text-sm">(optional)</span>
  873. </div>
  874. <div class="flex w-full">
  875. <div class="flex-1">
  876. <input
  877. class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
  878. placeholder="Enter OpenAI API Key"
  879. bind:value={OPENAI_API_KEY}
  880. autocomplete="off"
  881. />
  882. </div>
  883. </div>
  884. <div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
  885. Adds optional support for 'gpt-*' models available.
  886. </div>
  887. </div>
  888. </div>
  889. <div class="flex justify-end pt-3 text-sm font-medium">
  890. <button
  891. class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
  892. type="submit"
  893. >
  894. Save
  895. </button>
  896. </div>
  897. </form>
  898. {:else if selectedTab === 'auth'}
  899. <form
  900. class="flex flex-col h-full justify-between space-y-3 text-sm"
  901. on:submit|preventDefault={() => {
  902. console.log('auth save');
  903. saveSettings({
  904. authHeader: authEnabled ? `${authType} ${authContent}` : undefined
  905. });
  906. show = false;
  907. }}
  908. >
  909. <div class=" space-y-3">
  910. <div>
  911. <div class=" py-1 flex w-full justify-between">
  912. <div class=" self-center text-sm font-medium">Authorization Header</div>
  913. <button
  914. class="p-1 px-3 text-xs flex rounded transition"
  915. type="button"
  916. on:click={() => {
  917. toggleAuthHeader();
  918. }}
  919. >
  920. {#if authEnabled === true}
  921. <svg
  922. xmlns="http://www.w3.org/2000/svg"
  923. viewBox="0 0 24 24"
  924. fill="currentColor"
  925. class="w-4 h-4"
  926. >
  927. <path
  928. fill-rule="evenodd"
  929. d="M12 1.5a5.25 5.25 0 00-5.25 5.25v3a3 3 0 00-3 3v6.75a3 3 0 003 3h10.5a3 3 0 003-3v-6.75a3 3 0 00-3-3v-3c0-2.9-2.35-5.25-5.25-5.25zm3.75 8.25v-3a3.75 3.75 0 10-7.5 0v3h7.5z"
  930. clip-rule="evenodd"
  931. />
  932. </svg>
  933. <span class="ml-2 self-center"> On </span>
  934. {:else}
  935. <svg
  936. xmlns="http://www.w3.org/2000/svg"
  937. viewBox="0 0 24 24"
  938. fill="currentColor"
  939. class="w-4 h-4"
  940. >
  941. <path
  942. d="M18 1.5c2.9 0 5.25 2.35 5.25 5.25v3.75a.75.75 0 01-1.5 0V6.75a3.75 3.75 0 10-7.5 0v3a3 3 0 013 3v6.75a3 3 0 01-3 3H3.75a3 3 0 01-3-3v-6.75a3 3 0 013-3h9v-3c0-2.9 2.35-5.25 5.25-5.25z"
  943. />
  944. </svg>
  945. <span class="ml-2 self-center">Off</span>
  946. {/if}
  947. </button>
  948. </div>
  949. </div>
  950. {#if authEnabled}
  951. <hr class=" dark:border-gray-700" />
  952. <div class="mt-2">
  953. <div class=" py-1 flex w-full space-x-2">
  954. <button
  955. class=" py-1 font-semibold flex rounded transition"
  956. on:click={() => {
  957. authType = authType === 'Basic' ? 'Bearer' : 'Basic';
  958. }}
  959. type="button"
  960. >
  961. {#if authType === 'Basic'}
  962. <span class="self-center mr-2">Basic</span>
  963. {:else if authType === 'Bearer'}
  964. <span class="self-center mr-2">Bearer</span>
  965. {/if}
  966. </button>
  967. <div class="flex-1">
  968. <input
  969. class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none"
  970. placeholder="Enter Authorization Header Content"
  971. bind:value={authContent}
  972. />
  973. </div>
  974. </div>
  975. <div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
  976. Toggle between <span class=" text-gray-500 dark:text-gray-300 font-medium"
  977. >'Basic'</span
  978. >
  979. and <span class=" text-gray-500 dark:text-gray-300 font-medium">'Bearer'</span> by
  980. clicking on the label next to the input.
  981. </div>
  982. </div>
  983. <hr class=" dark:border-gray-700" />
  984. <div>
  985. <div class=" mb-2.5 text-sm font-medium">Preview Authorization Header</div>
  986. <textarea
  987. value={JSON.stringify({
  988. Authorization: `${authType} ${authContent}`
  989. })}
  990. class="w-full rounded p-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none resize-none"
  991. rows="2"
  992. disabled
  993. />
  994. </div>
  995. {/if}
  996. </div>
  997. <div class="flex justify-end pt-3 text-sm font-medium">
  998. <button
  999. class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
  1000. type="submit"
  1001. >
  1002. Save
  1003. </button>
  1004. </div>
  1005. </form>
  1006. {:else if selectedTab === 'about'}
  1007. <div class="flex flex-col h-full justify-between space-y-3 text-sm mb-6">
  1008. <div class=" space-y-3">
  1009. <div>
  1010. <div class=" mb-2.5 text-sm font-medium">Ollama Web UI Version</div>
  1011. <div class="flex w-full">
  1012. <div class="flex-1 text-xs text-gray-700 dark:text-gray-200">
  1013. {$config && $config.version ? $config.version : WEB_UI_VERSION}
  1014. </div>
  1015. </div>
  1016. </div>
  1017. <hr class=" dark:border-gray-700" />
  1018. <div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
  1019. Created by <a
  1020. class=" text-gray-500 dark:text-gray-300 font-medium"
  1021. href="https://github.com/tjbck"
  1022. target="_blank">Timothy J. Baek</a
  1023. >
  1024. </div>
  1025. <div>
  1026. <a href="https://github.com/ollama-webui/ollama-webui">
  1027. <img
  1028. alt="Github Repo"
  1029. src="https://img.shields.io/github/stars/ollama-webui/ollama-webui?style=social&label=Star us on Github"
  1030. />
  1031. </a>
  1032. </div>
  1033. </div>
  1034. </div>
  1035. {/if}
  1036. </div>
  1037. </div>
  1038. </div>
  1039. </Modal>
  1040. <style>
  1041. input::-webkit-outer-spin-button,
  1042. input::-webkit-inner-spin-button {
  1043. /* display: none; <- Crashes Chrome on hover */
  1044. -webkit-appearance: none;
  1045. margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
  1046. }
  1047. .tabs::-webkit-scrollbar {
  1048. display: none; /* for Chrome, Safari and Opera */
  1049. }
  1050. .tabs {
  1051. -ms-overflow-style: none; /* IE and Edge */
  1052. scrollbar-width: none; /* Firefox */
  1053. }
  1054. input[type='number'] {
  1055. -moz-appearance: textfield; /* Firefox */
  1056. }
  1057. </style>