diff --git a/webui/app.py b/webui/app.py index c2fa909f..c85bff92 100644 --- a/webui/app.py +++ b/webui/app.py @@ -15,6 +15,7 @@ app = Flask(__name__) app.static_folder = 'static' +app.config['TEMPLATES_AUTO_RELOAD'] = True generate_lock = Lock() session: Session @@ -45,7 +46,7 @@ def api_edit_block(): @app.route("/api/delete_block", methods=['POST']) def api_delete_block(): global session - data = request.get_json() + data = request.get_json()['uuid'] session.api_delete_block(data) return json.dumps({"result": "ok"}) + "\n" @@ -117,6 +118,21 @@ def api_userinput(): with generate_lock: result = Response(stream_with_context(session.respond_multi(user_input)), mimetype = 'application/json') return result + +@app.route("/api/continue_gen", methods=['POST']) +def api_continue_gen(): + with generate_lock: + result = Response(stream_with_context(session.respond_multi('')), mimetype = 'application/json') + return result + +@app.route("/api/regen_block", methods=['POST']) +def api_regen(): + global session + uuid = request.get_json()['uuid']; + + with generate_lock: + result = Response(stream_with_context(session.regen_at(uuid)), mimetype = 'application/json') + return result @app.route("/api/append_block", methods=['POST']) def api_append_block(): diff --git a/webui/session.py b/webui/session.py index 5a715113..879aec81 100644 --- a/webui/session.py +++ b/webui/session.py @@ -22,6 +22,10 @@ sessions_dir: str +def get_generator(): + global generator + return generator + def _sessions_dir(filename = None): global sessions_dir @@ -183,6 +187,9 @@ def __init__(self, filename, load): self.max_response_tokens = saved.get("max_response_tokens", 512) self.chunk_size = saved.get("chunk_size", 128) + self.format_use_italic = saved.get("format_use_italic", False) + self.format_use_bold = saved.get("format_use_bold", False) + self.session_color = saved.get("session_color", '#383848') # Save new session @@ -205,6 +212,9 @@ def save(self): "break_on_newline": self.break_on_newline, "max_response_tokens": self.max_response_tokens, "chunk_size": self.chunk_size, + "format_use_italic": self.format_use_italic, + "format_use_bold": self.format_use_bold, + "session_color": self.session_color, "token_repetition_penalty_max": generator.settings.token_repetition_penalty_max, "token_repetition_penalty_sustain": generator.settings.token_repetition_penalty_sustain, "token_repetition_penalty_decay": generator.settings.token_repetition_penalty_decay} @@ -295,6 +305,9 @@ def api_populate(self): "break_on_newline": self.break_on_newline, "max_response_tokens": self.max_response_tokens, "chunk_size": self.chunk_size, + "format_use_italic": self.format_use_italic, + "format_use_bold": self.format_use_bold, + "session_color": self.session_color, "token_repetition_penalty_max": generator.settings.token_repetition_penalty_max, "token_repetition_penalty_sustain": generator.settings.token_repetition_penalty_sustain, "token_repetition_penalty_decay": generator.settings.token_repetition_penalty_decay, @@ -311,16 +324,15 @@ def api_populate(self): return json_object + "\n" - def api_delete_block(self, data): + def api_delete_block(self, block_id): - block_id = data["uuid"] idx = -1 for i in range(len(self.history)): if self.history[i].uuid == block_id: idx = i if idx == -1: return - self.history.pop(idx) + self.history = self.history[0:idx] self.first_history_idx = 0 self.save() @@ -379,6 +391,9 @@ def api_set_gen_settings(self, data): generator.settings.token_repetition_penalty_max = data["token_repetition_penalty_max"] generator.settings.token_repetition_penalty_sustain = data["token_repetition_penalty_sustain"] generator.settings.token_repetition_penalty_decay = data["token_repetition_penalty_decay"] + self.format_use_italic = data["format_use_italic"] + self.format_use_bold = data["format_use_bold"] + self.session_color = data["session_color"] self.save() @@ -700,4 +715,6 @@ def respond_multi(self, user_input): self.save() - + def regen_at(self, uuid): + self.api_delete_block(uuid) + return self.respond_multi('') \ No newline at end of file diff --git a/webui/static/main.js b/webui/static/main.js index 09cf1ce1..a3c6474e 100644 --- a/webui/static/main.js +++ b/webui/static/main.js @@ -1,12 +1,18 @@ var participants = []; -var chat_colors = [ "#343434", - "#383848", - "#374a48", - "#4a373d", - "#374a3d", - "#57503b", - "#3e2845", - "#452927" ] +[ + "#343434", + "#383848", + "#374a48", + "#4a373d", + "#374a3d", + "#57503b", + "#3e2845", + "#452927" +].forEach((color, index) => +{ + document.documentElement.style.setProperty('--chat-back-color-' + index, hexToRgb(color)); +}); + var textbox_initial = ""; @@ -61,6 +67,10 @@ function sendGenSettings() { json.max_response_tokens = getTBNumber("sl_maxtokens_tb"); json.gen_endnewline = document.querySelector("#cb_gen_endnewline input").checked; + json.format_use_italic = document.querySelector("#cb_use_italic input").checked; + json.format_use_bold = document.querySelector("#cb_use_bold input").checked; + json.session_color = document.querySelector("#clr_session_color input").value; + json.token_repetition_penalty_max = getTBNumber("sl_repp_penalty_tb"); json.token_repetition_penalty_sustain = getTBNumber("sl_repp_sustain_tb"); json.token_repetition_penalty_decay = getTBNumber("sl_repp_decay_tb"); @@ -92,6 +102,12 @@ function setSlider(id, value, override_max = null) { } } +function setCheckbox(id, value) +{ + let checkbox = document.querySelector('#' + id + ' input'); + checkbox.checked = value; +} + function sliderChanged(slider) { setSlider(slider.id, Number(slider.value) / Math.pow(10, slider.dataset.decimals)); } @@ -145,6 +161,16 @@ function createSlider(text, id, min, max, actualmax, decimals, text0 = null) { return newDiv; } +function createCheckbox(text, id, value, onchanged = 'sendGenSettings()') { + + let newDiv = document.createElement('label'); + newDiv.className = 'custom-checkbox no-select'; + newDiv.id = id; + newDiv.innerHTML = '' + text + ''; + + return newDiv; +} + function createGenSettings() { // Sampling @@ -170,6 +196,10 @@ function createGenSettings() { setSlider("sl_topk", 40); setSlider("sl_typical", 0); + // Context + + document.getElementById("context-settings").appendChild(createCheckbox("Keep context", 'cb_keep_fixed_prompt', false, 'sendFixedPromptSettings()')); + // Stop conditions let stopDiv = document.getElementById("stop_settings"); @@ -184,7 +214,7 @@ function createGenSettings() { setSlider("sl_maxtokens", 512); setSlider("sl_chunksize", 128); - document.getElementById("cb_gen_endnewline").addEventListener('change', sendGenSettings); + stopDiv.appendChild(createCheckbox("End on newline", 'cb_gen_endnewline', false)); // Repetition penalty @@ -203,6 +233,12 @@ function createGenSettings() { setSlider("sl_repp_sustain", 1024); setSlider("sl_repp_decay", 512); + // Formatting settings + let formatDiv = document.getElementById("format_settings"); + formatDiv.innerHTML = ""; + + formatDiv.appendChild(createCheckbox("Use italic", 'cb_use_italic', false)); + formatDiv.appendChild(createCheckbox("Use bold", 'cb_use_bold', false)); } // Populate view @@ -224,7 +260,10 @@ function populate() { let newDiv = document.createElement('div'); if (sessions[i] == current_session) + { newDiv.className = 'session session_current no-select'; + newDiv.style.background = 'var(--chat-back-color-1)'; + } else newDiv.className = 'session no-select'; @@ -243,15 +282,15 @@ function populate() { icon.addEventListener('click', function() { makeEditable(this.parentNode, renameSession) }); } - document.getElementById('sessions-column').appendChild(newDiv); + document.getElementById('sessions').appendChild(newDiv); } let newDiv = document.createElement('div'); newDiv.className = 'session session_new no-select'; newDiv.id = "session-button-new"; - newDiv.innerHTML = '

