Browser-side AI model training system and method suitable for low-configuration hardware

Abstract

The application discloses a browser-side AI model training system and method suitable for low-configuration hardware, comprising the following steps: step one, model construction: receiving the building block dragged by a user through a graphical building block editor, and generating the corresponding neural network model definition according to the connection relationship of the building block; step two, data management: dynamically generating a data management interface according to the task type, receiving the training data imported by the user and generating a standardized data set; step three, model training: calling the TensorFlow.js framework on the browser side, executing model training by using WebGL or a CPU back end, and displaying the training index in real time; step four, model prediction: loading the trained model, performing inference on new data input by the user, and showing the prediction result; the application has the advantages of low hardware threshold, flattened programming threshold, low process coupling degree, no environment configuration, zero privacy risk, rich practical content, high transparency and freedom.

Description

Technical Field

[0001] This invention relates to the field of artificial intelligence education technology, specifically to a browser-based AI model training system and method suitable for low-configuration hardware. Background Technology

[0002] Currently, in the field of artificial intelligence education, local high-end graphics cards or cloud computing power are commonly used, existing models are fine-tuned, or existing large models are used.

[0003] The existing technology has the following problems: 1. High hardware requirements: Training AI models usually requires a dedicated graphics card and CUDA support, but school computer labs are generally outdated and cannot meet the requirements. 2. High programming threshold: The entire process of AI model building, training, and prediction heavily relies on Python programming, requiring the learning of complex framework APIs.

[0004] 3. The environment configuration is complex. Local deployment requires the installation of various SDKs and even the replacement of the operating system. It is difficult to deploy quickly in data center environments where Windows is commonly used.

[0005] 4. The process is highly coupled, with model design, data management, training, and prediction being highly coupled, making it difficult to break down and understand, which is not conducive to teaching.

[0006] 5. Privacy risks: Some platforms require data to be uploaded to the cloud for training, which poses a risk to data privacy and security.

[0007] 6. The practical content is lacking. Some platforms only offer theoretical learning and lack hands-on practice; some platforms have high professional requirements and steep learning curves; and some platforms only have applications in image classification.

[0008] 7. Low transparency and freedom: Some platforms hide or encrypt core assets such as the training process and model files, making it impossible for students to explore them in depth.

[0009] The information disclosed in this background section is intended only to enhance the understanding of the overall background of the invention and should not be construed as an admission or in any way implying that the information constitutes prior art known to those skilled in the art. Summary of the Invention

[0010] The technical problem this invention aims to solve is to overcome the above-mentioned technical defects and provide a browser-based AI model training system and method suitable for low-configuration hardware. It adopts a server-browser overall architecture to address issues related to environment configuration, local computing power usage, and privacy protection. It uses Blockly for visual model building to address the need for prior programming skills; it employs templates for different project types and instance data-driven approaches to address the lack of practical content and low degree of freedom; it uses a standardized four-step method to address high process coupling; and it adopts a strategy of full-flow visualization and transparent intermediate files to address low transparency.

[0011] To address the aforementioned problems, the technical solution of this invention is a browser-based AI model training method suitable for low-configuration hardware, comprising the following steps: Step 1: Model Building: The graphical block editor receives the blocks dragged by the user and generates the corresponding neural network model definition based on the connection relationship of the blocks. Step 2, Data Management: Dynamically generate a data management interface based on the task type, receive training data imported by the user, and generate a standardized dataset; Step 3: Model Training: Call the TensorFlow.js framework on the browser side, use WebGL or CPU backend to execute model training, and display training metrics in real time; Step 4: Model Prediction: Load the trained model, perform inference on the new data input by the user, and display the prediction results.

[0012] Preferably, the graphical block editor includes custom blocks, each block corresponding to a TensorFlow.js layer type, and the block parameter configuration is mapped to the layer configuration parameters in real time.

[0013] Preferably, the data manager supports multiple data types, including category label columns, numerical regression columns, and bounding box coordinate columns, with different types of data columns corresponding to different UI controls.

[0014] Preferably, the model training includes the step of automatically detecting the computing backend: prioritizing the WebGL backend, and automatically switching to the CPU backend if the WebGL backend fails.

[0015] Preferably, the model training includes batch training and memory management steps: tensor memory is released immediately after each batch of training, and memory is forcibly cleaned up after every N batches.

