Initial commit

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

.gitignore

@@ -0,0 +1,2 @@
+.env
+node_modules

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 owenkaplinsky
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,2 @@
+# agent-blockly
+

hello-world/.npmignore

@@ -0,0 +1,22 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Dependency directories
+node_modules/
+
+# Generated files
+dist/
+build/
+.DS_Store
+
+# Optional npm cache directory
+.npm
+
+# IDEs and editors
+.idea
+*.sublime-workspace
+.vscode/*

hello-world/app.py

@@ -0,0 +1,102 @@
+from fastapi import FastAPI, Request
+from fastapi.middleware.cors import CORSMiddleware
+import gradio as gr
+import uvicorn
+import asyncio
+
+app = FastAPI()
+
+# Allow Blockly (running on localhost:8080) to connect
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["http://localhost:8080", "http://127.0.0.1:8080"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Authoritative chat history (the one true state)
+history = []
+
+# Live Python code string generated from Blockly
+latest_blockly_code = ""
+
+# A queue for assistant replies (so Gradio waits until Blockly has responded)
+assistant_queue = asyncio.Queue()
+
+
+@app.post("/update_code")
+async def update_code(request: Request):
+    """Receives live Python code generated by Blockly."""
+    global latest_blockly_code
+    data = await request.json()
+    latest_blockly_code = data.get("code", "")
+    print("\n[FASTAPI] Updated Blockly code:\n", latest_blockly_code)
+    return {"ok": True}
+
+
+def execute_blockly_logic(user_message: str) -> str:
+    """
+    Executes the latest Blockly-generated Python code in a controlled environment.
+    Expects the Blockly code to define a function called on_user_send(user_message)
+    that returns or prints the assistant reply.
+    """
+    global latest_blockly_code
+
+    if not latest_blockly_code.strip():
+        print("[EXECUTION] No Blockly code yet.")
+        return "(no logic yet)"
+
+    try:
+        local_vars = {}
+        # Execute the code safely (creates function definitions, etc.)
+        exec(latest_blockly_code, {}, local_vars)
+        # Call the defined handler function, if it exists
+        if "on_user_send" in local_vars:
+            result = local_vars["on_user_send"](user_message)
+            if result is None:
+                result = "(no reply)"
+            return str(result)
+        else:
+            print("[EXECUTION] No on_user_send() found in Blockly code.")
+            return "(missing on_user_send)"
+    except Exception as e:
+        print("[EXECUTION ERROR]", e)
+        return f"(error: {e})"
+
+
+def build_interface():
+    with gr.Blocks() as demo:
+        chatbot = gr.Chatbot(type="messages", label="Assistant")
+        msg = gr.Textbox(placeholder="Type a message and press Enter")
+
+        async def process_message(message):
+            global history
+
+            # 1. Add user message
+            history.append({"role": "user", "content": message})
+            print(f"[USER] {message!r}")
+            yield "", history
+
+            # 2. Compute assistant response using current Blockly logic
+            assistant_text = execute_blockly_logic(message)
+            print(f"[ASSISTANT] {assistant_text!r}")
+
+            # 3. Add assistant message
+            history.append({"role": "assistant", "content": assistant_text})
+            yield "", history
+
+        msg.submit(process_message, [msg], [msg, chatbot], queue=True)
+
+        clear_btn = gr.Button("Reset chat")
+        clear_btn.click(lambda: ([], ""), None, [chatbot, msg], queue=False)
+
+    return demo
+
+
+demo = build_interface()
+app = gr.mount_gradio_app(app, demo, path="/")
+
+if __name__ == "__main__":
+    print("[BOOT] Running Gradio+FastAPI combo on http://127.0.0.1:7860")
+    uvicorn.run(app, host="0.0.0.0", port=7860)

hello-world/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "hello-world",
+  "version": "1.0.0",
+  "description": "A sample app using Blockly",
+  "main": "index.js",
+  "private": true,
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack --mode production",
+    "start": "concurrently \"python app.py\" \"webpack serve --open --mode development\""
+  },
+  "keywords": [
+    "blockly"
+  ],
+  "author": "",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "css-loader": "^6.7.1",
+    "html-webpack-plugin": "^5.5.0",
+    "source-map-loader": "^4.0.1",
+    "style-loader": "^3.3.1",
+    "webpack": "^5.76.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1"
+  },
+  "dependencies": {
+    "blockly": "^11.0.0"
+  }
+}

hello-world/src/blocks/text.js

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as Blockly from 'blockly/core';
+
+const whenUserSends = {
+  type: 'when_user_sends',
+  message0: 'When user sends msg do %1 %2',
+  args0: [
+    {
+      "type": "input_dummy"
+    },
+    {
+      "type": "input_statement",
+      "name": "code"
+    }
+  ],
+  inputsInline: true,
+  colour: 230,
+  tooltip: 'Triggered when the user sends a chat message.',
+  helpUrl: '',
+};
+
+const assistantReply = {
+  type: 'assistant_reply',
+  message0: 'Reply with %1',
+  args0: [
+    {
+      type: 'input_value',
+      name: 'INPUT',
+      check: 'String',
+    },
+  ],
+  previousStatement: null,
+  nextStatement: null,
+  colour: 65,
+  tooltip: 'Send a message as the assistant.',
+  helpUrl: '',
+};
+
+export const blocks = Blockly.common.createBlockDefinitionsFromJsonArray([
+  whenUserSends,
+  assistantReply,
+]);

hello-world/src/generators/python.js

@@ -0,0 +1,17 @@
+import { Order } from 'blockly/python';
+
+export const forBlock = Object.create(null);
+
+// Generates a Python function that runs when the user sends a message
+forBlock['when_user_sends'] = function (block, generator) {
+  const body = generator.statementToCode(block, 'code') || "";
+  const code = `def on_user_send(user_message):\n${body}\n`;
+  return code;
+};
+
+// Generates a Python 'return' statement for the assistant's reply
+forBlock['assistant_reply'] = function (block, generator) {
+  const reply = generator.valueToCode(block, 'INPUT', Order.NONE) || "''";
+  const code = `return ${reply}\n`;
+  return code;
+};

hello-world/src/index.css

@@ -0,0 +1,56 @@
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  max-width: 100vw;
+}
+
+#pageContainer {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+#blocklyDiv {
+  flex: 1;
+  min-width: 600px;
+  height: 100%;
+}
+
+#outputPane {
+  display: flex;
+  flex-direction: column;
+  width: 400px;
+  flex-shrink: 0;
+  height: 100%;
+  overflow: hidden;
+  padding: 1rem;
+  box-sizing: border-box;
+}
+
+#chatContainer {
+  flex: 0 0 400px;
+  /* fixed height for iframe area */
+  width: 100%;
+}
+
+#chatContainer iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  display: block;
+}
+
+#generatedCode {
+  flex: 1;
+  background: #111;
+  color: #0f0;
+  padding: 10px;
+  font-family: monospace;
+  white-space: pre-wrap;
+  overflow-y: auto;
+  border: 1px solid #333;
+  margin-top: 10px;
+}

hello-world/src/index.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <title>Blockly Sample App</title>
+</head>
+
+<body>
+  <div id="pageContainer">
+    <div id="outputPane">
+      <div id="chatContainer">
+        <iframe src="http://127.0.0.1:7860" style="width: 100%; height: 600px; border: none;"></iframe>
+      </div>
+
+      <pre id="generatedCode"><code></code></pre>
+    </div>
+    <div id="blocklyDiv"></div>
+  </div>
+</body>
+
+</html>

hello-world/src/index.js

@@ -0,0 +1,123 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as Blockly from 'blockly';
+import { blocks } from './blocks/text';
+import { forBlock } from './generators/python';
+import { pythonGenerator } from 'blockly/python';
+import { save, load } from './serialization';
+import { toolbox } from './toolbox';
+import './index.css';
+
+// Register the blocks and generator with Blockly
+Blockly.common.defineBlocks(blocks);
+Object.assign(pythonGenerator.forBlock, forBlock);
+
+// Set up UI elements and inject Blockly
+const blocklyDiv = document.getElementById('blocklyDiv');
+
+// Create a custom theme (Scratch-like colors and hats)
+const myTheme = Blockly.Theme.defineTheme('myScratchTheme', {
+  base: Blockly.Themes.Classic,
+  startHats: true,
+  blockStyles: {
+    logic_blocks: {
+      colourPrimary: '#5C81A6',
+      colourSecondary: '#4A6D8B',
+      colourTertiary: '#3B5572',
+    },
+    loop_blocks: {
+      colourPrimary: '#5CA65C',
+      colourSecondary: '#498949',
+      colourTertiary: '#3B723B',
+    },
+  },
+  categoryStyles: {
+    logic_category: { colour: '#5C81A6' },
+    loop_category: { colour: '#5CA65C' },
+  },
+  componentStyles: {
+    workspaceBackgroundColour: '#f0f0f0',
+    toolboxBackgroundColour: '#ffffff',
+  },
+});
+
+// Inject Blockly with theme + renderer
+const ws = Blockly.inject(blocklyDiv, {
+  toolbox,
+  renderer: 'zelos',
+  theme: myTheme,
+});
+
+ws.updateUserMessage = (message) => {
+  let variable = ws.getVariable('user_message');
+  if (!variable) ws.createVariable('user_message');
+  ws.variableValues = ws.variableValues || {};
+  ws.variableValues['user_message'] = message;
+};
+
+const runCode = () => {
+  const code = pythonGenerator.workspaceToCode(ws);
+  const codeEl = document.querySelector('#generatedCode code');
+
+  if (codeEl) {
+    codeEl.textContent = code;
+  }
+
+  // Send generated Python code to backend
+  fetch("http://127.0.0.1:7860/update_code", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ code }),
+  })
+    .then(() => {
+      console.log("[Blockly] Sent updated Python code to backend");
+    })
+    .catch((err) => {
+      console.error("[Blockly] Error sending Python code:", err);
+    });
+};
+
+try {
+  load(ws);
+} catch (e) {
+  console.warn('Workspace load failed, clearing storage:', e);
+  localStorage.clear();
+}
+runCode();
+
+ws.addChangeListener((e) => {
+  if (e.isUiEvent) return;
+  save(ws);
+});
+
+ws.addChangeListener((e) => {
+  if (e.isUiEvent || e.type == Blockly.Events.FINISHED_LOADING || ws.isDragging()) {
+    return;
+  }
+  runCode();
+});
+
+window.addEventListener("message", (event) => {
+  if (event.data?.type === "user_message") {
+    handleUserMessage(event.data.text);
+  }
+});
+
+function handleUserMessage(message) {
+  if (window.Blockly && window.ws) {
+    let v = ws.getVariable('user_message') || ws.createVariable('user_message');
+    ws.variableValues = ws.variableValues || {};
+    ws.variableValues['user_message'] = message;
+  }
+
+  if (typeof window.userSendHandler === "function") {
+    console.log("[PARENT] userSendHandler exists, invoking it");
+    window.userSendHandler(message);
+  } else {
+    console.warn("[PARENT] userSendHandler is undefined!");
+  }
+}

