|
|
|
|
|
<!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/[email protected]/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> |
