Private-AI

Running

App Files Files Community

seawolf2357 commited on 19 days ago

Commit

3d61f7a

verified ·

1 Parent(s): a5cf5de

Update app.py

Browse files

Files changed (1) hide show

app.py +138 -165

app.py CHANGED Viewed

@@ -666,12 +666,12 @@ HTML_CONTENT = """<!DOCTYPE html>
         </div>
         <div class="tabs-container">
-            <button class="tab-button active" onclick="switchTab(event, 'voice-chat')">음성 채팅</button>
-            <button class="tab-button" onclick="switchTab(event, 'mic-whisper')">마이크 전사</button>
-            <button class="tab-button" onclick="switchTab(event, 'audio-whisper')">오디오 파일</button>
-            <button class="tab-button" onclick="switchTab(event, 'video-whisper')">비디오 파일</button>
-            <button class="tab-button" onclick="switchTab(event, 'pdf-whisper')">PDF 번역</button>
-            <button class="tab-button" onclick="switchTab(event, 'realtime-whisper')">실시간 통역</button>
         </div>
         <!-- Voice Chat Tab (Original) -->
@@ -859,48 +859,49 @@ HTML_CONTENT = """<!DOCTYPE html>
     <audio id="audio-output"></audio>
     <script>
-        // Tab switching functionality
-        function switchTab(event, tabName) {
-            // Prevent default button behavior
-            event.preventDefault();
             // Hide all tabs
-            const tabs = document.querySelectorAll('.tab-content');
-            tabs.forEach(tab => {
-                tab.classList.remove('active');
                 tab.style.display = 'none';
             });
-            // Remove active class from all buttons
-            const buttons = document.querySelectorAll('.tab-button');
-            buttons.forEach(btn => btn.classList.remove('active'));
             // Show selected tab
             const selectedTab = document.getElementById(tabName);
             if (selectedTab) {
-                selectedTab.classList.add('active');
                 selectedTab.style.display = 'flex';
             }
-            // Add active class to clicked button
-            if (event.target) {
-                event.target.classList.add('active');
-            }
         }
-        // Original voice chat variables and functions
-        let peerConnection;
-        let webrtc_id;
         let webSearchEnabled = false;
         let selectedLanguage = "";
         let systemPrompt = "You are a helpful assistant. Respond in a friendly and professional manner.";
         let audioLevel = 0;
-        let animationFrame;
-        let audioContext, analyser, audioSource;
         let dataChannel = null;
         let isVoiceActive = false;
-        // Whisper-related variables
         let micRecorder = null;
         let isRecording = false;
         let realtimeRecorder = null;
