Hugging Face's logo

Spaces:
yasserrmd
/
ASICForge
Sleeping

App Files Community
yasserrmd commited on
Commit
9a0f876
·
verified ·
1 Parent(s): 9887a1c

Update static/asic-design-code-generator.html

Browse files
Files changed (1) hide show
  1. static/asic-design-code-generator.html +195 -195
static/asic-design-code-generator.html CHANGED
@@ -12,218 +12,218 @@
12
  <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
13
 
14
 
15
- <style>
16
- :root {
17
- --primary-color: #0277bd;
18
- --secondary-color: #424242;
19
- --success-color: #2e7d32;
20
- --bg-color: #f5f5f5;
21
- --card-bg: #ffffff;
22
- --card-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
23
- --bg-color-black:#000000;
24
- }
25
-
26
- body {
27
- font-family: 'Roboto', sans-serif;
28
- background-color: var(--bg-color);
29
- color: var(--secondary-color);
30
- line-height: 1.6;
31
- }
32
-
33
- pre {
34
- background-color: var(--bg-color-black)
35
- }
36
-
37
- .container {
38
- max-width: 1140px;
39
- margin: 0 auto;
40
- padding: 40px 20px;
41
- }
42
-
43
- .row {
44
- display: flex;
45
- flex-wrap: wrap;
46
- margin: -20px;
47
- }
48
-
49
- .col {
50
- flex: 1;
51
- padding: 20px;
52
- }
53
-
54
- @media (max-width: 767px) {
55
- .col {
56
- flex-basis: 100%;
57
- }
58
- }
59
-
60
- .card {
61
- background-color: var(--card-bg);
62
- border-radius: 8px;
63
- box-shadow: var(--card-shadow);
64
- height: 100%;
65
- display: flex;
66
- flex-direction: column;
67
- }
68
-
69
- .card-header {
70
- font-size: 18px;
71
- font-weight: 500;
72
- color: var(--primary-color);
73
- padding: 16px 24px;
74
- border-bottom: 1px solid #e0e0e0;
75
- display: flex;
76
- align-items: center;
77
- }
78
-
79
- .card-header i {
80
- font-size: 24px;
81
- margin-right: 12px;
82
- }
83
-
84
- .card-body {
85
- flex-grow: 1;
86
- padding: 24px;
87
- }
88
-
89
- .form-control {
90
- display: block;
91
- width: 100%;
92
- padding: 12px 16px;
93
- font-size: 16px;
94
- border: 1px solid #e0e0e0;
95
- border-radius: 6px;
96
- transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
97
- }
98
-
99
- .form-control:focus {
100
- outline: none;
101
- border-color: var(--primary-color);
102
- box-shadow: 0 0 0 4px rgba(2, 119, 189, 0.2);
103
- }
104
-
105
- .btn {
106
- display: inline-block;
107
- font-weight: 500;
108
- text-align: center;
109
- white-space: nowrap;
110
- vertical-align: middle;
111
- user-select: none;
112
- border: 1px solid transparent;
113
- padding: 12px 24px;
114
- font-size: 16px;
115
- line-height: 1.5;
116
- border-radius: 6px;
117
- transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
118
- }
119
-
120
- .btn-primary {
121
- color: #fff;
122
- background-color: var(--primary-color);
123
- border-color: var(--primary-color);
124
- }
125
-
126
- .btn-primary:hover {
127
- background-color: #01579b;
128
- border-color: #014c7f;
129
- }
130
-
131
- .btn-success {
132
- color: #fff;
133
- background-color: var(--success-color);
134
- border-color: var(--success-color);
135
- }
 
 
 
 
 
 
 
 
136
 
137
- .btn-success:hover {
138
- background-color: #1b5e20;
139
- border-color: #165617;
140
- }
141
- </style>
142
- </head>
143
- <body>
144
- <div class="container">
145
- <h1 class="text-center mb-5">ASIC Design Code Generator</h1>
146
 
147
- <div class="row">
148
- <div class="card">
149
- <div class="card-header">
150
- <i class='bx bx-pencil'></i>
151
- Design Details
 
 
 
 
 
 
152
  </div>
