Update app.py

app.py

@@ -211,76 +211,92 @@ def respond(
 def create_ui():
     try:
         css = """
-        footer {visibility: hidden;}
+        /* 전체 배경 및 기본 글꼴 설정 */
+        body {
+            background-color: #f9f9f9;
+            font-family: 'Helvetica Neue', Arial, sans-serif;
+            color: #333;
+        }
+        /* 하단 푸터 숨김 */
+        footer { visibility: hidden; }
+        
+        /* 출력 그룹 스타일: 밝은 배경, 부드러운 테두리와 그림자 */
         .output-group {
-            border: 1px solid #ddd;
-            border-radius: 5px;
-            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 8px;
+            padding: 15px;
             margin-bottom: 20px;
+            background-color: #ffffff;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         }
+        /* 스크롤 영역 설정 */
         .scroll-lock {
             overflow-y: auto !important;
-            max-height: calc((100vh - 200px) / 5) !important;
+            max-height: 300px !important;
         }
         .tree-view-scroll {
             overflow-y: auto !important;
-            max-height: calc((100vh - 200px) / 2) !important;
+            max-height: 400px !important;
         }
         .full-height {
-            height: calc(200em * 1.2) !important;
+            height: 80vh !important;
             overflow-y: auto !important;
         }
+        /* 코드 박스 스타일: 모노스페이스 폰트와 밝은 배경 */
         .code-box {
             overflow-x: auto !important;
             overflow-y: auto !important;
             white-space: pre !important;
-            word-wrap: normal !important;
-            height: 100% !important;
-        }
-        .code-box > div {
-            min-width: 100% !important;
+            background-color: #f5f5f5;
+            border-radius: 4px;
+            padding: 10px;
+            font-family: 'Courier New', Courier, monospace;
         }
+        .code-box > div { min-width: 100% !important; }
         .code-box > div > textarea {
             word-break: normal !important;
             overflow-wrap: normal !important;
         }
+        /* 탭 내비게이션 스타일: 단순하고 깔끔한 디자인 */
         .tab-nav {
-            background-color: #2c3e50;
-            border-radius: 5px 5px 0 0;
-            overflow: hidden;
+            background-color: #ffffff;
+            border-bottom: 1px solid #ccc;
+            display: flex;
         }
         .tab-nav button {
-            color: #ecf0f1 !important;
-            background-color: #34495e;
+            background: none;
             border: none;
             padding: 10px 20px;
             margin: 0;
-            transition: background-color 0.3s;
+            cursor: pointer;
             font-size: 16px;
-            font-weight: bold;
-        }
-        .tab-nav button:hover {
-            background-color: #2980b9;
+            color: #555;
+            transition: color 0.3s, border-bottom 0.3s;
         }
+        .tab-nav button:hover,
         .tab-nav button.selected {
-            color: #2c3e50 !important;
-            background-color: #ecf0f1;
+            color: #000;
+            border-bottom: 2px solid #007BFF;
         }
+        /* 입력창 및 텍스트 영역 스타일 */
         input[type="text"], textarea {
-            color: #2c3e50 !important;
-            background-color: #ecf0f1 !important;
+            color: #333;
+            background-color: #fff;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            padding: 8px;
         }
         """
 
-        with gr.Blocks(theme="Nymbo/Nymbo_Theme", css=css) as demo:
-            gr.Markdown("# Mouse: HuggingFace")
+        with gr.Blocks(theme="default", css=css) as demo:
+            gr.Markdown("# Mouse: HuggingFace", elem_classes="header-markdown")
             
             with gr.Tabs() as tabs:
                 with gr.TabItem("분석"):
                     with gr.Row():
-                        with gr.Column(scale=6):  # 왼쪽 60%
-                            url_input = gr.Textbox(label="HuggingFace Space URL")
-                            analyze_button = gr.Button("분석")
+                        with gr.Column(scale=6):  # 왼쪽 영역
+                            url_input = gr.Textbox(label="HuggingFace Space URL", placeholder="예: https://huggingface.co/spaces/username/space_name")
+                            analyze_button = gr.Button("분석", variant="primary")
     
                             with gr.Group(elem_classes="output-group scroll-lock"):
                                 summary_output = gr.Markdown(label="요약 (3줄 이내)")
@@ -291,23 +307,21 @@ def create_ui():
                             with gr.Group(elem_classes="output-group scroll-lock"):
                                 usage_output = gr.Markdown(label="사용법")
     
-                            with gr.Group(elem_classes="output-group tree-view-scroll"):  # 트리 뷰 스크롤 추가
+                            with gr.Group(elem_classes="output-group tree-view-scroll"):
                                 tree_view_output = gr.Textbox(label="파일 구조 (Tree View)", lines=30)
 
-                        with gr.Column(scale=4):  # 오른쪽 40%
+                        with gr.Column(scale=4):  # 오른쪽 영역
                             with gr.Group(elem_classes="output-group full-height"):
                                 code_tabs = gr.Tabs()
                                 with code_tabs:
-                                    app_py_tab = gr.TabItem("app.py")
-                                    with app_py_tab:
+                                    with gr.TabItem("app.py"):
                                         app_py_content = gr.Code(
                                             language="python",
                                             label="app.py",
                                             lines=200,
                                             elem_classes="full-height code-box"
                                         )
-                                    requirements_tab = gr.TabItem("requirements.txt")
-                                    with requirements_tab:
+                                    with gr.TabItem("requirements.txt"):
                                         requirements_content = gr.Textbox(
                                             label="requirements.txt",
                                             lines=200,
@@ -315,11 +329,11 @@ def create_ui():
                                         )
 
                 with gr.TabItem("AI 코딩"):
-                    chatbot = gr.Chatbot(label="대화")
+                    chatbot = gr.Chatbot(label="대화", elem_classes="output-group full-height")
 
-                    msg = gr.Textbox(label="메시지")
+                    msg = gr.Textbox(label="메시지", placeholder="메시지를 입력하세요...")
                     
-                    # 숨겨진 상태로 파라미터 설정
+                    # 숨겨진 파라미터
                     max_tokens = gr.Slider(minimum=1, maximum=8000, value=4000, label="Max Tokens", visible=False)
                     temperature = gr.Slider(minimum=0, maximum=1, value=0.7, label="Temperature", visible=False)
                     top_p = gr.Slider(minimum=0, maximum=1, value=0.9, label="Top P", visible=False)
@@ -328,26 +342,24 @@ def create_ui():
                         ["상세한 사용 방법을 마치 화면을 보면서 설명하듯이 4000 토큰 이상 자세히 설명하라"],
                         ["FAQ 20건을 상세하게 작성하라. 4000토큰 이상 사용하라."],
                         ["사용 방법과 차별점, 특징, 강점을 중심으로 4000 토큰 이상 유튜브 영상 스크립트 형태로 작성하라"],
-                        ["본 서비스를 SEO 최적화하여 블로그 포스트(배경 및 필요성, 기존 유사 서비스와 비교하여 특장점, 활용처, 가치, 기대효과, 결론을 포함)로 4000 토큰 이상 작성하라"],
-                        ["특허 출원에 활용할 기술 및 비즈니스모델 측면을 포함하여 특허 출원서 구성에 맞게 혁신적인 창의 발명 내용을 중심으로 4000토큰 이상 작성하라."],
+                        ["본 서비스를 SEO 최적화하여 블로그 포스트로 4000 토큰 이상 작성하라"],
+                        ["특허 출원에 활용할 혁신적인 창의 발명 내용을 중심으로 4000 토큰 이상 작성하라."],
                         ["계속 이어서 답변하라"],
                     ]
