Spaces:
Running
Running
File size: 12,736 Bytes
082d9d1 f695033 567736c 082d9d1 16d456d 0a632f8 082d9d1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 |
import os
import re
from http import HTTPStatus
from typing import Dict, List, Optional, Tuple
import base64
import gradio as gr
from huggingface_hub import InferenceClient
import modelscope_studio.components.base as ms
import modelscope_studio.components.legacy as legacy
import modelscope_studio.components.antd as antd
# Configuration
SystemPrompt = """You are a helpful coding assistant. You help users create applications by generating code based on their requirements.
When asked to create an application, you should:
1. Understand the user's requirements
2. Generate clean, working code
3. Provide HTML output when appropriate for web applications
4. Include necessary comments and documentation
5. Ensure the code is functional and follows best practices
Always respond with code that can be executed or rendered directly.
Always output only the HTML code inside a ```html ... ``` code block, and do not include any explanations or extra text."""
DEMO_LIST = [
{
"title": "Todo App",
"description": "Create a simple todo application with add, delete, and mark as complete functionality"
},
{
"title": "Calculator",
"description": "Build a basic calculator with addition, subtraction, multiplication, and division"
},
{
"title": "Weather Dashboard",
"description": "Create a weather dashboard that displays current weather information"
},
{
"title": "Chat Interface",
"description": "Build a chat interface with message history and user input"
},
{
"title": "E-commerce Product Card",
"description": "Create a product card component for an e-commerce website"
},
{
"title": "Login Form",
"description": "Build a responsive login form with validation"
},
{
"title": "Dashboard Layout",
"description": "Create a dashboard layout with sidebar navigation and main content area"
},
{
"title": "Data Table",
"description": "Build a data table with sorting and filtering capabilities"
}
]
# HF Inference Client
YOUR_API_TOKEN = os.getenv('HF_TOKEN')
client = InferenceClient(
provider="novita",
api_key=YOUR_API_TOKEN,
bill_to="huggingface"
)
History = List[Tuple[str, str]]
Messages = List[Dict[str, str]]
def history_to_messages(history: History, system: str) -> Messages:
messages = [{'role': 'system', 'content': system}]
for h in history:
messages.append({'role': 'user', 'content': h[0]})
messages.append({'role': 'assistant', 'content': h[1]})
return messages
def messages_to_history(messages: Messages) -> Tuple[str, History]:
assert messages[0]['role'] == 'system'
history = []
for q, r in zip(messages[1::2], messages[2::2]):
history.append([q['content'], r['content']])
return history
def remove_code_block(text):
# Try to match code blocks with language markers
patterns = [
r'```(?:html|HTML)\n([\s\S]+?)\n```', # Match ```html or ```HTML
r'```\n([\s\S]+?)\n```', # Match code blocks without language markers
r'```([\s\S]+?)```' # Match code blocks without line breaks
]
for pattern in patterns:
match = re.search(pattern, text, re.DOTALL)
if match:
extracted = match.group(1).strip()
print("Successfully extracted code block:", extracted)
return extracted
# If no code block is found, check if the entire text is HTML
if text.strip().startswith('<!DOCTYPE html>') or text.strip().startswith('<html'):
print("Text appears to be raw HTML, using as is")
return text.strip()
print("No code block found in text:", text)
return text.strip()
def history_render(history: History):
return gr.update(open=True), history
def clear_history():
return []
def send_to_sandbox(code):
# Add a wrapper to inject necessary permissions and ensure full HTML
wrapped_code = f"""
<!DOCTYPE html>
<html>
<head>
<meta charset=\"UTF-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<script>
// Safe localStorage polyfill
const safeStorage = {{
_data: {{}},
getItem: function(key) {{ return this._data[key] || null; }},
setItem: function(key, value) {{ this._data[key] = value; }},
removeItem: function(key) {{ delete this._data[key]; }},
clear: function() {{ this._data = {{}}; }}
}};
Object.defineProperty(window, 'localStorage', {{
value: safeStorage,
writable: false
}});
window.onerror = function(message, source, lineno, colno, error) {{
console.error('Error:', message);
}};
</script>
</head>
<body>
{code}
</body>
</html>
"""
encoded_html = base64.b64encode(wrapped_code.encode('utf-8')).decode('utf-8')
data_uri = f"data:text/html;charset=utf-8;base64,{encoded_html}"
iframe = f'<iframe src="{data_uri}" width="100%" height="920px" sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-modals allow-presentation" allow="display-capture"></iframe>'
print("Generated iframe:", iframe)
return iframe
def demo_card_click(e: gr.EventData):
try:
# Try to get the index from the event data
if hasattr(e, '_data') and e._data and 'component' in e._data:
index = e._data['component'].get('index', 0)
else:
# Fallback to first item if we can't get the index
index = 0
return DEMO_LIST[index]['description']
except (KeyError, IndexError, AttributeError):
# Return the first demo description as fallback
return DEMO_LIST[0]['description']
# Main application
with gr.Blocks(css_paths="app.css") as demo:
history = gr.State([])
setting = gr.State({
"system": SystemPrompt,
})
with ms.Application() as app:
with antd.ConfigProvider():
with antd.Row(gutter=[32, 12]) as layout:
with antd.Col(span=24, md=8):
with antd.Flex(vertical=True, gap="middle", wrap=True):
header = gr.HTML("""
<div class="left_header">
<img src="//img.alicdn.com/imgextra/i2/O1CN01KDhOma1DUo8oa7OIU_!!6000000000220-1-tps-240-240.gif" width="200px" />
<h1>HF Coder</h1>
</div>
""")
input = antd.InputTextarea(
size="large", allow_clear=True, placeholder="Please enter what kind of application you want")
btn = antd.Button("send", type="primary", size="large")
clear_btn = antd.Button("clear history", type="default", size="large")
antd.Divider("examples")
with antd.Flex(gap="small", wrap=True):
with ms.Each(DEMO_LIST):
with antd.Card(hoverable=True, as_item="card") as demoCard:
antd.CardMeta()
demoCard.click(demo_card_click, outputs=[input])
antd.Divider("setting")
with antd.Flex(gap="small", wrap=True):
settingPromptBtn = antd.Button(
"⚙️ set system Prompt", type="default")
codeBtn = antd.Button("🧑💻 view code", type="default")
historyBtn = antd.Button("📜 history", type="default")
with antd.Modal(open=False, title="set system Prompt", width="800px") as system_prompt_modal:
systemPromptInput = antd.InputTextarea(
SystemPrompt, auto_size=True)
settingPromptBtn.click(lambda: gr.update(
open=True), inputs=[], outputs=[system_prompt_modal])
system_prompt_modal.ok(lambda input: ({"system": input}, gr.update(
open=False)), inputs=[systemPromptInput], outputs=[setting, system_prompt_modal])
system_prompt_modal.cancel(lambda: gr.update(
open=False), outputs=[system_prompt_modal])
with antd.Drawer(open=False, title="code", placement="left", width="750px") as code_drawer:
code_output = legacy.Markdown()
codeBtn.click(lambda: gr.update(open=True),
inputs=[], outputs=[code_drawer])
code_drawer.close(lambda: gr.update(
open=False), inputs=[], outputs=[code_drawer])
with antd.Drawer(open=False, title="history", placement="left", width="900px") as history_drawer:
history_output = legacy.Chatbot(show_label=False, flushing=False, height=960, elem_classes="history_chatbot")
historyBtn.click(history_render, inputs=[history], outputs=[history_drawer, history_output])
history_drawer.close(lambda: gr.update(
open=False), inputs=[], outputs=[history_drawer])
with antd.Col(span=24, md=16):
with ms.Div(elem_classes="right_panel"):
gr.HTML('<div class="render_header"><span class="header_btn"></span><span class="header_btn"></span><span class="header_btn"></span></div>')
# Move sandbox outside of tabs for always-on visibility
sandbox = gr.HTML(elem_classes="html_content")
with antd.Tabs(active_key="empty", render_tab_bar="() => null") as state_tab:
with antd.Tabs.Item(key="empty"):
empty = antd.Empty(description="empty input", elem_classes="right_content")
with antd.Tabs.Item(key="loading"):
loading = antd.Spin(True, tip="coding...", size="large", elem_classes="right_content")
def generation_code(query: Optional[str], _setting: Dict[str, str], _history: Optional[History]):
if query is None:
query = ''
if _history is None:
_history = []
messages = history_to_messages(_history, _setting['system'])
messages.append({'role': 'user', 'content': query})
try:
completion = client.chat.completions.create(
model="deepseek-ai/DeepSeek-V3-0324",
messages=messages,
stream=True
)
content = ""
for chunk in completion:
if chunk.choices[0].delta.content:
content += chunk.choices[0].delta.content
yield {
code_output: content,
state_tab: gr.update(active_key="loading"),
code_drawer: gr.update(open=True),
}
# Final response
_history = messages_to_history(messages + [{
'role': 'assistant',
'content': content
}])
yield {
code_output: content,
history: _history,
sandbox: send_to_sandbox(remove_code_block(content)),
state_tab: gr.update(active_key="render"),
code_drawer: gr.update(open=False),
}
except Exception as e:
error_message = f"Error: {str(e)}"
yield {
code_output: error_message,
state_tab: gr.update(active_key="empty"),
code_drawer: gr.update(open=True),
}
btn.click(generation_code,
inputs=[input, setting, history],
outputs=[code_output, history, sandbox, state_tab, code_drawer])
clear_btn.click(clear_history, inputs=[], outputs=[history])
if __name__ == "__main__":
demo.queue(default_concurrency_limit=20).launch(ssr_mode=False)
|