| <!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> |
