test ok (Test.html)

Marty · Marty · commit 5c8fafad4cbd · 2024-11-04T18:23:32.000+08:00
diff --git a/test.html b/test.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="zh-Hant">
+
 <head>
     <meta charset="UTF-8">
     <title>Pyodide Python 執行器</title>
@@ -8,6 +9,7 @@
             font-family: Arial, sans-serif;
             margin: 20px;
         }
+
         textarea {
             width: 100%;
             height: 200px;
@@ -16,6 +18,7 @@
             padding: 10px;
             box-sizing: border-box;
         }
+
         #output {
             width: 100%;
             height: 400px;
@@ -26,86 +29,123 @@
             white-space: pre-wrap;
             border: 1px solid #ccc;
         }
+
         button {
             padding: 10px 20px;
             font-size: 16px;
             margin-top: 10px;
             cursor: pointer;
         }
+
+        #input-container {
+            display: none;
+            margin: 10px 0;
+        }
+
+        #input-box {
+            width: 70%;
+            padding: 5px;
+            margin-right: 10px;
+        }
     </style>
 </head>
+
 <body>
     <h1>Pyodide Python 執行器</h1>
-    <textarea id="python-code" placeholder="在此輸入您的 Python 程式碼，例如：&#10;print('Hello, Pyodide!')">for i in range(3):
-    user_input = input("請輸入字串")
-    print(user_input + "!")</textarea>
+    <textarea id="python-code">async def main():
+    for i in range(2):
+        user_input = await input("請輸入字串")
+        print(user_input + "$")
+
+await main()</textarea>
     <br>
     <button id="run-button">執行程式碼</button>
+    <div id="input-container">
+        <input type="text" id="input-box">
+        <button id="input-submit">提交</button>
+    </div>
     <h2>輸出結果：</h2>
     <div id="output"></div>
 
-    <!-- 加載 Pyodide -->
     <script src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"></script>
     <script>
         let pyodideReadyPromise = loadPyodide();
+        let inputResolve = null;
 
         async function runPython() {
             let pyodide = await pyodideReadyPromise;
             let code = document.getElementById("python-code").value;
             let outputElement = document.getElementById("output");
+            let inputContainer = document.getElementById("input-container");
+            
             outputElement.textContent = "";
+            
+            // 輸出函數
+            function writeOutput(text) {
+                const p = document.createElement('pre');
+                p.style.margin = '0';
+                p.textContent = text;
+                outputElement.appendChild(p);
+                outputElement.scrollTop = outputElement.scrollHeight;
+            }
+
+            // 自定義輸入處理
+            async function customInput(message) {
+                writeOutput(message);
+                inputContainer.style.display = 'block';
+                document.getElementById('input-box').focus();
+                
+                return new Promise(resolve => {
+                    inputResolve = resolve;
+                });
+            }
+
+            // 將函數暴露給 Pyodide
+            globalThis.writeOutput = writeOutput;
+            globalThis.customInput = customInput;
 
-            // 修改输出处理，实现即时显示
-            let printOutput = (text) => {
-                if (text && text.trim()) {  // 只处理非空输出
-                    outputElement.textContent += text + "\n";
-                    outputElement.scrollTop = outputElement.scrollHeight;
+            // 處理輸入提交
+            document.getElementById('input-submit').onclick = () => {
+                if (inputResolve) {
+                    const value = document.getElementById('input-box').value;
+                    document.getElementById('input-box').value = '';
+                    inputContainer.style.display = 'none';
+                    writeOutput(value);
+                    inputResolve(value);
+                    inputResolve = null;
                 }
             };
 
-            // 将自定义的 prompt 函数添加到全局作用域
-            globalThis.customPrompt = (message) => {
-                printOutput(message); // 立即显示输入提示
-                const result = prompt(message);
-                if (result !== null) {
-                    printOutput(result + "!"); // 立即显示用户输入的结果
+            // 處理按下 Enter 鍵
+            document.getElementById('input-box').onkeypress = (e) => {
+                if (e.key === 'Enter') {
+                    document.getElementById('input-submit').click();
                 }
-                return result;
             };
 
-            // 修改 Python 的标准输出和错误输出处理
-            pyodide.setStdout({
-                write: (text) => {
-                    printOutput(text);
-                },
-                flush: () => {}
-            });
-
-            pyodide.setStderr({
-                write: (text) => {
-                    printOutput(text);
-                },
-                flush: () => {}
-            });
-
-            // 修改输入函数实现
+            // Python 端設置
             pyodide.runPython(`
-                from js import customPrompt
+                from js import customInput, writeOutput
                 
-                def custom_input(prompt_text=""):
-                    return customPrompt(prompt_text)
-                    
-                input = custom_input
+                async def input(prompt_text=""):
+                    return await customInput(prompt_text)
+                
+                def print(*args, **kwargs):
+                    end = kwargs.get('end', '\\n')
+                    sep = kwargs.get('sep', ' ')
+                    text = sep.join(str(arg) for arg in args) + end
+                    writeOutput(text)
             `);
 
             try {
                 await pyodide.runPythonAsync(code);
             } catch (err) {
-                printOutput(err.toString());
+                writeOutput("Error: " + err.toString());
             }
         }
 
         document.getElementById("run-button").addEventListener("click", runPython);
     </script>
 </body>
-</html>
+
+</html>
