akhaliq HF Staff commited on
Commit
e95ecad
·
1 Parent(s): dd486c6
Files changed (1) hide show
  1. app.py +18 -52
app.py CHANGED
@@ -90,9 +90,9 @@ The style.css should contain all the styling for the application.
90
 
91
  Always output only the three code blocks as shown above, and do not include any explanations or extra text."""
92
 
93
- SVELTE_SYSTEM_PROMPT = """You are an expert Svelte developer creating a modern Svelte application. You will generate ONLY the custom files that need user-specific content.
94
 
95
- IMPORTANT: You MUST output ONLY the custom files in the following format:
96
 
97
  ```svelte
98
  <!-- src/App.svelte content here -->
@@ -102,12 +102,13 @@ IMPORTANT: You MUST output ONLY the custom files in the following format:
102
  /* src/app.css content here */
103
  ```
104
 
 
105
  ```svelte
106
- <!-- src/lib/Counter.svelte content here -->
107
  ```
108
 
109
  Requirements:
110
- 1. Create a modern, responsive Svelte application
111
  2. Use TypeScript for better type safety
112
  3. Create a clean, professional UI with good user experience
113
  4. Make the application fully responsive for mobile devices
@@ -116,15 +117,16 @@ Requirements:
116
  7. Follow accessibility best practices
117
  8. Use Svelte's reactive features effectively
118
  9. Include proper component structure and organization
 
119
 
120
- The files you generate are:
121
- - src/App.svelte: Main application component (your custom app logic)
122
- - src/app.css: Global styles (your custom styling)
123
- - src/lib/Counter.svelte: Example component (your custom components)
124
 
125
  The other files (index.html, package.json, vite.config.ts, tsconfig files, svelte.config.js, src/main.ts, src/vite-env.d.ts) are provided by the Svelte template and don't need to be generated.
126
 
127
- Always output only the three code blocks as shown above, and do not include any explanations or extra text."""
128
 
129
  SVELTE_SYSTEM_PROMPT_WITH_SEARCH = """You are an expert Svelte developer creating a modern Svelte application. You have access to real-time web search. When needed, use web search to find the latest information, best practices, or specific Svelte technologies.
130
 
@@ -137,11 +139,7 @@ IMPORTANT: You MUST output ONLY the custom files in the following format:
137
  ```
138
 
139
  ```css
