Upload app.js

static/js/app.js

@@ -0,0 +1,1259 @@
+const { createApp, ref, onMounted } = Vue;
+const app = createApp({
+    data() {
+        return {
+            responseFormat: 'verbose_json',
+            temperature: 0,
+            chunkSize: 10,
+            overlap: 1,
+            selection: [1,100],
+            systemPrompt: '',
+            isAuthenticated: false,
+            username: '',
+            token: '',
+            isLoading: false,
+            audioFile: [],
+            segments: [],
+            transcriptionText: '',
+            selectedLanguage: 'auto',
+            transcriptions: [],
+            showSidebar: true,
+            showPlayer: false,
+            showApiKeyModal: false,
+            audioUrl: null,
+            isPlaying: false,
+            audioPlayer: null,
+            isProcessing: false,
+            howl: null,
+            activeSegment: null,
+            isPlayingSegment: false,
+            isMuted: false,
+            volume: 0.5,
+            currentTime: 0,
+            totalDuration: 0,
+            seekInterval: null,
+            waveformData: null,
+            waveformCanvas: null,
+            ctx: null,
+            showLoginModal: false,
+            loginForm: {
+                username: '',
+                password: '',
+            },
+            showSignupModal: false,
+            signupForm: {
+                username: '',
+                email: '',
+                password: '',
+                confirmPassword: ''
+            },
+            // Admin panel data
+            showAdminPanel: false,
+            isAdmin: false,
+            currentUser: null,
+            users: [],
+            loadingUsers: false,
+            userSearchQuery: '',
+            // processingProgress: 0,
+            // totalChunks: 0,
+            // showVolumeSlider: false,
+            // Resumable upload properties
+            showUploadModal: false,
+            resumableFile: null,
+            uploadId: null,
+            chunkUploadSize: 1024 * 1024, // 1MB chunks
+            uploadProgress: 0,
+            uploadInProgress: false,
+            uploadPaused: false,
+            currentChunkIndex: 0,
+            totalChunks: 0,
+            // Upload statistics
+            uploadStartTime: null,
+            uploadSpeed: null,
+            estimatedTimeRemaining: null,
+            lastUploadedBytes: 0,
+            lastUploadTime: null,
+            // list uploaded files
+            uploadedAudioFiles: [],
+            loadingAudioFiles: false,
+            showAudioFilesModal: false,
+            audioFileSearchQuery: '',
+        }
+    },
+
+    methods: {
+        async login() {
+            this.isAuthenticated = true;
+        },
+
+        logout() {
+            this.token = '';
+            this.username = '';
+            this.isAuthenticated = false;
+            this.isAdmin = false;
+            this.currentUser = null;
+            this.users = [];
+            this.transcriptions = [];
+            localStorage.removeItem('token');
+            
+            // Reset UI state
+            this.audioUrl = null;
+            this.audioFile = [];
+            this.segments = [];
+            this.transcriptionText = '';
+            
+            // Show notification
+            this.$buefy.toast.open({
+                message: 'Successfully logged out!',
+                type: 'is-success'
+            });
+            
+            // Redirect to home page if not already there
+            if (window.location.pathname !== '/') {
+                window.location.href = '/';
+            } else {
+                // window.location.reload();
+            }
+        },
+
+        async handleAudioUpload(event) {
+            if (!event.target.files || !event.target.files.length) return;
+
+            const file = event.target.files[0];
+            const fileUrl = URL.createObjectURL(file);
+            fileExt = file.name.split('.').splice(-1);
+            
+            this.howl = new Howl({
+                src: [fileUrl],
+                format: this.fileExt, // This should be an array
+                html5: true,
+                onend: () => {
+                    this.isPlayingSegment = false;
+                    this.activeSegment = null;
+                }
+            });
+
+            this.audioUrl = fileUrl;
+            this.audioFile = [file];
+        },
+
+        initializeAudio() {
+            if (this.howl) {
+                this.howl.unload();
+            }
+
+            const fileExt = this.audioFile[0].name.split('.').splice(-1);
+            this.howl = new Howl({
+                src: [this.audioUrl],
+                format: fileExt,
+                html5: true,
+                volume: this.volume,
+                sprite: this.createSprites(),
+                onplay: () => {
+                    this.isPlaying = true;
+                    this.startSeekUpdate();
+                },
+                onpause: () => {
+                    this.isPlaying = false;
+                    this.stopSeekUpdate();
+                },
+                onstop: () => {
+                    this.isPlaying = false;
+                    this.currentTime = 0;
+                    this.stopSeekUpdate();
+                },
+                onend: () => {
+                    this.isPlaying = false;
+                    this.currentTime = 0;
+                    this.stopSeekUpdate();
+                },
+                onload: () => {
+                    this.totalDuration = this.howl.duration();
+                    /*/ Set selection to the length of the audio file
+                    this.selection = [];
+                    for (let i = 0; i < this.totalDuration; i += this.chunkSize) {
+                        this.selection.push(i);
+                    }*/
+                }
+            });
+            // Set initial volume
+            this.updateVolume();
+        },
+
+        async initializeWaveform() {
+            if (!this.audioUrl) return;
+
+            // Load audio file and decode it
+            const response = await fetch(this.audioUrl);
+            const arrayBuffer = await response.arrayBuffer();
+            const audioContext = new AudioContext();
+            const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+            
+            // Get waveform data
+            const channelData = audioBuffer.getChannelData(0);
+            this.waveformData = this.processWaveformData(channelData);
+            
+            // Draw waveform
+            this.$nextTick(() => {
+                this.drawWaveform();
+            });
+
+            // Set initial selection to full audio
+            this.selection = [0, 100];
+        },
+
+        processWaveformData(data) {
+        const step = Math.ceil(data.length / 1000);
+        const waveform = [];
+        for (let i = 0; i < data.length; i += step) {
+            const slice = data.slice(i, i + step);
+            // Use reducer instead of spread operator for large arrays
+            const max = slice.reduce((a, b) => Math.max(a, b), -Infinity);
+            const min = slice.reduce((a, b) => Math.min(a, b), Infinity);
+            waveform.push({ max, min });
+        }
+        return waveform;
+    },
+
+        drawWaveform() {
+            if (this.$refs.waveform){
+                const canvas = document.createElement('canvas');
+                const ctx = canvas.getContext('2d');
+                const width = this.$refs.waveform.offsetWidth;
+                const height = 100;
+                
+                canvas.width = width;
+                canvas.height = height;
+                this.$refs.waveform.style.backgroundImage = `url(${canvas.toDataURL()})`;
+                
+                ctx.fillStyle = '#3273dc';
+                this.waveformData.forEach((point, i) => {
+                    const x = (i / this.waveformData.length) * width;
+                    const y = (1 - point.max) * height / 2;
+                    const h = (point.max - point.min) * height / 2;
+                    ctx.fillRect(x, y, 1, h);
+                });
+            }
+        },
+        
+        createSprites() {
+            const sprites = {};
+            this.segments.forEach((segment, index) => {
+                sprites[`segment_${index}`] = [segment.start * 1000, (segment.end - segment.start) * 1000];
+            });
+            return sprites;
+        },
+
+        togglePlay() {
+            if (this.isPlaying) {
+                this.howl.pause();
+            } else {
+                this.howl.play();
+            }
+        },
+
+        stopAudio() {
+            this.howl.stop();
+        },
+
+        updateVolume() {
+            if (this.volume <= 0) {
+                this.isMuted = true;
+                this.howl.mute(true);
+            } else if (this.isMuted && this.volume > 0) {
+                this.isMuted = false;
+                this.howl.mute(false);
+            }
+            this.howl.volume(this.volume);
+        },
+
+        toggleVolumeSlider() {
+            this.showVolumeSlider = !this.showVolumeSlider;
+        },
+
+        toggleMute() {
+            this.isMuted = !this.isMuted;
+            this.howl.mute(this.isMuted);
+            if (!this.isMuted && this.volume === 0) {
+                this.volume = 0.5;
+            }
+        },
+
+        playSegment(segment) {
+            const index = this.segments.indexOf(segment);
+            if (index !== -1) {
+                this.howl.play(`segment_${index}`);
+            }
+        },
+
+        startSeekUpdate() {
+            this.seekInterval = setInterval(() => {
+                this.currentTime = this.howl.seek() || 0;
+            }, 100);
+        },
+
+        stopSeekUpdate() {
+            clearInterval(this.seekInterval);
+        },
+
+        formatTime(seconds) {
+            const mins = Math.floor(seconds / 60);
+            const secs = Math.floor(seconds % 60);
+            return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
+        },
+
+        togglePlayPause() {
+            if (this.audioPlayer.paused) {
+                this.audioPlayer.play();
+                this.isPlaying = true;
+            } else {
+                this.audioPlayer.pause();
+                this.isPlaying = false;
+            }
+        },
+
+        playSegment(segment) {
+            if (!this.howl) return;
+
+            if (this.activeSegment === segment.id && this.isPlayingSegment) {
+                this.howl.pause();
+                this.isPlayingSegment = false;
+                return;
+            }
+
+            this.howl.seek(segment.start);
+            this.howl.play();
+            this.activeSegment = segment.id;
+            this.isPlayingSegment = true;
+
+            this.howl.once('end', () => {
+                this.isPlayingSegment = false;
+                this.activeSegment = null;
+            });
+        },
+
+        copySegmentText(text) {
+            navigator.clipboard.writeText(text).then(() => {
+                this.$buefy.toast.open({
+                    message: 'Text copied to clipboard',
+                    type: 'is-success',
+                    position: 'is-bottom-right'
+                });
+            }).catch(() => {
+                this.$buefy.toast.open({
+                    message: 'Failed to copy text',
+                    type: 'is-danger',
+                    position: 'is-bottom-right'
+                });
+            });
+        },
+
+        deleteSegment(index) {
+            this.segments.splice(index, 1);
+            this.updateTranscriptionText();
+        },
+
+        updateTranscriptionText() {
+            this.transcriptionText = this.segments
+                .map(segment => segment.text)
+                .join(' ');
+        },
+
+        formatTime(seconds) {
+            const mins = Math.floor(seconds / 60);
+            const secs = Math.floor(seconds % 60);
+            return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
+        },
+
+        async processTranscription() {
+            const formData = new FormData();
+            formData.append('file', this.audioFile[0]);
+            formData.append('response_format', this.responseFormat);
+            formData.append('temperature', this.temperature.toString());
+            formData.append('chunk_size', parseInt(this.chunkSize * 60).toString());
+            formData.append('overlap', this.overlap.toString());
+            formData.append('prompt', this.systemPrompt.toString());
+
+            // Add selection timestamps
+            const startTime = (this.selection[0] * this.totalDuration / 100).toFixed(2);
+            const endTime = (this.selection[1] * this.totalDuration / 100).toFixed(2);
+            formData.append('start_time', startTime);
+            formData.append('end_time', endTime);
+
+            if (this.selectedLanguage !== 'auto') {
+                formData.append('language', this.selectedLanguage);
+            }
+            try {
+                this.isProcessing = true;
+
+                /*/ Monitor the progress of the upload for user feedback (need to be updated for reading back response)
+                const xhr = new XMLHttpRequest();
+                xhr.upload.onloadstart = function (event) {
+                    console.log('Upload started');
+                };
+
+                xhr.upload.onprogress = function (event) {
+                    if (event.lengthComputable) {
+                        const percentComplete = (event.loaded / event.total) * 100;
+                        console.log(`Upload progress: ${percentComplete.toFixed(2)}%`);
+                    }
+                };
+                xhr.upload.onload = function () {
+                    console.log('Upload complete');
+                };
+                xhr.onerror = function () {
+                    console.error('Error uploading file');
+                };
+
+                xhr.open('POST', '/api/upload', true);
+                xhr.send(formData);*/
+
+                const response = await fetch('/api/upload', {
+                    method: 'POST',
+                    headers: {
+                        'Authorization': `Bearer ${this.token}`
+                    },
+                    body: formData
+                });
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    throw new Error(errorData.detail || 'Transcription failed');
+                }
+                const result = await response.json();
+                
+                // Check for backend validation errors
+                if (result.metadata?.errors?.length) {
+                    console.error('Chunk processing errors:', result.metadata.errors);
+                    this.$buefy.snackbar.open({
+                        message: `${result.metadata.errors.length} chunks failed to process`,
+                        type: 'is-warning',
+                        position: 'is-bottom-right'
+                    });
+                }
+                
+                if (this.responseFormat === 'verbose_json') {
+
+                    // Validate segments
+                    if (!result.segments) {
+                        throw new Error('Server returned invalid segments format');
+                    }
+
+                    this.segments = result.segments;
+                    this.updateTranscriptionText();
+                } else {
+                    this.transcriptionText = result.text || result;
+                }
+
+                // this.totalChunks = result.metadata?.total_chunks || 0;
+                // this.processingProgress = ((processedChunks / this.totalChunks) * 100).toFixed(1);
+            } catch (error) {
+                console.error('Transcription error:', error);
+                this.$buefy.toast.open({
+                    message: `Error: ${error.message}`,
+                    type: 'is-danger',
+                    position: 'is-bottom-right'
+                });
+            }
+            this.isProcessing = false;
+            this.showPlayer = true;
+        },
+
+        async loadTranscriptions() {
+            try {
+                // Check if token exists
+                if (!this.token) {
+                    this.token = localStorage.getItem('token');
+                    if (!this.token) {
+                        // console.log('No authentication token found');
+                        return;
+                    }
+                }
+                
+                const response = await fetch('/api/transcriptions', {
+                    headers: {
+                        'Authorization': `Bearer ${this.token}`
+                    }
+                });
+                
+                if (response.status === 401) {
+                    // Token expired or invalid
+                    console.log('Authentication token expired or invalid');
+                    this.logout();
+                    this.$buefy.toast.open({
+                        message: 'Your session has expired. Please login again.',
+                        type: 'is-warning'
+                    });
+                    return;
+                }
+                
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+                
+                this.transcriptions = await response.json();
+            } catch (error) {
+                console.error('Error loading transcriptions:', error);
+                this.$buefy.toast.open({
+                    message: `Failed to load transcriptions: ${error.message}`,
+                    type: 'is-danger'
+                });
+            }
+        },
+
+        async loadTranscription(transcription) {
+            try {
+                const response = await fetch(`/api/transcriptions/${transcription.id}`, {
+                    headers: {
+                        'Authorization': `Bearer ${this.token}`
+                    }
+                });
+                const data = await response.json();
+                    // Set the audio file for playback
+                this.transcriptionText = data['text'];
+                this.segments = data['segments'];
+                // this.audioFile = data['audio_file'];
+                if (data.audio_file) {
+                    // this.audioUrl = `/uploads/${data['audio_file']}`;
+                    // this.audioFile.push(data['audio_file']);
+                    // this.initializeAudio();
+                }
+            } catch (error) {
+                console.error('Error loading transcription:', error);
+            }
+        },
+
+        async saveTranscription() {
+            if (this.audioFile.length == 0){
+                this.$buefy.toast.open({
+                    message: 'Please upload an audio file first',
+                    type: 'is-warning',
+                    position: 'is-bottom-right'
+                });
+                return;
+            }
+            try {
+                this.isProcessing = true;
+                const response = await fetch('/api/save-transcription', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Authorization': `Bearer ${this.token}`
+                    },
+                    body: JSON.stringify({
+                        text: this.transcriptionText,
+                        segments: this.segments,
+                        audio_file: this.audioFile[0].name
+                    })
+                });
+                
+                if (!response.ok) throw new Error('Failed to save transcription');
+                
+                await this.loadTranscriptions();
+                this.$buefy.toast.open({
+                    message: 'Transcription saved successfully',
+                    type: 'is-success',
+                    position: 'is-bottom-right'
+                });
+            } catch (error) {
+                console.error('Error saving transcription:', error);
+                this.$buefy.toast.open({
+                    message: `Error: ${error.message}`,
+                    type: 'is-danger',
+                    position: 'is-bottom-right'
+                });
+            }
+            this.isProcessing = false;
+        },
+
+        toggleSidebar() {
+            this.showSidebar = !this.showSidebar;
+        },
+        
+        togglePlayer() {
+            this.showPlayer = !this.showPlayer;
+        },
+
+        async deleteTranscription(id) {
+            try {
+                // Show confirmation dialog
+                this.$buefy.dialog.confirm({
+                    title: 'Delete Transcription',
+                    message: 'Are you sure you want to delete this transcription? This action cannot be undone.',
+                    confirmText: 'Delete',
+                    type: 'is-danger',
+                    hasIcon: true,
+                    onConfirm: async () => {
+                        const response = await fetch(`/api/transcriptions/${id}`, {
+                            method: 'DELETE',
+                            headers: {
+                                'Authorization': `Bearer ${this.token}`
+                            }
+                        });
+                        
+                        if (!response.ok) throw new Error('Failed to delete transcription');
+                        
+                        // Remove from local list
+                        this.transcriptions = this.transcriptions.filter(t => t.id !== id);
+                        
+                        // Show success message
+                        this.$buefy.toast.open({
+                            message: 'Transcription deleted successfully',
+                            type: 'is-success',
+                            position: 'is-bottom-right'
+                        });
+                    }
+                });
+            } catch (error) {
+                console.error('Error deleting transcription:', error);
+                this.$buefy.toast.open({
+                    message: `Error: ${error.message}`,
+                    type: 'is-danger',
+                    position: 'is-bottom-right'
+                });
+            }
+        },
+
+        async handleLogin() {
+            try {
+                this.isLoading = true;
+                const formData = new FormData();
+                formData.append('username', this.loginForm.username);  // Make sure this matches the backend expectation
+                formData.append('password', this.loginForm.password);
+
+                const response = await fetch('/token', {
+                    method: 'POST',
+                    body: formData
+                });
+
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    throw new Error(errorData.detail || 'Login failed');
+                }
+
+                const data = await response.json();
+                this.token = data.access_token;
+                localStorage.setItem('token', data.access_token);
+                
+                // Get user info
+                const userResponse = await fetch('/api/me', {
+                    headers: {
+                        'Authorization': `Bearer ${this.token}`
+                    }
+                });
+                
+                if (!userResponse.ok) {
+                    throw new Error('Failed to get user information');
+                }
+                
+                const userData = await userResponse.json();
+                this.username = userData.username;
+                this.isAuthenticated = true;
+                
+                this.showLoginModal = false;
+                this.$buefy.toast.open({
+                    message: 'Successfully logged in!',
+                    type: 'is-success'
+                });
+                
+                // Load user data after successful login
+                this.loadTranscriptions();
+            } catch (error) {
+                this.$buefy.toast.open({
+                    message: `Error: ${error.message}`,
+                    type: 'is-danger'
+                });
+            } finally {
+                this.isLoading = false;
+            }
+        },
+
+        async handleSignup() {
+            try {
+                this.isLoading = true;
+                if (this.signupForm.password !== this.signupForm.confirmPassword) {
+                    throw new Error('Passwords do not match');
+                }
+
+                const response = await fetch('/api/signup', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        username: this.signupForm.username,
+                        email: this.signupForm.email,
+                        password: this.signupForm.password
+                    })
+                });
+
+                if (!response.ok) {
+                    const error = await response.json();
+                    throw new Error(error.detail || 'Signup failed');
+                }
+
+                this.showSignupModal = false;
+                this.$buefy.toast.open({
+                    message: 'Account created successfully! Please login.',
+                    type: 'is-success'
+                });
+                
+                // Clear form
+                this.signupForm = {
+                    username: '',
+                    email: '',
+                    password: '',
+                    confirmPassword: ''
+                };
+                
+                // Show login modal
+                this.showLoginModal = true;
+            } catch (error) {
+                this.$buefy.toast.open({
+                    message: `Error: ${error.message}`,
+                    type: 'is-danger'
+                });
+            } finally {
+                this.isLoading = false;
+            }
+        },
+
+        async checkAuth() {
+            const token = localStorage.getItem('token');
+            if (token) {
+                try {
+                    this.token = token;
+                    const response = await fetch('/api/me', {
+                        headers: {
+                            'Authorization': `Bearer ${token}`
+                        }
+                    });
+                    
+                    if (response.ok) {
+                        const userData = await response.json();
+                        this.username = userData.username;
+                        this.isAuthenticated = true;
+                        this.isAdmin = userData.is_admin;
+                        this.currentUser = userData;
+                        
+                        // If user is admin, load users list
+                        if (this.isAdmin) {
+                            this.loadUsers();
+                        }
+                    } else {
+                        // Token invalid or expired
+                        this.logout();
+                    }
+                } catch (error) {
+                    console.error('Auth check failed:', error);
+                    this.logout();
+                }
+            }
+        },
+
+        async loadUsers() {
+            if (!this.isAdmin) return;
+            
+            try {
+                this.loadingUsers = true;
+                const response = await fetch('/api/users', {
+                    headers: {
+                        'Authorization': `Bearer ${this.token}`
+                    }
+                });
+                
+                if (!response.ok) {
+                    throw new Error('Failed to load users');
+                }
+                
+                this.users = await response.json();
+            } catch (error) {
+                console.error('Error loading users:', error);
+                this.$buefy.toast.open({
+                    message: `Error: ${error.message}`,
+                    type: 'is-danger'
+                });
+            } finally {
+                this.loadingUsers = false;
+            }
+        },
+        
+        async toggleUserStatus(user) {
+            try {
+                // Don't allow admins to disable themselves
+                if (user.is_admin && user.id === this.currentUser.id && !user.disabled) {
+                    this.$buefy.toast.open({
+                        message: 'Admins cannot disable their own accounts',
+                        type: 'is-warning'
+                    });
+                    return;
+                }
+                
+                const action = user.disabled ? 'enable' : 'disable';
+                const response = await fetch(`/api/users/${user.id}/${action}`, {
+                    method: 'PUT',
+                    headers: {
+                        'Authorization': `Bearer ${this.token}`,
+                        'Content-Type': 'application/json'
+                    }
+                });
+                
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    throw new Error(errorData.detail || `Failed to ${action} user`);
+                }
+                
+                // Update local user data
+                user.disabled = !user.disabled;
+                
+                this.$buefy.toast.open({
+                    message: `User ${user.username} ${action}d successfully`,
+                    type: 'is-success'
+                });
+            } catch (error) {
+                console.error(`Error ${user.disabled ? 'enabling' : 'disabling'} user:`, error);
+                this.$buefy.toast.open({
+                    message: `Error: ${error.message}`,
+                    type: 'is-danger'
+                });
+            }
+        },
+       
+        async deleteUser(user) {
+            try {
+                // Don't allow admins to delete themselves
+                if (user.id === this.currentUser.id) {
+                    this.$buefy.toast.open({
+                        message: 'You cannot delete your own account',
+                        type: 'is-warning'
+                    });
+                    return;
+                }
+                
+                // Show confirmation dialog
+                this.$buefy.dialog.confirm({
+                    title: 'Delete User',
+                    message: `Are you sure you want to delete user "${user.username}"? This action cannot be undone.`,
+                    confirmText: 'Delete',
+                    type: 'is-danger',
+                    hasIcon: true,
+                    onConfirm: async () => {
+                        const response = await fetch(`/api/users/${user.id}`, {
+                            method: 'DELETE',
+                            headers: {
+                                'Authorization': `Bearer ${this.token}`
+                            }
+                        });
+                        
+                        if (!response.ok) {
+                            const errorData = await response.json();
+                            throw new Error(errorData.detail || 'Failed to delete user');
+                        }
+                        
+                        // Remove from local list
+                        this.users = this.users.filter(u => u.id !== user.id);
+                        
+                        this.$buefy.toast.open({
+                            message: `User ${user.username} deleted successfully`,
+                            type: 'is-success'
+                        });
+                    }
+                });
+            } catch (error) {
+                console.error('Error deleting user:', error);
+                this.$buefy.toast.open({
+                    message: `Error: ${error.message}`,
+                    type: 'is-danger'
+                });
+            }
+        },
+
+        refreshUsers() {
+            this.loadUsers();
+        },
+        
+        showResumeUploadModal() {
+            this.showUploadModal = true;
+            this.showAudioFilesModal = false;
+        },
+        
+        closeUploadModal() {
+            if (this.uploadInProgress && !this.uploadPaused) {
+                this.$buefy.dialog.confirm({
+                    title: 'Cancel Upload?',
+                    message: 'Upload is in progress. Are you sure you want to cancel?',
+                    confirmText: 'Yes, Cancel Upload',
+                    cancelText: 'No, Continue Upload',
+                    type: 'is-danger',
+                    onConfirm: () => {
+                        this.cancelUpload();
+                        this.showUploadModal = false;
+                    }
+                });
+            } else {
+                this.showUploadModal = false;
+            }
+        },
+        
+        generateUUID() {
+            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+                var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+                return v.toString(16);
+            });
+        },
+
+        prepareChunkedUpload() {
+            setTimeout(() => {
+                if (!this.resumableFile) return;                
+                this.uploadId = this.generateUUID();            
+                this.totalChunks = Math.ceil(this.resumableFile.size / this.chunkUploadSize);
+                this.currentChunkIndex = 0;
+                this.uploadProgress = 0;
+                this.uploadPaused = false;
+            }, 1500);            
+        },
+        
+        async startChunkedUpload() {
+            if (!this.resumableFile || this.uploadInProgress) return;
+            
+            this.uploadInProgress = true;
+            this.uploadPaused = false;
+            this.uploadStartTime = Date.now();
+            this.lastUploadTime = Date.now();
+            this.lastUploadedBytes = 0;
+            this.uploadSpeed = null;
+            this.estimatedTimeRemaining = null;
+            
+            await this.uploadNextChunk();
+        },
+        
+        async uploadNextChunk() {
+            if (this.uploadPaused || !this.uploadInProgress) return;
+            
+            if (this.currentChunkIndex >= this.totalChunks) {
+                // All chunks uploaded, finalize the upload
+                await this.finalizeUpload();
+                return;
+            }
+            
+            const start = this.currentChunkIndex * this.chunkUploadSize;
+            const end = Math.min(start + this.chunkUploadSize, this.resumableFile.size);
+            const chunk = this.resumableFile.slice(start, end);
+            
+            const formData = new FormData();
+            formData.append('file', chunk, this.resumableFile.name);
+            formData.append('upload_id', this.uploadId);
+            formData.append('offset', start);
+            formData.append('total_size', this.resumableFile.size);
+            
+            try {
+                const response = await fetch('/api/upload-audio-chunk', {
+                    method: 'POST',
+                    body: formData,
+                    headers: {
+                        'Authorization': `Bearer ${localStorage.getItem('token')}`
+                    }
+                });
+                
+                if (!response.ok) {
+                    throw new Error('Upload failed');
+                }
+                
+                this.currentChunkIndex++;
+                this.uploadProgress = (this.currentChunkIndex / this.totalChunks) * 100;
+                
+                // Calculate upload speed and estimated time
+                const now = Date.now();
+                const uploadedBytes = this.currentChunkIndex * this.chunkUploadSize;
+                const timeDiff = (now - this.lastUploadTime) / 1000; // in seconds
+                
+                if (timeDiff > 0) {
+                    const bytesDiff = uploadedBytes - this.lastUploadedBytes;
+                    this.uploadSpeed = Math.round((bytesDiff / 1024) / timeDiff); // KB/s
+                    
+                    const remainingBytes = this.resumableFile.size - uploadedBytes;
+                    if (this.uploadSpeed > 0) {
+                        const secondsRemaining = Math.ceil(remainingBytes / 1024 / this.uploadSpeed);
+                        this.estimatedTimeRemaining = this.formatTimeRemaining(secondsRemaining);
+                    }
+                    
+                    this.lastUploadTime = now;
+                    this.lastUploadedBytes = uploadedBytes;
+                }
+                
+                // Continue with next chunk
+                if (!this.uploadPaused) {
+                    await this.uploadNextChunk();
+                }
+            } catch (error) {
+                console.error('Error uploading chunk:', error);
+                this.$buefy.toast.open({
+                    message: 'Upload error: ' + error.message,
+                    type: 'is-danger'
+                });
+                this.uploadPaused = true;
+            }
+        },
+
+        formatTimeRemaining(seconds) {
+            if (seconds < 60) {
+                return `${seconds} sec`;
+            } else if (seconds < 3600) {
+                const minutes = Math.floor(seconds / 60);
+                const remainingSeconds = seconds % 60;
+                return `${minutes} min ${remainingSeconds} sec`;
+            } else {
+                const hours = Math.floor(seconds / 3600);
+                const minutes = Math.floor((seconds % 3600) / 60);
+                return `${hours} hr ${minutes} min`;
+            }
+        },
+        
+        pauseUpload() {
+            this.uploadPaused = true;
+        },
+        
+        async resumeUpload() {
+            this.uploadPaused = false;
+            await this.uploadNextChunk();
+        },
+        
+        async cancelUpload() {
+            if (!this.uploadId) return;
+            
+            try {
+                await fetch('/api/cancel-audio-upload', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Authorization': `Bearer ${localStorage.getItem('token')}`
+                    },
+                    body: JSON.stringify({ upload_id: this.uploadId })
+                });
+            } catch (error) {
+                console.error('Error canceling upload:', error);
+            }
+            
+            this.uploadInProgress = false;
+            this.uploadPaused = false;
+            this.uploadProgress = 0;
+            this.currentChunkIndex = 0;
+        },
+        
+        async finalizeUpload() {
+            try {
+                // Check if uploadId exists
+                if (!this.uploadId) {
+                    throw new Error('Upload ID is missing');
+                }
+                
+                const response = await fetch('/api/finalize-audio-upload', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Authorization': `Bearer ${localStorage.getItem('token')}`
+                    },
+                    body: JSON.stringify({ 
+                        upload_id: this.uploadId 
+                    })
+                });
+                
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    throw new Error(errorData.detail || 'Failed to finalize upload');
+                }
+                
+                const result = await response.json();
+                
+                // Set the audio file and URL
+                // this.audioFile = [{ name: result.filename }];
+                // this.audioUrl = `/uploads/${result.filename}`;
+                
+                // Reload the audio files list
+                await this.loadUploadedAudioFiles();
+                
+                this.$buefy.toast.open({
+                    message: 'Upload completed successfully!',
+                    type: 'is-success'
+                });
+                
+                this.uploadInProgress = false;
+                this.showUploadModal = false;
+            } catch (error) {
+                console.error('Error finalizing upload:', error);
+                this.$buefy.toast.open({
+                    message: 'Error finalizing upload: ' + error.message,
+                    type: 'is-danger'
+                });
+                this.uploadPaused = true;
+            }
+        },
+        async loadUploadedAudioFiles() {
+            try {
+                this.loadingAudioFiles = true;
+                const response = await fetch('/api/audio-files', {
+                    headers: {
+                        'Authorization': `Bearer ${this.token}`
+                    }
+                });
+                
+                if (!response.ok) {
+                    throw new Error('Failed to load audio files');
+                }
+                
+                this.uploadedAudioFiles = await response.json();
+            } catch (error) {
+                console.error('Error loading audio files:', error);
+                this.$buefy.toast.open({
+                    message: `Error: ${error.message}`,
+                    type: 'is-danger'
+                });
+            } finally {
+                this.loadingAudioFiles = false;
+            }
+        },
+        formatFileSize(bytes) {
+            if (bytes === 0) return '0 Bytes';
+            
+            const k = 1024;
+            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+            const i = Math.floor(Math.log(bytes) / Math.log(k));
+            
+            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+        },
+        showAudioFilesList() {
+            this.showAudioFilesModal = true;
+            this.loadUploadedAudioFiles();
+        },
+        
+        async deleteAudioFile(file) {
+            try {
+                this.$buefy.dialog.confirm({
+                    title: 'Delete Audio File',
+                    message: `Are you sure you want to delete "${file.filename}"? This action cannot be undone.`,
+                    confirmText: 'Delete',
+                    type: 'is-danger',
+                    hasIcon: true,
+                    onConfirm: async () => {
+                        const response = await fetch(`/api/audio-files/${file.filename}`, {
+                            method: 'DELETE',
+                            headers: {
+                                'Authorization': `Bearer ${this.token}`
+                            }
+                        });
+                        
+                        if (!response.ok) {
+                            throw new Error('Failed to delete audio file');
+                        }
+                        
+                        // Remove from local list
+                        this.uploadedAudioFiles = this.uploadedAudioFiles.filter(f => f.filename !== file.filename);
+                        
+                        this.$buefy.toast.open({
+                            message: 'Audio file deleted successfully',
+                            type: 'is-success'
+                        });
+                    }
+                });
+            } catch (error) {
+                console.error('Error deleting audio file:', error);
+                this.$buefy.toast.open({
+                    message: `Error: ${error.message}`,
+                    type: 'is-danger'
+                });
+            }
+        },
+
+        async selectAudioFile(file) {
+            try {
+                // Fetch the file from the server to create a proper File object
+                const response = await fetch(`/uploads/${file.filename}`);
+                const blob = await response.blob();
+                
+                // Create a File object from the blob
+                const fileObj = new File([blob], file.filename, { 
+                    type: blob.type || 'audio/mpeg' 
+                });
+                
+                // Set the audio file and URL
+                this.audioFile = [fileObj];
+                this.audioUrl = `/uploads/${file.filename}`;
+                
+                // Initialize audio player with the selected file
+                this.initializeAudio();
+                this.initializeWaveform();
+                
+                // Close the audio files modal
+                this.showAudioFilesModal = false;
+                
+                this.$buefy.toast.open({
+                    message: `Selected audio file: ${file.filename}`,
+                    type: 'is-success'
+                });
+            } catch (error) {
+                console.error('Error selecting audio file:', error);
+                this.$buefy.toast.open({
+                    message: `Error selecting file: ${error.message}`,
+                    type: 'is-danger'
+                });
+            }
+        }        
+    }, // methods
+    // Computed properties
+    computed: {
+        filteredUsers() {
+            if (!this.userSearchQuery) {
+                return this.users;
+            }
+            
+            const query = this.userSearchQuery.toLowerCase();
+            return this.users.filter(user => 
+                user.username.toLowerCase().includes(query) || 
+                user.email.toLowerCase().includes(query)
+            );
+        },
+        filteredAudioFiles() {
+            if (!this.audioFileSearchQuery) {
+                return this.uploadedAudioFiles;
+            }
+            
+            const query = this.audioFileSearchQuery.toLowerCase();
+            return this.uploadedAudioFiles.filter(file => 
+                file.filename.toLowerCase().includes(query)
+            );
+        }
+    },
+    mounted() {
+        this.checkAuth();
+        this.loadTranscriptions();
+        if (this.isAuthenticated) {
+            this.loadUploadedAudioFiles();
+        }
+    },
+    watch: {
+        audioUrl() {
+            if (this.audioUrl) {
+                this.initializeAudio();
+                this.initializeWaveform();
+            }
+        },
+        showAdminPanel(newVal) {
+            if (newVal && this.isAdmin) {
+                this.loadUsers();
+            }
+        },
+        isAuthenticated(newVal) {
+            if (newVal) {
+                this.loadUploadedAudioFiles();
+            }
+        }
+    },
+    beforeUnmount() {
+        if (this.howl) {
+            this.howl.unload();
+        }
+        this.stopSeekUpdate();
+    }
+});
+
+app.use(Buefy.default);
+app.mount('#app');