Hugging Face's logo

Spaces:
Kiru-13051
/
kelmoidai-genesis-cad-maestro
Running

App Files Community
Kiru-13051 commited on
Commit
d52fe87
·
verified ·
1 Parent(s): c97746d

use a reference of openscad but i want a user to in put natural langauge prompt

Browse files
Files changed (1) hide show
  1. generator.html +61 -26
generator.html CHANGED
@@ -62,19 +62,35 @@
62
  <i data-feather="refresh-cw" class="w-5 h-5"></i>
63
  </button>
64
  </div>
65
-
66
  <div class="space-y-6">
67
  <div>
68
- <label class="block text-sm font-medium mb-2">Design Type</label>
69
- <select class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
70
- <option>Mechanical Part</option>
71
- <option>Civil Structure</option>
72
- <option>Electro-Mechanical</option>
73
- <option>Custom Assembly</option>
74
- </select>
75
  </div>
76
-
77
- <div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
78
  <label class="block text-sm font-medium mb-2">Category</label>
79
  <select class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
80
  <option>Gears & Bearings</option>
@@ -116,27 +132,46 @@
116
  </label>
117
  <input type="range" min="5" max="100" value="20" class="w-full param-slider">
118
  </div>
119
-
120
- <div class="pt-4">
121
- <button class="w-full py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-semibold flex items-center justify-center">
122
  <i data-feather="zap" class="w-5 h-5 mr-2"></i> Generate Design
123
  </button>
 
 
 
124
  </div>
125
- </div>
126
  </div>
127
 
128
  <!-- Design Preview -->
129
  <div class="lg:col-span-2">
130
  <div class="design-pane rounded-xl border border-gray-700 overflow-hidden relative" style="height: 500px;">
131
- <div class="absolute inset-0 flex items-center justify-center">
132
- <div class="text-center">
133
- <i data-feather="cpu" class="w-16 h-16 mx-auto text-blue-400 mb-4 loading-spinner"></i>
134
- <p class="text-gray-400">Generating your design...</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
135
  </div>
136
  </div>
137
  </div>
138
-
139
- <!-- Output Options -->
140
  <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
141
  <div class="bg-gray-800 bg-opacity-70 p-4 rounded-lg border border-gray-700">
142
  <div class="flex items-center justify-between mb-2">
@@ -146,9 +181,9 @@
146
  </button>
147
  </div>
148
  <div class="h-32 bg-gray-900 rounded flex items-center justify-center">
149
- <i data-feather="file" class="w-8 h-8 text-gray-600"></i>
150
  </div>
151
- </div>
152
  <div class="bg-gray-800 bg-opacity-70 p-4 rounded-lg border border-gray-700">
153
  <div class="flex items-center justify-between mb-2">
154
  <span class="text-sm font-medium">3D Model</span>
@@ -157,9 +192,9 @@
157
  </button>
158
  </div>
159
  <div class="h-32 bg-gray-900 rounded flex items-center justify-center">
160
- <i data-feather="box" class="w-8 h-8 text-gray-600"></i>
161
  </div>
162
- </div>
163
  <div class="bg-gray-800 bg-opacity-70 p-4 rounded-lg border border-gray-700">
164
  <div class="flex items-center justify-between mb-2">
165
  <span class="text-sm font-medium">4D Sim</span>
@@ -168,9 +203,9 @@
168
  </button>
169
  </div>
170
  <div class="h-32 bg-gray-900 rounded flex items-center justify-center">
171
- <i data-feather="play" class="w-8 h-8 text-gray-600"></i>
172
  </div>
173
- </div>
174
  </div>
175
  </div>
176
  </div>
 
62
  <i data-feather="refresh-cw" class="w-5 h-5"></i>
63
  </button>
64
  </div>
 
65
  <div class="space-y-6">
66
  <div>
67
+ <label class="block text-sm font-medium mb-2">Describe your design</label>
68
+ <textarea
69
+ placeholder="e.g. 'A helical gear with 24 teeth, 20° pressure angle, 2.0 module, 20mm face width'"
70
+ class="w-full h-32 bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
71
+ ></textarea>
 
 
72
  </div>
