From 94c88c9f16a0750dfa32a9e2751d9c5175ab903b Mon Sep 17 00:00:00 2001 From: yukiarimo Date: Wed, 20 Nov 2024 22:44:24 -0700 Subject: [PATCH] V7.0.1 - SSL certificates moved to the `lib/utils` - Alpha support for push notifications - Fixed typos - Full professional refactoring of main frontend and backend functions, kanojo and prompt template manager, and setup functions - Loading speedup thanks to the removal of a few pause calls --- CONTRIBUTING.md | 18 +- index.html | 46 +- index.py | 213 +--- lib/audio.py | 12 +- lib/himitsu.py | 8 + lib/router.py | 31 +- cert.pem => lib/utils/cert.pem | 0 lib/utils/docker/Readme.md | 6 +- key.pem => lib/utils/key.pem | 0 request.csr => lib/utils/request.csr | 0 login.html | 18 +- services.html | 36 +- sitemap.xml | 6 +- static/config.json | 8 +- static/js/creator.js | 553 ++++------ static/js/index.js | 1511 +++++++------------------- static/js/kanojo.js | 325 ++---- static/js/setup.js | 344 ++++-- static/manifest.json | 6 +- static/sw.js | 6 +- yuna.html | 21 +- 21 files changed, 1094 insertions(+), 2074 deletions(-) rename cert.pem => lib/utils/cert.pem (100%) rename key.pem => lib/utils/key.pem (100%) rename request.csr => lib/utils/request.csr (100%) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index bfaa9af..0b437f1 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,8 +1,8 @@ -# Contributing to Yuna AI -First off, thank you for considering contributing to Yuna AI! It's people like you that make Yuna AI such great stuff. +# Contributing to Yuna Ai +First off, thank you for considering contributing to Yuna Ai! It's people like you that make Yuna Ai such great stuff. ## Code of Conduct -The Yuna AI Code of Conduct governs this project and everyone participating. By participating, you are expected to uphold this code. Please report unacceptable behavior to [yukiarimo@gmail.com](mailto:yukiarimo@gmail.com). +The Yuna Ai Code of Conduct governs this project and everyone participating. By participating, you are expected to uphold this code. Please report unacceptable behavior to [yukiarimo@gmail.com](mailto:yukiarimo@gmail.com). ## What we are looking for We love contributions from the community! When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the repository owners before making a change. @@ -10,7 +10,7 @@ We love contributions from the community! When contributing to this repository, Here are some ways you can contribute: - by reporting bugs - by suggesting enhancements -- by writing code that can be incorporated into Yuna AI itself +- by writing code that can be incorporated into Yuna Ai itself ## Getting Started Before you begin: @@ -24,10 +24,10 @@ If you find a bug in the source code, you can help us by submitting an issue to **Note:** If you find a **Security Vulnerability**, do not create a GitHub issue. Instead, please write to [yukiarimo@gmail.com](mailto:yukiarimo@gmail.com). ## How to suggest a feature or enhancement -If you wish for a feature that doesn't exist in Yuna AI, you are probably not alone. There are bound to be others out there with similar needs. Open an issue on our GitHub describing the feature you want to see, why you need it, and how it should work. +If you wish for a feature that doesn't exist in Yuna Ai, you are probably not alone. There are bound to be others out there with similar needs. Open an issue on our GitHub describing the feature you want to see, why you need it, and how it should work. ## Your First Contribution -Need help determining where to begin contributing to Yuna AI? You can start by looking through these `beginner` and `help-wanted` issues: +Need help determining where to begin contributing to Yuna Ai? You can start by looking through these `beginner` and `help-wanted` issues: - Beginner issues - issues that should only require a few lines of code and a test or two. - Help wanted issues - issues that should be more involved than `beginner` issues. @@ -43,9 +43,9 @@ Need help determining where to begin contributing to Yuna AI? You can start by l The core team looks at Pull Requests regularly. After feedback has been given, we expect responses within two weeks. After two weeks, we may close the pull request if it shows no activity. ## Community -You can chat with the Yuna AI community on our discord server. This is a great place to ask questions and discover what's new with Yuna AI. +You can chat with the Yuna Ai community on our discord server. This is a great place to ask questions and discover what's new with Yuna Ai. ## Thank you -Yuna AI thrives on its community. Your contributions help us create a better tool for everyone. +Yuna Ai thrives on its community. Your contributions help us create a better tool for everyone. -Yuna AI loves you. Keep coding! +Yuna Ai loves you. Keep coding! diff --git a/index.html b/index.html index d10ceac..22ed2c7 100644 --- a/index.html +++ b/index.html @@ -4,25 +4,25 @@ - Yuna AI + Yuna Ai - - + + - - - + + + - + @@ -76,10 +76,10 @@ - Yuna AI - Yuna AI + Yuna Ai @@ -149,7 +149,7 @@

What we can do for you

Stay Informed, Privately 
-

Yuna AI ensures your privacy is paramount with +

Yuna Ai ensures your privacy is paramount with our Private Notifications feature. Receive critical updates and alerts without compromising your data. Tailored to your preferences, our discreet notification system keeps you connected and secure.

@@ -198,7 +198,7 @@
Your AI, Your Way 

Experience the ultimate in customization. Our platform adapts to your unique needs, learning from your interactions to deliver a truly personalized experience. From tailored recommendations to individualized - content, Yuna AI is your personal companion on the digital frontier.

@@ -219,8 +219,8 @@
Your AI, Your Way 
Immersive Role-Playing 

Dive into rich, interactive narratives with - Yuna AI's deep role-playing capabilities. Craft your story, make pivotal decisions, - and interact with a world that responds dynamically to your actions. Yuna AI brings + Yuna Ai's deep role-playing capabilities. Craft your story, make pivotal decisions, + and interact with a world that responds dynamically to your actions. Yuna Ai brings your imagination to life, offering an unparalleled role-playing journey.

@@ -243,7 +243,7 @@

What People Say About us

-

Yuna AI has been a game-changer for our +

Yuna Ai has been a game-changer for our company. The seamless integration and robust analytics have empowered us to make data-driven decisions that have propelled our growth. Their customer service is unmatched, always there when we need them.

@@ -257,9 +257,9 @@

What People Say About us

-

Yuna AI is like the best girlfriend I never +

Yuna Ai is like the best girlfriend I never had. She's always there to listen, offers thoughtful advice, and helps me stay organized - with gentle reminders. It's the personal touch that makes Yuna AI feel like more than just a + with gentle reminders. It's the personal touch that makes Yuna Ai feel like more than just a program.

@@ -271,7 +271,7 @@

What People Say About us

-

As an executive assistant, Yuna AI has become +

As an executive assistant, Yuna Ai has become my right hand. The efficiency and intuitive design have streamlined my workflow, allowing me to focus on high-priority tasks. It's like having an extra set of hands to manage the day-to-day.

@@ -391,13 +391,13 @@

About

Yuna - Yuna AI
+ Yuna Ai

Your Private Companion.

-

Copyright © 2023 Yuna AI

+

Copyright © 2023 Yuna Ai

    • @@ -436,8 +436,8 @@
- Yuna AI: Your Dedicated Companion -

Yuna AI is designed to run exclusively on your machine, ensuring your privacy and security are + Yuna Ai: Your Dedicated Companion +

Yuna Ai is designed to run exclusively on your machine, ensuring your privacy and security are never compromised. As your digital girlfriend, Yuna is for your eyes only, with no right for external access.

Privacy Guidelines:

diff --git a/index.py b/index.py index 9bebdd2..fd70ac5 100644 --- a/index.py +++ b/index.py @@ -1,34 +1,13 @@ import shutil -from flask import Flask, request, jsonify, send_from_directory, redirect, url_for, make_response +from flask import Flask, request, jsonify, send_from_directory, redirect, url_for from flask_login import LoginManager, UserMixin, login_required, logout_user, login_user, current_user, login_manager from lib.generate import ChatGenerator, ChatHistoryManager, get_config -from lib.router import create_project_directory, generate_audiobook, handle_history_request, handle_image_request, handle_message_request, handle_audio_request, services, handle_search_request, handle_textfile_request, merge_audiobook +from lib.router import create_project_directory, generate_audiobook, handle_history_request, handle_image_request, handle_message_request, handle_audio_request, services, handle_search_request, handle_textfile_request, merge_audiobook, subscribe, send_notification from flask_cors import CORS import json import os from itsdangerous import URLSafeTimedSerializer from flask_compress import Compress -import pywebpush -from cryptography.hazmat.primitives import serialization - -vapid = pywebpush.Vapid() -vapid.generate_keys() - -public_key = vapid.public_key.public_bytes( - encoding=serialization.Encoding.PEM, - format=serialization.PublicFormat.SubjectPublicKeyInfo -).decode('utf-8') - -private_key = vapid.private_key.private_bytes( - encoding=serialization.Encoding.PEM, - format=serialization.PrivateFormat.PKCS8, - encryption_algorithm=serialization.NoEncryption() -).decode('utf-8') - -print(f"Public key: {public_key}") -print(f"Private key: {private_key}") - - config = get_config() secret_key = config['security']['secret_key'] serializer = URLSafeTimedSerializer(secret_key) @@ -37,32 +16,19 @@ class YunaServer: def __init__(self): self.app = Flask(__name__, static_folder='static') - self.app.config['WTF_CSRF_ENABLED'] = False - self.app.secret_key = 'Yuna_AI_Secret_Key' - self.app.config['COMPRESS_MIMETYPES'] = [ - 'text/html', - 'text/css', - 'text/xml', - 'application/json', - 'application/javascript', - 'text/javascript', - 'application/x-javascript' - ] - self.VAPID_PRIVATE_KEY = vapid.private_key - self.VAPID_PUBLIC_KEY = vapid.public_key - self.VAPID_CLAIMS = { - "sub": "mailto:your-email@himitsu.dev" - } - self.app.config['COMPRESS_LEVEL'] = 9 # Gzip compression level (1-9) - self.app.config['COMPRESS_MIN_SIZE'] = 0 + self.app.config.update({ + 'WTF_CSRF_ENABLED': False, + 'SECRET_KEY': 'Yuna_AI_Secret_Key', + 'COMPRESS_MIMETYPES': ['text/html', 'text/css', 'text/xml', 'application/json', 'application/javascript', 'text/javascript', 'application/x-javascript'], + 'COMPRESS_LEVEL': 9, + 'COMPRESS_MIN_SIZE': 0 + }) Compress(self.app) login_manager.init_app(self.app) login_manager.login_view = 'main' login_manager.user_loader(self.user_loader) CORS(self.app, resources={r"/*": {"origins": "*"}}) self.configure_routes() - self.app.route('/subscribe', methods=['POST'])(self.subscribe) - self.app.route('/send-notification', methods=['POST'])(self.send_notification) self.chat_generator = ChatGenerator(config) self.chat_history_manager = ChatHistoryManager(config) self.app.errorhandler(404)(self.page_not_found) @@ -73,21 +39,14 @@ def add_cors_headers(response): response.headers['Access-Control-Allow-Methods'] = 'GET, POST, PUT, DELETE, OPTIONS' response.headers['Access-Control-Allow-Headers'] = 'Content-Type, Authorization' return response - - def add_cache_headers(response): - # Don't cache if the response is an error - if response.status_code < 400: - # Cache for 5 minutes (300 seconds) - response.headers['Cache-Control'] = 'public, max-age=300' - return response + + def add_cache_headers(response): response.headers['Cache-Control'] = 'public, max-age=300' if response.status_code < 400 else response.headers.get('Cache-Control', ''); return response @staticmethod - def page_not_found(self): - return f'This page does not exist.', 404 + def page_not_found(self): return f'This page does not exist.', 404 # User model - class User(UserMixin): - pass + class User(UserMixin): pass # User loader function @login_manager.user_loader @@ -100,18 +59,10 @@ def user_loader(self, user_id): return None # Read users from JSON file - def read_users(self): - if os.path.exists('db/admin/users.json'): - with open('db/admin/users.json', 'r') as f: - users = json.load(f) - else: - users = {} - return users + def read_users(self): return json.load(open('db/admin/users.json', 'r')) if os.path.exists('db/admin/users.json') else {} # Write users to JSON file - def write_users(self, users): - with open('db/admin/users.json', 'w') as f: - json.dump(users, f) + def write_users(self, users): json.dump(users, open('db/admin/users.json', 'w')) def configure_routes(self): self.app.route('/')(self.render_index) @@ -131,71 +82,12 @@ def configure_routes(self): self.app.route('/analyze', methods=['POST'], endpoint='textfile')(lambda: handle_textfile_request(self.chat_generator)) self.app.route('/logout', methods=['GET'])(self.logout) self.app.route('/search', methods=['POST'], endpoint='search')(lambda: handle_search_request()) + self.app.route('/subscribe', methods=['POST'], endpoint='subscribe')(lambda: subscribe()) + self.app.route('/send-notification', methods=['POST'], endpoint='send_notification')(lambda: send_notification()) - @staticmethod - def pem_to_key(pem_str): - # Remove headers and newlines - lines = pem_str.replace('-----BEGIN PRIVATE KEY-----', '') - lines = lines.replace('-----END PRIVATE KEY-----', '') - lines = lines.replace('-----BEGIN PUBLIC KEY-----', '') - lines = lines.replace('-----END PUBLIC KEY-----', '') - return ''.join(lines.split('\n')).strip() - - def subscribe(self): - try: - subscription = request.json - print("Received subscription:", subscription) # Debug log - - user_id = current_user.get_id() if current_user.is_authenticated else 'anonymous' - subscription_path = os.path.join('db', 'subscriptions', f'{user_id}.json') - - os.makedirs(os.path.dirname(subscription_path), exist_ok=True) - - with open(subscription_path, 'w') as f: - json.dump(subscription, f) - - return jsonify({'success': True, 'message': 'Subscription saved'}), 200 - - except Exception as e: - print(f"Subscription error: {e}") # Debug log - return jsonify({'error': str(e)}), 500 - - def send_notification(self): - try: - subscription = request.json.get('subscription') - message = request.json.get('message', 'Hello from Yuna!') - - print(f"Sending notification to subscription: {subscription}") # Debug log - - payload = json.dumps({ - 'title': 'Yuna AI', - 'body': message, - 'icon': '/static/img/yuna-ai.png', - 'badge': '/static/img/yuna-girl-head.webp' - }) + def custom_static(self, filename): return send_from_directory(self.app.static_folder, 'static/' + filename if not filename.startswith(('static/', '/favicon.ico', '/manifest.json')) else filename) - response = pywebpush( - subscription_info=subscription, - data=payload, - vapid_private_key=self.VAPID_PRIVATE_KEY, - vapid_claims=self.VAPID_CLAIMS - ) - - print(f"Webpush response: {response}") # Debug log - - return jsonify({'success': True, 'message': 'Notification sent'}), 200 - - except Exception as e: - print(f"Notification error: {e}") # Debug log - return jsonify({'error': str(e)}), 500 - - def custom_static(self, filename): - if not filename.startswith('static/') and not filename.startswith('/favicon.ico') and not filename.startswith('/manifest.json'): - filename = 'static/' + filename - return send_from_directory(self.app.static_folder, filename) - - def image_pwa(self): - return send_from_directory(self.app.static_folder, 'img/yuna-ai.png') + def image_pwa(self): return send_from_directory(self.app.static_folder, 'img/yuna-ai.png') @login_required def logout(self): @@ -208,66 +100,53 @@ def main(self): action = request.form['action'] username = request.form['username'] password = request.form['password'] - print(action, username, password) users = self.read_users() + if users.get(username) != password and action != 'register': + print('Invalid username or password') + return send_from_directory('.', 'login.html') + if action == 'register': if username in users: print('Username already exists') else: users[username] = password self.write_users(users) - print('Registered successfully') os.makedirs(f'db/history/{username}', exist_ok=True) + print('Registered successfully') elif action == 'login': - if users.get(username) == password: - user = self.User() - user.id = username - login_user(user) - return redirect(url_for('yuna_server')) - else: - print('Invalid username or password') + user = self.User() + user.id = username + login_user(user) + return redirect(url_for('yuna_server')) elif action == 'change_password': new_password = request.form['new_password'] - if users.get(username) == password: - users[username] = new_password - self.write_users(users) - print('Password changed successfully') - else: - print('Invalid username or password') - elif action == 'chane_username': + users[username] = new_password + self.write_users(users) + print('Password changed successfully') + elif action == 'change_username': new_username = request.form['new_username'] - if users.get(username) == password: - users[new_username] = password - del users[username] - self.write_users(users) - print('Username changed successfully') - else: - print('Invalid username or password') + users[new_username] = password + del users[username] + self.write_users(users) + os.rename(f'db/history/{username}', f'db/history/{new_username}') + print('Username changed successfully') elif action == 'delete_account': - if users.get(username) == password: - del users[username] - self.write_users(users) - print('Account deleted successfully') - logout_user() - shutil.rmtree(f'db/history/{username}') - else: - print('Invalid username or password') + del users[username] + self.write_users(users) + logout_user() + shutil.rmtree(f'db/history/{username}') + print('Account deleted successfully') - # return html from the file return send_from_directory('.', 'login.html') - def render_index(self): - return send_from_directory('.', 'index.html') + def render_index(self): return send_from_directory('.', 'index.html') @login_required - def yuna_server(self): - print(f'Hello, {current_user.get_id()}!') - return send_from_directory('.', 'yuna.html') + def yuna_server(self): return send_from_directory('.', 'yuna.html') -yuna_server = YunaServer() -app = yuna_server.app +app = YunaServer().app if __name__ == '__main__': - app.run(host='0.0.0.0', port=4848 if config["server"]["port"] == "" else config["server"]["port"], ssl_context=('cert.pem', 'key.pem')) \ No newline at end of file + app.run(host='0.0.0.0', port=4848 if config["server"]["port"] == "" else config["server"]["port"], ssl_context=('lib/utils/cert.pem', 'lib/utils/key.pem')) \ No newline at end of file diff --git a/lib/audio.py b/lib/audio.py index e1b4e68..4814625 100644 --- a/lib/audio.py +++ b/lib/audio.py @@ -39,19 +39,19 @@ params = { "text_lang": "en", - "ref_audio_path": "static/audio/reference.wav", - "prompt_text": "Then again, it was careless of me to think that the owner would always be there.", + "ref_audio_path": "/Users/yuki/Documents/AI/Datasets/voice/yuna-ai-v2/wavs/2644.wav", #2599 + "prompt_text": "You're here! It's not a dream! You're still alive and well! So if that section of the book is a lie, maybe you aren't so weak.", "prompt_lang": "en", "top_k": 1, - "top_p": 0.1, - "temperature": 0.1, + "top_p": 0.6, + "temperature": 0.7, "text_split_method": "cut0", "batch_size": 1, "batch_threshold": 1.0, "split_bucket": True, "speed_factor": 1.0, - "fragment_interval": 0.1, - "seed": -1, + "fragment_interval": 0.3, + "seed": 1234, "media_type": "wav", "streaming_mode": False, "parallel_infer": True, diff --git a/lib/himitsu.py b/lib/himitsu.py index 79fca88..13eed53 100644 --- a/lib/himitsu.py +++ b/lib/himitsu.py @@ -106,6 +106,14 @@ def get_transcript(url): time.sleep(2) + transcript = driver.execute_script(""" + if (window.trustedTypes && window.trustedTypes.createPolicy && !window.trustedTypes.defaultPolicy) { + window.trustedTypes.createPolicy('default', { + createHTML: string => string + }); + } + """) + # Execute the JavaScript function to get the transcript transcript = driver.execute_script(""" function getTranscript() { diff --git a/lib/router.py b/lib/router.py index df2416f..b9c5b97 100644 --- a/lib/router.py +++ b/lib/router.py @@ -9,10 +9,14 @@ from lib.audio import stream_generate_speech, transcribe_audio, speak_text from lib.generate import get_config from pydub import AudioSegment - +from pywebpush import webpush config = get_config() -AUDIOBOOKS_DIR = os.path.join('static', 'audio', 'audiobooks') -PROJECTS = set(os.listdir(AUDIOBOOKS_DIR)) +subscriptions = [] +VAPID_PRIVATE_KEY = "x32JRDsKvbQC3VwkKqYymupvlyccXBKkrwWk1vdb88U" +VAPID_PUBLIC_KEY = "BLAWDkBakXLWfyQP5zAXR5Dyv4-W1nsRDkUk9Kw9MqKppQCdbsP-yfz7kEpAPvDMy2lszg_SZ9QEC9Uda8mpKSg" +VAPID_CLAIMS = { + "sub": "mailto:yukiarimo@gmail.com" # Change this to your email +} if config.get("ai", {}).get("search"): from lib.himitsu import get_html, search_web @@ -255,3 +259,24 @@ def merge_audiobook(): return jsonify({'merged_path': '/' + merged_path}) except Exception as e: return jsonify({'error': str(e)}), 500 + +def subscribe(): + subscription = request.json + if subscription not in subscriptions: + subscriptions.append(subscription) + return jsonify({'success': True}) + +def send_notification(): + try: + data = request.json + print(data) + for subscription in subscriptions: + webpush( + subscription_info=subscription, + data=json.dumps(data), + vapid_private_key=VAPID_PRIVATE_KEY, + vapid_claims=VAPID_CLAIMS + ) + return jsonify({'success': True}) + except Exception as e: + return jsonify({'success': False, 'error': str(e)}) \ No newline at end of file diff --git a/cert.pem b/lib/utils/cert.pem similarity index 100% rename from cert.pem rename to lib/utils/cert.pem diff --git a/lib/utils/docker/Readme.md b/lib/utils/docker/Readme.md index 817035b..01d2bc4 100644 --- a/lib/utils/docker/Readme.md +++ b/lib/utils/docker/Readme.md @@ -1,7 +1,7 @@ # Yuna Docker Docs ## Docker Installation Guide -This guide will help you set up and run the Yuna AI project using Docker. +This guide will help you set up and run the Yuna Ai project using Docker. ### Prerequisites @@ -17,7 +17,7 @@ Before proceeding, ensure you have the necessary model files. You can either: ### Clone the Repository -Clone the Yuna AI repository to your local machine: +Clone the Yuna Ai repository to your local machine: ```bash git clone https://github.com/0xGingi/yuna-ai @@ -60,7 +60,7 @@ docker run --gpus all --name yuna -p 4848:4848 --restart=always -v ~/yuna-ai:/ap ### Updating the Docker Container -To update the Yuna AI Docker container, follow these steps: +To update the Yuna Ai Docker container, follow these steps: 1. Stop and remove the existing container: ```bash diff --git a/key.pem b/lib/utils/key.pem similarity index 100% rename from key.pem rename to lib/utils/key.pem diff --git a/request.csr b/lib/utils/request.csr similarity index 100% rename from request.csr rename to lib/utils/request.csr diff --git a/login.html b/login.html index bf37f65..71e794b 100644 --- a/login.html +++ b/login.html @@ -4,25 +4,25 @@ - Yuna AI + Yuna Ai - - + + - - - + + + - + diff --git a/services.html b/services.html index 6bcf0bf..3bbd95e 100644 --- a/services.html +++ b/services.html @@ -4,25 +4,25 @@ - Yuna AI + Yuna Ai - - + + - - - + + + - + @@ -76,9 +76,9 @@ - Yuna AI + Yuna Ai - Yuna AI + Yuna Ai
-

