ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2025-06-17 06:48:10 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fixed errors

Browse Source
This commit is contained in:
Saifeddine ALOUI
2024-01-10 21:22:17 +01:00
parent 244744b645
commit c14208104b
23 changed files with 1700 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
api/__init__.py
View File

@ -1121,7 +1121,7 @@ class LoLLMsAPI(LollmsApplication):
ASCIIColors.blue(f"Your personal data is stored here :",end="") ASCIIColors.blue(f"Your personal data is stored here :",end="")
ASCIIColors.green(f"{self.lollms_paths.personal_path}") ASCIIColors.green(f"{self.lollms_paths.personal_path}")
def audio_callback(self, output): def audio_callback(self, text):
if self.summoned: if self.summoned:
client_id = 0 client_id = 0
self.cancel_gen = False self.cancel_gen = False
@ -1219,7 +1219,7 @@ class LoLLMsAPI(LollmsApplication):
mounted_personalities.append(personality) mounted_personalities.append(personality)
if self.config.enable_voice_service and self.config.auto_read and len(personality.audio_samples)>0: if self.config.enable_voice_service and self.config.auto_read and len(personality.audio_samples)>0:
try: try:
from lollms.audio_gen_modules.lollms_xtts import LollmsXTTS from lollms.services.xtts.lollms_xtts import LollmsXTTS
if self.tts is None: if self.tts is None:
self.tts = LollmsXTTS(self, voice_samples_path=Path(__file__).parent.parent/"voices") self.tts = LollmsXTTS(self, voice_samples_path=Path(__file__).parent.parent/"voices")
except: except:
@ -2122,7 +2122,7 @@ class LoLLMsAPI(LollmsApplication):
if self.config.enable_voice_service and self.config.auto_read and len(self.personality.audio_samples)>0: if self.config.enable_voice_service and self.config.auto_read and len(self.personality.audio_samples)>0:
try: try:
self.process_chunk("Generating voice output",MSG_TYPE.MSG_TYPE_STEP_START,client_id=client_id) self.process_chunk("Generating voice output",MSG_TYPE.MSG_TYPE_STEP_START,client_id=client_id)
from lollms.audio_gen_modules.lollms_xtts import LollmsXTTS from lollms.services.xtts.lollms_xtts import LollmsXTTS
if self.tts is None: if self.tts is None:
self.tts = LollmsXTTS(self, voice_samples_path=Path(__file__).parent.parent/"voices") self.tts = LollmsXTTS(self, voice_samples_path=Path(__file__).parent.parent/"voices")
language = convert_language_name(self.personality.language) language = convert_language_name(self.personality.language)

9
app.py
View File

@ -475,7 +475,7 @@ try:
def install_sd(self): def install_sd(self):
try: try:
self.ShowBlockingMessage("Installing SD api server\nPlease stand by") self.ShowBlockingMessage("Installing SD api server\nPlease stand by")
from lollms.image_gen_modules.lollms_sd import install_sd from lollms.services.sd.lollms_sd import install_sd
install_sd() install_sd()
self.HideBlockingMessage() self.HideBlockingMessage()
return jsonify({"status":True}) return jsonify({"status":True})
@ -752,7 +752,7 @@ try:
def text2Audio(self): def text2Audio(self):
# Get the JSON data from the POST request. # Get the JSON data from the POST request.
try: try:
from lollms.audio_gen_modules.lollms_xtts import LollmsXTTS from lollms.services.xtts.lollms_xtts import LollmsXTTS
if self.tts is None: if self.tts is None:
self.tts = LollmsXTTS(self, voice_samples_path=Path(__file__).parent/"voices") self.tts = LollmsXTTS(self, voice_samples_path=Path(__file__).parent/"voices")
except: except:
@ -766,7 +766,7 @@ try:
voice = "main_voice" voice = "main_voice"
self.info("Starting to build voice") self.info("Starting to build voice")
try: try:
from lollms.audio_gen_modules.lollms_xtts import LollmsXTTS from lollms.services.xtts.lollms_xtts import LollmsXTTS
if self.tts is None: if self.tts is None:
self.tts = LollmsXTTS(self, voice_samples_path=Path(__file__).parent/"voices") self.tts = LollmsXTTS(self, voice_samples_path=Path(__file__).parent/"voices")
language = self.config.current_language# convert_language_name() language = self.config.current_language# convert_language_name()
@ -1883,9 +1883,6 @@ try:
category = data['category'] category = data['category']
name = data['folder'] name = data['folder']
package_path = f"{category}/{name}" package_path = f"{category}/{name}"
if category=="custom_personalities": if category=="custom_personalities":
package_full_path = self.lollms_paths.custom_personalities_path/f"{name}" package_full_path = self.lollms_paths.custom_personalities_path/f"{name}"

4
endpoints/lollms_xtts.py
View File

@ -68,7 +68,7 @@ async def text2Audio(request: Request):
data = (await request.json()) data = (await request.json())
# Get the JSON data from the POST request. # Get the JSON data from the POST request.
try: try:
from lollms.audio_gen_modules.lollms_xtts import LollmsXTTS from lollms.services.xtts.lollms_xtts import LollmsXTTS
if lollmsElfServer.tts is None: if lollmsElfServer.tts is None:
lollmsElfServer.tts = LollmsXTTS(lollmsElfServer, voice_samples_path=Path(__file__).parent/"voices") lollmsElfServer.tts = LollmsXTTS(lollmsElfServer, voice_samples_path=Path(__file__).parent/"voices")
except: except:
@ -82,7 +82,7 @@ async def text2Audio(request: Request):
voice = "main_voice" voice = "main_voice"
lollmsElfServer.info("Starting to build voice") lollmsElfServer.info("Starting to build voice")
try: try:
from lollms.audio_gen_modules.lollms_xtts import LollmsXTTS from lollms.services.xtts.lollms_xtts import LollmsXTTS
if lollmsElfServer.tts is None: if lollmsElfServer.tts is None:
lollmsElfServer.tts = LollmsXTTS(lollmsElfServer, voice_samples_path=Path(__file__).parent/"voices") lollmsElfServer.tts = LollmsXTTS(lollmsElfServer, voice_samples_path=Path(__file__).parent/"voices")
language = lollmsElfServer.config.current_language# convert_language_name() language = lollmsElfServer.config.current_language# convert_language_name()

3
events/lollms_discussion_events.py
View File

@ -37,6 +37,9 @@ lollmsElfServer = LOLLMSWebUI.get_instance()
def add_events(sio:socketio): def add_events(sio:socketio):
@sio.on('new_discussion') @sio.on('new_discussion')
async def new_discussion(sid, data): async def new_discussion(sid, data):
if lollmsElfServer.personality is None:
lollmsElfServer.error("Please select a personality first")
return
ASCIIColors.yellow("New descussion requested") ASCIIColors.yellow("New descussion requested")
client_id = sid client_id = sid
title = data["title"] title = data["title"]

2
lollms_core

Submodule lollms_core updated: c86dbe7e59...25334549ec

59
lollms_webui.py
View File

