Prompt template improvements. Updating auth branch

index.html

@@ -115,9 +115,9 @@
                     </label>
                     -->
 
-                    <svg id="sendMessage" onclick="sendMessage('')" xmlns="http://www.w3.org/2000/svg" width="40" height="40"
-                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
-                        stroke-linejoin="round" style="color: white;">
+                    <svg id="sendMessage" onclick="sendMessage('')" xmlns="http://www.w3.org/2000/svg" width="40"
+                        height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                        stroke-linecap="round" stroke-linejoin="round" style="color: white;">
                         <circle cx="12" cy="12" r="10" fill="#00BFFF"></circle> <!-- Tint color circle -->
                         <path d="M12 8l-4 4h8l-4-4z" fill="white"></path> <!-- Arrow up -->
                     </svg>
@@ -126,13 +126,35 @@
         </div>
 
         <div class="tab-o" id="2">
-            <div class="header">
-                <h1>Collections</h1>
-                <button class="add-button">+</button>
-            </div>
+            <div class="coll-lo">
+                <div class="block-card settings-container">
+                    <div class="tab-header">
+                        <button class="tab active">Chats</button>
+                        <button class="tab">Collections</button>
+                    </div>
 
-            <ul class="collection-list" id="collection-items">
-            </ul>
+                    <div class="section">
+                        <div class="header">
+                            <h1>Collections</h1>
+                            <button class="add-button">+</button>
+                        </div>
+
+                        <ul class="collection-list" id="collection-items">
+                        </ul>
+                    </div>
+
+                    <div class="section">
+                        <div class="section-heading">AI Data Usage</div>
+                        <div class="input-group">
+                            <span>This feature allows us to use your search data to improve our AI models.</span>
+                            <label class="toggle-switch">
+                                <input type="checkbox" checked>
+                                <span class="slider"></span>
+                            </label>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
 
         <div class="tab-o" id="3">

lib/generate.py

@@ -27,35 +27,45 @@ def __init__(self, config):
 
     def generate(self, chat_id, speech=False, text="", template=None):
         if template == "dialog":
-            prompt_dir = os.path.join(self.config["server"]["prompts"] + 'dialog.txt')
+            # Load the prompt template
+            prompt_dir = os.path.join(self.config["server"]["prompts"], 'dialog.txt')
             with open(prompt_dir, 'r') as file:
                 prompt = file.read()
 
+            # Load the chat history
             history = ''
-            with open(os.path.join(self.config["server"]["history"], chat_id), 'r') as file:
-                data = json.load(file)
-                history = ''
-                for item in data:
-                    name = item.get('name', '')
-                    message = item.get('message', '')
-                    if name and message:
-                        history += f'{name}: {message}\n'
-
-            history = f"{history}Yuki: {text}\nYuna:"
-
-            # calculate the length of the prompt variable
-            prompt_length = len(self.model.tokenize(prompt))
-
-            # Calculate the maximum length for the history
-            max_length = self.config["ai"]["context_length"] - self.config["ai"]["max_new_tokens"]
-
-            # Crop the history to fit within the max_length and prompt_length combined, counting from the end of the text
-            cropped_history = history[-(max_length - prompt_length):]
-
-            # replace string {user_msg} in the prompt with the history
+            history_path = os.path.join(self.config["server"]["history"], chat_id)
+            if os.path.exists(history_path):
+                with open(history_path, 'r') as file:
+                    data = json.load(file)
+                    for item in data:
+                        name = item.get('name', '')
+                        message = item.get('message', '')
+                        if name and message:
+                            history += f'{name}: {message}\n'
+
+            # Append the latest message from Yuki
+            history += f"Yuki: {text}\nYuna:"
+
+            # Tokenize the history to calculate its length in tokens
+            tokenized_history = self.model.tokenize(history)
+
+            # Calculate the maximum length for the history in tokens
+            max_length_tokens = self.config["ai"]["context_length"] - self.config["ai"]["max_new_tokens"]
+
+            # Crop the tokenized history to fit within the max_length_tokens
+            # Ensure we are cropping tokens, not characters
+            if len(tokenized_history) > max_length_tokens:
+                tokenized_history = tokenized_history[-max_length_tokens:]
+
+            # Convert the cropped tokenized history back to a string
+            cropped_history = self.model.detokenize(tokenized_history)
+
+            # Replace the placeholder in the prompt with the cropped history
             response = prompt.replace('{user_msg}', cropped_history)
 
-            print(len(self.model.tokenize(response)), '<- response length')
+            # Output the combined prompt and history (for debugging or further processing)
+            print(response)
 
             # inject prompt variable from dialog into new_history
         elif template != "dialog" and template != None:
@@ -75,10 +85,12 @@ def generate(self, chat_id, speech=False, text="", template=None):
             # replace string {user_msg} in the prompt with the history
             response = prompt.replace('{user_msg}', cropped_history)
 
-            print(len(self.model.tokenize(response)), '<- response length')
         elif template == None:
             print('template is none')
 
+        print(len(self.model.tokenize(response)), '<- response length')
+        print('------\n\n\n', response, '------\n\n\n')
+
         response = self.model(response, stream=False)
         response = self.clearText(str(response))
 

