webHydla - Web IDE of HydLa

View Demo

Build by yourself

git clone https://github.com/HydLa/webHydLa.git
cd webHydLa

On Docker

Execute docker-compose up and open http://0.0.0.0:5000/

Locally

System Requirements

• Software:
  • node 15 or later, and npm 7 or later
  • Python 3.3 or later

To install node (Node.js), you should use some version manager of Node.js such as nvm, n, and so on. The node command from apt or other OS-standard package managers may often be outdated.

1. Install nvm (node version manager).

   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

2. Install the latest version of node.

   nvm install node

3. Check that you can use node and npm commands.

   node --version
   npm --version

Build and Start the Server

1. Install packages and build from source with following commands.

   pip3 install -r requirements.txt
   npm install
   npm run build

2. The session of webHydLa is encrypted with a secret key. To set the key, run a command such as,

   cat /dev/urandom | LC_CTYPE=C tr -dc 'a-zA-Z0-9' | fold -w 10 | head -1 > secret_key

3. Execute server.py, then webHydLa will start on http://0.0.0.0:5000/. (If the port has been already in use, it will use another port.)

   python3 server.py

If you want to specify which hylagi to use, put a file named hylagi_path containing the absolute path to hylagi.

echo "/path/to/hylagi" > hylagi_path

When webHydLa needs to execute HyLaGI, it will try in the following order:

1. If hylagi_path file exists, it will execute the HyLaGI specified in the file.
2. If hylagi command can be found in PATH, it will execute the command.
3. Otherwise, it will POST a request to the API server.

Development

Lint

npm run lint

Format

npm run format

Test

npm t

Generate Document

npm run doc

Here is the generated document

そのままだと怒られる（いまいち理由はよくわかっていない）ので， typedoc-plugin-missing-exports を用いている．

System overview

architecture

client side
- src/ and static/

server side
- server.py

sequence

client (src/ and static/)    server.py            chaource (API server)
|                                |                    |
write down hydla code            |                    |
press button "run"               |                    |
----------------------> if the local machine          |
|                       has hylagi                    |
|                       then                          |
|                  <----- run on the machine          |
|                       else                          |
|                         run with chaource  -------->
|                                                 run hylagi
render the result  <----------------------------------
as a graph

web 上のエディタで hydla コードを入力させ， run ボタンを押されると server.py（サーバサイド）と通信して サーバサイドで hylagi を実行する． hylagi の実行が終わると，結果（hydat）を受信し，グラフとして描画する．