HƯỚNG DẪN CÀI ĐẶT

Setup:
Visual Studio Code: Các bạn có thể tải VS Code tại đây.
Bước 1: Cài đặt môi trường Node.js
- Tải nodejs tại đây.
- Sau khi cài đặt xong, mở terminal VS Code và chạy 2 lệnh: node -v và npm -
v để xem phiên bản cài đặt, nếu kết quả trả về là 2 phiên bản giống như bên
dưới là cài đặt thành công.

Bước 2: Cài đặt bộ cài app React

npm install -g create-react-app
Bước 3: Tạo project React.js
- Trong terminal, nhập lệnh để tạo 1 react project có tên là interface:
npx create-react-app interface
- Sẽ mất vài phút để tạo project, sau đó bạn có thể chuyển hướng tới thư mục
interface bằng cách chạy lệnh sau:
cd Interface
Bước 4: Thực thi lệnh chạy
- Khởi động máy chủ Node và chạy ứng dụng của bạn: npm start
- Khi này ta thấy ứng dụng React sẽ tự động mở một trang chạy trên trình
duyệt với đường dẫn: http://localhost:3000/, kết quả hiển thị như bên dưới là
bạn đã cài đặt thành công.
Hướng dẫn tải mã nguồn từ github:
- Vào github Canny project tại đây.
- Chọn nút Code:

- Khi đó 1 bảng thông báo sẽ hiện ra, chọn Download ZIP để tải toàn bộ mã
nguồn về máy và giải nén. Sau đó chuyển code vào thư mục vừa tạo react và
tiến hành cài đặt các thư viện như hướng dẫn ở trên.
Package:
OpenCV: pip install opencv-python
Numpy: pip install numpy
npm install axios
pip install fastapi
pip install uvicorn
Run project:
Bước 1: Mở 1 terminal mới, chuyển tới thư mục canny_edge_detector:
cd canny_edge_detector
Chạy lệnh: uvicorn main:app --reload
 Bấm vào đường dẫn: 127.0.0.1:8000 chuyển tới 1 trang web như hình tức
là chạy được file main.py thành công.

Bước 2: Mở 1 terminal mới, chuyển tới thư mục Interface chứa react project:
cd Interface
Chạy ứng dụng: npm start
Khi đó, React tự động chuyển tới trang ứng dụng như hình: