add card view to update a summary

app.py

@@ -71,28 +71,27 @@ title = "균형잡힌 뉴스 읽기 (Balanced News Reading)"
 
 with gr.Blocks() as demo:
     news = news_collector()
+    news.update_news_examples()
 
-    gr.Markdown(
-    """
-    # 균형잡힌 뉴스 읽기 (Balanced News Reading)
-
-    긍정적인 기사와 부정적인 기사인지 확인하여 뉴스를 읽을 수 있습니다. 최근 경제뉴스기사를 가져와 Example에서 바로 확인할 수 있도록 구성했습니다.
-
-    ## 사용방법
-    Daum뉴스의 경제 기사를 가져와 내용을 요약하고 `Example`에 가져옵니다. 감정 분석을 하고 싶은 기사를 `Examples`에서 선택해서 `Submit`을 누르면 `Classification`에
-    해당 기사의 감정 평가 결과가 표시됩니다.
+    with gr.Tab("소개"):
+        gr.Markdown(
+        """
+        # 균형잡힌 뉴스 읽기 (Balanced News Reading)
 
-    감정평가는 각 상태의 확률 정보가 `neutral`, `positive`, `negative` 3가지로 표현됩니다.
+        긍정적인 기사와 부정적인 기사인지 확인하여 뉴스를 읽을 수 있습니다. 최근 경제뉴스기사를 가져와 Example에서 바로 확인할 수 있도록 구성했습니다.
 
-    ## 구조 설명
-    뉴스기사를 크롤링 및 요약 모델을 이용한 기사 요약 -> 기사 요약정보 Example에 추가 -> 한국어 fine-tunning한 감정평가 모델을 이용한 감정ㅍㅇ가
+        ## 1. 사용방법
+        Daum뉴스의 경제 기사를 가져와 내용을 요약하고 `Example`에 가져옵니다. 감정 분석을 하고 싶은 기사를 `Examples`에서 선택해서 `Submit`을 누르면 `Classification`에
+        해당 기사의 감정 평가 결과가 표시됩니다. 감정평가는 각 상태의 확률 정보와 함께 `neutral`, `positive`, `negative` 3가지로 표시됩니다.
 
-    """)
-    news.update_news_examples()
+        ## 2. 구조 설명
+        뉴스기사를 크롤링 및 요약 모델을 이용한 기사 요약 >> 기사 요약정보 Example에 추가 >> 한국어 fine-tunning한 감정평가 모델을 이용해 입력된 기사에 대한 감정 평가 진행
+        """)
 
-    gr.load("models/gabrielyang/finance_news_classifier-KR_v7",
-            inputs = gr.Textbox( placeholder="뉴스 기사 내용을 입력하세요." ),
-            examples=news.examples)
+    with gr.Tab("데모"):
+        gr.load("models/gabrielyang/finance_news_classifier-KR_v7",
+                inputs = gr.Textbox( placeholder="뉴스 기사 내용을 입력하세요." ),
+                examples=news.examples)