New lollms version with much more control

This commit is contained in:
Saifeddine ALOUI 2023-08-27 01:15:52 +02:00
parent dac0bb39b2
commit 65adad84b3
64 changed files with 256 additions and 3573 deletions

View File

@ -1,5 +1,8 @@
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 *.pyc
global-exclude local_config.yaml

View File

@ -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
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('/')
def index():
@ -9,9 +21,138 @@ def index():
@app.route('/<path:filename>')
def serve_file(filename):
root_dir = "static/"
root_dir = "dist/"
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():
app.run()

View File

Before

Width: 128px  |  Height: 128px  |  Size: 66 KiB

After

Width: 128px  |  Height: 128px  |  Size: 66 KiB

View File

@ -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.*

View File

@ -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.

View File

@ -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>
![GitHub license](https://img.shields.io/github/license/ParisNeo/lollms-playground)
![GitHub issues](https://img.shields.io/github/issues/ParisNeo/lollms-playground)
![GitHub stars](https://img.shields.io/github/stars/ParisNeo/lollms-playground)
![GitHub forks](https://img.shields.io/github/forks/ParisNeo/lollms-playground)
[![Discord](https://img.shields.io/discord/1092918764925882418?color=7289da&label=Discord&logo=discord&logoColor=ffffff)](https://discord.gg/4rR282WJb6)
[![Follow me on Twitter](https://img.shields.io/twitter/follow/SpaceNerduino?style=social)](https://twitter.com/SpaceNerduino)
[![Follow Me on YouTube](https://img.shields.io/badge/Follow%20Me%20on-YouTube-red?style=flat&logo=youtube)](https://www.youtube.com/user/Parisneo)
[![pages-build-deployment](https://github.com/ParisNeo/lollms-playground/actions/workflows/pages/pages-build-deployment/badge.svg)](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.
![image](https://github.com/ParisNeo/lollms-playground/assets/827993/f69811c5-b029-4321-b31a-e4699b57ff49)
4. Press the icon to get to the connection ui.
![image](https://github.com/ParisNeo/lollms-playground/assets/827993/df7de411-8017-4f8a-a86a-c9482f62ef94)
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.
![image](https://github.com/ParisNeo/lollms-playground/assets/827993/bb112985-b55a-4b31-9aa4-e42c0e703610)
6. Once connected, you can enter a prompt and click the "Generate Text" button to initiate text generation.
![image](https://github.com/ParisNeo/lollms-playground/assets/827993/6c91dc3a-887f-410f-a0ff-c10331f5a6a6)
7. The generated text will be displayed in the output section of the page.
![image](https://github.com/ParisNeo/lollms-playground/assets/827993/ae7733ab-f7aa-4fe8-8f51-33afa6ab903b)
![image](https://github.com/ParisNeo/lollms-playground/assets/827993/33e95e4e-3763-4d4c-b1a7-1e3620f416bc)
## 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).
```

View File

@ -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

(image error) Size: 459 KiB

View File

@ -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>

View File

@ -1,5 +0,0 @@
{
"dependencies": {
"http-server": "^14.1.1"
}
}

View File

@ -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()

View File

@ -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

(image error) Size: 245 KiB

File diff suppressed because one or more lines are too long

Before

(image error) Size: 7.5 KiB

View File

@ -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.

View File

@ -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.

Before

(image error) Size: 459 KiB

View File

@ -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

(image error) Size: 8.8 KiB

View File

@ -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;
}

View File

@ -1,12 +0,0 @@
<template>
<button type="button" class="btn">
<slot></slot>
</button>
</template>
<script>
export default {
name: 'Button',
};
</script>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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')

View File

@ -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];
}

View File

@ -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

View File

@ -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;

View File

@ -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>

View File

@ -23,6 +23,7 @@ import yaml
import copy
import gc
import json
import traceback
import shutil
@ -38,9 +39,6 @@ def reset_all_installs(lollms_paths:LollmsPaths):
class LoLLMsServer(LollmsApplication):
def __init__(self):
host = "localhost"
port = "9601"
self.clients = {}
self.current_binding = None
self.model = None
@ -50,8 +48,8 @@ class LoLLMsServer(LollmsApplication):
parser = argparse.ArgumentParser()
parser.add_argument('--host', '-hst', default=host, help='Host name')
parser.add_argument('--port', '-prt', default=port, help='Port number')
parser.add_argument('--host', '-hst', default=None, help='Host name')
parser.add_argument('--port', '-prt', default=None, help='Port number')
parser.add_argument('--reset_personal_path', action='store_true', help='Reset the personal path')
@ -81,6 +79,12 @@ class LoLLMsServer(LollmsApplication):
# Configuration loading part
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)
self.menu.show_logo()
@ -96,6 +100,87 @@ class LoLLMsServer(LollmsApplication):
"/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)
# Set log level to warning
@ -106,7 +191,7 @@ class LoLLMsServer(LollmsApplication):
self.socketio_log.addHandler(logging.StreamHandler())
self.initialize_routes()
self.run(args.host, args.port)
self.run(self.config.host, self.config.port)
def initialize_routes(self):

View File

@ -8,7 +8,7 @@ enable_gpu: true
# Host information
host: localhost
port: 9600
port: 9601
# Genreration parameters
discussion_prompt_separator: "!@>"

View File

@ -284,7 +284,7 @@ Date: {{date}}
def add_file(self, path, callback=None):
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)
if self.vectorizer is None:
self.vectorizer = TextVectorizer(self.config.data_vectorization_method, # supported "model_embedding" or "ftidf_vectorizer"

View File

@ -142,9 +142,21 @@ class MainMenu(Menu):
def main_settings(self):
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."},
])
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):
print(f"Current user name : {self.lollms_app.config.user_name}")

View File

@ -26,7 +26,7 @@ def get_all_files(path):
setuptools.setup(
name="lollms",
version="4.2.2",
version="4.5.0",
author="Saifeddine ALOUI",
author_email="aloui.saifeddine@gmail.com",
description="A python library for AI personality definition",
@ -41,7 +41,7 @@ setuptools.setup(
'lollms-server = lollms.apps.server:main',
'lollms-console = lollms.apps.console:main',
'lollms-settings = lollms.apps.settings:main',
'lollms-playground = lollms.apps.playground2:main'
'lollms-playground = lollms.apps.playground:main'
],
},
extras_require={"dev": requirements_dev},