DALL-E Image Count:
diff --git a/src/libs/hugging-face-api-access.js b/src/libs/hugging-face-api-access.js
new file mode 100644
index 00000000..2b66d1ab
--- /dev/null
+++ b/src/libs/hugging-face-api-access.js
@@ -0,0 +1,155 @@
+/* eslint-disable no-unused-vars */
+import { showToast, sleep } from "./utils";
+
+let hfStreamRetryCount = 0;
+export async function fetchHuggingFaceModelResponseStream(conversation, attitude, model, huggingFaceEndpoint, updateUiFunction, apiKey, maxTokens) {
+ const gptMessagesOnly = filterMessages(conversation);
+
+ const requestOptions = {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ "Authorization": `Bearer ${apiKey}`,
+ },
+ body: JSON.stringify({
+ model: model,
+ stream: true,
+ messages: gptMessagesOnly,
+ temperature: attitude * 0.01,
+ max_tokens: parseInt(maxTokens)
+ }),
+ };
+
+ try {
+ const response = await fetch(`${huggingFaceEndpoint + `/v1/chat/completions`}`, requestOptions);
+
+ const result = await readResponseStream(response, updateUiFunction);
+
+ hfStreamRetryCount = 0;
+ return result;
+ } catch (error) {
+ console.error("Error fetching Hugging Face Model response:", error);
+ hfStreamRetryCount++
+
+ if (hfStreamRetryCount < 3) {
+ await sleep(1500);
+ return fetchHuggingFaceModelResponseStream(conversation, attitude, model, huggingFaceEndpoint, updateUiFunction);
+ }
+
+ return "Error fetching response from Hugging Face Model";
+
+ }
+}
+
+
+let retryCount = 0;
+export async function getConversationTitleFromHuggingFaceModel(messages, model, sliderValue, HuggingFaceModelEndpoint) {
+ try {
+ const apiKey = document.getElementById('api-key');
+ apiKey.value = localStorage.getItem("hfKey");
+
+ let tempMessages = messages.slice(0);
+ tempMessages.push({ role: 'user', content: "Summarize my inital request or greeting in 5 words or less." });
+
+ const requestOptions = {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ "Authorization": `Bearer ${apiKey.value}`,
+ },
+ body: JSON.stringify({
+ model: model,
+ stream: true,
+ messages: tempMessages,
+ temperature: sliderValue * 0.01,
+ max_tokens: 500
+ }),
+ };
+
+ const response = await fetch(`${HuggingFaceModelEndpoint + `/v1/chat/completions`}`, requestOptions);
+
+ const result = await readResponseStream(response);
+
+ hfStreamRetryCount = 0;
+ return result;
+ } catch (error) {
+
+ if (retryCount < 5) {
+ retryCount++;
+ getConversationTitleFromHuggingFaceModel(messages, model, sliderValue);
+ }
+
+ console.error("Error fetching Hugging Face Model response:", error);
+ return "An error occurred while generating conversaton title.";
+ }
+}
+
+async function readResponseStream(response, updateUiFunction) {
+ let decodedResult = "";
+
+ const reader = await response.body.getReader();
+ const decoder = new TextDecoder("utf-8");
+ while (true) {
+ const { done, value } = await reader.read();
+ if (done) {
+ return decodedResult
+ };
+ const chunk = decoder.decode(value);
+ const parsedLines = parseHuggingFaceResponseChunk(chunk);
+ for (const parsedLine of parsedLines) {
+ const { choices } = parsedLine;
+ const { delta } = choices[0];
+ const { content } = delta;
+ if (content) {
+ decodedResult += content;
+
+ if (updateUiFunction) {
+ updateUiFunction(content);
+ }
+ }
+ }
+ }
+}
+
+let buffer = ""; // Buffer to hold incomplete JSON data across chunks
+function parseHuggingFaceResponseChunk(chunk) {
+ buffer += chunk; // Append new chunk to buffer
+ const lines = buffer.split("\n");
+
+ const completeLines = lines.slice(0, -1); // All lines except the last one
+ buffer = lines[lines.length - 1]; // Last line might be incomplete, keep it in buffer
+
+ const results = [];
+ for (const line of completeLines) {
+ let cleanedLine = line.trim();
+
+ // Check if the line contains the control message [DONE] and remove it
+ if (cleanedLine.includes("[DONE]")) {
+ cleanedLine = cleanedLine.replace("[DONE]", "").trim();
+ }
+
+ // Remove any "data: " prefix that might be present after cleaning
+ // Using regex to handle any case variations and extra spaces
+ cleanedLine = cleanedLine.replace(/^data:\s*/i, "").trim();
+
+ if (cleanedLine !== "") {
+ try {
+ const parsed = JSON.parse(cleanedLine);
+ results.push(parsed);
+ } catch (error) {
+ console.error("Failed to parse JSON:", cleanedLine, error);
+ }
+ }
+ }
+ return results;
+}
+
+function filterMessages(conversation) {
+ let lastMessageContent = "";
+ return conversation.filter(message => {
+ const isGPT = !message.content.trim().toLowerCase().startsWith("image::") &&
+ !lastMessageContent.startsWith("image::");
+ lastMessageContent = message.content.trim().toLowerCase();
+ return isGPT;
+ });
+}
\ No newline at end of file
diff --git a/src/libs/utils.js b/src/libs/utils.js
index 930e9239..aa956321 100644
--- a/src/libs/utils.js
+++ b/src/libs/utils.js
@@ -52,7 +52,7 @@ export async function getConversationTitleFromGPT(messages, model, sliderValue)
if (retryCount < 5) {
retryCount++;
- self.getConversationTitleFromGPT(messages, model, sliderValue);
+ getConversationTitleFromGPT(messages, model, sliderValue);
}
console.error("Error fetching GPT response:", error);
diff --git a/src/views/ChatLayout.vue b/src/views/ChatLayout.vue
index cf8c3662..f6555394 100644
--- a/src/views/ChatLayout.vue
+++ b/src/views/ChatLayout.vue
@@ -8,6 +8,7 @@ import { fetchClaudeConversationTitle, streamClaudeResponse } from '@/libs/claud
import { getConversationTitleFromGPT, showToast } from '@/libs/utils';
import { analyzeImage } from '@/libs/image-analysis';
import { fetchLocalModelResponseStream } from '@/libs/local-model-access';
+import { fetchHuggingFaceModelResponseStream, getConversationTitleFromHuggingFaceModel } from '@/libs/hugging-face-api-access';
import messageItem from '@/components/message-item.vue';
import chatInput from '@/components/chat-input.vue';
@@ -42,6 +43,12 @@ const selectedDallEImageCount = ref(parseInt(localStorage.getItem("selectedDallE
const selectedDallEImageResolution = ref(localStorage.getItem("selectedDallEImageResolution") || '256x256');
const selectedAutoSaveOption = ref(localStorage.getItem("selectedAutoSaveOption") || true);
+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());
const storedConversations = ref(loadStoredConversations());
@@ -58,14 +65,16 @@ watch(selectedModel, (newValue) => {
const MODEL_TYPES = {
LMSTUDIO: 'lmstudio',
CLAUDE: 'claude',
- BISON: 'bison'
+ HUGGING_FACE: 'tgi'
};
// Default settings
let useLocalModel = false;
+
const flags = {
isUsingLocalModel: false,
- isClaudeEnabled: false
+ isClaudeEnabled: false,
+ isUsingHuggingFaceModel: false
};
// Determine settings based on model type
@@ -73,8 +82,12 @@ watch(selectedModel, (newValue) => {
useLocalModel = true;
flags.isUsingLocalModel = true;
}
+ else if (newValue.includes(MODEL_TYPES.HUGGING_FACE)) {
+ useLocalModel = false;
+ flags.isUsingHuggingFaceModel = true;
+ }
else if (newValue.includes(MODEL_TYPES.CLAUDE)) {
- useLocalModel = true;
+ useLocalModel = false;
flags.isClaudeEnabled = true;
}
@@ -85,12 +98,29 @@ watch(selectedModel, (newValue) => {
localStorage.setItem('selectedModel', newValue);
isUsingLocalModel.value = flags.isUsingLocalModel;
isClaudeEnabled.value = flags.isClaudeEnabled;
+ isUsingHuggingFaceModel.value = flags.isUsingHuggingFaceModel;
}
catch (error) {
console.error('Error updating settings:', error);
}
});
+watch(maxTokens, (newValue) => {
+ localStorage.setItem('maxTokens', newValue);
+});
+
+watch(huggingFaceEndpoint, (newValue) => {
+ localStorage.setItem('huggingFaceEndpoint', newValue);
+});
+
+watch(hfSliderValue, (newValue) => {
+ localStorage.setItem('hf-attitude', newValue);
+});
+
+watch(hfKey, (newValue) => {
+ localStorage.setItem('hfKey', newValue);
+});
+
watch(localModelName, (newValue) => {
localStorage.setItem('localModelName', newValue);
});
@@ -347,6 +377,7 @@ async function createNewConversationWithTitle() {
if (isClaudeEnabled.value) {
newConversationWithTitle.title = await fetchClaudeConversationTitle(messages.value.slice(0));
}
+
if (isUsingLocalModel.value) {
//Local Models are weird with trying to title conversations...
@@ -355,6 +386,10 @@ async function createNewConversationWithTitle() {
newConversationWithTitle.title = firstMessage.substring(0, Math.min(firstMessage.length, titleLength));
}
+
+ if (isUsingHuggingFaceModel.value) {
+ 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);
}
@@ -461,6 +496,11 @@ async function sendMessage(event) {
return;
}
+ if (selectedModel.value.indexOf("tgi") !== -1) {
+ await sendHuggingFaceMessage(messageText);
+ return;
+ }
+
isClaudeEnabled.value = false;
addMessage("user", messageText);
@@ -525,6 +565,32 @@ async function sendGPTMessage(message) {
}
}
+async function sendHuggingFaceMessage(message) {
+ addMessage("user", message);
+
+ scrollToBottom();
+
+ userText.value = "";
+
+ streamedMessageText.value = "";
+ isLoading.value = true;
+
+ try {
+ let response = await fetchHuggingFaceModelResponseStream(messages.value, hfSliderValue.value, selectedModel.value, huggingFaceEndpoint.value, updateUI, hfKey.value, maxTokens.value);
+
+ isLoading.value = false;
+
+ addMessage('assistant', response);
+
+ await saveMessages();
+
+ scrollToBottom();
+ }
+ catch (error) {
+ console.error("Error sending message:", error);
+ }
+}
+
async function sendClaudeMessage(messageText) {
if (messageText.toLowerCase().startsWith("vision::")) {
addMessage("user", messageText);
@@ -712,7 +778,11 @@ const refs = {
claudeSliderValue,
selectedDallEImageCount,
selectedDallEImageResolution,
- selectedAutoSaveOption
+ selectedAutoSaveOption,
+ hfKey,
+ hfSliderValue,
+ huggingFaceEndpoint,
+ maxTokens
};
// Event handlers for updating the parent's state when the child emits an update
const updateSetting = (field, value) => {
@@ -761,15 +831,23 @@ onMounted(() => {