Spaces:

MCP-1st-Birthday
/

MCP-Blockly

Running

App Files Files Community

owenkaplinsky commited on 25 days ago

Commit

2d05ba7

1 Parent(s): 867b451

Use a singular port

Browse files

Files changed (13) hide show

project/__pycache__/chat.cpython-311.pyc +0 -0
project/__pycache__/test.cpython-311.pyc +0 -0
project/chat.py +7 -6
project/dist/bundle.js +0 -0
project/dist/bundle.js.LICENSE.txt +5 -0
project/dist/bundle.js.map +0 -0
project/dist/index.html +114 -0
project/package.json +1 -2
project/src/index.html +2 -2
project/src/index.js +12 -12
project/test.py +7 -5
project/unified_server.py +113 -0
project/webpack.config.js +0 -9

project/__pycache__/chat.cpython-311.pyc ADDED Viewed

Binary file (40.1 kB). View file

project/__pycache__/test.cpython-311.pyc ADDED Viewed

Binary file (13.5 kB). View file

project/chat.py CHANGED Viewed

@@ -93,7 +93,7 @@ def execute_mcp(mcp_call):
         # Now, retrieve the real generated Python code from test.py
         blockly_code = ""
         try:
-            resp = requests.get("http://localhost:7860/get_latest_code")
             if resp.ok:
                 blockly_code = resp.json().get("code", "")
         except Exception as e:
@@ -904,10 +904,11 @@ You will be given the current variables that are in the workspace. Like the bloc
     return demo
-# Mount Gradio with FastAPI
-demo = create_gradio_interface()
-app = gr.mount_gradio_app(app, demo, path="/")
 if __name__ == "__main__":
-    print("[BOOT] Running Gradio+FastAPI Chat on http://127.0.0.1:7861")
-    uvicorn.run(app, host="0.0.0.0", port=7861)

         # Now, retrieve the real generated Python code from test.py
         blockly_code = ""
         try:
+            resp = requests.get(f"http://127.0.0.1:{os.getenv('PORT', 8080)}/get_latest_code")
             if resp.ok:
                 blockly_code = resp.json().get("code", "")
         except Exception as e:
     return demo
+def get_chat_gradio_interface():
+    return create_gradio_interface()
 if __name__ == "__main__":
+    demo = create_gradio_interface()
+    app = gr.mount_gradio_app(app, demo, path="/")

project/dist/bundle.js ADDED Viewed

The diff for this file is too large to render. See raw diff

project/dist/bundle.js.LICENSE.txt ADDED Viewed

	@@ -0,0 +1,5 @@

+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */

project/dist/bundle.js.map ADDED Viewed

The diff for this file is too large to render. See raw diff

project/dist/index.html ADDED Viewed

	@@ -0,0 +1,114 @@