140
- /* src/app.css content here */
141
- ```
142
-
143
- ```svelte
144
- <!-- src/lib/Counter.svelte content here -->
145
  ```
146
 
147
  Requirements:
@@ -159,11 +157,10 @@ Requirements:
159
  The files you generate are:
160
  - src/App.svelte: Main application component (your custom app logic)
161
  - src/app.css: Global styles (your custom styling)
162
- - src/lib/Counter.svelte: Example component (your custom components)
163
 
164
  The other files (index.html, package.json, vite.config.ts, tsconfig files, svelte.config.js, src/main.ts, src/vite-env.d.ts) are provided by the Svelte template and don't need to be generated.
165
 
166
- Always output only the three code blocks as shown above, and do not include any explanations or extra text."""
167
 
168
  TRANSFORMERS_JS_SYSTEM_PROMPT_WITH_SEARCH = """You are an expert web developer creating a transformers.js application. You have access to real-time web search. When needed, use web search to find the latest information, best practices, or specific technologies for transformers.js.
169
 
@@ -605,8 +602,7 @@ def parse_svelte_output(text):
605
  """Parse Svelte output to extract individual files"""
606
  files = {
607
  'src/App.svelte': '',
608
- 'src/app.css': '',
609
- 'src/lib/Counter.svelte': ''
610
  }
611
 
612
  import re
@@ -615,30 +611,25 @@ def parse_svelte_output(text):
615
  svelte_pattern = r'```svelte\s*\n([\s\S]+?)\n```'
616
  css_pattern = r'```css\s*\n([\s\S]+?)\n```'
617
 
618
- # Extract first svelte block for App.svelte
619
- svelte_matches = re.findall(svelte_pattern, text, re.IGNORECASE)
620
  css_match = re.search(css_pattern, text, re.IGNORECASE)
621
 
622
- if len(svelte_matches) >= 1:
623
- files['src/App.svelte'] = svelte_matches[0].strip()
624
  if css_match:
625
  files['src/app.css'] = css_match.group(1).strip()
626
- if len(svelte_matches) >= 2:
627
- files['src/lib/Counter.svelte'] = svelte_matches[1].strip()
628
 
629
  # Fallback: support === filename === format if any file is missing
630
  if not (files['src/App.svelte'] and files['src/app.css']):
631
  # Use regex to extract sections
632
  app_svelte_fallback = re.search(r'===\s*src/App\.svelte\s*===\n([\s\S]+?)(?=\n===|$)', text, re.IGNORECASE)
633
  app_css_fallback = re.search(r'===\s*src/app\.css\s*===\n([\s\S]+?)(?=\n===|$)', text, re.IGNORECASE)
634
- counter_svelte_fallback = re.search(r'===\s*src/lib/Counter\.svelte\s*===\n([\s\S]+?)(?=\n===|$)', text, re.IGNORECASE)
635
 
636
  if app_svelte_fallback:
637
  files['src/App.svelte'] = app_svelte_fallback.group(1).strip()
638
  if app_css_fallback:
639
  files['src/app.css'] = app_css_fallback.group(1).strip()
640
- if counter_svelte_fallback:
641
- files['src/lib/Counter.svelte'] = counter_svelte_fallback.group(1).strip()
642
 
643
  return files
644
 
@@ -649,8 +640,6 @@ def format_svelte_output(files):
649
  output.append(files['src/App.svelte'])
650
  output.append("\n=== src/app.css ===")
651
  output.append(files['src/app.css'])
652
- output.append("\n=== src/lib/Counter.svelte ===")
653
- output.append(files['src/lib/Counter.svelte'])
654
  return '\n'.join(output)
655
 
656
  def history_render(history: History):
@@ -2333,29 +2322,6 @@ with gr.Blocks(
2333
  import os
2334
  os.unlink(temp_path)
2335
 
2336
- # Upload src/lib/Counter.svelte (optional)
2337
- if files['src/lib/Counter.svelte']:
2338
- with tempfile.NamedTemporaryFile("w", suffix=".svelte", delete=False) as f:
2339
- f.write(files['src/lib/Counter.svelte'])
2340
- temp_path = f.name
2341
-
2342
- try:
2343
- api.upload_file(
2344
- path_or_fileobj=temp_path,
2345
- path_in_repo="src/lib/Counter.svelte",
2346
- repo_id=actual_repo_id,
2347
- repo_type="space"
2348
- )
2349
- except Exception as e:
2350
- error_msg = str(e)
2351
- if "403 Forbidden" in error_msg and "write token" in error_msg:
2352
- return gr.update(value=f"Error: Permission denied. Please ensure you have write access to {actual_repo_id} and your token has the correct permissions.", visible=True)
2353
- else:
2354
- return gr.update(value=f"Error uploading src/lib/Counter.svelte: {e}", visible=True)
2355
- finally:
2356
- import os
2357
- os.unlink(temp_path)
2358
-
2359
  # Success - all files uploaded
2360
  space_url = f"https://huggingface.co/spaces/{actual_repo_id}"
2361
  action_text = "Updated" if is_update else "Deployed"
 
90
 
91
  Always output only the three code blocks as shown above, and do not include any explanations or extra text."""
92
 
93
+ SVELTE_SYSTEM_PROMPT = """You are an expert Svelte developer creating a modern Svelte application. You will generate ONLY the custom files that need user-specific content for the user's requested application.
94
 
95
+ IMPORTANT: You MUST output files in the following format. Generate ONLY the files needed for the user's specific request:
96
 
97
  ```svelte
98
  <!-- src/App.svelte content here -->
 
102
  /* src/app.css content here */
103
  ```
104
 
105
+ If you need additional components for the user's specific app, add them like:
106
  ```svelte
