add pic

README.md

@@ -9,21 +9,18 @@
 
 ### Motivation
 
-The waste of used books, break the information barrier among students.
-
-Initial exploration of LLMs in online shopping platform as well as full-stack development.
+There is a lack of an intermediary platform with certain guarantees to enhance the efficiency of second-hand book transactions among students and the reliability of the items. Taking Nanjing University campus as an example, this platform aims to create an AI-powered transaction information platform. An AI assistant can provide personalized recommendation services such as book comparisons for customers, the transaction process is further constrained to improve efficiency, standardize the transaction process, and provide a comfortable experience for both parties
 
 ---
 ### Deployment
 
-### prerequisite
+##### Prerequisite
 
 - nginx nginx -s reload
--
 
-### Deploy backend
+##### Deploy backend
 
-Deploy frontend
+##### Deploy frontend
 ```bash
 npm run serve
 ```
@@ -33,27 +30,78 @@ npm run serve
 
 ---
 ### Architecture
-#### Backend with Spring Boot
-#### Frontend with Vue3
+- Backend with Springboot
+- Frontend with Vue3
 
 ---
 ### Demonstration of the work
 You can try the [Live demo](http://124.71.159.90/home), powered by Huawei Cloud. (valid until 2023-08-15)
 
 <details closed>
 <summary>Homepage</summary>
+<div align="center">
+<img width="50%" src="./Utils/home_1.png">
+<img width="50%" src="./Utils/home_2.png">
+<img width="50%" src="./Utils/home_3.png">
+<img width="50%" src="./Utils/home_4.png">
+<img width="50%" src="./Utils/home_5.png">
+</div>
+</details>
+
+
+<details closed>
+<summary>Login</summary>
+<div align="center">
+<img width="50%" src="./Utils/login.png">
+</div>
+</details>
+
+
+<details closed>
+<summary>AI assistant</summary>
+<div align="center">
+<img width="50%" src="./Utils/home_1.png">
+<img width="50%" src="./Utils/home_2.png">
+<img width="50%" src="./Utils/home_3.png">
+</div>
+</details>
+
+<details closed>
+<summary>Personal information & Edit</summary>
+<div align="center">
+<img width="50%" src="./Utils/personal.png">
+<img width="50%" src="./Utils/personal_2.png">
+</div>
+</details>
+
 
+<details closed>
+<summary>Merchandise upload & Track</summary>
+<div align="center">
+<img width="50%" src="./Utils/upload.png">
+<img width="50%" src="./Utils/detail.png">
+<img width="50%" src="./Utils/track.png">
+</div>
 </details>
 
-##### AI assistant
-##### preliminary
-> OpenAI API KEY
 
+<details closed>
+<summary>Merchandise reserve</summary>
+<div align="center">
+<img width="50%" src="./Utils/buy.png">
 
-  AI assistant is prompted with the following targeted scenarios:
-  - TBD
-#### Personal edition
-#### Goods
+</div>
+</details>
 
 
+<details closed>
+<summary>Email notification</summary>
+<div align="center">
+<img width="50%" src="./Utils/email_1.png">
+<img width="50%" src="./Utils/email_2.png">
+</div>
+</details>
+
+
+---
 Update time 2023-07-14