hedgehog-computing / hedgehog-lab

Run, compile and execute JavaScript for Scientific Computing and Data Visualization TOTALLY TOTALLY TOTALLY in your BROWSER! An open source scientific computing environment for JavaScript TOTALLY in your browser, matrix operations with GPU acceleration, TeX support, data visualization and symbolic computation.

Hedgehog Lab

Hedgehog Lab is an open source scientific computation tool in the browser.

Try it at https://hlab.app/.

Join our community at Discord server

Installation

Dev channel for development branch

# Clone the repo

# Using HTTPS
git clone https://github.com/Hedgehog-Computing/hedgehog-lab.git

# Using SSH
git clone [email protected]:Hedgehog-Computing/hedgehog-lab.git

Common install

Before the developing, Pleases make sure you are already install and enabled the yarn
Once cloned, switch to the dev branch and navigate to the folder by typing cd hedgehog-lab and then running the following commands:

# If you are the developer, pls switch to the dev branch
git checkout dev

# Install all project dependencies
yarn install

# Start the project
yarn watch

On each run the program compiles, and it takes time. Please wait a few minutes and refresh the page.

User Manual

Hedgehog Book: https://hedgehog-computing.github.io/

Contributing

Read our contributing guide to learn how to develop the project.

License

This project is licensed under the terms of the Apache-2.0 License.

hedgehog-lab's Issues

Suggestion to refine the webpage

Is your feature request related to a problem? Please describe.
The page cannot slide up and down when my mouse is in the code region.

Describe the solution you'd like
Put tutorials and links on the left side of the page, which do not move when the page sliding up and down.

Another suggestion
Use a badge to wrap the follow twitter link and fork repo link.

For example, and

EXACT MODE for matrix library <matrix.ts>

Background

For calculation of the advanced linear algebra, the current data type of Hedgehog-lab(Ver0.4) cannot support the exact value calculation with square root like the image below:

Topics

Exact-calculation mode (Exact Mode) for matrix library

My suggestion is creating the exact calculation mode which ONLY allows the input of fractions of integers and output of fractions of integers (no decimals allowed for IO of Exact Mode). Adding some new data types with the support of fractions and square root would probably have a conflict with the current data type.
However, this project can use [a mode button in the IO webpage] OR use [a global mode variable in the first few lines of the code compulsorily] to avoid the confusion of the decimal calculation and the exact calculation.

example of confusion:
2/sqrt(2) can be interpreted as 1.414... or sqrt(2) in the current and the exact mode of calculation.

After implementing the Exact-calculation mode of the matrix library, the following suggested function would provide a practical use for students and academic researchers.

Suggested functions for the matrix library
-linearly independence check
-determinant calculation
-row reduced echelon form simplification
-Find the basis for range(A), Row(A), Col(A), Null(transpose(A))
-coordinates of vector under different bases
-eigenvalue calculation
-matrix diagonalization

For the calculation functions below, Exact Mode is highly suggested for practical use
-length of vector
-the standard inner product for real matrix ("**" already implemented for current version but not for exact model)
-Gram-Schmidt Procedure
-set of bases vectors to an orthogonal matrix
-general mapping
-find basis of the orthogonal complement space
-matrix orthogonal diagonalization
-matrix triangularization
-singular value decomposition

Could be add wasm and wasm simd implement and compare the performence？

Is your feature request related to a problem? Please describe.
gpu is good performence, but some accuracy is import，may simd is a good choise

Minor issue, typo in Hedgehog Book

It seems that the Hedgehog Book is still under construction; the content on the Function and Class page is empty. But one thing that needs to fix is that "Function" is mistyped as "Functiobn." Looking forward to learning from Hedgehog Book!

GPU的选择问题

你好，我的笔记本有两个显卡，一个是AMD自带的核显，另外一个是Nvdia的1650ti，每次计算的时候都是调用AMD核显进行计算的，请问怎么才能调用1650ti来计算？
使用AMD核显的一个主要问题是会卡顿，当计算 2000-by-2000 matrix相乘时候，AMD核显占用会到100%，会造成界面卡顿，让人很难受，能否把计算切换到独立显卡上吗

增加单元测试

Package Management

Is your feature request related to a problem? Please describe.

