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

Working socketio for new app

Browse Source
This commit is contained in:
Saifeddine ALOUI 2024-01-06 21:47:21 +01:00
parent f886db99b4
commit 2de29b23cf
15 changed files with 332 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app.py
View File

@ -161,7 +161,7 @@ try:
CORS(app) CORS(app)
from flask_compress import Compress from flask_compress import Compress
# async_mode='gevent', ping_timeout=1200, ping_interval=120, # async_mode='gevent', ping_timeout=1200, ping_interval=120,
socketio = SocketIO(app, cors_allowed_origins="*", async_mode='gevent', ping_timeout=1200, ping_interval=120) socketio = SocketIO(app, cors_allowed_origins="*", async_mode='gevent', ping_timeout=1200, ping_interval=120, path='/socket.io')
#socketio = SocketIO(app, cors_allowed_origins="*", async_mode='threading',engineio_options={'websocket_compression': True, 'websocket_ping_interval': 20, 'websocket_ping_timeout': 120, 'websocket_max_queue': 100}) #socketio = SocketIO(app, cors_allowed_origins="*", async_mode='threading',engineio_options={'websocket_compression': True, 'websocket_ping_interval': 20, 'websocket_ping_timeout': 120, 'websocket_max_queue': 100})
compress = Compress(app) compress = Compress(app)
app.config['SECRET_KEY'] = 'secret!' app.config['SECRET_KEY'] = 'secret!'

2
lollms_core

@ -1 +1 @@
Subproject commit e42ec2c799310d9a1b7450491484e7485b0fb809 Subproject commit 9d8db7a0da156287f325adf0971cf0f5bce07b5e

10
new_app.py
View File

@ -18,25 +18,25 @@ from ascii_colors import ASCIIColors
import socketio import socketio
import uvicorn import uvicorn
import argparse import argparse
from socketio import ASGIApp
app = FastAPI() app = FastAPI()
# Create a Socket.IO server # Create a Socket.IO server
sio = socketio.AsyncServer(async_mode="asgi", cors_allowed_origins="*") # Enable CORS for all origins sio = socketio.AsyncServer(async_mode="asgi", cors_allowed_origins="*") # Enable CORS for all origins
app.mount("/socket.io", socketio.ASGIApp(sio))
# Define a WebSocket event handler # Define a WebSocket event handler
@sio.event @sio.event
async def connect(sid, environ): async def connect(sid, environ):
print(f"Connected: {sid}") ASCIIColors.yellow(f"Connected: {sid}")
@sio.event @sio.event
async def disconnect(sid): async def disconnect(sid):
print(f"Disconnected: {sid}") ASCIIColors.yellow(f"Disconnected: {sid}")
@sio.event @sio.event
async def message(sid, data): async def message(sid, data):
print(f"Message from {sid}: {data}") ASCIIColors.yellow(f"Message from {sid}: {data}")
await sio.send(sid, "Message received!") await sio.send(sid, "Message received!")
@ -84,5 +84,7 @@ if __name__ == "__main__":
app.mount("/", StaticFiles(directory=Path(__file__).parent/"web"/"dist", html=True), name="static") app.mount("/", StaticFiles(directory=Path(__file__).parent/"web"/"dist", html=True), name="static")
app = ASGIApp(socketio_server=sio, other_asgi_app=app)
uvicorn.run(app, host=config.host, port=6523)#config.port) uvicorn.run(app, host=config.host, port=6523)#config.port)

1
scripts/python/lollms_installer/frontend/dist/assets/index-4PiIduat.css vendored
View File

File diff suppressed because one or more lines are too long

18
scripts/python/lollms_installer/frontend/dist/assets/index-BiFwvWxo.js vendored
View File

File diff suppressed because one or more lines are too long

4
scripts/python/lollms_installer/frontend/dist/index.html vendored
View File

@ -5,8 +5,8 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title> <title>Vite + Vue</title>
<script type="module" crossorigin src="/assets/index-BiFwvWxo.js"></script> <script type="module" crossorigin src="/assets/index-26HIjSQ3.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-4PiIduat.css"> <link rel="stylesheet" crossorigin href="/assets/index-uMQcfNrh.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

101
scripts/python/lollms_installer/frontend/package-lock.json generated
View File

