Spaces:

dmartincy
/

document-translation

Sleeping

App Files Files Community

dmartincy commited on Jan 12

Commit

d4f99c0

1 Parent(s): 403c243

Some polishing

Browse files

Files changed (3) hide show

document-authoring.js +22 -9
index.html +24 -27
nginx.conf +9 -5

document-authoring.js CHANGED Viewed

@@ -2,7 +2,17 @@
 const app = document.getElementById('app');
 app.innerHTML = `
   <div style="max-width: 1024px; margin: 0 auto; padding: 20px;">
-    <button id="translateButton" style="margin-bottom: 10px;" disabled class="button-disabled">Translate to Spanish</button>
     <div id="editor" style="border: 1px solid black; height: 600px; position: relative"></div>
   </div>
 `;
@@ -23,8 +33,8 @@ script.onload = async () => {
     }
   );
-  // Translation function.
-  async function translate(content, lang = "Spanish") {
     try {
       const response = await fetch('/client/api/v1/chat/completions', {
         method: 'POST',
@@ -59,33 +69,36 @@ script.onload = async () => {
     }
   }
-  // Function to recursively translate text in the JSON structure.
-  async function translateRecursive(obj) {
     for (let key in obj) {
       if (typeof obj[key] === "string" && key === "text" && obj[key].length > 0) {
-        obj[key] = await translate(obj[key]);
       } else if (typeof obj[key] === "object") {
-	 await translateRecursive(obj[key]);
       }
     }
   }
   // Add translation button handler
   const translateButton = document.getElementById('translateButton');
   translateButton.addEventListener('click', async () => {
     try {
       translateButton.disabled = true;
       translateButton.innerHTML = '<span class="spinner"></span> Translating...';
       const jsonDoc = await editor.currentDocument().saveDocument();
-      await translateRecursive(jsonDoc.container.document);
       const translatedDoc = await docAuthSystem.loadDocument(jsonDoc);
       editor.setCurrentDocument(translatedDoc);
     } catch (error) {
       alert('Translation failed: ' + error.message);
     } finally {
       translateButton.disabled = false;
-      translateButton.innerHTML = 'Translate to Spanish';
     }
   });
 };

 const app = document.getElementById('app');
 app.innerHTML = `
   <div style="max-width: 1024px; margin: 0 auto; padding: 20px;">
+    <div id="statusIndicator">
+      <span class="spinner"></span> Services starting...
+    </div>
+    <div id="translationControls">
+      <select id="languageSelect">
+        <option value="Spanish">Spanish</option>
+        <option value="French">French</option>
+        <option value="German">German</option>
+      </select>
+      <button id="translateButton">Translate Document</button>
+    </div>
     <div id="editor" style="border: 1px solid black; height: 600px; position: relative"></div>
   </div>
 `;
     }
   );
+  // Translation function with language parameter
+  async function translate(content, lang) {
     try {
       const response = await fetch('/client/api/v1/chat/completions', {
         method: 'POST',
     }
   }
+  // Function to recursively translate text in the JSON structure
+  async function translateRecursive(obj, lang) {
     for (let key in obj) {
       if (typeof obj[key] === "string" && key === "text" && obj[key].length > 0) {
+        obj[key] = await translate(obj[key], lang);
       } else if (typeof obj[key] === "object") {
+        await translateRecursive(obj[key], lang);
       }
     }
   }
   // Add translation button handler
   const translateButton = document.getElementById('translateButton');
+  const languageSelect = document.getElementById('languageSelect');
   translateButton.addEventListener('click', async () => {
     try {
+      const selectedLanguage = languageSelect.value;
       translateButton.disabled = true;
       translateButton.innerHTML = '<span class="spinner"></span> Translating...';
       const jsonDoc = await editor.currentDocument().saveDocument();
+      await translateRecursive(jsonDoc.container.document, selectedLanguage);
       const translatedDoc = await docAuthSystem.loadDocument(jsonDoc);
       editor.setCurrentDocument(translatedDoc);
     } catch (error) {
       alert('Translation failed: ' + error.message);
     } finally {
       translateButton.disabled = false;
+      translateButton.innerHTML = 'Translate Document';
     }
   });
 };

index.html CHANGED Viewed

@@ -23,62 +23,59 @@
         100% { transform: rotate(360deg); }
       }
