Ahmed Sherif’s Journey with Neferdata API: Revolutionizing Menu Scrapper at Dragon’s Bootcamp

At Dragon’s Bootcamp, we are constantly exploring new technologies to enhance our projects, and one of the most transformative tools we’ve worked with is the Neferdata API. In a world where AI has become an essential part of every software, the Neferdata API has drastically improved the speed and accuracy of our AI-powered projects. Today, I want to share my experience using Neferdata to build a menu scraper that seamlessly digitizes physical menus in seconds.

The Core Problem: Manual Menu Data Extraction

The project’s core focus was to solve an issue that many companies face—capturing data from physical menus accurately and without noise. While this concept may sound straightforward, extracting menu data correctly and converting it into a clean digital format has traditionally been time-consuming. We used to rely on manual input or outdated tools that often introduced errors, making the process frustrating and resource-intensive.

Introducing Neferdata API: Transforming Data with AI

Enter the Neferdata API. With its AI functionality, the Neferdata platform offers a fast and reliable way to capture and transform physical data, such as images of menus, into structured digital formats. The AI effectively minimizes noise, ensuring that the extracted information is as accurate as possible. It reduced the time spent processing a menu from hours to just a few seconds.

Imagine how much labor this saves for businesses, reducing costs dramatically while delivering top-notch quality :)

Empowering Users with Custom Corrections

One of the key strengths of Neferdata is that it empowers the user to correct the outcomes at every stage. For instance, if a low-resolution image or a distorted menu is scanned, users are given the chance to review and correct any discrepancies. This iterative process ensures that even difficult-to-read menus become part of the digital archive with high accuracy.

Customizing for PDFs: Expanding Neferdata’s Capabilities

In our project, we took this one step further. Neferdata does not natively accept PDFs for menu extraction yet, but I created a custom function to split PDF documents into individual images, allowing the API to process each page of the menu separately. This workaround enhanced the system’s flexibility, making it more powerful for real-world applications where many menus are distributed in PDF format.

The Results: Smarter Applications, Happy Users

This entire journey has been incredibly rewarding. The Neferdata API not only sped up the process but also allowed us to build smarter applications, ones that make the end-user experience truly magical. People no longer want “dumb” apps that do things the old way. AI-driven apps are the new standard, and users expect intelligent, responsive systems that adapt to their needs effortlessly.

Meeting Expectations and Cutting Costs with AI

With Neferdata, we’ve been able to meet that expectation. The project documentation provides a clear overview of how the API works, including setup, AI integration, and user feedback mechanisms. By leveraging AI with accuracy, we’re able to enhance customer satisfaction while cutting down on labor and expenses—a win-win for everyone.

A Game-Changer for Developers and Businesses

This project truly exemplifies what AI can achieve. Neferdata allowed us to streamline the digitization process, ensuring that even the most complex, low-resolution, or distorted menu images are captured and transformed with precision. Dragon’s Bootcamp couldn’t have been prouder of the outcome, and I can confidently say that this tool will be a game-changer for developers and businesses alike.

How it Works ??!

Project Scope:

? Accurately extract physical menu data and convert it to a digital format in seconds.

? Neferdata’s AI minimizes noise in the data, ensuring the highest possible accuracy.

? Users can correct outcomes at each stage, optimizing data from even low-resolution or distorted images.

? Added custom functionality to split PDFs into images for processing, as Neferdata currently handles only images directly.

Project Technical Stack and Challenges

In this project, we used Python in both the frontend and backend, with WebAssembly (Wasm) facilitating Python's execution in the browser. Below are examples of key functionality implemented in Python, followed by their JavaScript alternatives for comparison.

1. Python Execution in the Browser (Using Pyodide)

In the frontend, we used Pyodide to execute Python code, enabling Python functions to run directly in the browser.

Python (Pyodide Example):

import pyodide

# Example of running Python code in the browser

def execute_python_code():

    result = """

    import numpy as np

    np_array = np.array([1, 2, 3, 4, 5])

    np_array * 2

    """

    pyodide.runPython(result)

    print("Python executed successfully in the browser")        

JavaScript Alternative:

// Equivalent JavaScript code using plain JS for similar logic

