There are a lot of sources on the Internet on creating Electron.NET Apps but they can't address all the little tricks and pitfalls to avoid. So I am giving the basic code here usng ML/NET in an Electron.NET App that runs on Mac and Windows

Steps to Create and Install an Electron.NET C# .NET 8 Core 8 Razor Web App

Prerequisites

• Install Node.js (version 16.17.1 or later)
• Install .NET 8 SDK
• Install Electron.NET CLI globally using:
• dotnet tool install ElectronNET.CLI -g
• Create C# ASP.NET Core Web App (Model-View-Controller)
• MUST place .sln in same directory as .proj

Initialize Electron.NET Project

Open in Visual Studio and Build Project

Open Tools > NuGet Package Manager > Package Manager Console

This opens in the project directory, and to initialize Electron.NET and create an electron.manifest.json file run:

electronize init

Run the Application

In the directory where the .proj file is located there is a .bat file called “zrun.bat” Run this bat file as Administrator. You can customize this bat file for debugging and logging:

@echo off
REM run bat file from directory it is in
cd /d "%~dp0"
REM start the application
electronize start
REM To create a log file for debugging
electronize start /watch > electronize_output.txt 2>&1

Build Installers for Mac & Windows

By default, Electron Forge uses NSIS to create .exe installers for Windows, but it also supports other installer formats for both platforms. You can configure Electron Forge to use different "makers" (build targets) depending on your needs.

Steps to Use Electron Forge for macOS and Windows:

Install Electron Forge: If you haven't already, install Electron Forge in your project:

npm install @electron-forge/cli --save-dev
npx electron-forge import

Configure package.json: You can customize the build process by specifying different makers for Windows and macOS in your package.json. If you don't want to use NSIS for Windows, you can configure Electron Forge to use other makers such as Squirrel for Windows or ZIP formats.

Here’s an example package.json configuration for both macOS (DMG) and Windows (ZIP):

"config": {
  "forge": {
    "packagerConfig": {},
    "makers": [
      {
        "name": "@electron-forge/maker-zip",
        "platforms": ["win32", "darwin"]
      },
      {
        "name": "@electron-forge/maker-dmg",
        "platforms": ["darwin"],
        "config": {
          "format": "ULFO"
        }
      },
      {
        "name": "@electron-forge/maker-squirrel",
        "platforms": ["win32"]
      }
    ]
  }
}

If you only want to build for macOS or Windows specifically, you can use:

> npm run make -- --platform=darwin # For macOS

> npm run make -- --platform=win32 # For Windows

Report Options

Here are some free options you can consider for adding reporting capabilities to your Electron.NET C# Razor web app:

FastReport Open Source: This is a popular open-source reporting tool for .NET 6, .NET Core, and .NET Framework applications. It supports various data sources such as XML, CSV, and multiple databases like SQL Server and MySQL. FastReport offers a variety of report types (list, master-detail, pivot tables) and has a designer available for creating report templates. You can export reports to formats like PDF, HTML, and Excel, with additional functionality available via plugins​.

JasperReports: Although primarily written in Java, JasperReports is widely used in cross-platform applications for generating dynamic content. It can be integrated into your web app via JasperReports Server, which offers scheduled reporting and support for exporting to formats such as PDF, HTML, and CSV. This solution works well with various databases and is GPL-licensed, making it free for use in open-source.

BIRT (Business Intelligence and Reporting Tools): This open-source solution is Eclipse-based and widely used for embedding reports in web applications. It offers both a report designer and runtime components for deploying reports within Java environments, and it supports a wide range of report types (charts, tables, etc.)​

Seal Report: Specifically designed for .NET applications, Seal Report allows the creation of reports from any database. It features HTML5 charts and supports exporting reports to various formats, such as Excel and PDF. This is a strong option if you're looking for something that integrates natively with .NET​

Each of these options can be freely integrated into your Electron.NET project. FastReport might be the most straightforward if you're already using .NET technologies, while JasperReports and BIRT offer broader language support if you're working in a multi-language ecosystem. Seal Report, with its native C# support, is another robust choice.

Resources

• https://github.com/ElectronNET/electron.net-api-demos/tree/master
• https://github.com/jzu007/Electron.NET-master
• https://github.com/elanderson/Electron.NET?tab=readme-ov-file
• https://github.com/lassebrenden/electron-netflix
• https://github.com/nirzaf/electron.net-api-demos

AINetProfit™ Demos called AIDemos

I have been workig a FREE AI Neural Network Accounting aplication called AINetProfit™ that I am getting ready to release. This repository will include parts of that app broken up into smaller pieces here in an Electron.NET app called AIDemos. The sample app here will include ML.NET code for creating and training various Neural Networks for accounting and managing a variety of things from media buying to security.

Background

My background is in Theoretical Physics and Medicine. After fuinishing medical school I decided to sell products I created on National Television instead of practicing. I wrote educational software I sold on national television and later I wrote software to manage my companies. I used C++ and Bayesian Optimization and an early forms of neural networks to determine which television stations to buy half hour infomercial time on. I was able to determine which television stations to buy by matching the demographics of a product with that of the zip codes from census data that fell within the broadcast radius of each television station. And I was able to calculate the maximum amount to bid on each station for each half hour of infomercial time to maximize my net profit on each media buy. The results of each media buy were feed baack using Bayesian Optimization and that system was so successful that it enabled me to make a large fortune.