Yes we absolutely need a way to allow user to import codes/modules/libraries via package management.

Describe the solution you'd like

1. Allow user to use import(LIB_URL) to import library

let tf = import("https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js");
const a = tf.tensor([[1, 2], [3, 4]]);

2. Allow user to fetch a hedgehog script/library from url, including

• Fetch the raw string
• Cache to window.localStorage if necessary (item key: url, value: the raw string of hedgehog script file),
  For example, the library "linearRegression" code is hosted by Github Gist at https://gist.githubusercontent.com/lidangzzz/a14456264724a92b5a1147036537e531/raw/e0bb0e1f5f763ca076ef726be73e3bcc98f048bd/linearRegression.hhs

class LinearRegression {
    w: Mat;
    constructor() { }
    //x: M-by-N matrix. M data with N dimensions. Each row is an N-dim vector
    //y: M-by-1 matrix
    fit(x_: Mat, y_: Mat) : LinearRegression{
        let y = y_;        
        if (y_.rows != 1 && y_.cols == 1) {y = y_.T();}  //check the dimension of y
        var x = x_.resize(x_.rows, x_.cols + 1, 1);   //expan x_ with one more column with 1
        this.w = ( (X.T() * X)^-1 ) * X.T() * y   //calculate w = (X.T() * X)^-1 * X.T() * y
        return this;
    }

    //x: M-by-N matrix. M data with N dimensions. Each row is an N-dim vector
    predict(x_: Mat):mat {
        let x = x_.resize(x_.rows, x_.cols + 1, 1); //expan x_ with one more column with 1
        return x*(this.w); 
    }
}

and user can import and use the library in this way:

#include https://gist.githubusercontent.com/lidangzzz/a14456264724a92b5a1147036537e531/raw/e0bb0e1f5f763ca076ef726be73e3bcc98f048bd/linearRegression.hhs

let training = readCSV('http://kaggle.com/dataset_training.csv');
let testingX = readCSV('http://kaggle.com/dataset_testing.csv');

let predicted_Y = new LinearRegression().fit(training.X, training.Y).predict(testingX);
print(predicted_Y)

Users can temporally or permanently save their libraries on github gist, or github repo, or build their own code management server on their own hand.

Notes:

1. The differences between (1) and (2) is that the babel compiler should also compile the hedgehog script in (2) with user's input code together before executing, but not for the common JavaScript module in (1). So it's necessary to split dependencies (1) and (2), compile (2) with user's code first, then add "import" part of (1) before execution;

2. A straight-forward idea for implementing (2) is just concatenating all raw strings of libraries into a single chunk of code before compiling. For example:

Lib1.hss

let pi = 3.1415926;
function foo(A){
   return A*pi + sin(A*pi);
}

Lib2.hss

#include https://myLib.com/Lib1.hss

function bar(A){
   return foo(A) * A^-1
}

user's input code

