Update app.py

app.py

@@ -1,13 +1,10 @@
 import streamlit as st
 import os
-import time
-import random
-from PIL import Image
 import glob
-from streamlit_autorefresh import st_autorefresh
+import time
 import base64
 from streamlit.components.v1 import html
-import io
+from streamlit_autorefresh import st_autorefresh
 
 # 페이지 설정
 st.set_page_config(
@@ -17,223 +14,130 @@ st.set_page_config(
     initial_sidebar_state="collapsed"
 )
 
-# CSS 스타일 정의
+# 전역 CSS 설정
 st.markdown("""
 <style>
-    .main-content {
-        padding: 0;
-        max-width: 100%;
-    }
-    .stApp {
-        margin: 0;
-        padding: 0;
-    }
-    
-    /* 배경 이미지 스타일로 수정 */
+    /* 전체 화면 배경 이미지 스타일 */
     .full-view {
-        width: 100vw;
-        height: 100vh;
         position: fixed;
         top: 0;
         left: 0;
-        z-index: 9999;
-        background-color: #000;
-        background-size: cover;
+        width: 100vw;
+        height: 100vh;
         background-position: center;
         background-repeat: no-repeat;
-        display: flex;
-        flex-direction: column;
-        justify-content: flex-end;
-        align-items: flex-end;
-        padding: 20px;
+        background-color: black;
+        transition: opacity 1s ease-in-out;
+        z-index: 9998;
     }
     
-    /* 전환 버튼 스타일 */
+    /* 컨트롤 패널 스타일 */
+    .controls-panel {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 9999;
+        opacity: 0.2;
+        transition: opacity 0.3s;
+    }
+    .controls-panel:hover {
+        opacity: 1;
+    }
     .view-toggle {
-        background: rgba(0,0,0,0.5);
+        background-color: rgba(0, 0, 0, 0.5);
         color: white;
         border: none;
-        padding: 5px 10px;
+        padding: 8px 16px;
         margin: 5px;
         border-radius: 4px;
         cursor: pointer;
         font-size: 14px;
     }
-    
-    /* 하단 컨트롤 패널 */
-    .controls-panel {
-        display: flex;
-        gap: 10px;
-        margin-top: 10px;
+    .view-toggle:hover {
+        background-color: rgba(0, 0, 0, 0.8);
     }
     
-    /* 썸네일 스타일 */
-    .thumbnail-container {
-        display: flex;
-        align-items: center;
-        margin-bottom: 5px;
+    /* 애니메이션 효과 */
+    .animate-fade {
+        animation: fadeIn 2s;
     }
-    .thumbnail-container img {
-        max-width: 60px;
-        max-height: 60px;
-        object-fit: contain;
-        margin-right: 10px;
-        border-radius: 4px;
-        border: 1px solid #ddd;
+    .animate-zoom {
+        animation: zoomIn 2s;
+    }
+    .animate-slide {
+        animation: slideIn 2s;
+    }
+    .animate-rotate {
+        animation: rotateIn 2s;
     }
     
-    /* 애니메이션 수정 */
     @keyframes fadeIn {
-        0% { opacity: 0; }
-        100% { opacity: 1; }
+        from { opacity: 0; }
+        to { opacity: 1; }
     }
     @keyframes zoomIn {
-        0% { transform: scale(0.8); opacity: 0; }
-        100% { transform: scale(1); opacity: 1; }
+        from { transform: scale(0.7); opacity: 0; }
+        to { transform: scale(1); opacity: 1; }
     }
     @keyframes slideIn {
-        0% { transform: translateY(-50px); opacity: 0; }
-        100% { transform: translateY(0); opacity: 1; }
+        from { transform: translateY(20%); opacity: 0; }
+        to { transform: translateY(0); opacity: 1; }
     }
     @keyframes rotateIn {
-        0% { transform: rotate(-10deg) scale(0.8); opacity: 0; }
-        100% { transform: rotate(0) scale(1); opacity: 1; }
+        from { transform: rotate(-10deg) scale(0.9); opacity: 0; }
+        to { transform: rotate(0) scale(1); opacity: 1; }
     }
     
-    .animate-fade {
-        animation: fadeIn 1s ease-out forwards;
+    /* 이미지 관리 그리드 스타일 */
+    .image-item {
+        position: relative;
+        margin-bottom: 10px;
     }
-    .animate-zoom {
-        animation: zoomIn 1s ease-out forwards;
+    .image-item img {
+        width: 100%;
+        border-radius: 4px;
     }
-    .animate-slide {
-        animation: slideIn 1s ease-out forwards;
+    .image-actions {
+        position: absolute;
+        top: 5px;
+        right: 5px;
     }
-    .animate-rotate {
-        animation: rotateIn 1s ease-out forwards;
+    .image-name {
+        font-size: 12px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
 </style>
 """, unsafe_allow_html=True)
 
-# 초기 설정 및 상태 관리
-if 'contents' not in st.session_state:
-    # contents 폴더 내의 모든 이미지 파일 로드
-    if not os.path.exists('contents'):
-        os.makedirs('contents')
-    
-    image_files = glob.glob('contents/*.jpg') + glob.glob('contents/*.jpeg') + glob.glob('contents/*.png')
-    st.session_state.contents = image_files
-
-if 'current_image_index' not in st.session_state:
-    st.session_state.current_image_index = 0
-
-if 'animation_type' not in st.session_state:
-    st.session_state.animation_type = 'animate-fade'
-
-if 'activate_fullscreen' not in st.session_state:
-    st.session_state.activate_fullscreen = False
-
-if 'fit_mode' not in st.session_state:
-    st.session_state.fit_mode = 'cover'  # 기본값은 화면에 꽉 차게
-
-# 여기에 추가하세요!
-if 'app_loaded' not in st.session_state:
-    st.session_state.app_loaded = False
-
-# 슬라이드쇼 자동 시작 로직
-if not st.session_state.app_loaded and not st.session_state.get('preview_mode', False):
-    if st.session_state.contents:  # 이미지가 있는 경우에만 자동 시작
-        st.session_state.preview_mode = True
-        st.session_state.preview_start_time = time.time()
-        st.session_state.activate_fullscreen = True
-        st.session_state.app_loaded = True  # 앱이 로드되었음을 표시
-        
-# 이미지 썸네일 생성 함수
-def create_thumbnail(image_path, size=(60, 60)):
-    try:
-        img = Image.open(image_path)
-        img.thumbnail(size)
-        buffered = io.BytesIO()
-        img.save(buffered, format=img.format or "JPEG")
-        return buffered.getvalue()
-    except Exception as e:
-        st.error(f"썸네일 생성 오류: {e}")
-        return None
-
-# 이미지 순서 변경 함수들
-def move_up(index):
-    if index > 0:
-        st.session_state.contents[index], st.session_state.contents[index-1] = st.session_state.contents[index-1], st.session_state.contents[index]
-
-def move_down(index):
-    if index < len(st.session_state.contents) - 1:
-        st.session_state.contents[index], st.session_state.contents[index+1] = st.session_state.contents[index+1], st.session_state.contents[index]
-
-def move_to_top(index):
-    if index > 0:
-        item = st.session_state.contents.pop(index)
-        st.session_state.contents.insert(0, item)
-
-def move_to_bottom(index):
-    if index < len(st.session_state.contents) - 1:
-        item = st.session_state.contents.pop(index)
-        st.session_state.contents.append(item)
-
-# 자동 전체화면 모드를 위한 JavaScript 함수
+# 전체 화면 JS 함수
 def inject_fullscreen_js():
     js_code = """
     <script>
-    // 전체화면 모드 활성화 함수
-    function activateFullscreen() {
-        // 전체화면 버튼 찾기 (Streamlit의 기본 전체화면 버튼)
-        const fullscreenButton = window.parent.document.querySelector('button[title="View fullscreen"]');
-        
-        if (fullscreenButton) {
-            // 버튼이 있으면 클릭
-            fullscreenButton.click();
-        } else {
-            // 버튼을 찾을 수 없으면 브라우저 API 사용
-            var elem = document.documentElement;
+    function toggleFullScreen() {
+        var elem = document.documentElement;
+        if (!document.fullscreenElement && !document.mozFullScreenElement &&
+            !document.webkitFullscreenElement && !document.msFullscreenElement) {
             if (elem.requestFullscreen) {
                 elem.requestFullscreen();
-            } else if (elem.mozRequestFullScreen) { /* Firefox */
-                elem.mozRequestFullScreen();
-            } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
-                elem.webkitRequestFullscreen();
-            } else if (elem.msRequestFullscreen) { /* IE/Edge */
+            } else if (elem.msRequestFullscreen) {
                 elem.msRequestFullscreen();
+            } else if (elem.mozRequestFullScreen) {
+                elem.mozRequestFullScreen();
+            } else if (elem.webkitRequestFullscreen) {
+                elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
             }
         }
     }
-    
-    // 1초 후 전체화면 활성화
+    // 전체 화면 활성화 시도
     setTimeout(function() {
-        activateFullscreen();
+        toggleFullScreen();
     }, 1000);
     </script>
     """
     html(js_code, height=0, width=0)
 
-# 애니메이션 JS를 주입하는 함수
-def inject_animation_js(animation_type):
-    js_code = f"""
-    <script>
-    // 애니메이션 적용
-    function applyAnimation() {{
-        const imageContainer = document.querySelector('.full-view img');
-        if (imageContainer) {{
-            imageContainer.classList.remove('animate-fade', 'animate-zoom', 'animate-slide', 'animate-rotate');
-            void imageContainer.offsetWidth; // 강제 리플로우
-            imageContainer.classList.add('{animation_type}');
-        }}
-    }}
-    
-    // 페이지 로드 후 애니메이션 적용
-    setTimeout(applyAnimation, 100);
-    </script>
-    """
-    html(js_code, height=0, width=0)
-
 # 배경 이미지 표시 방식 전환을 위한 JavaScript 함수
 def inject_background_toggle_js():
     js_code = """
@@ -269,149 +173,286 @@ def inject_background_toggle_js():
     """
     html(js_code, height=0, width=0)
 
+# 초기 설정 및 상태 관리
+if 'contents' not in st.session_state:
+    # contents 폴더 내의 모든 이미지 파일 로드
+    if not os.path.exists('contents'):
+        os.makedirs('contents')
+    
+    image_files = glob.glob('contents/*.jpg') + glob.glob('contents/*.jpeg') + glob.glob('contents/*.png')
+    st.session_state.contents = image_files
+
+if 'current_image_index' not in st.session_state:
+    st.session_state.current_image_index = 0
+
+if 'animation_type' not in st.session_state:
+    st.session_state.animation_type = 'animate-fade'
+
+if 'activate_fullscreen' not in st.session_state:
+    st.session_state.activate_fullscreen = False
+
+if 'fit_mode' not in st.session_state:
+    st.session_state.fit_mode = 'cover'  # 기본값은 화면에 꽉 차게
+
+if 'app_loaded' not in st.session_state:
+    st.session_state.app_loaded = False
+
+if 'fixed_image_enabled' not in st.session_state:
+    st.session_state.fixed_image_enabled = False
+    
+if 'fixed_image_path' not in st.session_state:
+    st.session_state.fixed_image_path = None
+
+# 슬라이드쇼 자동 시작 로직
+if not st.session_state.app_loaded and not st.session_state.get('preview_mode', False):
+    if st.session_state.contents:  # 이미지가 있는 경우에만 자동 시작
+        st.session_state.preview_mode = True
+        st.session_state.preview_start_time = time.time()
+        st.session_state.activate_fullscreen = True
+        st.session_state.app_loaded = True  # 앱이 로드되었음을 표시
 
-# 사이드바에 관리 기능 추가
+# 사이드바 - 이미지 관리
 with st.sidebar:
-    st.title("컨텐츠 관리")
+    st.title("📸 디스플레이 설정")
     
     # 이미지 업로드
-    uploaded_files = st.file_uploader("이미지 추가", type=["jpg", "jpeg", "png"], accept_multiple_files=True)
+    st.subheader("이미지 추가")
+    uploaded_files = st.file_uploader("이미지 파일을 업로드하세요", type=["jpg", "jpeg", "png"], accept_multiple_files=True)
+    
     if uploaded_files:
-        for file in uploaded_files:
-            # 파일 저장
-            file_path = os.path.join('contents', file.name)
+        for uploaded_file in uploaded_files:
+            # contents 디렉토리가 없으면 생성
+            if not os.path.exists('contents'):
+                os.makedirs('contents')
+            
+            # 저장 경로 생성
+            file_path = os.path.join('contents', uploaded_file.name)
+            
+            # 이미지 저장
             with open(file_path, "wb") as f:
-                f.write(file.getbuffer())
+                f.write(uploaded_file.getvalue())
             
-            # 목록에 추가 (중복 확인)
+            # 저장된 이미지를 목록에 추가 (중복 방지)
             if file_path not in st.session_state.contents:
                 st.session_state.contents.append(file_path)
         
         st.success(f"{len(uploaded_files)}개 이미지가 추가되었습니다.")
     
-    # 현재 콘텐츠 목록 및 삭제 기능
-    st.subheader("현재 컨텐츠 목록 및 순서 관리")
+    # 이미지 목록 및 관리
+    st.subheader("이미지 순서 조정")
     
     if not st.session_state.contents:
-        st.info("컨텐츠가 없습니다. 이미지를 추가해주세요.")
+        st.info("등록된 이미지가 없습니다. 이미지를 추가해주세요.")
     else:
-        # 표시 순서 관리
+        # 이미지 목록 표시 및 순서 조정
         for i, img_path in enumerate(st.session_state.contents):
-            img_name = os.path.basename(img_path)
-            
-            # 썸네일과 파일명을 포함한 HTML 생성
-            thumbnail_data = create_thumbnail(img_path)
-            if thumbnail_data:
-                thumbnail_b64 = base64.b64encode(thumbnail_data).decode()
-                st.markdown(f"""
-                <div class="thumbnail-container">
-                    <img src="data:image/jpeg;base64,{thumbnail_b64}" alt="{img_name}" />
-                    <div>{i+1}. {img_name}</div>
-                </div>
-                """, unsafe_allow_html=True)
-            else:
-                st.write(f"{i+1}. {img_name}")
+            col1, col2 = st.columns([3, 1])
             
-            # 순서 버튼들
-            col1, col2 = st.columns(2)
             with col1:
-                if st.button("↑ 위로", key=f"up_{i}", help="한 위치 위로 이동"):
-                    move_up(i)
-                    st.rerun()
+                st.text(os.path.basename(img_path))
+                st.image(img_path, width=150)
             
             with col2:
-                if st.button("↓ 아래로", key=f"down_{i}", help="한 위치 아래로 이동"):
-                    move_down(i)
+                # 위로 이동 버튼
+                if i > 0 and st.button("👆", key=f"up_{i}"):
+                    st.session_state.contents[i], st.session_state.contents[i-1] = st.session_state.contents[i-1], st.session_state.contents[i]
                     st.rerun()
-            
-            col3, col4 = st.columns(2)
-            with col3:
-                if st.button("⤒ 맨위로", key=f"top_{i}", help="맨 위로 이동"):
-                    move_to_top(i)
-                    st.rerun()
-            
-            with col4:
-                if st.button("⤓ 맨아래로", key=f"bottom_{i}", help="맨 아래로 이동"):
-                    move_to_bottom(i)
-                    st.rerun()
-            
-            # 삭제 버튼
-            if st.button("🗑️ 삭제", key=f"del_{i}", help="이미지 삭제"):
-                if os.path.exists(img_path):
-                    # 파일 삭제 여부 확인
-                    if st.session_state.contents.count(img_path) == 1:
-                        os.remove(img_path)
                 
-                # 목록에서 제거
-                st.session_state.contents.remove(img_path)
-                
-                # 현재 이미지 인덱스 조정
-                if st.session_state.current_image_index >= len(st.session_state.contents):
-                    st.session_state.current_image_index = 0
+                # 아래로 이동 버튼
+                if i < len(st.session_state.contents) - 1 and st.button("👇", key=f"down_{i}"):
+                    st.session_state.contents[i], st.session_state.contents[i+1] = st.session_state.contents[i+1], st.session_state.contents[i]
+                    st.rerun()
                 
-                st.rerun()
+                # 삭제 버튼
+                if st.button("🗑️", key=f"delete_{i}"):
+                    del st.session_state.contents[i]
+                    st.rerun()
             
             st.markdown("<hr>", unsafe_allow_html=True)
     
-    # 애니메이션 효과 선택
-    st.subheader("화면 전환 효과")
+    # 이미지 고정 설정
+    st.subheader("이미지 고정 설정")
+    fixed_image_enabled = st.checkbox(
+        "한 이미지만 고정하여 표시", 
+        value=st.session_state.fixed_image_enabled,
+        help="체크하면 선택한 이미지만 계속 표시됩니다. 슬라이드쇼가 중지됩니다."
+    )
+
+    # 체크박스 상태가 변경되었을 때 세션 상태 업데이트
+    if fixed_image_enabled != st.session_state.fixed_image_enabled:
+        st.session_state.fixed_image_enabled = fixed_image_enabled
+        # 고정 모드가 비활성화되면 슬라이드쇼 재개
+        if not fixed_image_enabled and st.session_state.get('preview_mode', False):
+            st.session_state.preview_start_time = time.time()
+
+    # 이미지 고정 모드가 활성화된 경우에만 이미지 선택 드롭다운 표시
+    if st.session_state.fixed_image_enabled:
+        # 이미지 파일 경로에서 파일명만 추출하여 표시 옵션 생성
+        image_options = {img_path: os.path.basename(img_path) for img_path in st.session_state.contents}
+        
+        # 선택된 이미지가 없거나 목록에 없는 경우 첫 번째 이미지 선택
+        default_index = 0
+        if st.session_state.fixed_image_path in image_options:
+            default_index = list(image_options.keys()).index(st.session_state.fixed_image_path)
+        
+        # 이미지 선택 드롭다운
+        if st.session_state.contents:  # 이미지가 있는 경우에만 드롭다운 표시
+            selected_image = st.selectbox(
+                "고정할 이미지 선택",
+                options=list(image_options.keys()),
+                format_func=lambda x: image_options[x],
+                index=default_index
+            )
+            
+            # 선택된 이미지 저장
+            st.session_state.fixed_image_path = selected_image
+            
+            # 선택된 이미지 미리보기 표시
+            st.image(selected_image, caption="선택된 이미지", width=200)
+        else:
+            st.warning("표시할 이미지가 없습니다. 이미지를 추가해주세요.")
+    
+        # 애니메이션 효과 선택 (계속)
     animation_options = {
-        "animate-fade": "페이드 인", 
-        "animate-zoom": "줌 인", 
-        "animate-slide": "슬라이드 인", 
-        "animate-rotate": "회전 인"
+        'animate-fade': '페이드 인/아웃',
+        'animate-zoom': '줌 인/아웃',
+        'animate-slide': '슬라이드',
+        'animate-rotate': '회전'
     }
-    selected_animation = st.selectbox(
-        "화면 전환 애니메이션",
+    
+    selected_animation = st.radio(
+        "전환 효과 선택",
         options=list(animation_options.keys()),
         format_func=lambda x: animation_options[x],
-        index=list(animation_options.keys()).index(st.session_state.animation_type)
+        index=list(animation_options.keys()).index(st.session_state.animation_type) if st.session_state.animation_type in animation_options else 0
     )
+    
     if selected_animation != st.session_state.animation_type:
         st.session_state.animation_type = selected_animation
     
     # 재생 설정
     st.subheader("재생 설정")
-    preview_interval = st.slider("표시 간격 (초)", 2, 10, 5)
     
-    # 표시 옵션
-    fit_options = {"cover": "화면에 꽉 차게", "contain": "원본 비율 유지"}
-    selected_fit = st.selectbox(
+    # 이미지 표시 모드 선택
+    fit_options = {
+        'cover': '화면에 꽉 차게',
+        'contain': '원본 비율 유지'
+    }
+    
+    selected_fit = st.radio(
         "이미지 표시 방식",
         options=list(fit_options.keys()),
         format_func=lambda x: fit_options[x],
-        index=list(fit_options.keys()).index(st.session_state.fit_mode)
+        index=list(fit_options.keys()).index(st.session_state.fit_mode) if st.session_state.fit_mode in fit_options else 0
     )
+    
     if selected_fit != st.session_state.fit_mode:
         st.session_state.fit_mode = selected_fit
     
-    # 미리보기 시작 버튼
-    if st.button("전체화면 미리보기 시작", use_container_width=True):
-        st.session_state.preview_mode = True
-        st.session_state.preview_start_time = time.time()
-        st.session_state.activate_fullscreen = True
-        st.rerun()
-
-# 전체화면 모드 활성화 (조건부)
-if st.session_state.get('activate_fullscreen', False):
-    inject_fullscreen_js()
-    st.session_state.activate_fullscreen = False  # 한 번만 실행되도록 리셋
+    # 슬라이드쇼 간격 설정
+    preview_interval = st.slider("이미지 전환 간격 (초)", min_value=1, max_value=60, value=10)
+    
+    # 슬라이드쇼 시작/종료 버튼
+    col1, col2 = st.columns(2)
+    
+    with col1:
+        if st.button("🖼️ 미리보기 시작", use_container_width=True):
+            st.session_state.preview_mode = True
+            st.session_state.preview_start_time = time.time()
+            st.session_state.activate_fullscreen = False
+            st.rerun()
+    
+    with col2:
+        if st.button("🔍 전체화면 보기", use_container_width=True):
+            st.session_state.preview_mode = True
+            st.session_state.preview_start_time = time.time()
+            st.session_state.activate_fullscreen = True
+            st.rerun()
+    
+    # 미리보기 모드인 경우 종료 버튼 표시
+    if st.session_state.get('preview_mode', False):
+        if st.button("⏹️ 미리보기 종료", use_container_width=True):
+            st.session_state.preview_mode = False
+            st.session_state.activate_fullscreen = False
+            st.rerun()
 
 # 메인 컨텐츠 영역
 if st.session_state.get('preview_mode', False):
+    # 허깅페이스 UI 요소 숨기기 위한 CSS 추가
+    st.markdown("""
+    <style>
+        /* 허깅페이스 헤더 및 관련 UI 요소 숨기기 */
+        div.css-1avcm0n {display: none !important;}  /* 상단 헤더 */
+        div.css-14xtw13 {display: none !important;}  /* 공간 */
+        section.css-1lcbmhc {display: none !important;}  /* 사이드바 */
+        div.css-1dp5vir {display: none !important;}  /* 기타 UI 요소 */
+        div.e1nzilvr5 {display: none !important;}
+        div.viewerBadge_link__1S137 {display: none !important;}
+        div.css-1bgch32 {display: none !important;}
+        
+        /* Streamlit 요소 숨기기 */
+        #MainMenu {visibility: hidden !important;}
+        header {visibility: hidden !important;}
+        footer {visibility: hidden !important;}
+        
+        /* iframe 관련 설정 */
+        iframe {border: none !important;}
+        
+        /* 앱 컨테이너 전체 화면 설정 */
+        .main .block-container {
+            padding: 0 !important;
+            max-width: 100% !important;
+        }
+        .stApp {
+            margin: 0 !important;
+            padding: 0 !important;
+            height: 100vh !important;
+            width: 100vw !important;
+            overflow: hidden !important;
+        }
+        
+        /* 전체 화면 설정 강화 */
+        body {
+            margin: 0 !important;
+            padding: 0 !important;
+            overflow: hidden !important;
+        }
+        
+        /* 배경 이미지 컨테이너 수정 */
+        .full-view {
+            position: fixed !important;
+            top: 0 !important;
+            left: 0 !important;
+            width: 100vw !important;
+            height: 100vh !important;
+            z-index: 9999 !important;
+        }
+    </style>
+    """, unsafe_allow_html=True)
+    
     # 자동 새로고침을 위한 카운터
     count = st_autorefresh(interval=preview_interval * 1000, key="refreshInterval")
     
     # 배경 이미지 전환 JS 삽입 (먼저 실행되어야 함)
     inject_background_toggle_js()
     
+    # 전체화면 활성화 필요시 실행
+    if st.session_state.activate_fullscreen:
+        inject_fullscreen_js()
+    
     # 현재 인덱스 업데이트
     if count > 0 and st.session_state.contents:
-        st.session_state.current_image_index = (st.session_state.current_image_index + 1) % len(st.session_state.contents)
+        # 이미지 고정 모드가 활성화되지 않은 경우에만 이미지 변경
+        if not st.session_state.fixed_image_enabled:
+            st.session_state.current_image_index = (st.session_state.current_image_index + 1) % len(st.session_state.contents)
     
     # 화면에 배경 이미지로 표시
     if st.session_state.contents:
-        full_img_path = st.session_state.contents[st.session_state.current_image_index]
+        # 이미지 고정 모드가 활성화된 경우 고정 이미지 사용, 아니면 현재 인덱스 이미지 사용
+        if st.session_state.fixed_image_enabled and st.session_state.fixed_image_path:
+            full_img_path = st.session_state.fixed_image_path
+        else:
+            full_img_path = st.session_state.contents[st.session_state.current_image_index]
         
         # 웹에서 접근 가능한 이미지 URL로 변환 (Base64 인코딩 사용)
         with open(full_img_path, "rb") as img_file:
@@ -420,7 +461,7 @@ if st.session_state.get('preview_mode', False):
         # 이미지 확장자 가져오기 (기본값은 jpeg)
         file_ext = os.path.splitext(full_img_path)[1][1:] or "jpeg"
         
-        # 배경 이미지 설정과 컨트롤 버튼이 포함된 HTML 생성
+                # 배경 이미지 설정과 컨트롤 버튼이 포함된 HTML 생성
         background_html = f"""
         <div class="full-view animate-{st.session_state.animation_type}" 
              style="background-image: url('data:image/{file_ext};base64,{img_data}'); 
@@ -455,8 +496,22 @@ if st.session_state.get('preview_mode', False):
                     window.applyBackgroundAnimation('animate-{st.session_state.animation_type}');
                 }}
             }}, 1500);
+            
+            // 허깅페이스 요소 숨기기 강화
+            function hideHuggingfaceElements() {{
+                const huggingfaceElements = document.querySelectorAll('.css-1avcm0n, .css-14xtw13, .css-1lcbmhc, .css-1dp5vir, .e1nzilvr5, .viewerBadge_link__1S137, .css-1bgch32');
+                huggingfaceElements.forEach(el => {{
+                    if(el) el.style.display = 'none';
+                }});
+            }}
+            
+            // 여러 번 시도하여 UI 요소 숨기기
+            setTimeout(hideHuggingfaceElements, 1000);
+            setTimeout(hideHuggingfaceElements, 2000);
+            setTimeout(hideHuggingfaceElements, 5000);
         </script>
         """
+
         
         # HTML 직접 삽입
         st.markdown(background_html, unsafe_allow_html=True)
@@ -469,28 +524,36 @@ if st.session_state.get('preview_mode', False):
             footer {visibility: hidden;}
         </style>
         """, unsafe_allow_html=True)
-
-        
-    else:
-        st.info("표시할 이미지가 없습니다. 이미지를 추가해주세요.")
-        if st.button("미리보기 종료"):
-            st.session_state.preview_mode = False
-            st.rerun()
-
 else:
-    # 일반 모드 - 일반 관리 화면
-    st.title("디스플레이 컨텐츠 관리")
+    # 일반 모드 - 앱 소개 및 사용법
+    st.title("🖼️ 디지털 디스플레이 컨텐츠 관리")
     
     if not st.session_state.contents:
-        st.info("사이드바에서 이미지를 추가하세요.")
+        st.warning("⚠️ 등록된 이미지가 없습니다. 사이드바에서 이미지를 추가해주세요.")
     else:
-        st.write("사이드바에서 이미지를 관리하고 아래 버튼을 클릭하여 전체화면 미리보기를 시작하세요.")
-        
-        # 이미지 미리보기 그리드
+        st.success(f"✅ {len(st.session_state.contents)}개의 이미지가 등록되어 있습니다.")
+    
+    st.markdown("""
+    ### 사용 방법
+    1. 왼쪽 사이드바에서 이미지를 추가하세요.
+    2. 이미지 순서를 조정하고 전환 효과를 선택하세요.
+    3. 재생 설정에서 이미지 표시 방식과 전환 간격을 설정하세요.
+    4. 미리보기 시작 또는 전체화면 보기 버튼을 클릭하여 슬라이드쇼를 시작하세요.
+    
+    ### 기능 소개
+    - **이미지 순서 조정**: 👆👇 버튼으로 이미지 순서를 변경할 수 있습니다.
+    - **이미지 고정**: 특정 이미지 하나만 계속 표시하도록 설정할 수 있습니다.
+    - **전환 효과**: 페이드, 줌, 슬라이드, 회전 효과를 선택할 수 있습니다.
+    - **표시 방식**: 화면에 꽉 차게 또는 원본 비율을 유지하며 표시할 수 있습니다.
+    - **자동 전환**: 설정한 간격으로 이미지가 자동 전환됩니다.
+    
+    ### 이미지 미리보기
+    """)
+    
+    # 이미지 그리드로 표시
+    if st.session_state.contents:
         cols = st.columns(4)
         for i, img_path in enumerate(st.session_state.contents):
-            if i < len(cols):
-                cols[i].image(img_path, caption=os.path.basename(img_path), width=200)
-            else:
-                break
+            with cols[i % 4]:
+                st.image(img_path, caption=os.path.basename(img_path), use_column_width=True)