Update app.py

"반응형으로"

app.py

@@ -4,8 +4,10 @@ import cv2
 import numpy as np
 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>
@@ -16,8 +18,11 @@ ga_code = """
   gtag('config', 'G-PZPBGNENQG');
 </script>
 """
+
+# Streamlit에 GA 코드 삽입
 components.html(ga_code, height=0)
 
+# 나머지 Streamlit 코드
 st.title("딥페이크 사전 방지 필터(테스트)")
 st.markdown("")
 st.markdown("<span style='font-size: 18px;'>안녕하세요! 저희는 딥페이크로부터 여러분의 사진을 보호하는 솔루션을 개발하고 있습니다.</span>", unsafe_allow_html=True)
@@ -32,6 +37,21 @@ 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,
+    .survey-1,
+    .survey-2,
+    .a-tag,
+    a {
+        transition: all 0.3s ease;
+    }
     .stFileUploader label {
         font-size: 20px;
         font-weight: 500;
@@ -47,16 +67,18 @@ st.markdown(
         gap: 20px;
     }
     .custom-caption-1 {
-        font-size: 24px;
+        font-size: 36px;
         font-weight: bold;
         text-align: center;
         margin-top: 10px;
+        padding: 0 0 200px 0;
     }
     .custom-caption-2 {
-        font-size: 24px;
+        font-size: 36px;
         font-weight: bold;
         text-align: center;
         margin-top: 10px;
+        padding: 0 0 30px 0;
     }
     .button-container {
         text-align: center;
@@ -106,27 +128,61 @@ st.markdown(
         color: #FF0080;
         text-decoration: none;
     }
-    @media only screen and (max-width: 768px) {
-        .img-grid {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
+    
+    /* 스마트폰 화면 스타일 */
+    @media only screen and (max-width: 600px) {
+        .stFileUploader label,
+        .stRadio label,
+        .stButton button,
+        .survey-1 {
+            font-size: 16px;
         }
-        .img-grid img {
-            width: 90%;
-            height: auto;
+        .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: 769px) {
-        .img-grid {
-            display: flex;
-            flex-direction: row;
-            justify-content: center;
-            gap: 10px;
+    
+    /* 태블릿 화면 스타일 */
+    @media only screen and (min-width: 601px) and (max-width: 1024px) {
+        .stFileUploader label,
+        .stRadio label,
+        .stButton button,
+        .survey-1 {
+            font-size: 18px;
         }
-        .img-grid img {
-            width: 100%;
-            height: auto;
+        .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>
@@ -135,18 +191,31 @@ st.markdown(
 )
 
 def change_hair_to_blonde(image):
+    # Convert to OpenCV format
     image = np.array(image)
+    # Convert the image to HSV color space
     hsv = cv2.cvtColor(image, cv2.COLOR_RGB2HSV)
+
+    # Define the range for hair color (dark colors)
     lower_hair = np.array([0, 0, 0])
     upper_hair = np.array([180, 255, 30])
+
+    # Create a mask for hair
     mask = cv2.inRange(hsv, lower_hair, upper_hair)
+
+    # Change hair color to blonde (light yellow)
     hsv[mask > 0] = (30, 255, 200)
+
+    # Convert back to RGB color space
     image_blonde = cv2.cvtColor(hsv, cv2.COLOR_HSV2RGB)
     return image_blonde
 
 def add_noise(image):
+    # Convert to OpenCV format
     image_np = np.array(image)
+    # Generate random noise
     noise = np.random.normal(0, 25, image_np.shape).astype(np.uint8)
+    # Add noise to the image
     noisy_image = cv2.add(image_np, noise)
     return noisy_image
 
@@ -176,54 +245,33 @@ if uploaded_file is not None:
     
     st.write("이미지 처리 중...")
 
+    # Save the original image as a numpy array
     image_np = np.array(image)
-    processed_image = change_hair_to_blonde(image)
-    deepfake_image = add_noise(image)
-
-    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))
-
-    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)
+    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)
+
+    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("상단의 두 사진을 딥페이크 모델에 학습시키기")
     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)