#include https://another-website.com/Lib2.hss
print(bar(zeros(1,100))

And after fetching the libraries by traversing the dependency tree and concatenating all scripts, the code for compiling is

let pi = 3.1415926;
function foo(A){
   return A*pi + sin(A*pi);
}
function bar(A){
   return foo(A) * A^-1
}
print(bar(range(1,100).reshape(10,1)))

Describe alternatives you've considered
No

Additional context
No

[lab] Cleanup Code

Goal: Clean up redundant code and reorganize component structure

Discussion: Which bundler to use (Webpack, Rollup, Parcel, esbuild...)

Currently create-react-app suffers from slow compilation. On my personal laptop (MacBook Pro 13' late 2017) it usually takes up to ~1 min to do a cold start, which is kind of unacceptable for this size of apps. People (including @promer94 ) are suggesting we should move to another bundler. I think we should discuss which bundler we should move to:

There are several choices:

• Webpack: which create-react-app is using under the hood. Slowest but has the best compatibility. Also, the configuration is a nightmare.
• Rollup: seems like an "average".
• Parcel: Relatively fast compared to other bundlers.
• esbuild: Fastest but... Is anybody actually using this in a serious project?
• (Please add another)

TeX

• Hi, I am a user of Hedgehog Lab, the amazing helper in many aspects.
• The Tex of Hedgehog Lab seems not have the function of printing into pdf which is a big defect. I think most people are supposed to need the important function and if Hedgehog Lab have it, I probably give up TeXLive and TeXLiveStudio.
• Certainly, when I have spare time, I may collabrate to devote it with you if you welcome me.

Let's write a better README and docs

[Discussion] Specifies the release specification

It is now in a period of rapid iteration, and releases can be managed later

Is your feature request related to a problem? Please describe.
I noticed that we had made significant changes to the core code and whether we needed to do a large version iteration before merging into the master.

Describe the solution you'd like
For instance #65 ,We might be able to release a version span similar to 1.1 -> 1.2, with a version control option like 1.1 -> 1.1.1 for daily fixes.
Ref: Semantic Versioning 2.0.0

cc @lidangzzz @imtsuki

Support for n-Dimension Array (ndarray or Tensor), sparse matrix and sparse tensor

Is your feature request related to a problem? Please describe.
No

Describe the solution you'd like

• Native support for N-Dimension Array with operator overload. This is important for image processing, signal processing and other more advanced algorithms.

• Native support for sparse matrix and classical algorithms for sparse matrix, including matrix multiplication, Cholesky, QR, LU decomposition. This is extremely important for data analysis for high dimension data with sparse structure.

• Native support for sparse tensor. A reference: https://www.tensorflow.org/api_docs/python/tf/sparse/SparseTensor

在？有 sponsor 按钮为什么不搞个 sponsor list？

这样大家如何能宣传自己资助了这么一个伟大的项目？

Interactive stdout & stop button

For computations that need a long time (e.g. GPU acceleration case), the user may expect to see output as long as they are printed, rather than after all computation tasks have completed.

Also, since the computation is in WebWorker now, a button for killing the program in execution would be favoured, e.g. using Worker.terminate()

UI suggestion on Upload and Save buttons

Is your feature request related to a problem? Please describe.
Current "upload" and "save" buttons are confusing to me. Those buttons are to upload a new file to the YouCode session or save YouCode session into a local file. But they are placed inside the sidebar, which feel unrelated to YouCode session.

Describe the solution you'd like
Re-position two buttons from sidebar to YouCode session. Replace them with icons to avoid information overload. By doing so, customers have a clear understanding on both upload and save actions are related to YouCode session. Actually upload can be considered as "Open a new file", so open can be the alternative name for that button.

I am happy to do the code change once we anchor down the details.

Additional context
The left icon is for uploading a file into YouCode session and the right icon is to save current YouCode session into a local file.

Looking forward to a function `det()` to calculate the determinant

A few suggestions

1. Please consider separate client and runtime or any other libs into isolated packages, they should have there own build\test process. Yarn workspace is highly recommended.

2. Please consider use Manaco editor as the code editor, which is the same editor that powers VSCode. (I didn't check the code see if you are using it or not, if you already use it, please ignore this one)

3. Create a issue template, to help make issues more organized.

Extract Hedgehog Runtime (transpiler, internal classes Mat and Sym, math and linear algebra functions, preprocessor) as a separate JavaScript runtime & package

create benchmark for 竞品s

证明这个项目可以吊打他们

[lab] sidebar performance issues

master latest submitted version

After adding some additional features and upgrading the MUI, there were performance issues on the front end, in the form of frame drops and editor input delays.

add save save add

那是真的牛批，写的什么玩意

Consider using tag functions to process TeX strings

Current Behavior

Currently, users have to escape backslashes when using tex() and formulaTex(), which makes the code a bit ugly and unclear:

tex('\\text{I } \\textbf{hate } \\\\ \\backslash')

Solution

We can use the tag functions to make the above example as clear as:

tex`\text{I } \textbf{hate} \\ \backslash`

Implementation

The function to process raw strings can be implemented as:

function processRawInputs(strs, ...vars): string {
  return strs?.raw ? String.raw(strs, ...vars) : strs;
}

// usage
const str0 = processRawInputs('str0\\n'); //=> 'str0\\n'
const str1 = processRawInputs`str1\n`;    //=> 'str1\\n'
const str2 = processRawInputs`result: ${str0} ${str1}`; //=> 'result: str0\\n str1\\n'

Test

You can test the following example in the playground.

function processRawInputs(strs, ...vars) {
  return strs?.raw ? String.raw(strs, ...vars) : strs;
}

function wrap(fn) {
  return (...inputs) => {
    const str = processRawInputs(...inputs);
    fn(str);
  }
}

const _tex = wrap(tex);
const _formulaTex = wrap(formulaTex);

_tex`\textbf{This} \text{ looks better.}`;
_formulaTex`
    \int_0^\pi \sin (t) dt
`;

// string interpolation
_formulaTex`
  \Theta
    \text{${'\u002e'.repeat(2)}}
  \Theta
`;

---

I can create a pull request if this looks good to you :).

暗黑模式支持（未完成）

我实现了暗黑模式的主题，但是存在以下几点问题：
1, 并未做切换主题功能，不会用 react hooks，需要大佬们帮忙补充功能。
2. 渲染图表的颜色是写死在 hedgehog-lab\src\core\runtime.js 里面的，无法动态的做主题切换。

主题设置可在 App.js 中查看，动态切换主题只需要往 type 里面塞变量就行。

预览图：

How can I add label <help wanted>?

Some one told me this need repo permission.
1-Does that mean I need to apply to administrator of this project to add the label?
2-Who have the permission to add label to issue? Anyone or administrator?

在代码编辑框里使用等宽字体

Add Shortcut for `Compile and run`

Is your feature request related to a problem? Please describe.
It is frustrating to break thinking flow when I have to reach for my mouse to click the Compile and run.

Describe the solution you'd like
We should have a shortcut to trigger Compile and run. For instance we can use Ctrl + Enter as the trigger.

Describe alternatives you've considered
We can also have the engine auto trigger every couple seconds.

Additional context
For mac user, we can have them use Cmd + Enter to trigger the compile and run flow.

很不错，建议用易语言重构

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

[feature request] Port material-ui to v5

Is your feature request related to a problem? Please describe.
MUI V5 RC releases, keep pace

https://github.com/mui-org/material-ui/releases

为什么不是易语言写的？

为什么不是易语言写的？

refactor saving local code to IndexedDB

hedgehog-lab/packages/hedgehog-lab/src/HedgehogLab.tsx

Lines 40 to 64 in 432a210

	const getLocalCodeList = () => {
	try {
	const result = localStorage.getItem('localNameList');
	if (result) {
	const list = JSON.parse(result) as string[];
	const newLocalList = [];
	for (let i = 0; i < list.length; i++) {
	if (list[i] !== 'localNameList') {
	newLocalList.push({
	description: list[i],
	source: localStorage.getItem(list[i]) as string
	});
	}
	}
	//console.log(newLocalList);
	setLocalList(newLocalList);
	} else {
	localStorage.setItem('localNameList', JSON.stringify(['localNameList']));
	}
	} catch (err) {
	throw new Error("Error while getting local code list: " + err);
	}
	};

question - webpack/rollup babel with operator overload plugin

hello, i'm studying your project, i'm also interested in using babel to add some language feature like operator overload to typescript/javascript, here's my sample project repo: https://github.com/cjbd/TypeScript-Babel-Overload , it's basically your core/transpiler code

i can use webpack or rollup to create a bundle, but it cannot run, there're loads of errors, i don't understand where i did it wrong, can you please help, thank you!

为“高能”客户提供更多加减乘除的计算功能

立党老师创建这个网页计算器难道是因为赞同陈平老师说的“MATLAB 为低能的客户提供方便的程序集成”？哈哈哈 @lidangzzz

建议加入更多科学计算工具集比如二进制加减法超越MATLAB实现陈平老师的梦想！

Prefetch and loading Script via URL parameter

Is your feature request related to a problem? Please describe.
No

Describe the solution you'd like

Prefetch and loading Script via URL parameter.

A potential design of this feature will be like:

http://hedgehog-lab.github.io/?auto_run=[TRUE OR FALSE]&your_url=[YOUR_ENCODED_URL]

in which the script will be running automatically when auto_run is set to true, and with a URL of hedgehog script (on Github): https://gist.githubusercontent.com/lidangzzz/2adebd6a771f50e6430a34ec61d928af/raw/1f9add39370b00dfbb3f5d20c8bc203dd09f52c2/my_first_notebook.hss

And user can generate a link to share with teammates/students/collegues in this format:
http://hedgehog-lab.github.io/?auto_run=true&your_url=https%3A%2F%2Fgist.githubusercontent.com%2Flidangzzz%2F2adebd6a771f50e6430a34ec61d928af%2Fraw%2F1f9add39370b00dfbb3f5d20c8bc203dd09f52c2%2Fmy_first_notebook.hss

which allow them to click the URL and execute the whole script immediately, or even embed an <iframe> into personal website or project page with a full demo of code and execution results.

Describe alternatives you've considered
No

Additional context
No

把计算扔WebWorker里做

一运行就卡死页面太难看了

should fix floating number precision (IEEE 754)

eg. 0.1+0.2 should be 0.3

Use ts (or tsx) extension for .js files with type annotations (or tsx syntax)

Is your feature request related to a problem? Please describe.
There has been a lot of TypeScript (or JSX) snippets in scattered in the JS files in the project.

Describe the solution you'd like
Use appropriate extension names for the "js" files so other toolchain (like tsc) can handle it properly.

Describe alternatives you've considered
N/A

Additional context
N/A

LaTex render breaks when switching between examples

Reproduction:

1. click "Tutorial 5: TeX in Hedgehog Lab"
2. click "compile & run"
3. click "Tutorial 7: Symbolic computing"
4. click "compile & run"

Expected result: LaTex lines of f(x), f'(x) and blabla
Actual result: Only one line of f'(x)

Walkaround: refresh, skip step 1 and 2, would work as expected.

Unable to build hedgehog-lab in Darwin ARM system

Describe the bug
Under the macOS system based on ARM64 system, when executes yarn install command, it throws errors about gyp toolchains.

To Reproduce
Steps to reproduce the behavior:

1. Enter the codebase
2. Run yarn install

The error looks like this:

Output:
prebuild-install WARN install No prebuilt binaries found (target=16.2.0 runtime=node arch=arm64 libc= platform=darwin)
gyp info it worked if it ends with ok
gyp info using [email protected]
gyp info using [email protected] | darwin | arm64

Desktop (please complete the following information):

• OS: [Apple Darwin]

Additional context
It's not a big problem, probably due to gpu.js module.

publish @hedgehod/core package to npm

/cc @lidangzzz

界面太丑了

安利小党党 element ui ，改善用户体验，直接复制业务代码就行，非常简单

[Feature Request] Add autocomplete to the editor

Is your feature request related to a problem? Please describe.

1. 这tmd也太大了, 能精简还是精简下
   

2. 去掉ace支持, 已经用了微软的 monaco package里就不要在ace了

3. 加点自动补全吧, 已经有大微软的moaco支持, 在上面加个补全不就是分分钟的事.
   可以参考 https://playground.babylonjs.com/ 也是支持线上javascript编辑的, 然后自动补全的
   具体用法就是编译出 .d.ts文件 然后
   https://github.com/BabylonJS/Babylon.js/blob/master/Playground/src/tools/monacoManager.ts#L373
   就可以了, 顺便类型上加下函数说明吧, 自动文档也有了
   (ps: package依赖实在太大, 下了半天下载不下来, 不然我就提交pr了)

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

I love bobo

RT
BoBo, I love you

Cannot install/compile

Describe the bug
Cannot compile following the readme.

To Reproduce
Steps to reproduce the behavior:

• git clone https://github.com/Hedgehog-Computing/hedgehog-lab.git
• cd hedgehog-lab
• git checkout master
• yarn install

Expected behavior
Some installation or compilation happens.

Screenshots

Desktop (please complete the following information):

• OS: debian 11

If yarn is another program outside cmdtest, please add the instruction of installation. Not everyone is JS developer.

[Feature request] function overload

Is your feature request related to a problem? Please describe.
no

Describe the solution you'd like
class function overload like Java/C++

Describe alternatives you've considered
no good alternative i can think of right now

Additional context
Hello, this is really awesome project, i saw you modified 'foxbenjaminfox/babel-plugin-overload' for operator overload, this is really great feature, is it possible for class function overload? thanks!

nit: Consider to use arrow functions and const/let whenever possible

要不要开个Slack或者Facebook群组一起聊天？

如题