Major file reorganization

lib/server/job_server.py

@@ -0,0 +1,485 @@
+#!/usr/bin/env python3
+import json
+import logging
+import os
+import pathlib
+import shutil
+import socket
+import threading
+import time
+from datetime import datetime
+from zipfile import ZipFile
+
+import json2html
+import requests
+import yaml
+from flask import Flask, request, render_template, send_file, after_this_request, Response, redirect, url_for, abort
+from werkzeug.utils import secure_filename
+
+from lib.render_job import RenderJob
+from lib.render_queue import RenderQueue, JobNotFoundError
+from lib.render_workers.render_worker import RenderWorkerFactory, string_to_status, RenderStatus
+from lib.utilities.server_helper import post_job_to_server, generate_thumbnail_for_job
+
+logger = logging.getLogger()
+server = Flask(__name__, template_folder='templates', static_folder='static')
+
+categories = [RenderStatus.RUNNING, RenderStatus.ERROR, RenderStatus.NOT_STARTED, RenderStatus.SCHEDULED,
+              RenderStatus.COMPLETED, RenderStatus.CANCELLED]
+
+
+def sorted_jobs(all_jobs, sort_by_date=True):
+    if not sort_by_date:
+        sorted_job_list = []
+        if all_jobs:
+            for status_category in categories:
+                found_jobs = [x for x in all_jobs if x.render_status() == status_category.value]
+                if found_jobs:
+                    sorted_found_jobs = sorted(found_jobs, key=lambda d: d.date_created, reverse=True)
+                    sorted_job_list.extend(sorted_found_jobs)
+    else:
+        sorted_job_list = sorted(all_jobs, key=lambda d: d.date_created, reverse=True)
+    return sorted_job_list
+
+
+@server.route('/')
+@server.route('/index')
+def index():
+
+    with open('config/presets.yaml') as f:
+        presets = yaml.load(f, Loader=yaml.FullLoader)
+
+    return render_template('index.html', all_jobs=sorted_jobs(RenderQueue.job_queue),
+                           hostname=RenderQueue.host_name, renderer_info=renderer_info(),
+                           render_clients=RenderQueue.render_clients, preset_list=presets)
+
+
+@server.route('/ui/job/<job_id>/full_details')
+def job_detail(job_id):
+    found_job = RenderQueue.job_with_id(job_id)
+    table_html = json2html.json2html.convert(json=found_job.json(),
+                                             table_attributes='class="table is-narrow is-striped is-fullwidth"')
+    media_url = None
+    if found_job.file_list() and found_job.render_status() == RenderStatus.COMPLETED:
+        media_basename = os.path.basename(found_job.file_list()[0])
+        media_url = f"/api/job/{job_id}/file/{media_basename}"
+    return render_template('details.html', detail_table=table_html, media_url=media_url,
+                           hostname=RenderQueue.host_name, job_status=found_job.render_status().value.title(),
+                           job=found_job, renderer_info=renderer_info())
+
+
+@server.route('/ui/job/<job_id>/thumbnail')
+def job_thumbnail(job_id):
+    found_job = RenderQueue.job_with_id(job_id, none_ok=True)
+    if found_job:
+
+        os.makedirs(server.config['THUMBS_FOLDER'], exist_ok=True)
+        thumb_video_path = os.path.join(server.config['THUMBS_FOLDER'], found_job.id + '.mp4')
+        thumb_image_path = os.path.join(server.config['THUMBS_FOLDER'], found_job.id + '.jpg')
+
+        if not os.path.exists(thumb_video_path) and not os.path.exists(thumb_video_path + '_IN-PROGRESS'):
+            generate_thumbnail_for_job(found_job, thumb_video_path, thumb_image_path, max_width=240)
+
+        if os.path.exists(thumb_video_path) and not os.path.exists(thumb_video_path + '_IN-PROGRESS'):
+            return send_file(thumb_video_path, mimetype="video/mp4")
+        elif os.path.exists(thumb_image_path):
+            return send_file(thumb_image_path, mimetype='image/jpeg')
+    return send_file('static/images/spinner.gif', mimetype="image/gif")
+
+
+# Get job file routing
+@server.route('/api/job/<job_id>/file/<filename>', methods=['GET'])
+def get_job_file(job_id, filename):
+    found_job = RenderQueue.job_with_id(job_id)
+    try:
+        for full_path in found_job.file_list():
+            if filename in full_path:
+                return send_file(path_or_file=full_path)
+    except FileNotFoundError:
+        abort(404)
+
+
+@server.get('/api/jobs')
+def jobs_json():
+    return [x.json() for x in RenderQueue.job_queue]
+
+
+@server.get('/api/jobs/<status_val>')
+def filtered_jobs_json(status_val):
+    state = string_to_status(status_val)
+    jobs = [x.json() for x in RenderQueue.jobs_with_status(state)]
+    if jobs:
+        return jobs
+    else:
+        return f'Cannot find jobs with status {status_val}', 400
+
+
+@server.errorhandler(JobNotFoundError)
+def handle_job_not_found(job_error):
+    return f'Cannot find job with ID {job_error.job_id}', 400
+
+
+@server.get('/api/job/<job_id>')
+def get_job_status(job_id):
+    return RenderQueue.job_with_id(job_id).json()
+
+
+@server.get('/api/job/<job_id>/logs')
+def get_job_logs(job_id):
+    found_job = RenderQueue.job_with_id(job_id)
+    log_path = found_job.worker.log_path
+    log_data = None
+    if log_path and os.path.exists(log_path):
+        with open(log_path) as file:
+            log_data = file.read()
+    return Response(log_data, mimetype='text/plain')
+
+
+@server.get('/api/job/<job_id>/file_list')
+def get_file_list(job_id):
+    return RenderQueue.job_with_id(job_id)
+
+
+@server.route('/api/job/<job_id>/download_all')
+def download_all(job_id):
+    zip_filename = None
+
+    @after_this_request
+    def clear_zip(response):
+        if zip_filename and os.path.exists(zip_filename):
+            os.remove(zip_filename)
+        return response
+
+    found_job = RenderQueue.job_with_id(job_id)
+    output_dir = os.path.dirname(found_job.worker.output_path)
+    if os.path.exists(output_dir):
+        zip_filename = os.path.join('/tmp', pathlib.Path(found_job.worker.input_path).stem + '.zip')
+        with ZipFile(zip_filename, 'w') as zipObj:
+            for f in os.listdir(output_dir):
+                zipObj.write(filename=os.path.join(output_dir, f),
+                             arcname=os.path.basename(f))
+        return send_file(zip_filename, mimetype="zip", as_attachment=True, )
+    else:
+        return f'Cannot find project files for job {job_id}', 500
+
+
+@server.post('/api/register_client')
+def register_client():
+    client_hostname = request.values['hostname']
+    x = RenderQueue.register_client(client_hostname)
+    return "Success" if x else "Fail"
+
+
+@server.post('/api/unregister_client')
+def unregister_client():
+    client_hostname = request.values['hostname']
+    x = RenderQueue.unregister_client(client_hostname)
+    return "Success" if x else "Fail"
+
+
+@server.get('/api/clients')
+def render_clients():
+    return RenderQueue.render_clients
+
+
+@server.get('/api/full_status')
+def full_status():
+    full_results = {'timestamp': datetime.now().isoformat(), 'servers': {}}
+
+    try:
+        for client_hostname in RenderQueue.render_clients:
+            is_online = False
+            if client_hostname == RenderQueue.host_name:
+                snapshot_results = snapshot()
+                is_online = True
+            else:
+                snapshot_results = {}
+                try:
+                    snapshot_request = requests.get(f'http://{client_hostname}:8080/snapshot', timeout=1)
+                    snapshot_results = snapshot_request.json()
+                    is_online = snapshot_request.ok
+                except requests.ConnectionError as e:
+                    pass
+            server_data = {'status': snapshot_results.get('status', {}), 'jobs': snapshot_results.get('jobs', {}),
+                           'is_online': is_online}
+            full_results['servers'][client_hostname] = server_data
+    except Exception as e:
+        logger.error(f"Exception fetching full status: {e}")
+
+    return full_results
+
+
+@server.get('/api/snapshot')
+def snapshot():
+    server_status = RenderQueue.status()
+    server_jobs = [x.json() for x in RenderQueue.job_queue]
+    server_data = {'status': server_status, 'jobs': server_jobs, 'timestamp': datetime.now().isoformat()}
+    return server_data
+
+
+@server.post('/api/add_job')
+def add_job_handler():
+    try:
+        """Create new job and add to server render queue"""
+        if request.is_json:
+            jobs_list = [request.json]
+        elif request.form.get('json', None):
+            jobs_list = json.loads(request.form['json'])
+        else:
+            # Cleanup flat form data into nested structure
+            form_dict = {k: v for k, v in dict(request.form).items() if v}
+            args = {}
+            arg_keys = [k for k in form_dict.keys() if '-arg_' in k]
+            for key in arg_keys:
+                if form_dict['renderer'] in key or 'AnyRenderer' in key:
+                    cleaned_key = key.split('-arg_')[-1]
+                    args[cleaned_key] = form_dict[key]
+                form_dict.pop(key)
+            args['raw'] = form_dict.get('raw_args', None)
+            form_dict['args'] = args
+            jobs_list = [form_dict]
+
+        # handle uploaded files
+        uploaded_file = request.files.get('file', None)
+        uploaded_file_local_path = None
+        job_dir = None
+        if uploaded_file and uploaded_file.filename:
+            logger.info(f"Receiving uploaded file {uploaded_file.filename}")
+            job_dir = os.path.join(server.config['UPLOAD_FOLDER'], (uploaded_file.filename + "_" +
+                                                                    datetime.now().strftime("%Y.%m.%d_%H.%M.%S")))
+            os.makedirs(job_dir, exist_ok=True)
+            uploaded_file_local_path = os.path.join(job_dir, secure_filename(uploaded_file.filename))
+            uploaded_file.save(uploaded_file_local_path)
+
+        # convert job input paths for uploaded files and add jobs
+        results = []
+        for job in jobs_list:
+            if uploaded_file_local_path:
+                job['input_path'] = uploaded_file_local_path
+                output_dir = os.path.join(job_dir, job.get('name', None) or 'output')
+                os.makedirs(output_dir, exist_ok=True)
+                job['output_path'] = os.path.join(output_dir, os.path.basename(job['output_path']))
+            remove_job_dir = len(jobs_list) == 1 and uploaded_file_local_path  # remove failed job dir for single file uploads only
+            add_result = add_job(job, remove_job_dir_on_failure=remove_job_dir)
+            results.append(add_result)
+
+        # return any errors from results list
+        for response in results:
+            if response.get('error', None):
+                if len(results) == 1:
+                    return results, response.get('code', 500)
+                else:
+                    return results, 400
+
+        if request.args.get('redirect', False):
+            return redirect(url_for('index'))
+        else:
+            return results
+
+    except Exception as e:
+        logger.exception(f"Unknown error adding job: {e}")
+    return 'unknown error', 500
+
+
+def add_job(job_params, remove_job_dir_on_failure=False):
+    def remove_job_dir():
+        if remove_job_dir_on_failure and job_dir and os.path.exists(job_dir):
+            logger.debug(f"Removing job dir: {job_dir}")
+            shutil.rmtree(job_dir)
+
+    name = job_params.get("name", None)
+    job_owner = job_params.get("owner", None)
+    renderer = job_params.get("renderer", None)
+    input_path = job_params.get("input_path", None)
+    output_path = job_params.get("output_path", None)
+    priority = int(job_params.get('priority', 2))
+    args = job_params.get('args', {})
+    client = job_params.get('client', None) or RenderQueue.host_name
+    force_start = job_params.get('force_start', False)
+    custom_id = None
+    job_dir = None
+
+    # check for minimum render requirements
+    if None in [renderer, input_path, output_path]:
+        err_msg = 'Cannot add job: Missing required parameters'
+        logger.error(err_msg)
+        return {'error': err_msg, 'code': 400}
+
+    # local renders
+    if client == RenderQueue.host_name:
+        logger.info(f"Creating job locally - {name if name else input_path}")
+        try:
+            render_job = RenderJob(renderer, input_path, output_path, args, priority, job_owner, client,
+                                   notify=False, custom_id=custom_id, name=name)
+            RenderQueue.add_to_render_queue(render_job, force_start=force_start)
+            return render_job.json()
+        except Exception as e:
+            err_msg = f"Error creating job: {str(e)}"
+            logger.exception(err_msg)
+            remove_job_dir()
+            return {'error': err_msg, 'code': 400}
+
+    # client renders
+    elif client in RenderQueue.render_clients:
+
+        # see if host is available
+        if RenderQueue.is_client_available(client):
+
+            # call uploader on remote client
+            try:
+                logger.info(f"Uploading file {input_path} to client {client}")
+                job_data = request.json
+                response = post_job_to_server(input_path, job_data, client)
+                if response.ok:
+                    logger.info("Job submitted successfully!")
+                    return response.json() if response.json() else "Job ok"
+                else:
+                    remove_job_dir()
+                    return {'error': "Job rejected by client", 'code': 400}
+            except requests.ConnectionError as e:
+                err_msg = f"Error submitting job to client: {client}"
+                logger.error(err_msg)
+                remove_job_dir()
+                return {'error': err_msg, 'code': 500}
+        else:
+            # client is not available
+            err_msg = f"Render client '{client}' is unreachable"
+            logger.error(err_msg)
+            remove_job_dir()
+            return {'error': err_msg, 'code': 503}
+
+    else:
+        err_msg = f"Unknown render client: '{client}'"
+        logger.error(err_msg)
+        remove_job_dir()
+        return {'error': err_msg, 'code': 400}
+
+
+@server.get('/api/job/<job_id>/cancel')
+def cancel_job(job_id):
+    if not request.args.get('confirm', False):
+        return 'Confirmation required to cancel job', 400
+
+    if RenderQueue.cancel_job(RenderQueue.job_with_id(job_id)):
+        if request.args.get('redirect', False):
+            return redirect(url_for('index'))
+        else:
+            return "Job cancelled"
+    else:
+        return "Unknown error", 500
+
+
+@server.route('/api/job/<job_id>/delete', methods=['POST', 'GET'])
+def delete_job(job_id):
+    try:
+        if not request.args.get('confirm', False):
+            return 'Confirmation required to delete job', 400
+
+        # First, remove all render files and logs
+        found_job = RenderQueue.job_with_id(job_id)
+        files_to_delete = found_job.file_list()
+        files_to_delete.append(found_job.log_path())
+        for d in files_to_delete:
+            if os.path.exists(d):
+                os.remove(d)
+
+        # Check if we can remove the 'output' directory
+        output_dir = os.path.dirname(files_to_delete[0])
+        if server.config['UPLOAD_FOLDER'] in output_dir and os.path.exists(output_dir):
+            shutil.rmtree(output_dir)
+
+        # Remove any thumbnails
+        for filename in os.listdir(server.config['THUMBS_FOLDER']):
+            if job_id in filename:
+                os.remove(os.path.join(server.config['THUMBS_FOLDER'], filename))
+
+        thumb_path = os.path.join(server.config['THUMBS_FOLDER'], found_job.id + '.mp4')
+        if os.path.exists(thumb_path):
+            os.remove(thumb_path)
+
+        # See if we own the input file (i.e. was it uploaded)
+        input_dir = os.path.dirname(found_job.worker.input_path)
+        if server.config['UPLOAD_FOLDER'] in input_dir and os.path.exists(input_dir):
+            shutil.rmtree(input_dir)
+
+        RenderQueue.delete_job(found_job)
+        if request.args.get('redirect', False):
+            return redirect(url_for('index'))
+        else:
+            return "Job deleted", 200
+
+    except Exception as e:
+        return f"Unknown error: {e}", 500
+
+
+@server.get('/api/clear_history')
+def clear_history():
+    RenderQueue.clear_history()
+    return 'success'
+
+
+@server.route('/api/status')
+def status():
+    return RenderQueue.status()
+
+
+@server.get('/api/renderer_info')
+def renderer_info():
+    renderer_data = {}
+    for r in RenderWorkerFactory.supported_renderers():
+        renderer_class = RenderWorkerFactory.class_for_name(r)
+        renderer_data[r] = {'available': renderer_class.renderer_path() is not None,
+                            'version': renderer_class.version(),
+                            'supported_extensions': renderer_class.supported_extensions,
+                            'supported_export_formats': renderer_class.supported_export_formats}
+    return renderer_data
+
+
+@server.route('/upload')
+def upload_file_page():
+    return render_template('upload.html', render_clients=RenderQueue.render_clients,
+                           supported_renderers=RenderWorkerFactory.supported_renderers())
+
+
+def start_server(background_thread=False):
+    def eval_loop(delay_sec=1):
+        while True:
+            RenderQueue.evaluate_queue()
+            time.sleep(delay_sec)
+
+    with open('config/config.yaml') as f:
+        config = yaml.load(f, Loader=yaml.FullLoader)
+
+    logging.basicConfig(format='%(asctime)s: %(levelname)s: %(module)s: %(message)s', datefmt='%d-%b-%y %H:%M:%S',
+                        level=config.get('server_log_level', 'INFO').upper())
+
+    server.config['UPLOAD_FOLDER'] = os.path.expanduser(config['upload_folder'])
+    server.config['THUMBS_FOLDER'] = os.path.join(os.path.expanduser(config['upload_folder']), 'thumbs')
+    server.config['MAX_CONTENT_PATH'] = config['max_content_path']
+
+    # Get hostname and render clients
+    RenderQueue.host_name = socket.gethostname()
+    server.config['HOSTNAME'] = RenderQueue.host_name
+    if not RenderQueue.render_clients:
+        RenderQueue.render_clients = [RenderQueue.host_name]
+
+    # disable most Flask logging
+    flask_log = logging.getLogger('werkzeug')
+    flask_log.setLevel(config.get('flask_log_level', 'ERROR').upper())
+
+    # Set up the RenderQueue object
+    RenderQueue.load_state()
+
+    thread = threading.Thread(target=eval_loop, kwargs={'delay_sec': config.get('queue_eval_seconds', 1)}, daemon=True)
+    thread.start()
+
+    logging.info(f"Starting Zordon Render Server - Hostname: '{RenderQueue.host_name}'")
+
+    if background_thread:
+        server_thread = threading.Thread(
+            target=lambda: server.run(host='0.0.0.0', port=RenderQueue.port, debug=False, use_reloader=False))
+        server_thread.start()
+        server_thread.join()
+    else:
+        server.run(host='0.0.0.0', port=RenderQueue.port, debug=config.get('flask_debug_enable', False),
+                   use_reloader=False, threaded=True)

