Spaces:

ginigen
/

webtoon-studio

Running

App Files Files Community

ginipick commited on Aug 12

Commit

2af4024

verified ·

1 Parent(s): 0a458e6

Update app.py

Browse files

Files changed (1) hide show

app.py +30 -1505

app.py CHANGED Viewed

@@ -1,1510 +1,35 @@
-from flask import Flask, render_template_string, send_file, jsonify
 import os
-import base64
-from io import BytesIO
-app = Flask(__name__)
-# HTML_TEMPLATE은 기존 코드 그대로 사용
-@app.route('/')
-def index():
-    # HTML_TEMPLATE에 기본 이미지 자동 로드 스크립트 추가
-    return render_template_string(HTML_TEMPLATE)
-@app.route('/webtoon.png')
-def serve_webtoon_image():
-    # 실제 webtoon.png 파일 체크
-    image_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'webtoon.png')
-    if os.path.exists(image_path):
-        return send_file(image_path, mimetype='image/png')
-    else:
-        # 파일이 없으면 샘플 이미지 생성
-        from PIL import Image, ImageDraw, ImageFont
-        import io
-        img = Image.new('RGB', (700, 1000), color='#f0f0f0')
-        draw = ImageDraw.Draw(img)
-        # 샘플 텍스트 추가
-        text = "샘플 이미지\n(webtoon.png를 업로드하세요)"
-        draw.text((350, 500), text, fill='#999', anchor='mm')
-        img_io = io.BytesIO()
-        img.save(img_io, 'PNG')
-        img_io.seek(0)
-        return send_file(img_io, mimetype='image/png')
-HTML_TEMPLATE = '''
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>웹툰 편집 스튜디오 Pro</title>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Black+Han+Sans&family=Jua&family=Do+Hyeon&family=Sunflower:wght@300;500;700&family=Cute+Font&family=Gamja+Flower&family=Hi+Melody&family=Nanum+Pen+Script&family=Stylish&family=Single+Day&family=Gaegu:wght@300;400;700&display=swap" rel="stylesheet">
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: 'Noto Sans KR', sans-serif;
-            background: #1a1a1a;
-            color: #fff;
-            overflow: hidden;
-        }
-        .container {
-            display: flex;
-            height: 100vh;
-        }
-        /* 좌측 툴바 */
-        .toolbar {
-            width: 320px;
-            background: #2a2a2a;
-            padding: 20px;
-            overflow-y: auto;
-            border-right: 1px solid #444;
-        }
-        .toolbar::-webkit-scrollbar {
-            width: 8px;
-        }
-        .toolbar::-webkit-scrollbar-track {
-            background: #1a1a1a;
-        }
-        .toolbar::-webkit-scrollbar-thumb {
-            background: #4a9eff;
-            border-radius: 4px;
-        }
-        .toolbar h2 {
-            font-size: 18px;
-            margin-bottom: 20px;
-            color: #fff;
-            border-bottom: 2px solid #4a9eff;
-            padding-bottom: 10px;
-        }
-        .tool-section {
-            margin-bottom: 30px;
-        }
-        .tool-section h3 {
-            font-size: 14px;
-            margin-bottom: 15px;
-            color: #aaa;
-            text-transform: uppercase;
-        }
-        /* 파일 업로드 영역 */
-        .file-upload {
-            border: 2px dashed #4a9eff;
-            border-radius: 8px;
-            padding: 20px;
-            text-align: center;
-            cursor: pointer;
-            transition: all 0.3s;
-            margin-bottom: 20px;
-        }
-        .file-upload:hover {
-            background: rgba(74, 158, 255, 0.1);
-            border-color: #6ab7ff;
-        }
-        .file-upload input {
-            display: none;
-        }
-        /* 파일 리스트 */
-        .file-list {
-            background: #333;
-            border-radius: 8px;
-            padding: 10px;
-            margin-top: 10px;
-            max-height: 150px;
-            overflow-y: auto;
-        }
-        .file-item {
-            font-size: 12px;
-            color: #aaa;
-            padding: 3px 0;
-            border-bottom: 1px solid #444;
-        }
-        .file-item:last-child {
-            border-bottom: none;
-        }
-        /* 컴포넌트 버튼들 */
-        .component-grid {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 8px;
-        }
-        .component-btn {
-            background: #3a3a3a;
-            border: 1px solid #555;
-            border-radius: 8px;
-            padding: 10px;
-            cursor: pointer;
-            transition: all 0.3s;
-            text-align: center;
-            color: #fff;
-        }
-        .component-btn:hover {
-            background: #4a4a4a;
-            border-color: #4a9eff;
-            transform: translateY(-2px);
-        }
-        .component-btn svg {
-            width: 35px;
-            height: 35px;
-            margin-bottom: 3px;
-        }
-        .component-btn span {
-            display: block;
-            font-size: 11px;
-        }
-        /* 속성 편집 패널 */
-        .properties-panel {
-            background: #333;
-            border-radius: 8px;
-            padding: 15px;
-            margin-top: 20px;
-        }
-        .property-group {
-            margin-bottom: 15px;
-        }
-        .property-group label {
-            display: block;
-            font-size: 12px;
-            color: #aaa;
-            margin-bottom: 5px;
-        }
-        .property-group input,
-        .property-group select,
-        .property-group textarea {
-            width: 100%;
-            padding: 8px;
-            background: #2a2a2a;
-            border: 1px solid #444;
-            border-radius: 4px;
-            color: #fff;
-        }
-        .color-picker {
-            display: grid;
-            grid-template-columns: repeat(6, 1fr);
-            gap: 5px;
-        }
-        .color-option {
-            width: 35px;
-            height: 35px;
-            border-radius: 4px;
-            cursor: pointer;
-            border: 2px solid transparent;
-        }
-        .color-option.selected {
-            border-color: #4a9eff;
-            box-shadow: 0 0 10px rgba(74, 158, 255, 0.5);
-        }
-        /* 메인 작업 영역 */
-        .workspace {
-            flex: 1;
-            display: flex;
-            flex-direction: column;
-            background: #1a1a1a;
-        }
-        .workspace-header {
-            background: #2a2a2a;
-            padding: 15px 20px;
-            border-bottom: 1px solid #444;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        .workspace-tools {
-            display: flex;
-            gap: 10px;
-        }
-        .tool-btn {
-            background: #3a3a3a;
-            border: 1px solid #555;
-            border-radius: 6px;
-            padding: 8px 16px;
-            color: #fff;
-            cursor: pointer;
-            transition: all 0.3s;
-        }
-        .tool-btn:hover {
-            background: #4a4a4a;
-            border-color: #4a9eff;
-        }
-        .tool-btn.primary {
-            background: #4a9eff;
-            border-color: #4a9eff;
-        }
-        .tool-btn.primary:hover {
-            background: #6ab7ff;
-        }
-        /* 캔버스 영역 */
-        .canvas-container {
-            flex: 1;
-            overflow: auto;
-            padding: 20px;
-            display: flex;
-            justify-content: center;
-            background: #222;
-            position: relative;
-        }
-        .canvas-wrapper {
-            position: relative;
-            background: white;
-            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
-            min-height: 800px;
-            width: 700px;
-        }
-        /* 이미지 컨테이너 */
-        .image-container {
-            position: relative;
-            width: 100%;
-        }
-        .image-number {
-            position: absolute;
-            left: -40px;
-            top: 10px;
-            background: #4a9eff;
-            color: white;
-            width: 30px;
-            height: 30px;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: bold;
-            font-size: 14px;
-            z-index: 10;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
-        }
-        .webtoon-image {
-            width: 100%;
-            display: block;
-            margin-bottom: 20px;
-        }
-        /* 드래그 가능한 컴포넌트 */
-        .draggable-component {
-            position: absolute;
-            cursor: move;
-            user-select: none;
-            z-index: 50;
-        }
-        .draggable-component.dragging {
-            z-index: 1000;
-            opacity: 0.8;
-        }
-        .draggable-component.selected {
-            outline: 2px solid #4a9eff;
-            z-index: 100;
-        }
-        .draggable-component .resize-handle {
-            position: absolute;
-            width: 10px;
-            height: 10px;
-            background: #4a9eff;
-            border: 1px solid #fff;
-            display: none;
-        }
-        .draggable-component.selected .resize-handle {
-            display: block;
-        }
-        .resize-handle.nw { top: -5px; left: -5px; cursor: nw-resize; }
-        .resize-handle.ne { top: -5px; right: -5px; cursor: ne-resize; }
-        .resize-handle.sw { bottom: -5px; left: -5px; cursor: sw-resize; }
-        .resize-handle.se { bottom: -5px; right: -5px; cursor: se-resize; }
-        /* 말풍선 스타일들 */
-        .speech-bubble {
-            background: white;
-            border: 2px solid black;
-            border-radius: 20px;
-            padding: 15px;
-            min-width: 100px;
-            min-height: 50px;
-            position: relative;
-            width: 100%;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-sizing: border-box;
-        }
-        .speech-bubble .component-text {
-            margin-top: 0;
-            padding-top: 8px;
-            padding-bottom: 8px;
-        }
-        .speech-bubble-tail {
-            position: absolute;
-            bottom: -10px;
-            left: 20px;
-            width: 0;
-            height: 0;
-            border-left: 10px solid transparent;
-            border-right: 10px solid transparent;
-            border-top: 10px solid black;
-        }
-        .speech-bubble-tail::after {
-            content: '';
-            position: absolute;
-            bottom: 3px;
-            left: -10px;
-            width: 0;
-            height: 0;
-            border-left: 10px solid transparent;
-            border-right: 10px solid transparent;
-            border-top: 10px solid white;
-        }
-        .thought-bubble {
-            background: white;
-            border: 2px solid black;
-            border-radius: 50%;
-            padding: 20px;
-            min-width: 120px;
-            min-height: 80px;
-            position: relative;
-            width: 100%;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-sizing: border-box;
-        }
-        .thought-bubble .component-text {
-            margin-top: 0;
-            padding-top: 8px;
-            padding-bottom: 8px;
-        }
-        .thought-bubble-dots {
-            position: absolute;
-            bottom: -25px;
-            left: 20px;
-        }
-        .thought-dot {
-            position: absolute;
-            background: white;
-            border: 2px solid black;
-            border-radius: 50%;
-        }
-        .thought-dot.large {
-            width: 20px;
-            height: 20px;
-        }
-        .thought-dot.small {
-            width: 12px;
-            height: 12px;
-            left: -5px;
-            top: 10px;
-        }
-        .shout-bubble {
-            background: white;
-            border: 3px solid black;
-            padding: 15px;
-            min-width: 100px;
-            min-height: 50px;
-            position: relative;
-            width: 100%;
-            height: 100%;
-            clip-path: polygon(10% 0%, 90% 0%, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0% 90%, 0% 10%);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-        .narration-box {
-            background: rgba(0, 0, 0, 0.85);
-            border: 2px solid white;
-            padding: 15px;
-            min-width: 150px;
-            min-height: 40px;
-            width: 100%;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-        .narration-box .component-text {
-            color: white !important;
-        }
-        .text-box {
-            background: white;
-            border: 2px solid black;
-            padding: 10px;
-            min-width: 100px;
-            min-height: 40px;
-            width: 100%;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-        .transparent-box {
-            background: rgba(255, 255, 255, 0.8);
-            border: 1px dashed #999;
-            padding: 10px;
-            min-width: 100px;
-            min-height: 40px;
-            width: 100%;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-        .action-effect {
-            background: transparent;
-            border: none;
-            padding: 10px;
-            min-width: 80px;
-            min-height: 40px;
-            width: 100%;
-            height: 100%;
-            font-weight: bold;
-            text-shadow: 2px 2px 0 white, -2px -2px 0 white, 2px -2px 0 white, -2px 2px 0 white;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-        .emotion-bubble {
-            background: #ffeb3b;
-            border: 2px solid black;
-            border-radius: 15px;
-            padding: 10px;
-            min-width: 80px;
-            min-height: 40px;
-            width: 100%;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-        .whisper-bubble {
-            background: #f0f0f0;
-            border: 1px dashed #666;
-            border-radius: 15px;
-            padding: 10px;
-            min-width: 100px;
-            min-height: 40px;
-            width: 100%;
-            height: 100%;
-            opacity: 0.9;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-        .gradient-box {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border: 2px solid white;
-            border-radius: 10px;
-            padding: 15px;
-            min-width: 100px;
-            min-height: 40px;
-            width: 100%;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-        .gradient-box .component-text {
-            color: white !important;
-        }
-        .component-text {
-            width: 100%;
-            height: 100%;
-            border: none;
-            background: transparent;
-            resize: none;
-            outline: none;
-            font-family: inherit;
-            font-size: 22px;
-            color: black;
-            text-align: center;
-            padding: 5px;
-            overflow: visible;
-            line-height: 1.5;
-            vertical-align: middle;
-            white-space: pre-wrap;
-            word-break: break-word;
-        }
-        /* 로딩 인디케이터 */
-        .loading {
-            display: none;
-            position: fixed;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            background: rgba(0,0,0,0.9);
-            padding: 30px;
-            border-radius: 10px;
-            z-index: 10000;
-            text-align: center;
-        }
-        .loading.active {
-            display: block;
-        }
-        .loading-spinner {
-            border: 3px solid #f3f3f3;
-            border-top: 3px solid #4a9eff;
-            border-radius: 50%;
-            width: 40px;
-            height: 40px;
-            animation: spin 1s linear infinite;
-            margin: 0 auto 10px;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        /* 이미지 간격 조절 */
-        .spacing-control {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-        .spacing-control input[type="range"] {
-            flex: 1;
-        }
-        .spacing-value {
-            width: 50px;
-            text-align: center;
-        }
-        /* 개별 저장 입력 */
-        .save-individual {
-            display: flex;
-            gap: 5px;
-            margin-top: 10px;
-        }
-        .save-individual input {
-            width: 60px;
-        }
-        .save-individual button {
-            flex: 1;
-            padding: 5px;
-            background: #28a745;
-            border: none;
-            border-radius: 4px;
-            color: white;
-            cursor: pointer;
-        }
-        .save-individual button:hover {
-            background: #5cbf5c;
-        }
-/* 배지 컨테이너 */
-/* 배지 컨테이너 - 기존 코드 대체 */
-.badges-container {
-    display: flex;
-    flex-direction: row;
-    gap: 10px;
-    margin-left: 20px;  /* 제목과 간격 */
-}
-.badges-container a {
-    display: block;
-    transition: transform 0.3s ease;
-    height: 28px;  /* 배지 높이 조정 */
-}
-.badges-container a:hover {
-    transform: scale(1.05);
-}
-.badges-container img {
-    height: 100%;  /* 배지 이미지 크기 조정 */
-}
-/* 워크스페이스 헤더 수정 */
-.workspace-header {
-    background: #2a2a2a;
-    padding: 15px 20px;
-    border-bottom: 1px solid #444;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-.workspace-header-left {
-    display: flex;
-    align-items: center;
-}
-    </style>
-</head>
-<body>
-    <div class="container">
-        <!-- 좌측 툴바 -->
-        <div class="toolbar">
-            <h2>🎨 웹툰 편집 스튜디오</h2>
-            <!-- 파일 업로드 -->
-            <div class="tool-section">
-                <h3>📁 이미지 업로드</h3>
-                <div class="file-upload" onclick="document.getElementById('fileInput').click()">
-                    <svg width="40" height="40" fill="#4a9eff">
-                        <rect x="5" y="10" width="30" height="25" fill="none" stroke="currentColor" stroke-width="2"/>
-                        <polyline points="15,25 20,20 25,25" fill="none" stroke="currentColor" stroke-width="2"/>
-                        <line x1="20" y1="20" x2="20" y2="30" stroke="currentColor" stroke-width="2"/>
-                    </svg>
-                    <p>클릭하여 이미지 선택</p>
-                    <p style="font-size: 11px; color: #888; margin-top: 5px;">파일명 기준 자동 정렬 (1.jpg, 2.jpg...)</p>
-                    <input type="file" id="fileInput" multiple accept="image/*">
-                </div>
-                <div id="fileList"></div>
-                <!-- 이미지 간격 조절 -->
-                <div class="property-group">
-                    <label>이미지 간격</label>
-                    <div class="spacing-control">
-                        <input type="range" id="imageSpacing" min="0" max="100" value="20" onchange="updateImageSpacing()">
-                        <span class="spacing-value" id="spacingValue">20px</span>
-                    </div>
-                </div>
-                <!-- 개별 이미지 저장 -->
-                <div class="property-group">
-                    <label>개별 이미지 저장</label>
-                    <div class="save-individual">
-                        <input type="number" id="imageNumber" placeholder="번호" min="1">
-                        <button onclick="exportSingleImage()">저장</button>
-                    </div>
-                </div>
-            </div>
-            <!-- 컴포넌트 -->
-            <div class="tool-section">
-                <h3>💬 말풍선 & 효과</h3>
-                <div class="component-grid">
-                    <div class="component-btn" onclick="addComponent('speech')">
-                        <svg viewBox="0 0 100 100" fill="none" stroke="white" stroke-width="2">
-                            <ellipse cx="50" cy="40" rx="40" ry="30"/>
-                            <path d="M 30 55 L 25 75 L 40 55"/>
-                        </svg>
-                        <span>말풍선</span>
-                    </div>
-                    <div class="component-btn" onclick="addComponent('thought')">
-                        <svg viewBox="0 0 100 100" fill="none" stroke="white" stroke-width="2">
-                            <ellipse cx="50" cy="40" rx="35" ry="25"/>
-                            <circle cx="30" cy="65" r="8"/>
-                            <circle cx="20" cy="75" r="5"/>
-                        </svg>
-                        <span>생각풍선</span>
-                    </div>
-                    <div class="component-btn" onclick="addComponent('shout')">
-                        <svg viewBox="0 0 100 100" fill="none" stroke="white" stroke-width="3">
-                            <polygon points="50,10 90,30 85,70 50,90 15,70 10,30"/>
-                        </svg>
-                        <span>외침풍선</span>
-                    </div>
-                    <div class="component-btn" onclick="addComponent('whisper')">
-                        <svg viewBox="0 0 100 100" fill="none" stroke="white" stroke-width="1" stroke-dasharray="3,3">
-                            <ellipse cx="50" cy="45" rx="35" ry="25"/>
-                        </svg>
-                        <span>속삭임</span>
-                    </div>
-                    <div class="component-btn" onclick="addComponent('emotion')">
-                        <svg viewBox="0 0 100 100" fill="#ffeb3b" stroke="white" stroke-width="2">
-                            <ellipse cx="50" cy="45" rx="35" ry="25"/>
-                        </svg>
-                        <span>감정표현</span>
-                    </div>
-                    <div class="component-btn" onclick="addComponent('action')">
-                        <svg viewBox="0 0 100 100" fill="none" stroke="white" stroke-width="2">
-                            <text x="50" y="50" text-anchor="middle" font-size="30" fill="white">!</text>
-                        </svg>
-                        <span>효과음</span>
-                    </div>
-                    <div class="component-btn" onclick="addComponent('narration')">
-                        <svg viewBox="0 0 100 100" fill="#333" stroke="white" stroke-width="2">
-                            <rect x="15" y="30" width="70" height="40"/>
-                        </svg>
-                        <span>나레이션</span>
-                    </div>
-                    <div class="component-btn" onclick="addComponent('box')">
-                        <svg viewBox="0 0 100 100" fill="none" stroke="white" stroke-width="2">
-                            <rect x="20" y="30" width="60" height="40"/>
-                        </svg>
-                        <span>텍스트박스</span>
-                    </div>
-                    <div class="component-btn" onclick="addComponent('transparent')">
-                        <svg viewBox="0 0 100 100" fill="none" stroke="white" stroke-width="2" stroke-dasharray="5,5">
-                            <rect x="20" y="30" width="60" height="40"/>
-                        </svg>
-                        <span>투명박스</span>
-                    </div>
-                    <div class="component-btn" onclick="addComponent('gradient')">
-                        <svg viewBox="0 0 100 100">
-                            <defs>
-                                <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
-                                    <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
-                                    <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
-                                </linearGradient>
-                            </defs>
-                            <rect x="20" y="30" width="60" height="40" fill="url(#grad1)" stroke="white" stroke-width="2"/>
-                        </svg>
-                        <span>그라디언트</span>
-                    </div>
-                </div>
-            </div>
-            <!-- 속성 편집 -->
-            <div class="tool-section">
-                <h3>⚙️ 속성 편집</h3>
-                <div class="properties-panel">
-                    <div class="property-group">
-                        <label>폰트</label>
-                        <select id="fontSelect" onchange="updateSelectedComponent()">
-                            <optgroup label="기본 폰트">
-                                <option value="Arial">Arial</option>
-                                <option value="Verdana">Verdana</option>
-                                <option value="Georgia">Georgia</option>
-                                <option value="'Times New Roman'">Times New Roman</option>
-                                <option value="'Courier New'">Courier New</option>
-                                <option value="'Comic Sans MS'">Comic Sans MS</option>
-                            </optgroup>
-                            <optgroup label="한글 폰트">
-                                <option value="'Noto Sans KR'" selected>노토 산스</option>
-                                <option value="'Black Han Sans'">검은고딕</option>
-                                <option value="'Jua'">주아</option>
-                                <option value="'Do Hyeon'">도현</option>
-                                <option value="'Sunflower'">해바라기</option>
-                                <option value="'Cute Font'">귀여운 글꼴</option>
-                                <option value="'Gamja Flower'">감자꽃</option>
-                                <option value="'Hi Melody'">하이 멜로디</option>
-                                <option value="'Nanum Pen Script'">나눔펜</option>
-                                <option value="'Stylish'">스타일리시</option>
-                                <option value="'Single Day'">싱글데이</option>
-                                <option value="'Gaegu'">개구쟁이</option>
-                            </optgroup>
-                        </select>
-                    </div>
-                    <div class="property-group">
-                        <label>글자 크기</label>
-                        <input type="number" id="fontSizeInput" value="22" min="8" max="72" onchange="updateSelectedComponent()">
-                    </div>
-                    <div class="property-group">
-                        <label>글자 굵기</label>
-                        <select id="fontWeightSelect" onchange="updateSelectedComponent()">
-                            <option value="100">아주 얇게</option>
-                            <option value="300">얇게</option>
-                            <option value="400" selected>보통</option>
-                            <option value="500">약간 굵게</option>
-                            <option value="700">굵게</option>
-                            <option value="900">아주 굵게</option>
-                        </select>
-                    </div>
-                    <div class="property-group">
-                        <label>글자 색상</label>
-                        <div class="color-picker">
-                            <div class="color-option selected" style="background: black" onclick="selectColor(this, 'black')"></div>
-                            <div class="color-option" style="background: white; border: 1px solid #ccc;" onclick="selectColor(this, 'white')"></div>
-                            <div class="color-option" style="background: #ff0000" onclick="selectColor(this, '#ff0000')"></div>
-                            <div class="color-option" style="background: #ff6b6b" onclick="selectColor(this, '#ff6b6b')"></div>
-                            <div class="color-option" style="background: #0066ff" onclick="selectColor(this, '#0066ff')"></div>
-                            <div class="color-option" style="background: #4ecdc4" onclick="selectColor(this, '#4ecdc4')"></div>
-                            <div class="color-option" style="background: #00b300" onclick="selectColor(this, '#00b300')"></div>
-                            <div class="color-option" style="background: #95e1d3" onclick="selectColor(this, '#95e1d3')"></div>
-                            <div class="color-option" style="background: #ffe100" onclick="selectColor(this, '#ffe100')"></div>
-                            <div class="color-option" style="background: #ff9800" onclick="selectColor(this, '#ff9800')"></div>
-                            <div class="color-option" style="background: #9c27b0" onclick="selectColor(this, '#9c27b0')"></div>
-                            <div class="color-option" style="background: #ff00ff" onclick="selectColor(this, '#ff00ff')"></div>
-                        </div>
-                    </div>
-                    <div class="property-group">
-                        <label>텍스트</label>
-                        <textarea id="textInput" rows="3" placeholder="텍스트 입력..." onkeyup="updateSelectedComponent()"></textarea>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!-- 메인 작업 영역 -->
-<!-- 메인 작업 영역 -->
-<div class="workspace">
-    <div class="workspace-header">
-        <div class="workspace-header-left">
-            <h1 style="font-size: 20px;">🎨 Webtoon Studio</h1>
-            <!-- 배지 컨테이너 추가 -->
-            <div class="badges-container">
-                <a href="https://huggingface.co/spaces/ginigen/AGI-WebToon" target="_blank">
-                    <img src="https://img.shields.io/static/v1?label=WEBTOON&message=Generator&color=%23800080&labelColor=%23ffa500&logo=huggingface&logoColor=white&style=for-the-badge" alt="badge">
-                </a>
-                <a href="https://huggingface.co/spaces/ginigen/webtoon-studio" target="_blank">
-                    <img src="https://img.shields.io/static/v1?label=WEBTOON&message=STUDIO&color=%2300ff00&labelColor=%23ffa500&logo=huggingface&logoColor=white&style=for-the-badge" alt="badge">
-                </a>
-            </div>
-        </div>
-        <div class="workspace-tools">
-            <button class="tool-btn" onclick="deleteSelected()">🗑️ 선택 삭제</button>
-            <button class="tool-btn" onclick="clearAll()">🔄 전체 초기화</button>
-            <button class="tool-btn primary" onclick="exportSingleImage()">💾 이미지 저장</button>
-        </div>
-    </div>
-            <div class="canvas-container">
-                <div class="canvas-wrapper" id="canvas">
-                    <!-- 업로드된 이미지와 컴포넌트들이 여기에 추가됩니다 -->
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="loading" id="loading">
-        <div class="loading-spinner"></div>
-        <p>처리 중...</p>
-    </div>
-    <!-- html2canvas 라이브러리 -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
-    <script>
-        let selectedComponent = null;
-        let isDragging = false;
-        let isResizing = false;
-        let dragOffset = { x: 0, y: 0 };
-        let componentCounter = 0;
-        let selectedColor = 'black';
-        let uploadedImages = [];
-        let currentDragElement = null;
-        const DEFAULT_FONT_SIZE = 22; // 기본 글자 크기 상수
-        // 페이지 로드 시 기본 이미지 로드
-        window.addEventListener('DOMContentLoaded', function() {
-            loadDefaultImage();
-        });
-        // 기본 이미지 로드 함수
-        function loadDefaultImage() {
-            const canvas = document.getElementById('canvas');
-            // 이미지 컨테이너 생성
-            const container = document.createElement('div');
-            container.className = 'image-container';
-            container.id = 'image-container-1';
-            // 번호 라벨 생성
-            const numberLabel = document.createElement('div');
-            numberLabel.className = 'image-number';
-            numberLabel.textContent = '1';
-            // 이미지 생성
-            const img = document.createElement('img');
-            img.src = 'webtoon.png';
-            img.className = 'webtoon-image';
-            img.alt = 'webtoon.png';
-            img.id = 'webtoon-image-1';
-            // 이미지 로드 에러 처리
-            img.onerror = function() {
-                console.error('기본 이미지(webtoon.png)를 불러올 수 없습니다.');
-                // 에러 시 파일 리스트에 메시지 표시
-                const fileList = document.getElementById('fileList');
-                fileList.innerHTML = '<p style="font-size: 12px; color: #ff6b6b;">⚠️ webtoon.png 파일을 찾을 수 없습니다.</p>';
-            };
-            // 이미지 로드 성공 시
-            img.onload = function() {
-                // 파일 리스트 업데이트
-                const fileList = document.getElementById('fileList');
-                fileList.innerHTML = '<p style="font-size: 12px; color: #4a9eff; margin-bottom: 10px;">✅ 기본 이미지 로드됨</p><div class="file-list"><div class="file-item">1. webtoon.png (기본)</div></div>';
-                // uploadedImages 배열에 추가
-                uploadedImages.push({
-                    id: 1,
-                    name: 'webtoon.png',
-                    element: img
-                });
-                // 이미지 간격 적용
-                updateImageSpacing();
-            };
-            container.appendChild(numberLabel);
-            container.appendChild(img);
-            canvas.appendChild(container);
-        }
-        // 자연스러운 정렬 함수
-        function naturalSort(a, b) {
-            const extractNumber = (filename) => {
-                const match = filename.match(/(\d+)/);
-                return match ? parseInt(match[1]) : 0;
-            };
-            const aNum = extractNumber(a.name);
-            const bNum = extractNumber(b.name);
-            if (aNum !== bNum) {
-                return aNum - bNum;
-            }
-            return a.name.localeCompare(b.name);
-        }
-        // 파일 업로드 처리
-        document.getElementById('fileInput').addEventListener('change', async function(e) {
-            const files = Array.from(e.target.files);
-            files.sort(naturalSort);
-            const canvas = document.getElementById('canvas');
-            canvas.querySelectorAll('.image-container').forEach(container => container.remove());
-            uploadedImages = [];
-            let fileListHTML = '<div class="file-list">';
-            const loadPromises = files.map((file, index) => {
-                return new Promise((resolve) => {
-                    if (file.type.startsWith('image/')) {
-                        const reader = new FileReader();
-                        reader.onload = function(event) {
-                            resolve({
-                                index: index,
-                                src: event.target.result,
-                                name: file.name
-                            });
-                        };
-                        reader.readAsDataURL(file);
-                    } else {
-                        resolve(null);
-                    }
-                });
-            });
-            const loadedImages = await Promise.all(loadPromises);
-            loadedImages.forEach((imageData, index) => {
-                if (imageData) {
-                    const container = document.createElement('div');
-                    container.className = 'image-container';
-                    container.id = 'image-container-' + (index + 1);
-                    const numberLabel = document.createElement('div');
-                    numberLabel.className = 'image-number';
-                    numberLabel.textContent = index + 1;
-                    const img = document.createElement('img');
-                    img.src = imageData.src;
-                    img.className = 'webtoon-image';
-                    img.alt = imageData.name;
-                    img.id = 'webtoon-image-' + (index + 1);
-                    container.appendChild(numberLabel);
-                    container.appendChild(img);
-                    canvas.appendChild(container);
-                    uploadedImages.push({
-                        id: index + 1,
-                        name: imageData.name,
-                        element: img
-                    });
-                    fileListHTML += `<div class="file-item">${index + 1}. ${imageData.name}</div>`;
-                }
-            });
-            fileListHTML += '</div>';
-            const fileList = document.getElementById('fileList');
-            fileList.innerHTML = '<p style="font-size: 12px; color: #4a9eff; margin-bottom: 10px;">✅ 업로드된 파일: ' + files.length + '개</p>' + fileListHTML;
-            updateImageSpacing();
-        });
-        // 이미지 간격 업데이트
-        function updateImageSpacing() {
-            const spacing = document.getElementById('imageSpacing').value;
-            document.getElementById('spacingValue').textContent = spacing + 'px';
-            document.querySelectorAll('.webtoon-image').forEach(img => {
-                img.style.marginBottom = spacing + 'px';
-            });
-        }
-        // 컴포넌트 추가 (기본 폰트 크기 수정)
-        function addComponent(type) {
-            const canvas = document.getElementById('canvas');
-            const component = document.createElement('div');
-            component.className = 'draggable-component';
-            component.id = 'component-' + componentCounter++;
-            const canvasContainer = document.querySelector('.canvas-container');
-            const scrollTop = canvasContainer.scrollTop;
-            component.style.left = '50px';
-            component.style.top = (scrollTop + 50) + 'px';
-            component.style.width = '150px';
-            component.style.height = '80px';
-            let innerContent = '';
-            switch(type) {
-                case 'speech':
-                    innerContent = `
-                        <div class="speech-bubble">
-                            <textarea class="component-text" placeholder="대사 입력..." style="font-size: ${DEFAULT_FONT_SIZE}px;"></textarea>
-                            <div class="speech-bubble-tail"></div>
-                        </div>`;
-                    break;
-                case 'thought':
-                    innerContent = `
-                        <div class="thought-bubble">
-                            <textarea class="component-text" placeholder="생각 입력..." style="font-size: ${DEFAULT_FONT_SIZE}px;"></textarea>
-                            <div class="thought-bubble-dots">
-                                <div class="thought-dot large"></div>
-                                <div class="thought-dot small"></div>
-                            </div>
-                        </div>`;
-                    break;
-                case 'shout':
-                    innerContent = `
-                        <div class="shout-bubble">
-                            <textarea class="component-text" placeholder="외침!" style="font-weight: bold; font-size: ${DEFAULT_FONT_SIZE}px;"></textarea>
-                        </div>`;
-                    break;
-                case 'whisper':
-                    innerContent = `
-                        <div class="whisper-bubble">
-                            <textarea class="component-text" placeholder="속삭임..." style="font-style: italic; font-size: ${DEFAULT_FONT_SIZE}px;"></textarea>
-                        </div>`;
-                    break;
-                case 'emotion':
-                    innerContent = `
-                        <div class="emotion-bubble">
-                            <textarea class="component-text" placeholder="♥ ♪ ★" style="font-size: ${DEFAULT_FONT_SIZE}px;"></textarea>
-                        </div>`;
-                    break;
-                case 'action':
-                    innerContent = `
-                        <div class="action-effect">
-                            <textarea class="component-text" placeholder="쿵!" style="font-size: 28px; font-weight: bold;"></textarea>
-                        </div>`;
-                    break;
-                case 'narration':
-                    innerContent = `
-                        <div class="narration-box">
-                            <textarea class="component-text" placeholder="나레이션..." style="font-size: ${DEFAULT_FONT_SIZE}px;"></textarea>
-                        </div>`;
-                    break;
-                case 'box':
-                    innerContent = `
-                        <div class="text-box">
-                            <textarea class="component-text" placeholder="텍스트 입력..." style="font-size: ${DEFAULT_FONT_SIZE}px;"></textarea>
-                        </div>`;
-                    break;
-                case 'transparent':
-                    innerContent = `
-                        <div class="transparent-box">
-                            <textarea class="component-text" placeholder="텍스트 입력..." style="font-size: ${DEFAULT_FONT_SIZE}px;"></textarea>
-                        </div>`;
-                    break;
-                case 'gradient':
-                    innerContent = `
-                        <div class="gradient-box">
-                            <textarea class="component-text" placeholder="특수 효과!" style="font-size: ${DEFAULT_FONT_SIZE}px;"></textarea>
-                        </div>`;
-                    break;
-            }
-            component.innerHTML = innerContent + `
-                <div class="resize-handle nw"></div>
-                <div class="resize-handle ne"></div>
-                <div class="resize-handle sw"></div>
-                <div class="resize-handle se"></div>
-            `;
-            canvas.appendChild(component);
-            // 이벤트 리스너 추가
-            component.addEventListener('mousedown', startDrag);
-            // 텍스트 영역 클릭 시 드래그 방지
-            const textArea = component.querySelector('.component-text');
-            if (textArea) {
-                textArea.addEventListener('mousedown', function(e) {
-                    e.stopPropagation();
-                });
-                textArea.addEventListener('click', function(e) {
-                    e.stopPropagation();
-                    selectComponent(component);
-                });
-            }
-            // 리사이즈 핸들 이벤트
-            component.querySelectorAll('.resize-handle').forEach(handle => {
-                handle.addEventListener('mousedown', startResize);
-            });
-            selectComponent(component);
-        }
-        // 컴포넌트 선택
-        function selectComponent(component) {
-            document.querySelectorAll('.draggable-component').forEach(c => {
-                c.classList.remove('selected');
-            });
-            component.classList.add('selected');
-            selectedComponent = component;
-            const textArea = component.querySelector('.component-text');
-            if (textArea) {
-                document.getElementById('textInput').value = textArea.value;
-                document.getElementById('fontSizeInput').value = parseInt(textArea.style.fontSize) || DEFAULT_FONT_SIZE;
-                document.getElementById('fontSelect').value = textArea.style.fontFamily || "'Noto Sans KR'";
-                document.getElementById('fontWeightSelect').value = textArea.style.fontWeight || '400';
-            }
-        }
-        // 드래그 시작
-        function startDrag(e) {
-            if (e.target.classList.contains('resize-handle')) return;
-            if (e.target.classList.contains('component-text')) return;
-            const component = e.currentTarget;
-            selectComponent(component);
-            isDragging = true;
-            currentDragElement = component;
-            // 드래그 중 클래스 추가
-            component.classList.add('dragging');
-            const canvasRect = document.getElementById('canvas').getBoundingClientRect();
-            const componentRect = component.getBoundingClientRect();
-            dragOffset.x = e.clientX - componentRect.left;
-            dragOffset.y = e.clientY - componentRect.top;
-            document.addEventListener('mousemove', drag);
-            document.addEventListener('mouseup', stopDrag);
-            e.preventDefault();
-        }
-        // 드래그 중
-        function drag(e) {
-            if (!isDragging || !currentDragElement) return;
-            const canvas = document.getElementById('canvas');
-            const canvasRect = canvas.getBoundingClientRect();
-            const containerScrollTop = document.querySelector('.canvas-container').scrollTop;
-            let newX = e.clientX - canvasRect.left - dragOffset.x;
-            let newY = e.clientY - canvasRect.top - dragOffset.y + containerScrollTop;
-            // 캔버스 범위 내로 제한
-            newX = Math.max(0, Math.min(newX, canvas.offsetWidth - currentDragElement.offsetWidth));
-            newY = Math.max(0, newY);
-            currentDragElement.style.left = newX + 'px';
-            currentDragElement.style.top = newY + 'px';
-            e.preventDefault();
-        }
-        // 드래그 종료
-        function stopDrag(e) {
-            if (currentDragElement) {
-                currentDragElement.classList.remove('dragging');
-            }
-            isDragging = false;
-            currentDragElement = null;
-            document.removeEventListener('mousemove', drag);
-            document.removeEventListener('mouseup', stopDrag);
-            e.preventDefault();
-        }
-        // 리사이즈 시작
-        function startResize(e) {
-            e.stopPropagation();
-            isResizing = true;
-            const handle = e.target;
-            const component = handle.parentElement;
-            selectComponent(component);
-            const startX = e.clientX;
-            const startY = e.clientY;
-            const startWidth = component.offsetWidth;
-            const startHeight = component.offsetHeight;
-            const startLeft = component.offsetLeft;
-            const startTop = component.offsetTop;
-            function resize(e) {
-                if (!isResizing) return;
-                const dx = e.clientX - startX;
-                const dy = e.clientY - startY;
-                if (handle.classList.contains('se')) {
-                    component.style.width = Math.max(80, startWidth + dx) + 'px';
-                    component.style.height = Math.max(40, startHeight + dy) + 'px';
-                } else if (handle.classList.contains('sw')) {
-                    component.style.width = Math.max(80, startWidth - dx) + 'px';
-                    component.style.height = Math.max(40, startHeight + dy) + 'px';
-                    component.style.left = Math.min(startLeft + dx, startLeft + startWidth - 80) + 'px';
-                } else if (handle.classList.contains('ne')) {
-                    component.style.width = Math.max(80, startWidth + dx) + 'px';
-                    component.style.height = Math.max(40, startHeight - dy) + 'px';
-                    component.style.top = Math.min(startTop + dy, startTop + startHeight - 40) + 'px';
-                } else if (handle.classList.contains('nw')) {
-                    component.style.width = Math.max(80, startWidth - dx) + 'px';
-                    component.style.height = Math.max(40, startHeight - dy) + 'px';
-                    component.style.left = Math.min(startLeft + dx, startLeft + startWidth - 80) + 'px';
-                    component.style.top = Math.min(startTop + dy, startTop + startHeight - 40) + 'px';
-                }
-            }
-            function stopResize() {
-                isResizing = false;
-                document.removeEventListener('mousemove', resize);
-                document.removeEventListener('mouseup', stopResize);
-            }
-            document.addEventListener('mousemove', resize);
-            document.addEventListener('mouseup', stopResize);
-        }
-        // 선택된 컴포넌트 업데이트
-        function updateSelectedComponent() {
-            if (!selectedComponent) return;
-            const textArea = selectedComponent.querySelector('.component-text');
-            if (textArea) {
-                textArea.value = document.getElementById('textInput').value;
-                textArea.style.fontSize = document.getElementById('fontSizeInput').value + 'px';
-                textArea.style.fontFamily = document.getElementById('fontSelect').value;
-                textArea.style.fontWeight = document.getElementById('fontWeightSelect').value;
-                textArea.style.color = selectedColor;
-            }
-        }
-        // 색상 선택
-        function selectColor(element, color) {
-            document.querySelectorAll('.color-option').forEach(opt => {
-                opt.classList.remove('selected');
-            });
-            element.classList.add('selected');
-            selectedColor = color;
-            updateSelectedComponent();
-        }
-        // 선택된 컴포넌트 삭제
-        function deleteSelected() {
-            if (selectedComponent) {
-                selectedComponent.remove();
-                selectedComponent = null;
-                document.getElementById('textInput').value = '';
-            }
-        }
-        // 전체 초기화
-        function clearAll() {
-            if (confirm('모든 컴포넌트를 삭제하시겠습니까?')) {
-                document.querySelectorAll('.draggable-component').forEach(c => c.remove());
-                selectedComponent = null;
-                document.getElementById('textInput').value = '';
-            }
-        }
-        // 개별 이미지 저장
-        function exportSingleImage() {
-            const imageNumber = parseInt(document.getElementById('imageNumber').value);
-            if (!imageNumber || imageNumber < 1) {
-                alert('⚠️ 저장할 이미지 번호를 입력해주세요.');
-                return;
-            }
-            const imageContainer = document.getElementById('image-container-' + imageNumber);
-            if (!imageContainer) {
-                alert('⚠️ ' + imageNumber + '번 이미지를 찾을 수 없습니다.');
-                return;
-            }
-            const loading = document.getElementById('loading');
-            loading.classList.add('active');
-            document.querySelectorAll('.draggable-component').forEach(c => {
-                c.classList.remove('selected');
-            });
-            const numberLabel = imageContainer.querySelector('.image-number');
-            if (numberLabel) numberLabel.style.display = 'none';
-            const tempContainer = document.createElement('div');
-            tempContainer.style.position = 'relative';
-            tempContainer.style.width = imageContainer.offsetWidth + 'px';
-            tempContainer.style.background = 'white';
-            const imgClone = imageContainer.querySelector('.webtoon-image').cloneNode(true);
-            imgClone.style.marginBottom = '0';
-            tempContainer.appendChild(imgClone);
-            const imageTop = imageContainer.offsetTop;
-            const imageBottom = imageTop + imageContainer.offsetHeight;
-            document.querySelectorAll('.draggable-component').forEach(component => {
-                const compTop = parseInt(component.style.top);
-                const compBottom = compTop + component.offsetHeight;
-                if (compTop < imageBottom && compBottom > imageTop) {
-                    const compClone = component.cloneNode(true);
-                    compClone.classList.remove('selected');
-                    compClone.style.top = (compTop - imageTop) + 'px';
-                    tempContainer.appendChild(compClone);
-                }
-            });
-            tempContainer.style.position = 'absolute';
-            tempContainer.style.left = '-9999px';
-            document.body.appendChild(tempContainer);
-            // html2canvas 옵션
-            html2canvas(tempContainer, {
-                backgroundColor: '#ffffff',
-                scale: 2,
-                useCORS: true,
-                logging: false,
-                scrollY: 0,
-                scrollX: 0,
-                windowHeight: tempContainer.scrollHeight,
-                windowWidth: tempContainer.scrollWidth,
-                onclone: function(clonedDoc) {
-                    // 클론된 문서에서 텍스트 영역 스타일 조정
-                    const textAreas = clonedDoc.querySelectorAll('.component-text');
-                    textAreas.forEach(textarea => {
-                        textarea.style.paddingTop = '10px';
-                        textarea.style.lineHeight = '1.6';
-                        textarea.style.overflow = 'visible';
-                    });
-                }
-            }).then(function(canvas) {
-                const link = document.createElement('a');
-                link.download = 'webtoon_' + imageNumber + '_' + new Date().getTime() + '.png';
-                link.href = canvas.toDataURL('image/png');
-                link.click();
-                document.body.removeChild(tempContainer);
-                if (numberLabel) numberLabel.style.display = 'flex';
-                loading.classList.remove('active');
-                alert('✅ ' + imageNumber + '번 이미지가 성공적으로 저장되었습니다!');
-            }).catch(function(error) {
-                document.body.removeChild(tempContainer);
-                if (numberLabel) numberLabel.style.display = 'flex';
-                loading.classList.remove('active');
-                console.error('Error:', error);
-                alert('⚠️ 이미지 저장 중 오류가 발생했습니다.');
-            });
-        }
-        // 캔버스 클릭 이벤트
-        document.getElementById('canvas').addEventListener('click', function(e) {
-            if (e.target === this || e.target.classList.contains('webtoon-image')) {
-                document.querySelectorAll('.draggable-component').forEach(c => {
-                    c.classList.remove('selected');
-                });
-                selectedComponent = null;
-                document.getElementById('textInput').value = '';
-            }
-        });
-        // 키보드 단축키
-        document.addEventListener('keydown', function(e) {
-            if (e.key === 'Delete' && selectedComponent) {
-                deleteSelected();
-            }
-        });
-    </script>
-</body>
-</html>
-'''
-# Hugging Face Spaces 또는 Render 배포용
-if __name__ == '__main__':
-    port = int(os.environ.get('PORT', 7860))
-    app.run(host='0.0.0.0', port=port, debug=False)

 import os
+import sys
+import streamlit as st
+from tempfile import NamedTemporaryFile
+def main():
+    try:
+        # Get the code from secrets
+        code = os.environ.get("MAIN_CODE")
+        if not code:
+            st.error("⚠️ The application code wasn't found in secrets. Please add the MAIN_CODE secret.")
+            return
+        # Create a temporary Python file
+        with NamedTemporaryFile(suffix='.py', delete=False, mode='w') as tmp:
+            tmp.write(code)
+            tmp_path = tmp.name
+        # Execute the code
+        exec(compile(code, tmp_path, 'exec'), globals())
+        # Clean up the temporary file
+        try:
+            os.unlink(tmp_path)
+        except:
+            pass
+    except Exception as e:
+        st.error(f"⚠️ Error loading or executing the application: {str(e)}")
+        import traceback
+        st.code(traceback.format_exc())
+if __name__ == "__main__":
+    main()