From f389df7c5112af4002b97384eda95799aafed19e Mon Sep 17 00:00:00 2001
From: pluja <github_pluja@r3d.red>
Date: Fri, 27 Oct 2023 16:21:43 +0200
Subject: [PATCH] fixes and improvements to env variables usage

---
 frontend/src/lib/components/ModalTranscriptionForm.svelte | 7 ++++---
 frontend/src/lib/components/ModalTranslationForm.svelte   | 5 +++--
 frontend/src/lib/utils.js                                 | 5 +----
 frontend/src/routes/+layout.js                            | 5 ++---
 frontend/src/routes/editor/[id]/+page.js                  | 5 ++---
 5 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/frontend/src/lib/components/ModalTranscriptionForm.svelte b/frontend/src/lib/components/ModalTranscriptionForm.svelte
index 656acc8..b567332 100644
--- a/frontend/src/lib/components/ModalTranscriptionForm.svelte
+++ b/frontend/src/lib/components/ModalTranscriptionForm.svelte
@@ -1,5 +1,6 @@
 <script>
-	import { validateURL, CLIENT_API_HOST, WHISHPER_GPU } from '$lib/utils.js';
+	import { validateURL, CLIENT_API_HOST } from '$lib/utils.js';
+	import { env } from '$env/dynamic/public';
 
 	import toast from 'svelte-french-toast';
 
@@ -9,7 +10,7 @@
 	let language = 'auto';
 	let sourceUrl = '';
 	let fileInput;
-	let device = (WHISHPER_GPU) ? 'cuda' : 'cpu';
+	let device = (env.PUBLIC_WHISHPER_GPU) ? 'cuda' : 'cpu';
 
 	let languages = [
 		'auto',
@@ -181,7 +182,7 @@
 					<span class="label-text">Device</span>
 				</label>
 				<select name="device" bind:value={device} class="select select-bordered">
-					{#if WHISHPER_GPU }
+					{#if env.PUBLIC_WHISHPER_GPU }
 						<option selected value="cuda">GPU</option>
 						<option value="cpu">CPU</option>
 					{:else}
diff --git a/frontend/src/lib/components/ModalTranslationForm.svelte b/frontend/src/lib/components/ModalTranslationForm.svelte
index e997d6b..a126e0c 100644
--- a/frontend/src/lib/components/ModalTranslationForm.svelte
+++ b/frontend/src/lib/components/ModalTranslationForm.svelte
@@ -1,7 +1,8 @@
 <script>
     import { onMount } from 'svelte';
     import toast from 'svelte-french-toast';
-    import { CLIENT_API_HOST, TRANSLATION_API_HOST } from '$lib/utils';
+    import { CLIENT_API_HOST } from '$lib/utils';
+	import { env } from '$env/dynamic/public';
     export let tr;
 
     let targetLanguage = null;
@@ -9,7 +10,7 @@
     let availableLanguages = [];
     const getAvailableLangs = () => {
         const fetchLanguages = () => {
-            fetch(`${TRANSLATION_API_HOST}/languages`)
+            fetch(`${env.PUBLIC_TRANSLATION_API_HOST}/languages`)
             .then(res => res.json())
             .then(data => {
                 if (data) {
diff --git a/frontend/src/lib/utils.js b/frontend/src/lib/utils.js
index c4f06eb..d80bce1 100644
--- a/frontend/src/lib/utils.js
+++ b/frontend/src/lib/utils.js
@@ -5,10 +5,7 @@ import { env } from '$env/dynamic/public';
 
 export let CLIENT_API_HOST = browser ? `${dev ? env.PUBLIC_API_HOST : ""}` : `${env.PUBLIC_INTERNAL_API_HOST}`;
 export let CLIENT_WS_HOST = browser ? `${dev ? env.PUBLIC_API_HOST.replace("http://", "").replace("https://", "") : ""}` :  `${dev ? env.PUBLIC_INTERNAL_API_HOST.replace("http://", "").replace("https://", "") : ""}`;
-export let TRANSLATION_API_HOST = browser ? `${dev ? env.PUBLIC_TRANSLATION_API_HOST : ""}` : `${dev ? env.PUBLIC_TRANSLATION_API_HOST : ""}`;
-export let WHISHPER_GPU = env.PUBLIC_WHISHPER_GPU === 'true' ||
-                          env.PUBLIC_WHISHPER_GPU === 'True' ||
-                          env.PUBLIC_WHISHPER_GPU === '1';
+
 // URL Validator
 export const validateURL = function (url) {
     try {
diff --git a/frontend/src/routes/+layout.js b/frontend/src/routes/+layout.js
index edd7745..1bb9169 100644
--- a/frontend/src/routes/+layout.js
+++ b/frontend/src/routes/+layout.js
@@ -1,12 +1,11 @@
 import { transcriptions } from '$lib/stores';
 import { browser, dev } from '$app/environment';
-import { CLIENT_API_HOST } from '$lib/utils';
+import { env } from '$env/dynamic/public';
 
 /** @type {import('./$types').PageLoad} */
 export async function load({ fetch }) {
     // Use different endpoints for server-side and client-side
-    const endpoint = browser ? `${CLIENT_API_HOST}/api/transcriptions` : `${process.env.INTERNAL_API_HOST}/api/transcriptions`;
-    console.log(endpoint);
+    const endpoint = browser ? `${env.PUBLIC_API_HOST}/api/transcriptions` : `${env.PUBLIC_INTERNAL_API_HOST}/api/transcriptions`;
 
     const response = await fetch(endpoint);
     const ts = await response.json();
diff --git a/frontend/src/routes/editor/[id]/+page.js b/frontend/src/routes/editor/[id]/+page.js
index 80c222b..d158d57 100644
--- a/frontend/src/routes/editor/[id]/+page.js
+++ b/frontend/src/routes/editor/[id]/+page.js
@@ -1,14 +1,13 @@
 /** @type {import('./$types').PageLoad} */
 import { currentTranscription } from '$lib/stores';
-import { CLIENT_API_HOST } from '$lib/utils';
 import { browser } from '$app/environment';
+import { env } from '$env/dynamic/public';
 
 export async function load({params}) {
     // Fetch json from /api/transcriptions/{id}
     let id = params.id;
     // Use different endpoints for server-side and client-side
-
-    const endpoint = browser ? `${CLIENT_API_HOST}/api/transcriptions` : `${process.env.INTERNAL_API_HOST}/api/transcriptions`;
+    const endpoint = browser ? `${env.PUBLIC_API_HOST}/api/transcriptions` : `${env.PUBLIC_INTERNAL_API_HOST}/api/transcriptions`;
     const response = await fetch(`${endpoint}/${id}`);
     const ts = await response.json();
     // Set currentTranscription to the fetched transcription