Update app.py

app.py

@@ -118,14 +118,16 @@ except Exception as e:
     claude_client = None
     openai_client = None
 
-    
+# try_claude_api 함수 수정
 async def try_claude_api(system_message, claude_messages, timeout=15):
     if not claude_client:
         raise Exception("Claude client not initialized")
     
     try:
         start_time = time.time()
-        async with asyncio.timeout(timeout):  # 타임아웃 설정
+        
+        # asyncio.timeout() 대신 asyncio.wait_for() 사용
+        async def stream_content():
             with claude_client.messages.stream(
                 model="claude-3-5-sonnet-20241022",
                 max_tokens=7800,
@@ -139,19 +141,24 @@ async def try_claude_api(system_message, claude_messages, timeout=15):
                         yield collected_content
                         await asyncio.sleep(0)
                 
+        # asyncio.wait_for()로 타임아웃 설정
+        async for content in asyncio.wait_for(stream_content(), timeout):
+            yield content
+            
     except asyncio.TimeoutError:
         raise TimeoutError(f"Claude API timeout after {timeout} seconds")
     except Exception as e:
         print(f"Claude API error: {str(e)}")
         raise
 
+# try_openai_api 함수 수정 
 async def try_openai_api(openai_messages):
     if not openai_client:
         raise Exception("OpenAI client not initialized")
     
     try:
-        stream = await openai_client.chat.completions.create(
-            model="gpt-4",  # 모델명 수정
+        response = await openai_client.chat.completions.create(
+            model="gpt-4",
             messages=openai_messages,
             stream=True,
             max_tokens=4096,
@@ -159,7 +166,7 @@ async def try_openai_api(openai_messages):
         )
         
         collected_content = ""
-        async for chunk in stream:
+        async for chunk in response:
             if chunk.choices[0].delta.content:
                 collected_content += chunk.choices[0].delta.content
                 yield collected_content
@@ -168,8 +175,6 @@ async def try_openai_api(openai_messages):
         print(f"OpenAI API error: {str(e)}")
         raise
 
-
-
 class Demo:
     def __init__(self):
         pass
@@ -1775,60 +1780,101 @@ def create_main_interface():
             return None, gr.update(active_key="empty")
 
     demo = gr.Blocks(css="""
-        /* 메인 탭 스타일 */
-        .main-tabs > div.tab-nav > button {
-            font-size: 1.1em !important;
-            padding: 0.5em 1em !important;
-            background: rgba(255, 255, 255, 0.8) !important;
-            border: none !important;
-            border-radius: 8px 8px 0 0 !important;
-            margin-right: 4px !important;
-        }
-        .main-tabs > div.tab-nav > button.selected {
-            background: linear-gradient(45deg, #0084ff, #00a3ff) !important;
-            color: white !important;
-        }
-        .main-tabs {
-            margin-top: -20px !important;
-            border-radius: 0 0 15px 15px !important;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
-        }
-        
-        /* MOUSE 인터페이스 스타일 */
-        .left_header {
-            text-align: center;
-            margin-bottom: 20px;
-        }
-        .right_panel {
-            background: white;
-            border-radius: 15px;
-            padding: 20px;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
-        }
-        .setting-buttons {
-            margin-bottom: 15px;
-        }
-        .render_header {
-            background: #f5f5f5;
-            padding: 10px;
-            border-radius: 8px;
-            margin-bottom: 15px;
-        }
-        .header_btn {
-            display: inline-block;
-            width: 12px;
-            height: 12px;
-            border-radius: 50%;
-            margin-right: 8px;
-            background: #ddd;
-        }
-        .html_content {
-            min-height: 500px;
-            border: 1px solid #eee;
-            border-radius: 8px;
-            overflow: hidden;
-        }
-    """, theme=theme)
+          /* 메인 탭 스타일 */
+          .main-tabs > div.tab-nav > button {
+               font-size: 1.1em !important;
+               padding: 0.5em 1em !important;
+               background: rgba(255, 255, 255, 0.8) !important;
+               border: none !important;
+               border-radius: 8px 8px 0 0 !important;
+               margin-right: 4px !important;
+          }
+          .main-tabs > div.tab-nav > button.selected {
+               background: linear-gradient(45deg, #0084ff, #00a3ff) !important;
+               color: white !important;
+          }
+          .main-tabs {
+               margin-top: -20px !important;
+               border-radius: 0 0 15px 15px !important;
+               box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
+          }
+          
+          /* MOUSE 인터페이스 스타일 */
+          .left_header {
+               text-align: center;
+               margin-bottom: 20px;
+          }
+          .right_panel {
+               background: white;
+               border-radius: 15px;
+               padding: 20px;
+               box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+               height: calc(100vh - 100px); /* 높이 조정 */
+               min-height: 800px; /* 최소 높이 설정 */
+          }
+          .setting-buttons {
+               margin-bottom: 15px;
+          }
+          .render_header {
+               background: #f5f5f5;
+               padding: 10px;
+               border-radius: 8px;
+               margin-bottom: 15px;
+          }
+          .header_btn {
+               display: inline-block;
+               width: 12px;
+               height: 12px;
+               border-radius: 50%;
+               margin-right: 8px;
+               background: #ddd;
+          }
+          .html_content {
+               height: calc(100vh - 200px); /* 높이 조정 */
+               min-height: 700px; /* 최소 높이 설정 */
+               border: 1px solid #eee;
+               border-radius: 8px;
+               overflow: hidden;
+          }
+          
+          /* 입력 영역 높이 조정 */
+          .ant-input-textarea-large textarea {
+               height: 400px !important; /* 입력창 높이 증가 */
+               min-height: 400px !important;
+          }
+          
+          /* 스크롤바 스타일링 */
+          .html_content::-webkit-scrollbar {
+               width: 8px;
+          }
+          .html_content::-webkit-scrollbar-track {
+               background: #f1f1f1;
+               border-radius: 4px;
+          }
+          .html_content::-webkit-scrollbar-thumb {
+               background: #888;
+               border-radius: 4px;
+          }
+          .html_content::-webkit-scrollbar-thumb:hover {
+               background: #555;
+          }
+          
+          /* 반응형 높이 조정 */
+          @media screen and (max-height: 900px) {
+               .right_panel {
+                    height: calc(100vh - 80px);
+                    min-height: 600px;
+               }
+               .html_content {
+                    height: calc(100vh - 160px);
+                    min-height: 500px;
+               }
+               .ant-input-textarea-large textarea {
+                    height: 300px !important;
+                    min-height: 300px !important;
+               }
+          }
+     """, theme=theme)
 
     with demo:
         with gr.Tabs(elem_classes="main-tabs") as tabs: