feat: upload audio and image
This commit is contained in:
		
							parent
							
								
									e7113e3537
								
							
						
					
					
						commit
						8b2f69103e
					
				
							
								
								
									
										139
									
								
								apis.py
								
								
								
								
							
							
						
						
									
										139
									
								
								apis.py
								
								
								
								
							|  | @ -30,10 +30,12 @@ def extractConfig(nameModel="SystemData",relPath=os.path.join(pwd,"conf/experime | ||||||
|     Output= config[dataOut] |     Output= config[dataOut] | ||||||
|     return Output |     return Output | ||||||
| mode_list=extractConfig(nameModel="SystemData",dataOut="mode_list") | mode_list=extractConfig(nameModel="SystemData",dataOut="mode_list") | ||||||
| 
 | from fastapi.templating import Jinja2Templates | ||||||
|  | from fastapi.staticfiles import StaticFiles | ||||||
| 
 | 
 | ||||||
| app = FastAPI() | app = FastAPI() | ||||||
| #app.mount("/statics", StaticFiles(directory="statics"), name="statics") | #app.mount("/statics", StaticFiles(directory="statics"), name="statics") | ||||||
|  | templates = Jinja2Templates(directory="templates") | ||||||
| app.add_middleware( | app.add_middleware( | ||||||
|     CORSMiddleware, |     CORSMiddleware, | ||||||
|     allow_origins=["*"], |     allow_origins=["*"], | ||||||
|  | @ -84,7 +86,13 @@ class Response5(BaseModel): | ||||||
|     prompt: str = Query("", description="Style and sentiments of text") |     prompt: str = Query("", description="Style and sentiments of text") | ||||||
|     mode : 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 | #Funcionales | ||||||
| 
 | 
 | ||||||
| @app.post("/uploadimg") | @app.post("/uploadimg") | ||||||
|  | @ -146,114 +154,12 @@ def upload_audio(audio: UploadFile = File(...)): | ||||||
|         audio.file.close() |         audio.file.close() | ||||||
| 
 | 
 | ||||||
| @app.get("/addaudiohtml") | @app.get("/addaudiohtml") | ||||||
| def addaudiohtml(): | def addaudiohtml(request: Request): | ||||||
|     html="""<!DOCTYPE html> |     return templates.TemplateResponse("addaudio.html", {"request": request}) | ||||||
| <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) |  | ||||||
|      |      | ||||||
| @app.get("/addimagehtml") | @app.get("/addimagehtml") | ||||||
| def addimagehtml(): | def addimagehtml(request: Request): | ||||||
|     html="""<!DOCTYPE html> |     return templates.TemplateResponse("addimage.html", {"request": request}) | ||||||
| <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) |  | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
|  | @ -403,7 +309,7 @@ def EvalVoicehtml(): | ||||||
| <head> | <head> | ||||||
|     <meta charset="UTF-8"> |     <meta charset="UTF-8"> | ||||||
|     <meta name="viewport" content="width=device-width, initial-scale=1.0"> |     <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> |     <style> | ||||||
|         body { |         body { | ||||||
|             font-family: Arial, sans-serif; |             font-family: Arial, sans-serif; | ||||||
|  | @ -430,8 +336,7 @@ def EvalVoicehtml(): | ||||||
|      |      | ||||||
|     <br> |     <br> | ||||||
|     <select id="texto2"> |     <select id="texto2"> | ||||||
|         <option value="whisper">whisper</option> |         %s | ||||||
|         <option value="vosk">vosk</option> |  | ||||||
|     </select> |     </select> | ||||||
|     <br> |     <br> | ||||||
|     <button onclick="enviarPeticion()">Enviar petición</button> |     <button onclick="enviarPeticion()">Enviar petición</button> | ||||||
|  | @ -464,7 +369,7 @@ def EvalVoicehtml(): | ||||||
|     </script> |     </script> | ||||||
| </body> | </body> | ||||||
| </html> | </html> | ||||||
|     """%(Sal) |     """%(Sal,menuaudtext) | ||||||
|     return HTMLResponse(content=html, status_code=200) |     return HTMLResponse(content=html, status_code=200) | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
|  | @ -549,9 +454,7 @@ def EvalLLMComprahtml(): | ||||||
|      |      | ||||||
|     <br> |     <br> | ||||||
|     <select id="texto2"> |     <select id="texto2"> | ||||||
|         <option value="meta-llama/Meta-Llama-3.1-70B-Instruct">meta-llama/Meta-Llama-3.1-70B-Instruct</option> |         %s | ||||||
|         <option value="meta-llama/Meta-Llama-3.1-8B-Instruct">meta-llama/Meta-Llama-3.1-8B-Instruct</option> |  | ||||||
|         <option value="Mistral">Mistral</option> |  | ||||||
|     </select> |     </select> | ||||||
|         <br> |         <br> | ||||||
|     <select id="texto3"> |     <select id="texto3"> | ||||||
|  | @ -594,7 +497,7 @@ def EvalLLMComprahtml(): | ||||||
|     </script> |     </script> | ||||||
| </body> | </body> | ||||||
| </html> | </html> | ||||||
|     """%(Sal,Sal2) |     """%(Sal,menuLLM,Sal2) | ||||||
|     return HTMLResponse(content=html, status_code=200) |     return HTMLResponse(content=html, status_code=200) | ||||||
| 
 | 
 | ||||||
| # | # | ||||||
|  | @ -679,9 +582,7 @@ def EvalLLMGeneracionTextohtml(): | ||||||
|      |      | ||||||
|     <br> |     <br> | ||||||
|     <select id="texto2"> |     <select id="texto2"> | ||||||
|         <option value="meta-llama/Meta-Llama-3.1-70B-Instruct">meta-llama/Meta-Llama-3.1-70B-Instruct</option> |         %s | ||||||
|         <option value="meta-llama/Meta-Llama-3.1-8B-Instruct">meta-llama/Meta-Llama-3.1-8B-Instruct</option> |  | ||||||
|         <option value="Mistral">Mistral</option> |  | ||||||
|     </select> |     </select> | ||||||
|         <br> |         <br> | ||||||
|     <select id="texto3"> |     <select id="texto3"> | ||||||
|  | @ -724,7 +625,7 @@ def EvalLLMGeneracionTextohtml(): | ||||||
|     </script> |     </script> | ||||||
| </body> | </body> | ||||||
| </html> | </html> | ||||||
|     """%(Sal,Sal2) |     """%(Sal,menuLLM,Sal2) | ||||||
|     return HTMLResponse(content=html, status_code=200) |     return HTMLResponse(content=html, status_code=200) | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
|  | @ -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> | ||||||
|  | @ -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> | ||||||
|  | @ -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> | ||||||
		Loading…
	
		Reference in New Issue