[0016] Preferably, the data manager further includes a data enhancement module that synchronously transforms the corresponding bounding box coordinates when performing geometric transformations on the image data.

[0017] Preferably, the model training also includes a multi-output head processing step: automatically configuring the corresponding loss function and evaluation metric according to the task type of the output head.

[0018] Preferably, the trainer also supports reinforcement learning training, including: physical environment simulation, experience replay buffer, and target network update.

[0019] Preferably, the model export step is also included: converting the trained model into TFLite format, C language header file format, and ONNX universal format for loading and use by mobile devices, embedded devices, other platforms, and model training frameworks.

[0020] This application also discloses a browser-based AI model training system suitable for low-configuration hardware, which applies the methods described above, including: Block Editor Module: Provides a graphical block interface and generates model definitions based on the connection relationships between blocks; Data Manager module: Used to dynamically generate a data management interface based on task type to manage training data; Trainer module: Used to perform model training on the browser side, automatically selecting the computation backend; Predictor module: Used to load the model and perform inference predictions.

[0021] The advantages of this invention compared to existing technologies are: 1. This invention lowers the hardware threshold, allowing existing outdated hardware to support experiments on various types of models required for AI education practice, greatly reducing the hardware threshold and implementation costs, and is particularly suitable for promotion and use in ordinary primary and secondary schools with limited funds and in remote areas.

[0022] 2. This invention lowers the programming barrier by using the Blockly visual interface to define neural network models and convert them into trainable models.

[0023] 3. This invention features low process coupling. The four-step method of visual model design, data management, model training, and model prediction within a browser ensures clear steps, low coupling, standardized data, and a clear teaching process. This reduces the learning difficulty for both teachers and students, ensuring effective teaching.

[0024] 4. This invention requires no environment configuration; simply open a browser to use it.

[0025] 5. This invention has zero privacy risks, as both training and prediction data are processed in a local browser.

[0026] 6. This invention offers rich practical content, comprehensive project type coverage, and extremely simple project instance construction, providing practical interfaces for mobile devices, embedded hardware, and general models (exporting TF Lite, .H, and ONNX models).

[0027] 7. This invention offers high transparency and flexibility, with all process parameters, data processing methods, generated files, and their contents exposed and readily available for review, supporting free modification and in-depth exploration. It also focuses on the core content of AI education. Attached Figure Description

[0028] Figure 1 This is the system architecture diagram of the present invention.

[0029] Figure 2 This is a diagram of the generator-discriminator dual-model architecture of this invention.

[0030] Figure 3 This is a diagram of the multi-output head architecture of the present invention. Detailed Implementation

[0031] To make the content of this invention easier to understand, the technical solutions in the embodiments of this invention will be clearly and completely described below with reference to the accompanying drawings.

[0032] like Figure 1-3 As shown, this is a browser-based AI model training system suitable for low-configuration hardware. The system uses a server-browser architecture to decouple the environment configuration from the application and implement a visual interface on the browser side.

[0033] The server-side uses the Laravel framework, with core functionalities implemented in JavaScript and Python. It is primarily responsible for browser page building and handling the following "heavy tasks," ensuring a lightweight front-end: The model configuration service receives a JSON structure description of the front-end Blockly graphical configuration; verifies the validity of the model structure (layer connections, input and output dimension matching); converts the graphical configuration into a TensorFlow.js executable model definition; and generates model metadata (input shape, output shape, layer parameters, etc.).

[0034] The model export service receives the weights and structure of the trained model; verifies the model's integrity; converts it to the target format (TF Lite, .H, ONNX model, etc.); and returns the download file.

[0035] The browser-side implementation uses pure JavaScript to achieve the core functionality, and the core process includes four steps: graphical model building, visual data preparation, visual model training, and visual prediction.

[0036] The first step involves creating a graphical model that maps Blockly blocks to TensorFlow.js layers and constructs TensorFlow.js models from the blocks using topological sorting. The core implementation process includes: customizing Blockly blocks and toolkits, customizing the mapping relationship between blocks and TensorFlow.js layers, and converting the block XML into a TensorFlow.js model using topological sorting.

[0037] (1) Use Blockly as the interface to implement custom blocks and toolboxes.

