|
|
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 |
|
|
|
|
|
|
|
|
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" |
|
|
} |
|
|
] |
|
|
|
|
|
|
|
|
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): |
|
|
|
|
|
patterns = [ |
|
|
r'```(?:html|HTML)\n([\s\S]+?)\n```', |
|
|
r'```\n([\s\S]+?)\n```', |
|
|
r'```([\s\S]+?)```' |
|
|
] |
|
|
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 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): |
|
|
|
|
|
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: |
|
|
|
|
|
if hasattr(e, '_data') and e._data and 'component' in e._data: |
|
|
index = e._data['component'].get('index', 0) |
|
|
else: |
|
|
|
|
|
index = 0 |
|
|
return DEMO_LIST[index]['description'] |
|
|
except (KeyError, IndexError, AttributeError): |
|
|
|
|
|
return DEMO_LIST[0]['description'] |
|
|
|
|
|
|
|
|
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>') |
|
|
|
|
|
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), |
|
|
} |
|
|
|
|
|
|
|
|
_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) |
|
|
|
