Spaces:

husseinelsaadi
/

Codingo

Paused

App Files Files Community

husseinelsaadi commited on Jul 27, 2025

Commit

81341b4

1 Parent(s): fd40bd4

updated

Browse files

Files changed (2) hide show

backend/routes/interview_api.py +8 -6
backend/templates/interview.html +98 -43

backend/routes/interview_api.py CHANGED Viewed

@@ -40,7 +40,7 @@ def start_interview():
     # when generating URLs.  If audio generation fails (for example because
     # network access is unavailable), we simply omit the audio file and allow
     # the frontend to fall back to text‑only mode.
-    audio_dir = os.path.join(current_app.static_folder, "audio")
     os.makedirs(audio_dir, exist_ok=True)
     audio_filename = f"q_{uuid.uuid4().hex}.wav"
@@ -49,11 +49,13 @@ def start_interview():
     # Generate audio synchronously.  The function returns None on error.
     audio_out = edge_tts_to_file_sync(question, audio_path)
-    response = {"question": question}
     if audio_out:
-        # Use url_for to build the URL relative to the configured static folder.
-        response["audio_url"] = url_for("static", filename=f"audio/{audio_filename}")
-    return jsonify(response)
 @interview_api.route("/transcribe_audio", methods=["POST"])
 @login_required
@@ -96,7 +98,7 @@ def process_answer():
     next_question = f"Follow‑up question {question_idx + 2}: Can you elaborate on your experience with relevant technologies?"
     # Prepare audio output directory inside the app's static folder
-    audio_dir = os.path.join(current_app.static_folder, "audio")
     os.makedirs(audio_dir, exist_ok=True)
     audio_filename = f"q_{uuid.uuid4().hex}.wav"

     # when generating URLs.  If audio generation fails (for example because
     # network access is unavailable), we simply omit the audio file and allow
     # the frontend to fall back to text‑only mode.
+    audio_dir = "/tmp/audio"
     os.makedirs(audio_dir, exist_ok=True)
     audio_filename = f"q_{uuid.uuid4().hex}.wav"
     # Generate audio synchronously.  The function returns None on error.
     audio_out = edge_tts_to_file_sync(question, audio_path)
+    from flask import send_file  # ⬅ add this at the top if not already imported
     if audio_out:
+        return send_file(audio_path, mimetype="audio/wav")
+    else:
+        return jsonify({"question": question})
 @interview_api.route("/transcribe_audio", methods=["POST"])
 @login_required
     next_question = f"Follow‑up question {question_idx + 2}: Can you elaborate on your experience with relevant technologies?"
     # Prepare audio output directory inside the app's static folder
+    audio_dir = "/tmp/audio"
     os.makedirs(audio_dir, exist_ok=True)
     audio_filename = f"q_{uuid.uuid4().hex}.wav"

backend/templates/interview.html CHANGED Viewed

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -347,6 +348,7 @@
                 opacity: 0;
                 transform: translateY(20px);
             }
             to {
                 opacity: 1;
                 transform: translateY(0);
@@ -354,8 +356,15 @@
         }
         @keyframes pulse {
-            0%, 100% { transform: scale(1); }
-            50% { transform: scale(1.1); }
         }
         @keyframes ripple {
@@ -363,6 +372,7 @@
                 transform: scale(1);
                 opacity: 1;
             }
             100% {
                 transform: scale(1.4);
                 opacity: 0;
@@ -370,12 +380,21 @@
         }
         @keyframes recordPulse {
-            0%, 100% { transform: scale(1); }
-            50% { transform: scale(1.05); }
         }
         @keyframes spin {
-            to { transform: rotate(360deg); }
         }
         @media (max-width: 768px) {
@@ -390,7 +409,8 @@
                 font-size: 1.5rem;
             }
-            .message-bubble, .user-bubble {
                 max-width: 85%;
             }
@@ -404,6 +424,7 @@
         }
     </style>
 </head>
 <body>
     <div class="interview-container">
         <div class="header">
@@ -436,7 +457,8 @@
                 <div class="recording-status" id="recordingStatus">
                     Click the microphone to record your answer
                 </div>
-                <div class="transcript-area" id="transcriptArea" contenteditable="true" placeholder="Your transcribed answer will appear here..."></div>
                 <div class="action-buttons">
                     <button class="btn btn-primary" id="confirmButton" disabled>
                         <span>Confirm Answer</span>
