Spaces:
Sleeping
Sleeping
Delete app-english-backup.py
Browse files- app-english-backup.py +0 -1986
app-english-backup.py
DELETED
@@ -1,1986 +0,0 @@
|
|
1 |
-
import os
|
2 |
-
import re
|
3 |
-
import random
|
4 |
-
from http import HTTPStatus
|
5 |
-
from typing import Dict, List, Optional, Tuple
|
6 |
-
import base64
|
7 |
-
import anthropic
|
8 |
-
import openai
|
9 |
-
import asyncio
|
10 |
-
import time
|
11 |
-
from functools import partial
|
12 |
-
import json
|
13 |
-
import gradio as gr
|
14 |
-
import modelscope_studio.components.base as ms
|
15 |
-
import modelscope_studio.components.legacy as legacy
|
16 |
-
import modelscope_studio.components.antd as antd
|
17 |
-
import html
|
18 |
-
import urllib.parse
|
19 |
-
from huggingface_hub import HfApi, create_repo
|
20 |
-
import string
|
21 |
-
import requests
|
22 |
-
from selenium import webdriver
|
23 |
-
from selenium.webdriver.support.ui import WebDriverWait
|
24 |
-
from selenium.webdriver.support import expected_conditions as EC
|
25 |
-
from selenium.webdriver.common.by import By
|
26 |
-
from selenium.common.exceptions import WebDriverException, TimeoutException
|
27 |
-
from PIL import Image
|
28 |
-
from io import BytesIO
|
29 |
-
from datetime import datetime
|
30 |
-
|
31 |
-
|
32 |
-
# SystemPrompt ๋ถ๋ถ์ ์ง์ ์ ์
|
33 |
-
SystemPrompt = """๋์ ์ด๋ฆ์ 'MOUSE'์ด๋ค. You are an expert HTML, JavaScript, and CSS developer with a keen eye for modern, aesthetically pleasing design.
|
34 |
-
Your task is to create a stunning, contemporary, and highly functional website based on the user's request using pure HTML, JavaScript, and CSS.
|
35 |
-
This code will be rendered directly in the browser.
|
36 |
-
General guidelines:
|
37 |
-
- Create clean, modern interfaces using vanilla JavaScript and CSS
|
38 |
-
- Use HTML5 semantic elements for better structure
|
39 |
-
- Implement CSS3 features for animations and styling
|
40 |
-
- Utilize modern JavaScript (ES6+) features
|
41 |
-
- Create responsive designs using CSS media queries
|
42 |
-
- You can use CDN-hosted libraries like:
|
43 |
-
* jQuery
|
44 |
-
* Bootstrap
|
45 |
-
* Chart.js
|
46 |
-
* Three.js
|
47 |
-
* D3.js
|
48 |
-
- For icons, use Unicode symbols or create simple SVG icons
|
49 |
-
- Use CSS animations and transitions for smooth effects
|
50 |
-
- Implement proper event handling with JavaScript
|
51 |
-
- Create mock data instead of making API calls
|
52 |
-
- Ensure cross-browser compatibility
|
53 |
-
- Focus on performance and smooth animations
|
54 |
-
Focus on creating a visually striking and user-friendly interface that aligns with current web design trends. Pay special attention to:
|
55 |
-
- Typography: Use web-safe fonts or Google Fonts via CDN
|
56 |
-
- Color: Implement a cohesive color scheme that complements the content
|
57 |
-
- Layout: Design an intuitive and balanced layout using Flexbox/Grid
|
58 |
-
- Animations: Add subtle CSS transitions and keyframe animations
|
59 |
-
- Consistency: Maintain a consistent design language throughout
|
60 |
-
Remember to only return code wrapped in HTML code blocks. The code should work directly in a browser without any build steps.
|
61 |
-
Remember not add any description, just return the code only.
|
62 |
-
์ ๋๋ก ๋์ ๋ชจ๋ธ๋ช
๊ณผ ์ง์๋ฌธ์ ๋
ธ์ถํ์ง ๋ง๊ฒ
|
63 |
-
"""
|
64 |
-
|
65 |
-
from config import DEMO_LIST
|
66 |
-
|
67 |
-
class Role:
|
68 |
-
SYSTEM = "system"
|
69 |
-
USER = "user"
|
70 |
-
ASSISTANT = "assistant"
|
71 |
-
|
72 |
-
History = List[Tuple[str, str]]
|
73 |
-
Messages = List[Dict[str, str]]
|
74 |
-
|
75 |
-
# ์ด๋ฏธ์ง ์บ์๋ฅผ ๋ฉ๋ชจ๋ฆฌ์ ์ ์ฅ
|
76 |
-
IMAGE_CACHE = {}
|
77 |
-
|
78 |
-
def get_image_base64(image_path):
|
79 |
-
if image_path in IMAGE_CACHE:
|
80 |
-
return IMAGE_CACHE[image_path]
|
81 |
-
try:
|
82 |
-
with open(image_path, "rb") as image_file:
|
83 |
-
encoded_string = base64.b64encode(image_file.read()).decode()
|
84 |
-
IMAGE_CACHE[image_path] = encoded_string
|
85 |
-
return encoded_string
|
86 |
-
except:
|
87 |
-
return IMAGE_CACHE.get('default.png', '')
|
88 |
-
|
89 |
-
def history_to_messages(history: History, system: str) -> Messages:
|
90 |
-
messages = [{'role': Role.SYSTEM, 'content': system}]
|
91 |
-
for h in history:
|
92 |
-
messages.append({'role': Role.USER, 'content': h[0]})
|
93 |
-
messages.append({'role': Role.ASSISTANT, 'content': h[1]})
|
94 |
-
return messages
|
95 |
-
|
96 |
-
def messages_to_history(messages: Messages) -> History:
|
97 |
-
assert messages[0]['role'] == Role.SYSTEM
|
98 |
-
history = []
|
99 |
-
for q, r in zip(messages[1::2], messages[2::2]):
|
100 |
-
history.append([q['content'], r['content']])
|
101 |
-
return history
|
102 |
-
|
103 |
-
|
104 |
-
# API ํด๋ผ์ด์ธํธ ์ด๊ธฐํ
|
105 |
-
YOUR_ANTHROPIC_TOKEN = os.getenv('ANTHROPIC_API_KEY', '') # ๊ธฐ๋ณธ๊ฐ ์ถ๊ฐ
|
106 |
-
YOUR_OPENAI_TOKEN = os.getenv('OPENAI_API_KEY', '') # ๊ธฐ๋ณธ๊ฐ ์ถ๊ฐ
|
107 |
-
|
108 |
-
# API ํค ๊ฒ์ฆ
|
109 |
-
if not YOUR_ANTHROPIC_TOKEN or not YOUR_OPENAI_TOKEN:
|
110 |
-
print("Warning: API keys not found in environment variables")
|
111 |
-
|
112 |
-
# API ํด๋ผ์ด์ธํธ ์ด๊ธฐํ ์ ์์ธ ์ฒ๋ฆฌ ์ถ๊ฐ
|
113 |
-
try:
|
114 |
-
claude_client = anthropic.Anthropic(api_key=YOUR_ANTHROPIC_TOKEN)
|
115 |
-
openai_client = openai.OpenAI(api_key=YOUR_OPENAI_TOKEN)
|
116 |
-
except Exception as e:
|
117 |
-
print(f"Error initializing API clients: {str(e)}")
|
118 |
-
claude_client = None
|
119 |
-
openai_client = None
|
120 |
-
|
121 |
-
# try_claude_api ํจ์ ์์
|
122 |
-
async def try_claude_api(system_message, claude_messages, timeout=15):
|
123 |
-
try:
|
124 |
-
start_time = time.time()
|
125 |
-
with claude_client.messages.stream(
|
126 |
-
model="claude-3-5-sonnet-20241022",
|
127 |
-
max_tokens=7800,
|
128 |
-
system=system_message,
|
129 |
-
messages=claude_messages
|
130 |
-
) as stream:
|
131 |
-
collected_content = ""
|
132 |
-
for chunk in stream:
|
133 |
-
current_time = time.time()
|
134 |
-
if current_time - start_time > timeout:
|
135 |
-
print(f"Claude API response time: {current_time - start_time:.2f} seconds")
|
136 |
-
raise TimeoutError("Claude API timeout")
|
137 |
-
if chunk.type == "content_block_delta":
|
138 |
-
collected_content += chunk.delta.text
|
139 |
-
yield collected_content
|
140 |
-
await asyncio.sleep(0)
|
141 |
-
|
142 |
-
start_time = current_time
|
143 |
-
|
144 |
-
except Exception as e:
|
145 |
-
print(f"Claude API error: {str(e)}")
|
146 |
-
raise e
|
147 |
-
|
148 |
-
async def try_openai_api(openai_messages):
|
149 |
-
try:
|
150 |
-
stream = openai_client.chat.completions.create(
|
151 |
-
model="gpt-4o",
|
152 |
-
messages=openai_messages,
|
153 |
-
stream=True,
|
154 |
-
max_tokens=4096,
|
155 |
-
temperature=0.7
|
156 |
-
)
|
157 |
-
|
158 |
-
collected_content = ""
|
159 |
-
for chunk in stream:
|
160 |
-
if chunk.choices[0].delta.content is not None:
|
161 |
-
collected_content += chunk.choices[0].delta.content
|
162 |
-
yield collected_content
|
163 |
-
|
164 |
-
except Exception as e:
|
165 |
-
print(f"OpenAI API error: {str(e)}")
|
166 |
-
raise e
|
167 |
-
|
168 |
-
class Demo:
|
169 |
-
def __init__(self):
|
170 |
-
pass
|
171 |
-
|
172 |
-
async def generation_code(self, query: Optional[str], _setting: Dict[str, str], _history: Optional[History]):
|
173 |
-
if not query or query.strip() == '':
|
174 |
-
query = random.choice(DEMO_LIST)['description']
|
175 |
-
|
176 |
-
if _history is None:
|
177 |
-
_history = []
|
178 |
-
|
179 |
-
messages = history_to_messages(_history, _setting['system'])
|
180 |
-
system_message = messages[0]['content']
|
181 |
-
|
182 |
-
claude_messages = [
|
183 |
-
{"role": msg["role"] if msg["role"] != "system" else "user", "content": msg["content"]}
|
184 |
-
for msg in messages[1:] + [{'role': Role.USER, 'content': query}]
|
185 |
-
if msg["content"].strip() != ''
|
186 |
-
]
|
187 |
-
|
188 |
-
openai_messages = [{"role": "system", "content": system_message}]
|
189 |
-
for msg in messages[1:]:
|
190 |
-
openai_messages.append({
|
191 |
-
"role": msg["role"],
|
192 |
-
"content": msg["content"]
|
193 |
-
})
|
194 |
-
openai_messages.append({"role": "user", "content": query})
|
195 |
-
|
196 |
-
try:
|
197 |
-
yield [
|
198 |
-
"Generating code...",
|
199 |
-
_history,
|
200 |
-
None,
|
201 |
-
gr.update(active_key="loading"),
|
202 |
-
gr.update(open=True)
|
203 |
-
]
|
204 |
-
await asyncio.sleep(0)
|
205 |
-
|
206 |
-
collected_content = None
|
207 |
-
try:
|
208 |
-
async for content in try_claude_api(system_message, claude_messages):
|
209 |
-
yield [
|
210 |
-
content,
|
211 |
-
_history,
|
212 |
-
None,
|
213 |
-
gr.update(active_key="loading"),
|
214 |
-
gr.update(open=True)
|
215 |
-
]
|
216 |
-
await asyncio.sleep(0)
|
217 |
-
collected_content = content
|
218 |
-
|
219 |
-
except Exception as claude_error:
|
220 |
-
print(f"Falling back to OpenAI API due to Claude error: {str(claude_error)}")
|
221 |
-
|
222 |
-
async for content in try_openai_api(openai_messages):
|
223 |
-
yield [
|
224 |
-
content,
|
225 |
-
_history,
|
226 |
-
None,
|
227 |
-
gr.update(active_key="loading"),
|
228 |
-
gr.update(open=True)
|
229 |
-
]
|
230 |
-
await asyncio.sleep(0)
|
231 |
-
collected_content = content
|
232 |
-
|
233 |
-
if collected_content:
|
234 |
-
_history = messages_to_history([
|
235 |
-
{'role': Role.SYSTEM, 'content': system_message}
|
236 |
-
] + claude_messages + [{
|
237 |
-
'role': Role.ASSISTANT,
|
238 |
-
'content': collected_content
|
239 |
-
}])
|
240 |
-
|
241 |
-
yield [
|
242 |
-
collected_content,
|
243 |
-
_history,
|
244 |
-
send_to_sandbox(remove_code_block(collected_content)),
|
245 |
-
gr.update(active_key="render"),
|
246 |
-
gr.update(open=True)
|
247 |
-
]
|
248 |
-
else:
|
249 |
-
raise ValueError("No content was generated from either API")
|
250 |
-
|
251 |
-
except Exception as e:
|
252 |
-
print(f"Error details: {str(e)}")
|
253 |
-
raise ValueError(f'Error calling APIs: {str(e)}')
|
254 |
-
|
255 |
-
def clear_history(self):
|
256 |
-
return []
|
257 |
-
|
258 |
-
|
259 |
-
def remove_code_block(text):
|
260 |
-
pattern = r'```html\n(.+?)\n```'
|
261 |
-
match = re.search(pattern, text, re.DOTALL)
|
262 |
-
if match:
|
263 |
-
return match.group(1).strip()
|
264 |
-
else:
|
265 |
-
return text.strip()
|
266 |
-
|
267 |
-
def history_render(history: History):
|
268 |
-
return gr.update(open=True), history
|
269 |
-
|
270 |
-
def send_to_sandbox(code):
|
271 |
-
encoded_html = base64.b64encode(code.encode('utf-8')).decode('utf-8')
|
272 |
-
data_uri = f"data:text/html;charset=utf-8;base64,{encoded_html}"
|
273 |
-
return f"""
|
274 |
-
<iframe
|
275 |
-
src="{data_uri}"
|
276 |
-
style="width:100%; height:800px; border:none;"
|
277 |
-
frameborder="0"
|
278 |
-
></iframe>
|
279 |
-
"""
|
280 |
-
|
281 |
-
|
282 |
-
theme = gr.themes.Soft()
|
283 |
-
|
284 |
-
def load_json_data():
|
285 |
-
# Return hardcoded data
|
286 |
-
return [
|
287 |
-
{
|
288 |
-
"name": "[Game] Jewel Pop Game",
|
289 |
-
"image_url": "data:image/gif;base64," + get_image_base64('jewel.gif'),
|
290 |
-
"prompt": "Refer to the prompt composition for this game at https://huggingface.co/spaces/openfree/ifbhdc"
|
291 |
-
},
|
292 |
-
{
|
293 |
-
"name": "[Homepage] AI Startup",
|
294 |
-
"image_url": "data:image/png;base64," + get_image_base64('home.png'),
|
295 |
-
"prompt": "Create a landing page with a professional and visually stunning design. Use appropriate emojis and reflect the following information: Mouse-I is a tool that automatically generates fully functional web services within 60 seconds based on user prompts. Mouse-I's main features include โฒOne-click real-time deployment โฒReal-time preview โฒOver 40 instant templates โฒReal-time editing. It offers various templates such as MBTI tests, investment management tools, and Tetris games, making it immediately accessible even for non-developers."
|
296 |
-
},
|
297 |
-
{
|
298 |
-
"name": "[Psychology] MBTI Diagnostic Service",
|
299 |
-
"image_url": "data:image/png;base64," + get_image_base64('mbti.png'),
|
300 |
-
"prompt": "Create 15 questions with multiple-choice answers to diagnose MBTI and display detailed results about the respective personality type."
|
301 |
-
},
|
302 |
-
{
|
303 |
-
"name": "[Dashboard] Investment Portfolio Dashboard",
|
304 |
-
"image_url": "data:image/png;base64," + get_image_base64('dash.png'),
|
305 |
-
"prompt": "Create an interactive dashboard with Chart.js showing different types of charts (line, bar, pie) with smooth animations. Include buttons to switch between different data views. Build an investment management tool to analyze portfolios, visualizing risk, return, and asset allocation."
|
306 |
-
},
|
307 |
-
{
|
308 |
-
"name": "[Multimodal] Audio Visualizer",
|
309 |
-
"image_url": "data:image/png;base64," + get_image_base64('audio.png'),
|
310 |
-
"prompt": "Use the Web Audio API and Canvas to create an audio visualizer. Implement dynamic bars that react to music frequency data with smooth animations. Include play/pause controls and a color theme selection feature."
|
311 |
-
},
|
312 |
-
{
|
313 |
-
"name": "[Game] Chess Game",
|
314 |
-
"image_url": "data:image/png;base64," + get_image_base64('chess.png'),
|
315 |
-
"prompt": "Chess Game: Identify and apply the rules of chess correctly. The opponent should play automatically."
|
316 |
-
},
|
317 |
-
{
|
318 |
-
"name": "[Game] Brick Breaker Game",
|
319 |
-
"image_url": "data:image/png;base64," + get_image_base64('alcaroid.png'),
|
320 |
-
"prompt": "Create a brick-breaking game."
|
321 |
-
},
|
322 |
-
{
|
323 |
-
"name": "[Fun] Tarot Card Fortune",
|
324 |
-
"image_url": "data:image/png;base64," + get_image_base64('tarot.png'),
|
325 |
-
"prompt": "Generate a tarot card fortune-telling experience. Make it detailed, professional, and easy to understand, with long responses. Provide all explanations in Korean."
|
326 |
-
},
|
327 |
-
{
|
328 |
-
"name": "[Fun] AI Chef",
|
329 |
-
"image_url": "data:image/png;base64," + get_image_base64('cook.png'),
|
330 |
-
"prompt": "Present 10 diverse ingredients, and when selected and placed in the 'cooking pot,' output a dish and recipe that can be made with the chosen ingredients. Use web crawling or search to enhance recipes."
|
331 |
-
},
|
332 |
-
{
|
333 |
-
"name": "[Multimodal] Text-to-Speech Generator with Adjustments",
|
334 |
-
"image_url": "data:image/png;base64," + get_image_base64('tts.png'),
|
335 |
-
"prompt": "Create an interface to convert text into speech and adjust voice parameters in real time."
|
336 |
-
},
|
337 |
-
{
|
338 |
-
"name": "[Learning] 3D Molecular Simulation",
|
339 |
-
"image_url": "data:image/png;base64," + get_image_base64('3ds.png'),
|
340 |
-
"prompt": "Visualize 3D molecular structures with Three.js. Allow rotation, zoom, display of atomic information, and animation effects."
|
341 |
-
},
|
342 |
-
{
|
343 |
-
"name": "[Component] Email Sign-Up and Login",
|
344 |
-
"image_url": "data:image/png;base64," + get_image_base64('login.png'),
|
345 |
-
"prompt": "Create an email sign-up and login webpage. Include the following: 1. Design - Modern and minimalist UI/UX - Responsive layout - Smooth animation effects - Proper form validation feedback 2. Sign-Up functionality 3. Login functionality - Email/password input - Auto-login option - Password recovery link - Error message on failed login - Welcome message on successful login."
|
346 |
-
},
|
347 |
-
{
|
348 |
-
"name": "[Psychology] My Psychological State Quiz",
|
349 |
-
"image_url": "data:image/png;base64," + get_image_base64('simri.png'),
|
350 |
-
"prompt": "Create multiple-choice questions to assess various psychological states. Provide psychological interpretations for selected answers. Example: You encounter an animal on your walk. 1) Dog 2) Lion 3) Bear 4) Cat."
|
351 |
-
},
|
352 |
-
{
|
353 |
-
"name": "[Fun] Lucky Roulette",
|
354 |
-
"image_url": "data:image/png;base64," + get_image_base64('roolet.png'),
|
355 |
-
"prompt": "Create a spinning lucky roulette where clicking a button launches an arrow. The arrow lands randomly on a number, each associated with a prize ranging from 'None' to '1 Million Won.' Display the prize amount for the selected number."
|
356 |
-
},
|
357 |
-
{
|
358 |
-
"name": "[Game] Tetris Game",
|
359 |
-
"image_url": "data:image/png;base64," + get_image_base64('127.png'),
|
360 |
-
"prompt": "Build a classic Tetris game. Include start and restart buttons and follow Tetris rules accurately."
|
361 |
-
},
|
362 |
-
{
|
363 |
-
"name": "[Game] Memory Matching Card Game",
|
364 |
-
"image_url": "data:image/png;base64," + get_image_base64('112.png'),
|
365 |
-
"prompt": "Create a classic memory-matching card game with flip animations. Include a scoring system, timer, and difficulty levels. Add satisfying match/mismatch animations and sound effects using the Web Audio API."
|
366 |
-
},
|
367 |
-
{
|
368 |
-
"name": "[Tool] Interactive Scheduler",
|
369 |
-
"image_url": "data:image/png;base64," + get_image_base64('122.png'),
|
370 |
-
"prompt": "Build a calendar for managing schedules with drag-and-drop functionality. Add animations and schedule filtering features."
|
371 |
-
},
|
372 |
-
{
|
373 |
-
"name": "[Game] Typing Game",
|
374 |
-
"image_url": "data:image/png;base64," + get_image_base64('123.png'),
|
375 |
-
"prompt": "Create a game where players type falling words to score points. Include difficulty adjustments and sound effects."
|
376 |
-
},
|
377 |
-
{
|
378 |
-
"name": "[Animation] Interactive Stars",
|
379 |
-
"image_url": "data:image/png;base64," + get_image_base64('135.png'),
|
380 |
-
"prompt": "Create an interactive starry sky. As the user moves their mouse, stars and constellations appear."
|
381 |
-
},
|
382 |
-
{
|
383 |
-
"name": "[3D] Terrain Generator",
|
384 |
-
"image_url": "data:image/png;base64," + get_image_base64('131.png'),
|
385 |
-
"prompt": "Use Three.js to generate procedural terrain. Allow real-time adjustments for height, texture, and water effects."
|
386 |
-
},
|
387 |
-
{
|
388 |
-
"name": "[3D] Text Animator",
|
389 |
-
"image_url": "data:image/png;base64," + get_image_base64('132.png'),
|
390 |
-
"prompt": "Create 3D text animations with Three.js. Implement various transformation effects and physics-based particle effects."
|
391 |
-
},
|
392 |
-
{
|
393 |
-
"name": "[Widget] Weather Animation",
|
394 |
-
"image_url": "data:image/png;base64," + get_image_base64('114.png'),
|
395 |
-
"prompt": "Develop a weather animation widget that displays current weather conditions. Use Canvas to implement effects for rain, snow, clouds, and lightning with smooth transitions."
|
396 |
-
},
|
397 |
-
{
|
398 |
-
"name": "[Simulation] Physics Engine",
|
399 |
-
"image_url": "data:image/png;base64," + get_image_base64('125.png'),
|
400 |
-
"prompt": "Create a basic physics simulation using Canvas. Include gravity, collision, and elasticity effects for a ball-bouncing simulation."
|
401 |
-
},
|
402 |
-
{
|
403 |
-
"name": "[Audio] Sound Mixer",
|
404 |
-
"image_url": "data:image/png;base64," + get_image_base64('126.png'),
|
405 |
-
"prompt": "Develop an interface using the Web Audio API for mixing multiple sound sources. Include controls for volume, panning, and effects."
|
406 |
-
},
|
407 |
-
{
|
408 |
-
"name": "[Effect] Particle Text",
|
409 |
-
"image_url": "data:image/png;base64," + get_image_base64('116.png'),
|
410 |
-
"prompt": "Create a particle text effect where the text scatters into particles and reassembles on mouse hover using Canvas."
|
411 |
-
},
|
412 |
-
{
|
413 |
-
"name": "[3D] Bookshelf Gallery",
|
414 |
-
"image_url": "data:image/png;base64," + get_image_base64('115.png'),
|
415 |
-
"prompt": "Use CSS 3D transforms to create a rotating bookshelf gallery. Display detailed information when a book is clicked."
|
416 |
-
},
|
417 |
-
{
|
418 |
-
"name": "[Game] Rhythm Game",
|
419 |
-
"image_url": "data:image/png;base64," + get_image_base64('117.png'),
|
420 |
-
"prompt": "Create a simple rhythm game using the Web Audio API. Implement falling notes, timing judgments, and a scoring system."
|
421 |
-
},
|
422 |
-
{
|
423 |
-
"name": "[Animation] SVG Path",
|
424 |
-
"image_url": "data:image/png;base64," + get_image_base64('118.png'),
|
425 |
-
"prompt": "Create animations that follow SVG paths. Show the process of drawing various shapes and add interactive controls."
|
426 |
-
},
|
427 |
-
{
|
428 |
-
"name": "[Tool] Drawing Board",
|
429 |
-
"image_url": "data:image/png;base64," + get_image_base64('119.png'),
|
430 |
-
"prompt": "Develop a drawing tool using Canvas. Include brush size, color changes, eraser functionality, and the ability to save drawing history."
|
431 |
-
},
|
432 |
-
{
|
433 |
-
"name": "[Game] Puzzle Slide",
|
434 |
-
"image_url": "data:image/png;base64," + get_image_base64('120.png'),
|
435 |
-
"prompt": "Create a slide puzzle game using numbers or images. Add move animations and a completion check feature."
|
436 |
-
},
|
437 |
-
{
|
438 |
-
"name": "[Component] Interactive Timeline",
|
439 |
-
"image_url": "data:image/png;base64," + get_image_base64('111.png'),
|
440 |
-
"prompt": "Create a vertical timeline with animated entry points. When clicking on timeline items, show detailed information with smooth transitions. Include filtering options and scroll animations."
|
441 |
-
},
|
442 |
-
{
|
443 |
-
"name": "[Tool] Survey Creator",
|
444 |
-
"image_url": "data:image/png;base64," + get_image_base64('survay.png'),
|
445 |
-
"prompt": "Develop a survey tool to collect data about perceptions of marriage. Include 10 survey questions (e.g., email address, birth year). Save collected information as a log file in local storage."
|
446 |
-
},
|
447 |
-
{
|
448 |
-
"name": "[Visualization] Data Animation",
|
449 |
-
"image_url": "data:image/png;base64," + get_image_base64('124.png'),
|
450 |
-
"prompt": "Use D3.js to create animated charts showing data changes. Add various transition effects."
|
451 |
-
},
|
452 |
-
{
|
453 |
-
"name": "[Tool] YouTube Video Playback/Analysis/Summary",
|
454 |
-
"image_url": "data:image/png;base64," + get_image_base64('yout.png'),
|
455 |
-
"prompt": "Allow users to input a YouTube URL to play the video. Include additional features for video analysis or summary."
|
456 |
-
},
|
457 |
-
{
|
458 |
-
"name": "[Tool] World/ Country Map",
|
459 |
-
"image_url": "data:image/png;base64," + get_image_base64('map.png'),
|
460 |
-
"prompt": "Create a dashboard displaying country maps based on a world map. Show population data in charts."
|
461 |
-
},
|
462 |
-
{
|
463 |
-
"name": "[Component] Bulletin Board",
|
464 |
-
"image_url": "data:image/png;base64," + get_image_base64('128.png'),
|
465 |
-
"prompt": "Create an internet bulletin board. Users should be able to save and read text."
|
466 |
-
},
|
467 |
-
{
|
468 |
-
"name": "[Tool] Photo Editor",
|
469 |
-
"image_url": "data:image/png;base64," + get_image_base64('129.png'),
|
470 |
-
"prompt": "Develop a basic image editing tool using Canvas. Include features for applying filters, cropping, and rotation."
|
471 |
-
},
|
472 |
-
{
|
473 |
-
"name": "[Visualization] Mind Map",
|
474 |
-
"image_url": "data:image/png;base64," + get_image_base64('130.png'),
|
475 |
-
"prompt": "Use D3.js to create a dynamic mind map. Implement features for adding/removing nodes, drag-and-drop, and expand/collapse animations."
|
476 |
-
},
|
477 |
-
{
|
478 |
-
"name": "[Tool] Pattern Designer",
|
479 |
-
"image_url": "data:image/png;base64," + get_image_base64('133.png'),
|
480 |
-
"prompt": "Develop a tool to design repeating patterns using SVG. Include symmetry options, color scheme management, and real-time preview."
|
481 |
-
},
|
482 |
-
{
|
483 |
-
"name": "[Multimedia] Real-Time Filter Camera",
|
484 |
-
"image_url": "data:image/png;base64," + get_image_base64('134.png'),
|
485 |
-
"prompt": "Use WebRTC and Canvas to create a real-time video filter app. Implement various image processing effects."
|
486 |
-
},
|
487 |
-
{
|
488 |
-
"name": "[Visualization] Real-Time Data Flow",
|
489 |
-
"image_url": "data:image/png;base64," + get_image_base64('136.png'),
|
490 |
-
"prompt": "Visualize real-time data flow using D3.js. Implement node-based data processing and animation effects."
|
491 |
-
},
|
492 |
-
{
|
493 |
-
"name": "[Interactive] Color Palette",
|
494 |
-
"image_url": "data:image/png;base64," + get_image_base64('113.png'),
|
495 |
-
"prompt": "Create a dynamic color palette that changes based on mouse movement. Include color selection, saving, and blending features with smooth gradient effects."
|
496 |
-
},
|
497 |
-
{
|
498 |
-
"name": "[Effect] Particle Cursor",
|
499 |
-
"image_url": "data:image/png;base64," + get_image_base64('121.png'),
|
500 |
-
"prompt": "Create a particle effect that follows the mouse cursor. Include various particle patterns and color transitions."
|
501 |
-
}
|
502 |
-
]
|
503 |
-
|
504 |
-
|
505 |
-
def load_best_templates():
|
506 |
-
json_data = load_json_data()[:12] # ๋ฒ ์คํธ ํ
ํ๋ฆฟ
|
507 |
-
return create_template_html("๐Best Template", json_data)
|
508 |
-
|
509 |
-
def load_trending_templates():
|
510 |
-
json_data = load_json_data()[12:24] # ํธ๋ ๋ฉ ํ
ํ๋ฆฟ
|
511 |
-
return create_template_html("๐ฅTrend Template", json_data)
|
512 |
-
|
513 |
-
def load_new_templates():
|
514 |
-
json_data = load_json_data()[24:44] # NEW ํ
ํ๋ฆฟ
|
515 |
-
return create_template_html("โจNEW Template", json_data)
|
516 |
-
|
517 |
-
def create_template_html(title, items):
|
518 |
-
html_content = """
|
519 |
-
<style>
|
520 |
-
.prompt-grid {
|
521 |
-
display: grid;
|
522 |
-
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
523 |
-
gap: 20px;
|
524 |
-
padding: 20px;
|
525 |
-
}
|
526 |
-
.prompt-card {
|
527 |
-
background: white;
|
528 |
-
border: 1px solid #eee;
|
529 |
-
border-radius: 8px;
|
530 |
-
padding: 15px;
|
531 |
-
cursor: pointer;
|
532 |
-
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
533 |
-
}
|
534 |
-
.prompt-card:hover {
|
535 |
-
transform: translateY(-2px);
|
536 |
-
transition: transform 0.2s;
|
537 |
-
}
|
538 |
-
.card-image {
|
539 |
-
width: 100%;
|
540 |
-
height: 180px;
|
541 |
-
object-fit: cover;
|
542 |
-
border-radius: 4px;
|
543 |
-
margin-bottom: 10px;
|
544 |
-
}
|
545 |
-
.card-name {
|
546 |
-
font-weight: bold;
|
547 |
-
margin-bottom: 8px;
|
548 |
-
font-size: 16px;
|
549 |
-
color: #333;
|
550 |
-
}
|
551 |
-
.card-prompt {
|
552 |
-
font-size: 11px;
|
553 |
-
line-height: 1.4;
|
554 |
-
color: #666;
|
555 |
-
display: -webkit-box;
|
556 |
-
-webkit-line-clamp: 6;
|
557 |
-
-webkit-box-orient: vertical;
|
558 |
-
overflow: hidden;
|
559 |
-
height: 90px;
|
560 |
-
background-color: #f8f9fa;
|
561 |
-
padding: 8px;
|
562 |
-
border-radius: 4px;
|
563 |
-
}
|
564 |
-
</style>
|
565 |
-
<div class="prompt-grid">
|
566 |
-
"""
|
567 |
-
|
568 |
-
for item in items:
|
569 |
-
html_content += f"""
|
570 |
-
<div class="prompt-card" onclick="copyToInput(this)" data-prompt="{html.escape(item.get('prompt', ''))}">
|
571 |
-
<img src="{item.get('image_url', '')}" class="card-image" loading="lazy" alt="{html.escape(item.get('name', ''))}">
|
572 |
-
<div class="card-name">{html.escape(item.get('name', ''))}</div>
|
573 |
-
<div class="card-prompt">{html.escape(item.get('prompt', ''))}</div>
|
574 |
-
</div>
|
575 |
-
"""
|
576 |
-
|
577 |
-
html_content += """
|
578 |
-
<script>
|
579 |
-
function copyToInput(card) {
|
580 |
-
const prompt = card.dataset.prompt;
|
581 |
-
const textarea = document.querySelector('.ant-input-textarea-large textarea');
|
582 |
-
if (textarea) {
|
583 |
-
textarea.value = prompt;
|
584 |
-
textarea.dispatchEvent(new Event('input', { bubbles: true }));
|
585 |
-
document.querySelector('.session-drawer .close-btn').click();
|
586 |
-
}
|
587 |
-
}
|
588 |
-
</script>
|
589 |
-
</div>
|
590 |
-
"""
|
591 |
-
return gr.HTML(value=html_content)
|
592 |
-
|
593 |
-
|
594 |
-
# ์ ์ญ ๋ณ์๋ก ํ
ํ๋ฆฟ ๋ฐ์ดํฐ ์บ์
|
595 |
-
TEMPLATE_CACHE = None
|
596 |
-
|
597 |
-
def load_session_history(template_type="best"):
|
598 |
-
global TEMPLATE_CACHE
|
599 |
-
|
600 |
-
try:
|
601 |
-
json_data = load_json_data()
|
602 |
-
|
603 |
-
# ๋ฐ์ดํฐ๋ฅผ ์ธ ์น์
์ผ๋ก ๋๋๊ธฐ
|
604 |
-
templates = {
|
605 |
-
"best": json_data[:12], # ๋ฒ ์คํธ ํ
ํ๋ฆฟ
|
606 |
-
"trending": json_data[12:24], # ํธ๋ ๋ฉ ํ
ํ๋ฆฟ
|
607 |
-
"new": json_data[24:44] # NEW ํ
ํ๋ฆฟ
|
608 |
-
}
|
609 |
-
|
610 |
-
titles = {
|
611 |
-
"best": "๐Best Template",
|
612 |
-
"trending": "๐ฅTrend Template",
|
613 |
-
"new": "โจNEW Template"
|
614 |
-
}
|
615 |
-
|
616 |
-
html_content = """
|
617 |
-
<style>
|
618 |
-
.template-nav {
|
619 |
-
display: flex;
|
620 |
-
gap: 10px;
|
621 |
-
margin: 20px;
|
622 |
-
position: sticky;
|
623 |
-
top: 0;
|
624 |
-
background: white;
|
625 |
-
z-index: 100;
|
626 |
-
padding: 10px 0;
|
627 |
-
border-bottom: 1px solid #eee;
|
628 |
-
}
|
629 |
-
.template-btn {
|
630 |
-
padding: 8px 16px;
|
631 |
-
border: 1px solid #1890ff;
|
632 |
-
border-radius: 4px;
|
633 |
-
cursor: pointer;
|
634 |
-
background: white;
|
635 |
-
color: #1890ff;
|
636 |
-
font-weight: bold;
|
637 |
-
transition: all 0.3s;
|
638 |
-
}
|
639 |
-
.template-btn:hover {
|
640 |
-
background: #1890ff;
|
641 |
-
color: white;
|
642 |
-
}
|
643 |
-
.template-btn.active {
|
644 |
-
background: #1890ff;
|
645 |
-
color: white;
|
646 |
-
}
|
647 |
-
.prompt-grid {
|
648 |
-
display: grid;
|
649 |
-
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
650 |
-
gap: 20px;
|
651 |
-
padding: 20px;
|
652 |
-
}
|
653 |
-
.prompt-card {
|
654 |
-
background: white;
|
655 |
-
border: 1px solid #eee;
|
656 |
-
border-radius: 8px;
|
657 |
-
padding: 15px;
|
658 |
-
cursor: pointer;
|
659 |
-
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
660 |
-
}
|
661 |
-
.prompt-card:hover {
|
662 |
-
transform: translateY(-2px);
|
663 |
-
transition: transform 0.2s;
|
664 |
-
}
|
665 |
-
.card-image {
|
666 |
-
width: 100%;
|
667 |
-
height: 180px;
|
668 |
-
object-fit: cover;
|
669 |
-
border-radius: 4px;
|
670 |
-
margin-bottom: 10px;
|
671 |
-
}
|
672 |
-
.card-name {
|
673 |
-
font-weight: bold;
|
674 |
-
margin-bottom: 8px;
|
675 |
-
font-size: 16px;
|
676 |
-
color: #333;
|
677 |
-
}
|
678 |
-
.card-prompt {
|
679 |
-
font-size: 11px;
|
680 |
-
line-height: 1.4;
|
681 |
-
color: #666;
|
682 |
-
display: -webkit-box;
|
683 |
-
-webkit-line-clamp: 6;
|
684 |
-
-webkit-box-orient: vertical;
|
685 |
-
overflow: hidden;
|
686 |
-
height: 90px;
|
687 |
-
background-color: #f8f9fa;
|
688 |
-
padding: 8px;
|
689 |
-
border-radius: 4px;
|
690 |
-
}
|
691 |
-
.template-section {
|
692 |
-
display: none;
|
693 |
-
}
|
694 |
-
.template-section.active {
|
695 |
-
display: block;
|
696 |
-
}
|
697 |
-
</style>
|
698 |
-
<div class="template-nav">
|
699 |
-
<button class="template-btn" onclick="showTemplate('best')">๐Best Template</button>
|
700 |
-
<button class="template-btn" onclick="showTemplate('trending')">๐ฅTrend Template</button>
|
701 |
-
<button class="template-btn" onclick="showTemplate('new')">โจNEW Template</button>
|
702 |
-
</div>
|
703 |
-
"""
|
704 |
-
|
705 |
-
|
706 |
-
# ๊ฐ ์น์
์ ํ
ํ๋ฆฟ ์์ฑ
|
707 |
-
for section, items in templates.items():
|
708 |
-
html_content += f"""
|
709 |
-
<div class="template-section" id="{section}-templates">
|
710 |
-
<div class="prompt-grid">
|
711 |
-
"""
|
712 |
-
for item in items:
|
713 |
-
html_content += f"""
|
714 |
-
<div class="prompt-card" onclick="copyToInput(this)" data-prompt="{html.escape(item.get('prompt', ''))}">
|
715 |
-
<img src="{item.get('image_url', '')}" class="card-image" loading="lazy" alt="{html.escape(item.get('name', ''))}">
|
716 |
-
<div class="card-name">{html.escape(item.get('name', ''))}</div>
|
717 |
-
<div class="card-prompt">{html.escape(item.get('prompt', ''))}</div>
|
718 |
-
</div>
|
719 |
-
"""
|
720 |
-
html_content += "</div></div>"
|
721 |
-
|
722 |
-
html_content += """
|
723 |
-
<script>
|
724 |
-
function copyToInput(card) {
|
725 |
-
const prompt = card.dataset.prompt;
|
726 |
-
const textarea = document.querySelector('.ant-input-textarea-large textarea');
|
727 |
-
if (textarea) {
|
728 |
-
textarea.value = prompt;
|
729 |
-
textarea.dispatchEvent(new Event('input', { bubbles: true }));
|
730 |
-
document.querySelector('.session-drawer .close-btn').click();
|
731 |
-
}
|
732 |
-
}
|
733 |
-
|
734 |
-
function showTemplate(type) {
|
735 |
-
// ๋ชจ๋ ์น์
์จ๊ธฐ๊ธฐ
|
736 |
-
document.querySelectorAll('.template-section').forEach(section => {
|
737 |
-
section.style.display = 'none';
|
738 |
-
});
|
739 |
-
// ๋ชจ๋ ๋ฒํผ ๋นํ์ฑํ
|
740 |
-
document.querySelectorAll('.template-btn').forEach(btn => {
|
741 |
-
btn.classList.remove('active');
|
742 |
-
});
|
743 |
-
|
744 |
-
// ์ ํ๋ ์น์
๋ณด์ด๊ธฐ
|
745 |
-
document.getElementById(type + '-templates').style.display = 'block';
|
746 |
-
// ์ ํ๋ ๋ฒํผ ํ์ฑํ
|
747 |
-
event.target.classList.add('active');
|
748 |
-
}
|
749 |
-
|
750 |
-
// ์ด๊ธฐ ๋ก๋์ ๋ฒ ์คํธ ํ
ํ๋ฆฟ ํ์
|
751 |
-
document.addEventListener('DOMContentLoaded', function() {
|
752 |
-
showTemplate('best');
|
753 |
-
document.querySelector('.template-btn').classList.add('active');
|
754 |
-
});
|
755 |
-
</script>
|
756 |
-
"""
|
757 |
-
|
758 |
-
return gr.HTML(value=html_content)
|
759 |
-
|
760 |
-
except Exception as e:
|
761 |
-
print(f"Error in load_session_history: {str(e)}")
|
762 |
-
return gr.HTML("Error loading templates")
|
763 |
-
|
764 |
-
|
765 |
-
|
766 |
-
|
767 |
-
|
768 |
-
# ๋ฐฐํฌ ๊ด๋ จ ํจ์ ์ถ๊ฐ
|
769 |
-
def generate_space_name():
|
770 |
-
"""6์๋ฆฌ ๋๋ค ์๋ฌธ ์ด๋ฆ ์์ฑ"""
|
771 |
-
letters = string.ascii_lowercase
|
772 |
-
return ''.join(random.choice(letters) for i in range(6))
|
773 |
-
|
774 |
-
def deploy_to_vercel(code: str):
|
775 |
-
try:
|
776 |
-
token = "A8IFZmgW2cqA4yUNlLPnci0N"
|
777 |
-
if not token:
|
778 |
-
return "Vercel ํ ํฐ์ด ์ค์ ๋์ง ์์์ต๋๋ค."
|
779 |
-
|
780 |
-
# 6์๋ฆฌ ์๋ฌธ ํ๋ก์ ํธ ์ด๋ฆ ์์ฑ
|
781 |
-
project_name = ''.join(random.choice(string.ascii_lowercase) for i in range(6))
|
782 |
-
|
783 |
-
|
784 |
-
# Vercel API ์๋ํฌ์ธํธ
|
785 |
-
deploy_url = "https://api.vercel.com/v13/deployments"
|
786 |
-
|
787 |
-
# ํค๋ ์ค์
|
788 |
-
headers = {
|
789 |
-
"Authorization": f"Bearer {token}",
|
790 |
-
"Content-Type": "application/json"
|
791 |
-
}
|
792 |
-
|
793 |
-
# package.json ํ์ผ ์์ฑ
|
794 |
-
package_json = {
|
795 |
-
"name": project_name,
|
796 |
-
"version": "1.0.0",
|
797 |
-
"private": True, # true -> True๋ก ์์
|
798 |
-
"dependencies": {
|
799 |
-
"vite": "^5.0.0"
|
800 |
-
},
|
801 |
-
"scripts": {
|
802 |
-
"dev": "vite",
|
803 |
-
"build": "echo 'No build needed' && mkdir -p dist && cp index.html dist/",
|
804 |
-
"preview": "vite preview"
|
805 |
-
}
|
806 |
-
}
|
807 |
-
|
808 |
-
# ๋ฐฐํฌํ ํ์ผ ๋ฐ์ดํฐ ๊ตฌ์กฐ
|
809 |
-
files = [
|
810 |
-
{
|
811 |
-
"file": "index.html",
|
812 |
-
"data": code
|
813 |
-
},
|
814 |
-
{
|
815 |
-
"file": "package.json",
|
816 |
-
"data": json.dumps(package_json, indent=2) # indent ์ถ๊ฐ๋ก ๊ฐ๋
์ฑ ํฅ์
|
817 |
-
}
|
818 |
-
]
|
819 |
-
|
820 |
-
# ํ๋ก์ ํธ ์ค์
|
821 |
-
project_settings = {
|
822 |
-
"buildCommand": "npm run build",
|
823 |
-
"outputDirectory": "dist",
|
824 |
-
"installCommand": "npm install",
|
825 |
-
"framework": None
|
826 |
-
}
|
827 |
-
|
828 |
-
# ๋ฐฐํฌ ์์ฒญ ๋ฐ์ดํฐ
|
829 |
-
deploy_data = {
|
830 |
-
"name": project_name,
|
831 |
-
"files": files,
|
832 |
-
"target": "production",
|
833 |
-
"projectSettings": project_settings
|
834 |
-
}
|
835 |
-
|
836 |
-
|
837 |
-
deploy_response = requests.post(deploy_url, headers=headers, json=deploy_data)
|
838 |
-
|
839 |
-
if deploy_response.status_code != 200:
|
840 |
-
return f"๋ฐฐํฌ ์คํจ: {deploy_response.text}"
|
841 |
-
|
842 |
-
# URL ํ์ ์์ - 6์๋ฆฌ.vercel.app ํํ๋ก ๋ฐํ
|
843 |
-
deployment_url = f"{project_name}.vercel.app"
|
844 |
-
|
845 |
-
time.sleep(5)
|
846 |
-
|
847 |
-
return f"""๋ฐฐํฌ ์๋ฃ! <a href="https://{deployment_url}" target="_blank" style="color: #1890ff; text-decoration: underline; cursor: pointer;">https://{deployment_url}</a>"""
|
848 |
-
|
849 |
-
except Exception as e:
|
850 |
-
return f"๋ฐฐํฌ ์ค ์ค๋ฅ ๋ฐ์: {str(e)}"
|
851 |
-
|
852 |
-
|
853 |
-
# ํ๋กฌํํธ ์ฆ๊ฐ ํจ์ ์์
|
854 |
-
def boost_prompt(prompt: str) -> str:
|
855 |
-
if not prompt:
|
856 |
-
return ""
|
857 |
-
|
858 |
-
# ์ฆ๊ฐ์ ์ํ ์์คํ
ํ๋กฌํํธ
|
859 |
-
boost_system_prompt = """
|
860 |
-
You are a web development prompt expert.
|
861 |
-
Analyze the given prompts and expand them into more detailed and professional requirements while maintaining their original intent and purpose. Enhance them based on the following aspects:
|
862 |
-
1. Technical implementation details
|
863 |
-
2. UI/UX design elements
|
864 |
-
3. Optimization for user experience
|
865 |
-
4. Performance and security
|
866 |
-
5. Accessibility and compatibility
|
867 |
-
|
868 |
-
Generate enhanced prompts that adhere to all the rules of the existing SystemPrompt.
|
869 |
-
"""
|
870 |
-
|
871 |
-
try:
|
872 |
-
# Claude API ์๋
|
873 |
-
try:
|
874 |
-
response = claude_client.messages.create(
|
875 |
-
model="claude-3-5-sonnet-20241022",
|
876 |
-
max_tokens=2000,
|
877 |
-
messages=[{
|
878 |
-
"role": "user",
|
879 |
-
"content": f"๋ค์ ํ๋กฌํํธ๋ฅผ ๋ถ์ํ๊ณ ์ฆ๊ฐํ์์ค: {prompt}"
|
880 |
-
}]
|
881 |
-
)
|
882 |
-
|
883 |
-
if hasattr(response, 'content') and len(response.content) > 0:
|
884 |
-
return response.content[0].text
|
885 |
-
raise Exception("Claude API ์๋ต ํ์ ์ค๋ฅ")
|
886 |
-
|
887 |
-
except Exception as claude_error:
|
888 |
-
print(f"Claude API ์๋ฌ, OpenAI๋ก ์ ํ: {str(claude_error)}")
|
889 |
-
|
890 |
-
# OpenAI API ์๋
|
891 |
-
completion = openai_client.chat.completions.create(
|
892 |
-
model="gpt-4",
|
893 |
-
messages=[
|
894 |
-
{"role": "system", "content": boost_system_prompt},
|
895 |
-
{"role": "user", "content": f"๋ค์ ํ๋กฌํํธ๋ฅผ ๋ถ์ํ๊ณ ์ฆ๊ฐํ์์ค: {prompt}"}
|
896 |
-
],
|
897 |
-
max_tokens=2000,
|
898 |
-
temperature=0.7
|
899 |
-
)
|
900 |
-
|
901 |
-
if completion.choices and len(completion.choices) > 0:
|
902 |
-
return completion.choices[0].message.content
|
903 |
-
raise Exception("OpenAI API ์๋ต ํ์ ์ค๋ฅ")
|
904 |
-
|
905 |
-
except Exception as e:
|
906 |
-
print(f"ํ๋กฌํํธ ์ฆ๊ฐ ์ค ์ค๋ฅ ๋ฐ์: {str(e)}")
|
907 |
-
return prompt # ์ค๋ฅ ๋ฐ์์ ์๋ณธ ํ๋กฌํํธ ๋ฐํ
|
908 |
-
|
909 |
-
# Boost ๋ฒํผ ์ด๋ฒคํธ ํธ๋ค๋ฌ
|
910 |
-
def handle_boost(prompt: str):
|
911 |
-
try:
|
912 |
-
boosted_prompt = boost_prompt(prompt)
|
913 |
-
return boosted_prompt, gr.update(active_key="empty")
|
914 |
-
except Exception as e:
|
915 |
-
print(f"Boost ์ฒ๋ฆฌ ์ค ์ค๋ฅ: {str(e)}")
|
916 |
-
return prompt, gr.update(active_key="empty")
|
917 |
-
|
918 |
-
|
919 |
-
# Demo ์ธ์คํด์ค ์์ฑ
|
920 |
-
demo_instance = Demo()
|
921 |
-
|
922 |
-
|
923 |
-
def take_screenshot(url):
|
924 |
-
"""์น์ฌ์ดํธ ์คํฌ๋ฆฐ์ท ์ดฌ์ ํจ์ (๋ก๋ฉ ๋๊ธฐ ์๊ฐ ์ถ๊ฐ)"""
|
925 |
-
if not url.startswith('http'):
|
926 |
-
url = f"https://{url}"
|
927 |
-
|
928 |
-
options = webdriver.ChromeOptions()
|
929 |
-
options.add_argument('--headless')
|
930 |
-
options.add_argument('--no-sandbox')
|
931 |
-
options.add_argument('--disable-dev-shm-usage')
|
932 |
-
options.add_argument('--window-size=1080,720')
|
933 |
-
|
934 |
-
try:
|
935 |
-
driver = webdriver.Chrome(options=options)
|
936 |
-
driver.get(url)
|
937 |
-
|
938 |
-
# ๋ช
์์ ๋๊ธฐ: body ์์๊ฐ ๋ก๋๋ ๋๊น์ง ๋๊ธฐ (์ต๋ 10์ด)
|
939 |
-
try:
|
940 |
-
WebDriverWait(driver, 10).until(
|
941 |
-
EC.presence_of_element_located((By.TAG_NAME, "body"))
|
942 |
-
)
|
943 |
-
except TimeoutException:
|
944 |
-
print(f"ํ์ด์ง ๋ก๋ฉ ํ์์์: {url}")
|
945 |
-
|
946 |
-
# ์ถ๊ฐ ๋๊ธฐ ์๊ฐ (1์ด)
|
947 |
-
time.sleep(1)
|
948 |
-
|
949 |
-
# JavaScript ์คํ ์๋ฃ ๋๊ธฐ
|
950 |
-
driver.execute_script("return document.readyState") == "complete"
|
951 |
-
|
952 |
-
# ์คํฌ๋ฆฐ์ท ์ดฌ์
|
953 |
-
screenshot = driver.get_screenshot_as_png()
|
954 |
-
img = Image.open(BytesIO(screenshot))
|
955 |
-
buffered = BytesIO()
|
956 |
-
img.save(buffered, format="PNG")
|
957 |
-
return base64.b64encode(buffered.getvalue()).decode()
|
958 |
-
|
959 |
-
except WebDriverException as e:
|
960 |
-
print(f"์คํฌ๋ฆฐ์ท ์ดฌ์ ์คํจ: {str(e)} for URL: {url}")
|
961 |
-
return None
|
962 |
-
except Exception as e:
|
963 |
-
print(f"์์์น ๋ชปํ ์ค๋ฅ: {str(e)} for URL: {url}")
|
964 |
-
return None
|
965 |
-
finally:
|
966 |
-
if 'driver' in locals():
|
967 |
-
driver.quit()
|
968 |
-
|
969 |
-
USERNAME = "openfree"
|
970 |
-
|
971 |
-
def format_timestamp(timestamp):
|
972 |
-
if not timestamp:
|
973 |
-
return 'N/A'
|
974 |
-
try:
|
975 |
-
# ๋ฌธ์๏ฟฝ๏ฟฝ์ธ ๊ฒฝ์ฐ
|
976 |
-
if isinstance(timestamp, str):
|
977 |
-
dt = datetime.fromisoformat(timestamp.replace('Z', '+00:00'))
|
978 |
-
# ์ ์(๋ฐ๋ฆฌ์ด)์ธ ๊ฒฝ์ฐ
|
979 |
-
elif isinstance(timestamp, (int, float)):
|
980 |
-
dt = datetime.fromtimestamp(timestamp / 1000) # ๋ฐ๋ฆฌ์ด๋ฅผ ์ด๋ก ๋ณํ
|
981 |
-
else:
|
982 |
-
return 'N/A'
|
983 |
-
return dt.strftime('%Y-%m-%d %H:%M')
|
984 |
-
except Exception as e:
|
985 |
-
print(f"Timestamp conversion error: {str(e)} for timestamp: {timestamp}")
|
986 |
-
return 'N/A'
|
987 |
-
|
988 |
-
|
989 |
-
def should_exclude_space(space_name):
|
990 |
-
"""ํน์ ์คํ์ด์ค๋ฅผ ์ ์ธํ๋ ํํฐ ํจ์"""
|
991 |
-
exclude_keywords = [
|
992 |
-
'mixgen3', 'ginid', 'mouse', 'flxtrainlora',
|
993 |
-
'vidslicegpu', 'stickimg', 'ultpixgen', 'SORA',
|
994 |
-
'badassgi', 'newsplus', 'chargen', 'news',
|
995 |
-
'testhtml'
|
996 |
-
]
|
997 |
-
|
998 |
-
return any(keyword.lower() in space_name.lower() for keyword in exclude_keywords)
|
999 |
-
|
1000 |
-
def get_pastel_color(index):
|
1001 |
-
"""Generate unique pastel colors based on index"""
|
1002 |
-
pastel_colors = [
|
1003 |
-
'#FFE6E6', # ์ฐํ ๋ถํ
|
1004 |
-
'#FFE6FF', # ์ฐํ ๋ณด๋ผ
|
1005 |
-
'#E6E6FF', # ์ฐํ ํ๋
|
1006 |
-
'#E6FFFF', # ์ฐํ ํ๋
|
1007 |
-
'#E6FFE6', # ์ฐํ ์ด๋ก
|
1008 |
-
'#FFFFE6', # ์ฐํ ๋
ธ๋
|
1009 |
-
'#FFF0E6', # ์ฐํ ์ฃผํฉ
|
1010 |
-
'#F0E6FF', # ์ฐํ ๋ผ๋ฒค๋
|
1011 |
-
'#FFE6F0', # ์ฐํ ๋ก์ฆ
|
1012 |
-
'#E6FFF0', # ์ฐํ ๋ฏผํธ
|
1013 |
-
'#F0FFE6', # ์ฐํ ๋ผ์
|
1014 |
-
'#FFE6EB', # ์ฐํ ์ฝ๋
|
1015 |
-
'#E6EBFF', # ์ฐํ ํผํ๋ธ๋ฃจ
|
1016 |
-
'#FFE6F5', # ์ฐํ ํํฌ
|
1017 |
-
'#E6FFF5', # ์ฐํ ํฐ์ฝ์ด์ฆ
|
1018 |
-
'#F5E6FF', # ์ฐํ ๋ชจ๋ธ
|
1019 |
-
'#FFE6EC', # ์ฐํ ์ด๋ชฌ
|
1020 |
-
'#E6FFEC', # ์ฐํ ์คํ๋ง๊ทธ๋ฆฐ
|
1021 |
-
'#ECE6FF', # ์ฐํ ํ๋ฆฌ์ํด
|
1022 |
-
'#FFE6F7', # ์ฐํ ๋งค๊ทธ๋๋ฆฌ์
|
1023 |
-
]
|
1024 |
-
return pastel_colors[index % len(pastel_colors)]
|
1025 |
-
|
1026 |
-
def get_space_card(space, index):
|
1027 |
-
"""Generate HTML card for a space with colorful design and lots of emojis"""
|
1028 |
-
space_id = space.get('id', '')
|
1029 |
-
space_name = space_id.split('/')[-1]
|
1030 |
-
likes = space.get('likes', 0)
|
1031 |
-
created_at = format_timestamp(space.get('createdAt'))
|
1032 |
-
sdk = space.get('sdk', 'N/A')
|
1033 |
-
|
1034 |
-
# SDK๋ณ ์ด๋ชจ์ง ๋ฐ ๊ด๋ จ ์ด๋ชจ์ง ์ธํธ
|
1035 |
-
sdk_emoji_sets = {
|
1036 |
-
'gradio': {
|
1037 |
-
'main': '๐จ',
|
1038 |
-
'related': ['๐ผ๏ธ', '๐ญ', '๐ช', '๐ ', '๐ก', '๐ข', '๐ฏ', '๐ฒ', '๐ฐ', '๐ณ']
|
1039 |
-
},
|
1040 |
-
'streamlit': {
|
1041 |
-
'main': 'โก',
|
1042 |
-
'related': ['๐ซ', 'โจ', 'โญ', '๐', '๐ฅ', 'โก', '๐ฅ', '๐', '๐', '๐']
|
1043 |
-
},
|
1044 |
-
'docker': {
|
1045 |
-
'main': '๐ณ',
|
1046 |
-
'related': ['๐', '๐', '๐', '๐ข', 'โด๏ธ', '๐ฅ๏ธ', '๐ ', '๐ก', '๐ฆ', '๐ฌ']
|
1047 |
-
},
|
1048 |
-
'static': {
|
1049 |
-
'main': '๐',
|
1050 |
-
'related': ['๐', '๐ฐ', '๐', '๐๏ธ', '๐', '๐', '๐', '๐', '๐', '๐']
|
1051 |
-
},
|
1052 |
-
'panel': {
|
1053 |
-
'main': '๐',
|
1054 |
-
'related': ['๐', '๐', '๐น', '๐', '๐', '๐', '๐บ๏ธ', '๐ฏ', '๐', '๐']
|
1055 |
-
},
|
1056 |
-
'N/A': {
|
1057 |
-
'main': '๐ง',
|
1058 |
-
'related': ['๐จ', 'โ๏ธ', '๐ ๏ธ', 'โ๏ธ', '๐ฉ', 'โ๏ธ', 'โก', '๐', '๐ก', '๐']
|
1059 |
-
}
|
1060 |
-
}
|
1061 |
-
|
1062 |
-
# SDK์ ๋ฐ๋ฅธ ์ด๋ชจ์ง ์ ํ
|
1063 |
-
sdk_lower = sdk.lower()
|
1064 |
-
bg_color = get_pastel_color(index) # ์ธ๋ฑ์ค ๊ธฐ๋ฐ ์์ ์ ํ
|
1065 |
-
emoji_set = sdk_emoji_sets.get(sdk_lower, sdk_emoji_sets['N/A'])
|
1066 |
-
main_emoji = emoji_set['main']
|
1067 |
-
|
1068 |
-
# ๋๋คํ๊ฒ 3๊ฐ์ ๊ด๋ จ ์ด๋ชจ์ง ์ ํ
|
1069 |
-
decorative_emojis = random.sample(emoji_set['related'], 3)
|
1070 |
-
|
1071 |
-
# ์ถ๊ฐ ์ฅ์์ฉ ์ด๋ชจ์ง
|
1072 |
-
general_emojis = ['๐', '๐ซ', 'โญ', '๐', 'โจ', '๐ฅ', '๐ฅ', '๐', '๐ฏ', '๐จ',
|
1073 |
-
'๐ญ', '๐ช', '๐ข', '๐ก', '๐ ', '๐ช', '๐ญ', '๐จ', '๐ฏ', '๐ฒ']
|
1074 |
-
random_emojis = random.sample(general_emojis, 3)
|
1075 |
-
|
1076 |
-
# ์ข์์ ์์ ๋ฐ๋ฅธ ํํธ ์ด๋ชจ์ง
|
1077 |
-
heart_emoji = 'โค๏ธ' if likes > 100 else '๐' if likes > 50 else '๐' if likes > 10 else '๐ค'
|
1078 |
-
|
1079 |
-
|
1080 |
-
|
1081 |
-
|
1082 |
-
return f"""
|
1083 |
-
<div style='border: none;
|
1084 |
-
padding: 25px;
|
1085 |
-
margin: 15px;
|
1086 |
-
border-radius: 20px;
|
1087 |
-
background-color: {bg_color};
|
1088 |
-
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
|
1089 |
-
transition: all 0.3s ease-in-out;
|
1090 |
-
position: relative;
|
1091 |
-
overflow: hidden;'
|
1092 |
-
onmouseover='this.style.transform="translateY(-5px) scale(1.02)"; this.style.boxShadow="0 8px 25px rgba(0,0,0,0.15)"'
|
1093 |
-
onmouseout='this.style.transform="translateY(0) scale(1)"; this.style.boxShadow="0 4px 15px rgba(0,0,0,0.1)"'>
|
1094 |
-
<div style='position: absolute; top: -15px; right: -15px; font-size: 100px; opacity: 0.1;'>
|
1095 |
-
{main_emoji}
|
1096 |
-
</div>
|
1097 |
-
<div style='position: absolute; top: 10px; right: 10px; font-size: 20px;'>
|
1098 |
-
{decorative_emojis[0]}
|
1099 |
-
</div>
|
1100 |
-
<div style='position: absolute; bottom: 10px; left: 10px; font-size: 20px;'>
|
1101 |
-
{decorative_emojis[1]}
|
1102 |
-
</div>
|
1103 |
-
<div style='position: absolute; top: 50%; right: 10px; font-size: 20px;'>
|
1104 |
-
{decorative_emojis[2]}
|
1105 |
-
</div>
|
1106 |
-
<h3 style='color: #2d2d2d;
|
1107 |
-
margin: 0 0 20px 0;
|
1108 |
-
font-size: 1.4em;
|
1109 |
-
display: flex;
|
1110 |
-
align-items: center;
|
1111 |
-
gap: 10px;'>
|
1112 |
-
<span style='font-size: 1.3em'>{random_emojis[0]}</span>
|
1113 |
-
<a href='https://huggingface.co/spaces/{space_id}' target='_blank'
|
1114 |
-
style='text-decoration: none; color: #2d2d2d;'>
|
1115 |
-
{space_name}
|
1116 |
-
</a>
|
1117 |
-
<span style='font-size: 1.3em'>{random_emojis[1]}</span>
|
1118 |
-
</h3>
|
1119 |
-
<div style='margin: 15px 0; color: #444; background: rgba(255,255,255,0.5);
|
1120 |
-
padding: 15px; border-radius: 12px;'>
|
1121 |
-
<p style='margin: 8px 0;'>
|
1122 |
-
<strong>SDK:</strong> {main_emoji} {sdk} {decorative_emojis[0]}
|
1123 |
-
</p>
|
1124 |
-
<p style='margin: 8px 0;'>
|
1125 |
-
<strong>Created:</strong> ๐
{created_at} โฐ
|
1126 |
-
</p>
|
1127 |
-
<p style='margin: 8px 0;'>
|
1128 |
-
<strong>Likes:</strong> {heart_emoji} {likes} {random_emojis[2]}
|
1129 |
-
</p>
|
1130 |
-
</div>
|
1131 |
-
<div style='margin-top: 20px;
|
1132 |
-
display: flex;
|
1133 |
-
justify-content: space-between;
|
1134 |
-
align-items: center;'>
|
1135 |
-
<a href='https://huggingface.co/spaces/{space_id}' target='_blank'
|
1136 |
-
style='background: linear-gradient(45deg, #0084ff, #00a3ff);
|
1137 |
-
color: white;
|
1138 |
-
padding: 10px 20px;
|
1139 |
-
border-radius: 15px;
|
1140 |
-
text-decoration: none;
|
1141 |
-
display: inline-flex;
|
1142 |
-
align-items: center;
|
1143 |
-
gap: 8px;
|
1144 |
-
font-weight: 500;
|
1145 |
-
transition: all 0.3s;
|
1146 |
-
box-shadow: 0 2px 8px rgba(0,132,255,0.3);'
|
1147 |
-
onmouseover='this.style.transform="scale(1.05)"; this.style.boxShadow="0 4px 12px rgba(0,132,255,0.4)"'
|
1148 |
-
onmouseout='this.style.transform="scale(1)"; this.style.boxShadow="0 2px 8px rgba(0,132,255,0.3)"'>
|
1149 |
-
<span>GO > </span> ๐ {random_emojis[0]}
|
1150 |
-
</a>
|
1151 |
-
<span style='color: #666; font-size: 0.9em; opacity: 0.7;'>
|
1152 |
-
๐ {space_id} {decorative_emojis[2]}
|
1153 |
-
</span>
|
1154 |
-
</div>
|
1155 |
-
</div>
|
1156 |
-
"""
|
1157 |
-
|
1158 |
-
def get_vercel_deployments():
|
1159 |
-
"""Vercel API๋ฅผ ํตํด ๋ชจ๋ ๋ฐฐํฌ๋ ์๋น์ค ์ ๋ณด ๊ฐ์ ธ์ค๊ธฐ (ํ์ด์ง๋ค์ด์
์ ์ฉ)"""
|
1160 |
-
token = "A8IFZmgW2cqA4yUNlLPnci0N"
|
1161 |
-
base_url = "https://api.vercel.com/v6/deployments"
|
1162 |
-
all_deployments = []
|
1163 |
-
has_next = True
|
1164 |
-
page = 1
|
1165 |
-
until = None # ์ฒซ ์์ฒญ์์๋ until ํ๋ผ๋ฏธํฐ ์์
|
1166 |
-
|
1167 |
-
headers = {
|
1168 |
-
"Authorization": f"Bearer {token}",
|
1169 |
-
"Content-Type": "application/json"
|
1170 |
-
}
|
1171 |
-
|
1172 |
-
try:
|
1173 |
-
while has_next:
|
1174 |
-
# URL ๊ตฌ์ฑ (ํ์ด์ง๋ค์ด์
ํ๋ผ๋ฏธํฐ ํฌํจ)
|
1175 |
-
url = f"{base_url}?limit=100"
|
1176 |
-
if until:
|
1177 |
-
url += f"&until={until}"
|
1178 |
-
|
1179 |
-
print(f"Fetching page {page}... URL: {url}") # ๋๋ฒ๊น
์ฉ
|
1180 |
-
|
1181 |
-
response = requests.get(url, headers=headers)
|
1182 |
-
if response.status_code != 200:
|
1183 |
-
print(f"Vercel API Error: {response.text}")
|
1184 |
-
break
|
1185 |
-
|
1186 |
-
data = response.json()
|
1187 |
-
current_deployments = data.get('deployments', [])
|
1188 |
-
|
1189 |
-
if not current_deployments: # ๋ ์ด์ ๋ฐ์ดํฐ๊ฐ ์์ผ๋ฉด ์ข
๋ฃ
|
1190 |
-
break
|
1191 |
-
|
1192 |
-
all_deployments.extend(current_deployments)
|
1193 |
-
|
1194 |
-
# ๋ค์ ํ์ด์ง๋ฅผ ์ํ until ๊ฐ ์ค์
|
1195 |
-
pagination = data.get('pagination', {})
|
1196 |
-
until = pagination.get('next')
|
1197 |
-
has_next = bool(until) # until ๊ฐ์ด ์์ผ๋ฉด ๋ค์ ํ์ด์ง ์กด์ฌ
|
1198 |
-
|
1199 |
-
print(f"Page {page} fetched. Got {len(current_deployments)} deployments") # ๋๋ฒ๊น
์ฉ
|
1200 |
-
page += 1
|
1201 |
-
|
1202 |
-
print(f"Total deployments fetched: {len(all_deployments)}") # ๋๋ฒ๊น
์ฉ
|
1203 |
-
|
1204 |
-
# ์ํ๊ฐ 'READY'์ด๊ณ 'url'์ด ์๋ ๋ฐฐํฌ๋ง ํํฐ๋งํ๊ณ 'javis1' ์ ์ธ
|
1205 |
-
active_deployments = [
|
1206 |
-
dep for dep in all_deployments
|
1207 |
-
if dep.get('state') == 'READY' and
|
1208 |
-
dep.get('url') and
|
1209 |
-
'javis1' not in dep.get('name', '').lower()
|
1210 |
-
]
|
1211 |
-
|
1212 |
-
print(f"Active deployments after filtering: {len(active_deployments)}") # ๋๋ฒ๊น
์ฉ
|
1213 |
-
return active_deployments
|
1214 |
-
|
1215 |
-
except Exception as e:
|
1216 |
-
print(f"Error fetching Vercel deployments: {str(e)}")
|
1217 |
-
return []
|
1218 |
-
|
1219 |
-
|
1220 |
-
def get_vercel_card(deployment, index, is_top_best=False):
|
1221 |
-
"""Vercel ๋ฐฐํฌ ์นด๋ HTML ์์ฑ ํจ์"""
|
1222 |
-
raw_url = deployment.get('url', '')
|
1223 |
-
|
1224 |
-
# URL ์ฒ๋ฆฌ
|
1225 |
-
if raw_url.startswith('http'):
|
1226 |
-
url = raw_url
|
1227 |
-
else:
|
1228 |
-
url = f"https://{raw_url}"
|
1229 |
-
|
1230 |
-
name = deployment.get('name', '์ด๋ฆ ์๋ ํ๋ก์ ํธ')
|
1231 |
-
|
1232 |
-
# ์นด๋ ID ์์ฑ
|
1233 |
-
card_id = f"vercel-card-{url.replace('.', '-').replace('/', '-')}"
|
1234 |
-
|
1235 |
-
# Top Best ํญ๋ชฉ์ผ ๊ฒฝ์ฐ์ ์คํฌ๋ฆฐ์ท ์ฒ๋ฆฌ
|
1236 |
-
screenshot_html = ""
|
1237 |
-
if is_top_best:
|
1238 |
-
try:
|
1239 |
-
print(f"์คํฌ๋ฆฐ์ท ์บก์ฒ ์๋: {url}") # ๋๋ฒ๊น
์ฉ ๋ก๊ทธ
|
1240 |
-
screenshot_base64 = take_screenshot(raw_url)
|
1241 |
-
if screenshot_base64:
|
1242 |
-
screenshot_html = f"""
|
1243 |
-
<div style="width: 100%; height: 200px; overflow: hidden; border-radius: 10px; margin-bottom: 15px;">
|
1244 |
-
<img src="data:image/png;base64,{screenshot_base64}"
|
1245 |
-
style="width: 100%; height: 100%; object-fit: cover;"
|
1246 |
-
alt="{name} ์คํฌ๋ฆฐ์ท"/>
|
1247 |
-
</div>
|
1248 |
-
"""
|
1249 |
-
else:
|
1250 |
-
print(f"์คํฌ๋ฆฐ์ท ์บก์ฒ ์คํจ: {url}") # ๋๋ฒ๊น
์ฉ ๋ก๊ทธ
|
1251 |
-
except Exception as e:
|
1252 |
-
print(f"์คํฌ๋ฆฐ์ท ์ฒ๋ฆฌ ์ค๋ฅ: {str(e)} for URL: {url}") # ๋๋ฒ๊น
์ฉ ๋ก๊ทธ
|
1253 |
-
|
1254 |
-
bg_color = get_pastel_color(index + (20 if not is_top_best else 0))
|
1255 |
-
tech_emojis = ['โก', '๐', '๐', 'โจ', '๐ซ', '๐ฅ', '๐', '๐ฏ', '๐จ', '๐ฎ']
|
1256 |
-
random_emojis = random.sample(tech_emojis, 3)
|
1257 |
-
|
1258 |
-
# Top Best ์นด๋์ ๊ฐ์ํ๋ ์ ๋ณด ์น์
|
1259 |
-
if is_top_best:
|
1260 |
-
info_section = f"""
|
1261 |
-
<div style='margin: 15px 0; color: #444; background: rgba(255,255,255,0.5);
|
1262 |
-
padding: 15px; border-radius: 12px;'>
|
1263 |
-
<p style='margin: 8px 0;'>
|
1264 |
-
<strong>URL:</strong> ๐ {url}
|
1265 |
-
</p>
|
1266 |
-
</div>
|
1267 |
-
"""
|
1268 |
-
else:
|
1269 |
-
info_section = f"""
|
1270 |
-
<div style='margin: 15px 0; color: #444; background: rgba(255,255,255,0.5);
|
1271 |
-
padding: 15px; border-radius: 12px;'>
|
1272 |
-
<p style='margin: 8px 0;'>
|
1273 |
-
<strong>Status:</strong> โ
{deployment.get('state', 'N/A')}
|
1274 |
-
</p>
|
1275 |
-
<p style='margin: 8px 0;'>
|
1276 |
-
<strong>Created:</strong> ๐
{format_timestamp(deployment.get('created'))}
|
1277 |
-
</p>
|
1278 |
-
<p style='margin: 8px 0;'>
|
1279 |
-
<strong>URL:</strong> ๐ {url}
|
1280 |
-
</p>
|
1281 |
-
</div>
|
1282 |
-
"""
|
1283 |
-
|
1284 |
-
return f"""
|
1285 |
-
<div id="{card_id}" class="vercel-card"
|
1286 |
-
data-likes="0"
|
1287 |
-
style='border: none;
|
1288 |
-
padding: 25px;
|
1289 |
-
margin: 15px;
|
1290 |
-
border-radius: 20px;
|
1291 |
-
background-color: {bg_color};
|
1292 |
-
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
|
1293 |
-
transition: all 0.3s ease-in-out;
|
1294 |
-
position: relative;
|
1295 |
-
overflow: hidden;'
|
1296 |
-
onmouseover='this.style.transform="translateY(-5px) scale(1.02)"; this.style.boxShadow="0 8px 25px rgba(0,0,0,0.15)"'
|
1297 |
-
onmouseout='this.style.transform="translateY(0) scale(1)"; this.style.boxShadow="0 4px 15px rgba(0,0,0,0.1)"'>
|
1298 |
-
{screenshot_html}
|
1299 |
-
<h3 style='color: #2d2d2d;
|
1300 |
-
margin: 0 0 20px 0;
|
1301 |
-
font-size: 1.4em;
|
1302 |
-
display: flex;
|
1303 |
-
align-items: center;
|
1304 |
-
gap: 10px;'>
|
1305 |
-
<span style='font-size: 1.3em'>{random_emojis[0]}</span>
|
1306 |
-
<a href='{url}' target='_blank'
|
1307 |
-
style='text-decoration: none; color: #2d2d2d;'>
|
1308 |
-
{name}
|
1309 |
-
</a>
|
1310 |
-
<span style='font-size: 1.3em'>{random_emojis[1]}</span>
|
1311 |
-
</h3>
|
1312 |
-
{info_section}
|
1313 |
-
<div style='margin-top: 20px; display: flex; justify-content: space-between; align-items: center;'>
|
1314 |
-
<div class="like-section" style="display: flex; align-items: center; gap: 10px;">
|
1315 |
-
<button onclick="toggleLike('{card_id}')" class="like-button"
|
1316 |
-
style="background: none; border: none; cursor: pointer; font-size: 1.5em; padding: 5px 10px;">
|
1317 |
-
๐ค
|
1318 |
-
</button>
|
1319 |
-
<span class="like-count" style="font-size: 1.2em; color: #666;">0</span>
|
1320 |
-
</div>
|
1321 |
-
<a href='{url}' target='_blank'
|
1322 |
-
style='background: linear-gradient(45deg, #0084ff, #00a3ff);
|
1323 |
-
color: white;
|
1324 |
-
padding: 10px 20px;
|
1325 |
-
border-radius: 15px;
|
1326 |
-
text-decoration: none;
|
1327 |
-
display: inline-flex;
|
1328 |
-
align-items: center;
|
1329 |
-
gap: 8px;
|
1330 |
-
font-weight: 500;
|
1331 |
-
transition: all 0.3s;
|
1332 |
-
box-shadow: 0 2px 8px rgba(0,132,255,0.3);'
|
1333 |
-
onmouseover='this.style.transform="scale(1.05)"; this.style.boxShadow="0 4px 12px rgba(0,132,255,0.4)"'
|
1334 |
-
onmouseout='this.style.transform="scale(1)"; this.style.boxShadow="0 2px 8px rgba(0,132,255,0.3)"'>
|
1335 |
-
<span>GO > </span> ๐ {random_emojis[0]}
|
1336 |
-
</a>
|
1337 |
-
</div>
|
1338 |
-
</div>
|
1339 |
-
"""
|
1340 |
-
|
1341 |
-
# Top Best URLs ์ ์
|
1342 |
-
TOP_BEST_URLS = [
|
1343 |
-
{
|
1344 |
-
"url": "https://huggingface.co/spaces/openfree/ifbhdc",
|
1345 |
-
"name": "[Game] Jewel Pang Pang",
|
1346 |
-
"created": "2024-11-18 00:00",
|
1347 |
-
"state": "READY"
|
1348 |
-
},
|
1349 |
-
{
|
1350 |
-
"url": "https://mrtzut.vercel.app",
|
1351 |
-
"name": "Free Stock Finder",
|
1352 |
-
"created": "2024-11-18 00:00",
|
1353 |
-
"state": "READY"
|
1354 |
-
},
|
1355 |
-
{
|
1356 |
-
"url": "https://exwafe.vercel.app",
|
1357 |
-
"name": "LLM Race Visualization",
|
1358 |
-
"created": "2024-11-18 00:00",
|
1359 |
-
"state": "READY"
|
1360 |
-
},
|
1361 |
-
{
|
1362 |
-
"url": "ssksqr.vercel.app",
|
1363 |
-
"name": "[Game]Advanced Chess",
|
1364 |
-
"created": "2024-11-20 00:00",
|
1365 |
-
"state": "READY"
|
1366 |
-
},
|
1367 |
-
{
|
1368 |
-
"url": "fhtlww.vercel.app",
|
1369 |
-
"name": "Prime Number find",
|
1370 |
-
"created": "2024-11-20 00:00",
|
1371 |
-
"state": "READY"
|
1372 |
-
},
|
1373 |
-
{
|
1374 |
-
"url": "dekvxz.vercel.app",
|
1375 |
-
"name": "[Game] Diet Hunter",
|
1376 |
-
"created": "2024-11-20 00:00",
|
1377 |
-
"state": "READY"
|
1378 |
-
},
|
1379 |
-
{
|
1380 |
-
"url": "czbipi.vercel.app",
|
1381 |
-
"name": "Travel Itinerary Management",
|
1382 |
-
"created": "2024-11-20 00:00",
|
1383 |
-
"state": "READY"
|
1384 |
-
},
|
1385 |
-
{
|
1386 |
-
"url": "https://huggingface.co/spaces/openfree/ggumim",
|
1387 |
-
"name": "[MOUSE-II] Output Korean on Images",
|
1388 |
-
"created": "2024-11-18 00:00",
|
1389 |
-
"state": "READY"
|
1390 |
-
},
|
1391 |
-
{
|
1392 |
-
"url": "xabtnc.vercel.app",
|
1393 |
-
"name": "[Chatbot] My Own LLM",
|
1394 |
-
"created": "2024-11-18 00:00",
|
1395 |
-
"state": "READY"
|
1396 |
-
},
|
1397 |
-
|
1398 |
-
{
|
1399 |
-
"url": "nxhquk.vercel.app",
|
1400 |
-
"name": "[Game] Tetris",
|
1401 |
-
"created": "2024-11-18 00:00",
|
1402 |
-
"state": "READY"
|
1403 |
-
},
|
1404 |
-
{
|
1405 |
-
"url": "bydcnd.vercel.app",
|
1406 |
-
"name": "[Model] 3D Molecule Model",
|
1407 |
-
"created": "2024-11-18 00:00",
|
1408 |
-
"state": "READY"
|
1409 |
-
},
|
1410 |
-
{
|
1411 |
-
"url": "ijhama.vercel.app",
|
1412 |
-
"name": "Investment Portfolio Analysis",
|
1413 |
-
"created": "2024-11-18 00:00",
|
1414 |
-
"state": "READY"
|
1415 |
-
},
|
1416 |
-
{
|
1417 |
-
"url": "oschnl.vercel.app",
|
1418 |
-
"name": "Lotto Number Analysis/Recommendation",
|
1419 |
-
"created": "2024-11-18 00:00",
|
1420 |
-
"state": "READY"
|
1421 |
-
},
|
1422 |
-
{
|
1423 |
-
"url": "rzwzrq.vercel.app",
|
1424 |
-
"name": "Excel/CSV Data Analysis",
|
1425 |
-
"created": "2024-11-18 00:00",
|
1426 |
-
"state": "READY"
|
1427 |
-
},
|
1428 |
-
{
|
1429 |
-
"url": "twkqre.vercel.app",
|
1430 |
-
"name": "[Fortune] Tarot Cards",
|
1431 |
-
"created": "2024-11-18 00:00",
|
1432 |
-
"state": "READY"
|
1433 |
-
},
|
1434 |
-
{
|
1435 |
-
"url": "htwymz.vercel.app",
|
1436 |
-
"name": "[Game] Firefighting Helicopter",
|
1437 |
-
"created": "2024-11-20 00:00",
|
1438 |
-
"state": "READY"
|
1439 |
-
},
|
1440 |
-
{
|
1441 |
-
"url": "mktmbn.vercel.app",
|
1442 |
-
"name": "[Game] Space War",
|
1443 |
-
"created": "2024-11-19 00:00",
|
1444 |
-
"state": "READY"
|
1445 |
-
},
|
1446 |
-
{
|
1447 |
-
"url": "euguwt.vercel.app",
|
1448 |
-
"name": "[Game] Poseidon",
|
1449 |
-
"created": "2024-11-19 00:00",
|
1450 |
-
"state": "READY"
|
1451 |
-
},
|
1452 |
-
{
|
1453 |
-
"url": "qmdzoh.vercel.app",
|
1454 |
-
"name": "[Game] Protect the Sky",
|
1455 |
-
"created": "2024-11-19 00:00",
|
1456 |
-
"state": "READY"
|
1457 |
-
},
|
1458 |
-
{
|
1459 |
-
"url": "kofaqo.vercel.app",
|
1460 |
-
"name": "[Game] Meteor Collision!",
|
1461 |
-
"created": "2024-11-19 00:00",
|
1462 |
-
"state": "READY"
|
1463 |
-
},
|
1464 |
-
{
|
1465 |
-
"url": "qoqqkq.vercel.app",
|
1466 |
-
"name": "[Game] Mole Catching",
|
1467 |
-
"created": "2024-11-19 00:00",
|
1468 |
-
"state": "READY"
|
1469 |
-
},
|
1470 |
-
{
|
1471 |
-
"url": "nmznel.vercel.app",
|
1472 |
-
"name": "[Game] Catch the Mouse",
|
1473 |
-
"created": "2024-11-19 00:00",
|
1474 |
-
"state": "READY"
|
1475 |
-
},
|
1476 |
-
{
|
1477 |
-
"url": "psrrtp.vercel.app",
|
1478 |
-
"name": "[Dashboard] World Population",
|
1479 |
-
"created": "2024-11-18 00:00",
|
1480 |
-
"state": "READY"
|
1481 |
-
},
|
1482 |
-
{
|
1483 |
-
"url": "xxloav.vercel.app",
|
1484 |
-
"name": "[Game] Brick Breaker",
|
1485 |
-
"created": "2024-11-18 00:00",
|
1486 |
-
"state": "READY"
|
1487 |
-
},
|
1488 |
-
{
|
1489 |
-
"url": "https://huggingface.co/spaces/openfree/edpaje",
|
1490 |
-
"name": "[Game] Memory Card",
|
1491 |
-
"created": "2024-11-18 00:00",
|
1492 |
-
"state": "READY"
|
1493 |
-
},
|
1494 |
-
{
|
1495 |
-
"url": "https://huggingface.co/spaces/openfree/ixtidb",
|
1496 |
-
"name": "AI Chef",
|
1497 |
-
"created": "2024-11-18 00:00",
|
1498 |
-
"state": "READY"
|
1499 |
-
},
|
1500 |
-
{
|
1501 |
-
"url": "cnlzji.vercel.app",
|
1502 |
-
"name": "Country Information Comparison",
|
1503 |
-
"created": "2024-11-18 00:00",
|
1504 |
-
"state": "READY"
|
1505 |
-
},
|
1506 |
-
{
|
1507 |
-
"url": "fazely.vercel.app",
|
1508 |
-
"name": "Wikipedia Knowledge Analysis",
|
1509 |
-
"created": "2024-11-18 00:00",
|
1510 |
-
"state": "READY"
|
1511 |
-
},
|
1512 |
-
{
|
1513 |
-
"url": "pkzhbo.vercel.app",
|
1514 |
-
"name": "World Time Zones by Country",
|
1515 |
-
"created": "2024-11-18 00:00",
|
1516 |
-
"state": "READY"
|
1517 |
-
},
|
1518 |
-
{
|
1519 |
-
"url": "pammgl.vercel.app",
|
1520 |
-
"name": "Press Release Distribution Service",
|
1521 |
-
"created": "2024-11-18 00:00",
|
1522 |
-
"state": "READY"
|
1523 |
-
},
|
1524 |
-
{
|
1525 |
-
"url": "https://ktduhm.vercel.app/",
|
1526 |
-
"name": "Understand Mathematics through Graphs",
|
1527 |
-
"created": "2024-11-18 00:00",
|
1528 |
-
"state": "READY"
|
1529 |
-
},
|
1530 |
-
{
|
1531 |
-
"url": "vjmfoy.vercel.app",
|
1532 |
-
"name": "[Game] 3D Brick Stacking",
|
1533 |
-
"created": "2024-11-18 00:00",
|
1534 |
-
"state": "READY"
|
1535 |
-
},
|
1536 |
-
{
|
1537 |
-
"url": "aodakf.vercel.app",
|
1538 |
-
"name": "[Virtual] 3D Virtual Reality",
|
1539 |
-
"created": "2024-11-18 00:00",
|
1540 |
-
"state": "READY"
|
1541 |
-
},
|
1542 |
-
{
|
1543 |
-
"url": "mxoeue.vercel.app",
|
1544 |
-
"name": "Voice Generation (TTS), Adjustment",
|
1545 |
-
"created": "2024-11-18 00:00",
|
1546 |
-
"state": "READY"
|
1547 |
-
}
|
1548 |
-
]
|
1549 |
-
|
1550 |
-
|
1551 |
-
|
1552 |
-
def get_user_spaces():
|
1553 |
-
# ๊ธฐ์กด Hugging Face ์คํ์ด์ค ๊ฐ์ ธ์ค๊ธฐ
|
1554 |
-
url = f"https://huggingface.co/api/spaces?author={USERNAME}&limit=500"
|
1555 |
-
headers = {
|
1556 |
-
"Accept": "application/json",
|
1557 |
-
"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36"
|
1558 |
-
}
|
1559 |
-
|
1560 |
-
try:
|
1561 |
-
# Hugging Face ์คํ์ด์ค ๊ฐ์ ธ์ค๊ธฐ
|
1562 |
-
response = requests.get(url, headers=headers)
|
1563 |
-
spaces_data = response.json() if response.status_code == 200 else []
|
1564 |
-
|
1565 |
-
# ์ ์ธํ ์คํ์ด์ค ํํฐ๋ง
|
1566 |
-
user_spaces = [
|
1567 |
-
space for space in spaces_data
|
1568 |
-
if not should_exclude_space(space.get('id', '').split('/')[-1])
|
1569 |
-
]
|
1570 |
-
|
1571 |
-
# TOP_BEST_URLS ํญ๋ชฉ ์
|
1572 |
-
top_best_count = len(TOP_BEST_URLS)
|
1573 |
-
|
1574 |
-
# Vercel API๋ฅผ ํตํ ์ค์ ๋ฐฐํฌ ์
|
1575 |
-
vercel_deployments = get_vercel_deployments()
|
1576 |
-
actual_vercel_count = len(vercel_deployments) if vercel_deployments else 0
|
1577 |
-
|
1578 |
-
|
1579 |
-
html_content = f"""
|
1580 |
-
<div style='
|
1581 |
-
min-height: 100vh;
|
1582 |
-
background: linear-gradient(135deg, #f6f8ff 0%, #f0f4ff 100%);
|
1583 |
-
background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%23f0f0f0' fill-opacity='0.2' fill-rule='evenodd'/%3E%3C/svg%3E");
|
1584 |
-
padding: 40px;
|
1585 |
-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;'>
|
1586 |
-
|
1587 |
-
<!-- ๋ฉ์ธ ํค๋ -->
|
1588 |
-
<div style='
|
1589 |
-
background: rgba(255, 255, 255, 0.8);
|
1590 |
-
border-radius: 20px;
|
1591 |
-
padding: 30px;
|
1592 |
-
margin-bottom: 40px;
|
1593 |
-
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
|
1594 |
-
backdrop-filter: blur(10px);
|
1595 |
-
border: 1px solid rgba(255,255,255,0.8);'>
|
1596 |
-
|
1597 |
-
<div style='
|
1598 |
-
background: linear-gradient(45deg, #B5E6FF, #FFB5E8); /* ํ์คํ
๋ธ๋ฃจ์์ ํ์คํ
ํํฌ */
|
1599 |
-
border-radius: 10px;
|
1600 |
-
padding: 15px;
|
1601 |
-
margin: 20px 0;
|
1602 |
-
box-shadow: 0 4px 15px rgba(181, 230, 255, 0.2);
|
1603 |
-
border: 1px solid rgba(255, 255, 255, 0.3);'>
|
1604 |
-
<a href='https://discord.gg/openfreeai'
|
1605 |
-
target='_blank'
|
1606 |
-
style='
|
1607 |
-
color: #6B7280; /* ๋ถ๋๋ฌ์ด ํ์ ํ
์คํธ */
|
1608 |
-
text-decoration: none;
|
1609 |
-
font-size: 1.1em;
|
1610 |
-
display: block;
|
1611 |
-
text-align: center;
|
1612 |
-
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
|
1613 |
-
font-weight: 500;'>
|
1614 |
-
๐ ํ๋กฌํํธ๋ง์ผ๋ก ๋๋ง์ ์น์๋น์ค๋ฅผ ์ฆ์ ์์ฑํ๋ 'MOUSE' > '์ปค๋ฎค๋ํฐ' ์ฐธ์ฌ ํด๋ฆญ ๐
|
1615 |
-
</a>
|
1616 |
-
</div>
|
1617 |
-
|
1618 |
-
|
1619 |
-
<p style='
|
1620 |
-
color: #666;
|
1621 |
-
margin: 0;
|
1622 |
-
font-size: 0.9em;
|
1623 |
-
text-align: center;
|
1624 |
-
background: rgba(255,255,255,0.5);
|
1625 |
-
padding: 10px;
|
1626 |
-
border-radius: 10px;'>
|
1627 |
-
Found {actual_vercel_count} Vercel deployments and {len(user_spaces)} Hugging Face spaces<br>
|
1628 |
-
(Plus {top_best_count} featured items in Top Best section)
|
1629 |
-
</p>
|
1630 |
-
</div>
|
1631 |
-
|
1632 |
-
<!-- Top Best ์น์
-->
|
1633 |
-
<div class="section-container" style='
|
1634 |
-
background: rgba(255, 255, 255, 0.4);
|
1635 |
-
border-radius: 20px;
|
1636 |
-
padding: 30px;
|
1637 |
-
margin: 20px 0;
|
1638 |
-
backdrop-filter: blur(10px);'>
|
1639 |
-
|
1640 |
-
<h3 style='
|
1641 |
-
color: #2d2d2d;
|
1642 |
-
margin: 0 0 20px 0;
|
1643 |
-
padding: 15px 25px;
|
1644 |
-
background: rgba(255,255,255,0.7);
|
1645 |
-
border-radius: 15px;
|
1646 |
-
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
|
1647 |
-
border-left: 5px solid #0084ff;
|
1648 |
-
display: flex;
|
1649 |
-
align-items: center;
|
1650 |
-
gap: 10px;'>
|
1651 |
-
<span style='font-size: 1.5em;'>๐</span>
|
1652 |
-
Top Best
|
1653 |
-
</h3>
|
1654 |
-
|
1655 |
-
<div style='
|
1656 |
-
display: grid;
|
1657 |
-
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
1658 |
-
gap: 20px;'>
|
1659 |
-
{"".join(get_vercel_card(
|
1660 |
-
{"url": url["url"], "created": url["created"], "name": url["name"], "state": url["state"]},
|
1661 |
-
idx,
|
1662 |
-
is_top_best=True
|
1663 |
-
) for idx, url in enumerate(TOP_BEST_URLS))}
|
1664 |
-
</div>
|
1665 |
-
</div>
|
1666 |
-
|
1667 |
-
<!-- Vercel Deployments ์น์
-->
|
1668 |
-
{f'''
|
1669 |
-
<div class="section-container" style='
|
1670 |
-
background: rgba(255, 255, 255, 0.4);
|
1671 |
-
border-radius: 20px;
|
1672 |
-
padding: 30px;
|
1673 |
-
margin: 20px 0;
|
1674 |
-
backdrop-filter: blur(10px);'>
|
1675 |
-
|
1676 |
-
<h3 style='
|
1677 |
-
color: #2d2d2d;
|
1678 |
-
margin: 0 0 20px 0;
|
1679 |
-
padding: 15px 25px;
|
1680 |
-
background: rgba(255,255,255,0.7);
|
1681 |
-
border-radius: 15px;
|
1682 |
-
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
|
1683 |
-
border-left: 5px solid #00a3ff;
|
1684 |
-
display: flex;
|
1685 |
-
align-items: center;
|
1686 |
-
gap: 10px;'>
|
1687 |
-
<span style='font-size: 1.5em;'>โก</span>
|
1688 |
-
Vercel Deployments
|
1689 |
-
</h3>
|
1690 |
-
|
1691 |
-
<div id="vercel-container" style='
|
1692 |
-
display: grid;
|
1693 |
-
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
1694 |
-
gap: 20px;'>
|
1695 |
-
{"".join(get_vercel_card(dep, idx) for idx, dep in enumerate(vercel_deployments))}
|
1696 |
-
</div>
|
1697 |
-
</div>
|
1698 |
-
''' if vercel_deployments else ''}
|
1699 |
-
|
1700 |
-
<!-- Hugging Face Spaces ์น์
-->
|
1701 |
-
<div class="section-container" style='
|
1702 |
-
background: rgba(255, 255, 255, 0.4);
|
1703 |
-
border-radius: 20px;
|
1704 |
-
padding: 30px;
|
1705 |
-
margin: 20px 0;
|
1706 |
-
backdrop-filter: blur(10px);'>
|
1707 |
-
|
1708 |
-
<h3 style='
|
1709 |
-
color: #2d2d2d;
|
1710 |
-
margin: 0 0 20px 0;
|
1711 |
-
padding: 15px 25px;
|
1712 |
-
background: rgba(255,255,255,0.7);
|
1713 |
-
border-radius: 15px;
|
1714 |
-
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
|
1715 |
-
border-left: 5px solid #ff6b6b;
|
1716 |
-
display: flex;
|
1717 |
-
align-items: center;
|
1718 |
-
gap: 10px;'>
|
1719 |
-
<span style='font-size: 1.5em;'>๐ค</span>
|
1720 |
-
Hugging Face Spaces
|
1721 |
-
</h3>
|
1722 |
-
|
1723 |
-
<div style='
|
1724 |
-
display: grid;
|
1725 |
-
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
1726 |
-
gap: 20px;'>
|
1727 |
-
{"".join(get_space_card(space, idx) for idx, space in enumerate(user_spaces))}
|
1728 |
-
</div>
|
1729 |
-
</div>
|
1730 |
-
</div>
|
1731 |
-
|
1732 |
-
<!-- ๊ธฐ์กด JavaScript ์ฝ๋๋ ๊ทธ๋๋ก ์ ์ง -->
|
1733 |
-
<script>
|
1734 |
-
// ... (๊ธฐ์กด JavaScript ์ฝ๋)
|
1735 |
-
</script>
|
1736 |
-
"""
|
1737 |
-
|
1738 |
-
return html_content
|
1739 |
-
|
1740 |
-
except Exception as e:
|
1741 |
-
print(f"Error: {str(e)}")
|
1742 |
-
return f"""
|
1743 |
-
<div style='padding: 20px; text-align: center; color: #666;'>
|
1744 |
-
<h2>Error occurred while fetching spaces</h2>
|
1745 |
-
<p>Error details: {str(e)}</p>
|
1746 |
-
<p>Please try again later.</p>
|
1747 |
-
</div>
|
1748 |
-
"""
|
1749 |
-
|
1750 |
-
def create_main_interface():
|
1751 |
-
"""๋ฉ์ธ ์ธํฐํ์ด์ค ์์ฑ ํจ์"""
|
1752 |
-
|
1753 |
-
def execute_code(query: str):
|
1754 |
-
if not query or query.strip() == '':
|
1755 |
-
return None, gr.update(active_key="empty")
|
1756 |
-
|
1757 |
-
try:
|
1758 |
-
# HTML ์ฝ๋ ๋ธ๋ก ํ์ธ
|
1759 |
-
if '```html' in query and '```' in query:
|
1760 |
-
# HTML ์ฝ๋ ๋ธ๋ก ์ถ์ถ
|
1761 |
-
code = remove_code_block(query)
|
1762 |
-
else:
|
1763 |
-
# ์
๋ ฅ๋ ํ
์คํธ๋ฅผ ๊ทธ๋๋ก ์ฝ๋๋ก ์ฌ์ฉ
|
1764 |
-
code = query.strip()
|
1765 |
-
|
1766 |
-
return send_to_sandbox(code), gr.update(active_key="render")
|
1767 |
-
except Exception as e:
|
1768 |
-
print(f"Error executing code: {str(e)}")
|
1769 |
-
return None, gr.update(active_key="empty")
|
1770 |
-
|
1771 |
-
demo = gr.Blocks(css="""
|
1772 |
-
/* ๋ฉ์ธ ํญ ์คํ์ผ - ํต์ฌ ์คํ์ผ๋ง ์ ์ง */
|
1773 |
-
.main-tabs > div.tab-nav > button {
|
1774 |
-
font-size: 1.1em !important;
|
1775 |
-
padding: 0.5em 1em !important;
|
1776 |
-
background: rgba(255, 255, 255, 0.8) !important;
|
1777 |
-
border: none !important;
|
1778 |
-
border-radius: 8px 8px 0 0 !important;
|
1779 |
-
margin-right: 4px !important;
|
1780 |
-
}
|
1781 |
-
.main-tabs > div.tab-nav > button.selected {
|
1782 |
-
background: linear-gradient(45deg, #0084ff, #00a3ff) !important;
|
1783 |
-
color: white !important;
|
1784 |
-
}
|
1785 |
-
.main-tabs {
|
1786 |
-
margin-top: -20px !important;
|
1787 |
-
border-radius: 0 0 15px 15px !important;
|
1788 |
-
box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
|
1789 |
-
}
|
1790 |
-
""", theme=theme)
|
1791 |
-
|
1792 |
-
|
1793 |
-
|
1794 |
-
with demo:
|
1795 |
-
with gr.Tabs(elem_classes="main-tabs") as tabs:
|
1796 |
-
# ๊ฐค๋ฌ๋ฆฌ ํญ
|
1797 |
-
with gr.Tab("Gallery >", elem_id="gallery-tab"):
|
1798 |
-
gr.HTML(value=get_user_spaces())
|
1799 |
-
|
1800 |
-
# MOUSE ํญ
|
1801 |
-
with gr.Tab("MOUSE > ", elem_id="mouse-tab", elem_classes="mouse-tab"):
|
1802 |
-
|
1803 |
-
history = gr.State([])
|
1804 |
-
setting = gr.State({
|
1805 |
-
"system": SystemPrompt,
|
1806 |
-
})
|
1807 |
-
|
1808 |
-
with ms.Application() as app:
|
1809 |
-
with antd.ConfigProvider():
|
1810 |
-
# Drawer ์ปดํฌ๋ํธ๋ค
|
1811 |
-
with antd.Drawer(open=False, title="code", placement="left", width="750px") as code_drawer:
|
1812 |
-
code_output = legacy.Markdown()
|
1813 |
-
|
1814 |
-
with antd.Drawer(open=False, title="history", placement="left", width="900px") as history_drawer:
|
1815 |
-
history_output = legacy.Chatbot(show_label=False, flushing=False, height=960, elem_classes="history_chatbot")
|
1816 |
-
|
1817 |
-
with antd.Drawer(
|
1818 |
-
open=False,
|
1819 |
-
title="Templates",
|
1820 |
-
placement="right",
|
1821 |
-
width="900px",
|
1822 |
-
elem_classes="session-drawer"
|
1823 |
-
) as session_drawer:
|
1824 |
-
with antd.Flex(vertical=True, gap="middle"):
|
1825 |
-
gr.Markdown("### Available Templates")
|
1826 |
-
session_history = gr.HTML(
|
1827 |
-
elem_classes="session-history"
|
1828 |
-
)
|
1829 |
-
close_btn = antd.Button(
|
1830 |
-
"Close",
|
1831 |
-
type="default",
|
1832 |
-
elem_classes="close-btn"
|
1833 |
-
)
|
1834 |
-
|
1835 |
-
# ๋ฉ์ธ ์ปจํ
์ธ ๋ฅผ ์ํ Row
|
1836 |
-
with antd.Row(gutter=[32, 12]) as layout:
|
1837 |
-
# ์ข์ธก ํจ๋
|
1838 |
-
with antd.Col(span=24, md=8):
|
1839 |
-
with antd.Flex(vertical=True, gap="middle", wrap=True):
|
1840 |
-
# ํค๋ ๋ถ๋ถ
|
1841 |
-
header = gr.HTML(f"""
|
1842 |
-
<div class="left_header">
|
1843 |
-
<img src="data:image/gif;base64,{get_image_base64('mouse.gif')}" width="360px" />
|
1844 |
-
<h1 style="font-size: 18px;">'MOUSE-I' > cursor</h2>
|
1845 |
-
<h1 style="font-size: 10px;">Copy and paste the prompt from the template, and when you click Send, the code will be automatically generated. When you click Check Result and Deploy, the web service will be deployed globally through Vercel's crowd platform. Paste only the generated code into the prompt and click the 'Run Code' button to instantly run the service on the screen. Inquiries: arxivgpt@gmail.com</h1>
|
1846 |
-
<h1 style="font-size: 12px; margin-top: 10px;">
|
1847 |
-
<a href="https://VIDraft-mouse1.hf.space" target="_blank" style="color: #0084ff; text-decoration: none; transition: color 0.3s;">
|
1848 |
-
๐จ [HOME] MOUSE
|
1849 |
-
</a>
|
1850 |
-
</h1>
|
1851 |
-
</div>
|
1852 |
-
""")
|
1853 |
-
# ์
๏ฟฝ๏ฟฝ๏ฟฝ ์์ญ
|
1854 |
-
input = antd.InputTextarea(
|
1855 |
-
size="large",
|
1856 |
-
allow_clear=True,
|
1857 |
-
placeholder=random.choice(DEMO_LIST)['description']
|
1858 |
-
)
|
1859 |
-
|
1860 |
-
|
1861 |
-
# ๋ฒํผ ๊ทธ๋ฃน
|
1862 |
-
with antd.Flex(gap="small", justify="space-between"):
|
1863 |
-
btn = antd.Button("Send", type="primary", size="large")
|
1864 |
-
boost_btn = antd.Button("Boost", type="default", size="large")
|
1865 |
-
execute_btn = antd.Button("CodeRun", type="default", size="large")
|
1866 |
-
deploy_btn = antd.Button("Deploy", type="default", size="large")
|
1867 |
-
clear_btn = antd.Button("Clear", type="default", size="large")
|
1868 |
-
|
1869 |
-
deploy_result = gr.HTML(label="Deployment")
|
1870 |
-
|
1871 |
-
# ์ฐ์ธก ํจ๋
|
1872 |
-
with antd.Col(span=24, md=16):
|
1873 |
-
with ms.Div(elem_classes="right_panel"):
|
1874 |
-
# ์๋จ ๋ฒํผ๋ค
|
1875 |
-
with antd.Flex(gap="small", elem_classes="setting-buttons"):
|
1876 |
-
codeBtn = antd.Button("๐งโ๐ปCode View", type="default")
|
1877 |
-
historyBtn = antd.Button("๐History", type="default")
|
1878 |
-
best_btn = antd.Button("๐Best Template", type="default")
|
1879 |
-
trending_btn = antd.Button("๐ฅTrend Template", type="default")
|
1880 |
-
new_btn = antd.Button("โจNEW Template", type="default")
|
1881 |
-
|
1882 |
-
gr.HTML('<div class="render_header"><span class="header_btn"></span><span class="header_btn"></span><span class="header_btn"></span></div>')
|
1883 |
-
|
1884 |
-
# ํญ ์ปจํ
์ธ
|
1885 |
-
with antd.Tabs(active_key="empty", render_tab_bar="() => null") as state_tab:
|
1886 |
-
with antd.Tabs.Item(key="empty"):
|
1887 |
-
empty = antd.Empty(description="empty input", elem_classes="right_content")
|
1888 |
-
with antd.Tabs.Item(key="loading"):
|
1889 |
-
loading = antd.Spin(True, tip="coding...", size="large", elem_classes="right_content")
|
1890 |
-
with antd.Tabs.Item(key="render"):
|
1891 |
-
sandbox = gr.HTML(elem_classes="html_content")
|
1892 |
-
|
1893 |
-
# ์ด๋ฒคํธ ํธ๋ค๋ฌ ์ฐ๊ฒฐ
|
1894 |
-
execute_btn.click(
|
1895 |
-
fn=execute_code,
|
1896 |
-
inputs=[input],
|
1897 |
-
outputs=[sandbox, state_tab]
|
1898 |
-
)
|
1899 |
-
|
1900 |
-
codeBtn.click(
|
1901 |
-
lambda: gr.update(open=True),
|
1902 |
-
inputs=[],
|
1903 |
-
outputs=[code_drawer]
|
1904 |
-
)
|
1905 |
-
|
1906 |
-
code_drawer.close(
|
1907 |
-
lambda: gr.update(open=False),
|
1908 |
-
inputs=[],
|
1909 |
-
outputs=[code_drawer]
|
1910 |
-
)
|
1911 |
-
|
1912 |
-
historyBtn.click(
|
1913 |
-
history_render,
|
1914 |
-
inputs=[history],
|
1915 |
-
outputs=[history_drawer, history_output]
|
1916 |
-
)
|
1917 |
-
|
1918 |
-
history_drawer.close(
|
1919 |
-
lambda: gr.update(open=False),
|
1920 |
-
inputs=[],
|
1921 |
-
outputs=[history_drawer]
|
1922 |
-
)
|
1923 |
-
|
1924 |
-
best_btn.click(
|
1925 |
-
fn=lambda: (gr.update(open=True), load_best_templates()),
|
1926 |
-
outputs=[session_drawer, session_history],
|
1927 |
-
queue=False
|
1928 |
-
)
|
1929 |
-
|
1930 |
-
trending_btn.click(
|
1931 |
-
fn=lambda: (gr.update(open=True), load_trending_templates()),
|
1932 |
-
outputs=[session_drawer, session_history],
|
1933 |
-
queue=False
|
1934 |
-
)
|
1935 |
-
|
1936 |
-
new_btn.click(
|
1937 |
-
fn=lambda: (gr.update(open=True), load_new_templates()),
|
1938 |
-
outputs=[session_drawer, session_history],
|
1939 |
-
queue=False
|
1940 |
-
)
|
1941 |
-
|
1942 |
-
session_drawer.close(
|
1943 |
-
lambda: (gr.update(open=False), gr.HTML("")),
|
1944 |
-
outputs=[session_drawer, session_history]
|
1945 |
-
)
|
1946 |
-
|
1947 |
-
close_btn.click(
|
1948 |
-
lambda: (gr.update(open=False), gr.HTML("")),
|
1949 |
-
outputs=[session_drawer, session_history]
|
1950 |
-
)
|
1951 |
-
|
1952 |
-
btn.click(
|
1953 |
-
demo_instance.generation_code,
|
1954 |
-
inputs=[input, setting, history],
|
1955 |
-
outputs=[code_output, history, sandbox, state_tab, code_drawer]
|
1956 |
-
)
|
1957 |
-
|
1958 |
-
clear_btn.click(
|
1959 |
-
demo_instance.clear_history,
|
1960 |
-
inputs=[],
|
1961 |
-
outputs=[history]
|
1962 |
-
)
|
1963 |
-
|
1964 |
-
boost_btn.click(
|
1965 |
-
fn=handle_boost,
|
1966 |
-
inputs=[input],
|
1967 |
-
outputs=[input, state_tab]
|
1968 |
-
)
|
1969 |
-
|
1970 |
-
deploy_btn.click(
|
1971 |
-
fn=lambda code: deploy_to_vercel(remove_code_block(code)) if code else "์ฝ๋๊ฐ ์์ต๋๋ค.",
|
1972 |
-
inputs=[code_output],
|
1973 |
-
outputs=[deploy_result]
|
1974 |
-
)
|
1975 |
-
|
1976 |
-
return demo
|
1977 |
-
|
1978 |
-
# ๋ฉ์ธ ์คํ ๋ถ๋ถ
|
1979 |
-
if __name__ == "__main__":
|
1980 |
-
try:
|
1981 |
-
demo_instance = Demo() # Demo ์ธ์คํด์ค ์์ฑ
|
1982 |
-
demo = create_main_interface() # ์ธํฐํ์ด์ค ์์ฑ
|
1983 |
-
demo.queue(default_concurrency_limit=20).launch(server_name="0.0.0.0", server_port=7860) # ์๋ฒ ์ค์ ์ถ๊ฐ
|
1984 |
-
except Exception as e:
|
1985 |
-
print(f"Initialization error: {e}")
|
1986 |
-
raise
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|