Hugging Face's logo

Spaces:
openfree
/
Vibe-Game
Paused

App Files Community
1
openfree commited on
Commit
ff01f60
·
verified ·
1 Parent(s): 76c18cb

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +154 -83
app.py CHANGED
@@ -1072,73 +1072,103 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
1072
  except Exception as e:
1073
  return {"status": "error", "message": f"배포 중 오류 발생: {str(e)}"}
1074
 
1075
- # handle_deploy 함수 수정 - JavaScript 스크립트 대신 HTML을 직접 반환하고 DOM 업데이트
 
1076
  def handle_deploy(code, deploy_status):
1077
  if not code:
1078
- # HTML 직접 반환 - JavaScript 없이 결과 표시
1079
- result_html = """
1080
- <div class="deploy-section">
1081
- <div class="deploy-header">📤 배포 결과</div>
1082
- <div id="deploy-result-box" class="deploy-result-box">
1083
- <div class="deploy-error">
1084
- <div class="error-icon">⚠️</div>
1085
- <div class="error-message">배포할 코드가 없습니다.</div>
1086
  </div>
1087
  </div>
1088
  </div>
1089
- <script>
1090
- updateDeployBanner('error', '⚠️ 배포 실패', '배포할 코드가 없습니다. 먼저 게임 코드를 생성해주세요.');
1091
- </script>
1092
  """
1093
- return result_html, {
 
 
 
 
 
 
 
 
 
 
 
1094
  "is_deployed": False,
1095
  "status": "error",
1096
  "message": "배포할 코드가 없습니다.",
1097
  "url": ""
1098
  }
1099
-
1100
  try:
1101
- # 로딩 상태 표시
1102
- loading_html = """
1103
- <div class="deploy-section">
1104
- <div class="deploy-header">📤 배포 결과</div>
1105
- <div id="deploy-result-box" class="deploy-result-box">
1106
- <div class="deploy-loading">
1107
- <div class="loading-spinner"></div>
1108
- <div class="loading-message">Vercel에 배포 중입니다...</div>
1109
- </div>
1110
- </div>
1111
- </div>
1112
- <script>
1113
- updateDeployBanner('loading', '🔄 배포 진행 중', 'Vercel에 게임을 배포하고 있습니다. 잠시만 기다려주세요.');
1114
- </script>
1115
- """
1116
- yield loading_html, deploy_status
1117
-
 
 
 
 
 
 
 
 
1118
  clean_code = remove_code_block(code)
1119
  result = deploy_to_vercel(clean_code)
1120
-
1121
  if result.get("status") == "success":
1122
  url = result.get("url")
1123
- success_html = f"""
1124
- <div class="deploy-section">
1125
- <div class="deploy-header">📤 배포 결과</div>
1126
- <div id="deploy-result-box" class="deploy-result-box">
1127
- <div class="deploy-success">
1128
- <div class="success-icon">✅</div>
1129
- <div class="success-message">배포 완료!</div>
1130
- <div class="url-box">
1131
- <a href="{url}" target="_blank">{url}</a>
1132
- <button class="copy-btn" onclick="navigator.clipboard.writeText('{url}')">복사</button>
1133
- </div>
1134
- </div>
1135
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
1136
  </div>
1137
- <script>
1138
- updateDeployBanner('success', '✅ 배포 완료!', '게임이 성공적으로 Vercel에 배포되었습니다.', '{url}');
1139
- </script>
1140
- """
1141
- return success_html, {
 
1142
  "is_deployed": True,
1143
  "status": "success",
1144
  "url": url,
@@ -1146,55 +1176,96 @@ with gr.Blocks(css_paths=["app.css"], theme=theme) as demo:
1146
  }
1147
  else:
1148
  error_msg = result.get("message", "알 수 없는 오류")
1149
- error_html = f"""
1150
- <div class="deploy-section">
1151
- <div class="deploy-header">📤 배포 결과</div>
1152
- <div id="deploy-result-box" class="deploy-result-box">
1153
- <div class="deploy-error">
1154
- <div class="error-icon">⚠️</div>
1155
- <div class="error-message">배포 실패: {error_msg}</div>
1156
- </div>
1157
- </div>
1158
- </div>
1159
- <script>
1160
- updateDeployBanner('error', '⚠️ 배포 실패', '{error_msg}');
1161
- </script>
1162
- """
1163
- return error_html, {
 
 
 
 
 
 
 
 
 
 
1164
  "is_deployed": False,
1165
  "status": "error",
1166
  "message": error_msg,
1167
  "url": ""
1168
  }
1169
-
1170
  except Exception as e:
1171
  error_msg = str(e)
