V 7.5 alpha

This commit is contained in:
Saifeddine ALOUI 2023-11-26 19:54:09 +01:00
parent fd475203e1
commit 3e9de98034
12 changed files with 223 additions and 143 deletions

2
app.py
View File

@ -13,7 +13,7 @@ __github__ = "https://github.com/ParisNeo/lollms-webui"
__copyright__ = "Copyright 2023, "
__license__ = "Apache 2.0"
__version__ ="7.0 (Beta)"
__version__ ="7.5 (Alpha)"
main_repo = "https://github.com/ParisNeo/lollms-webui.git"
import os

@ -1 +1 @@
Subproject commit 9482c9af6afde2af17e709162eb7fe5155d72506
Subproject commit 5144aa71e678b8a31b62c2777310cbea220dd235

Binary file not shown.

Before

Width:  |  Height:  |  Size: 219 KiB

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

8
web/dist/assets/index-46ef814c.css vendored Normal 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">
<title>LoLLMS WebUI - Welcome</title>
<script type="module" crossorigin src="/assets/index-b6126ecf.js"></script>
<link rel="stylesheet" href="/assets/index-3e99714b.css">
<script type="module" crossorigin src="/assets/index-24cf1c8f.js"></script>
<link rel="stylesheet" href="/assets/index-46ef814c.css">
</head>
<body>
<div id="app"></div>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 219 KiB

After

Width:  |  Height:  |  Size: 459 KiB

View File