+<!doctype html><html><head><meta charset="utf-8"/><title>Blockly MCP Builder</title><script defer="defer" src="bundle.js"></script></head><body><div id="topBar"><div id="titleSection"><h1>Blockly MCP Builder</h1></div><div id="divider"></div><div id="menuSection"><div class="menuGroup"><button class="menuButton">File</button><div class="dropdown"><a href="#" id="newButton" class="dropdownItem" data-action="new">New</a> <a href="#" id="loadButton" class="dropdownItem" data-action="open">Open</a> <a href="#" id="saveButton" class="dropdownItem" data-action="download">Download Project</a> <a href="#" id="downloadCodeButton" class="dropdownItem" data-action="downloadCode">Download Code</a> <a href="#" id="settingsButton" class="dropdownItem" data-action="downloadCode">API Key</a></div></div><div class="menuGroup"><button class="menuButton">Edit</button><div class="dropdown"><a href="#" id="undoButton" class="dropdownItem" data-action="undo">Undo</a> <a href="#" id="redoButton" class="dropdownItem" data-action="redo">Redo</a> <a href="#" id="cleanWorkspace" class="dropdownItem" data-action="cleanup">Clean up</a></div></div><div class="menuGroup"><button class="menuButton">Examples</button><div class="dropdown"><a href="#" id="weatherButton" class="dropdownItem" data-action="undo">Weather API</a> <a href="#" id="factButton" class="dropdownItem" data-action="undo">Fact Checker</a></div></div></div><div id="githubLink"><a href="https://github.com/owenkaplinsky/mcp-blockly" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v 3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg></a></div></div><div id="pageContainer"><div id="outputPane"><div id="tabBar"><div class="tab active" data-tab="development">Development</div><div class="tab" data-tab="aichat">AI Chat</div></div><div id="developmentTab" class="tabContent active"><div id="chatContainer"><iframe src="/gradio-test" style="width: 100%; height: 100%; border: none;"></iframe></div><div class="verticalResizer"></div><pre id="generatedCode"><code></code></pre></div><div id="aichatTab" class="tabContent"><div id="gradioContainer"><iframe src="/gradio-chat" style="width: 100%; height: 100%; border: none;"></iframe></div><pre id="aichatCode" style="position: absolute; left: -9999px; width: 1px; height: 1px;"><code></code></pre></div></div><div class="resizer"></div><div id="blocklyDiv"></div></div><script>// Tab switching functionality
+    const tabs = document.querySelectorAll('.tab');
+    const tabContents = document.querySelectorAll('.tabContent');
+    tabs.forEach(tab => {
+      tab.addEventListener('click', () => {
+        const tabName = tab.getAttribute('data-tab');
+        // Remove active class from all tabs and contents
+        tabs.forEach(t => t.classList.remove('active'));
+        tabContents.forEach(content => content.classList.remove('active'));
+        // Add active class to clicked tab and corresponding content
+        tab.classList.add('active');
+        document.getElementById(tabName + 'Tab').classList.add('active');
+      });
+    });
+    // Horizontal resizer (output pane vs blockly)
+    const resizer = document.querySelector('.resizer');
+    const outputPane = document.getElementById('outputPane');
+    const pageContainer = document.getElementById('pageContainer');
+    let startX = 0;
+    let startWidth = 0;
+    function onPointerMove(e) {
+      const containerRect = pageContainer.getBoundingClientRect();
+      const containerWidth = containerRect.width;
+      const dx = e.clientX - startX;
+      let newWidthPx = startWidth + dx;
+      const minWidth = containerWidth * 0.2;
+      const maxWidth = containerWidth * 0.59;
+      newWidthPx = Math.max(minWidth, Math.min(maxWidth, newWidthPx));
+      const newPercent = (newWidthPx / containerWidth) * 100;
+      outputPane.style.flex = `0 0 ${newPercent}%`;
+    }
+    function onPointerUp() {
+      resizer.releasePointerCapture(activePointerId);
+      resizer.removeEventListener('pointermove', onPointerMove);
+      resizer.removeEventListener('pointerup', onPointerUp);
+      resizer.classList.remove('active');
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    }
+    let activePointerId = null;
+    resizer.addEventListener('pointerdown', (e) => {
+      const rect = outputPane.getBoundingClientRect();
+      startX = e.clientX;
+      startWidth = rect.width;
+      activePointerId = e.pointerId;
+      resizer.classList.add('active');
+      document.body.style.cursor = 'col-resize';
+      document.body.style.userSelect = 'none';
+      resizer.setPointerCapture(activePointerId);
+      resizer.addEventListener('pointermove', onPointerMove);
+      resizer.addEventListener('pointerup', onPointerUp);
+    });
+    // Vertical resizer (gradio vs code)
+    const verticalResizer = document.querySelector('.verticalResizer');
+    const chatContainer = document.getElementById('chatContainer');
+    const generatedCode = document.getElementById('generatedCode');
+    let startY = 0;
+    let startHeight = 0;
+    let activePointerId2 = null;
+    function onVerticalPointerMove(e) {
+      const outputPaneRect = outputPane.getBoundingClientRect();
+      const outputPaneHeight = outputPaneRect.height;
+      const dy = e.clientY - startY;
+      let newHeightPx = startHeight + dy;
+      const minHeight = outputPaneHeight * 0.4;
+      const maxHeight = outputPaneHeight * 0.78;
+      newHeightPx = Math.max(minHeight, Math.min(maxHeight, newHeightPx));
+      const newPercent = (newHeightPx / outputPaneHeight) * 100;
+      chatContainer.style.flex = `0 0 ${newPercent}%`;
+    }
+    function onVerticalPointerUp() {
+      verticalResizer.releasePointerCapture(activePointerId2);
+      verticalResizer.removeEventListener('pointermove', onVerticalPointerMove);
+      verticalResizer.removeEventListener('pointerup', onVerticalPointerUp);
+      verticalResizer.classList.remove('active');
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    }
+    verticalResizer.addEventListener('pointerdown', (e) => {
+      const rect = chatContainer.getBoundingClientRect();
+      startY = e.clientY;
+      startHeight = rect.height;
+      activePointerId2 = e.pointerId;
+      verticalResizer.classList.add('active');
+      document.body.style.cursor = 'row-resize';
+      document.body.style.userSelect = 'none';
+      verticalResizer.setPointerCapture(activePointerId2);
+      verticalResizer.addEventListener('pointermove', onVerticalPointerMove);
+      verticalResizer.addEventListener('pointerup', onVerticalPointerUp);
+    });</script><div id="apiKeyModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999; align-items: center; justify-content: center;"><div style="background: white; padding: 30px; border-radius: 10px; width: 90%; max-width: 500px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);"><h2 style="margin-top: 0; margin-bottom: 20px; color: #333;">Settings</h2><label for="apiKeyInput" style="display: block; margin-bottom: 10px; color: #666; font-size: 14px;">OpenAI API Key:</label> <input type="password" id="apiKeyInput" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; box-sizing: border-box;" placeholder="sk-..."><p style="margin-top: 10px; color: #999; font-size: 12px;">Your API key will be stored securely for this session.</p><div style="margin-top: 20px; display: flex; justify-content: flex-end; gap: 10px;"><button id="cancelApiKey" style="padding: 10px 20px; background: #e5e7eb; border: none; border-radius: 5px; cursor: pointer; font-size: 14px;">Cancel</button> <button id="saveApiKey" style="padding: 10px 20px; background: #6366f1; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 14px;">Save</button></div></div></div></body></html>

