Update app.py

app.py

@@ -35,6 +35,132 @@ from magic_pdf.data.data_reader_writer import FileBasedDataReader
 from magic_pdf.libs.hash_utils import compute_sha256
 from magic_pdf.tools.common import do_parse, prepare_env
 
+def create_css():
+    return """
+    /* 전체 스타일 */
+    .gradio-container {
+        background: linear-gradient(135deg, #EFF6FF 0%, #F5F3FF 100%);
+        max-width: 1200px !important;
+        margin: 0 auto !important;
+        padding: 2rem !important;
+    }
+
+    /* 제목 스타일 */
+    .title-area {
+        text-align: center;
+        margin-bottom: 2rem;
+        padding: 1rem;
+        background: white;
+        border-radius: 1rem;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    }
+
+    .title-area h1 {
+        background: linear-gradient(90deg, #2563EB 0%, #7C3AED 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        font-size: 2.5rem;
+        font-weight: bold;
+        margin-bottom: 0.5rem;
+    }
+
+    .title-area p {
+        color: #6B7280;
+        font-size: 1.1rem;
+    }
+
+    /* 컴포넌트 스타일링 */
+    .gr-box, .gr-panel {
+        border: 2px solid #E0E7FF !important;
+        border-radius: 12px !important;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
+        background: white !important;
+    }
+
+    /* 파일 업로드 영역 */
+    .file-upload {
+        border: 2px dashed #93C5FD !important;
+        border-radius: 8px !important;
+        padding: 2rem !important;
+        background: #F0F9FF !important;
+        transition: all 0.3s ease;
+    }
+
+    .file-upload:hover {
+        background: #E0F2FE !important;
+        border-color: #60A5FA !important;
+    }
+
+    /* 버튼 스타일링 */
+    .gr-button.primary-button {
+        background: linear-gradient(90deg, #2563EB 0%, #7C3AED 100%) !important;
+        color: white !important;
+        border: none !important;
+        border-radius: 8px !important;
+        padding: 0.75rem 1.5rem !important;
+        font-weight: bold !important;
+        transition: opacity 0.2s !important;
+    }
+
+    .gr-button.primary-button:hover {
+        opacity: 0.9 !important;
+    }
+
+    .gr-button.secondary-button {
+        background: white !important;
+        color: #4B5563 !important;
+        border: 1px solid #D1D5DB !important;
+        border-radius: 8px !important;
+        padding: 0.75rem 1.5rem !important;
+    }
+
+    .gr-button.secondary-button:hover {
+        background: #F9FAFB !important;
+    }
+
+    /* 슬라이더 스타일링 */
+    .gr-slider {
+        background: #E0E7FF !important;
+    }
+
+    .gr-slider .gr-slider-handle {
+        background: #4F46E5 !important;
+    }
+
+    /* 체크박스 스타일링 */
+    .gr-checkbox {
+        border-color: #6366F1 !important;
+    }
+
+    .gr-checkbox:checked {
+        background-color: #4F46E5 !important;
+    }
+
+    /* 탭 스타일링 */
+    .gr-tabs {
+        border-bottom: 2px solid #E0E7FF !important;
+    }
+
+    .gr-tab-button {
+        color: #6B7280 !important;
+        padding: 0.75rem 1rem !important;
+        font-weight: 500 !important;
+    }
+
+    .gr-tab-button.selected {
+        color: #4F46E5 !important;
+        border-bottom: 2px solid #4F46E5 !important;
+    }
+
+    /* 마크다운 출력 영역 */
+    .markdown-output {
+        background: white !important;
+        border-radius: 8px !important;
+        padding: 1rem !important;
+        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05) !important;
+    }
+    """
+
 def read_fn(path):
     disk_rw = FileBasedDataReader(os.path.dirname(path))
     return disk_rw.read(os.path.basename(path))