1172
- exception_html = f"""
1173
- <div class="deploy-section">
1174
- <div class="deploy-header">📤 배포 결과</div>
1175
- <div id="deploy-result-box" class="deploy-result-box">
1176
- <div class="deploy-error">
1177
- <div class="error-icon">⚠️</div>
1178
- <div class="error-message">시스템 오류: {error_msg}</div>
1179
- </div>
1180
- </div>
1181
- </div>
1182
- <script>
1183
- updateDeployBanner('error', '⚠️ 시스템 오류', '{error_msg}');
1184
- </script>
1185
- """
1186
- return exception_html, {
 
 
 
 
 
 
 
 
 
 
1187
  "is_deployed": False,
1188
  "status": "error",
1189
  "message": error_msg,
1190
  "url": ""
1191
  }
1192
 
1193
- # 배포 버튼 클릭
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1194
  deploy_btn.click(
1195
  fn=handle_deploy,
1196
  inputs=[code_output, deploy_status],
1197
- outputs=[deploy_result_container, deploy_status]
1198
  )
1199
 
1200
  if __name__ == "__main__":
 
1072
  except Exception as e:
1073
  return {"status": "error", "message": f"배포 중 오류 발생: {str(e)}"}
1074
 
1075
+
1076
+ # 이 함수만 교체하세요
1077
  def handle_deploy(code, deploy_status):
1078
  if not code:
1079
+ banner_html = """
1080
+ <div class="deploy-banner error">
1081
+ <div class="deploy-banner-content">
1082
+ <div class="deploy-banner-icon">⚠️</div>
1083
+ <div class="deploy-banner-info">
1084
+ <div class="deploy-banner-title">배포 실패</div>
1085
+ <div class="deploy-banner-message">배포할 코드가 없습니다. 먼저 게임 코드를 생성해주세요.</div>
 
1086
  </div>
1087
  </div>
1088
  </div>
 
 
 
1089
  """
1090
+ result_html = """
1091
+ <div class="deploy-section">
1092
+ <div class="deploy-header">📤 배포 결과</div>
1093
+ <div class="deploy-result-box">
1094
+ <div class="deploy-error">
1095
+ <div class="error-icon">⚠️</div>
1096
+ <div class="error-message">배포할 코드가 없습니다.</div>
1097
+ </div>
1098
+ </div>
1099
+ </div>
1100
+ """
1101
+ return banner_html, result_html, {
1102
  "is_deployed": False,
1103
  "status": "error",
1104
  "message": "배포할 코드가 없습니다.",
1105
  "url": ""
1106
  }
1107
+
1108
  try:
1109
+ # 로딩 상태 표시
1110
+ banner_loading_html = """
1111
+ <div class="deploy-banner loading">
1112
+ <div class="deploy-banner-content">
1113
+ <div class="deploy-banner-icon">🔄</div>
1114
+ <div class="deploy-banner-info">
1115
+ <div class="deploy-banner-title">배포 진행 중</div>
1116
+ <div class="deploy-banner-message">Vercel에 게임을 배포하고 있습니다. 잠시만 기다려주세요.</div>
1117
+ </div>
1118
+ </div>
1119
+ </div>
1120
+ """
1121
+ result_loading_html = """
1122
+ <div class="deploy-section">
1123
+ <div class="deploy-header">📤 배포 결과</div>
1124
+ <div class="deploy-result-box">
1125
+ <div class="deploy-loading">
1126
+ <div class="loading-spinner"></div>
1127
+ <div class="loading-message">Vercel에 배포 중입니다...</div>
1128
+ </div>
1129
+ </div>
1130
+ </div>
1131
+ """
1132
+ yield banner_loading_html, result_loading_html, deploy_status
1133
+
1134
  clean_code = remove_code_block(code)
1135
  result = deploy_to_vercel(clean_code)
1136
+
1137
  if result.get("status") == "success":
1138
  url = result.get("url")
1139
+ banner_success_html = f"""
1140
+ <div class="deploy-banner success">
1141
+ <div class="deploy-banner-content">
1142
+ <div class="deploy-banner-icon">✅</div>
1143
+ <div class="deploy-banner-info">
1144
+ <div class="deploy-banner-title">배포 완료!</div>
1145
+ <div class="deploy-banner-message">게임이 성공적으로 Vercel에 배포되었습니다.</div>
1146
+ </div>
1147
+ <div class="deploy-banner-url-container">
1148
+ <a href="{url}" target="_blank" class="deploy-banner-url">{url}</a>
1149
+ <button onclick="navigator.clipboard.writeText('{url}')" class="deploy-banner-copy-btn">복사</button>
1150
+ </div>
1151
+ </div>
1152
+ </div>
1153
+ """
1154
+
1155
+ result_success_html = f"""
1156
+ <div class="deploy-section">
1157
+ <div class="deploy-header">📤 배포 결과</div>
1158
+ <div class="deploy-result-box">
1159
+ <div class="deploy-success">
1160
+ <div class="success-icon">✅</div>
1161
+ <div class="success-message">배포 완료!</div>
1162
+ <div class="url-box">
1163
+ <a href="{url}" target="_blank">{url}</a>
1164
+ <button class="copy-btn" onclick="navigator.clipboard.writeText('{url}')">복사</button>
1165
  </div>
1166
+ </div>
1167
+ </div>
1168
+ </div>
1169
+ """
1170
+
1171
+ return banner_success_html, result_success_html, {
1172
  "is_deployed": True,
1173
  "status": "success",
1174
  "url": url,
 
1176
  }
