dnviti/cai-foligno-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update ai-meeting/meeting.html

Browse Source
This commit is contained in:
Daniele Viti
2025-11-12 00:09:59 +00:00
parent 197545d4d2
commit 3dea8ce7b3
1 changed files with 194 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
ai-meeting/meeting.html
View File

@@ -67,17 +67,25 @@
} }
input[type="text"], input[type="text"],
input[type="password"] { input[type="password"],
textarea {
width: 100%; width: 100%;
padding: 14px; padding: 14px;
border: 2px solid #e0e0e0; border: 2px solid #e0e0e0;
border-radius: 10px; border-radius: 10px;
font-size: 16px; font-size: 16px;
transition: all 0.3s; transition: all 0.3s;
font-family: inherit;
}
textarea {
resize: vertical;
min-height: 120px;
} }
input[type="text"]:focus, input[type="text"]:focus,
input[type="password"]:focus { input[type="password"]:focus,
textarea:focus {
outline: none; outline: none;
border-color: #667eea; border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
@@ -509,8 +517,10 @@
<body> <body>
<!-- Sezione Upload --> <!-- Sezione Upload -->
<div id="uploadSection" class="upload-container"> <div id="uploadSection" class="upload-container">
<h1>🎙️ Carica Audio</h1> <h1>🎙️ Carica Audio o Trascrizione</h1>
<div class="subtitle">Formati supportati: MP3, WAV, M4A, OGG</div> <div class="subtitle">
Audio: MP3, WAV, M4A, OGG | Trascrizione: TXT
</div>
<form id="uploadForm"> <form id="uploadForm">
<div class="form-group"> <div class="form-group">
@@ -543,7 +553,6 @@
id="fileInput" id="fileInput"
name="file" name="file"
accept="audio/*" accept="audio/*"
required
/> />
<label <label
for="fileInput" for="fileInput"
@@ -558,7 +567,41 @@
</div> </div>
</div> </div>
<button type="submit" id="submitBtn">Invia Audio</button> <div class="form-group">
<label>Oppure Trascrizione (file .txt)</label>
<div class="file-input-wrapper">
<input
type="file"
id="transcriptInput"
name="transcript"
accept=".txt,text/plain"
/>
<label
for="transcriptInput"
class="file-input-label"
id="transcriptLabel"
>
<div class="file-info" id="transcriptInfo">
<div class="upload-icon">📝</div>
<div>
Tocca per selezionare una trascrizione
</div>
</div>
</label>
</div>
</div>
<div class="form-group">
<label>Oppure Incolla Trascrizione</label>
<textarea
id="transcriptText"
name="transcriptText"
placeholder="Incolla qui la trascrizione del meeting..."
rows="8"
></textarea>
</div>
<button type="submit" id="submitBtn">Invia</button>
</form> </form>
<div class="loading" id="loading"> <div class="loading" id="loading">
@@ -636,6 +679,10 @@
const fileInput = document.getElementById("fileInput"); const fileInput = document.getElementById("fileInput");
const fileLabel = document.getElementById("fileLabel"); const fileLabel = document.getElementById("fileLabel");
const fileInfo = document.getElementById("fileInfo"); const fileInfo = document.getElementById("fileInfo");
const transcriptInput = document.getElementById("transcriptInput");
const transcriptLabel = document.getElementById("transcriptLabel");
const transcriptInfo = document.getElementById("transcriptInfo");
const transcriptText = document.getElementById("transcriptText");
const submitBtn = document.getElementById("submitBtn"); const submitBtn = document.getElementById("submitBtn");
const uploadMessage = document.getElementById("uploadMessage"); const uploadMessage = document.getElementById("uploadMessage");
const resultMessage = document.getElementById("resultMessage"); const resultMessage = document.getElementById("resultMessage");
@@ -650,15 +697,26 @@
const newUploadBtn = document.getElementById("newUploadBtn"); const newUploadBtn = document.getElementById("newUploadBtn");
let selectedFile = null; let selectedFile = null;
let selectedTranscript = null;
let receivedHtml = null; let receivedHtml = null;
let editorInstance = null; let editorInstance = null;
let isEditing = false; let isEditing = false;
let isEditingHtml = false; let isEditingHtml = false;
// Gestione selezione file // Gestione selezione file audio
fileInput.addEventListener("change", function () { fileInput.addEventListener("change", function () {
if (this.files && this.files[0]) { if (this.files && this.files[0]) {
selectedFile = this.files[0]; selectedFile = this.files[0];
selectedTranscript = null;
transcriptInput.value = "";
transcriptText.value = "";
transcriptLabel.classList.remove("has-file");
transcriptInfo.classList.remove("has-file");
transcriptInfo.innerHTML = `
<div class="upload-icon">📝</div>
<div>Tocca per selezionare una trascrizione</div>
`;
const fileName = selectedFile.name; const fileName = selectedFile.name;
const fileSize = (selectedFile.size / 1024 / 1024).toFixed( const fileSize = (selectedFile.size / 1024 / 1024).toFixed(
2, 2,
@@ -682,6 +740,57 @@
} }
}); });
// Gestione selezione trascrizione da file
transcriptInput.addEventListener("change", function () {
if (this.files && this.files[0]) {
selectedTranscript = this.files[0];
selectedFile = null;
fileInput.value = "";
transcriptText.value = "";
fileLabel.classList.remove("has-file");
fileInfo.classList.remove("has-file");
fileInfo.innerHTML = `
<div class="upload-icon">🎵</div>
<div>Tocca per selezionare un file audio</div>
`;
const fileName = selectedTranscript.name;
const fileSize = (selectedTranscript.size / 1024).toFixed(
2,
);
transcriptLabel.classList.add("has-file");
transcriptInfo.classList.add("has-file");
transcriptInfo.innerHTML = `
<div class="upload-icon">✅</div>
<div><strong>${fileName}</strong></div>
<div style="font-size: 12px; margin-top: 5px;">${fileSize} KB</div>
`;
}
});
// Gestione textarea trascrizione
transcriptText.addEventListener("input", function () {
if (this.value.trim().length > 0) {
selectedFile = null;
selectedTranscript = null;
fileInput.value = "";
transcriptInput.value = "";
fileLabel.classList.remove("has-file");
fileInfo.classList.remove("has-file");
transcriptLabel.classList.remove("has-file");
transcriptInfo.classList.remove("has-file");
fileInfo.innerHTML = `
<div class="upload-icon">🎵</div>
<div>Tocca per selezionare un file audio</div>
`;
transcriptInfo.innerHTML = `
<div class="upload-icon">📝</div>
<div>Tocca per selezionare una trascrizione</div>
`;
}
});
// Funzione per convertire OGG in MP3 // Funzione per convertire OGG in MP3
async function convertToMP3(audioFile) { async function convertToMP3(audioFile) {
return new Promise(async (resolve, reject) => { return new Promise(async (resolve, reject) => {
@@ -747,9 +856,13 @@
const username = document.getElementById("username").value; const username = document.getElementById("username").value;
const password = document.getElementById("password").value; const password = document.getElementById("password").value;
const pastedTranscript = transcriptText.value.trim();
if (!selectedFile) { if (!selectedFile && !selectedTranscript && !pastedTranscript) {
showUploadMessage("Seleziona un file audio", "error"); showUploadMessage(
"Seleziona un file audio, carica una trascrizione o incolla il testo",
"error",
);
return; return;
} }
@@ -758,59 +871,84 @@
uploadMessage.classList.remove("show"); uploadMessage.classList.remove("show");
try { try {
let fileToUpload = selectedFile; const credentials = btoa(`${username}:${password}`);
const fileExt = selectedFile.name let requestBody;
.split(".") let requestHeaders = {
.pop() Authorization: `Basic ${credentials}`,
.toLowerCase(); };
if (fileExt === "ogg" || fileExt === "opus") { // Se è stato incollato del testo nella textarea o caricato un file di trascrizione
loadingText.textContent = "Conversione in MP3..."; if (pastedTranscript || selectedTranscript) {
fileLabel.classList.add("converting"); loadingText.textContent =
fileInfo.classList.add("converting"); "Elaborazione trascrizione...";
try { // Ottieni il testo (da textarea o da file)
fileToUpload = await convertToMP3(selectedFile); let transcriptTextContent;
showUploadMessage( if (pastedTranscript) {
"✓ File convertito in MP3", transcriptTextContent = pastedTranscript;
"success", } else {
); transcriptTextContent =
await selectedTranscript.text();
const newSize = (
fileToUpload.size /
1024 /
1024
).toFixed(2);
fileInfo.innerHTML = `
<div class="upload-icon">🔄</div>
<div><strong>${fileToUpload.name}</strong></div>
<div style="font-size: 12px; margin-top: 5px;">${newSize} MB (convertito)</div>
`;
await new Promise((resolve) =>
setTimeout(resolve, 1000),
);
} catch (convError) {
console.error("Conversion error:", convError);
showUploadMessage(
"⚠️ Impossibile convertire. Invio file originale...",
"warning",
);
await new Promise((resolve) =>
setTimeout(resolve, 1500),
);
} }
fileLabel.classList.remove("converting"); // Invia come body text/plain
fileInfo.classList.remove("converting"); requestBody = transcriptTextContent;
requestHeaders["Content-Type"] = "text/plain";
} }
// Altrimenti gestisci il file audio con FormData
else {
let fileToUpload = selectedFile;
const fileExt = selectedFile.name
.split(".")
.pop()
.toLowerCase();
loadingText.textContent = "Elaborazione in corso..."; if (fileExt === "ogg" || fileExt === "opus") {
loadingText.textContent = "Conversione in MP3...";
fileLabel.classList.add("converting");
fileInfo.classList.add("converting");
const formData = new FormData(); try {
formData.append("file", fileToUpload); fileToUpload = await convertToMP3(selectedFile);
showUploadMessage(
"✓ File convertito in MP3",
"success",
);
const credentials = btoa(`${username}:${password}`); const newSize = (
fileToUpload.size /
1024 /
1024
).toFixed(2);
fileInfo.innerHTML = `
<div class="upload-icon">🔄</div>
<div><strong>${fileToUpload.name}</strong></div>
<div style="font-size: 12px; margin-top: 5px;">${newSize} MB (convertito)</div>
`;
await new Promise((resolve) =>
setTimeout(resolve, 1000),
);
} catch (convError) {
console.error("Conversion error:", convError);
showUploadMessage(
"⚠️ Impossibile convertire. Invio file originale...",
"warning",
);
await new Promise((resolve) =>
setTimeout(resolve, 1500),
);
}
fileLabel.classList.remove("converting");
fileInfo.classList.remove("converting");
}
loadingText.textContent = "Elaborazione audio...";
const formData = new FormData();
formData.append("file", fileToUpload);
requestBody = formData;
}
// Create fetch with timeout for Firefox // Create fetch with timeout for Firefox
const controller = new AbortController(); const controller = new AbortController();
@@ -823,10 +961,8 @@
"https://n8n-prod.commandware.com/webhook/ai_meeting_parse", "https://n8n-prod.commandware.com/webhook/ai_meeting_parse",
{ {
method: "POST", method: "POST",
headers: { headers: requestHeaders,
Authorization: `Basic ${credentials}`, body: requestBody,
},
body: formData,
signal: controller.signal, signal: controller.signal,
}, },
); );