-
                     gr.Examples(examples, inputs=msg)
 
                     def respond_wrapper(message, chat_history, max_tokens, temperature, top_p):
                         bot_message = ""
                         for response in respond(message, chat_history, max_tokens=max_tokens, temperature=temperature, top_p=top_p):
-                            bot_message = response  # 마지막 응답을 저장
+                            bot_message = response  # 마지막 응답 저장
                             yield "", chat_history + [(message, bot_message)]
     
                         chat_history.append((message, bot_message))
                         return "", chat_history
 
-
-
                     msg.submit(respond_wrapper, [msg, chatbot, max_tokens, temperature, top_p], [msg, chatbot])
 
+            # 상태 저장용 변수
             space_id_state = gr.State()
             tree_structure_state = gr.State()
             app_py_content_lines = gr.State()
@@ -362,7 +374,7 @@ def create_ui():
                 outputs=[requirements_content]
             )
 
-            # lines 수를 동적으로 설정
+            # 동적으로 app.py의 줄 수 조정
             app_py_content.change(lambda lines: gr.update(lines=lines), inputs=[app_py_content_lines], outputs=[app_py_content])
 
         return demo
@@ -371,29 +383,3 @@ def create_ui():
         print(f"Error in create_ui: {str(e)}")
         print(traceback.format_exc())
         raise
-        
-
-if __name__ == "__main__":
-    try:
-        print("Starting HuggingFace Space Analyzer...")
-        demo = create_ui()
-        print("UI created successfully.")
-        
-        print("Configuring Gradio queue...")
-        demo.queue()
-        print("Gradio queue configured.")
-        
-        print("Launching Gradio app...")
-        demo.launch(
-            server_name="0.0.0.0",
-            server_port=7860,
-            share=False,
-            debug=True,
-            show_api=False
-        )
-        print("Gradio app launched successfully.")
-    except Exception as e:
-        print(f"Error in main: {str(e)}")
-        print("Detailed error information:")
-        print(traceback.format_exc())
-        raise