107
+ <!-- src/lib/ComponentName.svelte content here -->
108
  ```
109
 
110
  Requirements:
111
+ 1. Create a modern, responsive Svelte application based on the user's specific request
112
  2. Use TypeScript for better type safety
113
  3. Create a clean, professional UI with good user experience
114
  4. Make the application fully responsive for mobile devices
 
117
  7. Follow accessibility best practices
118
  8. Use Svelte's reactive features effectively
119
  9. Include proper component structure and organization
120
+ 10. Generate ONLY components that are actually needed for the user's requested application
121
 
122
+ Files you should generate:
123
+ - src/App.svelte: Main application component (ALWAYS required)
124
+ - src/app.css: Global styles (ALWAYS required)
125
+ - src/lib/[ComponentName].svelte: Additional components (ONLY if needed for the user's specific app)
126
 
127
  The other files (index.html, package.json, vite.config.ts, tsconfig files, svelte.config.js, src/main.ts, src/vite-env.d.ts) are provided by the Svelte template and don't need to be generated.
128
 
129
+ Always output only the two code blocks as shown above, and do not include any explanations or extra text."""
130
 
131
  SVELTE_SYSTEM_PROMPT_WITH_SEARCH = """You are an expert Svelte developer creating a modern Svelte application. You have access to real-time web search. When needed, use web search to find the latest information, best practices, or specific Svelte technologies.
132
 
 
139
  ```
140
 
141
  ```css
142
+ /* src/app.css content here -->
 
 
 
 
143
  ```
144
 
145
  Requirements:
 
157
  The files you generate are:
158
  - src/App.svelte: Main application component (your custom app logic)
159
  - src/app.css: Global styles (your custom styling)
 
160
 
161
  The other files (index.html, package.json, vite.config.ts, tsconfig files, svelte.config.js, src/main.ts, src/vite-env.d.ts) are provided by the Svelte template and don't need to be generated.
162
 
163
+ Always output only the two code blocks as shown above, and do not include any explanations or extra text."""
164
 
165
  TRANSFORMERS_JS_SYSTEM_PROMPT_WITH_SEARCH = """You are an expert web developer creating a transformers.js application. You have access to real-time web search. When needed, use web search to find the latest information, best practices, or specific technologies for transformers.js.
166
 
 
602
  """Parse Svelte output to extract individual files"""
603
  files = {
604
  'src/App.svelte': '',
605
+ 'src/app.css': ''
 
606
  }
607
 
608
  import re
 
611
  svelte_pattern = r'```svelte\s*\n([\s\S]+?)\n```'
612
  css_pattern = r'```css\s*\n([\s\S]+?)\n```'
613
 
614
+ # Extract svelte block for App.svelte
615
+ svelte_match = re.search(svelte_pattern, text, re.IGNORECASE)
616
  css_match = re.search(css_pattern, text, re.IGNORECASE)
617
 
618
+ if svelte_match:
619
+ files['src/App.svelte'] = svelte_match.group(1).strip()
620
  if css_match:
621
  files['src/app.css'] = css_match.group(1).strip()
 
 
622
 
623
  # Fallback: support === filename === format if any file is missing
624
  if not (files['src/App.svelte'] and files['src/app.css']):
625
  # Use regex to extract sections
626
  app_svelte_fallback = re.search(r'===\s*src/App\.svelte\s*===\n([\s\S]+?)(?=\n===|$)', text, re.IGNORECASE)
627
  app_css_fallback = re.search(r'===\s*src/app\.css\s*===\n([\s\S]+?)(?=\n===|$)', text, re.IGNORECASE)
 
628
 
629
  if app_svelte_fallback:
630
  files['src/App.svelte'] = app_svelte_fallback.group(1).strip()
631
  if app_css_fallback:
632
  files['src/app.css'] = app_css_fallback.group(1).strip()
 
 
633
 
634
  return files
635
 
 
640
  output.append(files['src/App.svelte'])
641
  output.append("\n=== src/app.css ===")
642
  output.append(files['src/app.css'])
 
 
643
  return '\n'.join(output)
644
 
645
  def history_render(history: History):
 
2322
  import os
2323
  os.unlink(temp_path)
2324
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2325
  # Success - all files uploaded
2326
  space_url = f"https://huggingface.co/spaces/{actual_repo_id}"
2327
  action_text = "Updated" if is_update else "Deployed"