Hugging Face's logo

Spaces:
broadfield-dev
/
noding
Sleeping

App Files Community
broadfield-dev commited on
Commit
d3b2fdc
·
verified ·
1 Parent(s): 2ed9f98

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +85 -49
templates/index.html CHANGED
@@ -3,70 +3,106 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>PyStructure v2.0</title>
7
- <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
8
- <!-- Load Konva from CDN -->
9
  <script src="https://unpkg.com/konva@9/konva.min.js"></script>
10
- <link rel="preconnect" href="https://fonts.googleapis.com">
11
- <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;700&display=swap" rel="stylesheet">
12
  </head>
13
  <body>
14
- <div class="app-container">
15
- <!-- Sidebar -->
16
- <div class="sidebar">
17
- <div class="header">
18
- <h1>PyStructure</h1>
19
- <span class="badge">RESEARCH PREVIEW</span>
20
- </div>
21
-
22
- <div class="editor-container">
23
- <textarea id="codeInput" placeholder="Paste Python code here...">
24
- def fibonacci(n):
25
- if n <= 1:
26
- return n
27
- else:
28
- return fibonacci(n-1) + fibonacci(n-2)
29
 
30
- class DataProcessor:
31
- def __init__(self, data):
32
- self.data = data
33
- self.clean()
 
 
 
 
34
 
35
- def clean(self):
36
- result = []
37
- for item in self.data:
38
- if item is not None:
39
- result.append(item)
40
- self.data = result
41
- </textarea>
42
- </div>
43
 
44
- <div class="controls">
45
- <button id="btnVisualize" class="btn primary">
46
- <span class="icon">▶</span> Visualize Structure
47
- </button>
48
- <button id="btnDataset" class="btn secondary">
49
- <span class="icon">✚</span> Add to Dataset
50
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
51
  </div>
 
 
52
 
53
- <div class="console">
54
- <div class="console-header">SYSTEM LOGS</div>
55
- <div id="logOutput" class="console-body">
56
- > System initialized...<br>
57
- > Waiting for input...
 
 
 
58
  </div>
59
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
60
  </div>
 
61
 
62
- <!-- Main Canvas Area -->
63
- <div class="canvas-wrapper" id="container">
64
- <div class="overlay-info">
65
- Scroll to Zoom • Drag to Pan
 
 
 
 
 
 
 
 
 
 
 
66
  </div>
67
  </div>
68
  </div>
69
 
70
- <script src="{{ url_for('static', filename='canvas.js') }}"></script>
71
  </body>
72
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>PyStructure Studio</title>
7
+ <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
 
8
  <script src="https://unpkg.com/konva@9/konva.min.js"></script>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
 
10
  </head>
11
  <body>
12
+
13
+ <!-- Left Sidebar / Navigation -->
14
+ <div class="sidebar">
15
+ <div class="brand">
16
+ <div class="logo-square"></div>
17
+ PyStructure
18
+ </div>
 
 
 
 
 
 
 
 
19
 
20
+ <nav class="nav-menu">
21
+ <button class="nav-item active" onclick="switchTab('visualizer')">
22
+ <span class="icon">🕸️</span> Visualizer
23
+ </button>
24
+ <button class="nav-item" onclick="switchTab('dataset')">
25
+ <span class="icon">💾</span> Dataset Manager
26
+ </button>
27
+ </nav>
28
 
29
+ <div class="sidebar-footer">
30
+ <div id="statusIndicator" class="status-ready">System Ready</div>
31
+ </div>
32
+ </div>
 
 
 
 
33
 
34
+ <!-- Main Content Area -->
35
+ <div class="main-content">
36
+
37
+ <!-- Tab 1: Visualizer -->
38
+ <div id="tab-visualizer" class="tab-pane active">
39
+ <div class="editor-panel">
40
+ <div class="panel-header">Source Code</div>
41
+ <textarea id="codeInput" spellcheck="false">
42
+ def bubble_sort(arr):
43
+ n = len(arr)
44
+ for i in range(n):
45
+ for j in range(0, n-i-1):
46
+ if arr[j] > arr[j+1]:
47
+ arr[j], arr[j+1] = arr[j+1], arr[j]
48
+ return arr
49
+ </textarea>
50
+ <div class="action-bar">
51
+ <button class="btn btn-primary" onclick="visualize()">Run Graph</button>
52
+ <button class="btn btn-secondary" onclick="addToDataset()">+ Add to Dataset</button>
53
+ </div>
54
  </div>
55
+ <div class="canvas-panel" id="container"></div>
56
+ </div>
57
 
58
+ <!-- Tab 2: Dataset Manager -->
59
+ <div id="tab-dataset" class="tab-pane">
60
+ <div class="dataset-header">
61
+ <h2>Captured Data</h2>
62
+ <div class="header-actions">
63
+ <button class="btn btn-outline" onclick="loadDatasetTable()">🔄 Refresh</button>
64
+ <a href="/dataset/download" class="btn btn-outline" target="_blank">⬇ Download JSONL</a>
65
+ <button class="btn btn-primary" onclick="openUploadModal()">☁ Upload to HF Hub</button>
66
  </div>
67
  </div>
68
+
69
+ <div class="table-container">
70
+ <table class="data-table">
71
+ <thead>
72
+ <tr>
73
+ <th>ID</th>
74
+ <th>Timestamp</th>
75
+ <th>Nodes</th>
76
+ <th>Snippet</th>
77
+ </tr>
78
+ </thead>
79
+ <tbody id="datasetTableBody">
80
+ <!-- Populated by JS -->
81
+ </tbody>
82
+ </table>
83
+ </div>
84
  </div>
85
+ </div>
86
 
87
+ <!-- Upload Modal -->
88
+ <div id="uploadModal" class="modal-overlay hidden">
89
+ <div class="modal">
90
+ <h3>Upload to Hugging Face</h3>
91
+ <p>Push your <code>dataset.jsonl</code> to the Hub.</p>
92
+
93
+ <label>HF Token (Write Access)</label>
94
+ <input type="password" id="hfToken" placeholder="hf_...">
95
+
96
+ <label>Repository ID</label>
97
+ <input type="text" id="hfRepo" placeholder="username/dataset-name">
98
+
99
+ <div class="modal-actions">
100
+ <button class="btn btn-secondary" onclick="closeUploadModal()">Cancel</button>
101
+ <button class="btn btn-primary" onclick="performUpload()">Push to Hub</button>
102
  </div>
103
  </div>
104
  </div>
105
 
106
+ <script src="{{ url_for('static', filename='js/main.js') }}"></script>
107
  </body>
108
  </html>