Private-AI

Running

App Files Files Community

seawolf2357 commited on Jun 13

Commit

f5d6d1c

verified ·

1 Parent(s): 3541d20

Update app.py

Browse files

Files changed (1) hide show

app.py +141 -41

app.py CHANGED Viewed

@@ -2674,88 +2674,188 @@ async def index():
     """Serve the HTML page"""
     rtc_config = get_twilio_turn_credentials() if get_space() else None
-    # 디버깅을 위한 간단한 HTML
     test_html = """<!DOCTYPE html>
 <html lang="ko">
 <head>
     <meta charset="UTF-8">
     <title>MOUSE Extended</title>
     <style>
-        body { background: #121212; color: white; font-family: Arial; }
-        .tab-button { padding: 10px; margin: 5px; cursor: pointer; background: #333; border: none; color: white; }
-        .tab-button.active { background: #666; }
-        .tab-content { display: none; padding: 20px; }
-        .tab-content.active { display: block; }
     </style>
 </head>
 <body>
-    <h1>MOUSE Extended - Debug Version</h1>
-    <div>
-        <button class="tab-button active" onclick="switchTab('tab1')">Tab 1</button>
-        <button class="tab-button" onclick="switchTab('tab2')">Tab 2</button>
-        <button class="tab-button" onclick="switchTab('tab3')">Tab 3</button>
     </div>
-    <div id="tab1" class="tab-content active">
         <h2>Voice Chat Tab</h2>
-        <button onclick="testFunction()">Test Button</button>
-        <div id="search-toggle" style="width:50px;height:30px;background:#666;cursor:pointer;">Search Toggle</div>
     </div>
-    <div id="tab2" class="tab-content">
-        <h2>Tab 2 Content</h2>
     </div>
-    <div id="tab3" class="tab-content">
-        <h2>Tab 3 Content</h2>
     </div>
     <script>
-        console.log('Script started');
         function switchTab(tabName) {
             console.log('Switching to:', tabName);
-            // Hide all tabs
             document.querySelectorAll('.tab-content').forEach(tab => {
                 tab.style.display = 'none';
                 tab.classList.remove('active');
             });
-            // Show selected tab
             const selectedTab = document.getElementById(tabName);
             if (selectedTab) {
                 selectedTab.style.display = 'block';
                 selectedTab.classList.add('active');
             }
-            // Update buttons
-            document.querySelectorAll('.tab-button').forEach(btn => {
-                btn.classList.remove('active');
-            });
             event.target.classList.add('active');
         }
-        function testFunction() {
-            alert('Test function works!');
         }
-        // Initialize after DOM loaded
-        document.addEventListener('DOMContentLoaded', function() {
-            console.log('DOM loaded');
-            // Search toggle test
-            const searchToggle = document.getElementById('search-toggle');
-            if (searchToggle) {
-                searchToggle.onclick = function() {
-                    console.log('Search toggle clicked');
-                    this.style.background = this.style.background === 'red' ? '#666' : 'red';
-                };
-            }
-        });
-        console.log('Script finished');
     </script>
 </body>
 </html>"""

     """Serve the HTML page"""
     rtc_config = get_twilio_turn_credentials() if get_space() else None
