Update app.py

app.py

@@ -7,6 +7,7 @@ from PIL import Image, ExifTags
 # 가장 먼저 set_page_config() 호출
 st.set_page_config(page_title="딥페이크 사전 방지 필터(테스트)", layout="wide")
 
+
 ga_code = """
 <!-- Global site tag (gtag.js) - Google Analytics -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-PZPBGNENQG"></script>
@@ -21,14 +22,34 @@ ga_code = """
 # Streamlit에 GA 코드 삽입
 components.html(ga_code, height=0)
 
-# 반응형 디자인을 위한 CSS
-css = """
+# 나머지 Streamlit 코드
+st.title("딥페이크 사전 방지 필터(테스트)")
+st.markdown("")
+st.markdown("<span style='font-size: 18px;'>안녕하세요! 저희는 딥페이크로부터 여러분의 사진을 보호하는 솔루션을 개발하고 있습니다.</span>", unsafe_allow_html=True)
+st.markdown("<span style='font-size: 18px;'>저희의 목표는 온라인에 게시된 개인의 사진이 악성 딥페이크 영상에 사용되지 않도록 하는 것입니다. 현재는 개발을 마무리하고 서비스화 하기 전, 여러분의 의견을 듣기 위해 간단한 테스트를 진행하고 있습니다.</span>", unsafe_allow_html=True)
+st.markdown("<span style='font-size: 18px;'>최근 SNS에 업로드된 이미지가 딥페이크 포르노물에 악용되는 사례가 매일 보고되고 있습니다. 따라서 해결책을 강구하기 위해, 여러분의 소중한 의견이 필요합니다.</span>", unsafe_allow_html=True)
+st.markdown("<span style='font-size: 18px;'>아래 링크를 통해 저희 서비스를 이용해 보신 후, 인터뷰에 참여해 주시면 큰 도움이 되겠습니다. 여러분의 피드백은 서비스 개선에 귀중한 자료가 될 것입니다.</span>", unsafe_allow_html=True)
+st.markdown("")
+st.markdown("<span style='font-size: 18px;'>동작 원리 : 1. 이미지를 업로드하면, 사전 방지 필터가 적용된 이미지를 보여드립니다.   2. 하단의 흰 버튼을 클릭하면 딥페이크 모델을 통해 생성된 결과를 확인할 수 있습니다.</span>", unsafe_allow_html=True)
+st.markdown("<span style='font-size: 18px;'>여러분의 참여에 감사드립니다!</span>", unsafe_allow_html=True)
+st.markdown("<span style='font-size: 14px;'> *사전 방지 필터란: 여러분의 사진이 딥페이크 모델에 학습되지 못하도록 방해하는 노이즈(noise)형태의 필터.</span>", unsafe_allow_html=True)
+st.markdown(
+    """
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
     <style>
     /* 공통 스타일 */
     .stFileUploader label,
     .stRadio label,
+    .stRadio div,
+    .custom-caption-1,
+    .custom-caption-2,
+    .button-container,
     .stButton button,
-    .survey-1 {
+    .survey,
+    .survey-1,
+    .survey-2,
+    .a-tag,
+    a {
         transition: all 0.3s ease;
     }
     .stFileUploader label {
@@ -50,7 +71,7 @@ css = """
         font-weight: bold;
         text-align: center;
         margin-top: 10px;
-        padding: 0 0 20px 0;
+        padding: 0 0 200px 0;
     }
     .custom-caption-2 {
         font-size: 36px;
@@ -90,14 +111,14 @@ css = """
     .survey-1 {
         font-size: 25px;
         text-align: center;
-        margin-top: 10px;
+        margin-top: 10px
         font-weight: bold;
     }
     .survey-2 {
         text-align: center;
-        margin-top: 10px;
+        margin-top: 10px
         font-weight: bold;
-        padding: 0 auto 50px auto;
+        padding 0 auto 50px auto
     }
     .a-tag {
         color: #FF0080;
@@ -165,21 +186,9 @@ css = """
         }
     }
     </style>
-"""
-
-# CSS를 HTML로 삽입
-st.markdown(css, unsafe_allow_html=True)
-
-st.title("딥페이크 사전 방지 필터(테스트)")
-st.markdown("")
-st.markdown("<span style='font-size: 18px;'>안녕하세요! 저희는 딥페이크로부터 여러분의 사진을 보호하는 솔루션을 개발하고 있습니다.</span>", unsafe_allow_html=True)
-st.markdown("<span style='font-size: 18px;'>저희의 목표는 온라인에 게시된 개인의 사진이 악성 딥페이크 영상에 사용되지 않도록 하는 것입니다. 현재는 개발을 마무리하고 서비스화 하기 전, 여러분의 의견을 듣기 위해 간단한 테스트를 진행하고 있습니다.</span>", unsafe_allow_html=True)
-st.markdown("<span style='font-size: 18px;'>최근 SNS에 업로드된 이미지가 딥페이크 포르노물에 악용되는 사례가 매일 보고되고 있습니다. 따라서 해결책을 강구하기 위해, 여러분의 소중한 의견이 필요합니다.</span>", unsafe_allow_html=True)
-st.markdown("<span style='font-size: 18px;'>아래 링크를 통해 저희 서비스를 이용해 보신 후, 인터뷰에 참여해 주시면 큰 도움이 되겠습니다. 여러분의 피드백은 서비스 개선에 귀중한 자료가 될 것입니다.</span>", unsafe_allow_html=True)
-st.markdown("")
-st.markdown("<span style='font-size: 18px;'>동작 원리 : 1. 이미지를 업로드하면, 사전 방지 필터가 적용된 이미지를 ���여드립니다. 2. 하단의 흰 버튼을 클릭하면 딥페이크 모델을 통해 생성된 결과를 확인할 수 있습니다.</span>", unsafe_allow_html=True)
-st.markdown("<span style='font-size: 18px;'>여러분의 참여에 감사드립니다!</span>", unsafe_allow_html=True)
-st.markdown("<span style='font-size: 14px;'> *사전 방지 필터란: 여러분의 사진이 딥페이크 모델에 학습되지 못하도록 방해하는 노이즈(noise)형태의 필터.</span>", unsafe_allow_html=True)
+    """,
+    unsafe_allow_html=True,
+)
 
 def change_hair_to_blonde(image):
     # Convert to OpenCV format