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; margin: 0.5em 0.25em;
} }
#openai_prompt_manager .caution { #completion_prompt_manager .caution {
color: var(--fullred); color: var(--fullred);
} }
#openai_prompt_manager #openai_prompt_manager_list { #completion_prompt_manager #completion_prompt_manager_list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 300px; min-height: 300px;
max-height: 800px; 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-start: 1;
grid-column-end: 4; grid-column-end: 4;
width: 100%; width: 100%;
@ -22,48 +24,48 @@
min-height: 1px; min-height: 1px;
} }
#openai_prompt_manager #openai_prompt_manager_list li { #completion_prompt_manager #completion_prompt_manager_list li {
display: grid; display: grid;
grid-template-columns: 4fr 80px 60px; grid-template-columns: 4fr 80px 60px;
margin-bottom: 0.5em; margin-bottom: 0.5em;
width: 100% 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 */ /** TODO: Introduce classes to avoid this */
display: inline !important; 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; padding: 0 0.5em;
color: var(--white50a); color: var(--white50a);
} }
#openai_prompt_manager #openai_prompt_manager_list li.openai_prompt_manager_list_head .prompt_manager_prompt_tokens, #completion_prompt_manager #completion_prompt_manager_list li.completion_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_prompt .prompt_manager_prompt_tokens {
text-align: right; 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; text-align: right;
} }
#openai_prompt_manager .openai_prompt_manager_list_head { #completion_prompt_manager .completion_prompt_manager_list_head {
padding: 0.5em; 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; align-items: center;
padding: 0.5em; padding: 0.5em;
border: 1px solid var(--white30a); 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; display: flex;
justify-content: end; 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; flex-direction: column;
justify-content: center; justify-content: center;
margin-left: 0.25em; margin-left: 0.25em;
@ -75,63 +77,63 @@
opacity: 0.2; 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; opacity: 1;
} }
#openai_prompt_manager_popup .openai_prompt_manager_popup_entry { #completion_prompt_manager_popup .completion_prompt_manager_popup_entry {
margin-top:2em; 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; margin-top:1em;
} }
#openai_prompt_manager_popup #openai_prompt_manager_popup_entry_form_footer #openai_prompt_manager_popup_entry_form_close, #completion_prompt_manager_popup #completion_prompt_manager_popup_entry_form_footer #completion_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_save {
font-size: 1.25em; font-size: 1.25em;
padding: 0.5em; 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; 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; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 1em; 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; 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; white-space: nowrap;
overflow: hidden; 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); 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); 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; margin-left: 0.5em;
} }
#openai_prompt_manager .openai_prompt_manager_error { #completion_prompt_manager .completion_prompt_manager_error {
padding: 1em; padding: 1em;
border: 3px solid var(--fullred); border: 3px solid var(--fullred);
margin-top: 1em; margin-top: 1em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
#openai_prompt_manager .openai_prompt_manager_header { #completion_prompt_manager .completion_prompt_manager_header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
@ -141,17 +143,17 @@
width: 100% width: 100%
} }
#openai_prompt_manager .openai_prompt_manager_header div { #completion_prompt_manager .completion_prompt_manager_header div {
margin-top: 0.5em; margin-top: 0.5em;
width: fit-content; width: fit-content;
} }
#openai_prompt_manager .openai_prompt_manager_header_advanced { #completion_prompt_manager .completion_prompt_manager_header_advanced {
display: flex; display: flex;
margin-right: 0.25em; 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; flex-direction: column;
justify-content: center; justify-content: center;
margin-left: 0.25em; margin-left: 0.25em;
@ -160,11 +162,11 @@
filter: drop-shadow(0px 0px 2px black); 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; display: inherit;
} }
#openai_prompt_manager .openai_prompt_manager_footer { #completion_prompt_manager .completion_prompt_manager_footer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-end; justify-content: flex-end;
@ -173,15 +175,15 @@
width: 100% width: 100%
} }
#openai_prompt_manager .openai_prompt_manager_footer a { #completion_prompt_manager .completion_prompt_manager_footer a {
padding: 5px 5px; padding: 5px 5px;
} }
#openai_prompt_manager_popup { #completion_prompt_manager_popup {
margin-top: 0; margin-top: 0;
} }
#openai_prompt_manager_popup { #completion_prompt_manager_popup {
max-width: var(--sheldWidth); max-width: var(--sheldWidth);
height: calc(100% - 40px); height: calc(100% - 40px);
position: absolute; position: absolute;
@ -200,11 +202,10 @@
} }
@media screen and (max-width: 412px) { @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; 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; margin-left: 0.5em;
} }
} }

