ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2024-12-24 06:36:37 +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
Show Stats 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.green(f"{self.lollms_paths.personal_path}")
def audio_callback(self, output):
def audio_callback(self, text):
if self.summoned:
client_id = 0
self.cancel_gen = False
@ -1219,7 +1219,7 @@ class LoLLMsAPI(LollmsApplication):
mounted_personalities.append(personality)
if self.config.enable_voice_service and self.config.auto_read and len(personality.audio_samples)>0:
try:
from lollms.audio_gen_modules.lollms_xtts import LollmsXTTS
from lollms.services.xtts.lollms_xtts import LollmsXTTS
if self.tts is None:
self.tts = LollmsXTTS(self, voice_samples_path=Path(__file__).parent.parent/"voices")
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:
try:
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:
self.tts = LollmsXTTS(self, voice_samples_path=Path(__file__).parent.parent/"voices")
language = convert_language_name(self.personality.language)

9
app.py
View File

@ -475,7 +475,7 @@ try:
def install_sd(self):
try:
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()
self.HideBlockingMessage()
return jsonify({"status":True})
@ -752,7 +752,7 @@ try:
def text2Audio(self):
# Get the JSON data from the POST request.
try:
from lollms.audio_gen_modules.lollms_xtts import LollmsXTTS
from lollms.services.xtts.lollms_xtts import LollmsXTTS
if self.tts is None:
self.tts = LollmsXTTS(self, voice_samples_path=Path(__file__).parent/"voices")
except:
@ -766,7 +766,7 @@ try:
voice = "main_voice"
self.info("Starting to build voice")
try:
from lollms.audio_gen_modules.lollms_xtts import LollmsXTTS
from lollms.services.xtts.lollms_xtts import LollmsXTTS
if self.tts is None:
self.tts = LollmsXTTS(self, voice_samples_path=Path(__file__).parent/"voices")
language = self.config.current_language# convert_language_name()
@ -1883,9 +1883,6 @@ try:
category = data['category']
name = data['folder']
package_path = f"{category}/{name}"
if category=="custom_personalities":
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())
# Get the JSON data from the POST request.
try:
from lollms.audio_gen_modules.lollms_xtts import LollmsXTTS
from lollms.services.xtts.lollms_xtts import LollmsXTTS
if lollmsElfServer.tts is None:
lollmsElfServer.tts = LollmsXTTS(lollmsElfServer, voice_samples_path=Path(__file__).parent/"voices")
except:
@ -82,7 +82,7 @@ async def text2Audio(request: Request):
voice = "main_voice"
lollmsElfServer.info("Starting to build voice")
try:
from lollms.audio_gen_modules.lollms_xtts import LollmsXTTS
from lollms.services.xtts.lollms_xtts import LollmsXTTS
if lollmsElfServer.tts is None:
lollmsElfServer.tts = LollmsXTTS(lollmsElfServer, voice_samples_path=Path(__file__).parent/"voices")
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):
@sio.on('new_discussion')
async def new_discussion(sid, data):
if lollmsElfServer.personality is None:
lollmsElfServer.error("Please select a personality first")
return
ASCIIColors.yellow("New descussion requested")
client_id = sid
title = data["title"]

2
lollms_core

@ -1 +1 @@
Subproject commit c86dbe7e598d764143a280cbdccf81d5ddd553d7
Subproject commit 25334549ec740f5ad332160a8738f3d63c477c50

59
lollms_webui.py
View File