[0038] (a) iframe isolation solution: The iframe isolation solution addresses the conflict between Vue's use of the virtual DOM and Blockly's direct manipulation of the real DOM. Isolated rendering: The Blockly editor runs in a separate iframe, and DOM manipulation is isolated from the parent frame; Cross-window communication: Enables bidirectional communication between the iframe and its parent window via the postMessage API; Authentication: A token mechanism is used to ensure secure communication and prevent cross-site scripting attacks.

[0039] Custom building blocks allow for modular configuration of neural network models. Each block type corresponds to a TensorFlow.js layer and supports corresponding parameter configuration. Some block definitions are as follows:

[0040] The Blockly toolbox is a custom toolbox organized in JSON format, with blocks categorized by function. Some definitions are as follows:

[0041] (2) The browser saves the Blockly workspace as XML and sends a conversion request.

[0042] (3) The server converts it into a JSON model of TensorFlow.js and returns the conversion result.

[0043] (a) Main entry point and process control: The server loads XML and parses the model type, distributes the corresponding type conversion task to the specific conversion process, and returns the standard model after the conversion is completed.

[0044] (ii) Mapping from building blocks to TensorFlow.js layer objects: This translates the visual building blocks into a "dictionary" of layer configurations that the framework can understand. It handles parameter mapping, default values, and special cases like LeakyReLU that require splitting into two layers.

[0045] (III) Single-output model processing: For sequential models without branching structures, the `_convertSingleOutput` method is used to convert them into TensorFlow.js model configurations. The core process is as follows:

[0046] Key processing logic: When both main input and label input exist simultaneously, this invention employs different injection strategies based on the input data type and the first-level type: Input data dimension determination: 4D (image): [batch, height, width, channels] 3D (sequence): [batch, seq_len, features] 2D (vector): [batch, features] Tag injection strategy: If the first layer is an Embedding: the tag is injected after the Embedding layer (applicable to text + conditional information). If the first layer is other: Image data: RepeatVector → Reshape → Concatenate (copies labels to each pixel position); Sequence data: RepeatVector → Concatenate (copies labels to each time step); Vector data: directly concatenate (concatenate along the feature dimension).

[0047] (iv) Multi-output model processing, Support for building multi-output models is achieved by combining a shared layer with multiple output heads into a single functional model. This conversion is performed using the `_convertMultiOutput` and `_buildFunctionalModel` methods.

[0048] The second step, data preparation for visualization, involves automatically generating standardized training datasets and metadata for different task types by building different data managers or teach pendants for different project types. This process follows a similar workflow: Export settings: Text elements set length and encoding method; Image elements set image size, number of channels, etc. Dimension configuration: Supports single-dimensional and multi-dimensional tags, etc.; Data import: Supports importing data of various types; supports editing exported data...; Data Export: Add individual metadata for use by the restore settings and trainer when exporting data back.

[0049] The data manager of this invention enables the trainer and predictor to obtain metadata information by retaining metadata in the exported data, thereby processing the data correctly.

[0050] Step 3: Visual Model Training S1. A method was created that ensures stable model training using TensorFlow.js in the browser through iframe isolation, manual batch training, fine-grained memory and tensor lifecycle management, dynamic resource adaptation and hardware protection, and state synchronization.

[0051] (1) iframe isolation uses a method similar to that used to resolve DOM conflicts in Blockly: global singleton and iframe isolation. A TensorFlow.js singleton is created by the loader and injected into the iframe or obtained from the page by the iframe, thus solving the problem of memory corruption caused by multiple TensorFlow.js instances coexisting on the same page.

[0052] (2) Manual batch training: The training process of the trainer of the present invention adopts the manual batch training mode as a whole, which is the framework of the solution.

[0053] (3) Fine-grained memory and tensor lifecycle management: low-end hardware (such as integrated graphics cards) has extremely limited video memory, and any slight leak can lead to a crash within a few rounds.

[0054] (a) Explicit Tensor Cleanup Within the training loop of the `startTraining` function, a `try...finally` block ensures that the `dispose()` method is explicitly called to release the images and `batchY` tensors created in each batch, regardless of whether training succeeds or fails. This prevents GPU memory leaks caused by untimely JavaScript garbage collection (GC), and is the core solution to the tensor problem.