hello-world/src/serialization.js

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as Blockly from 'blockly/core';
+
+const storageKey = 'mainWorkspace';
+
+/**
+ * Saves the state of the workspace to browser's local storage.
+ * @param {Blockly.Workspace} workspace Blockly workspace to save.
+ */
+export const save = function (workspace) {
+  const data = Blockly.serialization.workspaces.save(workspace);
+  window.localStorage?.setItem(storageKey, JSON.stringify(data));
+};
+
+/**
+ * Loads saved state from local storage into the given workspace.
+ * @param {Blockly.Workspace} workspace Blockly workspace to load into.
+ */
+export const load = function (workspace) {
+  const data = window.localStorage?.getItem(storageKey);
+  if (!data) return;
+
+  // Don't emit events during loading.
+  Blockly.Events.disable();
+  Blockly.serialization.workspaces.load(JSON.parse(data), workspace, false);
+  Blockly.Events.enable();
+};

hello-world/src/toolbox.js

@@ -0,0 +1,608 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/*
+This toolbox contains nearly every single built-in block that Blockly offers,
+in addition to the custom block 'add_text' this sample app adds.
+You probably don't need every single block, and should consider either rewriting
+your toolbox from scratch, or carefully choosing whether you need each block
+listed here.
+*/
+
+export const toolbox = {
+  kind: 'categoryToolbox',
+  contents: [
+    {
+      kind: 'category',
+      name: 'Custom',
+      categorystyle: 'logic_category',
+      contents: [
+        {
+          kind: 'block',
+          type: 'when_user_sends',
+        },
+        {
+          kind: 'block',
+          type: 'assistant_reply',
+        },
+      ]
+    },
+    {
+      kind: 'category',
+      name: 'Logic',
+      categorystyle: 'logic_category',
+      contents: [
+        {
+          kind: 'block',
+          type: 'controls_if',
+        },
+        {
+          kind: 'block',
+          type: 'logic_compare',
+        },
+        {
+          kind: 'block',
+          type: 'logic_operation',
+        },
+        {
+          kind: 'block',
+          type: 'logic_negate',
+        },
+        {
+          kind: 'block',
+          type: 'logic_boolean',
+        },
+        {
+          kind: 'block',
+          type: 'logic_null',
+        },
+        {
+          kind: 'block',
+          type: 'logic_ternary',
+        },
+      ],
+    },
+    {
+      kind: 'category',
+      name: 'Loops',
+      categorystyle: 'loop_category',
+      contents: [
+        {
+          kind: 'block',
+          type: 'controls_repeat_ext',
+          inputs: {
+            TIMES: {
+              shadow: {
+                type: 'math_number',
+                fields: {
+                  NUM: 10,
+                },
+              },
+            },
+          },
+        },
+        {
+          kind: 'block',
+          type: 'controls_whileUntil',
+        },
+        {
+          kind: 'block',
+          type: 'controls_for',
+          inputs: {
+            FROM: {
+              shadow: {
+                type: 'math_number',
+                fields: {
+                  NUM: 1,
+                },
+              },
+            },
+            TO: {
+              shadow: {
+                type: 'math_number',
+                fields: {
+                  NUM: 10,
+                },
+              },
+            },
+            BY: {
+              shadow: {
+                type: 'math_number',
+                fields: {
+                  NUM: 1,
+                },
+              },
+            },
+          },
+        },
+        {
+          kind: 'block',
+          type: 'controls_forEach',
+        },
+        {
+          kind: 'block',
+          type: 'controls_flow_statements',
+        },
+      ],
+    },
+    {
+      kind: 'category',
+      name: 'Math',
+      categorystyle: 'math_category',
+      contents: [
+        {
+          kind: 'block',
+          type: 'math_number',
+          fields: {
+            NUM: 123,
+          },
+        },
+        {
+          kind: 'block',
+          type: 'math_arithmetic',
+          inputs: {
+            A: {
+              shadow: {
+                type: 'math_number',
+                fields: {
+                  NUM: 1,
+                },
+              },
+            },
+            B: {
+              shadow: {
+                type: 'math_number',
+                fields: {
+                  NUM: 1,
+                },
+              },
+            },
+          },
+        },
+        {
+          kind: 'block',
+          type: 'math_single',
+          inputs: {
+            NUM: {
+              shadow: {
+                type: 'math_number',
+                fields: {
+                  NUM: 9,
+                },
+              },
+            },
+          },
+        },
+        {
+          kind: 'block',
+          type: 'math_trig',
+          inputs: {
+            NUM: {
+              shadow: {
+                type: 'math_number',
+                fields: {
+                  NUM: 45,
+                },
+              },
+            },
+          },
+        },
+        {
+          kind: 'block',
+          type: 'math_constant',
+        },
+        {
+          kind: 'block',
+          type: 'math_number_property',
+          inputs: {
+            NUMBER_TO_CHECK: {
+              shadow: {
+                type: 'math_number',
+                fields: {
+                  NUM: 0,
+                },
+              },
+            },
+          },
+        },
+        {
+          kind: 'block',
+          type: 'math_round',
+          fields: {
+            OP: 'ROUND',
+          },
+          inputs: {
+            NUM: {
+              shadow: {
+                type: 'math_number',
+                fields: {
+                  NUM: 3.1,
+                },
+              },
+            },
+          },
+        },
+        {
+          kind: 'block',
+          type: 'math_on_list',
+          fields: {
+            OP: 'SUM',
+          },
+        },
+        {
+          kind: 'block',
+          type: 'math_modulo',
+          inputs: {
+            DIVIDEND: {
+              shadow: {
+                type: 'math_number',
+                fields: {
+                  NUM: 64,
+                },
+              },
+            },
+            DIVISOR: {
+              shadow: {
+                type: 'math_number',
+                fields: {
+                  NUM: 10,
+                },
+              },
+            },
+          },
+        },
+        {
+          kind: 'block',
+          type: 'math_constrain',
+          inputs: {
+            VALUE: {
+              shadow: {
+                type: 'math_number',
+                fields: {
+                  NUM: 50,
+                },
+              },
+            },
+            LOW: {
+              shadow: {
+                type: 'math_number',
+                fields: {
+                  NUM: 1,
+                },
+              },
+            },
+            HIGH: {
+              shadow: {
+                type: 'math_number',
+                fields: {
+                  NUM: 100,
+                },
+              },
+            },
+          },
+        },
+        {
+          kind: 'block',
+          type: 'math_random_int',
+          inputs: {
+            FROM: {
+              shadow: {
+                type: 'math_number',
+                fields: {
+                  NUM: 1,
+                },
+              },
+            },
+            TO: {
+              shadow: {
+                type: 'math_number',
+                fields: {
+                  NUM: 100,
+                },
+              },
+            },
+          },
+        },
+        {
+          kind: 'block',
+          type: 'math_random_float',
+        },
+      ],
+    },
+    {
+      kind: 'category',
+      name: 'Text',
+      categorystyle: 'text_category',
+      contents: [
+        {
+          kind: 'block',
+          type: 'text',
+        },
+        {
+          kind: 'block',
+          type: 'text_join',
+        },
+        {
+          kind: 'block',
+          type: 'text_append',
+          inputs: {
+            TEXT: {
+              shadow: {
+                type: 'text',
+                fields: {
+                  TEXT: '',
+                },
+              },
+            },
+          },
+        },
+        {
+          kind: 'block',
+          type: 'text_length',
+          inputs: {
+            VALUE: {
+              shadow: {
+                type: 'text',
+                fields: {
+                  TEXT: 'abc',
+                },
+              },
+            },
+          },
+        },
+        {
+          kind: 'block',
+          type: 'text_isEmpty',
+          inputs: {
+            VALUE: {
+              shadow: {
+                type: 'text',
+                fields: {
+                  TEXT: '',
+                },
+              },
+            },
+          },
+        },
+        {
+          kind: 'block',
+          type: 'text_indexOf',
+          inputs: {
+            VALUE: {
+              block: {
+                type: 'variables_get',
+              },
+            },
+            FIND: {
+              shadow: {
+                type: 'text',
+                fields: {
+                  TEXT: 'abc',
+                },
+              },
+            },
+          },
+        },
+        {
+          kind: 'block',
+          type: 'text_charAt',
+          inputs: {
+            VALUE: {
+              block: {
+                type: 'variables_get',
+              },
+            },
+          },
+        },
+        {
+          kind: 'block',
+          type: 'text_getSubstring',
+          inputs: {
+            STRING: {
+              block: {
+                type: 'variables_get',
+              },
+            },
+          },
+        },
+        {
+          kind: 'block',
+          type: 'text_changeCase',
+          inputs: {
+            TEXT: {
+              shadow: {
+                type: 'text',
+                fields: {
+                  TEXT: 'abc',
+                },
+              },
+            },
+          },
+        },
+        {
+          kind: 'block',
+          type: 'text_trim',
+          inputs: {
+            TEXT: {
+              shadow: {
+                type: 'text',
+                fields: {
+                  TEXT: 'abc',
+                },
+              },
+            },
+          },
+        },
+        {
+          kind: 'block',
+          type: 'text_count',
+          inputs: {
+            SUB: {
+              shadow: {
+                type: 'text',
+              },
+            },
+            TEXT: {
+              shadow: {
+                type: 'text',
+              },
+            },
+          },
+        },
+        {
+          kind: 'block',
+          type: 'text_replace',
+          inputs: {
+            FROM: {
+              shadow: {
+                type: 'text',
+              },
+            },
+            TO: {
+              shadow: {
+                type: 'text',
+              },
+            },
+            TEXT: {
+              shadow: {
+                type: 'text',
+              },
+            },
+          },
+        },
+        {
+          kind: 'block',
+          type: 'text_reverse',
+          inputs: {
+            TEXT: {
+              shadow: {
+                type: 'text',
+              },
+            },
+          },
+        },
+      ],
+    },
+    {
+      kind: 'category',
+      name: 'Lists',
+      categorystyle: 'list_category',
+      contents: [
+        {
+          kind: 'block',
+          type: 'lists_create_with',
+        },
+        {
+          kind: 'block',
+          type: 'lists_create_with',
+        },
+        {
+          kind: 'block',
+          type: 'lists_repeat',
+          inputs: {
+            NUM: {
+              shadow: {
+                type: 'math_number',
+                fields: {
+                  NUM: 5,
+                },
+              },
+            },
+          },
+        },
+        {
+          kind: 'block',
+          type: 'lists_length',
+        },
+        {
+          kind: 'block',
+          type: 'lists_isEmpty',
+        },
+        {
+          kind: 'block',
+          type: 'lists_indexOf',
+          inputs: {
+            VALUE: {
+              block: {
+                type: 'variables_get',
+              },
+            },
+          },
+        },
+        {
+          kind: 'block',
+          type: 'lists_getIndex',
+          inputs: {
+            VALUE: {
+              block: {
+                type: 'variables_get',
+              },
+            },
+          },
+        },
+        {
+          kind: 'block',
+          type: 'lists_setIndex',
+          inputs: {
+            LIST: {
+              block: {
+                type: 'variables_get',
+              },
+            },
+          },
+        },
+        {
+          kind: 'block',
+          type: 'lists_getSublist',
+          inputs: {
+            LIST: {
+              block: {
+                type: 'variables_get',
+              },
+            },
+          },
+        },
+        {
+          kind: 'block',
+          type: 'lists_split',
+          inputs: {
+            DELIM: {
+              shadow: {
+                type: 'text',
+                fields: {
+                  TEXT: ',',
+                },
+              },
+            },
+          },
+        },
+        {
+          kind: 'block',
+          type: 'lists_sort',
+        },
+        {
+          kind: 'block',
+          type: 'lists_reverse',
+        },
+      ],
+    },
+    {
+      kind: 'sep',
+    },
+    {
+      kind: 'category',
+      name: 'Variables',
+      categorystyle: 'variable_category',
+      custom: 'VARIABLE',
+    },
+    {
+      kind: 'category',
+      name: 'Functions',
+      categorystyle: 'procedure_category',
+      custom: 'PROCEDURE',
+    },
+  ],
+};