@@ -506,12 +528,12 @@
                 this.micButton.addEventListener('mousedown', () => this.startRecording());
                 this.micButton.addEventListener('mouseup', () => this.stopRecording());
                 this.micButton.addEventListener('mouseleave', () => this.stopRecording());
                 this.micButton.addEventListener('touchstart', (e) => {
                     e.preventDefault();
                     this.startRecording();
                 });
                 this.micButton.addEventListener('touchend', (e) => {
                     e.preventDefault();
                     this.stopRecording();
@@ -519,7 +541,7 @@
                 this.confirmButton.addEventListener('click', () => this.submitAnswer());
                 this.retryButton.addEventListener('click', () => this.resetRecording());
                 this.transcriptArea.addEventListener('input', () => {
                     const hasText = this.transcriptArea.textContent.trim().length > 0;
                     this.confirmButton.disabled = !hasText;
@@ -555,22 +577,32 @@
                         throw new Error(`HTTP error! status: ${response.status}`);
                     }
-                    const data = await response.json();
-                    if (data.error) {
-                        this.showError(data.error);
-                        return;
                     }
-                    this.displayQuestion(data.question, data.audio_url);
-                    this.interviewData.questions.push(data.question);
                 } catch (error) {
                     console.error('Error starting interview:', error);
                     this.showError('Failed to start interview. Please try again.');
                 }
             }
             displayQuestion(question, audioUrl = null) {
                 // Remove loading message
                 const loadingMsg = document.getElementById('loadingMessage');
@@ -613,7 +645,7 @@
             enableControls() {
                 this.micButton.disabled = false;
                 this.recordingStatus.textContent = 'Click and hold to record your answer';
                 // Remove talking animation from avatar
                 const avatars = this.chatArea.querySelectorAll('.ai-avatar');
                 avatars.forEach(avatar => avatar.classList.remove('talking'));
@@ -643,7 +675,7 @@
                     this.micButton.classList.add('recording');
                     this.micIcon.textContent = '🔴';
                     this.recordingStatus.textContent = 'Recording... Release to stop';
                 } catch (error) {
                     console.error('Error starting recording:', error);
                     this.recordingStatus.textContent = 'Microphone access denied. Please allow microphone access and try again.';
@@ -678,7 +710,7 @@
                     }
                     const data = await response.json();
                     if (data.error) {
                         this.recordingStatus.textContent = data.error;
                         return;
@@ -692,7 +724,7 @@
                     } else {
                         this.recordingStatus.textContent = 'No speech detected. Please try recording again.';
                     }
                 } catch (error) {
                     console.error('Error processing recording:', error);
                     this.recordingStatus.textContent = 'Error processing audio. Please try again.';
@@ -734,29 +766,51 @@
                         throw new Error(`HTTP error! status: ${response.status}`);
                     }
-                    const data = await response.json();
-                    if (data.error) {
-                        this.showError(data.error);
-                        return;
-                    }
-                    if (data.success) {
                         this.interviewData.answers.push(answer);
-                        this.interviewData.evaluations.push(data.evaluation);
-                        if (data.isComplete) {
                             this.showInterviewSummary();
                         } else {
                             this.currentQuestionIndex++;
-                            this.displayQuestion(data.nextQuestion, data.audioUrl);
-                            this.interviewData.questions.push(data.nextQuestion);
                             this.resetForNextQuestion();
                         }
                     } else {
-                        this.showError('Failed to process answer. Please try again.');
                     }
                 } catch (error) {
                     console.error('Error submitting answer:', error);
                     this.showError('Connection error. Please try again.');
@@ -794,7 +848,7 @@
                 this.interviewData.questions.forEach((question, index) => {
                     const answer = this.interviewData.answers[index] || 'No answer provided';
                     const evaluation = this.interviewData.evaluations[index] || {};
                     summaryHtml += `
                         <div class="summary-item">
                             <h4>Question ${index + 1}:</h4>
@@ -818,21 +872,21 @@
                 const errorDiv = document.createElement('div');
                 errorDiv.className = 'error-message';
                 errorDiv.textContent = message;
                 // Insert at the top of chat area
                 this.chatArea.insertBefore(errorDiv, this.chatArea.firstChild);
                 // Remove after 5 seconds
                 setTimeout(() => {
                     if (errorDiv.parentNode) {
                         errorDiv.parentNode.removeChild(errorDiv);
                     }
                 }, 5000);
                 // Also update recording status
                 this.recordingStatus.textContent = message;
                 this.recordingStatus.style.color = '#ff4757';
                 setTimeout(() => {
                     this.recordingStatus.style.color = '#666';
                 }, 3000);
@@ -845,7 +899,7 @@
         });
         // Add placeholder attribute support for contenteditable
-        document.addEventListener('DOMContentLoaded', function() {
             const transcriptArea = document.getElementById('transcriptArea');
             const placeholder = transcriptArea.getAttribute('placeholder');
@@ -859,14 +913,14 @@
                 }
             }
-            transcriptArea.addEventListener('focus', function() {
                 if (transcriptArea.textContent === placeholder) {
                     transcriptArea.textContent = '';
                     transcriptArea.style.color = '#333';
                 }
             });
-            transcriptArea.addEventListener('blur', function() {
                 if (transcriptArea.textContent.trim() === '') {
                     transcriptArea.style.color = '#999';
                     transcriptArea.textContent = placeholder;
@@ -878,4 +932,5 @@
         });
     </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
                 opacity: 0;
                 transform: translateY(20px);
             }
             to {
                 opacity: 1;
                 transform: translateY(0);
         }
         @keyframes pulse {
+            0%,
+            100% {
+                transform: scale(1);
+            }
+            50% {
+                transform: scale(1.1);
+            }
         }
         @keyframes ripple {
                 transform: scale(1);
                 opacity: 1;
             }
             100% {
                 transform: scale(1.4);
                 opacity: 0;
         }
         @keyframes recordPulse {
+            0%,
+            100% {
+                transform: scale(1);
+            }
+            50% {
+                transform: scale(1.05);
+            }
         }
         @keyframes spin {
+            to {
+                transform: rotate(360deg);
+            }
         }
         @media (max-width: 768px) {
                 font-size: 1.5rem;
             }
+            .message-bubble,
+            .user-bubble {
                 max-width: 85%;
             }
         }
     </style>
 </head>
 <body>
     <div class="interview-container">
         <div class="header">
                 <div class="recording-status" id="recordingStatus">
                     Click the microphone to record your answer
                 </div>
+                <div class="transcript-area" id="transcriptArea" contenteditable="true"
+                    placeholder="Your transcribed answer will appear here..."></div>
                 <div class="action-buttons">
                     <button class="btn btn-primary" id="confirmButton" disabled>
                         <span>Confirm Answer</span>
                 this.micButton.addEventListener('mousedown', () => this.startRecording());
                 this.micButton.addEventListener('mouseup', () => this.stopRecording());
                 this.micButton.addEventListener('mouseleave', () => this.stopRecording());
                 this.micButton.addEventListener('touchstart', (e) => {
                     e.preventDefault();
                     this.startRecording();
                 });
                 this.micButton.addEventListener('touchend', (e) => {
                     e.preventDefault();
                     this.stopRecording();
                 this.confirmButton.addEventListener('click', () => this.submitAnswer());
                 this.retryButton.addEventListener('click', () => this.resetRecording());
                 this.transcriptArea.addEventListener('input', () => {
                     const hasText = this.transcriptArea.textContent.trim().length > 0;
                     this.confirmButton.disabled = !hasText;
                         throw new Error(`HTTP error! status: ${response.status}`);
                     }
+                    const contentType = response.headers.get("Content-Type");
+                    if (contentType.includes("audio")) {
+                        const audioBlob = await response.blob();
+                        const audioUrl = URL.createObjectURL(audioBlob);
+                        const fallbackText = "Let's begin. Can you introduce yourself?";
+                        this.displayQuestion(fallbackText, audioUrl);
+                        this.interviewData.questions.push(fallbackText);
+                    } else {
+                        const data = await response.json();
+                        if (data.error) {
+                            this.showError(data.error);
+                            return;
+                        }
+                        this.displayQuestion(data.question, data.audio_url);
+                        this.interviewData.questions.push(data.question);
                     }
                 } catch (error) {
                     console.error('Error starting interview:', error);
                     this.showError('Failed to start interview. Please try again.');
                 }
             }
             displayQuestion(question, audioUrl = null) {
                 // Remove loading message
                 const loadingMsg = document.getElementById('loadingMessage');
             enableControls() {
                 this.micButton.disabled = false;
                 this.recordingStatus.textContent = 'Click and hold to record your answer';
                 // Remove talking animation from avatar
                 const avatars = this.chatArea.querySelectorAll('.ai-avatar');
                 avatars.forEach(avatar => avatar.classList.remove('talking'));
                     this.micButton.classList.add('recording');
                     this.micIcon.textContent = '🔴';
                     this.recordingStatus.textContent = 'Recording... Release to stop';
                 } catch (error) {
                     console.error('Error starting recording:', error);
                     this.recordingStatus.textContent = 'Microphone access denied. Please allow microphone access and try again.';
                     }
                     const data = await response.json();
                     if (data.error) {
                         this.recordingStatus.textContent = data.error;
                         return;
                     } else {
                         this.recordingStatus.textContent = 'No speech detected. Please try recording again.';
                     }
                 } catch (error) {
                     console.error('Error processing recording:', error);
                     this.recordingStatus.textContent = 'Error processing audio. Please try again.';
                         throw new Error(`HTTP error! status: ${response.status}`);
                     }
+                    const contentType = response.headers.get("Content-Type");
+                    if (contentType.includes("audio")) {
+                        const audioBlob = await response.blob();
+                        const audioUrl = URL.createObjectURL(audioBlob);
+                        const fallback = `Follow-up question ${this.currentQuestionIndex + 2}: Can you elaborate more?`;
                         this.interviewData.answers.push(answer);
+                        this.interviewData.evaluations.push({
+                            score: "N/A",
+                            feedback: "No feedback available in fallback mode."
+                        });
+                        if (this.currentQuestionIndex >= 2) {
                             this.showInterviewSummary();
                         } else {
                             this.currentQuestionIndex++;
+                            this.displayQuestion(fallback, audioUrl);
+                            this.interviewData.questions.push(fallback);
                             this.resetForNextQuestion();
                         }
                     } else {
+                        const data = await response.json();
+                        if (data.success) {
+                            this.interviewData.answers.push(answer);
+                            this.interviewData.evaluations.push(data.evaluation);
+                            if (data.isComplete) {
+                                this.showInterviewSummary();
+                            } else {
+                                this.currentQuestionIndex++;
+                                this.displayQuestion(data.nextQuestion, data.audioUrl);
+                                this.interviewData.questions.push(data.nextQuestion);
+                                this.resetForNextQuestion();
+                            }
+                        } else {
+                            this.showError('Failed to process answer. Please try again.');
+                        }
                     }
+                    if (data.error) {
+                        this.showError(data.error);
+                        return;
+                    }
                 } catch (error) {
                     console.error('Error submitting answer:', error);
                     this.showError('Connection error. Please try again.');
                 this.interviewData.questions.forEach((question, index) => {
                     const answer = this.interviewData.answers[index] || 'No answer provided';
                     const evaluation = this.interviewData.evaluations[index] || {};
                     summaryHtml += `
                         <div class="summary-item">
                             <h4>Question ${index + 1}:</h4>
                 const errorDiv = document.createElement('div');
                 errorDiv.className = 'error-message';
                 errorDiv.textContent = message;
                 // Insert at the top of chat area
                 this.chatArea.insertBefore(errorDiv, this.chatArea.firstChild);
                 // Remove after 5 seconds
                 setTimeout(() => {
                     if (errorDiv.parentNode) {
                         errorDiv.parentNode.removeChild(errorDiv);
                     }
                 }, 5000);
                 // Also update recording status
                 this.recordingStatus.textContent = message;
                 this.recordingStatus.style.color = '#ff4757';
                 setTimeout(() => {
                     this.recordingStatus.style.color = '#666';
                 }, 3000);
         });
         // Add placeholder attribute support for contenteditable
+        document.addEventListener('DOMContentLoaded', function () {
             const transcriptArea = document.getElementById('transcriptArea');
             const placeholder = transcriptArea.getAttribute('placeholder');
                 }
             }
+            transcriptArea.addEventListener('focus', function () {
                 if (transcriptArea.textContent === placeholder) {
                     transcriptArea.textContent = '';
                     transcriptArea.style.color = '#333';
                 }
             });
+            transcriptArea.addEventListener('blur', function () {
                 if (transcriptArea.textContent.trim() === '') {
                     transcriptArea.style.color = '#999';
                     transcriptArea.textContent = placeholder;
         });
     </script>
 </body>
+</html>