@ -135,8 +135,8 @@ class LOLLMSWebUI(LOLLMSElfServer):
callback=callback, callback=callback,
socketio=socketio socketio=socketio
) )
self.app_name = "LOLLMSWebUI" self.app_name:str = "LOLLMSWebUI"
self.version= lollms_webui_version self.version:str = lollms_webui_version
self.busy = False self.busy = False
@ -335,7 +335,7 @@ class LOLLMSWebUI(LOLLMSElfServer):
os.system(f"python {restart_script}") os.system(f"python {restart_script}")
sys.exit(0) sys.exit(0)
def audio_callback(self, output): def audio_callback(self, text):
if self.summoned: if self.summoned:
client_id = 0 client_id = 0
self.cancel_gen = False self.cancel_gen = False
@ -433,7 +433,7 @@ class LOLLMSWebUI(LOLLMSElfServer):
mounted_personalities.append(personality) mounted_personalities.append(personality)
if self.config.enable_voice_service and self.config.auto_read and len(personality.audio_samples)>0: if self.config.enable_voice_service and self.config.auto_read and len(personality.audio_samples)>0:
try: try:
from lollms.audio_gen_modules.lollms_xtts import LollmsXTTS from lollms.services.xtts.lollms_xtts import LollmsXTTS
if self.tts is None: if self.tts is None:
self.tts = LollmsXTTS(self, voice_samples_path=Path(__file__).parent.parent/"voices") self.tts = LollmsXTTS(self, voice_samples_path=Path(__file__).parent.parent/"voices")
except: except:
@ -721,7 +721,7 @@ class LOLLMSWebUI(LOLLMSElfServer):
# Check if there are document files to add to the prompt # Check if there are document files to add to the prompt
documentation = "" documentation = ""
history = "" knowledge = ""
# boosting information # boosting information
@ -782,15 +782,15 @@ class LOLLMSWebUI(LOLLMSElfServer):
documentation += "\n!@>important information: Use the documentation data to answer the user questions. If the data is not present in the documentation, please tell the user that the information he is asking for does not exist in the documentation section. It is strictly forbidden to give the user an answer without having actual proof from the documentation." documentation += "\n!@>important information: Use the documentation data to answer the user questions. If the data is not present in the documentation, please tell the user that the information he is asking for does not exist in the documentation section. It is strictly forbidden to give the user an answer without having actual proof from the documentation."
except: except:
self.warning("Couldn't add documentation to the context. Please verify the vector database") self.warning("Couldn't add documentation to the context. Please verify the vector database")
# Check if there is discussion history to add to the prompt # Check if there is discussion knowledge to add to the prompt
if self.config.use_discussions_history and self.long_term_memory is not None: if self.config.use_discussions_history and self.long_term_memory is not None:
if history=="": if knowledge=="":
history="!@>previous discussions:\n" knowledge="!@>knowledge:\n"
try: try:
docs, sorted_similarities = self.long_term_memory.recover_text(current_message.content, top_k=self.config.data_vectorization_nb_chunks) docs, sorted_similarities = self.long_term_memory.recover_text(current_message.content, top_k=self.config.data_vectorization_nb_chunks)
for i,(doc, infos) in enumerate(zip(docs, sorted_similarities)): for i,(doc, infos) in enumerate(zip(docs, sorted_similarities)):
history += f"!@>previous discussion {i}:\n!@>discussion title:\n{infos[0]}\ndiscussion content:\n{doc}" knowledge += f"!@>knowledge {i}:\n!@>title:\n{infos[0]}\ncontent:\n{doc}"
except: except:
self.warning("Couldn't add long term memory information to the context. Please verify the vector database") # Add information about the user self.warning("Couldn't add long term memory information to the context. Please verify the vector database") # Add information about the user
user_description="" user_description=""
@ -810,9 +810,9 @@ class LOLLMSWebUI(LOLLMSElfServer):
tokens_documentation = [] tokens_documentation = []
n_doc_tk = 0 n_doc_tk = 0
# Tokenize the history text and calculate its number of tokens # Tokenize the knowledge text and calculate its number of tokens
if len(history)>0: if len(knowledge)>0:
tokens_history = self.model.tokenize(history) tokens_history = self.model.tokenize(knowledge)
n_history_tk = len(tokens_history) n_history_tk = len(tokens_history)
else: else:
tokens_history = [] tokens_history = []
@ -828,7 +828,7 @@ class LOLLMSWebUI(LOLLMSElfServer):
n_user_description_tk = 0 n_user_description_tk = 0
# Calculate the total number of tokens between conditionning, documentation, and history # Calculate the total number of tokens between conditionning, documentation, and knowledge
total_tokens = n_cond_tk + n_doc_tk + n_history_tk + n_user_description_tk + n_positive_boost + n_negative_boost + n_force_language total_tokens = n_cond_tk + n_doc_tk + n_history_tk + n_user_description_tk + n_positive_boost + n_negative_boost + n_force_language
# Calculate the available space for the messages # Calculate the available space for the messages
@ -903,8 +903,10 @@ class LOLLMSWebUI(LOLLMSElfServer):
message_tokens = full_message_list[i] message_tokens = full_message_list[i]
discussion_messages += self.model.detokenize(message_tokens) discussion_messages += self.model.detokenize(message_tokens)
ai_prefix = self.model.detokenize(full_message_list[-1])
# Build the final prompt by concatenating the conditionning and discussion messages # Build the final prompt by concatenating the conditionning and discussion messages
prompt_data = conditionning + documentation + history + user_description + discussion_messages + positive_boost + negative_boost + force_language + self.model.detokenize(full_message_list[-1]) prompt_data = conditionning + documentation + knowledge + user_description + discussion_messages + positive_boost + negative_boost + force_language + ai_prefix
# Tokenize the prompt data # Tokenize the prompt data
tokens = self.model.tokenize(prompt_data) tokens = self.model.tokenize(prompt_data)
@ -916,18 +918,32 @@ class LOLLMSWebUI(LOLLMSElfServer):
ASCIIColors.bold("DOC") ASCIIColors.bold("DOC")
ASCIIColors.yellow(documentation) ASCIIColors.yellow(documentation)
ASCIIColors.bold("HISTORY") ASCIIColors.bold("HISTORY")
ASCIIColors.yellow(history) ASCIIColors.yellow(knowledge)
ASCIIColors.bold("DISCUSSION") ASCIIColors.bold("DISCUSSION")
ASCIIColors.hilight(discussion_messages,"!@>",ASCIIColors.color_yellow,ASCIIColors.color_bright_red,False) ASCIIColors.hilight(discussion_messages,"!@>",ASCIIColors.color_yellow,ASCIIColors.color_bright_red,False)
ASCIIColors.bold("Final prompt") ASCIIColors.bold("Final prompt")
ASCIIColors.hilight(prompt_data,"!@>",ASCIIColors.color_yellow,ASCIIColors.color_bright_red,False) ASCIIColors.hilight(prompt_data,"!@>",ASCIIColors.color_yellow,ASCIIColors.color_bright_red,False)
ASCIIColors.info(f"prompt size:{len(tokens)} tokens") ASCIIColors.info(f"prompt size:{len(tokens)} tokens")
ASCIIColors.info(f"available space after doc and history:{available_space} tokens") ASCIIColors.info(f"available space after doc and knowledge:{available_space} tokens")
self.info(f"Tokens summary:\nPrompt size:{len(tokens)}\nTo generate:{available_space}",10) self.info(f"Tokens summary:\nPrompt size:{len(tokens)}\nTo generate:{available_space}",10)
# Details
context_details = {
"conditionning":conditionning,
"documentation":documentation,
"knowledge":knowledge,
"user_description":user_description,
"discussion_messages":discussion_messages,
"positive_boost":positive_boost,
"negative_boost":negative_boost,
"force_language":force_language,
"ai_prefix":ai_prefix
}
# Return the prepared query, original message content, and tokenized query # Return the prepared query, original message content, and tokenized query
return prompt_data, current_message.content, tokens return prompt_data, current_message.content, tokens, context_details
def get_discussion_to(self, client_id, message_id=-1): def get_discussion_to(self, client_id, message_id=-1):
@ -1215,12 +1231,12 @@ class LOLLMSWebUI(LOLLMSElfServer):
return True return True
def generate(self, full_prompt, prompt, n_predict, client_id, callback=None): def generate(self, full_prompt, prompt, context_details, n_predict, client_id, callback=None):
if self.personality.processor is not None: if self.personality.processor is not None:
ASCIIColors.info("Running workflow") ASCIIColors.info("Running workflow")
try: try:
self.personality.callback = callback self.personality.callback = callback
self.personality.processor.run_workflow( prompt, full_prompt, callback) self.personality.processor.run_workflow( prompt, full_prompt, callback, context_details)
except Exception as ex: except Exception as ex:
trace_exception(ex) trace_exception(ex)
# Catch the exception and get the traceback as a list of strings # Catch the exception and get the traceback as a list of strings
@ -1329,7 +1345,7 @@ class LOLLMSWebUI(LOLLMSElfServer):
self.socketio.sleep(0.01) self.socketio.sleep(0.01)
# prepare query and reception # prepare query and reception
self.discussion_messages, self.current_message, tokens = self.prepare_query(client_id, message_id, is_continue, n_tokens=self.config.min_n_predict, generation_type=generation_type) self.discussion_messages, self.current_message, tokens, context_details = self.prepare_query(client_id, message_id, is_continue, n_tokens=self.config.min_n_predict, generation_type=generation_type)
self.prepare_reception(client_id) self.prepare_reception(client_id)
self.generating = True self.generating = True
self.connections[client_id]["processing"]=True self.connections[client_id]["processing"]=True
@ -1337,6 +1353,7 @@ class LOLLMSWebUI(LOLLMSElfServer):
self.generate( self.generate(
self.discussion_messages, self.discussion_messages,
self.current_message, self.current_message,
context_details=context_details,
n_predict = self.config.ctx_size-len(tokens)-1, n_predict = self.config.ctx_size-len(tokens)-1,
client_id=client_id, client_id=client_id,
callback=partial(self.process_chunk,client_id = client_id) callback=partial(self.process_chunk,client_id = client_id)
@ -1344,7 +1361,7 @@ class LOLLMSWebUI(LOLLMSElfServer):
if self.config.enable_voice_service and self.config.auto_read and len(self.personality.audio_samples)>0: if self.config.enable_voice_service and self.config.auto_read and len(self.personality.audio_samples)>0:
try: try:
self.process_chunk("Generating voice output",MSG_TYPE.MSG_TYPE_STEP_START,client_id=client_id) self.process_chunk("Generating voice output",MSG_TYPE.MSG_TYPE_STEP_START,client_id=client_id)
from lollms.audio_gen_modules.lollms_xtts import LollmsXTTS from lollms.services.xtts.lollms_xtts import LollmsXTTS
if self.tts is None: if self.tts is None:
self.tts = LollmsXTTS(self, voice_samples_path=Path(__file__).parent.parent/"voices") self.tts = LollmsXTTS(self, voice_samples_path=Path(__file__).parent.parent/"voices")
language = convert_language_name(self.personality.language) language = convert_language_name(self.personality.language)

3
new_app.py
View File

@ -76,6 +76,7 @@ if __name__ == "__main__":
from endpoints.lollms_user import router as lollms_user_router from endpoints.lollms_user import router as lollms_user_router
from endpoints.lollms_advanced import router as lollms_advanced_router from endpoints.lollms_advanced import router as lollms_advanced_router
from endpoints.chat_bar import router as chat_bar_router from endpoints.chat_bar import router as chat_bar_router
from endpoints.lollms_xtts import router as lollms_xtts_add_router
@ -106,6 +107,8 @@ if __name__ == "__main__":
app.include_router(lollms_user_router) app.include_router(lollms_user_router)
app.include_router(lollms_advanced_router) app.include_router(lollms_advanced_router)
app.include_router(chat_bar_router) app.include_router(chat_bar_router)
app.include_router(lollms_xtts_add_router)

2
scripts/linux/linux_install.sh
View File

@ -98,7 +98,7 @@ if [ -d "lollms-webui" ]; then
cd lollms-webui || exit 1 cd lollms-webui || exit 1
git pull git pull
git submodule update --init --recursive git submodule update --init --recursive
cd lollms-core cd lollms_core
pip install -e . pip install -e .
cd .. cd ..
cd utilities/safe_store cd utilities/safe_store

2
scripts/linux/linux_install_use_your_own_conda.sh
View File

@ -51,7 +51,7 @@ if [ -d "lollms-webui" ]; then
git pull git pull
git submodule update --init --recursive git submodule update --init --recursive
cd cd
cd lollms-core cd lollms_core
pip install -e . pip install -e .
cd .. cd ..
cd utilities/safe_store cd utilities/safe_store

2
scripts/macos/macos_install.sh
View File

@ -115,7 +115,7 @@ if [ -d "lollms-webui" ]; then
cd lollms-webui || exit 1 cd lollms-webui || exit 1
git pull git pull
git submodule update --init --recursive git submodule update --init --recursive
cd lollms-core cd lollms_core
pip install -e . pip install -e .
cd .. cd ..
cd utilities/safe_store cd utilities/safe_store

2
scripts/windows/win_install.bat
View File

@ -88,7 +88,7 @@ if exist lollms-webui\ (
git pull git pull
git submodule update --init --recursive git submodule update --init --recursive
cd cd
cd lollms-core cd lollms_core
pip install -e . pip install -e .
cd .. cd ..
cd utilities\safe_store cd utilities\safe_store

2
web/dist/assets/index-cb8d1b46.js → web/dist/assets/index-c7401936.js vendored
View File

File diff suppressed because one or more lines are too long

2
web/dist/index.html vendored
View File

@ -6,7 +6,7 @@
<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-cb8d1b46.js"></script> <script type="module" crossorigin src="/assets/index-c7401936.js"></script>
<link rel="stylesheet" href="/assets/index-27c35171.css"> <link rel="stylesheet" href="/assets/index-27c35171.css">
</head> </head>
<body> <body>

4
web/src/components/ChatBox.vue
View File

@ -144,7 +144,7 @@
ref="installedModels"> ref="installedModels">
<div v-if="item.name!=model_name" class="group items-center flex flex-row"> <div v-if="item.name!=model_name" class="group items-center flex flex-row">
<button @click.prevent="setModel(item)" class="w-8 h-8"> <button @click.prevent="setModel(item)" class="w-8 h-8">
<img :src="item.icon?item.icon:modelImgPlaceholder" @error="modelImgPlaceholder" <img :src="item.icon?item.icon:modelImgPlaceholder"
class="w-8 h-8 rounded-full object-fill text-red-700 border-2 active:scale-90 hover:border-secondary " class="w-8 h-8 rounded-full object-fill text-red-700 border-2 active:scale-90 hover:border-secondary "
:title="item.name"> :title="item.name">
</button> </button>
@ -153,7 +153,7 @@
</div> </div>
<div class="group items-center flex flex-row"> <div class="group items-center flex flex-row">
<button @click.prevent="showModelConfig()" class="w-8 h-8"> <button @click.prevent="showModelConfig()" class="w-8 h-8">
<img :src="currentModel.icon?currentModel.icon:modelImgPlaceholder" @error="modelImgPlaceholder" <img :src="currentModel.icon?currentModel.icon:modelImgPlaceholder"
class="w-8 h-8 rounded-full object-fill text-red-700 border-2 active:scale-90 hover:border-secondary " class="w-8 h-8 rounded-full object-fill text-red-700 border-2 active:scale-90 hover:border-secondary "
:title="currentModel?currentModel.name:'unknown'"> :title="currentModel?currentModel.name:'unknown'">
</button> </button>

763
web/src/css/classic.css Normal file
View File

@ -0,0 +1,763 @@
:root {
--baklava-control-color-primary: #5379b5;
--baklava-control-color-error: red;
--baklava-control-color-background: #2c2c2c;
--baklava-control-color-foreground: white;
--baklava-control-color-hover: #4c4c4c;
--baklava-control-color-active: #6c6c6c;
--baklava-control-color-disabled-foreground: gray;
--baklava-control-border-radius: 3px;
--baklava-sidebar-color-background: #3f3f3f;
--baklava-sidebar-color-foreground: white;
--baklava-node-color-background: #3f3f3fcc;
--baklava-node-color-foreground: white;
--baklava-node-color-hover: #5379b577;
--baklava-node-color-selected: var(--baklava-control-color-primary);
--baklava-node-color-resize-handle: var(--baklava-control-color-background);
--baklava-node-title-color-background: black;
--baklava-node-title-color-foreground: white;
--baklava-group-node-title-color-background: rgb(5, 75, 5);
--baklava-group-node-title-color-foreground: white;
--baklava-node-interface-port-tooltip-color-foreground: var(--baklava-control-color-primary);
--baklava-node-interface-port-tooltip-color-background: var(--baklava-editor-background-pattern-black);
--baklava-node-border-radius: 4px;
--baklava-color-connection-default: white;
--baklava-color-connection-allowed: green;
--baklava-color-connection-forbidden: red;
--baklava-editor-background-pattern-default: #232323;
--baklava-editor-background-pattern-line: #131313;
--baklava-editor-background-pattern-black: #00000022;
--baklava-context-menu-background: #000000cc;
--baklava-context-menu-shadow: 0 0 8px rgba(0, 0, 0, 0.65);
--baklava-toolbar-background: #0003;
--baklava-toolbar-foreground: white;
--baklava-node-palette-background: #0003;
--baklava-node-palette-foreground: white;
--baklava-visual-transition: 0.1s linear;
}
.baklava-button {
background-color: var(--baklava-control-color-background);
color: var(--baklava-control-color-foreground);
transition: background-color var(--baklava-visual-transition);
border: none;
padding: 0.45em 0.35em;
border-radius: var(--baklava-control-border-radius);
font-size: inherit;
cursor: pointer;
overflow-x: hidden;
}
.baklava-button:hover {
background-color: var(--baklava-control-color-hover);
}
.baklava-button:active {
background-color: var(--baklava-control-color-primary);
}
.baklava-button.--block {
width: 100%;
}
.baklava-checkbox {
display: flex;
padding: 0.35em 0;
cursor: pointer;
overflow-x: hidden;
align-items: center;
}
.baklava-checkbox .__checkmark-container {
display: flex;
background-color: var(--baklava-control-color-background);
border-radius: var(--baklava-control-border-radius);
transition: background-color var(--baklava-visual-transition);
width: 18px;
height: 18px;
}
.baklava-checkbox:hover .__checkmark-container {
background-color: var(--baklava-control-color-hover);
}
.baklava-checkbox:active .__checkmark-container {
background-color: var(--baklava-control-color-active);
}
.baklava-checkbox .__checkmark {
stroke-dasharray: 15;
stroke-dashoffset: 15;
stroke: var(--baklava-control-color-foreground);
stroke-width: 2px;
fill: none;
transition: stroke-dashoffset var(--baklava-visual-transition);
}
.baklava-checkbox.--checked .__checkmark {
stroke-dashoffset: 0;
}
.baklava-checkbox.--checked .__checkmark-container {
background-color: var(--baklava-control-color-primary);
}
.baklava-checkbox .__label {
margin-left: 0.5rem;
}
.baklava-context-menu {
color: var(--baklava-control-color-foreground);
position: absolute;
display: inline-block;
z-index: 100;
background-color: var(--baklava-context-menu-background);
box-shadow: var(--baklava-context-menu-shadow);
border-radius: 0 0 var(--baklava-control-border-radius) var(--baklava-control-border-radius);
min-width: 6rem;
width: max-content;
}
.baklava-context-menu > .item {
display: flex;
align-items: center;
padding: 0.35em 1em;
transition: background 0.05s linear;
position: relative;
}
.baklava-context-menu > .item > .__label {
flex: 1 1 auto;
}
.baklava-context-menu > .item > .__submenu-icon {
margin-left: 0.75rem;
}
.baklava-context-menu > .item.--disabled {
color: var(--baklava-control-color-hover);
}
.baklava-context-menu > .item:not(.--header):not(.--active):not(.--disabled):hover {
background: var(--baklava-control-color-primary);
}
.baklava-context-menu > .item.--active {
background: var(--baklava-control-color-primary);
}
.baklava-context-menu.--nested {
left: 100%;
top: 0;
}
.baklava-context-menu.--flipped-x.--nested {
left: unset;
right: 100%;
}
.baklava-context-menu.--flipped-y.--nested {
top: unset;
bottom: 0;
}
.baklava-context-menu > .divider {
margin: 0.35em 0;
height: 1px;
background-color: var(--baklava-control-color-hover);
}
.baklava-icon {
display: block;
height: 100%;
}
.baklava-icon.--clickable {
cursor: pointer;
transition: color var(--baklava-visual-transition);
}
.baklava-icon.--clickable:hover {
color: var(--baklava-control-color-primary);
}
.baklava-input {
background-color: var(--baklava-control-color-background);
color: var(--baklava-control-color-foreground);
caret-color: var(--baklava-control-color-primary);
border: none;
border-radius: var(--baklava-control-border-radius);
padding: 0.45em 0.75em;
width: 100%;
transition: background-color var(--baklava-visual-transition);
font-size: inherit;
font: inherit;
}
.baklava-input:hover {
background-color: var(--baklava-control-color-hover);
}
.baklava-input:active {
background-color: var(--baklava-control-color-active);
}
.baklava-input:focus-visible {
outline: 1px solid var(--baklava-control-color-primary);
}
.baklava-input[type=number]::-webkit-inner-spin-button, .baklava-input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.baklava-input.--invalid {
box-shadow: 0 0 2px 2px var(--baklava-control-color-error);
}
.baklava-num-input {
background: var(--baklava-control-color-background);
color: var(--baklava-control-color-foreground);
border-radius: var(--baklava-control-border-radius);
width: 100%;
display: grid;
grid-template-columns: 20px 1fr 20px;
}
.baklava-num-input > .__button {
display: flex;
flex: 0 0 auto;
width: 20px;
justify-content: center;
align-items: center;
transition: background var(--baklava-visual-transition);
cursor: pointer;
}
.baklava-num-input > .__button:hover {
background-color: var(--baklava-control-color-hover);
}
.baklava-num-input > .__button:active {
background-color: var(--baklava-control-color-active);
}
.baklava-num-input > .__button.--dec {
grid-area: 1/1/span 1/span 1;
}
.baklava-num-input > .__button.--dec > svg {
transform: rotateZ(90deg);
}
.baklava-num-input > .__button.--inc {
grid-area: 1/3/span 1/span 1;
}
.baklava-num-input > .__button.--inc > svg {
transform: rotateZ(-90deg);
}
.baklava-num-input > .__button path {
stroke: var(--baklava-control-color-foreground);
fill: var(--baklava-control-color-foreground);
}
.baklava-num-input > .__content {
grid-area: 1/2/span 1/span 1;
display: inline-flex;
cursor: pointer;
max-width: 100%;
min-width: 0;
align-items: center;
transition: background-color var(--baklava-visual-transition);
}
.baklava-num-input > .__content:hover {
background-color: var(--baklava-control-color-hover);
}
.baklava-num-input > .__content:active {
background-color: var(--baklava-control-color-active);
}
.baklava-num-input > .__content > .__label, .baklava-num-input > .__content > .__value {
margin: 0.35em 0;
padding: 0 0.5em;
}
.baklava-num-input > .__content > .__label {
flex: 1;
min-width: 0;
overflow: hidden;
}
.baklava-num-input > .__content > .__value {
text-align: right;
}
.baklava-num-input > .__content > input {
background-color: var(--baklava-control-color-background);
color: var(--baklava-control-color-foreground);
caret-color: var(--baklava-control-color-primary);
padding: 0.35em;
width: 100%;
}
.baklava-select {
width: 100%;
position: relative;
color: var(--baklava-control-color-foreground);
}
.baklava-select.--open > .__selected {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.baklava-select.--open > .__selected > .__icon {
transform: rotate(180deg);
}
.baklava-select > .__selected {
background-color: var(--baklava-control-color-background);
padding: 0.35em 0.75em;
border-radius: var(--baklava-control-border-radius);
transition: background var(--baklava-visual-transition);
min-height: 1.7em;
display: flex;
align-items: center;
cursor: pointer;
}
.baklava-select > .__selected:hover {
background: var(--baklava-control-color-hover);
}
.baklava-select > .__selected:active {
background: var(--baklava-control-color-active);
}
.baklava-select > .__selected > .__text {
flex: 1 0 auto;
flex-basis: 0;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.baklava-select > .__selected > .__icon {
flex: 0 0 auto;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.25s ease;
width: 18px;
height: 18px;
}
.baklava-select > .__selected > .__icon path {
stroke: var(--baklava-control-color-foreground);
fill: var(--baklava-control-color-foreground);
}
.baklava-select > .__dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 10;
background-color: var(--baklava-context-menu-background);
filter: drop-shadow(0 0 4px black);
border-radius: 0 0 var(--baklava-control-border-radius) var(--baklava-control-border-radius);
max-height: 15em;
overflow-y: scroll;
}
.baklava-select > .__dropdown::-webkit-scrollbar {
width: 0px;
background: transparent;
}
.baklava-select > .__dropdown > .item {
padding: 0.35em;
padding-left: 1em;
transition: background 0.05s linear;
}
.baklava-select > .__dropdown > .item:not(.--header):not(.--active) {
cursor: pointer;
}
.baklava-select > .__dropdown > .item:not(.--header):not(.--active):hover {
background: var(--baklava-control-color-hover);
}
.baklava-select > .__dropdown > .item.--active {
background: var(--baklava-control-color-primary);
}
.baklava-select > .__dropdown > .item.--header {
color: var(--baklava-control-color-disabled-foreground);
border-bottom: 1px solid var(--baklava-control-color-disabled-foreground);
padding: 0.5em 0.35em;
padding-left: 1em;
}
.baklava-slider {
background: var(--baklava-control-color-background);
color: var(--baklava-control-color-foreground);
border-radius: var(--baklava-control-border-radius);
position: relative;
cursor: pointer;
}
.baklava-slider > .__content {
display: flex;
position: relative;
}
.baklava-slider > .__content > .__label, .baklava-slider > .__content > .__value {
flex: 1 1 auto;
margin: 0.35em 0;
padding: 0 0.5em;
text-overflow: ellipsis;
}
.baklava-slider > .__content > .__value {
text-align: right;
}
.baklava-slider > .__content > input {
background-color: var(--baklava-control-color-background);
color: var(--baklava-control-color-foreground);
caret-color: var(--baklava-control-color-primary);
padding: 0.35em;
width: 100%;
}
.baklava-slider > .__slider {
position: absolute;
top: 0;
bottom: 0;
left: 0;
background-color: var(--baklava-control-color-primary);
border-radius: var(--baklava-control-border-radius);
}
.baklava-connection {
stroke: var(--baklava-color-connection-default);
stroke-width: 2px;
fill: none;
}
.baklava-connection.--temporary {
stroke-width: 4px;
stroke-dasharray: 5 5;
stroke-dashoffset: 0;
animation: dash 1s linear infinite;
transform: translateY(-1px);
}
@keyframes dash {
to {
stroke-dashoffset: 20;
}
}
.baklava-connection.--allowed {
stroke: var(--baklava-color-connection-allowed);
}
.baklava-connection.--forbidden {
stroke: var(--baklava-color-connection-forbidden);
}
.baklava-minimap {
position: absolute;
height: 15%;
width: 15%;
min-width: 150px;
max-width: 90%;
top: 20px;
right: 20px;
z-index: 900;
}
.baklava-editor {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
outline: none !important;
font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 15px;
touch-action: none;
}
.baklava-editor .background {
background-color: var(--baklava-editor-background-pattern-default);
background-image: linear-gradient(var(--baklava-editor-background-pattern-black) 2px, transparent 2px), linear-gradient(90deg, var(--baklava-editor-background-pattern-black) 2px, transparent 2px), linear-gradient(var(--baklava-editor-background-pattern-line) 1px, transparent 1px), linear-gradient(90deg, var(--baklava-editor-background-pattern-line) 1px, transparent 1px);
background-repeat: repeat;
width: 100%;
height: 100%;
pointer-events: none !important;
}
.baklava-editor *:not(input):not(textarea) {
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
touch-action: none;
}
.baklava-editor .input-user-select {
user-select: auto;
-moz-user-select: auto;
-webkit-user-select: auto;
}
.baklava-editor *, .baklava-editor *::after, .baklava-editor *::before {
box-sizing: border-box;
}
.baklava-editor.--temporary-connection {
cursor: crosshair;
}
.baklava-editor .connections-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none !important;
}
.baklava-editor .node-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.baklava-editor .node-container * {
pointer-events: all;
}
.baklava-ignore-mouse * {
pointer-events: none !important;
}
.baklava-ignore-mouse .__port {
pointer-events: all !important;
}
.baklava-node-interface {
padding: 0.25em 0;
position: relative;
}
.baklava-node-interface .__port {
position: absolute;
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
top: calc(50% - 5px);
cursor: crosshair;
}
.baklava-node-interface .__port.--selected {
outline: 2px var(--baklava-color-connection-default) solid;
outline-offset: 4px;
}
.baklava-node-interface.--input {
text-align: left;
padding-left: 0.5em;
}
.baklava-node-interface.--input .__port {
left: -1.1em;
}
.baklava-node-interface.--output {
text-align: right;
padding-right: 0.5em;
}
.baklava-node-interface.--output .__port {
right: -1.1em;
}
.baklava-node-interface .__tooltip {
position: absolute;
left: 5px;
top: 15px;
transform: translate(-50%, 0%);
background: var(--baklava-node-interface-port-tooltip-color-background);
color: var(--baklava-node-interface-port-tooltip-color-foreground);
padding: 0.25em 0.5em;
text-align: center;
z-index: 2;
}
.baklava-node-palette {
position: absolute;
left: 0;
top: 60px;
width: 250px;
height: calc(100% - 60px);
z-index: 3;
padding: 2rem;
overflow-y: auto;
background: var(--baklava-node-palette-background);
color: var(--baklava-node-palette-foreground);
}
.baklava-node-palette h1 {
margin-top: 2rem;
}
.baklava-node.--palette {
position: unset;
margin: 1rem 0;
cursor: grab;
}
.baklava-node.--palette:first-child {
margin-top: 0;
}
.baklava-node.--palette .__title {
padding: 0.5rem;
border-radius: var(--baklava-node-border-radius);
}
.baklava-dragged-node {
position: absolute;
width: calc(250px - 4rem);
height: 40px;
z-index: 4;
pointer-events: none;
}
.baklava-node {
background: var(--baklava-node-color-background);
color: var(--baklava-node-color-foreground);
border: 1px solid transparent;
border-radius: var(--baklava-node-border-radius);
position: absolute;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
transition: border-color var(--baklava-visual-transition), box-shadow var(--baklava-visual-transition);
width: var(--width);
}
.baklava-node:hover {
border-color: var(--baklava-node-color-hover);
}
.baklava-node:hover .__resize-handle::after {
opacity: 1;
}
.baklava-node.--selected {
z-index: 5;
border-color: var(--baklava-node-color-selected);
}
.baklava-node.--dragging {
box-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
}
.baklava-node.--dragging > .__title {
cursor: grabbing;
}
.baklava-node > .__title {
display: flex;
background: var(--baklava-node-title-color-background);
color: var(--baklava-node-title-color-foreground);
padding: 0.4em 0.75em;
border-radius: var(--baklava-node-border-radius) var(--baklava-node-border-radius) 0 0;
cursor: grab;
}
.baklava-node > .__title > *:first-child {
flex-grow: 1;
}
.baklava-node > .__title > .__title-label {
pointer-events: none;
}
.baklava-node > .__title > .__menu {
position: relative;
cursor: initial;
}
.baklava-node[data-node-type^=__baklava_] > .__title {
background: var(--baklava-group-node-title-color-background);
color: var(--baklava-group-node-title-color-foreground);
}
.baklava-node > .__content {
padding: 0.75em;
}
.baklava-node > .__content > div > div {
margin: 0.5em 0;
}
.baklava-node.--two-column > .__content {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
grid-template-areas: ". ." ". .";
}
.baklava-node.--two-column > .__content > .__inputs {
grid-row: 1;
grid-column: 1;
}
.baklava-node.--two-column > .__content > .__outputs {
grid-row: 1;
grid-column: 2;
}
.baklava-node .__resize-handle {
position: absolute;
right: 0;
bottom: 0;
width: 1rem;
height: 1rem;
transform: translateX(50%);
cursor: ew-resize;
}
.baklava-node .__resize-handle::after {
content: "";
position: absolute;
bottom: 0;
left: -0.5rem;
width: 1rem;
height: 1rem;
opacity: 0;
border-bottom-right-radius: var(--baklava-node-border-radius);
transition: opacity var(--baklava-visual-transition);
background: linear-gradient(-45deg, transparent 10%, var(--baklava-node-color-resize-handle) 10%, var(--baklava-node-color-resize-handle) 15%, transparent 15%, transparent 30%, var(--baklava-node-color-resize-handle) 30%, var(--baklava-node-color-resize-handle) 35%, transparent 35%, transparent 50%, var(--baklava-node-color-resize-handle) 50%, var(--baklava-node-color-resize-handle) 55%, transparent 55%);
}
.baklava-sidebar {
position: absolute;
height: 100%;
width: 25%;
min-width: 300px;
max-width: 90%;
top: 0;
right: 0;
z-index: 1000;
background-color: var(--baklava-sidebar-color-background);
color: var(--baklava-sidebar-color-foreground);
box-shadow: none;
overflow-x: hidden;
padding: 1em;
transform: translateX(100%);
transition: transform 0.5s;
display: flex;
flex-direction: column;
}
.baklava-sidebar.--open {
transform: translateX(0);
box-shadow: 0px 0px 15px black;
}
.baklava-sidebar .__resizer {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 4px;
cursor: col-resize;
}
.baklava-sidebar .__header {
display: flex;
align-items: center;
}
.baklava-sidebar .__header .__node-name {
margin-left: 0.5rem;
}
.baklava-sidebar .__close {
font-size: 2em;
border: none;
background: none;
color: inherit;
cursor: pointer;
}
.baklava-sidebar .__interface {
margin: 0.5em 0;
}
.baklava-toolbar {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 60px;
z-index: 3;
padding: 0.5rem 2rem;
background: var(--baklava-toolbar-background);
color: var(--baklava-toolbar-foreground);
display: flex;
align-items: center;
}
.baklava-toolbar-entry {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.baklava-toolbar-button {
color: var(--baklava-toolbar-foreground);
background: none;
border: none;
transition: color var(--baklava-visual-transition);
}
.baklava-toolbar-button:not([disabled]) {
cursor: pointer;
}
.baklava-toolbar-button:hover:not([disabled]) {
color: var(--baklava-control-color-primary);
}
.baklava-toolbar-button[disabled] {
color: var(--baklava-control-color-disabled-foreground);
}
.slide-fade-enter-active {
transition: all 0.1s ease-out;
}
.slide-fade-leave-active {
transition: all 0.1s ease-out;
}
.slide-fade-enter-from,
.slide-fade-leave-to {
transform: translateY(5px);
opacity: 0;
}
.fade-enter-active {
transition: opacity 0.1s ease-out !important;
}
.fade-leave-active {
transition: opacity 0.1s ease-out !important;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}

763
web/src/css/syrup-dark.css Normal file
View File

@ -0,0 +1,763 @@
:root {
--baklava-control-color-primary: #e28b46;
--baklava-control-color-error: #d00000;
--baklava-control-color-background: #2c3748;
--baklava-control-color-foreground: white;
--baklava-control-color-hover: #455670;
--baklava-control-color-active: #556986;
--baklava-control-color-disabled-foreground: #666c75;
--baklava-control-border-radius: 3px;
--baklava-sidebar-color-background: #1b202c;
--baklava-sidebar-color-foreground: white;
--baklava-node-color-background: #1b202c;
--baklava-node-color-foreground: white;
--baklava-node-color-hover: #e28c4677;
--baklava-node-color-selected: var(--baklava-control-color-primary);
--baklava-node-color-resize-handle: var(--baklava-control-color-background);
--baklava-node-title-color-background: #151a24;
--baklava-node-title-color-foreground: white;
--baklava-group-node-title-color-background: #215636;
--baklava-group-node-title-color-foreground: white;
--baklava-node-interface-port-tooltip-color-foreground: var(--baklava-control-color-primary);
--baklava-node-interface-port-tooltip-color-background: var(--baklava-editor-background-pattern-black);
--baklava-node-border-radius: 6px;
--baklava-color-connection-default: #737f96;
--baklava-color-connection-allowed: #48bc79;
--baklava-color-connection-forbidden: #bc4848;
--baklava-editor-background-pattern-default: #202b3c;
--baklava-editor-background-pattern-line: #263140;
--baklava-editor-background-pattern-black: #263140;
--baklava-context-menu-background: #1b202c;
--baklava-context-menu-shadow: 0 0 8px rgba(0, 0, 0, 0.65);
--baklava-toolbar-background: #1b202caa;
--baklava-toolbar-foreground: white;
--baklava-node-palette-background: #1b202caa;
--baklava-node-palette-foreground: white;
--baklava-visual-transition: 0.1s linear;
}
.baklava-button {
background-color: var(--baklava-control-color-background);
color: var(--baklava-control-color-foreground);
transition: background-color var(--baklava-visual-transition);
border: none;
padding: 0.45em 0.35em;
border-radius: var(--baklava-control-border-radius);
font-size: inherit;
cursor: pointer;
overflow-x: hidden;
}
.baklava-button:hover {
background-color: var(--baklava-control-color-hover);
}
.baklava-button:active {
background-color: var(--baklava-control-color-primary);
}
.baklava-button.--block {
width: 100%;
}
.baklava-checkbox {
display: flex;
padding: 0.35em 0;
cursor: pointer;
overflow-x: hidden;
align-items: center;
}
.baklava-checkbox .__checkmark-container {
display: flex;
background-color: var(--baklava-control-color-background);
border-radius: var(--baklava-control-border-radius);
transition: background-color var(--baklava-visual-transition);
width: 18px;
height: 18px;
}
.baklava-checkbox:hover .__checkmark-container {
background-color: var(--baklava-control-color-hover);
}
.baklava-checkbox:active .__checkmark-container {
background-color: var(--baklava-control-color-active);
}
.baklava-checkbox .__checkmark {
stroke-dasharray: 15;
stroke-dashoffset: 15;
stroke: var(--baklava-control-color-foreground);
stroke-width: 2px;
fill: none;
transition: stroke-dashoffset var(--baklava-visual-transition);
}
.baklava-checkbox.--checked .__checkmark {
stroke-dashoffset: 0;
}
.baklava-checkbox.--checked .__checkmark-container {
background-color: var(--baklava-control-color-primary);
}
.baklava-checkbox .__label {
margin-left: 0.5rem;
}
.baklava-context-menu {
color: var(--baklava-control-color-foreground);
position: absolute;
display: inline-block;
z-index: 100;
background-color: var(--baklava-context-menu-background);
box-shadow: var(--baklava-context-menu-shadow);
border-radius: 0 0 var(--baklava-control-border-radius) var(--baklava-control-border-radius);
min-width: 6rem;
width: max-content;
}
.baklava-context-menu > .item {
display: flex;
align-items: center;
padding: 0.35em 1em;
transition: background 0.05s linear;
position: relative;
}
.baklava-context-menu > .item > .__label {
flex: 1 1 auto;
}
.baklava-context-menu > .item > .__submenu-icon {
margin-left: 0.75rem;
}
.baklava-context-menu > .item.--disabled {
color: var(--baklava-control-color-hover);
}
.baklava-context-menu > .item:not(.--header):not(.--active):not(.--disabled):hover {
background: var(--baklava-control-color-primary);
}
.baklava-context-menu > .item.--active {
background: var(--baklava-control-color-primary);
}
.baklava-context-menu.--nested {
left: 100%;
top: 0;
}
.baklava-context-menu.--flipped-x.--nested {
left: unset;
right: 100%;
}
.baklava-context-menu.--flipped-y.--nested {
top: unset;
bottom: 0;
}
.baklava-context-menu > .divider {
margin: 0.35em 0;
height: 1px;
background-color: var(--baklava-control-color-hover);
}
.baklava-icon {
display: block;
height: 100%;
}
.baklava-icon.--clickable {
cursor: pointer;
transition: color var(--baklava-visual-transition);
}
.baklava-icon.--clickable:hover {
color: var(--baklava-control-color-primary);
}
.baklava-input {
background-color: var(--baklava-control-color-background);
color: var(--baklava-control-color-foreground);
caret-color: var(--baklava-control-color-primary);
border: none;
border-radius: var(--baklava-control-border-radius);
padding: 0.45em 0.75em;
width: 100%;
transition: background-color var(--baklava-visual-transition);
font-size: inherit;
font: inherit;
}
.baklava-input:hover {
background-color: var(--baklava-control-color-hover);
}
.baklava-input:active {
background-color: var(--baklava-control-color-active);
}
.baklava-input:focus-visible {
outline: 1px solid var(--baklava-control-color-primary);
}
.baklava-input[type=number]::-webkit-inner-spin-button, .baklava-input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.baklava-input.--invalid {
box-shadow: 0 0 2px 2px var(--baklava-control-color-error);
}
.baklava-num-input {
background: var(--baklava-control-color-background);
color: var(--baklava-control-color-foreground);
border-radius: var(--baklava-control-border-radius);
width: 100%;
display: grid;
grid-template-columns: 20px 1fr 20px;
}
.baklava-num-input > .__button {
display: flex;
flex: 0 0 auto;
width: 20px;
justify-content: center;
align-items: center;
transition: background var(--baklava-visual-transition);
cursor: pointer;
}
.baklava-num-input > .__button:hover {
background-color: var(--baklava-control-color-hover);
}
.baklava-num-input > .__button:active {
background-color: var(--baklava-control-color-active);
}
.baklava-num-input > .__button.--dec {
grid-area: 1/1/span 1/span 1;
}
.baklava-num-input > .__button.--dec > svg {
transform: rotateZ(90deg);
}
.baklava-num-input > .__button.--inc {
grid-area: 1/3/span 1/span 1;
}
.baklava-num-input > .__button.--inc > svg {
transform: rotateZ(-90deg);
}
.baklava-num-input > .__button path {
stroke: var(--baklava-control-color-foreground);
fill: var(--baklava-control-color-foreground);
}
.baklava-num-input > .__content {
grid-area: 1/2/span 1/span 1;
display: inline-flex;
cursor: pointer;
max-width: 100%;
min-width: 0;
align-items: center;
transition: background-color var(--baklava-visual-transition);
}
.baklava-num-input > .__content:hover {
background-color: var(--baklava-control-color-hover);
}
.baklava-num-input > .__content:active {
background-color: var(--baklava-control-color-active);
}
.baklava-num-input > .__content > .__label, .baklava-num-input > .__content > .__value {
margin: 0.35em 0;
padding: 0 0.5em;
}
.baklava-num-input > .__content > .__label {
flex: 1;
min-width: 0;
overflow: hidden;
}
.baklava-num-input > .__content > .__value {
text-align: right;
}
.baklava-num-input > .__content > input {
background-color: var(--baklava-control-color-background);
color: var(--baklava-control-color-foreground);
caret-color: var(--baklava-control-color-primary);
padding: 0.35em;
width: 100%;
}
.baklava-select {
width: 100%;
position: relative;
color: var(--baklava-control-color-foreground);
}
.baklava-select.--open > .__selected {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.baklava-select.--open > .__selected > .__icon {
transform: rotate(180deg);
}
.baklava-select > .__selected {
background-color: var(--baklava-control-color-background);
padding: 0.35em 0.75em;
border-radius: var(--baklava-control-border-radius);
transition: background var(--baklava-visual-transition);
min-height: 1.7em;
display: flex;
align-items: center;
cursor: pointer;
}
.baklava-select > .__selected:hover {
background: var(--baklava-control-color-hover);
}
.baklava-select > .__selected:active {
background: var(--baklava-control-color-active);
}
.baklava-select > .__selected > .__text {
flex: 1 0 auto;
flex-basis: 0;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.baklava-select > .__selected > .__icon {
flex: 0 0 auto;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.25s ease;
width: 18px;
height: 18px;
}
.baklava-select > .__selected > .__icon path {
stroke: var(--baklava-control-color-foreground);
fill: var(--baklava-control-color-foreground);
}
.baklava-select > .__dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 10;
background-color: var(--baklava-context-menu-background);
filter: drop-shadow(0 0 4px black);
border-radius: 0 0 var(--baklava-control-border-radius) var(--baklava-control-border-radius);
max-height: 15em;
overflow-y: scroll;
}
.baklava-select > .__dropdown::-webkit-scrollbar {
width: 0px;
background: transparent;
}
.baklava-select > .__dropdown > .item {
padding: 0.35em;
padding-left: 1em;
transition: background 0.05s linear;
}
.baklava-select > .__dropdown > .item:not(.--header):not(.--active) {
cursor: pointer;
}
.baklava-select > .__dropdown > .item:not(.--header):not(.--active):hover {
background: var(--baklava-control-color-hover);
}
.baklava-select > .__dropdown > .item.--active {
background: var(--baklava-control-color-primary);
}
.baklava-select > .__dropdown > .item.--header {
color: var(--baklava-control-color-disabled-foreground);
border-bottom: 1px solid var(--baklava-control-color-disabled-foreground);
padding: 0.5em 0.35em;
padding-left: 1em;
}
.baklava-slider {
background: var(--baklava-control-color-background);
color: var(--baklava-control-color-foreground);
border-radius: var(--baklava-control-border-radius);
position: relative;
cursor: pointer;
}
.baklava-slider > .__content {
display: flex;
position: relative;
}
.baklava-slider > .__content > .__label, .baklava-slider > .__content > .__value {
flex: 1 1 auto;
margin: 0.35em 0;
padding: 0 0.5em;
text-overflow: ellipsis;
}
.baklava-slider > .__content > .__value {
text-align: right;
}
.baklava-slider > .__content > input {
background-color: var(--baklava-control-color-background);
color: var(--baklava-control-color-foreground);
caret-color: var(--baklava-control-color-primary);
padding: 0.35em;
width: 100%;
}
.baklava-slider > .__slider {
position: absolute;
top: 0;
bottom: 0;
left: 0;
background-color: var(--baklava-control-color-primary);
border-radius: var(--baklava-control-border-radius);
}
.baklava-connection {
stroke: var(--baklava-color-connection-default);
stroke-width: 2px;
fill: none;
}
.baklava-connection.--temporary {
stroke-width: 4px;
stroke-dasharray: 5 5;
stroke-dashoffset: 0;
animation: dash 1s linear infinite;
transform: translateY(-1px);
}
@keyframes dash {
to {
stroke-dashoffset: 20;
}
}
.baklava-connection.--allowed {
stroke: var(--baklava-color-connection-allowed);
}
.baklava-connection.--forbidden {
stroke: var(--baklava-color-connection-forbidden);
}
.baklava-minimap {
position: absolute;
height: 15%;
width: 15%;
min-width: 150px;
max-width: 90%;
top: 20px;
right: 20px;
z-index: 900;
}
.baklava-editor {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
outline: none !important;
font-family: "Lato", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 15px;
touch-action: none;
}
.baklava-editor .background {
background-color: var(--baklava-editor-background-pattern-default);
background-image: linear-gradient(var(--baklava-editor-background-pattern-black) 2px, transparent 2px), linear-gradient(90deg, var(--baklava-editor-background-pattern-black) 2px, transparent 2px), linear-gradient(var(--baklava-editor-background-pattern-line) 1px, transparent 1px), linear-gradient(90deg, var(--baklava-editor-background-pattern-line) 1px, transparent 1px);
background-repeat: repeat;
width: 100%;
height: 100%;
pointer-events: none !important;
}
.baklava-editor *:not(input):not(textarea) {
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
touch-action: none;
}
.baklava-editor .input-user-select {
user-select: auto;
-moz-user-select: auto;
-webkit-user-select: auto;
}
.baklava-editor *, .baklava-editor *::after, .baklava-editor *::before {
box-sizing: border-box;
}
.baklava-editor.--temporary-connection {
cursor: crosshair;
}
.baklava-editor .connections-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none !important;
}
.baklava-editor .node-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.baklava-editor .node-container * {
pointer-events: all;
}
.baklava-ignore-mouse * {
pointer-events: none !important;
}
.baklava-ignore-mouse .__port {
pointer-events: all !important;
}
.baklava-node-interface {
padding: 0.25em 0;
position: relative;
}
.baklava-node-interface .__port {
position: absolute;
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
top: calc(50% - 5px);
cursor: crosshair;
}
.baklava-node-interface .__port.--selected {
outline: 2px var(--baklava-color-connection-default) solid;
outline-offset: 4px;
}
.baklava-node-interface.--input {
text-align: left;
padding-left: 0.5em;
}
.baklava-node-interface.--input .__port {
left: -1.1em;
}
.baklava-node-interface.--output {
text-align: right;
padding-right: 0.5em;
}
.baklava-node-interface.--output .__port {
right: -1.1em;
}
.baklava-node-interface .__tooltip {
position: absolute;
left: 5px;
top: 15px;
transform: translate(-50%, 0%);
background: var(--baklava-node-interface-port-tooltip-color-background);
color: var(--baklava-node-interface-port-tooltip-color-foreground);
padding: 0.25em 0.5em;
text-align: center;
z-index: 2;
}
.baklava-node-palette {
position: absolute;
left: 0;
top: 60px;
width: 250px;
height: calc(100% - 60px);
z-index: 3;
padding: 2rem;
overflow-y: auto;
background: var(--baklava-node-palette-background);
color: var(--baklava-node-palette-foreground);
}
.baklava-node-palette h1 {
margin-top: 2rem;
}
.baklava-node.--palette {
position: unset;
margin: 1rem 0;
cursor: grab;
}
.baklava-node.--palette:first-child {
margin-top: 0;
}
.baklava-node.--palette .__title {
padding: 0.5rem;
border-radius: var(--baklava-node-border-radius);
}
.baklava-dragged-node {
position: absolute;
width: calc(250px - 4rem);
height: 40px;
z-index: 4;
pointer-events: none;
}
.baklava-node {
background: var(--baklava-node-color-background);
color: var(--baklava-node-color-foreground);
border: 1px solid transparent;
border-radius: var(--baklava-node-border-radius);
position: absolute;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
transition: border-color var(--baklava-visual-transition), box-shadow var(--baklava-visual-transition);
width: var(--width);
}
.baklava-node:hover {
border-color: var(--baklava-node-color-hover);
}
.baklava-node:hover .__resize-handle::after {
opacity: 1;
}
.baklava-node.--selected {
z-index: 5;
border-color: var(--baklava-node-color-selected);
}
.baklava-node.--dragging {
box-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
}
.baklava-node.--dragging > .__title {
cursor: grabbing;
}
.baklava-node > .__title {
display: flex;
background: var(--baklava-node-title-color-background);
color: var(--baklava-node-title-color-foreground);
padding: 0.4em 0.75em;
border-radius: var(--baklava-node-border-radius) var(--baklava-node-border-radius) 0 0;
cursor: grab;
}
.baklava-node > .__title > *:first-child {
flex-grow: 1;
}
.baklava-node > .__title > .__title-label {
pointer-events: none;
}
.baklava-node > .__title > .__menu {
position: relative;
cursor: initial;
}
.baklava-node[data-node-type^=__baklava_] > .__title {
background: var(--baklava-group-node-title-color-background);
color: var(--baklava-group-node-title-color-foreground);
}
.baklava-node > .__content {
padding: 0.75em;
}
.baklava-node > .__content > div > div {
margin: 0.5em 0;
}
.baklava-node.--two-column > .__content {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
grid-template-areas: ". ." ". .";
}
.baklava-node.--two-column > .__content > .__inputs {
grid-row: 1;
grid-column: 1;
}
.baklava-node.--two-column > .__content > .__outputs {
grid-row: 1;
grid-column: 2;
}
.baklava-node .__resize-handle {
position: absolute;
right: 0;
bottom: 0;
width: 1rem;
height: 1rem;
transform: translateX(50%);
cursor: ew-resize;
}
.baklava-node .__resize-handle::after {
content: "";
position: absolute;
bottom: 0;
left: -0.5rem;
width: 1rem;
height: 1rem;
opacity: 0;
border-bottom-right-radius: var(--baklava-node-border-radius);
transition: opacity var(--baklava-visual-transition);
background: linear-gradient(-45deg, transparent 10%, var(--baklava-node-color-resize-handle) 10%, var(--baklava-node-color-resize-handle) 15%, transparent 15%, transparent 30%, var(--baklava-node-color-resize-handle) 30%, var(--baklava-node-color-resize-handle) 35%, transparent 35%, transparent 50%, var(--baklava-node-color-resize-handle) 50%, var(--baklava-node-color-resize-handle) 55%, transparent 55%);
}
.baklava-sidebar {
position: absolute;
height: 100%;
width: 25%;
min-width: 300px;
max-width: 90%;
top: 0;
right: 0;
z-index: 1000;
background-color: var(--baklava-sidebar-color-background);
color: var(--baklava-sidebar-color-foreground);
box-shadow: none;
overflow-x: hidden;
padding: 1em;
transform: translateX(100%);
transition: transform 0.5s;
display: flex;
flex-direction: column;
}
.baklava-sidebar.--open {
transform: translateX(0);
box-shadow: 0px 0px 15px black;
}
.baklava-sidebar .__resizer {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 4px;
cursor: col-resize;
}
.baklava-sidebar .__header {
display: flex;
align-items: center;
}
.baklava-sidebar .__header .__node-name {
margin-left: 0.5rem;
}
.baklava-sidebar .__close {
font-size: 2em;
border: none;
background: none;
color: inherit;
cursor: pointer;
}
.baklava-sidebar .__interface {
margin: 0.5em 0;
}
.baklava-toolbar {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 60px;
z-index: 3;
padding: 0.5rem 2rem;
background: var(--baklava-toolbar-background);
color: var(--baklava-toolbar-foreground);
display: flex;
align-items: center;
}
.baklava-toolbar-entry {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.baklava-toolbar-button {
color: var(--baklava-toolbar-foreground);
background: none;
border: none;
transition: color var(--baklava-visual-transition);
}
.baklava-toolbar-button:not([disabled]) {
cursor: pointer;
}
.baklava-toolbar-button:hover:not([disabled]) {
color: var(--baklava-control-color-primary);
}
.baklava-toolbar-button[disabled] {
color: var(--baklava-control-color-disabled-foreground);
}
.slide-fade-enter-active {
transition: all 0.1s ease-out;
}
.slide-fade-leave-active {
transition: all 0.1s ease-out;
}
.slide-fade-enter-from,
.slide-fade-leave-to {
transform: translateY(5px);
opacity: 0;
}
.fade-enter-active {
transition: opacity 0.1s ease-out !important;
}
.fade-leave-active {
transition: opacity 0.1s ease-out !important;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}

33
web/src/nodes/Personality.js Normal file
View File

@ -0,0 +1,33 @@
import { defineNode, NodeInterface, TextInterface, SelectInterface } from "baklavajs";
import axios from 'axios';
import { store } from '../main'
export const AgentNode = defineNode({
type: "PersonalityNode",
title: "Personality",
inputs: {
request: () => new NodeInterface("Request", ""),
agent_name: () =>
new SelectInterface("Personality", "", store.state.config.personalities).setPort(
false
),
},
outputs: {
display: () => new TextInterface("Output", ""),
response: () => new NodeInterface("Response", "")
},
async calculate({ request }) {
console.log(store.state.config.personalities)
let response = '';
try {
const result = await axios.get('/generate', { params: { text: request } });
response = result.data;
} catch (error) {
console.error(error);
}
return {
display: response,
response: response
};
}
});

29
web/src/nodes/Rag.js Normal file
View File

@ -0,0 +1,29 @@
import { defineNode, NodeInterface, TextInputInterface } from "baklavajs";
import axios from 'axios';
import { store } from '../main'
export const RAGNode = defineNode({
type: "RAGNode",
title: "RAG",
inputs: {
request: () => new NodeInterface("Prompt", ""),
document_path: () => new TextInputInterface("Document path", "").setPort(
false
),
},
outputs: {
prompt: () => new NodeInterface("Prompt with Data", "")
},
async calculate({ request, document_path }) {
let response = '';
try {
const result = await axios.get('/rag', { params: { text: request, doc_path:document_path } });
response = result.data;
} catch (error) {
console.error(error);
}
return {
response: response
};
}
});

22
web/src/nodes/Task.js Normal file
View File

@ -0,0 +1,22 @@
import {
defineNode,
TextInputInterface,
NodeInterface
} from "baklavajs";
export const TaskNode = defineNode({
type: "Task",
title: "Task",
inputs: {
description: () => new TextInputInterface("Task description", "").setPort(
false
),
},
outputs: {
prompt: () => new NodeInterface("Prompt")
},
calculate({ description }) {
return { prompt: description };
}
});

23
web/src/nodes/TaskDispatcher.js Normal file
View File

@ -0,0 +1,23 @@
import {
defineNode,
TextInputInterface,
NodeInterface
} from "baklavajs";
export const TaskDispatcherNode = defineNode({
type: "Task",
title: "Task",
description: {
},
inputs: {
description: () => new TextInputInterface("Description", ""),
},
outputs: {
result: () => new NodeInterface("Result")
},
calculate({ description }) {
return { result: description };
}
});

2
web/src/views/NodesView.vue
View File

@ -17,7 +17,7 @@
//import "../css/classic.css"; //import "../css/classic.css";
import "@baklavajs/themes/dist/syrup-dark.css"; import "@baklavajs/themes/dist/syrup-dark.css";
import { AgentNode } from "../nodes/Agent"; import { AgentNode } from "../nodes/Personality";
import { RAGNode } from "../nodes/Rag"; import { RAGNode } from "../nodes/Rag";
import { TaskNode } from "../nodes/Task"; import { TaskNode } from "../nodes/Task";

2
zoos/bindings_zoo

Submodule zoos/bindings_zoo updated: 8c9d4eae60...3b48b2cdf9

2
zoos/personalities_zoo

Submodule zoos/personalities_zoo updated: cd9817054b...211dc1c9c4