Update app.py

app.py

@@ -908,15 +908,13 @@ radius_size=gr.themes.sizes.radius_md,
 text_size=gr.themes.sizes.text_md,
 )
 
-# 올바른 들여쓰기를 적용한 코드 부분
-
 with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
     # 갤러리 CSS 추가
     gr.HTML("""
     <style>
     /* 갤러리 스타일 */
     .gallery-container {
-    padding: 20px;
+        padding: 20px;
     }
     
     .gallery-tabs {
@@ -925,426 +923,416 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
         border-bottom: 1px solid #eee;
     }
     
-    /* 나머지 CSS 스타일 유지 */
-    </style>
-    """)
-
-
-.gallery-tabs {
-    display: flex;
-    margin-bottom: 20px;
-    border-bottom: 1px solid #eee;
-}
-
-.gallery-tab {
-    padding: 10px 20px;
-    cursor: pointer;
-    font-weight: 500;
-    border-bottom: 2px solid transparent;
-}
-
-.gallery-tab.active {
-    border-color: var(--primary-color);
-    color: var(--primary-color);
-}
-
-.gallery-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 20px;
-    margin-bottom: 30px;
-}
-
-.game-card {
-    background: white;
-    border-radius: 8px;
-    overflow: hidden;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-    transition: transform 0.3s ease;
-}
-
-.game-card:hover {
-    transform: translateY(-5px);
-}
-
-.game-preview {
-    position: relative;
-    height: 200px;
-    display: block;
-}
-
-.game-preview img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.game-preview-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0,0,0,0.4);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-}
-
-.game-preview-overlay span {
-    color: white;
-    font-weight: bold;
-    background: rgba(0,0,0,0.5);
-    padding: 8px 16px;
-    border-radius: 4px;
-}
-
-.game-preview:hover .game-preview-overlay {
-    opacity: 1;
-}
-
-.game-info {
-    padding: 15px;
-}
-
-.game-info h3 {
-    margin: 0 0 10px 0;
-    font-size: 18px;
-}
-
-.game-info h3 a {
-    color: #333;
-    text-decoration: none;
-}
-
-.game-desc {
-    color: #666;
-    font-size: 14px;
-    margin-bottom: 15px;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-}
-
-.game-meta {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: 12px;
-}
-
-.game-date {
-    color: #888;
-}
-
-.game-play-btn {
-    background: var(--primary-color);
-    color: white;
-    padding: 5px 12px;
-    border-radius: 4px;
-    text-decoration: none;
-    font-weight: 500;
-    font-size: 12px;
-}
-
-.gallery-pagination {
-    display: flex;
-    justify-content: center;
-    gap: 5px;
-    margin-top: 20px;
-}
-
-.page-btn {
-    background: white;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    padding: 5px 10px;
-    cursor: pointer;
-    font-size: 14px;
-}
-
-.page-btn.active {
-    background: var(--primary-color);
-    color: white;
-    border-color: var(--primary-color);
-}
-
-.gallery-empty {
-    text-align: center;
-    padding: 50px 0;
-    color: #666;
-}
-
-.admin-panel {
-    background: #f9f9f9;
-    padding: 20px;
-    border-radius: 8px;
-    margin-top: 30px;
-}
-
-.admin-title {
-    font-size: 18px;
-    font-weight: bold;
-    margin-bottom: 15px;
-}
-
-.admin-form {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr auto;
-    gap: 10px;
-    align-items: center;
-}
-
-.admin-input {
-    padding: 8px 12px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-}
-
-.admin-btn {
-    background: var(--primary-color);
-    color: white;
-    border: none;
-    border-radius: 4px;
-    padding: 8px 12px;
-    cursor: pointer;
-}
-
-/* 갤러리 에러 스타일 추가 */
-.gallery-error {
-    padding: 20px;
-    background-color: #fff2f0;
-    border: 1px solid #ffccc7;
-    border-radius: 4px;
-    color: #f5222d;
-    text-align: center;
-    margin: 20px 0;
-}
-
-/* 모바일 응답형 */
-@media (max-width: 768px) {
-    .gallery-grid {
-        grid-template-columns: repeat(2, 1fr);
+    .gallery-tab {
+        padding: 10px 20px;
+        cursor: pointer;
+        font-weight: 500;
+        border-bottom: 2px solid transparent;
     }
-}
-
-@media (max-width: 480px) {
+    
+    .gallery-tab.active {
+        border-color: var(--primary-color);
+        color: var(--primary-color);
+    }
+    
     .gallery-grid {
-        grid-template-columns: 1fr;
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 20px;
+        margin-bottom: 30px;
+    }
+    
+    .game-card {
+        background: white;
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+        transition: transform 0.3s ease;
+    }
+    
+    .game-card:hover {
+        transform: translateY(-5px);
+    }
+    
+    .game-preview {
+        position: relative;
+        height: 200px;
+        display: block;
+    }
+    
+    .game-preview img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+    
+    .game-preview-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0,0,0,0.4);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        transition: opacity 0.3s ease;
+    }
+    
+    .game-preview-overlay span {
+        color: white;
+        font-weight: bold;
+        background: rgba(0,0,0,0.5);
+        padding: 8px 16px;
+        border-radius: 4px;
+    }
+    
+    .game-preview:hover .game-preview-overlay {
+        opacity: 1;
+    }
+    
+    .game-info {
+        padding: 15px;
+    }
+    
+    .game-info h3 {
+        margin: 0 0 10px 0;
+        font-size: 18px;
+    }
+    
+    .game-info h3 a {
+        color: #333;
+        text-decoration: none;
+    }
+    
+    .game-desc {
+        color: #666;
+        font-size: 14px;
+        margin-bottom: 15px;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+    
+    .game-meta {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 12px;
+    }
+    
+    .game-date {
+        color: #888;
+    }
+    
+    .game-play-btn {
+        background: var(--primary-color);
+        color: white;
+        padding: 5px 12px;
+        border-radius: 4px;
+        text-decoration: none;
+        font-weight: 500;
+        font-size: 12px;
+    }
+    
+    .gallery-pagination {
+        display: flex;
+        justify-content: center;
+        gap: 5px;
+        margin-top: 20px;
+    }
+    
+    .page-btn {
+        background: white;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        padding: 5px 10px;
+        cursor: pointer;
+        font-size: 14px;
+    }
+    
+    .page-btn.active {
+        background: var(--primary-color);
+        color: white;
+        border-color: var(--primary-color);
+    }
+    
+    .gallery-empty {
+        text-align: center;
+        padding: 50px 0;
+        color: #666;
+    }
+    
+    .admin-panel {
+        background: #f9f9f9;
+        padding: 20px;
+        border-radius: 8px;
+        margin-top: 30px;
+    }
+    
+    .admin-title {
+        font-size: 18px;
+        font-weight: bold;
+        margin-bottom: 15px;
     }
     
     .admin-form {
-        grid-template-columns: 1fr;
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr auto;
+        gap: 10px;
+        align-items: center;
     }
-}
-</style>
-""")
-
-# 헤더 HTML
-header_html = gr.HTML("""
-<div class="app-header">
-    <h1>🎮 Vibe Game Craft</h1>
-    <p>설명을 입력하면 웹 기반 HTML5, JavaScript, CSS 게임을 생성합니다. 직관적인 인터페이스로 쉽게 게임을 만들고, 실시간으로 미리보기를 확인하세요.</p>
-</div>
+    
+    .admin-input {
+        padding: 8px 12px;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+    }
+    
+    .admin-btn {
+        background: var(--primary-color);
+        color: white;
+        border: none;
+        border-radius: 4px;
+        padding: 8px 12px;
+        cursor: pointer;
+    }
+    
+    /* 갤러리 에러 스타일 추가 */
+    .gallery-error {
+        padding: 20px;
+        background-color: #fff2f0;
+        border: 1px solid #ffccc7;
+        border-radius: 4px;
+        color: #f5222d;
+        text-align: center;
+        margin: 20px 0;
+    }
+    
+    /* 모바일 응답형 */
+    @media (max-width: 768px) {
+        .gallery-grid {
+            grid-template-columns: repeat(2, 1fr);
+        }
+    }
+    
+    @media (max-width: 480px) {
+        .gallery-grid {
+            grid-template-columns: 1fr;
+        }
+        
+        .admin-form {
+            grid-template-columns: 1fr;
+        }
+    }
+    </style>
+    """)
 
-<!-- 배포 결과 박스 - 헤더 바로 아래 위치 -->
-<div id="deploy-banner" style="display:none;" class="deploy-banner">
-    <div class="deploy-banner-content">
-        <div class="deploy-banner-icon">🚀</div>
-        <div class="deploy-banner-info">
-            <div id="deploy-banner-title" class="deploy-banner-title">배포 상태</div>
-            <div id="deploy-banner-message" class="deploy-banner-message"></div>
-        </div>
-        <div id="deploy-banner-url-container" class="deploy-banner-url-container" style="display:none;">
-            <a id="deploy-banner-url" href="#" target="_blank" class="deploy-banner-url"></a>
-            <button onclick="copyBannerUrl()" class="deploy-banner-copy-btn">복사</button>
+    # 헤더 HTML
+    header_html = gr.HTML("""
+    <div class="app-header">
+        <h1>🎮 Vibe Game Craft</h1>
+        <p>설명을 입력하면 웹 기반 HTML5, JavaScript, CSS 게임을 생성합니다. 직관적인 인터페이스로 쉽게 게임을 만들고, 실시간으로 미리보기를 확인하세요.</p>
+    </div>
+    
+    <!-- 배포 결과 박스 - 헤더 바로 아래 위치 -->
+    <div id="deploy-banner" style="display:none;" class="deploy-banner">
+        <div class="deploy-banner-content">
+            <div class="deploy-banner-icon">🚀</div>
+            <div class="deploy-banner-info">
+                <div id="deploy-banner-title" class="deploy-banner-title">배포 상태</div>
+                <div id="deploy-banner-message" class="deploy-banner-message"></div>
+            </div>
+            <div id="deploy-banner-url-container" class="deploy-banner-url-container" style="display:none;">
+                <a id="deploy-banner-url" href="#" target="_blank" class="deploy-banner-url"></a>
+                <button onclick="copyBannerUrl()" class="deploy-banner-copy-btn">복사</button>
+            </div>
         </div>
     </div>
