Spaces:
Running
Running
Update app.py
Browse files
app.py
CHANGED
|
@@ -34,21 +34,37 @@ class GradioEvents:
|
|
| 34 |
def generate_code(input_value, system_prompt_input_value, state_value):
|
| 35 |
|
| 36 |
def get_generated_files(text):
|
|
|
|
| 37 |
patterns = {
|
| 38 |
-
'html': r'```html\n(
|
| 39 |
-
'jsx': r'```jsx\n(
|
| 40 |
-
'tsx': r'```tsx\n(
|
| 41 |
}
|
| 42 |
result = {}
|
| 43 |
|
|
|
|
| 44 |
for ext, pattern in patterns.items():
|
| 45 |
matches = re.findall(pattern, text, re.DOTALL)
|
| 46 |
if matches:
|
| 47 |
content = '\n'.join(matches).strip()
|
| 48 |
result[f'index.{ext}'] = content
|
| 49 |
|
|
|
|
| 50 |
if len(result) == 0:
|
| 51 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 52 |
return result
|
| 53 |
|
| 54 |
yield {
|
|
@@ -60,10 +76,21 @@ class GradioEvents:
|
|
| 60 |
if input_value is None:
|
| 61 |
input_value = ''
|
| 62 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 63 |
messages = [{
|
| 64 |
'role': "system",
|
| 65 |
-
"content":
|
| 66 |
-
# 'content': system_prompt_input_value
|
| 67 |
}] + state_value["history"]
|
| 68 |
|
| 69 |
messages.append({'role': 'user', 'content': input_value})
|
|
@@ -84,8 +111,9 @@ class GradioEvents:
|
|
| 84 |
for chunk in hf_client.chat_completion(
|
| 85 |
messages=formatted_messages,
|
| 86 |
stream=True,
|
| 87 |
-
max_tokens=
|
| 88 |
-
temperature=0.7
|
|
|
|
| 89 |
):
|
| 90 |
if chunk.choices[0].delta.content:
|
| 91 |
response += chunk.choices[0].delta.content
|
|
@@ -104,6 +132,11 @@ class GradioEvents:
|
|
| 104 |
"index.tsx") or generated_files.get("index.jsx")
|
| 105 |
html_code = generated_files.get("index.html")
|
| 106 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 107 |
yield {
|
| 108 |
output:
|
| 109 |
gr.update(value=response),
|
|
@@ -142,7 +175,10 @@ export default Demo
|
|
| 142 |
|
| 143 |
generator = openai_client.chat.completions.create(model=MODEL,
|
| 144 |
messages=messages,
|
| 145 |
-
stream=True
|
|
|
|
|
|
|
|
|
|
| 146 |
response = ""
|
| 147 |
for chunk in generator:
|
| 148 |
content = chunk.choices[0].delta.content
|
|
@@ -163,6 +199,11 @@ export default Demo
|
|
| 163 |
"index.tsx") or generated_files.get("index.jsx")
|
| 164 |
html_code = generated_files.get("index.html")
|
| 165 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 166 |
yield {
|
| 167 |
output:
|
| 168 |
gr.update(value=response),
|
|
@@ -269,6 +310,17 @@ css = """
|
|
| 269 |
min-height: 100%;
|
| 270 |
}
|
| 271 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 272 |
"""
|
| 273 |
|
| 274 |
with gr.Blocks(css=css) as demo:
|
|
@@ -294,7 +346,7 @@ with gr.Blocks(css=css) as demo:
|
|
| 294 |
height=200,
|
| 295 |
preview=False)
|
| 296 |
antd.Typography.Title(
|
| 297 |
-
"GLM-4.5-Coder",
|
| 298 |
level=1,
|
| 299 |
elem_style=dict(fontSize=24))
|
| 300 |
# Input
|
|
@@ -429,7 +481,12 @@ with gr.Blocks(css=css) as demo:
|
|
| 429 |
width="750px") as output_code_drawer:
|
| 430 |
with ms.Div(elem_classes="output-code"):
|
| 431 |
with antd.Spin(spinning=False) as output_loading:
|
| 432 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 433 |
|
| 434 |
with antd.Drawer(
|
| 435 |
open=False,
|
|
@@ -459,7 +516,7 @@ with gr.Blocks(css=css) as demo:
|
|
| 459 |
antd.Tour.Step(
|
| 460 |
title="Step 3",
|
| 461 |
description="Wait for the result.",
|
| 462 |
-
|
| 463 |
"() => document.querySelector('#output-container')"
|
| 464 |
)
|
| 465 |
antd.Tour.Step(
|
|
|
|
| 34 |
def generate_code(input_value, system_prompt_input_value, state_value):
|
| 35 |
|
| 36 |
def get_generated_files(text):
|
| 37 |
+
# Improved regex patterns to better capture code blocks
|
| 38 |
patterns = {
|
| 39 |
+
'html': r'```html\n(.*?)\n```',
|
| 40 |
+
'jsx': r'```jsx\n(.*?)\n```',
|
| 41 |
+
'tsx': r'```tsx\n(.*?)\n```',
|
| 42 |
}
|
| 43 |
result = {}
|
| 44 |
|
| 45 |
+
# First try to find specific code blocks
|
| 46 |
for ext, pattern in patterns.items():
|
| 47 |
matches = re.findall(pattern, text, re.DOTALL)
|
| 48 |
if matches:
|
| 49 |
content = '\n'.join(matches).strip()
|
| 50 |
result[f'index.{ext}'] = content
|
| 51 |
|
| 52 |
+
# If no specific code blocks found, try to extract any code block
|
| 53 |
if len(result) == 0:
|
| 54 |
+
# Look for any code block without specific language
|
| 55 |
+
generic_pattern = r'```\n(.*?)\n```'
|
| 56 |
+
matches = re.findall(generic_pattern, text, re.DOTALL)
|
| 57 |
+
if matches:
|
| 58 |
+
content = '\n'.join(matches).strip()
|
| 59 |
+
# Try to determine if it's HTML or React/JSX
|
| 60 |
+
if '<html>' in content.lower() or '<!DOCTYPE html>' in content.lower():
|
| 61 |
+
result["index.html"] = content
|
| 62 |
+
else:
|
| 63 |
+
result["index.jsx"] = content
|
| 64 |
+
else:
|
| 65 |
+
# If no code blocks found at all, use the entire text as HTML
|
| 66 |
+
result["index.html"] = text.strip()
|
| 67 |
+
|
| 68 |
return result
|
| 69 |
|
| 70 |
yield {
|
|
|
|
| 76 |
if input_value is None:
|
| 77 |
input_value = ''
|
| 78 |
|
| 79 |
+
# Enhanced system prompt with more specific instructions
|
| 80 |
+
enhanced_system_prompt = SYSTEM_PROMPT + """
|
| 81 |
+
|
| 82 |
+
IMPORTANT: When generating code, you must:
|
| 83 |
+
1. Always include the complete code in a code block with the appropriate language tag (html, jsx, or tsx)
|
| 84 |
+
2. For HTML: Include all necessary HTML, CSS, and JavaScript in a single file
|
| 85 |
+
3. For React: Include all necessary imports and component code in a single file
|
| 86 |
+
4. Make sure the code is complete, functional, and directly addresses the user's request
|
| 87 |
+
5. Do not include explanations outside of code blocks unless specifically asked
|
| 88 |
+
6. Always use proper formatting and indentation
|
| 89 |
+
"""
|
| 90 |
+
|
| 91 |
messages = [{
|
| 92 |
'role': "system",
|
| 93 |
+
"content": enhanced_system_prompt
|
|
|
|
| 94 |
}] + state_value["history"]
|
| 95 |
|
| 96 |
messages.append({'role': 'user', 'content': input_value})
|
|
|
|
| 111 |
for chunk in hf_client.chat_completion(
|
| 112 |
messages=formatted_messages,
|
| 113 |
stream=True,
|
| 114 |
+
max_tokens=12000, # Increased token limit for longer responses
|
| 115 |
+
temperature=0.7,
|
| 116 |
+
top_p=0.9
|
| 117 |
):
|
| 118 |
if chunk.choices[0].delta.content:
|
| 119 |
response += chunk.choices[0].delta.content
|
|
|
|
| 132 |
"index.tsx") or generated_files.get("index.jsx")
|
| 133 |
html_code = generated_files.get("index.html")
|
| 134 |
|
| 135 |
+
# Make sure we have some code to display
|
| 136 |
+
if not react_code and not html_code:
|
| 137 |
+
# If no code was extracted, use the entire response as HTML
|
| 138 |
+
html_code = response
|
| 139 |
+
|
| 140 |
yield {
|
| 141 |
output:
|
| 142 |
gr.update(value=response),
|
|
|
|
| 175 |
|
| 176 |
generator = openai_client.chat.completions.create(model=MODEL,
|
| 177 |
messages=messages,
|
| 178 |
+
stream=True,
|
| 179 |
+
max_tokens=8000, # Increased token limit
|
| 180 |
+
temperature=0.7,
|
| 181 |
+
top_p=0.9)
|
| 182 |
response = ""
|
| 183 |
for chunk in generator:
|
| 184 |
content = chunk.choices[0].delta.content
|
|
|
|
| 199 |
"index.tsx") or generated_files.get("index.jsx")
|
| 200 |
html_code = generated_files.get("index.html")
|
| 201 |
|
| 202 |
+
# Make sure we have some code to display
|
| 203 |
+
if not react_code and not html_code:
|
| 204 |
+
# If no code was extracted, use the entire response as HTML
|
| 205 |
+
html_code = response
|
| 206 |
+
|
| 207 |
yield {
|
| 208 |
output:
|
| 209 |
gr.update(value=response),
|
|
|
|
| 310 |
min-height: 100%;
|
| 311 |
}
|
| 312 |
|
| 313 |
+
/* Make sure code is displayed properly */
|
| 314 |
+
.code-container {
|
| 315 |
+
background-color: #f6f8fa;
|
| 316 |
+
border-radius: 6px;
|
| 317 |
+
padding: 16px;
|
| 318 |
+
overflow: auto;
|
| 319 |
+
font-family: monospace;
|
| 320 |
+
white-space: pre;
|
| 321 |
+
max-height: 600px;
|
| 322 |
+
}
|
| 323 |
+
|
| 324 |
"""
|
| 325 |
|
| 326 |
with gr.Blocks(css=css) as demo:
|
|
|
|
| 346 |
height=200,
|
| 347 |
preview=False)
|
| 348 |
antd.Typography.Title(
|
| 349 |
+
"GLM-4.5-Coder",
|
| 350 |
level=1,
|
| 351 |
elem_style=dict(fontSize=24))
|
| 352 |
# Input
|
|
|
|
| 481 |
width="750px") as output_code_drawer:
|
| 482 |
with ms.Div(elem_classes="output-code"):
|
| 483 |
with antd.Spin(spinning=False) as output_loading:
|
| 484 |
+
# Changed from Markdown to Code for better code display
|
| 485 |
+
output = gr.Code(
|
| 486 |
+
language="html",
|
| 487 |
+
elem_classes="code-container",
|
| 488 |
+
lines=20
|
| 489 |
+
)
|
| 490 |
|
| 491 |
with antd.Drawer(
|
| 492 |
open=False,
|
|
|
|
| 516 |
antd.Tour.Step(
|
| 517 |
title="Step 3",
|
| 518 |
description="Wait for the result.",
|
| 519 |
+
get_target=
|
| 520 |
"() => document.querySelector('#output-container')"
|
| 521 |
)
|
| 522 |
antd.Tour.Step(
|