+ New...

'; + newDiv.innerHTML = '

+

'; newDiv.addEventListener('click', function() { setSession("."); }); - document.getElementById('sessions-column').appendChild(newDiv); + document.getElementById('sessions').appendChild(newDiv); // Model info @@ -266,9 +305,7 @@ function populate() { tf_fixed_prompt.value = data.fixed_prompt; addTextboxEvents(tf_fixed_prompt, sendFixedPromptSettings); - let cb_keep_fixed_prompt = document.querySelector("#cb_keep_fixed_prompt input") - cb_keep_fixed_prompt.checked = data.keep_fixed_prompt; - cb_keep_fixed_prompt.addEventListener('change', sendFixedPromptSettings); + setCheckbox('cb_keep_fixed_prompt', data.keep_fixed_prompt); // Generator settings @@ -283,8 +320,7 @@ function populate() { setSlider("sl_maxtokens", data.max_response_tokens); setSlider("sl_chunksize", data.chunk_size); - let cb_gen_endnewline = document.querySelector("#cb_gen_endnewline input") - cb_gen_endnewline.checked = data.break_on_newline; + setCheckbox('cb_gen_endnewline', data.break_on_newline); // Repetition penalty @@ -297,6 +333,13 @@ function populate() { participants = data.participants; updateParticipants(); + // Formatting + setCheckbox('cb_use_italic', data.format_use_italic); + setCheckbox('cb_use_bold', data.format_use_bold); + document.querySelector('#clr_session_color input').value = data.session_color; + document.documentElement.style.setProperty('--chat-back-color-1', hexToRgb(data.session_color)); + formatter.updateTagSearcher(); + // Chat data let history = data.history; @@ -323,7 +366,7 @@ function populate() { }) .catch((error) => { - console.error('Error:', error); + console.error('Error: ', error, '\n', error.stack); }); } @@ -339,10 +382,25 @@ function editChatBlock(div, value) { function deleteChatBlock(uuid, div) { + let nextChild = div.nextElementSibling; + while (nextChild) { + nextChild.remove(); + nextChild = div.nextElementSibling; + } div.remove(); send("/api/delete_block", { uuid: uuid }, null, null); +} + +function regenChatBlock(uuid, div) { - $("#user-input").focus(); + let nextChild = div.nextElementSibling; + while (nextChild) { + nextChild.remove(); + nextChild = div.nextElementSibling; + } + div.remove(); + + handleOutput("/api/regen_block", { uuid: uuid }); } // Delete session @@ -351,7 +409,6 @@ function deleteSession(session_name, div) { div.parentNode.remove(); send("/api/delete_session", { session: session_name }, null, null); - } // Rename session @@ -361,7 +418,6 @@ function renameSession(div, value) { send("/api/rename_session", { new_name: value.trim() }, null, function() { div.firstElementChild.textContent = textbox_initial; } ); - } // Fixed prompt settings @@ -406,7 +462,8 @@ function updateParticipants() { let remDiv = document.createElement('div'); remDiv.id = "remove_participant_" + i; remDiv.className = 'custom-textbox-rlabel no-select'; - remDiv.innerHTML = "✕ Remove"; + remDiv.innerHTML = "✕"; + remDiv.title = 'Remove'; remDiv.addEventListener('click', function() { removeParticipant(remDiv.id); }); newDiv.appendChild(remDiv); } @@ -662,6 +719,45 @@ function setSession(name) { // Handle text input +function handleOutput(url, data) +{ + let timeout = new Promise((resolve, reject) => { + let id = setTimeout(() => { + clearTimeout(id); + reject('No response from server') + }, 10000) + }) + + // Fetch request + + let fetchRequest = fetch(url, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(data) + }); + + // Pass input to server and setup response reader + + Promise.race([fetchRequest, timeout]) + .then(response => { + if (response.ok) { + return response.body; + } else { + appendErrorMessage("Network response was not ok"); + throw new Error("Network response was not ok."); + } + }) + .then(body => { + processStream(body); + }) + .catch(error => { + appendErrorMessage("Error: " + error); + console.error('Error:', error); + }); +} + $(document).ready(function() { $("#chat-input-form").on('submit', function(e) { @@ -673,47 +769,17 @@ $(document).ready(function() { $("#user-input").prop("disabled", true); $("#user-input").attr('placeholder', '...'); - // Timeout - - let timeout = new Promise((resolve, reject) => { - let id = setTimeout(() => { - clearTimeout(id); - reject('No response from server') - }, 10000) - }) - - // Fetch request - - let fetchRequest = fetch("/api/userinput", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ user_input: userInput }) - }); - - // Pass input to server and setup response reader - - Promise.race([fetchRequest, timeout]) - .then(response => { - if (response.ok) { - return response.body; - } else { - appendErrorMessage("Network response was not ok"); - throw new Error("Network response was not ok."); - } - }) - .then(body => { - processStream(body); - }) - .catch(error => { - appendErrorMessage("Error: " + error); - console.error('Error:', error); - }); - + handleOutput("/api/userinput", { user_input: userInput}); }); }); +$("#user-send").click(() => $("#chat-input-form").submit()); +$("#user-continue").click(() => handleOutput("/api/continue_gen", {})); +$("#user-regen-last").click(function(){ + var div = document.getElementById("chatbox").lastElementChild; + regenChatBlock(div.dataset.uuid, div); +}); + // Read stream let data = ''; @@ -727,9 +793,9 @@ function processStream(stream) { // console.log("Received chunk:", decoder.decode(value)); if (done) { // console.log("Stream complete"); + formatter.updateFormatting(); $("#user-input").prop("disabled", false); $("#user-input").attr('placeholder', 'Type here...'); - $("#user-input").focus(); return; } @@ -752,19 +818,85 @@ function processStream(stream) { }); } + +var formatter = new (function() +{ + let tagSearcher = this.tagSearcher = { 'br': /\n/ }; + + let useItalicToggle = $('#cb_use_italic input'); + let useBoldToggle = $('#cb_use_bold input'); + Object.defineProperty(this, 'useItalic', { get(){ return ; } }); + Object.defineProperty(this, 'useBold', { get(){ return useBoldToggle.prop('checked'); } }); + + this.updateTagSearcher = function() + { + if (!useItalicToggle.prop('checked')) + delete tagSearcher['i']; + else + tagSearcher['i'] = /(\\?\*){1}/; + if (!useBoldToggle.prop('checked')) + delete tagSearcher['b']; + else + tagSearcher['b'] = /(\\?\*){2}/; + } + this.updateFormatting = function() + { + this.updateTagSearcher(); + $('#chatbox .text').each(function() + { + let node = $(this); + node.text(' '); + appendWithLineBreaks(this.lastChild, this.parentNode.dataset.text); + }); + } + useItalicToggle.on('change', this.updateFormatting); + useBoldToggle.on('change', this.updateFormatting); +})(); + function appendWithLineBreaks(currentNode, text) { - var textChunks = text.split("\n"); - for (var i = 0; i < textChunks.length - 1; i++) { - currentNode.textContent += textChunks[i]; - let br = document.createElement('br'); - currentNode.parentNode.appendChild(br); - newNode = document.createTextNode(''); - currentNode.parentNode.appendChild(newNode); - currentNode = newNode; + var parent = currentNode.parentNode; + var html = parent.innerHTML; + + let italicOpen = false, boldOpen = false; + while (true) + { + let searchResults = []; + Object.keys(formatter.tagSearcher).forEach((key) => + { + let match = formatter.tagSearcher[key].exec(text); + if (match) { + searchResults.push({ + tag: key, + start: match.index, + end: match.index + match[0].length + }); + } + }); + + searchResults.sort((a, b) => a.start - b.start); + let nearestResult = searchResults[0]; + if (nearestResult === undefined) break; + + html += document.createTextNode(text.substring(0, nearestResult.start)).textContent; + switch(nearestResult.tag) + { + case 'br': html += '
'; break; + case 'i': + html += italicOpen ? '' : ''; + italicOpen = !italicOpen; + break; + case 'b': + html += boldOpen ? '' : ''; + boldOpen = !boldOpen; + break; + } + text = text.substring(nearestResult.end); } - currentNode.textContent += textChunks[textChunks.length - 1]; - return currentNode; + + parent.innerHTML = html; + if (text.length > 0) parent.appendChild(document.createTextNode(text)); + return parent.lastChild; } function rewindWithLineBreaks(currentNode, chars) @@ -807,6 +939,7 @@ function newChatBlock(header, text, idx, uuid) var div = document.getElementById("chatbox").lastElementChild; div.dataset.uuid = uuid; + div.dataset.text = text; var icon = addIcon(div, "pencil-icon"); icon.addEventListener('click', function() { makeEditable(this.parentNode, editChatBlock, true, xmode) }); @@ -814,10 +947,19 @@ function newChatBlock(header, text, idx, uuid) icon = addIcon(div, "delete-icon", 34); icon.addEventListener('click', function() { deleteChatBlock(uuid, div) }); + var isUser = idx == 0; + var textNode = $(".text:last"); + if (!isUser) + { + icon = addIcon(div, "regen-icon", 68); + icon.addEventListener('click', function() { regenChatBlock(uuid, div) }); + } + div.style.background = 'var(--chat-back-color-' + idx + ')'; + currentNode = document.createTextNode(''); - $(".text:last").append(currentNode); - currentNode = appendWithLineBreaks(currentNode, text); - $(".text:last").parent().css('background-color', chat_colors[idx]); + textNode.append(currentNode); + if (text.length > 0) + currentNode = appendWithLineBreaks(currentNode, text); return currentNode; } @@ -857,7 +999,8 @@ function processItem(data) { case "append": { let bottom = isAtBottom(); text = data.text; - currentNode = appendWithLineBreaks(currentNode, text); + currentNode.parentNode.parentNode.dataset.text += text; + currentNode = appendWithLineBreaks(currentNode, text, true); if (bottom) scrollToBottom(); break; } @@ -953,3 +1096,32 @@ function checkScroll() { updateGradientPosition(); } + +var sessionsColumn = $('#sessions-column'); +$('#toggle-session-column').click(() => { + sessionsColumn.toggleClass('hidden'); + $('#toggle-session-column').text(sessionsColumn.hasClass('hidden') ? '▶' : '◀'); +}); + +var controlColumn = $('#control-column'); +$('#toggle-control-column').click(() => { + controlColumn.toggleClass('hidden'); + $('#toggle-control-column').text(controlColumn.hasClass('hidden') ? '◀' : '▶'); +}); + +$('#clr_session_color input').on('change', function() +{ + document.documentElement.style.setProperty('--chat-back-color-1', hexToRgb(this.value)); + sendGenSettings(); +}); + +function hexToRgb(hex, opacity = 0.3) { + // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") + var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; + hex = hex.replace(shorthandRegex, function(m, r, g, b) { + return r + r + g + g + b + b; + }); + + var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); + return result ? `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${opacity})` : ''; +} \ No newline at end of file diff --git a/webui/static/style.css b/webui/static/style.css index 8a693509..2f42d6d5 100644 --- a/webui/static/style.css +++ b/webui/static/style.css @@ -1,6 +1,4 @@ :root { - --sessions_column_width: 240px; - --control_column_width: 400px; --font-size-large: 16px; --font-size-medium: 14px; --font-size-small: 12px; @@ -23,7 +21,6 @@ --sessions-new-back-color: rgb(44, 44, 44); --sessions-new-back-color-h: rgb(52, 52, 52); --sessions-new-text-color: rgba(255, 255, 255, 0.4); - --sessions-current-back-color: rgb(56, 56, 72); --sessions-current-back-color-h: rgb(68, 68, 90); --sessions-current-text-color: rgba(255, 255, 255, 1); --sessions-current-back-color-b: rgba(128, 128, 150, 0.50); @@ -51,10 +48,11 @@ body { margin: 10px; display: flex; justify-content: center; - align-items: center; height: calc(100vh - 20px); width: calc(100vw - 20px); background-color: var(--background-color); + overflow: hidden; + position: absolute; } .name { @@ -63,6 +61,7 @@ body { color: var(--chat-name-color); font-weight: bold; margin-bottom: 7px; + font-size: 1em; } .text { @@ -80,10 +79,10 @@ body { border-radius: 3px; border: 1px solid var(--sessions-back-color-b); margin-top: 10px; - margin-left: 10px; padding-left: 10px; height: 44px; min-height: 44px; + line-height: 44px; background-color: var(--sessions-back-color); color: var(--sessions-text-color); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); @@ -113,6 +112,13 @@ body { background-color: var(--sessions-new-back-color); color: var(--sessions-new-text-color); font-weight: bold; + font-size: 30px; + width: 44px; + padding: 0; + text-align: center; +} +.session p { + margin: 0; } .session_new:hover { @@ -126,7 +132,6 @@ body { .session_current { border: 2px solid var(--sessions-current-back-color-b); - background-color: var(--sessions-current-back-color); color: var(--sessions-current-text-color); font-weight: bold; } @@ -171,44 +176,66 @@ svg:hover { #chat-container { display: flex; flex-direction: row; - height: 100%; + height: 90%; + width: 100%; padding-top: 10px; padding-bottom: 10px; + box-sizing: border-box; + top: 0px; + position: fixed; } #chat-column { display: flex; flex-direction: column; - width: calc(100vw - var(--sessions_column_width) - var(--control_column_width)); + flex-grow: 1; height: 100%; + position: relative; } #control-column { - width: var(--control_column_width); - display: flex; + width: 300px; + min-width: 300px; flex-direction: column; - overflow-y: auto; + padding-left: 10px; + padding-right: 10px; } #sessions-column { - width: calc(var(--sessions_column_width) - 20px); + width: 240px; + min-width: 240px; display: flex; flex-direction: column; overflow-y: auto; - border-radius: 10px; - padding-left: 10px; padding-right: 10px; } +#controls, #sessions +{ + overflow-y: auto; + max-height: calc(100% - 74px); + padding-bottom: 20px; + margin-top: 10px; +} +#sessions-column.hidden, #control-column.hidden { + width: 44px; + min-width: 44px; +} +#sessions-column.hidden #sessions, #control-column.hidden #controls { + display: none; +} #sessions-box { width: calc(100% - 20px); } +.session +{ + overflow: hidden; +} + #chatbox { padding-left: 10px; padding-right: 10px; - width: calc(100% - 20px); - height: calc(100% - 40px); overflow-y: auto; background-color: --background-color; } @@ -220,7 +247,6 @@ svg:hover { border: 1px solid var(--chat-back-color-b); line-height: 1.4; position: relative; - background-color: var(--chat-back-color); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); overflow-y: auto; } @@ -241,8 +267,37 @@ svg:hover { padding-right: 10px; width: calc(100% - 20px); display: flex; - position: relative; + position: fixed; + bottom: 0; justify-content: space-between; + left: 0; + background-color: var(--background-color); + height:10%; + padding: 10px; +} + +#chat-input-form .buttons { + display: flex; + align-content: center; + justify-content: center; + flex-direction: column; + min-width: 140px; + padding: 0px 10px; +} + +#chat-input-form button { + width: 100%; + height: 30px; + background-color: var(--sessions-back-color); + color: var(--sessions-text-color); + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); + border: 1px solid var(--sessions-back-color-b); + cursor: pointer; + margin: 5px 0px; +} + +#chat-input-form button:hover { + text-decoration: underline; } #user-input { @@ -255,8 +310,10 @@ svg:hover { border-radius: 3px; background-color: var(--input-field-color); color: var(--chat-text-color); - max-height: 200px; - min-height: 24px; + max-height: 100%; + min-height: 100%; + resize: none; + box-sizing: border-box; overflow-y: auto; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); } @@ -292,8 +349,7 @@ svg:hover { border: 1px solid var(--controls-frame-back-color-b); background-color: var(--controls-frame-back-color); border-radius: 3px; - margin: 10px; - margin-right: 20px; + margin-top: 10px; display: flex; flex-direction: column; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); @@ -323,6 +379,7 @@ svg:hover { .controls-frame .contents { padding: 10px; padding-top: 0px; + position: relative; } .controls-frame .textfield { @@ -335,24 +392,18 @@ svg:hover { height: 280px; min-height: 150px; max-height: 500px; - width: calc(var(--control_column_width) - 74px); - min-width: calc(var(--control_column_width) - 74px); - max-width: calc(var(--control_column_width) - 74px); + max-width: 100%; + min-width: 100%; + box-sizing: border-box; } -.controls-frame .textfield_info { +.controls-frame .textfield.info { font-size: var(--font-size-small); - padding: 10px; background-color: var(--background-dark-color); border: 1px solid var(--input-field-color-b); - border-radius: 3px; color: var(--infotext-color); - height: 280px; - min-height: 40px; - max-height: 40px; - width: calc(var(--control_column_width) - 74px); - min-width: calc(var(--control_column_width) - 74px); - max-width: calc(var(--control_column_width) - 74px); + min-height: 50px; + max-height: 50px; } @@ -436,7 +487,7 @@ svg:hover { font-size: var(--font-size-medium); color: var(--controls-frame-header-text-color); margin-right: 20px; - width: 90px; + width: 40px; } .custom-textbox input { @@ -463,6 +514,7 @@ svg:hover { color: var(--controls-frame-header-text-color); margin-right: 0px; margin-left: 10px; + white-space: nowrap; } .custom-textbox-rlabel:hover { @@ -489,7 +541,7 @@ svg:hover { } .custom-slider .custom-slider-sl { - width: 150px; + max-width: 150px; } .custom-slider .custom-slider-tb { @@ -570,7 +622,35 @@ input[type=range]::-moz-range-thumb { input[type=range]:hover::-moz-range-track { /* background: var(--slider-hover-color);*/ } +#clr_session_color input[type=color] { + height: 20px; + width: 20px; + margin-right: 5px; + padding: 0; + border: 0; + border-radius: 6px; + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; +} +.toggle-column-size-button +{ + width: 44px; + height: 44px; + border: 1px solid var(--sessions-back-color-b); + background-color: var(--sessions-back-color); + color: var(--sessions-text-color); + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); +} +.toggle-column-size-button.right-aligned +{ + margin-left: auto; + margin-right: 0; +} +.toggle-column-size-button:hover +{ + cursor: pointer; + background-color: #888; +} ::-webkit-scrollbar { diff --git a/webui/templates/index.html b/webui/templates/index.html index 25c3e4a5..da0a4d8b 100644 --- a/webui/templates/index.html +++ b/webui/templates/index.html @@ -20,10 +20,20 @@ + + + + + + +
- + +
+ +
@@ -31,51 +41,64 @@
-
- -
+ +
-
-
Model▼
- -
-
Fixed prompt▼
- -
-
Participants▲
-
+
+
Participants▲
+
+
-
-
-
Sampler▲
-
-
+
+
Sampler▲
+
+
-
-
Stop condition▲
-
-
- +
+
Stop condition▲
+
-
-
-
Repetition penalty▲
-
-
+
+
Repetition penalty▲
+
+
+
+
Formatting▲
+
+
+ +
+
+ +
+
+
+
+ +
+ + +