73
+ <div class="grid grid-cols-2 gap-4">
74
+ <div>
75
+ <label class="block text-sm font-medium mb-2">Quality</label>
76
+ <select class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
77
+ <option>Draft (Fast)</option>
78
+ <option selected>Standard</option>
79
+ <option>High</option>
80
+ <option>Ultra</option>
81
+ </select>
82
+ </div>
83
+ <div>
84
+ <label class="block text-sm font-medium mb-2">Style</label>
85
+ <select class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
86
+ <option>OpenSCAD Wireframe</option>
87
+ <option selected>OpenSCAD Rendered</option>
88
+ <option>Technical Blueprint</option>
89
+ <option>Photorealistic</option>
90
+ </select>
91
+ </div>
92
+ </div>
93
+ <div>
94
  <label class="block text-sm font-medium mb-2">Category</label>
95
  <select class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
96
  <option>Gears & Bearings</option>
 
132
  </label>
133
  <input type="range" min="5" max="100" value="20" class="w-full param-slider">
134
  </div>
135
+ <div class="pt-4 grid grid-cols-2 gap-4">
136
+ <button class="py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-semibold flex items-center justify-center">
 
137
  <i data-feather="zap" class="w-5 h-5 mr-2"></i> Generate Design
138
  </button>
139
+ <button class="py-3 bg-gray-700 hover:bg-gray-600 rounded-lg font-semibold flex items-center justify-center">
140
+ <i data-feather="code" class="w-5 h-5 mr-2"></i> Show OpenSCAD Code
141
+ </button>
142
  </div>
143
+ </div>
144
  </div>
145
 
146
  <!-- Design Preview -->
147
  <div class="lg:col-span-2">
148
  <div class="design-pane rounded-xl border border-gray-700 overflow-hidden relative" style="height: 500px;">
149
+ <div class="absolute inset-0 flex flex-col">
150
+ <div class="border-b border-gray-700 p-2 bg-gray-800 flex justify-between items-center">
151
+ <div class="text-sm font-mono">openscad_preview.stl</div>
152
+ <div class="flex space-x-2">
153
+ <button class="p-1 text-gray-400 hover:text-white">
154
+ <i data-feather="maximize-2" class="w-4 h-4"></i>
155
+ </button>
156
+ <button class="p-1 text-gray-400 hover:text-white">
157
+ <i data-feather="refresh-cw" class="w-4 h-4"></i>
158
+ </button>
159
+ </div>
160
+ </div>
161
+ <div class="flex-grow flex items-center justify-center bg-gray-900">
162
+ <div class="text-center">
163
+ <i data-feather="cpu" class="w-16 h-16 mx-auto text-blue-400 mb-4 loading-spinner"></i>
164
+ <p class="text-gray-400">Generating OpenSCAD preview...</p>
165
+ <div class="mt-4 text-xs text-gray-500">
166
+ <p>Processing natural language prompt</p>
167
+ <p>Generating OpenSCAD code</p>
168
+ <p>Rendering preview</p>
169
+ </div>
170
+ </div>
171
  </div>
172
  </div>
173
  </div>
174
+ <!-- Output Options -->
 
175
  <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
176
  <div class="bg-gray-800 bg-opacity-70 p-4 rounded-lg border border-gray-700">
177
  <div class="flex items-center justify-between mb-2">
 
181
  </button>
182
  </div>
183
  <div class="h-32 bg-gray-900 rounded flex items-center justify-center">
184
+ <img src="http://static.photos/technology/320x240/42" alt="2D Blueprint" class="h-full w-full object-cover rounded">
185
  </div>
186
+ </div>
187
  <div class="bg-gray-800 bg-opacity-70 p-4 rounded-lg border border-gray-700">
188
  <div class="flex items-center justify-between mb-2">
189
  <span class="text-sm font-medium">3D Model</span>
 
192
  </button>
193
  </div>
194
  <div class="h-32 bg-gray-900 rounded flex items-center justify-center">
195
+ <img src="http://static.photos/industry/320x240/43" alt="3D Model" class="h-full w-full object-cover rounded">
196
  </div>
197
+ </div>
198
  <div class="bg-gray-800 bg-opacity-70 p-4 rounded-lg border border-gray-700">
199
  <div class="flex items-center justify-between mb-2">
200
  <span class="text-sm font-medium">4D Sim</span>
 
203
  </button>
204
  </div>
205
  <div class="h-32 bg-gray-900 rounded flex items-center justify-center">
206
+ <img src="http://static.photos/science/320x240/44" alt="4D Sim" class="h-full w-full object-cover rounded">
207
  </div>
208
+ </div>
209
  </div>
210
  </div>
211
  </div>