Spaces:

husseinelsaadi
/

Codingo

Paused

File size: 36,567 Bytes

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Interview - Interactive Session</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .interview-container {
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 800px;
            min-height: 600px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .header {
            background: linear-gradient(45deg, #4CAF50, #45a049);
            color: white;
            padding: 20px;
            text-align: center;
            position: relative;
        }

        .header h1 {
            font-size: 1.8rem;
            margin-bottom: 5px;
        }

        .header p {
            opacity: 0.9;
            font-size: 0.9rem;
        }

        .chat-area {
            flex: 1;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            max-height: 400px;
            overflow-y: auto;
        }

        .ai-message {
            display: flex;
            align-items: flex-start;
            gap: 15px;
            animation: slideIn 0.5s ease-out;
        }

        .ai-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(45deg, #667eea, #764ba2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 1.2rem;
            position: relative;
            flex-shrink: 0;
        }

        .ai-avatar.talking {
            animation: pulse 1.5s infinite;
        }

        .ai-avatar.talking::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: rgba(102, 126, 234, 0.3);
            animation: ripple 1.5s infinite;
        }

        .message-bubble {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 15px 20px;
            max-width: 70%;
            position: relative;
        }

        .message-bubble::before {
            content: '';
            position: absolute;
            left: -10px;
            top: 15px;
            width: 0;
            height: 0;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-right: 10px solid #f8f9fa;
        }

        .user-message {
            display: flex;
            justify-content: flex-end;
            animation: slideIn 0.5s ease-out;
        }

        .user-bubble {
            background: linear-gradient(45deg, #4CAF50, #45a049);
            color: white;
            border-radius: 15px;
            padding: 15px 20px;
            max-width: 70%;
            position: relative;
        }

        .user-bubble::before {
            content: '';
            position: absolute;
            right: -10px;
            top: 15px;
            width: 0;
            height: 0;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-left: 10px solid #4CAF50;
        }

        .controls-area {
            background: #f8f9fa;
            padding: 20px;
            border-top: 1px solid #e9ecef;
        }

        .recording-section {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .mic-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
        }

        .mic-button {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            border: none;
            background: linear-gradient(45deg, #ff6b6b, #ee5a52);
            color: white;
            font-size: 1.8rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .mic-button:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3);
        }

        .mic-button.recording {
            background: linear-gradient(45deg, #ff4757, #ff3742);
            animation: recordPulse 1s infinite;
        }

        .mic-button.recording::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: rgba(255, 71, 87, 0.3);
            animation: ripple 1s infinite;
        }

        .recording-status {
            font-size: 0.9rem;
            color: #666;
            text-align: center;
        }

        .transcript-area {
            background: white;
            border: 2px solid #e9ecef;
            border-radius: 10px;
            padding: 15px;
            font-size: 0.9rem;
            color: #333;
            min-height: 60px;
            max-height: 120px;
            overflow-y: auto;
            transition: border-color 0.3s ease;
        }

        .transcript-area:focus {
            outline: none;
            border-color: #4CAF50;
        }

        .action-buttons {
            display: flex;
            gap: 10px;
            justify-content: center;
            margin-top: 15px;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 500;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .btn-primary {
            background: linear-gradient(45deg, #4CAF50, #45a049);
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
        }

        .btn-secondary {
            background: #6c757d;
            color: white;
        }

        .btn-secondary:hover {
            background: #545b62;
            transform: translateY(-2px);
        }

        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .question-counter {
            position: absolute;
            top: 15px;
            right: 20px;
            background: rgba(255, 255, 255, 0.2);
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
        }

        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
        }

        .summary-panel {
            display: none;
            background: white;
            border-radius: 15px;
            padding: 30px;
            margin: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .summary-panel h2 {
            color: #333;
            margin-bottom: 20px;
            text-align: center;
        }

        .summary-item {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
            border-left: 4px solid #4CAF50;
        }

        .summary-item h4 {
            color: #333;
            margin-bottom: 8px;
        }

        .summary-item p {
            color: #666;
            margin-bottom: 5px;
            line-height: 1.4;
        }

        .evaluation-score {
            display: inline-block;
            background: #4CAF50;
            color: white;
            padding: 4px 8px;
            border-radius: 15px;
            font-size: 0.8rem;
            font-weight: bold;
        }

        .error-message {
            background: #ff4757;
            color: white;
            padding: 10px;
            border-radius: 5px;
            margin: 10px 0;
            text-align: center;
        }

        @keyframes slideIn {
            from {
                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 {
            0% {
                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) {
            .interview-container {
                margin: 10px;
                min-height: 90vh;
            }

            .mic-button {
                width: 70px;
                height: 70px;
                font-size: 1.5rem;
            }

            .message-bubble,
            .user-bubble {
                max-width: 85%;
            }

            .header h1 {
                font-size: 1.5rem;
            }
        }

        audio {
            display: none;
        }
    </style>
</head>

<body>
    <div class="interview-container">
        <div class="header">
            <div class="question-counter">
                Question <span id="currentQuestionNum">1</span> of <span id="totalQuestions">{{ job.num_questions }}</span>
            </div>
            <h1>🤖 AI Interview Assistant</h1>
            <p>Answer thoughtfully and take your time</p>
        </div>

        <div class="chat-area" id="chatArea">
            <div class="ai-message">
                <div class="ai-avatar" id="aiAvatar">AI</div>
                <div class="message-bubble">
                    <div id="loadingMessage">
                        <div class="loading"></div>
                        <span style="margin-left: 10px;">Generating your first question...</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="controls-area">
            <div class="recording-section">
                <div class="mic-container">
                    <button class="mic-button" id="micButton" disabled>
                        <span id="micIcon">🎤</span>
                    </button>
                </div>
                <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>
                        <span id="confirmLoading" style="display: none;">
                            <div class="loading" style="width: 16px; height: 16px; border-width: 2px;"></div>
                        </span>
                    </button>
                    <button class="btn btn-secondary" id="retryRecording" style="display: none;">
                        🔄 Re-record
                    </button>
                </div>
            </div>
        </div>

        <!-- Summary Panel (hidden initially) -->
        <div class="summary-panel" id="summaryPanel">
            <h2>📋 Interview Summary</h2>
            <div id="summaryContent"></div>
            <div style="text-align: center; margin-top: 30px;">
                <button class="btn btn-primary" onclick="window.location.href='/jobs'">
                    Back to Jobs
                </button>
            </div>
        </div>
    </div>

    <!-- Hidden audio element for TTS playback -->
    <audio id="ttsAudio" preload="auto"></audio>

    <script>
        const JOB_ID = {{ job.id }};

        class AIInterviewer {
            constructor() {
                this.currentQuestionIndex = 0;
                // Set the total number of questions based on the job configuration.
                // The value is read from the DOM element #totalQuestions, which
                // has been populated server‑side using ``job.num_questions``.
                const totalSpan = document.getElementById('totalQuestions');
                const parsedTotal = parseInt(totalSpan && totalSpan.textContent);
                this.totalQuestions = Number.isNaN(parsedTotal) || parsedTotal <= 0 ? 4 : parsedTotal;
                // Ensure the counter display shows the correct total number of
                // questions.  Without this update the span would retain the
                // server‑rendered value even if the fallback above changed
                // ``this.totalQuestions``.
                if (totalSpan) {
                    totalSpan.textContent = this.totalQuestions;
                }
                this.isRecording = false;
                this.mediaRecorder = null;
                this.audioChunks = [];
                this.currentQuestion = "";
                this.interviewData = {
                    questions: [],
                    answers: [],
                    evaluations: []
                };
                this.initializeElements();
                this.initializeInterview();
            }

            initializeElements() {
                this.chatArea = document.getElementById('chatArea');
                this.micButton = document.getElementById('micButton');
                this.micIcon = document.getElementById('micIcon');
                this.recordingStatus = document.getElementById('recordingStatus');
                this.transcriptArea = document.getElementById('transcriptArea');
                this.confirmButton = document.getElementById('confirmButton');
                this.confirmLoading = document.getElementById('confirmLoading');
                this.retryButton = document.getElementById('retryRecording');
                this.aiAvatar = document.getElementById('aiAvatar');
                this.ttsAudio = document.getElementById('ttsAudio');
                this.summaryPanel = document.getElementById('summaryPanel');
                this.currentQuestionNum = document.getElementById('currentQuestionNum');
                this.totalQuestionsSpan = document.getElementById('totalQuestions');
                this.bindEvents();
            }

            bindEvents() {
                // Mouse events for desktop
                this.micButton.addEventListener('mousedown', (e) => {
                    e.preventDefault();
                    this.startRecording();
                });

                this.micButton.addEventListener('mouseup', (e) => {
                    e.preventDefault();
                    this.stopRecording();
                });

                this.micButton.addEventListener('mouseleave', (e) => {
                    e.preventDefault();
                    this.stopRecording();
                });

                // Touch events for mobile
                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;
                });

                this.ttsAudio.addEventListener('play', () => {
                    this.aiAvatar.classList.add('talking');
                });

                this.ttsAudio.addEventListener('ended', () => {
                    this.aiAvatar.classList.remove('talking');
                    this.enableControls();
                });

                this.ttsAudio.addEventListener('error', (e) => {
                    console.error('Audio playback error:', e);
                    this.aiAvatar.classList.remove('talking');
                    this.enableControls();
                });
            }

            async initializeInterview() {
                try {
                    console.log('Starting interview...');
                    const response = await fetch('/api/start_interview', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({ job_id: JOB_ID })
                    });

                    if (!response.ok) {
                        const errorText = await response.text();
                        console.error('Server response:', response.status, errorText);
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }

                    const data = await response.json();
                    console.log('Received interview data:', data);

                    if (data.error) {
                        this.showError(data.error);
                        return;
                    }

                    // Store the current question for evaluation
                    this.currentQuestion = data.question;
                    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 check your connection and try again.');
                }
            }

            displayQuestion(question, audioUrl = null) {
                // Remove loading message
                const loadingMsg = document.getElementById('loadingMessage');
                if (loadingMsg) {
                    loadingMsg.remove();
                }

                // Create question message
                const messageDiv = document.createElement('div');
                messageDiv.className = 'ai-message';
                messageDiv.innerHTML = `
            <div class="ai-avatar">AI</div>
            <div class="message-bubble">
                <p>${question}</p>
            </div>
        `;
                this.chatArea.appendChild(messageDiv);
                this.chatArea.scrollTop = this.chatArea.scrollHeight;

                // Update question counter
                this.currentQuestionNum.textContent = this.currentQuestionIndex + 1;

                // Play audio if available
                if (audioUrl) {
                    console.log('Playing audio:', audioUrl);
                    this.playQuestionAudio(audioUrl);
                } else {
                    console.log('No audio URL provided, enabling controls');
                    setTimeout(() => this.enableControls(), 1000);
                }
            }

            playQuestionAudio(audioUrl) {
                // Add talking animation immediately
                const avatars = this.chatArea.querySelectorAll('.ai-avatar');
                avatars.forEach(avatar => avatar.classList.add('talking'));

                this.ttsAudio.src = audioUrl;
                this.ttsAudio.load(); // Ensure audio is loaded

                this.ttsAudio.play().catch(error => {
                    console.error('Audio play error:', error);
                    avatars.forEach(avatar => avatar.classList.remove('talking'));
                    this.enableControls();
                });
            }

            enableControls() {
                this.micButton.disabled = false;
                this.recordingStatus.textContent = 'Click and hold to record your answer';

                // Remove talking animation from all avatars
                const avatars = this.chatArea.querySelectorAll('.ai-avatar');
                avatars.forEach(avatar => avatar.classList.remove('talking'));
            }

            async startRecording() {
                if (this.isRecording || this.micButton.disabled) return;

                try {
                    console.log('Starting recording...');
                    const stream = await navigator.mediaDevices.getUserMedia({
                        audio: {
                            echoCancellation: true,
                            noiseSuppression: true,
                            autoGainControl: true,
                            sampleRate: 16000
                        }
                    });

                    // Use webm format with opus codec for better compatibility
                    const options = {
                        mimeType: 'audio/webm;codecs=opus'
                    };

                    // Fallback for browsers that don't support webm
                    if (!MediaRecorder.isTypeSupported(options.mimeType)) {
                        options.mimeType = 'audio/webm';
                    }
                    if (!MediaRecorder.isTypeSupported(options.mimeType)) {
                        delete options.mimeType;
                    }

                    this.mediaRecorder = new MediaRecorder(stream, {
                        mimeType: 'audio/webm;codecs=opus'
                    });

                    this.audioChunks = [];

                    this.mediaRecorder.ondataavailable = (event) => {
                        if (event.data.size > 0) {
                            this.audioChunks.push(event.data);
                            console.log('Audio chunk received:', event.data.size, 'bytes');
                        }
                    };

                    this.mediaRecorder.onstop = () => {
                        console.log('Recording stopped, processing...');
                        stream.getTracks().forEach(track => track.stop());
                        this.processRecording();
                    };

                    this.mediaRecorder.onerror = (event) => {
                        console.error('MediaRecorder error:', event.error);
                        this.recordingStatus.textContent = 'Recording error. Please try again.';
                        stream.getTracks().forEach(track => track.stop());
                    };

                    this.mediaRecorder.start(1000); // Collect data every second
                    this.isRecording = true;

                    // Update UI
                    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.';
                    this.recordingStatus.style.color = '#ff4757';
                }
            }

            stopRecording() {
                if (!this.isRecording || !this.mediaRecorder) return;

                console.log('Stopping recording...');
                this.mediaRecorder.stop();
                this.isRecording = false;

                // Update UI
                this.micButton.classList.remove('recording');
                this.micIcon.textContent = '🎤';
                this.recordingStatus.textContent = 'Processing audio...';
                this.recordingStatus.style.color = '#666';
            }

            async processRecording() {
                try {
                    if (this.audioChunks.length === 0) {
                        console.error('No audio chunks recorded');
                        this.recordingStatus.textContent = 'No audio recorded. Please try again.';
                        return;
                    }

                    console.log('Processing', this.audioChunks.length, 'audio chunks');

                    // Create blob from audio chunks
                    const audioBlob = new Blob(this.audioChunks, { type: 'audio/webm' });

                    // Initialise a new FormData instance AFTER creating the blob
                    // and append the audio. Previously a call to `formData.append` was
                    // made before the variable was declared, causing a reference
                    // error and triggering the generic "Error processing audio" message.
                    const formData = new FormData();
                    formData.append('audio', audioBlob, 'recording.webm');

                    console.log('Created audio blob:', audioBlob.size, 'bytes');

                    if (audioBlob.size === 0) {
                        console.error('Audio blob is empty');
                        this.recordingStatus.textContent = 'No audio data captured. Please try again.';
                        return;
                    }

                    // formData has already been created and the audio appended above.
                    // Do not recreate or re-append here.

                    console.log('Sending audio for transcription...');
                    const response = await fetch('/api/transcribe_audio', {
                        method: 'POST',
                        body: formData
                    });

                    if (!response.ok) {
                        const errorText = await response.text();
                        console.error('Transcription error:', response.status, errorText);
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }

                    const data = await response.json();
                    console.log('Transcription response:', data);

                    if (data.error) {
                        this.recordingStatus.textContent = data.error;
                        this.recordingStatus.style.color = '#ff4757';
                        return;
                    }

                    if (data.transcript && data.transcript.trim()) {
                        this.transcriptArea.textContent = data.transcript;
                        this.confirmButton.disabled = false;
                        this.retryButton.style.display = 'inline-flex';
                        this.recordingStatus.textContent = 'Transcription complete. Review and confirm your answer.';
                        this.recordingStatus.style.color = '#4CAF50';
                    } else {
                        this.recordingStatus.textContent = 'No speech detected. Please try recording again.';
                        this.recordingStatus.style.color = '#ff4757';
                    }

                } catch (error) {
                    console.error('Error processing recording:', error);
                    this.recordingStatus.textContent = 'Error processing audio. Please try again.';
                    this.recordingStatus.style.color = '#ff4757';
                }
            }

            resetRecording() {
                this.transcriptArea.textContent = '';
                this.confirmButton.disabled = true;
                this.retryButton.style.display = 'none';
                this.recordingStatus.textContent = 'Click and hold to record your answer';
                this.recordingStatus.style.color = '#666';
            }

            async submitAnswer() {
                const answer = this.transcriptArea.textContent.trim();
                if (!answer) return;

                console.log('Submitting answer:', answer);

                // Show loading state
                this.confirmButton.disabled = true;
                this.confirmLoading.style.display = 'inline-block';
                this.confirmButton.querySelector('span').style.display = 'none';

                // Add user message to chat
                this.addUserMessage(answer);

                try {
                    const response = await fetch('/api/process_answer', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            answer: answer,
                            questionIndex: this.currentQuestionIndex,
                            current_question: this.currentQuestion,
                            job_id: JOB_ID
                        })
                    });

                    if (!response.ok) {
                        const errorText = await response.text();
                        console.error('Process answer error:', response.status, errorText);
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }

                    const data = await response.json();
                    console.log('Process answer response:', data);

                    if (!data.success) {
                        this.showError(data.error || 'Failed to process answer. Please try again.');
                        return;
                    }

                    // Record the user's answer and its evaluation
                    this.interviewData.answers.push(answer);
                    this.interviewData.evaluations.push(data.evaluation || {});

                    if (data.is_complete) {
                        console.log('Interview completed');
                        if (data.redirect_url) {
                            window.location.href = data.redirect_url;
                        }
                        this.showInterviewSummary();
                    } else {
                        console.log('Moving to next question');
                        this.currentQuestionIndex++;
                        this.currentQuestion = data.next_question;
                        this.displayQuestion(data.next_question, data.audio_url);
                        this.interviewData.questions.push(data.next_question);
                        this.resetForNextQuestion();
                    }
                } catch (error) {
                    console.error('Error submitting answer:', error);
                    this.showError('Connection error. Please try again.');
                } finally {
                    // Reset button state
                    this.confirmLoading.style.display = 'none';
                    this.confirmButton.querySelector('span').style.display = 'inline';
                }
            }

            addUserMessage(message) {
                const messageDiv = document.createElement('div');
                messageDiv.className = 'user-message';
                messageDiv.innerHTML = `
            <div class="user-bubble">
                <p>${message}</p>
            </div>
        `;
                this.chatArea.appendChild(messageDiv);
                this.chatArea.scrollTop = this.chatArea.scrollHeight;
            }

            resetForNextQuestion() {
                this.transcriptArea.textContent = '';
                this.confirmButton.disabled = true;
                this.retryButton.style.display = 'none';
                this.recordingStatus.textContent = 'Wait for the next question...';
                this.recordingStatus.style.color = '#666';
                this.micButton.disabled = true;
            }

            showInterviewSummary() {
                const summaryContent = document.getElementById('summaryContent');
                let summaryHtml = '';

                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>
                    <p><strong>Q:</strong> ${question}</p>
                    <p><strong>A:</strong> ${answer}</p>
                    <p><strong>Score:</strong> <span class="evaluation-score">${evaluation.score || 'N/A'}</span></p>
                    <p><strong>Feedback:</strong> ${evaluation.feedback || 'No feedback provided'}</p>
                </div>
            `;
                });

                summaryContent.innerHTML = summaryHtml;

                // Hide main interface and show summary
                document.querySelector('.interview-container').style.display = 'none';
                this.summaryPanel.style.display = 'block';
            }

            showError(message) {
                console.error('Showing error:', message);

                // Create error message element
                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);
            }
        }

        // Initialize the interview when page loads
        document.addEventListener('DOMContentLoaded', () => {
            console.log('DOM loaded, initializing AI Interviewer...');
            new AIInterviewer();
        });

        // Add placeholder attribute support for contenteditable
        document.addEventListener('DOMContentLoaded', function () {
            const transcriptArea = document.getElementById('transcriptArea');
            const placeholder = transcriptArea.getAttribute('placeholder');

            function checkPlaceholder() {
                if (transcriptArea.textContent.trim() === '') {
                    transcriptArea.style.color = '#999';
                    transcriptArea.textContent = placeholder;
                } else if (transcriptArea.textContent === placeholder) {
                    transcriptArea.style.color = '#333';
                    transcriptArea.textContent = '';
                }
            }

            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;
                }
            });

            // Initial check
            checkPlaceholder();
        });
    </script>
</body>

</html>