add webwand ui to readme (#135)

* feat: add screenshot of webwand to readme

* fix: center image

* Update README.md

Co-authored-by: Mengdi Chen <monday.chen@gmail.com>

* fix: added more text to explain screenshot

* fix: updated screenshots and moved it out of public folder

---------

Co-authored-by: Mengdi Chen <monday.chen@gmail.com>

README.md

@@ -12,9 +12,13 @@ Crafted on top of the innovative fusion of multi-modal Large Language Models (GP
 
 WebWand leverages the power of multi-modal Large Language Model, DOM state awareness, and semantic understanding of HTML to focus on essential webpage elements while filtering out noise. 
 
+Here is an example of WebWand annotating the website to better understand the environment.
+<img src="media/web-annotation.png" alt="Screenshot of annotated website" width="50%" style="display: block; margin: 0 auto"/>
+
+
 It also features a unique "Prior Knowledge Augmentation" system that allows WebWand to navigate websites with the wisdom of collective past experiences, crowdsourced from WebWand users. 
 
-We do NOT record your screen or collect browsing information or your prompts. It lives in your browser and uses your OpenAI key. 
+We do NOT collect your screenshots, browsing information or your prompts. It lives in your browser and is directly sent to the LLM API of your choice.
 
 ## Installing and Running
 

src/common/RecommendedTasks.tsx

@@ -3,7 +3,7 @@ import { useAppState } from "../state/store";
 
 const tasks = [
   'Post on twitter.com with content "an automated post from WebWand by @NormalComputing! :)" If I\'m not logged in, fail the task and wait for me to log in.',
-  "Find a book about AI and add a physical copy to cart on Amazon.com. Pick the cheaper one from papaerback and hardcover.",
+  "Find a book about AI and add a physical copy to cart on Amazon.com. Pick the cheaper one from paperback and hardcover.",
 ];
 
 const RecommendedTasks = ({