doc init

Author: wolanx

.github/workflows/my-pipeline.yml

@@ -0,0 +1,41 @@
+name: my-pipeline
+
+on:
+  push:
+    tags:
+      - '*'
+    branches:
+      - main
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  build:
+    name: Deploy to GitHub Pages
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: checkout
+        uses: actions/checkout@v3
+        #with:
+        #  submodules: true  # Fetch Hugo themes (true OR recursive)
+        #  fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: yarn
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: build
+        run: yarn build
+
+      - name: deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./build
+          # cname: wolanx.com

README.md

@@ -1,25 +1,45 @@
 # react-netron
 
-> Inspired by netron. In the react project and need to load the onnx file for display. So this project was created.
+> netron via react
 
+- Demo https://wolanx.github.io/react-netron
+- Docs https://wolanx.github.io/react-netron/docs/intro
 
-# Install
+# Intro
 
-`npm i @wolanx/react-netron`
+View Neural Network model with graphs.
 
-# Demo
- 
-- Homepage https://wolanx.github.io/react-netron/
+## Install
+
+```shell
+# https://www.npmjs.com/package/@wolanx/react-netron
+npm i @wolanx/react-netron
+```
+
+## Prepare file
+
+- download https://github.com/onnx/models/blob/main/vision/classification/mnist/model/mnist-12.onnx
+
+## Demo - open with button
 
 ```jsx
-// open with button
 export default function Demo1 () {
-    return <ReactOnnx width={1000} height={400} openSlot={<Button>Open Model...</Button>}/>
+    const ref = useRef(null)
+
+    return (
+        <div>
+            <button onClick={() => ref.current?.open()}>Open Model...</button>
+            <ReactOnnx ref={ref} width={'100%'} height={600} file={null}/>
+        </div>
+    )
 }
+```
 
-// open with link
+## Demo - open with link
+
+```jsx
 export default function Demo2 () {
-    const file = useOnnx('/model/ann.onnx')
-    return <ReactOnnx width={1000} height={400} file={file}/>
+    const file = useOnnx('./model/demo.onnx')
+    return <ReactOnnx width={'100%'} height={600} file={file}/>
 }
 ```

core/README.md

@@ -1,16 +1,45 @@
 # react-netron
 
-> Inspired by netron. In the react project and need to load the onnx file for display. So this project was created.
+> netron via react
+
+- Demo https://wolanx.github.io/react-netron
+- Docs https://wolanx.github.io/react-netron/docs/intro
+
+# Intro
+
+View Neural Network model with graphs.
+
+## Install
+
+```shell
+# https://www.npmjs.com/package/@wolanx/react-netron
+npm i @wolanx/react-netron
+```
+
+## Prepare file
+
+- download https://github.com/onnx/models/blob/main/vision/classification/mnist/model/mnist-12.onnx
+
+## Demo - open with button
 
 ```jsx
-// open with button
-export default function Demo1() {
-    return <ReactOnnx width={1000} height={400} openSlot={<Button>Open Model...</Button>}/>
+export default function Demo1 () {
+    const ref = useRef(null)
+
+    return (
+        <div>
+            <button onClick={() => ref.current?.open()}>Open Model...</button>
+            <ReactOnnx ref={ref} width={'100%'} height={600} file={null}/>
+        </div>
+    )
 }
+```
+
+## Demo - open with link
 
-// open with link
-export default function Demo2() {
-    const file = useOnnx('/model/ann.onnx')
-    return <ReactOnnx width={1000} height={400} file={file}/>
+```jsx
+export default function Demo2 () {
+    const file = useOnnx('./model/demo.onnx')
+    return <ReactOnnx width={'100%'} height={600} file={file}/>
 }
 ```

core/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@wolanx/react-netron",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "keywords": [
     "netron",
-    "onnx"
+    "onnx",
+    "react"
   ],
