From c1d3a18c7f1a698f001fa8f11ef10cf6e3f28eea Mon Sep 17 00:00:00 2001
From: root <root@ai.unturf.com>
Date: Sun, 10 Nov 2024 22:42:54 +0000
Subject: [PATCH] better diaglog modal html

	modified:   uncloseai.js
---
 uncloseai.js | 53 ++++++++++++++++++++++++++--------------------------
 1 file changed, 26 insertions(+), 27 deletions(-)

diff --git a/uncloseai.js b/uncloseai.js
index f40edd4..2cc332e 100644
--- a/uncloseai.js
+++ b/uncloseai.js
@@ -246,7 +246,7 @@ Ready? Breath and then return a stream of tokens to be used in a TTS system.
       }
     ],
     temperature: 0,
-    max_tokens: 14000
+    max_tokens: 13000
   };
 
   console.log("Sending payload to Hermes:", JSON.stringify(payload, null, 2));
@@ -512,37 +512,36 @@ async function handleUserInput() {
 
 // Function to open TTS modal
 async function openTTSModal() {
-  const modal = document.createElement('div');
-  modal.style.position = 'fixed';
-  modal.style.top = '0';
-  modal.style.left = '0';
-  modal.style.width = '100%';
-  modal.style.height = '100%';
-  modal.style.backgroundColor = 'rgba(0,0,0,0.5)';
-  modal.style.display = 'flex';
-  modal.style.justifyContent = 'center';
-  modal.style.alignItems = 'center';
+  const modal = document.createElement('dialog');
+  modal.open = true;
+  modal.style.maxWidth = '720px';
+  modal.style.border = 'none';
+  modal.style.borderRadius = '8px';
+  modal.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)';
+  //modal.style.padding = '20px';
   modal.style.zIndex = '1001';
 
-  const modalContent = document.createElement('div');
-  modalContent.style.backgroundColor = 'white';
-  modalContent.style.padding = '20px';
-  modalContent.style.borderRadius = '5px';
-  modalContent.style.position = 'relative';
-  modal.appendChild(modalContent);
+  const article = document.createElement('article');
+  modal.appendChild(article);
+
+  const header = document.createElement('header');
+  article.appendChild(header);
 
   const closeButton = document.createElement('button');
   closeButton.textContent = 'X';
-  closeButton.style.position = 'absolute';
-  closeButton.style.top = '10px';
-  closeButton.style.right = '10px';
   closeButton.onclick = () => document.body.removeChild(modal);
-  modalContent.appendChild(closeButton);
+  closeButton.style.float = 'right';
+  header.appendChild(closeButton);
+
+  const h1 = document.createElement('h1');
+  h1.textContent = 'TTS Anything!';
+  article.appendChild(h1);
 
   const textArea = document.createElement('textarea');
   textArea.style.width = '100%';
-  textArea.style.height = '100px';
-  modalContent.appendChild(textArea);
+  textArea.style.height = '240px';
+  textArea.placeholder = 'text-to-speech: write any message & have the artifical intelligence speak it!';
+  article.appendChild(textArea);
 
   const playButton = document.createElement('button');
   playButton.textContent = 'Play Text';
@@ -560,9 +559,9 @@ async function openTTSModal() {
       const title = await generateTitleForTTS(currentText);
 
       // Remove existing download button if present
-      const existingDownloadButton = modalContent.querySelector('button.download');
+      const existingDownloadButton = article.querySelector('button.download');
       if (existingDownloadButton) {
-        modalContent.removeChild(existingDownloadButton);
+        article.removeChild(existingDownloadButton);
       }
 
       const downloadButton = document.createElement('button');
@@ -574,7 +573,7 @@ async function openTTSModal() {
         a.download = `${title}.mp3`;
         a.click();
       };
-      modalContent.appendChild(downloadButton);
+      article.appendChild(downloadButton);
     }
 
     if (lastTTSResult) {
@@ -587,7 +586,7 @@ async function openTTSModal() {
       }
     }
   };
-  modalContent.appendChild(playButton);
+  article.appendChild(playButton);
 
   document.body.appendChild(modal);
 }