Upload app.py

app.py

@@ -0,0 +1,496 @@
+import streamlit as st
+import os
+import time
+import random
+from PIL import Image
+import glob
+from streamlit_autorefresh import st_autorefresh
+import base64
+from streamlit.components.v1 import html
+import io
+
+# 페이지 설정
+st.set_page_config(
+    page_title="디스플레이 컨텐츠 관리",
+    page_icon="🖼️",
+    layout="wide",
+    initial_sidebar_state="collapsed"
+)
+
+# 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;
+        background-position: center;
+        background-repeat: no-repeat;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        align-items: flex-end;
+        padding: 20px;
+    }
+    
+    /* 전환 버튼 스타일 */
+    .view-toggle {
+        background: rgba(0,0,0,0.5);
+        color: white;
+        border: none;
+        padding: 5px 10px;
+        margin: 5px;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 14px;
+    }
+    
+    /* 하단 컨트롤 패널 */
+    .controls-panel {
+        display: flex;
+        gap: 10px;
+        margin-top: 10px;
+    }
+    
+    /* 썸네일 스타일 */
+    .thumbnail-container {
+        display: flex;
+        align-items: center;
+        margin-bottom: 5px;
+    }
+    .thumbnail-container img {
+        max-width: 60px;
+        max-height: 60px;
+        object-fit: contain;
+        margin-right: 10px;
+        border-radius: 4px;
+        border: 1px solid #ddd;
+    }
+    
+    /* 애니메이션 수정 */
+    @keyframes fadeIn {
+        0% { opacity: 0; }
+        100% { opacity: 1; }
+    }
+    @keyframes zoomIn {
+        0% { transform: scale(0.8); opacity: 0; }
+        100% { transform: scale(1); opacity: 1; }
+    }
+    @keyframes slideIn {
+        0% { transform: translateY(-50px); opacity: 0; }
+        100% { transform: translateY(0); opacity: 1; }
+    }
+    @keyframes rotateIn {
+        0% { transform: rotate(-10deg) scale(0.8); opacity: 0; }
+        100% { transform: rotate(0) scale(1); opacity: 1; }
+    }
+    
+    .animate-fade {
+        animation: fadeIn 1s ease-out forwards;
+    }
+    .animate-zoom {
+        animation: zoomIn 1s ease-out forwards;
+    }
+    .animate-slide {
+        animation: slideIn 1s ease-out forwards;
+    }
+    .animate-rotate {
+        animation: rotateIn 1s ease-out forwards;
+    }
+</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 함수
+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;
+            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 */
+                elem.msRequestFullscreen();
+            }
+        }
+    }
+    
+    // 1초 후 전체화면 활성화
+    setTimeout(function() {
+        activateFullscreen();
+    }, 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 = """
+    <script>
+    // 배경 이미지 표시 방식 전환 함수
+    function toggleBackgroundFit() {
+        const fullView = document.querySelector('.full-view');
+        if (fullView) {
+            const currentFit = fullView.style.backgroundSize;
+            if (currentFit === 'cover') {
+                fullView.style.backgroundSize = 'contain';
+                document.getElementById('fit-toggle-btn').innerText = '화면에 꽉 차게';
+            } else {
+                fullView.style.backgroundSize = 'cover';
+                document.getElementById('fit-toggle-btn').innerText = '원본 비율 유지';
+            }
+        }
+    }
+    
+    // 전역 범위에 함수 노출 (window 객체에 추가)
+    window.applyBackgroundAnimation = function(animationType) {
+        const fullView = document.querySelector('.full-view');
+        if (fullView) {
+            // 모든 애니메이션 클래스 제거
+            fullView.classList.remove('animate-fade', 'animate-zoom', 'animate-slide', 'animate-rotate');
+            
+            // 새 애니메이션 클래스 추가
+            void fullView.offsetWidth; // 강제 리플로우
+            fullView.classList.add(animationType);
+        }
+    }
+    </script>
+    """
+    html(js_code, height=0, width=0)
+
+
+# 사이드바에 관리 기능 추가
+with st.sidebar:
+    st.title("컨텐츠 관리")
+    
+    # 이미지 업로드
+    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)
+            with open(file_path, "wb") as f:
+                f.write(file.getbuffer())
+            
+            # 목록에 추가 (중복 확인)
+            if file_path not in st.session_state.contents:
+                st.session_state.contents.append(file_path)
+        
+        st.success(f"{len(uploaded_files)}개 이미지가 추가되었습니다.")
+    
+    # 현재 콘텐츠 목록 및 삭제 기능
+    st.subheader("현재 컨텐츠 목록 및 순서 관리")
+    
+    if not st.session_state.contents:
+        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(2)
+            with col1:
+                if st.button("↑ 위로", key=f"up_{i}", help="한 위치 위로 이동"):
+                    move_up(i)
+                    st.rerun()
+            
+            with col2:
+                if st.button("↓ 아래로", key=f"down_{i}", help="한 위치 아래로 이동"):
+                    move_down(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
+                
+                st.rerun()
+            
+            st.markdown("<hr>", unsafe_allow_html=True)
+    
+    # 애니메이션 효과 선택
+    st.subheader("화면 전환 효과")
+    animation_options = {
+        "animate-fade": "페이드 인", 
+        "animate-zoom": "줌 인", 
+        "animate-slide": "슬라이드 인", 
+        "animate-rotate": "회전 인"
+    }
+    selected_animation = st.selectbox(
+        "화면 전환 애니메이션",
+        options=list(animation_options.keys()),
+        format_func=lambda x: animation_options[x],
+        index=list(animation_options.keys()).index(st.session_state.animation_type)
+    )
+    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(
+        "이미지 표시 방식",
+        options=list(fit_options.keys()),
+        format_func=lambda x: fit_options[x],
+        index=list(fit_options.keys()).index(st.session_state.fit_mode)
+    )
+    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  # 한 번만 실행되도록 리셋
+
+# 메인 컨텐츠 영역
+if st.session_state.get('preview_mode', False):
+    # 자동 새로고침을 위한 카운터
+    count = st_autorefresh(interval=preview_interval * 1000, key="refreshInterval")
+    
+    # 배경 이미지 전환 JS 삽입 (먼저 실행되어야 함)
+    inject_background_toggle_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 st.session_state.contents:
+        full_img_path = st.session_state.contents[st.session_state.current_image_index]
+        
+        # 웹에서 접근 가능한 이미지 URL로 변환 (Base64 인코딩 사용)
+        with open(full_img_path, "rb") as img_file:
+            img_data = base64.b64encode(img_file.read()).decode()
+        
+        # 이미지 확장자 가져오기 (기본값은 jpeg)
+        file_ext = os.path.splitext(full_img_path)[1][1:] or "jpeg"
+        
+        # 배경 이미지 설정과 컨트롤 버튼이 포함된 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}'); 
+                    background-size: {st.session_state.fit_mode};">
+            <div class="controls-panel">
+                <button id="fit-toggle-btn" class="view-toggle" onclick="toggleBackgroundFit()">
+                    {'원본 비율 유지' if st.session_state.fit_mode == 'cover' else '화면에 꽉 차게'}
+                </button>
+                <button id="exit-btn" class="view-toggle" onclick="window.location.href=window.location.pathname">
+                    미리보기 종료
+                </button>
+            </div>
+        </div>
+        <script>
+            // 전체화면 활성화
+            setTimeout(function() {{
+                var elem = document.documentElement;
+                if (elem.requestFullscreen) {{
+                    elem.requestFullscreen();
+                }} else if (elem.mozRequestFullScreen) {{
+                    elem.mozRequestFullScreen();
+                }} else if (elem.webkitRequestFullscreen) {{
+                    elem.webkitRequestFullscreen();
+                }} else if (elem.msRequestFullscreen) {{
+                    elem.msRequestFullscreen();
+                }}
+            }}, 1000);
+            
+            // 애니메이션 적용 (window 객체에서 함수 호출)
+            setTimeout(function() {{
+                if (typeof window.applyBackgroundAnimation === 'function') {{
+                    window.applyBackgroundAnimation('animate-{st.session_state.animation_type}');
+                }}
+            }}, 1500);
+        </script>
+        """
+        
+        # HTML 직접 삽입
+        st.markdown(background_html, unsafe_allow_html=True)
+        
+        # Streamlit 요소 숨기기
+        st.markdown("""
+        <style>
+            #MainMenu {visibility: hidden;}
+            header {visibility: hidden;}
+            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("디스플레이 컨텐츠 관리")
+    
+    if not st.session_state.contents:
+        st.info("사이드바에서 이미지를 추가하세요.")
+    else:
+        st.write("사이드바에서 이미지를 관리하고 아래 버튼을 클릭하여 전체화면 미리보기를 시작하세요.")
+        
+        # 이미지 미리보기 그리드
+        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
+