Update app.py

app.py

@@ -331,12 +331,15 @@ HTML_TEMPLATE = '''
             background: white;
             border: 2px solid black;
             border-radius: 20px;
-            padding: 30px 15px 15px 15px;
+            padding: 15px;
             min-width: 100px;
             min-height: 50px;
             position: relative;
             width: 100%;
             height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
         }
 
         .speech-bubble-tail {
@@ -366,12 +369,15 @@ HTML_TEMPLATE = '''
             background: white;
             border: 2px solid black;
             border-radius: 50%;
-            padding: 40px 20px 20px 20px;
+            padding: 20px;
             min-width: 120px;
             min-height: 80px;
             position: relative;
             width: 100%;
             height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
         }
 
         .thought-bubble-dots {
@@ -402,23 +408,29 @@ HTML_TEMPLATE = '''
         .shout-bubble {
             background: white;
             border: 3px solid black;
-            padding: 30px 15px 15px 15px;
+            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: 30px 15px 15px 15px;
+            padding: 15px;
             min-width: 150px;
             min-height: 40px;
             width: 100%;
             height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
         }
 
         .narration-box .component-text {
@@ -428,67 +440,85 @@ HTML_TEMPLATE = '''
         .text-box {
             background: white;
             border: 2px solid black;
-            padding: 20px 10px 10px 10px;
+            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: 20px 10px 10px 10px;
+            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: 20px 10px 10px 10px;
+            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: 20px 10px 10px 10px;
+            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: 20px 10px 10px 10px;
+            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: 30px 15px 15px 15px;
+            padding: 15px;
             min-width: 100px;
             min-height: 40px;
             width: 100%;
             height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
         }
 
         .gradient-box .component-text {
@@ -507,8 +537,11 @@ HTML_TEMPLATE = '''
             color: black;
             text-align: center;
             padding: 5px;
-            overflow: visible;
-            line-height: 1.4;
+            overflow: hidden;
+            line-height: 1.5;
+            display: flex;
+            align-items: center;
+            justify-content: center;
         }
 
         /* 로딩 인디케이터 */
@@ -1304,4 +1337,7 @@ def index():
     return render_template_string(HTML_TEMPLATE)
 
 if __name__ == '__main__':
-    app.run(debug=True, port=5000)
+    import os
+    # Hugging Face Spaces는 PORT 환경 변수를 사용합니다
+    port = int(os.environ.get('PORT', 7860))
+    app.run(host='0.0.0.0', port=port, debug=False)