@ -135,8 +135,8 @@ class LOLLMSWebUI(LOLLMSElfServer):
callback=callback,
socketio=socketio
)
self.app_name = "LOLLMSWebUI"
self.version= lollms_webui_version
self.app_name:str = "LOLLMSWebUI"
self.version:str = lollms_webui_version
self.busy = False
@ -335,7 +335,7 @@ class LOLLMSWebUI(LOLLMSElfServer):
os.system(f"python {restart_script}")
sys.exit(0)
def audio_callback(self, output):
def audio_callback(self, text):
if self.summoned:
client_id = 0
self.cancel_gen = False
@ -433,7 +433,7 @@ class LOLLMSWebUI(LOLLMSElfServer):
mounted_personalities.append(personality)
if self.config.enable_voice_service and self.config.auto_read and len(personality.audio_samples)>0:
try:
from lollms.audio_gen_modules.lollms_xtts import LollmsXTTS
from lollms.services.xtts.lollms_xtts import LollmsXTTS
if self.tts is None:
self.tts = LollmsXTTS(self, voice_samples_path=Path(__file__).parent.parent/"voices")
except:
@ -721,7 +721,7 @@ class LOLLMSWebUI(LOLLMSElfServer):
# Check if there are document files to add to the prompt
documentation = ""
history = ""
knowledge = ""
# 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."
except:
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 history=="":
history="!@>previous discussions:\n"
if knowledge=="":
knowledge="!@>knowledge:\n"
try:
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)):
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:
self.warning("Couldn't add long term memory information to the context. Please verify the vector database") # Add information about the user
user_description=""
@ -810,9 +810,9 @@ class LOLLMSWebUI(LOLLMSElfServer):
tokens_documentation = []
n_doc_tk = 0
# Tokenize the history text and calculate its number of tokens
if len(history)>0:
tokens_history = self.model.tokenize(history)
# Tokenize the knowledge text and calculate its number of tokens
if len(knowledge)>0:
tokens_history = self.model.tokenize(knowledge)
n_history_tk = len(tokens_history)
else:
tokens_history = []
@ -828,7 +828,7 @@ class LOLLMSWebUI(LOLLMSElfServer):
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
# Calculate the available space for the messages
@ -903,8 +903,10 @@ class LOLLMSWebUI(LOLLMSElfServer):
message_tokens = full_message_list[i]
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
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
tokens = self.model.tokenize(prompt_data)
@ -916,18 +918,32 @@ class LOLLMSWebUI(LOLLMSElfServer):
ASCIIColors.bold("DOC")
ASCIIColors.yellow(documentation)
ASCIIColors.bold("HISTORY")
ASCIIColors.yellow(history)
ASCIIColors.yellow(knowledge)
ASCIIColors.bold("DISCUSSION")
ASCIIColors.hilight(discussion_messages,"!@>",ASCIIColors.color_yellow,ASCIIColors.color_bright_red,False)
ASCIIColors.bold("Final prompt")
ASCIIColors.hilight(prompt_data,"!@>",ASCIIColors.color_yellow,ASCIIColors.color_bright_red,False)
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)
# 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 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):
@ -1215,12 +1231,12 @@ class LOLLMSWebUI(LOLLMSElfServer):
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:
ASCIIColors.info("Running workflow")
try:
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:
trace_exception(ex)
# Catch the exception and get the traceback as a list of strings
@ -1329,7 +1345,7 @@ class LOLLMSWebUI(LOLLMSElfServer):
self.socketio.sleep(0.01)
# 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.generating = True
self.connections[client_id]["processing"]=True
@ -1337,6 +1353,7 @@ class LOLLMSWebUI(LOLLMSElfServer):
self.generate(
self.discussion_messages,
self.current_message,
context_details=context_details,
n_predict = self.config.ctx_size-len(tokens)-1,
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:
try:
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:
self.tts = LollmsXTTS(self, voice_samples_path=Path(__file__).parent.parent/"voices")
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_advanced import router as lollms_advanced_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_advanced_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
git pull
git submodule update --init --recursive
cd lollms-core
cd lollms_core
pip install -e .
cd ..
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 submodule update --init --recursive
cd
cd lollms-core
cd lollms_core
pip install -e .
cd ..
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
git pull
git submodule update --init --recursive
cd lollms-core
cd lollms_core
pip install -e .
cd ..
cd utilities/safe_store

2
scripts/windows/win_install.bat
View File

@ -88,7 +88,7 @@ if exist lollms-webui\ (
git pull
git submodule update --init --recursive
cd
cd lollms-core
cd lollms_core
pip install -e .
cd ..
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">
<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">
</head>
<body>

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

@ -144,7 +144,7 @@
ref="installedModels">
<div v-if="item.name!=model_name" class="group items-center flex flex-row">
<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 "
:title="item.name">
</button>
@ -153,7 +153,7 @@
</div>
<div class="group items-center flex flex-row">
<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 "
:title="currentModel?currentModel.name:'unknown'">
</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 "@baklavajs/themes/dist/syrup-dark.css";
import { AgentNode } from "../nodes/Agent";
import { AgentNode } from "../nodes/Personality";
import { RAGNode } from "../nodes/Rag";
import { TaskNode } from "../nodes/Task";

2
zoos/bindings_zoo

@ -1 +1 @@
Subproject commit 8c9d4eae604734f1bb04d8b529727546dba22c10
Subproject commit 3b48b2cdf95665a1472e3274b538b39f97bd93eb

2
zoos/personalities_zoo

@ -1 +1 @@
Subproject commit cd9817054bee86a377a589b6598c0076095f7992
Subproject commit 211dc1c9c449e528eabe04a4592a025f7737a78c