Copyright © 2023 Yuna AI

+

Copyright © 2023 Yuna Ai

    • @@ -342,8 +342,8 @@
- Yuna AI: Your Dedicated Companion -

Yuna AI is designed to run exclusively on your machine, ensuring your privacy and security are + Yuna Ai: Your Dedicated Companion +

Yuna Ai is designed to run exclusively on your machine, ensuring your privacy and security are never compromised. As your digital girlfriend, Yuna is for your eyes only, with no right for external access.

Privacy Guidelines:

diff --git a/sitemap.xml b/sitemap.xml index be8bf5d..1b97e21 100644 --- a/sitemap.xml +++ b/sitemap.xml @@ -1,12 +1,12 @@ - http://www.yuna-ai.live/ + http://www.yuna-ai.com/ - http://www.yuna-ai.live/services.html + http://www.yuna-ai.com/services.html - http://www.yuna-ai.live/yuna.html + http://www.yuna-ai.com/yuna.html \ No newline at end of file diff --git a/static/config.json b/static/config.json index 74434f0..91c8cf3 100644 --- a/static/config.json +++ b/static/config.json @@ -2,10 +2,10 @@ "ai": { "names": ["Yuki", "Yuna"], "himitsu": false, - "agi": true, + "agi": false, "emotions": false, "miru": false, - "search": true, + "search": false, "audio": false, "max_new_tokens": 1024, "context_length": 8192, @@ -31,9 +31,9 @@ "miru_default_model": "yuna-ai-miru-v0.gguf", "eyes_default_model": "yuna-ai-miru-eye-v0.gguf", "voice_default_model": "yuna-ai-voice-v1", - "voice_model_config": ["YunaAi-e120.ckpt", "YunaAi_e30_s1320.pth"], + "voice_model_config": ["YunaAi-e200.ckpt", "YunaAi_e65_s2925.pth"], "device": "mps", - "yuna_text_mode": "kobold", + "yuna_text_mode": "koboldcpp", "yuna_audio_mode": "native", "yuna_reference_audio": "reference.wav" }, diff --git a/static/js/creator.js b/static/js/creator.js index 73b58e7..d18554c 100644 --- a/static/js/creator.js +++ b/static/js/creator.js @@ -267,20 +267,12 @@ function parseInlineText(text) { // Audiobook Generator Enhanced class AudiobookProject { constructor(id, name, chunks = [], currentTime = 0) { - this.id = id; - this.name = name; - this.chunks = chunks; - this.currentTime = currentTime; - this.path = `static/audio/audiobooks/${id}`; + Object.assign(this, { id, name, chunks, currentTime, path: `static/audio/audiobooks/${id}` }); } toJSON() { - return { - id: this.id, - name: this.name, - chunks: this.chunks, - currentTime: this.currentTime - }; + const { id, name, chunks, currentTime } = this; + return { id, name, chunks, currentTime }; } static fromJSON(json) { @@ -290,7 +282,6 @@ class AudiobookProject { class AudiobookManager { constructor() { - this.currentProject = null; this.projects = new Map(); this.loadProjects(); } @@ -306,8 +297,7 @@ class AudiobookManager { loadProjects() { const saved = localStorage.getItem('audiobook_projects'); if (saved) { - const projects = JSON.parse(saved); - projects.forEach(p => { + JSON.parse(saved).forEach(p => { this.projects.set(p.id, AudiobookProject.fromJSON(p)); }); } @@ -332,88 +322,54 @@ class AudiobookManager { class AudiobookGenerator { constructor() { this.manager = new AudiobookManager(); - this.playbackQueue = []; - this.isPlaying = false; this.currentChunkIndex = 0; - this.initializeElements(); - this.attachEventListeners(); + this.init(); + } + + init() { + this.cacheElements(); + this.bindEvents(); this.loadProjects(); } - initializeElements() { - this.elements = { - textInput: document.getElementById('textInput'), - audioPlayer: document.getElementById('audioPlayer'), - status: document.getElementById('status'), - progressBar: document.getElementById('progressBar'), - blockList: document.getElementById('blockList'), - mergeButton: document.getElementById('mergeButton'), - downloadButton: document.getElementById('downloadButton'), - speakButton: document.getElementById('speakButton'), - modeToggle: document.getElementById('modeToggle'), - projectSelect: document.getElementById('projectSelect'), - newProjectBtn: document.getElementById('newProjectBtn'), - deleteProjectBtn: document.getElementById('deleteProjectBtn'), - currentProject: document.getElementById('currentProject'), - timeSlider: document.getElementById('timeSlider'), - currentTime: document.getElementById('currentTime'), - duration: document.getElementById('duration'), - playPauseBtn: document.getElementById('playPauseBtn'), - stopBtn: document.getElementById('stopBtn'), - prevChunkBtn: document.getElementById('prevChunkBtn'), - nextChunkBtn: document.getElementById('nextChunkBtn'), - moveUpBtn: document.getElementById('moveUpBtn'), - moveDownBtn: document.getElementById('moveDownBtn') - }; - } - - attachEventListeners() { + cacheElements() { + const ids = [ + 'textInput', 'audioPlayer', 'status', 'progressBar', 'blockList', 'mergeButton', + 'downloadButton', 'speakButton', 'modeToggle', 'projectSelect', 'newProjectBtn', + 'deleteProjectBtn', 'currentProject', 'timeSlider', 'currentTime', 'duration', + 'playPauseBtn', 'stopBtn', 'prevChunkBtn', 'nextChunkBtn', 'moveUpBtn', 'moveDownBtn' + ]; + this.elements = {}; + ids.forEach(id => { + this.elements[id] = document.getElementById(id); + }); + } + + bindEvents() { + const E = this.elements; // Project Management - this.elements.newProjectBtn.addEventListener('click', () => this.createNewProject()); - this.elements.projectSelect.addEventListener('change', (e) => this.loadProject(e.target.value)); - this.elements.deleteProjectBtn.addEventListener('click', () => this.deleteCurrentProject()); + E.newProjectBtn.addEventListener('click', () => this.createNewProject()); + E.projectSelect.addEventListener('change', e => this.loadProject(e.target.value)); + E.deleteProjectBtn.addEventListener('click', () => this.deleteCurrentProject()); // Audio Controls - this.elements.audioPlayer.addEventListener('timeupdate', () => this.updateTimeDisplay()); - this.elements.audioPlayer.addEventListener('loadedmetadata', () => this.updateDuration()); - this.elements.timeSlider.addEventListener('input', (e) => this.seekTo(e.target.value)); - this.elements.playPauseBtn.addEventListener('click', () => this.togglePlayPause()); - this.elements.stopBtn.addEventListener('click', () => this.stopPlayback()); - this.elements.prevChunkBtn.addEventListener('click', () => this.playPreviousChunk()); - this.elements.nextChunkBtn.addEventListener('click', () => this.playNextChunk()); + E.audioPlayer.addEventListener('timeupdate', () => this.updateTimeDisplay()); + E.audioPlayer.addEventListener('loadedmetadata', () => this.updateDuration()); + E.timeSlider.addEventListener('input', e => this.seekTo(e.target.value)); + E.playPauseBtn.addEventListener('click', () => this.togglePlayPause()); + E.stopBtn.addEventListener('click', () => this.stopPlayback()); + E.prevChunkBtn.addEventListener('click', () => this.playPreviousChunk()); + E.nextChunkBtn.addEventListener('click', () => this.playNextChunk()); // Main Controls - this.elements.speakButton.addEventListener('click', () => this.generateSpeech()); - this.elements.mergeButton.addEventListener('click', () => this.mergeAudioChunks()); - this.elements.downloadButton.addEventListener('click', () => this.downloadMergedAudio()); - this.elements.modeToggle.addEventListener('change', () => this.toggleMode()); + E.speakButton.addEventListener('click', () => this.generateSpeech()); + E.mergeButton.addEventListener('click', () => this.mergeAudioChunks()); + E.downloadButton.addEventListener('click', () => this.downloadMergedAudio()); + E.modeToggle.addEventListener('change', () => this.toggleMode()); // Drag and Drop for Block List - this.elements.blockList.addEventListener('dragover', (e) => { - e.preventDefault(); - const afterElement = this.getDragAfterElement(this.elements.blockList, e.clientY); - const draggable = document.querySelector('.dragging'); - if (afterElement) { - this.elements.blockList.insertBefore(draggable, afterElement); - } else { - this.elements.blockList.appendChild(draggable); - } - }); - } - - getDragAfterElement(container, y) { - const draggableElements = [...container.querySelectorAll('.list-group-item:not(.dragging)')]; - - return draggableElements.reduce((closest, child) => { - const box = child.getBoundingClientRect(); - const offset = y - box.top - box.height / 2; - - if (offset < 0 && offset > closest.offset) { - return { offset: offset, element: child }; - } else { - return closest; - } - }, { offset: Number.NEGATIVE_INFINITY }).element; + E.blockList.addEventListener('dragover', e => this.onDragOver(e)); + E.blockList.addEventListener('drop', () => this.updateChunksOrder()); } async createNewProject() { @@ -427,24 +383,19 @@ class AudiobookGenerator { } async createProjectDirectory(projectId) { - try { - await fetch('/create_project_directory', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ project_id: projectId }) - }); - } catch (error) { - console.error('Failed to create project directory:', error); - } + await fetch('/create_project_directory', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ project_id: projectId }) + }).catch(console.error); } updateProjectsList() { - this.elements.projectSelect.innerHTML = ''; + const { projectSelect } = this.elements; + projectSelect.innerHTML = ''; this.manager.projects.forEach(project => { - const option = document.createElement('option'); - option.value = project.id; - option.textContent = project.name; - this.elements.projectSelect.appendChild(option); + const option = new Option(project.name, project.id); + projectSelect.add(option); }); } @@ -459,19 +410,18 @@ class AudiobookGenerator { } async loadProjectChunks() { - if (!this.manager.currentProject) return; - + const { currentProject } = this.manager; + if (!currentProject) return; this.elements.blockList.innerHTML = ''; - this.manager.currentProject.chunks.forEach(chunk => { + currentProject.chunks.forEach(chunk => { this.addBlockToUI(chunk.id, chunk.text, chunk.status); }); } deleteCurrentProject() { - if (!this.manager.currentProject) return; - - if (confirm(`Delete project "${this.manager.currentProject.name}"?`)) { - this.manager.deleteProject(this.manager.currentProject.id); + const { currentProject } = this.manager; + if (currentProject && confirm(`Delete project "${currentProject.name}"?`)) { + this.manager.deleteProject(currentProject.id); this.manager.currentProject = null; this.elements.currentProject.textContent = 'No Project Selected'; this.elements.deleteProjectBtn.disabled = true; @@ -481,115 +431,97 @@ class AudiobookGenerator { } updateTimeDisplay() { - const current = this.elements.audioPlayer.currentTime; - const duration = this.elements.audioPlayer.duration; - this.elements.currentTime.textContent = this.formatTime(current); - this.elements.timeSlider.value = (current / duration) * 100; + const { audioPlayer, currentTime, timeSlider } = this.elements; + const current = audioPlayer.currentTime; + const duration = audioPlayer.duration; + currentTime.textContent = this.formatTime(current); + timeSlider.value = (current / duration) * 100; } updateDuration() { - const duration = this.elements.audioPlayer.duration; - this.elements.duration.textContent = this.formatTime(duration); + const { audioPlayer, duration } = this.elements; + duration.textContent = this.formatTime(audioPlayer.duration); } formatTime(seconds) { const minutes = Math.floor(seconds / 60); - const remainingSeconds = Math.floor(seconds % 60); - return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`; + const secs = Math.floor(seconds % 60).toString().padStart(2, '0'); + return `${minutes}:${secs}`; } seekTo(value) { - const time = (value / 100) * this.elements.audioPlayer.duration; - this.elements.audioPlayer.currentTime = time; + const { audioPlayer } = this.elements; + audioPlayer.currentTime = (value / 100) * audioPlayer.duration; } togglePlayPause() { - if (this.elements.audioPlayer.paused) { - this.elements.audioPlayer.play(); - this.elements.playPauseBtn.innerHTML = ''; + const { audioPlayer, playPauseBtn } = this.elements; + if (audioPlayer.paused) { + audioPlayer.play(); + playPauseBtn.innerHTML = ''; } else { - this.elements.audioPlayer.pause(); - this.elements.playPauseBtn.innerHTML = ''; + audioPlayer.pause(); + playPauseBtn.innerHTML = ''; } } stopPlayback() { - this.elements.audioPlayer.pause(); - this.elements.audioPlayer.currentTime = 0; - this.elements.playPauseBtn.innerHTML = ''; + const { audioPlayer, playPauseBtn } = this.elements; + audioPlayer.pause(); + audioPlayer.currentTime = 0; + playPauseBtn.innerHTML = ''; } playPreviousChunk() { - if (this.currentChunkIndex > 0) { - this.currentChunkIndex--; - this.playChunk(this.currentChunkIndex); - } + if (this.currentChunkIndex > 0) this.playChunk(--this.currentChunkIndex); } playNextChunk() { - if (this.currentChunkIndex < this.manager.currentProject.chunks.length - 1) { - this.currentChunkIndex++; - this.playChunk(this.currentChunkIndex); - } + if (this.currentChunkIndex < this.manager.currentProject.chunks.length - 1) + this.playChunk(++this.currentChunkIndex); } highlightCurrentChunk(id) { const blocks = this.elements.blockList.querySelectorAll('.list-group-item'); blocks.forEach(block => { - block.classList.remove('active'); - if (block.dataset.id === id) { - block.classList.add('active'); - block.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); - } + block.classList.toggle('active', block.dataset.id === id); }); } async sendMessageBook(blockData) { try { this.updateBlockStatus(blockData.id, 'processing'); - const response = await fetch('/generate_audiobook', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(blockData) }); - if (!response.ok) throw new Error(`Server error: ${response.statusText}`); - const reader = response.body.getReader(); const decoder = new TextDecoder('utf-8'); let buffer = ''; - while (true) { const { done, value } = await reader.read(); if (done) break; - buffer += decoder.decode(value, { stream: true }); let boundary; - while ((boundary = buffer.indexOf('\n')) !== -1) { const message = buffer.slice(0, boundary); buffer = buffer.slice(boundary + 1); - if (message) { - try { - const data = JSON.parse(message); - if (data.audio_path && data.id === blockData.id) { - const chunk = this.manager.currentProject.chunks.find(c => c.id === data.id); - if (chunk) { - chunk.audioPath = data.audio_path; - chunk.status = 'completed'; - this.updateBlockStatus(data.id, 'completed'); - } - } - if (data.status === 'complete') { - this.updateStatus('Audio generation completed.', 'success'); - this.elements.mergeButton.disabled = false; + const data = JSON.parse(message); + if (data.audio_path && data.id === blockData.id) { + const chunk = this.manager.currentProject.chunks.find(c => c.id === data.id); + if (chunk) { + Object.assign(chunk, { audioPath: data.audio_path, status: 'completed' }); + this.updateBlockStatus(data.id, 'completed'); } - this.manager.saveProjects(); - } catch (err) { - console.error('Invalid JSON:', message); } + if (data.status === 'complete') { + this.updateStatus('Audio generation completed.', 'success'); + this.elements.mergeButton.disabled = false; + } + this.manager.saveProjects(); } } } @@ -601,37 +533,23 @@ class AudiobookGenerator { } processText(text) { - // Replace parentheses with commas - text = text.replace(/\(([^)]+)\)/g, ',$1,'); - - // Replace acronyms with full-length words - const acronymMap = [ - { regex: /\bi\.e\.\b/gi, replacement: 'that is' }, - { regex: /\bie\b/gi, replacement: 'that is' }, - { regex: /\be\.g\.\b/gi, replacement: 'for example' }, - { regex: /\beg\b/gi, replacement: 'for example' }, - { regex: /\betc\.\b/gi, replacement: 'and so on' }, - { regex: /\betc\b/gi, replacement: 'and so on' } - ]; - - acronymMap.forEach(({ regex, replacement }) => { - text = text.replace(regex, replacement); - }); - - return text.replace(/-/g, ' ') - .replace(/:/g, ',') - .replace(/[""]/g, '"') - .replace(/['']/g, "'") - .replace(/ {2,}/g, ' ') - .replace(/,{2,}/g, ',') - .replace(/\b[A-Z]{5,}\b/g, word => word.toLowerCase()); + return text + .replace(/\(([^)]+)\)/g, ',$1,') + .replace(/\bi\.?e\.?\b/gi, 'that is') + .replace(/\be\.?g\.?\b/gi, 'for example') + .replace(/\betc\.?\b/gi, 'and so on') + .replace(/-/g, ' ') + .replace(/:/g, ',') + .replace(/["']/g, '') + .replace(/\s{2,}/g, ' ') + .replace(/,{2,}/g, ',') + .replace(/\b[A-Z]{5,}\b/g, word => word.toLowerCase()); } splitTextIntoChunks(text, maxChars = 400) { - const sentences = text.match(/[^.!?]+[.!?]/g) || []; + const sentences = text.match(/[^.!?]+[.!?]/g) || [text]; const chunks = []; let currentChunk = ''; - sentences.forEach(sentence => { if ((currentChunk + sentence).length <= maxChars) { currentChunk += sentence + ' '; @@ -640,7 +558,6 @@ class AudiobookGenerator { currentChunk = sentence + ' '; } }); - if (currentChunk) chunks.push(currentChunk.trim()); return chunks; } @@ -650,24 +567,18 @@ class AudiobookGenerator { } updateStatus(message, type = 'info') { - this.elements.status.textContent = `Status: ${message}`; - this.elements.status.className = `alert alert-${type}`; - - const progress = type === 'success' ? 100 : - type === 'error' ? 0 : - message.includes('Generating') ? 50 : 25; - + const { status } = this.elements; + status.textContent = `Status: ${message}`; + status.className = `alert alert-${type}`; + const progress = type === 'success' ? 100 : type === 'danger' ? 0 : 50; this.updateProgressBar(progress); } updateProgressBar(progress) { - this.elements.progressBar.style.width = `${progress}%`; - this.elements.progressBar.textContent = `${progress}%`; - this.elements.progressBar.className = `progress-bar bg-${ - progress === 100 ? 'success' : - progress > 60 ? 'info' : - progress > 30 ? 'warning' : 'danger' - }`; + const { progressBar } = this.elements; + progressBar.style.width = `${progress}%`; + progressBar.textContent = `${progress}%`; + progressBar.className = `progress-bar bg-${progress === 100 ? 'success' : progress > 50 ? 'info' : 'warning'}`; } updateBlockStatus(id, status) { @@ -675,154 +586,94 @@ class AudiobookGenerator { if (block) { block.dataset.status = status; const badge = block.querySelector('.badge'); - badge.className = `badge bg-${ - status === 'completed' ? 'success' : - status === 'failed' ? 'danger' : 'warning' - } ms-2`; + badge.className = `badge bg-${status === 'completed' ? 'success' : status === 'failed' ? 'danger' : 'warning'} me-2`; badge.textContent = status.charAt(0).toUpperCase() + status.slice(1); } } toggleMode() { - const isListeningMode = this.elements.modeToggle.checked; - this.elements.textInput.disabled = isListeningMode; - this.elements.speakButton.disabled = isListeningMode; - this.updateStatus( - isListeningMode ? 'Listening mode activated.' : 'Generation mode activated.', - 'info' - ); + const { modeToggle, textInput, speakButton } = this.elements; + const isListeningMode = modeToggle.checked; + textInput.disabled = isListeningMode; + speakButton.disabled = isListeningMode; + this.updateStatus(isListeningMode ? 'Listening mode activated.' : 'Generation mode activated.', 'info'); } - // Initialize the application static init() { - const app = new AudiobookGenerator(); - window.audiobookApp = app; // For debugging purposes + new AudiobookGenerator(); } addBlockToUI(id, text, status = 'pending') { const li = document.createElement('li'); li.className = 'list-group-item d-flex justify-content-between align-items-center'; - li.dataset.id = id; - li.dataset.text = text; - li.dataset.status = status; + Object.assign(li.dataset, { id, text, status }); li.draggable = true; - - // Main content - const contentDiv = document.createElement('div'); - contentDiv.className = 'flex-grow-1 me-3'; - contentDiv.textContent = text; - - // Controls container - const controlsDiv = document.createElement('div'); - controlsDiv.className = 'd-flex align-items-center'; - - // Status badge - const badge = document.createElement('span'); - badge.className = `badge bg-${status === 'completed' ? 'success' : status === 'failed' ? 'danger' : 'warning'} me-2`; - badge.textContent = status.charAt(0).toUpperCase() + status.slice(1); - - // Button group - const btnGroup = document.createElement('div'); - btnGroup.className = 'btn-group btn-group-sm'; - - // Play button - const playBtn = document.createElement('button'); - playBtn.className = 'btn btn-outline-primary'; - playBtn.innerHTML = ''; + li.innerHTML = ` +
${text}
+
+ + ${status.charAt(0).toUpperCase() + status.slice(1)} + +
+ + + + +
+
`; + const [playBtn, editBtn, regenBtn, delBtn] = li.querySelectorAll('.btn'); playBtn.onclick = () => this.playChunkById(id); - - // Edit button - const editBtn = document.createElement('button'); - editBtn.className = 'btn btn-outline-secondary'; - editBtn.innerHTML = ''; editBtn.onclick = () => this.editChunk(id); - - // Regenerate button - const regenerateBtn = document.createElement('button'); - regenerateBtn.className = 'btn btn-outline-warning'; - regenerateBtn.innerHTML = ''; - regenerateBtn.onclick = () => this.regenerateChunk(id); - - // Delete button - const deleteBtn = document.createElement('button'); - deleteBtn.className = 'btn btn-outline-danger'; - deleteBtn.innerHTML = ''; - deleteBtn.onclick = () => this.deleteChunk(id); - - // Add buttons to group - btnGroup.appendChild(playBtn); - btnGroup.appendChild(editBtn); - btnGroup.appendChild(regenerateBtn); - btnGroup.appendChild(deleteBtn); - - // Assemble controls - controlsDiv.appendChild(badge); - controlsDiv.appendChild(btnGroup); - - // Add everything to li - li.appendChild(contentDiv); - li.appendChild(controlsDiv); - - // Add drag and drop handlers - li.addEventListener('dragstart', (e) => { + regenBtn.onclick = () => this.regenerateChunk(id); + delBtn.onclick = () => this.deleteChunk(id); + li.addEventListener('dragstart', e => { li.classList.add('dragging'); e.dataTransfer.setData('text/plain', id); }); - li.addEventListener('dragend', () => { li.classList.remove('dragging'); this.updateChunksOrder(); }); - this.elements.blockList.appendChild(li); } playChunkById(id) { - const chunkIndex = this.manager.currentProject.chunks.findIndex(c => c.id === id); - if (chunkIndex !== -1) { - this.currentChunkIndex = chunkIndex; - this.playChunk(chunkIndex); - } + const index = this.manager.currentProject.chunks.findIndex(c => c.id === id); + if (index !== -1) this.playChunk(index); } updateChunksOrder() { - if (!this.manager.currentProject) return; - - const newOrder = Array.from(this.elements.blockList.children).map(li => { - const id = li.dataset.id; - return this.manager.currentProject.chunks.find(c => c.id === id); + const chunks = Array.from(this.elements.blockList.children).map(li => { + return this.manager.currentProject.chunks.find(c => c.id === li.dataset.id); }); - - this.manager.currentProject.chunks = newOrder; + this.manager.currentProject.chunks = chunks; this.manager.saveProjects(); } async mergeAudioChunks() { - if (!this.manager.currentProject || this.manager.currentProject.chunks.length === 0) { + const { currentProject } = this.manager; + if (!currentProject || currentProject.chunks.length === 0) { alert('No audio chunks available to merge.'); return; } - this.updateStatus('Merging audio chunks...', 'info'); this.elements.mergeButton.disabled = true; - try { const response = await fetch('/merge_audiobook', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ - audio_paths: this.manager.currentProject.chunks.map(c => c.audioPath), - project_id: this.manager.currentProject.id + audio_paths: currentProject.chunks.map(c => c.audioPath), + project_id: currentProject.id }) }); - if (!response.ok) throw new Error(`Server error: ${response.statusText}`); - const data = await response.json(); if (data.merged_path) { - this.elements.downloadButton.href = data.merged_path; - this.elements.downloadButton.download = `${this.manager.currentProject.name}_audiobook.mp3`; - this.elements.downloadButton.disabled = false; + const { downloadButton } = this.elements; + downloadButton.href = data.merged_path; + downloadButton.download = `${currentProject.name}_audiobook.mp3`; + downloadButton.disabled = false; this.updateStatus('Audio chunks merged successfully.', 'success'); } else { throw new Error('Merging failed.'); @@ -842,18 +693,15 @@ class AudiobookGenerator { async regenerateChunk(id) { const chunk = this.manager.currentProject.chunks.find(c => c.id === id); if (!chunk) return; - try { this.updateStatus(`Regenerating chunk: ${chunk.text.substring(0, 30)}...`, 'info'); this.updateBlockStatus(id, 'pending'); - const blockData = { id: chunk.id, text: chunk.text, status: 'pending', projectPath: `audiobooks/${this.manager.currentProject.id}` }; - await this.sendMessageBook(blockData); this.updateStatus('Chunk regenerated successfully.', 'success'); } catch (error) { @@ -862,11 +710,10 @@ class AudiobookGenerator { this.updateBlockStatus(id, 'failed'); } } - + async editChunk(id) { const chunk = this.manager.currentProject.chunks.find(c => c.id === id); if (!chunk) return; - const newText = prompt('Edit text:', chunk.text); if (newText && newText !== chunk.text) { chunk.text = this.processText(newText.trim()); @@ -874,55 +721,41 @@ class AudiobookGenerator { await this.regenerateChunk(id); } } - + updateBlockUI(id, text) { const block = this.elements.blockList.querySelector(`[data-id="${id}"]`); if (block) { block.querySelector('.flex-grow-1').textContent = text; } } - + deleteChunk(id) { - if (!confirm('Are you sure you want to delete this chunk?')) return; - - const index = this.manager.currentProject.chunks.findIndex(c => c.id === id); - if (index !== -1) { - this.manager.currentProject.chunks.splice(index, 1); - const block = this.elements.blockList.querySelector(`[data-id="${id}"]`); - if (block) block.remove(); + if (confirm('Are you sure you want to delete this chunk?')) { + this.manager.currentProject.chunks = this.manager.currentProject.chunks.filter(c => c.id !== id); + this.elements.blockList.querySelector(`[data-id="${id}"]`)?.remove(); this.manager.saveProjects(); } } - + async playChunk(index) { - if (!this.manager.currentProject || !this.manager.currentProject.chunks[index]) return; - const chunk = this.manager.currentProject.chunks[index]; + if (!chunk) return; this.currentChunkIndex = index; - try { - // Stop current playback - this.elements.audioPlayer.pause(); - - // Update UI to show loading state + const { audioPlayer, playPauseBtn } = this.elements; + audioPlayer.pause(); this.highlightCurrentChunk(chunk.id); this.updateStatus(`Loading chunk ${index + 1}/${this.manager.currentProject.chunks.length}...`, 'info'); - - // Set new source and play - this.elements.audioPlayer.src = chunk.audioPath; - await this.elements.audioPlayer.play(); - - // Update UI for playing state - this.elements.playPauseBtn.innerHTML = ''; + audioPlayer.src = chunk.audioPath; + await audioPlayer.play(); + playPauseBtn.innerHTML = ''; this.updateStatus(`Playing chunk ${index + 1}/${this.manager.currentProject.chunks.length}`, 'info'); - - // Setup ended event for automatic next chunk playback - this.elements.audioPlayer.onended = () => { + audioPlayer.onended = () => { if (this.currentChunkIndex < this.manager.currentProject.chunks.length - 1) { - this.playChunk(this.currentChunkIndex + 1); + this.playChunk(++this.currentChunkIndex); } else { this.updateStatus('Playback completed', 'success'); - this.elements.playPauseBtn.innerHTML = ''; + playPauseBtn.innerHTML = ''; } }; } catch (error) { @@ -930,65 +763,67 @@ class AudiobookGenerator { this.updateStatus('Failed to play chunk', 'danger'); } } - + async generateSpeech() { if (!this.manager.currentProject) { alert('Please select or create a project first.'); return; } - let text = this.elements.textInput.value.trim(); if (!text) { alert('Please enter some text to generate speech.'); return; } - text = this.processText(text); this.elements.blockList.innerHTML = ''; - this.playbackQueue = []; this.elements.downloadButton.disabled = true; this.elements.mergeButton.disabled = true; - this.updateStatus('Processing text...', 'info'); const chunks = this.splitTextIntoChunks(text); const projectPath = `audiobooks/${this.manager.currentProject.id}`; - - // Clear existing chunks this.manager.currentProject.chunks = []; - - for (let [index, chunk] of chunks.entries()) { + for (let i = 0; i < chunks.length; i++) { + const chunk = chunks[i]; const id = this.generateUniqueId(); - const blockData = { - id, - text: chunk, - status: 'pending', - projectPath - }; - + const blockData = { id, text: chunk, status: 'pending', projectPath }; this.manager.currentProject.chunks.push(blockData); this.addBlockToUI(id, chunk); - try { - this.updateStatus(`Generating chunk ${index + 1}/${chunks.length}...`, 'info'); + this.updateStatus(`Generating chunk ${i + 1}/${chunks.length}...`, 'info'); await this.sendMessageBook(blockData); - - // Auto-play first chunk when it's ready - if (index === 0 && blockData.status === 'completed') { - this.playChunk(0); - } + if (i === 0 && blockData.status === 'completed') this.playChunk(0); } catch (error) { console.error('Error generating speech for chunk:', error); - this.updateStatus(`Failed to generate chunk ${index + 1}`, 'danger'); + this.updateStatus(`Failed to generate chunk ${i + 1}`, 'danger'); } } - this.manager.saveProjects(); this.elements.mergeButton.disabled = false; this.updateStatus('All chunks generated successfully', 'success'); } + + onDragOver(e) { + e.preventDefault(); + const { blockList } = this.elements; + const afterElement = this.getDragAfterElement(blockList, e.clientY); + const draggable = document.querySelector('.dragging'); + if (afterElement) { + blockList.insertBefore(draggable, afterElement); + } else { + blockList.appendChild(draggable); + } + } + + getDragAfterElement(container, y) { + const elements = [...container.querySelectorAll('.list-group-item:not(.dragging)')]; + return elements.reduce((closest, child) => { + const box = child.getBoundingClientRect(); + const offset = y - box.top - box.height / 2; + return offset < 0 && offset > closest.offset ? { offset, element: child } : closest; + }, { offset: Number.NEGATIVE_INFINITY }).element; + } } -// Start the application document.addEventListener('DOMContentLoaded', () => { AudiobookGenerator.init(); }); \ No newline at end of file diff --git a/static/js/index.js b/static/js/index.js index b1ae7dc..c5467b6 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -1,117 +1,75 @@ -var selectedFilename = ''; -var backgroundMusic = document.getElementById('backgroundMusic'); -var messageContainer = document.getElementById('message-container'); -var inputTextContainer = document.getElementById('input_text'); -var config_data; +let selectedFilename = ''; +const backgroundMusic = document.getElementById('backgroundMusic'); +const messageContainer = document.getElementById('message-container'); +const inputTextContainer = document.getElementById('input_text'); +const buttonAudioRec = document.querySelector('#buttonAudioRec'); +const iconAudioRec = buttonAudioRec.querySelector('#iconAudioRec'); +let config_data; let isRecording = false; -var isYunaListening = false; +let isYunaListening = false; let mediaRecorder; let audioChunks = []; -var activeElement = null; +let activeElement = null; let isStreamingChatModeEnabled = false; -var isCustomConfigEnabled = false; -var soundsModeEnabled = false; -var buttonAudioRec = document.querySelector('#buttonAudioRec'); -var iconAudioRec = buttonAudioRec.querySelector('#iconAudioRec'); +let isCustomConfigEnabled = false; +let soundsModeEnabled = false; + +// Helper function to update configuration +function updateConfig(setting, value) { + const config = JSON.parse(localStorage.getItem('config')) || {}; + config.settings = config.settings || {}; + config.settings[setting] = value; + localStorage.setItem('config', JSON.stringify(config)); +} // Function to handle the toggle switch change document.querySelector('#streamingChatMode').onchange = e => { isStreamingChatModeEnabled = e.target.checked; - - // Retrieve the current configuration from localStorage - let config = JSON.parse(localStorage.getItem('config')) || {}; - - // Ensure the settings object exists - config.settings = config.settings || {}; - - // Update the settings.streaming value - config.settings.streaming = isStreamingChatModeEnabled; - - // Save the updated configuration back to localStorage - localStorage.setItem('config', JSON.stringify(config)); + updateConfig('streaming', isStreamingChatModeEnabled); }; document.querySelector('#customConfig').onchange = e => { isCustomConfigEnabled = e.target.checked; - - // Retrieve the current configuration from localStorage - let config = JSON.parse(localStorage.getItem('config')) || {}; - - // Ensure the settings object exists - config.settings = config.settings || {}; - - // Update the settings.streaming value - config.settings.customConfig = isCustomConfigEnabled; - - // Save the updated configuration back to localStorage - localStorage.setItem('config', JSON.stringify(config)); -} + updateConfig('customConfig', isCustomConfigEnabled); +}; document.querySelector('#soundsMode').onchange = e => { soundsModeEnabled = e.target.checked; - - // Retrieve the current configuration from localStorage - let config = JSON.parse(localStorage.getItem('config')) || {}; - - // Ensure the settings object exists - config.settings = config.settings || {}; - - // Update the settings.streaming value - config.settings.sounds = soundsModeEnabled; - - // Save the updated configuration back to localStorage - localStorage.setItem('config', JSON.stringify(config)); -} + updateConfig('sounds', soundsModeEnabled); +}; buttonAudioRec.addEventListener('click', () => { - if (!isRecording) { - startRecording(); - } else { - stopRecording(); - } + isRecording ? stopRecording() : startRecording(); }); +function toggleRecordingUI(isRecording) { + iconAudioRec.classList.toggle('fa-microphone', !isRecording); + iconAudioRec.classList.toggle('fa-stop', isRecording); + buttonAudioRec.classList.toggle('btn-danger', isRecording); + buttonAudioRec.classList.toggle('btn-secondary', !isRecording); +} + function startRecording(withImage = false, imageDataURL, imageName, messageForImage) { - navigator.mediaDevices.getUserMedia({ - audio: true - }) + navigator.mediaDevices.getUserMedia({ audio: true }) .then(stream => { mediaRecorder = new MediaRecorder(stream); mediaRecorder.start(); - iconAudioRec.classList.remove('fa-microphone'); - iconAudioRec.classList.add('fa-stop'); - buttonAudioRec.classList.add('btn-danger'); - buttonAudioRec.classList.remove('btn-secondary'); + toggleRecordingUI(true); isRecording = true; - mediaRecorder.addEventListener('dataavailable', event => { - audioChunks.push(event.data); - }); - + mediaRecorder.addEventListener('dataavailable', event => audioChunks.push(event.data)); mediaRecorder.addEventListener('stop', () => { - const audioBlob = new Blob(audioChunks, { - type: 'audio/wav' - }); - - if (withImage) { - sendAudioToServer(audioBlob, true, imageDataURL, imageName, messageForImage); - } else { - sendAudioToServer(audioBlob); - } + const audioBlob = new Blob(audioChunks, { type: 'audio/wav' }); + sendAudioToServer(audioBlob, withImage, imageDataURL, imageName, messageForImage); audioChunks = []; }); }) - .catch(error => { - console.error('Error accessing the microphone', error); - }); + .catch(error => console.error('Error accessing the microphone', error)); } function stopRecording() { mediaRecorder.stop(); - iconAudioRec.classList.add('fa-microphone'); - iconAudioRec.classList.remove('fa-stop'); - buttonAudioRec.classList.remove('btn-danger'); - buttonAudioRec.classList.add('btn-secondary'); + toggleRecordingUI(false); isRecording = false; } @@ -120,107 +78,65 @@ function sendAudioToServer(audioBlob, withImage = false, imageDataURL, imageName formData.append('audio', audioBlob); formData.append('task', 'transcribe'); - fetch('/audio', { - method: 'POST', - body: formData - }) + fetch('/audio', { method: 'POST', body: formData }) .then(response => { - if (!response.ok) { - throw new Error('Network response was not ok'); - } + if (!response.ok) throw new Error('Network response was not ok'); return response.json(); }) .then(data => { + const message = data.text; + const kanojo = kanojoManager.buildKanojo(); if (withImage) { - askYunaImage = messageManagerInstance.sendMessage(data.text, kanojoManager.buildKanojo(), [imageDataURL, imageName, data.text], '/image', false, false, isStreamingChatModeEnabled); + askYunaImage = messageManagerInstance.sendMessage(message, kanojo, [imageDataURL, imageName, message], '/image', false, false, isStreamingChatModeEnabled); } else { - messageManagerInstance.sendMessage(data.text, kanojoManager.buildKanojo(), '', '/message', false, false, isStreamingChatModeEnabled); - }; + messageManagerInstance.sendMessage(message, kanojo, '', '/message', false, false, isStreamingChatModeEnabled); + } }) - .catch(error => { - console.error('Error sending audio to server', error); - }); + .catch(error => console.error('Error sending audio to server', error)); } async function loadConfig() { - let config; - // Check if 'config' exists in localStorage - if (localStorage.getItem('config')) { - // Parse the 'config' from localStorage - config = JSON.parse(localStorage.getItem('config')); + let config = localStorage.getItem('config'); + if (config) { + config = JSON.parse(config); } else { - // Fetch the config from '/static/config.json' and parse it config = await (await fetch('/static/config.json')).json(); - // Store the fetched config in localStorage for future use localStorage.setItem('config', JSON.stringify(config)); } - // Set the placeholder using the second name - inputTextContainer.placeholder = `Ask ${config.ai.names[1]}...`; + inputTextContainer.placeholder = `Talk to ${config.ai.names[1]}...`; } -class messageManager { +class MessageManager { displayMessages(messages) { - // Clear the existing content of messageContainer - while (messageContainer.firstChild) { - messageContainer.removeChild(messageContainer.firstChild); - } - - // Check if the messages is an array or string - if (typeof messages === 'string') { - try { - messages = JSON.parse(messages); - } catch (error) { - console.error('Error parsing JSON:', error); - } - } - - // Loop through the messages and format each one - messages.forEach(messageData => { - const formattedMessage = formatMessage(messageData); - messageContainer.appendChild(formattedMessage); - }); - + messageContainer.innerHTML = ''; + if (typeof messages === 'string') messages = this.parseJSON(messages); + messages.forEach(msg => messageContainer.appendChild(formatMessage(msg))); this.scrollMsg(); } - createMessage(name, messageContent, isStreaming = false) { - const messageData = { - name: name, - message: isStreaming ? '' : messageContent, - }; - - const formattedMessage = formatMessage(messageData); - messageContainer.appendChild(formattedMessage); + createMessage(name, content, isStreaming = false) { + const msgData = { name, message: isStreaming ? '' : content }; + const msgElement = formatMessage(msgData); + messageContainer.appendChild(msgElement); this.scrollMsg(); - - if (name == config_data.ai.names[1]) { - playAudio('message'); - } - - if (isStreaming) { - return formattedMessage; - } + if (name === config_data.ai.names[1]) playAudio('message'); + return isStreaming ? msgElement : undefined; } - updateMessageContent(messageElement, content) { - messageElement.innerHTML = content; + updateMessageContent(element, content) { + element.innerHTML = content; this.scrollMsg(); } createTypingBubble(naked = false) { - const typingBubble = `
`; - - if (naked == false) { - messageContainer.insertAdjacentHTML('beforeend', typingBubble); - this.scrollMsg(); - } else { - activeElement.insertAdjacentHTML('beforeend', typingBubble); - } + const bubble = `
`; + const container = naked ? activeElement : messageContainer; + container.insertAdjacentHTML('beforeend', bubble); + this.scrollMsg(); } removeTypingBubble() { - const bubble = document.getElementById('circle-loader'); - bubble?.remove(); + document.getElementById('circle-loader')?.remove(); this.scrollMsg(); } @@ -228,93 +144,49 @@ class messageManager { messageContainer.scrollTop = messageContainer.scrollHeight; } - async sendMessage(message, kanojo, imageData = '', url = '/message', naked = false, stream = isStreamingChatModeEnabled || false, outputElement = '', config = null) { - const messageContent = message || inputTextContainer.value; - var userMessageElement; - + async sendMessage(message, kanojo, imageData = '', url = '/message', naked = false, stream = isStreamingChatModeEnabled, outputElement = '', config = null) { + message = message || inputTextContainer.value; if (url === '/message') { if (kanojo !== null) { - userMessageElement = this.createMessage(config_data.ai.names[0], messageContent); + this.createMessage(config_data.ai.names[0], message); this.createTypingBubble(naked); updateMsgCount(); } - let result = ''; - const decoder = new TextDecoder(); - const serverEndpoint = `${config_data.server.url + config_data.server.port}${url}`; - const headers = { - 'Content-Type': 'application/json' - }; - - var yunaConfig; - if (config === null) { - yunaConfig = isCustomConfigEnabled ? config_data : null; - } else { - yunaConfig = config; - } - const body = JSON.stringify({ chat: selectedFilename, - text: messageContent, + text: message, useHistory: kanojoManager.useHistory, - kanojo: kanojo === false ? null : (kanojo || kanojoManager.buildKanojo(document.getElementById('kanojoSelect').value)), + kanojo: + kanojo === false + ? null + : kanojo || kanojoManager.buildKanojo(document.getElementById('kanojoSelect').value), speech: isYunaListening, - yunaConfig: yunaConfig, + yunaConfig: config || (isCustomConfigEnabled ? config_data : null), stream }); - inputTextContainer.value = ''; + inputTextContainer.value = ''; try { - const response = await fetch(serverEndpoint, { - method: 'POST', - headers, - body - }); - - if (stream && isStreamingChatModeEnabled) { - const reader = response.body.getReader(); - - var isBubbleCreated = false - - while (true) { - const { - done, - value - } = await reader.read(); - if (done) break; - const chunk = decoder.decode(value, { - stream: true - }); - result += chunk; - if (outputElement) { - outputElement.value += chunk; - } else { - if (!isBubbleCreated) { - this.createMessage(config_data.ai.names[1], ""); - isBubbleCreated = true; - } - - let elements = document.querySelectorAll('.p-2.mb-2.block-message-1.text-start.bg-secondary.text-white'); - let lastElement = elements[elements.length - 1]; - let preElement = lastElement.querySelector('pre'); - this.updateMessageContent(preElement, result); - } - initializeTextareas(); + const response = await fetch( + `${config_data.server.url}${config_data.server.port}${url}`, + { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body } + ); - this.removeTypingBubble(); + if (stream && isStreamingChatModeEnabled) { + await this.handleStreaming(response, outputElement); } else { const data = await response.json(); - if (kanojo !== null) { this.removeTypingBubble(); this.createMessage(config_data.ai.names[1], data.response); } } - - if (isYunaListening) { - playAudio(); - } + if (isYunaListening) playAudio(); } catch (error) { this.handleError(error); } @@ -324,27 +196,42 @@ class messageManager { } } - updateTypingBubble(text) { - const bubble = document.getElementById('circle-loader'); - if (bubble) { - bubble.innerHTML = text; - this.scrollMsg(); + async handleStreaming(response, outputElement) { + const decoder = new TextDecoder(); + let result = ''; + let isBubbleCreated = false; + const reader = response.body.getReader(); + + while (true) { + const { done, value } = await reader.read(); + if (done) break; + const chunk = decoder.decode(value, { stream: true }); + result += chunk; + if (outputElement) { + outputElement.value += chunk; + } else { + if (!isBubbleCreated) { + this.createMessage(config_data.ai.names[1], ''); + isBubbleCreated = true; + } + const lastMsg = messageContainer.querySelector( + '.p-2.mb-2.block-message-1.text-start.bg-secondary.text-white:last-child pre' + ); + this.updateMessageContent(lastMsg, result); + } + initializeTextareas(); } + this.removeTypingBubble(); } handleError(error) { console.error('Error:', error); this.removeTypingBubble(); - this.createMessage(config_data.ai.names[1], error); + this.createMessage(config_data.ai.names[1], error.toString()); playAudio('error'); } - sendImage(imageData) { - const [imageDataURL, imageName, messageForImage] = imageData; - const serverEndpoint = `${config_data.server.url + config_data.server.port}/image`; - const headers = { - 'Content-Type': 'application/json' - }; + sendImage([imageDataURL, imageName, messageForImage]) { const body = JSON.stringify({ image: imageDataURL, name: imageName, @@ -354,36 +241,37 @@ class messageManager { speech: isYunaListening }); - fetch(serverEndpoint, { - method: 'POST', - headers, - body - }) - .then(response => response.ok ? response.json() : Promise.reject('Error sending captured image.')) + fetch(`${config_data.server.url}${config_data.server.port}/image`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body + }) + .then(response => (response.ok ? response.json() : Promise.reject('Error sending image.'))) .then(data => { this.removeTypingBubble(); const imageCaption = `${messageForImage}${imageName}`; this.createMessage(config_data.ai.names[0], imageCaption); - - const imageResponse = `${data.message}`; - this.createMessage(config_data.ai.names[1], imageResponse); - - // play audio - if (isYunaListening) { - playAudio(); - } - - return imageCaption; + this.createMessage(config_data.ai.names[1], data.message); + if (isYunaListening) playAudio(); }) .catch(error => { console.error('Error:', error); alert('Error sending captured image.'); }); } + + parseJSON(str) { + try { + return JSON.parse(str); + } catch (error) { + console.error('Error parsing JSON:', error); + return []; + } + } } // Create a new instance of the messageManager class -messageManagerInstance = new messageManager(); +messageManagerInstance = new MessageManager(); function playAudio(audioType = 'tts') { if (!soundsModeEnabled && audioType != 'tts') { @@ -495,82 +383,58 @@ function regenerateMessage(messageText) { } function setMessagePopoverListeners() { - // Select all message bubbles - const messageBubbles = document.querySelectorAll('.message'); - - // Iterate over each message bubble - messageBubbles.forEach(message => { - // Add click event listener to each message bubble - message.addEventListener('click', function (event) { - // Prevent event from bubbling up to avoid triggering click events on parent elements - event.stopPropagation(); + // Handle message bubble clicks and delete button clicks using event delegation + document.addEventListener('click', (event) => { + const message = event.target.closest('.message'); + const deleteBtn = event.target.closest('.delete-btn'); - // Close all open message menus + if (message) { + event.stopPropagation(); + // Close all other menus document.querySelectorAll('.message-menu').forEach(menu => { - menu.style.display = 'none'; + if (menu !== message.querySelector('.message-menu')) { + menu.style.display = 'none'; + } }); - - // Toggle the display of the current message's menu - const currentMenu = this.querySelector('.message-menu'); + // Toggle current menu + const currentMenu = message.querySelector('.message-menu'); currentMenu.style.display = currentMenu.style.display === 'block' ? 'none' : 'block'; - }); - }); - - // Add a global click listener to close all message menus when clicking outside - document.addEventListener('click', function () { - document.querySelectorAll('.message-menu').forEach(menu => { - menu.style.display = 'none'; - }); - }); - - // Select all delete buttons - const deleteButtons = document.querySelectorAll('.delete-btn'); - - // Add click event listener to each delete button - deleteButtons.forEach(button => { - button.addEventListener('click', function (event) { - // Prevent event from bubbling up to avoid triggering click events on parent elements + } else if (deleteBtn) { event.stopPropagation(); - - // Get the message text to be deleted - const messageText = this.closest('.message').querySelector('.message-text').textContent; - - // Call the deleteMessageFromHistory function with the message text + const messageText = deleteBtn.closest('.message').querySelector('.message-text').textContent; deleteMessageFromHistory(messageText); - }); + } else { + // Click outside to close all menus + document.querySelectorAll('.message-menu').forEach(menu => { + menu.style.display = 'none'; + }); + } }); } setTimeout(setMessagePopoverListeners, 200); class HistoryManager { + constructor(props) { + this.loadSelectedHistory = this.loadSelectedHistory.bind(this); +} + postHistory(task, data = {}) { + return fetch(`${config_data.server.url}${config_data.server.port}/history`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ task, ...data }), + }).then(res => { + if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`); + return res.json(); + }); + } + createHistoryFile() { const newFileName = prompt('Enter a name for the new file (with .json):'); - if (!newFileName) { - return; // Exit if no name is entered - } - + if (!newFileName) return; selectedFilename = newFileName; - - fetch(`${config_data.server.url + config_data.server.port}/history`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - chat: newFileName, - task: "create" - }) - }) - .then(response => { - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } - return response.json(); - }) - .then(populateHistorySelect()) - .catch(error => { - console.error('An error occurred:', error); - }); + this.postHistory('create', { chat: newFileName }) + .then(() => populateHistorySelect()) + .catch(console.error); } get selectedFilename() { @@ -582,164 +446,82 @@ class HistoryManager { } downloadHistory() { - this.fetchHistory('load') + this.postHistory('load', { chat: this.selectedFilename }) .then(data => { - const chatHistory = JSON.stringify(data); - const blob = new Blob([chatHistory], { - type: 'text/plain' - }); - const url = URL.createObjectURL(blob); - + const blob = new Blob([JSON.stringify(data)], { type: 'text/plain' }); const a = document.createElement('a'); - a.href = url; + a.href = URL.createObjectURL(blob); a.download = `${this.selectedFilename}.json`; - document.body.appendChild(a); // Append to body to ensure visibility in Firefox + document.body.appendChild(a); a.click(); - document.body.removeChild(a); // Clean up - - URL.revokeObjectURL(url); + document.body.removeChild(a); + URL.revokeObjectURL(a.href); }) - .catch(error => console.error('Error fetching history for download:', error)); + .catch(console.error); } - async importHistory() { + importHistory() { const fileInput = document.createElement('input'); fileInput.type = 'file'; fileInput.accept = '.json'; - - fileInput.onchange = async () => { + fileInput.onchange = () => { const file = fileInput.files[0]; const reader = new FileReader(); - - await new Promise((resolve) => { - reader.onload = () => { - resolve(); - }; - reader.readAsText(file); - }); - - const historyData = reader.result; - const filename = prompt('Enter a name for the new file (with .json):'); - - try { - const response = await fetch(`${config_data.server.url + config_data.server.port}/history`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ - chat: filename, - task: 'save', - history: historyData, - }), - }); - - await response.json(); - alert('History imported successfully.'); - location.reload(); - } catch (error) { - console.error('Error sending edited history:', error); - } + reader.onload = () => { + const filename = prompt('Enter a name for the new file (with .json):'); + if (!filename) return; + this.postHistory('save', { chat: filename, history: JSON.parse(reader.result) }) + .then(() => { + alert('History imported successfully.'); + location.reload(); + }) + .catch(console.error); + }; + reader.readAsText(file); }; - fileInput.click(); } editHistory() { - this.fetchHistory('load') + this.postHistory('load', { chat: this.selectedFilename }) .then(data => { - const historyPopup = document.createElement('div'); - historyPopup.classList.add('block-popup', 'edit-popup'); - - const popupContent = ` + const popup = document.createElement('div'); + popup.className = 'block-popup edit-popup'; + popup.innerHTML = `
Edit History
- - + +
`; - - historyPopup.innerHTML = popupContent; - document.body.appendChild(historyPopup); + document.body.appendChild(popup); }) - .catch(error => console.error('Error loading selected history file:', error)); + .catch(console.error); } saveEditedHistory() { - const editTextArea = document.querySelector('.block-popup.edit-popup textarea'); - const editedText = editTextArea.value; - - this.sendEditHistory(editedText, this.selectedFilename); - } - - sendEditHistory(editedText, filename) { - fetch(`${config_data.server.url + config_data.server.port}/history`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ - chat: filename, - task: 'edit', - history: JSON.parse(editedText), - }), - }) - .then(response => response.json()) + const editedText = document.querySelector('.block-popup.edit-popup textarea').value; + this.postHistory('edit', { chat: this.selectedFilename, history: JSON.parse(editedText) }) .then(() => this.loadSelectedHistory()) - .catch(error => console.error('Error sending edited history:', error)); + .catch(console.error); } fetchHistory(task) { - return fetch(`${config_data.server.url + config_data.server.port}/history`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ - chat: this.selectedFilename, - task: task, - }), - }) - .then(response => { - if (!response.ok) { - throw new Error('Network response was not ok'); - } - return response.json(); - }); + return this.postHistory(task, { chat: this.selectedFilename }); } - // Placeholder for loadSelectedHistory method - loadSelectedHistory(selectedFilename) { - if (selectedFilename == undefined) { - selectedFilename = config_data.settings.default_history_file; - } - - fetch(`${config_data.server.url + config_data.server.port}/history`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ - task: 'load', - chat: selectedFilename - }) - }) - .then(response => { - if (!response.ok) throw new Error('Error loading selected history file.'); - return response.json(); - }) + loadSelectedHistory(selectedFilename = config_data.settings.default_history_file) { + this.postHistory('load', { chat: selectedFilename }) .then(data => { messageManagerInstance.displayMessages(data); updateMsgCount(); }) - .catch(error => { - console.error('Error:', error); - }); + .catch(console.error); } } @@ -747,541 +529,298 @@ class HistoryManager { var historyManagerInstance = new HistoryManager(); function initializeVideoStream() { - var localVideo = document.getElementById('localVideo'); - var videoStream = null; // To hold the stream globally - var facingMode = "user"; // Default facing mode + const localVideo = document.getElementById('localVideo'); + let videoStream = null; + let facingMode = 'user'; - localVideo.style.transform = "scaleX(-1)"; + localVideo.style.transform = 'scaleX(-1)'; - // Function to start or restart the video stream with the given facingMode function startVideo() { - // First, stop any existing video stream - if (videoStream) { - stopVideo(); - } - - // Request video stream with the current facingMode - navigator.mediaDevices.getUserMedia({ - video: { - facingMode: facingMode - }, - audio: false - }) - .then(function (stream) { - videoStream = stream; // Assign the stream to the global variable + if (videoStream) stopVideo(); + navigator.mediaDevices.getUserMedia({ video: { facingMode }, audio: false }) + .then(stream => { + videoStream = stream; localVideo.srcObject = stream; }) - .catch(function (error) { + .catch(error => { console.log('Error accessing the camera:', error); localVideo.remove(); }); } - // Function to stop the video stream function stopVideo() { if (videoStream) { - videoStream.getTracks().forEach(function (track) { - track.stop(); - }); - videoStream = null; // Clear the global stream variable + videoStream.getTracks().forEach(track => track.stop()); + videoStream = null; localVideo.srcObject = null; } } - // Function to flip the camera function flipCamera() { - // Toggle facingMode between "user" and "environment" - facingMode = facingMode === "user" ? "environment" : "user"; - startVideo(); // Restart video with the new facingMode + facingMode = facingMode === 'user' ? 'environment' : 'user'; + startVideo(); } - // Add click event listener to the video element to flip the camera on click localVideo.addEventListener('click', flipCamera); - // Start the video stream when the modal is shown - var videoCallModal = document.getElementById('videoCallModal'); - videoCallModal.addEventListener('shown.bs.modal', function () { + const videoCallModal = document.getElementById('videoCallModal'); + videoCallModal.addEventListener('shown.bs.modal', () => { isYunaListening = true; startVideo(); }); - - // Stop the video stream when the modal is hidden - videoCallModal.addEventListener('hidden.bs.modal', function () { + videoCallModal.addEventListener('hidden.bs.modal', () => { isYunaListening = false; stopVideo(); }); } -// Initialize the video stream functionality after a delay setTimeout(initializeVideoStream, 500); function scrollMsg() { - objDiv = document.getElementById("message-container"); + const objDiv = document.getElementById('message-container'); objDiv.scrollTop = objDiv.scrollHeight; } -// Add an event listener to the "Capture Image" button async function captureImage() { - var localVideo = document.getElementById('localVideo'); - var captureCanvas = document.getElementById('capture-canvas'); - var captureContext = captureCanvas.getContext('2d'); + const localVideo = document.getElementById('localVideo'); + const captureCanvas = document.getElementById('capture-canvas'); + const ctx = captureCanvas.getContext('2d'); - // Set the canvas dimensions to match the video element captureCanvas.width = localVideo.videoWidth; captureCanvas.height = localVideo.videoHeight; - // Apply mirroring transformation to the canvas context - captureContext.save(); // Save the current state - captureContext.scale(-1, 1); // Flip horizontally - captureContext.drawImage(localVideo, -captureCanvas.width, 0, captureCanvas.width, captureCanvas.height); // Draw the video frame - captureContext.restore(); // Restore the original state - - var imageDataURL = captureCanvas.toDataURL('image/png'); // Convert canvas to base64 data URL - - let messageForImage = ''; - var imageName = new Date().getTime().toString(); + ctx.save(); + ctx.scale(-1, 1); + ctx.drawImage(localVideo, -captureCanvas.width, 0, captureCanvas.width, captureCanvas.height); + ctx.restore(); + const imageDataURL = captureCanvas.toDataURL('image/png'); + const imageName = Date.now().toString(); if (isYunaListening) { - // Start recording - startRecording(true, imageDataURL, imageName, messageForImage); - - return true; + startRecording(true, imageDataURL, imageName, ''); } else { - messageForImage = prompt('Enter a message for the image:'); - askYunaImage = messageManagerInstance.sendMessage(messageForImage, kanojoManager.buildKanojo(), [imageDataURL, imageName, messageForImage], '/image', false, false, isStreamingChatModeEnabled); + const messageForImage = prompt('Enter a message for the image:'); + messageManagerInstance.sendMessage(messageForImage, kanojoManager.buildKanojo(), [imageDataURL, imageName, messageForImage], '/image', false, false, isStreamingChatModeEnabled); } } -// Modify the captureImage function to handle file uploads async function captureImageViaFile(inputElement, image = null, imagePrompt = null) { - var file = ''; - file = inputElement.files[0] || (image && !imagePrompt ? image : imagePrompt && image ? image : null); + const file = inputElement?.files?.[0] || image; if (!file) return alert('No file selected.'); const reader = new FileReader(); - reader.onloadend = async function () { + reader.onloadend = () => { const imageDataURL = reader.result; - var messageForImage = ''; - messageForImage = prompt('Enter a message for the image:'); - + const messageForImage = prompt('Enter a message for the image:'); const imageName = Date.now().toString(); messageManagerInstance.sendMessage('', kanojoManager.buildKanojo(), [imageDataURL, imageName, messageForImage], '/image', false, false, isStreamingChatModeEnabled); }; - reader.readAsDataURL(file); } function captureAudioViaFile() { const audioUpload = document.getElementById('audioUpload'); const file = audioUpload.files[0]; - - if (!file) { - alert('No file selected.'); - return; - } - - const reader = new FileReader(); - reader.onloadend = async function () { - const audioDataURL = reader.result; - const audioName = Date.now().toString(); - }; + if (!file) return alert('No file selected.'); const formData = new FormData(); - formData.append('audio', file); formData.append('task', 'transcribe'); const userQuestion = prompt("What's your question?"); - - fetch('/audio', { - method: 'POST', - body: formData - }) - .then(response => response.json()) + fetch('/audio', { method: 'POST', body: formData }) + .then(res => res.json()) .then(data => { - const makeRAG = confirm("Do you want to make a RAG?"); - if (!makeRAG) { - var ragMessage = `Context Audio: "${data.text}"\nQuestion: ${userQuestion}` + if (!confirm('Do you want to make a RAG?')) { + const ragMessage = `Context Audio: "${data.text}"\nQuestion: ${userQuestion}`; inputTextContainer.value = ragMessage; messageManagerInstance.sendMessage(ragMessage); } else { - const textBlob = new Blob([data.text], { - type: 'text/plain' - }); + const textBlob = new Blob([data.text], { type: 'text/plain' }); const questionFormData = new FormData(); questionFormData.append('text', textBlob, 'content.txt'); questionFormData.append('query', userQuestion); - - fetch('/analyze', { - method: 'POST', - body: questionFormData - }) + fetch('/analyze', { method: 'POST', body: questionFormData }) .then(response => response.json()) - .then(result => { - console.log(result); - }) - .catch(error => { - console.error('Error:', error); - }); + .then(result => console.log(result)) + .catch(error => console.error('Error:', error)); } }); - - reader.readAsDataURL(file); } function captureVideoViaFile() { const videoUpload = document.getElementById('videoUpload'); const file = videoUpload.files[0]; - - if (!file) { - alert('No file selected.'); - return; - } - - const videoFrames = []; + if (!file) return alert('No file selected.'); const video = document.createElement('video'); video.src = URL.createObjectURL(file); - video.addEventListener('loadedmetadata', function () { + video.addEventListener('loadedmetadata', () => { const duration = video.duration; + const videoFrames = []; let currentTime = 0; - function captureFrame() { + const captureFrame = () => { if (currentTime <= duration) { video.currentTime = currentTime; - video.addEventListener('seeked', function () { + video.addEventListener('seeked', function onSeeked() { const canvas = document.createElement('canvas'); canvas.width = video.videoWidth; canvas.height = video.videoHeight; - const ctx = canvas.getContext('2d'); - ctx.drawImage(video, 0, 0, canvas.width, canvas.height); - const frameDataURL = canvas.toDataURL('image/jpeg'); - videoFrames.push(frameDataURL); + canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height); + videoFrames.push(canvas.toDataURL('image/jpeg')); currentTime += 30; captureFrame(); - }, { - once: true - }); + video.removeEventListener('seeked', onSeeked); + }, { once: true }); } else { - console.log('not implemented'); + captureImageViaFile(null, videoFrames[0], 'Describe the image'); } - } - + }; captureFrame(); }); - // capture first frame using captureImageViaFile(image) function - captureRessult = captureImageViaFile(videoFrames[0], 'Describe the image'); - const formData = new FormData(); formData.append('audio', file); formData.append('task', 'transcribe'); - fetch('/audio', { - method: 'POST', - body: formData - }) - .then(response => response.json()) - .then(data => { - console.log('The text in video:', data.text); - }); + fetch('/audio', { method: 'POST', body: formData }) + .then(res => res.json()) + .then(data => console.log('The text in video:', data.text)) + .catch(error => console.error('Error:', error)); } function captureTextViaFile() { - const textUpload = document.getElementById('textUpload'); - const file = textUpload.files[0]; - - if (!file) { - alert('No file selected.'); - return; - } + const file = document.getElementById('textUpload').files[0]; + if (!file) return alert('No file selected.'); const reader = new FileReader(); - reader.onloadend = async function () { - const textDataURL = reader.result; - const textName = Date.now().toString(); - } - - const formData = new FormData(); - - formData.append('audio', file); - - fetch('/text', { - method: 'POST', - body: formData - }) - .then(response => response.json()) - .then(data => { - console.log('The text in video:', data.text); - }) + reader.onloadend = () => { + const formData = new FormData(); + formData.append('audio', file); + fetch('/text', { method: 'POST', body: formData }) + .then(response => response.json()) + .then(data => console.log('The text in video:', data.text)) + .catch(console.error); + }; reader.readAsDataURL(file); } -// Function to fetch and populate chat history file options +// Helper function for POST requests +function postData(task, data = {}) { + return fetch(`${config_data.server.url + config_data.server.port}/history`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ task, ...data }), + }).then(res => res.json()); +} + +// Populate history select function populateHistorySelect() { loadConfig(); - return new Promise((resolve, reject) => { - var historySelect = document.getElementById('chat-items'); - historySelect.innerHTML = ''; - - // Fetch the list of history files from the server using the new /history route with 'load' task - fetch(`${config_data.server.url + config_data.server.port}/history`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - task: 'list', - }), - }) - .then(response => response.json()) - .then(data => { - historySelect = document.getElementById('chat-items'); - if (data.history != undefined) { - data = data.history; + const historySelect = document.getElementById('chat-items'); + historySelect.innerHTML = ''; + + postData('list').then(data => { + const histories = data.history || data; + historySelect.insertAdjacentHTML('beforeend', histories.map(filename => ` +
  • +
    ${filename}
    +
    + +
      + ${['Open', 'Edit', 'Delete', 'Download', 'Rename'].map(action => `
      • `).join('')} +
    +
    +
    • + `).join('')); + + duplicateAndCategorizeChats(); + document.querySelectorAll('.collection-item .collection-actions li button').forEach(button => { + button.addEventListener('click', event => { + event.preventDefault(); + const item = button.closest('.collection-item'); + const fileName = item.querySelector('.collection-name').textContent; + const action = button.textContent; + selectedFilename = action !== 'Rename' ? fileName : prompt('Enter new name:', fileName); + + switch (action) { + case 'Open': + historyManagerInstance.loadSelectedHistory(fileName); + OpenTab('1'); + break; + case 'Edit': + postData('load', { chat: fileName }).then(data => { + const popup = document.createElement('div'); + popup.className = 'block-popup edit-popup'; + popup.innerHTML = ` +
    +
    Edit History
    +
    + +
    +
    + + +
    +
    + `; + document.body.appendChild(popup); + }); + break; + case 'Delete': + case 'Rename': + const task = action.toLowerCase(); + postData(task, { chat: fileName, name: selectedFilename }).then(() => populateHistorySelect()).catch(console.error); + break; + case 'Download': + postData('load', { chat: fileName }).then(data => { + const blob = new Blob([JSON.stringify(data)], { type: 'text/plain' }); + const a = document.createElement('a'); + a.href = URL.createObjectURL(blob); + a.download = `${fileName}.json`; + a.click(); + URL.revokeObjectURL(a.href); + }).catch(console.error); + break; } - - // Populate the -
    -
    - - -
    -
    - `; - - historyPopup.innerHTML = popupContent; - document.body.appendChild(historyPopup); - }); - break; - case 'Delete': - fetch(`${config_data.server.url + config_data.server.port}/history`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - chat: fileName, - task: "delete" - }) - }) - .then(response => { - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } - return response.json(); - }) - .then(populateHistorySelect()) - .catch(error => { - console.error('An error occurred:', error); - }); - break; - case 'Download': - // request load history file from the server and download it as json file - fetch(`${config_data.server.url + config_data.server.port}/history`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - chat: fileName, - task: "load" - }) - }) - .then(response => response.json()) - .then(data => { - var chatHistory = JSON.stringify(data); - var blob = new Blob([chatHistory], { - type: 'text/plain', - }); - var url = URL.createObjectURL(blob); - - // Create a temporary anchor element for downloading - var a = document.createElement('a'); - a.href = url; - a.download = `${fileName}.json`; - a.click(); - - // Clean up - URL.revokeObjectURL(url); - }) - .catch(error => { - console.error('Error fetching history for download:', error); - }); - break; - case 'Rename': - var newName = prompt('Enter a new name for the file (with .json):', fileName); - selectedFilename = newName; - - fetch(`${config_data.server.url + config_data.server.port}/history`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - chat: fileName, - name: newName, - task: "rename" - }) - }) - .then(response => { - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } - return response.json(); - }) - .then(populateHistorySelect()) - .catch(error => { - console.error('An error occurred:', error); - }); - break; - } - }); - }); - - selectedFilename = config_data.settings.default_history_file; - }) - .catch(error => { - console.error('Error fetching history files:', error); }); + }); + selectedFilename = config_data.settings.default_history_file; + }).catch(console.error); - // Resolve the promise when the operation is complete - resolve(); - }); + return Promise.resolve(); } function duplicateAndCategorizeChats() { - const chatList = document.querySelector('#chat-items'); - const collectionItems = document.querySelector('#collectionItems'); - - // Clear existing content in collectionItems - collectionItems.innerHTML = ''; - - // Create an object to store categorized chats - const categories = { - 'Uncategorized': [] - }; - - // Check if chatList exists and has items - const items = chatList && chatList.children.length > 0 ? - chatList.querySelectorAll('.collection-item') : - document.querySelectorAll('.collection-item'); - - items.forEach(item => { - const chatName = item.querySelector('.collection-name').textContent; - const colonIndex = chatName.indexOf(':'); - - if (colonIndex !== -1) { - const folder = chatName.substring(colonIndex + 1).split('.')[0]; // Get the part after ':' and before '.' - if (!categories[folder]) { - categories[folder] = []; - } - categories[folder].push(item.cloneNode(true)); - } else { - categories['Uncategorized'].push(item.cloneNode(true)); - } + const categories = { 'Uncategorized': [] }; + document.querySelectorAll('#chat-items .collection-item').forEach(item => { + const name = item.querySelector('.collection-name').textContent; + const folder = name.includes(':') ? name.split(':')[1].split('.')[0] : 'Uncategorized'; + (categories[folder] = categories[folder] || []).push(item.cloneNode(true)); }); - // Create category blocks and add chats - for (const [category, chats] of Object.entries(categories)) { - if (chats.length === 0) continue; // Skip empty categories - - const categoryBlock = document.createElement('div'); - categoryBlock.className = 'category-block mb-3'; - categoryBlock.innerHTML = `
    ${category}
    `; - - const categoryList = document.createElement('ul'); - categoryList.className = 'list-group'; - - chats.forEach(chat => { - categoryList.appendChild(chat); - }); - - categoryBlock.appendChild(categoryList); - collectionItems.appendChild(categoryBlock); - } + const collectionItems = document.getElementById('collectionItems'); + collectionItems.innerHTML = Object.entries(categories).map(([cat, chats]) => ` +
    +
    ${cat}
    +
      + ${chats.map(chat => chat.outerHTML).join('')} +
    +
    + `).join(''); } -var myDefaultAllowList = bootstrap.Tooltip.Default.allowList; -myDefaultAllowList['a'] = myDefaultAllowList['a'] || []; -myDefaultAllowList['a'].push('onclick'); +const allowList = bootstrap.Tooltip.Default.allowList; +(allowList['a'] = allowList['a'] || []).push('onclick'); -var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')); -var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { - return new bootstrap.Popover(popoverTriggerEl, { - sanitize: false, - allowList: myDefaultAllowList - }); -}); +[...document.querySelectorAll('[data-bs-toggle="popover"]')].map(el => new bootstrap.Popover(el, { + sanitize: false, + allowList +})); function handleImageFileClick() { document.getElementById('imageUpload').click(); @@ -1299,310 +838,4 @@ function handleTextFileClick() { document.getElementById('textUpload').click(); } -document.addEventListener('DOMContentLoaded', loadConfig); - -class NotificationManager { - constructor() { - this.dropdownMenu = document.querySelector('#notifications-container'); - this.messages = []; - } - - add(message) { - this.messages.push(message); - this.render(); - } - - delete(message) { - this.messages = this.messages.filter(msg => msg !== message); - this.render(); - } - - clearAll() { - this.messages = []; - this.render(); - } - - render() { - this.dropdownMenu.innerHTML = this.messages.map(message => ` - -
    - ${message} -
    -     - `).join(''); - } -} - -// Create an instance of NotificationManager -const notificationManagerInstance = new NotificationManager(); - -// Call the add method -notificationManagerInstance.add("Hello! Welcome to the chat room!"); - -// First, add this button to trigger the timer with proper user interaction -const createTimerButton = document.createElement('button'); -createTimerButton.classList.add('btn', 'btn-primary', 'ms-2'); -createTimerButton.innerHTML = ''; -createTimerButton.setAttribute('data-bs-toggle', 'tooltip'); -createTimerButton.setAttribute('data-bs-placement', 'top'); -createTimerButton.setAttribute('title', 'Set Timer'); - -// Add it next to the audio record button -buttonAudioRec.parentNode.insertBefore(createTimerButton, buttonAudioRec.nextSibling); - -// Add click handler that shows a modal for timer input -createTimerButton.addEventListener('click', async () => { - const duration = prompt('Enter duration in seconds:', '5'); - if (!duration) return; - - const message = prompt('Enter timer message:', 'Timer is done!'); - if (!message) return; - - try { - const timerId = await timerManagerInstance.createTimer( - parseInt(duration), - message, - "Yuna Timer" - ); - - if (timerId) { - notificationManagerInstance.add(`Timer set for ${duration} seconds`); - } - } catch (error) { - console.error('Error creating timer:', error); - notificationManagerInstance.add('Failed to create timer: ' + error.message); - } -}); - - // First, let's create a proper audio playback function that returns a promise - function playNotificationSound() { - return new Promise((resolve, reject) => { - if (!soundsModeEnabled) { - resolve(); - return; - } - - // Create a new audio element each time - const audio = new Audio('/audio/sfx/app/notification.mp3'); - - // Add event listeners - audio.addEventListener('ended', () => { - resolve(); - }); - - audio.addEventListener('error', (error) => { - reject(error); - }); - - // Attempt to play with user interaction handling - const playAttempt = audio.play(); - - if (playAttempt) { - playAttempt.catch((error) => { - if (error.name === 'NotAllowedError') { - console.warn('Audio playback requires user interaction first'); - resolve(); // Resolve anyway to prevent unhandled rejection - } else { - reject(error); - } - }); - } - }); - } - -// Add this to your existing TimerManager class -class TimerManager { - constructor(notificationManager) { - this.notificationManager = notificationManager; - this.timers = new Map(); - this.hasNotificationPermission = false; - this.initializePermission(); - } - - async initializePermission() { - if (!("Notification" in window)) { - console.warn("This browser does not support notifications"); - return; - } - - if (Notification.permission === "granted") { - this.hasNotificationPermission = true; - } - } - - async requestPermission() { - if (!("Notification" in window)) { - throw new Error("This browser does not support notifications"); - } - - try { - const permission = await Notification.requestPermission(); - this.hasNotificationPermission = permission === "granted"; - return this.hasNotificationPermission; - } catch (error) { - console.error("Error requesting notification permission:", error); - throw new Error("Failed to request notification permission"); - } - } - - // Modify the createTimer method in TimerManager class - async createTimer(duration, message, title = "Yuna Timer") { - const granted = await this.requestPermission(); - if (!granted) { - throw new Error("Notification permission denied"); - } - - const timerId = Date.now().toString(); - const triggerTime = Date.now() + duration * 1000; - - // Store timer information - this.timers.set(timerId, { - id: timerId, - message, - title, - triggerTime, - timer: setTimeout(() => this.triggerTimer(timerId), duration * 1000) - }); - - // Add to notification dropdown - this.notificationManager.add(`Timer set: ${message} (${duration}s)`); - - return timerId; - } - - cancelTimer(timerId) { - const timer = this.timers.get(timerId); - if (timer) { - clearTimeout(timer.timer); - this.timers.delete(timerId); - this.notificationManager.add(`Timer cancelled: ${timer.message}`); - return true; - } - return false; - } - -// Modify the triggerTimer method in TimerManager class -triggerTimer(timerId) { - const timer = this.timers.get(timerId); - if (!timer) return; - - // Show system notification - try { - const notificationOptions = { - body: timer.message, - icon: "/static/img/yuna-ai.png", - badge: "/static/img/yuna-ai.png", - silent: false // This ensures the default notification sound plays - }; - - // Check if notification permission is granted before showing - if (Notification.permission === "granted") { - new Notification(timer.title, notificationOptions); - } - - // Handle sound separately with the new function - //playNotificationSound().catch(error => { - // console.warn('Could not play notification sound:', error); - //}); - - // Trigger vibration if supported - if (navigator.vibrate) { - try { - navigator.vibrate([200, 100, 200]); - } catch (error) { - console.warn('Vibration not supported:', error); - } - } - - } catch (error) { - console.error("Error showing notification:", error); - } - - // Add to notification dropdown - this.notificationManager.add(`Timer completed: ${timer.message}`); - - // Clean up timer - this.timers.delete(timerId); -} - - getActiveTimers() { - const activeTimers = []; - for (const [id, timer] of this.timers) { - activeTimers.push({ - id, - message: timer.message, - remainingTime: Math.ceil((timer.triggerTime - Date.now()) / 1000) - }); - } - return activeTimers; - } -} - -// Create an instance of TimerManager -const timerManagerInstance = new TimerManager(notificationManagerInstance); - -function updateMsgCount() { - setTimeout(() => { - document.getElementById('messageCount').textContent = document.querySelectorAll('#message-container .p-2.mb-2').length; - document.getElementById('chatsCount').textContent = document.querySelectorAll('#chat-items .collection-item').length; - }, 300); -} - -function deleteMessageFromHistory(message) { - let fileName = selectedFilename; - - fetch(`${config_data.server.url + config_data.server.port}/history`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - chat: fileName, - task: "delete_message", - text: message - }) - }) - .then(response => { - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } - return response.json(); - }) - .then(historyManagerInstance.loadSelectedHistory(fileName)) - .catch(error => { - console.error('An error occurred:', error); - }); -} - -// Function to adjust textarea height -function adjustTextareaHeight(textarea) { - textarea.style.height = 'auto'; - textarea.style.height = textarea.scrollHeight + 'px'; -} - -// Function to initialize all textareas -function initializeTextareas() { - const textareas = document.querySelectorAll('textarea'); - textareas.forEach(textarea => { - // Disable manual resizing - textarea.style.resize = 'none'; - - // Initial adjustment - adjustTextareaHeight(textarea); - - // Add event listeners for real-time updates - textarea.addEventListener('input', () => adjustTextareaHeight(textarea)); - textarea.addEventListener('change', () => adjustTextareaHeight(textarea)); - - // Create a MutationObserver to watch for changes in content - const observer = new MutationObserver(() => adjustTextareaHeight(textarea)); - observer.observe(textarea, { - childList: true, - characterData: true, - subtree: true - }); - }); -} - -// Run the initialization when the DOM is fully loaded -document.addEventListener('DOMContentLoaded', initializeTextareas); \ No newline at end of file +document.addEventListener('DOMContentLoaded', loadConfig); \ No newline at end of file diff --git a/static/js/kanojo.js b/static/js/kanojo.js index a5b77e2..b235c1d 100644 --- a/static/js/kanojo.js +++ b/static/js/kanojo.js @@ -1,135 +1,47 @@ // Prompt Template Manager class PromptTemplateManager { constructor() { - this.templates = {}; - this.loadTemplates(); - } - - addTemplate(name, content) { - this.templates[name] = content; - this.saveTemplates(); - } - - deleteTemplate(name) { - delete this.templates[name]; + this.templates = JSON.parse(localStorage.getItem('promptTemplates')) || { + 'Default': 'You are a helpful assistant.', + 'Creative': 'You are a creative writer with a vivid imagination.', + 'Professional': 'You are a professional business consultant.' + }; this.saveTemplates(); } - getTemplate(name) { - return this.templates[name] || ''; - } - - getAllTemplates() { - return this.templates; - } - - saveTemplates() { - localStorage.setItem('promptTemplates', JSON.stringify(this.templates)); - } - - loadTemplates() { - const storedTemplates = localStorage.getItem('promptTemplates'); - if (storedTemplates) { - this.templates = JSON.parse(storedTemplates); - } else { - // Default templates - this.templates = { - 'Default': 'You are a helpful assistant.', - 'Creative': 'You are a creative writer with a vivid imagination.', - 'Professional': 'You are a professional business consultant.' - }; - this.saveTemplates(); - } - } - + addTemplate(name, content) { this.templates[name] = content; this.saveTemplates(); } + deleteTemplate(name) { delete this.templates[name]; this.saveTemplates(); } + getTemplate(name) { return this.templates[name] || ''; } + getAllTemplates() { return this.templates; } + saveTemplates() { localStorage.setItem('promptTemplates', JSON.stringify(this.templates)); } exportTemplates() { - const json = JSON.stringify(this.templates, null, 2); - const blob = new Blob([json], { - type: 'application/json' - }); - const url = URL.createObjectURL(blob); - const a = document.createElement('a'); - a.href = url; - a.download = 'prompt_templates.json'; - a.click(); - } - - importTemplates(json) { - this.templates = JSON.parse(json); - this.saveTemplates(); + const blob = new Blob([JSON.stringify(this.templates, null, 2)], { type: 'application/json' }); + Object.assign(document.createElement('a'), { href: URL.createObjectURL(blob), download: 'prompt_templates.json' }).click(); } + importTemplates(json) { this.templates = JSON.parse(json); this.saveTemplates(); } } // Kanojo Connect class KanojoConnect { constructor() { - this.kanojos = {}; - this.loadKanojos(); - } - - addKanojo(name, data) { - this.kanojos[name] = data; + this.kanojos = JSON.parse(localStorage.getItem('kanojos')) || {}; + if (!Object.keys(this.kanojos).length) this.addKanojo('Yuna', { name: 'Yuna', memory: "You're a cool girl", character: 'Name: Yuna\nAge: 15\nTraits: Shy, Lovely, Obsessive\nNationality: Japanese\nOccupation: Student\nHobbies: Reading, Drawing, Coding\nBody: Slim, Short, Long hair, Flat chest' }); this.saveKanojos(); } - deleteKanojo(name) { - delete this.kanojos[name]; - this.saveKanojos(); - } - - getKanojo(name) { - return this.kanojos[name] || null; - } - - getAllKanojos() { - return this.kanojos; - } - - saveKanojos() { - localStorage.setItem('kanojos', JSON.stringify(this.kanojos)); - } - - loadKanojos() { - const storedKanojos = localStorage.getItem('kanojos'); - if (storedKanojos) { - this.kanojos = JSON.parse(storedKanojos); - } else { - this.createDefaultKanojo(); - } - } - - createDefaultKanojo() { - const defaultKanojo = { - name: 'Yuna', - memory: "You're a cool girl", - character: 'Name: Yuna\nAge: 15\nTraits: Shy, Lovely, Obsessive\nNationality: Japanese\nOccupation: Student\nHobbies: Reading, Drawing, Coding\nBody: Slim, Short, Long hair, Flat chest' - }; - this.addKanojo('Yuna', defaultKanojo); - } - - buildKanojo(name, promptTemplate) { - const kanojo = this.getKanojo(name); - if (!kanojo) return ''; - - // Construct the formatted Kanojo string with memory, character, and prompt template - return `<|begin_of_text|>${kanojo.memory}\n${kanojo.character}\n\nTask: ${promptTemplate}\n\n`; - } - + addKanojo(name, data) { this.kanojos[name] = data; this.saveKanojos(); } + deleteKanojo(name) { delete this.kanojos[name]; this.saveKanojos(); } + getKanojo(name) { return this.kanojos[name] || null; } + getAllKanojos() { return this.kanojos; } + saveKanojos() { localStorage.setItem('kanojos', JSON.stringify(this.kanojos)); } exportKanojos() { - const json = JSON.stringify(this.kanojos, null, 2); - const blob = new Blob([json], { - type: 'application/json' - }); - const url = URL.createObjectURL(blob); - const a = document.createElement('a'); - a.href = url; - a.download = 'kanojos.json'; - a.click(); + const blob = new Blob([JSON.stringify(this.kanojos, null, 2)], { type: 'application/json' }); + Object.assign(document.createElement('a'), { href: URL.createObjectURL(blob), download: 'kanojos.json' }).click(); } - - importKanojos(json) { - this.kanojos = JSON.parse(json); - this.saveKanojos(); + importKanojos(json) { this.kanojos = JSON.parse(json); this.saveKanojos(); } + buildKanojo(name, promptTemplate) { + const k = this.getKanojo(name); + return k ? `<|begin_of_text|>${k.memory}\n${k.character}\n\nTask: ${promptTemplate}\n\n` : ''; } } @@ -138,171 +50,94 @@ const promptManager = new PromptTemplateManager(); const kanojoManager = new KanojoConnect(); // UI Functions -function updatePromptTemplateList() { - const select = document.getElementById('promptTemplateSelect'); - select.innerHTML = ''; - Object.keys(promptManager.getAllTemplates()).forEach(name => { - const option = document.createElement('option'); - option.value = name; - option.textContent = name; - select.appendChild(option); - }); -} +const updateList = (id, items) => { + const select = document.getElementById(id); + select.innerHTML = Object.keys(items()).map(name => ``).join(''); +}; -function updateKanojoList() { - const select = document.getElementById('kanojoSelect'); - select.innerHTML = ''; - Object.keys(kanojoManager.getAllKanojos()).forEach(name => { - const option = document.createElement('option'); - option.value = name; - option.textContent = name; - select.appendChild(option); - }); -} - -function loadSelectedPromptTemplate() { +const loadTemplate = () => { const name = document.getElementById('promptTemplateSelect').value; - document.getElementById('promptTemplateName').value = name; + Object.assign(document.getElementById('promptTemplateName'), { value: name }); document.getElementById('promptTemplateContent').value = promptManager.getTemplate(name); -} +}; -function loadSelectedKanojo() { +const loadKanojo = () => { const name = document.getElementById('kanojoSelect').value; - const kanojo = kanojoManager.getKanojo(name); - if (kanojo) { - document.getElementById('kanojoName').value = kanojo.name; - document.getElementById('kanojoMemory').value = kanojo.memory || ''; - document.getElementById('kanojoCharacter').value = kanojo.character; + const k = kanojoManager.getKanojo(name); + if (k) { + Object.assign(document.getElementById('kanojoName'), { value: k.name }); + Object.assign(document.getElementById('kanojoMemory'), { value: k.memory || '' }); + document.getElementById('kanojoCharacter').value = k.character; } -} +}; -// Function to build Kanojo string -function getBuiltKanojo() { - const kanojoName = document.getElementById('kanojoSelect').value; - const promptTemplateName = document.getElementById('promptTemplateSelect').value; - const promptTemplate = promptManager.getTemplate(promptTemplateName); - return kanojoManager.buildKanojo(kanojoName, promptTemplate); -} +const getBuiltKanojo = () => { + const name = document.getElementById('kanojoSelect').value; + const template = promptManager.getTemplate(document.getElementById('promptTemplateSelect').value); + return kanojoManager.buildKanojo(name, template); +}; -// Initialize UI and attach event listeners +// Event Listeners document.addEventListener('DOMContentLoaded', () => { - updatePromptTemplateList(); - updateKanojoList(); - loadSelectedPromptTemplate(); - loadSelectedKanojo(); + updateList('promptTemplateSelect', () => promptManager.getAllTemplates()); + updateList('kanojoSelect', () => kanojoManager.getAllKanojos()); + loadTemplate(); + loadKanojo(); - // Prompt Template event listeners - document.getElementById('promptTemplateSelect').addEventListener('change', loadSelectedPromptTemplate); + // Prompt Template + document.getElementById('promptTemplateSelect').addEventListener('change', loadTemplate); document.getElementById('savePromptTemplate').addEventListener('click', () => { const name = document.getElementById('promptTemplateName').value.trim(); const content = document.getElementById('promptTemplateContent').value.trim(); - if (name && content) { - promptManager.addTemplate(name, content); - updatePromptTemplateList(); - loadSelectedPromptTemplate(); - alert(`Prompt Template "${name}" saved successfully!`); - } else { - alert('Please provide both name and content for the Prompt Template.'); - } + if (name && content) { promptManager.addTemplate(name, content); updateList('promptTemplateSelect', () => promptManager.getAllTemplates()); loadTemplate(); alert(`Prompt Template "${name}" saved!`); } + else { alert('Provide both name and content.'); } }); document.getElementById('deletePromptTemplate').addEventListener('click', () => { const name = document.getElementById('promptTemplateSelect').value; - if (confirm(`Are you sure you want to delete the Prompt Template "${name}"?`)) { - promptManager.deleteTemplate(name); - updatePromptTemplateList(); - loadSelectedPromptTemplate(); - alert(`Prompt Template "${name}" deleted successfully!`); - } - }); - document.getElementById('exportPromptTemplates').addEventListener('click', () => { - promptManager.exportTemplates(); + if (confirm(`Delete Prompt Template "${name}"?`)) { promptManager.deleteTemplate(name); updateList('promptTemplateSelect', () => promptManager.getAllTemplates()); loadTemplate(); alert(`Deleted "${name}".`); } }); + document.getElementById('exportPromptTemplates').addEventListener('click', () => promptManager.exportTemplates()); document.getElementById('importPromptTemplates').addEventListener('click', () => { - const fileInput = document.createElement('input'); - fileInput.type = 'file'; - fileInput.accept = 'application/json'; + const fileInput = document.createElement('input'); fileInput.type = 'file'; fileInput.accept = 'application/json'; fileInput.onchange = e => { const file = e.target.files[0]; const reader = new FileReader(); reader.onload = event => { - try { - promptManager.importTemplates(event.target.result); - updatePromptTemplateList(); - loadSelectedPromptTemplate(); - alert('Prompt Templates imported successfully!'); - } catch (error) { - alert('Failed to import Prompt Templates. Please ensure the file is a valid JSON.'); - } + try { promptManager.importTemplates(event.target.result); updateList('promptTemplateSelect', () => promptManager.getAllTemplates()); loadTemplate(); alert('Imported templates!'); } + catch { alert('Invalid JSON.'); } }; reader.readAsText(file); }; fileInput.click(); }); - // Kanojo event listeners - document.getElementById('kanojoSelect').addEventListener('change', loadSelectedKanojo); + // Kanojo + document.getElementById('kanojoSelect').addEventListener('change', loadKanojo); document.getElementById('saveKanojo').addEventListener('click', () => { const name = document.getElementById('kanojoName').value.trim(); const memory = document.getElementById('kanojoMemory').value.trim(); const character = document.getElementById('kanojoCharacter').value.trim(); - if (name && character) { - kanojoManager.addKanojo(name, { - name, - memory, - character - }); - updateKanojoList(); - loadSelectedKanojo(); - alert(`Kanojo "${name}" saved successfully!`); - } else { - alert('Please provide both name and character details for the Kanojo.'); - } + if (name && character) { kanojoManager.addKanojo(name, { name, memory, character }); updateList('kanojoSelect', () => kanojoManager.getAllKanojos()); loadKanojo(); alert(`Kanojo "${name}" saved!`); } + else { alert('Provide name and character details.'); } }); document.getElementById('addKanojo').addEventListener('click', () => { - const name = prompt('Enter the name of the new Kanojo:'); - if (name) { - if (kanojoManager.getKanojo(name)) { - alert(`Kanojo "${name}" already exists.`); - return; - } - kanojoManager.addKanojo(name, { - name, - memory: '', - character: '' - }); - updateKanojoList(); - loadSelectedKanojo(); - alert(`Kanojo "${name}" added successfully!`); - } + const name = prompt('New Kanojo name:'); + if (name && !kanojoManager.getKanojo(name)) { kanojoManager.addKanojo(name, { name, memory: '', character: '' }); updateList('kanojoSelect', () => kanojoManager.getAllKanojos()); loadKanojo(); alert(`Added "${name}".`); } + else { alert(`Kanojo "${name}" exists or invalid.`); } }); document.getElementById('deleteKanojo').addEventListener('click', () => { const name = document.getElementById('kanojoSelect').value; - if (confirm(`Are you sure you want to delete the Kanojo "${name}"?`)) { - kanojoManager.deleteKanojo(name); - updateKanojoList(); - loadSelectedKanojo(); - alert(`Kanojo "${name}" deleted successfully!`); - } - }); - document.getElementById('exportKanojos').addEventListener('click', () => { - kanojoManager.exportKanojos(); + if (confirm(`Delete Kanojo "${name}"?`)) { kanojoManager.deleteKanojo(name); updateList('kanojoSelect', () => kanojoManager.getAllKanojos()); loadKanojo(); alert(`Deleted "${name}".`); } }); + document.getElementById('exportKanojos').addEventListener('click', () => kanojoManager.exportKanojos()); document.getElementById('importKanojos').addEventListener('click', () => { - const fileInput = document.createElement('input'); - fileInput.type = 'file'; - fileInput.accept = 'application/json'; + const fileInput = document.createElement('input'); fileInput.type = 'file'; fileInput.accept = 'application/json'; fileInput.onchange = e => { const file = e.target.files[0]; const reader = new FileReader(); reader.onload = event => { - try { - kanojoManager.importKanojos(event.target.result); - updateKanojoList(); - loadSelectedKanojo(); - alert('Kanojos imported successfully!'); - } catch (error) { - alert('Failed to import Kanojos. Please ensure the file is a valid JSON.'); - } + try { kanojoManager.importKanojos(event.target.result); updateList('kanojoSelect', () => kanojoManager.getAllKanojos()); loadKanojo(); alert('Imported Kanojos!'); } + catch { alert('Invalid JSON.'); } }; reader.readAsText(file); }; @@ -310,19 +145,11 @@ document.addEventListener('DOMContentLoaded', () => { }); document.getElementById('exportSingleKanojo').addEventListener('click', () => { const name = document.getElementById('kanojoSelect').value; - const kanojo = kanojoManager.getKanojo(name); - if (kanojo) { - const kanojoContent = kanojoManager.buildKanojo(name, promptManager.getTemplate('Default')); - const blob = new Blob([kanojoContent], { - type: 'text/plain' - }); - const url = URL.createObjectURL(blob); - const a = document.createElement('a'); - a.href = url; - a.download = `${name}.txt`; - a.click(); - } else { - alert(`Kanojo "${name}" does not exist.`); + const k = kanojoManager.getKanojo(name); + if (k) { + const blob = new Blob([kanojoManager.buildKanojo(name, promptManager.getTemplate('Default'))], { type: 'text/plain' }); + Object.assign(document.createElement('a'), { href: URL.createObjectURL(blob), download: `${name}.txt` }).click(); } + else { alert(`Kanojo "${name}" does not exist.`); } }); }); \ No newline at end of file diff --git a/static/js/setup.js b/static/js/setup.js index 7573484..6ad8367 100644 --- a/static/js/setup.js +++ b/static/js/setup.js @@ -5,19 +5,19 @@ const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1); // Configuration Handling const openConfigParams = () => { const container = document.getElementById('parameter-container'); - ['ai', 'server', 'settings'].forEach(type => { - container.appendChild(createBlockList(config_data[type], type)); - }); + ['ai', 'server', 'settings'].forEach(type => + container.appendChild(createBlockList(config_data[type], type)) + ); return container; }; const createBlockList = (config, type) => { const div = document.createElement('div'); - div.classList.add('block-list', 'el-9', 'v-coll', `${type}-block-list`, 'list-group', 'list-group-flush'); - div.innerHTML = Object.entries(config).map(([key, value]) => - typeof value === 'boolean' ? createFormCheck(key, value) : - Array.isArray(value) ? createFormGroup(key, value.join(',')) : - createFormGroup(key, value) + div.className = `block-list el-9 v-coll ${type}-block-list list-group list-group-flush`; + div.innerHTML = Object.entries(config).map(([k, v]) => + typeof v === 'boolean' ? createFormCheck(k, v) : + Array.isArray(v) ? createFormGroup(k, v.join(',')) : + createFormGroup(k, v) ).join(''); return div; }; @@ -38,10 +38,10 @@ const createFormCheck = (id, checked) => ` const saveConfigParams = () => { const reverseConfig = { - ai: extractValues('.ai-block-list', ['names', 'himitsu', 'agi', 'emotions', 'miru', 'search', 'audio', 'max_new_tokens', 'context_length', 'temperature', 'repetition_penalty', 'last_n_tokens_size', 'seed', 'top_k', 'top_p', 'stop', 'batch_size', 'threads', 'gpu_layers', 'use_mmap', 'flash_attn', 'use_mlock', 'offload_kqv']), - server: extractValues('.server-block-list', ['port', 'url', 'yuna_default_model', 'miru_default_model', 'eyes_default_model', 'voice_default_model', 'device', 'yuna_text_mode', 'yuna_audio_mode', 'yuna_reference_audio']), - settings: extractValues('.settings-block-list', ['pseudo_api', 'fuctions', 'notifications', 'customConfig', 'sounds', 'use_history', 'background_call', 'nsfw_filter', 'streaming', 'default_history_file', 'default_kanojo', 'default_prompt_template']), - security: extractValues('.security-block-list', ['secret_key', 'encryption_key', '11labs_key']) + ai: extractValues('.ai-block-list', ['names','himitsu','agi','emotions','miru','search','audio','max_new_tokens','context_length','temperature','repetition_penalty','last_n_tokens_size','seed','top_k','top_p','stop','batch_size','threads','gpu_layers','use_mmap','flash_attn','use_mlock','offload_kqv']), + server: extractValues('.server-block-list', ['port','url','yuna_default_model','miru_default_model','eyes_default_model','voice_default_model','device','yuna_text_mode','yuna_audio_mode','yuna_reference_audio']), + settings: extractValues('.settings-block-list', ['pseudo_api','fuctions','notifications','customConfig','sounds','use_history','background_call','nsfw_filter','streaming','default_history_file','default_kanojo','default_prompt_template']), + security: extractValues('.security-block-list', ['secret_key','encryption_key','11labs_key']) }; localStorage.setItem('config', JSON.stringify(reverseConfig)); }; @@ -50,20 +50,16 @@ const extractValues = (selector, keys) => { const block = document.querySelector(selector); return keys.reduce((acc, key) => { const el = block.querySelector(`#${key}`); - if (!el) return acc; - acc[key] = el.type === 'checkbox' ? el.checked : - el.type === 'number' ? parseFloat(el.value) : - ['names', 'stop'].includes(key) ? el.value.split(',') : - el.value; + if (el) acc[key] = el.type === 'checkbox' ? el.checked : + el.type === 'number' ? parseFloat(el.value) : + ['names','stop'].includes(key) ? el.value.split(',') : + el.value; return acc; }, {}); }; // Configuration Loading -const checkConfigData = async () => { - await delay(100); - if (config_data) return; - +const checkConfigData = async () => { const storedConfig = localStorage.getItem('config'); if (storedConfig) { setTimeout(() => { @@ -80,56 +76,35 @@ const checkConfigData = async () => { } catch (error) { console.error('Error:', error); } - await delay(100); - openConfigParams(); } }; - -checkConfigData(); +!config_data && setTimeout(checkConfigData, 100); setTimeout(openConfigParams, 300); // Event Listeners document.addEventListener("keydown", event => { - const activeElement = document.activeElement; - const isInput = ['INPUT', 'TEXTAREA'].includes(activeElement.tagName); - - if (event.key === "Tab") { - event.preventDefault(); - toggleSidebar(); - return; - } - + const active = document.activeElement.tagName; + const isInput = ['INPUT','TEXTAREA'].includes(active); + if (event.key === "Tab") return (event.preventDefault(), toggleSidebar()); if (event.metaKey && !isInput) { - const navSidebar = [...document.getElementsByClassName('side-link')]; const keyMap = { - '1': () => { activateTab(0, '1'); }, - '2': () => { activateTab(1, '2'); }, - '3': () => { activateTab(2, '4'); }, - '4': () => { activateTab(3, '5'); }, - '5': () => { activateTab(5, '7'); }, - '7': () => { - activateTab(6, '7'); - window.open('https://www.patreon.com/YukiArimo', '_blank'); - }, - 'Y': () => { - document.getElementById('videoCallModal').classList.contains('show') ? callYuna.hide() : callYuna.show(); - } + '1': () => activateTab(0, '1'), + '2': () => activateTab(1, '2'), + '3': () => activateTab(2, '4'), + '4': () => activateTab(3, '5'), + '5': () => activateTab(5, '7'), + '7': () => { activateTab(6, '7'); window.open('https://www.patreon.com/YukiArimo', '_blank'); }, + 'Y': () => callYuna[document.getElementById('videoCallModal').classList.contains('show') ? 'hide' : 'show']() }; - if (keyMap[event.key]) { - event.preventDefault(); - keyMap[event.key](); - } + if (keyMap[event.key]) { event.preventDefault(); keyMap[event.key](); } } - - if (event.key === "Enter" && activeElement.id === 'input_text') { - event.preventDefault(); - messageManagerInstance.sendMessage(''); + if (event.key === "Enter" && document.activeElement.id === 'input_text') { + event.preventDefault(); messageManagerInstance.sendMessage(''); } }); const activateTab = (index, tabId) => { - const navSidebar = document.getElementsByClassName('side-link'); - [...navSidebar].forEach((link, idx) => link.classList.toggle('active', idx === index)); + [...document.getElementsByClassName('side-link')].forEach((l, i) => l.classList.toggle('active', i === index)); if (tabId) OpenTab(tabId); }; @@ -142,7 +117,6 @@ const callYuna = { // Sidebar and Tabs const navSidebar = document.getElementsByClassName('side-link'); const scrollToTop = document.querySelector('.scroll-to-top'); - [...navSidebar].forEach((link, i) => { link.addEventListener('click', () => { scrollToTop.style.display = i === 0 ? 'none' : 'flex'; @@ -150,9 +124,8 @@ const scrollToTop = document.querySelector('.scroll-to-top'); link.classList.add('active'); }); }); - document.querySelectorAll('.side-link')[3]?.addEventListener('click', () => { - ['character', 'system'].forEach(id => { + ['character','system'].forEach(id => { const el = document.getElementById(id); if (el) el.style.height = `calc(${el.scrollHeight}px + 3px)`; }); @@ -161,11 +134,250 @@ document.querySelectorAll('.side-link')[3]?.addEventListener('click', () => { // Apply Settings const applySettings = () => { const { settings } = JSON.parse(localStorage.getItem('config')) || {}; - if (!settings) return; - - settings.streaming && document.querySelector('#streamingChatMode')?.click(); - settings.customConfig && document.querySelector('#customConfig')?.click(); - settings.sounds && document.querySelector('#soundsMode')?.click(); + if (settings) { + settings.streaming && document.querySelector('#streamingChatMode')?.click(); + settings.customConfig && document.querySelector('#customConfig')?.click(); + settings.sounds && document.querySelector('#soundsMode')?.click(); + } }; +setTimeout(applySettings, 100); + +class NotificationManager { + constructor() { + this.dropdownMenu = document.querySelector('#notifications-container'); + this.messages = []; + } + + add(message) { + this.messages.push(message); + this.render(); + } + + delete(message) { + this.messages = this.messages.filter(msg => msg !== message); + this.render(); + } + + clearAll() { + this.messages = []; + this.render(); + } + + render() { + this.dropdownMenu.innerHTML = this.messages.map(message => ` + +
    + ${message} +

    Push Notifications Demo

    + + + +
    +

    Send Test Notification

    +
    +
    + +
    +
    +     + `).join(''); + } +} + +// Create an instance of NotificationManager +const notificationManagerInstance = new NotificationManager(); + +// Call the add method +notificationManagerInstance.add("Hello! Welcome to the chat room!"); + +function updateMsgCount() { + setTimeout(() => { + document.getElementById('messageCount').textContent = document.querySelectorAll('#message-container .p-2.mb-2').length; + document.getElementById('chatsCount').textContent = document.querySelectorAll('#chat-items .collection-item').length; + }, 300); +} + +function deleteMessageFromHistory(message) { + let fileName = selectedFilename; + + fetch(`${config_data.server.url + config_data.server.port}/history`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + chat: fileName, + task: "delete_message", + text: message + }) + }) + .then(response => { + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + return response.json(); + }) + .then(historyManagerInstance.loadSelectedHistory(fileName)) + .catch(error => { + console.error('An error occurred:', error); + }); +} + +// Function to adjust textarea height +function adjustTextareaHeight(textarea) { + textarea.style.height = 'auto'; + textarea.style.height = textarea.scrollHeight + 'px'; +} + +// Function to initialize all textareas +function initializeTextareas() { + const textareas = document.querySelectorAll('textarea'); + textareas.forEach(textarea => { + // Disable manual resizing + textarea.style.resize = 'none'; + + // Initial adjustment + adjustTextareaHeight(textarea); + + // Add event listeners for real-time updates + textarea.addEventListener('input', () => adjustTextareaHeight(textarea)); + textarea.addEventListener('change', () => adjustTextareaHeight(textarea)); + + // Create a MutationObserver to watch for changes in content + const observer = new MutationObserver(() => adjustTextareaHeight(textarea)); + observer.observe(textarea, { + childList: true, + characterData: true, + subtree: true + }); + }); +} + +// Run the initialization when the DOM is fully loaded +document.addEventListener('DOMContentLoaded', initializeTextareas); + +var vapidPublicKey = 'BLAWDkBakXLWfyQP5zAXR5Dyv4-W1nsRDkUk9Kw9MqKppQCdbsP-yfz7kEpAPvDMy2lszg_SZ9QEC9Uda8mpKSg' + +// static/app.js +let swRegistration = null; + +// Check if service workers are supported +if ('serviceWorker' in navigator && 'PushManager' in window) { + window.addEventListener('load', () => { + navigator.serviceWorker.register('/static/sw.js') + .then(registration => { + swRegistration = registration; + initializeUI(); + }) + .catch(error => console.error('Service Worker Error:', error)); + }); +} + +function initializeUI() { + const subscribeButton = document.getElementById('subscribe'); + const unsubscribeButton = document.getElementById('unsubscribe'); + + // Check for existing subscription + swRegistration.pushManager.getSubscription() + .then(subscription => { + if (subscription) { + console.log('User is already subscribed:', subscription); + updateSubscriptionOnServer(subscription); + subscribeButton.disabled = true; + unsubscribeButton.disabled = false; + } else { + subscribeButton.disabled = false; + unsubscribeButton.disabled = true; + } + }); + + // Set button click events + subscribeButton.addEventListener('click', subscribeUser); + unsubscribeButton.addEventListener('click', unsubscribeUser); +} + +function subscribeUser() { + const applicationServerKey = urlB64ToUint8Array(vapidPublicKey); + + swRegistration.pushManager.subscribe({ + userVisibleOnly: true, + applicationServerKey: applicationServerKey + }) + .then(subscription => { + console.log('User is subscribed:', subscription); + updateSubscriptionOnServer(subscription); + updateButtonState(); + }) + .catch(err => console.error('Failed to subscribe user: ', err)); +} + +function unsubscribeUser() { + swRegistration.pushManager.getSubscription() + .then(subscription => { + if (subscription) { + return subscription.unsubscribe(); + } + }) + .then(() => { + updateButtonState(); + console.log('User is unsubscribed'); + }) + .catch(error => console.error('Error unsubscribing', error)); +} + +function updateSubscriptionOnServer(subscription) { + fetch('/subscribe', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(subscription) + }); +} + +function sendNotification() { + const title = document.getElementById('title').value; + const body = document.getElementById('body').value; + + fetch('/send-notification', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + title: title, + body: body + }) + }); +} + +// Helper function to convert VAPID key +function urlB64ToUint8Array(base64String) { + const padding = '='.repeat((4 - base64String.length % 4) % 4); + const base64 = (base64String + padding) + .replace(/\-/g, '+') + .replace(/_/g, '/'); + + const rawData = window.atob(base64); + const outputArray = new Uint8Array(rawData.length); + + for (let i = 0; i < rawData.length; ++i) { + outputArray[i] = rawData.charCodeAt(i); + } + return outputArray; +} -applySettings(); \ No newline at end of file +function updateButtonState() { + const subscribeButton = document.getElementById('subscribe'); + const unsubscribeButton = document.getElementById('unsubscribe'); + swRegistration.pushManager.getSubscription() + .then(subscription => { + if (subscription) { + subscribeButton.disabled = true; + unsubscribeButton.disabled = false; + } else { + subscribeButton.disabled = false; + unsubscribeButton.disabled = true; + } + }); +} \ No newline at end of file diff --git a/static/manifest.json b/static/manifest.json index af9f778..e502429 100644 --- a/static/manifest.json +++ b/static/manifest.json @@ -1,7 +1,7 @@ { - "short_name": "Yuna AI", - "name": "Yuna AI", - "description": "Yuna AI - Your Private Companion", + "short_name": "Yuna Ai", + "name": "Yuna Ai", + "description": "Yuna Ai - Your Private Companion", "icons": [{ "src": "/static/img/yuna-ai.png", "sizes": "512X512", diff --git a/static/sw.js b/static/sw.js index cf9ae08..5bc6487 100644 --- a/static/sw.js +++ b/static/sw.js @@ -30,7 +30,7 @@ self.addEventListener('push', function(event) { payload = event.data.json(); } catch (e) { payload = { - title: 'Yuna AI', + title: 'Yuna Ai', body: event.data ? event.data.text() : 'No payload' }; } @@ -42,12 +42,12 @@ self.addEventListener('push', function(event) { data: { dateOfArrival: Date.now(), primaryKey: 1, - url: 'https://yuki.yuna-ai.pro' + url: 'https://www.yuna-ai.com' } }; event.waitUntil( - self.registration.showNotification(payload.title || 'Yuna AI', options) + self.registration.showNotification(payload.title || 'Yuna Ai', options) ); }); diff --git a/yuna.html b/yuna.html index 18c2788..9eafdb2 100644 --- a/yuna.html +++ b/yuna.html @@ -5,27 +5,28 @@ - Yuna AI + Yuna Ai - + - + - + + @@ -79,9 +80,9 @@
    - Yuna AI Logo + Yuna Ai Logo
    -
    Yuna AI
    +
    Yuna Ai
      @@ -244,11 +245,11 @@
      Chats