Add basic claude support

This commit is contained in:
maver 2023-06-25 18:20:53 +02:00
parent c920b6c511
commit aaa2c48e7d
5 changed files with 80 additions and 60 deletions

View File

@ -1,19 +1,21 @@
#openai_prompt_manager {
/* OpenAI */
#completion_prompt_manager {
margin: 0.5em 0.25em;
}
#openai_prompt_manager .caution {
#completion_prompt_manager .caution {
color: var(--fullred);
}
#openai_prompt_manager #openai_prompt_manager_list {
#completion_prompt_manager #completion_prompt_manager_list {
display: flex;
flex-direction: column;
min-height: 300px;
max-height: 800px;
}
#openai_prompt_manager .openai_prompt_manager_list_separator hr {
#completion_prompt_manager .completion_prompt_manager_list_separator hr {
grid-column-start: 1;
grid-column-end: 4;
width: 100%;
@ -22,48 +24,48 @@
min-height: 1px;
}
#openai_prompt_manager #openai_prompt_manager_list li {
#completion_prompt_manager #completion_prompt_manager_list li {
display: grid;
grid-template-columns: 4fr 80px 60px;
margin-bottom: 0.5em;
width: 100%
}
#openai_prompt_manager #openai_prompt_manager_list .openai_prompt_manager_marker span span {
#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_marker span span {
/** TODO: Introduce classes to avoid this */
display: inline !important;
}
#openai_prompt_manager #openai_prompt_manager_list .openai_prompt_manager_marker .fa-thumb-tack {
#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_marker .fa-thumb-tack {
padding: 0 0.5em;
color: var(--white50a);
}
#openai_prompt_manager #openai_prompt_manager_list li.openai_prompt_manager_list_head .prompt_manager_prompt_tokens,
#openai_prompt_manager #openai_prompt_manager_list li.openai_prompt_manager_prompt .prompt_manager_prompt_tokens {
#completion_prompt_manager #completion_prompt_manager_list li.completion_prompt_manager_list_head .prompt_manager_prompt_tokens,
#completion_prompt_manager #completion_prompt_manager_list li.completion_prompt_manager_prompt .prompt_manager_prompt_tokens {
text-align: right;
}
#openai_prompt_manager #openai_prompt_manager_list .openai_prompt_manager_prompt .prompt_manager_prompt_controls {
#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt .prompt_manager_prompt_controls {
text-align: right;
}
#openai_prompt_manager .openai_prompt_manager_list_head {
#completion_prompt_manager .completion_prompt_manager_list_head {
padding: 0.5em;
}
#openai_prompt_manager #openai_prompt_manager_list li.openai_prompt_manager_prompt {
#completion_prompt_manager #completion_prompt_manager_list li.completion_prompt_manager_prompt {
align-items: center;
padding: 0.5em;
border: 1px solid var(--white30a);
}
#openai_prompt_manager #openai_prompt_manager_list li.openai_prompt_manager_prompt .prompt_manager_prompt_controls {
#completion_prompt_manager #completion_prompt_manager_list li.completion_prompt_manager_prompt .prompt_manager_prompt_controls {
display: flex;
justify-content: end;
}
#openai_prompt_manager #openai_prompt_manager_list li.openai_prompt_manager_prompt span span span {
#completion_prompt_manager #completion_prompt_manager_list li.completion_prompt_manager_prompt span span span {
flex-direction: column;
justify-content: center;
margin-left: 0.25em;
@ -75,63 +77,63 @@
opacity: 0.2;
}
#openai_prompt_manager #openai_prompt_manager_list li.openai_prompt_manager_prompt span span:hover {
#completion_prompt_manager #completion_prompt_manager_list li.completion_prompt_manager_prompt span span:hover {
opacity: 1;
}
#openai_prompt_manager_popup .openai_prompt_manager_popup_entry {
#completion_prompt_manager_popup .completion_prompt_manager_popup_entry {
margin-top:2em;
}
#openai_prompt_manager_popup .openai_prompt_manager_popup_entry .openai_prompt_manager_popup_entry_form_control {
#completion_prompt_manager_popup .completion_prompt_manager_popup_entry .completion_prompt_manager_popup_entry_form_control {
margin-top:1em;
}
#openai_prompt_manager_popup #openai_prompt_manager_popup_entry_form_footer #openai_prompt_manager_popup_entry_form_close,
#openai_prompt_manager_popup #openai_prompt_manager_popup_entry_form_footer #openai_prompt_manager_popup_entry_form_save {
#completion_prompt_manager_popup #completion_prompt_manager_popup_entry_form_footer #completion_prompt_manager_popup_entry_form_close,
#completion_prompt_manager_popup #completion_prompt_manager_popup_entry_form_footer #completion_prompt_manager_popup_entry_form_save {
font-size: 1.25em;
padding: 0.5em;
}
#openai_prompt_manager_popup .openai_prompt_manager_popup_entry_form_control #openai_prompt_manager_popup_entry_form_prompt {
#completion_prompt_manager_popup .completion_prompt_manager_popup_entry_form_control #completion_prompt_manager_popup_entry_form_prompt {
min-height: 200px;
}
#openai_prompt_manager_popup .openai_prompt_manager_popup_entry #openai_prompt_manager_popup_entry_form_footer {
#completion_prompt_manager_popup .completion_prompt_manager_popup_entry #completion_prompt_manager_popup_entry_form_footer {
display: flex;
justify-content: space-between;
margin-top: 1em;
}
#openai_prompt_manager #openai_prompt_manager_list .openai_prompt_manager_prompt.draggable {
#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt.draggable {
cursor: grab;
}
#openai_prompt_manager #openai_prompt_manager_list .openai_prompt_manager_prompt_name {
#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt_name {
white-space: nowrap;
overflow: hidden;
}
#openai_prompt_manager #openai_prompt_manager_list .openai_prompt_manager_prompt.openai_prompt_manager_prompt_disabled {
#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt.completion_prompt_manager_prompt_disabled {
border: 1px solid var(--white20a);
}
#openai_prompt_manager #openai_prompt_manager_list .openai_prompt_manager_prompt_disabled .openai_prompt_manager_prompt_name {
#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt_disabled .completion_prompt_manager_prompt_name {
color: var(--white30a);
}
#openai_prompt_manager #openai_prompt_manager_list li.openai_prompt_manager_prompt .mes_edit {
#completion_prompt_manager #completion_prompt_manager_list li.completion_prompt_manager_prompt .mes_edit {
margin-left: 0.5em;
}
#openai_prompt_manager .openai_prompt_manager_error {
#completion_prompt_manager .completion_prompt_manager_error {
padding: 1em;
border: 3px solid var(--fullred);
margin-top: 1em;
margin-bottom: 0.5em;
}
#openai_prompt_manager .openai_prompt_manager_header {
#completion_prompt_manager .completion_prompt_manager_header {
display: flex;
flex-direction: row;
justify-content: space-between;
@ -141,17 +143,17 @@
width: 100%
}
#openai_prompt_manager .openai_prompt_manager_header div {
#completion_prompt_manager .completion_prompt_manager_header div {
margin-top: 0.5em;
width: fit-content;
}
#openai_prompt_manager .openai_prompt_manager_header_advanced {
#completion_prompt_manager .completion_prompt_manager_header_advanced {
display: flex;
margin-right: 0.25em;
}
#openai_prompt_manager .openai_prompt_manager_header_advanced span {
#completion_prompt_manager .completion_prompt_manager_header_advanced span {
flex-direction: column;
justify-content: center;
margin-left: 0.25em;
@ -160,11 +162,11 @@
filter: drop-shadow(0px 0px 2px black);
}
#openai_prompt_manager .openai_prompt_manager_header_advanced span.fa-solid {
#completion_prompt_manager .completion_prompt_manager_header_advanced span.fa-solid {
display: inherit;
}
#openai_prompt_manager .openai_prompt_manager_footer {
#completion_prompt_manager .completion_prompt_manager_footer {
display: flex;
flex-direction: row;
justify-content: flex-end;
@ -173,15 +175,15 @@
width: 100%
}
#openai_prompt_manager .openai_prompt_manager_footer a {
#completion_prompt_manager .completion_prompt_manager_footer a {
padding: 5px 5px;
}
#openai_prompt_manager_popup {
#completion_prompt_manager_popup {
margin-top: 0;
}
#openai_prompt_manager_popup {
#completion_prompt_manager_popup {
max-width: var(--sheldWidth);
height: calc(100% - 40px);
position: absolute;
@ -200,11 +202,10 @@
}
@media screen and (max-width: 412px) {
#openai_prompt_manager #openai_prompt_manager_list {
#completion_prompt_manager #completion_prompt_manager_list {
font-size: 1.25em !important;
}
#openai_prompt_manager #openai_prompt_manager_list li.openai_prompt_manager_prompt span span span {
#completion_prompt_manager #completion_prompt_manager_list li.completion_prompt_manager_prompt span span span {
margin-left: 0.5em;
}
}