hello-world/webpack.config.js

@@ -0,0 +1,59 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+// Base config that applies to either development or production mode.
+const config = {
+  entry: './src/index.js',
+  output: {
+    // Compile the source files into a bundle.
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+    clean: true,
+  },
+  // Enable webpack-dev-server to get hot refresh of the app.
+  devServer: {
+    static: './build',
+  },
+  module: {
+    rules: [
+      {
+        // Load CSS files. They can be imported into JS files.
+        test: /\.css$/i,
+        use: ['style-loader', 'css-loader'],
+      },
+    ],
+  },
+  plugins: [
+    // Generate the HTML index page based on our template.
+    // This will output the same index page with the bundle we
+    // created above added in a script tag.
+    new HtmlWebpackPlugin({
+      template: 'src/index.html',
+    }),
+  ],
+};
+
+module.exports = (env, argv) => {
+  if (argv.mode === 'development') {
+    // Set the output path to the `build` directory
+    // so we don't clobber production builds.
+    config.output.path = path.resolve(__dirname, 'build');
+
+    // Generate source maps for our code for easier debugging.
+    // Not suitable for production builds. If you want source maps in
+    // production, choose a different one from https://webpack.js.org/configuration/devtool
+    config.devtool = 'eval-cheap-module-source-map';
+
+    // Include the source maps for Blockly for easier debugging Blockly code.
+    config.module.rules.push({
+      test: /(blockly\/.*\.js)$/,
+      use: [require.resolve('source-map-loader')],
+      enforce: 'pre',
+    });
+
+    // Ignore spurious warnings from source-map-loader
+    // It can't find source maps for some Closure modules and that is expected
+    config.ignoreWarnings = [/Failed to parse source map/];
+  }
+  return config;
+};

requirements.txt

@@ -0,0 +1 @@
+gradio