mirror of
https://github.com/ParisNeo/lollms.git
synced 2024-12-18 20:27:58 +00:00
New lollms version with much more control
This commit is contained in:
Saifeddine ALOUI
parent
dac0bb39b2
commit
65adad84b3
@ -1,5 +1,8 @@
|
|||||||
recursive-include lollms/configs *
|
recursive-include lollms/configs *
|
||||||
recursive-include lollms/apps/playground *
|
recursive-include lollms/apps/playground/dist *
|
||||||
|
recursive-include lollms/apps/playground/public *
|
||||||
|
recursive-include lollms/apps/playground/presets *
|
||||||
|
global-exclude *.bin
|
||||||
global-exclude *.bin
|
global-exclude *.bin
|
||||||
global-exclude *.pyc
|
global-exclude *.pyc
|
||||||
global-exclude local_config.yaml
|
global-exclude local_config.yaml
|
||||||
|
|||||||
@ -1,7 +1,19 @@
|
|||||||
from flask import Flask, send_from_directory
|
from flask import Flask, send_from_directory, request, jsonify
|
||||||
|
from lollms.helpers import get_trace_exception
|
||||||
|
from lollms.paths import LollmsPaths
|
||||||
|
from lollms.main_config import LOLLMSConfig
|
||||||
|
from pathlib import Path
|
||||||
|
import requests
|
||||||
|
import json
|
||||||
|
import shutil
|
||||||
|
import yaml
|
||||||
import os
|
import os
|
||||||
|
|
||||||
app = Flask(__name__, static_folder='static/')
|
|
||||||
|
lollms_paths = LollmsPaths.find_paths(force_local=False, tool_prefix="lollms_server_")
|
||||||
|
config = LOLLMSConfig.autoload(lollms_paths)
|
||||||
|
|
||||||
|
app = Flask(__name__, static_folder='dist/')
|
||||||
|
|
||||||
@app.route('/')
|
@app.route('/')
|
||||||
def index():
|
def index():
|
||||||
@ -9,9 +21,138 @@ def index():
|
|||||||
|
|
||||||
@app.route('/<path:filename>')
|
@app.route('/<path:filename>')
|
||||||
def serve_file(filename):
|
def serve_file(filename):
|
||||||
root_dir = "static/"
|
root_dir = "dist/"
|
||||||
return send_from_directory(root_dir, filename)
|
return send_from_directory(root_dir, filename)
|
||||||
|
|
||||||
|
|
||||||
|
@app.route("/execute_python_code", methods=["POST"])
|
||||||
|
def execute_python_code():
|
||||||
|
"""Executes Python code and returns the output."""
|
||||||
|
data = request.get_json()
|
||||||
|
code = data["code"]
|
||||||
|
# Import the necessary modules.
|
||||||
|
import io
|
||||||
|
import sys
|
||||||
|
import time
|
||||||
|
|
||||||
|
# Create a Python interpreter.
|
||||||
|
interpreter = io.StringIO()
|
||||||
|
sys.stdout = interpreter
|
||||||
|
|
||||||
|
# Execute the code.
|
||||||
|
start_time = time.time()
|
||||||
|
try:
|
||||||
|
exec(code)
|
||||||
|
# Get the output.
|
||||||
|
output = interpreter.getvalue()
|
||||||
|
except Exception as ex:
|
||||||
|
output = str(ex)+"\n"+get_trace_exception(ex)
|
||||||
|
end_time = time.time()
|
||||||
|
|
||||||
|
return jsonify({"output":output,"execution_time":end_time - start_time})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
def copy_files(src, dest):
|
||||||
|
for item in os.listdir(src):
|
||||||
|
src_file = os.path.join(src, item)
|
||||||
|
dest_file = os.path.join(dest, item)
|
||||||
|
|
||||||
|
if os.path.isfile(src_file):
|
||||||
|
shutil.copy2(src_file, dest_file)
|
||||||
|
|
||||||
|
@app.route("/get_presets", methods=["GET"])
|
||||||
|
def get_presets():
|
||||||
|
presets_folder = lollms_paths.personal_databases_path/"lollms_playground_presets"
|
||||||
|
if not presets_folder.exists():
|
||||||
|
presets_folder.mkdir(exist_ok=True, parents=True)
|
||||||
|
path = Path(__file__).parent/"presets"
|
||||||
|
copy_files(str(path),presets_folder)
|
||||||
|
presets = []
|
||||||
|
for filename in presets_folder.glob('*.yaml'):
|
||||||
|
print(filename)
|
||||||
|
with open(filename, 'r', encoding='utf-8') as file:
|
||||||
|
preset = yaml.safe_load(file)
|
||||||
|
if preset is not None:
|
||||||
|
presets.append(preset)
|
||||||
|
return jsonify(presets)
|
||||||
|
|
||||||
|
@app.route("/add_preset", methods=["POST"])
|
||||||
|
def add_preset():
|
||||||
|
# Get the JSON data from the POST request.
|
||||||
|
preset_data = request.get_json()
|
||||||
|
presets_folder = lollms_paths.personal_databases_path/"lollms_playground_presets"
|
||||||
|
if not presets_folder.exists():
|
||||||
|
presets_folder.mkdir(exist_ok=True, parents=True)
|
||||||
|
copy_files("presets",presets_folder)
|
||||||
|
fn = preset_data.name.lower().replace(" ","_")
|
||||||
|
filename = presets_folder/f"{fn}.yaml"
|
||||||
|
with open(filename, 'w', encoding='utf-8') as file:
|
||||||
|
yaml.dump(preset_data)
|
||||||
|
return jsonify({"status": True})
|
||||||
|
|
||||||
|
@app.route("/del_preset", methods=["POST"])
|
||||||
|
def del_preset():
|
||||||
|
presets_folder = lollms_paths.personal_databases_path/"lollms_playground_presets"
|
||||||
|
if not presets_folder.exists():
|
||||||
|
presets_folder.mkdir(exist_ok=True, parents=True)
|
||||||
|
copy_files("presets",presets_folder)
|
||||||
|
presets = []
|
||||||
|
for filename in presets_folder.glob('*.yaml'):
|
||||||
|
print(filename)
|
||||||
|
with open(filename, 'r') as file:
|
||||||
|
preset = yaml.safe_load(file)
|
||||||
|
if preset is not None:
|
||||||
|
presets.append(preset)
|
||||||
|
return jsonify(presets)
|
||||||
|
|
||||||
|
@app.route("/save_preset", methods=["POST"])
|
||||||
|
def save_presets():
|
||||||
|
"""Saves a preset to a file.
|
||||||
|
|
||||||
|
Args:
|
||||||
|
None.
|
||||||
|
|
||||||
|
Returns:
|
||||||
|
None.
|
||||||
|
"""
|
||||||
|
|
||||||
|
# Get the JSON data from the POST request.
|
||||||
|
preset_data = request.get_json()
|
||||||
|
|
||||||
|
presets_file = lollms_paths.personal_databases_path/"presets.json"
|
||||||
|
# Save the JSON data to a file.
|
||||||
|
with open(presets_file, "w") as f:
|
||||||
|
json.dump(preset_data, f, indent=4)
|
||||||
|
|
||||||
|
return jsonify({"status":True,"message":"Preset saved successfully!"})
|
||||||
|
|
||||||
|
@app.route("/list_models", methods=["GET"])
|
||||||
|
def list_models():
|
||||||
|
host = f"http://{config.host}:{config.port}"
|
||||||
|
response = requests.get(f"{host}/list_models")
|
||||||
|
data = response.json()
|
||||||
|
return jsonify(data)
|
||||||
|
|
||||||
|
|
||||||
|
@app.route("/get_active_model", methods=["GET"])
|
||||||
|
def get_active_model():
|
||||||
|
host = f"http://{config.host}:{config.port}"
|
||||||
|
response = requests.get(f"{host}/get_active_model")
|
||||||
|
data = response.json()
|
||||||
|
return jsonify(data)
|
||||||
|
|
||||||
|
|
||||||
|
@app.route("/update_setting", methods=["POST"])
|
||||||
|
def update_setting():
|
||||||
|
host = f"http://{config.host}:{config.port}"
|
||||||
|
response = requests.post(f"{host}/update_setting", headers={'Content-Type': 'application/json'}, data=request.data)
|
||||||
|
data = response.json()
|
||||||
|
return jsonify(data)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
def main():
|
def main():
|
||||||
app.run()
|
app.run()
|
||||||
|
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 66 KiB |
130
lollms/apps/playground/static/.gitignore
vendored
130
lollms/apps/playground/static/.gitignore
vendored
@ -1,130 +0,0 @@
|
|||||||
# Logs
|
|
||||||
logs
|
|
||||||
*.log
|
|
||||||
npm-debug.log*
|
|
||||||
yarn-debug.log*
|
|
||||||
yarn-error.log*
|
|
||||||
lerna-debug.log*
|
|
||||||
.pnpm-debug.log*
|
|
||||||
|
|
||||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
|
||||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
|
||||||
|
|
||||||
# Runtime data
|
|
||||||
pids
|
|
||||||
*.pid
|
|
||||||
*.seed
|
|
||||||
*.pid.lock
|
|
||||||
|
|
||||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
|
||||||
lib-cov
|
|
||||||
|
|
||||||
# Coverage directory used by tools like istanbul
|
|
||||||
coverage
|
|
||||||
*.lcov
|
|
||||||
|
|
||||||
# nyc test coverage
|
|
||||||
.nyc_output
|
|
||||||
|
|
||||||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
|
||||||
.grunt
|
|
||||||
|
|
||||||
# Bower dependency directory (https://bower.io/)
|
|
||||||
bower_components
|
|
||||||
|
|
||||||
# node-waf configuration
|
|
||||||
.lock-wscript
|
|
||||||
|
|
||||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
|
||||||
build/Release
|
|
||||||
|
|
||||||
# Dependency directories
|
|
||||||
node_modules/
|
|
||||||
jspm_packages/
|
|
||||||
|
|
||||||
# Snowpack dependency directory (https://snowpack.dev/)
|
|
||||||
web_modules/
|
|
||||||
|
|
||||||
# TypeScript cache
|
|
||||||
*.tsbuildinfo
|
|
||||||
|
|
||||||
# Optional npm cache directory
|
|
||||||
.npm
|
|
||||||
|
|
||||||
# Optional eslint cache
|
|
||||||
.eslintcache
|
|
||||||
|
|
||||||
# Optional stylelint cache
|
|
||||||
.stylelintcache
|
|
||||||
|
|
||||||
# Microbundle cache
|
|
||||||
.rpt2_cache/
|
|
||||||
.rts2_cache_cjs/
|
|
||||||
.rts2_cache_es/
|
|
||||||
.rts2_cache_umd/
|
|
||||||
|
|
||||||
# Optional REPL history
|
|
||||||
.node_repl_history
|
|
||||||
|
|
||||||
# Output of 'npm pack'
|
|
||||||
*.tgz
|
|
||||||
|
|
||||||
# Yarn Integrity file
|
|
||||||
.yarn-integrity
|
|
||||||
|
|
||||||
# dotenv environment variable files
|
|
||||||
.env
|
|
||||||
.env.development.local
|
|
||||||
.env.test.local
|
|
||||||
.env.production.local
|
|
||||||
.env.local
|
|
||||||
|
|
||||||
# parcel-bundler cache (https://parceljs.org/)
|
|
||||||
.cache
|
|
||||||
.parcel-cache
|
|
||||||
|
|
||||||
# Next.js build output
|
|
||||||
.next
|
|
||||||
out
|
|
||||||
|
|
||||||
# Nuxt.js build / generate output
|
|
||||||
.nuxt
|
|
||||||
dist
|
|
||||||
|
|
||||||
# Gatsby files
|
|
||||||
.cache/
|
|
||||||
# Comment in the public line in if your project uses Gatsby and not Next.js
|
|
||||||
# https://nextjs.org/blog/next-9-1#public-directory-support
|
|
||||||
# public
|
|
||||||
|
|
||||||
# vuepress build output
|
|
||||||
.vuepress/dist
|
|
||||||
|
|
||||||
# vuepress v2.x temp and cache directory
|
|
||||||
.temp
|
|
||||||
.cache
|
|
||||||
|
|
||||||
# Docusaurus cache and generated files
|
|
||||||
.docusaurus
|
|
||||||
|
|
||||||
# Serverless directories
|
|
||||||
.serverless/
|
|
||||||
|
|
||||||
# FuseBox cache
|
|
||||||
.fusebox/
|
|
||||||
|
|
||||||
# DynamoDB Local files
|
|
||||||
.dynamodb/
|
|
||||||
|
|
||||||
# TernJS port file
|
|
||||||
.tern-port
|
|
||||||
|
|
||||||
# Stores VSCode versions used for testing VSCode extensions
|
|
||||||
.vscode-test
|
|
||||||
|
|
||||||
# yarn v2
|
|
||||||
.yarn/cache
|
|
||||||
.yarn/unplugged
|
|
||||||
.yarn/build-state.yml
|
|
||||||
.yarn/install-state.gz
|
|
||||||
.pnp.*
|
|
||||||
@ -1,201 +0,0 @@
|
|||||||
Apache License
|
|
||||||
Version 2.0, January 2004
|
|
||||||
http://www.apache.org/licenses/
|
|
||||||
|
|
||||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
|
||||||
|
|
||||||
1. Definitions.
|
|
||||||
|
|
||||||
"License" shall mean the terms and conditions for use, reproduction,
|
|
||||||
and distribution as defined by Sections 1 through 9 of this document.
|
|
||||||
|
|
||||||
"Licensor" shall mean the copyright owner or entity authorized by
|
|
||||||
the copyright owner that is granting the License.
|
|
||||||
|
|
||||||
"Legal Entity" shall mean the union of the acting entity and all
|
|
||||||
other entities that control, are controlled by, or are under common
|
|
||||||
control with that entity. For the purposes of this definition,
|
|
||||||
"control" means (i) the power, direct or indirect, to cause the
|
|
||||||
direction or management of such entity, whether by contract or
|
|
||||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
|
||||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
|
||||||
|
|
||||||
"You" (or "Your") shall mean an individual or Legal Entity
|
|
||||||
exercising permissions granted by this License.
|
|
||||||
|
|
||||||
"Source" form shall mean the preferred form for making modifications,
|
|
||||||
including but not limited to software source code, documentation
|
|
||||||
source, and configuration files.
|
|
||||||
|
|
||||||
"Object" form shall mean any form resulting from mechanical
|
|
||||||
transformation or translation of a Source form, including but
|
|
||||||
not limited to compiled object code, generated documentation,
|
|
||||||
and conversions to other media types.
|
|
||||||
|
|
||||||
"Work" shall mean the work of authorship, whether in Source or
|
|
||||||
Object form, made available under the License, as indicated by a
|
|
||||||
copyright notice that is included in or attached to the work
|
|
||||||
(an example is provided in the Appendix below).
|
|
||||||
|
|
||||||
"Derivative Works" shall mean any work, whether in Source or Object
|
|
||||||
form, that is based on (or derived from) the Work and for which the
|
|
||||||
editorial revisions, annotations, elaborations, or other modifications
|
|
||||||
represent, as a whole, an original work of authorship. For the purposes
|
|
||||||
of this License, Derivative Works shall not include works that remain
|
|
||||||
separable from, or merely link (or bind by name) to the interfaces of,
|
|
||||||
the Work and Derivative Works thereof.
|
|
||||||
|
|
||||||
"Contribution" shall mean any work of authorship, including
|
|
||||||
the original version of the Work and any modifications or additions
|
|
||||||
to that Work or Derivative Works thereof, that is intentionally
|
|
||||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
|
||||||
or by an individual or Legal Entity authorized to submit on behalf of
|
|
||||||
the copyright owner. For the purposes of this definition, "submitted"
|
|
||||||
means any form of electronic, verbal, or written communication sent
|
|
||||||
to the Licensor or its representatives, including but not limited to
|
|
||||||
communication on electronic mailing lists, source code control systems,
|
|
||||||
and issue tracking systems that are managed by, or on behalf of, the
|
|
||||||
Licensor for the purpose of discussing and improving the Work, but
|
|
||||||
excluding communication that is conspicuously marked or otherwise
|
|
||||||
designated in writing by the copyright owner as "Not a Contribution."
|
|
||||||
|
|
||||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
|
||||||
on behalf of whom a Contribution has been received by Licensor and
|
|
||||||
subsequently incorporated within the Work.
|
|
||||||
|
|
||||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
|
||||||
this License, each Contributor hereby grants to You a perpetual,
|
|
||||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
|
||||||
copyright license to reproduce, prepare Derivative Works of,
|
|
||||||
publicly display, publicly perform, sublicense, and distribute the
|
|
||||||
Work and such Derivative Works in Source or Object form.
|
|
||||||
|
|
||||||
3. Grant of Patent License. Subject to the terms and conditions of
|
|
||||||
this License, each Contributor hereby grants to You a perpetual,
|
|
||||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
|
||||||
(except as stated in this section) patent license to make, have made,
|
|
||||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
|
||||||
where such license applies only to those patent claims licensable
|
|
||||||
by such Contributor that are necessarily infringed by their
|
|
||||||
Contribution(s) alone or by combination of their Contribution(s)
|
|
||||||
with the Work to which such Contribution(s) was submitted. If You
|
|
||||||
institute patent litigation against any entity (including a
|
|
||||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
|
||||||
or a Contribution incorporated within the Work constitutes direct
|
|
||||||
or contributory patent infringement, then any patent licenses
|
|
||||||
granted to You under this License for that Work shall terminate
|
|
||||||
as of the date such litigation is filed.
|
|
||||||
|
|
||||||
4. Redistribution. You may reproduce and distribute copies of the
|
|
||||||
Work or Derivative Works thereof in any medium, with or without
|
|
||||||
modifications, and in Source or Object form, provided that You
|
|
||||||
meet the following conditions:
|
|
||||||
|
|
||||||
(a) You must give any other recipients of the Work or
|
|
||||||
Derivative Works a copy of this License; and
|
|
||||||
|
|
||||||
(b) You must cause any modified files to carry prominent notices
|
|
||||||
stating that You changed the files; and
|
|
||||||
|
|
||||||
(c) You must retain, in the Source form of any Derivative Works
|
|
||||||
that You distribute, all copyright, patent, trademark, and
|
|
||||||
attribution notices from the Source form of the Work,
|
|
||||||
excluding those notices that do not pertain to any part of
|
|
||||||
the Derivative Works; and
|
|
||||||
|
|
||||||
(d) If the Work includes a "NOTICE" text file as part of its
|
|
||||||
distribution, then any Derivative Works that You distribute must
|
|
||||||
include a readable copy of the attribution notices contained
|
|
||||||
within such NOTICE file, excluding those notices that do not
|
|
||||||
pertain to any part of the Derivative Works, in at least one
|
|
||||||
of the following places: within a NOTICE text file distributed
|
|
||||||
as part of the Derivative Works; within the Source form or
|
|
||||||
documentation, if provided along with the Derivative Works; or,
|
|
||||||
within a display generated by the Derivative Works, if and
|
|
||||||
wherever such third-party notices normally appear. The contents
|
|
||||||
of the NOTICE file are for informational purposes only and
|
|
||||||
do not modify the License. You may add Your own attribution
|
|
||||||
notices within Derivative Works that You distribute, alongside
|
|
||||||
or as an addendum to the NOTICE text from the Work, provided
|
|
||||||
that such additional attribution notices cannot be construed
|
|
||||||
as modifying the License.
|
|
||||||
|
|
||||||
You may add Your own copyright statement to Your modifications and
|
|
||||||
may provide additional or different license terms and conditions
|
|
||||||
for use, reproduction, or distribution of Your modifications, or
|
|
||||||
for any such Derivative Works as a whole, provided Your use,
|
|
||||||
reproduction, and distribution of the Work otherwise complies with
|
|
||||||
the conditions stated in this License.
|
|
||||||
|
|
||||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
|
||||||
any Contribution intentionally submitted for inclusion in the Work
|
|
||||||
by You to the Licensor shall be under the terms and conditions of
|
|
||||||
this License, without any additional terms or conditions.
|
|
||||||
Notwithstanding the above, nothing herein shall supersede or modify
|
|
||||||
the terms of any separate license agreement you may have executed
|
|
||||||
with Licensor regarding such Contributions.
|
|
||||||
|
|
||||||
6. Trademarks. This License does not grant permission to use the trade
|
|
||||||
names, trademarks, service marks, or product names of the Licensor,
|
|
||||||
except as required for reasonable and customary use in describing the
|
|
||||||
origin of the Work and reproducing the content of the NOTICE file.
|
|
||||||
|
|
||||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
|
||||||
agreed to in writing, Licensor provides the Work (and each
|
|
||||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
|
||||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
|
||||||
implied, including, without limitation, any warranties or conditions
|
|
||||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
|
||||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
|
||||||
appropriateness of using or redistributing the Work and assume any
|
|
||||||
risks associated with Your exercise of permissions under this License.
|
|
||||||
|
|
||||||
8. Limitation of Liability. In no event and under no legal theory,
|
|
||||||
whether in tort (including negligence), contract, or otherwise,
|
|
||||||
unless required by applicable law (such as deliberate and grossly
|
|
||||||
negligent acts) or agreed to in writing, shall any Contributor be
|
|
||||||
liable to You for damages, including any direct, indirect, special,
|
|
||||||
incidental, or consequential damages of any character arising as a
|
|
||||||
result of this License or out of the use or inability to use the
|
|
||||||
Work (including but not limited to damages for loss of goodwill,
|
|
||||||
work stoppage, computer failure or malfunction, or any and all
|
|
||||||
other commercial damages or losses), even if such Contributor
|
|
||||||
has been advised of the possibility of such damages.
|
|
||||||
|
|
||||||
9. Accepting Warranty or Additional Liability. While redistributing
|
|
||||||
the Work or Derivative Works thereof, You may choose to offer,
|
|
||||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
|
||||||
or other liability obligations and/or rights consistent with this
|
|
||||||
License. However, in accepting such obligations, You may act only
|
|
||||||
on Your own behalf and on Your sole responsibility, not on behalf
|
|
||||||
of any other Contributor, and only if You agree to indemnify,
|
|
||||||
defend, and hold each Contributor harmless for any liability
|
|
||||||
incurred by, or claims asserted against, such Contributor by reason
|
|
||||||
of your accepting any such warranty or additional liability.
|
|
||||||
|
|
||||||
END OF TERMS AND CONDITIONS
|
|
||||||
|
|
||||||
APPENDIX: How to apply the Apache License to your work.
|
|
||||||
|
|
||||||
To apply the Apache License to your work, attach the following
|
|
||||||
boilerplate notice, with the fields enclosed by brackets "[]"
|
|
||||||
replaced with your own identifying information. (Don't include
|
|
||||||
the brackets!) The text should be enclosed in the appropriate
|
|
||||||
comment syntax for the file format. We also recommend that a
|
|
||||||
file or class name and description of purpose be included on the
|
|
||||||
same "printed page" as the copyright notice for easier
|
|
||||||
identification within third-party archives.
|
|
||||||
|
|
||||||
Copyright [yyyy] [name of copyright owner]
|
|
||||||
|
|
||||||
Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
you may not use this file except in compliance with the License.
|
|
||||||
You may obtain a copy of the License at
|
|
||||||
|
|
||||||
http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
|
|
||||||
Unless required by applicable law or agreed to in writing, software
|
|
||||||
distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
See the License for the specific language governing permissions and
|
|
||||||
limitations under the License.
|
|
||||||
@ -1,96 +0,0 @@
|
|||||||
|
|
||||||
# LoLLMs Playground
|
|
||||||
|
|
||||||
<div align="center">
|
|
||||||
<img src="https://github.com/ParisNeo/lollms/blob/main/lollms/assets/logo.png" alt="Logo" width="200" height="200">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
[](https://discord.gg/4rR282WJb6)
|
|
||||||
[](https://twitter.com/SpaceNerduino)
|
|
||||||
[](https://www.youtube.com/user/Parisneo)
|
|
||||||
[](https://github.com/ParisNeo/lollms-playground/actions/workflows/pages/pages-build-deployment)
|
|
||||||
|
|
||||||
|
|
||||||
This tool provides a web-based interface to test LoLLMs endpoints and generate text using a LoLLMs server.
|
|
||||||
|
|
||||||
## Prerequisites
|
|
||||||
|
|
||||||
To use this tool, you need to have [Node.js](https://nodejs.org) installed on your machine.
|
|
||||||
|
|
||||||
## Installation
|
|
||||||
|
|
||||||
1. Clone this repository or download the source code.
|
|
||||||
|
|
||||||
```bash
|
|
||||||
git clone https://github.com/ParisNeo/lollms-playground.git
|
|
||||||
```
|
|
||||||
|
|
||||||
2. Install the dependencies.
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm install -g http-server
|
|
||||||
```
|
|
||||||
|
|
||||||
Now you are ready for some action.
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
1. Start the LoLLMs server. You can use `lollms-server` to run the server with the desired configuration. Here are a few examples:
|
|
||||||
|
|
||||||
- To run the server on `localhost` and port `9600`:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
lollms-server --host localhost --port 9600
|
|
||||||
```
|
|
||||||
|
|
||||||
- To run the server on a different host and port:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
lollms-server --host mydomain.com --port 8080
|
|
||||||
```
|
|
||||||
|
|
||||||
- For more information on the available options, you can use the `--help` flag:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
lollms-server --help
|
|
||||||
```
|
|
||||||
|
|
||||||
2. Start the web server for the LoLLMs Playground.
|
|
||||||
|
|
||||||
```bash
|
|
||||||
http-server
|
|
||||||
```
|
|
||||||
|
|
||||||
3. Open your web browser and visit `http://localhost:8081` (or the appropriate URL) to access the LoLLMs Playground.
|
|
||||||
|
|
||||||
4. Press the icon to get to the connection ui.
|
|
||||||
|
|
||||||
|
|
||||||
4. Fill in the host and port fields with the appropriate values for your LoLLMs server.
|
|
||||||
|
|
||||||
5. Click the "Connect" button to establish a connection with the LoLLMs server.
|
|
||||||
|
|
||||||
|
|
||||||
6. Once connected, you can enter a prompt and click the "Generate Text" button to initiate text generation.
|
|
||||||
|
|
||||||
|
|
||||||
7. The generated text will be displayed in the output section of the page.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Customization
|
|
||||||
|
|
||||||
You can customize the appearance and behavior of the tool by modifying the HTML, CSS, and JavaScript code in the `lollms_playground.html` file.
|
|
||||||
|
|
||||||
## Contributing
|
|
||||||
|
|
||||||
Contributions are welcome! If you find any issues or want to add new features, feel free to open an issue or submit a pull request.
|
|
||||||
|
|
||||||
## License
|
|
||||||
|
|
||||||
This project is licensed under the [Apache 2.0](LICENSE).
|
|
||||||
```
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
|
||||||
<title>Logo Page</title>
|
|
||||||
<style>
|
|
||||||
html, body {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<a href="lollms_playground.html">
|
|
||||||
<img src="logo.png" alt="Logo" class="cursor-pointer">
|
|
||||||
</a>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 459 KiB |
@ -1,388 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>LoLLMs Endpoint Test</title>
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.6.4/nouislider.min.css" />
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.6.4/nouislider.min.js"></script>
|
|
||||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
|
||||||
<style>
|
|
||||||
.hover\:bg-blue-600:hover {
|
|
||||||
background-color: #2563eb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active\:bg-blue-700:active {
|
|
||||||
background-color: #1d4ed8;
|
|
||||||
}
|
|
||||||
/* Custom slider handle style */
|
|
||||||
.noUi-handle {
|
|
||||||
background-color: #2563eb;
|
|
||||||
border-color: #1d4ed8;
|
|
||||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.15);
|
|
||||||
width: 5px;
|
|
||||||
height: 5px;
|
|
||||||
border-radius: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Custom slider track style */
|
|
||||||
.noUi-connect {
|
|
||||||
background-color: #2563eb;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Custom slider tooltip style */
|
|
||||||
.slider-value {
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: 10px;
|
|
||||||
color: #6b7280;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Shrink the button size */
|
|
||||||
.small-button {
|
|
||||||
padding: 0.5rem 0.75rem;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body class="bg-gray-100 w-full">
|
|
||||||
<div class="flex items-center justify-center min-h-screen w-full">
|
|
||||||
<div class="w-full bg-blue-300 p-6 rounded shadow m-4">
|
|
||||||
<h1 class="text-2xl font-bold mb-4"><img src="logo.png" alt="Logo" class="w-10 h-10 mr-2">LoLLMs Playground</h1>
|
|
||||||
<div id="connection-section">
|
|
||||||
<div class="mb-4">
|
|
||||||
<label for="host" class="block text-sm font-medium text-gray-700">Host:</label>
|
|
||||||
<input id="host" type="text" class="mt-1 p-2 border border-gray-300 rounded-md w-full"
|
|
||||||
value="localhost" />
|
|
||||||
</div>
|
|
||||||
<div class="mb-4">
|
|
||||||
<label for="port" class="block text-sm font-medium text-gray-700">Port:</label>
|
|
||||||
<input id="port" type="number" class="mt-1 p-2 border border-gray-300 rounded-md w-full" value="9601" />
|
|
||||||
</div>
|
|
||||||
<button id="connect-btn"
|
|
||||||
class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white font-bold py-2 px-4 rounded">Connect</button>
|
|
||||||
<label class="hidden" id = "connecting">connecting ...</label>
|
|
||||||
</div>
|
|
||||||
<div id="generation-section" class="w-full hidden">
|
|
||||||
<div>
|
|
||||||
<button id="generate-btn" class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white font-bold py-2 px-4 rounded">Generate Text</button>
|
|
||||||
<button id="stop-btn" class="bg-red-500 hover:bg-red-600 active:bg-red-700 text-white font-bold py-2 px-4 rounded hidden">Stop Generation</button>
|
|
||||||
<button id="export-btn" class="bg-green-500 hover:bg-green-600 active:bg-green-700 text-white font-bold py-2 px-4 rounded">Export Text</button>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-row">
|
|
||||||
<div class="flex-grow">
|
|
||||||
<div class="flex-grow">
|
|
||||||
<div>
|
|
||||||
<textarea id="text" class="mt-4 p-2 border border-gray-300 rounded-md h-64 overflow-y-scroll w-full" type="text"></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="settings" class="w-32 ml-4">
|
|
||||||
<div class="mb-4">
|
|
||||||
<label for="temperature" class="block text-sm font-medium text-gray-700">Temperature:<span id="temperature-value" class="slider-value">1</span></label>
|
|
||||||
<div id="temperature-slider" class="mt-1 slider"></div>
|
|
||||||
</div>
|
|
||||||
<div class="mb-4">
|
|
||||||
<label for="top-k" class="block text-sm font-medium text-gray-700">Top K:<span id="top-k-value" class="slider-value">1</span></label>
|
|
||||||
<div id="top-k-slider" class="mt-1"></div>
|
|
||||||
</div>
|
|
||||||
<div class="mb-4">
|
|
||||||
<label for="top-p" class="block text-sm font-medium text-gray-700">Top P:<span id="top-p-value" class="slider-value">1</span></label>
|
|
||||||
<div id="top-p-slider" class="mt-1"></div>
|
|
||||||
</div>
|
|
||||||
<div class="mb-4">
|
|
||||||
<label for="repeat-penalty" class="block text-sm font-medium text-gray-700">Repeat Penalty:<span id="repeat-penalty-value" class="slider-value">1</span></label>
|
|
||||||
<div id="repeat-penalty-slider" class="mt-1"></div>
|
|
||||||
</div>
|
|
||||||
<div class="mb-4">
|
|
||||||
<label for="repeat-last-n" class="block text-sm font-medium text-gray-700">Repeat Last N:<span id="repeat-last-n-value" class="slider-value">1</span></label>
|
|
||||||
<div id="repeat-last-n-slider" class="mt-1"></div>
|
|
||||||
</div>
|
|
||||||
<div class="mb-4">
|
|
||||||
<label for="repeat-last-n" class="block text-sm font-medium text-gray-700">Repeat Last N:<span id="repeat-last-n-value" class="slider-value">1</span></label>
|
|
||||||
<input id="seed" class="mt-1 w-full" value="-1">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="https://cdn.socket.io/4.4.1/socket.io.min.js"></script>
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
|
||||||
let temperatureValue = 1;
|
|
||||||
let topKValue = 50;
|
|
||||||
let topPValue = 0.5;
|
|
||||||
let repeatPenaltyValue = 1.6;
|
|
||||||
let repeatLastNValue = 30;
|
|
||||||
let seedValue = -1;
|
|
||||||
// Initialize sliders
|
|
||||||
const temperatureSlider = document.getElementById('temperature-slider');
|
|
||||||
const topKSlider = document.getElementById('top-k-slider');
|
|
||||||
const topPSlider = document.getElementById('top-p-slider');
|
|
||||||
const repeatPenaltySlider = document.getElementById('repeat-penalty-slider');
|
|
||||||
const repeatLastNSlider = document.getElementById('repeat-last-n-slider');
|
|
||||||
|
|
||||||
const temperatureValue_ui = document.getElementById('temperature-value');
|
|
||||||
const topKValue_ui = document.getElementById('top-k-value');
|
|
||||||
const topPValue_ui = document.getElementById('top-p-value');
|
|
||||||
const repeatPenaltyValue_ui = document.getElementById('repeat-penalty-value');
|
|
||||||
const repeatLastNValue_ui = document.getElementById('repeat-last-n-value');
|
|
||||||
|
|
||||||
temperatureValue_ui.innerText = temperatureValue
|
|
||||||
topKValue_ui.innerText = topKValue
|
|
||||||
topPValue_ui.innerText = topPValue
|
|
||||||
repeatPenaltyValue_ui.innerText = repeatPenaltyValue
|
|
||||||
repeatLastNValue_ui.innerText = repeatLastNValue
|
|
||||||
|
|
||||||
|
|
||||||
noUiSlider.create(temperatureSlider, {
|
|
||||||
start: 1,
|
|
||||||
step: 0.1,
|
|
||||||
range: {
|
|
||||||
min: 0.1,
|
|
||||||
max: 5
|
|
||||||
},
|
|
||||||
format: {
|
|
||||||
to: value => parseFloat(value.toFixed(1)),
|
|
||||||
from: value => parseFloat(value)
|
|
||||||
},
|
|
||||||
value:temperatureValue
|
|
||||||
});
|
|
||||||
|
|
||||||
noUiSlider.create(topKSlider, {
|
|
||||||
start: 50,
|
|
||||||
step: 1,
|
|
||||||
range: {
|
|
||||||
min: 1,
|
|
||||||
max: 300
|
|
||||||
},
|
|
||||||
format: {
|
|
||||||
to: value => Math.round(value),
|
|
||||||
from: value => parseFloat(value)
|
|
||||||
},
|
|
||||||
value:topKValue
|
|
||||||
});
|
|
||||||
|
|
||||||
noUiSlider.create(topPSlider, {
|
|
||||||
start: 0.5,
|
|
||||||
step: 0.01,
|
|
||||||
range: {
|
|
||||||
min: 0,
|
|
||||||
max: 1
|
|
||||||
},
|
|
||||||
format: {
|
|
||||||
to: value => parseFloat(value.toFixed(2)),
|
|
||||||
from: value => parseFloat(value)
|
|
||||||
},
|
|
||||||
value:topPValue
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
noUiSlider.create(repeatPenaltySlider, {
|
|
||||||
start: 1.5,
|
|
||||||
step: 0.1,
|
|
||||||
range: {
|
|
||||||
min: 0.3,
|
|
||||||
max: 10.0
|
|
||||||
},
|
|
||||||
format: {
|
|
||||||
to: value => parseFloat(value.toFixed(1)),
|
|
||||||
from: value => parseFloat(value)
|
|
||||||
},
|
|
||||||
value:repeatPenaltyValue
|
|
||||||
});
|
|
||||||
|
|
||||||
noUiSlider.create(repeatLastNSlider, {
|
|
||||||
start: 10,
|
|
||||||
step: 1,
|
|
||||||
range: {
|
|
||||||
min: 1,
|
|
||||||
max: 100
|
|
||||||
},
|
|
||||||
format: {
|
|
||||||
to: value => Math.round(value),
|
|
||||||
from: value => parseFloat(value)
|
|
||||||
},
|
|
||||||
value:repeatLastNValue
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
// Event handler for temperature slider value change
|
|
||||||
temperatureSlider.noUiSlider.on('change', (values, handle) => {
|
|
||||||
temperatureValue = parseFloat(values[handle]);
|
|
||||||
temperatureValue_ui.innerText = temperatureValue
|
|
||||||
// Update the temperature value in your code or send it to the server
|
|
||||||
console.log('Temperature:', temperatureValue);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Event handler for top-k slider value change
|
|
||||||
topKSlider.noUiSlider.on('change', (values, handle) => {
|
|
||||||
topKValue = Math.round(values[handle]);
|
|
||||||
topKValue_ui.innerText = topKValue
|
|
||||||
// Update the top-k value in your code or send it to the server
|
|
||||||
console.log('Top K:', topKValue);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Event handler for top-p slider value change
|
|
||||||
topPSlider.noUiSlider.on('change', (values, handle) => {
|
|
||||||
topPValue = parseFloat(values[handle]);
|
|
||||||
topPValue_ui.innerText = topPValue
|
|
||||||
// Update the top-p value in your code or send it to the server
|
|
||||||
console.log('Top P:', topPValue);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
// Event handler for repeat penalty slider value change
|
|
||||||
repeatPenaltySlider.noUiSlider.on('change', (values, handle) => {
|
|
||||||
repeatPenaltyValue = parseFloat(values[handle]);
|
|
||||||
repeatPenaltyValue_ui.innerText = repeatPenaltyValue
|
|
||||||
console.log('Repeat Penalty:', repeatPenaltyValue);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Event handler for repeat last N slider value change
|
|
||||||
repeatLastNSlider.noUiSlider.on('change', (values, handle) => {
|
|
||||||
repeatLastNValue = Math.round(values[handle]);
|
|
||||||
repeatLastNValue_ui.innerText = repeatLastNValue
|
|
||||||
console.log('Repeat Last N:', repeatLastNValue);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
const socket = io();
|
|
||||||
const connectButton = document.getElementById('connect-btn');
|
|
||||||
const generateButton = document.getElementById('generate-btn');
|
|
||||||
const stopButton = document.getElementById('stop-btn');
|
|
||||||
const connectionSection = document.getElementById('connection-section');
|
|
||||||
const generationSection = document.getElementById('generation-section');
|
|
||||||
const connectingText = document.getElementById('connecting');
|
|
||||||
|
|
||||||
// Append the received chunks to the text div
|
|
||||||
function appendToOutput(chunk) {
|
|
||||||
const outputDiv = document.getElementById('text');
|
|
||||||
outputDiv.value += chunk;
|
|
||||||
outputDiv.scrollTop = outputDiv.scrollHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Event handler for receiving generated text chunks
|
|
||||||
socket.on('text_chunk', data => {
|
|
||||||
console.log('Received chunk:', data.chunk);
|
|
||||||
appendToOutput(data.chunk);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Event handler for receiving generated text chunks
|
|
||||||
socket.on('text_generated', data => {
|
|
||||||
console.log('text generated:', data.text);
|
|
||||||
// Toggle button visibility
|
|
||||||
generateButton.classList.remove('hidden');
|
|
||||||
stopButton.classList.add('hidden');
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on('generation_error', data => {
|
|
||||||
console.log('generation_error:', data);
|
|
||||||
// Toggle button visibility
|
|
||||||
generateButton.classList.remove('hidden');
|
|
||||||
stopButton.classList.add('hidden');
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Event handler for successful connection
|
|
||||||
socket.on('connect', () => {
|
|
||||||
console.log('Connected to LoLLMs server');
|
|
||||||
connectButton.disabled = true;
|
|
||||||
connectingText.classList.add("hidden")
|
|
||||||
connectionSection.classList.add('hidden');
|
|
||||||
generationSection.classList.remove('hidden');
|
|
||||||
});
|
|
||||||
|
|
||||||
// Event handler for error during text generation
|
|
||||||
socket.on('buzzy', error => {
|
|
||||||
console.error('Server is busy. Wait for your turn', error);
|
|
||||||
const outputDiv = document.getElementById('text');
|
|
||||||
outputDiv.value += `<p class="text-red-500">Error: ${error.message}</p>`;
|
|
||||||
outputDiv.scrollTop = outputDiv.scrollHeight;
|
|
||||||
// Toggle button visibility
|
|
||||||
generateButton.classList.remove('hidden');
|
|
||||||
stopButton.classList.add('hidden');
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
// Event handler for error during text generation
|
|
||||||
socket.on('generation_canceled', error => {
|
|
||||||
// Toggle button visibility
|
|
||||||
generateButton.classList.remove('hidden');
|
|
||||||
stopButton.classList.add('hidden');
|
|
||||||
console.log("Generation canceled OK")
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Triggered when the "Connect" button is clicked
|
|
||||||
connectButton.addEventListener('click', () => {
|
|
||||||
const hostInput = document.getElementById('host');
|
|
||||||
const portInput = document.getElementById('port');
|
|
||||||
const host = hostInput.value.trim();
|
|
||||||
const port = parseInt(portInput.value);
|
|
||||||
|
|
||||||
if (host && port) {
|
|
||||||
socket.io.uri = `http://${host}:${port}`;
|
|
||||||
socket.connect();
|
|
||||||
connectingText.classList.remove("hidden")
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Triggered when the "Generate Text" button is clicked
|
|
||||||
generateButton.addEventListener('click', () => {
|
|
||||||
const outputDiv = document.getElementById('text');
|
|
||||||
var prompt = outputDiv.value
|
|
||||||
console.log(prompt)
|
|
||||||
// Trigger the 'generate_text' event with the prompt
|
|
||||||
socket.emit('generate_text', { prompt, personality: -1, n_predicts: 1024 ,
|
|
||||||
parameters: {
|
|
||||||
temperature: temperatureValue,
|
|
||||||
top_k: topKValue,
|
|
||||||
top_p: topPValue,
|
|
||||||
repeat_penalty: repeatPenaltyValue, // Update with desired repeat penalty value
|
|
||||||
repeat_last_n: repeatLastNValue, // Update with desired repeat_last_n value
|
|
||||||
seed: parseInt(seedValue)
|
|
||||||
}});
|
|
||||||
|
|
||||||
// Toggle button visibility
|
|
||||||
generateButton.classList.add('hidden');
|
|
||||||
stopButton.classList.remove('hidden');
|
|
||||||
});
|
|
||||||
|
|
||||||
// Triggered when the "Stop Generation" button is clicked
|
|
||||||
stopButton.addEventListener('click', () => {
|
|
||||||
// Trigger the 'cancel_generation' event
|
|
||||||
socket.emit('cancel_generation',{});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
// Function to export text as a text file
|
|
||||||
function exportTextToFile() {
|
|
||||||
const outputDiv = document.getElementById('text');
|
|
||||||
const textToExport = outputDiv.value;
|
|
||||||
const element = document.createElement('a');
|
|
||||||
const file = new Blob([textToExport], {type: 'text/plain'});
|
|
||||||
element.href = URL.createObjectURL(file);
|
|
||||||
element.download = 'exported_text.txt';
|
|
||||||
document.body.appendChild(element);
|
|
||||||
element.click();
|
|
||||||
document.body.removeChild(element);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Triggered when the "Export Text" button is clicked
|
|
||||||
const exportButton = document.getElementById('export-btn');
|
|
||||||
exportButton.addEventListener('click', exportTextToFile);
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
{
|
|
||||||
"dependencies": {
|
|
||||||
"http-server": "^14.1.1"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,101 +0,0 @@
|
|||||||
from flask import Flask, send_from_directory, request, jsonify
|
|
||||||
from lollms.helpers import get_trace_exception
|
|
||||||
import json
|
|
||||||
import shutil
|
|
||||||
import os
|
|
||||||
|
|
||||||
app = Flask(__name__, static_folder='dist/')
|
|
||||||
|
|
||||||
@app.route('/')
|
|
||||||
def index():
|
|
||||||
return app.send_static_file('index.html')
|
|
||||||
|
|
||||||
@app.route('/<path:filename>')
|
|
||||||
def serve_file(filename):
|
|
||||||
root_dir = "dist/"
|
|
||||||
return send_from_directory(root_dir, filename)
|
|
||||||
|
|
||||||
@app.route("/save_preset", methods=["POST"])
|
|
||||||
def save_preset():
|
|
||||||
"""Saves a preset to a file.
|
|
||||||
|
|
||||||
Args:
|
|
||||||
None.
|
|
||||||
|
|
||||||
Returns:
|
|
||||||
None.
|
|
||||||
"""
|
|
||||||
|
|
||||||
# Get the JSON data from the POST request.
|
|
||||||
preset_data = request.get_json()
|
|
||||||
|
|
||||||
# Save the JSON data to a file.
|
|
||||||
with open("presets.json", "w") as f:
|
|
||||||
json.dump(preset_data, f)
|
|
||||||
|
|
||||||
return "Preset saved successfully!"
|
|
||||||
|
|
||||||
@app.route("/execute_python_code", methods=["POST"])
|
|
||||||
def execute_python_code():
|
|
||||||
"""Executes Python code and returns the output."""
|
|
||||||
data = request.get_json()
|
|
||||||
code = data["code"]
|
|
||||||
# Import the necessary modules.
|
|
||||||
import io
|
|
||||||
import sys
|
|
||||||
import time
|
|
||||||
|
|
||||||
# Create a Python interpreter.
|
|
||||||
interpreter = io.StringIO()
|
|
||||||
sys.stdout = interpreter
|
|
||||||
|
|
||||||
# Execute the code.
|
|
||||||
start_time = time.time()
|
|
||||||
try:
|
|
||||||
exec(code)
|
|
||||||
# Get the output.
|
|
||||||
output = interpreter.getvalue()
|
|
||||||
except Exception as ex:
|
|
||||||
output = str(ex)+"\n"+get_trace_exception(ex)
|
|
||||||
end_time = time.time()
|
|
||||||
|
|
||||||
return jsonify({"output":output,"execution_time":end_time - start_time})
|
|
||||||
|
|
||||||
|
|
||||||
@app.route("/get_presets", methods=["GET"])
|
|
||||||
def get_presets(self):
|
|
||||||
presets_file = self.lollms_paths.personal_databases_path/"presets.json"
|
|
||||||
if not presets_file.exists():
|
|
||||||
shutil.copy("presets/presets.json",presets_file)
|
|
||||||
with open(presets_file) as f:
|
|
||||||
data = json.loads(f.read())
|
|
||||||
return jsonify(data)
|
|
||||||
|
|
||||||
|
|
||||||
@app.route("/save_presets", methods=["POST"])
|
|
||||||
def save_presets(self):
|
|
||||||
"""Saves a preset to a file.
|
|
||||||
|
|
||||||
Args:
|
|
||||||
None.
|
|
||||||
|
|
||||||
Returns:
|
|
||||||
None.
|
|
||||||
"""
|
|
||||||
|
|
||||||
# Get the JSON data from the POST request.
|
|
||||||
preset_data = request.get_json()
|
|
||||||
|
|
||||||
presets_file = self.lollms_paths.personal_databases_path/"presets.json"
|
|
||||||
# Save the JSON data to a file.
|
|
||||||
with open(presets_file, "w") as f:
|
|
||||||
json.dump(preset_data, f, indent=4)
|
|
||||||
|
|
||||||
return "Preset saved successfully!"
|
|
||||||
|
|
||||||
|
|
||||||
def main():
|
|
||||||
app.run()
|
|
||||||
|
|
||||||
if __name__ == '__main__':
|
|
||||||
main()
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="flex flex-col h-screen font-sans bg-bg-light text-slate-950 dark:bg-bg-dark dark:text-slate-50">
|
|
||||||
<TopBar />
|
|
||||||
|
|
||||||
<div class="flex overflow-hidden flex-grow">
|
|
||||||
<!-- VIEW CONTAINER -->
|
|
||||||
<RouterView v-slot="{ Component }">
|
|
||||||
<KeepAlive>
|
|
||||||
<component :is="Component" />
|
|
||||||
</KeepAlive>
|
|
||||||
</RouterView>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- FOOTER -->
|
|
||||||
<!-- <Footer /> -->
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { RouterView } from 'vue-router'
|
|
||||||
import TopBar from './components/TopBar.vue'
|
|
||||||
</script>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 245 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 7.5 KiB |
@ -1,94 +0,0 @@
|
|||||||
Copyright (c) 2010, ParaType Ltd. (http://www.paratype.com/public),
|
|
||||||
with Reserved Font Names "PT Sans" and "ParaType".
|
|
||||||
|
|
||||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
|
||||||
This license is copied below, and is also available with a FAQ at:
|
|
||||||
http://scripts.sil.org/OFL
|
|
||||||
|
|
||||||
|
|
||||||
-----------------------------------------------------------
|
|
||||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
|
||||||
-----------------------------------------------------------
|
|
||||||
|
|
||||||
PREAMBLE
|
|
||||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
|
||||||
development of collaborative font projects, to support the font creation
|
|
||||||
efforts of academic and linguistic communities, and to provide a free and
|
|
||||||
open framework in which fonts may be shared and improved in partnership
|
|
||||||
with others.
|
|
||||||
|
|
||||||
The OFL allows the licensed fonts to be used, studied, modified and
|
|
||||||
redistributed freely as long as they are not sold by themselves. The
|
|
||||||
fonts, including any derivative works, can be bundled, embedded,
|
|
||||||
redistributed and/or sold with any software provided that any reserved
|
|
||||||
names are not used by derivative works. The fonts and derivatives,
|
|
||||||
however, cannot be released under any other type of license. The
|
|
||||||
requirement for fonts to remain under this license does not apply
|
|
||||||
to any document created using the fonts or their derivatives.
|
|
||||||
|
|
||||||
DEFINITIONS
|
|
||||||
"Font Software" refers to the set of files released by the Copyright
|
|
||||||
Holder(s) under this license and clearly marked as such. This may
|
|
||||||
include source files, build scripts and documentation.
|
|
||||||
|
|
||||||
"Reserved Font Name" refers to any names specified as such after the
|
|
||||||
copyright statement(s).
|
|
||||||
|
|
||||||
"Original Version" refers to the collection of Font Software components as
|
|
||||||
distributed by the Copyright Holder(s).
|
|
||||||
|
|
||||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
|
||||||
or substituting -- in part or in whole -- any of the components of the
|
|
||||||
Original Version, by changing formats or by porting the Font Software to a
|
|
||||||
new environment.
|
|
||||||
|
|
||||||
"Author" refers to any designer, engineer, programmer, technical
|
|
||||||
writer or other person who contributed to the Font Software.
|
|
||||||
|
|
||||||
PERMISSION & CONDITIONS
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining
|
|
||||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
|
||||||
redistribute, and sell modified and unmodified copies of the Font
|
|
||||||
Software, subject to the following conditions:
|
|
||||||
|
|
||||||
1) Neither the Font Software nor any of its individual components,
|
|
||||||
in Original or Modified Versions, may be sold by itself.
|
|
||||||
|
|
||||||
2) Original or Modified Versions of the Font Software may be bundled,
|
|
||||||
redistributed and/or sold with any software, provided that each copy
|
|
||||||
contains the above copyright notice and this license. These can be
|
|
||||||
included either as stand-alone text files, human-readable headers or
|
|
||||||
in the appropriate machine-readable metadata fields within text or
|
|
||||||
binary files as long as those fields can be easily viewed by the user.
|
|
||||||
|
|
||||||
3) No Modified Version of the Font Software may use the Reserved Font
|
|
||||||
Name(s) unless explicit written permission is granted by the corresponding
|
|
||||||
Copyright Holder. This restriction only applies to the primary font name as
|
|
||||||
presented to the users.
|
|
||||||
|
|
||||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
|
||||||
Software shall not be used to promote, endorse or advertise any
|
|
||||||
Modified Version, except to acknowledge the contribution(s) of the
|
|
||||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
|
||||||
permission.
|
|
||||||
|
|
||||||
5) The Font Software, modified or unmodified, in part or in whole,
|
|
||||||
must be distributed entirely under this license, and must not be
|
|
||||||
distributed under any other license. The requirement for fonts to
|
|
||||||
remain under this license does not apply to any document created
|
|
||||||
using the Font Software.
|
|
||||||
|
|
||||||
TERMINATION
|
|
||||||
This license becomes null and void if any of the above conditions are
|
|
||||||
not met.
|
|
||||||
|
|
||||||
DISCLAIMER
|
|
||||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
|
||||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
|
||||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
|
||||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
|
||||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
|
||||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
|
||||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
|
||||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
|
||||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,202 +0,0 @@
|
|||||||
|
|
||||||
Apache License
|
|
||||||
Version 2.0, January 2004
|
|
||||||
http://www.apache.org/licenses/
|
|
||||||
|
|
||||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
|
||||||
|
|
||||||
1. Definitions.
|
|
||||||
|
|
||||||
"License" shall mean the terms and conditions for use, reproduction,
|
|
||||||
and distribution as defined by Sections 1 through 9 of this document.
|
|
||||||
|
|
||||||
"Licensor" shall mean the copyright owner or entity authorized by
|
|
||||||
the copyright owner that is granting the License.
|
|
||||||
|
|
||||||
"Legal Entity" shall mean the union of the acting entity and all
|
|
||||||
other entities that control, are controlled by, or are under common
|
|
||||||
control with that entity. For the purposes of this definition,
|
|
||||||
"control" means (i) the power, direct or indirect, to cause the
|
|
||||||
direction or management of such entity, whether by contract or
|
|
||||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
|
||||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
|
||||||
|
|
||||||
"You" (or "Your") shall mean an individual or Legal Entity
|
|
||||||
exercising permissions granted by this License.
|
|
||||||
|
|
||||||
"Source" form shall mean the preferred form for making modifications,
|
|
||||||
including but not limited to software source code, documentation
|
|
||||||
source, and configuration files.
|
|
||||||
|
|
||||||
"Object" form shall mean any form resulting from mechanical
|
|
||||||
transformation or translation of a Source form, including but
|
|
||||||
not limited to compiled object code, generated documentation,
|
|
||||||
and conversions to other media types.
|
|
||||||
|
|
||||||
"Work" shall mean the work of authorship, whether in Source or
|
|
||||||
Object form, made available under the License, as indicated by a
|
|
||||||
copyright notice that is included in or attached to the work
|
|
||||||
(an example is provided in the Appendix below).
|
|
||||||
|
|
||||||
"Derivative Works" shall mean any work, whether in Source or Object
|
|
||||||
form, that is based on (or derived from) the Work and for which the
|
|
||||||
editorial revisions, annotations, elaborations, or other modifications
|
|
||||||
represent, as a whole, an original work of authorship. For the purposes
|
|
||||||
of this License, Derivative Works shall not include works that remain
|
|
||||||
separable from, or merely link (or bind by name) to the interfaces of,
|
|
||||||
the Work and Derivative Works thereof.
|
|
||||||
|
|
||||||
"Contribution" shall mean any work of authorship, including
|
|
||||||
the original version of the Work and any modifications or additions
|
|
||||||
to that Work or Derivative Works thereof, that is intentionally
|
|
||||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
|
||||||
or by an individual or Legal Entity authorized to submit on behalf of
|
|
||||||
the copyright owner. For the purposes of this definition, "submitted"
|
|
||||||
means any form of electronic, verbal, or written communication sent
|
|
||||||
to the Licensor or its representatives, including but not limited to
|
|
||||||
communication on electronic mailing lists, source code control systems,
|
|
||||||
and issue tracking systems that are managed by, or on behalf of, the
|
|
||||||
Licensor for the purpose of discussing and improving the Work, but
|
|
||||||
excluding communication that is conspicuously marked or otherwise
|
|
||||||
designated in writing by the copyright owner as "Not a Contribution."
|
|
||||||
|
|
||||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
|
||||||
on behalf of whom a Contribution has been received by Licensor and
|
|
||||||
subsequently incorporated within the Work.
|
|
||||||
|
|
||||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
|
||||||
this License, each Contributor hereby grants to You a perpetual,
|
|
||||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
|
||||||
copyright license to reproduce, prepare Derivative Works of,
|
|
||||||
publicly display, publicly perform, sublicense, and distribute the
|
|
||||||
Work and such Derivative Works in Source or Object form.
|
|
||||||
|
|
||||||
3. Grant of Patent License. Subject to the terms and conditions of
|
|
||||||
this License, each Contributor hereby grants to You a perpetual,
|
|
||||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
|
||||||
(except as stated in this section) patent license to make, have made,
|
|
||||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
|
||||||
where such license applies only to those patent claims licensable
|
|
||||||
by such Contributor that are necessarily infringed by their
|
|
||||||
Contribution(s) alone or by combination of their Contribution(s)
|
|
||||||
with the Work to which such Contribution(s) was submitted. If You
|
|
||||||
institute patent litigation against any entity (including a
|
|
||||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
|
||||||
or a Contribution incorporated within the Work constitutes direct
|
|
||||||
or contributory patent infringement, then any patent licenses
|
|
||||||
granted to You under this License for that Work shall terminate
|
|
||||||
as of the date such litigation is filed.
|
|
||||||
|
|
||||||
4. Redistribution. You may reproduce and distribute copies of the
|
|
||||||
Work or Derivative Works thereof in any medium, with or without
|
|
||||||
modifications, and in Source or Object form, provided that You
|
|
||||||
meet the following conditions:
|
|
||||||
|
|
||||||
(a) You must give any other recipients of the Work or
|
|
||||||
Derivative Works a copy of this License; and
|
|
||||||
|
|
||||||
(b) You must cause any modified files to carry prominent notices
|
|
||||||
stating that You changed the files; and
|
|
||||||
|
|
||||||
(c) You must retain, in the Source form of any Derivative Works
|
|
||||||
that You distribute, all copyright, patent, trademark, and
|
|
||||||
attribution notices from the Source form of the Work,
|
|
||||||
excluding those notices that do not pertain to any part of
|
|
||||||
the Derivative Works; and
|
|
||||||
|
|
||||||
(d) If the Work includes a "NOTICE" text file as part of its
|
|
||||||
distribution, then any Derivative Works that You distribute must
|
|
||||||
include a readable copy of the attribution notices contained
|
|
||||||
within such NOTICE file, excluding those notices that do not
|
|
||||||
pertain to any part of the Derivative Works, in at least one
|
|
||||||
of the following places: within a NOTICE text file distributed
|
|
||||||
as part of the Derivative Works; within the Source form or
|
|
||||||
documentation, if provided along with the Derivative Works; or,
|
|
||||||
within a display generated by the Derivative Works, if and
|
|
||||||
wherever such third-party notices normally appear. The contents
|
|
||||||
of the NOTICE file are for informational purposes only and
|
|
||||||
do not modify the License. You may add Your own attribution
|
|
||||||
notices within Derivative Works that You distribute, alongside
|
|
||||||
or as an addendum to the NOTICE text from the Work, provided
|
|
||||||
that such additional attribution notices cannot be construed
|
|
||||||
as modifying the License.
|
|
||||||
|
|
||||||
You may add Your own copyright statement to Your modifications and
|
|
||||||
may provide additional or different license terms and conditions
|
|
||||||
for use, reproduction, or distribution of Your modifications, or
|
|
||||||
for any such Derivative Works as a whole, provided Your use,
|
|
||||||
reproduction, and distribution of the Work otherwise complies with
|
|
||||||
the conditions stated in this License.
|
|
||||||
|
|
||||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
|
||||||
any Contribution intentionally submitted for inclusion in the Work
|
|
||||||
by You to the Licensor shall be under the terms and conditions of
|
|
||||||
this License, without any additional terms or conditions.
|
|
||||||
Notwithstanding the above, nothing herein shall supersede or modify
|
|
||||||
the terms of any separate license agreement you may have executed
|
|
||||||
with Licensor regarding such Contributions.
|
|
||||||
|
|
||||||
6. Trademarks. This License does not grant permission to use the trade
|
|
||||||
names, trademarks, service marks, or product names of the Licensor,
|
|
||||||
except as required for reasonable and customary use in describing the
|
|
||||||
origin of the Work and reproducing the content of the NOTICE file.
|
|
||||||
|
|
||||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
|
||||||
agreed to in writing, Licensor provides the Work (and each
|
|
||||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
|
||||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
|
||||||
implied, including, without limitation, any warranties or conditions
|
|
||||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
|
||||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
|
||||||
appropriateness of using or redistributing the Work and assume any
|
|
||||||
risks associated with Your exercise of permissions under this License.
|
|
||||||
|
|
||||||
8. Limitation of Liability. In no event and under no legal theory,
|
|
||||||
whether in tort (including negligence), contract, or otherwise,
|
|
||||||
unless required by applicable law (such as deliberate and grossly
|
|
||||||
negligent acts) or agreed to in writing, shall any Contributor be
|
|
||||||
liable to You for damages, including any direct, indirect, special,
|
|
||||||
incidental, or consequential damages of any character arising as a
|
|
||||||
result of this License or out of the use or inability to use the
|
|
||||||
Work (including but not limited to damages for loss of goodwill,
|
|
||||||
work stoppage, computer failure or malfunction, or any and all
|
|
||||||
other commercial damages or losses), even if such Contributor
|
|
||||||
has been advised of the possibility of such damages.
|
|
||||||
|
|
||||||
9. Accepting Warranty or Additional Liability. While redistributing
|
|
||||||
the Work or Derivative Works thereof, You may choose to offer,
|
|
||||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
|
||||||
or other liability obligations and/or rights consistent with this
|
|
||||||
License. However, in accepting such obligations, You may act only
|
|
||||||
on Your own behalf and on Your sole responsibility, not on behalf
|
|
||||||
of any other Contributor, and only if You agree to indemnify,
|
|
||||||
defend, and hold each Contributor harmless for any liability
|
|
||||||
incurred by, or claims asserted against, such Contributor by reason
|
|
||||||
of your accepting any such warranty or additional liability.
|
|
||||||
|
|
||||||
END OF TERMS AND CONDITIONS
|
|
||||||
|
|
||||||
APPENDIX: How to apply the Apache License to your work.
|
|
||||||
|
|
||||||
To apply the Apache License to your work, attach the following
|
|
||||||
boilerplate notice, with the fields enclosed by brackets "[]"
|
|
||||||
replaced with your own identifying information. (Don't include
|
|
||||||
the brackets!) The text should be enclosed in the appropriate
|
|
||||||
comment syntax for the file format. We also recommend that a
|
|
||||||
file or class name and description of purpose be included on the
|
|
||||||
same "printed page" as the copyright notice for easier
|
|
||||||
identification within third-party archives.
|
|
||||||
|
|
||||||
Copyright [yyyy] [name of copyright owner]
|
|
||||||
|
|
||||||
Licensed under the Apache License, Version 2.0 (the "License");
|
|
||||||
you may not use this file except in compliance with the License.
|
|
||||||
You may obtain a copy of the License at
|
|
||||||
|
|
||||||
http://www.apache.org/licenses/LICENSE-2.0
|
|
||||||
|
|
||||||
Unless required by applicable law or agreed to in writing, software
|
|
||||||
distributed under the License is distributed on an "AS IS" BASIS,
|
|
||||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
||||||
See the License for the specific language governing permissions and
|
|
||||||
limitations under the License.
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 459 KiB |
@ -1,66 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
||||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
|
||||||
|
|
||||||
<svg
|
|
||||||
width="154.55025mm"
|
|
||||||
height="160.5979mm"
|
|
||||||
viewBox="0 0 154.55025 160.5979"
|
|
||||||
version="1.1"
|
|
||||||
id="svg5"
|
|
||||||
xml:space="preserve"
|
|
||||||
inkscape:export-filename=".\bitmap.svg"
|
|
||||||
inkscape:export-xdpi="100"
|
|
||||||
inkscape:export-ydpi="100"
|
|
||||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
|
||||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
|
||||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
|
|
||||||
id="namedview7"
|
|
||||||
pagecolor="#505050"
|
|
||||||
bordercolor="#eeeeee"
|
|
||||||
borderopacity="1"
|
|
||||||
inkscape:showpageshadow="0"
|
|
||||||
inkscape:pageopacity="0"
|
|
||||||
inkscape:pagecheckerboard="0"
|
|
||||||
inkscape:deskcolor="#505050"
|
|
||||||
inkscape:document-units="mm"
|
|
||||||
showgrid="false"
|
|
||||||
inkscape:zoom="0.74564394"
|
|
||||||
inkscape:cx="34.198628"
|
|
||||||
inkscape:cy="502.92101"
|
|
||||||
inkscape:window-width="1920"
|
|
||||||
inkscape:window-height="1017"
|
|
||||||
inkscape:window-x="1912"
|
|
||||||
inkscape:window-y="-8"
|
|
||||||
inkscape:window-maximized="1"
|
|
||||||
inkscape:current-layer="layer1" /><defs
|
|
||||||
id="defs2" /><g
|
|
||||||
inkscape:label="Layer 1"
|
|
||||||
inkscape:groupmode="layer"
|
|
||||||
id="layer1"
|
|
||||||
transform="translate(-14.273257,-30.765575)"><g
|
|
||||||
id="g1477"
|
|
||||||
clip-path="none"><g
|
|
||||||
inkscape:label="Clip"
|
|
||||||
id="g1475"><path
|
|
||||||
style="fill:#87bcfc;fill-opacity:1;stroke-width:0.671958"
|
|
||||||
d="m 37.623501,174.81447 c 0.007,-0.32225 0.9351,-1.94664 2.06305,-3.60973 2.92939,-4.31919 6.3891,-11.85421 7.57755,-16.50344 2.42423,-9.48355 2.02669,-14.17374 -2.19558,-25.90381 -1.14539,-3.18206 -2.24968,-7.71777 -2.45398,-10.07937 -0.61281,-7.08403 -0.97277,-8.66153 -1.97638,-8.66153 -0.67782,0 -1.00077,1.08931 -1.14548,3.86375 -0.20152,3.86376 -0.20152,3.86376 -5.28154,4.05771 -4.28191,0.16349 -5.26053,-0.005 -6.2289,-1.07553 -1.49222,-1.64887 -2.13911,-9.75354 -1.48009,-18.543543 0.64593,-8.6156 1.2217,-9.267277 7.94617,-8.99395 4.84284,0.196846 4.84284,0.196846 5.04741,3.76685 0.16812,2.93382 0.40761,3.5311 1.34392,3.35169 0.90629,-0.17365 1.23876,-1.31385 1.62536,-5.57425 1.24545,-13.72509 7.49751,-23.935675 17.85868,-29.165978 7.67738,-3.875526 11.00315,-4.39997 28.02038,-4.418556 12.716999,-0.01389 16.228819,0.193446 19.822759,1.170322 16.87358,4.586448 26.18833,15.973048 28.57473,34.930522 0.57303,4.55212 2.19952,4.33072 2.46819,-0.33598 0.20311,-3.527774 0.20311,-3.527774 4.20685,-3.733474 8.58554,-0.441097 9.28817,0.786184 8.97745,15.680807 -0.26758,12.8269 -0.41714,13.0831 -7.63779,13.0831 -5.48007,0 -5.67938,-0.1788 -5.67938,-5.09464 0,-2.05145 -0.28167,-2.96885 -0.91153,-2.96885 -0.66502,0 -1.03312,1.61078 -1.36117,5.95641 -0.2473,3.27602 -1.07821,8.03852 -1.84646,10.58333 -1.98696,6.58176 -2.1676,9.33137 -0.98406,14.97906 1.33173,6.35492 4.06152,12.17114 7.95714,16.95391 3.07739,3.77821 3.07739,3.77821 -3.15487,1.23266 -19.69789,-8.04552 -35.55024,-11.0994 -48.752359,-9.39192 -15.89274,2.05546 -29.36908,8.40921 -51.13419,24.10845 -0.70296,0.50706 -1.27261,0.65825 -1.26588,0.33598 z m 62.589409,-42.21165 c 5.9799,-1.26742 11.98566,-4.13161 11.98566,-5.71604 0,-1.11368 -0.47322,-1.05196 -5.67146,0.7398 -13.171199,4.53992 -25.095489,3.99787 -38.845739,-1.76584 -0.82894,-0.34747 -1.17592,-0.18264 -1.17592,0.55859 0,1.82186 8.17302,5.69754 14.11111,6.69155 3.96761,0.66417 15.47301,0.36587 19.596349,-0.50806 z M 73.488971,110.38171 c 2.78812,-1.32306 4.43976,-4.1948 4.43976,-7.71954 0,-2.31037 -0.41245,-3.231794 -2.28466,-5.104003 -1.87295,-1.87295 -2.79323,-2.28465 -5.10688,-2.28465 -2.31364,0 -3.23393,0.4117 -5.10688,2.28465 -1.86415,1.864149 -2.28465,2.797883 -2.28465,5.073053 0,3.66807 1.43325,6.29901 4.16485,7.64522 2.76723,1.36377 3.50006,1.37625 6.17846,0.10527 z m 38.709599,-0.90103 c 3.95838,-2.90381 3.91035,-9.13382 -0.0964,-12.505283 -4.8764,-4.10322 -11.98946,-0.26215 -11.99632,6.478043 -0.003,2.6667 2.43096,6.24292 4.98237,7.32146 1.87608,0.79306 5.05342,0.21472 7.11036,-1.29422 z M 50.042481,59.323124 c -2.21746,-0.906755 -4.53378,-2.260293 -5.14739,-3.00786 -0.69217,-0.843283 -1.92333,-1.359213 -3.24349,-1.359213 -3.00243,0 -6.05621,-3.147095 -6.05621,-6.241289 0,-4.458365 3.9273,-7.195145 8.19179,-5.708538 2.75256,0.959548 4.11356,3.947531 3.57655,7.852057 -0.3891,2.829155 -0.24632,3.341284 1.3869,4.974505 1.00136,1.001362 2.83561,2.447931 4.0761,3.214597 2.21006,1.365893 2.75732,1.972171 1.75147,1.940339 -0.27718,-0.0088 -2.31826,-0.757841 -4.53572,-1.664598 z"
|
|
||||||
id="path227"
|
|
||||||
inkscape:export-filename="path227.svg"
|
|
||||||
inkscape:export-xdpi="100"
|
|
||||||
inkscape:export-ydpi="100" /></g></g><use
|
|
||||||
x="0"
|
|
||||||
y="0"
|
|
||||||
xlink:href="#g1475"
|
|
||||||
id="use1481" /><path
|
|
||||||
style="fill:#152f5b;fill-opacity:1;fill-rule:evenodd"
|
|
||||||
d="m 14.273257,111.06452 c 0,-80.298946 0,-80.298946 77.27513,-80.298946 77.275133,0 77.275133,0 77.275133,80.298946 0,80.29894 0,80.29894 -77.275133,80.29894 -77.27513,0 -77.27513,0 -77.27513,-80.29894 z m 35.379964,56.20584 c 15.342626,-10.36485 26.737224,-15.11376 40.550854,-16.90033 13.202125,-1.70748 29.054465,1.3464 48.752365,9.39193 6.23225,2.54554 6.23225,2.54554 3.15486,-1.23267 -3.89562,-4.78276 -6.6254,-10.59899 -7.95714,-16.9539 -1.18353,-5.64769 -1.0029,-8.3973 0.98406,-14.97906 0.76825,-2.54481 1.59916,-7.30731 1.84647,-10.58333 0.32804,-4.34563 0.69614,-5.95642 1.36117,-5.95642 0.62985,0 0.91152,0.91741 0.91152,2.96885 0,4.91585 0.19932,5.09464 5.67939,5.09464 7.22064,0 7.3702,-0.25619 7.63778,-13.08309 0.31072,-14.894621 -0.39191,-16.121904 -8.97745,-15.680807 -4.00374,0.2057 -4.00374,0.2057 -4.20685,3.733478 -0.26867,4.666692 -1.89516,4.888095 -2.46818,0.335978 -2.38641,-18.957476 -11.70116,-30.344076 -28.57474,-34.930524 -6.40613,-1.741265 -33.307084,-1.70484 -39.591771,0.05361 -15.774724,4.413749 -24.562386,15.305116 -26.110047,32.360608 -0.3866,4.260399 -0.719062,5.400597 -1.625358,5.574251 -0.93631,0.179405 -1.1758,-0.417877 -1.343915,-3.351696 -0.20457,-3.570003 -0.20457,-3.570003 -5.047407,-3.766849 -6.724479,-0.273327 -7.300242,0.378355 -7.946179,8.993948 -0.659013,8.789993 -0.01212,16.894663 1.48009,18.543543 0.968373,1.07004 1.946997,1.23902 6.2289,1.07553 5.080026,-0.19395 5.080026,-0.19395 5.281549,-4.05771 0.144707,-2.77445 0.467651,-3.86376 1.145477,-3.86376 1.003609,0 1.363564,1.57751 1.976382,8.66154 0.204295,2.36159 1.308583,6.89731 2.453973,10.07936 4.222278,11.73008 4.619815,16.42027 2.195588,25.90382 -1.188457,4.64923 -4.648163,12.18425 -7.57755,16.50343 -2.35708,3.47535 -2.62989,4.5957 -0.797174,3.27376 0.702962,-0.50705 5.465462,-3.75071 10.583333,-7.20813 z m 31.143844,-34.15948 c -5.938088,-0.99401 -14.111111,-4.8697 -14.111111,-6.69155 0,-0.74124 0.34698,-0.90606 1.175926,-0.55859 13.750249,5.76371 25.674534,6.30576 38.84574,1.76584 5.19823,-1.79176 5.67145,-1.85348 5.67145,-0.7398 0,1.58443 -6.00576,4.44861 -11.98565,5.71603 -4.123348,0.87394 -15.628748,1.17223 -19.596355,0.50807 z M 67.491019,110.27644 c -2.731605,-1.34621 -4.164853,-3.97716 -4.164853,-7.64522 0,-2.27517 0.420505,-3.208899 2.284656,-5.073051 1.872949,-1.872949 2.793236,-2.284656 5.106878,-2.284656 2.313642,0 3.233929,0.411707 5.106878,2.284656 1.872206,1.872209 2.284656,2.793631 2.284656,5.104001 0,3.52474 -1.651633,6.39648 -4.439753,7.71953 -2.678403,1.27099 -3.411237,1.25851 -6.178462,-0.10526 z m 37.777691,0.49846 c -2.55141,-1.07854 -4.98508,-4.65476 -4.98236,-7.32146 0.007,-6.740195 7.11992,-10.581263 11.99631,-6.478042 5.40485,4.547882 3.25353,12.954022 -3.59935,14.064202 -1.10873,0.17961 -2.6453,0.0605 -3.4146,-0.2647 z M 55.262674,60.722496 c 0,-0.154646 -1.014948,-0.908447 -2.25544,-1.675113 -1.240492,-0.766666 -3.074737,-2.213235 -4.076099,-3.214597 -1.63322,-1.633221 -1.776002,-2.14535 -1.386893,-4.974505 0.537009,-3.904526 -0.823996,-6.892509 -3.576557,-7.852057 -4.264486,-1.486607 -8.191783,1.250173 -8.191783,5.708538 0,3.094194 3.053771,6.241289 6.056209,6.241289 1.320156,0 2.551318,0.51593 3.243488,1.359213 1.355602,1.651555 10.187075,5.472314 10.187075,4.407232 z"
|
|
||||||
id="path179"
|
|
||||||
inkscape:export-filename="path2_.svg"
|
|
||||||
inkscape:export-xdpi="100"
|
|
||||||
inkscape:export-ydpi="100" /><path
|
|
||||||
style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke-width:1.34112"
|
|
||||||
d="m 197.8156,226.74124 c -8.25478,-3.04445 -23.55905,-11.18647 -25.55853,-13.59737 -2.44173,-2.94415 -9.51068,-5.94042 -14.01495,-5.94042 -6.05295,0 -13.96734,-5.11225 -18.26377,-11.79739 -3.5042,-5.45244 -3.97932,-7.27004 -3.50392,-13.40427 0.58394,-7.53471 3.23697,-12.24459 9.55387,-16.96083 5.23466,-3.90824 17.91215,-3.8769 23.19009,0.0573 7.34751,5.47688 9.15093,10.51741 9.15093,25.5767 0,11.70143 0.39678,14.18674 2.78346,17.43459 2.47061,3.36208 12.54051,11.64558 22.04538,18.13454 4.01238,2.73925 1.36076,2.98415 -5.38256,0.49713 z"
|
|
||||||
id="path1563"
|
|
||||||
transform="scale(0.26458333)" /></g></svg>
|
|
||||||
|
Before Width: | Height: | Size: 8.8 KiB |
@ -1,33 +0,0 @@
|
|||||||
@tailwind base;
|
|
||||||
@tailwind components;
|
|
||||||
@tailwind utilities;
|
|
||||||
|
|
||||||
@layer base {
|
|
||||||
html {
|
|
||||||
@apply scroll-smooth;
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Roboto';
|
|
||||||
src: url('./fonts/Roboto/Roboto-Regular.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'PTSans';
|
|
||||||
src: url('./fonts/PTSans/PTSans-Regular.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@layer utilities {
|
|
||||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
|
||||||
.no-scrollbar::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hide scrollbar for IE, Edge and Firefox */
|
|
||||||
.no-scrollbar {
|
|
||||||
-ms-overflow-style: none; /* IE and Edge */
|
|
||||||
scrollbar-width: none; /* Firefox */
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
.display-none {
|
|
||||||
@apply hidden;
|
|
||||||
}
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
<template>
|
|
||||||
<button type="button" class="btn">
|
|
||||||
<slot></slot>
|
|
||||||
</button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'Button',
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
@ -1,142 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div v-if="isActive" class="overlay" @click="toggleCard"></div>
|
|
||||||
<div v-show="shrink===false"
|
|
||||||
:class="[
|
|
||||||
'border-blue-300 rounded-lg shadow-lg p-2',
|
|
||||||
cardWidthClass,
|
|
||||||
'm-2',
|
|
||||||
{'bg-white dark:bg-gray-800': is_subcard},
|
|
||||||
{'bg-white dark:bg-gray-900': !is_subcard},
|
|
||||||
{ hovered: !disableHoverAnimation && isHovered, active: isActive }
|
|
||||||
]"
|
|
||||||
@mouseenter="isHovered = true"
|
|
||||||
@mouseleave="isHovered = false"
|
|
||||||
@click.self="toggleCard"
|
|
||||||
:style="{ cursor:!this.disableFocus ? 'pointer' : ''}"
|
|
||||||
>
|
|
||||||
<!-- Title -->
|
|
||||||
<div v-if="title" @click="shrink=true" :class="{'text-center p-2 m-2 bg-gray-200':!is_subcard}" class="bg-gray-100 dark:bg-gray-500 rounded-lg pl-2 pr-2 mb-2 font-bold cursor-pointer">{{ title }}</div>
|
|
||||||
|
|
||||||
<div v-if="isHorizontal" class="flex flex-wrap">
|
|
||||||
<!-- Card Content -->
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-else class="mb-2">
|
|
||||||
<!-- Card Content -->
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="is_subcard" v-show="shrink===true" @click="shrink=false" class="bg-white text-center text-xl bold dark:bg-gray-500 border-blue-300 rounded-lg shadow-lg p-2 h-10 cursor-pointer m-2">
|
|
||||||
{{ title }}
|
|
||||||
</div>
|
|
||||||
<div v-else v-show="shrink===true" @click="shrink=false" class="bg-white text-center text-2xl dark:bg-gray-500 border-2 border-blue-300 rounded-lg shadow-lg p-0 h-7 cursor-pointer hover:h-8 hover:bg-blue-300">
|
|
||||||
+
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
is_subcard:{
|
|
||||||
type:Boolean,
|
|
||||||
default:false
|
|
||||||
},
|
|
||||||
is_shrunk: {
|
|
||||||
type:Boolean,
|
|
||||||
default:false
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: "",
|
|
||||||
},
|
|
||||||
isHorizontal: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
cardWidth: {
|
|
||||||
type: String,
|
|
||||||
default: "w-3/4",
|
|
||||||
},
|
|
||||||
disableHoverAnimation: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
disableFocus: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
shrink: this.is_shrunk,
|
|
||||||
isHovered: false,
|
|
||||||
isActive: false,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
cardClass() {
|
|
||||||
return [
|
|
||||||
"bg-gray-50",
|
|
||||||
"border",
|
|
||||||
"border-gray-300",
|
|
||||||
"text-gray-900",
|
|
||||||
"text-sm",
|
|
||||||
"rounded-lg",
|
|
||||||
"focus:ring-blue-500",
|
|
||||||
"focus:border-blue-500",
|
|
||||||
|
|
||||||
"w-full",
|
|
||||||
"p-2.5",
|
|
||||||
"dark:bg-gray-500",
|
|
||||||
"dark:border-gray-600",
|
|
||||||
"dark:placeholder-gray-400",
|
|
||||||
"dark:text-white",
|
|
||||||
"dark:focus:ring-blue-500",
|
|
||||||
"dark:focus:border-blue-500",
|
|
||||||
{
|
|
||||||
"cursor-pointer": !this.isActive && !this.disableFocus,
|
|
||||||
"w-auto": !this.isActive,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
},
|
|
||||||
cardWidthClass() {
|
|
||||||
return this.isActive ? this.cardWidth : "";
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
toggleCard() {
|
|
||||||
if(!this.disableFocus){
|
|
||||||
this.isActive = !this.isActive;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
/* Add the animation for the hover effect */
|
|
||||||
.hovered {
|
|
||||||
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
||||||
transform: scale(1.1); /* You can adjust the scale value as per your preference */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Add the styles for centering the card when it's active */
|
|
||||||
.active {
|
|
||||||
position: fixed;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.overlay {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: rgba(0, 0, 0, 0.6); /* You can adjust the opacity as per your preference */
|
|
||||||
/* Make sure the overlay is above other elements */
|
|
||||||
pointer-events: all; /* Allow interactions with the overlay itself */
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,189 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="flex items-center space-x-2">
|
|
||||||
<!-- Render the slider if useSlider is true -->
|
|
||||||
<input
|
|
||||||
v-if="!useSlider"
|
|
||||||
:value="inputValue"
|
|
||||||
:type="inputType"
|
|
||||||
:placeholder="placeholderText"
|
|
||||||
@input="handleInput"
|
|
||||||
@paste="handlePaste"
|
|
||||||
class="flex-1 px-4 py-2 text-lg dark:bg-gray-600 border border-gray-300 rounded-md focus:outline-none focus:ring focus:border-blue-500"
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
v-else
|
|
||||||
type="range"
|
|
||||||
:value="parseInt(inputValue)"
|
|
||||||
:min="minSliderValue"
|
|
||||||
:max="maxSliderValue"
|
|
||||||
@input="handleSliderInput"
|
|
||||||
class="flex-1 px-4 py-2 text-lg border dark:bg-gray-600 border-gray-300 rounded-md focus:outline-none focus:ring focus:border-blue-500"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
@click="pasteFromClipboard"
|
|
||||||
class="p-2 bg-blue-500 dark:bg-gray-600 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring focus:border-blue-300"
|
|
||||||
>
|
|
||||||
<i data-feather="clipboard"></i>
|
|
||||||
</button>
|
|
||||||
<!-- File type button -->
|
|
||||||
<button
|
|
||||||
v-if="inputType === 'file'"
|
|
||||||
@click="openFileInput"
|
|
||||||
class="p-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring focus:border-blue-300"
|
|
||||||
>
|
|
||||||
<i data-feather="upload"></i>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- Hidden file input -->
|
|
||||||
<input
|
|
||||||
v-if="inputType === 'file'"
|
|
||||||
ref="fileInput"
|
|
||||||
type="file"
|
|
||||||
style="display: none"
|
|
||||||
:accept="fileAccept"
|
|
||||||
@change="handleFileInputChange"
|
|
||||||
/>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import feather from "feather-icons";
|
|
||||||
import { nextTick } from "vue";
|
|
||||||
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
value: String, // Custom v-model prop to receive the input value
|
|
||||||
inputType: {
|
|
||||||
type: String,
|
|
||||||
default: "text",
|
|
||||||
validator: (value) =>
|
|
||||||
["text", "email", "password", "file", "path", "integer", "float"].includes(
|
|
||||||
value
|
|
||||||
),
|
|
||||||
},
|
|
||||||
fileAccept: String, // Prop to specify the accepted file types
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
inputValue: this.value,
|
|
||||||
placeholderText: this.getPlaceholderText(),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
value(newVal) {
|
|
||||||
// Watch for changes from parent component to keep inputValue in sync
|
|
||||||
console.log("Changing value to ", newVal)
|
|
||||||
this.inputValue = newVal;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
nextTick(() => {
|
|
||||||
feather.replace();
|
|
||||||
});
|
|
||||||
console.log("Changing value to ", this.value)
|
|
||||||
this.inputValue = this.value;
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleSliderInput(event) {
|
|
||||||
this.inputValue = event.target.value;
|
|
||||||
this.$emit("input", event.target.value);
|
|
||||||
},
|
|
||||||
getPlaceholderText() {
|
|
||||||
switch (this.inputType) {
|
|
||||||
case "text":
|
|
||||||
return "Enter text here";
|
|
||||||
case "email":
|
|
||||||
return "Enter your email";
|
|
||||||
case "password":
|
|
||||||
return "Enter your password";
|
|
||||||
case "file":
|
|
||||||
case "path":
|
|
||||||
return "Choose a file";
|
|
||||||
case "integer":
|
|
||||||
return "Enter an integer";
|
|
||||||
case "float":
|
|
||||||
return "Enter a float";
|
|
||||||
default:
|
|
||||||
return "Enter value here";
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handleInput(event) {
|
|
||||||
if (this.inputType === "integer") {
|
|
||||||
const sanitizedValue = event.target.value.replace(/[^0-9]/g, "");
|
|
||||||
this.inputValue = sanitizedValue;
|
|
||||||
}
|
|
||||||
console.log("handling input : ", event.target.value)
|
|
||||||
this.$emit('input', event.target.value)
|
|
||||||
},
|
|
||||||
async pasteFromClipboard() {
|
|
||||||
try {
|
|
||||||
const text = await navigator.clipboard.readText();
|
|
||||||
this.handleClipboardData(text);
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Failed to read from clipboard:", error);
|
|
||||||
// Handle the error gracefully, e.g., show a message to the user
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handlePaste(event) {
|
|
||||||
const text = event.clipboardData.getData("text");
|
|
||||||
this.handleClipboardData(text);
|
|
||||||
},
|
|
||||||
handleClipboardData(text) {
|
|
||||||
switch (this.inputType) {
|
|
||||||
case "email":
|
|
||||||
this.inputValue = this.isValidEmail(text) ? text : "";
|
|
||||||
break;
|
|
||||||
case "password":
|
|
||||||
// Here, you can add validation for password strength if needed
|
|
||||||
this.inputValue = text;
|
|
||||||
break;
|
|
||||||
case "file":
|
|
||||||
case "path":
|
|
||||||
// For file and path types, you might not want to allow pasting directly
|
|
||||||
// into the input field. You can handle this as per your requirements.
|
|
||||||
this.inputValue = "";
|
|
||||||
break;
|
|
||||||
case "integer":
|
|
||||||
this.inputValue = this.parseInteger(text);
|
|
||||||
break;
|
|
||||||
case "float":
|
|
||||||
this.inputValue = this.parseFloat(text);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
this.inputValue = text;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
isValidEmail(value) {
|
|
||||||
// Simple email validation using regex
|
|
||||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
||||||
return emailRegex.test(value);
|
|
||||||
},
|
|
||||||
parseInteger(value) {
|
|
||||||
// Parse integer value or return empty if invalid
|
|
||||||
const parsedValue = parseInt(value);
|
|
||||||
return isNaN(parsedValue) ? "" : parsedValue;
|
|
||||||
},
|
|
||||||
parseFloat(value) {
|
|
||||||
// Parse float value or return empty if invalid
|
|
||||||
const parsedValue = parseFloat(value);
|
|
||||||
return isNaN(parsedValue) ? "" : parsedValue;
|
|
||||||
},
|
|
||||||
openFileInput() {
|
|
||||||
this.$refs.fileInput.click(); // Trigger the file input when the button is clicked
|
|
||||||
},
|
|
||||||
handleFileInputChange(event) {
|
|
||||||
const file = event.target.files[0];
|
|
||||||
if (file) {
|
|
||||||
// Display the file path in the input field
|
|
||||||
this.inputValue = file.name;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
/* Optional: You can add more custom styling here if needed */
|
|
||||||
</style>
|
|
||||||
@ -1,271 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="break-all">
|
|
||||||
<div v-html="renderedMarkdown" class="markdown-content"></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { nextTick } from 'vue';
|
|
||||||
import feather from 'feather-icons';
|
|
||||||
import MarkdownIt from 'markdown-it';
|
|
||||||
import emoji from 'markdown-it-emoji';
|
|
||||||
import anchor from 'markdown-it-anchor';
|
|
||||||
import implicitFigures from 'markdown-it-implicit-figures';
|
|
||||||
//import hljs from 'highlight.js/lib/core';
|
|
||||||
import 'highlight.js/styles/tomorrow-night-blue.css';
|
|
||||||
import 'highlight.js/styles/tokyo-night-dark.css';
|
|
||||||
import hljs from 'highlight.js/lib/common';
|
|
||||||
|
|
||||||
|
|
||||||
import 'highlight.js/styles/tomorrow-night-blue.css';
|
|
||||||
import 'highlight.js/styles/tokyo-night-dark.css';
|
|
||||||
import attrs from 'markdown-it-attrs';
|
|
||||||
|
|
||||||
function generateUniqueId() {
|
|
||||||
const timestamp = Date.now().toString();
|
|
||||||
const randomSuffix = Math.floor(Math.random() * 1000).toString();
|
|
||||||
return timestamp + randomSuffix;
|
|
||||||
}
|
|
||||||
|
|
||||||
const markdownIt = new MarkdownIt('commonmark', {
|
|
||||||
html: true,
|
|
||||||
xhtmlOut: true,
|
|
||||||
breaks: true,
|
|
||||||
linkify: true,
|
|
||||||
typographer: true,
|
|
||||||
highlight: (str, lang) => {
|
|
||||||
let id = generateUniqueId();
|
|
||||||
if (lang && hljs.getLanguage(lang)) {
|
|
||||||
try {
|
|
||||||
const highlightedCode = hljs.highlight(lang, str).value;
|
|
||||||
return (
|
|
||||||
'<div class="bg-bg-light-tone-panel dark:bg-bg-dark-tone-panel p-2 rounded-lg shadow-sm">' +
|
|
||||||
lang +
|
|
||||||
'<button class="px-2 py-1 ml-10 mb-2 text-left p-2 text-sm font-medium bg-bg-dark-tone-panel dark:bg-bg-dark-tone rounded-lg hover:bg-primary dark:hover:bg-primary text-white text-xs transition-colors duration-200">' +
|
|
||||||
'<span class="mr-1" id="copy-btn_' +
|
|
||||||
id +
|
|
||||||
'" onclick="copyContentToClipboard(' +
|
|
||||||
id +
|
|
||||||
')">Copy</span>' +
|
|
||||||
'<span class="hidden text-xs text-green-500" id="copyed-btn_' +
|
|
||||||
id +
|
|
||||||
'" onclick="copyContentToClipboard(' +
|
|
||||||
id +
|
|
||||||
')">Copied!</span>' +
|
|
||||||
'</button>' +
|
|
||||||
|
|
||||||
'<button class="px-2 py-1 ml-10 mb-2 text-left p-2 text-sm font-medium bg-bg-dark-tone-panel dark:bg-bg-dark-tone rounded-lg hover:bg-primary dark:hover:bg-primary text-white text-xs transition-colors duration-200">' +
|
|
||||||
'<span class="mr-1" id="exec-btn_' +
|
|
||||||
id +
|
|
||||||
'" onclick="executeCode(' +
|
|
||||||
id +
|
|
||||||
')">Execute</span>'+
|
|
||||||
'</button>' +
|
|
||||||
|
|
||||||
|
|
||||||
'<pre class="hljs p-1 rounded-md break-all grid grid-cols-1">' +
|
|
||||||
'<code id="code_' +
|
|
||||||
id +
|
|
||||||
'" class="overflow-x-auto break-all scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary">' +
|
|
||||||
highlightedCode +
|
|
||||||
'</code>' +
|
|
||||||
'</pre>' +
|
|
||||||
'<pre id="pre_exec_' +
|
|
||||||
id + '" class="hljs p-1 hidden rounded-md break-all grid grid-cols-1 mt-2">' +
|
|
||||||
'Execution output:<br>' +
|
|
||||||
'<code id="code_exec_' +
|
|
||||||
id +
|
|
||||||
'" class="overflow-x-auto break-all scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary">' +
|
|
||||||
'</code>' +
|
|
||||||
'</pre>' +
|
|
||||||
|
|
||||||
'</div>'
|
|
||||||
);
|
|
||||||
} catch (error) {
|
|
||||||
console.error(`Syntax highlighting failed for language '${lang}':`, error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
let btn_exec_txt = lang=='python'?'<button class="px-2 py-1 ml-10 mb-2 text-left p-2 text-sm font-medium bg-bg-dark-tone-panel dark:bg-bg-dark-tone rounded-lg hover:bg-primary dark:hover:bg-primary text-white text-xs transition-colors duration-200">' +
|
|
||||||
'<span class="mr-1" id="exec-btn_' +
|
|
||||||
id +
|
|
||||||
'" onclick="executeCode(' +
|
|
||||||
id +
|
|
||||||
')">Execute</span>'+
|
|
||||||
'</button>':''
|
|
||||||
|
|
||||||
let codeString =
|
|
||||||
'<div class="bg-bg-light-tone-panel dark:bg-bg-dark-tone-panel p-2 rounded-lg shadow-sm">' +
|
|
||||||
lang +
|
|
||||||
'<button class="px-2 py-1 ml-10 mb-2 text-left p-2 text-sm font-medium bg-bg-dark-tone-panel dark:bg-bg-dark-tone rounded-lg hover:bg-primary dark:hover:bg-primary text-white text-xs transition-colors duration-200">' +
|
|
||||||
'<span class="mr-1" id="copy-btn_' +
|
|
||||||
id +
|
|
||||||
'" onclick="copyContentToClipboard(' +
|
|
||||||
id +
|
|
||||||
')">Copy</span>' +
|
|
||||||
'<span class="hidden text-xs text-green-500" id="copyed-btn_' +
|
|
||||||
id +
|
|
||||||
'" onclick="copyContentToClipboard(' +
|
|
||||||
id +
|
|
||||||
')">Copied!</span>' +
|
|
||||||
'</button>' +
|
|
||||||
|
|
||||||
|
|
||||||
btn_exec_txt +
|
|
||||||
|
|
||||||
'<pre class="hljs p-1 rounded-md break-all grid grid-cols-1">' +
|
|
||||||
'<code id="code_' +
|
|
||||||
id +
|
|
||||||
'" class="overflow-x-auto break-all scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary">' +
|
|
||||||
hljs.highlightAuto(str).value +
|
|
||||||
'</code>' +
|
|
||||||
'<code id="code_exec_' +
|
|
||||||
id +
|
|
||||||
'" class="overflow-x-auto mt-2 hidden break-all scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary">' +
|
|
||||||
'</code>' +
|
|
||||||
'</pre>' +
|
|
||||||
'</div>';
|
|
||||||
return codeString;
|
|
||||||
},
|
|
||||||
bulletListMarker: '-',
|
|
||||||
}).use(attrs).use(anchor).use(implicitFigures).use(emoji); // Add attrs plugin for adding attributes to elements
|
|
||||||
|
|
||||||
|
|
||||||
// ... register other languages
|
|
||||||
|
|
||||||
|
|
||||||
hljs.configure({ languages: [] }); // Reset languages
|
|
||||||
hljs.configure({ languages: ['javascript'] }); // Set JavaScript as the default language
|
|
||||||
|
|
||||||
markdownIt.renderer.rules.link_open = (tokens, idx, options, env, self) => {
|
|
||||||
const token = tokens[idx];
|
|
||||||
const hrefIndex = token.attrIndex('href');
|
|
||||||
if (hrefIndex >= 0) {
|
|
||||||
const hrefValue = token.attrs[hrefIndex][1];
|
|
||||||
token.attrs[hrefIndex][1] = hrefValue;
|
|
||||||
token.attrPush(['style', 'color: blue; font-weight: bold; text-decoration: underline;']);
|
|
||||||
}
|
|
||||||
return self.renderToken(tokens, idx, options);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
// Define a custom rendering function for lists
|
|
||||||
const renderList = (tokens, idx, options, env, self) => {
|
|
||||||
const token = tokens[idx];
|
|
||||||
const listType = token.attrGet('type') || 'ul'; // Default to unordered list
|
|
||||||
|
|
||||||
// Custom handling for unordered lists
|
|
||||||
if (listType === 'ul') {
|
|
||||||
// Add Tailwind CSS classes for unordered lists
|
|
||||||
return '<ul class="list-disc ml-4">' + self.renderToken(tokens, idx, options) + '</ul>';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Custom handling for ordered lists
|
|
||||||
if (listType === 'ol') {
|
|
||||||
// Add Tailwind CSS classes for ordered lists
|
|
||||||
return '<ol class="list-decimal ml-4">' + self.renderToken(tokens, idx, options) + '</ol>';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fallback to the default renderer for other list types
|
|
||||||
return self.renderToken(tokens, idx, options);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Override the default list renderer with the custom function
|
|
||||||
markdownIt.renderer.rules.bullet_list_open = renderList;
|
|
||||||
markdownIt.renderer.rules.ordered_list_open = renderList;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'MarkdownRenderer',
|
|
||||||
props: {
|
|
||||||
|
|
||||||
markdownText: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
execute_code_url:"/execute_python_code",
|
|
||||||
renderedMarkdown: '',
|
|
||||||
isCopied: false,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
const script = document.createElement('script');
|
|
||||||
script.textContent = `
|
|
||||||
|
|
||||||
// Your inline script code here
|
|
||||||
function copyContentToClipboard(id) {
|
|
||||||
console.log("copied");
|
|
||||||
const codeElement = document.getElementById('code_' + id);
|
|
||||||
const copybtnElement = document.getElementById('copy-btn_' + id);
|
|
||||||
const copyedbtnElement = document.getElementById('copyed-btn_' + id);
|
|
||||||
copybtnElement.classList.add('hidden');
|
|
||||||
copyedbtnElement.classList.remove('hidden');
|
|
||||||
const range = document.createRange();
|
|
||||||
range.selectNode(codeElement);
|
|
||||||
window.getSelection().removeAllRanges();
|
|
||||||
window.getSelection().addRange(range);
|
|
||||||
document.execCommand('copy');
|
|
||||||
window.getSelection().removeAllRanges();
|
|
||||||
}
|
|
||||||
function executeCode(id) {
|
|
||||||
const codeElement = document.getElementById('code_' + id);
|
|
||||||
const codeExecElement = document.getElementById('code_exec_' + id);
|
|
||||||
const preExecElement = document.getElementById('pre_exec_' + id);
|
|
||||||
|
|
||||||
const code = codeElement.innerText
|
|
||||||
const json = JSON.stringify({ 'code': code })
|
|
||||||
console.log(json)
|
|
||||||
fetch('`+this.execute_code_url+`', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/json' },
|
|
||||||
body: json
|
|
||||||
}).then(response=>{
|
|
||||||
// Parse the JSON data from the response body
|
|
||||||
return response.json();
|
|
||||||
})
|
|
||||||
.then(jsonData => {
|
|
||||||
// Now you can work with the JSON data
|
|
||||||
console.log(jsonData);
|
|
||||||
preExecElement.classList.remove('hidden');
|
|
||||||
codeExecElement.innerText=jsonData.output
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
// Handle any errors that occurred during the fetch process
|
|
||||||
console.error('Fetch error:', error);
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
script.async = true; // Set to true if the script should be loaded asynchronously
|
|
||||||
document.body.appendChild(script);
|
|
||||||
this.renderedMarkdown = markdownIt.render(this.markdownText);
|
|
||||||
nextTick(() => {
|
|
||||||
feather.replace();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
methods: {},
|
|
||||||
watch: {
|
|
||||||
markdownText(newText) {
|
|
||||||
this.renderedMarkdown = markdownIt.render(newText);
|
|
||||||
nextTick(() => {
|
|
||||||
feather.replace();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
/* Include any additional styles you need */
|
|
||||||
ul {
|
|
||||||
list-style-type: disc;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol {
|
|
||||||
list-style-type: decimal;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,128 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="absolute bottom-16 right-2 z-20 flex flex-col gap-3 min-w-[300px]">
|
|
||||||
<TransitionGroup name="toastItem" tag="div">
|
|
||||||
<div v-for=" t in toastArr" :key="t.id" class="relative">
|
|
||||||
<div class="flex flex-row items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
|
|
||||||
role="alert">
|
|
||||||
<div class="flex flex-row flex-grow items-center">
|
|
||||||
<slot>
|
|
||||||
|
|
||||||
<div v-if="t.success"
|
|
||||||
class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
|
|
||||||
<i data-feather="check"></i>
|
|
||||||
<span class="sr-only">Check icon</span>
|
|
||||||
</div>
|
|
||||||
<div v-if="!t.success"
|
|
||||||
class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-red-500 bg-red-100 rounded-lg dark:bg-red-800 dark:text-red-200">
|
|
||||||
<i data-feather="x"></i>
|
|
||||||
<span class="sr-only">Cross icon</span>
|
|
||||||
</div>
|
|
||||||
<div class="ml-3 text-sm font-normal whitespace-pre-wrap line-clamp-3" :title="t.message">{{ t.message }}</div>
|
|
||||||
|
|
||||||
</slot>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex ">
|
|
||||||
|
|
||||||
|
|
||||||
<button type="button" @click.stop="copyToClipBoard(t.message)" title="Copy message"
|
|
||||||
class=" bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700">
|
|
||||||
<span class="sr-only">Copy message</span>
|
|
||||||
<i data-feather="clipboard" class="w-5 h-5"></i>
|
|
||||||
|
|
||||||
</button>
|
|
||||||
<button type="button" @click="close(t.id)" title="Close"
|
|
||||||
class=" bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700">
|
|
||||||
<span class="sr-only">Close</span>
|
|
||||||
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
|
|
||||||
xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd"
|
|
||||||
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
|
||||||
clip-rule="evenodd"></path>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</TransitionGroup>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import feather from 'feather-icons'
|
|
||||||
import { nextTick, TransitionGroup } from 'vue'
|
|
||||||
export default {
|
|
||||||
name: 'Toast',
|
|
||||||
|
|
||||||
props: {
|
|
||||||
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
show: false,
|
|
||||||
success: true,
|
|
||||||
message: '',
|
|
||||||
toastArr: []
|
|
||||||
};
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
close(id) {
|
|
||||||
|
|
||||||
this.toastArr = this.toastArr.filter(item => item.id != id)
|
|
||||||
},
|
|
||||||
copyToClipBoard(content) {
|
|
||||||
|
|
||||||
navigator.clipboard.writeText(content);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
nextTick(() => {
|
|
||||||
feather.replace()
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
},
|
|
||||||
showToast(message, duration_s = 3, success = true) {
|
|
||||||
const id = parseInt(((new Date()).getTime() * Math.random()).toString()).toString()
|
|
||||||
const toastObj = {
|
|
||||||
id: id,
|
|
||||||
success: success,
|
|
||||||
message: message,
|
|
||||||
show: true,
|
|
||||||
//copy: this.copyToClipBoard(message)
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
this.toastArr.push(toastObj)
|
|
||||||
|
|
||||||
nextTick(() => {
|
|
||||||
feather.replace()
|
|
||||||
|
|
||||||
})
|
|
||||||
setTimeout(() => {
|
|
||||||
|
|
||||||
this.toastArr = this.toastArr.filter(item => item.id != id)
|
|
||||||
|
|
||||||
}, duration_s * 1000);
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style scoped>
|
|
||||||
.toastItem-enter-active,
|
|
||||||
.toastItem-leave-active {
|
|
||||||
transition: all 0.5s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toastItem-enter-from,
|
|
||||||
.toastItem-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(-30px);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,214 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- <link v-if="codeBlockStylesheet" rel="stylesheet" :href="codeBlockStylesheet"> -->
|
|
||||||
<header class=" top-0 shadow-lg">
|
|
||||||
<nav class="container flex flex-col lg:flex-row item-center gap-2 pb-0 ">
|
|
||||||
<!-- LOGO -->
|
|
||||||
<RouterLink :to="{ name: 'playground' }">
|
|
||||||
<div class="flex items-center gap-3 flex-1">
|
|
||||||
<img class="w-12 hover:scale-95 duration-150 " title="LoLLMS WebUI" src="@/assets/logo.png" alt="Logo">
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<p class="text-2xl ">Lord of Large Language Models</p>
|
|
||||||
<p class="text-gray-400 ">One tool to rule them all</p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</RouterLink>
|
|
||||||
|
|
||||||
<!-- GITHUB AND THEME BUTTONS -->
|
|
||||||
<div class="flex gap-3 flex-1 items-center justify-end">
|
|
||||||
<div class="container mx-auto">
|
|
||||||
<label for="url" class="text-xl mb-2">URL</label>
|
|
||||||
<input type="text" id="url" class="w-25 border-2 rounded-md ml-2 mr-2" v-model="url">
|
|
||||||
<button @click="connect" class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white font-bold py-2 px-4 rounded ml-2">Connect</button>
|
|
||||||
</div>
|
|
||||||
<div title="Connection status" :class="['dot', { 'dot-green': isConnected, 'dot-red': !isConnected }]"></div>
|
|
||||||
<a href="https://github.com/ParisNeo/lollms-webui" target="_blank">
|
|
||||||
|
|
||||||
<div class="text-2xl hover:text-primary duration-150" title="Visit repository page">
|
|
||||||
<i data-feather="github"></i>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a href="https://www.youtube.com/channel/UCJzrg0cyQV2Z30SQ1v2FdSQ" target="_blank">
|
|
||||||
|
|
||||||
<div class="text-2xl hover:text-primary duration-150" title="Visit my youtube channel">
|
|
||||||
<i data-feather="youtube"></i>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="https://twitter.com/SpaceNerduino" target="_blank">
|
|
||||||
|
|
||||||
<div class="text-2xl hover:fill-primary dark:fill-white dark:hover:fill-primary duration-150" title="Follow me on my twitter acount">
|
|
||||||
<svg class="w-10 h-10 rounded-lg object-fill dark:text-white" xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 1668.56 1221.19" style="enable-background:new 0 0 1668.56 1221.19;" xml:space="preserve">
|
|
||||||
<g id="layer1" transform="translate(52.390088,-25.058597)">
|
|
||||||
<path id="path1009" d="M283.94,167.31l386.39,516.64L281.5,1104h87.51l340.42-367.76L984.48,1104h297.8L874.15,558.3l361.92-390.99
|
|
||||||
h-87.51l-313.51,338.7l-253.31-338.7H283.94z M412.63,231.77h136.81l604.13,807.76h-136.81L412.63,231.77z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<div class="sun text-2xl w-6 hover:text-primary duration-150" title="Swith to Light theme"
|
|
||||||
@click="themeSwitch()">
|
|
||||||
<i data-feather="sun"></i>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="moon text-2xl w-6 hover:text-primary duration-150" title="Swith to Dark theme"
|
|
||||||
@click="themeSwitch()">
|
|
||||||
<i data-feather="moon"></i>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { RouterLink } from 'vue-router'
|
|
||||||
import { nextTick } from 'vue'
|
|
||||||
import feather from 'feather-icons'
|
|
||||||
import socket from '@/services/websocket.js'
|
|
||||||
</script>
|
|
||||||
<script>
|
|
||||||
import { mapState } from 'vuex';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'TopBar',
|
|
||||||
computed:{
|
|
||||||
isConnected(){
|
|
||||||
return this.$store.state.isConnected;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
url:"http://localhost:9601",
|
|
||||||
codeBlockStylesheet:'',
|
|
||||||
sunIcon: document.querySelector(".sun"),
|
|
||||||
moonIcon: document.querySelector(".moon"),
|
|
||||||
userTheme: localStorage.getItem("theme"),
|
|
||||||
systemTheme: window.matchMedia("prefers-color-scheme: dark").matches,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.sunIcon = document.querySelector(".sun");
|
|
||||||
this.moonIcon = document.querySelector(".moon");
|
|
||||||
this.userTheme = localStorage.getItem("theme");
|
|
||||||
this.systemTheme = window.matchMedia("prefers-color-scheme: dark").matches;
|
|
||||||
this.themeCheck()
|
|
||||||
|
|
||||||
nextTick(() => {
|
|
||||||
feather.replace()
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.sunIcon = document.querySelector(".sun");
|
|
||||||
this.moonIcon = document.querySelector(".moon");
|
|
||||||
this.userTheme = localStorage.getItem("theme");
|
|
||||||
this.systemTheme = window.matchMedia("prefers-color-scheme: dark").matches;
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
connect() {
|
|
||||||
// Get the URL from the input text field.
|
|
||||||
console.log("connecting")
|
|
||||||
const url = this.url;
|
|
||||||
|
|
||||||
// Update the socket URL.
|
|
||||||
socket.ioURL = url;
|
|
||||||
|
|
||||||
// Connect to the socket.
|
|
||||||
socket.connect();
|
|
||||||
},
|
|
||||||
// codeBlockTheme(theme) {
|
|
||||||
// const styleDark = document.createElement('link');
|
|
||||||
// styleDark.type = "text/css";
|
|
||||||
// styleDark.href = 'highlight.js/styles/tokyo-night-dark.css';
|
|
||||||
|
|
||||||
// const styleLight = document.createElement('link');
|
|
||||||
// styleLight.type = "text/css";
|
|
||||||
// styleLight.href = 'highlight.js/styles/tomorrow-night-blue.css';
|
|
||||||
// if(theme=='dark'){
|
|
||||||
|
|
||||||
// document.head.appendChild(styleDark);
|
|
||||||
// document.head.removeChild(styleLight);
|
|
||||||
// }else{
|
|
||||||
// document.head.appendChild(styleLight);
|
|
||||||
// //document.head.removeChild(styleDark);
|
|
||||||
// }
|
|
||||||
|
|
||||||
// },
|
|
||||||
themeCheck() {
|
|
||||||
|
|
||||||
if (this.userTheme == "dark" || (!this.userTheme && this.systemTheme)) {
|
|
||||||
document.documentElement.classList.add("dark");
|
|
||||||
this.moonIcon.classList.add("display-none");
|
|
||||||
|
|
||||||
nextTick(()=>{
|
|
||||||
//import('highlight.js/styles/tokyo-night-dark.css');
|
|
||||||
import('highlight.js/styles/stackoverflow-dark.css');
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
nextTick(()=>{
|
|
||||||
//import('highlight.js/styles/tomorrow-night-blue.css');
|
|
||||||
import('highlight.js/styles/stackoverflow-light.css');
|
|
||||||
})
|
|
||||||
this.sunIcon.classList.add("display-none")
|
|
||||||
|
|
||||||
},
|
|
||||||
themeSwitch() {
|
|
||||||
|
|
||||||
if (document.documentElement.classList.contains("dark")) {
|
|
||||||
document.documentElement.classList.remove("dark");
|
|
||||||
localStorage.setItem("theme", "light")
|
|
||||||
this.userTheme == "light"
|
|
||||||
this.iconToggle()
|
|
||||||
|
|
||||||
return
|
|
||||||
|
|
||||||
}
|
|
||||||
import('highlight.js/styles/tokyo-night-dark.css');
|
|
||||||
document.documentElement.classList.add("dark");
|
|
||||||
localStorage.setItem("theme", "dark")
|
|
||||||
this.userTheme == "dark"
|
|
||||||
this.iconToggle()
|
|
||||||
|
|
||||||
},
|
|
||||||
iconToggle() {
|
|
||||||
this.sunIcon.classList.toggle("display-none");
|
|
||||||
this.moonIcon.classList.toggle("display-none");
|
|
||||||
}
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
Navigation,
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.dot {
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dot-green {
|
|
||||||
background-color: green;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dot-red {
|
|
||||||
background-color: red;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,377 +0,0 @@
|
|||||||
import { createApp, ref } from 'vue'
|
|
||||||
import { createStore } from 'vuex'
|
|
||||||
import axios from "axios";
|
|
||||||
import App from './App.vue'
|
|
||||||
import router from './router'
|
|
||||||
|
|
||||||
import './assets/tailwind.css'
|
|
||||||
|
|
||||||
const app = createApp(App)
|
|
||||||
console.log("Loaded main.js")
|
|
||||||
|
|
||||||
// Create a new store instance.
|
|
||||||
export const store = createStore({
|
|
||||||
state () {
|
|
||||||
return {
|
|
||||||
// count: 0,
|
|
||||||
ready:false,
|
|
||||||
settingsChanged:false,
|
|
||||||
isConnected: false, // Add the isConnected property
|
|
||||||
config:null,
|
|
||||||
mountedPers:null,
|
|
||||||
mountedPersArr:null,
|
|
||||||
bindingsArr:null,
|
|
||||||
modelsArr:null,
|
|
||||||
models_zoo:null,
|
|
||||||
personalities:null,
|
|
||||||
diskUsage:null,
|
|
||||||
ramUsage:null,
|
|
||||||
vramUsage:null,
|
|
||||||
extensionsZoo:null,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mutations: {
|
|
||||||
setIsConnected(state, isConnected) {
|
|
||||||
state.isConnected = isConnected;
|
|
||||||
},
|
|
||||||
setConfig(state, config) {
|
|
||||||
state.config = config;
|
|
||||||
},
|
|
||||||
setPersonalities(state, personalities) {
|
|
||||||
state.personalities = personalities;
|
|
||||||
},
|
|
||||||
setMountedPers(state, mountedPers) {
|
|
||||||
state.mountedPers = mountedPers;
|
|
||||||
},
|
|
||||||
setMountedPersArr(state, mountedPersArr) {
|
|
||||||
state.mountedPersArr = mountedPersArr;
|
|
||||||
},
|
|
||||||
setBindingsArr(state, bindingsArr) {
|
|
||||||
state.bindingsArr = bindingsArr;
|
|
||||||
},
|
|
||||||
setModelsArr(state, modelsArr) {
|
|
||||||
state.modelsArr = modelsArr;
|
|
||||||
},
|
|
||||||
setDiskUsage(state, diskUsage) {
|
|
||||||
state.diskUsage = diskUsage;
|
|
||||||
},
|
|
||||||
setRamUsage(state, ramUsage) {
|
|
||||||
state.ramUsage = ramUsage;
|
|
||||||
},
|
|
||||||
setVramUsage(state, vramUsage) {
|
|
||||||
state.vramUsage = vramUsage;
|
|
||||||
},
|
|
||||||
|
|
||||||
setExtensionsZoo(state, extensionsZoo) {
|
|
||||||
state.extensionsZoo = extensionsZoo;
|
|
||||||
},
|
|
||||||
setModelsZoo(state, modelsZoo) {
|
|
||||||
state.models_zoo = modelsZoo;
|
|
||||||
},
|
|
||||||
// increment (state) {
|
|
||||||
// state.count++
|
|
||||||
// }
|
|
||||||
},
|
|
||||||
getters: {
|
|
||||||
getIsConnected(state) {
|
|
||||||
return state.isConnected
|
|
||||||
},
|
|
||||||
getConfig(state) {
|
|
||||||
return state.config
|
|
||||||
},
|
|
||||||
getPersonalities(state) {
|
|
||||||
return state.personalities;
|
|
||||||
},
|
|
||||||
getMountedPersArr(state) {
|
|
||||||
return state.mountedPersArr;
|
|
||||||
},
|
|
||||||
getMountedPers(state) {
|
|
||||||
return state.mountedPers;
|
|
||||||
},
|
|
||||||
getbindingsArr(state) {
|
|
||||||
return state.bindingsArr;
|
|
||||||
},
|
|
||||||
getModelsArr(state) {
|
|
||||||
return state.modelsArr;
|
|
||||||
},
|
|
||||||
getDiskUsage(state) {
|
|
||||||
return state.diskUsage;
|
|
||||||
},
|
|
||||||
getRamUsage(state) {
|
|
||||||
return state.ramUsage;
|
|
||||||
},
|
|
||||||
getVramUsage(state) {
|
|
||||||
return state.vramUsage;
|
|
||||||
},
|
|
||||||
getModelsZoo(state) {
|
|
||||||
return state.models_zoo;
|
|
||||||
},
|
|
||||||
getExtensionsZoo(state) {
|
|
||||||
return state.extensionsZoo;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
actions: {
|
|
||||||
|
|
||||||
async refreshConfig({ commit }) {
|
|
||||||
console.log("Fetching configuration");
|
|
||||||
try {
|
|
||||||
const configFile = await api_get_req('get_config')
|
|
||||||
let personality_path_infos = configFile.personalities[configFile.active_personality_id].split("/")
|
|
||||||
//let personality_path_infos = await this.api_get_req("get_current_personality_path_infos")
|
|
||||||
configFile.personality_category = personality_path_infos[0]
|
|
||||||
configFile.personality_folder = personality_path_infos[1]
|
|
||||||
|
|
||||||
commit('setConfig', configFile);
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error.message, 'refreshConfig');
|
|
||||||
// Handle error
|
|
||||||
}
|
|
||||||
},
|
|
||||||
async refreshPersonalitiesArr({ commit }) {
|
|
||||||
let personalities = []
|
|
||||||
const catdictionary = await api_get_req("get_all_personalities")
|
|
||||||
const catkeys = Object.keys(catdictionary); // returns categories
|
|
||||||
|
|
||||||
for (let j = 0; j < catkeys.length; j++) {
|
|
||||||
const catkey = catkeys[j];
|
|
||||||
const personalitiesArray = catdictionary[catkey];
|
|
||||||
const modPersArr = personalitiesArray.map((item) => {
|
|
||||||
|
|
||||||
const isMounted = this.state.config.personalities.includes(catkey + '/' + item.folder)
|
|
||||||
// if (isMounted) {
|
|
||||||
// console.log(item)
|
|
||||||
// }
|
|
||||||
let newItem = {}
|
|
||||||
newItem = item
|
|
||||||
newItem.category = catkey // add new props to items
|
|
||||||
newItem.full_path = catkey + '/' + item.folder // add new props to items
|
|
||||||
newItem.isMounted = isMounted // add new props to items
|
|
||||||
return newItem
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
if (personalities.length == 0) {
|
|
||||||
personalities = modPersArr
|
|
||||||
} else {
|
|
||||||
personalities = personalities.concat(modPersArr)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
personalities.sort((a, b) => a.name.localeCompare(b.name))
|
|
||||||
|
|
||||||
commit('setPersonalities', personalities);
|
|
||||||
|
|
||||||
console.log("Done loading personalities")
|
|
||||||
},
|
|
||||||
refreshMountedPersonalities({ commit }) {
|
|
||||||
let mountedPersArr = []
|
|
||||||
// console.log('perrs listo',this.state.personalities)
|
|
||||||
for (let i = 0; i < this.state.config.personalities.length; i++) {
|
|
||||||
const full_path_item = this.state.config.personalities[i]
|
|
||||||
const index = this.state.personalities.findIndex(item => item.full_path == full_path_item)
|
|
||||||
|
|
||||||
const pers = this.state.personalities[index]
|
|
||||||
if (pers) {
|
|
||||||
mountedPersArr.push(pers)
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
mountedPersArr.push(this.state.personalities[this.state.personalities.findIndex(item => item.full_path == "english/generic/lollms")])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
console.log("Personalities list",this.state.personalities)
|
|
||||||
commit('setMountedPersArr', mountedPersArr);
|
|
||||||
|
|
||||||
console.log("active_personality_id",this.state.config.active_personality_id)
|
|
||||||
console.log("selected pers",this.state.config.personalities[this.state.config.active_personality_id])
|
|
||||||
this.state.mountedPers = this.state.personalities[this.state.personalities.findIndex(item => item.full_path == this.state.config.personalities[this.state.config.active_personality_id])]
|
|
||||||
console.log("selected pers",this.state.mountedPers)
|
|
||||||
|
|
||||||
},
|
|
||||||
async refreshBindings({ commit }) {
|
|
||||||
let bindingsArr = await api_get_req("list_bindings")
|
|
||||||
commit('setBindingsArr',bindingsArr)
|
|
||||||
},
|
|
||||||
async refreshModels({ commit }) {
|
|
||||||
let modelsArr = await api_get_req("list_models")
|
|
||||||
commit('setModelsArr',modelsArr)
|
|
||||||
},
|
|
||||||
async refreshExtensionsZoo({ commit }) {
|
|
||||||
let extensionsZoo = await api_get_req("list_extensions")
|
|
||||||
commit('setExtensionsZoo',extensionsZoo)
|
|
||||||
},
|
|
||||||
|
|
||||||
async refreshDiskUsage({ commit }) {
|
|
||||||
this.state.diskUsage = await api_get_req("disk_usage")
|
|
||||||
},
|
|
||||||
async refreshRamUsage({ commit }) {
|
|
||||||
this.state.ramUsage = await api_get_req("ram_usage")
|
|
||||||
},
|
|
||||||
async refreshVramUsage({ commit }) {
|
|
||||||
console.log("getting gpu data")
|
|
||||||
const resp = await api_get_req("vram_usage")
|
|
||||||
// {
|
|
||||||
// "gpu_0_total_vram": 11811160064,
|
|
||||||
// "gpu_0_used_vram": 3177185280,
|
|
||||||
// "nb_gpus": 1
|
|
||||||
// }
|
|
||||||
|
|
||||||
const gpuArr = []
|
|
||||||
|
|
||||||
if (resp.nb_gpus > 0) {
|
|
||||||
// Get keys
|
|
||||||
const keys = Object.keys(resp)
|
|
||||||
// for each gpu
|
|
||||||
for (let i = 0; i < resp.nb_gpus; i++) {
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const total_vram = resp[`gpu_${i}_total_vram`];
|
|
||||||
const used_vram = resp[`gpu_${i}_used_vram`];
|
|
||||||
const model = resp[`gpu_${i}_model`];
|
|
||||||
const percentage = (used_vram / total_vram) * 100
|
|
||||||
const available_space = total_vram - used_vram
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
gpuArr.push({
|
|
||||||
total_vram: total_vram,
|
|
||||||
used_vram: used_vram,
|
|
||||||
gpu_index: i,
|
|
||||||
gpu_model: model,
|
|
||||||
percentage: percentage.toFixed(2),
|
|
||||||
available_space: available_space
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
const result = {
|
|
||||||
|
|
||||||
"nb_gpus": resp.nb_gpus,
|
|
||||||
"gpus": gpuArr
|
|
||||||
}
|
|
||||||
console.log('gpu usage: ',result)
|
|
||||||
this.state.vramUsage = result
|
|
||||||
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
const result = {
|
|
||||||
"nb_gpus": 0,
|
|
||||||
"gpus": []
|
|
||||||
}
|
|
||||||
console.log('gpu usage: ',result)
|
|
||||||
this.state.vramUsage = result
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
async refreshModelsZoo({ commit }) {
|
|
||||||
console.log("Refreshing models zoo")
|
|
||||||
axios.get('/get_available_models')
|
|
||||||
.then(response => {
|
|
||||||
console.log("found models")
|
|
||||||
let models_zoo = response.data
|
|
||||||
models_zoo.sort((a, b) => a.title.localeCompare(b.title))
|
|
||||||
|
|
||||||
// Returns array of model filenames which are = to title of models zoo entry
|
|
||||||
for (let i = 0; i < this.state.modelsArr.length; i++) {
|
|
||||||
const customModel = this.state.modelsArr[i]
|
|
||||||
const index = models_zoo.findIndex(x => x.title == customModel)
|
|
||||||
|
|
||||||
if (index == -1) {
|
|
||||||
let newModelEntry = {}
|
|
||||||
newModelEntry.title = customModel
|
|
||||||
newModelEntry.path = customModel
|
|
||||||
newModelEntry.icon = ""
|
|
||||||
newModelEntry.isCustomModel = true
|
|
||||||
newModelEntry.isInstalled = true
|
|
||||||
models_zoo.push(newModelEntry)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
models_zoo.sort((a, b) => {
|
|
||||||
if (a.isInstalled && !b.isInstalled) {
|
|
||||||
return -1; // a is installed, b is not installed, so a comes first
|
|
||||||
} else if (!a.isInstalled && b.isInstalled) {
|
|
||||||
return 1; // b is installed, a is not installed, so b comes first
|
|
||||||
} else {
|
|
||||||
return 0; // both models are either installed or not installed, maintain their original order
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
models_zoo.forEach(model => {
|
|
||||||
if (model.title == this.state.config["model_name"]) {
|
|
||||||
model.selected = true;
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
model.selected = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
commit('setModelsZoo', models_zoo)
|
|
||||||
console.log("Models zoo loaded successfully")
|
|
||||||
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
console.log(error.message, 'fetchModels');
|
|
||||||
});
|
|
||||||
},
|
|
||||||
fetchCustomModels({ commit }) {
|
|
||||||
axios.get('/list_models')
|
|
||||||
.then(response => {
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
})
|
|
||||||
.catch(error => {
|
|
||||||
console.log(error.message, 'fetchCustomModels');
|
|
||||||
});
|
|
||||||
},
|
|
||||||
}
|
|
||||||
})
|
|
||||||
async function api_get_req(endpoint) {
|
|
||||||
try {
|
|
||||||
const res = await axios.get('/' + endpoint);
|
|
||||||
|
|
||||||
if (res) {
|
|
||||||
return res.data;
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error.message, 'api_get_req');
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let actionsExecuted = false;
|
|
||||||
|
|
||||||
app.mixin({
|
|
||||||
created() {
|
|
||||||
if (!actionsExecuted) {
|
|
||||||
actionsExecuted = true;
|
|
||||||
console.log("Calling")
|
|
||||||
this.$store.dispatch('refreshConfig').then(() => {
|
|
||||||
console.log("recovered config")
|
|
||||||
this.$store.dispatch('refreshPersonalitiesArr').then(() => {
|
|
||||||
this.$store.dispatch('refreshMountedPersonalities');
|
|
||||||
this.$store.dispatch('refreshBindings');
|
|
||||||
this.$store.dispatch('refreshModels');
|
|
||||||
|
|
||||||
this.$store.dispatch('refreshDiskUsage');
|
|
||||||
this.$store.dispatch('refreshRamUsage');
|
|
||||||
this.$store.dispatch('refreshVramUsage');
|
|
||||||
this.$store.dispatch('refreshModelsZoo');
|
|
||||||
this.$store.dispatch('refreshExtensionsZoo');
|
|
||||||
|
|
||||||
|
|
||||||
this.$store.state.ready = true
|
|
||||||
console.log("done loading data")
|
|
||||||
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
beforeMount() {
|
|
||||||
}
|
|
||||||
})
|
|
||||||
app.use(router)
|
|
||||||
app.use(store)
|
|
||||||
app.mount('#app')
|
|
||||||
|
|
||||||
@ -1,31 +0,0 @@
|
|||||||
/** From https://stackoverflow.com/a/14919494/14106028
|
|
||||||
* Format bytes as human-readable text.
|
|
||||||
*
|
|
||||||
* @param bytes Number of bytes.
|
|
||||||
* @param si True to use metric (SI) units, aka powers of 1000. False to use
|
|
||||||
* binary (IEC), aka powers of 1024.
|
|
||||||
* @param dp Number of decimal places to display.
|
|
||||||
*
|
|
||||||
* @return Formatted string.
|
|
||||||
*/
|
|
||||||
export default function humanFileSize(bytes, si = true, dp = 1) {
|
|
||||||
const thresh = si ? 1000 : 1024;
|
|
||||||
|
|
||||||
if (Math.abs(bytes) < thresh) {
|
|
||||||
return bytes + ' B';
|
|
||||||
}
|
|
||||||
|
|
||||||
const units = si
|
|
||||||
? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
|
|
||||||
: ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
|
|
||||||
let u = -1;
|
|
||||||
const r = 10 ** dp;
|
|
||||||
|
|
||||||
do {
|
|
||||||
bytes /= thresh;
|
|
||||||
++u;
|
|
||||||
} while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
|
|
||||||
|
|
||||||
|
|
||||||
return bytes.toFixed(dp) + ' ' + units[u];
|
|
||||||
}
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
import { createRouter, createWebHistory } from 'vue-router'
|
|
||||||
import PlayGroundView from '../views/PlayGroundView.vue'
|
|
||||||
|
|
||||||
|
|
||||||
const router = createRouter({
|
|
||||||
history: createWebHistory(import.meta.env.BASE_URL),
|
|
||||||
routes: [
|
|
||||||
{
|
|
||||||
path: '/',
|
|
||||||
name: 'playground',
|
|
||||||
component: PlayGroundView
|
|
||||||
},
|
|
||||||
|
|
||||||
],
|
|
||||||
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
export default router
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
// Project : lollms-webui
|
|
||||||
// Author : ParisNeo
|
|
||||||
// Description :
|
|
||||||
// All websocket stuff can be found here.
|
|
||||||
// More info can be found here https://socket.io/how-to/use-with-vue
|
|
||||||
// import { createApp } from 'vue';
|
|
||||||
import io from 'socket.io-client';
|
|
||||||
|
|
||||||
// fixes issues when people not hosting this site on local network
|
|
||||||
const URL = process.env.NODE_ENV === "production" ? (import.meta.env.VITE_LOLLMS_API) : (import.meta.env.VITE_LOLLMS_API);
|
|
||||||
const socket = new io(URL);
|
|
||||||
|
|
||||||
// const app = createApp(/* your root component */);
|
|
||||||
|
|
||||||
// app.config.globalProperties.$socket = socket;
|
|
||||||
|
|
||||||
// app.mount(/* your root element */);
|
|
||||||
|
|
||||||
export default socket;
|
|
||||||
|
|
||||||
@ -1,763 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="container bg-bg-light dark:bg-bg-dark shadow-lg overflow-y-auto scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary">
|
|
||||||
<div class="container flex flex-row m-2">
|
|
||||||
<div class="flex-grow m-2">
|
|
||||||
<div class="flex-grow m-2 p-2 border border-blue-300 rounded-md border-2 border-blue-300 m-2 p-4">
|
|
||||||
<button v-show="!generating" id="generate-button" @click="generate" class="w-6 ml-2 hover:text-secondary duration-75 active:scale-90 cursor-pointer"><i data-feather="pen-tool"></i></button>
|
|
||||||
<button v-show="!generating" id="generate-next-button" @click="generate_in_placeholder" class="w-6 ml-2 hover:text-secondary duration-75 active:scale-90 cursor-pointer"><i data-feather="archive"></i></button>
|
|
||||||
<span class="w-80"></span>
|
|
||||||
<button v-show="generating" id="stop-button" @click="stopGeneration" class="w-6 ml-2 hover:text-secondary duration-75 active:scale-90 cursor-pointer"><i data-feather="x"></i></button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
@click="startSpeechRecognition"
|
|
||||||
:class="{ 'text-red-500': isLesteningToVoice }"
|
|
||||||
class="w-6 hover:text-secondary duration-75 active:scale-90 cursor-pointer"
|
|
||||||
>
|
|
||||||
<i data-feather="mic"></i>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
title="speak"
|
|
||||||
@click.stop="speak()"
|
|
||||||
:class="{ 'text-red-500': isTalking }"
|
|
||||||
class="w-6 hover:text-secondary duration-75 active:scale-90 cursor-pointer">
|
|
||||||
<i data-feather="volume-2"></i>
|
|
||||||
</button>
|
|
||||||
<button v-show="!generating" id="export-button" @click="exportText" class="w-6 ml-2 hover:text-secondary duration-75 active:scale-90 cursor-pointer"><i data-feather="upload"></i></button>
|
|
||||||
<button v-show="!generating" id="import-button" @click="importText" class="w-6 ml-2 hover:text-secondary duration-75 active:scale-90 cursor-pointer"><i data-feather="download"></i></button>
|
|
||||||
|
|
||||||
<input type="file" id="import-input" class="hidden">
|
|
||||||
</div>
|
|
||||||
<div class="flex-grow m-2 p-2 border border-blue-300 rounded-md border-2 border-blue-300 m-2 p-4">
|
|
||||||
<div class="flex flex-row m-2 p-0">
|
|
||||||
<div
|
|
||||||
class="border-2 dark:bg-blue-700 text-blue-600 dark:text-white border-blue-300 p-2 rounded shadow-lg hover:border-gray-600 dark:link-item-dark cursor-pointer"
|
|
||||||
@click="tab_id='source'" :class="{'bg-blue-200 dark:bg-blue-500':tab_id=='source'}">
|
|
||||||
Source
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="border-2 dark:bg-blue-700 text-blue-600 dark:text-white border-blue-300 p-2 rounded shadow-lg hover:border-gray-600 dark:link-item-dark cursor-pointer"
|
|
||||||
@click="tab_id='render'" :class="{'bg-blue-200 dark:bg-blue-500':tab_id=='render'}">
|
|
||||||
Render
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="tab_id === 'source'">
|
|
||||||
<textarea
|
|
||||||
@click="text_element_clicked"
|
|
||||||
@keyup="text_element_changed"
|
|
||||||
v-model="text"
|
|
||||||
ref="text_element"
|
|
||||||
class="bg-white dark:bg-black m-0 border-2 rounded-md shadow-sm w-full mt-4 h-64 p-2 rounded shadow-lg overflow-y-scroll w-full dark:bg-bg-dark scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary" type="text"></textarea>
|
|
||||||
<span>Cursor position {{ cursorPosition }}</span>
|
|
||||||
</div>
|
|
||||||
<div v-if="tab_id === 'render'">
|
|
||||||
<MarkdownRenderer ref="mdRender" :markdown-text="text" class="mt-4 p-2 rounded shadow-lg dark:bg-bg-dark">
|
|
||||||
</MarkdownRenderer>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Card title="settings" class="slider-container ml-0 mr-0 max-width" :isHorizontal="false" :disableHoverAnimation="true" :disableFocus="true">
|
|
||||||
<Card title="Model" class="slider-container ml-0 mr-0" :is_subcard="true" :isHorizontal="false" :disableHoverAnimation="true" :disableFocus="true">
|
|
||||||
<select v-model="selectedModel" @change="setModel" class="bg-white dark:bg-black m-0 border-2 rounded-md shadow-sm w-full">
|
|
||||||
<option v-for="model in models" :key="model" :value="model">
|
|
||||||
{{ model }}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
<div v-if="selecting_model" title="Selecting model" class="flex flex-row flex-grow justify-end">
|
|
||||||
<!-- SPINNER -->
|
|
||||||
<div role="status">
|
|
||||||
<svg aria-hidden="true" class="w-6 h-6 animate-spin fill-secondary" viewBox="0 0 100 101"
|
|
||||||
fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path
|
|
||||||
d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
|
|
||||||
fill="currentColor" />
|
|
||||||
<path
|
|
||||||
d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
|
|
||||||
fill="currentFill" />
|
|
||||||
</svg>
|
|
||||||
<span class="sr-only">Selecting model...</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</Card>
|
|
||||||
<Card title="Presets" class="slider-container ml-0 mr-0" :is_subcard="true" :isHorizontal="false" :disableHoverAnimation="true" :disableFocus="true">
|
|
||||||
<select v-model="selectedPreset" class="bg-white dark:bg-black mb-2 border-2 rounded-md shadow-sm w-full">
|
|
||||||
<option v-for="preset in presets" :key="preset" :value="preset">
|
|
||||||
{{ preset.name }}
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
<br>
|
|
||||||
<button class="w-6 ml-2 hover:text-secondary duration-75 active:scale-90 cursor-pointer" @click="setPreset" title="Use preset"><i data-feather="check"></i></button>
|
|
||||||
<button class="w-6 ml-2 hover:text-secondary duration-75 active:scale-90 cursor-pointer" @click="addPreset" title="Add this text as a preset"><i data-feather="plus"></i></button>
|
|
||||||
<button class="w-6 ml-2 hover:text-secondary duration-75 active:scale-90 cursor-pointer" @click="removePreset" title="Remove preset"><i data-feather="x"></i></button>
|
|
||||||
<button class="w-6 ml-2 hover:text-secondary duration-75 active:scale-90 cursor-pointer" @click="reloadPresets" title="Reload presets list"><i data-feather="refresh-ccw"></i></button>
|
|
||||||
|
|
||||||
</Card>
|
|
||||||
<Card title="Generation params" class="slider-container ml-0 mr-0" :is_subcard="true" :isHorizontal="false" :disableHoverAnimation="true" :disableFocus="true">
|
|
||||||
|
|
||||||
<div class="slider-container ml-2 mr-2">
|
|
||||||
<h3 class="text-gray-600">Temperature</h3>
|
|
||||||
<input type="range" v-model="temperature" min="0" max="5" step="0.1" class="w-full">
|
|
||||||
<span class="slider-value text-gray-500">Current value: {{ temperature }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="slider-container ml-2 mr-2">
|
|
||||||
<h3 class="text-gray-600">Top K</h3>
|
|
||||||
<input type="range" v-model="top_k" min="1" max="100" step="1" class="w-full">
|
|
||||||
<span class="slider-value text-gray-500">Current value: {{ top_k }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="slider-container ml-2 mr-2">
|
|
||||||
<h3 class="text-gray-600">Top P</h3>
|
|
||||||
<input type="range" v-model="top_p" min="0" max="1" step="0.1" class="w-full">
|
|
||||||
<span class="slider-value text-gray-500">Current value: {{ top_p }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="slider-container ml-2 mr-2">
|
|
||||||
<h3 class="text-gray-600">Repeat Penalty</h3>
|
|
||||||
<input type="range" v-model="repeat_penalty" min="0" max="5" step="0.1" class="bg-white dark:bg-black m-0 border-2 rounded-md shadow-sm w-full">
|
|
||||||
<span class="slider-value text-gray-500">Current value: {{ repeat_penalty }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="slider-container ml-2 mr-2">
|
|
||||||
<h3 class="text-gray-600">Repeat Last N</h3>
|
|
||||||
<input type="range" v-model="repeat_last_n" min="0" max="100" step="1" class="bg-white dark:bg-black m-0 border-2 rounded-md shadow-sm w-full">
|
|
||||||
<span class="slider-value text-gray-500">Current value: {{ repeat_last_n }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="slider-container ml-2 mr-2">
|
|
||||||
<h3 class="text-gray-600">Number of tokens to crop the text to</h3>
|
|
||||||
<input type="number" v-model="n_crop" class="bg-white dark:bg-black m-0 border-2 rounded-md shadow-sm w-full">
|
|
||||||
<span class="slider-value text-gray-500">Current value: {{ n_crop }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="slider-container ml-2 mr-2">
|
|
||||||
<h3 class="text-gray-600">Number of tokens to generate</h3>
|
|
||||||
<input type="number" v-model="n_predicts" class="bg-white dark:bg-black m-0 border-2 rounded-md shadow-sm w-full">
|
|
||||||
<span class="slider-value text-gray-500">Current value: {{ n_predicts }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="slider-container ml-2 mr-2">
|
|
||||||
<h3 class="text-gray-600">Seed</h3>
|
|
||||||
<input type="number" v-model="seed" class="bg-white dark:bg-black m-0 border-2 rounded-md shadow-sm w-full">
|
|
||||||
<span class="slider-value text-gray-500">Current value: {{ seed }}</span>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Toast ref="toast"/>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import feather from 'feather-icons'
|
|
||||||
import axios from "axios";
|
|
||||||
import socket from '@/services/websocket.js'
|
|
||||||
import Toast from '../components/Toast.vue'
|
|
||||||
import MarkdownRenderer from '../components/MarkdownRenderer.vue';
|
|
||||||
import ClipBoardTextInput from "@/components/ClipBoardTextInput.vue";
|
|
||||||
import Card from "@/components/Card.vue"
|
|
||||||
|
|
||||||
|
|
||||||
async function showInputPanel(name, default_value="", options=[]) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
const panel = document.createElement("div");
|
|
||||||
panel.className = "fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50";
|
|
||||||
if(options.length===0){
|
|
||||||
panel.innerHTML = `
|
|
||||||
<div class="bg-white p-6 rounded-md shadow-md w-80">
|
|
||||||
<h2 class="text-lg font-semibold mb-3">${name}</h2>
|
|
||||||
<textarea id="replacementInput" class="w-full h-32 border rounded p-2 mb-3">${default_value}</textarea>
|
|
||||||
<div class="flex justify-end">
|
|
||||||
<button id="cancelButton" class="mr-2 px-4 py-2 border rounded">Cancel</button>
|
|
||||||
<button id="okButton" class="px-4 py-2 bg-blue-500 text-white rounded">OK</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
panel.innerHTML = `
|
|
||||||
<div class="bg-white p-6 rounded-md shadow-md w-80">
|
|
||||||
<h2 class="text-lg font-semibold mb-3">${name}</h2>
|
|
||||||
<select id="options_selector" class="form-control w-full h-25 border rounded p-2 mb-3">
|
|
||||||
${options.map(option => `<option value="${option}">${option}</option>`)}
|
|
||||||
</select>
|
|
||||||
<div class="flex justify-end">
|
|
||||||
<button id="cancelButton" class="mr-2 px-4 py-2 border rounded">Cancel</button>
|
|
||||||
<button id="okButton" class="px-4 py-2 bg-blue-500 text-white rounded">OK</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
document.body.appendChild(panel);
|
|
||||||
|
|
||||||
const cancelButton = panel.querySelector("#cancelButton");
|
|
||||||
const okButton = panel.querySelector("#okButton");
|
|
||||||
|
|
||||||
cancelButton.addEventListener("click", () => {
|
|
||||||
document.body.removeChild(panel);
|
|
||||||
resolve(null);
|
|
||||||
});
|
|
||||||
|
|
||||||
okButton.addEventListener("click", () => {
|
|
||||||
if(options.length===0){
|
|
||||||
const input = panel.querySelector("#replacementInput");
|
|
||||||
const value = input.value.trim();
|
|
||||||
document.body.removeChild(panel);
|
|
||||||
resolve(value);
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
const input = panel.querySelector("#options_selector");
|
|
||||||
const value = input.value.trim();
|
|
||||||
document.body.removeChild(panel);
|
|
||||||
resolve(value);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function replaceInText(text, callback) {
|
|
||||||
console.log(text)
|
|
||||||
let replacementDict = {};
|
|
||||||
let delimiterRegex = /@<([^>]+)>@/g;
|
|
||||||
let matches = [];
|
|
||||||
let match;
|
|
||||||
|
|
||||||
while ((match = delimiterRegex.exec(text)) !== null) {
|
|
||||||
matches.push("@<"+match[1]+">@"); // The captured group is at index 1
|
|
||||||
}
|
|
||||||
console.log("matches")
|
|
||||||
console.log(matches)
|
|
||||||
matches = [...new Set(matches)]
|
|
||||||
|
|
||||||
async function handleReplacement(match) {
|
|
||||||
console.log(match)
|
|
||||||
let placeholder = match.toLowerCase().substring(2,match.length-2);
|
|
||||||
if (placeholder !== "generation_placeholder") {
|
|
||||||
if (placeholder.includes(":")) {
|
|
||||||
// Special key words
|
|
||||||
let key_words_dict={
|
|
||||||
"all_language_options":"english:french:german:chinese:japanese:spanish:italian:russian:portuguese:swedish:danish:dutch:norwegian:slovak:czech:hungarian:polish:ukrainian:bulgarian:latvian:lithuanian:estonian:maltese:irish:galician:basque:welsh:breton:georgian:turkmen:kazakh:uzbek:tajik:afghan:sri-lankan:filipino:vietnamese:lao:cambodian:thai:burmese:kenyan:botswanan:zimbabwean:malawian:mozambican:angolan:namibian:south-african:madagascan:seychellois:mauritian:haitian:peruvian:ecuadorian:bolivian:paraguayan:chilean:argentinean:uruguayan:brazilian:colombian:venezuelan:puerto-rican:cuban:dominican:honduran:nicaraguan:salvadorean:guatemalan:el-salvadoran:belizean:panamanian:costa-rican:antiguan:barbudan:dominica's:grenada's:st-lucia's:st-vincent's:gibraltarian:faroe-islander:greenlandic:icelandic:jamaican:trinidadian:tobagonian:barbadian:anguillan:british-virgin-islander:us-virgin-islander:turkish:israeli:palestinian:lebanese:egyptian:libyan:tunisian:algerian:moroccan:bahraini:kuwaiti:saudi-arabian:yemeni:omani:irani:iraqi:afghanistan's:pakistani:indian:nepalese:sri-lankan:maldivan:burmese:thai:lao:vietnamese:kampuchean:malaysian:bruneian:indonesian:australian:new-zealanders:fijians:tongans:samoans:vanuatuans:wallisians:kiribatians:tuvaluans:solomon-islanders:marshallese:micronesians:hawaiians",
|
|
||||||
"all_programming_language_options":"python:c:c++:java:javascript:php:ruby:go:swift:kotlin:rust:haskell:erlang:lisp:scheme:prolog:cobol:fortran:pascal:delphi:d:eiffel:h:basic:visual_basic:smalltalk:objective-c:html5:node.js:vue.js:svelte:react:angular:ember:clipper:stex:arduino:brainfuck:r:assembly:mason:lepton:seacat:bbc_microbit:raspberry_pi_gpio:raspberry_pi_spi:raspberry_pi_i2c:raspberry_pi_uart:raspberry_pi_adc:raspberry_pi_ddio"
|
|
||||||
}
|
|
||||||
Object.entries(key_words_dict).forEach(([key, value]) => {
|
|
||||||
console.log(`Key: ${key}, Value: ${value}`);
|
|
||||||
function escapeRegExp(string) {
|
|
||||||
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // Escape special characters
|
|
||||||
}
|
|
||||||
|
|
||||||
const escapedKey = escapeRegExp(key);
|
|
||||||
const regex = new RegExp(escapedKey, 'g');
|
|
||||||
placeholder = placeholder.replace(regex, value);
|
|
||||||
//text = text.replace(new RegExp(key, 'g'), value);
|
|
||||||
});
|
|
||||||
|
|
||||||
let splitResult = placeholder.split(":");
|
|
||||||
let name = splitResult[0];
|
|
||||||
let defaultValue = splitResult[1] || "";
|
|
||||||
let options = [];
|
|
||||||
if (splitResult.length>2) {
|
|
||||||
options = splitResult.slice(1);
|
|
||||||
}
|
|
||||||
let replacement = await showInputPanel(name, defaultValue, options);
|
|
||||||
if (replacement !== null) {
|
|
||||||
replacementDict[match] = replacement;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
let replacement = await showInputPanel(placeholder);
|
|
||||||
if (replacement !== null) {
|
|
||||||
replacementDict[match] = replacement;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}else{
|
|
||||||
//var result = confirm("generation placeholder found. Do you want to generate?\nIf you skip generation, you still can generate manually after wards");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
let promiseChain = Promise.resolve();
|
|
||||||
|
|
||||||
matches.forEach(match => {
|
|
||||||
promiseChain = promiseChain.then(() => {
|
|
||||||
return handleReplacement(match);
|
|
||||||
}).then(result => {
|
|
||||||
console.log(result);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
promiseChain.then(() => {
|
|
||||||
Object.entries(replacementDict).forEach(([key, value]) => {
|
|
||||||
console.log(`Key: ${key}, Value: ${value}`);
|
|
||||||
function escapeRegExp(string) {
|
|
||||||
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // Escape special characters
|
|
||||||
}
|
|
||||||
|
|
||||||
const escapedKey = escapeRegExp(key);
|
|
||||||
const regex = new RegExp(escapedKey, 'g');
|
|
||||||
text = text.replace(regex, value);
|
|
||||||
//text = text.replace(new RegExp(key, 'g'), value);
|
|
||||||
});
|
|
||||||
callback(text); // Call the callback after all matches are processed
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'PlayGroundView',
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
selecting_model:false,
|
|
||||||
tab_id:"source",
|
|
||||||
generating:false,
|
|
||||||
isSpeaking:false,
|
|
||||||
voices: [],
|
|
||||||
isLesteningToVoice:false,
|
|
||||||
presets:[],
|
|
||||||
selectedPreset: '',
|
|
||||||
models:{},
|
|
||||||
selectedModel: '',
|
|
||||||
cursorPosition:0,
|
|
||||||
text:"",
|
|
||||||
pre_text:"",
|
|
||||||
post_text:"",
|
|
||||||
temperature: 0.1,
|
|
||||||
top_k: 50,
|
|
||||||
top_p: 0.9,
|
|
||||||
repeat_penalty: 1.3,
|
|
||||||
repeat_last_n: 50,
|
|
||||||
n_crop: -1,
|
|
||||||
n_predicts: 2000,
|
|
||||||
seed: -1,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
components:{
|
|
||||||
Toast,
|
|
||||||
MarkdownRenderer,
|
|
||||||
ClipBoardTextInput,
|
|
||||||
Card
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
axios.get('list_models').then(response => {
|
|
||||||
console.log("List models "+response.data)
|
|
||||||
this.models=response.data
|
|
||||||
axios.get('get_active_model').then(response => {
|
|
||||||
console.log("Active model " + JSON.stringify(response.data))
|
|
||||||
if(response.data!=undefined){
|
|
||||||
this.selectedModel = response.data["model"]
|
|
||||||
}
|
|
||||||
|
|
||||||
}).catch(ex=>{
|
|
||||||
this.$refs.toast.showToast(`Error: ${ex}`,4,false)
|
|
||||||
});
|
|
||||||
|
|
||||||
}).catch(ex=>{
|
|
||||||
this.$refs.toast.showToast(`Error: ${ex}`,4,false)
|
|
||||||
});
|
|
||||||
|
|
||||||
axios.get('./get_presets').then(response => {
|
|
||||||
console.log(response.data)
|
|
||||||
this.presets=response.data
|
|
||||||
this.selectedPreset = this.presets[0]
|
|
||||||
}).catch(ex=>{
|
|
||||||
this.$refs.toast.showToast(`Error: ${ex}`,4,false)
|
|
||||||
});
|
|
||||||
// Event handler for receiving generated text chunks
|
|
||||||
socket.on('text_chunk', data => {
|
|
||||||
this.appendToOutput(data.chunk);
|
|
||||||
// const text_element = document.getElementById('text_element');
|
|
||||||
// text_element.scrollTo(0, text_element.scrollHeight);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Event handler for receiving generated text chunks
|
|
||||||
socket.on('text_generated', data => {
|
|
||||||
// Toggle button visibility
|
|
||||||
this.generating=false;
|
|
||||||
});
|
|
||||||
|
|
||||||
socket.on('generation_error', data => {
|
|
||||||
console.log('generation_error:', data);
|
|
||||||
this.$refs.toast.showToast(`Error: ${data}`,4,false)
|
|
||||||
// Toggle button visibility
|
|
||||||
this.generating=false;
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Event handler for successful connection
|
|
||||||
socket.on('connect', () => {
|
|
||||||
console.log('Connected to LoLLMs server');
|
|
||||||
this.$store.state.isConnected=true;
|
|
||||||
this.generating=false
|
|
||||||
});
|
|
||||||
|
|
||||||
// Event handler for error during text generation
|
|
||||||
socket.on('buzzy', error => {
|
|
||||||
console.error('Server is busy. Wait for your turn', error);
|
|
||||||
this.$refs.toast.showToast(`Error: ${error.message}`,4,false)
|
|
||||||
// Toggle button visibility
|
|
||||||
this.generating=false
|
|
||||||
});
|
|
||||||
|
|
||||||
// Event handler for error during text generation
|
|
||||||
socket.on('generation_canceled', error => {
|
|
||||||
// Toggle button visibility
|
|
||||||
this.generating=false
|
|
||||||
console.log("Generation canceled OK")
|
|
||||||
});
|
|
||||||
|
|
||||||
//console.log('chatbox mnt',this.$refs)
|
|
||||||
this.$nextTick(() => {
|
|
||||||
feather.replace();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Speach synthesis
|
|
||||||
// Check if speech synthesis is supported by the browser
|
|
||||||
if ('speechSynthesis' in window) {
|
|
||||||
this.speechSynthesis = window.speechSynthesis;
|
|
||||||
|
|
||||||
// Load the available voices
|
|
||||||
this.voices = this.speechSynthesis.getVoices();
|
|
||||||
|
|
||||||
// Make sure the voices are loaded before starting speech synthesis
|
|
||||||
if (this.voices.length === 0) {
|
|
||||||
this.speechSynthesis.addEventListener('voiceschanged', this.onVoicesChanged);
|
|
||||||
} else {
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
console.error('Speech synthesis is not supported in this browser.');
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
},
|
|
||||||
created(){
|
|
||||||
|
|
||||||
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
isTalking :{
|
|
||||||
get(){
|
|
||||||
return this.isSpeaking
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
text_element_changed(){
|
|
||||||
console.log("text_element_changed")
|
|
||||||
this.cursorPosition = this.$refs.text_element.selectionStart;
|
|
||||||
},
|
|
||||||
text_element_clicked(){
|
|
||||||
console.log("text_element_clicked")
|
|
||||||
this.cursorPosition = this.$refs.text_element.selectionStart;
|
|
||||||
},
|
|
||||||
setModel(){
|
|
||||||
this.selecting_model=true
|
|
||||||
axios.post("/update_setting", {
|
|
||||||
setting_name: "model_name",
|
|
||||||
setting_value: this.selectedModel
|
|
||||||
}).then((response) => {
|
|
||||||
console.log(response);
|
|
||||||
this.$refs.toast.showToast(`Model changed to ${this.selectedModel}`,4,true)
|
|
||||||
this.selecting_model=false
|
|
||||||
}).catch(err=>{
|
|
||||||
this.$refs.toast.showToast(`Error ${err}`,4,true)
|
|
||||||
this.selecting_model=false
|
|
||||||
});
|
|
||||||
|
|
||||||
},
|
|
||||||
onVoicesChanged() {
|
|
||||||
// This event will be triggered when the voices are loaded
|
|
||||||
this.voices = this.speechSynthesis.getVoices();
|
|
||||||
},
|
|
||||||
speak() {
|
|
||||||
if (this.msg) {
|
|
||||||
this.speechSynthesis.cancel();
|
|
||||||
this.msg = null;
|
|
||||||
this.isSpeaking = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
let startIndex =0;
|
|
||||||
// Set isSpeaking to true before starting synthesis
|
|
||||||
console.log("voice on")
|
|
||||||
this.isSpeaking = true;
|
|
||||||
|
|
||||||
const chunkSize = 200; // You can adjust the chunk size as needed
|
|
||||||
|
|
||||||
// Create a new SpeechSynthesisUtterance instance
|
|
||||||
this.msg = new SpeechSynthesisUtterance();
|
|
||||||
this.msg.pitch = this.$store.state.config.audio_pitch;
|
|
||||||
|
|
||||||
// Optionally, set the voice and other parameters as before
|
|
||||||
if (this.voices.length > 0) {
|
|
||||||
this.msg.voice = this.voices.filter(voice => voice.name === this.$store.state.config.audio_out_voice)[0];
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Function to find the index of the last sentence that fits within the chunk size
|
|
||||||
const findLastSentenceIndex = (startIndex) => {
|
|
||||||
let txt = this.text.substring(startIndex, startIndex+chunkSize)
|
|
||||||
// Define an array of characters that represent end of sentence markers.
|
|
||||||
const endOfSentenceMarkers = ['.', '!', '?', '\n'];
|
|
||||||
|
|
||||||
// Initialize a variable to store the index of the last end of sentence marker.
|
|
||||||
let lastIndex = -1;
|
|
||||||
|
|
||||||
// Iterate through the end of sentence markers and find the last occurrence in the txt string.
|
|
||||||
endOfSentenceMarkers.forEach(marker => {
|
|
||||||
const markerIndex = txt.lastIndexOf(marker);
|
|
||||||
if (markerIndex > lastIndex) {
|
|
||||||
lastIndex = markerIndex;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if(lastIndex==-1){lastIndex=txt.length}
|
|
||||||
console.log(lastIndex)
|
|
||||||
return lastIndex+startIndex+1;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Function to speak a chunk of text
|
|
||||||
const speakChunk = () => {
|
|
||||||
const endIndex = findLastSentenceIndex(startIndex);
|
|
||||||
const chunk = this.text.substring(startIndex, endIndex);
|
|
||||||
this.msg.text = chunk;
|
|
||||||
startIndex = endIndex + 1;
|
|
||||||
this.msg.onend = (event) => {
|
|
||||||
if (startIndex < this.text.length-2) {
|
|
||||||
// Use setTimeout to add a brief delay before speaking the next chunk
|
|
||||||
setTimeout(() => {
|
|
||||||
speakChunk();
|
|
||||||
}, 1); // Adjust the delay as needed
|
|
||||||
} else {
|
|
||||||
this.isSpeaking = false;
|
|
||||||
console.log("voice off :",this.text.length," ",endIndex)
|
|
||||||
}
|
|
||||||
};
|
|
||||||
this.speechSynthesis.speak(this.msg);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Speak the first chunk
|
|
||||||
speakChunk();
|
|
||||||
},
|
|
||||||
getCursorPosition() {
|
|
||||||
return this.cursorPosition;
|
|
||||||
},
|
|
||||||
appendToOutput(chunk){
|
|
||||||
this.pre_text += chunk
|
|
||||||
this.text = this.pre_text + this.post_text
|
|
||||||
},
|
|
||||||
generate_in_placeholder(){
|
|
||||||
console.log("Finding cursor position")
|
|
||||||
// Find next placeholder @<generation_placeholder>@
|
|
||||||
let index = this.text.indexOf("@<generation_placeholder>@")
|
|
||||||
if(index<0){
|
|
||||||
this.$refs.toast.showToast(`No generation placeholder found`,4,false)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.text = this.text.substring(0,index) + this.text.substring(index+"@<generation_placeholder>@".length,this.text.length)
|
|
||||||
this.pre_text = this.text.substring(0,index)
|
|
||||||
this.post_text = this.text.substring(index, this.text.length)
|
|
||||||
var prompt = this.text.substring(0, index)
|
|
||||||
console.log(prompt)
|
|
||||||
// Trigger the 'generate_text' event with the prompt
|
|
||||||
socket.emit('generate_text', { prompt: prompt, personality: -1, n_predicts: this.n_predicts , n_crop: this.n_crop,
|
|
||||||
parameters: {
|
|
||||||
temperature: this.temperature,
|
|
||||||
top_k: this.top_k,
|
|
||||||
top_p: this.top_p,
|
|
||||||
repeat_penalty: this.repeat_penalty, // Update with desired repeat penalty value
|
|
||||||
repeat_last_n: this.repeat_last_n, // Update with desired repeat_last_n value
|
|
||||||
seed: parseInt(this.seed)
|
|
||||||
}});
|
|
||||||
|
|
||||||
// Toggle button visibility
|
|
||||||
this.generating=true
|
|
||||||
},
|
|
||||||
generate(){
|
|
||||||
console.log("Finding cursor position")
|
|
||||||
this.pre_text = this.text.substring(0,this.getCursorPosition())
|
|
||||||
this.post_text = this.text.substring(this.getCursorPosition(), this.text.length)
|
|
||||||
var prompt = this.text.substring(0,this.getCursorPosition())
|
|
||||||
console.log(prompt)
|
|
||||||
// Trigger the 'generate_text' event with the prompt
|
|
||||||
socket.emit('generate_text', { prompt: prompt, personality: -1, n_predicts: this.n_predicts , n_crop: this.n_crop,
|
|
||||||
parameters: {
|
|
||||||
temperature: this.temperature,
|
|
||||||
top_k: this.top_k,
|
|
||||||
top_p: this.top_p,
|
|
||||||
repeat_penalty: this.repeat_penalty, // Update with desired repeat penalty value
|
|
||||||
repeat_last_n: this.repeat_last_n, // Update with desired repeat_last_n value
|
|
||||||
seed: parseInt(this.seed)
|
|
||||||
}});
|
|
||||||
|
|
||||||
// Toggle button visibility
|
|
||||||
this.generating=true
|
|
||||||
},
|
|
||||||
stopGeneration(){
|
|
||||||
// Trigger the 'cancel_generation' event
|
|
||||||
socket.emit('cancel_text_generation',{});
|
|
||||||
},
|
|
||||||
exportText(){
|
|
||||||
const textToExport = this.text;
|
|
||||||
const element = document.createElement('a');
|
|
||||||
const file = new Blob([textToExport], {type: 'text/plain'});
|
|
||||||
element.href = URL.createObjectURL(file);
|
|
||||||
element.download = 'exported_text.txt';
|
|
||||||
document.body.appendChild(element);
|
|
||||||
element.click();
|
|
||||||
document.body.removeChild(element);
|
|
||||||
},
|
|
||||||
importText() {
|
|
||||||
const inputFile = document.getElementById("import-input");
|
|
||||||
if (!inputFile) return; // If the element doesn't exist, do nothing
|
|
||||||
inputFile.addEventListener("change", event => {
|
|
||||||
if (event.target.files && event.target.files[0]) {
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.onload = () => {
|
|
||||||
this.text = reader.result;
|
|
||||||
};
|
|
||||||
reader.readAsText(event.target.files[0]);
|
|
||||||
} else {
|
|
||||||
alert("Please select a file.");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
inputFile.click();
|
|
||||||
},
|
|
||||||
setPreset() {
|
|
||||||
console.log("Setting preset")
|
|
||||||
console.log(this.selectedPreset)
|
|
||||||
this.text = replaceInText(this.selectedPreset.content, (text)=>{
|
|
||||||
console.log("Done")
|
|
||||||
console.log(text);
|
|
||||||
this.text= text
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
addPreset() {
|
|
||||||
let title = prompt('Enter the title of the preset:');
|
|
||||||
this.presets[title] = {
|
|
||||||
name:title,
|
|
||||||
content:this.text
|
|
||||||
}
|
|
||||||
axios.post("./add_preset",this.presets[title]).then(response => {
|
|
||||||
console.log(response.data)
|
|
||||||
}).catch(ex=>{
|
|
||||||
this.$refs.toast.showToast(`Error: ${ex}`,4,false)
|
|
||||||
});
|
|
||||||
},
|
|
||||||
removePreset() {
|
|
||||||
if (this.selectedPreset) {
|
|
||||||
delete this.presets[this.selectedPreset.name];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
reloadPresets() {
|
|
||||||
axios.get('./get_presets').then(response => {
|
|
||||||
console.log(response.data)
|
|
||||||
this.presets=response.data
|
|
||||||
this.selectedPreset = this.presets[0]
|
|
||||||
}).catch(ex=>{
|
|
||||||
this.$refs.toast.showToast(`Error: ${ex}`,4,false)
|
|
||||||
});
|
|
||||||
},
|
|
||||||
startSpeechRecognition() {
|
|
||||||
if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
|
|
||||||
this.recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
|
|
||||||
this.recognition.lang = this.$store.state.config.audio_in_language; // Set the language, adjust as needed
|
|
||||||
this.recognition.interimResults = true; // Enable interim results to get real-time updates
|
|
||||||
|
|
||||||
this.recognition.onstart = () => {
|
|
||||||
this.isLesteningToVoice = true;
|
|
||||||
this.silenceTimer = setTimeout(() => {
|
|
||||||
this.recognition.stop();
|
|
||||||
}, this.silenceTimeout); // Set the silence timeout to stop recognition
|
|
||||||
};
|
|
||||||
|
|
||||||
this.pre_text = this.text.substring(0,this.getCursorPosition())
|
|
||||||
this.post_text = this.text.substring(this.getCursorPosition(), this.text.length)
|
|
||||||
|
|
||||||
this.recognition.onresult = (event) => {
|
|
||||||
this.generated = '';
|
|
||||||
|
|
||||||
for (let i = event.resultIndex; i < event.results.length; i++) {
|
|
||||||
this.generated += event.results[i][0].transcript;
|
|
||||||
}
|
|
||||||
this.text = this.pre_text + this.generated + this.post_text; // Update the textarea with the real-time recognized words
|
|
||||||
this.cursorPosition = this.pre_text.length + this.generated.length;
|
|
||||||
clearTimeout(this.silenceTimer); // Clear the silence timeout on every recognized result
|
|
||||||
this.silenceTimer = setTimeout(() => {
|
|
||||||
this.recognition.stop();
|
|
||||||
}, this.silenceTimeout); // Set a new silence timeout after every recognized result
|
|
||||||
};
|
|
||||||
|
|
||||||
this.recognition.onerror = (event) => {
|
|
||||||
console.error('Speech recognition error:', event.error);
|
|
||||||
this.isLesteningToVoice = false;
|
|
||||||
clearTimeout(this.silenceTimer); // Clear the silence timeout on error
|
|
||||||
};
|
|
||||||
|
|
||||||
this.recognition.onend = () => {
|
|
||||||
console.log('Speech recognition ended.');
|
|
||||||
this.isLesteningToVoice = false;
|
|
||||||
this.pre_text = this.pre_text + this.generated;
|
|
||||||
this.cursorPosition = this.pre_text.length;
|
|
||||||
clearTimeout(this.silenceTimer); // Clear the silence timeout when recognition ends normally
|
|
||||||
};
|
|
||||||
|
|
||||||
this.recognition.start();
|
|
||||||
} else {
|
|
||||||
console.error('Speech recognition is not supported in this browser.');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
select {
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: #fafafa;
|
|
||||||
font-family: sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
margin: 4px auto;
|
|
||||||
width: 800px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 250px;
|
|
||||||
background-color: #fff;
|
|
||||||
z-index: 1000;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-button {
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 10px;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 5px;
|
|
||||||
color: #333;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-button:hover {
|
|
||||||
background-color: #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settings-button:active {
|
|
||||||
background-color: #ddd;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-container {
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider-value {
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: 10px;
|
|
||||||
color: #6b7280;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.small-button {
|
|
||||||
padding: 0.5rem 0.75rem;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
@ -23,6 +23,7 @@ import yaml
|
|||||||
import copy
|
import copy
|
||||||
import gc
|
import gc
|
||||||
import json
|
import json
|
||||||
|
import traceback
|
||||||
import shutil
|
import shutil
|
||||||
|
|
||||||
|
|
||||||
@ -38,9 +39,6 @@ def reset_all_installs(lollms_paths:LollmsPaths):
|
|||||||
class LoLLMsServer(LollmsApplication):
|
class LoLLMsServer(LollmsApplication):
|
||||||
def __init__(self):
|
def __init__(self):
|
||||||
|
|
||||||
|
|
||||||
host = "localhost"
|
|
||||||
port = "9601"
|
|
||||||
self.clients = {}
|
self.clients = {}
|
||||||
self.current_binding = None
|
self.current_binding = None
|
||||||
self.model = None
|
self.model = None
|
||||||
@ -50,8 +48,8 @@ class LoLLMsServer(LollmsApplication):
|
|||||||
|
|
||||||
|
|
||||||
parser = argparse.ArgumentParser()
|
parser = argparse.ArgumentParser()
|
||||||
parser.add_argument('--host', '-hst', default=host, help='Host name')
|
parser.add_argument('--host', '-hst', default=None, help='Host name')
|
||||||
parser.add_argument('--port', '-prt', default=port, help='Port number')
|
parser.add_argument('--port', '-prt', default=None, help='Port number')
|
||||||
|
|
||||||
|
|
||||||
parser.add_argument('--reset_personal_path', action='store_true', help='Reset the personal path')
|
parser.add_argument('--reset_personal_path', action='store_true', help='Reset the personal path')
|
||||||
@ -81,6 +79,12 @@ class LoLLMsServer(LollmsApplication):
|
|||||||
# Configuration loading part
|
# Configuration loading part
|
||||||
config = LOLLMSConfig.autoload(lollms_paths, None)
|
config = LOLLMSConfig.autoload(lollms_paths, None)
|
||||||
|
|
||||||
|
if args.host is not None:
|
||||||
|
config.host = args.host
|
||||||
|
|
||||||
|
if args.port is not None:
|
||||||
|
config.port = args.port
|
||||||
|
|
||||||
super().__init__("lollms-server", config, lollms_paths)
|
super().__init__("lollms-server", config, lollms_paths)
|
||||||
|
|
||||||
self.menu.show_logo()
|
self.menu.show_logo()
|
||||||
@ -96,6 +100,87 @@ class LoLLMsServer(LollmsApplication):
|
|||||||
"/get_config", "get_config", get_config, methods=["GET"]
|
"/get_config", "get_config", get_config, methods=["GET"]
|
||||||
)
|
)
|
||||||
|
|
||||||
|
def list_models():
|
||||||
|
if self.binding is not None:
|
||||||
|
models = self.binding.list_models(self.config)
|
||||||
|
ASCIIColors.yellow("Listing models")
|
||||||
|
return jsonify(models)
|
||||||
|
else:
|
||||||
|
return jsonify([])
|
||||||
|
|
||||||
|
self.app.add_url_rule(
|
||||||
|
"/list_models", "list_models", list_models, methods=["GET"]
|
||||||
|
)
|
||||||
|
|
||||||
|
def get_active_model():
|
||||||
|
if self.binding is not None:
|
||||||
|
models = self.binding.list_models(self.config)
|
||||||
|
index = models.index(self.config.model_name)
|
||||||
|
ASCIIColors.yellow(f"Recovering active model: {models[index]}")
|
||||||
|
return jsonify({"model":models[index],"index":index})
|
||||||
|
else:
|
||||||
|
return jsonify(None)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
self.app.add_url_rule(
|
||||||
|
"/get_active_model", "get_active_model", get_active_model, methods=["GET"]
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
def update_setting():
|
||||||
|
data = request.get_json()
|
||||||
|
setting_name = data['setting_name']
|
||||||
|
|
||||||
|
if setting_name== "model_name":
|
||||||
|
self.config["model_name"]=data['setting_value']
|
||||||
|
if self.config["model_name"] is not None:
|
||||||
|
try:
|
||||||
|
self.model = None
|
||||||
|
if self.binding:
|
||||||
|
del self.binding
|
||||||
|
|
||||||
|
self.binding = None
|
||||||
|
for per in self.mounted_personalities:
|
||||||
|
per.model = None
|
||||||
|
gc.collect()
|
||||||
|
self.binding = BindingBuilder().build_binding(self.config, self.lollms_paths)
|
||||||
|
self.model = self.binding.build_model()
|
||||||
|
for per in self.mounted_personalities:
|
||||||
|
per.model = self.model
|
||||||
|
except Exception as ex:
|
||||||
|
# Catch the exception and get the traceback as a list of strings
|
||||||
|
traceback_lines = traceback.format_exception(type(ex), ex, ex.__traceback__)
|
||||||
|
|
||||||
|
# Join the traceback lines into a single string
|
||||||
|
traceback_text = ''.join(traceback_lines)
|
||||||
|
ASCIIColors.error(f"Couldn't load model: [{ex}]")
|
||||||
|
ASCIIColors.error(traceback_text)
|
||||||
|
return jsonify({ "status":False, 'error':str(ex)})
|
||||||
|
else:
|
||||||
|
ASCIIColors.warning("Trying to set a None model. Please select a model for the binding")
|
||||||
|
print("update_settings : New model selected")
|
||||||
|
|
||||||
|
return jsonify({'setting_name': data['setting_name'], "status":True})
|
||||||
|
|
||||||
|
self.app.add_url_rule(
|
||||||
|
"/update_setting", "update_setting", update_setting, methods=["POST"]
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
def list_mounted_personalities():
|
||||||
|
if self.binding is not None:
|
||||||
|
ASCIIColors.yellow("Listing mounted personalities")
|
||||||
|
return jsonify(self.config.personalities)
|
||||||
|
else:
|
||||||
|
return jsonify([])
|
||||||
|
|
||||||
|
self.app.add_url_rule(
|
||||||
|
"/list_mounted_personalities", "list_mounted_personalities", list_mounted_personalities, methods=["GET"]
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
self.socketio = SocketIO(self.app, cors_allowed_origins='*', ping_timeout=1200, ping_interval=4000)
|
self.socketio = SocketIO(self.app, cors_allowed_origins='*', ping_timeout=1200, ping_interval=4000)
|
||||||
|
|
||||||
# Set log level to warning
|
# Set log level to warning
|
||||||
@ -106,7 +191,7 @@ class LoLLMsServer(LollmsApplication):
|
|||||||
self.socketio_log.addHandler(logging.StreamHandler())
|
self.socketio_log.addHandler(logging.StreamHandler())
|
||||||
|
|
||||||
self.initialize_routes()
|
self.initialize_routes()
|
||||||
self.run(args.host, args.port)
|
self.run(self.config.host, self.config.port)
|
||||||
|
|
||||||
|
|
||||||
def initialize_routes(self):
|
def initialize_routes(self):
|
||||||
|
|||||||
@ -8,7 +8,7 @@ enable_gpu: true
|
|||||||
|
|
||||||
# Host information
|
# Host information
|
||||||
host: localhost
|
host: localhost
|
||||||
port: 9600
|
port: 9601
|
||||||
|
|
||||||
# Genreration parameters
|
# Genreration parameters
|
||||||
discussion_prompt_separator: "!@>"
|
discussion_prompt_separator: "!@>"
|
||||||
|
|||||||
@ -284,7 +284,7 @@ Date: {{date}}
|
|||||||
def add_file(self, path, callback=None):
|
def add_file(self, path, callback=None):
|
||||||
|
|
||||||
self.files.append(path)
|
self.files.append(path)
|
||||||
db_path = self.lollms_paths.personal_databases_path / self.name / "db.json"
|
db_path = self.lollms_paths.personal_databases_path / "personalities" / self.name / "db.json"
|
||||||
db_path.parent.mkdir(parents=True, exist_ok=True)
|
db_path.parent.mkdir(parents=True, exist_ok=True)
|
||||||
if self.vectorizer is None:
|
if self.vectorizer is None:
|
||||||
self.vectorizer = TextVectorizer(self.config.data_vectorization_method, # supported "model_embedding" or "ftidf_vectorizer"
|
self.vectorizer = TextVectorizer(self.config.data_vectorization_method, # supported "model_embedding" or "ftidf_vectorizer"
|
||||||
|
|||||||
@ -142,9 +142,21 @@ class MainMenu(Menu):
|
|||||||
|
|
||||||
def main_settings(self):
|
def main_settings(self):
|
||||||
self.show([
|
self.show([
|
||||||
{'name': 'Set user name', 'fn': self.set_user_name, 'help': "Sets the user name."},
|
{'name': 'Set host', 'fn': self.set_host, 'help': "Sets the host name."},
|
||||||
|
{'name': 'Set port', 'fn': self.set_port, 'help': "Sets the port number."},
|
||||||
|
{'name': 'Set user name', 'fn': self.set_user_name, 'help': "Sets t1he user name."},
|
||||||
{'name': 'Set use user name in discussion', 'fn': self.set_use_user_name_in_discussions, 'help': "Sets the user name."},
|
{'name': 'Set use user name in discussion', 'fn': self.set_use_user_name_in_discussions, 'help': "Sets the user name."},
|
||||||
])
|
])
|
||||||
|
def set_host(self):
|
||||||
|
print(f"Current host name : {self.lollms_app.config.host}")
|
||||||
|
self.lollms_app.config.host = input("New host name:")
|
||||||
|
self.lollms_app.config.save_config()
|
||||||
|
|
||||||
|
def set_port(self):
|
||||||
|
print(f"Current port number : {self.lollms_app.config.port}")
|
||||||
|
self.lollms_app.config.port = int(input("New port number:"))
|
||||||
|
self.lollms_app.config.save_config()
|
||||||
|
|
||||||
|
|
||||||
def set_user_name(self):
|
def set_user_name(self):
|
||||||
print(f"Current user name : {self.lollms_app.config.user_name}")
|
print(f"Current user name : {self.lollms_app.config.user_name}")
|
||||||
|
|||||||
4
setup.py
4
setup.py
@ -26,7 +26,7 @@ def get_all_files(path):
|
|||||||
|
|
||||||
setuptools.setup(
|
setuptools.setup(
|
||||||
name="lollms",
|
name="lollms",
|
||||||
version="4.2.2",
|
version="4.5.0",
|
||||||
author="Saifeddine ALOUI",
|
author="Saifeddine ALOUI",
|
||||||
author_email="aloui.saifeddine@gmail.com",
|
author_email="aloui.saifeddine@gmail.com",
|
||||||
description="A python library for AI personality definition",
|
description="A python library for AI personality definition",
|
||||||
@ -41,7 +41,7 @@ setuptools.setup(
|
|||||||
'lollms-server = lollms.apps.server:main',
|
'lollms-server = lollms.apps.server:main',
|
||||||
'lollms-console = lollms.apps.console:main',
|
'lollms-console = lollms.apps.console:main',
|
||||||
'lollms-settings = lollms.apps.settings:main',
|
'lollms-settings = lollms.apps.settings:main',
|
||||||
'lollms-playground = lollms.apps.playground2:main'
|
'lollms-playground = lollms.apps.playground:main'
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
extras_require={"dev": requirements_dev},
|
extras_require={"dev": requirements_dev},
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user