View File

@ -1282,7 +1282,7 @@
</div>
</div>
<div class="range-block">
<div id="openai_prompt_manager"></div>
<div id="completion_prompt_manager"></div>
</div>
<div class="range-block">
<div class="range-block-title justifyLeft">
@ -3575,39 +3575,39 @@
</div>
</div>
</div>
<div id="openai_prompt_manager_popup" style="display:none;">
<div id="completion_prompt_manager_popup" style="display:none;">
<h3>OpenAI Prompt Manager Settings</h3>
<div class="openai_prompt_manager_popup_entry">
<form class="openai_prompt_manager_popup_entry_form">
<div class="openai_prompt_manager_popup_entry_form_control">
<label for="openai_prompt_manager_popup_entry_form_name">
<div class="completion_prompt_manager_popup_entry">
<form class="completion_prompt_manager_popup_entry_form">
<div class="completion_prompt_manager_popup_entry_form_control">
<label for="completion_prompt_manager_popup_entry_form_name">
<span>Name</span>
</label>
<div class="text_muted">A name for this prompt.</div>
<input id="openai_prompt_manager_popup_entry_form_name" class="text_pole" type="text" name="name" />
<input id="completion_prompt_manager_popup_entry_form_name" class="text_pole" type="text" name="name" />
</div>
<div class="openai_prompt_manager_popup_entry_form_control">
<label for="openai_prompt_manager_popup_entry_form_role">
<div class="completion_prompt_manager_popup_entry_form_control">
<label for="completion_prompt_manager_popup_entry_form_role">
<span>Role</span>
</label>
<div class="text_muted">To whom this message will be attributed.</div>
<select id="openai_prompt_manager_popup_entry_form_role" class="text_pole" name="role">
<select id="completion_prompt_manager_popup_entry_form_role" class="text_pole" name="role">
<option value="system">System</option>
<option value="user">User</option>
<option value="assistant">AI Assistant</option>
</select>
</div>
<div class="openai_prompt_manager_popup_entry_form_control">
<label for="openai_prompt_manager_popup_entry_form_prompt">
<div class="completion_prompt_manager_popup_entry_form_control">
<label for="completion_prompt_manager_popup_entry_form_prompt">
<span>Prompt</span>
</label>
<div class="text_muted">The prompt to be sent.</div>
<textarea id="openai_prompt_manager_popup_entry_form_prompt" class="text_pole" name="prompt">
<textarea id="completion_prompt_manager_popup_entry_form_prompt" class="text_pole" name="prompt">
</textarea>
</div>
<div id="openai_prompt_manager_popup_entry_form_footer" >
<a id="openai_prompt_manager_popup_entry_form_close" class="fa-solid fa-close menu_button"></a>
<a id="openai_prompt_manager_popup_entry_form_save" class="fa-solid fa-save menu_button" data-pm-prompt=""></a>
<div id="completion_prompt_manager_popup_entry_form_footer" >
<a id="completion_prompt_manager_popup_entry_form_close" class="fa-solid fa-close menu_button"></a>
<a id="completion_prompt_manager_popup_entry_form_save" class="fa-solid fa-save menu_button" data-pm-prompt=""></a>
</div>
</form>
</div>

