Skip to content

Commit

Permalink
Merge pull request #11 from RossAscends/feature/apis
Browse files Browse the repository at this point in the history 
WIP TC Endpoint Connections Management
  • Loading branch information
@RossAscends
RossAscends committed Dec 27, 2023
2 parents 0c025f4 + 5ca6dcc commit 66ce44c
Show file tree
Hide file tree
Showing 6 changed files with 346 additions and 28 deletions.
30 changes: 30 additions & 0 deletions public/client.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,36 @@ <h4>AI Controls</h4>
<select id="instructStyle"></select>
</div>
</div>
<div class="flexbox flexFlowCol">
<small class="alignSelfCenter">API</small>
<div class="custom-select">
<select id="apiList"></select>
</div>
</div>
<div id="addNewAPI" class="flexbox flexFlowCol">
<small class="alignSelfCenter">Add New API</small>
<div class="flexbox flexFlowCol">
<small>Name</small><input id="newAPIName" class="" placeholder="API Name">
<small>Endpoint</small><input id="newAPIEndpoint" class="" placeholder="http://localhost:5000">
<small>Key</small><input id="newAPIKey" class="" placeholder="API Key">
<small>Endpoint Type</small>
<div class="custom-select">
<select id="newAPIEndpointType">
<option value="TC">Text Completion</option>
<option value="CC">Chat Completion</option>
</select>
</option>
</div>

<div class="flexbox justifySpaceBetween Vcentered">
<div class="flexbox Vcentered"><button id="addNewAPIButton">Add</button></div>
<div class="flexbox Vcentered"><button id="saveAPIButton">Save</button ></div>
<div class="flexbox Vcentered"><button id="editAPIButton">Edit</button></div>


</div>
</div>
</div>
<div class="flexbox flexFlowCol">
<small class="alignSelfCenter">Samplers</small>
<div class="custom-select">
Expand Down
95 changes: 94 additions & 1 deletion public/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,12 +133,50 @@ function updateAIChatUserList(message) {
});
}

function getAPIList() {
const APIListRequest = {
type: 'APIListRequest',
UUID: myUUID
}
messageServer(APIListRequest)
}

async function addNewAPI() {
//check each field for validity, flashElement if invalid
let name = $("#newAPIName").val()
let endpoint = $("#newAPIEndpoint").val()
let key = $("#newAPIKey").val()
let type = $("#newAPIEndpointType").val()

if (name === '') {
await flashElement('newAPIName', 'bad')
return
}
if (endpoint === '') {
await flashElement('newAPIEndpoint', 'bad')
return
}
if (key === '') {
await flashElement('newAPIKey', 'bad')
return
}

messageServer({
type: 'addNewAPI',
name: name,
endpoint: endpoint,
key: key,
endpointType: type,
UUID: myUUID
})
}