-</div>
-
-<style>
-/* 전체 앱 스타일 */
-:root {
-    --primary-color: #9c89b8;
-    --secondary-color: #f0a6ca;
-    --accent-color: #b8bedd;
-    --background-color: #f9f7fd;
-    --panel-color: #ffffff;
-    --text-color: #3a3042;
-    --button-hover: #efc3e6;
-    --shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
-    --radius: 12px;
-}
-
-body {
-    background-color: var(--background-color);
-    color: var(--text-color);
-    font-family: 'Poppins', sans-serif;
-}
-
-/* 헤더 스타일 */
-.app-header {
-    text-align: center;
-    padding: 1.5rem 1rem;
-    margin-bottom: 0.5rem;
-    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
-    border-radius: var(--radius);
-    box-shadow: var(--shadow);
-    color: white;
-}
-
-.app-header h1 {
-    font-size: 2.5rem;
-    font-weight: 700;
-    margin-bottom: 0.5rem;
-    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
-}
-
-.app-header p {
-    font-size: 1.1rem;
-    opacity: 0.9;
-    max-width: 800px;
-    margin: 0 auto;
-}
-
-/* 배포 배너 스타일 - 헤더 바로 아래에 표시 */
-.deploy-banner {
-    background: white;
-    border-radius: var(--radius);
-    margin: 0.5rem auto 1.5rem auto;
-    box-shadow: var(--shadow);
-    max-width: 1200px;
-    border: 1px solid #ddd;
-    overflow: hidden;
-    transition: all 0.3s ease;
-}
-
-.deploy-banner.success {
-    border-left: 5px solid #34c759;
-}
-
-.deploy-banner.error {
-    border-left: 5px solid #ff3b30;
-}
-
-.deploy-banner.loading {
-    border-left: 5px solid #007aff;
-}
-
-.deploy-banner-content {
-    display: flex;
-    align-items: center;
-    padding: 15px 20px;
-}
-
-.deploy-banner-icon {
-    font-size: 24px;
-    margin-right: 15px;
-}
-
-.deploy-banner-info {
-    flex: 1;
-}
-
-.deploy-banner-title {
-    font-weight: bold;
-    font-size: 16px;
-    margin-bottom: 5px;
-}
-
-.deploy-banner-message {
-    color: #666;
-}
-
-.deploy-banner-url-container {
-    background: #f5f8ff;
-    padding: 10px 15px;
-    border-radius: 8px;
-    margin-left: 20px;
-    max-width: 400px;
-    display: flex;
-    align-items: center;
-}
-
-.deploy-banner-url {
-    color: #0066cc;
-    text-decoration: none;
-    font-weight: 500;
-    word-break: break-all;
-    flex: 1;
-}
-
-.deploy-banner-copy-btn {
-    background: #0066cc;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    padding: 5px 10px;
-    margin-left: 10px;
-    cursor: pointer;
-    font-size: 12px;
-}
-
-.deploy-banner-copy-btn:hover {
-    background: #0052a3;
-}
-</style>
-
-<script>
-// URL 복사 함수
-function copyBannerUrl() {
-    const url = document.getElementById('deploy-banner-url').href;
-    navigator.clipboard.writeText(url)
-        .then(() => {
-            const copyBtn = document.querySelector('.deploy-banner-copy-btn');
-            const originalText = copyBtn.textContent;
-            copyBtn.textContent = '복사됨!';
-            setTimeout(() => {
-                copyBtn.textContent = originalText;
-            }, 1000);
-        });
-}
-
-// 배포 배너 표시 함수
-function showDeployBanner(type, title, message, url) {
-    const banner = document.getElementById('deploy-banner');
-    const bannerTitle = document.getElementById('deploy-banner-title');
-    const bannerMessage = document.getElementById('deploy-banner-message');
-    const bannerUrlContainer = document.getElementById('deploy-banner-url-container');
-    const bannerUrl = document.getElementById('deploy-banner-url');
-    
-    banner.className = 'deploy-banner ' + type;
-    bannerTitle.textContent = title;
-    bannerMessage.textContent = message;
-    
-    if (url) {
-        bannerUrl.href = url;
-        bannerUrl.textContent = url;
-        bannerUrlContainer.style.display = 'flex';
-    } else {
-        bannerUrlContainer.style.display = 'none';
+    
+    <style>
+    /* 전체 앱 스타일 */
+    :root {
+        --primary-color: #9c89b8;
+        --secondary-color: #f0a6ca;
+        --accent-color: #b8bedd;
+        --background-color: #f9f7fd;
+        --panel-color: #ffffff;
+        --text-color: #3a3042;
+        --button-hover: #efc3e6;
+        --shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
+        --radius: 12px;
     }
     
-    banner.style.display = 'block';
-}
+    body {
+        background-color: var(--background-color);
+        color: var(--text-color);
+        font-family: 'Poppins', sans-serif;
+    }
+    
+    /* 헤더 스타일 */
+    .app-header {
+        text-align: center;
+        padding: 1.5rem 1rem;
+        margin-bottom: 0.5rem;
+        background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
+        border-radius: var(--radius);
+        box-shadow: var(--shadow);
+        color: white;
+    }
+    
+    .app-header h1 {
+        font-size: 2.5rem;
+        font-weight: 700;
+        margin-bottom: 0.5rem;
+        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+    
+    .app-header p {
+        font-size: 1.1rem;
+        opacity: 0.9;
+        max-width: 800px;
+        margin: 0 auto;
+    }
+    
+    /* 배포 배너 스타일 - 헤더 바로 아래에 표시 */
+    .deploy-banner {
+        background: white;
+        border-radius: var(--radius);
+        margin: 0.5rem auto 1.5rem auto;
+        box-shadow: var(--shadow);
+        max-width: 1200px;
+        border: 1px solid #ddd;
+        overflow: hidden;
+        transition: all 0.3s ease;
+    }
+    
+    .deploy-banner.success {
+        border-left: 5px solid #34c759;
+    }
+    
+    .deploy-banner.error {
+        border-left: 5px solid #ff3b30;
+    }
+    
+    .deploy-banner.loading {
+        border-left: 5px solid #007aff;
+    }
+    
+    .deploy-banner-content {
+        display: flex;
+        align-items: center;
+        padding: 15px 20px;
+    }
+    
+    .deploy-banner-icon {
+        font-size: 24px;
+        margin-right: 15px;
+    }
+    
+    .deploy-banner-info {
+        flex: 1;
+    }
+    
+    .deploy-banner-title {
+        font-weight: bold;
+        font-size: 16px;
+        margin-bottom: 5px;
+    }
+    
+    .deploy-banner-message {
+        color: #666;
+    }
+    
+    .deploy-banner-url-container {
+        background: #f5f8ff;
+        padding: 10px 15px;
+        border-radius: 8px;
+        margin-left: 20px;
+        max-width: 400px;
+        display: flex;
+        align-items: center;
+    }
+    
+    .deploy-banner-url {
+        color: #0066cc;
+        text-decoration: none;
+        font-weight: 500;
+        word-break: break-all;
+        flex: 1;
+    }
+    
+    .deploy-banner-copy-btn {
+        background: #0066cc;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        padding: 5px 10px;
+        margin-left: 10px;
+        cursor: pointer;
+        font-size: 12px;
+    }
+    
+    .deploy-banner-copy-btn:hover {
+        background: #0052a3;
+    }
+    </style>
+    
+    <script>
+    // URL 복사 함수
+    function copyBannerUrl() {
+        const url = document.getElementById('deploy-banner-url').href;
+        navigator.clipboard.writeText(url)
+            .then(() => {
+                const copyBtn = document.querySelector('.deploy-banner-copy-btn');
+                const originalText = copyBtn.textContent;
+                copyBtn.textContent = '복사됨!';
+                setTimeout(() => {
+                    copyBtn.textContent = originalText;
+                }, 1000);
+            });
+    }
+    
+    // 배포 배너 표시 함수
+    function showDeployBanner(type, title, message, url) {
+        const banner = document.getElementById('deploy-banner');
+        const bannerTitle = document.getElementById('deploy-banner-title');
+        const bannerMessage = document.getElementById('deploy-banner-message');
+        const bannerUrlContainer = document.getElementById('deploy-banner-url-container');
+        const bannerUrl = document.getElementById('deploy-banner-url');
+        
+        banner.className = 'deploy-banner ' + type;
+        bannerTitle.textContent = title;
+        bannerMessage.textContent = message;
+        
+        if (url) {
+            bannerUrl.href = url;
+            bannerUrl.textContent = url;
+            bannerUrlContainer.style.display = 'flex';
+        } else {
+            bannerUrlContainer.style.display = 'none';
+        }
+        
+        banner.style.display = 'block';
+    }
+    
+    // 갤러리 탭 변경 핸들러
+    function changeGalleryTab(tabName) {
+        document.querySelectorAll('.gallery-tab').forEach(tab => {
+            tab.classList.remove('active');
+        });
+        document.getElementById('tab-' + tabName).classList.add('active');
+        
+        // 이벤트 발생
+        document.dispatchEvent(new CustomEvent('galleryTabChange', {
+            detail: { tab: tabName }
+        }));
+    }
+    </script>
+    """)
 
-// 갤러리 탭 변경 핸들러
-function changeGalleryTab(tabName) {
-    document.querySelectorAll('.gallery-tab').forEach(tab => {
-        tab.classList.remove('active');
-    });
-    document.getElementById('tab-' + tabName).classList.add('active');
-    
-    // 이벤트 발생
-    document.dispatchEvent(new CustomEvent('galleryTabChange', {
-        detail: { tab: tabName }
-    }));
-}
-</script>
-""")
 
 history = gr.State([])
 setting = gr.State({"system": SystemPrompt})