Update app.py

"마지막"

app.py

@@ -47,18 +47,16 @@ st.markdown(
         gap: 20px;
     }
     .custom-caption-1 {
-        font-size: 36px;
+        font-size: 24px;
         font-weight: bold;
         text-align: center;
         margin-top: 10px;
-        padding: 0 0 200px 0;
     }
     .custom-caption-2 {
-        font-size: 36px;
+        font-size: 24px;
         font-weight: bold;
         text-align: center;
         margin-top: 10px;
-        padding: 0 0 30px 0;
     }
     .button-container {
         text-align: center;
@@ -109,10 +107,26 @@ st.markdown(
         text-decoration: none;
     }
     @media only screen and (max-width: 768px) {
-        .column-container {
+        .img-grid {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .img-grid img {
+            width: 90%;
+            height: auto;
+        }
+    }
+    @media only screen and (min-width: 769px) {
+        .img-grid {
             display: flex;
             flex-direction: row;
             justify-content: center;
+            gap: 10px;
+        }
+        .img-grid img {
+            width: 100%;
+            height: auto;
         }
     }
     </style>
@@ -163,31 +177,53 @@ if uploaded_file is not None:
     st.write("이미지 처리 중...")
 
     image_np = np.array(image)
+    processed_image = change_hair_to_blonde(image)
+    deepfake_image = add_noise(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)
+    def image_to_base64(image):
+        from io import BytesIO
+        import base64
+        buffered = BytesIO()
+        image.save(buffered, format="PNG")
+        return base64.b64encode(buffered.getvalue()).decode()
+
+    image_base64 = image_to_base64(image)
+    processed_image_base64 = image_to_base64(Image.fromarray(processed_image))
 
-    with col2:
-        st.image(image, use_column_width=True)
-        st.markdown('<div class="custom-caption-1">필터를 입힌 이미지</div>', unsafe_allow_html=True)
+    components.html(f"""
+    <div class="img-grid">
+        <div>
+            <img src="data:image/png;base64,{image_base64}" />
+            <div class="custom-caption-1">업로드한 이미지</div>
+        </div>
+        <div>
+            <img src="data:image/png;base64,{processed_image_base64}" />
+            <div class="custom-caption-1">필터를 입힌 이미지</div>
+        </div>
+    </div>
+    """, height=600)
 
     button_clicked = st.button("상단의 두 사진을 딥페이크 모델에 학습시키기")
+
+    if button_clicked:
+        processed_image_base64 = image_to_base64(Image.fromarray(processed_image))
+        deepfake_image_base64 = image_to_base64(Image.fromarray(deepfake_image))
+
+        components.html(f"""
+        <div class="img-grid">
+            <div>
+                <img src="data:image/png;base64,{processed_image_base64}" />
+                <div class="custom-caption-2">원본 이미지를 딥페이크 모델에 넣었을 경우</div>
+                <span>이해를 돕기 위해 사진에 노란색을 입히는 딥페이크 알고리즘 적용. 원본 이미지는 딥페이크 알고리즘의 영향을 받음.</span>
+            </div>
+            <div>
+                <img src="data:image/png;base64,{deepfake_image_base64}" />
+                <div class="custom-caption-2">사전 방지 필터 이미지를 딥페이크 모델에 넣었을 경우</div>
+                <span>사전 방지 필터를 입힌 이미지는 딥페이크 알고리즘의 영향을 받지 않고 노이즈 처리가 되어 알아보기 힘든 사진을 출력. 즉, 딥페이크 사진 합성을 방해함.</span>
+            </div>
+        </div>
+        """, height=600)
+    
     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:
-        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)
-        
-        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)