project/package.json CHANGED Viewed

@@ -5,9 +5,8 @@
   "main": "index.js",
   "private": true,
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
     "build": "webpack --mode production",
-    "start": "concurrently \"python test.py\" \"python chat.py\" \"webpack serve --open --mode development\""
   },
   "keywords": [
     "blockly"

   "main": "index.js",
   "private": true,
   "scripts": {
     "build": "webpack --mode production",
+    "start": "npm run build && python unified_server.py"
   },
   "keywords": [
     "blockly"

project/src/index.html CHANGED Viewed

@@ -59,14 +59,14 @@
       </div>
       <div id="developmentTab" class="tabContent active">
         <div id="chatContainer">
-          <iframe src="http://127.0.0.1:7860" style="width: 100%; height: 100%; border: none;"></iframe>
         </div>
         <div class="verticalResizer"></div>
         <pre id="generatedCode"><code></code></pre>
       </div>
       <div id="aichatTab" class="tabContent">
         <div id="gradioContainer">
-          <iframe src="http://127.0.0.1:7861" style="width: 100%; height: 100%; border: none;"></iframe>
         </div>
         <pre id="aichatCode" style="position: absolute; left: -9999px; width: 1px; height: 1px;"><code></code></pre>
       </div>

       </div>
       <div id="developmentTab" class="tabContent active">
         <div id="chatContainer">
+          <iframe src="/gradio-test" style="width: 100%; height: 100%; border: none;"></iframe>
         </div>
         <div class="verticalResizer"></div>
         <pre id="generatedCode"><code></code></pre>
       </div>
       <div id="aichatTab" class="tabContent">
         <div id="gradioContainer">
+          <iframe src="/gradio-chat" style="width: 100%; height: 100%; border: none;"></iframe>
         </div>
         <pre id="aichatCode" style="position: absolute; left: -9999px; width: 1px; height: 1px;"><code></code></pre>
       </div>

project/src/index.js CHANGED Viewed

@@ -160,7 +160,7 @@ settingsButton.addEventListener("click", () => {
   apiKeyModal.style.display = 'flex';
   // Load current API key from backend
-  fetch("http://127.0.0.1:7860/get_api_key", {
     method: "GET",
   })
   .then(response => response.json())
@@ -183,12 +183,12 @@ saveApiKeyButton.addEventListener("click", () => {
   // Save API key to both backend servers (test.py and chat.py)
   Promise.all([
-    fetch("http://127.0.0.1:7860/set_api_key", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ api_key: apiKey }),
     }),
-    fetch("http://127.0.0.1:7861/set_api_key_chat", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ api_key: apiKey }),
@@ -247,7 +247,7 @@ cleanWorkspace.addEventListener("click", () => {
 // Set up SSE connection for deletion requests
 const setupDeletionStream = () => {
-  const eventSource = new EventSource('http://127.0.0.1:7861/delete_stream');
   const processedRequests = new Set(); // Track processed deletion requests
   eventSource.onmessage = (event) => {
@@ -300,7 +300,7 @@ const setupDeletionStream = () => {
         // Send result back to backend immediately
         console.log('[SSE] Sending deletion result:', { block_id: data.block_id, success, error });
-        fetch('http://127.0.0.1:7861/deletion_result', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({
@@ -338,7 +338,7 @@ setupDeletionStream();
 // Set up SSE connection for creation requests
 const setupCreationStream = () => {
-  const eventSource = new EventSource('http://127.0.0.1:7861/create_stream');
   const processedRequests = new Set(); // Track processed creation requests
   eventSource.onmessage = (event) => {
@@ -712,7 +712,7 @@ const setupCreationStream = () => {
           block_id: blockId
         });
-        fetch('http://127.0.0.1:7861/creation_result', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({
@@ -750,7 +750,7 @@ const setupCreationStream = () => {
 setupCreationStream();
 const setupVariableStream = () => {
-  const eventSource = new EventSource('http://127.0.0.1:7861/variable_stream');
   const processedRequests = new Set(); // Track processed variable requests
   eventSource.onmessage = (event) => {
@@ -806,7 +806,7 @@ const setupVariableStream = () => {
           variable_id: variableId
         });
-        fetch('http://127.0.0.1:7861/variable_result', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({
@@ -928,7 +928,7 @@ const updateCode = () => {
   }
   // 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 }),
@@ -953,7 +953,7 @@ let globalVarString = '';
 // Function to check if chat backend is available
 const checkChatBackend = async () => {
   try {
-    const response = await fetch("http://127.0.0.1:7861/update_chat", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({
@@ -986,7 +986,7 @@ const processChatUpdateQueue = () => {
 // Send chat update with retry logic
 const sendChatUpdate = async (chatCode, retryCount = 0) => {
   try {
-    const response = await fetch("http://127.0.0.1:7861/update_chat", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({

   apiKeyModal.style.display = 'flex';
   // Load current API key from backend
+  fetch("/get_api_key", {
     method: "GET",
   })
   .then(response => response.json())
   // Save API key to both backend servers (test.py and chat.py)
   Promise.all([
+    fetch("/set_api_key", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ api_key: apiKey }),
     }),
+    fetch("/set_api_key_chat", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ api_key: apiKey }),
 // Set up SSE connection for deletion requests
 const setupDeletionStream = () => {
+  const eventSource = new EventSource('/delete_stream');
   const processedRequests = new Set(); // Track processed deletion requests
   eventSource.onmessage = (event) => {
         // Send result back to backend immediately
         console.log('[SSE] Sending deletion result:', { block_id: data.block_id, success, error });
+        fetch('/deletion_result', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({
 // Set up SSE connection for creation requests
 const setupCreationStream = () => {
+  const eventSource = new EventSource('/create_stream');
   const processedRequests = new Set(); // Track processed creation requests
   eventSource.onmessage = (event) => {
           block_id: blockId
         });
+        fetch('/creation_result', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({
 setupCreationStream();
 const setupVariableStream = () => {
+  const eventSource = new EventSource('/variable_stream');
   const processedRequests = new Set(); // Track processed variable requests
   eventSource.onmessage = (event) => {
           variable_id: variableId
         });
+        fetch('/variable_result', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify({
   }
   // Send generated Python code to backend
+  fetch("/update_code", {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ code }),
 // Function to check if chat backend is available
 const checkChatBackend = async () => {
   try {
+    const response = await fetch("/update_chat", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({
 // Send chat update with retry logic
 const sendChatUpdate = async (chatCode, retryCount = 0) => {
   try {
+    const response = await fetch("/update_chat", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({

project/test.py CHANGED Viewed

@@ -293,15 +293,17 @@ def build_interface():
         submit_btn.click(
             process_input,
             inputs=input_fields,
-            outputs=output_fields
         )
     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)

         submit_btn.click(
             process_input,
             inputs=input_fields,
+            outputs=output_fields,
+            queue=False
         )
     return demo
+def get_gradio_interface():
+    return build_interface()
 if __name__ == "__main__":
+    demo = build_interface()
+    app = gr.mount_gradio_app(app, demo, path="/")

project/unified_server.py ADDED Viewed

	@@ -0,0 +1,113 @@

+from fastapi import FastAPI, Request
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
+import gradio as gr
+import uvicorn
+import os
+import sys
+# Ensure local modules are importable
+sys.path.insert(0, os.path.dirname(os.path.abspath(__file__)))
+import test
+import chat
+app = FastAPI()
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+# -------------------------------------------------------------------
+# Full API Forwarding Layer for chat.py and test.py
+# -------------------------------------------------------------------
+# === chat.py API endpoints ===
+@app.post("/update_chat")
+async def update_chat_route(request: Request):
+    return await chat.update_chat(request)
+@app.post("/set_api_key_chat")
+async def set_api_key_chat_route(request: Request):
+    return await chat.set_api_key_chat(request)
+@app.get("/create_stream")
+async def create_stream_route():
+    return await chat.create_stream()
+@app.post("/creation_result")
+async def creation_result_route(request: Request):
+    return await chat.creation_result(request)
+@app.get("/delete_stream")
+async def delete_stream_route():
+    return await chat.delete_stream()
+@app.post("/deletion_result")
+async def deletion_result_route(request: Request):
+    return await chat.deletion_result(request)
+@app.get("/variable_stream")
+async def variable_stream_route():
+    return await chat.variable_stream()
+@app.post("/variable_result")
+async def variable_result_route(request: Request):
+    return await chat.variable_result(request)
+# === test.py API endpoints ===
+@app.post("/update_code")
+async def update_code_route(request: Request):
+    return await test.update_code(request)
+@app.get("/get_latest_code")
+async def get_latest_code_route():
+    return await test.get_latest_code()
+@app.get("/get_api_key")
+async def get_api_key_route():
+    return await test.get_api_key_endpoint()
+@app.post("/set_api_key")
+async def set_api_key_route(request: Request):
+    return await test.set_api_key_endpoint(request)
+# Serve built frontend WITHOUT shadowing Gradio paths
+from fastapi.responses import FileResponse
+frontend_dir = os.path.join(os.path.dirname(__file__), "dist")
+if not os.path.exists(frontend_dir):
+    os.makedirs(frontend_dir)
+@app.get("/")
+def serve_index():
+    return FileResponse(os.path.join(frontend_dir, "index.html"))
+@app.get("/bundle.js")
+def serve_bundle():
+    return FileResponse(os.path.join(frontend_dir, "bundle.js"))
+# Optionally serve other built assets if needed
+app.mount("/assets", StaticFiles(directory=frontend_dir), name="assets")
+# Mount both Gradio interfaces
+test_demo = test.get_gradio_interface()
+chat_demo = chat.get_chat_gradio_interface()
+# Mount the Gradio apps directly
+app = gr.mount_gradio_app(app, test_demo, path="/gradio-test")
+app = gr.mount_gradio_app(app, chat_demo, path="/gradio-chat")
+print("new /gradio-test")
+print("new /gradio-chat")
+if __name__ == "__main__":
+    port = int(os.getenv("PORT", 8080))
+    print(f"[UNIFIED] running on http://127.0.0.1:{port}")
+    print(f"- /gradio-test")
+    print(f"- /gradio-chat")
+    uvicorn.run(app, host="0.0.0.0", port=port)

project/webpack.config.js CHANGED Viewed

@@ -27,15 +27,6 @@ module.exports = {
       template: './src/index.html',
     }),
   ],
-  devServer: {
-    static: {
-      directory: path.join(__dirname, 'public'),
-    },
-    compress: true,
-    port: 8081,
-    hot: true,
-    open: true,
-  },
   resolve: {
     extensions: ['.js', '.json', '.css'],
   },

       template: './src/index.html',
     }),
   ],
   resolve: {
     extensions: ['.js', '.json', '.css'],
   },