diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..2d59fa4 Binary files /dev/null and b/favicon.ico differ diff --git a/index.php b/index.php new file mode 100644 index 0000000..5dbc851 --- /dev/null +++ b/index.php @@ -0,0 +1,85 @@ + + + + + + + OpenAI Whisper API + + + + + + + +
+ +
+
+
+ + + +
+ + + +
+
+
+

+
+
+
+ +
+ + + + + + + \ No newline at end of file diff --git a/input.js b/input.js new file mode 100644 index 0000000..e8c0310 --- /dev/null +++ b/input.js @@ -0,0 +1,153 @@ +// ------------------------------------------------------------------------------------------------------------------------ +// +// Description: OpenAI Whisper API +// Author: PIGMIL +// Website: https://pigmil.com +// +// ------------------------------------------------------------------------------------------------------------------------ + +let chunks = []; +let mediaRecorder; + +let startButton = document.getElementById("start"); +let stopButton = document.getElementById("stop"); +let audioForm = document.getElementById("audio_form"); + + +// Initial state +stopButton.style.backgroundColor = "#2b2b3a"; // Gray color +stopButton.disabled = true; + +function getRequest(){ + let blob = new Blob(chunks, { type: "audio/webm" }); + chunks = []; + let audioURL = URL.createObjectURL(blob); + document.getElementById("audio").src = audioURL; + + // Create a new FormData object. + var formData = new FormData(); + + // Create a blob file object from the blob. + var file = new File([blob], Math.floor(1000 + Math.random() * 9000)+".webm", { + type: "audio/webm", + }); + + // Append the audio file to the form data. + formData.append("audio", file); + + console.log("Sending audio file to server..."); + + // Send the audio file to your server. + fetch("whisper_send_data.php", { + method: "POST", + body: formData, + }) + .then((response) => { + if (!response.ok) { + throw new Error("HTTP error " + response.status); + } + + return response.text(); // Return the response as text + }) + .then((data) => { + // Process the response here + let whisper_received_data = JSON.parse(data); + HandleRequest(whisper_received_data.text); + + }) + .catch(function (error) { + console.error("Error sending audio file to server:", error); + return false; + }); + + return false; +} + +function HandleRequest(prompt){ + + console.log("Sending transcription to server..."); + console.log(prompt); + document.getElementById("whisper_response_display_area").textContent = + prompt; + + return false; +} + +audioForm.addEventListener("submit", function(e) { + e.preventDefault(); + + const form = e.currentTarget; + const formData = new FormData(form); + + var fileUpload = document.getElementById('fileUpload'); + var fileUploading = document.getElementById('fileUploading'); + + fileUpload.style.display = "none"; + fileUploading.style.display = "block"; + + console.log("Sending audio file to server..."); + + // Send the audio file to your server. + fetch("whisper_send_data.php", { + method: "POST", + body: formData, + }) + .then((response) => { + if (!response.ok) { + throw new Error("HTTP error " + response.status); + } + + return response.text(); // Return the response as text + }) + .then((data) => { + // Process the response here + let whisper_received_data = JSON.parse(data); + HandleRequest(whisper_received_data.text); + fileUpload.style.display = "block"; + fileUploading.style.display = "none"; + + }) + .catch(function (error) { + console.error("Error sending audio file to server:", error); + fileUpload.style.display = "block"; + fileUploading.style.display = "none"; + return false; + }); + +}); + +startButton.addEventListener("click", () => { + navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => { + mediaRecorder = new MediaRecorder(stream, { mimeType: "audio/webm" }); + mediaRecorder.start(); + + startButton.style.backgroundColor = "#2b2b3a"; // Gray color + startButton.disabled = true; + + stopButton.style.backgroundColor = "#1ed2f4"; // Main color + stopButton.disabled = false; + + mediaRecorder.ondataavailable = (e) => { + chunks.push(e.data); + }; + + mediaRecorder.onstop = (e) => { + getRequest(); + }; + + console.log("Recording started..."); + }); +}); + +stopButton.addEventListener("click", () => { + if (mediaRecorder) { + mediaRecorder.stop(); + } + console.log("Recording stopped..."); + + stopButton.style.backgroundColor = "#2b2b3a"; // Gray color + stopButton.disabled = true; + + startButton.style.backgroundColor = "#1ed2f4"; // Main color + startButton.disabled = false; +}); diff --git a/whisper_send_data.php b/whisper_send_data.php new file mode 100644 index 0000000..fd8f20e --- /dev/null +++ b/whisper_send_data.php @@ -0,0 +1,110 @@ + $cfile, + 'model' => 'whisper-1', + ]; + + // Set the request body + curl_setopt($ch, CURLOPT_POSTFIELDS, $data); + + // Set option to return the result instead of outputting it + curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); + + // Execute the cURL request and get the response + $response = curl_exec($ch); + + // Check if any error occurred during the request + if(curl_errno($ch)){ + echo 'Request Error:' . curl_error($ch); + } + + // Close the cURL session + curl_close($ch); + + // Output the response + $_SESSION['whisper_response'] = $response; + echo $response; + +} else { + echo "No file was uploaded."; +}