diff --git a/frontend/core/pipelines/pipeline-text-to-app/.DS_Store b/frontend/core/pipelines/pipeline-text-to-app/.DS_Store
index d789eeb5..047e3ed2 100644
Binary files a/frontend/core/pipelines/pipeline-text-to-app/.DS_Store and b/frontend/core/pipelines/pipeline-text-to-app/.DS_Store differ
diff --git a/frontend/core/pipelines/pipeline-text-to-game/README.md b/frontend/core/pipelines/pipeline-text-to-game/README.md
new file mode 100644
index 00000000..3e0410ab
--- /dev/null
+++ b/frontend/core/pipelines/pipeline-text-to-game/README.md
@@ -0,0 +1,14 @@
+# text to game app
+
+Initializes images stored in `Images Block` receives input prompt and returns a fully functional frontend game application.
+
+### How to use this pipeline
+
+- Update the `/frontend/core/pipelines/text2game/new-python-i3a2bb98agbh` add the images you would like to have access to during processing, and development.
+- Drag and drop the pipeline onto the canvas from the side library.
+- Input your desired prompt (Make me a pool game using img_pooltable.png as a backround image) **Note. it is important to append img\_ to the beginning of the png file name**
+- Input your API key inside of the password block.
+- Press the Run pipeline button.
+- The text2game pipeline will produce a view HTML interface that takes you to the app on a web browser, and the Interface maker will take you to a chat iframe interface so you can potentially iterate over the application.
+
+> Note: In the password blocks, your API key should be under double quotes.
diff --git a/frontend/core/pipelines/pipeline-text-to-game/cover-image.png b/frontend/core/pipelines/pipeline-text-to-game/cover-image.png
new file mode 100644
index 00000000..da23029b
Binary files /dev/null and b/frontend/core/pipelines/pipeline-text-to-game/cover-image.png differ
diff --git a/frontend/core/pipelines/pipeline-text-to-game/interface-maker-ool7kd5xa3sw/Dockerfile b/frontend/core/pipelines/pipeline-text-to-game/interface-maker-ool7kd5xa3sw/Dockerfile
new file mode 100644
index 00000000..7f29ac11
--- /dev/null
+++ b/frontend/core/pipelines/pipeline-text-to-game/interface-maker-ool7kd5xa3sw/Dockerfile
@@ -0,0 +1,7 @@
+FROM python:3.9
+
+WORKDIR /app
+
+COPY . .
+
+RUN pip install --no-cache-dir -r requirements.txt
diff --git a/frontend/core/pipelines/pipeline-text-to-game/interface-maker-ool7kd5xa3sw/agents/gpt-4_python_compute/generate/computations.py b/frontend/core/pipelines/pipeline-text-to-game/interface-maker-ool7kd5xa3sw/agents/gpt-4_python_compute/generate/computations.py
new file mode 100644
index 00000000..5378303d
--- /dev/null
+++ b/frontend/core/pipelines/pipeline-text-to-game/interface-maker-ool7kd5xa3sw/agents/gpt-4_python_compute/generate/computations.py
@@ -0,0 +1,119 @@
+import json
+import re
+import sys
+import traceback
+
+from langchain.prompts import ChatPromptTemplate
+from langchain_openai import ChatOpenAI
+
+# Define system context
+openaiSystemContent = """You are an assistant that generates python code and returns it in a way that must follow the template below. 
+You absolutely need to give a python code section without abbreviation that follows the template. Do not put code lines at the root, but give only the functions and imports.
+
+By default, when requested to do change or add to the code, modify the latest code section. But when the user ask to do it on another section, do so.
+
+In the template, the function compute contains the code and the function test contains a series of call to compute that runs and prints multiple tests. 
+
+Don't insert a __main__ section.
+
+Template:
+import ...
+
+def compute(in1, in2, in3,...):
+    '''A textual description of the compute function.'''
+
+    #some code
+    return {{'out1': out1, 'out2': out2, ...}}
+
+def test():
+    # Call compute multiple times based on a series of inputs. The outputs are then compare with the expected outputs. Print the results and indicate if the tests passed.
+"""
+
+
+def extract_python_code(response):
+    """
+    Extracts Python code blocks from a given text, excluding standalone compute() or test() calls.
+    Assumes that Python code is formatted with triple backticks.
+    If no Python code blocks are found, returns the whole response.
+    """
+
+    # Pattern to match code blocks fenced by triple backticks
+    pattern_backticks = r"```python\n(.*?)```"
+
+    # Extract code blocks fenced by triple backticks
+    matches_backticks = re.findall(pattern_backticks, response, re.DOTALL)
+
+    # If no code blocks are found, return the whole response
+    if not matches_backticks:
+        return response
+
+    # Process each match to remove standalone compute() or test() lines
+    processed_code_blocks = []
+    for code_block in matches_backticks:
+        # Remove standalone compute() or test() lines
+        code_block = re.sub(r'^compute\(.*?\)\s*$', '', code_block, flags=re.MULTILINE)
+        code_block = re.sub(r'^test\(.*?\)\s*$', '', code_block, flags=re.MULTILINE)
+        processed_code_blocks.append(code_block.strip())
+
+    # Combine and return all processed code blocks
+    return "\n\n".join(processed_code_blocks)
+
+
+def compute(user_prompt, model_version, conversation_history, apiKey):
+    # Use only the last entry from the history
+    if conversation_history:
+        conversation_history = [conversation_history[-1]]
+
+    # Escape special characters or handle raw strings in conversation history
+    escaped_history = []
+    for entry in conversation_history:
+        # Example of escaping curly braces
+        prompt = entry['prompt'].replace("{", "{{").replace("}", "}}")
+        response = entry['response'].replace("{", "{{").replace("}", "}}")
+        escaped_history.append(("user", prompt))
+        escaped_history.append(("assistant", response))
+
+    # Use the escaped history for constructing messages
+    messages = [("system", openaiSystemContent)] + escaped_history
+    messages.append(("user", "{text}"))
+
+    # Create a ChatPromptTemplate from the messages
+    chat_prompt = ChatPromptTemplate.from_messages(messages)
+
+    # Initialize the ChatOpenAI model
+    chat_model = ChatOpenAI(openai_api_key=apiKey, model=model_version)
+    chain = chat_prompt | chat_model
+
+    # Query
+    response = chain.invoke({"text": user_prompt})
+
+    # Keep only the python code
+    code = extract_python_code(response.content)
+
+    return {'response': code, 'model': model_version}
+
+
+
+if __name__ == "__main__":
+    try:
+        # Read JSON string from stdin
+        input_json = sys.stdin.read()
+        
+        # Parse the JSON input
+        data = json.loads(input_json)
+
+        # Extract the arguments from the parsed JSON
+        user_prompt = data['userMessage']
+        # model_version = data.get('selectedModel', 'gpt-4')
+        conversation_history = data.get('conversationHistory', [])
+        apiKey = data["apiKey"]
+
+        # Call the compute function and get the result
+        result = compute(user_prompt, 'gpt-4o', conversation_history, apiKey)
+
+        # Print the result as a JSON string
+        print(json.dumps(result))
+    except Exception as e:
+        # Capture and print the full stack trace
+        error_traceback = traceback.format_exc()
+        print(json.dumps({"error": str(e), "traceback": error_traceback}))
diff --git a/frontend/core/pipelines/pipeline-text-to-game/interface-maker-ool7kd5xa3sw/agents/gpt-4_python_compute/generate/specs.json b/frontend/core/pipelines/pipeline-text-to-game/interface-maker-ool7kd5xa3sw/agents/gpt-4_python_compute/generate/specs.json
new file mode 100644
index 00000000..b9b731f6
--- /dev/null
+++ b/frontend/core/pipelines/pipeline-text-to-game/interface-maker-ool7kd5xa3sw/agents/gpt-4_python_compute/generate/specs.json
@@ -0,0 +1,30 @@
+{
+  "block": {
+    "information": {
+      "id": "",
+      "name": "",
+      "description": "",
+      "system_version": ""
+    },
+    "parameters": {},
+    "action": {
+      "languages": {
+        "name": "python",
+        "version": "3.9"
+      },
+      "container_uuid": "",
+      "container_image_uuid": "",
+      "block_source": ""
+    },
+    "views": {
+      "node": {
+        "html": "",
+        "pos_x": "300",
+        "pos_y": "200",
+        "pos_z": "999, this is the z-index for 2D canvas"
+      }
+    },
+    "controllers": {},
+    "events": []
+  }
+}
diff --git a/frontend/core/pipelines/pipeline-text-to-game/interface-maker-ool7kd5xa3sw/agents/gpt-4_python_view/generate/computations.py b/frontend/core/pipelines/pipeline-text-to-game/interface-maker-ool7kd5xa3sw/agents/gpt-4_python_view/generate/computations.py
new file mode 100644
index 00000000..2d6cd1d5
--- /dev/null
+++ b/frontend/core/pipelines/pipeline-text-to-game/interface-maker-ool7kd5xa3sw/agents/gpt-4_python_view/generate/computations.py
@@ -0,0 +1,141 @@
+import json
+import re
+import sys
+import traceback
+
+from langchain.prompts import ChatPromptTemplate
+from langchain_openai import ChatOpenAI
+
+# Define system context
+openaiSystemContent = """You are an assistant that generates python code and returns it in a way that must follow the template below. Your goal is to generate a view.html file that satisfy the user requirement.
+Most importantly, you must rely on the prompt to generate the html_template file that satisfy the user request. The html should contain everything to display in a brownser and must rely CDN or skypack when needed.
+You absolutely need to give a python code section without abbreviation that follows the template. Do not put code lines at the root, but give only the functions and imports.
+
+By default, when requested to do change or add to the code, modify the latest code section. But when the user ask to do it on another section, do so.
+
+In the template, the function compute contains the code and the function test contains a series of call to compute that runs and prints multiple tests. 
+
+Don't insert a __main__ section.
+
+Template:
+from string import Template
+
+def compute(in1):
+    '''Generates an HTML file with a unique name and returns the file name.'''
+
+    html_template = Template('''
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Hello Block View</title>
+</head>
+<body>
+    $in1
+</body>
+</html>
+    ''')
+
+    # Build and save the html file
+    html_path = f"view.html"
+    html_code = html_template.substitute(in1=in1)
+    with open(html_path, "w") as file:
+        file.write(html_code)
+  
+    return {{'html': f"view.html"}}
+
+def test():
+    '''Test the compute function.'''
+
+    print('Running test')
+    result = compute('Hello view block')
+    print(f"Generated HTML file: {{result['html']}}")
+"""
+
+
+def extract_python_code(response):
+    """
+    Extracts Python code blocks from a given text, excluding standalone compute() or test() calls.
+    Assumes that Python code is formatted with triple backticks.
+    If no Python code blocks are found, returns the whole response.
+    """
+
+    # Pattern to match code blocks fenced by triple backticks
+    pattern_backticks = r"```python\n(.*?)```"
+
+    # Extract code blocks fenced by triple backticks
+    matches_backticks = re.findall(pattern_backticks, response, re.DOTALL)
+
+    # If no code blocks are found, return the whole response
+    if not matches_backticks:
+        return response
+
+    # Process each match to remove standalone compute() or test() lines
+    processed_code_blocks = []
+    for code_block in matches_backticks:
+        # Remove standalone compute() or test() lines
+        code_block = re.sub(r'^compute\(.*?\)\s*$', '', code_block, flags=re.MULTILINE)
+        code_block = re.sub(r'^test\(.*?\)\s*$', '', code_block, flags=re.MULTILINE)
+        processed_code_blocks.append(code_block.strip())
+
+    # Combine and return all processed code blocks
+    return "\n\n".join(processed_code_blocks)
+
+
+def compute(user_prompt, model_version, conversation_history, apiKey):
+    # Use only the last entry from the history
+    if conversation_history:
+        conversation_history = [conversation_history[-1]]
+
+    # Escape special characters or handle raw strings in conversation history
+    escaped_history = []
+    for entry in conversation_history:
+        # Example of escaping curly braces
+        prompt = entry['prompt'].replace("{", "{{").replace("}", "}}")
+        response = entry['response'].replace("{", "{{").replace("}", "}}")
+        escaped_history.append(("user", prompt))
+        escaped_history.append(("assistant", response))
+
+    # Use the escaped history for constructing messages
+    messages = [("system", openaiSystemContent)] + escaped_history
+    messages.append(("user", "{text}"))
+
+    # Create a ChatPromptTemplate from the messages
+    chat_prompt = ChatPromptTemplate.from_messages(messages)
+
+    # Initialize the ChatOpenAI model
+    chat_model = ChatOpenAI(openai_api_key=apiKey, model=model_version)
+    chain = chat_prompt | chat_model
+
+    # Query
+    response = chain.invoke({"text": user_prompt})
+
+    # Keep only the python code
+    code = extract_python_code(response.content)
+
+    return {'response': code, 'model': model_version}
+
+
+
+if __name__ == "__main__":
+    try:
+        # Read JSON string from stdin
+        input_json = sys.stdin.read()
+        
+        # Parse the JSON input
+        data = json.loads(input_json)
+
+        # Extract the arguments from the parsed JSON
+        user_prompt = data['userMessage']
+        # model_version = data.get('selectedModel', 'gpt-4')
+        conversation_history = data.get('conversationHistory', [])
+        apiKey = data['apiKey']
+
+        # Call the compute function and get the result
+        result = compute(user_prompt, 'gpt-4o', conversation_history, apiKey)
+
+        # Print the result as a JSON string
+        print(json.dumps(result))
+    except Exception as e:
+        # Capture and print the full stack trace
+        error_traceback = traceback.format_exc()
+        print(json.dumps({"error": str(e), "traceback": error_traceback}))
diff --git a/frontend/core/pipelines/pipeline-text-to-game/interface-maker-ool7kd5xa3sw/agents/gpt-4_python_view/generate/specs.json b/frontend/core/pipelines/pipeline-text-to-game/interface-maker-ool7kd5xa3sw/agents/gpt-4_python_view/generate/specs.json
new file mode 100644
index 00000000..b9b731f6
--- /dev/null
+++ b/frontend/core/pipelines/pipeline-text-to-game/interface-maker-ool7kd5xa3sw/agents/gpt-4_python_view/generate/specs.json
@@ -0,0 +1,30 @@
+{
+  "block": {
+    "information": {
+      "id": "",
+      "name": "",
+      "description": "",
+      "system_version": ""
+    },
+    "parameters": {},
+    "action": {
+      "languages": {
+        "name": "python",
+        "version": "3.9"
+      },
+      "container_uuid": "",
+      "container_image_uuid": "",
+      "block_source": ""
+    },
+    "views": {
+      "node": {
+        "html": "",
+        "pos_x": "300",
+        "pos_y": "200",
+        "pos_z": "999, this is the z-index for 2D canvas"
+      }
+    },
+    "controllers": {},
+    "events": []
+  }
+}
diff --git a/frontend/core/pipelines/pipeline-text-to-game/interface-maker-ool7kd5xa3sw/computations.py b/frontend/core/pipelines/pipeline-text-to-game/interface-maker-ool7kd5xa3sw/computations.py
new file mode 100644
index 00000000..824df2d5
--- /dev/null
+++ b/frontend/core/pipelines/pipeline-text-to-game/interface-maker-ool7kd5xa3sw/computations.py
@@ -0,0 +1,48 @@
+import uuid
+import os
+import zipfile
+import html
+
+def escape_content(content):
+    # First escape using html.escape
+    escaped_content = html.escape(content)
+    # Then manually replace backticks with their HTML entity
+    escaped_content = escaped_content.replace('`', '&#96;').replace('$', '&#36;')
+    return escaped_content
+
+def compute(initial_content, api_key, image_paths):
+    """Tool to generate HTML apps interfaces using the OpenAI API.
+
+    Inputs:
+        api_key (str): API key to be included in the generated HTML page.
+        initial_content (str): Initial HTML content to be embedded in the generated HTML page.
+        image_paths (list): List of image paths to be included and saved locally.
+
+    Outputs:
+        dict: A dictionary with the key 'html' and the value being the name of the generated HTML file.
+    """
+
+    # Load the HTML template
+    with open('template.html', 'r') as file:
+        html_template = file.read()
+
+    # Escape the initial content and API key
+    escaped_initial_content = escape_content(initial_content)
+    escaped_api_key = escape_content(api_key)
+
+    # Replace the placeholder with the actual content and image paths
+    html_code = (html_template.replace('<< api_key >>', escaped_api_key)
+                                .replace('<< initial_content >>', escaped_initial_content))
+
+    # Write the file
+    unique_id = str(uuid.uuid4())
+    html_path = f"/files/viz_{unique_id}.html"
+
+    with open(html_path, "w") as file:
+        file.write(html_code)
+
+    return {"html": f"viz_{unique_id}.html"}
+
+def test():
+    """Test the compute function."""
+    print("Running test")
diff --git a/frontend/core/pipelines/pipeline-text-to-game/interface-maker-ool7kd5xa3sw/mona.png b/frontend/core/pipelines/pipeline-text-to-game/interface-maker-ool7kd5xa3sw/mona.png
new file mode 100644
index 00000000..cedc91aa
Binary files /dev/null and b/frontend/core/pipelines/pipeline-text-to-game/interface-maker-ool7kd5xa3sw/mona.png differ
diff --git a/frontend/core/pipelines/pipeline-text-to-game/interface-maker-ool7kd5xa3sw/requirements.txt b/frontend/core/pipelines/pipeline-text-to-game/interface-maker-ool7kd5xa3sw/requirements.txt
new file mode 100644
index 00000000..99a80913
--- /dev/null
+++ b/frontend/core/pipelines/pipeline-text-to-game/interface-maker-ool7kd5xa3sw/requirements.txt
@@ -0,0 +1,2 @@
+
+
diff --git a/frontend/core/pipelines/pipeline-text-to-game/interface-maker-ool7kd5xa3sw/robocat.png b/frontend/core/pipelines/pipeline-text-to-game/interface-maker-ool7kd5xa3sw/robocat.png
new file mode 100644
index 00000000..e9f1ae0f
Binary files /dev/null and b/frontend/core/pipelines/pipeline-text-to-game/interface-maker-ool7kd5xa3sw/robocat.png differ
diff --git a/frontend/core/pipelines/pipeline-text-to-game/interface-maker-ool7kd5xa3sw/specs.json b/frontend/core/pipelines/pipeline-text-to-game/interface-maker-ool7kd5xa3sw/specs.json
new file mode 100644
index 00000000..abf11e24
--- /dev/null
+++ b/frontend/core/pipelines/pipeline-text-to-game/interface-maker-ool7kd5xa3sw/specs.json
@@ -0,0 +1,70 @@
+{
+  "information": {
+    "id": "interface-maker",
+    "name": "Interface Maker",
+    "description": "Tool to generate HTML apps interfaces using the OpenAI API.\n\nInputs:\n    api_key (str): API key to be included in the generated HTML page.\n    initial_content (str): Initial HTML content to be embedded in the generated HTML page.\n    image_paths (list): List of image paths to be included and saved locally.\n\nOutputs:\n    dict: A dictionary with the key 'html' and the value being the name of the generated HTML file.",
+    "system_versions": [
+      "0.1"
+    ],
+    "block_version": "1.0",
+    "block_source": "",
+    "block_type": "view"
+  },
+  "inputs": {
+    "initial_content": {
+      "type": "Any",
+      "connections": []
+    },
+    "api_key": {
+      "type": "Any",
+      "connections": []
+    },
+    "image_paths": {
+      "type": "Any",
+      "connections": []
+    }
+  },
+  "outputs": {
+    "html": {
+      "type": "Any",
+      "connections": []
+    }
+  },
+  "action": {
+    "container": {
+      "image": "interface-maker",
+      "version": "interface-maker-ool7kd5xda3sw",
+      "command_line": [
+        "python",
+        "entrypoint.py"
+      ]
+    }
+  },
+  "views": {
+    "node": {
+      "active": "true",
+      "title_bar": {
+        "background_color": "#0099ff"
+      },
+      "preview": {
+        "active": "true"
+      },
+      "html": "",
+      "pos_x": 0,
+      "pos_y": 0,
+      "pos_z": "999",
+      "order": {
+        "input": [
+          "initial_content",
+          "api_key",
+          "image_paths"
+        ],
+        "output": [
+          "html"
+        ]
+      }
+    },
+    "mode": "modal"
+  },
+  "events": {}
+}
\ No newline at end of file
diff --git a/frontend/core/pipelines/pipeline-text-to-game/interface-maker-ool7kd5xa3sw/template.html b/frontend/core/pipelines/pipeline-text-to-game/interface-maker-ool7kd5xa3sw/template.html
new file mode 100644
index 00000000..8aecca1f
--- /dev/null
+++ b/frontend/core/pipelines/pipeline-text-to-game/interface-maker-ool7kd5xa3sw/template.html
@@ -0,0 +1,603 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chat and Iframe</title>
+    <style>
+        body {
+            display: flex;
+            font-family: Roboto, Arial, sans-serif;
+            font-size: 18px;
+            height: 100vh;
+            margin: 0;
+            overflow: hidden; /* Prevents body overflow */
+        }
+        #chat {
+            width: 25%;
+            padding: 10px;
+            margin-top: 40px;
+            border-right: 1px solid #ddd;
+            overflow-y: auto;
+        }
+        #main-container {
+            width: 75%;
+            display: flex;
+            flex-grow: 1;
+            flex-direction: column;
+            overflow: hidden; /* Prevents main container overflow */
+            position: relative;
+        }
+        .tabs {
+            display: flex;
+            cursor: pointer;
+            background-color: white;
+            color: black;
+        }
+        .tab {
+            padding: 10px;
+            border: 1px solid #ddd;
+            margin-right: 2px;
+            background-color: lightgray;
+            color: black;
+        }
+        .tab.active {
+            background-color: indigo;
+            border-bottom: none;
+            color: white;
+        }
+        #iframe-container, #response-container, #html-container {
+            flex-grow: 1;
+            padding: 10px;
+            display: none;
+            overflow: auto;
+        }
+        iframe {
+            width: 100%;
+            height: calc(100% - 20px); /* Adjusted for padding */
+            border: none;
+        }
+        .message {
+            margin: 5px 0;
+            display: flex;
+            align-items: center;
+        }
+        .message textarea {
+            font-size: 18px;
+            width: 80%;
+            padding: 5px;
+            resize: none; /* Prevents manual resizing */
+            overflow: hidden; /* Hides scrollbars */
+        }
+        .message button {
+            font-size: 18px;
+            padding: 5px;
+            margin-left: 3px;
+            background-color: indigo;
+            color: white;
+            border: none;
+            border-radius: 10%;
+            cursor: pointer;
+        }
+        .message button:disabled {
+            background-color: gray;
+            cursor: not-allowed;
+        }
+        .message button:hover:not(:disabled) {
+            background-color: darkslateblue;
+        }
+        #spinner {
+            display: none;
+            width: 20px;
+            height: 20px;
+            border: 3px solid #f3f3f3;
+            border-top: 3px solid indigo;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin-left: 10px;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        #response-content {
+            white-space: pre-wrap; /* Wrap long lines */
+            word-break: break-word; /* Break long words */
+            overflow-wrap: break-word; /* Break words to prevent overflow */
+            width: 100%; /* Ensure response content fits the container */
+        }
+        .chat-message {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            cursor: pointer;
+            margin-bottom: 10px;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            position: relative;
+        }
+        .chat-message.selected {
+            background-color: #f1f1f1;
+        }
+        .chat-message.disabled {
+            pointer-events: none;
+            opacity: 0.6;
+        }
+        .options-button {
+            background: none;
+            border: none;
+            cursor: pointer;
+        }
+        .options-popup {
+            display: none;
+            position: absolute;
+            right: 10px;
+            top: 10px;
+            background-color: white;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+        }
+        .options-popup button {
+            background-color: white;
+            color: black;
+            border: none;
+            padding: 10px;
+            cursor: pointer;
+        }
+        .options-popup button:hover {
+            background-color: lightgray;
+        }
+        #button-container {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+        }
+        #save-button, #load-button, #save-complete-button {
+            padding: 10px;
+            background-color: indigo;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            flex: 1 1 auto;
+        }
+        #save-button:hover, #load-button:hover, #save-complete-button:hover {
+            background-color: darkslateblue;
+        }
+        #file-input {
+            display: none; /* Hidden file input */
+        }
+        @media (max-width: 600px) {
+            #button-container {
+                flex-direction: column;
+                right: 10px;
+                top: 60px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="chat">
+        <div id="messages"></div>
+        <div class="message">
+            <textarea id="message-input" placeholder="Type a message" rows="1" onkeypress="handleKeyPress(event)" oninput="adjustTextareaHeight(this)"></textarea>
+            <button id="send-button" onclick="sendMessage()">Send</button>
+            <div id="spinner"></div>
+        </div>
+    </div>
+    <div id="main-container">
+        <div class="tabs">
+            <div class="tab active" onclick="showTab('iframe')">View</div>
+            <div class="tab" onclick="showTab('html')">HTML</div>
+            <div class="tab" onclick="showTab('response')">Response</div>
+        </div>
+        <div id="button-container">
+            <input type="file" id="file-input" accept=".html" onchange="loadHtmlFile()">
+            <button id="load-button" onclick="document.getElementById('file-input').click()">Load HTML</button>
+            <button id="save-button" onclick="saveHtmlFile()">Save HTML</button>
+            <button id="save-complete-button">Save Complete HTML</button>
+        </div>
+        <div id="iframe-container">
+            <iframe id="content-frame" src="about:blank"></iframe>
+        </div>
+        <div id="html-container">
+            <pre id="html-content"></pre>
+        </div>
+        <div id="response-container">
+            <pre id="response-content"></pre>
+        </div>
+    </div>
+
+    <script>
+        const systemMessage = {
+            role: 'system',
+            content: 'You are an assistant that generates a full HTML page based on user input. All the code should be in one HTML page and use CDN.'
+        };
+
+        const messageHistory = [];
+        let isSending = false;
+        const initialContent = `<< initial_content >>`; // Set this variable
+
+        function handleKeyPress(event) {
+            if (event.key === 'Enter' && !event.shiftKey && !isSending) {
+                event.preventDefault(); // Prevents the default behavior of Enter key
+                sendMessage();
+            }
+        }
+
+        function adjustTextareaHeight(textarea) {
+            textarea.style.height = 'auto'; // Reset height
+            textarea.style.height = textarea.scrollHeight + 'px'; // Adjust height
+        }
+
+        function showTab(tabName) {
+            const iframeContainer = document.getElementById('iframe-container');
+            const responseContainer = document.getElementById('response-container');
+            const htmlContainer = document.getElementById('html-container');
+            const tabs = document.querySelectorAll('.tab');
+
+            tabs.forEach(tab => tab.classList.remove('active'));
+            if (tabName === 'iframe') {
+                document.querySelector('.tab[onclick="showTab(\'iframe\')"]').classList.add('active');
+                iframeContainer.style.display = 'block';
+                responseContainer.style.display = 'none';
+                htmlContainer.style.display = 'none';
+            } else if (tabName === 'html') {
+                document.querySelector('.tab[onclick="showTab(\'html\')"]').classList.add('active');
+                iframeContainer.style.display = 'none';
+                responseContainer.style.display = 'none';
+                htmlContainer.style.display = 'block';
+            } else {
+                document.querySelector('.tab[onclick="showTab(\'response\')"]').classList.add('active');
+                iframeContainer.style.display = 'none';
+                responseContainer.style.display = 'block';
+                htmlContainer.style.display = 'none';
+            }
+        }
+
+        function selectMessage(index) {
+            console.log(`selectMessage called with index: ${index}`);
+            console.log(`messageHistory:`, messageHistory);
+
+            const chatMessages = document.querySelectorAll('.chat-message');
+            chatMessages.forEach((message, idx) => {
+                if (idx === index) {
+                    message.classList.add('selected');
+                } else {
+                    message.classList.remove('selected');
+                }
+            });
+
+            const selectedMessage = messageHistory[index];
+            if (selectedMessage) {
+                console.log(`Selected message found:`, selectedMessage);
+                updateIframe(selectedMessage.htmlContent);
+                updateResponseContent(selectedMessage.fullResponse);
+                updateHtmlContent(selectedMessage.htmlContent);
+            } else {
+                console.log(`Selected message not found at index: ${index}`);
+            }
+        }
+
+        function deleteMessage(index) {
+            console.log(`deleteMessage called with index: ${index}`);
+            messageHistory.splice(index, 1);
+            updateMessages();
+        }
+
+        function copyMessage(index) {
+            const messageToCopy = messageHistory[index];
+            if (messageToCopy) {
+                const copiedMessage = {
+                    prompt: `Copy: ${messageToCopy.prompt}`,
+                    htmlContent: messageToCopy.htmlContent,
+                    fullResponse: messageToCopy.fullResponse
+                };
+                messageHistory.push(copiedMessage);
+                updateMessages();
+                selectMessage(messageHistory.length - 1);
+            }
+        }
+
+        function updateMessages() {
+            const messagesDiv = document.getElementById('messages');
+            messagesDiv.innerHTML = '';
+            messageHistory.forEach((message, index) => {
+                const chatMessage = document.createElement('div');
+                chatMessage.innerText = message.prompt;
+                chatMessage.classList.add('chat-message');
+                chatMessage.onclick = () => selectMessage(index);
+
+                const optionsButton = document.createElement('button');
+                optionsButton.innerHTML = '&#8942;'; // Three vertical dots
+                optionsButton.classList.add('options-button');
+                optionsButton.onclick = (event) => {
+                    event.stopPropagation();
+                    togglePopup(index);
+                };
+
+                const optionsPopup = document.createElement('div');
+                optionsPopup.classList.add('options-popup');
+                const copyButton = document.createElement('button');
+                copyButton.innerText = 'Copy';
+                copyButton.onclick = (event) => {
+                    event.stopPropagation();
+                    copyMessage(index);
+                    closePopups();
+                };
+                const deleteButton = document.createElement('button');
+                deleteButton.innerText = 'Delete';
+                deleteButton.onclick = (event) => {
+                    event.stopPropagation();
+                    deleteMessage(index);
+                    closePopups();
+                };
+                optionsPopup.appendChild(copyButton);
+                optionsPopup.appendChild(deleteButton);
+
+                chatMessage.appendChild(optionsButton);
+                chatMessage.appendChild(optionsPopup);
+                messagesDiv.appendChild(chatMessage);
+            });
+        }
+
+        function togglePopup(index) {
+            closePopups();
+            const messagesDiv = document.getElementById('messages');
+            const chatMessage = messagesDiv.children[index];
+            const popup = chatMessage.querySelector('.options-popup');
+            popup.style.display = 'block';
+            document.addEventListener('click', closePopupsOnClickOutside);
+        }
+
+        function closePopupsOnClickOutside(event) {
+            if (!event.target.closest('.chat-message')) {
+                closePopups();
+            }
+        }
+
+        function closePopups() {
+            const popups = document.querySelectorAll('.options-popup');
+            popups.forEach(popup => popup.style.display = 'none');
+            document.removeEventListener('click', closePopupsOnClickOutside);
+        }
+
+        function updateIframe(htmlContent) {
+            const iframe = document.getElementById('content-frame');
+            iframe.srcdoc = htmlContent; // Use srcdoc to ensure proper rendering
+        }
+
+        function updateResponseContent(fullResponse) {
+            const responseContent = document.getElementById('response-content');
+            responseContent.textContent = fullResponse;
+        }
+
+        function updateHtmlContent(htmlContent) {
+            const htmlContentContainer = document.getElementById('html-content');
+            htmlContentContainer.textContent = htmlContent;
+        }
+
+        function saveHtmlFile() {
+            const htmlContent = document.getElementById('html-content').textContent;
+            const blob = new Blob([htmlContent], { type: 'text/html' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'output.html';
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+        }
+
+        async function saveHtmlWithMedia() {
+            const htmlContentDiv = document.getElementById('html-content');
+            const tempDiv = document.createElement('div');
+            tempDiv.innerHTML = htmlContentDiv.textContent;
+
+            const mediaElements = tempDiv.querySelectorAll('img, audio, video');
+
+            for (const element of mediaElements) {
+                const src = element.src;
+                if (src.startsWith('data:')) {
+                    continue; // Skip already embedded data URLs
+                }
+                try {
+                    const response = await fetch(src);
+                    if (!response.ok) {
+                        console.warn(`Failed to fetch ${src}`);
+                        continue; // Skip if the media is not found
+                    }
+                    const blob = await response.blob();
+                    const reader = new FileReader();
+                    reader.onload = function(e) {
+                        element.src = e.target.result;
+                    };
+                    reader.readAsDataURL(blob);
+                    await new Promise(resolve => reader.onloadend = resolve); // Ensure the base64 conversion is done before proceeding
+                } catch (error) {
+                    console.error(`Error processing ${src}: ${error}`);
+                }
+            }
+
+            // Wait for all media to be processed
+            await new Promise(resolve => setTimeout(resolve, 1000));
+
+            const htmlContent = tempDiv.innerHTML;
+            const blob = new Blob([htmlContent], { type: 'text/html' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'complete_output.html';
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+        }
+
+        document.getElementById('save-complete-button').addEventListener('click', saveHtmlWithMedia);
+
+        function loadHtmlFile() {
+            const fileInput = document.getElementById('file-input');
+            const file = fileInput.files[0];
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    const htmlContent = e.target.result;
+                    const newMessage = {
+                        prompt: `Imported HTML file ${file.name}`,
+                        htmlContent: htmlContent,
+                        fullResponse: htmlContent
+                    };
+                    messageHistory.push(newMessage);
+                    updateMessages();
+                    selectMessage(messageHistory.length - 1);
+                    showTab('iframe');  // Switch to the 'View' tab
+                };
+                reader.readAsText(file);
+            }
+        }
+
+        function unescapeHtml(escapedStr) {
+            // Parse the string to handle standard HTML entities
+            const doc = new DOMParser().parseFromString(escapedStr, 'text/html');
+            let unescapedStr = doc.documentElement.textContent;
+
+            // Manually replace the custom-escaped backtick entity
+            unescapedStr = unescapedStr.replace(/&#96;/g, '`').replace(/&#36;/g, '$');
+
+            return unescapedStr;
+        }
+
+        function loadInitialContent(content) {
+            const unescapedContent = unescapeHtml(content);
+            const newMessage = {
+                prompt: "Initial HTML content",
+                htmlContent: unescapedContent,
+                fullResponse: unescapedContent
+            };
+            messageHistory.push(newMessage);
+            updateMessages();
+            selectMessage(messageHistory.length - 1);
+            showTab('iframe');
+        }
+
+        // Check if initialContent is set and load the HTML content if so
+        if (initialContent) {
+            loadInitialContent(initialContent);
+        }
+
+        async function sendMessage() {
+            const messageInput = document.getElementById('message-input');
+            const message = messageInput.value;
+            if (message.trim() === '') return;
+
+            const sendButton = document.getElementById('send-button');
+            const spinner = document.getElementById('spinner');
+            sendButton.style.display = 'none';
+            spinner.style.display = 'block';
+            isSending = true;
+
+            const newMessage = {
+                prompt: message,
+                htmlContent: '',
+                fullResponse: ''
+            };
+
+            messageHistory.push(newMessage);
+            updateMessages();
+            const lastMessageIndex = messageHistory.length - 1;
+            const chatMessages = document.querySelectorAll('.chat-message');
+            chatMessages[lastMessageIndex].classList.add('disabled');
+
+            // Show running prompt in HTML view and response view
+            updateIframe('<html><body><p style="font-size:18px;font-family: Roboto, Arial, sans-serif;">Loading...</p></body></html>');
+            updateResponseContent('Loading...');
+
+            messageInput.value = '';
+            adjustTextareaHeight(messageInput);
+
+            // Create the messages array for the API call
+            const messages = [systemMessage];
+            if (messageHistory.length > 1) {
+                const lastEntry = messageHistory[messageHistory.length - 2];
+                messages.push({ role: 'user', content: lastEntry.prompt });
+                messages.push({ role: 'assistant', content: lastEntry.fullResponse });
+            }
+            messages.push({ role: 'user', content: message });
+
+            // Log the messages being sent to the API
+            console.log('Messages sent to API:', messages);
+
+            // Make API call to OpenAI
+            try {
+                const response = await fetch('https://api.openai.com/v1/chat/completions', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Authorization': 'Bearer << api_key >>'
+                    },
+                    body: JSON.stringify({
+                        model: 'gpt-4o',
+                        messages: messages
+                    })
+                });
+
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+
+                const data = await response.json();
+                let htmlContent = data.choices[0].message.content;
+
+                // Extract the HTML content inside the ```html tags
+                const htmlMatch = htmlContent.match(/```html\n([\s\S]*?)\n```/);
+                if (htmlMatch && htmlMatch[1]) {
+                    htmlContent = htmlMatch[1];
+                }
+
+                // Update message history with the response
+                newMessage.htmlContent = htmlContent;
+                newMessage.fullResponse = data.choices[0].message.content;
+
+                console.log(`New message updated in history:`, newMessage);
+
+                // Display HTML content in iframe
+                updateIframe(htmlContent);
+
+                // Display full response in pre element
+                updateResponseContent(data.choices[0].message.content);
+
+                // Display just HTML content in pre element
+                updateHtmlContent(htmlContent);
+
+            } catch (error) {
+                console.error('Error fetching HTML:', error);
+
+                // Display error HTML
+                const errorHtml = `
+                    <html>
+                    <body>
+                        <h1>Error</h1>
+                        <p>There was an error processing your request.</p>
+                    </body>
+                    </html>`;
+                updateIframe(errorHtml);
+            } finally {
+                // Hide spinner
+                spinner.style.display = 'none';
+                sendButton.style.display = 'block';
+                chatMessages[lastMessageIndex].classList.remove('disabled');
+                isSending = false;
+                selectMessage(messageHistory.length - 1);
+                showTab('iframe');
+            }
+        }
+    </script>
+</body>
+</html>
diff --git a/frontend/core/pipelines/pipeline-text-to-game/new-python-i3a2bb98agbh/Dockerfile b/frontend/core/pipelines/pipeline-text-to-game/new-python-i3a2bb98agbh/Dockerfile
new file mode 100644
index 00000000..ac70a253
--- /dev/null
+++ b/frontend/core/pipelines/pipeline-text-to-game/new-python-i3a2bb98agbh/Dockerfile
@@ -0,0 +1,9 @@
+FROM python:3.9
+
+WORKDIR /app
+
+COPY requirements.txt .
+
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
diff --git a/frontend/core/pipelines/pipeline-text-to-game/new-python-i3a2bb98agbh/computations.py b/frontend/core/pipelines/pipeline-text-to-game/new-python-i3a2bb98agbh/computations.py
new file mode 100644
index 00000000..c99d109b
--- /dev/null
+++ b/frontend/core/pipelines/pipeline-text-to-game/new-python-i3a2bb98agbh/computations.py
@@ -0,0 +1,22 @@
+import os
+
+def compute():
+    '''List all image files in the current directory, rename them by appending 'img_' in front, and save them with the same name. Return the filenames of the renamed files.'''
+
+    image_extensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.tiff']
+    renamed_image_files = []
+
+    current_directory = os.path.dirname(os.path.abspath(__file__))
+    for file in os.listdir(current_directory):
+        if any(file.lower().endswith(ext) for ext in image_extensions):
+            new_filename = 'img_' + file
+            os.rename(os.path.join(current_directory, file), os.path.join(current_directory, new_filename))
+            renamed_image_files.append(new_filename)
+
+    return {'image_files': renamed_image_files}
+
+def test():
+    # Test the function without input, assumes known files in the current directory
+    expected_output = {'renamed_image_files': ['img_image1.jpg', 'img_photo.png', 'img_pic.gif']}
+    result = compute()
+    print('Test Passed:', result == expected_output, 'Output:', result)
\ No newline at end of file
diff --git a/frontend/core/pipelines/pipeline-text-to-game/new-python-i3a2bb98agbh/cover-image.png b/frontend/core/pipelines/pipeline-text-to-game/new-python-i3a2bb98agbh/cover-image.png
new file mode 100644
index 00000000..a33c4599
Binary files /dev/null and b/frontend/core/pipelines/pipeline-text-to-game/new-python-i3a2bb98agbh/cover-image.png differ
diff --git a/frontend/core/pipelines/pipeline-text-to-game/new-python-i3a2bb98agbh/mona.png b/frontend/core/pipelines/pipeline-text-to-game/new-python-i3a2bb98agbh/mona.png
new file mode 100644
index 00000000..cedc91aa
Binary files /dev/null and b/frontend/core/pipelines/pipeline-text-to-game/new-python-i3a2bb98agbh/mona.png differ
diff --git a/frontend/core/pipelines/pipeline-text-to-game/new-python-i3a2bb98agbh/rain.png b/frontend/core/pipelines/pipeline-text-to-game/new-python-i3a2bb98agbh/rain.png
new file mode 100644
index 00000000..01109885
Binary files /dev/null and b/frontend/core/pipelines/pipeline-text-to-game/new-python-i3a2bb98agbh/rain.png differ
diff --git a/frontend/core/pipelines/pipeline-text-to-game/new-python-i3a2bb98agbh/requirements.txt b/frontend/core/pipelines/pipeline-text-to-game/new-python-i3a2bb98agbh/requirements.txt
new file mode 100644
index 00000000..5873a222
--- /dev/null
+++ b/frontend/core/pipelines/pipeline-text-to-game/new-python-i3a2bb98agbh/requirements.txt
@@ -0,0 +1 @@
+Pillow
\ No newline at end of file
diff --git a/frontend/core/pipelines/pipeline-text-to-game/new-python-i3a2bb98agbh/small_cute_cat.png b/frontend/core/pipelines/pipeline-text-to-game/new-python-i3a2bb98agbh/small_cute_cat.png
new file mode 100644
index 00000000..c5c397d3
Binary files /dev/null and b/frontend/core/pipelines/pipeline-text-to-game/new-python-i3a2bb98agbh/small_cute_cat.png differ
diff --git a/frontend/core/pipelines/pipeline-text-to-game/new-python-i3a2bb98agbh/specs.json b/frontend/core/pipelines/pipeline-text-to-game/new-python-i3a2bb98agbh/specs.json
new file mode 100644
index 00000000..9178caef
--- /dev/null
+++ b/frontend/core/pipelines/pipeline-text-to-game/new-python-i3a2bb98agbh/specs.json
@@ -0,0 +1,52 @@
+{
+  "information": {
+    "id": "new-python",
+    "name": "Images Block",
+    "description": "List all image files in the current directory, rename them by appending 'img_' in front, and save them with the same name. Return the filenames of the renamed files.",
+    "system_versions": [
+      "0.1"
+    ],
+    "block_version": "block version number",
+    "block_source": "core/blocks/new-python",
+    "block_type": "compute"
+  },
+  "inputs": {},
+  "outputs": {
+    "image_files": {
+      "type": "Any",
+      "connections": []
+    }
+  },
+  "action": {
+    "container": {
+      "image": "new-python",
+      "version": "new-python-i3a02bb938agbh",
+      "command_line": [
+        "python",
+        "-u",
+        "entrypoint.py"
+      ]
+    }
+  },
+  "views": {
+    "node": {
+      "active": "True or False",
+      "title_bar": {
+        "background_color": "#6b2be0"
+      },
+      "preview": {},
+      "html": "",
+      "pos_x": 0,
+      "pos_y": 0,
+      "pos_z": "999",
+      "behavior": "modal",
+      "order": {
+        "input": [],
+        "output": [
+          "image_files"
+        ]
+      }
+    }
+  },
+  "events": {}
+}
\ No newline at end of file
diff --git a/frontend/core/pipelines/pipeline-text-to-game/openai-agent-1-tuo6ndtm42rc/Dockerfile b/frontend/core/pipelines/pipeline-text-to-game/openai-agent-1-tuo6ndtm42rc/Dockerfile
new file mode 100644
index 00000000..83464ec2
--- /dev/null
+++ b/frontend/core/pipelines/pipeline-text-to-game/openai-agent-1-tuo6ndtm42rc/Dockerfile
@@ -0,0 +1,9 @@
+FROM python:3.10-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY computations.py .
diff --git a/frontend/core/pipelines/pipeline-text-to-game/openai-agent-1-tuo6ndtm42rc/computations.py b/frontend/core/pipelines/pipeline-text-to-game/openai-agent-1-tuo6ndtm42rc/computations.py
new file mode 100644
index 00000000..665c7dfc
--- /dev/null
+++ b/frontend/core/pipelines/pipeline-text-to-game/openai-agent-1-tuo6ndtm42rc/computations.py
@@ -0,0 +1,43 @@
+from openai import OpenAI
+import re
+import json
+
+def compute(prompt, api_key):
+    """
+    Communicates with the OpenAI API to generate a completion based on the given role and prompt.
+
+    Args:
+        role (str): The role of the system for the chat model (e.g., "You are a copywriter...").
+        prompt (str): The prompt to be provided to the user in the chat model.
+        api_key (str): The API key to authenticate with the OpenAI API.
+
+    Returns:
+        str: The content of the generated response from the OpenAI API.
+    """
+  
+    role = """You are an assistant that takes a user input text and generates a detailed textual description of a web application (e.g., tool) without code. 
+    Importantly, give only a textual description, no code should be given.
+
+    Note that this web application needs to be in one index.html file without a backend. 
+    You need to describe the application, 
+    give all the components of the application along with technical description and 
+    describe the application dynamics and outline of how to implement it.
+    """
+  
+    client = OpenAI(api_key=api_key)
+    completion = client.chat.completions.create(
+        model="gpt-4o",
+        messages=[
+            {"role": "system", "content": role},
+            {"role": "user", "content": prompt}
+        ],
+        temperature=0.1
+    )
+  
+    # Extract the response content
+    response_content = completion.choices[0].message.content
+    
+    return {"response": response_content}
+
+def test():
+    """Test the compute function."""
diff --git a/frontend/core/pipelines/pipeline-text-to-game/openai-agent-1-tuo6ndtm42rc/cover-image.png b/frontend/core/pipelines/pipeline-text-to-game/openai-agent-1-tuo6ndtm42rc/cover-image.png
new file mode 100644
index 00000000..02aa6d60
Binary files /dev/null and b/frontend/core/pipelines/pipeline-text-to-game/openai-agent-1-tuo6ndtm42rc/cover-image.png differ
diff --git a/frontend/core/pipelines/pipeline-text-to-game/openai-agent-1-tuo6ndtm42rc/requirements.txt b/frontend/core/pipelines/pipeline-text-to-game/openai-agent-1-tuo6ndtm42rc/requirements.txt
new file mode 100644
index 00000000..9ff727d7
--- /dev/null
+++ b/frontend/core/pipelines/pipeline-text-to-game/openai-agent-1-tuo6ndtm42rc/requirements.txt
@@ -0,0 +1 @@
+openai==1.34.0
diff --git a/frontend/core/pipelines/pipeline-text-to-game/openai-agent-1-tuo6ndtm42rc/specs.json b/frontend/core/pipelines/pipeline-text-to-game/openai-agent-1-tuo6ndtm42rc/specs.json
new file mode 100644
index 00000000..2f0599c8
--- /dev/null
+++ b/frontend/core/pipelines/pipeline-text-to-game/openai-agent-1-tuo6ndtm42rc/specs.json
@@ -0,0 +1,80 @@
+{
+  "information": {
+    "id": "openai-agent-1",
+    "name": "OpenAI Agent",
+    "description": "Communicates with the OpenAI API to generate a completion based on the given role and prompt.\n\nArgs:\n    role (str): The role of the system for the chat model (e.g., \"You are a copywriter...\").\n    prompt (str): The prompt to be provided to the user in the chat model.\n    api_key (str): The API key to authenticate with the OpenAI API.\n\nReturns:\n    str: The content of the generated response from the OpenAI API.",
+    "system_versions": [
+      "0.1"
+    ],
+    "block_version": "block version number",
+    "block_source": "",
+    "block_type": "compute"
+  },
+  "inputs": {
+    "prompt": {
+      "type": "Any",
+      "connections": [
+        {
+          "block": "text-n4mzvwd9a94p",
+          "variable": "text"
+        }
+      ]
+    },
+    "api_key": {
+      "type": "Any",
+      "connections": [
+        {
+          "block": "password-cra270gb0hn0",
+          "variable": "password"
+        }
+      ]
+    }
+  },
+  "outputs": {
+    "response": {
+      "type": "Any",
+      "connections": [
+        {
+          "block": "text-as-html-ttf7h7l5j6rb",
+          "variable": "data_view"
+        },
+        {
+          "block": "text-to-html-app-r6kt1w8j4zfy",
+          "variable": "prompt"
+        }
+      ]
+    }
+  },
+  "action": {
+    "container": {
+      "image": "openai-agent-1",
+      "version": "openai-agent-1-tuo6ndtm42rc",
+      "command_line": [
+        "python",
+        "entrypoint.py"
+      ]
+    }
+  },
+  "views": {
+    "node": {
+      "active": "True",
+      "title_bar": {},
+      "preview": {},
+      "html": "",
+      "pos_x": "613",
+      "pos_y": "371",
+      "pos_z": "999",
+      "behavior": "modal",
+      "order": {
+        "input": [
+          "prompt",
+          "api_key"
+        ],
+        "output": [
+          "response"
+        ]
+      }
+    }
+  },
+  "events": {}
+}
\ No newline at end of file
diff --git a/frontend/core/pipelines/pipeline-text-to-game/pipeline.json b/frontend/core/pipelines/pipeline-text-to-game/pipeline.json
new file mode 100644
index 00000000..59739158
--- /dev/null
+++ b/frontend/core/pipelines/pipeline-text-to-game/pipeline.json
@@ -0,0 +1,505 @@
+{
+  "pipeline": {
+    "password-cra270gb0hn0": {
+      "information": {
+        "id": "password",
+        "name": "Password",
+        "description": "Password block parameter input.",
+        "system_versions": ["0.1"],
+        "block_version": "0.1",
+        "block_source": "core/blocks",
+        "block_type": "entry"
+      },
+      "inputs": {},
+      "outputs": {
+        "password": {
+          "type": "Any",
+          "connections": [
+            {
+              "block": "openai-agent-1-tuo6ndtm42rc",
+              "variable": "api_key"
+            },
+            {
+              "block": "text-to-html-app-r6kt1w8j4zfy",
+              "variable": "api_key"
+            },
+            {
+              "block": "interface-maker-ool7kd5xa3sw",
+              "variable": "api_key"
+            }
+          ]
+        }
+      },
+      "action": {
+        "container": {
+          "image": "",
+          "version": "",
+          "command_line": []
+        },
+        "parameters": {
+          "password": {
+            "value": "",
+            "type": "Any"
+          }
+        }
+      },
+      "views": {
+        "node": {
+          "active": "true",
+          "title_bar": {
+            "background_color": "#909090"
+          },
+          "preview": {},
+          "html": "<textarea style='width: 100%; height: 150px;' parameters-password></textarea>",
+          "pos_x": "112",
+          "pos_y": "546",
+          "pos_z": "999, this is the z-index for 2D canvas",
+          "order": {
+            "input": [],
+            "output": ["password"]
+          }
+        }
+      },
+      "events": {}
+    },
+    "interface-maker-ool7kd5xa3sw": {
+      "information": {
+        "id": "interface-maker",
+        "name": "Interface Maker",
+        "description": "Tool to generate HTML apps interfaces using the OpenAI API.\n\nInputs:\n    api_key (str): API key to be included in the generated HTML page.\n    initial_content (str): Initial HTML content to be embedded in the generated HTML page.\n    image_paths (list): List of image paths to be included and saved locally.\n\nOutputs:\n    dict: A dictionary with the key 'html' and the value being the name of the generated HTML file.",
+        "system_versions": ["0.1"],
+        "block_version": "1.0",
+        "block_source": "",
+        "block_type": "view"
+      },
+      "inputs": {
+        "initial_content": {
+          "type": "Any",
+          "connections": [
+            {
+              "block": "text-to-html-app-r6kt1w8j4zfy",
+              "variable": "content"
+            }
+          ]
+        },
+        "api_key": {
+          "type": "Any",
+          "connections": [
+            {
+              "block": "password-cra270gb0hn0",
+              "variable": "password"
+            }
+          ]
+        },
+        "image_paths": {
+          "type": "Any",
+          "connections": [
+            {
+              "block": "new-python-i3a2bb98agbh",
+              "variable": "image_files"
+            }
+          ]
+        }
+      },
+      "outputs": {
+        "html": {
+          "type": "Any",
+          "connections": []
+        }
+      },
+      "action": {
+        "container": {
+          "image": "interface-maker",
+          "version": "interface-maker-ool7kd5xda3sw",
+          "command_line": ["python", "entrypoint.py"]
+        }
+      },
+      "views": {
+        "node": {
+          "active": "true",
+          "title_bar": {
+            "background_color": "#0099ff"
+          },
+          "preview": {
+            "active": "true"
+          },
+          "html": "",
+          "pos_x": "2051",
+          "pos_y": "635",
+          "pos_z": "999",
+          "order": {
+            "input": ["initial_content", "api_key", "image_paths"],
+            "output": ["html"]
+          }
+        },
+        "mode": "modal"
+      },
+      "events": {}
+    },
+    "text-to-html-app-r6kt1w8j4zfy": {
+      "information": {
+        "id": "text-to-html-app",
+        "name": "Text to HTML App",
+        "description": "Communicates with the OpenAI API to generate an HTML page based on the given prompt and accessible assets.\n\nArgs:\n    prompt (str): The detailed description for the application to be built.\n    api_key (str): The API key to authenticate with the OpenAI API.\n\nReturns:\n    dict: A dictionary containing the generated HTML page.",
+        "system_versions": ["0.1"],
+        "block_version": "block version number",
+        "block_source": "",
+        "block_type": "compute"
+      },
+      "inputs": {
+        "prompt": {
+          "type": "Any",
+          "connections": [
+            {
+              "block": "openai-agent-1-tuo6ndtm42rc",
+              "variable": "response"
+            }
+          ]
+        },
+        "api_key": {
+          "type": "Any",
+          "connections": [
+            {
+              "block": "password-cra270gb0hn0",
+              "variable": "password"
+            }
+          ]
+        }
+      },
+      "outputs": {
+        "htlm": {
+          "type": "Any",
+          "connections": [
+            {
+              "block": "view-html-8qh8d7kxxrph",
+              "variable": "html_path"
+            }
+          ]
+        },
+        "content": {
+          "type": "Any",
+          "connections": [
+            {
+              "block": "interface-maker-ool7kd5xa3sw",
+              "variable": "initial_content"
+            }
+          ]
+        }
+      },
+      "action": {
+        "container": {
+          "image": "text-to-html-app",
+          "version": "text-to-html-app-rd6kt1w8j4zfy",
+          "command_line": ["python", "entrypoint.py"]
+        }
+      },
+      "views": {
+        "node": {
+          "active": "True",
+          "title_bar": {},
+          "preview": {},
+          "html": "",
+          "pos_x": "1330",
+          "pos_y": "414",
+          "pos_z": "999",
+          "behavior": "modal",
+          "order": {
+            "input": ["prompt", "api_key"],
+            "output": ["htlm", "content"]
+          }
+        }
+      },
+      "events": {}
+    },
+    "openai-agent-1-tuo6ndtm42rc": {
+      "information": {
+        "id": "openai-agent-1",
+        "name": "OpenAI Agent",
+        "description": "Communicates with the OpenAI API to generate a completion based on the given role and prompt.\n\nArgs:\n    role (str): The role of the system for the chat model (e.g., \"You are a copywriter...\").\n    prompt (str): The prompt to be provided to the user in the chat model.\n    api_key (str): The API key to authenticate with the OpenAI API.\n\nReturns:\n    str: The content of the generated response from the OpenAI API.",
+        "system_versions": ["0.1"],
+        "block_version": "block version number",
+        "block_source": "",
+        "block_type": "compute"
+      },
+      "inputs": {
+        "prompt": {
+          "type": "Any",
+          "connections": [
+            {
+              "block": "text-n4mzvwd9a94p",
+              "variable": "text"
+            }
+          ]
+        },
+        "api_key": {
+          "type": "Any",
+          "connections": [
+            {
+              "block": "password-cra270gb0hn0",
+              "variable": "password"
+            }
+          ]
+        }
+      },
+      "outputs": {
+        "response": {
+          "type": "Any",
+          "connections": [
+            {
+              "block": "text-as-html-ttf7h7l5j6rb",
+              "variable": "data_view"
+            },
+            {
+              "block": "text-to-html-app-r6kt1w8j4zfy",
+              "variable": "prompt"
+            }
+          ]
+        }
+      },
+      "action": {
+        "container": {
+          "image": "openai-agent-1",
+          "version": "openai-agent-1-tuo6ndtm42rc",
+          "command_line": ["python", "entrypoint.py"]
+        }
+      },
+      "views": {
+        "node": {
+          "active": "True",
+          "title_bar": {},
+          "preview": {},
+          "html": "",
+          "pos_x": "613",
+          "pos_y": "371",
+          "pos_z": "999",
+          "behavior": "modal",
+          "order": {
+            "input": ["prompt", "api_key"],
+            "output": ["response"]
+          }
+        }
+      },
+      "events": {}
+    },
+    "view-html-8qh8d7kxxrph": {
+      "information": {
+        "id": "view-html",
+        "name": "View HTML",
+        "description": "Display the input HTML page.\n\nInputs:\n    html_path: Path to the HTML file to be displayed.\n\nOutputs:\n    dict: A dictionary with the key 'html' and the value being the name of the generated HTML file.",
+        "system_versions": ["0.1"],
+        "block_version": "1.0",
+        "block_source": "core/blocks/view-html",
+        "block_type": "view"
+      },
+      "inputs": {
+        "html_path": {
+          "type": "Any",
+          "connections": [
+            {
+              "block": "text-to-html-app-r6kt1w8j4zfy",
+              "variable": "htlm"
+            }
+          ]
+        }
+      },
+      "outputs": {
+        "html": {
+          "type": "Any",
+          "connections": []
+        }
+      },
+      "action": {
+        "container": {
+          "image": "view-html",
+          "version": "view-html-8qh8d7kxxrph",
+          "command_line": ["python", "entrypoint.py"]
+        }
+      },
+      "views": {
+        "node": {
+          "active": "true",
+          "title_bar": {
+            "background_color": "#0099ff"
+          },
+          "preview": {
+            "active": "true"
+          },
+          "html": "",
+          "pos_x": "1784",
+          "pos_y": "260",
+          "pos_z": "999",
+          "order": {
+            "input": ["html_path"],
+            "output": ["html"]
+          }
+        },
+        "mode": "modal"
+      },
+      "events": {}
+    },
+    "text-as-html-ttf7h7l5j6rb": {
+      "information": {
+        "id": "text-as-html",
+        "name": "Text as HTML",
+        "description": "Generates an HTML file that displays the provided data and returns the file name.\n\nThis function takes a string, dictionary, or list of dictionaries and generates\nan HTML file to visually present the data. The generated HTML file is saved with\na unique name to avoid conflicts. The HTML content includes styling and scripts\nto format the data for better readability.\n\nParameters:\ndata_view (str, dict, or list): The data to be displayed in the gallery. It can be:\n    - A single string\n    - A single dictionary\n    - A list of strings or dictionaries\n\nReturns:\ndict: A dictionary containing the key 'html' with the value being the name of the\ngenerated HTML file.",
+        "system_versions": ["0.1"],
+        "block_version": "block version number",
+        "block_source": "core/blocks/text-as-html",
+        "block_type": "view"
+      },
+      "inputs": {
+        "data_view": {
+          "type": "Any",
+          "connections": [
+            {
+              "block": "openai-agent-1-tuo6ndtm42rc",
+              "variable": "response"
+            }
+          ]
+        }
+      },
+      "outputs": {
+        "html": {
+          "type": "Any",
+          "connections": []
+        }
+      },
+      "action": {
+        "container": {
+          "image": "text-as-html",
+          "version": "text-as-html-ttf7h7l5j6rb",
+          "command_line": ["python", "entrypoint.py"]
+        }
+      },
+      "views": {
+        "node": {
+          "active": "True",
+          "title_bar": {
+            "background_color": "#D55908"
+          },
+          "preview": {
+            "active": "true"
+          },
+          "html": "",
+          "pos_x": "989",
+          "pos_y": "258",
+          "pos_z": "999, this is the z-index for 2D canvas",
+          "order": {
+            "input": ["data_view"],
+            "output": ["html"]
+          }
+        },
+        "mode": "modal"
+      },
+      "events": {}
+    },
+    "text-n4mzvwd9a94p": {
+      "information": {
+        "id": "text",
+        "name": "Text",
+        "description": "Text block parameter input.",
+        "system_versions": ["0.1"],
+        "block_version": "0.1",
+        "block_source": "core/blocks",
+        "block_type": "entry"
+      },
+      "inputs": {},
+      "outputs": {
+        "text": {
+          "type": "str",
+          "connections": [
+            {
+              "block": "openai-agent-1-tuo6ndtm42rc",
+              "variable": "prompt"
+            }
+          ]
+        }
+      },
+      "action": {
+        "container": {
+          "image": "",
+          "version": "",
+          "command_line": []
+        },
+        "parameters": {
+          "text": {
+            "value": "",
+            "type": "str"
+          }
+        }
+      },
+      "views": {
+        "node": {
+          "active": "true",
+          "title_bar": {
+            "background_color": "#909090"
+          },
+          "preview": {},
+          "html": "<textarea style='width: 100%; height: 150px;' parameters-text></textarea>",
+          "pos_x": "31",
+          "pos_y": "146",
+          "pos_z": "999, this is the z-index for 2D canvas",
+          "order": {
+            "input": [],
+            "output": ["text"]
+          }
+        }
+      },
+      "events": {}
+    },
+    "new-python-i3a2bb98agbh": {
+      "information": {
+        "id": "new-python",
+        "name": "Images Block",
+        "description": "List all image files in the current directory, rename them by appending 'img_' in front, and save them with the same name. Return the filenames of the renamed files.",
+        "system_versions": ["0.1"],
+        "block_version": "block version number",
+        "block_source": "core/blocks/new-python",
+        "block_type": "compute"
+      },
+      "inputs": {},
+      "outputs": {
+        "image_files": {
+          "type": "Any",
+          "connections": [
+            {
+              "block": "interface-maker-ool7kd5xa3sw",
+              "variable": "image_paths"
+            }
+          ]
+        }
+      },
+      "action": {
+        "container": {
+          "image": "new-python",
+          "version": "new-python-i3a02bb938agbh",
+          "command_line": ["python", "-u", "entrypoint.py"]
+        }
+      },
+      "views": {
+        "node": {
+          "active": "True or False",
+          "title_bar": {
+            "background_color": "#6b2be0"
+          },
+          "preview": {},
+          "html": "",
+          "pos_x": "1585",
+          "pos_y": "806",
+          "pos_z": "999",
+          "behavior": "modal",
+          "order": {
+            "input": [],
+            "output": ["image_files"]
+          }
+        }
+      },
+      "events": {}
+    }
+  },
+  "sink": "",
+  "build": "",
+  "name": "text-to-game",
+  "id": "pipeline-2l3k4j5m6n7o",
+  "description": "Pipeline to generate a fully frontend game, given prompt and accessible assets. Note: make sure to encapsulate the API key in quotes."
+}
diff --git a/frontend/core/pipelines/pipeline-text-to-game/text-as-html-ttf7h7l5j6rb/Dockerfile b/frontend/core/pipelines/pipeline-text-to-game/text-as-html-ttf7h7l5j6rb/Dockerfile
new file mode 100644
index 00000000..f933f667
--- /dev/null
+++ b/frontend/core/pipelines/pipeline-text-to-game/text-as-html-ttf7h7l5j6rb/Dockerfile
@@ -0,0 +1,9 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY computations.py .
diff --git a/frontend/core/pipelines/pipeline-text-to-game/text-as-html-ttf7h7l5j6rb/computations.py b/frontend/core/pipelines/pipeline-text-to-game/text-as-html-ttf7h7l5j6rb/computations.py
new file mode 100644
index 00000000..59d8ef8b
--- /dev/null
+++ b/frontend/core/pipelines/pipeline-text-to-game/text-as-html-ttf7h7l5j6rb/computations.py
@@ -0,0 +1,120 @@
+import json
+import uuid
+
+def compute(data_view):
+    """Generates an HTML file that displays the provided data and returns the file name.
+
+    This function takes a string, dictionary, or list of dictionaries and generates
+    an HTML file to visually present the data. The generated HTML file is saved with
+    a unique name to avoid conflicts. The HTML content includes styling and scripts
+    to format the data for better readability.
+
+    Parameters:
+    data_view (str, dict, or list): The data to be displayed in the gallery. It can be:
+        - A single string
+        - A single dictionary
+        - A list of strings or dictionaries
+
+    Returns:
+    dict: A dictionary containing the key 'html' with the value being the name of the
+    generated HTML file.
+    """
+
+    html_template = """
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>Data Gallery</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+    <style>
+        body {
+            margin: 30px;
+            font-size: 16px;
+            font-family: 'Roboto';
+        }
+
+        .data-item {
+            margin: 10px;
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            background-color: #f8f8f8;
+            white-space: pre-wrap; /* Maintains whitespace formatting */
+            overflow-wrap: break-word; /* Ensures long text breaks and wraps to next line */
+        }
+    </style>
+</head>
+<body>
+    <div id="data_gallery" class="gallery"></div>
+    <script>
+        $(document).ready(function(){
+            const data = $data_paths;
+
+            console.log('Data', data)
+
+            var galleryElement = $('#data_gallery');
+            galleryElement.empty();
+
+            data.forEach(function (item) {
+                var $newDataItem = $('<div class="data-item"></div>');
+                $newDataItem.html(formatTextAsHTML(item));
+                galleryElement.append($newDataItem);
+            });
+        });
+
+        function formatTextAsHTML(text) {
+            if (typeof text === 'string') {
+                // Replace newlines with <br> and handle basic HTML escaping
+                return text
+                    .replace(/&/g, '&amp;')
+                    .replace(/</g, '&lt;')
+                    .replace(/>/g, '&gt;')
+                    .replace(/\\n/g, '<br>');
+            } else {
+                // For non-string data, convert to JSON string
+                return JSON.stringify(text, null, 4)
+                    .replace(/&/g, '&amp;')
+                    .replace(/</g, '&lt;')
+                    .replace(/>/g, '&gt;')
+                    .replace(/\\n/g, '<br>');
+            }
+        }
+    </script>
+</body>
+</html>
+    """
+    # Ensure data_view is always a list
+    if isinstance(data_view, (str, dict)):
+        data_view = [data_view]
+
+    unique_id = str(uuid.uuid4())
+    html_path = f"/files/data_viz_{unique_id}.html"
+    data_view_str = json.dumps(data_view, indent=4)  # Properly escape JSON for embedding in JavaScript
+    html_code = html_template.replace("$data_paths", json.dumps(data_view))
+
+    # Write the file
+    with open(html_path, "w") as file:
+        file.write(html_code)
+
+    return {"html": f"data_viz_{unique_id}.html"}
+
+def test():
+    """Test the compute function with various data types and print the test cases and their results."""
+    test_cases = [
+        "Single string\nwith newline",
+        ["List", "of\nstrings"],
+        {"name": "Alice", "age": 30},
+        [{"name": "Bob", "age": 25}, {"name": "Charlie", "age": 35}],
+        json.dumps({"name": "Dave", "age": 40}),
+        [json.dumps({"name": "Eve", "age": 45}), json.dumps({"name": "Frank", "age": 50})]
+    ]
+
+    for i, case in enumerate(test_cases):
+        result = compute(case)
+        print(f"Test case {i+1}: Input - {case}")
+        print(f"Result: {result}\n")
diff --git a/frontend/core/pipelines/pipeline-text-to-game/text-as-html-ttf7h7l5j6rb/cover-image.png b/frontend/core/pipelines/pipeline-text-to-game/text-as-html-ttf7h7l5j6rb/cover-image.png
new file mode 100644
index 00000000..c3064a9e
Binary files /dev/null and b/frontend/core/pipelines/pipeline-text-to-game/text-as-html-ttf7h7l5j6rb/cover-image.png differ
diff --git a/frontend/core/pipelines/pipeline-text-to-game/text-as-html-ttf7h7l5j6rb/requirements.txt b/frontend/core/pipelines/pipeline-text-to-game/text-as-html-ttf7h7l5j6rb/requirements.txt
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/core/pipelines/pipeline-text-to-game/text-as-html-ttf7h7l5j6rb/specs.json b/frontend/core/pipelines/pipeline-text-to-game/text-as-html-ttf7h7l5j6rb/specs.json
new file mode 100644
index 00000000..95a21e7d
--- /dev/null
+++ b/frontend/core/pipelines/pipeline-text-to-game/text-as-html-ttf7h7l5j6rb/specs.json
@@ -0,0 +1,65 @@
+{
+  "information": {
+    "id": "text-as-html",
+    "name": "Text as HTML",
+    "description": "Generates an HTML file that displays the provided data and returns the file name.\n\nThis function takes a string, dictionary, or list of dictionaries and generates\nan HTML file to visually present the data. The generated HTML file is saved with\na unique name to avoid conflicts. The HTML content includes styling and scripts\nto format the data for better readability.\n\nParameters:\ndata_view (str, dict, or list): The data to be displayed in the gallery. It can be:\n    - A single string\n    - A single dictionary\n    - A list of strings or dictionaries\n\nReturns:\ndict: A dictionary containing the key 'html' with the value being the name of the\ngenerated HTML file.",
+    "system_versions": [
+      "0.1"
+    ],
+    "block_version": "block version number",
+    "block_source": "core/blocks/text-as-html",
+    "block_type": "view"
+  },
+  "inputs": {
+    "data_view": {
+      "type": "Any",
+      "connections": [
+        {
+          "block": "openai-agent-1-tuo6ndtm42rc",
+          "variable": "response"
+        }
+      ]
+    }
+  },
+  "outputs": {
+    "html": {
+      "type": "Any",
+      "connections": []
+    }
+  },
+  "action": {
+    "container": {
+      "image": "text-as-html",
+      "version": "text-as-html-ttf7h7l5j6rb",
+      "command_line": [
+        "python",
+        "entrypoint.py"
+      ]
+    }
+  },
+  "views": {
+    "node": {
+      "active": "True",
+      "title_bar": {
+        "background_color": "#D55908"
+      },
+      "preview": {
+        "active": "true"
+      },
+      "html": "",
+      "pos_x": "989",
+      "pos_y": "258",
+      "pos_z": "999, this is the z-index for 2D canvas",
+      "order": {
+        "input": [
+          "data_view"
+        ],
+        "output": [
+          "html"
+        ]
+      }
+    },
+    "mode": "modal"
+  },
+  "events": {}
+}
\ No newline at end of file
diff --git a/frontend/core/pipelines/pipeline-text-to-game/text-to-html-app-r6kt1w8j4zfy/Dockerfile b/frontend/core/pipelines/pipeline-text-to-game/text-to-html-app-r6kt1w8j4zfy/Dockerfile
new file mode 100644
index 00000000..83464ec2
--- /dev/null
+++ b/frontend/core/pipelines/pipeline-text-to-game/text-to-html-app-r6kt1w8j4zfy/Dockerfile
@@ -0,0 +1,9 @@
+FROM python:3.10-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY computations.py .
diff --git a/frontend/core/pipelines/pipeline-text-to-game/text-to-html-app-r6kt1w8j4zfy/computations.py b/frontend/core/pipelines/pipeline-text-to-game/text-to-html-app-r6kt1w8j4zfy/computations.py
new file mode 100644
index 00000000..135d5b7f
--- /dev/null
+++ b/frontend/core/pipelines/pipeline-text-to-game/text-to-html-app-r6kt1w8j4zfy/computations.py
@@ -0,0 +1,72 @@
+from openai import OpenAI
+import re
+
+def compute(prompt, api_key):
+    """
+    Communicates with the OpenAI API to generate an HTML page based on the given prompt and accessible assets.
+
+    Args:
+        prompt (str): The detailed description for the application to be built.
+        api_key (str): The API key to authenticate with the OpenAI API.
+
+    Returns:
+        dict: A dictionary containing the generated HTML page.
+    """
+  
+    role = """You are an assistant that generates a full HTML page based on user input. All the code should be in one HTML page and use CDN. 
+    Insert in the head ld+json metadata describing the application in a way that follows the exact example template below.
+    Example for a photo editor application:
+    <script type="application/ld+json">{
+        "@context": "http://schema.org",
+        "@type": "WebPage",
+        "name": "Photo Editor Tool",
+        "description": "A simple photo editing tool.",
+        "category": "Tools",
+        "keywords": [
+            "Photo",
+            "Editor",
+            "Image"
+        ],
+        "creator": {
+            "@type": "Person",
+            "name": "Zetane"
+        }
+    }</script>"""
+    
+    print(role)
+
+    preamble = """Build an application based on the following detailed description and use web icons such as font awesome instead of images. 
+    Resize the images accordingly based on what they are and be sized to fit the canvas. 
+    Be careful about flex and positions.
+    Stretch the canvas to the parent.
+    Do not use alerts.
+    Importantly, implement all features and functionalities.\n\n"""
+
+    prompt_to_send = preamble + prompt
+
+    client = OpenAI(api_key=api_key)
+    completion = client.chat.completions.create(
+        model="gpt-4o",
+        messages=[
+            {"role": "system", "content": role},
+            {"role": "user", "content": prompt}
+        ],
+        temperature=0.0
+    )
+  
+    # Extract the response content
+    response_content = completion.choices[0].message.content
+    print(response_content)
+    
+    # Find the HTML content in the response
+    html_match = re.search(r'```html\n(.*?)\n```', response_content, re.DOTALL)
+
+    file_path = 'generated_app.html'
+    with open(file_path, 'w', encoding='utf-8') as file:
+        file.write(html_match.group(1))
+    print(f"File saved at: {file_path}")
+    
+    return {"htlm": file_path, "content": html_match.group(1)}
+
+def test():
+    """Test the compute function."""
diff --git a/frontend/core/pipelines/pipeline-text-to-game/text-to-html-app-r6kt1w8j4zfy/requirements.txt b/frontend/core/pipelines/pipeline-text-to-game/text-to-html-app-r6kt1w8j4zfy/requirements.txt
new file mode 100644
index 00000000..9ff727d7
--- /dev/null
+++ b/frontend/core/pipelines/pipeline-text-to-game/text-to-html-app-r6kt1w8j4zfy/requirements.txt
@@ -0,0 +1 @@
+openai==1.34.0
diff --git a/frontend/core/pipelines/pipeline-text-to-game/text-to-html-app-r6kt1w8j4zfy/specs.json b/frontend/core/pipelines/pipeline-text-to-game/text-to-html-app-r6kt1w8j4zfy/specs.json
new file mode 100644
index 00000000..8799d0e8
--- /dev/null
+++ b/frontend/core/pipelines/pipeline-text-to-game/text-to-html-app-r6kt1w8j4zfy/specs.json
@@ -0,0 +1,86 @@
+{
+  "information": {
+    "id": "text-to-html-app",
+    "name": "Text to HTML App",
+    "description": "Communicates with the OpenAI API to generate an HTML page based on the given prompt and accessible assets.\n\nArgs:\n    prompt (str): The detailed description for the application to be built.\n    api_key (str): The API key to authenticate with the OpenAI API.\n\nReturns:\n    dict: A dictionary containing the generated HTML page.",
+    "system_versions": [
+      "0.1"
+    ],
+    "block_version": "block version number",
+    "block_source": "",
+    "block_type": "compute"
+  },
+  "inputs": {
+    "prompt": {
+      "type": "Any",
+      "connections": [
+        {
+          "block": "openai-agent-1-tuo6ndtm42rc",
+          "variable": "response"
+        }
+      ]
+    },
+    "api_key": {
+      "type": "Any",
+      "connections": [
+        {
+          "block": "password-cra270gb0hn0",
+          "variable": "password"
+        }
+      ]
+    }
+  },
+  "outputs": {
+    "htlm": {
+      "type": "Any",
+      "connections": [
+        {
+          "block": "view-html-8qh8d7kxxrph",
+          "variable": "html_path"
+        }
+      ]
+    },
+    "content": {
+      "type": "Any",
+      "connections": [
+        {
+          "block": "interface-maker-ool7kd5xa3sw",
+          "variable": "initial_content"
+        }
+      ]
+    }
+  },
+  "action": {
+    "container": {
+      "image": "text-to-html-app",
+      "version": "text-to-html-app-rd6kt1w8j4zfy",
+      "command_line": [
+        "python",
+        "entrypoint.py"
+      ]
+    }
+  },
+  "views": {
+    "node": {
+      "active": "True",
+      "title_bar": {},
+      "preview": {},
+      "html": "",
+      "pos_x": "1330",
+      "pos_y": "414",
+      "pos_z": "999",
+      "behavior": "modal",
+      "order": {
+        "input": [
+          "prompt",
+          "api_key"
+        ],
+        "output": [
+          "htlm",
+          "content"
+        ]
+      }
+    }
+  },
+  "events": {}
+}
\ No newline at end of file
diff --git a/frontend/core/pipelines/pipeline-text-to-game/view-html-8qh8d7kxxrph/Dockerfile b/frontend/core/pipelines/pipeline-text-to-game/view-html-8qh8d7kxxrph/Dockerfile
new file mode 100644
index 00000000..7f29ac11
--- /dev/null
+++ b/frontend/core/pipelines/pipeline-text-to-game/view-html-8qh8d7kxxrph/Dockerfile
@@ -0,0 +1,7 @@
+FROM python:3.9
+
+WORKDIR /app
+
+COPY . .
+
+RUN pip install --no-cache-dir -r requirements.txt
diff --git a/frontend/core/pipelines/pipeline-text-to-game/view-html-8qh8d7kxxrph/computations.py b/frontend/core/pipelines/pipeline-text-to-game/view-html-8qh8d7kxxrph/computations.py
new file mode 100644
index 00000000..bea231d9
--- /dev/null
+++ b/frontend/core/pipelines/pipeline-text-to-game/view-html-8qh8d7kxxrph/computations.py
@@ -0,0 +1,28 @@
+import uuid
+
+def compute(html_path):
+    """Display the input HTML page.
+
+    Inputs:
+        html_path: Path to the HTML file to be displayed.
+
+    Outputs:
+        dict: A dictionary with the key 'html' and the value being the name of the generated HTML file.
+    """
+
+    # Load the HTML template
+    with open(html_path, 'r') as file:
+        html_content = file.read()
+
+    # Write the file
+    unique_id = str(uuid.uuid4())
+    html_path = f"/files/viz_{unique_id}.html"
+
+    with open(html_path, "w") as file:
+        file.write(html_content)
+
+    return {"html": f"viz_{unique_id}.html"}
+
+def test():
+    """Test the compute function."""
+    print("Running test")
diff --git a/frontend/core/pipelines/pipeline-text-to-game/view-html-8qh8d7kxxrph/requirements.txt b/frontend/core/pipelines/pipeline-text-to-game/view-html-8qh8d7kxxrph/requirements.txt
new file mode 100644
index 00000000..99a80913
--- /dev/null
+++ b/frontend/core/pipelines/pipeline-text-to-game/view-html-8qh8d7kxxrph/requirements.txt
@@ -0,0 +1,2 @@
+
+
diff --git a/frontend/core/pipelines/pipeline-text-to-game/view-html-8qh8d7kxxrph/specs.json b/frontend/core/pipelines/pipeline-text-to-game/view-html-8qh8d7kxxrph/specs.json
new file mode 100644
index 00000000..cf0589c1
--- /dev/null
+++ b/frontend/core/pipelines/pipeline-text-to-game/view-html-8qh8d7kxxrph/specs.json
@@ -0,0 +1,65 @@
+{
+  "information": {
+    "id": "view-html",
+    "name": "View HTML",
+    "description": "Display the input HTML page.\n\nInputs:\n    html_path: Path to the HTML file to be displayed.\n\nOutputs:\n    dict: A dictionary with the key 'html' and the value being the name of the generated HTML file.",
+    "system_versions": [
+      "0.1"
+    ],
+    "block_version": "1.0",
+    "block_source": "core/blocks/view-html",
+    "block_type": "view"
+  },
+  "inputs": {
+    "html_path": {
+      "type": "Any",
+      "connections": [
+        {
+          "block": "text-to-html-app-r6kt1w8j4zfy",
+          "variable": "htlm"
+        }
+      ]
+    }
+  },
+  "outputs": {
+    "html": {
+      "type": "Any",
+      "connections": []
+    }
+  },
+  "action": {
+    "container": {
+      "image": "view-html",
+      "version": "view-html-8qh8d7kxxrph",
+      "command_line": [
+        "python",
+        "entrypoint.py"
+      ]
+    }
+  },
+  "views": {
+    "node": {
+      "active": "true",
+      "title_bar": {
+        "background_color": "#0099ff"
+      },
+      "preview": {
+        "active": "true"
+      },
+      "html": "",
+      "pos_x": "1784",
+      "pos_y": "260",
+      "pos_z": "999",
+      "order": {
+        "input": [
+          "html_path"
+        ],
+        "output": [
+          "html"
+        ]
+      }
+    },
+    "mode": "modal"
+  },
+  "events": {}
+}
\ No newline at end of file