static/config.json

@@ -5,8 +5,8 @@
         "art": false,
         "max_new_tokens": 128,
         "context_length": 1024,
-        "temperature": 0.7,
-        "repetition_penalty": 1.2,
+        "temperature": 0.65,
+        "repetition_penalty": 1.5,
         "last_n_tokens": 128,
         "seed": -1,
         "top_k": 40,

static/css/index.css

@@ -130,7 +130,7 @@ body {
 
 #message-container {
     top: 50px;
-    width: auto;
+    width: 100%;
     bottom: 0px;
     left: 0;
     right: 0;
@@ -517,41 +517,68 @@ input:checked~.slider .off-label {
 
 .collection-list {
     list-style: none;
-    padding: 0;
+    display: flex;
+    flex-wrap: wrap; /* Enable wrapping of items */
+    gap: 20px; /* Space between cards */
+    justify-content: center; /* Align items to the start */
+    flex-direction: row;
 }
 
 .collection-item {
-    background-color: #333;
-    /* Card background */
-    border-radius: 8px;
-    padding: 20px;
-    margin-bottom: 10px;
+    background-color: #8BC34A; /* Card background color */
+    border-radius: 16px; /* Rounded corners for the card */
+    padding: 2%;
+    margin-bottom: 20px; /* Space below each card */
+    flex-basis: calc(33.333% - 20px); /* Width for 3 cards per row minus the gap */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow for depth */
     display: flex;
-    justify-content: space-between;
-    align-items: center;
+    flex-direction: column; /* Stack elements vertically */
+    justify-content: space-between; /* Distribute space between content */
 }
 
 .collection-info {
     display: flex;
-    align-items: center;
+    flex-direction: column; /* Stack info vertically */
+    align-items: flex-start; /* Align items to the start */
+    margin-bottom: 20px; /* Space between info and actions */
 }
 
 .collection-info img {
-    margin-right: 10px;
+    border-radius: 8px; /* Match the card's border radius */
+    margin-bottom: 10px; /* Space between image and text */
+}
+
+.collection-info h2 {
+    font-size: 1.5em; /* Larger heading font size */
+    margin: 0 0 10px 0; /* Space between heading and description */
+}
+
+.collection-info p {
+    font-size: 1em; /* Standard text size */
+    color: #666; /* Lighter text color for contrast */
+    margin: 0; /* Remove default margins */
 }
 
 .collection-actions {
     display: flex;
+    justify-content: flex-start; /* Align buttons to the start */
+    width: 100%; /* Full width to contain buttons */
+    flex-direction: column; /* Stack buttons vertically */
 }
 
 .collection-actions button {
-    background-color: #4CAF50;
-    /* Adjust color to match your design */
+    background-color: #2196F3; /* Adjusted to match the button color in the image */
     border: none;
-    padding: 10px;
-    margin-left: 5px;
+    border-radius: 8px; /* Rounded corners for the button */
+    padding: 15px 30px; /* Larger padding for a bigger button */
+    margin-bottom: 10px; /* Space between buttons */
     color: white;
     cursor: pointer;
+    transition: background-color 0.3s ease; /* Smooth background color transition */
+}
+
+.collection-actions button:hover {
+    background-color: #1976D2; /* Darker shade on hover */
 }
 
 .pricing-container {
@@ -651,6 +678,17 @@ body::-webkit-scrollbar {
         padding: 0 !important;
         width: 100% !important;
     }
+
+    .collection-actions button {
+        padding: 10px 20px; /* Smaller padding on mobile */
+        margin-right: 10px; /* Space between buttons on mobile */
+    }
+
+    ..collection-list {
+        flex-direction: row; /* Stack cards horizontally on mobile */
+        flex-wrap: wrap; /* Enable wrapping of items */
+        justify-content: center; /* Align items to the center */
+    }
 }
 
 @media (min-width : 428px) {

static/js/himitsu.js

@@ -7,6 +7,7 @@ class PromptTemplate {
 
   generateSelectElements() {
     const form = document.getElementById("Himitsu");
+    form.innerHTML = '';
 
     this.fields.forEach(field => {
       const label = document.createElement("label");
@@ -189,18 +190,6 @@ const decisionMaking = new PromptTemplate(
   ]
 );
 
-const himitsu = new PromptTemplate([{
-    id: 'text',
-    label: 'Question',
-    type: 'input'
-  },
-  {
-    id: 'clarification',
-    label: 'Clarification',
-    type: 'input'
-  }
-])
-
 const dialog = new PromptTemplate([{
     id: 'text',
     label: 'Question',

static/js/index.js

@@ -123,6 +123,18 @@ function sendMessage(message, imageName = false) {
     messageManager.createMessage(messageData.name, messageData.message);
 
     if (currentPromptName == 'himitsu') {
+      const himitsu = new PromptTemplate([{
+          id: 'text',
+          label: 'Question',
+          type: 'input'
+        },
+        {
+          id: 'clarification',
+          label: 'Clarification',
+          type: 'input'
+        }
+      ])
+
       himitsu.generateSelectElements();
       himitsu.generateTemplateInputs();
     } else if (currentPromptName == 'writer') {