diff --git a/docz/docs/02-getting-started/01-installation/04-amd.md b/docz/docs/02-getting-started/01-installation/04-amd.md index 1206ed1..ad2c078 100644 --- a/docz/docs/02-getting-started/01-installation/04-amd.md +++ b/docz/docs/02-getting-started/01-installation/04-amd.md @@ -125,47 +125,13 @@ define(['N/file', 'sheetjs'], function(file, XLSX) { ## SAP UI5 -After downloading the script, it can be uploaded to the UI5 project and loaded -in the `sap.ui.define` call: +OpenUI5 and SAPUI5 installation instructions are covered in the dedicated +["OpenUI5 / SAPUI5" demo](/docs/demos/frontend/openui5#installation). -```js -sap.ui.define([ - /* ... other libraries ... */ - "path/to/xlsx.full.min" -], function(/* ... variables for the other libraries ... */, XLSX) { - // use XLSX here -}); -``` +SheetJS standalone scripts can be loaded in two ways: -:::caution pass - -In some deployments, the function argument was `undefined`. - -The standalone scripts add `window.XLSX`, so it is recommended to use `_XLSX` -in the function arguments and access the library with `XLSX` in the callback: - -```js -sap.ui.define([ - /* ... other libraries ... */ - "path/to/xlsx.full.min" -], function( - /* ... variables for the other libraries ... */, - _XLSX // !! NOTE: this is not XLSX! A different variable name must be used -) { - // highlight-next-line - alert(XLSX.version); // use XLSX in the callback -}); -``` - -::: - -:::danger pass - -**Copy and pasting code does not work** for SheetJS scripts as they contain -Unicode characters that may be mangled. The standalone script should be -downloaded and manually uploaded to the project. - -::: +- [`sap.ui.define`](/docs/demos/frontend/openui5#installation-define) +- [HTML SCRIPT tag](/docs/demos/frontend/openui5#installation-html) ## RequireJS diff --git a/docz/docs/02-getting-started/02-examples/06-loader.md b/docz/docs/02-getting-started/02-examples/06-loader.md index 044cf90..5ba6b28 100644 --- a/docz/docs/02-getting-started/02-examples/06-loader.md +++ b/docz/docs/02-getting-started/02-examples/06-loader.md @@ -39,6 +39,7 @@ This demo was tested in the following configurations: | NVIDIA RTX 4080 SUPER (16 GB VRAM) + Ryzen Z1 Extreme (16 GB RAM) | `win11-x64` | 2025-01-12 | | AMD RX 7900 XTX (24 GB VRAM) + Ryzen Z1 Extreme (16 GB RAM) | `win11-x64` | 2025-01-12 | | AMD RX 6800 XT (16 GB VRAM) + Ryzen Z1 Extreme (16 GB RAM) | `win11-x64` | 2025-01-12 | +| Intel Arc B580 (12 GB VRAM) + Ryzen Z1 Extreme (24 GB RAM) | `win11-x64` | 2025-01-24 | | Apple M2 Max 12-Core CPU + 30-Core GPU (32 GB unified memory) | `darwin-arm` | 2024-11-04 | SheetJS users have verified this demo in other configurations: @@ -718,25 +719,13 @@ export default class LoadOfSheet extends BufferLoader { The demo performs the query "Which rows have over 40 miles per gallon?" against a [sample cars dataset](pathname:///cd.xls) and displays the results. -:::note pass - -SheetJS team members have tested this demo on Windows 10 and Windows 11 using -PowerShell and Ollama for Windows. - -SheetJS team members have tested this demo on Windows 11 using Windows Subsystem -for Linux. - -In addition, SheetJS users have also tested this demo on bare metal Linux. - -::: - :::caution pass This demo was tested using the ChatQA-1.5 model[^9] in Ollama. -The tested model used up to 9.2GB VRAM. It is strongly recommended to run the -demo on a newer Apple Silicon Mac or a PC with an Nvidia GPU with at least 12GB -VRAM. SheetJS users have tested the demo on systems with as little as 6GB VRAM. +The tested model used up to 10GB VRAM. It is strongly recommended to run the +demo on a GPU with at least 12GB VRAM or a newer Apple Silicon Mac with at least +32GB unified memory. ::: @@ -752,6 +741,71 @@ within WSL, Ollama should also be installed within WSL. ::: +:::danger pass + +Intel ARC GPUs require the Intel Extension for PyTorch (IPEX) and a special +version of Ollama that ships with the associated LLM Library (IPEX-LLM). + +
+ ARC Instructions (click to show) + +These instructions are based on the official Intel recommendations. + +A) If Ollama for Windows was installed, close the program by right-clicking on +the tray icon and selecting "Quit Ollama". + +B) Install Miniforge3[^10], selecting "Just Me" when prompted. + +C) Launch a normal Command Prompt and create a Conda environment: + +```bash +cd %USERPROFILE%\Documents +mkdir ollama-intel +cd ollama-intel +set PATH=%PATH%;%USERPROFILE%\miniforge3\condabin +conda create -n llm-cpp python=3.11 +``` + +D) Activate the environment in the session and install dependencies: + +```bash +conda activate llm-cpp +pip install --pre --upgrade ipex-llm[cpp] +``` + +Close the window after the installation. + +E) Launch a new Administrator Command Prompt and set up Ollama: + +```bash +cd %USERPROFILE%\Documents\ollama-intel +set PATH=%PATH%;%USERPROFILE%\miniforge3\condabin +conda activate llm-cpp +init-ollama.bat +``` + +Close the window. + +F) Launch a normal Command Prompt window and run Ollama: + +```bash +cd %USERPROFILE%\Documents\ollama-intel +set PATH=%PATH%;%USERPROFILE%\miniforge3\condabin +conda activate llm-cpp +set OLLAMA_NUM_GPU=999 +set no_proxy=localhost,127.0.0.1 +set ZES_ENABLE_SYSMAN=1 +set SYCL_CACHE_PERSISTENT=1 +set SYCL_PI_LEVEL_ZERO_USE_IMMEDIATE_COMMANDLISTS=1 +ollama serve +``` + +This window should be kept open throughout the demo. + +
+ +::: + After installing dependencies, start a new terminal session. 1) Create a new project: @@ -840,6 +894,27 @@ curl.exe -LO https://docs.sheetjs.com/cd.xls ollama pull llama3-chatqa:8b-v1.5-q8_0 ``` +
+ Additional steps for Intel GPUs (click to show) + +A different embedding model must be used on Intel GPUs: + +A) Install the `nomic-embed-text:latest` model through Ollama: + +```bash +ollama pull nomic-embed-text:latest +``` + +B) Edit `query.mjs` to use the embedding model: + +```js title="query.mjs (edit highlighted line)" +const model = new ChatOllama({ baseUrl: "http://127.0.0.1:11434", model: modelName }); +// highlight-next-line +const embeddings = new OllamaEmbeddings({ baseUrl: "http://127.0.0.1:11434", model: "nomic-embed-text:latest"}); +``` + +
+ 7) Run the demo script ```bash @@ -899,3 +974,4 @@ charts, tables, and other features. [^7]: See ["Workbook Object"](/docs/csf/book) [^8]: See [`sheet_to_json` in "Utilities"](/docs/api/utilities/array#array-output) [^9]: See [the official ChatQA website](https://chatqa-project.github.io/) for the ChatQA paper and other model details. +[^10]: Select ["Windows" `x86_64`](https://conda-forge.org/download/) in the Installation page. diff --git a/docz/docs/03-demos/02-frontend/10-openui5.md b/docz/docs/03-demos/02-frontend/10-openui5.md index 0a631dc..a3cbd1f 100644 --- a/docz/docs/03-demos/02-frontend/10-openui5.md +++ b/docz/docs/03-demos/02-frontend/10-openui5.md @@ -34,6 +34,38 @@ includes a complete example starting from the OpenUI5 "Worklist App Tutorial". SheetJS libraries conform to the UI5 ECMAScript requirements[^1]. SheetJS libraries can be loaded in a UI5 site at different points in the app lifecycle. +#### UI5 Module {#installation-define} + +The [SheetJS Standalone scripts](/docs/getting-started/installation/standalone) +comply with AMD `define` semantics. They support `sap.ui.define` out of the box. + +If the SheetJS Standalone script is saved to `webapp/xlsx.full.min.js`, the base +script `webapp/index.js` can load the `./xlsx.full.min` dependency: + +```js title="webapp/index.js (loading the SheetJS dependency)" +sap.ui.define([ + // highlight-next-line + "./xlsx.full.min", // relative path to script, without the file extension + /* ... other libraries ... */ +], function ( + // highlight-next-line + _XLSX // !! NOTE: this is not XLSX! A different variable name must be used + /* ... variables for the other libraries ... */, +) { + // highlight-next-line + alert(XLSX.version); // use XLSX in the callback +}); +``` + +:::info pass + +In some deployments, the function argument was `undefined`. + +The standalone scripts add `window.XLSX`, so it is recommended to use `_XLSX` +in the function arguments and access the library with `XLSX` in the callback. + +::: + #### HTML {#installation-html} UI5 is typically loaded in a `SCRIPT` tag in `webapp/index.html`. Similarly, @@ -72,38 +104,6 @@ in the ["API Reference"](/docs/api/) section of the documentation. ::: -#### UI5 Module {#installation-define} - -The [SheetJS Standalone scripts](/docs/getting-started/installation/standalone) -comply with AMD `define` semantics. They support `sap.ui.define` out of the box. - -If the SheetJS Standalone script is saved to `webapp/xlsx.full.min.js`, the base -script `webapp/index.js` can load the `./xlsx.full.min` dependency: - -```js title="webapp/index.js (loading the SheetJS dependency)" -sap.ui.define([ - // highlight-next-line - "./xlsx.full.min", // relative path to script, without the file extension - /* ... other libraries ... */ -], function ( - // highlight-next-line - _XLSX // !! NOTE: this is not XLSX! A different variable name must be used - /* ... variables for the other libraries ... */, -) { - // highlight-next-line - alert(XLSX.version); // use XLSX in the callback -}); -``` - -:::info pass - -In some deployments, the function argument was `undefined`. - -The standalone scripts add `window.XLSX`, so it is recommended to use `_XLSX` -in the function arguments and access the library with `XLSX` in the callback. - -::: - ## Internal State The various SheetJS APIs work with various data shapes. The preferred state @@ -158,7 +158,7 @@ sap.ui.define(["sap/ui/model/json/JSONModel"], function (JSONModel) { #### Updating State {#json-update} Starting from a spreadsheet file, the SheetJS [`read`](/docs/api/parse-options) -method parses the data into a SheetJS workbook object[^6]. After selecting a +method parses the data into a SheetJS workbook object[^3]. After selecting a worksheet, the [`sheet_to_json`](/docs/api/utilities/array#array-output) method generates row objects that can be assigned to the model. @@ -201,10 +201,12 @@ _loadExcelFile: async function () { #### Rendering Data {#json-render} -In UI5, the "Model-View-Controller"[^3] pattern is used to organize code and +In UI5, the "Model-View-Controller"[^4] pattern is used to organize code and separate concerns. The view defines the UI structure, the controller handles the logic, and the model manages the data. +The following example uses the `Table` component[^5] to display data. + ```xml title="Example View XML for displaying an array of objects" @@ -234,37 +236,56 @@ logic, and the model manages the data. #### Exporting Data {#json-export} -The [`writeFile`](/docs/api/write-options) and [`json_to_sheet`](/docs/api/utilities/array#array-of-objects-input) -functions simplify exporting data. They are typically used in event handlers attached to buttons or other elements. +The `getProperty` method[^6] of the `JSONModel` pulls data from the UI5 model. +If an array of objects was pushed with `setProperty`, the `getProperty` method +will return an array of objects. -A button press handler can generate a local file when clicked: +The SheetJS [`json_to_sheet`](/docs/api/utilities/array#array-of-objects-input) +function will create a SheetJS worksheet object[^7] from the data in the array. +The [`book_new`](/docs/api/utilities/wb) method will create a SheetJS workbook +object that includes the new worksheet. [`writeFile`](/docs/api/write-options) +will attempt to generate a file and initiate a download. ```mermaid flowchart LR - state((oModel\ngetProperty)) + state((State\nJSONModel)) + aoo[(Array of\nObjects)] ws(SheetJS\nWorksheet) - wb(SheetJS\nWorkbook) + wb(((SheetJS\nWorkbook))) file[(XLSX\nexport)] - state --> |json_to_sheet\n\n| ws - ws --> |book_new\nbook_append_sheet| wb + state --> |getProperty\n\n| aoo + aoo --> |json_to_sheet\n\n| ws + ws --> |book_new\n\n| wb wb --> |writeFile\n\n| file + linkStyle 1,2,3 color:blue,stroke:blue; ``` -```js +Here is a sample method for exporting data from the UI5 `JSONModel` to XLSX: + +```js title="Fetch data from JSONModel and export to XLSX" /* get model data and export to XLSX */ - onExport: function () { - const data = this.getView().getModel().getProperty("/presidents"); - /* generate worksheet from model data */ - // highlight-next-line - const ws = XLSX.utils.json_to_sheet(data); - /* create workbook and append worksheet */ - const wb = XLSX.utils.book_new(); - XLSX.utils.book_append_sheet(wb, ws, "Data"); - /* export to XLSX */ - XLSX.writeFileXLSX(wb, "SheetJSOpenUI5AoO.xlsx"); - } +onExport: function () { + const data = this.getView().getModel().getProperty("/presidents"); + /* generate worksheet from model data */ + // highlight-next-line + const ws = XLSX.utils.json_to_sheet(data); + /* create workbook and append worksheet */ + const wb = XLSX.utils.book_new(ws, "Data"); + /* export to XLSX */ + XLSX.writeFileXLSX(wb, "SheetJSOpenUI5AoO.xlsx"); +} ``` +This method can be bound to the `press` event of a `sap.m.Button` control: + +```xml title="Example View XML for exporting an array of objects to a workbook" + + + +