Hugging Face's logo

Spaces:
devmanmikey
/
dynamic-components-generator_web
Sleeping

App Files Community
DevmanMikey commited on
Commit
6b8f145
·
1 Parent(s): 5479b70

Fix Spaces deployment: Remove external dependencies, use simpler HTML output

Browse files
Files changed (2) hide show
  1. app.py +61 -28
  2. requirements.txt +0 -2
app.py CHANGED
@@ -1,9 +1,4 @@
1
  import gradio as gr
2
- from gradio_client import Client
3
- from modelscope_studio.components.pro import WebSandbox
4
-
5
- # Initialize client for Qwen3-Coder Spaces app
6
- client = Client("Qwen/Qwen3-Coder-WebDev")
7
 
8
  # Basic react imports (expand as needed)
9
  react_imports = {
@@ -13,43 +8,81 @@ react_imports = {
13
  }
14
 
15
  def generate_component(prompt):
16
- """Generate component using Spaces API"""
17
- try:
18
- result = client.predict(
19
- input_value=prompt,
20
- system_prompt_input_value="You are an expert frontend developer. Create interactive components with postMessage for parent communication.",
21
- api_name="/generate_code"
22
- )
23
- # Extract HTML code
24
- html_code = result[1]['value']
25
- return {"./index.html": html_code}
26
- except Exception as e:
27
- return {"./index.html": f"<h1>Error: {str(e)}</h1>"}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
 
29
  with gr.Blocks(title="Dynamic Components Generator") as demo:
30
  gr.Markdown("# 🚀 Dynamic Components Generator")
31
  gr.Markdown("Generate AI-powered web components with OpenPlatform integration.")
32
-
 
33
  prompt_input = gr.Textbox(
34
  label="Component Description",
35
  placeholder="e.g., Create an interactive to-do list with add/delete buttons",
36
  lines=3
37
  )
38
-
39
  generate_btn = gr.Button("Generate Component", variant="primary")
40
-
41
- sandbox = WebSandbox(
42
- height=500,
43
- template="html",
44
- imports=react_imports
45
- )
46
-
47
  generate_btn.click(
48
  generate_component,
49
  inputs=[prompt_input],
50
- outputs=[sandbox]
51
  )
52
-
53
  gr.Markdown("### OpenPlatform Integration")
54
  gr.Markdown("Components include `postMessage` for seamless communication with parent apps.")
55
 
 
1
  import gradio as gr
 
 
 
 
 
2
 
3
  # Basic react imports (expand as needed)
4
  react_imports = {
 
8
  }
9
 
10
  def generate_component(prompt):
11
+ """Generate a simple component for demonstration"""
12
+ # For now, create a basic interactive component
13
+ # Later we can integrate with the Qwen3-Coder API
14
+ html_code = f"""
15
+ <!DOCTYPE html>
16
+ <html>
17
+ <head>
18
+ <title>Generated Component</title>
19
+ <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
20
+ <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
21
+ <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
22
+ </head>
23
+ <body>
24
+ <div id="root"></div>
25
+
26
+ <script type="text/babel">
27
+ function App() {{
28
+ const [message, setMessage] = React.useState("Hello from generated component!");
29
+ const [count, setCount] = React.useState(0);
30
+
31
+ const sendMessage = () => {{
32
+ // postMessage for OpenPlatform integration
33
+ window.parent.postMessage({{
34
+ type: 'component-event',
35
+ data: {{ message, count }},
36
+ prompt: '{prompt.replace("'", "\\'")}'
37
+ }}, '*');
38
+ setCount(count + 1);
39
+ }};
40
+
41
+ return (
42
+ <div style={{{{ padding: '20px', fontFamily: 'Arial, sans-serif' }}}>
43
+ <h2>🚀 Dynamic Component</h2>
44
+ <p>Prompt: {prompt}</p>
45
+ <p>Message: {{message}}</p>
46
+ <p>Interactions: {{count}}</p>
47
+ <button
48
+ onClick={{sendMessage}}
49
+ style={{{{ padding: '10px 20px', backgroundColor: '#6A57FF', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}}}
50
+ >
51
+ Send Message to Parent
52
+ </button>
53
+ </div>
54
+ );
55
+ }}
56
+
57
+ ReactDOM.render(<App />, document.getElementById('root'));
58
+ </script>
59
+ </body>
60
+ </html>
61
+ """
62
+ return {"./index.html": html_code}
63
 
64
  with gr.Blocks(title="Dynamic Components Generator") as demo:
65
  gr.Markdown("# 🚀 Dynamic Components Generator")
66
  gr.Markdown("Generate AI-powered web components with OpenPlatform integration.")
67
+ gr.Markdown("**Note:** This is a demo version. Full AI integration coming soon!")
68
+
69
  prompt_input = gr.Textbox(
70
  label="Component Description",
71
  placeholder="e.g., Create an interactive to-do list with add/delete buttons",
72
  lines=3
73
  )
74
+
75
  generate_btn = gr.Button("Generate Component", variant="primary")
76
+
77
+ # Use HTML component instead of WebSandbox for better Spaces compatibility
78
+ html_output = gr.HTML()
79
+
 
 
 
80
  generate_btn.click(
81
  generate_component,
82
  inputs=[prompt_input],
83
+ outputs=[html_output]
84
  )
85
+
86
  gr.Markdown("### OpenPlatform Integration")
87
  gr.Markdown("Components include `postMessage` for seamless communication with parent apps.")
88
 
requirements.txt CHANGED
@@ -1,3 +1 @@
1
  gradio==5.38.0
2
- gradio_client
3
- modelscope_studio
 
1
  gradio==5.38.0