Update app.py

app.py

@@ -24,44 +24,145 @@ components.html(ga_code, height=0)
 # 반응형 디자인을 위한 CSS
 css = """
     <style>
-    .container {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 20px;
-        align-items: center;
-        justify-items: center;
+    /* 공통 스타일 */
+    .stFileUploader label,
+    .stRadio label,
+    .stButton button,
+    .survey-1 {
+        transition: all 0.3s ease;
     }
-
-    .custom-caption-1, .custom-caption-2, .survey, .survey-1, .survey-2, span {
+    .stFileUploader label {
+        font-size: 20px;
+        font-weight: 500;
+        color: #1f77b4;
+    }
+    .stRadio label {
         font-size: 20px;
+        font-weight: 500;
+        color: #1f77b4;
+    }
+    .stRadio div {
+        display: flex;
+        gap: 20px;
+    }
+    .custom-caption-1 {
+        font-size: 36px;
         font-weight: bold;
         text-align: center;
         margin-top: 10px;
-        color: black;
-        display: block;
+        padding: 0 0 20px 0;
     }
-
-    .bottom-space {
-        height: 5em; /* 여백을 위한 공간 */
+    .custom-caption-2 {
+        font-size: 36px;
+        font-weight: bold;
+        text-align: center;
+        margin-top: 10px;
+        padding: 0 0 30px 0;
     }
-
-    .center-align {
+    .button-container {
         text-align: center;
+        margin-top: 30px;
     }
-
     .stButton button {
+        width: 50%;
+        font-size: 25px;
+        padding: 10px 20px;
+        background-color: #FFFFFF;
+        font-weight: bold;
+        color: black;
+        opacity: 0.8;
+        border: 3px solid black;
+        border-radius: 5px;
+        cursor: pointer;
+        margin: 0 auto 50px auto;
         display: block;
-        margin: 0 auto;
     }
-
-    @media only screen and (max-width: 768px) {
-        .container {
-            grid-template-columns: 1fr;
-        }
-
-        .custom-caption-1, .custom-caption-2 {
+    .stButton button:hover {
+        background-color: #FFFFFF;
+        border: 3px solid #FF0080;
+        color: #FF0080;
+        opacity: 1;
+    }
+    .survey {
+        text-align: center;
+        margin-top: 10px
+    }
+    .survey-1 {
+        font-size: 25px;
+        text-align: center;
+        margin-top: 10px;
+        font-weight: bold;
+    }
+    .survey-2 {
+        text-align: center;
+        margin-top: 10px;
+        font-weight: bold;
+        padding: 0 auto 50px auto;
+    }
+    .a-tag {
+        color: #FF0080;
+        text-decoration: none;
+    }
+    a:hover {
+        color: #FF0080;
+        text-decoration: none;
+    }
+    
+    /* 스마트폰 화면 스타일 */
+    @media only screen and (max-width: 600px) {
+        .stFileUploader label,
+        .stRadio label,
+        .stButton button,
+        .survey-1 {
             font-size: 16px;
         }
+        .custom-caption-1,
+        .custom-caption-2 {
+            font-size: 24px;
+            padding: 0 0 20px 0;
+        }
+        .stButton button {
+            width: 100%;
+            font-size: 18px;
+        }
+    }
+    
+    /* 태블릿 화면 스타일 */
+    @media only screen and (min-width: 601px) and (max-width: 1024px) {
+        .stFileUploader label,
+        .stRadio label,
+        .stButton button,
+        .survey-1 {
+            font-size: 18px;
+        }
+        .custom-caption-1,
+        .custom-caption-2 {
+            font-size: 28px;
+            padding: 0 0 40px 0;
+        }
+        .stButton button {
+            width: 75%;
+            font-size: 20px;
+        }
+    }
+    
+    /* 데스크톱 화면 스타일 */
+    @media only screen and (min-width: 1025px) {
+        .stFileUploader label,
+        .stRadio label,
+        .stButton button,
+        .survey-1 {
+            font-size: 20px;
+        }
+        .custom-caption-1,
+        .custom-caption-2 {
+            font-size: 36px;
+            padding: 0 0 200px 0;
+        }
+        .stButton button {
+            width: 50%;
+            font-size: 25px;
+        }
     }
     </style>
 """
@@ -138,45 +239,30 @@ if uploaded_file is not None:
     # Save the original image as a numpy array
     image_np = np.array(image)
 
-    st.markdown('<div class="container">', 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 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)
+    col1, col2 = st.columns(2)
+    
+    with col1:
+        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)
+    with col2:
+        st.image(image, use_column_width=True)
+        st.markdown('<div class="custom-caption-1">필터를 입힌 이미지</div>', unsafe_allow_html=True)
 
-    button_clicked = st.button("상단의 두 사진을 딥페이크 모델에 학습시키기", key="deepfake_button")
+    button_clicked = st.button("상단의 두 사진을 딥페이크 모델에 학습시키기")
+    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)
 
     if button_clicked:
-        st.markdown('<div class="container">', 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)
+        with col1:
+            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 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)
-        st.markdown("<span>사전 방지 필터를 입힌 이미지는 딥페이크 알고리즘의 영향을 받지 않고 노이즈 처리가 되어 알아보기 힘든 사진을 출력. 즉, 딥페이크 사진 합성을 방해함.</span>", unsafe_allow_html=True)
-        st.markdown('</div>', unsafe_allow_html=True)
-
-        st.markdown('</div>', unsafe_allow_html=True)
-
-        # 인터뷰 관련 문구를 버튼 클릭 후 아래에 표시
-        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)
+        with col2:
+            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)
+            st.markdown("<span>사전 방지 필터를 입힌 이미지는 딥페이크 알고리즘의 영향을 받지 않고 노이즈 처리가 되어 알아보기 힘든 사진을 출력. 즉, 딥페이크 사진 합성을 방해함.</span>", unsafe_allow_html=True)