Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WASM runs in the web #17

Draft
wants to merge 10 commits into
base: main
Choose a base branch
from
Draft

WASM runs in the web #17

wants to merge 10 commits into from

Conversation

xiaoranzhou
Copy link

WASM runs in the web now.

To make it run in the offline docker, 8GB of llm model need to be put into the /public/mistral/ directory.
model download link: https://huggingface.co/zxrzxr/Mistral-7B-Instruct-v0.1-q4f32_1
TODOs:
Link: between biochatter-server and the wasm (should be easy as long as the output of biochatter is loaded into the DOM, and then loaded into WASM)
Chat-UI: synchronize with the next UI.

To make it run in the offline docker, 8GB of llm model need to be put into the /public/mistral/ directory.
model download link: https://huggingface.co/zxrzxr/Mistral-7B-Instruct-v0.1-q4f32_1
TODOs:
Link: between biochatter-server and the wasm (should be easy as long as the output of biochatter is loaded into the DOM, and then loaded into WASM)
Chat-UI: synchronize with the next UI.
@slobentanzer
Copy link
Contributor

slobentanzer commented Dec 22, 2023

Hi @xiaoranzhou,
looks great, thanks! I am not too deep in Typescript, so could you explain this a bit more in-depth? What do your changes do? Ideally, we would have a description such as this on the biochatter docs, for interested users that want to deploy the WASM instance locally (I guess that is the major usecase?). Would you maybe like to add a tutorial / feature description vie PR here? I created a web assembly markdown file (wasm.md), just needs to be filled in.

@xiaoranzhou
Copy link
Author

Sure, I will

  1. Frist explain the file I changed here.
  2. Add the tutorial feature in the wasm.md you provided.

@xiaoranzhou
Copy link
Author

New file:

  1. chatgse/app/components/webllm.tsx: This adds a new page to be accessible by using localhost:5000/#/webllm
  2. chatgse/public/llm_chat.5e8e8dcb.js: The js file
    Changes:
  3. chatgse/app/layout.tsx: Adding the js file to the html
  4. chatgse/package.json import the web-llm library.

@slobentanzer
Copy link
Contributor

Thanks!

@@ -12,7 +12,7 @@ export const DOCS_URL = 'https://biocypher.org'

export const DEFAULT_CORS_HOST = "https://a.nextweb.fun";
export const DEFAULT_API_HOST = `${DEFAULT_CORS_HOST}/api/proxy`;
export const OPENAI_BASE_URL = "https://api.openai.com";
export const OPENAI_BASE_URL = "http://localhost:5000/";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this interfere with regular behaviour when using the app in non-WASM mode? @xiaoranzhou

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@xiaoranzhou could you comment?

TODO:
1. switch between openAI API and wasm module.
2. Stop the summarize function because it has too much tokens
@xiaoranzhou
Copy link
Author

@slobentanzer Hi Sebastian, I have finished the new integration. Now if you selection the "mistral-wasm" in the model selection, the wasm will be used. The usage is exactly the same as chatGPT version. I have tested it and it works pretty well. The webllm page can be deleted.
In this version, the loading of external JS (llm_chat.5e8e8dcb.js) code is better and UI has also been improved.

@slobentanzer
Copy link
Contributor

Great, thanks! Will review ASAP. @fengsh27, if you want to take a look, your feedback would also be appreciated. :)

@slobentanzer
Copy link
Contributor

