ivoryos 1.0.9__py3-none-any.whl → 1.1.0__py3-none-any.whl

ivoryos/routes/design/templates/components/text_to_code_panel.html

@@ -0,0 +1,20 @@
+{# Text-to-code panel component #}
+<div class="accordion-item text-to-code">
+    <h2 class="accordion-header">
+        <button class="accordion-button text-to-code" type="button" data-bs-toggle="collapse" data-bs-target="#text-to-code" aria-expanded="false" aria-controls="collapseExample">
+            Text-to-Code
+        </button>
+    </h2>
+    <div id="text-to-code" class="accordion-collapse collapse show" data-bs-parent="#accordionActions">
+        <div class="accordion-body">
+            <form role="form" method='POST' name="generate" id="generate" action="{{url_for('design.generate_code')}}">
+                <input type="hidden" id="instrument" name="instrument" value="{{instrument}}">
+                <textarea class="form-control" id="prompt" name="prompt" rows="6" aria-describedby="promptHelpBlock">{{ session['prompt'][instrument] if instrument in session['prompt'] else '' }}</textarea>
+                <div id="promptHelpBlock" class="form-text">
+                    This will overwrite current design.
+                </div>
+                <button type="submit" class="btn btn-dark" id="gen" name="gen">Generate</button>
+            </form>
+        </div>
+    </div>
+</div> 

ivoryos/routes/design/templates/experiment_builder.html

@@ -0,0 +1,41 @@
+{% extends 'base.html' %}
+{% block title %}IvoryOS | Design{% endblock %}
+
+{% block body %}
+    {# overlay block for text-to-code gen #}
+    <style>
+    .code-overlay {
+        position: absolute;
+        top: 0;
+        right: -50%;
+        height: 100%;
+        width: 50%;
+        z-index: 100;
+        background: #f8f9fa;
+        box-shadow: -2px 0 6px rgba(0, 0, 0, 0.1);
+        transition: right 0.3s ease;
+        overflow-y: auto;
+    }
+    .code-overlay.show {
+        right: 0;
+    }
+</style>
+    <div id="overlay" class="overlay">
+        <div>
+            <h3 id="overlay-text">Generating design, please wait...</h3>
+            <div class="spinner-border" role="status"></div>
+        </div>
+    </div>
+
+    <div class="row">
+        {% include 'components/sidebar.html' %}
+        {% include 'components/canvas.html' %}
+    </div>
+
+    {# Include all modals #}
+    {% include 'components/modals.html' %}
+
+    {# Include all scripts #}
+    {% include 'components/scripts.html' %}
+
+{% endblock %}

ivoryos/routes/execute/execute.py

@@ -0,0 +1,173 @@
+import csv
+import os
+import time
+
+from flask import Blueprint, redirect, url_for, flash, jsonify, request, render_template, session, \
+    current_app, g
+from flask_login import login_required
+
+from ivoryos.routes.execute.execute_file import files
+from ivoryos.utils import utils
+from ivoryos.utils.global_config import GlobalConfig
+from ivoryos.utils.form import create_action_button, format_name, create_form_from_pseudo, \
+    create_form_from_action, create_all_builtin_forms
+
+from werkzeug.utils import secure_filename
+
+from ivoryos.socket_handlers import runner
+
+execute = Blueprint('execute', __name__, template_folder='templates')
+
+execute.register_blueprint(files)
+# Register sub-blueprints
+global_config = GlobalConfig()
+
+
+@execute.route("/campaign", methods=['GET', 'POST'])
+@login_required
+def experiment_run():
+    """
+    .. :quickref: Workflow Execution; Execute/iterate the workflow
+
+    .. http:get:: /design/campaign
+
+    Compile the workflow and load the experiment execution interface.
+
+    .. http:post:: /design/campaign
+
+    Start workflow execution
+
+    """
+    deck = global_config.deck
+    script = utils.get_script_file()
+    # runner = global_config.runner
+    existing_data = None
+    # script.sort_actions() # handled in update list
+    off_line = current_app.config["OFF_LINE"]
+    deck_list = utils.import_history(os.path.join(current_app.config["OUTPUT_FOLDER"], 'deck_history.txt'))
+
+    design_buttons = {stype: create_action_button(script, stype) for stype in script.stypes}
+    config_preview = []
+    config_file_list = [i for i in os.listdir(current_app.config["CSV_FOLDER"]) if not i == ".gitkeep"]
+
+    try:
+        exec_string = script.python_script if script.python_script else script.compile(
+            current_app.config['SCRIPT_FOLDER'])
+    except Exception as e:
+        flash(e.__str__())
+        if request.accept_mimetypes.best_match(['application/json', 'text/html']) == 'application/json':
+            return jsonify({"error": e.__str__()})
+        else:
+            return redirect(url_for("design.experiment_builder"))
+
+    config_file = request.args.get("filename")
+    config = []
+    if config_file:
+        session['config_file'] = config_file
+    filename = session.get("config_file")
+    if filename:
+        config = list(csv.DictReader(open(os.path.join(current_app.config['CSV_FOLDER'], filename))))
+        config_preview = config[1:]
+        arg_type = config.pop(0)  # first entry is types
+
+    try:
+        # Handle both string and dict exec_string
+        if isinstance(exec_string, dict):
+            for key, func_str in exec_string.items():
+                exec(func_str)
+            line_collection = script.convert_to_lines(exec_string)
+        else:
+            # Handle string case - you might need to adjust this based on your needs
+            line_collection = []
+    except Exception:
+        flash(f"Please check syntax!!")
+        return redirect(url_for("design.experiment_builder"))
+
+    run_name = script.name if script.name else "untitled"
+
+    dismiss = session.get("dismiss", None)
+    script = utils.get_script_file()
+    no_deck_warning = False
+
+    _, return_list = script.config_return()
+    config_list, config_type_list = script.config("script")
+    data_list = os.listdir(current_app.config['DATA_FOLDER'])
+    data_list.remove(".gitkeep") if ".gitkeep" in data_list else data_list
+
+    if deck is None:
+        no_deck_warning = True
+        flash(f"No deck is found, import {script.deck}")
+    elif script.deck:
+        is_deck_match = script.deck == deck.__name__ or script.deck == \
+                        os.path.splitext(os.path.basename(deck.__file__))[0]
+        if not is_deck_match:
+            flash(f"This script is not compatible with current deck, import {script.deck}")
+
+    if request.method == "POST":
+        bo_args = None
+        compiled = False
+        if request.accept_mimetypes.best_match(['application/json', 'text/html']) == 'application/json':
+            payload_json = request.get_json()
+            compiled = True
+            if "kwargs" in payload_json:
+                config = payload_json["kwargs"]
+            elif "parameters" in payload_json:
+                bo_args = payload_json
+            repeat = payload_json.pop("repeat", None)
+        else:
+            if "bo" in request.form:
+                bo_args = request.form.to_dict()
+                existing_data = bo_args.pop("existing_data")
+            if "online-config" in request.form:
+                config = utils.web_config_entry_wrapper(request.form.to_dict(), config_list)
+            repeat = request.form.get('repeat', None)
+
+        try:
+            datapath = current_app.config["DATA_FOLDER"]
+            run_name = script.validate_function_name(run_name)
+            runner.run_script(script=script, run_name=run_name, config=config, bo_args=bo_args,
+                              logger=g.logger, socketio=g.socketio, repeat_count=repeat,
+                              output_path=datapath, compiled=compiled, history=existing_data,
+                              current_app=current_app._get_current_object()
+                              )
+            if utils.check_config_duplicate(config):
+                flash(f"WARNING: Duplicate in config entries.")
+        except Exception as e:
+            if request.accept_mimetypes.best_match(['application/json', 'text/html']) == 'application/json':
+                return jsonify({"error": e.__str__()})
+            else:
+                flash(e)
+
+    if request.accept_mimetypes.best_match(['application/json', 'text/html']) == 'application/json':
+        # wait to get a workflow ID
+        while not global_config.runner_status:
+            time.sleep(1)
+        return jsonify({"status": "task started", "task_id": global_config.runner_status.get("id")})
+    else:
+        return render_template('experiment_run.html', script=script.script_dict, filename=filename,
+                               dot_py=exec_string, line_collection=line_collection,
+                               return_list=return_list, config_list=config_list, config_file_list=config_file_list,
+                               config_preview=config_preview, data_list=data_list, config_type_list=config_type_list,
+                               no_deck_warning=no_deck_warning, dismiss=dismiss, design_buttons=design_buttons,
+                               history=deck_list, pause_status=runner.pause_status())
+
+
+@execute.route('/data_preview/<filename>')
+@login_required
+def data_preview(filename):
+    """Serve a preview of the selected data file (CSV) as JSON."""
+    import csv
+    import os
+    from flask import abort
+
+    data_folder = current_app.config['DATA_FOLDER']
+    file_path = os.path.join(data_folder, filename)
+    if not os.path.exists(file_path):
+        abort(404)
+    with open(file_path, newline='') as csvfile:
+        reader = csv.DictReader(csvfile)
+        rows = list(reader)
+    # Limit preview to first 10 rows
+    return jsonify({"columns": reader.fieldnames, "rows": rows})
+
+

ivoryos/routes/execute/execute_file.py

@@ -0,0 +1,44 @@
+import csv
+import json
+import os
+from flask import Blueprint, send_file, request, flash, redirect, url_for, session, current_app
+from werkzeug.utils import secure_filename
+from ivoryos.utils import utils
+
+files = Blueprint('execute_files', __name__)
+
+
+
+@files.route('/upload/config', methods=['POST'])
+def upload():
+    """Upload a workflow config file (.CSV)"""
+    if request.method == "POST":
+        f = request.files['file']
+        if 'file' not in request.files:
+            flash('No file part')
+        if f.filename.split('.')[-1] == "csv":
+            filename = secure_filename(f.filename)
+            f.save(os.path.join(current_app.config['CSV_FOLDER'], filename))
+            session['config_file'] = filename
+            return redirect(url_for("execute.experiment_run"))
+        else:
+            flash("Config file is in csv format")
+            return redirect(url_for("execute.experiment_run"))
+
+
+@files.route('/upload/history', methods=['POST'])
+def upload_history():
+    """Upload a workflow history file (.CSV)"""
+    if request.method == "POST":
+        f = request.files['historyfile']
+        if 'historyfile' not in request.files:
+            flash('No file part')
+        if f.filename.split('.')[-1] == "csv":
+            filename = secure_filename(f.filename)
+            f.save(os.path.join(current_app.config['DATA_FOLDER'], filename))
+            return redirect(url_for("execute.experiment_run"))
+        else:
+            flash("Config file is in csv format")
+            return redirect(url_for("execute.experiment_run"))
+
+

ivoryos/routes/execute/templates/components/error_modal.html

@@ -0,0 +1,20 @@
+{# Error modal component for experiment run #}
+<div class="modal fade" id="error-modal" tabindex="-1" aria-labelledby="errorModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="errorModalLabel">Error Detected</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <p id="error-message">An error has occurred.</p>
+        <p>Do you want to continue execution or stop?</p>
+      </div>
+      <div class="modal-footer">
+          <button type="button" class="btn btn-primary" id="retry-btn" data-bs-dismiss="modal">Rerun Current Step</button>
+          <button type="button" class="btn btn-success" id="continue-btn" data-bs-dismiss="modal">Continue</button>
+          <button type="button" class="btn btn-danger" id="stop-btn" data-bs-dismiss="modal">Stop Execution</button>
+      </div>
+    </div>
+  </div>
+</div> 

ivoryos/routes/execute/templates/components/logging_panel.html

@@ -0,0 +1,31 @@
+{# Logging panel component for experiment run #}
+<div class="col-lg-6 col-sm-12 logging-panel">
+    <p>
+        <div class="p d-flex justify-content-between align-items-center">
+            <h5>Progress：</h5>
+            <div class="d-flex gap-2 ms-auto">
+                <button id="pause-resume" class="btn btn-info text-white" data-bs-toggle="tooltip" title="Pause execution">
+                    {% if pause_status %}
+                        <i class="bi bi-play-circle"></i>
+                    {% else %}
+                        <i class="bi bi-pause-circle"></i>
+                    {% endif %}
+                </button>
+                <button id="abort-current" class="btn btn-danger text-white" data-bs-toggle="tooltip" title="Stop execution after current step">
+                    <i class="bi bi-stop-circle"></i>
+                </button>
+                <button id="abort-pending" class="btn btn-warning text-white" data-bs-toggle="tooltip" title="Stop execution after current iteration">
+                    <i class="bi bi-hourglass-split"></i>
+                </button>
+            </div>
+        </div>
+        <div class="text-muted mt-2">
+            <small><strong>Note:</strong> The current step cannot be paused or stopped until it completes. </small>
+        </div>
+
+    <div class="progress" role="progressbar" aria-label="Animated striped example" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
+        <div id="progress-bar-inner" class="progress-bar progress-bar-striped progress-bar-animated"></div>
+    </div>
+    <p><h5>Log：</h5></p>
+    <div id="logging-panel"></div>
+</div> 

ivoryos/routes/execute/templates/components/progress_panel.html

@@ -0,0 +1,27 @@
+{# Progress panel component for experiment run #}
+<div class="col-lg-6 col-sm-12" id="code-panel" style="{{ '' if pause_status else 'display: none;'}}">
+    <p>
+        <h5>Progress：</h5>
+        {% if "prep" in line_collection.keys() %}
+            {% set stype = "prep" %}
+            <h6>Preparation：</h6>
+            {% for code in line_collection["prep"] %}
+                <pre style="margin: 0; padding: 0; line-height: 1;"><code class="python" id="{{ stype }}-{{ loop.index0 }}" >{{code}}</code></pre>
+            {% endfor %}
+        {% endif %}
+        {% if "script" in line_collection.keys() %}
+            {% set stype = "script" %}
+            <h6>Experiment：</h6>
+            {% for code in line_collection["script"] %}
+                <pre style="margin: 0; padding: 0; line-height: 1;"><code class="python" id="{{ stype }}-{{ loop.index0 }}" >{{code}}</code></pre>
+            {% endfor %}
+        {% endif %}
+        {% if "cleanup" in line_collection.keys() %}
+            {% set stype = "cleanup" %}
+            <h6>Cleanup：</h6>
+            {% for code in line_collection["cleanup"] %}
+                <pre style="margin: 0; padding: 0; line-height: 1;"><code class="python" id="{{ stype }}-{{ loop.index0 }}" >{{code}}</code></pre>
+            {% endfor %}
+        {% endif %}
+    </p>
+</div> 

ivoryos/routes/execute/templates/components/run_panel.html

@@ -0,0 +1,9 @@
+{# Run panel component for experiment run #}
+{% if script['script'] or script['prep'] or script['cleanup'] %}
+    <div class="col-lg-6 col-sm-12" id="run-panel"  style="{{ 'display: none;'  if pause_status else '' }}">
+        {% include 'components/run_tabs.html' %}
+    </div>
+{% else %}
+    <div class="col-lg-6 col-sm-12" id="placeholder-panel">
+    </div>
+{% endif %} 

ivoryos/routes/execute/templates/components/run_tabs.html

@@ -0,0 +1,17 @@
+{# Run tabs component for experiment run #}
+<ul class="nav nav-tabs" id="myTabs" role="tablist">
+    <li class="nav-item" role="presentation">
+        <a class="nav-link {{ 'disabled' if config_list else '' }} {{ 'active' if not config_list else '' }}" id="tab1-tab" data-bs-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="false">Repeat</a>
+    </li>
+    <li class="nav-item" role="presentation">
+        <a class="nav-link {{ 'disabled' if not config_list else '' }} {{ 'active' if config_list else '' }}" id="tab2-tab" data-bs-toggle="tab" href="#tab2" role="tab" aria-controls="tab2" aria-selected="false">Configuration</a>
+    </li>
+    <li class="nav-item" role="presentation">
+        <a class="nav-link {{ 'disabled' if not config_list or not return_list else '' }}" id="tab3-tab" data-bs-toggle="tab" href="#tab3" role="tab" aria-controls="tab3" aria-selected="false">Bayesian Optimization</a>
+    </li>
+</ul>
+<div class="tab-content" id="myTabsContent">
+    {% include 'components/tab_repeat.html' %}
+    {% include 'components/tab_configuration.html' %}
+    {% include 'components/tab_bayesian.html' %}
+</div> 

ivoryos/routes/execute/templates/components/tab_bayesian.html

@@ -0,0 +1,147 @@
+{# Bayesian optimization tab component #}
+<div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="tab3-tab">
+
+
+    {#            <div class="row align-items-center mb-3">#}
+{#                <div class="col-6">#}
+{#                    <form method="POST" id="loadHistory" name="loadHistory" action="{{ url_for('execute.execute_files.upload_history') }}" enctype="multipart/form-data">#}
+{#                        <div class="input-group">#}
+{#                            <input class="form-control" name="historyfile" id="historyfile" type="file" accept=".csv" onchange="var f=document.getElementById('loadHistory'); if(f) f.submit();">                        </div>#}
+{#                    </form>#}
+{#                </div>#}
+{#            </div>#}
+            <h6 class="fw-bold mt-2 mb-1">Load Previous Data</h6>
+
+    <form method="POST" name="bo" action="{{ url_for('execute.experiment_run') }}">
+        <div class="container py-2">
+            <!-- Data Loading Section -->
+            <div class="input-group">
+                <label class="input-group-text"><i class="bi bi-folder2-open"></i></label>
+                <select class="form-select" id="existing_data" name="existing_data">
+                    <option value="">Load existing data...</option>
+                    {% for data in data_list %}
+                        <option value="{{ data }}">{{ data }} </option>
+                    {% endfor %}
+                </select>
+            </div>
+            <!-- Custom path input -->
+            <div class="row align-items-center mb-3" id="custom_path_row" style="display: none;">
+                <div class="col-3 col-form-label-sm">
+                    Custom Path:
+                </div>
+                <div class="col-7">
+                    <input type="text" class="form-control form-control-sm" id="custom_path" name="custom_path" placeholder="/path/to/data/folder">
+                </div>
+                <div class="col-2">
+                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="validateCustomPath()">Validate</button>
+                </div>
+            </div>
+
+            <!-- Data preview section -->
+            <div class="row mb-3" id="data_preview_section" style="display: none;">
+                <div class="col-12">
+                    <div class="card">
+                        <div class="card-header py-2">
+                            <small class="fw-bold">Data Preview</small>
+                        </div>
+                        <div class="card-body py-2">
+                            <div id="data_preview_content">
+                                <small class="text-muted">Select a data source to preview</small>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <hr class="my-3">
+
+            <!-- Parameters -->
+            <h6 class="fw-bold mt-2 mb-1">Parameters</h6>
+            {% for config in config_list %}
+                <div class="row align-items-center mb-2">
+                    <div class="col-3 col-form-label-sm">
+                        {{ config }}:
+                    </div>
+                    <div class="col-6">
+                        <select class="form-select form-select-sm" id="{{config}}_type" name="{{config}}_type">
+                            <option selected value="range">range</option>
+                            <option value="choice">choice</option>
+                            <option value="fixed">fixed</option>
+                        </select>
+                    </div>
+                    <div class="col-3">
+                        <input type="text" class="form-control form-control-sm" id="{{config}}_value" name="{{config}}_value" placeholder="1, 2, 3">
+                    </div>
+                </div>
+            {% endfor %}
+            <!-- Objective -->
+            <h6 class="fw-bold mt-3 mb-1">Objectives</h6>
+            {% for objective in return_list %}
+                <div class="row align-items-center mb-2">
+                    <div class="col-3 col-form-label-sm">
+                        {{ objective }}:
+                    </div>
+                    <div class="col-6">
+                        <select class="form-select form-select-sm" id="{{objective}}_min" name="{{objective}}_min">
+                            <option selected>minimize</option>
+                            <option>maximize</option>
+                            <option>none</option>
+                        </select>
+                    </div>
+                </div>
+            {% endfor %}
+            <h6 class="fw-bold mt-3 mb-1">Budget</h6>
+            <div class="input-group mb-3">
+                <label class="input-group-text" for="repeat">Max iteration </label>
+                <input class="form-control" type="number" id="repeat" name="repeat" min="1" max="1000" value="25">
+            </div>
+            {% if not no_deck_warning%}
+                <div class="input-group mb-3">
+                    <button class="form-control" type="submit" name="bo">Run</button>
+                </div>
+            {% endif %}
+        </div>
+    </form>
+</div>
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const dataSelect = document.getElementById('existing_data');
+        const previewSection = document.getElementById('data_preview_section');
+        const previewContent = document.getElementById('data_preview_content');
+
+        dataSelect.addEventListener('change', function() {
+            const filename = dataSelect.value;
+            if (!filename) {
+                previewSection.style.display = 'none';
+                previewContent.innerHTML = '<small class="text-muted">Select a data source to preview</small>';
+                return;
+            }
+            fetch('{{ url_for("execute.data_preview", filename="FILENAME") }}'.replace('FILENAME', encodeURIComponent(filename)))
+                .then(response => {
+                    if (!response.ok) throw new Error('Network response was not ok');
+                    return response.json();
+                })
+                .then(data => {
+                    previewSection.style.display = '';
+                    if (!data.rows || data.rows.length === 0) {
+                        previewContent.innerHTML = '<small class="text-muted">No data found in file.</small>';
+                        return;
+                    }
+                    let html = '<table class="table table-sm table-bordered mb-0"><thead><tr>';
+                    data.columns.forEach(col => html += `<th>${col}</th>`);
+                    html += '</tr></thead><tbody>';
+                    data.rows.forEach(row => {
+                        html += '<tr>';
+                        data.columns.forEach(col => html += `<td>${row[col] || ''}</td>`);
+                        html += '</tr>';
+                    });
+                    html += '</tbody></table>';
+                    previewContent.innerHTML = html;
+                })
+                .catch(() => {
+                    previewSection.style.display = '';
+                    previewContent.innerHTML = '<small class="text-danger">Failed to load preview.</small>';
+                });
+        });
+    });
+</script>

ivoryos/routes/execute/templates/components/tab_configuration.html

@@ -0,0 +1,98 @@
+{# Configuration tab component #}
+<div class="tab-pane fade {{ 'show active' if config_list else '' }}" id="tab2" role="tabpanel" aria-labelledby="tab2-tab">
+    <!-- File Management Section -->
+    <div class="card mb-4">
+        <div class="card-header d-flex justify-content-between align-items-center">
+            <h6 class="mb-0"><i class="bi bi-file-earmark-text"></i> Configuration File</h6>
+            <small class="text-muted">
+                <a href="{{ url_for('design.design_files.download', filetype='configure') }}">
+                    <i class="bi bi-download"></i> Download Empty Template
+                </a>
+            </small>
+        </div>
+        <div class="card-body">
+            <div class="row g-3">
+                <!-- File Selection -->
+                <div class="col-md-6">
+                    <form name="filenameForm" id="filenameForm" method="GET" action="{{ url_for('execute.experiment_run') }}" enctype="multipart/form-data">
+                        <div class="input-group">
+                            <label class="input-group-text"><i class="bi bi-folder2-open"></i></label>
+                            <select class="form-select" name="filename" id="filenameSelect" onchange="document.getElementById('filenameForm').submit();">
+                                <option {{ 'selected' if not filename else '' }} value="">-- Select existing file --</option>
+                                {% for config_file in config_file_list %}
+                                    <option {{ 'selected' if filename == config_file else '' }} value="{{ config_file }}">{{ config_file }}</option>
+                                {% endfor %}
+                            </select>
+                        </div>
+                    </form>
+                </div>
+
+                <!-- File Upload -->
+                <div class="col-md-6">
+                    <form method="POST" id="loadFile" name="loadFile" action="{{ url_for('execute.execute_files.upload') }}" enctype="multipart/form-data">
+                        <div class="input-group">
+                            <input class="form-control" name="file" type="file" accept=".csv" required="required" onchange="document.getElementById('loadFile').submit();">
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Configuration Table -->
+    <div class="card mb-4">
+        <div class="card-header position-relative">
+            <div class="position-absolute top-50 end-0 translate-middle-y me-3">
+                <span id="saveStatus" class="badge bg-success" style="display: none;">
+                    <i class="bi bi-check-circle"></i> Auto-saved
+                </span>
+                <span id="modifiedStatus" class="badge bg-warning" style="display: none;">
+                    <i class="bi bi-pencil"></i> Modified
+                </span>
+            </div>
+        </div>
+        <div class="card-body p-0">
+            <form method="POST" name="online-config" id="online-config" action="{{url_for('execute.experiment_run')}}">
+                <div class="table-responsive">
+                    <table id="dataInputTable" class="table table-striped table-hover mb-0">
+                        <thead class="table-dark">
+                        <tr>
+                            <th style="width: 40px;">#</th>
+                            {% for column in config_list %}
+                                <th>{{ column }}</th>
+                            {% endfor %}
+                            <th></th>
+                        </tr>
+                        </thead>
+                        <tbody id="tableBody">
+                        </tbody>
+                    </table>
+                </div>
+            <div class="card-footer">
+            <div class="d-flex justify-content-between align-items-center">
+                <div class="d-flex gap-2">
+                    <button type="button" class="btn btn-success" onclick="addRow()">
+                        <i class="bi bi-plus-circle"></i> Add Row
+                    </button>
+                    <button type="button" class="btn btn-warning" onclick="clearAllRows()">
+                        <i class="bi bi-trash"></i> Clear All
+                    </button>
+                    <button type="button" class="btn btn-info" onclick="resetToFile()" id="resetToFileBtn" style="display: none;">
+                        <i class="bi bi-arrow-clockwise"></i> Reset to File
+                    </button>
+                </div>
+                <button type="submit" name="online-config" class="btn btn-primary btn-lg">
+                    <i class="bi bi-play-circle"></i> Run
+                </button>
+            </div>
+            </div>
+            </form>
+        </div>
+        <!-- Config Preview (if loaded from file) -->
+        {% if config_preview %}
+            <div class="alert alert-info">
+                <small><i class="bi bi-info-circle"></i> {{ config_preview|length }} rows loaded from {{ filename }}</small>
+            </div>
+        {% endif %}
+    </div>
+</div>