Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Code Complexity Predictor</title> | |
| <!-- Modern Fonts --> | |
| <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=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;700&family=Outfit:wght@600;800&display=swap" rel="stylesheet"> | |
| <!-- Prism.js for code syntax highlighting --> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" /> | |
| <!-- Custom Styles --> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <div class="background-effects"> | |
| <div class="glow-orb orb-1"></div> | |
| <div class="glow-orb orb-2"></div> | |
| </div> | |
| <main class="container"> | |
| <header> | |
| <div class="logo-wrapper"> | |
| <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M10 20L14 4M18 8L22 12L18 16M6 16L2 12L6 8" stroke="url(#paint0_linear)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> | |
| <defs> | |
| <linearGradient id="paint0_linear" x1="2" y1="12" x2="22" y2="12" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#00F0FF" /> | |
| <stop offset="1" stop-color="#8000FF" /> | |
| </linearGradient> | |
| </defs> | |
| </svg> | |
| <h1>Complexity <span>Predictor</span></h1> | |
| </div> | |
| <p class="subtitle">// AI-powered algorithmic Big-O analysis using CodeBERT</p> | |
| </header> | |
| <div class="app-grid"> | |
| <!-- Left Side: Code Input --> | |
| <section class="editor-section"> | |
| <div class="card glass-panel"> | |
| <div class="card-header"> | |
| <span class="dot red"></span> | |
| <span class="dot yellow"></span> | |
| <span class="dot green"></span> | |
| <span class="filename">algorithm.py</span> | |
| </div> | |
| <div class="editor-wrapper"> | |
| <!-- We use a textarea over a pre code block to allow editing, | |
| but styling them to overlap for syntax highlighting --> | |
| <textarea id="codeInput" placeholder="# Paste your Python or Java code here... | |
| def example(arr): | |
| for item in arr: | |
| print(item)"></textarea> | |
| </div> | |
| </div> | |
| <button id="analyzeBtn" class="primary-btn"> | |
| <span class="btn-text">⚡ Analyze Complexity</span> | |
| <span class="loader hidden"></span> | |
| </button> | |
| <div class="examples-section"> | |
| <h3>Try these examples:</h3> | |
| <div class="example-chips"> | |
| <button class="chip" data-example='def get_first(arr):\n return arr[0]'>O(1) Constant</button> | |
| <button class="chip" data-example='def linear_search(arr, target):\n for i in range(len(arr)):\n if arr[i] == target:\n return i\n return -1'>O(n) Linear</button> | |
| <button class="chip" data-example='def bubble_sort(arr):\n n = len(arr)\n for i in range(n):\n for j in range(0, n-i-1):\n if arr[j] > arr[j+1]:\n arr[j], arr[j+1] = arr[j+1], arr[j]'>O(n²) Quadratic</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Right Side: Results --> | |
| <section class="results-section"> | |
| <div class="result-card glass-panel"> | |
| <h2 class="result-label">Big-O Notation</h2> | |
| <div class="result-value glow-text" id="resNotation">O(?)</div> | |
| </div> | |
| <div class="result-card glass-panel"> | |
| <h2 class="result-label">Complexity Class</h2> | |
| <div class="result-value" id="resTitle">-</div> | |
| </div> | |
| <div class="result-card glass-panel desc-card"> | |
| <h2 class="result-label">Explanation</h2> | |
| <p class="result-desc" id="resDesc">Awaiting code input to predict complexity.</p> | |
| </div> | |
| </section> | |
| </div> | |
| </main> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> | |