function executeJavaScriptCode() {

    let array = [1, 2, 3, 4, 5];

    let doubledArray = array.map(num => num * 2);

    console.log(doubledArray);  // Output: [2, 4, 6, 8, 10]

}

executeJavaScriptCode();        

In JavaScript, this kind of logic is handled natively, making it quicker to execute without needing a WebAssembly layer.

---

2. Handling File Uploads in the Frontend

We used Python to handle file uploads and process the file data directly in the frontend with WebAssembly.

Python (File Handling Example):

def handle_file_upload(file_path):

    # Open and read file content

    with open(file_path, 'rb') as file:

        data = file.read()

    

    # Process file data (e.g., parsing or validation)

    processed_data = process_file_data(data)

    return processed_data

def process_file_data(data):

    # Example processing logic for file data

    return f"Processed {len(data)} bytes of data."        

JavaScript Alternative:

// Equivalent file upload handling in JavaScript

function handleFileUpload(event) {

    let file = event.target.files[0];

    let reader = new FileReader();

    

    reader.onload = function(e) {

        let data = e.target.result;

        console.log("Processed " + data.length + " bytes of data");

    };

    

    reader.readAsBinaryString(file);

}

document.getElementById('upload').addEventListener('change', handleFileUpload);        

In JavaScript, the FileReader API is commonly used to handle file uploads and read file contents.

---

3. Retrieving Data for Display in the Frontend

We used Python to retrieve and format data (menu items) dynamically in the frontend.

Python (Data Retrieval Example):

def get_menu_items():

    # Simulate menu data retrieval

    menu = {

        "item1": {"name": "Pizza", "price": 12.99},

        "item2": {"name": "Burger", "price": 8.99},

    }

    return menu

def format_menu_items(menu):

    # Format menu items for display

    formatted_items = [

        {"name": item["name"], "price": f"${item['price']:.2f}"} 

        for item in menu.values()

    ]

    return formatted_items

# Fetch and format menu items

formatted_menu = format_menu_items(get_menu_items())

print(formatted_menu)        

JavaScript Alternative:

// Equivalent JavaScript code for data retrieval and formatting

function getMenuItems() {

    return {

        item1: {name: "Pizza", price: 12.99},

        item2: {name: "Burger", price: 8.99}

    };

}

function formatMenuItems(menu) {

    let formattedItems = Object.values(menu).map(item => {

        return {name: item.name, price: $${item.price.toFixed(2)}};

    });

    return formattedItems;

}

let formattedMenu = formatMenuItems(getMenuItems());

console.log(formattedMenu);  // Output: [{name: 'Pizza', price: '$12.99'}, {name: 'Burger', price: '$8.99'}]        

JavaScript handles object manipulation natively, making this kind of data retrieval and formatting faster without WebAssembly.

---

4. Handling User Input and Validation

Python was used to process and validate user input directly in the frontend, a task typically handled by JavaScript.

Python (User Input Handling Example):

def get_user_input(value):

    # Simulate retrieving user input

    return f"User input received: {value}"

def validate_input(value):

    # Basic validation for input

    if not value.strip():

        return "Input cannot be empty."

    return "Valid input received."

# Example of getting and validating user input

user_input = "  Test Input  "

validation_message = validate_input(user_input)

print(validation_message)  # Output: "Valid input received."        

JavaScript Alternative:

// Equivalent JavaScript code for handling and validating user input
function getUserInput(value) {
    return "User input received: " + value;
}

function validateInput(value) {
    if (!value.trim()) {
        return "Input cannot be empty.";
    }
    return "Valid input received.";
}

let userInput = "  Test Input  ";
let validationMessage = validateInput(userInput);
console.log(validationMessage);  // Output: "Valid input received."        

In JavaScript, input handling and validation are performed natively, usually within form events or inline validation checks.

In this project, using WebAssembly (Wasm) with Pyodide allowed us to execute Python code in the browser effectively. This Python-based frontend approach can be incredibly powerful for those familiar with Python.

The future of AI in development is exciting, and Neferdata is at the forefront of that transformation. I’m eager to see where this technology takes us next.

— Ahmed Sherif, Software Engineer at Dragon’s Bootcamp LLC