Update app.py

app.py

@@ -32,12 +32,20 @@ css = """
         justify-items: center;
     }
 
-    .custom-caption-1, .custom-caption-2 {
+    .custom-caption-1, .custom-caption-2, .survey, .survey-1, .survey-2 {
         font-size: 20px;
         font-weight: bold;
         text-align: center;
         margin-top: 10px;
-        color: white;
+        color: black;
+    }
+
+    .bottom-space {
+        height: 5em; /* 여백을 위한 공간 */
+    }
+
+    .center-align {
+        text-align: center;
     }
 
     @media only screen and (max-width: 768px) {
@@ -126,31 +134,31 @@ if uploaded_file is not None:
 
     st.markdown('<div class="container">', unsafe_allow_html=True)
 
-    st.markdown('<div>', unsafe_allow_html=True)
+    st.markdown('<div class="center-align">', unsafe_allow_html=True)
     st.image(image, use_column_width=True)
     st.markdown('<div class="custom-caption-1">업로드한 이미지</div>', unsafe_allow_html=True)
     st.markdown('</div>', unsafe_allow_html=True)
 
-    st.markdown('<div>', unsafe_allow_html=True)
+    st.markdown('<div class="center-align">', unsafe_allow_html=True)
     st.image(image, use_column_width=True)
     st.markdown('<div class="custom-caption-1">필터를 입힌 이미지</div>', unsafe_allow_html=True)
     st.markdown('</div>', unsafe_allow_html=True)
 
     st.markdown('</div>', unsafe_allow_html=True)
 
-    button_clicked = st.button("상단의 두 사진을 딥페이크 모델에 학습시키기")
+    button_clicked = st.button("상단의 두 사진을 딥페이크 모델에 학습시키기", key="deepfake_button")
 
     if button_clicked:
         st.markdown('<div class="container">', unsafe_allow_html=True)
 
-        st.markdown('<div>', unsafe_allow_html=True)
+        st.markdown('<div class="center-align">', unsafe_allow_html=True)
         processed_image = change_hair_to_blonde(image)
         st.image(processed_image, use_column_width=True)
         st.markdown('<div class="custom-caption-2">원본 이미지를 딥페이크 모델에 넣었을 경우</div>', unsafe_allow_html=True)
         st.markdown("<span>이해를 돕기 위해 사진에 노란색을 입히는 딥페이크 알고리즘 적용. 원본 이미지는 딥페이크 알고리즘의 영향을 받음.</span>", unsafe_allow_html=True)
         st.markdown('</div>', unsafe_allow_html=True)
         
-        st.markdown('<div>', unsafe_allow_html=True)
+        st.markdown('<div class="center-align">', unsafe_allow_html=True)
         deepfake_image = add_noise(image)
         st.image(deepfake_image, use_column_width=True)
         st.markdown('<div class="custom-caption-2">사전 방지 필터 이미지를 딥페이크 모델에 넣었을 경우</div>', unsafe_allow_html=True)
@@ -163,3 +171,6 @@ if uploaded_file is not None:
         st.markdown('<p class="survey">위 서비스를 사용해 보셨거나, 저희 기술적 원리에 관심이 있으신 분들께선 아래의 간단한 인터뷰에 참여해 주시면 진심으로 감사드리겠습니다.</p>', unsafe_allow_html=True)
         st.markdown('<p class="survey-1"><a href="https://docs.google.com/forms/d/e/1FAIpQLSdzRtuvQyp3CQDhlxEag40v2yDM7u9NYpJ2gv5kgwuNbo1gUA/viewform?usp=sf_link" target="_blank" class="a-tag">여기를 클릭하여 인터뷰에 응해 주신다면 큰 도움이 될 것 같습니다!!</a></p>', unsafe_allow_html=True)
         st.markdown('<p class="survey-2">서비스를 이용해 주셔서 감사합니다! 좋은 하루 보내세요!</p>', unsafe_allow_html=True)
+
+        # 여백을 추가
+        st.markdown('<div class="bottom-space"></div>', unsafe_allow_html=True)