Update app.py

app.py

@@ -302,7 +302,6 @@ custom_css = """
     background: #f5f7fa;
     padding: 2rem;
 }
-
 /* 헤더 스타일 */
 .custom-header {
     text-align: center;
@@ -311,7 +310,6 @@ custom_css = """
     margin-bottom: 1.5rem;
     color: #333;
 }
-
 /* 그룹 박스 스타일 */
 .custom-group {
     background: #ffffff;
@@ -320,7 +318,6 @@ custom_css = """
     box-shadow: 0 2px 8px rgba(0,0,0,0.1);
     margin-bottom: 1.5rem;
 }
-
 /* 버튼 스타일 */
 .custom-button {
     background-color: #007bff;
@@ -330,29 +327,53 @@ custom_css = """
     padding: 0.6rem 1.2rem;
     font-size: 1rem;
     cursor: pointer;
+    transition: background-color 0.3s;
+}
+.custom-button:hover {
+    background-color: #0056b3;
 }
-
 /* 체크박스 스타일 */
 .custom-checkbox {
     margin-right: 1rem;
+    font-size: 1rem;
+    font-weight: bold;
 }
-
 /* 결과 테이블 및 다운로드 버튼 */
 .custom-result {
     margin-top: 1.5rem;
 }
-
 /* 가운데 정렬 */
 .centered {
     display: flex;
     justify-content: center;
     align-items: center;
 }
+/* 사용설명 스타일 */
+.usage-instructions {
+    font-size: 1.1rem;
+    line-height: 1.6;
+    color: #555;
+    background: #fff;
+    padding: 1.5rem;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    margin-top: 2rem;
+}
+.usage-instructions h2 {
+    font-size: 1.8rem;
+    font-weight: bold;
+    margin-bottom: 1rem;
+    color: #333;
+}
+.usage-instructions ul {
+    list-style: disc;
+    margin-left: 2rem;
+}
 """
 
 # --- Gradio 인터페이스 구성 ---
 with gr.Blocks(title="네이버 블로그 형태소 분석 서비스", css=custom_css) as demo:
-    gr.HTML("<div class='custom-header'>네이버 블로그 형태소 분석 서비스</div>")
+    gr.HTML("<div class='custom-header'>네이버 블로그 형태소 분석 서비스 🚀</div>")
     # 블로그 링크와 스크래핑 실행 버튼을 한 그룹 내에 배치 (버튼은 가운데 정렬)
     with gr.Group(elem_classes="custom-group"):
         with gr.Row():
@@ -365,7 +386,6 @@ with gr.Blocks(title="네이버 블로그 형태소 분석 서비스", css=custo
         with gr.Row():
             remove_freq_checkbox = gr.Checkbox(label="빈도수1 제거", value=True, elem_classes="custom-checkbox")
         with gr.Row():
-            # "빈도수1 제거" 아래에 "직접 키워드 입력만 분석" 체크박스 배치
             direct_keyword_only_checkbox = gr.Checkbox(label="직접 키워드 입력만 분석", value=False, elem_classes="custom-checkbox")
         with gr.Row():
             direct_keyword_box = gr.Textbox(label="직접 키워드 입력 (엔터 또는 ','로 구분)", lines=2, placeholder="예: 키워드1, 키워드2\n키워드3")
@@ -376,7 +396,28 @@ with gr.Blocks(title="네이버 블로그 형태소 분석 서비스", css=custo
         result_df = gr.Dataframe(label="통합 분석 결과 (단어, 빈도수, 검색량, 블로그문서수, 직접입력)", interactive=True)
     with gr.Group(elem_classes="custom-group"):
         excel_file = gr.File(label="Excel 다운로드")
-    
+    # 사용설명 HTML 블록 (아래에 배치)
+    with gr.Group(elem_classes="custom-group"):
+        usage_html = gr.HTML("""
+        <div class="usage-instructions">
+            <h2>사용 설명 📖</h2>
+            <ul>
+                <li>🔗 <strong>네이버 블로그 링크</strong>: 분석할 네이버 블로그의 URL을 입력하세요.</li>
+                <li>✂️ <strong>스크래핑 실행</strong>: 링크 입력 후 버튼을 클릭하면 블로그의 제목과 본문이 자동으로 불러와집니다.</li>
+                <li>📝 <strong>블로그 내용 (수정 가능)</strong>: 불러온 블로그 내용이 표시되며, 필요에 따라 직접 수정할 수 있습니다.</li>
+                <li>⚙️ <strong>옵션 설정</strong>:
+                    <ul>
+                        <li><em>빈도수1 제거</em>: 기본 선택되어 있으며, 빈도수가 1인 단어는 결과에서 제외합니다.</li>
+                        <li><em>직접 키워드 입력만 분석</em>: 이 옵션을 선택하면, 블로그 본문에서 직접 입력한 키워드만 분석합니다.</li>
+                    </ul>
+                </li>
+                <li>🔤 <strong>직접 키워드 입력</strong>: 엔터 또는 쉼표(,)로 구분하여 분석할 키워드를 입력하세요.</li>
+                <li>🚀 <strong>분석 실행</strong>: 설정한 옵션에 따라 형태소 분석 및 키워드 분석이 수행되어 결과가 표와 Excel 파일로 출력됩니다.</li>
+                <li>📥 <strong>Excel 다운로드</strong>: 분석 결과를 Excel 파일로 다운로드할 수 있습니다.</li>
+            </ul>
+            <p><strong>Tip:</strong> 분석 결과는 실시간으로 업데이트되며, 필요시 수정 후 다시 분석할 수 있습니다. 즐거운 분석 되세요! 😊</p>
+        </div>
+        """)
     # 이벤트 연결
     scrape_button.click(fn=fetch_blog_content, inputs=blog_url_input, outputs=blog_content_box)
     analyze_button.click(fn=analysis_handler,