Private-AI

Running

App Files Files Community

seawolf2357 commited on 22 days ago

Commit

a5cf5de

verified ·

1 Parent(s): db999b8

Update app.py

Browse files

Files changed (1) hide show

app.py +198 -141

app.py CHANGED Viewed

@@ -167,10 +167,10 @@ HTML_CONTENT = """<!DOCTYPE html>
             display: none;
             flex-grow: 1;
             overflow: hidden;
         }
         .tab-content.active {
             display: flex;
-            flex-direction: column;
         }
         .main-content {
             display: flex;
@@ -861,19 +861,31 @@ HTML_CONTENT = """<!DOCTYPE html>
     <script>
         // Tab switching functionality
         function switchTab(event, tabName) {
             // Hide all tabs
             const tabs = document.querySelectorAll('.tab-content');
-            tabs.forEach(tab => tab.classList.remove('active'));
             // Remove active class from all buttons
             const buttons = document.querySelectorAll('.tab-button');
             buttons.forEach(btn => btn.classList.remove('active'));
             // Show selected tab
-            document.getElementById(tabName).classList.add('active');
             // Add active class to clicked button
-            event.target.classList.add('active');
         }
         // Original voice chat variables and functions
@@ -882,16 +894,6 @@ HTML_CONTENT = """<!DOCTYPE html>
         let webSearchEnabled = false;
         let selectedLanguage = "";
         let systemPrompt = "You are a helpful assistant. Respond in a friendly and professional manner.";
-        const audioOutput = document.getElementById('audio-output');
-        const startButton = document.getElementById('start-button');
-        const sendButton = document.getElementById('send-button');
-        const chatMessages = document.getElementById('chat-messages');
-        const statusDot = document.getElementById('status-dot');
-        const statusText = document.getElementById('status-text');
-        const searchToggle = document.getElementById('search-toggle');
-        const languageSelect = document.getElementById('language-select');
-        const systemPromptInput = document.getElementById('system-prompt');
-        const textInput = document.getElementById('text-input');
         let audioLevel = 0;
         let animationFrame;
         let audioContext, analyser, audioSource;
@@ -905,35 +907,9 @@ HTML_CONTENT = """<!DOCTYPE html>
         let isRealtimeRecording = false;
         let realtimeStream = null;
