ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2024-12-20 04:47:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

updated

Browse Source
This commit is contained in:
Saifeddine ALOUI 2024-10-30 13:59:40 +01:00
parent c67896e252
commit 5d9f49df3f
1 changed files with 83 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
web/src/views/DiscussionsView.vue
View File

@ -50,9 +50,9 @@
<!-- Animated Progress Bar --> <!-- Animated Progress Bar -->
<div class="w-full h-24 relative overflow-hidden bg-gradient-to-r from-blue-200 to-purple-200 dark:from-blue-800 dark:to-purple-800 rounded-full shadow-lg"> <div class="animated-progressbar-bg">
<!-- Progress Background --> <!-- Progress Background -->
<div class="absolute top-0 left-0 h-full bg-gradient-to-r from-blue-500 to-purple-500 dark:from-blue-600 dark:to-purple-600 transition-all duration-300" <div class="animated-progressbar-fg"
:style="{ width: `${loading_progress}%` }"> :style="{ width: `${loading_progress}%` }">
</div> </div>
<!-- Star that moves with progress --> <!-- Star that moves with progress -->
@ -649,15 +649,23 @@
@click="handlePromptSelection(prompt)" @click="handlePromptSelection(prompt)"
class="flex-shrink-0 w-[300px] bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg p-4 cursor-pointer hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 flex flex-col justify-between h-[220px] overflow-hidden group" class="flex-shrink-0 w-[300px] bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg p-4 cursor-pointer hover:shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 flex flex-col justify-between h-[220px] overflow-hidden group"
> >
<div class="flex flex-col h-full">
<!-- Title if exists -->
<h3 v-if="extractTitle(prompt)" class="text-lg font-semibold mb-2 text-gray-800 dark:text-gray-200">
{{ extractTitle(prompt) }}
</h3>
<!-- Content preview -->
<div <div
:title="prompt" :title="getPromptContent(prompt)"
class="text-base text-gray-700 dark:text-gray-300 overflow-hidden relative h-full" class="text-base text-gray-700 dark:text-gray-300 overflow-hidden relative flex-grow"
> >
<div class="absolute inset-0 overflow-hidden"> <div class="absolute inset-0 overflow-hidden">
{{ prompt }} {{ getPromptContent(prompt) }}
</div> </div>
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-white dark:to-gray-800 group-hover:opacity-0 transition-opacity duration-300"></div> <div class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-white dark:to-gray-800 group-hover:opacity-0 transition-opacity duration-300"></div>
</div> </div>
</div>
<div class="mt-2 text-sm text-gray-500 dark:text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300"> <div class="mt-2 text-sm text-gray-500 dark:text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
Click to select Click to select
</div> </div>
@ -682,7 +690,6 @@
{{ placeholder.label }} {{ placeholder.label }}
</label> </label>
<!-- Single line text input -->
<input <input
v-if="placeholder.type === 'text'" v-if="placeholder.type === 'text'"
:id="'placeholder-'+index" :id="'placeholder-'+index"
@ -693,7 +700,6 @@
@input="updatePreview" @input="updatePreview"
> >
<!-- Number input (int) -->
<input <input
v-if="placeholder.type === 'int'" v-if="placeholder.type === 'int'"
:id="'placeholder-'+index" :id="'placeholder-'+index"
@ -704,7 +710,6 @@
@input="updatePreview" @input="updatePreview"
> >
<!-- Number input (float) -->
<input <input
v-if="placeholder.type === 'float'" v-if="placeholder.type === 'float'"
:id="'placeholder-'+index" :id="'placeholder-'+index"
@ -715,7 +720,6 @@
@input="updatePreview" @input="updatePreview"
> >
<!-- Multiline text input -->
<textarea <textarea
v-if="placeholder.type === 'multiline'" v-if="placeholder.type === 'multiline'"
:id="'placeholder-'+index" :id="'placeholder-'+index"
@ -725,7 +729,6 @@
@input="updatePreview" @input="updatePreview"
></textarea> ></textarea>
<!-- Code editor -->
<div v-if="placeholder.type === 'code'" class="border rounded-md overflow-hidden"> <div v-if="placeholder.type === 'code'" class="border rounded-md overflow-hidden">
<div class="bg-gray-200 dark:bg-gray-900 p-2 text-sm"> <div class="bg-gray-200 dark:bg-gray-900 p-2 text-sm">
{{ placeholder.language || 'Plain text' }} {{ placeholder.language || 'Plain text' }}
@ -739,7 +742,6 @@
></textarea> ></textarea>
</div> </div>
<!-- Options (dropdown) -->
<select <select
v-if="placeholder.type === 'options'" v-if="placeholder.type === 'options'"
:id="'placeholder-'+index" :id="'placeholder-'+index"
@ -1895,42 +1897,63 @@ export default {
case 3: return Math.random() * 100; // Bottom or left edge case 3: return Math.random() * 100; // Bottom or left edge
} }
}, },
handlePromptSelection(prompt) { // ---------------------------------------- extract title
this.selectedPrompt = prompt; extractTitle(prompt) {
this.previewPrompt = prompt; // Initialize preview const titleMatch = prompt.match(/@<(.*?)>@/);
this.placeholders = this.extractPlaceholders(prompt); return titleMatch ? titleMatch[1] : null;
},
if (this.placeholders.length > 0) { getPromptContent(prompt) {
this.showPlaceholderModal = true; return prompt.replace(/@<.*?>@/, '').trim();
},
handlePromptSelection(prompt) {
this.selectedPrompt = prompt; // Keep the full prompt with title
this.previewPrompt = prompt;
const promptContent = this.getPromptContent(prompt);
console.log(`promptContent:${promptContent}`)
const placeholders = this.extractPlaceholders(promptContent);
if (placeholders.length > 0) {
this.placeholderValues = {}; this.placeholderValues = {};
this.showPlaceholderModal = true;
} else { } else {
this.setPromptInChatbox(prompt); this.setPromptInChatbox(prompt);
} }
}, },
updatePreview() { extractPlaceholders(prompt) {
let preview = this.selectedPrompt; const placeholderRegex = /\[(.*?)\]/g;
this.parsedPlaceholders.forEach((placeholder, index) => { return [...prompt.matchAll(placeholderRegex)].map(match => match[0]);
const value = this.placeholderValues[index]; },
// Replace all occurrences of the same placeholder
const regex = new RegExp(this.escapeRegExp(placeholder.fullText), 'g'); updatePreview() {
preview = preview.replace(regex, value || placeholder.fullText); let preview = this.selectedPrompt;
}); const promptContent = this.getPromptContent(preview);
this.previewPrompt = preview; console.log(`promptContent:${promptContent}`)
}, // Start with the prompt content
escapeRegExp(string) { let updatedContent = promptContent;
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}, // Update all placeholders
cancelPlaceholders() { this.parsedPlaceholders.forEach((placeholder, index) => {
this.showPlaceholderModal = false; const value = this.placeholderValues[index];
this.placeholders = []; if (value !== undefined && value !== '') {
this.placeholderValues = {}; const regex = new RegExp(this.escapeRegExp(placeholder.fullText), 'g');
this.previewPrompt = ''; updatedContent = updatedContent.replace(regex, value);
}
});
// If there's a title, preserve it
const title = this.extractTitle(this.selectedPrompt);
if (title) {
this.previewPrompt = `@<${title}>@${updatedContent}`;
} else {
this.previewPrompt = updatedContent;
}
}, },
// When applying placeholders, make sure to update all instances
applyPlaceholders() { applyPlaceholders() {
let finalPrompt = this.selectedPrompt; let finalPrompt = this.getPromptContent(this.selectedPrompt);
this.parsedPlaceholders.forEach((placeholder, index) => { this.parsedPlaceholders.forEach((placeholder, index) => {
const value = this.placeholderValues[index]; const value = this.placeholderValues[index];
if (value) { if (value) {
@ -1938,15 +1961,22 @@ export default {
finalPrompt = finalPrompt.replace(regex, value); finalPrompt = finalPrompt.replace(regex, value);
} }
}); });
// Apply the final prompt and close modal
this.finalPrompt = finalPrompt; // Preserve the title if it exists
const title = this.extractTitle(this.selectedPrompt);
if (title) {
finalPrompt = `@<${title}>@${finalPrompt}`;
}
tthis.setPromptInChatbox(this.previewPrompt);
this.showPlaceholderModal = false; this.showPlaceholderModal = false;
this.setPromptInChatbox(this.previewPrompt);
}, },
extractPlaceholders(prompt) { cancelPlaceholders() {
const placeholderRegex = /\[(.*?)\]/g; this.showPlaceholderModal = false;
return [...prompt.matchAll(placeholderRegex)].map(match => match[0]); this.placeholderValues = {};
this.selectedPrompt = '';
this.previewPrompt = '';
}, },
setPromptInChatbox(prompt) { setPromptInChatbox(prompt) {
@ -3857,11 +3887,14 @@ export default {
}, },
computed: { computed: {
// Get unique placeholders while preserving order placeholders() {
const promptContent = this.getPromptContent(this.selectedPrompt);
return this.extractPlaceholders(promptContent);
},
parsedPlaceholders() { parsedPlaceholders() {
const uniqueMap = new Map(); const uniqueMap = new Map();
this.placeholders.forEach(p => { this.placeholders.forEach(p => {
const parsed = parsePlaceholder(p); const parsed = this.parsePlaceholder(p);
uniqueMap.set(parsed.fullText, parsed); uniqueMap.set(parsed.fullText, parsed);
}); });
return Array.from(uniqueMap.values()); return Array.from(uniqueMap.values());