Hi @xiaoranzhou,
we made some significant changes in project structure, including moving the Flask app biochatter-server out of the repository and instead accessing it via docker (it is now in https://github.com/biocypher/biochatter-server).

I merged the current state into your PR and adjusted the biochatter-server with the WASM class, but trying to get a response from the WASM model in my browser still does not work (it just shows the processing dots indefinitely).

Could you check the current version of the PR and whether this setup works on your side?

@slobentanzer
Copy link
Contributor

More specifically, could we include some information about the loading status of the WASM model somewhere in the app? Currently I can't tell if the model is being loaded or ready for queries.

@xiaoranzhou
Copy link
Author

Thanks for the feedback and check. I will have a look later today.
May I ask if you are using the newest Chrome? The WebGPU only works in Chrome.
For the status information, I have already added them in the status of the conversation (grey small font text about the conversation round square). I will check if the current setup works and troubleshooting it.

@slobentanzer
Copy link
Contributor

Yes, I was checking on the latest Chrome. Did not see that grey small font text though, just the regular UI components. Where in the frontend code to you do the status update?

@xiaoranzhou
Copy link
Author

This is the status text
status_text
The whole process will be like this.
full animate

@slobentanzer
Copy link
Contributor

slobentanzer commented Jan 19, 2024

Thanks @xiaoranzhou! Is this the latest version after the merge I did? Could you describe how you start the different parts of the service?

@xiaoranzhou
Copy link
Author

xiaoranzhou commented Jan 19, 2024

Thanks @xiaoranzhou! Is this the latest version after the merge I did? Could you describe how you start the different parts of the service?

No, that was the version before your reversed merge in the fork.
I have pulled the newly merged version in my fork and testing it now.
I can still see the "loading status" of wasm.
When you reload the webpage page, can you open a developer view by pressing F12 and then right click the refresh circle near the address bar and click Empty Cache and Hard Reload?
image
After this you might also need to refresh the wasm cache in the Application of the DevTools, which can be opened by F12.
Right click the "Cache storage" and then "Refresh Caches"
image

The new biochatter-server was giving a "Exit(3)" and has following debug information:
2024-01-19 12:56:38 [2024-01-19 11:56:38 +0000] [1] [INFO] Starting gunicorn 21.2.0
2024-01-19 12:56:38 [2024-01-19 11:56:38 +0000] [1] [INFO] Listening at: http://0.0.0.0:5000 (1)
2024-01-19 12:56:38 [2024-01-19 11:56:38 +0000] [1] [INFO] Using worker: sync
2024-01-19 12:56:38 [2024-01-19 11:56:38 +0000] [7] [INFO] Booting worker with pid: 7
2024-01-19 12:56:45 None of PyTorch, TensorFlow >= 2.0, or Flax have been found. Models won't be available and only tokenizers, configuration and file/data utilities can be used.
2024-01-19 12:56:45 [2024-01-19 11:56:45 +0000] [7] [ERROR] Exception in worker process
2024-01-19 12:56:45 Traceback (most recent call last):
2024-01-19 12:56:45 File "/usr/local/lib/python3.11/site-packages/gunicorn/arbiter.py", line 609, in spawn_worker
2024-01-19 12:56:45 worker.init_process()
2024-01-19 12:56:45 File "/usr/local/lib/python3.11/site-packages/gunicorn/workers/base.py", line 134, in init_process
2024-01-19 12:56:45 self.load_wsgi()
2024-01-19 12:56:45 File "/usr/local/lib/python3.11/site-packages/gunicorn/workers/base.py", line 146, in load_wsgi
2024-01-19 12:56:45 self.wsgi = self.app.wsgi()
2024-01-19 12:56:45 ^^^^^^^^^^^^^^^
2024-01-19 12:56:45 File "/usr/local/lib/python3.11/site-packages/gunicorn/app/base.py", line 67, in wsgi
2024-01-19 12:56:45 self.callable = self.load()
2024-01-19 12:56:45 ^^^^^^^^^^^
2024-01-19 12:56:45 File "/usr/local/lib/python3.11/site-packages/gunicorn/app/wsgiapp.py", line 58, in load
2024-01-19 12:56:45 return self.load_wsgiapp()
2024-01-19 12:56:45 ^^^^^^^^^^^^^^^^^^^
2024-01-19 12:56:45 File "/usr/local/lib/python3.11/site-packages/gunicorn/app/wsgiapp.py", line 48, in load_wsgiapp
2024-01-19 12:56:45 return util.import_app(self.app_uri)
2024-01-19 12:56:45 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-01-19 12:56:45 File "/usr/local/lib/python3.11/site-packages/gunicorn/util.py", line 371, in import_app
2024-01-19 12:56:45 mod = importlib.import_module(module)
2024-01-19 12:56:45 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-01-19 12:56:45 File "/usr/local/lib/python3.11/importlib/init.py", line 126, in import_module
2024-01-19 12:56:45 return _bootstrap._gcd_import(name[level:], package, level)
2024-01-19 12:56:45 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-01-19 12:56:45 File "", line 1204, in _gcd_import
2024-01-19 12:56:45 File "", line 1176, in _find_and_load
2024-01-19 12:56:45 File "", line 1147, in _find_and_load_unlocked
2024-01-19 12:56:45 File "", line 690, in _load_unlocked
2024-01-19 12:56:45 File "", line 940, in exec_module
2024-01-19 12:56:45 File "", line 241, in _call_with_frames_removed
2024-01-19 12:56:45 File "/app/app.py", line 27, in
2024-01-19 12:56:45 file_handler = logging.FileHandler("./logs/app.log")
2024-01-19 12:56:45 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-01-19 12:56:45 File "/usr/local/lib/python3.11/logging/init.py", line 1181, in init
2024-01-19 12:56:45 StreamHandler.init(self, self._open())
2024-01-19 12:56:45 ^^^^^^^^^^^^
2024-01-19 12:56:45 File "/usr/local/lib/python3.11/logging/init.py", line 1213, in _open
2024-01-19 12:56:45 return open_func(self.baseFilename, self.mode,
2024-01-19 12:56:45 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-01-19 12:56:45 FileNotFoundError: [Errno 2] No such file or directory: '/app/logs/app.log'
2024-01-19 12:56:45 [2024-01-19 11:56:45 +0000] [7] [INFO] Worker exiting (pid: 7)
2024-01-19 12:56:45 [2024-01-19 11:56:45 +0000] [1] [ERROR] Worker (pid:7) exited with code 3
2024-01-19 12:56:45 [2024-01-19 11:56:45 +0000] [1] [ERROR] Shutting down: Master
2024-01-19 12:56:45 [2024-01-19 11:56:45 +0000] [1] [ERROR] Reason: Worker failed to boot.

@xiaoranzhou
Copy link
Author

Thanks @xiaoranzhou! Is this the latest version after the merge I did? Could you describe how you start the different parts of the service?

No, that was the version before your reversed merge in the fork. I have pulled the newly merged version in my fork and testing it now. I can still see the "loading status" of wasm. When you reload the webpage page, can you open a developer view by pressing F12 and then right click the refresh circle near the address bar and click Empty Cache and Hard Reload? image After this you might also need to refresh the wasm cache in the Application of the DevTools, which can be opened by F12. Right click the "Cache storage" and then "Refresh Caches" image

The new biochatter-server was giving a "Exit(3)" and has following debug information: 2024-01-19 12:56:38 [2024-01-19 11:56:38 +0000] [1] [INFO] Starting gunicorn 21.2.0 2024-01-19 12:56:38 [2024-01-19 11:56:38 +0000] [1] [INFO] Listening at: http://0.0.0.0:5000 (1) 2024-01-19 12:56:38 [2024-01-19 11:56:38 +0000] [1] [INFO] Using worker: sync 2024-01-19 12:56:38 [2024-01-19 11:56:38 +0000] [7] [INFO] Booting worker with pid: 7 2024-01-19 12:56:45 None of PyTorch, TensorFlow >= 2.0, or Flax have been found. Models won't be available and only tokenizers, configuration and file/data utilities can be used. 2024-01-19 12:56:45 [2024-01-19 11:56:45 +0000] [7] [ERROR] Exception in worker process 2024-01-19 12:56:45 Traceback (most recent call last): 2024-01-19 12:56:45 File "/usr/local/lib/python3.11/site-packages/gunicorn/arbiter.py", line 609, in spawn_worker 2024-01-19 12:56:45 worker.init_process() 2024-01-19 12:56:45 File "/usr/local/lib/python3.11/site-packages/gunicorn/workers/base.py", line 134, in init_process 2024-01-19 12:56:45 self.load_wsgi() 2024-01-19 12:56:45 File "/usr/local/lib/python3.11/site-packages/gunicorn/workers/base.py", line 146, in load_wsgi 2024-01-19 12:56:45 self.wsgi = self.app.wsgi() 2024-01-19 12:56:45 ^^^^^^^^^^^^^^^ 2024-01-19 12:56:45 File "/usr/local/lib/python3.11/site-packages/gunicorn/app/base.py", line 67, in wsgi 2024-01-19 12:56:45 self.callable = self.load() 2024-01-19 12:56:45 ^^^^^^^^^^^ 2024-01-19 12:56:45 File "/usr/local/lib/python3.11/site-packages/gunicorn/app/wsgiapp.py", line 58, in load 2024-01-19 12:56:45 return self.load_wsgiapp() 2024-01-19 12:56:45 ^^^^^^^^^^^^^^^^^^^ 2024-01-19 12:56:45 File "/usr/local/lib/python3.11/site-packages/gunicorn/app/wsgiapp.py", line 48, in load_wsgiapp 2024-01-19 12:56:45 return util.import_app(self.app_uri) 2024-01-19 12:56:45 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 2024-01-19 12:56:45 File "/usr/local/lib/python3.11/site-packages/gunicorn/util.py", line 371, in import_app 2024-01-19 12:56:45 mod = importlib.import_module(module) 2024-01-19 12:56:45 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 2024-01-19 12:56:45 File "/usr/local/lib/python3.11/importlib/init.py", line 126, in import_module 2024-01-19 12:56:45 return _bootstrap._gcd_import(name[level:], package, level) 2024-01-19 12:56:45 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 2024-01-19 12:56:45 File "", line 1204, in _gcd_import 2024-01-19 12:56:45 File "", line 1176, in _find_and_load 2024-01-19 12:56:45 File "", line 1147, in _find_and_load_unlocked 2024-01-19 12:56:45 File "", line 690, in _load_unlocked 2024-01-19 12:56:45 File "", line 940, in exec_module 2024-01-19 12:56:45 File "", line 241, in _call_with_frames_removed 2024-01-19 12:56:45 File "/app/app.py", line 27, in 2024-01-19 12:56:45 file_handler = logging.FileHandler("./logs/app.log") 2024-01-19 12:56:45 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 2024-01-19 12:56:45 File "/usr/local/lib/python3.11/logging/init.py", line 1181, in init 2024-01-19 12:56:45 StreamHandler.init(self, self._open()) 2024-01-19 12:56:45 ^^^^^^^^^^^^ 2024-01-19 12:56:45 File "/usr/local/lib/python3.11/logging/init.py", line 1213, in _open 2024-01-19 12:56:45 return open_func(self.baseFilename, self.mode, 2024-01-19 12:56:45 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 2024-01-19 12:56:45 FileNotFoundError: [Errno 2] No such file or directory: '/app/logs/app.log' 2024-01-19 12:56:45 [2024-01-19 11:56:45 +0000] [7] [INFO] Worker exiting (pid: 7) 2024-01-19 12:56:45 [2024-01-19 11:56:45 +0000] [1] [ERROR] Worker (pid:7) exited with code 3 2024-01-19 12:56:45 [2024-01-19 11:56:45 +0000] [1] [ERROR] Shutting down: Master 2024-01-19 12:56:45 [2024-01-19 11:56:45 +0000] [1] [ERROR] Reason: Worker failed to boot.

The issue of biochatter-server has been resolved and a pull request biocypher/biochatter-server#4 has been submitted.

@xiaoranzhou
Copy link
Author

xiaoranzhou commented Jan 19, 2024

I tested the wasm after merge, it works fine. We can organise a meeting to troubleshooting the Mac usage 😄 @slobentanzer

@slobentanzer
Copy link
Contributor

Hi @xiaoranzhou,
I have a new, bigger machine, so hardware limitations are probably not an issue any more for the tests. However, now I am stuck with an issue when trying to build the Docker Compose. The last step, yarn build, fails with the below error. The main branch passes this build step no problem, I am not sure what the reason is. Do you have an idea?

 => ERROR [chatgse builder 5/5] RUN yarn build                                                                                                         26.7s
------                                                                                                                                                       
 > [chatgse builder 5/5] RUN yarn build:                                                                                                                     
0.160 yarn run v1.22.19
0.178 $ cross-env BUILD_MODE=standalone next build
0.434 [Next] build mode standalone
0.434 [Next] build with chunk:  true
0.440 - warn You have enabled experimental feature (forceSwcTransforms) in next.config.mjs.
0.440 - warn Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
0.440 
0.445 Attention: Next.js now collects completely anonymous telemetry regarding usage.
0.445 This information is used to shape Next.js' roadmap and prioritize features.
0.445 You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
0.446 https://nextjs.org/telemetry
0.446 
0.485 - info Creating an optimized production build...
1.570 Browserslist: caniuse-lite is outdated. Please run:
1.570   npx browserslist@latest --update-db
1.570   Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
2.319 Warning: For production Image Optimization with Next.js, the optional 'sharp' package is strongly recommended. Run 'yarn add sharp', and Next.js will use it automatically for Image Optimization.
2.319 Read more: https://nextjs.org/docs/messages/sharp-missing-in-production
23.80 - info Compiled successfully
23.81 - info Linting and checking validity of types...
25.26 
25.26 ./app/components/rag.tsx
25.26 134:6  Warning: React Hook useEffect has a missing dependency: 'updateConnectionStatus'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
25.26 
25.26 info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
26.59 Failed to compile.
26.59 
26.59 ./app/client/platforms/openai.ts:241:11
26.59 Type error: 'input1' is possibly 'null'.
26.59 
26.59   239 |           const question = message.split("\n").slice(-1);
26.59   240 |           let input1 = document.getElementById("chatui-input");
26.59 > 241 |           input1.value = question;
26.59       |           ^
26.59   242 |           let sendbutton = document.getElementById("chatui-send-btn");
26.59   243 |           sendbutton.click();
26.59   244 | 
26.67 error Command failed with exit code 1.
26.67 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
------
failed to solve: process "/bin/sh -c yarn build" did not complete successfully: exit code: 1

@xiaoranzhou
Copy link
Author

Hi @xiaoranzhou, I have a new, bigger machine, so hardware limitations are probably not an issue any more for the tests. However, now I am stuck with an issue when trying to build the Docker Compose. The last step, yarn build, fails with the below error. The main branch passes this build step no problem, I am not sure what the reason is. Do you have an idea?

 => ERROR [chatgse builder 5/5] RUN yarn build                                                                                                         26.7s
------                                                                                                                                                       
 > [chatgse builder 5/5] RUN yarn build:                                                                                                                     
0.160 yarn run v1.22.19
0.178 $ cross-env BUILD_MODE=standalone next build
0.434 [Next] build mode standalone
0.434 [Next] build with chunk:  true
0.440 - warn You have enabled experimental feature (forceSwcTransforms) in next.config.mjs.
0.440 - warn Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
0.440 
0.445 Attention: Next.js now collects completely anonymous telemetry regarding usage.
0.445 This information is used to shape Next.js' roadmap and prioritize features.
0.445 You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
0.446 https://nextjs.org/telemetry
0.446 
0.485 - info Creating an optimized production build...
1.570 Browserslist: caniuse-lite is outdated. Please run:
1.570   npx browserslist@latest --update-db
1.570   Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
2.319 Warning: For production Image Optimization with Next.js, the optional 'sharp' package is strongly recommended. Run 'yarn add sharp', and Next.js will use it automatically for Image Optimization.
2.319 Read more: https://nextjs.org/docs/messages/sharp-missing-in-production
23.80 - info Compiled successfully
23.81 - info Linting and checking validity of types...
25.26 
25.26 ./app/components/rag.tsx
25.26 134:6  Warning: React Hook useEffect has a missing dependency: 'updateConnectionStatus'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
25.26 
25.26 info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
26.59 Failed to compile.
26.59 
26.59 ./app/client/platforms/openai.ts:241:11
26.59 Type error: 'input1' is possibly 'null'.
26.59 
26.59   239 |           const question = message.split("\n").slice(-1);
26.59   240 |           let input1 = document.getElementById("chatui-input");
26.59 > 241 |           input1.value = question;
26.59       |           ^
26.59   242 |           let sendbutton = document.getElementById("chatui-send-btn");
26.59   243 |           sendbutton.click();
26.59   244 | 
26.67 error Command failed with exit code 1.
26.67 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
------
failed to solve: process "/bin/sh -c yarn build" did not complete successfully: exit code: 1

@slobentanzer
Hi Sebastian, sorry for the late reply. I have fixed the type script "build" bug. Before this I only tested it in yarn dev and that worked fine. 😄
I have also prepared a docker image (around 7.71 GB) for testing. I think it will be easier for you to try it.
https://hub.docker.com/repository/docker/zxrzxr/chatgse-next/general

The current version is in independent from the biochatter-server. This is because:

Chatgse-next port can not reach the 5001 port of the biochatter-server.
I think it is because of multiple reasons:
The current docker-compose file has a networks section, which is not needed and can bring problem.
The .env file in the chatgse-next has port 5000 listed but not the 5001.
I have fixed the docker compose issue and the port issue and succefully connected, but the respons of the POST message was empty. The empty meassage cost me a lot of time to debug.
Now I have no time to fix it so I did not push anything that can fix the new problem induced by your merge.
As long as the connection to biochatter-server is fixed on your side, and the source code is stable, I can also link the biochatter-server again.
In the next two weeks I will be very busy, so I can not fix or merge any small changes from your side. Afterward I will merge the changes if the code is still not merged into the main branch.

@slobentanzer slobentanzer marked this pull request as draft July 31, 2024 09:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants