File size: 4,130 Bytes
bcc43d3
 
 
 
 
d3b2fdc
b54f37a
bcc43d3
d3b2fdc
bcc43d3
 
d3b2fdc
 
 
 
 
 
 
87a6e43
d3b2fdc
 
 
 
 
 
 
 
87a6e43
d3b2fdc
 
 
 
87a6e43
d3b2fdc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
87a6e43
d3b2fdc
 
87a6e43
d3b2fdc
 
 
 
 
 
 
 
87a6e43
 
d3b2fdc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
87a6e43
d3b2fdc
87a6e43
d3b2fdc
 
 
 
 
 
 
 
 
 
3c3a4be
d3b2fdc
 
 
 
87a6e43
 
bcc43d3
87a6e43
b54f37a
bcc43d3
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<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>