153
- <div class="card-body">
154
- <div class="mb-3">
155
- <label for="description" class="form-label">Description:</label>
156
- <textarea class="form-control" id="description" rows="3" placeholder="Provide a brief description of your ASIC design" style="width:93% !important"></textarea>
157
- </div>
158
- <div class="mb-3">
159
- <label for="target-language" class="form-label">Target Language:</label>
160
- <select class="form-control" id="target-language">
161
- <option value="verilog">Verilog</option>
162
- <option value="vhdl">VHDL</option>
163
- <option value="systemverilog">SystemVerilog</option>
164
- </select>
165
- </div>
166
- <div class="text-end">
167
- <button class="btn btn-primary">
168
- <i class='bx bx-code'></i>
169
- Generate Code
170
- </button>
171
- </div>
172
  </div>
 
 
 
173
  </div>
174
  </div>
 
 
175
 
176
- <div class="row">
177
- <div class="card">
178
- <div class="card-header">
179
- <i class='bx bx-code-alt'></i>
180
- Generated Code
181
- </div>
182
- <div class="card-body">
183
- <button class="btn btn-success">
184
- <i class='bx bx-edit'></i>
185
- Refine Code
186
- </button>
187
- <div class="bg-light rounded p-3" id="divGenerated">
188
- // Generated code will appear here
189
- </div>
190
- </div>
191
  </div>
192
  </div>
193
-
194
-
195
-
196
- <div class="row">
197
- <div class="card">
198
- <div class="card-header">
199
- <i class='bx bx-wrench'></i> Optimization & Linting
200
  </div>
201
- <div class="card-body">
202
- <button class="btn btn-optimize">
203
- <i class='bx bx-cog'></i> Get Optimization
204
- </button>
205
- <p id="optimization-output">Optimization suggestions will appear here.</p>
206
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
207
  </div>
208
  </div>
209
- </div>
210
 
211
- <div class="row">
212
- <div class="card">
213
- <div class="card-header">
214
- <i class='bx bx-bug'></i> Failure Modes & Test Benches
215
- </div>
216
- <div class="card-body">
217
- <button class="btn btn-test-bench">
218
- <i class='bx bx-test-tube'></i> Generate Test Bench
219
- </button>
220
- <p id="test-bench-output">Test bench suggestions will appear here.</p>
221
-
 
 
 
222
  </div>
223
  </div>
224
  </div>
225
-
226
- </div>
227
  </body>
228
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
229
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
 
12
  <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
13
 
14
 
15
+ <style>
16
+ :root {
17
+ --primary-color: #0277bd;
18
+ --secondary-color: #424242;
19
+ --success-color: #2e7d32;
20
+ --warning-color: #f9a825;
21
+ --info-color: #0288d1;
22
+ --bg-color: #f5f5f5;
23
+ --card-bg: #ffffff;
24
+ --card-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
25
+ --bg-color-black: #000000;
26
+ }
27
+
28
+ body {
29
+ font-family: 'Roboto', sans-serif;
30
+ background-color: var(--bg-color);
31
+ color: var(--secondary-color);
32
+ line-height: 1.6;
33
+ }
34
+
35
+ pre {
36
+ background-color: var(--bg-color-black);
37
+ color: #ffffff;
38
+ padding: 16px;
39
+ border-radius: 6px;
40
+ }
41
+
42
+ .container {
43
+ max-width: 1140px;
44
+ margin: 0 auto;
45
+ padding: 40px 20px;
46
+ }
47
+
48
+ .row {
49
+ display: flex;
50
+ flex-wrap: wrap;
51
+ gap: 20px;
52
+ margin-bottom: 20px;
53
+ }
54
+
55
+ .col {
56
+ flex: 1;
57
+ }
58
+
59
+ .card {
60
+ background-color: var(--card-bg);
61
+ border-radius: 8px;
62
+ box-shadow: var(--card-shadow);
63
+ display: flex;
64
+ flex-direction: column;
65
+ padding: 20px;
66
+ }
67
+
68
+ .card-header {
69
+ font-size: 18px;
70
+ font-weight: 500;
71
+ color: var(--primary-color);
72
+ display: flex;
73
+ align-items: center;
74
+ margin-bottom: 16px;
75
+ }
76
+
77
+ .card-header i {
78
+ font-size: 24px;
79
+ margin-right: 8px;
80
+ }
81
+
82
+ .form-control {
83
+ width: 100%;
84
+ padding: 12px 16px;
85
+ font-size: 16px;
86
+ border: 1px solid #e0e0e0;
87
+ border-radius: 6px;
88
+ transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
89
+ }
90
+
91
+ .form-control:focus {
92
+ outline: none;
93
+ border-color: var(--primary-color);
94
+ box-shadow: 0 0 0 4px rgba(2, 119, 189, 0.2);
95
+ }
96
+
97
+ .btn {
98
+ display: inline-flex;
99
+ align-items: center;
100
+ font-weight: 500;
101
+ padding: 10px 20px;
102
+ font-size: 16px;
103
+ border-radius: 6px;
104
+ transition: background-color 0.2s, border-color 0.2s;
105
+ color: #ffffff;
106
+ }
107
+
108
+ .btn-primary {
109
+ background-color: var(--primary-color);
110
+ border-color: var(--primary-color);
111
+ }
112
+
113
+ .btn-primary:hover {
114
+ background-color: #01579b;
115
+ }
116
+
117
+ .btn-success {
118
+ background-color: var(--success-color);
119
+ border-color: var(--success-color);
120
+ }
121
+
122
+ .btn-success:hover {
123
+ background-color: #1b5e20;
124
+ }
125
+
126
+ .btn-warning {
127
+ background-color: var(--warning-color);
128
+ border-color: var(--warning-color);
129
+ }
130
+
131
+ .btn-warning:hover {
132
+ background-color: #f57f17;
133
+ }
134
+
135
+ .btn-info {
136
+ background-color: var(--info-color);
137
+ border-color: var(--info-color);
138
+ }
139
+
140
+ .btn-info:hover {
141
+ background-color: #0277bd;
142
+ }
143
+ </style>
144
 