lib/server/static/js/job_table.js

@@ -0,0 +1,62 @@
+const grid = new gridjs.Grid({
+columns: [
+  { data: (row) => row.id,
+  name: 'Thumbnail',
+  formatter: (cell) => gridjs.html(`<img src="/ui/job/${cell}/thumbnail" style='width: 320px; min-width: 240px;'>`),
+  sort: {enabled: false}
+  },
+  { id: 'name',
+  name: 'Name',
+  data: (row) => row.name,
+  formatter: (name, row) => gridjs.html(`<a href="/ui/job/${row.cells[0].data}/full_details">${name}</a>`)
+   },
+  { id: 'renderer', data: (row) => `${row.renderer}-${row.worker.renderer_version}`, name: 'Renderer' },
+  { id: 'priority', name: 'Priority' },
+  { id: 'status',
+    name: 'Status',
+    data: (row) => row,
+    formatter: (cell, row) => gridjs.html(`
+        <span class="tag is-primary is-light ${(cell.status == 'running') ? 'is-hidden': ''}">${cell.status}</span>
+        <progress class="progress is-primary ${(cell.status != 'running') ? 'is-hidden': ''}"
+        value="${(parseFloat(cell.percent_complete) * 100.0)}" max="100">${cell.status}</progress>
+    `)},
+  { id: 'time_elapsed', name: 'Time Elapsed' },
+  { data: (row) => row.worker.total_frames, name: 'Frame Count' },
+  { id: 'client', name: 'Client'},
+  { data: (row) => row.worker.last_output,
+    name: 'Last Output',
+    formatter: (output, row) => gridjs.html(`<a href="/api/job/${row.cells[0].data}/logs">${output}</a>`)
+  },
+  { data: (row) => row,
+    name: 'Commands',
+    formatter: (cell, row) => gridjs.html(`
+        <div class="field has-addons" style='white-space: nowrap; display: inline-block;'>
+            <button class="button is-info" onclick="window.location.href='/ui/job/${row.cells[0].data}/full_details';">
+            <span class="icon"><i class="fa-solid fa-info"></i></span>
+            </button>
+            <button class="button is-link" onclick="window.location.href='/api/job/${row.cells[0].data}/logs';">
+            <span class="icon"><i class="fa-regular fa-file-lines"></i></span>
+            </button>
+            <button class="button is-warning is-active ${(cell.status != 'running') ? 'is-hidden': ''}" onclick="window.location.href='/api/job/${row.cells[0].data}/cancel?confirm=True&redirect=True';">
+            <span class="icon"><i class="fa-solid fa-x"></i></span>
+            </button>
+            <button class="button is-success ${(cell.status != 'completed') ? 'is-hidden': ''}" onclick="window.location.href='/api/job/${row.cells[0].data}/download_all';">
+            <span class="icon"><i class="fa-solid fa-download"></i></span>
+            <span>${cell.file_list.length}</span>
+            </button>
+            <button class="button is-danger" onclick="window.location.href='/api/job/${row.cells[0].data}/delete?confirm=True&redirect=True'">
+            <span class="icon"><i class="fa-regular fa-trash-can"></i></span>
+            </button>
+        </div>
+        `),
+    sort: false
+  },
+  { id: 'owner', name: 'Owner' }
+],
+autoWidth: true,
+server: {
+  url: '/api/jobs',
+  then: results => results,
+},
+sort: true,
+}).render(document.getElementById('table'));

