ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2025-01-31 00:23:52 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added skills viewer

Browse Source
This commit is contained in:
Saifeddine ALOUI 2024-03-17 00:55:35 +01:00
parent e77edde7d8
commit 20236ea863
8 changed files with 367 additions and 307 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lollms_core

@ -1 +1 @@
Subproject commit 4a70abd9b3087d5bcfc3f9ae41fb4e4aac13f1b0 Subproject commit fb03900ef6a04212c4b7ba58abff5b129026f764

484
web/dist/assets/index-0d7b4d08.js → web/dist/assets/index-23e002d5.js vendored
View File

File diff suppressed because one or more lines are too long

8
web/dist/assets/index-87cd6088.css vendored
View File

File diff suppressed because one or more lines are too long

8
web/dist/assets/index-b3fd63c8.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

4
web/dist/index.html vendored
View File

@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LoLLMS WebUI - Welcome</title> <title>LoLLMS WebUI - Welcome</title>
<script type="module" crossorigin src="/assets/index-0d7b4d08.js"></script> <script type="module" crossorigin src="/assets/index-23e002d5.js"></script>
<link rel="stylesheet" href="/assets/index-87cd6088.css"> <link rel="stylesheet" href="/assets/index-b3fd63c8.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

149
web/src/components/SkillsViewer.vue
View File

@ -1,71 +1,138 @@
<template> <template>
<div class="skills-viewer"> <div :class="{ 'hidden': !isVisible }" class="absolute top-20 left-20 bottom-20 right-20 bg-bg-light shadow-lg rounded">
<div class="categories"> <div id="leftPanel" class="flex flex-row flex-grow overflow-y-scroll no-scrollbar shadow-lg rounded">
<ul> <div class=" sticky z-10 top-0 bg-bg-light-tone dark:bg-bg-dark-tone shadow-md ">
<li v-for="category in categories" :key="category.id" @click="fetchTitles(category)"> <div class="search p-4">
{{ category.name }} <input type="text" v-model="searchQuery" placeholder="Search skills" class="border border-gray-300 rounded px-2 py-1 mr-2">
</li> <button @click="searchSkills" class="bg-blue-500 text-white rounded px-4 py-1">Search</button>
</ul>
</div> </div>
<div class="titles"> <div class="w-1/4 p-4 max-h-64">
<ul> <h2 class="text-xl font-bold m-4">Categories</h2>
<li v-for="title in titles" :key="title.id" @click="fetchContent(title)"> <TransitionGroup v-if="categories.length > 0" name="list">
{{ title.name }} <Discussion v-for="category in categories" :key="category" :id="category" :title="category"
</li> :selected="fetchTitles(category)" :loading="loading" :isCheckbox="isCheckbox"
</ul> :checkBoxValue="false"
@select="fetchTitles(category)"
@delete="deleteCategory(category)"
@editTitle="editCategory"
@makeTitle="makeCategory"
@checked="checkUncheckCategory" />
</TransitionGroup>
</div>
<div class="w-1/4 p-4">
<h2 class="text-xl font-bold m-4">Titles</h2>
<TransitionGroup v-if="categories.length > 0" name="list">
<Discussion v-for="title in titles" :key="title.id" :id="title.id" :title="title.title"
:selected="fetchTitles(title)" :loading="loading" :isCheckbox="isCheckbox"
:checkBoxValue="false"
@select="fetchContent(title.id)"
@delete="deleteSkill(title.id)"
@editTitle="editTitle"
@makeTitle="makeTitle"
@checked="checkUncheckTitle" />
</TransitionGroup>
</div> </div>
<div class="content"> </div>
<p>{{ content }}</p>
</div>
<div class="search">
<input type="text" v-model="searchQuery" placeholder="Search skills">
<button @click="searchSkills">Search</button>
</div>
<div class="w-full z-0 flex flex-col flex-grow overflow-y-auto scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary">
<h2 class="text-xl font-bold m-4">Content</h2>
<p class="m-4">{{ content }}</p>
</div>
</div> </div>
</template>
<button @click="closeComponent" class="absolute top-2 right-2 bg-red-500 text-white rounded px-2 py-1">Close</button>
</div>
</template>
<script> <script>
import axios from 'axios';
import Discussion from '../components/Discussion.vue'
export default { export default {
data() { data() {
return { return {
loading: false,
isCheckbox: false,
isVisible: false,
categories: [], categories: [],
selectedCategory: null,
titles: [], titles: [],
selectedTitle: null,
content: '', content: '',
searchQuery: '' searchQuery: ''
}; };
}, },
components:{
Discussion
},
methods: { methods: {
showSkillsLibrary() {
this.isVisible = true;
this.fetchCategories();
},
closeComponent() {
this.isVisible = false;
},
fetchCategories() { fetchCategories() {
axios.get('/api/categories') axios.post('/get_skills_library_categories', { client_id: this.$store.state.client_id })
.then(response => { .then(response => {
this.categories = response.data; this.categories = response.data.categories;
}) })
.catch(error => { .catch(error => {
console.error('Error fetching categories:', error); console.error('Error fetching categories:', error);
}); });
}
fetchTitles(category) {
// Make an API call to fetch the titles for the selected category
// Update the `titles` data property with the fetched data
}, },
fetchContent(title) { fetchTitles(category) {
// Make an API call to fetch the content for the selected title console.log("Fetching categories")
// Update the `content` data property with the fetched data axios.post('/get_skills_library_titles', { client_id: this.$store.state.client_id, category: category })
.then(response => {
this.titles = response.data.titles;
})
.catch(error => {
console.error('Error fetching titles:', error);
});
},
fetchContent(skillId) {
axios.post('/get_skills_library_content', { client_id: this.$store.state.client_id, skill_id: skillId })
.then(response => {
const skill = response.data.contents[0];
this.content = skill.content;
})
.catch(error => {
console.error('Error fetching content:', error);
});
},
deleteCategory(category) {
console.log("Delete category")
},
editCategory(category){
console.log("Edit category")
},
checkUncheckCategory(category){
console.log("Unchecked category")
},
deleteSkill(id){
console.log("Delete skill")
},
editTitle(id){
console.log("Edit title")
},
makeTitle(id){
console.log("Make title")
},
checkUncheckTitle(id){
}, },
searchSkills() { searchSkills() {
// Make an API call to search for skills based on the `searchQuery` // Implement the search functionality by making an API call with the searchQuery
// Update the `titles` and `content` data properties with the search results // Update the titles and content based on the search results
} }
},
created() {
this.fetchCategories();
} }
}; };
</script> </script>

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