[0055] (II) Differentiating between single / multi-tag cleanup logic In the `finally` block of the code above, the `if (this.isMultiLabel)` condition is used to iterate and clean up multi-label patterns (where `batchY` is an object), and to directly clean up single-label patterns (where `batchY` is a tensor). This avoids new leaks caused by incorrect cleanup methods (such as processing tensors by iterating over objects).

[0056] (III) Auxiliary Cleanup Mechanism The `cleanMemory()` method is triggered as a fallback strategy when memory monitoring (`_startMemoryMonitoring`) detects that the number of tensors exceeds a threshold (e.g., 300). This handles minor leaks that may not be perfectly caught, further ensuring stability during long-term operation.

[0057] (4) Dynamic resource adaptation and hardware protection The computing and memory capabilities of low-end hardware vary greatly. Fixed training parameters can easily exceed the hardware limits, causing the WebGL context to be lost (crash).

[0058] (I) Dynamic safety batch size detection Before training, the batch size is automatically tested from small to large to find a safe value that will not cause memory or texture overflow. This prevents users from setting excessively large batch sizes, which could lead to the loss of WebGL context, and enables training to run adaptively on computers with different configurations.

[0059] (II) Model Texture Requirement Detection After the model is loaded, the required texture size for the embedding layer is calculated and compared with the hardware limit. This provides an early warning that the model is too large to run, avoiding the discovery that the hardware does not support it only after training has begun.

[0060] (iii) Appropriately relinquish control of the main thread In the data preprocessing loop (await new Promise(resolve => setTimeout(resolve, 0))) and after each batch (await this.tf.nextFrame()), control is actively returned to the browser. This prevents long-term computation from blocking UI rendering and the event loop, avoiding browser tabs from "freezing" or becoming unresponsive.

[0061] (5) State synchronization Ensure that the training process can be paused and resumed, and that the model configuration is consistent with the data.

[0062] (I) Configuration persistence and synchronization The trainer saves training settings and passes necessary data management settings. For example, in a text classification task, the `preprocessConfig` object contains all the settings for the word segmenter. These configurations are written to `metadata.json` when the model is saved and are restored when the prediction engine is activated or training continues. Ensuring that the word segmentation logic is completely consistent between training and prediction is a prerequisite for the model to work correctly and is also the most easily overlooked "invisible" guarantee during demonstrations.

[0063] (ii) The recoverability of the training state is crucial for AI teaching scenarios with limited class time, as it supports the "continue training" function by recording progress.

[0064] S2, Model Loader Because each different project type's trainer and predictor requires loading untrained / trained models, the model loading function is extracted and is responsible for reconstructing Sequential, Functional, and branch-merging models from trained or untrained model files.

[0065] The model loading process is as follows: (1) Main entrance and task distribution.

[0066] (2) Sequential model loading, handling the simplest linear stacked structure. Its core is to correctly extract the input shape (inputShape), then traverse the layer configuration, set the input shape for the first layer, and skip the InputLayer.

[0067] (3) Functional model loading is the key to handling complex structures such as multiple outputs and branch merging. It requires manual reconstruction of the computation graph.

[0068] (4) Restore the weights. Regardless of which trained model is loaded, the trained weights need to be "loaded" in at the end. This is a prerequisite for the model to be used directly for prediction or to continue training.

[0069] S3, Training Configuration Data augmentation and model export: Configure hyperparameters and data augmentation for corresponding training types using a visual interface; generate standardized trained models (model + weights + metadata); support exporting trained models as TensorFlow.js and .H models.

[0070] (1) Trained model Save the trained model as a standard TensorFlow.js model, along with attached metadata. The data format is a zip compressed file containing the model, weights, and metadata.

[0071] The `model.json` file contains the standard model, `group1-shard1of1.bin` contains the weights, and `metadata.json` contains the saved metadata. By saving information such as encoding, tokenizer, and labels, the predictor's behavior is made consistent with the trainer's.

