Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PyStructure Studio</title> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> | |
| <script src="https://unpkg.com/konva@9/konva.min.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <!-- Left Sidebar / Navigation --> | |
| <div class="sidebar"> | |
| <div class="brand"> | |
| <div class="logo-square"></div> | |
| PyStructure | |
| </div> | |
| <nav class="nav-menu"> | |
| <button class="nav-item active" onclick="switchTab('visualizer')"> | |
| <span class="icon">🕸️</span> Visualizer | |
| </button> | |
| <button class="nav-item" onclick="switchTab('dataset')"> | |
| <span class="icon">💾</span> Dataset Manager | |
| </button> | |
| </nav> | |
| <div class="sidebar-footer"> | |
| <div id="statusIndicator" class="status-ready">System Ready</div> | |
| </div> | |
| </div> | |
| <!-- Main Content Area --> | |
| <div class="main-content"> | |
| <!-- Tab 1: Visualizer --> | |
| <div id="tab-visualizer" class="tab-pane active"> | |
| <div class="editor-panel"> | |
| <div class="panel-header">Source Code</div> | |
| <textarea id="codeInput" spellcheck="false"> | |
| def bubble_sort(arr): | |
| n = len(arr) | |
| for i in range(n): | |
| for j in range(0, n-i-1): | |
| if arr[j] > arr[j+1]: | |
| arr[j], arr[j+1] = arr[j+1], arr[j] | |
| return arr | |
| </textarea> | |
| <div class="action-bar"> | |
| <button class="btn btn-primary" onclick="visualize()">Run Graph</button> | |
| <button class="btn btn-secondary" onclick="addToDataset()">+ Add to Dataset</button> | |
| </div> | |
| </div> | |
| <div class="canvas-panel" id="container"></div> | |
| </div> | |
| <!-- Tab 2: Dataset Manager --> | |
| <div id="tab-dataset" class="tab-pane"> | |
| <div class="dataset-header"> | |
| <h2>Captured Data</h2> | |
| <div class="header-actions"> | |
| <button class="btn btn-outline" onclick="loadDatasetTable()">🔄 Refresh</button> | |
| <a href="/dataset/download" class="btn btn-outline" target="_blank">⬇ Download JSONL</a> | |
| <button class="btn btn-primary" onclick="openUploadModal()">☁ Upload to HF Hub</button> | |
| </div> | |
| </div> | |
| <div class="table-container"> | |
| <table class="data-table"> | |
| <thead> | |
| <tr> | |
| <th>ID</th> | |
| <th>Timestamp</th> | |
| <th>Nodes</th> | |
| <th>Snippet</th> | |
| </tr> | |
| </thead> | |
| <tbody id="datasetTableBody"> | |
| <!-- Populated by JS --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Upload Modal --> | |
| <div id="uploadModal" class="modal-overlay hidden"> | |
| <div class="modal"> | |
| <h3>Upload to Hugging Face</h3> | |
| <p>Push your <code>dataset.jsonl</code> to the Hub.</p> | |
| <label>HF Token (Write Access)</label> | |
| <input type="password" id="hfToken" placeholder="hf_..."> | |
| <label>Repository ID</label> | |
| <input type="text" id="hfRepo" placeholder="dataset-name (Username auto-detected)"> | |
| <div class="modal-actions"> | |
| <button class="btn btn-secondary" onclick="closeUploadModal()">Cancel</button> | |
| <button class="btn btn-primary" onclick="performUpload()">Push to Hub</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="{{ url_for('static', filename='canvas.js') }}"></script> | |
| </body> | |
| </html> |