Update app.py

app.py

@@ -108,40 +108,95 @@ def process_model(target_word):
     return fig, similar_words_text, dissimilar_words_text
 
 
-
 # Gradio 인터페이스 수정
-with gr.Blocks(css=".plot-box {width: 70%; height: 500px;}") as iface:
-    gr.Markdown("# Word Embedding 3D 시각화")
-    gr.Markdown("<Inside Out 2> 단어 의미 지도(임베딩 벡터) 3D 시각화 도구")
+with gr.Blocks(css="""
+    #input-box {
+        background-color: #ffeef3; /* 연한 파스텔 핑크 */
+        border: 2px solid #ffccd5; /* 연한 핑크 테두리 */
+        color: #000; /* 텍스트 색상 */
+        border-radius: 8px; /* 둥근 테두리 */
+    }
+    #submit-btn {
+        background-color: #ebfbea; /* 연한 파스텔 연두색 */
+        border: 2px solid #d6f5d6; /* 연한 연두색 테두리 */
+        color: #000; /* 텍스트 색상 */
+        border-radius: 8px; /* 둥근 테두리 */
+    }
+    #bulletin {
+        background-color: #eaf9ff; /* 연한 파스텔 하늘색 */
+        border: 2px solid #d3f0f7; /* 연한 하늘색 테두리 */
+        color: #000; /* 텍스트 색상 */
+        border-radius: 8px; /* 둥근 테두리 */
+    }
+    #similar-words {
+        background-color: #fff0e6; /* 연한 파스텔 주황색 */
+        border: 2px solid #ffe3cc; /* 연한 주황 테두리 */
+        color: #000; /* 텍스트 색상 */
+        border-radius: 8px; /* 둥근 테두리 */
+    }
+    #dissimilar-words {
+        background-color: #f2e6ff; /* 연한 파스텔 보라색 */
+        border: 2px solid #e0ccff; /* 연한 보라 테두리 */
+        color: #000; /* 텍스트 색상 */
+        border-radius: 8px; /* 둥근 테두리 */
+    }
+    label {
+        font-weight: bold; /* 제목 볼드체 */
+    }
+""") as iface:
+    gr.Markdown("# <Inside Out 2> 단어 의미 지도 3D 시각화")
+    # gr.Markdown("<Inside Out 2> 단어 의미 지도(임베딩 벡터) 3D 시각화 도구")
 
     with gr.Row():
         # 사용자 입력 박스를 강조하기 위해 스타일을 변경
         with gr.Column():
-            word_input = gr.Textbox(label="**단어 입력**", elem_id="input-box", placeholder="ex. emotion, puberty, hockey, friend, anxiety, memory, ...", lines=1)
+            word_input = gr.Textbox(
+                label="**단어 입력**",
+                elem_id="input-box",
+                placeholder="ex. emotion, puberty, hockey, friend, anxiety, memory, ...",
+                lines=1
+            )
             submit_btn = gr.Button("제출", elem_id="submit-btn")
-        bulletin = gr.Textbox(label="사용법 안내", interactive=False, lines=4,  value="1. 소설에 나온 단어를 입력하고 [제출] 버튼이나 [Enter]를 누르세요 \n2.  입력 단어는 빨간색, 가까운 단어들은 주황색, 먼 단어들은 보라색으로 강조됩니다. \n3.  <Error>가 나타나는 경우, 다른 단어를 입력해보세요.\n4.  마우스 드래그 및 스크롤을 활용하여 3D 화면을 살펴보세요. \n5.  단어 입력창에 다른 단어들도 입력해보세요.")
+        bulletin = gr.Textbox(
+            label="사용법 안내",
+            interactive=False,
+            lines=4,
+            value=(
+                "1. 소설에 나온 단어를 입력하고 [제출]이나 [Enter]를 누르세요\n"
+                "2. 입력 단어는 빨간색, 가까운 단어들은 주황색, 먼 단어들은 보라색으로 강조됩니다.\n"
+                "3. <Error>가 나타나는 경우, 다른 단어를 입력해보세요.\n"
+                "4. 마우스 드래그 및 스크롤을 활용하여 3D 화면을 살펴보세요.\n"
+                "5. 단어 입력창에 다른 단어들도 입력해보세요."
+            ),
+            elem_id="bulletin"
+        )
 
     with gr.Row():
         # 시각화 화면의 크기를 CSS로 증가
         plot_output = gr.Plot(label="Word Embedding 3D 시각화", elem_id="plot-box")
 
         with gr.Column(scale=0.3):  # 컬럼의 너비를 줄이기 위해 scale 값을 낮춤
-            similar_words_output = gr.Textbox(label="가장 가까운 단어 10개", interactive=False, lines=5)
-            dissimilar_words_output = gr.Textbox(label="가장 먼 단어 10개", interactive=False, lines=5)
-            gr.Image(value="https://compote.slate.com/images/8324cd2e-21f5-4b20-84d5-f08ece97ac38.jpeg?crop=1560%2C1040%2Cx0%2Cy0&width=1280", label="URL 이미지", interactive=False)
+            similar_words_output = gr.Textbox(
+                label="가장 가까운 단어 10개",
+                interactive=False,
+                lines=5,
+                elem_id="similar-words"
+            )
+            dissimilar_words_output = gr.Textbox(
+                label="가장 먼 단어 10개",
+                interactive=False,
+                lines=5,
+                elem_id="dissimilar-words"
+            )
 
     submit_btn.click(
         fn=process_text,
-        # word_input = word_input.lower(),
         inputs=[word_input],
-        outputs=[plot_output, similar_words_output, dissimilar_words_output],
-        # preprocess=lambda word: word.lower() if word else ""  # None 체크 후 소문자 변환
-        )
+        outputs=[plot_output, similar_words_output, dissimilar_words_output]
+    )
 
-        # "Enter" 키 입력 시 동작 설정
     word_input.submit(
         fn=process_text,
-        # word_input = word_input.lower(),
         inputs=[word_input],
         outputs=[plot_output, similar_words_output, dissimilar_words_output],
         preprocess=lambda word: word.lower() if word else ""  # None 체크 후 소문자 변환