Spaces:

yasserrmd
/

ASICForge

Sleeping

File size: 8,997 Bytes


<!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>

  <!-- Design Details Card -->
  <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>

  <!-- Generated Code Card -->
  <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>

  <!-- Optimization & Linting Card -->
  <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>

  <!-- Failure Modes & Test Benches Card -->
  <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>