@ -13,6 +13,7 @@
"feather-icons": "^4.29.1", "feather-icons": "^4.29.1",
"flowbite": "^2.2.1", "flowbite": "^2.2.1",
"postcss": "^8.4.32", "postcss": "^8.4.32",
"socket.io-client": "^4.7.3",
"tailwind-scrollbar": "^3.0.5", "tailwind-scrollbar": "^3.0.5",
"tailwindcss": "^3.4.0", "tailwindcss": "^3.4.0",
"vue": "^3.3.11", "vue": "^3.3.11",
@ -692,6 +693,11 @@
"win32" "win32"
] ]
}, },
"node_modules/@socket.io/component-emitter": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz",
"integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg=="
},
"node_modules/@vitejs/plugin-vue": { "node_modules/@vitejs/plugin-vue": {
"version": "4.6.2", "version": "4.6.2",
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.6.2.tgz", "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.6.2.tgz",
@ -1101,6 +1107,22 @@
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
}, },
"node_modules/debug": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
"dependencies": {
"ms": "2.1.2"
},
"engines": {
"node": ">=6.0"
},
"peerDependenciesMeta": {
"supports-color": {
"optional": true
}
}
},
"node_modules/delayed-stream": { "node_modules/delayed-stream": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@ -1134,6 +1156,26 @@
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
"integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==" "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
}, },
"node_modules/engine.io-client": {
"version": "6.5.3",
"resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.5.3.tgz",
"integrity": "sha512-9Z0qLB0NIisTRt1DZ/8U2k12RJn8yls/nXMZLn+/N8hANT3TcYjKFKcwbw5zFQiN4NTde3TSY9zb79e1ij6j9Q==",
"dependencies": {
"@socket.io/component-emitter": "~3.1.0",
"debug": "~4.3.1",
"engine.io-parser": "~5.2.1",
"ws": "~8.11.0",
"xmlhttprequest-ssl": "~2.0.0"
}
},
"node_modules/engine.io-parser": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.1.tgz",
"integrity": "sha512-9JktcM3u18nU9N2Lz3bWeBgxVgOKpw7yhRaoxQA3FUDZzzw+9WlA6p4G4u0RixNkg14fH7EfEc/RhpurtiROTQ==",
"engines": {
"node": ">=10.0.0"
}
},
"node_modules/entities": { "node_modules/entities": {
"version": "4.5.0", "version": "4.5.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@ -1570,6 +1612,11 @@
"node": ">=16 || 14 >=14.17" "node": ">=16 || 14 >=14.17"
} }
}, },
"node_modules/ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
},
"node_modules/mz": { "node_modules/mz": {
"version": "2.7.0", "version": "2.7.0",
"resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
@ -1981,6 +2028,32 @@
"url": "https://github.com/sponsors/isaacs" "url": "https://github.com/sponsors/isaacs"
} }
}, },
"node_modules/socket.io-client": {
"version": "4.7.3",
"resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.7.3.tgz",
"integrity": "sha512-nU+ywttCyBitXIl9Xe0RSEfek4LneYkJxCeNnKCuhwoH4jGXO1ipIUw/VA/+Vvv2G1MTym11fzFC0SxkrcfXDw==",
"dependencies": {
"@socket.io/component-emitter": "~3.1.0",
"debug": "~4.3.2",
"engine.io-client": "~6.5.2",
"socket.io-parser": "~4.2.4"
},
"engines": {
"node": ">=10.0.0"
}
},
"node_modules/socket.io-parser": {
"version": "4.2.4",
"resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
"integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
"dependencies": {
"@socket.io/component-emitter": "~3.1.0",
"debug": "~4.3.1"
},
"engines": {
"node": ">=10.0.0"
}
},
"node_modules/source-map-js": { "node_modules/source-map-js": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@ -2423,6 +2496,34 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/ws": {
"version": "8.11.0",
"resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz",
"integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
"engines": {
"node": ">=10.0.0"
},
"peerDependencies": {
"bufferutil": "^4.0.1",
"utf-8-validate": "^5.0.2"
},
"peerDependenciesMeta": {
"bufferutil": {
"optional": true
},
"utf-8-validate": {
"optional": true
}
}
},
"node_modules/xmlhttprequest-ssl": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
"integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==",
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/yaml": { "node_modules/yaml": {
"version": "2.3.4", "version": "2.3.4",
"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz", "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz",

1
scripts/python/lollms_installer/frontend/package.json
View File