145
+ <div class="container">
146
+ <h1 class="text-center mb-5">ASIC Design Code Generator</h1>
 
 
 
 
 
 
 
147
 
148
+ <!-- Design Details Card -->
149
+ <div class="row">
150
+ <div class="col">
151
+ <div class="card">
152
+ <div class="card-header">
153
+ <i class='bx bx-pencil'></i> Design Details
154
+ </div>
155
+ <div class="card-body">
156
+ <div class="mb-3">
157
+ <label for="description" class="form-label">Description:</label>
158
+ <textarea class="form-control" id="description" rows="3" placeholder="Provide a brief description of your ASIC design"></textarea>
159
  </div>
160
+ <div class="mb-3">
161
+ <label for="target-language" class="form-label">Target Language:</label>
162
+ <select class="form-control" id="target-language">
163
+ <option value="verilog">Verilog</option>
164
+ <option value="vhdl">VHDL</option>
165
+ <option value="systemverilog">SystemVerilog</option>
166
+ </select>
 
 
 
 
 
 
 
 
 
 
 
 
167
  </div>
168
+ <button class="btn btn-primary">
169
+ <i class='bx bx-code'></i> Generate Code
170
+ </button>
171
  </div>
172
  </div>
173
+ </div>
174
+ </div>
175
 
176
+ <!-- Generated Code Card -->
177
+ <div class="row">
178
+ <div class="col">
179
+ <div class="card">
180
+ <div class="card-header">
181
+ <i class='bx bx-code-alt'></i> Generated Code
182
+ </div>
183
+ <div class="card-body">
184
+ <pre id="divGenerated">// Generated code will appear here</pre>
185
+ <button class="btn btn-success">
186
+ <i class='bx bx-edit'></i> Refine Code
187
+ </button>
 
 
 
188
  </div>
189
  </div>
 
 
 
 
 
 
 
190
  </div>
191
+ </div>
 
 
 
 
192
 
193
+ <!-- Optimization & Linting Card -->
194
+ <div class="row">
195
+ <div class="col">
196
+ <div class="card">
197
+ <div class="card-header">
198
+ <i class='bx bx-wrench'></i> Optimization & Linting
199
+ </div>
200
+ <div class="card-body">
201
+ <button class="btn btn-warning">
202
+ <i class='bx bx-cog'></i> Get Optimization
203
+ </button>
204
+ <p id="optimization-output">Optimization suggestions will appear here.</p>
205
+ </div>
206
+ </div>
207
  </div>
208
  </div>
 
209
 
210
+ <!-- Failure Modes & Test Benches Card -->
211
+ <div class="row">
212
+ <div class="col">
213
+ <div class="card">
214
+ <div class="card-header">
215
+ <i class='bx bx-bug'></i> Failure Modes & Test Benches
216
+ </div>
217
+ <div class="card-body">
218
+ <button class="btn btn-info">
219
+ <i class='bx bx-test-tube'></i> Generate Test Bench
220
+ </button>
221
+ <p id="test-bench-output">Test bench suggestions will appear here.</p>
222
+ </div>
223
+ </div>
224
  </div>
225
  </div>
226
  </div>
 
 
227
  </body>
228
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
229
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>