File size: 4,359 Bytes
3b405b9
 
 
 
 
133d361
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3b405b9
133d361
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3b405b9
2ffe902
133d361
 
 
 
 
 
 
 
 
 
 
 
 
3b405b9
133d361
 
 
 
 
 
 
3b405b9
 
133d361
 
 
 
2ffe902
 
133d361
 
 
 
 
 
 
 
 
 
 
 
2ffe902
133d361
3b405b9
133d361
 
 
 
 
 
2ffe902
3b405b9
 
133d361
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MPI Distributed Computing Interface</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            margin-bottom: 20px;
        }
        #logs {
            border: 1px solid #ccc;
            padding: 10px;
            height: 200px;
            overflow-y: scroll;
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <h1>MPI Distributed Computing Interface</h1>

    <div class="container">
        <label for="folderUpload">Upload a Folder:</label>
        <input type="file" id="folderUpload" webkitdirectory directory multiple>
    </div>

    <div class="container">
        <label for="pythonFileUpload">Upload a Python File:</label>
        <input type="file" id="pythonFileUpload" accept=".py">
    </div>

    <div class="container">
        <label for="scriptContent">Script Content:</label>
        <textarea id="scriptContent" rows="10" cols="50" placeholder="Paste your Python script content here..."></textarea>
    </div>

    <div class="container">
        <button id="startMPI">Start MPI Distributed Computing</button>
    </div>

    <div class="container">
        <label for="commandInput">Run Command:</label>
        <input type="text" id="commandInput" placeholder="Enter command (e.g., pip install ...)">
        <button id="runCommand">Run</button>
    </div>

    <div class="container">
        <h2>Logs</h2>
        <div id="logs"></div>
    </div>

    <script>
        document.getElementById('startMPI').addEventListener('click', function() {
            const folderInput = document.getElementById('folderUpload');
            const scriptContent = document.getElementById('scriptContent').value;
            const formData = new FormData();

            if (folderInput.files.length === 0 || !scriptContent) {
                logMessage('Please upload a folder and provide script content.');
                return;
            }

            for (let i = 0; i < folderInput.files.length; i++) {
                formData.append('file', folderInput.files[i]);
            }
            formData.append('script_content', scriptContent);

            fetch('/upload', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    logMessage('MPI distributed computing started successfully.');
                    logMessage('Log Output: ' + data.log_output);
                    logMessage('Download Output: <a href="' + data.download_url + '">Download</a>');
                } else {
                    logMessage('Error: ' + data.message);
                }
            })
            .catch(error => {
                logMessage('Error: ' + error.message);
            });
        });

        document.getElementById('runCommand').addEventListener('click', function() {
            const command = document.getElementById('commandInput').value;
            if (!command) {
                logMessage('Please enter a command.');
                return;
            }

            const formData = new FormData();
            formData.append('command', command);

            fetch('/execute_command', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    logMessage('Command executed successfully.');
                    logMessage('Log Output: ' + data.log_output);
                } else {
                    logMessage('Error: ' + data.message);
                }
            })
            .catch(error => {
                logMessage('Error: ' + error.message);
            });
        });

        function logMessage(message) {
            const logs = document.getElementById('logs');
            const logEntry = document.createElement('div');
            logEntry.innerHTML = message;
            logs.appendChild(logEntry);
            logs.scrollTop = logs.scrollHeight;
        }
    </script>
</body>
</html>