Added new max_tokens settings for Hugging Face models as context wind…

…ows vary greatly between models and for some reason hugging face defaults to a 500 token window for responses...

Added an overlay that dims the screen when the settings or conversatioons panels are open.

Other finishing touches for hugging face support.

README.md

@@ -1,7 +1,7 @@
 ## [Try MinimalGPT/MinimalClaude/MinimalLocal (Public Site)](https://minimalgpt.app/)
 
 ![Build Status](https://img.shields.io/badge/build-passing-brightgreen)
-![Version](https://img.shields.io/badge/version-5.0.2-blue)
+![Version](https://img.shields.io/badge/version-5.0.3-blue)
 ![License](https://img.shields.io/badge/license-MIT-green)
 
 **MinimalChat** is an open-source LLM chat web app designed to be as self-contained as possible. All conversations are stored locally on the client's device, with the only information being sent to the server being API calls to GPT or Claude (uses a CORS proxy) chat when the user sends a message and when a user saves a conversation to generate a conversation title.
@@ -165,5 +165,3 @@ Also `npm run build` will output a dist folder with minified files etc...`npm ru
 ### Building/Bundling (WIP)
 
 - Running `npm run build` will perform a dist build process that incldues minification and cache busting (sort of) and output to the `dist` folder.
-
-

src/components/settings-dialog.vue

@@ -17,10 +17,12 @@ const props = defineProps({
     hfSliderValue: Number,
     selectedDallEImageCount: Number,
     selectedDallEImageResolution: String,
-    selectedAutoSaveOption: String
+    selectedAutoSaveOption: String,
+    maxTokens: Number
 });
 
 const emit = defineEmits([
+    'update:maxTokens',
     'update:model',
     'update:localModelName',
     'update:localModelEndpoint',
@@ -72,8 +74,8 @@ function toggleSidebar() {
                 <option value="claude-3-opus-20240229">Claude 3 Opus</option>
                 <option value="claude-3-sonnet-20240229">Claude 3 Sonnet</option>
                 <option value="claude-3-haiku-20240307">Claude 3 Haiku</option>
-                <option value="lmstudio">Local Model (LM Studio) </option>
                 <option value="tgi">Hugging Face</option>
+                <option value="lmstudio">Local Model (LM Studio) </option>
             </select>
         </div>
         <!-- Local Model Name -->
@@ -129,6 +131,11 @@ function toggleSidebar() {
             <label for="api-key">Hugging Face Key:</label>
             <input id="api-key" :value="hfKey" @blur="update('hfKey', $event.target.value)">
         </div>
+        <!-- Hugging Face max tokens param -->
+        <div class="api-key">
+            <label for="api-key">Hugging Face max tokens:</label>
+            <input id="api-key" :value="maxTokens" @blur="update('maxTokens', $event.target.value)">
+        </div>
         <!-- Hugging Face Slider Value -->
         <div class="slider-container">
             <span>Serious</span>

src/libs/hugging-face-api-access.js

@@ -2,7 +2,7 @@
 import { showToast, sleep } from "./utils";
 
 let hfStreamRetryCount = 0;
-export async function fetchHuggingFaceModelResponseStream(conversation, attitude, model, huggingFaceEndpoint, updateUiFunction, apiKey) {
+export async function fetchHuggingFaceModelResponseStream(conversation, attitude, model, huggingFaceEndpoint, updateUiFunction, apiKey, maxTokens) {
     const gptMessagesOnly = filterMessages(conversation);
 
     const requestOptions = {
@@ -15,12 +15,13 @@ export async function fetchHuggingFaceModelResponseStream(conversation, attitude
             model: model,
             stream: true,
             messages: gptMessagesOnly,
-            temperature: attitude * 0.01
+            temperature: attitude * 0.01,
+            max_tokens: parseInt(maxTokens)
         }),
     };
 
     try {
-        const response = await fetch(`https://corsproxy.io/?${huggingFaceEndpoint + `/v1/chat/completions`}`, requestOptions);
+        const response = await fetch(`${huggingFaceEndpoint + `/v1/chat/completions`}`, requestOptions);
 
         const result = await readResponseStream(response, updateUiFunction);
 
@@ -54,17 +55,18 @@ export async function getConversationTitleFromHuggingFaceModel(messages, model,
             method: "POST",
             headers: {
                 "Content-Type": "application/json",
-                "Authorization": `Bearer ${apiKey}`,
+                "Authorization": `Bearer ${apiKey.value}`,
             },
             body: JSON.stringify({
                 model: model,
                 stream: true,
                 messages: tempMessages,
-                temperature: sliderValue * 0.01
+                temperature: sliderValue * 0.01,
+                max_tokens: 500
             }),
         };
 
-        const response = await fetch(`https://corsproxy.io/?${HuggingFaceModelEndpoint + `/v1/chat/completions`}`, requestOptions);
+        const response = await fetch(`${HuggingFaceModelEndpoint + `/v1/chat/completions`}`, requestOptions);
 
         const result = await readResponseStream(response);
 

src/views/ChatLayout.vue

@@ -47,6 +47,7 @@ const hfKey = ref(localStorage.getItem("hfKey") || '');
 const hfSliderValue = ref(parseInt(localStorage.getItem("hf-attitude")) || 50);
 const huggingFaceEndpoint = ref(localStorage.getItem("huggingFaceEndpoint") || '');
 const isUsingHuggingFaceModel = ref(false);
+const maxTokens = ref(parseInt(localStorage.getItem("hf-max-tokens")) || 3000);
 
 const conversations = ref(loadConversationTitles());
 const conversationTitles = ref(loadConversationTitles());
@@ -104,6 +105,10 @@ watch(selectedModel, (newValue) => {
     }
 });
 
+watch(maxTokens, (newValue) => {
+    localStorage.setItem('maxTokens', newValue);
+});
+
 watch(huggingFaceEndpoint, (newValue) => {
     localStorage.setItem('huggingFaceEndpoint', newValue);
 });
@@ -383,13 +388,7 @@ async function createNewConversationWithTitle() {
     }
 
     if (isUsingHuggingFaceModel.value) {
-        //newConversationWithTitle.title = await getConversationTitleFromHuggingFaceModel(messages.value.slice(0), selectedModel.value, hfSliderValue.value, huggingFaceEndpoint.value);
-
-        //HF Models are weird with trying to title conversations...
-        const firstMessage = messages.value[0].content;
-        const titleLength = 100;
-
-        newConversationWithTitle.title = firstMessage.substring(0, Math.min(firstMessage.length, titleLength));
+        newConversationWithTitle.title = await getConversationTitleFromHuggingFaceModel(messages.value.slice(0), selectedModel.value, hfSliderValue.value, huggingFaceEndpoint.value);
     }
     else {
         newConversationWithTitle.title = await getConversationTitleFromGPT(messages.value.slice(0), selectedModel.value, sliderValue.value);
@@ -577,7 +576,7 @@ async function sendHuggingFaceMessage(message) {
     isLoading.value = true;
 
     try {
-        let response = await fetchHuggingFaceModelResponseStream(messages.value, hfSliderValue.value, selectedModel.value, huggingFaceEndpoint.value, updateUI, hfKey.value);
+        let response = await fetchHuggingFaceModelResponseStream(messages.value, hfSliderValue.value, selectedModel.value, huggingFaceEndpoint.value, updateUI, hfKey.value, maxTokens.value);
 
         isLoading.value = false;
 
@@ -782,7 +781,8 @@ const refs = {
     selectedAutoSaveOption,
     hfKey,
     hfSliderValue,
-    huggingFaceEndpoint
+    huggingFaceEndpoint,
+    maxTokens
 };
 // Event handlers for updating the parent's state when the child emits an update
 const updateSetting = (field, value) => {
@@ -831,6 +831,9 @@ onMounted(() => {
     <div class="app-body">
         <!-- App Container -->
         <div class="app-container" id="app-container">
+            <!-- Overlay for dimming effect -->
+            <div class="overlay" v-show="isSidebarOpen || showConversationOptions"></div>
+
             <!-- Settings Sidebar -->
             <div class="sidebar-common sidebar-left box" id="settings-dialog" :class="{ open: isSidebarOpen }">
                 <settingsDialog :isSidebarOpen="isSidebarOpen" :selectedModel="selectedModel"
@@ -840,7 +843,8 @@ onMounted(() => {
                     :claudeKey="claudeKey" :claudeSliderValue="claudeSliderValue"
                     :selectedDallEImageCount="selectedDallEImageCount"
                     :selectedDallEImageResolution="selectedDallEImageResolution"
-                    :selectedAutoSaveOption="selectedAutoSaveOption"
+                    :selectedAutoSaveOption="selectedAutoSaveOption" :maxTokens="maxTokens"
+                    @update:maxTokens="updateSetting('maxTokens', $event)"
                     @update:huggingFaceEndpoint="updateSetting('huggingFaceEndpoint', $event)"
                     @update:hfKey="updateSetting('hfKey', $event)"
                     @update:hfSliderValue="updateSetting('hfSliderValue', $event)"
@@ -1120,7 +1124,8 @@ pre {
 
 // Common styles for both sidebars
 .sidebar-common {
-    background-color: #262431;
+    background-color: #242426;
+    ;
     width: 50vw; // Adjust the width as needed
     max-width: 100%; // Ensure it doesn't exceed the screen width
     height: 100vh; // Full height
@@ -1159,6 +1164,23 @@ pre {
     display: none;
 }
 
+.overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(15, 15, 15, 0.5); // Semi-transparent black
+    z-index: 99999; // Ensure it's below the sidebar but above other content
+    transition: opacity 0.3s ease-in-out;
+    display: block;
+}
+
+// Hide the overlay when not needed
+.overlay:not(:empty) {
+    display: none;
+}
+
 @keyframes delayZIndex {
     0% {
         z-index: -1;