I am trying to build a demo for teaching purpose(completely new to this). The backend python code is in main.py, placed under the myproject/ folder. The frontend html code is in index.html, placed under myproject/templates/ folder.

I attached the two files at the bottom of this post. When I put http://127.0.0.1:5000 in web browser, I got the error page below. Can someone help me out here?

Traceback (most recent call last):   File "C:Userswang0105AppDataLocalanaconda3Libsite-packagesflaskapp.py", line 2552, in __call__     return self.wsgi_app(environ, start_response)            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^   File "C:Userswang0105AppDataLocalanaconda3Libsite-packagesflaskapp.py", line 2532, in wsgi_app     response = self.handle_exception(e)                ^^^^^^^^^^^^^^^^^^^^^^^^   File "C:Userswang0105AppDataLocalanaconda3Libsite-packagesflaskapp.py", line 2529, in wsgi_app     response = self.full_dispatch_request()                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^   File "C:Userswang0105AppDataLocalanaconda3Libsite-packagesflaskapp.py", line 1825, in full_dispatch_request     rv = self.handle_user_exception(e)          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^   File "C:Userswang0105AppDataLocalanaconda3Libsite-packagesflaskapp.py", line 1823, in full_dispatch_request     rv = self.dispatch_request()          ^^^^^^^^^^^^^^^^^^^^^^^   File "C:Userswang0105AppDataLocalanaconda3Libsite-packagesflaskapp.py", line 1799, in dispatch_request     return self.ensure_sync(self.view_functions[rule.endpoint])(**view_args)            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^   File "c:Userswang0105.vscodefirst.py", line 52, in index     return render_template('index.html')            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^   File "C:Userswang0105AppDataLocalanaconda3Libsite-packagesflasktemplating.py", line 146, in render_template     template = app.jinja_env.get_or_select_template(template_name_or_list)                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^   File "C:Userswang0105AppDataLocalanaconda3Libsite-packagesjinja2environment.py", line 1081, in get_or_select_template     return self.get_template(template_name_or_list, parent, globals)            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^   File "C:Userswang0105AppDataLocalanaconda3Libsite-packagesjinja2environment.py", line 1010, in get_template     return self._load_template(name, globals)            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^   File "C:Userswang0105AppDataLocalanaconda3Libsite-packagesjinja2environment.py", line 969, in _load_template     template = self.loader.load(self, name, self.make_globals(globals))                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^   File "C:Userswang0105AppDataLocalanaconda3Libsite-packagesjinja2loaders.py", line 125, in load     source, filename, uptodate = self.get_source(environment, name)                                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^   File "C:Userswang0105AppDataLocalanaconda3Libsite-packagesflasktemplating.py", line 62, in get_source     return self._get_source_fast(environment, template)            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^   File "C:Userswang0105AppDataLocalanaconda3Libsite-packagesflasktemplating.py", line 98, in _get_source_fast     raise TemplateNotFound(template) jinja2.exceptions.TemplateNotFound: index.html

Main.py

from flask import Flask, request, jsonify, render_template
from collections import defaultdict

app = Flask(__name__)

# Order book structure
order_book = {
    'buy': defaultdict(list),  # Buy orders (price -> list of orders)
    'sell': defaultdict(list)  # Sell orders (price -> list of orders)
}

# Process a new order
def process_order(order):
    order_type = order['type']
    price = order['price']
    quantity = order['quantity']
    side = order['side']

    if order_type == 'market':
        # Market order logic
        if side == 'buy':
            fulfill_order('sell', quantity)
        elif side == 'sell':
            fulfill_order('buy', quantity)
    elif order_type == 'limit':
        # Limit order logic
        order_book[side][price].append(quantity)

def fulfill_order(side, quantity):
    opposite_side = 'buy' if side == 'sell' else 'sell'
    prices = sorted(order_book[opposite_side].keys(), reverse=(side == 'buy'))

    for price in prices:
        orders = order_book[opposite_side][price]
        for i in range(len(orders)):
            if quantity == 0:
                break
            if orders[i] <= quantity:
                quantity -= orders[i]
                orders[i] = 0
            else:
                orders[i] -= quantity
                quantity = 0

        # Remove fulfilled orders
        order_book[opposite_side][price] = [q for q in orders if q > 0]
        if not order_book[opposite_side][price]:
            del order_book[opposite_side][price]

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/submit_order', methods=['POST'])
def submit_order():
    order = request.json
    process_order(order)
    return jsonify(order_book)

@app.route('/order_book')
def get_order_book():
    return jsonify(order_book)

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

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Trading Game</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <h1>Trading Game</h1>
    <form id="orderForm">
        <label for="orderType">Order Type:</label>
        <select id="orderType">
            <option value="limit">Limit</option>
            <option value="market">Market</option>
        </select>
        <label for="side">Side:</label>
        <select id="side">
            <option value="buy">Buy</option>
            <option value="sell">Sell</option>
        </select>
        <label for="price">Price:</label>
        <input type="number" id="price" step="0.01">
        <label for="quantity">Quantity:</label>
        <input type="number" id="quantity">
        <button type="submit">Submit Order</button>
    </form>
    <canvas id="orderBookChart" width="600" height="400"></canvas>
    <script>
        async function fetchOrderBook() {
            const response = await fetch('/order_book');
            return await response.json();
        }

        function renderOrderBook(orderBook) {
            const ctx = document.getElementById('orderBookChart').getContext('2d');
            const buyOrders = Object.entries(orderBook.buy).map(([price, orders]) => ({
                price: parseFloat(price),
                quantity: orders.reduce((a, b) => a + b, 0)
            })).sort((a, b) => a.price - b.price);
            const sellOrders = Object.entries(orderBook.sell).map(([price, orders]) => ({
                price: parseFloat(price),
                quantity: orders.reduce((a, b) => a + b, 0)
            })).sort((a, b) => a.price - b.price);

            const data = {
                labels: [...buyOrders.map(o => o.price), ...sellOrders.map(o => o.price)],
                datasets: [
                    {
                        label: 'Buy Orders',
                        data: buyOrders.map(o => o.quantity),
                        backgroundColor: 'green',
                    },
                    {
                        label: 'Sell Orders',
                        data: sellOrders.map(o => o.quantity),
                        backgroundColor: 'red',
                    }
                ]
            };

            new Chart(ctx, {
                type: 'bar',
                data: data,
                options: {
                    scales: {
                        x: { title: { display: true, text: 'Price' } },
                        y: { title: { display: true, text: 'Quantity' } }
                    }
                }
            });
        }

        document.getElementById('orderForm').addEventListener('submit', async function (e) {
            e.preventDefault();
            const order = {
                type: document.getElementById('orderType').value,
                side: document.getElementById('side').value,
                price: parseFloat(document.getElementById('price').value),
                quantity: parseInt(document.getElementById('quantity').value)
            };
            const response = await fetch('/submit_order', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(order)
            });
            const orderBook = await response.json();
            renderOrderBook(orderBook);
        });

        document.addEventListener('DOMContentLoaded', async function () {
            const orderBook = await fetchOrderBook();
            renderOrderBook(orderBook);
        });
    </script>
</body>
</html>

`