lib/server/static/js/modals.js

@@ -0,0 +1,44 @@
+document.addEventListener('DOMContentLoaded', () => {
+  // Functions to open and close a modal
+  function openModal($el) {
+    $el.classList.add('is-active');
+  }
+
+  function closeModal($el) {
+    $el.classList.remove('is-active');
+  }
+
+  function closeAllModals() {
+    (document.querySelectorAll('.modal') || []).forEach(($modal) => {
+      closeModal($modal);
+    });
+  }
+
+  // Add a click event on buttons to open a specific modal
+  (document.querySelectorAll('.js-modal-trigger') || []).forEach(($trigger) => {
+    const modal = $trigger.dataset.target;
+    const $target = document.getElementById(modal);
+
+    $trigger.addEventListener('click', () => {
+      openModal($target);
+    });
+  });
+
+  // Add a click event on various child elements to close the parent modal
+  (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
+    const $target = $close.closest('.modal');
+
+    $close.addEventListener('click', () => {
+      closeModal($target);
+    });
+  });
+
+  // Add a keyboard event to close all modals
+  document.addEventListener('keydown', (event) => {
+    const e = event || window.event;
+
+    if (e.keyCode === 27) { // Escape key
+      closeAllModals();
+    }
+  });
+});

lib/server/templates/details.html

