Modify Gradio UI

app.py

@@ -111,22 +111,33 @@ def fetch_github_content(url: str) -> str:
         return f"Error fetching content: {str(e)}"
     
 with gr.Blocks() as demo:
-    gr.Markdown("# 🤖 ARA: Auto README.md Agent 📝")
+    # 제목 가운데 정렬
+    gr.HTML("<h1 style='text-align:center;'>🤖 ARA: Auto README.md Agent 📝</h1>")
     repo_input = gr.Textbox(
         label="GitHub Repository URL",
         placeholder="Enter the GitHub repository URL (e.g. https://github.com/username/repo)"
     )
-    readme_output = gr.Textbox(label="Generated README.md")
     with gr.Row():
         with gr.Column():
             gr.Markdown("#### 🖼️ Preview (Markdown Rendered)")
-            readme_preview = gr.Markdown()
+            # 왼쪽: 수정 가능한 프리뷰 박스
+            readme_preview = gr.Textbox(
+                lines=24,
+                label="Preview (Markdown Rendered)",
+                interactive=True
+            )
         with gr.Column():
             gr.Markdown("#### 📝 Markdown File (Copyable)")
-            readme_markdown = gr.Textbox(lines=24, label="Markdown", interactive=True, show_copy_button=True)
+            # 오른쪽: 수정 불가, 복사 버튼 있는 박스
+            readme_markdown = gr.Textbox(
+                lines=24,
+                label="Markdown",
+                interactive=False,
+                show_copy_button=True
+            )
     generate_btn = gr.Button("Generate README.md")
 
-    # When generating, fill both preview and markdown
+    # 버튼 클릭 시 두 박스 모두 채움
     def dual_output(readme):
         return readme, readme