diff --git a/apis.py b/apis.py
index d35ca0a..3c09dea 100644
--- a/apis.py
+++ b/apis.py
@@ -30,10 +30,12 @@ def extractConfig(nameModel="SystemData",relPath=os.path.join(pwd,"conf/experime
     Output= config[dataOut]
     return Output
 mode_list=extractConfig(nameModel="SystemData",dataOut="mode_list")
-
+from fastapi.templating import Jinja2Templates
+from fastapi.staticfiles import StaticFiles
 
 app = FastAPI()
 #app.mount("/statics", StaticFiles(directory="statics"), name="statics")
+templates = Jinja2Templates(directory="templates")
 app.add_middleware(
     CORSMiddleware,
     allow_origins=["*"],
@@ -84,7 +86,13 @@ class Response5(BaseModel):
     prompt: str = Query("", description="Style and sentiments of text")
     mode : str = Query("", description="Style and sentiments of text")
 
+menuaudtext="""<option value="whisper">whisper</option>
+        <option value="vosk">vosk</option>"""
 
+menuLLM="""        <option value="meta-llama/Meta-Llama-3.1-70B-Instruct">meta-llama/Meta-Llama-3.1-70B-Instruct</option>
+        <option value="meta-llama/Meta-Llama-3.1-8B-Instruct">meta-llama/Meta-Llama-3.1-8B-Instruct</option>
+        <option value="Mistral">Mistral</option>
+"""
 #Funcionales
 
 @app.post("/uploadimg")
@@ -146,114 +154,12 @@ def upload_audio(audio: UploadFile = File(...)):
         audio.file.close()
 
 @app.get("/addaudiohtml")
-def addaudiohtml():
-    html="""<!DOCTYPE html>
-<html>
-<head>
-  <title>Audio Upload</title>
-</head>
-<body>
-  <h1>Upload Audio File</h1>
-  <form id="audio-upload-form" enctype="multipart/form-data">
-    <input type="file" name="audio" id="audio-file" accept="audio/*" required>
-    <br>
-    <button type="submit">Upload</button>
-  </form>
-
-  <script>
-    const form = document.getElementById('audio-upload-form');
-    form.addEventListener('submit', async (event) => {
-      event.preventDefault();
-      
-      const fileInput = document.getElementById('audio-file');
-      const audioFile = fileInput.files[0];
-      
-      if (!audioFile) {
-        alert('Please select an audio file to upload.');
-        return;
-      }
-
-      const formData = new FormData();
-      formData.append('audio', audioFile);
-
-      try {
-        const response = await fetch('uploadaud', {
-          method: 'POST',
-          body: formData
-        });
-
-        if (response.ok) {
-          const result = await response.json();
-          alert(`File uploaded successfully: ${result.filename}`);
-        } else {
-          const error = await response.json();
-          alert(`Error uploading file: ${error.message}`);
-        }
-      } catch (error) {
-        alert(`Error uploading file: ${error.message}`);
-      }
-    });
-  </script>
-</body>
-</html>
-
-    """
-    return HTMLResponse(content=html, status_code=200)
-
+def addaudiohtml(request: Request):
+    return templates.TemplateResponse("addaudio.html", {"request": request})
+    
 @app.get("/addimagehtml")
-def addimagehtml():
-    html="""<!DOCTYPE html>
-<html>
-<head>
-  <title>image Upload</title>
-</head>
-<body>
-  <h1>Upload image File</h1>
-  <form id="image-upload-form" enctype="multipart/form-data">
-    <input type="file" name="image" id="image-file" accept="image/*" required>
-    <button type="submit">Upload</button>
-  </form>
-
-  <script>
-    const form = document.getElementById('image-upload-form');
-    form.addEventListener('submit', async (event) => {
-      event.preventDefault();
-
-      const fileInput = document.getElementById('image-file');
-      const imageFile = fileInput.files[0];
-
-      if (!imageFile) {
-        alert('Please select an image file to upload.');
-        return;
-      }
-
-      const formData = new FormData();
-      formData.append('image', imageFile);
-      
-
-      try {
-        const response = await fetch('uploadimg', {
-          method: 'POST',
-          body: formData
-        });
-
-        if (response.ok) {
-          const result = await response.json();
-          alert(`File uploaded successfully: ${result.filename}`);
-        } else {
-          const error = await response.json();
-          alert(`Error uploading file: ${error.message}`);
-        }
-      } catch (error) {
-        alert(`Error uploading file: ${error.message}`);
-      }
-    });
-  </script>
-</body>
-</html>
-
-    """
-    return HTMLResponse(content=html, status_code=200)
+def addimagehtml(request: Request):
+    return templates.TemplateResponse("addimage.html", {"request": request})
 
 
 
@@ -403,7 +309,7 @@ def EvalVoicehtml():
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Evaluacion de modelos voice2txt</title>
+    <title>Evaluación de modelos voice2txt</title>
     <style>
         body {
             font-family: Arial, sans-serif;
@@ -430,8 +336,7 @@ def EvalVoicehtml():
     
     <br>
     <select id="texto2">
-        <option value="whisper">whisper</option>
-        <option value="vosk">vosk</option>
+        %s
     </select>
     <br>
     <button onclick="enviarPeticion()">Enviar petición</button>
@@ -464,7 +369,7 @@ def EvalVoicehtml():
     </script>
 </body>
 </html>
-    """%(Sal)
+    """%(Sal,menuaudtext)
     return HTMLResponse(content=html, status_code=200)
 
 
@@ -549,9 +454,7 @@ def EvalLLMComprahtml():
     
     <br>
     <select id="texto2">
-        <option value="meta-llama/Meta-Llama-3.1-70B-Instruct">meta-llama/Meta-Llama-3.1-70B-Instruct</option>
-        <option value="meta-llama/Meta-Llama-3.1-8B-Instruct">meta-llama/Meta-Llama-3.1-8B-Instruct</option>
-        <option value="Mistral">Mistral</option>
+        %s
     </select>
         <br>
     <select id="texto3">
@@ -594,7 +497,7 @@ def EvalLLMComprahtml():
     </script>
 </body>
 </html>
-    """%(Sal,Sal2)
+    """%(Sal,menuLLM,Sal2)
     return HTMLResponse(content=html, status_code=200)
 
 #
@@ -679,9 +582,7 @@ def EvalLLMGeneracionTextohtml():
     
     <br>
     <select id="texto2">
-        <option value="meta-llama/Meta-Llama-3.1-70B-Instruct">meta-llama/Meta-Llama-3.1-70B-Instruct</option>
-        <option value="meta-llama/Meta-Llama-3.1-8B-Instruct">meta-llama/Meta-Llama-3.1-8B-Instruct</option>
-        <option value="Mistral">Mistral</option>
+        %s
     </select>
         <br>
     <select id="texto3">
@@ -724,7 +625,7 @@ def EvalLLMGeneracionTextohtml():
     </script>
 </body>
 </html>
-    """%(Sal,Sal2)
+    """%(Sal,menuLLM,Sal2)
     return HTMLResponse(content=html, status_code=200)
 
 
diff --git a/templates/EvalVoice.html b/templates/EvalVoice.html
new file mode 100644
index 0000000..a47e50f
--- /dev/null
+++ b/templates/EvalVoice.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{title}}</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 20px;
+        }
+        input, button {
+            margin: 10px 0;
+            padding: 5px;
+        }
+        #respuesta {
+            margin-top: 20px;
+            padding: 10px;
+            border: 1px solid #ccc;
+            background-color: #f9f9f9;
+        }
+    </style>
+</head>
+<body>
+    <h1>{{title}}</h1>
+
+    <select id="texto1">
+        {{Sal}}
+    </select>
+    
+    <br>
+    <select id="texto2">
+        <option value="whisper">whisper</option>
+        <option value="vosk">vosk</option>
+    </select>
+    <br>
+    <button onclick="enviarPeticion()">Enviar petición</button>
+    <div id="respuesta"></div>
+
+    <script>
+        function enviarPeticion() {
+            const texto1 = document.getElementById('texto1').value;
+            const texto2 = document.getElementById('texto2').value;
+            const datos = {
+                path: texto1,
+                model: texto2
+            };
+
+            fetch('/EvalVoice', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(datos)
+            })
+            .then(response => response.json())
+            .then(data => {
+                document.getElementById('respuesta').innerHTML = JSON.stringify(data, null, 2);
+            })
+            .catch(error => {
+                document.getElementById('respuesta').innerHTML = 'Error: ' + error;
+            });
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/addaudio.html b/templates/addaudio.html
new file mode 100644
index 0000000..e992f8c
--- /dev/null
+++ b/templates/addaudio.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Audio Upload</title>
+</head>
+<body>
+  <h1>Upload Audio File</h1>
+  <form id="audio-upload-form" enctype="multipart/form-data">
+    <input type="file" name="audio" id="audio-file" accept="audio/*" required>
+    <br>
+    <button type="submit">Upload</button>
+  </form>
+
+  <script>
+    const form = document.getElementById('audio-upload-form');
+    form.addEventListener('submit', async (event) => {
+      event.preventDefault();
+      
+      const fileInput = document.getElementById('audio-file');
+      const audioFile = fileInput.files[0];
+      
+      if (!audioFile) {
+        alert('Please select an audio file to upload.');
+        return;
+      }
+
+      const formData = new FormData();
+      formData.append('audio', audioFile);
+
+      try {
+        const response = await fetch('uploadaud', {
+          method: 'POST',
+          body: formData
+        });
+
+        if (response.ok) {
+          const result = await response.json();
+          alert(`File uploaded successfully: ${result.filename}`);
+        } else {
+          const error = await response.json();
+          alert(`Error uploading file: ${error.message}`);
+        }
+      } catch (error) {
+        alert(`Error uploading file: ${error.message}`);
+      }
+    });
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/addimage.html b/templates/addimage.html
new file mode 100644
index 0000000..1bd1f00
--- /dev/null
+++ b/templates/addimage.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>image Upload</title>
+</head>
+<body>
+  <h1>Upload image File</h1>
+  <form id="image-upload-form" enctype="multipart/form-data">
+    <input type="file" name="image" id="image-file" accept="image/*" required>
+    <button type="submit">Upload</button>
+  </form>
+
+  <script>
+    const form = document.getElementById('image-upload-form');
+    form.addEventListener('submit', async (event) => {
+      event.preventDefault();
+
+      const fileInput = document.getElementById('image-file');
+      const imageFile = fileInput.files[0];
+
+      if (!imageFile) {
+        alert('Please select an image file to upload.');
+        return;
+      }
+
+      const formData = new FormData();
+      formData.append('image', imageFile);
+      
+
+      try {
+        const response = await fetch('uploadimg', {
+          method: 'POST',
+          body: formData
+        });
+
+        if (response.ok) {
+          const result = await response.json();
+          alert(`File uploaded successfully: ${result.filename}`);
+        } else {
+          const error = await response.json();
+          alert(`Error uploading file: ${error.message}`);
+        }
+      } catch (error) {
+        alert(`Error uploading file: ${error.message}`);
+      }
+    });
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/html/getmetricsvoice.html b/templates/getmetricsvoice.html
similarity index 100%
rename from html/getmetricsvoice.html
rename to templates/getmetricsvoice.html
diff --git a/html/index.html b/templates/index.html
similarity index 100%
rename from html/index.html
rename to templates/index.html