@@ -0,0 +1,48 @@
+{% extends 'layout.html' %}
+
+{% block body %}
+<div class="container" style="text-align:center; width: 100%">
+<br>
+  {% if media_url: %}
+    <video width="1280" height="720" controls>
+    <source src="{{media_url}}" type="video/mp4">
+    Your browser does not support the video tag.
+    </video>
+  {% elif job_status == 'Running': %}
+    <div style="width: 100%; height: 720px; position: relative; background: black; text-align: center; color: white;">
+      <img src="/static/images/gears.png" style="vertical-align: middle; width: auto; height: auto; position:absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0;">
+        <span style="height: auto; position:absolute; margin: auto; top: 58%; left: 0; right: 0; color: white; width: 60%">
+          <progress class="progress is-primary" value="{{job.percent_complete() * 100}}" max="100" style="margin-top: 6px;" id="progress-bar">Rendering</progress>
+          Rendering in Progress - <span id="percent-complete">{{(job.percent_complete() * 100) | int}}%</span>
+          <br>Time Elapsed: <span id="time-elapsed">{{job.time_elapsed()}}</span>
+        </span>
+      <script>
+      var startingStatus = '{{job.render_status().value}}';
+      function update_job() {
+        $.getJSON('/api/job/{{job.id}}', function(data) {
+          document.getElementById('progress-bar').value = (data.percent_complete * 100);
+          document.getElementById('percent-complete').innerHTML = (data.percent_complete * 100).toFixed(0) + '%';
+          document.getElementById('time-elapsed').innerHTML = data.time_elapsed;
+          if (data.status != startingStatus){
+            clearInterval(renderingTimer);
+            window.location.reload(true);
+          };
+        });
+      }
+      if (startingStatus == 'running'){
+        var renderingTimer = setInterval(update_job, 1000);
+      };
+    </script>
+    </div>
+  {% else %}
+    <div style="width: 100%; height: 720px; position: relative; background: black;">
+      <img src="/static/images/{{job_status}}.png" style="vertical-align: middle; width: auto; height: auto; position:absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0;">
+      <span style="height: auto; position:absolute; margin: auto; top: 58%; left: 0; right: 0; color: white;">
+        {{job_status}}
+      </span>
+    </div>
+  {% endif %}
+  <br>
+  {{detail_table|safe}}
+</div>
+{% endblock %}

