ai-apps/scriptbook/index.html at main · MicrosoftLearning/ai-apps · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>ScriptBook - Python Notebook</title>
    <link rel="stylesheet" href="https://pyscript.net/releases/2024.1.1/core.css">
    <link rel="stylesheet" href="styles.css?v=save42">
    <script type="module" src="https://pyscript.net/releases/2024.1.1/core.js"></script>
</head>
<body>
    <div class="container">
        <header>
            <h1>ScriptBook</h1>
            <p class="subtitle">A basic Python notebook environment for educational use</p>
        </header>

        <div class="toolbar" role="toolbar" aria-label="Notebook controls">
            <button id="runAllBtn" class="btn btn-primary" aria-label="Run all cells in the notebook" title="Run all cells in the notebook" tabindex="0">▶ Run All</button>
            <button id="clearAllBtn" class="btn btn-secondary" aria-label="Clear all cells and outputs" title="Clear all cells and outputs" tabindex="0">🗑 Clear All</button>
            <button id="saveBtn" class="btn btn-save" aria-label="Save notebook to file" title="Save notebook to file" tabindex="0">💾 Save Notebook</button>
            <label for="loadFile" class="btn btn-load" aria-label="Load notebook from file" title="Load notebook from file" tabindex="0">📂 Load Notebook</label>
            <input type="file" id="loadFile" accept=".pysb" style="display: none;" aria-label="Select notebook file to load" tabindex="-1">
            <label for="fileUpload" class="btn btn-upload" aria-label="Upload data file (CSV or text)" title="Upload data file (CSV or text)" tabindex="0">&#128196; Upload Data</label>
            <input type="file" id="fileUpload" accept=".txt,.csv" style="display: none;" aria-label="Select data file to upload" tabindex="-1">
            <span id="uploadedFileName" class="file-name" role="status" aria-live="polite"></span>
        </div>

        <div class="notebook-container">
            <div id="notebook" class="notebook" role="main" aria-label="Notebook cells container"></div>
        </div>
    </div>

    <!-- PyScript configuration -->
    <script type="py" config='{"packages": ["numpy", "pandas", "matplotlib", "scikit-learn"]}'>
        import js
        from pyodide.ffi import create_proxy
        import sys
        from io import StringIO
        import base64
        import warnings

        # Suppress matplotlib warnings about non-GUI backend
        warnings.filterwarnings('ignore', category=UserWarning, module='matplotlib')

        # Configure matplotlib to not display automatically
        import matplotlib
        matplotlib.use('Agg')  # Use non-interactive backend
        import matplotlib.pyplot as plt
        plt.ioff()  # Turn off interactive mode

        # Global storage for uploaded files
        uploaded_files = {}

        def store_file(filename, content):
            """Store uploaded file content"""
            uploaded_files[filename] = content
            with open(filename, 'w') as f:
                f.write(content)

        def get_uploaded_files():
            """Return list of uploaded files"""
            return list(uploaded_files.keys())
    </script>

    <script src="script.js?v=save53"></script>
</body>
</html>