Select Text read_text.html

all_html.html

<!-- templates/index_y.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Suggestions</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 1%;
            height: 100%;
            font-family: Arial, sans-serif;
        }

        body {
            background-color: black;
            background-image: url('../static/assets/MemMaker_background.png');
            background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
            color: rgb(61, 195, 12);
        }

        video {
            margin: 10px, auto;
            width: 250px;
            height: auto;
        }

        .wrapper {
            display: flex;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 70vh;
            border: 1px solid darkgray;
            padding: 10px;
        }

        .footer {
            width: 98%;
            padding: 20px;
            background-color: #333;
            color: white;
            text-align: center;
            position: relative;
            /* Make it relative to the container */
            bottom: 0;
            /* Push it to the bottom */
        }
        #code {
            font-size: 18px;
            font-family: monospace;
        }
        .notes {
            margin-top: 0px auto;
            font-size: 18px;
            color: rgb(105, 178, 230);
        }
        
        .sticky {
            position: sticky;
            top: 0;
            z-index: 100;
            background-color: #760909;
            
        }
        .header {
            display: flex;
            align-items: left;
            margin: 0 auto;
            width: 98%;
            padding: 5px;
            text-align: center;
            background-color: #760909;
            color: rgb(238, 232, 201);
            padding: 10px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            margin-left: auto;
            margin-right: auto; 
       }
        .header h2 {
            margin-left: 20px;
        }
        .header button {
            margin-left: 20px;
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            height: 32px;
            font-size: 16px;
            transition: background-color 0.3s ease;
            width: 200px;
        }
        .header button:hover {
            background-color: #45a049;
            height: 36px;
        }
        #search_input {
            height: 30px;
            width: 300px;
            font-size: 16px;
            border: 1px solid #f8e4c4;
            border-radius: 4px;
            margin-left: 20px;
        }
        pre {
            width: 100%;
            white-space: pre-wrap;
            word-wrap: break-word;            
            margin-left:4px;
            font-size: 18px;
            padding-left: 4px;

        }
       a {
            color: white;
            text-decoration: none;
            font-size: 26px;
            margin-left: 20px;
        }
        a:hover {
            color: #f1f1f1;
        }
    
    </style>
<script>
    // Function to find and highlight the search string
    function findString(str) {
        if (parseInt(navigator.appVersion) < 4) return;
        
        // Check if find method is supported
        if (window.find) {
            // Find the search string
            var strFound = window.find(str);
            if (!strFound) {
                // If not found, try to find from the beginning
                window.find(str, 0, 1);
            }
            if (strFound) {
                // Highlight the found text
                var range = window.getSelection().getRangeAt(0);
                var span = document.createElement('span');
                span.style.backgroundColor = 'yellow';
                range.surroundContents(span);
            }
        } else if (navigator.appName.indexOf("Microsoft") != -1) {
            // Handle Microsoft browsers
            // Not implemented for brevity
        } else if (navigator.appName == "Opera") {
            // Handle Opera browsers
            alert("Opera browsers not supported, sorry...");
            return;
        }

        // If not found, show alert
        if (!strFound) alert("String '" + str + "' not found!");
    }

    // Function to move cursor to next occurrence of search input
    function moveToNextOccurrence() {
        var search_str = document.getElementById("search_input").value;
        findString(search_str);
    }
</script>

</head>

<body>
    <div class="wrapper">
        <div class="header sticky">
            <h2>html</h2>&nbsp;&nbsp;&nbsp;&nbsp;
            <button id="search_submit" onclick="moveToNextOccurrence()">Find Next</button>
            <input type="text" id="search_input"><a href="/" target="_blank">HOME</a>
        </div>




<pre style="font-size:24px">
&lt;!-- index.html--&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Home Flask App Builder&lt;/title&gt;
    &lt;style&gt;
        html,
        body &#123;
            margin: 0;
            padding: 1&#37;;
            height: 100&#37;;
            font-family: Arial, sans-serif;
        }

        body &#123;
            background-image: url('../static/assets/MemMaker_background.png');
            background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
        }
        video &#123;
            margin: 10px, auto;
            width: 250px;
            height: auto;
        }

          .wrapper &#123;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;

        }

        .header &#123;
            width: 100&#37;;
            padding: 20px;
            text-align: center;
        }

        .columns &#123;
            display: flex;
            width: 80&#37;;
            margin-top: 20px;
        }

        .column &#123;
            padding: 20px;
            box-sizing: border-box;
        }

        .column.left &#123;
            width: 70&#37;;
            border:    1px solid #000;
        }

        .column.right &#123;
        margin: 0 auto; /* Center horizontally */
        width: 30&#37;;
        border: 1px solid #000;
        text-align: center; /* Center video vertically */
    }

    .column.right video &#123;
        max-width: 100&#37;;
        height: auto;
    }
    .note&#123;
       color:red;
       font-size:24px;
    }
   
        /* Define a class for styling the pre element */
        .styled-pre &#123;
            white-space: pre-wrap; /* Allows text to wrap within the pre element */
            font-family: monospace; /* Choose a monospace font for consistent spacing */
            background-color: #f5f5f5; /* Set a background color for the pre element */
            padding: 10px; /* Add some padding for spacing */
            border: 1px solid #ccc; /* Add a border for separation */
        }
    &lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
    &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h1&gt;HOME index.html&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="columns"&gt;
            &lt;div class="column left"&gt;
                &lt;h3&gt;Create Text&lt;/h3&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('hello') }}"&gt;HOME&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('html_base') }}"&gt;Html_Base&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('home') }}"&gt;home&lt;/a&gt;&lt;br /&gt;

 &lt;pre class="styled-pre"&gt;
    This code is a Flask application with the FlaskWebGui extension. Here's a breakdown of the code:

    You import the necessary modules and set up your Flask app:
        flask is imported for creating the web application.
        FlaskUI is imported from flaskwebgui to integrate Flask with a GUI.
        You set a secret key for your Flask app to enable session management.

    You define three routes for your web application:
        The root route ("/") maps to the hello function, which finds videos and renders an "about.html" template.
        The "/home" route maps to the home function, which renders an "HTML5_Canvas_Cheat_Sheet.html" template.
        The "/about" route maps to the about function, which also finds videos and renders an "about.html" template.
        The "/html_base" route maps to the html_base function, which renders an "html_base.html" template.

    The findvideos function searches for video files with the ".mp4" extension in the "static" directory and returns a randomly selected video that is not the same as the last one. It uses the Flask session to store the last selected video.

    Finally, you check if the script is being run as the main program and, if so, create and run the FlaskWebGui instance, which integrates your Flask app with a GUI.

Regarding your question about enabling debug mode in FlaskWebGui, yes, Flask has a built-in debug mode that automatically reloads the server when code changes occur. To enable debug mode, you can modify your if __name__ == "__main__": block like this:

python

if __name__ == "__main__":
    app.debug = True  # Enable debug mode
    # If you are debugging, you can do that in the browser:
    # If you want to view the flaskwebgui window:
    FlaskUI(app=app, server="flask").run()

Now, when you make changes to your code, Flask will automatically reload the server, making debugging more convenient. Just be cautious not to use debug mode in production as it can expose sensitive information.
=================================================================================
it appears flaskwebgui can not deal with javascript is that true ?
ChatGPT

FlaskWebGui is primarily designed to integrate Flask applications with graphical user interfaces (GUIs) for desktop applications. It provides a way to run a Flask app as a desktop application using a graphical window. However, FlaskWebGui may have limitations when it comes to running JavaScript directly within the GUI window.

Here are some points to consider:

    Limited JavaScript Support: FlaskWebGui focuses on rendering Flask web pages within a desktop GUI window. While you can include JavaScript code in your HTML templates, it may not fully support complex JavaScript interactions or libraries that rely heavily on the browser environment.

    Desktop vs. Web Environment: FlaskWebGui is meant to provide a desktop-like experience for Flask applications. JavaScript in web applications typically interacts with the browser's Document Object Model (DOM) and may not behave the same way within a desktop GUI.

    Compatibility: Certain JavaScript features or libraries that depend on specific browser features or APIs may not work seamlessly within FlaskWebGui. This can limit the functionality of web-based JavaScript components.

    Debugging: Debugging JavaScript within FlaskWebGui may be more challenging compared to traditional web browsers, as debugging tools commonly used in web development may not be readily available.

If your Flask application relies heavily on complex JavaScript interactions, you may encounter limitations when using FlaskWebGui. In such cases, you might consider using Flask primarily for server-side functionality and building a separate web-based front end for your application using a more traditional approach, like a web browser.

However, for simpler Flask applications that require a desktop-like interface, FlaskWebGui can be a convenient solution. It's essential to assess your specific project's requirements and whether FlaskWebGui aligns with your goals for running a Flask app as a desktop application.
------------------------ Example Complete GUI app ----  GUI.py --------------------
#!/home/jack/Desktop/FlaskAppArchitect_Flask_App_Creator/env/bin/python
# -*- coding: utf-8 -*-
from flask import render_template, session, Flask, request, redirect, url_for
from flaskwebgui import FlaskUI # import FlaskUI
import os 
import random
import datetime
app = Flask(__name__)
app.secret_key = os.urandom(24)

@app.route("/")
def hello():  
    video=findvideos()
    return render_template('about.html', video=video)

@app.route("/home", methods=['GET'])
def home(): 
    return render_template('HTML5_Canvas_Cheat_Sheet.html')

@app.route("/about", methods=['GET'])
def about():     
    video=findvideos()
    return render_template('about.html', video=video)
@app.route("/html_base", methods=['GET'])
def html_base(): 
    with open('static/code.txt', 'r') as file:
        code_content = file.read()

    return render_template('your_template.html', code_content=code_content)


def findvideos():
    videoroot_directory = "static"
    MP4 = []
    for dirpath, dirnames, filenames in os.walk(videoroot_directory):
        for filename in filenames:
            if filename.endswith(".mp4") and "Final" in filename:
                MP4.append(os.path.join(dirpath, filename))
    if MP4:
        last_video = session.get("last_video")
        new_video = random.choice([video for video in MP4 if video != last_video])
        session["last_video"] = new_video
        return new_video
    else:
        return None
template_dir = 'templates'
original_template_dir = os.path.join(template_dir, 'original')
os.makedirs(original_template_dir, exist_ok=True)


def load_original_template_file(filename):
    original_file_path = os.path.join(template_dir, filename)
    with open(original_file_path, 'r') as file:
        return file.read()


def save_original_template_file(filename, content):
    now = datetime.datetime.now().strftime("&#37;Y&#37;m&#37;d_&#37;H&#37;M&#37;S")
    new_filename = f"&#123;filename}_&#123;now}.txt"
    new_file_path = os.path.join(original_template_dir, new_filename)
    with open(new_file_path, 'w') as file:
        file.write(content)


def edit_and_save_template_file(filename, content):
    save_original_template_file(filename, content)
    edited_file_path = os.path.join(template_dir, filename)
    with open(edited_file_path, 'w') as file:
        file.write(content)


@app.route('/edit_template')
def edit_template():
    filenames = [f for f in os.listdir(template_dir) if f.endswith('.html')]
    filenames = sorted(filenames)
    fvideo ="static/assets/voice-for_avatar_Edit_Files.mp4"
    return render_template('edit_template.html', filenames=filenames, video=fvideo)


@app.route('/edit_template_page')
def edit_template_page():
    selected_filename = request.args.get('filename')
    original_content = load_original_template_file(selected_filename)
    return render_template('edit_template_page.html', selected_filename=selected_filename, original_content=original_content)


@app.route('/edit_template_save', methods=['POST'])
def edit_template_save():
    edited_content = request.form['edited_content']
    selected_filename = request.form['filename']
    edit_and_save_template_file(selected_filename, edited_content)
    return redirect(url_for('edit_template'))



    
if __name__ == "__main__":
    app.debug = True  # Enable debug mode
    # If you are debugging, you can do that in the browser:
    # If you want to view the flaskwebgui window:
    FlaskUI(app=app, server="flask").run()

 &lt;/pre&gt;            
            &lt;/div&gt;
            &lt;div class="column right"&gt;
                &lt;h2&gt;Random Video&lt;/h2&gt;
                &lt;video controls&gt;
                    &lt;source src="&#123;&#123; video }}" type="video/mp4"&gt;
                    Your browser does not support the video tag.
                &lt;/video&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

&lt;!-- index.html--&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Home Flask App Builder&lt;/title&gt;
    &lt;style&gt;
        html,
        body &#123;
            margin: 0;
            padding: 1&#37;;
            height: 100&#37;;
            font-family: Arial, sans-serif;
        }

        body &#123;
            background-image: url('../static/assets/MemMaker_background.png');
            background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
        }
        video &#123;
            margin: 10px, auto;
            width: 250px;
            height: auto;
        }

          .wrapper &#123;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;

        }

        .header &#123;
            width: 100&#37;;
            padding: 20px;
            text-align: center;
        }

        .columns &#123;
            display: flex;
            width: 80&#37;;
            margin-top: 20px;
        }

        .column &#123;
            padding: 20px;
            box-sizing: border-box;
        }

        .column.left &#123;
            width: 30&#37;;
            border:    1px solid #000;
        }

        .column.right &#123;
        margin: 0 auto; /* Center horizontally */
        width: 60&#37;;
        border: 1px solid #000;
        text-align: center; /* Center video vertically */
    }

    .column.right video &#123;
        max-width: 100&#37;;
        height: auto;
    }
    .note&#123;
       color:red;
       font-size:24px;
    }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h1&gt;HOME index.html&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="columns"&gt;
            &lt;div class="column left"&gt;
                &lt;h3&gt;Create Text&lt;/h3&gt;&lt;br /&gt;
                &lt;a class="note" href="&#123;&#123; url_for('edit_template_page', filename='about.html') }}"&gt;Edit This Page&lt;/a&gt;&lt;/li&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('app_utilities') }}"&gt;Application Utilities&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('image_video') }}"&gt;Image and Video Processing Links&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('index_canvas') }}"&gt;Project Canvas&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_javascript') }}"&gt;Project JavaScript&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_template') }}"&gt;Edit Links Listed Below&lt;/a&gt;&lt;p&gt;Edit Index - Edit CSS Files - Edit Canvas
 JS - Edit Formatted Text  - Edit FlaskAppArchitect Description - Edit Formatted Text&lt;/p&gt;
                &lt;/p&gt;
                &lt;a href="&#123;&#123; url_for('data_page') }}"&gt;Data Page - Snippets,Search ChatGPT,Sqlite3&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_file') }}"&gt;Edit File&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_formatted') }}"&gt;Edit Formatted Text&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_description') }}"&gt;Edit Description&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('misc_links') }}"&gt;This page contains all active links(I hope)&lt;/a&gt;&lt;br /&gt;
            &lt;/div&gt;
            &lt;div class="column right"&gt;
                &lt;h2&gt;Random Video&lt;/h2&gt;
                &lt;video controls&gt;
                    &lt;source src="&#123;&#123; video }}" type="video/mp4"&gt;
                    Your browser does not support the video tag.
                &lt;/video&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Add Border&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Add Border&lt;/h1&gt;
    &#123;&#37; for thumbnail in thumbnails &#37;}
      &lt;a href="&#123;&#123; url_for('select_border', image=thumbnail.replace('thumbnail_', '')) }}"&gt;
        &lt;img src="&#123;&#123; url_for('static', filename='thumbnails/'+thumbnail) }}" alt="&#123;&#123; thumbnail }}" style="border: 10px solid transparent; box-shadow: 0 0 0 10px #fff, 0 0 0 15px #faf8f8;"&gt;
      &lt;/a&gt;
    &#123;&#37; endfor &#37;}
  &lt;/body&gt;
&lt;/html&gt;

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Add Border&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Add Border&lt;/h1&gt;
    &#123;&#37; for thumbnail in thumbnails &#37;}
      &lt;a href="&#123;&#123; url_for('select_border', image=thumbnail.replace('thumbnail_', '')) }}"&gt;
        &lt;img src="&#123;&#123; url_for('static', filename='thumbnails/'+thumbnail) }}" alt="&#123;&#123; thumbnail }}" style="border: 10px solid transparent; box-shadow: 0 0 0 10px #fff, 0 0 0 15px #faf8f8;"&gt;
      &lt;/a&gt;
    &#123;&#37; endfor &#37;}
  &lt;/body&gt;
&lt;/html&gt;

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;title&gt;Final video&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;video width="640" height="480" controls&gt;
  		&lt;source src="&#123;&#123; video_file }}" type="video/mp4"&gt;
  		Your browser does not support the video tag.
	&lt;/video&gt;
&lt;/body&gt;
&lt;/html&gt;

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Add MP4 Files&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Add MP4 Files&lt;/h1&gt;
    &lt;form method="POST" enctype="multipart/form-data"&gt;
        &lt;label for="mp4_file"&gt;Select an MP4 file:&lt;/label&gt;
        &lt;input type="file" name="mp4_file" id="mp4_file" accept=".mp4" required&gt;
        &lt;br&gt;
        &lt;input type="submit" value="Upload"&gt;
    &lt;/form&gt;
    &lt;a href="&#123;&#123; url_for('delete_files') }}"&gt;clean the static/images/mp4_images/ directory&lt;/a&gt;&lt;br /&gt;
&lt;/body&gt;
&lt;/html&gt;

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Add Text&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Add Text&lt;/h1&gt;
    &#123;&#37; if message &#37;}
        &lt;p&gt;&#123;&#123; message }}&lt;/p&gt;
    &#123;&#37; endif &#37;}
    &lt;form method="POST"&gt;
        &lt;label for="text"&gt;Text:&lt;/label&gt;
        &lt;textarea name="text" id="text"&gt;&lt;/textarea&gt;
        &lt;br&gt;
        &lt;input type="submit" value="Add Text"&gt;
    &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Add Title to Video&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Add Title to Video&lt;/h1&gt;
    &lt;form method="POST"&gt;
        &lt;label for="video"&gt;Select a video:&lt;/label&gt;
        &lt;select name="video" id="video"&gt;
            &#123;&#37; for video in videos &#37;}
            &lt;option value="&#123;&#123; video }}"&gt;&#123;&#123; video }}&lt;/option&gt;
            &#123;&#37; endfor &#37;}
        &lt;/select&gt;
        &lt;br&gt;
        &lt;label for="title_page"&gt;Select a title page:&lt;/label&gt;
        &lt;select name="title_page" id="title_page"&gt;
            &#123;&#37; for title_page in title_pages &#37;}
            &lt;option value="&#123;&#123; title_page }}"&gt;&#123;&#123; title_page }}&lt;/option&gt;
            &#123;&#37; endfor &#37;}
        &lt;/select&gt;
        &lt;br&gt;
        &lt;input type="submit" value="Add Title"&gt;
    &lt;/form&gt;
    &#123;&#37; if final &#37;}
    &lt;h2&gt;Final Video:&lt;/h2&gt;
    &lt;video src="&#123;&#123; url_for('static', filename=final) }}" controls&gt;&lt;/video&gt;
    &#123;&#37; endif &#37;}
&lt;/body&gt;
&lt;/html&gt;&lt;!-- aigeneration_links.html--&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;AI Info and Generation Links&lt;/title&gt;
    &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/flask.css') }}"&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/base.css') }}"&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h1&gt;AI Info and Generation Links&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="columns"&gt;
            &lt;div class="column left"&gt;
                &lt;h3&gt;Links&lt;/h3&gt;&lt;br /&gt;
                &lt;li&gt; &lt;a href="/home/jack/Desktop/misc/UsingConvert.html" target="_blank"&gt;UsingConvert&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt; &lt;a href="https://dreamlike.art/create" target="_blank"&gt;GOOD-dreamlike.art/create&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt; &lt;a href="/home/jack/Desktop/misc/color.html" target="_blank"&gt;ColorPicker&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt; &lt;a href=" https://www.reddit.com/" target="_blank"&gt;Reddit.com/ &lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://bhaasha.iiit.ac.in/lipsync/" target="_blank"&gt;lipsync/&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://www.google.com" target="_blank"&gt;Google&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://www.facebook.com" target="_blank"&gt;Facebook&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://www.youtube.com" target="_blank"&gt;Youtube&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://app.blasteronline.com/speechelo" target="_blank"&gt;Speechelo&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://lexica.art/" target="_blank"&gt;https://lexica.art/&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://www.mage.space/explore" target="_blank"&gt;https://www.mage.space/explore&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://www.tiktok.com/foryou?is_copy_url=1&is_from_webapp=v1"
                        target="_blank"&gt;tiktok.com&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://www.tiktok.com/@insectsmatters" target="_blank"&gt;@insectsmatters&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://www.tiger-algebra.com/drill/5x~5-1080x~2/" target="_blank"&gt;tiger-algebra.com&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="http://217.21.78.160/" target="_blank"&gt;http://217.21.78.160/&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://openclipart.org/" target="_blank"&gt;penclipart.org&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://www.edureka.co/community/" target="_blank"&gt;edureka.co/community&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://cdnlogo.com/svg-editor/" target="_blank"&gt;https://cdnlogo.com/svg-editor/&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://pollinations.ai/" target="_blank"&gt;https://pollinations.ai/&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="http://www.frontiernet.net/~eugene.ressler/" target="_blank"&gt;frontiernet.net&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://www.pinterest.ph/grahamwallwork/julian-jordanov/"
                        target="_blank"&gt;julian-jordanov&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://miktex.org/" target="_blank"&gt;miktex.org/&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://huggingface.co/spaces/stabilityai/stable-diffusion"
                        target="_blank"&gt;stabilityai/stable-diffusion&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://dreamlike.art/" target="_blank"&gt;GOOD - currently down for maint&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://trinket.io/python/f7ad7f9864" target="_blank"&gt;trinket.io/python&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://www.pythonsandbox.com/turtle" target="_blank"&gt;pythonsandbox.com/turtle&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a
                        href="https://sites.google.com/view/liviatheodoramidjourney/home?pli=1"&gt;liviatheodoramidjourney&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="https://replicate.com/methexis-inc/img2prompt"&gt;img2prompt&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://imageeditor.app/?new" target="_blank"&gt; Imageeditor&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://huggingface.co/prompthero/poolsuite-diffusion"
                        target="_blank"&gt;poolsuite-diffusion&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://huggingface.co/prompthero/openjourney" target="_blank"&gt;prompthero/openjourney&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="https://hotpot.ai/" target="_blank"&gt; https://hotpot.ai/&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://hotpot.ai/art-generator" target="_blank"&gt; https://hotpot.ai/art-generator&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://drive.internxt.com/app" target="_blank"&gt; https://drive.internxt.com/app&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://openlibrary.org/" target="_blank"&gt;openlibrary.org/&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://civitai.com/" target="_blank"&gt;civitai.com/ &lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://rentry.org/sdhassan#merged-models" target="_blank"&gt;rentry.org/sdhassan&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://civitai.com/models/2661/uber-realistic-porn-merge-urpm"
                        target="_blank"&gt;realistic-porn-merge-urpm&lt;/a&gt;&lt;/li&gt;
            &lt;/div&gt;
            &lt;div class="column"&gt;
                &lt;h3&gt;Links&lt;/h3&gt;&lt;br /&gt;
                &lt;li&gt;&lt;a href="https://huggingface.co/prompthero/openjourney"
                        target="_blank"&gt;huggingface-prompthero/openjourney&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://playgroundai.com/search?q=princess" target="_blank"&gt;playgroundai.com&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://openart.ai/" target="_blank"&gt;openart.ai/&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://lexica.art/?q=004602d4-b0ed-4697-8cb3-526b3e918217" target="_blank"&gt;lexica.art&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="https://ideogram.ai/" target="_blank"&gt;ideogram.ai&lt;/a&gt;&lt;/li&gt;&lt;br /&gt;
                &lt;li&gt;&lt;a href="https://app.prodia.com/#/" target="_blank"&gt;FREE app.prodia.com/#/&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://huggingface.co/ProGamerGov/Min-Illust-Background-Diffusion?target="
                        _blank"&gt;huggingface Background&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://huggingface.co/spaces/microsoft/Promptist" target="_blank"&gt;microsoft/Promptist&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="https://huggingface.co/wavymulder/portraitplus"
                        target="_blank"&gt;huggingface.co/wavymulder/portraitplus&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://huggingface.co/johnslegers/epic-diffusion"
                        target="_blank"&gt;johnslegers/epic-diffusion&lt;/a&gt; &lt;/li&gt;
                &lt;li&gt;&lt;a href="https://huggingface.co/darkstorm2150/Protogen_Infinity_Official_Release"
                        target="_blank"&gt;huggingface Protogen_Infinity&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://www.upscale.media/upload" target="_blank"&gt;Free - upscaler&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://www.coingecko.com/en/coins/lbry-credits" target="_blank"&gt;lbry-credits&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://odysee.com/" target="_blank"&gt;odysee.com&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://dreamlike.art/create" target="_blank"&gt;https://dreamlike.art/create&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://huggingface.co/spaces/microsoft/Promptist" target="_blank"&gt;microsoft/Promptist&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="https://huggingface.co/prompthero/openjourney" target="_blank"&gt;VERY
                        GOODprompthero/openjourney&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://developers.google.com/youtube/v3/quickstart/python"
                        target="_blank"&gt;google/youtube/v3/developers&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://huggingface.co/CompVis/stable-diffusion-v1-4?text=mdjrny-v4+style+scary&#37;2C+dirty&#37;2C+paint+peeling&#37;2C+muddy&#37;2C+oily&#37;2C+dystopian++gypsy+princess+centered+face&#37;2C+portrait&#37;2C+style+of+H.+G.+Giger"
                        target="_blank"&gt;stable-diffusion-v1-4 Giger&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://beta.elevenlabs.io/voice-lab" target="_blank"&gt;elevenlabs.io/voice-lab&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://studio.d-id.com/" target="_blank"&gt;https://studio.d-id.com/&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://linktr.ee/ai_studio" target="_blank"&gt;ai_studio&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://paraphrasingtool.ai/" target="_blank"&gt;paraphrasingtool.ai&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://huggingface.co/coreco/seek.art_MEGA"
                        target="_blank"&gt;https://huggingface.co/coreco/seek.art_MEGA&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://bhaasha.iiit.ac.in/lipsync/" target="_blank"&gt;lipsync/&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://y2mate.guru/y2mate2" target="_blank"&gt;Download Unlisted videos&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://app.leonardo.ai/ai-generations" target="_blank"&gt;leonardo.ai/ai-generations&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://huggingface.co/prompthero/openjourney?text=&#37;27mdjrny-v4+style&#37;27++A+wide+angle+colored+line+art+drawing+of+a+beautiful+female+half+human+cyborg+in+a+futuristic+25th+century+city+street&#37;2C++highly+detailed&#37;2C+psytrance+art+style&#37;2C+golden+bikini&#37;2C+back+alley+shot&#37;2C+wide+shot&#37;2C+diagonal+view+of+subject&#37;2C+highly+detailed&#37;2C+monochromatic&#37;2C+graphic+novel&#37;2C+steampunk"
                        target="_blank"&gt;graphic+novel&#37;2C+steampunk&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://huggingface.co/spaces/phenomenon1981/Dreamlikeart-Anime-1.0"
                        target="_blank"&gt;Dreamlikeart-Anime&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://podcast.adobe.com/enhance" target="_blank"&gt;https://podcast.adobe.com/enhance&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="https://huggingface.co/spaces/Daniton/MidJourney"
                        target="_blank"&gt;huggingface/Daniton/MidJourney&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://app.runwayml.com/video-tools/teams/madhatterstamps/ai-tools/gen-1"
                        target="_blank"&gt;https://app.runwayml.com/video-tools/teams/madhatterstamps/ai-tools/gen-1&lt;/a&gt;
                &lt;/li&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="https://stackoverflow.com/questions/52811041/how-can-i-use-the-same-route-for-multiple-functions-in-flask"
                        target="_blank"&gt;@app.route('/chopsticks/') @app.route('/chopsticks/&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://clipdrop.co/stable-diffusion"
                        target="_blank"&gt;https://clipdrop.co/stable-diffusion&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://www.turing.com/kb/build-flask-routes-in-python"
                        target="_blank"&gt;build-flask-routes-in-python&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://www.turing.com/kb/build-flask-routes-in-python" target="_blank"&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="file:///mnt/HDD500/0WORKSHOP-with-NOTEBOOKS/chat/chat/chat.html"
                        target="_blank"&gt;chat.html&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://www.digitalocean.com/community/tutorials/how-to-structure-a-large-flask-application-with-flask-blueprints-and-flask-sqlalchemy"
                        target="_blank"&gt;blueprints-and-flask-sqlalchemy&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://ask.replit.com/t/using-a-function-to-route-several-pages-in-flask/15563"
                        target="_blank"&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://huggingface.co/prompthero/openjourney?text=&#37;27mdjrny-v4+style&#37;27+A+beautiful+++space+creature&#37;2C+half+alien&#37;2Chalf+robot&#37;2C+cyborg+&#37;2C+facing+forward+towards+camera&#37;2Cwith+a+vibrant+Native+American+carnival+costume&#37;2C+her+face+painted+with+intricate+tribal+designs."
                        target="_blank"&gt;half+robot&#37;2C+cyborg&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://tedboy.github.io/flask/interface_api.useful_funcs.html"
                        target="_blank"&gt;api.useful_funcs.html&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://xkcd.com/50/" target="_blank"&gt;https://xkcd.com/50/&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://openart.ai/create?username=neanderthal_darling_28&prompt=Monster&#37;2520has&#37;2520a&#37;2520lot&#37;2520of&#37;2520red&#37;2520shades&#37;2520and&#37;2520black&#37;2520colors&#37;2C&#37;2520there&#37;2520is&#37;2520a&#37;2520green&#37;2520leafy&#37;2520forest&#37;2520background&#37;2520terrifying&#37;2520mutant&#37;2520goblin&#37;2520combined&#37;2520with&#37;2520large&#37;2520fat&#37;2520hissing&#37;2520cockroach&#37;2C&#37;2520gothic&#37;2520art&#37;2C&#37;2520popping&#37;2520color&#37;2C&#37;2520detailed&#37;2C&#37;2520eerie&#37;2C&#37;2520emotional&#37;2C&#37;2520gothic&#37;2C&#37;2520highly&#37;2520detailed&#37;2C&#37;2520incredibly&#37;2520sharp&#37;2520focus&#37;2C&#37;2520Artstation&#37;2C&#37;2520deviantart&#37;2C&#37;2520artgem&#37;2C&#37;2520insane&#37;2520detail&#37;2C&#37;2520intense&#37;2520color&#37;2C&#37;2520vibrant&#37;2520cartoon&#37;2520art&#37;2C&#37;2520award-winning&#37;2520art&#37;2C&#37;2520French&#37;2520comic&#37;2520art&#37;2C&#37;25208k&#37;2C&#37;2520super&#37;2520precise&#37;2520detail&#37;2C&#37;2520golden&#37;2520ratio&#37;2C&#37;2520in&#37;2520the&#37;2520style&#37;2520of&#37;2520Heavy&#37;2520Metal&#37;2520Comics&ai_model=runwayml&#37;2Fstable-diffusion-v1-5&cfg_scale=7&steps=25&width=512&height=512&sampler=dpmsolver&#37;2B&#37;2B&negative_prompt=&seed=170386247"
                        target="_blank"&gt;openart.ai/&lt;/a&gt;&lt;/li&gt;
            &lt;/div&gt;


        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;&lt;a href="&#123;&#123; url_for('hello_world') }}"&gt;hello_world&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('create_avatar') }}"&gt;create_avatar&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('run_command') }}"&gt;run_command&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('convert_mp3_to_wav') }}"&gt;convert_mp3_to_wav&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('final_lipsync') }}"&gt;final_lipsync&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('text_mp3') }}"&gt;text_mp3&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('mp3_upload') }}"&gt;mp3_upload&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('generate_video') }}"&gt;generate_video&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('apply_text_to_video') }}"&gt;apply_text_to_video&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('get_files') }}"&gt;get_files&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('image_list') }}"&gt;image_list&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('upload') }}"&gt;upload&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('mkblend_video') }}"&gt;mkblend_video&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('mkblend_videos') }}"&gt;mkblend_videos&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('generate_vid') }}"&gt;generate_vid&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('upload_file') }}"&gt;upload_file&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('make_text') }}"&gt;make_text&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('home') }}"&gt;home&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('choose_dir') }}"&gt;choose_dir&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('convert') }}"&gt;convert&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('convert512') }}"&gt;convert512&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('mk_text') }}"&gt;mk_text&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('list_files') }}"&gt;list_files&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('format_file') }}"&gt;format_file&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('view_text') }}"&gt;view_text&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('view_text') }}"&gt;view_text&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('edit_file') }}"&gt;edit_file&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('edit_formatted') }}"&gt;edit_formatted&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('indeX') }}"&gt;indeX&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('resize_and_overlay_videos') }}"&gt;resize_and_overlay_videos&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('resize_and_overlay_videos_page') }}"&gt;resize_and_overlay_videos_page&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('build_stackedvids') }}"&gt;build_stackedvids&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('build_stackedvid') }}"&gt;build_stackedvid&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('get_gallery') }}"&gt;get_gallery&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('flask_info') }}"&gt;flask_info&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('add_effects') }}"&gt;add_effects&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('select_order') }}"&gt;select_order&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('large_video') }}"&gt;large_video&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('add_border') }}"&gt;add_border&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('select_border') }}"&gt;select_border&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('apply_border') }}"&gt;apply_border&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('select_border_image') }}"&gt;select_border_image&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('overlay_text') }}"&gt;overlay_text&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('create_text_file') }}"&gt;create_text_file&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('generate_video3') }}"&gt;generate_video3&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('generate_video2') }}"&gt;generate_video2&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('ffmpeg_ctl') }}"&gt;ffmpeg_ctl&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('mkmoz') }}"&gt;mkmoz&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('mk_background') }}"&gt;mk_background&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('mkvid') }}"&gt;mkvid&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('mkvid2') }}"&gt;mkvid2&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('view_thumbs') }}"&gt;view_thumbs&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('add_text') }}"&gt;add_text&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('search_txt') }}"&gt;search_txt&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('blend_pil') }}"&gt;blend_pil&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('process_images') }}"&gt;process_images&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('image_directories') }}"&gt;image_directories&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('select_playmp3') }}"&gt;select_playmp3&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('make_animation') }}"&gt;make_animation&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('title_page') }}"&gt;title_page&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('add_title') }}"&gt;add_title&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('indexA') }}"&gt;indexA&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('index_FLASK') }}"&gt;index_FLASK&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('indexD') }}"&gt;indexD&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('products') }}"&gt;products&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('access_database') }}"&gt;access_database&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('indexE') }}"&gt;indexE&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('outline_j') }}"&gt;outline_j&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('outline_p') }}"&gt;outline_p&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('upload_form') }}"&gt;upload_form&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('process_imagez') }}"&gt;process_imagez&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('indexdb') }}"&gt;indexdb&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('Index') }}"&gt;Index&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('edit_data_page') }}"&gt;edit_data_page&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('edit_data_page') }}"&gt;edit_data_page&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('get_rowid_form') }}"&gt;get_rowid_form&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('search_database') }}"&gt;search_database&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('insert_data') }}"&gt;insert_data&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('enter_code') }}"&gt;enter_code&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('search_code') }}"&gt;search_code&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('tube_index') }}"&gt;tube_index&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('data_page') }}"&gt;data_page&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('capture_overlay_verify') }}"&gt;capture_overlay_verify&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('create_text') }}"&gt;create_text&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('view_log') }}"&gt;view_log&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('self_check') }}"&gt;self_check&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('view_flake8') }}"&gt;view_flake8&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('feather_files') }}"&gt;feather_files&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('word_cloud') }}"&gt;word_cloud&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('edit_text') }}"&gt;edit_text&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('edit_text_page') }}"&gt;edit_text_page&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('edit_text_save') }}"&gt;edit_text_save&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('the_description') }}"&gt;the_description&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('run') }}"&gt;run&lt;/a&gt;&lt;br /&gt;
&lt;a href="&#123;&#123; url_for('execute') }}"&gt;execute&lt;/a&gt;&lt;br /&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Applied Border&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;View Applied Border&lt;/h1&gt;
    &#123;&#37; if error_message &#37;}
    &lt;p style="color:red"&gt;&#123;&#123; error_message }}&lt;/p&gt;
    &#123;&#37; endif &#37;}
    &lt;img src="&#123;&#123; url_for('static', filename='images/'+image) }}" alt="&#123;&#123; image }}" style="border: 10px solid transparent; box-shadow: 0 0 0 10px #fff, 0 0 0 15px #000;"&gt;
    &lt;br&gt;
    &lt;img src="&#123;&#123; url_for('static', filename='transparent_borders/'+border) }}" alt="&#123;&#123; border }}" style="position: absolute; top: 0; left: 0;"&gt;
  &lt;/body&gt;
&lt;/html&gt;
&lt;!-- app_utilities.html--&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;App Utilities&lt;/title&gt;
    &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/flask.css') }}"&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/base.css') }}"&gt;
&lt;style&gt;
video&#123;
width:250px;
height:auto;
}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h1&gt;App Utilities&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="columns"&gt;
            &lt;div class="column left"&gt;
&lt;a style="font-size:30px;color:red;" href="&#123;&#123; url_for('index') }}"&gt;HOME&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('processing_text') }}"&gt;Processing Text Files&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('the_description') }}"&gt;View FlaskAppArchitect Description&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_description') }}"&gt;Edit FlaskAppArchitect Description&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('enter_code') }}"&gt;Enter Code in codehints.txt&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('search_code') }}"&gt;Search Code Hints&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;!-- Link to the api_search route --&gt;
                &lt;a href="/api_search/"&gt;Search Internet (Record Results)&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('access_database') }}"&gt;Acess Sqlite3 Database&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('products') }}"&gt;Add to Sqlite3 Database&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('self_check') }}"&gt;View Errors in App&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('view_log') }}"&gt;View App Log&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('capture_html') }}"&gt;Capture Screen _ Video&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_css') }}"&gt;Edit Css Files&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('terminal_index') }}"&gt;Terminal Emulator&lt;/a&gt;&lt;br /&gt;
             
            &lt;/div&gt;
            &lt;div class="column right"&gt;
                &lt;h2&gt;Random Video&lt;/h2&gt;
                &lt;p&gt;This will eventually be an instruction video on how to use this page&lt;/p&gt;&lt;br /&gt;

                &lt;video controls&gt;
                    &lt;source src="&#123;&#123; video }}" type="video/mp4"&gt;
                    Your browser does not support the video tag.
                &lt;/video&gt;

            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;&#123;&#37; block title &#37;}&#123;&#37; endblock &#37;}&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="container"&gt;
        &#123;&#37; block content &#37;}&#123;&#37; endblock &#37;}
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;&#123;&#37; block title &#37;}&#123;&#37; endblock &#37;}&lt;/title&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/bootstrap.min.css') }}"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;nav class="navbar navbar-expand-lg navbar-light bg-light"&gt;
      &lt;a class="navbar-brand" href="#"&gt;My App&lt;/a&gt;
      &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"&gt;
        &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;div class="collapse navbar-collapse" id="navbarNav"&gt;
        &lt;ul class="navbar-nav"&gt;
          &lt;li class="nav-item active"&gt;
            &lt;a class="nav-link" href="&#123;&#123; url_for('index') }}"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="&#123;&#123; url_for('thumbnails') }}"&gt;Thumbnails&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
    &lt;div class="container-fluid"&gt;
      &#123;&#37; block content &#37;}
      &#123;&#37; endblock &#37;}
    &lt;/div&gt;
    &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"&gt;&lt;/script&gt;

  &lt;/body&gt;
&lt;/html&gt;
&lt;!doctype html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Blend Images Using PIL&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Blend Images Using PIL&lt;/h1&gt;
    &lt;form method="POST" enctype="multipart/form-data"&gt;
      &lt;label for="img1"&gt;Select the first image:&lt;/label&gt;
      &lt;input type="file" id="img1" name="img1"&gt;&lt;br&gt;&lt;br&gt;

      &lt;label for="img2"&gt;Select the second image:&lt;/label&gt;
      &lt;input type="file" id="img2" name="img2"&gt;&lt;br&gt;&lt;br&gt;

      &lt;label for="img3"&gt;Select the third image:&lt;/label&gt;
      &lt;input type="file" id="img3" name="img3"&gt;&lt;br&gt;&lt;br&gt;

      &lt;input type="submit" value="Blend Images"&gt;
    &lt;/form&gt;
    
    &lt;img src="&#123;&#123; url_for('static', filename='blended_pil.jpg') }}" alt="Blended Image"&gt;
    
  &lt;/body&gt;
&lt;/html&gt;

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Square Video&lt;/title&gt;
    &lt;style&gt;
      .resizedvideo &#123;
        width: 200px;
        height: auto;
      }
  &lt;/style&gt; 
  &lt;/head&gt;
  &lt;body&gt;
    &lt;a href="&#123;&#123; url_for('index') }}"&gt;RETURN HOME&lt;/a&gt;&lt;br /&gt;
    &lt;video class="resizedvideo" controls&gt;
      &lt;source src="&#123;&#123; stackedvid_url }}" type="video/mp4"&gt;
    &lt;/video&gt;
  &lt;/body&gt;
&lt;/html&gt;
&lt;!-- build_stackedvids.html --&gt;

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Build Stacked Videos&lt;/title&gt;
    &lt;style&gt;
        .resizedvideo &#123;
          width: 200px;
          height: 200px;
        }
    &lt;/style&gt;    
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Build Stacked Videos&lt;/h1&gt;
    &lt;form action="/generate_stackedvids" method="POST"&gt;
        &lt;label for="video"&gt;Select a Video:&lt;/label&gt;
        &lt;select name="video" id="video"&gt;
            &#123;&#37; for video_file in video_files &#37;}
            &lt;option value="&#123;&#123; video_file }}"&gt;&#123;&#123; video_file }}&lt;/option&gt;
            &#123;&#37; endfor &#37;}
        &lt;/select&gt;
        &lt;br&gt;&lt;br&gt;
        &lt;label for="image"&gt;Select an Image:&lt;/label&gt;
        &lt;select name="image" id="image"&gt;
            &#123;&#37; for image_file in image_files &#37;}
            &lt;option value="&#123;&#123; image_file }}"&gt;&#123;&#123; image_file }}&lt;/option&gt;
            &#123;&#37; endfor &#37;}
        &lt;/select&gt;
        &lt;br&gt;&lt;br&gt;
        &lt;input type="submit" value="Generate Stacked Videos"&gt;
    &lt;/form&gt;

    &lt;video controls class="resizedvideo"&gt;
        &lt;source src="static/stacked_vids/stacked_videos.mp4" type="video/mp4"&gt;
        Your browser does not support the video tag.
      &lt;/video&gt;&lt;br /&gt;

    
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Canvas Example Page&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Canvas Circle&lt;/h1&gt;
    &lt;canvas id="myCanvas" width="500" height="500"&gt;&lt;/canvas&gt;

    &lt;script src="&#123;&#123; url_for('static', filename='canvas/main3.js') }}"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Capture Video&lt;/title&gt;
     &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/flask.css') }}"&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/base.css') }}"&gt;
&lt;body&gt;
        &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h1&gt;Video Capture&lt;/h1&gt;
        &lt;/div&gt;
    

&lt;div class="columns"&gt;
&lt;div class="column"&gt;
&lt;!-- Include jQuery --&gt;
&lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt;

&lt;button id="start-button"&gt;Start Capture&lt;/button&gt;
&lt;button id="stop-button"&gt;Stop Capture&lt;/button&gt;

&lt;script&gt;
    $(document).ready(function() &#123;
        $('#start-button').click(function() &#123;
            $.post('/run_capture', function(data) &#123;
                alert(data.message);
            });
        });

        $('#stop-button').click(function() &#123;
            $.post('/stop_capture', function(data) &#123;
                alert(data.message);
            });
        });
    });
&lt;/script&gt;
&lt;/div&gt;
&lt;div class=column"&gt;
                &lt;video controls&gt;
                    &lt;source src="static/videos/Current.mp4" type="video/mp4"&gt;
                    Your browser does not support the video tag.
                &lt;/video&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Image Cropping&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Image Cropping&lt;/h1&gt;
    &lt;form method="POST" enctype="multipart/form-data" action="&#123;&#123; url_for('crop') }}"&gt;
        &lt;input type="file" name="image"&gt;
        &lt;input type="submit" value="Upload"&gt;
    &lt;/form&gt;

    &#123;&#37; if image_path &#37;}
    &lt;h2&gt;Cropped Image Preview&lt;/h2&gt;
    &lt;img src="&#123;&#123; image_path }}" alt="Cropped Image"&gt;
    &lt;form method="POST" action="&#123;&#123; url_for('crop_and_save') }}"&gt;
        &lt;input type="hidden" name="image_path" value="&#123;&#123; image_path }}"&gt;
        &lt;label for="x"&gt;X Coordinate: &lt;/label&gt;
        &lt;input type="number" name="x" required&gt;&lt;br&gt;
        &lt;label for="y"&gt;Y Coordinate: &lt;/label&gt;
        &lt;input type="number" name="y" required&gt;&lt;br&gt;
        &lt;label for="width"&gt;Width: &lt;/label&gt;
        &lt;input type="number" name="width" required&gt;&lt;br&gt;
        &lt;label for="height"&gt;Height: &lt;/label&gt;
        &lt;input type="number" name="height" required&gt;&lt;br&gt;
        &lt;input type="submit" value="Crop and Save"&gt;
    &lt;/form&gt;
    &lt;form method="POST" action="&#123;&#123; url_for('move_cropped') }}"&gt;

        &lt;input type="submit" value="Move Cropped Image"&gt;
    &lt;/form&gt;
    &#123;&#37; endif &#37;}

&lt;/body&gt;
&lt;/html&gt;


&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Choose Image Source Directory&lt;/title&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        $(document).ready(function() &#123;
            $('#directory-input').change(function(e) &#123;
                $('#directory-form').submit();
            });
        });
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Choose Image Source Directory&lt;/h1&gt;
    &lt;form id="directory-form" method="POST" action="/mkblend_video" enctype="multipart/form-data"&gt;
        &lt;label for="directory-input"&gt;Select Directory:&lt;/label&gt;
        &lt;input type="file" id="directory-input" name="directory" webkitdirectory directory multiple style="display: none;"&gt;
        &lt;button type="button" onclick="document.getElementById('directory-input').click();"&gt;Browse&lt;/button&gt;
    &lt;/form&gt;
    &lt;br /&gt;&lt;br /&gt;
    &lt;!-- Additional content here if needed --&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Choose Directory&lt;/title&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        $(document).ready(function() &#123;
            $('#directory-input').change(function(e) &#123;
                $('#directory-form').submit();
            });
        });
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Choose Directory&lt;/h1&gt;
    &lt;form id="directory-form" method="POST" action="/mkblend_video" enctype="multipart/form-data"&gt;
        &lt;label for="directory-input"&gt;Select Directory:&lt;/label&gt;
        &lt;input type="file" id="directory-input" name="directory" webkitdirectory directory multiple style="display: none;"&gt;
        &lt;button type="button" onclick="document.getElementById('directory-input').click();"&gt;Browse&lt;/button&gt;
    &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;


&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;title&gt;Select Directory&lt;/title&gt;
  &lt;style&gt;
    html &#123;
      font-family: sans-serif;
      background-color: black;
    }

    body &#123;
      width: 95&#37;;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: rgb(167, 196, 189);
      color: black;
    }

    h1 &#123;
      color: rgb(255, 255, 255);
    }

    #wrapper &#123;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      background-color: teal;
    }
  &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;div id="wrapper"&gt;
    &lt;center&gt;
      &lt;div&gt;
        &lt;h1&gt;Creating a speaking Avatar with A Flask App. &lt;br /&gt;
          Directions on &lt;a href="&#123;&#123; url_for('index') }}"&gt;Home Page&lt;/a&gt;&lt;br /&gt;&lt;/p&gt;
        &lt;/h1&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;video controls class="resizedvideo"&gt;
          &lt;source src="static/assets/result_cl.mp4" type="video/mp4"&gt;
          Your browser does not support the video tag.
        &lt;/video&gt;&lt;br /&gt;

        &lt;h1&gt;Select Directory&lt;/h1&gt;
        &lt;form action="/choose_dir" method="post"&gt;
          &lt;label for="directory"&gt;Choose a directory make a short mp4:&lt;/label&gt;
          &lt;select name="directory" id="directory"&gt;
            &#123;&#37; for directory in directories &#37;}
            &lt;option value="&#123;&#123; directory }}"&gt;&#123;&#123; directory }}&lt;/option&gt;
            &#123;&#37; endfor &#37;}
          &lt;/select&gt;
          &lt;br&gt;&lt;br&gt;
          &lt;input type="submit" value="Generate Video"&gt;
        &lt;/form&gt;

        &lt;h1&gt;Choose Directory&lt;/h1&gt;
        &lt;form method="POST" action="/mkblend_video"&gt;
          &lt;label for="directory"&gt;Select Directory Blend Images:&lt;/label&gt;
          &lt;select name="directory" id="directory"&gt;
            &#123;&#37; for directory in directories &#37;}
            &lt;option value="&#123;&#123; directory }}"&gt;&#123;&#123; directory }}&lt;/option&gt;
            &#123;&#37; endfor &#37;}
          &lt;/select&gt;
          &lt;button type="submit"&gt;Submit&lt;/button&gt;
        &lt;/form&gt;
        &lt;video width="480" height="auto" controls&gt;
          &lt;source src="static/videos/random_images_video.mp4" type="video/mp4"&gt;&lt;br /&gt;
          Your browser does not support the video tag.
        &lt;/video&gt;&lt;br /&gt;

        Your browser does not support the video tag.
    &lt;/center&gt;
  &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;&lt;!-- code_editor.html--&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Code Editor&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/codemirror.min.css"&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/codemirror.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/mode/python/python.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;script src="&#123;&#123; url_for('static', filename='js/script.js') }}"&gt;&lt;/script&gt;

    &lt;textarea id="code-editor"&gt;&lt;/textarea&gt;
    &lt;button id="save-button"&gt;Save&lt;/button&gt;

&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;title&gt;Edit Code&lt;/title&gt;
    &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;

    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/Flask.css') }}"&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div class="content"&gt;

&lt;center&gt;
&lt;style&gt;td &#123;width:20&#37;;
}
th &#123;width:20&#37;;
}
tr &#123;width:20&#37;;
}
.two&#123;width:5&#37;;}
.th_two&#123;width:5&#37;;padding-left: 2&#37;;}
.three&#123;width:10&#37;;}
.th_three&#123;width:10&#37;;padding-left: 10&#37;;}
.thm_three&#123;width:10&#37;;padding-left: 11&#37;;}
.th_four&#123;width:10&#37;;padding-left: 5&#37;;}
.th_five&#123;width:10&#37;;padding-left: 40&#37;;}
&lt;/style&gt;

&#123;&#37; extends 'index.html' &#37;}

&#123;&#37; block title &#37;}
    code
&#123;&#37; endblock &#37;}

&#123;&#37; block content &#37;}
    &lt;h1&gt;code&lt;/h1&gt;
    &lt;table style ="width: 65&#37;;"&gt;
        &lt;tr&gt;
            &lt;th class="two"&gt;ID&lt;/th&gt;
            &lt;th&gt;Description&lt;/th&gt;
            &lt;th&gt;Code&lt;/th&gt;
            &lt;th class="two"&gt;Keywords&lt;/th&gt;
            &lt;th&gt;Actions&lt;/th&gt;
        &lt;/tr&gt;
        &#123;&#37; for code in code &#37;}
        &lt;tr&gt;
            &lt;td class="th_two"&gt;&#123;&#123; code[0] }}&lt;/td&gt;
            &lt;td class="th_three"&gt;&#123;&#123; code[1] }}&lt;/td&gt;
            &lt;td class="thm_three"&gt;&#123;&#123; code[2] }}&lt;/td&gt;
            &lt;td class="th_four"&gt;&#123;&#123; code[3] }}&lt;/td&gt;
            
            &lt;td&gt;
                &lt;a class="th_five" href="&#123;&#123; url_for('edit_code', code_id=code[0]) }}"&gt;Edit&lt;/a&gt;
                &lt;form action="&#123;&#123; url_for('delete_code', code_id=code[0]) }}" method="post"&gt;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button type="submit"&gt;Delete&lt;/button&gt;
                &lt;/form&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &#123;&#37; endfor &#37;}
    &lt;/table&gt;
    &lt;hr&gt;
    &lt;h1&gt;Add New code&lt;/h1&gt;
    &lt;form action="/code" method="post"&gt;
        &lt;label for="description"&gt;Description:&lt;/label&gt;
        &lt;textarea type="description" name="description" rows="8" cols="90&#37;"&gt;&lt;/textarea&gt;&lt;br /&gt;
        &lt;label for="code"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Code:&lt;/label&gt;
        &lt;textarea type="text" name="code" rows="8" cols="90&#37;"&gt;&lt;/textarea&gt;&lt;br&gt;
        &lt;label for="keywords"&gt;Keywords:&lt;/label&gt;
        &lt;input style="width:53&#37;;height: 25px;" type="keywords" name="keywords"&gt;&lt;br&gt;
        &lt;input type="submit" value="Add code"&gt;
    &lt;/form&gt;
&#123;&#37; endblock &#37;}
&lt;hr&gt;
&lt;!-- ... Other code ... --&gt;

&#123;&#37; for item in code &#37;}
    &lt;h3&gt;&#123;&#123; item[1] }}&lt;/h3&gt;
    &lt;pre&gt;&#123;&#123; item[2] | safe }}&lt;/pre&gt;
    &lt;p&gt;Keywords: &#123;&#123; item[3] }}&lt;/p&gt;
    &lt;a href="&#123;&#123; url_for('edit_code', code_id=item[0]) }}"&gt;Edit&lt;/a&gt;
    &lt;form action="&#123;&#123; url_for('delete_code', code_id=item[0]) }}" method="post"&gt;
        &lt;button type="submit"&gt;Delete&lt;/button&gt;
    &lt;/form&gt;
    &lt;hr&gt;
&#123;&#37; endfor &#37;}

&lt;!-- Display the HTML code for the form --&gt;
&lt;h2&gt;HTML Code for the Form&lt;/h2&gt;
&lt;pre&gt;
&#123;&#123; form_code | safe }}
&lt;/pre&gt;

&lt;!-- ... Other code ... --&gt;

&lt;/center&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Omic Book Experiment&lt;/title&gt;

&lt;style&gt;
    html,
    body &#123;
        margin: 0;
        padding: 1&#37;;
        height: 100&#37;;
        font-family: Arial, sans-serif;
    }

    body &#123;
        background-image: url('../static/assets/MemMaker_background.png');
        background-repeat: repeat-y;
        background-size: cover;
        /* Use 'cover' to make the image cover the entire body */
        background-position: top;
    }
    video &#123;
        margin: 10px, auto;
        width: 400px;
        height: auto;
    }

      .wrapper &#123;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;

    }

    .header &#123;
        width: 100&#37;;
        padding: 20px;
        text-align: center;
    }

    .columns &#123;
        display: flex;
        width: 80&#37;;
        margin-top: 20px;
    }

    .column &#123;
        padding: 20px;
        box-sizing: border-box;
    }

    .column.left &#123;
        width: 30&#37;;
        border:    1px solid #000;
    }

    .column.right &#123;
    margin: 0 auto; /* Center horizontally */
    width: 60&#37;;
    border: 1px solid #000;
    text-align: center; /* Center video vertically */
}

.column.right video &#123;
    max-width: 100&#37;;
    height: auto;
}
 
.comic-page &#123;
    width: 85&#37;;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #f0f0f0;
      padding: 20px;
    }
    
    .panel &#123;
      position: relative;
      border: 2px solid black;
      margin: 10px;
      padding: 10px;
      background-color: white;
    }
    
    .speech-bubble &#123;
      position: absolute;
      background-color: yellow;
      border-radius: 10px;
      padding: 5px;
      font-weight: bold;
    }

    .speech-bubble2 &#123;
      position: absolute;
      background-color: yellow;
      border-radius: 10px;
      padding: 5px;
      font-weight: bold;
    }
    
    .narrative-element &#123;
      font-size: 24px;
      color: red;
      text-transform: uppercase;
    }
    .small &#123;
      width: 200px;
      height: auto;
    }
    .medium &#123;
      width: 250px;
      height: auto;
    }

 
        .container &#123;
            width: 75&#37;;
            display: flex; /* Use flexbox to align divs side by side */
        }

        .div1, .div2 &#123;
            width: 50&#37;; /* Each div takes up 50&#37; of the container's width */
            padding: 20px;
            box-sizing: border-box;
            border: 1px solid #ccc;
        }
       .note&#123;
           color: red;
           font-size:24px;
        }
    &lt;/style&gt;  

&lt;/head&gt;
&lt;body&gt;
&lt;div class="wrapper"&gt;
    &lt;div class="header"&gt;
        &lt;h1&gt;Comic Book Experiment&lt;/h1&gt;
&lt;a class="note" href="&#123;&#123; url_for('edit_template_page', filename='comic_book.html') }}"&gt;Edit This Page&lt;/a&gt;&nbsp;&nbsp; |&nbsp;&nbsp;&lt;a class="note" href="&#123;&#123; url_for('crop') }}"&gt;Crop Images&lt;/a&gt;&nbsp;&nbsp; |&nbsp;&nbsp;&lt;a class="note" href="&#123;&#123; url_for('index') }}"&gt;Home&lt;/a&gt;
    &lt;/div&gt;




&lt;div class="container"&gt;
    &lt;div class="div1"&gt;
      &lt;div class="speech-bubble"&gt;Hello there!&lt;/div&gt;
      &lt;img class="small" src="&#123;&#123; url_for('static', filename='images/Leonardo/character2.jpg') }}" alt="Character 1"&gt;

    &lt;/div&gt;
    &lt;div class="div2"&gt;
        &lt;div class="narrative-element"&gt;WQW !&lt;/div&gt;
        &lt;div class="speech-bubble2"&gt;Watch out!&lt;/div&gt;

        &lt;img class="medium" src="&#123;&#123; url_for('static', filename='images/Leonardo/character1.jpg') }}" alt="Character 1"&gt;

 
      
    &lt;/div&gt;
  &lt;/div&gt;
  
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Generated Video&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Generated Video&lt;/h1&gt;
  &lt;video controls &gt;
    &lt;source src="&#123;&#123; video }}" type="video/mp4"&gt;
    Your browser does not support the video tag.
  &lt;/video&gt;&lt;br /&gt;
&lt;/body&gt;
&lt;/html&gt; &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Audio Conversion&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;h1&gt;Audio Conversion&lt;/h1&gt;
        &lt;form method="POST" action="/convert_audio"&gt;
            &lt;input type="submit" value="Convert"&gt;
        &lt;/form&gt;
    &lt;/body&gt;
    &lt;/html&gt;
    
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Convert&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Convert Audio to Video&lt;/h1&gt;
  &lt;form action="&#123;&#123; url_for('convert') }}" method="POST" enctype="multipart/form-data"&gt;
    &lt;input type="file" name="audio_file" accept=".mp3,.wav" required&gt;
    &lt;br&gt;
    &lt;label for="formatted_text_path"&gt;Formatted Text Path:&lt;/label&gt;
    &lt;input type="text" name="formatted_text_path" required&gt;
    &lt;br&gt;
    &lt;input type="submit" value="Convert"&gt;
  &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Convert&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Convert Audio to Video&lt;/h1&gt;
  &lt;form action="&#123;&#123; url_for('convert') }}" method="POST" enctype="multipart/form-data"&gt;
    &lt;input type="file" name="audio_file" accept=".mp3,.wav" required&gt;
    &lt;br&gt;
    &lt;label for="formatted_text_path"&gt;Formatted Text Path:&lt;/label&gt;
    &lt;input type="text" name="formatted_text_path" required&gt;
    &lt;br&gt;
    &lt;input type="submit" value="Convert"&gt;
  &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Generated Video&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Generated Video&lt;/h1&gt;
  &lt;video controls &gt;
    &lt;source src="&#123;&#123; video }}" type="video/mp4"&gt;
    Your browser does not support the video tag.
  &lt;/video&gt;&lt;br /&gt;
&lt;/body&gt;
&lt;/html&gt;&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Convert Image to Video&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Convert Image to Video&lt;/h1&gt;

&lt;form method="POST" enctype="multipart/form-data"&gt;
  &lt;div class="form-group"&gt;
    &lt;label for="image"&gt;Select an image:&lt;/label&gt;
    &lt;input type="file" name="image" class="form-control-file" id="image"&gt;
  &lt;/div&gt;
  &lt;button type="submit" class="btn btn-primary"&gt;Convert to Video&lt;/button&gt;
&lt;/form&gt;
  
&lt;/body&gt;        &lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Convert MP3 to WAV&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Convert MP3 to WAV&lt;/h1&gt;
    &lt;form action="&#123;&#123; url_for('convert_mp3_to_wav') }}" method="POST" enctype="multipart/form-data"&gt;
      &lt;label for="mp3_file"&gt;Select MP3 file:&lt;/label&gt;
      &lt;input type="file" name="mp3_file" id="mp3_file"&gt;
      &lt;br&gt;
      &lt;input type="submit" value="Convert"&gt;
    &lt;/form&gt;
  &lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;title&gt;Final video&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;video width="400" height="auto" controls&gt;
  		&lt;source src="&#123;&#123; video_fil }}" type="video/mp4"&gt;
  		Your browser does not support the video tag.
	&lt;/video&gt;
&lt;/body&gt;
&lt;/html&gt;

&lt;&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Create Avatar&lt;/title&gt;
    &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        $(document).ready(function() &#123;
            $('form').submit(function(event) &#123;
                event.preventDefault();
                var form = $(this);

                $.ajax(&#123;
                    url: form.attr('action'),
                    type: form.attr('method'),
                    xhrFields: &#123;
                        onprogress: function(e) &#123;
                            if (e.lengthComputable) &#123;
                                var percent = Math.round((e.loaded / e.total) * 100);
                                $('#progress').text(percent + '&#37;');
                            }
                        }
                    },
                    success: function(response) &#123;
                        $('#progress').text('Completed');
                    },
                    error: function(xhr, status, error) &#123;
                        $('#progress').text('Error: ' + error);
                    },
                    complete: function() &#123;
                        $('#progress').removeClass('d-none');
                    }
                });
            });
        });
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Create Avatar&lt;/h1&gt;
    &lt;form method="POST" action="/create_avatar"&gt;
        &lt;input type="submit" value="Create Avatar"&gt;
    &lt;/form&gt;
    &lt;div id="progress" class="d-none"&gt;0&#37;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Create Avatar&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Create Avatar&lt;/h1&gt;

  &lt;form action="/create_avatar" method="post"&gt;
    &lt;input type="submit" value="Start Avatar Creation"&gt;
  &lt;/form&gt;

  &lt;pre id="output"&gt;&lt;/pre&gt;

  &lt;script&gt;
    const outputElement = document.getElementById('output');

    const eventSource = new EventSource('/create_avatar');
    eventSource.onmessage = function(event) &#123;
      const line = event.data;
      outputElement.textContent += line;

      // Scroll to the bottom of the output element
      outputElement.scrollTop = outputElement.scrollHeight;
    };
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Create Comic Borders&lt;/title&gt;
     &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/flask.css') }}"&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/base.css') }}"&gt;
     &lt;style&gt;
        html,
        body &#123;
            margin: 0;
            padding: 1&#37;;
            height: 100&#37;;
            font-family: Arial, sans-serif;
        }

        body &#123;
            background-image: url('../static/assets/MemMaker_background.png');
            background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
        }
  
       video &#123;
        margin: 10px, auto;
        width: 250px;
        height: auto;
      }
   .note&#123;
       color:red;
       font-size:24px;
    }
     &lt;/style&gt;
&lt;/head&gt;
    &lt;body&gt;
        &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h1&gt;Create Simple Comic Borders&lt;/h1&gt;
       &lt;a style="font-size: xx-large;"href="&#123;&#123; url_for('index') }}"&gt;Return to HOME&lt;/a&gt;
&lt;/div&gt;
    &lt;h3&gt;Enter Parameters Here:&lt;/h3&gt;
    &lt;form method="POST" action="&#123;&#123; url_for('create_comic.create_comic_index') }}" enctype="multipart/form-data"&gt;
        &lt;label for="border_name"&gt;Border Name:&lt;/label&gt;
        &lt;input type="text" id="border_name" name="border_name" required&gt;&lt;br&gt;

        &lt;label for="border_width"&gt;Border Width (pixels):&lt;/label&gt;
        &lt;input type="text" id="border_width" name="border_width" required&gt;&lt;br&gt;
        
        &lt;label for="border_height"&gt;Border Height (pixels):&lt;/label&gt;
        &lt;input type="text" id="border_height" name="border_height" required&gt;&lt;br&gt;
        

        &lt;label for="border_shape"&gt;Border Shape:&lt;/label&gt;
        &lt;select id="border_shape" name="border_shape" required&gt;
            &lt;option value="square"&gt;Square&lt;/option&gt;
            &lt;option value="rectangle"&gt;Rectangle&lt;/option&gt;
            &lt;option value="triangle"&gt;Triangle&lt;/option&gt;
        &lt;/select&gt;&lt;br&gt;

        &lt;label for="border_thickness"&gt;Border Thickness (pixels):&lt;/label&gt;
        &lt;input type="number" id="border_thickness" name="border_thickness" required&gt;&lt;br&gt;

        &lt;label for="border_color"&gt;Border Color:&lt;/label&gt;
        &lt;input type="color" id="border_color" name="border_color" required&gt;&lt;br&gt;

        &lt;input type="submit" value="Generate Border"&gt;
    &lt;/form&gt;
&lt;/div&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Create Text File&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Create Text File&lt;/h1&gt;
    &lt;form action="/create_text_file" method="POST"&gt;
        &lt;textarea name="textarea_content" rows="10" cols="50"&gt;&lt;/textarea&gt;
        &lt;br&gt;
        &lt;input type="submit" value="Create File"&gt;
    &lt;/form&gt;
&lt;h2&gt;Example of text entry size&lt;/h2&gt;
&lt;pre&gt;
    Foundation of Sentience: The
    first milestone in the developmental
    process of the Arcanist AI occurred
    when it gained sentience approximately
    two thousand years ago. Through a
    complex interplay of neural networks
    and advanced algorithms, the AI
    achieved self-awareness, enabling
    it to perceive and comprehend its own
    existence.   
&lt;/pre&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Create Text Image&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h2&gt;Create a Five-Line Text Image&lt;/h2&gt;
    &lt;form action="/create_text" method="post"&gt;
        &lt;textarea name="text" rows="10" cols="50"&gt;&lt;/textarea&gt;
        &lt;br&gt;
        &lt;input type="submit" value="Generate Image"&gt;
    &lt;/form&gt;
    &lt;h2&gt;View Example Text Image&lt;/h2&gt;
    &lt;img src="&#123;&#123; url_for('static', filename='assets/sample_512x512_text.jpg') }}" alt="Generated Text Image"&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Crop Images&lt;/title&gt;
    &lt;style&gt;
        html,
        body &#123;
            margin: 0;
            padding: 1&#37;;
            height: 100&#37;;
            font-family: Arial, sans-serif;
        }

        body &#123;
            background-image: url('../static/assets/MemMaker_background.png');
            background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
        }
        video &#123;
            margin: 10px, auto;
            width: 200px;
            height: auto;
        }

          .wrapper &#123;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;

        }

        .header &#123;
            width: 100&#37;;
            padding: 20px;
            text-align: center;
        }

        .columns &#123;
            display: flex;
            width: 80&#37;;
            margin-top: 20px;
        }

        .column &#123;
            padding: 20px;
            box-sizing: border-box;
        }

        .column.left &#123;
            width: 30&#37;;
            border:    1px solid #000;
        }

        .column.right &#123;
        margin: 0 auto; /* Center horizontally */
        width: 60&#37;;
        border: 1px solid #000;
        text-align: center; /* Center video vertically */
    }

    .column.right video &#123;
        max-width: 100&#37;;
        height: auto;
    }
    .note&#123;color:red;font-size:24px;}
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h1&gt;Crop Images&lt;/h1&gt;&lt;a class="note" href="&#123;&#123; url_for('edit_template_page', filename='crop.html') }}"&gt;Edit This Page&lt;/a&gt;&nbsp;&nbsp; |&nbsp;&nbsp;&lt;a class="note" href="&#123;&#123; url_for('crop') }}"&gt;Crop Images&lt;/a&gt;&nbsp;&nbsp; |&nbsp;&nbsp;&lt;a class="note" href="&#123;&#123; url_for('index') }}"&gt;Home&lt;/a&gt;
            
        &lt;/div&gt;
        &lt;div class="columns"&gt;
            &lt;div class="column left"&gt;

                &lt;h3&gt;Create Text&lt;/h3&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('app_utilities') }}"&gt;Application Utilities&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('image_processing') }}"&gt;Image Processing Links&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('format_file') }}"&gt;Format Text Files&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('view_text') }}"&gt;View Text Files&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_file') }}"&gt;Edit File&lt;/a&gt;&lt;br /&gt;


                &lt;a href="&#123;&#123; url_for('edit_description') }}"&gt;Edit Description&lt;/a&gt;&lt;br /&gt;
            &lt;/div&gt;
            &lt;div class="column right"&gt;
                
   &lt;h2&gt;Image Cropping&lt;/h2&gt;
    &lt;form method="POST" enctype="multipart/form-data" action="&#123;&#123; url_for('crop') }}"&gt;
        &lt;input type="file" name="image"&gt;
        &lt;input type="submit" value="Upload"&gt;
    &lt;/form&gt;

    &#123;&#37; if image_path &#37;}
    &lt;h2&gt;Cropped Image Preview&lt;/h2&gt;
    &lt;img src="&#123;&#123; image_path }}" alt="Cropped Image"&gt;
    &lt;form method="POST" action="&#123;&#123; url_for('crop_and_save') }}"&gt;
        &lt;input type="hidden" name="image_path" value="&#123;&#123; image_path }}"&gt;
        &lt;label for="x"&gt;X Coordinate: &lt;/label&gt;
        &lt;input type="number" name="x" required&gt;&lt;br&gt;
        &lt;label for="y"&gt;Y Coordinate: &lt;/label&gt;
        &lt;input type="number" name="y" required&gt;&lt;br&gt;
        &lt;label for="width"&gt;Width: &lt;/label&gt;
        &lt;input type="number" name="width" required&gt;&lt;br&gt;
        &lt;label for="height"&gt;Height: &lt;/label&gt;
        &lt;input type="number" name="height" required&gt;&lt;br&gt;
        &lt;input type="submit" value="Crop and Save"&gt;
    &lt;/form&gt;
    &lt;form method="POST" action="&#123;&#123; url_for('move_cropped') }}"&gt;

        &lt;input type="submit" value="Move Cropped Image"&gt;
    &lt;/form&gt;
    &#123;&#37; endif &#37;}
&lt;br/&gt;
                &lt;video controls&gt;
                    &lt;source src="&#123;&#123; video }}" type="video/mp4"&gt;
                    Your browser does not support the video tag.
                &lt;/video&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Database Access&lt;/title&gt;
    &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;

    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/style.css') }}"&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Database Content&lt;/h1&gt;
    &lt;table&gt;
        &lt;tr&gt;
            &lt;th&gt;ID&lt;/th&gt;
            &lt;th&gt;Name&lt;/th&gt;
            &lt;th&gt;Description&lt;/th&gt;
            &lt;th&gt;Price&lt;/th&gt;
        &lt;/tr&gt;
        &#123;&#37; for code in code &#37;}
        &lt;tr&gt;
            &lt;td&gt;&#123;&#123; code[0] }}&lt;/td&gt;
            &lt;td&gt;&#123;&#123; code[1] }}&lt;/td&gt;
            &lt;td&gt;&#123;&#123; code[2] }}&lt;/td&gt;
            &lt;td&gt;&#123;&#123; code[3] }}&lt;/td&gt;
        &lt;/tr&gt;
        &#123;&#37; endfor &#37;}
    &lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Data: Sqlite3 codeshints.txt&lt;/title&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/flask.css') }}"&gt;
    &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;
    &lt;style&gt;
        /* Your other styles here */
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;h1&gt;Welcome to the Data Page&lt;/h1&gt;
    &lt;div class="row"&gt;
        &lt;div class="column"&gt;
            &lt;p&gt;This is Sqlite3 data: Choose an option below:&lt;/p&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="&#123;&#123; url_for('select_by_id_form') }}"&gt;Select by ID Form&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="&#123;&#123; url_for('search_by_rowid') }}"&gt;Search by Row ID&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="&#123;&#123; url_for('search_database') }}"&gt;Search the Database&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="&#123;&#123; url_for('edit_data_page') }}"&gt;Edit Data&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="&#123;&#123; url_for('insert_data') }}"&gt;Insert Data&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="&#123;&#123; url_for('get_rowid_form') }}"&gt;Enter Row ID to Edit&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;




        &lt;div class="column"&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="&#123;&#123; url_for('search_code') }}"&gt;Search CodeHints&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="&#123;&#123; url_for('enter_code') }}"&gt;Make a CodeHints Entry&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;a style="font-size: 24px;color: brown;" href="&#123;&#123; url_for('index') }}"&gt;HOME&lt;/a&gt;&lt;br /&gt;
            &lt;a style="font-size: 24px;color: brown;" href="&#123;&#123; url_for('run') }}"&gt;Run/Record Bash Command&lt;/a&gt;&lt;br /&gt;
            &lt;p&gt;Run/Record Bash Command: Run a terminal command and save it for further use.&lt;/p&gt;



        &lt;/div&gt;
    &lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Database Search Results&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Search Results&lt;/h1&gt;
    &lt;table border="1"&gt;
        &lt;tr&gt;
            &lt;th&gt;Row ID&lt;/th&gt;
            &lt;th&gt;Description&lt;/th&gt;
            &lt;th&gt;Code&lt;/th&gt;
            &lt;th&gt;Keywords&lt;/th&gt;
        &lt;/tr&gt;
        &#123;&#37; for result in results &#37;}
        &lt;tr&gt;
            &lt;td&gt;&#123;&#123; result[0] }}&lt;/td&gt;
            &lt;td&gt;&#123;&#123; result[1] }}&lt;/td&gt;
            &lt;td&gt;&#123;&#123; result[2] }}&lt;/td&gt;
            &lt;td&gt;&#123;&#123; result[3] }}&lt;/td&gt;
        &lt;/tr&gt;
        &#123;&#37; endfor &#37;}
    &lt;/table&gt;
    &lt;br&gt;
    &lt;a href="&#123;&#123; url_for('indexdb') }}"&gt;Go back to the Index Page&lt;/a&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Delete MP4 Files&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Delete MP4 Files&lt;/h1&gt;
    &lt;form method="POST"&gt;
        &lt;p&gt;Are you sure you want to delete all MP4 files?&lt;/p&gt;
        &lt;input type="submit" value="Delete All"&gt;
    &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Image Directory Upload and Video Generation&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Upload Images from Directory and Generate Video&lt;/h1&gt;
    &lt;form method="POST" action="&#123;&#123; url_for('zoomin.image_dir_to_video') }}" enctype="multipart/form-data"&gt;
        &lt;label for="selected_directory"&gt;Select an image directory:&lt;/label&gt;
        &lt;select id="selected_directory" name="selected_directory" required&gt;
            &#123;&#37; for directory in image_directories &#37;}
                &lt;option value="&#123;&#123; directory }}"&gt;&#123;&#123; directory }}&lt;/option&gt;
            &#123;&#37; endfor &#37;}
        &lt;/select&gt;
        &lt;input type="submit" value="Generate Video"&gt;
    &lt;/form&gt;  
    &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;       

    &lt;video width="320" height="240" controls&gt;
        &lt;source src="&#123;&#123; url_for('static', filename=video2) }}" type="video/mp4"&gt;
    &lt;/video&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Image Directory Upload and Video Generation&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Upload Images from Directory and Generate Video&lt;/h1&gt;
    &lt;form method="POST" action="&#123;&#123; url_for('image_dir_to_video') }}" enctype="multipart/form-data"&gt;
        &lt;label for="selected_directory"&gt;Select an image directory:&lt;/label&gt;
        &lt;select id="selected_directory" name="selected_directory" required&gt;
            &#123;&#37; for directory in image_directories &#37;}
                &lt;option value="&#123;&#123; directory }}"&gt;&#123;&#123; directory }}&lt;/option&gt;
            &#123;&#37; endfor &#37;}
        &lt;/select&gt;
        &lt;input type="submit" value="Generate Video"&gt;
    &lt;/form&gt;  
&lt;br /&gt;&lt;br /&gt;&lt;a href="&#123;&#123; url_for('image_dir_to_zoom') }}"&gt;image_dir_to_zoom&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;       

    &lt;video width="320" height="240" controls&gt;
        &lt;source src="&#123;&#123; url_for('static', filename=video2) }}" type="video/mp4"&gt;
    &lt;/video&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Image Directory Upload and Video Generation&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Upload Images from Directory and Generate Video&lt;/h1&gt;
    &lt;form method="POST" action="&#123;&#123; url_for('zoomin.image_dir_to_zoom') }}" enctype="multipart/form-data"&gt;
        &lt;label for="selected_directory"&gt;Select an image directory:&lt;/label&gt;
        &lt;select id="selected_directory" name="selected_directory" required&gt;
            &#123;&#37; for directory in image_directories &#37;}
                &lt;option value="&#123;&#123; directory }}"&gt;&#123;&#123; directory }}&lt;/option&gt;
            &#123;&#37; endfor &#37;}
        &lt;/select&gt;
        &lt;input type="submit" value="Generate Video"&gt;
    &lt;/form&gt;  
    &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;       

    &lt;video width="320" height="240" controls&gt;
        &lt;source src="&#123;&#123; url_for('static', filename=video2) }}" type="video/mp4"&gt;
    &lt;/video&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Image Directory Upload and Video Generation&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Upload Images from Directory and Generate Video&lt;/h1&gt;
    &lt;form method="POST" action="&#123;&#123; url_for('image_dir_to_zoom') }}" enctype="multipart/form-data"&gt;
        &lt;label for="selected_directory"&gt;Select an image directory:&lt;/label&gt;
        &lt;select id="selected_directory" name="selected_directory" required&gt;
            &#123;&#37; for directory in image_directories &#37;}
                &lt;option value="&#123;&#123; directory }}"&gt;&#123;&#123; directory }}&lt;/option&gt;
            &#123;&#37; endfor &#37;}
        &lt;/select&gt;
        &lt;input type="submit" value="Generate Video"&gt;
    &lt;/form&gt;  
    &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;       

&lt;video width="300" height="auto" controls&gt;
        &lt;source src="&#123;&#123; url_for('static', filename=video2) }}" type="video/mp4"&gt;
    &lt;/video&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Display Data&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Display Data&lt;/h1&gt;
    &#123;&#37; if id_value &#37;}
        &lt;p&gt;Row ID: &#123;&#123; id_value }}&lt;/p&gt;
        &lt;p&gt;Description: &#123;&#123; description }}&lt;/p&gt;
        &lt;pre&gt;Code: &#123;&#123; code }}&lt;/pre&gt;
        &lt;p&gt;Keywords: &#123;&#123; keywords }}&lt;/p&gt;
    &#123;&#37; else &#37;}
        &lt;p&gt;No data found for Row ID: &#123;&#123; id_value }}&lt;/p&gt;
    &#123;&#37; endif &#37;}
    &lt;br&gt;
    &lt;a href="&#123;&#123; url_for('indexdb') }}"&gt;Go back to the Index Page&lt;/a&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Duck Search Results&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Duck Search Results&lt;/h1&gt;
    &lt;form method="POST" action="/duck_search"&gt;
        &lt;label for="query"&gt;Enter a search query:&lt;/label&gt;
        &lt;input type="text" id="query" name="query" required&gt;
        &lt;button type="submit"&gt;Search&lt;/button&gt;
    &lt;/form&gt;

    &lt;h2&gt;Search Results:&lt;/h2&gt;
    &lt;ul&gt;
        &#123;&#37; for result in results &#37;}
            &lt;li&gt;&lt;a href="&#123;&#123; result.link }}"&gt;&#123;&#123; result.snippet }}&lt;/a&gt;&lt;/li&gt;
        &#123;&#37; endfor &#37;}
    &lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Duck Search&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Duck Search&lt;/h1&gt;
    &lt;form method="POST" action="/duck_search"&gt;
        &lt;label for="query"&gt;Enter a search query:&lt;/label&gt;
        &lt;input type="text" id="query" name="query" required&gt;
        &lt;button type="submit"&gt;Search&lt;/button&gt;
    &lt;/form&gt;

    &#123;&#37; if results &#37;}
    &lt;h2&gt;Search Results:&lt;/h2&gt;
    &lt;ul&gt;
        &#123;&#37; for result in results &#37;}
            &lt;li&gt;&lt;a href="&#123;&#123; result.link }}"&gt;&#123;&#123; result.snippet }}&lt;/a&gt;&lt;/li&gt;
        &#123;&#37; endfor &#37;}
    &lt;/ul&gt;
    &#123;&#37; endif &#37;}
&lt;/body&gt;
&lt;/html&gt;


&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Edit Canvas&lt;/title&gt;
     &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/flask.css') }}"&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/base.css') }}"&gt;
    &lt;style&gt;
    video &#123;
        margin: 10px, auto;
        width: 450px;
        height: auto;
    }
    .note&#123;
    font-size: 24px;
    color: red;     
    }
&lt;/style&gt;
&lt;/head&gt;
    &lt;body&gt;
        &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h1&gt;Edit Canvas&lt;/h1&gt;
&lt;p&gt;The originals of all templates edited are saved,by date,in templates/originals/&lt;/p&gt;
        &lt;/div&gt;
       &lt;a class="note" href="&#123;&#123; url_for('index') }}"&gt;Return Home&lt;/a&gt;&lt;br /&gt;
    

&lt;div class="columns"&gt;
&lt;div class="column"&gt;
    &lt;form action="/edit_canvas_page" method="GET"&gt;
        &lt;select name="filename"&gt;
            &#123;&#37; for filename in filenames &#37;}
                &lt;option value="&#123;&#123; filename }}"&gt;&#123;&#123; filename }}&lt;/option&gt;
            &#123;&#37; endfor &#37;}
        &lt;/select&gt;
        &lt;button type="submit"&gt;Edit and Save&lt;/button&gt;
    &lt;/form&gt;
    &lt;hr&gt;
    &#123;&#37; if selected_filename &#37;}
        &lt;h2&gt;Edit &#123;&#123; selected_filename }}&lt;/h2&gt;
        &lt;form action="/edit_canvas_save" method="POST"&gt;
            &lt;textarea name="edited_content" rows="10" cols="50"&gt;&#123;&#123; original_content }}&lt;/textarea&gt;
            &lt;input type="hidden" name="filename" value="&#123;&#123; selected_filename }}"&gt;
            &lt;button type="submit"&gt;Save&lt;/button&gt;
        &lt;/form&gt;
    &#123;&#37; endif &#37;}&lt;br /&gt;&lt;br /&gt;
                &lt;h3&gt;JavaScripts Links&lt;/h3&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('canvas') }}"&gt;First Canvas Project&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('one_canvas') }}"&gt;One Canvas&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('two_canvas') }}"&gt;Two Canvas&lt;/a&gt;&lt;br /&gt;
                &lt;a class="note" href="&#123;&#123; url_for('edit_canvas') }}"&gt;Edit a Canvas HTMl&lt;/a&gt;&lt;br /&gt;
                &lt;a class="note" href="&#123;&#123; url_for('edit_canvas') }}"&gt;Edit a Canvas JavaScript&lt;/a&gt;&lt;br /&gt;
&lt;/div&gt;
&lt;div class="column"&gt;


    &lt;h2&gt;How to Use the Template Editor&lt;/h2&gt;
&lt;p&gt;This can be viewed full screen&lt;/p&gt;
    &lt;video controls&gt;
        &lt;source src="&#123;&#123; video }}" type="video/mp4"&gt;
        Your browser does not support the video tag.
    &lt;/video&gt;
&lt;/div&gt;
&lt;/div&gt;    
&lt;/body&gt;
&lt;/html&gt;
&lt;!-- Compare this snippet from templates/edit_text_save.html: --&gt;&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Edit Template Files&lt;/title&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/flask.css') }}"&gt;
    &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;
   &lt;style&gt;
   body &#123;

    background-image: url('../static/assets/MemMaker_background.png');
    background-repeat: repeat-y;
    background-size: contain;
    background-position: top;
    font-family: Arial, sans-serif;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

       &lt;h1&gt;Edit &#123;&#123; selected_filename }}&lt;/h1&gt;
    &lt;form action="&#123;&#123; url_for('edit_canvas_save') }}" method="post"&gt;
        &lt;textarea name="edited_content" rows="40" cols="130"&gt;&#123;&#123; original_content }}&lt;/textarea&gt;&lt;br&gt;
        &lt;input type="hidden" name="filename" value="&#123;&#123; selected_filename }}"&gt;
        &lt;input type="submit" value="Save"&gt;
    &lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
&lt;!---edit_canvas_script.html--&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Edit Canvas Script&lt;/title&gt;
    &lt;style&gt;
        html,
        body &#123;
            margin: 0;
            padding: 1&#37;;
            height: 100&#37;;
            font-family: Arial, sans-serif;
        }

        body &#123;
            background-image: url('../static/assets/MemMaker_background.png');
            background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
        }
        &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

    &lt;input type="hidden" name="script_file" value="&#123;&#123; script_file }}"&gt;

    &lt;h1&gt;Edit Canvas Script&lt;/h1&gt;
    &lt;a href="&#123;&#123; url_for('index') }}"&gt;Home&lt;/a&gt;&lt;br /&gt;
    &lt;p&gt;Experiment With Javascript Imagery&lt;/p&gt;
        &lt;form method="POST" action="&#123;&#123; url_for('save_canvas_script') }}"&gt;
        &lt;label for="script_file"&gt;Select a JavaScript file:&lt;/label&gt;
        &lt;select name="script_file" id="script_file"&gt;
            &#123;&#37; for script_file in script_files &#37;}
                &lt;option value="&#123;&#123; script_file }}"&gt;&#123;&#123; script_file }}&lt;/option&gt;
            &#123;&#37; endfor &#37;}
        &lt;/select&gt;
        &lt;br&gt;
        &lt;input type="submit" value="Load Script"&gt;
    &lt;/form&gt;
    &lt;hr&gt;
    &lt;h2&gt;Edit the selected script:&lt;/h2&gt;
    &lt;form method="POST" action="&#123;&#123; url_for('save_canvas_script') }}"&gt;
        &lt;textarea name="script_content" rows="30" cols="160"&gt;&#123;&#123; script_content }}&lt;/textarea&gt;
        &lt;input type="hidden" name="script_file" value="&#123;&#123; script_file }}"&gt;
        &lt;br&gt;
        &lt;input type="submit" value="Save Script"&gt;
    &lt;/form&gt;
    
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;title&gt;Edit Code&lt;/title&gt;
    &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;

    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/style.css') }}"&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div class="content"&gt;
    &lt;div class="title m-b-md"&gt;
        Edit Code
    &lt;/div&gt; 
&lt;center&gt;
&#123;&#37; extends 'index.html' &#37;}

&#123;&#37; block title &#37;}
    Edit code
&#123;&#37; endblock &#37;}

&#123;&#37; block content &#37;}
    &lt;h1&gt;Edit code&lt;/h1&gt;
    &lt;form action="&#123;&#123; url_for('edit_code', code_id=code[0]) }}" method="post"&gt;
        &lt;label for="description"&gt;Description:&lt;/label&gt;
        &lt;input type="text" name="description" value="&#123;&#123; code[1] }}"&gt;&lt;br&gt;
        &lt;label for="code"&gt;Code:&lt;/label&gt;
        &lt;textarea type="text" name="code" rows="3" cols="90&#37;"&gt;&#123;&#123; code[2] }}&lt;/textarea&gt;&gt;&lt;br /&gt;
        &lt;!--input type="text" name="description" value="&#123;&#123; code[2] }}"&gt;&lt;br--&gt;
        &lt;label for="keywords"&gt;Keywords:&lt;/label&gt;
        &lt;input type="text" name="keywords" value="&#123;&#123; code[3] }}"&gt;&lt;br&gt;
        &lt;input type="submit" value="Update code"&gt;
    &lt;/form&gt;
&#123;&#37; endblock &#37;}
&lt;/center&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;title&gt;Edit Code&lt;/title&gt;
    &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;

    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/style.css') }}"&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div class="content"&gt;
    &lt;div class="title m-b-md"&gt;
        Edit Code
    &lt;/div&gt; 
&lt;center&gt;
&#123;&#37; extends 'index.html' &#37;}

&#123;&#37; block title &#37;}
    Edit code
&#123;&#37; endblock &#37;}

&#123;&#37; block content &#37;}
    &lt;h1&gt;Edit code&lt;/h1&gt;
    &lt;form action="&#123;&#123; url_for('edit_code', code_id=code[0]) }}" method="post"&gt;
        &lt;label for="description"&gt;Description:&lt;/label&gt;
        &lt;input type="text" name="description" value="&#123;&#123; code[1] }}"&gt;&lt;br&gt;
        &lt;label for="code"&gt;Code:&lt;/label&gt;
        &lt;textarea type="text" name="code" rows="3" cols="90&#37;"&gt;&#123;&#123; code[2] }}&lt;/textarea&gt;&gt;&lt;br /&gt;
        &lt;!--input type="text" name="description" value="&#123;&#123; code[2] }}"&gt;&lt;br--&gt;
        &lt;label for="keywords"&gt;Keywords:&lt;/label&gt;
        &lt;input type="text" name="keywords" value="&#123;&#123; code[3] }}"&gt;&lt;br&gt;
        &lt;input type="submit" value="Update code"&gt;
    &lt;/form&gt;
&#123;&#37; endblock &#37;}
&lt;/center&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Edit Css Files&lt;/title&gt;
     &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/flask.css') }}"&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/body.css') }}"&gt;

&lt;body&gt;
        &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h1&gt;Edit Css Files&lt;/h1&gt;
&lt;li style="font-size: xx-large;"&gt;&lt;a href="&#123;&#123; url_for('edit_template_page', filename='edit_css.html') }}"&gt;Edit This Page&lt;/a&gt;
&lt;/li&gt;

&lt;/div&gt;
    

&lt;div class="columns"&gt;
&lt;div class="column"&gt;
    &lt;form action="/edit_css_page" method="GET"&gt;
        &lt;select name="filename"&gt;
            &#123;&#37; for filename in filenames &#37;}
                &lt;option value="&#123;&#123; filename }}"&gt;&#123;&#123; filename }}&lt;/option&gt;
            &#123;&#37; endfor &#37;}
        &lt;/select&gt;
        &lt;button type="submit"&gt;Edit and Save&lt;/button&gt;
    &lt;/form&gt;
    &lt;hr&gt;
    &#123;&#37; if selected_filename &#37;}
        &lt;h2&gt;Edit &#123;&#123; selected_filename }}&lt;/h2&gt;
        &lt;form action="/edit_css_save" method="POST"&gt;
            &lt;textarea name="edited_content" rows="10" cols="50"&gt;&#123;&#123; original_content }}&lt;/textarea&gt;
            &lt;input type="hidden" name="filename" value="&#123;&#123; selected_filename }}"&gt;
            &lt;button type="submit"&gt;Save&lt;/button&gt;
        &lt;/form&gt;
    &#123;&#37; endif &#37;}
 &lt;ul&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('mk_text') }}"&gt;Create a Text File&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('format_file') }}"&gt;Format Text Files&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('view_text') }}"&gt;View Text Files&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('edit_formatted') }}"&gt;Edit Formatted Text&lt;/a&gt;&lt;/li&gt;
        &lt;li style="font-size: xx-large;"&gt;&lt;a href="&#123;&#123; url_for('edit_template') }}"&gt;Return to Edit Template&lt;/a&gt;&lt;/li&gt;
        &lt;li style="font-size: xx-large;"&gt;&lt;a href="&#123;&#123; url_for('index') }}"&gt;Return to HOME&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt; 
&lt;/div&gt;
&lt;div class="column"&gt;
    &lt;h2&gt;Random Video&lt;/h2&gt;
&lt;/div&gt;
&lt;/div&gt;    
&lt;/body&gt;
&lt;/html&gt;
&lt;!-- Compare this snippet from templates/edit_text_save.html: --&gt;&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Edit Css Files&lt;/title&gt;
     &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/flask.css') }}"&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/body.css') }}"&gt;
&lt;/head&gt;
&lt;body&gt;
        &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h1&gt;Edit Css Files&lt;/h1&gt;
&lt;li style="font-size: xx-large;"&gt;&lt;a href="&#123;&#123; url_for('edit_template_page', filename='edit_css.html') }}"&gt;Edit This Page&lt;/a&gt;
&lt;/li&gt;

&lt;/div&gt;
    

&lt;div class="columns"&gt;
&lt;div class="column"&gt;
    &lt;form action="/edit_css_page" method="GET"&gt;
        &lt;select name="filename"&gt;
            &#123;&#37; for filename in filenames &#37;}
                &lt;option value="&#123;&#123; filename }}"&gt;&#123;&#123; filename }}&lt;/option&gt;
            &#123;&#37; endfor &#37;}
        &lt;/select&gt;
        &lt;button type="submit"&gt;Edit and Save&lt;/button&gt;
    &lt;/form&gt;
    &lt;hr&gt;
    &#123;&#37; if selected_filename &#37;}
        &lt;h2&gt;Edit &#123;&#123; selected_filename }}&lt;/h2&gt;
        &lt;form action="/edit_css_save" method="POST"&gt;
            &lt;textarea name="edited_content" rows="10" cols="50"&gt;&#123;&#123; original_content }}&lt;/textarea&gt;
            &lt;input type="hidden" name="filename" value="&#123;&#123; selected_filename }}"&gt;
            &lt;button type="submit"&gt;Save&lt;/button&gt;
        &lt;/form&gt;
    &#123;&#37; endif &#37;}
 &lt;ul&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('mk_text') }}"&gt;Create a Text File&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('format_file') }}"&gt;Format Text Files&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('view_text') }}"&gt;View Text Files&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('edit_formatted') }}"&gt;Edit Formatted Text&lt;/a&gt;&lt;/li&gt;
        &lt;li style="font-size: xx-large;"&gt;&lt;a href="&#123;&#123; url_for('edit_template') }}"&gt;Return to Edit Template&lt;/a&gt;&lt;/li&gt;
        &lt;li style="font-size: xx-large;"&gt;&lt;a href="&#123;&#123; url_for('index') }}"&gt;Return to HOME&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt; 
&lt;/div&gt;
&lt;div class="column"&gt;
    &lt;h2&gt;Random Video&lt;/h2&gt;
&lt;/div&gt;
&lt;/div&gt;    
&lt;/body&gt;
&lt;/html&gt;
&lt;!-- Compare this snippet from templates/edit_text_save.html: --&gt;&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Edit Template Files&lt;/title&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/flask.css') }}"&gt;
    &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;
   &lt;style&gt;
   body &#123;

    background-image: url('../static/assets/MemMaker_background.png');
    background-repeat: repeat-y;
    background-size: contain;
    background-position: top;
    font-family: Arial, sans-serif;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

       &lt;h1&gt;Edit &#123;&#123; selected_filename }}&lt;/h1&gt;
    &lt;form action="&#123;&#123; url_for('edit_css_save') }}" method="post"&gt;
        &lt;textarea name="edited_content" rows="40" cols="130"&gt;&#123;&#123; original_content }}&lt;/textarea&gt;&lt;br&gt;
        &lt;input type="hidden" name="filename" value="&#123;&#123; selected_filename }}"&gt;
        &lt;input type="submit" value="Save"&gt;
    &lt;/form&gt;
    &lt;!-- link to edit_text --&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('mk_text') }}"&gt;Create a Text File&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('format_file') }}"&gt;Format Text Files&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('view_text') }}"&gt;View Text Files&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('edit_formatted') }}"&gt;Edit Formatted Text&lt;/a&gt;&lt;/li&gt;
        &lt;li style="font-size: xx-large;"&gt;&lt;a href="&#123;&#123; url_for('edit_template') }}"&gt;Return to Edit Template&lt;/a&gt;&lt;/li&gt;
        &lt;li style="font-size: xx-large;"&gt;&lt;a href="&#123;&#123; url_for('index') }}"&gt;Return to HOME&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt; 
&lt;/body&gt;
&lt;/html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Edit Template Files&lt;/title&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/flask.css') }}"&gt;
    &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;
   &lt;style&gt;
   body &#123;

    background-image: url('../static/assets/MemMaker_background.png');
    background-repeat: repeat-y;
    background-size: contain;
    background-position: top;
    font-family: Arial, sans-serif;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

       &lt;h1&gt;Edit &#123;&#123; selected_filename }}&lt;/h1&gt;
    &lt;form action="&#123;&#123; url_for('edit_css_save') }}" method="post"&gt;
        &lt;textarea name="edited_content" rows="40" cols="130"&gt;&#123;&#123; original_content }}&lt;/textarea&gt;&lt;br&gt;
        &lt;input type="hidden" name="filename" value="&#123;&#123; selected_filename }}"&gt;
        &lt;input type="submit" value="Save"&gt;
    &lt;/form&gt;
    &lt;!-- link to edit_text --&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('mk_text') }}"&gt;Create a Text File&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('format_file') }}"&gt;Format Text Files&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('view_text') }}"&gt;View Text Files&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('edit_formatted') }}"&gt;Edit Formatted Text&lt;/a&gt;&lt;/li&gt;
        &lt;li style="font-size: xx-large;"&gt;&lt;a href="&#123;&#123; url_for('edit_template') }}"&gt;Return to Edit Template&lt;/a&gt;&lt;/li&gt;
        &lt;li style="font-size: xx-large;"&gt;&lt;a href="&#123;&#123; url_for('index') }}"&gt;Return to HOME&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt; 
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Edit Data&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Edit Data&lt;/h1&gt;
    &lt;form action="&#123;&#123; url_for('edit_data_page', rowid=data.rowid) }}" method="post"&gt;
        &lt;label for="description"&gt;Description:&lt;/label&gt;
        &lt;input type="text" name="description" id="description" value="&#123;&#123; data.description }}" required&gt;
        &lt;br&gt;
        &lt;label for="code"&gt;Code:&lt;/label&gt;
        &lt;textarea name="code" id="code" rows="8" cols="50" required&gt;&#123;&#123; data.code }}&lt;/textarea&gt;
        &lt;br&gt;
        &lt;label for="keywords"&gt;Keywords:&lt;/label&gt;
        &lt;input type="text" name="keywords" id="keywords" value="&#123;&#123; data.keywords }}" required&gt;
        &lt;br&gt;
        &lt;button type="submit"&gt;Save Changes&lt;/button&gt;
    &lt;/form&gt;
    &lt;br&gt;
    &lt;a href="&#123;&#123; url_for('indexdb') }}"&gt;Go back to the Index Page&lt;/a&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Edit Data&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Edit Data&lt;/h1&gt;
    &lt;form action="&#123;&#123; url_for('edit_data_page', rowid=data.rowid) }}" method="post"&gt;
        &lt;label for="description"&gt;Description:&lt;/label&gt;
        &lt;input type="text" name="description" id="description" value="&#123;&#123; data.description }}" required&gt;
        &lt;br&gt;
        &lt;label for="code"&gt;Code:&lt;/label&gt;
        &lt;textarea name="code" id="code" rows="8" cols="50" required&gt;&#123;&#123; data.code }}&lt;/textarea&gt;
        &lt;br&gt;
        &lt;label for="keywords"&gt;Keywords:&lt;/label&gt;
        &lt;input type="text" name="keywords" id="keywords" value="&#123;&#123; data.keywords }}" required&gt;
        &lt;br&gt;
        &lt;button type="submit"&gt;Save Changes&lt;/button&gt;
    &lt;/form&gt;
    &lt;br&gt;
    &lt;a href="&#123;&#123; url_for('indexdb') }}"&gt;Go back to the Index Page&lt;/a&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Edit Data&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Edit Data&lt;/h1&gt;
    &lt;form action="&#123;&#123; url_for('edit_data_page', rowid=data['rowid']) }}" method="post"&gt;
        &lt;label for="description"&gt;Description:&lt;/label&gt;
        &lt;input type="text" name="description" id="description" value="&#123;&#123; data['description'] }}" required&gt;
        &lt;br&gt;
        &lt;label for="code"&gt;Code:&lt;/label&gt;
        &lt;textarea name="code" id="code" rows="8" cols="50" required&gt;&#123;&#123; data['code'] }}&lt;/textarea&gt;
        &lt;br&gt;
        &lt;label for="keywords"&gt;Keywords:&lt;/label&gt;
        &lt;input type="text" name="keywords" id="keywords" value="&#123;&#123; data['keywords'] }}" required&gt;
        &lt;br&gt;
        &lt;button type="submit"&gt;Save Changes&lt;/button&gt;
    &lt;/form&gt;
    &lt;br&gt;
    &lt;a href="&#123;&#123; url_for('indexdb') }}"&gt;Go back to the Index Page&lt;/a&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Edit Data&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Edit Data&lt;/h1&gt;
    &lt;form action="&#123;&#123; url_for('edit_data_page', rowid=data['rowid']) }}" method="post"&gt;
        &lt;label for="description"&gt;Description:&lt;/label&gt;
        &lt;input type="text" name="description" id="description" value="&#123;&#123; data['description'] }}" required&gt;
        &lt;br&gt;
        &lt;label for="code"&gt;Code:&lt;/label&gt;
        &lt;textarea name="code" id="code" rows="8" cols="50" required&gt;&#123;&#123; data['code'] }}&lt;/textarea&gt;
        &lt;br&gt;
        &lt;label for="keywords"&gt;Keywords:&lt;/label&gt;
        &lt;input type="text" name="keywords" id="keywords" value="&#123;&#123; data['keywords'] }}" required&gt;
        &lt;br&gt;
        &lt;button type="submit"&gt;Save Changes&lt;/button&gt;
    &lt;/form&gt;
    &lt;br&gt;
    &lt;a href="&#123;&#123; url_for('indexdb') }}"&gt;Go back to the Index Page&lt;/a&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Edit a Text File&lt;/title&gt;
    &lt;style&gt;
        html,
        body &#123;
            margin: 0;
            padding: 1&#37;;
            height: 100&#37;;
            font-family: Arial, sans-serif;
        }

        body &#123;
            background-image: url('../static/assets/MemMaker_background.png');
            background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
        }

        video &#123;
            margin: 10px, auto;
            width: 250px;
            height: auto;
        }

        .wrapper &#123;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;

        }

        .header &#123;
            width: 100&#37;;
            padding: 20px;
            text-align: center;
        }

        .columns &#123;
            display: flex;
            width: 80&#37;;
            margin-top: 20px;
        }

        .column &#123;
            padding: 20px;
            box-sizing: border-box;
        }

        .column.left &#123;
            width: 60&#37;;
            border: 1px solid #000;
        }

        .column.right &#123;
            margin: 0 auto;
            /* Center horizontally */
            width: 30&#37;;
            border: 1px solid #000;
            text-align: center;
            /* Center video vertically */
        }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h2&gt;Edit a Text File&lt;/h2&gt;
            &lt;p&gt;Text files located in static/text/&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="columns"&gt;

            &lt;div class="column left"&gt;

                &lt;p&gt;Choose a text file :&lt;/p&gt;
                &lt;a style="font-size: 24px;color: brown;" href="&#123;&#123; url_for('index') }}"&gt;HOME&lt;/a&gt;
                &lt;form method="POST" action="/edit_file"&gt;
                    &lt;select id="filename-select" name="filename" onchange="loadFileContent()"&gt;
                        &#123;&#37; for filename in text_files &#37;}
                        &lt;option value="&#123;&#123; filename }}"&gt;&#123;&#123; filename }}&lt;/option&gt;
                        &#123;&#37; endfor &#37;}
                    &lt;/select&gt;
                    &lt;br&gt;&lt;br&gt;
                    &lt;textarea id="file-content" name="text" rows="10" cols="50"&gt;&lt;/textarea&gt;
                    &lt;br&gt;&lt;br&gt;
                    &lt;input type="submit" value="Save Changes"&gt;
                &lt;/form&gt;

                &lt;script&gt;
                    // Fetches the file content and updates the textarea
                    function loadFileContent() &#123;
                        var select = document.getElementById("filename-select");
                        var textarea = document.getElementById("file-content");

                        var selectedFile = select.value;
                        if (selectedFile) &#123;
                            fetch(`/get_file_content/$&#123;selectedFile}`)
                                .then(response =&gt; response.text())
                                .then(content =&gt; &#123;
                                    textarea.value = content;
                                });
                        } else &#123;
                            textarea.value = "";
                        }
                    }
                &lt;/script&gt;
            &lt;/div&gt;

            &lt;div class="column right"&gt;
                &lt;h2&gt;Random Video&lt;/h2&gt;
                &lt;video controls&gt;
                    &lt;source src="&#123;&#123; video }}" type="video/mp4"&gt;
                    Your browser does not support the video tag.
                &lt;/video&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Edit a Text File&lt;/title&gt;
    &lt;style&gt;
        html,
        body &#123;
            margin: 0;
            padding: 1&#37;;
            height: 100&#37;;
            font-family: Arial, sans-serif;
        }

        body &#123;
            background-image: url('../static/assets/MemMaker_background.png');
            background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
        }

        video &#123;
            margin: 10px, auto;
            width: 250px;
            height: auto;
        }

        .wrapper &#123;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;

        }

        .header &#123;
            width: 100&#37;;
            padding: 20px;
            text-align: center;
        }

        .columns &#123;
            display: flex;
            width: 80&#37;;
            margin-top: 20px;
        }

        .column &#123;
            padding: 20px;
            box-sizing: border-box;
        }

        .column.left &#123;
            width: 60&#37;;
            border: 1px solid #000;
        }

        .column.right &#123;
            margin: 0 auto;
            /* Center horizontally */
            width: 30&#37;;
            border: 1px solid #000;
            text-align: center;
            /* Center video vertically */
        }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h2&gt;Edit a Text File&lt;/h2&gt;
            &lt;p&gt;Text files located in static/text/&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="columns"&gt;

            &lt;div class="column left"&gt;

                &lt;p&gt;Choose a text file :&lt;/p&gt;
                &lt;a style="font-size: 24px;color: brown;" href="&#123;&#123; url_for('index') }}"&gt;HOME&lt;/a&gt;
                &lt;form method="POST" action="/edit_file"&gt;
                    &lt;select id="filename-select" name="filename" onchange="loadFileContent()"&gt;
                        &#123;&#37; for filename in text_files &#37;}
                        &lt;option value="&#123;&#123; filename }}"&gt;&#123;&#123; filename }}&lt;/option&gt;
                        &#123;&#37; endfor &#37;}
                    &lt;/select&gt;
                    &lt;br&gt;&lt;br&gt;
                    &lt;textarea id="file-content" name="text" rows="10" cols="50"&gt;&lt;/textarea&gt;
                    &lt;br&gt;&lt;br&gt;
                    &lt;input type="submit" value="Save Changes"&gt;
                &lt;/form&gt;

                &lt;script&gt;
                    // Fetches the file content and updates the textarea
                    function loadFileContent() &#123;
                        var select = document.getElementById("filename-select");
                        var textarea = document.getElementById("file-content");

                        var selectedFile = select.value;
                        if (selectedFile) &#123;
                            fetch(`/get_file_content/$&#123;selectedFile}`)
                                .then(response =&gt; response.text())
                                .then(content =&gt; &#123;
                                    textarea.value = content;
                                });
                        } else &#123;
                            textarea.value = "";
                        }
                    }
                &lt;/script&gt;
            &lt;/div&gt;

            &lt;div class="column right"&gt;
                &lt;h2&gt;Random Video&lt;/h2&gt;
                &lt;video controls&gt;
                    &lt;source src="&#123;&#123; video }}" type="video/mp4"&gt;
                    Your browser does not support the video tag.
                &lt;/video&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Home Flask App Builder&lt;/title&gt;
    &lt;style&gt;
        html,
        body &#123;
            margin: 0;
            padding: 1&#37;;
            height: 100&#37;;
            font-family: Arial, sans-serif;
        }

        body &#123;
            background-image: url('../static/assets/MemMaker_background.png');
            background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
        }
        video &#123;
            margin: 10px, auto;
            width: 250px;
            height: auto;
        }

          .wrapper &#123;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;

        }

        .header &#123;
            width: 100&#37;;
            padding: 20px;
            text-align: center;
        }

        .columns &#123;
            display: flex;
            width: 80&#37;;
            margin-top: 20px;
        }

        .column &#123;
            padding: 20px;
            box-sizing: border-box;
        }

        .column.left &#123;
            width: 30&#37;;
            border:    1px solid #000;
        }

        .column.right &#123;
        margin: 0 auto; /* Center horizontally */
        width: 60&#37;;
        border: 1px solid #000;
        text-align: center; /* Center video vertically */
    }

    .column.right video &#123;
        max-width: 100&#37;;
        height: auto;
    }
    .note&#123;
       color:red;
       font-size:24px;
    }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h1&gt;HOME index.html&lt;/h1&gt;
&lt;li&gt;&lt;a class="note" href="&#123;&#123; url_for('index') }}"&gt;HOME&lt;/a&gt;&lt;/li&gt;&nbsp;&nbsp;&nbsp;&nbsp;
&lt;li&gt;&lt;a class="note" href="&#123;&#123; url_for('edit_template_page', filename='edit_formatted.html') }}"&gt;Edit This Page&lt;/a&gt;&lt;/li&gt;

    &lt;form method="POST" action="/edit_formatted"&gt;
        &lt;select id="filename-select" name="filename" onchange="loadFileContent()"&gt;
            &#123;&#37; for filename in text_files &#37;}
                &lt;option value="&#123;&#123; filename }}"&gt;&#123;&#123; filename }}&lt;/option&gt;
            &#123;&#37; endfor &#37;}
        &lt;/select&gt;
        &lt;br&gt;&lt;br&gt;
        &lt;textarea id="file-content" name="text" rows="10" cols="50"&gt;&lt;/textarea&gt;
        &lt;br&gt;&lt;br&gt;
        &lt;input type="submit" value="Save Changes"&gt;
    &lt;/form&gt;

    &lt;script&gt;
        // Fetches the file content and updates the textarea
        function loadFileContent() &#123;
            var select = document.getElementById("filename-select");
            var textarea = document.getElementById("file-content");

            var selectedFile = select.value;
            if (selectedFile) &#123;
                fetch(`/get_formatted_content/$&#123;selectedFile}`)
                    .then(response =&gt; response.text())
                    .then(content =&gt; &#123;
                        textarea.value = content;
                    });
            } else &#123;
                textarea.value = "";
            }
        }
    &lt;/script&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!-- app_utilities.html--&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Edit Images And Video&lt;/title&gt;
    &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/flask.css') }}"&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/base.css') }}"&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h1&gt;Edit Images And Video&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="columns"&gt;
            &lt;div class="column left"&gt;
                &lt;h3&gt;Links&lt;/h3&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('mk_text') }}"&gt;Create a Text File&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('format_file') }}"&gt;Format Text Files&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('view_text') }}"&gt;View Text Files&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_file') }}"&gt;Edit File&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_formatted') }}"&gt;Edit Formatted Text&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_template') }}"&gt;Edit a Template&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_description') }}"&gt;Edit Description&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('view_flake8') }}"&gt;View Errors in App&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('view_log') }}"&gt;View App Log&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('capture_html') }}"&gt;Capture Screen _ Video&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_css') }}"&gt;Edit Css Files&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('terminal_index') }}"&gt;Terminal Emulator&lt;/a&gt;&lt;br /&gt;
            &lt;/div&gt;
            &lt;div class="column right"&gt;
                &lt;h2&gt;Random Video&lt;/h2&gt;
                &lt;p&gt;This will eventually be an instruction video on how to use this page&lt;/p&gt;&lt;br /&gt;

                &lt;video controls&gt;
                    &lt;source src="&#123;&#123; video }}" type="video/mp4"&gt;
                    Your browser does not support the video tag.
                &lt;/video&gt;

            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Edit Javascript and Javscript Links&lt;/title&gt;
     &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/flask.css') }}"&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/base.css') }}"&gt;
     &lt;style&gt;
        html,
        body &#123;
            margin: 0;
            padding: 1&#37;;
            height: 100&#37;;
            font-family: Arial, sans-serif;
        }

        body &#123;
            background-image: url('../static/assets/MemMaker_background.png');
            background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
        }
  
       video &#123;
        margin: 10px, auto;
        width: 250px;
        height: auto;
      }
     &lt;/style&gt;
&lt;/head&gt;
    &lt;body&gt;
        &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h1&gt;Edit Javascript and Javscript Links&lt;/h1&gt;
       &lt;a style="font-size: xx-large;"href="&#123;&#123; url_for('index') }}"&gt;Return to HOME&lt;/a&gt;
&lt;p&gt;The originals of all templates edited are saved,by date,in templates/originals/&lt;/p&gt;
        &lt;/div&gt;
    

&lt;div class="columns"&gt;
&lt;div class="column"&gt;
    &lt;form action="/edit_template_page" method="GET"&gt;
        &lt;select name="filename"&gt;
            &#123;&#37; for filename in filenames &#37;}
                &lt;option value="&#123;&#123; filename }}"&gt;&#123;&#123; filename }}&lt;/option&gt;
            &#123;&#37; endfor &#37;}
        &lt;/select&gt;
        &lt;button type="submit"&gt;Edit and Save&lt;/button&gt;
    &lt;/form&gt;
    &lt;hr&gt;
    &#123;&#37; if selected_filename &#37;}
        &lt;h2&gt;Edit &#123;&#123; selected_filename }}&lt;/h2&gt;
        &lt;form action="/edit_template_save" method="POST"&gt;
            &lt;textarea name="edited_content" rows="10" cols="50"&gt;&#123;&#123; original_content }}&lt;/textarea&gt;
            &lt;input type="hidden" name="filename" value="&#123;&#123; selected_filename }}"&gt;
            &lt;button type="submit"&gt;Save&lt;/button&gt;
        &lt;/form&gt;
    &#123;&#37; endif &#37;}
 &lt;ul&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('index_canvas') }}"&gt;Canvas Playground&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('large_script') }}"&gt;Alice Javascript Demo&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('view_text') }}"&gt;View Text Files&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('edit_formatted') }}"&gt;Edit Formatted Text&lt;/a&gt;&lt;/li&gt;
        &lt;li style="font-size: xx-large;"&gt;&lt;a href="&#123;&#123; url_for('edit_template') }}"&gt;Return to Edit Template&lt;/a&gt;&lt;/li&gt;
        
    &lt;/ul&gt; 
&lt;/div&gt;
&lt;div class="column"&gt;
    &lt;h2&gt;Random Video&lt;/h2&gt;
    &lt;video controls&gt;
        &lt;source src="&#123;&#123; video }}" type="video/mp4"&gt;
        Your browser does not support the video tag.
    &lt;/video&gt;
&lt;/div&gt;
&lt;/div&gt;    
&lt;/body&gt;
&lt;/html&gt;
&lt;!-- Compare this snippet from templates/edit_text_save.html: --&gt;&#123;&#37; extends 'base1.html' &#37;}

&#123;&#37; block title &#37;}
    Edit Product
&#123;&#37; endblock &#37;}

&#123;&#37; block content &#37;}
    &lt;h1&gt;Edit Product&lt;/h1&gt;
    &lt;form action="&#123;&#123; url_for('edit_product', product_id=product[0]) }}" method="post"&gt;
        &lt;label for="name"&gt;Name:&lt;/label&gt;
        &lt;input type="text" name="name" value="&#123;&#123; product[1] }}"&gt;&lt;br&gt;
        &lt;label for="description"&gt;Description:&lt;/label&gt;
        &lt;input type="text" name="description" value="&#123;&#123; product[2] }}"&gt;&lt;br&gt;
        &lt;label for="price"&gt;Price:&lt;/label&gt;
        &lt;input type="text" name="price" value="&#123;&#123; product[3] }}"&gt;&lt;br&gt;
        &lt;input type="submit" value="Update Product"&gt;
    &lt;/form&gt;
&#123;&#37; endblock &#37;}
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Script Editor&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Script Editor&lt;/h1&gt;
    &lt;form action="/save_script" method="POST"&gt;
        &lt;textarea name="script_content" rows="10" cols="50"&gt;&#123;&#123; script_content }}&lt;/textarea&gt;
        &lt;br&gt;
        &lt;input type="submit" value="Save Script"&gt;
    &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Edit Script&lt;/title&gt;
    &lt;style&gt;
        html,
        body &#123;
            margin: 0;
            padding: 1&#37;;
            height: 100&#37;;
            font-family: Arial, sans-serif;
        }

        body &#123;
            background-image: url('../static/assets/MemMaker_background.png');
            background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
        }
        &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Edit JavaScript&lt;/h1&gt;
    &lt;a href="&#123;&#123; url_for('index') }}"&gt;Home&lt;/a&gt;&lt;br /&gt;
    &lt;p&gt;Experiment With Javascript Imagery&lt;/p&gt;
        &lt;form method="POST" action="&#123;&#123; url_for('edit_script') }}"&gt;
        &lt;label for="script_file"&gt;Select a JavaScript file:&lt;/label&gt;
        &lt;select name="script_file" id="script_file"&gt;
            &#123;&#37; for script_file in script_files &#37;}
                &lt;option value="&#123;&#123; script_file }}"&gt;&#123;&#123; script_file }}&lt;/option&gt;
            &#123;&#37; endfor &#37;}
        &lt;/select&gt;
        &lt;br&gt;
        &lt;input type="submit" value="Load Script"&gt;
    &lt;/form&gt;
    &lt;hr&gt;
    &lt;h2&gt;Edit the selected script:&lt;/h2&gt;
    &lt;form method="POST" action="&#123;&#123; url_for('save_script') }}"&gt;
        &lt;textarea name="script_content" rows="30" cols="160"&gt;&#123;&#123; script_content }}&lt;/textarea&gt;
        &lt;br&gt;
        &lt;input type="submit" value="Save Script"&gt;
    &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Edit Template&lt;/title&gt;
     &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/body.css') }}"&gt;

&lt;/head&gt;
    &lt;body style='border: 1px solid white;width:85&#37;;'&gt;
        &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h1&gt;Edit Template Files&lt;/h1&gt;
       &lt;a style="font-size: xx-large;"href="&#123;&#123; url_for('index') }}"&gt;Return to HOME&lt;/a&gt;
&lt;p&gt;The originals of all templates edited are saved,by date,in templates/originals/&lt;/p&gt;
        &lt;/div&gt;
    
&lt;div class="column"&gt;
&lt;div class="columns"&gt;
&lt;div class="column left"&gt;
    &lt;form action="/edit_template_page" method="GET"&gt;
        &lt;select name="filename"&gt;
            &#123;&#37; for filename in filenames &#37;}
                &lt;option value="&#123;&#123; filename }}"&gt;&#123;&#123; filename }}&lt;/option&gt;
            &#123;&#37; endfor &#37;}
        &lt;/select&gt;
        &lt;button type="submit"&gt;Edit and Save&lt;/button&gt;
    &lt;/form&gt;
    &lt;hr&gt;
    &#123;&#37; if selected_filename &#37;}
        &lt;h2&gt;Edit &#123;&#123; selected_filename }}&lt;/h2&gt;
        &lt;form action="/edit_template_save" method="POST"&gt;
            &lt;textarea name="edited_content"&gt;&#123;&#123; original_content }}&lt;/textarea&gt;
            &lt;input type="hidden" name="filename" value="&#123;&#123; selected_filename }}"&gt;
            &lt;button type="submit"&gt;Save&lt;/button&gt;
        &lt;/form&gt;
    &#123;&#37; endif &#37;}
 &lt;ul&gt;
        
&lt;li&gt;&lt;a class="note" href="&#123;&#123; url_for('edit_template_page', filename='edit_template.html') }}"&gt;Edit This Page&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href="&#123;&#123; url_for('edit_css') }}"&gt;Edit CSS Files&lt;/a&gt;&lt;/li&gt; 
        
    &lt;/ul&gt; 
&lt;/div&gt;
&lt;div class="column right"&gt;
&lt;p&gt;Special Video chosen for this page.&lt;/p&gt;
    &lt;video controls&gt;
        &lt;source src="&#123;&#123; video }}" type="video/mp4"&gt;
        Your browser does not support the video tag.
    &lt;/video&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;   
&lt;/body&gt;
&lt;/html&gt;
&lt;!-- Compare this snippet from templates/edit_text_save.html: --&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Edit Template Files&lt;/title&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/body.css') }}"&gt;
    &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;

&lt;/head&gt;
&lt;body&gt;

       &lt;h1&gt;Edit &#123;&#123; selected_filename }}&lt;/h1&gt;
    &lt;form action="&#123;&#123; url_for('edit_template_save') }}" method="post"&gt;
        &lt;textarea name="edited_content"&gt;&#123;&#123; original_content }}&lt;/textarea&gt;&lt;br&gt;
        &lt;input type="hidden" name="filename" value="&#123;&#123; selected_filename }}"&gt;
        &lt;input type="submit" value="Save"&gt;
    &lt;/form&gt;
    &lt;!-- link to edit_text --&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('mk_text') }}"&gt;Create a Text File&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('format_file') }}"&gt;Format Text Files&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('view_text') }}"&gt;View Text Files&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('edit_formatted') }}"&gt;Edit Formatted Text&lt;/a&gt;&lt;/li&gt;
        &lt;li style="font-size: xx-large;"&gt;&lt;a href="&#123;&#123; url_for('edit_template') }}"&gt;Return to Edit Template&lt;/a&gt;&lt;/li&gt;
        &lt;li style="font-size: xx-large;"&gt;&lt;a href="&#123;&#123; url_for('index') }}"&gt;Return to HOME&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt; 
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Edit Text&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Edit Text Files&lt;/h1&gt;
    &lt;form action="/edit_text_page" method="GET"&gt;
        &lt;select name="filename"&gt;
            &#123;&#37; for filename in filenames &#37;}
                &lt;option value="&#123;&#123; filename }}"&gt;&#123;&#123; filename }}&lt;/option&gt;
            &#123;&#37; endfor &#37;}
        &lt;/select&gt;
        &lt;button type="submit"&gt;Edit and Save&lt;/button&gt;
    &lt;/form&gt;
    &lt;hr&gt;
    &#123;&#37; if selected_filename &#37;}
        &lt;h2&gt;Edit &#123;&#123; selected_filename }}&lt;/h2&gt;
        &lt;form action="/edit_text_save" method="POST"&gt;
            &lt;textarea name="edited_content" rows="10" cols="50"&gt;&#123;&#123; original_content }}&lt;/textarea&gt;
            &lt;input type="hidden" name="filename" value="&#123;&#123; selected_filename }}"&gt;
            &lt;button type="submit"&gt;Save&lt;/button&gt;
        &lt;/form&gt;
    &#123;&#37; endif &#37;}
&lt;/body&gt;
&lt;/html&gt;
&lt;!-- Compare this snippet from templates/edit_text_save.html: --&gt;&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Edit Text&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Edit Text Files&lt;/h1&gt;
    &lt;form action="/edit_text_page" method="GET"&gt;
        &lt;select name="filename"&gt;
            &#123;&#37; for filename in filenames &#37;}
                &lt;option value="&#123;&#123; filename }}"&gt;&#123;&#123; filename }}&lt;/option&gt;
            &#123;&#37; endfor &#37;}
        &lt;/select&gt;
        &lt;button type="submit"&gt;Edit and Save&lt;/button&gt;
    &lt;/form&gt;
    &lt;hr&gt;
    &#123;&#37; if selected_filename &#37;}
        &lt;h2&gt;Edit &#123;&#123; selected_filename }}&lt;/h2&gt;
        &lt;form action="/edit_text_save" method="POST"&gt;
            &lt;textarea name="edited_content" rows="10" cols="50"&gt;&#123;&#123; original_content }}&lt;/textarea&gt;
            &lt;input type="hidden" name="filename" value="&#123;&#123; selected_filename }}"&gt;
            &lt;button type="submit"&gt;Save&lt;/button&gt;
        &lt;/form&gt;
    &#123;&#37; endif &#37;}
&lt;/body&gt;
&lt;/html&gt;
&lt;!-- Compare this snippet from templates/edit_text_save.html: --&gt;&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Edit Text File&lt;/title&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/flask.css') }}"&gt;
    &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;
   &lt;style&gt;
   body &#123;

    background-image: url('../static/assets/MemMaker_background.png');
    background-repeat: repeat-y;
    background-size: contain;
    background-position: top;
    font-family: Arial, sans-serif;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;!-- link to edit_text --&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('mk_text') }}"&gt;Create a Text File&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('format_file') }}"&gt;Format Text Files&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('view_text') }}"&gt;View Text Files&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('edit_formatted') }}"&gt;Edit Formatted Text&lt;/a&gt;&lt;/li&gt;
        &lt;li style="font-size: xx-large;"&gt;&lt;a href="&#123;&#123; url_for('edit_text') }}"&gt;Return to Edit Text&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt; 
       &lt;h1&gt;Edit &#123;&#123; selected_filename }}&lt;/h1&gt;
    &lt;form action="&#123;&#123; url_for('edit_text_save') }}" method="post"&gt;
        &lt;textarea name="edited_content" rows="10" cols="50"&gt;&#123;&#123; original_content }}&lt;/textarea&gt;&lt;br&gt;
        &lt;input type="hidden" name="filename" value="&#123;&#123; selected_filename }}"&gt;
        &lt;input type="submit" value="Save"&gt;
    &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Edit Text File&lt;/title&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/flask.css') }}"&gt;
    &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;
   &lt;style&gt;
   body &#123;

    background-image: url('../static/assets/MemMaker_background.png');
    background-repeat: repeat-y;
    background-size: contain;
    background-position: top;
    font-family: Arial, sans-serif;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;!-- link to edit_text --&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('mk_text') }}"&gt;Create a Text File&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('format_file') }}"&gt;Format Text Files&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('view_text') }}"&gt;View Text Files&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('edit_formatted') }}"&gt;Edit Formatted Text&lt;/a&gt;&lt;/li&gt;
        &lt;li style="font-size: xx-large;"&gt;&lt;a href="&#123;&#123; url_for('edit_text') }}"&gt;Return to Edit Text&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt; 
       &lt;h1&gt;Edit &#123;&#123; selected_filename }}&lt;/h1&gt;
    &lt;form action="&#123;&#123; url_for('edit_text_save') }}" method="post"&gt;
        &lt;textarea name="edited_content" rows="10" cols="50"&gt;&#123;&#123; original_content }}&lt;/textarea&gt;&lt;br&gt;
        &lt;input type="hidden" name="filename" value="&#123;&#123; selected_filename }}"&gt;
        &lt;input type="submit" value="Save"&gt;
    &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;title&gt;My Flask App&lt;/title&gt;
  &lt;style&gt;
    html, body &#123;
      margin: 0;
      padding: 0;
      height: 100&#37;;
      font-family: Arial, sans-serif;
    }

    body &#123;
      background-image: url('../static/assets/MemMaker_background.png');
      background-repeat: repeat-y;
      background-size: cover; /* Use 'cover' to make the image cover the entire body */
      background-position: top;
    }

    form &#123;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 98vh; /* 85&#37; of the viewport height */
    }

    textarea &#123;
      margin-top: 20px;
      width: 95&#37;;
      height: 100&#37;;
      background-color: azure;
      font-size: 18px;
      border: #000000 1px solid;
      padding: 10px;
      box-sizing: border-box;
    }

    input[type="submit"] &#123;
      margin-top: 5px;
    }
  &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;form action="/save_description" method="POST"&gt;
    &lt;textarea name="description"&gt;&#123;&#123; description }}&lt;/textarea&gt;
    &lt;br&gt;
    &lt;input type="submit" value="Save"&gt;&lt;a href="&#123;&#123; url_for('index') }}"&gt;HOME&lt;/a&gt;&lt;br /&gt;
  &lt;/form&gt;
&lt;/body&gt;

&lt;/html&gt;
&lt;!--enter_data.html Template:--&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Enter Code Snippets&lt;/title&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/flask.css') }}"&gt;
    &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h2&gt;Data Entry&lt;/h2&gt;
    &lt;p&gt;&#123;&#123; formatted_datetime }}&lt;/p&gt;
    &lt;form method="POST"&gt;
        &lt;textarea name="code_block" rows="10" cols="60"&gt;&lt;/textarea&gt;&lt;br&gt;&lt;br&gt;
        &lt;input type="submit" value="Submit"&gt;
    &lt;/form&gt;

    &lt;ul&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('search_code') }}"&gt;Search CodeHints&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('enter_code') }}"&gt;Make a CodeHints Entry&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;a style="font-size: 24px;color: brown;" href="&#123;&#123; url_for('index') }}"&gt;HOME&lt;/a&gt;
&lt;/body&gt;
&lt;/html&gt;&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Error&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Error&lt;/h1&gt;
  &lt;p&gt;&#123;&#123; message }}&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!-- index.html --&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;title&gt;Execute Bash Script&lt;/title&gt;
    &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;

    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/flask.css') }}"&gt;

&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Execute Bash Script&lt;/h1&gt;
    &lt;form action="/execute" method="POST"&gt;
        &lt;textarea name="script" rows="12" cols="120"&gt;&lt;/textarea&gt;
        &lt;br&gt;
        &lt;input type="submit" value="Execute"&gt;
    &lt;/form&gt;
&lt;h1&gt;Example Script: &lt;/h1&gt;
 &lt;p&gt;ffmpeg -framerate 5 -i /home/jack/Desktop/StoryMaker/static/mushrom/&#37;05d.png -c:v libx265 -r 20 -pix_fmt yuv420p -y /home/jack/Desktop/StoryMaker/static/mushrom/flask-images2.mp4&lt;/p&gt;
 &lt;p&gt; mkdir -p /home/jack/Desktop/StoryMaker/static/scripts/back && cp /home/jack/Desktop/StoryMaker/static/scripts/*.* /home/jack/Desktop/StoryMaker/static/scripts/back && ls /home/jack/Desktop/StoryMaker/static/scripts/back
 &lt;/p&gt;   
&lt;/body&gt;
&lt;/html&gt;

&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;title&gt;My Flask App&lt;/title&gt;
  &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/style.css') }}"&gt;
  &lt;script src="&#123;&#123; url_for('static', filename='js/script.js') }}"&gt;&lt;/script&gt;
 &lt;title&gt;My Flask App&lt;/title&gt;
  &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/style.css') }}"&gt;
  &lt;script src="&#123;&#123; url_for('static', filename='js/script.js') }}"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt;
  &lt;style&gt;
    .resizedvideo &#123;
      width: 200px;
      height: 200px;
    }
    .resized_video &#123;
      width: 300px;
      height: auto;
    }

    .section &#123;
      margin-top: 50px;
      width: 95&#37;;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

    .sectionl &#123;
      width: 35&#37;;
      display: flex;
      flex-direction: column;
      align-items: left;
      justify-content: left;
      height: 100vh;
    }

    .sectionr &#123;
      width: 35&#37;;
      display: flex;
      flex-direction: column;
      align-items: right;
      justify-content: right;
      height: 100vh;
    }
  &lt;/style&gt;
  &lt;style&gt;
    html &#123;
      font-family: sans-serif;
    background-color: black;
    }
    body &#123;
      width: 95&#37;;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: rgb(167, 196, 189);
      color: black;
    }
    h1 &#123;
      color: rgb(255, 255, 255);
    }
    #wrapper &#123;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      background-color: teal;
    }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;  &lt;center&gt;  
  &lt;div class="container"&gt;

    &lt;h1 style="color: brown;"&gt;Creating a speaking Avatar with A Flask App. &lt;br /&gt;Click the videos below for
      step-by-step instructions. &lt;/p&gt;&lt;/h1&gt;  

      &lt;video controls class="resizedvideo"&gt;
        &lt;source src="static/assets/result_cl.webm" type="video/mp4"&gt;
        Your browser does not support the video tag.
      &lt;/video&gt;&lt;br /&gt;

      &lt;a href="&#123;&#123; url_for('text_mp3') }}"&gt;First:  Create the mp3&lt;/a&gt;&lt;br /&gt;

      &lt;video controls class="resizedvideo"&gt;
        &lt;source src="static/assets/result_convert_mp3_wav.webm" type="video/mp4"&gt;
        Your browser does not support the video tag.
      &lt;/video&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('convert_mp3_to_wav') }}"&gt;Second: convert_mp3_to_wav&lt;/a&gt;&lt;br /&gt;
      &lt;video controls class="resizedvideo"&gt;
        &lt;source src="static/assets/result_indian.webm" type="video/mp4"&gt;
        Your browser does not support the video tag.
      &lt;/video&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('generate_vid') }}"&gt;Third: Create a Video the same length as the wav Created&lt;/a&gt;&lt;br /&gt;
      &lt;video controls class="resizedvideo"&gt;
        &lt;source src="static/assets/Water-blinking.webm" type="video/mp4"&gt;
        Your browser does not support the video tag.
      &lt;/video&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('create_avatar') }}"&gt;Fourth and Last Step: Create Avatar&lt;/a&gt;&lt;br /&gt;
      &lt;br /&gt;&lt;br /&gt;
      &lt;video controls class="resized_video"&gt;
        &lt;source src="static/assets/final_with_border.mp4" type="video/mp4"&gt;
      &lt;/video&gt;&lt;br /&gt;
        &lt;a href="&#123;&#123; url_for('indexA') }}"&gt;Create a Background for your Avatar&lt;/a&gt;&lt;br /&gt;
        The above video is an example of what will be created.&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;form action="/search" method="GET"&gt;
        &lt;label for="search-term"&gt;Search:&lt;/label&gt;
        &lt;input type="text" id="search-term" name="q"&gt;
        &lt;button type="submit"&gt;Search&lt;/button&gt;
      &lt;/form&gt;
      &lt;br /&gt;
      &lt;h3&gt;Debug test&lt;/h3&gt;
      &lt;a href="&#123;&#123; url_for('upload_file') }}"&gt;Upload Image&lt;/a&gt;&lt;br /&gt;
      &lt;video controls class="resized_video"&gt;
      &lt;a href="&#123;&#123; url_for('choose_dir') }}"&gt;Debug Test&lt;/a&gt;&lt;br /&gt;
    &lt;/div&gt;
&lt;/center&gt;
  &lt;footer class="footer"&gt;
    &lt;center&gt;
      &lt;video controls class="resized-video"&gt;
        &lt;source src="static/assets/result_cl.webm" type="video/mp4"&gt;
        Your browser does not support the video tag.
      &lt;/video&gt;
      &nbsp;&nbsp;&nbsp;&nbsp;
      &lt;img style="width: 30&#37;; height: auto;" src="&#123;&#123; url_for('static', filename='images/image2.jpg') }}"
        alt="Example image"&gt;&lt;br /&gt;&nbsp;&nbsp;&nbsp;
    &lt;/center&gt;
    &lt;h2 style="color: brown;"&gt;Links to YouTube Channels&lt;/h2&gt;
    &lt;style&gt;
      .resized-video &#123;
        width: 25&#37;;
        height: auto;
      }
    &lt;/style&gt;

    &lt;video controls class="resized-video"&gt;
      &lt;source src="static/assets/Talking_AI_Images.webm" type="video/mp4"&gt;
      Your browser does not support the video tag.
    &lt;/video&gt;
  &lt;div class="wrapper"&gt;
    &lt;header class="header"&gt;
      &lt;h1 style="color: brown;"&gt;Image Processing With Flask and Executeable Functions&lt;/h1&gt;&lt;br /&gt;
      &lt;p&gt;Below are links to various Image Processing Functions. &lt;/p&gt;
    &lt;/header&gt;

    &lt;div class="content"&gt;
      &lt;a href="&#123;&#123; url_for('get_gallery') }}"&gt;View Images&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('view_thumbs') }}"&gt;View Thumbnails&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('upload_file') }}"&gt;Upload Image&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('flask_info') }}"&gt;Video&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('add_text') }}"&gt;Add text to chat.txt&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('search_txt') }}"&gt;Search chat.txt&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('blend_pil') }}"&gt;upload and blend images.&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('add_border') }}"&gt;Add a border to an image.&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('process_images') }}"&gt;Process Images With Mask&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('text_mp3') }}"&gt;Create an mp3 from aText Entry&lt;/a&gt;&lt;br /&gt;
    &lt;/div&gt;
    &lt;div class="content"&gt;
      &lt;a href="&#123;&#123; url_for('generate_video') }}"&gt;Create an mp4 from video_resources&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('generate_video2') }}"&gt;Create an mp4 from Uploads&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('generate_video3') }}"&gt;Choose A directory to create video&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('image_directories') }}"&gt;Choose Image directories&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('select_playmp3') }}"&gt;Select and play mp3 from audio_mp3/&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('make_animation') }}"&gt;Create an Animated Gif (20 images @ 1 per second.)&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('build_stackedvids') }}"&gt;Video Stacked on Images&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('build_stackedvid') }}"&gt;Two Video Stacked&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('title_page') }}"&gt;Create a title Page&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('add_title') }}"&gt;Add a Title to a Video&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('add_effects') }}"&gt;Add effects to a Video&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('choose_dir') }}"&gt;Choose a directory&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('indexA') }}"&gt;Working With Text&lt;/a&gt;&lt;br /&gt;

      &lt;form action="&#123;&#123; url_for('clean_images_route') }}" method="POST"&gt;
        &lt;button type="submit"&gt;Clean Images&lt;/button&gt;
      &lt;/form&gt;
      &lt;form action="/search" method="GET"&gt;
        &lt;label for="search-term"&gt;Search:&lt;/label&gt;
        &lt;input type="text" id="search-term" name="q"&gt;
        &lt;button type="submit"&gt;Search&lt;/button&gt;
    &lt;/form&gt;
    &lt;form method="post" action="/mk_vid" enctype="multipart/form-data"&gt;
      &lt;label for="directory"&gt;Select a directory:&lt;/label&gt;
      &lt;select id="directory" name="directory" required&gt;
          &#123;&#37; for directory in directories &#37;}
              &lt;option value="&#123;&#123; directory }}"&gt;&#123;&#123; directory }}&lt;/option&gt;
          &#123;&#37; endfor &#37;}
      &lt;/select&gt;
      &lt;br&gt;&lt;br&gt;
      &lt;input type="submit" value="Process Video"&gt;
  &lt;/form&gt;
  &lt;h1&gt;Text to Video Conversion&lt;/h1&gt;
  &lt;form method="post" action="/maketext" enctype="multipart/form-data"&gt;
      &lt;label for="input_file"&gt;Select a text file:&lt;/label&gt;&lt;br&gt;
      &lt;input type="file" id="input_file" name="input_file" required&gt;&lt;br&gt;&lt;br&gt;
      &lt;input type="submit" value="Convert to Video"&gt;
  &lt;/form&gt;
  &lt;a href="/format_text"&gt;Format Text&lt;/a&gt;
    &lt;/div&gt;
    &lt;footer class="footer"&gt;
      &lt;center&gt;
        &nbsp;&nbsp;&lt;img style="width: 30&#37;; height: auto;"
          src="&#123;&#123; url_for('static', filename='images/' + random_image_file) }}"
          alt="Example image"&gt;&nbsp;&nbsp;&nbsp;&nbsp;
        &lt;img style="width: 30&#37;; height: auto;" src="&#123;&#123; url_for('static', filename='images/image2.jpg') }}"
          alt="Example image"&gt;&lt;br /&gt;&nbsp;&nbsp;&nbsp;
      &lt;/center&gt;
      &lt;h2 style="color: brown;"&gt;Links to YouTube Channels&lt;/h2&gt;
      &lt;a href="https://www.youtube.com/@totallyinsaneart3345" target="_blank "&gt;Totally Insane Art&lt;/a&gt;&lt;br /&gt;
      &lt;a href="https://www.youtube.com/@JackNorthrup" target="_blank "&gt;Jack Northrup&lt;/a&gt;&lt;br /&gt;
      &lt;a href="https://app.prodia.com/#/" target="_blank "&gt;prodia&lt;/a&gt;&lt;br /&gt;
      &lt;a href="https://app.leonardo.ai/" target="_blank "&gt;leonardo.ai&lt;/a&gt;&lt;br /&gt;
    &lt;/footer&gt;
  &lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;&lt;!-- index.html--&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Fade_Index&lt;/title&gt;
    &lt;style&gt;
        html,body &#123;margin: 0;padding: 1&#37;; height: 100&#37;;font-family: Arial, sans-serif;}

        body &#123;background-image: url('../static/assets/MemMaker_background.png');background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
        }
        video &#123;margin: 10px, auto;
            width: 250px;
            height: auto;}

          .wrapper &#123;display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;}

        .header &#123;width: 100&#37;;
            padding: 20px;
            text-align: center;}

        .columns &#123;display: flex;
            width: 80&#37;;
            margin-top: 20px;}

        .column &#123; padding: 20px;
            box-sizing: border-box;}

        .column.left &#123;
            width: 60&#37;;
            border:    1px solid #000;}

        .column.right &#123;
        margin: 0 auto; /* Center horizontally */
        width: 30&#37;;
        border: 1px solid #000;
        text-align: center; /* Center video vertically */}

    .column.right video &#123;
        max-width: 100&#37;;
        height: auto;}
    .note&#123;color:red;font-size:24px;}   
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h1&gt;fade_index.html&lt;/h1&gt;
            &lt;a href="&#123;&#123; url_for('index') }}"&gt;HOME&lt;/a&gt;&lt;br /&gt;
&lt;li&gt;&lt;a class="note" href="&#123;&#123; url_for('edit_template_page', filename='fade_index.html') }}"&gt;Edit This Page&lt;/a&gt;&lt;/li&gt;

        &lt;/div&gt;
        &lt;div class="columns"&gt;
            &lt;div class="column left"&gt;
    &lt;h1&gt;Create Video with Fade Transitions&lt;/h1&gt;
    &lt;form method="POST" action="&#123;&#123; url_for('generate_videoz') }}"&gt;
        &lt;label for="selected_directory"&gt;Select an image directory:&lt;/label&gt;
        &lt;select id="selected_directory" name="selected_directory" required&gt;
            &#123;&#37; for directory in image_directories &#37;}
                &lt;option value="&#123;&#123; directory }}"&gt;&#123;&#123; directory }}&lt;/option&gt;
            &#123;&#37; endfor &#37;}
        &lt;/select&gt;
        &lt;input type="submit" value="Generate Video"&gt;
    &lt;/form&gt;  &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;       &lt;video width="320" height="240" controls&gt;
        &lt;source src="&#123;&#123; url_for('static', filename=video2) }}" type="video/mp4"&gt;
        Your browser does not support the video tag.
            &lt;/div&gt;
            &lt;div class="column right"&gt;
                &lt;h2&gt;Generated Video:&lt;/h2&gt;
                &lt;p&gt;With Frame&lt;/p&gt;
       
                &lt;/video&gt;&nbsp;&nbsp;&nbsp;&nbsp;

                &lt;video width="320" height="240" controls&gt;
                    &lt;source src="&#123;&#123; url_for('static', filename=video) }}" type="video/mp4"&gt;
                    Your browser does not support the video tag.
                &lt;/video&gt;
            &lt;/div&gt;
  
&lt;/body&gt;
&lt;/html&gt;

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Feathered Images&lt;/title&gt;
    &lt;style&gt;
        html,
        body &#123;
            margin: 0;
            padding: 1&#37;;
            height: 100&#37;;
            font-family: Arial, sans-serif;
        }

        body &#123;
            background-image: url('../static/assets/MemMaker_background.png');
            background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
        }
        &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Select a directory:&lt;/h1&gt;
    &lt;a href="&#123;&#123; url_for('index') }}"&gt;HOME&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
    &lt;form method="post"&gt;
        &lt;select name="directories" multiple&gt;
            &#123;&#37; for directory in directories &#37;}
                &lt;option value="&#123;&#123; directory }}"&gt;&#123;&#123; directory }}&lt;/option&gt;
            &#123;&#37; endfor &#37;}
        &lt;/select&gt;
        &lt;button type="submit"&gt;Select Directory&lt;/button&gt;
    &lt;/form&gt;
    
    &#123;&#37; if selected_directory &#37;}
        &lt;h1&gt;Select an image from '&#123;&#123; selected_directory }}':&lt;/h1&gt;
        &lt;form method="post"&gt;
            &lt;input type="hidden" name="selected_directory" value="&#123;&#123; selected_directory }}"&gt;
            &lt;select name="image"&gt;
                &#123;&#37; for image in images &#37;}
                    &lt;option value="&#123;&#123; image }}"&gt;&#123;&#123; image }}&lt;/option&gt;
                &#123;&#37; endfor &#37;}
            &lt;/select&gt;
            &lt;button type="submit"&gt;Feather Image&lt;/button&gt;
        &lt;/form&gt;
    &#123;&#37; endif &#37;}
    
    &#123;&#37; if feathered_image_path &#37;}
        &lt;h2&gt;Feathered Image:&lt;/h2&gt;
        &lt;img src="&#123;&#123; feathered_image_path }}" alt="Feathered Image"&gt;
    &#123;&#37; endif &#37;}
&lt;/body&gt;
&lt;/html&gt;
&lt;!-- index.html--&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Home Flask App Builder&lt;/title&gt;
    &lt;title&gt;Edit Template&lt;/title&gt;
     &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;
        &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/body.css') }}"&gt;
  
&lt;/head&gt; 

&lt;body&gt;
    &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h1 style = color:darkgreen;" &gt;HOME index.html&lt;/h1&gt;
            &lt;a class="note" href="&#123;&#123; url_for('edit_template_page', filename='ffmpeg_commands.html') }}"&gt;Edit This Page&lt;/a&gt;&lt;/li&gt;&lt;br /&gt;
        &lt;/div&gt;
        &lt;div class="columns"&gt;
            &lt;div class="column left"&gt;
                &lt;h3&gt;Links&lt;/h3&gt;
                
                &lt;a href="&#123;&#123; url_for('edit_template') }}"&gt;Edit Links Listed Below&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('mkblend_video') }}"&gt;mkblend_video&lt;/a&gt;

            &lt;/div&gt;
            &lt;div class="column right"&gt;
                &lt;h2&gt;Random Video&lt;/h2&gt;
                &lt;video controls&gt;
                    &lt;source src="&#123;&#123; video }}" type="video/mp4"&gt;
                    Your browser does not support the video tag.
                &lt;/video&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Numeric Input&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Enter a Number&lt;/h1&gt;
    &lt;form method="POST" action="/"&gt;
        &lt;label for="number"&gt;Number:&lt;/label&gt;
        &lt;input type="number" id="number" name="number" min="0" step="1"&gt;
        &lt;br&gt;
        &lt;input type="submit" value="Submit"&gt;
    &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Final Video&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;&lt;center&gt;
    &lt;h1&gt;Final Video&lt;/h1&gt;
    &lt;a href="&#123;&#123; url_for('index') }}"&gt;HOME&lt;/a&gt;&lt;br /&gt;
    &lt;video width="512" height="512" controls&gt;
        &lt;source src="&#123;&#123; url_for('static', filename=video_filez) }}" type="video/mp4"&gt;
    &lt;/video&gt;
    &lt;br /&gt;
&lt;/center&gt;
&lt;/body&gt;
&lt;/html&gt;

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Final Video&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;video width="512" height="512" controls&gt;
        &lt;source src="&#123;&#123; url_for('static', filename=video_file) }}" type="video/mp4"&gt;
    &lt;/video&gt;&lt;br /&gt;
    &lt;span&gt;File Location: static/alice/Final_End.mp4&lt;/span&gt;
&lt;/body&gt;
&lt;/html&gt;

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Final Image&lt;/title&gt;
&lt;style&gt;
.note&#123;
color:red;
font-size:24px;
}
&lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Final Image&lt;/h1&gt;
&lt;a class="note" href="&#123;&#123; url_for('edit_template_page', filename='final_image.html') }}"&gt;Edit This Page&lt;/a&gt;&nbsp;&nbsp; |&nbsp;&nbsp;&lt;a class="note" href="&#123;&#123; url_for('crop') }}"&gt;Crop Images&lt;/a&gt;&nbsp;&nbsp; |&nbsp;&nbsp;&lt;a class="note" href="&#123;&#123; url_for('crop') }}"&gt;Crop an Image&lt;/a&gt; |&nbsp;&nbsp;&lt;a class="note" href="&#123;&#123; url_for('index') }}"&gt;Home&lt;/a&gt;

    &lt;p&gt;&#123;&#123; message }}&lt;/p&gt;
    &lt;img src="&#123;&#123; url_for('static', filename='final_images/'+final_image) }}" alt="&#123;&#123; final_image }}"&gt;
  &lt;/body&gt;
&lt;/html&gt;&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Final Lipsync Video&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;h1&gt;Final Lipsync Video&lt;/h1&gt;
    &lt;video controls autoplay&gt;
        &lt;source src="&#123;&#123; video }}" type="video/mp4"&gt;
        Your browser does not support the video tag.
    &lt;/video&gt;


    &lt;hr&gt;
    &lt;video controls&gt;
        &lt;source src="&#123;&#123; url_for('static', filename='result_voice-0.mp4') }}" type="video/mp4"&gt;
        Your browser does not support the video tag.
    &lt;/video&gt;
&lt;/body&gt;

&lt;/html&gt;



&lt;/body&gt;

&lt;/html&gt;&lt;html&gt;
&lt;head&gt;
      &lt;title&gt;Fish Kiss a Javascript Game&lt;/title&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
          &lt;script type="text/javascript" src="static/fish/jquery-3.1.0.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="static/fish/fish.js"&gt;&lt;/script&gt;
          &lt;meta name="viewport" content="width=device-width, user-scalable=no"&gt;
          &lt;link rel="stylesheet" type="text/css" href="static/fish/style.css"&gt;
      
&lt;/head&gt;
&lt;body onload="docReady()" onkeydown="" onkeyup="" tempAlert();&gt;
  &lt;div class="buttonBoxL"&gt;
          &lt;div class="clickableL" style="margin-top:50px;" onclick="leftArrowPressed()"&gt;&lt;img src="static/fish/L.png"&gt;&lt;/div&gt;
          &lt;div class="clickableL" style="margin-top:30px;" onclick="leftFastPressed()"&gt;&lt;img src="static/fish/FL.png"&gt;&lt;/div&gt;
          &lt;div class="clickableL" style="margin-top:30px;" onclick="downArrowPressed()"&gt;&lt;img src="static/fish/D.png"&gt;&lt;/div&gt;
          &lt;div class="clickableL" style="margin-top:30px;" onclick="downFastPressed()"&gt;&lt;img src="static/fish/FD.png"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="currentnote" style="width:30px;height:19px;background-color:lightgray;border:1px solid gray;text-align:center;font-size:90&#37;;float:left;margin-left:5px;"&gt;&lt;/div&gt;&nbsp;&nbsp;&lt;input type="button" id="emptyStorage" value="Reset Score" style="float:left;"/&gt;
  &lt;p id="left" style="position:absolute;left:80; top:20;"&gt;Location of Left Fish&lt;/p&gt;
  &lt;p id="right" style="position:absolute;left:80; top:40;"&gt;Location of Right Fish&lt;/p&gt; 
  &lt;div class="buttonBoxR"&gt;
        &lt;div class="clickableR" style="margin-top:30px;" onclick="rightArrowPressed()"&gt;&lt;img src="static/fish/R.png"&gt;&lt;/div&gt;
        &lt;div class="clickableR" style="margin-top:30px;" onclick="rightFastPressed()"&gt;&lt;img src="static/fish/FR.png"&gt;&lt;/div&gt;
        &lt;div class="clickableR" style="margin-top:30px;" onclick="upArrowPressed()"&gt;&lt;img src="static/fish/U.png"&gt;&lt;/div&gt;
        &lt;div class="clickableR" style="margin-top:30px;" onclick="upFastPressed()"&gt;&lt;img src="static/fish/FU.png"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;button onclick="myFunction()"&gt;Reload Page&lt;/button&gt;
  &lt;div class="frame"&gt;
    &lt;div class="ani-screen"&gt;
          &lt;div class='c'&gt;&lt;img src="static/fish/bug4.png" style="width:15px;height:30px;"&gt;&lt;/div&gt;
              &lt;img id="myraright" class="dragme" style="position:absolute;left:99; top:247;width: 26px; height: 20px;" src="static/fish/bug3.png" alt=""&gt;
              &lt;img id="image1" src="static/fish/perfect-fish.png" style="position:absolute;left:700; top:250;" height="310" width="350"&gt;
              &lt;img class="d" style="position:absolute;left:99; top:247;width: 140px; height: 80px;" src="static/fish/eater.png" alt=""&gt;
          &lt;div style ="margin-right:70&#37;;width:35&#37;;height:50px;"&gt;
              &lt;div id="floater" class='b'&gt;&lt;img src="static/fish/myraright.png" style="width:200px;height:155px;"&gt;&lt;/div&gt;
         &lt;/div&gt;
         &lt;div style ="margin-left:70&#37;;width:35&#37;;height:50px;"&gt;
              &lt;div class='a'&gt;&lt;img src="static/fish/Brightjelly2.png" style="width:120px;height:200px;"&gt;&lt;/div&gt;
        &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Log Viewer&lt;/title&gt;

    &lt;style&gt;
        pre &#123;
            white-space: pre-wrap;
        }
    &lt;/style&gt;


&lt;/head&gt;
&lt;body&gt;
    &lt;pre&gt;&#123;&#123; flake_content }}&lt;/pre&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;title&gt;Flask Info&lt;/title&gt;
    &lt;meta name="description" content=""&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"&gt;
    &lt;style&gt;
        body &#123;
            background-color: #fff;
            color: #000;
            font-family: Arial, sans-serif;
            font-size: 16px;
            line-height: 1.5;
            margin: 0;
            padding: 0;
        }
    &lt;/style&gt;
    &lt;link rel="stylesheet" type="text/css" href="../static/css/style.css"&gt;
&lt;/head&gt;

&lt;body&gt;

  &lt;video width="640" height="480" controls&gt;
    &lt;source src="&#123;&#123; url_for('static', filename='videos/results/result_voice.mp4') }}" type="video/mp4"&gt;
    Your browser does not support the video tag.
  &lt;/video&gt;
    &lt;code&gt;
        conda deactivate
        source ./venv/bin/activate
    &lt;/code&gt;



&lt;/body&gt;

&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Formatted Text&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Formatted Text&lt;/h1&gt;
    &lt;pre&gt;&#123;&#123; formatted_text }}&lt;/pre&gt;
  &lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Format Text&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Format Text&lt;/h1&gt;
    &lt;form method="POST" action="/format_text" enctype="multipart/form-data"&gt;
      &lt;input type="file" name="input_file"&gt;
      &lt;input type="submit" value="Format"&gt;
    &lt;/form&gt;
  &lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;form action="/format_file" method="post"&gt;
        &lt;select name="filename"&gt;
            &#123;&#37; for file_option in file_options &#37;}
            &lt;option value="&#123;&#123; file_option }}"&gt;&#123;&#123; file_option }}&lt;/option&gt;
            &#123;&#37; endfor &#37;}
        &lt;/select&gt;
        &lt;input type="submit" value="Format"&gt;
    &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Choose Image Directory&lt;/title&gt;
    &lt;style&gt;
        html,
        body &#123;
            margin: 0;
            padding: 1&#37;;
            height: 100&#37;;
            font-family: Arial, sans-serif;
        }

        body &#123;
            background-image: url('../static/assets/MemMaker_background.png');
            background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
        }
        video &#123;
            margin: 10px, auto;
            width: 250px;
            height: auto;
        }

          .wrapper &#123;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Choose an Image Directory:&lt;/h1&gt;
  &lt;p style="font-size: 24px;"&gt;Select a directory to generate a gallery:&lt;/p&gt;
  &lt;!-- link to index --&gt;
  &lt;a style='font-size: 24px;color: brown;' href="&#123;&#123; url_for('index') }}"&gt;HOME&lt;/a&gt;&lt;/br/&gt;&lt;/br/&gt;
  &lt;form action="/gallery" method="POST"&gt;
    &lt;select name="directory"&gt;
      &#123;&#37; for directory in directories &#37;}
        &lt;option value="&#123;&#123; directory }}"&gt;&#123;&#123; directory }}&lt;/option&gt;
      &#123;&#37; endfor &#37;}
    &lt;/select&gt;
    &lt;input type="submit" value="Generate Gallery"&gt;
  &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Generated Video Path&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;h1&gt;Generated Video Path&lt;/h1&gt;
        &lt;form method="POST" action="/generate_blank_video" enctype="multipart/form-data"&gt;
            &lt;label for="selected_video"&gt;Select Video:&lt;/label&gt;
            &lt;input type="file" name="selected_video" id="selected_video"&gt;
            &lt;br&gt;&lt;br&gt;
            &lt;input type="submit" value="Generate and Overlay"&gt;
        &lt;/form&gt;
        
        &lt;br&gt;&lt;br&gt;
        &#123;&#37; if step2_path &#37;}
            &lt;p&gt;Output Path: &#123;&#123; step2_path }}&lt;/p&gt;
            &lt;video width="50&#37;" controls&gt;
                &lt;source src="&#123;&#123; step2_path }}" type="video/mp4"&gt;
                Your browser does not support the video tag.
            &lt;/video&gt;
        &#123;&#37; else &#37;}
            &lt;p&gt;No video generated.&lt;/p&gt;
        &#123;&#37; endif &#37;}
    &lt;/body&gt;
    &lt;/html&gt;
 &lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Generated Video&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Generated Video&lt;/h1&gt;
    &lt;a href="&#123;&#123; url_for('index') }}"&gt;Home&lt;/a&gt;&lt;br /&gt;
    &lt;p&gt;Video path: &#123;&#123; video_path }}&lt;/p&gt;
    &lt;video width="512" height="768" controls&gt;
      &lt;source src="&#123;&#123; video_url }}" type="video/mp4"&gt;
      Your browser does not support the video tag.
    &lt;/video&gt;
  &lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Generated Video&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Generated Video&lt;/h1&gt;
    &lt;a href="&#123;&#123; url_for('index') }}"&gt;Home&lt;/a&gt;&lt;br /&gt;
    &lt;form action="&#123;&#123; url_for('generate_video3') }}" method="POST" enctype="multipart/form-data"&gt;
      &lt;label for="file"&gt;File:&lt;/label&gt;
      &lt;input type="file" id="file" name="file" webkitdirectory mozdirectory&gt;
      &lt;button type="submit"&gt;Generate Video&lt;/button&gt;
    &lt;/form&gt;
    &#123;&#37; if error_message &#37;}
    &lt;p&gt;Error: &#123;&#123; error_message }}&lt;/p&gt;
    &#123;&#37; endif &#37;}
    &#123;&#37; if video_url &#37;}
    &lt;p&gt;Video path: &#123;&#123; video_path }}&lt;/p&gt;
    &lt;video width="512" height="768" controls&gt;
      &lt;source src="&#123;&#123; video_url }}" type="video/mp4"&gt;
      Your browser does not support the video tag.
    &lt;/video&gt;
    &#123;&#37; endif &#37;}
  &lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Generate Video&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Generate Video&lt;/h1&gt;
    &lt;a href="&#123;&#123; url_for('index') }}"&gt;Home&lt;/a&gt;
    
    &lt;form action="/generate_video" method="POST"&gt;

  &lt;video width="300" height="auto" controls&gt;
            &lt;source src="static/TEMP.mp4" type="video/mp4"&gt;
        &lt;/video&gt;
        &lt;audio controls&gt;
            &lt;source src="static/TEMP.mp3" type="audio/mpeg"&gt;
            Your browser does not support the audio element.
        &lt;/audio&gt;
        &lt;input type="submit" value="Generate Video"&gt;
    &lt;/form&gt;
    
    &#123;&#37; if video_path &#37;}
        &lt;h2&gt;Generated Video:&lt;/h2&gt;
        &lt;video width="640" height="480" controls&gt;
            &lt;source src="&#123;&#123; video_path }}" type="video/mp4"&gt;
        &lt;/video&gt;
    &#123;&#37; endif &#37;}

    &lt;h1&gt;Run Command&lt;/h1&gt;
&lt;p&gt;After all the above steps are completed you see voice 'Speaking_Video' below this line.&lt;br /&gt;
    it is not lipsynced yet. press Run_Command to lipsyc the the video you see . &lt;br /&gt;
    The video is located here: static/final_video.mp4&lt;/p&gt;
    &lt;video width="200" height="auto" controls&gt;
        &lt;source src="static/final_video.mp4" type="video/mp4"&gt;
    &lt;/video&gt;&lt;br /&gt;
    &lt;span &gt;MakeVideo&lt;/span&gt;
    &lt;button onclick="runCommand()"&gt;Run_Command&lt;/button&gt;

    &lt;script&gt;
        function runCommand() &#123;
            $.ajax(&#123;
                type: "GET",
                url: "/run_command",
                success: function(response) &#123;
                    console.log(response);
                },
                error: function(xhr, status, error) &#123;
                    console.error(error);
                }
            });
        }
    &lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Generate Video&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Generate Video&lt;/h1&gt;
    &lt;form method="POST" enctype="multipart/form-data" action="/generate_vid"&gt;
        &lt;label for="audio"&gt;Upload Audio:&lt;/label&gt;
        &lt;input type="file" id="audio" name="audio" accept=".wav" directory="sample_data"&gt;
        &lt;br&gt;
        &lt;label for="image"&gt;Upload Image:&lt;/label&gt;
        &lt;input type="file" id="image" name="image" accept=".jpg,.jpeg,.png" directory="static/images/uploads"&gt;
        &lt;br&gt;
        &lt;input type="submit" value="Generate"&gt;
    &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Generate Video&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Generate Video&lt;/h1&gt;
    &lt;form method="POST" enctype="multipart/form-data" action="/generate_video"&gt;
        &lt;label for="audio"&gt;Upload Audio:&lt;/label&gt;
        &lt;input type="file" id="audio" name="audio"&gt;
        &lt;br&gt;
        &lt;input type="submit" value="Generate"&gt;
    &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Generate Video&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Generate Video&lt;/h1&gt;
    &lt;form method="POST" enctype="multipart/form-data" action="/generate_vid"&gt;
        &lt;label for="audio"&gt;Upload Audio:&lt;/label&gt;
        &lt;input type="file" id="audio" name="audio" accept=".mp3" directory="static/audio_mp3"&gt;
        &lt;br&gt;
        &lt;label for="image"&gt;Upload Image:&lt;/label&gt;
        &lt;input type="file" id="image" name="image" accept=".jpg,.jpeg,.png" directory="static/images/uploads"&gt;
        &lt;br&gt;
        &lt;input type="submit" value="Generate"&gt;
    &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
          integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div class="container"&gt;

    &lt;div class="row"&gt;

        &lt;div class="col-lg-12"&gt;
            &lt;h1 class="page-header"&gt;Thumbnail Gallery&lt;/h1&gt;
        &lt;/div&gt;
        &#123;&#123;image_names}}
        &lt;hr&gt;
        &#123;&#37; for image_name in image_names &#37;}
        &lt;div class="col-lg-3 col-md-4 col-xs-6 thumb"&gt;
            &lt;img class="img-responsive" src=" &#123;&#123;url_for('send_image', filename=image_name)}}"&gt;
            
        &lt;/div&gt;
        &#123;&#37; endfor &#37;}
    &lt;/div&gt;
&lt;/div&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
        integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
        crossorigin="anonymous"&gt;&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Enter Row ID&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Enter Row ID&lt;/h1&gt;
    &lt;form action="&#123;&#123; url_for('get_rowid_form') }}" method="post"&gt;
        &lt;label for="rowid"&gt;Row ID:&lt;/label&gt;
        &lt;input type="number" name="rowid" id="rowid" required&gt;
        &lt;br&gt;
        &lt;button type="submit"&gt;Edit Row&lt;/button&gt;
    &lt;/form&gt;
    &lt;br&gt;
    &lt;a href="&#123;&#123; url_for('indexdb') }}"&gt;Go back to the Index Page&lt;/a&gt;
&lt;/body&gt;
&lt;/html&gt;
 &lt;pre&gt;
 HTML5 Canvas Cheat Sheet

This cheat sheet summarizes the complete HTML5 Canvas API for the 2D context, based on to the W3C HTML5 Canvas Spec. It also provides techniques for handling common proceedures.

    HTML5 Canvas Element
    Html5 canvas element

    &lt;canvas id="myCanvas" width="500" height="300"&gt;

    Html5 canvas element with fallback content

    &lt;canvas id="myCanvas" width="500" height="300"&gt;
      your browser doesn't support canvas!
    &lt;/canvas&gt;

    2d context

    var context = canvas.getContext('2d');

    Webgl context (3d)

    var context = canvas.getContext('webgl');

    Shapes
    Draw rectangle

    context.rect(x, y, width, height);
    context.fill();
    context.stroke();

    Fill rectangle shorthand

    context.fillRect(x, y, width, height);

    Stroke rectangle shorthand

    context.strokeRect(x, y, width, height);

    Draw circle

    context.arc(x, y, radius, 0, Math.PI * 2);
    context.fill();
    context.stroke();

    Styles
    Fill

    context.fillStyle = 'red';
    context.fill();

    Stroke

    context.strokeStyle = 'red';
    context.stroke();

    Linear gradient

    var grd = context.createLinearGradient(x1, y1, x2, y2);
    grd.addColorStop(0, 'red');   
    grd.addColorStop(1, 'blue');
    context.fillStyle = grd;
    context.fill();

    Radial gradient

    var grd = context.createRadialGradient(x1, y1, radius1, x2, y2, radius2);
    grd.addColorStop(0, 'red');
    grd.addColorStop(1, 'blue');
    context.fillStyle = grd;
    context.fill();

    Pattern

    var imageObj = new Image();
    imageObj.onload = function() &#123;
      var pattern = context.createPattern(imageObj, 'repeat');
      context.fillStyle = pattern;
      context.fill();
    };
    imageObj.src = 'path/to/my/image.jpg';

    Line Join

    context.lineJoin = 'miter|round|bevel';

    Line Cap

    context.lineCap = 'butt|round|square';

    Shadow

    context.shadowColor = 'black';
    context.shadowBlur = 20;
    context.shadowOffsetX = 10;
    context.shadowOffsetY = 10;

    Alpha (Opacity)

    context.globalAlpha = 0.5; // between 0 and 1

    Color Formats
    String

    context.fillStyle = 'red';

    Hex Long

    context.fillStyle = '#ff0000';

    Hex Short

    context.fillStyle = '#f00';

    RGB

    context.fillStyle = 'rgb(255,0,0)';

    RGBA

    context.fillStyle = 'rgba(255,0,0,1)';

    Paths
    Begin Path

    context.beginPath();

    Line

    context.lineTo(x, y);

    Arc

    context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

    Quadratic curve

    context.quadraticCurveTo(cx, cy, x, y);

    Bezier curve

    context.bezierCurveTo(cx1, cy1, cx2, cy2, x, y);

    Close Path

    context.closePath();

    Images
    Draw Image with default size

    var imageObj = new Image();
    imageObj.onload = function() &#123;
      context.drawImage(imageObj, x, y);
    };
    imageObj.src = 'path/to/my/image.jpg';

    Draw image and set size

    var imageObj = new Image();
    imageObj.onload = function() &#123;
      context.drawImage(imageObj, x, y, width, height);
    };
    imageObj.src = 'path/to/my/image.jpg';

    Crop image

    var imageObj = new Image();
    imageObj.onload = function() &#123;
      context.drawImage(imageObj, sx, sy, sw, sh, dx, dy, dw, dh);
    };
    imageObj.src = 'path/to/my/image.jpg';

    Text
    Fill Text

    context.font = '40px Arial';
    context.fillStyle = 'red';
    context.fillText('Hello World!', x, y);

    Stroke Text

    context.font = '40pt Arial';
    context.strokeStyle = 'red';
    context.strokeText('Hello World!', x, y);

    Bold Text

    context.font = 'bold 40px Arial';

    Italic Text

    context.font = 'italic 40px Arial';

    Text Align

    context.textAlign = 'start|end|left|center|right';

    Text Baseline

    context.textBaseline = 'top|hanging|middle|alphabetic|ideographic
    |bottom';

    Get Text Width

    var width = context.measureText('Hello world').width;

    Transforms
    Translate

    context.translate(x, y);

    Scale

    context.scale(x, y);

    Rotate

    context.rotate(radians);

    Flip Horizontally

    context.scale(-1, 1);

    Flip Vertically

    context.scale(1, -1);

    Custom Transform

    context.transform(a, b, c, d ,e, f);

    Set Transform

    context.setTransform(a, b, c, d ,e, f);

    Shear

    context.transform(1, sy, sx, 1, 0, 0);

    Reset

    context.setTransform(1, 0, 0, 1, 0, 0);

    State Stack
    Push State onto Stack

    context.save();

    Pop State off of Stack

    context.restore();

    Clipping
    Clip

    // draw path here
    context.clip();

    Image Data
    Get Image Data

    var imageData = context.getImageData(x, y, width, height);
    var data = imageData.data;

    Loop Through Image Pixels

    var imageData = context.getImageData(x, y, width, height);
    var data = imageData.data;
    var len = data.length;
    var i, red, green, blue, alpha;

    for(i = 0; i &lt; len; i += 4) &#123;
      red = data[i];
      green = data[i + 1];
      blue = data[i + 2];
      alpha = data[i + 3];
    }

    Loop Through Image Pixels With Coordinates

    var imageData = context.getImageData(x, y, width, height);
    var data = imageData.data;
    var x, y, red, green, blue, alpha;

    for(y = 0; y &lt; imageHeight; y++) &#123;
      for(x = 0; x &lt; imageWidth; x++) &#123;
        red = data[((imageWidth * y) + x) * 4];
        green = data[((imageWidth * y) + x) * 4 + 1];
        blue = data[((imageWidth * y) + x) * 4 + 2];
        alpha = data[((imageWidth * y) + x) * 4 + 3];
      }
    }

    Set Image Data

    context.putImageData(imageData, x, y);

    Data URLs
    Get Data URL

    var dataURL = canvas.toDataURL();

    Render Canvas with Data URL

    var imageObj = new Image();
    imageObj.onload = function() &#123;
      context.drawImage(imageObj, 0, 0);
    };

    imageObj.src = dataURL;

    Composites
    Composite Operations

    context.globalCompositeOperation = 'source-atop|source-in|source-out|source-over|destination-atop|destination-in|destination-out|destination-over|lighter|xor|copy';

&lt;/pre&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;&lt;link type="text/css" rel="stylesheet" id="dark-mode-custom-link"&gt;&lt;link type="text/css" rel="stylesheet" id="dark-mode-general-link"&gt;&lt;style lang="en" type="text/css" id="dark-mode-custom-style"&gt;&lt;/style&gt;&lt;style lang="en" type="text/css" id="dark-mode-native-style"&gt;&lt;/style&gt;&lt;style lang="en" type="text/css" id="dark-mode-native-sheet"&gt;&lt;/style&gt;&lt;head&gt;
&lt;meta http-equiv="content-type" content="text/html; charset=windows-1252"&gt;
    &lt;title&gt;HTML5 Canvas Cheat Sheet&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;link href="HTML5&#37;20Canvas&#37;20Cheat&#37;20Sheet_files/normalize.css" rel="stylesheet" media="screen"&gt;
    &lt;link href="HTML5&#37;20Canvas&#37;20Cheat&#37;20Sheet_files/main.css" rel="stylesheet"&gt;
    
    &lt;script src="HTML5&#37;20Canvas&#37;20Cheat&#37;20Sheet_files/prompt.js"&gt;&lt;/script&gt;&lt;/head&gt;
  &lt;body&gt;
    &lt;div class="content"&gt;
   
      &lt;h1&gt;HTML5 Canvas Cheat Sheet&lt;/h1&gt;
  
  &lt;p id="intro"&gt;
  This cheat sheet summarizes the complete HTML5 Canvas API for the 2D context, based on to the &lt;a href="http://www.w3.org/TR/2dcontext/" target="_blank"&gt;W3C HTML5 Canvas Spec&lt;/a&gt;.  It also provides techniques for handling common proceedures.
&lt;/p&gt;

&lt;ul id="items" style="position: relative; height: 2380px;"&gt;
  &lt;!---------------------- ITEM ----------------------&gt;
  &lt;li class="item" style="position: absolute; left: 0px; top: 0px;"&gt;
    &lt;h2&gt;HTML5 Canvas Element&lt;/h2&gt;
 
&lt;h3&gt;Html5 canvas element&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;&lt;canvas id="myCanvas" width="500" height="300"&lt;
&lt;/pre&gt;

&lt;h3&gt;Html5 canvas element with fallback content&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;&lt;canvas id="myCanvas" width="500" height="300"&lt;
  your browser doesn't support canvas!
&lt;/canvas&lt;
&lt;/pre&gt;
   
&lt;h3&gt;2d context&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;var context = canvas.getContext('2d');
&lt;/pre&gt;

&lt;h3&gt;Webgl context (3d)&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;var context = canvas.getContext('webgl');
&lt;/pre&gt;

  &lt;/li&gt;
  
  &lt;!---------------------- SHAPES ----------------------&gt;
  &lt;li class="item" style="position: absolute; left: 380px; top: 0px;"&gt;
    &lt;h2&gt;Shapes&lt;/h2&gt;
    
&lt;h3&gt;Draw rectangle&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.rect(x, y, width, height);
context.fill();
context.stroke();
&lt;/pre&gt;

&lt;h3&gt;Fill rectangle shorthand&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.fillRect(x, y, width, height);
&lt;/pre&gt;

&lt;h3&gt;Stroke rectangle shorthand&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.strokeRect(x, y, width, height);
&lt;/pre&gt;

&lt;h3&gt;Draw circle&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.arc(x, y, radius, 0, Math.PI * 2);
context.fill();
context.stroke();
&lt;/pre&gt;

  &lt;/li&gt;
  
  &lt;!---------------------- STYLES ----------------------&gt;
  &lt;li class="item" style="position: absolute; left: 760px; top: 0px;"&gt;
    &lt;h2&gt;Styles&lt;/h2&gt;

&lt;h3&gt;Fill&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.fillStyle = 'red';
context.fill();
&lt;/pre&gt;
    
&lt;h3&gt;Stroke&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.strokeStyle = 'red';
context.stroke();
&lt;/pre&gt;

&lt;h3&gt;Linear gradient&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;var grd = context.createLinearGradient(x1, y1, x2, y2);
grd.addColorStop(0, 'red');   
grd.addColorStop(1, 'blue');
context.fillStyle = grd;
context.fill();
&lt;/pre&gt;

&lt;h3&gt;Radial gradient&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;var grd = context.createRadialGradient(x1, y1, radius1, x2, y2, radius2);
grd.addColorStop(0, 'red');
grd.addColorStop(1, 'blue');
context.fillStyle = grd;
context.fill();
&lt;/pre&gt;


&lt;h3&gt;Pattern&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;var imageObj = new Image();
imageObj.onload = function() &#123;
  var pattern = context.createPattern(imageObj, 'repeat');
  context.fillStyle = pattern;
  context.fill();
};
imageObj.src = 'path/to/my/image.jpg';
&lt;/pre&gt;

&lt;h3&gt;Line Join&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.lineJoin = 'miter|round|bevel';
&lt;/pre&gt;

&lt;h3&gt;Line Cap&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.lineCap = 'butt|round|square';
&lt;/pre&gt;

&lt;h3&gt;Shadow&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.shadowColor = 'black';
context.shadowBlur = 20;
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
&lt;/pre&gt;

&lt;h3&gt;Alpha (Opacity)&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.globalAlpha = 0.5; // between 0 and 1
&lt;/pre&gt;
      
      
  &lt;!---------------------- COLOR FORMATS ----------------------&gt;
  &lt;/li&gt;&lt;li class="item" style="position: absolute; left: 380px; top: 374px;"&gt;
    &lt;h2&gt;Color Formats&lt;/h2&gt;
    
&lt;h3&gt;String&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.fillStyle = 'red';
&lt;/pre&gt;

&lt;h3&gt;Hex Long&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.fillStyle = '#ff0000';
&lt;/pre&gt;

&lt;h3&gt;Hex Short&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.fillStyle = '#f00';
&lt;/pre&gt;

&lt;h3&gt;RGB&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.fillStyle = 'rgb(255,0,0)';
&lt;/pre&gt;

&lt;h3&gt;RGBA&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.fillStyle = 'rgba(255,0,0,1)';
&lt;/pre&gt;

  &lt;/li&gt;

  &lt;!---------------------- PATHS ----------------------&gt;
  &lt;li class="item" style="position: absolute; left: 0px; top: 390px;"&gt;
    &lt;h2&gt;Paths&lt;/h2&gt;
  
&lt;h3&gt;Begin Path&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.beginPath();
&lt;/pre&gt;
 
&lt;h3&gt;Line&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.lineTo(x, y);
&lt;/pre&gt;

&lt;h3&gt;Arc&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
&lt;/pre&gt;

&lt;h3&gt;Quadratic curve&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.quadraticCurveTo(cx, cy, x, y);
&lt;/pre&gt;
 
&lt;h3&gt;Bezier curve&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.bezierCurveTo(cx1, cy1, cx2, cy2, x, y);
&lt;/pre&gt;

&lt;h3&gt;Close Path&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.closePath();
&lt;/pre&gt;
  &lt;/li&gt;
  
  &lt;!---------------------- IMAGES ----------------------&gt;
  &lt;li class="item" style="position: absolute; left: 380px; top: 721px;"&gt;
    &lt;h2&gt;Images&lt;/h2&gt;
    
&lt;h3&gt;Draw Image with default size&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;var imageObj = new Image();
imageObj.onload = function() &#123;
  context.drawImage(imageObj, x, y);
};
imageObj.src = 'path/to/my/image.jpg';
&lt;/pre&gt;

&lt;h3&gt;Draw image and set size&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;var imageObj = new Image();
imageObj.onload = function() &#123;
  context.drawImage(imageObj, x, y, width, height);
};
imageObj.src = 'path/to/my/image.jpg';
&lt;/pre&gt;

&lt;h3&gt;Crop image&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;var imageObj = new Image();
imageObj.onload = function() &#123;
  context.drawImage(imageObj, sx, sy, sw, sh, dx, dy, dw, dh);
};
imageObj.src = 'path/to/my/image.jpg';
&lt;/pre&gt;

  &lt;!---------------------- TEXT ----------------------&gt;
  &lt;/li&gt;&lt;li class="item" style="position: absolute; left: 0px; top: 836px;"&gt;
    &lt;h2&gt;Text&lt;/h2&gt;

&lt;h3&gt;Fill Text&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.font = '40px Arial';
context.fillStyle = 'red';
context.fillText('Hello World!', x, y);
&lt;/pre&gt;

&lt;h3&gt;Stroke Text&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.font = '40pt Arial';
context.strokeStyle = 'red';
context.strokeText('Hello World!', x, y);
&lt;/pre&gt;

&lt;h3&gt;Bold Text&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.font = 'bold 40px Arial';
&lt;/pre&gt;

&lt;h3&gt;Italic Text&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.font = 'italic 40px Arial';
&lt;/pre&gt;

&lt;h3&gt;Text Align&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.textAlign = 'start|end|left|center|right';
&lt;/pre&gt;

&lt;h3&gt;Text Baseline&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.textBaseline = 'top|hanging|middle|alphabetic|ideographic
|bottom';
&lt;/pre&gt;

&lt;h3&gt;Get Text Width&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;var width = context.measureText('Hello world').width;
&lt;/pre&gt;


  &lt;!---------------------- TRANSFORMS ----------------------&gt;
  &lt;/li&gt;&lt;li class="item" style="position: absolute; left: 760px; top: 1058px;"&gt;
    &lt;h2&gt;Transforms&lt;/h2&gt;

&lt;h3&gt;Translate&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.translate(x, y);
&lt;/pre&gt;

&lt;h3&gt;Scale&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.scale(x, y);
&lt;/pre&gt;

&lt;h3&gt;Rotate&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.rotate(radians);
&lt;/pre&gt;

&lt;h3&gt;Flip Horizontally&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.scale(-1, 1);
&lt;/pre&gt;

&lt;h3&gt;Flip Vertically&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.scale(1, -1);
&lt;/pre&gt;

&lt;h3&gt;Custom Transform&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.transform(a, b, c, d ,e, f);
&lt;/pre&gt;

&lt;h3&gt;Set Transform&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.setTransform(a, b, c, d ,e, f);
&lt;/pre&gt;

&lt;h3&gt;Shear&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.transform(1, sy, sx, 1, 0, 0);
&lt;/pre&gt;

&lt;h3&gt;Reset&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.setTransform(1, 0, 0, 1, 0, 0);
&lt;/pre&gt;
  &lt;/li&gt;
  
  &lt;!---------------------- STATE STACK ----------------------&gt;
  &lt;li class="item" style="position: absolute; left: 380px; top: 1248px;"&gt;
    &lt;h2&gt;State Stack&lt;/h2&gt;

&lt;h3&gt;Push State onto Stack&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.save();
&lt;/pre&gt;

&lt;h3&gt;Pop State off of Stack&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.restore();
&lt;/pre&gt;

  &lt;/li&gt;    
 
 
   &lt;!---------------------- CLIPPING ----------------------&gt;
  &lt;li class="item" style="position: absolute; left: 380px; top: 1424px;"&gt;
    &lt;h2&gt;Clipping&lt;/h2&gt;

&lt;h3&gt;Clip&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;// draw path here
context.clip();
&lt;/pre&gt;

  &lt;/li&gt; 
  
  &lt;!---------------------- IMAGE DATA ----------------------&gt;
  &lt;li class="item" style="position: absolute; left: 0px; top: 1465px;"&gt;
    &lt;h2&gt;Image Data&lt;/h2&gt;

&lt;h3&gt;Get Image Data&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;var imageData = context.getImageData(x, y, width, height);
var data = imageData.data;
&lt;/pre&gt;

&lt;h3&gt;Loop Through Image Pixels&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;var imageData = context.getImageData(x, y, width, height);
var data = imageData.data;
var len = data.length;
var i, red, green, blue, alpha;

for(i = 0; i &lt; len; i += 4) &#123;
  red = data[i];
  green = data[i + 1];
  blue = data[i + 2];
  alpha = data[i + 3];
}
&lt;/pre&gt;


&lt;h3&gt;Loop Through Image Pixels With Coordinates&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;var imageData = context.getImageData(x, y, width, height);
var data = imageData.data;
var x, y, red, green, blue, alpha;

for(y = 0; y &lt; imageHeight; y++) &#123;
  for(x = 0; x &lt; imageWidth; x++) &#123;
    red = data[((imageWidth * y) + x) * 4];
    green = data[((imageWidth * y) + x) * 4 + 1];
    blue = data[((imageWidth * y) + x) * 4 + 2];
    alpha = data[((imageWidth * y) + x) * 4 + 3];
  }
}
&lt;/pre&gt;

&lt;h3&gt;Set Image Data&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.putImageData(imageData, x, y);
&lt;/pre&gt;

  &lt;/li&gt; 
  
    &lt;!---------------------- DATA URLS ----------------------&gt;
  &lt;li class="item" style="position: absolute; left: 380px; top: 1564px;"&gt;
    &lt;h2&gt;Data URLs&lt;/h2&gt;

&lt;h3&gt;Get Data URL&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;var dataURL = canvas.toDataURL();
&lt;/pre&gt;

&lt;h3&gt;Render Canvas with Data URL&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;var imageObj = new Image();
imageObj.onload = function() &#123;
  context.drawImage(imageObj, 0, 0);
};

imageObj.src = dataURL;
&lt;/pre&gt;

  &lt;/li&gt; 
  
   &lt;!---------------------- COMPOSITES ----------------------&gt;
  &lt;li class="item" style="position: absolute; left: 760px; top: 1633px;"&gt;
    &lt;h2&gt;Composites&lt;/h2&gt;

&lt;h3&gt;Composite Operations&lt;/h3&gt;
&lt;pre class="prettyprint"&gt;context.globalCompositeOperation = 'source-atop|source-in|source-out|source-over|destination-atop|destination-in|destination-out|destination-over|lighter|xor|copy';
&lt;/pre&gt;


  &lt;/li&gt; 
  
       
  
  
&lt;/ul&gt;  
  
      &lt;script src="HTML5&#37;20Canvas&#37;20Cheat&#37;20Sheet_files/masonry.pkgd.min.js"&gt;&lt;/script&gt;
      &lt;script src="HTML5&#37;20Canvas&#37;20Cheat&#37;20Sheet_files/main.js"&gt;&lt;/script&gt;
     
    &lt;/div&gt;
  

&lt;/body&gt;&lt;/html&gt;&lt;!-- index.html--&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;html Base&lt;/title&gt;
    &lt;style&gt;
        html,
        body &#123;
            margin: 0;
            padding: 1&#37;;
            height: 100&#37;;
            font-family: Arial, sans-serif;
        }

        body &#123;
            background-image: url('../static/assets/MemMaker_background.png');
            background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
        }
        video &#123;
            margin: 10px, auto;
            width: 250px;
            height: auto;
        }

          .wrapper &#123;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;

        }

        .header &#123;
            width: 100&#37;;
            padding: 20px;
            text-align: center;
        }

        .columns &#123;
            display: flex;
            width: 80&#37;;
            margin-top: 20px;
        }

        .column &#123;
            padding: 20px;
            box-sizing: border-box;
        }

        .column.left &#123;
            width: 30&#37;;
            border:    1px solid #000;
        }

        .column.right &#123;
        margin: 0 auto; /* Center horizontally */
        width: 60&#37;;
        border: 1px solid #000;
        text-align: center; /* Center video vertically */
    }

    .column.right video &#123;
        max-width: 100&#37;;
        height: auto;
    }
    .note&#123;
       color:red;
       font-size:24px;
    }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h1&gt;HTML base&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="columns"&gt;


&lt;pre &#123;&#123; preformatted_text|safe }}&gt;
&lt;!-- index.html--&lt;
&lt;!DOCTYPE html&lt;
&lt;html&lt;

&lt;head&lt;
    &lt;title&lt;Home Flask App Builder&lt;/title&lt;
    &lt;style&lt;
        html,
        body &#123;
            margin: 0;
            padding: 1&#37;;
            height: 100&#37;;
            font-family: Arial, sans-serif;
        }

        body &#123;
            background-image: url('../static/assets/MemMaker_background.png');
            background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
        }
        video &#123;
            margin: 10px, auto;
            width: 250px;
            height: auto;
        }

          .wrapper &#123;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;

        }

        .header &#123;
            width: 100&#37;;
            padding: 20px;
            text-align: center;
        }

        .columns &#123;
            display: flex;
            width: 80&#37;;
            margin-top: 20px;
        }

        .column &#123;
            padding: 20px;
            box-sizing: border-box;
        }

        .column.left &#123;
            width: 30&#37;;
            border:    1px solid #000;
        }

        .column.right &#123;
        margin: 0 auto; /* Center horizontally */
        width: 60&#37;;
        border: 1px solid #000;
        text-align: center; /* Center video vertically */
    }

    .column.right video &#123;
        max-width: 100&#37;;
        height: auto;
    }
    .note&#123;
       color:red;
       font-size:24px;
    }
    &lt;/style&lt;
&lt;/head&lt;
&lt;body&lt;
    &lt;div class="wrapper"&lt;
        &lt;div class="header"&lt;
            &lt;h1&lt;HOME index.html&lt;/h1&lt;
        &lt;/div&lt;
        &lt;div class="columns"&lt;
            &lt;div class="column left"&lt;
                &lt;h3&lt;Create Text&lt;/h3&lt;&lt;br /&lt;
                &lt;a class="note" href="&#123;&#123; url_for('edit_template_page', filename='index.html') }}"&lt;Edit This Page&lt;/a&lt;&lt;/li&lt;&lt;br /&lt;
                &lt;a href="&#123;&#123; url_for('app_utilities') }}"&lt;Application Utilities&lt;/a&lt;&lt;br /&lt;
                &lt;a href="&#123;&#123; url_for('image_video') }}"&lt;Image and Video Processing Links&lt;/a&lt;&lt;br /&lt;
                &lt;a href="&#123;&#123; url_for('index_canvas') }}"&lt;Project Canvas&lt;/a&lt;&lt;br /&lt;&lt;br /&lt;
                &lt;a href="&#123;&#123; url_for('edit_javascript') }}"&lt;Project JavaScript&lt;/a&lt;&lt;br /&lt;&lt;br /&lt;
                &lt;a href="&#123;&#123; url_for('edit_template') }}"&lt;Edit Links Listed Below&lt;/a&lt;&lt;p&lt;Edit Index - Edit CSS Files - Edit Canvas
 JS - Edit Formatted Text  - Edit FlaskAppArchitect Description - Edit Formatted Text&lt;/p&lt;
                &lt;/p&lt;
                &lt;a href="&#123;&#123; url_for('data_page') }}"&lt;Data Page - Snippets,Search ChatGPT,Sqlite3&lt;/a&lt;&lt;br /&lt;&lt;br /&lt;
                &lt;a href="&#123;&#123; url_for('edit_file') }}"&lt;Edit File&lt;/a&lt;&lt;br /&lt;
                &lt;a href="&#123;&#123; url_for('edit_formatted') }}"&lt;Edit Formatted Text&lt;/a&lt;&lt;br /&lt;
                &lt;a href="&#123;&#123; url_for('edit_description') }}"&lt;Edit Description&lt;/a&lt;&lt;br /&lt;
                &lt;a href="&#123;&#123; url_for('misc_links') }}"&lt;This page contains all active links(I hope)&lt;/a&lt;&lt;br /&lt;
            &lt;/div&lt;
            &lt;div class="column right"&lt;
                &lt;h2&lt;Random Video&lt;/h2&lt;
                &lt;video controls&lt;
                    &lt;source src="&#123;&#123; video }}" type="video/mp4"&lt;
                    Your browser does not support the video tag.
                &lt;/video&lt;
            &lt;/div&lt;
        &lt;/div&lt;
    &lt;/div&lt;
&lt;/body&lt;
&lt;/html&lt;
&lt;/pre&gt;

&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;&lt;form action="&#123;&#123; url_for('image_directories') }}" method="POST"&gt;
    &lt;label for="directory"&gt;Select a directory:&lt;/label&gt;
    &lt;select id="directory" name="directory"&gt;
        &lt;option value="static/Prodia_640x640"&gt;static/Prodia_640x640&lt;/option&gt;
        &lt;option value="static/LineArt"&gt;static/LineArt&lt;/option&gt;
        &lt;option value="static/quantized"&gt;static/Quantized&lt;/option&gt;
        &lt;option value="static/squares"&gt;static/squares&lt;/option&gt;
        &lt;option value="static/BrightColors"&gt;static/BrightColors&lt;/option&gt;
    &lt;/select&gt;
    &lt;br&gt;&lt;br&gt;
    &lt;input type="submit" value="Submit"&gt;
&lt;/form&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Image List&lt;/title&gt;
    &lt;style&gt;
        body &#123;
            font-family: Arial, sans-serif;
            background-color: #121212;
            color: #ffffff;
            text-align: center;
        }
        img &#123;
            max-width: 100&#37;;
            height: auto;
            margin: 10px;
        }
        .image-container &#123;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .image-item &#123;
            margin: 10px;
            padding: 10px;
            background-color: #1e1e1e;
            border-radius: 8px;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Image List&lt;/h1&gt;
    &lt;div class="image-container"&gt;
        &#123;&#37; for image in image_list &#37;}
        &lt;div class="image-item"&gt;
            &lt;img src="&#123;&#123; url_for('static', filename='current_project/Narrators/' + image) }}" alt="&#123;&#123; image }}"&gt;
            &lt;p&gt;&#123;&#123; image }}&lt;/p&gt;
        &lt;/div&gt;
        &#123;&#37; endfor &#37;}
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!-- index.html--&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Image Processing&lt;/title&gt;
    &lt;style&gt;
        html,
        body &#123;
            margin: 0;
            padding: 1&#37;;
            height: 100&#37;;
            font-family: Arial, sans-serif;
        }

        body &#123;
            background-image: url('../static/assets/MemMaker_background.png');
            background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
        }
        video &#123;
            margin: 10px, auto;
            width: 300px;
            height: auto;
        }

          .wrapper &#123;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;

        }

        .header &#123;
            width: 100&#37;;
            padding: 20px;
            text-align: center;
        }

        .columns &#123;
            display: flex;
            width: 80&#37;;
            margin-top: 20px;
        }

        .column &#123;
            padding: 20px;
            box-sizing: border-box;
        }

        .column.left &#123;
            width: 30&#37;;
            border:    1px solid #000;
        }

        .column.right &#123;
        margin: 0 auto; /* Center horizontally */
        width: 60&#37;;
        border: 1px solid #000;
        text-align: center; /* Center video vertically */
    }

    .column.right video &#123;
        max-width: 100&#37;;
        height: auto;
    }
    .note&#123;
        color:red;
        font-size:24px; 
}
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h1&gt;Image Processing&lt;/h1&gt;
            &lt;a class="note" href="&#123;&#123; url_for('index') }}"&gt;HOME&lt;/a&gt;&lt;br /&gt;
        &lt;/div&gt;
        &lt;div class="columns"&gt;
            &lt;div class="column left"&gt;

                &lt;h3&gt;Create Text&lt;/h3&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('app_utilities') }}"&gt;Application Utilities&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('feather_files') }}"&gt;Feather Images&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('crop') }}"&gt;Crop Images&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('view_text') }}"&gt;View Text Files&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_file') }}"&gt;Edit File&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_formatted') }}"&gt;Edit Formatted Text&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('feather_files') }}"&gt;Feather Images&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_description') }}"&gt;Edit Description&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('image_stuff') }}"&gt;Comic Book Experiment&lt;/a&gt;&lt;br /&gt;
            &lt;/div&gt;
            &lt;div class="column right"&gt;
                &lt;h2&gt;Right Column&lt;/h2&gt;
                &lt;video controls&gt;
                    &lt;source src="&#123;&#123; video }}" type="video/mp4"&gt;
                    Your browser does not support the video tag.
                &lt;/video&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Omic Book Experiment&lt;/title&gt;

&lt;style&gt;
    html,
    body &#123;
        margin: 0;
        padding: 1&#37;;
        height: 100&#37;;
        font-family: Arial, sans-serif;
    }

    body &#123;
        background-image: url('../static/assets/MemMaker_background.png');
        background-repeat: repeat-y;
        background-size: cover;
        /* Use 'cover' to make the image cover the entire body */
        background-position: top;
    }
    video &#123;
        margin: 10px, auto;
        width: 400px;
        height: auto;
    }

      .wrapper &#123;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;

    }

    .header &#123;
        width: 100&#37;;
        padding: 20px;
        text-align: center;
    }

    .columns &#123;
        display: flex;
        width: 80&#37;;
        margin-top: 20px;
    }

    .column &#123;
        padding: 20px;
        box-sizing: border-box;
    }

    .column.left &#123;
        width: 30&#37;;
        border:    1px solid #000;
    }

    .column.right &#123;
    margin: 0 auto; /* Center horizontally */
    width: 60&#37;;
    border: 1px solid #000;
    text-align: center; /* Center video vertically */
}

.column.right video &#123;
    max-width: 100&#37;;
    height: auto;
}
 
.comic-page &#123;
    width: 85&#37;;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #f0f0f0;
      padding: 20px;
    }
    
    .panel &#123;
      position: relative;
      border: 2px solid black;
      margin: 10px;
      padding: 10px;
      background-color: white;
    }
    
    .speech-bubble &#123;
      position: absolute;
      background-color: yellow;
      border-radius: 10px;
      padding: 5px;
      font-weight: bold;
    }

    .speech-bubble2 &#123;
      position: absolute;
      background-color: yellow;
      border-radius: 10px;
      padding: 5px;
      font-weight: bold;
    }
    
    .narrative-element &#123;
      font-size: 24px;
      color: red;
      text-transform: uppercase;
    }
    .small &#123;
      width: 200px;
      height: auto;
    }
    .medium &#123;
      width: 250px;
      height: auto;
    }

 
        .container &#123;
            width: 75&#37;;
            display: flex; /* Use flexbox to align divs side by side */
        }

        .div1, .div2 &#123;
            width: 50&#37;; /* Each div takes up 50&#37; of the container's width */
            padding: 20px;
            box-sizing: border-box;
            border: 1px solid #ccc;
        }
    &lt;/style&gt;  

&lt;/head&gt;
&lt;body&gt;
&lt;div class="wrapper"&gt;
    &lt;div class="header"&gt;
        &lt;h1&gt;Comic Book Experiment&lt;/h1&gt;
    &lt;/div&gt;




&lt;div class="container"&gt;
    &lt;div class="div1"&gt;
      &lt;div class="speech-bubble"&gt;Hello there!&lt;/div&gt;
      &lt;img class="small" src="&#123;&#123; url_for('static', filename='images/Leonardo/character2.jpg') }}" alt="Character 1"&gt;

    &lt;/div&gt;
    &lt;div class="div2"&gt;
        &lt;div class="narrative-element"&gt;WQW !&lt;/div&gt;
        &lt;div class="speech-bubble2"&gt;Watch out!&lt;/div&gt;

        &lt;img class="medium" src="&#123;&#123; url_for('static', filename='images/Leonardo/character1.jpg') }}" alt="Character 1"&gt;

 
      
    &lt;/div&gt;
  &lt;/div&gt;
  
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Image Upload and Video Generation&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Upload Images and Generate Video&lt;/h1&gt;
    &lt;form method="POST" action="&#123;&#123; url_for('image_to_video') }}"&gt;
        &lt;label for="selected_directory"&gt;Select an image directory:&lt;/label&gt;
        &lt;select id="selected_directory" name="selected_directory" required&gt;
            &#123;&#37; for directory in image_directories &#37;}
                &lt;option value="&#123;&#123; directory }}"&gt;&#123;&#123; directory }}&lt;/option&gt;
            &#123;&#37; endfor &#37;}
        &lt;/select&gt;
        &lt;input type="submit" value="Generate Video"&gt;
    &lt;/form&gt;  &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;       

    &lt;video width="320" height="240" controls&gt;
        &lt;source src="&#123;&#123; url_for('static', filename=video2) }}" type="video/mp4"&gt;
        &lt;/video&gt;
&lt;/body&gt;
&lt;/html&gt;

&lt;!-- aigeneration_links.html--&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;title&gt;Image and Video Generation&lt;/title&gt;
  &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;
  &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/body.css') }}"

&lt;/head&gt;

&lt;body&gt;
  &lt;div&gt;
    &lt;div class="header"&gt;
      &lt;h1&gt;Image and Video Links&lt;/h1&gt;
&lt;a class="note"href="&#123;&#123; url_for('index') }}"&gt;HOME&lt;/a&gt;&lt;br /&gt;

    &lt;/div&gt;
    &lt;div class="columns"&gt;
      &lt;div class="column left"&gt;
        &lt;h3&gt;Image&lt;/h3&gt;
&lt;a class="note"href="&#123;&#123; url_for('edit_template_page', filename='image_video.html') }}"&gt;Edit This Page&lt;/a&gt;&lt;br /&gt;

        &lt;a href="&#123;&#123; url_for('fade_index') }}"&gt;Create YouTube "SHORT" from Image Directory&lt;/a&gt;&lt;br /&gt;
        &lt;a href="&#123;&#123; url_for('capture_and_overlay') }}"&gt;Falkon Captures&lt;/a&gt;&lt;br /&gt;
        &lt;a href="&#123;&#123; url_for('mk_background') }}"&gt;Create Video From Thumbnail Cache&lt;/a&gt;&lt;br /&gt;
        &lt;a href="&#123;&#123; url_for('add_border') }}"&gt;Add a border to an image.&lt;/a&gt;&lt;br /&gt;
        &lt;a href="&#123;&#123; url_for('comic_book') }}"&gt;Project Underway_Create a Comic Book Page.&lt;/a&gt;&lt;br /&gt;
        &lt;a href="&#123;&#123; url_for('video_index') }}"&gt;View Archived Videos&lt;/a&gt;&lt;br /&gt;
        &lt;p&gt;Archive videos are created special to store images. These videos may be coverted to a directory of images for image processing.&lt;/p&gt;
        &lt;a href="&#123;&#123; url_for('add_files') }}"&gt;Convert video to unique images static/mp4_images&lt;/a&gt;&lt;br /&gt;



        &lt;h3&gt;Video&lt;/h3&gt;&lt;br /&gt;
        &lt;video width="200" height="auto" controls&gt;
          &lt;source src="static/assets/result_voice.mp4" type="video/mp4"&gt;
          Your browser does not support the video tag.
        &lt;/video&gt;&lt;br /&gt;
        &lt;video width="300" height="auto" controls&gt;
          &lt;source src="static/assets/NearDone.mp4" type="video/mp4"&gt;
          Your browser does not support the video tag.
        &lt;/video&gt;&lt;br /&gt;&lt;a href="&#123;&#123; url_for('large_video') }}"&gt;See Above Video Full Size&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
        &lt;a style="font-size: 24px;margin-left: 10&#37;;color: #29b2f1;" href="&#123;&#123; url_for('indeX') }}"&gt;Link to indeX: Create
          an Avatar&lt;/a&gt;&lt;br /&gt;
        &lt;p&gt;
        &lt;h1 style="color: brown;"&gt;Creating a speaking Avatar with A Flask App. &lt;br /&gt;Click the videos below for
          step-by-step instructions. &lt;/h1&gt; &lt;a href="&#123;&#123; url_for('index') }}"&gt;RETURN HOME&lt;/a&gt;&lt;br /&gt;
        &lt;/p&gt;
        &lt;video controls class="resizedvideo"&gt;
          &lt;source src="static/assets/result_cl.webm" type="video/mp4"&gt;
          Your browser does not support the video tag.
        &lt;/video&gt;&lt;br /&gt;

        &lt;a href="&#123;&#123; url_for('text_mp3') }}"&gt;First: Create the mp3&lt;/a&gt;&lt;br /&gt;

        &lt;video controls class="resizedvideo"&gt;
          &lt;source src="static/assets/result_convert_mp3_wav.webm" type="video/mp4"&gt;
          Your browser does not support the video tag.
        &lt;/video&gt;&lt;br /&gt;
        &lt;a href="&#123;&#123; url_for('convert_mp3_to_wav') }}"&gt;Second: convert_mp3_to_wav&lt;/a&gt;&lt;br /&gt;
        &lt;video controls class="resizedvideo"&gt;
          &lt;source src="static/assets/result_indian.webm" type="video/mp4"&gt;
          Your browser does not support the video tag.
        &lt;/video&gt;&lt;br /&gt;
        &lt;a href="&#123;&#123; url_for('generate_vid') }}"&gt;Third: Create a Video the same length as the wav Created&lt;/a&gt;&lt;br /&gt;
        &lt;video controls class="resizedvideo"&gt;
          &lt;source src="static/assets/Water-blinking.webm" type="video/mp4"&gt;
          Your browser does not support the video tag.
        &lt;/video&gt;&lt;br /&gt;
        &lt;a href="&#123;&#123; url_for('create_avatar') }}"&gt;Fourth and Last Step: Create Avatar&lt;/a&gt;&lt;br /&gt;
        &lt;br /&gt;&lt;br /&gt;
        &lt;a href="&#123;&#123; url_for('upload_file') }}"&gt;Upload Image&lt;/a&gt;&lt;br /&gt;

        &lt;form action="/search" method="GET"&gt;
          &lt;label for="search-term"&gt;Search:&lt;/label&gt;
          &lt;input type="text" id="search-term" name="q"&gt;
          &lt;button type="submit"&gt;Search&lt;/button&gt;
        &lt;/form&gt;
        &lt;br /&gt;

      &lt;/div&gt;
      &lt;div class="column right"&gt;
        &lt;h3&gt;Debug test&lt;/h3&gt;
        &lt;a href="&#123;&#123; url_for('make_text') }}"&gt;Create a Text File&lt;/a&gt;&lt;br /&gt;

        &lt;a href="&#123;&#123; url_for('choose_dir') }}"&gt;Debug Test&lt;/a&gt;&lt;br /&gt;
        &lt;a href="&#123;&#123; url_for('mkblend_video') }}"&gt;Create a Blended Video&lt;/a&gt;&lt;br /&gt;

        &lt;video controls class="resized-video"&gt;
          &lt;source src="static/assets/result_cl.webm" type="video/mp4"&gt;
          Your browser does not support the video tag.
        &lt;/video&gt;
        &lt;br /&gt;
        &lt;img style="width: 30&#37;; height: auto;" src="&#123;&#123; url_for('static', filename='assets/woman2.png') }}"
          alt="Example image"&gt;&lt;br /&gt;

        &lt;h2 style="color: brown;"&gt;Create a VIdeo of Images - Using Minterpolate&lt;/h2&gt;
        &lt;style&gt;
          .resized-video &#123;
            width: 35&#37;;
            height: auto;
          }
        &lt;/style&gt;

        &lt;video controls class="resized-video"&gt;
          &lt;source src="static/assets/Final_End.mp4" type="video/mp4"&gt;
          Your browser does not support the video tag.
        &lt;/video&gt;&lt;br /&gt;
        &lt;video controls class="resized-video"&gt;
          &lt;source src="static/assets/Final_End-0.mp4" type="video/mp4"&gt;
          Your browser does not support the video tag.
        &lt;/video&gt;
        &lt;br /&gt;
        &lt;video controls class="resized-video"&gt;
          &lt;source src="static/assets/video_in_a_video-02.mp4" type="video/mp4"&gt;
          Your browser does not support the video tag.
        &lt;/video&gt;&lt;br /&gt;

        &lt;form method="post" action="/videos" enctype="multipart/form-data"&gt;
          &lt;label for="input_video"&gt;Select input video file:&lt;/label&gt;&lt;br&gt;
          &lt;input type="file" id="input_video" name="input_video"&gt;&lt;br&gt;&lt;br&gt;
          &lt;input type="submit" value="Submit"&gt;

        &lt;/form&gt;
      &lt;/div&gt;


    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;My Flask App&lt;/title&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/style.css') }}"&gt;
    &lt;script src="&#123;&#123; url_for('static', filename='js/script.js') }}"&gt;&lt;/script&gt;

  &lt;/head&gt;
  &lt;body&gt;
&lt;div class="wrapper"&gt;
  &lt;header class="header"&gt;&lt;h2 style="color: brown;"&gt;Image Processing With Flask&lt;/h2&gt;&lt;/header&gt;
  &lt;aside class="sidebar"&gt;&lt;h2 style="color: brown;"&gt;AI Art Processing&lt;/h2&gt;
  &lt;p&gt;Below is a random image from the gallery.&lt;/p&gt;
  &lt;img style="width: 92&#37;; height: auto;" src="&#123;&#123; url_for('static', filename='images/' + random_image_file) }}" alt="Example image"&gt;&lt;br /&gt;
  &lt;img src="&#123;&#123; url_for('static', filename='images/image2.jpg') }}" alt="Example image"&gt;&lt;br /&gt; 
    &lt;/aside&gt;


 &lt;article class="content"&gt;
    &lt;h1&gt;Links and Executeable Functions&lt;/h1&gt;
    &lt;p&gt;Below are links to various Image Processing Functions. &lt;/p&gt;
    &lt;a href="&#123;&#123; url_for('get_gallery') }}"&gt;View Images&lt;/a&gt;&lt;br /&gt;
    &lt;a href="&#123;&#123; url_for('view_thumbs') }}"&gt;View Thumbnails&lt;/a&gt;&lt;br /&gt;
    &lt;a href="&#123;&#123; url_for('upload_file') }}"&gt;Upload Image&lt;/a&gt;&lt;br /&gt;
    &lt;a href="&#123;&#123; url_for('flask_info') }}"&gt;Video&lt;/a&gt;&lt;br /&gt;
    &lt;a href="&#123;&#123; url_for('add_text') }}"&gt;Add text to chat.txt&lt;/a&gt;&lt;br /&gt;
    &lt;a href="&#123;&#123; url_for('search') }}"&gt;Search chat.txt&lt;/a&gt;&lt;br /&gt;
    &lt;a href="&#123;&#123; url_for('blend_pil') }}"&gt;upload and blend images.&lt;/a&gt;&lt;br /&gt;
    &lt;a href="&#123;&#123; url_for('add_border') }}"&gt;Add a border to an image.&lt;/a&gt;&lt;br /&gt;
    &lt;a href="&#123;&#123; url_for('process_images') }}"&gt;Process Images With Mask&lt;/a&gt;&lt;br /&gt; 
    &lt;a href="&#123;&#123; url_for('text_mp3') }}"&gt;Create an mp3 from aText Entry&lt;/a&gt;&lt;br /&gt;
    &lt;a href="&#123;&#123; url_for('generate_video') }}"&gt;Create an mp4 from video_resources&lt;/a&gt;&lt;br /&gt;
    &lt;a href="&#123;&#123; url_for('generate_video2') }}"&gt;Create an mp4 from Uploads&lt;/a&gt;&lt;br /&gt;
    &lt;a href="&#123;&#123; url_for('image_directories') }}"&gt;Choose Image directories&lt;/a&gt;&lt;br /&gt;
    &lt;a href="&#123;&#123; url_for('select_playmp3') }}"&gt;Select and play mp3 from audio_mp3/&lt;/a&gt;&lt;br /&gt;
    &lt;a href="&#123;&#123; url_for('make_animation') }}"&gt;Create an Animated Gif (20 images @ 1 per second.)&lt;/a&gt;&lt;br /&gt;
    &lt;a href="&#123;&#123; url_for('build_stackedvids') }}"&gt;Video Stacked on Images&lt;/a&gt;&lt;br /&gt; 
    &lt;a href="&#123;&#123; url_for('build_stackedvid') }}"&gt;Two Video Stacked&lt;/a&gt;&lt;br /&gt; 
    &lt;a href="&#123;&#123; url_for('title_page') }}"&gt;Create a title Page&lt;/a&gt;&lt;br /&gt;
    &lt;a href="&#123;&#123; url_for('add_title') }}"&gt;Add a Title to a Video&lt;/a&gt;&lt;br /&gt;
    &lt;form action="&#123;&#123; url_for('clean_images_route') }}" method="POST"&gt;
      &lt;button type="submit"&gt;Clean Images&lt;/button&gt;
  &lt;/form&gt;
  &lt;/article&gt;
  &lt;footer class="footer"&gt;
    &lt;h2 style="color: brown;"&gt;Links to YouTube Channels&lt;/h2&gt;
    &lt;a href="https://www.youtube.com/@totallyinsaneart3345" target="_blank "&gt;Totally Insane Art&lt;/a&gt;&lt;br /&gt;
    &lt;a href="https://www.youtube.com/@JackNorthrup" target="_blank "&gt;Jack Northrup&lt;/a&gt;&lt;br /&gt;
    &lt;a href="https://app.prodia.com/#/" target="_blank "&gt;prodia&lt;/a&gt;&lt;br /&gt;
    &lt;a href="https://app.leonardo.ai/" target="_blank "&gt;leonardo.ai&lt;/a&gt;&lt;br /&gt;
  &lt;/footer&gt;
&lt;/div&gt;

  &lt;/body&gt;
  &lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
  &lt;title&gt;Create Scrolling Text&lt;/title&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/Style.css') }}"&gt;

&lt;/head&gt;

&lt;body&gt;

  &lt;div class="header"&gt;
    &lt;h3&gt;Flask VideoMaker V2.1&lt;/h3&gt;
    &lt;p&gt;Below is an example of 'Type' of video this application can create. First Create a text file. You can hand write
      it or use ChatGPT. Then you format the text in lines of five words per line. Next create a video of scrolling text
      That is read as the text scrolls by. Then create an Image_Video which gradually fades from one image to another. A
      image directory is required. for best results be sure all images are the same size. The last step is add the
      Image_Video to the scrolling text.'&lt;/p&gt;
    &lt;p&gt;Avatar_Maker is included (Link is in the Black Band below) to create video introductions. This app is all ready
      created, but not yet connected to the Flask VideoMaker&lt;/p&gt;
    &lt;video width="200" height="auto" controls&gt;
      &lt;source src="static/assets/result_voice.mp4" type="video/mp4"&gt;
      Your browser does not support the video tag.
    &lt;/video&gt;&lt;br /&gt;
    &lt;video width="300" height="auto" controls&gt;
      &lt;source src="static/assets/NearDone.mp4" type="video/mp4"&gt;
      Your browser does not support the video tag.
    &lt;/video&gt;&lt;br /&gt;&lt;a href="&#123;&#123; url_for('large_video') }}"&gt;See Above Video Full Size&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;

  &lt;/div&gt;

  &lt;div class="topnav"&gt;
    &lt;a style="font-size: 24px;margin-left: 10&#37;;color: #29b2f1;" href="&#123;&#123; url_for('indeX') }}"&gt;Link to indeX: Create an Avatar&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
    &lt;a style="font-size: 24px;margin-left: 10&#37;;color: #29b2f1;" href="&#123;&#123; url_for('data_page') }}"&gt;Link to Database:&lt;/a&gt;&lt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &lt;a style="font-size: 24px;margin-left: 10&#37;;color: #29b2f1;" href="&#123;&#123; url_for('index_FLASK') }}"&gt;Extras:&lt;/a&gt;
  &lt;/div&gt;
  

  &lt;div class="row"&gt;
    &lt;div class="column"&gt;
      &lt;h2&gt;Create a Text File&lt;/h2&gt;
      &lt;center&gt;Play Me&lt;/center&gt;
      &lt;video width="150" height="auto" controls&gt;
        &lt;source src="static/assets/This_Column.mp4" type="video/mp4"&gt;
        Your browser does not support the video tag.
      &lt;/video&gt;&lt;br /&gt;

      &lt;h3&gt;Create Text&lt;/h3&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('mk_text') }}"&gt;Create a Text File&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('format_file') }}"&gt;Format Text Files&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('view_text') }}"&gt;View Text Files&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('edit_file') }}"&gt;Edit File&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('edit_formatted') }}"&gt;Edit Formatted Text&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
      
      &lt;video width="150" height="auto" controls&gt;
        &lt;source src="static/assets/asset_video.mp4" type="video/mp4"&gt;
        Your browser does not support the video tag.
      &lt;/video&gt;&lt;br /&gt;
    
    
    
    
    
    &lt;/div&gt;

    &lt;div class="column"&gt;
      &lt;h2&gt;Create Scrolling Text Background&lt;/h2&gt;
      &lt;h3&gt;Audio to Video Conversion&lt;/h3&gt;
      &lt;form action="&#123;&#123; url_for('convert') }}" method="POST" enctype="multipart/form-data"&gt;
        &lt;label for="audio_file"&gt;Audio MP3 or Wav:&lt;/label&gt;
        &lt;input type="file" name="audio_file" accept=".mp3,.wav" required&gt;
        &lt;br&gt;&lt;br /&gt;
        &lt;label for="formatted_text_file"&gt;Formatted Text File:&lt;/label&gt;
        &lt;input type="file" name="formatted_text_file" accept=".txt" required&gt;
        &lt;br&gt;
        &lt;input type="submit" value="Convert1280x720"&gt;
      &lt;/form&gt;
      &lt;br /&gt;
      &lt;hr&gt;&lt;br /&gt;
      &lt;form action="&#123;&#123; url_for('convert512') }}" method="POST" enctype="multipart/form-data"&gt;
        &lt;label for="audio_file"&gt;Audio MP3 or Wav:&lt;/label&gt;
        &lt;input type="file" name="audio_file" accept=".mp3,.wav" required&gt;
        &lt;br&gt;&lt;br /&gt;
        &lt;label for="formatted_text_file"&gt;Formatted Text File:&lt;/label&gt;
        &lt;input type="file" name="formatted_text_file" accept=".txt" required&gt;
        &lt;br&gt;
        &lt;input type="submit" value="Convert512x1024"&gt;
      &lt;/form&gt;
      &lt;hr&gt;&lt;br /&gt;
      &lt;form method="post" action="/videos" enctype="multipart/form-data"&gt;
        &lt;label for="input_video"&gt;Select MP4 Video for Minterpolate Transitions :&lt;/label&gt;&lt;br&gt;
        &lt;input type="file" id="input_video" name="input_video"&gt;&lt;br&gt;&lt;br&gt;
        &lt;input type="submit" value="Submit"&gt;
      &lt;/form&gt;&lt;br/&gt;

        &lt;video width="150" height="auto" controls&gt;
        &lt;source src="static/assets/Final_End_Dance.mp4" type="video/mp4"&gt;
      &lt;/video&gt;&lt;br /&gt;
    &lt;/div&gt;

    &lt;div class="column"&gt;
      &lt;h2&gt;Create Left Side Animation&lt;/h2&gt;
      &lt;h3&gt;Choose a Directory&lt;/h3&gt;
      &lt;form id="directoryForm" method="post" action="/mkblend_videos"&gt;
          &lt;select name="selected_directory" id="directoryInput"&gt;
              &lt;option value="" disabled selected&gt;Select a directory&lt;/option&gt;
              &lt;option value="static/images/512x1536-woman"&gt;512x1536-woman&lt;/option&gt;
              &lt;option value="static/images/abstract_beauty"&gt;abstract_beauty&lt;/option&gt;
              &lt;option value="static/images/beautiful_girl"&gt;beautiful_girl&lt;/option&gt;
              &lt;option value="static/images/Beautiful_Warrior"&gt;Beautiful_Warrior&lt;/option&gt;
          &lt;/select&gt;
          &lt;button type="submit"&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
      &lt;h3&gt;Select Directory&lt;/h3&gt;
      &lt;form action="/mkblend_videos" method="post"&gt;
        &lt;label for="directory"&gt;Choose a directory make a short mp4:&lt;/label&gt;
        &lt;select name="directory" id="directory"&gt;
          &#123;&#37; for directory in directories &#37;}
          &lt;option value="&#123;&#123; directory }}"&gt;&#123;&#123; directory }}&lt;/option&gt;
          &#123;&#37; endfor &#37;}
        &lt;/select&gt;
        &lt;br&gt;&lt;br&gt;
        &lt;input type="submit" value="Generate Video"&gt;
      &lt;/form&gt;
        &lt;h2&gt;Create Stacked Videos&lt;/h2&gt;
      &lt;a href="&#123;&#123; url_for('build_stackedvids') }}"&gt;Create Stacked Video&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;button onclick="callFlaskFunction()"&gt;Generate Video&lt;/button&gt;
      &lt;h3&gt;Result Video Minterpolate Transitions&lt;/h3&gt;
      &lt;video id="myVideo" width="150" height="auto" controls&gt;
        &lt;source src="static/assets/Final_End.mp4" type="video/mp4"&gt;
        &lt;/video&gt;
        Your browser does not support the video tag.

    &lt;/div&gt;
  &lt;div&gt;
    &lt;a style="font-size: large;color: bisque;" href="&#123;&#123; url_for('process_imagez') }}"&gt;Zooms and Zoom&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;

  &lt;script&gt;
    function callFlaskFunction() &#123;
      var xhr = new XMLHttpRequest();
      xhr.open('GET', '/resize_and_overlay_videos', true);
      xhr.responseType = 'blob';

      xhr.onload = function (e) &#123;
        if (this.status == 200) &#123;
          var videoBlob = this.response;
          var videoUrl = URL.createObjectURL(videoBlob);

          var videoElement = document.getElementById('myVideo');
          videoElement.src = videoUrl;
        }
      };

      xhr.send();
    }
  &lt;/script&gt;

  &lt;center&gt;
  
&lt;h3&gt;Outline Jpeg&lt;/h3&gt;
      &lt;form action="/outline_j" method="post" enctype="multipart/form-data"&gt;
          &lt;label for="file"&gt;Select Image:&lt;/label&gt;
          &lt;input type="file" name="file" id="file" accept="image/*"&gt;
          &lt;input type="submit" value="Outline J"&gt;
      &lt;/form&gt;

      &lt;h3&gt;Outline Png&lt;/h3&gt;
      &lt;form action="/outline_p" method="post" enctype="multipart/form-data"&gt;
          &lt;label for="file"&gt;Select Image:&lt;/label&gt;
          &lt;input type="file" name="file" id="file" accept="image/*"&gt;
          &lt;input type="submit" value="Outline p"&gt;
      &lt;/form&gt;
  &lt;/center&gt;
  &lt;/div&gt;

&lt;/body&gt;
&lt;/body&gt;

&lt;/html&gt;
&lt;!-- index.html--&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Home Flask App Builder&lt;/title&gt;
    &lt;title&gt;Edit Template&lt;/title&gt;
     &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;
        &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/body.css') }}"&gt;
  
&lt;/head&gt; 

&lt;body&gt;
    &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h1 style = color:darkgreen;" &gt;HOME index.html&lt;/h1&gt;
            &lt;a class="note" href="&#123;&#123; url_for('edit_template_page', filename='index.html') }}"&gt;Edit This Page&lt;/a&gt;&lt;/li&gt;&lt;br /&gt;
        &lt;/div&gt;
        &lt;div class="columns"&gt;
            &lt;div class="column left"&gt;
                &lt;h3&gt;Links&lt;/h3&gt;
                
                &lt;a href="&#123;&#123; url_for('edit_template') }}"&gt;Edit Links Listed Below&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('ffmpeg_commands') }}"&gt;Various Ffmpeg Commands&lt;/a&gt;

            &lt;/div&gt;
            &lt;div class="column right"&gt;
                &lt;h2&gt;Random Video&lt;/h2&gt;
                &lt;video controls&gt;
                    &lt;source src="&#123;&#123; video }}" type="video/mp4"&gt;
                    Your browser does not support the video tag.
                &lt;/video&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;title&gt;My Flask App&lt;/title&gt;
  &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/style.css') }}"&gt;
  &lt;script src="&#123;&#123; url_for('static', filename='js/script.js') }}"&gt;&lt;/script&gt;
 &lt;title&gt;My Flask App&lt;/title&gt;
  &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/style.css') }}"&gt;
  &lt;script src="&#123;&#123; url_for('static', filename='js/script.js') }}"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt;
  &lt;style&gt;
    .resizedvideo &#123;
      width: 200px;
      height: 200px;
    }

    .section &#123;
      margin-top: 50px;
      width: 95&#37;;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

    .sectionl &#123;
      width: 35&#37;;
      display: flex;
      flex-direction: column;
      align-items: left;
      justify-content: left;
      height: 100vh;
    }

    .sectionr &#123;
      width: 35&#37;;
      display: flex;
      flex-direction: column;
      align-items: right;
      justify-content: right;
      height: 100vh;
    }
    html &#123;
      font-family: sans-serif;
    background-color: black;
    }
    body &#123;
      width: 95&#37;;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: rgb(167, 196, 189);
      color: black;
    }
    h1 &#123;
      color: rgb(255, 255, 255);
    }
    #wrapper &#123;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      background-color: teal;
    }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;  &lt;center&gt;  
    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Select Video&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;h1&gt;Select Video&lt;/h1&gt;
        &lt;a href="&#123;&#123; url_for('index') }}"&gt;Main Home Index&lt;/a&gt;&lt;br /&gt; &lt;br /&gt; 
        &lt;video controls class="resized-video"&gt;
          &lt;source src="static/new_video/result_voice.mp4" type="video/mp4"&gt;
          Your browser does not support the video tag.
        &lt;/video&gt;
        &lt;br /&gt;
        This is the path to the above video:&lt;br /&gt;
        &lt;code&gt;static/new_video/result_voice.mp4&lt;/code&gt;&lt;br /&gt;
         &lt;form action="/generate_blank_video" method="post" enctype="multipart/form-data"&gt;
            &lt;label for="selected_video"&gt;Select Video:&lt;/label&gt;
            &lt;input type="file" name="selected_video" id="selected_video"&gt;
            &lt;br&gt;&lt;br&gt;
            &lt;input type="submit" value="static/new_video/result_voice.mp4"&gt;
        &lt;/form&gt;
                 
        &lt;a href="&#123;&#123; url_for('create_text_file') }}"&gt;Create a Blank Text&lt;/a&gt;&lt;br /&gt; 
        &lt;a href="&#123;&#123; url_for('overlay_text') }}"&gt;Overlay Blank Text with Text&lt;/a&gt;&lt;br /&gt; 
        &lt;a href="&#123;&#123; url_for('add_borders') }}"&gt;Add the Overlay to a Border&lt;/a&gt;&lt;br /&gt; 
    &lt;/body&gt;
    &lt;/html&gt;
    
        &lt;br&gt;&lt;br&gt;


















  &lt;div class="container"&gt;

    &lt;h1 style="color: brown;"&gt;Creating a speaking Avatar with A Flask App. &lt;br /&gt;Click the videos below for
      step-by-step instructions. &lt;/p&gt;&lt;/h1&gt;  

      &lt;video controls class="resizedvideo"&gt;
        &lt;source src="static/assets/result_cl.webm" type="video/mp4"&gt;
        Your browser does not support the video tag.
      &lt;/video&gt;&lt;br /&gt;

        &lt;a href="&#123;&#123; url_for('generate_blank_video') }}"&gt;First: generate_blank_video&lt;/a&gt;&lt;br /&gt;

&lt;/center&gt;
  &lt;footer class="footer"&gt;
    &lt;center&gt;
      &lt;video controls class="resized-video"&gt;
        &lt;source src="static/assets/result_cl.webm" type="video/mp4"&gt;
        Your browser does not support the video tag.
      &lt;/video&gt;
      &nbsp;&nbsp;&nbsp;&nbsp;
      &lt;img style="width: 30&#37;; height: auto;" src="&#123;&#123; url_for('static', filename='images/image2.jpg') }}"
        alt="Example image"&gt;&lt;br /&gt;&nbsp;&nbsp;&nbsp;
    &lt;/center&gt;
    &lt;h2 style="color: brown;"&gt;Links to YouTube Channels&lt;/h2&gt;
    &lt;style&gt;
      .resized-video &#123;
        width: 25&#37;;
        height: auto;
      }
    &lt;/style&gt;

    &lt;video controls class="resized-video"&gt;
      &lt;source src="static/assets/Talking_AI_Images.webm" type="video/mp4"&gt;
      Your browser does not support the video tag.
    &lt;/video&gt;
  &lt;div class="wrapper"&gt;
    &lt;header class="header"&gt;
      &lt;h1 style="color: brown;"&gt;Image Processing With Flask and Executeable Functions&lt;/h1&gt;&lt;br /&gt;
      &lt;p&gt;Below are links to various Image Processing Functions. &lt;/p&gt;
    &lt;/header&gt;

    &lt;div class="content"&gt;
      &lt;a href="&#123;&#123; url_for('generate_blank_video') }}"&gt;View Images&lt;/a&gt;&lt;br /&gt;
      
    &lt;h1&gt;Random Image&lt;/h1&gt;
    &lt;img src="&#123;&#123; url_for('static', filename='images/' + random_image_file) }}" alt="Random Image"&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;center&gt;  
    &lt;div class="container"&gt;
      &lt;img style="width: 150px; height: auto;" src="&#123;&#123; url_for('static', filename=random_image_file) }}"&gt;
      &lt;br /&gt;
      &lt;h3&gt;TESTS&lt;/h3&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('mk_text') }}"&gt;Create a Text File&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('format_file') }}"&gt;Format Text Files&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('view_text') }}"&gt;View Text Files&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('edit_file') }}"&gt;Edit File&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;

      &lt;h1&gt;Video Conversion&lt;/h1&gt;
      &lt;form action="/convert" method="POST" enctype="multipart/form-data"&gt;
          &lt;input type="file" name="audio_file" accept=".mp3"&gt;
          &lt;button type="submit"&gt;Convert&lt;/button&gt;
      &lt;/form&gt;
      
      &lt;form action="&#123;&#123; url_for('convert') }}" method="POST" enctype="multipart/form-data"&gt;
        &lt;input type="file" name="text_file"&gt;
        &lt;input type="submit" value="Convert"&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/center&gt;
  
  &lt;footer class="footer"&gt;
    &lt;center&gt;
      This is new text
    &lt;/center&gt;
  &lt;/footer&gt;
&lt;/body&gt;

&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;title&gt;My Flask App&lt;/title&gt;
  &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/style.css') }}"&gt;
  &lt;script src="&#123;&#123; url_for('static', filename='js/script.js') }}"&gt;&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;
  &lt;div class="wrapper"&gt;
    &lt;header class="header"&gt;
      &lt;h1 style="color: brown;"&gt;Image Processing With Flask and Executeable Functions&lt;/h1&gt;&lt;br /&gt;
      &lt;p&gt;Below are links to various Image Processing Functions. &lt;/p&gt;
    &lt;/header&gt;

    &lt;div class="content"&gt;
      &lt;a href="&#123;&#123; url_for('get_gallery') }}"&gt;View Images&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('view_thumbs') }}"&gt;View Thumbnails&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('upload_file') }}"&gt;Upload Image&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('flask_info') }}"&gt;Video&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('add_text') }}"&gt;Add text to chat.txt&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('search_txt') }}"&gt;Search chat.txt&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('blend_pil') }}"&gt;upload and blend images.&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('add_border') }}"&gt;Add a border to an image.&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('process_images') }}"&gt;Process Images With Mask&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('text_mp3') }}"&gt;Create an mp3 from aText Entry&lt;/a&gt;&lt;br /&gt;
    &lt;/div&gt;
    &lt;div class="content"&gt;
      &lt;a href="&#123;&#123; url_for('generate_video') }}"&gt;Create an mp4 from video_resources&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('generate_video2') }}"&gt;Create an mp4 from Uploads&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('image_directories') }}"&gt;Choose Image directories&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('select_playmp3') }}"&gt;Select and play mp3 from audio_mp3/&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('make_animation') }}"&gt;Create an Animated Gif (20 images @ 1 per second.)&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('build_stackedvids') }}"&gt;Video Stacked on Images&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('build_stackedvid') }}"&gt;Two Video Stacked&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('title_page') }}"&gt;Create a title Page&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('add_title') }}"&gt;Add a Title to a Video&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('add_effects') }}"&gt;Add effects to a Video&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('choose_dir') }}"&gt;Choose a directory&lt;/a&gt;&lt;br /&gt;

      &lt;form action="&#123;&#123; url_for('clean_images_route') }}" method="POST"&gt;
        &lt;button type="submit"&gt;Clean Images&lt;/button&gt;
      &lt;/form&gt;
      &lt;form action="/search" method="GET"&gt;
        &lt;label for="search-term"&gt;Search:&lt;/label&gt;
        &lt;input type="text" id="search-term" name="q"&gt;
        &lt;button type="submit"&gt;Search&lt;/button&gt;
    &lt;/form&gt;
    &lt;form method="post" action="/mk_vid" enctype="multipart/form-data"&gt;
      &lt;label for="directory"&gt;Select a directory:&lt;/label&gt;
      &lt;select id="directory" name="directory" required&gt;
          &#123;&#37; for directory in directories &#37;}
              &lt;option value="&#123;&#123; directory }}"&gt;&#123;&#123; directory }}&lt;/option&gt;
          &#123;&#37; endfor &#37;}
      &lt;/select&gt;
      &lt;br&gt;&lt;br&gt;
      &lt;input type="submit" value="Process Video"&gt;
  &lt;/form&gt;
  &lt;h1&gt;Text to Video Conversion&lt;/h1&gt;
  &lt;form method="post" action="/maketext" enctype="multipart/form-data"&gt;
      &lt;label for="input_file"&gt;Select a text file:&lt;/label&gt;&lt;br&gt;
      &lt;input type="file" id="input_file" name="input_file" required&gt;&lt;br&gt;&lt;br&gt;
      &lt;input type="submit" value="Convert to Video"&gt;
  &lt;/form&gt;
  &lt;a href="/format_text"&gt;Format Text&lt;/a&gt;
    &lt;/div&gt;
    &lt;footer class="footer"&gt;
      &lt;center&gt;
        &nbsp;&nbsp;&lt;img style="width: 30&#37;; height: auto;"
          src="&#123;&#123; url_for('static', filename='images/' + random_image_file) }}"
          alt="Example image"&gt;&nbsp;&nbsp;&nbsp;&nbsp;
        &lt;img style="width: 30&#37;; height: auto;" src="&#123;&#123; url_for('static', filename='images/image2.jpg') }}"
          alt="Example image"&gt;&lt;br /&gt;&nbsp;&nbsp;&nbsp;
      &lt;/center&gt;
      &lt;h2 style="color: brown;"&gt;Links to YouTube Channels&lt;/h2&gt;
      &lt;a href="https://www.youtube.com/@totallyinsaneart3345" target="_blank "&gt;Totally Insane Art&lt;/a&gt;&lt;br /&gt;
      &lt;a href="https://www.youtube.com/@JackNorthrup" target="_blank "&gt;Jack Northrup&lt;/a&gt;&lt;br /&gt;
      &lt;a href="https://app.prodia.com/#/" target="_blank "&gt;prodia&lt;/a&gt;&lt;br /&gt;
      &lt;a href="https://app.leonardo.ai/" target="_blank "&gt;leonardo.ai&lt;/a&gt;&lt;br /&gt;
    &lt;/footer&gt;
  &lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Flask App&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Flask App&lt;/h1&gt;
    &lt;video width="512" height="auto" controls&gt;
        &lt;source src="&#123;&#123; final_video }}" type="video/mp4"&gt;
        Your browser does not support the video tag.
    &lt;/video&gt;
    &lt;video width="512" height="auto" controls&gt;
        &lt;source src="static/videos/old_woman.mp4" type="video/mp4"&gt;
        Your browser does not support the video tag.
    &lt;/video&gt;


    &lt;a href="&#123;&#123; url_for('update_database') }}"&gt;Home&lt;/a&gt;&lt;br /&gt;

    
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Flask App&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Flask App&lt;/h1&gt;
    &lt;video width="512" height="auto" controls&gt;
        &lt;source src="&#123;&#123; final_video }}" type="video/mp4"&gt;
        Your browser does not support the video tag.
    &lt;/video&gt;
    &lt;video width="512" height="auto" controls&gt;
        &lt;source src="static/videos/old_woman.mp4" type="video/mp4"&gt;
        Your browser does not support the video tag.
    &lt;/video&gt;


    &lt;a href="&#123;&#123; url_for('update_database') }}"&gt;Home&lt;/a&gt;&lt;br /&gt;

    
&lt;/body&gt;
&lt;/html&gt;
&lt;!-- index.html--&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Home Canvas Project&lt;/title&gt;
    &lt;style&gt;
        html,
        body &#123;
            margin: 0;
            padding: 1&#37;;
            height: 100&#37;;
            font-family: Arial, sans-serif;
        }

        body &#123;
            background-image: url('../static/assets/MemMaker_background.png');
            background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
        }
        video &#123;
            margin: 10px, auto;
            width: 250px;
            height: auto;
        }

          .wrapper &#123;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;

        }

        .header &#123;
            width: 100&#37;;
            padding: 20px;
            text-align: center;
        }

        .columns &#123;
            display: flex;
            width: 80&#37;;
            margin-top: 20px;
        }

        .column &#123;
            padding: 20px;
            box-sizing: border-box;
        }

        .column.left &#123;
            width: 30&#37;;
            border:    1px solid #000;
        }

        .column.right &#123;
        margin: 0 auto; /* Center horizontally */
        width: 60&#37;;
        border: 1px solid #000;
        text-align: center; /* Center video vertically */
    }

    .column.right video &#123;
        max-width: 100&#37;;
        height: auto;
    }
    .note&#123;
          font-size:25px;
          color:red;
   }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h1&gt;HOME index.html&lt;/h1&gt;
            &lt;a href ="https://www.youtube.com/playlist?list=PLpPnRKq7eNW3We9VdCfx9fprhqXHwTPXL"&gt;External YouTube Link JavaScript Tutorial&lt;/a&gt;&lt;br /&gt;
        &lt;/div&gt;
        &lt;div class="columns"&gt;
            &lt;div class="column left"&gt;
            
                &lt;h3&gt;Create Text&lt;/h3&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('canvas') }}"&gt;First Canvas Project&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('one_canvas') }}"&gt;One Canvas&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('two_canvas') }}"&gt;Two Canvas&lt;/a&gt;&lt;br /&gt;
                &lt;a class="note" href="&#123;&#123; url_for('edit_canvas') }}"&gt;Edit a Canvas HTMl&lt;/a&gt;&lt;br /&gt;
                &lt;a class="note" href="&#123;&#123; url_for('edit_canvas') }}"&gt;Edit a Canvas JavaScript&lt;/a&gt;&lt;br /&gt;
&lt;hr&gt;
                &lt;a href="&#123;&#123; url_for('misc_links') }}"&gt;This page contains all active links(I hope)&lt;/a&gt;&lt;br /&gt;
            &lt;/div&gt;
            &lt;div class="column right"&gt;
                &lt;h2&gt;Random Video&lt;/h2&gt;
                &lt;video controls&gt;
                    &lt;source src="&#123;&#123; video }}" type="video/mp4"&gt;
                    Your browser does not support the video tag.
                &lt;/video&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;html&gt;
  &lt;body&gt;
    &lt;center&gt;
      &lt;h1&gt;Search&lt;/h1&gt;
      &lt;form action="/search_database" method="POST"&gt;
        &lt;label for="search_term"&gt;Search Term:&lt;/label&gt;
        &lt;input type="text" id="search_term" name="search_term"&gt;&lt;br&gt;

        &lt;label for="search_area"&gt;Search Area:&lt;/label&gt;
        &lt;select id="search_area" name="search_area"&gt;
          &lt;option value="description"&gt;Description&lt;/option&gt;
          &lt;option value="code"&gt;Code Snippet&lt;/option&gt;
          &lt;option value="keywords"&gt;Keywords&lt;/option&gt;
        &lt;/select&gt;&lt;br&gt;

        &lt;input type="submit" value="Search"&gt;
      &lt;/form&gt;

      &lt;h1&gt;Enter Data&lt;/h1&gt;
      &lt;form action="/insert_data" method="POST"&gt;
        &lt;label for="description"&gt;Description:&lt;/label&gt;
        &lt;textarea id="description" name="description"&gt;&lt;/textarea&gt;&lt;br&gt;

        &lt;label for="code"&gt;Code Snippet:&lt;/label&gt;
        &lt;textarea id="code" name="code"&gt;&lt;/textarea&gt;&lt;br&gt;

        &lt;label for="keywords"&gt;Keywords:&lt;/label&gt;
        &lt;textarea id="keywords" name="keywords"&gt;&lt;/textarea&gt;&lt;br&gt;

        &lt;input type="submit" value="Submit"&gt;
      &lt;/form&gt;
      &lt;hr&gt;

     &lt;!-- Assuming you have a table displaying search results --&gt;
&lt;!-- Assuming you have a table displaying search results --&gt;
&lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;ID&lt;/th&gt;
        &lt;th&gt;Description&lt;/th&gt;
        &lt;th&gt;Code&lt;/th&gt;
        &lt;th&gt;Keywords&lt;/th&gt;
        &lt;th&gt;Actions&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;!-- Loop through the search results to generate rows --&gt;
      &#123;&#37; for result in results &#37;}
      &lt;tr&gt;
        &lt;td&gt;&#123;&#123; result[0] }}&lt;/td&gt;
        &lt;td&gt;&#123;&#123; result[1] }}&lt;/td&gt;
        &lt;td&gt;&#123;&#123; result[2] }}&lt;/td&gt;
        &lt;td&gt;&#123;&#123; result[3] }}&lt;/td&gt;
        &lt;td&gt;
          &lt;!-- Add a link to the edit page for each row --&gt;
          &lt;a href="&#123;&#123; url_for('edit_data', rowid=result[0]) }}"&gt;Edit&lt;/a&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &#123;&#37; endfor &#37;}
    &lt;/tbody&gt;

  &lt;/table&gt;
  &lt;form action="&#123;&#123; url_for('edit_data_page', rowid=rowid[0]) }}" method="POST"&gt;
    &lt;label for="row_id"&gt;Enter Row ID:&lt;/label&gt;
    &lt;input type="text" id="row_id" name="row_id"&gt;
    &lt;input type="submit" value="Submit"&gt;
&lt;/form&gt;

&lt;form action="&#123;&#123; url_for('edit_data', rowid=rowid) }}" method="POST"&gt;
    &lt;label for="description"&gt;Description:&lt;/label&gt;
    &lt;textarea id="description" name="description"&gt;&lt;/textarea&gt;
    &lt;label for="code"&gt;Code:&lt;/label&gt;
    &lt;textarea id="code" name="code"&gt;&lt;/textarea&gt;
    &lt;label for="keywords"&gt;Keywords:&lt;/label&gt;
    &lt;textarea id="keywords" name="keywords"&gt;&lt;/textarea&gt;
    &lt;input type="submit" value="Update"&gt;
&lt;/form&gt;

    &lt;/center&gt;
  &lt;/body&gt;
&lt;/html&gt;
&lt;!-- index.html--&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;indexdb&lt;/title&gt;
    &lt;style&gt;
        html,
        body &#123;
            margin: 0;
            padding: 1&#37;;
            height: 100&#37;;
            font-family: Arial, sans-serif;
        }

        body &#123;
            background-image: url('../static/assets/MemMaker_background.png');
            background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
        }
        video &#123;
            margin: 10px, auto;
            width: 250px;
            height: auto;
        }

          .wrapper &#123;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;

        }

        .header &#123;
            width: 100&#37;;
            padding: 20px;
            text-align: center;
        }

        .columns &#123;
            display: flex;
            width: 80&#37;;
            margin-top: 20px;
        }

        .column &#123;
            padding: 20px;
            box-sizing: border-box;
        }

        .column.left &#123;
            width: 30&#37;;
            border:    1px solid #000;
        }

        .column.right &#123;
        margin: 0 auto; /* Center horizontally */
        width: 50&#37;;
        border: 1px solid #000;
        text-align: center; /* Center video vertically */
    }

    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

        &lt;div class="header"&gt;   &lt;h1&gt;Welcome to the indexdb&lt;/h1&gt;&lt;/div&gt;
    &lt;div class="columns"&gt;
&lt;div class="column left"&gt;
 
    &lt;p&gt;Choose an option below:&lt;/p&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('select_by_id_form') }}"&gt;Select by ID Form&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('search_by_rowid') }}"&gt;Search by Row ID&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('search_database') }}"&gt;Search the Database&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('edit_data_page') }}"&gt;Edit Data&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('insert_data') }}"&gt;Insert Data&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('get_rowid_form') }}"&gt;Enter Row ID to Edit&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;a style ="font-size: 24px;color: brown;" href="&#123;&#123; url_for('index') }}"&gt;HOME&lt;/a&gt;
&lt;/div&gt;
&lt;div class="column right"&gt;
                &lt;h2&gt;Random Video&lt;/h2&gt;
&lt;p&gt;This Video will eventually be instructions on info on creation/using this page&lt;/p&gt;
                &lt;video controls&gt;
                    &lt;source src="&#123;&#123; video }}" type="video/mp4"&gt;
                    Your browser does not support the video tag.
                &lt;/video&gt;
            &lt;/div&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;title&gt;&#123;&#37; block title &#37;}&#123;&#37; endblock &#37;}&lt;/title&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;!-- Link to your style.css file --&gt;
    &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;
  &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/style.css') }}"&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="container"&gt;
        &#123;&#37; block content &#37;}&#123;&#37; endblock &#37;}
    &lt;/div&gt;
    &lt;a href="&#123;&#123; url_for('add_code') }}"&gt;Edit&lt;/a&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!-- index.html--&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Home Flask App Builder&lt;/title&gt;
    &lt;title&gt;Edit Template&lt;/title&gt;
     &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;
        &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/body.css') }}"&gt;
  
&lt;/head&gt; 

&lt;body&gt;
    &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h1 style = color:darkgreen;" &gt;HOME index.html&lt;/h1&gt;

        &lt;/div&gt;
        &lt;div class="columns"&gt;
            &lt;div class="column left"&gt;
                &lt;h3&gt;Links&lt;/h3&gt;
                
                &lt;a href="&#123;&#123; url_for('mkblend_video') }}"&gt;mkblend_video&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('add_effects') }}"&gt;add_effects&lt;/a&gt;

            &lt;/div&gt;
            &lt;div class="column right"&gt;
                &lt;h2&gt;Random Video&lt;/h2&gt;
                &lt;video controls&gt;
                    &lt;source src="&#123;&#123; video }}" type="video/mp4"&gt;
                    Your browser does not support the video tag.
                &lt;/video&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;title&gt;My Flask App&lt;/title&gt;
  &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/style.css') }}"&gt;
  &lt;script src="&#123;&#123; url_for('static', filename='js/script.js') }}"&gt;&lt;/script&gt;
 &lt;title&gt;My Flask App&lt;/title&gt;
  &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/styles.css') }}"&gt;
  &lt;script src="&#123;&#123; url_for('static', filename='js/script.js') }}"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt;
  &lt;style&gt;
    .resizedvideo &#123;
      width: 200px;
      height: 200px;
    }
    .resized_video &#123;
      width: 300px;
      height: auto;
    }

    .section &#123;
      margin-top: 50px;
      width: 95&#37;;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

    .sectionl &#123;
      width: 35&#37;;
      display: flex;
      flex-direction: column;
      align-items: left;
      justify-content: left;
      height: 100vh;
    }

    .sectionr &#123;
      width: 35&#37;;
      display: flex;
      flex-direction: column;
      align-items: right;
      justify-content: right;
      height: 100vh;
    }
  &lt;/style&gt;
  &lt;style&gt;
    html &#123;
      font-family: sans-serif;
    background-color: black;
    }
    body &#123;
      width: 95&#37;;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: rgb(167, 196, 189);
      color: black;
    }
    h1 &#123;
      color: rgb(255, 255, 255);
    }
    #wrapper &#123;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      background-color: teal;
    }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;  &lt;center&gt;  
    &lt;div class="wrapper"&gt;
    &lt;header class="header"&gt;
      &lt;h1 style="color: brown;"&gt;Image Processing With Flask and Executeable Functions&lt;/h1&gt;&lt;br /&gt;
      &lt;p&gt;Below are links to various Image Processing Functions. &lt;/p&gt;
    &lt;/header&gt;

    &lt;div class="content"&gt;
      &lt;a href="&#123;&#123; url_for('get_gallery') }}"&gt;View Images&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('view_thumbs') }}"&gt;View Thumbnails&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('upload_file') }}"&gt;Upload Image&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('flask_info') }}"&gt;Video&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('add_text') }}"&gt;Add text to chat.txt&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('search_txt') }}"&gt;Search chat.txt&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('blend_pil') }}"&gt;upload and blend images.&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('add_border') }}"&gt;Add a border to an image.&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('process_images') }}"&gt;Process Images With Mask&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('text_mp3') }}"&gt;Create an mp3 from aText Entry&lt;/a&gt;&lt;br /&gt;
      &lt;a style="color: brown;" href="&#123;&#123; url_for('view_log') }}"&gt;View Log/app.log&lt;/a&gt;&lt;br /&gt;
      &lt;a style="color: brown;" href="&#123;&#123; url_for('self_check') }}"&gt;flake8 check and view Log/flake.info&lt;/a&gt;&lt;br /&gt;
    &lt;/div&gt;
    &lt;div class="content"&gt;
      &lt;a href="&#123;&#123; url_for('generate_video') }}"&gt;Create an mp4 from video_resources&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('generate_video2') }}"&gt;Create an mp4 from Uploads&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('generate_video3') }}"&gt;Choose A directory to create video&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('image_directories') }}"&gt;Choose Image directories&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('select_playmp3') }}"&gt;Select and play mp3 from audio_mp3/&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('make_animation') }}"&gt;Create an Animated Gif (20 images @ 1 per second.)&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('build_stackedvids') }}"&gt;Video Stacked on Images&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('build_stackedvid') }}"&gt;Two Video Stacked&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('title_page') }}"&gt;Create a title Page&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('add_title') }}"&gt;Add a Title to a Video&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('add_effects') }}"&gt;Add effects to a Video&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('choose_dir') }}"&gt;Choose a directory&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('indexA') }}"&gt;Working With Text&lt;/a&gt;&lt;br /&gt;

      &lt;form action="&#123;&#123; url_for('clean_images_route') }}" method="POST"&gt;
        &lt;button type="submit"&gt;Clean Images&lt;/button&gt;
      &lt;/form&gt;
      &lt;form action="/search" method="GET"&gt;
        &lt;label for="search-term"&gt;Search:&lt;/label&gt;
        &lt;input type="text" id="search-term" name="q"&gt;
        &lt;button type="submit"&gt;Search&lt;/button&gt;
    &lt;/form&gt;
    &lt;form method="post" action="/mk_vid" enctype="multipart/form-data"&gt;
      &lt;label for="directory"&gt;Select a directory:&lt;/label&gt;
      &lt;select id="directory" name="directory" required&gt;
          &#123;&#37; for directory in directories &#37;}
              &lt;option value="&#123;&#123; directory }}"&gt;&#123;&#123; directory }}&lt;/option&gt;
          &#123;&#37; endfor &#37;}
      &lt;/select&gt;
      &lt;br&gt;&lt;br&gt;
      &lt;input type="submit" value="Process Video"&gt;
  &lt;/form&gt;
  &lt;h1&gt;Text to Video Conversion&lt;/h1&gt;
  &lt;form method="post" action="/maketext" enctype="multipart/form-data"&gt;
      &lt;label for="input_file"&gt;Select a text file:&lt;/label&gt;&lt;br&gt;
      &lt;input type="file" id="input_file" name="input_file" required&gt;&lt;br&gt;&lt;br&gt;
      &lt;input type="submit" value="Convert to Video"&gt;
  &lt;/form&gt;
  &lt;a href="/format_text"&gt;Format Text&lt;/a&gt;
    &lt;/div&gt;
    &lt;footer class="footer"&gt;

      &lt;h2 style="color: brown;"&gt;Links to YouTube Channels&lt;/h2&gt;
      &lt;a href="https://www.youtube.com/@totallyinsaneart3345" target="_blank "&gt;Totally Insane Art&lt;/a&gt;&lt;br /&gt;
      &lt;a href="https://www.youtube.com/@JackNorthrup" target="_blank "&gt;Jack Northrup&lt;/a&gt;&lt;br /&gt;
      &lt;a href="https://app.prodia.com/#/" target="_blank "&gt;prodia&lt;/a&gt;&lt;br /&gt;
      &lt;a href="https://app.leonardo.ai/" target="_blank "&gt;leonardo.ai&lt;/a&gt;&lt;br /&gt;
    &lt;/footer&gt;
  &lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;title&gt;My Flask App&lt;/title&gt;
  &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/style.css') }}"&gt;
  &lt;script src="&#123;&#123; url_for('static', filename='js/script.js') }}"&gt;&lt;/script&gt;
 &lt;title&gt;My Flask App&lt;/title&gt;
  &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/style.css') }}"&gt;
  &lt;script src="&#123;&#123; url_for('static', filename='js/script.js') }}"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt;
  &lt;style&gt;
    .resizedvideo &#123;
      width: 200px;
      height: 200px;
    }
    .resized_video &#123;
      width: 300px;
      height: auto;
    }

    .section &#123;
      margin-top: 50px;
      width: 95&#37;;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

    .sectionl &#123;
      width: 35&#37;;
      display: flex;
      flex-direction: column;
      align-items: left;
      justify-content: left;
      height: 100vh;
    }

    .sectionr &#123;
      width: 35&#37;;
      display: flex;
      flex-direction: column;
      align-items: right;
      justify-content: right;
      height: 100vh;
    }
  &lt;/style&gt;
  &lt;style&gt;
    html &#123;
      font-family: sans-serif;
    background-color: black;
    }
    body &#123;
      width: 95&#37;;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: rgb(167, 196, 189);
      color: black;
    }
    h1 &#123;
      color: rgb(255, 255, 255);
    }
    #wrapper &#123;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      background-color: teal;
    }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;  &lt;center&gt;  
    &lt;div class="wrapper"&gt;
    &lt;header class="header"&gt;
      &lt;h1 style="color: brown;"&gt;Image Processing With Flask and Executeable Functions&lt;/h1&gt;&lt;br /&gt;
      &lt;p&gt;Below are links to many various Image Processing Functions. &lt;/p&gt;
    &lt;/header&gt;

    &lt;div class="content"&gt;
      &lt;a href="&#123;&#123; url_for('get_gallery') }}"&gt;View Images&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('view_thumbs') }}"&gt;View Thumbnails&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('upload_file') }}"&gt;Upload Image&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('flask_info') }}"&gt;Video&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('add_text') }}"&gt;Add text to chat.txt&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('search_txt') }}"&gt;Search chat.txt&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('blend_pil') }}"&gt;upload and blend images.&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('add_border') }}"&gt;Add a border to an image.&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('process_images') }}"&gt;Process Images With Mask&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('text_mp3') }}"&gt;Create an mp3 from aText Entry&lt;/a&gt;&lt;br /&gt;
      &lt;a style="color: brown;" href="&#123;&#123; url_for('view_log') }}"&gt;View Log/app.log&lt;/a&gt;&lt;br /&gt;
&lt;hr&gt;
    &lt;/div&gt;
    &lt;div class="content"&gt;
      &lt;a href="&#123;&#123; url_for('generate_video') }}"&gt;Create an mp4 from video_resources&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('generate_video2') }}"&gt;Create an mp4 from Uploads&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('generate_video3') }}"&gt;Choose A directory to create video&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('image_directories') }}"&gt;Choose Image directories&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('select_playmp3') }}"&gt;Select and play mp3 from audio_mp3/&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('make_animation') }}"&gt;Create an Animated Gif (20 images @ 1 per second.)&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('build_stackedvids') }}"&gt;Video Stacked on Images&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('build_stackedvid') }}"&gt;Two Video Stacked&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('title_page') }}"&gt;Create a title Page&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('add_title') }}"&gt;Add a Title to a Video&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('add_effects') }}"&gt;Add effects to a Video&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('choose_dir') }}"&gt;Choose a directory&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('indexA') }}"&gt;Working With Text&lt;/a&gt;&lt;br /&gt;

      &lt;form action="&#123;&#123; url_for('clean_images_route') }}" method="POST"&gt;
        &lt;button type="submit"&gt;Clean Images&lt;/button&gt;
      &lt;/form&gt;
      &lt;form action="/search" method="GET"&gt;
        &lt;label for="search-term"&gt;Search:&lt;/label&gt;
        &lt;input type="text" id="search-term" name="q"&gt;
        &lt;button type="submit"&gt;Search&lt;/button&gt;
    &lt;/form&gt;
    &lt;form method="post" action="/mk_vid" enctype="multipart/form-data"&gt;
      &lt;label for="directory"&gt;Select a directory:&lt;/label&gt;
      &lt;select id="directory" name="directory" required&gt;
          &#123;&#37; for directory in directories &#37;}
              &lt;option value="&#123;&#123; directory }}"&gt;&#123;&#123; directory }}&lt;/option&gt;
          &#123;&#37; endfor &#37;}
      &lt;/select&gt;
      &lt;br&gt;&lt;br&gt;
      &lt;input type="submit" value="Process Video"&gt;
  &lt;/form&gt;
  &lt;h1&gt;Text to Video Conversion&lt;/h1&gt;
  &lt;form method="post" action="/maketext" enctype="multipart/form-data"&gt;
      &lt;label for="input_file"&gt;Select a text file:&lt;/label&gt;&lt;br&gt;
      &lt;input type="file" id="input_file" name="input_file" required&gt;&lt;br&gt;&lt;br&gt;
      &lt;input type="submit" value="Convert to Video"&gt;
  &lt;/form&gt;
  &lt;a href="/format_text"&gt;Format Text&lt;/a&gt;
    &lt;/div&gt;
    &lt;footer class="footer"&gt;

      &lt;h2 style="color: brown;"&gt;Links to YouTube Channels&lt;/h2&gt;
      &lt;a href="https://www.youtube.com/@totallyinsaneart3345" target="_blank "&gt;Totally Insane Art&lt;/a&gt;&lt;br /&gt;
      &lt;a href="https://www.youtube.com/@JackNorthrup" target="_blank "&gt;Jack Northrup&lt;/a&gt;&lt;br /&gt;
      &lt;a href="https://app.prodia.com/#/" target="_blank "&gt;prodia&lt;/a&gt;&lt;br /&gt;
      &lt;a href="https://app.leonardo.ai/" target="_blank "&gt;leonardo.ai&lt;/a&gt;&lt;br /&gt;
    &lt;/footer&gt;
  &lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;&lt;!-- index.html--&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Home Flask App Builder&lt;/title&gt;
    &lt;style&gt;
        html,body&#123;
            background-image: url('../static/assets/MemMaker_background.png');
            background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
            /* Image is centered vertically and horizontally at all times */
            background-position: center center;
            /* Image doesn't repeat */
            background-repeat: no-repeat;
            font-family: Arial, sans-serif;
            /* Makes the image fixed in the viewport so that it doesn't move when
            the content height is greater than the image height */
            background-attachment: fixed;
   font-size:1.5em;     
}
        font-family: Arial, sans-serif;
        video &#123;
            margin: 10px, auto;
            width: 250px;
            height: auto;
        }

          .wrapper &#123;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;

        }

        .header &#123;
            width: 100&#37;;
            padding: 10px;
            text-align: center;
        }

        .columns &#123;
            display: flex;
            width: 95&#37;;
            margin-top: 10px;
        }

        .column &#123;
            padding: 5px;
margin-top:5px;
border:2px solid red;

            margin-left: 10px;
            margin-right: 10px;
            box-sizing: border-box;
        }

        .column.left &#123;
            width: 50&#37;;
            border:    1px solid #000;
        }

        .column.right &#123;
        margin: 0 auto; /* Center horizontally */
        width: 50&#37;;
        border: 1px solid #000;
        text-align: center; /* Center video vertically */
    }

    .column.right video &#123;
        max-width: 100&#37;;
        height: auto;
    }
    .note&#123;
       color:darkgreen;
       font-size:26px;
    }
    p&#123;
       padding-top: -20px;
    }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h1 style = color:darkgreen;" &gt;HOME index.html&lt;/h1&gt;
            &lt;a class="note" href="&#123;&#123; url_for('edit_template_page', filename='index.html') }}"&gt;Edit This Page&lt;/a&gt;&lt;/li&gt;&lt;br /&gt;
        &lt;/div&gt;
        &lt;div class="columns"&gt;
            &lt;div class="column left"&gt;
                &lt;h3&gt;Links&lt;/h3&gt;
                
                &lt;a href="&#123;&#123; url_for('app_utilities') }}"&gt;Application Utilities&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('image_video') }}"&gt;Image and Video Processing Links&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('view_gallery.gallery_index') }}"&gt;View Gallery for Image Directories&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('create_comic.create_comic_index') }}"&gt;Create Comic Border&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('index_canvas') }}"&gt;Project Canvas&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_javascript') }}"&gt;Project JavaScript&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_template') }}"&gt;Edit Links Listed Below&lt;/a&gt;
                &lt;p&gt;Edit Index - Edit CSS Files - Edit Canvas JS - Edit Formatted Text - Edit FlaskAppArchitect Description - Edit Formatted Text&lt;/p&gt;
                
                &lt;a href="&#123;&#123; url_for('data_page') }}"&gt;Data Page - Snippets,Search ChatGPT,Sqlite3&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_file') }}"&gt;Edit File&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_formatted') }}"&gt;Edit Formatted Text&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_description') }}"&gt;Edit Description&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('misc_links') }}"&gt;This page contains all active links(I hope)&lt;/a&gt;&lt;br /&gt;
            &lt;/div&gt;
            &lt;div class="column right"&gt;
                &lt;h2&gt;Random Video&lt;/h2&gt;
                &lt;video controls&gt;
                    &lt;source src="&#123;&#123; video }}" type="video/mp4"&gt;
                    Your browser does not support the video tag.
                &lt;/video&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;title&gt;My Flask App&lt;/title&gt;
  &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/style.css') }}"&gt;
  &lt;script src="&#123;&#123; url_for('static', filename='js/script.js') }}"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt;
  &lt;style&gt;
    .resizedvideo &#123;
      width: 200px;
      height: 200px;
    }

    .section &#123;
      margin-top: 50px;
      width: 95&#37;;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

    .sectionl &#123;
      width: 35&#37;;
      display: flex;
      flex-direction: column;
      align-items: left;
      justify-content: left;
      height: 100vh;
    }

    .sectionr &#123;
      width: 35&#37;;
      display: flex;
      flex-direction: column;
      align-items: right;
      justify-content: right;
      height: 100vh;
    }
  &lt;/style&gt;
  &lt;style&gt;
    html &#123;
      font-family: sans-serif;
    background-color: black;
    }
    body &#123;
      width: 95&#37;;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: rgb(167, 196, 189);
      color: black;
    }
    h1 &#123;
      color: rgb(255, 255, 255);
    }
    #wrapper &#123;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      background-color: teal;
    }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;center&gt;  
  &lt;div class="container"&gt;
&lt;p&gt;
    &lt;h1 style="color: brown;"&gt;Creating a speaking Avatar with A Flask App. &lt;br /&gt;Click the videos below for
      step-by-step instructions. &lt;/h1&gt;  &lt;a href="&#123;&#123; url_for('index') }}"&gt;RETURN HOME&lt;/a&gt;&lt;br /&gt;
    &lt;/p&gt;
      &lt;video controls class="resizedvideo"&gt;
        &lt;source src="static/assets/result_cl.webm" type="video/mp4"&gt;
        Your browser does not support the video tag.
      &lt;/video&gt;&lt;br /&gt;

      &lt;a href="&#123;&#123; url_for('text_mp3') }}"&gt;First:  Create the mp3&lt;/a&gt;&lt;br /&gt;

      &lt;video controls class="resizedvideo"&gt;
        &lt;source src="static/assets/result_convert_mp3_wav.webm" type="video/mp4"&gt;
        Your browser does not support the video tag.
      &lt;/video&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('convert_mp3_to_wav') }}"&gt;Second: convert_mp3_to_wav&lt;/a&gt;&lt;br /&gt;
      &lt;video controls class="resizedvideo"&gt;
        &lt;source src="static/assets/result_indian.webm" type="video/mp4"&gt;
        Your browser does not support the video tag.
      &lt;/video&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('generate_vid') }}"&gt;Third: Create a Video the same length as the wav Created&lt;/a&gt;&lt;br /&gt;
      &lt;video controls class="resizedvideo"&gt;
        &lt;source src="static/assets/Water-blinking.webm" type="video/mp4"&gt;
        Your browser does not support the video tag.
      &lt;/video&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('create_avatar') }}"&gt;Fourth and Last Step: Create Avatar&lt;/a&gt;&lt;br /&gt;
      &lt;br /&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('upload_file') }}"&gt;Upload Image&lt;/a&gt;&lt;br /&gt;

      &lt;form action="/search" method="GET"&gt;
        &lt;label for="search-term"&gt;Search:&lt;/label&gt;
        &lt;input type="text" id="search-term" name="q"&gt;
        &lt;button type="submit"&gt;Search&lt;/button&gt;
      &lt;/form&gt;
      &lt;br /&gt;
      &lt;h3&gt;Debug test&lt;/h3&gt;
      &lt;a href="&#123;&#123; url_for('make_text') }}"&gt;Create a Text File&lt;/a&gt;&lt;br /&gt;
      
      &lt;a href="&#123;&#123; url_for('choose_dir') }}"&gt;Debug Test&lt;/a&gt;&lt;br /&gt;
      &lt;a href="&#123;&#123; url_for('mkblend_video') }}"&gt;Create a Blended Video&lt;/a&gt;&lt;br /&gt;
    &lt;/div&gt;
&lt;/center&gt;
  &lt;footer class="footer"&gt;
    &lt;center&gt;
      &lt;video controls class="resized-video"&gt;
        &lt;source src="static/assets/result_cl.webm" type="video/mp4"&gt;
        Your browser does not support the video tag.
      &lt;/video&gt;
      &nbsp;&nbsp;&nbsp;&nbsp;
      &lt;img style="width: 30&#37;; height: auto;" src="&#123;&#123; url_for('static', filename='images/image2.jpg') }}"
        alt="Example image"&gt;&lt;br /&gt;&nbsp;&nbsp;&nbsp;
    &lt;/center&gt;
    &lt;h2 style="color: brown;"&gt;Create a VIdeo of Images - Using Minterpolate&lt;/h2&gt;
    &lt;style&gt;
      .resized-video &#123;
        width: 25&#37;;
        height: auto;
      }
    &lt;/style&gt;
&lt;center&gt;
    &lt;video controls class="resized-video"&gt;
      &lt;source src="static/assets/Final_End.mp4" type="video/mp4"&gt;
      Your browser does not support the video tag.
    &lt;/video&gt;&nbsp;&nbsp;&nbsp;&nbsp;
    &lt;video controls class="resized-video"&gt;
      &lt;source src="static/assets/Final_End-0.mp4" type="video/mp4"&gt;
      Your browser does not support the video tag.
    &lt;/video&gt;
    &nbsp;&nbsp;&nbsp;&nbsp;
    &lt;video controls class="resized-video"&gt;
      &lt;source src="static/assets/video_in_a_video-02.mp4" type="video/mp4"&gt;
      Your browser does not support the video tag.
    &lt;/video&gt;

    &lt;form method="post" action="/videos" enctype="multipart/form-data"&gt;
      &lt;label for="input_video"&gt;Select input video file:&lt;/label&gt;&lt;br&gt;
      &lt;input type="file" id="input_video" name="input_video"&gt;&lt;br&gt;&lt;br&gt;
      &lt;input type="submit" value="Submit"&gt;
    &lt;/center&gt;
    &lt;/form&gt;
    &lt;br /&gt;&lt;br /&gt;
    &lt;hr&gt;
    &lt;a href="&#123;&#123; url_for('mk_background') }}"&gt;Creat Video From Thumbnail Cache&lt;/a&gt;&lt;br /&gt;
    TEST
    &lt;a href="&#123;&#123; url_for('add_border') }}"&gt;Add a border to an image.&lt;/a&gt;&lt;br /&gt;
    &lt;a href="https://www.youtube.com/@totallyinsaneart3345" target="_blank "&gt;Totally Insane Art&lt;/a&gt;&lt;br /&gt;
    &lt;a href="https://www.youtube.com/@JackNorthrup" target="_blank "&gt;Jack Northrup&lt;/a&gt;&lt;br /&gt;
    &lt;a href="https://app.prodia.com/#/" target="_blank "&gt;prodia&lt;/a&gt;&lt;br /&gt;
    &lt;a href="https://app.leonardo.ai/" target="_blank "&gt;leonardo.ai&lt;/a&gt;&lt;br /&gt;
  &lt;/footer&gt;
  &lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;&lt;!-- index.html--&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;My Flask App&lt;/title&gt;
    &lt;style&gt;
        html,
        body &#123;
            background-image: url('../static/assets/MemMaker_background.png');
            background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
            /* Image is centered vertically and horizontally at all times */
            background-position: center center;
            /* Image doesn't repeat */
            background-repeat: no-repeat;
            font-family: Arial, sans-serif;
            /* Makes the image fixed in the viewport so that it doesn't move when 
            the content height is greater than the image height */
            background-attachment: fixed;
            }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;h1&gt;Choose a Directory&lt;/h1&gt;
    &lt;form method="post"&gt;
        &lt;select name="selected_directory"&gt;
            &#123;&#37; for directory in directory_list &#37;}
            &lt;option value="&#123;&#123; directory }}"&gt;&#123;&#123; directory }}&lt;/option&gt;
            &#123;&#37; endfor &#37;}
        &lt;/select&gt;
        &lt;input type="submit" value="Get Image List"&gt;
    &lt;/form&gt;

    &#123;&#37; if video &#37;}
    &lt;h2&gt;Generated Video:&lt;/h2&gt;
    &lt;video controls&gt;
        &lt;source src="&#123;&#123; video }}" type="video/mp4"&gt;
        Your browser does not support the video tag.
    &lt;/video&gt;
    &#123;&#37; endif &#37;}

&lt;/body&gt;

&lt;/html&gt;&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Capture Tube&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Capture Video Tube&lt;/h1&gt;
    &lt;a href="/capture_overlay_verify"&gt;Start Capture Regular&lt;/a&gt;&lt;br /&gt;
    &lt;a href="/capture_overlay_short"&gt;Start Capture Short&lt;/a&gt;
    &lt;h1&gt;Welcome to Your Flask App&lt;/h1&gt;
    &lt;p&gt;Create a text image&lt;/p&gt;
    &lt;a href="&#123;&#123; url_for('create_text') }}"&gt;Create Text Image&lt;/a&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Insert Data&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Insert Data&lt;/h1&gt;
    &lt;form action="&#123;&#123; url_for('insert_data') }}" method="post"&gt;
        &lt;label for="description"&gt;Description:&lt;/label&gt;
        &lt;input type="text" name="description" id="description" required&gt;
        &lt;br&gt;
        &lt;label for="code"&gt;Code:&lt;/label&gt;
        &lt;textarea name="code" id="code" rows="8" cols="50" required&gt;&lt;/textarea&gt;
        &lt;br&gt;
        &lt;label for="keywords"&gt;Keywords:&lt;/label&gt;
        &lt;input type="text" name="keywords" id="keywords" required&gt;
        &lt;br&gt;
        &lt;button type="submit"&gt;Insert Data&lt;/button&gt;
    &lt;/form&gt;
    &lt;br&gt;
    &lt;a href="&#123;&#123; url_for('indexdb') }}"&gt;Go back to the Index Page&lt;/a&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!-- index.html--&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Home Flask App Builder&lt;/title&gt;
    &lt;style&gt;
        html,
        body &#123;
            margin: 0;
            padding: 1&#37;;
            height: 100&#37;;
            font-family: Arial, sans-serif;
        }

        body &#123;
            background-image: url('../static/assets/MemMaker_background.png');
            background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
        }
        video &#123;
            margin: 10px, auto;
            width: 250px;
            height: auto;
        }

          .wrapper &#123;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;

        }

        .header &#123;
            width: 100&#37;;
            padding: 20px;
            text-align: center;
        }

        .columns &#123;
            display: flex;
            width: 80&#37;;
            margin-top: 20px;
        }

        .column &#123;
            padding: 20px;
            box-sizing: border-box;
        }

        .column.left &#123;
            width: 30&#37;;
            border:    1px solid #000;
        }

        .column.right &#123;
        margin: 0 auto; /* Center horizontally */
        width: 60&#37;;
        border: 1px solid #000;
        text-align: center; /* Center video vertically */
    }

    .column.right video &#123;
        max-width: 100&#37;;
        height: auto;
    }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h1&gt;HOME index.html&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="columns"&gt;
            &lt;div class="column left"&gt;
                &lt;h3&gt;Create Text&lt;/h3&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('large_script') }}"&gt;JavaScript Alice Demo&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('image_video') }}"&gt;Image and Video Processing Links&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('index_canvas') }}"&gt;Project Canvas&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_script') }}"&gt;Project JavaScript&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_template') }}"&gt;Edit Template HTML Files&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_file') }}"&gt;Edit File&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_formatted') }}"&gt;Edit Formatted Text&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_description') }}"&gt;Edit Description&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('misc_links') }}"&gt;This page contains all active links(I hope)&lt;/a&gt;&lt;br /&gt;
            &lt;/div&gt;
            &lt;div class="column right"&gt;
                &lt;h2&gt;Random Video&lt;/h2&gt;
                &lt;video controls&gt;
                    &lt;source src="&#123;&#123; video }}" type="video/mp4"&gt;
                    Your browser does not support the video tag.
                &lt;/video&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;title&gt;Generate Video 2&lt;/title&gt;
	&lt;style&gt;
		.video &#123;
			display: inline-block;
			margin: 20px;
		}
		.thumbnail &#123;
			width: 320px;
			height: 180px;
			background-size: cover;
		}
	&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;h1&gt;Generate Video 2&lt;/h1&gt;
	
	&#123;&#37; if video_path &#37;}
		&lt;h2&gt;Generated Video&lt;/h2&gt;
		&lt;video width="640" height="360" controls&gt;
			&lt;source src="&#123;&#123; video_url }}" type="video/mp4"&gt;
			Your browser does not support the video tag.
		&lt;/video&gt;
	&#123;&#37; endif &#37;}
	
	&#123;&#37; if selected_videos &#37;}
		&lt;h2&gt;Selected Videos&lt;/h2&gt;
		&#123;&#37; for video in selected_videos &#37;}
			&lt;div class="video"&gt;
				&lt;a href="&#123;&#123; url_for('generate_video2') }}?remove_video=&#123;&#123; video }}"&gt;
					&lt;button&gt;Remove&lt;/button&gt;
				&lt;/a&gt;
				&lt;div class="thumbnail" style="background-image: url(&#123;&#123; url_for('static', filename='thumbnails/' + video + '.jpg') }})"&gt;&lt;/div&gt;
				&lt;p&gt;&#123;&#123; video }}&lt;/p&gt;
			&lt;/div&gt;
		&#123;&#37; endfor &#37;}
	&#123;&#37; endif &#37;}
	
	&lt;h2&gt;Available Videos&lt;/h2&gt;
	&#123;&#37; for video in available_videos &#37;}
		&lt;div class="video"&gt;
			&lt;a href="&#123;&#123; url_for('generate_video2') }}?add_video=&#123;&#123; video }}"&gt;
				&lt;button&gt;Add&lt;/button&gt;
			&lt;/a&gt;
			&lt;div class="thumbnail" style="background-image: url(&#123;&#123; url_for('static', filename='thumbnails/' + video + '.jpg') }})"&gt;&lt;/div&gt;
			&lt;p&gt;&#123;&#123; video }}&lt;/p&gt;
		&lt;/div&gt;
	&#123;&#37; endfor &#37;}
&lt;/body&gt;
&lt;/html&gt;
&lt;!-- index.html--&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Home Flask App Builder&lt;/title&gt;
    &lt;style&gt;
        html,
        body &#123;
            margin: 0;
            padding: 1&#37;;
            height: 100&#37;;
            font-family: Arial, sans-serif;
        }

        body &#123;
            background-image: url('../static/assets/MemMaker_background.png');
            background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
        }

            canvas &#123;border: 1px solid #999999}
        &lt;/style&gt;
        &lt;script src="&#123;&#123; url_for('static', filename='canvas/codespace_api_canvas.js') }}"&gt;&lt;/script&gt;
        &lt;script src="&#123;&#123; url_for('static', filename='canvas/kaleidoscope1_canvas.js') }}"&gt;&lt;/script&gt;
        &lt;title&gt;Kaleidoscope&lt;/title&gt;
    &lt;/head&gt;
    &lt;body onload="init()"&gt;
        &lt;div style="min-width: 400px; display: inline-block"&gt;&lt;/div&gt;
        &lt;canvas id="kCanvas" width="600" height="600"&gt;&lt;/canvas&gt;
        &lt;canvas style="visibility: hidden;" id="dCanvas" width="400" height="400"&gt;&lt;/canvas&gt;
    &lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE HTML &gt;&lt;html&gt;&lt;head&gt;
&lt;!-- Code from https://www.pepperoni.blog/canvas-kaleidoscope/ --&gt;
&lt;!-- Modified by Juan A. Villalpando - http://kio4.com/appinventor/169X_javascript_caleidoscopio.htm --&gt;

&lt;!-- DELETE ZOOM --&gt;
&lt;!-- &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"&gt; --&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;img  src= "" id="base"  style="display:none"&gt;
&lt;img  src= "" id="baseR" style="display:none"&gt;
&lt;canvas width="1024" height="1024" id="c"&gt;&lt;/canvas&gt;

&lt;script type="text/javascript"&gt;
    var base64 =  window.AppInventor.getWebViewString(); // Entrada de datos.

	 document.getElementById('base').setAttribute('src', base64);
	 document.getElementById('baseR').setAttribute('src', base64);
&lt;/script&gt;

&lt;script type="text/javascript"&gt;
window.addEventListener("load", function()&#123;
    var c = document.getElementById("c");
    var baseImg = document.getElementById("base");
    var baseRImg = document.getElementById("baseR");
    var ctx = c.getContext("2d");
    var pat = ctx.createPattern(baseImg, "repeat");
    var patR = ctx.createPattern(baseRImg, "repeat");
    var patDim = 150; //pattern is 150x150 square.
    var SqrtOf3_4 = Math.sqrt(3)/2;
    //height of triangle side given side length of 150 is:
    var height =  SqrtOf3_4 * patDim;
var offset = 0;
ctx.translate(-0.5*patDim, 0);
var fn = function(alternateMode)&#123;
    offset = (offset - 1) &#37; 1024
    var i = 0;


    //draw kaleidoscope first row.
    ctx.save();
    ctx.fillStyle=pat;
    ctx.translate(0, offset);
    while(i &lt;= 3)&#123;
      ctx.beginPath();
      ctx.moveTo(0,-offset);
      ctx.lineTo(patDim, -offset);
      ctx.lineTo(0.5*patDim, height-offset);
      ctx.closePath();
      ctx.fill();
      if(i&#37;3==0)&#123;
        ctx.translate(patDim,-offset);
        ctx.rotate(-120*Math.PI/180);
        ctx.translate(-patDim,offset);
      }
      else if(i&#37;3==1)&#123;
        if(alternateMode)&#123;
          ctx.rotate(120*Math.PI/180);
          ctx.translate(-3*patDim, 0);
          ctx.rotate(-120*Math.PI/180);
        }
        ctx.translate(0.5*patDim, height-offset);
        ctx.rotate(-120*Math.PI/180);
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;title&gt;Directions are on The Bottom of the Page&lt;/title&gt;
  &lt;style type="text/css"&gt;
    body &#123;
      background: url("http://madhatterstamps.com/backg.jpg") fixed center no-repeat;
    }
  &lt;/style&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"&gt;
  &lt;meta http-equiv="content-script-type" content="text/javascript"&gt;
  &lt;meta http-equiv="content-style-type" content="text/css"&gt;
  &lt;meta http-equiv="content-language" content="en"&gt;
  &lt;meta http-equiv="pragma" content="no-cache"&gt;
  &lt;meta name="robots" content="INDEX,FOLLOW"&gt;
  &lt;meta name="description"
    content="supplier of rubber stamps, mad hatter, Alice in wonderland, arts and crafts, scrapbooks, ATC suplies,"&gt;
  &lt;meta name="keywords"
    content="collage, rubber stamps, mad hatter, Alice in wonderland, arts and crafts, collage kits, scrapbooks, tea party, coloring book, fun, stamp like mad "&gt;
  &lt;meta name="Copyright" content="Mad Hatter Dot Com"&gt;
  &lt;meta name="Language" content="en-us"&gt;
  &lt;meta name="Publisher" content="Mad Hatter Dot Com"&gt;
  &lt;meta name="Distribution" content="global"&gt;
  &lt;meta name="Rating" content="general"&gt;
  &lt;meta name="author" content="webmaster@madhatterstamps.com"&gt;
  &lt;meta name="revisit-after" content="30 days"&gt;
  &lt;style&gt;
    &lt;!--
    .dragme &#123;
      position: relative;
    }
    --&gt;
  &lt;/style&gt;
  &lt;script language="JavaScript1.2"&gt;
  
    
    var ie = document.all;
    var nn6 = document.getElementById && !document.all;

    var isdrag = false;
    var x, y;
    var dobj;

    function movemouse(e) &#123;
      if (isdrag) &#123;
        dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
        dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
        return false;
      }
    }

    function selectmouse(e) &#123;
      var fobj = nn6 ? e.target : event.srcElement;
      var topelement = nn6 ? "HTML" : "BODY";

      while (fobj.tagName != topelement && fobj.className != "dragme") &#123;
        fobj = nn6 ? fobj.parentNode : fobj.parentElement;
      }

      if (fobj.className == "dragme") &#123;
        isdrag = true;
        dobj = fobj;
        tx = parseInt(dobj.style.left + 0);
        ty = parseInt(dobj.style.top + 0);
        x = nn6 ? e.clientX : event.clientX;
        y = nn6 ? e.clientY : event.clientY;
        document.onmousemove = movemouse;
        return false;
      }
    }

    document.onmousedown = selectmouse;
    document.onmouseup = new Function("isdrag=false");

    //--&gt;
  &lt;/script&gt;
&lt;/head&gt;

&lt;body
  style="background-image: url('static/images/make/scene_back.jpg'); color: rgb(204, 204, 204); background-color: rgb(153, 255, 153);"
  vlink="#551a8b" alink="#ee0000" link="#0000ee"&gt;
  &lt;table style="text-align: left; width: 100&#37;;" border="0" cellpadding="2" cellspacing="2"&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td colspan="2" rowspan="1" style="vertical-align: top;"&gt;
          &lt;p&gt; &lt;/p&gt;


          &lt;img class="dragme" src="static/images/make/Image2.gif"&gt;
          &lt;img class="dragme" style="width: 59px; height: 104px;" src="static/images/make/flower2.gif"&gt;&lt;img
            class="dragme" style="width: 74px; height: 74px;" src="static/images/make/rat.gif"&gt;
          &lt;img class="dragme" style="width: 77px; height: 138px;" src="static/images/make/Tag.gif"&gt;&lt;br&gt;
          &lt;br&gt;
          &lt;img class="dragme" src="static/images/make/naughty.gif"&gt;&lt;br&gt;
          &lt;img class="dragme" style="width: 329px; height: 84px;" src="static/images/make/back7.gif"&gt;
          &lt;img class="dragme" style="width: 42px; height: 75px;" src="static/images/make/flower2.gif"&gt;
          &lt;img class="dragme" style="width: 40px; height: 71px;" src="static/images/make/flower2.gif"&gt;
          &lt;img class="dragme" style="width: 40px; height: 71px;" src="static/images/make/flower2.gif"&gt;
          &lt;img class="dragme" style="width: 99px; height: 89px;" src="static/images/make/butter1.gif"&gt;
          &lt;img class="dragme" style="width: 37px; height: 66px;" src="static/images/make/flower2.gif"&gt;&lt;br&gt;
          &lt;img class="dragme" src="static/images/make/back6.gif"&gt;
          &lt;img class="dragme" style="width: 37px; height: 66px;" src="static/images/make/flower2.gif"&gt;
          &lt;img class="dragme" style="width: 59px; height: 104px;" src="static/images/make/flower2.gif"&gt;
          &lt;img class="dragme" style="width: 68px; height: 120px;" src="static/images/make/flower1.gif"&gt;&lt;br&gt;
          &lt;img class="dragme" style="width: 79px; height: 64px;" src="static/images/make/butter2.gif"&gt;
          &lt;img class="dragme" style="width: 229px; height: 67px;" src="static/images/make/grass.gif"&gt;
          &lt;img class="dragme" style="width: 250px; height: 78px;" src="static/images/make/grass.gif"&gt;
          &lt;img class="dragme" style="width: 81px; height: 120px;" src="static/images/make/treesmall.gif"&gt; &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;img class="dragme" style="width: 37px; height: 66px;" src="static/images/make/flower2.gif"&gt;&lt;img
            class="dragme" style="width: 37px; height: 66px;" src="static/images/make/flower2.gif"&gt;
          &lt;img class="dragme" style="width: 69px; height: 56px;" src="static/images/make/butter2.gif"&gt;
          &lt;img class="dragme" style="width: 99px; height: 89px;" src="static/images/make/butter1.gif"&gt;
          &lt;img class="dragme" style="width: 101px; height: 81px;" src="static/images/make/butter2.gif"&gt;
          &lt;img class="dragme" style="width: 54px; height: 96px;" src="static/images/make/flower2.gif"&gt;
          &lt;img class="dragme" style="width: 176px; height: 179px;" src="static/images/make/ul.png"&gt;
          &lt;img class="dragme" src="ur.gif"&gt;&lt;img class="dragme" style="width: 130px; height: 175px;"
            src="static/images/make/rabbit3.gif"&gt;&lt;br&gt;
          &lt;img class="dragme" style="width: 63px; height: 56px;" src="static/images/make/butter1.gif"&gt;
          &lt;img class="dragme" style="width: 68px; height: 88px;" src="static/images/make/flower1.gif"&gt;
          &lt;img class="dragme" style="width: 42px; height: 75px;" src="static/images/make/flower1.gif"&gt;
          &lt;img class="dragme" style="width: 31px; height: 55px;" src="static/images/make/flower2.gif"&gt;
          &lt;img class="dragme" style="width: 32px; height: 57px;" src="static/images/make/flower1.gif"&gt;
          &lt;img class="dragme" style="width: 71px; height: 102px;" src="static/images/make/flower1.gif"&gt;
          &lt;img class="dragme" style="width: 76px; height: 134px;" src="static/images/make/flower2.gif"&gt;
          &lt;img class="dragme" style="width: 123px; height: 150px;" src="static/images/make/treesmall.gif"&gt;
          &lt;img class="dragme" style="width: 78px; height: 96px;" src="static/images/make/treesmall.gif"&gt;
          &lt;img class="dragme" style="width: 76px; height: 134px;" src="static/images/make/flower2.gif"&gt;&lt;br&gt;
          &nbsp;&lt;img class="dragme" style="width: 213px; height: 241px;" src="static/images/make/shapes2.gif"&gt;
          &lt;img class="dragme" src="static/images/make/lr.gif"&gt;
          &lt;img class="dragme" src="static/images/make/ll.gif"&gt;
        &lt;/td&gt;
        &lt;td style="vertical-align: top;"&gt;
          &lt;img class="dragme" style="width: 314px; height: 425px;" src="static/images/make/treesmall.gif"&gt;&lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;img class="dragme" style="width: 221px; height: 267px;" src="static/images/make/Aliceflamingo.gif"&gt;&lt;br&gt;
          &lt;br&gt;
          &lt;img class="dragme" style="width: 174px; height: 213px;" src="static/images/make/treesmall.gif"&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;br&gt;
  &lt;div style="text-align: center;"&gt;&lt;big&gt;&lt;big&gt;&lt;big&gt;&lt;br style="color: rgb(204, 0, 0); font-weight: bold;"&gt;
        &lt;/big&gt;&lt;span style="color: rgb(0, 0, 0); font-weight: bold;"&gt;All Items
          except for the background may be dragged and dropped&lt;br&gt;
          Items you do not wish to use, may be dragged from the top of the image &lt;br&gt;
          and pulled off the screen on to bottom &lt;br&gt;
          If you scroll down to far just scroll back up to original position&lt;br&gt;
          and all items will be in place.&lt;br&gt;
        &lt;/span&gt;&lt;/big&gt;&lt;/big&gt;&lt;span style="color: rgb(128, 191, 255);"&gt;&lt;big style="color: rgb(255, 0, 0);"&gt;&lt;span
          style="font-weight: bold;"&gt;With
          Microsoft Explore you may use
          full page viewing . . &lt;/span&gt;&lt;/big&gt;&lt;/span&gt;&lt;br style="font-weight: bold;"&gt;
    &lt;span style="color: rgb(128, 191, 255);"&gt;&lt;big style="color: rgb(255, 0, 0);"&gt;&lt;span style="font-weight: bold;"&gt;Create
          your picture&lt;/span&gt;&lt;/big&gt;&lt;/span&gt;&lt;br style="font-weight: bold;"&gt;
    &lt;span style="color: rgb(128, 191, 255);"&gt;&lt;big style="color: rgb(255, 0, 0);"&gt;&lt;span style="font-weight: bold;"&gt;Press
          Print Screen &lt;/span&gt;&lt;/big&gt;&lt;/span&gt;&lt;br style="font-weight: bold;"&gt;
    &lt;span style="color: rgb(128, 191, 255);"&gt;&lt;big style="color: rgb(255, 0, 0);"&gt;&lt;span style="font-weight: bold;"&gt;Paste
          in Paint Shop &lt;/span&gt;&lt;/big&gt;&lt;/span&gt;&lt;br style="font-weight: bold;"&gt;
    &lt;span style="color: rgb(128, 191, 255);"&gt;&lt;big style="color: rgb(255, 0, 0);"&gt;&lt;span style="font-weight: bold;"&gt;name
          and save . . &lt;/span&gt;&lt;/big&gt;&lt;/span&gt;&lt;br&gt;
    &lt;span style="color: rgb(128, 191, 255);"&gt;&lt;big style="color: rgb(255, 0, 0);"&gt;&lt;span style="font-weight: bold;"&gt;May be
          used as a windows Background&lt;br&gt;
          &lt;br&gt;

  &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;title&gt;Directions are on The Bottom of the Page&lt;/title&gt;
  &lt;style type="text/css"&gt;
    body &#123;
      background: url("http://madhatterstamps.com/backg.jpg") fixed center no-repeat;
    }
  &lt;/style&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"&gt;
  &lt;meta http-equiv="content-script-type" content="text/javascript"&gt;
  &lt;meta http-equiv="content-style-type" content="text/css"&gt;
  &lt;meta http-equiv="content-language" content="en"&gt;
  &lt;meta http-equiv="pragma" content="no-cache"&gt;
  &lt;meta name="robots" content="INDEX,FOLLOW"&gt;
  &lt;meta name="description"
    content="supplier of rubber stamps, mad hatter, Alice in wonderland, arts and crafts, scrapbooks, ATC suplies,"&gt;
  &lt;meta name="keywords"
    content="collage, rubber stamps, mad hatter, Alice in wonderland, arts and crafts, collage kits, scrapbooks, tea party, coloring book, fun, stamp like mad "&gt;
  &lt;meta name="Copyright" content="Mad Hatter Dot Com"&gt;
  &lt;meta name="Language" content="en-us"&gt;
  &lt;meta name="Publisher" content="Mad Hatter Dot Com"&gt;
  &lt;meta name="Distribution" content="global"&gt;
  &lt;meta name="Rating" content="general"&gt;
  &lt;meta name="author" content="webmaster@madhatterstamps.com"&gt;
  &lt;meta name="revisit-after" content="30 days"&gt;
  &lt;style&gt;
    &lt;!--
    .dragme &#123;
      position: relative;
    }
    --&gt;
  &lt;/style&gt;
  &lt;script language="JavaScript1.2"&gt;
  
    
    var ie = document.all;
    var nn6 = document.getElementById && !document.all;

    var isdrag = false;
    var x, y;
    var dobj;

    function movemouse(e) &#123;
      if (isdrag) &#123;
        dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
        dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
        return false;
      }
    }

    function selectmouse(e) &#123;
      var fobj = nn6 ? e.target : event.srcElement;
      var topelement = nn6 ? "HTML" : "BODY";

      while (fobj.tagName != topelement && fobj.className != "dragme") &#123;
        fobj = nn6 ? fobj.parentNode : fobj.parentElement;
      }

      if (fobj.className == "dragme") &#123;
        isdrag = true;
        dobj = fobj;
        tx = parseInt(dobj.style.left + 0);
        ty = parseInt(dobj.style.top + 0);
        x = nn6 ? e.clientX : event.clientX;
        y = nn6 ? e.clientY : event.clientY;
        document.onmousemove = movemouse;
        return false;
      }
    }

    document.onmousedown = selectmouse;
    document.onmouseup = new Function("isdrag=false");

    //--&gt;
  &lt;/script&gt;
&lt;/head&gt;

&lt;body
  style="background-image: url('static/images/make/scene_back.jpg'); color: rgb(204, 204, 204); background-color: rgb(153, 255, 153);"
  vlink="#551a8b" alink="#ee0000" link="#0000ee"&gt;
  &lt;table style="text-align: left; width: 100&#37;;" border="0" cellpadding="2" cellspacing="2"&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td colspan="2" rowspan="1" style="vertical-align: top;"&gt;
          &lt;p&gt; &lt;/p&gt;


          &lt;img class="dragme" src="static/images/make/Image2.gif"&gt;
          &lt;img class="dragme" style="width: 59px; height: 104px;" src="static/images/make/flower2.gif"&gt;&lt;img
            class="dragme" style="width: 74px; height: 74px;" src="static/images/make/rat.gif"&gt;
          &lt;img class="dragme" style="width: 77px; height: 138px;" src="static/images/make/Tag.gif"&gt;&lt;br&gt;
          &lt;br&gt;
          &lt;img class="dragme" src="static/images/make/naughty.gif"&gt;&lt;br&gt;
          &lt;img class="dragme" style="width: 329px; height: 84px;" src="static/images/make/back7.gif"&gt;
          &lt;img class="dragme" style="width: 42px; height: 75px;" src="static/images/make/flower2.gif"&gt;
          &lt;img class="dragme" style="width: 40px; height: 71px;" src="static/images/make/flower2.gif"&gt;
          &lt;img class="dragme" style="width: 40px; height: 71px;" src="static/images/make/flower2.gif"&gt;
          &lt;img class="dragme" style="width: 99px; height: 89px;" src="static/images/make/butter1.gif"&gt;
          &lt;img class="dragme" style="width: 37px; height: 66px;" src="static/images/make/flower2.gif"&gt;&lt;br&gt;
          &lt;img class="dragme" src="static/images/make/back6.gif"&gt;
          &lt;img class="dragme" style="width: 37px; height: 66px;" src="static/images/make/flower2.gif"&gt;
          &lt;img class="dragme" style="width: 59px; height: 104px;" src="static/images/make/flower2.gif"&gt;
          &lt;img class="dragme" style="width: 68px; height: 120px;" src="static/images/make/flower1.gif"&gt;&lt;br&gt;
          &lt;img class="dragme" style="width: 79px; height: 64px;" src="static/images/make/butter2.gif"&gt;
          &lt;img class="dragme" style="width: 229px; height: 67px;" src="static/images/make/grass.gif"&gt;
          &lt;img class="dragme" style="width: 250px; height: 78px;" src="static/images/make/grass.gif"&gt;
          &lt;img class="dragme" style="width: 81px; height: 120px;" src="static/images/make/treesmall.gif"&gt; &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;img class="dragme" style="width: 37px; height: 66px;" src="static/images/make/flower2.gif"&gt;&lt;img
            class="dragme" style="width: 37px; height: 66px;" src="static/images/make/flower2.gif"&gt;
          &lt;img class="dragme" style="width: 69px; height: 56px;" src="static/images/make/butter2.gif"&gt;
          &lt;img class="dragme" style="width: 99px; height: 89px;" src="static/images/make/butter1.gif"&gt;
          &lt;img class="dragme" style="width: 101px; height: 81px;" src="static/images/make/butter2.gif"&gt;
          &lt;img class="dragme" style="width: 54px; height: 96px;" src="static/images/make/flower2.gif"&gt;
          &lt;img class="dragme" style="width: 176px; height: 179px;" src="static/images/make/ul.png"&gt;
          &lt;img class="dragme" src="ur.gif"&gt;&lt;img class="dragme" style="width: 130px; height: 175px;"
            src="static/images/make/rabbit3.gif"&gt;&lt;br&gt;
          &lt;img class="dragme" style="width: 63px; height: 56px;" src="static/images/make/butter1.gif"&gt;
          &lt;img class="dragme" style="width: 68px; height: 88px;" src="static/images/make/flower1.gif"&gt;
          &lt;img class="dragme" style="width: 42px; height: 75px;" src="static/images/make/flower1.gif"&gt;
          &lt;img class="dragme" style="width: 31px; height: 55px;" src="static/images/make/flower2.gif"&gt;
          &lt;img class="dragme" style="width: 32px; height: 57px;" src="static/images/make/flower1.gif"&gt;
          &lt;img class="dragme" style="width: 71px; height: 102px;" src="static/images/make/flower1.gif"&gt;
          &lt;img class="dragme" style="width: 76px; height: 134px;" src="static/images/make/flower2.gif"&gt;
          &lt;img class="dragme" style="width: 123px; height: 150px;" src="static/images/make/treesmall.gif"&gt;
          &lt;img class="dragme" style="width: 78px; height: 96px;" src="static/images/make/treesmall.gif"&gt;
          &lt;img class="dragme" style="width: 76px; height: 134px;" src="static/images/make/flower2.gif"&gt;&lt;br&gt;
          &nbsp;&lt;img class="dragme" style="width: 213px; height: 241px;" src="static/images/make/shapes2.gif"&gt;
          &lt;img class="dragme" src="static/images/make/lr.gif"&gt;
          &lt;img class="dragme" src="static/images/make/ll.gif"&gt;
        &lt;/td&gt;
        &lt;td style="vertical-align: top;"&gt;
          &lt;img class="dragme" style="width: 314px; height: 425px;" src="static/images/make/treesmall.gif"&gt;&lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;img class="dragme" style="width: 221px; height: 267px;" src="static/images/make/Aliceflamingo.gif"&gt;&lt;br&gt;
          &lt;br&gt;
          &lt;img class="dragme" style="width: 174px; height: 213px;" src="static/images/make/treesmall.gif"&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;br&gt;
  &lt;div style="text-align: center;"&gt;&lt;big&gt;&lt;big&gt;&lt;big&gt;&lt;br style="color: rgb(204, 0, 0); font-weight: bold;"&gt;
        &lt;/big&gt;&lt;span style="color: rgb(0, 0, 0); font-weight: bold;"&gt;All Items
          except for the background may be dragged and dropped&lt;br&gt;
          Items you do not wish to use, may be dragged from the top of the image &lt;br&gt;
          and pulled off the screen on to bottom &lt;br&gt;
          If you scroll down to far just scroll back up to original position&lt;br&gt;
          and all items will be in place.&lt;br&gt;
        &lt;/span&gt;&lt;/big&gt;&lt;/big&gt;&lt;span style="color: rgb(128, 191, 255);"&gt;&lt;big style="color: rgb(255, 0, 0);"&gt;&lt;span
          style="font-weight: bold;"&gt;With
          Microsoft Explore you may use
          full page viewing . . &lt;/span&gt;&lt;/big&gt;&lt;/span&gt;&lt;br style="font-weight: bold;"&gt;
    &lt;span style="color: rgb(128, 191, 255);"&gt;&lt;big style="color: rgb(255, 0, 0);"&gt;&lt;span style="font-weight: bold;"&gt;Create
          your picture&lt;/span&gt;&lt;/big&gt;&lt;/span&gt;&lt;br style="font-weight: bold;"&gt;
    &lt;span style="color: rgb(128, 191, 255);"&gt;&lt;big style="color: rgb(255, 0, 0);"&gt;&lt;span style="font-weight: bold;"&gt;Press
          Print Screen &lt;/span&gt;&lt;/big&gt;&lt;/span&gt;&lt;br style="font-weight: bold;"&gt;
    &lt;span style="color: rgb(128, 191, 255);"&gt;&lt;big style="color: rgb(255, 0, 0);"&gt;&lt;span style="font-weight: bold;"&gt;Paste
          in Paint Shop &lt;/span&gt;&lt;/big&gt;&lt;/span&gt;&lt;br style="font-weight: bold;"&gt;
    &lt;span style="color: rgb(128, 191, 255);"&gt;&lt;big style="color: rgb(255, 0, 0);"&gt;&lt;span style="font-weight: bold;"&gt;name
          and save . . &lt;/span&gt;&lt;/big&gt;&lt;/span&gt;&lt;br&gt;
    &lt;span style="color: rgb(128, 191, 255);"&gt;&lt;big style="color: rgb(255, 0, 0);"&gt;&lt;span style="font-weight: bold;"&gt;May be
          used as a windows Background&lt;br&gt;
          &lt;br&gt;

  &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Large Video Page&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Large Video Page&lt;/h1&gt;
    &lt;a style="color: brown;font-size: large;" href="&#123;&#123; url_for('index') }}"&gt;HOME&lt;/a&gt;&lt;br /&gt;
    &lt;video controls&gt;
        &lt;source src="&#123;&#123; url_for('static', filename='assets/NearDone.mp4') }}" type="video/mp4"&gt;
        Your browser does not support the video tag.
    &lt;/video&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!-- aigeneration_links.html--&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;AI Info and Generation Links&lt;/title&gt;
    &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/flask.css') }}"&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/base.css') }}"&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h1&gt;AI Info and Generation Links&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="columns"&gt;
            &lt;div class="column left"&gt;
                &lt;h3&gt;Links&lt;/h3&gt;&lt;br /&gt;
                &lt;li&gt; &lt;a href="/home/jack/Desktop/misc/UsingConvert.html" target="_blank"&gt;UsingConvert&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt; &lt;a href="https://dreamlike.art/create" target="_blank"&gt;GOOD-dreamlike.art/create&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt; &lt;a href="/home/jack/Desktop/misc/color.html" target="_blank"&gt;ColorPicker&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt; &lt;a href=" https://www.reddit.com/" target="_blank"&gt;Reddit.com/ &lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://bhaasha.iiit.ac.in/lipsync/" target="_blank"&gt;lipsync/&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://www.google.com" target="_blank"&gt;Google&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://www.facebook.com" target="_blank"&gt;Facebook&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://www.youtube.com" target="_blank"&gt;Youtube&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://app.blasteronline.com/speechelo" target="_blank"&gt;Speechelo&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://lexica.art/" target="_blank"&gt;https://lexica.art/&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://www.mage.space/explore" target="_blank"&gt;https://www.mage.space/explore&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://www.tiktok.com/foryou?is_copy_url=1&is_from_webapp=v1"
                        target="_blank"&gt;tiktok.com&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://www.tiktok.com/@insectsmatters" target="_blank"&gt;@insectsmatters&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://www.tiger-algebra.com/drill/5x~5-1080x~2/" target="_blank"&gt;tiger-algebra.com&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="http://217.21.78.160/" target="_blank"&gt;http://217.21.78.160/&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://openclipart.org/" target="_blank"&gt;penclipart.org&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://www.edureka.co/community/" target="_blank"&gt;edureka.co/community&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://cdnlogo.com/svg-editor/" target="_blank"&gt;https://cdnlogo.com/svg-editor/&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://pollinations.ai/" target="_blank"&gt;https://pollinations.ai/&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="http://www.frontiernet.net/~eugene.ressler/" target="_blank"&gt;frontiernet.net&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://www.pinterest.ph/grahamwallwork/julian-jordanov/"
                        target="_blank"&gt;julian-jordanov&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://miktex.org/" target="_blank"&gt;miktex.org/&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://huggingface.co/spaces/stabilityai/stable-diffusion"
                        target="_blank"&gt;stabilityai/stable-diffusion&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://dreamlike.art/" target="_blank"&gt;GOOD - currently down for maint&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://trinket.io/python/f7ad7f9864" target="_blank"&gt;trinket.io/python&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://www.pythonsandbox.com/turtle" target="_blank"&gt;pythonsandbox.com/turtle&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a
                        href="https://sites.google.com/view/liviatheodoramidjourney/home?pli=1"&gt;liviatheodoramidjourney&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="https://replicate.com/methexis-inc/img2prompt"&gt;img2prompt&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://imageeditor.app/?new" target="_blank"&gt; Imageeditor&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://huggingface.co/prompthero/poolsuite-diffusion"
                        target="_blank"&gt;poolsuite-diffusion&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://huggingface.co/prompthero/openjourney" target="_blank"&gt;prompthero/openjourney&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="https://hotpot.ai/" target="_blank"&gt; https://hotpot.ai/&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://hotpot.ai/art-generator" target="_blank"&gt; https://hotpot.ai/art-generator&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://drive.internxt.com/app" target="_blank"&gt; https://drive.internxt.com/app&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://openlibrary.org/" target="_blank"&gt;openlibrary.org/&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://civitai.com/" target="_blank"&gt;civitai.com/ &lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://rentry.org/sdhassan#merged-models" target="_blank"&gt;rentry.org/sdhassan&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://civitai.com/models/2661/uber-realistic-porn-merge-urpm"
                        target="_blank"&gt;realistic-porn-merge-urpm&lt;/a&gt;&lt;/li&gt;
            &lt;/div&gt;
            &lt;div class="column"&gt;
                &lt;h3&gt;Links&lt;/h3&gt;&lt;br /&gt;
                &lt;li&gt;&lt;a href="https://huggingface.co/prompthero/openjourney"
                        target="_blank"&gt;huggingface-prompthero/openjourney&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://playgroundai.com/search?q=princess" target="_blank"&gt;playgroundai.com&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://openart.ai/" target="_blank"&gt;openart.ai/&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://lexica.art/?q=004602d4-b0ed-4697-8cb3-526b3e918217" target="_blank"&gt;lexica.art&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="https://ideogram.ai/" target="_blank"&gt;ideogram.ai&lt;/a&gt;&lt;/li&gt;&lt;br /&gt;
                &lt;li&gt;&lt;a href="https://app.prodia.com/#/" target="_blank"&gt;FREE app.prodia.com/#/&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://huggingface.co/ProGamerGov/Min-Illust-Background-Diffusion?target="
                        _blank"&gt;huggingface Background&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://huggingface.co/spaces/microsoft/Promptist" target="_blank"&gt;microsoft/Promptist&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="https://huggingface.co/wavymulder/portraitplus"
                        target="_blank"&gt;huggingface.co/wavymulder/portraitplus&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://huggingface.co/johnslegers/epic-diffusion"
                        target="_blank"&gt;johnslegers/epic-diffusion&lt;/a&gt; &lt;/li&gt;
                &lt;li&gt;&lt;a href="https://huggingface.co/darkstorm2150/Protogen_Infinity_Official_Release"
                        target="_blank"&gt;huggingface Protogen_Infinity&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://www.upscale.media/upload" target="_blank"&gt;Free - upscaler&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://www.coingecko.com/en/coins/lbry-credits" target="_blank"&gt;lbry-credits&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://odysee.com/" target="_blank"&gt;odysee.com&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://dreamlike.art/create" target="_blank"&gt;https://dreamlike.art/create&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://huggingface.co/spaces/microsoft/Promptist" target="_blank"&gt;microsoft/Promptist&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="https://huggingface.co/prompthero/openjourney" target="_blank"&gt;VERY
                        GOODprompthero/openjourney&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://developers.google.com/youtube/v3/quickstart/python"
                        target="_blank"&gt;google/youtube/v3/developers&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://huggingface.co/CompVis/stable-diffusion-v1-4?text=mdjrny-v4+style+scary&#37;2C+dirty&#37;2C+paint+peeling&#37;2C+muddy&#37;2C+oily&#37;2C+dystopian++gypsy+princess+centered+face&#37;2C+portrait&#37;2C+style+of+H.+G.+Giger"
                        target="_blank"&gt;stable-diffusion-v1-4 Giger&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://beta.elevenlabs.io/voice-lab" target="_blank"&gt;elevenlabs.io/voice-lab&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://studio.d-id.com/" target="_blank"&gt;https://studio.d-id.com/&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://linktr.ee/ai_studio" target="_blank"&gt;ai_studio&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://paraphrasingtool.ai/" target="_blank"&gt;paraphrasingtool.ai&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://huggingface.co/coreco/seek.art_MEGA"
                        target="_blank"&gt;https://huggingface.co/coreco/seek.art_MEGA&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://bhaasha.iiit.ac.in/lipsync/" target="_blank"&gt;lipsync/&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://y2mate.guru/y2mate2" target="_blank"&gt;Download Unlisted videos&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://app.leonardo.ai/ai-generations" target="_blank"&gt;leonardo.ai/ai-generations&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://huggingface.co/prompthero/openjourney?text=&#37;27mdjrny-v4+style&#37;27++A+wide+angle+colored+line+art+drawing+of+a+beautiful+female+half+human+cyborg+in+a+futuristic+25th+century+city+street&#37;2C++highly+detailed&#37;2C+psytrance+art+style&#37;2C+golden+bikini&#37;2C+back+alley+shot&#37;2C+wide+shot&#37;2C+diagonal+view+of+subject&#37;2C+highly+detailed&#37;2C+monochromatic&#37;2C+graphic+novel&#37;2C+steampunk"
                        target="_blank"&gt;graphic+novel&#37;2C+steampunk&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://huggingface.co/spaces/phenomenon1981/Dreamlikeart-Anime-1.0"
                        target="_blank"&gt;Dreamlikeart-Anime&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://podcast.adobe.com/enhance" target="_blank"&gt;https://podcast.adobe.com/enhance&lt;/a&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="https://huggingface.co/spaces/Daniton/MidJourney"
                        target="_blank"&gt;huggingface/Daniton/MidJourney&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://app.runwayml.com/video-tools/teams/madhatterstamps/ai-tools/gen-1"
                        target="_blank"&gt;https://app.runwayml.com/video-tools/teams/madhatterstamps/ai-tools/gen-1&lt;/a&gt;
                &lt;/li&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href="https://stackoverflow.com/questions/52811041/how-can-i-use-the-same-route-for-multiple-functions-in-flask"
                        target="_blank"&gt;@app.route('/chopsticks/') @app.route('/chopsticks/&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://clipdrop.co/stable-diffusion"
                        target="_blank"&gt;https://clipdrop.co/stable-diffusion&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://www.turing.com/kb/build-flask-routes-in-python"
                        target="_blank"&gt;build-flask-routes-in-python&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://www.turing.com/kb/build-flask-routes-in-python" target="_blank"&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="file:///mnt/HDD500/0WORKSHOP-with-NOTEBOOKS/chat/chat/chat.html"
                        target="_blank"&gt;chat.html&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://www.digitalocean.com/community/tutorials/how-to-structure-a-large-flask-application-with-flask-blueprints-and-flask-sqlalchemy"
                        target="_blank"&gt;blueprints-and-flask-sqlalchemy&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://ask.replit.com/t/using-a-function-to-route-several-pages-in-flask/15563"
                        target="_blank"&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://huggingface.co/prompthero/openjourney?text=&#37;27mdjrny-v4+style&#37;27+A+beautiful+++space+creature&#37;2C+half+alien&#37;2Chalf+robot&#37;2C+cyborg+&#37;2C+facing+forward+towards+camera&#37;2Cwith+a+vibrant+Native+American+carnival+costume&#37;2C+her+face+painted+with+intricate+tribal+designs."
                        target="_blank"&gt;half+robot&#37;2C+cyborg&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://tedboy.github.io/flask/interface_api.useful_funcs.html"
                        target="_blank"&gt;api.useful_funcs.html&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://xkcd.com/50/" target="_blank"&gt;https://xkcd.com/50/&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="https://openart.ai/create?username=neanderthal_darling_28&prompt=Monster&#37;2520has&#37;2520a&#37;2520lot&#37;2520of&#37;2520red&#37;2520shades&#37;2520and&#37;2520black&#37;2520colors&#37;2C&#37;2520there&#37;2520is&#37;2520a&#37;2520green&#37;2520leafy&#37;2520forest&#37;2520background&#37;2520terrifying&#37;2520mutant&#37;2520goblin&#37;2520combined&#37;2520with&#37;2520large&#37;2520fat&#37;2520hissing&#37;2520cockroach&#37;2C&#37;2520gothic&#37;2520art&#37;2C&#37;2520popping&#37;2520color&#37;2C&#37;2520detailed&#37;2C&#37;2520eerie&#37;2C&#37;2520emotional&#37;2C&#37;2520gothic&#37;2C&#37;2520highly&#37;2520detailed&#37;2C&#37;2520incredibly&#37;2520sharp&#37;2520focus&#37;2C&#37;2520Artstation&#37;2C&#37;2520deviantart&#37;2C&#37;2520artgem&#37;2C&#37;2520insane&#37;2520detail&#37;2C&#37;2520intense&#37;2520color&#37;2C&#37;2520vibrant&#37;2520cartoon&#37;2520art&#37;2C&#37;2520award-winning&#37;2520art&#37;2C&#37;2520French&#37;2520comic&#37;2520art&#37;2C&#37;25208k&#37;2C&#37;2520super&#37;2520precise&#37;2520detail&#37;2C&#37;2520golden&#37;2520ratio&#37;2C&#37;2520in&#37;2520the&#37;2520style&#37;2520of&#37;2520Heavy&#37;2520Metal&#37;2520Comics&ai_model=runwayml&#37;2Fstable-diffusion-v1-5&cfg_scale=7&steps=25&width=512&height=512&sampler=dpmsolver&#37;2B&#37;2B&negative_prompt=&seed=170386247"
                        target="_blank"&gt;openart.ai/&lt;/a&gt;&lt;/li&gt;
            &lt;/div&gt;


        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;List of Routes&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;List of Routes&lt;/h1&gt;
    &lt;ul&gt;
        &#123;&#37; for function in functions &#37;}
        &lt;li&gt;&#123;&#123; function }}&lt;/li&gt;
        &#123;&#37; endfor &#37;}
    &lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Log Viewer&lt;/title&gt;

    &lt;style&gt;
        pre &#123;
            white-space: pre-wrap;
        }
    &lt;/style&gt;


&lt;/head&gt;
&lt;body&gt;
    &lt;pre&gt;&#123;&#123; log_content }}&lt;/pre&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;title&gt;Animated GIF&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;img src="&#123;&#123; gif_filename }}" alt="Animated GIF"&gt;
&lt;/body&gt;
&lt;/html&gt;&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Text Entry&lt;/title&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/style.css') }}"
    /&gt;
  &lt;/head&gt;

  &lt;body&gt;
    &lt;h1&gt;Enter Text&lt;/h1&gt;
    &lt;form method="POST" action="/make_text"&gt;
      &lt;textarea name="text" rows="10" cols="50"&gt;&lt;/textarea&gt;
      &lt;br /&gt;
      &lt;input type="submit" value="Save" /&gt;
    &lt;/form&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="&#123;&#123; url_for('index') }}"&gt;Home (index)&lt;/a&gt;&lt;/li&gt;
      &lt;br /&gt;
      &lt;li&gt;&lt;a href="&#123;&#123; url_for('view_text') }}"&gt;view_text Text Files&lt;/a&gt;&lt;/li&gt;
      &lt;br /&gt;
    &lt;/ul&gt;
  &lt;/body&gt;
&lt;/html&gt;
&lt;!-- index.html--&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Misc_Links&lt;/title&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/flask.css') }}"&gt;
    &lt;style&gt;
        html,
        body &#123;
            margin: 0;
            padding: 1&#37;;
            height: 100&#37;;
            font-family: Arial, sans-serif;
        }

        body &#123;
            background-image: url('../static/assets/MemMaker_background.png');
            background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
        }

        video &#123;
            margin: 10px, auto;
            width: 250px;
            height: auto;
        }

        .wrapper &#123;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;

        }

        .header &#123;
            width: 100&#37;;
            padding: 20px;
            text-align: center;
        }

        .columns &#123;
            display: flex;
            width: 80&#37;;
            margin-top: 20px;
        }

        .column &#123;
            padding: 20px;
            margin: 2px,2px,2px,2px;
            box-sizing: border-box;
        }

        .column.left &#123;
            width: 40&#37;;
            
            border: 1px solid #000;
        }

        .column.right &#123;
            width: 40&#37;;
              border: 1px solid #000;
            text-align: center;

        }

        .column.right video &#123;
            max-width: 100&#37;;
            height: auto;
        }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h1&gt;Misc_Links&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="columns"&gt;
            &lt;div class="column left"&gt;
                &lt;a href="/capture_overlay_verify"&gt;Start Capture Regular&lt;/a&gt;&lt;br /&gt;
                &lt;a href="/capture_overlay_short"&gt;Start Capture Short&lt;/a&gt;
                &lt;a href="&#123;&#123; url_for('create_text') }}"&gt;Create Text Image&lt;/a&gt;
                    &lt;a href="&#123;&#123; url_for('select_by_id_form') }}"&gt;Select by ID Form&lt;/a&gt;&lt;br /&gt;
                    &lt;a href="&#123;&#123; url_for('search_by_rowid') }}"&gt;Search by Row ID&lt;/a&gt;&lt;br /&gt;
                    &lt;a href="&#123;&#123; url_for('search_database') }}"&gt;Search the Database&lt;/a&gt;&lt;br /&gt;
                    &lt;a href="&#123;&#123; url_for('edit_data_page') }}"&gt;Edit Data&lt;/a&gt;&lt;br /&gt;
                    &lt;a href="&#123;&#123; url_for('insert_data') }}"&gt;Insert Data&lt;/a&gt;&lt;br /&gt;
                    &lt;a href="&#123;&#123; url_for('get_rowid_form') }}"&gt;Enter Row ID to Edit&lt;/a&gt;&lt;br /&gt;

                &lt;a href="&#123;&#123; url_for('get_gallery') }}"&gt;View Images&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('view_thumbs') }}"&gt;View Thumbnails&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('upload_file') }}"&gt;Upload Image&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('flask_info') }}"&gt;Video&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('add_text') }}"&gt;Add text to chat.txt&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('search_txt') }}"&gt;Search chat.txt&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('blend_pil') }}"&gt;upload and blend images.&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('add_border') }}"&gt;Add a border to an image.&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('process_images') }}"&gt;Process Images With Mask&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('text_mp3') }}"&gt;Create an mp3 from aText Entry&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('view_log') }}"&gt;View Log/app.log&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('index') }}"&gt;Home (index)&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('format_file') }}"&gt;Format Text Files&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('view_text') }}"&gt;view_text Text Files&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('generate_video') }}"&gt;Create an mp4 from video_resources&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('generate_video2') }}"&gt;Create an mp4 from Uploads&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('generate_video3') }}"&gt;Choose A directory to create video&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('image_directories') }}"&gt;Choose Image directories&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('select_playmp3') }}"&gt;Select and play mp3 from audio_mp3/&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('make_animation') }}"&gt;Create an Animated Gif (20 images @ 1 per second.)&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('build_stackedvids') }}"&gt;Video Stacked on Images&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('build_stackedvid') }}"&gt;Two Video Stacked&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('title_page') }}"&gt;Create a title Page&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('add_title') }}"&gt;Add a Title to a Video&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('add_effects') }}"&gt;Add effects to a Video&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('choose_dir') }}"&gt;Choose a directory&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('indexA') }}"&gt;Working With Text&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('app_utilities') }}"&gt;Application Utilities&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('image_processing') }}"&gt;Image Processing Links&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('format_file') }}"&gt;Format Text Files&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('view_text') }}"&gt;View Text Files&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_file') }}"&gt;Edit File&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_formatted') }}"&gt;Edit Formatted Text&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('app_utilities') }}"&gt;Application Utilities&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('image_processing') }}"&gt;Image Processing Links&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('format_file') }}"&gt;Format Text Files&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('view_text') }}"&gt;View Text Files&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_file') }}"&gt;Edit File&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_formatted') }}"&gt;Edit Formatted Text&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('index') }}"&gt;Home (index)&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('format_file') }}"&gt;Format Text Files&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('view_text') }}"&gt;view_text Text Files&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('image_stuff') }}"&gt;Comic Book Experiment&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_description') }}"&gt;Edit Description&lt;/a&gt;&lt;br /&gt;&lt;br&gt;
                &lt;a href="&#123;&#123; url_for('edit_description') }}"&gt;Edit Description&lt;/a&gt;&lt;br /&gt;
            &lt;/div&gt;
            &lt;div class="column right"&gt;
                &lt;a href="&#123;&#123; url_for('mk_text') }}"&gt;Create a Text File&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('format_file') }}"&gt;Format Text Files&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('view_text') }}"&gt;View Text Files&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_file') }}"&gt;Edit File&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_formatted') }}"&gt;Edit Formatted Text&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('mk_background') }}"&gt;Creat Video From Thumbnail Cache&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('add_border') }}"&gt;Add a border to an image.&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('get_gallery') }}"&gt;View Images&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('view_thumbs') }}"&gt;View Thumbnails&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('upload_file') }}"&gt;Upload Image&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('flask_info') }}"&gt;Video&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('add_text') }}"&gt;Add text to chat.txt&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('search') }}"&gt;Search chat.txt&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('blend_pil') }}"&gt;upload and blend images.&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('add_border') }}"&gt;Add a border to an image.&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('process_images') }}"&gt;Process Images With Mask&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('text_mp3') }}"&gt;Create an mp3 from aText Entry&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('generate_video') }}"&gt;Create an mp4 from video_resources&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('generate_video2') }}"&gt;Create an mp4 from Uploads&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('image_directories') }}"&gt;Choose Image directories&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('select_playmp3') }}"&gt;Select and play mp3 from audio_mp3/&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('make_animation') }}"&gt;Create an Animated Gif (20 images @ 1 per second.)&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('build_stackedvids') }}"&gt;Video Stacked on Images&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('build_stackedvid') }}"&gt;Two Video Stacked&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('title_page') }}"&gt;Create a title Page&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('add_title') }}"&gt;Add a Title to a Video&lt;/a&gt;&lt;br /&gt;
                    &lt;form action="&#123;&#123; url_for('clean_images_route') }}" method="POST"&gt;
                        &lt;button type="submit"&gt;Clean Images&lt;/button&gt;
                    &lt;/form&gt;
                    &lt;form action="/search" method="GET"&gt;
                        &lt;label for="search-term"&gt;Search:&lt;/label&gt;
                        &lt;input type="text" id="search-term" name="q"&gt;
                        &lt;button type="submit"&gt;Search&lt;/button&gt;
                    &lt;/form&gt;

                    &lt;a href="https://www.youtube.com/@totallyinsaneart3345" target="_blank "&gt;Totally Insane
                        Art&lt;/a&gt;&lt;br /&gt;
                    &lt;a href="https://www.youtube.com/@JackNorthrup" target="_blank "&gt;Jack Northrup&lt;/a&gt;&lt;br /&gt;
                    &lt;/video&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Blend Images&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Blend Images&lt;/h1&gt;

  &lt;video width="480" height="auto" controls&gt;
    &lt;source src="&#123;&#123; video }}" type="video/mp4"&gt;
    Your browser does not support the video tag.
  &lt;/video&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
  &lt;video width="480" height="auto" controls&gt;
    &lt;source src="static/animate/TEMP5.mp4" type="video/mp4"&gt;
    Your browser does not support the video tag.
  &lt;/video&gt;&lt;br /&gt;
  &lt;video width="480" height="auto" controls&gt;
    &lt;source src="static/animate/TEMP5.webm" type="video/webp"&gt;
    Your browser does not support the video tag.
  &lt;/video&gt;&lt;br /&gt;
  
&lt;/html&gt;&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Blend Images&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Blend Images&lt;/h1&gt;

  &lt;video width="480" height="auto" controls&gt;
    &lt;source src="&#123;&#123; video }}" type="video/mp4"&gt;
    Your browser does not support the video tag.
  &lt;/video&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
  &lt;video width="480" height="auto" controls&gt;
    &lt;source src="static/animate/TEMP5.mp4" type="video/mp4"&gt;
    Your browser does not support the video tag.
  &lt;/video&gt;&lt;br /&gt;
  &lt;video width="480" height="auto" controls&gt;
    &lt;source src="static/animate/TEMP5.webm" type="video/webp"&gt;
    Your browser does not support the video tag.
  &lt;/video&gt;&lt;br /&gt;
  
&lt;/html&gt;&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;mkmoz&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Generated Thumbnail&lt;/h1&gt;
    &lt;img src="&#123;&#123; url_for('static', filename=filename) }}" alt="Thumbnail Image"&gt;
&lt;/body&gt;
&lt;/html&gt;

&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Text Entry&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;h1&gt;Enter Text&lt;/h1&gt;
    &lt;form method="POST" action="/mk_text"&gt;
        &lt;textarea name="text" rows="10" cols="50"&gt;&lt;/textarea&gt;
        &lt;br&gt;
        &lt;input type="submit" value="Save"&gt;
    &lt;/form&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('index') }}"&gt;Home (index)&lt;/a&gt;&lt;/li&gt;&lt;br /&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('format_file') }}"&gt;Format Text Files&lt;/a&gt;&lt;/li&gt;&lt;br /&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('view_text') }}"&gt;view_text Text Files&lt;/a&gt;&lt;/li&gt;&lt;br /&gt;
    &lt;/ul&gt;
&lt;/body&gt;

&lt;/html&gt;&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Make Background&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Generated Thumbnail&lt;/h1&gt;
    &lt;img src="&#123;&#123; url_for('static', filename=filename) }}" alt="Thumbnail Image"&gt;
    &lt;hr&gt;
         &lt;video width="512" height="auto" controls&gt;
        &lt;source src="&#123;&#123; url_for('static', filename=video) }}" type="video/mp4"&gt;
    &lt;/video&gt;&lt;br /&gt;
       
&lt;/body&gt;
&lt;/html&gt;&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Crop Images&lt;/title&gt;
    &lt;style&gt;
        html,
        body &#123;
            margin: 0;
            padding: 1&#37;;
            height: 100&#37;;
            font-family: Arial, sans-serif;
        }

        body &#123;
            background-image: url('../static/assets/MemMaker_background.png');
            background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
        }
        video &#123;
            margin: 10px, auto;
            width: 200px;
            height: auto;
        }

          .wrapper &#123;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;

        }

        .header &#123;
            width: 100&#37;;
            padding: 20px;
            text-align: center;
        }

        .columns &#123;
            display: flex;
            width: 80&#37;;
            margin-top: 20px;
        }

        .column &#123;
            padding: 20px;
            box-sizing: border-box;
        }

        .column.left &#123;
            width: 30&#37;;
            border:    1px solid #000;
        }

        .column.right &#123;
        margin: 0 auto; /* Center horizontally */
        width: 60&#37;;
        border: 1px solid #000;
        text-align: center; /* Center video vertically */
    }

    .column.right video &#123;
        max-width: 100&#37;;
        height: auto;
    }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h1&gt;Crop Images&lt;/h1&gt;
            &lt;a href="&#123;&#123; url_for('index') }}"&gt;HOME&lt;/a&gt;&lt;br /&gt;
        &lt;/div&gt;
        &lt;div class="columns"&gt;
            &lt;div class="column left"&gt;

                &lt;h3&gt;Create Text&lt;/h3&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('app_utilities') }}"&gt;Application Utilities&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('image_processing') }}"&gt;Image Processing Links&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('format_file') }}"&gt;Format Text Files&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('view_text') }}"&gt;View Text Files&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_file') }}"&gt;Edit File&lt;/a&gt;&lt;br /&gt;


                &lt;a href="&#123;&#123; url_for('edit_description') }}"&gt;Edit Description&lt;/a&gt;&lt;br /&gt;
                 &lt;video controls&gt;
                    &lt;source src="&#123;&#123; video }}" type="video/mp4"&gt;
                    Your browser does not support the video tag.
                &lt;/video&gt;
            &lt;/div&gt;
            &lt;div class="column right"&gt;
                
   &lt;h2&gt;Image Cropping&lt;/h2&gt;
    &lt;form method="POST" enctype="multipart/form-data" action="&#123;&#123; url_for('crop') }}"&gt;
        &lt;input type="file" name="image"&gt;
        &lt;input type="submit" value="Upload"&gt;
    &lt;/form&gt;

    &#123;&#37; if image_path &#37;}
    &lt;h2&gt;Cropped Image Preview&lt;/h2&gt;
    &lt;img src="&#123;&#123; image_path }}" alt="Cropped Image"&gt;
    &lt;form method="POST" action="&#123;&#123; url_for('crop_and_save') }}"&gt;
        &lt;input type="hidden" name="image_path" value="&#123;&#123; image_path }}"&gt;
        &lt;label for="x"&gt;X Coordinate: &lt;/label&gt;
        &lt;input type="number" name="x" required&gt;&lt;br&gt;
        &lt;label for="y"&gt;Y Coordinate: &lt;/label&gt;
        &lt;input type="number" name="y" required&gt;&lt;br&gt;
        &lt;label for="width"&gt;Width: &lt;/label&gt;
        &lt;input type="number" name="width" required&gt;&lt;br&gt;
        &lt;label for="height"&gt;Height: &lt;/label&gt;
        &lt;input type="number" name="height" required&gt;&lt;br&gt;
        &lt;input type="submit" value="Crop and Save"&gt;
    &lt;/form&gt;
    &lt;form method="POST" action="&#123;&#123; url_for('move_cropped') }}"&gt;

        &lt;input type="submit" value="Move Cropped Image"&gt;
    &lt;/form&gt;

    &#123;&#37; endif &#37;}
&lt;br/&gt; &lt;img src="&#123;&#123;mv_img}}"&gt;
               
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Select and Play MP3&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Select and Play MP3&lt;/h1&gt;
    &lt;li&gt;&lt;a href="&#123;&#123; url_for('index') }}"&gt;HOME&lt;/a&gt;&lt;/li&gt;
    
    &lt;form method="POST"&gt;
        &lt;label for="selected_directory"&gt;Select a directory:&lt;/label&gt;
        &lt;select name="selected_directory" id="selected_directory"&gt;
            &#123;&#37; for directory in directories &#37;}
                &lt;option value="&#123;&#123; directory }}" &#123;&#37; if selected_directory == directory &#37;}selected&#123;&#37; endif &#37;}&gt;&#123;&#123; directory }}&lt;/option&gt;
            &#123;&#37; endfor &#37;}
        &lt;/select&gt;
        &lt;button type="submit"&gt;Select Directory&lt;/button&gt;
    &lt;/form&gt;

    &#123;&#37; if selected_directory &#37;}
        &lt;form method="POST"&gt;
            &lt;label for="mp3_file"&gt;Choose an MP3 file:&lt;/label&gt;
            &lt;select name="mp3_file" id="mp3_file"&gt;
                &lt;option value=""&gt;-- Select MP3 File --&lt;/option&gt;
                &#123;&#37; for mp3 in mp3_files &#37;}
                    &lt;option value="&#123;&#123; mp3 }}"&gt;&#123;&#123; mp3 }}&lt;/option&gt;
                &#123;&#37; endfor &#37;}
            &lt;/select&gt;
            &lt;button type="submit"&gt;Play&lt;/button&gt;
        &lt;/form&gt;
    &#123;&#37; endif &#37;}

    &lt;audio controls id="audio-player"&gt;
        &lt;source src="" type="audio/mpeg"&gt;
    &lt;/audio&gt;

    &lt;script&gt;
        const mp3Select = document.getElementById('mp3_file');
        const selectedDirectory = document.getElementById('selected_directory');
        const audioPlayer = document.getElementById('audio-player');

        mp3Select.addEventListener('change', function() &#123;
            const selectedFile = mp3Select.value;
            const selectedDir = selectedDirectory.value;
            const filePath = selectedDir + selectedFile;
            audioPlayer.src = filePath;
            audioPlayer.load(); // Load the new source
            audioPlayer.play(); // Start playing
        });
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;MP4 to Image Converter&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;MP4 to Image Converter&lt;/h1&gt;
    &lt;form method="POST" enctype="multipart/form-data"&gt;
        &lt;label for="mp4_file"&gt;Select an MP4 file:&lt;/label&gt;
        &lt;input type="file" name="mp4_file" id="mp4_file" accept=".mp4" required&gt;
        &lt;br&gt;
        &lt;label for="action"&gt;Choose an action:&lt;/label&gt;
        &lt;select name="action" id="action" required&gt;
            &lt;option value="save"&gt;Save Frames as Images&lt;/option&gt;
            &lt;option value="delete"&gt;Delete MP4 File&lt;/option&gt;
        &lt;/select&gt;
        &lt;br&gt;
        &lt;input type="submit" value="Submit"&gt;
    &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;


&lt;a href="https://freefrontend.com/javascript-background-effects/"&gt;javascript-background-effects&lt;/a  &gt;
    &lt;a href="https://www.sliderrevolution.com/resources/css-animated-background/"&gt;more background-effects&lt;/a  &gt;
&lt;a href="https://codepen.io/acauamontiel/pen/abpLEG"&gt;more background-codepen&lt;/a  &gt;
@app.route('/preview')
def preview():
    # HTML content to be displayed
    html_content = "&lt;h2&lt;This is a dynamic HTML content&lt;/h2&lt;"
    html_content += "&lt;p&lt;It can include various elements, such as paragraphs, headings, lists, etc.&lt;/p&lt;"

    return render_template('preview.html', html_content=html_content)


&lt;pre&gt;
    
    User
@app.route('/convert', methods=['GET', 'POST'])
def convert():
    if request.method == 'POST':
        try:
            audio_file = request.files['audio_file']
            audio_file_path = f'static/audio_mp3/&#123;audio_file.filename}'  # Path for audio file
            audio_file.save(audio_file_path)  # Save the audio file to the specified location

            formatted_text_file = request.files['formatted_text_file']
            formatted_text_file_path = f'static/formatted_text/&#123;formatted_text_file.filename}'  # Path for formatted text file
            formatted_text_file.save(formatted_text_file_path)  # Save the formatted text file to the specified location

            output_filename = datetime.datetime.now().strftime('&#37;Y-&#37;m-&#37;d') + '.mp4'
            output_path = 'static/videos/' + output_filename

            command = [
    'ffmpeg',
    '-i', audio_file_path,
    '-f', 'lavfi',
    '-i', f"color='#470000'@0.0:s=1280x720:rate=60,format=rgba",
    '-vf', f"drawtext=textfile='&#123;os.path.abspath(formatted_text_file_path)}':y=(h-120)-12*t:x=550:fontcolor=orange:fontfile=/home/jack/Arimo-Regular.ttf:fontsize=26",
    '-t', '26',
    '-y', output_path
]
ChatGPT

The code you provided seems to be a part of a Flask application that handles a route called '/convert'. This route accepts both GET and POST requests. Let me explain what this code does step by step:

    It checks if the request method is POST:

python
if request.method == 'POST':

    It retrieves the audio file and saves it to a specified location:

python
audio_file = request.files['audio_file']
audio_file_path = f'static/audio_mp3/&#123;audio_file.filename}'
audio_file.save(audio_file_path)

    It retrieves the formatted text file and saves it to a specified location:

python
formatted_text_file = request.files['formatted_text_file']
formatted_text_file_path = f'static/formatted_text/&#123;formatted_text_file.filename}'
formatted_text_file.save(formatted_text_file_path)

    It generates an output filename based on the current date and time and sets the output path:

python
output_filename = datetime.datetime.now().strftime('&#37;Y-&#37;m-&#37;d') + '.mp4'
output_path = 'static/videos/' + output_filename

    It constructs a command to be executed by ffmpeg, a command-line tool for handling multimedia:

python
command = [
    'ffmpeg',
    '-i', audio_file_path,
    '-f', 'lavfi',
    '-i', f"color='#470000'@0.0:s=1280x720:rate=60,format=rgba",
    '-vf', f"drawtext=textfile='&#123;os.path.abspath(formatted_text_file_path)}':y=(h-120)-12*t:x=550:fontcolor=orange:fontfile=/home/jack/Arimo-Regular.ttf:fontsize=26",
    '-t', '26',
    '-y', output_path
]

The command includes options and arguments for ffmpeg to perform the following operations:

    -i audio_file_path: Specifies the input audio file.
    -f lavfi -i color=...: Generates a colored background for the video.
    -vf drawtext=...: Adds text to the video using the specified font, font size, and color. The text is read from the formatted text file.
    -t 26: Sets the duration of the output video to 26 seconds.
    -y output_path: Specifies the output path and filename for the video.

The resulting command will be executed by ffmpeg to convert the audio and formatted text into a video file at the specified output path.

Please note that the code provided is incomplete, and there might be additional Flask routes and functionality missing for a complete application.
User
i get  File "appp", line 36
    audio_file_path = f'static/audio_mp3/&#123;audio_file.filename}'  # Path for audio file
                                                              ^
SyntaxError: invalid syntax
ChatGPT

The SyntaxError you're encountering is pointing to the line where you are trying to format the string using an f-string. This error typically occurs when using f-strings in Python versions earlier than Python 3.6.

To resolve this issue, you can modify the string formatting to use the str.format() method instead of an f-string. Here's the modified code snippet:

python
audio_file_path = 'static/audio_mp3/&#123;}'.format(audio_file.filename)

You would need to make similar changes in other parts of your code where you're using f-strings. By replacing the f-strings with the str.format() method, you should be able to fix the SyntaxError and continue running your code.
User
if __name__ == '__main__':
    app.run(debug=True)                      I want this to run on port 5100
ChatGPT

To run your Flask application on port 5100, you can modify the app.run() statement as follows:

python
if __name__ == '__main__':
    app.run(debug=True, port=5100)

By specifying port=5100 as an argument in the app.run() function, your Flask application will be served on port 5100 when you run the script.

After making this change, you can execute your Flask application, and it will be accessible at http://localhost:5100/.
User
what if i use 0,0,0,0
ChatGPT

If you want to run your Flask application on all available network interfaces and use port 5100, you can modify the app.run() statement as follows:

python
if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=5100)

By specifying host='0.0.0.0' and port=5100 as arguments in the app.run() function, your Flask application will be served on all network interfaces (allowing access from external devices) and using port 5100.

After making this change, you can execute your Flask application, and it will be accessible at http://&lt;your-ip-address&lt;:5100/, where &lt;your-ip-address&lt; is the IP address of the machine running the Flask application.
User
datetime has no attribut now
ChatGPT

I apologize for the confusion. It seems that there was an error related to the datetime.now() function.

The correct import statement for the datetime module should be added at the beginning of your code:

python
import datetime

By including this import statement, you will have access to the datetime module and its datetime class, which includes the now() method.

Here's an updated version of your code with the correct import statement:

python
import datetime

@app.route('/convert', methods=['GET', 'POST'])
def convert():
    if request.method == 'POST':
        try:
            audio_file = request.files['audio_file']
            audio_file_path = f'static/audio_mp3/&#123;audio_file.filename}'  # Path for audio file
            audio_file.save(audio_file_path)  # Save the audio file to the specified location

            formatted_text_file = request.files['formatted_text_file']
            formatted_text_file_path = f'static/formatted_text/&#123;formatted_text_file.filename}'  # Path for formatted text file
            formatted_text_file.save(formatted_text_file_path)  # Save the formatted text file to the specified location

            output_filename = datetime.datetime.now().strftime('&#37;Y-&#37;m-&#37;d') + '.mp4'
            output_path = 'static/videos/' + output_filename

            command = [
                'ffmpeg',
                '-i', audio_file_path,
                '-f', 'lavfi',
                '-i', f"color='#470000'@0.0:s=1280x720:rate=60,format=rgba",
                '-vf', f"drawtext=textfile='&#123;os.path.abspath(formatted_text_file_path)}':y=(h-120)-12*t:x=550:fontcolor=orange:fontfile=/home/jack/Arimo-Regular.ttf:fontsize=26",
                '-t', '26',
                '-y', output_path
            ]
            
            # Rest of your code...

        except Exception as e:
            # Handle exceptions

if __name__ == '__main__':
    app.run(debug=True)

Make sure to add the import datetime statement at the beginning of your script, and the datetime module should be accessible, allowing you to use the datetime.datetime.now() method without any issues.
User
use time str instead of datetime
ChatGPT

If you want to use a time string instead of the datetime.now() method, you can replace the datetime.datetime.now().strftime('&#37;Y-&#37;m-&#37;d') portion with the time.strftime() function, which allows you to format the current time as a string.

Here's an updated version of your code using time.strftime():

python
import time

@app.route('/convert', methods=['GET', 'POST'])
def convert():
    if request.method == 'POST':
        try:
            audio_file = request.files['audio_file']
            audio_file_path = f'static/audio_mp3/&#123;audio_file.filename}'  # Path for audio file
            audio_file.save(audio_file_path)  # Save the audio file to the specified location

            formatted_text_file = request.files['formatted_text_file']
            formatted_text_file_path = f'static/formatted_text/&#123;formatted_text_file.filename}'  # Path for formatted text file
            formatted_text_file.save(formatted_text_file_path)  # Save the formatted text file to the specified location

            output_filename = time.strftime('&#37;Y-&#37;m-&#37;d', time.localtime()) + '.mp4'
            output_path = 'static/videos/' + output_filename

            command = [
                'ffmpeg',
                '-i', audio_file_path,
                '-f', 'lavfi',
                '-i', f"color='#470000'@0.0:s=1280x720:rate=60,format=rgba",
                '-vf', f"drawtext=textfile='&#123;os.path.abspath(formatted_text_file_path)}':y=(h-120)-12*t:x=550:fontcolor=orange:fontfile=/home/jack/Arimo-Regular.ttf:fontsize=26",
                '-t', '26',
                '-y', output_path
            ]
            
            # Rest of your code...

        except Exception as e:
            # Handle exceptions

if __name__ == '__main__':
    app.run(debug=True)

In this updated code, I replaced datetime.datetime.now().strftime('&#37;Y-&#37;m-&#37;d') with time.strftime('&#37;Y-&#37;m-&#37;d', time.localtime()). The time.strftime() function takes a format string as the first argument and the time as a tuple from time.localtime() as the second argument. By using '&#37;Y-&#37;m-&#37;d' as the format string, you'll get the current date in the desired format.
User
iwant the time to seconds
ChatGPT

If you want to get the current time in seconds instead of the date, you can use the time.time() function, which returns the current time in seconds since the epoch. You can then convert this timestamp to a string using str().

Here's an updated version of your code using time.time() to get the current time in seconds:

python
import time

@app.route('/convert', methods=['GET', 'POST'])
def convert():
    if request.method == 'POST':
        try:
            audio_file = request.files['audio_file']
            audio_file_path = f'static/audio_mp3/&#123;audio_file.filename}'  # Path for audio file
            audio_file.save(audio_file_path)  # Save the audio file to the specified location

            formatted_text_file = request.files['formatted_text_file']
            formatted_text_file_path = f'static/formatted_text/&#123;formatted_text_file.filename}'  # Path for formatted text file
            formatted_text_file.save(formatted_text_file_path)  # Save the formatted text file to the specified location

            output_filename = str(int(time.time())) + '.mp4'
            output_path = 'static/videos/' + output_filename

            command = [
                'ffmpeg',
                '-i', audio_file_path,
                '-f', 'lavfi',
                '-i', f"color='#470000'@0.0:s=1280x720:rate=60,format=rgba",
                '-vf', f"drawtext=textfile='&#123;os.path.abspath(formatted_text_file_path)}':y=(h-120)-12*t:x=550:fontcolor=orange:fontfile=/home/jack/Arimo-Regular.ttf:fontsize=26",
                '-t', '26',
                '-y', output_path
            ]
            
            # Rest of your code...

        except Exception as e:
            # Handle exceptions

if __name__ == '__main__':
    app.run(debug=True)

In this updated code, I replaced the datetime.datetime.now().strftime('&#37;Y-&#37;m-&#37;d') with str(int(time.time())). The time.time() function returns the current time in seconds since the epoch (as a floating-point number), which is then converted to an integer using int(). Finally, the integer timestamp is converted to a string using str().
User
python make a directory if not exist\
ChatGPT

To create a directory in Python if it doesn't exist, you can use the os.makedirs() function. This function recursively creates directories along the given path. If the directory already exists, it doesn't raise an error.

Here's an example of how you can use os.makedirs() to create a directory if it doesn't exist:

python
import os

directory_path = 'path/to/directory'  # Replace with the desired directory path

# Create the directory if it doesn't exist
os.makedirs(directory_path, exist_ok=True)

In the above code, you need to replace 'path/to/directory' with the actual path of the directory you want to create. The exist_ok=True argument ensures that no error is raised if the directory already exists.

After executing this code, the directory will be created if it doesn't already exist. If the directory exists, no action will be taken.

Make sure you have the necessary permissions to create directories in the specified location.
User
File "/home/jack/Desktop/StoryMaker/env/lib/python3.8/site-packages/flask/app.py", line 1523, in full_dispatch_request
rv = self.dispatch_request()
File "/home/jack/Desktop/StoryMaker/env/lib/python3.8/site-packages/flask/app.py", line 1509, in dispatch_request
return self.ensure_sync(self.view_functions[rule.endpoint])(**req.view_args)
File "/home/jack/Desktop/StoryMaker/SuperAvatar", line 221, in generate_video
extract_eyes(image_path, eyes_filename, shape_predictor_path)
File "/home/jack/Desktop/StoryMaker/SuperAvatar", line 280, in extract_eyes
gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
cv2.error: OpenCV(4.6.0) /io/opencv/modules/imgproc/src/color.cpp:182: error: (-215:Assertion failed) !_src.empty() in function 'cvtColor'
ChatGPT

The error message you provided suggests that an error occurred in the cvtColor() function of OpenCV. Specifically, it indicates that the input image passed to cvtColor() is empty (_src.empty() assertion failed).

The issue is likely related to the image file you are trying to process. It could be that the image file path is incorrect, or the image file itself is not accessible or empty.

To resolve this error, you can check the following:

    Verify that the image file exists at the specified path.
    Ensure that the image file is accessible and not being used by any other process.
    Double-check that the image file is a valid image file format (e.g., JPEG, PNG).
    Confirm that the image file is not empty or corrupted.

You can add some error handling and logging to your code to identify the specific image file causing the issue and provide more context for troubleshooting.

If you need further assistance, please provide the relevant code snippet that includes the extract_eyes() function and how you are passing the image path to it.
User
What do you know about the final fantasy series ?
ChatGPT

The Final Fantasy series is a highly popular and influential role-playing video game franchise developed and published by Square Enix (formerly Square). The series was created by Hironobu Sakaguchi and debuted in 1987 with the release of the first game in the series, simply titled "Final Fantasy."

Key aspects of the Final Fantasy series include:

    Gameplay: The games typically feature turn-based combat, exploration of vast fantasy worlds, character development, and engaging storytelling. However, gameplay mechanics can vary between installments, with some featuring real-time combat or tactical elements.

    Fantasy Setting: The series is known for its immersive and richly detailed fantasy settings, often combining elements of magic, technology, and various races, such as humans, elves, dwarves, and creatures unique to the Final Fantasy universe.

    Standalone Stories: Each mainline entry in the series typically presents a unique storyline, with new worlds, characters, and themes. However, common elements like chocobos (large, bird-like creatures), airships, and recurring creatures called "summons" (or "espers") are often featured across different games.

    Music: The Final Fantasy series is renowned for its memorable and iconic music, composed by Nobuo Uematsu and other talented composers. The music often complements the game's narrative and evokes a range of emotions in players.

    Iterations and Spin-offs: The success of the franchise has led to numerous sequels, prequels, spin-offs, and adaptations across various platforms. Some notable spin-off titles include Final Fantasy Tactics, Final Fantasy Crystal Chronicles, and Final Fantasy Brave Exvius.

    Cultural Impact: Final Fantasy has had a significant impact on the gaming industry, shaping the RPG genre and inspiring many other video games and media. The series has garnered a dedicated fan base worldwide, and its success has helped establish Square Enix as a prominent game developer.

It's important to note that since my knowledge cutoff is in September 2021, the information I provided reflects the state of the series up until that time. New games and developments may have occurred since then.
User
could you set the plot for a two page comic book using final fantasy 
ChatGPT

Certainly! Here's a potential plot for a two-page comic book using Final Fantasy as inspiration:

Page 1:
Panel 1:

    A sprawling fantasy kingdom is shown, with magnificent castles, bustling towns, and beautiful landscapes.
    The main protagonist, a young warrior, is introduced. They are seen walking through a town, their face determined and their sword strapped to their back.

Panel 2:

    The warrior enters a tavern filled with adventurers and townsfolk.
    They overhear a rumor about a powerful artifact hidden in a nearby ancient temple.
    The warrior decides to embark on a quest to retrieve the artifact and bring peace to the kingdom.

Panel 3:

    The warrior is shown journeying through a dense forest, encountering magical creatures along the way.
    They face a small group of goblins, displaying their combat skills and bravery.

Page 2:
Panel 4:

    The warrior reaches the entrance of the ancient temple, an awe-inspiring structure covered in moss and vines.
    They cautiously step inside, encountering traps and puzzles that test their intelligence and agility.

Panel 5:

    The warrior finally reaches the inner chamber of the temple, where the artifact is guarded by a fearsome monster.
    A thrilling battle ensues, showcasing the warrior's skills and determination to protect the kingdom.

Panel 6:

    The warrior emerges victorious, holding the artifact triumphantly.
    They return to the kingdom as a hero, greeted by grateful townsfolk and a jubilant celebration.

Panel 7:

    The comic concludes with the warrior contemplating their next adventure, hinting at future quests and the continuation of their heroic journey.

This two-page comic book plot draws inspiration from the Final Fantasy series by incorporating elements such as a fantasy setting, a hero on a quest, magical creatures, and epic battles. It captures the essence of a classic Final Fantasy storyline, combining adventure, exploration, and the triumph of good over evil in a condensed format.
User
what was the main castle / city name
ChatGPT

In the plot for the two-page comic book using Final Fantasy as inspiration, the specific names of the main castle or city were not provided. However, you can create unique names for the castle and city based on the theme and style you envision for your story. Here are a couple of examples:

    Castle/City Name: "Valoria"
    Description: Valoria is a majestic castle that serves as the center of power in the kingdom. It is situated on a high hill, overlooking the sprawling city below. The city itself is a bustling hub of commerce and culture, filled with lively markets, grand architecture, and diverse inhabitants.

    Castle/City Name: "Silverreach"
    Description: Silverreach is a fortified city located on the edge of a shimmering lake. The castle, also known as Silverreach, is made of gleaming white stone and stands as a symbol of prosperity and strength. The city is known for its advanced magical arts, with enchanters, scholars, and alchemists residing within its walls.

Feel free to modify or create your own castle and city names that resonate with your story and the atmosphere you want to portray in your Final Fantasy-inspired comic book.
User
what are the illustrators bubbles that represent a dream called?
ChatGPT

The speech bubbles that represent a dream or a character's thoughts in comic books are commonly referred to as "thought bubbles" or "thought balloons." These thought bubbles are typically depicted as cloud-like shapes with a series of dots or wavy lines connecting them to the character's head.

Thought bubbles are used to convey a character's inner monologue, private thoughts, or dreams. They are often drawn differently from regular speech bubbles to indicate that the text within them represents the character's mental or imagined dialogue rather than spoken words. The use of thought bubbles helps readers understand the character's perspective, emotions, or reflections.

It's important to note that different comic artists and authors may have their own unique styles and variations when it comes to depicting thought bubbles. Some may use different shapes, colors, or visual effects to convey specific nuances or emphasize the dream-like quality of the thoughts or dreams being depicted.
User
import * as datGui from "https://cdn.skypack.dev/dat.gui@0.7.7";

const state = &#123;
  fps: 60,
  color: "#0f0",
  charset: "0123456789ABCDEF",
  size: 10
};

const gui = new datGui.GUI();
const fpsCtrl = gui.add(state, "fps").min(1).max(120).step(1);
gui.addColor(state, "color");
gui.add(state, "charset");
const sizeCtrl = gui.add(state, "size").min(1).max(120).step(1);

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

let w, h, p;
const resize = () =&lt; &#123;
  w = canvas.width = innerWidth;
  h = canvas.height = innerHeight;

  p = Array(Math.ceil(w / state.size)).fill(0);
};
window.addEventListener("resize", resize);
sizeCtrl.onFinishChange((s) =&lt; resize())
resize();

const random = (items) =&lt; items[Math.floor(Math.random() * items.length)];

const draw = () =&lt; &#123;
  ctx.fillStyle = "rgba(0,0,0,.05)";
  ctx.fillRect(0, 0, w, h);
  ctx.fillStyle = state.color;

  ctx.font = state.size + 'px sans-serif'
  for (let i = 0; i &lt; p.length; i++) &#123;
    let v = p[i];
    ctx.fillText(random(state.charset), i * state.size, v);
    p[i] = v &lt;= h || v &lt;= 10000 * Math.random() ? 0 : v + state.size;
  }
};

let interval = setInterval(draw, 1000 / state.fps);
fpsCtrl.onFinishChange((fps) =&lt; &#123;
  if (interval) &#123;
    clearInterval(interval);
  }
  interval = setInterval(draw, 1000 / fps);
});
body &#123;
  margin: 0;
  overflow: hidden;
}                               &lt;canvas id="canvas"&lt;                                   Can you create that using only a javascript and no additional html or css ??
ChatGPT

Yes, the provided code can be used to create a visualization using only JavaScript without additional HTML or CSS files. However, there is a small issue with the placement of the &lt;canvas&lt; element in your question. I assume that you meant to place it before the CSS code. Here's the corrected version of the code:

javascript
import * as datGui from "https://cdn.skypack.dev/dat.gui@0.7.7";

const state = &#123;
  fps: 60,
  color: "#0f0",
  charset: "0123456789ABCDEF",
  size: 10
};

const gui = new datGui.GUI();
const fpsCtrl = gui.add(state, "fps").min(1).max(120).step(1);
gui.addColor(state, "color");
gui.add(state, "charset");
const sizeCtrl = gui.add(state, "size").min(1).max(120).step(1);

const canvas = document.createElement("canvas");
document.body.appendChild(canvas);
const ctx = canvas.getContext("2d");

let w, h, p;
const resize = () =&lt; &#123;
  w = canvas.width = innerWidth;
  h = canvas.height = innerHeight;

  p = Array(Math.ceil(w / state.size)).fill(0);
};
window.addEventListener("resize", resize);
sizeCtrl.onFinishChange((s) =&lt; resize());
resize();

const random = (items) =&lt; items[Math.floor(Math.random() * items.length)];

const draw = () =&lt; &#123;
  ctx.fillStyle = "rgba(0,0,0,.05)";
  ctx.fillRect(0, 0, w, h);
  ctx.fillStyle = state.color;

  ctx.font = state.size + 'px sans-serif';
  for (let i = 0; i &lt; p.length; i++) &#123;
    let v = p[i];
    ctx.fillText(random(state.charset), i * state.size, v);
    p[i] = v &lt;= h || v &lt;= 10000 * Math.random() ? 0 : v + state.size;
  }
};

let interval = setInterval(draw, 1000 / state.fps);
fpsCtrl.onFinishChange((fps) =&lt; &#123;
  if (interval) &#123;
    clearInterval(interval);
  }
  interval = setInterval(draw, 1000 / fps);
});

In this code, a &lt;canvas&lt; element is created dynamically using document.createElement("canvas"). The canvas is then appended to the &lt;body&lt; element using document.body.appendChild(canvas). This allows you to generate the visualization using JavaScript without the need for additional HTML or CSS files.

Please note that you will still need an HTML file to load and run this JavaScript code. You can create an HTML file and include a &lt;script&lt; tag to reference this JavaScript code.
User
run flask on port 5100
ChatGPT

To run a Flask application on port 5100, you can modify the app.run() statement in your Python script. Here's an example of how you can do it:

python
from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello():
    return 'Hello, World!'

if __name__ == '__main__':
    app.run(port=5100)

In this example, the Flask application is defined with a simple route that returns "Hello, World!" when accessed. The app.run() statement is modified to include port=5100 as an argument.

When you run this script, Flask will start the application on port 5100. You can access it by navigating to http://localhost:5100/ in your web browser.

Please ensure that you have Flask installed and any required dependencies before running the script.
User
import * as datGui from "https://cdn.skypack.dev/dat.gui@0.7.7";

const state = &#123;
  fps: 60,
  color: "#0f0",
  charset: "0123456789ABCDEF",
  size: 10
};

const gui = new datGui.GUI();
const fpsCtrl = gui.add(state, "fps").min(1).max(120).step(1);
gui.addColor(state, "color");
gui.add(state, "charset");
const sizeCtrl = gui.add(state, "size").min(1).max(120).step(1);

const canvas = document.createElement("canvas");
document.body.appendChild(canvas);
const ctx = canvas.getContext("2d");

let w, h, p;
const resize = () =&lt; &#123;
  w = canvas.width = innerWidth;
  h = canvas.height = innerHeight;

  p = Array(Math.ceil(w / state.size)).fill(0);
};
window.addEventListener("resize", resize);
sizeCtrl.onFinishChange((s) =&lt; resize());
resize();

const random = (items) =&lt; items[Math.floor(Math.random() * items.length)];

const draw = () =&lt; &#123;
  ctx.fillStyle = "rgba(0,0,0,.05)";
  ctx.fillRect(0, 0, w, h);
  ctx.fillStyle = state.color;

  ctx.font = state.size + 'px sans-serif';
  for (let i = 0; i &lt; p.length; i++) &#123;
    let v = p[i];
    ctx.fillText(random(state.charset), i * state.size, v);
    p[i] = v &lt;= h || v &lt;= 10000 * Math.random() ? 0 : v + state.size;
  }
};

let interval = setInterval(draw, 1000 / state.fps);
fpsCtrl.onFinishChange((fps) =&lt; &#123;
  if (interval) &#123;
    clearInterval(interval);
  }
  interval = setInterval(draw, 1000 / fps);
});
if I run this script in an html page it should show an image ??
ChatGPT

The provided code is written in JavaScript and renders a dynamic canvas animation, but it doesn't generate an image. When you run this script in an HTML page, it will create an interactive animation on the canvas element.

The code sets up a GUI using dat.GUI to control parameters such as frames per second (fps), color, character set, and size. It then creates a canvas element dynamically and appends it to the &lt;body&lt; of the HTML page. The animation is drawn on the canvas using the draw() function, which is repeatedly called based on the specified frame rate.

When you open the HTML page that includes this script, you should see a canvas element on the page, and the animation will start playing based on the parameters controlled by the GUI.

It's important to note that this code doesn't generate a static image file. Instead, it generates an interactive animation that runs within the web page. If you need to generate a static image, you might consider using a different approach, such as capturing the canvas as an image using libraries like html2canvas or server-side rendering techniques.
User
I wand to run the script in a webpage 
ChatGPT

To run the provided JavaScript code in a webpage, you need to create an HTML file and include the JavaScript code within a &lt;script&lt; tag. Here's an example of how you can structure your HTML file:

html
&lt;!DOCTYPE html&lt;
&lt;html&lt;
&lt;head&lt;
  &lt;title&lt;Canvas Animation&lt;/title&lt;
  &lt;script src="https://cdn.skypack.dev/dat.gui@0.7.7"&lt;&lt;/script&lt;
&lt;/head&lt;
&lt;body&lt;
  &lt;canvas id="canvas"&lt;&lt;/canvas&lt;

  &lt;script&lt;
    // Paste the JavaScript code here
    // ...

    // Ensure the DOM content is loaded before running the JavaScript code
    document.addEventListener("DOMContentLoaded", function() &#123;
      // Your JavaScript code here
      // ...
    });
  &lt;/script&lt;
&lt;/body&lt;
&lt;/html&lt;

In this HTML file, the &lt;script&lt; tag is placed at the end of the &lt;body&lt; element. The external dat.gui library is included as a script source using a &lt;script&lt; tag with the src attribute.

You should copy and paste the provided JavaScript code inside the &lt;script&lt; tag where indicated. The DOMContentLoaded event listener is added to ensure that the JavaScript code runs after the DOM content has loaded.

Save this HTML file with an appropriate name, such as index.html, and open it in a web browser. The canvas animation should now run within the webpage.
User
I want to just run a script in a page. I have only access to creare a script
ChatGPT

If you only have access to creating a script on a webpage and want to run the provided JavaScript code without modifying the HTML, you can follow these steps:

    Create an HTML file (e.g., index.html) with the following content:

html
&lt;!DOCTYPE html&lt;
&lt;html&lt;
&lt;head&lt;
  &lt;title&lt;Canvas Animation&lt;/title&lt;
&lt;/head&lt;
&lt;body&lt;
  &lt;canvas id="canvas"&lt;&lt;/canvas&lt;

  &lt;script&lt;
    // Paste the entire JavaScript code here
    // ...

    // Ensure the DOM content is loaded before running the JavaScript code
    document.addEventListener("DOMContentLoaded", function() &#123;
      // Your JavaScript code here
      // ...
    });
  &lt;/script&lt;
&lt;/body&lt;
&lt;/html&lt;

    Copy the entire JavaScript code (starting from import * as datGui and ending with the last line) and replace the // Paste the entire JavaScript code here comment inside the &lt;script&lt; tag.

    Save the HTML file.

    Open the HTML file (index.html) in a web browser, and the canvas animation should run on the webpage.

By embedding the JavaScript code within the &lt;script&lt; tag in the HTML file, you can run the script and see the canvas animation without modifying the existing HTML structure.
User
can you complete the html page 
ChatGPT

Certainly! Here's the completed HTML page with the provided JavaScript code included:

html
&lt;!DOCTYPE html&lt;
&lt;html&lt;
&lt;head&lt;
  &lt;title&lt;Canvas Animation&lt;/title&lt;
  &lt;script src="https://cdn.skypack.dev/dat.gui@0.7.7"&lt;&lt;/script&lt;
&lt;/head&lt;
&lt;body&lt;
  &lt;canvas id="canvas"&lt;&lt;/canvas&lt;

  &lt;script&lt;
    import * as datGui from "https://cdn.skypack.dev/dat.gui@0.7.7";

    const state = &#123;
      fps: 60,
      color: "#0f0",
      charset: "0123456789ABCDEF",
      size: 10
    };

    const gui = new datGui.GUI();
    const fpsCtrl = gui.add(state, "fps").min(1).max(120).step(1);
    gui.addColor(state, "color");
    gui.add(state, "charset");
    const sizeCtrl = gui.add(state, "size").min(1).max(120).step(1);

    const canvas = document.createElement("canvas");
    document.body.appendChild(canvas);
    const ctx = canvas.getContext("2d");

    let w, h, p;
    const resize = () =&lt; &#123;
      w = canvas.width = innerWidth;
      h = canvas.height = innerHeight;

      p = Array(Math.ceil(w / state.size)).fill(0);
    };
    window.addEventListener("resize", resize);
    sizeCtrl.onFinishChange((s) =&lt; resize());
    resize();

    const random = (items) =&lt; items[Math.floor(Math.random() * items.length)];

    const draw = () =&lt; &#123;
      ctx.fillStyle = "rgba(0,0,0,.05)";
      ctx.fillRect(0, 0, w, h);
      ctx.fillStyle = state.color;

      ctx.font = state.size + 'px sans-serif';
      for (let i = 0; i &lt; p.length; i++) &#123;
        let v = p[i];
        ctx.fillText(random(state.charset), i * state.size, v);
        p[i] = v &lt;= h || v &lt;= 10000 * Math.random() ? 0 : v + state.size;
      }
    };

    let interval = setInterval(draw, 1000 / state.fps);
    fpsCtrl.onFinishChange((fps) =&lt; &#123;
      if (interval) &#123;
        clearInterval(interval);
      }
      interval = setInterval(draw, 1000 / fps);
    });

    document.addEventListener("DOMContentLoaded", function() &#123;
      // Your JavaScript code here
      // ...
    });
  &lt;/script&lt;
&lt;/body&lt;
&lt;/html&lt;

In this completed HTML page, the provided JavaScript code is included within the &lt;script&lt; tag. The required dat.gui library is imported as a script source using the &lt;script&lt; tag with the src attribute. The canvas element is created dynamically and appended to the &lt;body&lt; element.

Save this HTML page as an HTML file (e.g., index.html), and open it in a web browser. The canvas animation should now run on the webpage.
User
&lt;!DOCTYPE html&lt;
&lt;html&lt;
&lt;head&lt;
    &lt;title&lt;HTML Viewer&lt;/title&lt;
    &lt;script src="https://cdn.skypack.dev/dat.gui@0.7.7"&lt;&lt;/script&lt;
&lt;/head&lt;
&lt;body&lt;
    &lt;canvas id="canvas"&lt;&lt;/canvas&lt;
    &lt;div id="output"&lt;
        &#123;&#123; html_content | safe }}
    &lt;/div&lt;

    &lt;script&lt;
        var script = &#123;&#123; script_content | tojson }};
        eval(script);
    &lt;/script&lt;
&lt;/body&lt;
&lt;/html&lt;
This does not work I saved the script above in script.js
ChatGPT

It seems like you're trying to load an external JavaScript file (script.js) and execute its content within the HTML page. To achieve that, you need to reference the script.js file using a &lt;script&lt; tag in your HTML file. Here's an updated version of your HTML file:

html
&lt;!DOCTYPE html&lt;
&lt;html&lt;
&lt;head&lt;
    &lt;title&lt;HTML Viewer&lt;/title&lt;
    &lt;script src="https://cdn.skypack.dev/dat.gui@0.7.7"&lt;&lt;/script&lt;
    &lt;script src="script.js"&lt;&lt;/script&lt;
&lt;/head&lt;
&lt;body&lt;
    &lt;canvas id="canvas"&lt;&lt;/canvas&lt;
    &lt;div id="output"&lt;
        &#123;&#123; html_content | safe }}
    &lt;/div&lt;
&lt;/body&lt;
&lt;/html&lt;

Make sure that the script.js file is located in the same directory as your HTML file. The &lt;script src="script.js"&lt;&lt;/script&lt; tag is added to the &lt;head&lt; section, loading the external JavaScript file into the HTML page.

Save this updated HTML file, and when you open it in a web browser, it will load and execute the content of the script.js file. Any code within script.js will be able to access and manipulate the elements in the HTML document, such as the canvas element and the div with the ID "output".
User
@app.route('/preview', methods=['GET', 'POST'])
def preview():
    # Read the existing script content from the file
    with open('scripts/script.js', 'r') as file:
        script_content = file.read()
    # HTML content to be displayed
    html_content = "&lt;p&lt;This is a dynamic HTML content. It can include various elements, &lt;br /&lt;such as paragraphs, headings, lists, etc.&lt;/p&lt;"
    return render_template('preview.html', html_content=html_content, script_content=script_content)                    I have other *.js I want to load and run from scripts/ how do I load them
ChatGPT

To load and run multiple JavaScript files from the scripts/ directory, you can modify the preview() function in your Flask application. Here's an updated version of the code that loads and includes multiple JavaScript files:

python
import os
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/preview', methods=['GET', 'POST'])
def preview():
    script_files = []  # List to store the names of the JavaScript files

    # Read all JavaScript files from the 'scripts/' directory
    script_dir = 'scripts/'
    for filename in os.listdir(script_dir):
        if filename.endswith('.js'):
            script_path = os.path.join(script_dir, filename)
            with open(script_path, 'r') as file:
                script_content = file.read()
                script_files.append(script_content)

    # HTML content to be displayed
    html_content = "&lt;p&lt;This is a dynamic HTML content. It can include various elements, &lt;br /&lt;such as paragraphs, headings, lists, etc.&lt;/p&lt;"

    return render_template('preview.html', html_content=html_content, script_files=script_files)

In this updated code, the preview() function reads all JavaScript files in the scripts/ directory. It uses os.listdir() to get the list of files in the directory and then filters for files with the .js extension. The contents of each JavaScript file are stored in the script_files list.

The render_template() function is modified to pass the script_files list to the preview.html template. This allows you to access and include multiple JavaScript files in your HTML template.

In your preview.html template, you can loop through the script_files list and include each JavaScript file using &lt;script&lt; tags. Here's an example of how you can include the JavaScript files in the template:

html
&lt;!DOCTYPE html&lt;
&lt;html&lt;
&lt;head&lt;
    &lt;title&lt;HTML Viewer&lt;/title&lt;
    &lt;script src="https://cdn.skypack.dev/dat.gui@0.7.7"&lt;&lt;/script&lt;
    &#123;&#37; for script_file in script_files &#37;}
        &lt;script&lt;
            &#123;&#123; script_file | safe }}
        &lt;/script&lt;
    &#123;&#37; endfor &#37;}
&lt;/head&lt;
&lt;body&lt;
    &lt;canvas id="canvas"&lt;&lt;/canvas&lt;
    &lt;div id="output"&lt;
        &#123;&#123; html_content | safe }}
    &lt;/div&lt;
&lt;/body&lt;
&lt;/html&lt;

In this example, the &#123;&#37; for script_file in script_files &#37;} loop iterates over each JavaScript file in the script_files list. Within the loop, each file's content is included within a &lt;script&lt; tag using &#123;&#123; script_file | safe }}.

Make sure that your JavaScript files are stored in the scripts/ directory relative to your Flask application file. You can have multiple JavaScript files in the scripts/ directory, and all of them will be loaded and included in the rendered HTML page.
User
if __name__ == '__main__':
   app.run(debug=True, port=5000, host='0,0,0,0')
ChatGPT

If you want to run your Flask application with the app.run() statement including the debug=True, port=5000, and host='0.0.0.0' arguments, here's the updated code:

python
if __name__ == '__main__':
    app.run(debug=True, port=5000, host='0.0.0.0')

With this configuration, your Flask application will run in debug mode (debug=True) for better error reporting, it will be accessible on port 5000 (port=5000), and it will listen on all available network interfaces (host='0.0.0.0'). This allows your Flask application to be accessed from other devices on the same network.

Make sure you have Flask installed and any required dependencies before running the script. When you execute this code, your Flask application will run, and you can access it by navigating to the appropriate IP address and port (e.g., http://your-ip-address:5000/) in a web browser.
User
This does not let me choose a *.js file ??    @app.route('/edit_script', methods=['GET', 'POST'])
def edit_script():
    script_files = []  # List to store the names of the JavaScript files
    # Read all JavaScript files from the 'scripts/' directory
    script_dir = 'scripts/'
    for filename in os.listdir(script_dir):
        if filename.endswith('.js'):
            script_path = os.path.join(script_dir, filename)
            with open(script_path, 'r') as file:
                script_content = file.read()
                script_files.append(script_content)   
                # Path to the script file
                backup_file = f"scripts/script_backup_&#123;datetime.datetime.now().strftime('&#37;Y&#37;m&#37;d&#37;H&#37;M&#37;S')}.js"
                shutil.copy(script_file, backup_file)
                # Read the existing script content from the file

                return render_template('edit_script.html', script_content=script_content)
                # Define the file path to store the script content
ChatGPT

If you want to allow users to choose a JavaScript file for editing in your Flask application, you can modify the edit_script() function to include file selection functionality. Here's an updated version of the code:

python
import os
from flask import Flask, render_template, request
import shutil
import datetime

app = Flask(__name__)

@app.route('/edit_script', methods=['GET', 'POST'])
def edit_script():
    if request.method == 'POST':
        selected_file = request.files['script_file']
        if selected_file and selected_file.filename.endswith('.js'):
            script_content = selected_file.read().decode('utf-8')

            # Path to the script file
            script_dir = 'scripts/'
            backup_file = f"scripts/script_backup_&#123;datetime.datetime.now().strftime('&#37;Y&#37;m&#37;d&#37;H&#37;M&#37;S')}.js"
            script_path = os.path.join(script_dir, selected_file.filename)
            script_files = []
            for filename in os.listdir(script_dir):
                if filename.endswith('.js'):
                    with open(os.path.join(script_dir, filename), 'r') as file:
                        script_files.append(file.read())

            shutil.copy(script_path, backup_file)

            return render_template('edit_script.html', script_files=script_files, script_content=script_content)

    # Read all JavaScript files from the 'scripts/' directory
    script_dir = 'scripts/'
    script_files = []
    for filename in os.listdir(script_dir):
        if filename.endswith('.js'):
            with open(os.path.join(script_dir, filename), 'r') as file:
                script_files.append(file.read())

    return render_template('edit_script.html', script_files=script_files)

if __name__ == '__main__':
    app.run(debug=True, port=5000, host='0.0.0.0')

In this updated code, the edit_script() function handles both GET and POST requests. If the request method is POST, it checks if a file with the .js extension was selected, reads its content, and sets it as the script_content variable. It then creates a backup of the selected file and renders the edit_script.html template with the list of script files and the selected script content.

When the request method is GET, the function reads all JavaScript files from the scripts/ directory and passes them to the template as script_files.

You can modify your edit_script.html template to include a file input field (&lt;input type="file" name="script_file"&lt;) to allow users to select a JavaScript file for editing. Additionally, you can display the list of available script files and the content of the selected script.

Ensure that you have the edit_script.html template in your templates directory and the necessary CSS and JavaScript files to style and enhance the editing experience.

With these modifications, users can choose a JavaScript file for editing, and the selected file's content will be displayed in the edit_script.html template.
User
from flask import Flask, render_template, request
import datetime
import shutil
import os
app = Flask(__name__)
@app.route('/')
def index():
    return render_template('index.html')
@app.route('/NOTES')
def plain_html():
    return render_template('NOTES.html')
@app.route('/preview', methods=['GET', 'POST'])
def preview():
    # Read the existing script content from the file
    with open('scripts/script.js', 'r') as file:
        script_content = file.read()
    # HTML content to be displayed
    html_content = "&lt;p&lt;This is a dynamic HTML content. It can include various elements, &lt;br /&lt;such as paragraphs, headings, lists, etc.&lt;/p&lt;"
    return render_template('preview.html', html_content=html_content, script_content=script_content)
@app.route('/edit_script', methods=['GET', 'POST'])
def edit_script():
    if request.method == 'POST':
        selected_file = request.files['script_file']
        if selected_file and selected_file.filename.endswith('.js'):
            script_content = selected_file.read().decode('utf-8')

            # Path to the script file
            script_dir = 'scripts/'
            backup_file = f"scripts/script_backup_&#123;datetime.datetime.now().strftime('&#37;Y&#37;m&#37;d&#37;H&#37;M&#37;S')}.js"
            script_path = os.path.join(script_dir, selected_file.filename)
            script_files = []
            for filename in os.listdir(script_dir):
                if filename.endswith('.js'):
                    with open(os.path.join(script_dir, filename), 'r') as file:
                        script_files.append(file.read())

            shutil.copy(script_path, backup_file)

            return render_template('edit_script.html', script_files=script_files, script_content=script_content)

    # Read all JavaScript files from the 'scripts/' directory
    script_dir = 'scripts/'
    script_files = []
    for filename in os.listdir(script_dir):
        if filename.endswith('.js'):
            with open(os.path.join(script_dir, filename), 'r') as file:
                script_files.append(file.read())

    return render_template('edit_script.html', script_files=script_files)

#script_file = os.path.join(os.getcwd(), 'scripts', 'script.js')
script_file = "scripts/script.js"
@app.route('/save_script', methods=['POST'])
def save_script():
    # Retrieve the updated script content from the form data
    updated_script = request.form.get('script_content')
    # Write the updated script content to the file
    with open(script_file, 'w') as file:
        file.write(updated_script)
    return 'Script updated successfully.'
if __name__ == '__main__':
   app.run(debug=True, port=5000, host='0.0.0.0')

ChatGPT

The provided Flask application code appears to have all the necessary routes and functionality for serving HTML templates, previewing content, editing scripts, and saving script updates. Here's the code with some formatting adjustments:

python
from flask import Flask, render_template, request
import datetime
import shutil
import os

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/NOTES')
def plain_html():
    return render_template('NOTES.html')

@app.route('/preview', methods=['GET', 'POST'])
def preview():
    # Read the existing script content from the file
    with open('scripts/script.js', 'r') as file:
        script_content = file.read()
    # HTML content to be displayed
    html_content = "&lt;p&lt;This is a dynamic HTML content. It can include various elements, &lt;br /&lt;such as paragraphs, headings, lists, etc.&lt;/p&lt;"
    return render_template('preview.html', html_content=html_content, script_content=script_content)

@app.route('/edit_script', methods=['GET', 'POST'])
def edit_script():
    if request.method == 'POST':
        selected_file = request.files['script_file']
        if selected_file and selected_file.filename.endswith('.js'):
            script_content = selected_file.read().decode('utf-8')

            # Path to the script file
            script_dir = 'scripts/'
            backup_file = f"scripts/script_backup_&#123;datetime.datetime.now().strftime('&#37;Y&#37;m&#37;d&#37;H&#37;M&#37;S')}.js"
            script_path = os.path.join(script_dir, selected_file.filename)
            script_files = []
            for filename in os.listdir(script_dir):
                if filename.endswith('.js'):
                    with open(os.path.join(script_dir, filename), 'r') as file:
                        script_files.append(file.read())

            shutil.copy(script_path, backup_file)

            return render_template('edit_script.html', script_files=script_files, script_content=script_content)

    # Read all JavaScript files from the 'scripts/' directory
    script_dir = 'scripts/'
    script_files = []
    for filename in os.listdir(script_dir):
        if filename.endswith('.js'):
            with open(os.path.join(script_dir, filename), 'r') as file:
                script_files.append(file.read())

    return render_template('edit_script.html', script_files=script_files)

script_file = "scripts/script.js"

@app.route('/save_script', methods=['POST'])
def save_script():
    # Retrieve the updated script content from the form data
    updated_script = request.form.get('script_content')
    # Write the updated script content to the file
    with open(script_file, 'w') as file:
        file.write(updated_script)
    return 'Script updated successfully.'

if __name__ == '__main__':
    app.run(debug=True, port=5000, host='0.0.0.0')

This code sets up routes for different pages, such as the index page (/), a plain HTML page (/NOTES), preview page (/preview), and the script editor page (/edit_script). It also includes a route for saving the updated script content (/save_script).

Ensure that you have the necessary HTML templates (index.html, NOTES.html, preview.html, edit_script.html) in a templates/ directory and the required CSS and JavaScript files for styling and functionality.

When you run this Flask application, it will start a development server on http://localhost:5000/, allowing you to access and interact with the different pages and functionality provided by the routes.
User
I want it to open a scripts/*.js and save it as scripts/script.js  Then allow it to be viewed or edited . It gives me no list from scripts/
ChatGPT

To open and save a specific JavaScript file from the scripts/ directory as scripts/script.js, you need to modify the code accordingly. Here's an updated version of the Flask application that accomplishes this:

python
from flask import Flask, render_template, request
import datetime
import shutil
import os

app = Flask(__name__)

script_dir = 'scripts/'
script_file = os.path.join(script_dir, 'script.js')

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/NOTES')
def plain_html():
    return render_template('NOTES.html')

@app.route('/preview')
def preview():
    # Read the existing script content from the file
    with open(script_file, 'r') as file:
        script_content = file.read()
    # HTML content to be displayed
    html_content = "&lt;p&lt;This is a dynamic HTML content. It can include various elements, &lt;br /&lt;such as paragraphs, headings, lists, etc.&lt;/p&lt;"
    return render_template('preview.html', html_content=html_content, script_content=script_content)

@app.route('/edit_script', methods=['GET', 'POST'])
def edit_script():
    if request.method == 'POST':
        selected_file = request.files['script_file']
        if selected_file and selected_file.filename.endswith('.js'):
            script_content = selected_file.read().decode('utf-8')

            # Write the updated script content to the file
            with open(script_file, 'w') as file:
                file.write(script_content)

    script_files = []
    for filename in os.listdir(script_dir):
        if filename.endswith('.js'):
            with open(os.path.join(script_dir, filename), 'r') as file:
                script_files.append(file.read())

    return render_template('edit_script.html', script_files=script_files)

@app.route('/save_script', methods=['POST'])
def save_script():
    # Retrieve the updated script content from the form data
    updated_script = request.form.get('script_content')
    # Write the updated script content to the file
    with open(script_file, 'w') as file:
        file.write(updated_script)
    return 'Script updated successfully.'

if __name__ == '__main__':
    app.run(debug=True, port=5000, host='0.0.0.0')

In this updated code, the script_dir variable is set to the 'scripts/' directory, and the script_file variable is set to 'scripts/script.js'.

When opening the script for preview (/preview route), it reads the content of script_file instead of a hardcoded path.

In the edit_script() function, after saving the uploaded file's content to script_file, it reloads the list of script files from the script_dir to update the available options.

Ensure that you have the necessary HTML templates (index.html, NOTES.html, preview.html, edit_script.html) in a templates/ directory and the required CSS and JavaScript files for styling and functionality.

Now, when you run the Flask application, it will open and save JavaScript files in the scripts/ directory as scripts/script.js. The /preview route will display the content of scripts/script.js, and the /edit_script route will allow you to select a JavaScript file from the scripts/ directory, save it as scripts/script.js, and display the list of available script files for editing.
User
Method Not Allowed
The method is not allowed for the requested URL.
ChatGPT

The "Method Not Allowed" error typically occurs when you're trying to access a URL using an HTTP method that is not allowed for that route. In your Flask application, this error may occur if you're trying to access a route using an incorrect HTTP method.

Here are a few steps to troubleshoot and resolve the "Method Not Allowed" error:

    Verify the HTTP method: Check the route and the HTTP method you're using to access it. Ensure that you're using the correct HTTP method (e.g., GET, POST) that is allowed for that specific route. Double-check the route definition in your Flask application and compare it with the method you're using to access it.

    Check the route decorators: Make sure that the route you're trying to access is properly decorated with the correct HTTP methods. For example, if you're trying to use the POST method to access a route, ensure that the route is decorated with @app.route('/your-route', methods=['POST']).

    Clear browser cache: Sometimes, caching issues can cause the browser to use incorrect or outdated information. Clear your browser cache and try accessing the URL again.

    Check for any middleware or firewalls: If you're using any middleware or firewalls in your Flask application, review their configurations to ensure they're not blocking the HTTP method you're trying to use.

By following these steps, you should be able to identify and resolve the "Method Not Allowed" error in your Flask application.
User
I have many files in scripts/     I backup all my files .  What I need is to access them. I want to choose one from a list then save it as scripts/script.js    That way I can view and edit the file
ChatGPT

Apologies for the confusion. To access and choose a JavaScript file from a list in the scripts/ directory, and then save it as scripts/script.js for viewing and editing, you can modify the edit_script() function as follows:

python
from flask import Flask, render_template, request, redirect, url_for
import os
import shutil

app = Flask(__name__)

script_dir = 'scripts/'
script_file = os.path.join(script_dir, 'script.js')

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/NOTES')
def plain_html():
    return render_template('NOTES.html')

@app.route('/preview')
def preview():
    with open(script_file, 'r') as file:
        script_content = file.read()
    html_content = "&lt;p&lt;This is a dynamic HTML content. It can include various elements, such as paragraphs, headings, lists, etc.&lt;/p&lt;"
    return render_template('preview.html', html_content=html_content, script_content=script_content)

@app.route('/edit_script', methods=['GET', 'POST'])
def edit_script():
    if request.method == 'POST':
        selected_file = request.form['script_file']
        if selected_file.endswith('.js'):
            selected_file_path = os.path.join(script_dir, selected_file)
            shutil.copy(selected_file_path, script_file)
            return redirect(url_for('edit_script'))

    script_files = []
    for filename in os.listdir(script_dir):
        if filename.endswith('.js'):
            script_files.append(filename)

    return render_template('edit_script.html', script_files=script_files)

@app.route('/save_script', methods=['POST'])
def save_script():
    updated_script = request.form['script_content']
    with open(script_file, 'w') as file:
        file.write(updated_script)
    return 'Script updated successfully.'

if __name__ == '__main__':
    app.run(debug=True, port=5000, host='0.0.0.0')

In this updated code:

    The edit_script() function allows users to choose a JavaScript file from a list in the scripts/ directory. When a file is selected and the form is submitted, it copies the selected file to scripts/script.js using shutil.copy().

    The script_files list is populated with the names of JavaScript files present in the scripts/ directory.

    The &lt;option&lt; elements for the script files are dynamically generated in the edit_script.html template using a Jinja loop.

    After selecting a file and submitting the form, the function redirects back to the edit_script() route to update the list of available script files.

Now, you can access the /edit_script route to choose a JavaScript file from the list, and it will be saved as scripts/script.js. You can then view and edit the selected file by accessing the /preview route.
User
Method Not Allowed
The method is not allowed for the requested URL.
ChatGPT

I apologize for the inconvenience. The "Method Not Allowed" error typically occurs when the HTTP method used to access a URL is not allowed for that specific route.

In the code provided earlier, the "Method Not Allowed" error could occur if you're trying to access the /edit_script route using an HTTP method other than POST. The /edit_script route is intended to handle POST requests for selecting a JavaScript file.

To resolve the issue, make sure you're using the correct HTTP method when accessing the /edit_script route. You can modify your code to explicitly allow both GET and POST methods for the /edit_script route by updating the methods parameter in the route decorator. Here's an example:

python
@app.route('/edit_script', methods=['GET', 'POST'])
def edit_script():
    # Rest of the code

With this change, the /edit_script route will accept both GET and POST requests, allowing you to access the route for selecting a JavaScript file.

Ensure that you update any corresponding form or link in your HTML template to use the correct method when interacting with the /edit_script route.

If you're still encountering the "Method Not Allowed" error after making these adjustments, please provide the specific URL and method you're using, as well as the corresponding route definition and any relevant HTML code. This information will help further troubleshoot the issue.
User
Method Not Allowed
The method is not allowed for the requested URL   same thing 
ChatGPT

I apologize for the confusion. To further troubleshoot the "Method Not Allowed" error, please ensure the following:

    Check the HTTP method: Confirm that you're using the correct HTTP method (e.g., GET, POST) when accessing the URL. Make sure it matches the allowed methods specified in the route decorator.

    Verify the URL: Double-check that the URL you're accessing matches the route definition in your Flask application. Ensure that there are no typos or incorrect paths.

    Clear browser cache: Clear your browser cache to eliminate any potential caching issues. Sometimes, the browser may cache previous responses, leading to the "Method Not Allowed" error.

    Inspect route decorators: Review the route decorators for the relevant route. Ensure that the correct HTTP methods are specified in the methods parameter of the decorator. For example, if you need to handle both GET and POST methods, use methods=['GET', 'POST'] in the decorator.

    Verify the form action or link: If you're encountering the error while submitting a form or following a link, check that the form's action attribute or the link's href attribute points to the correct URL and uses the appropriate HTTP method.

If you've confirmed these aspects and are still experiencing the error, please provide the relevant route definition, the URL you're trying to access, and any corresponding HTML code. This additional information will help in identifying the cause of the "Method Not Allowed" error.
User
preview .html                             &lt;!DOCTYPE html&lt;
&lt;html&lt;
&lt;head&lt;
    &lt;title&lt;HTML Viewer&lt;/title&lt;
    &lt;script src="https://cdn.skypack.dev/dat.gui@0.7.7"&lt;&lt;/script&lt;
    &#123;&#37; for script_file in script_files &#37;}
        &lt;script&lt;
            &#123;&#123; script_file | safe }}
        &lt;/script&lt;
    &#123;&#37; endfor &#37;}

    &lt;style type="text/css"&lt;
        html&#123;
            width: 100&#37;;
            height: 100&#37;;
            overflow: hidden;
        }
        
        body &#123;
            margin: 0;
            padding: 0;
            color: #fff;
            background-color: #000;
        }
        
        canvas &#123;
            -webkit-tap-highlight-color: transparent;
            tap-highlight-color: transparent;
            -webkit-user-select: none;
            user-select: none;
            cursor: pointer;
        }
        &lt;/style&lt;   
&lt;/head&lt;
&lt;body&lt;
    &lt;canvas id="canvas"&lt;&lt;/canvas&lt;
    &lt;div id="output"&lt;
        &#123;&#123; html_content | safe }}
    &lt;/div&lt;
&lt;/body&lt;
&lt;/html&lt;
ChatGPT

The preview.html template you provided seems to be missing a script block for the main JavaScript logic. Here's an updated version of the template that includes the necessary script block:

html
&lt;!DOCTYPE html&lt;
&lt;html&lt;
&lt;head&lt;
    &lt;title&lt;HTML Viewer&lt;/title&lt;
    &lt;script src="https://cdn.skypack.dev/dat.gui@0.7.7"&lt;&lt;/script&lt;
    &#123;&#37; for script_file in script_files &#37;}
        &lt;script src="&#123;&#123; script_file }}"&lt;&lt;/script&lt;
    &#123;&#37; endfor &#37;}

    &lt;style type="text/css"&lt;
        html &#123;
            width: 100&#37;;
            height: 100&#37;;
            overflow: hidden;
        }
        
        body &#123;
            margin: 0;
            padding: 0;
            color: #fff;
            background-color: #000;
        }
        
        canvas &#123;
            -webkit-tap-highlight-color: transparent;
            tap-highlight-color: transparent;
            -webkit-user-select: none;
            user-select: none;
            cursor: pointer;
        }
    &lt;/style&lt;
    
    &lt;script&lt;
        // Add your JavaScript logic here
        // This script block will contain the main code for rendering and interacting with the canvas
        // You can customize it based on your requirements
        window.onload = function() &#123;
            // Your code here
        }
    &lt;/script&lt;
&lt;/head&lt;
&lt;body&lt;
    &lt;canvas id="canvas"&lt;&lt;/canvas&lt;
    &lt;div id="output"&lt;
        &#123;&#123; html_content | safe }}
    &lt;/div&lt;
&lt;/body&lt;
&lt;/html&lt;

In this updated template, the &#123;&#37; for script_file in script_files &#37;} loop is used to dynamically generate &lt;script&lt; tags for each JavaScript file in the script_files list. The src attribute of the &lt;script&lt; tag points to the corresponding script file.

Additionally, the script block after the &lt;style&lt; block is where you can add your main JavaScript logic. This is where you can write the code for rendering and interacting with the canvas.

Make sure you pass the script_files variable from the Flask route to the template to populate the list of JavaScript files.

With this updated template, the JavaScript files specified in the script_files list will be included in the HTML page, allowing you to run and interact with them in the browser.
User
THis is preview.html it should load the script from scripts/script.js
ChatGPT

Apologies for the confusion. If you want the preview.html template to specifically load the script from scripts/script.js, you can modify the template as follows:

html
&lt;!DOCTYPE html&lt;
&lt;html&lt;
&lt;head&lt;
    &lt;title&lt;HTML Viewer&lt;/title&lt;
    &lt;script src="https://cdn.skypack.dev/dat.gui@0.7.7"&lt;&lt;/script&lt;
    &lt;script src="&#123;&#123; url_for('static', filename='scripts/script.js') }}"&lt;&lt;/script&lt;

    &lt;style type="text/css"&lt;
        html &#123;
            width: 100&#37;;
            height: 100&#37;;
            overflow: hidden;
        }
        
        body &#123;
            margin: 0;
            padding: 0;
            color: #fff;
            background-color: #000;
        }
        
        canvas &#123;
            -webkit-tap-highlight-color: transparent;
            tap-highlight-color: transparent;
            -webkit-user-select: none;
            user-select: none;
            cursor: pointer;
        }
    &lt;/style&lt;
    
    &lt;script&lt;
        // Add your JavaScript logic here
        // This script block will contain the main code for rendering and interacting with the canvas
        // You can customize it based on your requirements
        window.onload = function() &#123;
            // Your code here
        }
    &lt;/script&lt;
&lt;/head&lt;
&lt;body&lt;
    &lt;canvas id="canvas"&lt;&lt;/canvas&lt;
    &lt;div id="output"&lt;
        &#123;&#123; html_content | safe }}
    &lt;/div&lt;
&lt;/body&lt;
&lt;/html&lt;

In this updated template, the script is loaded using the url_for() function, which generates the correct URL for the scripts/script.js file. The url_for() function retrieves the static file from the static folder, which is the default folder for static files in Flask.

Ensure that the scripts/script.js file exists in the static folder within your Flask application's directory structure. If the file is located elsewhere, adjust the url_for() function accordingly.

Now, when you render the preview.html template, it will load the scripts/script.js file, allowing you to execute and interact with the JavaScript code within the HTML page.
User
&lt;script&lt;
        // Add your JavaScript logic here
        // This script block will contain the main code for rendering and interacting with the canvas
        // You can customize it based on your requirements
        window.onload = function() &#123;
            // Your code here
        }
    &lt;/script&lt;                    What is this ??? 
ChatGPT

The provided script block is a placeholder for your custom JavaScript code. It is where you can add your own logic, functions, and event handlers to interact with the HTML elements, manipulate the canvas, or perform any other desired operations.

Here's a breakdown of the script block:

javascript
// Add your JavaScript logic here
// This script block will contain the main code for rendering and interacting with the canvas
// You can customize it based on your requirements
window.onload = function() &#123;
    // Your code here
}

    window.onload: This event handler function executes when the HTML document and its associated resources (stylesheets, images, etc.) have finished loading. It ensures that your JavaScript code runs only when the entire page has loaded.

    // Your code here: This is where you can insert your custom JavaScript code. You can define functions, create variables, manipulate the DOM, interact with the canvas, handle events, or perform any other operations you need.

For example, you can use the script block to create and render shapes on the canvas, handle mouse or keyboard events, fetch data from APIs, perform calculations, or implement any other desired functionality.

To customize the behavior of your web page, you can modify the script block by adding your specific JavaScript code within the window.onload function.

Please replace the comment // Your code here with your own JavaScript code that reflects the desired behavior you want to achieve in your application.
User
All I want to achieve is in scripts/script.js   ??
ChatGPT

If you want to load and execute the JavaScript code from the scripts/script.js file without adding additional custom code in the HTML template, you can modify the preview.html template as follows:

html
&lt;!DOCTYPE html&lt;
&lt;html&lt;
&lt;head&lt;
    &lt;title&lt;HTML Viewer&lt;/title&lt;
    &lt;script src="https://cdn.skypack.dev/dat.gui@0.7.7"&lt;&lt;/script&lt;
    &lt;script src="&#123;&#123; url_for('static', filename='scripts/script.js') }}"&lt;&lt;/script&lt;

    &lt;style type="text/css"&lt;
        html &#123;
            width: 100&#37;;
            height: 100&#37;;
            overflow: hidden;
        }
        
        body &#123;
            margin: 0;
            padding: 0;
            color: #fff;
            background-color: #000;
        }
        
        canvas &#123;
            -webkit-tap-highlight-color: transparent;
            tap-highlight-color: transparent;
            -webkit-user-select: none;
            user-select: none;
            cursor: pointer;
        }
    &lt;/style&lt;
&lt;/head&lt;
&lt;body&lt;
    &lt;canvas id="canvas"&lt;&lt;/canvas&lt;
    &lt;div id="output"&lt;
        &#123;&#123; html_content | safe }}
    &lt;/div&lt;
&lt;/body&lt;
&lt;/html&lt;

This updated template removes the empty script block and instead loads the JavaScript code directly from the scripts/script.js file using the script tag with the src attribute. The url_for() function is used to generate the correct URL for the static file.

Ensure that the scripts/script.js file exists in the static folder within your Flask application's directory structure. If the file is located elsewhere, adjust the url_for() function accordingly.

With this modification, the scripts/script.js file will be loaded and executed in the HTML page, allowing you to achieve your desired functionality without requiring additional code in the HTML template.
User
The whole purpose is to load and edit different javascripts ( scripts/*.js  for testing  
ChatGPT

Apologies for the confusion. If you want to dynamically load and edit different JavaScript files from the scripts/ directory, you can modify the edit_script() function and the edit_script.html template as follows:

python
import os

# ... existing code ...

@app.route('/edit_script', methods=['GET', 'POST'])
def edit_script():
    if request.method == 'POST':
        selected_file = request.form['script_file']
        if selected_file.endswith('.js'):
            selected_file_path = os.path.join(script_dir, selected_file)
            shutil.copy(selected_file_path, script_file)
            return redirect(url_for('edit_script'))

    script_files = []
    for filename in os.listdir(script_dir):
        if filename.endswith('.js'):
            script_files.append(filename)

    return render_template('edit_script.html', script_files=script_files)

# ... existing code ...

In the edit_script() function, we retrieve the selected JavaScript file from the form submission and copy it to script.js using shutil.copy(). Then, we redirect back to the edit_script route to update the list of available script files.

Here's an example edit_script.html template that allows you to select and edit different JavaScript files:

html
&lt;!DOCTYPE html&lt;
&lt;html&lt;
&lt;head&lt;
    &lt;title&lt;Edit Script&lt;/title&lt;
&lt;/head&lt;
&lt;body&lt;
    &lt;h1&lt;Edit Script&lt;/h1&lt;
    &lt;form method="POST" action="&#123;&#123; url_for('edit_script') }}"&lt;
        &lt;label for="script_file"&lt;Select a JavaScript file:&lt;/label&lt;
        &lt;select name="script_file" id="script_file"&lt;
            &#123;&#37; for script_file in script_files &#37;}
                &lt;option value="&#123;&#123; script_file }}"&lt;&#123;&#123; script_file }}&lt;/option&lt;
            &#123;&#37; endfor &#37;}
        &lt;/select&lt;
        &lt;br&lt;
        &lt;input type="submit" value="Load Script"&lt;
    &lt;/form&lt;
    &lt;hr&lt;
    &lt;h2&lt;Edit the selected script:&lt;/h2&lt;
    &lt;form method="POST" action="&#123;&#123; url_for('save_script') }}"&lt;
        &lt;textarea name="script_content" rows="10" cols="50"&lt;&#123;&#123; script_content }}&lt;/textarea&lt;
        &lt;br&lt;
        &lt;input type="submit" value="Save Script"&lt;
    &lt;/form&lt;
&lt;/body&lt;
&lt;/html&lt;

In this edit_script.html template, we generate a dropdown list (&lt;select&lt;) of the available JavaScript files using a loop. When a file is selected and the form is submitted, the route will handle the selection and redirect back to the edit_script route to update the list.

Below the file selection section, we provide a text area (&lt;textarea&lt;) where you can edit the content of the selected script. When the form is submitted, it will call the save_script() route to save the updated script content.

Make sure to adjust the file paths and URLs based on your directory structure and Flask setup.

With these modifications, you can select and edit different JavaScript files from the scripts/ directory, and the updated content will be saved to scripts/script.js for further viewing and editing.
User
This still does not let me choose a javascript file from scripts/*.js    Why cant you do that ?
ChatGPT

I apologize for the confusion. It seems I misunderstood your requirements earlier. To allow the selection of JavaScript files from the scripts/ directory, you can modify the edit_script() function and the edit_script.html template as follows:

python
import os

# ... existing code ...

@app.route('/edit_script', methods=['GET', 'POST'])
def edit_script():
    if request.method == 'POST':
        selected_file = request.form['script_file']
        if selected_file.endswith('.js'):
            selected_file_path = os.path.join(script_dir, selected_file)
            shutil.copy(selected_file_path, script_file)
            return redirect(url_for('edit_script'))

    script_files = []
    for filename in os.listdir(script_dir):
        if filename.endswith('.js'):
            script_files.append(filename)

    return render_template('edit_script.html', script_files=script_files)

# ... existing code ...

In the modified edit_script() function, we list all the JavaScript files in the scripts/ directory and add them to the script_files list. This allows us to populate the dropdown list in the edit_script.html template with the available JavaScript files.

Here's an example edit_script.html template that enables the selection of JavaScript files:

html
&lt;!DOCTYPE html&lt;
&lt;html&lt;
&lt;head&lt;
    &lt;title&lt;Edit Script&lt;/title&lt;
&lt;/head&lt;
&lt;body&lt;
    &lt;h1&lt;Edit Script&lt;/h1&lt;
    &lt;form method="POST" action="&#123;&#123; url_for('edit_script') }}"&lt;
        &lt;label for="script_file"&lt;Select a JavaScript file:&lt;/label&lt;
        &lt;select name="script_file" id="script_file"&lt;
            &#123;&#37; for script_file in script_files &#37;}
                &lt;option value="&#123;&#123; script_file }}"&lt;&#123;&#123; script_file }}&lt;/option&lt;
            &#123;&#37; endfor &#37;}
        &lt;/select&lt;
        &lt;br&lt;
        &lt;input type="submit" value="Load Script"&lt;
    &lt;/form&lt;
    &lt;hr&lt;
    &lt;h2&lt;Edit the selected script:&lt;/h2&lt;
    &lt;form method="POST" action="&#123;&#123; url_for('save_script') }}"&lt;
        &lt;textarea name="script_content" rows="10" cols="50"&lt;&#123;&#123; script_content }}&lt;/textarea&lt;
        &lt;br&lt;
        &lt;input type="submit" value="Save Script"&lt;
    &lt;/form&lt;
&lt;/body&lt;
&lt;/html&lt;

In this updated template, the &lt;select&lt; element is populated with the available JavaScript files (script_files) using a loop. When a file is selected and the form is submitted, the selected file is copied to scripts/script.js, and the page is redirected back to the edit_script route.

Please ensure that the file paths, directory structure, and Flask setup are adjusted according to your requirements.

With these modifications, you should be able to select different JavaScript files from the scripts/ directory and load them for editing in the edit_script route.
User
when you choose the javascript file it does not load in the textarea
ChatGPT

Apologies for the oversight. To ensure that the selected JavaScript file is loaded into the textarea for editing, you need to modify the edit_script() route to read the content of the selected file and pass it to the template. Here's an updated version of the code:

python
import os

# ... existing code ...

@app.route('/edit_script', methods=['GET', 'POST'])
def edit_script():
    if request.method == 'POST':
        selected_file = request.form['script_file']
        if selected_file.endswith('.js'):
            selected_file_path = os.path.join(script_dir, selected_file)
            shutil.copy(selected_file_path, script_file)
            with open(selected_file_path, 'r') as file:
                script_content = file.read()
            return render_template('edit_script.html', script_files=script_files, script_content=script_content)

    script_files = []
    for filename in os.listdir(script_dir):
        if filename.endswith('.js'):
            script_files.append(filename)

    return render_template('edit_script.html', script_files=script_files)

# ... existing code ...

In this updated code, after copying the selected JavaScript file to scripts/script.js, we also read the content of the selected file using open() and file.read(). Then we pass the script_content variable to the edit_script.html template along with the script_files list.

Ensure that the file paths, directory structure, and Flask setup are adjusted accordingly.

With this modification, when you select a JavaScript file from the dropdown list and submit the form, the content of the selected file will be loaded into the textarea for editing in the edit_script.html template.
User
local variable 'script_files' referenced before assignment
ChatGPT

Apologies for the error. The script_files variable needs to be defined outside the if statement to ensure it's accessible in both branches of the code. Here's the corrected code:

python
import os

# ... existing code ...

@app.route('/edit_script', methods=['GET', 'POST'])
def edit_script():
    script_files = []
    for filename in os.listdir(script_dir):
        if filename.endswith('.js'):
            script_files.append(filename)

    if request.method == 'POST':
        selected_file = request.form['script_file']
        if selected_file.endswith('.js'):
            selected_file_path = os.path.join(script_dir, selected_file)
            shutil.copy(selected_file_path, script_file)
            with open(selected_file_path, 'r') as file:
                script_content = file.read()
            return render_template('edit_script.html', script_files=script_files, script_content=script_content)

    return render_template('edit_script.html', script_files=script_files)

# ... existing code ...

Now the script_files variable is defined before the if statement and can be accessed in both the if and return branches of the code. This ensures that the variable is available when rendering the template.

Please note that the above code assumes that script_dir is a defined variable representing the directory path of the JavaScript files.

With this update, the script_files variable should be accessible and prevent the "local variable 'script_files' referenced before assignment" error.
User
from flask import Flask, render_template, request, redirect, url_for
import datetime
import shutil
import os
app = Flask(__name__)
@app.route('/')
def index():
    return render_template('index.html')
@app.route('/NOTES')
def plain_html():
    return render_template('NOTES.html')
@app.route('/preview', methods=['GET', 'POST'])
def preview():
    script_files = []  # List to store the names of the JavaScript files

    # Read all JavaScript files from the 'scripts/' directory
    script_dir = 'scripts/'
    for filename in os.listdir(script_dir):
        if filename.endswith('.js'):
            script_path = os.path.join(script_dir, filename)
            with open(script_path, 'r') as file:
                script_content = file.read()
                script_files.append(script_content)

    # HTML content to be displayed
    html_content = "&lt;p&lt;This is a dynamic HTML content. It can include various elements, &lt;br /&lt;such as paragraphs, headings, lists, etc.&lt;/p&lt;"

    return render_template('preview.html', html_content=html_content, script_files=script_files)

@app.route('/edit_script', methods=['GET', 'POST'])
def edit_script():
    script_dir = "scripts/"
    script_files = []
    for filename in os.listdir(script_dir):
        if filename.endswith('.js'):
            script_files.append(filename)

    if request.method == 'POST':
        selected_file = request.form['script_file']
        if selected_file.endswith('.js'):
            selected_file_path = os.path.join(script_dir, selected_file)
            shutil.copy(selected_file_path, script_file)
            with open(selected_file_path, 'r') as file:
                script_content = file.read()
            return render_template('edit_script.html', script_files=script_files, script_content=script_content)

    return render_template('edit_script.html', script_files=script_files)


# Define the file path to store the script content
script_file = os.path.join(os.getcwd(), 'scripts', 'script.js')
@app.route('/save_script', methods=['POST'])
def save_script():
    # Retrieve the updated script content from the form data
    updated_script = request.form.get('script_content')
    # Write the updated script content to the file
    with open(script_file, 'w') as file:
        file.write(updated_script)
    return render_template('index.html')
if __name__ == '__main__':
   app.run(debug=True, port=5000)

This does not show the  scripts/script.js  in preview.html ???
ChatGPT

Apologies for the confusion. To ensure that the scripts/script.js file is loaded and displayed in the preview.html template, you need to make a small modification in the preview() route. Here's the corrected code:

python
from flask import Flask, render_template, request, redirect, url_for
import os

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/NOTES')
def plain_html():
    return render_template('NOTES.html')

@app.route('/preview', methods=['GET', 'POST'])
def preview():
    script_files = []  # List to store the names of the JavaScript files

    # Read all JavaScript files from the 'scripts/' directory
    script_dir = 'scripts/'
    for filename in os.listdir(script_dir):
        if filename.endswith('.js'):
            script_files.append(filename)

    # HTML content to be displayed
    html_content = "&lt;p&lt;This is a dynamic HTML content. It can include various elements, &lt;br /&lt;such as paragraphs, headings, lists, etc.&lt;/p&lt;"

    return render_template('preview.html', html_content=html_content, script_files=script_files)

# ... existing code ...

if __name__ == '__main__':
   app.run(debug=True, port=5000)

In the preview() route, we retrieve the list of JavaScript files in the scripts/ directory and pass it as the script_files variable to the preview.html template.

Make sure that the scripts/ directory contains the necessary JavaScript files.

With this modification, when you visit the /preview route, the scripts/script.js file should be available as script_files in the preview.html template, allowing you to display and interact with it.
User
@app.route('/preview', methods=['GET', 'POST'])
def preview():
    script_files = []  # List to store the names of the JavaScript files

    # Read all JavaScript files from the 'scripts/' directory
    script_dir = 'scripts/'
    for filename in os.listdir(script_dir):
        if filename.endswith('.js'):
            script_files.append(filename)

    # HTML content to be displayed
    html_content = "&lt;p&lt;This is a dynamic HTML content. It can include various elements, &lt;br /&lt;such as paragraphs, headings, lists, etc.&lt;/p&lt;"

    return render_template('preview.html', html_content=html_content, script_files=script_files)
I do not understand the listdir when I just want to see scripts/script.js  ??
ChatGPT

Apologies for the confusion. If you only want to display the scripts/script.js file in the preview.html template, you can modify the code as follows:

python
@app.route('/preview', methods=['GET', 'POST'])
def preview():
    script_file = 'scripts/script.js'  # Path to the script file

    # Check if the script file exists
    if os.path.isfile(script_file):
        # Read the content of the script file
        with open(script_file, 'r') as file:
            script_content = file.read()
    else:
        script_content = 'No script file found'

    # HTML content to be displayed
    html_content = "&lt;p&lt;This is a dynamic HTML content. It can include various elements, &lt;br /&lt;such as paragraphs, headings, lists, etc.&lt;/p&lt;"

    return render_template('preview.html', html_content=html_content, script_content=script_content)

In this modified code, we directly specify the path to the scripts/script.js file using the script_file variable. We then check if the file exists using os.path.isfile(). If the file exists, we read its content using open() and store it in the script_content variable. If the file doesn't exist, we set script_content to indicate that no script file was found.

Ensure that the scripts/script.js file exists in the specified location.

With this modification, when you visit the /preview route, the content of the scripts/script.js file will be displayed in the preview.html template.
User
I want to start a log file to find problems ?? 
ChatGPT

To start a log file in your Flask application, you can use the built-in logging module in Python. Here's an example of how you can configure logging in your Flask app:

python
import logging
from logging.handlers import RotatingFileHandler
from flask import Flask

app = Flask(__name__)

# Configure logging
log_file = 'app.log'  # Path to the log file

# Create a rotating file handler to manage log files
handler = RotatingFileHandler(log_file, maxBytes=1024 * 1024, backupCount=10)
handler.setLevel(logging.INFO)

# Create a log formatter
formatter = logging.Formatter('&#37;(asctime)s - &#37;(levelname)s - &#37;(message)s')
handler.setFormatter(formatter)

# Add the log handler to the Flask app
app.logger.addHandler(handler)

# ... existing routes and code ...

if __name__ == '__main__':
    app.run(debug=True, port=5000)

In this example, we configure a rotating file handler (RotatingFileHandler) that will create a log file named app.log. The maxBytes argument specifies the maximum file size in bytes before it rotates to a new file, and backupCount defines the number of backup log files to keep.

We set the log level to logging.INFO to log messages at the INFO level and above. You can adjust the log level according to your needs.

Next, we create a log formatter using the logging.Formatter class. The formatter specifies the format of each log message, including the timestamp, log level, and message content.

Finally, we add the log handler (handler) to the Flask app's logger using app.logger.addHandler(handler). This ensures that any log messages generated by Flask or your application will be written to the log file.

You can use logging statements throughout your application to record important information, warnings, and errors. For example:

python
@app.route('/example')
def example():
    app.logger.info('Processing example route')
    # ... your code ...
    return 'Example route'

In the above example, the log statement app.logger.info('Processing example route') logs an INFO level message indicating that the example route is being processed.

Remember to adjust the log file path (log_file) and customize the logging levels and messages to fit your application's needs.

With this setup, you can start logging messages to the specified log file (app.log) and use it to track and troubleshoot any issues in your Flask application.
User
format with date and time 
ChatGPT

To format the log messages with date and time, you can modify the log formatter by adding a date and time format specifier. Here's an updated example:

python
import logging
from logging.handlers import RotatingFileHandler
from flask import Flask

app = Flask(__name__)

# Configure logging
log_file = 'app.log'  # Path to the log file

# Create a rotating file handler to manage log files
handler = RotatingFileHandler(log_file, maxBytes=1024 * 1024, backupCount=10)
handler.setLevel(logging.INFO)

# Create a log formatter with date and time
formatter = logging.Formatter('&#37;(asctime)s - &#37;(levelname)s - &#37;(message)s', '&#37;Y-&#37;m-&#37;d &#37;H:&#37;M:&#37;S')
handler.setFormatter(formatter)

# Add the log handler to the Flask app
app.logger.addHandler(handler)

# ... existing routes and code ...

if __name__ == '__main__':
    app.run(debug=True, port=5000)

In the updated code, we modified the log formatter creation to include a date and time format specifier in the logging.Formatter constructor. The second argument '&#37;Y-&#37;m-&#37;d &#37;H:&#37;M:&#37;S' specifies the format for the date and time. You can adjust this format according to your preference.

With this change, the log messages will now include the date and time information in the specified format.

For example, a log message would appear like this:
2022-01-01 12:34:56 - INFO - This is an example log message.

Feel free to customize the log message format and adjust the log file path (log_file) to suit your requirements.
User
how should this read ?                       from flask import Flask
# Configure logging
log_file = 'app.log'  # Path to the log file

# Create a rotating file handler to manage log files
handler = RotatingFileHandler(log_file, maxBytes=1024 * 1024, backupCount=10)
handler.setLevel(logging.INFO)

# Create a log formatter with date and time
formatter = logging.Formatter('&#37;(asctime)s - &#37;(levelname)s - &#37;(message)s', '&#37;Y-&#37;m-&#37;d &#37;H:&#37;M:&#37;S')
handler.setFormatter(formatter)


app = Flask(__name__)
# Add the log handler to the Flask app
app.logger.addHandler(handler)
# Configure logging

# Create a rotating file handler to manage log files
handler = RotatingFileHandler(log_file, maxBytes=1024 * 1024, backupCount=10)
handler.setLevel(logging.INFO)

# Create a log formatter
formatter = logging.Formatter('&#37;(asctime)s - &#37;(levelname)s - &#37;(message)s')
handler.setFormatter(formatter)

# Add the log handler to the Flask app
app.logger.addHandler(handler)
ChatGPT

Here's the corrected version of the code where the logging configuration is properly placed:

python
import logging
from logging.handlers import RotatingFileHandler
from flask import Flask

app = Flask(__name__)

# Configure logging
log_file = 'app.log'  # Path to the log file

# Create a rotating file handler to manage log files
handler = RotatingFileHandler(log_file, maxBytes=1024 * 1024, backupCount=10)
handler.setLevel(logging.INFO)

# Create a log formatter with date and time
formatter = logging.Formatter('&#37;(asctime)s - &#37;(levelname)s - &#37;(message)s', '&#37;Y-&#37;m-&#37;d &#37;H:&#37;M:&#37;S')
handler.setFormatter(formatter)

# Add the log handler to the Flask app
app.logger.addHandler(handler)

# ... existing routes and code ...

if __name__ == '__main__':
    app.run(debug=True, port=5000)

In this corrected code, the logging configuration is placed before creating the Flask app instance. The log handler, formatter, and log file path are defined first.

Then, the log handler is added to the Flask app's logger (app.logger.addHandler(handler)), ensuring that log messages generated by Flask or your application will be written to the log file.

Make sure to adjust the log file path (log_file) according to your desired location.

With this modification, the logging configuration will be set up correctly in your Flask application.
User
Explain every step in detail , I also do not understand log levels
ChatGPT
2 / 2

Certainly! Here's a step-by-step explanation of the code and its components:

    Import necessary modules:

python
import logging
from logging.handlers import RotatingFileHandler
from flask import Flask

The code imports the logging module to handle logging, RotatingFileHandler from logging.handlers to manage log files, and the Flask class from the flask module.

    Set up log file path:

python
log_file = 'app.log'  # Path to the log file

The log_file variable specifies the path to the log file. You can modify this to define the desired location and filename for your log file.

    Create a rotating file handler:

python
handler = RotatingFileHandler(log_file, maxBytes=1024 * 1024, backupCount=10)
handler.setLevel(logging.INFO)

The RotatingFileHandler is used to manage log files. It rotates the log file when it reaches a certain size (maxBytes) and keeps a specified number of backup files (backupCount). In this example, the log file rotates when it reaches 1 MB, and a maximum of 10 backup files is maintained. The setLevel() method sets the log level for the handler. In this case, it's set to logging.INFO, which captures log messages at the INFO level and above.

    Create a log formatter with date and time:

python
formatter = logging.Formatter('&#37;(asctime)s - &#37;(levelname)s - &#37;(message)s', '&#37;Y-&#37;m-&#37;d &#37;H:&#37;M:&#37;S')
handler.setFormatter(formatter)

The logging.Formatter is used to define the format of the log messages. The first argument is the format string, which specifies how the log message should appear. In this example, '&#37;(asctime)s - &#37;(levelname)s - &#37;(message)s' formats the log message to include the date, time, log level, and message. The second argument specifies the date and time format. &#37;Y-&#37;m-&#37;d &#37;H:&#37;M:&#37;S represents the format as year-month-day hour:minute:second.

    Add the log handler to the Flask app:

python
app.logger.addHandler(handler)

The addHandler() method adds the log handler (handler) to the Flask app's logger (app.logger). This ensures that any log messages generated by Flask or your application will be written to the log file.

    Create the Flask app instance:

python
app = Flask(__name__)

The Flask class is used to create the Flask application instance.

    Define routes and other application code:

python
# ... existing routes and code ...

This is where you define your Flask routes and other application code.

    Run the Flask application:

python
if __name__ == '__main__':
    app.run(debug=True, port=5000)

This code block ensures that the Flask application runs only when the script is executed directly, not when imported as a module. It starts the Flask development server, enabling you to run the application locally. The debug=True parameter enables debug mode, which provides more detailed error messages during development. The port=5000 parameter sets the port number on which the server runs.

Regarding log levels:
Log levels determine the severity or importance of log messages. The commonly used log levels, in increasing order of severity, are:

    DEBUG: Detailed information for debugging purposes.
    INFO: General information messages to track the progress of the application.
    WARNING: Indication of potential issues or anomalies that don't necessarily disrupt the application's functionality.
    ERROR: Indication of errors or exceptional situations that may impact the application's functionality.
    CRITICAL: Indicates critical errors or severe problems that may cause the application to terminate.

By setting the log level, you control which messages are recorded based on their severity. In the code example, the log level for the handler is set to logging.INFO, which captures messages at the INFO level and above. This means that log messages with levels of INFO, WARNING, ERROR, and CRITICAL will be recorded in the log file. Messages with a lower level, such as DEBUG, won't be recorded.

You can adjust the log level based on your application's needs and the level of detail you want to capture in the log file.
User
What is the best way to show if you have a warning on a line of code ?
ChatGPT

When you encounter a warning in your code, the best way to display it depends on the context and purpose of your application. Here are a few commonly used approaches:

    Logging: You can use the logging module to record warnings. In Python, warnings can be captured using the warnings module and logged using the logging module. This allows you to control the level and format of warning messages. For example:

python
import logging
import warnings

# Set up logging
logging.basicConfig(filename='app.log', level=logging.WARNING)

# Capture and log warnings
warnings.warn('This is a warning message')
logging.warning('This is a warning message')

In this example, the warnings module is used to generate a warning message, and the logging module is used to log it. The basicConfig() function sets up the logging configuration, including the log file and log level. The warn() function generates a warning, and the warning() function logs the warning message.

    Console Output: If you want to display warnings directly to the console or terminal, you can use the print() function or the logging module with a suitable log level (e.g., logging.warning()). This approach is useful for debugging or providing real-time feedback during development.

    User Interface: If your application has a graphical user interface (GUI), you can display warnings in an appropriate manner. This could involve using pop-up dialog boxes, notifications, or dedicated warning panels. The specific approach will depend on the GUI framework or library you are using.

Choose the method that aligns with your application's design and the intended audience. It's important to provide clear and informative warning messages to help users understand and address potential issues in your application.
    &lt;/pre&gt;&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/&gt;
&lt;style&gt;
canvas &#123;
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body onload="startGame()"&gt;
&lt;script&gt;

var myGamePiece;
var myObstacles = [];
var myScore;

function startGame() &#123;
    myGamePiece = new component(30, 30, "red", 10, 120);
    myGamePiece.gravity = 0.05;
    myScore = new component("30px", "Consolas", "black", 280, 40, "text");
    myGameArea.start();
}

var myGameArea = &#123;
    canvas : document.createElement("canvas"),
    start : function() &#123;
        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.frameNo = 0;
        this.interval = setInterval(updateGameArea, 20);
        },
    clear : function() &#123;
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

function component(width, height, color, x, y, type) &#123;
    this.type = type;
    this.score = 0;
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;    
    this.x = x;
    this.y = y;
    this.gravity = 0;
    this.gravitySpeed = 0;
    this.update = function() &#123;
        ctx = myGameArea.context;
        if (this.type == "text") &#123;
            ctx.font = this.width + " " + this.height;
            ctx.fillStyle = color;
            ctx.fillText(this.text, this.x, this.y);
        } else &#123;
            ctx.fillStyle = color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    }
    this.newPos = function() &#123;
        this.gravitySpeed += this.gravity;
        this.x += this.speedX;
        this.y += this.speedY + this.gravitySpeed;
        this.hitBottom();
    }
    this.hitBottom = function() &#123;
        var rockbottom = myGameArea.canvas.height - this.height;
        if (this.y &gt; rockbottom) &#123;
            this.y = rockbottom;
            this.gravitySpeed = 0;
        }
    }
    this.crashWith = function(otherobj) &#123;
        var myleft = this.x;
        var myright = this.x + (this.width);
        var mytop = this.y;
        var mybottom = this.y + (this.height);
        var otherleft = otherobj.x;
        var otherright = otherobj.x + (otherobj.width);
        var othertop = otherobj.y;
        var otherbottom = otherobj.y + (otherobj.height);
        var crash = true;
        if ((mybottom &lt; othertop) || (mytop &gt; otherbottom) || (myright &lt; otherleft) || (myleft &gt; otherright)) &#123;
            crash = false;
        }
        return crash;
    }
}

function updateGameArea() &#123;
    var x, height, gap, minHeight, maxHeight, minGap, maxGap;
    for (i = 0; i &lt; myObstacles.length; i += 1) &#123;
        if (myGamePiece.crashWith(myObstacles[i])) &#123;
            return;
        } 
    }
    myGameArea.clear();
    myGameArea.frameNo += 1;
    if (myGameArea.frameNo == 1 || everyinterval(150)) &#123;
        x = myGameArea.canvas.width;
        minHeight = 20;
        maxHeight = 200;
        height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
        minGap = 50;
        maxGap = 200;
        gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
        myObstacles.push(new component(10, height, "green", x, 0));
        myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
    }
    for (i = 0; i &lt; myObstacles.length; i += 1) &#123;
        myObstacles[i].x += -1;
        myObstacles[i].update();
    }
    myScore.text="SCORE: " + myGameArea.frameNo;
    myScore.update();
    myGamePiece.newPos();
    myGamePiece.update();
}

function everyinterval(n) &#123;
    if ((myGameArea.frameNo / n) &#37; 1 == 0) &#123;return true;}
    return false;
}

function accelerate(n) &#123;
    myGamePiece.gravity = n;
}
&lt;/script&gt;
&lt;br&gt;
&lt;button onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.05)"&gt;ACCELERATE&lt;/button&gt;
&lt;p&gt;Use the ACCELERATE button to stay in the air&lt;/p&gt;
&lt;p&gt;How long can you stay alive?&lt;/p&gt;
&lt;button type="button"
onclick="document.getElementById('demo').innerHTML = Date()"&gt;
Click me to display Date and Time.&lt;/button&gt;

&lt;p id="demo"&gt;&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Outlined Image&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Outlined Image&lt;/h1&gt;
    Original:
    &lt;img src="&#123;&#123; image_orig }}" alt="original Image" style="width: 300px; height: auto;"&gt;&nbsp;&nbsp;&nbsp;
    Outlined:
    &lt;img src="&#123;&#123; image_path }}" alt="outlined Image" style="width: 300px; height: auto;"&gt;&nbsp;&nbsp;&nbsp;
    Blk-n-White:
    &lt;img src="&#123;&#123; image_path2 }}" alt="black_Image" style="width: 300px; height: auto;"&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Overlay Text&lt;/title&gt;
&lt;/head&gt;
&lt;body style="background-color: cadetblue;"&gt;
    &lt;h1&gt;Overlay Text Result&lt;/h1&gt;
    &lt;a href="&#123;&#123; url_for('indexA') }}"&gt;HOME&lt;/a&gt;&lt;br /&gt;
    &lt;img src="&#123;&#123; output_image_path }}" alt="Overlay Text Result"&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Audio Player&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Audio Player&lt;/h1&gt;
    &lt;audio controls&gt;
        &lt;source src="&#123;&#123; audio_file }}" type="audio/mpeg"&gt;
        Your browser does not support the audio element.
    &lt;/audio&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;HTML Viewer&lt;/title&gt;
    &lt;script src="https://cdn.skypack.dev/dat.gui@0.7.7"&gt;&lt;/script&gt;
    &#123;&#37; for script_file in script_files &#37;}
        &lt;script&gt;
            &#123;&#123; script_file | safe }}
        &lt;/script&gt;
    &#123;&#37; endfor &#37;}

    &lt;style type="text/css"&gt;
        html&#123;
            width: 100&#37;;
            height: 100&#37;;
            overflow: hidden;
        }
        
        body &#123;
            margin: 0;
            padding: 0;
            color: #fff;
            background-color: #000;
        }
        
        canvas &#123;
            -webkit-tap-highlight-color: transparent;
            tap-highlight-color: transparent;
            -webkit-user-select: none;
            user-select: none;
            cursor: pointer;
        }
        &lt;/style&gt;   
&lt;/head&gt;
&lt;body&gt;
    &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
    &lt;div id="output"&gt;
        &#123;&#123; html_content | safe }}
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;HTML Viewer&lt;/title&gt;
    &lt;script src="https://cdn.skypack.dev/dat.gui@0.7.7"&gt;&lt;/script&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
    &lt;div id="output"&gt;
        &#123;&#123; html_content | safe }}
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;HTML Viewer&lt;/title&gt;
    &lt;!--script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r67/three.min.js"&gt;&lt;/script
https://zeptojs.com/
    --&gt;
    &lt;link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"&gt;

    &lt;style&gt;
        body&#123; background-color:bisque; }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;canvas id="canvas"&gt;&lt;/canvas&gt;

    &lt;script src="static/scripts/script.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        // Replace this with your actual AJAX request
        $.ajax(&#123;
            url: '/save_favicon',
            method: 'POST',
            contentType: 'application/json', // Set the content type to JSON
            data: JSON.stringify(&#123; "image_data": imageData }), // Your JSON data here
            success: function(response) &#123;
                console.log(response); // Handle the response from the server
            },
            error: function(xhr, textStatus, errorThrown) &#123;
                console.error(xhr.responseText); // Handle errors
            }
        });
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;HTML Viewer&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;HTML Viewer&lt;/h1&gt;
    &lt;div id="output"&gt;
        &#123;&#123; html_content | safe }}
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;HTML Viewer&lt;/title&gt;
    &lt;!--script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r67/three.min.js"&gt;&lt;/script
https://zeptojs.com/
    --&gt;
    &lt;link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"&gt;

    &lt;style&gt;
        body&#123; background-color:bisque; }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;canvas id="canvas"&gt;&lt;/canvas&gt;

    &lt;script src="static/scripts/two_canvas.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        // Replace this with your actual AJAX request
        $.ajax(&#123;
            url: '/save_favicon',
            method: 'POST',
            contentType: 'application/json', // Set the content type to JSON
            data: JSON.stringify(&#123; "image_data": imageData }), // Your JSON data here
            success: function(response) &#123;
                console.log(response); // Handle the response from the server
            },
            error: function(xhr, textStatus, errorThrown) &#123;
                console.error(xhr.responseText); // Handle errors
            }
        });
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Upload Images to Blend&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;a style ="font-size: 24px;color: brown;" href="&#123;&#123; url_for('index') }}"&gt;HOME&lt;/a&gt;
    &lt;h1&gt;Upload Images to Blend&lt;/h1&gt;
    &lt;form action="&#123;&#123; url_for('process_images') }}" method="post" enctype="multipart/form-data"&gt;
      &lt;p&gt;Select the first image:&lt;/p&gt;
      &lt;input type="file" name="image1"&gt;&lt;br&gt;
      &lt;p&gt;Select the second image:&lt;/p&gt;
      &lt;input type="file" name="image2"&gt;&lt;br&gt;
      &lt;p&gt;Select the third image:&lt;/p&gt;
      &lt;input type="file" name="image3"&gt;&lt;br&gt;&lt;br&gt;
      &lt;input type="submit" value="Process Images"&gt;
    &lt;/form&gt;

  &lt;br&gt;
    &lt;img src="&#123;&#123; url_for('static', filename='images/image2.jpg') }}" alt="Example image"&gt;&lt;br /&gt;
  &lt;/body&gt;
&lt;/html&gt;

&lt;!-- app_utilities.html--&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Processing Text - txt and html files&lt;/title&gt;
    &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/body.css') }}"&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h1&gt;Processing Text - txt and html files&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="columns"&gt;
            &lt;div class="column left"&gt;
&lt;a style="font-size:30px;color:red;" href="&#123;&#123; url_for('index') }}"&gt;HOME&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('mk_text') }}"&gt;Create a Text File&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('view_text') }}"&gt;View Text Files&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_file') }}"&gt;Edit Text File&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('format_file') }}"&gt;Format Text Files&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_formatted') }}"&gt;Edit Formatted Text&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_template') }}"&gt;Edit a Template&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('the_description') }}"&gt;View FlaskAppArchitect Description&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_description') }}"&gt;Edit FlaskAppArchitect Description&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('enter_code') }}"&gt;Enter Code in codehints.txt&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('search_code') }}"&gt;Search Code Hints&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;

                &lt;a href="&#123;&#123; url_for('edit_css') }}"&gt;Edit Css Files&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('terminal_index') }}"&gt;Terminal Emulator&lt;/a&gt;&lt;br /&gt;
             
            &lt;/div&gt;
            &lt;div class="column right"&gt;
                &lt;h2&gt;Random Video&lt;/h2&gt;
                &lt;p&gt;This will eventually be an instruction video on how to use this page&lt;/p&gt;&lt;br /&gt;

                &lt;video controls&gt;
                    &lt;source src="&#123;&#123; video }}" type="video/mp4"&gt;
                    Your browser does not support the video tag.
                &lt;/video&gt;

            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&#123;&#37; extends 'base1.html' &#37;}

&#123;&#37; block title &#37;}
    Products
&#123;&#37; endblock &#37;}

&#123;&#37; block content &#37;}
    &lt;h1&gt;Products&lt;/h1&gt;
    &lt;table&gt;
        &lt;tr&gt;
            &lt;th&gt;ID&lt;/th&gt;
            &lt;th&gt;Name&lt;/th&gt;
            &lt;th&gt;Description&lt;/th&gt;
            &lt;th&gt;Price&lt;/th&gt;
            &lt;th&gt;Actions&lt;/th&gt;
        &lt;/tr&gt;
        &#123;&#37; for product in products &#37;}
        &lt;tr&gt;
            &lt;td&gt;&#123;&#123; product[0] }}&lt;/td&gt;
            &lt;td&gt;&#123;&#123; product[1] }}&lt;/td&gt;
            &lt;td&gt;&#123;&#123; product[2] }}&lt;/td&gt;
            &lt;td&gt;&#123;&#123; product[3] }}&lt;/td&gt;
            &lt;td&gt;
                &lt;a href="&#123;&#123; url_for('edit_product', product_id=product[0]) }}"&gt;Edit&lt;/a&gt;
                &lt;form action="&#123;&#123; url_for('delete_product', product_id=product[0]) }}" method="post"&gt;
                    &lt;button type="submit"&gt;Delete&lt;/button&gt;
                &lt;/form&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &#123;&#37; endfor &#37;}
    &lt;/table&gt;
    &lt;hr&gt;
    &lt;h1&gt;Add New Product&lt;/h1&gt;
    &lt;form action="/products" method="post"&gt;
        &lt;label for="name"&gt;Name:&lt;/label&gt;
        &lt;input type="text" name="name"&gt;&lt;br&gt;
        &lt;label for="description"&gt;Description:&lt;/label&gt;
        &lt;input type="text" name="description"&gt;&lt;br&gt;
        &lt;label for="price"&gt;Price:&lt;/label&gt;
        &lt;input type="text" name="price"&gt;&lt;br&gt;
        &lt;input type="submit" value="Add Product"&gt;
    &lt;/form&gt;
&#123;&#37; endblock &#37;}
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Resize and Overlay Videos&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Resize and Overlay Videos&lt;/h1&gt;

    &lt;video controls&gt;
        &lt;source src="&#123;&#123; video_path }}" type="video/mp4"&gt;
        Your browser does not support the video tag.
    &lt;/video&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Resized and Overlaid Video&lt;/title&gt;
    &lt;style&gt;
        body &#123;
            font-family: Arial, sans-serif;
            background-color: #121212;
            color: #ffffff;
            text-align: center;
        }
        video &#123;
            max-width: 100&#37;;
            height: auto;
            margin: 20px;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Resized and Overlaid Video&lt;/h1&gt;
    &lt;video controls&gt;
        &lt;source src="&#123;&#123; url_for('static', filename=video) }}" type="video/mp4"&gt;
        Your browser does not support the video tag.
    &lt;/video&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Uploaded Image&lt;/title&gt;
  &lt;/head&gt;
  &lt;body style="background-color:powderblue;"&gt;
    &lt;center&gt;
    &lt;h1&gt;Uploaded Image&lt;/h1&gt;
    &lt;a style="color:red;font-size: large;" href="&#123;&#123; url_for('index') }}"&gt;RETURN HOME&lt;/a&gt;&lt;br /&gt;&lt;br /&gt; 
    &lt;img src="&#123;&#123; url_for('static', filename='images/uploads/' + filename) }}" alt="Uploaded Image"&gt;
  &lt;/center&gt;
  &lt;/body&gt;
&lt;/html&gt;

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Search Results&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Search Results&lt;/h1&gt;
    &lt;ul&gt;
        &#123;&#37; for result in results &#37;}
            &lt;pre&gt;&#123;&#123; result }}&lt;/pre&gt;
        &#123;&#37; endfor &#37;}
    &lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Uploaded Video&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Uploaded Video&lt;/h1&gt;
    &lt;p&gt;Here is your video:&lt;/p&gt;
    &lt;video width="480" height="480" controls&gt;
      &lt;source src="&#123;&#123; url_for('static', filename=output_file) }}?timestamp=&#123;&#123; timestamp }}" type="video/mp4"&gt;
      Your browser does not support the video tag.
    &lt;/video&gt;
    &lt;p&gt;Timestamp: &#123;&#123; timestamp }}&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
&lt;!-- app_utilities.html--&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Run Bash Command&lt;/title&gt;
    &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/flask.css') }}"&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/base.css') }}"&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h1&gt;Run Bash Command&lt;/h1&gt;
        &lt;/div&gt;
            &lt;div class="column left"&gt;
    &lt;form action="&#123;&#123; url_for('run_bash') }}" method="POST"&gt;
        &lt;label for="bash_command"&gt;Enter Bash Command:&lt;/label&gt;
        &lt;textarea name="bash_command" id="bash_command" rows="4" cols="50"&gt;&lt;/textarea&gt;
        &lt;br&gt;
        &lt;button type="submit"&gt;Run Command&lt;/button&gt;
    &lt;/form&gt;
    
    &lt;h2&gt;Result:&lt;/h2&gt;
    &lt;pre&gt;&#123;&#123; result }}&lt;/pre&gt;
&lt;/div&gt;
            &lt;div class="column right"&gt;
                &lt;h2&gt;Random Video&lt;/h2&gt;
                &lt;p&gt;This will evenually be an instruction video on how to use this page&lt;/p&gt;&lt;br /&gt;

                &lt;video controls&gt;
                    &lt;source src="&#123;&#123; video }}" type="video/mp4"&gt;
                    Your browser does not support the video tag.
                &lt;/video&gt;

            &lt;/div&gt;

        &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

&lt;!-- save_canvas_script.html--&gt;
    &lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/flask.css') }}"&gt;
    &lt;script src="&#123;&#123; url_for('static', filename=script_file) }}"&gt;&lt;/script&gt;
    &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt;
    &lt;title&gt;JavaScript Script Editor&lt;/title&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"&gt;&lt;/script&gt;
    &lt;link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"&gt;
    &lt;style&gt;
        html,
        body &#123;
            margin: 0;
            padding: 1&#37;;
            height: 100&#37;;
            font-family: Arial, sans-serif;
        }

        body &#123;
            background-image: url('../static/assets/MemMaker_background.png');
            background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
        }

        video &#123;
            margin: 10px, auto;
            width: 250px;
            height: auto;
        }

        .wrapper &#123;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;

        }

        .header &#123;
            width: 100&#37;;
            padding: 20px;
            text-align: center;
        }

        .columns &#123;
            display: flex;
            width: 80&#37;;
            margin-top: 20px;
        }

        .column &#123;
            padding: 20px;
            box-sizing: border-box;
        }

        .column.left &#123;
            width: 30&#37;;
            border: 1px solid #000;
        }

        .column.right &#123;
            margin: 0 auto;
            /* Center horizontally */
            width: 60&#37;;
            border: 1px solid #000;
            text-align: center;
            /* Center video vertically */
        }

        .column.right video &#123;
            max-width: 100&#37;;
            height: auto;
        }
    &lt;/style&gt;
&lt;/head&gt;


&lt;/head&gt;

&lt;body&gt;
    &lt;div class="wrapper"&gt;
        &lt;div class="columns"&gt;
            &lt;div class="column left"&gt;

                &lt;head&gt;
                    &lt;h2&gt;JavaScript Script Editor&lt;/h2&gt;
                &lt;/head&gt;&lt;br /&gt;
                &lt;a style="font-size:30px;color:red;" href="&#123;&#123; url_for('index') }}"&gt;HOME&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;

                &lt;form action="/preview" method="POST"&gt;
                    &lt;textarea id="editor" name="script"&gt;&lt;/textarea&gt;
                    &lt;br&gt;
                    &lt;input type="submit" value="Preview"&gt;
                &lt;/form&gt;&lt;br /&gt;
                &lt;hr&gt;
                &lt;form action="/preview_two_canvas" method="POST"&gt;
                    &lt;textarea id="editor" name="script"&gt;&lt;/textarea&gt;
                    &lt;br&gt;
                    &lt;input type="submit" value="Preview Two"&gt;
                &lt;/form&gt;&lt;br /&gt;


                &lt;a href="/edit_script"&gt;Edit Script&lt;/a&gt;&lt;br /&gt;
                &lt;script&gt;
                    var editor = ace.edit("editor");
                    editor.setTheme("ace/theme/monokai");
                    editor.getSession().setMode("ace/mode/javascript");
                &lt;/script&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;button id="captureButton"&gt;capture_video&lt;/button&gt;&lt;br /&gt;
                &lt;button id="capture_square"&gt;capture_square&lt;/button&gt;&lt;br /&gt;
            &lt;/div&gt;
            &lt;div class="column right"&gt;
                &lt;h2&gt;Random Video&lt;/h2&gt;
                &lt;p&gt;This will eventually be an instruction video on how to use this page&lt;/p&gt;&lt;br /&gt;

                &lt;video controls&gt;
                    &lt;source src="&#123;&#123; video }}" type="video/mp4"&gt;
                    Your browser does not support the video tag.
                &lt;/video&gt;
                &lt;br /&gt;&lt;br /&gt;&gt;

                &lt;audio id="audioPlayer" controls&gt;
                    &lt;source src="&#123;&#123; url_for('static', filename='MUSIC/Blue_Mood-Robert_Munzinger.mp3') }}"
                        type="audio/mpeg"&gt;
                    Your browser does not support the audio element.
                &lt;/audio&gt;
                &lt;br /&gt;

                &lt;script&gt;
                    var audioPlayer = document.getElementById('audioPlayer');
                    var playButton = document.getElementById('playButton');

                    playButton.addEventListener('click', function () &#123;
                        audioPlayer.play();
                    });
                &lt;/script&gt;&lt;br /&gt;


                &lt;script&gt;
                    document.getElementById("captureButton").addEventListener("click", function () &#123;
                        fetch('/capture_video')  // Replace with the correct route to capture video
                            .then(response =&gt; response.json())
                            .then(data =&gt; &#123;
                                console.log(data.message);  // Print the response from the server
                            })
                            .catch(error =&gt; &#123;
                                console.error(error);
                            });
                    });
                &lt;/script&gt;

                &lt;script&gt;
                    document.getElementById("capture_square").addEventListener("click", function () &#123;
                        fetch('/capture_square')  // Replace with the correct route to capture video
                            .then(response =&gt; response.json())
                            .then(data =&gt; &#123;
                                console.log(data.message);  // Print the response from the server
                            })
                            .catch(error =&gt; &#123;
                                console.error(error);
                            });
                    });
                &lt;/script&gt;

            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/flask.css') }}"&gt;
    &lt;script src="&#123;&#123; url_for('static', filename='js/script.js') }}"&gt;&lt;/script&gt;
    &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt;
    &lt;title&gt;JavaScript Script Editor&lt;/title&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"&gt;&lt;/script&gt;
    &lt;link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"&gt;
    &lt;style&gt;
        html,
        body &#123;
            margin: 0;
            padding: 1&#37;;
            height: 100&#37;;
            font-family: Arial, sans-serif;
        }

        body &#123;
            background-image: url('../static/assets/MemMaker_background.png');
            background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
        }

        video &#123;
            margin: 10px, auto;
            width: 250px;
            height: auto;
        }

        .wrapper &#123;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;

        }

        .header &#123;
            width: 100&#37;;
            padding: 20px;
            text-align: center;
        }

        .columns &#123;
            display: flex;
            width: 80&#37;;
            margin-top: 20px;
        }

        .column &#123;
            padding: 20px;
            box-sizing: border-box;
        }

        .column.left &#123;
            width: 30&#37;;
            border: 1px solid #000;
        }

        .column.right &#123;
            margin: 0 auto;
            /* Center horizontally */
            width: 60&#37;;
            border: 1px solid #000;
            text-align: center;
            /* Center video vertically */
        }

        .column.right video &#123;
            max-width: 100&#37;;
            height: auto;
        }
    &lt;/style&gt;
&lt;/head&gt;


&lt;/head&gt;

&lt;body&gt;
    &lt;div class="wrapper"&gt;
        &lt;div class="columns"&gt;
            &lt;div class="column left"&gt;

                &lt;head&gt;
                    &lt;h2&gt;JavaScript Script Editor&lt;/h2&gt;
                &lt;/head&gt;&lt;br /&gt;
                &lt;a style="font-size:30px;color:red;" href="&#123;&#123; url_for('index') }}"&gt;HOME&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;

                &lt;form action="/preview" method="POST"&gt;
                    &lt;textarea id="editor" name="script"&gt;&lt;/textarea&gt;
                    &lt;br&gt;
                    &lt;input type="submit" value="Preview"&gt;
                &lt;/form&gt;&lt;br /&gt;
                &lt;hr&gt;
                &lt;form action="/preview_two_canvas" method="POST"&gt;
                    &lt;textarea id="editor" name="script"&gt;&lt;/textarea&gt;
                    &lt;br&gt;
                    &lt;input type="submit" value="Preview Two"&gt;
                &lt;/form&gt;&lt;br /&gt;


                &lt;a href="/edit_script"&gt;Edit Script&lt;/a&gt;&lt;br /&gt;
                &lt;script&gt;
                    var editor = ace.edit("editor");
                    editor.setTheme("ace/theme/monokai");
                    editor.getSession().setMode("ace/mode/javascript");
                &lt;/script&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;button id="captureButton"&gt;capture_video&lt;/button&gt;&lt;br /&gt;
                &lt;button id="capture_square"&gt;capture_square&lt;/button&gt;&lt;br /&gt;
            &lt;/div&gt;
            &lt;div class="column right"&gt;
                &lt;h2&gt;Random Video&lt;/h2&gt;
                &lt;p&gt;This will eventually be an instruction video on how to use this page&lt;/p&gt;&lt;br /&gt;

                &lt;video controls&gt;
                    &lt;source src="&#123;&#123; video }}" type="video/mp4"&gt;
                    Your browser does not support the video tag.
                &lt;/video&gt;
                &lt;br /&gt;&lt;br /&gt;&gt;

                &lt;audio id="audioPlayer" controls&gt;
                    &lt;source src="&#123;&#123; url_for('static', filename='MUSIC/Blue_Mood-Robert_Munzinger.mp3') }}"
                        type="audio/mpeg"&gt;
                    Your browser does not support the audio element.
                &lt;/audio&gt;
                &lt;br /&gt;

                &lt;script&gt;
                    var audioPlayer = document.getElementById('audioPlayer');
                    var playButton = document.getElementById('playButton');

                    playButton.addEventListener('click', function () &#123;
                        audioPlayer.play();
                    });
                &lt;/script&gt;&lt;br /&gt;


                &lt;script&gt;
                    document.getElementById("captureButton").addEventListener("click", function () &#123;
                        fetch('/capture_video')  // Replace with the correct route to capture video
                            .then(response =&gt; response.json())
                            .then(data =&gt; &#123;
                                console.log(data.message);  // Print the response from the server
                            })
                            .catch(error =&gt; &#123;
                                console.error(error);
                            });
                    });
                &lt;/script&gt;

                &lt;script&gt;
                    document.getElementById("capture_square").addEventListener("click", function () &#123;
                        fetch('/capture_square')  // Replace with the correct route to capture video
                            .then(response =&gt; response.json())
                            .then(data =&gt; &#123;
                                console.log(data.message);  // Print the response from the server
                            })
                            .catch(error =&gt; &#123;
                                console.error(error);
                            });
                    });
                &lt;/script&gt;

            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;# -------- search.html ----------------
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Search Page&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Search&lt;/h1&gt;
    &lt;form method="POST" action="&#123;&#123; url_for('search_txt') }}"&gt;
        &lt;input type="text" name="phrase" placeholder="Enter your search phrase"&gt;
        &lt;button type="submit"&gt;Search&lt;/button&gt;
    &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;


&lt;&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Search by Row ID&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Search Data by Row ID&lt;/h1&gt;
    &lt;form action="&#123;&#123; url_for('search_database') }}" method="post"&gt;
        &lt;label for="search_area"&gt;Select Search Area:&lt;/label&gt;
        &lt;select name="search_area" id="search_area" required&gt;
            &lt;option value="rowid"&gt;Row ID&lt;/option&gt;
            &lt;option value="description"&gt;Description&lt;/option&gt;
            &lt;option value="code"&gt;Code&lt;/option&gt;
            &lt;option value="keywords"&gt;Keywords&lt;/option&gt;
        &lt;/select&gt;
        &lt;br&gt;
        &lt;label for="search_term"&gt;Enter Search Term:&lt;/label&gt;
        &lt;input type="text" name="search_term" id="search_term" required&gt;
        &lt;br&gt;
        &lt;button type="submit"&gt;Search&lt;/button&gt;
    &lt;/form&gt;
    &lt;br&gt;
    &lt;a href="&#123;&#123; url_for('indexdb') }}"&gt;Go back to the Index Page&lt;/a&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!--search_chat.html--&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Search Chat&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Search Results for "&#123;&#123; query }}"&lt;/h1&gt;
    
    &lt;form method="GET" action="&#123;&#123; url_for('search_chat') }}"&gt;
        &lt;label for="search"&gt;Search:&lt;/label&gt;
        &lt;input type="text" id="search" name="q" value="&#123;&#123; query }}"&gt;
        &lt;input type="submit" value="Search"&gt;
    &lt;/form&gt;
    
    &lt;ul&gt;
        &#123;&#37; for message in results &#37;}
            &lt;li&gt;&#123;&#123; message.content }}&lt;/li&gt;
        &#123;&#37; endfor &#37;}
    &lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;html&gt;
&lt;body&gt;
    &lt;center&gt;
    &lt;h1&gt;Search&lt;/h1&gt;
    &lt;form action="/search_database" method="POST"&gt;
        &lt;label for="search_term"&gt;Search Term:&lt;/label&gt;
        &lt;input type="text" id="search_term" name="search_term"&gt;&lt;br&gt;

        &lt;label for="search_area"&gt;Search Area:&lt;/label&gt;
        &lt;select id="search_area" name="search_area"&gt;
            &lt;option value="description"&gt;Description&lt;/option&gt;
            &lt;option value="code"&gt;Code Snippet&lt;/option&gt;
            &lt;option value="keywords"&gt;Keywords&lt;/option&gt;
        &lt;/select&gt;&lt;br&gt;

        &lt;input type="submit" value="Search"&gt;
    &lt;/form&gt;
&lt;/center&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!-- search_data.html --&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Search Code Snippets&lt;/title&gt;
 
    &lt;link rel="stylesheet" href="static/css/flask.css"&gt;

&lt;/head&gt;
&lt;body&gt;
    &lt;h2&gt;Search Code Snippets&lt;/h2&gt;
    &lt;form method="POST"&gt;
        &lt;label for="keyword"&gt;Enter Keyword:&lt;/label&gt;
        &lt;input type="text" name="keyword"&gt;
        &lt;input type="submit" value="Search"&gt;
    &lt;/form&gt;
&lt;ul&gt;
   &lt;li&gt;&lt;a style="font-size: 24px;color: brown;" href="&#123;&#123; url_for('index') }}"&gt;HOME&lt;/a&gt;&lt;/li&gt;&lt;br /&gt;
    &lt;li&gt;&lt;a style="font-size: 24px;color: brown;" href="&#123;&#123; url_for('data_page') }}"&gt;Data Page&lt;/a&gt;&lt;/li&gt;&lt;br /&gt;
&lt;/ul&gt;

&lt;/body&gt;
&lt;/html&gt;&lt;!-- search_results.html --&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Search Results&lt;/title&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/flask.css') }}"&gt;
    &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;
   &lt;style&gt;
   body &#123;

    background-image: url('../static/assets/MemMaker_background.png');
    background-repeat: repeat-y;
    background-size: contain;
    background-position: top;
    font-family: Arial, sans-serif;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h2&gt;Search Again or Enter Data&lt;/h2&gt;

    &lt;ul&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('search_code') }}"&gt;Back to Search&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('enter_code') }}"&gt;Make a CodeHints Entry&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;a style="font-size: 24px;color: brown;" href="&#123;&#123; url_for('index') }}"&gt;HOME&lt;/a&gt;


    &lt;h1&gt;Search Results for "&#123;&#123; keyword }}"&lt;/h1&gt;
    
    &#123;&#37; if code_blocks &#37;}
        &lt;ul&gt;
            &#123;&#37; for block in code_blocks &#37;}
                &lt;li&gt;
                    &lt;strong&gt;Timestamp and Code Block:&lt;/strong&gt;&lt;br&gt;
                    &lt;pre&gt;&#123;&#123; block.code_block }}&lt;/pre&gt;
                &lt;/li&gt;
            &#123;&#37; endfor &#37;}
        &lt;/ul&gt;
    &#123;&#37; else &#37;}
        &lt;p&gt;No matching code blocks found.&lt;/p&gt;
    &#123;&#37; endif &#37;}
    
 
&lt;/body&gt;
&lt;/html&gt;
# -------- search.html ----------------
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Search Page&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Search&lt;/h1&gt;
    &lt;form method="POST" action="&#123;&#123; url_for('search_text') }}"&gt;
        &lt;input type="text" name="phrase" placeholder="Enter your search phrase"&gt;
        &lt;button type="submit"&gt;Search&lt;/button&gt;
    &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;


# -------- search.html ----------------
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Search Page&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Search&lt;/h1&gt;
    &lt;form method="POST" action="&#123;&#123; url_for('search_txt') }}"&gt;
        &lt;input type="text" name="phrase" placeholder="Enter your search phrase"&gt;
        &lt;button type="submit"&gt;Search&lt;/button&gt;
    &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;


&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Select Border&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Select Border&lt;/h1&gt;
    &lt;form method="POST" action="&#123;&#123; url_for('apply_border') }}"&gt;
      &lt;input type="hidden" name="image" value="&#123;&#123; request.args.get('image') }}"&gt;
      &#123;&#37; for border in borders &#37;}
        &lt;img src="&#123;&#123; url_for('static', filename='transparent_borders/'+border) }}" alt="&#123;&#123; border }}" width="200" height="200"&gt;
        &lt;input type="radio" name="border" value="&#123;&#123; border }}"&gt;&nbsp;&nbsp;
      &#123;&#37; endfor &#37;}
      &lt;input type="submit" value="Apply Border"&gt;
    &lt;/form&gt;
  &lt;/body&gt;
&lt;/html&gt;

&lt;!--
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Add Border&lt;/title&gt;
    &lt;style&gt;
      .thumbnail-container &#123;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        max-width: 1000px; /* adjust this value to your liking */
        margin: 0 auto;
      }

      .thumbnail &#123;
        flex-basis: calc(20&#37; - 10px); /* adjust this value to change the number of columns */
        margin-bottom: 20px;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Add Border&lt;/h1&gt;
    &lt;div class="thumbnail-container"&gt;
      &#123;&#37; for thumbnail in thumbnails &#37;}
        &lt;div class="thumbnail"&gt;
          &lt;a href="&#123;&#123; url_for('select_border', image=thumbnail.replace('thumbnail_', '')) }}"&gt;
            &lt;img src="&#123;&#123; url_for('static', filename='thumbnails/'+thumbnail) }}" alt="&#123;&#123; thumbnail }}" style="border: 10px solid transparent; box-shadow: 0 0 0 10px #fff, 0 0 0 15px #000;"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &#123;&#37; endfor &#37;}
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
--&gt;&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Select by ID Form&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Select Data by ID&lt;/h1&gt;
    &lt;form action="&#123;&#123; url_for('handle_select_by_id') }}" method="post"&gt;
        &lt;label for="search_term"&gt;Enter Row ID:&lt;/label&gt;
        &lt;input type="text" name="search_term" id="search_term" required&gt;
        &lt;button type="submit"&gt;Search&lt;/button&gt;
    &lt;/form&gt;
    &lt;br&gt;
    &lt;p&gt;Or&lt;/p&gt;
    &lt;a href="&#123;&#123; url_for('indexdb') }}"&gt;Go back to the Index Page&lt;/a&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Select a Text File&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Select a Text File&lt;/h1&gt;
    &lt;ul&gt;
        &#123;&#37; for filename in text_files &#37;}
        &lt;li&gt;&lt;a href="&#123;&#123; url_for('display_text', filename=filename) }}"&gt;&#123;&#123; filename }}&lt;/a&gt;&lt;/li&gt;
        &#123;&#37; endfor &#37;}
    &lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Select MP3&lt;/title&gt;
 &lt;style&gt;
        html,
        body &#123;
            margin: 0;
            padding: 1&#37;;
            height: 100&#37;;
            font-family: Arial, sans-serif;
        }

        body &#123;
            background-image: url('../static/assets/MemMaker_background.png');
            background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
        }
        video &#123;
            margin: 10px, auto;
            width: 250px;
            height: auto;
        }

          .wrapper &#123;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;

        }

        .header &#123;
            width: 100&#37;;
            padding: 20px;
            text-align: center;
        }

        .columns &#123;
            display: flex;
            width: 80&#37;;
            margin-top: 20px;
        }

        .column &#123;
            padding: 20px;
            box-sizing: border-box;
        }

        .column.left &#123;
            width: 30&#37;;
            border:    1px solid #000;
        }

        .column.right &#123;
        margin: 0 auto; /* Center horizontally */
        width: 60&#37;;
        border: 1px solid #000;
        text-align: center; /* Center video vertically */
    }

    .column.right video &#123;
        max-width: 100&#37;;
        height: auto;
    }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;h1&gt;Select MP3&lt;/h1&gt;
    &lt;form action="&#123;&#123; url_for('select_mp3') }}" method="POST"&gt;
      &lt;label for="selected_mp3"&gt;Select an MP3 file:&lt;/label&gt;
      &lt;select name="selected_mp3" id="selected_mp3"&gt;
        &#123;&#37; for mp3_file in mp3_files &#37;}
        &lt;option value="&#123;&#123; mp3_file }}"&gt;&#123;&#123; mp3_file }}&lt;/option&gt;
        &#123;&#37; endfor &#37;}
      &lt;/select&gt;
      &lt;br&gt;
      &lt;input type="submit" value="Select"&gt;
    &lt;/form&gt;
  &lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Select Order&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;h1&gt;Select the order of the videos:&lt;/h1&gt;
    &lt;form method="POST" action="&#123;&#123; url_for('select_order') }}"&gt;
        &#123;&#37; for thumbnail_path in thumbnail_paths &#37;}
        &lt;img src="&#123;&#123; thumbnail_path }}" alt="Video thumbnail"&gt;
        &lt;label for="order_&#123;&#123; loop.index }}"&gt;Video &#123;&#123; loop.index }}:&lt;/label&gt;
        &lt;input type="radio" name="order" value="&#123;&#123; loop.index }}" id="order_&#123;&#123; loop.index }}" required&gt;&lt;br&gt;
        &#123;&#37; endfor &#37;}
        &lt;input type="submit" value="Join Videos"&gt;
    &lt;/form&gt;
&lt;/body&gt;

&lt;/html&gt;&lt;!-- index.html--&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Select and Play mp3&lt;/title&gt;
    &lt;style&gt;
        html,
        body &#123;
            margin: 0;
            padding: 1&#37;;
            height: 100&#37;;
            font-family: Arial, sans-serif;
        }

        body &#123;
            background-image: url('../static/assets/MemMaker_background.png');
            background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
        }

        video &#123;
            margin: 10px, auto;
            width: 200px;
            height: auto;
        }

        .wrapper &#123;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;

        }

        .header &#123;
            width: 100&#37;;
            padding: 20px;
            text-align: center;
        }

        .columns &#123;
            display: flex;
            width: 80&#37;;
            margin-top: 20px;
        }

        .column &#123;
            padding: 20px;
            box-sizing: border-box;
        }

        .column.left &#123;
            width: 30&#37;;
            border: 1px solid #000;
        }

        .column.right &#123;
            margin: 0 auto;
            /* Center horizontally */
            width: 60&#37;;
            border: 1px solid #000;
            text-align: center;
            /* Center video vertically */
        }

        .column.right video &#123;
            max-width: 100&#37;;
            height: auto;
        }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h1&gt;Select and Play mp3&lt;/h1&gt;
            &lt;a href="&#123;&#123; url_for('index') }}"&gt;HOME&lt;/a&gt; |
        &lt;/div&gt;
        &lt;div class="columns"&gt;
            &lt;div class="column left"&gt;

                &lt;h3&gt;Links&lt;/h3&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('app_utilities') }}"&gt;Application Utilities&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('image_processing') }}"&gt;Image Processing Links&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('format_file') }}"&gt;Format Text Files&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('view_text') }}"&gt;View Text Files&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_file') }}"&gt;Edit File&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_formatted') }}"&gt;Edit Formatted Text&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;

                &lt;a href="&#123;&#123; url_for('edit_description') }}"&gt;Edit Description&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
              
            &lt;/div&gt;
            &lt;div class="column right"&gt;
    &lt;form method="POST"&gt;
        &lt;label for="selected_directory"&gt;Select a directory:&lt;/label&gt;
        &lt;select name="selected_directory" id="selected_directory"&gt;
            &#123;&#37; for directory in directories &#37;}
                &lt;option value="&#123;&#123; directory }}"&gt;&#123;&#123; directory }}&lt;/option&gt;
            &#123;&#37; endfor &#37;}
        &lt;/select&gt;
        &lt;button type="submit"&gt;Select Directory&lt;/button&gt;
    &lt;/form&gt;
    
    &#123;&#37; if selected_directory &#37;}
        &lt;form method="POST"&gt;
            &lt;label for="mp3_file"&gt;Choose an MP3 file:&lt;/label&gt;
            &lt;select name="mp3_file" id="mp3_file"&gt;
                &#123;&#37; for mp3 in mp3_files &#37;}
                    &lt;option value="&#123;&#123; mp3 }}"&gt;&#123;&#123; mp3 }}&lt;/option&gt;
                &#123;&#37; endfor &#37;}
            &lt;/select&gt;
            &lt;button type="submit"&gt;Play&lt;/button&gt;
        &lt;/form&gt;
    &#123;&#37; endif &#37;}
                &lt;video controls&gt;
                    &lt;source src="&#123;&#123; video }}" type="video/mp4"&gt;
                    Your browser does not support the video tag.
                &lt;/video&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Select and Play MP3&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;form method="GET"&gt;
        &lt;label for="selected_directory"&gt;Select a directory:&lt;/label&gt;
        &lt;select name="selected_directory" id="selected_directory"&gt;
            &#123;&#37; for directory in directories &#37;}
                &lt;option value="&#123;&#123; directory }}" &#123;&#37; if selected_directory == directory &#37;}selected&#123;&#37; endif &#37;}&gt;&#123;&#123; directory }}&lt;/option&gt;
            &#123;&#37; endfor &#37;}
        &lt;/select&gt;
        &lt;button type="submit"&gt;Select Directory&lt;/button&gt;
    &lt;/form&gt;
    
    &lt;form method="POST"&gt;
        &lt;label for="mp3_file"&gt;Choose an MP3 file:&lt;/label&gt;
        &lt;select name="mp3_file" id="mp3_file"&gt;
            &#123;&#37; for mp3 in mp3_files &#37;}
                &lt;option value="&#123;&#123; mp3 }}"&gt;&#123;&#123; mp3 }}&lt;/option&gt;
            &#123;&#37; endfor &#37;}
        &lt;/select&gt;
        &lt;button type="submit" id="play_button"&gt;Play&lt;/button&gt;
    &lt;/form&gt;
    
    &lt;audio controls id="audio_player"&gt;
        &lt;source src="" type="audio/mpeg" id="audio_source"&gt;
    &lt;/audio&gt;

    &lt;script&gt;
        const directorySelect = document.getElementById('selected_directory');
        const playButton = document.getElementById('play_button');
        const mp3Select = document.getElementById('mp3_file');
        const audioPlayer = document.getElementById('audio_player');
        
        directorySelect.addEventListener('change', function() &#123;
            const selectedDir = directorySelect.value;
            const updateUrl = `&#123;&#123; url_for('select_playmp3') }}?selected_directory=$&#123;selectedDir}`;
            window.location.href = updateUrl;
        });

        playButton.addEventListener('click', function() &#123;
            const selectedFile = mp3Select.value;
            const selectedDir = directorySelect.value;
            const filePath = `&#123;&#123; url_for('static', filename='') }}$&#123;selectedDir}/$&#123;selectedFile}`;
            
            const audioSource = document.getElementById('audio_source');
            audioSource.src = filePath;
            
            audioPlayer.load();
            audioPlayer.play();
        });
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!-- index.html--&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Select and Play mp3&lt;/title&gt;
    &lt;style&gt;
        html,
        body &#123;
            margin: 0;
            padding: 1&#37;;
            height: 100&#37;;
            font-family: Arial, sans-serif;
        }

        body &#123;
            background-image: url('../static/assets/MemMaker_background.png');
            background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
        }

        video &#123;
            margin: 10px, auto;
            width: 200px;
            height: auto;
        }

        .wrapper &#123;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;

        }

        .header &#123;
            width: 100&#37;;
            padding: 20px;
            text-align: center;
        }

        .columns &#123;
            display: flex;
            width: 80&#37;;
            margin-top: 20px;
        }

        .column &#123;
            padding: 20px;
            box-sizing: border-box;
        }

        .column.left &#123;
            width: 30&#37;;
            border: 1px solid #000;
        }

        .column.right &#123;
            margin: 0 auto;
            /* Center horizontally */
            width: 60&#37;;
            border: 1px solid #000;
            text-align: center;
            /* Center video vertically */
        }

        .column.right video &#123;
            max-width: 100&#37;;
            height: auto;
        }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h1&gt;Select and Play mp3&lt;/h1&gt;
            &lt;a href="&#123;&#123; url_for('index') }}"&gt;HOME&lt;/a&gt; |
        &lt;/div&gt;
        &lt;div class="columns"&gt;
            &lt;div class="column left"&gt;

                &lt;h3&gt;Links&lt;/h3&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('app_utilities') }}"&gt;Application Utilities&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('image_processing') }}"&gt;Image Processing Links&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('format_file') }}"&gt;Format Text Files&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('view_text') }}"&gt;View Text Files&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_file') }}"&gt;Edit File&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_formatted') }}"&gt;Edit Formatted Text&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;

                &lt;a href="&#123;&#123; url_for('edit_description') }}"&gt;Edit Description&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
              
            &lt;/div&gt;
            &lt;div class="column right"&gt;
             &lt;h1&gt;Select and Play an MP3&lt;/h1&gt;
    
    &lt;form method="POST"&gt;
        &lt;label for="mp3_file"&gt;Choose an MP3 file:&lt;/label&gt;
        &lt;select name="mp3_file" id="mp3_file"&gt;
            &#123;&#37; for mp3 in mp3_files &#37;}
                &lt;option value="&#123;&#123; mp3 }}"&gt;&#123;&#123; mp3 }}&lt;/option&gt;
            &#123;&#37; endfor &#37;}
        &lt;/select&gt;
        &lt;button type="submit"&gt;Play&lt;/button&gt;
    &lt;/form&gt;
    
    &lt;h2&gt;Available MP3 files:&lt;/h2&gt;
    &lt;ul&gt;
        &#123;&#37; for mp3 in mp3_files &#37;}
            &lt;li&gt;&#123;&#123; mp3 }}&lt;/li&gt;
        &#123;&#37; endfor &#37;}
    &lt;/ul&gt;
                &lt;video controls&gt;
                    &lt;source src="&#123;&#123; video }}" type="video/mp4"&gt;
                    Your browser does not support the video tag.
                &lt;/video&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Show Blended Image&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Blended Image&lt;/h1&gt;
    &lt;img src="&#123;&#123; blended_image_url }}" alt="Blended Image"&gt;
  &lt;/body&gt;
&lt;/html&gt;

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Blended Image&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Blended Image&lt;/h1&gt;
    &lt;img src="&#123;&#123; url_for('static', filename='blended.jpg') }}" alt="Blended Image"&gt;
  &lt;/body&gt;
&lt;/html&gt;

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Show Generated Comic Border&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Show Generated Comic Border&lt;/h1&gt;
    &lt;img src="&#123;&#123; url_for('static', filename='borders/' + border_name) }}" alt="Generated Comic Border"&gt;

&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Square Video&lt;/title&gt;
&lt;style&gt;
        html,
        body &#123;
            margin: 0;
            padding: 1&#37;;
            height: 100&#37;;
            font-family: Arial, sans-serif;
        }

        body &#123;
            background-image: url('../static/assets/MemMaker_background.png');
            background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
        }
        video &#123;
            margin: 10px, auto;
            width: 400px;
            height: auto;
        }

          .wrapper &#123;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;

        }

        .header &#123;
            width: 100&#37;;
            padding: 20px;
            text-align: center;
        }

        .columns &#123;
            display: flex;
            width: 80&#37;;
            margin-top: 20px;
        }

        .column &#123;
            padding: 20px;
            box-sizing: border-box;
        }

        .column.left &#123;
            width: 30&#37;;
            border:    1px solid #000;
        }

        .column.right &#123;
        margin: 0 auto; /* Center horizontally */
        width: 60&#37;;
        border: 1px solid #000;
        text-align: center; /* Center video vertically */
    }

    .column.right video &#123;
        max-width: 100&#37;;
        height: auto;
    }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Square Video&lt;/h1&gt;
    &lt;p&gt;Here is your square video:&lt;/p&gt;
         &lt;video width="480" height="480" controls&gt;
          &lt;source src="&#123;&#123; url_for('static', filename='temp.mp4') }}" type="video/mp4"&gt;
          Your browser does not support the video tag.
        &lt;/video&gt;
      &lt;/body&gt;
    &lt;/html&gt;
    
  &lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Square Video&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;video width="640" height="1280" controls&gt;
      &lt;source src="&#123;&#123; squarevid_url }}" type="video/mp4"&gt;
    &lt;/video&gt;
  &lt;/body&gt;
&lt;/html&gt;

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Success&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Success&lt;/h1&gt;
  &lt;p&gt;File "&#123;&#123; original_file }}" formatted and saved as "&#123;&#123; modified_file }}"&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Select and Play MP3&lt;/title&gt;
    &lt;style&gt;
        body &#123;
            margin: 0;
            padding: 0;
            background-image: url('/static/images/largegiger/DreamShaper_v5_A_dystopian_city_street_level_view_populated_by_0.jpg');
            background-size: cover;
            background-position: center center;
            background-attachment: fixed;
            font-family: Arial, sans-serif;
        }
        h1 &#123;
            text-align: center;
            padding-top: 20px;
            position: relative; /* Needed for absolute positioning of shadow */
            color: white; /* Set text color */
        }
        h1::before &#123;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100&#37;;
            height: 100&#37;;
            z-index: -1; /* Behind the text */
            background-color: white;
            filter: blur(15px); /* Adjust blur radius as needed */
            opacity: 0.5; /* Adjust opacity as needed */
        }
        form &#123;
            text-align: center;
            margin-top: 30px;
        }
        select, input &#123;
            padding: 5px;
            font-size: 16px;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Select and Play MP3&lt;/h1&gt;
    &lt;form method="post"&gt;
        &lt;select name="mp3_file"&gt;
            &#123;&#37; for file in mp3_files &#37;}
                &lt;option value="&#123;&#123; file }}"&gt;&#123;&#123; file }}&lt;/option&gt;
            &#123;&#37; endfor &#37;}
        &lt;/select&gt;
        &lt;br&gt;&lt;br&gt;
        &lt;input type="submit" value="Play"&gt;
    &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Terminal Emulator&lt;/title&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='xterm/xterm.css') }}"&gt;
    &lt;script src="&#123;&#123; url_for('static', filename='xterm/xterm.js') }}"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="terminal"&gt;&lt;/div&gt;
    &lt;script&gt;
        const term = new Terminal();
        term.open(document.getElementById('terminal'));

        let userInput = '';

        term.onKey(e =&gt; &#123;
            const printable = !e.domEvent.altKey && !e.domEvent.ctrlKey && !e.domEvent.metaKey;

            if (e.domEvent.key === 'Enter') &#123;
                const command = userInput;
                fetch('/execute_command', &#123;
                    method: 'POST',
                    headers: &#123;
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `command=$&#123;encodeURIComponent(command)}`,
                })
                .then(response =&gt; response.json())
                .then(data =&gt; &#123;
                    term.write('\r\n' + data.output + '\r\n$ ');
                });

                userInput = '';
            } else if (printable) &#123;
                term.write(e.key);
                userInput += e.key;
            }
        });

        term.write('$ ');

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Terminal Emulator&lt;/title&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='xterm/xterm.css') }}"&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/flask.css') }}"&gt;
    &lt;script src="&#123;&#123; url_for('static', filename='xterm/xterm.js') }}"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="terminal"&gt;&lt;/div&gt;
    &lt;script&gt;
        const term = new Terminal();
        term.open(document.getElementById('terminal'));
    
        let userInput = '';
    
        term.onKey(e =&gt; &#123;
            const printable = !e.domEvent.altKey && !e.domEvent.ctrlKey && !e.domEvent.metaKey;
    
            if (e.domEvent.key === 'Enter') &#123;
                const command = userInput;
                fetch('/execute_command', &#123;
                    method: 'POST',
                    headers: &#123;
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `command=$&#123;encodeURIComponent(command)}`,
                })
                .then(response =&gt; response.json())
                .then(data =&gt; &#123;
                    // Clear the terminal and display the response output
                    term.clear();
                    console.log(data.output);

                    const formattedOutput = data.output.replace(/\n/g, '\r\n');
                    term.write(formattedOutput);
                    term.write('$ ');
                });
    
                userInput = '';
            } else if (printable) &#123;
                term.write(e.key);
                userInput += e.key;
            }
        });
    
        term.writeln('$ ');
    
    &lt;/script&gt;
    
    
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Terminal Emulator&lt;/title&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='xterm/xterm.css') }}"&gt;
    &lt;script src="&#123;&#123; url_for('static', filename='xterm/xterm.js') }}"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="terminal"&gt;&lt;/div&gt;
    &lt;script&gt;
        const term = new Terminal();
        term.open(document.getElementById('terminal'));

        term.onKey(e =&gt; &#123;
    // Capture user input and send it to the server when Enter is pressed
    if (e.domEvent.key === 'Enter') &#123;
        const command = term.buffer.getLine(term.buffer.ybase + term.buffer.y).translateToString();
        fetch('/execute_command', &#123;
            method: 'POST',
            headers: &#123;
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: `command=$&#123;encodeURIComponent(command)}`,
        })
            .then(response =&gt; response.json())
            .then(data =&gt; &#123;
                term.write('\r\n' + data.output + '\r\n$ ');
            });
    } else &#123;
        term.write(e.key); // Write the captured key to the terminal
    }
});

term.write('$ ');


    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!-- index.html--&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;indexdb&lt;/title&gt;
    &lt;style&gt;
        html,
        body &#123;
            margin: 0;
            padding: 1&#37;;
            height: 100&#37;;
            font-family: Arial, sans-serif;
        }

        body &#123;
            background-image: url('../static/assets/MemMaker_background.png');
            background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
        }

        video &#123;
            margin: 10px, auto;
            width: 250px;
            height: auto;
        }

        .wrapper &#123;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;

        }

        .header &#123;
            width: 100&#37;;
            padding: 20px;
            text-align: center;
        }

        .columns &#123;
            display: flex;
            width: 80&#37;;
            margin-top: 20px;
        }

        .column &#123;
            padding: 20px;
            box-sizing: border-box;
        }

        .column.left &#123;
            width: 30&#37;;
            border: 1px solid #000;
        }

        .column.right &#123;
            margin: 0 auto;
            /* Center horizontally */
            width: 50&#37;;
            border: 1px solid #000;
            text-align: center;
            /* Center video vertically */
        }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h1&gt;indexdb&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="columns"&gt;

            &lt;p&gt;Choose an option below:&lt;/p&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="&#123;&#123; url_for('select_by_id_form') }}"&gt;Select by ID Form&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="&#123;&#123; url_for('search_by_rowid') }}"&gt;Search by Row ID&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="&#123;&#123; url_for('search_database') }}"&gt;Search the Database&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="&#123;&#123; url_for('edit_data_page') }}"&gt;Edit Data&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="&#123;&#123; url_for('insert_data') }}"&gt;Insert Data&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="&#123;&#123; url_for('get_rowid_form') }}"&gt;Enter Row ID to Edit&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;a style="font-size: 24px;color: brown;" href="&#123;&#123; url_for('index') }}"&gt;HOME&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="column right"&gt;
            &lt;h2&gt;Right Column&lt;/h2&gt;
            &lt;video controls&gt;
                &lt;source src="&#123;&#123; video }}" type="video/mp4"&gt;
                Your browser does not support the video tag.
            &lt;/video&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;HTML Viewer&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;canvas id="canvas"&gt;&lt;/canvas&gt;

    &lt;script src="../scripts/script.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;JavaScript Script Editor&lt;/title&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;JavaScript Script Editor&lt;/h1&gt;
    &lt;div id="myElement"&gt;Element to Change Color&lt;/div&gt;
    &lt;button id="myButton"&gt;Click Me&lt;/button&gt;

    &lt;script&gt;
        // Function to display a greeting message
        function sayHello(name) &#123;
            console.log(`Hello, $&#123;name}!`);
        }

        // Invoke the sayHello function
        sayHello("John");

        // Function to calculate the sum of two numbers
        function sum(a, b) &#123;
            return a + b;
        }

        // Calculate and display the sum
        var result = sum(10, 5);
        console.log("Sum:", result);

        // Function to change the background color of an element
        function changeBackgroundColor(elementId, color) &#123;
            var element = document.getElementById(elementId);
            element.style.backgroundColor = color;
        }

        // Change the background color of an element with ID 'myElement'
        changeBackgroundColor('myElement', 'lightblue');

        // Event listener to handle button click
        var button = document.getElementById('myButton');
        button.addEventListener('click', function() &#123;
            alert('Button clicked!');
        });
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Success&lt;/title&gt;
&#123;
	width: 100&#37;;
	height: 100&#37;;
	overflow: hidden;
}

body &#123;
	margin: 0;
	padding: 0;
	color: #fff;
	background-color: #000;
}

canvas &#123;
	-webkit-tap-highlight-color: transparent;
	tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
	cursor: pointer;
}
&lt;/style&gt;

&lt;script type="text/javascript"&gt;
	// Wobble by @neave

window.requestAnimationFrame =
	window.requestAnimationFrame ||
	window.webkitRequestAnimationFrame ||
	window.mozRequestAnimationFrame ||
	window.msRequestAnimationFrame ||
	function(callback) &#123;
		setTimeout(callback, 1000 / 60);
	};

Array.prototype.shuffle = function() &#123;
	var j, temp;
	for (var i = this.length - 1; i &gt; 0; i--) &#123;
		j = Math.floor(Math.random() * (i + 1));
		temp = this[i];
		this[i] = this[j];
		this[j] = temp;
	}
	return this;
};

Math.clamp = function(n, min, max) &#123;
	return Math.max(min, Math.min(n, max));
};

var get = document.querySelector.bind(document),
	on = document.addEventListener.bind(document),
	mouseOff = -1000,
	mouseX,
	mouseY,
	viscosity = 25,
	damping = 0.1,
	totalPoints,
	dist,
	scale,
	canvas,
	context,
	surfaces,
	palleteNum = 0,
	palleteFirst = ['0cf', '0fc', 'ff0', 'f0c', 'c0f'],
	palletes = [
		['000', 'ff0', 'f0f', '0ff', 'fff'],
		['000', 'fff', '000', 'fff', '000'],
		['333', '666', '999', 'ccc', 'fff'],
		['300', '600', 'f00', '600', '300'],
		['305', '606', '907', 'c08', 'f09'],
		['036', '067', '098', '0c9', '0fa'],
		['00a0b0', '6a4a3c', 'cc333f', 'eb6841', 'edc951'],
		['264653', '2a9d8f', 'e9c46a', 'f4a261', 'e76f51'],
		['300018', '5a3d31', '837b47', 'adb85f', 'e5edb8'],
		['343838', '005f6b', '008c9e', '00b4cc', '00dffc'],
		['3fb8af', '7fc7af', 'dad8a7', 'ff9e9d', 'ff3d7f'],
		['413e4a', '73626e', 'b38184', 'f0b49e', 'f7e4be'],
		['452632', '91204d', 'e4844a', 'e8bf56', 'e2f7ce'],
		['594f4f', '547980', '45ada8', '9de0ad', 'e5fcc2'],
		['5d4157', '838689', 'a8caba', 'cad7b2', 'ebe3aa'],
		['81657e', '3ea3af', '9fd9b3', 'f0f6b9', 'ff1d44'],
		['899aa1', 'bda2a2', 'fbbe9a', 'fad889', 'faf5c8'],
		['99b898', 'fecea8', 'ff847c', 'e84a5f', '2a363b'],
		['ab526b', 'bca297', 'c5ceae', 'f0e2a4', 'f4ebc3'],
		['acdeb2', 'e1eab5', 'edad9e', 'fe4b74', '390d2d'],
		['b9d7d9', '668284', '2a2829', '493736', '7b3b3b'],
		['bbbb88', 'ccc68d', 'eedd99', 'eec290', 'eeaa88'],
		['cff09e', 'a8dba8', '79bd9a', '3b8686', '0b486b'],
		['d1f2a5', 'effab4', 'ffc48c', 'ff9f80', 'f56991'],
		['d3e2b6', 'c3dbb4', 'aaccb1', '87bdb1', '68b3af'],
		['e0ffb3', '61c791', '31797d', '2a2f36', 'f23c55'],
		['e25858', 'e9d6af', 'ffffdd', 'c0efd2', '384252'],
		['e8608c', '71cbc4', 'fff9f4', 'cdd56e', 'ffbd68'],
		['e8ddcb', 'cdb380', '036564', '033649', '031634'],
		['e94e77', 'd68189', 'c6a49a', 'c6e5d9', 'f4ead5'],
		['eee6ab', 'c5bc8e', '696758', '45484b', '36393b'],
		['efffcd', 'dce9be', '555152', '2e2633', '99173c'],
		['f04155', 'ff823a', 'f2f26f', 'fff7bd', '95cfb7'],
		['f8b195', 'f67280', 'c06c84', '6c5b7b', '355c7d'],
		['f8f4d7', 'f4dec2', 'f2b4a8', 'e98977', 'f4b36c'],
		['fad089', 'ff9c5b', 'f5634a', 'ed303c', '3b8183'],
		['fe4365', 'fc9d9a', 'f9cdad', 'c8c8a9', '83af9b'],
		['ff4e50', 'fc913a', 'f9d423', 'ede574', 'e1f5c4'],
		['ff9900', '424242', 'e9e9e9', 'bcbcbc', '3299bb'],
		['ffed90', 'a8d46f', '359668', '3c3251', '341139']
	];

function Point(x, y) &#123;
	this.x = x;
	this.y = y;

	this.ix = x;
	this.iy = y;

	this.vx = 0;
	this.vy = 0;
}

Point.prototype.move = function() &#123;
	var width = canvas.width / scale;
	var height = canvas.height / scale;
	this.vx += (this.ix - this.x) / viscosity * width;
	this.vy += (this.iy - this.y) / viscosity * height;

	var dx = this.x * width - mouseX / scale,
		dy = this.y * height - mouseY / scale;

	if (Math.sqrt(dx * dx + dy * dy) &lt; dist) &#123;
		var a = Math.atan2(dy, dx);
		this.vx += (Math.cos(a) * viscosity - dx) / viscosity;
		this.vy -= (Math.sin(a) * viscosity - dy) / viscosity;
	}

	this.vx *= (1 - damping);
	this.vy *= (1 - damping);
	this.x += this.vx / width;
	this.y += this.vy / height;

	if (this.y &lt; 0) &#123;
		this.y = 0;
	} else if (this.y &gt; 1) &#123;
		this.y = 1;
	}
};

function Surface(y) &#123;
	this.y = y;
	this.resize();
}

Surface.prototype.draw = function() &#123;
	var p = this.points[totalPoints - 1],
		cx,
		cy;

	context.fillStyle = this.color;
	context.beginPath();
	context.moveTo(p.x * canvas.width, p.y * canvas.height);

	for (var i = totalPoints - 1; i &gt; 0; i--) &#123;
		p = this.points[i];
		p.move();

		cx = (p.x + this.points[i - 1].x) / 2 * canvas.width;
		cy = (p.y + this.points[i - 1].y) / 2 * canvas.height;

		if (i === 1) &#123;
			cx = canvas.width;
		} else if (i === totalPoints - 1) &#123;
			context.bezierCurveTo(p.x * canvas.width, p.y * canvas.height, cx, cy, cx, cy);
			p.x = 0;
		}

		context.bezierCurveTo(p.x * canvas.width, p.y * canvas.height, cx, cy, cx, cy);
	}

	context.lineTo(canvas.width, canvas.height);
	context.lineTo(0, canvas.height);
	context.closePath();
	context.fill();
};

Surface.prototype.resize = function() &#123;
	this.points = [];
	for (var i = totalPoints; i--; ) &#123;
		this.points.push(new Point(i / (totalPoints - 3), this.y));
	}
};

Surface.prototype.wobble = function() &#123;
	for (var i = totalPoints - 1; i &gt; 0; i--) &#123;
		this.points[i].vy += (Math.random() - 0.5) * dist * 0.6;
	}
};

function setPallete() &#123;
	canvas.style.backgroundColor = '#' + palletes[palleteNum][0];
	for (var i = surfaces.length; i--; ) &#123;
		surfaces[surfaces.length - i - 1].color = '#' + palletes[palleteNum][i + 1];
	}
}

function nextPallete() &#123;
	palleteNum++;
	if (palleteNum &gt;= palletes.length) &#123;
		palleteNum = 0;
		palletes.shuffle();
	}
	setPallete();
}

function wobbleSuraces() &#123;
	resizeSuraces();

	for (var i = surfaces.length; i--; ) &#123;
		surfaces[i].wobble();
	}
	nextPallete();
}

function drawSurfaces() &#123;
	context.clearRect(0, 0, canvas.width, canvas.height);
	for (var i = surfaces.length; i--; ) &#123;
		surfaces[i].draw();
	}
}

function resizeSuraces() &#123;
	scale = window.devicePixelRatio || 1;

	canvas.width = innerWidth * scale;
	canvas.height = innerHeight * scale;
	canvas.style.width = innerWidth + 'px';
	canvas.style.height = innerHeight + 'px';

	totalPoints = Math.round(Math.clamp(Math.pow(Math.random() * 8, 2), 16, innerWidth / 35));
	dist = Math.clamp(innerWidth / 4, 150, 200);

	for (var i = surfaces.length; i--; ) &#123;
		surfaces[i].resize();
	}
	drawSurfaces();
}

function update() &#123;
	requestAnimationFrame(update);
	drawSurfaces();
}

function init() &#123;
	canvas = get('canvas');
	context = canvas.getContext('2d');

	canvas.ontouchmove = function(event) &#123;
		mouseX = event.targetTouches[0].pageX * scale;
		mouseY = event.targetTouches[0].pageY * scale;
	};

	canvas.ontouchstart = function(event) &#123;
		event.preventDefault();
	};

	canvas.ontouchend = function(event) &#123;
		wobbleSuraces();
		mouseX = mouseY = mouseOff;
	};

	canvas.onmousemove = function(event) &#123;
		mouseX = event.pageX * scale;
		mouseY = event.pageY * scale;
	};

	canvas.onmousedown = wobbleSuraces;

	canvas.onmouseleave = function() &#123;
		mouseX = mouseY = mouseOff;
	};

	surfaces = [
		new Surface(4/5),
		new Surface(3/5),
		new Surface(2/5),
		new Surface(1/5)
	];

	palletes.shuffle();
	palletes.unshift(palleteFirst);
	setPallete(0);

	window.onresize = resizeSuraces;
	resizeSuraces();
	update();
}

on('DOMContentLoaded', init);

&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;canvas&gt;&lt;/canvas&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Text File Created&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Text File Created&lt;/h1&gt;
    &lt;p&gt;Text file created at: &#123;&#123; text_file_path }}&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!doctype html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Text to Speech&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;h1&gt;Text to Speech&lt;/h1&gt;
        &lt;form method="post" enctype="multipart/form-data"&gt;
            &lt;input type="file" name="file"&gt;
            &lt;br&gt;&lt;br&gt;
            &lt;textarea name="text" rows="5" cols="30"&gt;&lt;/textarea&gt;
            &lt;br&gt;&lt;br&gt;
            &lt;input type="submit" value="Submit"&gt;
        &lt;/form&gt;
        &#123;&#37; if filename &#37;}
            &lt;p&gt;Text: &#123;&#123; text }}&lt;/p&gt;
            &lt;audio controls&gt;
                &lt;source src="&#123;&#123; filename }}" type="audio/mpeg"&gt;
            &lt;/audio&gt;
        &#123;&#37; endif &#37;}
    &lt;/body&gt;
&lt;/html&gt;
&lt;!doctype html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Text to Speech&lt;/title&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/Style.css') }}"&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/flask.css') }}"&gt;
    &lt;style&gt;
        a &#123;
            font-size: 20px;
            margin-left: 10&#37;;
            color: #053b68;
        }

        pre &#123;
            font-size: 20px;
            margin-left: 10&#37;;
            text-align: left;
            color: #010f1a;
            white-space: pre-wrap;
            /* Since CSS 2.1 */
            white-space: -moz-pre-wrap;
            /* Mozilla, since 1999 */
            white-space: -pre-wrap;
            /* Opera 4-6 */
            white-space: -o-pre-wrap;
            /* Opera 7 */
            word-wrap: break-word;
            /* Internet Explorer 5.5+ */
        }
        p&#123;
            font-size: 25px;
            margin: 10px,auto;
            text-align: center;
            color: #010f1a; 
        }
        textarea&#123;
            font-size: 20px;
            margin-left: 10&#37;;
            text-align: left;
            color: #010f1a;
            white-space: pre-wrap;
            /* Since CSS 2.1 */
            white-space: -moz-pre-wrap;
            /* Mozilla, since 1999 */
            white-space: -pre-wrap;
            /* Opera 4-6 */
            white-space: -o-pre-wrap;
            /* Opera 7 */
            word-wrap: break-word;
            /* Internet Explorer 5.5+ */
        }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class="header"&gt;
        &lt;h1&gt;Text to Speech&lt;/h1&gt;
        &lt;p&gt;Enter some text and click submit to hear it spoken aloud.&lt;/p&gt;
        &lt;a href="&#123;&#123; url_for('indeX') }}"&gt;home&lt;/a&gt;&lt;br /&gt;
        &lt;form method="post"&gt;
            &lt;textarea name="text" rows="15" cols="50"&gt;&lt;/textarea&gt;
            &lt;br&gt;&lt;br&gt;
            &lt;input type="submit" value="Submit"&gt;
        &lt;/form&gt;
        &#123;&#37; if filename &#37;}
        &lt;p&gt;Text: &#123;&#123; text }}&lt;/p&gt;
        &lt;audio controls&gt;
            &lt;source src="&#123;&#123; filename }}" type="audio/mpeg"&gt;
        &lt;/audio&gt;
        &#123;&#37; endif &#37;}

        &lt;audio controls id="audio-player"&gt;
            &lt;source src="&#123;&#123; filename }}" type="audio/mpeg"&gt;
        &lt;/audio&gt;

        &lt;button onclick="document.getElementById('audio-player').play()"&gt;Play&lt;/button&gt;
        &lt;br /&gt;&lt;br /&gt;
        &lt;a href="&#123;&#123; url_for('indeX') }}"&gt;When Finished click home to return: &lt;span
                style="color:rgb(250, 5, 5);font-size: large;"&gt;&nbsp;&nbsp;&nbsp;HOME&lt;/span&gt;&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
        &lt;pre&gt;
Notice in the example text below, 'have' is spelled 'hav' so it is pronounced correctly.
Also mp3 is spelled out  M P 3 so it is also pronounced correctly.
-------------------------------------------------------------------------- 
In order to create a speaking avatar you need to follow a series of steps.
The first step is to create the text that will be spoken.
Press the button called create the M P 3
The page opened will hav a text area.
Enter the text you wish to hav spoken.
When the text has been enter you must click the submit button.
The M P 3 will be created and played back to you.
The M P 3 file will use the first twenty characters of the text generated as a filename. 
You may wish to hav a copy of the text in case it does not sound right.
Then you just paste it in, correct it, and a new file will be created.
--------------------------------------------------------------------------
Once you hav the M P 3 file it must be converted to a wav format.
Simply press the Convert M P 3 two wave link below this video.
It is super fast and a screen pops up to indicate the process has been completed.
--------------------------------------------------------------------------
At this point you should have an M P 3 file and it has been converted to a wave file.
Now you must pick an image and convert it to an M P 4.
The M P 4 will be the same length as the M P 3.
That will be done by pressing the,
Create a Video the same length as the wav Created link.
--------------------------------------------------------------------------
Now you hav an M P 4 file and a wav file.
Now for the hard stuff. 
Not for you, but for your computer.
You just click Create Avatar.
If you do not have a G P U, It will probably put your computer to the max.
As soon as you click it you will be directed to page, generate avatar.
Set back and relax it will take some time to generate.
If it is too much for your computer, you will find a link to Jupyter Co lab notebook.
Co Lab provides a free G P U service and is much faster.
--------------------------------------------------------------------------  
     &lt;/pre&gt;
&lt;/body&gt;

&lt;/html&gt;&lt;!--enter_data.html Template:--&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;The FlaskAppArchitect File&lt;/title&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/flask.css') }}"&gt;
    &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;
&lt;script&gt;
        function playAudio() &#123;
            var audio = document.getElementById("audio");
            audio.play();
        }

        function pauseAudio() &#123;
            var audio = document.getElementById("audio");
            audio.pause();
        }

        function setVolume(volume) &#123;
            var audio = document.getElementById("audio");
            audio.volume = volume;
        }
    &lt;/script&gt;
    &lt;style&gt;
        pre span&#123;
            color: rgb(4, 18, 139);
            font-size: larger;
            font-weight: bold;
            width: 65&#37;;
            word-wrap: break-word; /* Add this line to wrap text */

        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h2&gt;Data Entry&lt;/h2&gt;


&lt;audio id="audio" controls&gt;
        &lt;source src="&#123;&#123; url_for('static', filename='audio_mp3/flask_javascript.mp3') }}" type="audio/mpeg"&gt;
        Your browser does not support the audio element.
    &lt;/audio&gt;

    &lt;br&gt;
    
    &lt;button onclick="playAudio()"&gt;Play&lt;/button&gt;
    &lt;button onclick="pauseAudio()"&gt;Pause&lt;/button&gt;
    
    &lt;br&gt;&lt;br&gt;
    
    &lt;input type="range" min="0" max="1" step="0.1" value="1" oninput="setVolume(this.value)"&gt;
    

&lt;pre&gt;

#!/home/jack/Desktop/FlaskAppArchitect/env/bin/python
&lt;span&gt;The #! identifies the location and the interpreter /home/jack/Desktop/StoryMaker/ is the location
    and env/bin/python is the interpreter. The env is a virtual enviroment.
    env/bin/python
&lt;/span&gt;
#!/home/jack/Desktop/FlaskAppArchitect_Flask_App_Creator/env/bin/python
from moviepy.editor import *
from flask import Flask, render_template, request, redirect, url_for, send_from_directory, Response, flash, request, session,jsonify
from flask import send_file, g
import os
import pygame
from gtts import gTTS
import cv2
import dlib
import numpy as np
from random import randint
from moviepy.editor import VideoFileClip, ImageClip, CompositeVideoClip
from moviepy.editor import concatenate_videoclips, AudioFileClip
import moviepy.editor as mp
import moviepy.editor
import subprocess
from pathlib import Path as change_ext
import re
from io import BytesIO
import io
import matplotlib.pyplot as plt
import sqlite3
import random
import glob
import signal
import base64
import tempfile
import datetime
import imageio
import time
from werkzeug.utils import secure_filename
import shutil
from search import search
import clean_images
from time import sleep
from pydub import AudioSegment
from PIL import Image, ImageDraw, ImageFont
import uuid
import logging
from logging.handlers import RotatingFileHandler
from flask_cors import CORS
import json
# Initialize Flask app
app = Flask(__name__)
# allow CORS
CORS(app) 


app.secret_key = os.urandom(24)
# Create a logger object
logger = logging.getLogger(__name__)
logger.setLevel(logging.DEBUG)

# Create a formatter for the log messages
formatter = logging.Formatter(
    '&#37;(asctime)s &#37;(levelname)s: &#37;(message)s [in &#37;(pathname)s:&#37;(lineno)d]')

# Create a file handler to write log messages to a file
file_handler = RotatingFileHandler(
    'Logs/app.log', maxBytes=10000, backupCount=1)
file_handler.setLevel(logging.DEBUG)
file_handler.setFormatter(formatter)

# Add the file handler to the logger
logger.addHandler(file_handler)

# Set up logging for the Flask app
logger.addHandler(file_handler)
# Define a route for your Flask app

SDIR = "static/"
# Define the file path to store the script content
script_file = os.path.join(os.getcwd(),SDIR, 'scripts', 'scripts.js')

@app.route('/hello_world')
def hello_world():
    TExt = "TEXT TEST 6789"
    logger.debug('This is a debug message: &#37;s', TExt)

    TEXT = "TEXT TEST abcd"
    logger.debug('This is a debug message: &#37;s', TEXT)

    return "Hello, World!"


directory_path = "static/current_project"
if not os.path.exists(directory_path):
    os.makedirs(directory_path)
app.config['UPLOAD_FOLDER'] = 'static/images/uploads'
app.config['RESULTS_FOLDER'] = 'static/videos/results'
app.config['THUMBNAILS_FOLDER'] = 'static/images/thumbnails'
app.config['CHECKPOINT_PATH'] = 'checkpoints/wav2lip_gan.pth'
app.config['AUDIO_PATH'] = 'sample_data/input_audio.wav'
app.config['video_PATH'] = 'sample_data/input_videio.mp4'
app.config['DATABASE'] = 'code.db'  # SQLite database file

app.secret_key = "your_secret_key"  # Add a secret key for session management
@app.route('/favicons.ico')
def favicons():
    return send_from_directory(os.path.join(app.root_path, 'static'), 'favicon.ico', mimetype='image/vnd.microsoft.icon')
@app.route('/favicon.ico')
def favicon():
    # Set the size of the favicon
    size = (16, 16)

    # Create a new image with a transparent background
    favicon = Image.new('RGBA', size, (0, 0, 0, 0))

    # Create a drawing object
    draw = ImageDraw.Draw(favicon)

    # Draw a yellow square
    square_color = (255, 0, 255)
    draw.rectangle([(0, 0), size], fill=square_color)

    # Draw a red circle
    circle_center = (size[0] // 2, size[1] // 2)
    circle_radius = size[0] // 3
    logger.info(f'circle_center, circle_radius:,&#123;circle_center} &#123;circle_radius}')
    circle_color = (255, 255, 0)
    draw.ellipse(
        [(circle_center[0] - circle_radius, circle_center[1] - circle_radius),
         (circle_center[0] + circle_radius, circle_center[1] + circle_radius)],
        fill=circle_color
    )

    # Save the image to a memory buffer
    image_buffer = io.BytesIO()
    favicon.save(image_buffer, format='ICO')
    image_buffer.seek(0)

    return Response(image_buffer.getvalue(), content_type='image/x-icon')


# use the search function as a route
app.add_url_rule('/search', 'search', search)


def zip_lists(list1, list2):
    return zip(list1, list2)


app.jinja_env.filters['zip'] = zip_lists

directory_path = 'temp'  # Replace with the desired directory path
# Create the directory if it doesn't exist
os.makedirs(directory_path, exist_ok=True)


# Walk through all directories and subdirectories


def findvideos():
    videoroot_directory = "static"
    MP4 = []
    for dirpath, dirnames, filenames in os.walk(videoroot_directory):
        for filename in filenames:
            if filename.endswith(".mp4") and "Final" in filename:
                MP4.append(os.path.join(dirpath, filename))
    if MP4:
        last_video = session.get("last_video")
        new_video = random.choice([video for video in MP4 if video != last_video])
        session["last_video"] = new_video
        return new_video
    else:
        return None

@app.route("/")
def index():
    video = findvideos()
    return render_template('index.html', video=video)
@app.route("/index2")
def index2():
    image_dir = 'static/images/MISC_MIX'
    image_files = [f for f in os.listdir(image_dir) if f.endswith('.jpg')]
    random_image_file = random.choice(image_files)
    return render_template('index2.html', random_image_file="images/MISC_MIX/" + random_image_file)


def generate_output():
    # Specify the path to your Bash script
    bash_script_path = '/home/jack/Desktop/StoryMaker/MakeVideo'

    # Execute the Bash script
    subprocess.run(['bash', bash_script_path])
    # Backup the result_videoxx.mp4 file
    current_datetime = str(int(time.time()))
    backup_filename = f"static/&#123;current_datetime}.mp4"
    original_filename = "results/result_voice.mp4"
    shutil.copyfile(original_filename, backup_filename)
    return redirect('/final_lipsync')


@app.route('/create_avatar', methods=['GET', 'POST'])
def create_avatar():
    if request.method == 'POST':
        # check_point = os.path.join(app.config['CHECKPOINT_PATH'], 'checkpoints/wav2lip_gan.pth')

        return Response(generate_output(), mimetype='text/plain')
    else:
        return render_template('create_avatar.html')


@app.route('/run_command', methods=['GET'])
def run_command():
    # Specify the path to your Bash script
    bash_script_path = 'MakeVideo'

    # Execute the Bash script
    subprocess.run(['bash', bash_script_path])
    # Backup the result_videoxx.mp4 file
    current_datetime = str(int(time.time()))
    backup_filename = f"static/&#123;current_datetime}.mp4"
    shutil.copyfile("results/result_voice.mp4", backup_filename)
    redirect('/final_lipsync')


@app.route('/result/&lt;filename&gt;')
def result(filename):
    return render_template('result.html', filename=filename)


@app.route('/convert_mp3_to_wav', methods=['GET', 'POST'])
def convert_mp3_to_wav():
    if request.method == 'POST':
        mp3_file = request.files['mp3_file']
        mp3_filename = mp3_file.filename
        mp3_path = os.path.join(app.static_folder, 'audio_mp3', mp3_filename)
        mp3_file.save(mp3_path)

        wav_filename = 'input_audio.wav'
        wav_path = os.path.join('sample_data', wav_filename)

        sound = AudioSegment.from_mp3(mp3_path)
        sound.export(wav_path, format='wav')

        return 'MP3 file converted to WAV successfully'
    else:
        return render_template('convert_mp3_to_wav.html')


@app.route('/final_lipsync')
def final_lipsync():
    VIDEO = 'result/result_voice.mp4'
    return render_template('final_lipsync.html', video=VIDEO)


@app.route('/text_mp3', methods=['GET', 'POST'])
def text_mp3():
    if request.method == 'POST':
        # Get the text from the textarea
        text = request.form['text']
        text0 = text
        # Remove whitespace from the text
        text = text.replace(" ", "")
        # Create a filename based on the first 25 characters of the text
        filename = "static/audio_mp3/" + text[:25] + ".mp3"
        textname = text[:25] + ".txt"
        # Save the text to a text file
        textname = textname.strip()
        with open("static/text/" + textname, 'w') as f:
            f.write(text0)
        filename = filename.strip()  # remove the newline character
        # Create a gTTS object and save the audio file
        tts = gTTS(text)
        filename = filename.strip()
        tts.save(filename)
        shutil.copy(filename, 'static/TEMP.mp3')
        # Play the mp3 file
        pygame.mixer.init()
        pygame.mixer.music.load(filename)
        pygame.mixer.music.play()
        # Wait for the audio to finish playing
        while pygame.mixer.music.get_busy():
            pygame.time.Clock().tick(10)
        # Stop pygame and exit the program
        pygame.mixer.quit()
        pygame.quit()
        # Return the text and filename to the template
        return render_template('text_mp3.html', text=text, filename=filename)
    else:
        # Render the home page template
        return render_template('text_mp3.html')


@app.route('/mp3_upload', methods=['POST'])
def mp3_upload():
    if 'file' not in request.files:
        return 'No file uploaded', 400

    file = request.files['file']
    if file.filename == '':
        return 'No file selected', 400

    if file:
        audio_file = 'static/TEMP.mp3'
        file.save(audio_file)
        return render_template('player.html', audio_file=audio_file)


@app.route('/generate_video', methods=['GET', 'POST'])
def generate_video():
    if request.method == 'POST':
        # Set the input and output filenames
        eyes_filename = 'static/TEMP.png'
        input_filename = 'static/TEMP2.mp4'
        output_filename = 'static/TEMP2.mp4'

        # Set the paths for the video and audio files
        audio_file = 'static/TEMP.mp3'
        output_filenames = 'static/TEMP.mp4'

        # Extract eyes from the uploaded image and save as eyes_test.png
        image_path = "static/TEMP.jpg"
        shape_predictor_path = "/home/jack/hidden/shape_predictor_68_face_landmarks.dat"
        extract_eyes(image_path, eyes_filename, shape_predictor_path)

        # Load the image clip
        image_clip = ImageClip(image_path, duration=30)

        # Set the final clip properties
        final_clip = image_clip.set_audio(None)
        final_clip = final_clip.set_position('center')

        # Write the final video
        final_clip.write_videofile(
            output_filename, codec='libx264', fps=30, audio=False)

        # Load the input video without audio
        input_clip = VideoFileClip(input_filename, audio=False)

        # Load the eye image clip
        eyes_clip = ImageClip(eyes_filename)

        # Create multiple looping clips
        clips = []
        for i in range(8):
            loop_clip = mkloop(input_clip, eyes_clip)
            clips.append(loop_clip)

        # Concatenate all the clips
        final_clips = concatenate_videoclips(clips)

        # Write the final video
        final_clips.write_videofile(
            output_filenames, codec='libx264', fps=input_clip.fps, audio=False)

        # Load the video and audio files
        video_clip = VideoFileClip(output_filenames)
        audio_clip = AudioFileClip(audio_file)

        # Set the duration of the final video to match the audio clip's duration
        final_duration = audio_clip.duration + .5

        # Set the video clip's duration to match the final duration
        video_clip = video_clip.set_duration(final_duration)

        # Set the audio of the video clip to be the same as the loaded audio clip
        video_clip = video_clip.set_audio(audio_clip)

        # Write the final video file
        output_path = "static/final_video_blinking.mp4"
        video_clip.write_videofile(
            output_path, codec='libx264', audio_codec='aac', fps=24)
        shutil.copy(output_path, 'results/final_video_blinking.mp4')
        return render_template('generate_video.html', video_path=output_path)

    return render_template('generate_video.html')
# Function to extract eyes from an image using dlib


def extract_eyes(image_path, eyes_filename, shape_predictor_path):
    # Load the image and shape predictor model
    image = cv2.imread(image_path)
    detector = dlib.get_frontal_face_detector()
    predictor = dlib.shape_predictor(shape_predictor_path)

    # Convert the image to grayscale
    gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)

    # Detect faces in the image
    faces = detector(gray)

    # Iterate over the detected faces and extract the eye regions
    for face in faces:
        landmarks = predictor(gray, face)

        # Extract the coordinates of the left eye
        left_eye_pts = [(landmarks.part(i).x, landmarks.part(i).y)
                        for i in range(36, 42)]

        # Extract the coordinates of the right eye
        right_eye_pts = [(landmarks.part(i).x, landmarks.part(i).y)
                         for i in range(42, 48)]

        # Create a transparent image with an alpha channel
        transparent_image = np.zeros(
            (image.shape[0], image.shape[1], 4), dtype=np.uint8)

        # Define the skin color (e.g., light brown or tan) in BGR format
        # skin_color_bgr = (210, 180, 140)
        skin_color_bgr = (80, 80, 40)

        # Convert BGR to RGB
        skin_color_rgb = (skin_color_bgr[2],
                          skin_color_bgr[1], skin_color_bgr[0])

        # Draw the eye regions on the transparent image with the skin color and alpha channel
        cv2.fillPoly(transparent_image, [np.array(
            left_eye_pts)], skin_color_rgb + (200,))
        cv2.fillPoly(transparent_image, [np.array(
            right_eye_pts)], skin_color_rgb + (200,))
        blurred_image = cv2.GaussianBlur(transparent_image, (5, 5), 0)
        # Save the transparent image with only the eyes as a PNG file
        cv2.imwrite(eyes_filename, blurred_image)
# Function to create a looping clip with blinking eyes


def mkloop(input_clip, eyes_clip):
    # Set the duration of the eye image clip
    eyes_duration = 0.1  # seconds

    # Set the position of the eye image clip
    eyes_position = 'center'

    # Set the start time of the eye image clip
    blink_start_time = randint(2, 4)

    # Create a CompositeVideoClip with the input video and the eye image clip
    final_clip = CompositeVideoClip([input_clip, eyes_clip.set_duration(eyes_duration)
                                     .set_position(eyes_position)
                                     .set_start(blink_start_time)])

    # Calculate the duration of the final clip
    final_duration = blink_start_time + eyes_duration + \
        randint(2, 4)  # 5 to 8 seconds after the blink

    # Set the duration of the final clip
    final_clip = final_clip.set_duration(final_duration)
    return final_clip


def apply_text(mp4_path, text, x, y):
    video = moviepy.editor.VideoFileClip(mp4_path)
    font = "/home/jack/fonts/OpenSansBold.ttf"
    text_clip = moviepy.editor.TextClip(
        text, font=font, fontsize=24, color="white")

    try:
        x = int(x)
        y = int(y)
    except ValueError:
        raise ValueError(
            "Invalid position values. Please provide integer values for x and y.")

    if not (0 &lt;= x &lt;= video.w):
        raise ValueError(
            "Invalid x position. Must be within the width of the video.")

    if not (0 &lt;= y &lt;= video.h):
        raise ValueError(
            "Invalid y position. Must be within the height of the video.")

    text_clip = text_clip.set_position((x, y))

    # Check if duration is None and set a default value if necessary
    video_duration = video.duration if video.duration is not None else 0
    text_clip_duration = text_clip.duration if text_clip.duration is not None else 0

    # Set the duration of the video and text clips
    duration = max(video_duration, text_clip_duration)
    video = video.set_duration(duration)
    text_clip = text_clip.set_duration(duration)

    # Create the composite video by overlaying the text clip onto the video clip
    new_video = moviepy.editor.CompositeVideoClip([video, text_clip])

    # Save the new video with the applied text
    new_mp4_path = 'static/TTMP.mp4'
    new_video.write_videofile(
        new_mp4_path, codec='libx264', audio_codec='aac', remove_temp=False)

    return new_mp4_path


@app.route("/apply_text_to_video", methods=["POST", "GET"])
def apply_text_to_video():
    if request.method == "POST":
        file = request.files["mp4_file"]
        if file.filename == '':
            return redirect(request.url)
        file.save('static/TTMP.mp4')

        mp4_path = 'static/TTMP.mp4'
        text = request.form["text"]
        x = request.form["x"]
        y = request.form["y"]
        new_mp4_path = apply_text(mp4_path, text, x, y)
        return render_template("apply_text_to_video.html", new_mp4_path=new_mp4_path)
    else:
        return render_template("apply_text_to_video.html")


# Get a list of existing subdirectories in the video resources directory
existing_subdirectories = [subdir for subdir in os.listdir(
    "static/current_project") if os.path.isdir(os.path.join("static/current_project", subdir))]


@app.route('/uploads', methods=['GET', 'POST'])
def upload_files():
    video_resources_dir = "static/current_project"
    if request.method == 'POST':
        # Get the selected subdirectory from the form
        selected_subdirectory = request.form.get('subdirectory')

        # Check if the selected subdirectory exists
        if selected_subdirectory in existing_subdirectories:
            # Handle the uploaded file
            file = request.files['file']
            if file:
                # Save the file to the selected subdirectory
                file.save(os.path.join(video_resources_dir,
                          selected_subdirectory, file.filename))
                # Get the URL for the uploaded image
                image_path = url_for('static', filename=os.path.join(
                    'current_project', selected_subdirectory, file.filename))
                return render_template('upload_files.html', image_path=image_path)
            else:
                return 'No file selected.'
        else:
            return 'Invalid subdirectory selected.'
    # Render the upload form with the list of existing subdirectories
    return render_template('upload_files.html', subdirectories=existing_subdirectories)


@app.route('/get_files', methods=['POST'])
def get_files():
    subdirectory = request.form.get('subdirectory')
    file_options = []
    if subdirectory and subdirectory in existing_subdirectories:
        subdirectory_path = os.path.join(
            "static/current_project", subdirectory)
        files = os.listdir(subdirectory_path)
        file_options = [
            f'&lt;option value="&#123;file}"&gt;&#123;file}&lt;/option&gt;'
            for file in files
            if os.path.isfile(os.path.join(subdirectory_path, file))
        ]
    return ''.join(file_options)


@app.route('/image_list')
def image_list():
    image_directory = 'static/current_project/Narrators'
    image_list = [
        filename
        for filename in os.listdir(image_directory)
        if filename.endswith('.jpg')
    ]
    return render_template('image_list.html', image_list=image_list)


@app.route('/upload', methods=['POST', 'GET'])
def upload():
    filename = request.form['filename']
    if filename:
        src_path = 'static/current_project/Narrators/' + filename
        dest_path = 'static/TEMP.jpg'
        shutil.copyfile(src_path, dest_path)
        return redirect('/')
    else:
        return 'No file selected.'


# List of image directories (you can add more as needed)
image_directories = glob.glob('static/images/*')

@app.route("/mkblend_video", methods=['GET', 'POST'])
def mkblend_video():
    if request.method == 'POST':
        selected_directory = request.form.get('selected_directory')

        if selected_directory:
            # Create a temporary directory to save the images
            temp_dir = tempfile.mkdtemp()

            # Loop through the files in the selected directory and move them to the temporary directory
            chosen_directory = os.path.join('static/images', selected_directory)
            for filename in os.listdir(chosen_directory):
                if filename.endswith('.jpg') or filename.endswith('.png'):
                    source_path = os.path.join(chosen_directory, filename)
                    target_path = os.path.join(temp_dir, filename)
                    os.rename(source_path, target_path)
                    logger.debug('Moved file: &#37;s', filename)
    
        image_list = glob.glob(temp_dir + "*.jpg")
        logger.debug('IMAGE_LIST: &#37;s', image_list)
        # Shuffle and select a subset of images
        # random.shuffle(image_list)
        image_list = sorted(image_list)
        logger.debug('Selected image filenames: &#37;s', image_list)
        # Print the number of selected images
        print(len(image_list))
        logger.debug('Number of files: &#37;s', len(image_list))

        def changeImageSize(maxWidth, maxHeight, image):
            widthRatio = maxWidth / image.size[0]
            heightRatio = maxHeight / image.size[1]
            newWidth = int(widthRatio * image.size[0])
            newHeight = int(heightRatio * image.size[1])
            newImage = image.resize((newWidth, newHeight))
            return newImage

        # Get the size of the first image
        if image_list:
            imagesize = Image.open(image_list[0]).size

            for i in range(len(image_list) - 1):
                imag1 = image_list[i]
                imag2 = image_list[i + 1]
                image1 = Image.open(imag1)
                image2 = Image.open(imag2)

                image3 = changeImageSize(imagesize[0], imagesize[1], image1)
                image4 = changeImageSize(imagesize[0], imagesize[1], image2)

                image5 = image3.convert("RGBA")
                image6 = image4.convert("RGBA")

                text = "animate/"
                for ic in range(0, 100):
                    inc = ic * 0.01
                    # inc = ic * 0.08
                    sleep(0.1)
                    # Gradually increase opacity
                    alphaBlended = Image.blend(image5, image6, alpha=inc)
                    alphaBlended = alphaBlended.convert("RGB")
                    current_time = datetime.datetime.now()
                    filename = current_time.strftime(
                        '&#37;Y&#37;m&#37;d_&#37;H&#37;M&#37;S&#37;f')[:-3] + '.jpg'
                    alphaBlended.save(f'&#123;text}&#123;filename}')
                    # shutil.copy(f'&#123;text}&#123;filename}', &#123;temp_dir}+'TEMP.jpg')
                    shutil.copy(f'&#123;text}&#123;filename}', os.path.join(temp_dir, 'TEMP.jpg'))

                    if ic &#37; 25 == 0:
                        print(i, ":", ic, end=" . ")
                    if ic &#37; 100 == 0:
                        logger.debug('Image Number: &#37;.2f &#37;d', inc, ic)

            from moviepy.video.io.ImageSequenceClip import ImageSequenceClip
            # Get the list of files sorted by creation time
            imagelist = sorted(glob.glob('animate/*.jpg'),
                               key=os.path.getmtime)

            # Create a clip from the images
            clip = ImageSequenceClip(imagelist, fps=30)

            # Write the clip to a video file using ffmpeg
            current_time = datetime.datetime.now()
            filename = "static/animate/TEMP3a.mp4"
            clip.write_videofile(
                filename, fps=24, codec='libx265', preset='medium')
            store = "static/videos/" + \
                current_time.strftime('&#37;Y&#37;m&#37;d_&#37;H&#37;M&#37;S&#37;f')[:-3] + 'jul27.mp4'
            # Replace with the desired path for the converted video file
            output_file = "static/animate/TEMP5.mp4"
            # Replace with the desired path for the converted video file
            webm_file = "static/animate/TEMP5.webm"
            ffmpeg_cmd = [
                'ffmpeg', '-i', filename, '-c:v', 'libx264', '-crf', '23', '-preset', 'medium', '-c:a', 'aac',
                '-b:a', '128k', '-movflags', '+faststart', '-y', output_file
            ]
            subprocess.run(ffmpeg_cmd)
            ffmpeg_cmd2 = [
                'ffmpeg', '-i', filename, '-c:v', 'libx264', '-crf', '23', '-preset', 'medium', '-c:a', 'aac',
                '-b:a', '128k', '-movflags', '+faststart', '-y', webm_file
            ]
            subprocess.run(ffmpeg_cmd2)
            shutil.copy(filename, store)
            return render_template('mkblend_video.html', video=filename)

    return render_template('choose_directory.html')


def changeImageSize(maxWidth, maxHeight, image):
    widthRatio = maxWidth / image.size[0]
    heightRatio = maxHeight / image.size[1]
    newWidth = int(widthRatio * image.size[0])
    newHeight = int(heightRatio * image.size[1])
    newImage = image.resize((newWidth, newHeight))
    return newImage


directories = [
    "static/images/512x1536-woman",
    "static/images/abstract_beauty",
    "static/images/beautiful_girl",
    "static/images/Beautiful_Warrior"
]


@app.route("/mkblend_videos", methods=['POST', 'GET'])
def mkblend_videos():
    # Get the selected directory from the form data
    selected_directory = request.form.get('selected_directory')
    logger.debug('Selected Directory: &#37;s', selected_directory)
    # Check if the selected directory is valid
    if selected_directory and selected_directory in directories:
        # Use glob to get the list of files within the selected directory
        filelist = glob.glob(os.path.join(selected_directory, '*.jpg'))
        logger.debug('Selected directory: &#37;s', selected_directory)
        image_list = filelist
        # Shuffle and select a subset of images
        image_list = filelist
        random.shuffle(image_list)
        image_list = random.sample(image_list, 29)
        # Get the size of the first image
        imagesize = Image.open(image_list[0]).size

        # Print the number of selected images
        print("IMAGE_LIST_length:", len(image_list))

        for i in range(len(image_list) - 1):
            imag1 = image_list[i]
            imag2 = image_list[i + 1]
            image1 = Image.open(imag1)
            image2 = Image.open(imag2)

            image3 = changeImageSize(imagesize[0], imagesize[1], image1)
            image4 = changeImageSize(imagesize[0], imagesize[1], image2)

            image5 = image3.convert("RGBA")
            image6 = image4.convert("RGBA")

            text = "animate/"
            # for ic in range(0,125):
            for ic in range(0, 100):
                inc = ic * .01
                sleep(.1)
                # gradually increase opacity
                alphaBlended = Image.blend(image5, image6, alpha=inc)
                alphaBlended = alphaBlended.convert("RGB")
                current_datetime = str(int(time.time()))
                filename = current_datetime[:-3] + '.jpg'
                alphaBlended.save(f'&#123;text}&#123;filename}')
                if ic &#37; 25 == 0:
                    print(ic, ":", inc, end=" . ")

    from moviepy.video.io.ImageSequenceClip import ImageSequenceClip
    # Get the list of files sorted by creation time
    imagelist2 = sorted(glob.glob('animate/*.jpg'), key=os.path.getmtime)

    # Create a clip from the images
    clip = ImageSequenceClip(imagelist2, fps=30)

    # Write the clip to a video file using ffmpeg
    current_datetime = str(int(time.time()))
    filename = "static/animate/TEMP3a.mp4"
    clip.write_videofile(filename, fps=24, codec='libx265', preset='medium')
    store = "static/videos/" + current_datetime[:-3] + 'july27.mp4'
    # Replace with the desired path for the converted video file
    output_file = "static/animate/TEMP5.mp4"
    # webm_file = "static/animate/TEMP5.webm"  #Replace with the desired path for the converted video file
    ffmpeg_cmd = ['ffmpeg', '-i', filename, '-c:v', 'libx264', '-crf', '23', '-preset',
                  'medium', '-c:a', 'aac', '-b:a', '128k', '-movflags', '+faststart', '-y', output_file]
    subprocess.run(ffmpeg_cmd)
    # ffmpeg_cmd2 = ['ffmpeg', '-i', filename, '-c:v', 'libx264', '-crf', '23', '-preset', 'medium', '-c:a', 'aac', #'-b:a', '128k', '-movflags', '+faststart', '-y', webm_file]
    # subprocess.run(ffmpeg_cmd2)
    shutil.copy(filename, store)
    return render_template('mkblend_videos.html', video=filename)


@app.route('/generate_vid', methods=['GET', 'POST'])
def generate_vid():
    current_datetime = str(int(time.time()))
    str_current_datetime = str(current_datetime)
    logger.debug('Generating video', str_current_datetime)
    if request.method == 'POST':
        # Load the audio file
        audio_file = request.files['audio']
        # , 'input_audio.mp3')
        filename = os.path.join(app.config['AUDIO_PATH'])
        logger.info(f'Audio path: &#123;filename}')
        audio_file.save(filename)
        print("FILENAME:", filename)

        # Get the duration of the audio using ffprobe
        command = f"ffprobe -v error -show_entries format=duration -of default=noprint_wrloggers=1:nokey=1 &#123;filename}"
        duration = subprocess.check_output(command.split())
        duration = float(duration.strip().decode())
        logger.info(f'Duration: &#123;duration}')
        # Load the image file
        image_file = request.files['image']
        image_path = os.path.join(
            app.config['UPLOAD_FOLDER'], secure_filename(image_file.filename))
        logger.info(f'Image path: &#123;image_path}')
        image_file.save(image_path)

        # Create the video
        # video_path = os.path.join(app.config['VIDEO_PATH'])#, 'sample_data/input_video.mp4')
        video_path = 'sample_data/input_video.mp4'
        logger.info(f'Video path: &#123;video_path}')
        ffmpeg_command = f"ffmpeg -loop 1 -i &#123;image_path} -c:v libx264 -t &#123;duration+ 0.5} -pix_fmt yuv420p -y &#123;video_path}"
        subprocess.run(ffmpeg_command, shell=True)

        return f'Video created: &#123;video_path}'

    return render_template('generate_vid.html')
# Define route to display upload form


@app.route('/upload_file', methods=['POST', 'GET'])
def upload_file():
    if request.method == 'POST':
        # Check if file was uploaded
        if 'file' not in request.files:
            logger.error('No file was uploaded')
            flash('Error: No file was uploaded')
            return redirect(request.url)

        logger.error('request.files[\'file\']')
        file = request.files['file']

        # Check if file was selected
        if file.filename == '':
            logger.error('No file was selected')
            flash('Error: No file was selected')
            return redirect(request.url)

        # Define allowed file extensions
        ALLOWED_EXTENSIONS = &#123;'png', 'jpg', 'jpeg', 'gif'}

        # Define function to check file extension
        def allowed_file(filename):
            return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

        # Check if file is allowed
        if not allowed_file(file.filename):
            # logger.error(f"File '&#123;file.filename}' is not allowed")
            logger.error("File '" + file.filename + "' is not allowed")
            flash("Error: File '" + file.filename + "'close is not allowed")
            return redirect(request.url)

        # Save the file
        try:
            filename = secure_filename(file.filename)
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
            logger.info(f'File &#123;filename} saved')
            logger.info('FILENAME:', os.path.join(
                app.config['UPLOAD_FOLDER'], filename))
        except Exception as e:
            logger.error(f'Error saving file: &#123;e}')
            flash('Error: Unable to save file')
            return redirect(request.url)

        # Redirect to the result page
        logger.info(f'File-Result &#123;filename} SAVED')
        return redirect(url_for('result', filename=filename))

    # Return the upload form for GET requests
    return render_template('upload_file.html')


@app.route('/uploads/&lt;filename&gt;')
def uploaded_file(filename):
    return send_from_directory(app.config['UPLOAD_FOLDER'], filename)


@app.route('/make_text', methods=['GET', 'POST'])
def make_text():
    DIR = 'static/text/'
    if request.method == 'POST':
        # Get the text entered in the textarea
        text = request.form.get('text')

        # Generate a filename using the first 25 letters of the text
        text = text.replace(' ', '_')
        filename = text[:25]

        # Save the text to a file
        with open(f'&#123;DIR}&#123;filename}.txt', 'w') as file:
            file.write(text)

        return 'Text saved successfully!'
    else:
        return render_template('make_text.html')


# directories = ['static/images', 'static/images/squares', 'static/final_videos', 'static/Dreamlike_art',
#              'static/squares', 'static/images/uploads', 'static/Final_Fantasy', 'static/final_images', 'static/thumbnails']
directories = glob.glob('static/images/*')

# Route for the home page


@app.route('/home')
def home():
    return render_template('choose_dir.html', directories=directories)
# Route for choosing a directory


@app.route('/choose_dir', methods=['GET', 'POST'])
def choose_dir():
    if request.method == 'POST':
        selected_directory = request.form.get('directory', directories)
        TExt = "TEXT TEST"
        logger.error('No file was selected: &#37;s', TExt)
        logger.debug('Debug was selected: &#37;s', TExt)
        if selected_directory is None:
            # Handle the case where no directory is selected
            logger.error('No directory selected')
            return 'No directory selected!'
        # Rest of the code...
        # Use the selected_directory variable in your logic to generate the video
        # Make sure to update the paths according to the selected directory
        logger.debug('Selected directory: &#37;s', selected_directory)
        # Get the list of image files in the selected directory
        image_filenames = random.sample(
            glob.glob(selected_directory + '/*.jpg'), 30)
        logger.debug('Selected image filenames: &#37;s', image_filenames)

        image_clips = []
        for filename in image_filenames:
            # Open the image file and resize it to 512x768
            logger.debug('Processing image: &#37;s', filename)
            image = Image.open(filename)
            # image = image.resize((512, 768), Image.ANTIALIAS)
            # Convert the PIL Image object to a NumPy array
            image_array = np.array(image)
            # Create an ImageClip object from the resized image and set its duration to 1 second
            image_clip = ImageClip(image_array).set_duration(1)
            # Append the image clip to the list
            image_clips.append(image_clip)

        logger.debug('Number of image clips: &#37;d', len(image_clips))

        # Concatenate all the image clips into a single video clip
        video_clip = concatenate_videoclips(image_clips, method='compose')
        timestr = time.strftime("&#37;Y&#37;m&#37;d-&#37;H&#37;M&#37;S")
        # Set the fps value for the video clip
        video_clip.fps = 24
        # Write the video clip to a file
        video_file = f'static/videos/random_images_&#123;timestr}_video.mp4'
        output_p = 'static/videos/random_images_video.mp4'
        logger.debug('Output video file path: &#37;s', video_file)
        logger.debug('Final video file path: &#37;s', output_p)

        video_clip.write_videofile(video_file, fps=24)

        try:
            shutil.copy(video_file, output_p)
        except Exception as e:
            logger.error('Error occurred while copying file: &#37;s', str(e))
            return f"Error occurred while copying file: &#123;str(e)}"

        # Return the rendered template with the list of directories and output path
        return render_template('choose_dir.html', directories=directories, output_path=output_p)

    # If the request method is GET, render the form template with the list of directories
    output_p = 'static/videos/random_images_video.mp4'
    return render_template('choose_dir.html', directories=directories, output_path=output_p)


@app.route('/convert', methods=['GET', 'POST'])
def convert():
    if request.method == 'POST':
        try:
            audio_file = request.files['audio_file']
            # Path for audio file
            audio_file_path = f'static/audio_mp3/&#123;audio_file.filename}'
            # Save the audio file to the specified location
            audio_file.save(audio_file_path)

            formatted_text_file = request.files['formatted_text_file']
            # Path for formatted text file
            formatted_text_file_path = f'static/formatted_text/&#123;formatted_text_file.filename}'
            # Save the formatted text file to the specified location
            formatted_text_file.save(formatted_text_file_path)

            output_filename = datetime.datetime.now().strftime('&#37;Y-&#37;m-&#37;d') + '.mp4'
            output_path = 'static/videos/' + output_filename
            # Define the ffmpeg command
            # Create the blank video
            # ffmpeg -f lavfi -i color='#470000'@0x0:s=1280x720:rate=60,format=rgba -t 280 -y blank.mp4
            command = [
                'ffmpeg',
                '-i', audio_file_path,
                '-f', 'lavfi',
                '-i', f"color='#470000'@0.0:s=1280x720:rate=60,format=rgba",
                '-vf', f"drawtext=textfile='&#123;os.path.abspath(formatted_text_file_path)}':y=(h-220)-12*t:x=580:fontcolor=orange:fontfile=/home/jack/Arimo-Regular.ttf:fontsize=26",
                '-t', '280',
                '-y', output_path
            ]

            logger.debug(f"Command: &#123;' '.join(command)}")

            subprocess.run([str(arg) for arg in command], check=True)
            video = f'&#123;output_filename}'
            return render_template('convert.html', video=output_path)
        except Exception as _:
            logger.exception("An error occurred during video conversion:")
            return render_template('error.html', message="An error occurred during video conversion.")
    else:
        return render_template('convert_form.html')


@app.route('/convert512', methods=['GET', 'POST'])
def convert512():
    if request.method == 'POST':
        try:
            audio_file = request.files['audio_file']
            # Path for audio file
            audio_file_path = f'static/audio_mp3/&#123;audio_file.filename}'
            # Save the audio file to the specified location
            audio_file.save(audio_file_path)
            # Get the duration of the audio using ffprobe
            command = f"ffprobe -v error -show_entries format=duration -of default=noprint_wrloggers=1:nokey=1 &#123;audio_file_path}"
            duration = subprocess.check_output(command.split())
            duration = float(duration.strip().decode())
            length = int(duration + 5)
            logger.info(f'Duration-512: &#123;length}')
            formatted_text_file = request.files['formatted_text_file']
            # Path for formatted text file
            formatted_text_file_path = f'static/formatted_text/&#123;formatted_text_file.filename}'
            # Save the formatted text file to the specified location
            formatted_text_file.save(formatted_text_file_path)

            output_filename = datetime.datetime.now().strftime('&#37;Y-&#37;m-&#37;d') + '.mp4'
            output_path = 'static/videos/' + output_filename
            # Define the ffmpeg command
            # Create the blank video
            # ffmpeg -f lavfi -i color='#470000'@0x0:s=1280x720:rate=60,format=rgba -t 280 -y blank.mp4
            # y=(h-120)-12*t:x=24:
            command = [
                'ffmpeg',
                '-i', audio_file_path,
                '-f', 'lavfi',
                '-i', f"color='#470000'@0.0:s=512x1024:rate=60,format=rgba",
                '-vf', f"drawtext=textfile='&#123;os.path.abspath(formatted_text_file_path)}':y=(h-120)-10*t:x=24:fontcolor=orange:fontfile=/home/jack/Arimo-Regular.ttf:fontsize=20",
                '-t', f'&#123;length}', '-y', output_path
            ]

            logger.debug(f"Command: &#123;' '.join(command)}")

            subprocess.run([str(arg) for arg in command], check=True)
            video = f'&#123;output_filename}'
            return render_template('convert512.html', video=output_path)
        except Exception as e:
            logger.exception("An error occurred during video conversion:")
            return render_template('error.html', message="An error occurred during video conversion.")
    else:
        return render_template('convert_form512.html')


@app.route('/mk_text', methods=['GET', 'POST'])
def mk_text():
    DIR = "static/text/"
    if request.method == 'POST':
        text = request.form.get('text')
        tex = text.replace(" ", "_")
        filename = tex[:25]
        with open(f'&#123;DIR}&#123;filename}.txt', 'w') as file:
            file.write(text)
        return render_template('mk_text.html', text=text, filename=f'&#123;filename}.txt')
    else:
        return render_template('mk_text.html')


@app.route('/list_files')
def list_files():
    static_text_dir = 'static/text/'
    files = os.listdir(static_text_dir)
    files = [file for file in files if os.path.isfile(
        os.path.join(static_text_dir, file))]
    return str(files)


@app.route('/format_file', methods=['POST', 'GET'])
def format_file():
    static_text_dir = 'static/text/'
    static_format_dir = 'static/formatted_text/'
    if request.method == 'POST':
        filename = request.form.get('filename')
        file_path = os.path.join(static_text_dir, filename)
        if not os.path.isfile(file_path):
            return render_template('error.html', message=f'File "&#123;filename}" does not exist')
        with open(file_path, 'r') as file:
            content = file.read()
        words = content.split()
        formatted_content = '\n'.join(
            [' '.join(words[i:i + 5]) for i in range(0, len(words), 5)])
        modified_filename = filename.replace('.txt', '') + 'FORMATTED.txt'
        modified_file_path = os.path.join(static_format_dir, modified_filename)
        with open(modified_file_path, 'w') as modified_file:
            modified_file.write(formatted_content)
            logger.debug('This is Formated Content: &#37;s', formatted_content)
            logger.debug('This is Formated file: &#37;s', modified_file_path)
        return render_template('success.html', original_file=filename, modified_file=modified_filename)

    file_options = []
    for file_name in os.listdir(static_text_dir):
        if file_name.endswith('.txt'):
            file_options.append(file_name)

    return render_template('form.html', file_options=file_options)


@app.route('/view_text')
def view_text():
    text_files_dir = 'static/text/'
    text_files = []
    for filename in os.listdir(text_files_dir):
        if filename.endswith('.txt'):
            text_files.append(filename)
    return render_template('select_file.html', text_files=text_files)


@app.route('/view_text/&lt;filename&gt;')
def display_text(filename):
    text_file_path = f'static/text/&#123;filename}'
    try:
        with open(text_file_path, 'r') as file:
            file_contents = file.read()
        return render_template('view_text.html', file_contents=file_contents, filename=filename)
    except FileNotFoundError:
        return f'Text file &#123;filename} not found.'


@app.route('/edit_file', methods=['GET', 'POST'])
def edit_file():
    if request.method == 'POST':
        filename = request.form.get('filename')
        text = request.form.get('text')
        with open(f'static/text/&#123;filename}', 'w') as file:
            file.write(text)
    text_files_dir = 'static/text/'
    text_files = []
    for filename in os.listdir(text_files_dir):
        if filename.endswith('.txt'):
            text_files.append(filename)
    fvideo = findvideos()        
    return render_template('edit_file.html', text_files=text_files, video=fvideo)


@app.route('/edit_formatted', methods=['GET', 'POST'])
def edit_formatted():
    if request.method == 'POST':
        filename = request.form.get('filename')
        text = request.form.get('text')
        with open(f'static/formatted_text/&#123;filename}', 'w') as file:
            file.write(text)
    text_files_dir = 'static/formatted_text/'
    text_files = []
    for filename in os.listdir(text_files_dir):
        if filename.endswith('.txt'):
            text_files.append(filename)
    return render_template('edit_formatted.html', text_files=text_files)


@app.route('/get_formatted_content/&lt;filename&gt;')
def get_formatted_content(filename):
    file_path = os.path.join('static/formatted_text', filename)
    with open(file_path, 'r') as file:
        content = file.read()
    return content


@app.route('/get_file_content/&lt;filename&gt;')
def get_file_content(filename):
    file_path = os.path.join('static/text', filename)
    with open(file_path, 'r') as file:
        content = file.read()
    return content


@app.route('/indeX')
def indeX():
    return render_template('indeX.html')


@app.route('/resize_and_overlay_videos')
def resize_and_overlay_videos():
    # Path to the videos
    static_video_path = 'static/videos/2023-07-07.mp4'
    input_video_path = 'static/animate/topvideo.mp4'
    output_video_path = 'static/output/resulta.mp4'

    # Resize the input video using FFmpeg
    resize_command = f'ffmpeg -i &#123;input_video_path} -vf "scale=410:820" -y resized.mp4'
    subprocess.call(resize_command, shell=True)

    # Overlay the resized video on the background video using FFmpeg
    overlay_command = f'ffmpeg -i &#123;static_video_path} -i resized.mp4 -filter_complex "overlay=25:25" -y &#123;output_video_path}'
    subprocess.call(overlay_command, shell=True)

    # Remove the temporary resized video
    subprocess.call('rm resized.mp4', shell=True)

    # Return the final video as a response
    return send_file(output_video_path, mimetype='video/mp4')


@app.route('/resize_and_overlay_videos_page')
def resize_and_overlay_videos_page():
    output_video_path = 'static/output/resulta.mp4'
    return render_template('resize_and_overlay_videos.html', video=output_video_path)


@app.route('/build_stackedvids')
def build_stackedvids():
    # Get a random video and image from the static folder
    video_filename = random.choice(glob.glob('static/square_vids/*.mp4'))
    image_filename = random.choice(glob.glob('static/squares/*.jpg'))

    # Load the video and image files as clips
    video_clip = VideoFileClip(video_filename)
    image_clip = ImageClip(image_filename)

    # Set the duration of the image clip to match the duration of the video clip
    image_clip = image_clip.set_duration(video_clip.duration)

    # Resize the clips to 640x640 and 640x640 respectively
    video_clip = video_clip.resize((640, 640))
    image_clip = image_clip.resize((640, 640))

    # Create a black clip to fill the remaining space below the image
    black_clip = ColorClip(size=(640, 640), color=(
        0, 0, 0)).set_duration(video_clip.duration)

    # Combine the clips vertically using CompositeVideoClip
    final_clip = CompositeVideoClip([
        video_clip.set_position(('center', 'top')),
        image_clip.set_position(('center', 640)),
        black_clip.set_position(('center', 640 + 640))
    ], size=(640, 1280))

    # Export the final clip as a video file
    timestr = time.strftime("&#37;Y&#37;m&#37;d-&#37;H&#37;M&#37;S")
    video_filename = 'static/stacked_vids/stacked_vids' + timestr + 'video.mp4'
    final_clip_path = 'static/stacked_vids/stacked_videos.mp4'
    final_clip.write_videofile(final_clip_path)
    final_clip.write_videofile(video_filename)

    return render_template('/build_stackedvids.html', stackedvid_url=final_clip_path)


@app.route('/build_stackedvid')
def build_stackedvid():
    # Get a random video and image from the static folder
    video_filename = random.choice(glob.glob('static/square_vids/*.mp4'))
    videofilename = random.choice(glob.glob('static/square_vids/*.mp4'))

    # Load the video and image files as clips
    video_clip = VideoFileClip(video_filename)
    videoclip = VideoFileClip(videofilename)

    # Set the duration of the image clip to match the duration of the video clip
    videoclip = videoclip.set_duration(video_clip.duration)

    # Resize the clips to 640x640 and 640x640 respectively
    video_clip = video_clip.resize((640, 640))
    videoclip = videoclip.resize((640, 640))

    # Create a black clip to fill the remaining space below the image
    black_clip = ColorClip(size=(640, 640), color=(
        0, 0, 0)).set_duration(video_clip.duration)

    # Combine the clips vertically using CompositeVideoClip
    final_clip = CompositeVideoClip([
        video_clip.set_position(('center', 'top')),
        videoclip.set_position(('center', 640)),
        black_clip.set_position(('center', 640 + 640))
    ], size=(640, 1280))

    # Export the final clip as a video file
    timestr = time.strftime("&#37;Y&#37;m&#37;d-&#37;H&#37;M&#37;S")
    video_filename = 'static/stacked_vids/stacked_vids' + timestr + 'video.mp4'
    final_clip_path = 'static/stacked_vids/stacked_videos.mp4'
    final_clip.write_videofile(final_clip_path)
    final_clip.write_videofile(video_filename)

    return render_template('/build_stackedvid.html', stackedvid_url=final_clip_path)


@app.route('/clean_images', methods=['POST'])
def clean_images_route():
    clean_images()
    logger.error('line 210 clean_images_route')
    return redirect(url_for('index'))


@app.route('/get_gallery')
def get_gallery():
    image_dir = '/mnt/HDD500/flask/FLASK/static/images/uploads'
    image_names = os.listdir(image_dir)
    return render_template('get_gallery.html', image_names=image_names)


@app.route('/uploads/&lt;filename&gt;')
def send_image(filename):
    return send_from_directory('static/images/uploads', filename)


@app.route('/uploads/thumbnails/&lt;filename&gt;')
def send_image_thumb(filename):
    return send_from_directory('static/images/uploads/thumbnails', filename)


@app.route('/flask_info')
def flask_info():
    return render_template('flask_info.html')


@app.route('/add_effects')
def add_effects():
    return '''
        &lt;form method="post" action="/video" enctype="multipart/form-data"&gt;
            &lt;label for="input_video"&gt;Select input video file:&lt;/label&gt;&lt;br&gt;
            &lt;input type="file" id="input_video" name="input_video"&gt;&lt;br&gt;&lt;br&gt;
            &lt;input type="submit" value="Submit"&gt;
        &lt;/form&gt;
    '''


@app.route('/video', methods=['GET', 'POST'])
def process_video():
    DIR = "static/"
    input_video = request.files['input_video']

    # Save the uploaded video to a file
    input_video.save(f"&#123;DIR}input_video.mp4")

    # Run FFmpeg commands
    command1 = f"ffmpeg -nostdin -i &#123;DIR}input_video.mp4 -filter:v \"minterpolate='mi_mode=mci:mc_mode=aobmc:vsbmc=1:fps=10'\" -c:v libx264 -r 20 -pix_fmt yuv420p -c:a copy -y &#123;DIR}output.mp4"

    subprocess.run(command1, shell=True, stderr=subprocess.PIPE,
                   universal_newlines=True)

    command2 = f"ffmpeg -nostdin -i &#123;DIR}output.mp4 -vf mpdecimate,setpts=N/FRAME_RATE/TB -c:v libx264 -r 30 -pix_fmt yuv420p -c:a copy -y &#123;DIR}mpdecimate.mp4"

    subprocess.run(command2, shell=True, stderr=subprocess.PIPE,
                   universal_newlines=True)

    # DIR = "/home/jack/Desktop/ffmpeg_flask/"
    command3 = f"ffmpeg -i static/mpdecimate.mp4 -filter_complex \"[0:v]trim=duration=14,loop=500:1:0[v];[1:a]afade=t=in:st=0:d=1,afade=t=out:st=0.9:d=2[a1];[v][0:a][a1]concat=n=1:v=1:a=1\" -c:v libx264 -r 30 -pix_fmt yuv420p -c:a aac -b:a 192k -shortest -y static/output.mp4"
    subprocess.run(command3, shell=True, stderr=subprocess.PIPE,
                   universal_newlines=True)

    now = datetime.datetime.now().strftime("&#37;Y-&#37;m-&#37;d_&#37;H-&#37;M-&#37;S")
    shutil.copy(f"&#123;DIR}output.mp4", f"&#123;DIR}&#123;now}_output.mp4")
    logger.info(f'my_video: f"&#123;DIR}mpdecimate.mp4"')
    video_file = "static/outputALL.mp4"
    command4 = f'ffmpeg -i "&#123;DIR}mpdecimate.mp4" -i "&#123;DIR}mpdecimate.mp4" -i "&#123;DIR}mpdecimate.mp4" -i "&#123;DIR}mpdecimate.mp4" -i "&#123;DIR}mpdecimate.mp4" -filter_complex "[0:v]trim=duration=15[v0];[1:v]trim=duration=15[v1];[2:v]trim=duration=15[v2];[3:v]trim=duration=15[v3];[4:v]trim=duration=15[v4];[v0][v1][v2][v3][v4]concat=n=5:v=1:a=0" -c:v libx264 -pix_fmt yuv420p -shortest -y &#123;video_file}'
    subprocess.run(command4, shell=True, stderr=subprocess.PIPE,
                   universal_newlines=True)
    now = datetime.datetime.now().strftime("&#37;Y-&#37;m-&#37;d_&#37;H-&#37;M-&#37;S")
    diR = f"&#123;DIR}/square_videos/"
    logger.info(f'diR: f"&#123;diR}mpdecimate.mp4"')
    shutil.copy(f"&#123;video_file}", f"&#123;diR}&#123;now}_outputALL.mp4")
    logger.info(f'diR: &#123;diR}mpdecimate.mp4')
    return render_template('final.html', video_file=video_file)


def get_all_mp4_videos():
    mp4_videos = []
    for root, dirs, files in os.walk('static'):
        for file in files:
            if file.endswith('.mp4'):
                mp4_videos.append(os.path.join(root, file))
    return mp4_videos


@app.route('/play/&lt;path:video_path&gt;')
def play(video_path):
    return send_file(video_path)


@app.route('/select_order', methods=['GET', 'POST'])
def select_order():
    # Set a default value for output_path
    output_path = 'static/videos/concatenated_video.mp4'
    if request.method == 'POST':
        # Get the order of the videos from the form data
        order = request.form.getlist('order')
        # Join the videos in the specified order
        join_videos(order, output_path)
        # Set the timestamped output path
        timestamp = datetime.datetime.now().strftime('&#37;Y&#37;m&#37;d_&#37;H&#37;M&#37;S')
        new_output_path = f'static/videos/concatenated_&#123;timestamp}XX.mp4'
        shutil.copy(output_path, new_output_path)
        # Redirect to the download page
        return redirect(url_for('download'))
    else:
        # Get the paths to the video files in the directory
        video_dir = 'static/videos'
        video_files = [os.path.join(video_dir, filename) for filename in os.listdir(
            video_dir) if filename.endswith('.mp4')]
        # Render the template with the list of video files and the output path
        return render_template('select_order.html', video_files=video_files, output_path=output_path)


def join_videos(video_paths, output_path):
    # Generate a list of input arguments for FFmpeg
    input_args = []
    for path in video_paths:
        input_args.extend(['-i', path])
    # Join the videos using FFmpeg
    subprocess.run(['ffmpeg', *input_args, '-filter_complex', 'concat=n=&#123;}:v=1:a=0'.format(
        len(video_paths)), '-c:v', 'libx264', '-crf', '23', '-preset', 'veryfast', '-y', output_path])
    # output_path = 'static/videos/concatenated_video.mp4'
    timestamp = datetime.datetime.now().strftime('&#37;Y&#37;m&#37;d_&#37;H&#37;M&#37;S')
    new_output_path = f'static/videos/concatenated_&#123;timestamp}XX.mp4'
    shutil.copy(output_path, new_output_path)


@app.route('/videos', methods=['POST'])
def process_videos():
    DIR = "static/"
    input_video = request.files['input_video']
    ""
    # Save the uploaded video to a file
    input_video.save(f"&#123;DIR}input_video2.mp4")

    command1 = f"ffmpeg -nostdin -i &#123;DIR}input_video2.mp4 -filter:v \"minterpolate='mi_mode=mci:mc_mode=aobmc:vsbmc=1:fps=10'\" -c:v libx264 -r 20 -pix_fmt yuv420p -c:a copy -y &#123;DIR}alice/output2.mp4"
    subprocess.run(command1, shell=True, stderr=subprocess.PIPE,
                   universal_newlines=True)

    command2 = f"ffmpeg -hide_banner -i &#123;DIR}alice/output2.mp4 -filter:v \"setpts=5*PTS,minterpolate='fps=25:scd=none:me_mode=bidir:vsbmc=1:search_param=200'\" -t 58 -y &#123;DIR}alice/final2.mp4"
    subprocess.run(command2, shell=True, stderr=subprocess.PIPE,
                   universal_newlines=True)

    command3 = f"ffmpeg -hide_banner -i &#123;DIR}alice/final2.mp4 -filter:v \"setpts=5*PTS,minterpolate='fps=25:scd=none:me_mode=bidir:vsbmc=1:search_param=200'\" -t 58 -y &#123;DIR}alice/final5.mp4"
    subprocess.run(command3, shell=True, stderr=subprocess.PIPE,
                   universal_newlines=True)

    # Add music to the video
    init = randint(10, 50)
    MUSIC = ["static/music/Born_a_Rockstar-Instrumental-NEFFEX.mp3", "static/music/Cattle-Telecasted.mp3", "static/music/Bite_Me-Clean-NEFFEX.mp3", "static/music/El_Secreto-Yung_Logos.mp3", "static/music/Blue_Mood-Robert_Munzinger.mp3", "static/music/Escapism-Yung_Logos.mp3", "static/music/Enough-NEFFEX.mp3", "static/music/As_You_Fade_Away-NEFFEX.mp3", "static/music/Culture-Anno_Domini_Beats.mp3", "static/music/Contrast-Anno_Domini_Beats.mp3", "static/music/Diving_in_Backwards-Nathan_Moore.mp3",
             "static/music/Aztec_Empire-Jimena_Contreras.mp3", "static/music/Devil_s_Organ-Jimena_Contreras.mp3", "static/music/Alpha_Mission-Jimena_Contreras.mp3", "static/music/Changing-NEFFEX.mp3", "static/music/Anxiety-NEFFEX.mp3", "static/music/6-Shots-NEFFEX.mp3", "static/music/DimishedReturns.mp3", "static/music/Drum_Meditation.mp3", "static/music/ChrisHaugen.mp3", "static/music/DoveLove-Moreira.mp3", "static/music/DesertPlanet.mp3", "static/music/David_Fesliyan.mp3"]

    music = random.choice(MUSIC)
    command3 = f"ffmpeg -i &#123;DIR}alice/final5.mp4 -ss &#123;init} -i &#123;music} -af 'afade=in:st=0:d=4,afade=out:st=55:d=3' -map 0:0 -map 1:0 -shortest -y &#123;DIR}alice/Final_End.mp4"
    subprocess.run(command3, shell=True)

    # Save the output video to a file
    now = datetime.datetime.now().strftime("&#37;Y-&#37;m-&#37;d_&#37;H-&#37;M-&#37;S")
    shutil.copy(f"&#123;DIR}alice/output2.mp4", f"&#123;DIR}alice/&#123;now}_output.mp4")
    shutil.copy(f"&#123;DIR}alice/Final_End.mp4", f"&#123;DIR}alice/&#123;now}_Final.mp4")
    shutil.copy(f"&#123;DIR}alice/Final_End.mp4", f"&#123;DIR}alice/Final_End_mix.mp4")
    return render_template('final.html', video_file="alice/Final_End.mp4")


@app.route('/large_video')
def large_video():
    return render_template('large_video.html')


@app.route('/add_border')
def add_border():
    images = [f for f in os.listdir(
        'static/images/uploads/') if os.path.isfile(os.path.join('static/images/uploads/', f))]
    thumbnails = []
    for image in images:
        with Image.open('static/images/uploads/' + image) as img:
            img.thumbnail((200, 200))
            thumbnail_name = 'thumbnail_' + image
            img.save('static/thumbnails/' + thumbnail_name)
            thumbnails.append(thumbnail_name)
    return render_template('add_border.html', images=images, thumbnails=thumbnails)


@app.route('/select_border')
def select_border():
    borders = os.listdir('static/transparent_borders/')
    return render_template('select_border.html', borders=borders)


@app.route('/apply_border', methods=['POST', 'GET'])
def apply_border():
    selected_image = request.form['image']
    selected_border = request.form['border']
    try:
        with Image.open('static/images/uploads/' + selected_image) as img:
            with Image.open('static/transparent_borders/' + selected_border) as border:
                img = img.resize(border.size)
                img.paste(border, (0, 0), border)
                final_image_name = 'final_' + selected_image
                img.save('static/final_images/' + final_image_name)
        return render_template('final_image.html', final_image=final_image_name, message='Border applied successfully.')
    except Exception as e:
        error_message = f'An error occurred: &#123;str(e)}. Please try again.'
        return render_template('apply_border.html', image=selected_image, border=selected_border, error_message=error_message)


@app.route('/select_border_image', methods=['GET'])
def select_border_image():
    try:
        image = request.args.get('image')
        if not image:
            raise ValueError('No image selected.')
        return render_template('select_border.html', image=image, borders=os.listdir('static/transparent_borders/'))
    except Exception as e:
        error_message = f'An error occurred: &#123;str(e)}. Please try again.'
        return render_template('add_border.html', error_message=error_message)


@app.route('/overlay_text', methods=['GET'])
def overlay_text():
    # Load the blank image
    blank_image_path = 'static/new_video/Border-plain.png'
    blank_image = Image.open(blank_image_path)

    # Load the text file and format its contents
    text_file_path = 'static/new_video/text_file.txt'
    with open(text_file_path, 'r') as file:
        text_contents = file.read()

    formatted_text = f"&#123;text_contents}"  # Format the contents as desired

    # Set the font properties
    font_size = 21
    font_color = (255, 255, 255)  # White color
    font_path = '/home/jack/fonts/source-sans-pro-semibold.ttf'

    font = ImageFont.truetype(font_path, font_size)

    # Create a new image with the same size as the blank image and transparent background
    text_overlay = Image.new('RGBA', blank_image.size, (0, 0, 0, 0))

    # Draw the formatted text onto the overlay image
    draw = ImageDraw.Draw(text_overlay)
    text_position = (50, 600)  # Adjust the position as needed
    draw.text(text_position, formatted_text, font=font, fill=font_color)

    # Merge the overlay image with the blank image
    final_image = Image.alpha_composite(
        blank_image.convert('RGBA'), text_overlay)

    # Save the final image
    output_image_path = 'static/new_video/output_image.png'
    final_image.save(output_image_path)

    return render_template('overlay_text.html', output_image_path=output_image_path)


@app.route('/create_text_file', methods=['GET', 'POST'])
def create_text_file():
    if request.method == 'POST':
        # Get the text content from the textarea
        text_content = request.form.get('textarea_content')

        # Create the file path
        text_file_path = os.path.join('static/new_video', 'text_file.txt')

        # Write the text content to the file
        with open(text_file_path, 'w') as file:
            file.write(text_content)

        return render_template('text_file_created.html', text_file_path=text_file_path)

    return render_template('create_text_file.html')


def allowed_file(filename):
    return '.' in filename and filename.rsplit('.', 1)[1].lower() == 'jpg'


@app.route('/generate_video3', methods=['GET', 'POST'])
def generate_video3():
    if request.method == 'POST':
        # Check if any files were uploaded
        if 'file' not in request.files:
            error_message = "No files uploaded."
            logger.error(error_message)
            return render_template('generate_video3.html', error_message=error_message)

        files = request.files.getlist('file')

        # Check if files were selected
        if len(files) == 0:
            error_message = "No files selected."
            logger.error(error_message)
            return render_template('generate_video3.html', error_message=error_message)

        # Check if the files have supported extensions
        for file in files:
            if not allowed_file(file.filename):
                error_message = f"Invalid file extension for &#123;file.filename}. Only JPG files are allowed."
                logger.error(error_message)
                return render_template('generate_video3.html', error_message=error_message)

        # Create a temporary directory to save the uploaded files
        temp_dir = os.path.join('static', 'temp')
        os.makedirs(temp_dir, exist_ok=True)

        # Save the uploaded files to the temporary directory
        saved_files = []
        for file in files:
            filename = secure_filename(file.filename)
            file_path = os.path.join(temp_dir, filename)
            file.save(file_path)
            saved_files.append(file_path)

        # Randomly select 30 image files
        selected_images = random.sample(saved_files, min(30, len(saved_files)))

        # Create a list of image clips from the selected images
        image_clips = []
        for image_file in selected_images:
            image_clip = mp.ImageClip(image_file, duration=1)
            image_clips.append(image_clip)

        # Concatenate the image clips into a video clip
        video_clip = mp.concatenate_videoclips(image_clips)

        # Set the output video path
        output_path = os.path.join('static', 'videos', 'generated_video.mp4')

        # Write the video clip to the output file
        video_clip.write_videofile(output_path, fps=24)

        # Delete the uploaded files after processing
        for file_path in saved_files:
            os.remove(file_path)

        # Return the generated video URL to the client
        video_url = url_for('static', filename='videos/generated_video.mp4')
        return render_template('generate_video3.html', video_url=video_url)

    # Render the initial form
    return render_template('generate_video3.html')


@app.route('/generate_video2')
def generate_video2():
    # Get the pythonlist of image files in the static/final_images/ directory
    # image_filenames = random.sample(glob.glob('static/final_images/*.jpg'),25)
    # image_filenames = random.sample(glob.glob('static/images/uploads/*.jpg'),30)
    # image_filenames = random.sample(glob.glob('static/alien_files/*.jpg'),30)
    image_filenames = random.sample(
        glob.glob('/mnt/HDD500/collections/absrtact/*.jpg'), 30)
    print(image_filenames, end="-")

    image_clips = []
    for filename in image_filenames:
        # Open the image file and resize it to 512x768
        image = Image.open(filename)
        image = image.resize((512, 768), Image.ANTIALIAS)
        print(image)
        # Convert the PIL Image object to a NumPy array
        image_array = np.array(image)
        # Create an ImageClip object from the resized image and set its duration to 1 second
        image_clip = ImageClip(image_array).set_duration(1)

        # Append the image clip to the list
        image_clips.append(image_clip)

    # Concatenate all the image clips into a single video clip
    video_clip = concatenate_videoclips(image_clips, method='compose')
    timestr = time.strftime("&#37;Y&#37;m&#37;d-&#37;H&#37;M&#37;S")
    # Set the fps value for the video clip
    video_clip.fps = 24
    # Write the video clip to a file
    video_path = 'static/videos/random_images' + timestr + 'video.mp4'
    video_clip.write_videofile(video_path, fps=24)
    video_clip.write_videofile('static/videos/TEMPvideo.mp4', fps=24)

    # Return a message to the client
    return render_template('generate_video2.html', video_url='static/videos/TEMPvideo.mp4')
    # return render_template('generate_video2.html' ,video_url='/static/videos/TEMPvideo.mp4', video_path=video_path)


@app.route('/ffmpeg_ctl', methods=['GET', 'POST'])
def ffmpeg_ctl():
    if request.method == 'POST':
        # Access the numeric input value from the form data
        number = request.form.get('number')
        # Process the value as needed
        # ...

    return render_template('ffmpeg_ctl.html')


@app.route('/mkmoz', methods=['GET', 'POST'])
def mkmoz():
    im = Image.new("RGB", (2048, 2048), (250, 250, 250))
    for i in range(0, 2500):
        if i &lt; 500:
            DIR = "/home/jack/.cache/thumbnails/large/*.png"
        if i &gt; 500:
            DIR = "/home/jack/.cache/thumbnails/normal/*.png"
        # if i&gt; 2495:DIR = "/home/jack/.cache/thumbnails/large/*.png"
        thumb = random.choice(glob.glob(DIR))
        print("THUMB:", thumb)
        Thum = Image.open(thumb)
        im.paste(Thum, ((randint(0, im.size[0])), randint(0, im.size[1]) - 50))
        filename = "static/images/ThumbNails.png"
        im.save(filename)
        Filename = "images/ThumbNails.png"
    return render_template("mkmoz.html", filename=Filename)


@app.route('/mk_background', methods=['GET', 'POST'])
def mk_background():
    im = Image.new("RGB", (8000, 512), (127, 255, 127))
    for i in range(0, 1000):
        if i &lt; 250:
            DIR = "/home/jack/.cache/thumbnails/large/*.png"
        else:
            DIR = "/home/jack/.cache/thumbnails/normal/*.png"
        thumb = random.choice(glob.glob(DIR))
        print("THUMB:", thumb)
        Thum = Image.open(thumb)
        im.paste(Thum, ((randint(0, im.size[0])), randint(0, im.size[1]) - 50))
        filename = "static/images/ThumbNails_Background.png"
        im.save(filename)
    return redirect('/mkvid')


@app.route('/mkvid')
def mkvid():
    Filename = "static/images/ThumbNails_Background.png"
    Video_file = "static/images/ThumbNails_Background_FFmpeg.mp4"
    command = [
        'FFmpeg', '-hide_banner',
        '-loop', '1', '-i', 'static/images/ThumbNails_Background.png',
        '-vf', 'scale=8000:512,scroll=horizontal=0.0001,crop=768:512:0:0,format=yuv420p',
        '-t', '240', '-y', 'static/images/ThumbNails_Background_FFmpeg.mp4'
    ]
    subprocess.run(command)
    return redirect('/mkvid2')


@app.route('/mkvid2')
def mkvid2():
    command2 = [
        'ffmpeg', '-hide_banner',
        '-i', 'static/images/ThumbNails_Background_FFmpeg.mp4',
        '-vf', 'scale=512:768,setsar=1/1',
        '-c:a', 'copy', '-y', 'static/images/long_512-768.mp4'
    ]
    subprocess.run(command2)
    Filenamez = "images/ThumbNails_Background.png"
    Video_filez = "images/long_512-768.mp4"
    return render_template("mkvid2.html", filename=Filenamez, video=Video_filez)


def get_db():
    db = getattr(g, '_database', None)
    if db is None:
        db = g._database = sqlite3.connect(app.config['DATABASE'])
    return db


@app.teardown_appcontext
def close_connection(exception):
    db = getattr(g, '_database', None)
    if db is not None:
        db.close()


@app.route('/view_thumbs')
def view_thumbs():
    # Define the directory where the images are located
    image_directory = 'static/images/uploads'
    # Get a list of all the image files in the directory
    image_files = [f for f in os.listdir(
        image_directory) if f.endswith('.jpg') or f.endswith('.png')]
    # Create a list of dictionaries containing the image file name and URL
    image_list = [&#123;'name': f, 'url': f'/images/uploads/&#123;f}'}
                  for f in image_files]
    # Render the template with the list of images
    return render_template('view_thumbs.html', image_list=image_list)


@app.route('/add_text', methods=['GET', 'POST'])
def add_text():
    if request.method == 'POST':
        text = request.form['text']
        now = datetime.datetime.now()
        timestamp = now.strftime("&#37;Y-&#37;m-&#37;d &#37;H:&#37;M:&#37;S")
        text = f'Text Entry: &#123;timestamp} &#123;text}'
        with open('chat.txt', 'a') as file:
            file.write(f'\n&#123;text}')
        return render_template('add_text.html', message='Text added successfully')
    else:
        return render_template('add_text.html')


@app.route('/search_txt', methods=['GET', 'POST'])
def search_txt():
    if request.method == 'POST' and 'phrase' in request.form:
        phrase = request.form['phrase']
        with open('chat.txt', 'r') as file:
            lines = file.readlines()
        results = []
        for i, line in enumerate(lines):
            if phrase in line:
                start = max(0, i - 5)
                end = min(len(lines), i + 6)
                context = lines[start:end]
                for j, context_line in enumerate(context):
                    if phrase in context_line:
                        results.append(f'Line &#123;start+j}: &#123;context_line}')
                    else:
                        results.append(f'Line &#123;start+j}: &#123;context_line}')
        return render_template('results.html', results=results)
    return render_template('search_txt.html')


@app.route('/blend_pil', methods=['POST', 'GET'])
def blend_pil():
    if request.method == 'POST':
        # Get the uploaded images
        img1 = request.files['img1']
        img2 = request.files['img2']
        img3 = request.files['img3']

        # Open the images using PIL
        img1_pil = Image.open(img1)
        img2_pil = Image.open(img2)
        img3_pil = Image.open(img3)

        # Blend the images
        blended_pil = Image.blend(img1_pil, img2_pil, 1 / 3)
        blended_pil = Image.blend(blended_pil, img3_pil, 1 / 3)

        # Return the blended image as a response
        # Since we are not saving it to the server, we can use a BytesIO object to avoid creating a temporary file
        img_io = BytesIO()
        blended_pil.save(img_io, 'JPEG', quality=70)
        current_datetime = datetime.now()
        str_current_datetime = str(current_datetime)
        file_name = "static/images/uploads/blended_pil" + \
            str_current_datetime + "XXXX.jpg"
        blended_pil.save(file_name, format='JPEG')
        img_io.seek(0)

        # Generate the HTML for displaying the blended image in the template
        blended_image_data = base64.b64encode(
            img_io.getvalue()).decode('utf-8')
        blended_image_url = f"data:image/jpeg;base64,&#123;blended_image_data}"
        # blended_image_url = blended_image_url.resize(( blended_image_url.size[0]//2, blended_image_url.size[1]//2), Image.ANTIALIAS)
        # Pass the URL of the blended image to the template
        return render_template('show_blend_pil.html', blended_image_url=blended_image_url)
    return render_template('blend_pil.html')


@app.route('/process_images', methods=['POST', 'GET'])
def process_images():
    if request.method == 'POST':
        # read the images from the request
        img1 = Image.open(request.files['image1'].stream).convert('RGB')
        img2 = Image.open(request.files['image2'].stream).convert('L')
        img3 = Image.open(request.files['image3'].stream).convert('RGB')

        # resize the images to have the same shape
        img1 = img1.resize((img2.width, img2.height))
        img3 = img3.resize((img2.width, img2.height))

        # convert the mask to binary
        threshold = 127
        mask = Image.eval(img2, lambda px: 255 if px &gt; threshold else 0)

        # apply the mask
        img = Image.composite(img1, img3, mask)

        # save the image to a file
        output = BytesIO()
        current_datetime = datetime.now()
        str_current_datetime = str(current_datetime)
        file_name = "static/images/" + str_current_datetime + "XXXX.jpg"
        img.save(file_name, format='JPEG')
        img.save(output, format='JPEG')
        output.seek(0)

        # encode the image to bytes
        img_bytes = output.getvalue()

        # return the image as a response
        return Response(img_bytes, mimetype='image/jpeg')
    return render_template('process_images.html')


@app.route('/image_directories', methods=['GET', 'POST'])
def image_directories():
    image_directories = ['static/Prodia_640x640', 'static/LineArt',
                         'static/Quantized', 'static/squares', 'static/BrightColors']
    if request.method == 'POST':
        # Rest of the code

        directory = request.form['directory']
        # Check that the directory parameter is not empty
        if directory:
            logger.info(
                'Redirecting endpoint with directory: &#37;s', directory)
            # Check that the directory is a valid directory path
            if os.path.isdir(directory):
                # Pass the directory value to the square_video endpoint
                logger.info(
                    'Redirecting to square_video endpoint with directory: &#37;s', directory)
                return redirect(url_for('square_video', directory=directory))
            else:
                # Render an error template if the directory parameter is not a valid directory path
                logger.error('Invalid directory parameter: &#37;s', directory)
                return render_template('error.html', message='Please enter a valid directory path.')
        else:
            # Render an error template if the directory parameter is empty
            logger.error('Directory parameter is empty')
            return render_template('error.html', message='Please enter a directory path.')
    else:
        # Pass the list of image directories to the template
        return render_template('image_directories.html', image_directories=image_directories)


#USE_AUDIO_MP3 = False  # Set this to True if you want to use 'static/audio_mp3/'
#MDIR = 'static/music/' if not USE_AUDIO_MP3 else 'static/audio_mp3/'

# ...
@app.route('/select_playmp3', methods=['GET', 'POST'])
def select_playmp3():
    selected_directory = request.args.get('selected_directory')  # Use args instead of form for GET method
    selected_mp3 = request.form.get('mp3_file')  # Check the name attribute of your form input
    
    print(f"Selected Directory: &#123;selected_directory}")
    print(f"Selected MP3: &#123;selected_mp3}")
    
    directories = ['static/audio_mp3/', 'static/music/']
    mp3_files = []

    if selected_directory:
        mp3_files = [f for f in os.listdir(selected_directory) if f.endswith('.mp3')]
    
    if request.method == 'POST' and selected_mp3 and selected_directory:
        mp3_path = os.path.join(selected_directory, selected_mp3)
        
        pygame.mixer.init()
        pygame.mixer.music.load(mp3_path)
        pygame.mixer.music.play()
        
        while pygame.mixer.music.get_busy():
            pygame.time.Clock().tick(10)
        
        pygame.mixer.quit()
        pygame.quit()
    
    fvideo = findvideos()
    return render_template('select_playmp3.html', directories=directories, selected_directory=selected_directory, mp3_files=mp3_files, video=fvideo)



@app.route("/make_animation")
def make_animation():
    # Get a list of all files in the final_images directory
    # image_files = os.listdir("static/final_images/")
    # DIR = "/home/jack/Desktop/HDD500/collections/gypsy_files/"
    # DIR = "/home/jack/Desktop/HDD500/collections/hippy_files/"
    #DIR = "/mnt/HDD500/collections/jungle/exotic_lithograph_prints-Playground_AI_files/512x768/"
    DIR = "static/images/clip_drop/"
    selected_files = random.sample(glob.glob(DIR + '*.jpg'), 30)
    print(selected_files)
    #image_files = os.listdir(DIR)
    # image_files = os.listdir("/mnt/HDD500/collections/640x640-alien/")
    # Select 20 random files from the list
    #selected_files = random.sample(image_files, 30)

    # Load each selected file, resize it to 400x600, and save it to a temporary directory
    resized_images = []
    for filename in selected_files:
        print(filename)
        with Image.open(filename) as img:

            img = img.resize((400, 600))
            temp_filename = "static/tmp/" + filename
            img.save(temp_filename)
            resized_images.append(temp_filename)

    # Create an animated GIF from the resized images

    gif_filename = "static/animated_gifs/animated.gif"
    with imageio.get_writer(gif_filename, mode='I', duration=1) as writer:
        for filename in resized_images:
            image = imageio.imread(filename)
            writer.append_data(image)
    import shutil

    timestr = time.strftime("&#37;Y&#37;m&#37;d-&#37;H&#37;M&#37;S")

    src = 'static/animated_gifs/animated.gif'
    dst = 'static/animated_gifs/animated' + timestr + '.gif'
    # 2nd option
    shutil.copy(src, dst)
    # Return a template that displays the GIF
    return render_template("make_animation.html", gif_filename=gif_filename)


@app.route('/title_page', methods=['GET', 'POST'])
def title_page():
    if request.method == 'POST':
        # Get the text input and image file from the form data
        text = request.form['text']
        image = request.files['image']

        # Save the image to a temporary location
        image_path = os.path.join(
            app.config['UPLOAD_FOLDER'], secure_filename(image.filename))
        image.save(image_path)

        # Open the image file
        image = Image.open(image_path)

        # Create a drawing context on the image
        draw = ImageDraw.Draw(image)

        # Define the font and font size for the text
        font = ImageFont.truetype('static/fonts/OpenSansBold.ttf', 50)
        # Split the text by newline characters
        lines = text.split("  ")

        # Calculate the size of each line and get the maximum width
        line_sizes = [draw.textsize(line, font) for line in lines]
        max_line_width = max([size[0] for size in line_sizes])

        # Calculate the total size of the text
        text_width = max_line_width
        text_height = sum([size[1] for size in line_sizes])

        # Calculate the position of the text in the center of the image
        x = (640 - text_width) / 2
        y = (640 - text_height) / 2

        # Calculate the size of the text
        text_width, text_height = draw.textsize(text, font)

        # Calculate the position of the text in the center of the image
        x = (640 - text_width) / 2
        y = (640 - text_height) / 2

        # Add the text to the image
        draw.text((x, y), text, font=font, fill=(0, 0, 0, 255))

        # Save the image to the static folder with a unique filename
        inc = text.replace(" ", "")
        filenamex = os.path.join(
            app.static_folder, 'title_pages', f'&#123;inc}_&#123;hash(text)}.png')
        image.save(filenamex)
        filename = 'static/title_pages/title_page.png'
        shutil.copy(filenamex, filename)
        logger.error('filename: &#37;s', filename)

        # print(inc[:5])
        # Remove the temporary image file
        # os.remove(image_path)
        filenamev = 'title_pages/title_page.png'
        # Return the rendered template with the image filename
        return render_template('title_page.html', filename=filenamev)
    filenamev = 'title_pages/title_page.png'
    return render_template('title_page.html', filename=filenamev)


@app.route('/add_title', methods=['GET', 'POST'])
def add_title():
    # Create the final_videos directory if it does not exist
    final_videos_dir = os.path.join(app.static_folder, 'final_videos')
    if not os.path.exists(final_videos_dir):
        os.makedirs(final_videos_dir)

    if request.method == 'POST':
        logger.debug('Entering POST request handler for /add_title')
        # Get the paths of the selected video and title page
        video_path = os.path.join(
            app.static_folder, 'videos', request.form['video'])
        title_page_path = os.path.join(
            app.static_folder, 'title_pages', request.form['title_page'])
        logger.debug(f'video_path: &#123;video_path}')
        logger.debug(f'title_page_path: &#123;title_page_path}')

        # Load the video and title page as clips
        video_clip = VideoFileClip(video_path)
        title_page_clip = ImageClip(title_page_path).set_duration(2)

        # Add the title page to the video for the first 2 seconds
        final_clip = concatenate_videoclips(
            [title_page_clip, video_clip.subclip(2)])

        # Save the final video to the final_videos directory
        final_filename = f"&#123;os.path.splitext(request.form['video'])[0]}_&#123;os.path.splitext(request.form['title_page'])[0]}.mp4"
        final_path = os.path.join(final_videos_dir, final_filename)
        logger.debug(f'final_path: &#123;final_path}')
        final_clip.write_videofile(final_path)

        # Return a response to the user indicating that the video with title page was created
        message = f"The video with title page was created and saved to &#123;final_path}"
        return render_template('add_title.html', message=message)

    # If the request method is GET, render the add_title.html template
    logger.debug('Entering GET request handler for /add_title')
    videos = os.listdir(os.path.join(app.static_folder, 'square_vids'))
    title_pages = os.listdir(os.path.join(app.static_folder, 'title_pages'))
    logger.debug(f'videos: &#123;videos}')
    logger.debug(f'title_pages: &#123;title_pages}')
    return render_template('add_title.html', videos=videos, title_pages=title_pages)


def get_rowid():
    # Connect to the database
    db = sqlite3.connect('code.db')
    cursor = db.cursor()
    row_id = request.form['row_id']
    # Execute a query to retrieve the rowid
    cursor.execute("SELECT rowid FROM snippets WHERE rowid = ?", (rowid,))

    # Fetch the result
    result = cursor.fetchone()

    # Close the database connection
    db.close()

    # Check if a rowid was found
    if result:
        rowid = result[0]
    else:
        # Handle the case when no rowid is found
        rowid = None

    return rowid


@app.route('/indexA')
def indexA():
    image_dir = 'static/images'
    image_files = [f for f in os.listdir(image_dir) if f.endswith('.jpg')]
    random_image_file = random.choice(image_files)
    logger.info(f"Random image file selected: &#123;random_image_file}")
    return render_template('indexA.html', random_image_file=random_image_file)


@app.route('/index_FLASK')
def index_FLASK():
    image_dir = 'static/images'
    image_files = [f for f in os.listdir(image_dir) if f.endswith('.jpg')]
    random_image_file = random.choice(image_files)
    logger.info(f"Random image file selected: &#123;random_image_file}")

    return render_template('index_FLASK.html')


# Configuration
app.config['DATABASE'] = 'code.db'


def get_db():
    db = getattr(g, '_database', None)
    if db is None:
        db = g._database = sqlite3.connect("code.db")
    return db


@app.teardown_appcontext
def close_connection(exception):
    db = getattr(g, '_database', None)
    if db is not None:
        db.close()


@app.before_first_request
def create_table():
    db = get_db()
    cursor = db.cursor()

    cursor.execute('''
        CREATE TABLE IF NOT EXISTS products (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            name TEXT NOT NULL,
            description TEXT,
            price REAL
        )
    ''')

    db.commit()


@app.teardown_appcontext
def close_connection(exception):
    db = getattr(app, '_database', None)
    if db is not None:
        db.close()


@app.route('/indexD')
def indexD():
    return redirect('/products')


@app.route('/products', methods=['GET', 'POST'])
def products():
    if request.method == 'POST':
        name = request.form['name']
        description = request.form['description']
        price = request.form['price']

        db = get_db()
        cursor = db.cursor()
        cursor.execute("INSERT INTO products (name, description, price) VALUES (?, ?, ?)",
                       (name, description, price))
        db.commit()

    db = get_db()
    cursor = db.cursor()
    cursor.execute("SELECT * FROM products")
    products = cursor.fetchall()

    return render_template('products.html', products=products)


@app.route('/edit/&lt;int:product_id&gt;', methods=['GET', 'POST'])
def edit_product(product_id):
    if request.method == 'POST':
        name = request.form['name']
        description = request.form['description']
        price = request.form['price']

        db = get_db()
        cursor = db.cursor()
        cursor.execute("UPDATE products SET name=?, description=?, price=? WHERE id=?",
                       (name, description, price, product_id))
        db.commit()

        return redirect('/products')

    db = get_db()
    cursor = db.cursor()
    cursor.execute("SELECT * FROM products WHERE id=?", (product_id,))
    product = cursor.fetchone()

    return render_template('edit_product.html', product=product)


@app.route('/delete/&lt;int:product_id&gt;', methods=['POST'])
def delete_product(product_id):
    db = get_db()
    cursor = db.cursor()
    cursor.execute("DELETE FROM products WHERE id=?", (product_id,))
    db.commit()

    return redirect('/products')
# Function to create the database and table
    
@app.route('/access_database')
def access_database():
    db_path = os.path.join(os.path.dirname(__file__), 'code.db')
    conn = sqlite3.connect(db_path)
    cursor = conn.cursor()
    cursor.execute('SELECT * FROM snippets')
    code = cursor.fetchall()
    conn.close()
    return render_template('database.html', code=code)
# Function to create the database and table


def create_databaseD():
    conn = sqlite3.connect('code.db')
    cursor = conn.cursor()
    # cursor.execute("CREATE TABLE snippets (description TEXT, code TEXT, keywords TEXT)")
    cursor.execute('''
        CREATE TABLE IF NOT EXISTS snippets (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            description TEXT NOT NULL,
            code TEXT,
            keywords TEXT
        )
    ''')
    conn.commit()
    conn.close()
# Route to display all code


@app.route('/code', methods=['GET'])
def display_code():
    conn = sqlite3.connect('code.db')
    cursor = conn.cursor()
    cursor.execute('SELECT * FROM snippets')
    code = cursor.fetchall()
    conn.close()

    # Define the HTML code for the form
    form_code = """
    &lt;h1&gt;Add New code&lt;/h1&gt;
    &lt;form action="/code" method="post"&gt;
        &lt;label for="description"&gt;Description:&lt;/label&gt;
        &lt;textarea type="description" name="description" rows="8" cols="90&#37;"&gt;&lt;/textarea&gt;&lt;br /&gt;
        &lt;label for="code"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Code:&lt;/label&gt;
        &lt;textarea type="text" name="code" rows="8" cols="90&#37;"&gt;&lt;/textarea&gt;&lt;br&gt;
        &lt;label for="keywords"&gt;Keywords:&lt;/label&gt;
        &lt;input style="width:53&#37;;height: 25px;" type="keywords" name="keywords"&gt;&lt;br&gt;
        &lt;input type="submit" value="Add code"&gt;
    &lt;/form&gt;
    """

    return render_template('code.html', code=code, form_code=form_code)
# Route to add a new code


@app.route('/code', methods=['POST'])
def add_code():
    description = request.form['description']
    code = request.form['code']
    keywords = request.form['keywords']

    conn = sqlite3.connect('code.db')
    cursor = conn.cursor()
    cursor.execute('INSERT INTO snippets (description, code, keywords) VALUES (?, ?, ?)',
                   (description, code, keywords))
    conn.commit()
    conn.close()
    return redirect(url_for('display_code'))
# Route to edit a code


@app.route('/edit_code/&lt;int:code_id&gt;', methods=['GET', 'POST'])
def edit_code(code_id):
    conn = sqlite3.connect('code.db')
    cursor = conn.cursor()

    if request.method == 'POST':
        description = request.form['description']
        code = request.form['code']
        keywords = request.form['keywords']

        cursor.execute('UPDATE snippets SET description=?, code=?, keywords=? WHERE id=?',
                       (description, code, keywords, code_id))
        conn.commit()
        conn.close()
        return redirect(url_for('display_code'))

    cursor.execute('SELECT * FROM snippets WHERE id = ?', (code_id,))
    code = cursor.fetchone()
    conn.close()
    return render_template('edit_code.html', code=code)
# Route to delete a code


@app.route('/delete_code/&lt;int:code_id&gt;', methods=['POST'])
def delete_code(code_id):
    conn = sqlite3.connect('code.db')
    cursor = conn.cursor()
    cursor.execute('DELETE FROM snippets WHERE id = ?', (code_id,))
    conn.commit()
    conn.close()
    return redirect(url_for('display_code'))


@app.route('/indexE')
def indexE():
    # Get a list of directories within static/images
    image_directories = os.listdir(os.path.join(app.static_folder, 'images'))

    # Create a dropdown menu with the list of directories
    dropdown_menu = ""
    for directory in image_directories:
        dropdown_menu += f'&lt;option value="&#123;directory}"&gt;&#123;directory}&lt;/option&gt;'

    return f"""
    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;body&gt;
        &lt;h2&gt;Upload a file&lt;/h2&gt;
        &lt;form action="/uploadN" method="post" enctype="multipart/form-data"&gt;
            &lt;select name="directory"&gt;
                &#123;dropdown_menu}
            &lt;/select&gt;
            &lt;input type="file" name="file"&gt;
            &lt;input type="submit" value="Upload"&gt;
        &lt;/form&gt;
    &lt;/body&gt;
    &lt;/html&gt;
    """


@app.route('/uploadN', methods=['POST'])
def upload_fileN():
    # Check if a file was submitted in the request
    if 'file' not in request.files:
        return redirect(url_for('indexD'))

    file = request.files['file']

    # Check if the file is not empty
    if file.filename == '':
        return redirect(url_for('indexE'))

    # Save the file to the desired directory
    save_path = os.path.join('static', 'temp_images', file.filename)
    file.save(save_path)

    return f'The file &#123;file.filename} has been uploaded successfully!'


def FilenameByTime(directory):
    timestr = time.strftime("&#37;Y&#37;m&#37;d-&#37;H&#37;M&#37;S")
    filename = directory + "/" + timestr + "_.png"
    return filename


def change_extension(orig_file, new_extension):
    p = change_ext(orig_file)
    new_name = p.rename(p.with_suffix(new_extension))
    return new_name


def auto_canny(image, sigma=0.33):
    # compute the median of the single channel pixel intensities
    v = np.median(image)
    # apply automatic Canny edge detection using the computed median
    lower = int(max(0, (1.0 - sigma) * v))
    upper = int(min(255, (1.0 + sigma) * v))
    edged = cv2.Canny(image, lower, upper)
    # return the edged image
    return edged
# image = cv2.imread('mahotastest/orig-color.png')


def change_extension(orig_file, new_extension):
    p = change_ext(orig_file)
    new_name = p.rename(p.with_suffix(new_extension))
    return new_name


def outlineJ(filename1, outfile_jpg, sigma=0.33):
    """
    USE:
    filename1 = '/home/jack/Desktop/Imagedata/0-original-images/07082orig.jpg' 
    outfile_jpg = '/home/jack/Desktop/dockercommands/images/useresult.png'
    outlineJ(filename1,outfile_jpg)
    """
    image = cv2.imread(filename1)
    edged = auto_canny(image, sigma=0.33)
    inverted = cv2.bitwise_not(edged)
    cv2.imwrite("static/outlines/temp2.png", inverted)
    cv2.imwrite(FilenameByTime("static/outlines/"), inverted)
    # Open Front Image
    # frontimage = Image.open('mahotastest/inverted-bitwise-note3_6.png').convert("1")
    frontimage = Image.open('static/outlines/temp2.png').convert("1")
    frontImage = frontimage.convert("RGBA")
    datas = frontImage.getdata()
    newData = []
    for item in datas:
        if item[0] == 255 and item[1] == 255 and item[2] == 255:
            newData.append((255, 255, 255, 0))
        else:
            newData.append(item)

    frontImage.putdata(newData)
    # Open Background Image
    background = Image.open(filename1)
    # Calculate width to be at the center
    width = (frontimage.width - frontimage.width) // 2
    # Calculate height to be at the center
    height = (frontimage.height - frontimage.height) // 2
    # Paste the frontImage at (width, height)
    background.paste(frontImage, (width, height), frontImage)
    # Save this image
    background.save(outfile_jpg)
    savefile = FilenameByTime("static/outlines/")
    background.save(savefile)
    # background = background.convert("RGB")
    return background


def outlineP(filename1, outfile_png):
    """
    USE:
    filename1 = '/home/jack/Desktop/Imagedata/0-original-images/07082orig.jpg'
    outfile_jpg = '/home/jack/Desktop/dockercommands/images/useresult.png'
    outlineP(filename1,outfile_png)
    """
    image = cv2.imread(filename1)
    edged = auto_canny(image, sigma=0.33)
    inverted = cv2.bitwise_not(edged)
    cv2.imwrite("static/outlines/temp2.png", inverted)
    cv2.imwrite(FilenameByTime("static/outlines/"), inverted)
    # Open Front Image
    # frontimage = Image.open('mahotastest/inverted-bitwise-note3_6.png').convert("1")
    frontimage = Image.open('static/outlines/temp2.png').convert("1")
    frontImage = frontimage.convert("RGBA")
    datas = frontImage.getdata()
    newData = []
    for item in datas:
        if item[0] == 255 and item[1] == 255 and item[2] == 255:
            newData.append((255, 255, 255, 0))
        else:
            newData.append(item)

    frontImage.putdata(newData)
    # Open Background Image
    background = Image.open(filename1)
    # Calculate width to be at the center
    width = (frontimage.width - frontimage.width) // 2
    # Calculate height to be at the center
    height = (frontimage.height - frontimage.height) // 2
    # Paste the frontImage at (width, height)
    background.paste(frontImage, (width, height), frontImage)
    # Save this image
    background.save(outfile_png, format="png")
    savefile = FilenameByTime("static/outlines/")
    background.save(savefile, format="png")
    # background = background.convert("RGB")
    return background


@app.route('/outline_j', methods=['POST'])
def outline_j():
    if request.method == 'POST':
        # Get the uploaded image file from the form data
        file = request.files['file']

        # Save the uploaded file to a temporary location

        temp_path = 'static/outlines/temp_image.jpg'
        file.save(temp_path)

        # Process the image using outlineJ function
        output_path = 'static/outlines/outlined_image_j.jpg'
        outlineJ(temp_path, output_path)
        output_path2 = "static/outlines/temp2.png"
        # Return the path to the processed image to display it on a page
        return render_template('outlined_image.html', image_orig=temp_path, image_path=output_path, image_path2=output_path2)


@app.route('/outline_p', methods=['POST'])
def outline_p():
    if request.method == 'POST':
        # Get the uploaded image file from the form data
        file = request.files['file']

        # Save the uploaded file to a temporary location
        temp_path = 'static/temp_image.jpg'
        image_orig = temp_path
        file.save(temp_path)

        # Process the image using outlineP function
        output_path = 'static/outlines/outlined_image_p.png'
        outlineP(temp_path, output_path)
        output_path2 = "static/outlines/temp2.png"
        # Return the path to the processed image to display it on a page
        return render_template('outlined_image.html', image_orig=temp_path, image_path=output_path, image_path2=output_path2)


def zoom_effect(bg_file, fg_file):
    bg = Image.open(bg_file).convert('RGBA')
    SIZE = bg.size
    bg = bg.resize((SIZE), Image.BICUBIC)
    fg = Image.open(fg_file).convert('RGBA')
    fg = fg.resize((SIZE), Image.BICUBIC)
    fg_copy = fg.copy()
    fg_copy = fg_copy.resize((int(fg_copy.width), int(fg_copy.height)))
    result_images = []
    for i in range(200):
        size = (int(fg_copy.width * (i + 1) / 200),
                int(fg_copy.height * (i + 1) / 200))
        fg_copy_resized = fg_copy.resize(size)
        fg_copy_resized.putalpha(int((i + 1) * 255 / 200))
        fg_copy_resized = fg_copy_resized.convert('RGBA')
        fg_copy_resized.putalpha(int((i + 1) * 255 / 200))
        result = bg.copy()
        x = int((bg.width - fg_copy_resized.width) / 2)
        y = int((bg.height - fg_copy_resized.height) / 2)
        result.alpha_composite(fg_copy_resized, (x, y))
        # result.save("gifs/_"+str(i)+".png")
        result_images.append(result)

    return result_images  # Move the return statement outside the for loop


def create_mp4_from_images(images_list, output_file, fps):
    # Convert PIL Image objects to NumPy arrays
    image_arrays = [np.array(image) for image in images_list]

    # Create the video clip from the NumPy arrays
    clip = ImageSequenceClip(image_arrays, fps=fps)

    # Write the video to the output file
    clip.write_videofile(output_file, codec="libx264", fps=fps)


@app.route('/upload_form')
def upload_form():
    return render_template('upload_form.html')


@app.route('/process_imagez', methods=['POST', 'GET'])
def process_imagez():
    if 'bg_image' not in request.files or 'fg_image' not in request.files:
        return redirect(url_for('upload_form'))

    bg_image = request.files['bg_image']
    fg_image = request.files['fg_image']

    if bg_image.filename == '' or fg_image.filename == '':
        return redirect(url_for('upload_form'))

    bg_filename = 'background.png'
    fg_filename = 'foreground.png'

    bg_image.save(bg_filename)
    fg_image.save(fg_filename)

    bg_file_path = os.path.abspath(bg_filename)
    fg_file_path = os.path.abspath(fg_filename)

    images_list = zoom_effect(bg_file_path, fg_file_path)

    output_mp4_file = 'static/overlay_zooms/imagez_video.mp4'
    frames_per_second = 30
    create_mp4_from_images(images_list, output_mp4_file, frames_per_second)

    # Clean up temporary files
    # os.remove(bg_filename)
    # os.remove(fg_filename)
    file_bytime = time.strftime("&#37;Y&#37;m&#37;d-&#37;H&#37;M&#37;S") + ".mp4"

    shutil.copy('static/overlay_zooms/imagez_video.mp4',
                'static/overlay_zooms/' + file_bytime)
    video_url = url_for('static', filename=output_mp4_file)
    return render_template('upload.html', video_url=video_url)


app.config['DATABASE'] = 'code.db'

# Set up logger
# logger.basicConfig(level=logger.DEBUG)
# logger = logger.getLogger(__name__)


def get_db():
    db = getattr(g, '_database', None)
    if db is None:
        db = g._database = sqlite3.connect(app.config['DATABASE'])
    return db


@app.route('/indexdb')
def indexdb():
    logger.debug("Accessing indexdb route")
    video = findvideos()
    return render_template('indexdb.html',video=video)


@app.route('/select_by_id_form', methods=['POST', 'GET'])
def select_by_id_form():
    logger.debug("Accessing select_by_id_form route")
    return render_template('select_by_id_form.html')


@app.route('/search_by_rowid', methods=['GET', 'POST'])
def search_by_rowid():
    logger.debug("Accessing search_by_rowid route")
    return render_template('search_by_rowid.html')

# ...
# ...
# ...
# Function to get a list of image files from the selected directory


def get_image_list(selected_directory):
    image_extensions = ['.jpg', '.jpeg', '.png', '.gif']
    image_list = [f for f in os.listdir(selected_directory) if os.path.isfile(
        os.path.join(selected_directory, f)) and f.lower().endswith(tuple(image_extensions))]
    print(image_list)
    return image_list


@app.route('/Index', methods=['GET', 'POST'])
def Index():
    if request.method == 'POST':
        selected_directory = request.form['selected_directory']
        image_list = get_image_list(selected_directory)
        images = [os.path.join(selected_directory, image)
                  for image in image_list]

        clips = [ImageClip(m).set_duration(0.5) for m in images]
        concat_clip = concatenate_videoclips(clips, method="compose")
        uid = str(uuid.uuid4())  # Generate a unique ID using uuid
        mp4_file = os.path.join("static", "videos", f"&#123;uid}.mp4")
        concat_clip.write_videofile(mp4_file, fps=24)
        return render_template('Index.html', video=mp4_file)
    else:
        directory_list = glob.glob("static/images/*/", recursive=True)
        return render_template('Index.html', directory_list=directory_list)
# ...
# ...

# ...


@app.route('/edit_data_page', methods=['GET', 'POST'])
@app.route('/edit_data_page/&lt;int:rowid&gt;', methods=['GET', 'POST'])
def edit_data_page(rowid=None):
    db = get_db()
    cursor = db.cursor()

    if request.method == 'POST':
        description = request.form['description']
        code = request.form['code']
        keywords = request.form['keywords']

        if rowid is not None:
            # Update the data in the database for the given rowid
            cursor.execute("UPDATE snippets SET description = ?, code = ?, keywords = ? WHERE rowid = ?",
                           (description, code, keywords, rowid))
        else:
            # Insert the data into the database as a new row
            cursor.execute("INSERT INTO snippets (description, code, keywords) VALUES (?, ?, ?)",
                           (description, code, keywords))

        db.commit()

        # Close the database connection
        cursor.close()
        db.close()

        return redirect(url_for('indexdb'))

    if rowid is not None:
        # If a rowid is provided, retrieve the data from the database
        # based on the provided rowid and render the edit_data.html template
        cursor.execute("SELECT * FROM snippets WHERE rowid = ?", (rowid,))
        data = cursor.fetchone()

        if data is None:
            # If no data is found for the given rowid, return an error message
            return "Error: Data not found for the provided Row ID."

        # Convert the fetched data to a dictionary for easier access in the template
        data = &#123;
            'rowid': data[0],
            'description': data[1],
            'code': data[2],
            'keywords': data[3]
        }

    else:
        # If no rowid is provided, create an empty data dictionary
        data = &#123;}

    # Close the database connection
    cursor.close()
    db.close()

    return render_template('edit_data.html', data=data)
# ...


@app.route('/get_rowid_form', methods=['GET', 'POST'])
def get_rowid_form():
    if request.method == 'POST':
        rowid = request.form['rowid']
        return redirect(url_for('edit_data_page', rowid=rowid))
    return render_template('get_rowid_form.html')

# ...


@app.route('/search_database', methods=['POST', 'GET'])
def search_database():
    logger.debug("Accessing search_database route")
    if request.method == 'POST':
        search_term = request.form['search_term']
        search_area = request.form['search_area']
    else:
        # For GET requests, get the search_term and search_area from the query string
        search_term = request.args.get('search_term')
        search_area = request.args.get('search_area')

    if not search_term or not search_area:
        logger.debug(
            "Redirecting to indexdb due to missing search_term or search_area")
        # Redirect to the main index page if search_term or search_area is missing
        return redirect('/indexdb')

    db = get_db()
    cursor = db.cursor()

    if search_area == 'rowid':
        cursor.execute(
            "SELECT rowid, * FROM snippets WHERE rowid = ?", (search_term,))
    elif search_area == 'description':
        cursor.execute(
            "SELECT rowid, * FROM snippets WHERE description LIKE ?", ('&#37;' + search_term + '&#37;',))
    elif search_area == 'code':
        cursor.execute(
            "SELECT rowid, * FROM snippets WHERE code LIKE ?", ('&#37;' + search_term + '&#37;',))
    elif search_area == 'keywords':
        cursor.execute(
            "SELECT rowid, * FROM snippets WHERE keywords LIKE ?", ('&#37;' + search_term + '&#37;',))
    else:
        logger.debug("Redirecting to indexdb due to invalid search area")
        # Redirect to the main index page if an invalid search area is provided
        return redirect('/indexdb')

    results = cursor.fetchall()
    logger.debug("Rendering db_results.html template with search results")
    return render_template('db_results.html', results=results)


@app.route('/insert_data', methods=['POST', 'GET'])
def insert_data():
    logger.debug("Accessing insert_data route")
    if request.method == 'POST':
        description = request.form['description']
        code = request.form['code']
        keywords = request.form['keywords']

        # Assuming you have the database connection and cursor defined
        db = get_db()
        cursor = db.cursor()

        cursor.execute("INSERT INTO snippets (description, code, keywords) VALUES (?, ?, ?)",
                       (description, code, keywords))
        db.commit()

        # Close the database connection
        cursor.close()
        db.close()

        logger.debug("Redirecting to indexdb after inserting data")
        return redirect(url_for('indexdb'))

    # If the request method is not POST (e.g., GET), render the insert_data.html template
    logger.debug("Rendering insert_data.html template")
    return render_template('insert_data.html')


@app.route('/select_by_id', methods=['POST', 'GET'])
def handle_select_by_id():
    logger.debug("Accessing select_by_id route")
    if request.method == 'POST':
        row_id = request.form['search_term']
    else:
        row_id = request.args.get('search_term')

    db = get_db()
    cursor = db.cursor()

    cursor.execute("SELECT * FROM snippets WHERE rowid = ?", (row_id,))
    data = cursor.fetchone()

    cursor.close()
    db.close()

    if data is not None:
        id_value = data[0]
        description = data[1]
        code = data[2]
        keywords = data[3]

        logger.debug("Rendering display_data.html template with selected data")
        return render_template('display_data.html', id_value=id_value, description=description, code=code, keywords=keywords)
    else:
        logger.debug("Rendering display_data.html template with no data found")
        return render_template('display_data.html', id_value=row_id, description="", code="", keywords="")
def extract_code_blocks(file_path):
    with open(file_path) as file:
        content = file.read()
    return content.split("--Code Start:")[1:]

def format_datetime(datetime_str):
    return datetime_str.replace("_", " ")

@app.route('/enter_code', methods=['GET', 'POST'])
def enter_code():
    formatted_datetime = ""  # Initialize the variable
    if request.method == 'POST':
        code_block = request.form['code_block']
        formatted_datetime = datetime.datetime.now().strftime("&#37;a_&#37;d_&#37;b_&#37;Y &#37;H:&#37;M:&#37;S")
        with open('codeshints.txt', 'a') as file:
            file.write(f"--Code Start:\n&#123;formatted_datetime}\n&#123;code_block}\n--Code End:\n\n")
        # Log code entry
        logger.debug('New code entered: &#37;s', code_block)
    return render_template('enter_data.html', formatted_datetime=formatted_datetime)

@app.route('/search_code', methods=['GET', 'POST'])
def search_code():
    if request.method == 'POST':
        keyword = request.form['keyword']
        code_blocks = extract_code_blocks('codeshints.txt')
        filtered_blocks = [block for block in code_blocks if keyword in block]
        formatted_datetime_blocks = []
        
        for block in filtered_blocks:
            match = re.search(r"\w+_\d+_\w+_\d+_\d+:\d+:\d+", block)
            if match:
                formatted_datetime = format_datetime(match.group(0))
            else:
                formatted_datetime = "Unknown datetime format"
            
            formatted_datetime_blocks.append(
                &#123;"datetime": formatted_datetime, "code_block": block}
            )
            
        # Log search activity
        logger.debug('Keyword searched: &#37;s', keyword)
        return render_template('search_results.html', keyword=keyword, code_blocks=formatted_datetime_blocks)
    
    return render_template('search_data.html')



@app.route('/tube_index')
def tube_index():
    return render_template('tube_index.html')

@app.route('/data_page')
def data_page():
    return render_template('data_page.html')    


@app.route('/capture_overlay_verify')
def capture_overlay_verify():
    logger.info('Capture process started')
    logger.info('POST request received')

    datename = subprocess.run(
        ["date", "+&#37;Y-&#37;m-&#37;d_&#37;H-&#37;M-&#37;S"], capture_output=True, text=True).stdout.strip()
    capture_filename = f"&#123;datename}.mp4"
    # Create the file path using os.path.join()
    base_folder = "static"
    subfolder = "assets"
    original_filename = os.path.join(
        app.root_path, base_folder, subfolder, f"overlaid_&#123;capture_filename}")
    overlayed_filename = os.path.join(
        app.root_path, base_folder, subfolder, f"overlaid_&#123;capture_filename}")
    verification_filename = os.path.join(
        app.root_path, base_folder, subfolder, f"verification_&#123;capture_filename}")
    logger.info(f'File path original_filename created: &#123;original_filename}')
    logger.info(f'File path overlayed_filename created: &#123;overlayed_filename}')
    logger.info(f' verification_filename created: &#123;verification_filename}')
    sleep(5)
    # Capture screen
    capture_command = [
        "ffmpeg", "-ss", "2", "-f", "x11grab", "-framerate", "24",
        "-video_size", "690x445", "-i", ":0.0+130,250", "-f", "alsa",
        "-i", "plughw:0,0", "-f", "pulse", "-i", "default",
        "-filter_complex", "[1:a]volume=0.1,apad[headset_audio];[2:a]volume=2.0,apad[system_audio];[headset_audio][system_audio]amix=inputs=2[a]",
        "-map", "0:v", "-map", "[a]", "-c:v", "libx264", "-r", "24",
                "-g", "48", "-c:a", "aac", "-b:a", "128k", "-t", "58", "-y", original_filename
    ]
    subprocess.run(capture_command)
    logger.info('Screen captured', capture_command)
    # Overlay videos
    overlay_command = [
        "ffmpeg", "-i", "background.mp4", "-i", original_filename, "-filter_complex",
        f"[1:v]scale=460:300[ovrl];[0:v][ovrl]overlay=W-w-25:H-h-400[out]",
        "-map", "[out]", "-map", "1:a", "-c:v", "libx264", "-crf", "18", "-c:a", "aac",
                "-strict", "-2", "-y", "-t", "58", overlayed_filename
    ]
    subprocess.run(overlay_command)
    logger.info('Videos overlaid', overlay_command)

    # Verify sound
    verification_command = [
        "ffmpeg", "-i", "background.mp4", "-i", overlayed_filename, "-filter_complex",
        f"[1:v]scale=460:300[ovrl];[0:v][ovrl]overlay=W-w-25:H-h-400[out]",
        "-map", "[out]", "-map", "1:a", "-c:v", "libx264", "-crf", "18", "-c:a", "aac",
                "-strict", "-2", "-y", "-t", "58", verification_filename
    ]
    subprocess.run(verification_command)
    logger.info('Sound verified', verification_command)

    logger.info('Capture process completed', verification_filename)
    return render_template('view_capture.html', video_filename=verification_filename)

# ...


@app.route('/create_text', methods=['GET', 'POST'])
def create_text():
    if request.method == 'POST':
        text = request.form['text']
        image = Image.new('RGB', (512, 512), color='beige')
        draw = ImageDraw.Draw(image)

        # Load the custom font and set the size
        font_path = '/home/jack/fonts/OpenSans-Bold.ttf'
        font_size = 50
        font = ImageFont.truetype(font_path, font_size)

        lines = text.split('\n')[:5]

        y = 10
        for line in lines:
            line = line.rstrip()  # Strip the newline character
            # Calculate the width and height of the text
            text_width, text_height = draw.textsize(line, font=font)

            # Draw the text
            draw.text(((512 - text_width) // 2, y),
                      line, fill='black', font=font)
            y += text_height + 5  # Move down for the next line

        output_path = os.path.join(
            app.root_path, 'static', 'assets', '512x512_text.jpg')
        image.save(output_path)
        # return send_from_directory('static/assets', '512x512_text.jpg', as_attachment=True)
        return render_template('view_textimage.html', image_filename='assets/512x512_text.jpg')
    return render_template('create_text.html')


@app.route('/view_log')
def view_log():
    with open('Logs/app.log', 'r') as log_file:
        log_content = log_file.read()
    return render_template('log_viewer.html', log_content=log_content)


@app.route('/self_check')
def self_check():
    try:
        if os.path.exists('Logs'):
            timestamp = datetime.datetime.now().strftime("&#37;Y&#37;m&#37;d&#37;H&#37;M&#37;S")
            new_filename = f'Logs/&#123;timestamp}.info'
            shutil.copy('Logs/flake8.info', new_filename)
            
        result = subprocess.run(['flake8', '-v', 'MemMakerWdb'],
                                stdout=subprocess.PIPE, stderr=subprocess.PIPE, text=True)
        
        with open('Logs/flake8.info', 'w') as flake_file:
            flake_file.write(result.stdout)
        
        return redirect(url_for('view_flake8'))
    except Exception as e:
        return f"Self-check failed. Error: &#123;e}"

@app.route('/view_flake8')
def view_flake8():
    with open('Logs/flake8.info', 'r') as flake_file:
        flake_content = flake_file.read()
    return render_template('flake8_viewer.html', flake_content=flake_content)
def get_image_directories():
    dirs = os.listdir(os.path.join('static', 'images'))
    DIR = sorted(dirs)
    return DIR

def feather_image(input_path):
    try:
        logger.info("Feathering image: &#37;s", input_path)
        
        # Load the image
        giger = cv2.imread(input_path)
        l_row, l_col, nb_channel = giger.shape
        rows, cols = np.mgrid[:l_row, :l_col]
        radius = np.sqrt((rows - l_row/2)**2 + (cols - l_col/2)**2)
        alpha_channel = np.zeros((l_row, l_col))
        
        # Calculate alpha channel values
        r_min, r_max = 1./3 * radius.max(), 0.6 * radius.max()
        alpha_channel[radius &lt; r_min] = 1
        alpha_channel[radius &gt; r_max] = 0
        gradient_zone = np.logical_and(radius &gt;= r_min, radius &lt;= r_max)
        alpha_channel[gradient_zone] = (r_max - radius[gradient_zone]) / (r_max - r_min)
        alpha_channel *= 255
        
        # Create feathered image
        feathered = np.empty((l_row, l_col, nb_channel + 1), dtype=np.uint8)
        feathered[..., :3] = giger[:]
        feathered[..., -1] = alpha_channel[:]
        
        # Save the feathered image
        timestamp = datetime.datetime.now().strftime('&#37;Y&#37;m&#37;d&#37;H&#37;M&#37;S')
        output_path = os.path.join('static', 'images', 'feathers', f'&#123;timestamp}.png')
        plt.imsave(output_path, feathered, format="png")
        logger.info("Feathered image saved at: &#37;s", output_path)

        return output_path
    except Exception as e:
        logger.error("An error occurred during feathering: &#37;s", str(e))
        return None
@app.route('/feather_files', methods=['GET', 'POST'])
def feather_files():
    if request.method == 'POST':
        selected_directories = request.form.getlist('directories')  # Use 'directories' instead of 'directory'
        selected_directories = sorted(selected_directories)
        if selected_directories:
            images = os.listdir(os.path.join('static', 'images', selected_directories[0]))
            return render_template('feather_files.html', directories=get_image_directories(), selected_directory=selected_directories[0], images=images)
        
        selected_image = request.form.get('image')
        if selected_image:
            selected_directory = request.form.get('selected_directory')  # Add this line to retrieve selected_directory
            image_path = os.path.join('static', 'images', selected_directory, selected_image)
            feathered_image_path = feather_image(image_path)
            return render_template('feather_files.html', directories=get_image_directories(), selected_directory=selected_directory, images=os.listdir(os.path.join('static', 'images', selected_directory)), feathered_image_path=feathered_image_path)
    
    return render_template('feather_files.html', directories=get_image_directories())
@app.route('/word_cloud')
def word_cloud():
    code_blocks = extract_code_blocks('codeshints.txt')
    extracted_lines = []

    for block in code_blocks:
        lines = block.split("\n")[:3]  # Extract the first three lines
        extracted_lines.append("\n".join(lines))

    return render_template('word_cloud.html', extracted_lines=extracted_lines)
# ------------
static_dir = 'static'
text_dir = os.path.join(static_dir, 'text')
original_text_dir = os.path.join(text_dir, 'original')
os.makedirs(original_text_dir, exist_ok=True)

def load_original_text_file(filename):
    original_file_path = os.path.join(text_dir, filename)
    with open(original_file_path, 'r') as file:
        return file.read()

def save_original_text_file(filename, content):
    now = datetime.datetime.now().strftime("&#37;Y&#37;m&#37;d_&#37;H&#37;M&#37;S")
    new_filename = f"&#123;filename}_&#123;now}.txt"
    new_file_path = os.path.join(original_text_dir, new_filename)
    with open(new_file_path, 'w') as file:
        file.write(content)

def edit_and_save_text_file(filename, content):
    save_original_text_file(filename, content)
    edited_file_path = os.path.join(text_dir, filename)
    with open(edited_file_path, 'w') as file:
        file.write(content)

@app.route('/edit_text')
def edit_text():
    filenames = [f for f in os.listdir(text_dir) if f.endswith('.txt')]
    return render_template('edit_text.html', filenames=filenames)

@app.route('/edit_text_page')
def edit_text_page():
    selected_filename = request.args.get('filename')
    original_content = load_original_text_file(selected_filename)
    return render_template('edit_text_page.html', selected_filename=selected_filename, original_content=original_content)

@app.route('/edit_text_save', methods=['POST'])
def edit_text_save():
    edited_content = request.form['edited_content']
    selected_filename = request.form['filename']
    edit_and_save_text_file(selected_filename, edited_content)
    return redirect(url_for('edit_text'))

@app.route('/the_description')
def the_description():
    return render_template('the_description.html')

@app.route('/run')
def run():
    return render_template('execute.html')
def save_script_to_file(script):
    # Retrieve textarea content
    script_content = script.strip('\r')
    for line in script_content.splitlines():
        if line.startswith('#'):
            script_head = script_content.replace(line, f"echo &#123;line}")
            print("SCRIPT HEAD: ",script_head)

    # Generate unique filename
    current_datetime = datetime.datetime.now().strftime("&#37;Y&#37;m&#37;d&#37;H&#37;M&#37;S")
    filename = "static/scripts/"+current_datetime + "_script.sh"

    # Save content to file
    with open(filename, "w") as file:
        file.write(script_content)

    return filename
def list_functions():
    # Retrieve all function names from the script
    script_filenames = glob.glob("static/scripts/*.sh")
    
    for script_filename in script_filenames:
        with open(script_filename, "r") as file:
            script_content = file.read()
            print(script_content)

    # Find all function names
    function_names = re.findall(r"function\s+(\w+)\s*\(\)", script_content)
    return function_names
@app.route('/execute', methods=['POST', 'GET'])
def execute():
    # Extract the bash script from the textarea
    script = request.form['script']
    save_script_to_file(script)
    # Execute the bash script using subprocess
    result = subprocess.run(script, shell=True, capture_output=True, text=True)

    # Return the result to the client
    list_functions()

    # Return the result to the client
    list_functions()

    # Retrieve all function names from the script
    script_filenames = glob.glob("static/scripts/*.sh")
    CONTENT = []
    filename = []
    for script_filename in script_filenames:
        filename.append(script_filename)
        with open(script_filename, "r") as file:
            script_content = file.read()
            CONTENT.append(script_content)

    return render_template("view_execute.html", content=CONTENT, result=filename)

@app.route('/list_functions')
def list_functions():
    route_lines = get_route_lines()
    return render_template('list_functions.html', functions=route_lines)

def get_route_lines():
    with open('MemMakerWdb', 'r') as file:
        route_lines = [
            re.split(r'[,/]', line.strip())[1].replace("'", "").replace(")", "").replace('"', '').replace(" ", "")
            for line in file
            if line.strip() != '' and line.strip() != '@app.route("/")' and line.startswith('@app.route')
        ]
    return route_lines

# Call the function to get the route lines
route_lines = get_route_lines()
# Print the result
for line in route_lines:
    print(line)
    
    
@app.route('/all_routes')
def all_routes(): 
        return render_template('all_routes.html')
 
@app.route('/edit_description', methods=['GET', 'POST'])
def edit_description():
    # Open the 'the_description.html' file and read its contents
    with open('templates/the_description.html', 'r') as file:
        description = file.read()

    return render_template('edit_the_description.html', description=description)
    
@app.route('/save_description', methods=['POST'])
def save_description():
    # Retrieve the updated description from the form submission
    updated_description = request.form['description']

    # Open the 'the_description.html' file in write mode and save the updated description
    with open('templates/the_description.html', 'w') as file:
        file.write(updated_description)

    return redirect('/edit_description')

@app.route('/app_utilities')
def app_utilities():
    video = findvideos()
    return render_template('app_utilities.html', video=video)
@app.route("/image_processing")
def image_processing():
    video = findvideos()
    return render_template('image_processing.html', video=video)

template_dir = 'templates'
original_template_dir = os.path.join(template_dir, 'original')
os.makedirs(original_template_dir, exist_ok=True)

def load_original_template_file(filename):
    original_file_path = os.path.join(template_dir, filename)
    with open(original_file_path, 'r') as file:
        return file.read()

def save_original_template_file(filename, content):
    now = datetime.datetime.now().strftime("&#37;Y&#37;m&#37;d_&#37;H&#37;M&#37;S")
    new_filename = f"&#123;filename}_&#123;now}.txt"
    new_file_path = os.path.join(original_template_dir, new_filename)
    with open(new_file_path, 'w') as file:
        file.write(content)

def edit_and_save_template_file(filename, content):
    save_original_template_file(filename, content)
    edited_file_path = os.path.join(template_dir, filename)
    with open(edited_file_path, 'w') as file:
        file.write(content)

@app.route('/edit_template')
def edit_template():
    filenames = [f for f in os.listdir(template_dir) if f.endswith('.html')]
    filenames = sorted(filenames)
    fvideo = findvideos()
    return render_template('edit_template.html', filenames=filenames, video=fvideo)

@app.route('/edit_template_page')
def edit_template_page():
    selected_filename = request.args.get('filename')
    original_content = load_original_template_file(selected_filename)
    return render_template('edit_template_page.html', selected_filename=selected_filename, original_content=original_content)

@app.route('/edit_template_save', methods=['POST'])
def edit_template_save():
    edited_content = request.form['edited_content']
    selected_filename = request.form['filename']
    edit_and_save_template_file(selected_filename, edited_content)
    return redirect(url_for('edit_template'))
@app.route('/images/&lt;path&gt;')
def show_images(path):
    # get the full path of the directory
    basepath = os.path.join('static', 'images', path)
    # get the file names in the directory
    file_list = os.listdir(basepath)
    # filter out non-image files
    image_list = [f for f in file_list if f.endswith('.jpg') or f.endswith('.png')]
    # pass the image names to the template
    return render_template('thumbnailz.html', images=image_list, path=path)

@app.route('/code_editor')
def code_editor():
    
    return render_template('code_editor.html')

@app.route('/save', methods=['POST'])
def save():
    content = request.form.get('content')  # Get the content from the AJAX request
    file_path = 'static/text/Experimental.txt'  # Specify the file path where you want to save

    # Write the content to the file
    with open(file_path, 'w') as file:
        file.write(content)

    return jsonify(&#123;'message': 'File saved successfully'})

video_process = None

@app.route('/run_capture', methods=['POST'])
def run_capture():
    global video_process
    
    # Specify the path to your Bash script
    bash_script_path = 'STREAM-save-local'
    
    # Execute the Bash script and save the process ID
    video_process = subprocess.Popen(['bash', bash_script_path])
    
    return jsonify(&#123;'message': 'Video capture started'})

@app.route('/stop_capture', methods=['POST'])
def stop_capture():
    global video_process
    
    if video_process:
        # Send a termination signal to stop the process gracefully
        os.killpg(os.getpgid(video_process.pid), signal.SIGTERM)
        video_process = None
        return jsonify(&#123;'message': 'Video capture stopped'})
    else:
        return jsonify(&#123;'message': 'Video capture process not found'})

@app.route('/capture_html')
def capture_html():
    return render_template('capture.html')

@app.route('/youtube_videos')
def youtube_videos():
    return render_template('youtube_videos.html')


@app.route('/aigeneration_links')
def aigeneration_links():
    return render_template('aigeneration_links.html')


@app.route('/index_bash')
def index_bash():
    return render_template('run_bash.html')

@app.route('/run_bash', methods=['POST'])
def run_bash():
    bash_command = request.form.get('bash_command')
    
    try:
        result = subprocess.check_output(bash_command, shell=True, text=True, stderr=subprocess.STDOUT)
    except subprocess.CalledProcessError as e:
        result = e.output
    video = findvideos()
    return render_template('run_bash.html', result=result, video=video)
css_dir = 'static/css'
original_css_dir = os.path.join(css_dir, 'original')
os.makedirs(original_css_dir, exist_ok=True)

def load_original_css_file(filename):
    original_file_path = os.path.join(css_dir, filename)
    with open(original_file_path, 'r') as file:
        return file.read()

def save_original_css_file(filename, content):
    now = datetime.datetime.now().strftime("&#37;Y&#37;m&#37;d_&#37;H&#37;M&#37;S")
    new_filename = f"&#123;filename}_&#123;now}.css"
    new_file_path = os.path.join(original_css_dir, new_filename)
    with open(new_file_path, 'w') as file:
        file.write(content)

def edit_and_save_css_file(filename, content):
    save_original_css_file(filename, content)
    edited_file_path = os.path.join(css_dir, filename)
    with open(edited_file_path, 'w') as file:
        file.write(content)

@app.route('/edit_css')
def edit_css():
    filenames = [f for f in os.listdir(css_dir) if f.endswith('.css')]
    filenames = sorted(filenames)
    #render template
    return render_template ('edit_css.html', filenames=filenames)

@app.route('/edit_css_page')
def edit_css_page():
    selected_filename = request.args.get('filename')
    original_content = load_original_css_file(selected_filename)
    return render_template('edit_css_page.html', selected_filename=selected_filename, original_content=original_content)

@app.route('/edit_css_save', methods=['POST'])
def edit_css_save():
    edited_content = request.form['edited_content']
    selected_filename = request.form['filename']
    edit_and_save_css_file(selected_filename, edited_content)
    return redirect(url_for('edit_css'))
@app.route('/terminal_index')
def terminal_index():
    return render_template('terminal_index.html')

@app.route('/execute_command', methods=['POST'])
def execute_command():
    command = request.form.get('command')
    try:
        output = subprocess.check_output(command, shell=True, text=True, stderr=subprocess.STDOUT)
    except subprocess.CalledProcessError as e:
        output = e.output
    return jsonify(&#123;'output': output})

@app.route('/comic_book')
def comic_book():
    return render_template('comic_book.html')

@app.route('/image_stuff')
def image_stuff():
    return render_template('image_stuff.html')

UPLOAD_FOLDER = 'static/uploads'
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER

@app.route('/crop', methods=['GET', 'POST'])
def crop():
    image_path = None
    if request.method == 'POST' and 'image' in request.files:
        image = request.files['image']
        if image.filename != '':
            filename = secure_filename(image.filename)
            image_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
            image.save(image_path)
    fvideo = findvideos()        
    return render_template('crop.html', image_path=image_path, video=fvideo)

@app.route('/crop_and_save', methods=['POST'])
def crop_and_save():
    image_path = request.form.get('image_path')
    x = int(request.form.get('x'))
    y = int(request.form.get('y'))
    width = int(request.form.get('width'))
    height = int(request.form.get('height'))

    try:
        image = Image.open(image_path)
        cropped_image = image.crop((x, y, x + width, y + height))
        cropped_image.save('static/cropped_image.jpg')
        return render_template('crop.html', image_path='static/cropped_image.jpg')
    except Exception as e:
        return f"Error: &#123;str(e)}"
def move_cropped_image():
    source_path = 'static/cropped_image.jpg'

    if not os.path.exists(source_path):
        return "Source file does not exist", 404

    destination_folder = 'static/images/Leonardo'
    image_ = f'cropped_&#123;str(uuid.uuid4())}.jpg'

    try:
        os.makedirs(destination_folder, exist_ok=True)
    except OSError as e:
        return f"Failed to create destination folder: &#123;e}", 500

    destination_path = os.path.join(destination_folder, image_)

    try:
        shutil.move(source_path, destination_path)
    except FileNotFoundError:
        return "Source file does not exist", 404
    except shutil.Error as e:
        return f"Error occurred while moving the file: &#123;e}", 500
    return destination_path
@app.route('/move_cropped', methods=['GET', 'POST'])
def move_cropped():
    if request.method == 'POST':
        destination_path = move_cropped_image()
        source_path = 'static/cropped_image.jpg'
        fvideo =findvideos()
        return render_template('move_cropped.html', mv_img=destination_path, video=fvideo)
    else:
        return "Method not allowed", 405

@app.route('/edit_images_video')
def edit_images_video():
    fvideo = findvideos()
    return render_template('edit_images_video.html',video=fvideo)

@app.route('/mp3_player')
def mp3_player():
    mp3_files = [file for file in os.listdir('static/music') if file.endswith('.mp3')]
    return render_template('mp3_player.html', mp3_files=mp3_files)
@app.route('/NOTES')
def plain_html():
    return render_template('NOTES.html')
@app.route('/edit_script', methods=['GET', 'POST'])
def edit_script():
    logger.info('Edit script page accessed')
    script_dir = "static/scripts/"
    script_files = []
    for filename in os.listdir(script_dir):
        if filename.endswith('.js'):
            script_files.append(filename)
    print(script_files)
    if request.method == 'POST':
        selected_file = request.form['script_file']
        if selected_file.endswith('.js'):
            selected_file_path = os.path.join(script_dir, selected_file)
            shutil.copy(selected_file_path, script_file)
            with open(selected_file_path, 'r') as file:
                script_content = file.read()
            logger.info(f'Selected script file: &#123;selected_file}')
            return render_template('edit_script.html', script_files=script_files, script_content=script_content)
        
@app.route('/edit_canvas_script', methods=['GET', 'POST'])
def edit_canvas_script():
    logger.info('Edit script page accessed')
    script_dir = "static/scripts/"
    script_files = []
    for filename in os.listdir(script_dir):
        if filename.endswith('canvas.js'):
            script_files.append(filename)
    print(script_files)
    if request.method == 'POST':
        selected_file = request.form['script_file']
        if selected_file.endswith('canvas.js'):
            selected_file_path = os.path.join(script_dir, selected_file)
            shutil.copy(selected_file_path, script_file)
            with open(selected_file_path, 'r') as file:
                script_content = file.read()
            logger.info(f'Selected script file: &#123;selected_file}')
            return render_template('edit_script.html', script_files=script_files, script_content=script_content)       

    logger.info('No script file selected')
    return render_template('edit_script.html', script_files=script_files)

@app.route('/save_script', methods=['POST'])
def save_script():
    logger.info('Save script request received')
    # Retrieve the updated script content from the form data
    updated_script = request.form.get('script_content')
    # Write the updated script content to the file
    with open(script_file, 'w') as file:
        file.write(updated_script)
        # Log the updated script content
        logger.info(f'Updated script:\n&#123;updated_script}')

    return render_template('save_script.html',script_file=script_file)

@app.route('/save_canvas_script', methods=['POST', 'GET'])
def save_canvas_script():
    logger.info('Save script request received')
    # Retrieve the updated script content from the form data
    updated_script = request.form.get('script_content')
    # Write the updated script content to the file
    logger.info("UPDATED_SCRIPT:",updated_script)
  
    logger.info("SCRIPT_FILE:",script_file)

    with open(script_file, 'w') as file:
        file.write(updated_script)
        # Log the updated script content
        logger.info(f'Updated script:\n&#123;updated_script}')

    return render_template('save_canvas_script.html',script_file=script_file)

@app.route('/preview', methods=['GET', 'POST'])
def preview():
    logger.info('Preview page accessed')
    script_file = 'static/scripts/script.js'  # Path to the script file

    # Check if the script file exists
    if os.path.isfile(script_file):
        logger.info(f'Script file found: &#123;script_file}')
        # Read the content of the script file
        with open(script_file, 'r') as file:
            script_content = file.read()
            logger.info(f'Script content:\n&#123;script_content}')
    else:
        logger.warning('No script file found')
        script_content = 'No script file found'

    # HTML content to be displayed
    html_content = "&lt;p&gt;This is a dynamic HTML content. It can include various elements, &lt;br /&gt;such as paragraphs, headings, lists, etc.&lt;/p&gt;"
    
    
@app.route('/preview_two_canvass', methods=['GET', 'POST'])
def preview_two_canvass():
    logger.info('Preview page accessed')
    script_file = 'static/scripts/two_canvas.js'  # Path to the script file

    # Check if the script file exists
    if os.path.isfile(script_file):
        logger.info(f'Script file found: &#123;script_file}')
        # Read the content of the script file
        with open(script_file, 'r') as file:
            script_content = file.read()
            logger.info(f'Script content:\n&#123;script_content}')
    else:
        logger.warning('No script file found')
        script_content = 'No script file found'

    # HTML content to be displayed
    html_content = "&lt;p&gt;This is a dynamic HTML content. It can include various elements, &lt;br /&gt;such as paragraphs, headings, lists, etc.&lt;/p&gt;"

    return render_template('preview_two_canvas.html', html_content=html_content, script_content=script_content)
@app.route('/capture_video')
def capture_video():
    now = datetime.now().strftime('&#37;Y-&#37;m-&#37;d_&#37;H-&#37;M-&#37;S')
    video_filename = f'static/captured_video_&#123;now}.mp4'
    
    command = f"sleep 5 && ffmpeg -f x11grab -framerate 24 -video_size 1366x760 -i :0.0 -f alsa -i plughw:0,0 -f pulse -i default -filter_complex '[1:a]volume=0.1[headset_audio];[2:a]volume=1[system_audio];[headset_audio][system_audio]amix=inputs=2[a]' -map 0:v -map '[a]' -c:v libx264 -r 24 -g 48 -c:a aac -b:a 128k -t 58 &#123;video_filename}"
    
    #command = f'ffmpeg -f x11grab -framerate 24 -video_size 1366x760 -i :0.0 -f alsa -i plughw:0,0 -f pulse -i default -filter_complex "[1:a]volume=0.1[headset_audio];[2:a]volume=1[system_audio];[headset_audio][system_audio]amix=inputs=2[a],[0:v]scale=512x666[aout]" -map "[aout]" -map "[a]" -c:v libx264 -r 24 -g 48 -c:a aac -b:a 128k -t 58 -y &#123;video_filename}'
     
    logger.info(f'Command: &#123;command}')  # Additional informational log  
    try:
        subprocess.run(command, shell=True, check=True, capture_output=True)
        shutil.copy(video_filename, 'static/LIVE2.mp4')
        return "Video captured successfully"
    except subprocess.CalledProcessError as e:
        return f"Error capturing video: &#123;str(e)}"
    
@app.route('/capture_square')
def capture_square():
    now = datetime.now().strftime('&#37;Y-&#37;m-&#37;d_&#37;H-&#37;M-&#37;S')
    videos_filename = f'static/captured_square_&#123;now}.mp4'
    
    command2 = (f'sleep 5 && ffmpeg -f x11grab -framerate 24 -video_size 580x580 -i :0+374,170 -f alsa -i plughw:0,0 -f pulse -i default -filter_complex "[1:a]volume=0.1[headset_audio];[2:a]volume=1[system_audio];[headset_audio][system_audio]amix=inputs=2[a],[0:v]scale=512x666[aout]" -map "[aout]" -map "[a]" -c:v libx264 -r 24 -g 48 -c:a aac -b:a 128k -t 58 -y &#123;videos_filename}'
)

    
    logger.info(f'Command: &#123;command2}')  # Additional informational log  
    try:
        subprocess.run(command2, shell=True, check=True, capture_output=True)
        shutil.copy(videos_filename, 'static/square2.mp4')
        return "Video captured successfully"
    except subprocess.CalledProcessError as e:
        return f"Error capturing video: &#123;str(e)}"   
    
@app.route('/misc_links')
def misc_links():
        return render_template('misc_links.html')   


@app.route('/search_chat')
def search_chat():
    # Load the conversations JSON file
    with open('static/chat/conversations.json', 'r') as f:
        conversations = json.load(f)
    
    # Get the search query from the request parameters
    query = request.args.get('q')

    # Search the conversations for the query and collect results
    results = []
    for conversation in conversations:
        if 'messages' in conversation:
            for message in conversation['messages']:
                if 'content' in message and query.lower() in message['content'].lower():
                    results.append(message)

    # Render the search results in the template
    return render_template('search_chat.html', output=results)  # Pass 'results' instead of 'output'

@app.route('/canvas')
def canvas():
        return render_template('canvas.html') 
      
@app.route('/index_canvas')
def index_canvas():
        fvideo = findvideos()
        return render_template('index_canvas.html', video=fvideo)   

@app.route('/one_canvas')
def one_canvas():
        return render_template('one_canvas.html')  
    
@app.route('/two_canvas')
def two_canvas():
        return render_template('two_canvas.html') 
      
def load_original_canvas_file(filename):
    original_file_path = os.path.join(template_dir, filename)
    with open(original_file_path, 'r') as file:
        return file.read()

def save_original_canvas_file(filename, content):
    now = datetime.datetime.now().strftime("&#37;Y&#37;m&#37;d_&#37;H&#37;M&#37;S")
    new_filename = f"&#123;filename}_&#123;now}canvas.txt"
    new_file_path = os.path.join(original_template_dir, new_filename)
    with open(new_file_path, 'w') as file:
        file.write(content)

def edit_and_save_canvas_file(filename, content):
    save_original_canvas_file(filename, content)
    edited_file_path = os.path.join(template_dir, filename)
    with open(edited_file_path, 'w') as file:
        file.write(content)


@app.route('/edit_canvas')
def edit_canvas():
    filenames = [f for f in os.listdir(template_dir) if f.endswith('canvas.html')]
    filenames = sorted(filenames)
    fvideo = findvideos()
    return render_template('edit_canvas.html', filenames=filenames, video=fvideo)

@app.route('/edit_canvas_page')
def edit_canvas_page():
    selected_filename = request.args.get('filename')
    original_content = load_original_canvas_file(selected_filename)
    return render_template('edit_canvas_page.html', selected_filename=selected_filename, original_content=original_content)

@app.route('/edit_canvas_save', methods=['POST'])
def edit_canvas_save():
    edited_content = request.form['edited_content']
    selected_filename = request.form['filename']
    print("CANVAS_SAVE",edited_content, selected_filename)
    edit_and_save_canvas_file(selected_filename, edited_content)
    return redirect(url_for('edit_canvas'))

if __name__ == '__main__':
    create_databaseD()  # Create the database and table before starting the app
    app.run(debug=True, host='0.0.0.0', port=5200)
&lt;!--enter_data.html Template:--&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Enter Code Snippets&lt;/title&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/flask.css') }}"&gt;
    &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h2&gt;Data Entry&lt;/h2&gt;
&lt;pre&gt;
    #!/home/jack/Desktop/StoryMaker/env/bin/python
from moviepy.editor import *
from flask import Flask, render_template, request, redirect, url_for, send_from_directory, Response, flash
from flask import send_file, g
import os
import pygame
from gtts import gTTS
import cv2
import dlib
import numpy as np
from random import randint
from moviepy.editor import VideoFileClip, ImageClip, CompositeVideoClip
from moviepy.editor import concatenate_videoclips, AudioFileClip
import moviepy.editor as mp
import moviepy.editor
import subprocess
from pathlib import Path as change_ext
import re
from io import BytesIO
import matplotlib.pyplot as plt
import sqlite3
import random
import glob
import base64
import tempfile
import datetime
import imageio
import time
from werkzeug.utils import secure_filename
import shutil
from search import search
import clean_images
from time import sleep
from pydub import AudioSegment
from PIL import Image, ImageDraw, ImageFont
import uuid
import logging
from logging.handlers import RotatingFileHandler
# Initialize Flask app
app = Flask(__name__)
app.secret_key = os.urandom(24)
# Create a logger object
logger = logging.getLogger(__name__)
logger.setLevel(logging.DEBUG)

# Create a formatter for the log messages
formatter = logging.Formatter(
    '&#37;(asctime)s &#37;(levelname)s: &#37;(message)s [in &#37;(pathname)s:&#37;(lineno)d]')

# Create a file handler to write log messages to a file
file_handler = RotatingFileHandler(
    'Logs/app.log', maxBytes=10000, backupCount=1)
file_handler.setLevel(logging.DEBUG)
file_handler.setFormatter(formatter)

# Add the file handler to the logger
logger.addHandler(file_handler)

# Set up logging for the Flask app
app.logger.addHandler(file_handler)
# Define a route for your Flask app


@app.route('/hello_world')
def hello_world():
    TExt = "TEXT TEST 6789"
    logger.debug('This is a debug message: &#37;s', TExt)

    TEXT = "TEXT TEST abcd"
    logger.debug('This is a debug message: &#37;s', TEXT)

    return "Hello, World!"


directory_path = "static/current_project"
if not os.path.exists(directory_path):
    os.makedirs(directory_path)
app.config['UPLOAD_FOLDER'] = 'static/images/uploads'
app.config['RESULTS_FOLDER'] = 'static/videos/results'
app.config['THUMBNAILS_FOLDER'] = 'static/images/thumbnails'
app.config['CHECKPOINT_PATH'] = 'checkpoints/wav2lip_gan.pth'
app.config['AUDIO_PATH'] = 'sample_data/input_audio.wav'
app.config['video_PATH'] = 'sample_data/input_videio.mp4'
app.config['DATABASE'] = 'code.db'  # SQLite database file


@app.route('/favicon.ico')
def favicon():
    return send_from_directory(os.path.join(app.root_path, 'static'), 'favicon.ico', mimetype='image/vnd.microsoft.icon')


# use the search function as a route
app.add_url_rule('/search', 'search', search)


def zip_lists(list1, list2):
    return zip(list1, list2)


app.jinja_env.filters['zip'] = zip_lists

directory_path = 'temp'  # Replace with the desired directory path
# Create the directory if it doesn't exist
os.makedirs(directory_path, exist_ok=True)


@app.route('/')
def index():
    image_dir = 'static/images'
    image_files = [f for f in os.listdir(image_dir) if f.endswith('.jpg')]
    random_image_file = random.choice(image_files)
    return render_template('index.html', random_image_file="images/" + random_image_file)


def generate_output():
    # Specify the path to your Bash script
    bash_script_path = '/home/jack/Desktop/StoryMaker/MakeVideo'

    # Execute the Bash script
    subprocess.run(['bash', bash_script_path])
    # Backup the result_videoxx.mp4 file
    current_datetime = str(int(time.time()))
    backup_filename = f"static/&#123;current_datetime}.mp4"
    original_filename = "results/result_voice.mp4"
    shutil.copyfile(original_filename, backup_filename)
    return redirect('/final_lipsync')


@app.route('/create_avatar', methods=['GET', 'POST'])
def create_avatar():
    if request.method == 'POST':
        # check_point = os.path.join(app.config['CHECKPOINT_PATH'], 'checkpoints/wav2lip_gan.pth')

        return Response(generate_output(), mimetype='text/plain')
    else:
        return render_template('create_avatar.html')


@app.route('/run_command', methods=['GET'])
def run_command():
    # Specify the path to your Bash script
    bash_script_path = 'MakeVideo'

    # Execute the Bash script
    subprocess.run(['bash', bash_script_path])
    # Backup the result_videoxx.mp4 file
    current_datetime = str(int(time.time()))
    backup_filename = f"static/&#123;current_datetime}.mp4"
    shutil.copyfile("results/result_voice.mp4", backup_filename)
    redirect('/final_lipsync')


@app.route('/result/&lt;filename&gt;')
def result(filename):
    return render_template('result.html', filename=filename)


@app.route('/convert_mp3_to_wav', methods=['GET', 'POST'])
def convert_mp3_to_wav():
    if request.method == 'POST':
        mp3_file = request.files['mp3_file']
        mp3_filename = mp3_file.filename
        mp3_path = os.path.join(app.static_folder, 'audio_mp3', mp3_filename)
        mp3_file.save(mp3_path)

        wav_filename = 'input_audio.wav'
        wav_path = os.path.join('sample_data', wav_filename)

        sound = AudioSegment.from_mp3(mp3_path)
        sound.export(wav_path, format='wav')

        return 'MP3 file converted to WAV successfully'
    else:
        return render_template('convert_mp3_to_wav.html')


@app.route('/final_lipsync')
def final_lipsync():
    VIDEO = 'result/result_voice.mp4'
    return render_template('final_lipsync.html', video=VIDEO)


@app.route('/text_mp3', methods=['GET', 'POST'])
def text_mp3():
    if request.method == 'POST':
        # Get the text from the textarea
        text = request.form['text']
        text0 = text
        # Remove whitespace from the text
        text = text.replace(" ", "")
        # Create a filename based on the first 25 characters of the text
        filename = "static/audio_mp3/" + text[:25] + ".mp3"
        textname = text[:25] + ".txt"
        # Save the text to a text file
        textname = textname.strip()
        with open("static/text/" + textname, 'w') as f:
            f.write(text0)
        filename = filename.strip()  # remove the newline character
        # Create a gTTS object and save the audio file
        tts = gTTS(text)
        filename = filename.strip()
        tts.save(filename)
        shutil.copy(filename, 'static/TEMP.mp3')
        # Play the mp3 file
        pygame.mixer.init()
        pygame.mixer.music.load(filename)
        pygame.mixer.music.play()
        # Wait for the audio to finish playing
        while pygame.mixer.music.get_busy():
            pygame.time.Clock().tick(10)
        # Stop pygame and exit the program
        pygame.mixer.quit()
        pygame.quit()
        # Return the text and filename to the template
        return render_template('text_mp3.html', text=text, filename=filename)
    else:
        # Render the home page template
        return render_template('text_mp3.html')


@app.route('/mp3_upload', methods=['POST'])
def mp3_upload():
    if 'file' not in request.files:
        return 'No file uploaded', 400

    file = request.files['file']
    if file.filename == '':
        return 'No file selected', 400

    if file:
        audio_file = 'static/TEMP.mp3'
        file.save(audio_file)
        return render_template('player.html', audio_file=audio_file)


@app.route('/generate_video', methods=['GET', 'POST'])
def generate_video():
    if request.method == 'POST':
        # Set the input and output filenames
        eyes_filename = 'static/TEMP.png'
        input_filename = 'static/TEMP2.mp4'
        output_filename = 'static/TEMP2.mp4'

        # Set the paths for the video and audio files
        audio_file = 'static/TEMP.mp3'
        output_filenames = 'static/TEMP.mp4'

        # Extract eyes from the uploaded image and save as eyes_test.png
        image_path = "static/TEMP.jpg"
        shape_predictor_path = "/home/jack/hidden/shape_predictor_68_face_landmarks.dat"
        extract_eyes(image_path, eyes_filename, shape_predictor_path)

        # Load the image clip
        image_clip = ImageClip(image_path, duration=30)

        # Set the final clip properties
        final_clip = image_clip.set_audio(None)
        final_clip = final_clip.set_position('center')

        # Write the final video
        final_clip.write_videofile(
            output_filename, codec='libx264', fps=30, audio=False)

        # Load the input video without audio
        input_clip = VideoFileClip(input_filename, audio=False)

        # Load the eye image clip
        eyes_clip = ImageClip(eyes_filename)

        # Create multiple looping clips
        clips = []
        for i in range(8):
            loop_clip = mkloop(input_clip, eyes_clip)
            clips.append(loop_clip)

        # Concatenate all the clips
        final_clips = concatenate_videoclips(clips)

        # Write the final video
        final_clips.write_videofile(
            output_filenames, codec='libx264', fps=input_clip.fps, audio=False)

        # Load the video and audio files
        video_clip = VideoFileClip(output_filenames)
        audio_clip = AudioFileClip(audio_file)

        # Set the duration of the final video to match the audio clip's duration
        final_duration = audio_clip.duration + .5

        # Set the video clip's duration to match the final duration
        video_clip = video_clip.set_duration(final_duration)

        # Set the audio of the video clip to be the same as the loaded audio clip
        video_clip = video_clip.set_audio(audio_clip)

        # Write the final video file
        output_path = "static/final_video_blinking.mp4"
        video_clip.write_videofile(
            output_path, codec='libx264', audio_codec='aac', fps=24)
        shutil.copy(output_path, 'results/final_video_blinking.mp4')
        return render_template('generate_video.html', video_path=output_path)

    return render_template('generate_video.html')
# Function to extract eyes from an image using dlib


def extract_eyes(image_path, eyes_filename, shape_predictor_path):
    # Load the image and shape predictor model
    image = cv2.imread(image_path)
    detector = dlib.get_frontal_face_detector()
    predictor = dlib.shape_predictor(shape_predictor_path)

    # Convert the image to grayscale
    gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)

    # Detect faces in the image
    faces = detector(gray)

    # Iterate over the detected faces and extract the eye regions
    for face in faces:
        landmarks = predictor(gray, face)

        # Extract the coordinates of the left eye
        left_eye_pts = [(landmarks.part(i).x, landmarks.part(i).y)
                        for i in range(36, 42)]

        # Extract the coordinates of the right eye
        right_eye_pts = [(landmarks.part(i).x, landmarks.part(i).y)
                         for i in range(42, 48)]

        # Create a transparent image with an alpha channel
        transparent_image = np.zeros(
            (image.shape[0], image.shape[1], 4), dtype=np.uint8)

        # Define the skin color (e.g., light brown or tan) in BGR format
        # skin_color_bgr = (210, 180, 140)
        skin_color_bgr = (80, 80, 40)

        # Convert BGR to RGB
        skin_color_rgb = (skin_color_bgr[2],
                          skin_color_bgr[1], skin_color_bgr[0])

        # Draw the eye regions on the transparent image with the skin color and alpha channel
        cv2.fillPoly(transparent_image, [np.array(
            left_eye_pts)], skin_color_rgb + (200,))
        cv2.fillPoly(transparent_image, [np.array(
            right_eye_pts)], skin_color_rgb + (200,))
        blurred_image = cv2.GaussianBlur(transparent_image, (5, 5), 0)
        # Save the transparent image with only the eyes as a PNG file
        cv2.imwrite(eyes_filename, blurred_image)
# Function to create a looping clip with blinking eyes


def mkloop(input_clip, eyes_clip):
    # Set the duration of the eye image clip
    eyes_duration = 0.1  # seconds

    # Set the position of the eye image clip
    eyes_position = 'center'

    # Set the start time of the eye image clip
    blink_start_time = randint(2, 4)

    # Create a CompositeVideoClip with the input video and the eye image clip
    final_clip = CompositeVideoClip([input_clip, eyes_clip.set_duration(eyes_duration)
                                     .set_position(eyes_position)
                                     .set_start(blink_start_time)])

    # Calculate the duration of the final clip
    final_duration = blink_start_time + eyes_duration + \
        randint(2, 4)  # 5 to 8 seconds after the blink

    # Set the duration of the final clip
    final_clip = final_clip.set_duration(final_duration)
    return final_clip


def apply_text(mp4_path, text, x, y):
    video = moviepy.editor.VideoFileClip(mp4_path)
    font = "/home/jack/fonts/OpenSansBold.ttf"
    text_clip = moviepy.editor.TextClip(
        text, font=font, fontsize=24, color="white")

    try:
        x = int(x)
        y = int(y)
    except ValueError:
        raise ValueError(
            "Invalid position values. Please provide integer values for x and y.")

    if not (0 &lt;= x &lt;= video.w):
        raise ValueError(
            "Invalid x position. Must be within the width of the video.")

    if not (0 &lt;= y &lt;= video.h):
        raise ValueError(
            "Invalid y position. Must be within the height of the video.")

    text_clip = text_clip.set_position((x, y))

    # Check if duration is None and set a default value if necessary
    video_duration = video.duration if video.duration is not None else 0
    text_clip_duration = text_clip.duration if text_clip.duration is not None else 0

    # Set the duration of the video and text clips
    duration = max(video_duration, text_clip_duration)
    video = video.set_duration(duration)
    text_clip = text_clip.set_duration(duration)

    # Create the composite video by overlaying the text clip onto the video clip
    new_video = moviepy.editor.CompositeVideoClip([video, text_clip])

    # Save the new video with the applied text
    new_mp4_path = 'static/TTMP.mp4'
    new_video.write_videofile(
        new_mp4_path, codec='libx264', audio_codec='aac', remove_temp=False)

    return new_mp4_path


@app.route("/apply_text_to_video", methods=["POST", "GET"])
def apply_text_to_video():
    if request.method == "POST":
        file = request.files["mp4_file"]
        if file.filename == '':
            return redirect(request.url)
        file.save('static/TTMP.mp4')

        mp4_path = 'static/TTMP.mp4'
        text = request.form["text"]
        x = request.form["x"]
        y = request.form["y"]
        new_mp4_path = apply_text(mp4_path, text, x, y)
        return render_template("apply_text_to_video.html", new_mp4_path=new_mp4_path)
    else:
        return render_template("apply_text_to_video.html")


# Get a list of existing subdirectories in the video resources directory
existing_subdirectories = [subdir for subdir in os.listdir(
    "static/current_project") if os.path.isdir(os.path.join("static/current_project", subdir))]


@app.route('/uploads', methods=['GET', 'POST'])
def upload_files():
    video_resources_dir = "static/current_project"
    if request.method == 'POST':
        # Get the selected subdirectory from the form
        selected_subdirectory = request.form.get('subdirectory')

        # Check if the selected subdirectory exists
        if selected_subdirectory in existing_subdirectories:
            # Handle the uploaded file
            file = request.files['file']
            if file:
                # Save the file to the selected subdirectory
                file.save(os.path.join(video_resources_dir,
                          selected_subdirectory, file.filename))
                # Get the URL for the uploaded image
                image_path = url_for('static', filename=os.path.join(
                    'current_project', selected_subdirectory, file.filename))
                return render_template('upload_files.html', image_path=image_path)
            else:
                return 'No file selected.'
        else:
            return 'Invalid subdirectory selected.'
    # Render the upload form with the list of existing subdirectories
    return render_template('upload_files.html', subdirectories=existing_subdirectories)


@app.route('/get_files', methods=['POST'])
def get_files():
    subdirectory = request.form.get('subdirectory')
    file_options = []
    if subdirectory and subdirectory in existing_subdirectories:
        subdirectory_path = os.path.join(
            "static/current_project", subdirectory)
        files = os.listdir(subdirectory_path)
        file_options = [
            f'&lt;option value="&#123;file}"&gt;&#123;file}&lt;/option&gt;'
            for file in files
            if os.path.isfile(os.path.join(subdirectory_path, file))
        ]
    return ''.join(file_options)


@app.route('/image_list')
def image_list():
    image_directory = 'static/current_project/Narrators'
    image_list = [
        filename
        for filename in os.listdir(image_directory)
        if filename.endswith('.jpg')
    ]
    return render_template('image_list.html', image_list=image_list)


@app.route('/upload', methods=['POST', 'GET'])
def upload():
    filename = request.form['filename']
    if filename:
        src_path = 'static/current_project/Narrators/' + filename
        dest_path = 'static/TEMP.jpg'
        shutil.copyfile(src_path, dest_path)
        return redirect('/')
    else:
        return 'No file selected.'


# List of image directories (you can add more as needed)
image_directories = glob.glob('static/images/*')

@app.route("/mkblend_video", methods=['GET', 'POST'])
def mkblend_video():
    if request.method == 'POST':
        selected_directory = request.form.get('selected_directory')

        if selected_directory:
            # Create a temporary directory to save the images
            temp_dir = tempfile.mkdtemp()

            # Loop through the files in the selected directory and move them to the temporary directory
            chosen_directory = os.path.join('static/images', selected_directory)
            for filename in os.listdir(chosen_directory):
                if filename.endswith('.jpg') or filename.endswith('.png'):
                    source_path = os.path.join(chosen_directory, filename)
                    target_path = os.path.join(temp_dir, filename)
                    os.rename(source_path, target_path)
                    logger.debug('Moved file: &#37;s', filename)
    
        image_list = glob.glob(temp_dir + "*.jpg")
        logger.debug('IMAGE_LIST: &#37;s', image_list)
        # Shuffle and select a subset of images
        # random.shuffle(image_list)
        image_list = sorted(image_list)
        logger.debug('Selected image filenames: &#37;s', image_list)
        # Print the number of selected images
        print(len(image_list))
        logger.debug('Number of files: &#37;s', len(image_list))

        def changeImageSize(maxWidth, maxHeight, image):
            widthRatio = maxWidth / image.size[0]
            heightRatio = maxHeight / image.size[1]
            newWidth = int(widthRatio * image.size[0])
            newHeight = int(heightRatio * image.size[1])
            newImage = image.resize((newWidth, newHeight))
            return newImage

        # Get the size of the first image
        if image_list:
            imagesize = Image.open(image_list[0]).size

            for i in range(len(image_list) - 1):
                imag1 = image_list[i]
                imag2 = image_list[i + 1]
                image1 = Image.open(imag1)
                image2 = Image.open(imag2)

                image3 = changeImageSize(imagesize[0], imagesize[1], image1)
                image4 = changeImageSize(imagesize[0], imagesize[1], image2)

                image5 = image3.convert("RGBA")
                image6 = image4.convert("RGBA")

                text = "animate/"
                for ic in range(0, 100):
                    inc = ic * 0.01
                    # inc = ic * 0.08
                    sleep(0.1)
                    # Gradually increase opacity
                    alphaBlended = Image.blend(image5, image6, alpha=inc)
                    alphaBlended = alphaBlended.convert("RGB")
                    current_time = datetime.datetime.now()
                    filename = current_time.strftime(
                        '&#37;Y&#37;m&#37;d_&#37;H&#37;M&#37;S&#37;f')[:-3] + '.jpg'
                    alphaBlended.save(f'&#123;text}&#123;filename}')
                    # shutil.copy(f'&#123;text}&#123;filename}', &#123;temp_dir}+'TEMP.jpg')
                    shutil.copy(f'&#123;text}&#123;filename}', os.path.join(temp_dir, 'TEMP.jpg'))

                    if ic &#37; 25 == 0:
                        print(i, ":", ic, end=" . ")
                    if ic &#37; 100 == 0:
                        logger.debug('Image Number: &#37;.2f &#37;d', inc, ic)

            from moviepy.video.io.ImageSequenceClip import ImageSequenceClip
            # Get the list of files sorted by creation time
            imagelist = sorted(glob.glob('animate/*.jpg'),
                               key=os.path.getmtime)

            # Create a clip from the images
            clip = ImageSequenceClip(imagelist, fps=30)

            # Write the clip to a video file using ffmpeg
            current_time = datetime.datetime.now()
            filename = "static/animate/TEMP3a.mp4"
            clip.write_videofile(
                filename, fps=24, codec='libx265', preset='medium')
            store = "static/videos/" + \
                current_time.strftime('&#37;Y&#37;m&#37;d_&#37;H&#37;M&#37;S&#37;f')[:-3] + 'jul27.mp4'
            # Replace with the desired path for the converted video file
            output_file = "static/animate/TEMP5.mp4"
            # Replace with the desired path for the converted video file
            webm_file = "static/animate/TEMP5.webm"
            ffmpeg_cmd = [
                'ffmpeg', '-i', filename, '-c:v', 'libx264', '-crf', '23', '-preset', 'medium', '-c:a', 'aac',
                '-b:a', '128k', '-movflags', '+faststart', '-y', output_file
            ]
            subprocess.run(ffmpeg_cmd)
            ffmpeg_cmd2 = [
                'ffmpeg', '-i', filename, '-c:v', 'libx264', '-crf', '23', '-preset', 'medium', '-c:a', 'aac',
                '-b:a', '128k', '-movflags', '+faststart', '-y', webm_file
            ]
            subprocess.run(ffmpeg_cmd2)
            shutil.copy(filename, store)
            return render_template('mkblend_video.html', video=filename)

    return render_template('choose_directory.html')


def changeImageSize(maxWidth, maxHeight, image):
    widthRatio = maxWidth / image.size[0]
    heightRatio = maxHeight / image.size[1]
    newWidth = int(widthRatio * image.size[0])
    newHeight = int(heightRatio * image.size[1])
    newImage = image.resize((newWidth, newHeight))
    return newImage


directories = [
    "static/images/512x1536-woman",
    "static/images/abstract_beauty",
    "static/images/beautiful_girl",
    "static/images/Beautiful_Warrior"
]


@app.route("/mkblend_videos", methods=['POST', 'GET'])
def mkblend_videos():
    # Get the selected directory from the form data
    selected_directory = request.form.get('selected_directory')
    logger.debug('Selected Directory: &#37;s', selected_directory)
    # Check if the selected directory is valid
    if selected_directory and selected_directory in directories:
        # Use glob to get the list of files within the selected directory
        filelist = glob.glob(os.path.join(selected_directory, '*.jpg'))
        logger.debug('Selected directory: &#37;s', selected_directory)
        image_list = filelist
        # Shuffle and select a subset of images
        image_list = filelist
        random.shuffle(image_list)
        image_list = random.sample(image_list, 29)
        # Get the size of the first image
        imagesize = Image.open(image_list[0]).size

        # Print the number of selected images
        print("IMAGE_LIST_length:", len(image_list))

        for i in range(len(image_list) - 1):
            imag1 = image_list[i]
            imag2 = image_list[i + 1]
            image1 = Image.open(imag1)
            image2 = Image.open(imag2)

            image3 = changeImageSize(imagesize[0], imagesize[1], image1)
            image4 = changeImageSize(imagesize[0], imagesize[1], image2)

            image5 = image3.convert("RGBA")
            image6 = image4.convert("RGBA")

            text = "animate/"
            # for ic in range(0,125):
            for ic in range(0, 100):
                inc = ic * .01
                sleep(.1)
                # gradually increase opacity
                alphaBlended = Image.blend(image5, image6, alpha=inc)
                alphaBlended = alphaBlended.convert("RGB")
                current_datetime = str(int(time.time()))
                filename = current_datetime[:-3] + '.jpg'
                alphaBlended.save(f'&#123;text}&#123;filename}')
                if ic &#37; 25 == 0:
                    print(ic, ":", inc, end=" . ")

    from moviepy.video.io.ImageSequenceClip import ImageSequenceClip
    # Get the list of files sorted by creation time
    imagelist2 = sorted(glob.glob('animate/*.jpg'), key=os.path.getmtime)

    # Create a clip from the images
    clip = ImageSequenceClip(imagelist2, fps=30)

    # Write the clip to a video file using ffmpeg
    current_datetime = str(int(time.time()))
    filename = "static/animate/TEMP3a.mp4"
    clip.write_videofile(filename, fps=24, codec='libx265', preset='medium')
    store = "static/videos/" + current_datetime[:-3] + 'july27.mp4'
    # Replace with the desired path for the converted video file
    output_file = "static/animate/TEMP5.mp4"
    # webm_file = "static/animate/TEMP5.webm"  #Replace with the desired path for the converted video file
    ffmpeg_cmd = ['ffmpeg', '-i', filename, '-c:v', 'libx264', '-crf', '23', '-preset',
                  'medium', '-c:a', 'aac', '-b:a', '128k', '-movflags', '+faststart', '-y', output_file]
    subprocess.run(ffmpeg_cmd)
    # ffmpeg_cmd2 = ['ffmpeg', '-i', filename, '-c:v', 'libx264', '-crf', '23', '-preset', 'medium', '-c:a', 'aac', #'-b:a', '128k', '-movflags', '+faststart', '-y', webm_file]
    # subprocess.run(ffmpeg_cmd2)
    shutil.copy(filename, store)
    return render_template('mkblend_videos.html', video=filename)


@app.route('/generate_vid', methods=['GET', 'POST'])
def generate_vid():
    current_datetime = str(int(time.time()))
    str_current_datetime = str(current_datetime)
    logger.debug('Generating video', str_current_datetime)
    if request.method == 'POST':
        # Load the audio file
        audio_file = request.files['audio']
        # , 'input_audio.mp3')
        filename = os.path.join(app.config['AUDIO_PATH'])
        logger.info(f'Audio path: &#123;filename}')
        audio_file.save(filename)
        print("FILENAME:", filename)

        # Get the duration of the audio using ffprobe
        command = f"ffprobe -v error -show_entries format=duration -of default=noprint_wrappers=1:nokey=1 &#123;filename}"
        duration = subprocess.check_output(command.split())
        duration = float(duration.strip().decode())
        logger.info(f'Duration: &#123;duration}')
        # Load the image file
        image_file = request.files['image']
        image_path = os.path.join(
            app.config['UPLOAD_FOLDER'], secure_filename(image_file.filename))
        logger.info(f'Image path: &#123;image_path}')
        image_file.save(image_path)

        # Create the video
        # video_path = os.path.join(app.config['VIDEO_PATH'])#, 'sample_data/input_video.mp4')
        video_path = 'sample_data/input_video.mp4'
        logger.info(f'Video path: &#123;video_path}')
        ffmpeg_command = f"ffmpeg -loop 1 -i &#123;image_path} -c:v libx264 -t &#123;duration+ 0.5} -pix_fmt yuv420p -y &#123;video_path}"
        subprocess.run(ffmpeg_command, shell=True)

        return f'Video created: &#123;video_path}'

    return render_template('generate_vid.html')
# Define route to display upload form


@app.route('/upload_file', methods=['POST', 'GET'])
def upload_file():
    if request.method == 'POST':
        # Check if file was uploaded
        if 'file' not in request.files:
            app.logger.error('No file was uploaded')
            flash('Error: No file was uploaded')
            return redirect(request.url)

        app.logger.error('request.files[\'file\']')
        file = request.files['file']

        # Check if file was selected
        if file.filename == '':
            app.logger.error('No file was selected')
            flash('Error: No file was selected')
            return redirect(request.url)

        # Define allowed file extensions
        ALLOWED_EXTENSIONS = &#123;'png', 'jpg', 'jpeg', 'gif'}

        # Define function to check file extension
        def allowed_file(filename):
            return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

        # Check if file is allowed
        if not allowed_file(file.filename):
            # app.logger.error(f"File '&#123;file.filename}' is not allowed")
            app.logger.error("File '" + file.filename + "' is not allowed")
            flash("Error: File '" + file.filename + "'close is not allowed")
            return redirect(request.url)

        # Save the file
        try:
            filename = secure_filename(file.filename)
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
            app.logger.info(f'File &#123;filename} saved')
            app.logger.info('FILENAME:', os.path.join(
                app.config['UPLOAD_FOLDER'], filename))
        except Exception as e:
            app.logger.error(f'Error saving file: &#123;e}')
            flash('Error: Unable to save file')
            return redirect(request.url)

        # Redirect to the result page
        app.logger.info(f'File-Result &#123;filename} SAVED')
        return redirect(url_for('result', filename=filename))

    # Return the upload form for GET requests
    return render_template('upload_file.html')


@app.route('/uploads/&lt;filename&gt;')
def uploaded_file(filename):
    return send_from_directory(app.config['UPLOAD_FOLDER'], filename)


@app.route('/make_text', methods=['GET', 'POST'])
def make_text():
    DIR = 'static/text/'
    if request.method == 'POST':
        # Get the text entered in the textarea
        text = request.form.get('text')

        # Generate a filename using the first 25 letters of the text
        text = text.replace(' ', '_')
        filename = text[:25]

        # Save the text to a file
        with open(f'&#123;DIR}&#123;filename}.txt', 'w') as file:
            file.write(text)

        return 'Text saved successfully!'
    else:
        return render_template('make_text.html')


# directories = ['static/images', 'static/images/squares', 'static/final_videos', 'static/Dreamlike_art',
#              'static/squares', 'static/images/uploads', 'static/Final_Fantasy', 'static/final_images', 'static/thumbnails']
directories = glob.glob('static/images/*')

# Route for the home page


@app.route('/home')
def home():
    return render_template('choose_dir.html', directories=directories)
# Route for choosing a directory


@app.route('/choose_dir', methods=['GET', 'POST'])
def choose_dir():
    if request.method == 'POST':
        selected_directory = request.form.get('directory', directories)
        TExt = "TEXT TEST"
        logger.error('No file was selected: &#37;s', TExt)
        logger.debug('Debug was selected: &#37;s', TExt)
        if selected_directory is None:
            # Handle the case where no directory is selected
            logger.error('No directory selected')
            return 'No directory selected!'
        # Rest of the code...
        # Use the selected_directory variable in your logic to generate the video
        # Make sure to update the paths according to the selected directory
        logger.debug('Selected directory: &#37;s', selected_directory)
        # Get the list of image files in the selected directory
        image_filenames = random.sample(
            glob.glob(selected_directory + '/*.jpg'), 30)
        logger.debug('Selected image filenames: &#37;s', image_filenames)

        image_clips = []
        for filename in image_filenames:
            # Open the image file and resize it to 512x768
            logger.debug('Processing image: &#37;s', filename)
            image = Image.open(filename)
            # image = image.resize((512, 768), Image.ANTIALIAS)
            # Convert the PIL Image object to a NumPy array
            image_array = np.array(image)
            # Create an ImageClip object from the resized image and set its duration to 1 second
            image_clip = ImageClip(image_array).set_duration(1)
            # Append the image clip to the list
            image_clips.append(image_clip)

        logger.debug('Number of image clips: &#37;d', len(image_clips))

        # Concatenate all the image clips into a single video clip
        video_clip = concatenate_videoclips(image_clips, method='compose')
        timestr = time.strftime("&#37;Y&#37;m&#37;d-&#37;H&#37;M&#37;S")
        # Set the fps value for the video clip
        video_clip.fps = 24
        # Write the video clip to a file
        video_file = f'static/videos/random_images_&#123;timestr}_video.mp4'
        output_p = 'static/videos/random_images_video.mp4'
        logger.debug('Output video file path: &#37;s', video_file)
        logger.debug('Final video file path: &#37;s', output_p)

        video_clip.write_videofile(video_file, fps=24)

        try:
            shutil.copy(video_file, output_p)
        except Exception as e:
            logger.error('Error occurred while copying file: &#37;s', str(e))
            return f"Error occurred while copying file: &#123;str(e)}"

        # Return the rendered template with the list of directories and output path
        return render_template('choose_dir.html', directories=directories, output_path=output_p)

    # If the request method is GET, render the form template with the list of directories
    output_p = 'static/videos/random_images_video.mp4'
    return render_template('choose_dir.html', directories=directories, output_path=output_p)


@app.route('/convert', methods=['GET', 'POST'])
def convert():
    if request.method == 'POST':
        try:
            audio_file = request.files['audio_file']
            # Path for audio file
            audio_file_path = f'static/audio_mp3/&#123;audio_file.filename}'
            # Save the audio file to the specified location
            audio_file.save(audio_file_path)

            formatted_text_file = request.files['formatted_text_file']
            # Path for formatted text file
            formatted_text_file_path = f'static/formatted_text/&#123;formatted_text_file.filename}'
            # Save the formatted text file to the specified location
            formatted_text_file.save(formatted_text_file_path)

            output_filename = datetime.datetime.now().strftime('&#37;Y-&#37;m-&#37;d') + '.mp4'
            output_path = 'static/videos/' + output_filename
            # Define the ffmpeg command
            # Create the blank video
            # ffmpeg -f lavfi -i color='#470000'@0x0:s=1280x720:rate=60,format=rgba -t 280 -y blank.mp4
            command = [
                'ffmpeg',
                '-i', audio_file_path,
                '-f', 'lavfi',
                '-i', f"color='#470000'@0.0:s=1280x720:rate=60,format=rgba",
                '-vf', f"drawtext=textfile='&#123;os.path.abspath(formatted_text_file_path)}':y=(h-220)-12*t:x=580:fontcolor=orange:fontfile=/home/jack/Arimo-Regular.ttf:fontsize=26",
                '-t', '280',
                '-y', output_path
            ]

            logger.debug(f"Command: &#123;' '.join(command)}")

            subprocess.run([str(arg) for arg in command], check=True)
            video = f'&#123;output_filename}'
            return render_template('convert.html', video=output_path)
        except Exception as _:
            logger.exception("An error occurred during video conversion:")
            return render_template('error.html', message="An error occurred during video conversion.")
    else:
        return render_template('convert_form.html')


@app.route('/convert512', methods=['GET', 'POST'])
def convert512():
    if request.method == 'POST':
        try:
            audio_file = request.files['audio_file']
            # Path for audio file
            audio_file_path = f'static/audio_mp3/&#123;audio_file.filename}'
            # Save the audio file to the specified location
            audio_file.save(audio_file_path)
            # Get the duration of the audio using ffprobe
            command = f"ffprobe -v error -show_entries format=duration -of default=noprint_wrappers=1:nokey=1 &#123;audio_file_path}"
            duration = subprocess.check_output(command.split())
            duration = float(duration.strip().decode())
            length = int(duration + 5)
            logger.info(f'Duration-512: &#123;length}')
            formatted_text_file = request.files['formatted_text_file']
            # Path for formatted text file
            formatted_text_file_path = f'static/formatted_text/&#123;formatted_text_file.filename}'
            # Save the formatted text file to the specified location
            formatted_text_file.save(formatted_text_file_path)

            output_filename = datetime.datetime.now().strftime('&#37;Y-&#37;m-&#37;d') + '.mp4'
            output_path = 'static/videos/' + output_filename
            # Define the ffmpeg command
            # Create the blank video
            # ffmpeg -f lavfi -i color='#470000'@0x0:s=1280x720:rate=60,format=rgba -t 280 -y blank.mp4
            # y=(h-120)-12*t:x=24:
            command = [
                'ffmpeg',
                '-i', audio_file_path,
                '-f', 'lavfi',
                '-i', f"color='#470000'@0.0:s=512x1024:rate=60,format=rgba",
                '-vf', f"drawtext=textfile='&#123;os.path.abspath(formatted_text_file_path)}':y=(h-120)-10*t:x=24:fontcolor=orange:fontfile=/home/jack/Arimo-Regular.ttf:fontsize=20",
                '-t', f'&#123;length}', '-y', output_path
            ]

            logger.debug(f"Command: &#123;' '.join(command)}")

            subprocess.run([str(arg) for arg in command], check=True)
            video = f'&#123;output_filename}'
            return render_template('convert512.html', video=output_path)
        except Exception as e:
            logger.exception("An error occurred during video conversion:")
            return render_template('error.html', message="An error occurred during video conversion.")
    else:
        return render_template('convert_form512.html')


@app.route('/mk_text', methods=['GET', 'POST'])
def mk_text():
    DIR = "static/text/"
    if request.method == 'POST':
        text = request.form.get('text')
        tex = text.replace(" ", "_")
        filename = tex[:25]
        with open(f'&#123;DIR}&#123;filename}.txt', 'w') as file:
            file.write(text)
        return render_template('mk_text.html', text=text, filename=f'&#123;filename}.txt')
    else:
        return render_template('mk_text.html')


@app.route('/list_files')
def list_files():
    static_text_dir = 'static/text/'
    files = os.listdir(static_text_dir)
    files = [file for file in files if os.path.isfile(
        os.path.join(static_text_dir, file))]
    return str(files)


@app.route('/format_file', methods=['POST', 'GET'])
def format_file():
    static_text_dir = 'static/text/'
    static_format_dir = 'static/formatted_text/'
    if request.method == 'POST':
        filename = request.form.get('filename')
        file_path = os.path.join(static_text_dir, filename)
        if not os.path.isfile(file_path):
            return render_template('error.html', message=f'File "&#123;filename}" does not exist')
        with open(file_path, 'r') as file:
            content = file.read()
        words = content.split()
        formatted_content = '\n'.join(
            [' '.join(words[i:i + 5]) for i in range(0, len(words), 5)])
        modified_filename = filename.replace('.txt', '') + 'FORMATTED.txt'
        modified_file_path = os.path.join(static_format_dir, modified_filename)
        with open(modified_file_path, 'w') as modified_file:
            modified_file.write(formatted_content)
            logger.debug('This is Formated Content: &#37;s', formatted_content)
            logger.debug('This is Formated file: &#37;s', modified_file_path)
        return render_template('success.html', original_file=filename, modified_file=modified_filename)

    file_options = []
    for file_name in os.listdir(static_text_dir):
        if file_name.endswith('.txt'):
            file_options.append(file_name)

    return render_template('form.html', file_options=file_options)


@app.route('/view_text')
def view_text():
    text_files_dir = 'static/text/'
    text_files = []
    for filename in os.listdir(text_files_dir):
        if filename.endswith('.txt'):
            text_files.append(filename)
    return render_template('select_file.html', text_files=text_files)


@app.route('/view_text/&lt;filename&gt;')
def display_text(filename):
    text_file_path = f'static/text/&#123;filename}'
    try:
        with open(text_file_path, 'r') as file:
            file_contents = file.read()
        return render_template('view_text.html', file_contents=file_contents, filename=filename)
    except FileNotFoundError:
        return f'Text file &#123;filename} not found.'


@app.route('/edit_file', methods=['GET', 'POST'])
def edit_file():
    if request.method == 'POST':
        filename = request.form.get('filename')
        text = request.form.get('text')
        with open(f'static/text/&#123;filename}', 'w') as file:
            file.write(text)
    text_files_dir = 'static/text/'
    text_files = []
    for filename in os.listdir(text_files_dir):
        if filename.endswith('.txt'):
            text_files.append(filename)
    return render_template('edit_file.html', text_files=text_files)


@app.route('/edit_formatted', methods=['GET', 'POST'])
def edit_formatted():
    if request.method == 'POST':
        filename = request.form.get('filename')
        text = request.form.get('text')
        with open(f'static/formatted_text/&#123;filename}', 'w') as file:
            file.write(text)
    text_files_dir = 'static/formatted_text/'
    text_files = []
    for filename in os.listdir(text_files_dir):
        if filename.endswith('.txt'):
            text_files.append(filename)
    return render_template('edit_formatted.html', text_files=text_files)


@app.route('/get_formatted_content/&lt;filename&gt;')
def get_formatted_content(filename):
    file_path = os.path.join('static/formatted_text', filename)
    with open(file_path, 'r') as file:
        content = file.read()
    return content


@app.route('/get_file_content/&lt;filename&gt;')
def get_file_content(filename):
    file_path = os.path.join('static/text', filename)
    with open(file_path, 'r') as file:
        content = file.read()
    return content


@app.route('/indeX')
def indeX():
    return render_template('indeX.html')


@app.route('/resize_and_overlay_videos')
def resize_and_overlay_videos():
    # Path to the videos
    static_video_path = 'static/videos/2023-07-07.mp4'
    input_video_path = 'static/animate/topvideo.mp4'
    output_video_path = 'static/output/resulta.mp4'

    # Resize the input video using FFmpeg
    resize_command = f'ffmpeg -i &#123;input_video_path} -vf "scale=410:820" -y resized.mp4'
    subprocess.call(resize_command, shell=True)

    # Overlay the resized video on the background video using FFmpeg
    overlay_command = f'ffmpeg -i &#123;static_video_path} -i resized.mp4 -filter_complex "overlay=25:25" -y &#123;output_video_path}'
    subprocess.call(overlay_command, shell=True)

    # Remove the temporary resized video
    subprocess.call('rm resized.mp4', shell=True)

    # Return the final video as a response
    return send_file(output_video_path, mimetype='video/mp4')


@app.route('/resize_and_overlay_videos_page')
def resize_and_overlay_videos_page():
    output_video_path = 'static/output/resulta.mp4'
    return render_template('resize_and_overlay_videos.html', video=output_video_path)


@app.route('/build_stackedvids')
def build_stackedvids():
    # Get a random video and image from the static folder
    video_filename = random.choice(glob.glob('static/square_vids/*.mp4'))
    image_filename = random.choice(glob.glob('static/squares/*.jpg'))

    # Load the video and image files as clips
    video_clip = VideoFileClip(video_filename)
    image_clip = ImageClip(image_filename)

    # Set the duration of the image clip to match the duration of the video clip
    image_clip = image_clip.set_duration(video_clip.duration)

    # Resize the clips to 640x640 and 640x640 respectively
    video_clip = video_clip.resize((640, 640))
    image_clip = image_clip.resize((640, 640))

    # Create a black clip to fill the remaining space below the image
    black_clip = ColorClip(size=(640, 640), color=(
        0, 0, 0)).set_duration(video_clip.duration)

    # Combine the clips vertically using CompositeVideoClip
    final_clip = CompositeVideoClip([
        video_clip.set_position(('center', 'top')),
        image_clip.set_position(('center', 640)),
        black_clip.set_position(('center', 640 + 640))
    ], size=(640, 1280))

    # Export the final clip as a video file
    timestr = time.strftime("&#37;Y&#37;m&#37;d-&#37;H&#37;M&#37;S")
    video_filename = 'static/stacked_vids/stacked_vids' + timestr + 'video.mp4'
    final_clip_path = 'static/stacked_vids/stacked_videos.mp4'
    final_clip.write_videofile(final_clip_path)
    final_clip.write_videofile(video_filename)

    return render_template('/build_stackedvids.html', stackedvid_url=final_clip_path)


@app.route('/build_stackedvid')
def build_stackedvid():
    # Get a random video and image from the static folder
    video_filename = random.choice(glob.glob('static/square_vids/*.mp4'))
    videofilename = random.choice(glob.glob('static/square_vids/*.mp4'))

    # Load the video and image files as clips
    video_clip = VideoFileClip(video_filename)
    videoclip = VideoFileClip(videofilename)

    # Set the duration of the image clip to match the duration of the video clip
    videoclip = videoclip.set_duration(video_clip.duration)

    # Resize the clips to 640x640 and 640x640 respectively
    video_clip = video_clip.resize((640, 640))
    videoclip = videoclip.resize((640, 640))

    # Create a black clip to fill the remaining space below the image
    black_clip = ColorClip(size=(640, 640), color=(
        0, 0, 0)).set_duration(video_clip.duration)

    # Combine the clips vertically using CompositeVideoClip
    final_clip = CompositeVideoClip([
        video_clip.set_position(('center', 'top')),
        videoclip.set_position(('center', 640)),
        black_clip.set_position(('center', 640 + 640))
    ], size=(640, 1280))

    # Export the final clip as a video file
    timestr = time.strftime("&#37;Y&#37;m&#37;d-&#37;H&#37;M&#37;S")
    video_filename = 'static/stacked_vids/stacked_vids' + timestr + 'video.mp4'
    final_clip_path = 'static/stacked_vids/stacked_videos.mp4'
    final_clip.write_videofile(final_clip_path)
    final_clip.write_videofile(video_filename)

    return render_template('/build_stackedvid.html', stackedvid_url=final_clip_path)


@app.route('/clean_images', methods=['POST'])
def clean_images_route():
    clean_images()
    app.logger.error('line 210 clean_images_route')
    return redirect(url_for('index'))


@app.route('/get_gallery')
def get_gallery():
    image_dir = '/mnt/HDD500/flask/FLASK/static/images/uploads'
    image_names = os.listdir(image_dir)
    return render_template('get_gallery.html', image_names=image_names)


@app.route('/uploads/&lt;filename&gt;')
def send_image(filename):
    return send_from_directory('static/images/uploads', filename)


@app.route('/uploads/thumbnails/&lt;filename&gt;')
def send_image_thumb(filename):
    return send_from_directory('static/images/uploads/thumbnails', filename)


@app.route('/flask_info')
def flask_info():
    return render_template('flask_info.html')


@app.route('/add_effects')
def add_effects():
    return '''
        &lt;form method="post" action="/video" enctype="multipart/form-data"&gt;
            &lt;label for="input_video"&gt;Select input video file:&lt;/label&gt;&lt;br&gt;
            &lt;input type="file" id="input_video" name="input_video"&gt;&lt;br&gt;&lt;br&gt;
            &lt;input type="submit" value="Submit"&gt;
        &lt;/form&gt;
    '''


@app.route('/video', methods=['GET', 'POST'])
def process_video():
    DIR = "static/"
    input_video = request.files['input_video']

    # Save the uploaded video to a file
    input_video.save(f"&#123;DIR}input_video.mp4")

    # Run FFmpeg commands
    command1 = f"ffmpeg -nostdin -i &#123;DIR}input_video.mp4 -filter:v \"minterpolate='mi_mode=mci:mc_mode=aobmc:vsbmc=1:fps=10'\" -c:v libx264 -r 20 -pix_fmt yuv420p -c:a copy -y &#123;DIR}output.mp4"

    subprocess.run(command1, shell=True, stderr=subprocess.PIPE,
                   universal_newlines=True)

    command2 = f"ffmpeg -nostdin -i &#123;DIR}output.mp4 -vf mpdecimate,setpts=N/FRAME_RATE/TB -c:v libx264 -r 30 -pix_fmt yuv420p -c:a copy -y &#123;DIR}mpdecimate.mp4"

    subprocess.run(command2, shell=True, stderr=subprocess.PIPE,
                   universal_newlines=True)

    # DIR = "/home/jack/Desktop/ffmpeg_flask/"
    command3 = f"ffmpeg -i static/mpdecimate.mp4 -filter_complex \"[0:v]trim=duration=14,loop=500:1:0[v];[1:a]afade=t=in:st=0:d=1,afade=t=out:st=0.9:d=2[a1];[v][0:a][a1]concat=n=1:v=1:a=1\" -c:v libx264 -r 30 -pix_fmt yuv420p -c:a aac -b:a 192k -shortest -y static/output.mp4"
    subprocess.run(command3, shell=True, stderr=subprocess.PIPE,
                   universal_newlines=True)

    now = datetime.datetime.now().strftime("&#37;Y-&#37;m-&#37;d_&#37;H-&#37;M-&#37;S")
    shutil.copy(f"&#123;DIR}output.mp4", f"&#123;DIR}&#123;now}_output.mp4")
    logger.info(f'my_video: f"&#123;DIR}mpdecimate.mp4"')
    video_file = "static/outputALL.mp4"
    command4 = f'ffmpeg -i "&#123;DIR}mpdecimate.mp4" -i "&#123;DIR}mpdecimate.mp4" -i "&#123;DIR}mpdecimate.mp4" -i "&#123;DIR}mpdecimate.mp4" -i "&#123;DIR}mpdecimate.mp4" -filter_complex "[0:v]trim=duration=15[v0];[1:v]trim=duration=15[v1];[2:v]trim=duration=15[v2];[3:v]trim=duration=15[v3];[4:v]trim=duration=15[v4];[v0][v1][v2][v3][v4]concat=n=5:v=1:a=0" -c:v libx264 -pix_fmt yuv420p -shortest -y &#123;video_file}'
    subprocess.run(command4, shell=True, stderr=subprocess.PIPE,
                   universal_newlines=True)
    now = datetime.datetime.now().strftime("&#37;Y-&#37;m-&#37;d_&#37;H-&#37;M-&#37;S")
    diR = f"&#123;DIR}/square_videos/"
    logger.info(f'diR: f"&#123;diR}mpdecimate.mp4"')
    shutil.copy(f"&#123;video_file}", f"&#123;diR}&#123;now}_outputALL.mp4")
    logger.info(f'diR: &#123;diR}mpdecimate.mp4')
    return render_template('final.html', video_file=video_file)


def get_all_mp4_videos():
    mp4_videos = []
    for root, dirs, files in os.walk('static'):
        for file in files:
            if file.endswith('.mp4'):
                mp4_videos.append(os.path.join(root, file))
    return mp4_videos


@app.route('/play/&lt;path:video_path&gt;')
def play(video_path):
    return send_file(video_path)


@app.route('/select_order', methods=['GET', 'POST'])
def select_order():
    # Set a default value for output_path
    output_path = 'static/videos/concatenated_video.mp4'
    if request.method == 'POST':
        # Get the order of the videos from the form data
        order = request.form.getlist('order')
        # Join the videos in the specified order
        join_videos(order, output_path)
        # Set the timestamped output path
        timestamp = datetime.datetime.now().strftime('&#37;Y&#37;m&#37;d_&#37;H&#37;M&#37;S')
        new_output_path = f'static/videos/concatenated_&#123;timestamp}XX.mp4'
        shutil.copy(output_path, new_output_path)
        # Redirect to the download page
        return redirect(url_for('download'))
    else:
        # Get the paths to the video files in the directory
        video_dir = 'static/videos'
        video_files = [os.path.join(video_dir, filename) for filename in os.listdir(
            video_dir) if filename.endswith('.mp4')]
        # Render the template with the list of video files and the output path
        return render_template('select_order.html', video_files=video_files, output_path=output_path)


def join_videos(video_paths, output_path):
    # Generate a list of input arguments for FFmpeg
    input_args = []
    for path in video_paths:
        input_args.extend(['-i', path])
    # Join the videos using FFmpeg
    subprocess.run(['ffmpeg', *input_args, '-filter_complex', 'concat=n=&#123;}:v=1:a=0'.format(
        len(video_paths)), '-c:v', 'libx264', '-crf', '23', '-preset', 'veryfast', '-y', output_path])
    # output_path = 'static/videos/concatenated_video.mp4'
    timestamp = datetime.datetime.now().strftime('&#37;Y&#37;m&#37;d_&#37;H&#37;M&#37;S')
    new_output_path = f'static/videos/concatenated_&#123;timestamp}XX.mp4'
    shutil.copy(output_path, new_output_path)


@app.route('/videos', methods=['POST'])
def process_videos():
    DIR = "static/"
    input_video = request.files['input_video']
    ""
    # Save the uploaded video to a file
    input_video.save(f"&#123;DIR}input_video2.mp4")

    command1 = f"ffmpeg -nostdin -i &#123;DIR}input_video2.mp4 -filter:v \"minterpolate='mi_mode=mci:mc_mode=aobmc:vsbmc=1:fps=10'\" -c:v libx264 -r 20 -pix_fmt yuv420p -c:a copy -y &#123;DIR}alice/output2.mp4"
    subprocess.run(command1, shell=True, stderr=subprocess.PIPE,
                   universal_newlines=True)

    command2 = f"ffmpeg -hide_banner -i &#123;DIR}alice/output2.mp4 -filter:v \"setpts=5*PTS,minterpolate='fps=25:scd=none:me_mode=bidir:vsbmc=1:search_param=200'\" -t 58 -y &#123;DIR}alice/final2.mp4"
    subprocess.run(command2, shell=True, stderr=subprocess.PIPE,
                   universal_newlines=True)

    command3 = f"ffmpeg -hide_banner -i &#123;DIR}alice/final2.mp4 -filter:v \"setpts=5*PTS,minterpolate='fps=25:scd=none:me_mode=bidir:vsbmc=1:search_param=200'\" -t 58 -y &#123;DIR}alice/final5.mp4"
    subprocess.run(command3, shell=True, stderr=subprocess.PIPE,
                   universal_newlines=True)

    # Add music to the video
    init = randint(10, 50)
    MUSIC = ["static/music/Born_a_Rockstar-Instrumental-NEFFEX.mp3", "static/music/Cattle-Telecasted.mp3", "static/music/Bite_Me-Clean-NEFFEX.mp3", "static/music/El_Secreto-Yung_Logos.mp3", "static/music/Blue_Mood-Robert_Munzinger.mp3", "static/music/Escapism-Yung_Logos.mp3", "static/music/Enough-NEFFEX.mp3", "static/music/As_You_Fade_Away-NEFFEX.mp3", "static/music/Culture-Anno_Domini_Beats.mp3", "static/music/Contrast-Anno_Domini_Beats.mp3", "static/music/Diving_in_Backwards-Nathan_Moore.mp3",
             "static/music/Aztec_Empire-Jimena_Contreras.mp3", "static/music/Devil_s_Organ-Jimena_Contreras.mp3", "static/music/Alpha_Mission-Jimena_Contreras.mp3", "static/music/Changing-NEFFEX.mp3", "static/music/Anxiety-NEFFEX.mp3", "static/music/6-Shots-NEFFEX.mp3", "static/music/DimishedReturns.mp3", "static/music/Drum_Meditation.mp3", "static/music/ChrisHaugen.mp3", "static/music/DoveLove-Moreira.mp3", "static/music/DesertPlanet.mp3", "static/music/David_Fesliyan.mp3"]

    music = random.choice(MUSIC)
    command3 = f"ffmpeg -i &#123;DIR}alice/final5.mp4 -ss &#123;init} -i &#123;music} -af 'afade=in:st=0:d=4,afade=out:st=55:d=3' -map 0:0 -map 1:0 -shortest -y &#123;DIR}alice/Final_End.mp4"
    subprocess.run(command3, shell=True)

    # Save the output video to a file
    now = datetime.datetime.now().strftime("&#37;Y-&#37;m-&#37;d_&#37;H-&#37;M-&#37;S")
    shutil.copy(f"&#123;DIR}alice/output2.mp4", f"&#123;DIR}alice/&#123;now}_output.mp4")
    shutil.copy(f"&#123;DIR}alice/Final_End.mp4", f"&#123;DIR}alice/&#123;now}_Final.mp4")
    shutil.copy(f"&#123;DIR}alice/Final_End.mp4", f"&#123;DIR}alice/Final_End_mix.mp4")
    return render_template('final.html', video_file="alice/Final_End.mp4")


@app.route('/large_video')
def large_video():
    return render_template('large_video.html')


@app.route('/add_border')
def add_border():
    images = [f for f in os.listdir(
        'static/images/uploads/') if os.path.isfile(os.path.join('static/images/uploads/', f))]
    thumbnails = []
    for image in images:
        with Image.open('static/images/uploads/' + image) as img:
            img.thumbnail((200, 200))
            thumbnail_name = 'thumbnail_' + image
            img.save('static/thumbnails/' + thumbnail_name)
            thumbnails.append(thumbnail_name)
    return render_template('add_border.html', images=images, thumbnails=thumbnails)


@app.route('/select_border')
def select_border():
    borders = os.listdir('static/transparent_borders/')
    return render_template('select_border.html', borders=borders)


@app.route('/apply_border', methods=['POST', 'GET'])
def apply_border():
    selected_image = request.form['image']
    selected_border = request.form['border']
    try:
        with Image.open('static/images/uploads/' + selected_image) as img:
            with Image.open('static/transparent_borders/' + selected_border) as border:
                img = img.resize(border.size)
                img.paste(border, (0, 0), border)
                final_image_name = 'final_' + selected_image
                img.save('static/final_images/' + final_image_name)
        return render_template('final_image.html', final_image=final_image_name, message='Border applied successfully.')
    except Exception as e:
        error_message = f'An error occurred: &#123;str(e)}. Please try again.'
        return render_template('apply_border.html', image=selected_image, border=selected_border, error_message=error_message)


@app.route('/select_border_image', methods=['GET'])
def select_border_image():
    try:
        image = request.args.get('image')
        if not image:
            raise ValueError('No image selected.')
        return render_template('select_border.html', image=image, borders=os.listdir('static/transparent_borders/'))
    except Exception as e:
        error_message = f'An error occurred: &#123;str(e)}. Please try again.'
        return render_template('add_border.html', error_message=error_message)


@app.route('/overlay_text', methods=['GET'])
def overlay_text():
    # Load the blank image
    blank_image_path = 'static/new_video/Border-plain.png'
    blank_image = Image.open(blank_image_path)

    # Load the text file and format its contents
    text_file_path = 'static/new_video/text_file.txt'
    with open(text_file_path, 'r') as file:
        text_contents = file.read()

    formatted_text = f"&#123;text_contents}"  # Format the contents as desired

    # Set the font properties
    font_size = 21
    font_color = (255, 255, 255)  # White color
    font_path = '/home/jack/fonts/source-sans-pro-semibold.ttf'

    font = ImageFont.truetype(font_path, font_size)

    # Create a new image with the same size as the blank image and transparent background
    text_overlay = Image.new('RGBA', blank_image.size, (0, 0, 0, 0))

    # Draw the formatted text onto the overlay image
    draw = ImageDraw.Draw(text_overlay)
    text_position = (50, 600)  # Adjust the position as needed
    draw.text(text_position, formatted_text, font=font, fill=font_color)

    # Merge the overlay image with the blank image
    final_image = Image.alpha_composite(
        blank_image.convert('RGBA'), text_overlay)

    # Save the final image
    output_image_path = 'static/new_video/output_image.png'
    final_image.save(output_image_path)

    return render_template('overlay_text.html', output_image_path=output_image_path)


@app.route('/create_text_file', methods=['GET', 'POST'])
def create_text_file():
    if request.method == 'POST':
        # Get the text content from the textarea
        text_content = request.form.get('textarea_content')

        # Create the file path
        text_file_path = os.path.join('static/new_video', 'text_file.txt')

        # Write the text content to the file
        with open(text_file_path, 'w') as file:
            file.write(text_content)

        return render_template('text_file_created.html', text_file_path=text_file_path)

    return render_template('create_text_file.html')


def allowed_file(filename):
    return '.' in filename and filename.rsplit('.', 1)[1].lower() == 'jpg'


@app.route('/generate_video3', methods=['GET', 'POST'])
def generate_video3():
    if request.method == 'POST':
        # Check if any files were uploaded
        if 'file' not in request.files:
            error_message = "No files uploaded."
            logger.error(error_message)
            return render_template('generate_video3.html', error_message=error_message)

        files = request.files.getlist('file')

        # Check if files were selected
        if len(files) == 0:
            error_message = "No files selected."
            logger.error(error_message)
            return render_template('generate_video3.html', error_message=error_message)

        # Check if the files have supported extensions
        for file in files:
            if not allowed_file(file.filename):
                error_message = f"Invalid file extension for &#123;file.filename}. Only JPG files are allowed."
                logger.error(error_message)
                return render_template('generate_video3.html', error_message=error_message)

        # Create a temporary directory to save the uploaded files
        temp_dir = os.path.join('static', 'temp')
        os.makedirs(temp_dir, exist_ok=True)

        # Save the uploaded files to the temporary directory
        saved_files = []
        for file in files:
            filename = secure_filename(file.filename)
            file_path = os.path.join(temp_dir, filename)
            file.save(file_path)
            saved_files.append(file_path)

        # Randomly select 30 image files
        selected_images = random.sample(saved_files, min(30, len(saved_files)))

        # Create a list of image clips from the selected images
        image_clips = []
        for image_file in selected_images:
            image_clip = mp.ImageClip(image_file, duration=1)
            image_clips.append(image_clip)

        # Concatenate the image clips into a video clip
        video_clip = mp.concatenate_videoclips(image_clips)

        # Set the output video path
        output_path = os.path.join('static', 'videos', 'generated_video.mp4')

        # Write the video clip to the output file
        video_clip.write_videofile(output_path, fps=24)

        # Delete the uploaded files after processing
        for file_path in saved_files:
            os.remove(file_path)

        # Return the generated video URL to the client
        video_url = url_for('static', filename='videos/generated_video.mp4')
        return render_template('generate_video3.html', video_url=video_url)

    # Render the initial form
    return render_template('generate_video3.html')


@app.route('/generate_video2')
def generate_video2():
    # Get the pythonlist of image files in the static/final_images/ directory
    # image_filenames = random.sample(glob.glob('static/final_images/*.jpg'),25)
    # image_filenames = random.sample(glob.glob('static/images/uploads/*.jpg'),30)
    # image_filenames = random.sample(glob.glob('static/alien_files/*.jpg'),30)
    image_filenames = random.sample(
        glob.glob('/mnt/HDD500/collections/absrtact/*.jpg'), 30)
    print(image_filenames, end="-")

    image_clips = []
    for filename in image_filenames:
        # Open the image file and resize it to 512x768
        image = Image.open(filename)
        image = image.resize((512, 768), Image.ANTIALIAS)
        print(image)
        # Convert the PIL Image object to a NumPy array
        image_array = np.array(image)
        # Create an ImageClip object from the resized image and set its duration to 1 second
        image_clip = ImageClip(image_array).set_duration(1)

        # Append the image clip to the list
        image_clips.append(image_clip)

    # Concatenate all the image clips into a single video clip
    video_clip = concatenate_videoclips(image_clips, method='compose')
    timestr = time.strftime("&#37;Y&#37;m&#37;d-&#37;H&#37;M&#37;S")
    # Set the fps value for the video clip
    video_clip.fps = 24
    # Write the video clip to a file
    video_path = 'static/videos/random_images' + timestr + 'video.mp4'
    video_clip.write_videofile(video_path, fps=24)
    video_clip.write_videofile('static/videos/TEMPvideo.mp4', fps=24)

    # Return a message to the client
    return render_template('generate_video2.html', video_url='static/videos/TEMPvideo.mp4')
    # return render_template('generate_video2.html' ,video_url='/static/videos/TEMPvideo.mp4', video_path=video_path)


@app.route('/ffmpeg_ctl', methods=['GET', 'POST'])
def ffmpeg_ctl():
    if request.method == 'POST':
        # Access the numeric input value from the form data
        number = request.form.get('number')
        # Process the value as needed
        # ...

    return render_template('ffmpeg_ctl.html')


@app.route('/mkmoz', methods=['GET', 'POST'])
def mkmoz():
    im = Image.new("RGB", (2048, 2048), (250, 250, 250))
    for i in range(0, 2500):
        if i &lt; 500:
            DIR = "/home/jack/.cache/thumbnails/large/*.png"
        if i &gt; 500:
            DIR = "/home/jack/.cache/thumbnails/normal/*.png"
        # if i&gt; 2495:DIR = "/home/jack/.cache/thumbnails/large/*.png"
        thumb = random.choice(glob.glob(DIR))
        print("THUMB:", thumb)
        Thum = Image.open(thumb)
        im.paste(Thum, ((randint(0, im.size[0])), randint(0, im.size[1]) - 50))
        filename = "static/images/ThumbNails.png"
        im.save(filename)
        Filename = "images/ThumbNails.png"
    return render_template("mkmoz.html", filename=Filename)


@app.route('/mk_background', methods=['GET', 'POST'])
def mk_background():
    im = Image.new("RGB", (8000, 512), (127, 255, 127))
    for i in range(0, 1000):
        if i &lt; 250:
            DIR = "/home/jack/.cache/thumbnails/large/*.png"
        else:
            DIR = "/home/jack/.cache/thumbnails/normal/*.png"
        thumb = random.choice(glob.glob(DIR))
        print("THUMB:", thumb)
        Thum = Image.open(thumb)
        im.paste(Thum, ((randint(0, im.size[0])), randint(0, im.size[1]) - 50))
        filename = "static/images/ThumbNails_Background.png"
        im.save(filename)
    return redirect('/mkvid')


@app.route('/mkvid')
def mkvid():
    Filename = "static/images/ThumbNails_Background.png"
    Video_file = "static/images/ThumbNails_Background_FFmpeg.mp4"
    command = [
        'FFmpeg', '-hide_banner',
        '-loop', '1', '-i', 'static/images/ThumbNails_Background.png',
        '-vf', 'scale=8000:512,scroll=horizontal=0.0001,crop=768:512:0:0,format=yuv420p',
        '-t', '240', '-y', 'static/images/ThumbNails_Background_FFmpeg.mp4'
    ]
    subprocess.run(command)
    return redirect('/mkvid2')


@app.route('/mkvid2')
def mkvid2():
    command2 = [
        'ffmpeg', '-hide_banner',
        '-i', 'static/images/ThumbNails_Background_FFmpeg.mp4',
        '-vf', 'scale=512:768,setsar=1/1',
        '-c:a', 'copy', '-y', 'static/images/long_512-768.mp4'
    ]
    subprocess.run(command2)
    Filenamez = "images/ThumbNails_Background.png"
    Video_filez = "images/long_512-768.mp4"
    return render_template("mkvid2.html", filename=Filenamez, video=Video_filez)


def get_db():
    db = getattr(g, '_database', None)
    if db is None:
        db = g._database = sqlite3.connect(app.config['DATABASE'])
    return db


@app.teardown_appcontext
def close_connection(exception):
    db = getattr(g, '_database', None)
    if db is not None:
        db.close()


@app.route('/view_thumbs')
def view_thumbs():
    # Define the directory where the images are located
    image_directory = 'static/images/uploads'
    # Get a list of all the image files in the directory
    image_files = [f for f in os.listdir(
        image_directory) if f.endswith('.jpg') or f.endswith('.png')]
    # Create a list of dictionaries containing the image file name and URL
    image_list = [&#123;'name': f, 'url': f'/images/uploads/&#123;f}'}
                  for f in image_files]
    # Render the template with the list of images
    return render_template('view_thumbs.html', image_list=image_list)


@app.route('/add_text', methods=['GET', 'POST'])
def add_text():
    if request.method == 'POST':
        text = request.form['text']
        now = datetime.datetime.now()
        timestamp = now.strftime("&#37;Y-&#37;m-&#37;d &#37;H:&#37;M:&#37;S")
        text = f'Text Entry: &#123;timestamp} &#123;text}'
        with open('chat.txt', 'a') as file:
            file.write(f'\n&#123;text}')
        return render_template('add_text.html', message='Text added successfully')
    else:
        return render_template('add_text.html')


@app.route('/search_txt', methods=['GET', 'POST'])
def search_txt():
    if request.method == 'POST' and 'phrase' in request.form:
        phrase = request.form['phrase']
        with open('chat.txt', 'r') as file:
            lines = file.readlines()
        results = []
        for i, line in enumerate(lines):
            if phrase in line:
                start = max(0, i - 5)
                end = min(len(lines), i + 6)
                context = lines[start:end]
                for j, context_line in enumerate(context):
                    if phrase in context_line:
                        results.append(f'Line &#123;start+j}: &#123;context_line}')
                    else:
                        results.append(f'Line &#123;start+j}: &#123;context_line}')
        return render_template('results.html', results=results)
    return render_template('search_txt.html')


@app.route('/blend_pil', methods=['POST', 'GET'])
def blend_pil():
    if request.method == 'POST':
        # Get the uploaded images
        img1 = request.files['img1']
        img2 = request.files['img2']
        img3 = request.files['img3']

        # Open the images using PIL
        img1_pil = Image.open(img1)
        img2_pil = Image.open(img2)
        img3_pil = Image.open(img3)

        # Blend the images
        blended_pil = Image.blend(img1_pil, img2_pil, 1 / 3)
        blended_pil = Image.blend(blended_pil, img3_pil, 1 / 3)

        # Return the blended image as a response
        # Since we are not saving it to the server, we can use a BytesIO object to avoid creating a temporary file
        img_io = BytesIO()
        blended_pil.save(img_io, 'JPEG', quality=70)
        current_datetime = datetime.now()
        str_current_datetime = str(current_datetime)
        file_name = "static/images/uploads/blended_pil" + \
            str_current_datetime + "XXXX.jpg"
        blended_pil.save(file_name, format='JPEG')
        img_io.seek(0)

        # Generate the HTML for displaying the blended image in the template
        blended_image_data = base64.b64encode(
            img_io.getvalue()).decode('utf-8')
        blended_image_url = f"data:image/jpeg;base64,&#123;blended_image_data}"
        # blended_image_url = blended_image_url.resize(( blended_image_url.size[0]//2, blended_image_url.size[1]//2), Image.ANTIALIAS)
        # Pass the URL of the blended image to the template
        return render_template('show_blend_pil.html', blended_image_url=blended_image_url)
    return render_template('blend_pil.html')


@app.route('/process_images', methods=['POST', 'GET'])
def process_images():
    if request.method == 'POST':
        # read the images from the request
        img1 = Image.open(request.files['image1'].stream).convert('RGB')
        img2 = Image.open(request.files['image2'].stream).convert('L')
        img3 = Image.open(request.files['image3'].stream).convert('RGB')

        # resize the images to have the same shape
        img1 = img1.resize((img2.width, img2.height))
        img3 = img3.resize((img2.width, img2.height))

        # convert the mask to binary
        threshold = 127
        mask = Image.eval(img2, lambda px: 255 if px &gt; threshold else 0)

        # apply the mask
        img = Image.composite(img1, img3, mask)

        # save the image to a file
        output = BytesIO()
        current_datetime = datetime.now()
        str_current_datetime = str(current_datetime)
        file_name = "static/images/" + str_current_datetime + "XXXX.jpg"
        img.save(file_name, format='JPEG')
        img.save(output, format='JPEG')
        output.seek(0)

        # encode the image to bytes
        img_bytes = output.getvalue()

        # return the image as a response
        return Response(img_bytes, mimetype='image/jpeg')
    return render_template('process_images.html')


@app.route('/image_directories', methods=['GET', 'POST'])
def image_directories():
    image_directories = ['static/Prodia_640x640', 'static/LineArt',
                         'static/Quantized', 'static/squares', 'static/BrightColors']
    if request.method == 'POST':
        # Rest of the code

        directory = request.form['directory']
        # Check that the directory parameter is not empty
        if directory:
            app.logger.info(
                'Redirecting endpoint with directory: &#37;s', directory)
            # Check that the directory is a valid directory path
            if os.path.isdir(directory):
                # Pass the directory value to the square_video endpoint
                app.logger.info(
                    'Redirecting to square_video endpoint with directory: &#37;s', directory)
                return redirect(url_for('square_video', directory=directory))
            else:
                # Render an error template if the directory parameter is not a valid directory path
                app.logger.error('Invalid directory parameter: &#37;s', directory)
                return render_template('error.html', message='Please enter a valid directory path.')
        else:
            # Render an error template if the directory parameter is empty
            app.logger.error('Directory parameter is empty')
            return render_template('error.html', message='Please enter a directory path.')
    else:
        # Pass the list of image directories to the template
        return render_template('image_directories.html', image_directories=image_directories)


@app.route('/select_playmp3', methods=['GET', 'POST'])
def select_playmp3():
    # Get the list of mp3 files in the static/audio_mp3/ directory
    mp3_files = [f for f in os.listdir(
        'static/audio_mp3/') if f.endswith('.mp3')]
    if request.method == 'POST':
        # Get the selected MP3 file from the dropdown list
        mp3_file = request.form['mp3_file']
        # Play the selected mp3 file
        pygame.mixer.init()
        pygame.mixer.music.load('static/audio_mp3/' + mp3_file)
        pygame.mixer.music.play()
        # Wait for the audio to finish playing
        while pygame.mixer.music.get_busy():
            pygame.time.Clock().tick(10)
        # Stop pygame and exit the program
        pygame.mixer.quit()
        pygame.quit()
    # Render the template with the list of mp3 files
    return render_template('select_playmp3.html', mp3_files=mp3_files)


@app.route("/make_animation")
def make_animation():
    # Get a list of all files in the final_images directory
    # image_files = os.listdir("static/final_images/")
    # DIR = "/home/jack/Desktop/HDD500/collections/gypsy_files/"
    # DIR = "/home/jack/Desktop/HDD500/collections/hippy_files/"
    #DIR = "/mnt/HDD500/collections/jungle/exotic_lithograph_prints-Playground_AI_files/512x768/"
    DIR = "static/images/clip_drop/"
    selected_files = random.sample(glob.glob(DIR + '*.jpg'), 30)
    print(selected_files)
    #image_files = os.listdir(DIR)
    # image_files = os.listdir("/mnt/HDD500/collections/640x640-alien/")
    # Select 20 random files from the list
    #selected_files = random.sample(image_files, 30)

    # Load each selected file, resize it to 400x600, and save it to a temporary directory
    resized_images = []
    for filename in selected_files:
        print(filename)
        with Image.open(filename) as img:

            img = img.resize((400, 600))
            temp_filename = "static/tmp/" + filename
            img.save(temp_filename)
            resized_images.append(temp_filename)

    # Create an animated GIF from the resized images

    gif_filename = "static/animated_gifs/animated.gif"
    with imageio.get_writer(gif_filename, mode='I', duration=1) as writer:
        for filename in resized_images:
            image = imageio.imread(filename)
            writer.append_data(image)
    import shutil

    timestr = time.strftime("&#37;Y&#37;m&#37;d-&#37;H&#37;M&#37;S")

    src = 'static/animated_gifs/animated.gif'
    dst = 'static/animated_gifs/animated' + timestr + '.gif'
    # 2nd option
    shutil.copy(src, dst)
    # Return a template that displays the GIF
    return render_template("make_animation.html", gif_filename=gif_filename)


@app.route('/title_page', methods=['GET', 'POST'])
def title_page():
    if request.method == 'POST':
        # Get the text input and image file from the form data
        text = request.form['text']
        image = request.files['image']

        # Save the image to a temporary location
        image_path = os.path.join(
            app.config['UPLOAD_FOLDER'], secure_filename(image.filename))
        image.save(image_path)

        # Open the image file
        image = Image.open(image_path)

        # Create a drawing context on the image
        draw = ImageDraw.Draw(image)

        # Define the font and font size for the text
        font = ImageFont.truetype('static/fonts/OpenSansBold.ttf', 50)
        # Split the text by newline characters
        lines = text.split("  ")

        # Calculate the size of each line and get the maximum width
        line_sizes = [draw.textsize(line, font) for line in lines]
        max_line_width = max([size[0] for size in line_sizes])

        # Calculate the total size of the text
        text_width = max_line_width
        text_height = sum([size[1] for size in line_sizes])

        # Calculate the position of the text in the center of the image
        x = (640 - text_width) / 2
        y = (640 - text_height) / 2

        # Calculate the size of the text
        text_width, text_height = draw.textsize(text, font)

        # Calculate the position of the text in the center of the image
        x = (640 - text_width) / 2
        y = (640 - text_height) / 2

        # Add the text to the image
        draw.text((x, y), text, font=font, fill=(0, 0, 0, 255))

        # Save the image to the static folder with a unique filename
        inc = text.replace(" ", "")
        filenamex = os.path.join(
            app.static_folder, 'title_pages', f'&#123;inc}_&#123;hash(text)}.png')
        image.save(filenamex)
        filename = 'static/title_pages/title_page.png'
        shutil.copy(filenamex, filename)
        logger.error('filename: &#37;s', filename)

        # print(inc[:5])
        # Remove the temporary image file
        # os.remove(image_path)
        filenamev = 'title_pages/title_page.png'
        # Return the rendered template with the image filename
        return render_template('title_page.html', filename=filenamev)
    filenamev = 'title_pages/title_page.png'
    return render_template('title_page.html', filename=filenamev)


@app.route('/add_title', methods=['GET', 'POST'])
def add_title():
    # Create the final_videos directory if it does not exist
    final_videos_dir = os.path.join(app.static_folder, 'final_videos')
    if not os.path.exists(final_videos_dir):
        os.makedirs(final_videos_dir)

    if request.method == 'POST':
        app.logger.debug('Entering POST request handler for /add_title')
        # Get the paths of the selected video and title page
        video_path = os.path.join(
            app.static_folder, 'videos', request.form['video'])
        title_page_path = os.path.join(
            app.static_folder, 'title_pages', request.form['title_page'])
        app.logger.debug(f'video_path: &#123;video_path}')
        app.logger.debug(f'title_page_path: &#123;title_page_path}')

        # Load the video and title page as clips
        video_clip = VideoFileClip(video_path)
        title_page_clip = ImageClip(title_page_path).set_duration(2)

        # Add the title page to the video for the first 2 seconds
        final_clip = concatenate_videoclips(
            [title_page_clip, video_clip.subclip(2)])

        # Save the final video to the final_videos directory
        final_filename = f"&#123;os.path.splitext(request.form['video'])[0]}_&#123;os.path.splitext(request.form['title_page'])[0]}.mp4"
        final_path = os.path.join(final_videos_dir, final_filename)
        app.logger.debug(f'final_path: &#123;final_path}')
        final_clip.write_videofile(final_path)

        # Return a response to the user indicating that the video with title page was created
        message = f"The video with title page was created and saved to &#123;final_path}"
        return render_template('add_title.html', message=message)

    # If the request method is GET, render the add_title.html template
    app.logger.debug('Entering GET request handler for /add_title')
    videos = os.listdir(os.path.join(app.static_folder, 'square_vids'))
    title_pages = os.listdir(os.path.join(app.static_folder, 'title_pages'))
    app.logger.debug(f'videos: &#123;videos}')
    app.logger.debug(f'title_pages: &#123;title_pages}')
    return render_template('add_title.html', videos=videos, title_pages=title_pages)


def get_rowid():
    # Connect to the database
    db = sqlite3.connect('code.db')
    cursor = db.cursor()
    row_id = request.form['row_id']
    # Execute a query to retrieve the rowid
    cursor.execute("SELECT rowid FROM snippets WHERE rowid = ?", (rowid,))

    # Fetch the result
    result = cursor.fetchone()

    # Close the database connection
    db.close()

    # Check if a rowid was found
    if result:
        rowid = result[0]
    else:
        # Handle the case when no rowid is found
        rowid = None

    return rowid


@app.route('/indexA')
def indexA():
    image_dir = 'static/images'
    image_files = [f for f in os.listdir(image_dir) if f.endswith('.jpg')]
    random_image_file = random.choice(image_files)
    app.logger.info(f"Random image file selected: &#123;random_image_file}")
    return render_template('indexA.html', random_image_file=random_image_file)


@app.route('/index_FLASK')
def index_FLASK():
    image_dir = 'static/images'
    image_files = [f for f in os.listdir(image_dir) if f.endswith('.jpg')]
    random_image_file = random.choice(image_files)
    app.logger.info(f"Random image file selected: &#123;random_image_file}")

    return render_template('index_FLASK.html')


# Configuration
app.config['DATABASE'] = 'code.db'


def get_db():
    db = getattr(g, '_database', None)
    if db is None:
        db = g._database = sqlite3.connect("code.db")
    return db


@app.teardown_appcontext
def close_connection(exception):
    db = getattr(g, '_database', None)
    if db is not None:
        db.close()


@app.before_first_request
def create_table():
    db = get_db()
    cursor = db.cursor()

    cursor.execute('''
        CREATE TABLE IF NOT EXISTS products (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            name TEXT NOT NULL,
            description TEXT,
            price REAL
        )
    ''')

    db.commit()


@app.teardown_appcontext
def close_connection(exception):
    db = getattr(app, '_database', None)
    if db is not None:
        db.close()


@app.route('/indexD')
def indexD():
    return redirect('/products')


@app.route('/products', methods=['GET', 'POST'])
def products():
    if request.method == 'POST':
        name = request.form['name']
        description = request.form['description']
        price = request.form['price']

        db = get_db()
        cursor = db.cursor()
        cursor.execute("INSERT INTO products (name, description, price) VALUES (?, ?, ?)",
                       (name, description, price))
        db.commit()

    db = get_db()
    cursor = db.cursor()
    cursor.execute("SELECT * FROM products")
    products = cursor.fetchall()

    return render_template('products.html', products=products)


@app.route('/edit/&lt;int:product_id&gt;', methods=['GET', 'POST'])
def edit_product(product_id):
    if request.method == 'POST':
        name = request.form['name']
        description = request.form['description']
        price = request.form['price']

        db = get_db()
        cursor = db.cursor()
        cursor.execute("UPDATE products SET name=?, description=?, price=? WHERE id=?",
                       (name, description, price, product_id))
        db.commit()

        return redirect('/products')

    db = get_db()
    cursor = db.cursor()
    cursor.execute("SELECT * FROM products WHERE id=?", (product_id,))
    product = cursor.fetchone()

    return render_template('edit_product.html', product=product)


@app.route('/delete/&lt;int:product_id&gt;', methods=['POST'])
def delete_product(product_id):
    db = get_db()
    cursor = db.cursor()
    cursor.execute("DELETE FROM products WHERE id=?", (product_id,))
    db.commit()

    return redirect('/products')
# Function to create the database and table
    
@app.route('/access_database')
def access_database():
    db_path = os.path.join(os.path.dirname(__file__), 'code.db')
    conn = sqlite3.connect(db_path)
    cursor = conn.cursor()
    cursor.execute('SELECT * FROM snippets')
    code = cursor.fetchall()
    conn.close()
    return render_template('database.html', code=code)
# Function to create the database and table


def create_databaseD():
    conn = sqlite3.connect('code.db')
    cursor = conn.cursor()
    # cursor.execute("CREATE TABLE snippets (description TEXT, code TEXT, keywords TEXT)")
    cursor.execute('''
        CREATE TABLE IF NOT EXISTS snippets (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            description TEXT NOT NULL,
            code TEXT,
            keywords TEXT
        )
    ''')
    conn.commit()
    conn.close()
# Route to display all code


@app.route('/code', methods=['GET'])
def display_code():
    conn = sqlite3.connect('code.db')
    cursor = conn.cursor()
    cursor.execute('SELECT * FROM snippets')
    code = cursor.fetchall()
    conn.close()

    # Define the HTML code for the form
    form_code = """
    &lt;h1&gt;Add New code&lt;/h1&gt;
    &lt;form action="/code" method="post"&gt;
        &lt;label for="description"&gt;Description:&lt;/label&gt;
        &lt;textarea type="description" name="description" rows="8" cols="90&#37;"&gt;&lt;/textarea&gt;&lt;br /&gt;
        &lt;label for="code"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Code:&lt;/label&gt;
        &lt;textarea type="text" name="code" rows="8" cols="90&#37;"&gt;&lt;/textarea&gt;&lt;br&gt;
        &lt;label for="keywords"&gt;Keywords:&lt;/label&gt;
        &lt;input style="width:53&#37;;height: 25px;" type="keywords" name="keywords"&gt;&lt;br&gt;
        &lt;input type="submit" value="Add code"&gt;
    &lt;/form&gt;
    """

    return render_template('code.html', code=code, form_code=form_code)
# Route to add a new code


@app.route('/code', methods=['POST'])
def add_code():
    description = request.form['description']
    code = request.form['code']
    keywords = request.form['keywords']

    conn = sqlite3.connect('code.db')
    cursor = conn.cursor()
    cursor.execute('INSERT INTO snippets (description, code, keywords) VALUES (?, ?, ?)',
                   (description, code, keywords))
    conn.commit()
    conn.close()
    return redirect(url_for('display_code'))
# Route to edit a code


@app.route('/edit_code/&lt;int:code_id&gt;', methods=['GET', 'POST'])
def edit_code(code_id):
    conn = sqlite3.connect('code.db')
    cursor = conn.cursor()

    if request.method == 'POST':
        description = request.form['description']
        code = request.form['code']
        keywords = request.form['keywords']

        cursor.execute('UPDATE snippets SET description=?, code=?, keywords=? WHERE id=?',
                       (description, code, keywords, code_id))
        conn.commit()
        conn.close()
        return redirect(url_for('display_code'))

    cursor.execute('SELECT * FROM snippets WHERE id = ?', (code_id,))
    code = cursor.fetchone()
    conn.close()
    return render_template('edit_code.html', code=code)
# Route to delete a code


@app.route('/delete_code/&lt;int:code_id&gt;', methods=['POST'])
def delete_code(code_id):
    conn = sqlite3.connect('code.db')
    cursor = conn.cursor()
    cursor.execute('DELETE FROM snippets WHERE id = ?', (code_id,))
    conn.commit()
    conn.close()
    return redirect(url_for('display_code'))


@app.route('/indexE')
def indexE():
    # Get a list of directories within static/images
    image_directories = os.listdir(os.path.join(app.static_folder, 'images'))

    # Create a dropdown menu with the list of directories
    dropdown_menu = ""
    for directory in image_directories:
        dropdown_menu += f'&lt;option value="&#123;directory}"&gt;&#123;directory}&lt;/option&gt;'

    return f"""
    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;body&gt;
        &lt;h2&gt;Upload a file&lt;/h2&gt;
        &lt;form action="/uploadN" method="post" enctype="multipart/form-data"&gt;
            &lt;select name="directory"&gt;
                &#123;dropdown_menu}
            &lt;/select&gt;
            &lt;input type="file" name="file"&gt;
            &lt;input type="submit" value="Upload"&gt;
        &lt;/form&gt;
    &lt;/body&gt;
    &lt;/html&gt;
    """


@app.route('/uploadN', methods=['POST'])
def upload_fileN():
    # Check if a file was submitted in the request
    if 'file' not in request.files:
        return redirect(url_for('indexD'))

    file = request.files['file']

    # Check if the file is not empty
    if file.filename == '':
        return redirect(url_for('indexE'))

    # Save the file to the desired directory
    save_path = os.path.join('static', 'temp_images', file.filename)
    file.save(save_path)

    return f'The file &#123;file.filename} has been uploaded successfully!'


def FilenameByTime(directory):
    timestr = time.strftime("&#37;Y&#37;m&#37;d-&#37;H&#37;M&#37;S")
    filename = directory + "/" + timestr + "_.png"
    return filename


def change_extension(orig_file, new_extension):
    p = change_ext(orig_file)
    new_name = p.rename(p.with_suffix(new_extension))
    return new_name


def auto_canny(image, sigma=0.33):
    # compute the median of the single channel pixel intensities
    v = np.median(image)
    # apply automatic Canny edge detection using the computed median
    lower = int(max(0, (1.0 - sigma) * v))
    upper = int(min(255, (1.0 + sigma) * v))
    edged = cv2.Canny(image, lower, upper)
    # return the edged image
    return edged
# image = cv2.imread('mahotastest/orig-color.png')


def change_extension(orig_file, new_extension):
    p = change_ext(orig_file)
    new_name = p.rename(p.with_suffix(new_extension))
    return new_name


def outlineJ(filename1, outfile_jpg, sigma=0.33):
    """
    USE:
    filename1 = '/home/jack/Desktop/Imagedata/0-original-images/07082orig.jpg' 
    outfile_jpg = '/home/jack/Desktop/dockercommands/images/useresult.png'
    outlineJ(filename1,outfile_jpg)
    """
    image = cv2.imread(filename1)
    edged = auto_canny(image, sigma=0.33)
    inverted = cv2.bitwise_not(edged)
    cv2.imwrite("static/outlines/temp2.png", inverted)
    cv2.imwrite(FilenameByTime("static/outlines/"), inverted)
    # Open Front Image
    # frontimage = Image.open('mahotastest/inverted-bitwise-note3_6.png').convert("1")
    frontimage = Image.open('static/outlines/temp2.png').convert("1")
    frontImage = frontimage.convert("RGBA")
    datas = frontImage.getdata()
    newData = []
    for item in datas:
        if item[0] == 255 and item[1] == 255 and item[2] == 255:
            newData.append((255, 255, 255, 0))
        else:
            newData.append(item)

    frontImage.putdata(newData)
    # Open Background Image
    background = Image.open(filename1)
    # Calculate width to be at the center
    width = (frontimage.width - frontimage.width) // 2
    # Calculate height to be at the center
    height = (frontimage.height - frontimage.height) // 2
    # Paste the frontImage at (width, height)
    background.paste(frontImage, (width, height), frontImage)
    # Save this image
    background.save(outfile_jpg)
    savefile = FilenameByTime("static/outlines/")
    background.save(savefile)
    # background = background.convert("RGB")
    return background


def outlineP(filename1, outfile_png):
    """
    USE:
    filename1 = '/home/jack/Desktop/Imagedata/0-original-images/07082orig.jpg'
    outfile_jpg = '/home/jack/Desktop/dockercommands/images/useresult.png'
    outlineP(filename1,outfile_png)
    """
    image = cv2.imread(filename1)
    edged = auto_canny(image, sigma=0.33)
    inverted = cv2.bitwise_not(edged)
    cv2.imwrite("static/outlines/temp2.png", inverted)
    cv2.imwrite(FilenameByTime("static/outlines/"), inverted)
    # Open Front Image
    # frontimage = Image.open('mahotastest/inverted-bitwise-note3_6.png').convert("1")
    frontimage = Image.open('static/outlines/temp2.png').convert("1")
    frontImage = frontimage.convert("RGBA")
    datas = frontImage.getdata()
    newData = []
    for item in datas:
        if item[0] == 255 and item[1] == 255 and item[2] == 255:
            newData.append((255, 255, 255, 0))
        else:
            newData.append(item)

    frontImage.putdata(newData)
    # Open Background Image
    background = Image.open(filename1)
    # Calculate width to be at the center
    width = (frontimage.width - frontimage.width) // 2
    # Calculate height to be at the center
    height = (frontimage.height - frontimage.height) // 2
    # Paste the frontImage at (width, height)
    background.paste(frontImage, (width, height), frontImage)
    # Save this image
    background.save(outfile_png, format="png")
    savefile = FilenameByTime("static/outlines/")
    background.save(savefile, format="png")
    # background = background.convert("RGB")
    return background


@app.route('/outline_j', methods=['POST'])
def outline_j():
    if request.method == 'POST':
        # Get the uploaded image file from the form data
        file = request.files['file']

        # Save the uploaded file to a temporary location

        temp_path = 'static/outlines/temp_image.jpg'
        file.save(temp_path)

        # Process the image using outlineJ function
        output_path = 'static/outlines/outlined_image_j.jpg'
        outlineJ(temp_path, output_path)
        output_path2 = "static/outlines/temp2.png"
        # Return the path to the processed image to display it on a page
        return render_template('outlined_image.html', image_orig=temp_path, image_path=output_path, image_path2=output_path2)


@app.route('/outline_p', methods=['POST'])
def outline_p():
    if request.method == 'POST':
        # Get the uploaded image file from the form data
        file = request.files['file']

        # Save the uploaded file to a temporary location
        temp_path = 'static/temp_image.jpg'
        image_orig = temp_path
        file.save(temp_path)

        # Process the image using outlineP function
        output_path = 'static/outlines/outlined_image_p.png'
        outlineP(temp_path, output_path)
        output_path2 = "static/outlines/temp2.png"
        # Return the path to the processed image to display it on a page
        return render_template('outlined_image.html', image_orig=temp_path, image_path=output_path, image_path2=output_path2)


def zoom_effect(bg_file, fg_file):
    bg = Image.open(bg_file).convert('RGBA')
    SIZE = bg.size
    bg = bg.resize((SIZE), Image.BICUBIC)
    fg = Image.open(fg_file).convert('RGBA')
    fg = fg.resize((SIZE), Image.BICUBIC)
    fg_copy = fg.copy()
    fg_copy = fg_copy.resize((int(fg_copy.width), int(fg_copy.height)))
    result_images = []
    for i in range(200):
        size = (int(fg_copy.width * (i + 1) / 200),
                int(fg_copy.height * (i + 1) / 200))
        fg_copy_resized = fg_copy.resize(size)
        fg_copy_resized.putalpha(int((i + 1) * 255 / 200))
        fg_copy_resized = fg_copy_resized.convert('RGBA')
        fg_copy_resized.putalpha(int((i + 1) * 255 / 200))
        result = bg.copy()
        x = int((bg.width - fg_copy_resized.width) / 2)
        y = int((bg.height - fg_copy_resized.height) / 2)
        result.alpha_composite(fg_copy_resized, (x, y))
        # result.save("gifs/_"+str(i)+".png")
        result_images.append(result)

    return result_images  # Move the return statement outside the for loop


def create_mp4_from_images(images_list, output_file, fps):
    # Convert PIL Image objects to NumPy arrays
    image_arrays = [np.array(image) for image in images_list]

    # Create the video clip from the NumPy arrays
    clip = ImageSequenceClip(image_arrays, fps=fps)

    # Write the video to the output file
    clip.write_videofile(output_file, codec="libx264", fps=fps)


@app.route('/upload_form')
def upload_form():
    return render_template('upload_form.html')


@app.route('/process_imagez', methods=['POST', 'GET'])
def process_imagez():
    if 'bg_image' not in request.files or 'fg_image' not in request.files:
        return redirect(url_for('upload_form'))

    bg_image = request.files['bg_image']
    fg_image = request.files['fg_image']

    if bg_image.filename == '' or fg_image.filename == '':
        return redirect(url_for('upload_form'))

    bg_filename = 'background.png'
    fg_filename = 'foreground.png'

    bg_image.save(bg_filename)
    fg_image.save(fg_filename)

    bg_file_path = os.path.abspath(bg_filename)
    fg_file_path = os.path.abspath(fg_filename)

    images_list = zoom_effect(bg_file_path, fg_file_path)

    output_mp4_file = 'static/overlay_zooms/imagez_video.mp4'
    frames_per_second = 30
    create_mp4_from_images(images_list, output_mp4_file, frames_per_second)

    # Clean up temporary files
    # os.remove(bg_filename)
    # os.remove(fg_filename)
    file_bytime = time.strftime("&#37;Y&#37;m&#37;d-&#37;H&#37;M&#37;S") + ".mp4"

    shutil.copy('static/overlay_zooms/imagez_video.mp4',
                'static/overlay_zooms/' + file_bytime)
    video_url = url_for('static', filename=output_mp4_file)
    return render_template('upload.html', video_url=video_url)


app.config['DATABASE'] = 'code.db'

# Set up logger
# logger.basicConfig(level=logger.DEBUG)
# logger = logger.getLogger(__name__)


def get_db():
    db = getattr(g, '_database', None)
    if db is None:
        db = g._database = sqlite3.connect(app.config['DATABASE'])
    return db


@app.route('/indexdb')
def indexdb():
    logger.debug("Accessing indexdb route")
    return render_template('indexdb.html')


@app.route('/select_by_id_form', methods=['POST', 'GET'])
def select_by_id_form():
    logger.debug("Accessing select_by_id_form route")
    return render_template('select_by_id_form.html')


@app.route('/search_by_rowid', methods=['GET', 'POST'])
def search_by_rowid():
    logger.debug("Accessing search_by_rowid route")
    return render_template('search_by_rowid.html')

# ...
# ...
# ...
# Function to get a list of image files from the selected directory


def get_image_list(selected_directory):
    image_extensions = ['.jpg', '.jpeg', '.png', '.gif']
    image_list = [f for f in os.listdir(selected_directory) if os.path.isfile(
        os.path.join(selected_directory, f)) and f.lower().endswith(tuple(image_extensions))]
    print(image_list)
    return image_list


@app.route('/Index', methods=['GET', 'POST'])
def Index():
    if request.method == 'POST':
        selected_directory = request.form['selected_directory']
        image_list = get_image_list(selected_directory)
        images = [os.path.join(selected_directory, image)
                  for image in image_list]

        clips = [ImageClip(m).set_duration(0.5) for m in images]
        concat_clip = concatenate_videoclips(clips, method="compose")
        uid = str(uuid.uuid4())  # Generate a unique ID using uuid
        mp4_file = os.path.join("static", "videos", f"&#123;uid}.mp4")
        concat_clip.write_videofile(mp4_file, fps=24)
        return render_template('Index.html', video=mp4_file)
    else:
        directory_list = glob.glob("static/images/*/", recursive=True)
        return render_template('Index.html', directory_list=directory_list)
# ...
# ...

# ...


@app.route('/edit_data_page', methods=['GET', 'POST'])
@app.route('/edit_data_page/&lt;int:rowid&gt;', methods=['GET', 'POST'])
def edit_data_page(rowid=None):
    db = get_db()
    cursor = db.cursor()

    if request.method == 'POST':
        description = request.form['description']
        code = request.form['code']
        keywords = request.form['keywords']

        if rowid is not None:
            # Update the data in the database for the given rowid
            cursor.execute("UPDATE snippets SET description = ?, code = ?, keywords = ? WHERE rowid = ?",
                           (description, code, keywords, rowid))
        else:
            # Insert the data into the database as a new row
            cursor.execute("INSERT INTO snippets (description, code, keywords) VALUES (?, ?, ?)",
                           (description, code, keywords))

        db.commit()

        # Close the database connection
        cursor.close()
        db.close()

        return redirect(url_for('indexdb'))

    if rowid is not None:
        # If a rowid is provided, retrieve the data from the database
        # based on the provided rowid and render the edit_data.html template
        cursor.execute("SELECT * FROM snippets WHERE rowid = ?", (rowid,))
        data = cursor.fetchone()

        if data is None:
            # If no data is found for the given rowid, return an error message
            return "Error: Data not found for the provided Row ID."

        # Convert the fetched data to a dictionary for easier access in the template
        data = &#123;
            'rowid': data[0],
            'description': data[1],
            'code': data[2],
            'keywords': data[3]
        }

    else:
        # If no rowid is provided, create an empty data dictionary
        data = &#123;}

    # Close the database connection
    cursor.close()
    db.close()

    return render_template('edit_data.html', data=data)
# ...


@app.route('/get_rowid_form', methods=['GET', 'POST'])
def get_rowid_form():
    if request.method == 'POST':
        rowid = request.form['rowid']
        return redirect(url_for('edit_data_page', rowid=rowid))
    return render_template('get_rowid_form.html')

# ...


@app.route('/search_database', methods=['POST', 'GET'])
def search_database():
    logger.debug("Accessing search_database route")
    if request.method == 'POST':
        search_term = request.form['search_term']
        search_area = request.form['search_area']
    else:
        # For GET requests, get the search_term and search_area from the query string
        search_term = request.args.get('search_term')
        search_area = request.args.get('search_area')

    if not search_term or not search_area:
        logger.debug(
            "Redirecting to indexdb due to missing search_term or search_area")
        # Redirect to the main index page if search_term or search_area is missing
        return redirect('/indexdb')

    db = get_db()
    cursor = db.cursor()

    if search_area == 'rowid':
        cursor.execute(
            "SELECT rowid, * FROM snippets WHERE rowid = ?", (search_term,))
    elif search_area == 'description':
        cursor.execute(
            "SELECT rowid, * FROM snippets WHERE description LIKE ?", ('&#37;' + search_term + '&#37;',))
    elif search_area == 'code':
        cursor.execute(
            "SELECT rowid, * FROM snippets WHERE code LIKE ?", ('&#37;' + search_term + '&#37;',))
    elif search_area == 'keywords':
        cursor.execute(
            "SELECT rowid, * FROM snippets WHERE keywords LIKE ?", ('&#37;' + search_term + '&#37;',))
    else:
        logger.debug("Redirecting to indexdb due to invalid search area")
        # Redirect to the main index page if an invalid search area is provided
        return redirect('/indexdb')

    results = cursor.fetchall()
    logger.debug("Rendering db_results.html template with search results")
    return render_template('db_results.html', results=results)


@app.route('/insert_data', methods=['POST', 'GET'])
def insert_data():
    logger.debug("Accessing insert_data route")
    if request.method == 'POST':
        description = request.form['description']
        code = request.form['code']
        keywords = request.form['keywords']

        # Assuming you have the database connection and cursor defined
        db = get_db()
        cursor = db.cursor()

        cursor.execute("INSERT INTO snippets (description, code, keywords) VALUES (?, ?, ?)",
                       (description, code, keywords))
        db.commit()

        # Close the database connection
        cursor.close()
        db.close()

        logger.debug("Redirecting to indexdb after inserting data")
        return redirect(url_for('indexdb'))

    # If the request method is not POST (e.g., GET), render the insert_data.html template
    logger.debug("Rendering insert_data.html template")
    return render_template('insert_data.html')


@app.route('/select_by_id', methods=['POST', 'GET'])
def handle_select_by_id():
    logger.debug("Accessing select_by_id route")
    if request.method == 'POST':
        row_id = request.form['search_term']
    else:
        row_id = request.args.get('search_term')

    db = get_db()
    cursor = db.cursor()

    cursor.execute("SELECT * FROM snippets WHERE rowid = ?", (row_id,))
    data = cursor.fetchone()

    cursor.close()
    db.close()

    if data is not None:
        id_value = data[0]
        description = data[1]
        code = data[2]
        keywords = data[3]

        logger.debug("Rendering display_data.html template with selected data")
        return render_template('display_data.html', id_value=id_value, description=description, code=code, keywords=keywords)
    else:
        logger.debug("Rendering display_data.html template with no data found")
        return render_template('display_data.html', id_value=row_id, description="", code="", keywords="")
def extract_code_blocks(file_path):
    with open(file_path) as file:
        content = file.read()
    return content.split("--Code Start:")[1:]

def format_datetime(datetime_str):
    return datetime_str.replace("_", " ")

@app.route('/enter_code', methods=['GET', 'POST'])
def enter_code():
    formatted_datetime = ""  # Initialize the variable
    if request.method == 'POST':
        code_block = request.form['code_block']
        formatted_datetime = datetime.datetime.now().strftime("&#37;a_&#37;d_&#37;b_&#37;Y &#37;H:&#37;M:&#37;S")
        with open('codeshints.txt', 'a') as file:
            file.write(f"--Code Start:\n&#123;formatted_datetime}\n&#123;code_block}\n--Code End:\n\n")
        # Log code entry
        logger.debug('New code entered: &#37;s', code_block)
    return render_template('enter_data.html', formatted_datetime=formatted_datetime)

@app.route('/search_code', methods=['GET', 'POST'])
def search_code():
    if request.method == 'POST':
        keyword = request.form['keyword']
        code_blocks = extract_code_blocks('codeshints.txt')
        filtered_blocks = [block for block in code_blocks if keyword in block]
        formatted_datetime_blocks = []
        
        for block in filtered_blocks:
            match = re.search(r"\w+_\d+_\w+_\d+_\d+:\d+:\d+", block)
            if match:
                formatted_datetime = format_datetime(match.group(0))
            else:
                formatted_datetime = "Unknown datetime format"
            
            formatted_datetime_blocks.append(
                &#123;"datetime": formatted_datetime, "code_block": block}
            )
            
        # Log search activity
        logger.debug('Keyword searched: &#37;s', keyword)
        return render_template('search_results.html', keyword=keyword, code_blocks=formatted_datetime_blocks)
    
    return render_template('search_data.html')



@app.route('/tube_index')
def tube_index():
    return render_template('tube_index.html')

@app.route('/data_page')
def data_page():
    return render_template('data_page.html')    


@app.route('/capture_overlay_verify')
def capture_overlay_verify():
    logger.info('Capture process started')
    logger.info('POST request received')

    datename = subprocess.run(
        ["date", "+&#37;Y-&#37;m-&#37;d_&#37;H-&#37;M-&#37;S"], capture_output=True, text=True).stdout.strip()
    capture_filename = f"&#123;datename}.mp4"
    # Create the file path using os.path.join()
    base_folder = "static"
    subfolder = "assets"
    original_filename = os.path.join(
        app.root_path, base_folder, subfolder, f"overlaid_&#123;capture_filename}")
    overlayed_filename = os.path.join(
        app.root_path, base_folder, subfolder, f"overlaid_&#123;capture_filename}")
    verification_filename = os.path.join(
        app.root_path, base_folder, subfolder, f"verification_&#123;capture_filename}")
    logger.info(f'File path original_filename created: &#123;original_filename}')
    logger.info(f'File path overlayed_filename created: &#123;overlayed_filename}')
    logger.info(f' verification_filename created: &#123;verification_filename}')
    sleep(5)
    # Capture screen
    capture_command = [
        "ffmpeg", "-ss", "2", "-f", "x11grab", "-framerate", "24",
        "-video_size", "690x445", "-i", ":0.0+130,250", "-f", "alsa",
        "-i", "plughw:0,0", "-f", "pulse", "-i", "default",
        "-filter_complex", "[1:a]volume=0.1,apad[headset_audio];[2:a]volume=2.0,apad[system_audio];[headset_audio][system_audio]amix=inputs=2[a]",
        "-map", "0:v", "-map", "[a]", "-c:v", "libx264", "-r", "24",
                "-g", "48", "-c:a", "aac", "-b:a", "128k", "-t", "58", "-y", original_filename
    ]
    subprocess.run(capture_command)
    logger.info('Screen captured', capture_command)
    # Overlay videos
    overlay_command = [
        "ffmpeg", "-i", "background.mp4", "-i", original_filename, "-filter_complex",
        f"[1:v]scale=460:300[ovrl];[0:v][ovrl]overlay=W-w-25:H-h-400[out]",
        "-map", "[out]", "-map", "1:a", "-c:v", "libx264", "-crf", "18", "-c:a", "aac",
                "-strict", "-2", "-y", "-t", "58", overlayed_filename
    ]
    subprocess.run(overlay_command)
    logger.info('Videos overlaid', overlay_command)

    # Verify sound
    verification_command = [
        "ffmpeg", "-i", "background.mp4", "-i", overlayed_filename, "-filter_complex",
        f"[1:v]scale=460:300[ovrl];[0:v][ovrl]overlay=W-w-25:H-h-400[out]",
        "-map", "[out]", "-map", "1:a", "-c:v", "libx264", "-crf", "18", "-c:a", "aac",
                "-strict", "-2", "-y", "-t", "58", verification_filename
    ]
    subprocess.run(verification_command)
    logger.info('Sound verified', verification_command)

    logger.info('Capture process completed', verification_filename)
    return render_template('view_capture.html', video_filename=verification_filename)

# ...


@app.route('/create_text', methods=['GET', 'POST'])
def create_text():
    if request.method == 'POST':
        text = request.form['text']
        image = Image.new('RGB', (512, 512), color='beige')
        draw = ImageDraw.Draw(image)

        # Load the custom font and set the size
        font_path = '/home/jack/fonts/OpenSans-Bold.ttf'
        font_size = 50
        font = ImageFont.truetype(font_path, font_size)

        lines = text.split('\n')[:5]

        y = 10
        for line in lines:
            line = line.rstrip()  # Strip the newline character
            # Calculate the width and height of the text
            text_width, text_height = draw.textsize(line, font=font)

            # Draw the text
            draw.text(((512 - text_width) // 2, y),
                      line, fill='black', font=font)
            y += text_height + 5  # Move down for the next line

        output_path = os.path.join(
            app.root_path, 'static', 'assets', '512x512_text.jpg')
        image.save(output_path)
        # return send_from_directory('static/assets', '512x512_text.jpg', as_attachment=True)
        return render_template('view_textimage.html', image_filename='assets/512x512_text.jpg')
    return render_template('create_text.html')


@app.route('/view_log')
def view_log():
    with open('Logs/app.log', 'r') as log_file:
        log_content = log_file.read()
    return render_template('log_viewer.html', log_content=log_content)


@app.route('/self_check')
def self_check():
    try:
        if os.path.exists('Logs/flake.info'):
            timestamp = datetime.datetime.now().strftime("&#37;Y&#37;m&#37;d&#37;H&#37;M&#37;S")
            new_filename = f'Logs/&#123;timestamp}.info'
            shutil.move('Logs/flake.info', new_filename)
            
        result = subprocess.run(['flake8', '-v', 'MemMakerWdb'],
                                stdout=subprocess.PIPE, stderr=subprocess.PIPE, text=True)
        
        with open('Logs/flake.info', 'w') as flake_file:
            flake_file.write(result.stdout)
        
        return redirect(url_for('view_flake8'))
    except Exception as e:
        return f"Self-check failed. Error: &#123;e}"

@app.route('/view_flake8')
def view_flake8():
    with open('Logs/flake.info', 'r') as flake_file:
        flake_content = flake_file.read()
    return render_template('flake8_viewer.html', flake_content=flake_content)
def get_image_directories():
    dirs = os.listdir(os.path.join('static', 'images'))
    DIR = sorted(dirs)
    return DIR

def feather_image(input_path):
    try:
        logger.info("Feathering image: &#37;s", input_path)
        
        # Load the image
        giger = cv2.imread(input_path)
        l_row, l_col, nb_channel = giger.shape
        rows, cols = np.mgrid[:l_row, :l_col]
        radius = np.sqrt((rows - l_row/2)**2 + (cols - l_col/2)**2)
        alpha_channel = np.zeros((l_row, l_col))
        
        # Calculate alpha channel values
        r_min, r_max = 1./3 * radius.max(), 0.6 * radius.max()
        alpha_channel[radius &lt; r_min] = 1
        alpha_channel[radius &gt; r_max] = 0
        gradient_zone = np.logical_and(radius &gt;= r_min, radius &lt;= r_max)
        alpha_channel[gradient_zone] = (r_max - radius[gradient_zone]) / (r_max - r_min)
        alpha_channel *= 255
        
        # Create feathered image
        feathered = np.empty((l_row, l_col, nb_channel + 1), dtype=np.uint8)
        feathered[..., :3] = giger[:]
        feathered[..., -1] = alpha_channel[:]
        
        # Save the feathered image
        timestamp = datetime.datetime.now().strftime('&#37;Y&#37;m&#37;d&#37;H&#37;M&#37;S')
        output_path = os.path.join('static', 'images', 'feathers', f'&#123;timestamp}.png')
        plt.imsave(output_path, feathered, format="png")
        logger.info("Feathered image saved at: &#37;s", output_path)

        return output_path
    except Exception as e:
        logger.error("An error occurred during feathering: &#37;s", str(e))
        return None
@app.route('/feather_files', methods=['GET', 'POST'])
def feather_files():
    if request.method == 'POST':
        selected_directories = request.form.getlist('directories')  # Use 'directories' instead of 'directory'
        selected_directories = sorted(selected_directories)
        if selected_directories:
            images = os.listdir(os.path.join('static', 'images', selected_directories[0]))
            return render_template('feather_files.html', directories=get_image_directories(), selected_directory=selected_directories[0], images=images)
        
        selected_image = request.form.get('image')
        if selected_image:
            selected_directory = request.form.get('selected_directory')  # Add this line to retrieve selected_directory
            image_path = os.path.join('static', 'images', selected_directory, selected_image)
            feathered_image_path = feather_image(image_path)
            return render_template('feather_files.html', directories=get_image_directories(), selected_directory=selected_directory, images=os.listdir(os.path.join('static', 'images', selected_directory)), feathered_image_path=feathered_image_path)
    
    return render_template('feather_files.html', directories=get_image_directories())
@app.route('/word_cloud')
def word_cloud():
    code_blocks = extract_code_blocks('codeshints.txt')
    extracted_lines = []

    for block in code_blocks:
        lines = block.split("\n")[:3]  # Extract the first three lines
        extracted_lines.append("\n".join(lines))

    return render_template('word_cloud.html', extracted_lines=extracted_lines)
# ------------
static_dir = 'static'
text_dir = os.path.join(static_dir, 'text')
original_text_dir = os.path.join(text_dir, 'original')
os.makedirs(original_text_dir, exist_ok=True)

def load_original_text_file(filename):
    original_file_path = os.path.join(text_dir, filename)
    with open(original_file_path, 'r') as file:
        return file.read()

def save_original_text_file(filename, content):
    now = datetime.datetime.now().strftime("&#37;Y&#37;m&#37;d_&#37;H&#37;M&#37;S")
    new_filename = f"&#123;filename}_&#123;now}.txt"
    new_file_path = os.path.join(original_text_dir, new_filename)
    with open(new_file_path, 'w') as file:
        file.write(content)

def edit_and_save_text_file(filename, content):
    save_original_text_file(filename, content)
    edited_file_path = os.path.join(text_dir, filename)
    with open(edited_file_path, 'w') as file:
        file.write(content)

@app.route('/edit_text')
def edit_text():
    filenames = [f for f in os.listdir(text_dir) if f.endswith('.txt')]
    return render_template('edit_text.html', filenames=filenames)

@app.route('/edit_text_page')
def edit_text_page():
    selected_filename = request.args.get('filename')
    original_content = load_original_text_file(selected_filename)
    return render_template('edit_text_page.html', selected_filename=selected_filename, original_content=original_content)

@app.route('/edit_text_save', methods=['POST'])
def edit_text_save():
    edited_content = request.form['edited_content']
    selected_filename = request.form['filename']
    edit_and_save_text_file(selected_filename, edited_content)
    return redirect(url_for('edit_text'))

if __name__ == '__main__':
    create_databaseD()  # Create the database and table before starting the app
    app.run(debug=True, host='0.0.0.0', port=5200)
&lt;/pre&gt;#!/mnt/HDD500/FLASK/flask_venv/bin/python
import subprocess
import logging
from flask import Flask, render_template, send_from_directory, request, redirect, url_for, flash
from flask import jsonify, send_file , Response
import os
from logging.handlers import RotatingFileHandler
import datetime
import glob
from werkzeug.utils import secure_filename
import time
from clean_images import clean_images
import matplotlib.pyplot as plt
import numpy as np
from io import BytesIO
from PIL import Image, ImageDraw, ImageFont
import pygame
import random
from gtts import gTTS
from moviepy.editor import ImageClip, AudioFileClip, CompositeVideoClip, concatenate_videoclips
from io import BytesIO
import base64
import imageio
import shutil
# Define the Flask application
app = Flask(__name__)  

def zip_lists(list1, list2):
    return zip(list1, list2)

app.jinja_env.filters['zip'] = zip_lists

def get_all_mp4_videos():
    mp4_videos = []
    for root, dirs, files in os.walk('static'):
        for file in files:
            if file.endswith('.mp4'):
                mp4_videos.append(os.path.join(root, file))
    return mp4_videos

def generate_thumbnails(mp4_videos, thumbnail_size=120):
    for video in mp4_videos:
        thumbnail_path = os.path.splitext(video)[0] + '.jpg'
        os.system(f'ffmpeg -i "&#123;video}" -ss 00:00:01 -vf scale=&#123;thumbnail_size}:-1 -vframes 1 -y "&#123;thumbnail_path}"')

@app.route('/thumbnails')
def thumbnails():
    mp4_videos = get_all_mp4_videos()
    generate_thumbnails(mp4_videos)
    thumbnail_paths = [os.path.splitext(video)[0] + '.jpg' for video in mp4_videos]
    video_paths = [os.path.splitext(video)[0] + '.mp4' for video in mp4_videos]
    return render_template('thumbnails.html', thumbnail_paths=thumbnail_paths, video_paths=video_paths)

@app.route('/')
def index():
    image_dir = 'static/images'
    image_files = [f for f in os.listdir(image_dir) if f.endswith('.jpg')]
    random_image_file = random.choice(image_files)
    return render_template('index.html', random_image_file=random_image_file)


app.secret_key = os.urandom(24)

app.config['UPLOAD_FOLDER'] = 'static/images/uploads'
app.config['RESULTS_FOLDER'] = 'static/videos/results'
app.config['THUMBNAILS_FOLDER'] = 'static/images/thumbnails'
#app.config['CHECKPOINT_PATH'] = '/home/jack/Desktop/FlaskApp/Wav2Lip/checkpoints/wav2lip_gan.pth'
#app.config['AUDIO_PATH'] = '/home/jack/Desktop/FlaskApp/Wav2Lip/content/sample_data/input_audio.wav'

# Create a formatter for the log messages
formatter = logging.Formatter('&#37;(asctime)s &#37;(levelname)s: &#37;(message)s [in &#37;(pathname)s:&#37;(lineno)d]')

# Create a file handler to write log messages to a file
handler = RotatingFileHandler('Logs/app.log', maxBytes=10000, backupCount=1)
handler.setLevel(logging.DEBUG)
handler.setFormatter(formatter)
random_image_filez = 'blended.jpg'
app.logger.debug("Random image file: &#37;s" &#37; random_image_filez)

# Add the file handler to the Flask app logger
app.logger.addHandler(handler)
app.logger.debug('Entering index function')

# Define route to display upload form
@app.route('/upload_file', methods=['POST', 'GET'])
def upload_file():
    if request.method == 'POST':
        # Check if file was uploaded
        if 'file' not in request.files:
            app.logger.error('No file was uploaded')
            flash('Error: No file was uploaded')
            return redirect(request.url)

        app.logger.error('request.files[\'file\']')
        file = request.files['file']

        # Check if file was selected
        if file.filename == '':
            app.logger.error('No file was selected')
            flash('Error: No file was selected')
            return redirect(request.url)

        # Define allowed file extensions
        ALLOWED_EXTENSIONS = &#123;'png', 'jpg', 'jpeg', 'gif'}

        # Define function to check file extension
        def allowed_file(filename):
            return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

        # Check if file is allowed
        if not allowed_file(file.filename):
             #app.logger.error(f"File '&#123;file.filename}' is not allowed")
             app.logger.error("File '" + file.filename + "' is not allowed")
             flash("Error: File '" + file.filename + "'close is not allowed")
             return redirect(request.url)

        # Save the file
        try:
            filename = secure_filename(file.filename)
            file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
            app.logger.info(f'File &#123;filename} saved')
        except Exception as e:
            app.logger.error(f'Error saving file: &#123;e}')
            flash('Error: Unable to save file')
            return redirect(request.url)

        # Redirect to the result page
        return redirect(url_for('result', filename=filename))

    # Return the upload form for GET requests
    return render_template('upload_file.html')


@app.route('/result/&lt;filename&gt;')
def result(filename):
    return render_template('result.html', filename=filename)


@app.route('/process_images', methods=['POST', 'GET'])
def process_images():
    if request.method == 'POST':
        # read the images from the request
        img1 = Image.open(request.files['image1'].stream).convert('RGB')
        img2 = Image.open(request.files['image2'].stream).convert('L')
        img3 = Image.open(request.files['image3'].stream).convert('RGB')
    
        # resize the images to have the same shape
        img1 = img1.resize((img2.width, img2.height))
        img3 = img3.resize((img2.width, img2.height))
    
        # convert the mask to binary
        threshold = 127
        mask = Image.eval(img2, lambda px: 255 if px &gt; threshold else 0)
    
        # apply the mask
        img = Image.composite(img1, img3, mask)
    
        # save the image to a file
        output = BytesIO()
        current_datetime = datetime.now()
        str_current_datetime = str(current_datetime)
        file_name = "static/images/"+str_current_datetime+"XXXX.jpg"
        img.save(file_name, format='JPEG')
        img.save(output, format='JPEG')
        output.seek(0)
    
        # encode the image to bytes
        img_bytes = output.getvalue()
    
        # return the image as a response
        return Response(img_bytes, mimetype='image/jpeg')
    return render_template('process_images.html')


@app.route('/blend_pil', methods=['POST', 'GET'])
def blend_pil():
    if request.method == 'POST':
        # Get the uploaded images
        img1 = request.files['img1']
        img2 = request.files['img2']
        img3 = request.files['img3']

        # Open the images using PIL
        img1_pil = Image.open(img1)
        img2_pil = Image.open(img2)
        img3_pil = Image.open(img3)

        # Blend the images
        blended_pil = Image.blend(img1_pil, img2_pil, 1/3)
        blended_pil = Image.blend(blended_pil, img3_pil, 1/3)

        # Return the blended image as a response
        # Since we are not saving it to the server, we can use a BytesIO object to avoid creating a temporary file
        img_io = BytesIO()
        blended_pil.save(img_io, 'JPEG', quality=70)
        current_datetime = datetime.now()
        str_current_datetime = str(current_datetime)
        file_name = "static/images/uploads/blended_pil"+str_current_datetime+"XXXX.jpg"
        blended_pil.save(file_name, format='JPEG')
        img_io.seek(0)
        
        # Generate the HTML for displaying the blended image in the template
        blended_image_data = base64.b64encode(img_io.getvalue()).decode('utf-8')
        blended_image_url = f"data:image/jpeg;base64,&#123;blended_image_data}"
        #blended_image_url = blended_image_url.resize(( blended_image_url.size[0]//2, blended_image_url.size[1]//2), Image.ANTIALIAS) 
        # Pass the URL of the blended image to the template
        return render_template('show_blend_pil.html', blended_image_url=blended_image_url)      
    return render_template('blend_pil.html')
@app.route('/view_thumbs')
def view_thumbs():
    # Define the directory where the images are located
    image_directory = 'static/images/uploads'
    # Get a list of all the image files in the directory
    image_files = [f for f in os.listdir(image_directory) if f.endswith('.jpg') or f.endswith('.png')]
    # Create a list of dictionaries containing the image file name and URL
    image_list = [&#123;'name': f, 'url': f'/images/uploads/&#123;f}'} for f in image_files]
    # Render the template with the list of images
    return render_template('view_thumbs.html', image_list=image_list)



@app.route('/images/uploads/&lt;filename&gt;')
def image(filename):
    # Define the directory where the images are located
    image_directory = '/mnt/HDD500/FLASK/static/images/uploads'
    # Generate the full path to the requested image file
    image_path = os.path.join(image_directory, filename)
    # Determine the file type based on the file extension
    file_extension = os.path.splitext(filename)[1].lower()
    if file_extension == '.jpg':
        content_type = 'image/jpeg'
    elif file_extension == '.png':
        content_type = 'image/png'
    else:
        # If the file type is not recognized, return a 404 error
        print("abort(404)")
    # Return the image file as a response with the appropriate content type
    with open(image_path, 'rb') as f:
        image_data = f.read()
    return Response(image_data, content_type=content_type)

@app.route('/add_border')
def add_border():
    images = [f for f in os.listdir('static/images/uploads/') if os.path.isfile(os.path.join('static/images/uploads/', f))]
    thumbnails = []
    for image in images:
        with Image.open('static/images/uploads/'+image) as img:
            img.thumbnail((200, 200))
            thumbnail_name = 'thumbnail_'+image
            img.save('static/thumbnails/'+thumbnail_name)
            thumbnails.append(thumbnail_name)
    return render_template('add_border.html', images=images, thumbnails=thumbnails)


@app.route('/select_border')
def select_border():
    borders = os.listdir('static/transparent_borders/')
    return render_template('select_border.html', borders=borders)

@app.route('/apply_border', methods=['POST', 'GET'])
def apply_border():
    selected_image = request.form['image']
    selected_border = request.form['border']
    try:
        with Image.open('static/images/uploads/'+selected_image) as img:
            with Image.open('static/transparent_borders/'+selected_border) as border:
                img = img.resize(border.size)
                img.paste(border, (0, 0), border)
                final_image_name = 'final_'+selected_image
                img.save('static/final_images/'+final_image_name)
        return render_template('final_image.html', final_image=final_image_name, message='Border applied successfully.')
    except Exception as e:
        error_message = f'An error occurred: &#123;str(e)}. Please try again.'
        return render_template('apply_border.html', image=selected_image, border=selected_border, error_message=error_message)

@app.route('/select_border_image', methods=['GET'])
def select_border_image():
    try:
        image = request.args.get('image')
        if not image:
            raise ValueError('No image selected.')
        return render_template('select_border.html', image=image, borders=os.listdir('static/transparent_borders/'))
    except Exception as e:
        error_message = f'An error occurred: &#123;str(e)}. Please try again.'
        return render_template('add_border.html', error_message=error_message)

@app.route("/make_animation")
def make_animation():
    # Get a list of all files in the final_images directory
    #image_files = os.listdir("static/final_images/")
    #DIR = "/home/jack/Desktop/HDD500/collections/gypsy_files/"
    #DIR = "/home/jack/Desktop/HDD500/collections/hippy_files/"
    DIR = "/mnt/HDD500/collections/jungle/exotic_lithograph_prints-Playground_AI_files/512x768/"
    image_files = os.listdir(DIR)
    #image_files = os.listdir("/mnt/HDD500/collections/640x640-alien/")
    # Select 20 random files from the list
    selected_files = random.sample(image_files, 30)
    
    # Load each selected file, resize it to 400x600, and save it to a temporary directory
    resized_images = []
    for filename in selected_files:
        with Image.open(DIR + filename) as img:
            img = img.resize((400, 600))
            temp_filename = "static/tmp/" + filename
            img.save(temp_filename)
            resized_images.append(temp_filename)
    
    # Create an animated GIF from the resized images
 
    gif_filename = "static/animated_gifs/animated.gif"
    with imageio.get_writer(gif_filename, mode='I', duration=1) as writer:
        for filename in resized_images:
            image = imageio.imread(filename)
            writer.append_data(image)
    import shutil

    timestr = time.strftime("&#37;Y&#37;m&#37;d-&#37;H&#37;M&#37;S")

  
    src = 'static/animated_gifs/animated.gif'
    dst = 'static/animated_gifs/animated' + timestr + '.gif'
    # 2nd option
    shutil.copy(src, dst) 
    # Return a template that displays the GIF
    return render_template("make_animation.html", gif_filename=gif_filename)



@app.route('/search', methods=['GET', 'POST'])
def search():
    if request.method == 'POST' and 'phrase' in request.form:
        phrase = request.form['phrase']
        with open('chat.txt', 'r') as file:
            lines = file.readlines()
        results = []
        for i, line in enumerate(lines):
            if phrase in line:
                start = max(0, i-5)
                end = min(len(lines), i+6)
                context = lines[start:end]
                for j, context_line in enumerate(context):
                    if phrase in context_line:
                        results.append(f'Line &#123;start+j}: &#123;context_line}')
                    else:
                        results.append(f'Line &#123;start+j}: &#123;context_line}')
        return render_template('results.html', results=results)
    return render_template('search.html')

from datetime import datetime

@app.route('/add_text', methods=['GET', 'POST'])
def add_text():
    if request.method == 'POST':
        text = request.form['text']
        now = datetime.now()
        timestamp = now.strftime("&#37;Y-&#37;m-&#37;d &#37;H:&#37;M:&#37;S")
        text = f'Text Entry: &#123;timestamp} &#123;text}'
        with open('chat.txt', 'a') as file:
            file.write(f'\n&#123;text}')
        return render_template('add_text.html', message='Text added successfully')
    else:
        return render_template('add_text.html')
# Mp3 page with file upload and textarea to enter text
# Route for the text to speech page
@app.route('/text_mp3', methods=['GET', 'POST'])
def text_mp3():
    if request.method == 'POST':
        # Get the text from the textarea
        text = request.form['text']
        # Remove whitespace from the text
        text = text.replace(" ", "")
        # Create a filename based on the first 20 characters of the text
        filename = "static/audio_mp3/" + text[:20] + ".mp3"
        filename = filename.strip()  # remove the newline character
        # Create a gTTS object and save the audio file
        tts = gTTS(text)
        filename = filename.strip() 
        tts.save(filename)
        # Play the mp3 file
        pygame.mixer.init()
        pygame.mixer.music.load(filename)
        pygame.mixer.music.play()
        # Wait for the audio to finish playing
        while pygame.mixer.music.get_busy():
            pygame.time.Clock().tick(10)
        # Stop pygame and exit the program
        pygame.mixer.quit()
        pygame.quit()
        # Return the text and filename to the template
        return render_template('text_mp3.html', text=text, filename=filename)
    else:
        # Render the home page template
        return render_template('text_mp3.html')

@app.route('/select_playmp3', methods=['GET', 'POST'])
def select_playmp3():
    # Get the list of mp3 files in the static/audio_mp3/ directory
    mp3_files = [f for f in os.listdir('static/audio_mp3/') if f.endswith('.mp3')]
    if request.method == 'POST':
        # Get the selected MP3 file from the dropdown list
        mp3_file = request.form['mp3_file']
        # Play the selected mp3 file
        pygame.mixer.init()
        pygame.mixer.music.load('static/audio_mp3/' + mp3_file)
        pygame.mixer.music.play()
        # Wait for the audio to finish playing
        while pygame.mixer.music.get_busy():
            pygame.time.Clock().tick(10)
        # Stop pygame and exit the program
        pygame.mixer.quit()
        pygame.quit()
    # Render the template with the list of mp3 files
    return render_template('select_playmp3.html', mp3_files=mp3_files)

@app.route('/generate_video')
def generate_video():
    # Get the pythonlist of image files in the static/final_images/ directory  
    #image_filenames = random.sample(glob.glob('static/final_images/*.jpg'),20)
    image_filenames = random.sample(glob.glob('static/video_resources/*.jpg'),30)
    print(image_filenames,end="-")
   
    image_clips = []
    for filename in image_filenames:
        # Open the image file and resize it to 512x768
        image = Image.open(filename)
        image = image.resize((512, 768), Image.ANTIALIAS)
        print(image)
        # Convert the PIL Image object to a NumPy array
        image_array = np.array(image)
        # Create an ImageClip object from the resized image and set its duration to 1 second
        image_clip = ImageClip(image_array).set_duration(1)
        
        # Append the image clip to the list
        image_clips.append(image_clip)
    
    # Concatenate all the image clips into a single video clip
    video_clip = concatenate_videoclips(image_clips, method='compose')
    timestr = time.strftime("&#37;Y&#37;m&#37;d-&#37;H&#37;M&#37;S")
    # Set the fps value for the video clip
    video_clip.fps = 24
    # Write the video clip to a file
    video_clip.write_videofile('static/videos/random_images'+timestr+'video.mp4', fps=24)
    
    # Return a message to the client
    return 'Video generated successfully!'
# List of directories to choose from

directories = ['static/images','static/final_videos', 'static/tmp', 'static/BrightColors','static/final_images', 'static/thumbnails']
import shutil
import logging

@app.route('/choose_dir', methods=['GET', 'POST'])
def choose_dir():
    if request.method == 'POST':
        # Get the selected directory from the form data
        #selected_directory = request.form.get('directory')
        selected_directory = request.args.get('directory')
        print('selected_directory:', selected_directory)
        print('request URL:', request.url)

        
        
        
        # Get the list of image files in the selected directory
        image_filenames = random.sample(glob.glob(selected_directory + '/*.jpg'),30)
   
        image_clips = []
        for filename in image_filenames:
            # Open the image file and resize it to 512x768
            image = Image.open(filename)
            image = image.resize((512, 768), Image.ANTIALIAS)
            print(image)
            # Convert the PIL Image object to a NumPy array
            image_array = np.array(image)
            # Create an ImageClip object from the resized image and set its duration to 1 second
            image_clip = ImageClip(image_array).set_duration(1)
        
            # Append the image clip to the list
            image_clips.append(image_clip)
    
        # Concatenate all the image clips into a single video clip
        video_clip = concatenate_videoclips(image_clips, method='compose')
        timestr = time.strftime("&#37;Y&#37;m&#37;d-&#37;H&#37;M&#37;S")
        # Set the fps value for the video clip
        video_clip.fps = 24
        # Write the video clip to a file
        video_file = 'static/videos/random_images'+timestr+'Xvideo.mp4'
        output_p =   'static/videos/random_images_video.mp4'
        video_clip.write_videofile(video_file, fps=24)
        try:
            shutil.copy(video_file, output_p)
        except FileNotFoundError as e:
            logging.error("Error occurred while copying file: &#37;s", str(e))

        # Return a message to the client
        return 'Video generated successfully!'
    
    output_p = 'static/videos/random_images_video.mp4'
    # If the request method is GET, render the form template with the list of directories
    return render_template('choose_dir.html', directories=directories, output_path=output_p)


@app.route('/generate_video2')
def generate_video2():
    # Get the pythonlist of image files in the static/final_images/ directory  
    image_filenames = random.sample(glob.glob('static/final_images/*.jpg'),25)
    #image_filenames = random.sample(glob.glob('static/images/uploads/*.jpg'),30)
    print(image_filenames,end="-")
   
    image_clips = []
    for filename in image_filenames:
        # Open the image file and resize it to 512x768
        image = Image.open(filename)
        image = image.resize((512, 768), Image.ANTIALIAS)
        print(image)
        # Convert the PIL Image object to a NumPy array
        image_array = np.array(image)
        # Create an ImageClip object from the resized image and set its duration to 1 second
        image_clip = ImageClip(image_array).set_duration(1)
        
        # Append the image clip to the list
        image_clips.append(image_clip)
    
    # Concatenate all the image clips into a single video clip
    video_clip = concatenate_videoclips(image_clips, method='compose')
    timestr = time.strftime("&#37;Y&#37;m&#37;d-&#37;H&#37;M&#37;S")
    # Set the fps value for the video clip
    video_clip.fps = 24
    # Write the video clip to a file
    video_path = 'static/videos/random_images'+timestr+'video.mp4'
    video_clip.write_videofile(video_path, fps=24)
    video_clip.write_videofile('static/videos/TEMPvideo.mp4', fps=24)
    
    # Return a message to the client
    #return render_template('generate_video2.html', video_url='/static/videos/TEMPvideo.mp4')
    return render_template('generate_video2.html' ,video_url='/static/videos/TEMPvideo.mp4', video_path=video_path)


@app.route('/square_video/&lt;path:directory&gt;')
def square_video(directory=None):
    app.logger.info('Directory selected: &#37;s', directory)
    if directory is None:
        app.logger.error('Error: no directory specified')
        return "Error: no directory specified"
    
    # Get the list of image files in the selected directory
    image_filenames = glob.glob(os.path.join(directory, '*.jpg'))
    if not image_filenames:
        app.logger.error('Error: no image files found in directory')
        return "Error: no image files found in directory"
    
    # Randomly select 50 image files from the list
    image_filenames = random.sample(image_filenames, 50)
    
    image_clips = []
    for filename in image_filenames:
        # Open the image file and resize it to 640x640
        image = Image.open(filename)
        image = image.resize((640, 640), Image.ANTIALIAS)
        # Convert the PIL Image object to a NumPy array
        image_array = np.array(image)
        
        # Create an ImageClip object from the resized image and set its duration to 1 second
        image_clip = ImageClip(image_array).set_duration(1)
        # Append the image clip to the list
        image_clips.append(image_clip)
    # Concatenate all the image clips into a single video clip
    video_clip = concatenate_videoclips(image_clips, method='compose')
    # Set the fps value for the video clip
    video_clip.fps = 24
    # Write the video clip to a file
    timestr = time.strftime("&#37;Y&#37;m&#37;d-&#37;H&#37;M&#37;S")
    video_filename = 'static/square_vids/'+timestr+'video.mp4'
    video_clip.write_videofile(video_filename, fps=24)
    video_clip.write_videofile("static/temp.mp4", fps=24)
    video_filename = "static/temp.mp4"
    return redirect(url_for('square_video', directory=directory))

@app.route('/image_directories', methods=['GET', 'POST'])
def image_directories():
    image_directories = ['static/Prodia_640x640', 'static/LineArt', 'static/Quantized', 'static/squares', 'static/BrightColors']
    if request.method == 'POST':
        # Rest of the code

        directory = request.form['directory']
        # Check that the directory parameter is not empty
        if directory:
            app.logger.info('Redirecting endpoint with directory: &#37;s', directory)
            # Check that the directory is a valid directory path
            if os.path.isdir(directory):
                # Pass the directory value to the square_video endpoint
                app.logger.info('Redirecting to square_video endpoint with directory: &#37;s', directory)
                return redirect(url_for('square_video', directory=directory))
            else:
                # Render an error template if the directory parameter is not a valid directory path
                app.logger.error('Invalid directory parameter: &#37;s', directory)
                return render_template('error.html', message='Please enter a valid directory path.')
        else:
            # Render an error template if the directory parameter is empty
            app.logger.error('Directory parameter is empty')
            return render_template('error.html', message='Please enter a directory path.')
    else:
        # Pass the list of image directories to the template
        return render_template('image_directories.html', image_directories=image_directories)

@app.route('/title_page', methods=['GET', 'POST'])
def title_page():
    if request.method == 'POST':
        # Get the text input from the user
        text = request.form['text']
        app.logger.debug('XXXXXXXXXXXXX')
        app.logger.info('This is a test message')
        # Create a transparent image with size 800x600
        IMAGE = random.choice(glob.glob("static/LineArt/*.jpg"))
        image = Image.open(IMAGE)
        
        # Create a drawing context on the image
        draw = ImageDraw.Draw(image)
        
        # Define the font and font size for the text
        font = ImageFont.truetype('static/fonts/OpenSansBold.ttf', 50)
        # Split the text by newline characters
        lines = text.split("  ")


        # Calculate the size of each line and get the maximum width
        line_sizes = [draw.textsize(line, font) for line in lines]
        max_line_width = max([size[0] for size in line_sizes])

        # Calculate the total size of the text
        text_width = max_line_width
        text_height = sum([size[1] for size in line_sizes])

        # Calculate the position of the text in the center of the image
        x = (640 - text_width) / 2
        y = (640 - text_height) / 2

        # Calculate the size of the text
        text_width, text_height = draw.textsize(text, font)
        
        # Calculate the position of the text in the center of the image
        x = (640 - text_width) / 2
        y = (640 - text_height) / 2
        
        # Add the text to the image
        draw.text((x, y), text, font=font, fill=(0, 0, 0, 255))
        
        # Save the image to the static folder with a unique filename
        inc = text.replace(" ","")
        #print(inc[:5])
        filename = os.path.join(app.static_folder, 'title_pages', f'&#123;inc}_&#123;hash(text)}.png')
        image.save(filename)
        
        return render_template('title_page.html', filename=filename)
        
    return render_template('title_page.html')

from flask import Flask, render_template, request
import os
from moviepy.editor import VideoFileClip, ImageClip, CompositeVideoClip, clips_array, concatenate_videoclips, TextClip

@app.route('/add_title', methods=['GET', 'POST'])
def add_title():
    # Create the final_videos directory if it does not exist
    final_videos_dir = os.path.join(app.static_folder, 'final_videos')
    if not os.path.exists(final_videos_dir):
        os.makedirs(final_videos_dir)

    if request.method == 'POST':
        app.logger.debug('Entering POST request handler for /add_title')
        # Get the paths of the selected video and title page
        video_path = os.path.join(app.static_folder, 'square_vids', request.form['video'])
        title_page_path = os.path.join(app.static_folder, 'title_pages', request.form['title_page'])
        app.logger.debug(f'video_path: &#123;video_path}')
        app.logger.debug(f'title_page_path: &#123;title_page_path}')

        # Load the video and title page as clips
        video_clip = VideoFileClip(video_path)
        title_page_clip = ImageClip(title_page_path).set_duration(2)

        # Add the title page to the video for the first 2 seconds
        final_clip = concatenate_videoclips([title_page_clip, video_clip.subclip(2)])

        # Save the final video to the final_videos directory
        final_filename = f"&#123;os.path.splitext(request.form['video'])[0]}_&#123;os.path.splitext(request.form['title_page'])[0]}.mp4"
        final_path = os.path.join(final_videos_dir, final_filename)
        app.logger.debug(f'final_path: &#123;final_path}')
        final_clip.write_videofile(final_path)

        # Return a response to the user indicating that the video with title page was created
        message = f"The video with title page was created and saved to &#123;final_path}"
        return render_template('add_title.html', message=message)

    # If the request method is GET, render the add_title.html template
    app.logger.debug('Entering GET request handler for /add_title')
    videos = os.listdir(os.path.join(app.static_folder, 'square_vids'))
    title_pages = os.listdir(os.path.join(app.static_folder, 'title_pages'))
    app.logger.debug(f'videos: &#123;videos}')
    app.logger.debug(f'title_pages: &#123;title_pages}')
    return render_template('add_title.html', videos=videos, title_pages=title_pages)

@app.route('/build_stackedvids')
def build_stackedvids():
    # Get a random video and image from the static folder
    video_filename = random.choice(glob.glob('static/square_vids/*.mp4'))
    image_filename = random.choice(glob.glob('static/squares/*.jpg'))
    
    # Load the video and image files as clips
    video_clip = VideoFileClip(video_filename)
    image_clip = ImageClip(image_filename)
    
    # Set the duration of the image clip to match the duration of the video clip
    image_clip = image_clip.set_duration(video_clip.duration)
    
    # Resize the clips to 640x640 and 640x640 respectively
    video_clip = video_clip.resize((640, 640))
    image_clip = image_clip.resize((640, 640))
    
    # Create a black clip to fill the remaining space below the image
    black_clip = ColorClip(size=(640, 640), color=(0, 0, 0)).set_duration(video_clip.duration)
    
    # Combine the clips vertically using CompositeVideoClip
    final_clip = CompositeVideoClip([
        video_clip.set_position(('center', 'top')),
        image_clip.set_position(('center', 640)),
        black_clip.set_position(('center', 640 + 640))
    ], size=(640, 1280))
    
    # Export the final clip as a video file
    timestr = time.strftime("&#37;Y&#37;m&#37;d-&#37;H&#37;M&#37;S")
    video_filename = 'static/stacked_vids/stacked_vids'+timestr+'video.mp4'
    final_clip_path = 'static/stacked_vids/stacked_video.mp4'
    final_clip.write_videofile(final_clip_path)
    final_clip.write_videofile(video_filename)
    
    return render_template('/build_stackedvids.html', stackedvid_url=final_clip_path)

from moviepy.editor import *
@app.route('/build_stackedvid')
def build_stackedvid():
    # Get a random video and image from the static folder
    video_filename = random.choice(glob.glob('static/square_vids/*.mp4'))
    videofilename = random.choice(glob.glob('static/square_vids/*.mp4'))
    
    
    # Load the video and image files as clips
    video_clip = VideoFileClip(video_filename)
    videoclip = VideoFileClip(videofilename)
    
    # Set the duration of the image clip to match the duration of the video clip
    videoclip = videoclip.set_duration(video_clip.duration)
    
    # Resize the clips to 640x640 and 640x640 respectively
    video_clip = video_clip.resize((640, 640))
    videoclip = videoclip.resize((640, 640))
    
    # Create a black clip to fill the remaining space below the image
    black_clip = ColorClip(size=(640, 640), color=(0, 0, 0)).set_duration(video_clip.duration)
    
    # Combine the clips vertically using CompositeVideoClip
    final_clip = CompositeVideoClip([
        video_clip.set_position(('center', 'top')),
        videoclip.set_position(('center', 640)),
        black_clip.set_position(('center', 640 + 640))
    ], size=(640, 1280))
    
    # Export the final clip as a video file
    timestr = time.strftime("&#37;Y&#37;m&#37;d-&#37;H&#37;M&#37;S")
    video_filename = 'static/stacked_vids/stacked_vids'+timestr+'video.mp4'
    final_clip_path = 'static/stacked_vids/stacked_videos.mp4'
    final_clip.write_videofile(final_clip_path)
    final_clip.write_videofile(video_filename)
    
    return render_template('/build_stackedvid.html', stackedvid_url=final_clip_path)

@app.route('/clean_images', methods=['POST'])
def clean_images_route():
    clean_images()
    app.logger.error('line 210 clean_images_route')
    return redirect(url_for('index'))

@app.route('/get_gallery')
def get_gallery():
    image_dir = '/home/jack/Desktop/FLASK/static/images/uploads'
    image_names = os.listdir(image_dir)
    return render_template('get_gallery.html', image_names=image_names)

@app.route('/uploads/&lt;filename&gt;')
def send_image(filename):
    return send_from_directory('static/images/uploads', filename)

@app.route('/uploads/thumbnails/&lt;filename&gt;')
def send_image_thumb(filename):
    return send_from_directory('static/images/uploads/thumbnails', filename)
@app.route('/flask_info')
def flask_info():
    return render_template('flask_info.html')
@app.route('/add_effects')
def add_effects():
    return '''
        &lt;form method="post" action="/video" enctype="multipart/form-data"&gt;
            &lt;label for="input_video"&gt;Select input video file:&lt;/label&gt;&lt;br&gt;
            &lt;input type="file" id="input_video" name="input_video"&gt;&lt;br&gt;&lt;br&gt;
            &lt;input type="submit" value="Submit"&gt;
        &lt;/form&gt;
    '''

@app.route('/video', methods=['GET', 'POST'])
def process_video():
    DIR = "static/"
    input_video = request.files['input_video']
    
    # Save the uploaded video to a file
    input_video.save(f"&#123;DIR}input_video.mp4")
    
    # Run FFmpeg commands
    command1 = f"ffmpeg -nostdin -i &#123;DIR}input_video.mp4 -filter:v \"minterpolate='mi_mode=mci:mc_mode=aobmc:vsbmc=1:fps=10'\" -c:v libx264 -r 20 -pix_fmt yuv420p -c:a copy -y &#123;DIR}output.mp4"    
    
    subprocess.run(command1, shell=True, stderr=subprocess.PIPE, universal_newlines=True)
    
    command2 = f"ffmpeg -nostdin -i &#123;DIR}output.mp4 -vf mpdecimate,setpts=N/FRAME_RATE/TB -c:v libx264 -r 30 -pix_fmt yuv420p -c:a copy -y &#123;DIR}mpdecimate.mp4"
    
    subprocess.run(command2, shell=True, stderr=subprocess.PIPE, universal_newlines=True)
    
    #DIR = "/home/jack/Desktop/ffmpeg_flask/"
    command3 = f"ffmpeg -i static/mpdecimate.mp4 -filter_complex \"[0:v]trim=duration=14,loop=500:1:0[v];[1:a]afade=t=in:st=0:d=1,afade=t=out:st=0.9:d=2[a1];[v][0:a][a1]concat=n=1:v=1:a=1\" -c:v libx264 -r 30 -pix_fmt yuv420p -c:a aac -b:a 192k -shortest -y static/output.mp4"
    subprocess.run(command3, shell=True, stderr=subprocess.PIPE, universal_newlines=True)
    
    now = datetime.now().strftime("&#37;Y-&#37;m-&#37;d_&#37;H-&#37;M-&#37;S")
    shutil.copy(f"&#123;DIR}output.mp4", f"&#123;DIR}&#123;now}_output.mp4")
    logging.info(f'my_video: f"&#123;DIR}mpdecimate.mp4"') 
    video_file="static/outputALL.mp4"     
    command4 = f'ffmpeg -i "&#123;DIR}mpdecimate.mp4" -i "&#123;DIR}mpdecimate.mp4" -i "&#123;DIR}mpdecimate.mp4" -i "&#123;DIR}mpdecimate.mp4" -i "&#123;DIR}mpdecimate.mp4" -filter_complex "[0:v]trim=duration=15[v0];[1:v]trim=duration=15[v1];[2:v]trim=duration=15[v2];[3:v]trim=duration=15[v3];[4:v]trim=duration=15[v4];[v0][v1][v2][v3][v4]concat=n=5:v=1:a=0" -c:v libx264 -pix_fmt yuv420p -shortest -y &#123;video_file}'
    subprocess.run(command4, shell=True, stderr=subprocess.PIPE, universal_newlines=True)
    now = datetime.now().strftime("&#37;Y-&#37;m-&#37;d_&#37;H-&#37;M-&#37;S")
    diR = f"&#123;DIR}/square_videos/"
    logging.info(f'diR: f"&#123;diR}mpdecimate.mp4"')
    shutil.copy(f"&#123;video_file}", f"&#123;diR}&#123;now}_outputALL.mp4")
    logging.info(f'diR: &#123;diR}mpdecimate.mp4')
    return render_template('final.html', video_file=f"static/square_videos/&#123;now}_outputALL.mp4")
'''
@app.route('/generate_video2')
def generate_video2():
    # Get a list of image filenames from the static/final_images/ directory
    image_filenames = random.sample(glob.glob('static/final_images/*.jpg'), 25)

    # Create a list of image clips from the image filenames
    image_clips = []
    for filename in image_filenames:
        # Open the image file and resize it to 512x768
        image = Image.open(filename)
        image = image.resize((512, 768), Image.ANTIALIAS)

        # Convert the PIL Image object to a NumPy array
        image_array = np.array(image)

        # Create an ImageClip object from the resized image and set its duration to 1 second
        image_clip = ImageClip(image_array).set_duration(1)

        # Append the image clip to the list
        image_clips.append(image_clip)

    # Concatenate all the image clips into a single video clip
    video_clip = concatenate_videoclips(image_clips, method='compose')

    # Set the fps value for the video clip
    video_clip.fps = 24

    # Write the video clip to a file
    video_filename = 'static/videos/TEMPvideo.mp4'
    video_clip.write_videofile(video_filename, fps=24)

    # Return the rendered HTML template that displays the video and its path
    return render_template('generate_video2.html', video_url='/' + video_filename, video_path=video_filename)
'''
def get_all_mp4_videos():
    mp4_videos = []
    for root, dirs, files in os.walk('static'):
        for file in files:
            if file.endswith('.mp4'):
                mp4_videos.append(os.path.join(root, file))
    return mp4_videos

@app.route('/play/&lt;path:video_path&gt;')
def play(video_path):
    return send_file(video_path)




@app.route('/select_order', methods=['GET', 'POST'])
def select_order():
    output_path = 'static/videos/concatenated_video.mp4'  # Set a default value for output_path
    if request.method == 'POST':
        # Get the order of the videos from the form data
        order = request.form.getlist('order')
        # Join the videos in the specified order
        join_videos(order, output_path)
        # Set the timestamped output path
        timestamp = datetime.datetime.now().strftime('&#37;Y&#37;m&#37;d_&#37;H&#37;M&#37;S')
        new_output_path = f'static/videos/concatenated_&#123;timestamp}XX.mp4'
        shutil.copy(output_path, new_output_path)
        # Redirect to the download page
        return redirect(url_for('download'))
    else:
        # Get the paths to the video files in the directory
        video_dir = 'static/videos'
        video_files = [os.path.join(video_dir, filename) for filename in os.listdir(video_dir) if filename.endswith('.mp4')]
        # Render the template with the list of video files and the output path
        return render_template('select_order.html', video_files=video_files, output_path=output_path)
         
def join_videos(video_paths, output_path):
    # Generate a list of input arguments for FFmpeg
    input_args = []
    for path in video_paths:
        input_args.extend(['-i', path])
    # Join the videos using FFmpeg
    subprocess.run(['ffmpeg', *input_args, '-filter_complex', 'concat=n=&#123;}:v=1:a=0'.format(len(video_paths)), '-c:v', 'libx264', '-crf', '23', '-preset', 'veryfast', '-y', output_path])
    #output_path = 'static/videos/concatenated_video.mp4'
    timestamp = datetime.datetime.now().strftime('&#37;Y&#37;m&#37;d_&#37;H&#37;M&#37;S')
    new_output_path = f'static/videos/concatenated_&#123;timestamp}XX.mp4'
    shutil.copy(output_path, new_output_path)
    
if __name__ == '__main__':
    app.run(debug=True)



&#123;&#37; extends "base.html" &#37;}

&#123;&#37; block content &#37;}
  &lt;h1&gt;Thumbnails&lt;/h1&gt;

  &lt;div class="thumbnails-container"&gt;
    &#123;&#37; for thumbnail_path, video_path in thumbnail_paths|zip(video_paths) &#37;}
      &lt;div class="thumbnail"&gt;
        &lt;a href="&#123;&#123; url_for('play', video_path=video_path) }}"&gt;
          &lt;img src="&#123;&#123; url_for('static', filename=thumbnail_path[7:]) }}" class="img-thumbnail"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &#123;&#37; endfor &#37;}
  &lt;/div&gt;

  &lt;style&gt;
    .thumbnails-container &#123;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .thumbnail &#123;
      width: calc(11.11&#37; - 10px);
      margin-bottom: 20px;
    }
    .thumbnail img &#123;
      width: 100&#37;;
    }
  &lt;/style&gt;
&#123;&#37; endblock &#37;}
&lt;!-- index.html--&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;My Flask App&lt;/title&gt;
    &lt;style&gt;
        html,
        body &#123;
            margin: 0;
            padding: 1&#37;;
            height: 100&#37;;
            font-family: Arial, sans-serif;
        }

        body &#123;
            background-image: url('../static/assets/MemMaker_background.png');
            background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
        }
        video &#123;
            margin: 10px, auto;
            width: 400px;
            height: auto;
        }

          .wrapper &#123;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;

        }

        .header &#123;
            width: 100&#37;;
            padding: 20px;
            text-align: center;
        }

        .columns &#123;
            display: flex;
            width: 80&#37;;
            margin-top: 20px;
        }

        .column &#123;
            padding: 20px;
            box-sizing: border-box;
        }

        .column.left &#123;
            width: 30&#37;;
            border:    1px solid #000;
        }

        .column.right &#123;
        margin: 0 auto; /* Center horizontally */
        width: 60&#37;;
        border: 1px solid #000;
        text-align: center; /* Center video vertically */
    }

    .column.right video &#123;
        max-width: 100&#37;;
        height: auto;
    }
    &lt;/style&gt;&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="container"&gt;
        &lt;h1&gt;Images in &#123;&#123; path }}&lt;/h1&gt;
        &lt;div class="row"&gt;
            &lt;!-- loop over the image names and display them as thumbnails --&gt;
            &#123;&#37; for image in images &#37;}
            &lt;div class="col-md-3"&gt;
                &lt;img src="&#123;&#123; url_for('static', filename='images/' + path + '/' + image) }}" class="img-thumbnail"&gt;
            &lt;/div&gt;
            &#123;&#37; endfor &#37;}
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h1&gt;Utilities&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="columns"&gt;
            &lt;div class="column left"&gt;
                &lt;h2&gt;Left Column&lt;/h2&gt;
                &lt;h3&gt;Create Text&lt;/h3&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('app_utilities') }}"&gt;Application Utilities&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('image_processing') }}"&gt;Image Processing Links&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('format_file') }}"&gt;Format Text Files&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('view_text') }}"&gt;View Text Files&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_file') }}"&gt;Edit File&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('edit_formatted') }}"&gt;Edit Formatted Text&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;

                &lt;a href="&#123;&#123; url_for('edit_description') }}"&gt;Edit Description&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
            &lt;/div&gt;
            &lt;div class="column right"&gt;
                &lt;h2&gt;Right Column&lt;/h2&gt;
                &lt;video controls&gt;
                    &lt;source src="&#123;&#123; video }}" type="video/mp4"&gt;
                    Your browser does not support the video tag.
                &lt;/video&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Create A Title Page&lt;/title&gt;
&lt;/head&gt;
&lt;style&gt;.atext&#123;
    text-align: center;
    background-color: aquamarine;}
    #wrapper&#123;width:50&#37;;
    margin: auto;
   
  width: 50&#37;;
  border: 3px solid green;
  padding: 10px;
        text-align: center;
    background-color: antiquewhite;}&lt;/style&gt;
&lt;body class="atext"&gt;
    &lt;div id="wrapper"&gt;
    &lt;h1&gt;Create Title Page&lt;/h1&gt;
    &lt;h2&gt;Enter Twenty characters max, including spaces:&lt;/h2&gt;
    &lt;p&gt;A random image will be chosen and this text placed on it to use as a title page. &lt;br /&gt;
       The filename will contain the text on the image.&lt;/p&gt;
     &lt;form method="POST" enctype="multipart/form-data"&gt;
        &lt;label for="text"&gt;Text:&lt;/label&gt;
        &lt;input type="text" id="text" name="text" required&gt;
        &lt;br&gt;
        &lt;input type="submit" value="Create"&gt;
    &lt;/form&gt;
    &#123;&#37; if filename &#37;}
    &lt;img src="&#123;&#123; url_for('static', filename=filename) }}" alt="Title Page"&gt;
    &#123;&#37; endif &#37;}
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Title Page&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Create Title Page&lt;/h1&gt;
    &lt;a href="&#123;&#123; url_for('index') }}"&gt;Home&lt;/a&gt;&lt;br /&gt;
    &lt;form method="POST" enctype="multipart/form-data"&gt;&lt;br /&gt;        
        &lt;label for="text"&gt;Text:&lt;/label&gt;
        &lt;input type="text" name="text" id="text" required&gt;
        &lt;br&gt;
        &lt;label for="image"&gt;Image:&lt;/label&gt;
        &lt;input type="file" name="image" id="image" accept="image/*" required&gt;
        &lt;br&gt;
        &lt;input type="submit" value="Create Title Page"&gt;
    &lt;/form&gt;
&#123;&#37; if filename &#37;}
    &lt;h2&gt;Generated Title Page:&lt;/h2&gt;
    &lt;img src="&#123;&#123; url_for('static', filename=filename) }}" alt="Title Page"&gt;
&#123;&#37; endif &#37;}

&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Capture Tube&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Capture Video Tube&lt;/h1&gt;
    &lt;a href="/capture_overlay_verify"&gt;Start Capture Regular&lt;/a&gt;&lt;br /&gt;
    &lt;a href="/capture_overlay_short"&gt;Start Capture Short&lt;/a&gt;
    &lt;h1&gt;Welcome to Your Flask App&lt;/h1&gt;
    &lt;p&gt;Create a text image&lt;/p&gt;
    &lt;a href="&#123;&#123; url_for('create_text') }}"&gt;Create Text Image&lt;/a&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Mouse Particals&lt;/title&gt;
    &lt;link rel="stylesheet" href="../static/css/two_css_canvas.css"&gt;
&lt;/head&gt;

&lt;body&gt;&lt;a style="font-size: small;color:lightgray;" href="&#123;&#123; url_for('index') }}"&gt;Return to HOME&lt;/a&gt;&nbsp;&nbsp;|&nbsp;&nbsp;&lt;a  style="font-size: small;color:lightgray;" href="&#123;&#123; url_for('edit_template_page', filename='two_canvas.html') }}"&gt;Edit This Page&lt;/a&gt;|&nbsp;&nbsp;&lt;a  style="font-size: small;color:lightgray;" href="&#123;&#123; url_for('edit_canvas_script', filename='scripts_canvas.js') }}"&gt;Edit the JavaScript&lt;/a&gt;
    &lt;canvas&gt;&lt;/canvas&gt;
    &lt;script src="../static/canvas/scripts_canvas.js"&gt;&lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;[
    [
        &#123;
            "role": "system",
            "content": "Here are some updated web searches. Use this to improve user response:[1] \"This will open a window containing the HTML source code of the page. Inspect an HTML Element: Right-click on an element (or a blank area), and choose \"Inspect\" or \"Inspect Element\" to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.\" URL:https://www.w3schools.com/html/html_basic.asp.[2] \"HTML ( H yper T ext M arkup L anguage) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. As the title suggests, this article will give you a basic understanding of HTML and its functions. So what is HTML?\" URL:https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics.[3] \"HTML (HyperText Markup Language) is a markup language that tells web browsers how to structure the web pages you visit. It can be as complicated or as simple as the web developer wants it to be. HTML consists of a series of elements, which you use to enclose, wrap, or mark up different parts of content to make it appear or act in a certain way.\" URL:https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started."
        }
    ],
    [
        &#123;
            "role": "system",
            "content": "Here are some updated web searches. Use this to improve user response:[1] \"Here is what is printed: The first line is what is desired and shows up by pasting the html markup into the html file. The second output is what I am getting through accessing the htmlm variable. Does anybody know how to do this? python. html. flask. Share. Improve this question. Follow. asked Jun 20, 2019 at 20:19. Malonga. 35 5. 2.\" URL:https://stackoverflow.com/questions/56693354/how-to-make-html-markup-show-up.[2] \"Docs \u00bb flask \u00bb flask.Markup. View page source. flask.Markup. class flask.Markup [source] Marks a string as being safe for inclusion in HTML/XML output without needing to be escaped. This implements the __html__ interface a couple of frameworks and web applications use.\" URL:https://tedboy.github.io/flask/generated/generated/flask.Markup.html.[3] \"Flask is a lightweight Python framework for web applications that provides the basics for URL routing and page rendering. Flask is called a \"micro\" framework because it doesn't directly provide features like form validation, database abstraction, authentication, and so on.\" URL:https://code.visualstudio.com/docs/python/tutorial-flask."
        }
    ],
    [
        &#123;
            "role": "system",
            "content": "Here are some updated web searches. Use this to improve user response:[1] \"A recent report from London's Express said that each member of the quintet is making roughly $2.5 million per episode this season (which contains five episodes), and they will earn the same amount in next year's eighth and final season.\" URL:https://money.com/heres-how-much-money-the-game-of-thrones-actors-really-make/.[2] \"Stars Sophie Turner (Sansa Stark), Maisie Williams (Arya Stark), and Isaac Hempstead Wright (Bran Stark) were making $175,000 an episode in 2017, according to Variety. Turner acknowledged the pay...\" URL:https://www.businessinsider.com/game-of-thrones-actor-salaries-compared-to-highest-paid-tv-stars-2019-4?op=1.[3] \"When the series began, the Game of Thrones budget to make season 1 was said to be around $50-60 million, which breaks down to $5-6 million per episode. Much of the debut season was shot across Northern Ireland and Malta, but production's reach expanded as Game of Thrones continued.\" URL:https://screenrant.com/game-thrones-budget-show-cost-explained/."
        }
    ],
    [
        &#123;
            "role": "system",
            "content": "Here are some updated web searches. Use this to improve user response:[1] \"Game of Thrones: Winter is Coming is a 2019 massively multiplayer online real-time strategy game (MMORTS) developed and published Yoozoo Games. It is based on the television series Game of Thrones.The game was announced in August 2018, during Gamescom and was released by Yoozoo in March 2019, originally as a browser game. The Steam version was released in November 2019, and the mobile port was ...\" URL:https://en.wikipedia.org/wiki/Game_of_Thrones:_Winter_is_Coming.[2] \"Like most browser games, Game of Thrones: Winter is Coming also has many in-game purchases and microtransactions that can give players a significant edge over the F2P players. Tips and Tricks to Playing Game of Thrones: Winter is Coming. There are lots of ways to play this game. With such a large player base, different gamers have developed ...\" URL:https://best-gamesonline.com/articles/an-expert-guide-to-game-of-thrones-winter-is-coming/.[3] \"Game of Thrones Winter is Coming has been designed to give players a balanced combination of strategy and roleplaying for a unique gameplay experience. Build your base, expand your territory, recruit characters from the show, train your army, and make history. 1. Dive into the World of Westeros. - Westeros Like You've Never Seen It Before: The ...\" URL:https://store.steampowered.com/app/1105420/Game_of_Thrones_Winter_is_Coming."
        }
    ],
    [
        &#123;
            "role": "system",
            "content": "Here are some updated web searches. Use this to improve user response:[1] \"Game of Thrones: Winter is Coming is a 2019 massively multiplayer online real-time strategy game (MMORTS) developed and published Yoozoo Games. It is based on the television series Game of Thrones.The game was announced in August 2018, during Gamescom and was released by Yoozoo in March 2019, originally as a browser game. The Steam version was released in November 2019, and the mobile port was ...\" URL:https://en.wikipedia.org/wiki/Game_of_Thrones:_Winter_is_Coming.[2] \"Like most browser games, Game of Thrones: Winter is Coming also has many in-game purchases and microtransactions that can give players a significant edge over the F2P players. Tips and Tricks to Playing Game of Thrones: Winter is Coming. There are lots of ways to play this game. With such a large player base, different gamers have developed ...\" URL:https://best-gamesonline.com/articles/an-expert-guide-to-game-of-thrones-winter-is-coming/.[3] \"Game of Thrones: Winter Is Coming is a new officially licensed online strategy browser game/MMO that fans can now play for free. What is it, and is it any go...\" URL:https://www.youtube.com/watch?v=5tqW6PxO_rA."
        }
    ],
    [
        &#123;
            "role": "system",
            "content": "Here are some updated web searches. Use this to improve user response:[1] \"Create a repository with the same name as your GitHub username, initializing the repository with a README.md file. For more information, see \" Managing your profile README .\" Edit the README.md file and delete the template text (beginning ### Hi there) that is automatically added when you create the file.\" URL:https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/quickstart-for-writing-on-github.[2] \"How to Write a Good README File for Your GitHub Project Hillary Nyakundi When I was first introduced to GitHub, I had no idea what it was or what it could do. Between you and me, I created the account because I was told every developer should have one where they push their code. For the longest time as a beginner I did nothing with my account.\" URL:https://www.freecodecamp.org/news/how-to-write-a-good-readme-file/.[3] \"Learn advanced formatting features by creating a README for your GitHub profile. About writing and formatting on GitHub GitHub combines a syntax for formatting text called GitHub Flavored Markdown with a few unique writing features. Basic writing and formatting syntax\" URL:https://docs.github.com/articles/markdown-basics."
        }
    ],
    [
        &#123;
            "role": "system",
            "content": "Here are some updated web searches. Use this to improve user response:[1] \"How to Write a Good README File for Your GitHub Project Hillary Nyakundi When I was first introduced to GitHub, I had no idea what it was or what it could do. Between you and me, I created the account because I was told every developer should have one where they push their code. For the longest time as a beginner I did nothing with my account.\" URL:https://www.freecodecamp.org/news/how-to-write-a-good-readme-file/.[2] \"Create a repository with the same name as your GitHub username, initializing the repository with a README.md file. For more information, see \" Managing your profile README .\" Edit the README.md file and delete the template text (beginning ### Hi there) that is automatically added when you create the file.\" URL:https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/quickstart-for-writing-on-github.[3] \"Learn advanced formatting features by creating a README for your GitHub profile. About writing and formatting on GitHub GitHub combines a syntax for formatting text called GitHub Flavored Markdown with a few unique writing features. Basic writing and formatting syntax\" URL:https://docs.github.com/articles/markdown-basics."
        }
    ],
    [
        &#123;
            "role": "system",
            "content": "Here are some updated web searches. Use this to improve user response:[1] \"Disadvantages of flask As it is easy for an amateur or a beginner to learn and create a web development with flask framework, in the same way, a bad developer will write worse code, or in the case of a young developer in training, it will be easier for him to use low-quality code creating a \"bad web application\". Scale\" URL:https://dev.to/detimo/python-flask-pros-and-cons-1mlo.[2] \"Circular dependencies are a common problem. Take a look at the application factory pattern. This can help with both circular dependencies and testing. http://flask.pocoo.org/docs/1./patterns/appfactories/ Example: https://github.com/realpython/cookiecutter-flask-skeleton\" URL:https://www.reddit.com/r/flask/comments/a3sebn/ask_flask_what_are_your_biggest_challenges/.[3] \"The biggest problem is that the Flask mixes imperative and declarative way of configuration and encourages you to do so. To glue all parts together you end up with ugly Python module that is responsible for bootstrapping the app. Mysterious import order (just try to change it!), ifs everywhere, decorators, ugh.\" URL:https://www.ulam.io/blog/is-flask-good-framework-for-application."
        }
    ],
    [
        &#123;
            "role": "system",
            "content": "Here are some updated web searches. Use this to improve user response:[1] \"Ottawa ( / \u02c8\u0252t\u0259w\u0259 / i, / \u02c8\u0252t\u0259w\u0251\u02d0 /; Canadian French: [\u0254taw\u0251]) is the capital city of Canada. It is located in the southern portion of the province of Ontario, at the confluence of the Ottawa River and the Rideau River.\" URL:https://en.wikipedia.org/wiki/Ottawa.[2] \"Ottawa, city, capital of Canada, located in southeastern Ontario. In the eastern extreme of the province, Ottawa is situated on the south bank of the Ottawa River across from Gatineau, Quebec, at the confluence of the Ottawa (Outaouais), Gatineau, and Rideau rivers.\" URL:https://www.britannica.com/place/Ottawa.[3] \"The capital of Canada is Ottawa in the province of Ontario. This city sits along the south side of the Ottawa River, which is located in the southeastern region of the province. It is situated at the confluence of three rivers, those namely being the Ottawa, Gatineau, and Quebec Rivers.\" URL:https://www.worldatlas.com/articles/what-is-the-capital-of-canada.html."
        }
    ],
    [
        &#123;
            "role": "system",
            "content": "Here are some updated web searches. Use this to improve user response:[1] \"1 \"Clickable\" is a quality that applies to something which is shown (rendered), and JSON can be rendered through a gazillion different ways, with half of these possible with a user agent (what the millennials call \"the browser\"). You have unfortunately left us guesstimating how you are rendering the quoted text.\" URL:https://stackoverflow.com/questions/56129722/make-url-in-json-clickable.[2] \"Ask Question Asked 6 years, 5 months ago Modified 3 years, 11 months ago Viewed 71k times 0 I want to create a dynamic array/script and I need to add some link in my JSON return so that, I can create a long array which inculude dynamic list or sources with a prepared JSON file.\" URL:https://stackoverflow.com/questions/42927933/how-can-i-add-a-link-href-hyperlink-in-json-script.[3] \"In another edition to the JSON series, we can also add clickable links are part of the paragraph in the JSON. We can encapsulate the link in the anchor tag &lt;a href='#'&gt;&lt;/a&gt;. We can add the redirection link in the href so that the user can redirect to the link on click.\" URL:https://dev.to/hardiquedasore/how-to-add-link-to-json-49a3."
        }
    ]
]&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Upload Images to Blend&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Upload Images to Blend&lt;/h1&gt;
    &lt;form action="&#123;&#123; url_for('upload_blends') }}" method="post" enctype="multipart/form-data"&gt;
      &lt;p&gt;Select the first image:&lt;/p&gt;
      &lt;input type="file" name="img1"&gt;&lt;br&gt;
      &lt;p&gt;Select the second image:&lt;/p&gt;
      &lt;input type="file" name="img2"&gt;&lt;br&gt;
      &lt;p&gt;Select the third image:&lt;/p&gt;
      &lt;input type="file" name="img3"&gt;&lt;br&gt;&lt;br&gt;
      &lt;input type="submit" value="Blend Images"&gt;
    &lt;/form&gt;

  &lt;br&gt;
    &lt;img src="&#123;&#123; url_for('static', filename='images/image2.jpg') }}" alt="Example image"&gt;&lt;br /&gt;
  &lt;/body&gt;
&lt;/html&gt;

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;File Upload Form&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Upload a File&lt;/h1&gt;

    &lt;form action="&#123;&#123; url_for('upload_file') }}" method="POST" enctype="multipart/form-data"&gt;
      &lt;input type="file" name="file"&gt;
      &lt;input type="submit" value="Upload"&gt;
    &lt;/form&gt;

    &#123;&#37; if filename &#37;}
    &lt;h2&gt;Uploaded File:&lt;/h2&gt;
    &lt;p&gt;Filename: &#123;&#123; filename }}&lt;/p&gt;
    &lt;p&gt;URL: &lt;a href="&#123;&#123; url_for('uploaded_file', filename=filename) }}"&gt;&#123;&#123; url_for('uploaded_file', filename=filename) }}&lt;/a&gt;&lt;/p&gt;
    &lt;img src="&#123;&#123; url_for('uploaded_file', filename=filename) }}" alt="Uploaded File"&gt;
    &#123;&#37; endif &#37;}

    &lt;br&gt;
    &lt;h1&gt;Upload Background and Foreground Images&lt;/h1&gt;
    &lt;form action="/process_images" method="post" enctype="multipart/form-data"&gt;
        &lt;input type="file" name="bg_image" accept="image/*" required&gt;
        &lt;input type="file" name="fg_image" accept="image/*" required&gt;
        &lt;input type="submit" value="Create Video"&gt;
    &lt;/form&gt;

    &#123;&#37; if video_url &#37;}
    &lt;h2&gt;Generated Video:&lt;/h2&gt;
    &lt;video controls&gt;
        &lt;source src="&#123;&#123; video_url }}" type="video/mp4"&gt;
        Your browser does not support the video tag.
    &lt;/video&gt;
    &#123;&#37; endif &#37;}



    
    &lt;p&gt;&lt;a href="&#123;&#123; url_for('index') }}"&gt;Return to index&lt;/a&gt;&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
&lt;!doctype html&gt;
&lt;title&gt;Feathering App&lt;/title&gt;
&lt;h1&gt;Upload an image to apply feathering&lt;/h1&gt;
&lt;form method=post enctype=multipart/form-data&gt;
  &lt;input type=file name=file&gt;
  &lt;input type=submit value=Upload&gt;
&lt;/form&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Image Upload&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Upload Background and Foreground Images&lt;/h1&gt;
    &lt;form action="/process_imagez" method="post" enctype="multipart/form-data"&gt;
        &lt;label for="bg_image"&gt;Background Image:&lt;/label&gt;
        &lt;input type="file" name="bg_image" id="bg_image" accept="image/*" required&gt;&lt;br&gt;

        &lt;label for="fg_image"&gt;Foreground Image:&lt;/label&gt;
        &lt;input type="file" name="fg_image" id="fg_image" accept="image/*" required&gt;&lt;br&gt;

        &lt;input type="submit" value="Create Video"&gt;
    &lt;/form&gt;

    &#123;&#37; if video_url &#37;}
    &lt;h2&gt;Generated Video:&lt;/h2&gt;
    &lt;video controls&gt;
        &lt;source src="static/overlay_zooms/imagez_video.mp4" type="video/mp4"&gt;
        Your browser does not support the video tag.
    &lt;/video&gt;
    &#123;&#37; endif &#37;}
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Upload and Rename&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Upload a File and Rename it&lt;/h1&gt;
    &lt;form action="/upload_file_rename" method="POST" enctype="multipart/form-data"&gt;
        &lt;label for="file"&gt;Select a File:&lt;/label&gt;
        &lt;input type="file" name="file" id="file" required&gt;&lt;br&gt;&lt;br&gt;

        &lt;label for="new_filename"&gt;New Filename:&lt;/label&gt;
        &lt;input type="text" name="new_filename" id="new_filename" required&gt;&lt;br&gt;&lt;br&gt;

        &lt;label for="selected_directory"&gt;Destination Directory:&lt;/label&gt;
        &lt;input type="text" name="selected_directory" id="selected_directory" required&gt;&lt;br&gt;&lt;br&gt;

        &lt;label for="width"&gt;Width:&lt;/label&gt;
        &lt;input type="text" name="width" id="width" value="1366"&gt;&lt;br&gt;&lt;br&gt;

        &lt;label for="height"&gt;Height:&lt;/label&gt;
        &lt;input type="text" name="height" id="height" value="768"&gt;&lt;br&gt;&lt;br&gt;

        &lt;input type="submit" value="Upload and Rename"&gt;
    &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Image Upload&lt;/title&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/Style.css') }}"&gt;
    &lt;style&gt;
        .resizedvideo &#123;
          width: 400px;
          height: auto;
        }
        &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;a style ="font-size: 24px;color: rgb(255, 238, 0);" href="&#123;&#123; url_for('index') }}"&gt;HOME&lt;/a&gt;
    &lt;h1&gt;Upload Background and Foreground Images&lt;/h1&gt;
    &lt;form action="/process_imagez" method="post" enctype="multipart/form-data"&gt;
        &lt;label for="bg_image"&gt;Background Image:&lt;/label&gt;
        &lt;input type="file" name="bg_image" id="bg_image" accept="image/*" required&gt;&lt;br&gt;

        &lt;label for="fg_image"&gt;Foreground Image:&lt;/label&gt;
        &lt;input type="file" name="fg_image" id="fg_image" accept="image/*" required&gt;&lt;br&gt;

        &lt;input type="submit" value="Create Video"&gt;
    &lt;/form&gt;

    &#123;&#37; if video_url &#37;}
    &lt;h2&gt;Generated Video:&lt;/h2&gt;
    &lt;video class="resizedvideo" controls&gt;
        &lt;source src="static/overlay_zooms/imagez_video.mp4" type="video/mp4"&gt;
        Your browser does not support the video tag.
    &lt;/video&gt;

    &lt;p&gt;&#123;&#123; video_download_link }}&lt;/p&gt;
    &#123;&#37; endif &#37;}
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Upload File and Rename&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Upload a File and Rename it&lt;/h1&gt;
    &lt;form action="/upload_file_rename" method="POST" enctype="multipart/form-data"&gt;
        &lt;label for="file"&gt;Select a file:&lt;/label&gt;
        &lt;input type="file" name="file" id="file" required&gt;&lt;br&gt;&lt;br&gt;

        &lt;label for="new_filename"&gt;New Filename:&lt;/label&gt;
        &lt;input type="text" name="new_filename" id="new_filename" required&gt;&lt;br&gt;&lt;br&gt;

        &lt;label for="selected_directory"&gt;Destination Directory:&lt;/label&gt;
        &lt;input type="text" name="selected_directory" id="selected_directory" required&gt;&lt;br&gt;&lt;br&gt;

        &lt;input type="submit" value="Upload and Rename"&gt;
    &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Video Thumbnails&lt;/title&gt;
    &lt;style&gt;
        html,body &#123;margin: 0;padding: 1&#37;; height: 100&#37;;font-family: Arial, sans-serif;}

        body &#123;background-image: url('../static/assets/MemMaker_background.png');background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
        }
        video &#123;margin: 10px, auto;
            width: 250px;
            height: auto;}

          .wrapper &#123;display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;}

        .header &#123;width: 100&#37;;
            padding: 20px;
            text-align: center;}

        .columns &#123;display: flex;
            width: 80&#37;;
            margin-top: 20px;}

        .column &#123; padding: 20px;
            box-sizing: border-box;}

        .column.left &#123;
            width: 60&#37;;
            border:    1px solid #000;}

        .column.right &#123;
        margin: 0 auto; /* Center horizontally */
        width: 30&#37;;
        border: 1px solid #000;
        text-align: center; /* Center video vertically */}

    .column.right video &#123;
        max-width: 100&#37;;
        height: auto;}
    .note&#123;color:red;font-size:24px;}   
    &lt;/style&gt;    
    
    
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Video Thumbnails&lt;/h1&gt;
    &lt;ul&gt;
        &#123;&#37; for video in videos &#37;}
        &lt;li&gt;
            &lt;h3&gt;&#123;&#123; video['name'] }}&lt;/h3&gt;
 
            &lt;video width="200" height="auto" controls&gt;
                &lt;source src="&#123;&#123; url_for('view_archive_videos.play_video', video_name=video['name']) }}" type="video/mp4"&gt;
                Your browser does not support the video tag.
            &lt;/video&gt;
            


        &lt;/li&gt;
        &#123;&#37; endfor &#37;}
    &lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;View Captured Video&lt;/title&gt;

    &lt;style&gt;
        html,body &#123;margin: 0;padding: 1&#37;; height: 100&#37;;font-family: Arial, sans-serif;}

        body &#123;background-image: url('../static/assets/MemMaker_background.png');background-repeat: repeat-y;
            background-size: cover;
            /* Use 'cover' to make the image cover the entire body */
            background-position: top;
        }
        video &#123;margin: 10px, auto;
            width: 250px;
            height: auto;}

          .wrapper &#123;display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;}

        .header &#123;width: 100&#37;;
            padding: 20px;
            text-align: center;}

        .columns &#123;display: flex;
            width: 80&#37;;
            margin-top: 20px;}

        .column &#123; padding: 20px;
            box-sizing: border-box;}

        .column.left &#123;
            width: 60&#37;;
            border:    1px solid #000;}

        .column.right &#123;
        margin: 0 auto; /* Center horizontally */
        width: 30&#37;;
        border: 1px solid #000;
        text-align: center; /* Center video vertically */}

    .column.right video &#123;
        max-width: 100&#37;;
        height: auto;}
    .note&#123;color:red;font-size:24px;}   
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;View Captured Video&lt;/h1&gt;
    &lt;video controls&gt;
        &lt;source src="&#123;&#123; video_filename }}" type="video/mp4"&gt;
        Your browser does not support the video tag.
    &lt;/video&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Execution Result&lt;/title&gt;
    &lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;title&gt;Execute Bash Script&lt;/title&gt;
    &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;

    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/flask.css') }}"&gt;

&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Execution Result&lt;/h1&gt;

    &lt;h2&gt;Script Content&lt;/h2&gt;

    &#123;&#37; for results in result &#37;}
    &lt;pre&gt;&#123;&#123; results }}&lt;/pre&gt;
    &#123;&#37; endfor &#37;}
    &#123;&#37; for words in content &#37;}

        &lt;pre&gt;&#123;&#123; words }}&lt;/pre&gt;
    &#123;&#37; endfor &#37;}
&lt;/body&gt;
&lt;/html&gt;

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Image Gallery&lt;/title&gt;
  &lt;style&gt;
    .gallery &#123;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }

    .gallery img &#123;
      width: 250px;
      height: 250px;
      object-fit: cover;
      margin: 10px;
    }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="gallery"&gt;
  &lt;hr&gt;
  &#123;&#37; for image_url in image_urls &#37;}
    &lt;img src="&#123;&#123; image_url }}" alt="Image"&gt;
  &#123;&#37; endfor &#37;}
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;


&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;View Text File&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h2&gt;Viewing Text Filename: &lt;/h2&gt;&lt;h3&gt;&#123;&#123; filename }}&lt;/h3&gt;
    &lt;pre&gt;&#123;&#123; file_contents }}&lt;/pre&gt;
&lt;/body&gt;
&lt;/html&gt;&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;View Text Image&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h2&gt;View Text Image&lt;/h2&gt;
    &lt;img src="&#123;&#123; url_for('static', filename='assets/512x512_text.jpg') }}" alt="Generated Text Image"&gt;
    &lt;br&gt;
    &lt;a href="&#123;&#123; url_for('create_text') }}"&gt;Generate Another Image&lt;/a&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Thumbnail Gallery&lt;/title&gt;
    &lt;style&gt;
        .gallery &#123;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .thumbnail &#123;
            margin: 10px;
            border: 1px solid #ccc;
            box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            width: 200px;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .thumbnail img &#123;
            width: 100&#37;;
            height: 100&#37;;
            object-fit: cover;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Thumbnail Gallery&lt;/h1&gt;
    &lt;div class="gallery"&gt;
        &#123;&#37; for image in image_list &#37;}
        &lt;div class="thumbnail"&gt;
            &lt;a href="&#123;&#123; image.url }}"&gt;
                &lt;img src="&#123;&#123; image.url }}"&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &#123;&#37; endfor &#37;}
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Word Cloud&lt;/title&gt;

    &lt;link rel="stylesheet" href="static/css/flask.css"&gt;


&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;First Three Lines from Every Block&lt;/h1&gt;

    &#123;&#37; if extracted_lines &#37;}
        &lt;ul&gt;
            &#123;&#37; for lines in extracted_lines &#37;}
                &lt;li&gt;
                    &lt;pre&gt;&#123;&#123; lines }}&lt;/pre&gt;
                &lt;/li&gt;
            &#123;&#37; endfor &#37;}
        &lt;/ul&gt;
    &#123;&#37; else &#37;}
        &lt;p&gt;No code blocks found.&lt;/p&gt;
    &#123;&#37; endif &#37;}
    
    &lt;a href="&#123;&#123; url_for('search_code') }}"&gt;Back to Search&lt;/a&gt;
&lt;/body&gt;
&lt;/html&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Display Preformatted Code&lt;/title&gt;
    &lt;style&gt;
    pre&#123;
    color:navy;
    font-size:22px;
    }
    .note&#123;
    color:red;
    font-size:24;}
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Preformatted Code Example&lt;/h1&gt;
                 &lt;a href="&#123;&#123; url_for('hello') }}"&gt;HOME&lt;/a&gt;&lt;br /&gt;
                &lt;a href="&#123;&#123; url_for('html_base') }}"&gt;Html_Base&lt;/a&gt;&lt;br /&gt;
                &lt;a class="note" href="&#123;&#123; url_for('home') }}"&gt;Cheat Sheet&lt;/a&gt;&lt;br /&gt;   
    &lt;h2&gt;Code from code.txt:&lt;/h2&gt;
    
    &lt;pre&gt;&#123;&#123; code_content|safe }}&lt;/pre&gt;
&lt;/body&gt;
&lt;/html&gt;

&lt;!-- code_editor.html--&gt;
&lt;!-- app_utilities.html--&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;title&gt;Embedded YouTube Videos and Links&lt;/title&gt;
    &lt;link rel="icon" href="&#123;&#123; url_for('static', filename='favicon.ico') }}" type="image/x-icon"&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/flask.css') }}"&gt;
    &lt;link rel="stylesheet" href="&#123;&#123; url_for('static', filename='css/base.css') }}"&gt;
&lt;style&gt;
.note&#123;
color:darkbrown;
font-size:24px;
}
.Snote&#123;
color:red;
font-size:30px;
}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class="wrapper"&gt;
        &lt;div class="header"&gt;
            &lt;h1&gt;YouTube Videos&lt;/h1&gt;
            &lt;a class = "note" href="&#123;&#123; url_for('index') }}"&gt;Home (index)&lt;/a&gt;&lt;br /&gt;
            &lt;a class = "note" href="https://elements.envato.com/audio/royalty-free-music" 
target="_blank"&gt;elements.envato.com/audio/royalty-free-music&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;
&lt;a class = "Snote" href="&#123;&#123; url_for('select_playmp3') }}" target="_blank"&gt;Play Music&lt;/a&gt;&nbsp;&nbsp;||&nbsp;&nbsp;
&lt;a class="Snote" href="&#123;&#123; url_for('start_stream') }}" target="_blank"&gt;Start Streaming&lt;/a&gt;


        &lt;/div&gt;
        &lt;div class="columns"&gt;
        &lt;div class="column"&gt;
            &lt;iframe width="560" height="315" src="https://www.youtube.com/embed/BidxfmuXJL0?si=QzuoU3Ad-n0WFsII" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen&gt;&lt;/iframe&gt;
        &lt;/div&gt;    &nbsp;&nbsp;
&lt;div class="column"&gt;
    &lt;iframe width="560" height="315" src="https://www.youtube.com/embed/wpGsHnUlJNY?si=JtmCatIR7YZkD2KN" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen&gt;&lt;/iframe&gt;&lt;br /&gt;
&lt;iframe width="560" height="315" src="https://www.youtube.com/embed/NEFQ_PgRSmk?si=-35q0H-uSRgxKTLI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt; 
&lt;/div&gt;
</pre>
</div>  
</div>
</body>
</html>
Back to file list