View File

@ -1282,7 +1282,7 @@
</div> </div>
</div> </div>
<div class="range-block"> <div class="range-block">
<div id="openai_prompt_manager"></div> <div id="completion_prompt_manager"></div>
</div> </div>
<div class="range-block"> <div class="range-block">
<div class="range-block-title justifyLeft"> <div class="range-block-title justifyLeft">
@ -3575,39 +3575,39 @@
</div> </div>
</div> </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> <h3>OpenAI Prompt Manager Settings</h3>
<div class="openai_prompt_manager_popup_entry"> <div class="completion_prompt_manager_popup_entry">
<form class="openai_prompt_manager_popup_entry_form"> <form class="completion_prompt_manager_popup_entry_form">
<div class="openai_prompt_manager_popup_entry_form_control"> <div class="completion_prompt_manager_popup_entry_form_control">
<label for="openai_prompt_manager_popup_entry_form_name"> <label for="completion_prompt_manager_popup_entry_form_name">
<span>Name</span> <span>Name</span>
</label> </label>
<div class="text_muted">A name for this prompt.</div> <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>
<div class="openai_prompt_manager_popup_entry_form_control"> <div class="completion_prompt_manager_popup_entry_form_control">
<label for="openai_prompt_manager_popup_entry_form_role"> <label for="completion_prompt_manager_popup_entry_form_role">
<span>Role</span> <span>Role</span>
</label> </label>
<div class="text_muted">To whom this message will be attributed.</div> <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="system">System</option>
<option value="user">User</option> <option value="user">User</option>
<option value="assistant">AI Assistant</option> <option value="assistant">AI Assistant</option>
</select> </select>
</div> </div>
<div class="openai_prompt_manager_popup_entry_form_control"> <div class="completion_prompt_manager_popup_entry_form_control">
<label for="openai_prompt_manager_popup_entry_form_prompt"> <label for="completion_prompt_manager_popup_entry_form_prompt">
<span>Prompt</span> <span>Prompt</span>
</label> </label>
<div class="text_muted">The prompt to be sent.</div> <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> </textarea>
</div> </div>
<div id="openai_prompt_manager_popup_entry_form_footer" > <div id="completion_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="completion_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> <a id="completion_prompt_manager_popup_entry_form_save" class="fa-solid fa-save menu_button" data-pm-prompt=""></a>
</div> </div>
</form> </form>
</div> </div>

View File

@ -90,6 +90,7 @@ import {
openai_messages_count, openai_messages_count,
getTokenCountOpenAI, getTokenCountOpenAI,
chat_completion_sources, chat_completion_sources,
setupClaudePromptManager,
getTokenizerModel, getTokenizerModel,
getChatCompletionModel, getChatCompletionModel,
} from "./scripts/openai.js"; } from "./scripts/openai.js";
@ -4529,6 +4530,18 @@ function changeMainAPI() {
getStatus(); getStatus();
getHordeModels(); 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 // OpenAI
loadOpenAISettings(data, settings); loadOpenAISettings(data, settings);
setupOpenAIPromptManager(settings);
// Horde // Horde
loadHordeSettings(settings); loadHordeSettings(settings);

View File

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