|
|
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>ASIC Design Code Generator</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@2.0.7/css/boxicons.min.css"> |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-tomorrow.min.css" rel="stylesheet" /> |
|
|
|
|
| <style> |
| :root { |
| --primary-color: #0277bd; |
| --secondary-color: #424242; |
| --success-color: #2e7d32; |
| --warning-color: #f9a825; |
| --info-color: #0288d1; |
| --bg-color: #f5f5f5; |
| --card-bg: #ffffff; |
| --card-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); |
| --bg-color-black: #000000; |
| } |
| |
| body { |
| font-family: 'Roboto', sans-serif; |
| background-color: var(--bg-color); |
| color: var(--secondary-color); |
| line-height: 1.6; |
| } |
| |
| pre { |
| background-color: var(--bg-color-black); |
| color: #ffffff; |
| padding: 16px; |
| border-radius: 6px; |
| } |
| |
| .container { |
| max-width: 1140px; |
| margin: 0 auto; |
| padding: 40px 20px; |
| } |
| |
| .row { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 20px; |
| margin-bottom: 20px; |
| } |
| |
| .col { |
| flex: 1; |
| } |
| |
| .card { |
| background-color: var(--card-bg); |
| border-radius: 8px; |
| box-shadow: var(--card-shadow); |
| display: flex; |
| flex-direction: column; |
| padding: 20px; |
| } |
| |
| .card-header { |
| font-size: 18px; |
| font-weight: 500; |
| color: var(--primary-color); |
| display: flex; |
| align-items: center; |
| margin-bottom: 16px; |
| } |
| |
| .card-header i { |
| font-size: 24px; |
| margin-right: 8px; |
| } |
| |
| .form-control { |
| width: 100%; |
| padding: 12px 16px; |
| font-size: 16px; |
| border: 1px solid #e0e0e0; |
| border-radius: 6px; |
| transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; |
| } |
| |
| .form-control:focus { |
| outline: none; |
| border-color: var(--primary-color); |
| box-shadow: 0 0 0 4px rgba(2, 119, 189, 0.2); |
| } |
| |
| .btn { |
| display: inline-flex; |
| align-items: center; |
| font-weight: 500; |
| padding: 10px 20px; |
| font-size: 16px; |
| border-radius: 6px; |
| transition: background-color 0.2s, border-color 0.2s; |
| color: #ffffff; |
| } |
| |
| .btn-primary { |
| background-color: var(--primary-color); |
| border-color: var(--primary-color); |
| } |
| |
| .btn-primary:hover { |
| background-color: #01579b; |
| } |
| |
| .btn-success { |
| background-color: var(--success-color); |
| border-color: var(--success-color); |
| } |
| |
| .btn-success:hover { |
| background-color: #1b5e20; |
| } |
| |
| .btn-warning { |
| background-color: var(--warning-color); |
| border-color: var(--warning-color); |
| } |
| |
| .btn-warning:hover { |
| background-color: #f57f17; |
| } |
| |
| .btn-info { |
| background-color: var(--info-color); |
| border-color: var(--info-color); |
| } |
| |
| .btn-info:hover { |
| background-color: #0277bd; |
| } |
| </style> |
|
|
| <div class="container"> |
| <h1 class="text-center mb-5">ASIC Design Code Generator</h1> |
|
|
| |
| <div class="row"> |
| <div class="col"> |
| <div class="card"> |
| <div class="card-header"> |
| <i class='bx bx-pencil'></i> Design Details |
| </div> |
| <div class="card-body"> |
| <div class="mb-3"> |
| <label for="description" class="form-label">Description:</label> |
| <textarea class="form-control" id="description" rows="3" placeholder="Provide a brief description of your ASIC design" style="width:96%"></textarea> |
| </div> |
| <div class="mb-3"> |
| <label for="target-language" class="form-label">Target Language:</label> |
| <select class="form-control" id="target-language"> |
| <option value="verilog">Verilog</option> |
| <option value="vhdl">VHDL</option> |
| <option value="systemverilog">SystemVerilog</option> |
| </select> |
| </div> |
| <button class="btn btn-primary"> |
| <i class='bx bx-code'></i> Generate Code |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="row"> |
| <div class="col"> |
| <div class="card"> |
| <div class="card-header"> |
| <i class='bx bx-code-alt'></i> Generated Code |
| </div> |
| <div class="card-body"> |
| <div id="divGenerated">// Generated code will appear here</div> |
| <button class="btn btn-success"> |
| <i class='bx bx-edit'></i> Refine Code |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="row"> |
| <div class="col"> |
| <div class="card"> |
| <div class="card-header"> |
| <i class='bx bx-wrench'></i> Optimization & Linting |
| </div> |
| <div class="card-body"> |
| <button class="btn btn-warning btn-optimize"> |
| <i class='bx bx-cog'></i> Get Optimization |
| </button> |
| <p id="optimization-output">Optimization suggestions will appear here.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="row"> |
| <div class="col"> |
| <div class="card"> |
| <div class="card-header"> |
| <i class='bx bx-bug'></i> Failure Modes & Test Benches |
| </div> |
| <div class="card-body"> |
| <button class="btn btn-info btn-test-bench"> |
| <i class='bx bx-test-tube'></i> Generate Test Bench |
| </button> |
| <p id="test-bench-output">Test bench suggestions will appear here.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </body> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> |
| <script> |
| document.addEventListener("DOMContentLoaded", () => { |
| const descriptionInput = document.getElementById("description"); |
| const languageSelect = document.getElementById("target-language"); |
| const generateButton = document.querySelector(".btn-primary"); |
| const refineButton = document.querySelector(".btn-success"); |
| const generatedCodeOutput = document.getElementById("divGenerated"); |
| const optimizeButton = document.querySelector(".btn-optimize"); |
| const testBenchButton = document.querySelector(".btn-test-bench"); |
| const optimizationOutput = document.querySelector("#optimization-output"); |
| const testBenchOutput = document.querySelector("#test-bench-output"); |
| |
| let websocket; |
| |
| function connectWebSocket(endpoint) { |
| const protocol = window.location.protocol === "https:" ? "wss://" : "ws://"; |
| websocket = new WebSocket(`${protocol}${window.location.host}${endpoint}`); |
| websocket.onmessage = (event) => { |
| generatedCodeOutput.innerHTML = marked.parse( event.data); |
| }; |
| websocket.onclose = () => { |
| console.log("WebSocket connection closed"); |
| }; |
| } |
| |
| function connectWebSocket(endpoint, onMessageCallback) { |
| const protocol = window.location.protocol === "https:" ? "wss://" : "ws://"; |
| websocket = new WebSocket(`${protocol}${window.location.host}${endpoint}`); |
| websocket.onmessage = (event) => { |
| onMessageCallback(event.data); |
| }; |
| websocket.onclose = () => { |
| console.log("WebSocket connection closed"); |
| }; |
| } |
| |
| generateButton.addEventListener("click", () => { |
| connectWebSocket("/ws/generate_code",(data) => { |
| generatedCodeOutput.innerHTML = marked.parse( data); |
| }); |
| const description = descriptionInput.value; |
| const language = languageSelect.value; |
| websocket.onopen = () => { |
| websocket.send(JSON.stringify({ description, language })); |
| }; |
| }); |
| |
| refineButton.addEventListener("click", () => { |
| connectWebSocket("/ws/refine_code",(data) => { |
| generatedCodeOutput.innerHTML = marked.parse( data); |
| }); |
| const existing_code = generatedCodeOutput.textContent; |
| const language = languageSelect.value; |
| websocket.onopen = () => { |
| websocket.send(JSON.stringify({ existing_code, language })); |
| }; |
| }); |
| |
| optimizeButton.addEventListener("click", () => { |
| connectWebSocket("/ws/optimize_code", (data) => { |
| optimizationOutput.innerHTML = marked.parse( data); |
| }); |
| const code = generatedCodeOutput.textContent; |
| const language = languageSelect.value; |
| websocket.onopen = () => { |
| websocket.send(JSON.stringify({ code, language })); |
| }; |
| }); |
| |
| testBenchButton.addEventListener("click", () => { |
| connectWebSocket("/ws/generate_test_bench", (data) => { |
| testBenchOutput.innerHTML = marked.parse( data); |
| }); |
| const code = generatedCodeOutput.textContent; |
| const language = languageSelect.value; |
| websocket.onopen = () => { |
| websocket.send(JSON.stringify({ code, language })); |
| }; |
| }); |
| }); |
| |
| |
| </script> |
| </html> |
