0.23.0 (#91)

* dockerfiles and docker-compose

* containerization fixes

* docker instructions

* readme

* readme

* dont mount src by default, readme

* hf template determine fixes

* auto determine prompt template

* script to start talemate listening only to 127.0.0.1

* prompt tweaks

* auto narrate round every 3 rounds

* tweaks

* Add return to startscreen button

* Only show return to start screen button if scene is active

* improvements to character creation

* dedicated property for scene title separate fromn the save directory name

* filter out negations into negative keywords

* increase auto narrate delay

* add character portrait keyword

* summarization should ignore most recent message, as it is often regenerated.

* cohere client

* specify python3

* improve viable runpod text gen detection

* fix formatting in template preview

* cohere command-r plus template that i am not sure if correct or not

* mistral client set to decensor

* fix issue with parsing json responses

* command-r prompts updated

* use official mistralai python client

* send max_tokens

* new input autocomplete functionality

* prompt tweeaks

* llama 3 templates

* add <|eot_id|> to stopping strings

* prompt tweak

* tooltip

* llama-3 identifier

* command-r and command-r plus prompt identifiers

* text-gen-webui client tweaks to make llama3 eos tokens work correctly

* better llama-3 detection

* better llama-3 finalizing of parameters

* streamline client prompt finalizers
reduce YY model smoothing factor from 0.3 to 0.1 for text-generation-webui client

* relock

* linting

* set 0.23.0

* add new gpt-4 models

* set 0.23.0

* add note about conecting to text-gen-webui from docker

* fix openai image generation no longer working

* default to concept_art

talemate_frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "talemate_frontend",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "talemate_frontend",
-      "version": "0.22.0",
+      "version": "0.23.0",
       "dependencies": {
         "@mdi/font": "7.4.47",
         "core-js": "^3.8.3",

talemate_frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "talemate_frontend",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

talemate_frontend/src/components/AppConfig.vue

@@ -157,6 +157,23 @@
                                         </v-row>
                                     </div>
 
+                                    <!-- COHERE API -->
+                                    <div v-if="applicationPageSelected === 'cohere_api'">
+                                        <v-alert color="white" variant="text" icon="mdi-api" density="compact">
+                                            <v-alert-title>Cohere</v-alert-title>
+                                            <div class="text-grey">
+                                                Configure your Cohere API key here. You can get one from <a href="https://dashboard.cohere.com/api-keys" target="_blank">https://dashboard.cohere.com/api-keys</a> 
+                                            </div>
+                                        </v-alert>
+                                        <v-divider class="mb-2"></v-divider>
+                                        <v-row>
+                                            <v-col cols="12">
+                                                <v-text-field type="password" v-model="app_config.cohere.api_key"
+                                                    label="Cohere API Key"></v-text-field>
+                                            </v-col>
+                                        </v-row>
+                                    </div>
+
                                     <!-- ELEVENLABS API -->
                                     <div v-if="applicationPageSelected === 'elevenlabs_api'">
                                         <v-alert color="white" variant="text" icon="mdi-api" density="compact">
@@ -279,6 +296,7 @@ export default {
                     {title: 'OpenAI', icon: 'mdi-api', value: 'openai_api'},
                     {title: 'mistral.ai', icon: 'mdi-api', value: 'mistralai_api'},
                     {title: 'Anthropic', icon: 'mdi-api', value: 'anthropic_api'},
+                    {title: 'Cohere', icon: 'mdi-api', value: 'cohere_api'},
                     {title: 'ElevenLabs', icon: 'mdi-api', value: 'elevenlabs_api'},
                     {title: 'RunPod', icon: 'mdi-api', value: 'runpod_api'},
                 ],

talemate_frontend/src/components/ClientModal.vue

@@ -51,7 +51,7 @@
 
                     <v-card-text>
                       <div class="text-caption" v-if="!client.data.has_prompt_template">No matching LLM prompt template found. Using default.</div>
-                      <pre>{{ client.data.prompt_template_example }}</pre>
+                      <div class="prompt-template-preview">{{ client.data.prompt_template_example }}</div>
                     </v-card-text>
                     <v-card-actions>
                       <v-btn @click.stop="determineBestTemplate" prepend-icon="mdi-web-box">Determine via HuggingFace</v-btn>
@@ -250,4 +250,13 @@ export default {
     this.registerMessageHandler(this.handleMessage);
   },
 }
-</script>
+</script>
+<style scoped>
+
+.prompt-template-preview {
+  white-space: pre-wrap;
+  font-family: monospace;
+  font-size: 0.8rem;
+}
+
+</style>

talemate_frontend/src/components/SceneMessages.vue

@@ -140,6 +140,16 @@ export default {
             this.setWaitingForInput(false);
         },
 
+        messageTypeIsSceneMessage(type) {
+            return ![ 
+                'request_input', 
+                'client_status', 
+                'agent_status', 
+                'status', 
+                'autocomplete_suggestion' 
+            ].includes(type);
+        },
+
         handleMessage(data) {
 
             var i;
@@ -198,7 +208,7 @@ export default {
                             action: data.action
                         }
                     );
-                } else if (data.type != 'request_input' && data.type != 'client_status' && data.type != 'agent_status' && data.type != 'status') {
+                } else if (this.messageTypeIsSceneMessage(data.type)) {
                     this.messages.push({ id: data.id, type: data.type, text: data.message, color: data.color, character: data.character, status:data.status, ts:data.ts }); // Add color property to the message
                 } else if (data.type === 'status' && data.data && data.data.as_scene_message === true) {
 

talemate_frontend/src/components/SceneTools.vue

@@ -50,6 +50,15 @@
                 <v-icon class="ml-1 mr-3" v-else-if="isWaitingForInput()">mdi-keyboard</v-icon>
                 <v-icon class="ml-1 mr-3" v-else>mdi-circle-outline</v-icon>
 
+                <v-tooltip v-if="isWaitingForInput()" location="top" text="Request autocomplete suggestion for your input. [Ctrl+Enter while typing]">
+                    <template v-slot:activator="{ props }">
+                        <v-btn :disabled="messageInput.length < 5" class="hotkey mr-3" v-bind="props" @click="requestAutocompleteSuggestion" color="primary" icon>
+                            <v-icon>mdi-auto-fix</v-icon>
+                        </v-btn>
+                    </template>
+                </v-tooltip>
+
+
                 <v-divider vertical></v-divider>
 
 
@@ -372,6 +381,7 @@ export default {
         inactiveCharacters: Array,
         activeCharacters: Array,
         playerCharacterName: String,
+        messageInput: String,
     },
     computed: {
         deactivatableCharacters: function() {
@@ -667,6 +677,10 @@ export default {
             this.sendHotButtonMessage(command)
         },
 
+        requestAutocompleteSuggestion() {
+            this.getWebsocket().send(JSON.stringify({ type: 'interact', text: `!acdlg:${this.messageInput}` }));
+        },
+
         handleMessage(data) {
 
             if (data.type === "command_status") {

talemate_frontend/src/components/TalemateApp.vue

@@ -86,9 +86,13 @@
 
     <!-- app bar -->
     <v-app-bar app>
-      <v-app-bar-nav-icon @click="toggleNavigation('game')"><v-icon>mdi-script</v-icon></v-app-bar-nav-icon>
+      <v-app-bar-nav-icon size="x-small" @click="toggleNavigation('game')">
+        <v-icon v-if="sceneDrawer">mdi-arrow-collapse-left</v-icon>
+        <v-icon v-else>mdi-arrow-collapse-right</v-icon>
+      </v-app-bar-nav-icon>
+      
       <v-toolbar-title v-if="scene.name !== undefined">
-        {{ scene.name || 'Untitled Scenario' }}
+        {{ scene.title || 'Untitled Scenario' }}
         <span v-if="scene.saved === false" class="text-red">*</span>
         <v-chip size="x-small" v-if="scene.environment === 'creative'" class="ml-2"><v-icon text="Creative" size="14"
             class="mr-1">mdi-palette-outline</v-icon>Creative Mode</v-chip>
@@ -107,6 +111,9 @@
         Talemate
       </v-toolbar-title>
       <v-spacer></v-spacer>
+
+      <v-app-bar-nav-icon v-if="sceneActive" @click="returnToStartScreen()"><v-icon>mdi-home</v-icon></v-app-bar-nav-icon>
+
       <VisualQueue ref="visualQueue" />
       <v-app-bar-nav-icon @click="toggleNavigation('debug')"><v-icon>mdi-bug</v-icon></v-app-bar-nav-icon>
       <v-app-bar-nav-icon @click="openAppConfig()"><v-icon>mdi-cog</v-icon></v-app-bar-nav-icon>
@@ -125,6 +132,7 @@
 
           <SceneTools 
             @open-world-state-manager="onOpenWorldStateManager"
+            :messageInput="messageInput"
             :playerCharacterName="getPlayerCharacterName()"
             :passiveCharacters="passiveCharacters"
             :inactiveCharacters="inactiveCharacters"
@@ -345,6 +353,7 @@ export default {
       if (data.type == "scene_status") {
         this.scene = {
           name: data.name,
+          title: data.data.title,
           environment: data.data.environment,
           scene_time: data.data.scene_time,
           saved: data.data.saved,
@@ -372,6 +381,23 @@ export default {
         return;
       }
 
+      if (data.type === 'autocomplete_suggestion') {
+
+        const completion = data.message;
+
+        // append completion to messageInput, add a space if
+        // neither messageInput ends with a space nor completion starts with a space
+        // unless completion starts with !, ., or ?
+
+        const completionStartsWithSentenceEnd = completion.startsWith('!') || completion.startsWith('.') || completion.startsWith('?') || completion.startsWith(')') || completion.startsWith(']') || completion.startsWith('}') || completion.startsWith('"') || completion.startsWith("'") || completion.startsWith("*") || completion.startsWith(",")
+
+        if (this.messageInput.endsWith(' ') || completion.startsWith(' ') || completionStartsWithSentenceEnd) {
+          this.messageInput += completion;
+        } else {
+          this.messageInput += ' ' + completion;
+        }
+      }
+
       if (data.type === 'request_input') {
 
         this.waitingForInput = true;
@@ -409,7 +435,14 @@ export default {
       }
 
     },
-    sendMessage() {
+    sendMessage(event) {
+
+      // if ctrl+enter is pressed, request autocomplete
+      if (event.ctrlKey && event.key === 'Enter') {
+        this.websocket.send(JSON.stringify({ type: 'interact', text: `!acdlg: ${this.messageInput}` }));
+        return;
+      }
+
       if (!this.inputDisabled) {
         this.websocket.send(JSON.stringify({ type: 'interact', text: this.messageInput }));
         this.messageInput = '';
@@ -447,6 +480,16 @@ export default {
       else if (navigation == "debug")
         this.debugDrawer = !this.debugDrawer;
     },
+    returnToStartScreen() {
+
+      if(this.sceneActive && !this.scene.saved) {
+        let confirm = window.confirm("Are you sure you want to return to the start screen? You will lose any unsaved progress.");
+        if(!confirm)
+          return;
+      }
+      // reload
+      document.location.reload();
+    },
     getClients() {
       if (!this.$refs.aiClient) {
         return [];