@ -14,6 +14,7 @@
"feather-icons": "^4.29.1", "feather-icons": "^4.29.1",
"flowbite": "^2.2.1", "flowbite": "^2.2.1",
"postcss": "^8.4.32", "postcss": "^8.4.32",
"socket.io-client": "^4.7.3",
"tailwind-scrollbar": "^3.0.5", "tailwind-scrollbar": "^3.0.5",
"tailwindcss": "^3.4.0", "tailwindcss": "^3.4.0",
"vue": "^3.3.11", "vue": "^3.3.11",

64
scripts/python/lollms_installer/frontend/src/views/Install.vue
View File

@ -1,12 +1,16 @@
<template> <template>
<div class="flex flex-col items-center justify-center rounded-lg m-2 shadow-lg hover:border-primary dark:hover:border-primary hover:border-solid hover:border-2 border-2 border-transparent even:bg-bg-light-discussion-odd dark:even:bg-bg-dark-discussion-odd flex flex-col flex-grow flex-wrap overflow-visible p-4 pb-2"> <div class="flex flex-col items-center justify-center rounded-lg m-2 shadow-lg hover:border-primary dark:hover:border-primary hover:border-solid hover:border-2 border-2 border-transparent even:bg-bg-light-discussion-odd dark:even:bg-bg-dark-discussion-odd flex flex-col flex-grow flex-wrap overflow-visible p-4 pb-2">
<img :src = "LoLLMSLogo"> <img :src = "LoLLMSLogo" width="200px" height="200px">
<h1 class="text-4xl font-bold mb-4">LOLLMS installation tool</h1> <h1 class="text-4xl font-bold mb-4">LOLLMS installation tool</h1>
<p class="text-left"> <p class="text-left">
Welcome to the installer of lollms. Here you can select your install profile.<br> Welcome to the installer of lollms. Here you can select your install profile.<br>
Let's start by selecting the hardware.<br><br> Let's start by selecting the hardware.<br><br>
</p> </p>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2 container h-500 overflow-y-scroll">
<div>
<label>Personal path: </label>
<input type="text" v-bind="personal_path">
</div>
<label class="flex items-center"> <label class="flex items-center">
<input type="radio" value="cpu-noavx" v-model="selectedOption" class="mr-2"> <input type="radio" value="cpu-noavx" v-model="selectedOption" class="mr-2">
Use CPU without AVX (for old CPUs) Use CPU without AVX (for old CPUs)
@ -39,6 +43,7 @@
<input type="radio" value="apple-silicon" v-model="selectedOption" class="mr-2"> <input type="radio" value="apple-silicon" v-model="selectedOption" class="mr-2">
Apple silicon (M1, M2 M3) Apple silicon (M1, M2 M3)
</label> </label>
</div> </div>
<button @click="install" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 mt-4 rounded"> <button @click="install" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 mt-4 rounded">
Install Install
@ -53,22 +58,73 @@ import MessageBox from '../components/MessageBox.vue';
import Toast from '../components/Toast.vue'; import Toast from '../components/Toast.vue';
import axios from 'axios'; import axios from 'axios';
import LoLLMSLogo from '../assets/logo.png' import LoLLMSLogo from '../assets/logo.png'
import socket from '../services/websocket'
export default { export default {
data() { data() {
return { return {
LoLLMSLogo:LoLLMSLogo, LoLLMSLogo:LoLLMSLogo,
selectedOption: "cpu", selectedOption: "cpu",
personal_path: '',
}; };
}, },
async mounted(){
this.personal_path = await axios.get("/get_personal_path")
socket.on('notification', this.notify)
},
components:{ components:{
MessageBox, MessageBox,
Toast Toast
}, },
methods: { methods: {
folderSelected(event) {
const files = event.target.files;
for (let i = 0; i < files.length; i++) {
console.log(files[i].webkitRelativePath);
}
personal_path = files[0].webkitRelativePath
},
notify(notif){
self.isGenerating = false
this.setDiscussionLoading(this.currentDiscussion.id, this.isGenerating);
nextTick(() => {
const msgList = document.getElementById('messages-list')
this.scrollBottom(msgList)
})
if(notif.display_type==0){
this.$store.state.toast.showToast(notif.content, notif.duration, notif.notification_type)
}
else if(notif.display_type==1){
this.$store.state.messageBox.showMessage(notif.content)
}
else if(notif.display_type==2){
this.$store.state.messageBox.hideMessage()
this.$store.state.yesNoDialog.askQuestion(notif.content, 'Yes', 'No').then(yesRes => {
socket.emit("yesNoRes",{yesRes:yesRes})
})
}
else if(notif.display_type==3){
this.$store.state.messageBox.showBlockingMessage(notif.content)
}
else if(notif.display_type==4){
this.$store.state.messageBox.hideMessage()
}
this.chime.play()
},
install() { install() {
this.$ref.toast.showToast(`Starting the install with option:${this.selectedOption}`, 4, true) this.$refs.toast.showToast(`Starting the install with option:${this.selectedOption}`, 4, true)
axios.post("/start_installing",{mode:this.selectedOption}).then(()=>{ axios.post("/start_installing",{mode:this.selectedOption}).then(()=>{
this.$ref.messageBox.showMessage("Success!\nPlease close this page and open the run script from your install folder") this.$refs.messageBox.showMessage("Success!\nPlease close this page and open the run script from your install folder")
});
},
selectFolder() {
axios.get('/choose_path')
.then(response => {
this.personal_path = response.data.new_path;
})
.catch(error => {
console.error(error);
}); });
}, },
}, },

29
scripts/python/lollms_installer/main.py
View File

@ -15,31 +15,24 @@ from lollms.types import MSG_TYPE, SENDER_TYPES
from lollms.app import LollmsApplication from lollms.app import LollmsApplication
from pathlib import Path from pathlib import Path
from ascii_colors import ASCIIColors from ascii_colors import ASCIIColors
import subprocess
from pathlib import Path from pathlib import Path
from starlette.responses import FileResponse
from starlette.requests import Request
import webbrowser import webbrowser
import socketio import socketio
from fastapi import FastAPI
from socketio import ASGIApp
root_path = Path(__file__).parent.parent.parent.parent root_path = Path(__file__).parent.parent.parent.parent
global_path = root_path/"global_paths_cfg.yaml" global_path = root_path/"global_paths_cfg.yaml"
if global_path.exists(): if global_path.exists():
ASCIIColors.yellow(f"global_path: {global_path}") ASCIIColors.yellow(f"global_path: {global_path}")
lollms_paths = LollmsPaths(global_path) lollms_paths = LollmsPaths(global_path, prepare_configuration=False)
config = LOLLMSConfig.autoload(lollms_paths,lollms_paths.personal_configuration_path/"local_config.yaml") config = LOLLMSConfig.autoload(lollms_paths,lollms_paths.personal_configuration_path/"local_config.yaml")
else: else:
ASCIIColors.yellow(f"global_path: {global_path}") ASCIIColors.yellow(f"global_path: {global_path}")
lollms_paths = LollmsPaths(global_path) lollms_paths = LollmsPaths(global_path, prepare_configuration=False)
config = LOLLMSConfig.autoload(lollms_paths,lollms_paths.personal_configuration_path/"local_config.yaml") config = LOLLMSConfig.autoload(lollms_paths,lollms_paths.personal_configuration_path/"local_config.yaml")
shared_folder = lollms_paths.personal_path/"shared"
sd_folder = shared_folder / "auto_sd"
output_dir = lollms_paths.personal_path / "outputs/sd"
output_dir.mkdir(parents=True, exist_ok=True)
script_path = sd_folder / "lollms_sd.bat"
output_folder = lollms_paths.personal_outputs_path/"audio_out"
ASCIIColors.red(" ") ASCIIColors.red(" ")
ASCIIColors.red(" __ _____ __ __ _____ _____ ") ASCIIColors.red(" __ _____ __ __ _____ _____ ")
@ -52,7 +45,6 @@ ASCIIColors.yellow(f"Root dir : {root_path}")
sio = socketio.AsyncServer(async_mode='asgi') sio = socketio.AsyncServer(async_mode='asgi')
app = FastAPI(debug=True) app = FastAPI(debug=True)
app.mount("/socket.io", socketio.ASGIApp(sio))
lollms_app = LollmsApplication( lollms_app = LollmsApplication(
"lollms_installer", "lollms_installer",
@ -62,13 +54,17 @@ lollms_app = LollmsApplication(
load_model=False, load_model=False,
load_voice_service=False, load_voice_service=False,
load_sd_service=False, load_sd_service=False,
socketio=sio) socketio=sio,
free_mode=True)
app.mount("/", StaticFiles(directory=Path(__file__).parent/"frontend"/"dist", html=True), name="static")
class InstallProperties(BaseModel): class InstallProperties(BaseModel):
mode: str mode: str
@app.get("/get_personal_path")
def get_personal_path():
return lollms_paths.personal_path
@app.post("/start_installing") @app.post("/start_installing")
def start_installing(data: InstallProperties): def start_installing(data: InstallProperties):
""" """
@ -140,6 +136,9 @@ def start_installing(data: InstallProperties):
# Your code here # Your code here
return {"message": "Item created successfully"} return {"message": "Item created successfully"}
app.mount("/", StaticFiles(directory=Path(__file__).parent/"frontend"/"dist", html=True), name="static")
app = ASGIApp(socketio_server=sio, other_asgi_app=app)
if __name__ == "__main__": if __name__ == "__main__":
webbrowser.open(f"http://localhost:8000") webbrowser.open(f"http://localhost:8000")
uvicorn.run(app, host="localhost", port=8000) uvicorn.run(app, host="localhost", port=8000)

2
web/dist/assets/index-09f080f2.css → web/dist/assets/index-0b72f569.css vendored
View File

File diff suppressed because one or more lines are too long

68
web/dist/assets/index-5b1b5412.js → web/dist/assets/index-be733980.js vendored
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-5b1b5412.js"></script> <script type="module" crossorigin src="/assets/index-be733980.js"></script>
<link rel="stylesheet" href="/assets/index-09f080f2.css"> <link rel="stylesheet" href="/assets/index-0b72f569.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

3
web/src/services/websocket.js
View File

@ -7,7 +7,8 @@
import io from 'socket.io-client'; import io from 'socket.io-client';
// fixes issues when people not hosting this site on local network // fixes issues when people not hosting this site on local network
const URL = process.env.NODE_ENV === "production" ? undefined : (import.meta.env.VITE_LOLLMS_API); const URL = process.env.NODE_ENV === "production" ? "/" : (import.meta.env.VITE_LOLLMS_API)+"/";
console.log(URL)
const socket = new io(URL,{ const socket = new io(URL,{
reconnection: true, // Enable reconnection reconnection: true, // Enable reconnection
reconnectionAttempts: 10, // Maximum reconnection attempts reconnectionAttempts: 10, // Maximum reconnection attempts

74
web/src/views/NodesView.vue Normal file
View File

@ -0,0 +1,74 @@
<template>
<div style="width: 100vw; height: 100vh">
<baklava-editor :view-model="baklava" />
<button @click="saveGraph">Save Graph</button>
<button @click="loadGraph">Load Graph</button>
</div>
</template>
<script>
import { defineComponent } from "vue";
import {
EditorComponent,
useBaklava,
DependencyEngine,
applyResult
} from "baklavajs";
//import "../css/classic.css";
import "@baklavajs/themes/dist/syrup-dark.css";
import { AgentNode } from "../nodes/Agent";
import { RAGNode } from "../nodes/Rag";
import { TaskNode } from "../nodes/Task";
export default defineComponent({
components: {
"baklava-editor": EditorComponent
},
setup() {
const baklava = useBaklava();
const engine = new DependencyEngine(baklava.editor);
baklava.editor.registerNodeType(AgentNode);
baklava.editor.registerNodeType(TaskNode);
baklava.editor.registerNodeType(RAGNode);
const token = Symbol();
engine.events.afterRun.subscribe(token, (result) => {
engine.pause();
applyResult(result, baklava.editor);
engine.resume();
});
engine.start();
function addNodeWithCoordinates(nodeType, x, y) {
const n = new nodeType();
baklava.displayedGraph.addNode(n);
n.position.x = x;
n.position.y = y;
return n;
}
const node1 = addNodeWithCoordinates(TaskNode, 300, 140);
const node2 = addNodeWithCoordinates(AgentNode, 550, 140);
baklava.displayedGraph.addConnection(
node1.outputs.result,
node2.inputs.value
);
return {
baklava,
saveGraph: () => {
const exportedGraph = engine.export();
localStorage.setItem('myGraph', JSON.stringify(exportedGraph));
},
loadGraph: () => {
const savedGraph = JSON.parse(localStorage.getItem('myGraph'));
engine.import(savedGraph);
}
};
}
});
</script>