@@ -113,6 +239,18 @@ def to_markdown(file_path, end_pages, is_ocr, layout_mode, formula_enable, table
     new_pdf_path = os.path.join(local_md_dir, file_name + "_layout.pdf")
     return md_content, txt_content, archive_zip_path, new_pdf_path
 
+def to_pdf(file_path):
+    with pymupdf.open(file_path) as f:
+        if f.is_pdf:
+            return file_path
+        else:
+            pdf_bytes = f.convert_to_pdf()
+            unique_filename = f"{uuid.uuid4()}.pdf"
+            tmp_file_path = os.path.join(os.path.dirname(file_path), unique_filename)
+            with open(tmp_file_path, 'wb') as tmp_pdf_file:
+                tmp_pdf_file.write(pdf_bytes)
+            return tmp_file_path
+
 latex_delimiters = [{"left": "$$", "right": "$$", "display": True},
                    {"left": '$', "right": '$', "display": False}]
 
@@ -152,55 +290,143 @@ other_lang = ['ch', 'en', 'korean', 'japan', 'chinese_cht', 'ta', 'te', 'ka']
 all_lang = ['', 'auto']
 all_lang.extend([*other_lang, *latin_lang, *arabic_lang, *cyrillic_lang, *devanagari_lang])
 
-def to_pdf(file_path):
-    with pymupdf.open(file_path) as f:
-        if f.is_pdf:
-            return file_path
-        else:
-            pdf_bytes = f.convert_to_pdf()
-            unique_filename = f"{uuid.uuid4()}.pdf"
-            tmp_file_path = os.path.join(os.path.dirname(file_path), unique_filename)
-            with open(tmp_file_path, 'wb') as tmp_pdf_file:
-                tmp_pdf_file.write(pdf_bytes)
-            return tmp_file_path
-
 if __name__ == "__main__":
-    with gr.Blocks(title="OCR FLEX") as demo:
+    with gr.Blocks(title="OCR FLEX", css=create_css()) as demo:
+        # 타이틀 영역
+        with gr.Row(elem_classes="title-area"):
+            gr.HTML("""
+                <h1>OCR FLEX</h1>
+                <p>PDF와 이미지에서 텍스트를 빠르고 정확하게 추출하세요</p>
+            """)
+
         with gr.Row():
+            # 왼쪽 패널
             with gr.Column(variant='panel', scale=5):
-                file = gr.File(label="PDF 또는 이미지 파일을 업로드하세요", file_types=[".pdf", ".png", ".jpeg", ".jpg"])
-                max_pages = gr.Slider(1, 20, 10, step=1, label='최대 변환 페이지 수')
+                file = gr.File(
+                    label="PDF 또는 이미지 파일을 업로드하세요",
+                    file_types=[".pdf", ".png", ".jpeg", ".jpg"],
+                    elem_classes="file-upload"
+                )
+                
+                max_pages = gr.Slider(
+                    1, 20, 10,
+                    step=1,
+                    label='최대 변환 페이지 수',
+                    elem_classes="custom-slider"
+                )
+                
                 with gr.Row():
-                    layout_mode = gr.Dropdown(["layoutlmv3", "doclayout_yolo"], label="레이아웃 모델", value="doclayout_yolo")
-                    language = gr.Dropdown(all_lang, label="언어", value='auto')
+                    layout_mode = gr.Dropdown(
+                        ["layoutlmv3", "doclayout_yolo"],
+                        label="레이아웃 모델",
+                        value="doclayout_yolo",
+                        elem_classes="custom-dropdown"
+                    )
+                    language = gr.Dropdown(
+                        all_lang,
+                        label="언어",
+                        value='auto',
+                        elem_classes="custom-dropdown"
+                    )
+                
                 with gr.Row():
-                    formula_enable = gr.Checkbox(label="수식 인식 활성화", value=True)
-                    is_ocr = gr.Checkbox(label="OCR 강제 활성화", value=False)
-                    table_enable = gr.Checkbox(label="표 인식 활성화(테스트)", value=True)
+                    formula_enable = gr.Checkbox(
+                        label="수식 인식 활성화",
+                        value=True,
+                        elem_classes="custom-checkbox"
+                    )
+                    is_ocr = gr.Checkbox(
+                        label="OCR 강제 활성화",
+                        value=False,
+                        elem_classes="custom-checkbox"
+                    )
+                    table_enable = gr.Checkbox(
+                        label="표 인식 활성화(테스트)",
+                        value=True,
+                        elem_classes="custom-checkbox"
+                    )
+                
                 with gr.Row():
-                    change_bu = gr.Button("변환")
-                    clear_bu = gr.ClearButton(value="초기화")
-                pdf_show = PDF(label='PDF 미리보기', interactive=False, visible=True, height=800)
-                with gr.Accordion("예제:"):
+                    change_bu = gr.Button(
+                        "변환",
+                        elem_classes="primary-button"
+                    )
+                    clear_bu = gr.ClearButton(
+                        value="초기화",
+                        elem_classes="secondary-button"
+                    )
+                
+                pdf_show = PDF(
+                    label='PDF 미리보기',
+                    interactive=False,
+                    visible=True,
+                    height=800,
+                    elem_classes="pdf-preview"
+                )
+                
+                with gr.Accordion("예제:", open=False):
                     example_root = os.path.join(os.path.dirname(__file__), "examples")
                     gr.Examples(
                         examples=[os.path.join(example_root, _) for _ in os.listdir(example_root) if
                                 _.endswith("pdf")],
-                        inputs=file
+                        inputs=file,
+                        elem_classes="examples-section"
                     )
 
+            # 오른쪽 패널
             with gr.Column(variant='panel', scale=5):
-                output_file = gr.File(label="변환 결과", interactive=False)
-                with gr.Tabs():
+                output_file = gr.File(
+                    label="변환 결과",
+                    interactive=False,
+                    elem_classes="output-file"
+                )
+                
+                with gr.Tabs() as tabs:
                     with gr.Tab("마크다운 렌더링"):
-                        md = gr.Markdown(label="마크다운 렌더링", height=1100, show_copy_button=True,
-                                     latex_delimiters=latex_delimiters, line_breaks=True)
+                        md = gr.Markdown(
+                            label="마크다운 렌더링",
+                            height=1100,
+                            show_copy_button=True,
+                            latex_delimiters=latex_delimiters,
+                            line_breaks=True,
+                            elem_classes="markdown-output"
+                        )
+                    
                     with gr.Tab("마크다운 텍스트"):
-                        md_text = gr.TextArea(lines=45, show_copy_button=True)
-                        
-        file.change(fn=to_pdf, inputs=file, outputs=pdf_show)
-        change_bu.click(fn=to_markdown, inputs=[file, max_pages, is_ocr, layout_mode, formula_enable, table_enable, language],
-                     outputs=[md, md_text, output_file, pdf_show], api_name=False)
+                        md_text = gr.TextArea(
+                            lines=45,
+                            show_copy_button=True,
+                            elem_classes="markdown-text"
+                        )
+        
+        # 이벤트 핸들러
+        file.change(
+            fn=to_pdf,
+            inputs=file,
+            outputs=pdf_show
+        )
+        
+        change_bu.click(
+            fn=to_markdown,
+            inputs=[
+                file,
+                max_pages,
+                is_ocr,
+                layout_mode,
+                formula_enable,
+                table_enable,
+                language
+            ],
+            outputs=[
+                md,
+                md_text,
+                output_file,
+                pdf_show
+            ],
+            api_name=False
+        )
+        
         clear_bu.add([file, md, pdf_show, md_text, output_file, is_ocr])
 
-    demo.launch(ssr_mode=True)
+    # 앱 실행
+    demo.launch(ssr_mode=True)