lib/server/templates/index.html

@@ -0,0 +1,8 @@
+{% extends 'layout.html' %}
+
+{% block body %}
+<div class="container is-fluid" style="padding-top: 20px;">
+  <div id="table" class="table"></div>
+</div>
+<script src="/static/js/job_table.js"></script>
+{% endblock %}

lib/server/templates/layout.html

@@ -0,0 +1,236 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Zordon Dashboard</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/gridjs/dist/gridjs.umd.js"></script>
+  <link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />
+  <script src="https://kit.fontawesome.com/698705d14d.js" crossorigin="anonymous"></script>
+  <script type="text/javascript" src="/static/js/modals.js"></script>
+</head>
+<body onload="rendererChanged(document.getElementById('renderer'))">
+
+<nav class="navbar is-dark" role="navigation" aria-label="main navigation">
+  <div class="navbar-brand">
+    <a class="navbar-item" href="/">
+      <img src="/static/images/logo.png">
+    </a>
+  </div>
+
+  <div id="navbarBasicExample" class="navbar-menu">
+    <div class="navbar-start">
+      <a class="navbar-item" href="/">
+        Home
+      </a>
+    </div>
+
+    <div class="navbar-end">
+      <div class="navbar-item">
+        <button class="button is-primary js-modal-trigger" data-target="add-job-modal">
+          <span class="icon">
+            <i class="fa-solid fa-upload"></i>
+          </span>
+        <span>Submit Job</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</nav>
+
+{% block body %}
+{% endblock %}
+
+<div id="add-job-modal" class="modal">
+  <!--   Start Add Form   -->
+  <form id="submit_job" action="/api/add_job?redirect=True" method="POST" enctype="multipart/form-data">
+    <div class="modal-background"></div>
+    <div class="modal-card">
+      <header class="modal-card-head">
+        <p class="modal-card-title">Submit New Job</p>
+        <button class="delete" aria-label="close" type="button"></button>
+      </header>
+      <section class="modal-card-body">
+        <!--   File Uploader   -->
+
+        <label class="label">Upload File</label>
+        <div id="file-uploader" class="file has-name is-fullwidth">
+          <label class="file-label">
+            <input class="file-input is-small" type="file" name="file">
+            <span class="file-cta">
+            <span class="file-icon">
+              <i class="fas fa-upload"></i>
+            </span>
+            <span class="file-label">
+              Choose a file…
+            </span>
+          </span>
+            <span class="file-name">
+            No File Uploaded
+          </span>
+          </label>
+        </div>
+        <br>
+        <script>
+    const fileInput = document.querySelector('#file-uploader input[type=file]');
+    fileInput.onchange = () => {
+      if (fileInput.files.length > 0) {
+        const fileName = document.querySelector('#file-uploader .file-name');
+        fileName.textContent = fileInput.files[0].name;
+      }
+    }
+
+    const presets = {
+      {% for preset in preset_list: %}
+        {{preset}}: {
+        name: '{{preset_list[preset]['name']}}',
+        renderer: '{{preset_list[preset]['renderer']}}',
+        args: '{{preset_list[preset]['args']}}',
+        },
+      {% endfor %}
+    };
+
+    function rendererChanged(ddl1) {
+
+        var renderers = {
+        {% for renderer in renderer_info: %}
+          {% if renderer_info[renderer]['supported_export_formats']: %}
+          {{renderer}}: [
+            {% for format in renderer_info[renderer]['supported_export_formats']: %}
+            '{{format}}',
+            {% endfor %}
+            ],
+            {% endif %}
+        {% endfor %}
+        };
+
+        var selectedRenderer = ddl1.value;
+
+        var ddl3 = document.getElementById('preset_list');
+        ddl3.options.length = 0;
+        createOption(ddl3, '-Presets-', '');
+        for (var preset_name in presets) {
+          if (presets[preset_name]['renderer'] == selectedRenderer) {
+            createOption(ddl3, presets[preset_name]['name'], preset_name);
+           };
+        };
+        document.getElementById('raw_args').value = "";
+
+        var ddl2 = document.getElementById('export_format');
+        ddl2.options.length = 0;
+        var options = renderers[selectedRenderer];
+        for (i = 0; i < options.length; i++) {
+          createOption(ddl2, options[i], options[i]);
+        };
+      }
+
+      function createOption(ddl, text, value) {
+        var opt = document.createElement('option');
+        opt.value = value;
+        opt.text = text;
+        ddl.options.add(opt);
+      }
+
+      function addPresetTextToInput(presetfield, textfield) {
+        var p = presets[presetfield.value];
+        textfield.value = p['args'];
+      }
+
+      </script>
+
+        <!--   Renderer & Priority   -->
+        <div class="field is-grouped">
+          <p class="control">
+            <label class="label">Renderer</label>
+            <span class="select">
+              <select id="renderer" name="renderer" onchange="rendererChanged(this)">
+                {% for renderer in renderer_info: %}
+                <option name="renderer" value="{{renderer}}">{{renderer}}</option>
+                {% endfor %}
+              </select>
+            </span>
+          </p>
+          <p class="control">
+            <label class="label">Client</label>
+            <span class="select">
+              <select name="client">
+                <option name="client" value="">First Available</option>
+                  {% for client in render_clients: %}
+                <option name="client" value="{{client}}">{{client}}</option>
+                  {% endfor %}
+              </select>
+            </span>
+          </p>
+          <p class="control">
+            <label class="label">Priority</label>
+            <span class="select">
+              <select name="priority">
+              <option name="priority" value="1">1</option>
+              <option name="priority" value="2" selected="selected">2</option>
+              <option name="priority" value="3">3</option>
+              </select>
+            </span>
+          </p>
+        </div>
+
+        <!--   Output Path   -->
+        <label class="label">Output</label>
+        <div class="field has-addons">
+          <div class="control is-expanded">
+            <input class="input is-small" type="text" placeholder="Output Name" name="output_path" value="output.mp4">
+          </div>
+          <p class="control">
+        <span class="select is-small">
+          <select id="export_format" name="export_format">
+            <option value="ar">option</option>
+          </select>
+        </span>
+          </p>
+        </div>
+
+        <!--   Resolution     -->
+<!--        <label class="label">Resolution</label>-->
+<!--        <div class="field is-grouped">-->
+<!--          <p class="control">-->
+<!--            <input class="input" type="text" placeholder="auto" maxlength="5" size="8" name="AnyRenderer-arg_x_resolution">-->
+<!--          </p>-->
+<!--          <label class="label"> x </label>-->
+<!--          <p class="control">-->
+<!--            <input class="input" type="text" placeholder="auto" maxlength="5" size="8" name="AnyRenderer-arg_y_resolution">-->
+<!--          </p>-->
+<!--          <label class="label"> @ </label>-->
+<!--          <p class="control">-->
+<!--            <input class="input" type="text" placeholder="auto" maxlength="3" size="5" name="AnyRenderer-arg_frame_rate">-->
+<!--          </p>-->
+<!--          <label class="label"> fps </label>-->
+<!--        </div>-->
+
+        <label class="label">Command Line Arguments</label>
+        <div class="field has-addons">
+          <p class="control">
+            <span class="select is-small">
+              <select id="preset_list" onchange="addPresetTextToInput(this, document.getElementById('raw_args'))">
+                <option value="preset-placeholder">presets</option>
+              </select>
+            </span>
+          </p>
+          <p class="control is-expanded">
+            <input class="input is-small" type="text" placeholder="Args" id="raw_args" name="raw_args">
+          </p>
+        </div>
+
+        <!--   End Add Form   -->
+      </section>
+      <footer class="modal-card-foot">
+        <input class="button is-link" type="submit"/>
+        <button class="button" type="button">Cancel</button>
+      </footer>
+    </div>
+  </form>
+</div>
+
+</body>
+</html>

