OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	06/17/2025 10:17:24 AM	rwxrwxr-x
📄 index.php	3.98 KB	05/19/2025 10:07:13 AM	rw-r--r--
📄 transcribe.php	2.17 KB	05/19/2025 10:07:13 AM	rw-r--r--
📁 uploads	-	04/23/2025 08:57:45 AM	rwxr-xr-x
📄 whisper_log.txt	29.34 KB	04/23/2025 08:57:43 AM	rw-r--r--

Editing: index.php

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Live Voice to Text (Whisper)</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }

button {
      padding: 10px 15px;
      margin-right: 10px;
      cursor: pointer;
    }

#result {
      margin-top: 15px;
      padding: 10px;
      border: 1px solid #ddd;
      min-height: 50px;
      background-color: #f9f9f9;
    }

.recording {
      animation: pulse 1.5s infinite;
    }

@keyframes pulse {
      0% {
        opacity: 1;
      }

50% {
        opacity: 0.5;
      }

100% {
        opacity: 1;
      }
    }
  </style>
</head>

<body>
  <h2>🎤 Speak & Transcribe</h2>
  <div>
    <button id="record">Start Recording</button>
    <button id="stop" disabled>Stop</button>
  </div>
  <p><strong>Status:</strong> <span id="status">Idle</span></p>
  <div>
    <strong>Transcript:</strong>
    <div id="result">Your transcription will appear here...</div>
  </div>

recordBtn.onclick = async () => {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({
          audio: true
        });

statusSpan.textContent = "🎙️ Recording...";
        statusSpan.classList.add("recording");

mediaRecorder = new MediaRecorder(stream);
        mediaRecorder.start();
        audioChunks = [];

mediaRecorder.ondataavailable = event => {
          audioChunks.push(event.data);
        };

mediaRecorder.onstop = () => {
          const audioBlob = new Blob(audioChunks, {
            type: 'audio/webm'
          });
          const formData = new FormData();
          formData.append('audio', audioBlob, 'audio.webm');

statusSpan.textContent = "⏳ Uploading & Processing...";
          statusSpan.classList.remove("recording");

fetch('transcribe.php', {
              method: 'POST',
              body: formData
            })
            .then(response => {
              if (!response.ok) {
                throw new Error('Network response was not ok');
              }
              return response.json();
            })
            // In the fetch .then block
            .then(data => {
              if (data.error) {
                resultDiv.textContent = data.error + (data.whisper_output ? ': ' + data.whisper_output.join('\n') : '');
                statusSpan.textContent = "❌ Error!";
              } else {
                resultDiv.textContent = data.text || 'No text returned';
                statusSpan.textContent = "✅ Done!";
              }
            })
            .catch((error) => {
              console.error('Error:', error);
              statusSpan.textContent = "❌ Error occurred";
              resultDiv.textContent = "An error occurred during transcription. Please try again.";
            });

// Stop all tracks to release microphone
          stream.getTracks().forEach(track => track.stop());
        };

recordBtn.disabled = true;
        stopBtn.disabled = false;
      } catch (err) {
        console.error('Error accessing microphone:', err);
        statusSpan.textContent = "❌ Microphone access denied";
        alert("Please allow microphone access to use this feature.");
      }
    };

stopBtn.onclick = () => {
      if (mediaRecorder && mediaRecorder.state !== 'inactive') {
        mediaRecorder.stop();
        recordBtn.disabled = false;
        stopBtn.disabled = true;
      }
    };
  </script>
</body>

</html>