Later I applied those same techniques to all forms of advertising to determine what ad media to buy and the maximum to pay for each buy by calculating the probality of turning a net profit over the cost of media.

This series of articles will demonstrate the techniques I developed in AI, Neural Networks and Bayesian Optimization.

AI Neural Networks & Bayesian Optimization for Media Buying

AIDemos Electron.NET ASP.NET 8 CORE 8 Web App (Model-View-Controller)

Explanation of CORE Naming

In November 2020, Microsoft released .NET 5.0, dropping the "Core” branding so all versions of .NET after 5.0 are "Core" apps. Commonly you will see .NET 8 applications refrred to as a "Core 8" applications because .NET 8 is a Core application.

• ### Install These Packages
• Microsoft.AspNetCore.Mvc.NewtonsoftJson (Version="8.0.10")
• xMicrosoft.DotNet.UpgradeAssistant.Extensions.Default.Analyzers (Version="0.4.421302")
• Microsoft.Extensions.Hosting (Version="8.0.1")
• Microsoft.Extensions.Logging (Version="8.0.1")
• Microsoft.VisualStudio.Web.CodeGeneration.Design (Version="8.0.6")
• Newtonsoft.Json (Version="13.0.3")

• Microsoft.Data.Sqlite.Core (Version="8.0.10")

• Install SQLite Packages

• SQLitePCLRaw.bundleesqlite3 (Version="2.1.10")
• SQLitePCLRaw.bundle_green (Version="2.1.10")
• SQLitePCLRaw.core (Version="2.1.10")

• SQLitePCLRaw.provider.dynamic_cdecl (Version="2.1.10")

• Install ML.NET Packages

• Microsoft.ML (Version="3.0.1")

• Install Electron.NET

• ElectronNET.API (Version="23.6.2")

• Other Packages You Can Add

• ExcelDataReader (Version="3.7.0")
• Markdig (Version="0.37.0")

• Initialize Electron.NET Project Open in Visual Studio and Build Project Open Tools > NuGet Package Manager > Package Manager Console This opens in the project directory, and you run: To initialize Electron.NET and create an electron.manifest.json file run:

electronize init

• Run the Application In the directory where the .proj file is located there is a .bat file called “zrun.bat” Run this bat file as Administrator. You can customize this bat file for debugging and logging:

@echo off
REM run bat file from directory it is in
cd /d "%~dp0"
REM start the application
electronize start
REM To create a log file for debugging
;electronize start /watch > electronize_output.txt 2>&1

IMAGES & EMOJIS SYMBOLS: ™, ®, ©,

Here are some emojis you can use directly in html: https://unicode.org/emoji/charts/full-emoji-list.html https://emojipedia.org/travel-places/ https://emojihub.org/ https://emoji-copy-paste.com/

PDF & Word Export Formatting

var today = new Date();
var formattedDate = today.getFullYear() + '/' + (today.getMonth() + 1) + '/' + today.getDate();
var r_header_title = 'Date: ' + formattedDate;
var r_main_title = 'Sample Report';
var r_messageTop = 'Whatever you want here';
var r_footer_text = '©1992 - 2024 All Rights Reserved Worldwide';

// Generates a random number between 0 and 9999
var randNumber = Math.floor(Math.random() * 10000);  

// Set r_filename to include today's date and the random number
var r_filename = 'pdf_' + formattedDate + '_' + randNumber;

Fonts - Use calc

Use the calc() function to dynamically calculate the font size based on the width of the viewport (vw). This technique is often used to create fluid typography on web pages, making the font size responsive to the screen size without the need for media queries. Here's a breakdown of how it works:

css font-size: calc(13px + (15 - 13) * ((100vw - 300px) / (1600 - 300)));

1. Base Font Size: The calculation starts with a base font size of 13px. This is the minimum font size that will be applied.
2. Font Size Range: The next part, (15 - 13), calculates the range within which the font size can grow. In this case, the font size can increase by up to 2px (from 13px to 15px).
3. Viewport Width Adjustment: 100vw represents 100% of the viewport width. The expression (100vw - 300px) calculates the difference between the current viewport width and 300px. This difference will be used to adjust the font size based on the screen width.
4. Scaling Range: (1600 - 300) calculates the total scaling range for the viewport width, which in this case is 1300px (from 300px to 1600px). This defines the range over which the font size will adjust.
5. Final Calculation: The entire calc() function calculates the font size by starting with the base size (13px), then adds an increment that scales based on the viewport width. The increment is proportionally scaled within the range defined by (15 - 13) * ((100vw - 300px) / (1600 - 300)). This means as the viewport width increases from 300px to 1600px, the font size will linearly increase from 13px to 15px.

In summary, this CSS rule makes the font size start at 13px when the viewport width is 300px or less. As the viewport width grows, the font size increases linearly, reaching 15px when the viewport width hits 1600px. For viewport widths between 300px and 1600px, the font size will be somewhere between 13px and 15px, calculated based on the formula provided. This approach provides a smooth transition of font sizes across different screen widths, enhancing readability and user experience on a variety of devices.