@ -25,6 +25,8 @@ export const store = createStore({
return {
// count: 0,
ready:false,
loading_infos: "",
loading_progress: 0,
version : "unknown",
settingsChanged:false,
isConnected: false, // Add the isConnected property
@ -33,7 +35,7 @@ export const store = createStore({
mountedPers:null,
mountedPersArr:[],
mountedExtensions:[],
bindingsArr:[],
bindingsZoo:[],
modelsArr:[],
selectedModel:null,
personalities:[],
@ -73,8 +75,8 @@ export const store = createStore({
setMountedExtensions(state, mountedExtensions) {
state.mountedExtensions = mountedExtensions;
},
setBindingsArr(state, bindingsArr) {
state.bindingsArr = bindingsArr;
setbindingsZoo(state, bindingsZoo) {
state.bindingsZoo = bindingsZoo;
},
setModelsArr(state, modelsArr) {
state.modelsArr = modelsArr;
@ -133,8 +135,8 @@ export const store = createStore({
getMountedPers(state) {
return state.mountedPers;
},
getbindingsArr(state) {
return state.bindingsArr;
getbindingsZoo(state) {
return state.bindingsZoo;
},
getModelsArr(state) {
return state.modelsArr;
@ -297,8 +299,8 @@ export const store = createStore({
// console.log(`Mounted personality: ${this.state.mountedPers}`)
},
async refreshBindings({ commit }) {
let bindingsArr = await api_get_req("list_bindings")
commit('setBindingsArr',bindingsArr)
let bindingsZoo = await api_get_req("list_bindings")
commit('setbindingsZoo',bindingsZoo)
},
async refreshModelsZoo({ commit }) {
console.log("Fetching models")
@ -310,6 +312,7 @@ export const store = createStore({
let modelsArr = await api_get_req("list_models");
console.log(`Found ${modelsArr}`)
let selectedModel = await api_get_req('get_active_model');
console.log("Selected model ", selectedModel);
if(selectedModel!=undefined){
commit('setselectedModel',selectedModel["model"])
}
@ -476,20 +479,40 @@ app.mixin({
if (!actionsExecuted) {
actionsExecuted = true;
console.log("Calling")
this.$store.state.loading_infos = "Loading Configuration"
this.$store.state.loading_progress = 10
await this.$store.dispatch('refreshConfig');
console.log("Config ready")
this.$store.state.loading_infos = "Loading Database"
this.$store.state.loading_progress = 20
await this.$store.dispatch('refreshDatabase');
this.$store.state.loading_infos = "Getting version"
this.$store.state.loading_progress = 30
await this.$store.dispatch('getVersion');
this.$store.state.loading_infos = "Getting Bindings list"
this.$store.state.loading_progress = 40
await this.$store.dispatch('refreshBindings');
await refreshHardwareUsage(this.$store);
this.$store.state.loading_infos = "Getting extensions zoo"
this.$store.state.loading_progress = 50
await this.$store.dispatch('refreshExtensionsZoo');
this.$store.state.loading_infos = "Getting mounted extensions"
this.$store.state.loading_progress = 60
await this.$store.dispatch('refreshmountedExtensions');
this.$store.state.loading_infos = "Getting personalities zoo"
this.$store.state.loading_progress = 70
await this.$store.dispatch('refreshPersonalitiesZoo')
this.$store.state.loading_infos = "Getting mounted personalities"
this.$store.state.loading_progress = 80
await this.$store.dispatch('refreshMountedPersonalities');
this.$store.state.loading_infos = "Getting models zoo"
this.$store.state.loading_progress = 90
await this.$store.dispatch('refreshModelsZoo');
this.$store.state.loading_infos = "Getting active models"
this.$store.state.loading_progress = 100
await this.$store.dispatch('refreshModels');
this.$store.state.ready = true;

View File

@ -10,18 +10,18 @@
<img class="w-24 animate-bounce" title="LoLLMS WebUI" src="@/assets/logo.png" alt="Logo">
<div class="flex flex-col items-start">
<p class="text-2xl ">Lord of Large Language Models v {{ store.state.version }} </p>
<p class="text-2xl ">Lord of Large Language Models v {{ version_info }} </p>
<p class="text-gray-400 text-base">One tool to rule them all</p>
<p class="text-gray-400 text-base">by ParisNeo</p>
</div>
</div>
<hr
class=" mt-1 w-96 h-1 mx-auto my-2 md:my-2 dark:bg-bg-dark-tone-panel bg-bg-light-tone-panel border-0 rounded ">
<p class="text-2xl">Welcome</p>
<div role="status" class="text-center w-full display: flex; flex-row align-items: center;">
<p class="text-2xl animate-pulse">Loading ...</p>
</div>
<hr class=" mt-1 w-96 h-1 mx-auto my-2 md:my-2 dark:bg-bg-dark-tone-panel bg-bg-light-tone-panel border-0 rounded ">
<p class="text-2xl mb-10">Welcome</p>
<div role="status" class="text-center w-full display: flex; flex-row align-items: center;">
<ProgressBar ref="loading_progress" :progress="loading_progress"></ProgressBar>
<p class="text-2xl animate-pulse mt-2"> {{ loading_infos }} ...</p>
</div>
</div>
@ -275,8 +275,7 @@
</div>
</div>
<Toast ref="toast">
</Toast>
<Toast ref="toast" />
<MessageBox ref="messageBox" />
<ChoiceDialog reference="database_selector" class="z-20"
:show="database_selectorDialogVisible"
@ -1858,23 +1857,23 @@ export default {
this.isCreated = true
},
async mounted() {
let serverAddress = "http://localhost:9600/";
try {
const response = await fetch('/get_server_address'); // Replace with the actual endpoint on your Flask server
let serverAddress = await response.text();
serverAddress = await response.text();
if(serverAddress.includes('<')){
console.log(`Server address not found`)
serverAddress = "http://localhost:9600/"//process.env.VITE_LOLLMS_API
}
console.log(`Server address: ${serverAddress}`)
this.host = `${serverAddress}`; // Construct the full server address dynamically
} catch (error) {
console.error('Error fetching server address:', error);
// Handle error if necessary
this.host = "http://localhost:9600/"//process.env.VITE_LOLLMS_API
}
serverAddress = "http://localhost:9600/"
}
this.host = `${serverAddress}`; // Construct the full server address dynamically
axios.defaults.baseURL = serverAddress
//console.log('chatbox mnt',this.$refs)
this.$nextTick(() => {
feather.replace();
@ -1905,7 +1904,9 @@ export default {
ChatBox,
WelcomeComponent,
Toast,
ChoiceDialog
ChoiceDialog,
MessageBox,
ProgressBar
},
watch: {
filterTitle(newVal) {
@ -1941,6 +1942,26 @@ export default {
},
computed: {
version_info:{
get(){
if(this.$store.state.version!=undefined){
return "v" + this.$store.state.version;
}
else{
return "";
}
}
},
loading_infos:{
get(){
return this.$store.state.loading_infos;
}
},
loading_progress:{
get(){
return this.$store.state.loading_progress;
}
},
isGenerating:{
get(){
return this.$store.state.isGenerating;
@ -2004,6 +2025,7 @@ import ChatBox from '../components/ChatBox.vue'
import WelcomeComponent from '../components/WelcomeComponent.vue'
import Toast from '../components/Toast.vue'
import MessageBox from "@/components/MessageBox.vue";
import ProgressBar from "@/components/ProgressBar.vue";
import feather from 'feather-icons'
import axios from 'axios'

View File

@ -797,14 +797,14 @@
</div>
<div :class="{ 'hidden': bzc_collapsed }" class="flex flex-col mb-2 px-3 pb-0">
<div v-if="bindingsArr&&bindingsArr.length > 0" class="mb-2">
<div v-if="bindingsZoo&&bindingsZoo.length > 0" class="mb-2">
<label for="binding" class="block ml-2 mb-2 text-sm font-medium text-gray-900 dark:text-white">
Bindings: ({{ bindingsArr.length }})
Bindings: ({{ bindingsZoo.length }})
</label>
<div class="overflow-y-auto no-scrollbar p-2 pb-0 grid lg:grid-cols-3 md:grid-cols-2 gap-4"
:class="bzl_collapsed ? '' : 'max-h-96'">
<TransitionGroup name="list">
<BindingEntry ref="bindingZoo" v-for="(binding, index) in bindingsArr"
<BindingEntry ref="bindingZoo" v-for="(binding, index) in bindingsZoo"
:key="'index-' + index + '-' + binding.folder" :binding="binding"
:on-selected="onSelectedBinding" :on-reinstall="onReinstallBinding"
:on-unInstall="onUnInstallBinding"
@ -845,7 +845,6 @@
Models zoo</h3>
<!-- SPINNER -->
<div class="flex flex-row items-center">
<div v-if="!configFile.binding_name"
class="text-base text-red-600 flex gap-3 items-center mr-2">
<i data-feather="alert-triangle" class="flex-shrink-0"></i>
@ -1807,7 +1806,7 @@ export default {
data() {
return {
imgModel: defaultModelImgPlaceholder,
binding_changed:false,
SVGGPU:SVGGPU,
models_zoo:[],
// Sort options
@ -1895,11 +1894,12 @@ export default {
methods: {
async modelsZooToggleCollapse(){
this.mzc_collapsed = !this.mzc_collapsed
if (!this.mzc_collapsed && (this.modelsZoo==undefined || this.modelsZoo.length==0)){
if (this.binding_changed && !this.mzc_collapsed && (this.modelsZoo==undefined || this.modelsZoo.length==0)){
console.log("Refreshing models")
await this.$store.dispatch('refreshConfig');
this.models_zoo = []
this.refreshModelsZoo();
this.binding_changed = false;
}
},
async selectSortOption(index){
@ -2106,10 +2106,13 @@ export default {
this.extension_category = this.configFile.extension_category
this.extensionsFiltererd = this.$store.state.extensionsZoo.filter((item) => item.category === this.configFile.extension_category )
this.updateModelsZoo();
this.isLoading = false
this.isMounted = true
this.extension_category = this.configFile.extension_category
console.log("READY Stuff")
},
async open_mzl(){
@ -2601,6 +2604,7 @@ export default {
this.mzc_collapsed=true;
if (this.configFile.binding_name != binding_object.binding.folder) {
this.update_binding(binding_object.binding.folder)
this.binding_changed = true;
}
},
onInstallBinding(binding_object) {
@ -2902,6 +2906,7 @@ export default {
await this.$store.dispatch('refreshModels');
console.log("Models refreshed")
this.updateModelsZoo()
this.models_zoo = this.$store.state.modelsZoo;
console.log("Models updated")
this.is_loading_zoo = false;
},
@ -2946,9 +2951,6 @@ export default {
else{
console.log("No sorting needed");
}
models_zoo.forEach(model => {
if (model.name == this.$store.state.config["model_name"]) {
model.selected = true;
@ -2956,46 +2958,46 @@ export default {
else{
model.selected = false;
}
});
this.models_zoo = models_zoo
});
console.log("Selected models")
// Returns array of model filenames which are = to name of models zoo entry
for (let i = 0; i < this.$store.state.modelsArr.length; i++) {
const customModel = this.$store.state.modelsArr[i]
let index = this.models_zoo.findIndex(x => x.name == customModel)
let index = models_zoo.findIndex(x => x.name == customModel)
if(index==-1){
// The customModel is not directly in the model zoo, so check its variants
for (let j = 0; j < this.models_zoo.length; j++) {
let v = this.models_zoo[j]["variants"]
if(v!=undefined){
index = v.findIndex(x => x.name == customModel);
if(index!=-1){
index=j
console.log(`Found ${customModel} at index ${index}`)
break;
}
}
else{
// The customModel is not directly in the model zoo, so check its variants
for (let j = 0; j < models_zoo.length; j++) {
let v = models_zoo[j]["variants"]
if(v!=undefined){
index = v.findIndex(x => x.name == customModel);
if(index!=-1){
index=j
console.log(`Found ${customModel} at index ${index}`)
break;
}
}
else{
}
}
}
}
if (index == -1) {
let newModelEntry = {}
newModelEntry.name = customModel
newModelEntry.icon = ""
newModelEntry.icon = this.imgBinding
newModelEntry.isCustomModel = true
newModelEntry.isInstalled = true
this.models_zoo.push(newModelEntry)
models_zoo.push(newModelEntry)
}
else{
this.models_zoo[index].isInstalled=true;
models_zoo[index].isInstalled=true;
}
}
this.models_zoo.sort((a, b) => {
console.log("Determined models")
models_zoo.sort((a, b) => {
if (a.isInstalled && !b.isInstalled) {
return -1; // a is installed, b is not installed, so a comes first
} else if (!a.isInstalled && b.isInstalled) {
@ -3003,8 +3005,10 @@ export default {
} else {
return 0; // both models are either installed or not installed, maintain their original order
}
});
});
console.log("Done")
},
update_binding(value) {
// eslint-disable-next-line no-unused-vars
this.isLoading = true
@ -3017,8 +3021,8 @@ export default {
await this.$store.dispatch('refreshConfig');
this.models_zoo = []
this.mzc_collapsed = true;
const index = this.bindingsArr.findIndex(item => item.folder == value)
const item = this.bindingsArr[index]
const index = this.bindingsZoo.findIndex(item => item.folder == value)
const item = this.bindingsZoo[index]
if (item) {
item.installed = true
}
@ -3400,6 +3404,10 @@ export default {
async mountPersonality(pers) {
this.isLoading = true
console.log('mount pers', pers)
this.$refs.messageBox.showMessage(pers.personality.disclaimer)
if (!pers) { return }
if (this.configFile.personalities.includes(pers.personality.full_path)) {
@ -3638,6 +3646,42 @@ export default {
//this.load_everything()
},
computed: {
imgBinding: {
get(){
if (!this.isMounted) {
return defaultImgPlaceholder
}
try {
return this.$refs.bindingZoo[this.$refs.bindingZoo.findIndex(item => item.binding.folder == this.configFile.binding_name)].$refs.imgElement.src
}
catch (error) {
return defaultImgPlaceholder
}
}
},
imgModel:{
get() {
try{
idx = this.$store.state.modelsZoo.findIndex(item => item.name == this.$store.state.selectedModel)
if(idx>=0){
return this.$store.state.modelsZoo[idx].avatar
}
}
catch{
}
if (!this.isMounted) {
return defaultImgPlaceholder
}
try {
return this.$refs.bindingZoo[this.$refs.bindingZoo.findIndex(item => item.binding.folder == this.configFile.binding_name)].$refs.imgElement.src
}
catch (error) {
return defaultImgPlaceholder
}
},
},
isReady:{
get() {
@ -3829,12 +3873,12 @@ export default {
this.$store.commit('setActiveExtensions', value);
}
},
bindingsArr: {
bindingsZoo: {
get() {
return this.$store.state.bindingsArr;
return this.$store.state.bindingsZoo;
},
set(value) {
this.$store.commit('setBindingsArr', value);
this.$store.commit('setbindingsZoo', value);
}
},
modelsArr: {
@ -3927,17 +3971,6 @@ export default {
// vram_total_space() {
// return this.computedFileSize(this.vramUsage.gpu_0_total_vram)
// },
imgBinding() {
if (!this.isMounted) {
return
}
try {
return this.$refs.bindingZoo[this.$refs.bindingZoo.findIndex(item => item.binding.folder == this.configFile.binding_name)].$refs.imgElement.src
}
catch (error) {
return defaultImgPlaceholder
}
},
model_name() {
if (!this.isMounted) {
return
@ -3948,9 +3981,9 @@ export default {
if (!this.isMounted) {
return
}
const index = this.bindingsArr.findIndex(item => item.folder === this.configFile.binding_name)
const index = this.bindingsZoo.findIndex(item => item.folder === this.configFile.binding_name)
if (index > -1) {
return this.bindingsArr[index].name
return this.bindingsZoo[index].name
} else {
return

View File

@ -6,6 +6,7 @@ import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default async ({ mode }) => {
/*
async function getFlaskServerURL() {
try {
console.log("Loading")
@ -32,6 +33,7 @@ export default async ({ mode }) => {
serverURL = process.env.VITE_LOLLMS_API
console.log(`Server address: ${serverAddress}`)
}
*/
// Load app-level env vars to node-level env vars.
process.env = {...process.env, ...loadEnv(mode, process.cwd())};
@ -48,7 +50,7 @@ export default async ({ mode }) => {
server: {
proxy: {
"/api/": {
target: serverURL,//process.env.VITE_LOLLMS_API,//process.env.VITE_LOLLMS_API,//getFlaskServerURL(),// process.env.VITE_LOLLMS_API,
target: process.env.VITE_LOLLMS_API,//serverURL,
changeOrigin: process.env.VITE_LOLLMS_API_CHANGE_ORIGIN,
secure: process.env.VITE_LOLLMS_API_SECURE,
rewrite: (path) => path.replace(/^\/api/, ""),