如何用PyScript搭建带输入输出的交互式终端及解决input主线程报错

错误原因 #

PyScript在主线程运行时，input()会阻塞网页主线程导致页面无响应，因此官方禁止在主线程调用input()，必须改用Worker线程或者网页UI交互的方式实现输入输出。

方案一：使用PyScript Worker线程运行原有代码 #

这种方案可以保留你原来的input()和while True循环逻辑，只需将代码放到Worker线程中执行：

步骤1：编写HTML代码 #

在pyscript.com的编辑器中，使用带worker属性的<py-script>标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Encrypt/Decrypt Tool</title>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
    <h1>加密解密工具（Worker模式）</h1>
    <p>操作请在浏览器控制台（按F12打开）中进行</p>
    <py-script worker>
        # 补充你的加解密密钥
        encrypt_key = {"a": "z", "b": "y", "c": "x"}  # 替换为实际密钥
        decrypt_key = {v: k for k, v in encrypt_key.items()}

        def encrypt(message):
            encrypted_message = ""
            for letter in message:
                if letter in encrypt_key:
                    encrypted_message += encrypt_key[letter]
                else:
                    encrypted_message += letter
            return encrypted_message

        def decrypt(encrypted_message):
            decrypted_message = ""
            for letter in encrypted_message:
                if letter in decrypt_key:
                    decrypted_message += decrypt_key[letter]
                else:
                    decrypted_message += letter
            return decrypted_message

        while True:
            message = input('message to crypt: ')
            task = input('encrypt or decrypt? ')
            if task == 'encrypt':
                encrypted_message = encrypt(message)
                print(f"加密结果: {encrypted_message}")
            
            elif task == 'decrypt':
                decrypted_message = decrypt(message)
                print(f"解密结果: {decrypted_message}")
            else:
                print("退出程序")
                break
    </py-script>
</body>
</html>

说明 #

• 代码会在后台Worker线程运行，input()会在浏览器控制台（F12打开）弹出输入提示，print()的内容也会输出到控制台
• 部署到GitHub Pages后，打开页面按F12即可操作

方案二：改用网页UI控件（推荐，更符合网页使用习惯） #

抛弃input()和循环，改用HTML输入框、按钮实现交互，用户体验更好：

步骤1：编写HTML+PyScript代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Encrypt/Decrypt Tool</title>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
    <style>
        .container { max-width: 600px; margin: 2rem auto; padding: 0 1rem; }
        .input-group { margin: 1rem 0; }
        label { display: block; margin-bottom: 0.5rem; }
        input, select, button { padding: 0.5rem; width: 100%; box-sizing: border-box; }
        #result { margin-top: 1rem; padding: 1rem; background-color: #f5f5f5; border-radius: 4px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>加密解密工具</h1>
        <div class="input-group">
            <label for="message">需要处理的文本:</label>
            <input type="text" id="message" placeholder="输入文本">
        </div>
        <div class="input-group">
            <label for="task">选择操作:</label>
            <select id="task">
                <option value="encrypt">加密</option>
                <option value="decrypt">解密</option>
            </select>
        </div>
        <div class="input-group">
            <button id="submit-btn">执行操作</button>
        </div>
        <div id="result"></div>
    </div>

    <py-script>
        from pyscript import Element

        # 补充你的加解密密钥
        encrypt_key = {"a": "z", "b": "y", "c": "x"}  # 替换为实际密钥
        decrypt_key = {v: k for k, v in encrypt_key.items()}

        def encrypt(message):
            encrypted_message = ""
            for letter in message:
                if letter in encrypt_key:
                    encrypted_message += encrypt_key[letter]
                else:
                    encrypted_message += letter
            return encrypted_message

        def decrypt(encrypted_message):
            decrypted_message = ""
            for letter in encrypted_message:
                if letter in decrypt_key:
                    decrypted_message += decrypt_key[letter]
                else:
                    decrypted_message += letter
            return decrypted_message

        def handle_submit(event):
            message = Element("message").value
            task = Element("task").value
            result_element = Element("result")
            
            if not message:
                result_element.element.innerHTML = "<p>请输入需要处理的文本</p>"
                return
            
            if task == "encrypt":
                result = encrypt(message)
                result_element.element.innerHTML = f"<p><strong>加密结果:</strong> {result}</p>"
            elif task == "decrypt":
                result = decrypt(message)
                result_element.element.innerHTML = f"<p><strong>解密结果:</strong> {result}</p>"

        # 绑定按钮点击事件
        Element("submit-btn").element.addEventListener("click", handle_submit)
    </py-script>
</body>
</html>

说明 #

• 用户直接在网页输入框输入文本，选择操作后点击按钮，结果会显示在页面上，无需打开控制台
• 这种方式更符合网页应用的交互逻辑，适合普通用户使用

部署说明 #

1. 在pyscript.com编辑器中粘贴上述代码，补充你的encrypt_key
2. 点击右上角的「Deploy」按钮，选择部署到GitHub Pages
3. 部署完成后，访问对应的GitHub Pages链接即可使用

内容的提问来源于stack exchange，提问作者CyberWolf