feat: upload audio and image

This commit is contained in:
Mario Gil 2024-08-22 22:50:27 -05:00
parent e7113e3537
commit 8b2f69103e
6 changed files with 185 additions and 120 deletions

141
apis.py
View File

@ -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)

66
templates/EvalVoice.html Normal file
View File

@ -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>

49
templates/addaudio.html Normal file
View File

@ -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>

49
templates/addimage.html Normal file
View File

@ -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>