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
async function predictImage(formData) {
    try {
      const result = await eel.process_image(formData)();
      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 = imageInputCompressed;
        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();
              });
      });

eel app.py:
# app.py
import eel
import socket
import os
import sys
import struct

# Configuration
DIRECTORY = '/Users/hendri/Documents/PROJECTS/portable_a3/images'
# SERVER_IP = '192.168.173.52'
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:307 Error: {errorText: `TypeError("join() argument must be str, bytes, or os.PathLike object, not 'dict'")`, errorTraceback: `Traceback (most recent call last):\n  File "/Users/…be str, bytes, or os.PathLike object, not 'dict'\n`}