[0072] (2) Export TF Lite\.H\ONNX model This feature uses a Node.js main control script to call a Python machine learning environment to convert custom models into TensorFlow Lite format suitable for mobile devices, C language header files (.h) for embedded devices, and the general intermediate format ONNX (supporting domestic platforms and training frameworks such as Huawei Ascend, Baidu PaddlePaddle, Arm Technology's "Zhouyi", and Loongson).

[0073] The specific implementation process is as follows: Model reception and preprocessing (Node.js): The system receives compressed packages uploaded by the front-end or training end.

[0074] Use JSZip to decompress and extract the core model.json (topology structure) and .bin (weight data).

[0075] Perform double formatting fixes: Deeply clean the JSON key names (e.g., inputDim -> input_dim) and array structures on the Node.js side to ensure they conform to the Keras specification.

[0076] Cross-language conversion core (Node.js -> Python): The Node.js script generates a temporary Python execution environment and passes the repaired file path to Python.

[0077] Secondary fix on the Python side: Reload and fine-tune the JSON structure using the tensorflowjs library.

[0078] Intelligent model loading: Detects the model type (LSTM, GAN, or standard model) and dynamically adjusts the conversion strategy (e.g., enabling SELECT_TF_OPS for LSTM and enabling float16 quantization for GAN).

[0079] Multi-format generation and post-processing: TF Lite Conversion: Uses TFLiteConverter to generate .tflite files.

[0080] ONNX Export: Uses the tf2onnx library to synchronously generate .onnx files for cross-platform deployment.

[0081] C header file generation (.H): Control is returned to Node.js, which reads the .tflite binary stream and automatically generates C / C++ header files containing model arrays and operator registration code (Operator Resolver), optimized specifically for TensorFlowLite Micro embedded development.

[0082] Part Four: Visual Prediction The TensorFlow.js singleton and model loading functionalities have already been implemented in the trainer; you can directly call the corresponding JavaScript classes. By using the exported metadata of the trained model, the predictor can obtain the corresponding data processing methods, ensuring consistency between training and testing times.

[0083] (1) Graphical interface: The interface loads the trained text classification model and makes predictions.

[0084] (2) Model loading: Load the model using a general model loader and parse the metadata to ensure that the parameters are the same as those during training.

[0085] (3) Prediction and result analysis: The prediction and reasoning process of the predictor is as follows: preprocessing data, creating input tensors, model reasoning and parsing results.

[0086] For reinforcement learning experiments, the process is different: Blockly configures the model, (optional) expert demonstration: humans directly manipulate the corresponding objects in the data manager, (optional) learning expert operation: train the model with demonstration data (supervised learning pre-training), reinforcement learning: train using untrained or trained models.

[0087] Among them, the trained model (pre-trained through supervised learning) will learn the task faster in the reinforcement learning stage. Example

[0088] In this invention, the Blockly model editor is common, the data manager is easily derived based on existing technology, and the predictor is easily derived based on existing technology. These will not be elaborated further in the following embodiments.

[0089] 1. Image generation The method for stably training models in a browser, as described in this invention, perfectly solves the problem of context loss during the training process in image generation tasks. The image generation task is implemented using upsampling layers and a GAN adversarial model.

[0090] 1.1 Training Engine Architecture The image generation training engine of this invention adopts a generator-discriminator dual-model architecture, and its core components are as follows:

[0091] 1.2 Conditional column support Unlike classification and regression tasks, the data manager for generative tasks needs to support the loading and encoding of "image-condition pairs":

[0092] Technical effect: After the user imports the data, the system automatically recognizes the condition columns, and conditional GAN ​​training can begin without manual coding.

[0093] 1.3 GAN Training Process (Conditional / Unconditional) The GAN trainer of this invention employs an alternating training strategy, and its core process is as follows:

[0094] 1.4 Multiple training sessions for the discriminator To improve training stability, this invention supports a strategy of training the generator only once after multiple training sessions of the discriminator (criticIterations parameter): In GAN training, if the discriminator is too weak, the generator can easily "fool" the system; if the discriminator is too strong, the generator's gradient may vanish. By training the discriminator multiple times, its ability to distinguish between real and fake images is ensured to be strong enough, thus providing the generator with more meaningful gradient signals.

[0095] 1.5 Label Smoothing To prevent the discriminator from becoming overconfident, this invention employs dynamic label smoothing technology:

[0096] Technical benefits: It avoids extreme values ​​in the discriminator output, provides smoother gradients, and improves training stability.

[0097] 1.6 Memory Management and Performance Optimization:

[0098] 1.7 Technical Effects

[0099] 2. Image Classification and Regression This case study demonstrates the core capabilities of this invention in supervised learning tasks, particularly its support for multi-output models. Taking a task that simultaneously includes image classification and bounding box regression as an example, the system showcases the complete process from data loading and model configuration to multi-task training and prediction.

[0100] 2.1 Architecture Design of the Training Engine The image classification and regression training engine of this invention adopts a multi-output head architecture, and its core components are as follows:

[0101] 2.2 Data Adaptation with Data Manager Load training data in .icarmodel format:

[0102] 2.3 Data Loading The prepareData method converts the original image and labels into a tensor format required for model training:

[0103] 2.4 Data Augmentation This invention provides a data augmenter for project types that use data types such as images and sounds as input, so as to ensure that good training results can be achieved when using less training data on low-end hardware.

[0104] This invention implements an image data augmenter that supports simultaneous bounding box transformation, specifically designed for tasks such as object detection and image regression that require simultaneous transformation of image and labeled coordinates. Unlike traditional data augmentation, this module simultaneously calculates and updates the bounding box coordinates when performing geometric transformations on the image. Its augmentation types include:

[0105] 2.4.1 Implementation Strategy For geometric transformations, this module adopts a strategy of first calculating the bounding box and then transforming the image:

[0106] After the geometric transformation, it is necessary to verify whether the new bounding box is still valid:

[0107] 2.4.2 Implementation Principle of Geometric Transformation

[0108] When image boundary gaps are created by operations such as translation and rotation, multiple fill modes are supported:

[0109] In transformations such as rotation and scaling, bilinear interpolation is used to ensure image quality. Given a target point (x, y), locate four adjacent pixels in the source image: Q11(x1, y1), Q12(x1, y2), Q21(x2, y1), Q22(x2, y2) First, interpolate in the x-direction:

[0110]

[0111] Then interpolate in the y direction: .

[0112] 2.4.3 Implementation of Color Transformation

[0113] 2.4.5 Noise Enhancement

[0114] 2.5 Training loop (multiple output support), the trainer also adopts manual batch training mode.

[0115] 2.6 Uncertainty Weighting This engine supports multi-task uncertainty weighting and automatically balances the loss weights of multiple output heads:

[0116] Technical effect: High-difficulty tasks automatically receive lower weights, while low-difficulty tasks automatically receive higher weights, without the need for manual parameter tuning.

[0117] 2.7 Memory Management and Performance Optimization For low-configuration browser environments, this engine has implemented the following optimizations:

[0118] 3. Balance bar This case study is a typical example of reinforcement learning combined with training in a virtual environment. The task is to control the car's left and right movements to keep the vertical pole balanced and prevent it from tipping over.

[0119] 3.1 Differences from Supervised Learning

[0120] 3.2 The Four-Step Process of Reinforcement Learning Step 1: Visually build the model using Blockly Construct a classification model (due to expert instruction, it is a binary classification: left and right operations); Input: 4-dimensional state [position, velocity, angle, angular velocity]; Output: 2-dimensional Q-value [left shift Q-value, right shift Q-value].

[0121] Step 2: Optional Data Acquisition Device (Expert Demonstration) Physical environment (CartPole simulator); Humans control the car via keyboard → record state-action-reward → generate training data.

[0122] Step 3: Optional supervised learning training Transform expert teaching data into a regression task (Q-value regression); loss function: mean squared error (MSE); output: pre-trained model (which can accelerate reinforcement learning convergence).

[0123] Step 4: Reinforce learning training Deep Q-Network (DQN) algorithm; Experience Replay Buffer (breaking data correlation); Target Network (stabilizing training); ε-Greedy Strategy (balancing exploration and exploitation).

[0124] 3.3 Physical Environment Setup The physical environment of the stabilizer bar simulates the dynamic system of the cart and the bar, and its core physical parameters are as follows:

[0125] State space (4-dimensional): x: Car position (range: -2.4 to 2.4); x_dot: Vehicle speed; theta: Rod angle (range: -0.2 to 0.2 rad); theta_dot: angular velocity of the rod; Action space (2D): 0: Shift to the left (force = -F); 1: Shift to the right (force = +F); Car acceleration: x_acc = [F + m_pole·L·θ_dot²·sinθ] / (m_cart + m_pole) - (m_pole·L·θ_acc·cosθ) / (m_cart + m_pole); Rod angular acceleration: θ_acc = [g·sinθ - cosθ·(F + m_pole·L·θ_dot²·sinθ) / (m_cart + m_pole)] / [L·(4 / 3 - m_pole·cos²θ / (m_cart + m_pole))]; State update (Euler integral): x_new = x + x_dot·Δt; x_dot_new = x_dot + x_acc·Δt; θ_new = θ + θ_dot·Δt.

[0126] 3.4 Data Acquisition Device The data collector provides a visual interface, allowing humans to control the vehicle via a keyboard.

[0127] 3.5 Q-value calculation method During expert demonstrations, the system automatically calculates the Q-values ​​of the two actions based on the current state, which serve as the training targets for the regression task.

[0128] 3.6 Supervised Learning and Training The main difference between supervised training in reinforcement learning and standard supervised learning is:

[0129] If the model imported by the user was originally a classification model (with a Softmax output layer), the system will automatically convert it to a linear output.

[0130] 3.7 Enhanced Learning and Training The reinforcement learning trainer is the core of this case study. It adopts the Deep Q-Network (DQN) algorithm and includes key technologies such as experience replay, target network, and ε-greedy policy.

[0131] The experience replay buffer is used to store historical interaction data, breaking temporal correlation and improving training stability.

[0132] 3.8 Comparison of Training Results The effects of reinforcement learning after expert-led pre-training:

[0133] The effectiveness of reinforcement learning from scratch:

[0134] 4. Deployment and verification on ESP32-S3 hardware To verify the practical feasibility of the model exported in this invention on resource-constrained embedded devices, the trained image classification model was exported as a C array and successfully deployed to the ESP32-S3 development board for real-world testing.

[0135] 4.1 Deployment Process Training is completed on the browser side; export the TFLite model (.h file); integrate the .h model into the ESP32-S3 project; burn and run the program → draw numbers on the touchscreen → real-time recognition.

[0136] 4.2 Test Environment

[0137] 4.3 Model Processing and Inference Framework

[0138] 4.4 Specific Implementation Click "Export TF Lite .H Model" on the page; add the .H model to the ESP32 project; customize the communication rules between the LCD screen and ESP32; write numbers on the LCD screen and click to recognize them.

[0139] 4.4.1. Example of H model The automatically generated model header file exported by this invention contains a model array and an operator parser.

[0140] 4.4.2 Use of the Model Include this file in your ESP32 project and initialize the TensorFlow Lite Micro inference framework.

[0141] 4.4.3 Touch Drawing 4.4.5 Custom Serial Communication Protocol Taojingchi LCD screens communicate with the ESP32-S3 via UART, using a custom command format:

[0142] 4.4.6 Reasoning 4.5 Actual Prediction Results 4.5.1 Performance Test Results Hardware resource usage

[0143] Inference performance

[0144] 4.5.2 Effects Stress testing on low-spec hardware

[0145] 1. Actual testing of low-spec hardware

[0146] 2. Operating system and browser environment

[0147] measured data 1. Text classification, taking food delivery reviews as an example, with 160 and 142 parameters; 4020 training samples; 2 categories; 4020 samples; 2 categories; maximum length: 128; encoding: UTF-8; and tag order: positive reviews → negative reviews.

[0148] The text classification method enables stable training of text classification in a browser (using an Embedding + LSTM sequential model). The same method is then used in tasks such as image generation to ensure stable training on other task types, verifying the universality of the created method.

[0149] 2. Image generation, taking handwritten digit generation as an example, the generator has 421,441 parameters; the discriminator has 212,865 parameters; the training samples are 1000; the image size is 28x28; the condition dimension is 2 (digit 0, digit 1).

[0150] 3. Image classification and regression, taking handwritten digit classification and bounding box regression as examples, the model has 13 layers; 220,174 parameters; 1000 training samples; and 2 output heads.

[0151] 4. Balance bar, 4 model layers, 9,026 parameters.

[0152] 5. Numerical calculation, taking the AND operation as an example, the label order is 0 → 1, and there are a total of 4 training samples.

[0153] 6. Numerical regression, taking numerical sequence prediction as an example, has 5 model layers, 88,257 parameters, 1000 total samples, 1 column, 1 input column, and 1 output column.

[0154] 7. Image classification, taking handwritten digit recognition as an example, the model has 24,010 parameters; 1,000 training samples; 10 categories; and labels in the order of 0-9.

[0155] 8. Image regression, taking instance bounding box annotation as an example, model has 12 layers; 429,636 parameters; and 440 training samples.

[0156] 9. Sound classification, taking the digit recognition of 0-9 as an example, has 93,962 parameters; 3,000 training samples; 10 categories / dimensions; and a label order of 0-9.

[0157] The results of practical tests on various project types on low-end hardware show that the innovative work of this invention perfectly solves the problems of memory leaks and WebGL crashes when using TensorFlow.js with WebGL acceleration for training in a browser. It is not only feasible in text classification tasks, but also has the same capability in tasks including but not limited to classification tasks, regression tasks, classification + regression hybrid tasks, and processing multi-output head models.

[0158] This means that even on older, low-configuration computers in computer labs, this invention can still perform other tasks and train different types of models: students can complete the entire training process and obtain a usable model without crashing, without any hardware investment or environment configuration. It allows existing older computers in computer labs to be used, reducing the one-time investment in AI education to zero and avoiding the need for hardware upgrades required for offering AI courses.

[0159] The present invention and its embodiments have been described above, and such description is not restrictive. In conclusion, if those skilled in the art are inspired by this description and design similar structures and embodiments without departing from the spirit of the invention, such designs should fall within the protection scope of the present invention.

Claims

1. A browser-based AI model training method suitable for low-configuration hardware, characterized in that: Includes the following steps: Step 1: Model Building: The graphical block editor receives the blocks dragged by the user and generates the corresponding neural network model definition based on the connection relationship of the blocks. Step 2, Data Management: Dynamically generate a data management interface based on the task type, receive training data imported by the user, and generate a standardized dataset; Step 3: Model Training: Call the TensorFlow.js framework on the browser side, use WebGL or CPU backend to execute model training, and display training metrics in real time; Step 4: Model Prediction: Load the trained model, perform inference on the new data input by the user, and display the prediction results.

2. The browser-based AI model training method suitable for low-configuration hardware according to claim 1, characterized in that: The graphical block editor includes custom blocks, each block corresponding to a TensorFlow.js layer type, and the block parameter configuration is mapped to the layer configuration parameters in real time.

3. The browser-based AI model training method suitable for low-configuration hardware according to claim 1, characterized in that: The data manager supports multiple data types, including category label columns, numerical regression columns, and bounding box coordinate columns. Different types of data columns correspond to different UI controls.

4. The browser-based AI model training method suitable for low-configuration hardware according to claim 1, characterized in that: The model training includes the step of automatically detecting the computing backend: prioritizing the WebGL backend, and automatically switching to the CPU backend if it fails.

5. The browser-based AI model training method suitable for low-configuration hardware according to claim 1, characterized in that: The model training includes batch training and memory management steps: tensor memory is released immediately after each batch of training, and memory is forcibly cleaned up after every N batches.

6. The browser-based AI model training method suitable for low-configuration hardware according to claim 1, characterized in that: The data manager also includes a data enhancement module that synchronously transforms the corresponding bounding box coordinates when performing geometric transformations on the image data.

7. The browser-based AI model training method suitable for low-configuration hardware according to claim 1, characterized in that: The model training also includes a multi-output head processing step: automatically configuring the corresponding loss function and evaluation metric based on the task type of the output head.

8. The browser-based AI model training method suitable for low-configuration hardware according to claim 1, characterized in that: The trainer also supports reinforcement learning training, including: physical environment simulation, experience replay buffer, and target network update.

9. The browser-based AI model training method suitable for low-configuration hardware according to claim 1, characterized in that, It also includes a model export step: converting the trained model into TFLite format, C language header file format, and ONNX universal format for loading and use by mobile devices, embedded devices, other platforms, and model training frameworks.

10. A browser-based AI model training system suitable for low-configuration hardware, employing the method described in any one of claims 1-9, characterized in that... include: Block Editor Module: Provides a graphical block interface and generates model definitions based on the connection relationships between blocks; Data Manager module: Used to dynamically generate a data management interface based on task type to manage training data; Trainer module: Used to perform model training on the browser side, automatically selecting the computation backend; Predictor module: Used to load the model and perform inference predictions.

Images