webHydla - Web IDE of HydLa

Build by yourself

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

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
   Copy

2. Install the latest version of node.

   nvm install node
   Copy

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

   node --version
   npm --version
   Copy

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
   Copy

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
   Copy

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
   Copy

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
Copy

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.

Development

Lint

npm run lint
Copy

Format

npm run format
Copy

Test

npm t
Copy

Generate Document

npm run doc
Copy

Here is the generated document

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

System overview

architecture

client side
- src/ and static/

server side
- server.py
Copy

sequence

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

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