@@ -1069,7 +1070,7 @@ HTML_CONTENT = """<!DOCTYPE html>
         async function setupWebRTC() {
             const audioOutput = document.getElementById('audio-output');
-            const config = __RTC_CONFIGURATION__;
             peerConnection = new RTCPeerConnection(config);
             const timeoutId = setTimeout(() => {
                 const toast = document.getElementById('error-toast');
@@ -1271,6 +1272,39 @@ HTML_CONTENT = """<!DOCTYPE html>
         // Whisper Tab Functions
         // Process audio blob (for microphone recording)
         async function processAudioBlob(blob, type) {
             const formData = new FormData();
@@ -1499,180 +1533,119 @@ HTML_CONTENT = """<!DOCTYPE html>
             processor.connect(audioContext.destination);
         }
-        // Initialize on page load
-        window.addEventListener('DOMContentLoaded', () => {
-            console.log('DOM loaded, initializing...');
-            // Initialize voice chat tab elements
-            initializeVoiceChatTab();
-            // Initialize tab functionality
-            initializeTabs();
-            // Initialize Whisper tabs
-            initializeWhisperTabs();
-        });
-        function initializeVoiceChatTab() {
-            // Initialize send button
-            const sendBtn = document.getElementById('send-button');
-            if (sendBtn) {
-                sendBtn.style.display = 'block';
-                sendBtn.addEventListener('click', sendTextMessage);
-                console.log('Send button initialized');
-            }
-            // Text input handling
-            const textInputEl = document.getElementById('text-input');
-            if (textInputEl) {
-                textInputEl.addEventListener('keypress', (e) => {
-                    if (e.key === 'Enter' && !e.shiftKey) {
-                        e.preventDefault();
-                        sendTextMessage();
-                    }
-                });
-                console.log('Text input initialized');
-            }
             // Web search toggle
-            const searchToggleBtn = document.getElementById('search-toggle');
-            if (searchToggleBtn) {
-                searchToggleBtn.addEventListener('click', function() {
-                    webSearchEnabled = !webSearchEnabled;
-                    this.classList.toggle('active', webSearchEnabled);
-                    console.log('Web search toggled:', webSearchEnabled);
-                });
-                console.log('Search toggle initialized');
-            }
-            // Language selection
-            const languageSelectEl = document.getElementById('language-select');
-            if (languageSelectEl) {
-                languageSelectEl.addEventListener('change', function() {
-                    selectedLanguage = this.value;
-                    console.log('Language selected:', selectedLanguage);
-                });
-                console.log('Language select initialized');
-            }
             // System prompt
-            const systemPromptEl = document.getElementById('system-prompt');
-            if (systemPromptEl) {
-                systemPromptEl.addEventListener('input', function() {
-                    systemPrompt = this.value || "You are a helpful assistant. Respond in a friendly and professional manner.";
-                });
-                console.log('System prompt initialized');
-            }
-            // Start button
-            const startBtn = document.getElementById('start-button');
-            if (startBtn) {
-                startBtn.addEventListener('click', () => {
-                    console.log('Start button clicked');
-                    if (!peerConnection || peerConnection.connectionState !== 'connected') {
-                        setupWebRTC();
-                    } else {
-                        stop();
-                    }
-                });
-                console.log('Start button initialized');
-            }
-        }
-        function initializeTabs() {
-            // Ensure first tab is visible
-            const firstTab = document.getElementById('voice-chat');
-            if (firstTab) {
-                firstTab.style.display = 'flex';
-                firstTab.classList.add('active');
-                console.log('First tab made visible');
-            }
-            // Add click handlers to all tab buttons
-            const tabButtons = document.querySelectorAll('.tab-button');
-            tabButtons.forEach(button => {
-                button.addEventListener('click', function(e) {
-                    const tabName = this.getAttribute('onclick').match(/'([^']+)'/)[1];
-                    switchTab(e, tabName);
-                });
-            });
-            console.log('Tab buttons initialized:', tabButtons.length);
-        }
-        function initializeWhisperTabs() {
-            // Initialize file upload areas and other Whisper functionality
-            console.log('Initializing Whisper tabs...');
-            // File upload handlers
             const audioUploadArea = document.getElementById('audio-upload-area');
             if (audioUploadArea) {
-                audioUploadArea.addEventListener('click', () => {
                     document.getElementById('audio-file-input').click();
-                });
             }
             const videoUploadArea = document.getElementById('video-upload-area');
             if (videoUploadArea) {
-                videoUploadArea.addEventListener('click', () => {
                     document.getElementById('video-file-input').click();
-                });
             }
             const pdfUploadArea = document.getElementById('pdf-upload-area');
             if (pdfUploadArea) {
-                pdfUploadArea.addEventListener('click', () => {
                     document.getElementById('pdf-file-input').click();
-                });
             }
-            // Drag and drop handlers
-            ['audio', 'video', 'pdf'].forEach(type => {
-                const area = document.getElementById(`${type}-upload-area`);
-                if (!area) return;
-                area.addEventListener('dragover', (e) => {
-                    e.preventDefault();
-                    area.classList.add('drag-over');
-                });
-                area.addEventListener('dragleave', () => {
-                    area.classList.remove('drag-over');
-                });
-                area.addEventListener('drop', (e) => {
-                    e.preventDefault();
-                    area.classList.remove('drag-over');
-                    const file = e.dataTransfer.files[0];
-                    if (file) {
-                        if (type === 'audio') processAudioFile(file);
-                        else if (type === 'video') processVideoFile(file);
-                        else if (type === 'pdf') processPDFFile(file);
-                    }
-                });
-            });
-            // File input change handlers
             const audioFileInput = document.getElementById('audio-file-input');
             if (audioFileInput) {
-                audioFileInput.addEventListener('change', (e) => {
                     if (e.target.files[0]) processAudioFile(e.target.files[0]);
-                });
             }
             const videoFileInput = document.getElementById('video-file-input');
             if (videoFileInput) {
-                videoFileInput.addEventListener('change', (e) => {
                     if (e.target.files[0]) processVideoFile(e.target.files[0]);
-                });
             }
             const pdfFileInput = document.getElementById('pdf-file-input');
             if (pdfFileInput) {
-                pdfFileInput.addEventListener('change', (e) => {
                     if (e.target.files[0]) processPDFFile(e.target.files[0]);
-                });
             }
-        }
     </script>
 </body>

         </div>
         <div class="tabs-container">
+            <button class="tab-button active" onclick="switchTab('voice-chat')">음성 채팅</button>
+            <button class="tab-button" onclick="switchTab('mic-whisper')">마이크 전사</button>
+            <button class="tab-button" onclick="switchTab('audio-whisper')">오디오 파일</button>
+            <button class="tab-button" onclick="switchTab('video-whisper')">비디오 파일</button>
+            <button class="tab-button" onclick="switchTab('pdf-whisper')">PDF 번역</button>
+            <button class="tab-button" onclick="switchTab('realtime-whisper')">실시간 통역</button>
         </div>
         <!-- Voice Chat Tab (Original) -->
     <audio id="audio-output"></audio>
     <script>
+        // Tab switching functionality - 맨 앞에 배치
+        function switchTab(tabName) {
+            console.log('Switching to tab:', tabName);
             // Hide all tabs
+            document.querySelectorAll('.tab-content').forEach(tab => {
                 tab.style.display = 'none';
+                tab.classList.remove('active');
             });
+            console.log('All initialized!');
+            // Remove active from all buttons
+            document.querySelectorAll('.tab-button').forEach(btn => {
+                btn.classList.remove('active');
+            });
             // Show selected tab
             const selectedTab = document.getElementById(tabName);
             if (selectedTab) {
                 selectedTab.style.display = 'flex';
+                selectedTab.classList.add('active');
             }
+            // Mark button as active
+            event.target.classList.add('active');
         }
+        // Global variables
+        let peerConnection = null;
+        let webrtc_id = null;
         let webSearchEnabled = false;
         let selectedLanguage = "";
         let systemPrompt = "You are a helpful assistant. Respond in a friendly and professional manner.";
         let audioLevel = 0;
+        let animationFrame = null;
+        let audioContext = null;
+        let analyser = null;
+        let audioSource = null;
         let dataChannel = null;
         let isVoiceActive = false;
+        // Whisper variables
         let micRecorder = null;
         let isRecording = false;
         let realtimeRecorder = null;
         async function setupWebRTC() {
             const audioOutput = document.getElementById('audio-output');
+            const config = typeof __RTC_CONFIGURATION__ !== 'undefined' ? __RTC_CONFIGURATION__ : {iceServers: [{urls: 'stun:stun.l.google.com:19302'}]};
             peerConnection = new RTCPeerConnection(config);
             const timeoutId = setTimeout(() => {
                 const toast = document.getElementById('error-toast');
         // Whisper Tab Functions
+        // Microphone recording
+        async function toggleMicRecording() {
+            const btn = document.getElementById('mic-record-btn');
+            const status = document.getElementById('mic-status');
+            if (!isRecording) {
+                try {
+                    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+                    micRecorder = new MediaRecorder(stream);
+                    const chunks = [];
+                    micRecorder.ondataavailable = (e) => chunks.push(e.data);
+                    micRecorder.onstop = async () => {
+                        const blob = new Blob(chunks, { type: 'audio/webm' });
+                        await processAudioBlob(blob, 'mic');
+                        stream.getTracks().forEach(track => track.stop());
+                    };
+                    micRecorder.start();
+                    isRecording = true;
+                    btn.textContent = '녹음 중지';
+                    status.innerHTML = '<div class="recording-indicator"><div class="recording-dot"></div>녹음 중...</div>';
+                } catch (err) {
+                    showError('마이크 접근 권한이 필요합니다.');
+                }
+            } else {
+                micRecorder.stop();
+                isRecording = false;
+                btn.textContent = '녹음 시작';
+                status.textContent = '처리 중...';
+            }
+        }
         // Process audio blob (for microphone recording)
         async function processAudioBlob(blob, type) {
             const formData = new FormData();
             processor.connect(audioContext.destination);
         }
+        // Simple initialization
+        window.onload = function() {
+            console.log('Page loaded!');
             // Web search toggle
+            document.getElementById('search-toggle').onclick = function() {
+                webSearchEnabled = !webSearchEnabled;
+                this.classList.toggle('active', webSearchEnabled);
+                console.log('Web search:', webSearchEnabled);
+            };
+            // Language select
+            document.getElementById('language-select').onchange = function() {
+                selectedLanguage = this.value;
+                console.log('Language:', selectedLanguage);
+            };
             // System prompt
+            document.getElementById('system-prompt').oninput = function() {
+                systemPrompt = this.value || "You are a helpful assistant. Respond in a friendly and professional manner.";
+            };
+            // Text input enter key
+            document.getElementById('text-input').onkeypress = function(e) {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    sendTextMessage();
+                }
+            };
+            // Send button
+            document.getElementById('send-button').onclick = sendTextMessage;
+            document.getElementById('send-button').style.display = 'block';
+            // Start button
+            document.getElementById('start-button').onclick = function() {
+                if (!peerConnection || peerConnection.connectionState !== 'connected') {
+                    setupWebRTC();
+                } else {
+                    stop();
+                }
+            };
+            // File upload areas
             const audioUploadArea = document.getElementById('audio-upload-area');
             if (audioUploadArea) {
+                audioUploadArea.onclick = function() {
                     document.getElementById('audio-file-input').click();
+                };
             }
             const videoUploadArea = document.getElementById('video-upload-area');
             if (videoUploadArea) {
+                videoUploadArea.onclick = function() {
                     document.getElementById('video-file-input').click();
+                };
             }
             const pdfUploadArea = document.getElementById('pdf-upload-area');
             if (pdfUploadArea) {
+                pdfUploadArea.onclick = function() {
                     document.getElementById('pdf-file-input').click();
+                };
             }
+            // File input handlers
             const audioFileInput = document.getElementById('audio-file-input');
             if (audioFileInput) {
+                audioFileInput.onchange = function(e) {
                     if (e.target.files[0]) processAudioFile(e.target.files[0]);
+                };
             }
             const videoFileInput = document.getElementById('video-file-input');
             if (videoFileInput) {
+                videoFileInput.onchange = function(e) {
                     if (e.target.files[0]) processVideoFile(e.target.files[0]);
+                };
             }
             const pdfFileInput = document.getElementById('pdf-file-input');
             if (pdfFileInput) {
+                pdfFileInput.onchange = function(e) {
                     if (e.target.files[0]) processPDFFile(e.target.files[0]);
+                };
             }
+            // Drag and drop handlers
+            ['audio', 'video', 'pdf'].forEach(type => {
+                const area = document.getElementById(`${type}-upload-area`);
+                if (area) {
+                    area.ondragover = function(e) {
+                        e.preventDefault();
+                        area.classList.add('drag-over');
+                    };
+                    area.ondragleave = function() {
+                        area.classList.remove('drag-over');
+                    };
+                    area.ondrop = function(e) {
+                        e.preventDefault();
+                        area.classList.remove('drag-over');
+                        const file = e.dataTransfer.files[0];
+                        if (file) {
+                            if (type === 'audio') processAudioFile(file);
+                            else if (type === 'video') processVideoFile(file);
+                            else if (type === 'pdf') processPDFFile(file);
+                        }
+                    };
+                }
+            });
+        };
     </script>
 </body>