-      #translateButton:disabled {
-        cursor: not-allowed;
-        opacity: 0.7;
       }
-      /* Add styles for disabled state */
-      .button-disabled {
-        cursor: not-allowed;
-        opacity: 0.5;
-        pointer-events: none;
       }
-      /* Add a status indicator */
       #statusIndicator {
-        position: fixed;
-        bottom: 10px;
-        right: 10px;
-        padding: 8px;
-        border-radius: 4px;
         background: #f0f0f0;
-        font-size: 14px;
       }
     </style>
   </head>
   <body>
     <div id="app"></div>
-    <div id="statusIndicator">Services starting...</div>
     <script>
       // Add this before loading the main script
       window.servicesReady = false;
       // Create a function to check service status
       function checkServicesStatus() {
-        fetch('/client/api/v1/healthcheck')
           .then(response => {
             if (response.ok) {
               window.servicesReady = true;
-              const translateButton = document.getElementById('translateButton');
               const statusIndicator = document.getElementById('statusIndicator');
-              if (translateButton) {
-                translateButton.classList.remove('button-disabled');
-                translateButton.disabled = false;
               }
               if (statusIndicator) {
-                statusIndicator.style.background = '#e6ffe6';
-                statusIndicator.textContent = 'Services ready';
-                // Optionally hide after a delay:
-                setTimeout(() => {
-                  statusIndicator.style.display = 'none';
-                }, 3000);
               }
               return true;
             }
             throw new Error('Services not ready');
           })
           .catch(error => {
             console.log('Waiting for services...', error);
             return false;
           });

         100% { transform: rotate(360deg); }
       }
+      #translationControls {
+        display: none;
+        margin-bottom: 10px;
       }
+      #languageSelect {
+        margin-right: 10px;
+        padding: 5px;
+      }
+      #translateButton {
+        padding: 5px 10px;
       }
       #statusIndicator {
+        text-align: center;
+        padding: 20px;
         background: #f0f0f0;
+        margin-bottom: 20px;
+        border-radius: 4px;
+        font-size: 16px;
       }
     </style>
   </head>
   <body>
     <div id="app"></div>
     <script>
       // Add this before loading the main script
       window.servicesReady = false;
       // Create a function to check service status
       function checkServicesStatus() {
+        fetch('/healthcheck')
           .then(response => {
             if (response.ok) {
               window.servicesReady = true;
+              const translationControls = document.getElementById('translationControls');
               const statusIndicator = document.getElementById('statusIndicator');
+              if (translationControls) {
+                translationControls.style.display = 'block';
               }
               if (statusIndicator) {
+                statusIndicator.style.display = 'none';
               }
               return true;
             }
             throw new Error('Services not ready');
           })
           .catch(error => {
+            const statusIndicator = document.getElementById('statusIndicator');
+            if (statusIndicator) {
+              statusIndicator.innerHTML = '<span class="spinner"></span> Services starting...';
+            }
             console.log('Waiting for services...', error);
             return false;
           });

nginx.conf CHANGED Viewed

@@ -5,22 +5,26 @@ events {
 http {
     server {
         listen 7860;
-	listen 7861;
-	location / {
             root /docauth;
-	}
         location /client/api/v1/ {
              proxy_pass http://127.0.0.1:4000;
         }
         location /v1/embeddings {
-            proxy_pass http://127.0.0.1:8081;
         }
         location /v1 {
-            proxy_pass http://127.0.0.1:8082;
         }
     }
 }

 http {
     server {
         listen 7860;
+        listen 7861;
+        location / {
             root /docauth;
+        }
+        location /healthcheck {
+            proxy_pass http://127.0.0.1:4000/healthcheck;
+        }
         location /client/api/v1/ {
              proxy_pass http://127.0.0.1:4000;
         }
         location /v1/embeddings {
+            proxy_pass http://127.0.0.1:8081;
         }
         location /v1 {
+            proxy_pass http://127.0.0.1:8082;
         }
     }
 }