Update app.py

app.py

@@ -98,14 +98,19 @@ def toggle_html_view(current_html, is_visible):
 with gr.Blocks() as demo:
     gr.Markdown("# 📄 재무제표 분석 챗봇")
     gr.Markdown("1. Document Parse API로 PDF 문서를 HTML로 변환합니다.\n"
-                "2. Solar LLM을 통해 문서 기반 질문에 답변합니다.")
+                "2. Solar LLM을 통해 문서 기반 질문에 답변합니다.\n"
+                "예제 파일은 Files 버튼을 클릭하면 확인 및 다운로드 가능합니다."
+               )
 
     with gr.Row():
         file_input = gr.File(label="📎 재무제표 업로드")
         parse_btn = gr.Button("문서 HTML 변환")
 
-    html_output = gr.Textbox(label="📘 문서 내용", lines=10, visible=True)
-    html_display = gr.HTML(visible=False)
+    # html_output = gr.Textbox(label="📘 문서 내용", lines=10, visible=True)
+    # html_display = gr.HTML(visible=False)
+    html_output = gr.Textbox(label="📘 문서 내용", lines=10, visible=True, elem_id="scrollable-html")
+    html_display = gr.HTML(visible=False, elem_id="scrollable-html-display")
+
     toggle_html_btn = gr.Button("🔁 HTML 보기 전환")
     html_visible_state = gr.State(False)
 
@@ -136,5 +141,18 @@ with gr.Blocks() as demo:
         outputs=[chatbot, chat_state, user_question],
         show_progress=True
     )
+demo.css = """
+#scrollable-html, #scrollable-html-display {
+    max-height: 400px;
+    overflow: auto;
+    border: 1px solid #AEB3FA;  /* Primary 30 */
+    padding: 16px;
+    background-color: #F4F4FF;  /* Primary 10 */
+    border-radius: 12px;
+    font-family: 'Arial', sans-serif;
+    color: #2F22A4;             /* Primary 60 */
+    box-shadow: 0 2px 6px rgba(128, 92, 251, 0.1);  /* Ups Purple */
+}
+"""
 
 demo.launch()