async function processConfirmedConnection(parsedMessage) {
console.log('--- processing confirmed connection...');
const { clientUUID, newAIChatDelay, newUserChatDelay, role, D1JB, instructList, instructFormat,
selectedCharacter, selectedCharacterDisplayName, selectedSamplerPreset, chatHistory,
AIChatHistory, cardList, samplerPresetList, userList, isAutoResponse, contextSize,
responseLength, engineMode } = parsedMessage;
responseLength, engineMode, APIList, selectedAPI, API } = parsedMessage;
if (newAIChatDelay) {
AIChatDelay = newAIChatDelay * 1000
$("#AIChatInputDelay").val(newAIChatDelay)
Expand Down Expand Up @@ -198,6 +236,16 @@ async function processConfirmedConnection(parsedMessage) {
$("#responseLength").find(`option[value="${responseLength}"]`).prop('selected', true)
flashElement('responseLength', 'good')

control.populateAPISelector(APIList);
$("#apiList").find(`option[value="${selectedAPI}"]`).prop('selected', true)
$(("#apiList")).trigger('change')
control.populateAPIValues(API)
flashElement('newAPIName', 'good')
flashElement('newAPIEndpoint', 'good')
flashElement('newAPIKey', 'good')
flashElement('newAPIEndpointType', 'good')
flashElement('apiList', 'good')

control.populateSelector(cardList, 'characters');
control.populateSelector(instructList, 'instructStyle');
control.populateSelector(samplerPresetList, 'samplerPreset');
Expand Down Expand Up @@ -345,6 +393,10 @@ async function connectWebSocket(username) {
let chatList = parsedMessage.pastChats
showPastChats(chatList)
break;
case 'APIList':
let APIList = parsedMessage.APIList;
control.populateAPISelector(APIList);
break;
case 'pastChatToLoad':
console.log('loading past chat session');
$("#AIchat").empty();
Expand Down Expand Up @@ -377,6 +429,16 @@ async function connectWebSocket(username) {
$("#maxContext").find(`option[value="${parsedMessage.value}"]`).prop('selected', true)
console.log('maxContext updated')
break
case 'apiChange':
$("#apiList").find(`option[value="${parsedMessage.name}"]`).prop('selected', true)
// Update the Name, endpoint, and key fields with the new API info
control.populateAPIValues(parsedMessage)
flashElement('newAPIName', 'good')
flashElement('newAPIEndpoint', 'good')
flashElement('newAPIKey', 'good')
flashElement('newAPIEndpointType', 'good')
flashElement('apiList', 'good')
break
case 'responseLengthChange':
$("#responseLength").find(`option[value="${parsedMessage.value}"]`).prop('selected', true)
console.log('responseLength updated')
Expand Down Expand Up @@ -996,6 +1058,37 @@ $(async function () {
flashElement(this.id, 'good');
});

$("#apiList").on('change', function () {
$("#saveAPIButton").hide()
if ($(this).val() === 'addNewAPI') {
control.showAddNewAPIDiv()
} else {
control.hideAddNewAPIDiv()

const APIChangeMessage = {
type: 'APIChange',
UUID: myUUID,
newAPI: $(this).val()
}
messageServer(APIChangeMessage);
flashElement('apiList', 'good')
}
})

$("#addNewAPIButton").on('click', function () {
addNewAPI()
})

$("#editAPIButton").on('click', function () {
control.enableAPIEdit()
})

$("#saveAPIButton").on('click', function () {
addNewAPI()
$("#saveAPIButton").hide()
})


function correctSizeChats() {
let universalControlsHeight = $("#universalControls").outerHeight()
let totalHeight = $(window).height()
Expand Down
72 changes: 71 additions & 1 deletion public/src/controls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,17 @@ function updateUserName(myUUID, username) {
flashElement('usernameInput', 'good')
}

function updateAPI(myUUID, api) {
let apiChangeMessage = {
type: 'apiChange',
UUID: myUUID,
newAPI: api
}
messageServer(apiChangeMessage)
flashElement('apiList', 'good')
}


//Just update Localstorage, no need to send anything to server for this.
//but possibly add it in the future if we want to let users track which user is speaking as which entity in AI Chat.
function updateAIChatUserName() {
Expand Down Expand Up @@ -119,6 +130,59 @@ async function populateSelector(list, elementId) {
}
}

async function populateAPISelector(API) {
let APISelectElement = $("#apiList");
APISelectElement.empty()
APISelectElement.append($('<option>').val('addNewAPI').text('Add New API'));
for (const api of API) {
let newElem = $('<option>');
newElem.val(api.name);
newElem.text(api.name);
APISelectElement.append(newElem);
}
}

function showAddNewAPIDiv() {
$("#addNewAPIButton").show()
$("#editAPIButton").hide()
$("#newAPIName").val('')
$("#newAPIEndpoint").val('')
$("#newAPIKey").val('')
$("#newAPIEndpointType").val('TC')
$("#newAPIEndpointType").prop('readonly', false)
$("#newAPIName").prop('readonly', false)
$("#newAPIEndpoint").prop('readonly', false)
$("#newAPIKey").prop('readonly', false)
}

function hideAddNewAPIDiv() {
$("#addNewAPIButton").hide()
$("#editAPIButton").show()
$("#newAPIName").prop('readonly', true)
$("#newAPIEndpoint").prop('readonly', true)
$("#newAPIKey").prop('readonly', true)
$("#newAPIEndpointType").prop('readonly', true)
}

function enableAPIEdit(){
$("#newAPIName").prop('readonly', false)
$("#newAPIEndpoint").prop('readonly', false)
$("#newAPIKey").prop('readonly', false)
$("#newAPIEndpointType").prop('readonly', false)
$("#saveAPIButton").show()
}

async function populateAPIValues(api) {
console.log(api)
$("#newAPIName").val(api.name)
$("#newAPIKey").val(api.key)
$("#newAPIEndpoint").val(api.endpoint)
$("#newAPIEndpointType").find(`option[value="${api.endpointType}"]`).prop('selected', true)
// hide the add button
$("#addNewAPIButton").hide()
$("#editAPIButton").show()
}

// set the engine mode to either horde or Text Completions based on a value from the websocket
function setEngineMode(mode) {
const toggleModeElement = $("#toggleMode");
Expand All @@ -133,12 +197,18 @@ function setEngineMode(mode) {

export default {
setEngineMode: setEngineMode,
populateAPISelector: populateAPISelector,
populateSelector: populateSelector,
submitKey: submitKey,
updateUserName: updateUserName,
updateD1JB: updateD1JB,
updateInstructFormat: updateInstructFormat,
updateSelectedSamplerPreset: updateSelectedSamplerPreset,
updateSelectedChar: updateSelectedChar,
updateAIChatUserName: updateAIChatUserName
updateAIChatUserName: updateAIChatUserName,
updateAPI: updateAPI,
populateAPIValues: populateAPIValues,
showAddNewAPIDiv: showAddNewAPIDiv,
hideAddNewAPIDiv: hideAddNewAPIDiv,
enableAPIEdit: enableAPIEdit,
}
Loading

0 comments on commit 66ce44c

Please sign in to comment.