+    # Step 1: 원래 HTML의 기본 구조로 시작
     test_html = """<!DOCTYPE html>
 <html lang="ko">
 <head>
     <meta charset="UTF-8">
     <title>MOUSE Extended</title>
     <style>
+        :root {
+            --primary-color: #6f42c1;
+            --secondary-color: #563d7c;
+            --dark-bg: #121212;
+            --card-bg: #1e1e1e;
+            --text-color: #f8f9fa;
+            --border-color: #333;
+        }
+        body {
+            background-color: var(--dark-bg);
+            color: var(--text-color);
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 20px;
+        }
+        .tab-button {
+            padding: 10px 20px;
+            margin: 5px;
+            cursor: pointer;
+            background: var(--card-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-color);
+        }
+        .tab-button.active {
+            background: var(--primary-color);
+        }
+        .tab-content {
+            display: none;
+            padding: 20px;
+            background: var(--card-bg);
+            margin-top: 20px;
+        }
+        .tab-content.active {
+            display: block;
+        }
+        .toggle-switch {
+            width: 50px;
+            height: 26px;
+            background: #ccc;
+            cursor: pointer;
+            display: inline-block;
+        }
+        .toggle-switch.active {
+            background: var(--primary-color);
+        }
     </style>
 </head>
 <body>
+    <h1>MOUSE Extended - Step 1</h1>
+    <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>
     </div>
+    <div id="voice-chat" class="tab-content active">
         <h2>Voice Chat Tab</h2>
+        <div>
+            <label>웹 검색:</label>
+            <div id="search-toggle" class="toggle-switch"></div>
+        </div>
+        <div>
+            <label>언어 선택:</label>
+            <select id="language-select">
+                <option value="">비활성화</option>
+                <option value="ko">한국어</option>
+                <option value="en">English</option>
+            </select>
+        </div>
+        <button id="start-button">대화 시작</button>
+        <input type="text" id="text-input" placeholder="메시지 입력...">
+        <button id="send-button">전송</button>
     </div>
+    <div id="mic-whisper" class="tab-content">
+        <h2>마이크 전사</h2>
+        <button onclick="toggleMicRecording()">녹음 시작</button>
     </div>
+    <div id="audio-whisper" class="tab-content">
+        <h2>오디오 파일</h2>
+        <div id="audio-upload-area" style="border: 2px dashed #666; padding: 20px; cursor: pointer;">
+            클릭하여 업로드
+        </div>
     </div>
     <script>
+        console.log('=== Script Start ===');
+        // Global variables
+        let webSearchEnabled = false;
+        let selectedLanguage = "";
+        // Tab switching
         function switchTab(tabName) {
             console.log('Switching to:', tabName);
             document.querySelectorAll('.tab-content').forEach(tab => {
                 tab.style.display = 'none';
                 tab.classList.remove('active');
             });
+            document.querySelectorAll('.tab-button').forEach(btn => {
+                btn.classList.remove('active');
+            });
             const selectedTab = document.getElementById(tabName);
             if (selectedTab) {
                 selectedTab.style.display = 'block';
                 selectedTab.classList.add('active');
             }
             event.target.classList.add('active');
         }
+        // Mock functions
+        function toggleMicRecording() {
+            alert('Mic recording toggle');
+        }
+        function setupWebRTC() {
+            alert('WebRTC setup');
         }
+        function stop() {
+            alert('Stop');
+        }
+        function sendTextMessage() {
+            const input = document.getElementById('text-input');
+            alert('Send: ' + input.value);
+        }
+        // Initialize
+        window.onload = function() {
+            console.log('=== Window loaded ===');
+            // Search toggle
+            document.getElementById('search-toggle').onclick = function() {
+                webSearchEnabled = !webSearchEnabled;
+                this.classList.toggle('active');
+                console.log('Search enabled:', webSearchEnabled);
+            };
+            // Language select
+            document.getElementById('language-select').onchange = function() {
+                selectedLanguage = this.value;
+                console.log('Language:', selectedLanguage);
+            };
+            // Start button
+            document.getElementById('start-button').onclick = function() {
+                setupWebRTC();
+            };
+            // Send button
+            document.getElementById('send-button').onclick = sendTextMessage;
+            // Text input
+            document.getElementById('text-input').onkeypress = function(e) {
+                if (e.key === 'Enter') {
+                    sendTextMessage();
+                }
+            };
+            // File upload
+            document.getElementById('audio-upload-area').onclick = function() {
+                alert('Audio upload clicked');
+            };
+            console.log('=== All initialized ===');
+        };
+        console.log('=== Script End ===');
     </script>
 </body>
 </html>"""