Fix errors and bugs in the given code, without changing its intended functionality. ONLY return the fixed code and nothing else. Enclose the entire code in a single code block.



```javascript
// javascript
async function predictImage(formData) {
    try {
        const result = await eel.process_image(formData.get("file"))();
        return result;
    } catch (error) {
        console.error("Error in Eel prediction:", error);
        throw error;
    }
}

$(document).ready(function () {
    $("#myModal").modal("show");
    document
        .getElementById("identifyForm")
        .addEventListener("submit", function (e) {
            e.preventDefault();
            var file = document.getElementById("imageInputCompressed").files[0]; // Fix to obtain file from input
            if (!file) {
                console.error("No file selected");
                return;
            }
            const fileSize = file.size;

            var gps = undefined;
            console.log(gps);

            var formData = new FormData();
            formData.append("file", file);
            formData.append("gps", gps);

            predictImage(formData)
                .then((data) => {
                    console.log(data);
                    const className = data.class_name;
                    const indices = data.indices;
                    if (className != undefined) {
                        let galleryImage = "";
                        for (var i = 0; i < indices.length; i++) {
                            galleryImage += `<div class="galleryImage item flex-item">
                                <a href="javascript:void(0);" class="openBtn" data-src="https://storage.googleapis.com/hjpdypublic/train/${indices[i]}.jpg">
                                <img src="https://storage.googleapis.com/hjpdypublic/train/${indices[i]}.jpg" alt="${getClassName(indices[i])[1]}" />
                                </a>
                                <h3 class="mt-2 font-weight-bold text-center">
                                ${getClassName(indices[i])[0]}
                                </h3>
                            </div>`;
                        }

                        $("#hasil_identifikasi").text(`Hasil Identifikasi`);
                        $("#deskripsi_identifikasi").text(solution[className].Deskripsi);
                        $("#quickGallery").html(galleryImage);
                    }
                    stopScanAnimation();
                })
                .catch((error) => {
                    console.error("Error:", error);
                    stopScanAnimation();
                });
        });
});
```

```python
# app.py
import eel
import socket
import os
import struct

# Configuration
DIRECTORY = '/Users/hendri/Documents/PROJECTS/portable_a3/images'
SERVER_IP = '192.168.173.52'
SERVER_PORT = 12345
BUFFER_SIZE = 4096

eel.init('web')

@eel.expose
def list_images():
    return [f for f in os.listdir(DIRECTORY) if f.lower().endswith(('.png', '.jpg', '.jpeg', '.gif'))]

@eel.expose
def process_image(file_name):
    file_path = os.path.join(DIRECTORY, file_name)
    
    if not os.path.exists(file_path):
        return f"File {file_name} not found in {DIRECTORY}."
    
    try:
        with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as client_socket:
            client_socket.connect((SERVER_IP, SERVER_PORT))
            send_file(client_socket, file_path)
            
            try:
                received_file_path = receive_file(client_socket, DIRECTORY)
                return f'Processed image saved at: {received_file_path}'
            except ConnectionError as e:
                return f"Error receiving file: {e}"
            except struct.error:
                return "Received invalid data from server. The inference might have failed."
    
    except ConnectionRefusedError:
        return f"Could not connect to server at {SERVER_IP}:{SERVER_PORT}. Is the server running?"
    except Exception as e:
        return f"An unexpected error occurred: {e}"

def send_file(conn, file_path):
    with open(file_path, 'rb') as f:
        file_data = f.read()
    
    file_name = os.path.basename(file_path).encode('utf-8')
    name_length = len(file_name)
    file_size = len(file_data)

    conn.sendall(struct.pack('!I', name_length))
    conn.sendall(file_name)
    conn.sendall(struct.pack('!Q', file_size))
    conn.sendall(file_data)

def receive_file(conn, save_directory):
    name_length = struct.unpack('!I', conn.recv(4))[0]
    file_name = conn.recv(name_length).decode('utf-8')
    file_path = os.path.join(save_directory, 'predicted_' + file_name)
    file_size = struct.unpack('!Q', conn.recv(8))[0]

    with open(file_path, 'wb') as f:
        remaining = file_size
        while remaining > 0:
            chunk_size = BUFFER_SIZE if remaining > BUFFER_SIZE else remaining
            chunk = conn.recv(chunk_size)
            if not chunk:
                raise ConnectionError("Connection closed while receiving file")
            f.write(chunk)
            remaining -= len(chunk)

    return file_path

eel.start('index.html', size=(800, 600))
```

error: VM10 index.html:270 Uncaught TypeError: Cannot read properties of null (reading 'files')
at HTMLFormElement.<anonymous> (VM10 index.html:270:71)
﻿