Update ai-meeting/meeting.html
This commit is contained in:
@@ -67,17 +67,25 @@
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"] {
|
||||
input[type="password"],
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 10px;
|
||||
font-size: 16px;
|
||||
transition: all 0.3s;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
input[type="text"]:focus,
|
||||
input[type="password"]:focus {
|
||||
input[type="password"]:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
@@ -509,8 +517,10 @@
|
||||
<body>
|
||||
<!-- Sezione Upload -->
|
||||
<div id="uploadSection" class="upload-container">
|
||||
<h1>🎙️ Carica Audio</h1>
|
||||
<div class="subtitle">Formati supportati: MP3, WAV, M4A, OGG</div>
|
||||
<h1>🎙️ Carica Audio o Trascrizione</h1>
|
||||
<div class="subtitle">
|
||||
Audio: MP3, WAV, M4A, OGG | Trascrizione: TXT
|
||||
</div>
|
||||
|
||||
<form id="uploadForm">
|
||||
<div class="form-group">
|
||||
@@ -543,7 +553,6 @@
|
||||
id="fileInput"
|
||||
name="file"
|
||||
accept="audio/*"
|
||||
required
|
||||
/>
|
||||
<label
|
||||
for="fileInput"
|
||||
@@ -558,7 +567,41 @@
|
||||
</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>
|
||||
|
||||
<div class="loading" id="loading">
|
||||
@@ -636,6 +679,10 @@
|
||||
const fileInput = document.getElementById("fileInput");
|
||||
const fileLabel = document.getElementById("fileLabel");
|
||||
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 uploadMessage = document.getElementById("uploadMessage");
|
||||
const resultMessage = document.getElementById("resultMessage");
|
||||
@@ -650,15 +697,26 @@
|
||||
const newUploadBtn = document.getElementById("newUploadBtn");
|
||||
|
||||
let selectedFile = null;
|
||||
let selectedTranscript = null;
|
||||
let receivedHtml = null;
|
||||
let editorInstance = null;
|
||||
let isEditing = false;
|
||||
let isEditingHtml = false;
|
||||
|
||||
// Gestione selezione file
|
||||
// Gestione selezione file audio
|
||||
fileInput.addEventListener("change", function () {
|
||||
if (this.files && 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 fileSize = (selectedFile.size / 1024 / 1024).toFixed(
|
||||
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
|
||||
async function convertToMP3(audioFile) {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
@@ -747,9 +856,13 @@
|
||||
|
||||
const username = document.getElementById("username").value;
|
||||
const password = document.getElementById("password").value;
|
||||
const pastedTranscript = transcriptText.value.trim();
|
||||
|
||||
if (!selectedFile) {
|
||||
showUploadMessage("Seleziona un file audio", "error");
|
||||
if (!selectedFile && !selectedTranscript && !pastedTranscript) {
|
||||
showUploadMessage(
|
||||
"Seleziona un file audio, carica una trascrizione o incolla il testo",
|
||||
"error",
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -758,59 +871,84 @@
|
||||
uploadMessage.classList.remove("show");
|
||||
|
||||
try {
|
||||
let fileToUpload = selectedFile;
|
||||
const fileExt = selectedFile.name
|
||||
.split(".")
|
||||
.pop()
|
||||
.toLowerCase();
|
||||
const credentials = btoa(`${username}:${password}`);
|
||||
let requestBody;
|
||||
let requestHeaders = {
|
||||
Authorization: `Basic ${credentials}`,
|
||||
};
|
||||
|
||||
if (fileExt === "ogg" || fileExt === "opus") {
|
||||
loadingText.textContent = "Conversione in MP3...";
|
||||
fileLabel.classList.add("converting");
|
||||
fileInfo.classList.add("converting");
|
||||
// Se è stato incollato del testo nella textarea o caricato un file di trascrizione
|
||||
if (pastedTranscript || selectedTranscript) {
|
||||
loadingText.textContent =
|
||||
"Elaborazione trascrizione...";
|
||||
|
||||
try {
|
||||
fileToUpload = await convertToMP3(selectedFile);
|
||||
showUploadMessage(
|
||||
"✓ File convertito in MP3",
|
||||
"success",
|
||||
);
|
||||
|
||||
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),
|
||||
);
|
||||
// Ottieni il testo (da textarea o da file)
|
||||
let transcriptTextContent;
|
||||
if (pastedTranscript) {
|
||||
transcriptTextContent = pastedTranscript;
|
||||
} else {
|
||||
transcriptTextContent =
|
||||
await selectedTranscript.text();
|
||||
}
|
||||
|
||||
fileLabel.classList.remove("converting");
|
||||
fileInfo.classList.remove("converting");
|
||||
// Invia come body text/plain
|
||||
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();
|
||||
formData.append("file", fileToUpload);
|
||||
try {
|
||||
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
|
||||
const controller = new AbortController();
|
||||
@@ -823,10 +961,8 @@
|
||||
"https://n8n-prod.commandware.com/webhook/ai_meeting_parse",
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
Authorization: `Basic ${credentials}`,
|
||||
},
|
||||
body: formData,
|
||||
headers: requestHeaders,
|
||||
body: requestBody,
|
||||
signal: controller.signal,
|
||||
},
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user