Update app.py

"grid로 반응형 만들어보기"

app.py

@@ -24,144 +24,29 @@ components.html(ga_code, height=0)
 # 반응형 디자인을 위한 CSS
 css = """
     <style>
-    /* 공통 스타일 */
-    .stFileUploader label,
-    .stRadio label,
-    .stButton button,
-    .survey-1 {
-        transition: all 0.3s ease;
-    }
-    .stFileUploader label {
-        font-size: 20px;
-        font-weight: 500;
-        color: #1f77b4;
-    }
-    .stRadio label {
-        font-size: 20px;
-        font-weight: 500;
-        color: #1f77b4;
-    }
-    .stRadio div {
-        display: flex;
+    .container {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
         gap: 20px;
+        align-items: center;
+        justify-items: center;
     }
-    .custom-caption-1 {
-        font-size: 36px;
-        font-weight: bold;
-        text-align: center;
-        margin-top: 10px;
-        padding: 0 0 20px 0;
-    }
-    .custom-caption-2 {
-        font-size: 36px;
-        font-weight: bold;
-        text-align: center;
-        margin-top: 10px;
-        padding: 0 0 30px 0;
-    }
-    .button-container {
-        text-align: center;
-        margin-top: 30px;
-    }
-    .stButton button {
-        width: 50%;
-        font-size: 25px;
-        padding: 10px 20px;
-        background-color: #FFFFFF;
+
+    .custom-caption-1, .custom-caption-2 {
+        font-size: 20px;
         font-weight: bold;
-        color: black;
-        opacity: 0.8;
-        border: 3px solid black;
-        border-radius: 5px;
-        cursor: pointer;
-        margin: 0 auto 50px auto;
-        display: block;
-    }
-    .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;
+        color: white;
     }
-    .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;
+
+    @media only screen and (max-width: 768px) {
+        .container {
+            grid-template-columns: 1fr;
         }
-        .stButton button {
-            width: 50%;
-            font-size: 25px;
+
+        .custom-caption-1, .custom-caption-2 {
+            font-size: 16px;
         }
     }
     </style>
@@ -239,15 +124,19 @@ if uploaded_file is not None:
     # Save the original image as a numpy array
     image_np = np.array(image)
 
-    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 class="container">', unsafe_allow_html=True)
+
+    st.markdown('<div>', 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.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)
+    st.markdown('</div>', unsafe_allow_html=True)
 
     button_clicked = st.button("상단의 ��� 사진을 딥페이크 모델에 학습시키기")
     st.markdown('<p class="survey">위 서비스를 사용해 보셨거나, 저희 기술적 원리에 관심이 있으신 분들께선 아래의 간단한 인터뷰에 참여해 주시면 진심으로 감사드리겠습니다.</p>', unsafe_allow_html=True)
@@ -255,14 +144,20 @@ if uploaded_file is not None:
     st.markdown('<p class="survey-2">서비스를 이용해 주셔서 감사합니다! 좋은 하루 보내세요!</p>', unsafe_allow_html=True)
 
     if button_clicked:
-        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="container">', unsafe_allow_html=True)
+
+        st.markdown('<div>', 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 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)
+        st.markdown('<div>', 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)