-  "description": "view onnx file",
+  "description": "View Neural Network model with graphs.",
   "main": "dist/index.js",
   "files": [
     "README.md",
@@ -14,7 +15,7 @@
   "scripts": {
     "build": "node esbuild.mjs",
     "publish": "npm publish --access public",
-    "unpublish": "npm unpublish @wolanx/[email protected].2"
+    "unpublish": "npm unpublish @wolanx/[email protected].1"
   },
   "dependencies": {
   },

core/src/browser.js

@@ -7,9 +7,7 @@ export class BrowserHost {
         this._navigator = window.navigator
         this._document = window.document
         this._telemetry = new base.Telemetry(this._window)
-        this._window.eval = () => {
-            throw new Error('window.eval() not supported.')
-        }
+
         this._meta = {}
         for (const element of Array.from(this._document.getElementsByTagName('meta'))) {
             if (element.name !== undefined && element.content !== undefined) {
@@ -84,10 +82,6 @@ export class BrowserHost {
         }
         const telemetry = async () => {
             if (this._environment.packaged) {
-                this._window.addEventListener('error', (event) => {
-                    const error = event instanceof ErrorEvent && event.error && event.error instanceof Error ? event.error : new Error(event && event.message ? event.message : JSON.stringify(event))
-                    this.exception(error, true)
-                })
                 const ga4 = async () => {
                     const measurement_id = '848W2NVWVH'
                     const user = this._getCookie('_ga').replace(/^(GA1\.\d\.)*/, '')

core/src/index.jsx

@@ -1,11 +1,10 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react'
 import { BrowserHost } from './browser'
 import { View } from './view'
 import css from './index.module.scss'
 import { SvgMenu, SvgZoomIn, SvgZoomOut } from './icon'
 
-
-export function useOnnx(url) {
+export function useOnnx (url) {
     const [data, setData] = useState(null)
     useEffect(() => {
         console.log(url)
@@ -18,7 +17,7 @@ export function useOnnx(url) {
     return data
 }
 
-export default function ReactOnnx({ width, height, file, openSlot }) {
+const ReactOnnx = forwardRef(({ width, height, file }, ref) => {
     const refIns = useRef(null)
     const refFile = useRef(null)
 
@@ -34,11 +33,17 @@ export default function ReactOnnx({ width, height, file, openSlot }) {
         }
     }, [file])
 
-    function doOpen() {
+    useImperativeHandle(ref, () => {
+        return {
+            open: doOpen,
+        }
+    }, [])
+
+    function doOpen () {
         refFile.current?.click()
     }
 
-    function doLoadByFile({ target }) {
+    function doLoadByFile ({ target }) {
         const files = Array.from(target.files)
         const file = files[0]
         refIns.current?.openByFile(file, files)
@@ -47,7 +52,6 @@ export default function ReactOnnx({ width, height, file, openSlot }) {
     // onClick={doOpen}
     return (
         <>
-            {openSlot && React.cloneElement(openSlot, { onClick: doOpen })}
             <input ref={refFile} type="file" multiple={false} accept=".onnx" onChange={doLoadByFile}
                    style={{ display: 'none' }}/>
             <section className={css.onnxGraph} style={{ width: width || '100%', height: height || 400 }}>
@@ -80,4 +84,6 @@ export default function ReactOnnx({ width, height, file, openSlot }) {
             </section>
         </>
     )
-}
+})
+
+export default ReactOnnx

core/src/view.js

@@ -20,7 +20,7 @@ export class View {
             weights: true,
             attributes: false,
             names: false,
-            direction: 'vertical',
+            direction: 'horizontal',
             mousewheel: 'scroll',
         }
         this._options = Object.assign({}, this._defaultOptions)
@@ -209,7 +209,7 @@ export class View {
         }
 
         let buffer = await blob.arrayBuffer()
-        console.log(buffer)
+        // console.log(buffer)
         this.open(new _BlobCtn(buffer))
     }
 

docs/intro.md

@@ -2,46 +2,46 @@
 sidebar_position: 1
 ---
 
-# Tutorial Intro
+# react-netron
 
-Let's discover **Docusaurus in less than 5 minutes**.
+> netron via react
 
-## Getting Started
+- Demo https://wolanx.github.io/react-netron
+- Docs https://wolanx.github.io/react-netron/docs/intro
 
-Get started by **creating a new site**.
+# Intro
 
-Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
+## Install
 
-### What you'll need
-
-- [Node.js](https://nodejs.org/en/download/) version 16.14 or above:
-  - When installing Node.js, you are recommended to check all checkboxes related to dependencies.
-
-## Generate a new site
-
-Generate a new Docusaurus site using the **classic template**.
-
-The classic template will automatically be added to your project after you run the command:
-
-```bash
-npm init docusaurus@latest my-website classic
+```shell
+# https://www.npmjs.com/package/@wolanx/react-netron
+npm i @wolanx/react-netron
 ```
 
-You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.
+## Prepare file
 
-The command also installs all necessary dependencies you need to run Docusaurus.
+- download https://github.com/onnx/models/blob/main/vision/classification/mnist/model/mnist-12.onnx
 
-## Start your site
+## Demo - open with button
 
-Run the development server:
+```jsx
+export default function Demo1 () {
+    const ref = useRef(null)
 
-```bash
-cd my-website
-npm run start
+    return (
+        <div>
+            <button onClick={() => ref.current?.open()}>Open Model...</button>
+            <ReactOnnx ref={ref} width={'100%'} height={600} file={null}/>
+        </div>
+    )
+}
 ```
 
-The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there.
-
-The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/.
+## Demo - open with link
 
-Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.
+```jsx
+export default function Demo2 () {
+    const file = useOnnx('./model/demo.onnx')
+    return <ReactOnnx width={'100%'} height={600} file={file}/>
+}
+```