Update app.py

app.py

@@ -192,53 +192,65 @@ def respond(message: str, chat_history: List[Dict[str, str]], max_tokens: int, t
 
 def create_ui():
     try:
-        css = """
-        footer {visibility: hidden;}
-        .output-group {
-            border: 1px solid #ddd;
-            border-radius: 5px;
-            padding: 10px;
-            margin-bottom: 20px;
-        }
-        .scroll-lock {
-            overflow-y: auto !important;
-            max-height: calc((100vh - 200px) / 5) !important;
-        }
-        .tree-view-scroll {
-            overflow-y: auto !important;
-            max-height: calc((100vh - 200px) / 2) !important;  /* 트리 뷰 높이 증가 */
-        }
-        .full-height {
-            height: calc(100vh - 200px) !important;
-            overflow-y: auto !important;
-        }
-        .tab-nav {
-            background-color: #2c3e50;
-            border-radius: 5px 5px 0 0;
-            overflow: hidden;
-        }
-        .tab-nav button {
-            color: #ecf0f1 !important;
-            background-color: #34495e;
-            border: none;
-            padding: 10px 20px;
-            margin: 0;
-            transition: background-color 0.3s;
-            font-size: 16px;
-            font-weight: bold;
-        }
-        .tab-nav button:hover {
-            background-color: #2980b9;
-        }
-        .tab-nav button.selected {
-            color: #2c3e50 !important;
-            background-color: #ecf0f1;
-        }
-        input[type="text"], textarea {
-            color: #2c3e50 !important;
-            background-color: #ecf0f1 !important;
-        }
-        """
+css = """
+footer {visibility: hidden;}
+.output-group {
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    padding: 10px;
+    margin-bottom: 20px;
+}
+.scroll-lock {
+    overflow-y: auto !important;
+    max-height: calc((100vh - 200px) / 5) !important;
+}
+.tree-view-scroll {
+    overflow-y: auto !important;
+    max-height: calc((100vh - 200px) / 2) !important;
+}
+.full-height {
+    height: calc(100vh - 200px) !important;
+    overflow-y: auto !important;
+}
+.code-box {
+    overflow-x: auto !important;
+    white-space: pre !important;
+    word-wrap: normal !important;
+}
+.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;
+}
+.tab-nav button {
+    color: #ecf0f1 !important;
+    background-color: #34495e;
+    border: none;
+    padding: 10px 20px;
+    margin: 0;
+    transition: background-color 0.3s;
+    font-size: 16px;
+    font-weight: bold;
+}
+.tab-nav button:hover {
+    background-color: #2980b9;
+}
+.tab-nav button.selected {
+    color: #2c3e50 !important;
+    background-color: #ecf0f1;
+}
+input[type="text"], textarea {
+    color: #2c3e50 !important;
+    background-color: #ecf0f1 !important;
+}
+"""
 
         with gr.Blocks(theme="Nymbo/Nymbo_Theme", css=css) as demo:
             gr.Markdown("# Mouse: HuggingFace")
@@ -268,12 +280,21 @@ def create_ui():
                                 with code_tabs:
                                     app_py_tab = gr.TabItem("app.py")
                                     with app_py_tab:
-                                        app_py_content = gr.Code(language="python", label="app.py", lines=30, elem_classes="full-height")  # 스크롤 추가
+                                        app_py_content = gr.Code(
+                                            language="python",
+                                            label="app.py",
+                                            lines=30,
+                                            elem_classes="full-height code-box"
+                                        )
                                     requirements_tab = gr.TabItem("requirements.txt")
                                     with requirements_tab:
-                                        requirements_content = gr.Textbox(label="requirements.txt", lines=30, elem_classes="full-height")  # 스크롤 추가
-
-
+                                            requirements_content = gr.Code(
+                                            language="text",
+                                            label="requirements.txt",
+                                            lines=30,
+                                            elem_classes="full-height code-box"
+                                        )
+                        
 
                 with gr.TabItem("AI 코딩"):
                     chatbot = gr.Chatbot(label="대화")