lib/server/templates/upload.html

@@ -0,0 +1,62 @@
+<html>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+<script>
+    $(function() {
+  $('#renderer').change(function() {
+    $('.render_settings').hide();
+    $('#' + $(this).val()).show();
+  });
+});
+
+
+</script>
+<body>
+<h3>Upload a file</h3>
+
+<div>
+    <form action="/add_job" method="POST"
+          enctype="multipart/form-data">
+        <div>
+            <input type="file" name="file"/><br>
+        </div>
+
+        <input type="hidden" id="origin" name="origin" value="html">
+
+        <div id="client">
+            Render Client:
+            <select name="client">
+                {% for client in render_clients %}
+                <option value="{{client}}">{{client}}</option>
+                {% endfor %}
+            </select>
+        </div>
+        <div id="priority">
+            Priority:
+            <select name="priority">
+                <option value="1">1</option>
+                <option value="2" selected>2</option>
+                <option value="3">3</option>
+            </select>
+        </div>
+        <div>
+            <label for="renderer">Renderer:</label>
+            <select id="renderer" name="renderer">
+                {% for renderer in supported_renderers %}
+                <option value="{{renderer}}">{{renderer}}</option>
+                {% endfor %}
+            </select>
+        </div>
+        <div id="blender" class="render_settings" style="display:none">
+            Engine:
+            <select name="blender+engine">
+                <option value="CYCLES">Cycles</option>
+                <option value="BLENDER_EEVEE">Eevee</option>
+            </select>
+        </div>
+        <br>
+
+        <input type="submit"/>
+    </form>
+</div>
+</body>
+</html>