This is a Taro-based project that allows you to take a picture, upload it to Baidu Yun OSS, and call an API to recognize insects in the picture. It also displays the wiki information from Baidu Baike.
my-taro-app
├── src
│ ├── pages
│ │ ├── index
│ │ │ ├── index.tsx
│ │ │ └── index.scss
│ │ └── result
│ │ ├── result.tsx
│ │ └── result.scss
│ ├── services
│ │ ├── api.ts
│ │ └── oss.ts
│ ├── components
│ │ ├── Camera
│ │ │ ├── Camera.tsx
│ │ │ └── Camera.scss
│ │ └── WikiInfo
│ │ ├── WikiInfo.tsx
│ │ └── WikiInfo.scss
│ ├── app.tsx
│ └── app.scss
├── config
│ ├── dev.js
│ └── prod.js
├── package.json
├── project.config.json
└── README.md
- Install the dependencies by running
npm install
. - Configure the development environment in
config/dev.js
. - Configure the production environment in
config/prod.js
. - Run the app using
npm run dev
for development ornpm run build
for production. - Open the app in your browser and navigate to the main page.
- Use the camera component to take a picture.
- The picture will be uploaded to Baidu Yun OSS.
- The API will be called to recognize the insects in the picture.
- The result will be displayed along with the wiki information from Baidu Baike.
The project dependencies are listed in the package.json
file. Run npm install
to install them.
The project has separate configuration files for the development and production environments. Modify config/dev.js
and config/prod.js
to set the appropriate configurations.
The src/services/api.ts
file exports functions to call the API for insect recognition. It handles the communication with the API and returns the result.
The src/services/oss.ts
file exports functions to upload the picture to Baidu Yun OSS. It handles the authentication and file upload process.
The src/components/Camera/Camera.tsx
file contains the component that allows you to take a picture using your device's camera. It captures the image and passes it to the upload function.
The src/components/Camera/Camera.scss
file contains the styles for the camera component.
The src/components/WikiInfo/WikiInfo.tsx
file contains the component that displays the wiki information from Baidu Baike. It receives the result from the API and fetches the corresponding information from Baidu Baike.
The src/components/WikiInfo/WikiInfo.scss
file contains the styles for the wiki info component.
The src/app.tsx
file is the entry point of the Taro app. It sets up the routes and renders the main page component.
The src/app.scss
file contains the global styles for the app.
Contributions are welcome! If you have any suggestions or improvements, please create a pull request.
This project is licensed under the MIT License.