@ -203,11 +203,8 @@
</div> </div>
<div class="relative flex flex-row flex-grow mb-10 z-0 w-full"> <div class="relative flex flex-row flex-grow mb-10 z-0 w-full">
<!-- DISCUSSION LIST --> <!-- DISCUSSION LIST -->
<div class="mx-4 flex flex-col flex-grow w-full " :class="isDragOverDiscussion ? 'pointer-events-none' : ''"> <div class="mx-4 flex flex-col flex-grow w-full " :class="isDragOverDiscussion ? 'pointer-events-none' : ''">
<div id="dis-list" :class="filterInProgress ? 'opacity-20 pointer-events-none' : ''" <div id="dis-list" :class="filterInProgress ? 'opacity-20 pointer-events-none' : ''"
class="flex flex-col flex-grow w-full"> class="flex flex-col flex-grow w-full">
<TransitionGroup v-if="list.length > 0" name="list"> <TransitionGroup v-if="list.length > 0" name="list">
@ -300,7 +297,7 @@
<p class="text-2xl animate-pulse mt-2 text-white">{{ loading_infos }} ...</p> <p class="text-2xl animate-pulse mt-2 text-white">{{ loading_infos }} ...</p>
</div> </div>
<InputBox prompt-text="Enter the url to the page to use as discussion support" @ok="handleOk" ref="web_url_input_box"></InputBox> <InputBox prompt-text="Enter the url to the page to use as discussion support" @ok="handleOk" ref="web_url_input_box"></InputBox>
<SkillsLibraryViewer ref="skills_lib"></SkillsLibraryViewer>
</template> </template>
@ -577,12 +574,7 @@ export default {
socket.emit('upgrade_vectorization'); socket.emit('upgrade_vectorization');
}, },
async showSkillsLib(){ async showSkillsLib(){
let result = await axios.post("/get_skills_lib", { this.$refs.skills_lib.showSkillsLibrary()
client_id: this.client_id
}, {headers: this.posts_headers});
if(result.status){
console.log("done")
}
}, },
async applyConfiguration() { async applyConfiguration() {
@ -2058,7 +2050,8 @@ export default {
WelcomeComponent, WelcomeComponent,
ChoiceDialog, ChoiceDialog,
ProgressBar, ProgressBar,
InputBox InputBox,
SkillsLibraryViewer
}, },
watch: { watch: {
progress_visibility_val(newVal) { progress_visibility_val(newVal) {
@ -2194,7 +2187,7 @@ import Discussion from '../components/Discussion.vue'
import ChoiceDialog from '@/components/ChoiceDialog.vue' import ChoiceDialog from '@/components/ChoiceDialog.vue'
import ProgressBar from "@/components/ProgressBar.vue"; import ProgressBar from "@/components/ProgressBar.vue";
import InputBox from "@/components/input_box.vue"; import InputBox from "@/components/input_box.vue";
import SkillsLibraryViewer from "@/components/SkillsViewer.vue"
import Message from '../components/Message.vue' import Message from '../components/Message.vue'
import ChatBox from '../components/ChatBox.vue' import ChatBox from '../components/ChatBox.vue'

2
zoos/bindings_zoo

@ -1 +1 @@
Subproject commit 6375917fdfa3750a5a93a9aaea6b926107a15cf8 Subproject commit 47762d34c39c6a792c00d0f83a5cb5c89bc360ac