1177
  else:
1178
  error_msg = result.get("message", "알 수 없는 오류")
1179
+ banner_error_html = f"""
1180
+ <div class="deploy-banner error">
1181
+ <div class="deploy-banner-content">
1182
+ <div class="deploy-banner-icon">⚠️</div>
1183
+ <div class="deploy-banner-info">
1184
+ <div class="deploy-banner-title">배포 실패</div>
1185
+ <div class="deploy-banner-message">{error_msg}</div>
1186
+ </div>
1187
+ </div>
1188
+ </div>
1189
+ """
1190
+
1191
+ result_error_html = f"""
1192
+ <div class="deploy-section">
1193
+ <div class="deploy-header">📤 배포 결과</div>
1194
+ <div class="deploy-result-box">
1195
+ <div class="deploy-error">
1196
+ <div class="error-icon">⚠️</div>
1197
+ <div class="error-message">배포 실패: {error_msg}</div>
1198
+ </div>
1199
+ </div>
1200
+ </div>
1201
+ """
1202
+
1203
+ return banner_error_html, result_error_html, {
1204
  "is_deployed": False,
1205
  "status": "error",
1206
  "message": error_msg,
1207
  "url": ""
1208
  }
1209
+
1210
  except Exception as e:
1211
  error_msg = str(e)
1212
+ banner_exception_html = f"""
1213
+ <div class="deploy-banner error">
1214
+ <div class="deploy-banner-content">
1215
+ <div class="deploy-banner-icon">⚠️</div>
1216
+ <div class="deploy-banner-info">
1217
+ <div class="deploy-banner-title">시스템 오류</div>
1218
+ <div class="deploy-banner-message">{error_msg}</div>
1219
+ </div>
1220
+ </div>
1221
+ </div>
1222
+ """
1223
+
1224
+ result_exception_html = f"""
1225
+ <div class="deploy-section">
1226
+ <div class="deploy-header">📤 배포 결과</div>
1227
+ <div class="deploy-result-box">
1228
+ <div class="deploy-error">
1229
+ <div class="error-icon">⚠️</div>
1230
+ <div class="error-message">시스템 오류: {error_msg}</div>
1231
+ </div>
1232
+ </div>
1233
+ </div>
1234
+ """
1235
+
1236
+ return banner_exception_html, result_exception_html, {
1237
  "is_deployed": False,
1238
  "status": "error",
1239
  "message": error_msg,
1240
  "url": ""
1241
  }
1242
 
1243
+
1244
+ # 헤더 HTML 추가 (기존 헤더 HTML 대신 사용)
1245
+ header_banner = gr.HTML("""
1246
+ <div class="app-header">
1247
+ <h1>🎮 Vibe Game Craft</h1>
1248
+ <p>설명을 입력하면 웹 기반 HTML5, JavaScript, CSS 게임을 생성합니다. 직관적인 인터페이스로 쉽게 게임을 만들고, 실시간으로 미리보기를 확인하세요.</p>
1249
+ </div>
1250
+ """)
1251
+
1252
+ deploy_banner = gr.HTML("""
1253
+ <div class="deploy-banner">
1254
+ <div class="deploy-banner-content">
1255
+ <div class="deploy-banner-icon">🚀</div>
1256
+ <div class="deploy-banner-info">
1257
+ <div class="deploy-banner-title">배포 준비됨</div>
1258
+ <div class="deploy-banner-message">배포 버튼을 클릭하여 게임을 배포하세요.</div>
1259
+ </div>
1260
+ </div>
1261
+ </div>
1262
+ """)
1263
+
1264
+ # 배포 버튼 클릭 - 이 부분을 변경하세요
1265
  deploy_btn.click(
1266
  fn=handle_deploy,
1267
  inputs=[code_output, deploy_status],
1268
+ outputs=[header_html, deploy_result_container, deploy_status]
1269
  )
1270
 
1271
  if __name__ == "__main__":