-        // Web search toggle functionality
-        searchToggle.addEventListener('click', () => {
-            webSearchEnabled = !webSearchEnabled;
-            searchToggle.classList.toggle('active', webSearchEnabled);
-            console.log('Web search enabled:', webSearchEnabled);
-        });
-        // Language selection
-        languageSelect.addEventListener('change', () => {
-            selectedLanguage = languageSelect.value;
-            console.log('Selected language:', selectedLanguage);
-        });
-        // System prompt update
-        systemPromptInput.addEventListener('input', () => {
-            systemPrompt = systemPromptInput.value || "You are a helpful assistant. Respond in a friendly and professional manner.";
-        });
-        // Text input handling
-        textInput.addEventListener('keypress', (e) => {
-            if (e.key === 'Enter' && !e.shiftKey) {
-                e.preventDefault();
-                sendTextMessage();
-            }
-        });
-        sendButton.addEventListener('click', sendTextMessage);
         async function sendTextMessage() {
             const message = textInput.value.trim();
             if (!message) return;
@@ -987,17 +963,21 @@ HTML_CONTENT = """<!DOCTYPE html>
         }
         function updateStatus(state) {
             statusDot.className = 'status-dot ' + state;
             if (state === 'connected') {
                 statusText.textContent = '연결됨';
-                sendButton.style.display = 'block';
                 isVoiceActive = true;
             } else if (state === 'connecting') {
                 statusText.textContent = '연결 중...';
-                sendButton.style.display = 'none';
             } else {
                 statusText.textContent = '연결 대기 중';
-                sendButton.style.display = 'block';  // Show send button even when disconnected for text chat
                 isVoiceActive = false;
             }
         }
@@ -1088,6 +1068,7 @@ HTML_CONTENT = """<!DOCTYPE html>
         }
         async function setupWebRTC() {
             const config = __RTC_CONFIGURATION__;
             peerConnection = new RTCPeerConnection(config);
             const timeoutId = setTimeout(() => {
@@ -1198,6 +1179,7 @@ HTML_CONTENT = """<!DOCTYPE html>
         }
         function addMessage(role, content) {
             const messageDiv = document.createElement('div');
             messageDiv.classList.add('message', role);
@@ -1287,103 +1269,8 @@ HTML_CONTENT = """<!DOCTYPE html>
             }
         }
-        startButton.addEventListener('click', () => {
-            console.log('clicked');
-            console.log(peerConnection, peerConnection?.connectionState);
-            if (!peerConnection || peerConnection.connectionState !== 'connected') {
-                setupWebRTC();
-            } else {
-                console.log('stopping');
-                stop();
-            }
-        });
         // 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 = '처리 중...';
-            }
-        }
-        // File upload handlers
-        document.getElementById('audio-upload-area').addEventListener('click', () => {
-            document.getElementById('audio-file-input').click();
-        });
-        document.getElementById('video-upload-area').addEventListener('click', () => {
-            document.getElementById('video-file-input').click();
-        });
-        document.getElementById('pdf-upload-area').addEventListener('click', () => {
-            document.getElementById('pdf-file-input').click();
-        });
-        // Drag and drop handlers
-        ['audio', 'video', 'pdf'].forEach(type => {
-            const area = document.getElementById(`${type}-upload-area`);
-            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
-        document.getElementById('audio-file-input').addEventListener('change', (e) => {
-            if (e.target.files[0]) processAudioFile(e.target.files[0]);
-        });
-        document.getElementById('video-file-input').addEventListener('change', (e) => {
-            if (e.target.files[0]) processVideoFile(e.target.files[0]);
-        });
-        document.getElementById('pdf-file-input').addEventListener('change', (e) => {
-            if (e.target.files[0]) processPDFFile(e.target.files[0]);
-        });
         // Process audio blob (for microphone recording)
         async function processAudioBlob(blob, type) {
             const formData = new FormData();
@@ -1614,8 +1501,178 @@ HTML_CONTENT = """<!DOCTYPE html>
         // Initialize on page load
         window.addEventListener('DOMContentLoaded', () => {
-            sendButton.style.display = 'block';
         });
     </script>
 </body>

             display: none;
             flex-grow: 1;
             overflow: hidden;
+            flex-direction: column;
         }
         .tab-content.active {
             display: flex;
         }
         .main-content {
             display: flex;
     <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 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 isRealtimeRecording = false;
         let realtimeStream = null;
         async function sendTextMessage() {
+            const textInput = document.getElementById('text-input');
+            const chatMessages = document.getElementById('chat-messages');
             const message = textInput.value.trim();
             if (!message) return;
         }
         function updateStatus(state) {
+            const statusDot = document.getElementById('status-dot');
+            const statusText = document.getElementById('status-text');
+            const sendButton = document.getElementById('send-button');
             statusDot.className = 'status-dot ' + state;
             if (state === 'connected') {
                 statusText.textContent = '연결됨';
+                if (sendButton) sendButton.style.display = 'block';
                 isVoiceActive = true;
             } else if (state === 'connecting') {
                 statusText.textContent = '연결 중...';
+                if (sendButton) sendButton.style.display = 'none';
             } else {
                 statusText.textContent = '연결 대기 중';
+                if (sendButton) sendButton.style.display = 'block';  // Show send button even when disconnected for text chat
                 isVoiceActive = false;
             }
         }
         }
         async function setupWebRTC() {
+            const audioOutput = document.getElementById('audio-output');
             const config = __RTC_CONFIGURATION__;
             peerConnection = new RTCPeerConnection(config);
             const timeoutId = setTimeout(() => {
         }
         function addMessage(role, content) {
+            const chatMessages = document.getElementById('chat-messages');
             const messageDiv = document.createElement('div');
             messageDiv.classList.add('message', role);
             }
         }
         // Whisper Tab Functions
         // Process audio blob (for microphone recording)
         async function processAudioBlob(blob, type) {
             const formData = new FormData();
         // 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>