| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <title>Telegram Bot Visual Editor</title> |
| | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/drawflow/dist/drawflow.min.css"> |
| | <script src="https://cdn.jsdelivr.net/npm/drawflow/dist/drawflow.min.js"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> |
| | </head> |
| | <body> |
| | <div id="drawflow" style="width: 800px; height: 600px; border: 1px solid black;"></div> |
| |
|
| | <script> |
| | const id = document.getElementById("drawflow"); |
| | const editor = new Drawflow(id); |
| | editor.start(); |
| | |
| | |
| | editor.addNode('StartCommand', 0, 1, 150, 300, 'telegram', { command: '/start', response: 'Привет! Я ваш бот.' }); |
| | editor.addNode('EchoCommand', 0, 1, 400, 300, 'telegram', { response: '{{message}}' }); |
| | |
| | |
| | function generateAndSendPythonCode() { |
| | const nodes = editor.getNodes(); |
| | let code = ''; |
| | |
| | nodes.forEach(node => { |
| | if (node.data.command) { |
| | code += `def ${node.data.command.slice(1)}(update: Update, context: CallbackContext) -> None:\n`; |
| | code += ` update.message.reply_text('${node.data.response}')\n`; |
| | code += `\n`; |
| | } else if (node.data.response) { |
| | code += `def echo(update: Update, context: CallbackContext) -> None:\n`; |
| | code += ` update.message.reply_text(update.message.text)\n`; |
| | code += `\n`; |
| | } |
| | }); |
| | |
| | axios.post('/execute', { command: '/start', code: code }) |
| | .then(response => { |
| | console.log(response.data); |
| | }) |
| | .catch(error => { |
| | console.error(error); |
| | }); |
| | } |
| | </script> |
| | </body> |
| | </html> |