View File

@ -90,6 +90,7 @@ import {
openai_messages_count,
getTokenCountOpenAI,
chat_completion_sources,
setupClaudePromptManager,
getTokenizerModel,
getChatCompletionModel,
} from "./scripts/openai.js";
@ -4529,6 +4530,18 @@ function changeMainAPI() {
getStatus();
getHordeModels();
}
console.log(oai_settings.chat_completion_source)
switch (oai_settings.chat_completion_source) {
case chat_completion_sources.OPENAI:
console.log('Setting up OpenAI prompt manager');
setupOpenAIPromptManager(oai_settings);
break;
case chat_completion_sources.CLAUDE:
console.log('Setting up Claude prompt manager');
setupClaudePromptManager(oai_settings);
break;
}
}
////////////////////////////////////////////////////
@ -5121,7 +5134,6 @@ async function getSettings(type) {
// OpenAI
loadOpenAISettings(data, settings);
setupOpenAIPromptManager(settings);
// Horde
loadHordeSettings(settings);

View File

@ -437,7 +437,7 @@ PromptManagerModule.prototype.handleGroupSelected = function (event) {
PromptManagerModule.prototype.getActiveGroupCharacters = function() {
// ToDo: Ideally, this should return the actual characters.
return (this.activeCharacter.group?.members || []).map(member => member.substring(0, member.lastIndexOf('.')));
return (this.activeCharacter?.group?.members || []).map(member => member.substring(0, member.lastIndexOf('.')));
}
/**

View File

@ -61,6 +61,7 @@ export {
setOpenAIMessages,
setOpenAIMessageExamples,
setupOpenAIPromptManager,
setupClaudePromptManager,
generateOpenAIPromptCache,
prepareOpenAIMessages,
sendOpenAIRequest,
@ -278,9 +279,9 @@ function setOpenAIMessageExamples(mesExamplesArray) {
function setupOpenAIPromptManager(openAiSettings) {
promptManager = new PromptManager();
const configuration = {
prefix: 'openai_',
containerIdentifier: 'openai_prompt_manager',
listIdentifier: 'openai_prompt_manager_list',
prefix: 'completion_',
containerIdentifier: 'completion_prompt_manager',
listIdentifier: 'completion_prompt_manager_list',
toggleDisabled: ['main'],
draggable: true
};
@ -299,6 +300,10 @@ function setupOpenAIPromptManager(openAiSettings) {
promptManager.render();
}
function setupClaudePromptManager(claudeSettings) {
setupOpenAIPromptManager(claudeSettings);
}
function generateOpenAIPromptCache() {
openai_msgs = openai_msgs.reverse();
openai_msgs.forEach(function (msg, i, arr) {
@ -2086,6 +2091,7 @@ async function onModelChange() {
if ($(this).is('#model_claude_select')) {
console.log('Claude model changed to', value);
oai_settings.claude_model = value;
//setupOpenAIPromptManager(openai_settings);
}
if ($(this).is('#model_windowai_select')) {
@ -2096,6 +2102,7 @@ async function onModelChange() {
if ($(this).is('#model_openai_select')) {
console.log('OpenAI model changed to', value);
oai_settings.openai_model = value;
setupOpenAIPromptManager(openai_settings);
}
if ($(this).is('#model_openrouter_select')) {