|
|
@@ -6,6 +6,8 @@
|
|
|
let system = '';
|
|
|
let temperature = 0.8;
|
|
|
|
|
|
+ let selectedMenu = 'general';
|
|
|
+
|
|
|
$: if (show) {
|
|
|
let settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
|
|
|
system = settings.system ?? '';
|
|
|
@@ -37,44 +39,114 @@
|
|
|
</div>
|
|
|
<hr class=" border-gray-800" />
|
|
|
|
|
|
- <div class="p-5 flex flex-col space-y-3">
|
|
|
- <div>
|
|
|
- <div class=" mb-2.5 text-sm font-medium">System Prompt</div>
|
|
|
- <textarea
|
|
|
- bind:value={system}
|
|
|
- class="w-full rounded p-4 text-sm text-gray-300 bg-gray-800 outline-none"
|
|
|
- rows="4"
|
|
|
- />
|
|
|
- </div>
|
|
|
-
|
|
|
- <div>
|
|
|
- <label for="steps-range" class=" mb-2 text-sm font-medium flex justify-between">
|
|
|
- <div>Temperature</div>
|
|
|
- <div>
|
|
|
- {temperature}
|
|
|
- </div></label
|
|
|
+ <div class="flex flex-col md:flex-row w-full p-4 md:space-x-4">
|
|
|
+ <div
|
|
|
+ class="flex flex-row space-x-1 md:space-x-0 md:space-y-1 md:flex-col flex-1 md:flex-none md:w-36 text-gray-200 text-xs text-left mb-3 md:mb-0"
|
|
|
+ >
|
|
|
+ <button
|
|
|
+ class="px-2 py-2 rounded flex-1 md:flex-none flex text-right transition {selectedMenu ===
|
|
|
+ 'general'
|
|
|
+ ? 'bg-gray-700'
|
|
|
+ : 'hover:bg-gray-800'}"
|
|
|
+ on:click={() => {
|
|
|
+ selectedMenu = 'general';
|
|
|
+ }}
|
|
|
>
|
|
|
- <input
|
|
|
- id="steps-range"
|
|
|
- type="range"
|
|
|
- min="0"
|
|
|
- max="1"
|
|
|
- bind:value={temperature}
|
|
|
- step="0.05"
|
|
|
- class="w-full h-2 rounded-lg appearance-none cursor-pointer bg-gray-700"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div class="flex justify-end pt-3 text-sm font-medium">
|
|
|
+ <div class=" self-center mr-2">
|
|
|
+ <svg
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ viewBox="0 0 20 20"
|
|
|
+ fill="currentColor"
|
|
|
+ class="w-4 h-4"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ fill-rule="evenodd"
|
|
|
+ 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"
|
|
|
+ clip-rule="evenodd"
|
|
|
+ />
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ <div class=" self-center">General</div>
|
|
|
+ </button>
|
|
|
+
|
|
|
<button
|
|
|
- class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 transition rounded"
|
|
|
+ class="px-2 py-2 rounded flex-1 md:flex-none flex text-right transition {selectedMenu ===
|
|
|
+ 'models'
|
|
|
+ ? 'bg-gray-700'
|
|
|
+ : 'hover:bg-gray-800'}"
|
|
|
on:click={() => {
|
|
|
- saveSettings(system != '' ? system : null, temperature != 0.8 ? temperature : null);
|
|
|
- show = false;
|
|
|
+ selectedMenu = 'models';
|
|
|
}}
|
|
|
>
|
|
|
- Save
|
|
|
+ <div class=" self-center mr-2">
|
|
|
+ <svg
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ viewBox="0 0 20 20"
|
|
|
+ fill="currentColor"
|
|
|
+ class="w-4 h-4"
|
|
|
+ >
|
|
|
+ <path
|
|
|
+ fill-rule="evenodd"
|
|
|
+ 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"
|
|
|
+ clip-rule="evenodd"
|
|
|
+ />
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ <div class=" self-center">Models</div>
|
|
|
</button>
|
|
|
</div>
|
|
|
+ <div class="flex-1 md:min-h-[280px]">
|
|
|
+ {#if selectedMenu === 'general'}
|
|
|
+ <div class="flex flex-col space-y-3">
|
|
|
+ <div>
|
|
|
+ <div class=" mb-2.5 text-sm font-medium">System Prompt</div>
|
|
|
+ <textarea
|
|
|
+ bind:value={system}
|
|
|
+ class="w-full rounded p-4 text-sm text-gray-300 bg-gray-800 outline-none"
|
|
|
+ rows="4"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <label for="steps-range" class=" mb-2 text-sm font-medium flex justify-between">
|
|
|
+ <div>Temperature</div>
|
|
|
+ <div>
|
|
|
+ {temperature}
|
|
|
+ </div></label
|
|
|
+ >
|
|
|
+ <input
|
|
|
+ id="steps-range"
|
|
|
+ type="range"
|
|
|
+ min="0"
|
|
|
+ max="1"
|
|
|
+ bind:value={temperature}
|
|
|
+ step="0.05"
|
|
|
+ class="w-full h-2 rounded-lg appearance-none cursor-pointer bg-gray-700"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="flex justify-end pt-3 text-sm font-medium">
|
|
|
+ <button
|
|
|
+ class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 transition rounded"
|
|
|
+ on:click={() => {
|
|
|
+ saveSettings(
|
|
|
+ system != '' ? system : null,
|
|
|
+ temperature != 0.8 ? temperature : null
|
|
|
+ );
|
|
|
+ show = false;
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ Save
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ {:else if selectedMenu === 'models'}
|
|
|
+ <div class="text-sm">
|
|
|
+ <div>
|
|
|
+ <div>Pull a model</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ {/if}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</Modal>
|
Timothy J. Baek